molstar 3.3.1 → 3.6.0

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)

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

@@ -21,19 +21,19 @@ var common_1 = require("../controls/common");
 var icons_1 = require("../controls/icons");
 var parameters_1 = require("../controls/parameters");
 var StateSnapshots = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(StateSnapshots, _super);
+    tslib_1.__extends(StateSnapshots, _super);
     function StateSnapshots() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
     StateSnapshots.prototype.render = function () {
         var _a;
-        return (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(common_1.SectionHeader, { icon: icons_1.SaveOutlinedSvg, title: 'Plugin State' }, void 0), (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ style: { marginBottom: '10px' } }, { children: (0, jsx_runtime_1.jsx)(common_1.ExpandGroup, (0, tslib_1.__assign)({ header: 'Save Options', initiallyExpanded: false }, { children: (0, jsx_runtime_1.jsx)(LocalStateSnapshotParams, {}, void 0) }), void 0) }), void 0), (0, jsx_runtime_1.jsx)(LocalStateSnapshots, {}, void 0), (0, jsx_runtime_1.jsx)(LocalStateSnapshotList, {}, void 0), (0, jsx_runtime_1.jsx)(common_1.SectionHeader, { title: 'Save as File', accent: 'blue' }, void 0), (0, jsx_runtime_1.jsx)(StateExportImportControls, {}, void 0), ((_a = this.plugin.spec.components) === null || _a === void 0 ? void 0 : _a.remoteState) !== 'none' && (0, jsx_runtime_1.jsx)(RemoteStateSnapshots, {}, void 0)] }, void 0);
+        return (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(common_1.SectionHeader, { icon: icons_1.SaveOutlinedSvg, title: 'Plugin State' }), (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ style: { marginBottom: '10px' } }, { children: (0, jsx_runtime_1.jsx)(common_1.ExpandGroup, tslib_1.__assign({ header: 'Save Options', initiallyExpanded: false }, { children: (0, jsx_runtime_1.jsx)(LocalStateSnapshotParams, {}) })) })), (0, jsx_runtime_1.jsx)(LocalStateSnapshots, {}), (0, jsx_runtime_1.jsx)(LocalStateSnapshotList, {}), (0, jsx_runtime_1.jsx)(common_1.SectionHeader, { title: 'Save as File', accent: 'blue' }), (0, jsx_runtime_1.jsx)(StateExportImportControls, {}), ((_a = this.plugin.spec.components) === null || _a === void 0 ? void 0 : _a.remoteState) !== 'none' && (0, jsx_runtime_1.jsx)(RemoteStateSnapshots, {})] });
     };
     return StateSnapshots;
 }(base_1.PluginUIComponent));
 exports.StateSnapshots = StateSnapshots;
 var StateExportImportControls = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(StateExportImportControls, _super);
