@vitessce/neuroglancer 3.9.6 → 3.9.7

package/src/NeuroglancerSubscriber.js

@@ -57,6 +57,8 @@ 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',
@@ -281,13 +283,40 @@ export function NeuroglancerSubscriber(props) {
       segmentationChannelScopesByLayer?.[layerScope]?.forEach((channelScope) => {
         const { obsSets: layerSets, obsIndex: layerIndex } = obsSegmentationsSetsData
           ?.[layerScope]?.[channelScope] || {};
-        if (layerSets && layerIndex) {
-          const {
-            obsSetColor,
-            obsColorEncoding,
-            obsSetSelection,
-            additionalObsSets,
-          } = segmentationChannelCoordination[0][layerScope][channelScope];
+        const {
+          obsSetColor,
+          obsColorEncoding,
+          obsSetSelection,
+          additionalObsSets,
+          spatialChannelColor,
+        } = segmentationChannelCoordination[0][layerScope][channelScope];
+
+        if (obsColorEncoding === 'spatialChannelColor') {
+          // All segments get the same static channel color
+          if (layerIndex && spatialChannelColor) {
+            const hex = rgbToHex(spatialChannelColor);
+            const ngCellColors = {};
+
+            if (obsSetSelection?.length > 0) {
+              // Only color the segments belonging to selected sets.
+              const mergedCellSets = mergeObsSets(layerSets, additionalObsSets);
+              const selectedIds = new Set();
+              obsSetSelection.forEach((setPath) => {
+                const rootNode = mergedCellSets?.tree?.find(n => n.name === setPath[0]);
+                const leafNode = setPath.length > 1
+                  ? rootNode?.children?.find(n => n.name === setPath[1])
+                  : rootNode;
+                leafNode?.set?.forEach(([id]) => selectedIds.add(String(id)));
+              });
+              layerIndex.forEach((id) => {
+                if (selectedIds.has(String(id))) {
+                  ngCellColors[id] = hex;
+                }
+              });
+            }
+            result[layerScope][channelScope] = ngCellColors;
+          }
+        } else if (layerSets && layerIndex) {
           const mergedCellSets = mergeObsSets(layerSets, additionalObsSets);
           const cellColors = getCellColors({
             cellSets: mergedCellSets,
@@ -301,13 +330,6 @@ export function NeuroglancerSubscriber(props) {
           cellColors.forEach((color, i) => {
             ngCellColors[i] = rgbToHex(color);
           });
-          /* // TODO: Is this necessary?
-          const obsColorIndices = treeToCellSetColorIndicesBySetNames(
-            mergedLayerSets,
-            obsSetSelection,
-            obsSetColor,
-          );
-          */
           result[layerScope][channelScope] = ngCellColors;
         }
       });
@@ -512,6 +534,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];
@@ -536,14 +560,16 @@ export function NeuroglancerSubscriber(props) {
     setCellColorEncoding, setCellSetColor, setCellSetSelection,
   ]);
 
-  // Get the ultimate cellColorMapping to pass to NeuroglancerComp as a prop.
-  // For now, we take the first layer and channel for cell colors.
-  const cellColorMapping = useMemo(() => (segmentationColorMapping
-    ?.[segmentationLayerScopes?.[0]]
-    ?.[segmentationChannelScopesByLayer?.[segmentationLayerScopes?.[0]]?.[0]]
-    ?? {}
-  ), [segmentationColorMapping]);
+  // Get the ultimate cellColorMapping for each layer to pass to NeuroglancerComp as a prop.
 
+  const cellColorMappingByLayer = useMemo(() => {
+    const result = {};
+    segmentationLayerScopes?.forEach((layerScope) => {
+      const channelScope = segmentationChannelScopesByLayer?.[layerScope]?.[0];
+      result[layerScope] = segmentationColorMapping?.[layerScope]?.[channelScope] ?? {};
+    });
+    return result;
+  }, [segmentationColorMapping, segmentationLayerScopes, segmentationChannelScopesByLayer]);
 
   // TODO: try to simplify using useMemoCustomComparison?
   // This would allow us to refactor a lot of the checking-for-changes logic into a comparison function,
@@ -556,9 +582,6 @@ export function NeuroglancerSubscriber(props) {
       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?
@@ -695,20 +718,23 @@ export function NeuroglancerSubscriber(props) {
       lastInteractionSource.current = null;
     }
 
-    const newLayer0 = {
-      ...prevLayer,
-      segments: nextSegments,
-      segmentColors: cellColorMapping,
-    };
-
+    const updatedLayers = current?.layers?.map((layer, idx) => {
+      const layerScope = segmentationLayerScopes?.[idx];
+      const layerColorMapping = cellColorMappingByLayer?.[layerScope] ?? {};
+      const layerSegments = Object.keys(layerColorMapping);
+      return {
+        ...layer,
+        segments: layerSegments,
+        segmentColors: layerColorMapping,
+      };
+    }) ?? [];
 
     const updated = {
       ...current,
       projectionScale: nextProjectionScale,
       projectionOrientation: nextOrientation,
       position: nextPosition,
-      layers: prevSegments.length === 0 ? [newLayer0, ...(current?.layers?.slice(1)
-        || [])] : current?.layers,
+      layers: updatedLayers,
     };
 
     latestViewerStateRef.current = updated;
@@ -724,7 +750,7 @@ export function NeuroglancerSubscriber(props) {
     };
 
     return updated;
-  }, [cellColorMapping, spatialZoom, spatialRotationX, spatialRotationY,
+  }, [cellColorMappingByLayer, spatialZoom, spatialRotationX, spatialRotationY,
     spatialRotationZ, spatialTargetX, spatialTargetY, initalViewerState,
     latestViewerStateIteration]);
 
@@ -741,6 +767,7 @@ export function NeuroglancerSubscriber(props) {
   // console.log(derivedViewerState);
 
   return (
+
     <TitleInfo
       title={title}
       info={subtitle}
@@ -753,30 +780,32 @@ export function NeuroglancerSubscriber(props) {
       isReady={isReady}
       errors={errors}
       withPadding={false}
+      guideUrl={GUIDE_URL}
     >
-      <div style={{ position: 'relative', width: '100%', height: '100%' }} ref={containerRef}>
-        <div style={{ position: 'absolute', top: 0, right: 0, zIndex: 50 }}>
-          <MultiLegend
-            theme="dark"
-            maxHeight={ngHeight}
-            segmentationLayerScopes={segmentationLayerScopes}
-            segmentationLayerCoordination={segmentationLayerCoordination}
-            segmentationChannelScopesByLayer={segmentationChannelScopesByLayer}
-            segmentationChannelCoordination={segmentationChannelCoordination}
-          />
-        </div>
+      {hasLayers ? (
+        <div style={{ position: 'relative', width: '100%', height: '100%' }} ref={containerRef}>
+          <div style={{ position: 'absolute', top: 0, right: 0, zIndex: 50 }}>
+            <MultiLegend
+              theme="dark"
+              maxHeight={ngHeight}
+              segmentationLayerScopes={segmentationLayerScopes}
+              segmentationLayerCoordination={segmentationLayerCoordination}
+              segmentationChannelScopesByLayer={segmentationChannelScopesByLayer}
+              segmentationChannelCoordination={segmentationChannelCoordination}
+            />
+          </div>
 
-        {hasLayers ? (
           <NeuroglancerComp
             classes={classes}
             onSegmentClick={onSegmentClick}
             onSelectHoveredCoords={onSegmentHighlight}
             viewerState={derivedViewerState}
-            cellColorMapping={cellColorMapping}
+            cellColorMapping={cellColorMappingByLayer}
             setViewerState={handleStateUpdate}
           />
-        ) : null}
-      </div>
+        </div>
+      ) : null}
     </TitleInfo>
+
   );
 }

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/use-memo-custom-comparison.js

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