support hiding remote state

src/examples/proteopedia-wrapper/index.ts

@@ -35,8 +35,8 @@ import { DefaultCanvas3DParams, Canvas3DProps } from '../../mol-canvas3d/canvas3
 require('../../mol-plugin-ui/skin/light.scss')
 
 class MolStarProteopediaWrapper {
-    static VERSION_MAJOR = 3;
-    static VERSION_MINOR = 4;
+    static VERSION_MAJOR = 4;
+    static VERSION_MINOR = 0;
 
     private _ev = RxEventHelper.create();
 
@@ -62,6 +62,9 @@ class MolStarProteopediaWrapper {
                 controls: {
                     right: ControlsWrapper
                 }
+            },
+            components: {
+                remoteState: 'none'
             }
         });
 

src/mol-plugin-ui/left-panel.tsx

@@ -55,7 +55,7 @@ export class LeftPanelControls extends PluginUIComponent<{}, { tab: LeftPanelTab
         'root': <>
             <SectionHeader icon='home' title='Home' />
             <StateObjectActions state={this.plugin.state.dataState} nodeRef={StateTransform.RootRef} hideHeader={true} initiallyCollapsed={true} alwaysExpandFirst={true} />
-            <RemoteStateSnapshots listOnly />
+            {this.plugin.spec.components?.remoteState !== 'none' && <RemoteStateSnapshots listOnly /> }
         </>,
         'data': <>
             <SectionHeader icon='flow-tree' title={<><RemoveAllButton /> State Tree</>} />
@@ -81,7 +81,7 @@ export class LeftPanelControls extends PluginUIComponent<{}, { tab: LeftPanelTab
                 <IconButton icon='home' toggleState={tab === 'root'} onClick={() => this.set('root')} title='Home' />
                 {/* <IconButton icon='flow-tree' toggleState={tab === 'data'} onClick={() => this.set('data')} title='State Tree' /> */}
                 <DataIcon set={this.set} />
-                <IconButton icon='floppy' toggleState={tab === 'states'} onClick={() => this.set('states')} title='Plugin State' />
+                {this.plugin.spec.components?.remoteState !== 'none' && <IconButton icon='floppy' toggleState={tab === 'states'} onClick={() => this.set('states')} title='Plugin State' />}
                 <IconButton icon='help-circle' toggleState={tab === 'help'} onClick={() => this.set('help')} title='Help' />
                 <div className='msp-left-panel-controls-buttons-bottom'>
                     <IconButton icon='settings' toggleState={tab === 'settings'} onClick={() => this.set('settings')} title='Settings' />