+    tslib_1.__extends(StateExportImportControls, _super);
     function StateExportImportControls() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.downloadToFileJson = function () {
@@ -58,13 +58,13 @@ var StateExportImportControls = /** @class */ (function (_super) {
         return _this;
     }
     StateExportImportControls.prototype.render = function () {
-        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(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: icons_1.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), (0, jsx_runtime_1.jsx)(common_1.Button, (0, tslib_1.__assign)({ icon: icons_1.GetAppSvg, onClick: this.downloadToFileZip, title: 'Save the state including the input data.' }, { children: "Session" }), void 0), (0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: 'msp-btn msp-btn-block msp-btn-action msp-loader-msp-btn-file' }, { children: [(0, jsx_runtime_1.jsx)(icons_1.Icon, { svg: icons_1.OpenInBrowserSvg, inline: true }, void 0), " Open ", (0, jsx_runtime_1.jsx)("input", { onChange: this.open, type: 'file', multiple: false, accept: '.molx,.molj' }, void 0)] }), void 0)] }), void 0), (0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: 'msp-help-text', style: { padding: '10px' } }, { children: [(0, jsx_runtime_1.jsx)(icons_1.Icon, { svg: icons_1.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 (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(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: icons_1.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" })), (0, jsx_runtime_1.jsx)(common_1.Button, tslib_1.__assign({ icon: icons_1.GetAppSvg, onClick: this.downloadToFileZip, title: 'Save the state including the input data.' }, { children: "Session" })), (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: 'msp-btn msp-btn-block msp-btn-action msp-loader-msp-btn-file' }, { children: [(0, jsx_runtime_1.jsx)(icons_1.Icon, { svg: icons_1.OpenInBrowserSvg, inline: true }), " Open ", (0, jsx_runtime_1.jsx)("input", { onChange: this.open, type: 'file', multiple: false, accept: '.molx,.molj' })] }))] })), (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: 'msp-help-text', style: { padding: '10px' } }, { children: [(0, jsx_runtime_1.jsx)(icons_1.Icon, { svg: icons_1.WarningSvg }), " This is an experimental feature and stored states/sessions might not be openable in a future version."] }))] });
     };
     return StateExportImportControls;
 }(base_1.PluginUIComponent));
 exports.StateExportImportControls = StateExportImportControls;
 var LocalStateSnapshotParams = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(LocalStateSnapshotParams, _super);
+    tslib_1.__extends(LocalStateSnapshotParams, _super);
     function LocalStateSnapshotParams() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
@@ -73,13 +73,13 @@ var LocalStateSnapshotParams = /** @class */ (function (_super) {
         this.subscribe(this.plugin.state.snapshotParams, function () { return _this.forceUpdate(); });
     };
     LocalStateSnapshotParams.prototype.render = function () {
-        return (0, jsx_runtime_1.jsx)(parameters_1.ParameterControls, { params: state_1.PluginState.SnapshotParams, values: this.plugin.state.snapshotParams.value, onChangeValues: this.plugin.state.setSnapshotParams }, void 0);
+        return (0, jsx_runtime_1.jsx)(parameters_1.ParameterControls, { params: state_1.PluginState.SnapshotParams, values: this.plugin.state.snapshotParams.value, onChangeValues: this.plugin.state.setSnapshotParams });
     };
     return LocalStateSnapshotParams;
 }(base_1.PluginUIComponent));
 exports.LocalStateSnapshotParams = LocalStateSnapshotParams;
 var LocalStateSnapshots = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(LocalStateSnapshots, _super);
+    tslib_1.__extends(LocalStateSnapshots, _super);
     function LocalStateSnapshots() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.state = { params: param_definition_1.ParamDefinition.getDefaultValues(LocalStateSnapshots.Params) };
@@ -99,7 +99,7 @@ var LocalStateSnapshots = /** @class */ (function (_super) {
         return !(0, mol_util_1.shallowEqualObjects)(this.props, nextProps) || !(0, mol_util_1.shallowEqualObjects)(this.state, nextState);
     };
     LocalStateSnapshots.prototype.render = function () {
-        return (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(parameters_1.ParameterControls, { params: LocalStateSnapshots.Params, values: this.state.params, onEnter: this.add, onChangeValues: this.updateParams }, void 0), (0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: 'msp-flex-row' }, { children: [(0, jsx_runtime_1.jsx)(common_1.IconButton, { onClick: this.clear, svg: icons_1.DeleteOutlinedSvg, title: 'Remove All' }, void 0), (0, jsx_runtime_1.jsx)(common_1.Button, (0, tslib_1.__assign)({ onClick: this.add, icon: icons_1.AddSvg, style: { textAlign: 'right' }, commit: true }, { children: "Add" }), void 0)] }), void 0)] }, void 0);
+        return (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(parameters_1.ParameterControls, { params: LocalStateSnapshots.Params, values: this.state.params, onEnter: this.add, onChangeValues: this.updateParams }), (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: 'msp-flex-row' }, { children: [(0, jsx_runtime_1.jsx)(common_1.IconButton, { onClick: this.clear, svg: icons_1.DeleteOutlinedSvg, title: 'Remove All' }), (0, jsx_runtime_1.jsx)(common_1.Button, tslib_1.__assign({ onClick: this.add, icon: icons_1.AddSvg, style: { textAlign: 'right' }, commit: true }, { children: "Add" }))] }))] });
     };
     LocalStateSnapshots.Params = {
         name: param_definition_1.ParamDefinition.Text(),
@@ -109,7 +109,7 @@ var LocalStateSnapshots = /** @class */ (function (_super) {
 }(base_1.PluginUIComponent));
 exports.LocalStateSnapshots = LocalStateSnapshots;
 var LocalStateSnapshotList = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(LocalStateSnapshotList, _super);
+    tslib_1.__extends(LocalStateSnapshotList, _super);
     function LocalStateSnapshotList() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.apply = function (e) {
@@ -151,13 +151,13 @@ var LocalStateSnapshotList = /** @class */ (function (_super) {
     LocalStateSnapshotList.prototype.render = function () {
         var _this = this;
         var current = this.plugin.managers.snapshot.state.current;
-        return (0, jsx_runtime_1.jsx)("ul", (0, tslib_1.__assign)({ style: { listStyle: 'none', marginTop: '10px' }, className: 'msp-state-list' }, { children: this.plugin.managers.snapshot.state.entries.map(function (e) { return (0, jsx_runtime_1.jsxs)("li", (0, tslib_1.__assign)({ className: 'msp-flex-row' }, { children: [(0, jsx_runtime_1.jsxs)(common_1.Button, (0, tslib_1.__assign)({ "data-id": e.snapshot.id, onClick: _this.apply, className: 'msp-no-overflow' }, { children: [(0, jsx_runtime_1.jsx)("span", (0, tslib_1.__assign)({ style: { fontWeight: e.snapshot.id === current ? 'bold' : void 0 } }, { children: e.name || new Date(e.timestamp).toLocaleString() }), void 0), " ", (0, jsx_runtime_1.jsx)("small", { children: "".concat(e.snapshot.durationInMs ? (0, now_1.formatTimespan)(e.snapshot.durationInMs, false) + "".concat(e.description ? ', ' : '') : '').concat(e.description ? e.description : '') }, void 0)] }), void 0), (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.ArrowUpwardSvg, "data-id": e.snapshot.id, title: 'Move Up', onClick: _this.moveUp, flex: '20px' }, void 0), (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.ArrowDownwardSvg, "data-id": e.snapshot.id, title: 'Move Down', onClick: _this.moveDown, flex: '20px' }, void 0), (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.SwapHorizSvg, "data-id": e.snapshot.id, title: 'Replace', onClick: _this.replace, flex: '20px' }, void 0), (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.DeleteOutlinedSvg, "data-id": e.snapshot.id, title: 'Remove', onClick: _this.remove, flex: '20px' }, void 0)] }), e.snapshot.id); }) }), void 0);
+        return (0, jsx_runtime_1.jsx)("ul", tslib_1.__assign({ style: { listStyle: 'none', marginTop: '10px' }, className: 'msp-state-list' }, { children: this.plugin.managers.snapshot.state.entries.map(function (e) { return (0, jsx_runtime_1.jsxs)("li", tslib_1.__assign({ className: 'msp-flex-row' }, { children: [(0, jsx_runtime_1.jsxs)(common_1.Button, tslib_1.__assign({ "data-id": e.snapshot.id, onClick: _this.apply, className: 'msp-no-overflow' }, { children: [(0, jsx_runtime_1.jsx)("span", tslib_1.__assign({ style: { fontWeight: e.snapshot.id === current ? 'bold' : void 0 } }, { children: e.name || new Date(e.timestamp).toLocaleString() })), " ", (0, jsx_runtime_1.jsx)("small", { children: "".concat(e.snapshot.durationInMs ? (0, now_1.formatTimespan)(e.snapshot.durationInMs, false) + "".concat(e.description ? ', ' : '') : '').concat(e.description ? e.description : '') })] })), (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.ArrowUpwardSvg, "data-id": e.snapshot.id, title: 'Move Up', onClick: _this.moveUp, flex: '20px' }), (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.ArrowDownwardSvg, "data-id": e.snapshot.id, title: 'Move Down', onClick: _this.moveDown, flex: '20px' }), (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.SwapHorizSvg, "data-id": e.snapshot.id, title: 'Replace', onClick: _this.replace, flex: '20px' }), (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.DeleteOutlinedSvg, "data-id": e.snapshot.id, title: 'Remove', onClick: _this.remove, flex: '20px' })] }), e.snapshot.id); }) }));
     };
     return LocalStateSnapshotList;
 }(base_1.PluginUIComponent));
 exports.LocalStateSnapshotList = LocalStateSnapshotList;
 var RemoteStateSnapshots = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(RemoteStateSnapshots, _super);
