drugflow-molstar 0.2.1 → 0.2.2

package/lib/ui/export-superposition.js

@@ -1,71 +1,71 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SuperpositionModelExportUI = void 0;
-var tslib_1 = require("tslib");
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var base_1 = require("Molstar/mol-plugin-ui/base");
-var common_1 = require("Molstar/mol-plugin-ui/controls/common");
-var icons_1 = require("Molstar/mol-plugin-ui/controls/icons");
-var parameters_1 = require("Molstar/mol-plugin-ui/controls/parameters");
-var use_behavior_1 = require("Molstar/mol-plugin-ui/hooks/use-behavior");
-var param_definition_1 = require("Molstar/mol-util/param-definition");
-var superposition_export_1 = require("../superposition-export");
-var SuperpositionModelExportUI = /** @class */ (function (_super) {
-    tslib_1.__extends(SuperpositionModelExportUI, _super);
-    function SuperpositionModelExportUI() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    SuperpositionModelExportUI.prototype.defaultState = function () {
-        return {
-            header: 'Export Models',
-            isCollapsed: true,
-            brand: { accent: 'cyan', svg: icons_1.GetAppSvg }
-        };
-    };
-    SuperpositionModelExportUI.prototype.renderControls = function () {
-        return (0, jsx_runtime_1.jsx)(SuperpositionExportControls, { plugin: this.plugin });
-    };
-    return SuperpositionModelExportUI;
-}(base_1.CollapsableControls));
-exports.SuperpositionModelExportUI = SuperpositionModelExportUI;
-var Params = {
-    format: param_definition_1.ParamDefinition.Select('cif', [['cif', 'mmCIF'], ['bcif', 'Binary mmCIF']])
-};
-var DefaultParams = param_definition_1.ParamDefinition.getDefaultValues(Params);
-function SuperpositionExportControls(_a) {
-    var _this = this;
-    var plugin = _a.plugin;
-    var _b = (0, react_1.useState)(DefaultParams), params = _b[0], setParams = _b[1];
-    var _c = (0, react_1.useState)(false), exporting = _c[0], setExporting = _c[1];
-    (0, use_behavior_1.useBehavior)(plugin.managers.structure.hierarchy.behaviors.selection); // triggers UI update
-    var isBusy = (0, use_behavior_1.useBehavior)(plugin.behaviors.state.isBusy);
-    var hierarchy = plugin.managers.structure.hierarchy.current;
-    var label = 'Nothing to Export';
-    if (hierarchy.structures.length === 1) {
-        label = 'Export';
-    }
-    if (hierarchy.structures.length > 1) {
-        label = 'Export (as ZIP)';
-    }
-    var onExport = function () { return tslib_1.__awaiter(_this, void 0, void 0, function () {
-        return tslib_1.__generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    setExporting(true);
-                    _a.label = 1;
-                case 1:
-                    _a.trys.push([1, , 3, 4]);
-                    return [4 /*yield*/, (0, superposition_export_1.superpositionExportHierarchy)(plugin, { format: params.format })];
-                case 2:
-                    _a.sent();
-                    return [3 /*break*/, 4];
-                case 3:
-                    setExporting(false);
-                    return [7 /*endfinally*/];
-                case 4: return [2 /*return*/];
-            }
-        });
-    }); };
-    return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(parameters_1.ParameterControls, { params: Params, values: params, onChangeValues: setParams, isDisabled: isBusy || exporting }), (0, jsx_runtime_1.jsx)(common_1.Button, tslib_1.__assign({ onClick: onExport, style: { marginTop: 1 }, disabled: isBusy || hierarchy.structures.length === 0 || exporting, commit: hierarchy.structures.length ? 'on' : 'off' }, { children: label }))] });
-}
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SuperpositionModelExportUI = void 0;
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var base_1 = require("Molstar/mol-plugin-ui/base");
+var common_1 = require("Molstar/mol-plugin-ui/controls/common");
+var icons_1 = require("Molstar/mol-plugin-ui/controls/icons");
+var parameters_1 = require("Molstar/mol-plugin-ui/controls/parameters");
+var use_behavior_1 = require("Molstar/mol-plugin-ui/hooks/use-behavior");
+var param_definition_1 = require("Molstar/mol-util/param-definition");
+var superposition_export_1 = require("../superposition-export");
+var SuperpositionModelExportUI = /** @class */ (function (_super) {
+    tslib_1.__extends(SuperpositionModelExportUI, _super);
+    function SuperpositionModelExportUI() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    SuperpositionModelExportUI.prototype.defaultState = function () {
+        return {
+            header: 'Export Models',
+            isCollapsed: true,
+            brand: { accent: 'cyan', svg: icons_1.GetAppSvg }
+        };
+    };
+    SuperpositionModelExportUI.prototype.renderControls = function () {
+        return (0, jsx_runtime_1.jsx)(SuperpositionExportControls, { plugin: this.plugin });
+    };
+    return SuperpositionModelExportUI;
+}(base_1.CollapsableControls));
+exports.SuperpositionModelExportUI = SuperpositionModelExportUI;
+var Params = {
+    format: param_definition_1.ParamDefinition.Select('cif', [['cif', 'mmCIF'], ['bcif', 'Binary mmCIF']])
+};
+var DefaultParams = param_definition_1.ParamDefinition.getDefaultValues(Params);
+function SuperpositionExportControls(_a) {
+    var _this = this;
+    var plugin = _a.plugin;
+    var _b = (0, react_1.useState)(DefaultParams), params = _b[0], setParams = _b[1];
+    var _c = (0, react_1.useState)(false), exporting = _c[0], setExporting = _c[1];
+    (0, use_behavior_1.useBehavior)(plugin.managers.structure.hierarchy.behaviors.selection); // triggers UI update
+    var isBusy = (0, use_behavior_1.useBehavior)(plugin.behaviors.state.isBusy);
+    var hierarchy = plugin.managers.structure.hierarchy.current;
+    var label = 'Nothing to Export';
+    if (hierarchy.structures.length === 1) {
+        label = 'Export';
+    }
+    if (hierarchy.structures.length > 1) {
+        label = 'Export (as ZIP)';
+    }
+    var onExport = function () { return tslib_1.__awaiter(_this, void 0, void 0, function () {
+        return tslib_1.__generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    setExporting(true);
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, , 3, 4]);
+                    return [4 /*yield*/, (0, superposition_export_1.superpositionExportHierarchy)(plugin, { format: params.format })];
+                case 2:
+                    _a.sent();
+                    return [3 /*break*/, 4];
+                case 3:
+                    setExporting(false);
+                    return [7 /*endfinally*/];
+                case 4: return [2 /*return*/];
+            }
+        });
+    }); };
+    return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(parameters_1.ParameterControls, { params: Params, values: params, onChangeValues: setParams, isDisabled: isBusy || exporting }), (0, jsx_runtime_1.jsx)(common_1.Button, tslib_1.__assign({ onClick: onExport, style: { marginTop: 1 }, disabled: isBusy || hierarchy.structures.length === 0 || exporting, commit: hierarchy.structures.length ? 'on' : 'off' }, { children: label }))] });
+}

