@vitessce/neuroglancer 3.9.6 → 3.9.8

package/dist/index.js

@@ -1,4 +1,4 @@
-import { N } from "./index-DvhFVdN_.js";
+import { N } from "./index-anGvS-pL.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,sBAqBC;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,16 +76,13 @@ 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;
         }
     }
     render() {
-        const { classes, viewerState, cellColorMapping } = this.props;
-        return (_jsxs(_Fragment, { children: [_jsx(NeuroglancerGlobalStyles, { classes: classes }), _jsx("div", { className: classes.neuroglancerWrapper, children: _jsx(Suspense, { fallback: _jsx("div", { children: "Loading..." }), children: _jsx(LazyReactNeuroglancer, { brainMapsClientId: "NOT_A_VALID_ID", viewerState: viewerState, onViewerStateChanged: this.onViewerStateChanged, bundleRoot: this.bundleRoot, cellColorMapping: cellColorMapping, ref: this.onRef }) }) })] }));
+        const { classes, viewerState, cellColorMapping, onLayerLoadingChange } = this.props;
+        return (_jsxs(_Fragment, { children: [_jsx(NeuroglancerGlobalStyles, { classes: classes }), _jsx("div", { className: classes.neuroglancerWrapper, children: _jsx(Suspense, { fallback: _jsx("div", { children: "Loading..." }), children: _jsx(LazyReactNeuroglancer, { brainMapsClientId: "NOT_A_VALID_ID", viewerState: viewerState, onViewerStateChanged: this.onViewerStateChanged, onLayerLoadingChange: onLayerLoadingChange, bundleRoot: this.bundleRoot, cellColorMapping: cellColorMapping, ref: this.onRef }) }) })] }));
     }
 }

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,gEA0vBC"}

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',
@@ -27,7 +28,7 @@ function rgbToHex(rgb) {
         : `#${rgb.map(c => c.toString(16).padStart(2, '0')).join('')}`);
 }
 export function NeuroglancerSubscriber(props) {
-    const { uuid, coordinationScopes: coordinationScopesRaw, coordinationScopesBy: coordinationScopesByRaw, closeButtonVisible, downloadButtonVisible, removeGridComponent, theme, title = 'Spatial', subtitle = 'Powered by Neuroglancer', helpText = ViewHelpMapping.NEUROGLANCER, 
+    const { uuid, coordinationScopes: coordinationScopesRaw, coordinationScopesBy: coordinationScopesByRaw, closeButtonVisible, downloadButtonVisible, removeGridComponent, theme, showAxisLines = false, 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
@@ -94,6 +95,7 @@ export function NeuroglancerSubscriber(props) {
         CoordinationType.TOOLTIPS_VISIBLE,
         CoordinationType.TOOLTIP_CROSSHAIRS_VISIBLE,
         CoordinationType.LEGEND_VISIBLE,
+        CoordinationType.SPATIAL_POINT_STROKE_WIDTH,
     ], coordinationScopes, coordinationScopesBy, CoordinationType.POINT_LAYER);
     // Points data
     const [obsPointsData, obsPointsDataStatus, obsPointsUrls, obsPointsErrors] = useMultiObsPoints(coordinationScopes, coordinationScopesBy, loaders, dataset, mergeCoordination, uuid);
@@ -132,8 +134,34 @@ 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, spatialChannelOpacity, } = 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;
+                        result[layerScope].opacity = spatialChannelOpacity ?? 1.0;
+                    }
+                }
+                else if (layerSets && layerIndex) {
                     const mergedCellSets = mergeObsSets(layerSets, additionalObsSets);
                     const cellColors = getCellColors({
                         cellSets: mergedCellSets,
@@ -147,14 +175,8 @@ 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;
+                    result[layerScope].opacity = spatialChannelOpacity ?? 1.0;
                 }
             });
         });
@@ -169,7 +191,7 @@ export function NeuroglancerSubscriber(props) {
         theme,
     }, customIsEqualForCellColors);
     // Obtain the Neuroglancer viewerState object.
