molstar 3.3.1 → 3.4.0

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

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

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

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

@@ -37,7 +37,7 @@ var GenericEntryListControls = /** @class */ (function (_super) {
             }
             if (refs.length === 0)
                 return null;
-            return _jsx(GenericEntry, { refs: refs, labelMultiple: 'Unit Cells' }, void 0);
+            return _jsx(GenericEntry, { refs: refs, labelMultiple: 'Unit Cells' });
         },
         enumerable: false,
         configurable: true
@@ -49,7 +49,7 @@ var GenericEntryListControls = /** @class */ (function (_super) {
             this.plugin.genericRepresentationControls.forEach(function (provider, key) {
                 var _a = provider(_this.plugin.managers.structure.hierarchy.selection), refs = _a[0], labelMultiple = _a[1];
                 if (refs.length > 0) {
-                    controls.push(_jsx("div", { children: _jsx(GenericEntry, { refs: refs, labelMultiple: labelMultiple }, void 0) }, key));
+                    controls.push(_jsx("div", { children: _jsx(GenericEntry, { refs: refs, labelMultiple: labelMultiple }) }, key));
                 }
             });
             return controls.length > 0 ? controls : null;
@@ -58,7 +58,7 @@ var GenericEntryListControls = /** @class */ (function (_super) {
         configurable: true
     });
     GenericEntryListControls.prototype.render = function () {
-        return _jsx(_Fragment, { children: _jsxs("div", __assign({ style: { marginTop: '6px' } }, { children: [this.unitcell, this.customControls] }), void 0) }, void 0);
+        return _jsx(_Fragment, { children: _jsxs("div", __assign({ style: { marginTop: '6px' } }, { children: [this.unitcell, this.customControls] })) });
     };
     return GenericEntryListControls;
 }(PurePluginUIComponent));
