Merge pull request #73 from flatironinstitute/hide-syntax-error-window-3

hide syntax error window by default
flatironinstitute · Jun 26, 2024 · 6e9f7ad · 6e9f7ad
2 parents 17211fc + 917bda8
commit 6e9f7ad
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 12 deletions.
diff --git a/gui/src/app/FileEditor/StanCompileResultWindow.tsx b/gui/src/app/FileEditor/StanCompileResultWindow.tsx
@@ -1,33 +1,45 @@
-import { Done } from "@mui/icons-material";
+import { Close, Done } from "@mui/icons-material";
 import { FunctionComponent } from "react";
 import { StancErrors } from "../Stanc/Types";
+import { SmallIconButton } from "@fi-sci/misc";
 
 type Props = {
     width: number
     height: number
-    stancErrors: StancErrors,
+    stancErrors: StancErrors
+    onClose?: () => void
 }
 
-const StanCompileResultWindow: FunctionComponent<Props> = ({ width, height, stancErrors }) => {
-
+const StanCompileResultWindow: FunctionComponent<Props> = ({ width, height, stancErrors, onClose }) => {
+    let content: any
     if ((stancErrors.errors) && (stancErrors.errors.length > 0)) {
-        return (
+        content = (
             <div style={{ width, height, color: 'red', padding: 0, overflow: 'auto' }}>
                 <h3>Errors</h3>
                 {stancErrors.errors.slice(1).map((error, i) => <div key={i} style={{ font: 'courier', fontSize: 13 }}><pre>{error}</pre></div>)}
             </div>
         )
     }
-    if ((stancErrors.warnings) && (stancErrors.warnings.length > 0)) {
-        return (
+    else if ((stancErrors.warnings) && (stancErrors.warnings.length > 0)) {
+        content = (
             <div style={{ width, height, color: 'blue', padding: 0, overflow: 'auto' }}>
                 <h3>Warnings</h3>
                 {stancErrors.warnings.map((warning, i) => <div key={i} style={{ font: 'courier', fontSize: 13 }}><pre>{warning}</pre></div>)}
             </div>
         )
     }
+    else {
+        content = (<div style={{ color: 'green' }}><Done /></div>)
+    }
 
-    return (<div style={{ color: 'green' }}><Done /></div>)
+    return (
+        <div style={{width, height, overflow: 'auto'}}>
+            <div>
+                <SmallIconButton icon={<Close />} onClick={onClose} />
+            </div>
+            {content}
+        </div>
+    )
 }
 
 export default StanCompileResultWindow
diff --git a/gui/src/app/FileEditor/StanFileEditor.tsx b/gui/src/app/FileEditor/StanFileEditor.tsx
@@ -1,5 +1,5 @@
 import { Splitter } from '@fi-sci/splitter';
-import { AutoFixHigh, Settings, } from "@mui/icons-material";
+import { AutoFixHigh, Cancel, Settings, } from "@mui/icons-material";
 import { FunctionComponent, useCallback, useEffect, useMemo, useState } from "react";
 import StanCompileResultWindow from "./StanCompileResultWindow";
 import useStanc from "../Stanc/useStanc";
@@ -29,6 +29,10 @@ const StanFileEditor: FunctionComponent<Props> = ({ fileName, fileContent, onSav
         return stancErrors.errors === undefined
     }, [stancErrors]);
 
+    const hasWarnings = useMemo(() => {
+        return (stancErrors.warnings) && (stancErrors.warnings.length > 0)
+    }, [stancErrors])
+
     const [compileStatus, setCompileStatus] = useState<CompileStatus>('')
     const [theStanFileContentThasHasBeenCompiled, setTheStanFileContentThasHasBeenCompiled] = useState<string>('')
     const [compileMessage, setCompileMessage] = useState<string>('')
@@ -89,17 +93,42 @@ const StanFileEditor: FunctionComponent<Props> = ({ fileName, fileContent, onSav
         }
     }, [fileContent, handleCompile, didInitialCompile])
 
+    const showLabelsOnButtons = width > 700
+    const [syntaxWindowVisible, setSyntaxWindowVisible] = useState(false)
+
     const toolbarItems: ToolbarItem[] = useMemo(() => {
         const ret: ToolbarItem[] = []
 
+        // invalid syntax
+        if ((!validSyntax) && (!!editedFileContent)) {
+            ret.push({
+                type: 'button',
+                icon: <Cancel />,
+                label: showLabelsOnButtons ? 'Syntax error' : '',
+                color: 'darkred',
+                tooltip: 'Syntax error in Stan file',
+                onClick: () => { setSyntaxWindowVisible(true) }
+            })
+        }
+        else if ((hasWarnings) && (!!editedFileContent)) {
+            ret.push({
+                type: 'button',
+                icon: <Cancel />,
+                label: showLabelsOnButtons ? 'Syntax warning' : '',
+                color: 'blue',
+                tooltip: 'Syntax warning in Stan file',
+                onClick: () => { setSyntaxWindowVisible(true) }
+            })
+        }
+
         // auto format
         if (!readOnly) {
             if (editedFileContent !== undefined) {
                 ret.push({
                     type: 'button',
                     icon: <AutoFixHigh />,
                     tooltip: 'Auto format this stan file',
-                    label: 'auto format',
+                    label: showLabelsOnButtons ? 'auto format': undefined,
                     onClick: requestFormat,
                     color: 'darkblue'
                 })
@@ -128,7 +157,7 @@ const StanFileEditor: FunctionComponent<Props> = ({ fileName, fileContent, onSav
         }
 
         return ret
-    }, [editedFileContent, fileContent, requestFormat, handleCompile, compileStatus, compileMessage, validSyntax, readOnly])
+    }, [editedFileContent, fileContent, handleCompile, requestFormat, showLabelsOnButtons, validSyntax, compileStatus, compileMessage, readOnly])
 
     const isCompiling = compileStatus === 'compiling'
 
@@ -140,6 +169,7 @@ const StanFileEditor: FunctionComponent<Props> = ({ fileName, fileContent, onSav
             height={height}
             initialPosition={height - compileResultsHeight}
             direction="vertical"
+            hideSecondChild={!(!editedFileContent || syntaxWindowVisible)}
         >
             <TextEditor
                 width={0}
@@ -159,6 +189,7 @@ const StanFileEditor: FunctionComponent<Props> = ({ fileName, fileContent, onSav
                     width={0}
                     height={0}
                     stancErrors={stancErrors}
+                    onClose={() => setSyntaxWindowVisible(false)}
                 /> : (
                     <div style={{ padding: 20 }}>Select an example from the left panel</div>
                 )

diff --git a/gui/src/app/FileEditor/TextEditor.tsx b/gui/src/app/FileEditor/TextEditor.tsx
@@ -186,7 +186,7 @@ const ToolbarItemComponent: FunctionComponent<{item: ToolbarItem}> = ({item}) =>
         const {onClick, color, label, tooltip, icon} = item
         if (icon) {
             return (
-                <span>
+                <span style={{color}}>
                 <SmallIconButton
                     onClick={onClick}
                     icon={icon}