CC-122/126 Add option to hide/show code block

src/layer/annotation/index.ts

@@ -15,6 +15,7 @@
  */
 
 import "#src/layer/annotation/style.css";
+import svgCode from "ikonate/icons/code-alt.svg?raw";
 
 import type { AnnotationDisplayState } from "#src/annotation/annotation_layer_state.js";
 import { AnnotationLayerState } from "#src/annotation/annotation_layer_state.js";
@@ -45,7 +46,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,
@@ -67,6 +71,7 @@ import {
   verifyStringArray,
 } from "#src/util/json.js";
 import { NullarySignal } from "#src/util/signal.js";
+import { CheckboxIcon } from "#src/widget/checkbox_icon.js";
 import { DependentViewWidget } from "#src/widget/dependent_view_widget.js";
 import { makeHelpButton } from "#src/widget/help_button.js";
 import { LayerReferenceWidget } from "#src/widget/layer_reference.js";
@@ -740,49 +745,65 @@ class RenderingOptionsTab extends Tab {
     super();
     const { element } = this;
     element.classList.add("neuroglancer-annotation-rendering-tab");
-    element.appendChild(
-      this.registerDisposer(
-        new DependentViewWidget(
-          layer.annotationDisplayState.annotationProperties,
-          (properties, parent) => {
-            if (properties === undefined || properties.length === 0) return;
-            const propertyList = document.createElement("div");
-            parent.appendChild(propertyList);
-            propertyList.classList.add(
-              "neuroglancer-annotation-shader-property-list",
+    const shaderProperties = this.registerDisposer(
+      new DependentViewWidget(
+        layer.annotationDisplayState.annotationProperties,
+        (properties, parent) => {
+          if (properties === undefined || properties.length === 0) return;
+          const propertyList = document.createElement("div");
+          parent.appendChild(propertyList);
+          propertyList.classList.add(
+            "neuroglancer-annotation-shader-property-list",
+          );
+          for (const property of properties) {
+            const div = document.createElement("div");
+            div.classList.add("neuroglancer-annotation-shader-property");
+            const typeElement = document.createElement("span");
+            typeElement.classList.add(
+              "neuroglancer-annotation-shader-property-type",
             );
-            for (const property of properties) {
-              const div = document.createElement("div");
-              div.classList.add("neuroglancer-annotation-shader-property");
-              const typeElement = document.createElement("span");
-              typeElement.classList.add(
-                "neuroglancer-annotation-shader-property-type",
-              );
-              typeElement.textContent = property.type;
-              const nameElement = document.createElement("span");
-              nameElement.classList.add(
-                "neuroglancer-annotation-shader-property-identifier",
-              );
-              nameElement.textContent = `prop_${property.identifier}`;
-              div.appendChild(typeElement);
-              div.appendChild(nameElement);
-              const { description } = property;
-              if (description !== undefined) {
-                div.title = description;
-              }
-              propertyList.appendChild(div);
+            typeElement.textContent = property.type;
+            const nameElement = document.createElement("span");
+            nameElement.classList.add(
+              "neuroglancer-annotation-shader-property-identifier",
+            );
+            nameElement.textContent = `prop_${property.identifier}`;
+            div.appendChild(typeElement);
+            div.appendChild(nameElement);
+            const { description } = property;
+            if (description !== undefined) {
+              div.title = description;
             }
-          },
-        ),
-      ).element,
-    );
+            propertyList.appendChild(div);
+          }
+        },
+      ),
+    ).element;
+
+    element.appendChild(shaderProperties);
     const topRow = document.createElement("div");
     topRow.className =
       "neuroglancer-segmentation-dropdown-skeleton-shader-header";
     const label = document.createElement("div");
     label.style.flex = "1";
     label.textContent = "Annotation shader:";
     topRow.appendChild(label);
+
+    const managedLayer = this.layer.managedLayer;
+    this.registerDisposer(
+      observeWatchable((visible) => {
+        shaderProperties.style.display = visible ? "block" : "none";
+        this.codeWidget.setVisible(visible);
+      }, managedLayer.codeVisible),
+    );
+    const codeVisibilityControl = new CheckboxIcon(managedLayer.codeVisible, {
+      enableTitle: "Show code",
+      disableTitle: "Hide code",
+      backgroundScheme: "dark",
+      svg: svgCode,
+    });
+    topRow.appendChild(codeVisibilityControl.element);
+
     topRow.appendChild(
       makeMaximizeButton({
         title: "Show larger editor view",

src/layer/image/index.ts

@@ -15,6 +15,7 @@
  */
 
 import "#src/layer/image/style.css";
+import svgCode from "ikonate/icons/code-alt.svg?raw";
 
 import type { CoordinateSpace } from "#src/coordinate_transform.js";
 import {
@@ -54,6 +55,7 @@ import type { WatchableValueInterface } from "#src/trackable_value.js";
 import {
   makeCachedDerivedWatchableValue,
   makeCachedLazyDerivedWatchableValue,
+  observeWatchable,
   registerNested,
   WatchableValue,
 } from "#src/trackable_value.js";
@@ -79,6 +81,7 @@ import {
   ShaderControlState,
 } from "#src/webgl/shader_ui_controls.js";
 import { ChannelDimensionsWidget } from "#src/widget/channel_dimensions_widget.js";
+import { CheckboxIcon } from "#src/widget/checkbox_icon.js";
 import { makeCopyButton } from "#src/widget/copy_button.js";
 import type { DependentViewContext } from "#src/widget/dependent_view_widget.js";
 import { makeHelpButton } from "#src/widget/help_button.js";
@@ -540,6 +543,22 @@ class RenderingOptionsTab extends Tab {
     topRow.className = "neuroglancer-image-dropdown-top-row";
     topRow.appendChild(document.createTextNode("Shader"));
     topRow.appendChild(spacer);
+
+    const managedLayer = this.layer.managedLayer;
+    this.registerDisposer(
+      observeWatchable((visible) => {
+        this.codeWidget.setVisible(visible);
+      }, managedLayer.codeVisible),
+    );
+
+    const codeVisibilityControl = new CheckboxIcon(managedLayer.codeVisible, {
+      enableTitle: "Show code",
+      disableTitle: "Hide code",
+      backgroundScheme: "dark",
+      svg: svgCode,
+    });
+    topRow.appendChild(codeVisibilityControl.element);
+
     topRow.appendChild(
       makeMaximizeButton({
         title: "Show larger editor view",
@@ -561,6 +580,7 @@ class RenderingOptionsTab extends Tab {
         new ChannelDimensionsWidget(layer.channelCoordinateSpaceCombiner),
       ).element,
     );
+
     element.appendChild(this.codeWidget.element);
     element.appendChild(
       this.registerDisposer(

src/layer/index.ts

@@ -705,11 +705,11 @@ export class ManagedUserLayer extends RefCounted {
   set name(value: string) {
     if (value !== this.name_) {
       this.name_ = value;
-      this.layerChanged.dispatch();
     }
   }
 
   visible = true;
+  codeVisible = new TrackableBoolean(true, true);
   archived = false;
 
   get supportsPickOption() {
@@ -755,6 +755,7 @@ export class ManagedUserLayer extends RefCounted {
         this.localVelocity,
       ),
     );
+    this.codeVisible.changed.add(this.layerChanged.dispatch);
   }
 
   toJSON() {
@@ -764,6 +765,7 @@ export class ManagedUserLayer extends RefCounted {
     }
     const layerSpec = userLayer.toJSON();
     layerSpec.name = this.name;
+    layerSpec.codeVisible = this.codeVisible.toJSON();
     if (!this.visible) {
       if (this.archived) {
         layerSpec.archived = true;
@@ -774,6 +776,11 @@ export class ManagedUserLayer extends RefCounted {
     return layerSpec;
   }
 
+  setCodeVisible(value: boolean) {
+    this.codeVisible.value = value;
+    this.layerChanged.dispatch();
+  }
+
   setVisible(value: boolean) {
     if (value === this.visible) return;
     if (value && this.archived) {
@@ -2018,6 +2025,9 @@ function initializeLayerFromSpecNoRestoreState(
   } else {
     managedLayer.visible = false;
   }
+  managedLayer.codeVisible.restoreState(
+    verifyOptionalObjectProperty(spec, "codeVisible", verifyBoolean, true),
+  );
   const layerConstructor = layerTypes.get(layerType) || NewUserLayer;
   managedLayer.layer = new layerConstructor(managedLayer);
   return spec;

src/layer/single_mesh/index.ts

@@ -15,6 +15,7 @@
  */
 
 import "#src/layer/single_mesh/style.css";
+import svgCode from "ikonate/icons/code-alt.svg?raw";
 
 import type { ManagedUserLayer } from "#src/layer/index.js";
 import {
@@ -32,10 +33,11 @@ import {
   SingleMeshLayer,
 } from "#src/single_mesh/frontend.js";
 import type { WatchableValueInterface } from "#src/trackable_value.js";
-import { WatchableValue } from "#src/trackable_value.js";
+import { observeWatchable, WatchableValue } from "#src/trackable_value.js";
 import type { Borrowed } from "#src/util/disposable.js";
 import { RefCounted } from "#src/util/disposable.js";
 import { removeChildren, removeFromParent } from "#src/util/dom.js";
+import { CheckboxIcon } from "#src/widget/checkbox_icon.js";
 import { makeHelpButton } from "#src/widget/help_button.js";
 import { makeMaximizeButton } from "#src/widget/maximize_button.js";
 import { ShaderCodeWidget } from "#src/widget/shader_code_widget.js";
@@ -207,6 +209,22 @@ class DisplayOptionsTab extends Tab {
     spacer.style.flex = "1";
 
     topRow.appendChild(spacer);
+
+    const managedLayer = this.layer.managedLayer;
+    this.registerDisposer(
+      observeWatchable((visible) => {
+        this.codeWidget.setVisible(visible);
+      }, managedLayer.codeVisible),
+    );
+
+    const codeVisibilityControl = new CheckboxIcon(managedLayer.codeVisible, {
+      enableTitle: "Show code",
+      disableTitle: "Hide code",
+      backgroundScheme: "dark",
+      svg: svgCode,
+    });
+    topRow.appendChild(codeVisibilityControl.element);
+
     topRow.appendChild(
       makeMaximizeButton({
         title: "Show larger editor view",

src/widget/shader_code_widget.ts

@@ -189,4 +189,12 @@ export class ShaderCodeWidget extends RefCounted {
     this.textEditor = <any>undefined;
     super.disposed();
   }
+
+  setVisible(visible: boolean) {
+    this.element.style.display = visible ? "block" : "none";
+  }
+
+  isVisible() {
+    return this.element.style.display === "block";
+  }
 }