@@ -144,7 +144,7 @@ var GenericEntry = /** @class */ (function (_super) {
         else {
             label = "".concat(refs.length, " ").concat(labelMultiple || 'Objects');
         }
-        return _jsxs(_Fragment, { children: [_jsxs("div", __assign({ className: 'msp-flex-row' }, { children: [_jsxs("button", __assign({ className: 'msp-form-control 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", { children: description }, void 0)] }), void 0), _jsx(IconButton, { svg: pivot.cell.state.isHidden ? VisibilityOffOutlinedSvg : VisibilityOutlinedSvg, toggleState: false, className: 'msp-form-control', onClick: this.toggleVisibility, title: "".concat(pivot.cell.state.isHidden ? 'Show' : 'Hide'), small: true, flex: true }, void 0), refs.length === 1 && _jsx(IconButton, { svg: MoreHorizSvg, className: 'msp-form-control', onClick: this.toggleOptions, title: 'Options', toggleState: this.state.showOptions, flex: true }, void 0)] }), void 0), (refs.length === 1 && this.state.showOptions && pivot.cell.parent) && _jsx(_Fragment, { children: _jsx("div", __assign({ className: 'msp-control-offset' }, { children: _jsx(UpdateTransformControl, { state: pivot.cell.parent, transform: pivot.cell.transform, customHeader: 'none', autoHideApply: true }, void 0) }), void 0) }, void 0)] }, void 0);
+        return _jsxs(_Fragment, { children: [_jsxs("div", __assign({ className: 'msp-flex-row' }, { children: [_jsxs("button", __assign({ className: 'msp-form-control 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", { children: description })] })), _jsx(IconButton, { svg: pivot.cell.state.isHidden ? VisibilityOffOutlinedSvg : VisibilityOutlinedSvg, toggleState: false, className: 'msp-form-control', onClick: this.toggleVisibility, title: "".concat(pivot.cell.state.isHidden ? 'Show' : 'Hide'), small: true, flex: true }), refs.length === 1 && _jsx(IconButton, { svg: MoreHorizSvg, className: 'msp-form-control', onClick: this.toggleOptions, title: 'Options', toggleState: this.state.showOptions, flex: true })] })), (refs.length === 1 && this.state.showOptions && pivot.cell.parent) && _jsx(_Fragment, { children: _jsx("div", __assign({ className: 'msp-control-offset' }, { children: _jsx(UpdateTransformControl, { state: pivot.cell.parent, transform: pivot.cell.transform, customHeader: 'none', autoHideApply: true }) })) })] });
     };
     return GenericEntry;
 }(PurePluginUIComponent));

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

@@ -25,7 +25,7 @@ var StructureMeasurementsControls = /** @class */ (function (_super) {
         };
     };
     StructureMeasurementsControls.prototype.renderControls = function () {
-        return _jsxs(_Fragment, { children: [_jsx(MeasurementControls, {}, void 0), _jsx(MeasurementList, {}, void 0)] }, void 0);
+        return _jsxs(_Fragment, { children: [_jsx(MeasurementControls, {}), _jsx(MeasurementList, {})] });
     };
     return StructureMeasurementsControls;
 }(CollapsableControls));
@@ -48,11 +48,11 @@ var MeasurementList = /** @class */ (function (_super) {
             if (cell.obj)
                 group.push(_jsx(MeasurementEntry, { cell: cell }, cell.obj.id));
         }
-        return group.length ? _jsx(ExpandGroup, __assign({ header: header, initiallyExpanded: true }, { children: group }), void 0) : null;
+        return group.length ? _jsx(ExpandGroup, __assign({ header: header, initiallyExpanded: true }, { children: group })) : null;
     };
     MeasurementList.prototype.render = function () {
         var measurements = this.plugin.managers.structure.measurement.state;
-        return _jsxs("div", __assign({ style: { marginTop: '6px' } }, { children: [this.renderGroup(measurements.labels, 'Labels'), this.renderGroup(measurements.distances, 'Distances'), this.renderGroup(measurements.angles, 'Angles'), this.renderGroup(measurements.dihedrals, 'Dihedrals'), this.renderGroup(measurements.orientations, 'Orientations'), this.renderGroup(measurements.planes, 'Planes')] }), void 0);
+        return _jsxs("div", __assign({ style: { marginTop: '6px' } }, { children: [this.renderGroup(measurements.labels, 'Labels'), this.renderGroup(measurements.distances, 'Distances'), this.renderGroup(measurements.angles, 'Angles'), this.renderGroup(measurements.dihedrals, 'Dihedrals'), this.renderGroup(measurements.orientations, 'Orientations'), this.renderGroup(measurements.planes, 'Planes')] }));
     };
     return MeasurementList;
 }(PurePluginUIComponent));
@@ -169,7 +169,7 @@ var MeasurementControls = /** @class */ (function (_super) {
     MeasurementControls.prototype.historyEntry = function (e, idx) {
         var _this = this;
         var history = this.plugin.managers.structure.selection.additionsHistory;
-        return _jsxs("div", __assign({ className: 'msp-flex-row', onMouseEnter: function () { return _this.highlight(e.loci); }, onMouseLeave: function () { return _this.plugin.managers.interactivity.lociHighlights.clearHighlights(); } }, { children: [_jsxs(Button, __assign({ noOverflow: true, title: 'Click to focus. Hover to highlight.', onClick: function () { return _this.focusLoci(e.loci); }, style: { width: 'auto', textAlign: 'left' } }, { children: [idx, ". ", _jsx("span", { dangerouslySetInnerHTML: { __html: e.label } }, void 0)] }), void 0), history.length > 1 && _jsx(IconButton, { svg: ArrowUpwardSvg, small: true, className: 'msp-form-control', onClick: function () { return _this.moveHistory(e, 'up'); }, flex: '20px', title: 'Move up' }, void 0), history.length > 1 && _jsx(IconButton, { svg: ArrowDownwardSvg, small: true, className: 'msp-form-control', onClick: function () { return _this.moveHistory(e, 'down'); }, flex: '20px', title: 'Move down' }, void 0), _jsx(IconButton, { svg: DeleteOutlinedSvg, small: true, className: 'msp-form-control', onClick: function () { return _this.plugin.managers.structure.selection.modifyHistory(e, 'remove'); }, flex: true, title: 'Remove' }, void 0)] }), e.id);
+        return _jsxs("div", __assign({ className: 'msp-flex-row', onMouseEnter: function () { return _this.highlight(e.loci); }, onMouseLeave: function () { return _this.plugin.managers.interactivity.lociHighlights.clearHighlights(); } }, { children: [_jsxs(Button, __assign({ noOverflow: true, title: 'Click to focus. Hover to highlight.', onClick: function () { return _this.focusLoci(e.loci); }, style: { width: 'auto', textAlign: 'left' } }, { children: [idx, ". ", _jsx("span", { dangerouslySetInnerHTML: { __html: e.label } })] })), history.length > 1 && _jsx(IconButton, { svg: ArrowUpwardSvg, small: true, className: 'msp-form-control', onClick: function () { return _this.moveHistory(e, 'up'); }, flex: '20px', title: 'Move up' }), history.length > 1 && _jsx(IconButton, { svg: ArrowDownwardSvg, small: true, className: 'msp-form-control', onClick: function () { return _this.moveHistory(e, 'down'); }, flex: '20px', title: 'Move down' }), _jsx(IconButton, { svg: DeleteOutlinedSvg, small: true, className: 'msp-form-control', onClick: function () { return _this.plugin.managers.structure.selection.modifyHistory(e, 'remove'); }, flex: true, title: 'Remove' })] }), e.id);
     };
     MeasurementControls.prototype.add = function () {
         var history = this.plugin.managers.structure.selection.additionsHistory;
@@ -177,10 +177,10 @@ var MeasurementControls = /** @class */ (function (_super) {
         for (var i = 0, _i = Math.min(history.length, 4); i < _i; i++) {
             entries.push(this.historyEntry(history[i], i + 1));
         }
-        return _jsxs(_Fragment, { children: [_jsx(ActionMenu, { items: this.actions, onSelect: this.selectAction }, void 0), entries.length > 0 && _jsx("div", __assign({ className: 'msp-control-offset' }, { children: entries }), void 0), entries.length === 0 && _jsx("div", __assign({ className: 'msp-control-offset msp-help-text' }, { children: _jsxs("div", __assign({ className: 'msp-help-description' }, { children: [_jsx(Icon, { svg: HelpOutlineSvg, inline: true }, void 0), "Add one or more selections (toggle ", _jsx(ToggleSelectionModeButton, { inline: true }, void 0), " mode)"] }), void 0) }), void 0)] }, void 0);
+        return _jsxs(_Fragment, { children: [_jsx(ActionMenu, { items: this.actions, onSelect: this.selectAction }), entries.length > 0 && _jsx("div", __assign({ className: 'msp-control-offset' }, { children: entries })), entries.length === 0 && _jsx("div", __assign({ className: 'msp-control-offset msp-help-text' }, { children: _jsxs("div", __assign({ className: 'msp-help-description' }, { children: [_jsx(Icon, { svg: HelpOutlineSvg, inline: true }), "Add one or more selections (toggle ", _jsx(ToggleSelectionModeButton, { inline: true }), " mode)"] })) }))] });
     };
     MeasurementControls.prototype.render = function () {
-        return _jsxs(_Fragment, { children: [_jsxs("div", __assign({ className: 'msp-flex-row' }, { children: [_jsx(ToggleButton, { icon: AddSvg, label: 'Add', toggle: this.toggleAdd, isSelected: this.state.action === 'add', disabled: this.state.isBusy, className: 'msp-btn-apply-simple' }, void 0), _jsx(ToggleButton, { icon: TuneSvg, label: '', title: 'Options', toggle: this.toggleOptions, isSelected: this.state.action === 'options', disabled: this.state.isBusy, style: { flex: '0 0 40px', padding: 0 } }, void 0)] }), void 0), this.state.action === 'add' && this.add(), this.state.action === 'options' && _jsx(MeasurementsOptions, {}, void 0)] }, void 0);
+        return _jsxs(_Fragment, { children: [_jsxs("div", __assign({ className: 'msp-flex-row' }, { children: [_jsx(ToggleButton, { icon: AddSvg, label: 'Add', toggle: this.toggleAdd, isSelected: this.state.action === 'add', disabled: this.state.isBusy, className: 'msp-btn-apply-simple' }), _jsx(ToggleButton, { icon: TuneSvg, label: '', title: 'Options', toggle: this.toggleOptions, isSelected: this.state.action === 'options', disabled: this.state.isBusy, style: { flex: '0 0 40px', padding: 0 } })] })), this.state.action === 'add' && this.add(), this.state.action === 'options' && _jsx(MeasurementsOptions, {})] });
     };
     return MeasurementControls;
 }(PurePluginUIComponent));
@@ -206,7 +206,7 @@ var MeasurementsOptions = /** @class */ (function (_super) {
     };
     MeasurementsOptions.prototype.render = function () {
         var measurements = this.plugin.managers.structure.measurement.state;
-        return _jsx("div", __assign({ className: 'msp-control-offset' }, { children: _jsx(ParameterControls, { params: StructureMeasurementParams, values: measurements.options, onChangeValues: this.changed, isDisabled: this.state.isDisabled }, void 0) }), void 0);
+        return _jsx("div", __assign({ className: 'msp-control-offset' }, { children: _jsx(ParameterControls, { params: StructureMeasurementParams, values: measurements.options, onChangeValues: this.changed, isDisabled: this.state.isDisabled }) }));
     };
     return MeasurementsOptions;
 }(PurePluginUIComponent));
@@ -324,7 +324,7 @@ var MeasurementEntry = /** @class */ (function (_super) {
         var obj = cell.obj;
         if (!obj)
             return null;
-        return _jsxs(_Fragment, { children: [_jsxs("div", __assign({ className: 'msp-flex-row', onMouseEnter: this.highlight, onMouseLeave: this.clearHighlight }, { children: [_jsx("button", __assign({ className: 'msp-form-control msp-control-button-label msp-no-overflow', title: 'Click to focus. Hover to highlight.', onClick: this.focus, style: { width: 'auto', textAlign: 'left' } }, { children: _jsx("span", { dangerouslySetInnerHTML: { __html: this.label } }, void 0) }), void 0), _jsx(IconButton, { svg: cell.state.isHidden ? VisibilityOffOutlinedSvg : VisibilityOutlinedSvg, toggleState: false, small: true, className: 'msp-form-control', onClick: this.toggleVisibility, flex: true, title: cell.state.isHidden ? 'Show' : 'Hide' }, void 0), _jsx(IconButton, { svg: DeleteOutlinedSvg, small: true, className: 'msp-form-control', onClick: this.delete, flex: true, title: 'Delete', toggleState: false }, void 0), _jsx(IconButton, { svg: MoreHorizSvg, className: 'msp-form-control', onClick: this.toggleUpdate, flex: true, title: 'Actions', toggleState: this.state.showUpdate }, void 0)] }), obj.id), this.state.showUpdate && cell.parent && _jsx(_Fragment, { children: _jsxs("div", __assign({ className: 'msp-accent-offset' }, { children: [_jsx(ActionMenu, { items: this.actions, onSelect: this.selectAction, noOffset: true }, void 0), _jsx(ExpandGroup, __assign({ header: 'Options', noOffset: true }, { children: _jsx(UpdateTransformControl, { state: cell.parent, transform: cell.transform, customHeader: 'none', autoHideApply: true }, void 0) }), void 0)] }), void 0) }, void 0)] }, void 0);
+        return _jsxs(_Fragment, { children: [_jsxs("div", __assign({ className: 'msp-flex-row', onMouseEnter: this.highlight, onMouseLeave: this.clearHighlight }, { children: [_jsx("button", __assign({ className: 'msp-form-control msp-control-button-label msp-no-overflow', title: 'Click to focus. Hover to highlight.', onClick: this.focus, style: { width: 'auto', textAlign: 'left' } }, { children: _jsx("span", { dangerouslySetInnerHTML: { __html: this.label } }) })), _jsx(IconButton, { svg: cell.state.isHidden ? VisibilityOffOutlinedSvg : VisibilityOutlinedSvg, toggleState: false, small: true, className: 'msp-form-control', onClick: this.toggleVisibility, flex: true, title: cell.state.isHidden ? 'Show' : 'Hide' }), _jsx(IconButton, { svg: DeleteOutlinedSvg, small: true, className: 'msp-form-control', onClick: this.delete, flex: true, title: 'Delete', toggleState: false }), _jsx(IconButton, { svg: MoreHorizSvg, className: 'msp-form-control', onClick: this.toggleUpdate, flex: true, title: 'Actions', toggleState: this.state.showUpdate })] }), obj.id), this.state.showUpdate && cell.parent && _jsx(_Fragment, { children: _jsxs("div", __assign({ className: 'msp-accent-offset' }, { children: [_jsx(ActionMenu, { items: this.actions, onSelect: this.selectAction, noOffset: true }), _jsx(ExpandGroup, __assign({ header: 'Options', noOffset: true }, { children: _jsx(UpdateTransformControl, { state: cell.parent, transform: cell.transform, customHeader: 'none', autoHideApply: true }) }))] })) })] });
     };
     return MeasurementEntry;
 }(PurePluginUIComponent));

package/lib/mol-plugin-ui/structure/quick-styles.js

@@ -27,7 +27,7 @@ var StructureQuickStylesControls = /** @class */ (function (_super) {
         };
     };
     StructureQuickStylesControls.prototype.renderControls = function () {
-        return _jsx(_Fragment, { children: _jsx(QuickStyles, {}, void 0) }, void 0);
+        return _jsx(_Fragment, { children: _jsx(QuickStyles, {}) });
     };
     return StructureQuickStylesControls;
 }(CollapsableControls));
@@ -120,7 +120,7 @@ var QuickStyles = /** @class */ (function (_super) {
     };
     QuickStyles.prototype.render = function () {
         var _this = this;
-        return _jsxs("div", __assign({ className: 'msp-flex-row' }, { children: [_jsx(Button, __assign({ noOverflow: true, title: 'Applies default representation preset. Set outline and occlusion effects to defaults.', onClick: function () { return _this.default(); }, style: { width: 'auto' } }, { children: "Default" }), void 0), _jsx(Button, __assign({ noOverflow: true, title: 'Applies no representation preset. Enables outline and occlusion effects. Enables ignore-light representation parameter.', onClick: function () { return _this.stylized(); }, style: { width: 'auto' } }, { children: "Stylized" }), void 0), _jsx(Button, __assign({ noOverflow: true, title: 'Applies illustrative representation preset. Enables outline and occlusion effects. Enables ignore-light parameter.', onClick: function () { return _this.illustrative(); }, style: { width: 'auto' } }, { children: "Illustrative" }), void 0)] }), void 0);
+        return _jsxs("div", __assign({ className: 'msp-flex-row' }, { children: [_jsx(Button, __assign({ noOverflow: true, title: 'Applies default representation preset. Set outline and occlusion effects to defaults.', onClick: function () { return _this.default(); }, style: { width: 'auto' } }, { children: "Default" })), _jsx(Button, __assign({ noOverflow: true, title: 'Applies no representation preset. Enables outline and occlusion effects. Enables ignore-light representation parameter.', onClick: function () { return _this.stylized(); }, style: { width: 'auto' } }, { children: "Stylized" })), _jsx(Button, __assign({ noOverflow: true, title: 'Applies illustrative representation preset. Enables outline and occlusion effects. Enables ignore-light parameter.', onClick: function () { return _this.illustrative(); }, style: { width: 'auto' } }, { children: "Illustrative" }))] }));
     };
     return QuickStyles;
 }(PurePluginUIComponent));

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

@@ -40,7 +40,7 @@ var ToggleSelectionModeButton = /** @class */ (function (_super) {
         var style = this.props.inline
             ? { background: 'transparent', width: 'auto', height: 'auto', lineHeight: 'unset' }
             : { background: 'transparent' };
-        return _jsx(IconButton, { svg: SelectionModeSvg, onClick: this._toggleSelMode, title: 'Toggle Selection Mode', style: style, toggleState: this.plugin.selectionMode }, void 0);
+        return _jsx(IconButton, { svg: SelectionModeSvg, onClick: this._toggleSelMode, title: 'Toggle Selection Mode', style: style, toggleState: this.plugin.selectionMode });
     };
     return ToggleSelectionModeButton;
 }(PurePluginUIComponent));
@@ -219,13 +219,13 @@ var StructureSelectionActionsControls = /** @class */ (function (_super) {
             : 'Some mistakes of the past can be undone.';
         var children = void 0;
         if (this.state.action && !this.state.helper) {
-            children = _jsxs(_Fragment, { children: [(this.state.action && this.state.action !== 'theme' && this.state.action !== 'add-component' && this.state.action !== 'help') && _jsxs("div", __assign({ className: 'msp-selection-viewport-controls-actions' }, { children: [_jsx(ActionMenu, { header: ActionHeader.get(this.state.action), title: 'Click to close.', items: this.queries, onSelect: this.selectQuery, noOffset: true }, void 0), _jsx(ActionMenu, { items: this.helpers, onSelect: this.selectHelper, noOffset: true }, void 0)] }), void 0), this.state.action === 'theme' && _jsx("div", __assign({ className: 'msp-selection-viewport-controls-actions' }, { children: _jsx(ControlGroup, __assign({ header: 'Theme', title: 'Click to close.', initialExpanded: true, hideExpander: true, hideOffset: true, onHeaderClick: this.toggleTheme, topRightIcon: CloseSvg }, { children: _jsx(ApplyThemeControls, { onApply: this.toggleTheme }, void 0) }), void 0) }), void 0), this.state.action === 'add-component' && _jsx("div", __assign({ className: 'msp-selection-viewport-controls-actions' }, { children: _jsx(ControlGroup, __assign({ header: 'Add Component', title: 'Click to close.', initialExpanded: true, hideExpander: true, hideOffset: true, onHeaderClick: this.toggleAddComponent, topRightIcon: CloseSvg }, { children: _jsx(AddComponentControls, { onApply: this.toggleAddComponent, forSelection: true }, void 0) }), void 0) }), void 0), this.state.action === 'help' && _jsx("div", __assign({ className: 'msp-selection-viewport-controls-actions' }, { children: _jsxs(ControlGroup, __assign({ header: 'Help', title: 'Click to close.', initialExpanded: true, hideExpander: true, hideOffset: true, onHeaderClick: this.toggleHelp, topRightIcon: CloseSvg, maxHeight: '300px' }, { children: [_jsx(HelpGroup, __assign({ header: 'Selection Operations' }, { children: _jsxs(HelpText, { children: ["Use ", _jsx(Icon, { svg: UnionSvg, inline: true }, void 0), " ", _jsx(Icon, { svg: SubtractSvg, inline: true }, void 0), " ", _jsx(Icon, { svg: IntersectSvg, inline: true }, void 0), " ", _jsx(Icon, { svg: SetSvg, inline: true }, void 0), " to modify the selection."] }, void 0) }), void 0), _jsx(HelpGroup, __assign({ header: 'Representation Operations' }, { children: _jsxs(HelpText, { children: ["Use ", _jsx(Icon, { svg: BrushSvg, inline: true }, void 0), " ", _jsx(Icon, { svg: CubeOutlineSvg, inline: true }, void 0), " ", _jsx(Icon, { svg: RemoveSvg, inline: true }, void 0), " ", _jsx(Icon, { svg: RestoreSvg, inline: true }, void 0), " to color, create components, remove from components, or undo actions."] }, void 0) }), void 0), _jsx(ViewportHelpContent, { selectOnly: true }, void 0)] }), void 0) }), void 0)] }, void 0);
+            children = _jsxs(_Fragment, { children: [(this.state.action && this.state.action !== 'theme' && this.state.action !== 'add-component' && this.state.action !== 'help') && _jsxs("div", __assign({ className: 'msp-selection-viewport-controls-actions' }, { children: [_jsx(ActionMenu, { header: ActionHeader.get(this.state.action), title: 'Click to close.', items: this.queries, onSelect: this.selectQuery, noOffset: true }), _jsx(ActionMenu, { items: this.helpers, onSelect: this.selectHelper, noOffset: true })] })), this.state.action === 'theme' && _jsx("div", __assign({ className: 'msp-selection-viewport-controls-actions' }, { children: _jsx(ControlGroup, __assign({ header: 'Theme', title: 'Click to close.', initialExpanded: true, hideExpander: true, hideOffset: true, onHeaderClick: this.toggleTheme, topRightIcon: CloseSvg }, { children: _jsx(ApplyThemeControls, { onApply: this.toggleTheme }) })) })), this.state.action === 'add-component' && _jsx("div", __assign({ className: 'msp-selection-viewport-controls-actions' }, { children: _jsx(ControlGroup, __assign({ header: 'Add Component', title: 'Click to close.', initialExpanded: true, hideExpander: true, hideOffset: true, onHeaderClick: this.toggleAddComponent, topRightIcon: CloseSvg }, { children: _jsx(AddComponentControls, { onApply: this.toggleAddComponent, forSelection: true }) })) })), this.state.action === 'help' && _jsx("div", __assign({ className: 'msp-selection-viewport-controls-actions' }, { children: _jsxs(ControlGroup, __assign({ header: 'Help', title: 'Click to close.', initialExpanded: true, hideExpander: true, hideOffset: true, onHeaderClick: this.toggleHelp, topRightIcon: CloseSvg, maxHeight: '300px' }, { children: [_jsx(HelpGroup, __assign({ header: 'Selection Operations' }, { children: _jsxs(HelpText, { children: ["Use ", _jsx(Icon, { svg: UnionSvg, inline: true }), " ", _jsx(Icon, { svg: SubtractSvg, inline: true }), " ", _jsx(Icon, { svg: IntersectSvg, inline: true }), " ", _jsx(Icon, { svg: SetSvg, inline: true }), " to modify the selection."] }) })), _jsx(HelpGroup, __assign({ header: 'Representation Operations' }, { children: _jsxs(HelpText, { children: ["Use ", _jsx(Icon, { svg: BrushSvg, inline: true }), " ", _jsx(Icon, { svg: CubeOutlineSvg, inline: true }), " ", _jsx(Icon, { svg: RemoveSvg, inline: true }), " ", _jsx(Icon, { svg: RestoreSvg, inline: true }), " to color, create components, remove from components, or undo actions."] }) })), _jsx(ViewportHelpContent, { selectOnly: true })] })) }))] });
         }
         else if (ActionHeader.has(this.state.action) && this.state.helper === 'residue-list') {
             var close_1 = function () { return _this.setState({ action: void 0, helper: void 0 }); };
-            children = _jsx("div", __assign({ className: 'msp-selection-viewport-controls-actions' }, { children: _jsx(ControlGroup, __assign({ header: 'Atom/Residue Identifier List', title: 'Click to close.', initialExpanded: true, hideExpander: true, hideOffset: true, onHeaderClick: close_1, topRightIcon: CloseSvg }, { children: _jsx(ResidueListSelectionHelper, { modifier: this.state.action, plugin: this.plugin, close: close_1 }, void 0) }), void 0) }), void 0);
+            children = _jsx("div", __assign({ className: 'msp-selection-viewport-controls-actions' }, { children: _jsx(ControlGroup, __assign({ header: 'Atom/Residue Identifier List', title: 'Click to close.', initialExpanded: true, hideExpander: true, hideOffset: true, onHeaderClick: close_1, topRightIcon: CloseSvg }, { children: _jsx(ResidueListSelectionHelper, { modifier: this.state.action, plugin: this.plugin, close: close_1 }) })) }));
         }
-        return _jsxs(_Fragment, { children: [_jsxs("div", __assign({ className: 'msp-flex-row', style: { background: 'none' } }, { children: [_jsx(PureSelectControl, { title: "Picking Level for selecting and highlighting", param: StructureSelectionParams.granularity, name: 'granularity', value: granularity, onChange: this.setGranuality, isDisabled: this.isDisabled }, void 0), _jsx(ToggleButton, { icon: UnionSvg, title: "".concat(ActionHeader.get('add'), ". Hold shift key to keep menu open."), toggle: this.toggleAdd, isSelected: this.state.action === 'add', disabled: this.isDisabled }, void 0), _jsx(ToggleButton, { icon: SubtractSvg, title: "".concat(ActionHeader.get('remove'), ". Hold shift key to keep menu open."), toggle: this.toggleRemove, isSelected: this.state.action === 'remove', disabled: this.isDisabled }, void 0), _jsx(ToggleButton, { icon: IntersectSvg, title: "".concat(ActionHeader.get('intersect'), ". Hold shift key to keep menu open."), toggle: this.toggleIntersect, isSelected: this.state.action === 'intersect', disabled: this.isDisabled }, void 0), _jsx(ToggleButton, { icon: SetSvg, title: "".concat(ActionHeader.get('set'), ". Hold shift key to keep menu open."), toggle: this.toggleSet, isSelected: this.state.action === 'set', disabled: this.isDisabled }, void 0), _jsx(ToggleButton, { icon: BrushSvg, title: 'Apply Theme to Selection', toggle: this.toggleTheme, isSelected: this.state.action === 'theme', disabled: this.isDisabled, style: { marginLeft: '10px' } }, void 0), _jsx(ToggleButton, { icon: CubeOutlineSvg, title: 'Create Component of Selection with Representation', toggle: this.toggleAddComponent, isSelected: this.state.action === 'add-component', disabled: this.isDisabled }, void 0), _jsx(IconButton, { svg: RemoveSvg, title: 'Remove/subtract Selection from all Components', onClick: this.subtract, disabled: this.isDisabled }, void 0), _jsx(IconButton, { svg: RestoreSvg, onClick: this.undo, disabled: !this.state.canUndo || this.isDisabled, title: undoTitle }, void 0), _jsx(ToggleButton, { icon: HelpOutlineSvg, title: 'Show/hide help', toggle: this.toggleHelp, style: { marginLeft: '10px' }, isSelected: this.state.action === 'help' }, void 0), _jsx(IconButton, { svg: CancelOutlinedSvg, title: 'Turn selection mode off', onClick: this.turnOff }, void 0)] }), void 0), children] }, void 0);
+        return _jsxs(_Fragment, { children: [_jsxs("div", __assign({ className: 'msp-flex-row', style: { background: 'none' } }, { children: [_jsx(PureSelectControl, { title: "Picking Level for selecting and highlighting", param: StructureSelectionParams.granularity, name: 'granularity', value: granularity, onChange: this.setGranuality, isDisabled: this.isDisabled }), _jsx(ToggleButton, { icon: UnionSvg, title: "".concat(ActionHeader.get('add'), ". Hold shift key to keep menu open."), toggle: this.toggleAdd, isSelected: this.state.action === 'add', disabled: this.isDisabled }), _jsx(ToggleButton, { icon: SubtractSvg, title: "".concat(ActionHeader.get('remove'), ". Hold shift key to keep menu open."), toggle: this.toggleRemove, isSelected: this.state.action === 'remove', disabled: this.isDisabled }), _jsx(ToggleButton, { icon: IntersectSvg, title: "".concat(ActionHeader.get('intersect'), ". Hold shift key to keep menu open."), toggle: this.toggleIntersect, isSelected: this.state.action === 'intersect', disabled: this.isDisabled }), _jsx(ToggleButton, { icon: SetSvg, title: "".concat(ActionHeader.get('set'), ". Hold shift key to keep menu open."), toggle: this.toggleSet, isSelected: this.state.action === 'set', disabled: this.isDisabled }), _jsx(ToggleButton, { icon: BrushSvg, title: 'Apply Theme to Selection', toggle: this.toggleTheme, isSelected: this.state.action === 'theme', disabled: this.isDisabled, style: { marginLeft: '10px' } }), _jsx(ToggleButton, { icon: CubeOutlineSvg, title: 'Create Component of Selection with Representation', toggle: this.toggleAddComponent, isSelected: this.state.action === 'add-component', disabled: this.isDisabled }), _jsx(IconButton, { svg: RemoveSvg, title: 'Remove/subtract Selection from all Components', onClick: this.subtract, disabled: this.isDisabled }), _jsx(IconButton, { svg: RestoreSvg, onClick: this.undo, disabled: !this.state.canUndo || this.isDisabled, title: undoTitle }), _jsx(ToggleButton, { icon: HelpOutlineSvg, title: 'Show/hide help', toggle: this.toggleHelp, style: { marginLeft: '10px' }, isSelected: this.state.action === 'help' }), _jsx(IconButton, { svg: CancelOutlinedSvg, title: 'Turn selection mode off', onClick: this.turnOff })] })), children] });
     };
     return StructureSelectionActionsControls;
 }(PluginUIComponent));
@@ -296,7 +296,7 @@ var StructureSelectionStatsControls = /** @class */ (function (_super) {
         var empty = stats.structureCount === 0 || stats.elementCount === 0;
         if (empty && this.props.hideOnEmpty)
             return null;
-        return _jsx(_Fragment, { children: _jsxs("div", __assign({ className: 'msp-flex-row' }, { children: [_jsx(Button, __assign({ noOverflow: true, onClick: this.focus, title: 'Click to Focus Selection', disabled: empty, onMouseEnter: this.highlight, onMouseLeave: this.clearHighlight, style: { textAlignLast: !empty ? 'left' : void 0 } }, { children: this.stats }), void 0), !empty && _jsx(IconButton, { svg: CancelOutlinedSvg, onClick: this.clear, title: 'Clear', className: 'msp-form-control', flex: true }, void 0)] }), void 0) }, void 0);
+        return _jsx(_Fragment, { children: _jsxs("div", __assign({ className: 'msp-flex-row' }, { children: [_jsx(Button, __assign({ noOverflow: true, onClick: this.focus, title: 'Click to Focus Selection', disabled: empty, onMouseEnter: this.highlight, onMouseLeave: this.clearHighlight, style: { textAlignLast: !empty ? 'left' : void 0 } }, { children: this.stats })), !empty && _jsx(IconButton, { svg: CancelOutlinedSvg, onClick: this.clear, title: 'Clear', className: 'msp-form-control', flex: true })] })) });
     };
     return StructureSelectionStatsControls;
 }(PluginUIComponent));
@@ -321,7 +321,7 @@ var ApplyThemeControls = /** @class */ (function (_super) {
         configurable: true
     });
     ApplyThemeControls.prototype.render = function () {
-        return _jsxs(_Fragment, { children: [_jsx(ParameterControls, { params: this.params, values: this.state.values, onChangeValues: this.paramsChanged }, void 0), _jsx(Button, __assign({ icon: BrushSvg, className: 'msp-btn-commit msp-btn-commit-on', onClick: this.apply, style: { marginTop: '1px' } }, { children: "Apply Theme" }), void 0)] }, void 0);
+        return _jsxs(_Fragment, { children: [_jsx(ParameterControls, { params: this.params, values: this.state.values, onChangeValues: this.paramsChanged }), _jsx(Button, __assign({ icon: BrushSvg, className: 'msp-btn-commit msp-btn-commit-on', onClick: this.apply, style: { marginTop: '1px' } }, { children: "Apply Theme" }))] });
     };
     return ApplyThemeControls;
 }(PurePluginUIComponent));
@@ -346,5 +346,5 @@ function ResidueListSelectionHelper(_a) {
             plugin.log.error('Failed to create selection');
         }
     };
-    return _jsxs(_Fragment, { children: [_jsx(ParameterControls, { params: ResidueListIdTypeParams, values: state, onChangeValues: setState, onEnter: apply }, void 0), _jsxs(Button, __assign({ className: 'msp-btn-commit msp-btn-commit-on', disabled: state.identifiers.trim().length === 0, onClick: apply, style: { marginTop: '1px' } }, { children: [capitalize(modifier), " Selection"] }), void 0)] }, void 0);
+    return _jsxs(_Fragment, { children: [_jsx(ParameterControls, { params: ResidueListIdTypeParams, values: state, onChangeValues: setState, onEnter: apply }), _jsxs(Button, __assign({ className: 'msp-btn-commit msp-btn-commit-on', disabled: state.identifiers.trim().length === 0, onClick: apply, style: { marginTop: '1px' } }, { children: [capitalize(modifier), " Selection"] }))] });
 }

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

@@ -289,7 +289,7 @@ var StructureSourceControls = /** @class */ (function (_super) {
             var params = (_a = m.cell.params) === null || _a === void 0 ? void 0 : _a.definition;
             if (!params)
                 return null;
-            return _jsx(ParameterControls, { params: params, values: (_b = m.cell.params) === null || _b === void 0 ? void 0 : _b.values, onChangeValues: this.updateStructureModel, isDisabled: this.state.isBusy }, void 0);
+            return _jsx(ParameterControls, { params: params, values: (_b = m.cell.params) === null || _b === void 0 ? void 0 : _b.values, onChangeValues: this.updateStructureModel, isDisabled: this.state.isBusy });
         },
         enumerable: false,
         configurable: true
@@ -304,7 +304,7 @@ var StructureSourceControls = /** @class */ (function (_super) {
             var params = (_a = s.cell.params) === null || _a === void 0 ? void 0 : _a.definition;
             if (!params || !s.cell.parent)
                 return null;
-            return _jsx(UpdateTransformControl, { state: s.cell.parent, transform: s.cell.transform, customHeader: 'none', customUpdate: this.updateStructure, noMargin: true, autoHideApply: true }, void 0);
+            return _jsx(UpdateTransformControl, { state: s.cell.parent, transform: s.cell.transform, customHeader: 'none', customUpdate: this.updateStructure, noMargin: true, autoHideApply: true });
         },
         enumerable: false,
         configurable: true
@@ -320,7 +320,7 @@ var StructureSourceControls = /** @class */ (function (_super) {
             var t = StateSelection.tryFindDecorator(this.plugin.state.data, pivot.cell.transform.ref, StateTransforms.Model.TransformStructureConformation);
             if (!t)
                 return;
-            return _jsx(ExpandGroup, __assign({ header: "Conformation Transform" }, { children: _jsx(UpdateTransformControl, { state: t.parent, transform: t.transform, customHeader: 'none', noMargin: true, autoHideApply: true }, void 0) }), void 0);
+            return _jsx(ExpandGroup, __assign({ header: "Conformation Transform" }, { children: _jsx(UpdateTransformControl, { state: t.parent, transform: t.transform, customHeader: 'none', noMargin: true, autoHideApply: true }) }));
         },
         enumerable: false,
         configurable: true
@@ -329,7 +329,7 @@ var StructureSourceControls = /** @class */ (function (_super) {
         var disabled = this.state.isBusy || this.isEmpty;
         var presets = this.presetActions;
         var label = this.label;
-        return _jsxs(_Fragment, { children: [_jsxs("div", __assign({ className: 'msp-flex-row', style: { marginTop: '1px' } }, { children: [_jsx(Button, __assign({ noOverflow: true, flex: true, onClick: this.toggleHierarchy, disabled: disabled, title: label }, { children: label }), void 0), presets.length > 0 && _jsx(IconButton, { svg: BookmarksOutlinedSvg, className: 'msp-form-control', flex: '40px', onClick: this.togglePreset, title: 'Apply a structure presets to the current hierarchy.', toggleState: this.state.show === 'presets', disabled: disabled }, void 0)] }), void 0), this.state.show === 'hierarchy' && _jsx(ActionMenu, { items: this.hierarchyItems, onSelect: this.selectHierarchy, multiselect: true }, void 0), this.state.show === 'presets' && _jsx(ActionMenu, { items: presets, onSelect: this.applyPreset }, void 0), this.modelIndex, this.structureType, this.transform, _jsxs("div", __assign({ style: { marginTop: '6px' } }, { children: [_jsx(StructureFocusControls, {}, void 0), _jsx(StructureSelectionStatsControls, { hideOnEmpty: true }, void 0)] }), void 0)] }, void 0);
+        return _jsxs(_Fragment, { children: [_jsxs("div", __assign({ className: 'msp-flex-row', style: { marginTop: '1px' } }, { children: [_jsx(Button, __assign({ noOverflow: true, flex: true, onClick: this.toggleHierarchy, disabled: disabled, title: label }, { children: label })), presets.length > 0 && _jsx(IconButton, { svg: BookmarksOutlinedSvg, className: 'msp-form-control', flex: '40px', onClick: this.togglePreset, title: 'Apply a structure presets to the current hierarchy.', toggleState: this.state.show === 'presets', disabled: disabled })] })), this.state.show === 'hierarchy' && _jsx(ActionMenu, { items: this.hierarchyItems, onSelect: this.selectHierarchy, multiselect: true }), this.state.show === 'presets' && _jsx(ActionMenu, { items: presets, onSelect: this.applyPreset }), this.modelIndex, this.structureType, this.transform, _jsxs("div", __assign({ style: { marginTop: '6px' } }, { children: [_jsx(StructureFocusControls, {}), _jsx(StructureSelectionStatsControls, { hideOnEmpty: true })] }))] });
     };
     return StructureSourceControls;
 }(CollapsableControls));

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

@@ -42,7 +42,7 @@ var StructureSuperpositionControls = /** @class */ (function (_super) {
         });
     };
     StructureSuperpositionControls.prototype.renderControls = function () {
-        return _jsx(_Fragment, { children: _jsx(SuperpositionControls, {}, void 0) }, void 0);
+        return _jsx(_Fragment, { children: _jsx(SuperpositionControls, {}) });
     };
     return StructureSuperpositionControls;
 }(CollapsableControls));
@@ -274,16 +274,16 @@ var SuperpositionControls = /** @class */ (function (_super) {
     };
     SuperpositionControls.prototype.lociEntry = function (e, idx) {
         var _this = this;
-        return _jsx("div", __assign({ className: 'msp-flex-row' }, { children: _jsx(Button, __assign({ noOverflow: true, title: 'Click to focus. Hover to highlight.', onClick: function () { return _this.focusLoci(e.loci); }, style: { width: 'auto', textAlign: 'left' }, onMouseEnter: function () { return _this.highlight(e.loci); }, onMouseLeave: function () { return _this.plugin.managers.interactivity.lociHighlights.clearHighlights(); } }, { children: _jsx("span", { dangerouslySetInnerHTML: { __html: e.label } }, void 0) }), void 0) }), idx);
+        return _jsx("div", __assign({ className: 'msp-flex-row' }, { children: _jsx(Button, __assign({ noOverflow: true, title: 'Click to focus. Hover to highlight.', onClick: function () { return _this.focusLoci(e.loci); }, style: { width: 'auto', textAlign: 'left' }, onMouseEnter: function () { return _this.highlight(e.loci); }, onMouseLeave: function () { return _this.plugin.managers.interactivity.lociHighlights.clearHighlights(); } }, { children: _jsx("span", { dangerouslySetInnerHTML: { __html: e.label } }) })) }), idx);
     };
     SuperpositionControls.prototype.historyEntry = function (e, idx) {
         var _this = this;
         var history = this.plugin.managers.structure.selection.additionsHistory;
-        return _jsxs("div", __assign({ className: 'msp-flex-row' }, { children: [_jsxs(Button, __assign({ noOverflow: true, title: 'Click to focus. Hover to highlight.', onClick: function () { return _this.focusLoci(e.loci); }, style: { width: 'auto', textAlign: 'left' }, onMouseEnter: function () { return _this.highlight(e.loci); }, onMouseLeave: function () { return _this.plugin.managers.interactivity.lociHighlights.clearHighlights(); } }, { children: [idx, ". ", _jsx("span", { dangerouslySetInnerHTML: { __html: e.label } }, void 0)] }), void 0), history.length > 1 && _jsx(IconButton, { svg: ArrowUpwardSvg, small: true, className: 'msp-form-control', onClick: function () { return _this.moveHistory(e, 'up'); }, flex: '20px', title: 'Move up' }, void 0), history.length > 1 && _jsx(IconButton, { svg: ArrowDownwardSvg, small: true, className: 'msp-form-control', onClick: function () { return _this.moveHistory(e, 'down'); }, flex: '20px', title: 'Move down' }, void 0), _jsx(IconButton, { svg: DeleteOutlinedSvg, small: true, className: 'msp-form-control', onClick: function () { return _this.plugin.managers.structure.selection.modifyHistory(e, 'remove'); }, flex: true, title: 'Remove' }, void 0)] }), e.id);
+        return _jsxs("div", __assign({ className: 'msp-flex-row' }, { children: [_jsxs(Button, __assign({ noOverflow: true, title: 'Click to focus. Hover to highlight.', onClick: function () { return _this.focusLoci(e.loci); }, style: { width: 'auto', textAlign: 'left' }, onMouseEnter: function () { return _this.highlight(e.loci); }, onMouseLeave: function () { return _this.plugin.managers.interactivity.lociHighlights.clearHighlights(); } }, { children: [idx, ". ", _jsx("span", { dangerouslySetInnerHTML: { __html: e.label } })] })), history.length > 1 && _jsx(IconButton, { svg: ArrowUpwardSvg, small: true, className: 'msp-form-control', onClick: function () { return _this.moveHistory(e, 'up'); }, flex: '20px', title: 'Move up' }), history.length > 1 && _jsx(IconButton, { svg: ArrowDownwardSvg, small: true, className: 'msp-form-control', onClick: function () { return _this.moveHistory(e, 'down'); }, flex: '20px', title: 'Move down' }), _jsx(IconButton, { svg: DeleteOutlinedSvg, small: true, className: 'msp-form-control', onClick: function () { return _this.plugin.managers.structure.selection.modifyHistory(e, 'remove'); }, flex: true, title: 'Remove' })] }), e.id);
     };
     SuperpositionControls.prototype.atomsLociEntry = function (e, idx) {
         var _this = this;
-        return _jsxs("div", { children: [_jsx("div", __assign({ className: 'msp-control-group-header' }, { children: _jsx("div", __assign({ className: 'msp-no-overflow', title: e.label }, { children: e.label }), void 0) }), void 0), _jsx("div", __assign({ className: 'msp-control-offset' }, { children: e.atoms.map(function (h, i) { return _this.historyEntry(h, i); }) }), void 0)] }, idx);
+        return _jsxs("div", { children: [_jsx("div", __assign({ className: 'msp-control-group-header' }, { children: _jsx("div", __assign({ className: 'msp-no-overflow', title: e.label }, { children: e.label })) })), _jsx("div", __assign({ className: 'msp-control-offset' }, { children: e.atoms.map(function (h, i) { return _this.historyEntry(h, i); }) }))] }, idx);
     };
     Object.defineProperty(SuperpositionControls.prototype, "chainEntries", {
         get: function () {
@@ -346,18 +346,18 @@ var SuperpositionControls = /** @class */ (function (_super) {
     SuperpositionControls.prototype.addByChains = function () {
         var _this = this;
         var entries = this.chainEntries;
-        return _jsxs(_Fragment, { children: [entries.length > 0 && _jsx("div", __assign({ className: 'msp-control-offset' }, { children: entries.map(function (e, i) { return _this.lociEntry(e, i); }) }), void 0), entries.length < 2 && _jsx("div", __assign({ className: 'msp-control-offset msp-help-text' }, { children: _jsxs("div", __assign({ className: 'msp-help-description' }, { children: [_jsx(Icon, { svg: HelpOutlineSvg, inline: true }, void 0), "Add 2 or more selections (toggle ", _jsx(ToggleSelectionModeButton, { inline: true }, void 0), " mode) from separate structures. Selections must be limited to single polymer chains or residues therein."] }), void 0) }), void 0), entries.length > 1 && _jsx(Button, __assign({ title: 'Superpose structures by selected chains.', className: 'msp-btn-commit msp-btn-commit-on', onClick: this.superposeChains, style: { marginTop: '1px' } }, { children: "Superpose" }), void 0)] }, void 0);
+        return _jsxs(_Fragment, { children: [entries.length > 0 && _jsx("div", __assign({ className: 'msp-control-offset' }, { children: entries.map(function (e, i) { return _this.lociEntry(e, i); }) })), entries.length < 2 && _jsx("div", __assign({ className: 'msp-control-offset msp-help-text' }, { children: _jsxs("div", __assign({ className: 'msp-help-description' }, { children: [_jsx(Icon, { svg: HelpOutlineSvg, inline: true }), "Add 2 or more selections (toggle ", _jsx(ToggleSelectionModeButton, { inline: true }), " mode) from separate structures. Selections must be limited to single polymer chains or residues therein."] })) })), entries.length > 1 && _jsx(Button, __assign({ title: 'Superpose structures by selected chains.', className: 'msp-btn-commit msp-btn-commit-on', onClick: this.superposeChains, style: { marginTop: '1px' } }, { children: "Superpose" }))] });
     };
     SuperpositionControls.prototype.addByAtoms = function () {
         var _this = this;
         var entries = this.atomEntries;
-        return _jsxs(_Fragment, { children: [entries.length > 0 && _jsx("div", __assign({ className: 'msp-control-offset' }, { children: entries.map(function (e, i) { return _this.atomsLociEntry(e, i); }) }), void 0), entries.length < 2 && _jsx("div", __assign({ className: 'msp-control-offset msp-help-text' }, { children: _jsxs("div", __assign({ className: 'msp-help-description' }, { children: [_jsx(Icon, { svg: HelpOutlineSvg, inline: true }, void 0), "Add 1 or more selections (toggle ", _jsx(ToggleSelectionModeButton, { inline: true }, void 0), " mode) from separate structures. Selections must be limited to single atoms."] }), void 0) }), void 0), entries.length > 1 && _jsx(Button, __assign({ title: 'Superpose structures by selected atoms.', className: 'msp-btn-commit msp-btn-commit-on', onClick: this.superposeAtoms, style: { marginTop: '1px' } }, { children: "Superpose" }), void 0)] }, void 0);
+        return _jsxs(_Fragment, { children: [entries.length > 0 && _jsx("div", __assign({ className: 'msp-control-offset' }, { children: entries.map(function (e, i) { return _this.atomsLociEntry(e, i); }) })), entries.length < 2 && _jsx("div", __assign({ className: 'msp-control-offset msp-help-text' }, { children: _jsxs("div", __assign({ className: 'msp-help-description' }, { children: [_jsx(Icon, { svg: HelpOutlineSvg, inline: true }), "Add 1 or more selections (toggle ", _jsx(ToggleSelectionModeButton, { inline: true }), " mode) from separate structures. Selections must be limited to single atoms."] })) })), entries.length > 1 && _jsx(Button, __assign({ title: 'Superpose structures by selected atoms.', className: 'msp-btn-commit msp-btn-commit-on', onClick: this.superposeAtoms, style: { marginTop: '1px' } }, { children: "Superpose" }))] });
     };
     SuperpositionControls.prototype.superposeByDbMapping = function () {
-        return _jsx(_Fragment, { children: _jsx(Button, __assign({ icon: SuperposeChainsSvg, title: 'Superpose structures using intersection of residues from SIFTS UNIPROT mapping.', className: 'msp-btn msp-btn-block', onClick: this.superposeDb, style: { marginTop: '1px' }, disabled: this.state.isBusy }, { children: "Uniprot" }), void 0) }, void 0);
+        return _jsx(_Fragment, { children: _jsx(Button, __assign({ icon: SuperposeChainsSvg, title: 'Superpose structures using intersection of residues from SIFTS UNIPROT mapping.', className: 'msp-btn msp-btn-block', onClick: this.superposeDb, style: { marginTop: '1px' }, disabled: this.state.isBusy }, { children: "Uniprot" })) });
     };
     SuperpositionControls.prototype.render = function () {
-        return _jsxs(_Fragment, { children: [_jsxs("div", __assign({ className: 'msp-flex-row' }, { children: [_jsx(ToggleButton, { icon: SuperposeChainsSvg, label: 'Chains', toggle: this.toggleByChains, isSelected: this.state.action === 'byChains', disabled: this.state.isBusy }, void 0), _jsx(ToggleButton, { icon: SuperposeAtomsSvg, label: 'Atoms', toggle: this.toggleByAtoms, isSelected: this.state.action === 'byAtoms', disabled: this.state.isBusy }, void 0), this.state.canUseDb && this.superposeByDbMapping(), _jsx(ToggleButton, { icon: TuneSvg, label: '', title: 'Options', toggle: this.toggleOptions, isSelected: this.state.action === 'options', disabled: this.state.isBusy, style: { flex: '0 0 40px', padding: 0 } }, void 0)] }), void 0), this.state.action === 'byChains' && this.addByChains(), this.state.action === 'byAtoms' && this.addByAtoms(), this.state.action === 'options' && _jsx("div", __assign({ className: 'msp-control-offset' }, { children: _jsx(ParameterControls, { params: StructureSuperpositionParams, values: this.state.options, onChangeValues: this.setOptions, isDisabled: this.state.isBusy }, void 0) }), void 0)] }, void 0);
+        return _jsxs(_Fragment, { children: [_jsxs("div", __assign({ className: 'msp-flex-row' }, { children: [_jsx(ToggleButton, { icon: SuperposeChainsSvg, label: 'Chains', toggle: this.toggleByChains, isSelected: this.state.action === 'byChains', disabled: this.state.isBusy }), _jsx(ToggleButton, { icon: SuperposeAtomsSvg, label: 'Atoms', toggle: this.toggleByAtoms, isSelected: this.state.action === 'byAtoms', disabled: this.state.isBusy }), this.state.canUseDb && this.superposeByDbMapping(), _jsx(ToggleButton, { icon: TuneSvg, label: '', title: 'Options', toggle: this.toggleOptions, isSelected: this.state.action === 'options', disabled: this.state.isBusy, style: { flex: '0 0 40px', padding: 0 } })] })), this.state.action === 'byChains' && this.addByChains(), this.state.action === 'byAtoms' && this.addByAtoms(), this.state.action === 'options' && _jsx("div", __assign({ className: 'msp-control-offset' }, { children: _jsx(ParameterControls, { params: StructureSuperpositionParams, values: this.state.options, onChangeValues: this.setOptions, isDisabled: this.state.isBusy }) }))] });
     };
     return SuperpositionControls;
 }(PurePluginUIComponent));

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

@@ -76,7 +76,7 @@ var VolumeStreamingControls = /** @class */ (function (_super) {
             : rootCell && ((_b = rootCell.obj) === null || _b === void 0 ? void 0 : _b.data.entries.length) === 0
                 ? { header: 'Error Enabling', icon: ErrorSvg, title: 'No Entry for Streaming Found' }
                 : { header: 'Enable', icon: CheckSvg, title: 'Enable' };
-        return _jsx(ApplyActionControl, { state: pivot.cell.parent, action: InitVolumeStreaming, initiallyCollapsed: true, nodeRef: pivot.cell.transform.ref, simpleApply: simpleApply }, void 0);
+        return _jsx(ApplyActionControl, { state: pivot.cell.parent, action: InitVolumeStreaming, initiallyCollapsed: true, nodeRef: pivot.cell.transform.ref, simpleApply: simpleApply });
     };
     VolumeStreamingControls.prototype.renderParams = function () {
         var _a, _b, _c, _d, _e;
@@ -84,7 +84,7 @@ var VolumeStreamingControls = /** @class */ (function (_super) {
         if (!pivot.cell.parent)
             return null;
         var bindings = ((_b = (_a = pivot.volumeStreaming) === null || _a === void 0 ? void 0 : _a.cell.transform.params) === null || _b === void 0 ? void 0 : _b.entry.params.view.name) === 'selection-box' && ((_e = (_d = (_c = this.plugin.state.behaviors.cells.get(FocusLoci.id)) === null || _c === void 0 ? void 0 : _c.params) === null || _d === void 0 ? void 0 : _d.values) === null || _e === void 0 ? void 0 : _e.bindings);
-        return _jsxs(_Fragment, { children: [_jsx(UpdateTransformControl, { state: pivot.cell.parent, transform: pivot.volumeStreaming.cell.transform, customHeader: 'none', noMargin: true }, void 0), bindings && _jsx(ExpandGroup, __assign({ header: 'Controls Help' }, { children: _jsx(BindingsHelp, { bindings: bindings }, void 0) }), void 0)] }, void 0);
+        return _jsxs(_Fragment, { children: [_jsx(UpdateTransformControl, { state: pivot.cell.parent, transform: pivot.volumeStreaming.cell.transform, customHeader: 'none', noMargin: true }), bindings && _jsx(ExpandGroup, __assign({ header: 'Controls Help' }, { children: _jsx(BindingsHelp, { bindings: bindings }) }))] });
     };
     VolumeStreamingControls.prototype.renderControls = function () {
         var pivot = this.pivot;
@@ -267,7 +267,7 @@ var VolumeSourceControls = /** @class */ (function (_super) {
         var disabled = this.state.isBusy || this.isEmpty;
         var label = this.label;
         var selected = this.plugin.managers.volume.hierarchy.selection;
-        return _jsxs(_Fragment, { children: [_jsxs("div", __assign({ className: 'msp-flex-row', style: { marginTop: '1px' } }, { children: [_jsx(Button, __assign({ noOverflow: true, flex: true, onClick: this.toggleHierarchy, disabled: disabled, title: label }, { children: label }), void 0), !this.isEmpty && selected && _jsx(IconButton, { svg: AddSvg, onClick: this.toggleAddRepr, title: 'Apply a structure presets to the current hierarchy.', toggleState: this.state.show === 'add-repr', disabled: disabled }, void 0)] }), void 0), this.state.show === 'hierarchy' && _jsx(ActionMenu, { items: this.hierarchyItems, onSelect: this.selectCurrent }, void 0), this.state.show === 'add-repr' && _jsx(ActionMenu, { items: this.addActions, onSelect: this.selectAdd }, void 0), selected && selected.representations.length > 0 && _jsx("div", __assign({ style: { marginTop: '6px' } }, { children: selected.representations.map(function (r) { return _jsx(VolumeRepresentationControls, { representation: r }, r.cell.transform.ref); }) }), void 0)] }, void 0);
+        return _jsxs(_Fragment, { children: [_jsxs("div", __assign({ className: 'msp-flex-row', style: { marginTop: '1px' } }, { children: [_jsx(Button, __assign({ noOverflow: true, flex: true, onClick: this.toggleHierarchy, disabled: disabled, title: label }, { children: label })), !this.isEmpty && selected && _jsx(IconButton, { svg: AddSvg, onClick: this.toggleAddRepr, title: 'Apply a structure presets to the current hierarchy.', toggleState: this.state.show === 'add-repr', disabled: disabled })] })), this.state.show === 'hierarchy' && _jsx(ActionMenu, { items: this.hierarchyItems, onSelect: this.selectCurrent }), this.state.show === 'add-repr' && _jsx(ActionMenu, { items: this.addActions, onSelect: this.selectAdd }), selected && selected.representations.length > 0 && _jsx("div", __assign({ style: { marginTop: '6px' } }, { children: selected.representations.map(function (r) { return _jsx(VolumeRepresentationControls, { representation: r }, r.cell.transform.ref); }) }))] });
     };
     return VolumeSourceControls;
 }(CollapsableControls));
@@ -314,7 +314,7 @@ var VolumeRepresentationControls = /** @class */ (function (_super) {
     VolumeRepresentationControls.prototype.render = function () {
         var _a, _b, _c;
         var repr = this.props.representation.cell;
-        return _jsxs(_Fragment, { children: [_jsxs("div", __assign({ className: 'msp-flex-row' }, { children: [_jsxs(Button, __assign({ noOverflow: true, className: 'msp-control-button-label', title: "".concat((_a = repr.obj) === null || _a === void 0 ? void 0 : _a.label, ". Click to focus."), onClick: this.focus, onMouseEnter: this.highlight, onMouseLeave: this.clearHighlight, style: { textAlign: 'left' } }, { children: [(_b = repr.obj) === null || _b === void 0 ? void 0 : _b.label, _jsx("small", __assign({ className: 'msp-25-lower-contrast-text', style: { float: 'right' } }, { children: (_c = repr.obj) === null || _c === void 0 ? void 0 : _c.description }), void 0)] }), void 0), _jsx(IconButton, { svg: repr.state.isHidden ? VisibilityOffOutlinedSvg : VisibilityOutlinedSvg, toggleState: false, onClick: this.toggleVisible, title: "".concat(repr.state.isHidden ? 'Show' : 'Hide', " component"), small: true, className: 'msp-form-control', flex: true }, void 0), _jsx(IconButton, { svg: DeleteOutlinedSvg, onClick: this.remove, title: 'Remove', small: true }, void 0), _jsx(IconButton, { svg: MoreHorizSvg, onClick: this.toggleUpdate, title: 'Actions', toggleState: this.state.action === 'update' }, void 0)] }), void 0), this.state.action === 'update' && !!repr.parent && _jsx("div", __assign({ style: { marginBottom: '6px' }, className: 'msp-accent-offset' }, { children: _jsx(UpdateTransformControl, { state: repr.parent, transform: repr.transform, customHeader: 'none', noMargin: true }, 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((_a = repr.obj) === null || _a === void 0 ? void 0 : _a.label, ". Click to focus."), onClick: this.focus, onMouseEnter: this.highlight, onMouseLeave: this.clearHighlight, style: { textAlign: 'left' } }, { children: [(_b = repr.obj) === null || _b === void 0 ? void 0 : _b.label, _jsx("small", __assign({ className: 'msp-25-lower-contrast-text', style: { float: 'right' } }, { children: (_c = repr.obj) === null || _c === void 0 ? void 0 : _c.description }))] })), _jsx(IconButton, { svg: repr.state.isHidden ? VisibilityOffOutlinedSvg : VisibilityOutlinedSvg, toggleState: false, onClick: this.toggleVisible, title: "".concat(repr.state.isHidden ? 'Show' : 'Hide', " component"), small: true, className: 'msp-form-control', flex: true }), _jsx(IconButton, { svg: DeleteOutlinedSvg, onClick: this.remove, title: 'Remove', small: true }), _jsx(IconButton, { svg: MoreHorizSvg, onClick: this.toggleUpdate, title: 'Actions', toggleState: this.state.action === 'update' })] })), this.state.action === 'update' && !!repr.parent && _jsx("div", __assign({ style: { marginBottom: '6px' }, className: 'msp-accent-offset' }, { children: _jsx(UpdateTransformControl, { state: repr.parent, transform: repr.transform, customHeader: 'none', noMargin: true }) }))] });
     };
     return VolumeRepresentationControls;
 }(PurePluginUIComponent));

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

@@ -30,7 +30,7 @@ var BackgroundTaskProgress = /** @class */ (function (_super) {
         });
     };
     BackgroundTaskProgress.prototype.render = function () {
-        return _jsx("div", __assign({ className: 'msp-background-tasks' }, { children: this.state.tracked.valueSeq().map(function (e) { return _jsx(ProgressEntry, { event: e }, e.id); }) }), void 0);
+        return _jsx("div", __assign({ className: 'msp-background-tasks' }, { children: this.state.tracked.valueSeq().map(function (e) { return _jsx(ProgressEntry, { event: e }, e.id); }) }));
     };
     return BackgroundTaskProgress;
 }(PluginUIComponent));
@@ -49,11 +49,11 @@ var ProgressEntry = /** @class */ (function (_super) {
         var subtaskCount = countSubtasks(this.props.event.progress.root) - 1;
         var pr = root.progress.isIndeterminate
             ? void 0
-            : _jsxs(_Fragment, { children: ["[", root.progress.current, "/", root.progress.max, "]"] }, void 0);
+            : _jsxs(_Fragment, { children: ["[", root.progress.current, "/", root.progress.max, "]"] });
         var subtasks = subtaskCount > 0
-            ? _jsxs(_Fragment, { children: ["[", subtaskCount, " subtask(s)]"] }, void 0)
+            ? _jsxs(_Fragment, { children: ["[", subtaskCount, " subtask(s)]"] })
             : void 0;
-        return _jsx("div", __assign({ className: 'msp-task-state' }, { children: _jsxs("div", { children: [root.progress.canAbort && _jsx(IconButton, { svg: CancelSvg, onClick: this.abort, title: 'Abort' }, void 0), _jsxs("div", { children: [root.progress.message, " ", pr, " ", subtasks] }, void 0)] }, void 0) }), void 0);
+        return _jsx("div", __assign({ className: 'msp-task-state' }, { children: _jsxs("div", { children: [root.progress.canAbort && _jsx(IconButton, { svg: CancelSvg, onClick: this.abort, title: 'Abort' }), _jsxs("div", { children: [root.progress.message, " ", pr, " ", subtasks] })] }) }));
     };
     return ProgressEntry;
 }(PluginUIComponent));
@@ -87,7 +87,7 @@ var OverlayTaskProgress = /** @class */ (function (_super) {
     OverlayTaskProgress.prototype.render = function () {
         if (this.state.tracked.size === 0)
             return null;
-        return _jsx("div", __assign({ className: 'msp-overlay-tasks' }, { children: this.state.tracked.valueSeq().map(function (e) { return _jsx(ProgressEntry, { event: e }, e.id); }) }), void 0);
+        return _jsx("div", __assign({ className: 'msp-overlay-tasks' }, { children: this.state.tracked.valueSeq().map(function (e) { return _jsx(ProgressEntry, { event: e }, e.id); }) }));
     };
     return OverlayTaskProgress;
 }(PluginUIComponent));

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

@@ -24,9 +24,9 @@ var ToastEntry = /** @class */ (function (_super) {
         var _this = this;
         var entry = this.props.entry;
         var message = typeof entry.message === 'string'
-            ? _jsx("div", { dangerouslySetInnerHTML: { __html: entry.message } }, void 0)
-            : _jsx("div", { children: _jsx(entry.message, {}, void 0) }, void 0);
-        return _jsxs("div", __assign({ className: 'msp-toast-entry' }, { children: [_jsx("div", __assign({ className: 'msp-toast-title', onClick: function () { return _this.hide(); } }, { children: entry.title }), void 0), _jsx("div", __assign({ className: 'msp-toast-message' }, { children: message }), void 0), _jsx("div", { className: 'msp-toast-clear' }, void 0), _jsx("div", __assign({ className: 'msp-toast-hide' }, { children: _jsx(IconButton, { svg: CancelSvg, onClick: this.hide, title: 'Hide', className: 'msp-no-hover-outline' }, void 0) }), void 0)] }), void 0);
+            ? _jsx("div", { dangerouslySetInnerHTML: { __html: entry.message } })
+            : _jsx("div", { children: _jsx(entry.message, {}) });
+        return _jsxs("div", __assign({ className: 'msp-toast-entry' }, { children: [_jsx("div", __assign({ className: 'msp-toast-title', onClick: function () { return _this.hide(); } }, { children: entry.title })), _jsx("div", __assign({ className: 'msp-toast-message' }, { children: message })), _jsx("div", { className: 'msp-toast-clear' }), _jsx("div", __assign({ className: 'msp-toast-hide' }, { children: _jsx(IconButton, { svg: CancelSvg, onClick: this.hide, title: 'Hide', className: 'msp-no-hover-outline' }) }))] }));
     };
     return ToastEntry;
 }(PluginUIComponent));
@@ -46,7 +46,7 @@ var Toasts = /** @class */ (function (_super) {
         var entries = [];
         state.entries.forEach(function (t, k) { return entries.push(t); });
         entries.sort(function (x, y) { return x.serialNumber - y.serialNumber; });
-        return _jsx("div", __assign({ className: 'msp-toast-container' }, { children: entries.map(function (e) { return _jsx(ToastEntry, { entry: e }, e.serialNumber); }) }), void 0);
+        return _jsx("div", __assign({ className: 'msp-toast-container' }, { children: entries.map(function (e) { return _jsx(ToastEntry, { entry: e }, e.serialNumber); }) }));
     };
     return Toasts;
 }(PluginUIComponent));

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

@@ -39,15 +39,15 @@ var ViewportCanvas = /** @class */ (function (_super) {
     ViewportCanvas.prototype.renderMissing = function () {
         if (this.props.noWebGl) {
             var C = this.props.noWebGl;
-            return _jsx(C, {}, void 0);
+            return _jsx(C, {});
         }
-        return _jsx("div", __assign({ className: 'msp-no-webgl' }, { children: _jsxs("div", { children: [_jsx("p", { children: _jsx("b", { children: "WebGL does not seem to be available." }, void 0) }, void 0), _jsx("p", { children: "This can be caused by an outdated browser, graphics card driver issue, or bad weather. Sometimes, just restarting the browser helps." }, void 0), _jsxs("p", { children: ["For a list of supported browsers, refer to ", _jsx("a", __assign({ href: 'http://caniuse.com/#feat=webgl', target: '_blank' }, { children: "http://caniuse.com/#feat=webgl" }), void 0), "."] }, void 0)] }, void 0) }), void 0);
+        return _jsx("div", __assign({ className: 'msp-no-webgl' }, { children: _jsxs("div", { children: [_jsx("p", { children: _jsx("b", { children: "WebGL does not seem to be available." }) }), _jsx("p", { children: "This can be caused by an outdated browser, graphics card driver issue, or bad weather. Sometimes, just restarting the browser helps." }), _jsxs("p", { children: ["For a list of supported browsers, refer to ", _jsx("a", __assign({ href: 'http://caniuse.com/#feat=webgl', target: '_blank' }, { children: "http://caniuse.com/#feat=webgl" })), "."] })] }) }));
     };
     ViewportCanvas.prototype.render = function () {
         if (this.state.noWebGl)
             return this.renderMissing();
         var Logo = this.props.logo;
-        return _jsxs("div", __assign({ className: this.props.parentClassName || 'msp-viewport', style: this.props.parentStyle }, { children: [_jsx("div", __assign({ className: this.props.hostClassName || 'msp-viewport-host3d', style: this.props.hostStyle, ref: this.container }, { children: _jsx("canvas", { ref: this.canvas }, void 0) }), void 0), (this.state.showLogo && Logo) && _jsx(Logo, {}, void 0)] }), void 0);
+        return _jsxs("div", __assign({ className: this.props.parentClassName || 'msp-viewport', style: this.props.parentStyle }, { children: [_jsx("div", __assign({ className: this.props.hostClassName || 'msp-viewport-host3d', style: this.props.hostStyle, ref: this.container }, { children: _jsx("canvas", { ref: this.canvas }) })), (this.state.showLogo && Logo) && _jsx(Logo, {})] }));
     };
     return ViewportCanvas;
 }(PluginUIComponent));