molstar 3.3.0 → 3.5.0

package/lib/mol-plugin-ui/custom/volume.js

@@ -83,10 +83,10 @@ var Channel = /** @class */ (function (_super) {
         var step = toPrecision(isRelative ? Math.round(((vMax - vMin) / sigma)) / 100 : sigma / 100, 2);
         var ctrlMin = isRelative ? relMin : vMin;
         var ctrlMax = isRelative ? relMax : vMax;
-        return _jsx(ExpandableControlRow, { label: props.label + (props.isRelative ? ' \u03C3' : ''), colorStripe: channel.color, pivot: _jsxs("div", __assign({ className: 'msp-volume-channel-inline-controls' }, { children: [_jsx(Slider, { value: value, min: ctrlMin, max: ctrlMax, step: step, onChange: function (v) { return props.changeIso(props.name, v, isRelative); }, disabled: props.params.isDisabled, onEnter: props.params.events.onEnter }, void 0), _jsx(IconButton, { svg: this.getVisible() ? VisibilityOutlinedSvg : VisibilityOffOutlinedSvg, onClick: this.toggleVisible, toggleState: false, disabled: props.params.isDisabled }, void 0)] }), void 0), controls: _jsx(ParameterControls, { onChange: function (_a) {
+        return _jsx(ExpandableControlRow, { label: props.label + (props.isRelative ? ' \u03C3' : ''), colorStripe: channel.color, pivot: _jsxs("div", __assign({ className: 'msp-volume-channel-inline-controls' }, { children: [_jsx(Slider, { value: value, min: ctrlMin, max: ctrlMax, step: step, onChange: function (v) { return props.changeIso(props.name, v, isRelative); }, disabled: props.params.isDisabled, onEnter: props.params.events.onEnter }), _jsx(IconButton, { svg: this.getVisible() ? VisibilityOutlinedSvg : VisibilityOffOutlinedSvg, onClick: this.toggleVisible, toggleState: false, disabled: props.params.isDisabled })] })), controls: _jsx(ParameterControls, { onChange: function (_a) {
                     var name = _a.name, value = _a.value;
                     return props.changeParams(props.name, name, value);
-                }, params: ChannelParams, values: channel, onEnter: props.params.events.onEnter, isDisabled: props.params.isDisabled }, void 0) }, void 0);
+                }, params: ChannelParams, values: channel, onEnter: props.params.events.onEnter, isDisabled: props.params.isDisabled }) });
     };
     return Channel;
 }(PluginUIComponent));
@@ -240,9 +240,9 @@ var VolumeStreamingCustomControls = /** @class */ (function (_super) {
             }
         };
         if (isOff) {
-            return _jsx(ParameterControls, { onChange: this.changeOption, params: OptionsParams, values: options, onEnter: this.props.events.onEnter, isDisabled: this.props.isDisabled }, void 0);
+            return _jsx(ParameterControls, { onChange: this.changeOption, params: OptionsParams, values: options, onEnter: this.props.events.onEnter, isDisabled: this.props.isDisabled });
         }
