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

src/layer/annotation/index.ts

@@ -15,6 +15,8 @@
  */
 
 import "#src/layer/annotation/style.css";
+import svgClosedEye from "ikonate/icons/eye-closed.svg?raw";
+import svgOpenedEye from "ikonate/icons/eye.svg?raw";
 
 import type { AnnotationDisplayState } from "#src/annotation/annotation_layer_state.js";
 import { AnnotationLayerState } from "#src/annotation/annotation_layer_state.js";
@@ -69,6 +71,7 @@ import {
 import { NullarySignal } from "#src/util/signal.js";
 import { DependentViewWidget } from "#src/widget/dependent_view_widget.js";
 import { makeHelpButton } from "#src/widget/help_button.js";
+import { makeIcon } from "#src/widget/icon.js";
 import { LayerReferenceWidget } from "#src/widget/layer_reference.js";
 import { makeMaximizeButton } from "#src/widget/maximize_button.js";
 import { RenderScaleWidget } from "#src/widget/render_scale_widget.js";
@@ -740,49 +743,74 @@ 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;
+    shaderProperties.style.display = managedLayer.codeVisible ? "block" : "none";
+    const codeVisible = managedLayer.codeVisible;
+    this.codeWidget.setVisible(codeVisible);
+
+    const codeVisibilityControl = makeIcon({
+      title: codeVisible ? "Hide code": "Show code",
+      svg: codeVisible ? svgOpenedEye : svgClosedEye,
+      onClick: () => {
+        const button = codeVisibilityControl as HTMLDivElement;
+        managedLayer.setCodeVisible(!managedLayer.codeVisible)
+        if (managedLayer.codeVisible) {
+          button.title = "Hide code";
+          button.innerHTML = svgOpenedEye;
+          shaderProperties.style.display = "block";
+        } else {
+          button.title = "Show code";
+          button.innerHTML = svgClosedEye;
+          shaderProperties.style.display = "none";
+        }
+        this.codeWidget.setVisible(managedLayer.codeVisible);
+    }});
+    topRow.appendChild(codeVisibilityControl);
+
     topRow.appendChild(
       makeMaximizeButton({
         title: "Show larger editor view",

src/layer/image/index.ts

@@ -15,6 +15,8 @@
  */
 
 import "#src/layer/image/style.css";
+import svgClosedEye from "ikonate/icons/eye-closed.svg?raw";
+import svgOpenedEye from "ikonate/icons/eye.svg?raw";
 
 import type { CoordinateSpace } from "#src/coordinate_transform.js";
 import {
@@ -82,6 +84,7 @@ import { ChannelDimensionsWidget } from "#src/widget/channel_dimensions_widget.j
 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";
+import { makeIcon } from "#src/widget/icon.js";
 import type { LayerControlDefinition } from "#src/widget/layer_control.js";
 import {
   addLayerControlToOptionsTab,
@@ -540,6 +543,27 @@ class RenderingOptionsTab extends Tab {
     topRow.className = "neuroglancer-image-dropdown-top-row";
     topRow.appendChild(document.createTextNode("Shader"));
     topRow.appendChild(spacer);
+
+    const managedLayer = this.layer.managedLayer;
+    const codeVisible = managedLayer.codeVisible;
+    this.codeWidget.setVisible(codeVisible);
+    const codeVisibilityControl = makeIcon({
+      title: codeVisible ? "Hide code": "Show code",
+      svg: codeVisible ? svgOpenedEye : svgClosedEye,
+      onClick: () => {
+        const button = codeVisibilityControl as HTMLDivElement;
+        managedLayer.setCodeVisible(!managedLayer.codeVisible)
+        if (managedLayer.codeVisible) {
+          button.title = "Hide code";
+          button.innerHTML = svgOpenedEye
+        } else {
+          button.title = "Show code";
+          button.innerHTML = svgClosedEye
+        }
+        this.codeWidget.setVisible(managedLayer.codeVisible);
+    }});
+    topRow.appendChild(codeVisibilityControl);
+
     topRow.appendChild(
       makeMaximizeButton({
         title: "Show larger editor view",
@@ -561,6 +585,7 @@ class RenderingOptionsTab extends Tab {
         new ChannelDimensionsWidget(layer.channelCoordinateSpaceCombiner),
       ).element,
     );
+
     element.appendChild(this.codeWidget.element);
     element.appendChild(
       this.registerDisposer(

src/layer/index.ts

@@ -710,6 +710,7 @@ export class ManagedUserLayer extends RefCounted {
   }
 
   visible = true;
+  codeVisible = true;
   archived = false;
 
   get supportsPickOption() {
@@ -764,6 +765,9 @@ export class ManagedUserLayer extends RefCounted {
     }
     const layerSpec = userLayer.toJSON();
     layerSpec.name = this.name;
+    if (!this.codeVisible) {
+      layerSpec.codeVisible = false;
+    }
     if (!this.visible) {
       if (this.archived) {
         layerSpec.archived = true;
@@ -774,6 +778,12 @@ export class ManagedUserLayer extends RefCounted {
     return layerSpec;
   }
 
+  setCodeVisible(value: boolean) {
+    if (value === this.codeVisible) return;
+    this.codeVisible = value;
+    this.layerChanged.dispatch();
+  }
+
   setVisible(value: boolean) {
     if (value === this.visible) return;
     if (value && this.archived) {
@@ -2018,6 +2028,12 @@ function initializeLayerFromSpecNoRestoreState(
   } else {
     managedLayer.visible = false;
   }
+  managedLayer.codeVisible = 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,8 @@
  */
 
 import "#src/layer/single_mesh/style.css";
+import svgClosedEye from "ikonate/icons/eye-closed.svg?raw";
+import svgOpenedEye from "ikonate/icons/eye.svg?raw";
 
 import type { ManagedUserLayer } from "#src/layer/index.js";
 import {
@@ -37,6 +39,7 @@ import type { Borrowed } from "#src/util/disposable.js";
 import { RefCounted } from "#src/util/disposable.js";
 import { removeChildren, removeFromParent } from "#src/util/dom.js";
 import { makeHelpButton } from "#src/widget/help_button.js";
+import { makeIcon } from "#src/widget/icon.js";
 import { makeMaximizeButton } from "#src/widget/maximize_button.js";
 import { ShaderCodeWidget } from "#src/widget/shader_code_widget.js";
 import {
@@ -207,6 +210,28 @@ class DisplayOptionsTab extends Tab {
     spacer.style.flex = "1";
 
     topRow.appendChild(spacer);
+
+    const managedLayer = this.layer.managedLayer;
+    const codeVisible = managedLayer.codeVisible;
+    this.codeWidget.element.style.display = managedLayer.codeVisible ? "block" : "none";
+    this.codeWidget.setVisible(codeVisible);
+    const codeVisibilityControl = makeIcon({
+      title: codeVisible ? "Hide code": "Show code",
+      svg: codeVisible ? svgOpenedEye : svgClosedEye,
+      onClick: () => {
+        const button = codeVisibilityControl as HTMLDivElement;
+        managedLayer.setCodeVisible(!managedLayer.codeVisible)
+        if (managedLayer.codeVisible) {
+          button.title = "Hide code";
+          button.innerHTML = svgOpenedEye
+        } else {
+          button.title = "Show code";
+          button.innerHTML = svgClosedEye
+        }
+        this.codeWidget.setVisible(managedLayer.codeVisible);
+    }});
+    topRow.appendChild(codeVisibilityControl);
+
     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";
+  }
 }