making showLayerPanel option disable layer visibility always

Author: fcollman

src/layer_groups_layout.ts

@@ -445,7 +445,7 @@ export class SingletonLayerGroupViewer
           ...getCommonViewerState(viewer),
         },
         {
-          showLayerPanel: viewer.uiControlVisibility.showLayerPanel,
+          showLayerPanel: viewer.effectiveShowLayerPanel,
           showViewerMenu: false,
           showLayerHoverValues: viewer.uiControlVisibility.showLayerHoverValues,
         },
@@ -762,7 +762,7 @@ function makeComponent(container: LayoutComponentContainer, spec: any) {
           ...getCommonViewerState(viewer),
         },
         {
-          showLayerPanel: viewer.uiControlVisibility.showLayerPanel,
+          showLayerPanel: viewer.effectiveShowLayerPanel,
           showViewerMenu: true,
           showLayerHoverValues: viewer.uiControlVisibility.showLayerHoverValues,
         },

src/ui/layer_list_panel.ts

@@ -339,6 +339,7 @@ export class LayerListPanel extends SidePanel {
     sidePanelManager: SidePanelManager,
     public manager: TopLevelLayerListSpecification,
     public state: LayerListPanelState,
+    public hideLayerPanel: TrackableBoolean,
     public showLayerPanel?: TrackableBoolean,
   ) {
     super(sidePanelManager, state.location);
@@ -347,8 +348,9 @@ export class LayerListPanel extends SidePanel {
     this.titleElement = titleElement!;
 
     // Add layer panel toggle button to title bar
-    if (this.showLayerPanel) {
-      const toggleButton = new CheckboxIcon(this.showLayerPanel, {
+    // Only show toggle button when showLayerPanel configuration is enabled
+    if (this.showLayerPanel?.value) {
+      const toggleButton = new CheckboxIcon(this.hideLayerPanel, {
         svg: svg_eye,
         backgroundScheme: "dark",
         enableTitle: "Hide layer panel",
@@ -357,6 +359,23 @@ export class LayerListPanel extends SidePanel {
       toggleButton.element.style.order = "50"; // Position before close button (order: 100)
       titleBar.appendChild(toggleButton.element);
       this.registerDisposer(toggleButton);
+      
+      // Watch for showLayerPanel configuration changes and hide/show button accordingly
+      this.registerDisposer(
+        this.showLayerPanel.changed.add(() => {
+          if (this.showLayerPanel!.value) {
+            // Configuration enabled - show button
+            if (!toggleButton.element.parentElement) {
+              titleBar.appendChild(toggleButton.element);
+            }
+          } else {
+            // Configuration disabled - hide button
+            if (toggleButton.element.parentElement) {
+              toggleButton.element.remove();
+            }
+          }
+        }),
+      );
     }
     itemContainer.classList.add("neuroglancer-layer-list-panel-items");
     this.addBody(itemContainer);

src/viewer.ts

@@ -291,9 +291,9 @@ class TrackableViewerState extends CompoundTrackable {
     this.add("hideLayerPanel", viewer.hideLayerPanelState);
 
     // Add UI configuration to state for persistence
-    for (const key of VIEWER_UI_CONFIG_OPTIONS) {
-      this.add(key, viewer.uiConfiguration[key]);
-    }
+    // for (const key of VIEWER_UI_CONFIG_OPTIONS) {
+    //   this.add(key, viewer.uiConfiguration[key]);
+    // }
   }
 
   restoreState(obj: any) {
@@ -483,6 +483,7 @@ export class Viewer extends RefCounted implements ViewerState {
   dataSourceProvider: Borrowed<DataSourceRegistry>;
 
   uiConfiguration: ViewerUIConfiguration;
+  effectiveShowLayerPanel: WatchableValueInterface<boolean>;
 
   private makeUiControlVisibilityState(key: keyof ViewerUIOptions) {
     const showUIControls = this.uiConfiguration.showUIControls;
@@ -562,6 +563,19 @@ export class Viewer extends RefCounted implements ViewerState {
 
     this.dataSourceProvider = dataSourceProvider;
     this.uiConfiguration = uiConfiguration;
+    
+    // Create effective showLayerPanel state that combines configuration and user preference
+    this.effectiveShowLayerPanel = this.registerDisposer(
+      makeDerivedWatchableValue(
+        (configEnabled: boolean, hideState: boolean) => {
+          // Layer panel is shown when config allows it AND hide state is false
+          return configEnabled && !hideState;
+        },
+        this.uiConfiguration.showLayerPanel,
+        this.hideLayerPanelState,
+      )
+    );
+    
 
     this.registerDisposer(
       observeWatchable((value) => {
@@ -954,6 +968,7 @@ export class Viewer extends RefCounted implements ViewerState {
             this.sidePanelManager,
             this.layerSpecification,
             this.layerListPanelState,
+            this.hideLayerPanelState,
             this.uiConfiguration.showLayerPanel,
           ),
       }),