Mol* 2.0.1, linting, imports

package.json

@@ -48,18 +48,17 @@
         "extra-watch-webpack-plugin": "^1.0.3",
         "file-loader": "^6.2.0",
         "mini-css-extract-plugin": "^1.3.2",
-        "molstar": "^1.3.1",
+        "molstar": "^2.0.1",
         "node-sass": "^5.0.0",
         "raw-loader": "^4.0.2",
         "react": "^17.0.1",
         "react-dom": "^17.0.1",
-        "rxjs": "^6.6.3",
+        "rxjs": "^6.6.6",
         "sass-loader": "^10.1.0",
         "style-loader": "^2.0.0",
-        "tslib": "^2.0.3",
-        "typescript": "4.1.2",
+        "tslib": "^2.1.0",
+        "typescript": "^4.2.3",
         "webpack": "^4.44.1",
         "webpack-cli": "^3.3.12"
-    },
-    "dependencies": {}
+    }
 }

src/viewer/helpers/preset.ts

@@ -6,7 +6,7 @@
 
 import { PluginContext } from 'molstar/lib/mol-plugin/context';
 import { MolScriptBuilder as MS } from 'molstar/lib/mol-script/language/builder';
-import Expression from 'molstar/lib/mol-script/language/expression';
+import { Expression } from 'molstar/lib/mol-script/language/expression';
 import { ParamDefinition as PD } from 'molstar/lib/mol-util/param-definition';
 import { TrajectoryHierarchyPresetProvider } from 'molstar/lib/mol-plugin-state/builder/structure/hierarchy-preset';
 import { ValidationReportGeometryQualityPreset } from 'molstar/lib/extensions/rcsb/validation-report/behavior';

src/viewer/index.ts

@@ -5,7 +5,6 @@
  */
 
 import { BehaviorSubject } from 'rxjs';
-import { DefaultPluginSpec } from 'molstar/lib/mol-plugin';
 import { Plugin } from 'molstar/lib/mol-plugin-ui/plugin';
 import { PluginContext } from 'molstar/lib/mol-plugin/context';
 import { PluginCommands } from 'molstar/lib/mol-plugin/commands';
@@ -29,16 +28,18 @@ import { ObjectKeys } from 'molstar/lib/mol-util/type-helpers';
 import { PluginLayoutControlsDisplay } from 'molstar/lib/mol-plugin/layout';
 import { SuperposeColorThemeProvider } from './helpers/superpose/color';
 import { encodeStructureData, downloadAsZipFile } from './helpers/export';
-import {Structure} from 'molstar/lib/mol-model/structure/structure';
-import {Script} from 'molstar/lib/mol-script/script';
-import {MolScriptBuilder} from 'molstar/lib/mol-script/language/builder';
-import {SetUtils} from 'molstar/lib/mol-util/set';
-import {Loci} from 'molstar/lib/mol-model/loci';
-import {StructureSelection} from 'molstar/lib/mol-model/structure/query';
-import {StructureRef} from 'molstar/lib/mol-plugin-state/manager/structure/hierarchy-state';
-import {StructureSelectionQuery} from 'molstar/lib/mol-plugin-state/helpers/structure-selection-query';
-import {StructureRepresentationRegistry} from 'molstar/lib/mol-repr/structure/registry';
-import {Mp4Export} from 'molstar/lib/extensions/mp4-export';
+import { Structure } from 'molstar/lib/mol-model/structure/structure';
+import { Script } from 'molstar/lib/mol-script/script';
+import { MolScriptBuilder } from 'molstar/lib/mol-script/language/builder';
+import { SetUtils } from 'molstar/lib/mol-util/set';
+import { Loci } from 'molstar/lib/mol-model/loci';
+import { StructureSelection } from 'molstar/lib/mol-model/structure/query';
+import { StructureRef } from 'molstar/lib/mol-plugin-state/manager/structure/hierarchy-state';
+import { StructureSelectionQuery } from 'molstar/lib/mol-plugin-state/helpers/structure-selection-query';
+import { StructureRepresentationRegistry } from 'molstar/lib/mol-repr/structure/registry';
+import { Mp4Export } from 'molstar/lib/extensions/mp4-export';
+import { DefaultPluginUISpec, PluginUISpec } from 'molstar/lib/mol-plugin-ui/spec';
+import { PluginUIContext } from 'molstar/lib/mol-plugin-ui/context';
 
 /** package version, filled in at bundle build time */
 declare const __RCSB_MOLSTAR_VERSION__: string;
