mol-plugin: add remote state list to the "home" panel

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

@@ -14,7 +14,7 @@ import { PluginCommands } from '../command';
 import { ParameterControls } from './controls/parameters';
 import { Canvas3DParams } from '../../mol-canvas3d/canvas3d';
 import { ParamDefinition as PD } from '../../mol-util/param-definition';
-import { StateSnapshots } from './state/snapshots';
+import { StateSnapshots, RemoteStateSnapshots } from './state/snapshots';
 import { HelpContent } from './viewport/help';
 
 type TabName = 'none' | 'root' | 'data' | 'states' | 'settings' | 'help'
@@ -49,6 +49,7 @@ export class LeftPanelControls extends PluginUIComponent<{}, { tab: TabName }> {
         'root': <>
             <SectionHeader icon='home' title='Home' />
             <StateObjectActions state={this.plugin.state.dataState} nodeRef={StateTransform.RootRef} hideHeader={true} initiallyCollapsed={true} alwaysExpandFirst={true} />
+            <RemoteStateSnapshots listOnly />
         </>,
         'data': <>
         <SectionHeader icon='flow-tree' title='State Tree' />

src/mol-plugin/ui/state/snapshots.tsx

@@ -158,9 +158,9 @@ class LocalStateSnapshotList extends PluginUIComponent<{ }, { }> {
     }
 }
 
-type RemoteEntry = { url: string, removeUrl: string, timestamp: number, id: string, name: string, description: string, isSticky?: boolean }
-class RemoteStateSnapshots extends PluginUIComponent<
-    { },
+export type RemoteEntry = { url: string, removeUrl: string, timestamp: number, id: string, name: string, description: string, isSticky?: boolean }
+export class RemoteStateSnapshots extends PluginUIComponent<
+    { listOnly?: boolean },
     { params: PD.Values<typeof RemoteStateSnapshots.Params>, entries: OrderedMap<string, RemoteEntry>, isBusy: boolean }> {
 
     state = { params: PD.getDefaultValues(RemoteStateSnapshots.Params), entries: OrderedMap<string, RemoteEntry>(), isBusy: false };
@@ -174,6 +174,12 @@ class RemoteStateSnapshots extends PluginUIComponent<
         })
     };
 
+    static ListOnlyParams = {
+        options: PD.Group({
+            serverUrl: PD.Text('https://webchem.ncbr.muni.cz/molstar-state')
+        }, { isFlat: true })
+    };
+
     componentDidMount() {
         this.refresh();
         // this.subscribe(UploadedEvent, this.refresh);
@@ -258,26 +264,36 @@ class RemoteStateSnapshots extends PluginUIComponent<
     }
 
     render() {
-        return <div>
-            <SectionHeader icon='floppy' title='Remote States' />
-
-            <ParameterControls params={RemoteStateSnapshots.Params} values={this.state.params} onEnter={this.upload} onChange={p => {
-                this.setState({ params: { ...this.state.params, [p.name]: p.value } } as any);
-            }} isDisabled={this.state.isBusy}/>
-
-            <div className='msp-btn-row-group'>
-                <button className='msp-btn msp-btn-block msp-form-control' onClick={this.upload} disabled={this.state.isBusy}><Icon name='upload' /> Upload</button>
-                <button className='msp-btn msp-btn-block msp-form-control' onClick={this.refresh} disabled={this.state.isBusy}>Refresh</button>
-            </div>
+        return <>
+            <SectionHeader title='Remote States' />
+
+            {!this.props.listOnly && <>
+                <ParameterControls params={RemoteStateSnapshots.Params} values={this.state.params} onEnter={this.upload} onChange={p => {
+                    this.setState({ params: { ...this.state.params, [p.name]: p.value } } as any);
+                }} isDisabled={this.state.isBusy}/>
+                <div className='msp-btn-row-group'>
+                    <button className='msp-btn msp-btn-block msp-form-control' onClick={this.upload} disabled={this.state.isBusy}><Icon name='upload' /> Upload</button>
+                    <button className='msp-btn msp-btn-block msp-form-control' onClick={this.refresh} disabled={this.state.isBusy}>Refresh</button>
+                </div>
+            </>}
 
             <RemoteStateSnapshotList entries={this.state.entries} isBusy={this.state.isBusy} serverUrl={this.state.params.options.serverUrl}
-                fetch={this.fetch} remove={this.remove} />
-        </div>;
+                fetch={this.fetch} remove={this.props.listOnly ? void 0 : this.remove} />
+
+            {this.props.listOnly && <>
+                <ParameterControls params={RemoteStateSnapshots.ListOnlyParams} values={this.state.params} onEnter={this.upload} onChange={p => {
+                    this.setState({ params: { ...this.state.params, [p.name]: p.value } } as any);
+                }} isDisabled={this.state.isBusy}/>
+                <div className='msp-btn-row-group'>
+                    <button className='msp-btn msp-btn-block msp-form-control' onClick={this.refresh} disabled={this.state.isBusy}>Refresh</button>
+                </div>
+            </>}
+        </>;
     }
 }
 
 class RemoteStateSnapshotList extends PurePluginUIComponent<
-    { entries: OrderedMap<string, RemoteEntry>, serverUrl: string, isBusy: boolean, fetch: (e: React.MouseEvent<HTMLElement>) => void, remove: (e: React.MouseEvent<HTMLElement>) => void },
+    { entries: OrderedMap<string, RemoteEntry>, serverUrl: string, isBusy: boolean, fetch: (e: React.MouseEvent<HTMLElement>) => void, remove?: (e: React.MouseEvent<HTMLElement>) => void },
     { }> {
 
     open = async (e: React.MouseEvent<HTMLElement>) => {
@@ -300,7 +316,7 @@ class RemoteStateSnapshotList extends PurePluginUIComponent<
                     disabled={this.props.isBusy} onContextMenu={this.open} title='Click to download, right-click to open in a new tab.'>
                     {e!.name || new Date(e!.timestamp).toLocaleString()} <small>{e!.description}</small>
                 </button>
-                {!e!.isSticky && <div>
+                {!e!.isSticky && this.props.remove && <div>
                     <IconButton data-id={e!.id} icon='remove' title='Remove' onClick={this.props.remove} disabled={this.props.isBusy} />
                 </div>}
             </li>)}

src/mol-plugin/ui/state/tree.tsx

@@ -10,6 +10,7 @@ import { State, StateObject, StateTransform, StateObjectCell } from '../../../mo
 import { PluginCommands } from '../../../mol-plugin/command';
 import { PluginUIComponent, _Props, _State } from '../base';
 import { StateObjectActions } from './actions';
+import { RemoteStateSnapshots } from './snapshots';
 
 export class StateTree extends PluginUIComponent<{ state: State }, { showActions: boolean }> {
     state = { showActions: true };
@@ -35,7 +36,10 @@ export class StateTree extends PluginUIComponent<{ state: State }, { showActions
     render() {
         const ref = this.props.state.tree.root.ref;
         if (this.state.showActions) {
-            return <StateObjectActions state={this.props.state} nodeRef={ref} hideHeader={true} initiallyCollapsed={true} alwaysExpandFirst={true} />
+            return <>
+                <StateObjectActions state={this.props.state} nodeRef={ref} hideHeader={true} initiallyCollapsed={true} alwaysExpandFirst={true} />
+                <RemoteStateSnapshots listOnly />
+            </>
         }
         return <StateTreeNode cell={this.props.state.cells.get(ref)!} depth={0} />;
     }