Merge pull request #208 from flatironinstitute/MUI-theming

Use MUI theming for all colors
flatironinstitute · Aug 21, 2024 · b653a58 · b653a58
2 parents a84f500 + a251b96
commit b653a58
Show file tree

Hide file tree

Showing 19 changed files with 331 additions and 374 deletions.
diff --git a/gui/src/app/App.tsx b/gui/src/app/App.tsx
@@ -1,5 +1,6 @@
 import createTheme from "@mui/material/styles/createTheme";
-import { ThemeProvider } from "@mui/system";
+import { ThemeProvider } from "@mui/material/styles";
+import CssBaseline from "@mui/material/CssBaseline";
 import ProjectContextProvider from "@SpCore/ProjectContextProvider";
 import HomePage from "@SpPages/HomePage";
 import { Analytics } from "@vercel/analytics/react";
@@ -12,6 +13,7 @@ function App() {
   return (
     <BrowserRouter>
       <ThemeProvider theme={theme}>
+        <CssBaseline />
         <div className="MainWindow">
           <ProjectContextProvider>
             <CompileContextProvider>

diff --git a/gui/src/app/CompilationServerConnectionControl/ConfigureCompilationServerDialog.tsx b/gui/src/app/CompilationServerConnectionControl/ConfigureCompilationServerDialog.tsx
@@ -8,6 +8,7 @@ import IconButton from "@mui/material/IconButton";
 import Radio from "@mui/material/Radio";
 import RadioGroup from "@mui/material/RadioGroup";
 import TextField from "@mui/material/TextField";
+import Typography from "@mui/material/Typography";
 import { FunctionComponent, useCallback, useContext } from "react";
 import {
   localCompilationServerUrl,
@@ -52,9 +53,13 @@ const ConfigureCompilationServerDialog: FunctionComponent<
       <Divider />
       <p>
         {isConnected ? (
-          <span className="connected">Connected</span>
+          <Typography component="span" color="success.main">
+            Connected
+          </Typography>
         ) : (
-          <span className="disconnected">Not connected</span>
+          <Typography component="span" color="error.main">
+            Not connected
+          </Typography>
         )}
         &nbsp;
         <IconButton onClick={onRetry} size="small" title="Retry connection">

diff --git a/gui/src/app/FileEditor/StanCompileResultWindow.tsx b/gui/src/app/FileEditor/StanCompileResultWindow.tsx
@@ -1,5 +1,6 @@
 import { StancErrors } from "@SpStanc/Types";
 import { Close, Done } from "@mui/icons-material";
+import Box from "@mui/material/Box";
 import IconButton from "@mui/material/IconButton";
 import { FunctionComponent } from "react";
 
@@ -15,31 +16,31 @@ const StanCompileResultWindow: FunctionComponent<Props> = ({
   let content: any;
   if (stancErrors.errors && stancErrors.errors.length > 0) {
     content = (
-      <div className="CompileErrorsPane">
+      <Box color="error.dark">
         <h3>Errors</h3>
         {stancErrors.errors.slice(1).map((error, i) => (
           <div key={i} className="ErrorWarningMessage">
             <pre>{error}</pre>
           </div>
         ))}
-      </div>
+      </Box>
     );
   } else if (stancErrors.warnings && stancErrors.warnings.length > 0) {
     content = (
-      <div className="CompileWarningsPane">
+      <Box color="info.dark">
         <h3>Warnings</h3>
         {stancErrors.warnings.map((warning, i) => (
           <div key={i} className="ErrorWarningMessage">
             <pre>{warning}</pre>
           </div>
         ))}
-      </div>
+      </Box>
     );
   } else {
     content = (
-      <div className="CompilationDone">
+      <Box color="success.main">
         <Done />
-      </div>
+      </Box>
     );
   }
 

diff --git a/gui/src/app/FileEditor/StanFileEditor.tsx b/gui/src/app/FileEditor/StanFileEditor.tsx
@@ -58,7 +58,7 @@ const StanFileEditor: FunctionComponent<Props> = ({
         type: "button",
         icon: <Cancel />,
         label: "Syntax error",
-        color: "darkred",
+        color: "error.dark",
         tooltip: "Syntax error in Stan file",
         onClick: () => {
           setSyntaxWindowVisible((v) => !v);
@@ -69,7 +69,7 @@ const StanFileEditor: FunctionComponent<Props> = ({
         type: "button",
         icon: <Cancel />,
         label: "Syntax warning",
-        color: "blue",
+        color: "info.dark",
         tooltip: "Syntax warning in Stan file",
         onClick: () => {
           setSyntaxWindowVisible((v) => !v);
@@ -85,7 +85,7 @@ const StanFileEditor: FunctionComponent<Props> = ({
         tooltip: "Auto format this stan file",
         label: "Auto format",
         onClick: requestFormat,
-        color: "darkblue",
+        color: "info",
       });
     }
     if (editedFileContent && editedFileContent === fileContent) {
@@ -97,7 +97,7 @@ const StanFileEditor: FunctionComponent<Props> = ({
             label: "Compile",
             icon: <Settings />,
             onClick: compile,
-            color: "darkblue",
+            color: "info.dark",
           });
         }
       }
@@ -108,10 +108,10 @@ const StanFileEditor: FunctionComponent<Props> = ({
             compileMessage.charAt(0).toUpperCase() + compileMessage.slice(1),
           color:
             compileStatus === "compiled"
-              ? "green"
+              ? "success"
               : compileStatus === "failed"
-                ? "red"
-                : "black",
+                ? "error"
+                : undefined,
         });
       }
     }

diff --git a/gui/src/app/FileEditor/TextEditor.tsx b/gui/src/app/FileEditor/TextEditor.tsx
@@ -1,5 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { Editor, loader, useMonaco } from "@monaco-editor/react";
+import { useTheme } from "@mui/material/styles";
 
 import monacoAddStanLang from "@SpComponents/stanLang";
 import { ToolBar, ToolbarItem } from "@SpComponents/ToolBar";
@@ -140,6 +141,13 @@ const TextEditor: FunctionComponent<Props> = ({
     return editedText !== text;
   }, [editedText, text]);
 
+  const muiTheme = useTheme();
+
+  const theme = useMemo(
+    () => (muiTheme.palette.mode === "dark" ? "vs-dark" : "vs"),
+    [muiTheme.palette.mode],
+  );
+
   return (
     <div className="EditorWithToolbar">
       <ToolBar
@@ -159,6 +167,7 @@ const TextEditor: FunctionComponent<Props> = ({
           wordWrap: "on",
           minimap: { enabled: false },
         }}
+        theme={theme}
       />
     </div>
   );

diff --git a/gui/src/app/FileEditor/ToolBar.tsx b/gui/src/app/FileEditor/ToolBar.tsx
@@ -2,6 +2,19 @@ import { FunctionComponent, useMemo } from "react";
 import { Save } from "@mui/icons-material";
 import Link from "@mui/material/Link";
 import IconButton from "@mui/material/IconButton";
+import { useTheme } from "@mui/material/styles";
+
+type Palletes =
+  | "primary"
+  | "secondary"
+  | "error"
+  | "warning"
+  | "info"
+  | "success";
+
+type Variant = "main" | "light" | "dark" | "contrastText";
+
+export type ColorOptions = `${Palletes}.${Variant}` | Palletes;
 
 export type ToolbarItem =
   | {
@@ -10,12 +23,12 @@ export type ToolbarItem =
       label?: string;
       icon?: any;
       onClick: () => void;
-      color?: string;
+      color?: ColorOptions;
     }
   | {
       type: "text";
       label: string;
-      color?: string;
+      color?: ColorOptions;
     };
 
 type ToolbarProps = {
@@ -40,7 +53,6 @@ export const ToolBar: FunctionComponent<ToolbarProps> = ({
       editorItems.push({
         type: "text",
         label: "Read Only",
-        color: "gray",
       });
     } else if (edited) {
       editorItems.push({
@@ -53,16 +65,23 @@ export const ToolBar: FunctionComponent<ToolbarProps> = ({
       editorItems.push({
         type: "text",
         label: "Edited",
-        color: "red",
+        color: "error",
       });
     }
 
     return editorItems.concat(items);
   }, [edited, items, onSaveText, readOnly]);
 
+  const theme = useTheme();
+  const backgroundColor = useMemo(() => {
+    return theme.palette.mode === "light"
+      ? theme.palette.grey[300]
+      : theme.palette.grey[800];
+  }, [theme.palette.grey, theme.palette.mode]);
+
   return (
     <div className="NotSelectable">
-      <div className="EditorMenuBar">
+      <div className="EditorMenuBar" style={{ backgroundColor }}>
         <span className="EditorTitle">{label}</span>
         {toolBarItems &&
           toolBarItems.map((item, i) => (
@@ -76,8 +95,21 @@ export const ToolBar: FunctionComponent<ToolbarProps> = ({
 const ToolbarItemComponent: FunctionComponent<{ item: ToolbarItem }> = ({
   item,
 }) => {
+  const theme = useTheme();
+
+  let color =
+    theme.palette.mode === "light"
+      ? theme.palette.grey[700]
+      : theme.palette.grey[400];
+
+  if (item.color) {
+    const [pallete_color, color_variant] = item.color.split(".");
+    const pallete = theme.palette[pallete_color as Palletes];
+    color = pallete[(color_variant ?? "main") as Variant];
+  }
+
   if (item.type === "button") {
-    const { onClick, color, label, tooltip, icon } = item;
+    const { onClick, label, tooltip, icon } = item;
     if (icon) {
       return (
         <span className="EditorToolbarItem" style={{ color }}>
@@ -98,7 +130,7 @@ const ToolbarItemComponent: FunctionComponent<{ item: ToolbarItem }> = ({
         <span className="EditorToolbarItem">
           <Link
             onClick={onClick}
-            color={color || "gray"}
+            color={color}
             component="button"
             underline="none"
             title={tooltip}
@@ -111,11 +143,7 @@ const ToolbarItemComponent: FunctionComponent<{ item: ToolbarItem }> = ({
     }
   } else if (item.type === "text") {
     return (
-      <span
-        className="EditorToolbarItem"
-        style={{ color: item.color || "gray" }}
-        title={item.label}
-      >
+      <span className="EditorToolbarItem" style={{ color }} title={item.label}>
         {item.label}&nbsp;&nbsp;&nbsp;
       </span>
     );

diff --git a/gui/src/app/RunPanel/CompiledRunPanel.tsx b/gui/src/app/RunPanel/CompiledRunPanel.tsx
@@ -65,7 +65,9 @@ const CompiledRunPanel: FunctionComponent<CompiledRunPanelProps> = ({
     <div>
       <hr />
       Sampling failed!
-      <pre className="SamplerError">{errorMessage}</pre>
+      <Box color="error.main">
+        <pre className="SamplerError">{errorMessage}</pre>
+      </Box>
       <span className="details">(see browser console for more details)</span>
     </div>
   );

diff --git a/gui/src/app/SamplerOutputView/SamplerOutputView.tsx b/gui/src/app/SamplerOutputView/SamplerOutputView.tsx
@@ -1,4 +1,14 @@
 import { Download } from "@mui/icons-material";
+import Table from "@mui/material/Table";
+import TableBody from "@mui/material/TableBody";
+import TableCell from "@mui/material/TableCell";
+import TableContainer from "@mui/material/TableContainer";
+import {
+  SuccessBorderedTableRow,
+  SuccessColoredTableHead,
+} from "@SpComponents/StyledTables";
+import Button from "@mui/material/Button";
+import { IconButton } from "@mui/material";
 import HistsView from "@SpComponents/HistsView";
 import SummaryView from "@SpComponents/SummaryView";
 import TabWidget from "@SpComponents/TabWidget";
@@ -8,8 +18,6 @@ import { triggerDownload } from "@SpUtil/triggerDownload";
 import JSZip from "jszip";
 import { FunctionComponent, useCallback, useMemo, useState } from "react";
 import TracePlotsView from "./TracePlotsView";
-import Button from "@mui/material/Button";
-import { IconButton } from "@mui/material";
 
 type SamplerOutputViewProps = {
   latestRun: StanRun;
@@ -143,7 +151,7 @@ const DrawsView: FunctionComponent<DrawsViewProps> = ({
     URL.revokeObjectURL(url);
   }, [draws, paramNames, drawChainIds, samplingOpts]);
   return (
-    <div className="DrawsTable">
+    <>
       <div>
         <IconButton size="small" title="Download" onClick={handleExportToCsv}>
           <Download fontSize="inherit" />
@@ -160,41 +168,43 @@ const DrawsView: FunctionComponent<DrawsViewProps> = ({
         </IconButton>
       </div>
       <br />
-      <table className="draws-table">
-        <thead>
-          <tr>
-            <th key="chain">Chain</th>
-            <th key="draw">Draw</th>
-            {paramNames.map((name, i) => (
-              <th key={i}>{name}</th>
-            ))}
-          </tr>
-        </thead>
-        <tbody>
-          {formattedDraws[0].map((_, i) => (
-            <tr key={i}>
-              <td>{drawChainIds[i]}</td>
-              <td>{drawNumbers[i]}</td>
-              {formattedDraws.map((draw, j) => (
-                <td key={j}>{draw[i]}</td>
+      <TableContainer>
+        <Table size="small" padding="none">
+          <SuccessColoredTableHead>
+            <SuccessBorderedTableRow>
+              <TableCell key="chain">Chain</TableCell>
+              <TableCell key="draw">Draw</TableCell>
+              {paramNames.map((name, i) => (
+                <TableCell key={i}>{name}</TableCell>
               ))}
-            </tr>
-          ))}
-        </tbody>
-      </table>
-      {abbreviatedToNumRows !== undefined &&
-        abbreviatedToNumRows < draws[0].length && (
-          <div className="DrawAbbreviationToggle">
-            <Button
-              onClick={() => {
-                setAbbreviatedToNumRows((x) => (x || 0) + 300);
-              }}
-            >
-              Show more
-            </Button>
-          </div>
-        )}
-    </div>
+            </SuccessBorderedTableRow>
+          </SuccessColoredTableHead>
+          <TableBody>
+            {formattedDraws[0].map((_, i) => (
+              <SuccessBorderedTableRow key={i} hover>
+                <TableCell>{drawChainIds[i]}</TableCell>
+                <TableCell>{drawNumbers[i]}</TableCell>
+                {formattedDraws.map((draw, j) => (
+                  <TableCell key={j}>{draw[i]}</TableCell>
+                ))}
+              </SuccessBorderedTableRow>
+            ))}
+          </TableBody>
+        </Table>
+        {abbreviatedToNumRows !== undefined &&
+          abbreviatedToNumRows < draws[0].length && (
+            <div className="DrawAbbreviationToggle">
+              <Button
+                onClick={() => {
+                  setAbbreviatedToNumRows((x) => (x || 0) + 300);
+                }}
+              >
+                Show more
+              </Button>
+            </div>
+          )}
+      </TableContainer>
+    </>
   );
 };