+    tslib_1.__extends(RemoteStateSnapshots, _super);
     function RemoteStateSnapshots() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.Params = {
@@ -175,9 +175,9 @@ var RemoteStateSnapshots = /** @class */ (function (_super) {
             }, { isFlat: true })
         };
         _this._mounted = false;
-        _this.refresh = function () { return (0, tslib_1.__awaiter)(_this, void 0, void 0, function () {
+        _this.refresh = function () { return tslib_1.__awaiter(_this, void 0, void 0, function () {
             var json, entries, _i, json_1, e, e_1;
-            return (0, tslib_1.__generator)(this, function (_a) {
+            return tslib_1.__generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
                         _a.trys.push([0, 2, , 3]);
@@ -194,7 +194,7 @@ var RemoteStateSnapshots = /** @class */ (function (_super) {
                         entries = (0, immutable_1.OrderedMap)().asMutable();
                         for (_i = 0, json_1 = json; _i < json_1.length; _i++) {
                             e = json_1[_i];
-                            entries.set(e.id, (0, tslib_1.__assign)((0, tslib_1.__assign)({}, e), { url: this.serverUrl("get/".concat(e.id)), removeUrl: this.serverUrl("remove/".concat(e.id)) }));
+                            entries.set(e.id, tslib_1.__assign(tslib_1.__assign({}, e), { url: this.serverUrl("get/".concat(e.id)), removeUrl: this.serverUrl("remove/".concat(e.id)) }));
                         }
                         if (this._mounted)
                             this.setState({ entries: entries.asImmutable(), isBusy: false });
@@ -210,8 +210,8 @@ var RemoteStateSnapshots = /** @class */ (function (_super) {
                 }
             });
         }); };
-        _this.upload = function () { return (0, tslib_1.__awaiter)(_this, void 0, void 0, function () {
-            return (0, tslib_1.__generator)(this, function (_a) {
+        _this.upload = function () { return tslib_1.__awaiter(_this, void 0, void 0, function () {
+            return tslib_1.__generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
                         this.setState({ isBusy: true });
@@ -233,9 +233,9 @@ var RemoteStateSnapshots = /** @class */ (function (_super) {
                 }
             });
         }); };
-        _this.fetch = function (e) { return (0, tslib_1.__awaiter)(_this, void 0, void 0, function () {
+        _this.fetch = function (e) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
             var id, entry;
-            return (0, tslib_1.__generator)(this, function (_a) {
+            return tslib_1.__generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
                         id = e.currentTarget.getAttribute('data-id');
@@ -260,9 +260,9 @@ var RemoteStateSnapshots = /** @class */ (function (_super) {
                 }
             });
         }); };
-        _this.remove = function (e) { return (0, tslib_1.__awaiter)(_this, void 0, void 0, function () {
+        _this.remove = function (e) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
             var id, entry, e_2;
-            return (0, tslib_1.__generator)(this, function (_a) {
+            return tslib_1.__generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
                         id = e.currentTarget.getAttribute('data-id');
@@ -305,24 +305,24 @@ var RemoteStateSnapshots = /** @class */ (function (_super) {
     };
     RemoteStateSnapshots.prototype.render = function () {
         var _this = this;
-        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(common_1.SectionHeader, { title: 'Remote States', accent: 'blue' }, void 0), !this.props.listOnly && (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(parameters_1.ParameterControls, { params: this.Params, values: this.state.params, onEnter: this.upload, onChange: function (p) {
+        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(common_1.SectionHeader, { title: 'Remote States', accent: 'blue' }), !this.props.listOnly && (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(parameters_1.ParameterControls, { params: this.Params, values: this.state.params, onEnter: this.upload, onChange: function (p) {
                                 var _a;
-                                _this.setState({ params: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, _this.state.params), (_a = {}, _a[p.name] = p.value, _a)) });
-                            }, isDisabled: this.state.isBusy }, void 0), (0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: 'msp-flex-row' }, { children: [(0, jsx_runtime_1.jsx)(common_1.IconButton, { onClick: this.refresh, disabled: this.state.isBusy, svg: icons_1.RefreshSvg }, void 0), (0, jsx_runtime_1.jsx)(common_1.Button, (0, tslib_1.__assign)({ icon: icons_1.CloudUploadSvg, onClick: this.upload, disabled: this.state.isBusy, commit: true }, { children: "Upload" }), void 0)] }), void 0)] }, void 0), (0, jsx_runtime_1.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 && (0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ style: { marginTop: '10px' } }, { children: [(0, jsx_runtime_1.jsx)(parameters_1.ParameterControls, { params: this.ListOnlyParams, values: this.state.params, onEnter: this.upload, onChange: function (p) {
+                                _this.setState({ params: tslib_1.__assign(tslib_1.__assign({}, _this.state.params), (_a = {}, _a[p.name] = p.value, _a)) });
+                            }, isDisabled: this.state.isBusy }), (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: 'msp-flex-row' }, { children: [(0, jsx_runtime_1.jsx)(common_1.IconButton, { onClick: this.refresh, disabled: this.state.isBusy, svg: icons_1.RefreshSvg }), (0, jsx_runtime_1.jsx)(common_1.Button, tslib_1.__assign({ icon: icons_1.CloudUploadSvg, onClick: this.upload, disabled: this.state.isBusy, commit: true }, { children: "Upload" }))] }))] }), (0, jsx_runtime_1.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 && (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ style: { marginTop: '10px' } }, { children: [(0, jsx_runtime_1.jsx)(parameters_1.ParameterControls, { params: this.ListOnlyParams, values: this.state.params, onEnter: this.upload, onChange: function (p) {
                                 var _a;
-                                _this.setState({ params: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, _this.state.params), (_a = {}, _a[p.name] = p.value, _a)) });
-                            }, isDisabled: this.state.isBusy }, 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)({ onClick: this.refresh, disabled: this.state.isBusy, icon: icons_1.RefreshSvg }, { children: "Refresh" }), void 0) }), void 0)] }), void 0)] }, void 0);
+                                _this.setState({ params: tslib_1.__assign(tslib_1.__assign({}, _this.state.params), (_a = {}, _a[p.name] = p.value, _a)) });
+                            }, isDisabled: this.state.isBusy }), (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({ onClick: this.refresh, disabled: this.state.isBusy, icon: icons_1.RefreshSvg }, { children: "Refresh" })) }))] }))] });
     };
     return RemoteStateSnapshots;
 }(base_1.PluginUIComponent));
 exports.RemoteStateSnapshots = RemoteStateSnapshots;
 var RemoteStateSnapshotList = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(RemoteStateSnapshotList, _super);
