molstar 3.3.1 → 3.6.0

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

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

@@ -26,12 +26,12 @@ var BindingsHelp = /** @class */ (function (_super) {
         return _jsx(_Fragment, { children: bindingsList.map(function (value) {
                 var name = value[0], binding = value[1];
                 return !Binding.isEmpty(binding)
-                    ? _jsxs("div", __assign({ style: { marginBottom: '6px' } }, { children: [_jsx("b", { children: binding.action }, void 0), _jsx("br", {}, void 0), _jsx("span", { dangerouslySetInnerHTML: { __html: Binding.format(binding, name) } }, void 0)] }), name)
+                    ? _jsxs("div", __assign({ style: { marginBottom: '6px' } }, { children: [_jsx("b", { children: binding.action }), _jsx("br", {}), _jsx("span", { dangerouslySetInnerHTML: { __html: Binding.format(binding, name) } })] }), name)
                     : null;
-            }) }, void 0);
+            }) });
     };
     BindingsHelp.prototype.render = function () {
-        return _jsx(HelpText, { children: this.getBindingComponents() }, void 0);
+        return _jsx(HelpText, { children: this.getBindingComponents() });
     };
     return BindingsHelp;
 }(React.PureComponent));
@@ -42,7 +42,7 @@ var HelpText = /** @class */ (function (_super) {
         return _super !== null && _super.apply(this, arguments) || this;
     }
     HelpText.prototype.render = function () {
-        return _jsx("div", __assign({ className: 'msp-help-text' }, { children: _jsx("div", { children: this.props.children }, void 0) }), void 0);
+        return _jsx("div", __assign({ className: 'msp-help-text' }, { children: _jsx("div", { children: this.props.children }) }));
     };
     return HelpText;
 }(React.PureComponent));
@@ -59,13 +59,13 @@ var HelpGroup = /** @class */ (function (_super) {
         return _this;
     }
     HelpGroup.prototype.render = function () {
-        return _jsxs("div", __assign({ className: 'msp-control-group-wrapper' }, { children: [_jsx("div", __assign({ className: 'msp-control-group-header' }, { children: _jsxs(Button, __assign({ onClick: this.toggleExpanded }, { children: [_jsx(Icon, { svg: this.state.isExpanded ? ArrowDropDownSvg : ArrowRightSvg }, void 0), this.props.header] }), void 0) }), void 0), this.state.isExpanded && _jsx("div", __assign({ className: 'msp-control-offset', style: { display: this.state.isExpanded ? 'block' : 'none' } }, { children: this.props.children }), void 0)] }), void 0);
+        return _jsxs("div", __assign({ className: 'msp-control-group-wrapper' }, { children: [_jsx("div", __assign({ className: 'msp-control-group-header' }, { children: _jsxs(Button, __assign({ onClick: this.toggleExpanded }, { children: [_jsx(Icon, { svg: this.state.isExpanded ? ArrowDropDownSvg : ArrowRightSvg }), this.props.header] })) })), this.state.isExpanded && _jsx("div", __assign({ className: 'msp-control-offset', style: { display: this.state.isExpanded ? 'block' : 'none' } }, { children: this.props.children }))] }));
     };
     return HelpGroup;
 }(React.PureComponent));
 export { HelpGroup };
 function HelpSection(props) {
-    return _jsx("div", __assign({ className: 'msp-simple-help-section' }, { children: props.header }), void 0);
+    return _jsx("div", __assign({ className: 'msp-simple-help-section' }, { children: props.header }));
 }
 var ViewportHelpContent = /** @class */ (function (_super) {
     __extends(ViewportHelpContent, _super);
@@ -83,7 +83,7 @@ var ViewportHelpContent = /** @class */ (function (_super) {
             if (bindings)
                 Object.assign(interactionBindings, bindings);
         });
-        return _jsxs(_Fragment, { children: [(!this.props.selectOnly && this.plugin.canvas3d) && _jsx(HelpGroup, __assign({ header: 'Moving in 3D' }, { children: _jsx(BindingsHelp, { bindings: this.plugin.canvas3d.props.trackball.bindings }, void 0) }), 'trackball'), _jsx(HelpGroup, __assign({ header: 'Mouse Controls' }, { children: _jsx(BindingsHelp, { bindings: interactionBindings }, void 0) }), 'interactions')] }, void 0);
+        return _jsxs(_Fragment, { children: [(!this.props.selectOnly && this.plugin.canvas3d) && _jsx(HelpGroup, __assign({ header: 'Moving in 3D' }, { children: _jsx(BindingsHelp, { bindings: this.plugin.canvas3d.props.trackball.bindings }) }), 'trackball'), _jsx(HelpGroup, __assign({ header: 'Mouse Controls' }, { children: _jsx(BindingsHelp, { bindings: interactionBindings }) }), 'interactions')] });
     };
     return ViewportHelpContent;
 }(PluginUIComponent));
