molstar 3.3.0 → 3.5.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,7 +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));

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,9 +246,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((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));

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;

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;

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 = [];

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]);

package/lib/commonjs/mol-plugin-ui/sequence/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 rxjs_1 = require("rxjs");
 var operators_1 = require("rxjs/operators");
 var int_1 = require("../../mol-data/int");
@@ -21,7 +21,7 @@ var base_1 = require("../base");
 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 });
@@ -190,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'];
@@ -229,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)
@@ -273,7 +273,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 (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));

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,24 +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 }));
 }

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

@@ -11,7 +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;

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,7 +43,7 @@ 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));

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,7 +47,7 @@ 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));

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); });

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

@@ -10,13 +10,13 @@ var rxjs_1 = require("rxjs");
 var icons_1 = require("../controls/icons");
 var common_1 = require("../controls/common");
 var StateTransformParameters = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(StateTransformParameters, _super);
+    tslib_1.__extends(StateTransformParameters, _super);
     function StateTransformParameters() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.onChange = function (_a) {
             var _b;
             var name = _a.name, value = _a.value;
-            var params = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, _this.props.params), (_b = {}, _b[name] = value, _b));
+            var params = tslib_1.__assign(tslib_1.__assign({}, _this.props.params), (_b = {}, _b[name] = value, _b));
             _this.props.events.onChange(params, _this.areInitial(params), _this.validate(params));
         };
         return _this;
@@ -29,7 +29,7 @@ var StateTransformParameters = /** @class */ (function (_super) {
         return param_definition_1.ParamDefinition.areEqual(this.props.info.params, params, this.props.info.initialValues);
     };
     StateTransformParameters.prototype.render = function () {
-        return (0, jsx_runtime_1.jsx)(parameters_1.ParameterControls, { params: this.props.info.params, values: this.props.params, onChange: this.onChange, onEnter: this.props.events.onEnter, isDisabled: this.props.isDisabled }, void 0);
+        return (0, jsx_runtime_1.jsx)(parameters_1.ParameterControls, { params: this.props.info.params, values: this.props.params, onChange: this.onChange, onEnter: this.props.events.onEnter, isDisabled: this.props.isDisabled });
     };
     return StateTransformParameters;
 }(base_1.PurePluginUIComponent));
@@ -72,7 +72,7 @@ exports.StateTransformParameters = StateTransformParameters;
 })(StateTransformParameters || (StateTransformParameters = {}));
 exports.StateTransformParameters = StateTransformParameters;
 var TransformControlBase = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(TransformControlBase, _super);
+    tslib_1.__extends(TransformControlBase, _super);
     function TransformControlBase() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.busy = new rxjs_1.Subject();
@@ -94,10 +94,10 @@ var TransformControlBase = /** @class */ (function (_super) {
                 });
             }
         };
-        _this.apply = function () { return (0, tslib_1.__awaiter)(_this, void 0, void 0, function () {
+        _this.apply = function () { return tslib_1.__awaiter(_this, void 0, void 0, function () {
             var e_1;
             var _a, _b;
-            return (0, tslib_1.__generator)(this, function (_c) {
+            return tslib_1.__generator(this, function (_c) {
                 switch (_c.label) {
                     case 0:
                         this.clearAutoApply();
@@ -155,7 +155,7 @@ var TransformControlBase = /** @class */ (function (_super) {
         var canApply = this.canApply();
         if (this.props.autoHideApply && (!canApply || this.canAutoApply(this.state.params)))
             return null;
-        return (0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: 'msp-transform-apply-wrap' }, { children: [(0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.RefreshSvg, className: 'msp-transform-default-params', onClick: this.setDefault, disabled: this.state.busy, title: 'Set default params' }, void 0), (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: "msp-transform-apply-wider" }, { children: (0, jsx_runtime_1.jsx)(common_1.Button, (0, tslib_1.__assign)({ icon: canApply ? icons_1.CheckSvg : void 0, className: "msp-btn-commit msp-btn-commit-".concat(canApply ? 'on' : 'off'), onClick: this.apply, disabled: !canApply }, { children: this.props.applyLabel || this.applyText() }), void 0) }), void 0)] }), void 0);
+        return (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: 'msp-transform-apply-wrap' }, { children: [(0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.RefreshSvg, className: 'msp-transform-default-params', onClick: this.setDefault, disabled: this.state.busy, title: 'Set default params' }), (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: "msp-transform-apply-wider" }, { children: (0, jsx_runtime_1.jsx)(common_1.Button, tslib_1.__assign({ icon: canApply ? icons_1.CheckSvg : void 0, className: "msp-btn-commit msp-btn-commit-".concat(canApply ? 'on' : 'off'), onClick: this.apply, disabled: !canApply }, { children: this.props.applyLabel || this.applyText() })) }))] }));
     };
     TransformControlBase.prototype.renderDefault = function () {
         var info = this.getInfo();
@@ -172,18 +172,18 @@ var TransformControlBase = /** @class */ (function (_super) {
         if (!isEmpty && !this.state.isCollapsed) {
             var _a = this.getSourceAndTarget(), a = _a.a, b = _a.b, bCell = _a.bCell;
             var applyControl = this.renderApply();
-            params = (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ParamEditor, { info: info, a: a, b: b, bCell: bCell, events: this.events, params: this.state.params, isDisabled: this.state.busy }, void 0), applyControl] }, void 0);
+            params = (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ParamEditor, { info: info, a: a, b: b, bCell: bCell, events: this.events, params: this.state.params, isDisabled: this.state.busy }), applyControl] });
         }
