@vitessce/vit-s 3.6.0 → 3.6.1

package/src/state/hooks.js

@@ -1,9 +1,15 @@
 /* eslint-disable max-len */
 /* eslint-disable react-refresh/only-export-components */
-import { useRef, useCallback, useMemo } from 'react';
-import create from 'zustand';
-import createContext from 'zustand/context';
-import shallow from 'zustand/shallow';
+import React, {
+  useCallback,
+  useRef,
+  useMemo,
+  createContext,
+  useContext,
+} from 'react';
+import { create, useStore } from 'zustand';
+import { useShallow } from 'zustand/shallow';
+import { subscribeWithSelector } from 'zustand/middleware';
 import { isMatch, cloneDeep } from 'lodash-es';
 import { CoordinationType } from '@vitessce/constants-internal';
 import { capitalize } from '@vitessce/utils';
@@ -13,25 +19,95 @@ import {
   addImageChannelInMetaCoordinationScopesHelper,
 } from './spatial-reducers.js';
 
-// Reference: https://github.com/pmndrs/zustand#react-context
-// Reference: https://github.com/pmndrs/zustand/blob/e47ea03/tests/context.test.tsx#L60
-const {
-  Provider: ViewConfigProviderLocal,
-  useStore: useViewConfigStoreLocal,
-  useStoreApi: useViewConfigStoreApiLocal,
-} = createContext();
+// References for Zustand v3:
+// - https://github.com/pmndrs/zustand#react-context
+// - https://github.com/pmndrs/zustand/blob/e47ea03/tests/context.test.tsx#L60
+// References for Zustand v4:
+// - https://github.com/pmndrs/zustand/discussions/1180#discussioncomment-3354713
+// - https://zustand.docs.pmnd.rs/previous-versions/zustand-v3-create-context#migration
+const ViewConfigStoreContext = createContext(null);
+const AuxiliaryStoreContext = createContext(null);
+
+export function ViewConfigProvider(props) {
+  const {
+    createStore,
+    children,
+  } = props;
+
+  // Reference: https://github.com/pmndrs/zustand/discussions/1180
+  const storeRef = useRef();
+  if (!storeRef.current) {
+    storeRef.current = createStore();
+  }
+
+  return (
+    <ViewConfigStoreContext.Provider value={storeRef.current}>
+      {children}
+    </ViewConfigStoreContext.Provider>
+  );
+}
+
+export function useViewConfigStoreApi() {
+  const store = useContext(ViewConfigStoreContext);
+  if (!store) {
+    throw new Error('Missing StoreProvider');
+  }
+  return store;
+}
+export function useViewConfigStore(selector) {
+  const store = useViewConfigStoreApi();
+  if (!store) {
+    throw new Error('Missing StoreProvider');
+  }
+  const slice = useStore(store, selector);
+  return slice;
+}
+
+export function useViewConfigStoreShallow(selector) {
+  return useViewConfigStore(useShallow(selector));
+}
+
+/* Begin auxiliary store things */
+export function AuxiliaryProvider(props) {
+  const {
+    createStore,
+    children,
+  } = props;
+
+  // Reference: https://github.com/pmndrs/zustand/discussions/1180
+  const storeRef = useRef();
+  if (!storeRef.current) {
+    storeRef.current = createStore();
+  }
+
+  return (
+    <AuxiliaryStoreContext.Provider value={storeRef.current}>
+      {children}
+    </AuxiliaryStoreContext.Provider>
+  );
+}
 
-export const ViewConfigProvider = ViewConfigProviderLocal;
-export const useViewConfigStore = useViewConfigStoreLocal;
-export const useViewConfigStoreApi = useViewConfigStoreApiLocal;
+export function useAuxiliaryStoreApi() {
+  const store = useContext(AuxiliaryStoreContext);
+  if (!store) {
+    throw new Error('Missing StoreProvider');
+  }
+  return store;
+}
+export function useAuxiliaryStore(selector) {
+  const store = useAuxiliaryStoreApi();
+  if (!store) {
+    throw new Error('Missing StoreProvider');
+  }
+  const slice = useStore(store, selector);
+  return slice;
+}
 