@@ -112,7 +112,7 @@ var HelpContent = /** @class */ (function (_super) {
         var selectToggleTriggers = this.getTriggerFor(SelectLoci, 'clickSelectToggle');
         var focusTriggers = this.getTriggerFor(FocusLoci, 'clickFocus');
         // TODO: interactive help, for example for density
-        return _jsxs("div", { children: [_jsx(HelpSection, { header: 'Interface Controls' }, void 0), _jsxs(HelpGroup, __assign({ header: 'Inline Help' }, { children: [_jsx(HelpText, { children: "Many user interface elements show a little questionmark icon when hovered over. Clicking the icon toggles the display of an inline help text." }, void 0), _jsx(HelpText, { children: "Tooltips may provide additional information on a user interface element and are shown when hovering over it with the mouse." }, void 0)] }), void 0), _jsx(HelpGroup, __assign({ header: 'Selections' }, { children: _jsxs(HelpText, { children: ["The viewer allows changing colors and representations for selections of atoms, residues or chains. Selections can be created by", _jsxs("ul", __assign({ style: { paddingLeft: '20px' } }, { children: [_jsxs("li", { children: ["picking elements on the 3D canvas or the sequence view using the mouse, e.g. toggle selection using ", selectToggleTriggers, " (for more see help section on ", _jsx("i", { children: "Mouse Controls" }, void 0), ")"] }, void 0), _jsxs("li", { children: ["using the ", _jsx("i", { children: "Add" }, void 0), ", ", _jsx("i", { children: "Remove" }, void 0), " and ", _jsx("i", { children: "Only" }, void 0), " dropdown buttons in the ", _jsx("i", { children: "Manage Selection" }, void 0), " panel which allow modifing the current selection by predefined sets"] }, void 0)] }), void 0)] }, void 0) }), void 0), _jsx(HelpGroup, __assign({ header: 'Coloring' }, { children: _jsxs(HelpText, { children: ["There are two ways to color structures. Every representation (e.g. cartoon or spacefill) has a color theme which can be changed using the dropdown for each representation in the ", _jsx("i", { children: "Structure Settings" }, void 0), " panel. Additionally any selection atoms, residues or chains can by given a custom color. For that, first select the parts of the structure to be colored (see help section on ", _jsx("i", { children: "Selections" }, void 0), ") and, second, choose a color from the color dropdown botton in the ", _jsx("i", { children: "Selection" }, void 0), " row of the ", _jsx("i", { children: "Change Representation" }, void 0), " panel. The theme color can be seen as a base color that is overpainted by the custom color. Custom colors can be removed for a selection with the 'Clear' option in the color dropdown."] }, void 0) }), void 0), _jsx(HelpGroup, __assign({ header: 'Representations' }, { children: _jsxs(HelpText, { children: ["Structures can be shown with many different representations (e.g. cartoon or spacefill). The ", _jsx("i", { children: "Change Representation" }, void 0), " panel offers a collection of predefined styles which can be applied using the ", _jsx("i", { children: "Preset" }, void 0), " dropdown button. Additionally any selection atoms, residues or chains can by shown with a custom representation. For that, first select the parts of the structure to be mofified (see help section on ", _jsx("i", { children: "Selections" }, void 0), ") and, second, choose a representation to hide or show from the ", _jsx("i", { children: "Show" }, void 0), " and ", _jsx("i", { children: "Hide" }, void 0), " dropdown bottons in the ", _jsx("i", { children: "Selection" }, void 0), " row of the ", _jsx("i", { children: "Change Representation" }, void 0), " panel. The ", _jsx("i", { children: "Everything" }, void 0), " row applies the action to the whole structure instead of the current selection."] }, void 0) }), void 0), _jsx(HelpGroup, __assign({ header: 'Surroundings' }, { children: _jsxs(HelpText, { children: ["To show the surroundings of a residue or ligand, click it in the 3D scene or in the sequence widget using ", focusTriggers, "."] }, void 0) }), void 0), _jsx(HelpSection, { header: 'How-to Guides' }, void 0), _jsx(HelpGroup, __assign({ header: 'Create an Image' }, { children: _jsxs(HelpText, { children: [_jsxs("p", { children: ["Use the ", _jsx(Icon, { svg: CameraSvg }, void 0), " icon in the viewport to bring up the screenshot controls."] }, void 0), _jsxs("p", { children: ["To adjust the size of the image, use the ", _jsx("i", { children: "Resolution" }, void 0), " dropdown."] }, void 0)] }, void 0) }), void 0), _jsx(HelpSection, { header: 'Mouse Controls' }, void 0), _jsx(ViewportHelpContent, {}, void 0)] }, void 0);
+        return _jsxs("div", { children: [_jsx(HelpSection, { header: 'Interface Controls' }), _jsxs(HelpGroup, __assign({ header: 'Inline Help' }, { children: [_jsx(HelpText, { children: "Many user interface elements show a little questionmark icon when hovered over. Clicking the icon toggles the display of an inline help text." }), _jsx(HelpText, { children: "Tooltips may provide additional information on a user interface element and are shown when hovering over it with the mouse." })] })), _jsx(HelpGroup, __assign({ header: 'Selections' }, { children: _jsxs(HelpText, { children: ["The viewer allows changing colors and representations for selections of atoms, residues or chains. Selections can be created by", _jsxs("ul", __assign({ style: { paddingLeft: '20px' } }, { children: [_jsxs("li", { children: ["picking elements on the 3D canvas or the sequence view using the mouse, e.g. toggle selection using ", selectToggleTriggers, " (for more see help section on ", _jsx("i", { children: "Mouse Controls" }), ")"] }), _jsxs("li", { children: ["using the ", _jsx("i", { children: "Add" }), ", ", _jsx("i", { children: "Remove" }), " and ", _jsx("i", { children: "Only" }), " dropdown buttons in the ", _jsx("i", { children: "Manage Selection" }), " panel which allow modifing the current selection by predefined sets"] })] }))] }) })), _jsx(HelpGroup, __assign({ header: 'Coloring' }, { children: _jsxs(HelpText, { children: ["There are two ways to color structures. Every representation (e.g. cartoon or spacefill) has a color theme which can be changed using the dropdown for each representation in the ", _jsx("i", { children: "Structure Settings" }), " panel. Additionally any selection atoms, residues or chains can by given a custom color. For that, first select the parts of the structure to be colored (see help section on ", _jsx("i", { children: "Selections" }), ") and, second, choose a color from the color dropdown botton in the ", _jsx("i", { children: "Selection" }), " row of the ", _jsx("i", { children: "Change Representation" }), " panel. The theme color can be seen as a base color that is overpainted by the custom color. Custom colors can be removed for a selection with the 'Clear' option in the color dropdown."] }) })), _jsx(HelpGroup, __assign({ header: 'Representations' }, { children: _jsxs(HelpText, { children: ["Structures can be shown with many different representations (e.g. cartoon or spacefill). The ", _jsx("i", { children: "Change Representation" }), " panel offers a collection of predefined styles which can be applied using the ", _jsx("i", { children: "Preset" }), " dropdown button. Additionally any selection atoms, residues or chains can by shown with a custom representation. For that, first select the parts of the structure to be mofified (see help section on ", _jsx("i", { children: "Selections" }), ") and, second, choose a representation to hide or show from the ", _jsx("i", { children: "Show" }), " and ", _jsx("i", { children: "Hide" }), " dropdown bottons in the ", _jsx("i", { children: "Selection" }), " row of the ", _jsx("i", { children: "Change Representation" }), " panel. The ", _jsx("i", { children: "Everything" }), " row applies the action to the whole structure instead of the current selection."] }) })), _jsx(HelpGroup, __assign({ header: 'Surroundings' }, { children: _jsxs(HelpText, { children: ["To show the surroundings of a residue or ligand, click it in the 3D scene or in the sequence widget using ", focusTriggers, "."] }) })), _jsx(HelpSection, { header: 'How-to Guides' }), _jsx(HelpGroup, __assign({ header: 'Create an Image' }, { children: _jsxs(HelpText, { children: [_jsxs("p", { children: ["Use the ", _jsx(Icon, { svg: CameraSvg }), " icon in the viewport to bring up the screenshot controls."] }), _jsxs("p", { children: ["To adjust the size of the image, use the ", _jsx("i", { children: "Resolution" }), " dropdown."] })] }) })), _jsx(HelpSection, { header: 'Mouse Controls' }), _jsx(ViewportHelpContent, {})] });
     };
     return HelpContent;
 }(PluginUIComponent));

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