+    tslib_1.__extends(RemoteStateSnapshotList, _super);
     function RemoteStateSnapshotList() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.open = function (e) { return (0, tslib_1.__awaiter)(_this, void 0, void 0, function () {
+        _this.open = function (e) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
             var id, entry, url, qi;
-            return (0, tslib_1.__generator)(this, function (_a) {
+            return tslib_1.__generator(this, function (_a) {
                 id = e.currentTarget.getAttribute('data-id');
                 if (!id)
                     return [2 /*return*/];
@@ -342,7 +342,7 @@ var RemoteStateSnapshotList = /** @class */ (function (_super) {
     }
     RemoteStateSnapshotList.prototype.render = function () {
         var _this = this;
-        return (0, jsx_runtime_1.jsx)("ul", (0, tslib_1.__assign)({ style: { listStyle: 'none', marginTop: '10px' }, className: 'msp-state-list' }, { children: this.props.entries.valueSeq().map(function (e) { return (0, jsx_runtime_1.jsxs)("li", (0, tslib_1.__assign)({ className: 'msp-flex-row' }, { children: [(0, jsx_runtime_1.jsxs)(common_1.Button, (0, tslib_1.__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(), " ", (0, jsx_runtime_1.jsx)("small", { children: e.description }, void 0)] }), void 0), !e.isSticky && _this.props.remove && (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.DeleteOutlinedSvg, "data-id": e.id, title: 'Remove', onClick: _this.props.remove, disabled: _this.props.isBusy, small: true }, void 0)] }), e.id); }) }), void 0);
+        return (0, jsx_runtime_1.jsx)("ul", tslib_1.__assign({ style: { listStyle: 'none', marginTop: '10px' }, className: 'msp-state-list' }, { children: this.props.entries.valueSeq().map(function (e) { return (0, jsx_runtime_1.jsxs)("li", tslib_1.__assign({ className: 'msp-flex-row' }, { children: [(0, jsx_runtime_1.jsxs)(common_1.Button, tslib_1.__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(), " ", (0, jsx_runtime_1.jsx)("small", { children: e.description })] })), !e.isSticky && _this.props.remove && (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.DeleteOutlinedSvg, "data-id": e.id, title: 'Remove', onClick: _this.props.remove, disabled: _this.props.isBusy, small: true })] }), e.id); }) }));
     };
     return RemoteStateSnapshotList;
 }(base_1.PurePluginUIComponent));

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

