drugflow-molstar 0.2.0 → 0.2.2

package/lib/ui/pdbe-screenshot-controls.js

@@ -1,101 +1,101 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DownloadScreenshotControls = void 0;
-var tslib_1 = require("tslib");
-var jsx_runtime_1 = require("react/jsx-runtime");
-var parameters_1 = require("Molstar/mol-plugin-ui/controls/parameters");
-var base_1 = require("Molstar/mol-plugin-ui/base");
-var screenshot_1 = require("Molstar/mol-plugin-ui/controls/screenshot");
-var common_1 = require("Molstar/mol-plugin-ui/controls/common");
-var commands_1 = require("Molstar/mol-plugin/commands");
-var use_behavior_1 = require("Molstar/mol-plugin-ui/hooks/use-behavior");
-var icons_1 = require("Molstar/mol-plugin-ui/controls/icons");
-var DownloadScreenshotControls = /** @class */ (function (_super) {
-    tslib_1.__extends(DownloadScreenshotControls, _super);
-    function DownloadScreenshotControls() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.state = {
-            showPreview: true,
-            isDisabled: false
-        };
-        _this.download = function () {
-            var _a;
-            (_a = _this.plugin.helpers.viewportScreenshot) === null || _a === void 0 ? void 0 : _a.download();
-            _this.props.close();
-        };
-        _this.copy = function () { return tslib_1.__awaiter(_this, void 0, void 0, function () {
-            var _a;
-            var _b;
-            return tslib_1.__generator(this, function (_c) {
-                switch (_c.label) {
-                    case 0:
-                        _c.trys.push([0, 2, , 3]);
-                        return [4 /*yield*/, ((_b = this.plugin.helpers.viewportScreenshot) === null || _b === void 0 ? void 0 : _b.copyToClipboard())];
-                    case 1:
-                        _c.sent();
-                        commands_1.PluginCommands.Toast.Show(this.plugin, {
-                            message: 'Copied to clipboard.',
-                            title: 'Screenshot',
-                            timeoutMs: 1500
-                        });
-                        return [3 /*break*/, 3];
-                    case 2:
-                        _a = _c.sent();
-                        return [2 /*return*/, this.copyImg()];
-                    case 3: return [2 /*return*/];
-                }
-            });
-        }); };
-        _this.copyImg = function () { return tslib_1.__awaiter(_this, void 0, void 0, function () {
-            var src;
-            var _a;
-            return tslib_1.__generator(this, function (_b) {
-                switch (_b.label) {
-                    case 0: return [4 /*yield*/, ((_a = this.plugin.helpers.viewportScreenshot) === null || _a === void 0 ? void 0 : _a.getImageDataUri())];
-                    case 1:
-                        src = _b.sent();
-                        this.setState({ imageData: src });
-                        return [2 /*return*/];
-                }
-            });
-        }); };
-        _this.open = function (e) {
-            if (!e.target.files || !e.target.files[0])
-                return;
-            commands_1.PluginCommands.State.Snapshots.OpenFile(_this.plugin, { file: e.target.files[0] });
-        };
-        return _this;
-    }
-    DownloadScreenshotControls.prototype.componentDidMount = function () {
-        var _this = this;
-        this.subscribe(this.plugin.state.data.behaviors.isUpdating, function (v) {
-            _this.setState({ isDisabled: v });
-        });
-    };
-    DownloadScreenshotControls.prototype.componentWillUnmount = function () {
-        this.setState({ imageData: void 0 });
-    };
-    DownloadScreenshotControls.prototype.render = function () {
-        var _this = this;
-        var _a;
-        var hasClipboardApi = !!((_a = navigator.clipboard) === null || _a === void 0 ? void 0 : _a.write);
-        return (0, jsx_runtime_1.jsxs)("div", { children: [this.state.showPreview && (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: 'msp-image-preview' }, { children: [(0, jsx_runtime_1.jsx)(screenshot_1.ScreenshotPreview, { plugin: this.plugin }), (0, jsx_runtime_1.jsx)(CropControls, { plugin: this.plugin })] })), (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: 'msp-flex-row' }, { children: [!this.state.imageData && (0, jsx_runtime_1.jsx)(common_1.Button, tslib_1.__assign({ icon: icons_1.CopySvg, onClick: hasClipboardApi ? this.copy : this.copyImg, disabled: this.state.isDisabled }, { children: "Copy" })), this.state.imageData && (0, jsx_runtime_1.jsx)(common_1.Button, tslib_1.__assign({ onClick: function () { return _this.setState({ imageData: void 0 }); }, disabled: this.state.isDisabled }, { children: "Clear" })), (0, jsx_runtime_1.jsx)(common_1.Button, tslib_1.__assign({ icon: icons_1.GetAppSvg, onClick: this.download, disabled: this.state.isDisabled }, { children: "Download" }))] })), this.state.imageData && (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: 'msp-row msp-copy-image-wrapper' }, { children: [(0, jsx_runtime_1.jsx)("div", { children: "Right click below + Copy Image" }), (0, jsx_runtime_1.jsx)("img", { src: this.state.imageData, style: { width: '100%', height: 32, display: 'block' } })] })), (0, jsx_runtime_1.jsx)(ScreenshotParams, { plugin: this.plugin, isDisabled: this.state.isDisabled })] });
-    };
-    return DownloadScreenshotControls;
-}(base_1.PluginUIComponent));
-exports.DownloadScreenshotControls = DownloadScreenshotControls;
-function ScreenshotParams(_a) {
-    var plugin = _a.plugin, isDisabled = _a.isDisabled;
-    var helper = plugin.helpers.viewportScreenshot;
-    var values = (0, use_behavior_1.useBehavior)(helper.behaviors.values);
-    return (0, jsx_runtime_1.jsx)(parameters_1.ParameterControls, { params: helper.params, values: values, onChangeValues: function (v) { return helper.behaviors.values.next(v); }, isDisabled: isDisabled });
-}
-function CropControls(_a) {
-    var plugin = _a.plugin;
-    var helper = plugin.helpers.viewportScreenshot;
-    var cropParams = (0, use_behavior_1.useBehavior)(helper === null || helper === void 0 ? void 0 : helper.behaviors.cropParams);
-    (0, use_behavior_1.useBehavior)(helper === null || helper === void 0 ? void 0 : helper.behaviors.relativeCrop);
-    if (!helper)
-        return null;
-    return (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ style: { width: '100%', height: '24px', marginTop: '8px' } }, { children: [(0, jsx_runtime_1.jsx)(common_1.ToggleButton, { icon: icons_1.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 && (0, jsx_runtime_1.jsx)(common_1.Button, { icon: icons_1.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 && (0, jsx_runtime_1.jsx)(common_1.Button, { icon: icons_1.CropFreeSvg, title: 'Reset Crop', style: { background: 'transparent', float: 'right', height: '24px', lineHeight: '24px', width: '24px', padding: '0' }, onClick: function () { return helper.resetCrop(); } })] }));
-}
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DownloadScreenshotControls = void 0;
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var parameters_1 = require("Molstar/mol-plugin-ui/controls/parameters");
+var base_1 = require("Molstar/mol-plugin-ui/base");
+var screenshot_1 = require("Molstar/mol-plugin-ui/controls/screenshot");
+var common_1 = require("Molstar/mol-plugin-ui/controls/common");
+var commands_1 = require("Molstar/mol-plugin/commands");
+var use_behavior_1 = require("Molstar/mol-plugin-ui/hooks/use-behavior");
+var icons_1 = require("Molstar/mol-plugin-ui/controls/icons");
+var DownloadScreenshotControls = /** @class */ (function (_super) {
+    tslib_1.__extends(DownloadScreenshotControls, _super);
+    function DownloadScreenshotControls() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.state = {
+            showPreview: true,
+            isDisabled: false
+        };
+        _this.download = function () {
+            var _a;
+            (_a = _this.plugin.helpers.viewportScreenshot) === null || _a === void 0 ? void 0 : _a.download();
+            _this.props.close();
+        };
+        _this.copy = function () { return tslib_1.__awaiter(_this, void 0, void 0, function () {
+            var _a;
+            var _b;
+            return tslib_1.__generator(this, function (_c) {
+                switch (_c.label) {
+                    case 0:
+                        _c.trys.push([0, 2, , 3]);
+                        return [4 /*yield*/, ((_b = this.plugin.helpers.viewportScreenshot) === null || _b === void 0 ? void 0 : _b.copyToClipboard())];
+                    case 1:
+                        _c.sent();
+                        commands_1.PluginCommands.Toast.Show(this.plugin, {
+                            message: 'Copied to clipboard.',
+                            title: 'Screenshot',
+                            timeoutMs: 1500
+                        });
+                        return [3 /*break*/, 3];
+                    case 2:
+                        _a = _c.sent();
+                        return [2 /*return*/, this.copyImg()];
+                    case 3: return [2 /*return*/];
+                }
+            });
+        }); };
+        _this.copyImg = function () { return tslib_1.__awaiter(_this, void 0, void 0, function () {
+            var src;
+            var _a;
+            return tslib_1.__generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0: return [4 /*yield*/, ((_a = this.plugin.helpers.viewportScreenshot) === null || _a === void 0 ? void 0 : _a.getImageDataUri())];
+                    case 1:
+                        src = _b.sent();
+                        this.setState({ imageData: src });
+                        return [2 /*return*/];
+                }
+            });
+        }); };
+        _this.open = function (e) {
+            if (!e.target.files || !e.target.files[0])
+                return;
+            commands_1.PluginCommands.State.Snapshots.OpenFile(_this.plugin, { file: e.target.files[0] });
+        };
+        return _this;
+    }
+    DownloadScreenshotControls.prototype.componentDidMount = function () {
+        var _this = this;
+        this.subscribe(this.plugin.state.data.behaviors.isUpdating, function (v) {
+            _this.setState({ isDisabled: v });
+        });
+    };
+    DownloadScreenshotControls.prototype.componentWillUnmount = function () {
+        this.setState({ imageData: void 0 });
+    };
+    DownloadScreenshotControls.prototype.render = function () {
+        var _this = this;
+        var _a;
+        var hasClipboardApi = !!((_a = navigator.clipboard) === null || _a === void 0 ? void 0 : _a.write);
+        return (0, jsx_runtime_1.jsxs)("div", { children: [this.state.showPreview && (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: 'msp-image-preview' }, { children: [(0, jsx_runtime_1.jsx)(screenshot_1.ScreenshotPreview, { plugin: this.plugin }), (0, jsx_runtime_1.jsx)(CropControls, { plugin: this.plugin })] })), (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: 'msp-flex-row' }, { children: [!this.state.imageData && (0, jsx_runtime_1.jsx)(common_1.Button, tslib_1.__assign({ icon: icons_1.CopySvg, onClick: hasClipboardApi ? this.copy : this.copyImg, disabled: this.state.isDisabled }, { children: "Copy" })), this.state.imageData && (0, jsx_runtime_1.jsx)(common_1.Button, tslib_1.__assign({ onClick: function () { return _this.setState({ imageData: void 0 }); }, disabled: this.state.isDisabled }, { children: "Clear" })), (0, jsx_runtime_1.jsx)(common_1.Button, tslib_1.__assign({ icon: icons_1.GetAppSvg, onClick: this.download, disabled: this.state.isDisabled }, { children: "Download" }))] })), this.state.imageData && (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: 'msp-row msp-copy-image-wrapper' }, { children: [(0, jsx_runtime_1.jsx)("div", { children: "Right click below + Copy Image" }), (0, jsx_runtime_1.jsx)("img", { src: this.state.imageData, style: { width: '100%', height: 32, display: 'block' } })] })), (0, jsx_runtime_1.jsx)(ScreenshotParams, { plugin: this.plugin, isDisabled: this.state.isDisabled })] });
+    };
+    return DownloadScreenshotControls;
+}(base_1.PluginUIComponent));
+exports.DownloadScreenshotControls = DownloadScreenshotControls;
+function ScreenshotParams(_a) {
+    var plugin = _a.plugin, isDisabled = _a.isDisabled;
+    var helper = plugin.helpers.viewportScreenshot;
+    var values = (0, use_behavior_1.useBehavior)(helper.behaviors.values);
+    return (0, jsx_runtime_1.jsx)(parameters_1.ParameterControls, { params: helper.params, values: values, onChangeValues: function (v) { return helper.behaviors.values.next(v); }, isDisabled: isDisabled });
+}
+function CropControls(_a) {
+    var plugin = _a.plugin;
+    var helper = plugin.helpers.viewportScreenshot;
+    var cropParams = (0, use_behavior_1.useBehavior)(helper === null || helper === void 0 ? void 0 : helper.behaviors.cropParams);
+    (0, use_behavior_1.useBehavior)(helper === null || helper === void 0 ? void 0 : helper.behaviors.relativeCrop);
+    if (!helper)
+        return null;
+    return (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ style: { width: '100%', height: '24px', marginTop: '8px' } }, { children: [(0, jsx_runtime_1.jsx)(common_1.ToggleButton, { icon: icons_1.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 && (0, jsx_runtime_1.jsx)(common_1.Button, { icon: icons_1.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 && (0, jsx_runtime_1.jsx)(common_1.Button, { icon: icons_1.CropFreeSvg, title: 'Reset Crop', style: { background: 'transparent', float: 'right', height: '24px', lineHeight: '24px', width: '24px', padding: '0' }, onClick: function () { return helper.resetCrop(); } })] }));
+}

package/lib/ui/pdbe-structure-controls.d.ts

@@ -1,17 +1,17 @@
-/// <reference types="react" />
-import { PluginUIComponent } from 'Molstar/mol-plugin-ui/base';
-export declare class PDBeStructureTools extends PluginUIComponent {
-    render(): JSX.Element;
-}
-export declare class CustomStructureControls extends PluginUIComponent<{
-    initiallyCollapsed?: boolean;
-}> {
-    componentDidMount(): void;
-    render(): JSX.Element | null;
-}
-export declare class PDBeLigandViewStructureTools extends PluginUIComponent {
-    render(): JSX.Element;
-}
-export declare class PDBeSuperpositionStructureTools extends PluginUIComponent {
-    render(): JSX.Element;
-}
+/// <reference types="react" />
+import { PluginUIComponent } from 'Molstar/mol-plugin-ui/base';
+export declare class PDBeStructureTools extends PluginUIComponent {
+    render(): JSX.Element;
+}
+export declare class CustomStructureControls extends PluginUIComponent<{
+    initiallyCollapsed?: boolean;
+}> {
+    componentDidMount(): void;
+    render(): JSX.Element | null;
+}
+export declare class PDBeLigandViewStructureTools extends PluginUIComponent {
+    render(): JSX.Element;
+}
+export declare class PDBeSuperpositionStructureTools extends PluginUIComponent {
+    render(): JSX.Element;
+}

package/lib/ui/pdbe-structure-controls.js

@@ -1,70 +1,70 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PDBeSuperpositionStructureTools = exports.PDBeLigandViewStructureTools = exports.CustomStructureControls = exports.PDBeStructureTools = void 0;
-var tslib_1 = require("tslib");
-var jsx_runtime_1 = require("react/jsx-runtime");
-var base_1 = require("Molstar/mol-plugin-ui/base");
-var components_1 = require("Molstar/mol-plugin-ui/structure/components");
-var measurements_1 = require("Molstar/mol-plugin-ui/structure/measurements");
-var source_1 = require("Molstar/mol-plugin-ui/structure/source");
-var volume_1 = require("Molstar/mol-plugin-ui/structure/volume");
-var annotation_controls_1 = require("./annotation-controls");
-var icons_1 = require("Molstar/mol-plugin-ui/controls/icons");
-var superposition_components_1 = require("./superposition-components");
-var quick_styles_1 = require("Molstar/mol-plugin-ui/structure/quick-styles");
-var alphafold_superposition_1 = require("./alphafold-superposition");
-var export_superposition_1 = require("./export-superposition");
-var alphafold_tranparency_1 = require("./alphafold-tranparency");
-var PDBeStructureTools = /** @class */ (function (_super) {
-    tslib_1.__extends(PDBeStructureTools, _super);
-    function PDBeStructureTools() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    PDBeStructureTools.prototype.render = function () {
-        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: 'msp-section-header' }, { children: [(0, jsx_runtime_1.jsx)(icons_1.Icon, { svg: icons_1.BuildSvg }), "Structure Tools"] })), (0, jsx_runtime_1.jsx)(source_1.StructureSourceControls, {}), (0, jsx_runtime_1.jsx)(annotation_controls_1.AnnotationsComponentControls, {}), (0, jsx_runtime_1.jsx)(quick_styles_1.StructureQuickStylesControls, {}), (0, jsx_runtime_1.jsx)(components_1.StructureComponentControls, {}), (0, jsx_runtime_1.jsx)(volume_1.VolumeStreamingControls, {}), (0, jsx_runtime_1.jsx)(volume_1.VolumeSourceControls, {}), (0, jsx_runtime_1.jsx)(measurements_1.StructureMeasurementsControls, {}), (0, jsx_runtime_1.jsx)(CustomStructureControls, {})] });
-    };
-    return PDBeStructureTools;
-}(base_1.PluginUIComponent));
-exports.PDBeStructureTools = PDBeStructureTools;
-var CustomStructureControls = /** @class */ (function (_super) {
-    tslib_1.__extends(CustomStructureControls, _super);
-    function CustomStructureControls() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    CustomStructureControls.prototype.componentDidMount = function () {
-        var _this = this;
-        this.subscribe(this.plugin.state.behaviors.events.changed, function () { return _this.forceUpdate(); });
-    };
-    CustomStructureControls.prototype.render = function () {
-        var _this = this;
-        var controls = [];
-        this.plugin.customStructureControls.forEach(function (Controls, key) {
-            controls.push((0, jsx_runtime_1.jsx)(Controls, { initiallyCollapsed: _this.props.initiallyCollapsed }, key));
-        });
-        return controls.length > 0 ? (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: controls }) : null;
-    };
-    return CustomStructureControls;
-}(base_1.PluginUIComponent));
-exports.CustomStructureControls = CustomStructureControls;
-var PDBeLigandViewStructureTools = /** @class */ (function (_super) {
-    tslib_1.__extends(PDBeLigandViewStructureTools, _super);
-    function PDBeLigandViewStructureTools() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    PDBeLigandViewStructureTools.prototype.render = function () {
-        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: 'msp-section-header' }, { children: [(0, jsx_runtime_1.jsx)(icons_1.Icon, { svg: icons_1.BuildSvg }), "Structure Tools"] })), (0, jsx_runtime_1.jsx)(components_1.StructureComponentControls, {}), (0, jsx_runtime_1.jsx)(volume_1.VolumeStreamingControls, {}), (0, jsx_runtime_1.jsx)(measurements_1.StructureMeasurementsControls, {}), (0, jsx_runtime_1.jsx)(CustomStructureControls, {})] });
-    };
-    return PDBeLigandViewStructureTools;
-}(base_1.PluginUIComponent));
-exports.PDBeLigandViewStructureTools = PDBeLigandViewStructureTools;
-var PDBeSuperpositionStructureTools = /** @class */ (function (_super) {
-    tslib_1.__extends(PDBeSuperpositionStructureTools, _super);
-    function PDBeSuperpositionStructureTools() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    PDBeSuperpositionStructureTools.prototype.render = function () {
-        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: 'msp-section-header' }, { children: [(0, jsx_runtime_1.jsx)(icons_1.Icon, { svg: icons_1.BuildSvg }), "Structure Tools"] })), (0, jsx_runtime_1.jsx)(superposition_components_1.SuperpositionComponentControls, {}), (0, jsx_runtime_1.jsx)(alphafold_tranparency_1.AlphafoldTransparencyControls, {}), (0, jsx_runtime_1.jsx)(alphafold_superposition_1.AlphafoldPaeControls, {}), (0, jsx_runtime_1.jsx)(alphafold_superposition_1.AlphafoldSuperpositionControls, {}), (0, jsx_runtime_1.jsx)(measurements_1.StructureMeasurementsControls, {}), (0, jsx_runtime_1.jsx)(export_superposition_1.SuperpositionModelExportUI, {}), (0, jsx_runtime_1.jsx)(CustomStructureControls, {})] });
-    };
-    return PDBeSuperpositionStructureTools;
-}(base_1.PluginUIComponent));
-exports.PDBeSuperpositionStructureTools = PDBeSuperpositionStructureTools;
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PDBeSuperpositionStructureTools = exports.PDBeLigandViewStructureTools = exports.CustomStructureControls = exports.PDBeStructureTools = void 0;
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var base_1 = require("Molstar/mol-plugin-ui/base");
+var components_1 = require("Molstar/mol-plugin-ui/structure/components");
+var measurements_1 = require("Molstar/mol-plugin-ui/structure/measurements");
+var source_1 = require("Molstar/mol-plugin-ui/structure/source");
+var volume_1 = require("Molstar/mol-plugin-ui/structure/volume");
+var annotation_controls_1 = require("./annotation-controls");
+var icons_1 = require("Molstar/mol-plugin-ui/controls/icons");
+var superposition_components_1 = require("./superposition-components");
+var quick_styles_1 = require("Molstar/mol-plugin-ui/structure/quick-styles");
+var alphafold_superposition_1 = require("./alphafold-superposition");
+var export_superposition_1 = require("./export-superposition");
+var alphafold_tranparency_1 = require("./alphafold-tranparency");
+var PDBeStructureTools = /** @class */ (function (_super) {
+    tslib_1.__extends(PDBeStructureTools, _super);
+    function PDBeStructureTools() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    PDBeStructureTools.prototype.render = function () {
+        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: 'msp-section-header' }, { children: [(0, jsx_runtime_1.jsx)(icons_1.Icon, { svg: icons_1.BuildSvg }), "Structure Tools"] })), (0, jsx_runtime_1.jsx)(source_1.StructureSourceControls, {}), (0, jsx_runtime_1.jsx)(annotation_controls_1.AnnotationsComponentControls, {}), (0, jsx_runtime_1.jsx)(quick_styles_1.StructureQuickStylesControls, {}), (0, jsx_runtime_1.jsx)(components_1.StructureComponentControls, {}), (0, jsx_runtime_1.jsx)(volume_1.VolumeStreamingControls, {}), (0, jsx_runtime_1.jsx)(volume_1.VolumeSourceControls, {}), (0, jsx_runtime_1.jsx)(measurements_1.StructureMeasurementsControls, {}), (0, jsx_runtime_1.jsx)(CustomStructureControls, {})] });
+    };
+    return PDBeStructureTools;
+}(base_1.PluginUIComponent));
+exports.PDBeStructureTools = PDBeStructureTools;
+var CustomStructureControls = /** @class */ (function (_super) {
+    tslib_1.__extends(CustomStructureControls, _super);
+    function CustomStructureControls() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    CustomStructureControls.prototype.componentDidMount = function () {
+        var _this = this;
+        this.subscribe(this.plugin.state.behaviors.events.changed, function () { return _this.forceUpdate(); });
+    };
+    CustomStructureControls.prototype.render = function () {
+        var _this = this;
+        var controls = [];
+        this.plugin.customStructureControls.forEach(function (Controls, key) {
+            controls.push((0, jsx_runtime_1.jsx)(Controls, { initiallyCollapsed: _this.props.initiallyCollapsed }, key));
+        });
+        return controls.length > 0 ? (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: controls }) : null;
+    };
+    return CustomStructureControls;
+}(base_1.PluginUIComponent));
+exports.CustomStructureControls = CustomStructureControls;
+var PDBeLigandViewStructureTools = /** @class */ (function (_super) {
+    tslib_1.__extends(PDBeLigandViewStructureTools, _super);
+    function PDBeLigandViewStructureTools() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    PDBeLigandViewStructureTools.prototype.render = function () {
+        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: 'msp-section-header' }, { children: [(0, jsx_runtime_1.jsx)(icons_1.Icon, { svg: icons_1.BuildSvg }), "Structure Tools"] })), (0, jsx_runtime_1.jsx)(components_1.StructureComponentControls, {}), (0, jsx_runtime_1.jsx)(volume_1.VolumeStreamingControls, {}), (0, jsx_runtime_1.jsx)(measurements_1.StructureMeasurementsControls, {}), (0, jsx_runtime_1.jsx)(CustomStructureControls, {})] });
+    };
+    return PDBeLigandViewStructureTools;
+}(base_1.PluginUIComponent));
+exports.PDBeLigandViewStructureTools = PDBeLigandViewStructureTools;
+var PDBeSuperpositionStructureTools = /** @class */ (function (_super) {
+    tslib_1.__extends(PDBeSuperpositionStructureTools, _super);
+    function PDBeSuperpositionStructureTools() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    PDBeSuperpositionStructureTools.prototype.render = function () {
+        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: 'msp-section-header' }, { children: [(0, jsx_runtime_1.jsx)(icons_1.Icon, { svg: icons_1.BuildSvg }), "Structure Tools"] })), (0, jsx_runtime_1.jsx)(superposition_components_1.SuperpositionComponentControls, {}), (0, jsx_runtime_1.jsx)(alphafold_tranparency_1.AlphafoldTransparencyControls, {}), (0, jsx_runtime_1.jsx)(alphafold_superposition_1.AlphafoldPaeControls, {}), (0, jsx_runtime_1.jsx)(alphafold_superposition_1.AlphafoldSuperpositionControls, {}), (0, jsx_runtime_1.jsx)(measurements_1.StructureMeasurementsControls, {}), (0, jsx_runtime_1.jsx)(export_superposition_1.SuperpositionModelExportUI, {}), (0, jsx_runtime_1.jsx)(CustomStructureControls, {})] });
+    };
+    return PDBeSuperpositionStructureTools;
+}(base_1.PluginUIComponent));
+exports.PDBeSuperpositionStructureTools = PDBeSuperpositionStructureTools;

