molstar 3.3.1 → 3.4.0

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -40,7 +40,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 _jsxs("div", __assign({ className: 'msp-state-actions' }, { children: [!this.props.hideHeader && _jsxs("div", __assign({ className: 'msp-section-header' }, { children: [_jsx(Icon, { svg: CodeSvg }, void 0), " ", "Actions (".concat(display, ")")] }), void 0), actions.map(function (act, i) { return _jsx(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 _jsxs("div", __assign({ className: 'msp-state-actions' }, { children: [!this.props.hideHeader && _jsxs("div", __assign({ className: 'msp-section-header' }, { children: [_jsx(Icon, { svg: CodeSvg }), " ", "Actions (".concat(display, ")")] })), actions.map(function (act, i) { return _jsx(ApplyActionControl, { state: state, action: act, nodeRef: ref, initiallyCollapsed: i === 0 ? !_this.props.alwaysExpandFirst && _this.props.initiallyCollapsed : _this.props.initiallyCollapsed }, "".concat(act.id)); })] }));
     };
     return StateObjectActions;
 }(PluginUIComponent));

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

@@ -44,7 +44,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 _jsxs(_Fragment, { children: [_jsx(ParameterControls, { params: anim.getParams(), values: anim.state.params, onChange: this.updateParams, isDisabled: isDisabled }, void 0), _jsx(ParameterControls, { params: anim.current.params, values: anim.current.paramValues, onChange: this.updateCurrentParams, isDisabled: isDisabled }, void 0), _jsx("div", __assign({ className: 'msp-flex-row' }, { children: _jsx(Button, __assign({ icon: anim.state.animationState !== 'playing' ? void 0 : 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 _jsxs(_Fragment, { children: [_jsx(ParameterControls, { params: anim.getParams(), values: anim.state.params, onChange: this.updateParams, isDisabled: isDisabled }), _jsx(ParameterControls, { params: anim.current.params, values: anim.current.paramValues, onChange: this.updateCurrentParams, isDisabled: isDisabled }), _jsx("div", __assign({ className: 'msp-flex-row' }, { children: _jsx(Button, __assign({ icon: anim.state.animationState !== 'playing' ? void 0 : 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;
 }(PluginUIComponent));

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

@@ -27,7 +27,7 @@ var StateTransformParameters = /** @class */ (function (_super) {
         return PD.areEqual(this.props.info.params, params, this.props.info.initialValues);
     };
     StateTransformParameters.prototype.render = function () {
-        return _jsx(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 _jsx(ParameterControls, { params: this.props.info.params, values: this.props.params, onChange: this.onChange, onEnter: this.props.events.onEnter, isDisabled: this.props.isDisabled });
     };
     return StateTransformParameters;
 }(PurePluginUIComponent));
@@ -151,7 +151,7 @@ var TransformControlBase = /** @class */ (function (_super) {
         var canApply = this.canApply();
         if (this.props.autoHideApply && (!canApply || this.canAutoApply(this.state.params)))
             return null;
-        return _jsxs("div", __assign({ className: 'msp-transform-apply-wrap' }, { children: [_jsx(IconButton, { svg: RefreshSvg, className: 'msp-transform-default-params', onClick: this.setDefault, disabled: this.state.busy, title: 'Set default params' }, void 0), _jsx("div", __assign({ className: "msp-transform-apply-wider" }, { children: _jsx(Button, __assign({ icon: canApply ? 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 _jsxs("div", __assign({ className: 'msp-transform-apply-wrap' }, { children: [_jsx(IconButton, { svg: RefreshSvg, className: 'msp-transform-default-params', onClick: this.setDefault, disabled: this.state.busy, title: 'Set default params' }), _jsx("div", __assign({ className: "msp-transform-apply-wider" }, { children: _jsx(Button, __assign({ icon: canApply ? 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();
@@ -168,18 +168,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 = _jsxs(_Fragment, { children: [_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 = _jsxs(_Fragment, { children: [_jsx(ParamEditor, { info: info, a: a, b: b, bCell: bCell, events: this.events, params: this.state.params, isDisabled: this.state.busy }), applyControl] });
         }
-        var ctrl = _jsxs("div", __assign({ className: wrapClass, style: { marginBottom: this.props.noMargin ? 0 : void 0 } }, { children: [display !== 'none' && !this.props.wrapInExpander && _jsx("div", __assign({ className: 'msp-transform-header' }, { children: _jsxs(Button, __assign({ onClick: this.toggleExpanded, title: display.description }, { children: [!isEmpty && _jsx(Icon, { svg: this.state.isCollapsed ? ArrowRightSvg : ArrowDropDownSvg }, void 0), display.name] }), void 0) }), void 0), params] }), void 0);
+        var ctrl = _jsxs("div", __assign({ className: wrapClass, style: { marginBottom: this.props.noMargin ? 0 : void 0 } }, { children: [display !== 'none' && !this.props.wrapInExpander && _jsx("div", __assign({ className: 'msp-transform-header' }, { children: _jsxs(Button, __assign({ onClick: this.toggleExpanded, title: display.description }, { children: [!isEmpty && _jsx(Icon, { svg: this.state.isCollapsed ? ArrowRightSvg : ArrowDropDownSvg }), display.name] })) })), params] }));
         if (isEmpty || !this.props.wrapInExpander)
             return ctrl;
-        return _jsx(ExpandGroup, __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 _jsx(ExpandGroup, __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 = _jsxs("div", __assign({ className: 'msp-flex-row' }, { children: [_jsx(Button, __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 && _jsx(ToggleButton, { icon: 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 = _jsxs("div", __assign({ className: 'msp-flex-row' }, { children: [_jsx(Button, __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 && _jsx(ToggleButton, { icon: 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();
@@ -187,7 +187,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 _jsxs(_Fragment, { children: [apply, _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 _jsxs(_Fragment, { children: [apply, _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)

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

@@ -24,7 +24,7 @@ var StateSnapshots = /** @class */ (function (_super) {
     }
     StateSnapshots.prototype.render = function () {
         var _a;
-        return _jsxs("div", { children: [_jsx(SectionHeader, { icon: SaveOutlinedSvg, title: 'Plugin State' }, void 0), _jsx("div", __assign({ style: { marginBottom: '10px' } }, { children: _jsx(ExpandGroup, __assign({ header: 'Save Options', initiallyExpanded: false }, { children: _jsx(LocalStateSnapshotParams, {}, void 0) }), void 0) }), void 0), _jsx(LocalStateSnapshots, {}, void 0), _jsx(LocalStateSnapshotList, {}, void 0), _jsx(SectionHeader, { title: 'Save as File', accent: 'blue' }, void 0), _jsx(StateExportImportControls, {}, void 0), ((_a = this.plugin.spec.components) === null || _a === void 0 ? void 0 : _a.remoteState) !== 'none' && _jsx(RemoteStateSnapshots, {}, void 0)] }, void 0);
+        return _jsxs("div", { children: [_jsx(SectionHeader, { icon: SaveOutlinedSvg, title: 'Plugin State' }), _jsx("div", __assign({ style: { marginBottom: '10px' } }, { children: _jsx(ExpandGroup, __assign({ header: 'Save Options', initiallyExpanded: false }, { children: _jsx(LocalStateSnapshotParams, {}) })) })), _jsx(LocalStateSnapshots, {}), _jsx(LocalStateSnapshotList, {}), _jsx(SectionHeader, { title: 'Save as File', accent: 'blue' }), _jsx(StateExportImportControls, {}), ((_a = this.plugin.spec.components) === null || _a === void 0 ? void 0 : _a.remoteState) !== 'none' && _jsx(RemoteStateSnapshots, {})] });
     };
     return StateSnapshots;
 }(PluginUIComponent));
@@ -55,7 +55,7 @@ var StateExportImportControls = /** @class */ (function (_super) {
         return _this;
     }
     StateExportImportControls.prototype.render = function () {
-        return _jsxs(_Fragment, { children: [_jsxs("div", __assign({ className: 'msp-flex-row' }, { children: [_jsx(Button, __assign({ icon: GetAppSvg, onClick: this.downloadToFileJson, title: 'Save the state description. Input data are loaded using the provided sources. Does not work if local files are used as input.' }, { children: "State" }), void 0), _jsx(Button, __assign({ icon: GetAppSvg, onClick: this.downloadToFileZip, title: 'Save the state including the input data.' }, { children: "Session" }), void 0), _jsxs("div", __assign({ className: 'msp-btn msp-btn-block msp-btn-action msp-loader-msp-btn-file' }, { children: [_jsx(Icon, { svg: OpenInBrowserSvg, inline: true }, void 0), " Open ", _jsx("input", { onChange: this.open, type: 'file', multiple: false, accept: '.molx,.molj' }, void 0)] }), void 0)] }), void 0), _jsxs("div", __assign({ className: 'msp-help-text', style: { padding: '10px' } }, { children: [_jsx(Icon, { svg: WarningSvg }, void 0), " This is an experimental feature and stored states/sessions might not be openable in a future version."] }), void 0)] }, void 0);
+        return _jsxs(_Fragment, { children: [_jsxs("div", __assign({ className: 'msp-flex-row' }, { children: [_jsx(Button, __assign({ icon: GetAppSvg, onClick: this.downloadToFileJson, title: 'Save the state description. Input data are loaded using the provided sources. Does not work if local files are used as input.' }, { children: "State" })), _jsx(Button, __assign({ icon: GetAppSvg, onClick: this.downloadToFileZip, title: 'Save the state including the input data.' }, { children: "Session" })), _jsxs("div", __assign({ className: 'msp-btn msp-btn-block msp-btn-action msp-loader-msp-btn-file' }, { children: [_jsx(Icon, { svg: OpenInBrowserSvg, inline: true }), " Open ", _jsx("input", { onChange: this.open, type: 'file', multiple: false, accept: '.molx,.molj' })] }))] })), _jsxs("div", __assign({ className: 'msp-help-text', style: { padding: '10px' } }, { children: [_jsx(Icon, { svg: WarningSvg }), " This is an experimental feature and stored states/sessions might not be openable in a future version."] }))] });
     };
     return StateExportImportControls;
 }(PluginUIComponent));
@@ -70,7 +70,7 @@ var LocalStateSnapshotParams = /** @class */ (function (_super) {
         this.subscribe(this.plugin.state.snapshotParams, function () { return _this.forceUpdate(); });
     };
     LocalStateSnapshotParams.prototype.render = function () {
-        return _jsx(ParameterControls, { params: PluginState.SnapshotParams, values: this.plugin.state.snapshotParams.value, onChangeValues: this.plugin.state.setSnapshotParams }, void 0);
+        return _jsx(ParameterControls, { params: PluginState.SnapshotParams, values: this.plugin.state.snapshotParams.value, onChangeValues: this.plugin.state.setSnapshotParams });
     };
     return LocalStateSnapshotParams;
 }(PluginUIComponent));
@@ -96,7 +96,7 @@ var LocalStateSnapshots = /** @class */ (function (_super) {
         return !shallowEqualObjects(this.props, nextProps) || !shallowEqualObjects(this.state, nextState);
     };
     LocalStateSnapshots.prototype.render = function () {
-        return _jsxs("div", { children: [_jsx(ParameterControls, { params: LocalStateSnapshots.Params, values: this.state.params, onEnter: this.add, onChangeValues: this.updateParams }, void 0), _jsxs("div", __assign({ className: 'msp-flex-row' }, { children: [_jsx(IconButton, { onClick: this.clear, svg: DeleteOutlinedSvg, title: 'Remove All' }, void 0), _jsx(Button, __assign({ onClick: this.add, icon: AddSvg, style: { textAlign: 'right' }, commit: true }, { children: "Add" }), void 0)] }), void 0)] }, void 0);
+        return _jsxs("div", { children: [_jsx(ParameterControls, { params: LocalStateSnapshots.Params, values: this.state.params, onEnter: this.add, onChangeValues: this.updateParams }), _jsxs("div", __assign({ className: 'msp-flex-row' }, { children: [_jsx(IconButton, { onClick: this.clear, svg: DeleteOutlinedSvg, title: 'Remove All' }), _jsx(Button, __assign({ onClick: this.add, icon: AddSvg, style: { textAlign: 'right' }, commit: true }, { children: "Add" }))] }))] });
     };
     LocalStateSnapshots.Params = {
         name: PD.Text(),
@@ -148,7 +148,7 @@ var LocalStateSnapshotList = /** @class */ (function (_super) {
     LocalStateSnapshotList.prototype.render = function () {
         var _this = this;
         var current = this.plugin.managers.snapshot.state.current;
-        return _jsx("ul", __assign({ style: { listStyle: 'none', marginTop: '10px' }, className: 'msp-state-list' }, { children: this.plugin.managers.snapshot.state.entries.map(function (e) { return _jsxs("li", __assign({ className: 'msp-flex-row' }, { children: [_jsxs(Button, __assign({ "data-id": e.snapshot.id, onClick: _this.apply, className: 'msp-no-overflow' }, { children: [_jsx("span", __assign({ style: { fontWeight: e.snapshot.id === current ? 'bold' : void 0 } }, { children: e.name || new Date(e.timestamp).toLocaleString() }), void 0), " ", _jsx("small", { children: "".concat(e.snapshot.durationInMs ? formatTimespan(e.snapshot.durationInMs, false) + "".concat(e.description ? ', ' : '') : '').concat(e.description ? e.description : '') }, void 0)] }), void 0), _jsx(IconButton, { svg: ArrowUpwardSvg, "data-id": e.snapshot.id, title: 'Move Up', onClick: _this.moveUp, flex: '20px' }, void 0), _jsx(IconButton, { svg: ArrowDownwardSvg, "data-id": e.snapshot.id, title: 'Move Down', onClick: _this.moveDown, flex: '20px' }, void 0), _jsx(IconButton, { svg: SwapHorizSvg, "data-id": e.snapshot.id, title: 'Replace', onClick: _this.replace, flex: '20px' }, void 0), _jsx(IconButton, { svg: DeleteOutlinedSvg, "data-id": e.snapshot.id, title: 'Remove', onClick: _this.remove, flex: '20px' }, void 0)] }), e.snapshot.id); }) }), void 0);
+        return _jsx("ul", __assign({ style: { listStyle: 'none', marginTop: '10px' }, className: 'msp-state-list' }, { children: this.plugin.managers.snapshot.state.entries.map(function (e) { return _jsxs("li", __assign({ className: 'msp-flex-row' }, { children: [_jsxs(Button, __assign({ "data-id": e.snapshot.id, onClick: _this.apply, className: 'msp-no-overflow' }, { children: [_jsx("span", __assign({ style: { fontWeight: e.snapshot.id === current ? 'bold' : void 0 } }, { children: e.name || new Date(e.timestamp).toLocaleString() })), " ", _jsx("small", { children: "".concat(e.snapshot.durationInMs ? formatTimespan(e.snapshot.durationInMs, false) + "".concat(e.description ? ', ' : '') : '').concat(e.description ? e.description : '') })] })), _jsx(IconButton, { svg: ArrowUpwardSvg, "data-id": e.snapshot.id, title: 'Move Up', onClick: _this.moveUp, flex: '20px' }), _jsx(IconButton, { svg: ArrowDownwardSvg, "data-id": e.snapshot.id, title: 'Move Down', onClick: _this.moveDown, flex: '20px' }), _jsx(IconButton, { svg: SwapHorizSvg, "data-id": e.snapshot.id, title: 'Replace', onClick: _this.replace, flex: '20px' }), _jsx(IconButton, { svg: DeleteOutlinedSvg, "data-id": e.snapshot.id, title: 'Remove', onClick: _this.remove, flex: '20px' })] }), e.snapshot.id); }) }));
     };
     return LocalStateSnapshotList;
 }(PluginUIComponent));
@@ -302,13 +302,13 @@ var RemoteStateSnapshots = /** @class */ (function (_super) {
     };
     RemoteStateSnapshots.prototype.render = function () {
         var _this = this;
-        return _jsxs(_Fragment, { children: [_jsx(SectionHeader, { title: 'Remote States', accent: 'blue' }, void 0), !this.props.listOnly && _jsxs(_Fragment, { children: [_jsx(ParameterControls, { params: this.Params, values: this.state.params, onEnter: this.upload, onChange: function (p) {
+        return _jsxs(_Fragment, { children: [_jsx(SectionHeader, { title: 'Remote States', accent: 'blue' }), !this.props.listOnly && _jsxs(_Fragment, { children: [_jsx(ParameterControls, { params: this.Params, values: this.state.params, onEnter: this.upload, onChange: function (p) {
                                 var _a;
                                 _this.setState({ params: __assign(__assign({}, _this.state.params), (_a = {}, _a[p.name] = p.value, _a)) });
-                            }, isDisabled: this.state.isBusy }, void 0), _jsxs("div", __assign({ className: 'msp-flex-row' }, { children: [_jsx(IconButton, { onClick: this.refresh, disabled: this.state.isBusy, svg: RefreshSvg }, void 0), _jsx(Button, __assign({ icon: CloudUploadSvg, onClick: this.upload, disabled: this.state.isBusy, commit: true }, { children: "Upload" }), void 0)] }), void 0)] }, void 0), _jsx(RemoteStateSnapshotList, { entries: this.state.entries, isBusy: this.state.isBusy, serverUrl: this.state.params.options.serverUrl, fetch: this.fetch, remove: this.props.listOnly ? void 0 : this.remove }, void 0), this.props.listOnly && _jsxs("div", __assign({ style: { marginTop: '10px' } }, { children: [_jsx(ParameterControls, { params: this.ListOnlyParams, values: this.state.params, onEnter: this.upload, onChange: function (p) {
+                            }, isDisabled: this.state.isBusy }), _jsxs("div", __assign({ className: 'msp-flex-row' }, { children: [_jsx(IconButton, { onClick: this.refresh, disabled: this.state.isBusy, svg: RefreshSvg }), _jsx(Button, __assign({ icon: CloudUploadSvg, onClick: this.upload, disabled: this.state.isBusy, commit: true }, { children: "Upload" }))] }))] }), _jsx(RemoteStateSnapshotList, { entries: this.state.entries, isBusy: this.state.isBusy, serverUrl: this.state.params.options.serverUrl, fetch: this.fetch, remove: this.props.listOnly ? void 0 : this.remove }), this.props.listOnly && _jsxs("div", __assign({ style: { marginTop: '10px' } }, { children: [_jsx(ParameterControls, { params: this.ListOnlyParams, values: this.state.params, onEnter: this.upload, onChange: function (p) {
                                 var _a;
                                 _this.setState({ params: __assign(__assign({}, _this.state.params), (_a = {}, _a[p.name] = p.value, _a)) });
-                            }, isDisabled: this.state.isBusy }, void 0), _jsx("div", __assign({ className: 'msp-flex-row' }, { children: _jsx(Button, __assign({ onClick: this.refresh, disabled: this.state.isBusy, icon: RefreshSvg }, { children: "Refresh" }), void 0) }), void 0)] }), void 0)] }, void 0);
+                            }, isDisabled: this.state.isBusy }), _jsx("div", __assign({ className: 'msp-flex-row' }, { children: _jsx(Button, __assign({ onClick: this.refresh, disabled: this.state.isBusy, icon: RefreshSvg }, { children: "Refresh" })) }))] }))] });
     };
     return RemoteStateSnapshots;
 }(PluginUIComponent));
@@ -339,7 +339,7 @@ var RemoteStateSnapshotList = /** @class */ (function (_super) {
     }
     RemoteStateSnapshotList.prototype.render = function () {
         var _this = this;
-        return _jsx("ul", __assign({ style: { listStyle: 'none', marginTop: '10px' }, className: 'msp-state-list' }, { children: this.props.entries.valueSeq().map(function (e) { return _jsxs("li", __assign({ className: 'msp-flex-row' }, { children: [_jsxs(Button, __assign({ "data-id": e.id, onClick: _this.props.fetch, disabled: _this.props.isBusy, onContextMenu: _this.open, title: 'Click to download, right-click to open in a new tab.' }, { children: [e.name || new Date(e.timestamp).toLocaleString(), " ", _jsx("small", { children: e.description }, void 0)] }), void 0), !e.isSticky && _this.props.remove && _jsx(IconButton, { svg: DeleteOutlinedSvg, "data-id": e.id, title: 'Remove', onClick: _this.props.remove, disabled: _this.props.isBusy, small: true }, void 0)] }), e.id); }) }), void 0);
+        return _jsx("ul", __assign({ style: { listStyle: 'none', marginTop: '10px' }, className: 'msp-state-list' }, { children: this.props.entries.valueSeq().map(function (e) { return _jsxs("li", __assign({ className: 'msp-flex-row' }, { children: [_jsxs(Button, __assign({ "data-id": e.id, onClick: _this.props.fetch, disabled: _this.props.isBusy, onContextMenu: _this.open, title: 'Click to download, right-click to open in a new tab.' }, { children: [e.name || new Date(e.timestamp).toLocaleString(), " ", _jsx("small", { children: e.description })] })), !e.isSticky && _this.props.remove && _jsx(IconButton, { svg: DeleteOutlinedSvg, "data-id": e.id, title: 'Remove', onClick: _this.props.remove, disabled: _this.props.isBusy, small: true })] }), e.id); }) }));
     };
     return RemoteStateSnapshotList;
 }(PurePluginUIComponent));

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

@@ -39,9 +39,9 @@ var StateTree = /** @class */ (function (_super) {
     StateTree.prototype.render = function () {
         var ref = this.props.state.tree.root.ref;
         if (this.state.showActions) {
-            return _jsxs("div", __assign({ style: { margin: '10px', cursor: 'default' } }, { children: [_jsx("p", { children: "Nothing to see here yet." }, void 0), _jsxs("p", { children: ["Structures and Volumes can be loaded from the ", _jsx(Icon, { svg: HomeOutlinedSvg }, void 0), " tab."] }, void 0)] }), void 0);
+            return _jsxs("div", __assign({ style: { margin: '10px', cursor: 'default' } }, { children: [_jsx("p", { children: "Nothing to see here yet." }), _jsxs("p", { children: ["Structures and Volumes can be loaded from the ", _jsx(Icon, { svg: HomeOutlinedSvg }), " tab."] })] }));
         }
-        return _jsx(StateTreeNode, { cell: this.props.state.cells.get(ref), depth: 0 }, void 0);
+        return _jsx(StateTreeNode, { cell: this.props.state.cells.get(ref), depth: 0 });
     };
     return StateTree;
 }(PluginUIComponent));
@@ -119,12 +119,12 @@ var StateTreeNode = /** @class */ (function (_super) {
         if (!this.state.showLabel) {
             if (children.size === 0)
                 return null;
-            return _jsx(_Fragment, { children: children.map(function (c) { return _jsx(StateTreeNode, { cell: cell.parent.cells.get(c), depth: _this.props.depth }, c); }) }, void 0);
+            return _jsx(_Fragment, { children: children.map(function (c) { return _jsx(StateTreeNode, { cell: cell.parent.cells.get(c), depth: _this.props.depth }, c); }) });
         }
         var newDepth = this.props.depth + 1;
-        return _jsxs(_Fragment, { children: [_jsx(StateTreeNodeLabel, { cell: cell, depth: this.props.depth }, void 0), children.size === 0
+        return _jsxs(_Fragment, { children: [_jsx(StateTreeNodeLabel, { cell: cell, depth: this.props.depth }), children.size === 0
                     ? void 0
-                    : _jsx("div", __assign({ style: { display: this.state.isCollapsed ? 'none' : 'block' } }, { children: children.map(function (c) { return _jsx(StateTreeNode, { cell: cell.parent.cells.get(c), depth: newDepth }, c); }) }), void 0)] }, void 0);
+                    : _jsx("div", __assign({ style: { display: this.state.isCollapsed ? 'none' : 'block' } }, { children: children.map(function (c) { return _jsx(StateTreeNode, { cell: cell.parent.cells.get(c), depth: newDepth }, c); }) }))] });
     };
     return StateTreeNode;
 }(PluginUIComponent));
@@ -247,7 +247,7 @@ var StateTreeNodeLabel = /** @class */ (function (_super) {
             var d = decoratorChain[i];
             decorators.push(_jsx(UpdateTransformControl, { state: cell.parent, transform: d.transform, noMargin: true, wrapInExpander: true, expanderHeaderLeftMargin: margin }, "".concat(d.transform.transformer.id, "-").concat(i)));
         }
-        return _jsx("div", __assign({ className: 'msp-tree-updates-wrapper' }, { children: decorators }), void 0);
+        return _jsx("div", __assign({ className: 'msp-tree-updates-wrapper' }, { children: decorators }));
     };
     StateTreeNodeLabel.prototype.render = function () {
         var cell = this.props.cell;
@@ -259,31 +259,31 @@ var StateTreeNodeLabel = /** @class */ (function (_super) {
         var label;
         if (cell.status === 'error' || !cell.obj) {
             var name_1 = cell.status === 'error' ? cell.errorText : n.transformer.definition.display.name;
-            label = _jsxs(Button, __assign({ className: 'msp-btn-tree-label msp-no-hover-outline', noOverflow: true, title: name_1, onClick: this.state.isCurrent ? this.setCurrentRoot : this.setCurrent, disabled: disabled }, { children: [cell.status === 'error' && _jsxs("b", { children: ["[", cell.status, "]"] }, void 0), " ", _jsx("span", { children: name_1 }, void 0)] }), void 0);
+            label = _jsxs(Button, __assign({ className: 'msp-btn-tree-label msp-no-hover-outline', noOverflow: true, title: name_1, onClick: this.state.isCurrent ? this.setCurrentRoot : this.setCurrent, disabled: disabled }, { children: [cell.status === 'error' && _jsxs("b", { children: ["[", cell.status, "]"] }), " ", _jsx("span", { children: name_1 })] }));
         }
         else {
             var obj = cell.obj;
             var title = "".concat(obj.label, " ").concat(obj.description ? obj.description : '');
-            label = _jsxs(Button, __assign({ className: "msp-btn-tree-label msp-type-class-".concat(obj.type.typeClass), noOverflow: true, disabled: disabled, title: title, onClick: this.state.isCurrent ? this.setCurrentRoot : this.setCurrent }, { children: [_jsx("span", { children: obj.label }, void 0), " ", obj.description ? _jsx("small", { children: obj.description }, void 0) : void 0] }), void 0);
+            label = _jsxs(Button, __assign({ className: "msp-btn-tree-label msp-type-class-".concat(obj.type.typeClass), noOverflow: true, disabled: disabled, title: title, onClick: this.state.isCurrent ? this.setCurrentRoot : this.setCurrent }, { children: [_jsx("span", { children: obj.label }), " ", obj.description ? _jsx("small", { children: obj.description }) : void 0] }));
         }
         var children = cell.parent.tree.children.get(this.ref);
         var cellState = cell.state;
-        var expand = _jsx(IconButton, { svg: cellState.isCollapsed ? ArrowRightSvg : ArrowDropDownSvg, flex: '20px', disabled: disabled, onClick: this.toggleExpanded, transparent: true, className: 'msp-no-hover-outline', style: { visibility: children.size > 0 ? 'visible' : 'hidden' } }, void 0);
-        var remove = !cell.state.isLocked ? _jsx(IconButton, { svg: DeleteOutlinedSvg, onClick: this.remove, disabled: disabled, small: true, toggleState: false }, void 0) : void 0;
-        var visibility = _jsx(IconButton, { svg: cellState.isHidden ? VisibilityOffOutlinedSvg : VisibilityOutlinedSvg, toggleState: false, disabled: disabled, small: true, onClick: this.toggleVisible }, void 0);
+        var expand = _jsx(IconButton, { svg: cellState.isCollapsed ? ArrowRightSvg : ArrowDropDownSvg, flex: '20px', disabled: disabled, onClick: this.toggleExpanded, transparent: true, className: 'msp-no-hover-outline', style: { visibility: children.size > 0 ? 'visible' : 'hidden' } });
+        var remove = !cell.state.isLocked ? _jsx(IconButton, { svg: DeleteOutlinedSvg, onClick: this.remove, disabled: disabled, small: true, toggleState: false }) : void 0;
+        var visibility = _jsx(IconButton, { svg: cellState.isHidden ? VisibilityOffOutlinedSvg : VisibilityOutlinedSvg, toggleState: false, disabled: disabled, small: true, onClick: this.toggleVisible });
         var marginStyle = {
             marginLeft: "".concat(this.props.depth * 8, "px")
         };
-        var row = _jsxs("div", __assign({ className: "msp-flex-row msp-tree-row".concat(isCurrent ? ' msp-tree-row-current' : ''), onMouseEnter: this.highlight, onMouseLeave: this.clearHighlight, style: marginStyle }, { children: [expand, label, remove, visibility] }), void 0);
+        var row = _jsxs("div", __assign({ className: "msp-flex-row msp-tree-row".concat(isCurrent ? ' msp-tree-row-current' : ''), onMouseEnter: this.highlight, onMouseLeave: this.clearHighlight, style: marginStyle }, { children: [expand, label, remove, visibility] }));
         if (!isCurrent)
             return row;
         if (this.state.action === 'apply' && this.state.currentAction) {
-            return _jsxs("div", __assign({ style: { marginBottom: '1px' } }, { children: [row, _jsx(ControlGroup, __assign({ header: "Apply ".concat(this.state.currentAction.definition.display.name), initialExpanded: true, hideExpander: true, hideOffset: false, onHeaderClick: this.hideApply, topRightIcon: CloseSvg, headerLeftMargin: "".concat(this.props.depth * 8 + 21, "px") }, { children: _jsx(ApplyActionControl, { onApply: this.hideApply, state: this.props.cell.parent, action: this.state.currentAction, nodeRef: this.props.cell.transform.ref, hideHeader: true, noMargin: true }, void 0) }), void 0)] }), void 0);
+            return _jsxs("div", __assign({ style: { marginBottom: '1px' } }, { children: [row, _jsx(ControlGroup, __assign({ header: "Apply ".concat(this.state.currentAction.definition.display.name), initialExpanded: true, hideExpander: true, hideOffset: false, onHeaderClick: this.hideApply, topRightIcon: CloseSvg, headerLeftMargin: "".concat(this.props.depth * 8 + 21, "px") }, { children: _jsx(ApplyActionControl, { onApply: this.hideApply, state: this.props.cell.parent, action: this.state.currentAction, nodeRef: this.props.cell.transform.ref, hideHeader: true, noMargin: true }) }))] }));
         }
         if (this.state.action === 'options') {
             var actions = this.actions;
             var updates = this.updates("".concat(this.props.depth * 8 + 21, "px"));
-            return _jsxs("div", __assign({ style: { marginBottom: '1px' } }, { children: [row, updates, actions && _jsx("div", __assign({ style: { marginLeft: "".concat(this.props.depth * 8 + 21, "px"), marginTop: '-1px' } }, { children: _jsx(ActionMenu, { items: actions, onSelect: this.selectAction }, void 0) }), void 0)] }), void 0);
+            return _jsxs("div", __assign({ style: { marginBottom: '1px' } }, { children: [row, updates, actions && _jsx("div", __assign({ style: { marginLeft: "".concat(this.props.depth * 8 + 21, "px"), marginTop: '-1px' } }, { children: _jsx(ActionMenu, { items: actions, onSelect: this.selectAction }) }))] }));
         }
         return row;
     };

package/lib/mol-plugin-ui/state/update-transform.js

@@ -104,7 +104,7 @@ var TransformUpdaterControl = /** @class */ (function (_super) {
         if (!cell || (cell.status !== 'ok' && cell.status !== 'error'))
             return null;
         var transform = cell.transform;
-        return _jsx(UpdateTransformControl, { state: state, transform: transform, initiallyCollapsed: this.props.initiallyCollapsed, customHeader: this.props.header }, void 0);
+        return _jsx(UpdateTransformControl, { state: state, transform: transform, initiallyCollapsed: this.props.initiallyCollapsed, customHeader: this.props.header });
     };
     return TransformUpdaterControl;
 }(PluginUIComponent));