@vitessce/vit-s 3.3.1 → 3.3.3

package/src/TitleInfo.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useMemo } from 'react';
 import clsx from 'clsx';
 import { makeStyles, MenuItem, IconButton, Link } from '@material-ui/core';
 import {
@@ -57,11 +57,13 @@ function PlotOptions(props) {
   const { options } = props;
   const [open, setOpen] = useState(false);
   const classes = useStyles();
+
+  const buttonIcon = useMemo(() => (<SettingsIconWithArrow open={open} />), [open]);
   return (options ? (
     <PopperMenu
       open={open}
       setOpen={setOpen}
-      buttonIcon={<SettingsIconWithArrow open={open} />}
+      buttonIcon={buttonIcon}
       buttonClassName={classes.iconButton}
       placement="bottom-end"
       aria-label="Open plot options menu"
@@ -84,17 +86,18 @@ function DownloadOptions(props) {
   const { urls } = props;
   const [open, setOpen] = useState(false);
   const classes = useStyles();
+  const buttonIcon = useMemo(() => (<CloudDownloadIconWithArrow open={open} />), [open]);
   return (urls && urls.length ? (
     <PopperMenu
       open={open}
       setOpen={setOpen}
-      buttonIcon={<CloudDownloadIconWithArrow open={open} />}
+      buttonIcon={buttonIcon}
       buttonClassName={classes.iconButton}
       placement="bottom-end"
       aria-label="Open download options menu"
     >
       {urls.map(({ url, name }) => (
-        <MenuItem dense key={`${url}_${name}`} getArialLabel={() => `Click to download ${name}`}>
+        <MenuItem dense key={`${url}_${name}`} aria-label={`Click to download ${name}`}>
           <Link underline="always" href={url} target="_blank" rel="noopener" className={classes.downloadLink}>
             Download {name}
           </Link>
@@ -123,7 +126,7 @@ function ClosePaneButton(props) {
 export function TitleInfo(props) {
   const {
     title, info, children, isScroll, isSpatial, removeGridComponent, urls,
-    isReady, options,
+    isReady, options, closeButtonVisible = true, downloadButtonVisible = true,
   } = props;
 
   const classes = useTitleStyles();
@@ -142,12 +145,16 @@ export function TitleInfo(props) {
           <PlotOptions
             options={options}
           />
-          <DownloadOptions
-            urls={urls}
-          />
-          <ClosePaneButton
-            removeGridComponent={removeGridComponent}
-          />
+          {downloadButtonVisible ? (
+            <DownloadOptions
+              urls={urls}
+            />
+          ) : null}
+          {closeButtonVisible ? (
+            <ClosePaneButton
+              removeGridComponent={removeGridComponent}
+            />
+          ) : null}
         </div>
       </div>
       <div

package/src/VitS.js

@@ -224,6 +224,7 @@ export function VitS(props) {
                 height={height}
                 theme={theme}
                 isBounded={isBounded}
+                stores={stores}
               />
               <CallbackPublisher
                 onWarn={onWarn}

package/src/VitessceGrid.js

@@ -50,6 +50,7 @@ export default function VitessceGrid(props) {
     viewTypes,
     fileTypes,
     coordinationTypes,
+    stores,
   } = props;
 
   const [rowHeight, containerRef] = useRowHeight(config, initialRowHeight, height, margin, padding);
@@ -93,6 +94,7 @@ export default function VitessceGrid(props) {
         config.description,
         fileTypes,
         coordinationTypes,
+        stores,
       );
       newConfig = config;
     }

package/src/data-hook-utils.js

@@ -1,6 +1,10 @@
 import { useEffect, useMemo } from 'react';
 import { useQuery, useQueries } from '@tanstack/react-query';
-import { capitalize, fromEntries } from '@vitessce/utils';
+import {
+  capitalize,
+  fromEntries,
+  getInitialCoordinationScopePrefix,
+} from '@vitessce/utils';
 import { STATUS } from '@vitessce/constants-internal';
 import {
   getMatchingLoader,
@@ -66,7 +70,7 @@ export async function dataQueryFn(ctx) {
     const { data, url, coordinationValues } = payload;
     // Status: success
     // Array of objects like  { url, name }.
-    const urls = Array.isArray(url) ? url : [{ url, name: dataType }];
+    const urls = (Array.isArray(url) ? url : [{ url, name: dataType }]).filter(d => d.url);
     return { data, coordinationValues, urls };
   }
   // No loader was found.
@@ -169,6 +173,7 @@ export function useDataType(
 export function useDataTypeMulti(
   dataType, loaders, dataset, isRequired,
   coordinationSetters, initialCoordinationValues, matchOnObj,
+  mergeCoordination, viewUid,
 ) {
   const placeholderObject = useMemo(() => ({}), []);
   const setWarning = useSetWarning();
@@ -200,14 +205,23 @@ export function useDataTypeMulti(
 
   useEffect(() => {
     dataQueries
-      .map(q => q.data?.coordinationValues)
-      .filter(v => Boolean(v))
-      .forEach((coordinationValues) => {
-        initCoordinationSpace(
-          coordinationValues,
-          coordinationSetters,
-          initialCoordinationValues,
-        );
+      .filter(q => Boolean(q.data?.coordinationValues))
+      .forEach((q) => {
+        const { coordinationValues } = q.data;
+        if (mergeCoordination) {
+          mergeCoordination(
+            coordinationValues,
+            // Auto-generate based on the dataset and data type.
+            getInitialCoordinationScopePrefix(dataset, dataType),
+            viewUid,
+          );
+        } else {
+          initCoordinationSpace(
+            coordinationValues,
+            coordinationSetters,
+            initialCoordinationValues,
+          );
+        }
       });
   // Deliberate dependency omissions: use indirect dependencies for efficiency.
   // eslint-disable-next-line react-hooks/exhaustive-deps

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);