@@ -14,7 +14,7 @@ var icons_1 = require("../controls/icons");
 var apply_action_1 = require("./apply-action");
 var update_transform_1 = require("./update-transform");
 var StateTree = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(StateTree, _super);
+    tslib_1.__extends(StateTree, _super);
     function StateTree() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.state = { showActions: true };
@@ -42,15 +42,15 @@ var StateTree = /** @class */ (function (_super) {
     StateTree.prototype.render = function () {
         var ref = this.props.state.tree.root.ref;
         if (this.state.showActions) {
-            return (0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ style: { margin: '10px', cursor: 'default' } }, { children: [(0, jsx_runtime_1.jsx)("p", { children: "Nothing to see here yet." }, void 0), (0, jsx_runtime_1.jsxs)("p", { children: ["Structures and Volumes can be loaded from the ", (0, jsx_runtime_1.jsx)(icons_1.Icon, { svg: icons_1.HomeOutlinedSvg }, void 0), " tab."] }, void 0)] }), void 0);
+            return (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ style: { margin: '10px', cursor: 'default' } }, { children: [(0, jsx_runtime_1.jsx)("p", { children: "Nothing to see here yet." }), (0, jsx_runtime_1.jsxs)("p", { children: ["Structures and Volumes can be loaded from the ", (0, jsx_runtime_1.jsx)(icons_1.Icon, { svg: icons_1.HomeOutlinedSvg }), " tab."] })] }));
         }
