(chore): upgrade material ui (#844)

* (chore): first pass to v5 * (fix): select component styling * (fix): channels/volume tab placement * (fix): row spacing for channel controller * (chore): upgrade to v6 material * (chore): lint * (chore): migrate deprecated APIs * (chore): lint
hms-dbmi · Dec 9, 2024 · f64920e · f64920e
1 parent b413d53
commit f64920e
Show file tree

Hide file tree

Showing 26 changed files with 676 additions and 353 deletions.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/sites/avivator/package.json b/sites/avivator/package.json
@@ -9,9 +9,9 @@
   },
   "dependencies": {
     "@hms-dbmi/viv": "workspace:*",
-    "@material-ui/core": "^4.11.0",
-    "@material-ui/icons": "^4.9.1",
-    "@material-ui/lab": "^4.0.0-alpha.56",
+    "@mui/material": "^6.0.0",
+    "@mui/icons-material": "^6.0.0",
+    "@mui/styles": "^6.0.0",
     "@math.gl/core": "catalog:",
     "geotiff": "^2.0.5",
     "lodash": "^4.17.21",
@@ -24,5 +24,9 @@
     "@vitejs/plugin-react": "^4.2.1",
     "vite": "^5.3.2"
   },
+  "peerDependencies": {
+    "@emotion/react": "^11.13.5",
+    "@emotion/styled": "^11.13.5"
+  },
   "version": null
 }
diff --git a/sites/avivator/src/components/Controller/Controller.jsx b/sites/avivator/src/components/Controller/Controller.jsx
@@ -1,8 +1,8 @@
-import CircularProgress from '@material-ui/core/CircularProgress';
-import Divider from '@material-ui/core/Divider';
-import Grid from '@material-ui/core/Grid';
-import Tab from '@material-ui/core/Tab';
-import Tabs from '@material-ui/core/Tabs';
+import CircularProgress from '@mui/material/CircularProgress';
+import Divider from '@mui/material/Divider';
+import Grid from '@mui/material/Grid2';
+import Tab from '@mui/material/Tab';
+import Tabs from '@mui/material/Tabs';
 import React, { useState } from 'react';
 import { useShallow } from 'zustand/shallow';
 
