@vitessce/vit-s 3.1.3 → 3.2.1

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

@@ -0,0 +1,110 @@
+import { describe, it, expect } from 'vitest';
+import {
+  initializeNestedObject,
+  nestFeatureSelectionQueryResults,
+  getFeatureSelectionQueryKeyScopeTuples,
+  nestQueryResults,
+  getQueryKeyScopeTuples,
+} from './data-hooks-multilevel-utils.js';
+
+describe('recursive data hook utilities for nesting and un-nesting multi-level queries', () => {
+  describe('initializeNestedObject', () => {
+    it('should initialize an empty nested object', () => {
+      const nestedObject = {};
+      initializeNestedObject(['a', 'b', 'c'], nestedObject, () => true);
+      expect(nestedObject).toEqual({ a: { b: { c: true } } });
+    });
+
+    it('should initialize a non-empty nested object at the same path', () => {
+      const nestedObject = { a: { b: { c: [1, 2, 3] } } };
+      initializeNestedObject(['a', 'b', 'c'], nestedObject, () => []);
+      expect(nestedObject).toEqual({ a: { b: { c: [1, 2, 3] } } });
+    });
+
+    it('should initialize a non-empty nested object at a different path', () => {
+      const nestedObject = { a: { b: { c: [1, 2, 3] } } };
+      initializeNestedObject(['a', 'b', 'd'], nestedObject, () => []);
+      expect(nestedObject).toEqual({ a: { b: { c: [1, 2, 3], d: [] } } });
+    });
+    it('should initialize two paths', () => {
+      const nestedObject = {};
+      initializeNestedObject(['a', 'b', 'c'], nestedObject, () => true);
+      initializeNestedObject(['d', 'e', 'f'], nestedObject, () => true);
+      expect(nestedObject).toEqual({
+        a: { b: { c: true } },
+        d: { e: { f: true } },
+      });
+    });
+  });
+  describe('nestFeatureSelectionQueryResults', () => {
+    it('should nest flat query results', () => {
+      const queryKeyScopeTuples = [
+        [['someQueryKey', 'abc'], { levelScopes: ['a', 'b', 'c'], featureIndex: 0, numFeatures: 3 }],
+        [['someQueryKey', 'abc'], { levelScopes: ['a', 'b', 'c'], featureIndex: 1, numFeatures: 3 }],
+        [['someQueryKey', 'abd'], { levelScopes: ['a', 'b', 'd'], featureIndex: 0, numFeatures: 2 }],
+      ];
+      const flatQueryResults = [
+        'abc0',
+        'abc1',
+        'abd0',
+      ];
+      const nestedData = nestFeatureSelectionQueryResults(queryKeyScopeTuples, flatQueryResults);
+      expect(nestedData).toEqual({
+        a: { b: { c: ['abc0', 'abc1', undefined], d: ['abd0', undefined] } },
+      });
+    });
+  });
+  describe('getFeatureSelectionQueryKeyScopeTuples', () => {
+    it('should convert nested selections and matchOn objects to array of tuples', () => {
+      const selections = { a: { b: { c: ['geneA', 'geneB', 'geneC'] } } };
+      const matchOn = { a: { b: { c: { obsType: 'cell', featureType: 'gene' } } } };
+      const queryKeyScopeTuples = getFeatureSelectionQueryKeyScopeTuples(selections, matchOn, 3, 'someDataset', 'someDataType', true);
+      expect(queryKeyScopeTuples).toEqual([
+        [
+          ['someDataset', 'someDataType', { obsType: 'cell', featureType: 'gene' }, 'geneA', true, 'useFeatureSelectionMultiLevel'],
+          // scope info (for rolling up later)
+          { levelScopes: ['a', 'b', 'c'], featureIndex: 0, numFeatures: 3 },
+        ],
+        [
+          ['someDataset', 'someDataType', { obsType: 'cell', featureType: 'gene' }, 'geneB', true, 'useFeatureSelectionMultiLevel'],
+          // scope info (for rolling up later)
+          { levelScopes: ['a', 'b', 'c'], featureIndex: 1, numFeatures: 3 },
+        ],
+        [
+          ['someDataset', 'someDataType', { obsType: 'cell', featureType: 'gene' }, 'geneC', true, 'useFeatureSelectionMultiLevel'],
+          // scope info (for rolling up later)
+          { levelScopes: ['a', 'b', 'c'], featureIndex: 2, numFeatures: 3 },
+        ],
+      ]);
+    });
+  });
+  describe('nestQueryResults', () => {
+    it('should nest flat query results', () => {
+      const queryKeyScopeTuples = [
+        [['someQueryKey', 'abc'], { levelScopes: ['a', 'b', 'c'] }],
+        [['someQueryKey', 'abd'], { levelScopes: ['a', 'b', 'd'] }],
+      ];
+      const flatQueryResults = [
+        { someKey: 'abc0' },
+        { someKey: 'abd0' },
+      ];
+      const nestedData = nestQueryResults(queryKeyScopeTuples, flatQueryResults);
+      expect(nestedData).toEqual({
+        a: { b: { c: { someKey: 'abc0' }, d: { someKey: 'abd0' } } },
+      });
+    });
+  });
+  describe('getQueryKeyScopeTuples', () => {
+    it('should convert nested selections and matchOn objects to array of tuples', () => {
+      const matchOn = { a: { b: { c: { obsType: 'cell', featureType: 'gene' } } } };
+      const queryKeyScopeTuples = getQueryKeyScopeTuples(matchOn, 3, 'someDataset', 'someDataType', true);
+      expect(queryKeyScopeTuples).toEqual([
+        [
+          ['someDataset', 'someDataType', { obsType: 'cell', featureType: 'gene' }, true, 'useDataType'],
+          // scope info (for rolling up later)
+          { levelScopes: ['a', 'b', 'c'] },
+        ],
+      ]);
+    });
+  });
+});

