molstar 3.3.1 → 3.4.0

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

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

@@ -17,7 +17,7 @@ var parameters_1 = require("../controls/parameters");
 var update_transform_1 = require("../state/update-transform");
 var generic_1 = require("./generic");
 var StructureComponentControls = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(StructureComponentControls, _super);
+    tslib_1.__extends(StructureComponentControls, _super);
     function StructureComponentControls() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
@@ -36,13 +36,13 @@ var StructureComponentControls = /** @class */ (function (_super) {
         }); });
     };
     StructureComponentControls.prototype.renderControls = function () {
-        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ComponentEditorControls, {}, void 0), (0, jsx_runtime_1.jsx)(ComponentListControls, {}, void 0), (0, jsx_runtime_1.jsx)(generic_1.GenericEntryListControls, {}, void 0)] }, void 0);
+        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ComponentEditorControls, {}), (0, jsx_runtime_1.jsx)(ComponentListControls, {}), (0, jsx_runtime_1.jsx)(generic_1.GenericEntryListControls, {})] });
     };
     return StructureComponentControls;
 }(base_1.CollapsableControls));
 exports.StructureComponentControls = StructureComponentControls;
 var ComponentEditorControls = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(ComponentEditorControls, _super);
+    tslib_1.__extends(ComponentEditorControls, _super);
     function ComponentEditorControls() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.state = {
@@ -99,7 +99,7 @@ var ComponentEditorControls = /** @class */ (function (_super) {
     };
     Object.defineProperty(ComponentEditorControls.prototype, "presetControls", {
         get: function () {
-            return (0, jsx_runtime_1.jsx)(action_menu_1.ActionMenu, { items: this.presetActions, onSelect: this.applyPreset }, void 0);
+            return (0, jsx_runtime_1.jsx)(action_menu_1.ActionMenu, { items: this.presetActions, onSelect: this.applyPreset });
         },
         enumerable: false,
         configurable: true
@@ -117,12 +117,12 @@ var ComponentEditorControls = /** @class */ (function (_super) {
         var undoTitle = this.state.canUndo
             ? "Undo ".concat(this.plugin.state.data.latestUndoLabel)
             : 'Some mistakes of the past can be undone.';
-        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.ToggleButton, { icon: icons_1.BookmarksOutlinedSvg, label: 'Preset', title: 'Apply a representation preset for the current structure(s).', toggle: this.togglePreset, isSelected: this.state.action === 'preset', disabled: this.isDisabled }, void 0), (0, jsx_runtime_1.jsx)(common_1.ToggleButton, { icon: icons_1.AddSvg, label: 'Add', title: 'Add a new representation component for a selection.', toggle: this.toggleAdd, isSelected: this.state.action === 'add', disabled: this.isDisabled }, void 0), (0, jsx_runtime_1.jsx)(common_1.ToggleButton, { icon: icons_1.TuneSvg, label: '', title: 'Options that are applied to all applicable representations.', style: { flex: '0 0 40px', padding: 0 }, toggle: this.toggleOptions, isSelected: this.state.action === 'options', disabled: this.isDisabled }, void 0), (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.RestoreSvg, className: 'msp-flex-item', flex: '40px', onClick: this.undo, disabled: !this.state.canUndo || this.isDisabled, title: undoTitle }, void 0)] }), void 0), this.state.action === 'preset' && this.presetControls, this.state.action === 'add' && (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'msp-control-offset' }, { children: (0, jsx_runtime_1.jsx)(AddComponentControls, { onApply: this.hideAction }, void 0) }), void 0), this.state.action === 'options' && (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'msp-control-offset' }, { children: (0, jsx_runtime_1.jsx)(ComponentOptionsControls, { isDisabled: this.isDisabled }, void 0) }), 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.ToggleButton, { icon: icons_1.BookmarksOutlinedSvg, label: 'Preset', title: 'Apply a representation preset for the current structure(s).', toggle: this.togglePreset, isSelected: this.state.action === 'preset', disabled: this.isDisabled }), (0, jsx_runtime_1.jsx)(common_1.ToggleButton, { icon: icons_1.AddSvg, label: 'Add', title: 'Add a new representation component for a selection.', toggle: this.toggleAdd, isSelected: this.state.action === 'add', disabled: this.isDisabled }), (0, jsx_runtime_1.jsx)(common_1.ToggleButton, { icon: icons_1.TuneSvg, label: '', title: 'Options that are applied to all applicable representations.', style: { flex: '0 0 40px', padding: 0 }, toggle: this.toggleOptions, isSelected: this.state.action === 'options', disabled: this.isDisabled }), (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.RestoreSvg, className: 'msp-flex-item', flex: '40px', onClick: this.undo, disabled: !this.state.canUndo || this.isDisabled, title: undoTitle })] })), this.state.action === 'preset' && this.presetControls, this.state.action === 'add' && (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'msp-control-offset' }, { children: (0, jsx_runtime_1.jsx)(AddComponentControls, { onApply: this.hideAction }) })), this.state.action === 'options' && (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'msp-control-offset' }, { children: (0, jsx_runtime_1.jsx)(ComponentOptionsControls, { isDisabled: this.isDisabled }) }))] });
     };
     return ComponentEditorControls;
 }(base_1.PurePluginUIComponent));
 var AddComponentControls = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(AddComponentControls, _super);