@@ -92,42 +93,44 @@ export type ViewerProps = typeof DefaultViewerProps
 
 
 export class Viewer {
-    private readonly plugin: PluginContext;
+    private readonly plugin: PluginUIContext;
     private readonly modelUrlProviders: ModelUrlProvider[];
 
     private get customState() {
         return this.plugin.customState as ViewerState;
     }
 
-    constructor(target: string | HTMLElement, props: Partial<ViewerProps> = {}) {
-        target = typeof target === 'string' ? document.getElementById(target)! : target;
+    constructor(elementOrId: string | HTMLElement, props: Partial<ViewerProps> = {}) {
+        const element = typeof elementOrId === 'string' ? document.getElementById(elementOrId)! : elementOrId;
+        if (!element) throw new Error(`Could not get element with id '${elementOrId}'`);
 
         const o = { ...DefaultViewerProps, ...props };
 
-        const spec: PluginSpec = {
-            actions: [...DefaultPluginSpec.actions],
+        const defaultSpec = DefaultPluginUISpec();
+        const spec: PluginUISpec = {
+            ...defaultSpec,
+            actions: defaultSpec.actions,
             behaviors: [
-                ...DefaultPluginSpec.behaviors,
+                ...defaultSpec.behaviors,
                 ...o.extensions.map(e => Extensions[e]),
             ],
-            animations: [...DefaultPluginSpec.animations || []],
-            customParamEditors: DefaultPluginSpec.customParamEditors,
+            animations: [...defaultSpec.animations || []],
             layout: {
                 initial: {
                     isExpanded: o.layoutIsExpanded,
                     showControls: o.layoutShowControls,
                     controlsDisplay: o.layoutControlsDisplay,
                 },
+            },
+            components: {
+                ...defaultSpec.components,
                 controls: {
-                    ...DefaultPluginSpec.layout && DefaultPluginSpec.layout.controls,
+                    ...defaultSpec.components?.controls,
                     top: o.layoutShowSequence ? undefined : 'none',
                     bottom: o.layoutShowLog ? undefined : 'none',
                     left: 'none',
                     right: ControlsWrapper,
-                }
-            },
-            components: {
-                ...DefaultPluginSpec.components,
+                },
                 remoteState: 'none',
             },
             config: [
@@ -140,7 +143,7 @@ export class Viewer {
             ]
         };
 
-        this.plugin = new PluginContext(spec);
+        this.plugin = new PluginUIContext(spec);
         this.modelUrlProviders = o.modelUrlProviders;
 
         (this.plugin.customState as ViewerState) = {
@@ -162,7 +165,7 @@ export class Viewer {
         };
 
         this.plugin.init();
-        ReactDOM.render(React.createElement(Plugin, { plugin: this.plugin }), target);
+        ReactDOM.render(React.createElement(Plugin, { plugin: this.plugin }), element);
 
         // TODO Check why this.plugin.canvas3d can be null
         // this.plugin.canvas3d can be null. The value is not assigned until React Plugin component is mounted

src/viewer/ui/controls.tsx

@@ -16,7 +16,7 @@ import { StructureSuperpositionControls } from 'molstar/lib/mol-plugin-ui/struct
 import { StructureComponentControls } from 'molstar/lib/mol-plugin-ui/structure/components';
 import { VolumeStreamingControls } from 'molstar/lib/mol-plugin-ui/structure/volume';
 import { SessionControls } from './session';
-import {StrucmotifSubmitControls} from './strucmotif';
+import { StrucmotifSubmitControls } from './strucmotif';
 
 export class StructureTools extends PluginUIComponent {
     get customState() {

src/viewer/ui/exchanges.tsx

@@ -4,8 +4,8 @@
  * @author Sebastian Bittrich <sebastian.bittrich@rcsb.org>
  */
 import * as React from 'react';
-import {Button} from 'molstar/lib/mol-plugin-ui/controls/common';
-import {MAX_EXCHANGES, Residue} from './strucmotif';
+import { Button } from 'molstar/lib/mol-plugin-ui/controls/common';
+import { MAX_EXCHANGES, Residue } from './strucmotif';
 
 export const DefaultExchanges = [
     ['ALA', 'Alanine'],

src/viewer/ui/strucmotif.tsx

@@ -5,8 +5,8 @@
  */
 
 import * as React from 'react';
-import {CollapsableControls, PurePluginUIComponent} from 'molstar/lib/mol-plugin-ui/base';
-import {Button, IconButton, ToggleButton} from 'molstar/lib/mol-plugin-ui/controls/common';
+import { CollapsableControls, PurePluginUIComponent } from 'molstar/lib/mol-plugin-ui/base';
+import { Button, IconButton, ToggleButton } from 'molstar/lib/mol-plugin-ui/controls/common';
 import {
     ArrowDownwardSvg,
     ArrowUpwardSvg,
@@ -15,16 +15,16 @@ import {
     Icon,
     TuneSvg
 } from 'molstar/lib/mol-plugin-ui/controls/icons';
-import {ActionMenu} from 'molstar/lib/mol-plugin-ui/controls/action-menu';
-import {StructureSelectionHistoryEntry} from 'molstar/lib/mol-plugin-state/manager/structure/selection';
-import {StructureElement, StructureProperties} from 'molstar/lib/mol-model/structure/structure';
-import {ToggleSelectionModeButton} from 'molstar/lib/mol-plugin-ui/structure/selection';
-import {OrderedSet} from 'molstar/lib/mol-data/int';
-import {ExchangesControl} from './exchanges';
-import Vec3 from 'molstar/lib/mol-math/linear-algebra/3d/vec3';
-import Structure from 'molstar/lib/mol-model/structure/structure/structure';
-import Unit from 'molstar/lib/mol-model/structure/structure/unit';
-import {UnitIndex} from 'molstar/lib/mol-model/structure/structure/element/element';
+import { ActionMenu } from 'molstar/lib/mol-plugin-ui/controls/action-menu';
+import { StructureSelectionHistoryEntry } from 'molstar/lib/mol-plugin-state/manager/structure/selection';
+import { StructureElement, StructureProperties } from 'molstar/lib/mol-model/structure/structure';
+import { ToggleSelectionModeButton } from 'molstar/lib/mol-plugin-ui/structure/selection';
+import { OrderedSet } from 'molstar/lib/mol-data/int';
+import { ExchangesControl } from './exchanges';
+import { Vec3 } from 'molstar/lib/mol-math/linear-algebra/3d/vec3';
+import { Structure } from 'molstar/lib/mol-model/structure/structure/structure';
+import { Unit } from 'molstar/lib/mol-model/structure/structure/unit';
+import { UnitIndex } from 'molstar/lib/mol-model/structure/structure/element/element';
 
 const ADVANCED_SEARCH_URL = 'https://rcsb.org/search?query=';
 const RETURN_TYPE = '&return_type=assembly';