@@ -77,7 +77,7 @@ var DownloadScreenshotControls = /** @class */ (function (_super) {
         var _this = this;
         var _a;
         var hasClipboardApi = !!((_a = navigator.clipboard) === null || _a === void 0 ? void 0 : _a.write);
-        return _jsxs("div", { children: [this.state.showPreview && _jsxs("div", __assign({ className: 'msp-image-preview' }, { children: [_jsx(ScreenshotPreview, { plugin: this.plugin }, void 0), _jsx(CropControls, { plugin: this.plugin }, void 0)] }), void 0), _jsxs("div", __assign({ className: 'msp-flex-row' }, { children: [!this.state.imageData && _jsx(Button, __assign({ icon: CopySvg, onClick: hasClipboardApi ? this.copy : this.copyImg, disabled: this.state.isDisabled }, { children: "Copy" }), void 0), this.state.imageData && _jsx(Button, __assign({ onClick: function () { return _this.setState({ imageData: void 0 }); }, disabled: this.state.isDisabled }, { children: "Clear" }), void 0), _jsx(Button, __assign({ icon: GetAppSvg, onClick: this.download, disabled: this.state.isDisabled }, { children: "Download" }), void 0)] }), void 0), this.state.imageData && _jsxs("div", __assign({ className: 'msp-row msp-copy-image-wrapper' }, { children: [_jsx("div", { children: "Right click below + Copy Image" }, void 0), _jsx("img", { src: this.state.imageData, style: { width: '100%', height: 32, display: 'block' } }, void 0)] }), void 0), _jsx(ScreenshotParams, { plugin: this.plugin, isDisabled: this.state.isDisabled }, void 0), _jsxs(ExpandGroup, __assign({ header: 'State' }, { children: [_jsx(StateExportImportControls, { onAction: this.props.close }, void 0), _jsx(ExpandGroup, __assign({ header: 'Save Options', initiallyExpanded: false, noOffset: true }, { children: _jsx(LocalStateSnapshotParams, {}, void 0) }), void 0)] }), void 0)] }, void 0);
+        return _jsxs("div", { children: [this.state.showPreview && _jsxs("div", __assign({ className: 'msp-image-preview' }, { children: [_jsx(ScreenshotPreview, { plugin: this.plugin }), _jsx(CropControls, { plugin: this.plugin })] })), _jsxs("div", __assign({ className: 'msp-flex-row' }, { children: [!this.state.imageData && _jsx(Button, __assign({ icon: CopySvg, onClick: hasClipboardApi ? this.copy : this.copyImg, disabled: this.state.isDisabled }, { children: "Copy" })), this.state.imageData && _jsx(Button, __assign({ onClick: function () { return _this.setState({ imageData: void 0 }); }, disabled: this.state.isDisabled }, { children: "Clear" })), _jsx(Button, __assign({ icon: GetAppSvg, onClick: this.download, disabled: this.state.isDisabled }, { children: "Download" }))] })), this.state.imageData && _jsxs("div", __assign({ className: 'msp-row msp-copy-image-wrapper' }, { children: [_jsx("div", { children: "Right click below + Copy Image" }), _jsx("img", { src: this.state.imageData, style: { width: '100%', height: 32, display: 'block' } })] })), _jsx(ScreenshotParams, { plugin: this.plugin, isDisabled: this.state.isDisabled }), _jsxs(ExpandGroup, __assign({ header: 'State' }, { children: [_jsx(StateExportImportControls, { onAction: this.props.close }), _jsx(ExpandGroup, __assign({ header: 'Save Options', initiallyExpanded: false, noOffset: true }, { children: _jsx(LocalStateSnapshotParams, {}) }))] }))] });
     };
     return DownloadScreenshotControls;
 }(PluginUIComponent));
