molstar 3.2.0 → 3.4.0

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.LeftPanelControls = void 0;
+exports.LeftPanelControls = exports.CustomImportControls = void 0;
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
 var canvas3d_1 = require("../mol-canvas3d/canvas3d");
@@ -14,30 +14,51 @@ var snapshots_1 = require("./state/snapshots");
 var tree_1 = require("./state/tree");
 var help_1 = require("./viewport/help");
 var icons_1 = require("./controls/icons");
+var CustomImportControls = /** @class */ (function (_super) {
+    tslib_1.__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((0, jsx_runtime_1.jsx)(Controls, { initiallyCollapsed: _this.props.initiallyCollapsed }, key));
+        });
+        return controls.length > 0 ? (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: controls }) : null;
+    };
+    return CustomImportControls;
+}(base_1.PluginUIComponent));
+exports.CustomImportControls = CustomImportControls;
 var LeftPanelControls = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(LeftPanelControls, _super);
+    tslib_1.__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) {
                 _this.setState({ tab: 'none' }, function () { return _this.plugin.behaviors.layout.leftPanelTabName.next('none'); });
-                commands_1.PluginCommands.Layout.Update(_this.plugin, { state: { regionState: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, _this.plugin.layout.state.regionState), { left: 'collapsed' }) } });
+                commands_1.PluginCommands.Layout.Update(_this.plugin, { state: { regionState: tslib_1.__assign(tslib_1.__assign({}, _this.plugin.layout.state.regionState), { left: 'collapsed' }) } });
                 return;
             }
             _this.setState({ tab: tab }, function () { return _this.plugin.behaviors.layout.leftPanelTabName.next(tab); });
             if (_this.plugin.layout.state.regionState.left !== 'full') {
-                commands_1.PluginCommands.Layout.Update(_this.plugin, { state: { regionState: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, _this.plugin.layout.state.regionState), { left: 'full' }) } });
+                commands_1.PluginCommands.Layout.Update(_this.plugin, { state: { regionState: tslib_1.__assign(tslib_1.__assign({}, _this.plugin.layout.state.regionState), { left: 'full' }) } });
             }
         };
         _this.tabs = {
-            'none': (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0),
-            'root': (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(common_1.SectionHeader, { icon: icons_1.HomeOutlinedSvg, title: 'Home' }, void 0), (0, jsx_runtime_1.jsx)(actions_1.StateObjectActions, { state: _this.plugin.state.data, nodeRef: mol_state_1.StateTransform.RootRef, hideHeader: true, initiallyCollapsed: true, alwaysExpandFirst: true }, void 0), ((_a = _this.plugin.spec.components) === null || _a === void 0 ? void 0 : _a.remoteState) !== 'none' && (0, jsx_runtime_1.jsx)(snapshots_1.RemoteStateSnapshots, { listOnly: true }, void 0)] }, void 0),
-            'data': (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(common_1.SectionHeader, { icon: icons_1.AccountTreeOutlinedSvg, title: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(RemoveAllButton, {}, void 0), " State Tree"] }, void 0) }, void 0), (0, jsx_runtime_1.jsx)(tree_1.StateTree, { state: _this.plugin.state.data }, void 0)] }, void 0),
-            'states': (0, jsx_runtime_1.jsx)(snapshots_1.StateSnapshots, {}, void 0),
-            'settings': (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(common_1.SectionHeader, { icon: icons_1.TuneSvg, title: 'Plugin Settings' }, void 0), (0, jsx_runtime_1.jsx)(FullSettings, {}, void 0)] }, void 0),
-            'help': (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(common_1.SectionHeader, { icon: icons_1.HelpOutlineSvg, title: 'Help' }, void 0), (0, jsx_runtime_1.jsx)(help_1.HelpContent, {}, void 0)] }, void 0)
+            'none': (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}),
+            'root': (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(common_1.SectionHeader, { icon: icons_1.HomeOutlinedSvg, title: 'Home' }), (0, jsx_runtime_1.jsx)(actions_1.StateObjectActions, { state: _this.plugin.state.data, nodeRef: mol_state_1.StateTransform.RootRef, hideHeader: true, initiallyCollapsed: true, alwaysExpandFirst: true }), (0, jsx_runtime_1.jsx)(CustomImportControls, {}), ((_a = _this.plugin.spec.components) === null || _a === void 0 ? void 0 : _a.remoteState) !== 'none' && (0, jsx_runtime_1.jsx)(snapshots_1.RemoteStateSnapshots, { listOnly: true })] }),
+            'data': (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(common_1.SectionHeader, { icon: icons_1.AccountTreeOutlinedSvg, title: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(RemoveAllButton, {}), " State Tree"] }) }), (0, jsx_runtime_1.jsx)(tree_1.StateTree, { state: _this.plugin.state.data })] }),
+            'states': (0, jsx_runtime_1.jsx)(snapshots_1.StateSnapshots, {}),
+            'settings': (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(common_1.SectionHeader, { icon: icons_1.TuneSvg, title: 'Plugin Settings' }), (0, jsx_runtime_1.jsx)(FullSettings, {})] }),
+            'help': (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(common_1.SectionHeader, { icon: icons_1.HelpOutlineSvg, title: 'Help' }), (0, jsx_runtime_1.jsx)(help_1.HelpContent, {})] })
         };
         return _this;
     }
