@vitessce/neuroglancer 3.9.5 → 3.9.7

package/dist/index.js

@@ -1,4 +1,4 @@
-import { N } from "./index-Wdrc02VW.js";
+import { N } from "./index-BEPd2Tds.js";
 export {
   N as NeuroglancerSubscriber
 };

package/dist-tsc/Neuroglancer.d.ts

@@ -3,8 +3,6 @@ export class NeuroglancerComp {
     bundleRoot: any;
     cellColorMapping: any;
     justReceivedExternalUpdate: boolean;
-    prevElement: any;
-    prevClickHandler: ((event: any) => void) | null;
     prevMouseStateChanged: any;
     prevHoverHandler: (() => void) | null;
     onViewerStateChanged(nextState: any): void;

package/dist-tsc/Neuroglancer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Neuroglancer.d.ts","sourceRoot":"","sources":["../src/Neuroglancer.js"],"names":[],"mappings":"AAUA;IACE,wBAcC;IAZC,gBAAgC;IAChC,sBAA8C;IAC9C,oCAAuC;IACvC,iBAAuB;IACvB,gDAA4B;IAC5B,2BAAiC;IACjC,sCAA4B;IAsD9B,2CAGC;IAjDD,4BA4CC;IAhDC,0BAAgD;IAChD,iCAA8D;IAsDhE,yCAQC;IAED,sBAoBC;CACF"}
+{"version":3,"file":"Neuroglancer.d.ts","sourceRoot":"","sources":["../src/Neuroglancer.js"],"names":[],"mappings":"AAYA;IACE,wBAYC;IAVC,gBAAgC;IAChC,sBAA8C;IAC9C,oCAAuC;IACvC,2BAAiC;IACjC,sCAA4B;IA8D9B,2CAGC;IAzDD,4BAoDC;IAxDC,0BAAgD;IAChD,iCAA8D;IA8DhE,yCAKC;IAED,sBAoBC;CACF"}

package/dist-tsc/Neuroglancer.js

@@ -1,11 +1,13 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 /* eslint-disable react-refresh/only-export-components */
 import React, { PureComponent, Suspense } from 'react';
-import { ChunkWorker } from '@vitessce/neuroglancer-workers';
+import { ChunkWorker, AsyncComputationWorker } from '@vitessce/neuroglancer-workers';
 import { NeuroglancerGlobalStyles } from './styles.js';
 const LazyReactNeuroglancer = React.lazy(() => import('./ReactNeuroglancer.js'));
 function createWorker() {
-    return new ChunkWorker();
+    const worker = new ChunkWorker();
+    worker.AsyncComputationWorker = AsyncComputationWorker;
+    return worker;
 }
 export class NeuroglancerComp extends PureComponent {
     constructor(props) {
@@ -13,8 +15,6 @@ export class NeuroglancerComp extends PureComponent {
         this.bundleRoot = createWorker();
         this.cellColorMapping = props.cellColorMapping;
         this.justReceivedExternalUpdate = false;
-        this.prevElement = null;
-        this.prevClickHandler = null;
         this.prevMouseStateChanged = null;
         this.prevHoverHandler = null;
         this.onViewerStateChanged = this.onViewerStateChanged.bind(this);
@@ -29,42 +29,45 @@ export class NeuroglancerComp extends PureComponent {
         if (viewerRef) {
             // Mount
             const { viewer } = viewerRef;
-            this.prevElement = viewer.element;
             this.prevMouseStateChanged = viewer.mouseState.changed;
-            viewer.inputEventBindings.sliceView.set('at:dblclick0', () => { });
+            // For now, can omit the sliceView bindings, as we only use perspectiveView
+            // viewer.inputEventBindings.sliceView.set('at:dblclick0', () => {});
             viewer.inputEventBindings.perspectiveView.set('at:dblclick0', () => { });
-            this.prevClickHandler = (event) => {
-                if (event.button === 0) {
-                    // Wait for mouseState to update
-                    requestAnimationFrame(() => {
-                        const { pickedValue, pickedRenderLayer } = viewer.mouseState;
-                        // Only trigger selection when a segment is clicked rather than any click on the view
-                        if (pickedValue && pickedValue.low !== undefined && pickedRenderLayer) {
-                            this.latestOnSegmentClick?.(pickedValue.low);
+            // Disable space interaction to prevent triggering 4panels layout.
+            viewer.inputEventBindings.sliceView.set('at:space', () => { });
+            viewer.inputEventBindings.perspectiveView.set('at:space', () => { });
+            // Remap plain wheel to  ctrl+wheel (zoom) action
+            // by traversing the parent binding maps.
+            const remapWheelToZoom = (map) => {
+                if (map.bindings) {
+                    const ctrlWheelAction = map.bindings.get('at:control+wheel');
+                    if (ctrlWheelAction) {
+                        // Replace plain wheel with the zoom action
+                        map.bindings.set('at:wheel', ctrlWheelAction);
+                        const ctrlWheelBubble = map.bindings.get('bubble:control+wheel');
+                        if (ctrlWheelBubble) {
+                            map.bindings.set('bubble:wheel', ctrlWheelBubble);
                         }
-                    });
+                    }
+                }
+                if (map.parents) {
+                    map.parents.forEach(p => remapWheelToZoom(p));
                 }
             };
+            remapWheelToZoom(viewer.inputEventBindings.perspectiveView);
             this.prevHoverHandler = () => {
                 if (viewer.mouseState.pickedValue !== undefined) {
                     const pickedSegment = viewer.mouseState.pickedValue;
                     this.latestOnSelectHoveredCoords?.(pickedSegment?.low);
                 }
             };
-            viewer.element.addEventListener('mouseup', this.prevClickHandler);
             viewer.mouseState.changed.add(this.prevHoverHandler);
         }
         else {
-            // Unmount (viewerRef is null)
-            if (this.prevElement && this.prevClickHandler) {
-                this.prevElement.removeEventListener('mouseup', this.prevClickHandler);
-                this.prevClickHandler = null;
-            }
             if (this.prevMouseStateChanged && this.prevHoverHandler) {
                 this.prevMouseStateChanged.remove(this.prevHoverHandler);
                 this.prevHoverHandler = null;
             }
-            this.prevElement = null;
             this.prevMouseStateChanged = null;
         }
     }
@@ -73,10 +76,7 @@ export class NeuroglancerComp extends PureComponent {
         setViewerState(nextState);
     }
     componentDidUpdate(prevProps) {
-        const { onSegmentClick, onSelectHoveredCoords } = this.props;
-        if (prevProps.onSegmentClick !== onSegmentClick) {
-            this.latestOnSegmentClick = onSegmentClick;
-        }
+        const { onSelectHoveredCoords } = this.props;
         if (prevProps.onSelectHoveredCoords !== onSelectHoveredCoords) {
             this.latestOnSelectHoveredCoords = onSelectHoveredCoords;
         }

package/dist-tsc/NeuroglancerSubscriber.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NeuroglancerSubscriber.d.ts","sourceRoot":"","sources":["../src/NeuroglancerSubscriber.js"],"names":[],"mappings":"AAkDA,gEAgeC"}
+{"version":3,"file":"NeuroglancerSubscriber.d.ts","sourceRoot":"","sources":["../src/NeuroglancerSubscriber.js"],"names":[],"mappings":"AAwEA,gEAkuBC"}

package/dist-tsc/NeuroglancerSubscriber.js

@@ -1,11 +1,14 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable max-len */
 /* eslint-disable no-unused-vars */
-import React, { useCallback, useMemo, useRef, useEffect, useState } from 'react';
-import { TitleInfo, useCoordination, useObsSetsData, useLoaders, useObsEmbeddingData, useCoordinationScopes, } from '@vitessce/vit-s';
-import { ViewHelpMapping, ViewType, COMPONENT_COORDINATION_TYPES, } from '@vitessce/constants-internal';
+import React, { useCallback, useMemo, useRef, useEffect, useState, useReducer } from 'react';
+import { TitleInfo, useReady, useInitialCoordination, useCoordination, useCoordinationScopes, useCoordinationScopesBy, useComplexCoordination, useMultiCoordinationScopesNonNull, useMultiCoordinationScopesSecondaryNonNull, useComplexCoordinationSecondary, useLoaders, useMergeCoordination, useMultiObsPoints, usePointMultiObsFeatureMatrixIndices, useMultiObsSegmentations, useSegmentationMultiFeatureSelection, useSegmentationMultiObsFeatureMatrixIndices, useSegmentationMultiObsSets, useGridItemSize, } from '@vitessce/vit-s';
+import { ViewHelpMapping, ViewType, CoordinationType, COMPONENT_COORDINATION_TYPES, } from '@vitessce/constants-internal';
 import { mergeObsSets, getCellColors, setObsSelection } from '@vitessce/sets-utils';
+import { MultiLegend } from '@vitessce/legend';
 import { NeuroglancerComp } from './Neuroglancer.js';
 import { useNeuroglancerViewerState } from './data-hook-ng-utils.js';
+import { useMemoCustomComparison, customIsEqualForCellColors, } from './use-memo-custom-comparison.js';
 import { useStyles } from './styles.js';
 import { quaternionToEuler, eulerToQuaternion, valueGreaterThanEpsilon, nearEq, makeVitNgZoomCalibrator, conjQuat, multiplyQuat, rad2deg, deg2rad, Q_Y_UP, } from './utils.js';
 const VITESSCE_INTERACTION_DELAY = 50;
@@ -14,6 +17,7 @@ const ZOOM_EPS = 1e-2;
 const ROTATION_EPS = 1e-3;
 const TARGET_EPS = 0.5;
 const NG_ROT_COOLDOWN_MS = 120;
+const GUIDE_URL = 'https://vitessce.io/docs/ng-guide/';
 const LAST_INTERACTION_SOURCE = {
     vitessce: 'vitessce',
     neuroglancer: 'neuroglancer',
@@ -24,21 +28,187 @@ function rgbToHex(rgb) {
         : `#${rgb.map(c => c.toString(16).padStart(2, '0')).join('')}`);
 }
 export function NeuroglancerSubscriber(props) {
-    const { coordinationScopes: coordinationScopesRaw, closeButtonVisible, downloadButtonVisible, removeGridComponent, theme, title = 'Neuroglancer', helpText = ViewHelpMapping.NEUROGLANCER, } = props;
+    const { uuid, coordinationScopes: coordinationScopesRaw, coordinationScopesBy: coordinationScopesByRaw, closeButtonVisible, downloadButtonVisible, removeGridComponent, theme, title = 'Spatial', subtitle = 'Powered by Neuroglancer', helpText = ViewHelpMapping.NEUROGLANCER, 
+    // Note: this is a temporary mechanism
+    // to pass an initial NG camera state.
+    // Ideally, all camera state should be passed via
+    // the existing spatialZoom, spatialTargetX, spatialRotationOrbit, etc,
+    // and then NeuroglancerSubscriber should internally convert
+    // to NG-compatible values, which would eliminate the need for this.
+    initialNgCameraState, } = props;
     const loaders = useLoaders();
+    const mergeCoordination = useMergeCoordination();
+    // Acccount for possible meta-coordination.
     const coordinationScopes = useCoordinationScopes(coordinationScopesRaw);
+    const coordinationScopesBy = useCoordinationScopesBy(coordinationScopes, coordinationScopesByRaw);
     const [{ dataset, obsType, spatialZoom, spatialTargetX, spatialTargetY, spatialRotationX, spatialRotationY, spatialRotationZ, spatialRotationOrbit, 
     // spatialOrbitAxis, // always along Y-axis - not used in conversion
     embeddingType: mapping, obsSetColor: cellSetColor, obsSetSelection: cellSetSelection, additionalObsSets: additionalCellSets, }, { setAdditionalObsSets: setAdditionalCellSets, setObsSetColor: setCellSetColor, setObsColorEncoding: setCellColorEncoding, setObsSetSelection: setCellSetSelection, setObsHighlight: setCellHighlight, setSpatialTargetX: setTargetX, setSpatialTargetY: setTargetY, setSpatialRotationX: setRotationX, 
     // setSpatialRotationY: setRotationY,
     // setSpatialRotationZ: setRotationZ,
     setSpatialRotationOrbit: setRotationOrbit, setSpatialZoom: setZoom, }] = useCoordination(COMPONENT_COORDINATION_TYPES[ViewType.NEUROGLANCER], coordinationScopes);
+    const [ngWidth, ngHeight, containerRef] = useGridItemSize();
+    const [segmentationLayerScopes, segmentationChannelScopesByLayer,] = useMultiCoordinationScopesSecondaryNonNull(CoordinationType.SEGMENTATION_CHANNEL, CoordinationType.SEGMENTATION_LAYER, coordinationScopes, coordinationScopesBy);
+    const pointLayerScopes = useMultiCoordinationScopesNonNull(CoordinationType.POINT_LAYER, coordinationScopes);
+    // Object keys are coordination scope names for spatialSegmentationLayer.
+    const segmentationLayerCoordination = useComplexCoordination([
+        CoordinationType.FILE_UID,
+        CoordinationType.SEGMENTATION_CHANNEL,
+        CoordinationType.SPATIAL_LAYER_VISIBLE,
+        CoordinationType.SPATIAL_LAYER_OPACITY,
+    ], coordinationScopes, coordinationScopesBy, CoordinationType.SEGMENTATION_LAYER);
+    // Object keys are coordination scope names for spatialSegmentationChannel.
+    const segmentationChannelCoordination = useComplexCoordinationSecondary([
+        CoordinationType.OBS_TYPE,
+        CoordinationType.SPATIAL_TARGET_C,
+        CoordinationType.SPATIAL_CHANNEL_VISIBLE,
+        CoordinationType.SPATIAL_CHANNEL_OPACITY,
+        CoordinationType.SPATIAL_CHANNEL_COLOR,
+        CoordinationType.SPATIAL_SEGMENTATION_FILLED,
+        CoordinationType.SPATIAL_SEGMENTATION_STROKE_WIDTH,
+        CoordinationType.OBS_COLOR_ENCODING,
+        CoordinationType.FEATURE_SELECTION,
+        CoordinationType.FEATURE_AGGREGATION_STRATEGY,
+        CoordinationType.FEATURE_VALUE_COLORMAP,
+        CoordinationType.FEATURE_VALUE_COLORMAP_RANGE,
+        CoordinationType.OBS_SET_COLOR,
+        CoordinationType.OBS_SET_SELECTION,
+        CoordinationType.ADDITIONAL_OBS_SETS,
+        CoordinationType.OBS_HIGHLIGHT,
+        CoordinationType.TOOLTIPS_VISIBLE,
+        CoordinationType.TOOLTIP_CROSSHAIRS_VISIBLE,
+        CoordinationType.LEGEND_VISIBLE,
+    ], coordinationScopes, coordinationScopesBy, CoordinationType.SEGMENTATION_LAYER, CoordinationType.SEGMENTATION_CHANNEL);
+    // Point layer
+    const pointLayerCoordination = useComplexCoordination([
+        CoordinationType.OBS_TYPE,
+        CoordinationType.SPATIAL_LAYER_VISIBLE,
+        CoordinationType.SPATIAL_LAYER_OPACITY,
+        CoordinationType.OBS_COLOR_ENCODING,
+        CoordinationType.FEATURE_COLOR,
+        CoordinationType.FEATURE_FILTER_MODE,
+        CoordinationType.FEATURE_SELECTION,
+        CoordinationType.FEATURE_VALUE_COLORMAP,
+        CoordinationType.FEATURE_VALUE_COLORMAP_RANGE,
+        CoordinationType.SPATIAL_LAYER_COLOR,
+        CoordinationType.OBS_HIGHLIGHT,
+        CoordinationType.TOOLTIPS_VISIBLE,
+        CoordinationType.TOOLTIP_CROSSHAIRS_VISIBLE,
+        CoordinationType.LEGEND_VISIBLE,
+    ], coordinationScopes, coordinationScopesBy, CoordinationType.POINT_LAYER);
+    // Points data
+    const [obsPointsData, obsPointsDataStatus, obsPointsUrls, obsPointsErrors] = useMultiObsPoints(coordinationScopes, coordinationScopesBy, loaders, dataset, mergeCoordination, uuid);
+    const [pointMultiIndicesData, pointMultiIndicesDataStatus, pointMultiIndicesDataErrors] = usePointMultiObsFeatureMatrixIndices(coordinationScopes, coordinationScopesBy, loaders, dataset);
+    // Segmentations data
+    const [obsSegmentationsData, obsSegmentationsDataStatus, obsSegmentationsUrls, obsSegmentationsDataErrors] = useMultiObsSegmentations(coordinationScopes, coordinationScopesBy, loaders, dataset, mergeCoordination, uuid);
+    const [obsSegmentationsSetsData, obsSegmentationsSetsDataStatus, obsSegmentationsSetsDataErrors] = useSegmentationMultiObsSets(coordinationScopes, coordinationScopesBy, loaders, dataset);
+    const [segmentationMultiExpressionData, segmentationMultiLoadedFeatureSelection, segmentationMultiExpressionExtents, segmentationMultiExpressionNormData, segmentationMultiFeatureSelectionStatus, segmentationMultiFeatureSelectionErrors,] = useSegmentationMultiFeatureSelection(coordinationScopes, coordinationScopesBy, loaders, dataset);
+    const [segmentationMultiIndicesData, segmentationMultiIndicesDataStatus, segmentationMultiIndicesDataErrors] = useSegmentationMultiObsFeatureMatrixIndices(coordinationScopes, coordinationScopesBy, loaders, dataset);
+    const errors = [
+        ...obsPointsErrors,
+        ...obsSegmentationsDataErrors,
+        ...obsSegmentationsSetsDataErrors,
+        ...pointMultiIndicesDataErrors,
+        ...segmentationMultiFeatureSelectionErrors,
+        ...segmentationMultiIndicesDataErrors,
+    ];
+    const isReady = useReady([
+        // Points
+        obsPointsDataStatus,
+        pointMultiIndicesDataStatus,
+        // Segmentations
+        obsSegmentationsDataStatus,
+        obsSegmentationsSetsDataStatus,
+        segmentationMultiFeatureSelectionStatus,
+        segmentationMultiIndicesDataStatus,
+    ]);
     // console.log("NG Subs Render orbit", spatialRotationX, spatialRotationY, spatialRotationOrbit);
     const { classes } = useStyles();
-    const [{ obsSets: cellSets }] = useObsSetsData(loaders, dataset, false, { setObsSetSelection: setCellSetSelection, setObsSetColor: setCellSetColor }, { cellSetSelection, obsSetColor: cellSetColor }, { obsType });
-    const [{ obsIndex }] = useObsEmbeddingData(loaders, dataset, true, {}, {}, { obsType, embeddingType: mapping });
-    const [initalViewerState] = useNeuroglancerViewerState(loaders, dataset, false, undefined, undefined, { obsType: 'cell' });
-    const latestViewerStateRef = useRef(initalViewerState);
+    const segmentationColorMapping = useMemoCustomComparison(() => {
+        // TODO: ultimately, segmentationColorMapping becomes cellColorMapping, and makes its way into the viewerState.
+        // It may make sense to merge the multiple useMemoCustomComparisons upstream of derivedViewerState into one.
+        // This would complicate the comparison function, but the multiple separate useMemos are not really necessary.
+        const result = {};
+        segmentationLayerScopes?.forEach((layerScope) => {
+            result[layerScope] = {};
+            segmentationChannelScopesByLayer?.[layerScope]?.forEach((channelScope) => {
+                const { obsSets: layerSets, obsIndex: layerIndex } = obsSegmentationsSetsData?.[layerScope]?.[channelScope] || {};
+                const { obsSetColor, obsColorEncoding, obsSetSelection, additionalObsSets, spatialChannelColor, } = segmentationChannelCoordination[0][layerScope][channelScope];
+                if (obsColorEncoding === 'spatialChannelColor') {
+                    // All segments get the same static channel color
+                    if (layerIndex && spatialChannelColor) {
+                        const hex = rgbToHex(spatialChannelColor);
+                        const ngCellColors = {};
+                        if (obsSetSelection?.length > 0) {
+                            // Only color the segments belonging to selected sets.
+                            const mergedCellSets = mergeObsSets(layerSets, additionalObsSets);
+                            const selectedIds = new Set();
+                            obsSetSelection.forEach((setPath) => {
+                                const rootNode = mergedCellSets?.tree?.find(n => n.name === setPath[0]);
+                                const leafNode = setPath.length > 1
+                                    ? rootNode?.children?.find(n => n.name === setPath[1])
+                                    : rootNode;
+                                leafNode?.set?.forEach(([id]) => selectedIds.add(String(id)));
+                            });
+                            layerIndex.forEach((id) => {
+                                if (selectedIds.has(String(id))) {
+                                    ngCellColors[id] = hex;
+                                }
+                            });
+                        }
+                        result[layerScope][channelScope] = ngCellColors;
+                    }
+                }
+                else if (layerSets && layerIndex) {
+                    const mergedCellSets = mergeObsSets(layerSets, additionalObsSets);
+                    const cellColors = getCellColors({
+                        cellSets: mergedCellSets,
+                        cellSetSelection: obsSetSelection,
+                        cellSetColor: obsSetColor,
+                        obsIndex: layerIndex,
+                        theme,
+                    });
+                    // Convert the list of colors to an object of hex strings, which NG requires.
+                    const ngCellColors = {};
+                    cellColors.forEach((color, i) => {
+                        ngCellColors[i] = rgbToHex(color);
+                    });
+                    result[layerScope][channelScope] = ngCellColors;
+                }
+            });
+        });
+        return result;
+    }, {
+        // The dependencies for the comparison,
+        // used by the custom equality function.
+        segmentationLayerScopes,
+        segmentationChannelScopesByLayer,
+        obsSegmentationsSetsData,
+        segmentationChannelCoordination,
+        theme,
+    }, customIsEqualForCellColors);
+    // Obtain the Neuroglancer viewerState object.
+    const initalViewerState = useNeuroglancerViewerState(theme, segmentationLayerScopes, segmentationChannelScopesByLayer, segmentationLayerCoordination, segmentationChannelCoordination, obsSegmentationsUrls, obsSegmentationsData, pointLayerScopes, pointLayerCoordination, obsPointsUrls, obsPointsData, pointMultiIndicesData);
+    const [latestViewerStateIteration, incrementLatestViewerStateIteration] = useReducer(x => x + 1, 0);
+    const latestViewerStateRef = useRef({
+        ...initalViewerState,
+        ...(initialNgCameraState ?? {}),
+    });
+    useEffect(() => {
+        const prevNgCameraState = {
+            position: latestViewerStateRef.current.position,
+            projectionOrientation: latestViewerStateRef.current.projectionOrientation,
+            projectionScale: latestViewerStateRef.current.projectionScale,
+        };
+        latestViewerStateRef.current = {
+            ...initalViewerState,
+            ...prevNgCameraState,
+        };
+        // Force a re-render by incrementing a piece of state.
+        // This works because we have made latestViewerStateIteration
+        // a dependency for derivedViewerState, triggering the useMemo downstream.
+        incrementLatestViewerStateIteration();
+    }, [initalViewerState]);
     const initialRotationPushedRef = useRef(false);
     const ngRotPushAtRef = useRef(0);
     const lastInteractionSource = useRef(null);
@@ -67,15 +237,6 @@ export function NeuroglancerSubscriber(props) {
         tx: spatialTargetX,
         ty: spatialTargetY,
     });
-    const mergedCellSets = useMemo(() => mergeObsSets(cellSets, additionalCellSets), [cellSets, additionalCellSets]);
-    const cellColors = useMemo(() => getCellColors({
-        cellSets: mergedCellSets,
-        cellSetSelection,
-        cellSetColor,
-        obsIndex,
-        theme,
-    }), [mergedCellSets, theme,
-        cellSetColor, cellSetSelection, obsIndex]);
     /*
      * handleStateUpdate - Interactions from NG to Vitessce are pushed here
      */
@@ -182,6 +343,8 @@ export function NeuroglancerSubscriber(props) {
         };
     }, []);
     const onSegmentClick = useCallback((value) => {
+        // Note: this callback is no longer called by the child component.
+        // Reference: https://github.com/vitessce/vitessce/pull/2439
         if (value) {
             const id = String(value);
             const selectedCellIds = [id];
@@ -190,38 +353,34 @@ export function NeuroglancerSubscriber(props) {
             if (alreadySelectedId) {
                 return;
             }
+            // TODO: update this now that we are using layer/channel-based organization of segmentations.
+            // There is no more "top-level" obsSets coordination; it is only on a per-layer basis.
+            // We should probably just assume the first segmentation layer/channel when updating the logic,
+            // since it is not clear how we would determine which layer/channel to update if there are multiple.
             setObsSelection(selectedCellIds, additionalCellSets, cellSetColor, setCellSetSelection, setAdditionalCellSets, setCellSetColor, setCellColorEncoding, 'Selection ', `: based on selected segments ${value}`);
         }
     }, [additionalCellSets, cellSetColor, setAdditionalCellSets,
         setCellColorEncoding, setCellSetColor, setCellSetSelection,
     ]);
-    const batchedUpdateTimeoutRef = useRef(null);
-    const [batchedCellColors, setBatchedCellColors] = useState(cellColors);
-    useEffect(() => {
-        if (batchedUpdateTimeoutRef.current) {
-            clearTimeout(batchedUpdateTimeoutRef.current);
-        }
-        batchedUpdateTimeoutRef.current = setTimeout(() => {
-            setBatchedCellColors(cellColors);
-        }, 100);
-        // TODO: look into deferredValue from React
-        // startTransition(() => {
-        //   setBatchedCellColors(cellColors);
-        // });
-    }, [cellColors]);
-    // TODO use a ref if slow - see prev commits
-    const cellColorMapping = useMemo(() => {
-        const colorMapping = {};
-        batchedCellColors.forEach((color, cell) => {
-            colorMapping[cell] = rgbToHex(color);
+    // Get the ultimate cellColorMapping for each layer to pass to NeuroglancerComp as a prop.
+    const cellColorMappingByLayer = useMemo(() => {
+        const result = {};
+        segmentationLayerScopes?.forEach((layerScope) => {
+            const channelScope = segmentationChannelScopesByLayer?.[layerScope]?.[0];
+            result[layerScope] = segmentationColorMapping?.[layerScope]?.[channelScope] ?? {};
         });
-        return colorMapping;
-    }, [batchedCellColors]);
+        return result;
+    }, [segmentationColorMapping, segmentationLayerScopes, segmentationChannelScopesByLayer]);
+    // TODO: try to simplify using useMemoCustomComparison?
+    // This would allow us to refactor a lot of the checking-for-changes logic into a comparison function,
+    // simplify some of the manual bookkeeping like with prevCoordsRef and lastInteractionSource,
+    // and would allow us to potentially remove usage of some refs (e.g., latestViewerStateRef)
+    // by relying on the memoization to prevent unnecessary updates.
     const derivedViewerState = useMemo(() => {
         const { current } = latestViewerStateRef;
-        const nextSegments = Object.keys(cellColorMapping);
-        const prevLayer = current?.layers?.[0] || {};
-        const prevSegments = prevLayer.segments || [];
+        if (current.layers.length <= 0) {
+            return current;
+        }
         const { projectionScale, projectionOrientation, position } = current;
         // Did Vitessce coords change vs the *previous* render?
         const rotChangedNow = !nearEq(spatialRotationX, prevCoordsRef.current.rx, ROTATION_EPS)
@@ -326,18 +485,22 @@ export function NeuroglancerSubscriber(props) {
             nextOrientation = lastNgPushOrientationRef.current ?? projectionOrientation;
             lastInteractionSource.current = null;
         }
-        const newLayer0 = {
-            ...prevLayer,
-            segments: nextSegments,
-            segmentColors: cellColorMapping,
-        };
+        const updatedLayers = current?.layers?.map((layer, idx) => {
+            const layerScope = segmentationLayerScopes?.[idx];
+            const layerColorMapping = cellColorMappingByLayer?.[layerScope] ?? {};
+            const layerSegments = Object.keys(layerColorMapping);
+            return {
+                ...layer,
+                segments: layerSegments,
+                segmentColors: layerColorMapping,
+            };
+        }) ?? [];
         const updated = {
             ...current,
             projectionScale: nextProjectionScale,
             projectionOrientation: nextOrientation,
             position: nextPosition,
-            layers: prevSegments.length === 0 ? [newLayer0, ...(current?.layers?.slice(1)
-                    || [])] : current?.layers,
+            layers: updatedLayers,
         };
         latestViewerStateRef.current = updated;
         prevCoordsRef.current = {
@@ -350,14 +513,17 @@ export function NeuroglancerSubscriber(props) {
             ty: spatialTargetY,
         };
         return updated;
-    }, [cellColorMapping, spatialZoom, spatialRotationX, spatialRotationY,
-        spatialRotationZ, spatialTargetX, spatialTargetY]);
+    }, [cellColorMappingByLayer, spatialZoom, spatialRotationX, spatialRotationY,
+        spatialRotationZ, spatialTargetX, spatialTargetY, initalViewerState,
+        latestViewerStateIteration]);
     const onSegmentHighlight = useCallback((obsId) => {
         setCellHighlight(String(obsId));
-    }, [obsIndex, setCellHighlight]);
+    }, [setCellHighlight]);
     // TODO: if all cells are deselected, a black view is shown, rather we want to show empty NG view?
     // if (!cellColorMapping || Object.keys(cellColorMapping).length === 0) {
     //   return;
     // }
-    return (_jsx(TitleInfo, { title: title, helpText: helpText, isSpatial: true, theme: theme, closeButtonVisible: closeButtonVisible, downloadButtonVisible: downloadButtonVisible, removeGridComponent: removeGridComponent, isReady: true, withPadding: false, children: _jsx(NeuroglancerComp, { classes: classes, onSegmentClick: onSegmentClick, onSelectHoveredCoords: onSegmentHighlight, viewerState: derivedViewerState, cellColorMapping: cellColorMapping, setViewerState: handleStateUpdate }) }));
+    const hasLayers = derivedViewerState?.layers?.length > 0;
+    // console.log(derivedViewerState);
+    return (_jsx(TitleInfo, { title: title, info: subtitle, helpText: helpText, isSpatial: true, theme: theme, closeButtonVisible: closeButtonVisible, downloadButtonVisible: downloadButtonVisible, removeGridComponent: removeGridComponent, isReady: isReady, errors: errors, withPadding: false, guideUrl: GUIDE_URL, children: hasLayers ? (_jsxs("div", { style: { position: 'relative', width: '100%', height: '100%' }, ref: containerRef, children: [_jsx("div", { style: { position: 'absolute', top: 0, right: 0, zIndex: 50 }, children: _jsx(MultiLegend, { theme: "dark", maxHeight: ngHeight, segmentationLayerScopes: segmentationLayerScopes, segmentationLayerCoordination: segmentationLayerCoordination, segmentationChannelScopesByLayer: segmentationChannelScopesByLayer, segmentationChannelCoordination: segmentationChannelCoordination }) }), _jsx(NeuroglancerComp, { classes: classes, onSegmentClick: onSegmentClick, onSelectHoveredCoords: onSegmentHighlight, viewerState: derivedViewerState, cellColorMapping: cellColorMappingByLayer, setViewerState: handleStateUpdate })] })) : null }));
 }

package/dist-tsc/ReactNeuroglancer.d.ts

@@ -77,7 +77,7 @@ export default class Neuroglancer {
     disposers: any[];
     prevColorOverrides: Set<any>;
     overrideColorsById: any;
-    allKnownIds: Set<any>;
+    allKnownIdsByLayer: {};
     minimalPoseSnapshot: () => {
         position: any[];
         projectionScale: any;
@@ -86,7 +86,7 @@ export default class Neuroglancer {
     scheduleEmit: () => () => void;
     withoutEmitting: (fn: any) => void;
     didLayersChange: (prevVS: any, nextVS: any) => boolean;
-    applyColorsAndVisibility: (cellColorMapping: any) => void;
+    applyColorsAndVisibility: (cellColorMappingByLayer: any) => void;
     componentDidMount(): void;
     componentDidUpdate(prevProps: any, prevState: any): void;
     componentWillUnmount(): void;

package/dist-tsc/ReactNeuroglancer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ReactNeuroglancer.d.ts","sourceRoot":"","sources":["../src/ReactNeuroglancer.js"],"names":[],"mappings":"AAiCA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AAGH,4CAsBC;AAED,0DAGC;AAED,gEA2BC;AAED,kDAKC;AAED,+CAMC;AAED,0DAMC;AAED,6DAMC;AAED,8DAWC;AAED,+EAYC;AAED,yFAcC;AAED,+EA6BC;AAmFD,2FAwBC;AAED,kGAeC;AAED,gFAUC;AAED,uEA0BC;AAED,0CAA0C;AAC1C;IACE;;;;;;;;;;;;MAYE;IAEF,wBAYC;IAVC,iBAAoC;IACpC,YAAkB;IAElB,2BAA8B;IAC9B,yBAA+B;IAC/B,kBAAwB;IACxB,iBAAmB;IACnB,6BAAmC;IACnC,wBAA6C;IAC7C,sBAA4B;IAG9B;;;;MASE;IAGF,+BAWE;IAGF,mCAKE;IAGF,uDASE;IAGF,0DAgCE;IAEF,0BA+GC;IAED,yDAgIC;IAED,6BAUC;IAcD,mCAQC;IAED,0DAyCE;IAEF,yCAOE;IAEF,0BAsCE;IA5BI,mCAAyB;IA+B/B,sCAWE;IAEF,qCAUE;IAEF,sBAOC;CACF;;qBAh3Ba,MAAM;iBACN,MAAM;uBACN,MAAM;SACN,MAAM;sBACN;YAAO,MAAM,GAAE,MAAM;KAAC;;;;;;;;;;;;;;;;;;;uBAWtB,CAAC,OAAO,EAAC,GAAG,GAAC,IAAI,EAAE,KAAK,EAAC,GAAG,KAAK,IAAI;;;;;;;;;sBAQrC,CAAC,QAAQ,EAAC,GAAG,EAAE,KAAK,EAAC,GAAG,KAAK,IAAI;;;;oCAQjC,MAAM,IAAI;0BAEV,MAAM,IAAI;;;;eAEV,KAAK,CAAC,MAAM,CAAC"}
+{"version":3,"file":"ReactNeuroglancer.d.ts","sourceRoot":"","sources":["../src/ReactNeuroglancer.js"],"names":[],"mappings":"AAiCA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AAGH,4CAsBC;AAED,0DAGC;AAED,gEA2BC;AAED,kDAKC;AAED,+CAMC;AAED,0DAMC;AAED,6DAMC;AAED,8DAWC;AAED,+EAYC;AAED,yFAcC;AAED,+EA6BC;AAmFD,2FAwBC;AAED,kGAeC;AAED,gFAUC;AAED,uEA0BC;AAED,0CAA0C;AAC1C;IACE;;;;;;;;;;;;MAYE;IAEF,wBAYC;IAVC,iBAAoC;IACpC,YAAkB;IAElB,2BAA8B;IAC9B,yBAA+B;IAC/B,kBAAwB;IACxB,iBAAmB;IACnB,6BAAmC;IACnC,wBAA6C;IAC7C,uBAA4B;IAG9B;;;;MASE;IAGF,+BAWE;IAGF,mCAKE;IAGF,uDASE;IAGF,iEAsCE;IAEF,0BA+GC;IAED,yDAiIC;IAED,6BAUC;IAcD,mCAQC;IAED,0DAyCE;IAEF,yCAOE;IAEF,0BAsCE;IA5BI,mCAAyB;IA+B/B,sCAWE;IAEF,qCAUE;IAEF,sBAOC;CACF;;qBAv3Ba,MAAM;iBACN,MAAM;uBACN,MAAM;SACN,MAAM;sBACN;YAAO,MAAM,GAAE,MAAM;KAAC;;;;;;;;;;;;;;;;;;;uBAWtB,CAAC,OAAO,EAAC,GAAG,GAAC,IAAI,EAAE,KAAK,EAAC,GAAG,KAAK,IAAI;;;;;;;;;sBAQrC,CAAC,QAAQ,EAAC,GAAG,EAAE,KAAK,EAAC,GAAG,KAAK,IAAI;;;;oCAQjC,MAAM,IAAI;0BAEV,MAAM,IAAI;;;;eAEV,KAAK,CAAC,MAAM,CAAC"}

package/dist-tsc/ReactNeuroglancer.js

@@ -373,7 +373,7 @@ export default class Neuroglancer extends React.Component {
         this.disposers = [];
         this.prevColorOverrides = new Set();
         this.overrideColorsById = Object.create(null);
-        this.allKnownIds = new Set();
+        this.allKnownIdsByLayer = {};
     }
     minimalPoseSnapshot = () => {
         const v = this.viewer;
@@ -423,31 +423,33 @@ export default class Neuroglancer extends React.Component {
         return JSON.stringify(prevLayers) !== JSON.stringify(nextLayers);
     };
     /* To add colors to the segments, turning unselected to grey  */
-    applyColorsAndVisibility = (cellColorMapping) => {
+    applyColorsAndVisibility = (cellColorMappingByLayer) => {
         if (!this.viewer)
             return;
-        // Track all ids we've ever seen so we can grey the ones
-        // that drop out of the current selection.
-        const selected = { ...(cellColorMapping || {}) }; // clone, don't mutate props
-        for (const id of Object.keys(selected))
-            this.allKnownIds.add(id);
-        // If empty on first call, seed from initial segmentColors (if present)
-        if (this.allKnownIds.size === 0) {
-            const init = this.props.viewerState?.layers?.[0]?.segmentColors || {};
-            for (const id of Object.keys(init))
-                this.allKnownIds.add(id);
-        }
-        // Build a full color table: selected keep their hex, others grey
-        const fullSegmentColors = {};
-        for (const id of this.allKnownIds) {
-            fullSegmentColors[id] = selected[id] || GREY_HEX;
-        }
-        // Patch layers with the new segmentColors (pose untouched)
+        // Build full color table per layer
         const baseLayers = (this.props.viewerState?.layers)
             ?? (this.viewer.state.toJSON().layers || []);
-        const newLayers = baseLayers.map((layer, idx) => {
-            // if only one layer, take that or check layer.type === 'segmentation'.
-            if (idx === 0 || layer?.type === 'segmentation') {
+        const newLayers = baseLayers.map((layer) => {
+            // Match layerScope by checking if the NG layer name contains the scope key.
+            // NG layer names are of the form:
+            // "obsSegmentations-init_A_obsSegmentations_0-init_A_obsSegmentations_0"
+            const layerScope = Object.keys(cellColorMappingByLayer).find(scope => layer.name?.includes(scope));
+            const selected = { ...(cellColorMappingByLayer[layerScope] || {}) };
+            // Track all known IDs for this layer scope
+            if (!this.allKnownIdsByLayer)
+                this.allKnownIdsByLayer = {};
+            if (!this.allKnownIdsByLayer[layerScope]) {
+                this.allKnownIdsByLayer[layerScope] = new Set();
+            }
+            for (const id of Object.keys(selected)) {
+                this.allKnownIdsByLayer[layerScope].add(id);
+            }
+            // Build a full color table: selected keep their hex, others grey
+            const fullSegmentColors = {};
+            for (const id of this.allKnownIdsByLayer[layerScope] || []) {
+                fullSegmentColors[id] = selected[id] || GREY_HEX;
+            }
+            if (layer.type === 'segmentation') {
                 return { ...layer, segmentColors: fullSegmentColors };
             }
             return layer;
@@ -556,7 +558,7 @@ export default class Neuroglancer extends React.Component {
         // window.viewer = this.viewer;
     }
     componentDidUpdate(prevProps, prevState) {
-        const { viewerState, cellColorMapping } = this.props;
+        const { viewerState, cellColorMapping: cellColorMappingByLayer } = this.props;
         // The restoreState() call clears the 'selected' (hovered on) segment, which is needed
         // by Neuroglancer's code to toggle segment visibilty on a mouse click.  To free the user
         // from having to move the mouse before clicking, save the selected segment and restore
@@ -633,8 +635,8 @@ export default class Neuroglancer extends React.Component {
             this.withoutEmitting(() => {
                 const layers = Array.isArray(viewerState.layers) ? viewerState.layers : [];
                 this.viewer.state.restoreState({ layers });
-                if (cellColorMapping && Object.keys(cellColorMapping).length) {
-                    this.applyColorsAndVisibility(cellColorMapping);
+                if (cellColorMappingByLayer && Object.keys(cellColorMappingByLayer).length) {
+                    this.applyColorsAndVisibility(cellColorMappingByLayer);
                 }
             });
         }
@@ -642,12 +644,13 @@ export default class Neuroglancer extends React.Component {
         // this was to avid NG randomly assigning colors to the segments by resetting them
         const prevSize = prevProps.cellColorMapping
             ? Object.keys(prevProps.cellColorMapping).length : 0;
-        const currSize = cellColorMapping ? Object.keys(cellColorMapping).length : 0;
-        const mappingRefChanged = prevProps.cellColorMapping !== cellColorMapping;
+        const currSize = cellColorMappingByLayer
+            ? Object.keys(cellColorMappingByLayer).length : 0;
+        const mappingRefChanged = prevProps.cellColorMapping !== this.props.cellColorMapping;
         if (!this.didLayersChange(prevVS, viewerState)
             && (mappingRefChanged || prevSize !== currSize)) {
             this.withoutEmitting(() => {
-                this.applyColorsAndVisibility(cellColorMapping);
+                this.applyColorsAndVisibility(cellColorMappingByLayer);
             });
         }
         // Treat "real" layer source/type changes differently from segment list changes.