@vitessce/vit-s 3.3.2 → 3.3.3

package/src/data-hooks-multilevel-utils.js

@@ -388,7 +388,7 @@ export function useFeatureSelectionMultiLevel(
   // (i.e., a single number, despite possibly different numbers of queries).
   // Reference: https://github.com/TanStack/query/issues/3049#issuecomment-1253201068
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [featureQueries.reduce((a, h) => a + h.dataUpdatedAt, 0)]);
+  }, [featureQueries.reduce((a, h) => a + h.dataUpdatedAt, 0), queryKeyScopeTuples]);
 
   return [geneData, loadedGeneName, extents, normData, dataStatus];
 }
@@ -479,8 +479,10 @@ export function useObsFeatureMatrixIndicesMultiLevel(
   // We use .reduce to ensure the number of dependencies is stable
   // (i.e., a single number, despite possibly different numbers of queries).
   // Reference: https://github.com/TanStack/query/issues/3049#issuecomment-1253201068
+  // We also want to re-compute if any of the keys within the matchOnObj change,
+  // so we also use queryKeyScopeTuples as a dependency.
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [indicesQueries.reduce((a, h) => a + h.dataUpdatedAt, 0)]);
+  }, [indicesQueries.reduce((a, h) => a + h.dataUpdatedAt, 0), queryKeyScopeTuples]);
 
   return [indicesData, dataStatus];
 }
@@ -535,7 +537,7 @@ function useDataTypeMultiLevel(
   // (i.e., a single number, despite possibly different numbers of queries).
   // Reference: https://github.com/TanStack/query/issues/3049#issuecomment-1253201068
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [locationsQueries.reduce((a, h) => a + h.dataUpdatedAt, 0)]);
+  }, [locationsQueries.reduce((a, h) => a + h.dataUpdatedAt, 0), queryKeyScopeTuples]);
 
   return [locationsData, dataStatus];
 }

package/src/data-hooks-multilevel.js

@@ -42,6 +42,8 @@ export function useSegmentationMultiFeatureSelection(
     // use coordinationScopes and coordinationScopesBy which are
     // indirect dependencies here.
     [coordinationScopes, coordinationScopesBy]);
+  const useMemoDependency = Object.values(featureSelectionCoordination[0] || {})
+    .flatMap(layerVal => Object.values(layerVal).map(cVal => cVal.featureSelection));
   const selections = useMemo(() => fromEntries(Object.entries(featureSelectionCoordination[0])
     .map(([layerScope, layerVal]) => ([
       layerScope,
@@ -52,8 +54,9 @@ export function useSegmentationMultiFeatureSelection(
     ]))),
   // Need to execute this more frequently, whenever the featureSelections update.
   [coordinationScopes, coordinationScopesBy,
-    ...Object.values(featureSelectionCoordination[0] || {})
-      .flatMap(layerVal => Object.values(layerVal).map(cVal => cVal.featureSelection)),
+    // We need to ensure there are always the same number of
+    // entries in the full dependency array.
+    JSON.stringify(useMemoDependency.length > 0 ? useMemoDependency : [null]),
   ]);
   const [
     featureData, loadedSelections, extents, normData, featureStatus,

package/src/data-hooks.js

@@ -334,7 +334,7 @@ export function useObsFeatureMatrixIndices(
               obsIndex: payloadData.rows,
               featureIndex: payloadData.cols,
             },
-            urls: [{ url, name: DataType.OBS_FEATURE_MATRIX }],
+            urls: (url ? [{ url, name: DataType.OBS_FEATURE_MATRIX }] : null),
           };
         }
         // No loadAttrs function.