@@ -47,7 +68,7 @@ var LeftPanelControls = /** @class */ (function (_super) {
             if (_this.state.tab !== tab)
                 _this.setState({ tab: tab });
             if (tab === 'none' && _this.plugin.layout.state.regionState.left !== 'collapsed') {
-                commands_1.PluginCommands.Layout.Update(_this.plugin, { state: { regionState: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, _this.plugin.layout.state.regionState), { left: 'collapsed' }) } });
+                commands_1.PluginCommands.Layout.Update(_this.plugin, { state: { regionState: tslib_1.__assign(tslib_1.__assign({}, _this.plugin.layout.state.regionState), { left: 'collapsed' }) } });
             }
         });
         this.subscribe(this.plugin.state.data.events.changed, function (_a) {
@@ -61,13 +82,13 @@ var LeftPanelControls = /** @class */ (function (_super) {
     LeftPanelControls.prototype.render = function () {
         var _this = this;
         var tab = this.state.tab;
-        return (0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: 'msp-left-panel-controls' }, { children: [(0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: 'msp-left-panel-controls-buttons' }, { children: [(0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.HomeOutlinedSvg, toggleState: tab === 'root', transparent: true, onClick: function () { return _this.set('root'); }, title: 'Home' }, void 0), (0, jsx_runtime_1.jsx)(DataIcon, { set: this.set }, void 0), (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.SaveOutlinedSvg, toggleState: tab === 'states', transparent: true, onClick: function () { return _this.set('states'); }, title: 'Plugin State' }, void 0), (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.HelpOutlineSvg, toggleState: tab === 'help', transparent: true, onClick: function () { return _this.set('help'); }, title: 'Help' }, void 0), (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'msp-left-panel-controls-buttons-bottom' }, { children: (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.TuneSvg, toggleState: tab === 'settings', transparent: true, onClick: function () { return _this.set('settings'); }, title: 'Settings' }, void 0) }), void 0)] }), void 0), (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'msp-scrollable-container' }, { children: this.tabs[tab] }), void 0)] }), void 0);
+        return (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: 'msp-left-panel-controls' }, { children: [(0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: 'msp-left-panel-controls-buttons' }, { children: [(0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.HomeOutlinedSvg, toggleState: tab === 'root', transparent: true, onClick: function () { return _this.set('root'); }, title: 'Home' }), (0, jsx_runtime_1.jsx)(DataIcon, { set: this.set }), (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.SaveOutlinedSvg, toggleState: tab === 'states', transparent: true, onClick: function () { return _this.set('states'); }, title: 'Plugin State' }), (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.HelpOutlineSvg, toggleState: tab === 'help', transparent: true, onClick: function () { return _this.set('help'); }, title: 'Help' }), (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'msp-left-panel-controls-buttons-bottom' }, { children: (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.TuneSvg, toggleState: tab === 'settings', transparent: true, onClick: function () { return _this.set('settings'); }, title: 'Settings' }) }))] })), (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'msp-scrollable-container' }, { children: this.tabs[tab] }))] }));
     };
     return LeftPanelControls;
 }(base_1.PluginUIComponent));
 exports.LeftPanelControls = LeftPanelControls;
 var DataIcon = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(DataIcon, _super);
+    tslib_1.__extends(DataIcon, _super);
     function DataIcon() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.state = { changed: false };
@@ -95,12 +116,12 @@ var DataIcon = /** @class */ (function (_super) {
     };
     DataIcon.prototype.render = function () {
         var _this = this;
-        return (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.AccountTreeOutlinedSvg, toggleState: this.tab === 'data', transparent: true, onClick: function () { return _this.props.set('data'); }, title: 'State Tree', style: { position: 'relative' }, extraContent: this.state.changed ? (0, jsx_runtime_1.jsx)("div", { className: 'msp-left-panel-controls-button-data-dirty' }, void 0) : void 0 }, void 0);
+        return (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.AccountTreeOutlinedSvg, toggleState: this.tab === 'data', transparent: true, onClick: function () { return _this.props.set('data'); }, title: 'State Tree', style: { position: 'relative' }, extraContent: this.state.changed ? (0, jsx_runtime_1.jsx)("div", { className: 'msp-left-panel-controls-button-data-dirty' }) : void 0 });
     };
     return DataIcon;
 }(base_1.PluginUIComponent));
 var FullSettings = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(FullSettings, _super);
+    tslib_1.__extends(FullSettings, _super);
     function FullSettings() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.setSettings = function (p) {
@@ -120,12 +141,12 @@ var FullSettings = /** @class */ (function (_super) {
         });
     };
     FullSettings.prototype.render = function () {
-        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [this.plugin.canvas3d && (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(common_1.SectionHeader, { title: 'Viewport' }, void 0), (0, jsx_runtime_1.jsx)(parameters_1.ParameterControls, { params: canvas3d_1.Canvas3DParams, values: this.plugin.canvas3d.props, onChange: this.setSettings }, void 0)] }, void 0), (0, jsx_runtime_1.jsx)(common_1.SectionHeader, { title: 'Behavior' }, void 0), (0, jsx_runtime_1.jsx)(tree_1.StateTree, { state: this.plugin.state.behaviors }, void 0)] }, void 0);
+        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [this.plugin.canvas3d && (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(common_1.SectionHeader, { title: 'Viewport' }), (0, jsx_runtime_1.jsx)(parameters_1.ParameterControls, { params: canvas3d_1.Canvas3DParams, values: this.plugin.canvas3d.props, onChange: this.setSettings })] }), (0, jsx_runtime_1.jsx)(common_1.SectionHeader, { title: 'Behavior' }), (0, jsx_runtime_1.jsx)(tree_1.StateTree, { state: this.plugin.state.behaviors })] });
     };
     return FullSettings;
 }(base_1.PluginUIComponent));
 var RemoveAllButton = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(RemoveAllButton, _super);