package/src/data-hooks-multilevel.js

@@ -0,0 +1,226 @@
+import { useMemo } from 'react';
+import { CoordinationType } from '@vitessce/constants-internal';
+import { fromEntries } from '@vitessce/utils';
+import {
+  useComplexCoordination,
+  useComplexCoordinationSecondary,
+} from './state/hooks.js';
+import {
+  useFeatureSelectionMultiLevel,
+  useObsFeatureMatrixIndicesMultiLevel,
+  useObsLocationsMultiLevel,
+  useObsSetsMultiLevel,
+  useObsLabelsMultiLevel,
+} from './data-hooks-multilevel-utils.js';
+
+
+export function useSegmentationMultiFeatureSelection(
+  coordinationScopes, coordinationScopesBy, loaders, dataset,
+) {
+  const obsFeatureMatrixCoordination = useComplexCoordinationSecondary(
+    [
+      CoordinationType.OBS_TYPE,
+      CoordinationType.FEATURE_TYPE,
+      CoordinationType.FEATURE_VALUE_TYPE,
+    ],
+    coordinationScopes,
+    coordinationScopesBy,
+    CoordinationType.SEGMENTATION_LAYER,
+    CoordinationType.SEGMENTATION_CHANNEL,
+  );
+  const featureSelectionCoordination = useComplexCoordinationSecondary(
+    [
+      CoordinationType.FEATURE_SELECTION,
+    ],
+    coordinationScopes,
+    coordinationScopesBy,
+    CoordinationType.SEGMENTATION_LAYER,
+    CoordinationType.SEGMENTATION_CHANNEL,
+  );
+  const matchOnObj = useMemo(() => obsFeatureMatrixCoordination[0],
+    // imageCoordination reference changes each render,
+    // use coordinationScopes and coordinationScopesBy which are
+    // indirect dependencies here.
+    [coordinationScopes, coordinationScopesBy]);
+  const selections = useMemo(() => fromEntries(Object.entries(featureSelectionCoordination[0])
+    .map(([layerScope, layerVal]) => ([
+      layerScope,
+      fromEntries(
+        Object.entries(layerVal)
+          .map(([cScope, cVal]) => ([cScope, cVal.featureSelection])),
+      ),
+    ]))),
+  // 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)),
+  ]);
+  const [
+    featureData, loadedSelections, extents, normData, featureStatus,
+  ] = useFeatureSelectionMultiLevel(
+    loaders, dataset, false, matchOnObj, selections, 2,
+  );
+  return [featureData, loadedSelections, extents, normData, featureStatus];
+}
+
+export function useSpotMultiFeatureSelection(
+  coordinationScopes, coordinationScopesBy, loaders, dataset,
+) {
+  const obsFeatureMatrixCoordination = useComplexCoordination(
+    [
+      CoordinationType.OBS_TYPE,
+      CoordinationType.FEATURE_TYPE,
+      CoordinationType.FEATURE_VALUE_TYPE,
+    ],
+    coordinationScopes,
+    coordinationScopesBy,
+    CoordinationType.SPOT_LAYER,
+  );
+  const featureSelectionCoordination = useComplexCoordination(
+    [
+      CoordinationType.FEATURE_SELECTION,
+    ],
+    coordinationScopes,
+    coordinationScopesBy,
+    CoordinationType.SPOT_LAYER,
+  );
+  const matchOnObj = useMemo(() => obsFeatureMatrixCoordination[0],
+    // imageCoordination reference changes each render,
+    // use coordinationScopes and coordinationScopesBy which are
+    // indirect dependencies here.
+    [coordinationScopes, coordinationScopesBy]);
+  const selections = useMemo(() => fromEntries(Object.entries(featureSelectionCoordination[0])
+    .map(([layerScope, layerVal]) => ([
+      layerScope,
+      layerVal.featureSelection,
+    ]))),
+  // Need to execute this more frequently, whenever the featureSelections update.
+  [coordinationScopes, coordinationScopesBy,
+    ...Object.values(featureSelectionCoordination[0] || {})
+      .flatMap(layerVal => layerVal.featureSelection),
+  ]);
+  const [
+    featureData, loadedSelections, extents, normData, featureStatus,
+  ] = useFeatureSelectionMultiLevel(
+    loaders, dataset, false, matchOnObj, selections, 1,
+  );
+  return [featureData, loadedSelections, extents, normData, featureStatus];
+}
+
+export function useSegmentationMultiObsFeatureMatrixIndices(
+  coordinationScopes, coordinationScopesBy, loaders, dataset,
+) {
+  const obsFeatureMatrixCoordination = useComplexCoordinationSecondary(
+    [
+      CoordinationType.OBS_TYPE,
+      CoordinationType.FEATURE_TYPE,
+      CoordinationType.FEATURE_VALUE_TYPE,
+    ],
+    coordinationScopes,
+    coordinationScopesBy,
+    CoordinationType.SEGMENTATION_LAYER,
+    CoordinationType.SEGMENTATION_CHANNEL,
+  );
+  const matchOnObj = useMemo(() => obsFeatureMatrixCoordination[0],
+    // imageCoordination reference changes each render,
+    // use coordinationScopes and coordinationScopesBy which are
+    // indirect dependencies here.
+    [coordinationScopes, coordinationScopesBy]);
+  const [indicesData, indicesDataStatus] = useObsFeatureMatrixIndicesMultiLevel(
+    loaders, dataset, false, matchOnObj, 2,
+  );
+  return [indicesData, indicesDataStatus];
+}
+
+export function useSpotMultiObsFeatureMatrixIndices(
+  coordinationScopes, coordinationScopesBy, loaders, dataset,
+) {
+  const obsFeatureMatrixCoordination = useComplexCoordination(
+    [
+      CoordinationType.OBS_TYPE,
+      CoordinationType.FEATURE_TYPE,
+      CoordinationType.FEATURE_VALUE_TYPE,
+    ],
+    coordinationScopes,
+    coordinationScopesBy,
+    CoordinationType.SPOT_LAYER,
+  );
+  const matchOnObj = useMemo(() => obsFeatureMatrixCoordination[0],
+    // imageCoordination reference changes each render,
+    // use coordinationScopes and coordinationScopesBy which are
+    // indirect dependencies here.
+    [coordinationScopes, coordinationScopesBy]);
+  const [indicesData, indicesDataStatus] = useObsFeatureMatrixIndicesMultiLevel(
+    loaders, dataset, false, matchOnObj, 1,
+  );
+  return [indicesData, indicesDataStatus];
+}
+
+export function usePointMultiObsLabels(
+  coordinationScopes, coordinationScopesBy, loaders, dataset,
+) {
+  const obsLabelsCoordination = useComplexCoordination(
+    [
+      CoordinationType.OBS_TYPE,
+      CoordinationType.OBS_LABELS_TYPE,
+    ],
+    coordinationScopes,
+    coordinationScopesBy,
+    CoordinationType.POINT_LAYER,
+  );
+  const matchOnObj = useMemo(() => obsLabelsCoordination[0],
+    // imageCoordination reference changes each render,
+    // use coordinationScopes and coordinationScopesBy which are
+    // indirect dependencies here.
+    [coordinationScopes, coordinationScopesBy]);
+  const [indicesData, indicesDataStatus] = useObsLabelsMultiLevel(
+    loaders, dataset, false, matchOnObj, 1,
+  );
+  return [indicesData, indicesDataStatus];
+}
+
+export function useSegmentationMultiObsLocations(
+  coordinationScopes, coordinationScopesBy, loaders, dataset,
+) {
+  const obsTypeCoordination = useComplexCoordinationSecondary(
+    [
+      CoordinationType.OBS_TYPE,
+    ],
+    coordinationScopes,
+    coordinationScopesBy,
+    CoordinationType.SEGMENTATION_LAYER,
+    CoordinationType.SEGMENTATION_CHANNEL,
+  );
+  const matchOnObj = useMemo(() => obsTypeCoordination[0],
+    // imageCoordination reference changes each render,
+    // use coordinationScopes and coordinationScopesBy which are
+    // indirect dependencies here.
+    [coordinationScopes, coordinationScopesBy]);
+  const [indicesData, indicesDataStatus] = useObsLocationsMultiLevel(
+    loaders, dataset, false, matchOnObj, 2,
+  );
+  return [indicesData, indicesDataStatus];
+}
+
+export function useSegmentationMultiObsSets(
+  coordinationScopes, coordinationScopesBy, loaders, dataset,
+) {
+  const obsTypeCoordination = useComplexCoordinationSecondary(
+    [
+      CoordinationType.OBS_TYPE,
+    ],
+    coordinationScopes,
+    coordinationScopesBy,
+    CoordinationType.SEGMENTATION_LAYER,
+    CoordinationType.SEGMENTATION_CHANNEL,
+  );
+  const matchOnObj = useMemo(() => obsTypeCoordination[0],
+    // imageCoordination reference changes each render,
+    // use coordinationScopes and coordinationScopesBy which are
+    // indirect dependencies here.
+    [coordinationScopes, coordinationScopesBy]);
+  const [indicesData, indicesDataStatus] = useObsSetsMultiLevel(
+    loaders, dataset, false, matchOnObj, 2,
+  );
+  return [indicesData, indicesDataStatus];
+}