-        return _jsxs(_Fragment, { children: [!isEM && _jsx(Channel, { label: '2Fo-Fc', name: '2fo-fc', bCell: this.props.bCell, channels: params.entry.params.channels, changeIso: this.changeIso, changeParams: this.changeParams, isRelative: isRelative, params: this.props, stats: sampling.valuesInfo[0], isUnbounded: isUnbounded }, void 0), !isEM && _jsx(Channel, { label: 'Fo-Fc(+ve)', name: 'fo-fc(+ve)', bCell: this.props.bCell, channels: params.entry.params.channels, changeIso: this.changeIso, changeParams: this.changeParams, isRelative: isRelative, params: this.props, stats: sampling.valuesInfo[1], isUnbounded: isUnbounded }, void 0), !isEM && _jsx(Channel, { label: 'Fo-Fc(-ve)', name: 'fo-fc(-ve)', bCell: this.props.bCell, channels: params.entry.params.channels, changeIso: this.changeIso, changeParams: this.changeParams, isRelative: isRelative, params: this.props, stats: sampling.valuesInfo[1], isUnbounded: isUnbounded }, void 0), isEM && _jsx(Channel, { label: 'EM', name: 'em', bCell: this.props.bCell, channels: params.entry.params.channels, changeIso: this.changeIso, changeParams: this.changeParams, isRelative: isRelative, params: this.props, stats: sampling.valuesInfo[0], isUnbounded: isUnbounded }, void 0), _jsx(ParameterControls, { onChange: this.changeOption, params: OptionsParams, values: options, onEnter: this.props.events.onEnter, isDisabled: this.props.isDisabled }, void 0)] }, void 0);
+        return _jsxs(_Fragment, { children: [!isEM && _jsx(Channel, { label: '2Fo-Fc', name: '2fo-fc', bCell: this.props.bCell, channels: params.entry.params.channels, changeIso: this.changeIso, changeParams: this.changeParams, isRelative: isRelative, params: this.props, stats: sampling.valuesInfo[0], isUnbounded: isUnbounded }), !isEM && _jsx(Channel, { label: 'Fo-Fc(+ve)', name: 'fo-fc(+ve)', bCell: this.props.bCell, channels: params.entry.params.channels, changeIso: this.changeIso, changeParams: this.changeParams, isRelative: isRelative, params: this.props, stats: sampling.valuesInfo[1], isUnbounded: isUnbounded }), !isEM && _jsx(Channel, { label: 'Fo-Fc(-ve)', name: 'fo-fc(-ve)', bCell: this.props.bCell, channels: params.entry.params.channels, changeIso: this.changeIso, changeParams: this.changeParams, isRelative: isRelative, params: this.props, stats: sampling.valuesInfo[1], isUnbounded: isUnbounded }), isEM && _jsx(Channel, { label: 'EM', name: 'em', bCell: this.props.bCell, channels: params.entry.params.channels, changeIso: this.changeIso, changeParams: this.changeParams, isRelative: isRelative, params: this.props, stats: sampling.valuesInfo[0], isUnbounded: isUnbounded }), _jsx(ParameterControls, { onChange: this.changeOption, params: OptionsParams, values: options, onEnter: this.props.events.onEnter, isDisabled: this.props.isDisabled })] });
     };
     return VolumeStreamingCustomControls;
 }(PluginUIComponent));

package/lib/mol-plugin-ui/left-panel.d.ts