+    tslib_1.__extends(RemoveAllButton, _super);
     function RemoveAllButton() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.remove = function (e) {
@@ -149,8 +170,7 @@ var RemoveAllButton = /** @class */ (function (_super) {
         var count = this.plugin.state.data.tree.children.get(mol_state_1.StateTransform.RootRef).size;
         if (count === 0)
             return null;
-        return (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.DeleteOutlinedSvg, onClick: this.remove, title: 'Remove All', style: { display: 'inline-block' }, small: true, className: 'msp-no-hover-outline', transparent: true }, void 0);
+        return (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.DeleteOutlinedSvg, onClick: this.remove, title: 'Remove All', style: { display: 'inline-block' }, small: true, className: 'msp-no-hover-outline', transparent: true });
     };
     return RemoveAllButton;
 }(base_1.PluginUIComponent));
-//# sourceMappingURL=left-panel.js.map

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

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Log = exports.DefaultViewport = exports.ControlsWrapper = exports.PluginContextContainer = exports.Plugin = void 0;
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
-var React = (0, tslib_1.__importStar)(require("react"));
+var React = tslib_1.__importStar(require("react"));
 var mol_util_1 = require("../mol-util");
 var base_1 = require("./base");
 var controls_1 = require("./controls");
@@ -18,32 +18,32 @@ var assets_1 = require("../mol-util/assets");
 var rxjs_1 = require("rxjs");
 var use_behavior_1 = require("./hooks/use-behavior");
 var Plugin = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(Plugin, _super);
+    tslib_1.__extends(Plugin, _super);
     function Plugin() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
     Plugin.prototype.region = function (kind, element) {
-        return (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: "msp-layout-region msp-layout-".concat(kind) }, { children: (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'msp-layout-static' }, { children: element }), void 0) }), void 0);
+        return (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: "msp-layout-region msp-layout-".concat(kind) }, { children: (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'msp-layout-static' }, { children: element })) }));
     };
     Plugin.prototype.render = function () {
-        return (0, jsx_runtime_1.jsx)(base_1.PluginReactContext.Provider, (0, tslib_1.__assign)({ value: this.props.plugin }, { children: (0, jsx_runtime_1.jsx)(Layout, {}, void 0) }), void 0);
+        return (0, jsx_runtime_1.jsx)(base_1.PluginReactContext.Provider, tslib_1.__assign({ value: this.props.plugin }, { children: (0, jsx_runtime_1.jsx)(Layout, {}) }));
     };
     return Plugin;
 }(React.Component));
 exports.Plugin = Plugin;
 var PluginContextContainer = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(PluginContextContainer, _super);
+    tslib_1.__extends(PluginContextContainer, _super);
     function PluginContextContainer() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
     PluginContextContainer.prototype.render = function () {
-        return (0, jsx_runtime_1.jsx)(base_1.PluginReactContext.Provider, (0, tslib_1.__assign)({ value: this.props.plugin }, { children: (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'msp-plugin' }, { children: this.props.children }), void 0) }), void 0);
+        return (0, jsx_runtime_1.jsx)(base_1.PluginReactContext.Provider, tslib_1.__assign({ value: this.props.plugin }, { children: (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'msp-plugin' }, { children: this.props.children })) }));
     };
     return PluginContextContainer;
 }(React.Component));
 exports.PluginContextContainer = PluginContextContainer;
 var Layout = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(Layout, _super);
+    tslib_1.__extends(Layout, _super);
     function Layout() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.onDrop = function (ev) {
@@ -93,7 +93,7 @@ var Layout = /** @class */ (function (_super) {
         this.subscribe(this.plugin.layout.events.updated, function () { return _this.forceUpdate(); });
     };
     Layout.prototype.region = function (kind, Element) {
-        return (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: "msp-layout-region msp-layout-".concat(kind) }, { children: (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'msp-layout-static' }, { children: Element ? (0, jsx_runtime_1.jsx)(Element, {}, void 0) : null }), void 0) }), void 0);
+        return (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: "msp-layout-region msp-layout-".concat(kind) }, { children: (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'msp-layout-static' }, { children: Element ? (0, jsx_runtime_1.jsx)(Element, {}) : null })) }));
     };
     Object.defineProperty(Layout.prototype, "layoutVisibilityClassName", {
         get: function () {
@@ -141,7 +141,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 (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'msp-plugin' }, { children: (0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: this.layoutClassName, onDragEnter: this.onDragEnter }, { children: [(0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: this.layoutVisibilityClassName }, { children: [this.region('main', viewport), layout.showControls && controls.top !== 'none' && this.region('top', controls.top || sequence_1.SequenceView), layout.showControls && controls.left !== 'none' && this.region('left', controls.left || left_panel_1.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) && (0, jsx_runtime_1.jsx)(task_1.OverlayTaskProgress, {}, void 0), (0, jsx_runtime_1.jsx)(DragOverlay, { plugin: this.plugin, showDragOverlay: this.showDragOverlay }, void 0)] }), void 0) }), void 0);
+        return (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'msp-plugin' }, { children: (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: this.layoutClassName, onDragEnter: this.onDragEnter }, { children: [(0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: this.layoutVisibilityClassName }, { children: [this.region('main', viewport), layout.showControls && controls.top !== 'none' && this.region('top', controls.top || sequence_1.SequenceView), layout.showControls && controls.left !== 'none' && this.region('left', controls.left || left_panel_1.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) && (0, jsx_runtime_1.jsx)(task_1.OverlayTaskProgress, {}), (0, jsx_runtime_1.jsx)(DragOverlay, { plugin: this.plugin, showDragOverlay: this.showDragOverlay })] })) }));
     };
     return Layout;
 }(base_1.PluginUIComponent));
