Color legend in the layer-bar

src/data_panel_layout.ts

@@ -100,6 +100,7 @@ export interface ViewerUIState
   inputEventBindings: InputEventBindings;
   crossSectionBackgroundColor: TrackableRGB;
   perspectiveViewBackgroundColor: TrackableRGB;
+  enableLayerColorWidget: TrackableBoolean;
 }
 
 export interface DataDisplayLayout extends RefCounted {
@@ -180,6 +181,7 @@ export function getCommonViewerState(viewer: ViewerUIState) {
     selectedLayer: viewer.selectedLayer,
     visibility: viewer.visibility,
     scaleBarOptions: viewer.scaleBarOptions,
+    enableLayerColorWidget: viewer.enableLayerColorWidget,
   };
 }
 

src/layer/annotation/index.ts

@@ -45,7 +45,10 @@ import { RenderLayerRole } from "#src/renderlayer.js";
 import type { SegmentationDisplayState } from "#src/segmentation_display_state/frontend.js";
 import type { TrackableBoolean } from "#src/trackable_boolean.js";
 import { 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,
@@ -713,8 +716,47 @@ 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 automaticLayerBarColor() {
+    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;
+  }
+
+  colorWidgetTooltip(): string | undefined {
+    const shaderHasDefaultColor =
+      this.annotationDisplayState.shader.value.includes("defaultColor");
+    if (shaderHasDefaultColor && this.annotationDisplayState.color.value) {
+      return `The color comes from the selected shader default color`;
+    }
+
+    return "Your shader code doesn't use the default color, we cannot determine which color you are using";
+  }
+
   static type = "annotation";
   static typeAbbreviation = "ann";
+  static supportsLayerBarColorSyncOption = true;
 }
 
 function makeShaderCodeWidget(layer: AnnotationUserLayer) {

src/layer/index.ts

@@ -185,13 +185,30 @@ 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 automaticLayerBarColor(): string | undefined {
+    return "";
+  }
+
+  get layerBarColor(): string | undefined {
+    return this.automaticLayerBarColor;
+  }
+
+  colorWidgetTooltip(): string | undefined {
+    return undefined;
+  }
+
   initializeSelectionState(state: this["selectionState"]) {
     state.generation = -1;
     state.localPositionValid = false;
@@ -740,6 +757,33 @@ export class ManagedUserLayer extends RefCounted {
     }
   }
 
+  get layerBarColor(): string | undefined {
+    const userLayer = this.layer;
+    return userLayer?.layerBarColor;
+  }
+
+  colorWidgetTooltip(): string | undefined {
+    const userLayer = this.layer;
+    return userLayer?.colorWidgetTooltip();
+  }
+
+  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

@@ -95,6 +95,7 @@ import {
   IndirectWatchableValue,
   makeCachedDerivedWatchableValue,
   makeCachedLazyDerivedWatchableValue,
+  observeWatchable,
   registerNestedSync,
   TrackableValue,
   WatchableValue,
@@ -1282,9 +1283,66 @@ 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,
+      );
+    return () => {
+      disposer();
+      defaultColorDisposer();
+      visibleSegmentDisposer();
+      colorHashChangeDisposer();
+    };
+  }
+
+  get automaticLayerBarColor() {
+    if (this.displayState.segmentDefaultColor.value) {
+      const [r, g, b] = this.displayState.segmentDefaultColor.value;
+      return `rgb(${r * 255}, ${g * 255}, ${b * 255})`;
+    }
+
+    const visibleSegments =
+      this.displayState.segmentationGroupState.value.visibleSegments;
+    if (visibleSegments.size === 1) {
+      const id = [...visibleSegments][0];
+      const color =
+        this.displayState.segmentationColorGroupState.value.segmentColorHash.computeCssColor(
+          id,
+        );
+      return color;
+    }
+
+    return undefined;
+  }
+
+  colorWidgetTooltip(): string {
+    if (this.displayState.segmentDefaultColor.value) {
+      return `The color comes from the manually selected color`;
+    }
+
+    const visibleSegments =
+      this.displayState.segmentationGroupState.value.visibleSegments;
+    if (visibleSegments.size === 1) {
+      const id = [...visibleSegments][0];
+      return `The color of the visible segment with id "${id}"`;
+    }
+    return "The segmentation layer has multiple segments visible";
+  }
+
   static type = "segmentation";
   static typeAbbreviation = "seg";
   static supportsPickOption = true;
