molstar 3.2.0 → 3.4.0

package/lib/mol-plugin-ui/skin/colors/blue.scss

@@ -1,24 +1,24 @@
-$default-background:         #2D3E50;
-$font-color:                 #EDF1F2; 
-$hover-font-color:           #3B9AD9;
-$entity-current-font-color:  #FFFFFF;
-$msp-btn-remove-background:      #BF3A31;
-$msp-btn-remove-hover-font-color:#ffffff;
-$msp-btn-commit-on-font-color:   #ffffff; 
-$entity-badge-font-color:    #ccd4e0;
-
-// used in LOG
-$log-message:          #0CCA5D;
-$log-info:             #5E3673;
-$log-warning:          #FCC937;
-$log-error:            #FD354B;
-
-$logo-background: rgba(0,0,0,0.75);
-
-@function color-lower-contrast($color, $amount) {
-    @return darken($color, $amount);
-}
-
-@function color-increase-contrast($color, $amount) {
-    @return lighten($color, $amount);
+$default-background:         #2D3E50;
+$font-color:                 #EDF1F2; 
+$hover-font-color:           #3B9AD9;
+$entity-current-font-color:  #FFFFFF;
+$msp-btn-remove-background:      #BF3A31;
+$msp-btn-remove-hover-font-color:#ffffff;
+$msp-btn-commit-on-font-color:   #ffffff; 
+$entity-badge-font-color:    #ccd4e0;
+
+// used in LOG
+$log-message:          #0CCA5D;
+$log-info:             #5E3673;
+$log-warning:          #FCC937;
+$log-error:            #FD354B;
+
+$logo-background: rgba(0,0,0,0.75);
+
+@function color-lower-contrast($color, $amount) {
+    @return darken($color, $amount);
+}
+
+@function color-increase-contrast($color, $amount) {
+    @return lighten($color, $amount);
 }

package/lib/mol-plugin-ui/skin/colors/dark.scss

@@ -1,24 +1,24 @@
-$default-background:         #111318;
-$font-color:                 #ccd4e0;
-$hover-font-color:           #51A2FB;
-$entity-current-font-color:  #68BEFD;
-$msp-btn-remove-background:      #DE0A28;
-$msp-btn-remove-hover-font-color:#F2F4F7;
-$msp-btn-commit-on-font-color:   #68BEFD;
-$entity-badge-font-color:    #ccd4e0;
-
-// used in LOG
-$log-message:          #0CCA5D;
-$log-info:             #5E3673;
-$log-warning:          #FCC937;
-$log-error:            #FD354B;
-
-$logo-background: rgba(0,0,0,0.75);
-
-@function color-lower-contrast($color, $amount) {
-    @return darken($color, $amount);
-}
-
-@function color-increase-contrast($color, $amount) {
-    @return lighten($color, $amount);
+$default-background:         #111318;
+$font-color:                 #ccd4e0;
+$hover-font-color:           #51A2FB;
+$entity-current-font-color:  #68BEFD;
+$msp-btn-remove-background:      #DE0A28;
+$msp-btn-remove-hover-font-color:#F2F4F7;
+$msp-btn-commit-on-font-color:   #68BEFD;
+$entity-badge-font-color:    #ccd4e0;
+
+// used in LOG
+$log-message:          #0CCA5D;
+$log-info:             #5E3673;
+$log-warning:          #FCC937;
+$log-error:            #FD354B;
+
+$logo-background: rgba(0,0,0,0.75);
+
+@function color-lower-contrast($color, $amount) {
+    @return darken($color, $amount);
+}
+
+@function color-increase-contrast($color, $amount) {
+    @return lighten($color, $amount);
 }

package/lib/mol-plugin-ui/skin/colors/light.scss

@@ -1,30 +1,30 @@
-// this is complement of the dark theme
-
-@function compl($color) {
-    @return rgb(255 - red($color), 255 - green($color), 255 - blue($color));
-}
-
-$default-background:         compl(#111318);
-$font-color:                 compl(#ccd4e0);
-$hover-font-color:           compl(#51A2FB);
-$entity-current-font-color:  compl(#68BEFD);
-$msp-btn-commit-on-font-color:   compl(#68BEFD);
-$entity-badge-font-color:    lighten(#ccd4e0,10%);
-$msp-btn-remove-background:      #DE0A28;
-$msp-btn-remove-hover-font-color:#F2F4F7;
-
-// used in LOG
-$log-message:          #0CCA5D;
-$log-info:             #5E3673;
-$log-warning:          #FCC937;
-$log-error:            #FD354B;
-
-$logo-background: compl(#111318);
-
-@function color-lower-contrast($color, $amount) {
-    @return lighten($color, $amount);
-}
-
-@function color-increase-contrast($color, $amount) {
-    @return darken($color, $amount);
+// this is complement of the dark theme
+
+@function compl($color) {
+    @return rgb(255 - red($color), 255 - green($color), 255 - blue($color));
+}
+
+$default-background:         compl(#111318);
+$font-color:                 compl(#ccd4e0);
+$hover-font-color:           compl(#51A2FB);
+$entity-current-font-color:  compl(#68BEFD);
+$msp-btn-commit-on-font-color:   compl(#68BEFD);
+$entity-badge-font-color:    lighten(#ccd4e0,10%);
+$msp-btn-remove-background:      #DE0A28;
+$msp-btn-remove-hover-font-color:#F2F4F7;
+
+// used in LOG
+$log-message:          #0CCA5D;
+$log-info:             #5E3673;
+$log-warning:          #FCC937;
+$log-error:            #FD354B;
+
+$logo-background: compl(#111318);
+
+@function color-lower-contrast($color, $amount) {
+    @return lighten($color, $amount);
+}
+
+@function color-increase-contrast($color, $amount) {
+    @return darken($color, $amount);
 }

package/lib/mol-plugin-ui/skin/dark.scss

@@ -1,2 +1,2 @@
-@import 'colors/dark';
+@import 'colors/dark';
 @import 'base/base';

package/lib/mol-plugin-ui/skin/light.scss

@@ -1,2 +1,2 @@
-@import 'colors/light';
+@import 'colors/light';
 @import 'base/base';

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

@@ -11,4 +11,3 @@ import { VolumeStreamingCustomControls } from './custom/volume';
 export var DefaultPluginUISpec = function () { return (__assign(__assign({}, DefaultPluginSpec()), { customParamEditors: [
         [CreateVolumeStreamingBehavior, VolumeStreamingCustomControls]
     ] })); };
-//# sourceMappingURL=spec.js.map

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

@@ -40,9 +40,8 @@ var StateObjectActions = /** @class */ (function (_super) {
             return null;
         var def = cell.transform.transformer.definition;
         var display = cell.obj ? cell.obj.label : (def.display && def.display.name) || def.name;
-        return _jsxs("div", __assign({ className: 'msp-state-actions' }, { children: [!this.props.hideHeader && _jsxs("div", __assign({ className: 'msp-section-header' }, { children: [_jsx(Icon, { svg: CodeSvg }, void 0), " ", "Actions (".concat(display, ")")] }), void 0), actions.map(function (act, i) { return _jsx(ApplyActionControl, { state: state, action: act, nodeRef: ref, initiallyCollapsed: i === 0 ? !_this.props.alwaysExpandFirst && _this.props.initiallyCollapsed : _this.props.initiallyCollapsed }, "".concat(act.id)); })] }), void 0);
+        return _jsxs("div", __assign({ className: 'msp-state-actions' }, { children: [!this.props.hideHeader && _jsxs("div", __assign({ className: 'msp-section-header' }, { children: [_jsx(Icon, { svg: CodeSvg }), " ", "Actions (".concat(display, ")")] })), actions.map(function (act, i) { return _jsx(ApplyActionControl, { state: state, action: act, nodeRef: ref, initiallyCollapsed: i === 0 ? !_this.props.alwaysExpandFirst && _this.props.initiallyCollapsed : _this.props.initiallyCollapsed }, "".concat(act.id)); })] }));
     };
     return StateObjectActions;
 }(PluginUIComponent));
 export { StateObjectActions };
-//# sourceMappingURL=actions.js.map

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

@@ -44,9 +44,8 @@ var AnimationControls = /** @class */ (function (_super) {
             return null;
         var isDisabled = anim.state.animationState === 'playing';
         var canApply = (_b = (_a = anim.current.anim).canApply) === null || _b === void 0 ? void 0 : _b.call(_a, this.plugin);
-        return _jsxs(_Fragment, { children: [_jsx(ParameterControls, { params: anim.getParams(), values: anim.state.params, onChange: this.updateParams, isDisabled: isDisabled }, void 0), _jsx(ParameterControls, { params: anim.current.params, values: anim.current.paramValues, onChange: this.updateCurrentParams, isDisabled: isDisabled }, void 0), _jsx("div", __assign({ className: 'msp-flex-row' }, { children: _jsx(Button, __assign({ icon: anim.state.animationState !== 'playing' ? void 0 : PlayArrowSvg, onClick: this.startOrStop, disabled: canApply !== void 0 && canApply.canApply === false }, { children: anim.state.animationState === 'playing' ? 'Stop' : canApply === void 0 || canApply.canApply ? 'Start' : canApply.reason || 'Start' }), void 0) }), void 0)] }, void 0);
+        return _jsxs(_Fragment, { children: [_jsx(ParameterControls, { params: anim.getParams(), values: anim.state.params, onChange: this.updateParams, isDisabled: isDisabled }), _jsx(ParameterControls, { params: anim.current.params, values: anim.current.paramValues, onChange: this.updateCurrentParams, isDisabled: isDisabled }), _jsx("div", __assign({ className: 'msp-flex-row' }, { children: _jsx(Button, __assign({ icon: anim.state.animationState !== 'playing' ? void 0 : PlayArrowSvg, onClick: this.startOrStop, disabled: canApply !== void 0 && canApply.canApply === false }, { children: anim.state.animationState === 'playing' ? 'Stop' : canApply === void 0 || canApply.canApply ? 'Start' : canApply.reason || 'Start' })) }))] });
     };
     return AnimationControls;
 }(PluginUIComponent));
 export { AnimationControls };
-//# sourceMappingURL=animation.js.map

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

@@ -53,4 +53,3 @@ var ApplyActionControl = /** @class */ (function (_super) {
     };
     return ApplyActionControl;
 }(TransformControlBase));
-//# sourceMappingURL=apply-action.js.map

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

@@ -27,7 +27,7 @@ var StateTransformParameters = /** @class */ (function (_super) {
         return PD.areEqual(this.props.info.params, params, this.props.info.initialValues);
     };
     StateTransformParameters.prototype.render = function () {
-        return _jsx(ParameterControls, { params: this.props.info.params, values: this.props.params, onChange: this.onChange, onEnter: this.props.events.onEnter, isDisabled: this.props.isDisabled }, void 0);
+        return _jsx(ParameterControls, { params: this.props.info.params, values: this.props.params, onChange: this.onChange, onEnter: this.props.events.onEnter, isDisabled: this.props.isDisabled });
     };
     return StateTransformParameters;
 }(PurePluginUIComponent));
@@ -151,7 +151,7 @@ var TransformControlBase = /** @class */ (function (_super) {
         var canApply = this.canApply();
         if (this.props.autoHideApply && (!canApply || this.canAutoApply(this.state.params)))
             return null;
-        return _jsxs("div", __assign({ className: 'msp-transform-apply-wrap' }, { children: [_jsx(IconButton, { svg: RefreshSvg, className: 'msp-transform-default-params', onClick: this.setDefault, disabled: this.state.busy, title: 'Set default params' }, void 0), _jsx("div", __assign({ className: "msp-transform-apply-wider" }, { children: _jsx(Button, __assign({ icon: canApply ? CheckSvg : void 0, className: "msp-btn-commit msp-btn-commit-".concat(canApply ? 'on' : 'off'), onClick: this.apply, disabled: !canApply }, { children: this.props.applyLabel || this.applyText() }), void 0) }), void 0)] }), void 0);
+        return _jsxs("div", __assign({ className: 'msp-transform-apply-wrap' }, { children: [_jsx(IconButton, { svg: RefreshSvg, className: 'msp-transform-default-params', onClick: this.setDefault, disabled: this.state.busy, title: 'Set default params' }), _jsx("div", __assign({ className: "msp-transform-apply-wider" }, { children: _jsx(Button, __assign({ icon: canApply ? CheckSvg : void 0, className: "msp-btn-commit msp-btn-commit-".concat(canApply ? 'on' : 'off'), onClick: this.apply, disabled: !canApply }, { children: this.props.applyLabel || this.applyText() })) }))] }));
     };
     TransformControlBase.prototype.renderDefault = function () {
         var info = this.getInfo();
@@ -168,18 +168,18 @@ var TransformControlBase = /** @class */ (function (_super) {
         if (!isEmpty && !this.state.isCollapsed) {
             var _a = this.getSourceAndTarget(), a = _a.a, b = _a.b, bCell = _a.bCell;
             var applyControl = this.renderApply();
-            params = _jsxs(_Fragment, { children: [_jsx(ParamEditor, { info: info, a: a, b: b, bCell: bCell, events: this.events, params: this.state.params, isDisabled: this.state.busy }, void 0), applyControl] }, void 0);
+            params = _jsxs(_Fragment, { children: [_jsx(ParamEditor, { info: info, a: a, b: b, bCell: bCell, events: this.events, params: this.state.params, isDisabled: this.state.busy }), applyControl] });
         }
-        var ctrl = _jsxs("div", __assign({ className: wrapClass, style: { marginBottom: this.props.noMargin ? 0 : void 0 } }, { children: [display !== 'none' && !this.props.wrapInExpander && _jsx("div", __assign({ className: 'msp-transform-header' }, { children: _jsxs(Button, __assign({ onClick: this.toggleExpanded, title: display.description }, { children: [!isEmpty && _jsx(Icon, { svg: this.state.isCollapsed ? ArrowRightSvg : ArrowDropDownSvg }, void 0), display.name] }), void 0) }), void 0), params] }), void 0);
+        var ctrl = _jsxs("div", __assign({ className: wrapClass, style: { marginBottom: this.props.noMargin ? 0 : void 0 } }, { children: [display !== 'none' && !this.props.wrapInExpander && _jsx("div", __assign({ className: 'msp-transform-header' }, { children: _jsxs(Button, __assign({ onClick: this.toggleExpanded, title: display.description }, { children: [!isEmpty && _jsx(Icon, { svg: this.state.isCollapsed ? ArrowRightSvg : ArrowDropDownSvg }), display.name] })) })), params] }));
         if (isEmpty || !this.props.wrapInExpander)
             return ctrl;
-        return _jsx(ExpandGroup, __assign({ header: this.isUpdate() ? "Update ".concat(display === 'none' ? '' : display.name) : "Apply ".concat(display === 'none' ? '' : display.name), headerLeftMargin: this.props.expanderHeaderLeftMargin }, { children: ctrl }), void 0);
+        return _jsx(ExpandGroup, __assign({ header: this.isUpdate() ? "Update ".concat(display === 'none' ? '' : display.name) : "Apply ".concat(display === 'none' ? '' : display.name), headerLeftMargin: this.props.expanderHeaderLeftMargin }, { children: ctrl }));
     };
     TransformControlBase.prototype.renderSimple = function () {
         var _a, _b, _c;
         var info = this.getInfo();
         var canApply = this.canApply();
-        var apply = _jsxs("div", __assign({ className: 'msp-flex-row' }, { children: [_jsx(Button, __assign({ icon: (_a = this.props.simpleApply) === null || _a === void 0 ? void 0 : _a.icon, title: (_b = this.props.simpleApply) === null || _b === void 0 ? void 0 : _b.title, disabled: this.state.busy || !canApply, onClick: this.apply, className: 'msp-btn-apply-simple' }, { children: (_c = this.props.simpleApply) === null || _c === void 0 ? void 0 : _c.header }), void 0), !info.isEmpty && _jsx(ToggleButton, { icon: TuneSvg, label: '', title: 'Options', toggle: this.toggleExpanded, isSelected: !this.state.isCollapsed, disabled: this.state.busy, style: { flex: '0 0 40px', padding: 0 } }, void 0)] }), void 0);
+        var apply = _jsxs("div", __assign({ className: 'msp-flex-row' }, { children: [_jsx(Button, __assign({ icon: (_a = this.props.simpleApply) === null || _a === void 0 ? void 0 : _a.icon, title: (_b = this.props.simpleApply) === null || _b === void 0 ? void 0 : _b.title, disabled: this.state.busy || !canApply, onClick: this.apply, className: 'msp-btn-apply-simple' }, { children: (_c = this.props.simpleApply) === null || _c === void 0 ? void 0 : _c.header })), !info.isEmpty && _jsx(ToggleButton, { icon: TuneSvg, label: '', title: 'Options', toggle: this.toggleExpanded, isSelected: !this.state.isCollapsed, disabled: this.state.busy, style: { flex: '0 0 40px', padding: 0 } })] }));
         if (this.state.isCollapsed)
             return apply;
         var tId = this.getTransformerId();
@@ -187,7 +187,7 @@ var TransformControlBase = /** @class */ (function (_super) {
             ? this.plugin.customParamEditors.get(tId)
             : StateTransformParameters;
         var _d = this.getSourceAndTarget(), a = _d.a, b = _d.b, bCell = _d.bCell;
-        return _jsxs(_Fragment, { children: [apply, _jsx(ParamEditor, { info: info, a: a, b: b, bCell: bCell, events: this.events, params: this.state.params, isDisabled: this.state.busy }, void 0)] }, void 0);
+        return _jsxs(_Fragment, { children: [apply, _jsx(ParamEditor, { info: info, a: a, b: b, bCell: bCell, events: this.events, params: this.state.params, isDisabled: this.state.busy })] });
     };
     TransformControlBase.prototype.render = function () {
         // console.log('rendering', ((this.props as any)?.transform?.transformer || (this.props as any)?.action)?.definition.display.name, +new Date)
@@ -195,4 +195,3 @@ var TransformControlBase = /** @class */ (function (_super) {
     };
     return TransformControlBase;
 }(PurePluginUIComponent));
-//# sourceMappingURL=common.js.map

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

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

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

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

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

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

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

@@ -33,7 +33,7 @@ var StructureComponentControls = /** @class */ (function (_super) {
         }); });
     };
     StructureComponentControls.prototype.renderControls = function () {
-        return _jsxs(_Fragment, { children: [_jsx(ComponentEditorControls, {}, void 0), _jsx(ComponentListControls, {}, void 0), _jsx(GenericEntryListControls, {}, void 0)] }, void 0);
+        return _jsxs(_Fragment, { children: [_jsx(ComponentEditorControls, {}), _jsx(ComponentListControls, {}), _jsx(GenericEntryListControls, {})] });
     };
     return StructureComponentControls;
 }(CollapsableControls));
@@ -96,7 +96,7 @@ var ComponentEditorControls = /** @class */ (function (_super) {
     };
     Object.defineProperty(ComponentEditorControls.prototype, "presetControls", {
         get: function () {
-            return _jsx(ActionMenu, { items: this.presetActions, onSelect: this.applyPreset }, void 0);
+            return _jsx(ActionMenu, { items: this.presetActions, onSelect: this.applyPreset });
         },
         enumerable: false,
         configurable: true
@@ -114,7 +114,7 @@ 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 _jsxs(_Fragment, { children: [_jsxs("div", __assign({ className: 'msp-flex-row' }, { children: [_jsx(ToggleButton, { icon: 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), _jsx(ToggleButton, { icon: 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), _jsx(ToggleButton, { icon: 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), _jsx(IconButton, { svg: 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' && _jsx("div", __assign({ className: 'msp-control-offset' }, { children: _jsx(AddComponentControls, { onApply: this.hideAction }, void 0) }), void 0), this.state.action === 'options' && _jsx("div", __assign({ className: 'msp-control-offset' }, { children: _jsx(ComponentOptionsControls, { isDisabled: this.isDisabled }, void 0) }), void 0)] }, void 0);
+        return _jsxs(_Fragment, { children: [_jsxs("div", __assign({ className: 'msp-flex-row' }, { children: [_jsx(ToggleButton, { icon: BookmarksOutlinedSvg, label: 'Preset', title: 'Apply a representation preset for the current structure(s).', toggle: this.togglePreset, isSelected: this.state.action === 'preset', disabled: this.isDisabled }), _jsx(ToggleButton, { icon: AddSvg, label: 'Add', title: 'Add a new representation component for a selection.', toggle: this.toggleAdd, isSelected: this.state.action === 'add', disabled: this.isDisabled }), _jsx(ToggleButton, { icon: 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 }), _jsx(IconButton, { svg: 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' && _jsx("div", __assign({ className: 'msp-control-offset' }, { children: _jsx(AddComponentControls, { onApply: this.hideAction }) })), this.state.action === 'options' && _jsx("div", __assign({ className: 'msp-control-offset' }, { children: _jsx(ComponentOptionsControls, { isDisabled: this.isDisabled }) }))] });
     };
     return ComponentEditorControls;
 }(PurePluginUIComponent));
@@ -150,7 +150,7 @@ var AddComponentControls = /** @class */ (function (_super) {
         configurable: true
     });
     AddComponentControls.prototype.render = function () {
-        return _jsxs(_Fragment, { children: [_jsx(ParameterControls, { params: this.state.params, values: this.state.values, onChangeValues: this.paramsChanged }, void 0), _jsx(Button, __assign({ icon: 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 _jsxs(_Fragment, { children: [_jsx(ParameterControls, { params: this.state.params, values: this.state.values, onChangeValues: this.paramsChanged }), _jsx(Button, __assign({ icon: 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;
 }(PurePluginUIComponent));
@@ -167,7 +167,7 @@ var ComponentOptionsControls = /** @class */ (function (_super) {
         this.subscribe(this.plugin.managers.structure.component.events.optionsUpdated, function () { return _this.forceUpdate(); });
     };
     ComponentOptionsControls.prototype.render = function () {
-        return _jsx(ParameterControls, { params: StructureComponentManager.OptionsParams, values: this.plugin.managers.structure.component.state.options, onChangeValues: this.update, isDisabled: this.props.isDisabled }, void 0);
+        return _jsx(ParameterControls, { params: StructureComponentManager.OptionsParams, values: this.plugin.managers.structure.component.state.options, onChangeValues: this.update, isDisabled: this.props.isDisabled });
     };
     return ComponentOptionsControls;
 }(PurePluginUIComponent));
@@ -186,7 +186,7 @@ var ComponentListControls = /** @class */ (function (_super) {
         var componentGroups = this.plugin.managers.structure.hierarchy.currentComponentGroups;
         if (componentGroups.length === 0)
             return null;
-        return _jsx("div", __assign({ style: { marginTop: '6px' } }, { children: componentGroups.map(function (g) { return _jsx(StructureComponentGroup, { group: g }, g[0].cell.transform.ref); }) }), void 0);
+        return _jsx("div", __assign({ style: { marginTop: '6px' } }, { children: componentGroups.map(function (g) { return _jsx(StructureComponentGroup, { group: g }, g[0].cell.transform.ref); }) }));
     };
     return ComponentListControls;
 }(PurePluginUIComponent));
@@ -326,7 +326,7 @@ 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 _jsxs(_Fragment, { children: [_jsxs("div", __assign({ className: 'msp-flex-row' }, { children: [_jsxs(Button, __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, _jsx("small", __assign({ className: 'msp-25-lower-contrast-text', style: { float: 'right' } }, { children: reprLabel }), void 0)] }), void 0), _jsx(IconButton, { svg: cell.state.isHidden ? VisibilityOffOutlinedSvg : VisibilityOutlinedSvg, toggleState: false, onClick: this.toggleVisible, title: "".concat(cell.state.isHidden ? 'Show' : 'Hide', " component"), small: true, className: 'msp-form-control', flex: true }, void 0), _jsx(IconButton, { svg: DeleteOutlinedSvg, toggleState: false, onClick: this.remove, title: 'Remove', small: true, className: 'msp-form-control', flex: true }, void 0), _jsx(IconButton, { svg: 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' && _jsx("div", __assign({ className: 'msp-control-offset', style: { marginBottom: '6px' } }, { children: _jsx(ControlRow, { label: 'Label', control: _jsxs("div", __assign({ style: { display: 'flex', textAlignLast: 'center' } }, { children: [_jsx(TextInput, { onChange: this.updateLabel, value: label, style: { flex: '1 1 auto', minWidth: 0 }, className: 'msp-form-control', blurOnEnter: true, blurOnEscape: true }, void 0), _jsx(IconButton, { svg: 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' && _jsxs("div", __assign({ className: 'msp-accent-offset' }, { children: [_jsx("div", __assign({ style: { marginBottom: '6px' } }, { children: _jsx(ActionMenu, { items: this.actions, onSelect: this.selectAction, noOffset: true }, void 0) }), void 0), _jsx("div", __assign({ style: { marginBottom: '6px' } }, { children: component.representations.map(function (r) { return _jsx(StructureRepresentationEntry, { group: _this.props.group, representation: r }, r.cell.transform.ref); }) }), void 0)] }), void 0)] }, void 0);
+        return _jsxs(_Fragment, { children: [_jsxs("div", __assign({ className: 'msp-flex-row' }, { children: [_jsxs(Button, __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, _jsx("small", __assign({ className: 'msp-25-lower-contrast-text', style: { float: 'right' } }, { children: reprLabel }))] })), _jsx(IconButton, { svg: cell.state.isHidden ? VisibilityOffOutlinedSvg : VisibilityOutlinedSvg, toggleState: false, onClick: this.toggleVisible, title: "".concat(cell.state.isHidden ? 'Show' : 'Hide', " component"), small: true, className: 'msp-form-control', flex: true }), _jsx(IconButton, { svg: DeleteOutlinedSvg, toggleState: false, onClick: this.remove, title: 'Remove', small: true, className: 'msp-form-control', flex: true }), _jsx(IconButton, { svg: MoreHorizSvg, onClick: this.toggleAction, title: 'Actions', toggleState: this.state.action === 'action', className: 'msp-form-control', flex: true })] })), this.state.action === 'label' && _jsx("div", __assign({ className: 'msp-control-offset', style: { marginBottom: '6px' } }, { children: _jsx(ControlRow, { label: 'Label', control: _jsxs("div", __assign({ style: { display: 'flex', textAlignLast: 'center' } }, { children: [_jsx(TextInput, { onChange: this.updateLabel, value: label, style: { flex: '1 1 auto', minWidth: 0 }, className: 'msp-form-control', blurOnEnter: true, blurOnEscape: true }), _jsx(IconButton, { svg: CheckSvg, onClick: this.toggleLabel, className: 'msp-form-control msp-control-button-label', flex: true })] })) }) })), this.state.action === 'action' && _jsxs("div", __assign({ className: 'msp-accent-offset' }, { children: [_jsx("div", __assign({ style: { marginBottom: '6px' } }, { children: _jsx(ActionMenu, { items: this.actions, onSelect: this.selectAction, noOffset: true }) })), _jsx("div", __assign({ style: { marginBottom: '6px' } }, { children: component.representations.map(function (r) { return _jsx(StructureRepresentationEntry, { group: _this.props.group, representation: r }, r.cell.transform.ref); }) }))] }))] });
     };
     return StructureComponentGroup;
 }(PurePluginUIComponent));
@@ -353,12 +353,11 @@ var StructureRepresentationEntry = /** @class */ (function (_super) {
     StructureRepresentationEntry.prototype.render = function () {
         var _a;
         var repr = this.props.representation.cell;
-        return _jsxs("div", __assign({ className: 'msp-representation-entry' }, { children: [repr.parent && _jsx(ExpandGroup, __assign({ header: "".concat(((_a = repr.obj) === null || _a === void 0 ? void 0 : _a.label) || '', " Representation"), noOffset: true }, { children: _jsx(UpdateTransformControl, { state: repr.parent, transform: repr.transform, customHeader: 'none', customUpdate: this.update, noMargin: true }, void 0) }), void 0), _jsx(IconButton, { svg: DeleteOutlinedSvg, onClick: this.remove, title: 'Remove', small: true, className: 'msp-default-bg', toggleState: false, style: {
+        return _jsxs("div", __assign({ className: 'msp-representation-entry' }, { children: [repr.parent && _jsx(ExpandGroup, __assign({ header: "".concat(((_a = repr.obj) === null || _a === void 0 ? void 0 : _a.label) || '', " Representation"), noOffset: true }, { children: _jsx(UpdateTransformControl, { state: repr.parent, transform: repr.transform, customHeader: 'none', customUpdate: this.update, noMargin: true }) })), _jsx(IconButton, { svg: 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), _jsx(IconButton, { svg: this.props.representation.cell.state.isHidden ? VisibilityOffOutlinedSvg : VisibilityOutlinedSvg, toggleState: false, onClick: this.toggleVisible, title: 'Toggle Visibility', small: true, className: 'msp-default-bg', style: {
+                    } }), _jsx(IconButton, { svg: this.props.representation.cell.state.isHidden ? VisibilityOffOutlinedSvg : 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;
 }(PurePluginUIComponent));
-//# sourceMappingURL=components.js.map

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

@@ -222,9 +222,8 @@ var StructureFocusControls = /** @class */ (function (_super) {
                 title += "\nor use '".concat(binding, "' on element");
             }
         }
-        return _jsxs(_Fragment, { children: [_jsxs("div", __assign({ className: 'msp-flex-row' }, { children: [_jsx(Button, __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 && _jsx(IconButton, { svg: CancelOutlinedSvg, onClick: this.clear, title: 'Clear', className: 'msp-form-control', flex: true, disabled: this.isDisabled }, void 0), _jsx(ToggleButton, { icon: 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 && _jsx(ActionMenu, { items: this.actionItems, onSelect: this.selectAction }, void 0)] }, void 0);
+        return _jsxs(_Fragment, { children: [_jsxs("div", __assign({ className: 'msp-flex-row' }, { children: [_jsx(Button, __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 && _jsx(IconButton, { svg: CancelOutlinedSvg, onClick: this.clear, title: 'Clear', className: 'msp-form-control', flex: true, disabled: this.isDisabled }), _jsx(ToggleButton, { icon: 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 && _jsx(ActionMenu, { items: this.actionItems, onSelect: this.selectAction })] });
     };
     return StructureFocusControls;
 }(PluginUIComponent));
 export { StructureFocusControls };
-//# sourceMappingURL=focus.js.map