-        return (0, jsx_runtime_1.jsx)(StateTreeNode, { cell: this.props.state.cells.get(ref), depth: 0 }, void 0);
+        return (0, jsx_runtime_1.jsx)(StateTreeNode, { cell: this.props.state.cells.get(ref), depth: 0 });
     };
     return StateTree;
 }(base_1.PluginUIComponent));
 exports.StateTree = StateTree;
 var StateTreeNode = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(StateTreeNode, _super);
+    tslib_1.__extends(StateTreeNode, _super);
     function StateTreeNode() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.state = {
@@ -122,17 +122,17 @@ var StateTreeNode = /** @class */ (function (_super) {
         if (!this.state.showLabel) {
             if (children.size === 0)
                 return null;
-            return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children.map(function (c) { return (0, jsx_runtime_1.jsx)(StateTreeNode, { cell: cell.parent.cells.get(c), depth: _this.props.depth }, c); }) }, void 0);
+            return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children.map(function (c) { return (0, jsx_runtime_1.jsx)(StateTreeNode, { cell: cell.parent.cells.get(c), depth: _this.props.depth }, c); }) });
         }
         var newDepth = this.props.depth + 1;
-        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(StateTreeNodeLabel, { cell: cell, depth: this.props.depth }, void 0), children.size === 0
+        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(StateTreeNodeLabel, { cell: cell, depth: this.props.depth }), children.size === 0
                     ? void 0
