updated molstar and packages

package.json

@@ -37,30 +37,29 @@
     "license": "MIT",
     "devDependencies": {
         "@types/argparse": "^1.0.38",
-        "@types/node": "^13.13.2",
+        "@types/node": "^13.13.5",
         "@types/node-fetch": "^2.5.7",
-        "@types/react": "^16.9.34",
-        "@types/react-dom": "^16.9.6",
-        "@typescript-eslint/eslint-plugin": "^2.29.0",
-        "@typescript-eslint/parser": "^2.29.0",
-        "concurrently": "^5.1.0",
+        "@types/react": "^16.9.35",
+        "@types/react-dom": "^16.9.8",
+        "@typescript-eslint/eslint-plugin": "^2.32.0",
+        "@typescript-eslint/parser": "^2.32.0",
+        "concurrently": "^5.2.0",
         "cpx2": "^2.0.0",
         "css-loader": "^3.5.3",
-        "eslint": "^6.8.0",
+        "eslint": "^7.0.0",
         "extra-watch-webpack-plugin": "^1.0.3",
         "file-loader": "^6.0.0",
         "mini-css-extract-plugin": "^0.9.0",
-        "molstar": "^0.7.0-dev.10",
+        "molstar": "^0.7.1-dev.3",
         "node-fetch": "^2.6.0",
-        "node-sass": "^4.14.0",
+        "node-sass": "^4.14.1",
         "raw-loader": "^4.0.1",
         "react": "^16.13.1",
         "react-dom": "^16.13.1",
-        "resolve-url-loader": "^3.1.1",
         "rxjs": "^6.5.5",
         "sass-loader": "^8.0.2",
-        "style-loader": "^1.2.0",
-        "tslib": "^1.11.1",
+        "style-loader": "^1.2.1",
+        "tslib": "^1.11.2",
         "typescript": "3.8.3",
         "webpack": "^4.43.0",
         "webpack-cli": "^3.3.11"

src/structure-viewer/helpers/preset.ts

@@ -98,7 +98,7 @@ type DensityProps = {
 export type PresetProps = ValidationProps | StandardProps | SymmetryProps | FeatureProps | DensityProps
 
 const RcsbParams = (a: PluginStateObject.Molecule.Trajectory | undefined, plugin: PluginContext) => ({
-    preset: PD.Value<PresetProps>({ kind: 'standard', assemblyId: 'deposited' }, { isHidden: true })
+    preset: PD.Value<PresetProps>({ kind: 'standard', assemblyId: '' }, { isHidden: true })
 });
 
 export const RcsbPreset = TrajectoryHierarchyPresetProvider({
@@ -114,8 +114,8 @@ export const RcsbPreset = TrajectoryHierarchyPresetProvider({
 
         const modelParams = { modelIndex: p.modelIndex || 0 }
 
-        const structureParams: RootStructureDefinition.Params = { name: 'deposited', params: {} }
-        if (p.assemblyId && p.assemblyId !== 'deposited' && p.assemblyId !== '0') {
+        const structureParams: RootStructureDefinition.Params = { name: 'model', params: {} }
+        if (p.assemblyId && p.assemblyId !== '' && p.assemblyId !== '0') {
             Object.assign(structureParams, {
                 name: 'assembly',
                 params: { id: p.assemblyId }

src/structure-viewer/index.ts

@@ -82,7 +82,6 @@ export class StructureViewer {
                 controls: {
                     left: 'none',
                     right: ControlsWrapper,
-                    bottom: 'none'
                 }
             },
             components: {
@@ -90,9 +89,9 @@ export class StructureViewer {
                     view: ViewportWrapper,
                 }
             },
-            config: new Map([
+            config: [
                 [PluginConfig.VolumeStreaming.DefaultServer, this.props.volumeServerUrl]
-            ])
+            ]
         });
 
         (this.plugin.customState as StructureViewerState) = {
@@ -101,6 +100,7 @@ export class StructureViewer {
             collapsed: new BehaviorSubject<CollapsedState>({
                 selection: true,
                 measurements: true,
+                superposition: true,
                 component: false,
                 volume: true,
                 custom: true,
@@ -110,7 +110,13 @@ export class StructureViewer {
         ReactDOM.render(React.createElement(Plugin, { plugin: this.plugin }), target)
 
         const renderer = this.plugin.canvas3d!.props.renderer;
-        PluginCommands.Canvas3D.SetSettings(this.plugin, { settings: { renderer: { ...renderer, backgroundColor: ColorNames.white } } })
+        PluginCommands.Canvas3D.SetSettings(this.plugin, { settings: { renderer: { ...renderer, backgroundColor: ColorNames.white } } });
+        PluginCommands.Layout.Update(this.plugin, { state: { regionState: {
+            bottom: this.props.showOpenFileControls ? 'full' : 'hidden',
+            top: 'full',
+            left: 'hidden',
+            right: 'full'
+        } } });
 
         PluginCommands.Toast.Show(this.plugin, {
             title: 'Welcome',

src/structure-viewer/types.ts

@@ -30,6 +30,7 @@ export interface LoadParams {
 export type CollapsedState = {
     selection: boolean
     measurements: boolean
+    superposition: boolean
     component: boolean
     volume: boolean
     custom: boolean

src/structure-viewer/ui/controls.tsx

@@ -11,9 +11,10 @@ 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 { OpenFile } from './open';
+import { OpenFilesControls } from './open';
 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';
 
@@ -30,9 +31,10 @@ export class StructureTools extends PluginUIComponent {
         const collapsed = this.customState.collapsed.value
         return <>
             <StructureSourceControls />
-            <StructureMeasurementsControls initiallyCollapsed={collapsed.measurements}  />
-            <StructureComponentControls initiallyCollapsed={collapsed.component}  />
-            <VolumeStreamingControls header='Density' initiallyCollapsed={collapsed.volume}  />
+            <StructureMeasurementsControls initiallyCollapsed={collapsed.measurements} />
+            <StructureSuperpositionControls initiallyCollapsed={collapsed.superposition} />
+            <StructureComponentControls initiallyCollapsed={collapsed.component} />
+            <VolumeStreamingControls header='Density' initiallyCollapsed={collapsed.volume} />
 
             <CustomStructureControls initiallyCollapsed={collapsed.custom} />
         </>;
@@ -47,7 +49,7 @@ export class ControlsWrapper extends PluginUIComponent {
     render() {
         const { showOpenFileControls } = this.customState.props
         return <div className='msp-scrollable-container'>
-            {showOpenFileControls && <OpenFile initiallyCollapsed={false} />}
+            {showOpenFileControls && <OpenFilesControls />}
             <StructureTools />
         </div>;
     }

src/structure-viewer/ui/open.tsx

@@ -5,36 +5,13 @@
  */
 
 import * as React from 'react';
-import { ParamDefinition as PD } from 'molstar/lib/mol-util/param-definition';
-import { StateAction, StateTransform } from 'molstar/lib/mol-state';
-import { PluginStateObject } from 'molstar/lib/mol-plugin-state/objects';
-import { PluginContext } from 'molstar/lib/mol-plugin/context';
-import { Task } from 'molstar/lib/mol-task';
+import { StateTransform } from 'molstar/lib/mol-state';
+import { OpenFiles } from 'molstar/lib/mol-plugin-state/actions/file';
 import { ApplyActionControl } from 'molstar/lib/mol-plugin-ui/state/apply-action';
 import { PluginUIComponent } from 'molstar/lib/mol-plugin-ui/base';
-import { StructureViewerState } from '../types';
 
-const OpenFileAction = StateAction.build({
-    display: { name: 'Open mmCIF File', description: 'Load a file and create its default visuals' },
-    from: PluginStateObject.Root,
-    params: (a, ctx: PluginContext) => {
-        return {
-            file: PD.File({ accept: '.cif, .mcif, .mmcif, .bcif, .gz, .zip' })
-        }
-    }
-})(({ params, state }, ctx: PluginContext) => Task.create('Open File', async taskCtx => {
-    const file = params.file?.file;
-    if (!file) {
-        throw new Error('no file selected')
-    }
-    if (file.type !== 'cif' && file.type !== 'bcif') {
-        throw new Error(`unsupported file format '${file.type}`)
-    }
-    await StructureViewerState(ctx).modelLoader.load({ fileOrUrl: file, format: file.type, })
-}));
-
-export class OpenFile extends PluginUIComponent<{ initiallyCollapsed?: boolean }> {
+export class OpenFilesControls extends PluginUIComponent {
     render() {
-        return <ApplyActionControl key={`${OpenFileAction.id}`} state={this.plugin.state.data} action={OpenFileAction} nodeRef={StateTransform.RootRef} initiallyCollapsed={this.props.initiallyCollapsed} />
+        return <ApplyActionControl key={`${OpenFiles.id}`} state={this.plugin.state.data} action={OpenFiles} nodeRef={StateTransform.RootRef} initiallyCollapsed={false} />
     }
 }

webpack.config.js

@@ -8,7 +8,7 @@ const sharedConfig = {
     module: {
         rules: [
             {
-                test: /\.(woff2?|ttf|otf|eot|svg|html|ico)$/,
+                test: /\.(html|ico)$/,
                 use: [{
                     loader: 'file-loader',
                     options: { name: '[name].[ext]' }
@@ -19,7 +19,6 @@ const sharedConfig = {
                 use: [
                     MiniCssExtractPlugin.loader,
                     { loader: 'css-loader', options: { sourceMap: false } },
-                    { loader: 'resolve-url-loader', options: { sourceMap: false } },
                     { loader: 'sass-loader', options: { sourceMap: false } },
                 ]
             }