drugflow-molstar 0.4.6 → 0.4.8

package/lib/ui/annotation-controls.js

@@ -1,59 +1,61 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AnnotationsComponentControls = exports.TextsmsOutlinedSvg = void 0;
-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.AnnotationsComponentControls = void 0;
 exports.TextsmsOutlinedSvg = TextsmsOutlinedSvg;
-class AnnotationsComponentControls extends base_1.PurePluginUIComponent {
-    constructor() {
-        super(...arguments);
-        this.state = {
+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", { 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; }
+var AnnotationsComponentControls = /** @class */ (function (_super) {
+    tslib_1.__extends(AnnotationsComponentControls, _super);
+    function AnnotationsComponentControls() {
+        var _this = _super.apply(this, tslib_1.__spreadArray([], tslib_1.__read(arguments), false)) || this;
+        _this.state = {
             isCollapsed: false,
             validationApplied: false,
             domainAtnApplied: false,
             validationOptions: false,
             domainAtnOptions: false
         };
-        this.getOptionParams = () => {
-            let validationAnnotationCtrl = false;
-            let domainAnnotationCtrl = false;
-            const customState = this.plugin.customState;
+        _this.getOptionParams = function () {
+            var validationAnnotationCtrl = false;
+            var domainAnnotationCtrl = false;
+            var 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)) {
-                const 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)) {
+                var groupRef = mol_state_1.StateSelection.findTagInSubtree(_this.plugin.state.data.tree, mol_state_1.StateTransform.RootRef, 'structure-component-static-polymer');
                 if (groupRef) {
-                    const struct = this.plugin.state.data.select(groupRef)[0].obj;
+                    var struct = _this.plugin.state.data.select(groupRef)[0].obj;
                     if (struct) {
-                        const themeDataCtx = { structure: struct.data };
-                        if (validationAnnotationCtrl && !this.state.validationParams) {
-                            const validationActionsParams = color_1.StructureQualityReportColorThemeProvider.getParams(themeDataCtx);
+                        var themeDataCtx = { structure: struct.data };
+                        if (validationAnnotationCtrl && !_this.state.validationParams) {
+                            var 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) {
-                            const domainActionsParams = color_2.DomainAnnotationsColorThemeProvider.getParams(themeDataCtx);
+                        if (domainAnnotationCtrl && !_this.state.domainAtnParams) {
+                            var domainActionsParams = color_2.DomainAnnotationsColorThemeProvider.getParams(themeDataCtx);
                             if (domainActionsParams) {
-                                this.setState({ domainAtnParams: {
+                                _this.setState({ domainAtnParams: {
                                         params: domainActionsParams,
                                         values: { type: domainActionsParams.type.defaultValue }
                                     } });
@@ -63,98 +65,102 @@ class AnnotationsComponentControls extends base_1.PurePluginUIComponent {
                 }
             }
         };
-        this.toggleCollapsed = () => {
-            this.setState({ isCollapsed: !this.state.isCollapsed });
+        _this.toggleCollapsed = function () {
+            _this.setState({ isCollapsed: !_this.state.isCollapsed });
         };
-        this.toggleOptions = (type) => {
+        _this.toggleOptions = function (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 = (type, visibleState, params) => {
+        _this.applyAnnotation = function (type, visibleState, params) {
             // Defaults
-            let themeName = 'polymer-id';
-            let themePropsToAdd = behavior_1.PDBeStructureQualityReport;
-            let themePropsToRemove = this.state.domainAtnParams ? behavior_2.PDBeDomainAnnotations : void 0;
+            var themeName = 'polymer-id';
+            var themePropsToAdd = behavior_1.PDBeStructureQualityReport;
+            var 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') {
-                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));
+                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));
                 if (themePropsToRemove) {
-                    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 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));
                 }
             }
-            let polymerGroup;
-            const componentGroups = this.plugin.managers.structure.hierarchy.currentComponentGroups;
-            componentGroups.forEach((compGrp) => {
+            var polymerGroup;
+            var componentGroups = _this.plugin.managers.structure.hierarchy.currentComponentGroups;
+            componentGroups.forEach(function (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 = (type) => {
+        _this.initApplyAnnotation = function (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 = (val) => {
-            const updatedParams = { ...this.state.validationParams };
+        _this.updateValidationParams = function (val) {
+            var updatedParams = tslib_1.__assign({}, _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 = (val) => {
-            const updatedParams = { ...this.state.domainAtnParams };
+        _this.updateDomainAtnParams = function (val) {
+            var updatedParams = tslib_1.__assign({}, _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;
     }
-    componentDidMount() {
-        this.subscribe(this.plugin.managers.structure.hierarchy.behaviors.selection, () => {
-            this.getOptionParams();
-            this.forceUpdate();
+    AnnotationsComponentControls.prototype.componentDidMount = function () {
+        var _this = this;
+        this.subscribe(this.plugin.managers.structure.hierarchy.behaviors.selection, function () {
+            _this.getOptionParams();
+            _this.forceUpdate();
         });
-        this.subscribe(this.plugin.managers.structure.hierarchy.behaviors.selection, c => this.setState({
-            description: hierarchy_1.StructureHierarchyManager.getSelectedStructuresDescription(this.plugin)
-        }));
-    }
-    render() {
+        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;
         if (!this.state.validationParams && !this.state.domainAtnParams)
             return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
-        const brand = {
+        var brand = {
             accent: 'green',
             svg: TextsmsOutlinedSvg
         };
-        const wrapClass = this.state.isCollapsed
+        var wrapClass = this.state.isCollapsed
             ? 'msp-transform-wrapper msp-transform-wrapper-collapsed'
             : 'msp-transform-wrapper';
-        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 }) }) }) })] });
-    }
-}
+        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-".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", { 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: 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", { 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: 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", { 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 }) }) }) })] });
+    };
+    return AnnotationsComponentControls;
+}(base_1.PurePluginUIComponent));
 exports.AnnotationsComponentControls = AnnotationsComponentControls;

package/lib/ui/export-superposition.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { CollapsableControls, CollapsableState } from 'Molstar/mol-plugin-ui/base';
 export declare class SuperpositionModelExportUI extends CollapsableControls<{}, {}> {
     protected defaultState(): CollapsableState;

package/lib/ui/export-superposition.js

@@ -1,53 +1,71 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SuperpositionModelExportUI = void 0;
-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() {
+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 }
         };
-    }
-    renderControls() {
+    };
+    SuperpositionModelExportUI.prototype.renderControls = function () {
         return (0, jsx_runtime_1.jsx)(SuperpositionExportControls, { plugin: this.plugin });
-    }
-}
+    };
+    return SuperpositionModelExportUI;
+}(base_1.CollapsableControls));
 exports.SuperpositionModelExportUI = SuperpositionModelExportUI;