@@ -377,6 +377,7 @@ export function useObsFeatureMatrixIndices(
 
 export function useMultiObsPoints(
   coordinationScopes, coordinationScopesBy, loaders, dataset,
+  mergeCoordination, viewUid,
 ) {
   const obsTypeCoordination = useComplexCoordination(
     [
@@ -394,13 +395,14 @@ export function useMultiObsPoints(
   const [obsPointsData, obsPointsDataStatus, obsPointsUrls] = useDataTypeMulti(
     DataType.OBS_POINTS, loaders, dataset,
     false, {}, {},
-    matchOnObj,
+    matchOnObj, mergeCoordination, viewUid,
   );
   return [obsPointsData, obsPointsDataStatus, obsPointsUrls];
 }
 
 export function useMultiObsSpots(
   coordinationScopes, coordinationScopesBy, loaders, dataset,
+  mergeCoordination, viewUid,
 ) {
   const obsTypeCoordination = useComplexCoordination(
     [
@@ -418,7 +420,7 @@ export function useMultiObsSpots(
   const [obsSpotsData, obsSpotsDataStatus, obsSpotsUrls] = useDataTypeMulti(
     DataType.OBS_SPOTS, loaders, dataset,
     false, {}, {},
-    matchOnObj,
+    matchOnObj, mergeCoordination, viewUid,
   );
   return [obsSpotsData, obsSpotsDataStatus, obsSpotsUrls];
 }
@@ -470,6 +472,7 @@ export function useMultiObsLabels(
 
 export function useMultiObsSegmentations(
   coordinationScopes, coordinationScopesBy, loaders, dataset,
+  mergeCoordination, viewUid,
 ) {
   const imageCoordination = useComplexCoordination(
     [
@@ -491,13 +494,14 @@ export function useMultiObsSegmentations(
   ] = useDataTypeMulti(
     DataType.OBS_SEGMENTATIONS, loaders, dataset,
     false, {}, {},
-    matchOnObj,
+    matchOnObj, mergeCoordination, viewUid,
   );
   return [obsSegmentationsData, obsSegmentationsDataStatus, obsSegmentationsUrls];
 }
 
 export function useMultiImages(
   coordinationScopes, coordinationScopesBy, loaders, dataset,
+  mergeCoordination, viewUid,
 ) {
   // TODO: delegate the generation of matchOnObj to a different hoook and pass as a parameter?
   // (in all of the useMulti data hooks)?
@@ -517,7 +521,7 @@ export function useMultiImages(
   const [imageData, imageDataStatus, imageUrls] = useDataTypeMulti(
     DataType.IMAGE, loaders, dataset,
     false, {}, {},
-    matchOnObj,
+    matchOnObj, mergeCoordination, viewUid,
   );
   return [imageData, imageDataStatus, imageUrls];
 }

package/src/index.js

@@ -31,6 +31,7 @@ export {
   useMultiDatasetCoordination,
   useDatasetUids,
   useLoaders,
+  useMergeCoordination,
   useMatchingLoader,
   useViewConfigStore,
   useViewConfigStoreApi,

package/src/state/hooks.js

@@ -4,9 +4,10 @@ import { useRef, useCallback, useMemo } from 'react';
 import create from 'zustand';
 import createContext from 'zustand/context';
 import shallow from 'zustand/shallow';
-import { isMatch, merge, cloneDeep } from 'lodash-es';
+import { isMatch, cloneDeep } from 'lodash-es';
 import { CoordinationType } from '@vitessce/constants-internal';
 import { fromEntries, capitalize } from '@vitessce/utils';
+import { getCoordinationSpaceAndScopes } from '@vitessce/config';
 import {
   removeImageChannelInMetaCoordinationScopesHelper,
   addImageChannelInMetaCoordinationScopesHelper,
@@ -52,7 +53,15 @@ export function getScopes(coordinationScopes, metaSpace) {
       metaScopesArr.forEach((metaScope) => {
         // Merge the original coordinationScopes with the matching meta-coordinationScopes
         // from the coordinationSpace.
-        result = merge(result, metaSpace[metaScope]);
+        let o1 = result;
+        const o2 = metaSpace[metaScope] || {};
+        Object.entries(o2).forEach(([cType, cScope]) => {
+          o1 = {
+            ...o1,
+            [cType]: cScope,
+          };
+        });
+        result = o1;
       });
     }
   }
@@ -80,7 +89,29 @@ export function getScopesBy(coordinationScopes, coordinationScopesBy, metaSpaceB
       metaScopesArr.forEach((metaScope) => {
         // Merge the original coordinationScopesBy with the matching meta-coordinationScopesBy
         // from the coordinationSpace.
-        result = merge(result, metaSpaceBy[metaScope]);
+        let o1 = result;
+        const o2 = metaSpaceBy[metaScope] || {};
+        // Cannot simply use lodash merge(o1, o2)
+        // because we do not want to merge (objects/arrays) at the leaf
+        // (i.e., secondaryScopeVal) level.
+        // We want the values in o2 to take precedence over the values in o1.
+        Object.entries(o2).forEach(([primaryType, primaryObj]) => {
+          Object.entries(primaryObj).forEach(([secondaryType, secondaryObj]) => {
+            Object.entries(secondaryObj).forEach(([primaryScope, secondaryScopeVal]) => {
+              o1 = {
+                ...o1,
+                [primaryType]: {
+                  ...(o1?.[primaryType] || {}),
+                  [secondaryType]: {
+                    ...(o1?.[primaryType]?.[secondaryType] || {}),
+                    [primaryScope]: secondaryScopeVal,
+                  },
+                },
+              };
+            });
+          });
+        });
+        result = o1;
       });
     }
   }
@@ -173,6 +204,87 @@ export const createViewConfigStore = (initialLoaders, initialConfig) => create(s
       },
     };
   }),
+  mergeCoordination: (newCoordinationValues, scopePrefix, viewUid) => set((state) => {
+    const { coordinationSpace, layout } = state.viewConfig;
+    const {
+      coordinationSpace: newCoordinationSpace,
+      coordinationScopes,
+    } = getCoordinationSpaceAndScopes(newCoordinationValues, scopePrefix);
+    // Merge coordination objects in coordination space
+    Object.entries(newCoordinationSpace).forEach(([coordinationType, coordinationObj]) => {
+      if (coordinationType === CoordinationType.META_COORDINATION_SCOPES) {
+        // Perform an extra level of merging for meta-coordination scopes.
+        Object.entries(coordinationObj).forEach(([coordinationScope, coordinationValue]) => {
+          coordinationSpace[coordinationType] = {
+            ...coordinationSpace[coordinationType],
+            [coordinationScope]: {
+              ...coordinationValue,
+              ...(coordinationSpace[coordinationType]?.[coordinationScope] || {}),
+            },
+          };
+        });
+      } else if (coordinationType === CoordinationType.META_COORDINATION_SCOPES_BY) {
+        // Perform two extra levels of merging for meta-coordination scopesBy.
+        Object.entries(coordinationObj).forEach(([coordinationScope, coordinationValue]) => {
+          Object.entries(coordinationValue).forEach(([primaryType, primaryObj]) => {
+            Object.entries(primaryObj).forEach(([secondaryType, secondaryObj]) => {
+              coordinationSpace[coordinationType] = {
+                ...coordinationSpace[coordinationType],
+                [coordinationScope]: {
+                  ...(coordinationSpace[coordinationType]?.[coordinationScope] || {}),
+                  [primaryType]: {
+                    ...(coordinationSpace[coordinationType]?.[coordinationScope]?.[primaryType] || {}),
+                    [secondaryType]: {
+                      ...secondaryObj,
+                      ...(coordinationSpace[coordinationType]?.[coordinationScope]?.[primaryType]?.[secondaryType] || {}),
+                    },
+                  },
+                },
+              };
+            });
+          });
+        });
+      } else {
+        coordinationSpace[coordinationType] = {
+          ...coordinationObj,
+          // Existing coordination values should be preserved,
+          // so that user-defined values take precedence over auto-initialization values.
+          ...(coordinationSpace[coordinationType] || {}),
+        };
+      }
+    });
+
+    const newViewConfig = {
+      ...state.viewConfig,
+      coordinationSpace: {
+        ...coordinationSpace,
+      },
+      layout: layout.map((viewObj) => {
+        if (viewObj.uid === viewUid) {
+          // Merge coordination scopes for views
+          return {
+            ...viewObj,
+            coordinationScopes: {
+              ...viewObj.coordinationScopes,
+              [CoordinationType.META_COORDINATION_SCOPES]: [
+                ...(coordinationScopes[CoordinationType.META_COORDINATION_SCOPES] || []),
+                ...(viewObj.coordinationScopes[CoordinationType.META_COORDINATION_SCOPES] || []),
+              ],
+              [CoordinationType.META_COORDINATION_SCOPES_BY]: [
+                ...(coordinationScopes[CoordinationType.META_COORDINATION_SCOPES_BY] || []),
+                ...(viewObj.coordinationScopes[CoordinationType.META_COORDINATION_SCOPES_BY] || []),
+              ],
+            },
+          };
+        }
+        return viewObj;
+      }),
+    };
+    // console.log('newViewConfig', newViewConfig);
+    return {
+      viewConfig: newViewConfig,
+    };
+  }),
   removeImageChannelInMetaCoordinationScopes: (coordinationScopesRaw, layerScope, channelScope) => set((state) => {
     const { coordinationSpace } = state.viewConfig;
     return {
@@ -969,6 +1081,16 @@ export function useSetLoaders() {
   return useViewConfigStore(state => state.setLoaders);
 }
 
+/**
+ * Obtain the loaders setter function from
+ * the global app state.
+ * @returns {function} The loaders setter function
+ * in the `useViewConfigStore` store.
+ */
+export function useMergeCoordination() {
+  return useViewConfigStore(state => state.mergeCoordination);
+}
+
 /**
  * Obtain the view config setter function from
  * the global app state.

package/src/state/spatial-reducers.js

@@ -25,7 +25,7 @@ export function getMetaScope(coordinationScopes, coordinationSpace, parameter) {
       metaScopesArr.forEach((metaScope) => {
         // Merge the original coordinationScopes with the matching meta-coordinationScopes
         // from the coordinationSpace.
-        if (metaSpace[metaScope][parameter]) {
+        if (metaSpace[metaScope]?.[parameter]) {
           latestMetaScope = metaScope;
         }
       });

package/src/vitessce-grid-utils.js

@@ -97,7 +97,7 @@ function withDefaults(
   const defaultKeys = DATA_TYPE_COORDINATION_VALUE_USAGE[dataType]
     .filter(k => (
       Object.keys(defaultCoordinationValues).includes(k)
-      && defaultCoordinationValues[k]
+      // && defaultCoordinationValues[k]
       && !Object.keys(coordinationValues).includes(k)
     ));
   const defaultValues = pick(defaultCoordinationValues, defaultKeys);