-                    : (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ style: { display: this.state.isCollapsed ? 'none' : 'block' } }, { children: children.map(function (c) { return (0, jsx_runtime_1.jsx)(StateTreeNode, { cell: cell.parent.cells.get(c), depth: newDepth }, c); }) }), void 0)] }, void 0);
+                    : (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ style: { display: this.state.isCollapsed ? 'none' : 'block' } }, { children: children.map(function (c) { return (0, jsx_runtime_1.jsx)(StateTreeNode, { cell: cell.parent.cells.get(c), depth: newDepth }, c); }) }))] });
     };
     return StateTreeNode;
 }(base_1.PluginUIComponent));
 var StateTreeNodeLabel = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(StateTreeNodeLabel, _super);
+    tslib_1.__extends(StateTreeNodeLabel, _super);
     function StateTreeNodeLabel() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.state = {
@@ -231,11 +231,11 @@ var StateTreeNodeLabel = /** @class */ (function (_super) {
         get: function () {
             var _this = this;
             var cell = this.props.cell;
-            var actions = (0, tslib_1.__spreadArray)([], cell.parent.actions.fromCell(cell, this.plugin), true);
+            var actions = tslib_1.__spreadArray([], cell.parent.actions.fromCell(cell, this.plugin), true);
             if (actions.length === 0)
                 return;
             actions.sort(function (a, b) { return a.definition.display.name < b.definition.display.name ? -1 : a.definition.display.name === b.definition.display.name ? 0 : 1; });
-            return (0, tslib_1.__spreadArray)([
+            return tslib_1.__spreadArray([
                 action_menu_1.ActionMenu.Header('Apply Action')
             ], actions.map(function (a) { return action_menu_1.ActionMenu.Item(a.definition.display.name, function () { return _this.setState({ action: 'apply', currentAction: a }); }); }), true);
         },
@@ -250,7 +250,7 @@ var StateTreeNodeLabel = /** @class */ (function (_super) {
             var d = decoratorChain[i];
             decorators.push((0, jsx_runtime_1.jsx)(update_transform_1.UpdateTransformControl, { state: cell.parent, transform: d.transform, noMargin: true, wrapInExpander: true, expanderHeaderLeftMargin: margin }, "".concat(d.transform.transformer.id, "-").concat(i)));
         }
-        return (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'msp-tree-updates-wrapper' }, { children: decorators }), void 0);
+        return (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'msp-tree-updates-wrapper' }, { children: decorators }));
     };
     StateTreeNodeLabel.prototype.render = function () {
         var cell = this.props.cell;
@@ -262,31 +262,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 = (0, jsx_runtime_1.jsxs)(common_1.Button, (0, tslib_1.__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' && (0, jsx_runtime_1.jsxs)("b", { children: ["[", cell.status, "]"] }, void 0), " ", (0, jsx_runtime_1.jsx)("span", { children: name_1 }, void 0)] }), void 0);
+            label = (0, jsx_runtime_1.jsxs)(common_1.Button, tslib_1.__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' && (0, jsx_runtime_1.jsxs)("b", { children: ["[", cell.status, "]"] }), " ", (0, jsx_runtime_1.jsx)("span", { children: name_1 })] }));
         }
         else {
             var obj = cell.obj;
             var title = "".concat(obj.label, " ").concat(obj.description ? obj.description : '');
-            label = (0, jsx_runtime_1.jsxs)(common_1.Button, (0, tslib_1.__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: [(0, jsx_runtime_1.jsx)("span", { children: obj.label }, void 0), " ", obj.description ? (0, jsx_runtime_1.jsx)("small", { children: obj.description }, void 0) : void 0] }), void 0);
+            label = (0, jsx_runtime_1.jsxs)(common_1.Button, tslib_1.__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: [(0, jsx_runtime_1.jsx)("span", { children: obj.label }), " ", obj.description ? (0, jsx_runtime_1.jsx)("small", { children: obj.description }) : void 0] }));
         }
         var children = cell.parent.tree.children.get(this.ref);
         var cellState = cell.state;
-        var expand = (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: cellState.isCollapsed ? icons_1.ArrowRightSvg : icons_1.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 ? (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.DeleteOutlinedSvg, onClick: this.remove, disabled: disabled, small: true, toggleState: false }, void 0) : void 0;
-        var visibility = (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: cellState.isHidden ? icons_1.VisibilityOffOutlinedSvg : icons_1.VisibilityOutlinedSvg, toggleState: false, disabled: disabled, small: true, onClick: this.toggleVisible }, void 0);
+        var expand = (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: cellState.isCollapsed ? icons_1.ArrowRightSvg : icons_1.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 ? (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.DeleteOutlinedSvg, onClick: this.remove, disabled: disabled, small: true, toggleState: false }) : void 0;
+        var visibility = (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: cellState.isHidden ? icons_1.VisibilityOffOutlinedSvg : icons_1.VisibilityOutlinedSvg, toggleState: false, disabled: disabled, small: true, onClick: this.toggleVisible });
         var marginStyle = {
             marginLeft: "".concat(this.props.depth * 8, "px")
         };
