drugflow-molstar 0.3.77 → 0.4.1

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

@@ -1,78 +1,69 @@
 "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" }) }));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const canvas3d_1 = require("Molstar/mol-canvas3d/canvas3d");
+const commands_1 = require("Molstar/mol-plugin/commands");
+const mol_state_1 = require("Molstar/mol-state");
+const base_1 = require("Molstar/mol-plugin-ui/base");
+const common_1 = require("Molstar/mol-plugin-ui/controls/common");
+const parameters_1 = require("Molstar/mol-plugin-ui/controls/parameters");
+const actions_1 = require("Molstar/mol-plugin-ui/state/actions");
+const snapshots_1 = require("Molstar/mol-plugin-ui/state/snapshots");
+const tree_1 = require("Molstar/mol-plugin-ui/state/tree");
+const help_1 = require("Molstar/mol-plugin-ui/viewport/help");
+const segment_tree_1 = require("./segment-tree");
+const icons_1 = require("Molstar/mol-plugin-ui/controls/icons");
+const help_2 = require("Molstar/mol-plugin-ui/viewport/help");
+const _WavesIcon = (0, jsx_runtime_1.jsx)("svg", { 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' }) } });
+class LeftPanelControls extends base_1.PluginUIComponent {
+    constructor() {
+        super(...arguments);
+        this.state = { tab: this.plugin.behaviors.layout.leftPanelTabName.value };
+        this.set = (tab) => {
+            if (this.state.tab === tab) {
+                this.setState({ tab: 'none' }, () => this.plugin.behaviors.layout.leftPanelTabName.next('none'));
+                commands_1.PluginCommands.Layout.Update(this.plugin, { state: { regionState: { ...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.setState({ tab }, () => this.plugin.behaviors.layout.leftPanelTabName.next(tab));
+            if (this.plugin.layout.state.regionState.left !== 'full') {
+                commands_1.PluginCommands.Layout.Update(this.plugin, { state: { regionState: { ...this.plugin.layout.state.regionState, left: 'full' } } });
             }
         };
-        _this.tabs = {
+        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 })] }),
+            '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 }), this.plugin.spec.components?.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' }) } });
+    componentDidMount() {
+        this.subscribe(this.plugin.behaviors.layout.leftPanelTabName, tab => {
+            if (this.state.tab !== tab)
+                this.setState({ tab });
+            if (tab === 'none' && this.plugin.layout.state.regionState.left !== 'collapsed') {
+                commands_1.PluginCommands.Layout.Update(this.plugin, { state: { regionState: { ...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')
+        this.subscribe(this.plugin.state.data.events.changed, ({ state }) => {
+            if (this.state.tab !== 'data')
                 return;
             if (state.cells.size === 1)
-                _this.set('root');
+                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));
+    }
+    render() {
+        const tab = this.state.tab;
+        const customState = this.plugin.customState;
+        return (0, jsx_runtime_1.jsxs)("div", { className: 'msp-left-panel-controls', children: [(0, jsx_runtime_1.jsxs)("div", { 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: () => 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: () => this.set('segments'), title: 'Superpose segments' }), (0, jsx_runtime_1.jsx)("div", { 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: () => this.set('settings'), title: 'Settings' }) })] }), (0, jsx_runtime_1.jsx)("div", { className: 'msp-scrollable-container', children: this.tabs[tab] })] });
+    }
+}
 exports.LeftPanelControls = LeftPanelControls;
 // class DataIcon extends PluginUIComponent<{ set: (tab: LeftPanelTabName) => void }, { changed: boolean }> {
 //     state = { changed: false };
@@ -94,74 +85,59 @@ exports.LeftPanelControls = LeftPanelControls;
 //             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) });
+class FullSettings extends base_1.PluginUIComponent {
+    constructor() {
+        super(...arguments);
+        this.setSettings = (p) => {
+            commands_1.PluginCommands.Canvas3D.SetSettings(this.plugin, { settings: { [p.name]: p.value } });
         };
-        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) {
+    componentDidMount() {
+        this.subscribe(this.plugin.events.canvas3d.settingsUpdated, () => this.forceUpdate());
+        this.subscribe(this.plugin.layout.events.updated, () => this.forceUpdate());
+        this.subscribe(this.plugin.canvas3d.camera.stateChanged, state => {
             if (state.radiusMax !== undefined || state.radius !== undefined) {
-                _this.forceUpdate();
+                this.forceUpdate();
             }
         });
-    };
-    FullSettings.prototype.render = function () {
+    }
+    render() {
         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) {
+    }
+}
+class RemoveAllButton extends base_1.PluginUIComponent {
+    constructor() {
+        super(...arguments);
+        this.remove = (e) => {
             e.preventDefault();
-            commands_1.PluginCommands.State.RemoveObject(_this.plugin, { state: _this.plugin.state.data, ref: mol_state_1.StateTransform.RootRef });
+            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) {
+    componentDidMount() {
+        this.subscribe(this.plugin.state.events.cell.created, e => {
             if (e.cell.transform.parent === mol_state_1.StateTransform.RootRef)
-                _this.forceUpdate();
+                this.forceUpdate();
         });
-        this.subscribe(this.plugin.state.events.cell.removed, function (e) {
+        this.subscribe(this.plugin.state.events.cell.removed, e => {
             if (e.parent === mol_state_1.StateTransform.RootRef)
-                _this.forceUpdate();
+                this.forceUpdate();
         });
-    };
-    RemoveAllButton.prototype.render = function () {
-        var count = this.plugin.state.data.tree.children.get(mol_state_1.StateTransform.RootRef).size;
+    }
+    render() {
+        const 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 }));
+    return (0, jsx_runtime_1.jsx)("div", { 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;
+class SuperpositionHelpContent extends base_1.PluginUIComponent {
+    componentDidMount() {
+        this.subscribe(this.plugin.events.canvas3d.settingsUpdated, () => this.forceUpdate());
     }
-    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));
+    render() {
+        return (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(HelpSection, { header: 'Superposition' }), (0, jsx_runtime_1.jsx)(help_2.HelpGroup, { 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, { 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, { 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" }) }) })] });
+    }
+}

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

@@ -15,6 +15,6 @@ export declare class DownloadScreenshotControls extends PluginUIComponent<{
     componentDidMount(): void;
     componentWillUnmount(): void;
     open: (e: React.ChangeEvent<HTMLInputElement>) => void;
-    render(): JSX.Element;
+    render(): import("react/jsx-runtime").JSX.Element;
 }
 export {};

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

@@ -1,101 +1,72 @@
 "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 = {
+const jsx_runtime_1 = require("react/jsx-runtime");
+const parameters_1 = require("Molstar/mol-plugin-ui/controls/parameters");
+const base_1 = require("Molstar/mol-plugin-ui/base");
+const screenshot_1 = require("Molstar/mol-plugin-ui/controls/screenshot");
+const common_1 = require("Molstar/mol-plugin-ui/controls/common");
+const commands_1 = require("Molstar/mol-plugin/commands");
+const use_behavior_1 = require("Molstar/mol-plugin-ui/hooks/use-behavior");
+const icons_1 = require("Molstar/mol-plugin-ui/controls/icons");
+class DownloadScreenshotControls extends base_1.PluginUIComponent {
+    constructor() {
+        super(...arguments);
+        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.download = () => {
+            this.plugin.helpers.viewportScreenshot?.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) {
+        this.copy = async () => {
+            try {
+                await this.plugin.helpers.viewportScreenshot?.copyToClipboard();
+                commands_1.PluginCommands.Toast.Show(this.plugin, {
+                    message: 'Copied to clipboard.',
+                    title: 'Screenshot',
+                    timeoutMs: 1500
+                });
+            }
+            catch {
+                return this.copyImg();
+            }
+        };
+        this.copyImg = async () => {
+            const src = await this.plugin.helpers.viewportScreenshot?.getImageDataUri();
+            this.setState({ imageData: src });
+        };
+        this.open = (e) => {
             if (!e.target.files || !e.target.files[0])
                 return;
-            commands_1.PluginCommands.State.Snapshots.OpenFile(_this.plugin, { file: e.target.files[0] });
+            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 });
+    componentDidMount() {
+        this.subscribe(this.plugin.state.data.behaviors.isUpdating, v => {
+            this.setState({ isDisabled: v });
         });
-    };
-    DownloadScreenshotControls.prototype.componentWillUnmount = function () {
+    }
+    componentWillUnmount() {
         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));
+    }
+    render() {
+        const hasClipboardApi = !!navigator.clipboard?.write;
+        return (0, jsx_runtime_1.jsxs)("div", { children: [this.state.showPreview && (0, jsx_runtime_1.jsxs)("div", { 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", { className: 'msp-flex-row', children: [!this.state.imageData && (0, jsx_runtime_1.jsx)(common_1.Button, { 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, { onClick: () => this.setState({ imageData: void 0 }), disabled: this.state.isDisabled, children: "Clear" }), (0, jsx_runtime_1.jsx)(common_1.Button, { icon: icons_1.GetAppSvg, onClick: this.download, disabled: this.state.isDisabled, children: "Download" })] }), this.state.imageData && (0, jsx_runtime_1.jsxs)("div", { 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 })] });
+    }
+}
 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 ScreenshotParams({ plugin, isDisabled }) {
+    const helper = plugin.helpers.viewportScreenshot;
+    const values = (0, use_behavior_1.useBehavior)(helper.behaviors.values);
+    return (0, jsx_runtime_1.jsx)(parameters_1.ParameterControls, { params: helper.params, values: values, onChangeValues: v => 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);
+function CropControls({ plugin }) {
+    const helper = plugin.helpers.viewportScreenshot;
+    const cropParams = (0, use_behavior_1.useBehavior)(helper?.behaviors.cropParams);
+    (0, use_behavior_1.useBehavior)(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(); } })] }));
+    return (0, jsx_runtime_1.jsxs)("div", { 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: () => 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: () => 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: () => helper.resetCrop() })] });
 }

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

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

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

@@ -1,70 +1,47 @@
 "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;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const base_1 = require("Molstar/mol-plugin-ui/base");
+const components_1 = require("Molstar/mol-plugin-ui/structure/components");
+const measurements_1 = require("Molstar/mol-plugin-ui/structure/measurements");
+const source_1 = require("Molstar/mol-plugin-ui/structure/source");
+const volume_1 = require("Molstar/mol-plugin-ui/structure/volume");
+const annotation_controls_1 = require("./annotation-controls");
+const icons_1 = require("Molstar/mol-plugin-ui/controls/icons");
+const superposition_components_1 = require("./superposition-components");
+const quick_styles_1 = require("Molstar/mol-plugin-ui/structure/quick-styles");
+const alphafold_superposition_1 = require("./alphafold-superposition");
+const export_superposition_1 = require("./export-superposition");
+const alphafold_tranparency_1 = require("./alphafold-tranparency");
+class PDBeStructureTools extends base_1.PluginUIComponent {
+    render() {
+        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { 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, {})] });
     }
-    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;
+class CustomStructureControls extends base_1.PluginUIComponent {
+    componentDidMount() {
+        this.subscribe(this.plugin.state.behaviors.events.changed, () => this.forceUpdate());
     }
-    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));
+    render() {
+        const controls = [];
+        this.plugin.customStructureControls.forEach((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;
+class PDBeLigandViewStructureTools extends base_1.PluginUIComponent {
+    render() {
+        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { 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, {})] });
     }
-    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;
+class PDBeSuperpositionStructureTools extends base_1.PluginUIComponent {
+    render() {
+        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { 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, {})] });
     }
-    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,5 @@
-/// <reference types="react" />
 import { ViewportControls } from 'Molstar/mol-plugin-ui/viewport';
 export declare class PDBeViewportControls extends ViewportControls {
     isBlack(customeState: any): boolean;
-    render(): JSX.Element;
+    render(): import("react/jsx-runtime").JSX.Element;
 }