-    const initalViewerState = useNeuroglancerViewerState(theme, segmentationLayerScopes, segmentationChannelScopesByLayer, segmentationLayerCoordination, segmentationChannelCoordination, obsSegmentationsUrls, obsSegmentationsData, pointLayerScopes, pointLayerCoordination, obsPointsUrls, obsPointsData, pointMultiIndicesData);
+    const initalViewerState = useNeuroglancerViewerState(theme, showAxisLines, segmentationLayerScopes, segmentationChannelScopesByLayer, segmentationLayerCoordination, segmentationChannelCoordination, obsSegmentationsUrls, obsSegmentationsData, pointLayerScopes, pointLayerCoordination, obsPointsUrls, obsPointsData, pointMultiIndicesData);
     const [latestViewerStateIteration, incrementLatestViewerStateIteration] = useReducer(x => x + 1, 0);
     const latestViewerStateRef = useRef({
         ...initalViewerState,
@@ -206,6 +228,8 @@ export function NeuroglancerSubscriber(props) {
         z: spatialRotationZ,
         orbit: spatialRotationOrbit,
     });
+    // Track layer loading state for showing loading indicator
+    const [isLayersLoaded, setIsLayersLoaded] = useState(false);
     // Track the last coord values we saw, and only mark "vitessce"
     // when *those* actually change. This prevents cell set renders
     // from spoofing the source.
@@ -324,6 +348,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 +367,18 @@ 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] = {
+                colors: segmentationColorMapping?.[layerScope]?.[channelScope] ?? {},
+                opacity: segmentationColorMapping?.[layerScope]?.opacity ?? 1.0,
+            };
+        });
+        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 +389,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 +493,23 @@ 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]?.colors ?? {};
+            const layerSegments = Object.keys(layerColorMapping);
+            return {
+                ...layer,
+                segments: layerSegments,
+                segmentColors: layerColorMapping,
+                objectAlpha: cellColorMappingByLayer?.[layerScope]?.opacity ?? 1.0,
+            };
+        }) ?? [];
         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,17 +522,24 @@ 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) => {
         setCellHighlight(String(obsId));
     }, [setCellHighlight]);
+    const handleLayerLoadingChange = useCallback((isLoaded) => {
+        setIsLayersLoaded(isLoaded);
+    }, []);
     // 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;
     // }
     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 && isLayersLoaded, 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, 
+                        // Segmentations
+                        segmentationLayerScopes: segmentationLayerScopes, segmentationLayerCoordination: segmentationLayerCoordination, segmentationChannelScopesByLayer: segmentationChannelScopesByLayer, segmentationChannelCoordination: segmentationChannelCoordination, 
+                        // Points
+                        pointLayerScopes: pointLayerScopes, pointLayerCoordination: pointLayerCoordination, pointMultiIndicesData: pointMultiIndicesData }) }), _jsx(NeuroglancerComp, { classes: classes, onSegmentClick: onSegmentClick, onSelectHoveredCoords: onSegmentHighlight, viewerState: derivedViewerState, cellColorMapping: cellColorMappingByLayer, setViewerState: handleStateUpdate, onLayerLoadingChange: handleLayerLoadingChange })] })) : null }));
 }

package/dist-tsc/ReactNeuroglancer.d.ts

@@ -34,6 +34,10 @@
  * @property {() => void} onSelectionDetailsStateChanged
  * A function of the form `() => {}` to respond to selection changes in the viewer.
  * @property {() => void} onViewerStateChanged
+ * @property {(isLoaded: boolean) => void} onLayerLoadingChange
+ * A function of the form `(isLoaded) => {}`, called when layer loading state changes.
+ * The `isLoaded` argument will be `true` when all segmentation layers have finished loading
+ * their data sources, or `false` when layers are still loading.
  *
  * @property {Array<Object>} callbacks
  * // ngServer: string,