@@ -1,11 +1,18 @@
 /**
- * Copyright (c) 2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2019-2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
  *
  * @author David Sehnal <david.sehnal@gmail.com>
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
 /// <reference types="react" />
 import { LeftPanelTabName } from '../mol-plugin/layout';
 import { PluginUIComponent } from './base';
+export declare class CustomImportControls extends PluginUIComponent<{
+    initiallyCollapsed?: boolean;
+}> {
+    componentDidMount(): void;
+    render(): JSX.Element | null;
+}
 export declare class LeftPanelControls extends PluginUIComponent<{}, {
     tab: LeftPanelTabName;
 }> {

package/lib/mol-plugin-ui/left-panel.js

@@ -1,5 +1,5 @@
 import { __assign, __extends } from "tslib";
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Canvas3DParams } from '../mol-canvas3d/canvas3d';
 import { PluginCommands } from '../mol-plugin/commands';
 import { StateTransform } from '../mol-state';
@@ -11,11 +11,32 @@ import { RemoteStateSnapshots, StateSnapshots } from './state/snapshots';
 import { StateTree } from './state/tree';
 import { HelpContent } from './viewport/help';
 import { HomeOutlinedSvg, AccountTreeOutlinedSvg, TuneSvg, HelpOutlineSvg, SaveOutlinedSvg, DeleteOutlinedSvg } from './controls/icons';
+var CustomImportControls = /** @class */ (function (_super) {
+    __extends(CustomImportControls, _super);
+    function CustomImportControls() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    CustomImportControls.prototype.componentDidMount = function () {
+        var _this = this;
+        this.subscribe(this.plugin.state.behaviors.events.changed, function () { return _this.forceUpdate(); });
+    };
+    CustomImportControls.prototype.render = function () {
+        var _this = this;
+        var controls = [];
+        this.plugin.customImportControls.forEach(function (Controls, key) {
+            controls.push(_jsx(Controls, { initiallyCollapsed: _this.props.initiallyCollapsed }, key));
+        });
+        return controls.length > 0 ? _jsx(_Fragment, { children: controls }) : null;
+    };
+    return CustomImportControls;
+}(PluginUIComponent));
+export { CustomImportControls };
 var LeftPanelControls = /** @class */ (function (_super) {
     __extends(LeftPanelControls, _super);
     function LeftPanelControls() {
+        var _this = this;
         var _a;
-        var _this = _super.apply(this, arguments) || this;
+        _this = _super.apply(this, arguments) || this;
         _this.state = { tab: _this.plugin.behaviors.layout.leftPanelTabName.value };
         _this.set = function (tab) {
             if (_this.state.tab === tab) {
@@ -29,12 +50,12 @@ var LeftPanelControls = /** @class */ (function (_super) {
             }
         };
         _this.tabs = {
-            'none': _jsx(_Fragment, {}, void 0),
-            'root': _jsxs(_Fragment, { children: [_jsx(SectionHeader, { icon: HomeOutlinedSvg, title: 'Home' }, void 0), _jsx(StateObjectActions, { state: _this.plugin.state.data, nodeRef: StateTransform.RootRef, hideHeader: true, initiallyCollapsed: true, alwaysExpandFirst: true }, void 0), ((_a = _this.plugin.spec.components) === null || _a === void 0 ? void 0 : _a.remoteState) !== 'none' && _jsx(RemoteStateSnapshots, { listOnly: true }, void 0)] }, void 0),
-            'data': _jsxs(_Fragment, { children: [_jsx(SectionHeader, { icon: AccountTreeOutlinedSvg, title: _jsxs(_Fragment, { children: [_jsx(RemoveAllButton, {}, void 0), " State Tree"] }, void 0) }, void 0), _jsx(StateTree, { state: _this.plugin.state.data }, void 0)] }, void 0),
-            'states': _jsx(StateSnapshots, {}, void 0),
-            'settings': _jsxs(_Fragment, { children: [_jsx(SectionHeader, { icon: TuneSvg, title: 'Plugin Settings' }, void 0), _jsx(FullSettings, {}, void 0)] }, void 0),
-            'help': _jsxs(_Fragment, { children: [_jsx(SectionHeader, { icon: HelpOutlineSvg, title: 'Help' }, void 0), _jsx(HelpContent, {}, void 0)] }, void 0)
+            'none': _jsx(_Fragment, {}),
+            'root': _jsxs(_Fragment, { children: [_jsx(SectionHeader, { icon: HomeOutlinedSvg, title: 'Home' }), _jsx(StateObjectActions, { state: _this.plugin.state.data, nodeRef: StateTransform.RootRef, hideHeader: true, initiallyCollapsed: true, alwaysExpandFirst: true }), _jsx(CustomImportControls, {}), ((_a = _this.plugin.spec.components) === null || _a === void 0 ? void 0 : _a.remoteState) !== 'none' && _jsx(RemoteStateSnapshots, { listOnly: true })] }),
+            'data': _jsxs(_Fragment, { children: [_jsx(SectionHeader, { icon: AccountTreeOutlinedSvg, title: _jsxs(_Fragment, { children: [_jsx(RemoveAllButton, {}), " State Tree"] }) }), _jsx(StateTree, { state: _this.plugin.state.data })] }),
+            'states': _jsx(StateSnapshots, {}),
+            'settings': _jsxs(_Fragment, { children: [_jsx(SectionHeader, { icon: TuneSvg, title: 'Plugin Settings' }), _jsx(FullSettings, {})] }),
+            'help': _jsxs(_Fragment, { children: [_jsx(SectionHeader, { icon: HelpOutlineSvg, title: 'Help' }), _jsx(HelpContent, {})] })
         };
         return _this;
     }
@@ -58,7 +79,7 @@ var LeftPanelControls = /** @class */ (function (_super) {
     LeftPanelControls.prototype.render = function () {
         var _this = this;
         var tab = this.state.tab;
-        return _jsxs("div", __assign({ className: 'msp-left-panel-controls' }, { children: [_jsxs("div", __assign({ className: 'msp-left-panel-controls-buttons' }, { children: [_jsx(IconButton, { svg: HomeOutlinedSvg, toggleState: tab === 'root', transparent: true, onClick: function () { return _this.set('root'); }, title: 'Home' }, void 0), _jsx(DataIcon, { set: this.set }, void 0), _jsx(IconButton, { svg: SaveOutlinedSvg, toggleState: tab === 'states', transparent: true, onClick: function () { return _this.set('states'); }, title: 'Plugin State' }, void 0), _jsx(IconButton, { svg: HelpOutlineSvg, toggleState: tab === 'help', transparent: true, onClick: function () { return _this.set('help'); }, title: 'Help' }, void 0), _jsx("div", __assign({ className: 'msp-left-panel-controls-buttons-bottom' }, { children: _jsx(IconButton, { svg: TuneSvg, toggleState: tab === 'settings', transparent: true, onClick: function () { return _this.set('settings'); }, title: 'Settings' }, void 0) }), void 0)] }), void 0), _jsx("div", __assign({ className: 'msp-scrollable-container' }, { children: this.tabs[tab] }), void 0)] }), void 0);
+        return _jsxs("div", __assign({ className: 'msp-left-panel-controls' }, { children: [_jsxs("div", __assign({ className: 'msp-left-panel-controls-buttons' }, { children: [_jsx(IconButton, { svg: HomeOutlinedSvg, toggleState: tab === 'root', transparent: true, onClick: function () { return _this.set('root'); }, title: 'Home' }), _jsx(DataIcon, { set: this.set }), _jsx(IconButton, { svg: SaveOutlinedSvg, toggleState: tab === 'states', transparent: true, onClick: function () { return _this.set('states'); }, title: 'Plugin State' }), _jsx(IconButton, { svg: HelpOutlineSvg, toggleState: tab === 'help', transparent: true, onClick: function () { return _this.set('help'); }, title: 'Help' }), _jsx("div", __assign({ className: 'msp-left-panel-controls-buttons-bottom' }, { children: _jsx(IconButton, { svg: TuneSvg, toggleState: tab === 'settings', transparent: true, onClick: function () { return _this.set('settings'); }, title: 'Settings' }) }))] })), _jsx("div", __assign({ className: 'msp-scrollable-container' }, { children: this.tabs[tab] }))] }));
     };
     return LeftPanelControls;
 }(PluginUIComponent));
@@ -92,7 +113,7 @@ var DataIcon = /** @class */ (function (_super) {
     };
     DataIcon.prototype.render = function () {
         var _this = this;
-        return _jsx(IconButton, { svg: AccountTreeOutlinedSvg, toggleState: this.tab === 'data', transparent: true, onClick: function () { return _this.props.set('data'); }, title: 'State Tree', style: { position: 'relative' }, extraContent: this.state.changed ? _jsx("div", { className: 'msp-left-panel-controls-button-data-dirty' }, void 0) : void 0 }, void 0);
+        return _jsx(IconButton, { svg: AccountTreeOutlinedSvg, toggleState: this.tab === 'data', transparent: true, onClick: function () { return _this.props.set('data'); }, title: 'State Tree', style: { position: 'relative' }, extraContent: this.state.changed ? _jsx("div", { className: 'msp-left-panel-controls-button-data-dirty' }) : void 0 });
     };
     return DataIcon;
 }(PluginUIComponent));
@@ -117,7 +138,7 @@ var FullSettings = /** @class */ (function (_super) {
         });
     };
     FullSettings.prototype.render = function () {
-        return _jsxs(_Fragment, { children: [this.plugin.canvas3d && _jsxs(_Fragment, { children: [_jsx(SectionHeader, { title: 'Viewport' }, void 0), _jsx(ParameterControls, { params: Canvas3DParams, values: this.plugin.canvas3d.props, onChange: this.setSettings }, void 0)] }, void 0), _jsx(SectionHeader, { title: 'Behavior' }, void 0), _jsx(StateTree, { state: this.plugin.state.behaviors }, void 0)] }, void 0);
+        return _jsxs(_Fragment, { children: [this.plugin.canvas3d && _jsxs(_Fragment, { children: [_jsx(SectionHeader, { title: 'Viewport' }), _jsx(ParameterControls, { params: Canvas3DParams, values: this.plugin.canvas3d.props, onChange: this.setSettings })] }), _jsx(SectionHeader, { title: 'Behavior' }), _jsx(StateTree, { state: this.plugin.state.behaviors })] });
     };
     return FullSettings;
 }(PluginUIComponent));
