Replace fi-sci modal with direct use of MUI component.

gui/package.json

@@ -23,10 +23,9 @@
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
     "@fi-sci/misc": "^0.0.8",
-    "@fi-sci/modal-window": "^0.0.2",
     "@geoffcox/react-splitter": "^2.1.2",
     "@monaco-editor/react": "^4.6.0",
-    "@mui/icons-material": "^5.15.17",
+    "@mui/icons-material": "^5.16.5",
     "@mui/material": "^5.15.17",
     "@octokit/rest": "^21.0.0",
     "@vercel/analytics": "^1.3.1",

gui/src/app/App.tsx

@@ -1,17 +1,23 @@
-import { BrowserRouter } from "react-router-dom";
+import { createTheme } from "@mui/material";
+import { ThemeProvider } from "@mui/system";
 import ProjectContextProvider from "@SpCore/ProjectContextProvider";
 import HomePage from "@SpPages/HomePage";
 import { Analytics } from "@vercel/analytics/react";
+import { BrowserRouter } from "react-router-dom";
+
+const theme = createTheme();
 
 function App() {
   return (
     <BrowserRouter>
-      <div className="MainWindow">
-        <ProjectContextProvider>
-          <HomePage />
-        </ProjectContextProvider>
-        <Analytics />
-      </div>
+      <ThemeProvider theme={theme}>
+        <div className="MainWindow">
+          <ProjectContextProvider>
+            <HomePage />
+          </ProjectContextProvider>
+          <Analytics />
+        </div>
+      </ThemeProvider>
     </BrowserRouter>
   );
 }

gui/src/app/CompilationServerConnectionControl/CompilationServerConnectionControl.tsx

@@ -1,17 +1,20 @@
 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 CloseableDialog, {
+  useDialogControls,
+} from "@SpComponents/CloseableDialog";
 import { FunctionComponent, useCallback, useEffect, useState } from "react";
+import ConfigureCompilationServerDialog from "./ConfigureCompilationServerDialog";
+
+export const publicUrl = "https://trom-stan-wasm-server.magland.org";
+export const localUrl = "http://localhost:8083";
 
 type CompilationServerConnectionControlProps = {
   // none
 };
 
-const publicUrl = "https://trom-stan-wasm-server.magland.org";
-const localUrl = "http://localhost:8083";
-
 const CompilationServerConnectionControl: FunctionComponent<
   CompilationServerConnectionControlProps
 > = () => {
@@ -26,8 +29,8 @@ const CompilationServerConnectionControl: FunctionComponent<
   const {
     handleOpen: openDialog,
     handleClose: closeDialog,
-    visible: dialogVisible,
-  } = useModalWindow();
+    open,
+  } = useDialogControls();
 
   const handleRetry = useCallback(() => {
     retryConnection();
@@ -60,15 +63,20 @@ const CompilationServerConnectionControl: FunctionComponent<
         </Link>
         &nbsp;&nbsp;
       </span>
-      <ModalWindow visible={dialogVisible} onClose={closeDialog}>
+      <CloseableDialog
+        title="Select a compilation server"
+        id="compilationDialog"
+        open={open}
+        handleClose={closeDialog}
+      >
         <ConfigureCompilationServerDialog
           stanWasmServerUrl={stanWasmServerUrl}
           setStanWasmServerUrl={setStanWasmServerUrl}
           isConnected={isConnected}
           closeDialog={closeDialog}
           onRetry={handleRetry}
         />
-      </ModalWindow>
+      </CloseableDialog>
     </span>
   );
 };
@@ -96,123 +104,4 @@ const useIsConnected = (stanWasmServerUrl: string) => {
   return { isConnected, retryConnection };
 };
 