package/src/data-hooks.js

@@ -3,9 +3,10 @@ import { CoordinationType, DataType, STATUS } from '@vitessce/constants-internal
 import { fromEntries } from '@vitessce/utils';
 import { useQuery, useQueries } from '@tanstack/react-query';
 import {
-  getMatchingLoader,
   useMultiCoordinationValues,
+  useComplexCoordination,
   useSetWarning,
+  getMatchingLoader,
 } from './state/hooks.js';
 import {
   LoaderNotFoundError,
@@ -76,6 +77,28 @@ export function useObsEmbeddingData(
   );
 }
 
+export function useObsSpotsData(
+  loaders, dataset, isRequired,
+  coordinationSetters, initialCoordinationValues, matchOn,
+) {
+  return useDataType(
+    DataType.OBS_SPOTS,
+    loaders, dataset, isRequired,
+    coordinationSetters, initialCoordinationValues, matchOn,
+  );
+}
+
+export function useObsPointsData(
+  loaders, dataset, isRequired,
+  coordinationSetters, initialCoordinationValues, matchOn,
+) {
+  return useDataType(
+    DataType.OBS_POINTS,
+    loaders, dataset, isRequired,
+    coordinationSetters, initialCoordinationValues, matchOn,
+  );
+}
+
 export function useObsLocationsData(
   loaders, dataset, isRequired,
   coordinationSetters, initialCoordinationValues, matchOn,
@@ -214,7 +237,7 @@ export function useFeatureSelection(
             const payload = await loader.loadGeneSelection({ selection: [featureId] });
             if (!payload) return null;
             const { data } = payload;
-            return { data: data[0], dataKey: selection };
+            return { data: data[0], dataKey: featureId };
           }
           // Loader does not implement loadGeneSelection.
           const payload = await loader.load();
@@ -288,7 +311,9 @@ export function useObsFeatureMatrixIndices(
     placeholderData: placeholderObject,
     // Include the hook name in the queryKey to prevent the case in which an identical queryKey
     // in a different hook would cause an accidental cache hit.
-    queryKey: [dataset, DataType.OBS_FEATURE_MATRIX, matchOn, 'useObsFeatureMatrixIndices'],
+    // Note: this uses the same key structure/suffix as
+    // getMatrixIndicesQueryKeyScopeTuplesAux for shared caching.
+    queryKey: [dataset, DataType.OBS_FEATURE_MATRIX, matchOn, isRequired, 'useObsFeatureMatrixIndices'],
     // Query function should return an object
     // { data, dataKey } where dataKey is the loaded gene selection.
     // TODO: use TypeScript to type the return value?
@@ -350,6 +375,78 @@ export function useObsFeatureMatrixIndices(
   return [loadedData, dataStatus, urls];
 }
 
+export function useMultiObsPoints(
+  coordinationScopes, coordinationScopesBy, loaders, dataset,
+) {
+  const obsTypeCoordination = useComplexCoordination(
+    [
+      CoordinationType.OBS_TYPE,
+    ],
+    coordinationScopes,
+    coordinationScopesBy,
+    CoordinationType.POINT_LAYER,
+  );
+  const matchOnObj = useMemo(() => obsTypeCoordination[0],
+    // imageCoordination reference changes each render,
+    // use coordinationScopes and coordinationScopesBy which are
+    // indirect dependencies here.
+    [coordinationScopes, coordinationScopesBy]);
+  const [obsPointsData, obsPointsDataStatus, obsPointsUrls] = useDataTypeMulti(
+    DataType.OBS_POINTS, loaders, dataset,
+    false, {}, {},
+    matchOnObj,
+  );
+  return [obsPointsData, obsPointsDataStatus, obsPointsUrls];
+}
+
+export function useMultiObsSpots(
+  coordinationScopes, coordinationScopesBy, loaders, dataset,
+) {
+  const obsTypeCoordination = useComplexCoordination(
+    [
+      CoordinationType.OBS_TYPE,
+    ],
+    coordinationScopes,
+    coordinationScopesBy,
+    CoordinationType.SPOT_LAYER,
+  );
+  const matchOnObj = useMemo(() => obsTypeCoordination[0],
+    // imageCoordination reference changes each render,
+    // use coordinationScopes and coordinationScopesBy which are
+    // indirect dependencies here.
+    [coordinationScopes, coordinationScopesBy]);
+  const [obsSpotsData, obsSpotsDataStatus, obsSpotsUrls] = useDataTypeMulti(
+    DataType.OBS_SPOTS, loaders, dataset,
+    false, {}, {},
+    matchOnObj,
+  );
+  return [obsSpotsData, obsSpotsDataStatus, obsSpotsUrls];
+}
+
+export function useSpotMultiObsSets(
+  coordinationScopes, coordinationScopesBy, loaders, dataset,
+) {
+  const obsTypeCoordination = useComplexCoordination(
+    [
+      CoordinationType.OBS_TYPE,
+    ],
+    coordinationScopes,
+    coordinationScopesBy,
+    CoordinationType.SPOT_LAYER,
+  );
+  const matchOnObj = useMemo(() => obsTypeCoordination[0],
+    // imageCoordination reference changes each render,
+    // use coordinationScopes and coordinationScopesBy which are
+    // indirect dependencies here.
+    [coordinationScopes, coordinationScopesBy]);
+  const [obsSetsData, obsSetsDataStatus, obsSetsUrls] = useDataTypeMulti(
+    DataType.OBS_SETS, loaders, dataset,
+    false, {}, {},
+    matchOnObj,
+  );
+  return [obsSetsData, obsSetsDataStatus, obsSetsUrls];
+}
+
 export function useMultiObsLabels(
   coordinationScopes, obsType, loaders, dataset,
 ) {
@@ -363,11 +460,64 @@ export function useMultiObsLabels(
       { obsLabelsType, obsType },
     ])),
   ), [obsLabelsTypes, obsType]);
