From 498cc3411abacf3cd374ccfa3f2034e9d9205958 Mon Sep 17 00:00:00 2001
From: Peter Todd <ptr.tdd@gmail.com>
Date: Fri, 10 Nov 2023 18:34:57 +0000
Subject: [PATCH 1/8] update zustand

---
 pnpm-lock.yaml              | 24 ++++++++++++++++++++----
 sites/avivator/package.json |  2 +-
 2 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c0dd911fb..c9e184215 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -318,8 +318,8 @@ importers:
         specifier: ^5.2.0
         version: 5.3.3(react@17.0.2)
       zustand:
-        specifier: ^3.4.1
-        version: 3.7.2(react@17.0.2)
+        specifier: ^4.4.6
+        version: 4.4.6(@types/react@18.0.17)(react@17.0.2)
     devDependencies:
       '@vitejs/plugin-react':
         specifier: ^4.1.1
@@ -11277,6 +11277,14 @@ packages:
       prepend-http: 2.0.0
     dev: true
 
+  /use-sync-external-store@1.2.0(react@17.0.2):
+    resolution: {integrity: sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    dependencies:
+      react: 17.0.2
+    dev: false
+
   /use@3.1.1:
     resolution: {integrity: sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==}
     engines: {node: '>=0.10.0'}
@@ -11807,16 +11815,24 @@ packages:
     resolution: {integrity: sha512-iC+8Io04lddc+mVqQ9AZ7OQ2MrUKGN+oIQyq1vemgt46jwCwLfhq7/pwnBnNXXXZb8VTVLKwp9EDkx+ryxIWmg==}
     dev: false
 
-  /zustand@3.7.2(react@17.0.2):
-    resolution: {integrity: sha512-PIJDIZKtokhof+9+60cpockVOq05sJzHCriyvaLBmEJixseQ1a5Kdov6fWZfWOu5SK9c+FhH1jU0tntLxRJYMA==}
+  /zustand@4.4.6(@types/react@18.0.17)(react@17.0.2):
+    resolution: {integrity: sha512-Rb16eW55gqL4W2XZpJh0fnrATxYEG3Apl2gfHTyDSE965x/zxslTikpNch0JgNjJA9zK6gEFW8Fl6d1rTZaqgg==}
     engines: {node: '>=12.7.0'}
     peerDependencies:
+      '@types/react': '>=16.8'
+      immer: '>=9.0'
       react: '>=16.8'
     peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      immer:
+        optional: true
       react:
         optional: true
     dependencies:
+      '@types/react': 18.0.17
       react: 17.0.2
+      use-sync-external-store: 1.2.0(react@17.0.2)
     dev: false
 
   /zwitch@1.0.5:
diff --git a/sites/avivator/package.json b/sites/avivator/package.json
index c6c252668..3ce1e07c6 100644
--- a/sites/avivator/package.json
+++ b/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",

From 769d0a95540383d99ddbc84408746c10b57fa7bb Mon Sep 17 00:00:00 2001
From: Peter Todd <ptr.tdd@gmail.com>
Date: Fri, 10 Nov 2023 18:36:16 +0000
Subject: [PATCH 2/8] AvivatorContext...

---
 sites/avivator/src/Avivator.jsx               |  5 +--
 .../src/components/Controller/Controller.jsx  |  8 +++--
 .../Controller/components/AddChannel.jsx      |  8 +++--
 .../Controller/components/CameraOptions.jsx   |  6 ++--
 .../Controller/components/ColormapSelect.jsx  |  5 +--
 .../components/GlobalSelectionSlider.jsx      | 19 +++++-----
 .../Controller/components/LensSelect.jsx      |  4 ++-
 .../components/Controller/components/Menu.jsx |  8 +++--
 .../components/RenderingModeSelect.jsx        |  5 +--
 .../Controller/components/Slicer.jsx          | 10 +++---
 .../Controller/components/VolumeButton.jsx    | 20 ++++++-----
 .../src/components/Snackbars/Snackbars.jsx    |  5 +--
 sites/avivator/src/components/Viewer.jsx      | 13 +++----
 sites/avivator/src/hooks.js                   | 36 +++++++++++--------
 sites/avivator/src/index.jsx                  | 11 +++---
 sites/avivator/src/state.js                   | 36 ++++++++++++++++---
 16 files changed, 129 insertions(+), 70 deletions(-)

diff --git a/sites/avivator/src/Avivator.jsx b/sites/avivator/src/Avivator.jsx
index d0ec462c1..3f8b21d09 100644
--- a/sites/avivator/src/Avivator.jsx
+++ b/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
     });
diff --git a/sites/avivator/src/components/Controller/Controller.jsx b/sites/avivator/src/components/Controller/Controller.jsx
index 075f70771..bdd68c0f6 100644
--- a/sites/avivator/src/components/Controller/Controller.jsx
+++ b/sites/avivator/src/components/Controller/Controller.jsx
@@ -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);
           }
         });