-const {
-  Provider: AuxiliaryProviderLocal,
-  useStore: useAuxiliaryStoreLocal,
-} = createContext();
+export function useAuxiliaryStoreShallow(selector) {
+  return useAuxiliaryStore(useShallow(selector));
+}
+/* end auxiliary store things */
 
-export const AuxiliaryProvider = AuxiliaryProviderLocal;
-export const useAuxiliaryStore = useAuxiliaryStoreLocal;
 
 /**
  * Get the "computed" coordinationScopes after accounting for
@@ -160,7 +236,7 @@ export function getParameterScopeBy(
  * - https://github.com/pmndrs/zustand#using-subscribe-with-selector
  * @returns {function} The useStore hook.
  */
-export const createViewConfigStore = (initialLoaders, initialConfig) => create(set => ({
+export const createViewConfigStore = (initialLoaders, initialConfig) => create()(subscribeWithSelector(set => ({
   // State:
   // The viewConfig is an object which must conform to the schema
   // found in src/schemas/config.schema.json.
@@ -348,14 +424,14 @@ export const createViewConfigStore = (initialLoaders, initialConfig) => create(s
       mostRecentConfigSource: 'internal',
     };
   }),
-}));
+})));
 
 /**
  * Hook for getting components' layout from the view config based on
  * matching all coordination scopes.
  * @returns {Object} The components' layout.
  */
