Remove position computations, use MUI components and new splitter

gui/package.json

@@ -20,11 +20,11 @@
     "test-watch": "vitest"
   },
   "dependencies": {
+    "@devbookhq/splitter": "^1.4.2",
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
     "@fi-sci/misc": "^0.0.8",
     "@fi-sci/modal-window": "^0.0.2",
-    "@fi-sci/splitter": "^0.0.3",
     "@monaco-editor/react": "^4.6.0",
     "@mui/icons-material": "^5.15.17",
     "@mui/material": "^5.15.17",
@@ -37,6 +37,7 @@
     "react-dropzone": "^14.2.3",
     "react-plotly.js": "^2.6.0",
     "react-router-dom": "^6.17.0",
+    "react-use-measure": "^2.1.1",
     "react-visibility-sensor": "^5.1.1",
     "tinystan": "^0.0.2"
   },

gui/src/app/App.tsx

@@ -1,26 +1,10 @@
-import { useReducer } from "react";
 import { BrowserRouter } from "react-router-dom";
 import MainWindow from "./MainWindow";
-import {
-  CustomStatusBarElementsContext,
-  customStatusBarElementsReducer,
-} from "./StatusBar";
 
 function App() {
-  const [customStatusBarStrings, customStatusBarStringsDispatch] = useReducer(
-    customStatusBarElementsReducer,
-    {},
-  );
   return (
     <BrowserRouter>
-      <CustomStatusBarElementsContext.Provider
-        value={{
-          customStatusBarElements: customStatusBarStrings,
-          customStatusBarElementsDispatch: customStatusBarStringsDispatch,
-        }}
-      >
-        <MainWindow />
-      </CustomStatusBarElementsContext.Provider>
+      <MainWindow />
     </BrowserRouter>
   );
 }

gui/src/app/CompilationServerConnectionControl/CompilationServerConnectionControl.tsx

@@ -1,6 +1,7 @@
 import { Hyperlink, SmallIconButton } from "@fi-sci/misc";
 import { default as ModalWindow, useModalWindow } from "@fi-sci/modal-window";
 import { Cancel, Check } from "@mui/icons-material";
+import Button from "@mui/material/Button";
 import { FunctionComponent, useCallback, useEffect, useState } from "react";
 
 type CompilationServerConnectionControlProps = {
@@ -200,7 +201,7 @@ const ConfigureCompilationServerDialog: FunctionComponent<
           </div>
         )}
         <hr />
-        <button onClick={() => closeDialog()}>Close</button>
+        <Button onClick={() => closeDialog()}>Close</Button>
       </div>
     </div>
   );

gui/src/app/FileEditor/DataFileEditor.tsx

