molstar 3.3.1 → 3.4.0

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

package/lib/mol-script/language/parser.js

@@ -6,6 +6,7 @@
 import { MonadicParser as P } from '../../mol-util/monadic-parser';
 import { Expression } from './expression';
 import { MolScriptBuilder as B } from './builder';
+import { assertUnreachable } from '../../mol-util/type-helpers';
 export function parseMolScript(input) {
     return Language.parse(input);
 }
@@ -59,15 +60,15 @@ var Language;
                     case '[': return B.core.type.list(withoutComments(expr.nodes).map(visitExpr));
                     case '{': return B.core.type.set(withoutComments(expr.nodes).map(visitExpr));
                     case '(': {
+                        if (expr.nodes[0].kind === 'comment')
+                            throw new Error('Invalid expression');
                         var head = visitExpr(expr.nodes[0]);
                         return Expression.Apply(head, getArgs(expr.nodes));
                     }
+                    default: assertUnreachable(expr.bracket);
                 }
-                return 0;
-            }
-            default: {
-                throw new Error('should not happen');
             }
+            default: assertUnreachable(expr);
         }
     }
     function getArgs(nodes) {
@@ -98,6 +99,8 @@ var Language;
                 }
                 if (i >= _i)
                     throw new Error("There must be a value foolowed a named arg ':".concat(name_1, "'."));
+                if (nodes[i].kind === 'comment')
+                    throw new Error('Invalid expression');
                 args[name_1] = visitExpr(nodes[i]);
                 if (isNaN(+name_1))
                     allNumeric = false;

package/lib/mol-task/util/scheduler.d.ts

@@ -5,8 +5,8 @@
  */
 /// <reference types="node" />
 declare const Scheduler: {
-    setImmediate: ((callback: (...args: any[]) => void, ...args: any[]) => number) | typeof setImmediate;
-    clearImmediate: ((handle: number) => void) | typeof clearImmediate;
+    setImmediate: typeof setImmediate | ((callback: (...args: any[]) => void, ...args: any[]) => number);
+    clearImmediate: typeof clearImmediate | ((handle: number) => void);
     immediatePromise(): Promise<void>;
     delay<T>(timeout: number, value?: T | undefined): Promise<T>;
 };

package/lib/mol-task/util/scheduler.js

