@vitessce/vit-s 4.0.3 → 4.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitessce/vit-s",
-  "version": "4.0.3",
+  "version": "4.0.5",
   "author": "HIDIVE Lab at HMS",
   "homepage": "http://vitessce.io",
   "repository": {
@@ -17,7 +17,7 @@
   ],
   "dependencies": {
     "@tanstack/react-query": "^5.80.2",
-    "@zarrita/storage": "0.1.4",
+    "@zarrita/storage": "0.2.0",
     "clsx": "^1.1.1",
     "d3-array": "^2.4.0",
     "fast-deep-equal": "^3.1.3",
@@ -30,18 +30,18 @@
     "react-aria": "^3.47.0",
     "react-error-boundary": "^5.0.0",
     "@placemarkio/flat-drop-files": "^1.0.2",
-    "zarrita": "0.6.1",
-    "@vitessce/styles": "4.0.3",
-    "@vitessce/abstract": "4.0.3",
-    "@vitessce/schemas": "4.0.3",
-    "@vitessce/plugins": "4.0.3",
-    "@vitessce/constants-internal": "4.0.3",
-    "@vitessce/utils": "4.0.3",
-    "@vitessce/sets-utils": "4.0.3",
-    "@vitessce/zarr-utils": "4.0.3",
-    "@vitessce/error": "4.0.3",
-    "@vitessce/config": "4.0.3",
-    "@vitessce/globals": "4.0.3"
+    "zarrita": "0.7.5",
+    "@vitessce/styles": "4.0.5",
+    "@vitessce/error": "4.0.5",
+    "@vitessce/plugins": "4.0.5",
+    "@vitessce/constants-internal": "4.0.5",
+    "@vitessce/schemas": "4.0.5",
+    "@vitessce/abstract": "4.0.5",
+    "@vitessce/sets-utils": "4.0.5",
+    "@vitessce/utils": "4.0.5",
+    "@vitessce/zarr-utils": "4.0.5",
+    "@vitessce/config": "4.0.5",
+    "@vitessce/globals": "4.0.5"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.3",
@@ -50,7 +50,7 @@
     "react-dom": "19.2.6",
     "vite": "^7.0.0",
     "vitest": "^3.1.4",
-    "@vitessce/types": "4.0.3"
+    "@vitessce/types": "4.0.5"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"

package/src/VitS.js

@@ -14,6 +14,7 @@ import {
 } from '@tanstack/react-query';
 import { isEqual } from 'lodash-es';
 import { buildConfigSchema, latestConfigSchema } from '@vitessce/schemas';
+import { MatrixTooLargeError } from '@vitessce/error';
 import {
   log,
   setLogLevel, setDebugMode,
@@ -248,7 +249,12 @@ export function VitS(props) {
     defaultOptions: {
       queries: {
         refetchOnWindowFocus: false,
-        retry: 2,
+        // A matrix that does not fit the browser's budget will not fit on a
+        // retry either; surface that message immediately rather than after
+        // two more attempts and their backoff.
+        retry: (failureCount, error) => (
+          failureCount < 2 && !(error instanceof MatrixTooLargeError)
+        ),
       },
     },
     // Reference: https://tkdodo.eu/blog/react-query-error-handling#the-global-callbacks

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

@@ -589,3 +589,22 @@ export function useObsLabelsMultiLevel(
     depth, DataType.OBS_LABELS,
   );
 }
+
+/**
+ * Wrapper around useDataTypeMultiLevel.
+ * @param {object} loaders
+ * @param {string} dataset
+ * @param {boolean} isRequired
+ * @param {object} matchOnObj
+ * @param {number} depth
+ * @returns {array} [data, status, errors]
+ */
+export function useObsColorsMultiLevel(
+  loaders, dataset, isRequired, matchOnObj,
+  depth,
+) {
+  return useDataTypeMultiLevel(
+    loaders, dataset, isRequired, matchOnObj,
+    depth, DataType.OBS_COLORS,
+  );
+}

package/src/data-hooks-multilevel.js

@@ -10,6 +10,7 @@ import {
   useObsLocationsMultiLevel,
   useObsSetsMultiLevel,
   useObsLabelsMultiLevel,
+  useObsColorsMultiLevel,
 } from './data-hooks-multilevel-utils.js';
 
 
@@ -319,3 +320,34 @@ export function useSegmentationMultiObsSets(
   );
   return [indicesData, indicesDataStatus, indicesDataErrors];
 }
+
+/**
+ * Wrapper around useObsColorsMultiLevel.
+ * @param {object} coordinationScopes
+ * @param {object} coordinationScopesBy
+ * @param {object} loaders
+ * @param {string} dataset
+ * @returns {array} [data, status, errors]
+ */
+export function useSegmentationMultiObsColors(
+  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 [colorsData, colorsDataStatus, colorsDataErrors] = useObsColorsMultiLevel(
+    loaders, dataset, false, matchOnObj, 2,
+  );
+  return [colorsData, colorsDataStatus, colorsDataErrors];
+}

package/src/hooks.js

@@ -5,6 +5,7 @@ import { debounce, every } from 'lodash-es';
 import { extent } from 'd3-array';
 import { useQuery } from '@tanstack/react-query';
 import { capitalize } from '@vitessce/utils';
+import { getObsIndexMap } from '@vitessce/sets-utils';
 import { STATUS, AsyncFunctionType } from '@vitessce/constants-internal';
 import { VITESSCE_CONTAINER } from './classNames.js';
 import { useGridResize, useEmitGridResize } from './state/hooks.js';
@@ -258,6 +259,10 @@ export function useUint8FeatureSelection(expressionData) {
   }, [expressionData]);
 }
 