@@ -9,8 +9,6 @@ type Props = {
   setEditedFileContent: (text: string) => void;
   onDeleteFile?: () => void;
   readOnly: boolean;
-  width: number;
-  height: number;
 };
 
 const DataFileEditor: FunctionComponent<Props> = ({
@@ -20,8 +18,6 @@ const DataFileEditor: FunctionComponent<Props> = ({
   editedFileContent,
   setEditedFileContent,
   readOnly,
-  width,
-  height,
 }) => {
   const toolbarItems: ToolbarItem[] = useMemo(() => {
     const ret: ToolbarItem[] = [];
@@ -30,8 +26,6 @@ const DataFileEditor: FunctionComponent<Props> = ({
 
   return (
     <TextEditor
-      width={width}
-      height={height}
       language="json"
       label={fileName}
       text={fileContent}

gui/src/app/FileEditor/StanCompileResultWindow.tsx

@@ -4,22 +4,18 @@ import { Close, Done } from "@mui/icons-material";
 import { FunctionComponent } from "react";
 
 type Props = {
-  width: number;
-  height: number;
   stancErrors: StancErrors;
   onClose?: () => void;
 };
 
 const StanCompileResultWindow: FunctionComponent<Props> = ({
-  width,
-  height,
   stancErrors,
   onClose,
 }) => {
   let content: any;
   if (stancErrors.errors && stancErrors.errors.length > 0) {
     content = (
-      <div className="CompileErrorsPane" style={{ width, height }}>
+      <div className="CompileErrorsPane">
         <h3>Errors</h3>
         {stancErrors.errors.slice(1).map((error, i) => (
           <div key={i} className="ErrorWarningMessage">
@@ -30,7 +26,7 @@ const StanCompileResultWindow: FunctionComponent<Props> = ({
     );
   } else if (stancErrors.warnings && stancErrors.warnings.length > 0) {
     content = (
-      <div className="CompileWarningsPane" style={{ width, height }}>
+      <div className="CompileWarningsPane">
         <h3>Warnings</h3>
         {stancErrors.warnings.map((warning, i) => (
           <div key={i} className="ErrorWarningMessage">
@@ -48,10 +44,8 @@ const StanCompileResultWindow: FunctionComponent<Props> = ({
   }
 
   return (
-    <div style={{ width, height, overflow: "auto" }}>
-      <div>
-        <SmallIconButton icon={<Close />} onClick={onClose} />
-      </div>
+    <div className="ErrorsWindow">
+      <SmallIconButton icon={<Close />} onClick={onClose} />
       {content}
     </div>
   );

gui/src/app/FileEditor/StanFileEditor.tsx

@@ -1,5 +1,5 @@
-import { Splitter } from "@fi-sci/splitter";
 import { AutoFixHigh, Cancel, Settings } from "@mui/icons-material";
+import { SplitDirection, Splitter } from "@SpComponents/Splitter";
 import StanCompileResultWindow from "@SpComponents/StanCompileResultWindow";
 import TextEditor, { ToolbarItem } from "@SpComponents/TextEditor";
 import compileStanProgram from "@SpStanc/compileStanProgram";
@@ -21,8 +21,6 @@ type Props = {
   setEditedFileContent: (text: string) => void;
   onDeleteFile?: () => void;
   readOnly: boolean;
-  width: number;
-  height: number;
   setCompiledUrl: (s: string) => void;
 };
 
@@ -35,8 +33,6 @@ const StanFileEditor: FunctionComponent<Props> = ({
   editedFileContent,
   setEditedFileContent,
   readOnly,
-  width,
-  height,
   setCompiledUrl,
 }) => {
   const { stancErrors, requestFormat } = useStanc(
@@ -126,7 +122,7 @@ const StanFileEditor: FunctionComponent<Props> = ({
     }
   }, [fileContent, handleCompile, didInitialCompile]);
 
-  const showLabelsOnButtons = width > 700;
+  const showLabelsOnButtons = 0 > 700;
   const [syntaxWindowVisible, setSyntaxWindowVisible] = useState(false);
 
   const toolbarItems: ToolbarItem[] = useMemo(() => {
@@ -141,7 +137,7 @@ const StanFileEditor: FunctionComponent<Props> = ({
         color: "darkred",
         tooltip: "Syntax error in Stan file",
         onClick: () => {
-          setSyntaxWindowVisible(true);
+          setSyntaxWindowVisible((v) => !v);
         },
       });
     } else if (hasWarnings && !!editedFileContent) {
@@ -152,7 +148,7 @@ const StanFileEditor: FunctionComponent<Props> = ({
         color: "blue",
         tooltip: "Syntax warning in Stan file",
         onClick: () => {
-          setSyntaxWindowVisible(true);
+          setSyntaxWindowVisible((v) => !v);
         },
       });
     }
@@ -213,19 +209,28 @@ const StanFileEditor: FunctionComponent<Props> = ({
 
   const isCompiling = compileStatus === "compiling";
 
-  const compileResultsHeight = Math.min(300, height / 3);
+  const window =
+    syntaxWindowVisible || !editedFileContent ? (
+      editedFileContent ? (
+        <StanCompileResultWindow
+          stancErrors={stancErrors}
+          onClose={() => setSyntaxWindowVisible(false)}
+        />
+      ) : (
+        <div className="StanEditorDefaultText">
+          Begin editing or select an example from the left panel
+        </div>
+      )
+    ) : (
+      <></>
+    );
+
+  const initialSizes =
+    syntaxWindowVisible || !editedFileContent ? [60, 40] : [100, 0];
 
   return (
-    <Splitter
-      width={width}
-      height={height}
-      initialPosition={height - compileResultsHeight}
-      direction="vertical"
-      hideSecondChild={!(!editedFileContent || syntaxWindowVisible)}
-    >
+    <Splitter direction={SplitDirection.Vertical} initialSizes={initialSizes}>
       <TextEditor
-        width={0}
-        height={0}
         // language="stan"
         language="stan"
         label={fileName}
@@ -237,18 +242,7 @@ const StanFileEditor: FunctionComponent<Props> = ({
         toolbarItems={toolbarItems}
         codeMarkers={stancErrorsToCodeMarkers(stancErrors)}
       />
-      {editedFileContent ? (
-        <StanCompileResultWindow
-          width={0}
-          height={0}
-          stancErrors={stancErrors}
-          onClose={() => setSyntaxWindowVisible(false)}
-        />
-      ) : (
-        <div className="StanEditorDefaultText">
-          Begin editing or select an example from the left panel
-        </div>
-      )}
+      {window}
     </Splitter>
   );
 };

gui/src/app/FileEditor/TextEditor.tsx

@@ -28,8 +28,6 @@ type Props = {
   onReload?: () => void;
   toolbarItems?: ToolbarItem[];
   label: string;
-  width: number;
-  height: number;
   codeMarkers?: CodeMarker[];
 };
 
@@ -60,8 +58,6 @@ const TextEditor: FunctionComponent<Props> = ({
   toolbarItems,
   language,
   label,
-  width,
-  height,
   codeMarkers,
 }) => {
   const handleChange = useCallback(
@@ -198,21 +194,10 @@ const TextEditor: FunctionComponent<Props> = ({
     [handleSave, readOnly],
   );
 
-  const toolbarHeight = 25;
   return (
-    <div
-      className="AbsoluteHidden"
-      style={{ width, height }}
-      onKeyDown={handleKeyDown}
-    >
+    <div className="EditorWithToolbar" onKeyDown={handleKeyDown}>
       <NotSelectable>
-        <div
-          className="EditorMenuBar"
-          style={{
-            width: width,
-            height: toolbarHeight,
-          }}
-        >
+        <div className="EditorMenuBar">
           <span className="EditorTitle">{label}</span>
           &nbsp;&nbsp;&nbsp;
           {!readOnly && (
@@ -230,11 +215,9 @@ const TextEditor: FunctionComponent<Props> = ({
           {readOnly && <span className="ReadOnlyText">read only</span>}
           &nbsp;&nbsp;&nbsp;
           {onReload && (
-            <LowerABit numPixels={2}>
-              <Hyperlink onClick={onReload} color="black">
-                <Refresh style={{ fontSize: 14 }} />
-              </Hyperlink>
-            </LowerABit>
+            <Hyperlink onClick={onReload} color="black">
+              <Refresh style={{ fontSize: 14 }} />
+            </Hyperlink>
           )}
           &nbsp;&nbsp;&nbsp;
           {toolbarItems &&
@@ -243,28 +226,17 @@ const TextEditor: FunctionComponent<Props> = ({
             ))}
         </div>
       </NotSelectable>
-      <div
-        className="EditorWrapper"
-        style={{
-          top: toolbarHeight,
-          width,
-          height: height - toolbarHeight,
+      <Editor
+        defaultLanguage={language}
+        onChange={handleChange}
+        onMount={handleEditorDidMount}
+        options={{
+          readOnly,
+          domReadOnly: readOnly,
+          wordWrap: wordWrap ? "on" : "off",
+          theme: "vs-stan", // unfortunately we cannot do this on a per-editor basis - it's a global setting
         }}
-      >
-        <Editor
-          width={width}
-          height={height - toolbarHeight}
-          defaultLanguage={language}
-          onChange={handleChange}
-          onMount={handleEditorDidMount}
-          options={{
-            readOnly,
-            domReadOnly: readOnly,
-            wordWrap: wordWrap ? "on" : "off",
-            theme: "vs-stan", // unfortunately we cannot do this on a per-editor basis - it's a global setting
-          }}
-        />
-      </div>
+      />
     </div>
   );
 };
@@ -330,15 +302,6 @@ const ToolbarItemComponent: FunctionComponent<{ item: ToolbarItem }> = ({
   }
 };
 
-// TODO: Consider whether to change this
-const LowerABit: FunctionComponent<
-  PropsWithChildren<{ numPixels: number }>
-> = ({ children, numPixels }) => {
-  return (
-    <span style={{ position: "relative", top: numPixels }}>{children}</span>
-  );
-};
-
 const NotSelectable: FunctionComponent<PropsWithChildren> = ({ children }) => {
   return <div className="NotSelectable">{children}</div>;
 };