Hide shader properties in annotation when code is not displayed

MetaCell · Nov 14, 2024 · 684807c · 684807c
1 parent 8e15490
commit 684807c
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 38 deletions.
diff --git a/src/layer/annotation/index.ts b/src/layer/annotation/index.ts
@@ -743,42 +743,42 @@ 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";
@@ -788,9 +788,10 @@ class RenderingOptionsTab extends Tab {
     topRow.appendChild(label);
 
     const managedLayer = this.layer.managedLayer;
+    shaderProperties.style.display = managedLayer.codeVisible ? "block" : "none";
     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,
@@ -799,10 +800,12 @@ class RenderingOptionsTab extends Tab {
         managedLayer.setCodeVisible(!managedLayer.codeVisible)
         if (managedLayer.codeVisible) {
           button.title = "Hide code";
-          button.innerHTML = svgOpenedEye
+          button.innerHTML = svgOpenedEye;
+          shaderProperties.style.display = "block";
         } else {
           button.title = "Show code";
-          button.innerHTML = svgClosedEye
+          button.innerHTML = svgClosedEye;
+          shaderProperties.style.display = "none";
         }
         this.codeWidget.setVisible(managedLayer.codeVisible);
     }});

diff --git a/src/layer/image/index.ts b/src/layer/image/index.ts
@@ -546,7 +546,6 @@ class RenderingOptionsTab extends Tab {
 
     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",