+    tslib_1.__extends(AddComponentControls, _super);
     function AddComponentControls() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.state = _this.createState();
@@ -153,13 +153,13 @@ var AddComponentControls = /** @class */ (function (_super) {
         configurable: true
     });
     AddComponentControls.prototype.render = function () {
-        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(parameters_1.ParameterControls, { params: this.state.params, values: this.state.values, onChangeValues: this.paramsChanged }, void 0), (0, jsx_runtime_1.jsx)(common_1.Button, (0, tslib_1.__assign)({ icon: icons_1.AddSvg, title: 'Use Selection and optional Representation to create a new Component.', className: 'msp-btn-commit msp-btn-commit-on', onClick: this.apply, style: { marginTop: '1px' } }, { children: "Create Component" }), void 0)] }, void 0);
+        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(parameters_1.ParameterControls, { params: this.state.params, values: this.state.values, onChangeValues: this.paramsChanged }), (0, jsx_runtime_1.jsx)(common_1.Button, tslib_1.__assign({ icon: icons_1.AddSvg, title: 'Use Selection and optional Representation to create a new Component.', className: 'msp-btn-commit msp-btn-commit-on', onClick: this.apply, style: { marginTop: '1px' } }, { children: "Create Component" }))] });
     };
     return AddComponentControls;
 }(base_1.PurePluginUIComponent));
 exports.AddComponentControls = AddComponentControls;
 var ComponentOptionsControls = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(ComponentOptionsControls, _super);
+    tslib_1.__extends(ComponentOptionsControls, _super);
     function ComponentOptionsControls() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.update = function (options) { return _this.plugin.managers.structure.component.setOptions(options); };
@@ -170,12 +170,12 @@ var ComponentOptionsControls = /** @class */ (function (_super) {
         this.subscribe(this.plugin.managers.structure.component.events.optionsUpdated, function () { return _this.forceUpdate(); });
     };
     ComponentOptionsControls.prototype.render = function () {
-        return (0, jsx_runtime_1.jsx)(parameters_1.ParameterControls, { params: component_1.StructureComponentManager.OptionsParams, values: this.plugin.managers.structure.component.state.options, onChangeValues: this.update, isDisabled: this.props.isDisabled }, void 0);
+        return (0, jsx_runtime_1.jsx)(parameters_1.ParameterControls, { params: component_1.StructureComponentManager.OptionsParams, values: this.plugin.managers.structure.component.state.options, onChangeValues: this.update, isDisabled: this.props.isDisabled });
     };
     return ComponentOptionsControls;
 }(base_1.PurePluginUIComponent));
 var ComponentListControls = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(ComponentListControls, _super);
+    tslib_1.__extends(ComponentListControls, _super);
     function ComponentListControls() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
@@ -189,12 +189,12 @@ var ComponentListControls = /** @class */ (function (_super) {
         var componentGroups = this.plugin.managers.structure.hierarchy.currentComponentGroups;
         if (componentGroups.length === 0)
             return null;
-        return (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ style: { marginTop: '6px' } }, { children: componentGroups.map(function (g) { return (0, jsx_runtime_1.jsx)(StructureComponentGroup, { group: g }, g[0].cell.transform.ref); }) }), void 0);
+        return (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ style: { marginTop: '6px' } }, { children: componentGroups.map(function (g) { return (0, jsx_runtime_1.jsx)(StructureComponentGroup, { group: g }, g[0].cell.transform.ref); }) }));
     };
     return ComponentListControls;
 }(base_1.PurePluginUIComponent));
 var StructureComponentGroup = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(StructureComponentGroup, _super);