package/lib/ui/pdbe-viewport-controls.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
-import { ViewportControls } from 'Molstar/mol-plugin-ui/viewport';
-export declare class PDBeViewportControls extends ViewportControls {
-    isBlack(customeState: any): boolean;
-    render(): JSX.Element;
-}
+/// <reference types="react" />
+import { ViewportControls } from 'Molstar/mol-plugin-ui/viewport';
+export declare class PDBeViewportControls extends ViewportControls {
+    isBlack(customeState: any): boolean;
+    render(): JSX.Element;
+}

package/lib/ui/pdbe-viewport-controls.js

@@ -1,56 +1,56 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PDBeViewportControls = void 0;
-var tslib_1 = require("tslib");
-var jsx_runtime_1 = require("react/jsx-runtime");
-var config_1 = require("Molstar/mol-plugin/config");
-var common_1 = require("Molstar/mol-plugin-ui/controls/common");
-var selection_1 = require("Molstar/mol-plugin-ui/structure/selection");
-var pdbe_screenshot_controls_1 = require("./pdbe-screenshot-controls");
-var simple_settings_1 = require("Molstar/mol-plugin-ui/viewport/simple-settings");
-var viewport_1 = require("Molstar/mol-plugin-ui/viewport");
-var icons_1 = require("Molstar/mol-plugin-ui/controls/icons");
-var PDBeViewportControls = /** @class */ (function (_super) {
-    tslib_1.__extends(PDBeViewportControls, _super);
-    function PDBeViewportControls() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    PDBeViewportControls.prototype.isBlack = function (customeState) {
-        if (customeState && customeState.initParams && customeState.initParams.bgColor) {
-            var color = customeState.initParams.bgColor;
-            if (color.r === 0 && color.g === 0 && color.b === 0)
-                return true;
-        }
-        return false;
-    };
-    PDBeViewportControls.prototype.render = function () {
-        var customeState = this.plugin.customState;
-        var showPDBeLink = false;
-        var showControlToggle = true;
-        var showControlInfo = true;
-        if (customeState && customeState.initParams && customeState.initParams.moleculeId && customeState.initParams.pdbeLink)
-            showPDBeLink = true;
-        if (customeState && customeState.initParams && customeState.initParams.superposition)
-            showPDBeLink = false;
-        if (customeState && customeState.initParams && customeState.initParams.hideCanvasControls && customeState.initParams.hideCanvasControls.indexOf('controlToggle') > -1)
-            showControlToggle = false;
-        if (customeState && customeState.initParams && customeState.initParams.hideCanvasControls && customeState.initParams.hideCanvasControls.indexOf('controlInfo') > -1)
-            showControlInfo = false;
-        var bgColor = this.isBlack(customeState) ? '#fff' : '#555';
-        var pdbeLink = {
-            parentStyle: { width: 'auto' },
-            bgStyle: { position: 'absolute', height: '27px', width: '54px', marginLeft: '-33px' },
-            containerStyle: { position: 'absolute', right: '10px', top: '10px', padding: '3px 3px 3px 18px' },
-            style: { display: 'inline-block', fontSize: '14px', color: bgColor, borderBottom: 'none', cursor: 'pointer', textDecoration: 'none', position: 'absolute', right: '5px' },
-            pdbeImg: {
-                src: 'https://www.ebi.ac.uk/pdbe/entry/static/images/logos/PDBe/logo_T_64.png',
-                alt: 'PDBe logo',
-                style: { height: '12px', width: '12px', border: 0, position: 'absolute', margin: '4px 0 0 -13px' }
-            }
-        };
-        var vwpBtnsTopMargin = { marginTop: '30px' };
-        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [showPDBeLink && (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: 'msp-viewport-controls-buttons', style: pdbeLink.containerStyle }, { children: [(0, jsx_runtime_1.jsx)("div", { className: 'msp-semi-transparent-background', style: pdbeLink.bgStyle }), (0, jsx_runtime_1.jsxs)("a", tslib_1.__assign({ className: 'msp-pdbe-link', style: pdbeLink.style, target: "_blank", href: "https://pdbe.org/".concat(customeState.initParams.moleculeId) }, { children: [(0, jsx_runtime_1.jsx)("img", { src: pdbeLink.pdbeImg.src, alt: pdbeLink.pdbeImg.alt, style: pdbeLink.pdbeImg.style }), customeState.initParams.moleculeId] }))] })), (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: 'msp-viewport-controls', onMouseMove: this.onMouseMove, style: showPDBeLink ? vwpBtnsTopMargin : void 0 }, { children: [(0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: 'msp-viewport-controls-buttons' }, { children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: 'msp-semi-transparent-background' }), this.icon(icons_1.AutorenewSvg, this.resetCamera, 'Reset Camera')] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: 'msp-semi-transparent-background' }), this.icon(icons_1.CameraOutlinedSvg, this.toggleScreenshotExpanded, 'Screenshot / State Snapshot', this.state.isScreenshotExpanded)] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: 'msp-semi-transparent-background' }), showControlToggle && this.icon(icons_1.BuildOutlinedSvg, this.toggleControls, 'Toggle Controls Panel', this.plugin.layout.state.showControls), this.plugin.config.get(config_1.PluginConfig.Viewport.ShowExpand) && this.icon(icons_1.FullscreenSvg, this.toggleExpanded, 'Toggle Expanded Viewport', this.plugin.layout.state.isExpanded), showControlInfo && this.icon(icons_1.TuneSvg, this.toggleSettingsExpanded, 'Settings / Controls Info', this.state.isSettingsExpanded)] }), this.plugin.config.get(config_1.PluginConfig.Viewport.ShowSelectionMode) && (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: 'msp-semi-transparent-background' }), (0, jsx_runtime_1.jsx)(selection_1.ToggleSelectionModeButton, {})] })] })), this.state.isScreenshotExpanded && (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'msp-viewport-controls-panel' }, { children: (0, jsx_runtime_1.jsx)(common_1.ControlGroup, tslib_1.__assign({ header: 'Screenshot / State', title: 'Click to close.', initialExpanded: true, hideExpander: true, hideOffset: true, onHeaderClick: this.toggleScreenshotExpanded, topRightIcon: icons_1.CloseSvg, noTopMargin: true, childrenClassName: 'msp-viewport-controls-panel-controls' }, { children: (0, jsx_runtime_1.jsx)(pdbe_screenshot_controls_1.DownloadScreenshotControls, { close: this.toggleScreenshotExpanded }) })) })), this.state.isSettingsExpanded && (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'msp-viewport-controls-panel' }, { children: (0, jsx_runtime_1.jsx)(common_1.ControlGroup, tslib_1.__assign({ header: 'Settings / Controls Info', title: 'Click to close.', initialExpanded: true, hideExpander: true, hideOffset: true, onHeaderClick: this.toggleSettingsExpanded, topRightIcon: icons_1.CloseSvg, noTopMargin: true, childrenClassName: 'msp-viewport-controls-panel-controls' }, { children: (0, jsx_runtime_1.jsx)(simple_settings_1.SimpleSettingsControl, {}) })) }))] }))] });
-    };
-    return PDBeViewportControls;
-}(viewport_1.ViewportControls));
-exports.PDBeViewportControls = PDBeViewportControls;
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PDBeViewportControls = void 0;
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var config_1 = require("Molstar/mol-plugin/config");
+var common_1 = require("Molstar/mol-plugin-ui/controls/common");
+var selection_1 = require("Molstar/mol-plugin-ui/structure/selection");
+var pdbe_screenshot_controls_1 = require("./pdbe-screenshot-controls");
+var simple_settings_1 = require("Molstar/mol-plugin-ui/viewport/simple-settings");
+var viewport_1 = require("Molstar/mol-plugin-ui/viewport");
+var icons_1 = require("Molstar/mol-plugin-ui/controls/icons");
+var PDBeViewportControls = /** @class */ (function (_super) {
+    tslib_1.__extends(PDBeViewportControls, _super);
+    function PDBeViewportControls() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    PDBeViewportControls.prototype.isBlack = function (customeState) {
+        if (customeState && customeState.initParams && customeState.initParams.bgColor) {
+            var color = customeState.initParams.bgColor;
+            if (color.r === 0 && color.g === 0 && color.b === 0)
+                return true;
+        }
+        return false;
+    };
+    PDBeViewportControls.prototype.render = function () {
+        var customeState = this.plugin.customState;
+        var showPDBeLink = false;
+        var showControlToggle = true;
+        var showControlInfo = true;
+        if (customeState && customeState.initParams && customeState.initParams.moleculeId && customeState.initParams.pdbeLink)
+            showPDBeLink = true;
+        if (customeState && customeState.initParams && customeState.initParams.superposition)
+            showPDBeLink = false;
+        if (customeState && customeState.initParams && customeState.initParams.hideCanvasControls && customeState.initParams.hideCanvasControls.indexOf('controlToggle') > -1)
+            showControlToggle = false;
+        if (customeState && customeState.initParams && customeState.initParams.hideCanvasControls && customeState.initParams.hideCanvasControls.indexOf('controlInfo') > -1)
+            showControlInfo = false;
+        var bgColor = this.isBlack(customeState) ? '#fff' : '#555';
+        var pdbeLink = {
+            parentStyle: { width: 'auto' },
+            bgStyle: { position: 'absolute', height: '27px', width: '54px', marginLeft: '-33px' },
+            containerStyle: { position: 'absolute', right: '10px', top: '10px', padding: '3px 3px 3px 18px' },
+            style: { display: 'inline-block', fontSize: '14px', color: bgColor, borderBottom: 'none', cursor: 'pointer', textDecoration: 'none', position: 'absolute', right: '5px' },
+            pdbeImg: {
+                src: 'https://www.ebi.ac.uk/pdbe/entry/static/images/logos/PDBe/logo_T_64.png',
+                alt: 'PDBe logo',
+                style: { height: '12px', width: '12px', border: 0, position: 'absolute', margin: '4px 0 0 -13px' }
+            }
+        };
+        var vwpBtnsTopMargin = { marginTop: '30px' };
+        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [showPDBeLink && (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: 'msp-viewport-controls-buttons', style: pdbeLink.containerStyle }, { children: [(0, jsx_runtime_1.jsx)("div", { className: 'msp-semi-transparent-background', style: pdbeLink.bgStyle }), (0, jsx_runtime_1.jsxs)("a", tslib_1.__assign({ className: 'msp-pdbe-link', style: pdbeLink.style, target: "_blank", href: "https://pdbe.org/".concat(customeState.initParams.moleculeId) }, { children: [(0, jsx_runtime_1.jsx)("img", { src: pdbeLink.pdbeImg.src, alt: pdbeLink.pdbeImg.alt, style: pdbeLink.pdbeImg.style }), customeState.initParams.moleculeId] }))] })), (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: 'msp-viewport-controls', onMouseMove: this.onMouseMove, style: showPDBeLink ? vwpBtnsTopMargin : void 0 }, { children: [(0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: 'msp-viewport-controls-buttons' }, { children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: 'msp-semi-transparent-background' }), this.icon(icons_1.AutorenewSvg, this.resetCamera, 'Reset Camera')] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: 'msp-semi-transparent-background' }), this.icon(icons_1.CameraOutlinedSvg, this.toggleScreenshotExpanded, 'Screenshot / State Snapshot', this.state.isScreenshotExpanded)] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: 'msp-semi-transparent-background' }), showControlToggle && this.icon(icons_1.BuildOutlinedSvg, this.toggleControls, 'Toggle Controls Panel', this.plugin.layout.state.showControls), this.plugin.config.get(config_1.PluginConfig.Viewport.ShowExpand) && this.icon(icons_1.FullscreenSvg, this.toggleExpanded, 'Toggle Expanded Viewport', this.plugin.layout.state.isExpanded), showControlInfo && this.icon(icons_1.TuneSvg, this.toggleSettingsExpanded, 'Settings / Controls Info', this.state.isSettingsExpanded)] }), this.plugin.config.get(config_1.PluginConfig.Viewport.ShowSelectionMode) && (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: 'msp-semi-transparent-background' }), (0, jsx_runtime_1.jsx)(selection_1.ToggleSelectionModeButton, {})] })] })), this.state.isScreenshotExpanded && (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'msp-viewport-controls-panel' }, { children: (0, jsx_runtime_1.jsx)(common_1.ControlGroup, tslib_1.__assign({ header: 'Screenshot / State', title: 'Click to close.', initialExpanded: true, hideExpander: true, hideOffset: true, onHeaderClick: this.toggleScreenshotExpanded, topRightIcon: icons_1.CloseSvg, noTopMargin: true, childrenClassName: 'msp-viewport-controls-panel-controls' }, { children: (0, jsx_runtime_1.jsx)(pdbe_screenshot_controls_1.DownloadScreenshotControls, { close: this.toggleScreenshotExpanded }) })) })), this.state.isSettingsExpanded && (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'msp-viewport-controls-panel' }, { children: (0, jsx_runtime_1.jsx)(common_1.ControlGroup, tslib_1.__assign({ header: 'Settings / Controls Info', title: 'Click to close.', initialExpanded: true, hideExpander: true, hideOffset: true, onHeaderClick: this.toggleSettingsExpanded, topRightIcon: icons_1.CloseSvg, noTopMargin: true, childrenClassName: 'msp-viewport-controls-panel-controls' }, { children: (0, jsx_runtime_1.jsx)(simple_settings_1.SimpleSettingsControl, {}) })) }))] }))] });
+    };
+    return PDBeViewportControls;
+}(viewport_1.ViewportControls));
+exports.PDBeViewportControls = PDBeViewportControls;