-  const [obsLabelsData, obsLabelsDataStatus] = useDataTypeMulti(
+  const [obsLabelsData, obsLabelsDataStatus, obsLabelsUrls] = useDataTypeMulti(
     DataType.OBS_LABELS, loaders, dataset,
     false, {}, {},
     obsLabelsMatchOnObj,
   );
-  const urls = null; // TODO?
-  return [obsLabelsTypes, obsLabelsData, obsLabelsDataStatus, urls];
+  return [obsLabelsTypes, obsLabelsData, obsLabelsDataStatus, obsLabelsUrls];
+}
+
+export function useMultiObsSegmentations(
+  coordinationScopes, coordinationScopesBy, loaders, dataset,
+) {
+  const imageCoordination = useComplexCoordination(
+    [
+      CoordinationType.FILE_UID,
+    ],
+    coordinationScopes,
+    coordinationScopesBy,
+    CoordinationType.SEGMENTATION_LAYER,
+  );
+  const matchOnObj = useMemo(() => imageCoordination[0],
+    // imageCoordination reference changes each render,
+    // use coordinationScopes and coordinationScopesBy which are
+    // indirect dependencies here.
+    [coordinationScopes, coordinationScopesBy]);
+  const [
+    obsSegmentationsData,
+    obsSegmentationsDataStatus,
+    obsSegmentationsUrls,
+  ] = useDataTypeMulti(
+    DataType.OBS_SEGMENTATIONS, loaders, dataset,
+    false, {}, {},
+    matchOnObj,
+  );
+  return [obsSegmentationsData, obsSegmentationsDataStatus, obsSegmentationsUrls];
+}
+
+export function useMultiImages(
+  coordinationScopes, coordinationScopesBy, loaders, dataset,
+) {
+  // TODO: delegate the generation of matchOnObj to a different hoook and pass as a parameter?
+  // (in all of the useMulti data hooks)?
+  const imageCoordination = useComplexCoordination(
+    [
+      CoordinationType.FILE_UID,
+    ],
+    coordinationScopes,
+    coordinationScopesBy,
+    CoordinationType.IMAGE_LAYER,
+  );
+  const matchOnObj = useMemo(() => imageCoordination[0],
+    // imageCoordination reference changes each render,
+    // use coordinationScopes and coordinationScopesBy which are
+    // indirect dependencies here.
+    [coordinationScopes, coordinationScopesBy]);
+  const [imageData, imageDataStatus, imageUrls] = useDataTypeMulti(
+    DataType.IMAGE, loaders, dataset,
+    false, {}, {},
+    matchOnObj,
+  );
+  return [imageData, imageDataStatus, imageUrls];
 }

