@vitessce/neuroglancer 3.9.7 → 3.9.8

package/dist-tsc/NeuroglancerSubscriber.js

@@ -28,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
@@ -95,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);
@@ -133,7 +134,7 @@ export function NeuroglancerSubscriber(props) {
             result[layerScope] = {};
             segmentationChannelScopesByLayer?.[layerScope]?.forEach((channelScope) => {
                 const { obsSets: layerSets, obsIndex: layerIndex } = obsSegmentationsSetsData?.[layerScope]?.[channelScope] || {};
-                const { obsSetColor, obsColorEncoding, obsSetSelection, additionalObsSets, spatialChannelColor, } = 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) {
@@ -157,6 +158,7 @@ export function NeuroglancerSubscriber(props) {
                             });
                         }
                         result[layerScope][channelScope] = ngCellColors;
+                        result[layerScope].opacity = spatialChannelOpacity ?? 1.0;
                     }
                 }
                 else if (layerSets && layerIndex) {
@@ -174,6 +176,7 @@ export function NeuroglancerSubscriber(props) {
                         ngCellColors[i] = rgbToHex(color);
                     });
                     result[layerScope][channelScope] = ngCellColors;
+                    result[layerScope].opacity = spatialChannelOpacity ?? 1.0;
                 }
             });
         });
@@ -188,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,
@@ -225,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.
@@ -367,7 +372,10 @@ export function NeuroglancerSubscriber(props) {
         const result = {};
         segmentationLayerScopes?.forEach((layerScope) => {
             const channelScope = segmentationChannelScopesByLayer?.[layerScope]?.[0];
-            result[layerScope] = segmentationColorMapping?.[layerScope]?.[channelScope] ?? {};
+            result[layerScope] = {
+                colors: segmentationColorMapping?.[layerScope]?.[channelScope] ?? {},
+                opacity: segmentationColorMapping?.[layerScope]?.opacity ?? 1.0,
+            };
         });
         return result;
     }, [segmentationColorMapping, segmentationLayerScopes, segmentationChannelScopesByLayer]);
@@ -487,12 +495,13 @@ export function NeuroglancerSubscriber(props) {
         }
         const updatedLayers = current?.layers?.map((layer, idx) => {
             const layerScope = segmentationLayerScopes?.[idx];
-            const layerColorMapping = cellColorMappingByLayer?.[layerScope] ?? {};
+            const layerColorMapping = cellColorMappingByLayer?.[layerScope]?.colors ?? {};
             const layerSegments = Object.keys(layerColorMapping);
             return {
                 ...layer,
                 segments: layerSegments,
                 segmentColors: layerColorMapping,
+                objectAlpha: cellColorMappingByLayer?.[layerScope]?.opacity ?? 1.0,
             };
         }) ?? [];
         const updated = {
@@ -519,11 +528,18 @@ export function NeuroglancerSubscriber(props) {
     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, 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 }));