package/lib/ui/pdbe-left-panel.d.ts

@@ -1,18 +1,18 @@
-/// <reference types="react" />
-import { PluginUIComponent } from 'Molstar/mol-plugin-ui/base';
-export declare function WavesIconSvg(): JSX.Element;
-declare type LeftPanelTabName = 'none' | 'root' | 'data' | 'states' | 'settings' | 'help' | 'segments';
-export declare class LeftPanelControls extends PluginUIComponent<{}, {
-    tab: LeftPanelTabName;
-}> {
-    state: {
-        tab: LeftPanelTabName;
-    };
-    componentDidMount(): void;
-    set: (tab: LeftPanelTabName) => void;
-    tabs: {
-        [K in LeftPanelTabName]: JSX.Element;
-    };
-    render(): JSX.Element;
-}
-export {};
+/// <reference types="react" />
+import { PluginUIComponent } from 'Molstar/mol-plugin-ui/base';
+export declare function WavesIconSvg(): JSX.Element;
+declare type LeftPanelTabName = 'none' | 'root' | 'data' | 'states' | 'settings' | 'help' | 'segments';
+export declare class LeftPanelControls extends PluginUIComponent<{}, {
+    tab: LeftPanelTabName;
+}> {
+    state: {
+        tab: LeftPanelTabName;
+    };
+    componentDidMount(): void;
+    set: (tab: LeftPanelTabName) => void;
+    tabs: {
+        [K in LeftPanelTabName]: JSX.Element;
+    };
+    render(): JSX.Element;
+}
+export {};

package/lib/ui/pdbe-left-panel.js