+    tslib_1.__extends(StructureComponentGroup, _super);
     function StructureComponentGroup() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.state = { action: void 0 };
@@ -281,13 +281,13 @@ var StructureComponentGroup = /** @class */ (function (_super) {
             var _this = this;
             var mng = this.plugin.managers.structure.component;
             var ret = [
-                (0, tslib_1.__spreadArray)([
+                tslib_1.__spreadArray([
                     action_menu_1.ActionMenu.Header('Add Representation')
                 ], component_1.StructureComponentManager.getRepresentationTypes(this.plugin, this.props.group[0])
                     .map(function (t) { return action_menu_1.ActionMenu.Item(t[1], function () { return mng.addRepresentation(_this.props.group, t[0]); }); }), true)
             ];
             if (this.pivot.representations.length > 0) {
-                ret.push((0, tslib_1.__spreadArray)([
+                ret.push(tslib_1.__spreadArray([
                     action_menu_1.ActionMenu.Header('Set Coloring', { isIndependent: true })
                 ], this.colorByActions, true));
             }
@@ -329,12 +329,12 @@ var StructureComponentGroup = /** @class */ (function (_super) {
         var cell = component.cell;
         var label = (_a = cell.obj) === null || _a === void 0 ? void 0 : _a.label;
         var reprLabel = this.reprLabel;
-        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.jsxs)(common_1.Button, (0, tslib_1.__assign)({ noOverflow: true, className: 'msp-control-button-label', title: "".concat(label, ". Click to focus."), onClick: this.focus, onMouseEnter: this.highlight, onMouseLeave: this.clearHighlight, style: { textAlign: 'left' } }, { children: [label, (0, jsx_runtime_1.jsx)("small", (0, tslib_1.__assign)({ className: 'msp-25-lower-contrast-text', style: { float: 'right' } }, { children: reprLabel }), void 0)] }), void 0), (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: cell.state.isHidden ? icons_1.VisibilityOffOutlinedSvg : icons_1.VisibilityOutlinedSvg, toggleState: false, onClick: this.toggleVisible, title: "".concat(cell.state.isHidden ? 'Show' : 'Hide', " component"), small: true, className: 'msp-form-control', flex: true }, void 0), (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.DeleteOutlinedSvg, toggleState: false, onClick: this.remove, title: 'Remove', small: true, className: 'msp-form-control', flex: true }, void 0), (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.MoreHorizSvg, onClick: this.toggleAction, title: 'Actions', toggleState: this.state.action === 'action', className: 'msp-form-control', flex: true }, void 0)] }), void 0), this.state.action === 'label' && (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'msp-control-offset', style: { marginBottom: '6px' } }, { children: (0, jsx_runtime_1.jsx)(common_1.ControlRow, { label: 'Label', control: (0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ style: { display: 'flex', textAlignLast: 'center' } }, { children: [(0, jsx_runtime_1.jsx)(common_1.TextInput, { onChange: this.updateLabel, value: label, style: { flex: '1 1 auto', minWidth: 0 }, className: 'msp-form-control', blurOnEnter: true, blurOnEscape: true }, void 0), (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.CheckSvg, onClick: this.toggleLabel, className: 'msp-form-control msp-control-button-label', flex: true }, void 0)] }), void 0) }, void 0) }), void 0), this.state.action === 'action' && (0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: 'msp-accent-offset' }, { children: [(0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ style: { marginBottom: '6px' } }, { children: (0, jsx_runtime_1.jsx)(action_menu_1.ActionMenu, { items: this.actions, onSelect: this.selectAction, noOffset: true }, void 0) }), void 0), (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ style: { marginBottom: '6px' } }, { children: component.representations.map(function (r) { return (0, jsx_runtime_1.jsx)(StructureRepresentationEntry, { group: _this.props.group, representation: r }, r.cell.transform.ref); }) }), void 0)] }), 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.jsxs)(common_1.Button, tslib_1.__assign({ noOverflow: true, className: 'msp-control-button-label', title: "".concat(label, ". Click to focus."), onClick: this.focus, onMouseEnter: this.highlight, onMouseLeave: this.clearHighlight, style: { textAlign: 'left' } }, { children: [label, (0, jsx_runtime_1.jsx)("small", tslib_1.__assign({ className: 'msp-25-lower-contrast-text', style: { float: 'right' } }, { children: reprLabel }))] })), (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: cell.state.isHidden ? icons_1.VisibilityOffOutlinedSvg : icons_1.VisibilityOutlinedSvg, toggleState: false, onClick: this.toggleVisible, title: "".concat(cell.state.isHidden ? 'Show' : 'Hide', " component"), small: true, className: 'msp-form-control', flex: true }), (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.DeleteOutlinedSvg, toggleState: false, onClick: this.remove, title: 'Remove', small: true, className: 'msp-form-control', flex: true }), (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.MoreHorizSvg, onClick: this.toggleAction, title: 'Actions', toggleState: this.state.action === 'action', className: 'msp-form-control', flex: true })] })), this.state.action === 'label' && (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'msp-control-offset', style: { marginBottom: '6px' } }, { children: (0, jsx_runtime_1.jsx)(common_1.ControlRow, { label: 'Label', control: (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ style: { display: 'flex', textAlignLast: 'center' } }, { children: [(0, jsx_runtime_1.jsx)(common_1.TextInput, { onChange: this.updateLabel, value: label, style: { flex: '1 1 auto', minWidth: 0 }, className: 'msp-form-control', blurOnEnter: true, blurOnEscape: true }), (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.CheckSvg, onClick: this.toggleLabel, className: 'msp-form-control msp-control-button-label', flex: true })] })) }) })), this.state.action === 'action' && (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: 'msp-accent-offset' }, { children: [(0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ style: { marginBottom: '6px' } }, { children: (0, jsx_runtime_1.jsx)(action_menu_1.ActionMenu, { items: this.actions, onSelect: this.selectAction, noOffset: true }) })), (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ style: { marginBottom: '6px' } }, { children: component.representations.map(function (r) { return (0, jsx_runtime_1.jsx)(StructureRepresentationEntry, { group: _this.props.group, representation: r }, r.cell.transform.ref); }) }))] }))] });
     };
     return StructureComponentGroup;
 }(base_1.PurePluginUIComponent));
 var StructureRepresentationEntry = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(StructureRepresentationEntry, _super);