+// Marks an instance index that equals the matrix row index, so that no
+// per-observation mapping needs to be built.
+const IDENTITY_MAPPING = 'identity';
+
 export function useExpressionValueGetter(
   { instanceObsIndex, matrixObsIndex, expressionData },
 ) {
@@ -267,18 +272,32 @@ export function useExpressionValueGetter(
   // we need a way to look up an obsFeatureMatrix obsIndex index
   // given an obsEmbedding obsIndex index.
   const toMatrixIndexMap = useMemo(() => {
-    if (instanceObsIndex && matrixObsIndex) {
-      const matrixIndexMap = new Map(matrixObsIndex.map((key, i) => ([key, i])));
-      return instanceObsIndex.map(key => matrixIndexMap.get(key));
+    if (!instanceObsIndex || !matrixObsIndex) {
+      return null;
     }
-    return null;
+    if (instanceObsIndex === matrixObsIndex) {
+      // The same array (the usual case when both come from one data source)
+      // is already aligned by position.
+      return IDENTITY_MAPPING;
+    }
+    // The map is shared with other consumers of this index via getObsIndexMap.
+    const matrixIndexMap = getObsIndexMap(matrixObsIndex);
+    const mapping = new Int32Array(instanceObsIndex.length);
+    for (let i = 0; i < instanceObsIndex.length; i += 1) {
+      const rowIndex = matrixIndexMap.get(instanceObsIndex[i]);
+      mapping[i] = rowIndex === undefined ? -1 : rowIndex;
+    }
+    return mapping;
   }, [instanceObsIndex, matrixObsIndex]);
 
   // Set up a getter function for gene expression values, to be used
   // by the DeckGL layer to obtain values for instanced attributes.
   const getExpressionValue = useCallback((entry, { index: instanceIndex }) => {
     if (toMatrixIndexMap && expressionData && expressionData[0]) {
-      const rowIndex = toMatrixIndexMap[instanceIndex];
+      const rowIndex = toMatrixIndexMap === IDENTITY_MAPPING
+        ? instanceIndex
+        : toMatrixIndexMap[instanceIndex];
+      // An observation absent from the matrix (-1) reads as undefined, as before.
       const val = expressionData[0][rowIndex];
       return val;
     }

package/src/hooks.test.jsx

@@ -0,0 +1,39 @@
+import { describe, it, expect } from 'vitest';
+import { renderHook } from '@testing-library/react';
+import { useExpressionValueGetter } from './hooks.js';
+
+describe('useExpressionValueGetter', () => {
+  const expressionData = [new Uint8Array([10, 20, 30])];
+
+  it('reads by position when the instance and matrix indices are the same array', () => {
+    const obsIndex = ['a', 'b', 'c'];
+    const { result } = renderHook(() => useExpressionValueGetter({
+      instanceObsIndex: obsIndex, matrixObsIndex: obsIndex, expressionData,
+    }));
+    expect(result.current(null, { index: 0 })).toEqual(10);
+    expect(result.current(null, { index: 2 })).toEqual(30);
+  });
+
+  it('maps through observation IDs when the indices differ', () => {
+    const { result } = renderHook(() => useExpressionValueGetter({
+      instanceObsIndex: ['c', 'unknown', 'a'],
+      matrixObsIndex: ['a', 'b', 'c'],
+      expressionData,
+    }));
+    expect(result.current(null, { index: 0 })).toEqual(30);
+    // An observation absent from the matrix reads as undefined, as before.
+    expect(result.current(null, { index: 1 })).toEqual(undefined);
+    expect(result.current(null, { index: 2 })).toEqual(10);
+  });
+
+  it('returns 0 without indices or without data', () => {
+    const { result: noIndices } = renderHook(() => useExpressionValueGetter({
+      instanceObsIndex: null, matrixObsIndex: ['a'], expressionData,
+    }));
+    expect(noIndices.current(null, { index: 0 })).toEqual(0);
+    const { result: noData } = renderHook(() => useExpressionValueGetter({
+      instanceObsIndex: ['a'], matrixObsIndex: ['a'], expressionData: null,
+    }));
+    expect(noData.current(null, { index: 0 })).toEqual(0);
+  });
+});

package/src/index.js

@@ -93,6 +93,7 @@ export {
   useSegmentationMultiObsFeatureMatrixIndices,
   useSegmentationMultiObsLocations,
   useSegmentationMultiObsSets,
+  useSegmentationMultiObsColors,
 } from './data-hooks-multilevel.js';
 export {
   useHasLoader,
@@ -107,3 +108,15 @@ export { logConfig } from './view-config-utils.js';
 export { useAsyncFunction, usePageModeView } from './contexts.js';
 export { createLoaders } from './vitessce-grid-utils.js';
 export { createOnDrop } from './on-drop.js';
+export {
+  useMemoCustomComparison,
+  shallowDiff,
+  shallowDiffByLayer,
+  shallowDiffByLayerWithKeys,
+  shallowDiffByChannel,
+  shallowDiffByChannelWithKeys,
+  shallowDiffByLayerCoordination,
+  shallowDiffByLayerCoordinationWithKeys,
+  shallowDiffByChannelCoordination,
+  shallowDiffByChannelCoordinationWithKeys,
+} from './use-memo-custom-comparison.js';

package/src/use-memo-custom-comparison.js

@@ -0,0 +1,61 @@
+/* eslint-disable no-unused-vars */
+/* eslint-disable max-len */
+import { useRef } from 'react';
+
+/**
+ * A variant of useMemo that accepts a custom equality function
+ * to determine whether the dependencies have changed.
+ * @template T
+ * @param {() => T} factory - Function that computes the memoized value.
+ * @param {any} dependencies - The useMemo dependencies.
+ * @param {(prevDeps: any, nextDeps: any) => boolean} customIsEqual - Custom equality function,
+ * which receives the previous and next dependencies and returns true if they are considered equal.
+ * @returns {T} The memoized value.
+ */
+export function useMemoCustomComparison(factory, dependencies, customIsEqual) {
+  const ref = useRef(/** @type {{ deps: any; value: T } | undefined} */ (undefined));
+
+  if (ref.current === undefined || !customIsEqual(ref.current.deps, dependencies)) {
+    ref.current = { deps: dependencies, value: factory() };
+  }
+
+  return ref.current.value;
+}
+
+
+// Comparison utilties inspired by componentDidUpdate in spatial-beta/Spatial.js:
+export const shallowDiff = (prevDeps, nextDeps, depName) => prevDeps[depName] !== nextDeps[depName];
+export const shallowDiffByLayer = (prevDeps, nextDeps, depName, scopeName) => (
+  prevDeps?.[depName]?.[scopeName] !== nextDeps?.[depName]?.[scopeName]
+);
+// Rather than checking equality of the entire object,
+// here, we only shallowly compare the specific properties that are relevant.
+export const shallowDiffByLayerWithKeys = (prevDeps, nextDeps, depName, scopeName, keys) => keys.some(
+  k => (prevDeps?.[depName]?.[scopeName]?.[k] !== nextDeps?.[depName]?.[scopeName]?.[k]),
+);
+export const shallowDiffByChannel = (prevDeps, nextDeps, depName, firstName, secondName) => (
+  prevDeps?.[depName]?.[firstName]?.[secondName]
+    !== nextDeps?.[depName]?.[firstName]?.[secondName]
+);
+export const shallowDiffByChannelWithKeys = (prevDeps, nextDeps, depName, firstName, secondName, keys) => keys.some(
+  k => (
+    prevDeps?.[depName]?.[firstName]?.[secondName]?.[k]
+        !== nextDeps?.[depName]?.[firstName]?.[secondName]?.[k]
+  ),
+);
+export const shallowDiffByLayerCoordination = (prevDeps, nextDeps, depName, layerScope) => (
+  prevDeps?.[depName]?.[0]?.[layerScope]
+    !== nextDeps?.[depName]?.[0]?.[layerScope]
+);
+export const shallowDiffByLayerCoordinationWithKeys = (prevDeps, nextDeps, depName, layerScope, keys) => keys.some(
+  k => prevDeps?.[depName]?.[0]?.[layerScope]?.[k]
+        !== nextDeps?.[depName]?.[0]?.[layerScope]?.[k],
+);
+export const shallowDiffByChannelCoordination = (prevDeps, nextDeps, depName, layerScope, channelScope) => (
+  prevDeps?.[depName]?.[0]?.[layerScope]?.[channelScope]
+    !== nextDeps?.[depName]?.[0]?.[layerScope]?.[channelScope]
+);
+export const shallowDiffByChannelCoordinationWithKeys = (prevDeps, nextDeps, depName, layerScope, channelScope, keys) => keys.some(
+  k => prevDeps?.[depName]?.[0]?.[layerScope]?.[channelScope]?.[k]
+        !== nextDeps?.[depName]?.[0]?.[layerScope]?.[channelScope]?.[k],
+);