+    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;
@@ -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,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"}
+{"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/',
@@ -434,7 +439,7 @@ export default class Neuroglancer extends React.Component {
             // 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] || {}) };
+            const selected = { ...(cellColorMappingByLayer[layerScope]?.colors || {}) };
             // Track all known IDs for this layer scope
             if (!this.allKnownIdsByLayer)
                 this.allKnownIdsByLayer = {};
@@ -554,7 +559,38 @@ 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) {
@@ -594,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
@@ -643,9 +696,11 @@ export default class Neuroglancer extends React.Component {
         // 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;
+            ? Object.values(prevProps.cellColorMapping)
+                .reduce((acc, v) => acc + Object.keys(v?.colors || {}).length, 0) : 0;
         const currSize = cellColorMappingByLayer
-            ? Object.keys(cellColorMappingByLayer).length : 0;
+            ? 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)) {
@@ -658,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"}

package/dist-tsc/data-hook-ng-utils.js

@@ -88,7 +88,7 @@ export function toNgLayerName(dataType, layerScope, channelScope = null) {
 /**
  * @returns [viewerState]
  */
-export function useNeuroglancerViewerState(theme, segmentationLayerScopes, segmentationChannelScopesByLayer, segmentationLayerCoordination, segmentationChannelCoordination, obsSegmentationsUrls, obsSegmentationsData, pointLayerScopes, pointLayerCoordination, obsPointsUrls, obsPointsData, pointMultiIndicesData) {
+export function useNeuroglancerViewerState(theme, showAxisLines, segmentationLayerScopes, segmentationChannelScopesByLayer, segmentationLayerCoordination, segmentationChannelCoordination, obsSegmentationsUrls, obsSegmentationsData, pointLayerScopes, pointLayerCoordination, obsPointsUrls, obsPointsData, pointMultiIndicesData) {
     const viewerState = useMemoCustomComparison(() => {
         let result = cloneDeep(DEFAULT_NG_PROPS);
         // ======= SEGMENTATIONS =======
@@ -103,20 +103,32 @@ export function useNeuroglancerViewerState(theme, segmentationLayerScopes, segme
                 channelScopes.forEach((channelScope) => {
                     const channelCoordination = segmentationChannelCoordination[0]?.[layerScope]?.[channelScope];
                     const { spatialChannelVisible, } = channelCoordination || {};
+                    const { source: ngSource, ...otherNgOptions } = layerData.neuroglancerOptions ?? {};
+                    // Build source: if neuroglancerOptions has subsources
+                    const hasNgSourceOptions = layerData.neuroglancerOptions?.subsources
+                        || layerData.neuroglancerOptions?.enableDefaultSubsources !== undefined;
+                    const source = hasNgSourceOptions
+                        ? {
+                            url: toPrecomputedSource(layerUrl),
+                            subsources: layerData.neuroglancerOptions.subsources,
+                            enableDefaultSubsources: layerData.neuroglancerOptions.enableDefaultSubsources
+                                ?? false,
+                        }
+                        : toPrecomputedSource(layerUrl);
                     result = {
                         ...result,
                         layers: [
                             ...result.layers,
                             {
                                 type: 'segmentation',
-                                source: toPrecomputedSource(layerUrl),
+                                source,
                                 segments: [],
                                 name: toNgLayerName(DataType.OBS_SEGMENTATIONS, layerScope, channelScope),
                                 visible: spatialLayerVisible && spatialChannelVisible, // Both layer and channel
                                 // visibility must be true for the layer to be visible.
                                 // TODO: update this to extract specific properties from
                                 // neuroglancerOptions as needed.
-                                ...(layerData.neuroglancerOptions ?? {}),
+                                ...otherNgOptions,
                             },
                         ],
                     };
@@ -131,7 +143,7 @@ export function useNeuroglancerViewerState(theme, segmentationLayerScopes, segme
             const layerUrl = obsPointsUrls[layerScope]?.[0]?.url;
             const featureIndex = pointMultiIndicesData[layerScope]?.featureIndex;
             if (layerUrl && layerData) {
-                const { spatialLayerVisible, spatialLayerOpacity, obsColorEncoding, spatialLayerColor, featureSelection, featureFilterMode, featureColor, } = layerCoordination || {};
+                const { spatialLayerVisible, spatialLayerOpacity, obsColorEncoding, spatialLayerColor, featureSelection, featureFilterMode, featureColor, spatialPointStrokeWidth, } = layerCoordination || {};
                 // Dynamically construct the shader based on the color encoding
                 // and other coordination values.
                 const shader = getPointsShader({
@@ -145,6 +157,7 @@ export function useNeuroglancerViewerState(theme, segmentationLayerScopes, segme
                     featureColor,
                     featureIndexProp: layerData.neuroglancerOptions?.featureIndexProp,
                     pointIndexProp: layerData.neuroglancerOptions?.pointIndexProp,
+                    pointMarkerBorderWidth: spatialPointStrokeWidth ?? 0.0,
                 });
                 result = {
                     ...result,
@@ -182,6 +195,7 @@ export function useNeuroglancerViewerState(theme, segmentationLayerScopes, segme
         return result;
     }, {
         theme,
+        showAxisLines,
         segmentationLayerScopes,
         segmentationChannelScopesByLayer,
         segmentationLayerCoordination,

package/dist-tsc/shader-utils.d.ts

@@ -5,7 +5,7 @@
  * @param {number} opacity Opacity (0-1).
  * @returns {string} A GLSL shader string.
  */
-export function getSpatialLayerColorShader(staticColor: [number, number, number], opacity: number): string;
+export function getSpatialLayerColorShader(staticColor: [number, number, number], opacity: number, borderWidth?: number): string;
 /**
  * Generate a shader for spatialLayerColor encoding with feature selection.
  * Selected features get the static color; unselected get the default color.
@@ -16,7 +16,7 @@ export function getSpatialLayerColorShader(staticColor: [number, number, number]
  * @param {string} featureIndexProp The property name for the feature index in the shader.
  * @returns {string} A GLSL shader string.
  */
-export function getSpatialLayerColorWithSelectionShader(staticColor: [number, number, number], opacity: number, featureIndices: number[], defaultColor: [number, number, number], featureIndexProp: string): string;
+export function getSpatialLayerColorWithSelectionShader(staticColor: [number, number, number], opacity: number, featureIndices: number[], defaultColor: [number, number, number], featureIndexProp: string, borderWidth?: number): string;
 /**
  * Generate a shader for spatialLayerColor encoding with feature selection
  * and featureFilterMode='featureSelection' (hide unselected points).
@@ -26,7 +26,7 @@ export function getSpatialLayerColorWithSelectionShader(staticColor: [number, nu
  * @param {string} featureIndexProp The property name for the feature index in the shader.
  * @returns {string} A GLSL shader string.
  */
-export function getSpatialLayerColorFilteredShader(staticColor: [number, number, number], opacity: number, featureIndices: number[], featureIndexProp: string): string;
+export function getSpatialLayerColorFilteredShader(staticColor: [number, number, number], opacity: number, featureIndices: number[], featureIndexProp: string, borderWidth?: number): string;
 /**
  * Generate a shader for geneSelection encoding with no feature selection.
  * All points get the static color (since no features are selected to
@@ -35,7 +35,7 @@ export function getSpatialLayerColorFilteredShader(staticColor: [number, number,
  * @param {number} opacity Opacity (0-1).
  * @returns {string} A GLSL shader string.
  */
-export function getGeneSelectionNoSelectionShader(staticColor: [number, number, number], opacity: number): string;
+export function getGeneSelectionNoSelectionShader(staticColor: [number, number, number], opacity: number, borderWidth?: number): string;
 /**
  * Generate a shader for geneSelection encoding with feature selection.
  * Each selected feature gets its color from featureColor; unselected
@@ -51,7 +51,7 @@ export function getGeneSelectionNoSelectionShader(staticColor: [number, number,
  * @param {string} featureIndexProp The property name for the feature index in the shader.
  * @returns {string} A GLSL shader string.
  */
-export function getGeneSelectionWithSelectionShader(featureIndices: number[], featureColors: [number, number, number][], staticColor: [number, number, number], defaultColor: [number, number, number], opacity: number, featureIndexProp: string): string;
+export function getGeneSelectionWithSelectionShader(featureIndices: number[], featureColors: [number, number, number][], staticColor: [number, number, number], defaultColor: [number, number, number], opacity: number, featureIndexProp: string, borderWidth?: number): string;
 /**
  * Generate a shader for geneSelection encoding with feature selection
  * and featureFilterMode='featureSelection' (hide unselected points).
@@ -63,7 +63,7 @@ export function getGeneSelectionWithSelectionShader(featureIndices: number[], fe
  * @param {string} featureIndexProp The property name for the feature index in the shader.
  * @returns {string} A GLSL shader string.
  */
-export function getGeneSelectionFilteredShader(featureIndices: number[], featureColors: [number, number, number][], staticColor: [number, number, number], opacity: number, featureIndexProp: string): string;
+export function getGeneSelectionFilteredShader(featureIndices: number[], featureColors: [number, number, number][], staticColor: [number, number, number], opacity: number, featureIndexProp: string, borderWidth?: number): string;
 /**
  * Generate a shader for randomByFeature encoding with no feature selection.
  * Each feature gets a deterministic color from PALETTE based on its index.
@@ -71,7 +71,7 @@ export function getGeneSelectionFilteredShader(featureIndices: number[], feature
  * @param {string} featureIndexProp The property name for the feature index in the shader.
  * @returns {string} A GLSL shader string.
  */
-export function getRandomByFeatureShader(opacity: number, featureIndexProp: string): string;
+export function getRandomByFeatureShader(opacity: number, featureIndexProp: string, borderWidth?: number): string;
 /**
  * Generate a shader for randomByFeature encoding with feature selection.
  * Selected features get their deterministic palette color; unselected
@@ -82,7 +82,7 @@ export function getRandomByFeatureShader(opacity: number, featureIndexProp: stri
  * @param {string} featureIndexProp The property name for the feature index in the shader.
  * @returns {string} A GLSL shader string.
  */
-export function getRandomByFeatureWithSelectionShader(featureIndices: number[], defaultColor: [number, number, number], opacity: number, featureIndexProp: string): string;
+export function getRandomByFeatureWithSelectionShader(featureIndices: number[], defaultColor: [number, number, number], opacity: number, featureIndexProp: string, borderWidth?: number): string;
 /**
  * Generate a shader for randomByFeature encoding with feature selection
  * and featureFilterMode='featureSelection' (hide unselected points).
@@ -91,7 +91,7 @@ export function getRandomByFeatureWithSelectionShader(featureIndices: number[],
  * @param {string} featureIndexProp The property name for the feature index in the shader.
  * @returns {string} A GLSL shader string.
  */
-export function getRandomByFeatureFilteredShader(featureIndices: number[], opacity: number, featureIndexProp: string): string;
+export function getRandomByFeatureFilteredShader(featureIndices: number[], opacity: number, featureIndexProp: string, borderWidth?: number): string;
 /**
  * Generate a shader for random-per-point encoding with no feature selection.
  * Each point gets a pseudo-random color based on its index.
@@ -100,7 +100,7 @@ export function getRandomByFeatureFilteredShader(featureIndices: number[], opaci
  * @param {string} pointIndexProp The property name for the point index in the shader.
  * @returns {string} A GLSL shader string.
  */
-export function getRandomPerPointShader(opacity: number, featureIndexProp: string, pointIndexProp: string): string;
+export function getRandomPerPointShader(opacity: number, featureIndexProp: string, pointIndexProp: string, borderWidth?: number): string;
 /**
  * Generate a shader for random-per-point encoding with feature selection.
  * Selected points get a pseudo-random color; unselected get the default color.
@@ -111,7 +111,7 @@ export function getRandomPerPointShader(opacity: number, featureIndexProp: strin
  * @param {string} pointIndexProp The property name for the point index in the shader.
  * @returns {string} A GLSL shader string.
  */
-export function getRandomPerPointWithSelectionShader(featureIndices: number[], defaultColor: [number, number, number], opacity: number, featureIndexProp: string, pointIndexProp: string): string;
+export function getRandomPerPointWithSelectionShader(featureIndices: number[], defaultColor: [number, number, number], opacity: number, featureIndexProp: string, pointIndexProp: string, borderWidth?: number): string;
 /**
  * Generate a shader for random-per-point encoding with feature selection
  * and featureFilterMode='featureSelection' (hide unselected points).
@@ -121,6 +121,6 @@ export function getRandomPerPointWithSelectionShader(featureIndices: number[], d
  * @param {string} pointIndexProp The property name for the point index in the shader.
  * @returns {string} A GLSL shader string.
  */
-export function getRandomPerPointFilteredShader(featureIndices: number[], opacity: number, featureIndexProp: string, pointIndexProp: string): string;
+export function getRandomPerPointFilteredShader(featureIndices: number[], opacity: number, featureIndexProp: string, pointIndexProp: string, borderWidth?: number): string;
 export function getPointsShader(layerCoordination: any): string;
 //# sourceMappingURL=shader-utils.d.ts.map

package/dist-tsc/shader-utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"shader-utils.d.ts","sourceRoot":"","sources":["../src/shader-utils.js"],"names":[],"mappings":"AAwCA;;;;;;GAMG;AACH,wDAJW,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,WACxB,MAAM,GACJ,MAAM,CAUlB;AAGD;;;;;;;;;GASG;AACH,qEAPW,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,WACxB,MAAM,kBACN,MAAM,EAAE,gBACR,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,oBACxB,MAAM,GACJ,MAAM,CA4BlB;AAGD;;;;;;;;GAQG;AACH,gEANW,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,WACxB,MAAM,kBACN,MAAM,EAAE,oBACR,MAAM,GACJ,MAAM,CA0BlB;AAMD;;;;;;;GAOG;AACH,+DAJW,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,WACxB,MAAM,GACJ,MAAM,CAUlB;AAED;;;;;;;;;;;;;;GAcG;AACH,oEAXW,MAAM,EAAE,iBACR,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,eAE1B,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,gBAExB,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,WAExB,MAAM,oBACN,MAAM,GACJ,MAAM,CA+BlB;AAED;;;;;;;;;;GAUG;AACH,+DARW,MAAM,EAAE,iBACR,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,eAE1B,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,WACxB,MAAM,oBACN,MAAM,GACJ,MAAM,CAoClB;AAMD;;;;;;GAMG;AACH,kDAJW,MAAM,oBACN,MAAM,GACJ,MAAM,CAkBlB;AAED;;;;;;;;;GASG;AACH,sEANW,MAAM,EAAE,gBACR,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,WACxB,MAAM,oBACN,MAAM,GACJ,MAAM,CAkClB;AAED;;;;;;;GAOG;AACH,iEALW,MAAM,EAAE,WACR,MAAM,oBACN,MAAM,GACJ,MAAM,CA8BlB;AAuBD;;;;;;;GAOG;AACH,iDALW,MAAM,oBACN,MAAM,kBACN,MAAM,GACJ,MAAM,CAelB;AAED;;;;;;;;;GASG;AACH,qEAPW,MAAM,EAAE,gBACR,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,WACxB,MAAM,oBACN,MAAM,kBACN,MAAM,GACJ,MAAM,CAgClB;AAED;;;;;;;;GAQG;AACH,gEANW,MAAM,EAAE,WACR,MAAM,oBACN,MAAM,kBACN,MAAM,GACJ,MAAM,CA8BlB;AAGD,gEAwKC"}
+{"version":3,"file":"shader-utils.d.ts","sourceRoot":"","sources":["../src/shader-utils.js"],"names":[],"mappings":"AAoDA;;;;;;GAMG;AACH,wDAJW,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,WACxB,MAAM,yBACJ,MAAM,CAWlB;AAGD;;;;;;;;;GASG;AACH,qEAPW,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,WACxB,MAAM,kBACN,MAAM,EAAE,gBACR,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,oBACxB,MAAM,yBACJ,MAAM,CA8BlB;AAGD;;;;;;;;GAQG;AACH,gEANW,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,WACxB,MAAM,kBACN,MAAM,EAAE,oBACR,MAAM,yBACJ,MAAM,CA2BlB;AAMD;;;;;;;GAOG;AACH,+DAJW,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,WACxB,MAAM,yBACJ,MAAM,CAWlB;AAED;;;;;;;;;;;;;;GAcG;AACH,oEAXW,MAAM,EAAE,iBACR,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,eAE1B,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,gBAExB,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,WAExB,MAAM,oBACN,MAAM,yBACJ,MAAM,CAsClB;AAED;;;;;;;;;;GAUG;AACH,+DARW,MAAM,EAAE,iBACR,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,eAE1B,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,WACxB,MAAM,oBACN,MAAM,yBACJ,MAAM,CAqClB;AAMD;;;;;;GAMG;AACH,kDAJW,MAAM,oBACN,MAAM,yBACJ,MAAM,CAmBlB;AAED;;;;;;;;;GASG;AACH,sEANW,MAAM,EAAE,gBACR,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,WACxB,MAAM,oBACN,MAAM,yBACJ,MAAM,CAoClB;AAED;;;;;;;GAOG;AACH,iEALW,MAAM,EAAE,WACR,MAAM,oBACN,MAAM,yBACJ,MAAM,CAoClB;AAuBD;;;;;;;GAOG;AACH,iDALW,MAAM,oBACN,MAAM,kBACN,MAAM,yBACJ,MAAM,CAqBlB;AAED;;;;;;;;;GASG;AACH,qEAPW,MAAM,EAAE,gBACR,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,WACxB,MAAM,oBACN,MAAM,kBACN,MAAM,yBACJ,MAAM,CAkClB;AAED;;;;;;;;GAQG;AACH,gEANW,MAAM,EAAE,WACR,MAAM,oBACN,MAAM,kBACN,MAAM,yBACJ,MAAM,CA+BlB;AAGD,gEAkLC"}