Replacing HTML components with MUI components (#3)

* Update UI to use MUI components

* Update based on Reviewers comments

Author: b-yogesh

dashi/package-lock.json

@@ -12,6 +12,9 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@emotion/react": "^11.13.3",
+    "@emotion/styled": "^11.13.0",
+    "@mui/material": "^6.1.1",
     "immer": "^10.1.1",
     "plotly.js": "^2.35.2",
     "react": "^18.3.1",

dashi/package.json

@@ -1,9 +1,10 @@
-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";
 
 const panelContainerStyle: CSSProperties = {
   display: "flex",
@@ -40,7 +41,7 @@ function Panel({ panelModel, panelState, onPropertyChange }: PanelProps) {
       </span>
     );
   } else if (componentModelResult.status === "pending") {
-    panelElement = <span>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,6 +1,7 @@
 import useAppStore, { ContribPoint } from "../store/appStore";
 import { hidePanel } from "../actions/hidePanel";
 import { showPanel } from "../actions/showPanel";
+import {Checkbox} from "@mui/material";
 
 const contribPoint: ContribPoint = "panels";
 
@@ -27,10 +28,10 @@ function PanelsControl() {
         const id = `panels.${panelIndex}`;
         return (
           <div key={id}>
-            <input
+            <Checkbox
+              color="secondary"
               id={id}
-              type="checkbox"
-              checked={panelState.visible}
+              checked={panelState.visible || false}
               value={panelIndex}
               onChange={(e) => {
                 if (e.currentTarget.checked) {

dashi/src/app/PanelsControl.tsx

@@ -1,18 +1,19 @@
 import { BoxModel, PropertyChangeHandler } from "../model/component";
 import DashiChildren from "./DashiChildren";
+import {Box} from "@mui/material";
 
 export interface DashiBoxProps extends Omit<BoxModel, "type"> {
   onPropertyChange: PropertyChangeHandler;
 }
 
 function DashiBox({ id, style, components, onPropertyChange }: DashiBoxProps) {
   return (
-    <div id={id} style={style}>
+    <Box id={id} style={style}>
       <DashiChildren
         components={components}
         onPropertyChange={onPropertyChange}
       />
-    </div>
+    </Box>
   );
 }
 

dashi/src/components/DashiBox.tsx

@@ -1,5 +1,6 @@
 import { MouseEvent } from "react";
 import { ButtonModel, PropertyChangeHandler } from "../model/component";
+import Button from '@mui/material/Button';
 
 export interface DashiButtonProps extends Omit<ButtonModel, "type"> {
   onPropertyChange: PropertyChangeHandler;
@@ -27,7 +28,7 @@ function DashiButton({
     }
   };
   return (
-    <button
+    <Button
       id={id}
       name={name}
       value={value}
@@ -36,7 +37,7 @@ function DashiButton({
       onClick={handleClick}
     >
       {text}
-    </button>
+    </Button>
   );
 }
 

dashi/src/components/DashiButton.tsx

@@ -1,6 +1,14 @@
 import "react";
 import { DropdownModel, PropertyChangeHandler } from "../model/component";
-import { ChangeEvent } from "react";
+import React from "react";
+import {
+  // Box,
+  FormControl,
+  InputLabel,
+  MenuItem,
+  Select,
+  SelectChangeEvent,
+} from "@mui/material";
 
 export interface DashiDropdownProps extends Omit<DropdownModel, "type"> {
   onPropertyChange: PropertyChangeHandler;
@@ -10,19 +18,23 @@ function DashiDropdown({
   id,
   name,
   value,
-  style,
   options,
   disabled,
+  style,
+  label,
   onPropertyChange,
 }: DashiDropdownProps) {
-  const handleChange = (event: ChangeEvent<HTMLSelectElement>) => {
+  const [dropdownValue, setDropdownValue] = React.useState(value);
+  const handleChange = (event: SelectChangeEvent) => {
     if (!id) {
       return;
     }
-    let newValue: string | number = event.currentTarget.value;
-    if (typeof value === "number") {
+    let newValue: string | number = event.target.value;
+    if (typeof value == "number") {
       newValue = Number.parseInt(newValue);
     }
+
+    setDropdownValue(newValue);
     return onPropertyChange({
       componentType: "Dropdown",
       componentId: id,
@@ -31,20 +43,24 @@ function DashiDropdown({
     });
   };
   return (
-    <select
-      id={id}
-      name={name}
-      value={value}
-      style={style}
-      disabled={disabled}
-      onChange={handleChange}
-    >
-      {options.map(([text, value], index) => (
-        <option key={index} value={value}>
-          {text}
-        </option>
-      ))}
-    </select>
+    <FormControl>
+      {label && <InputLabel>{label}</InputLabel>}
+      <Select
+        id={id}
+        name={name}
+        style={style}
+        value={`${dropdownValue}`}
+        disabled={disabled}
+        onChange={handleChange}
+        variant={"filled"}
+      >
+        {options.map(([text, value], index) => (
+          <MenuItem key={index} value={value}>
+            {text}
+          </MenuItem>
+        ))}
+      </Select>
+    </FormControl>
   );
 }
 

dashi/src/components/DashiDropdown.tsx

@@ -1,10 +1,11 @@
-import { Component, CSSProperties } from "react";
+import { CSSProperties } from "react";
 import { Config, Layout, PlotData } from "plotly.js";
 
 export type ComponentType = "Button" | "Dropdown" | "Plot" | "Box";
 
 export interface ComponentModel {
   type: ComponentType;
+  label?: string;
   // common HTML attributes
   id?: string;
   name?: string;