@vitessce/neuroglancer 3.9.4 → 3.9.6

package/dist/index.js

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

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

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

package/dist-tsc/NeuroglancerSubscriber.js

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

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

@@ -1,22 +1,14 @@
-export function extractDataTypeEntities(loaders: any, dataset: any, dataType: any): {
-    key: any;
-    type: string;
-    fileUid: any;
-    layout: string;
-    url: any;
-    source: string | undefined;
-    name: any;
-    dimensions: {
-        x: [number, "nm"];
-        y: [number, "nm"];
-        z: [number, "nm"];
-    };
-    position: any[];
-    projectionOrientation: any[];
-    projectionScale: any;
-    crossSectionScale: any;
-}[];
-export function useExtractOptionsForNg(loaders: any, dataset: any, dataType: any): any[];
+/**
+   * Normalize dimensionX/Y/Z to nanometers.
+   * @param {object} opts
+   * @returns {{ x:[number,'nm'], y:[number,'nm'], z:[number,'nm'] }}
+   */
+export function normalizeDimensionsToNanometers(opts: object): {
+    x: [number, "nm"];
+    y: [number, "nm"];
+    z: [number, "nm"];
+};
+export function toNgLayerName(dataType: any, layerScope: any, channelScope?: null): string;
 /**
  * Get the parameters for NG's viewerstate.
  * @param {object} loaders The object mapping
@@ -29,12 +21,18 @@ export function useExtractOptionsForNg(loaders: any, dataset: any, dataType: any
 /**
  * @returns [viewerState]
  */
-export function useNeuroglancerViewerState(loaders: any, dataset: any, isRequired: any, coordinationSetters: any, initialCoordinationValues: any, matchOn: any): any[];
+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 namespace DEFAULT_NG_PROPS {
     let layout: string;
     let position: number[];
     let projectionOrientation: number[];
     let projectionScale: number;
     let crossSectionScale: number;
+    namespace dimensions {
+        let x: (string | number)[];
+        let y: (string | number)[];
+        let z: (string | number)[];
+    }
+    let layers: never[];
 }
 //# sourceMappingURL=data-hook-ng-utils.d.ts.map

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":"AAgEA;;;;;;;;;WArBmB,CAAC,MAAM,EAAC,IAAI,CAAC;WAAI,CAAC,MAAM,EAAC,IAAI,CAAC;WAAI,CAAC,MAAM,EAAC,IAAI,CAAC;;;;;;IA6DjE;AAED,yFAyBC;AAGD;;;;;;;;GAQG;AACH;;GAEG;AACH,uKAKC"}
+{"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"}

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

@@ -1,15 +1,23 @@
-import { useMemo } from 'react';
 import { DataType } from '@vitessce/constants-internal';
+import { cloneDeep } from 'lodash-es';
+import { useMemoCustomComparison, customIsEqualForInitialViewerState } from './use-memo-custom-comparison.js';
+import { getPointsShader } from './shader-utils.js';
 export const DEFAULT_NG_PROPS = {
     layout: '3d',
     position: [0, 0, 0],
     projectionOrientation: [0, 0, 0, 1],
     projectionScale: 1024,
     crossSectionScale: 1,
+    dimensions: {
+        x: [1, 'nm'],
+        y: [1, 'nm'],
+        z: [1, 'nm'],
+    },
+    layers: [],
 };
 function toPrecomputedSource(url) {
     if (!url) {
-        return undefined;
+        throw new Error('toPrecomputedSource: URL is required');
     }
     return `precomputed://${url}`;
 }
