React Context / update Zustand

sites/avivator/package.json

@@ -18,7 +18,7 @@
     "react-dom": "^16.8.0 || ^17.0.0",
     "react-dropzone": "^11.2.3",
     "react-router-dom": "^5.2.0",
-    "zustand": "^3.4.1"
+    "zustand": "^4.4.6"
   },
   "devDependencies": {
     "@vitejs/plugin-react": "^4.1.1",

sites/avivator/src/Avivator.jsx

@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 
-import { useViewerStore } from './state';
+import { useViewerStore, useViewerStoreApi } from './state';
 import { useImage } from './hooks';
 import SnackBars from './components/Snackbars';
 import Viewer from './components/Viewer';
@@ -22,9 +22,10 @@ export default function Avivator(props) {
   const isViewerLoading = useViewerStore(store => store.isViewerLoading);
   const source = useViewerStore(store => store.source);
   const useLinkedView = useViewerStore(store => store.useLinkedView);
+  const viewerStore = useViewerStoreApi();
 
   useEffect(() => {
-    useViewerStore.setState({
+    viewerStore.setState({
       source: initSource,
       isNoImageUrlSnackbarOn: isDemoImage
     });

sites/avivator/src/components/Controller/Controller.jsx

@@ -4,7 +4,7 @@ import Grid from '@material-ui/core/Grid';
 import Tabs from '@material-ui/core/Tabs';
 import Tab from '@material-ui/core/Tab';
 import Divider from '@material-ui/core/Divider';
-import shallow from 'zustand/shallow';
+import { shallow } from 'zustand/shallow';
 
 import ChannelController from './components/ChannelController';
 import Menu from './components/Menu';
@@ -25,7 +25,8 @@ import {
   useViewerStore,
   useImageSettingsStore,
   useLoader,
-  useMetadata
+  useMetadata,
+  useImageSettingsStoreApi
 } from '../../state';
 import { guessRgb, useWindowSize, getSingleSelectionStats } from '../../utils';
 import { GLOBAL_SLIDER_DIMENSION_FIELDS } from '../../constants';
@@ -108,6 +109,7 @@ const Controller = () => {
   const globalControlLabels = labels.filter(label =>
     GLOBAL_SLIDER_DIMENSION_FIELDS.includes(label)
   );
+  const imageSettingsStore = useImageSettingsStoreApi();
   const channelControllers = ids.map((id, i) => {
     const onSelectionChange = e => {
       const selection = {
@@ -132,9 +134,9 @@ const Controller = () => {
           newProps.colors = Channels[c].Color.slice(0, -1);
         }
         setPropertiesForChannel(i, newProps);
-        useImageSettingsStore.setState({
+        imageSettingsStore.setState({
           onViewportLoad: () => {
-            useImageSettingsStore.setState({ onViewportLoad: () => {} });
+            imageSettingsStore.setState({ onViewportLoad: () => {} });
             setIsChannelLoading(i, false);
           }
         });

sites/avivator/src/components/Controller/components/AddChannel.jsx

@@ -1,13 +1,13 @@
 import React, { useCallback } from 'react';
 import Button from '@material-ui/core/Button';
 import AddIcon from '@material-ui/icons/Add';
-import shallow from 'zustand/shallow';
+import { shallow } from 'zustand/shallow';
 
 import { MAX_CHANNELS, COLOR_PALLETE } from '../../../constants';
 import {
   useChannelsStore,
   useViewerStore,
-  useImageSettingsStore,
+  useImageSettingsStoreApi,
   useLoader,
   useMetadata
 } from '../../../state';
@@ -41,6 +41,7 @@ const AddChannel = () => {
   const loader = useLoader();
   const metadata = useMetadata();
   const { labels } = loader[0];
+  const imageSettingsStore = useImageSettingsStoreApi();
   const handleChannelAdd = useCallback(() => {
     let selection = Object.fromEntries(labels.map(l => [l, 0]));
     selection = { ...selection, ...globalSelection };
@@ -55,9 +56,9 @@ const AddChannel = () => {
         contrastLimits,
         channelsVisible: true
       });
-      useImageSettingsStore.setState({
+      imageSettingsStore.setState({
         onViewportLoad: () => {
-          useImageSettingsStore.setState({ onViewportLoad: () => {} });
+          imageSettingsStore.setState({ onViewportLoad: () => {} });
           setIsChannelLoading(numSelectionsBeforeAdd, false);
         }
       });
@@ -85,6 +86,7 @@ const AddChannel = () => {
     selections,
     setIsChannelLoading,
     setPropertiesForChannel,
+    imageSettingsStore,
     metadata
   ]);
   return (

sites/avivator/src/components/Controller/components/CameraOptions.jsx

@@ -4,13 +4,14 @@ import Button from '@material-ui/core/Button';
 import Grid from '@material-ui/core/Grid';
 import Typography from '@material-ui/core/Typography';
 import { makeStyles, createStyles } from '@material-ui/core/styles';
-import shallow from 'zustand/shallow';
+import { shallow } from 'zustand/shallow';
 
 import { getDefaultInitialViewState } from '@hms-dbmi/viv';
 import {
   useImageSettingsStore,
   useViewerStore,
-  useLoader
+  useLoader,
+  useViewerStoreApi
 } from '../../../state';
 import { useWindowSize } from '../../../utils';
 
@@ -53,11 +54,12 @@ const CameraOptions = () => {
       </Grid>
     </Grid>
   );
+  const viewerStore = useViewerStoreApi();
   const reCenterButton = (
     <Grid item xs="auto" key="recenter">
       <Button
         onClick={() =>
-          useViewerStore.setState({
+          viewerStore.setState({
             viewState: {
               ...viewState,
               ...getDefaultInitialViewState(loader, { height, width }, 1, true),

sites/avivator/src/components/Controller/components/ChannelController.jsx

@@ -7,7 +7,7 @@ import Select from '@material-ui/core/Select';
 import CircularProgress from '@material-ui/core/CircularProgress';
 import HighlightOffIcon from '@material-ui/icons/HighlightOff';
 import IconButton from '@material-ui/core/IconButton';
-import shallow from 'zustand/shallow';
+import { shallow } from 'zustand/shallow';
 import { DTYPE_VALUES } from '@hms-dbmi/viv';
 
 import ChannelOptions from './ChannelOptions';

sites/avivator/src/components/Controller/components/ColormapSelect.jsx

@@ -4,11 +4,16 @@ import InputLabel from '@material-ui/core/InputLabel';
 import Select from '@material-ui/core/Select';
 
 import { COLORMAP_OPTIONS } from '../../../constants';
-import { useImageSettingsStore, useViewerStore } from '../../../state';
+import {
+  useImageSettingsStoreApi,
+  useImageSettingsStore,
+  useViewerStore
+} from '../../../state';
 
 function ColormapSelect() {
   const colormap = useImageSettingsStore(store => store.colormap);
   const isViewerLoading = useViewerStore(store => store.isViewerLoading);
+  const imageSettingsStore = useImageSettingsStoreApi();
   return (
     <FormControl fullWidth>
       <InputLabel htmlFor="colormap-select">
@@ -17,7 +22,7 @@ function ColormapSelect() {
       <Select
         native
         onChange={e =>
-          useImageSettingsStore.setState({ colormap: e.target.value })
+          imageSettingsStore.setState({ colormap: e.target.value })
         }
         value={colormap}
         inputProps={{

sites/avivator/src/components/Controller/components/GlobalSelectionSlider.jsx

@@ -4,14 +4,15 @@ import { unstable_batchedUpdates } from 'react-dom';
 import Grid from '@material-ui/core/Grid';
 import Slider from '@material-ui/core/Slider';
 import debounce from 'lodash/debounce';
-import shallow from 'zustand/shallow';
+import { shallow } from 'zustand/shallow';
 
 import { range, getMultiSelectionStats } from '../../../utils';
 import {
   useChannelsStore,
   useViewerStore,
-  useImageSettingsStore,
-  useLoader
+  useLoader,
+  useViewerStoreApi,
+  useImageSettingsStoreApi
 } from '../../../state';
 
 export default function GlobalSelectionSlider(props) {
@@ -22,9 +23,11 @@ export default function GlobalSelectionSlider(props) {
   );
   const loader = useLoader();
   const globalSelection = useViewerStore(store => store.globalSelection);
+  const viewerStore = useViewerStoreApi();
+  const imageSettingsStore = useImageSettingsStoreApi();
   const changeSelection = debounce(
     (_event, newValue) => {
-      useViewerStore.setState({
+      viewerStore.setState({
         isChannelLoading: selections.map(() => true)
       });
       const newSelections = [...selections].map(sel => ({
@@ -45,12 +48,12 @@ export default function GlobalSelectionSlider(props) {
           );
         });
         unstable_batchedUpdates(() => {
-          useImageSettingsStore.setState({
+          imageSettingsStore.setState({
             onViewportLoad: () => {
-              useImageSettingsStore.setState({
+              imageSettingsStore.setState({
                 onViewportLoad: () => {}
               });
-              useViewerStore.setState({
+              viewerStore.setState({
                 isChannelLoading: selections.map(() => false)
               });
             }
@@ -81,7 +84,7 @@ export default function GlobalSelectionSlider(props) {
         <Slider
           value={globalSelection[label]}
           onChange={(event, newValue) => {
-            useViewerStore.setState({
+            viewerStore.setState({
               globalSelection: {
                 ...globalSelection,
                 [label]: newValue

sites/avivator/src/components/Controller/components/LensSelect.jsx

@@ -3,11 +3,12 @@ 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 { shallow } from 'zustand/shallow';
 
 import {
   useChannelsStore,
   useImageSettingsStore,
+  useImageSettingsStoreApi,
   useViewerStore
 } from '../../../state';
 
@@ -21,6 +22,7 @@ function LensSelect() {
   const currChannelIndices = selections.map(sel => sel.c);
 
   const checkboxColor = `rgb(${[255, 255, 255]})`;
+  const imageSettingsStore = useImageSettingsStoreApi();
   return (
     <Grid
       container
@@ -48,7 +50,7 @@ function LensSelect() {
           native
           value={lensSelection}
           onChange={e =>
-            useImageSettingsStore.setState({ lensSelection: e.target.value })
+            imageSettingsStore.setState({ lensSelection: e.target.value })
           }
         >
           {currChannelIndices.map((channelIndex, relativeIndex) => (

sites/avivator/src/components/Controller/components/Menu.jsx

@@ -12,13 +12,18 @@ import Link from '@material-ui/core/Link';
 import Button from '@material-ui/core/Button';
 import SettingsIcon from '@material-ui/icons/Settings';
 import { makeStyles } from '@material-ui/core/styles';
-import shallow from 'zustand/shallow';
+import { shallow } from 'zustand/shallow';
 import { Select } from '@material-ui/core';
 
 import MenuTitle from './MenuTitle';
 import DropzoneButton from './DropzoneButton';
 import { isMobileOrTablet, getNameFromUrl } from '../../../utils';
-import { useChannelsStore, useViewerStore } from '../../../state';
+import {
+  useChannelsStore,
+  useChannelsStoreApi,
+  useViewerStore,
+  useViewerStoreApi
+} from '../../../state';
 
 const useStyles = makeStyles(theme => ({
   root: {
@@ -57,17 +62,19 @@ function Header(props) {
     store.source,
     store.metadata
   ]);
+  const viewerStore = useViewerStoreApi();
+  const channelsStore = useChannelsStoreApi();
   const handleSubmitNewUrl = (event, newUrl) => {
     event.preventDefault();
     const newSource = {
       urlOrFile: newUrl,
       // Use the trailing part of the URL (file name, presumably) as the description.
       description: getNameFromUrl(newUrl)
     };
-    useViewerStore.setState({ source: newSource });
+    viewerStore.setState({ source: newSource });
   };
   const onImageSelectionChange = e =>
-    useChannelsStore.setState({
+    channelsStore.setState({
       image: e.target.value
     });
   const url = typeof source.urlOrFile === 'string' ? source.urlOrFile : '';

sites/avivator/src/components/Controller/components/PanLockToggle.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import Button from '@material-ui/core/Button';
-import shallow from 'zustand/shallow';
+import { shallow } from 'zustand/shallow';
 
 import { useImageSettingsStore, useViewerStore } from '../../../state';
 

sites/avivator/src/components/Controller/components/PictureInPictureToggle.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import Button from '@material-ui/core/Button';
-import shallow from 'zustand/shallow';
+import { shallow } from 'zustand/shallow';
 
 import { useImageSettingsStore, useViewerStore } from '../../../state';