@@ -190,36 +190,36 @@ function DragOverlay(_a) {
         e.preventDefault();
         e.stopPropagation();
     };
-    return (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__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 (0, jsx_runtime_1.jsx)("div", tslib_1.__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) {
-    (0, tslib_1.__extends)(ControlsWrapper, _super);
+    tslib_1.__extends(ControlsWrapper, _super);
     function ControlsWrapper() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
     ControlsWrapper.prototype.render = function () {
         var _a;
         var StructureTools = ((_a = this.plugin.spec.components) === null || _a === void 0 ? void 0 : _a.structureTools) || controls_1.DefaultStructureTools;
-        return (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'msp-scrollable-container' }, { children: (0, jsx_runtime_1.jsx)(StructureTools, {}, void 0) }), void 0);
+        return (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'msp-scrollable-container' }, { children: (0, jsx_runtime_1.jsx)(StructureTools, {}) }));
     };
     return ControlsWrapper;
 }(base_1.PluginUIComponent));
 exports.ControlsWrapper = ControlsWrapper;
 var DefaultViewport = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(DefaultViewport, _super);
+    tslib_1.__extends(DefaultViewport, _super);
     function DefaultViewport() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
     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) || viewport_1.ViewportControls;
-        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(viewport_1.Viewport, {}, void 0), (0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: 'msp-viewport-top-left-controls' }, { children: [(0, jsx_runtime_1.jsx)(controls_1.AnimationViewportControls, {}, void 0), (0, jsx_runtime_1.jsx)(controls_1.TrajectoryViewportControls, {}, void 0), (0, jsx_runtime_1.jsx)(controls_1.StateSnapshotViewportControls, {}, void 0)] }), void 0), (0, jsx_runtime_1.jsx)(controls_1.SelectionViewportControls, {}, void 0), (0, jsx_runtime_1.jsx)(VPControls, {}, void 0), (0, jsx_runtime_1.jsx)(task_1.BackgroundTaskProgress, {}, void 0), (0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: 'msp-highlight-toast-wrapper' }, { children: [(0, jsx_runtime_1.jsx)(controls_1.LociLabels, {}, void 0), (0, jsx_runtime_1.jsx)(toast_1.Toasts, {}, void 0)] }), void 0)] }, void 0);
+        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(viewport_1.Viewport, {}), (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: 'msp-viewport-top-left-controls' }, { children: [(0, jsx_runtime_1.jsx)(controls_1.AnimationViewportControls, {}), (0, jsx_runtime_1.jsx)(controls_1.TrajectoryViewportControls, {}), (0, jsx_runtime_1.jsx)(controls_1.StateSnapshotViewportControls, {})] })), (0, jsx_runtime_1.jsx)(controls_1.SelectionViewportControls, {}), (0, jsx_runtime_1.jsx)(VPControls, {}), (0, jsx_runtime_1.jsx)(task_1.BackgroundTaskProgress, {}), (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: 'msp-highlight-toast-wrapper' }, { children: [(0, jsx_runtime_1.jsx)(controls_1.LociLabels, {}), (0, jsx_runtime_1.jsx)(toast_1.Toasts, {})] }))] });
     };
     return DefaultViewport;
 }(base_1.PluginUIComponent));
 exports.DefaultViewport = DefaultViewport;
 var Log = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(Log, _super);
+    tslib_1.__extends(Log, _super);
     function Log() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.wrapper = React.createRef();
@@ -246,11 +246,10 @@ 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((0, jsx_runtime_1.jsxs)("li", { children: [(0, jsx_runtime_1.jsx)("div", { className: 'msp-log-entry-badge msp-log-entry-' + e.type }, void 0), (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'msp-log-timestamp' }, { children: (0, mol_util_1.formatTime)(e.timestamp) }), void 0), (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'msp-log-entry' }, { children: e.message }), void 0)] }, o++));
+            entries.push((0, jsx_runtime_1.jsxs)("li", { children: [(0, jsx_runtime_1.jsx)("div", { className: 'msp-log-entry-badge msp-log-entry-' + e.type }), (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'msp-log-timestamp' }, { children: (0, mol_util_1.formatTime)(e.timestamp) })), (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'msp-log-entry' }, { children: e.message }))] }, o++));
         }
-        return (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ ref: this.wrapper, className: 'msp-log', style: { position: 'absolute', top: '0', right: '0', bottom: '0', left: '0', overflowY: 'auto' } }, { children: (0, jsx_runtime_1.jsx)("ul", (0, tslib_1.__assign)({ className: 'msp-list-unstyled' }, { children: entries }), void 0) }), void 0);
+        return (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ ref: this.wrapper, className: 'msp-log', style: { position: 'absolute', top: '0', right: '0', bottom: '0', left: '0', overflowY: 'auto' } }, { children: (0, jsx_runtime_1.jsx)("ul", tslib_1.__assign({ className: 'msp-list-unstyled' }, { children: entries })) }));
     };
     return Log;
 }(base_1.PluginUIComponent));
 exports.Log = Log;
-//# sourceMappingURL=plugin.js.map

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

@@ -13,7 +13,7 @@ var int_1 = require("../../mol-data/int");
 var names_1 = require("../../mol-util/color/names");
 var marker_action_1 = require("../../mol-util/marker-action");
 var ChainSequenceWrapper = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(ChainSequenceWrapper, _super);
