cleanup and config improvements

- added .loadSnapshotFromUrl
- renamed StructureViewer to Viewer
- renamed files: app to rcsb-viewer
- renamed umd: app to rcsbMolstar

src/structure-viewer/helpers/model.ts → src/viewer/helpers/model.ts

@@ -4,8 +4,7 @@
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
 
-import { StructureViewerState, LoadParams } from '../types';
-import { PluginCommands } from 'molstar/lib/mol-plugin/commands';
+import { LoadParams } from '../types';
 import { PluginContext } from 'molstar/lib/mol-plugin/context';
 import { PresetProps, RcsbPreset } from './preset';
 import { Asset } from 'molstar/lib/mol-util/assets';
@@ -13,23 +12,13 @@ import { Mat4 } from 'molstar/lib/mol-math/linear-algebra';
 import { StateTransforms } from 'molstar/lib/mol-plugin-state/transforms';
 
 export class ModelLoader {
-    get customState() {
-        return StructureViewerState(this.plugin)
-    }
-
-    async clear() {
-        const state = this.plugin.state.data;
-        await PluginCommands.State.RemoveObject(this.plugin, { state, ref: state.tree.root.ref })
-    }
-
     async load(load: LoadParams, props?: PresetProps, matrix?: Mat4) {
-        const { fileOrUrl, format } = load
-        const isBinary = format === 'bcif'
+        const { fileOrUrl, format, isBinary } = load
 
         const data = fileOrUrl instanceof File
             ? (await this.plugin.builders.data.readFile({ file: Asset.File(fileOrUrl), isBinary })).data
             : await this.plugin.builders.data.download({ url: fileOrUrl, isBinary })
-        const trajectory = await this.plugin.builders.structure.parseTrajectory(data, 'mmcif')
+        const trajectory = await this.plugin.builders.structure.parseTrajectory(data, format)
 
         const selector = await this.plugin.builders.structure.hierarchy.applyPreset(trajectory, RcsbPreset, {
             preset: props || { kind: 'standard', assemblyId: '' }

src/structure-viewer/helpers/preset.ts → src/viewer/helpers/preset.ts

@@ -17,7 +17,7 @@ import { StructureRepresentationPresetProvider } from 'molstar/lib/mol-plugin-st
 import { Structure, StructureSelection, QueryContext, StructureElement } from 'molstar/lib/mol-model/structure';
 import { compile } from 'molstar/lib/mol-script/runtime/query/compiler';
 import { InitVolumeStreaming } from 'molstar/lib/mol-plugin/behavior/dynamic/volume-streaming/transformers';
-import { StructureViewerState } from '../types';
+import { ViewerState } from '../types';
 import { StateSelection } from 'molstar/lib/mol-state';
 import { VolumeStreaming } from 'molstar/lib/mol-plugin/behavior/dynamic/volume-streaming/behavior';
 
@@ -137,8 +137,8 @@ export const RcsbPreset = TrajectoryHierarchyPresetProvider({
         } else if (p.kind === 'symmetry') {
             representation = await plugin.builders.structure.representation.applyPreset<any>(structureProperties, AssemblySymmetryPreset, { symmetryIndex: p.symmetryIndex });
 
-            StructureViewerState(plugin).collapsed.next({
-                ...StructureViewerState(plugin).collapsed.value,
+            ViewerState(plugin).collapsed.next({
+                ...ViewerState(plugin).collapsed.value,
                 custom: false
             })
         } else {
@@ -158,8 +158,8 @@ export const RcsbPreset = TrajectoryHierarchyPresetProvider({
                 await plugin.runTask(plugin.state.data.applyAction(InitVolumeStreaming, params, structure.ref))
             }
 
-            StructureViewerState(plugin).collapsed.next({
-                ...StructureViewerState(plugin).collapsed.value,
+            ViewerState(plugin).collapsed.next({
+                ...ViewerState(plugin).collapsed.value,
                 volume: false
             })
         }

src/structure-viewer/index.html → src/viewer/index.html

@@ -11,7 +11,7 @@
                 padding: 0;
                 box-sizing: border-box;
             }
-            #app {
+            #viewer {
                 position: absolute;
                 left: 5%;
                 top: 100px;
@@ -33,25 +33,31 @@
                 width: 200px;
             }
         </style>
-        <link rel="stylesheet" type="text/css" href="app.css" />
-        <script type="text/javascript" src="./app.js"></script>
+        <link rel="stylesheet" type="text/css" href="rcsb-molstar.css" />
+        <script type="text/javascript" src="./rcsb-molstar.js"></script>
     </head>
     <body>
-        <div id="app"></div>
+        <div id="viewer"></div>
         <script>
             function getQueryParam(id) {
-                const a = new RegExp(id + '=([^&#=]*)', 'i')
-                const m = a.exec(window.location.search)
+                var a = new RegExp(id + '=([^&#=]*)', 'i')
+                var m = a.exec(window.location.search)
                 return m ? decodeURIComponent(m[1]) : undefined
             }
 
-            const pdbId = getQueryParam('pdbId')
-            const url = getQueryParam('url')
-            const _props = getQueryParam('props')
-            const props = _props && JSON.parse(_props)
+            var isEmbedded = getQueryParam('embedded') === '1';
+
+            var pdbId = getQueryParam('pdbId')
+            var url = getQueryParam('url')
+            var _props = getQueryParam('props')
+            var props = _props && JSON.parse(_props)
 
             // create an instance of the plugin
-            var viewer = new app.StructureViewer('app', { showImportControls: !pdbId })
+            var viewer = new rcsbMolstar.Viewer('viewer', {
+                showImportControls: !pdbId,
+                layoutShowLog: !pdbId,
+                layoutShowControls: !isEmbedded,
+            })
 
             // load pdbId or url
             if (pdbId) viewer.loadPdbId(pdbId, props)

src/structure-viewer/index.ts → src/viewer/index.ts

@@ -11,8 +11,7 @@ import './index.html'
 import './favicon.ico'
 import { PluginContext } from 'molstar/lib/mol-plugin/context';
 import { PluginCommands } from 'molstar/lib/mol-plugin/commands';
-import { AnimateModelIndex } from 'molstar/lib/mol-plugin-state/animation/built-in';
-import { StructureViewerState, StructureViewerProps, CollapsedState } from './types';
+import { ViewerState as ViewerState, CollapsedState, ModelUrlProvider } from './types';
 import { PluginSpec } from 'molstar/lib/mol-plugin/spec';
 
 import { ColorNames } from 'molstar/lib/mol-util/color/names';
@@ -25,6 +24,10 @@ 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';
 import { Mat4 } from 'molstar/lib/mol-math/linear-algebra';
+import { PluginState } from 'molstar/lib/mol-plugin/state';
+import { BuiltInTrajectoryFormat } from 'molstar/lib/mol-plugin-state/formats/trajectory';
+import { ObjectKeys } from 'molstar/lib/mol-util/type-helpers';
+import { PluginLayoutControlsDisplay } from 'molstar/lib/mol-plugin/layout';
 require('./skin/rcsb.scss')
 
 /** package version, filled in at bundle build time */
@@ -36,69 +39,97 @@ declare const __BUILD_TIMESTAMP__: number
 export const BUILD_TIMESTAMP = __BUILD_TIMESTAMP__;
 export const BUILD_DATE = new Date(BUILD_TIMESTAMP);
 
-export const DefaultStructureViewerProps: StructureViewerProps = {
-    volumeServerUrl: '//maps.rcsb.org/',
+const Extensions = {
+    'rcsb-assembly-symmetry': PluginSpec.Behavior(RCSBAssemblySymmetry),
+    'rcsb-validation-report': PluginSpec.Behavior(RCSBValidationReport)
+};
+
+const DefaultViewerProps = {
+    showImportControls: false,
     modelUrlProviders: [
         (pdbId: string) => ({
             url: `//models.rcsb.org/${pdbId.toLowerCase()}.bcif`,
-            format: 'bcif' as const
+            format: 'mmcif',
+            isBinary: true
         }),
         (pdbId: string) => ({
             url: `//files.rcsb.org/download/${pdbId.toLowerCase()}.cif`,
-            format: 'cif' as const
+            format: 'mmcif',
+            isBinary: false
         })
-    ],
-    showImportControls: false,
-}
-
-export class StructureViewer {
+    ] as ModelUrlProvider[],
+
+    extensions: ObjectKeys(Extensions),
+    layoutIsExpanded: false,
+    layoutShowControls: true,
+    layoutControlsDisplay: 'reactive' as PluginLayoutControlsDisplay,
+    layoutShowSequence: true,
+    layoutShowLog: false,
+
+    viewportShowExpand: true,
+    viewportShowSelectionMode: true,
+    viewportShowAnimation: false,
+    volumeStreamingServer: '//maps.rcsb.org/',
+};
+type ViewerProps = typeof DefaultViewerProps
+
+export class Viewer {
     private readonly plugin: PluginContext;
-    private readonly props: Readonly<StructureViewerProps>
+    private readonly modelUrlProviders: ModelUrlProvider[];
 
     private get customState() {
-        return this.plugin.customState as StructureViewerState
+        return this.plugin.customState as ViewerState
     }
 
-    constructor(target: string | HTMLElement, props: Partial<StructureViewerProps> = {}) {
+    constructor(target: string | HTMLElement, props: Partial<ViewerProps> = {}) {
         target = typeof target === 'string' ? document.getElementById(target)! : target
 
-        this.props = { ...DefaultStructureViewerProps, ...props }
+        const o = { ...DefaultViewerProps, ...props }
 
-        this.plugin = new PluginContext({
-            ...DefaultPluginSpec,
+        const spec: PluginSpec = {
+            actions: [...DefaultPluginSpec.actions],
             behaviors: [
                 ...DefaultPluginSpec.behaviors,
-                PluginSpec.Behavior(RCSBAssemblySymmetry),
-                PluginSpec.Behavior(RCSBValidationReport),
-            ],
-            animations: [
-                AnimateModelIndex
+                ...o.extensions.map(e => Extensions[e]),
             ],
+            animations: [...DefaultPluginSpec.animations || []],
+            customParamEditors: DefaultPluginSpec.customParamEditors,
             layout: {
                 initial: {
-                    isExpanded: false,
-                    showControls: true,
-                    controlsDisplay: 'reactive'
+                    isExpanded: o.layoutIsExpanded,
+                    showControls: o.layoutShowControls,
+                    controlsDisplay: o.layoutControlsDisplay,
                 },
                 controls: {
+                    ...DefaultPluginSpec.layout && DefaultPluginSpec.layout.controls,
+                    top: o.layoutShowSequence ? undefined : 'none',
+                    bottom: o.layoutShowLog ? undefined : 'none',
                     left: 'none',
                     right: ControlsWrapper,
                 }
             },
             components: {
+                ...DefaultPluginSpec.components,
+                remoteState: 'none',
                 viewport: {
-                    view: ViewportWrapper,
+                    view: ViewportWrapper
                 }
             },
             config: [
-                [PluginConfig.VolumeStreaming.DefaultServer, this.props.volumeServerUrl],
+                [PluginConfig.Viewport.ShowExpand, o.viewportShowExpand],
+                [PluginConfig.Viewport.ShowSelectionMode, o.viewportShowSelectionMode],
+                [PluginConfig.Viewport.ShowAnimation, o.viewportShowAnimation],
+                [PluginConfig.VolumeStreaming.DefaultServer, o.volumeStreamingServer],
                 [PluginConfig.Download.DefaultPdbProvider, 'rcsb'],
                 [PluginConfig.Download.DefaultEmdbProvider, 'rcsb']
             ]
-        });
+        };
+
+        this.plugin = new PluginContext(spec);
+        this.modelUrlProviders = o.modelUrlProviders;
 
-        (this.plugin.customState as StructureViewerState) = {
-            props: this.props,
+        (this.plugin.customState as ViewerState) = {
+            showImportControls: o.showImportControls,
             modelLoader: new ModelLoader(this.plugin),
             collapsed: new BehaviorSubject<CollapsedState>({
                 selection: true,
@@ -114,12 +145,6 @@ export class StructureViewer {
 
         const renderer = this.plugin.canvas3d!.props.renderer;
         PluginCommands.Canvas3D.SetSettings(this.plugin, { settings: { renderer: { ...renderer, backgroundColor: ColorNames.white } } });
-        PluginCommands.Layout.Update(this.plugin, { state: { regionState: {
-            bottom: this.props.showImportControls ? 'full' : 'hidden',
-            top: 'full',
-            left: 'hidden',
-            right: 'full'
-        } } });
 
         PluginCommands.Toast.Show(this.plugin, {
             title: 'Welcome',
@@ -135,15 +160,16 @@ export class StructureViewer {
         this.plugin.managers.camera.reset(undefined, durationMs);
     }
 
-    async clear() {
-        await this.customState.modelLoader.clear();
+    clear() {
+        const state = this.plugin.state.data;
+        return PluginCommands.State.RemoveObject(this.plugin, { state, ref: state.tree.root.ref })
     }
 
     async loadPdbId(pdbId: string, props?: PresetProps, matrix?: Mat4) {
-        for (const provider of this.props.modelUrlProviders) {
+        for (const provider of this.modelUrlProviders) {
             try {
                 const p = provider(pdbId)
-                await this.customState.modelLoader.load({ fileOrUrl: p.url, format: p.format }, props, matrix)
+                await this.customState.modelLoader.load({ fileOrUrl: p.url, format: p.format, isBinary: p.isBinary }, props, matrix)
                 break
             } catch (e) {
                 console.warn(`loading '${pdbId}' failed with '${e}', trying next model-loader-provider`)
@@ -158,7 +184,11 @@ export class StructureViewer {
         this.resetCamera(0);
     }
 
-    async loadUrl(url: string, props?: PresetProps, matrix?: Mat4) {
-        await this.customState.modelLoader.load({ fileOrUrl: url, format: 'cif', }, props, matrix)
+    loadStructureFromUrl(url: string, format: BuiltInTrajectoryFormat, isBinary: boolean, props?: PresetProps, matrix?: Mat4) {
+        return this.customState.modelLoader.load({ fileOrUrl: url, format, isBinary }, props, matrix)
+    }
+
+    loadSnapshotFromUrl(url: string, type: PluginState.SnapshotType) {
+        return PluginCommands.State.Snapshots.OpenUrl(this.plugin, { url, type });
     }
 }

src/structure-viewer/types.ts → src/viewer/types.ts

@@ -7,24 +7,21 @@
 import { BehaviorSubject } from 'rxjs';
 import { ModelLoader } from './helpers/model';
 import { PluginContext } from 'molstar/lib/mol-plugin/context';
+import { BuiltInTrajectoryFormat } from 'molstar/lib/mol-plugin-state/formats/trajectory';
 
 export type ModelUrlProvider = (pdbId: string) => {
     url: string,
-    format: SupportedFormats
+    format: BuiltInTrajectoryFormat,
+    isBinary: boolean
 }
 
-export interface StructureViewerProps {
-    volumeServerUrl: string,
-    modelUrlProviders: ModelUrlProvider[],
-    showImportControls: boolean,
-}
-
-export type SupportedFormats = 'cif' | 'bcif'
 export interface LoadParams {
     /** A File object or URL representing a structure file  */
     fileOrUrl: File | string,
     /** A supported file format extension string */
-    format?: SupportedFormats,
+    format: BuiltInTrajectoryFormat,
+    /** Set to true is the data is binary, e.g. bcif mmCIF files */
+    isBinary: boolean
 }
 
 export type CollapsedState = {
@@ -35,11 +32,11 @@ export type CollapsedState = {
     volume: boolean
     custom: boolean
 }
-export interface StructureViewerState {
-    props: StructureViewerProps
+export interface ViewerState {
+    showImportControls: boolean
     modelLoader: ModelLoader
     collapsed: BehaviorSubject<CollapsedState>
 }
-export function StructureViewerState(plugin: PluginContext) {
-    return plugin.customState as StructureViewerState
+export function ViewerState(plugin: PluginContext) {
+    return plugin.customState as ViewerState
 }

src/structure-viewer/ui/controls.tsx → src/viewer/ui/controls.tsx

@@ -6,7 +6,7 @@
 
 import * as React from 'react';
 import { PluginUIComponent } from 'molstar/lib/mol-plugin-ui/base';
-import { StructureViewerState } from '../types';
+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';
@@ -20,7 +20,7 @@ import { VolumeStreamingControls } from 'molstar/lib/mol-plugin-ui/structure/vol
 
 export class StructureTools extends PluginUIComponent {
     get customState() {
-        return StructureViewerState(this.plugin)
+        return ViewerState(this.plugin)
     }
 
     componentDidMount() {
@@ -42,14 +42,9 @@ export class StructureTools extends PluginUIComponent {
 }
 
 export class ControlsWrapper extends PluginUIComponent {
-    get customState() {
-        return StructureViewerState(this.plugin)
-    }
-
     render() {
-        const { showImportControls } = this.customState.props
         return <div className='msp-scrollable-container'>
-            {showImportControls && <ImportControls />}
+            {ViewerState(this.plugin).showImportControls && <ImportControls />}
             <StructureTools />
         </div>;
     }

webpack.config.js

@@ -1,5 +1,4 @@
 const path = require('path');
-const fs = require('fs');
 const webpack = require('webpack');
 const ExtraWatchWebpackPlugin = require('extra-watch-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
@@ -36,7 +35,7 @@ const sharedConfig = {
             __RCSB_MOLSTAR_VERSION__: webpack.DefinePlugin.runtimeValue(() => JSON.stringify(require('./package.json').version), true),
             'process.env.DEBUG': JSON.stringify(process.env.DEBUG)
         }),
-        new MiniCssExtractPlugin({ filename: 'app.css' })
+        new MiniCssExtractPlugin({ filename: 'rcsb-molstar.css' })
     ],
     resolve: {
         modules: [
@@ -53,12 +52,12 @@ const sharedConfig = {
 module.exports = [
     {
         node: { fs: 'empty' },
-        entry: path.resolve(__dirname, `build/src/structure-viewer/index.js`),
+        entry: path.resolve(__dirname, `build/src/viewer/index.js`),
         output: {
-            library: 'app',
+            library: 'rcsbMolstar',
             libraryTarget: 'umd',
-            filename: `app.js`,
-            path: path.resolve(__dirname, `build/dist/structure-viewer`)
+            filename: `rcsb-molstar.js`,
+            path: path.resolve(__dirname, `build/dist/viewer`)
         },
         ...sharedConfig
     },