+    tslib_1.__extends(StructureRepresentationEntry, _super);
     function StructureRepresentationEntry() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.remove = function () { return _this.plugin.managers.structure.component.removeRepresentations(_this.props.group, _this.props.representation); };
@@ -356,11 +356,11 @@ var StructureRepresentationEntry = /** @class */ (function (_super) {
     StructureRepresentationEntry.prototype.render = function () {
         var _a;
         var repr = this.props.representation.cell;
-        return (0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: 'msp-representation-entry' }, { children: [repr.parent && (0, jsx_runtime_1.jsx)(common_1.ExpandGroup, (0, tslib_1.__assign)({ header: "".concat(((_a = repr.obj) === null || _a === void 0 ? void 0 : _a.label) || '', " Representation"), noOffset: true }, { children: (0, jsx_runtime_1.jsx)(update_transform_1.UpdateTransformControl, { state: repr.parent, transform: repr.transform, customHeader: 'none', customUpdate: this.update, noMargin: true }, void 0) }), void 0), (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.DeleteOutlinedSvg, onClick: this.remove, title: 'Remove', small: true, className: 'msp-default-bg', toggleState: false, style: {
+        return (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: 'msp-representation-entry' }, { children: [repr.parent && (0, jsx_runtime_1.jsx)(common_1.ExpandGroup, tslib_1.__assign({ header: "".concat(((_a = repr.obj) === null || _a === void 0 ? void 0 : _a.label) || '', " Representation"), noOffset: true }, { children: (0, jsx_runtime_1.jsx)(update_transform_1.UpdateTransformControl, { state: repr.parent, transform: repr.transform, customHeader: 'none', customUpdate: this.update, noMargin: true }) })), (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.DeleteOutlinedSvg, onClick: this.remove, title: 'Remove', small: true, className: 'msp-default-bg', toggleState: false, style: {
                         position: 'absolute', top: 0, right: '32px', lineHeight: '24px', height: '24px', textAlign: 'right', width: '44px', paddingRight: '6px', background: 'none'
-                    } }, void 0), (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: this.props.representation.cell.state.isHidden ? icons_1.VisibilityOffOutlinedSvg : icons_1.VisibilityOutlinedSvg, toggleState: false, onClick: this.toggleVisible, title: 'Toggle Visibility', small: true, className: 'msp-default-bg', style: {
+                    } }), (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: this.props.representation.cell.state.isHidden ? icons_1.VisibilityOffOutlinedSvg : icons_1.VisibilityOutlinedSvg, toggleState: false, onClick: this.toggleVisible, title: 'Toggle Visibility', small: true, className: 'msp-default-bg', style: {
                         position: 'absolute', top: 0, right: 0, lineHeight: '24px', height: '24px', textAlign: 'right', width: '32px', paddingRight: '6px', background: 'none'
-                    } }, void 0)] }), void 0);
+                    } })] }));
     };
     return StructureRepresentationEntry;
 }(base_1.PurePluginUIComponent));

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

