control panels visibility

src/viewer/index.ts

@@ -72,7 +72,16 @@ const DefaultViewerProps = {
     volumeStreamingServer: '//maps.rcsb.org/',
 
     backgroundColor: ColorNames.white,
-    showWelcomeToast: true
+    showWelcomeToast: true,
+
+    panelVisibility: {
+        selection: false,
+        measurements: true,
+        superposition: false,
+        component: true,
+        volume: false,
+        custom: false
+    }
 };
 type ViewerProps = typeof DefaultViewerProps
 
@@ -107,7 +116,7 @@ export class Viewer {
                     ...DefaultPluginSpec.layout && DefaultPluginSpec.layout.controls,
                     top: o.layoutShowSequence ? undefined : 'none',
                     bottom: o.layoutShowLog ? undefined : 'none',
-                    left: 'none',
+                    // left: 'none',
                     right: ControlsWrapper,
                 }
             },
@@ -140,6 +149,7 @@ export class Viewer {
                 volume: true,
                 custom: true,
             }),
+            visibility: new BehaviorSubject<CollapsedState>({ ...o.panelVisibility })
         }
 
         this.plugin.init();

src/viewer/types.ts

@@ -40,11 +40,20 @@ export type CollapsedState = {
     volume: boolean
     custom: boolean
 }
+export type VisibilityState = {
+    selection: boolean
+    measurements: boolean
+    superposition: boolean
+    component: boolean
+    volume: boolean
+    custom: boolean
+}
 export interface ViewerState {
     showImportControls: boolean
     showSessionControls: boolean
     modelLoader: ModelLoader
     collapsed: BehaviorSubject<CollapsedState>
+    visibility: BehaviorSubject<VisibilityState>
 }
 export function ViewerState(plugin: PluginContext) {
     return plugin.customState as ViewerState

src/viewer/ui/controls.tsx

@@ -23,18 +23,20 @@ export class StructureTools extends PluginUIComponent {
 
     componentDidMount() {
         this.subscribe(this.customState.collapsed, () => this.forceUpdate())
+        this.subscribe(this.customState.visibility, () => this.forceUpdate())
     }
 
     render() {
-        const collapsed = this.customState.collapsed.value
+        const collapsed = this.customState.collapsed.value;
+        const visibility = this.customState.visibility.value;
         return <>
-            <StructureSourceControls />
-            <StructureMeasurementsControls initiallyCollapsed={collapsed.measurements} />
-            <StructureSuperpositionControls initiallyCollapsed={collapsed.superposition} />
-            <StructureComponentControls initiallyCollapsed={collapsed.component} />
-            <VolumeStreamingControls header='Density' initiallyCollapsed={collapsed.volume} />
+            {visibility.selection && <StructureSourceControls />}
+            {visibility.measurements && <StructureMeasurementsControls initiallyCollapsed={collapsed.measurements} />}
+            {visibility.superposition && <StructureSuperpositionControls initiallyCollapsed={collapsed.superposition} />}
+            {visibility.component && <StructureComponentControls initiallyCollapsed={collapsed.component} />}
+            {visibility.volume && <VolumeStreamingControls header='Density' initiallyCollapsed={collapsed.volume} />}
 
-            <CustomStructureControls initiallyCollapsed={collapsed.custom} />
+            {visibility.custom && <CustomStructureControls initiallyCollapsed={collapsed.custom} />}
         </>;
     }
 }