@vitessce/neuroglancer 3.9.6 → 3.9.7

package/dist/index.js

@@ -1,4 +1,4 @@
-import { N } from "./index-DvhFVdN_.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":"AAsEA,gEAusBC"}
+{"version":3,"file":"NeuroglancerSubscriber.d.ts","sourceRoot":"","sources":["../src/NeuroglancerSubscriber.js"],"names":[],"mappings":"AAwEA,gEAkuBC"}

package/dist-tsc/NeuroglancerSubscriber.js

@@ -17,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',
@@ -132,8 +133,33 @@ export function NeuroglancerSubscriber(props) {
             result[layerScope] = {};
             segmentationChannelScopesByLayer?.[layerScope]?.forEach((channelScope) => {
                 const { obsSets: layerSets, obsIndex: layerIndex } = obsSegmentationsSetsData?.[layerScope]?.[channelScope] || {};
-                if (layerSets && layerIndex) {
-                    const { obsSetColor, obsColorEncoding, obsSetSelection, additionalObsSets, } = segmentationChannelCoordination[0][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,
@@ -147,13 +173,6 @@ export function NeuroglancerSubscriber(props) {
                     cellColors.forEach((color, i) => {
                         ngCellColors[i] = rgbToHex(color);
                     });
-                    /* // TODO: Is this necessary?
-                    const obsColorIndices = treeToCellSetColorIndicesBySetNames(
-                      mergedLayerSets,
-                      obsSetSelection,
-                      obsSetColor,
-                    );
-                    */
                     result[layerScope][channelScope] = ngCellColors;
                 }
             });
@@ -324,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];
@@ -341,10 +362,15 @@ export function NeuroglancerSubscriber(props) {
     }, [additionalCellSets, cellSetColor, setAdditionalCellSets,
         setCellColorEncoding, setCellSetColor, setCellSetSelection,
     ]);
-    // Get the ultimate cellColorMapping to pass to NeuroglancerComp as a prop.
-    // For now, we take the first layer and channel for cell colors.
-    const cellColorMapping = useMemo(() => (segmentationColorMapping?.[segmentationLayerScopes?.[0]]?.[segmentationChannelScopesByLayer?.[segmentationLayerScopes?.[0]]?.[0]]
-        ?? {}), [segmentationColorMapping]);
+    // 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 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,
@@ -355,9 +381,6 @@ export function NeuroglancerSubscriber(props) {
         if (current.layers.length <= 0) {
             return current;
         }
-        const nextSegments = Object.keys(cellColorMapping);
-        const prevLayer = current?.layers?.[0] || {};
-        const prevSegments = prevLayer.segments || [];
         const { projectionScale, projectionOrientation, position } = current;
         // Did Vitessce coords change vs the *previous* render?
         const rotChangedNow = !nearEq(spatialRotationX, prevCoordsRef.current.rx, ROTATION_EPS)
@@ -462,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 = {
@@ -486,7 +513,7 @@ export function NeuroglancerSubscriber(props) {
             ty: spatialTargetY,
         };
         return updated;
-    }, [cellColorMapping, spatialZoom, spatialRotationX, spatialRotationY,
+    }, [cellColorMappingByLayer, spatialZoom, spatialRotationX, spatialRotationY,
         spatialRotationZ, spatialTargetX, spatialTargetY, initalViewerState,
         latestViewerStateIteration]);
     const onSegmentHighlight = useCallback((obsId) => {
@@ -498,5 +525,5 @@ export function NeuroglancerSubscriber(props) {
     // }
     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, children: _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 }) }), hasLayers ? (_jsx(NeuroglancerComp, { classes: classes, onSegmentClick: onSegmentClick, onSelectHoveredCoords: onSegmentHighlight, viewerState: derivedViewerState, cellColorMapping: cellColorMapping, setViewerState: handleStateUpdate })) : null] }) }));
+    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.

package/dist-tsc/use-memo-custom-comparison.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-memo-custom-comparison.d.ts","sourceRoot":"","sources":["../src/use-memo-custom-comparison.js"],"names":[],"mappings":"AAIA;;;;;;;;;GASG;AACH,wCAPa,CAAC,WACH,MAAM,CAAC,gBACP,GAAG,iBACH,CAAC,QAAQ,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,KAAK,OAAO,GAEvC,CAAC,CAUb;AA6CD,kFA8CC;AAED,0FAyEC"}
+{"version":3,"file":"use-memo-custom-comparison.d.ts","sourceRoot":"","sources":["../src/use-memo-custom-comparison.js"],"names":[],"mappings":"AAIA;;;;;;;;;GASG;AACH,wCAPa,CAAC,WACH,MAAM,CAAC,gBACP,GAAG,iBACH,CAAC,QAAQ,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,KAAK,OAAO,GAEvC,CAAC,CAUb;AA6CD,kFA+CC;AAED,0FAyEC"}

package/dist-tsc/use-memo-custom-comparison.js

@@ -73,6 +73,7 @@ export function customIsEqualForCellColors(prevDeps, nextDeps) {
                         'obsColorEncoding',
                         'obsSetSelection',
                         'additionalObsSets',
+                        'spatialChannelColor',
                     ])) {
                     forceUpdate = true;
                 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitessce/neuroglancer",
-  "version": "3.9.6",
+  "version": "3.9.7",
   "author": "Gehlenborg Lab",
   "homepage": "http://vitessce.io",
   "repository": {
@@ -20,14 +20,14 @@
     "lodash-es": "^4.17.21",
     "three": "^0.154.0",
     "react": "18.3.1",
-    "@vitessce/neuroglancer-workers": "3.9.6",
-    "@vitessce/vit-s": "3.9.6",
-    "@vitessce/styles": "3.9.6",
-    "@vitessce/utils": "3.9.6",
-    "@vitessce/constants-internal": "3.9.6",
-    "@vitessce/sets-utils": "3.9.6",
-    "@vitessce/tooltip": "3.9.6",
-    "@vitessce/legend": "3.9.6"
+    "@vitessce/styles": "3.9.7",
+    "@vitessce/constants-internal": "3.9.7",
+    "@vitessce/vit-s": "3.9.7",
+    "@vitessce/utils": "3.9.7",
+    "@vitessce/neuroglancer-workers": "3.9.7",
+    "@vitessce/sets-utils": "3.9.7",
+    "@vitessce/tooltip": "3.9.7",
+    "@vitessce/legend": "3.9.7"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.3",

package/src/Neuroglancer.js

@@ -1,12 +1,14 @@
 /* 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) {
@@ -14,8 +16,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);
@@ -32,41 +32,49 @@ 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;
     }
   }
@@ -77,10 +85,7 @@ export class NeuroglancerComp extends PureComponent {
   }
 
   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;
     }