@vitessce/neuroglancer 3.9.5 → 3.9.7

package/src/ReactNeuroglancer.js

@@ -427,7 +427,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 = () => {
@@ -476,30 +476,36 @@ export default class Neuroglancer extends React.Component {
   };
 
   /* To add colors to the segments, turning unselected to grey  */
-  applyColorsAndVisibility = (cellColorMapping) => {
+  applyColorsAndVisibility = (cellColorMappingByLayer) => {
     if (!this.viewer) return;
-    // Track all ids we've ever seen so we can grey the ones
-    // that drop out of the current selection.
-    const selected = { ...(cellColorMapping || {}) }; // clone, don't mutate props
-    for (const id of Object.keys(selected)) this.allKnownIds.add(id);
-    // If empty on first call, seed from initial segmentColors (if present)
-    if (this.allKnownIds.size === 0) {
-      const init = this.props.viewerState?.layers?.[0]?.segmentColors || {};
-      for (const id of Object.keys(init)) this.allKnownIds.add(id);
-    }
-
-    // Build a full color table: selected keep their hex, others grey
-    const fullSegmentColors = {};
-    for (const id of this.allKnownIds) {
-      fullSegmentColors[id] = selected[id] || GREY_HEX;
-    }
-    // Patch layers with the new segmentColors (pose untouched)
+    // Build full color table per layer
     const baseLayers = (this.props.viewerState?.layers)
       ?? (this.viewer.state.toJSON().layers || []);
 
-    const newLayers = baseLayers.map((layer, idx) => {
-      // if only one layer, take that or check layer.type === 'segmentation'.
-      if (idx === 0 || layer?.type === 'segmentation') {
+    const newLayers = baseLayers.map((layer) => {
+      // Match layerScope by checking if the NG layer name contains the scope key.
+      // NG layer names are of the form:
+      // "obsSegmentations-init_A_obsSegmentations_0-init_A_obsSegmentations_0"
+      const layerScope = Object.keys(cellColorMappingByLayer).find(scope => layer.name?.includes(scope));
+
+      const selected = { ...(cellColorMappingByLayer[layerScope] || {}) };
+
+      // Track all known IDs for this layer scope
+      if (!this.allKnownIdsByLayer) this.allKnownIdsByLayer = {};
+      if (!this.allKnownIdsByLayer[layerScope]) {
+        this.allKnownIdsByLayer[layerScope] = new Set();
+      }
+      for (const id of Object.keys(selected)) {
+        this.allKnownIdsByLayer[layerScope].add(id);
+      }
+
+      // Build a full color table: selected keep their hex, others grey
+      const fullSegmentColors = {};
+      for (const id of this.allKnownIdsByLayer[layerScope] || []) {
+        fullSegmentColors[id] = selected[id] || GREY_HEX;
+      }
+
+      if (layer.type === 'segmentation') {
         return { ...layer, segmentColors: fullSegmentColors };
       }
       return layer;
@@ -624,7 +630,7 @@ export default class Neuroglancer extends React.Component {
   }
 
   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
@@ -702,8 +708,8 @@ export default class Neuroglancer extends React.Component {
       this.withoutEmitting(() => {
         const layers = Array.isArray(viewerState.layers) ? viewerState.layers : [];
         this.viewer.state.restoreState({ layers });
-        if (cellColorMapping && Object.keys(cellColorMapping).length) {
-          this.applyColorsAndVisibility(cellColorMapping);
+        if (cellColorMappingByLayer && Object.keys(cellColorMappingByLayer).length) {
+          this.applyColorsAndVisibility(cellColorMappingByLayer);
         }
       });
     }
@@ -712,12 +718,13 @@ export default class Neuroglancer extends React.Component {
     // this was to avid NG randomly assigning colors to the segments by resetting them
     const prevSize = prevProps.cellColorMapping
       ? Object.keys(prevProps.cellColorMapping).length : 0;
-    const currSize = cellColorMapping ? Object.keys(cellColorMapping).length : 0;
-    const mappingRefChanged = prevProps.cellColorMapping !== cellColorMapping;
+    const currSize = cellColorMappingByLayer
+      ? Object.keys(cellColorMappingByLayer).length : 0;
+    const mappingRefChanged = prevProps.cellColorMapping !== this.props.cellColorMapping;
     if (!this.didLayersChange(prevVS, viewerState)
       && (mappingRefChanged || prevSize !== currSize)) {
       this.withoutEmitting(() => {
-        this.applyColorsAndVisibility(cellColorMapping);
+        this.applyColorsAndVisibility(cellColorMappingByLayer);
       });
     }
 

package/src/data-hook-ng-utils.js

@@ -1,5 +1,7 @@
-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 = {
@@ -8,11 +10,17 @@ export const DEFAULT_NG_PROPS = {
   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}`;
 }
@@ -43,8 +51,14 @@ 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');
@@ -56,82 +70,28 @@ 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.
  * @param {object} loaders The object mapping
@@ -145,8 +105,148 @@ export function useExtractOptionsForNg(loaders, dataset, dataType) {
  * @returns [viewerState]
  */
 export function useNeuroglancerViewerState(
-  loaders, dataset, isRequired,
-  coordinationSetters, initialCoordinationValues, matchOn,
+  theme,
+  segmentationLayerScopes,
+  segmentationChannelScopesByLayer,
+  segmentationLayerCoordination,
+  segmentationChannelCoordination,
+  obsSegmentationsUrls,
+  obsSegmentationsData,
+  pointLayerScopes,
+  pointLayerCoordination,
+  obsPointsUrls,
+  obsPointsData,
+  pointMultiIndicesData,
 ) {
-  return useExtractOptionsForNg(loaders, dataset, DataType.OBS_SEGMENTATIONS, matchOn);
+  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;
 }