@@ -1,167 +1,167 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.LeftPanelControls = exports.WavesIconSvg = void 0;
-var tslib_1 = require("tslib");
-var jsx_runtime_1 = require("react/jsx-runtime");
-var canvas3d_1 = require("Molstar/mol-canvas3d/canvas3d");
-var commands_1 = require("Molstar/mol-plugin/commands");
-var mol_state_1 = require("Molstar/mol-state");
-var base_1 = require("Molstar/mol-plugin-ui/base");
-var common_1 = require("Molstar/mol-plugin-ui/controls/common");
-var parameters_1 = require("Molstar/mol-plugin-ui/controls/parameters");
-var actions_1 = require("Molstar/mol-plugin-ui/state/actions");
-var snapshots_1 = require("Molstar/mol-plugin-ui/state/snapshots");
-var tree_1 = require("Molstar/mol-plugin-ui/state/tree");
-var help_1 = require("Molstar/mol-plugin-ui/viewport/help");
-var segment_tree_1 = require("./segment-tree");
-var icons_1 = require("Molstar/mol-plugin-ui/controls/icons");
-var help_2 = require("Molstar/mol-plugin-ui/viewport/help");
-var _WavesIcon = (0, jsx_runtime_1.jsx)("svg", tslib_1.__assign({ width: '24px', height: '24px', viewBox: '0 0 24 24' }, { children: (0, jsx_runtime_1.jsx)("path", { d: "M17 16.99c-1.35 0-2.2.42-2.95.8-.65.33-1.18.6-2.05.6-.9 0-1.4-.25-2.05-.6-.75-.38-1.57-.8-2.95-.8s-2.2.42-2.95.8c-.65.33-1.17.6-2.05.6v1.95c1.35 0 2.2-.42 2.95-.8.65-.33 1.17-.6 2.05-.6s1.4.25 2.05.6c.75.38 1.57.8 2.95.8s2.2-.42 2.95-.8c.65-.33 1.18-.6 2.05-.6.9 0 1.4.25 2.05.6.75.38 1.58.8 2.95.8v-1.95c-.9 0-1.4-.25-2.05-.6-.75-.38-1.6-.8-2.95-.8zm0-4.45c-1.35 0-2.2.43-2.95.8-.65.32-1.18.6-2.05.6-.9 0-1.4-.25-2.05-.6-.75-.38-1.57-.8-2.95-.8s-2.2.43-2.95.8c-.65.32-1.17.6-2.05.6v1.95c1.35 0 2.2-.43 2.95-.8.65-.35 1.15-.6 2.05-.6s1.4.25 2.05.6c.75.38 1.57.8 2.95.8s2.2-.43 2.95-.8c.65-.35 1.15-.6 2.05-.6s1.4.25 2.05.6c.75.38 1.58.8 2.95.8v-1.95c-.9 0-1.4-.25-2.05-.6-.75-.38-1.6-.8-2.95-.8zm2.95-8.08c-.75-.38-1.58-.8-2.95-.8s-2.2.42-2.95.8c-.65.32-1.18.6-2.05.6-.9 0-1.4-.25-2.05-.6-.75-.37-1.57-.8-2.95-.8s-2.2.42-2.95.8c-.65.33-1.17.6-2.05.6v1.93c1.35 0 2.2-.43 2.95-.8.65-.33 1.17-.6 2.05-.6s1.4.25 2.05.6c.75.38 1.57.8 2.95.8s2.2-.43 2.95-.8c.65-.32 1.18-.6 2.05-.6.9 0 1.4.25 2.05.6.75.38 1.58.8 2.95.8V5.04c-.9 0-1.4-.25-2.05-.58zM17 8.09c-1.35 0-2.2.43-2.95.8-.65.35-1.15.6-2.05.6s-1.4-.25-2.05-.6c-.75-.38-1.57-.8-2.95-.8s-2.2.43-2.95.8c-.65.35-1.15.6-2.05.6v1.95c1.35 0 2.2-.43 2.95-.8.65-.32 1.18-.6 2.05-.6s1.4.25 2.05.6c.75.38 1.57.8 2.95.8s2.2-.43 2.95-.8c.65-.32 1.18-.6 2.05-.6.9 0 1.4.25 2.05.6.75.38 1.58.8 2.95.8V9.49c-.9 0-1.4-.25-2.05-.6-.75-.38-1.6-.8-2.95-.8z" }) }));
-function WavesIconSvg() { return _WavesIcon; }
-exports.WavesIconSvg = WavesIconSvg;
-var LeftPanelControls = /** @class */ (function (_super) {
-    tslib_1.__extends(LeftPanelControls, _super);
-    function LeftPanelControls() {
-        var _this = this;
-        var _a;
-        _this = _super.apply(this, arguments) || this;
-        _this.state = { tab: _this.plugin.behaviors.layout.leftPanelTabName.value };
-        _this.set = function (tab) {
-            if (_this.state.tab === tab) {
-                _this.setState({ tab: 'none' }, function () { return _this.plugin.behaviors.layout.leftPanelTabName.next('none'); });
-                commands_1.PluginCommands.Layout.Update(_this.plugin, { state: { regionState: tslib_1.__assign(tslib_1.__assign({}, _this.plugin.layout.state.regionState), { left: 'collapsed' }) } });
-                return;
-            }
-            _this.setState({ tab: tab }, function () { return _this.plugin.behaviors.layout.leftPanelTabName.next(tab); });
-            if (_this.plugin.layout.state.regionState.left !== 'full') {
-                commands_1.PluginCommands.Layout.Update(_this.plugin, { state: { regionState: tslib_1.__assign(tslib_1.__assign({}, _this.plugin.layout.state.regionState), { left: 'full' }) } });
-            }
-        };
-        _this.tabs = {
-            'none': (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}),
-            'root': (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(common_1.SectionHeader, { icon: icons_1.HomeOutlinedSvg, title: 'Home' }), (0, jsx_runtime_1.jsx)(actions_1.StateObjectActions, { state: _this.plugin.state.data, nodeRef: mol_state_1.StateTransform.RootRef, hideHeader: true, initiallyCollapsed: true, alwaysExpandFirst: true }), ((_a = _this.plugin.spec.components) === null || _a === void 0 ? void 0 : _a.remoteState) !== 'none' && (0, jsx_runtime_1.jsx)(snapshots_1.RemoteStateSnapshots, { listOnly: true })] }),
-            'data': (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(common_1.SectionHeader, { icon: icons_1.AccountTreeOutlinedSvg, title: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(RemoveAllButton, {}), " State Tree"] }) }), (0, jsx_runtime_1.jsx)(tree_1.StateTree, { state: _this.plugin.state.data })] }),
-            'segments': (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(segment_tree_1.SegmentTree, {}) }),
-            'states': (0, jsx_runtime_1.jsx)(snapshots_1.StateSnapshots, {}),
-            'settings': (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(common_1.SectionHeader, { icon: icons_1.TuneSvg, title: 'Plugin Settings' }), (0, jsx_runtime_1.jsx)(FullSettings, {})] }),
-            'help': (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(common_1.SectionHeader, { icon: icons_1.HelpOutlineSvg, title: 'Help' }), (0, jsx_runtime_1.jsx)(help_1.HelpContent, {}), (0, jsx_runtime_1.jsx)(SuperpositionHelpContent, {})] })
-        };
-        return _this;
-    }
-    LeftPanelControls.prototype.componentDidMount = function () {
-        var _this = this;
-        this.subscribe(this.plugin.behaviors.layout.leftPanelTabName, function (tab) {
-            if (_this.state.tab !== tab)
-                _this.setState({ tab: tab });
-            if (tab === 'none' && _this.plugin.layout.state.regionState.left !== 'collapsed') {
-                commands_1.PluginCommands.Layout.Update(_this.plugin, { state: { regionState: tslib_1.__assign(tslib_1.__assign({}, _this.plugin.layout.state.regionState), { left: 'collapsed' }) } });
-            }
-        });
-        this.subscribe(this.plugin.state.data.events.changed, function (_a) {
-            var state = _a.state;
-            if (_this.state.tab !== 'data')
-                return;
-            if (state.cells.size === 1)
-                _this.set('root');
-        });
-    };
-    LeftPanelControls.prototype.render = function () {
-        var _this = this;
-        var tab = this.state.tab;
-        var customState = this.plugin.customState;
-        return (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: 'msp-left-panel-controls' }, { children: [(0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: 'msp-left-panel-controls-buttons' }, { children: [(0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.HelpOutlineSvg, toggleState: tab === 'help', transparent: true, onClick: function () { return _this.set('help'); }, title: 'Help' }), customState && customState.initParams && customState.initParams.superposition && (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: WavesIconSvg, toggleState: tab === 'segments', transparent: true, onClick: function () { return _this.set('segments'); }, title: 'Superpose segments' }), (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'msp-left-panel-controls-buttons-bottom' }, { children: (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.TuneSvg, toggleState: tab === 'settings', transparent: true, onClick: function () { return _this.set('settings'); }, title: 'Settings' }) }))] })), (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'msp-scrollable-container' }, { children: this.tabs[tab] }))] }));
-    };
-    return LeftPanelControls;
-}(base_1.PluginUIComponent));
-exports.LeftPanelControls = LeftPanelControls;
-// class DataIcon extends PluginUIComponent<{ set: (tab: LeftPanelTabName) => void }, { changed: boolean }> {
-//     state = { changed: false };
-//     get tab() {
-//         return this.plugin.behaviors.layout.leftPanelTabName.value;
-//     }
-//     componentDidMount() {
-//         this.subscribe(this.plugin.behaviors.layout.leftPanelTabName, tab => {
-//             if (this.tab === 'data') this.setState({ changed: false });
-//             else this.forceUpdate();
-//         });
-//         this.subscribe(this.plugin.state.data.events.changed, state => {
-//             if (this.tab !== 'data') this.setState({ changed: true });
-//         });
-//     }
-//     render() {
-//         return <IconButton
-//             svg={AccountTreeOutlinedSvg} toggleState={this.tab === 'data'} transparent onClick={() => this.props.set('data')} title='State Tree'
-//             style={{ position: 'relative' }} extraContent={this.state.changed ? <div className='msp-left-panel-controls-button-data-dirty' /> : void 0} />;
-//     }
-// }
-var FullSettings = /** @class */ (function (_super) {
-    tslib_1.__extends(FullSettings, _super);
-    function FullSettings() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.setSettings = function (p) {
-            var _a;
-            commands_1.PluginCommands.Canvas3D.SetSettings(_this.plugin, { settings: (_a = {}, _a[p.name] = p.value, _a) });
-        };
-        return _this;
-    }
-    FullSettings.prototype.componentDidMount = function () {
-        var _this = this;
-        this.subscribe(this.plugin.events.canvas3d.settingsUpdated, function () { return _this.forceUpdate(); });
-        this.subscribe(this.plugin.layout.events.updated, function () { return _this.forceUpdate(); });
-        this.subscribe(this.plugin.canvas3d.camera.stateChanged, function (state) {
-            if (state.radiusMax !== undefined || state.radius !== undefined) {
-                _this.forceUpdate();
-            }
-        });
-    };
-    FullSettings.prototype.render = function () {
-        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: this.plugin.canvas3d && (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(common_1.SectionHeader, { title: 'Viewport' }), (0, jsx_runtime_1.jsx)(parameters_1.ParameterControls, { params: canvas3d_1.Canvas3DParams, values: this.plugin.canvas3d.props, onChange: this.setSettings })] }) });
-    };
-    return FullSettings;
-}(base_1.PluginUIComponent));
-var RemoveAllButton = /** @class */ (function (_super) {
-    tslib_1.__extends(RemoveAllButton, _super);
-    function RemoveAllButton() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.remove = function (e) {
-            e.preventDefault();
-            commands_1.PluginCommands.State.RemoveObject(_this.plugin, { state: _this.plugin.state.data, ref: mol_state_1.StateTransform.RootRef });
-        };
-        return _this;
-    }
-    RemoveAllButton.prototype.componentDidMount = function () {
-        var _this = this;
-        this.subscribe(this.plugin.state.events.cell.created, function (e) {
-            if (e.cell.transform.parent === mol_state_1.StateTransform.RootRef)
-                _this.forceUpdate();
-        });
-        this.subscribe(this.plugin.state.events.cell.removed, function (e) {
-            if (e.parent === mol_state_1.StateTransform.RootRef)
-                _this.forceUpdate();
-        });
-    };
-    RemoveAllButton.prototype.render = function () {
-        var count = this.plugin.state.data.tree.children.get(mol_state_1.StateTransform.RootRef).size;
-        if (count === 0)
-            return null;
-        return (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.DeleteOutlinedSvg, onClick: this.remove, title: 'Remove All', style: { display: 'inline-block' }, small: true, className: 'msp-no-hover-outline', transparent: true });
-    };
-    return RemoveAllButton;
-}(base_1.PluginUIComponent));
-function HelpSection(props) {
-    return (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'msp-simple-help-section' }, { children: props.header }));
-}
-var SuperpositionHelpContent = /** @class */ (function (_super) {
-    tslib_1.__extends(SuperpositionHelpContent, _super);
-    function SuperpositionHelpContent() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    SuperpositionHelpContent.prototype.componentDidMount = function () {
-        var _this = this;
-        this.subscribe(this.plugin.events.canvas3d.settingsUpdated, function () { return _this.forceUpdate(); });
-    };
-    SuperpositionHelpContent.prototype.render = function () {
-        return (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(HelpSection, { header: 'Superposition' }), (0, jsx_runtime_1.jsx)(help_2.HelpGroup, tslib_1.__assign({ header: 'Segment' }, { children: (0, jsx_runtime_1.jsx)(help_2.HelpText, { children: (0, jsx_runtime_1.jsx)("p", { children: "Discrete UniProt sequence range mapped to the structure" }) }) })), (0, jsx_runtime_1.jsx)(help_2.HelpGroup, tslib_1.__assign({ header: 'Cluster' }, { children: (0, jsx_runtime_1.jsx)(help_2.HelpText, { children: (0, jsx_runtime_1.jsx)("p", { children: "Structural chains that possess significantly close superposition Q-score" }) }) })), (0, jsx_runtime_1.jsx)(help_2.HelpGroup, tslib_1.__assign({ header: 'Representative chain' }, { children: (0, jsx_runtime_1.jsx)(help_2.HelpText, { children: (0, jsx_runtime_1.jsx)("p", { children: "The best-ranked chain within a cluster chosen based on the model quality, resolution, observed residues ratio and UniProt sequence coverage" }) }) }))] });
-    };
-    return SuperpositionHelpContent;
-}(base_1.PluginUIComponent));
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LeftPanelControls = exports.WavesIconSvg = void 0;
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var canvas3d_1 = require("Molstar/mol-canvas3d/canvas3d");
+var commands_1 = require("Molstar/mol-plugin/commands");
+var mol_state_1 = require("Molstar/mol-state");
+var base_1 = require("Molstar/mol-plugin-ui/base");
+var common_1 = require("Molstar/mol-plugin-ui/controls/common");
+var parameters_1 = require("Molstar/mol-plugin-ui/controls/parameters");
+var actions_1 = require("Molstar/mol-plugin-ui/state/actions");
+var snapshots_1 = require("Molstar/mol-plugin-ui/state/snapshots");
+var tree_1 = require("Molstar/mol-plugin-ui/state/tree");
+var help_1 = require("Molstar/mol-plugin-ui/viewport/help");
+var segment_tree_1 = require("./segment-tree");
+var icons_1 = require("Molstar/mol-plugin-ui/controls/icons");
+var help_2 = require("Molstar/mol-plugin-ui/viewport/help");
+var _WavesIcon = (0, jsx_runtime_1.jsx)("svg", tslib_1.__assign({ width: '24px', height: '24px', viewBox: '0 0 24 24' }, { children: (0, jsx_runtime_1.jsx)("path", { d: "M17 16.99c-1.35 0-2.2.42-2.95.8-.65.33-1.18.6-2.05.6-.9 0-1.4-.25-2.05-.6-.75-.38-1.57-.8-2.95-.8s-2.2.42-2.95.8c-.65.33-1.17.6-2.05.6v1.95c1.35 0 2.2-.42 2.95-.8.65-.33 1.17-.6 2.05-.6s1.4.25 2.05.6c.75.38 1.57.8 2.95.8s2.2-.42 2.95-.8c.65-.33 1.18-.6 2.05-.6.9 0 1.4.25 2.05.6.75.38 1.58.8 2.95.8v-1.95c-.9 0-1.4-.25-2.05-.6-.75-.38-1.6-.8-2.95-.8zm0-4.45c-1.35 0-2.2.43-2.95.8-.65.32-1.18.6-2.05.6-.9 0-1.4-.25-2.05-.6-.75-.38-1.57-.8-2.95-.8s-2.2.43-2.95.8c-.65.32-1.17.6-2.05.6v1.95c1.35 0 2.2-.43 2.95-.8.65-.35 1.15-.6 2.05-.6s1.4.25 2.05.6c.75.38 1.57.8 2.95.8s2.2-.43 2.95-.8c.65-.35 1.15-.6 2.05-.6s1.4.25 2.05.6c.75.38 1.58.8 2.95.8v-1.95c-.9 0-1.4-.25-2.05-.6-.75-.38-1.6-.8-2.95-.8zm2.95-8.08c-.75-.38-1.58-.8-2.95-.8s-2.2.42-2.95.8c-.65.32-1.18.6-2.05.6-.9 0-1.4-.25-2.05-.6-.75-.37-1.57-.8-2.95-.8s-2.2.42-2.95.8c-.65.33-1.17.6-2.05.6v1.93c1.35 0 2.2-.43 2.95-.8.65-.33 1.17-.6 2.05-.6s1.4.25 2.05.6c.75.38 1.57.8 2.95.8s2.2-.43 2.95-.8c.65-.32 1.18-.6 2.05-.6.9 0 1.4.25 2.05.6.75.38 1.58.8 2.95.8V5.04c-.9 0-1.4-.25-2.05-.58zM17 8.09c-1.35 0-2.2.43-2.95.8-.65.35-1.15.6-2.05.6s-1.4-.25-2.05-.6c-.75-.38-1.57-.8-2.95-.8s-2.2.43-2.95.8c-.65.35-1.15.6-2.05.6v1.95c1.35 0 2.2-.43 2.95-.8.65-.32 1.18-.6 2.05-.6s1.4.25 2.05.6c.75.38 1.57.8 2.95.8s2.2-.43 2.95-.8c.65-.32 1.18-.6 2.05-.6.9 0 1.4.25 2.05.6.75.38 1.58.8 2.95.8V9.49c-.9 0-1.4-.25-2.05-.6-.75-.38-1.6-.8-2.95-.8z" }) }));
+function WavesIconSvg() { return _WavesIcon; }
+exports.WavesIconSvg = WavesIconSvg;
+var LeftPanelControls = /** @class */ (function (_super) {
+    tslib_1.__extends(LeftPanelControls, _super);
+    function LeftPanelControls() {
+        var _this = this;
+        var _a;
+        _this = _super.apply(this, arguments) || this;
+        _this.state = { tab: _this.plugin.behaviors.layout.leftPanelTabName.value };
+        _this.set = function (tab) {
+            if (_this.state.tab === tab) {
+                _this.setState({ tab: 'none' }, function () { return _this.plugin.behaviors.layout.leftPanelTabName.next('none'); });
+                commands_1.PluginCommands.Layout.Update(_this.plugin, { state: { regionState: tslib_1.__assign(tslib_1.__assign({}, _this.plugin.layout.state.regionState), { left: 'collapsed' }) } });
+                return;
+            }
+            _this.setState({ tab: tab }, function () { return _this.plugin.behaviors.layout.leftPanelTabName.next(tab); });
+            if (_this.plugin.layout.state.regionState.left !== 'full') {
+                commands_1.PluginCommands.Layout.Update(_this.plugin, { state: { regionState: tslib_1.__assign(tslib_1.__assign({}, _this.plugin.layout.state.regionState), { left: 'full' }) } });
+            }
+        };
+        _this.tabs = {
+            'none': (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}),
+            'root': (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(common_1.SectionHeader, { icon: icons_1.HomeOutlinedSvg, title: 'Home' }), (0, jsx_runtime_1.jsx)(actions_1.StateObjectActions, { state: _this.plugin.state.data, nodeRef: mol_state_1.StateTransform.RootRef, hideHeader: true, initiallyCollapsed: true, alwaysExpandFirst: true }), ((_a = _this.plugin.spec.components) === null || _a === void 0 ? void 0 : _a.remoteState) !== 'none' && (0, jsx_runtime_1.jsx)(snapshots_1.RemoteStateSnapshots, { listOnly: true })] }),
+            'data': (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(common_1.SectionHeader, { icon: icons_1.AccountTreeOutlinedSvg, title: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(RemoveAllButton, {}), " State Tree"] }) }), (0, jsx_runtime_1.jsx)(tree_1.StateTree, { state: _this.plugin.state.data })] }),
+            'segments': (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(segment_tree_1.SegmentTree, {}) }),
+            'states': (0, jsx_runtime_1.jsx)(snapshots_1.StateSnapshots, {}),
+            'settings': (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(common_1.SectionHeader, { icon: icons_1.TuneSvg, title: 'Plugin Settings' }), (0, jsx_runtime_1.jsx)(FullSettings, {})] }),
+            'help': (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(common_1.SectionHeader, { icon: icons_1.HelpOutlineSvg, title: 'Help' }), (0, jsx_runtime_1.jsx)(help_1.HelpContent, {}), (0, jsx_runtime_1.jsx)(SuperpositionHelpContent, {})] })
+        };
+        return _this;
+    }
+    LeftPanelControls.prototype.componentDidMount = function () {
+        var _this = this;
+        this.subscribe(this.plugin.behaviors.layout.leftPanelTabName, function (tab) {
+            if (_this.state.tab !== tab)
+                _this.setState({ tab: tab });
+            if (tab === 'none' && _this.plugin.layout.state.regionState.left !== 'collapsed') {
+                commands_1.PluginCommands.Layout.Update(_this.plugin, { state: { regionState: tslib_1.__assign(tslib_1.__assign({}, _this.plugin.layout.state.regionState), { left: 'collapsed' }) } });
+            }
+        });
+        this.subscribe(this.plugin.state.data.events.changed, function (_a) {
+            var state = _a.state;
+            if (_this.state.tab !== 'data')
+                return;
+            if (state.cells.size === 1)
+                _this.set('root');
+        });
+    };
+    LeftPanelControls.prototype.render = function () {
+        var _this = this;
+        var tab = this.state.tab;
+        var customState = this.plugin.customState;
+        return (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: 'msp-left-panel-controls' }, { children: [(0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: 'msp-left-panel-controls-buttons' }, { children: [(0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.HelpOutlineSvg, toggleState: tab === 'help', transparent: true, onClick: function () { return _this.set('help'); }, title: 'Help' }), customState && customState.initParams && customState.initParams.superposition && (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: WavesIconSvg, toggleState: tab === 'segments', transparent: true, onClick: function () { return _this.set('segments'); }, title: 'Superpose segments' }), (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'msp-left-panel-controls-buttons-bottom' }, { children: (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.TuneSvg, toggleState: tab === 'settings', transparent: true, onClick: function () { return _this.set('settings'); }, title: 'Settings' }) }))] })), (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'msp-scrollable-container' }, { children: this.tabs[tab] }))] }));
+    };
+    return LeftPanelControls;
+}(base_1.PluginUIComponent));
+exports.LeftPanelControls = LeftPanelControls;
+// class DataIcon extends PluginUIComponent<{ set: (tab: LeftPanelTabName) => void }, { changed: boolean }> {
+//     state = { changed: false };
+//     get tab() {
+//         return this.plugin.behaviors.layout.leftPanelTabName.value;
+//     }
+//     componentDidMount() {
+//         this.subscribe(this.plugin.behaviors.layout.leftPanelTabName, tab => {
+//             if (this.tab === 'data') this.setState({ changed: false });
+//             else this.forceUpdate();
+//         });
+//         this.subscribe(this.plugin.state.data.events.changed, state => {
+//             if (this.tab !== 'data') this.setState({ changed: true });
+//         });
+//     }
+//     render() {
+//         return <IconButton
+//             svg={AccountTreeOutlinedSvg} toggleState={this.tab === 'data'} transparent onClick={() => this.props.set('data')} title='State Tree'
+//             style={{ position: 'relative' }} extraContent={this.state.changed ? <div className='msp-left-panel-controls-button-data-dirty' /> : void 0} />;
+//     }
+// }
+var FullSettings = /** @class */ (function (_super) {
+    tslib_1.__extends(FullSettings, _super);
+    function FullSettings() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.setSettings = function (p) {
+            var _a;
+            commands_1.PluginCommands.Canvas3D.SetSettings(_this.plugin, { settings: (_a = {}, _a[p.name] = p.value, _a) });
+        };
+        return _this;
+    }
+    FullSettings.prototype.componentDidMount = function () {
+        var _this = this;
+        this.subscribe(this.plugin.events.canvas3d.settingsUpdated, function () { return _this.forceUpdate(); });
+        this.subscribe(this.plugin.layout.events.updated, function () { return _this.forceUpdate(); });
+        this.subscribe(this.plugin.canvas3d.camera.stateChanged, function (state) {
+            if (state.radiusMax !== undefined || state.radius !== undefined) {
+                _this.forceUpdate();
+            }
+        });
+    };
+    FullSettings.prototype.render = function () {
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: this.plugin.canvas3d && (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(common_1.SectionHeader, { title: 'Viewport' }), (0, jsx_runtime_1.jsx)(parameters_1.ParameterControls, { params: canvas3d_1.Canvas3DParams, values: this.plugin.canvas3d.props, onChange: this.setSettings })] }) });
+    };
+    return FullSettings;
+}(base_1.PluginUIComponent));
+var RemoveAllButton = /** @class */ (function (_super) {
+    tslib_1.__extends(RemoveAllButton, _super);
+    function RemoveAllButton() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.remove = function (e) {
+            e.preventDefault();
+            commands_1.PluginCommands.State.RemoveObject(_this.plugin, { state: _this.plugin.state.data, ref: mol_state_1.StateTransform.RootRef });
+        };
+        return _this;
+    }
+    RemoveAllButton.prototype.componentDidMount = function () {
+        var _this = this;
+        this.subscribe(this.plugin.state.events.cell.created, function (e) {
+            if (e.cell.transform.parent === mol_state_1.StateTransform.RootRef)
+                _this.forceUpdate();
+        });
+        this.subscribe(this.plugin.state.events.cell.removed, function (e) {
+            if (e.parent === mol_state_1.StateTransform.RootRef)
+                _this.forceUpdate();
+        });
+    };
+    RemoveAllButton.prototype.render = function () {
+        var count = this.plugin.state.data.tree.children.get(mol_state_1.StateTransform.RootRef).size;
+        if (count === 0)
+            return null;
+        return (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.DeleteOutlinedSvg, onClick: this.remove, title: 'Remove All', style: { display: 'inline-block' }, small: true, className: 'msp-no-hover-outline', transparent: true });
+    };
+    return RemoveAllButton;
+}(base_1.PluginUIComponent));
+function HelpSection(props) {
+    return (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'msp-simple-help-section' }, { children: props.header }));
+}
+var SuperpositionHelpContent = /** @class */ (function (_super) {
+    tslib_1.__extends(SuperpositionHelpContent, _super);
+    function SuperpositionHelpContent() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    SuperpositionHelpContent.prototype.componentDidMount = function () {
+        var _this = this;
+        this.subscribe(this.plugin.events.canvas3d.settingsUpdated, function () { return _this.forceUpdate(); });
+    };
+    SuperpositionHelpContent.prototype.render = function () {
+        return (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(HelpSection, { header: 'Superposition' }), (0, jsx_runtime_1.jsx)(help_2.HelpGroup, tslib_1.__assign({ header: 'Segment' }, { children: (0, jsx_runtime_1.jsx)(help_2.HelpText, { children: (0, jsx_runtime_1.jsx)("p", { children: "Discrete UniProt sequence range mapped to the structure" }) }) })), (0, jsx_runtime_1.jsx)(help_2.HelpGroup, tslib_1.__assign({ header: 'Cluster' }, { children: (0, jsx_runtime_1.jsx)(help_2.HelpText, { children: (0, jsx_runtime_1.jsx)("p", { children: "Structural chains that possess significantly close superposition Q-score" }) }) })), (0, jsx_runtime_1.jsx)(help_2.HelpGroup, tslib_1.__assign({ header: 'Representative chain' }, { children: (0, jsx_runtime_1.jsx)(help_2.HelpText, { children: (0, jsx_runtime_1.jsx)("p", { children: "The best-ranked chain within a cluster chosen based on the model quality, resolution, observed residues ratio and UniProt sequence coverage" }) }) }))] });
+    };
+    return SuperpositionHelpContent;
+}(base_1.PluginUIComponent));

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

@@ -1,20 +1,20 @@
-import * as React from 'react';
-import { PluginUIComponent } from 'Molstar/mol-plugin-ui/base';
-interface ImageControlsState {
-    showPreview: boolean;
-    isDisabled: boolean;
-    imageData?: string;
-}
-export declare class DownloadScreenshotControls extends PluginUIComponent<{
-    close: () => void;
-}, ImageControlsState> {
-    state: ImageControlsState;
-    private download;
-    private copy;
-    private copyImg;
-    componentDidMount(): void;
-    componentWillUnmount(): void;
-    open: (e: React.ChangeEvent<HTMLInputElement>) => void;
-    render(): JSX.Element;
-}
-export {};
+import * as React from 'react';
+import { PluginUIComponent } from 'Molstar/mol-plugin-ui/base';
+interface ImageControlsState {
+    showPreview: boolean;
+    isDisabled: boolean;
+    imageData?: string;
+}
+export declare class DownloadScreenshotControls extends PluginUIComponent<{
+    close: () => void;
+}, ImageControlsState> {
+    state: ImageControlsState;
+    private download;
+    private copy;
+    private copyImg;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    open: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    render(): JSX.Element;
+}
+export {};