+  static supportsLayerBarColorSyncOption = true;
 }
 
 registerLayerControls(SegmentationUserLayer);

src/layer_group_viewer.ts

@@ -102,6 +102,7 @@ export interface LayerGroupViewerState {
   visibleLayerRoles: WatchableSet<RenderLayerRole>;
   crossSectionBackgroundColor: TrackableRGB;
   perspectiveViewBackgroundColor: TrackableRGB;
+  enableLayerColorWidget: TrackableBoolean;
 }
 
 export interface LayerGroupViewerOptions {
@@ -381,6 +382,9 @@ export class LayerGroupViewer extends RefCounted {
   get scaleBarOptions() {
     return this.viewerState.scaleBarOptions;
   }
+  get enableLayerColorWidget() {
+    return this.viewerState.enableLayerColorWidget;
+  }
   layerPanel: LayerBar | undefined;
   layout: DataPanelLayoutContainer;
   toolBinder: LocalToolBinder<this>;

src/layer_groups_layout.ts

@@ -420,6 +420,7 @@ function getCommonViewerState(viewer: Viewer) {
     velocity: viewer.velocity.addRef(),
     crossSectionBackgroundColor: viewer.crossSectionBackgroundColor,
     perspectiveViewBackgroundColor: viewer.perspectiveViewBackgroundColor,
+    enableLayerColorWidget: viewer.enableLayerColorWidget,
   };
 }
 

src/ui/layer_bar.css

@@ -134,6 +134,101 @@
   align-items: center;
 }
 
+.neuroglancer-layer-color-value {
+  border-radius: 50%;
+  height: 10px;
+  width: 10px;
+}
+
+.neuroglancer-layer-item[data-color="fixed"] .neuroglancer-layer-color-value {
+  border-radius: 50%;
+  height: 10px;
+  width: 10px;
+}
+
+.neuroglancer-layer-item[data-color="rainbow"] .neuroglancer-layer-color-value {
+  position: relative;
+  border-radius: 50%;
+  height: 10px;
+  width: 10px;
+  overflow: hidden;
+}
+
+.neuroglancer-layer-item[data-color="rainbow"]
+  .neuroglancer-layer-color-value::before {
+  content: "";
+  position: absolute;
+  top: -17.5%;
+  left: -17.5%;
+  width: 135%;
+  height: 135%;
+  background: conic-gradient(
+    from 0deg,
+    hsl(0, 100%, 50%),
+    hsl(60, 100%, 50%),
+    hsl(120, 100%, 50%),
+    hsl(180, 100%, 50%),
+    hsl(240, 100%, 50%),
+    hsl(300, 100%, 50%),
+    hsl(360, 100%, 50%)
+  );
+  filter: blur(1px);
+  transform: scale(1.35);
+}
+
+.neuroglancer-layer-item[data-color="unsupported"]
+  .neuroglancer-layer-color-value {
+  background-image: linear-gradient(
+      45deg,
+      rgba(128, 128, 128, 1.5) 25%,
+      transparent 25%
+    ),
+    linear-gradient(-45deg, rgba(128, 128, 128, 1.5) 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, rgba(128, 128, 128, 1.5) 75%),
+    linear-gradient(-45deg, transparent 75%, rgba(128, 128, 128, 1.5) 75%);
+  background-size: 4px 4px;
+  background-position:
+    0 0,
+    0 2px,
+    2px -2px,
+    -2px 0px;
+}
+
+.neuroglancer-layer-color-value-wrapper {
+  position: relative;
+  width: 10px;
+  height: 10px;
+  padding: 5px;
+  margin: 0 4px;
+}
+
+.neuroglancer-layer-item[data-color="unsupported"]
+  .neuroglancer-layer-color-value-wrapper {
+  position: relative;
+}
+
+.neuroglancer-layer-item[data-visible="false"]
+  .neuroglancer-layer-color-value-wrapper
+  .neuroglancer-layer-color-value,
+.neuroglancer-layer-item[data-visible="false"]
+  .neuroglancer-layer-color-value-wrapper
+  .neuroglancer-layer-color-value::before {
+  opacity: 0.4;
+}
+
+.neuroglancer-layer-item[data-visible="false"]
+  .neuroglancer-layer-color-value-wrapper::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 18px;
+  height: 1px;
+  background-color: rgb(255, 255, 255);
+  transform: translate(-50%, -50%) rotate(135deg);
+  z-index: 1;
+}
+
 .neuroglancer-layer-item-value {
   grid-row: 1;
   grid-column: 1;