-        var ctrl = (0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: wrapClass, style: { marginBottom: this.props.noMargin ? 0 : void 0 } }, { children: [display !== 'none' && !this.props.wrapInExpander && (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'msp-transform-header' }, { children: (0, jsx_runtime_1.jsxs)(common_1.Button, (0, tslib_1.__assign)({ onClick: this.toggleExpanded, title: display.description }, { children: [!isEmpty && (0, jsx_runtime_1.jsx)(icons_1.Icon, { svg: this.state.isCollapsed ? icons_1.ArrowRightSvg : icons_1.ArrowDropDownSvg }, void 0), display.name] }), void 0) }), void 0), params] }), void 0);
+        var ctrl = (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: wrapClass, style: { marginBottom: this.props.noMargin ? 0 : void 0 } }, { children: [display !== 'none' && !this.props.wrapInExpander && (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'msp-transform-header' }, { children: (0, jsx_runtime_1.jsxs)(common_1.Button, tslib_1.__assign({ onClick: this.toggleExpanded, title: display.description }, { children: [!isEmpty && (0, jsx_runtime_1.jsx)(icons_1.Icon, { svg: this.state.isCollapsed ? icons_1.ArrowRightSvg : icons_1.ArrowDropDownSvg }), display.name] })) })), params] }));
         if (isEmpty || !this.props.wrapInExpander)
             return ctrl;
-        return (0, jsx_runtime_1.jsx)(common_1.ExpandGroup, (0, tslib_1.__assign)({ header: this.isUpdate() ? "Update ".concat(display === 'none' ? '' : display.name) : "Apply ".concat(display === 'none' ? '' : display.name), headerLeftMargin: this.props.expanderHeaderLeftMargin }, { children: ctrl }), void 0);
+        return (0, jsx_runtime_1.jsx)(common_1.ExpandGroup, tslib_1.__assign({ header: this.isUpdate() ? "Update ".concat(display === 'none' ? '' : display.name) : "Apply ".concat(display === 'none' ? '' : display.name), headerLeftMargin: this.props.expanderHeaderLeftMargin }, { children: ctrl }));
     };
     TransformControlBase.prototype.renderSimple = function () {
         var _a, _b, _c;
         var info = this.getInfo();
         var canApply = this.canApply();
-        var apply = (0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: 'msp-flex-row' }, { children: [(0, jsx_runtime_1.jsx)(common_1.Button, (0, tslib_1.__assign)({ icon: (_a = this.props.simpleApply) === null || _a === void 0 ? void 0 : _a.icon, title: (_b = this.props.simpleApply) === null || _b === void 0 ? void 0 : _b.title, disabled: this.state.busy || !canApply, onClick: this.apply, className: 'msp-btn-apply-simple' }, { children: (_c = this.props.simpleApply) === null || _c === void 0 ? void 0 : _c.header }), void 0), !info.isEmpty && (0, jsx_runtime_1.jsx)(common_1.ToggleButton, { icon: icons_1.TuneSvg, label: '', title: 'Options', toggle: this.toggleExpanded, isSelected: !this.state.isCollapsed, disabled: this.state.busy, style: { flex: '0 0 40px', padding: 0 } }, void 0)] }), void 0);
+        var apply = (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: 'msp-flex-row' }, { children: [(0, jsx_runtime_1.jsx)(common_1.Button, tslib_1.__assign({ icon: (_a = this.props.simpleApply) === null || _a === void 0 ? void 0 : _a.icon, title: (_b = this.props.simpleApply) === null || _b === void 0 ? void 0 : _b.title, disabled: this.state.busy || !canApply, onClick: this.apply, className: 'msp-btn-apply-simple' }, { children: (_c = this.props.simpleApply) === null || _c === void 0 ? void 0 : _c.header })), !info.isEmpty && (0, jsx_runtime_1.jsx)(common_1.ToggleButton, { icon: icons_1.TuneSvg, label: '', title: 'Options', toggle: this.toggleExpanded, isSelected: !this.state.isCollapsed, disabled: this.state.busy, style: { flex: '0 0 40px', padding: 0 } })] }));
         if (this.state.isCollapsed)
             return apply;
         var tId = this.getTransformerId();
@@ -191,7 +191,7 @@ var TransformControlBase = /** @class */ (function (_super) {
             ? this.plugin.customParamEditors.get(tId)
             : StateTransformParameters;
         var _d = this.getSourceAndTarget(), a = _d.a, b = _d.b, bCell = _d.bCell;
-        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [apply, (0, jsx_runtime_1.jsx)(ParamEditor, { info: info, a: a, b: b, bCell: bCell, events: this.events, params: this.state.params, isDisabled: this.state.busy }, void 0)] }, void 0);
+        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [apply, (0, jsx_runtime_1.jsx)(ParamEditor, { info: info, a: a, b: b, bCell: bCell, events: this.events, params: this.state.params, isDisabled: this.state.busy })] });
     };
     TransformControlBase.prototype.render = function () {
         // console.log('rendering', ((this.props as any)?.transform?.transformer || (this.props as any)?.action)?.definition.display.name, +new Date)