@@ -5,7 +5,7 @@
  */
 import { __spreadArray } from "tslib";
 function createImmediateActions() {
-    var global = (function () {
+    var thisGlobal = (function () {
         var _window = typeof window !== 'undefined' && window;
         var _self = typeof self !== 'undefined' && typeof WorkerGlobalScope !== 'undefined' && self instanceof WorkerGlobalScope && self;
         var _global = typeof global !== 'undefined' && global;
@@ -65,14 +65,14 @@ function createImmediateActions() {
         };
     }
     function canUsePostMessage() {
-        if (global && global.postMessage && !global.importScripts) {
+        if (thisGlobal && thisGlobal.postMessage && !thisGlobal.importScripts) {
             var postMessageIsAsynchronous_1 = true;
-            var oldOnMessage = global.onmessage;
-            global.onmessage = function () {
+            var oldOnMessage = thisGlobal.onmessage;
+            thisGlobal.onmessage = function () {
                 postMessageIsAsynchronous_1 = false;
             };
-            global.postMessage('', '*');
-            global.onmessage = oldOnMessage;
+            thisGlobal.postMessage('', '*');
+            thisGlobal.onmessage = oldOnMessage;
             return postMessageIsAsynchronous_1;
         }
     }
@@ -82,7 +82,7 @@ function createImmediateActions() {
         // * http://www.whatwg.org/specs/web-apps/current-work/multipage/comms.html#crossDocumentMessages
         var messagePrefix = 'setImmediate$' + Math.random() + '$';
         var onGlobalMessage = function (event) {
-            if (event.source === global &&
+            if (event.source === thisGlobal &&
                 typeof event.data === 'string' &&
                 event.data.indexOf(messagePrefix) === 0) {
                 runIfPresent(+event.data.slice(messagePrefix.length));

package/lib/mol-theme/color/hydrophobicity.js

@@ -45,8 +45,8 @@ export function HydrophobicityColorTheme(ctx, props) {
     var scale = ColorScale.create({
         listOrName: props.list.colors,
         domain: [max, min],
-        minLabel: 'Hydrophobic',
-        maxLabel: 'Hydrophilic'
+        minLabel: 'Hydrophilic',
+        maxLabel: 'Hydrophobic'
     });
     function color(location) {
         var compId;

package/lib/mol-util/data-source.js

@@ -93,6 +93,7 @@ function getCompression(name) {
         /\.zip$/i.test(name) ? DataCompressionMethod.Zip :
             DataCompressionMethod.None;
 }
+var reFilterPath = /^(__MACOSX|.DS_Store)/;
 function decompress(ctx, data, compression) {
     return __awaiter(this, void 0, void 0, function () {
         var _a, parsed, names;
@@ -111,7 +112,7 @@ function decompress(ctx, data, compression) {
                 case 3: return [4 /*yield*/, unzip(ctx, data.buffer)];
                 case 4:
                     parsed = _b.sent();
-                    names = Object.keys(parsed);
+                    names = Object.keys(parsed).filter(function (n) { return !reFilterPath.test(n); });
                     if (names.length !== 1)
                         throw new Error('can only decompress zip files with a single entry');
                     return [2 /*return*/, parsed[names[0]]];

package/lib/mol-util/file-info.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2018 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2018-2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
  *
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
@@ -11,8 +11,6 @@ export interface FileInfo {
     ext: string;
     base: string;
     dir: string;
-    compressed: string | boolean;
-    binary: boolean;
     protocol: string;
     query: string;
     src: FileInput;

package/lib/mol-util/file-info.js

@@ -1,16 +1,13 @@
 /**
- * Copyright (c) 2018 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2018-2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
  *
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
 // TODO only support compressed files for which uncompression support is available???
 // TODO store globally with decompression plugins?
 var compressedExtList = ['gz', 'zip'];
-// TODO store globally with parser plugins?
-var binaryExtList = ['bcif', 'ccp4', 'dcd'];
 export function getFileInfo(file) {
     var path;
-    var compressed;
     var protocol = '';
     if (file instanceof File) {
         path = file.name;
@@ -35,15 +32,10 @@ export function getFileInfo(file) {
     }
     var dir = path.substring(0, path.lastIndexOf('/') + 1);
     if (compressedExtList.includes(ext)) {
-        compressed = ext;
         var n = path.length - ext.length - 1;
         ext = (path.substr(0, n).split('.').pop() || '').toLowerCase();
         var m = base.length - ext.length - 1;
         base = base.substr(0, m);
     }
-    else {
-        compressed = false;
-    }
-    var binary = binaryExtList.includes(ext);
-    return { path: path, name: name, ext: ext, base: base, dir: dir, compressed: compressed, binary: binary, protocol: protocol, query: query, src: file };
+    return { path: path, name: name, ext: ext, base: base, dir: dir, protocol: protocol, query: query, src: file };
 }

package/lib/mol-util/index.d.ts

@@ -27,3 +27,4 @@ export declare const assign: (<T>(o: T, ...from: any[]) => T);
 export declare const merge: (<T>(source: T, ...rest: Partial<T>[]) => T);
 export declare function formatTime(d: Date): string;
 export declare function formatProgress(p: Progress): string;
+export declare function formatBytes(count: number): string;

package/lib/mol-util/index.js

@@ -200,3 +200,8 @@ export function formatProgress(p) {
     var x = (100 * tp.current / tp.max).toFixed(2);
     return "".concat(tp.message, " ").concat(x, "%");
 }
+export function formatBytes(count) {
+    var units = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+    var i = Math.floor(Math.log(count) / Math.log(1024));
+    return "".concat((count / Math.pow(1024, i)).toFixed(2), " ").concat(units[i]);
+}

package/lib/mol-util/zip/deflate.js

@@ -7,6 +7,7 @@
  * MIT License, Copyright (c) 2018 Photopea
  */
 import { __awaiter, __generator } from "tslib";
+import { assertUnreachable } from '../type-helpers';
 import { _hufTree } from './huffman';
 import { U, revCodes, makeCodes } from './util';
 function DeflateContext(data, out, opos, lvl) {
@@ -262,7 +263,7 @@ function _writeBlock(BFINAL, lits, li, ebits, data, o0, l0, out, pos) {
             pos = _codeTiny(dset, U.itree, out, pos);
         }
         else {
-            throw new Error("unknown BTYPE ".concat(BTYPE));
+            assertUnreachable(BTYPE);
         }
         var off = o0;
         for (var si = 0; si < li; si += 2) {

package/lib/mol-util/zip/zip.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2020 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2020-2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
  *
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  *
@@ -9,6 +9,12 @@
  * - added `ungzip`
  */
 import { RuntimeContext, Task } from '../../mol-task';
+export declare function Unzip(buf: ArrayBuffer, onlyNames?: boolean): Task<{
+    [k: string]: Uint8Array | {
+        size: number;
+        csize: number;
+    };
+}>;
 export declare function unzip(runtime: RuntimeContext, buf: ArrayBuffer, onlyNames?: boolean): Promise<{
     [k: string]: Uint8Array | {
         size: number;

package/lib/mol-util/zip/zip.js

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2020 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2020-2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
  *
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  *
@@ -14,6 +14,10 @@ import { crc, adler } from './checksum';
 import { _inflate } from './inflate';
 import { _deflateRaw } from './deflate';
 import { Task } from '../../mol-task';
+export function Unzip(buf, onlyNames) {
+    if (onlyNames === void 0) { onlyNames = false; }
+    return Task.create('Unzip', function (ctx) { return unzip(ctx, buf, onlyNames); });
+}
 export function unzip(runtime, buf, onlyNames) {
     if (onlyNames === void 0) { onlyNames = false; }
     return __awaiter(this, void 0, void 0, function () {

package/lib/servers/model/config.d.ts

@@ -53,7 +53,7 @@ declare const DefaultModelServerConfig: {
      *
      * /static query uses 'pdb-cif' and 'pdb-bcif' source names.
      */
-    sourceMap: ([string, string] | [string, string, "bcif" | "cif" | "cif.gz" | "bcif.gz"])[];
+    sourceMap: ([string, string] | [string, string, "cif" | "bcif" | "cif.gz" | "bcif.gz"])[];
 };
 export declare const ModelServerFetchFormats: readonly ["cif", "bcif", "cif.gz", "bcif.gz"];
 export declare type ModelServerFetchFormats = (typeof ModelServerFetchFormats)[number];
@@ -108,7 +108,7 @@ export declare const ModelServerConfig: {
      *
      * /static query uses 'pdb-cif' and 'pdb-bcif' source names.
      */
-    sourceMap: ([string, string] | [string, string, "bcif" | "cif" | "cif.gz" | "bcif.gz"])[];
+    sourceMap: ([string, string] | [string, string, "cif" | "bcif" | "cif.gz" | "bcif.gz"])[];
 };
 export declare const ModelServerConfigTemplate: ModelServerConfig;
 export declare function configureServer(): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "molstar",
-  "version": "3.3.1",
+  "version": "3.4.0",
   "description": "A comprehensive macromolecular library.",
   "homepage": "https://github.com/molstar/molstar#readme",
   "repository": {
@@ -94,38 +94,38 @@
     "@graphql-codegen/add": "^3.1.1",
     "@graphql-codegen/cli": "^2.6.2",
     "@graphql-codegen/time": "^3.1.1",
-    "@graphql-codegen/typescript": "^2.4.5",
+    "@graphql-codegen/typescript": "^2.4.7",
     "@graphql-codegen/typescript-graphql-files-modules": "^2.1.1",
-    "@graphql-codegen/typescript-graphql-request": "^4.3.7",
-    "@graphql-codegen/typescript-operations": "^2.3.2",
+    "@graphql-codegen/typescript-graphql-request": "^4.4.2",
+    "@graphql-codegen/typescript-operations": "^2.3.4",
     "@types/cors": "^2.8.12",
     "@types/gl": "^4.1.0",
     "@types/jest": "^27.4.1",
-    "@typescript-eslint/eslint-plugin": "^5.12.1",
-    "@typescript-eslint/parser": "^5.12.1",
+    "@typescript-eslint/eslint-plugin": "^5.14.0",
+    "@typescript-eslint/parser": "^5.14.0",
     "benchmark": "^2.1.4",
     "concurrently": "^7.0.0",
     "cpx2": "^4.2.0",
     "crypto-browserify": "^3.12.0",
-    "css-loader": "^6.6.0",
-    "eslint": "^8.10.0",
+    "css-loader": "^6.7.1",
+    "eslint": "^8.11.0",
     "extra-watch-webpack-plugin": "^1.0.3",
     "file-loader": "^6.2.0",
     "fs-extra": "^10.0.1",
     "graphql": "^16.3.0",
     "http-server": "^14.1.0",
     "jest": "^27.5.1",
-    "mini-css-extract-plugin": "^2.5.3",
+    "mini-css-extract-plugin": "^2.6.0",
     "path-browserify": "^1.0.1",
     "raw-loader": "^4.0.2",
     "sass": "^1.49.9",
     "sass-loader": "^12.6.0",
-    "simple-git": "^3.2.6",
+    "simple-git": "^3.3.0",
     "stream-browserify": "^3.0.0",
     "style-loader": "^3.3.1",
     "ts-jest": "^27.1.3",
-    "typescript": "^4.5.5",
-    "webpack": "^5.69.1",
+    "typescript": "^4.6.2",
+    "webpack": "^5.70.0",
     "webpack-cli": "^4.9.2"
   },
   "dependencies": {
@@ -135,8 +135,8 @@
     "@types/express": "^4.17.13",
     "@types/node": "^16.11.26",
     "@types/node-fetch": "^2.6.1",
-    "@types/react": "^17.0.39",
-    "@types/react-dom": "^17.0.11",
+    "@types/react": "^17.0.40",
+    "@types/react-dom": "^17.0.13",
     "@types/swagger-ui-dist": "3.30.1",
     "argparse": "^2.0.1",
     "body-parser": "^1.19.2",
@@ -147,8 +147,8 @@
     "immer": "^9.0.12",
     "immutable": "^4.0.0",
     "node-fetch": "^2.6.7",
-    "rxjs": "^7.5.4",
-    "swagger-ui-dist": "^4.5.2",
+    "rxjs": "^7.5.5",
+    "swagger-ui-dist": "^4.6.2",
     "tslib": "^2.3.1",
     "util.promisify": "^1.1.1",
     "xhr2": "^0.2.1"

package/lib/commonjs/mol-plugin-state/formats/structure.js

@@ -1,64 +0,0 @@
-"use strict";
-/**
- * Copyright (c) 2018-2020 mol* contributors, licensed under MIT, See LICENSE file for more info.
- *
- * @author David Sehnal <david.sehnal@gmail.com>
- * @author Alexander Rose <alexander.rose@weirdbyte.de>
- */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.BuiltInStructureFormats = exports.XtcProvider = exports.DcdProvider = exports.PsfProvider = exports.StructureFormatCategory = void 0;
-var tslib_1 = require("tslib");
-var transforms_1 = require("../transforms");
-var provider_1 = require("./provider");
-exports.StructureFormatCategory = 'Structure';
-exports.PsfProvider = (0, provider_1.DataFormatProvider)({
-    label: 'PSF',
-    description: 'PSF',
-    category: exports.StructureFormatCategory,
-    stringExtensions: ['psf'],
-    parse: function (plugin, data) { return (0, tslib_1.__awaiter)(void 0, void 0, void 0, function () {
-        var format, topology;
-        return (0, tslib_1.__generator)(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    format = plugin.state.data.build()
-                        .to(data)
-                        .apply(transforms_1.StateTransforms.Data.ParsePsf, {}, { state: { isGhost: true } });
-                    topology = format.apply(transforms_1.StateTransforms.Model.TopologyFromPsf);
-                    return [4 /*yield*/, format.commit()];
-                case 1:
-                    _a.sent();
-                    return [2 /*return*/, { format: format.selector, topology: topology.selector }];
-            }
-        });
-    }); }
-});
-exports.DcdProvider = (0, provider_1.DataFormatProvider)({
-    label: 'DCD',
-    description: 'DCD',
-    category: exports.StructureFormatCategory,
-    binaryExtensions: ['dcd'],
-    parse: function (plugin, data) {
-        var coordinates = plugin.state.data.build()
-            .to(data)
-            .apply(transforms_1.StateTransforms.Model.CoordinatesFromDcd);
-        return coordinates.commit();
-    }
-});
-exports.XtcProvider = (0, provider_1.DataFormatProvider)({
-    label: 'XTC',
-    description: 'XTC',
-    category: exports.StructureFormatCategory,
-    binaryExtensions: ['xtc'],
-    parse: function (plugin, data) {
-        var coordinates = plugin.state.data.build()
-            .to(data)
-            .apply(transforms_1.StateTransforms.Model.CoordinatesFromXtc);
-        return coordinates.commit();
-    }
-});
-exports.BuiltInStructureFormats = [
-    ['psf', exports.PsfProvider],
-    ['dcd', exports.DcdProvider],
-    ['xtc', exports.XtcProvider],
-];

package/lib/mol-plugin-state/formats/structure.js

@@ -1,61 +0,0 @@
-/**
- * Copyright (c) 2018-2020 mol* contributors, licensed under MIT, See LICENSE file for more info.
- *
- * @author David Sehnal <david.sehnal@gmail.com>
- * @author Alexander Rose <alexander.rose@weirdbyte.de>
- */
-import { __awaiter, __generator } from "tslib";
-import { StateTransforms } from '../transforms';
-import { DataFormatProvider } from './provider';
-export var StructureFormatCategory = 'Structure';
-export var PsfProvider = DataFormatProvider({
-    label: 'PSF',
-    description: 'PSF',
-    category: StructureFormatCategory,
-    stringExtensions: ['psf'],
-    parse: function (plugin, data) { return __awaiter(void 0, void 0, void 0, function () {
-        var format, topology;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    format = plugin.state.data.build()
-                        .to(data)
-                        .apply(StateTransforms.Data.ParsePsf, {}, { state: { isGhost: true } });
-                    topology = format.apply(StateTransforms.Model.TopologyFromPsf);
-                    return [4 /*yield*/, format.commit()];
-                case 1:
-                    _a.sent();
-                    return [2 /*return*/, { format: format.selector, topology: topology.selector }];
-            }
-        });
-    }); }
-});
-export var DcdProvider = DataFormatProvider({
-    label: 'DCD',
-    description: 'DCD',
-    category: StructureFormatCategory,
-    binaryExtensions: ['dcd'],
-    parse: function (plugin, data) {
-        var coordinates = plugin.state.data.build()
-            .to(data)
-            .apply(StateTransforms.Model.CoordinatesFromDcd);
-        return coordinates.commit();
-    }
-});
-export var XtcProvider = DataFormatProvider({
-    label: 'XTC',
-    description: 'XTC',
-    category: StructureFormatCategory,
-    binaryExtensions: ['xtc'],
-    parse: function (plugin, data) {
-        var coordinates = plugin.state.data.build()
-            .to(data)
-            .apply(StateTransforms.Model.CoordinatesFromXtc);
-        return coordinates.commit();
-    }
-});
-export var BuiltInStructureFormats = [
-    ['psf', PsfProvider],
-    ['dcd', DcdProvider],
-    ['xtc', XtcProvider],
-];