drugflow-molstar 0.3.77 → 0.4.1

package/lib/ui/annotation-controls.js

@@ -1,61 +1,59 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AnnotationsComponentControls = exports.TextsmsOutlinedSvg = void 0;
-var tslib_1 = require("tslib");
-var jsx_runtime_1 = require("react/jsx-runtime");
-var common_1 = require("Molstar/mol-plugin-ui/controls/common");
-var base_1 = require("Molstar/mol-plugin-ui/base");
-var color_1 = require("Molstar/extensions/pdbe/structure-quality-report/color");
-var mol_state_1 = require("Molstar/mol-state");
-var parameters_1 = require("Molstar/mol-plugin-ui/controls/parameters");
-var color_2 = require("../domain-annotations/color");
-var behavior_1 = require("Molstar/extensions/pdbe/structure-quality-report/behavior");
-var behavior_2 = require("../domain-annotations/behavior");
-var icons_1 = require("Molstar/mol-plugin-ui/controls/icons");
-var hierarchy_1 = require("Molstar/mol-plugin-state/manager/structure/hierarchy");
-var _TextsmsOutlined = (0, jsx_runtime_1.jsxs)("svg", tslib_1.__assign({ width: '24px', height: '24px', viewBox: '0 0 24 24' }, { children: [(0, jsx_runtime_1.jsx)("path", { fill: "none", d: "M0 0h24v24H0V0z" }), (0, jsx_runtime_1.jsxs)("g", { children: [(0, jsx_runtime_1.jsx)("path", { d: "M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z" }), (0, jsx_runtime_1.jsx)("path", { d: "M7 9h2v2H7zM11 9h2v2h-2zM15 9h2v2h-2z" })] })] }));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const common_1 = require("Molstar/mol-plugin-ui/controls/common");
+const base_1 = require("Molstar/mol-plugin-ui/base");
+const color_1 = require("Molstar/extensions/pdbe/structure-quality-report/color");
+const mol_state_1 = require("Molstar/mol-state");
+const parameters_1 = require("Molstar/mol-plugin-ui/controls/parameters");
+const color_2 = require("../domain-annotations/color");
+const behavior_1 = require("Molstar/extensions/pdbe/structure-quality-report/behavior");
+const behavior_2 = require("../domain-annotations/behavior");
+const icons_1 = require("Molstar/mol-plugin-ui/controls/icons");
+const hierarchy_1 = require("Molstar/mol-plugin-state/manager/structure/hierarchy");
+const _TextsmsOutlined = (0, jsx_runtime_1.jsxs)("svg", { width: '24px', height: '24px', viewBox: '0 0 24 24', children: [(0, jsx_runtime_1.jsx)("path", { fill: "none", d: "M0 0h24v24H0V0z" }), (0, jsx_runtime_1.jsxs)("g", { children: [(0, jsx_runtime_1.jsx)("path", { d: "M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z" }), (0, jsx_runtime_1.jsx)("path", { d: "M7 9h2v2H7zM11 9h2v2h-2zM15 9h2v2h-2z" })] })] });
 function TextsmsOutlinedSvg() { return _TextsmsOutlined; }
 exports.TextsmsOutlinedSvg = TextsmsOutlinedSvg;
