Use MUI for connection controls

gui/src/app/CompilationServerConnectionControl/CompilationServerConnectionControl.tsx

@@ -1,12 +1,12 @@
-import { SmallIconButton } from "@fi-sci/misc";
 import { Cancel, Check } from "@mui/icons-material";
-import Link from "@mui/material/Link";
 
 import CloseableDialog, {
   useDialogControls,
 } from "@SpComponents/CloseableDialog";
 import { FunctionComponent, useCallback, useEffect, useState } from "react";
 import ConfigureCompilationServerDialog from "./ConfigureCompilationServerDialog";
+import IconButton from "@mui/material/IconButton";
+import Typography from "@mui/material/Typography";
 
 export const publicUrl = "https://trom-stan-wasm-server.magland.org";
 export const localUrl = "http://localhost:8083";
@@ -43,26 +43,19 @@ const CompilationServerConnectionControl: FunctionComponent<
         ? "local"
         : "custom";
   return (
-    <span>
-      <span className="CompilationServerConnectionPane">
-        <span className={isConnected ? "connected" : "disconnected"}>
-          <SmallIconButton
-            icon={isConnected ? <Check /> : <Cancel />}
-            onClick={openDialog}
-          />
-        </span>
+    <>
+      <IconButton onClick={openDialog} color="inherit" size="small">
+        {isConnected ? (
+          <Check htmlColor="lightgreen" fontSize="inherit" />
+        ) : (
+          <Cancel htmlColor="pink" fontSize="inherit" />
+        )}
         &nbsp;
-        <Link
-          onClick={openDialog}
-          color="white"
-          underline="none"
-          component="button"
-        >
+        <Typography color="white" fontSize={12}>
           {isConnected ? "connected to " : "not connected to "}
           {serverLabel}
-        </Link>
-        &nbsp;&nbsp;
-      </span>
+        </Typography>
+      </IconButton>
       <CloseableDialog
         title="Select a compilation server"
         id="compilationDialog"
@@ -77,7 +70,7 @@ const CompilationServerConnectionControl: FunctionComponent<
           onRetry={handleRetry}
         />
       </CloseableDialog>
-    </span>
+    </>
   );
 };
 

gui/src/app/CompilationServerConnectionControl/ConfigureCompilationServerDialog.tsx

@@ -1,7 +1,18 @@
 import Button from "@mui/material/Button";
 import Link from "@mui/material/Link";
-import { FunctionComponent, useEffect, useState } from "react";
+import { FunctionComponent, useCallback, useState } from "react";
 import { localUrl, publicUrl } from "./CompilationServerConnectionControl";
+import FormControl from "@mui/material/FormControl";
+import {
+  Divider,
+  FormControlLabel,
+  FormLabel,
+  Radio,
+  RadioGroup,
+  TextField,
+} from "@mui/material";
+
+type ServerType = "public" | "local" | "custom";
 
 type ConfigureCompilationServerDialogProps = {
   stanWasmServerUrl: string;
@@ -20,103 +31,103 @@ const ConfigureCompilationServerDialog: FunctionComponent<
   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]);
+  const [choice, setChoice] = useState<ServerType>("custom");
+
+  const makeChoice = useCallback(
+    (_: unknown, choice: string) => {
+      if (choice === "public") {
+        setStanWasmServerUrl(publicUrl);
+      } else if (choice === "local") {
+        setStanWasmServerUrl(localUrl);
+      } else if (choice !== "custom") {
+        return;
+      }
+      setChoice(choice);
+    },
+    [setStanWasmServerUrl],
+  );
+
   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 />
+      <Divider />
       <div>
-        {isConnected ? (
-          <span className="connected">Connected</span>
-        ) : (
-          <span className="disconnected">Not connected</span>
-        )}
-        &nbsp;
-        <Link onClick={onRetry} component="button" underline="none">
-          retry
-        </Link>
+        <p>
+          {isConnected ? (
+            <span className="connected">Connected</span>
+          ) : (
+            <span className="disconnected">Not connected</span>
+          )}
+          &nbsp;
+          <Link onClick={onRetry} component="button" underline="none">
+            retry
+          </Link>
+        </p>
       </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 />
+      <Divider />
 
-        <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 />
+      <FormControl>
+        <FormLabel id="compilation-server-selection">
+          Compilation server
+        </FormLabel>
+        <RadioGroup value={choice} onChange={makeChoice}>
+          <FormControlLabel
+            value="public"
+            control={<Radio />}
+            label="Public server"
+          />
+          <FormControlLabel
+            value="local"
+            control={<Radio />}
+            label="Local server"
+          />
+          <FormControlLabel
+            value="custom"
+            control={<Radio />}
+            label="Custom server"
+          />
+        </RadioGroup>
 
-        <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" && (
+        {choice === "custom" && (
           <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.
+              <TextField
+                variant="standard"
+                label="Custom server URL"
+                disabled={choice !== "custom"}
+                value={stanWasmServerUrl}
+                onChange={(e) => setStanWasmServerUrl(e.target.value)}
+              />
             </p>
           </div>
         )}
-        <hr />
-        <Button onClick={() => closeDialog()}>Close</Button>
-      </div>
+      </FormControl>
+
+      {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>
+      )}
+
+      <Divider />
+      <Button onClick={() => closeDialog()}>Close</Button>
     </div>
   );
 };

gui/src/app/pages/HomePage/TopBar.tsx

@@ -1,6 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import CompilationServerConnectionControl from "@SpStanc/CompilationServerConnectionControl";
-import { SmallIconButton } from "@fi-sci/misc";
 import { Menu, QuestionMark } from "@mui/icons-material";
 import AppBar from "@mui/material/AppBar";
 import IconButton from "@mui/material/IconButton";
@@ -35,18 +34,18 @@ const TopBar: FunctionComponent<TopBarProps> = ({ title, onSetCollapsed }) => {
         Stan Playground - {title}
         <span className="TopBarSpacer" />
         <CompilationServerConnectionControl />
-        <span>
-          <SmallIconButton
-            icon={<QuestionMark />}
-            onClick={() => {
-              window.open(
-                "https://github.com/flatironinstitute/stan-playground",
-                "_blank",
-              );
-            }}
-            title={`About Stan Playground`}
-          />
-        </span>
+        <IconButton
+          title="About Stan Playground"
+          size="small"
+          onClick={() =>
+            window.open(
+              "https://github.com/flatironinstitute/stan-playground",
+              "_blank",
+            )
+          }
+        >
+          <QuestionMark fontSize="inherit" htmlColor="white" />
+        </IconButton>
       </Toolbar>
     </AppBar>
   );

gui/src/localStyles.css

@@ -17,18 +17,6 @@
   padding: 10px;
 }
 
-.CompilationServerConnectionPane {
-  font-size: 12px;
-}
-
-.CompilationServerConnectionPane .connected {
-  color: lightgreen;
-}
-
-.CompilationServerConnectionPane .disconnected {
-  color: pink;
-}
-
 /* Compilation Results (StanCompileResultWindow) */
 .ErrorsWindow {
   height: 100%;