@@ -146,7 +167,7 @@ var RemoveAllButton = /** @class */ (function (_super) {
         var count = this.plugin.state.data.tree.children.get(StateTransform.RootRef).size;
         if (count === 0)
             return null;
-        return _jsx(IconButton, { svg: DeleteOutlinedSvg, onClick: this.remove, title: 'Remove All', style: { display: 'inline-block' }, small: true, className: 'msp-no-hover-outline', transparent: true }, void 0);
+        return _jsx(IconButton, { svg: DeleteOutlinedSvg, onClick: this.remove, title: 'Remove All', style: { display: 'inline-block' }, small: true, className: 'msp-no-hover-outline', transparent: true });
     };
     return RemoveAllButton;
 }(PluginUIComponent));

package/lib/mol-plugin-ui/plugin.js

@@ -20,10 +20,10 @@ var Plugin = /** @class */ (function (_super) {
         return _super !== null && _super.apply(this, arguments) || this;
     }
     Plugin.prototype.region = function (kind, element) {
-        return _jsx("div", __assign({ className: "msp-layout-region msp-layout-".concat(kind) }, { children: _jsx("div", __assign({ className: 'msp-layout-static' }, { children: element }), void 0) }), void 0);
+        return _jsx("div", __assign({ className: "msp-layout-region msp-layout-".concat(kind) }, { children: _jsx("div", __assign({ className: 'msp-layout-static' }, { children: element })) }));
     };
     Plugin.prototype.render = function () {
-        return _jsx(PluginReactContext.Provider, __assign({ value: this.props.plugin }, { children: _jsx(Layout, {}, void 0) }), void 0);
+        return _jsx(PluginReactContext.Provider, __assign({ value: this.props.plugin }, { children: _jsx(Layout, {}) }));
     };
     return Plugin;
 }(React.Component));