package/src/hooks.js

@@ -151,7 +151,7 @@ export function useReady(statusValues) {
 export function useUrls(urls) {
   const mergedUrls = useMemo(
     () => urls.filter(a => Array.isArray(a)).flat().filter((url, index, array) => {
-      const firstIndex = array.findIndex(u => u.name === url.name);
+      const firstIndex = array.findIndex(u => u && url && u.name === url.name);
       return index === firstIndex;
     }),
     // eslint-disable-next-line react-hooks/exhaustive-deps

package/src/index.js

@@ -17,9 +17,16 @@ export {
   useGridItemSize,
 } from './hooks.js';
 export {
+  useCoordinationScopes,
+  useCoordinationScopesBy,
   useInitialCoordination,
   useCoordination,
   useComplexCoordination,
+  useComplexCoordinationSecondary,
+  useMultiCoordinationScopes,
+  useMultiCoordinationScopesNonNull,
+  useMultiCoordinationScopesSecondary,
+  useMultiCoordinationScopesSecondaryNonNull,
   useMultiCoordinationValues,
   useMultiDatasetCoordination,
   useDatasetUids,
@@ -35,6 +42,8 @@ export {
   useSetWarning,
   useAuxiliaryCoordination,
   useComponentLayout,
+  useRemoveImageChannelInMetaCoordinationScopes,
+  useAddImageChannelInMetaCoordinationScopes,
 } from './state/hooks.js';
 export {
   useDescription,
@@ -44,7 +53,14 @@ export {
   useFeatureSelection,
   useObsFeatureMatrixIndices,
   useMultiObsLabels,
+  useMultiObsSpots,
+  useMultiObsPoints,
+  useSpotMultiObsSets,
+  useMultiObsSegmentations,
+  useMultiImages,
 
+  useObsSpotsData,
+  useObsPointsData,
   useObsLocationsData,
   useObsSegmentationsData,
   useNeighborhoodsData,
@@ -54,6 +70,15 @@ export {
   useFeatureLabelsData,
   useGenomicProfilesData,
 } from './data-hooks.js';
+export {
+  usePointMultiObsLabels,
+  useSpotMultiFeatureSelection,
+  useSpotMultiObsFeatureMatrixIndices,
+  useSegmentationMultiFeatureSelection,
+  useSegmentationMultiObsFeatureMatrixIndices,
+  useSegmentationMultiObsLocations,
+  useSegmentationMultiObsSets,
+} from './data-hooks-multilevel.js';
 export {
   useHasLoader,
 } from './data-hook-utils.js';

package/src/shared-mui/components.js

@@ -8,6 +8,7 @@ import {
   ClickAwayListener,
   Fade,
 } from '@material-ui/core';
+import clsx from 'clsx';
 import { useVitessceContainer } from '../hooks.js';
 
 const useStyles = makeStyles(() => ({
@@ -30,6 +31,8 @@ export function PopperMenu(props) {
     children,
     buttonClassName,
     placement = 'bottom-end',
+    withPaper = true,
+    containerClassName,
     'aria-label': ariaLabel,
   } = props;
   const classes = useStyles();
@@ -49,7 +52,7 @@ export function PopperMenu(props) {
   const getTooltipContainer = useVitessceContainer(anchorRef);
 
   return (
-    <div ref={anchorRef} className={classes.container}>
+    <div ref={anchorRef} className={clsx(classes.container, containerClassName)}>
       <IconButton
         aria-describedby={id}
         onClick={handleClick}
@@ -72,9 +75,11 @@ export function PopperMenu(props) {
         {({ TransitionProps }) => (
           <ClickAwayListener onClickAway={handleClose}>
             <Fade {...TransitionProps} timeout={100}>
-              <Paper elevation={4} className={classes.paper}>
-                <MenuList>{children}</MenuList>
-              </Paper>
+              {withPaper ? (
+                <Paper elevation={4} className={classes.paper}>
+                  <MenuList>{children}</MenuList>
+                </Paper>
+              ) : children}
             </Fade>
           </ClickAwayListener>
         )}

package/src/shared-plot-options/CellColorEncodingOption.js

@@ -1,4 +1,5 @@
-import React, { useId } from 'react';
+import React from 'react';
+import { useId } from 'react-aria';
 import { TableCell, TableRow } from '@material-ui/core';
 import { capitalize } from '@vitessce/utils';
 import OptionSelect from './OptionSelect.js';