-        var row = (0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__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 = (0, jsx_runtime_1.jsxs)("div", tslib_1.__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 (0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ style: { marginBottom: '1px' } }, { children: [row, (0, jsx_runtime_1.jsx)(common_1.ControlGroup, (0, tslib_1.__assign)({ header: "Apply ".concat(this.state.currentAction.definition.display.name), initialExpanded: true, hideExpander: true, hideOffset: false, onHeaderClick: this.hideApply, topRightIcon: icons_1.CloseSvg, headerLeftMargin: "".concat(this.props.depth * 8 + 21, "px") }, { children: (0, jsx_runtime_1.jsx)(apply_action_1.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 (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ style: { marginBottom: '1px' } }, { children: [row, (0, jsx_runtime_1.jsx)(common_1.ControlGroup, tslib_1.__assign({ header: "Apply ".concat(this.state.currentAction.definition.display.name), initialExpanded: true, hideExpander: true, hideOffset: false, onHeaderClick: this.hideApply, topRightIcon: icons_1.CloseSvg, headerLeftMargin: "".concat(this.props.depth * 8 + 21, "px") }, { children: (0, jsx_runtime_1.jsx)(apply_action_1.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 (0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ style: { marginBottom: '1px' } }, { children: [row, updates, actions && (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ style: { marginLeft: "".concat(this.props.depth * 8 + 21, "px"), marginTop: '-1px' } }, { children: (0, jsx_runtime_1.jsx)(action_menu_1.ActionMenu, { items: actions, onSelect: this.selectAction }, void 0) }), void 0)] }), void 0);
+            return (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ style: { marginBottom: '1px' } }, { children: [row, updates, actions && (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ style: { marginLeft: "".concat(this.props.depth * 8 + 21, "px"), marginTop: '-1px' } }, { children: (0, jsx_runtime_1.jsx)(action_menu_1.ActionMenu, { items: actions, onSelect: this.selectAction }) }))] }));
         }
         return row;
     };

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

@@ -7,7 +7,7 @@ var memoize_1 = require("../../mol-util/memoize");
 var common_1 = require("./common");
 var base_1 = require("../base");
 var UpdateTransformControl = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(UpdateTransformControl, _super);
+    tslib_1.__extends(UpdateTransformControl, _super);
     function UpdateTransformControl() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this._getInfo = (0, memoize_1.memoizeLatest)(function (t) { return common_1.StateTransformParameters.infoFromTransform(_this.plugin, _this.props.state, t); });
@@ -87,7 +87,7 @@ var UpdateTransformControl = /** @class */ (function (_super) {
 }(common_1.TransformControlBase));
 exports.UpdateTransformControl = UpdateTransformControl;
 var TransformUpdaterControl = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(TransformUpdaterControl, _super);
+    tslib_1.__extends(TransformUpdaterControl, _super);
     function TransformUpdaterControl() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
@@ -107,7 +107,7 @@ var TransformUpdaterControl = /** @class */ (function (_super) {
         if (!cell || (cell.status !== 'ok' && cell.status !== 'error'))
             return null;
         var transform = cell.transform;
-        return (0, jsx_runtime_1.jsx)(UpdateTransformControl, { state: state, transform: transform, initiallyCollapsed: this.props.initiallyCollapsed, customHeader: this.props.header }, void 0);
+        return (0, jsx_runtime_1.jsx)(UpdateTransformControl, { state: state, transform: transform, initiallyCollapsed: this.props.initiallyCollapsed, customHeader: this.props.header });
     };
     return TransformUpdaterControl;
 }(base_1.PluginUIComponent));