-export const useComponentLayout = (component, scopes, coordinationScopes) => useViewConfigStore(
+export const useComponentLayout = (component, scopes, coordinationScopes) => useViewConfigStoreShallow(
   state => state.viewConfig.layout.filter(l => l.component === component).filter(
     l => scopes.every(scope => l.coordinationScopes[scope]
           === coordinationScopes[scope]),
@@ -455,7 +531,7 @@ const useGridSizeStore = create(set => ({
  * @returns {object} Object containing all coordination values.
  */
 export function useInitialCoordination(parameters, coordinationScopes) {
-  const values = useViewConfigStore((state) => {
+  const values = useViewConfigStoreShallow((state) => {
     const { coordinationSpace } = state.initialViewConfig;
     return Object.fromEntries(parameters.map((parameter) => {
       if (coordinationSpace && coordinationSpace[parameter]) {
@@ -464,7 +540,7 @@ export function useInitialCoordination(parameters, coordinationScopes) {
       }
       return [parameter, undefined];
     }));
-  }, shallow);
+  });
   return values;
 }
 
@@ -487,7 +563,7 @@ export function useInitialCoordination(parameters, coordinationScopes) {
 export function useCoordination(parameters, coordinationScopes) {
   const setCoordinationValue = useViewConfigStore(state => state.setCoordinationValue);
 
-  const values = useViewConfigStore((state) => {
+  const values = useViewConfigStoreShallow((state) => {
     const { coordinationSpace } = state.viewConfig;
     return Object.fromEntries(parameters.map((parameter) => {
       if (coordinationSpace) {
@@ -499,7 +575,7 @@ export function useCoordination(parameters, coordinationScopes) {
       }
       return [parameter, undefined];
     }));
-  }, shallow);
+  });
 
   const setters = useMemo(() => Object.fromEntries(parameters.map((parameter) => {
     const setterName = `set${capitalize(parameter)}`;
@@ -527,10 +603,10 @@ export function useMultiCoordinationScopesNonNull(parameter, coordinationScopes)
 
   // Return array of coordination scopes,
   // but filter out any whose value is null / falsey.
-  const parameterSpace = useViewConfigStore((state) => {
+  const parameterSpace = useViewConfigStoreShallow((state) => {
     const { coordinationSpace } = state.viewConfig;
     return coordinationSpace?.[parameter];
-  }, shallow);
+  });
   const nonNullScopes = useMemo(() => {
     // Convert a single scope to an array of scopes to be consistent.
     const scopesArr = Array.isArray(scopes) ? scopes : [scopes];
@@ -580,14 +656,14 @@ export function useMultiCoordinationScopesSecondaryNonNull(
 ) {
   const scopes = getParameterScope(byType, coordinationScopes);
 
-  const parameterSpace = useViewConfigStore((state) => {
+  const parameterSpace = useViewConfigStoreShallow((state) => {
     const { coordinationSpace } = state.viewConfig;
     return coordinationSpace?.[parameter];
-  }, shallow);
-  const byTypeSpace = useViewConfigStore((state) => {
+  });
+  const byTypeSpace = useViewConfigStoreShallow((state) => {
     const { coordinationSpace } = state.viewConfig;
     return coordinationSpace?.[byType];
-  }, shallow);
+  });
 
   return useMemo(() => {
     if (scopes && coordinationScopesBy?.[byType]?.[parameter]) {
@@ -647,7 +723,7 @@ export function useMultiCoordinationValues(parameter, coordinationScopes) {
   const scopes = getParameterScope(parameter, coordinationScopes);
 
   // Mapping from dataset coordination scope name to dataset uid
-  const vals = useViewConfigStore((state) => {
+  const vals = useViewConfigStoreShallow((state) => {
     const { coordinationSpace } = state.viewConfig;
     // Convert a single scope to an array of scopes to be consistent.
     const scopesArr = Array.isArray(scopes) ? scopes : [scopes];
@@ -659,7 +735,7 @@ export function useMultiCoordinationValues(parameter, coordinationScopes) {
       return [scope, undefined];
       // eslint-disable-next-line no-unused-vars
     }).filter(([k, v]) => v !== undefined));
-  }, shallow);
+  });
 
   return vals;
 }
@@ -692,10 +768,10 @@ export function useComplexCoordination(
 ) {
   const setCoordinationValue = useViewConfigStore(state => state.setCoordinationValue);
 
-  const parameterSpaces = useViewConfigStore((state) => {
+  const parameterSpaces = useViewConfigStoreShallow((state) => {
     const { coordinationSpace } = state.viewConfig;
     return parameters.map(parameter => coordinationSpace[parameter]);
-  }, shallow);
+  });
 
   const values = useMemo(() => {
     const typeScopes = getParameterScope(byType, coordinationScopes);
@@ -766,10 +842,10 @@ export function useComplexCoordination(
  * @returns {object} The coordinationScopes after filling in with meta-coordinationScopes.
  */
 export function useCoordinationScopes(coordinationScopes) {
-  const metaSpace = useViewConfigStore((state) => {
+  const metaSpace = useViewConfigStoreShallow((state) => {
     const { coordinationSpace } = state.viewConfig;
     return coordinationSpace?.[CoordinationType.META_COORDINATION_SCOPES];
-  }, shallow);
+  });
   const vals = useMemo(() => {
     const scopes = getScopes(
       coordinationScopes,
@@ -790,10 +866,10 @@ export function useCoordinationScopes(coordinationScopes) {
  * @returns {object} The coordinationScopesBy after filling in with meta-coordinationScopesBy.
  */
 export function useCoordinationScopesBy(coordinationScopes, coordinationScopesBy) {
-  const metaSpaceBy = useViewConfigStore((state) => {
+  const metaSpaceBy = useViewConfigStoreShallow((state) => {
     const { coordinationSpace } = state.viewConfig;
     return coordinationSpace?.[CoordinationType.META_COORDINATION_SCOPES_BY];
-  }, shallow);
+  });
   const vals = useMemo(() => {
     const scopesBy = getScopesBy(
       coordinationScopes,
@@ -950,7 +1026,7 @@ export function useAuxiliaryCoordination(parameters, coordinationScopes) {
   const setCoordinationValue = useAuxiliaryStore(state => state.setCoordinationValue);
   const mappedCoordinationScopes = mapCoordinationScopes(coordinationScopes);
   const mappedParameters = mapParameters(parameters);
-  const values = useAuxiliaryStore((state) => {
+  const values = useAuxiliaryStoreShallow((state) => {
     const { auxiliaryStore } = state;
     return Object.fromEntries(mappedParameters.map((parameter) => {
       if (auxiliaryStore && auxiliaryStore[parameter]) {
@@ -959,7 +1035,7 @@ export function useAuxiliaryCoordination(parameters, coordinationScopes) {
       }
       return [parameter, undefined];
     }));
-  }, shallow);
+  });
   const setters = useMemo(() => Object.fromEntries(mappedParameters.map((parameter) => {
     const setterName = `set${capitalize(parameter)}`;
     const setterFunc = value => setCoordinationValue({