@@ -34,7 +34,7 @@ var PluginContextContainer = /** @class */ (function (_super) {
         return _super !== null && _super.apply(this, arguments) || this;
     }
     PluginContextContainer.prototype.render = function () {
-        return _jsx(PluginReactContext.Provider, __assign({ value: this.props.plugin }, { children: _jsx("div", __assign({ className: 'msp-plugin' }, { children: this.props.children }), void 0) }), void 0);
+        return _jsx(PluginReactContext.Provider, __assign({ value: this.props.plugin }, { children: _jsx("div", __assign({ className: 'msp-plugin' }, { children: this.props.children })) }));
     };
     return PluginContextContainer;
 }(React.Component));
@@ -90,7 +90,7 @@ var Layout = /** @class */ (function (_super) {
         this.subscribe(this.plugin.layout.events.updated, function () { return _this.forceUpdate(); });
     };
     Layout.prototype.region = function (kind, Element) {
-        return _jsx("div", __assign({ className: "msp-layout-region msp-layout-".concat(kind) }, { children: _jsx("div", __assign({ className: 'msp-layout-static' }, { children: Element ? _jsx(Element, {}, void 0) : null }), void 0) }), void 0);
+        return _jsx("div", __assign({ className: "msp-layout-region msp-layout-".concat(kind) }, { children: _jsx("div", __assign({ className: 'msp-layout-static' }, { children: Element ? _jsx(Element, {}) : null })) }));
     };
     Object.defineProperty(Layout.prototype, "layoutVisibilityClassName", {
         get: function () {
@@ -138,7 +138,7 @@ var Layout = /** @class */ (function (_super) {
         var layout = this.plugin.layout.state;
         var controls = ((_a = this.plugin.spec.components) === null || _a === void 0 ? void 0 : _a.controls) || {};
         var viewport = ((_c = (_b = this.plugin.spec.components) === null || _b === void 0 ? void 0 : _b.viewport) === null || _c === void 0 ? void 0 : _c.view) || DefaultViewport;
-        return _jsx("div", __assign({ className: 'msp-plugin' }, { children: _jsxs("div", __assign({ className: this.layoutClassName, onDragEnter: this.onDragEnter }, { children: [_jsxs("div", __assign({ className: this.layoutVisibilityClassName }, { children: [this.region('main', viewport), layout.showControls && controls.top !== 'none' && this.region('top', controls.top || SequenceView), layout.showControls && controls.left !== 'none' && this.region('left', controls.left || LeftPanelControls), layout.showControls && controls.right !== 'none' && this.region('right', controls.right || ControlsWrapper), layout.showControls && controls.bottom !== 'none' && this.region('bottom', controls.bottom || Log)] }), void 0), !((_d = this.plugin.spec.components) === null || _d === void 0 ? void 0 : _d.hideTaskOverlay) && _jsx(OverlayTaskProgress, {}, void 0), _jsx(DragOverlay, { plugin: this.plugin, showDragOverlay: this.showDragOverlay }, void 0)] }), void 0) }), void 0);
+        return _jsx("div", __assign({ className: 'msp-plugin' }, { children: _jsxs("div", __assign({ className: this.layoutClassName, onDragEnter: this.onDragEnter }, { children: [_jsxs("div", __assign({ className: this.layoutVisibilityClassName }, { children: [this.region('main', viewport), layout.showControls && controls.top !== 'none' && this.region('top', controls.top || SequenceView), layout.showControls && controls.left !== 'none' && this.region('left', controls.left || LeftPanelControls), layout.showControls && controls.right !== 'none' && this.region('right', controls.right || ControlsWrapper), layout.showControls && controls.bottom !== 'none' && this.region('bottom', controls.bottom || Log)] })), !((_d = this.plugin.spec.components) === null || _d === void 0 ? void 0 : _d.hideTaskOverlay) && _jsx(OverlayTaskProgress, {}), _jsx(DragOverlay, { plugin: this.plugin, showDragOverlay: this.showDragOverlay })] })) }));
     };
     return Layout;
 }(PluginUIComponent));
@@ -187,7 +187,7 @@ function DragOverlay(_a) {
         e.preventDefault();
         e.stopPropagation();
     };
-    return _jsx("div", __assign({ className: 'msp-drag-drop-overlay', style: { display: show ? 'flex' : 'none' }, onDragEnter: preventDrag, onDragOver: preventDrag, onDragLeave: function () { return showDragOverlay.next(false); }, onDrop: function (e) { return dropFiles(e, plugin, showDragOverlay); } }, { children: "Load File(s)" }), void 0);
+    return _jsx("div", __assign({ className: 'msp-drag-drop-overlay', style: { display: show ? 'flex' : 'none' }, onDragEnter: preventDrag, onDragOver: preventDrag, onDragLeave: function () { return showDragOverlay.next(false); }, onDrop: function (e) { return dropFiles(e, plugin, showDragOverlay); } }, { children: "Load File(s)" }));
 }
 var ControlsWrapper = /** @class */ (function (_super) {
     __extends(ControlsWrapper, _super);
@@ -197,7 +197,7 @@ var ControlsWrapper = /** @class */ (function (_super) {
     ControlsWrapper.prototype.render = function () {
         var _a;
         var StructureTools = ((_a = this.plugin.spec.components) === null || _a === void 0 ? void 0 : _a.structureTools) || DefaultStructureTools;
-        return _jsx("div", __assign({ className: 'msp-scrollable-container' }, { children: _jsx(StructureTools, {}, void 0) }), void 0);
+        return _jsx("div", __assign({ className: 'msp-scrollable-container' }, { children: _jsx(StructureTools, {}) }));
     };
     return ControlsWrapper;
 }(PluginUIComponent));
@@ -210,7 +210,7 @@ var DefaultViewport = /** @class */ (function (_super) {
     DefaultViewport.prototype.render = function () {
         var _a, _b;
         var VPControls = ((_b = (_a = this.plugin.spec.components) === null || _a === void 0 ? void 0 : _a.viewport) === null || _b === void 0 ? void 0 : _b.controls) || ViewportControls;
-        return _jsxs(_Fragment, { children: [_jsx(Viewport, {}, void 0), _jsxs("div", __assign({ className: 'msp-viewport-top-left-controls' }, { children: [_jsx(AnimationViewportControls, {}, void 0), _jsx(TrajectoryViewportControls, {}, void 0), _jsx(StateSnapshotViewportControls, {}, void 0)] }), void 0), _jsx(SelectionViewportControls, {}, void 0), _jsx(VPControls, {}, void 0), _jsx(BackgroundTaskProgress, {}, void 0), _jsxs("div", __assign({ className: 'msp-highlight-toast-wrapper' }, { children: [_jsx(LociLabels, {}, void 0), _jsx(Toasts, {}, void 0)] }), void 0)] }, void 0);
+        return _jsxs(_Fragment, { children: [_jsx(Viewport, {}), _jsxs("div", __assign({ className: 'msp-viewport-top-left-controls' }, { children: [_jsx(AnimationViewportControls, {}), _jsx(TrajectoryViewportControls, {}), _jsx(StateSnapshotViewportControls, {})] })), _jsx(SelectionViewportControls, {}), _jsx(VPControls, {}), _jsx(BackgroundTaskProgress, {}), _jsxs("div", __assign({ className: 'msp-highlight-toast-wrapper' }, { children: [_jsx(LociLabels, {}), _jsx(Toasts, {})] }))] });
     };
     return DefaultViewport;
 }(PluginUIComponent));
@@ -243,9 +243,9 @@ var Log = /** @class */ (function (_super) {
         var entries = [];
         for (var i = Math.max(0, l - maxEntries), o = 0; i < l; i++) {
             var e = xs.get(i);
-            entries.push(_jsxs("li", { children: [_jsx("div", { className: 'msp-log-entry-badge msp-log-entry-' + e.type }, void 0), _jsx("div", __assign({ className: 'msp-log-timestamp' }, { children: formatTime(e.timestamp) }), void 0), _jsx("div", __assign({ className: 'msp-log-entry' }, { children: e.message }), void 0)] }, o++));
+            entries.push(_jsxs("li", { children: [_jsx("div", { className: 'msp-log-entry-badge msp-log-entry-' + e.type }), _jsx("div", __assign({ className: 'msp-log-timestamp' }, { children: formatTime(e.timestamp) })), _jsx("div", __assign({ className: 'msp-log-entry' }, { children: e.message }))] }, o++));
         }
-        return _jsx("div", __assign({ ref: this.wrapper, className: 'msp-log', style: { position: 'absolute', top: '0', right: '0', bottom: '0', left: '0', overflowY: 'auto' } }, { children: _jsx("ul", __assign({ className: 'msp-list-unstyled' }, { children: entries }), void 0) }), void 0);
+        return _jsx("div", __assign({ ref: this.wrapper, className: 'msp-log', style: { position: 'absolute', top: '0', right: '0', bottom: '0', left: '0', overflowY: 'auto' } }, { children: _jsx("ul", __assign({ className: 'msp-list-unstyled' }, { children: entries })) }));
     };
     return Log;
 }(PluginUIComponent));

package/lib/mol-plugin-ui/sequence/sequence.js

@@ -270,7 +270,7 @@ var Sequence = /** @class */ (function (_super) {
         // calling .updateMarker here is neccesary to ensure existing
         // residue spans are updated as react won't update them
         this.updateMarker();
-        return _jsx("div", __assign({ className: 'msp-sequence-wrapper', onContextMenu: this.contextMenu, onMouseDown: this.mouseDown, onMouseUp: this.mouseUp, onMouseMove: this.mouseMove, onMouseLeave: this.mouseLeave, ref: this.parentDiv }, { children: elems }), void 0);
+        return _jsx("div", __assign({ className: 'msp-sequence-wrapper', onContextMenu: this.contextMenu, onMouseDown: this.mouseDown, onMouseUp: this.mouseUp, onMouseMove: this.mouseMove, onMouseLeave: this.mouseLeave, ref: this.parentDiv }, { children: elems }));
     };
     return Sequence;
 }(PluginUIComponent));

package/lib/mol-plugin-ui/sequence.js

@@ -360,24 +360,24 @@ var SequenceView = /** @class */ (function (_super) {
     });
     SequenceView.prototype.render = function () {
         if (this.getStructure(this.state.structureRef) === Structure.Empty) {
-            return _jsx("div", __assign({ className: 'msp-sequence' }, { children: _jsxs("div", __assign({ className: 'msp-sequence-select' }, { children: [_jsx(Icon, { svg: HelpOutlineSvg, style: { cursor: 'help', position: 'absolute', right: 0, top: 0 }, title: 'Shows a sequence of one or more chains. Use the controls to alter selection.' }, void 0), _jsx("span", { children: "Sequence" }, void 0), _jsx("span", __assign({ style: { fontWeight: 'normal' } }, { children: "No structure available" }), void 0)] }), void 0) }), void 0);
+            return _jsx("div", __assign({ className: 'msp-sequence' }, { children: _jsxs("div", __assign({ className: 'msp-sequence-select' }, { children: [_jsx(Icon, { svg: HelpOutlineSvg, style: { cursor: 'help', position: 'absolute', right: 0, top: 0 }, title: 'Shows a sequence of one or more chains. Use the controls to alter selection.' }), _jsx("span", { children: "Sequence" }), _jsx("span", __assign({ style: { fontWeight: 'normal' } }, { children: "No structure available" }))] })) }));
         }
         var params = this.params;
         var values = this.values;
         var sequenceWrappers = this.getSequenceWrappers(params);
-        return _jsxs("div", __assign({ className: 'msp-sequence' }, { children: [_jsxs("div", __assign({ className: 'msp-sequence-select' }, { children: [_jsx(Icon, { svg: HelpOutlineSvg, style: { cursor: 'help', position: 'absolute', right: 0, top: 0 }, title: 'This shows a single sequence. Use the controls to show a different sequence.' }, void 0), _jsx("span", { children: "Sequence of" }, void 0), _jsx(PureSelectControl, { title: "[Structure] ".concat(PD.optionLabel(params.structure, values.structure)), param: params.structure, name: 'structure', value: values.structure, onChange: this.setParamProps }, void 0), _jsx(PureSelectControl, { title: "[Mode]", param: SequenceViewModeParam, name: 'mode', value: values.mode, onChange: this.setParamProps }, void 0), values.mode === 'single' && _jsx(PureSelectControl, { title: "[Entity] ".concat(PD.optionLabel(params.entity, values.entity)), param: params.entity, name: 'entity', value: values.entity, onChange: this.setParamProps }, void 0), values.mode === 'single' && _jsx(PureSelectControl, { title: "[Chain] ".concat(PD.optionLabel(params.chain, values.chain)), param: params.chain, name: 'chain', value: values.chain, onChange: this.setParamProps }, void 0), params.operator.options.length > 1 && _jsx(_Fragment, { children: _jsx(PureSelectControl, { title: "[Instance] ".concat(PD.optionLabel(params.operator, values.operator)), param: params.operator, name: 'operator', value: values.operator, onChange: this.setParamProps }, void 0) }, void 0)] }), void 0), _jsx(NonEmptySequenceWrapper, { children: sequenceWrappers.map(function (s, i) {
+        return _jsxs("div", __assign({ className: 'msp-sequence' }, { children: [_jsxs("div", __assign({ className: 'msp-sequence-select' }, { children: [_jsx(Icon, { svg: HelpOutlineSvg, style: { cursor: 'help', position: 'absolute', right: 0, top: 0 }, title: 'This shows a single sequence. Use the controls to show a different sequence.' }), _jsx("span", { children: "Sequence of" }), _jsx(PureSelectControl, { title: "[Structure] ".concat(PD.optionLabel(params.structure, values.structure)), param: params.structure, name: 'structure', value: values.structure, onChange: this.setParamProps }), _jsx(PureSelectControl, { title: "[Mode]", param: SequenceViewModeParam, name: 'mode', value: values.mode, onChange: this.setParamProps }), values.mode === 'single' && _jsx(PureSelectControl, { title: "[Entity] ".concat(PD.optionLabel(params.entity, values.entity)), param: params.entity, name: 'entity', value: values.entity, onChange: this.setParamProps }), values.mode === 'single' && _jsx(PureSelectControl, { title: "[Chain] ".concat(PD.optionLabel(params.chain, values.chain)), param: params.chain, name: 'chain', value: values.chain, onChange: this.setParamProps }), params.operator.options.length > 1 && _jsx(_Fragment, { children: _jsx(PureSelectControl, { title: "[Instance] ".concat(PD.optionLabel(params.operator, values.operator)), param: params.operator, name: 'operator', value: values.operator, onChange: this.setParamProps }) })] })), _jsx(NonEmptySequenceWrapper, { children: sequenceWrappers.map(function (s, i) {
                         var elem = typeof s.wrapper === 'string'
                             ? _jsx("div", __assign({ className: 'msp-sequence-wrapper' }, { children: s.wrapper }), i)
                             : _jsx(Sequence, { sequenceWrapper: s.wrapper }, i);
                         if (values.mode === 'single')
                             return elem;
-                        return _jsxs(React.Fragment, { children: [_jsx("div", __assign({ className: 'msp-sequence-chain-label' }, { children: s.label }), void 0), elem] }, i);
-                    }) }, void 0)] }), void 0);
+                        return _jsxs(React.Fragment, { children: [_jsx("div", __assign({ className: 'msp-sequence-chain-label' }, { children: s.label })), elem] }, i);
+                    }) })] }));
     };
     return SequenceView;
 }(PluginUIComponent));
 export { SequenceView };
 function NonEmptySequenceWrapper(_a) {
     var children = _a.children;
-    return _jsx("div", __assign({ className: 'msp-sequence-wrapper-non-empty' }, { children: children }), void 0);
+    return _jsx("div", __assign({ className: 'msp-sequence-wrapper-non-empty' }, { children: children }));
 }