+    tslib_1.__extends(ChainSequenceWrapper, _super);
     function ChainSequenceWrapper(data) {
         var _this = this;
         var residueCount = 0;
@@ -85,4 +85,3 @@ var ChainSequenceWrapper = /** @class */ (function (_super) {
     return ChainSequenceWrapper;
 }(wrapper_1.SequenceWrapper));
 exports.ChainSequenceWrapper = ChainSequenceWrapper;
-//# sourceMappingURL=chain.js.map

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

@@ -13,7 +13,7 @@ var int_1 = require("../../mol-data/int");
 var names_1 = require("../../mol-util/color/names");
 var marker_action_1 = require("../../mol-util/marker-action");
 var ElementSequenceWrapper = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(ElementSequenceWrapper, _super);
+    tslib_1.__extends(ElementSequenceWrapper, _super);
     function ElementSequenceWrapper(data) {
         var _this = this;
         var length = 0;
@@ -86,4 +86,3 @@ var ElementSequenceWrapper = /** @class */ (function (_super) {
     return ElementSequenceWrapper;
 }(wrapper_1.SequenceWrapper));
 exports.ElementSequenceWrapper = ElementSequenceWrapper;
-//# sourceMappingURL=element.js.map

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

@@ -13,7 +13,7 @@ var int_1 = require("../../mol-data/int");
 var names_1 = require("../../mol-util/color/names");
 var marker_action_1 = require("../../mol-util/marker-action");
 var HeteroSequenceWrapper = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(HeteroSequenceWrapper, _super);
+    tslib_1.__extends(HeteroSequenceWrapper, _super);
     function HeteroSequenceWrapper(data) {
         var _this = this;
         var sequence = [];
@@ -103,4 +103,3 @@ var HeteroSequenceWrapper = /** @class */ (function (_super) {
     return HeteroSequenceWrapper;
 }(wrapper_1.SequenceWrapper));
 exports.HeteroSequenceWrapper = HeteroSequenceWrapper;
-//# sourceMappingURL=hetero.js.map

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

@@ -13,7 +13,7 @@ var int_1 = require("../../mol-data/int");
 var names_1 = require("../../mol-util/color/names");
 var marker_action_1 = require("../../mol-util/marker-action");
 var PolymerSequenceWrapper = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(PolymerSequenceWrapper, _super);
+    tslib_1.__extends(PolymerSequenceWrapper, _super);
     function PolymerSequenceWrapper(data) {
         var _this = this;
         var l = structure_1.StructureElement.Location.create(data.structure, data.units[0], data.units[0].elements[0]);
@@ -129,4 +129,3 @@ function applyMarkerCoarse(e, action, markerArray, index) {
     });
     return true;
 }
-//# sourceMappingURL=polymer.js.map

package/lib/commonjs/mol-plugin-ui/sequence/sequence.d.ts

@@ -5,10 +5,10 @@
  * @author David Sehnal <david.sehnal@gmail.com>
  */
 import * as React from 'react';
-import { PluginUIComponent } from '../base';
+import { StructureElement } from '../../mol-model/structure';
 import { ButtonsType, ModifiersKeys } from '../../mol-util/input/input-observer';
+import { PluginUIComponent } from '../base';
 import { SequenceWrapper } from './wrapper';
-import { StructureElement } from '../../mol-model/structure';
 declare type SequenceProps = {
     sequenceWrapper: SequenceWrapper.Any;
     sequenceNumberPeriod?: number;

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

@@ -9,19 +9,19 @@ var jsx_runtime_1 = require("react/jsx-runtime");
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  * @author David Sehnal <david.sehnal@gmail.com>
  */
-var React = (0, tslib_1.__importStar)(require("react"));
-var base_1 = require("../base");
-var input_observer_1 = require("../../mol-util/input/input-observer");
-var structure_1 = require("../../mol-model/structure");
+var React = tslib_1.__importStar(require("react"));
 var rxjs_1 = require("rxjs");
 var operators_1 = require("rxjs/operators");
 var int_1 = require("../../mol-data/int");
+var structure_1 = require("../../mol-model/structure");
 var representation_1 = require("../../mol-repr/representation");
+var input_observer_1 = require("../../mol-util/input/input-observer");
+var base_1 = require("../base");
 /** Note, if this is changed, the CSS for `msp-sequence-number` needs adjustment too */
 var MaxSequenceNumberSize = 5;
 // TODO: this is somewhat inefficient and should be done using a canvas.
 var Sequence = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(Sequence, _super);
+    tslib_1.__extends(Sequence, _super);
     function Sequence() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.parentDiv = React.createRef();
@@ -96,7 +96,7 @@ var Sequence = /** @class */ (function (_super) {
                 _this.lastMouseOverSeqIdx = seqIdx;
                 if (_this.mouseDownLoci !== undefined) {
                     var loci = _this.getLoci(seqIdx);
-                    _this.hover(loci, 0 /* None */, 0 /* None */, (0, tslib_1.__assign)((0, tslib_1.__assign)({}, modifiers), { shift: true }));
+                    _this.hover(loci, 0 /* None */, 0 /* None */, tslib_1.__assign(tslib_1.__assign({}, modifiers), { shift: true }));
                 }
                 else {
                     _this.highlightQueue.next({ seqIdx: seqIdx, buttons: buttons, button: button, modifiers: modifiers });
@@ -135,11 +135,10 @@ var Sequence = /** @class */ (function (_super) {
         var _this = this;
         this.plugin.managers.interactivity.lociHighlights.addProvider(this.lociHighlightProvider);
         this.plugin.managers.interactivity.lociSelects.addProvider(this.lociSelectionProvider);
-        this.subscribe((0, operators_1.debounceTime)(15)(this.highlightQueue), function (e) {
+        this.subscribe(this.highlightQueue.pipe((0, operators_1.throttleTime)(3 * 16.666, void 0, { leading: true, trailing: true })), function (e) {
             var loci = _this.getLoci(e.seqIdx < 0 ? void 0 : e.seqIdx);
             _this.hover(loci, e.buttons, e.button, e.modifiers);
         });
-        // this.updateMarker()
     };
     Sequence.prototype.componentWillUnmount = function () {
         _super.prototype.componentWillUnmount.call(this);
@@ -191,7 +190,7 @@ var Sequence = /** @class */ (function (_super) {
             : this.props.sequenceWrapper.residueClass(seqIdx);
     };
     Sequence.prototype.residue = function (seqIdx, label, marker) {
-        return (0, jsx_runtime_1.jsx)("span", (0, tslib_1.__assign)({ "data-seqid": seqIdx, style: { backgroundColor: this.getBackgroundColor(marker) }, className: this.getResidueClass(seqIdx, label) }, { children: "\u200B".concat(label, "\u200B") }), seqIdx);
+        return (0, jsx_runtime_1.jsx)("span", tslib_1.__assign({ "data-seqid": seqIdx, style: { backgroundColor: this.getBackgroundColor(marker) }, className: this.getResidueClass(seqIdx, label) }, { children: "\u200B".concat(label, "\u200B") }), seqIdx);
     };
     Sequence.prototype.getSequenceNumberClass = function (seqIdx, seqNum, label) {
         var classList = ['msp-sequence-number'];
@@ -230,7 +229,7 @@ var Sequence = /** @class */ (function (_super) {
     };
     Sequence.prototype.getSequenceNumberSpan = function (seqIdx, label) {
         var seqNum = this.getSequenceNumber(seqIdx);
-        return (0, jsx_runtime_1.jsx)("span", (0, tslib_1.__assign)({ className: this.getSequenceNumberClass(seqIdx, seqNum, label) }, { children: this.padSeqNum(seqNum) }), "marker-".concat(seqIdx));
+        return (0, jsx_runtime_1.jsx)("span", tslib_1.__assign({ className: this.getSequenceNumberClass(seqIdx, seqNum, label) }, { children: this.padSeqNum(seqNum) }), "marker-".concat(seqIdx));
     };
     Sequence.prototype.updateMarker = function () {
         if (!this.parentDiv.current)
@@ -274,9 +273,8 @@ 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 (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__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 (0, jsx_runtime_1.jsx)("div", tslib_1.__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;
 }(base_1.PluginUIComponent));
 exports.Sequence = Sequence;
-//# sourceMappingURL=sequence.js.map

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

@@ -26,4 +26,3 @@ var SequenceWrapper = /** @class */ (function () {
     return SequenceWrapper;
 }());
 exports.SequenceWrapper = SequenceWrapper;
-//# sourceMappingURL=wrapper.js.map

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

@@ -9,7 +9,7 @@ var jsx_runtime_1 = require("react/jsx-runtime");
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  * @author David Sehnal <david.sehnal@gmail.com>
  */
-var React = (0, tslib_1.__importStar)(require("react"));
+var React = tslib_1.__importStar(require("react"));
 var base_1 = require("./base");
 var objects_1 = require("../mol-plugin-state/objects");
 var sequence_1 = require("./sequence/sequence");
@@ -208,12 +208,12 @@ function getStructureOptions(state) {
 }
 var SequenceViewModeParam = param_definition_1.ParamDefinition.Select('single', [['single', 'Chain'], ['polymers', 'Polymers'], ['all', 'Everything']]);
 var SequenceView = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(SequenceView, _super);
+    tslib_1.__extends(SequenceView, _super);
     function SequenceView() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.state = { structureOptions: { options: [], all: [] }, structure: structure_1.Structure.Empty, structureRef: '', modelEntityId: '', chainGroupId: -1, operatorKey: '', mode: 'single' };
         _this.setParamProps = function (p) {
-            var state = (0, tslib_1.__assign)({}, _this.state);
+            var state = tslib_1.__assign({}, _this.state);
             switch (p.name) {
                 case 'mode':
                     state.mode = p.value;
@@ -363,25 +363,24 @@ var SequenceView = /** @class */ (function (_super) {
     });
     SequenceView.prototype.render = function () {
         if (this.getStructure(this.state.structureRef) === structure_1.Structure.Empty) {
-            return (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'msp-sequence' }, { children: (0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: 'msp-sequence-select' }, { children: [(0, jsx_runtime_1.jsx)(icons_1.Icon, { svg: icons_1.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), (0, jsx_runtime_1.jsx)("span", { children: "Sequence" }, void 0), (0, jsx_runtime_1.jsx)("span", (0, tslib_1.__assign)({ style: { fontWeight: 'normal' } }, { children: "No structure available" }), void 0)] }), void 0) }), void 0);
+            return (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'msp-sequence' }, { children: (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: 'msp-sequence-select' }, { children: [(0, jsx_runtime_1.jsx)(icons_1.Icon, { svg: icons_1.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.' }), (0, jsx_runtime_1.jsx)("span", { children: "Sequence" }), (0, jsx_runtime_1.jsx)("span", tslib_1.__assign({ style: { fontWeight: 'normal' } }, { children: "No structure available" }))] })) }));
         }
         var params = this.params;
         var values = this.values;
         var sequenceWrappers = this.getSequenceWrappers(params);
-        return (0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: 'msp-sequence' }, { children: [(0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: 'msp-sequence-select' }, { children: [(0, jsx_runtime_1.jsx)(icons_1.Icon, { svg: icons_1.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), (0, jsx_runtime_1.jsx)("span", { children: "Sequence of" }, void 0), (0, jsx_runtime_1.jsx)(parameters_1.PureSelectControl, { title: "[Structure] ".concat(param_definition_1.ParamDefinition.optionLabel(params.structure, values.structure)), param: params.structure, name: 'structure', value: values.structure, onChange: this.setParamProps }, void 0), (0, jsx_runtime_1.jsx)(parameters_1.PureSelectControl, { title: "[Mode]", param: SequenceViewModeParam, name: 'mode', value: values.mode, onChange: this.setParamProps }, void 0), values.mode === 'single' && (0, jsx_runtime_1.jsx)(parameters_1.PureSelectControl, { title: "[Entity] ".concat(param_definition_1.ParamDefinition.optionLabel(params.entity, values.entity)), param: params.entity, name: 'entity', value: values.entity, onChange: this.setParamProps }, void 0), values.mode === 'single' && (0, jsx_runtime_1.jsx)(parameters_1.PureSelectControl, { title: "[Chain] ".concat(param_definition_1.ParamDefinition.optionLabel(params.chain, values.chain)), param: params.chain, name: 'chain', value: values.chain, onChange: this.setParamProps }, void 0), params.operator.options.length > 1 && (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(parameters_1.PureSelectControl, { title: "[Instance] ".concat(param_definition_1.ParamDefinition.optionLabel(params.operator, values.operator)), param: params.operator, name: 'operator', value: values.operator, onChange: this.setParamProps }, void 0) }, void 0)] }), void 0), (0, jsx_runtime_1.jsx)(NonEmptySequenceWrapper, { children: sequenceWrappers.map(function (s, i) {
+        return (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: 'msp-sequence' }, { children: [(0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: 'msp-sequence-select' }, { children: [(0, jsx_runtime_1.jsx)(icons_1.Icon, { svg: icons_1.HelpOutlineSvg, style: { cursor: 'help', position: 'absolute', right: 0, top: 0 }, title: 'This shows a single sequence. Use the controls to show a different sequence.' }), (0, jsx_runtime_1.jsx)("span", { children: "Sequence of" }), (0, jsx_runtime_1.jsx)(parameters_1.PureSelectControl, { title: "[Structure] ".concat(param_definition_1.ParamDefinition.optionLabel(params.structure, values.structure)), param: params.structure, name: 'structure', value: values.structure, onChange: this.setParamProps }), (0, jsx_runtime_1.jsx)(parameters_1.PureSelectControl, { title: "[Mode]", param: SequenceViewModeParam, name: 'mode', value: values.mode, onChange: this.setParamProps }), values.mode === 'single' && (0, jsx_runtime_1.jsx)(parameters_1.PureSelectControl, { title: "[Entity] ".concat(param_definition_1.ParamDefinition.optionLabel(params.entity, values.entity)), param: params.entity, name: 'entity', value: values.entity, onChange: this.setParamProps }), values.mode === 'single' && (0, jsx_runtime_1.jsx)(parameters_1.PureSelectControl, { title: "[Chain] ".concat(param_definition_1.ParamDefinition.optionLabel(params.chain, values.chain)), param: params.chain, name: 'chain', value: values.chain, onChange: this.setParamProps }), params.operator.options.length > 1 && (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(parameters_1.PureSelectControl, { title: "[Instance] ".concat(param_definition_1.ParamDefinition.optionLabel(params.operator, values.operator)), param: params.operator, name: 'operator', value: values.operator, onChange: this.setParamProps }) })] })), (0, jsx_runtime_1.jsx)(NonEmptySequenceWrapper, { children: sequenceWrappers.map(function (s, i) {
                         var elem = typeof s.wrapper === 'string'
-                            ? (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'msp-sequence-wrapper' }, { children: s.wrapper }), i)
+                            ? (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'msp-sequence-wrapper' }, { children: s.wrapper }), i)
                             : (0, jsx_runtime_1.jsx)(sequence_1.Sequence, { sequenceWrapper: s.wrapper }, i);
                         if (values.mode === 'single')
                             return elem;
-                        return (0, jsx_runtime_1.jsxs)(React.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'msp-sequence-chain-label' }, { children: s.label }), void 0), elem] }, i);
-                    }) }, void 0)] }), void 0);
+                        return (0, jsx_runtime_1.jsxs)(React.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'msp-sequence-chain-label' }, { children: s.label })), elem] }, i);
+                    }) })] }));
     };
     return SequenceView;
 }(base_1.PluginUIComponent));
 exports.SequenceView = SequenceView;
 function NonEmptySequenceWrapper(_a) {
     var children = _a.children;
-    return (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'msp-sequence-wrapper-non-empty' }, { children: children }), void 0);
+    return (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'msp-sequence-wrapper-non-empty' }, { children: children }));
 }
