feat: Color legend in the layer-bar (#693)

Author: aranega

src/layer/annotation/index.ts

@@ -48,7 +48,10 @@ import {
   TrackableBoolean,
   TrackableBooleanCheckbox,
 } from "#src/trackable_boolean.js";
-import { makeCachedLazyDerivedWatchableValue } from "#src/trackable_value.js";
+import {
+  makeCachedLazyDerivedWatchableValue,
+  observeWatchable,
+} from "#src/trackable_value.js";
 import type {
   AnnotationLayerView,
   MergedAnnotationStates,
@@ -731,8 +734,37 @@ export class AnnotationUserLayer extends Base {
     return x;
   }
 
+  observeLayerColor(callback: () => void) {
+    const disposer = super.observeLayerColor(callback);
+    const subDisposer = observeWatchable(
+      callback,
+      this.annotationDisplayState.color,
+    );
+    const shaderDisposer = observeWatchable(
+      callback,
+      this.annotationDisplayState.shader,
+    );
+    return () => {
+      disposer();
+      subDisposer();
+      shaderDisposer();
+    };
+  }
+
+  get automaticLayerBarColors() {
+    const shaderHasDefaultColor =
+      this.annotationDisplayState.shader.value.includes("defaultColor");
+    if (shaderHasDefaultColor && this.annotationDisplayState.color.value) {
+      const [r, g, b] = this.annotationDisplayState.color.value;
+      return [`rgb(${r * 255}, ${g * 255}, ${b * 255})`];
+    }
+
+    return undefined;
+  }
+
   static type = "annotation";
   static typeAbbreviation = "ann";
+  static supportsLayerBarColorSyncOption = true;
 }
 
 function makeShaderCodeWidget(layer: AnnotationUserLayer) {

src/layer/index.ts

@@ -185,13 +185,26 @@ export class UserLayer extends RefCounted {
   }
 
   static supportsPickOption = false;
+  static supportsLayerBarColorSyncOption = false;
 
   pick = new TrackableBoolean(true, true);
 
   selectionState: UserLayerSelectionState;
 
   messages = new MessageList();
 
+  observeLayerColor(_: () => void): () => void {
+    return () => {};
+  }
+
+  get automaticLayerBarColors(): string[] | undefined {
+    return [];
+  }
+
+  get layerBarColors(): string[] | undefined {
+    return this.automaticLayerBarColors;
+  }
+
   initializeSelectionState(state: this["selectionState"]) {
     state.generation = -1;
     state.localPositionValid = false;
@@ -740,6 +753,28 @@ export class ManagedUserLayer extends RefCounted {
     }
   }
 
+  get layerBarColors(): string[] | undefined {
+    const userLayer = this.layer;
+    return userLayer?.layerBarColors;
+  }
+
+  observeLayerColor(callback: () => void): () => void {
+    const userLayer = this.layer;
+    if (userLayer !== null) {
+      return userLayer.observeLayerColor(callback);
+    }
+    return () => {};
+  }
+
+  get supportsLayerBarColorSyncOption() {
+    const userLayer = this.layer;
+    return (
+      userLayer !== null &&
+      (userLayer.constructor as typeof UserLayer)
+        .supportsLayerBarColorSyncOption
+    );
+  }
+
   /**
    * If layer is not null, tranfers ownership of a reference.
    */

src/layer/segmentation/index.ts

@@ -45,7 +45,7 @@ import {
   RenderScaleHistogram,
   trackableRenderScaleTarget,
 } from "#src/render_scale_statistics.js";
-import { SegmentColorHash } from "#src/segment_color.js";
+import { getCssColor, SegmentColorHash } from "#src/segment_color.js";
 import type {
   SegmentationColorGroupState,
   SegmentationDisplayState,
@@ -54,6 +54,7 @@ import type {
 import {
   augmentSegmentId,
   bindSegmentListWidth,
+  getBaseObjectColor,
   makeSegmentWidget,
   maybeAugmentSegmentId,
   registerCallbackWhenSegmentationDisplayStateChanged,
@@ -95,6 +96,7 @@ import {
   IndirectWatchableValue,
   makeCachedDerivedWatchableValue,
   makeCachedLazyDerivedWatchableValue,
+  observeWatchable,
   registerNestedSync,
   TrackableValue,
   WatchableValue,
@@ -131,6 +133,8 @@ import { makeWatchableShaderError } from "#src/webgl/dynamic_shader.js";
 import type { DependentViewContext } from "#src/widget/dependent_view_widget.js";
 import { registerLayerShaderControlsTool } from "#src/widget/shader_controls.js";
 
+const MAX_LAYER_BAR_UI_INDICATOR_COLORS = 6;
+
 export class SegmentationUserLayerGroupState
   extends RefCounted
   implements SegmentationGroupState
@@ -539,6 +543,7 @@ class SegmentationUserLayerDisplayState implements SegmentationDisplayState {
   baseSegmentColoring = new TrackableBoolean(false, false);
   baseSegmentHighlighting = new TrackableBoolean(false, false);
   useTempSegmentStatedColors2d: SharedWatchableValue<boolean>;
+  hasVolume = new TrackableBoolean(false, false);
 
   filterBySegmentLabel: (id: bigint) => void;
 
@@ -746,6 +751,7 @@ export class SegmentationUserLayer extends Base {
     const isGroupRoot =
       this.displayState.linkedSegmentationGroup.root.value === this;
     let updatedGraph: SegmentationGraphSource | undefined;
+    let hasVolume = false;
     for (const loadedSubsource of subsources) {
       if (this.addStaticAnnotations(loadedSubsource)) continue;
       const { volume, mesh, segmentPropertyMap, segmentationGraph, local } =
@@ -758,6 +764,7 @@ export class SegmentationUserLayer extends Base {
             );
             continue;
         }
+        hasVolume = true;
         loadedSubsource.activate(
           () =>
             loadedSubsource.addRenderLayer(
@@ -880,6 +887,7 @@ export class SegmentationUserLayer extends Base {
         updatedSegmentPropertyMaps,
       );
     this.displayState.originalSegmentationGroupState.graph.value = updatedGraph;
+    this.displayState.hasVolume.value = hasVolume;
   }
 
   getLegacyDataSourceSpecifications(
@@ -1287,9 +1295,90 @@ export class SegmentationUserLayer extends Base {
     );
   }
 
+  observeLayerColor(callback: () => void) {
+    const disposer = super.observeLayerColor(callback);
+    const defaultColorDisposer = observeWatchable(
+      callback,
+      this.displayState.segmentDefaultColor,
+    );
+    const visibleSegmentDisposer =
+      this.displayState.segmentationGroupState.value.visibleSegments.changed.add(
+        callback,
+      );
+    const colorHashChangeDisposer =
+      this.displayState.segmentationColorGroupState.value.segmentColorHash.changed.add(
+        callback,
+      );
+    const showAllByDefaultDisposer =
+      this.displayState.ignoreNullVisibleSet.changed.add(callback);
+    const hasVolumeDisposer = this.displayState.hasVolume.changed.add(callback);
+    return () => {
+      disposer();
+      defaultColorDisposer();
+      visibleSegmentDisposer();
+      colorHashChangeDisposer();
+      showAllByDefaultDisposer();
+      hasVolumeDisposer();
+    };
+  }
+
+  get automaticLayerBarColors() {
+    const { displayState } = this;
+    const visibleSegmentsSet =
+      displayState.segmentationGroupState.value.visibleSegments;
+    const fixedColor = displayState.segmentDefaultColor.value;
+
+    const noVisibleSegments = visibleSegmentsSet.size === 0;
+    const tooManyVisibleSegments =
+      visibleSegmentsSet.size > MAX_LAYER_BAR_UI_INDICATOR_COLORS;
+    const hasMappedColors =
+      displayState.segmentationColorGroupState.value.segmentStatedColors.size >
+      0;
+    const isFixedColorOnly = fixedColor !== undefined && !hasMappedColors;
+    const showAllByDefault = displayState.ignoreNullVisibleSet.value;
+    const hasVolume = displayState.hasVolume.value;
+
+    if (noVisibleSegments) {
+      if (!showAllByDefault || !hasVolume) return []; // No segments visible
+      if (isFixedColorOnly) return [getCssColor(fixedColor)];
+      return undefined; // Rainbow colors
+    }
+    if (isFixedColorOnly) {
+      return [getCssColor(fixedColor)]; // All segments show as one color
+    }
+
+    // Because manually mapped colors are not guaranteed to be unique,
+    // we need to actually check all the visible segments if
+    // manually mapped colors are used
+    if (!hasMappedColors && tooManyVisibleSegments) {
+      return undefined; // Too many segments to show
+    }
+
+    const visibleSegments = [...visibleSegmentsSet];
+    const colors = visibleSegments.map((id) => {
+      const color = getCssColor(getBaseObjectColor(displayState, id));
+      return { color, id };
+    });
+
+    // Sort the colors by their segment ID
+    // Otherwise, the order is random which is a bit confusing in the UI
+    colors.sort((a, b) => {
+      const aId = a.id;
+      const bId = b.id;
+      return aId < bId ? -1 : aId > bId ? 1 : 0;
+    });
+
+    const uniqueColors = [...new Set(colors.map((color) => color.color))];
+    if (uniqueColors.length > MAX_LAYER_BAR_UI_INDICATOR_COLORS) {
+      return undefined; // Too many colors to show
+    }
+    return uniqueColors;
+  }
+
   static type = "segmentation";
   static typeAbbreviation = "seg";
   static supportsPickOption = true;
+  static supportsLayerBarColorSyncOption = true;
 }
 
 registerLayerControls(SegmentationUserLayer);

src/ui/layer_bar.css

@@ -62,15 +62,11 @@
   border-color: #daa520;
 }
 
-.neuroglancer-layer-item[data-pick="true"] .neuroglancer-layer-item-label {
-  background-color: #939;
-}
-
 .neuroglancer-layer-item-label {
   display: inline-block;
   position: relative;
-  background-color: #222;
-  padding-right: 3px;
+  padding: 0 1px;
+  z-index: 1;
 }
 
 .neuroglancer-layer-item-number {
@@ -134,6 +130,26 @@
   align-items: center;
 }
 
+.neuroglancer-layer-item-label-wrapper {
+  position: relative;
+  overflow: hidden;
+  margin: 0 2px;
+}
+
+.neuroglancer-layer-item-label-color {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  width: 100%;
+  height: 100%;
+  z-index: 0;
+}
+
+.neuroglancer-layer-item-label-color[data-color="multi"] {
+  transform: scale(1.2);
+  filter: blur(8px);
+}
+
 .neuroglancer-layer-item-value {
   grid-row: 1;
   grid-column: 1;