-var AnnotationsComponentControls = /** @class */ (function (_super) {
-    tslib_1.__extends(AnnotationsComponentControls, _super);
-    function AnnotationsComponentControls() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.state = {
+class AnnotationsComponentControls extends base_1.PurePluginUIComponent {
+    constructor() {
+        super(...arguments);
+        this.state = {
             isCollapsed: false,
             validationApplied: false,
             domainAtnApplied: false,
             validationOptions: false,
             domainAtnOptions: false
         };
-        _this.getOptionParams = function () {
-            var validationAnnotationCtrl = false;
-            var domainAnnotationCtrl = false;
-            var customState = _this.plugin.customState;
+        this.getOptionParams = () => {
+            let validationAnnotationCtrl = false;
+            let domainAnnotationCtrl = false;
+            const customState = this.plugin.customState;
             if (customState && customState.initParams) {
                 if (customState.initParams.validationAnnotation)
                     validationAnnotationCtrl = true;
                 if (customState.initParams.domainAnnotation)
                     domainAnnotationCtrl = true;
             }
-            if ((validationAnnotationCtrl && !_this.state.validationParams) || (domainAnnotationCtrl && !_this.state.domainAtnParams)) {
-                var groupRef = mol_state_1.StateSelection.findTagInSubtree(_this.plugin.state.data.tree, mol_state_1.StateTransform.RootRef, 'structure-component-static-polymer');
+            if ((validationAnnotationCtrl && !this.state.validationParams) || (domainAnnotationCtrl && !this.state.domainAtnParams)) {
+                const groupRef = mol_state_1.StateSelection.findTagInSubtree(this.plugin.state.data.tree, mol_state_1.StateTransform.RootRef, 'structure-component-static-polymer');
                 if (groupRef) {
-                    var struct = _this.plugin.state.data.select(groupRef)[0].obj;
+                    const struct = this.plugin.state.data.select(groupRef)[0].obj;
                     if (struct) {
-                        var themeDataCtx = { structure: struct.data };
-                        if (validationAnnotationCtrl && !_this.state.validationParams) {
-                            var validationActionsParams = color_1.StructureQualityReportColorThemeProvider.getParams(themeDataCtx);
+                        const themeDataCtx = { structure: struct.data };
+                        if (validationAnnotationCtrl && !this.state.validationParams) {
+                            const validationActionsParams = color_1.StructureQualityReportColorThemeProvider.getParams(themeDataCtx);
                             if (validationActionsParams) {
-                                _this.setState({ validationParams: {
+                                this.setState({ validationParams: {
                                         params: validationActionsParams,
                                         values: { type: validationActionsParams.type.defaultValue }
                                     } });
                             }
                         }
-                        if (domainAnnotationCtrl && !_this.state.domainAtnParams) {
-                            var domainActionsParams = color_2.DomainAnnotationsColorThemeProvider.getParams(themeDataCtx);
+                        if (domainAnnotationCtrl && !this.state.domainAtnParams) {
+                            const domainActionsParams = color_2.DomainAnnotationsColorThemeProvider.getParams(themeDataCtx);
                             if (domainActionsParams) {
-                                _this.setState({ domainAtnParams: {
+                                this.setState({ domainAtnParams: {
                                         params: domainActionsParams,
                                         values: { type: domainActionsParams.type.defaultValue }
                                     } });
@@ -65,102 +63,98 @@ var AnnotationsComponentControls = /** @class */ (function (_super) {
                 }
             }
         };
-        _this.toggleCollapsed = function () {
-            _this.setState({ isCollapsed: !_this.state.isCollapsed });
+        this.toggleCollapsed = () => {
+            this.setState({ isCollapsed: !this.state.isCollapsed });
         };
-        _this.toggleOptions = function (type) {
+        this.toggleOptions = (type) => {
             if (type === 0)
-                _this.setState({ validationOptions: !_this.state.validationOptions });
+                this.setState({ validationOptions: !this.state.validationOptions });
             if (type === 1)
-                _this.setState({ domainAtnOptions: !_this.state.domainAtnOptions });
+                this.setState({ domainAtnOptions: !this.state.domainAtnOptions });
         };
-        _this.applyAnnotation = function (type, visibleState, params) {
+        this.applyAnnotation = (type, visibleState, params) => {
             // Defaults
-            var themeName = 'polymer-id';
-            var themePropsToAdd = behavior_1.PDBeStructureQualityReport;
-            var themePropsToRemove = _this.state.domainAtnParams ? behavior_2.PDBeDomainAnnotations : void 0;
+            let themeName = 'polymer-id';
+            let themePropsToAdd = behavior_1.PDBeStructureQualityReport;
+            let themePropsToRemove = this.state.domainAtnParams ? behavior_2.PDBeDomainAnnotations : void 0;
             // Set Theme Params
             if (type === 0) {
                 if (visibleState) {
                     themeName = 'pdbe-structure-quality-report';
                 }
-                _this.setState({ validationApplied: visibleState });
-                _this.setState({ domainAtnApplied: false });
+                this.setState({ validationApplied: visibleState });
+                this.setState({ domainAtnApplied: false });
             }
             else {
                 themePropsToAdd = behavior_2.PDBeDomainAnnotations;
-                themePropsToRemove = _this.state.validationParams ? behavior_1.PDBeStructureQualityReport : void 0;
+                themePropsToRemove = this.state.validationParams ? behavior_1.PDBeStructureQualityReport : void 0;
                 if (visibleState)
                     themeName = 'pdbe-domain-annotations';
-                _this.setState({ domainAtnApplied: visibleState });
-                _this.setState({ validationApplied: false });
+                this.setState({ domainAtnApplied: visibleState });
+                this.setState({ validationApplied: false });
             }
             // Update Tooltip
             if (visibleState && themeName !== 'polymer-id') {
-                var addTooltipUpdate = _this.plugin.state.behaviors.build().to(themePropsToAdd.id).update(themePropsToAdd, function (old) { old.showTooltip = true; });
-                _this.plugin.runTask(_this.plugin.state.behaviors.updateTree(addTooltipUpdate));
+                const addTooltipUpdate = this.plugin.state.behaviors.build().to(themePropsToAdd.id).update(themePropsToAdd, (old) => { old.showTooltip = true; });
+                this.plugin.runTask(this.plugin.state.behaviors.updateTree(addTooltipUpdate));
                 if (themePropsToRemove) {
-                    var removeTooltipUpdate = _this.plugin.state.behaviors.build().to(themePropsToRemove.id).update(themePropsToRemove, function (old) { old.showTooltip = false; });
-                    _this.plugin.runTask(_this.plugin.state.behaviors.updateTree(removeTooltipUpdate));
+                    const removeTooltipUpdate = this.plugin.state.behaviors.build().to(themePropsToRemove.id).update(themePropsToRemove, (old) => { old.showTooltip = false; });
+                    this.plugin.runTask(this.plugin.state.behaviors.updateTree(removeTooltipUpdate));
                 }
             }
-            var polymerGroup;
-            var componentGroups = _this.plugin.managers.structure.hierarchy.currentComponentGroups;
-            componentGroups.forEach(function (compGrp) {
+            let polymerGroup;
+            const componentGroups = this.plugin.managers.structure.hierarchy.currentComponentGroups;
+            componentGroups.forEach((compGrp) => {
                 if (compGrp[0].key === 'structure-component-static-polymer')
                     polymerGroup = compGrp;
             });
             if (polymerGroup) {
-                _this.plugin.managers.structure.component.updateRepresentationsTheme(polymerGroup, { color: themeName, colorParams: params ? params : void 0 });
+                this.plugin.managers.structure.component.updateRepresentationsTheme(polymerGroup, { color: themeName, colorParams: params ? params : void 0 });
             }
         };
-        _this.initApplyAnnotation = function (type) {
+        this.initApplyAnnotation = (type) => {
             if (type === 0)
-                _this.applyAnnotation(0, !_this.state.validationApplied, _this.state.validationParams.values);
+                this.applyAnnotation(0, !this.state.validationApplied, this.state.validationParams.values);
             if (type === 1)
-                _this.applyAnnotation(1, !_this.state.domainAtnApplied, _this.state.domainAtnParams.values);
+                this.applyAnnotation(1, !this.state.domainAtnApplied, this.state.domainAtnParams.values);
         };
-        _this.updateValidationParams = function (val) {
-            var updatedParams = tslib_1.__assign({}, _this.state.validationParams);
+        this.updateValidationParams = (val) => {
+            const updatedParams = { ...this.state.validationParams };
             updatedParams.values = val;
-            _this.setState({ validationParams: updatedParams });
-            if (_this.state.validationApplied)
-                _this.applyAnnotation(0, _this.state.validationApplied, val);
+            this.setState({ validationParams: updatedParams });
+            if (this.state.validationApplied)
+                this.applyAnnotation(0, this.state.validationApplied, val);
         };
-        _this.updateDomainAtnParams = function (val) {
-            var updatedParams = tslib_1.__assign({}, _this.state.domainAtnParams);
+        this.updateDomainAtnParams = (val) => {
+            const updatedParams = { ...this.state.domainAtnParams };
             updatedParams.values = val;
-            _this.setState({ domainAtnParams: updatedParams });
-            if (_this.state.domainAtnApplied)
-                _this.applyAnnotation(1, _this.state.domainAtnApplied, val);
+            this.setState({ domainAtnParams: updatedParams });
+            if (this.state.domainAtnApplied)
+                this.applyAnnotation(1, this.state.domainAtnApplied, val);
         };
-        return _this;
     }
-    AnnotationsComponentControls.prototype.componentDidMount = function () {
-        var _this = this;
-        this.subscribe(this.plugin.managers.structure.hierarchy.behaviors.selection, function () {
-            _this.getOptionParams();
-            _this.forceUpdate();
+    componentDidMount() {
+        this.subscribe(this.plugin.managers.structure.hierarchy.behaviors.selection, () => {
+            this.getOptionParams();
+            this.forceUpdate();
         });
-        this.subscribe(this.plugin.managers.structure.hierarchy.behaviors.selection, function (c) { return _this.setState({
-            description: hierarchy_1.StructureHierarchyManager.getSelectedStructuresDescription(_this.plugin)
-        }); });
-    };
-    AnnotationsComponentControls.prototype.render = function () {
-        var _this = this;
+        this.subscribe(this.plugin.managers.structure.hierarchy.behaviors.selection, c => this.setState({
+            description: hierarchy_1.StructureHierarchyManager.getSelectedStructuresDescription(this.plugin)
+        }));
+    }
+    render() {
         if (!this.state.validationParams && !this.state.domainAtnParams)
             return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
-        var brand = {
+        const brand = {
             accent: 'green',
             svg: TextsmsOutlinedSvg
         };
-        var wrapClass = this.state.isCollapsed
+        const wrapClass = this.state.isCollapsed
             ? 'msp-transform-wrapper msp-transform-wrapper-collapsed'
             : 'msp-transform-wrapper';
-        return (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: wrapClass }, { children: [(0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'msp-transform-header' }, { children: (0, jsx_runtime_1.jsxs)(common_1.Button, tslib_1.__assign({ icon: brand ? void 0 : this.state.isCollapsed ? icons_1.ArrowRightSvg : icons_1.ArrowDropDownSvg, noOverflow: true, onClick: this.toggleCollapsed, className: brand ? "msp-transform-header-brand msp-transform-header-brand-".concat(brand.accent) : void 0, title: "Click to ".concat(this.state.isCollapsed ? 'expand' : 'collapse') }, { children: [(0, jsx_runtime_1.jsx)(icons_1.Icon, { svg: brand === null || brand === void 0 ? void 0 : brand.svg, inline: true }), "Annotations", (0, jsx_runtime_1.jsx)("small", tslib_1.__assign({ style: { margin: '0 6px' } }, { children: this.state.isCollapsed ? '' : this.state.description }))] })) })), !this.state.isCollapsed && this.state.validationParams &&
-                    (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: 'msp-flex-row' }, { children: [(0, jsx_runtime_1.jsx)(common_1.Button, tslib_1.__assign({ noOverflow: true, className: 'msp-control-button-label', title: "Validation Report Annotations.", style: { textAlign: 'left' } }, { children: "Validation Report" })), (0, jsx_runtime_1.jsx)(common_1.IconButton, { onClick: function () { return _this.initApplyAnnotation(0); }, toggleState: false, svg: !this.state.validationApplied ? icons_1.VisibilityOffOutlinedSvg : icons_1.VisibilityOutlinedSvg, title: "Click to ".concat(this.state.validationApplied ? 'Hide' : 'Show', " Validation Report Annotation"), small: true, className: 'msp-form-control', flex: true }), (0, jsx_runtime_1.jsx)(common_1.IconButton, { onClick: function () { return _this.toggleOptions(0); }, svg: icons_1.MoreHorizSvg, title: 'Actions', toggleState: this.state.validationOptions, className: 'msp-form-control', flex: true })] })), !this.state.isCollapsed && this.state.validationParams && this.state.validationOptions && (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ style: { marginBottom: '6px' } }, { children: (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: "msp-accent-offset" }, { children: (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'msp-representation-entry' }, { children: (0, jsx_runtime_1.jsx)(parameters_1.ParameterControls, { params: this.state.validationParams.params, values: this.state.validationParams.values, onChangeValues: this.updateValidationParams }) })) })) })), !this.state.isCollapsed && this.state.domainAtnParams &&
-                    (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: 'msp-flex-row' }, { children: [(0, jsx_runtime_1.jsx)(common_1.Button, tslib_1.__assign({ noOverflow: true, className: 'msp-control-button-label', title: "Domain Annotations.", style: { textAlign: 'left' } }, { children: "Domains" })), (0, jsx_runtime_1.jsx)(common_1.IconButton, { onClick: function () { return _this.initApplyAnnotation(1); }, toggleState: false, svg: !this.state.domainAtnApplied ? icons_1.VisibilityOffOutlinedSvg : icons_1.VisibilityOutlinedSvg, title: "Click to ".concat(this.state.domainAtnApplied ? 'Hide' : 'Show', " Domain Annotation"), small: true, className: 'msp-form-control', flex: true }), (0, jsx_runtime_1.jsx)(common_1.IconButton, { onClick: function () { return _this.toggleOptions(1); }, svg: icons_1.MoreHorizSvg, title: 'Actions', toggleState: this.state.domainAtnOptions, className: 'msp-form-control', flex: true })] })), !this.state.isCollapsed && this.state.domainAtnParams && this.state.domainAtnOptions && (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ style: { marginBottom: '6px' } }, { children: (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: "msp-accent-offset" }, { children: (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'msp-representation-entry' }, { children: (0, jsx_runtime_1.jsx)(parameters_1.ParameterControls, { params: this.state.domainAtnParams.params, values: this.state.domainAtnParams.values, onChangeValues: this.updateDomainAtnParams }) })) })) }))] }));
-    };
-    return AnnotationsComponentControls;
-}(base_1.PurePluginUIComponent));
+        return (0, jsx_runtime_1.jsxs)("div", { className: wrapClass, children: [(0, jsx_runtime_1.jsx)("div", { className: 'msp-transform-header', children: (0, jsx_runtime_1.jsxs)(common_1.Button, { icon: brand ? void 0 : this.state.isCollapsed ? icons_1.ArrowRightSvg : icons_1.ArrowDropDownSvg, noOverflow: true, onClick: this.toggleCollapsed, className: brand ? `msp-transform-header-brand msp-transform-header-brand-${brand.accent}` : void 0, title: `Click to ${this.state.isCollapsed ? 'expand' : 'collapse'}`, children: [(0, jsx_runtime_1.jsx)(icons_1.Icon, { svg: brand?.svg, inline: true }), "Annotations", (0, jsx_runtime_1.jsx)("small", { style: { margin: '0 6px' }, children: this.state.isCollapsed ? '' : this.state.description })] }) }), !this.state.isCollapsed && this.state.validationParams &&
+                    (0, jsx_runtime_1.jsxs)("div", { className: 'msp-flex-row', children: [(0, jsx_runtime_1.jsx)(common_1.Button, { noOverflow: true, className: 'msp-control-button-label', title: `Validation Report Annotations.`, style: { textAlign: 'left' }, children: "Validation Report" }), (0, jsx_runtime_1.jsx)(common_1.IconButton, { onClick: () => this.initApplyAnnotation(0), toggleState: false, svg: !this.state.validationApplied ? icons_1.VisibilityOffOutlinedSvg : icons_1.VisibilityOutlinedSvg, title: `Click to ${this.state.validationApplied ? 'Hide' : 'Show'} Validation Report Annotation`, small: true, className: 'msp-form-control', flex: true }), (0, jsx_runtime_1.jsx)(common_1.IconButton, { onClick: () => this.toggleOptions(0), svg: icons_1.MoreHorizSvg, title: 'Actions', toggleState: this.state.validationOptions, className: 'msp-form-control', flex: true })] }), !this.state.isCollapsed && this.state.validationParams && this.state.validationOptions && (0, jsx_runtime_1.jsx)("div", { style: { marginBottom: '6px' }, children: (0, jsx_runtime_1.jsx)("div", { className: "msp-accent-offset", children: (0, jsx_runtime_1.jsx)("div", { className: 'msp-representation-entry', children: (0, jsx_runtime_1.jsx)(parameters_1.ParameterControls, { params: this.state.validationParams.params, values: this.state.validationParams.values, onChangeValues: this.updateValidationParams }) }) }) }), !this.state.isCollapsed && this.state.domainAtnParams &&
+                    (0, jsx_runtime_1.jsxs)("div", { className: 'msp-flex-row', children: [(0, jsx_runtime_1.jsx)(common_1.Button, { noOverflow: true, className: 'msp-control-button-label', title: `Domain Annotations.`, style: { textAlign: 'left' }, children: "Domains" }), (0, jsx_runtime_1.jsx)(common_1.IconButton, { onClick: () => this.initApplyAnnotation(1), toggleState: false, svg: !this.state.domainAtnApplied ? icons_1.VisibilityOffOutlinedSvg : icons_1.VisibilityOutlinedSvg, title: `Click to ${this.state.domainAtnApplied ? 'Hide' : 'Show'} Domain Annotation`, small: true, className: 'msp-form-control', flex: true }), (0, jsx_runtime_1.jsx)(common_1.IconButton, { onClick: () => this.toggleOptions(1), svg: icons_1.MoreHorizSvg, title: 'Actions', toggleState: this.state.domainAtnOptions, className: 'msp-form-control', flex: true })] }), !this.state.isCollapsed && this.state.domainAtnParams && this.state.domainAtnOptions && (0, jsx_runtime_1.jsx)("div", { style: { marginBottom: '6px' }, children: (0, jsx_runtime_1.jsx)("div", { className: "msp-accent-offset", children: (0, jsx_runtime_1.jsx)("div", { className: 'msp-representation-entry', children: (0, jsx_runtime_1.jsx)(parameters_1.ParameterControls, { params: this.state.domainAtnParams.params, values: this.state.domainAtnParams.values, onChangeValues: this.updateDomainAtnParams }) }) }) })] });
+    }
+}
 exports.AnnotationsComponentControls = AnnotationsComponentControls;

package/lib/ui/export-superposition.js

@@ -1,71 +1,53 @@
 "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 () {
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const base_1 = require("Molstar/mol-plugin-ui/base");
+const common_1 = require("Molstar/mol-plugin-ui/controls/common");
+const icons_1 = require("Molstar/mol-plugin-ui/controls/icons");
+const parameters_1 = require("Molstar/mol-plugin-ui/controls/parameters");
+const use_behavior_1 = require("Molstar/mol-plugin-ui/hooks/use-behavior");
+const param_definition_1 = require("Molstar/mol-util/param-definition");
+const superposition_export_1 = require("../superposition-export");
+class SuperpositionModelExportUI extends base_1.CollapsableControls {
+    defaultState() {
         return {
             header: 'Export Models',
             isCollapsed: true,
             brand: { accent: 'cyan', svg: icons_1.GetAppSvg }
         };
-    };
-    SuperpositionModelExportUI.prototype.renderControls = function () {
+    }
+    renderControls() {
         return (0, jsx_runtime_1.jsx)(SuperpositionExportControls, { plugin: this.plugin });
-    };
-    return SuperpositionModelExportUI;
-}(base_1.CollapsableControls));
+    }
+}
 exports.SuperpositionModelExportUI = SuperpositionModelExportUI;
-var Params = {
+const 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];
+const DefaultParams = param_definition_1.ParamDefinition.getDefaultValues(Params);
+function SuperpositionExportControls({ plugin }) {
+    const [params, setParams] = (0, react_1.useState)(DefaultParams);
+    const [exporting, setExporting] = (0, react_1.useState)(false);
     (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';
+    const isBusy = (0, use_behavior_1.useBehavior)(plugin.behaviors.state.isBusy);
+    const hierarchy = plugin.managers.structure.hierarchy.current;
+    let 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 }))] });
+    const onExport = async () => {
+        setExporting(true);
+        try {
+            await (0, superposition_export_1.superpositionExportHierarchy)(plugin, { format: params.format });
+        }
+        finally {
+            setExporting(false);
+        }
+    };
+    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, { 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,7 +1,7 @@
 /// <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 function WavesIconSvg(): import("react/jsx-runtime").JSX.Element;
+type LeftPanelTabName = 'none' | 'root' | 'data' | 'states' | 'settings' | 'help' | 'segments';
 export declare class LeftPanelControls extends PluginUIComponent<{}, {
     tab: LeftPanelTabName;
 }> {
@@ -13,6 +13,6 @@ export declare class LeftPanelControls extends PluginUIComponent<{}, {
     tabs: {
         [K in LeftPanelTabName]: JSX.Element;
     };
-    render(): JSX.Element;
+    render(): import("react/jsx-runtime").JSX.Element;
 }
 export {};