Merge pull request #135 from flatironinstitute/refactor/mui-non-absolute

Remove position computations, use MUI components and new splitter
flatironinstitute · Jul 23, 2024 · 5efe316 · 5efe316
2 parents 6c38d9d + a7161a5
commit 5efe316
Show file tree

Hide file tree

Showing 33 changed files with 521 additions and 1,042 deletions.
diff --git a/gui/package.json b/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"
   },

diff --git a/gui/src/app/App.tsx b/gui/src/app/App.tsx
@@ -1,26 +1,15 @@
-import { useReducer } from "react";
 import { BrowserRouter } from "react-router-dom";
-import MainWindow from "./MainWindow";
-import {
-  CustomStatusBarElementsContext,
-  customStatusBarElementsReducer,
-} from "./StatusBar";
+import ProjectContextProvider from "@SpCore/ProjectContextProvider";
+import HomePage from "@SpPages/HomePage";
 
 function App() {
-  const [customStatusBarStrings, customStatusBarStringsDispatch] = useReducer(
-    customStatusBarElementsReducer,
-    {},
-  );
   return (
     <BrowserRouter>
-      <CustomStatusBarElementsContext.Provider
-        value={{
-          customStatusBarElements: customStatusBarStrings,
-          customStatusBarElementsDispatch: customStatusBarStringsDispatch,
-        }}
-      >
-        <MainWindow />
-      </CustomStatusBarElementsContext.Provider>
+      <div className="MainWindow">
+        <ProjectContextProvider>
+          <HomePage />
+        </ProjectContextProvider>
+      </div>
     </BrowserRouter>
   );
 }

diff --git a/gui/src/app/CompilationServerConnectionControl/CompilationServerConnectionControl.tsx b/gui/src/app/CompilationServerConnectionControl/CompilationServerConnectionControl.tsx
@@ -1,6 +1,8 @@
-import { Hyperlink, SmallIconButton } from "@fi-sci/misc";
+import { 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 Link from "@mui/material/Link";
 import { FunctionComponent, useCallback, useEffect, useState } from "react";
 
 type CompilationServerConnectionControlProps = {
@@ -47,10 +49,15 @@ const CompilationServerConnectionControl: FunctionComponent<
           />
         </span>
         &nbsp;
-        <Hyperlink color="white" onClick={openDialog}>
+        <Link
+          onClick={openDialog}
+          color="white"
+          underline="none"
+          component="button"
+        >
           {isConnected ? "connected to " : "not connected to "}
           {serverLabel}
-        </Hyperlink>
+        </Link>
         &nbsp;&nbsp;
       </span>
       <ModalWindow visible={dialogVisible} onClose={closeDialog}>
@@ -127,7 +134,9 @@ const ConfigureCompilationServerDialog: FunctionComponent<
           <span className="disconnected">Not connected</span>
         )}
         &nbsp;
-        <Hyperlink onClick={onRetry}>retry</Hyperlink>
+        <Link onClick={onRetry} component="button" underline="none">
+          retry
+        </Link>
       </div>
       <hr />
       <div>
@@ -200,7 +209,7 @@ const ConfigureCompilationServerDialog: FunctionComponent<
           </div>
         )}
         <hr />
-        <button onClick={() => closeDialog()}>Close</button>
+        <Button onClick={() => closeDialog()}>Close</Button>
       </div>
     </div>
   );

diff --git a/gui/src/app/FileEditor/DataFileEditor.tsx b/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}

diff --git a/gui/src/app/FileEditor/StanCompileResultWindow.tsx b/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>
   );

diff --git a/gui/src/app/FileEditor/StanFileEditor.tsx b/gui/src/app/FileEditor/StanFileEditor.tsx
@@ -1,5 +1,6 @@
-import { Splitter } from "@fi-sci/splitter";
 import { AutoFixHigh, Cancel, Settings } from "@mui/icons-material";
+import useMediaQuery from "@mui/material/useMediaQuery";
+import { SplitDirection, Splitter } from "@SpComponents/Splitter";
 import StanCompileResultWindow from "@SpComponents/StanCompileResultWindow";
 import TextEditor, { ToolbarItem } from "@SpComponents/TextEditor";
 import compileStanProgram from "@SpStanc/compileStanProgram";
@@ -21,8 +22,6 @@ type Props = {
   setEditedFileContent: (text: string) => void;
   onDeleteFile?: () => void;
   readOnly: boolean;
-  width: number;
-  height: number;
   setCompiledUrl: (s: string) => void;
 };
 
@@ -35,8 +34,6 @@ const StanFileEditor: FunctionComponent<Props> = ({
   editedFileContent,
   setEditedFileContent,
   readOnly,
-  width,
-  height,
   setCompiledUrl,
 }) => {
   const { stancErrors, requestFormat } = useStanc(
@@ -126,7 +123,7 @@ const StanFileEditor: FunctionComponent<Props> = ({
     }
   }, [fileContent, handleCompile, didInitialCompile]);
 
-  const showLabelsOnButtons = width > 700;
+  const showLabelsOnButtons = useMediaQuery("(min-width:600px)");
   const [syntaxWindowVisible, setSyntaxWindowVisible] = useState(false);
 
   const toolbarItems: ToolbarItem[] = useMemo(() => {
@@ -141,7 +138,7 @@ const StanFileEditor: FunctionComponent<Props> = ({
         color: "darkred",
         tooltip: "Syntax error in Stan file",
         onClick: () => {
-          setSyntaxWindowVisible(true);
+          setSyntaxWindowVisible((v) => !v);
         },
       });
     } else if (hasWarnings && !!editedFileContent) {
@@ -152,14 +149,14 @@ const StanFileEditor: FunctionComponent<Props> = ({
         color: "blue",
         tooltip: "Syntax warning in Stan file",
         onClick: () => {
-          setSyntaxWindowVisible(true);
+          setSyntaxWindowVisible((v) => !v);
         },
       });
     }
 
     // auto format
     if (!readOnly) {
-      if (editedFileContent !== undefined) {
+      if (editedFileContent) {
         ret.push({
           type: "button",
           icon: <AutoFixHigh />,
@@ -170,7 +167,7 @@ const StanFileEditor: FunctionComponent<Props> = ({
         });
       }
     }
-    if (editedFileContent === fileContent) {
+    if (editedFileContent && editedFileContent === fileContent) {
       if (compileStatus !== "compiling") {
         if (validSyntax) {
           ret.push({
@@ -213,19 +210,28 @@ const StanFileEditor: FunctionComponent<Props> = ({
 
   const isCompiling = compileStatus === "compiling";
 
-  const compileResultsHeight = Math.min(300, height / 3);
+  const messagePaneNeeded = syntaxWindowVisible || !editedFileContent;
+
+  const window = messagePaneNeeded ? (
+    editedFileContent ? (
+      <StanCompileResultWindow
+        stancErrors={stancErrors}
+        onClose={() => setSyntaxWindowVisible(false)}
+      />
+    ) : (
+      <div className="StanEditorDefaultText">
+        Begin editing or select an example from the left panel
+      </div>
+    )
+  ) : (
+    <></>
+  );
+
+  const initialSizes = messagePaneNeeded ? [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 +243,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>
   );
 };