@@ -64,6 +68,7 @@ export default class Neuroglancer {
         onVisibleChanged: null;
         onSelectionDetailsStateChanged: null;
         onViewerStateChanged: null;
+        onLayerLoadingChange: null;
         key: null;
         callbacks: never[];
         ngServer: string;
@@ -77,7 +82,7 @@ export default class Neuroglancer {
     disposers: any[];
     prevColorOverrides: Set<any>;
     overrideColorsById: any;
-    allKnownIds: Set<any>;
+    allKnownIdsByLayer: {};
     minimalPoseSnapshot: () => {
         position: any[];
         projectionScale: any;
@@ -86,7 +91,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;
@@ -140,6 +145,12 @@ export type NgProps = {
      */
     onSelectionDetailsStateChanged: () => void;
     onViewerStateChanged: () => void;
+    /**
+     * A function of the form `(isLoaded) => {}`, called when layer loading state changes.
+     * The `isLoaded` argument will be `true` when all segmentation layers have finished loading
+     * their data sources, or `false` when layers are still loading.
+     */
+    onLayerLoadingChange: (isLoaded: boolean) => void;
     /**
      * // ngServer: string,
      */

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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;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;;;;;;;;;;;;;MAaE;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,0BAiJC;IAED,yDAwJC;IAED,6BAUC;IAcD,mCAQC;IAED,0DAyCE;IAEF,yCAOE;IAEF,0BAsCE;IA5BI,mCAAyB;IA+B/B,sCAWE;IAEF,qCAUE;IAEF,sBAOC;CACF;;qBAr7Ba,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;;;;;;0BACV,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI;;;;eAK3B,KAAK,CAAC,MAAM,CAAC"}

package/dist-tsc/ReactNeuroglancer.js

@@ -63,6 +63,10 @@ let viewerNoKey;
  * @property {() => void} onSelectionDetailsStateChanged
  * A function of the form `() => {}` to respond to selection changes in the viewer.
  * @property {() => void} onViewerStateChanged
+ * @property {(isLoaded: boolean) => void} onLayerLoadingChange
+ * A function of the form `(isLoaded) => {}`, called when layer loading state changes.
+ * The `isLoaded` argument will be `true` when all segmentation layers have finished loading
+ * their data sources, or `false` when layers are still loading.
  *
  * @property {Array<Object>} callbacks
  * // ngServer: string,
@@ -358,6 +362,7 @@ export default class Neuroglancer extends React.Component {
         onVisibleChanged: null,
         onSelectionDetailsStateChanged: null,
         onViewerStateChanged: null,
+        onLayerLoadingChange: null,
         key: null,
         callbacks: [],
         ngServer: 'https://neuroglancer-demo.appspot.com/',
@@ -373,7 +378,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 +428,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]?.colors || {}) };
+            // 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;
@@ -552,11 +559,42 @@ export default class Neuroglancer extends React.Component {
         else {
             viewerNoKey = this.viewer;
         }
-        // TODO: This is purely for debugging and we need to remove it.
+        const { visibleChunksChanged } = this.viewer.chunkQueueManager;
+        let firstChunkLoaded = false;
+        this.disposers.push(visibleChunksChanged.add(() => {
+            if (!firstChunkLoaded) {
+                for (const layer of this.viewer.layerManager.managedLayers) {
+                    if (layer.layer instanceof SegmentationUserLayer) {
+                        const hasVisibleChunk = layer.layer.renderLayers?.some((rl) => {
+                            const { numVisibleChunksAvailable, numVisibleChunksNeeded, } = rl.layerChunkProgressInfo || {};
+                            if (!numVisibleChunksNeeded || !numVisibleChunksAvailable)
+                                return false;
+                            // Neuroglancer only shows chunks when a certain % is loaded.
+                            // The 0.25 is from testing different values, can be reduced to 0.2 to shorten loader time
+                            return (numVisibleChunksAvailable / numVisibleChunksNeeded) > 0.25;
+                        });
+                        if (hasVisibleChunk) {
+                            firstChunkLoaded = true;
+                            // Two frames to avoid flash while the following two happens
+                            // Neuroglancer issues WebGL draw calls
+                            requestAnimationFrame(() => {
+                                // GPU has painted, pixels visible on screen
+                                requestAnimationFrame(() => {
+                                    this.props.onLayerLoadingChange?.(true);
+                                });
+                            });
+                            return;
+                        }
+                    }
+                }
+            }
+        }));
+        this.disposers.push(() => { firstChunkLoaded = false; });
+        // TODO: This is purely for debugging - exposes the NG viewer to be tested via console
         // 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
@@ -592,6 +630,23 @@ export default class Neuroglancer extends React.Component {
             if (layer.layer instanceof SegmentationUserLayer) {
                 const { segmentSelectionState } = layer.layer.displayState;
                 segmentSelectionState.set(selectedSegments[layer.name]);
+                const layerScope = Object.keys(cellColorMappingByLayer).find(scope => layer.name?.includes(scope));
+                if (layerScope) {
+                    const opacity = cellColorMappingByLayer[layerScope]?.opacity ?? 1.0;
+                    layer.layer.displayState.objectAlpha.value = opacity;
+                }
+            }
+            // Update annotation layer shaders from viewerState config,
+            // skipping update if shader is unchanged to avoid costly re-renders
+            if (layer.layer instanceof AnnotationUserLayer) {
+                const matchingLayer = (viewerState?.layers || []).find(l => l.name === layer.name);
+                if (matchingLayer?.shader) {
+                    /* eslint-disable-next-line no-underscore-dangle */
+                    const currentShader = layer.layer.annotationDisplayState.shader.value_;
+                    if (currentShader !== matchingLayer.shader) {
+                        layer.layer.annotationDisplayState.shader.value = matchingLayer.shader;
+                    }
+                }
             }
         }
         // For some reason setting position to an empty array doesn't reset
@@ -633,21 +688,24 @@ 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);
                 }
             });
         }
         // If colors changed (but layers didn’t): re-apply colors
         // 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;