@@ -92,7 +92,7 @@ function getFocusEntries(structure) {
     return entries;
 }
 var StructureFocusControls = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(StructureFocusControls, _super);
+    tslib_1.__extends(StructureFocusControls, _super);
     function StructureFocusControls() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.state = { isBusy: false, showAction: false };
@@ -105,7 +105,7 @@ var StructureFocusControls = /** @class */ (function (_super) {
                 if (d) {
                     var entries = getFocusEntries(d);
                     if (entries.length > 0) {
-                        presetItems.push((0, tslib_1.__spreadArray)([
+                        presetItems.push(tslib_1.__spreadArray([
                             action_menu_1.ActionMenu.Header(d.label, { description: d.label })
                         ], action_menu_1.ActionMenu.createItems(entries, {
                             label: function (f) { return f.label; },
@@ -177,7 +177,7 @@ var StructureFocusControls = /** @class */ (function (_super) {
             var historyItems = [];
             var history = this.plugin.managers.structure.focus.history;
             if (history.length > 0) {
-                historyItems.push((0, tslib_1.__spreadArray)([
+                historyItems.push(tslib_1.__spreadArray([
                     action_menu_1.ActionMenu.Header('History', { description: 'Previously focused on items.' })
                 ], action_menu_1.ActionMenu.createItems(history, {
                     label: function (f) { return f.label; },
@@ -225,7 +225,7 @@ var StructureFocusControls = /** @class */ (function (_super) {
                 title += "\nor use '".concat(binding, "' on element");
             }
         }
-        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)({ noOverflow: true, onClick: this.focusCamera, title: title, onMouseEnter: this.highlightCurrent, onMouseLeave: this.clearHighlights, disabled: this.isDisabled || !current, style: { textAlignLast: current ? 'left' : void 0 } }, { children: label }), void 0), current && (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.CancelOutlinedSvg, onClick: this.clear, title: 'Clear', className: 'msp-form-control', flex: true, disabled: this.isDisabled }, void 0), (0, jsx_runtime_1.jsx)(common_1.ToggleButton, { icon: icons_1.CenterFocusStrongSvg, title: 'Select a focus target to center on an show its surroundings. Hold shift to focus on multiple targets.', toggle: this.toggleAction, isSelected: this.state.showAction, disabled: this.isDisabled, style: { flex: '0 0 40px', padding: 0 } }, void 0)] }), void 0), this.state.showAction && (0, jsx_runtime_1.jsx)(action_menu_1.ActionMenu, { items: this.actionItems, onSelect: this.selectAction }, 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({ noOverflow: true, onClick: this.focusCamera, title: title, onMouseEnter: this.highlightCurrent, onMouseLeave: this.clearHighlights, disabled: this.isDisabled || !current, style: { textAlignLast: current ? 'left' : void 0 } }, { children: label })), current && (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.CancelOutlinedSvg, onClick: this.clear, title: 'Clear', className: 'msp-form-control', flex: true, disabled: this.isDisabled }), (0, jsx_runtime_1.jsx)(common_1.ToggleButton, { icon: icons_1.CenterFocusStrongSvg, title: 'Select a focus target to center on an show its surroundings. Hold shift to focus on multiple targets.', toggle: this.toggleAction, isSelected: this.state.showAction, disabled: this.isDisabled, style: { flex: '0 0 40px', padding: 0 } })] })), this.state.showAction && (0, jsx_runtime_1.jsx)(action_menu_1.ActionMenu, { items: this.actionItems, onSelect: this.selectAction })] });
     };
     return StructureFocusControls;
 }(base_1.PluginUIComponent));