rename message to hint
Alexander Bentkamp
3 years ago
parent
ecc9a488a2
commit
8c4b995a32
@ -1,152 +0,0 @@
|
||||
import * as React from 'react';
|
||||
import { useEffect, useState, useRef } from 'react';
|
||||
import { EditorApi } from '@leanprover/infoview-api'
|
||||
import { LeanClient } from 'lean4web/client/src/editor/leanclient';
|
||||
import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js'
|
||||
import * as ls from 'vscode-languageserver-protocol'
|
||||
import TacticState from './TacticState';
|
||||
import { useLeanClient } from '../connection';
|
||||
import { useAppDispatch } from '../hooks';
|
||||
import { levelCompleted, selectCompleted } from '../state/progress';
|
||||
|
||||
// TODO: move into Lean 4 web
|
||||
function toLanguageServerPosition (pos: monaco.Position): ls.Position {
|
||||
return {line : pos.lineNumber - 1, character: pos.column - 1}
|
||||
}
|
||||
|
||||
function Infoview({ worldId, levelId, editor, editorApi } : {worldId: string, levelId: number, editor: monaco.editor.IStandaloneCodeEditor, editorApi: EditorApi}) {
|
||||
const dispatch = useAppDispatch()
|
||||
const [rpcSession, setRpcSession] = useState<string>()
|
||||
const [goals, setGoals] = useState<any[]>(null)
|
||||
const [completed, setCompleted] = useState<boolean>(false)
|
||||
const [diagnostics, setDiagnostics] = useState<any[]>(undefined)
|
||||
|
||||
/* `globalDiagnostics` is a work-around to show something when the proof is complete
|
||||
but had previous subgoals with `sorry` or errors.
|
||||
|
||||
It is displayed whenever there are no goals and no (error)-messages present and the proof
|
||||
isn't complete. */
|
||||
const [globalDiagnostics, setGlobalDiagnostics] = useState<any[]>(undefined)
|
||||
|
||||
const {uri} = useEditorUri(editor)
|
||||
const {leanClient, leanClientStarted} = useLeanClient()
|
||||
|
||||
const fetchInteractiveGoals = () => {
|
||||
if (editor && rpcSession && editor.getPosition()) {
|
||||
const pos = toLanguageServerPosition(editor.getPosition())
|
||||
|
||||
leanClient.sendRequest("$/lean/rpc/call", {"method":"Game.getGoals",
|
||||
"params":{"textDocument":{uri}, "position": pos},
|
||||
"sessionId":rpcSession,
|
||||
"textDocument":{uri},
|
||||
"position": pos
|
||||
}).then((res) => {
|
||||
setGoals(res ? res.goals : null)
|
||||
console.log(goals)
|
||||
}).catch((err) => {
|
||||
console.error(err)
|
||||
})
|
||||
|
||||
leanClient.sendRequest("$/lean/rpc/call", {"method":"Game.getDiagnostics",
|
||||
"params":{"textDocument":{uri}, "lineRange": {start: pos.line, end: pos.line + 1}},
|
||||
"sessionId":rpcSession,
|
||||
"textDocument":{uri},
|
||||
"position": pos
|
||||
}).then((res) => {
|
||||
|
||||
/* Workaround to not display the error `unsolved goals` */
|
||||
if (res) {res = res.filter(x => x.message.trim() !== 'unsolved goals')}
|
||||
|
||||
setDiagnostics(res ? res : undefined)
|
||||
console.log(res)
|
||||
}).catch((err) => {
|
||||
console.error(err)
|
||||
})
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
const checkCompleted = () => {
|
||||
if (editor && rpcSession && editor.getPosition()) {
|
||||
const pos = toLanguageServerPosition(editor.getPosition())
|
||||
// Get all diagnostics independent of cursor position
|
||||
leanClient.sendRequest("$/lean/rpc/call", {"method":"Game.getDiagnostics",
|
||||
"params":{"textDocument":{uri},},
|
||||
"sessionId":rpcSession,
|
||||
"textDocument":{uri},
|
||||
"position": pos
|
||||
}).then((res) => {
|
||||
// Check that there are no errors and no warnings
|
||||
const completed = !res.some(({severity}) => severity <= 2)
|
||||
if (completed) {
|
||||
dispatch(levelCompleted({world: worldId, level: levelId}))
|
||||
}
|
||||
setCompleted(completed)
|
||||
setGlobalDiagnostics(res)
|
||||
}).catch((err) => {
|
||||
console.error(err)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (editor) {
|
||||
fetchInteractiveGoals()
|
||||
checkCompleted()
|
||||
}
|
||||
}, [editor, uri, rpcSession]);
|
||||
|
||||
useEffect(() => {
|
||||
if (editorApi && leanClientStarted && uri) {
|
||||
editorApi.closeRpcSession(rpcSession)
|
||||
setRpcSession(undefined)
|
||||
console.log(uri)
|
||||
editorApi.createRpcSession(uri).then((rpcSession) => {
|
||||
setRpcSession(rpcSession)
|
||||
})
|
||||
}
|
||||
}, [editorApi, uri]);
|
||||
|
||||
useEffect(() => {
|
||||
if (editor) {
|
||||
const t = editor.onDidChangeCursorPosition(async (ev) => {
|
||||
fetchInteractiveGoals()
|
||||
})
|
||||
return () => { t.dispose() }
|
||||
}
|
||||
}, [editor, rpcSession])
|
||||
|
||||
useEffect(() => {
|
||||
const t = leanClient.didChange(async (ev) => {
|
||||
fetchInteractiveGoals()
|
||||
checkCompleted()
|
||||
})
|
||||
return () => { t.dispose() }
|
||||
}, [editor, leanClient, rpcSession])
|
||||
|
||||
return (<div>
|
||||
<TacticState goals={goals} diagnostics={diagnostics} completed={completed}
|
||||
globalDiagnostics={globalDiagnostics}></TacticState>
|
||||
</div>)
|
||||
}
|
||||
|
||||
export default Infoview
|
||||
|
||||
const useEditorUri = (editor: monaco.editor.IStandaloneCodeEditor) => {
|
||||
const [uri, setUri] = useState<string>(undefined)
|
||||
|
||||
useEffect(() => {
|
||||
if (editor) {
|
||||
const t = editor.onDidChangeModel((ev) => {
|
||||
if (ev.newModelUrl) {
|
||||
setUri(ev.newModelUrl.toString())
|
||||
} else {
|
||||
setUri(undefined)
|
||||
}
|
||||
})
|
||||
return () => {t.dispose()}
|
||||
}
|
||||
}, [editor])
|
||||
|
||||
return {uri}
|
||||
}
|
||||
@ -1,142 +0,0 @@
|
||||
import * as React from 'react';
|
||||
import '@fontsource/roboto/300.css';
|
||||
import '@fontsource/roboto/400.css';
|
||||
import '@fontsource/roboto/500.css';
|
||||
import '@fontsource/roboto/700.css';
|
||||
|
||||
import List from '@mui/material/List';
|
||||
import ListItem from '@mui/material/ListItem';
|
||||
import { Paper, Box, Typography, Alert, FormControlLabel, FormGroup, Switch, Collapse, CircularProgress } from '@mui/material';
|
||||
import { Accordion, AccordionSummary, AccordionDetails, Divider } from '@mui/material';
|
||||
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
|
||||
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
||||
import { faArrowPointer } from '@fortawesome/free-solid-svg-icons'
|
||||
import Markdown from './Markdown';
|
||||
|
||||
// TODO: Dead variables (x✝) are not displayed correctly.
|
||||
|
||||
function Goal({ goal }) {
|
||||
|
||||
const [showHints, setShowHints] = React.useState(false);
|
||||
|
||||
const handleHintsChange = () => {
|
||||
setShowHints((prev) => !prev);
|
||||
};
|
||||
|
||||
const hasObject = typeof goal.objects === "object" && goal.objects.length > 0
|
||||
const hasAssumption = typeof goal.assumptions === "object" && goal.assumptions.length > 0
|
||||
const openMessages = typeof goal.messages === "object" ? goal.messages.filter((msg) => ! msg.spoiler) : []
|
||||
const hints = typeof goal.messages === "object" ? goal.messages.filter((msg) => msg.spoiler) : []
|
||||
const hasHints = hints.length > 0
|
||||
return (
|
||||
<Box sx={{ pl: 2 }}>
|
||||
{hasObject && <Box><Typography>Objects</Typography>
|
||||
<List>
|
||||
{goal.objects.map((item, index) =>
|
||||
<ListItem key={index}>
|
||||
<Typography color="primary" sx={{ mr: 1 }}>{item.userName}</Typography> :
|
||||
<Typography color="secondary" sx={{ ml: 1 }}>{item.type}</Typography>
|
||||
</ListItem>)}
|
||||
</List></Box>}
|
||||
{hasAssumption && <Box><Typography>Assumptions</Typography>
|
||||
<List>
|
||||
{goal.assumptions.map((item, index) => <ListItem key={index}><Typography color="primary" sx={{ mr: 1 }}>{item.userName}</Typography> :
|
||||
<Typography color="secondary" sx={{ ml: 1 }}>{item.type}</Typography></ListItem>)}
|
||||
</List></Box>}
|
||||
<Typography>Prove:</Typography>
|
||||
<Typography color="primary" sx={{ ml: 2 }}>{goal.goal}</Typography>
|
||||
{openMessages.map((message) => <Alert severity="info" sx={{ mt: 1 }}><Markdown>{message.message}</Markdown></Alert>)}
|
||||
{hasHints &&
|
||||
<FormControlLabel
|
||||
control={<Switch checked={showHints} onChange={handleHintsChange} />}
|
||||
label="More Help?"
|
||||
/>}
|
||||
{hints.map((hint, index) => <Collapse key={index} in={showHints}><Alert severity="info" sx={{ mt: 1 }}><Markdown>{hint.message}</Markdown></Alert></Collapse>)}
|
||||
</Box>)
|
||||
}
|
||||
|
||||
/* Function to display a goal that is not the main goal. */
|
||||
function OtherGoal({ goal }) {
|
||||
|
||||
const hasObject = typeof goal.objects === "object" && goal.objects.length > 0
|
||||
const hasAssumption = typeof goal.assumptions === "object" && goal.assumptions.length > 0
|
||||
|
||||
return (
|
||||
<Accordion>
|
||||
<AccordionSummary expandIcon={<ExpandMoreIcon />}>
|
||||
<Typography color="primary" sx={{ ml: 0 }}>⊢ {goal.goal}</Typography>
|
||||
</AccordionSummary>
|
||||
<AccordionDetails sx={{ backgroundColor: "aliceblue" }}>
|
||||
{hasObject &&
|
||||
<Box>
|
||||
<Typography>Objects</Typography>
|
||||
<List>
|
||||
{goal.objects.map((item, index) =>
|
||||
<ListItem key={index}>
|
||||
<Typography color="primary" sx={{ mr: 1 }}>{item.userName}</Typography> :
|
||||
<Typography color="secondary" sx={{ ml: 1 }}>{item.type}</Typography>
|
||||
</ListItem>)}
|
||||
</List>
|
||||
</Box>}
|
||||
{hasAssumption &&
|
||||
<Box>
|
||||
<Typography>Assumptions</Typography>
|
||||
<List>
|
||||
{goal.assumptions.map((item, index) =>
|
||||
<ListItem key={index}>
|
||||
<Typography color="primary" sx={{ mr: 1 }}>{item.userName}</Typography> :
|
||||
<Typography color="secondary" sx={{ ml: 1 }}>{item.type}</Typography>
|
||||
</ListItem>)}
|
||||
</List>
|
||||
</Box>}
|
||||
<Typography>Prove:</Typography>
|
||||
<Typography color="primary" sx={{ ml: 2 }}>{goal.goal}</Typography>
|
||||
</AccordionDetails>
|
||||
</Accordion>)
|
||||
}
|
||||
|
||||
function TacticState({ goals, diagnostics, completed, globalDiagnostics }) {
|
||||
const isLoading = goals === null
|
||||
const hasGoal = goals !== null && goals.length > 0
|
||||
const hasManyGoal = hasGoal && goals.length > 1
|
||||
|
||||
if (!(hasGoal || completed) && globalDiagnostics) {
|
||||
diagnostics = [{"severity" : 4, "message": "Showing global messages:"}, ...globalDiagnostics]
|
||||
}
|
||||
|
||||
const hasError = typeof diagnostics === "object" && diagnostics.length > 0
|
||||
|
||||
return (
|
||||
<Box sx={{ height: "100%" }}>
|
||||
{completed && <Typography variant="h6">Level completed ! 🎉</Typography>}
|
||||
{hasGoal &&
|
||||
<Paper sx={{ pt: 1, pl: 2, pr: 3, pb: 1, height: "100%" }}>
|
||||
<Typography variant="h5">Main Goal
|
||||
(at <FontAwesomeIcon icon={faArrowPointer}></FontAwesomeIcon>)
|
||||
</Typography>
|
||||
<Goal goal={goals[0]} />
|
||||
</Paper>}
|
||||
{isLoading && <CircularProgress />}
|
||||
{!(hasGoal || completed || isLoading) &&
|
||||
<Typography variant="h6">
|
||||
No goals
|
||||
(at <FontAwesomeIcon icon={faArrowPointer}></FontAwesomeIcon>)
|
||||
</Typography>}
|
||||
{hasError &&
|
||||
<Paper sx={{ pt: 1, pl: 2, pr: 3, pb: 1, height: "100%" }}>
|
||||
<Typography variant="h5" sx={{ mb: 2 }}>Lean says</Typography>
|
||||
{diagnostics.map(({severity, message}, index) =>
|
||||
<Alert key={index} severity={{1: "error", 2:"warning", 3:"info", 4:"success"}[severity]} sx={{ mt: 1 }}>{message}</Alert>
|
||||
// TODO: When does Lean give severity=4? Had colour `gray` before. Make custom theme for that
|
||||
)}
|
||||
</Paper>}
|
||||
{hasManyGoal && <Paper sx={{ pt: 1, pl: 2, pr: 3, pb: 1, mt: 1 }}>
|
||||
<Typography variant="h5" sx={{ mb: 2 }}>Further Goals</Typography>
|
||||
{goals.slice(1).map((goal, index) => <Paper><OtherGoal key={index} goal={goal} /></Paper>)}
|
||||
</Paper>}
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
export default TacticState
|
||||
Loading…
Reference in New Issue