+            ? Object.values(prevProps.cellColorMapping)
+                .reduce((acc, v) => acc + Object.keys(v?.colors || {}).length, 0) : 0;
+        const currSize = cellColorMappingByLayer
+            ? Object.values(cellColorMappingByLayer)
+                .reduce((acc, v) => acc + Object.keys(v?.colors || {}).length, 0) : 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.
@@ -655,7 +713,7 @@ export default class Neuroglancer extends React.Component {
         const stripSegFields = layers => (layers || []).map((l) => {
             if (!l)
                 return l;
-            const { segments, segmentColors, ...rest } = l;
+            const { segments, segmentColors, objectAlpha, ...rest } = l;
             return rest; // ignore segments + segmentColors for comparison
         });
         const prevLayers = prevProps.viewerState?.layers;

package/dist-tsc/data-hook-ng-utils.d.ts

@@ -21,7 +21,7 @@ export function toNgLayerName(dataType: any, layerScope: any, channelScope?: nul
 /**
  * @returns [viewerState]
  */
-export function useNeuroglancerViewerState(theme: any, segmentationLayerScopes: any, segmentationChannelScopesByLayer: any, segmentationLayerCoordination: any, segmentationChannelCoordination: any, obsSegmentationsUrls: any, obsSegmentationsData: any, pointLayerScopes: any, pointLayerCoordination: any, obsPointsUrls: any, obsPointsData: any, pointMultiIndicesData: any): any;
+export function useNeuroglancerViewerState(theme: any, showAxisLines: any, segmentationLayerScopes: any, segmentationChannelScopesByLayer: any, segmentationLayerCoordination: any, segmentationChannelCoordination: any, obsSegmentationsUrls: any, obsSegmentationsData: any, pointLayerScopes: any, pointLayerCoordination: any, obsPointsUrls: any, obsPointsData: any, pointMultiIndicesData: any): any;
 export namespace DEFAULT_NG_PROPS {
     let layout: string;
     let position: number[];

package/dist-tsc/data-hook-ng-utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"data-hook-ng-utils.d.ts","sourceRoot":"","sources":["../src/data-hook-ng-utils.js"],"names":[],"mappings":"AAgDA;;;;KAIK;AACL,sDAHa,MAAM,GACJ;IAAE,CAAC,EAAC,CAAC,MAAM,EAAC,IAAI,CAAC,CAAC;IAAC,CAAC,EAAC,CAAC,MAAM,EAAC,IAAI,CAAC,CAAC;IAAC,CAAC,EAAC,CAAC,MAAM,EAAC,IAAI,CAAC,CAAA;CAAE,CA+BnE;AAED,2FAQC;AAED;;;;;;;;GAQG;AACH;;GAEG;AACH,yXAiJC"}
+{"version":3,"file":"data-hook-ng-utils.d.ts","sourceRoot":"","sources":["../src/data-hook-ng-utils.js"],"names":[],"mappings":"AAgDA;;;;KAIK;AACL,sDAHa,MAAM,GACJ;IAAE,CAAC,EAAC,CAAC,MAAM,EAAC,IAAI,CAAC,CAAC;IAAC,CAAC,EAAC,CAAC,MAAM,EAAC,IAAI,CAAC,CAAC;IAAC,CAAC,EAAC,CAAC,MAAM,EAAC,IAAI,CAAC,CAAA;CAAE,CA+BnE;AAED,2FAQC;AAED;;;;;;;;GAQG;AACH;;GAEG;AACH,6YAoKC"}