-//# sourceMappingURL=sequence.js.map

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

@@ -11,8 +11,7 @@ var tslib_1 = require("tslib");
 var transformers_1 = require("../mol-plugin/behavior/dynamic/volume-streaming/transformers");
 var spec_1 = require("../mol-plugin/spec");
 var volume_1 = require("./custom/volume");
-var DefaultPluginUISpec = function () { return ((0, tslib_1.__assign)((0, tslib_1.__assign)({}, (0, spec_1.DefaultPluginSpec)()), { customParamEditors: [
+var DefaultPluginUISpec = function () { return (tslib_1.__assign(tslib_1.__assign({}, (0, spec_1.DefaultPluginSpec)()), { customParamEditors: [
         [transformers_1.CreateVolumeStreamingBehavior, volume_1.VolumeStreamingCustomControls]
     ] })); };
 exports.DefaultPluginUISpec = DefaultPluginUISpec;
-//# sourceMappingURL=spec.js.map

package/lib/commonjs/mol-plugin-ui/state/actions.js

@@ -7,7 +7,7 @@ var base_1 = require("../base");
 var icons_1 = require("../controls/icons");
 var apply_action_1 = require("./apply-action");
 var StateObjectActions = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(StateObjectActions, _super);
+    tslib_1.__extends(StateObjectActions, _super);
     function StateObjectActions() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
@@ -43,9 +43,8 @@ var StateObjectActions = /** @class */ (function (_super) {
             return null;
         var def = cell.transform.transformer.definition;
         var display = cell.obj ? cell.obj.label : (def.display && def.display.name) || def.name;
-        return (0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: 'msp-state-actions' }, { children: [!this.props.hideHeader && (0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: 'msp-section-header' }, { children: [(0, jsx_runtime_1.jsx)(icons_1.Icon, { svg: icons_1.CodeSvg }, void 0), " ", "Actions (".concat(display, ")")] }), void 0), actions.map(function (act, i) { return (0, jsx_runtime_1.jsx)(apply_action_1.ApplyActionControl, { state: state, action: act, nodeRef: ref, initiallyCollapsed: i === 0 ? !_this.props.alwaysExpandFirst && _this.props.initiallyCollapsed : _this.props.initiallyCollapsed }, "".concat(act.id)); })] }), void 0);
+        return (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: 'msp-state-actions' }, { children: [!this.props.hideHeader && (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: 'msp-section-header' }, { children: [(0, jsx_runtime_1.jsx)(icons_1.Icon, { svg: icons_1.CodeSvg }), " ", "Actions (".concat(display, ")")] })), actions.map(function (act, i) { return (0, jsx_runtime_1.jsx)(apply_action_1.ApplyActionControl, { state: state, action: act, nodeRef: ref, initiallyCollapsed: i === 0 ? !_this.props.alwaysExpandFirst && _this.props.initiallyCollapsed : _this.props.initiallyCollapsed }, "".concat(act.id)); })] }));
     };
     return StateObjectActions;
 }(base_1.PluginUIComponent));
 exports.StateObjectActions = StateObjectActions;