package/lib/mol-plugin-ui/skin/base/base.scss

@@ -1,33 +1,33 @@
-
-@mixin user-select($select) {
-  -webkit-user-select: $select;
-     -moz-user-select: $select;
-      -ms-user-select: $select; // IE10+
-          user-select: $select;
-}
-
-.msp-plugin {
-    font-family: "Helvetica Neue", "Segoe UI", Helvetica, "Source Sans Pro", Arial, sans-serif;
-    font-size: 14px;
-    line-height: 1.42857143;
-
-    position: absolute;
-    left: 0;
-    top: 0;
-    right: 0;
-    bottom: 0;
-
-    @import 'variables';
-
-    @import "normalize";
-
-    @import 'layout';
-    @import 'ui';
-    @import 'logo';
-
-    .msp-plugin-content {
-        color: $font-color;
-    }
-
-    background: $default-background;
+
+@mixin user-select($select) {
+  -webkit-user-select: $select;
+     -moz-user-select: $select;
+      -ms-user-select: $select; // IE10+
+          user-select: $select;
+}
+
+.msp-plugin {
+    font-family: "Helvetica Neue", "Segoe UI", Helvetica, "Source Sans Pro", Arial, sans-serif;
+    font-size: 14px;
+    line-height: 1.42857143;
+
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+
+    @import 'variables';
+
+    @import "normalize";
+
+    @import 'layout';
+    @import 'ui';
+    @import 'logo';
+
+    .msp-plugin-content {
+        color: $font-color;
+    }
+
+    background: $default-background;
 }