added session controls panel

package-lock.json

@@ -217,9 +217,9 @@
             "dev": true
         },
         "@types/node": {
-            "version": "13.13.5",
-            "resolved": "https://registry.npmjs.org/@types/node/-/node-13.13.5.tgz",
-            "integrity": "sha512-3ySmiBYJPqgjiHA7oEaIo2Rzz0HrOZ7yrNO5HWyaE5q0lQ3BppDZ3N53Miz8bw2I7gh1/zir2MGVZBvpb1zq9g==",
+            "version": "13.13.6",
+            "resolved": "https://registry.npmjs.org/@types/node/-/node-13.13.6.tgz",
+            "integrity": "sha512-zqRj8ugfROCjXCNbmPBe2mmQ0fJWP9lQaN519hwunOgpHgVykme4G6FW95++dyNFDvJUk4rtExkVkL0eciu5NA==",
             "dev": true
         },
         "@types/node-fetch": {
@@ -4867,9 +4867,9 @@
             }
         },
         "molstar": {
-            "version": "0.7.1-dev.6",
-            "resolved": "https://registry.npmjs.org/molstar/-/molstar-0.7.1-dev.6.tgz",
-            "integrity": "sha512-CbHZ/JkA5jdrpEHAWgqyafq9udRZmjwa/YkhtdjMC2Gwbdv97SftqrFpferwr8VXPV+PHQUQNONE8z0nRN21LA==",
+            "version": "0.7.1-dev.7",
+            "resolved": "https://registry.npmjs.org/molstar/-/molstar-0.7.1-dev.7.tgz",
+            "integrity": "sha512-liJR2KdmY3S5Vgo13s1bNCqle7nAi9T5GmCpLYtoYogVs8MOKJcAbDrFNoS129/rPAL3VKWGLMA21SNdyYeflw==",
             "dev": true,
             "requires": {
                 "@types/argparse": "^1.0.38",

package.json

@@ -47,7 +47,7 @@
         "extra-watch-webpack-plugin": "^1.0.3",
         "file-loader": "^6.0.0",
         "mini-css-extract-plugin": "^0.9.0",
-        "molstar": "^0.7.1-dev.6",
+        "molstar": "^0.7.1-dev.7",
         "node-sass": "^4.14.1",
         "raw-loader": "^4.0.1",
         "react": "^16.13.1",

src/viewer/index.html

@@ -55,6 +55,7 @@
             // create an instance of the plugin
             var viewer = new rcsbMolstar.Viewer('viewer', {
                 showImportControls: !pdbId,
+                showSessionControls: !pdbId,
                 layoutShowLog: !pdbId,
                 layoutShowControls: !isEmbedded,
             })

src/viewer/index.ts

@@ -19,7 +19,7 @@ import ReactDOM = require('react-dom');
 import React = require('react');
 import { ModelLoader } from './helpers/model';
 import { PresetProps } from './helpers/preset';
-import { ControlsWrapper, ViewportWrapper } from './ui/controls';
+import { ControlsWrapper } from './ui/controls';
 import { PluginConfig } from 'molstar/lib/mol-plugin/config';
 import { RCSBAssemblySymmetry } from 'molstar/lib/extensions/rcsb/assembly-symmetry/behavior';
 import { RCSBValidationReport } from 'molstar/lib/extensions/rcsb/validation-report/behavior';
@@ -46,6 +46,7 @@ const Extensions = {
 
 const DefaultViewerProps = {
     showImportControls: false,
+    showSessionControls: false,
     modelUrlProviders: [
         (pdbId: string) => ({
             url: `//models.rcsb.org/${pdbId.toLowerCase()}.bcif`,
@@ -68,7 +69,6 @@ const DefaultViewerProps = {
 
     viewportShowExpand: true,
     viewportShowSelectionMode: true,
-    viewportShowAnimation: false,
     volumeStreamingServer: '//maps.rcsb.org/',
 };
 type ViewerProps = typeof DefaultViewerProps
@@ -111,14 +111,11 @@ export class Viewer {
             components: {
                 ...DefaultPluginSpec.components,
                 remoteState: 'none',
-                viewport: {
-                    view: ViewportWrapper
-                }
             },
             config: [
                 [PluginConfig.Viewport.ShowExpand, o.viewportShowExpand],
                 [PluginConfig.Viewport.ShowSelectionMode, o.viewportShowSelectionMode],
-                [PluginConfig.Viewport.ShowAnimation, o.viewportShowAnimation],
+                [PluginConfig.Viewport.ShowAnimation, false],
                 [PluginConfig.VolumeStreaming.DefaultServer, o.volumeStreamingServer],
                 [PluginConfig.Download.DefaultPdbProvider, 'rcsb'],
                 [PluginConfig.Download.DefaultEmdbProvider, 'rcsb']
@@ -130,6 +127,7 @@ export class Viewer {
 
         (this.plugin.customState as ViewerState) = {
             showImportControls: o.showImportControls,
+            showSessionControls: o.showSessionControls,
             modelLoader: new ModelLoader(this.plugin),
             collapsed: new BehaviorSubject<CollapsedState>({
                 selection: true,

src/viewer/types.ts

@@ -34,6 +34,7 @@ export type CollapsedState = {
 }
 export interface ViewerState {
     showImportControls: boolean
+    showSessionControls: boolean
     modelLoader: ModelLoader
     collapsed: BehaviorSubject<CollapsedState>
 }

src/viewer/ui/controls.tsx

@@ -7,16 +7,14 @@
 import * as React from 'react';
 import { PluginUIComponent } from 'molstar/lib/mol-plugin-ui/base';
 import { ViewerState } from '../types';
-import { Viewport, ViewportControls } from 'molstar/lib/mol-plugin-ui/viewport';
-import { BackgroundTaskProgress } from 'molstar/lib/mol-plugin-ui/task';
-import { LociLabels, CustomStructureControls, SelectionViewportControls } from 'molstar/lib/mol-plugin-ui/controls';
-import { Toasts } from 'molstar/lib/mol-plugin-ui/toast';
+import { CustomStructureControls } from 'molstar/lib/mol-plugin-ui/controls';
 import { ImportControls } from './import';
 import { StructureSourceControls } from 'molstar/lib/mol-plugin-ui/structure/source';
 import { StructureMeasurementsControls } from 'molstar/lib/mol-plugin-ui/structure/measurements';
 import { StructureSuperpositionControls } from 'molstar/lib/mol-plugin-ui/structure/superposition';
 import { StructureComponentControls } from 'molstar/lib/mol-plugin-ui/structure/components';
 import { VolumeStreamingControls } from 'molstar/lib/mol-plugin-ui/structure/volume';
+import { SessionControls } from './session';
 
 export class StructureTools extends PluginUIComponent {
     get customState() {
@@ -45,24 +43,8 @@ export class ControlsWrapper extends PluginUIComponent {
     render() {
         return <div className='msp-scrollable-container'>
             {ViewerState(this.plugin).showImportControls && <ImportControls />}
+            {ViewerState(this.plugin).showSessionControls && <SessionControls />}
             <StructureTools />
         </div>;
     }
-}
-
-export class ViewportWrapper extends PluginUIComponent {
-    render() {
-        return <>
-            <Viewport />
-            <SelectionViewportControls />
-            <ViewportControls />
-            <div style={{ position: 'absolute', left: '10px', bottom: '10px' }}>
-                <BackgroundTaskProgress />
-            </div>
-            <div className='msp-highlight-toast-wrapper'>
-                <LociLabels />
-                <Toasts />
-            </div>
-        </>;
-    }
 }

src/viewer/ui/session.tsx

@@ -0,0 +1,58 @@
+/**
+ * Copyright (c) 2020 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
+ */
+
+import * as React from 'react';
+import { CollapsableControls } from 'molstar/lib/mol-plugin-ui/base';
+import { LocalStateSnapshots, LocalStateSnapshotList, StateExportImportControls } from 'molstar/lib/mol-plugin-ui/state/snapshots';
+import { SaveOutlinedSvg } from 'molstar/lib/mol-plugin-ui/controls/icons';
+
+class LocalStateControls extends CollapsableControls {
+    protected defaultState() {
+        return {
+            header: 'Views',
+            isCollapsed: true,
+        }
+    }
+
+    renderControls() {
+        return <div>
+            <LocalStateSnapshots />
+            <LocalStateSnapshotList />
+        </div>
+    }
+}
+
+class StateControls extends CollapsableControls {
+    protected defaultState() {
+        return {
+            header: 'Download / Open',
+            isCollapsed: true,
+        }
+    }
+
+    renderControls() {
+        return <div>
+            <StateExportImportControls />
+        </div>
+    }
+}
+
+export class SessionControls extends CollapsableControls {
+    protected defaultState() {
+        return {
+            header: 'Session',
+            isCollapsed: true,
+            brand: { accent:  'gray' as const, svg: SaveOutlinedSvg }
+        }
+    }
+
+    renderControls() {
+        return <div className={'msp-control-offset'} style={{ paddingTop: '1px' }}>
+            <LocalStateControls />
+            <StateControls />
+        </div>
+    }
+}