-//# sourceMappingURL=actions.js.map

package/lib/commonjs/mol-plugin-ui/state/animation.js

@@ -13,7 +13,7 @@ var parameters_1 = require("../controls/parameters");
 var common_1 = require("../controls/common");
 var icons_1 = require("../controls/icons");
 var AnimationControls = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(AnimationControls, _super);
+    tslib_1.__extends(AnimationControls, _super);
     function AnimationControls() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.updateParams = function (p) {
@@ -47,9 +47,8 @@ var AnimationControls = /** @class */ (function (_super) {
             return null;
         var isDisabled = anim.state.animationState === 'playing';
         var canApply = (_b = (_a = anim.current.anim).canApply) === null || _b === void 0 ? void 0 : _b.call(_a, this.plugin);
-        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(parameters_1.ParameterControls, { params: anim.getParams(), values: anim.state.params, onChange: this.updateParams, isDisabled: isDisabled }, void 0), (0, jsx_runtime_1.jsx)(parameters_1.ParameterControls, { params: anim.current.params, values: anim.current.paramValues, onChange: this.updateCurrentParams, isDisabled: isDisabled }, void 0), (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'msp-flex-row' }, { children: (0, jsx_runtime_1.jsx)(common_1.Button, (0, tslib_1.__assign)({ icon: anim.state.animationState !== 'playing' ? void 0 : icons_1.PlayArrowSvg, onClick: this.startOrStop, disabled: canApply !== void 0 && canApply.canApply === false }, { children: anim.state.animationState === 'playing' ? 'Stop' : canApply === void 0 || canApply.canApply ? 'Start' : canApply.reason || 'Start' }), void 0) }), void 0)] }, void 0);
+        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(parameters_1.ParameterControls, { params: anim.getParams(), values: anim.state.params, onChange: this.updateParams, isDisabled: isDisabled }), (0, jsx_runtime_1.jsx)(parameters_1.ParameterControls, { params: anim.current.params, values: anim.current.paramValues, onChange: this.updateCurrentParams, isDisabled: isDisabled }), (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'msp-flex-row' }, { children: (0, jsx_runtime_1.jsx)(common_1.Button, tslib_1.__assign({ icon: anim.state.animationState !== 'playing' ? void 0 : icons_1.PlayArrowSvg, onClick: this.startOrStop, disabled: canApply !== void 0 && canApply.canApply === false }, { children: anim.state.animationState === 'playing' ? 'Stop' : canApply === void 0 || canApply.canApply ? 'Start' : canApply.reason || 'Start' })) }))] });
     };
     return AnimationControls;
 }(base_1.PluginUIComponent));
 exports.AnimationControls = AnimationControls;
-//# sourceMappingURL=animation.js.map

package/lib/commonjs/mol-plugin-ui/state/apply-action.js

@@ -12,7 +12,7 @@ var memoize_1 = require("../../mol-util/memoize");
 var common_1 = require("./common");
 var param_definition_1 = require("../../mol-util/param-definition");
 var ApplyActionControl = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(ApplyActionControl, _super);
+    tslib_1.__extends(ApplyActionControl, _super);
     function ApplyActionControl() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this._getInfo = (0, memoize_1.memoizeLatest)(function (t, v) { return common_1.StateTransformParameters.infoFromAction(_this.plugin, _this.props.state, _this.props.action, _this.props.nodeRef); });
@@ -56,4 +56,3 @@ var ApplyActionControl = /** @class */ (function (_super) {
     return ApplyActionControl;
 }(common_1.TransformControlBase));
 exports.ApplyActionControl = ApplyActionControl;
-//# sourceMappingURL=apply-action.js.map