@@ -86,7 +86,7 @@ function ScreenshotParams(_a) {
     var plugin = _a.plugin, isDisabled = _a.isDisabled;
     var helper = plugin.helpers.viewportScreenshot;
     var values = useBehavior(helper.behaviors.values);
-    return _jsx(ParameterControls, { params: helper.params, values: values, onChangeValues: function (v) { return helper.behaviors.values.next(v); }, isDisabled: isDisabled }, void 0);
+    return _jsx(ParameterControls, { params: helper.params, values: values, onChangeValues: function (v) { return helper.behaviors.values.next(v); }, isDisabled: isDisabled });
 }
 function CropControls(_a) {
     var plugin = _a.plugin;
@@ -95,5 +95,5 @@ function CropControls(_a) {
     useBehavior(helper === null || helper === void 0 ? void 0 : helper.behaviors.relativeCrop);
     if (!helper)
         return null;
-    return _jsxs("div", __assign({ style: { width: '100%', height: '24px', marginTop: '8px' } }, { children: [_jsx(ToggleButton, { icon: CropOrginalSvg, title: 'Auto-crop', inline: true, isSelected: cropParams.auto, style: { background: 'transparent', float: 'left', width: 'auto', height: '24px', lineHeight: '24px' }, toggle: function () { return helper.toggleAutocrop(); }, label: 'Auto-crop ' + (cropParams.auto ? 'On' : 'Off') }, void 0), !cropParams.auto && _jsx(Button, { icon: CropSvg, title: 'Crop', style: { background: 'transparent', float: 'right', height: '24px', lineHeight: '24px', width: '24px', padding: '0' }, onClick: function () { return helper.autocrop(); } }, void 0), !cropParams.auto && !helper.isFullFrame && _jsx(Button, { icon: CropFreeSvg, title: 'Reset Crop', style: { background: 'transparent', float: 'right', height: '24px', lineHeight: '24px', width: '24px', padding: '0' }, onClick: function () { return helper.resetCrop(); } }, void 0)] }), void 0);
+    return _jsxs("div", __assign({ style: { width: '100%', height: '24px', marginTop: '8px' } }, { children: [_jsx(ToggleButton, { icon: CropOrginalSvg, title: 'Auto-crop', inline: true, isSelected: cropParams.auto, style: { background: 'transparent', float: 'left', width: 'auto', height: '24px', lineHeight: '24px' }, toggle: function () { return helper.toggleAutocrop(); }, label: 'Auto-crop ' + (cropParams.auto ? 'On' : 'Off') }), !cropParams.auto && _jsx(Button, { icon: CropSvg, title: 'Crop', style: { background: 'transparent', float: 'right', height: '24px', lineHeight: '24px', width: '24px', padding: '0' }, onClick: function () { return helper.autocrop(); } }), !cropParams.auto && !helper.isFullFrame && _jsx(Button, { icon: CropFreeSvg, title: 'Reset Crop', style: { background: 'transparent', float: 'right', height: '24px', lineHeight: '24px', width: '24px', padding: '0' }, onClick: function () { return helper.resetCrop(); } })] }));
 }

package/lib/mol-plugin-ui/viewport/simple-settings.js

@@ -33,7 +33,7 @@ var SimpleSettingsControl = /** @class */ (function (_super) {
     SimpleSettingsControl.prototype.render = function () {
         if (!this.plugin.canvas3d)
             return null;
-        return _jsxs(_Fragment, { children: [_jsx(ParameterMappingControl, { mapping: SimpleSettingsMapping }, void 0), _jsx(ViewportHelpContent, {}, void 0)] }, void 0);
+        return _jsxs(_Fragment, { children: [_jsx(ParameterMappingControl, { mapping: SimpleSettingsMapping }), _jsx(ViewportHelpContent, {})] });
     };
     return SimpleSettingsControl;
 }(PluginUIComponent));

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

@@ -63,15 +63,15 @@ var ViewportControls = /** @class */ (function (_super) {
     };
     ViewportControls.prototype.icon = function (icon, onClick, title, isOn) {
         if (isOn === void 0) { isOn = true; }
-        return _jsx(IconButton, { svg: icon, toggleState: isOn, onClick: onClick, title: title, style: { background: 'transparent' } }, void 0);
+        return _jsx(IconButton, { svg: icon, toggleState: isOn, onClick: onClick, title: title, style: { background: 'transparent' } });
     };
     ViewportControls.prototype.render = function () {
-        return _jsxs("div", __assign({ className: 'msp-viewport-controls', onMouseMove: this.onMouseMove }, { children: [_jsxs("div", __assign({ className: 'msp-viewport-controls-buttons' }, { children: [_jsxs("div", { children: [_jsx("div", { className: 'msp-semi-transparent-background' }, void 0), this.icon(AutorenewSvg, this.resetCamera, 'Reset Camera')] }, void 0), _jsxs("div", { children: [_jsx("div", { className: 'msp-semi-transparent-background' }, void 0), this.icon(CameraOutlinedSvg, this.toggleScreenshotExpanded, 'Screenshot / State Snapshot', this.state.isScreenshotExpanded)] }, void 0), _jsxs("div", { children: [_jsx("div", { className: 'msp-semi-transparent-background' }, void 0), this.plugin.config.get(PluginConfig.Viewport.ShowControls) && this.icon(BuildOutlinedSvg, this.toggleControls, 'Toggle Controls Panel', this.plugin.layout.state.showControls), this.plugin.config.get(PluginConfig.Viewport.ShowExpand) && this.icon(FullscreenSvg, this.toggleExpanded, 'Toggle Expanded Viewport', this.plugin.layout.state.isExpanded), this.plugin.config.get(PluginConfig.Viewport.ShowSettings) && this.icon(TuneSvg, this.toggleSettingsExpanded, 'Settings / Controls Info', this.state.isSettingsExpanded)] }, void 0), this.plugin.config.get(PluginConfig.Viewport.ShowSelectionMode) && _jsxs("div", { children: [_jsx("div", { className: 'msp-semi-transparent-background' }, void 0), _jsx(ToggleSelectionModeButton, {}, void 0)] }, void 0)] }), void 0), this.state.isScreenshotExpanded && _jsx("div", __assign({ className: 'msp-viewport-controls-panel' }, { children: _jsx(ControlGroup, __assign({ header: 'Screenshot / State', title: 'Click to close.', initialExpanded: true, hideExpander: true, hideOffset: true, onHeaderClick: this.toggleScreenshotExpanded, topRightIcon: CloseSvg, noTopMargin: true, childrenClassName: 'msp-viewport-controls-panel-controls' }, { children: _jsx(DownloadScreenshotControls, { close: this.toggleScreenshotExpanded }, void 0) }), void 0) }), void 0), this.state.isSettingsExpanded && _jsx("div", __assign({ className: 'msp-viewport-controls-panel' }, { children: _jsx(ControlGroup, __assign({ header: 'Settings / Controls Info', title: 'Click to close.', initialExpanded: true, hideExpander: true, hideOffset: true, onHeaderClick: this.toggleSettingsExpanded, topRightIcon: CloseSvg, noTopMargin: true, childrenClassName: 'msp-viewport-controls-panel-controls' }, { children: _jsx(SimpleSettingsControl, {}, void 0) }), void 0) }), void 0)] }), void 0);
+        return _jsxs("div", __assign({ className: 'msp-viewport-controls', onMouseMove: this.onMouseMove }, { children: [_jsxs("div", __assign({ className: 'msp-viewport-controls-buttons' }, { children: [_jsxs("div", { children: [_jsx("div", { className: 'msp-semi-transparent-background' }), this.icon(AutorenewSvg, this.resetCamera, 'Reset Camera')] }), _jsxs("div", { children: [_jsx("div", { className: 'msp-semi-transparent-background' }), this.icon(CameraOutlinedSvg, this.toggleScreenshotExpanded, 'Screenshot / State Snapshot', this.state.isScreenshotExpanded)] }), _jsxs("div", { children: [_jsx("div", { className: 'msp-semi-transparent-background' }), this.plugin.config.get(PluginConfig.Viewport.ShowControls) && this.icon(BuildOutlinedSvg, this.toggleControls, 'Toggle Controls Panel', this.plugin.layout.state.showControls), this.plugin.config.get(PluginConfig.Viewport.ShowExpand) && this.icon(FullscreenSvg, this.toggleExpanded, 'Toggle Expanded Viewport', this.plugin.layout.state.isExpanded), this.plugin.config.get(PluginConfig.Viewport.ShowSettings) && this.icon(TuneSvg, this.toggleSettingsExpanded, 'Settings / Controls Info', this.state.isSettingsExpanded)] }), this.plugin.config.get(PluginConfig.Viewport.ShowSelectionMode) && _jsxs("div", { children: [_jsx("div", { className: 'msp-semi-transparent-background' }), _jsx(ToggleSelectionModeButton, {})] })] })), this.state.isScreenshotExpanded && _jsx("div", __assign({ className: 'msp-viewport-controls-panel' }, { children: _jsx(ControlGroup, __assign({ header: 'Screenshot / State', title: 'Click to close.', initialExpanded: true, hideExpander: true, hideOffset: true, onHeaderClick: this.toggleScreenshotExpanded, topRightIcon: CloseSvg, noTopMargin: true, childrenClassName: 'msp-viewport-controls-panel-controls' }, { children: _jsx(DownloadScreenshotControls, { close: this.toggleScreenshotExpanded }) })) })), this.state.isSettingsExpanded && _jsx("div", __assign({ className: 'msp-viewport-controls-panel' }, { children: _jsx(ControlGroup, __assign({ header: 'Settings / Controls Info', title: 'Click to close.', initialExpanded: true, hideExpander: true, hideOffset: true, onHeaderClick: this.toggleSettingsExpanded, topRightIcon: CloseSvg, noTopMargin: true, childrenClassName: 'msp-viewport-controls-panel-controls' }, { children: _jsx(SimpleSettingsControl, {}) })) }))] }));
     };
     return ViewportControls;
 }(PluginUIComponent));
 export { ViewportControls };
 export var Logo = function () {
-    return _jsx("a", { className: 'msp-logo', href: 'https://molstar.org', target: '_blank' }, void 0);
+    return _jsx("a", { className: 'msp-logo', href: 'https://molstar.org', target: '_blank' });
 };
-export var Viewport = function () { return _jsx(ViewportCanvas, { logo: Logo }, void 0); };
+export var Viewport = function () { return _jsx(ViewportCanvas, { logo: Logo }); };