package/lib/ui/segment-tree.d.ts

@@ -1,18 +1,18 @@
-/// <reference types="react" />
-import { PurePluginUIComponent } from 'Molstar/mol-plugin-ui/base';
-import { StateObjectRef } from 'Molstar/mol-state';
-import { PluginStateObject } from 'Molstar/mol-plugin-state/objects';
-import { Mat4 } from 'Molstar/mol-math/linear-algebra';
-export declare class SegmentTree extends PurePluginUIComponent<{}, {
-    segment?: any;
-    isBusy: boolean;
-}> {
-    componentDidMount(): void;
-    get customState(): any;
-    getSegmentParams: () => void;
-    updateSegment: (val: any) => Promise<false | undefined>;
-    hideStructures: (segmentIndex: number) => void;
-    displayStructures: (segmentIndex: number) => Promise<void>;
-    transform(s: StateObjectRef<PluginStateObject.Molecule.Structure>, matrix: Mat4): Promise<void>;
-    render(): JSX.Element;
-}
+/// <reference types="react" />
+import { PurePluginUIComponent } from 'Molstar/mol-plugin-ui/base';
+import { StateObjectRef } from 'Molstar/mol-state';
+import { PluginStateObject } from 'Molstar/mol-plugin-state/objects';
+import { Mat4 } from 'Molstar/mol-math/linear-algebra';
+export declare class SegmentTree extends PurePluginUIComponent<{}, {
+    segment?: any;
+    isBusy: boolean;
+}> {
+    componentDidMount(): void;
+    get customState(): any;
+    getSegmentParams: () => void;
+    updateSegment: (val: any) => Promise<false | undefined>;
+    hideStructures: (segmentIndex: number) => void;
+    displayStructures: (segmentIndex: number) => Promise<void>;
+    transform(s: StateObjectRef<PluginStateObject.Molecule.Structure>, matrix: Mat4): Promise<void>;
+    render(): JSX.Element;
+}