Merge branch 'main' into forman-no_local_ui_state

Author: forman

dashi/package-lock.json

@@ -14,6 +14,7 @@
   "dependencies": {
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
+    "@fontsource/roboto": "^5.1.0",
     "@mui/material": "^6.1.1",
     "immer": "^10.1.1",
     "plotly.js": "^2.35.2",

dashi/package.json

@@ -1,18 +1,42 @@
+import {
+  CssBaseline,
+  ThemeProvider,
+  createTheme,
+  Typography,
+} from "@mui/material";
+
 import ExtensionsInfo from "./ExtensionInfo";
 import PanelsControl from "./PanelsControl";
 import PanelsRow from "./PanelsRow";
 import { initAppStore } from "../actions/initAppStore";
 
 initAppStore();
 
+// MUI's default font family
+const fontFamily = "Roboto, Arial, sans-serif";
+
+const theme = createTheme({
+  typography: { fontFamily },
+  components: {
+    MuiCssBaseline: {
+      styleOverrides: {
+        "*": { fontFamily },
+      },
+    },
+  },
+});
+
 function App() {
   return (
-    <>
-      <div style={{ fontSize: 48, paddingBottom: 10 }}>Dashi Demo</div>
+    <ThemeProvider theme={theme}>
+      <CssBaseline />
+      <Typography fontSize="3em" fontWeight="bold">
+        Dashi Demo
+      </Typography>
       <ExtensionsInfo />
       <PanelsControl />
       <PanelsRow />
-    </>
+    </ThemeProvider>
   );
 }
 

dashi/src/app/App.tsx

@@ -1,4 +1,5 @@
 import useAppStore from "../store/appStore";
+import { Typography } from "@mui/material";
 
 function ExtensionsInfo() {
   const appState = useAppStore();
@@ -9,10 +10,11 @@ function ExtensionsInfo() {
         {extensionsResult.data.map((extension, extIndex) => {
           const id = `extensions.${extIndex}`;
           return (
-            <span
+            <Typography
               key={id}
-              style={{ padding: 5 }}
-            >{`${extension.name}/${extension.version}`}</span>
+              style={{ padding: 4 }}
+              fontSize="small"
+            >{`${extension.name}/${extension.version}`}</Typography>
           );
         })}
       </div>

dashi/src/app/ExtensionInfo.tsx

@@ -1,16 +1,16 @@
-import {CSSProperties, ReactElement} from "react";
+import { CSSProperties, ReactElement } from "react";
 
 import { Contribution } from "../model/contribution";
 import { PropertyChangeHandler } from "../model/component";
 import DashiComponent from "../components/DashiComponent";
 import { ContributionState } from "../store/appStore";
-import {CircularProgress} from "@mui/material";
+import { CircularProgress } from "@mui/material";
 
 const panelContainerStyle: CSSProperties = {
   display: "flex",
   flexDirection: "column",
   width: 400,
-  height: 300,
+  height: 400,
   padding: 5,
   border: "1px gray solid",
 };
@@ -41,7 +41,12 @@ function Panel({ panelModel, panelState, onPropertyChange }: PanelProps) {
       </span>
     );
   } else if (componentModelResult.status === "pending") {
-    panelElement = <span><CircularProgress size={30} color="secondary" /> Loading {panelModel.name}...</span>;
+    panelElement = (
+      <span>
+        <CircularProgress size={30} color="secondary" /> Loading{" "}
+        {panelModel.name}...
+      </span>
+    );
   }
   return <div style={panelContainerStyle}>{panelElement}</div>;
 }

dashi/src/app/Panel.tsx

@@ -1,7 +1,7 @@
 import useAppStore, { ContribPoint } from "../store/appStore";
 import { hidePanel } from "../actions/hidePanel";
 import { showPanel } from "../actions/showPanel";
-import {Checkbox} from "@mui/material";
+import { Checkbox, FormControlLabel, FormGroup } from "@mui/material";
 
 const contribPoint: ContribPoint = "panels";
 
@@ -23,29 +23,32 @@ function PanelsControl() {
     throw Error("internal state error");
   }
   return (
-    <div style={{ padding: 5 }}>
+    <FormGroup>
       {panelStates.map((panelState, panelIndex) => {
         const id = `panels.${panelIndex}`;
         return (
-          <div key={id}>
-            <Checkbox
-              color="secondary"
-              id={id}
-              checked={panelState.visible || false}
-              value={panelIndex}
-              onChange={(e) => {
-                if (e.currentTarget.checked) {
-                  showPanel(panelIndex);
-                } else {
-                  hidePanel(panelIndex);
-                }
-              }}
-            />
-            <label htmlFor={id}>{panelModels[panelIndex].name}</label>
-          </div>
+          <FormControlLabel
+            key={panelIndex}
+            label={panelModels[panelIndex].name}
+            control={
+              <Checkbox
+                color="secondary"
+                id={id}
+                checked={panelState.visible || false}
+                value={panelIndex}
+                onChange={(e) => {
+                  if (e.currentTarget.checked) {
+                    showPanel(panelIndex);
+                  } else {
+                    hidePanel(panelIndex);
+                  }
+                }}
+              />
+            }
+          />
         );
       })}
-    </div>
+    </FormGroup>
   );
 }
 

dashi/src/app/PanelsControl.tsx

@@ -40,16 +40,15 @@ function DashiDropdown({
     });
   };
   return (
-    <FormControl>
-      {label && <InputLabel>{label}</InputLabel>}
+    <FormControl variant="filled" size="small" style={style}>
+      {label && <InputLabel id={`${id}-label`}>{label}</InputLabel>}
       <Select
+        labelId={`${id}-label`}
         id={id}
         name={name}
-        style={style}
         value={`${value}`}
         disabled={disabled}
         onChange={handleChange}
-        variant={"filled"}
       >
         {options.map(([text, value], index) => (
           <MenuItem key={index} value={value}>

dashi/src/components/DashiDropdown.tsx

@@ -2,6 +2,10 @@ import React from "react";
 import ReactDOM from "react-dom/client";
 import App from "./app/App";
 
+import "@fontsource/roboto/300.css";
+import "@fontsource/roboto/400.css";
+import "@fontsource/roboto/500.css";
+import "@fontsource/roboto/700.css";
 import "./index.css";
 
 ReactDOM.createRoot(document.getElementById("root")!).render(

dashi/src/main.tsx

@@ -5,4 +5,5 @@
 
 @dataclass(frozen=True)
 class Dropdown(Component):
+    label: str | None = None
     options: list[tuple[str, str | int | float]] = field(default_factory=list)

dashipy/dashipy/components/dropdown.py

@@ -19,8 +19,9 @@ def render_panel(ctx: Context) -> Component:
     dropdown = Dropdown(
         id="selected_dataset",
         value=selected_dataset,
+        label="Dataset",
         options=[(f"DS #{i + 1}", i) for i in range(len(ctx.datasets))],
-        style={"flexGrow": 0},
+        style={"flexGrow": 0, "minWidth": 120},
     )
     control_group = Box(
         style={