(chore): upgrade zustand (#840)

* (chore): upgrade zustand * (fix): lint
hms-dbmi · Nov 21, 2024 · b413d53 · b413d53
1 parent 97aae18
commit b413d53
Show file tree

Hide file tree

Showing 21 changed files with 107 additions and 99 deletions.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/sites/avivator/package.json b/sites/avivator/package.json
@@ -18,7 +18,7 @@
     "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",

diff --git a/sites/avivator/src/components/Controller/Controller.jsx b/sites/avivator/src/components/Controller/Controller.jsx
@@ -4,7 +4,7 @@ import Grid from '@material-ui/core/Grid';
 import Tab from '@material-ui/core/Tab';
 import Tabs from '@material-ui/core/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();

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 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
@@ -4,7 +4,7 @@ import Grid from '@material-ui/core/Grid';
 import Typography from '@material-ui/core/Typography';
 import { createStyles, makeStyles } from '@material-ui/core/styles';
 import React from 'react';
-import shallow from 'zustand/shallow';
+import { useShallow } from 'zustand/shallow';
 
 import { getDefaultInitialViewState } from '@hms-dbmi/viv';
 import {
@@ -29,13 +29,11 @@ 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 = (

diff --git a/sites/avivator/src/components/Controller/components/ChannelController.jsx b/sites/avivator/src/components/Controller/components/ChannelController.jsx
@@ -8,7 +8,7 @@ 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 { useShallow } from 'zustand/shallow';
 
 import { FILL_PIXEL_VALUE } from '../../../constants';
 import {
@@ -60,8 +60,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 }) => {

diff --git a/sites/avivator/src/components/Controller/components/GlobalSelectionSlider.jsx b/sites/avivator/src/components/Controller/components/GlobalSelectionSlider.jsx
@@ -3,7 +3,7 @@ import Slider from '@material-ui/core/Slider';
 import debounce from 'lodash/debounce';
 import React from 'react';
 import { unstable_batchedUpdates } from 'react-dom';
-import shallow from 'zustand/shallow';
+import { useShallow } from 'zustand/shallow';
 
 import {
   useChannelsStore,
@@ -16,8 +16,7 @@ import { getMultiSelectionStats, range } from '../../../utils';
 export default function GlobalSelectionSlider(props) {
   const { size, label } = props;
   const [selections, setPropertiesForChannel] = useChannelsStore(
-    store => [store.selections, store.setPropertiesForChannel],
-    shallow
+    useShallow(store => [store.selections, store.setPropertiesForChannel])
   );
   const loader = useLoader();
   const globalSelection = useViewerStore(store => store.globalSelection);

diff --git a/sites/avivator/src/components/Controller/components/LensSelect.jsx b/sites/avivator/src/components/Controller/components/LensSelect.jsx
@@ -3,7 +3,7 @@ import React from 'react';
 import Checkbox from '@material-ui/core/Checkbox';
 import Grid from '@material-ui/core/Grid';
 import Select from '@material-ui/core/Select';
-import shallow from 'zustand/shallow';
+import { useShallow } from 'zustand/shallow';
 
 import {
   useChannelsStore,
@@ -14,8 +14,11 @@ import {
 function LensSelect() {
   const selections = useChannelsStore(store => store.selections);
   const [lensEnabled, toggleLensEnabled, lensSelection] = useImageSettingsStore(
-    store => [store.lensEnabled, store.toggleLensEnabled, store.lensSelection],
-    shallow
+    useShallow(store => [
+      store.lensEnabled,
+      store.toggleLensEnabled,
+      store.lensSelection
+    ])
   );
   const channelOptions = useViewerStore(store => store.channelOptions);
   const currChannelIndices = selections.map(sel => sel.c);

diff --git a/sites/avivator/src/components/Controller/components/Menu.jsx b/sites/avivator/src/components/Controller/components/Menu.jsx
@@ -13,7 +13,7 @@ import { makeStyles } from '@material-ui/core/styles';
 import InfoIcon from '@material-ui/icons/Info';
 import SettingsIcon from '@material-ui/icons/Settings';
 import React, { useState, useReducer, useRef, useEffect } from 'react';
-import shallow from 'zustand/shallow';
+import { useShallow } from 'zustand/shallow';
 
 import { useChannelsStore, useViewerStore } from '../../../state';
 import { getNameFromUrl, isMobileOrTablet } from '../../../utils';
@@ -53,10 +53,9 @@ const useStyles = makeStyles(theme => ({
 
 function Header(props) {
   const image = useChannelsStore(store => store.image);
-  const [source, metadata] = useViewerStore(store => [
-    store.source,
-    store.metadata
-  ]);
+  const [source, metadata] = useViewerStore(
+    useShallow(store => [store.source, store.metadata])
+  );
   const handleSubmitNewUrl = (event, newUrl) => {
     event.preventDefault();
     const newSource = {
@@ -159,8 +158,7 @@ function Header(props) {
 function Menu({ children, ...props }) {
   const classes = useStyles(props);
   const [isControllerOn, toggleIsControllerOn] = useViewerStore(
-    store => [store.isControllerOn, store.toggleIsControllerOn],
-    shallow
+    useShallow(store => [store.isControllerOn, store.toggleIsControllerOn])
   );
   return isControllerOn ? (
     <Box position="absolute" right={0} top={0} m={1} className={classes.root}>

diff --git a/sites/avivator/src/components/Controller/components/PanLockToggle.jsx b/sites/avivator/src/components/Controller/components/PanLockToggle.jsx
@@ -1,13 +1,12 @@
 import Button from '@material-ui/core/Button';
 import React from 'react';
-import shallow from 'zustand/shallow';
+import { useShallow } from 'zustand/shallow';
 
 import { useImageSettingsStore, useViewerStore } from '../../../state';
 
 const PanLockToggle = () => {
   const [togglePanLock, panLock] = useImageSettingsStore(
-    store => [store.togglePanLock, store.panLock],
-    shallow
+    useShallow(store => [store.togglePanLock, store.panLock])
   );
   const isViewerLoading = useViewerStore(store => store.isViewerLoading);
   return (

diff --git a/sites/avivator/src/components/Controller/components/PictureInPictureToggle.jsx b/sites/avivator/src/components/Controller/components/PictureInPictureToggle.jsx
@@ -1,17 +1,19 @@
 import Button from '@material-ui/core/Button';
 import React from 'react';
-import shallow from 'zustand/shallow';
+import { useShallow } from 'zustand/shallow';
 
 import { useImageSettingsStore, useViewerStore } from '../../../state';
 
 const PictureInPictureToggle = () => {
   const [isOverviewOn, toggleIsOverviewOn] = useImageSettingsStore(
-    store => [store.isOverviewOn, store.toggleIsOverviewOn],
-    shallow
+    useShallow(store => [store.isOverviewOn, store.toggleIsOverviewOn])
   );
   const [isViewerLoading, useLinkedView, use3d] = useViewerStore(
-    store => [store.isViewerLoading, store.useLinkedView, store.use3d],
-    shallow
+    useShallow(store => [
+      store.isViewerLoading,
+      store.useLinkedView,
+      store.use3d
+    ])
   );
   return (
     <Button

diff --git a/sites/avivator/src/components/Controller/components/RenderingModeSelect.jsx b/sites/avivator/src/components/Controller/components/RenderingModeSelect.jsx
@@ -2,7 +2,7 @@ import FormControl from '@material-ui/core/FormControl';
 import InputLabel from '@material-ui/core/InputLabel';
 import Select from '@material-ui/core/Select';
 import React from 'react';
-import shallow from 'zustand/shallow';
+import { useShallow } from 'zustand/shallow';
 
 import { RENDERING_MODES } from '@hms-dbmi/viv';
 import { useImageSettingsStore, useViewerStore } from '../../../state';
@@ -12,8 +12,7 @@ const renderingOptions = Object.values(RENDERING_MODES);
 function RenderingModeSelect() {
   const renderingMode = useImageSettingsStore(store => store.renderingMode);
   const [isViewerLoading, use3d] = useViewerStore(
-    store => [store.isViewerLoading, store.use3d],
-    shallow
+    useShallow(store => [store.isViewerLoading, store.use3d])
   );
   // Empty option allows for displaying the title of the dropdown fully in the UI.
   const options = !use3d ? [...renderingOptions, ''] : renderingOptions;

diff --git a/sites/avivator/src/components/Controller/components/SideBySideToggle.jsx b/sites/avivator/src/components/Controller/components/SideBySideToggle.jsx
@@ -1,20 +1,19 @@
 import Button from '@material-ui/core/Button';
 import React from 'react';
-import shallow from 'zustand/shallow';
+import { useShallow } from 'zustand/shallow';
 
 import { useImageSettingsStore, useViewerStore } from '../../../state';
 
 const SideBySideToggle = () => {
   const isOverviewOn = useImageSettingsStore(store => store.isOverviewOn);
   const [isViewerLoading, toggleUseLinkedView, useLinkedView, use3d] =
     useViewerStore(
-      store => [
+      useShallow(store => [
         store.isViewerLoading,
         store.toggleUseLinkedView,
         store.useLinkedView,
         store.use3d
-      ],
-      shallow
+      ])
     );
   return (
     <Button

diff --git a/sites/avivator/src/components/Controller/components/Slicer.jsx b/sites/avivator/src/components/Controller/components/Slicer.jsx
@@ -3,7 +3,7 @@ import Grid from '@material-ui/core/Grid';
 import Slider from '@material-ui/core/Slider';
 import Typography from '@material-ui/core/Typography';
 import React from 'react';
-import shallow from 'zustand/shallow';
+import { useShallow } from 'zustand/shallow';
 
 import {
   useImageSettingsStore,
@@ -32,8 +32,7 @@ const useStyles = makeStyles(theme =>
 
 const Slicer = () => {
   const [xSlice, ySlice, zSlice] = useImageSettingsStore(
-    store => [store.xSlice, store.ySlice, store.zSlice],
-    shallow
+    useShallow(store => [store.xSlice, store.ySlice, store.zSlice])
   );
   const loader = useLoader();
   const use3d = useViewerStore(store => store.use3d);