@@ -36,8 +44,8 @@ function isInNanometerRange(value, unit, minNm = 1, maxNm = 100) {
    * @param {object} opts
    * @returns {{ x:[number,'nm'], y:[number,'nm'], z:[number,'nm'] }}
    */
-function normalizeDimensionsToNanometers(opts) {
-    const { dimensionUnit, dimensionX, dimensionY, dimensionZ } = opts;
+export function normalizeDimensionsToNanometers(opts) {
+    const { dimensionUnit, dimensionX, dimensionY, dimensionZ, ...otherOptions } = opts;
     if (!dimensionUnit || !dimensionX || !dimensionY || !dimensionZ) {
         console.warn('Missing dimension info');
     }
@@ -48,70 +56,25 @@ function normalizeDimensionsToNanometers(opts) {
         console.warn('Dimension was converted to nm units');
     }
     return {
-        x: xNm ? [dimensionX, dimensionUnit] : [1, 'nm'],
-        y: yNm ? [dimensionY, dimensionUnit] : [1, 'nm'],
-        z: zNm ? [dimensionZ, dimensionUnit] : [1, 'nm'],
+        // The dimension-related fields are formatted differently in the fileDef.options
+        // vs. what the viewerState expects.
+        dimensions: {
+            x: xNm ? [dimensionX, dimensionUnit] : [1, 'nm'],
+            y: yNm ? [dimensionY, dimensionUnit] : [1, 'nm'],
+            z: zNm ? [dimensionZ, dimensionUnit] : [1, 'nm'],
+        },
+        // The non-dimension-related options can be passed through without modification.
+        ...otherOptions,
     };
 }
-export function extractDataTypeEntities(loaders, dataset, dataType) {
-    const datasetEntry = loaders?.[dataset];
-    const internMap = datasetEntry?.loaders?.[dataType];
-    if (!internMap || typeof internMap.entries !== 'function')
-        return [];
-    return Array.from(internMap.entries()).map(([key, loader]) => {
-        const url = loader?.url ?? loader?.dataSource?.url ?? undefined;
-        const fileUid = key?.fileUid
-            ?? loader?.coordinationValues?.fileUid
-            ?? undefined;
-        const { position, projectionOrientation, projectionScale, crossSectionScale } = loader?.options ?? {};
-        const isPrecomputed = loader?.fileType.includes('precomputed');
-        if (!isPrecomputed) {
-            console.warn('Filetype needs to be precomputed');
-        }
-        return {
-            key,
-            type: 'segmentation',
-            fileUid,
-            layout: DEFAULT_NG_PROPS.layout,
-            url,
-            source: toPrecomputedSource(url),
-            name: fileUid ?? key?.name ?? 'segmentation',
-            // For precomputed: nm is the unit used
-            dimensions: normalizeDimensionsToNanometers(loader?.options),
-            // If not provided, no error, but difficult to see the data
-            position: Array.isArray(position) && position.length === 3
-                ? position : DEFAULT_NG_PROPS.position,
-            // If not provided, will have a default orientation
-            projectionOrientation: Array.isArray(projectionOrientation)
-                && projectionOrientation.length === 4
-                ? projectionOrientation : DEFAULT_NG_PROPS.projectionOrientation,
-            projectionScale: Number.isFinite(projectionScale)
-                ? projectionScale : DEFAULT_NG_PROPS.projectionScale,
-            crossSectionScale: Number.isFinite(crossSectionScale)
-                ? crossSectionScale : DEFAULT_NG_PROPS.crossSectionScale,
-        };
-    });
-}
-export function useExtractOptionsForNg(loaders, dataset, dataType) {
-    const extractedEntities = useMemo(() => extractDataTypeEntities(loaders, dataset, dataType), [loaders, dataset, dataType]);
-    const layers = useMemo(() => extractedEntities
-        .filter(t => t.source)
-        .map(t => ({
-        type: t.type,
-        source: t.source,
-        segments: [],
-        name: t.name || 'segmentation',
-    })), [extractedEntities]);
-    const viewerState = useMemo(() => ({
-        dimensions: extractedEntities[0]?.dimensions,
-        position: extractedEntities[0]?.position,
-        crossSectionScale: extractedEntities[0]?.crossSectionScale,
-        projectionOrientation: extractedEntities[0]?.projectionOrientation,
-        projectionScale: extractedEntities[0]?.projectionScale,
-        layers,
-        layout: extractedEntities[0].layout,
-    }));
-    return [viewerState];
+export function toNgLayerName(dataType, layerScope, channelScope = null) {
+    if (dataType === DataType.OBS_SEGMENTATIONS) {
+        return `obsSegmentations-${layerScope}-${channelScope}`;
+    }
+    if (dataType === DataType.OBS_POINTS) {
+        return `obsPoints-${layerScope}`;
+    }
+    throw new Error(`Unsupported data type: ${dataType}`);
 }
 /**
  * Get the parameters for NG's viewerstate.
@@ -125,6 +88,111 @@ export function useExtractOptionsForNg(loaders, dataset, dataType) {
 /**
  * @returns [viewerState]
  */
-export function useNeuroglancerViewerState(loaders, dataset, isRequired, coordinationSetters, initialCoordinationValues, matchOn) {
-    return useExtractOptionsForNg(loaders, dataset, DataType.OBS_SEGMENTATIONS, matchOn);
+export function useNeuroglancerViewerState(theme, segmentationLayerScopes, segmentationChannelScopesByLayer, segmentationLayerCoordination, segmentationChannelCoordination, obsSegmentationsUrls, obsSegmentationsData, pointLayerScopes, pointLayerCoordination, obsPointsUrls, obsPointsData, pointMultiIndicesData) {
+    const viewerState = useMemoCustomComparison(() => {
+        let result = cloneDeep(DEFAULT_NG_PROPS);
+        // ======= SEGMENTATIONS =======
+        // Iterate over segmentation layers and channels.
+        segmentationLayerScopes.forEach((layerScope) => {
+            const layerCoordination = segmentationLayerCoordination[0][layerScope];
+            const channelScopes = segmentationChannelScopesByLayer[layerScope] || [];
+            const layerData = obsSegmentationsData[layerScope];
+            const layerUrl = obsSegmentationsUrls[layerScope]?.[0]?.url;
+            if (layerUrl && layerData) {
+                const { spatialLayerVisible, } = layerCoordination || {};
+                channelScopes.forEach((channelScope) => {
+                    const channelCoordination = segmentationChannelCoordination[0]?.[layerScope]?.[channelScope];
+                    const { spatialChannelVisible, } = channelCoordination || {};
+                    result = {
+                        ...result,
+                        layers: [
+                            ...result.layers,
+                            {
+                                type: 'segmentation',
+                                source: toPrecomputedSource(layerUrl),
+                                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 ?? {}),
+                            },
+                        ],
+                    };
+                });
+            }
+        });
+        // ======= POINTS =======
+        // Iterate over point layers.
+        pointLayerScopes.forEach((layerScope) => {
+            const layerCoordination = pointLayerCoordination[0][layerScope];
+            const layerData = obsPointsData[layerScope];
+            const layerUrl = obsPointsUrls[layerScope]?.[0]?.url;
+            const featureIndex = pointMultiIndicesData[layerScope]?.featureIndex;
+            if (layerUrl && layerData) {
+                const { spatialLayerVisible, spatialLayerOpacity, obsColorEncoding, spatialLayerColor, featureSelection, featureFilterMode, featureColor, } = layerCoordination || {};
+                // Dynamically construct the shader based on the color encoding
+                // and other coordination values.
+                const shader = getPointsShader({
+                    theme,
+                    featureIndex,
+                    spatialLayerOpacity,
+                    obsColorEncoding,
+                    spatialLayerColor,
+                    featureSelection,
+                    featureFilterMode,
+                    featureColor,
+                    featureIndexProp: layerData.neuroglancerOptions?.featureIndexProp,
+                    pointIndexProp: layerData.neuroglancerOptions?.pointIndexProp,
+                });
+                result = {
+                    ...result,
+                    layers: [
+                        ...result.layers,
+                        {
+                            type: 'annotation',
+                            source: {
+                                url: toPrecomputedSource(layerUrl),
+                                subsources: {
+                                    default: true,
+                                },
+                                enableDefaultSubsources: false,
+                            },
+                            tab: 'annotations',
+                            shader,
+                            name: toNgLayerName(DataType.OBS_POINTS, layerScope),
+                            visible: spatialLayerVisible,
+                            // Options from layerData.neuroglancerOptions
+                            // like projectionAnnotationSpacing:
+                            projectionAnnotationSpacing: layerData.neuroglancerOptions
+                                ?.projectionAnnotationSpacing ?? 1.0,
+                        },
+                    ],
+                    // TODO: is this needed?
+                    // The selected layer here will overwrite anything
+                    // that was previously specified.
+                    selectedLayer: {
+                        // size: ? // TODO:  is this needed?
+                        layer: toNgLayerName(DataType.OBS_POINTS, layerScope),
+                    },
+                };
+            }
+        });
+        return result;
+    }, {
+        theme,
+        segmentationLayerScopes,
+        segmentationChannelScopesByLayer,
+        segmentationLayerCoordination,
+        segmentationChannelCoordination,
+        obsSegmentationsUrls,
+        obsSegmentationsData,
+        pointLayerScopes,
+        pointLayerCoordination,
+        obsPointsUrls,
+        obsPointsData,
+        pointMultiIndicesData,
+    }, customIsEqualForInitialViewerState);
+    return viewerState;
 }