-type ConfigureCompilationServerDialogProps = {
-  stanWasmServerUrl: string;
-  setStanWasmServerUrl: (url: string) => void;
-  isConnected: boolean;
-  closeDialog: () => void;
-  onRetry: () => void;
-};
-
-const ConfigureCompilationServerDialog: FunctionComponent<
-  ConfigureCompilationServerDialogProps
-> = ({
-  stanWasmServerUrl,
-  setStanWasmServerUrl,
-  isConnected,
-  closeDialog,
-  onRetry,
-}) => {
-  const [choice, setChoice] = useState<"public" | "local" | "custom">("custom");
-  useEffect(() => {
-    if (stanWasmServerUrl === publicUrl) setChoice("public");
-    else if (stanWasmServerUrl === localUrl) setChoice("local");
-    else setChoice("custom");
-  }, [stanWasmServerUrl]);
-  return (
-    <div>
-      <h3>Select a compilation server</h3>
-      <p>
-        While the sampling is performed locally in the browser, a compilation
-        server is required to compile the Stan programs.
-      </p>
-      <hr />
-      <div>
-        {isConnected ? (
-          <span className="connected">Connected</span>
-        ) : (
-          <span className="disconnected">Not connected</span>
-        )}
-        &nbsp;
-        <Link onClick={onRetry} component="button" underline="none">
-          retry
-        </Link>
-      </div>
-      <hr />
-      <div>
-        <input
-          type="radio"
-          id="public"
-          name="server"
-          value="public"
-          checked={choice === "public"}
-          onChange={() => {
-            if (choice === "custom") setChoice("public");
-            setStanWasmServerUrl(publicUrl);
-          }}
-        />
-        <label htmlFor="public">Public server</label>
-        <br />
-
-        <input
-          type="radio"
-          id="local"
-          name="server"
-          value="local"
-          checked={choice === "local"}
-          onChange={() => {
-            if (choice === "custom") setChoice("local");
-            setStanWasmServerUrl(localUrl);
-          }}
-        />
-        <label htmlFor="local">Local server</label>
-        <br />
-
-        <input
-          type="radio"
-          id="custom"
-          name="server"
-          value="custom"
-          checked={choice === "custom"}
-          onChange={() => setChoice("custom")}
-        />
-        <label htmlFor="custom">Custom server</label>
-        <br />
-
-        <input
-          // This one isn't honoring a class-based style for some reason
-          style={{ width: 500 }}
-          disabled={choice !== "custom"}
-          type="text"
-          value={stanWasmServerUrl}
-          onChange={(e) => setStanWasmServerUrl(e.target.value)}
-        />
-        <br />
-        <hr />
-        {choice === "local" && (
-          <div>
-            <p>To start a local compilation server:</p>
-            <div>
-              <pre>
-                docker run -p 8083:8080 -it magland/stan-wasm-server:latest
-              </pre>
-            </div>
-          </div>
-        )}
-        {choice === "public" && (
-          <div>
-            <p>
-              The public server is provided for convenience, but may not be as
-              reliable as a local server, depending on the current load and
-              availability.
-            </p>
-          </div>
-        )}
-        <hr />
-        <Button onClick={() => closeDialog()}>Close</Button>
-      </div>
-    </div>
-  );
-};
-
 export default CompilationServerConnectionControl;

gui/src/app/CompilationServerConnectionControl/ConfigureCompilationServerDialog.tsx

@@ -0,0 +1,124 @@
+import Button from "@mui/material/Button";
+import Link from "@mui/material/Link";
+import { FunctionComponent, useEffect, useState } from "react";
+import { localUrl, publicUrl } from "./CompilationServerConnectionControl";
+
+type ConfigureCompilationServerDialogProps = {
+  stanWasmServerUrl: string;
+  setStanWasmServerUrl: (url: string) => void;
+  isConnected: boolean;
+  closeDialog: () => void;
+  onRetry: () => void;
+};
+
+const ConfigureCompilationServerDialog: FunctionComponent<
+  ConfigureCompilationServerDialogProps
+> = ({
+  stanWasmServerUrl,
+  setStanWasmServerUrl,
+  isConnected,
+  closeDialog,
+  onRetry,
+}) => {
+  const [choice, setChoice] = useState<"public" | "local" | "custom">("custom");
+  useEffect(() => {
+    if (stanWasmServerUrl === publicUrl) setChoice("public");
+    else if (stanWasmServerUrl === localUrl) setChoice("local");
+    else setChoice("custom");
+  }, [stanWasmServerUrl]);
+  return (
+    <div className="dialogWrapper">
+      <p>
+        While the sampling is performed locally in the browser, a compilation
+        server is required to compile the Stan programs.
+      </p>
+      <hr />
+      <div>
+        {isConnected ? (
+          <span className="connected">Connected</span>
+        ) : (
+          <span className="disconnected">Not connected</span>
+        )}
+        &nbsp;
+        <Link onClick={onRetry} component="button" underline="none">
+          retry
+        </Link>
+      </div>
+      <hr />
+      <div>
+        <input
+          type="radio"
+          id="public"
+          name="server"
+          value="public"
+          checked={choice === "public"}
+          onChange={() => {
+            if (choice === "custom") setChoice("public");
+            setStanWasmServerUrl(publicUrl);
+          }}
+        />
+        <label htmlFor="public">Public server</label>
+        <br />
+
+        <input
+          type="radio"
+          id="local"
+          name="server"
+          value="local"
+          checked={choice === "local"}
+          onChange={() => {
+            if (choice === "custom") setChoice("local");
+            setStanWasmServerUrl(localUrl);
+          }}
+        />
+        <label htmlFor="local">Local server</label>
+        <br />
+
+        <input
+          type="radio"
+          id="custom"
+          name="server"
+          value="custom"
+          checked={choice === "custom"}
+          onChange={() => setChoice("custom")}
+        />
+        <label htmlFor="custom">Custom server</label>
+        <br />
+
+        <input
+          // This one isn't honoring a class-based style for some reason
+          style={{ width: 500 }}
+          disabled={choice !== "custom"}
+          type="text"
+          value={stanWasmServerUrl}
+          onChange={(e) => setStanWasmServerUrl(e.target.value)}
+        />
+        <br />
+        <hr />
+        {choice === "local" && (
+          <div>
+            <p>To start a local compilation server:</p>
+            <div>
+              <pre>
+                docker run -p 8083:8080 -it magland/stan-wasm-server:latest
+              </pre>
+            </div>
+          </div>
+        )}
+        {choice === "public" && (
+          <div>
+            <p>
+              The public server is provided for convenience, but may not be as
+              reliable as a local server, depending on the current load and
+              availability.
+            </p>
+          </div>
+        )}
+        <hr />
+        <Button onClick={() => closeDialog()}>Close</Button>
+      </div>
+    </div>
+  );
+};
+
+export default ConfigureCompilationServerDialog;