@@ -189,7 +189,8 @@ const Controller = () => {
       <Tabs
         value={tab}
         onChange={handleTabChange}
-        aria-label="simple tabs example"
+        aria-label="tabs"
+        variant="fullWidth"
         style={{ height: '24px', minHeight: '24px' }}
       >
         <Tab label="Channels" style={{ fontSize: '.75rem', bottom: 12 }} />
@@ -207,7 +208,12 @@ const Controller = () => {
         {!isViewerLoading && !isRgb ? (
           <Grid container>{channelControllers}</Grid>
         ) : (
-          <Grid container justifyContent="center">
+          <Grid
+            container
+            sx={{
+              justifyContent: 'center'
+            }}
+          >
             {!isRgb && <CircularProgress />}
           </Grid>
         )}

diff --git a/sites/avivator/src/components/Controller/components/AddChannel.jsx b/sites/avivator/src/components/Controller/components/AddChannel.jsx
@@ -1,5 +1,5 @@
-import Button from '@material-ui/core/Button';
-import AddIcon from '@material-ui/icons/Add';
+import AddIcon from '@mui/icons-material/Add';
+import Button from '@mui/material/Button';
 import React, { useCallback } from 'react';
 import { useShallow } from 'zustand/shallow';
 

diff --git a/sites/avivator/src/components/Controller/components/CameraOptions.jsx b/sites/avivator/src/components/Controller/components/CameraOptions.jsx
@@ -1,8 +1,9 @@
-import Button from '@material-ui/core/Button';
-import Checkbox from '@material-ui/core/Checkbox';
-import Grid from '@material-ui/core/Grid';
-import Typography from '@material-ui/core/Typography';
-import { createStyles, makeStyles } from '@material-ui/core/styles';
+import Button from '@mui/material/Button';
+import Checkbox from '@mui/material/Checkbox';
+import Grid from '@mui/material/Grid2';
+import Typography from '@mui/material/Typography';
+import createStyles from '@mui/styles/createStyles';
+import makeStyles from '@mui/styles/makeStyles';
 import React from 'react';
 import { useShallow } from 'zustand/shallow';
 
@@ -37,7 +38,7 @@ const CameraOptions = () => {
   const { height, width } = useWindowSize();
   const classes = useStyles();
   const toggleFixedAxisButton = (
-    <Grid item xs="auto" key="toggle-fixed-axis">
+    <Grid item size="auto" key="toggle-fixed-axis">
       <Grid container direction="row">
         <Checkbox
           onClick={toggleUseFixedAxis}
@@ -52,7 +53,7 @@ const CameraOptions = () => {
     </Grid>
   );
   const reCenterButton = (
-    <Grid item xs="auto" key="recenter">
+    <Grid item size="auto" key="recenter">
       <Button
         onClick={() =>
           useViewerStore.setState({
@@ -75,9 +76,11 @@ const CameraOptions = () => {
     <Grid
       container
       direction="row"
-      justifyContent="space-between"
-      alignItems="center"
       style={{ marginTop: 16 }}
+      sx={{
+        justifyContent: 'space-between',
+        alignItems: 'center'
+      }}
     >
       {[toggleFixedAxisButton, reCenterButton]}
     </Grid>

diff --git a/sites/avivator/src/components/Controller/components/ChannelController.jsx b/sites/avivator/src/components/Controller/components/ChannelController.jsx
@@ -1,13 +1,15 @@
 import * as React from 'react';
 
 import { DTYPE_VALUES } from '@hms-dbmi/viv';
-import Checkbox from '@material-ui/core/Checkbox';
-import CircularProgress from '@material-ui/core/CircularProgress';
-import Grid from '@material-ui/core/Grid';
-import IconButton from '@material-ui/core/IconButton';
-import Select from '@material-ui/core/Select';
-import Slider from '@material-ui/core/Slider';
-import HighlightOffIcon from '@material-ui/icons/HighlightOff';
+import HighlightOffIcon from '@mui/icons-material/HighlightOff';
+import Checkbox from '@mui/material/Checkbox';
+import CircularProgress from '@mui/material/CircularProgress';
+import FormControl from '@mui/material/FormControl';
+import Grid from '@mui/material/Grid2';
+import IconButton from '@mui/material/IconButton';
+import MenuItem from '@mui/material/MenuItem';
+import Select from '@mui/material/Select';
+import Slider from '@mui/material/Slider';
 import { useShallow } from 'zustand/shallow';
 
 import { FILL_PIXEL_VALUE } from '../../../constants';
@@ -92,25 +94,39 @@ function ChannelController({
   const step = right - left < 500 && isFloat ? (right - left) / 500 : 1;
   const shouldShowPixelValue = !useLinkedView && !use3d;
   return (
-    <Grid container direction="column" m={2} justifyContent="center">
-      <Grid container direction="row" justifyContent="space-between">
-        <Grid item xs={10}>
-          <Select native value={name} onChange={onSelectionChange}>
-            {channelOptions.map(opt => (
-              <option disabled={isLoading} key={opt} value={opt}>
-                {opt}
-              </option>
-            ))}
-          </Select>
+    <Grid
+      container
+      direction="column"
+      sx={{
+        justifyContent: 'center'
+      }}
+    >
+      <Grid
+        container
+        direction="row"
+        sx={{
+          justifyContent: 'space-between'
+        }}
+      >
+        <Grid item size={10}>
+          <FormControl variant="standard">
+            <Select size="small" value={name} onChange={onSelectionChange}>
+              {channelOptions.map(opt => (
+                <MenuItem disabled={isLoading} key={opt} value={opt}>
+                  {opt}
+                </MenuItem>
+              ))}
+            </Select>
+          </FormControl>
         </Grid>
-        <Grid item xs={1}>
+        <Grid item size={1}>
           <ChannelOptions
             handleColorSelect={handleColorSelect}
             disabled={isLoading}
             handleModeSelect={setMode}
           />
         </Grid>
-        <Grid item xs={1}>
+        <Grid item size={1}>
           <IconButton
             aria-label="remove-channel"
             component="span"
@@ -124,13 +140,15 @@ function ChannelController({
       <Grid
         container
         direction="row"
-        justifyContent="flex-start"
-        alignItems="center"
+        sx={{
+          justifyContent: 'flex-start',
+          alignItems: 'center'
+        }}
       >
-        <Grid item xs={2}>
+        <Grid item size={2}>
           {getPixelValueDisplay(pixelValue, isLoading, shouldShowPixelValue)}
         </Grid>
-        <Grid item xs={2}>
+        <Grid item size={2}>
           <Checkbox
             onChange={toggleIsOn}
             disabled={isLoading}
@@ -143,8 +161,9 @@ function ChannelController({
             }}
           />
         </Grid>
-        <Grid item xs={7}>
+        <Grid item size={7}>
           <Slider
+            size="small"
             disabled={isLoading}
             value={slider}
             onChange={handleSliderChange}

diff --git a/sites/avivator/src/components/Controller/components/ChannelOptions.jsx b/sites/avivator/src/components/Controller/components/ChannelOptions.jsx
@@ -1,11 +1,11 @@
-import ClickAwayListener from '@material-ui/core/ClickAwayListener';
-import IconButton from '@material-ui/core/IconButton';
-import MenuItem from '@material-ui/core/MenuItem';
-import MenuList from '@material-ui/core/MenuList';
-import Paper from '@material-ui/core/Paper';
-import Popper from '@material-ui/core/Popper';
-import { makeStyles } from '@material-ui/core/styles';
-import MoreVertIcon from '@material-ui/icons/MoreVert';
+import MoreVertIcon from '@mui/icons-material/MoreVert';
+import ClickAwayListener from '@mui/material/ClickAwayListener';
+import IconButton from '@mui/material/IconButton';
+import MenuItem from '@mui/material/MenuItem';
+import MenuList from '@mui/material/MenuList';
+import Paper from '@mui/material/Paper';
+import Popper from '@mui/material/Popper';
+import makeStyles from '@mui/styles/makeStyles';
 import React, { useReducer, useRef } from 'react';
 
 import ColorPalette from './ColorPalette';

diff --git a/sites/avivator/src/components/Controller/components/ColorPalette.jsx b/sites/avivator/src/components/Controller/components/ColorPalette.jsx
@@ -1,8 +1,8 @@
-import IconButton from '@material-ui/core/IconButton';
-import LensIcon from '@material-ui/icons/Lens';
+import LensIcon from '@mui/icons-material/Lens';
+import IconButton from '@mui/material/IconButton';
 import React from 'react';
 
-import { makeStyles } from '@material-ui/core/styles';
+import makeStyles from '@mui/styles/makeStyles';
 
 import { COLOR_PALLETE } from '../../../constants';
 
@@ -36,6 +36,7 @@ const ColorPalette = ({ handleColorSelect }) => {
             className={classes.button}
             key={color}
             onClick={() => handleColorSelect(color)}
+            size="large"
           >
             <LensIcon
               fontSize="small"

diff --git a/sites/avivator/src/components/Controller/components/ColormapSelect.jsx b/sites/avivator/src/components/Controller/components/ColormapSelect.jsx
@@ -1,6 +1,6 @@
-import FormControl from '@material-ui/core/FormControl';
-import InputLabel from '@material-ui/core/InputLabel';
-import Select from '@material-ui/core/Select';
+import FormControl from '@mui/material/FormControl';
+import InputLabel from '@mui/material/InputLabel';
+import Select from '@mui/material/Select';
 import React from 'react';
 
 import { COLORMAP_OPTIONS } from '../../../constants';
@@ -10,11 +10,12 @@ function ColormapSelect() {
   const colormap = useImageSettingsStore(store => store.colormap);
   const isViewerLoading = useViewerStore(store => store.isViewerLoading);
   return (
-    <FormControl fullWidth>
-      <InputLabel htmlFor="colormap-select">
+    <FormControl fullWidth variant="standard">
+      <InputLabel htmlFor="colormap-select" size="small">
         Additive {colormap === '' ? ' Blending' : 'Color Mapping'}
       </InputLabel>
       <Select
+        size="small"
         native
         onChange={e =>
           useImageSettingsStore.setState({ colormap: e.target.value })

diff --git a/sites/avivator/src/components/Controller/components/DropzoneButton.jsx b/sites/avivator/src/components/Controller/components/DropzoneButton.jsx
@@ -1,4 +1,4 @@
-import Button from '@material-ui/core/Button';
+import Button from '@mui/material/Button';
 import React from 'react';
 import { useDropzone } from '../../../hooks';
 

diff --git a/sites/avivator/src/components/Controller/components/GlobalSelectionSlider.jsx b/sites/avivator/src/components/Controller/components/GlobalSelectionSlider.jsx
@@ -1,5 +1,5 @@
-import Grid from '@material-ui/core/Grid';
-import Slider from '@material-ui/core/Slider';
+import Grid from '@mui/material/Grid2';
+import Slider from '@mui/material/Slider';
 import debounce from 'lodash/debounce';
 import React from 'react';
 import { unstable_batchedUpdates } from 'react-dom';
@@ -69,14 +69,17 @@ export default function GlobalSelectionSlider(props) {
     <Grid
       container
       direction="row"
-      justifyContent="space-between"
-      alignItems="center"
+      sx={{
+        justifyContent: 'space-between',
+        alignItems: 'stretch'
+      }}
     >
-      <Grid item xs={1}>
+      <Grid item size={1}>
         {label}:
       </Grid>
-      <Grid item xs={11}>
+      <Grid item size={11}>
         <Slider
+          size="small"
           value={globalSelection[label]}
           onChange={(event, newValue) => {
             useViewerStore.setState({