Merge branch 'main' into dependabot/npm_and_yarn/esno-4.8.0

hms-dbmi · Dec 9, 2024 · 29df163 · 29df163
2 parents 7ae5511 + f2f02af
commit 29df163
Show file tree

Hide file tree

Showing 30 changed files with 799 additions and 439 deletions.
diff --git a/.changeset/chatty-ravens-collect.md b/.changeset/chatty-ravens-collect.md
@@ -0,0 +1,29 @@
+---
+"@vivjs/constants": minor
+"@vivjs/extensions": minor
+"@vivjs/layers": minor
+"@vivjs/loaders": minor
+"@hms-dbmi/viv": minor
+"@vivjs/types": minor
+"@vivjs/viewers": minor
+"@vivjs/views": minor
+---
+
+**This release includes backward-incompatible changes**. To avoid automatically adopting such releases, ensure you are either pinning the exact version of `@hms-dbmi/viv` in your `package.json` file or using a version range syntax that only accepts patch updates, such as `~0.16.1`. Refer to npm's [semver documentation](https://docs.npmjs.com/cli/v6/using-npm/semver/) for details.
+
+**Migrate to deck.gl v9**
+
+This update modifies our code internally to support deck.gl v9, dropping compatibility with deck.gl v8. See the [release notes](https://deck.gl/docs/whats-new#deckgl-v90) to learn more.
+
+**Impact**:
+
+We haven’t changed Viv's public API, but the upgrade to deck.gl 9.0 is considered **breaking** due to changes in its dependencies, which may require updates to WebGL-related code (e.g., shaders, injections, constants). Here are potential issues users may face in migrating:
+
+- deprecating WebGL1
+- changing any public-facing GL-specific variables to use the new luma.gl backend-agnostic variables (such as `interpolation` on the `ImageLayer`)
+- shader injection-location name changes (i.e., `gl_fragColor` -> `fragColor`)
+
+**Action**:
+
+- You will need to upgrade to deck.gl `9.0.x` if you use it directly as having multiple versions of deck.gl is not supported. The above list only includes changes internally to Viv and is not an exhaustive summary of all changes required for our migration. For full details on upgrading to deck.gl `9.0.x`, please refer to the [upgrade guide](https://deck.gl/docs/upgrade-guide#upgrading-to-v90).
+- Pin a specific Viv version or semver range to prevent unintended updates.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/sites/avivator/package.json b/sites/avivator/package.json
@@ -9,20 +9,24 @@
   },
   "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",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-dropzone": "^14.2.3",
-    "zustand": "^3.4.1"
+    "zustand": "^5.0.1"
   },
   "devDependencies": {
     "@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,10 +1,10 @@
-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 shallow from 'zustand/shallow';
+import { useShallow } from 'zustand/shallow';
 
 import { GLOBAL_SLIDER_DIMENSION_FIELDS } from '../../constants';
 import {
@@ -58,7 +58,7 @@ const Controller = () => {
     toggleIsOnSetter,
     removeChannel
   ] = useChannelsStore(
-    store => [
+    useShallow(store => [
       store.channelsVisible,
       store.contrastLimits,
       store.colors,
@@ -68,8 +68,7 @@ const Controller = () => {
       store.setPropertiesForChannel,
       store.toggleIsOn,
       store.removeChannel
-    ],
-    shallow
+    ])
   );
   const loader = useLoader();
 
@@ -86,7 +85,7 @@ const Controller = () => {
     pixelValues,
     isViewerLoading
   ] = useViewerStore(
-    store => [
+    useShallow(store => [
       store.channelOptions,
       store.useLinkedView,
       store.use3d,
@@ -97,8 +96,7 @@ const Controller = () => {
       store.removeIsChannelLoading,
       store.pixelValues,
       store.isViewerLoading
-    ],
-    shallow
+    ])
   );
   const metadata = useMetadata();
   const viewSize = useWindowSize();
@@ -191,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 }} />
@@ -209,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,7 +1,7 @@
-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 shallow from 'zustand/shallow';
+import { useShallow } from 'zustand/shallow';
 
 import { COLOR_PALLETE, MAX_CHANNELS } from '../../../constants';
 import {
@@ -21,22 +21,20 @@ const AddChannel = () => {
     setIsChannelLoading,
     addIsChannelLoading
   ] = useViewerStore(
-    store => [
+    useShallow(store => [
       store.globalSelection,
       store.isViewerLoading,
       store.use3d,
       store.setIsChannelLoading,
       store.addIsChannelLoading
-    ],
-    shallow
+    ])
   );
   const [selections, addChannel, setPropertiesForChannel] = useChannelsStore(
-    store => [
+    useShallow(store => [
       store.selections,
       store.addChannel,
       store.setPropertiesForChannel
-    ],
-    shallow
+    ])
   );
   const loader = useLoader();
   const metadata = useMetadata();

diff --git a/sites/avivator/src/components/Controller/components/CameraOptions.jsx b/sites/avivator/src/components/Controller/components/CameraOptions.jsx
@@ -1,10 +1,11 @@
-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 shallow from 'zustand/shallow';
+import { useShallow } from 'zustand/shallow';
 
 import { getDefaultInitialViewState } from '@hms-dbmi/viv';
 import {
@@ -29,17 +30,15 @@ const useStyles = makeStyles(theme =>
 const CameraOptions = () => {
   const loader = useLoader();
   const [useFixedAxis, toggleUseFixedAxis] = useImageSettingsStore(
-    store => [store.useFixedAxis, store.toggleUseFixedAxis],
-    shallow
+    useShallow(store => [store.useFixedAxis, store.toggleUseFixedAxis])
+  );
+  const [viewState, use3d] = useViewerStore(
+    useShallow(store => [store.viewState, store.use3d])
   );
-  const [viewState, use3d] = useViewerStore(store => [
-    store.viewState,
-    store.use3d
-  ]);
   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}
@@ -54,7 +53,7 @@ const CameraOptions = () => {
     </Grid>
   );
   const reCenterButton = (
-    <Grid item xs="auto" key="recenter">
+    <Grid item size="auto" key="recenter">
       <Button
         onClick={() =>
           useViewerStore.setState({
@@ -77,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,14 +1,16 @@
 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 shallow from 'zustand/shallow';
+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';
 import {
@@ -60,8 +62,11 @@ function ChannelController({
   const loader = useLoader();
   const colormap = useImageSettingsStore(store => store.colormap);
   const [channelOptions, useLinkedView, use3d] = useViewerStore(
-    store => [store.channelOptions, store.useLinkedView, store.use3d],
-    shallow
+    useShallow(store => [
+      store.channelOptions,
+      store.useLinkedView,
+      store.use3d
+    ])
   );
   const rgbColor = toRgb(colormap, color);
   const getMinMax = ({ domain: d, mode, loader: l }) => {
@@ -89,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"
@@ -121,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}
@@ -140,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';