-const Params = {
+var Params = {
     format: param_definition_1.ParamDefinition.Select('cif', [['cif', 'mmCIF'], ['bcif', 'Binary mmCIF']])
 };
-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);
+var DefaultParams = param_definition_1.ParamDefinition.getDefaultValues(Params);
+function SuperpositionExportControls(_a) {
+    var _this = this;
+    var plugin = _a.plugin;
+    var _b = tslib_1.__read((0, react_1.useState)(DefaultParams), 2), params = _b[0], setParams = _b[1];
+    var _c = tslib_1.__read((0, react_1.useState)(false), 2), exporting = _c[0], setExporting = _c[1];
     (0, use_behavior_1.useBehavior)(plugin.managers.structure.hierarchy.behaviors.selection); // triggers UI update
-    const isBusy = (0, use_behavior_1.useBehavior)(plugin.behaviors.state.isBusy);
-    const hierarchy = plugin.managers.structure.hierarchy.current;
-    let label = 'Nothing to Export';
+    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)';
     }
-    const onExport = async () => {
-        setExporting(true);
-        try {
-            await (0, superposition_export_1.superpositionExportHierarchy)(plugin, { format: params.format });
-        }
-        finally {
-            setExporting(false);
-        }
-    };
+    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, { 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,4 +1,3 @@
-/// <reference types="react" />
 import { PluginUIComponent } from 'Molstar/mol-plugin-ui/base';
 export declare function WavesIconSvg(): import("react/jsx-runtime").JSX.Element;
 type LeftPanelTabName = 'none' | 'root' | 'data' | 'states' | 'settings' | 'help' | 'segments';