diff --git a/sites/avivator/src/components/Controller/components/AddChannel.jsx b/sites/avivator/src/components/Controller/components/AddChannel.jsx
index 3c667f4f6..1bd9aade5 100644
--- a/sites/avivator/src/components/Controller/components/AddChannel.jsx
+++ b/sites/avivator/src/components/Controller/components/AddChannel.jsx
@@ -7,7 +7,7 @@ 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 (
diff --git a/sites/avivator/src/components/Controller/components/CameraOptions.jsx b/sites/avivator/src/components/Controller/components/CameraOptions.jsx
index 781afefc9..5ca808d9a 100644
--- a/sites/avivator/src/components/Controller/components/CameraOptions.jsx
+++ b/sites/avivator/src/components/Controller/components/CameraOptions.jsx
@@ -10,7 +10,8 @@ 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),
diff --git a/sites/avivator/src/components/Controller/components/ColormapSelect.jsx b/sites/avivator/src/components/Controller/components/ColormapSelect.jsx
index 1e177d31b..1e8af9c89 100644
--- a/sites/avivator/src/components/Controller/components/ColormapSelect.jsx
+++ b/sites/avivator/src/components/Controller/components/ColormapSelect.jsx
@@ -4,11 +4,12 @@ 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 { useChannelsStoreApi, useImageSettingsStore, useViewerStore } from '../../../state';
 
 function ColormapSelect() {
   const colormap = useImageSettingsStore(store => store.colormap);
   const isViewerLoading = useViewerStore(store => store.isViewerLoading);
+  const imageSettingsStore = useChannelsStoreApi();
   return (
     <FormControl fullWidth>
       <InputLabel htmlFor="colormap-select">
@@ -17,7 +18,7 @@ function ColormapSelect() {
       <Select
         native
         onChange={e =>
-          useImageSettingsStore.setState({ colormap: e.target.value })
+          imageSettingsStore.setState({ colormap: e.target.value })
         }
         value={colormap}
         inputProps={{
diff --git a/sites/avivator/src/components/Controller/components/GlobalSelectionSlider.jsx b/sites/avivator/src/components/Controller/components/GlobalSelectionSlider.jsx
index 394473233..7f0b493c1 100644
--- a/sites/avivator/src/components/Controller/components/GlobalSelectionSlider.jsx
+++ b/sites/avivator/src/components/Controller/components/GlobalSelectionSlider.jsx
@@ -10,8 +10,9 @@ 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({
-                onViewportLoad: () => {}
+              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
diff --git a/sites/avivator/src/components/Controller/components/LensSelect.jsx b/sites/avivator/src/components/Controller/components/LensSelect.jsx
index 37ff9ff7a..3802041b5 100644
--- a/sites/avivator/src/components/Controller/components/LensSelect.jsx
+++ b/sites/avivator/src/components/Controller/components/LensSelect.jsx
@@ -8,6 +8,7 @@ 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) => (
diff --git a/sites/avivator/src/components/Controller/components/Menu.jsx b/sites/avivator/src/components/Controller/components/Menu.jsx
index a00e69892..d34408ee2 100644
--- a/sites/avivator/src/components/Controller/components/Menu.jsx
+++ b/sites/avivator/src/components/Controller/components/Menu.jsx
@@ -18,7 +18,7 @@ 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,6 +57,8 @@ function Header(props) {
     store.source,
     store.metadata
   ]);
+  const viewerStore = useViewerStoreApi();
+  const channelsStore = useChannelsStoreApi();
   const handleSubmitNewUrl = (event, newUrl) => {
     event.preventDefault();
     const newSource = {
@@ -64,10 +66,10 @@ function Header(props) {
       // 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 : '';
diff --git a/sites/avivator/src/components/Controller/components/RenderingModeSelect.jsx b/sites/avivator/src/components/Controller/components/RenderingModeSelect.jsx
index c0acecf63..7d92e8bab 100644
--- a/sites/avivator/src/components/Controller/components/RenderingModeSelect.jsx
+++ b/sites/avivator/src/components/Controller/components/RenderingModeSelect.jsx
@@ -5,7 +5,7 @@ import InputLabel from '@material-ui/core/InputLabel';
 import shallow from 'zustand/shallow';
 
 import { RENDERING_MODES } from '@hms-dbmi/viv';
-import { useImageSettingsStore, useViewerStore } from '../../../state';
+import { useImageSettingsStore, useImageSettingsStoreApi, useViewerStore } from '../../../state';
 
 const renderingOptions = Object.values(RENDERING_MODES);
 
@@ -17,13 +17,14 @@ function RenderingModeSelect() {
   );
   // Empty option allows for displaying the title of the dropdown fully in the UI.
   const options = !use3d ? [...renderingOptions, ''] : renderingOptions;
+  const imageSettingsStore = useImageSettingsStoreApi();
   return (
     <FormControl fullWidth>
       <InputLabel htmlFor="rendering-mode-select">Rendering Mode</InputLabel>
       <Select
         native
         onChange={e =>
-          useImageSettingsStore.setState({ renderingMode: e.target.value })
+          imageSettingsStore.setState({ renderingMode: e.target.value })
         }
         value={use3d ? renderingMode : ''}
         inputProps={{
diff --git a/sites/avivator/src/components/Controller/components/Slicer.jsx b/sites/avivator/src/components/Controller/components/Slicer.jsx
index bd8f1264d..57bde29d0 100644
--- a/sites/avivator/src/components/Controller/components/Slicer.jsx
+++ b/sites/avivator/src/components/Controller/components/Slicer.jsx
@@ -8,7 +8,8 @@ import shallow from 'zustand/shallow';
 import {
   useImageSettingsStore,
   useViewerStore,
-  useLoader
+  useLoader,
+  useImageSettingsStoreApi
 } from '../../../state';
 import { getBoundingCube, truncateDecimalNumber } from '../../../utils';
 
@@ -38,22 +39,23 @@ const Slicer = () => {
   const loader = useLoader();
   const use3d = useViewerStore(store => store.use3d);
   const [xSliceInit, ySliceInit, zSliceInit] = getBoundingCube(loader);
+  const imageSettingsStore = useImageSettingsStoreApi();
   const sliceValuesAndSetSliceFunctions = [
     [
       xSlice,
-      xSliceNew => useImageSettingsStore.setState({ xSlice: xSliceNew }),
+      xSliceNew => imageSettingsStore.setState({ xSlice: xSliceNew }),
       'x',
       xSliceInit
     ],
     [
       ySlice,
-      ySliceNew => useImageSettingsStore.setState({ ySlice: ySliceNew }),
+      ySliceNew => imageSettingsStore.setState({ ySlice: ySliceNew }),
       'y',
       ySliceInit
     ],
     [
       zSlice,
-      zSliceNew => useImageSettingsStore.setState({ zSlice: zSliceNew }),
+      zSliceNew => imageSettingsStore.setState({ zSlice: zSliceNew }),
       'z',
       zSliceInit
     ]
diff --git a/sites/avivator/src/components/Controller/components/VolumeButton.jsx b/sites/avivator/src/components/Controller/components/VolumeButton.jsx
index a829dfb58..5a566946e 100644
--- a/sites/avivator/src/components/Controller/components/VolumeButton.jsx
+++ b/sites/avivator/src/components/Controller/components/VolumeButton.jsx
@@ -15,7 +15,9 @@ import {
   useImageSettingsStore,
   useViewerStore,
   useChannelsStore,
-  useLoader
+  useLoader,
+  useViewerStoreApi,
+  useImageSettingsStoreApi
 } from '../../../state';
 import { range, getMultiSelectionStats, getBoundingCube } from '../../../utils';
 
@@ -111,6 +113,8 @@ function VolumeButton() {
   const hasViewableResolutions = Array.from({
     length: loader.length
   }).filter((_, resolution) => canLoadResolution(loader, resolution)).length;
+  const viewerStore = useViewerStoreApi();
+  const imageSettingsStore = useImageSettingsStoreApi();
   return (
     <>
       <Button
@@ -127,7 +131,7 @@ function VolumeButton() {
           // eslint-disable-next-line no-unused-expressions
           if (use3d) {
             toggleUse3d();
-            useViewerStore.setState({
+            viewerStore.setState({
               isChannelLoading: Array(selections.length).fill(true)
             });
             getMultiSelectionStats({ loader, selections, use3d: !use3d }).then(
@@ -138,7 +142,7 @@ function VolumeButton() {
                     contrastLimits: contrastLimits[j]
                   })
                 );
-                useViewerStore.setState({
+                viewerStore.setState({
                   isChannelLoading: Array(selections.length).fill(false)
                 });
               }
@@ -166,14 +170,14 @@ function VolumeButton() {
                           dense
                           disableGutters
                           onClick={() => {
-                            useViewerStore.setState({
+                            viewerStore.setState({
                               isChannelLoading: Array(selections.length).fill(
                                 true
                               )
                             });
                             const [xSlice, ySlice, zSlice] =
                               getBoundingCube(loader);
-                            useImageSettingsStore.setState({
+                            imageSettingsStore.setState({
                               resolution,
                               xSlice,
                               ySlice,
@@ -191,12 +195,12 @@ function VolumeButton() {
                                   contrastLimits: contrastLimits[j]
                                 })
                               );
-                              useImageSettingsStore.setState({
+                              imageSettingsStore.setState({
                                 onViewportLoad: () => {
-                                  useImageSettingsStore.setState({
+                                  imageSettingsStore.setState({
                                     onViewportLoad: () => {}
                                   });
-                                  useViewerStore.setState({
+                                  viewerStore.setState({
                                     isChannelLoading: Array(
                                       selections.length
                                     ).fill(false)
diff --git a/sites/avivator/src/components/Snackbars/Snackbars.jsx b/sites/avivator/src/components/Snackbars/Snackbars.jsx
index ffc6b863a..f314b86a4 100644
--- a/sites/avivator/src/components/Snackbars/Snackbars.jsx
+++ b/sites/avivator/src/components/Snackbars/Snackbars.jsx
@@ -9,7 +9,7 @@ import {
   NoImageUrlInfo,
   VolumeRenderingWarning
 } from './SnackbarAlerts';
-import { useViewerStore } from '../../state';
+import { useViewerStore, useViewerStoreApi } from '../../state';
 
 const SnackBars = () => {
   const [
@@ -32,6 +32,7 @@ const SnackBars = () => {
     ],
     shallow
   );
+  const viewerStore = useViewerStoreApi();
   return (
     <>
       <Snackbar
@@ -52,7 +53,7 @@ const SnackBars = () => {
       >
         <Alert
           onClose={() =>
-            useViewerStore.setState({
+            viewerStore.setState({
               loaderErrorSnackbar: { on: false, message: null }
             })
           } // eslint-disable-line react/jsx-curly-newline
diff --git a/sites/avivator/src/components/Viewer.jsx b/sites/avivator/src/components/Viewer.jsx
index 92cd0d861..e93fc8350 100644
--- a/sites/avivator/src/components/Viewer.jsx
+++ b/sites/avivator/src/components/Viewer.jsx
@@ -13,7 +13,8 @@ import {
   useImageSettingsStore,
   useViewerStore,
   useChannelsStore,
-  useLoader
+  useLoader,
+  useViewerStoreApi
 } from '../state';
 import { useWindowSize, get3DExtension } from '../utils';
 import { DEFAULT_OVERVIEW } from '../constants';
@@ -67,10 +68,10 @@ const Viewer = () => {
     ],
     shallow
   );
-
+  const viewerStore = useViewerStoreApi();
   const onViewStateChange = ({ viewState: { zoom } }) => {
     const z = Math.min(Math.max(Math.round(-zoom), 0), loader.length - 1);
-    useViewerStore.setState({ pyramidResolution: z });
+    viewerStore.setState({ pyramidResolution: z });
   };
 
   return use3d ? (
@@ -93,7 +94,7 @@ const Viewer = () => {
       viewStates={[viewState]}
       onViewStateChange={debounce(
         ({ viewState: newViewState, viewId }) =>
-          useViewerStore.setState({
+          viewerStore.setState({
             viewState: { ...newViewState, id: viewId }
           }),
         250,
@@ -112,7 +113,7 @@ const Viewer = () => {
       zoomLock={zoomLock}
       panLock={panLock}
       hoverHooks={{
-        handleValue: v => useViewerStore.setState({ pixelValues: v })
+        handleValue: v => viewerStore.setState({ pixelValues: v })
       }}
       lensSelection={lensSelection}
       lensEnabled={lensEnabled}
@@ -135,7 +136,7 @@ const Viewer = () => {
       overview={DEFAULT_OVERVIEW}
       overviewOn={isOverviewOn}
       hoverHooks={{
-        handleValue: v => useViewerStore.setState({ pixelValues: v })
+        handleValue: v => viewerStore.setState({ pixelValues: v })
       }}
       lensSelection={lensSelection}
       lensEnabled={lensEnabled}
diff --git a/sites/avivator/src/hooks.js b/sites/avivator/src/hooks.js
index edd59172c..aac56d3ca 100644
--- a/sites/avivator/src/hooks.js
+++ b/sites/avivator/src/hooks.js
@@ -5,11 +5,13 @@ import shallow from 'zustand/shallow';
 import { unstable_batchedUpdates } from 'react-dom';
 
 import {
-  useChannelsStore,
   useImageSettingsStore,
   useLoader,
   useMetadata,
-  useViewerStore
+  useViewerStore,
+  useViewerStoreApi,
+  useChannelsStoreApi,
+  useImageSettingsStoreApi,
 } from './state';
 import {
   createLoader,
@@ -32,18 +34,21 @@ export const useImage = (source, history) => {
   );
   const loader = useLoader();
   const metadata = useMetadata();
+  const viewerStore = useViewerStoreApi();
+  const channelsStore = useChannelsStoreApi();
+  const imageSettingsStore = useImageSettingsStoreApi();
   useEffect(() => {
     async function changeLoader() {
       // Placeholder
-      useViewerStore.setState({ isChannelLoading: [true] });
-      useViewerStore.setState({ isViewerLoading: true });
+      viewerStore.setState({ isChannelLoading: [true] });
+      viewerStore.setState({ isViewerLoading: true });
       if (use3d) toggleUse3d();
       const { urlOrFile } = source;
       const newLoader = await createLoader(
         urlOrFile,
         toggleIsOffsetsSnackbarOn,
         message =>
-          useViewerStore.setState({
+          viewerStore.setState({
             loaderErrorSnackbar: { on: true, message }
           })
       );
@@ -67,8 +72,8 @@ export const useImage = (source, history) => {
           nextMeta
         );
         unstable_batchedUpdates(() => {
-          useChannelsStore.setState({ loader: nextLoader });
-          useViewerStore.setState({
+          channelsStore.setState({ loader: nextLoader });
+          viewerStore.setState({
             metadata: nextMeta
           });
         });
@@ -84,8 +89,8 @@ export const useImage = (source, history) => {
   useEffect(() => {
     const changeSettings = async () => {
       // Placeholder
-      useViewerStore.setState({ isChannelLoading: [true] });
-      useViewerStore.setState({ isViewerLoading: true });
+      viewerStore.setState({ isChannelLoading: [true] });
+      viewerStore.setState({ isViewerLoading: true });
       if (use3d) toggleUse3d();
       const newSelections = buildDefaultSelection(loader[0]);
       const { Channels } = metadata.Pixels;
@@ -121,7 +126,7 @@ export const useImage = (source, history) => {
         if (lensEnabled) {
           toggleLensEnabled();
         }
-        useViewerStore.setState({ useColormap: false, useLens: false });
+        viewerStore.setState({ useColormap: false, useLens: false });
       } else {
         const stats = await getMultiSelectionStats({
           loader,
@@ -139,12 +144,12 @@ export const useImage = (source, history) => {
                   (Channels[i]?.Color && Channels[i].Color.slice(0, -1)) ??
                   COLOR_PALLETE[i]
               );
-        useViewerStore.setState({
+        viewerStore.setState({
           useLens: channelOptions.length !== 1,
           useColormap: true
         });
       }
-      useChannelsStore.setState({
+      channelsStore.setState({
         ids: newDomains.map(() => String(Math.random())),
         selections: newSelections,
         domains: newDomains,
@@ -152,7 +157,7 @@ export const useImage = (source, history) => {
         colors: newColors,
         channelsVisible: newColors.map(() => true)
       });
-      useViewerStore.setState({
+      viewerStore.setState({
         isChannelLoading: newSelections.map(i => !i),
         isViewerLoading: false,
         pixelValues: new Array(newSelections.length).fill(FILL_PIXEL_VALUE),
@@ -161,7 +166,7 @@ export const useImage = (source, history) => {
         channelOptions
       });
       const [xSlice, ySlice, zSlice] = getBoundingCube(loader);
-      useImageSettingsStore.setState({
+      imageSettingsStore.setState({
         xSlice,
         ySlice,
         zSlice
@@ -172,6 +177,7 @@ export const useImage = (source, history) => {
 };
 
 export const useDropzone = () => {
+  const viewerStore = useViewerStoreApi();
   const handleSubmitFile = files => {
     let newSource;
     if (files.length === 1) {
@@ -186,7 +192,7 @@ export const useDropzone = () => {
         description: 'data.zarr'
       };
     }
-    useViewerStore.setState({ source: newSource });
+    viewerStore.setState({ source: newSource });
   };
   return useReactDropzone({
     onDrop: handleSubmitFile
diff --git a/sites/avivator/src/index.jsx b/sites/avivator/src/index.jsx
index ce151b408..7e600a236 100644
--- a/sites/avivator/src/index.jsx
+++ b/sites/avivator/src/index.jsx
@@ -12,6 +12,7 @@ import { grey } from '@material-ui/core/colors';
 import sources from './source-info';
 import Avivator from './Avivator';
 import { getNameFromUrl } from './utils';
+import { AvivatorProvider } from './state';
 
 const darkTheme = createTheme({
   palette: {
@@ -63,10 +64,12 @@ function RoutedAvivator(props) {
 ReactDOM.render(
   <Router>
     <Switch>
-      <Route
-        path="/"
-        render={routeProps => <RoutedAvivator routeProps={routeProps} />}
-      />
+      <AvivatorProvider>
+        <Route
+          path="/"
+          render={routeProps => <RoutedAvivator routeProps={routeProps} />}
+        />
+      </AvivatorProvider>
     </Switch>
   </Router>,
   document.getElementById('root')
diff --git a/sites/avivator/src/state.js b/sites/avivator/src/state.js
index e26a1a56b..3e0c12bb6 100644
--- a/sites/avivator/src/state.js
+++ b/sites/avivator/src/state.js
@@ -1,6 +1,6 @@
-import create from 'zustand';
-
+import { createContext, useContext, useRef, createElement } from 'react';
 import { RENDERING_MODES } from '@hms-dbmi/viv';
+import { createStore, useStore } from 'zustand';
 
 const captialize = string => string.charAt(0).toUpperCase() + string.slice(1);
 
@@ -38,7 +38,7 @@ const DEFAUlT_CHANNEL_VALUES = {
   ids: ''
 };
 
-export const useChannelsStore = create(set => ({
+const createChannelsStore = () => createStore(set => ({
   ...DEFAUlT_CHANNEL_STATE,
   ...generateToggles(DEFAUlT_CHANNEL_VALUES, set),
   toggleIsOn: index =>
@@ -100,7 +100,7 @@ const DEFAULT_IMAGE_STATE = {
   onViewportLoad: () => {}
 };
 
-export const useImageSettingsStore = create(set => ({
+const createImageSettingsStore = () => createStore(set => ({
   ...DEFAULT_IMAGE_STATE,
   ...generateToggles(DEFAULT_IMAGE_STATE, set)
 }));
@@ -129,7 +129,7 @@ const DEFAULT_VIEWER_STATE = {
   pyramidResolution: 0
 };
 
-export const useViewerStore = create(set => ({
+const createViewerStore = () => createStore(set => ({
   ...DEFAULT_VIEWER_STATE,
   ...generateToggles(DEFAULT_VIEWER_STATE, set),
   setIsChannelLoading: (index, val) =>
@@ -151,6 +151,32 @@ export const useViewerStore = create(set => ({
     })
 }));
 
+export const AvivatorContext = createContext(null);
+
+export const AvivatorProvider = ({ children }) => {
+  const storesRef = useRef(null);
+  if (!storesRef.current) {
+    storesRef.current = {
+      channels: createChannelsStore(),
+      imageSettings: createImageSettingsStore(),
+      viewer: createViewerStore()
+    };
+  }
+  return createElement(AvivatorContext.Provider, {value: storesRef.current}, children);
+};
+
+function useStoreApi(storeName) {
+  const store = useContext(AvivatorContext);
+  if (!store) throw 'useStore must be used within a AvivatorProvider';
+  return store[storeName];
+}
+export const useChannelsStoreApi = () => useStoreApi('channels');
+export const useImageSettingsStoreApi = () => useStoreApi('imageSettings');
+export const useViewerStoreApi = () => useStoreApi('viewer');
+export const useChannelsStore = selector => useStore(useChannelsStoreApi(), selector);
+export const useImageSettingsStore = selector => useStore(useImageSettingsStoreApi(), selector);
+export const useViewerStore = selector => useStore(useViewerStoreApi(), selector);
+
 export const useLoader = () => {
   const [fullLoader, image] = useChannelsStore(store => [
     store.loader,

From 576edcc554a30fbdb3071d8e95e620a39ae35a5a Mon Sep 17 00:00:00 2001
From: Peter Todd <ptr.tdd@gmail.com>
Date: Fri, 10 Nov 2023 18:53:13 +0000
Subject: [PATCH 3/8] fix zustand deprecation warnings

---
 .../src/components/Controller/Controller.jsx        |  2 +-
 .../components/Controller/components/AddChannel.jsx |  2 +-
 .../Controller/components/CameraOptions.jsx         |  2 +-
 .../Controller/components/ChannelController.jsx     |  2 +-
 .../Controller/components/GlobalSelectionSlider.jsx |  2 +-
 .../components/Controller/components/LensSelect.jsx |  2 +-
 .../src/components/Controller/components/Menu.jsx   |  2 +-
 .../Controller/components/PanLockToggle.jsx         |  2 +-
 .../components/PictureInPictureToggle.jsx           |  2 +-
 .../Controller/components/RenderingModeSelect.jsx   |  2 +-
 .../Controller/components/SideBySideToggle.jsx      |  2 +-
 .../src/components/Controller/components/Slicer.jsx |  2 +-
 .../Controller/components/VolumeButton.jsx          |  2 +-
 .../Controller/components/ZoomLockToggle.jsx        |  2 +-
 sites/avivator/src/components/Footer.jsx            |  2 +-
 .../avivator/src/components/Snackbars/Snackbars.jsx |  2 +-
 sites/avivator/src/components/Viewer.jsx            |  2 +-
 sites/avivator/src/hooks.js                         |  2 +-
 sites/avivator/src/state.js                         | 13 +++++++++----
 19 files changed, 27 insertions(+), 22 deletions(-)

diff --git a/sites/avivator/src/components/Controller/Controller.jsx b/sites/avivator/src/components/Controller/Controller.jsx
index bdd68c0f6..5ae9a72fb 100644
--- 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 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';
diff --git a/sites/avivator/src/components/Controller/components/AddChannel.jsx b/sites/avivator/src/components/Controller/components/AddChannel.jsx
index 1bd9aade5..390b04c4d 100644
--- a/sites/avivator/src/components/Controller/components/AddChannel.jsx
+++ b/sites/avivator/src/components/Controller/components/AddChannel.jsx
@@ -1,7 +1,7 @@
 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 {
diff --git a/sites/avivator/src/components/Controller/components/CameraOptions.jsx b/sites/avivator/src/components/Controller/components/CameraOptions.jsx
index 5ca808d9a..e22c303cf 100644
--- a/sites/avivator/src/components/Controller/components/CameraOptions.jsx
+++ b/sites/avivator/src/components/Controller/components/CameraOptions.jsx
@@ -4,7 +4,7 @@ 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 {
diff --git a/sites/avivator/src/components/Controller/components/ChannelController.jsx b/sites/avivator/src/components/Controller/components/ChannelController.jsx
index c01e2b3e3..b8bf6ed19 100644
--- a/sites/avivator/src/components/Controller/components/ChannelController.jsx
+++ b/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';
diff --git a/sites/avivator/src/components/Controller/components/GlobalSelectionSlider.jsx b/sites/avivator/src/components/Controller/components/GlobalSelectionSlider.jsx
index 7f0b493c1..335eb6221 100644
--- a/sites/avivator/src/components/Controller/components/GlobalSelectionSlider.jsx
+++ b/sites/avivator/src/components/Controller/components/GlobalSelectionSlider.jsx
@@ -4,7 +4,7 @@ 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 {
diff --git a/sites/avivator/src/components/Controller/components/LensSelect.jsx b/sites/avivator/src/components/Controller/components/LensSelect.jsx
index 3802041b5..1d0083726 100644
--- 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 { shallow } from 'zustand/shallow';
 
 import {
   useChannelsStore,
diff --git a/sites/avivator/src/components/Controller/components/Menu.jsx b/sites/avivator/src/components/Controller/components/Menu.jsx
index d34408ee2..e20138b77 100644
--- a/sites/avivator/src/components/Controller/components/Menu.jsx
+++ b/sites/avivator/src/components/Controller/components/Menu.jsx
@@ -12,7 +12,7 @@ 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';
diff --git a/sites/avivator/src/components/Controller/components/PanLockToggle.jsx b/sites/avivator/src/components/Controller/components/PanLockToggle.jsx
index 2427d24ee..87eab8572 100644
--- a/sites/avivator/src/components/Controller/components/PanLockToggle.jsx
+++ b/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';
 
diff --git a/sites/avivator/src/components/Controller/components/PictureInPictureToggle.jsx b/sites/avivator/src/components/Controller/components/PictureInPictureToggle.jsx
index a257b9eeb..fdb71d284 100644
--- a/sites/avivator/src/components/Controller/components/PictureInPictureToggle.jsx
+++ b/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';
 
diff --git a/sites/avivator/src/components/Controller/components/RenderingModeSelect.jsx b/sites/avivator/src/components/Controller/components/RenderingModeSelect.jsx
index 7d92e8bab..a088f2b32 100644
--- a/sites/avivator/src/components/Controller/components/RenderingModeSelect.jsx
+++ b/sites/avivator/src/components/Controller/components/RenderingModeSelect.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import FormControl from '@material-ui/core/FormControl';
 import Select from '@material-ui/core/Select';
 import InputLabel from '@material-ui/core/InputLabel';
-import shallow from 'zustand/shallow';
+import { shallow } from 'zustand/shallow';
 
 import { RENDERING_MODES } from '@hms-dbmi/viv';
 import { useImageSettingsStore, useImageSettingsStoreApi, useViewerStore } from '../../../state';
diff --git a/sites/avivator/src/components/Controller/components/SideBySideToggle.jsx b/sites/avivator/src/components/Controller/components/SideBySideToggle.jsx
index 0d77fc655..dc2956669 100644
--- a/sites/avivator/src/components/Controller/components/SideBySideToggle.jsx
+++ b/sites/avivator/src/components/Controller/components/SideBySideToggle.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';
 
diff --git a/sites/avivator/src/components/Controller/components/Slicer.jsx b/sites/avivator/src/components/Controller/components/Slicer.jsx
index 57bde29d0..df538167e 100644
--- 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 { makeStyles, createStyles } from '@material-ui/core';
-import shallow from 'zustand/shallow';
+import { shallow } from 'zustand/shallow';
 
 import {
   useImageSettingsStore,
diff --git a/sites/avivator/src/components/Controller/components/VolumeButton.jsx b/sites/avivator/src/components/Controller/components/VolumeButton.jsx
index 5a566946e..03e5925d5 100644
--- a/sites/avivator/src/components/Controller/components/VolumeButton.jsx
+++ b/sites/avivator/src/components/Controller/components/VolumeButton.jsx
@@ -9,7 +9,7 @@ import MenuList from '@material-ui/core/MenuList';
 
 import { makeStyles } from '@material-ui/core/styles';
 
-import shallow from 'zustand/shallow';
+import { shallow } from 'zustand/shallow';
 
 import {
   useImageSettingsStore,
diff --git a/sites/avivator/src/components/Controller/components/ZoomLockToggle.jsx b/sites/avivator/src/components/Controller/components/ZoomLockToggle.jsx
index 05b78e367..820a3dc4d 100644
--- a/sites/avivator/src/components/Controller/components/ZoomLockToggle.jsx
+++ b/sites/avivator/src/components/Controller/components/ZoomLockToggle.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';
 
diff --git a/sites/avivator/src/components/Footer.jsx b/sites/avivator/src/components/Footer.jsx
index 0462d17e5..57c85fd96 100644
--- a/sites/avivator/src/components/Footer.jsx
+++ b/sites/avivator/src/components/Footer.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import Typography from '@material-ui/core/Typography';
 import Box from '@material-ui/core/Box';
 import Paper from '@material-ui/core/Paper';
-import shallow from 'zustand/shallow';
+import { shallow } from 'zustand/shallow';
 
 import { makeStyles } from '@material-ui/core/styles';
 
diff --git a/sites/avivator/src/components/Snackbars/Snackbars.jsx b/sites/avivator/src/components/Snackbars/Snackbars.jsx
index f314b86a4..ff7f624ab 100644
--- a/sites/avivator/src/components/Snackbars/Snackbars.jsx
+++ b/sites/avivator/src/components/Snackbars/Snackbars.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import Snackbar from '@material-ui/core/Snackbar';
 import Alert from '@material-ui/lab/Alert';
-import shallow from 'zustand/shallow';
+import { shallow } from 'zustand/shallow';
 
 import {
   LoaderError,
diff --git a/sites/avivator/src/components/Viewer.jsx b/sites/avivator/src/components/Viewer.jsx
index e93fc8350..b3c79c1e9 100644
--- a/sites/avivator/src/components/Viewer.jsx
+++ b/sites/avivator/src/components/Viewer.jsx
@@ -1,5 +1,5 @@
 /* eslint-disable no-nested-ternary */
-import shallow from 'zustand/shallow';
+import { shallow } from 'zustand/shallow';
 import React from 'react';
 import debounce from 'lodash/debounce';
 import {
diff --git a/sites/avivator/src/hooks.js b/sites/avivator/src/hooks.js
index aac56d3ca..fe7b7631c 100644
--- a/sites/avivator/src/hooks.js
+++ b/sites/avivator/src/hooks.js
@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
 import { useDropzone as useReactDropzone } from 'react-dropzone';
-import shallow from 'zustand/shallow';
+import { shallow } from 'zustand/shallow';
 // eslint-disable-next-line camelcase
 import { unstable_batchedUpdates } from 'react-dom';
 
diff --git a/sites/avivator/src/state.js b/sites/avivator/src/state.js
index 3e0c12bb6..c4f2a5a55 100644
--- a/sites/avivator/src/state.js
+++ b/sites/avivator/src/state.js
@@ -1,6 +1,7 @@
 import { createContext, useContext, useRef, createElement } from 'react';
 import { RENDERING_MODES } from '@hms-dbmi/viv';
-import { createStore, useStore } from 'zustand';
+import { createStore } from 'zustand';
+import { useStoreWithEqualityFn } from 'zustand/traditional';
 
 const captialize = string => string.charAt(0).toUpperCase() + string.slice(1);
 
@@ -173,9 +174,13 @@ function useStoreApi(storeName) {
 export const useChannelsStoreApi = () => useStoreApi('channels');
 export const useImageSettingsStoreApi = () => useStoreApi('imageSettings');
 export const useViewerStoreApi = () => useStoreApi('viewer');
-export const useChannelsStore = selector => useStore(useChannelsStoreApi(), selector);
-export const useImageSettingsStore = selector => useStore(useImageSettingsStoreApi(), selector);
-export const useViewerStore = selector => useStore(useViewerStoreApi(), selector);
+function useAviStore(storeName, selector, eqFn) {
+  const store = useStoreApi(storeName);
+  return useStoreWithEqualityFn(store, selector, eqFn);
+}
+export const useChannelsStore = (selector, eqFn) => useAviStore('channels', selector, eqFn);
+export const useImageSettingsStore = (selector, eqFn) => useAviStore('imageSettings', selector, eqFn);
+export const useViewerStore = (selector, eqFn) => useAviStore('viewer', selector, eqFn);
 
 export const useLoader = () => {
   const [fullLoader, image] = useChannelsStore(store => [

From 1b1ad50f78054fe18f900a4e187875fd9cdb39de Mon Sep 17 00:00:00 2001
From: Peter Todd <ptr.tdd@gmail.com>
Date: Mon, 13 Nov 2023 13:02:43 +0000
Subject: [PATCH 4/8] remove unused imports

---
 .../src/components/Controller/components/VolumeButton.jsx        | 1 -
 1 file changed, 1 deletion(-)

diff --git a/sites/avivator/src/components/Controller/components/VolumeButton.jsx b/sites/avivator/src/components/Controller/components/VolumeButton.jsx
index 03e5925d5..70524b2a0 100644
--- a/sites/avivator/src/components/Controller/components/VolumeButton.jsx
+++ b/sites/avivator/src/components/Controller/components/VolumeButton.jsx
@@ -12,7 +12,6 @@ import { makeStyles } from '@material-ui/core/styles';
 import { shallow } from 'zustand/shallow';
 
 import {
-  useImageSettingsStore,
   useViewerStore,
   useChannelsStore,
   useLoader,

From 1dc6c16b6c3cdd1b2fe3efd541e45f19d1b6db37 Mon Sep 17 00:00:00 2001
From: Peter Todd <ptr.tdd@gmail.com>
Date: Tue, 21 Nov 2023 12:03:51 +0000
Subject: [PATCH 5/8] Merge branch 'main' into context2

---
 .../src/components/Controller/components/ColormapSelect.jsx   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/sites/avivator/src/components/Controller/components/ColormapSelect.jsx b/sites/avivator/src/components/Controller/components/ColormapSelect.jsx
index 1e8af9c89..fd1e58c00 100644
--- a/sites/avivator/src/components/Controller/components/ColormapSelect.jsx
+++ b/sites/avivator/src/components/Controller/components/ColormapSelect.jsx
@@ -4,12 +4,12 @@ import InputLabel from '@material-ui/core/InputLabel';
 import Select from '@material-ui/core/Select';
 
 import { COLORMAP_OPTIONS } from '../../../constants';
-import { useChannelsStoreApi, 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 = useChannelsStoreApi();
+  const imageSettingsStore = useImageSettingsStoreApi();
   return (
     <FormControl fullWidth>
       <InputLabel htmlFor="colormap-select">

From a476d5fd087fa2b85b4469edb471a185201cead0 Mon Sep 17 00:00:00 2001
From: Peter Todd <ptr.tdd@gmail.com>
Date: Tue, 21 Nov 2023 13:46:31 +0000
Subject: [PATCH 6/8] prettier format

---
 .../Controller/components/ColormapSelect.jsx  |   6 +-
 .../components/Controller/components/Menu.jsx |   7 +-
 .../components/RenderingModeSelect.jsx        |   6 +-
 sites/avivator/src/hooks.js                   |   2 +-
 sites/avivator/src/state.js                   | 158 ++++++++++--------
 5 files changed, 101 insertions(+), 78 deletions(-)

diff --git a/sites/avivator/src/components/Controller/components/ColormapSelect.jsx b/sites/avivator/src/components/Controller/components/ColormapSelect.jsx
index fd1e58c00..6e59b92ef 100644
--- a/sites/avivator/src/components/Controller/components/ColormapSelect.jsx
+++ b/sites/avivator/src/components/Controller/components/ColormapSelect.jsx
@@ -4,7 +4,11 @@ import InputLabel from '@material-ui/core/InputLabel';
 import Select from '@material-ui/core/Select';
 
 import { COLORMAP_OPTIONS } from '../../../constants';
-import { useImageSettingsStoreApi, useImageSettingsStore, useViewerStore } from '../../../state';
+import {
+  useImageSettingsStoreApi,
+  useImageSettingsStore,
+  useViewerStore
+} from '../../../state';
 
 function ColormapSelect() {
   const colormap = useImageSettingsStore(store => store.colormap);
diff --git a/sites/avivator/src/components/Controller/components/Menu.jsx b/sites/avivator/src/components/Controller/components/Menu.jsx
index e20138b77..b86052c34 100644
--- a/sites/avivator/src/components/Controller/components/Menu.jsx
+++ b/sites/avivator/src/components/Controller/components/Menu.jsx
@@ -18,7 +18,12 @@ import { Select } from '@material-ui/core';
 import MenuTitle from './MenuTitle';
 import DropzoneButton from './DropzoneButton';
 import { isMobileOrTablet, getNameFromUrl } from '../../../utils';
-import { useChannelsStore, useChannelsStoreApi, useViewerStore, useViewerStoreApi } from '../../../state';
+import {
+  useChannelsStore,
+  useChannelsStoreApi,
+  useViewerStore,
+  useViewerStoreApi
+} from '../../../state';
 
 const useStyles = makeStyles(theme => ({
   root: {
diff --git a/sites/avivator/src/components/Controller/components/RenderingModeSelect.jsx b/sites/avivator/src/components/Controller/components/RenderingModeSelect.jsx
index a088f2b32..7d6249529 100644
--- a/sites/avivator/src/components/Controller/components/RenderingModeSelect.jsx
+++ b/sites/avivator/src/components/Controller/components/RenderingModeSelect.jsx
@@ -5,7 +5,11 @@ import InputLabel from '@material-ui/core/InputLabel';
 import { shallow } from 'zustand/shallow';
 
 import { RENDERING_MODES } from '@hms-dbmi/viv';
-import { useImageSettingsStore, useImageSettingsStoreApi, useViewerStore } from '../../../state';
+import {
+  useImageSettingsStore,
+  useImageSettingsStoreApi,
+  useViewerStore
+} from '../../../state';
 
 const renderingOptions = Object.values(RENDERING_MODES);
 
diff --git a/sites/avivator/src/hooks.js b/sites/avivator/src/hooks.js
index fe7b7631c..232f5fd0f 100644
--- a/sites/avivator/src/hooks.js
+++ b/sites/avivator/src/hooks.js
@@ -11,7 +11,7 @@ import {
   useViewerStore,
   useViewerStoreApi,
   useChannelsStoreApi,
-  useImageSettingsStoreApi,
+  useImageSettingsStoreApi
 } from './state';
 import {
   createLoader,
diff --git a/sites/avivator/src/state.js b/sites/avivator/src/state.js
index c4f2a5a55..e010ba67e 100644
--- a/sites/avivator/src/state.js
+++ b/sites/avivator/src/state.js
@@ -39,51 +39,52 @@ const DEFAUlT_CHANNEL_VALUES = {
   ids: ''
 };
 
-const createChannelsStore = () => createStore(set => ({
-  ...DEFAUlT_CHANNEL_STATE,
-  ...generateToggles(DEFAUlT_CHANNEL_VALUES, set),
-  toggleIsOn: index =>
-    set(state => {
-      const channelsVisible = [...state.channelsVisible];
-      channelsVisible[index] = !channelsVisible[index];
-      return { ...state, channelsVisible };
-    }),
-  setPropertiesForChannel: (channel, newProperties) =>
-    set(state => {
-      const entries = Object.entries(newProperties);
-      const newState = {};
-      entries.forEach(([property, value]) => {
-        newState[property] = [...state[property]];
-        newState[property][channel] = value;
-      });
-      return { ...state, ...newState };
-    }),
-  removeChannel: channel =>
-    set(state => {
-      const newState = {};
-      const channelKeys = Object.keys(DEFAUlT_CHANNEL_VALUES);
-      Object.keys(state).forEach(key => {
-        if (channelKeys.includes(key)) {
-          newState[key] = state[key].filter((_, j) => j !== channel);
-        }
-      });
-      return { ...state, ...newState };
-    }),
-  addChannel: newProperties =>
-    set(state => {
-      const entries = Object.entries(newProperties);
-      const newState = { ...state };
-      entries.forEach(([property, value]) => {
-        newState[property] = [...state[property], value];
-      });
-      Object.entries(DEFAUlT_CHANNEL_VALUES).forEach(([k, v]) => {
-        if (newState[k].length < newState[entries[0][0]].length) {
-          newState[k] = [...state[k], v];
-        }
-      });
-      return newState;
-    })
-}));
+const createChannelsStore = () =>
+  createStore(set => ({
+    ...DEFAUlT_CHANNEL_STATE,
+    ...generateToggles(DEFAUlT_CHANNEL_VALUES, set),
+    toggleIsOn: index =>
+      set(state => {
+        const channelsVisible = [...state.channelsVisible];
+        channelsVisible[index] = !channelsVisible[index];
+        return { ...state, channelsVisible };
+      }),
+    setPropertiesForChannel: (channel, newProperties) =>
+      set(state => {
+        const entries = Object.entries(newProperties);
+        const newState = {};
+        entries.forEach(([property, value]) => {
+          newState[property] = [...state[property]];
+          newState[property][channel] = value;
+        });
+        return { ...state, ...newState };
+      }),
+    removeChannel: channel =>
+      set(state => {
+        const newState = {};
+        const channelKeys = Object.keys(DEFAUlT_CHANNEL_VALUES);
+        Object.keys(state).forEach(key => {
+          if (channelKeys.includes(key)) {
+            newState[key] = state[key].filter((_, j) => j !== channel);
+          }
+        });
+        return { ...state, ...newState };
+      }),
+    addChannel: newProperties =>
+      set(state => {
+        const entries = Object.entries(newProperties);
+        const newState = { ...state };
+        entries.forEach(([property, value]) => {
+          newState[property] = [...state[property], value];
+        });
+        Object.entries(DEFAUlT_CHANNEL_VALUES).forEach(([k, v]) => {
+          if (newState[k].length < newState[entries[0][0]].length) {
+            newState[k] = [...state[k], v];
+          }
+        });
+        return newState;
+      })
+  }));
 
 const DEFAULT_IMAGE_STATE = {
   lensSelection: 0,
@@ -101,10 +102,11 @@ const DEFAULT_IMAGE_STATE = {
   onViewportLoad: () => {}
 };
 
-const createImageSettingsStore = () => createStore(set => ({
-  ...DEFAULT_IMAGE_STATE,
-  ...generateToggles(DEFAULT_IMAGE_STATE, set)
-}));
+const createImageSettingsStore = () =>
+  createStore(set => ({
+    ...DEFAULT_IMAGE_STATE,
+    ...generateToggles(DEFAULT_IMAGE_STATE, set)
+  }));
 
 const DEFAULT_VIEWER_STATE = {
   isChannelLoading: [],
@@ -130,27 +132,28 @@ const DEFAULT_VIEWER_STATE = {
   pyramidResolution: 0
 };
 
-const createViewerStore = () => createStore(set => ({
-  ...DEFAULT_VIEWER_STATE,
-  ...generateToggles(DEFAULT_VIEWER_STATE, set),
-  setIsChannelLoading: (index, val) =>
-    set(state => {
-      const newIsChannelLoading = [...state.isChannelLoading];
-      newIsChannelLoading[index] = val;
-      return { ...state, isChannelLoading: newIsChannelLoading };
-    }),
-  addIsChannelLoading: val =>
-    set(state => {
-      const newIsChannelLoading = [...state.isChannelLoading, val];
-      return { ...state, isChannelLoading: newIsChannelLoading };
-    }),
-  removeIsChannelLoading: index =>
-    set(state => {
-      const newIsChannelLoading = [...state.isChannelLoading];
-      newIsChannelLoading.splice(index, 1);
-      return { ...state, isChannelLoading: newIsChannelLoading };
-    })
-}));
+const createViewerStore = () =>
+  createStore(set => ({
+    ...DEFAULT_VIEWER_STATE,
+    ...generateToggles(DEFAULT_VIEWER_STATE, set),
+    setIsChannelLoading: (index, val) =>
+      set(state => {
+        const newIsChannelLoading = [...state.isChannelLoading];
+        newIsChannelLoading[index] = val;
+        return { ...state, isChannelLoading: newIsChannelLoading };
+      }),
+    addIsChannelLoading: val =>
+      set(state => {
+        const newIsChannelLoading = [...state.isChannelLoading, val];
+        return { ...state, isChannelLoading: newIsChannelLoading };
+      }),
+    removeIsChannelLoading: index =>
+      set(state => {
+        const newIsChannelLoading = [...state.isChannelLoading];
+        newIsChannelLoading.splice(index, 1);
+        return { ...state, isChannelLoading: newIsChannelLoading };
+      })
+  }));
 
 export const AvivatorContext = createContext(null);
 
@@ -163,7 +166,11 @@ export const AvivatorProvider = ({ children }) => {
       viewer: createViewerStore()
     };
   }
-  return createElement(AvivatorContext.Provider, {value: storesRef.current}, children);
+  return createElement(
+    AvivatorContext.Provider,
+    { value: storesRef.current },
+    children
+  );
 };
 
 function useStoreApi(storeName) {
@@ -178,9 +185,12 @@ function useAviStore(storeName, selector, eqFn) {
   const store = useStoreApi(storeName);
   return useStoreWithEqualityFn(store, selector, eqFn);
 }
-export const useChannelsStore = (selector, eqFn) => useAviStore('channels', selector, eqFn);
-export const useImageSettingsStore = (selector, eqFn) => useAviStore('imageSettings', selector, eqFn);
-export const useViewerStore = (selector, eqFn) => useAviStore('viewer', selector, eqFn);
+export const useChannelsStore = (selector, eqFn) =>
+  useAviStore('channels', selector, eqFn);
+export const useImageSettingsStore = (selector, eqFn) =>
+  useAviStore('imageSettings', selector, eqFn);
+export const useViewerStore = (selector, eqFn) =>
+  useAviStore('viewer', selector, eqFn);
 
 export const useLoader = () => {
   const [fullLoader, image] = useChannelsStore(store => [

From 8c08a2c219dc0882a78542c8bebf8434ae013efe Mon Sep 17 00:00:00 2001
From: Peter Todd <ptr.tdd@gmail.com>
Date: Thu, 23 Nov 2023 14:54:37 +0000
Subject: [PATCH 7/8] lint

---
 .../components/Controller/components/GlobalSelectionSlider.jsx  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/sites/avivator/src/components/Controller/components/GlobalSelectionSlider.jsx b/sites/avivator/src/components/Controller/components/GlobalSelectionSlider.jsx
index 335eb6221..d32ac8175 100644
--- a/sites/avivator/src/components/Controller/components/GlobalSelectionSlider.jsx
+++ b/sites/avivator/src/components/Controller/components/GlobalSelectionSlider.jsx
@@ -51,7 +51,7 @@ export default function GlobalSelectionSlider(props) {
           imageSettingsStore.setState({
             onViewportLoad: () => {
               imageSettingsStore.setState({
-                onViewportLoad: () => { }
+                onViewportLoad: () => {}
               });
               viewerStore.setState({
                 isChannelLoading: selections.map(() => false)

From b0b68ec99de0f21adfc2f6460df52e94f7506f5e Mon Sep 17 00:00:00 2001
From: Peter Todd <ptr.tdd@gmail.com>
Date: Wed, 6 Dec 2023 11:27:13 +0000
Subject: [PATCH 8/8] some documentation

---
 sites/avivator/src/state.js | 48 +++++++++++++++++++++++++++++--------
 1 file changed, 38 insertions(+), 10 deletions(-)

diff --git a/sites/avivator/src/state.js b/sites/avivator/src/state.js
index e010ba67e..77cf7cc49 100644
--- a/sites/avivator/src/state.js
+++ b/sites/avivator/src/state.js
@@ -155,8 +155,15 @@ const createViewerStore = () =>
       })
   }));
 
-export const AvivatorContext = createContext(null);
+const AvivatorContext = createContext(null);
 
+/**
+ * AvivatorProvider is used to provide `channels`, `imageSettings`, and `viewer` stores to the rest of the app.
+ * In the case of Avivator itself, there is one of these at the root, in `index.jsx`.
+ *
+ * You can have multiple independent viewers, using different images and/or other settings,
+ * by creating an AvivatorProvider for each viewer.
+ */
 export const AvivatorProvider = ({ children }) => {
   const storesRef = useRef(null);
   if (!storesRef.current) {
@@ -173,24 +180,45 @@ export const AvivatorProvider = ({ children }) => {
   );
 };
 
+/**
+ * useStoreApi is a basic wrapper function used to get a specific store from the AvivatorProvider.
+ *
+ * The `use<X>Store` functions are used to get state from the store, with a selector and optional equality function.
+ * These are used in Avivator components primarily to get state from the store and subscribe to changes.
+ * They cannot be used outside of the React render cycle, or anywhere where there is not an active {@link AvivatorContext}.
+ * In these cases, it is necessary to use the `use<X>StoreApi` functions instead.
+ *
+ * The `use<X>StoreApi` functions are used to obtain a reference to the store object itself, which can be later used
+ * outside of the React render cycle - for example, with `setState()` in an event handler - where the {@link AvivatorContext}
+ * would otherwise be ambiguous.
+ */
 function useStoreApi(storeName) {
   const store = useContext(AvivatorContext);
-  if (!store) throw 'useStore must be used within a AvivatorProvider';
+  if (!store) throw 'useStore must be used within an AvivatorProvider';
   return store[storeName];
 }
 export const useChannelsStoreApi = () => useStoreApi('channels');
 export const useImageSettingsStoreApi = () => useStoreApi('imageSettings');
 export const useViewerStoreApi = () => useStoreApi('viewer');
-function useAviStore(storeName, selector, eqFn) {
+/**
+ * For use of stores with `selector` and optional `equalityFn` within React rendering.
+ * Equivalent API to `use<X>Store` functions that were used before adding support for React Context,
+ * but only for invoking as a function, not `useXStore.setState(...)` etc.
+ *
+ * @param {'channels' | 'imageSettings' | 'viewer'} storeName
+ * @param {function} selector - selector function, see Zustand docs
+ * @param {function?} equalityFn - equality function, see Zustand docs
+ */
+function useAvivatorStore(storeName, selector, equalityFn) {
   const store = useStoreApi(storeName);
-  return useStoreWithEqualityFn(store, selector, eqFn);
+  return useStoreWithEqualityFn(store, selector, equalityFn);
 }
-export const useChannelsStore = (selector, eqFn) =>
-  useAviStore('channels', selector, eqFn);
-export const useImageSettingsStore = (selector, eqFn) =>
-  useAviStore('imageSettings', selector, eqFn);
-export const useViewerStore = (selector, eqFn) =>
-  useAviStore('viewer', selector, eqFn);
+export const useChannelsStore = (selector, equalityFn) =>
+  useAvivatorStore('channels', selector, equalityFn);
+export const useImageSettingsStore = (selector, equalityFn) =>
+  useAvivatorStore('imageSettings', selector, equalityFn);
+export const useViewerStore = (selector, equalityFn) =>
+  useAvivatorStore('viewer', selector, equalityFn);
 
 export const useLoader = () => {
   const [fullLoader, image] = useChannelsStore(store => [