drugflow-molstar 0.4.6 → 0.4.8

package/lib/ui/superposition-components.js

@@ -1,35 +1,42 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SuperpositionComponentControls = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const commands_1 = require("Molstar/mol-plugin/commands");
-const mol_state_1 = require("Molstar/mol-state");
-const param_definition_1 = require("Molstar/mol-util/param-definition");
-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 operators_1 = require("rxjs/operators");
-const rxjs_1 = require("rxjs");
-class SuperpositionComponentControls extends base_1.CollapsableControls {
-    defaultState() {
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var commands_1 = require("Molstar/mol-plugin/commands");
+var mol_state_1 = require("Molstar/mol-state");
+var param_definition_1 = require("Molstar/mol-util/param-definition");
+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 operators_1 = require("rxjs/operators");
+var rxjs_1 = require("rxjs");
+var SuperpositionComponentControls = /** @class */ (function (_super) {
+    tslib_1.__extends(SuperpositionComponentControls, _super);
+    function SuperpositionComponentControls() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    SuperpositionComponentControls.prototype.defaultState = function () {
         return {
             header: 'Components',
             isCollapsed: false,
             isDisabled: false,
             brand: { accent: 'blue', svg: icons_1.CubeOutlineSvg }
         };
-    }
-    renderControls() {
+    };
+    SuperpositionComponentControls.prototype.renderControls = function () {
         return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(ComponentListControls, {}) });
-    }
-}
+    };
+    return SuperpositionComponentControls;
+}(base_1.CollapsableControls));
 exports.SuperpositionComponentControls = SuperpositionComponentControls;
 ;
-class ComponentListControls extends base_1.PurePluginUIComponent {
-    constructor() {
-        super(...arguments);
-        this.state = {
+var ComponentListControls = /** @class */ (function (_super) {
+    tslib_1.__extends(ComponentListControls, _super);
+    function ComponentListControls() {
+        var _this = _super.apply(this, tslib_1.__spreadArray([], tslib_1.__read(arguments), false)) || this;
+        _this.state = {
             segmentWatch: false,
             ligSearchText: '',
             carbSearchText: '',
@@ -40,108 +47,148 @@ class ComponentListControls extends base_1.PurePluginUIComponent {
             isCarbCollapsed: false,
             isBusy: false
         };
-        this.ligInputStream = new rxjs_1.Subject();
-        this.handleLigInputStream = (inputStr) => {
-            this.setState({ ligSearchText: inputStr });
-            const filteredRes = this.state.componentGroups.ligGroups.filter((g) => {
-                const gKeys = g[0].key.split(',');
-                const cId1Arr = gKeys[0].split('-');
+        _this.ligInputStream = new rxjs_1.Subject();
+        _this.handleLigInputStream = function (inputStr) {
+            _this.setState({ ligSearchText: inputStr });
+            var filteredRes = _this.state.componentGroups.ligGroups.filter(function (g) {
+                var gKeys = g[0].key.split(',');
+                var cId1Arr = gKeys[0].split('-');
                 return cId1Arr[2].toLowerCase().indexOf(inputStr.toLowerCase()) >= 0;
             });
-            this.setState({ ligGroups: filteredRes });
+            _this.setState({ ligGroups: filteredRes });
         };
-        this.carbInputStream = new rxjs_1.Subject();
-        this.handleCarbInputStream = (inputStr) => {
-            this.setState({ carbSearchText: inputStr });
-            const filteredRes = this.state.componentGroups.carbGroups.filter((g) => {
-                const gKeys = g[0].key.split(',');
-                const cId1Arr = gKeys[0].split('-');
+        _this.carbInputStream = new rxjs_1.Subject();
+        _this.handleCarbInputStream = function (inputStr) {
+            _this.setState({ carbSearchText: inputStr });
+            var filteredRes = _this.state.componentGroups.carbGroups.filter(function (g) {
+                var gKeys = g[0].key.split(',');
+                var cId1Arr = gKeys[0].split('-');
                 cId1Arr.splice(0, 2);
                 cId1Arr.pop();
                 return cId1Arr.join('-').toLowerCase().indexOf(inputStr.toLowerCase()) >= 0;
             });
-            this.setState({ carbGroups: filteredRes });
+            _this.setState({ carbGroups: filteredRes });
         };
-        this.toggleVisible = (e, action, type) => {
+        _this.toggleVisible = function (e, action, type) {
             e.preventDefault();
             e.currentTarget.blur();
-            const customState = this.plugin.customState;
+            var customState = _this.plugin.customState;
             customState.events.isBusy.next(true);
-            const visualEntites = (type === 'ligands') ? this.state.ligGroups : this.state.carbGroups;
-            setTimeout(async () => {
-                for await (const visualEntity of visualEntites) {
-                    this.plugin.managers.structure.hierarchy.toggleVisibility(visualEntity, action);
-                }
-                ;
-                customState.events.isBusy.next(false);
-            });
+            var visualEntites = (type === 'ligands') ? _this.state.ligGroups : _this.state.carbGroups;
+            setTimeout(function () { return tslib_1.__awaiter(_this, void 0, void 0, function () {
+                var _a, visualEntites_1, visualEntites_1_1, visualEntity, e_1_1;
+                var _b, e_1, _c, _d;
+                return tslib_1.__generator(this, function (_e) {
+                    switch (_e.label) {
+                        case 0:
+                            _e.trys.push([0, 5, 6, 11]);
+                            _a = true, visualEntites_1 = tslib_1.__asyncValues(visualEntites);
+                            _e.label = 1;
+                        case 1: return [4 /*yield*/, visualEntites_1.next()];
+                        case 2:
+                            if (!(visualEntites_1_1 = _e.sent(), _b = visualEntites_1_1.done, !_b)) return [3 /*break*/, 4];
+                            _d = visualEntites_1_1.value;
+                            _a = false;
+                            visualEntity = _d;
+                            this.plugin.managers.structure.hierarchy.toggleVisibility(visualEntity, action);
+                            _e.label = 3;
+                        case 3:
+                            _a = true;
+                            return [3 /*break*/, 1];
+                        case 4: return [3 /*break*/, 11];
+                        case 5:
+                            e_1_1 = _e.sent();
+                            e_1 = { error: e_1_1 };
+                            return [3 /*break*/, 11];
+                        case 6:
+                            _e.trys.push([6, , 9, 10]);
+                            if (!(!_a && !_b && (_c = visualEntites_1.return))) return [3 /*break*/, 8];
+                            return [4 /*yield*/, _c.call(visualEntites_1)];
+                        case 7:
+                            _e.sent();
+                            _e.label = 8;
+                        case 8: return [3 /*break*/, 10];
+                        case 9:
+                            if (e_1) throw e_1.error;
+                            return [7 /*endfinally*/];
+                        case 10: return [7 /*endfinally*/];
+                        case 11:
+                            ;
+                            customState.events.isBusy.next(false);
+                            return [2 /*return*/];
+                    }
+                });
+            }); });
         };
-        this.showHideAllControls = (type) => {
-            return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(common_1.Button, { icon: icons_1.CheckSvg, flex: true, onClick: (e) => this.toggleVisible(e, 'show', type), style: { flex: '0 0 50px', textAlign: 'center', fontSize: '80%', color: '#9cacc3', padding: 0 }, title: `Show all ${type}`, disabled: false, children: "All" }), (0, jsx_runtime_1.jsx)(common_1.Button, { icon: icons_1.CloseSvg, flex: true, onClick: (e) => this.toggleVisible(e, 'hide', type), style: { flex: '0 0 50px', textAlign: 'center', fontSize: '80%', color: '#9cacc3', padding: 0 }, title: `Hide all ${type}`, disabled: false, children: "None" })] });
+        _this.showHideAllControls = function (type) {
+            return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(common_1.Button, { icon: icons_1.CheckSvg, flex: true, onClick: function (e) { return _this.toggleVisible(e, 'show', type); }, style: { flex: '0 0 50px', textAlign: 'center', fontSize: '80%', color: '#9cacc3', padding: 0 }, title: "Show all ".concat(type), disabled: false, children: "All" }), (0, jsx_runtime_1.jsx)(common_1.Button, { icon: icons_1.CloseSvg, flex: true, onClick: function (e) { return _this.toggleVisible(e, 'hide', type); }, style: { flex: '0 0 50px', textAlign: 'center', fontSize: '80%', color: '#9cacc3', padding: 0 }, title: "Hide all ".concat(type), disabled: false, children: "None" })] });
         };
-        this.clearLigSearch = (e) => {
+        _this.clearLigSearch = function (e) {
             e.preventDefault();
-            this.setState({ ligSearchText: '' });
-            this.ligInputStream.next('');
+            _this.setState({ ligSearchText: '' });
+            _this.ligInputStream.next('');
             e.currentTarget.blur();
         };
-        this.clearCarbSearch = (e) => {
+        _this.clearCarbSearch = function (e) {
             e.preventDefault();
-            this.setState({ carbSearchText: '' });
-            this.carbInputStream.next('');
+            _this.setState({ carbSearchText: '' });
+            _this.carbInputStream.next('');
             e.currentTarget.blur();
         };
-        this.collapseSection = (e, type) => {
+        _this.collapseSection = function (e, type) {
             e.preventDefault();
             e.currentTarget.blur();
             if (type === 'ligands') {
-                this.setState({ isLigCollapsed: !this.state.isLigCollapsed });
+                _this.setState({ isLigCollapsed: !_this.state.isLigCollapsed });
             }
             else {
-                this.setState({ isCarbCollapsed: !this.state.isCarbCollapsed });
+                _this.setState({ isCarbCollapsed: !_this.state.isCarbCollapsed });
             }
         };
-        this.sectionHeader = (type) => {
-            const showHideAllControls = (type === 'ligands') ? this.showHideAllControls('ligands') : this.showHideAllControls('carbohydrates');
-            const title = (type === 'ligands') ? 'Ligand' : 'Carbohydrates';
-            const visibleVisuals = (type === 'ligands') ? this.state.ligGroups.length : this.state.carbGroups.length;
-            const totalVisuals = (type === 'ligands') ? this.state.componentGroups.ligGroups.length : this.state.componentGroups.carbGroups.length;
-            return (0, jsx_runtime_1.jsxs)("div", { className: 'msp-flex-row', style: { marginTop: '6px' }, children: [(0, jsx_runtime_1.jsxs)("button", { className: 'msp-form-control msp-control-button-label msp-transform-header-brand-gray', style: { textAlign: 'left' }, onClick: (e) => this.collapseSection(e, type), children: [(0, jsx_runtime_1.jsx)("span", { children: (0, jsx_runtime_1.jsx)("strong", { children: title }) }), (0, jsx_runtime_1.jsxs)("small", { style: { color: '#7d91b0' }, children: [" ( ", visibleVisuals, visibleVisuals < totalVisuals ? ` / ${totalVisuals}` : '', " )"] })] }), visibleVisuals > 1 && showHideAllControls] });
+        _this.sectionHeader = function (type) {
+            var showHideAllControls = (type === 'ligands') ? _this.showHideAllControls('ligands') : _this.showHideAllControls('carbohydrates');
+            var title = (type === 'ligands') ? 'Ligand' : 'Carbohydrates';
+            var visibleVisuals = (type === 'ligands') ? _this.state.ligGroups.length : _this.state.carbGroups.length;
+            var totalVisuals = (type === 'ligands') ? _this.state.componentGroups.ligGroups.length : _this.state.componentGroups.carbGroups.length;
+            return (0, jsx_runtime_1.jsxs)("div", { className: 'msp-flex-row', style: { marginTop: '6px' }, children: [(0, jsx_runtime_1.jsxs)("button", { className: 'msp-form-control msp-control-button-label msp-transform-header-brand-gray', style: { textAlign: 'left' }, onClick: function (e) { return _this.collapseSection(e, type); }, children: [(0, jsx_runtime_1.jsx)("span", { children: (0, jsx_runtime_1.jsx)("strong", { children: title }) }), (0, jsx_runtime_1.jsxs)("small", { style: { color: '#7d91b0' }, children: [" ( ", visibleVisuals, visibleVisuals < totalVisuals ? " / ".concat(totalVisuals) : '', " )"] })] }), visibleVisuals > 1 && showHideAllControls] });
         };
+        return _this;
     }
-    componentDidMount() {
-        this.subscribe(this.plugin.managers.structure.hierarchy.behaviors.selection, () => {
-            this.categoriseGroups();
-            this.forceUpdate();
+    ComponentListControls.prototype.componentDidMount = function () {
+        var _this = this;
+        this.subscribe(this.plugin.managers.structure.hierarchy.behaviors.selection, function () {
+            _this.categoriseGroups();
+            _this.forceUpdate();
         });
-        this.subscribe(this.plugin.behaviors.state.isBusy, v => {
-            this.setState({ isBusy: v });
+        this.subscribe(this.plugin.behaviors.state.isBusy, function (v) {
+            _this.setState({ isBusy: v });
         });
-    }
-    componentDidUpdate() {
-        const customState = this.plugin.customState;
+    };
+    ComponentListControls.prototype.componentDidUpdate = function () {
+        var _this = this;
+        var customState = this.plugin.customState;
         if (customState.events && !this.state.segmentWatch) {
             this.setState({ segmentWatch: true });
-            this.subscribe(customState.events.segmentUpdate, () => {
-                this.categoriseGroups();
-                this.forceUpdate();
+            this.subscribe(customState.events.segmentUpdate, function () {
+                _this.categoriseGroups();
+                _this.forceUpdate();
             });
         }
-        this.subscribe(this.ligInputStream.pipe((0, operators_1.debounceTime)(1000 / 24)), (e) => this.handleLigInputStream(e));
-        this.subscribe(this.carbInputStream.pipe((0, operators_1.debounceTime)(1000 / 24)), (e) => this.handleCarbInputStream(e));
-    }
-    categoriseGroups() {
-        let componentGroupsVal = { nonLigGroups: [], ligGroups: [], carbGroups: [], alphafold: [] };
-        const componentGroups = this.plugin.managers.structure.hierarchy.currentComponentGroups;
-        const customState = this.plugin.customState;
-        componentGroups.forEach((g) => {
-            let isLigandView = false;
+        this.subscribe(this.ligInputStream.pipe((0, operators_1.debounceTime)(1000 / 24)), function (e) { return _this.handleLigInputStream(e); });
+        this.subscribe(this.carbInputStream.pipe((0, operators_1.debounceTime)(1000 / 24)), function (e) { return _this.handleCarbInputStream(e); });
+    };
+    ComponentListControls.prototype.categoriseGroups = function () {
+        var componentGroupsVal = { nonLigGroups: [], ligGroups: [], carbGroups: [], alphafold: [] };
+        var componentGroups = this.plugin.managers.structure.hierarchy.currentComponentGroups;
+        var customState = this.plugin.customState;
+        componentGroups.forEach(function (g) {
+            var isLigandView = false;
             if (customState.initParams && customState.initParams.superpositionParams && customState.initParams.superpositionParams.ligandView) {
                 isLigandView = true;
             }
             if (isLigandView) {
-                const gKeys = g[0].key.split(',');
-                const cId1Arr = gKeys[0].split('-');
+                var gKeys = g[0].key.split(',');
+                var cId1Arr = gKeys[0].split('-');
                 if (gKeys.indexOf('superposition-focus-surr-sel') === -1) {
                     if (cId1Arr[cId1Arr.length - 1] !== (customState.superpositionState.activeSegment - 1) + '')
                         return;
@@ -163,8 +210,8 @@ class ComponentListControls extends base_1.PurePluginUIComponent {
                 }
             }
             else {
-                const gKeys = g[0].key.split(',');
-                if (gKeys.indexOf('superposition-focus-surr-sel') >= 0 || gKeys.indexOf(`Chain-${customState.superpositionState.activeSegment - 1}`) >= 0) {
+                var gKeys = g[0].key.split(',');
+                if (gKeys.indexOf('superposition-focus-surr-sel') >= 0 || gKeys.indexOf("Chain-".concat(customState.superpositionState.activeSegment - 1)) >= 0) {
                     componentGroupsVal.nonLigGroups.push(g);
                 }
                 else if (gKeys.indexOf('alphafold-chain') >= 0) {
@@ -173,193 +220,250 @@ class ComponentListControls extends base_1.PurePluginUIComponent {
             }
         });
         this.setState({ componentGroups: componentGroupsVal, ligGroups: componentGroupsVal.ligGroups, carbGroups: componentGroupsVal.carbGroups, ligSearchText: '', carbSearchText: '' });
-    }
-    render() {
-        const ligSearchControls = (0, jsx_runtime_1.jsxs)("div", { className: 'msp-mapped-parameter-group', style: { fontSize: '90%' }, children: [(0, jsx_runtime_1.jsxs)("div", { className: 'msp-control-row msp-transform-header-brand-gray', style: { height: '33px' }, children: [(0, jsx_runtime_1.jsx)("span", { className: 'msp-control-row-label', children: "Search Ligand" }), (0, jsx_runtime_1.jsx)("div", { className: 'msp-control-row-ctrl', children: (0, jsx_runtime_1.jsx)("input", { type: 'text', placeholder: 'Enter HET code', disabled: this.state.isBusy, onChange: e => this.ligInputStream.next(e.target.value), value: this.state.ligSearchText, maxLength: 3 }) })] }), (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.CloseSvg, flex: true, onClick: this.clearLigSearch, style: { flex: '0 0 24px', padding: 0 }, disabled: this.state.ligSearchText === '' || this.state.isBusy, toggleState: this.state.ligSearchText !== '', title: 'Clear search input' })] });
-        const carbSearchControls = (0, jsx_runtime_1.jsxs)("div", { className: 'msp-mapped-parameter-group', style: { fontSize: '90%' }, children: [(0, jsx_runtime_1.jsxs)("div", { className: 'msp-control-row msp-transform-header-brand-gray', style: { height: '33px' }, children: [(0, jsx_runtime_1.jsx)("span", { className: 'msp-control-row-label', children: "Search Carbohydrate" }), (0, jsx_runtime_1.jsx)("div", { className: 'msp-control-row-ctrl', children: (0, jsx_runtime_1.jsx)("input", { type: 'text', placeholder: 'Enter HET code', disabled: this.state.isBusy, onChange: e => this.carbInputStream.next(e.target.value), value: this.state.carbSearchText, maxLength: 3 }) })] }), (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.CloseSvg, flex: true, onClick: this.clearCarbSearch, style: { flex: '0 0 24px', padding: 0 }, disabled: this.state.carbSearchText === '' || this.state.isBusy, toggleState: this.state.carbSearchText !== '', title: 'Clear search input' })] });
-        const ligSectionHeader = this.sectionHeader('ligands');
-        const carbSectionHeader = this.sectionHeader('carbohydrates');
-        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(this.state.componentGroups.nonLigGroups.length > 0) && (0, jsx_runtime_1.jsx)("div", { children: this.state.componentGroups.nonLigGroups.map((g) => (0, jsx_runtime_1.jsx)(StructureComponentGroup, { group: g, boldHeader: true }, g[0].cell.transform.ref)) }), (this.state.componentGroups.alphafold.length > 0) && (0, jsx_runtime_1.jsx)("div", { children: this.state.componentGroups.alphafold.map((g) => (0, jsx_runtime_1.jsx)(StructureComponentGroup, { group: g, boldHeader: true, type: 'alphafold' }, g[0].cell.transform.ref)) }), (this.state.componentGroups.ligGroups.length > 0) && ligSectionHeader, (!this.state.isLigCollapsed && this.state.componentGroups.ligGroups.length > 5) && ligSearchControls, (this.state.componentGroups.ligGroups.length > 0) && (0, jsx_runtime_1.jsx)("div", { className: 'msp-control-offset', style: { maxHeight: '800px', overflowY: 'auto' }, children: !this.state.isLigCollapsed && this.state.ligGroups.map((g) => (0, jsx_runtime_1.jsx)(StructureComponentGroup, { group: g, boldHeader: false }, g[0].cell.transform.ref)) }), (this.state.componentGroups.carbGroups.length > 0) && carbSectionHeader, (!this.state.isCarbCollapsed && this.state.componentGroups.carbGroups.length > 5) && carbSearchControls, (this.state.componentGroups.carbGroups.length > 0) && (0, jsx_runtime_1.jsx)("div", { className: 'msp-control-offset', style: { maxHeight: '800px', overflowY: 'auto' }, children: !this.state.isCarbCollapsed && this.state.carbGroups.map((g) => (0, jsx_runtime_1.jsx)(StructureComponentGroup, { group: g, boldHeader: false }, g[0].cell.transform.ref)) })] });
-    }
-}
-class StructureComponentGroup extends base_1.PurePluginUIComponent {
-    constructor() {
-        super(...arguments);
-        this.state = {
+    };
+    ComponentListControls.prototype.render = function () {
+        var _this = this;
+        var ligSearchControls = (0, jsx_runtime_1.jsxs)("div", { className: 'msp-mapped-parameter-group', style: { fontSize: '90%' }, children: [(0, jsx_runtime_1.jsxs)("div", { className: 'msp-control-row msp-transform-header-brand-gray', style: { height: '33px' }, children: [(0, jsx_runtime_1.jsx)("span", { className: 'msp-control-row-label', children: "Search Ligand" }), (0, jsx_runtime_1.jsx)("div", { className: 'msp-control-row-ctrl', children: (0, jsx_runtime_1.jsx)("input", { type: 'text', placeholder: 'Enter HET code', disabled: this.state.isBusy, onChange: function (e) { return _this.ligInputStream.next(e.target.value); }, value: this.state.ligSearchText, maxLength: 3 }) })] }), (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.CloseSvg, flex: true, onClick: this.clearLigSearch, style: { flex: '0 0 24px', padding: 0 }, disabled: this.state.ligSearchText === '' || this.state.isBusy, toggleState: this.state.ligSearchText !== '', title: 'Clear search input' })] });
+        var carbSearchControls = (0, jsx_runtime_1.jsxs)("div", { className: 'msp-mapped-parameter-group', style: { fontSize: '90%' }, children: [(0, jsx_runtime_1.jsxs)("div", { className: 'msp-control-row msp-transform-header-brand-gray', style: { height: '33px' }, children: [(0, jsx_runtime_1.jsx)("span", { className: 'msp-control-row-label', children: "Search Carbohydrate" }), (0, jsx_runtime_1.jsx)("div", { className: 'msp-control-row-ctrl', children: (0, jsx_runtime_1.jsx)("input", { type: 'text', placeholder: 'Enter HET code', disabled: this.state.isBusy, onChange: function (e) { return _this.carbInputStream.next(e.target.value); }, value: this.state.carbSearchText, maxLength: 3 }) })] }), (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.CloseSvg, flex: true, onClick: this.clearCarbSearch, style: { flex: '0 0 24px', padding: 0 }, disabled: this.state.carbSearchText === '' || this.state.isBusy, toggleState: this.state.carbSearchText !== '', title: 'Clear search input' })] });
+        var ligSectionHeader = this.sectionHeader('ligands');
+        var carbSectionHeader = this.sectionHeader('carbohydrates');
+        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(this.state.componentGroups.nonLigGroups.length > 0) && (0, jsx_runtime_1.jsx)("div", { children: this.state.componentGroups.nonLigGroups.map(function (g) { return (0, jsx_runtime_1.jsx)(StructureComponentGroup, { group: g, boldHeader: true }, g[0].cell.transform.ref); }) }), (this.state.componentGroups.alphafold.length > 0) && (0, jsx_runtime_1.jsx)("div", { children: this.state.componentGroups.alphafold.map(function (g) { return (0, jsx_runtime_1.jsx)(StructureComponentGroup, { group: g, boldHeader: true, type: 'alphafold' }, g[0].cell.transform.ref); }) }), (this.state.componentGroups.ligGroups.length > 0) && ligSectionHeader, (!this.state.isLigCollapsed && this.state.componentGroups.ligGroups.length > 5) && ligSearchControls, (this.state.componentGroups.ligGroups.length > 0) && (0, jsx_runtime_1.jsx)("div", { className: 'msp-control-offset', style: { maxHeight: '800px', overflowY: 'auto' }, children: !this.state.isLigCollapsed && this.state.ligGroups.map(function (g) { return (0, jsx_runtime_1.jsx)(StructureComponentGroup, { group: g, boldHeader: false }, g[0].cell.transform.ref); }) }), (this.state.componentGroups.carbGroups.length > 0) && carbSectionHeader, (!this.state.isCarbCollapsed && this.state.componentGroups.carbGroups.length > 5) && carbSearchControls, (this.state.componentGroups.carbGroups.length > 0) && (0, jsx_runtime_1.jsx)("div", { className: 'msp-control-offset', style: { maxHeight: '800px', overflowY: 'auto' }, children: !this.state.isCarbCollapsed && this.state.carbGroups.map(function (g) { return (0, jsx_runtime_1.jsx)(StructureComponentGroup, { group: g, boldHeader: false }, g[0].cell.transform.ref); }) })] });
+    };
+    return ComponentListControls;
+}(base_1.PurePluginUIComponent));
+var StructureComponentGroup = /** @class */ (function (_super) {
+    tslib_1.__extends(StructureComponentGroup, _super);
+    function StructureComponentGroup() {
+        var _this = _super.apply(this, tslib_1.__spreadArray([], tslib_1.__read(arguments), false)) || this;
+        _this.state = {
             action: void 0,
             isHidden: false,
             isBusy: false
         };
-        this.checkAllHidden = async () => {
-            let allHidden = true;
-            for (const c of this.props.group) {
-                if (!c.cell.state.isHidden) {
-                    allHidden = false;
-                    break;
+        _this.checkAllHidden = function () { return tslib_1.__awaiter(_this, void 0, void 0, function () {
+            var allHidden, _a, _b, c;
+            var e_2, _c;
+            return tslib_1.__generator(this, function (_d) {
+                allHidden = true;
+                try {
+                    for (_a = tslib_1.__values(this.props.group), _b = _a.next(); !_b.done; _b = _a.next()) {
+                        c = _b.value;
+                        if (!c.cell.state.isHidden) {
+                            allHidden = false;
+                            break;
+                        }
+                    }
                 }
-            }
-            if (allHidden)
-                this.setState({ isHidden: true });
-        };
-        this.toggleVisible = (e) => {
+                catch (e_2_1) { e_2 = { error: e_2_1 }; }
+                finally {
+                    try {
+                        if (_b && !_b.done && (_c = _a.return)) _c.call(_a);
+                    }
+                    finally { if (e_2) throw e_2.error; }
+                }
+                if (allHidden)
+                    this.setState({ isHidden: true });
+                return [2 /*return*/];
+            });
+        }); };
+        _this.toggleVisible = function (e) {
             e.preventDefault();
             e.currentTarget.blur();
-            this.plugin.managers.structure.component.toggleVisibility(this.props.group);
-            this.setState({ isHidden: !this.state.isHidden });
-            if (this.props.type === 'alphafold') {
-                const spState = this.plugin.customState.superpositionState;
-                spState.alphafold.visibility[spState.activeSegment - 1] = this.state.isHidden;
+            _this.plugin.managers.structure.component.toggleVisibility(_this.props.group);
+            _this.setState({ isHidden: !_this.state.isHidden });
+            if (_this.props.type === 'alphafold') {
+                var spState = _this.plugin.customState.superpositionState;
+                spState.alphafold.visibility[spState.activeSegment - 1] = _this.state.isHidden;
             }
         };
-        this.toggleAction = () => this.setState({ action: this.state.action === 'action' ? void 0 : 'action' });
-        this.highlight = (e) => {
+        _this.toggleAction = function () { return _this.setState({ action: _this.state.action === 'action' ? void 0 : 'action' }); };
+        _this.highlight = function (e) {
             e.preventDefault();
-            if (!this.props.group[0].cell.parent)
+            if (!_this.props.group[0].cell.parent)
                 return;
-            commands_1.PluginCommands.Interactivity.Object.Highlight(this.plugin, { state: this.props.group[0].cell.parent, ref: this.props.group.map(c => c.cell.transform.ref) });
+            commands_1.PluginCommands.Interactivity.Object.Highlight(_this.plugin, { state: _this.props.group[0].cell.parent, ref: _this.props.group.map(function (c) { return c.cell.transform.ref; }) });
         };
-        this.clearHighlight = (e) => {
+        _this.clearHighlight = function (e) {
             e.preventDefault();
-            commands_1.PluginCommands.Interactivity.ClearHighlights(this.plugin);
+            commands_1.PluginCommands.Interactivity.ClearHighlights(_this.plugin);
         };
-        this.focus = () => {
-            let allHidden = true;
-            for (const c of this.props.group) {
-                if (!c.cell.state.isHidden) {
-                    allHidden = false;
-                    break;
+        _this.focus = function () {
+            var e_3, _a;
+            var allHidden = true;
+            try {
+                for (var _b = tslib_1.__values(_this.props.group), _c = _b.next(); !_c.done; _c = _b.next()) {
+                    var c = _c.value;
+                    if (!c.cell.state.isHidden) {
+                        allHidden = false;
+                        break;
+                    }
+                }
+            }
+            catch (e_3_1) { e_3 = { error: e_3_1 }; }
+            finally {
+                try {
+                    if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
                 }
+                finally { if (e_3) throw e_3.error; }
             }
             if (allHidden) {
-                this.plugin.managers.structure.hierarchy.toggleVisibility(this.props.group, 'show');
+                _this.plugin.managers.structure.hierarchy.toggleVisibility(_this.props.group, 'show');
             }
-            this.plugin.managers.camera.focusSpheres(this.props.group, e => {
+            _this.plugin.managers.camera.focusSpheres(_this.props.group, function (e) {
+                var _a;
                 if (e.cell.state.isHidden)
                     return;
-                return e.cell.obj?.data.boundary.sphere;
+                return (_a = e.cell.obj) === null || _a === void 0 ? void 0 : _a.data.boundary.sphere;
             });
         };
+        return _this;
     }
-    get pivot() {
-        return this.props.group[0];
-    }
-    componentDidMount() {
+    Object.defineProperty(StructureComponentGroup.prototype, "pivot", {
+        get: function () {
+            return this.props.group[0];
+        },
+        enumerable: false,
+        configurable: true
+    });
+    StructureComponentGroup.prototype.componentDidMount = function () {
+        var _this = this;
         this.checkAllHidden();
-        this.subscribe(this.plugin.state.events.cell.stateUpdated, e => {
+        this.subscribe(this.plugin.state.events.cell.stateUpdated, function (e) {
+            var _a, _b;
             // if (State.ObjectEvent.isCell(e, this.pivot.cell)) this.forceUpdate();
-            if (this.pivot.cell.obj?.label === e.cell.obj?.label) {
+            if (((_a = _this.pivot.cell.obj) === null || _a === void 0 ? void 0 : _a.label) === ((_b = e.cell.obj) === null || _b === void 0 ? void 0 : _b.label)) {
                 if (!e.cell.state.isHidden) {
-                    this.setState({ isHidden: false });
+                    _this.setState({ isHidden: false });
                 }
                 else {
-                    this.checkAllHidden();
+                    _this.checkAllHidden();
                 }
             }
         });
-        this.subscribe(this.plugin.behaviors.state.isBusy, v => {
-            this.setState({ isBusy: v });
+        this.subscribe(this.plugin.behaviors.state.isBusy, function (v) {
+            _this.setState({ isBusy: v });
         });
-        this.subscribe(this.plugin.customState.events.isBusy, (e) => {
-            this.setState({ isBusy: e });
+        this.subscribe(this.plugin.customState.events.isBusy, function (e) {
+            _this.setState({ isBusy: e });
         });
-    }
-    render() {
-        const component = this.pivot;
-        const cell = component.cell;
-        const label = cell.obj?.label;
-        const labelEle = this.props.boldHeader ? (0, jsx_runtime_1.jsx)("strong", { children: label }) : label;
-        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(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: `${label} - Click to focus.`, onClick: this.focus, style: { textAlign: 'left' }, disabled: this.state.isBusy, children: labelEle }), (0, jsx_runtime_1.jsx)(common_1.IconButton, { disabled: this.state.isBusy, svg: this.state.isHidden ? icons_1.VisibilityOffOutlinedSvg : icons_1.VisibilityOutlinedSvg, toggleState: false, onClick: this.toggleVisible, title: `${this.state.isHidden ? 'Show' : 'Hide'} component`, small: true, className: 'msp-form-control', flex: true }), (0, jsx_runtime_1.jsx)(common_1.IconButton, { disabled: this.state.isBusy, svg: icons_1.MoreHorizSvg, onClick: this.toggleAction, title: 'Actions', toggleState: this.state.action === 'action', className: 'msp-form-control', flex: true })] }), this.state.action === 'action' && (0, jsx_runtime_1.jsx)("div", { className: 'msp-accent-offset', children: (0, jsx_runtime_1.jsx)("div", { style: { marginBottom: '6px' }, children: component.representations.map(r => (0, jsx_runtime_1.jsx)(StructureRepresentationEntry, { group: this.props.group, representation: r }, r.cell.transform.ref)) }) })] });
-    }
-}
-class StructureRepresentationEntry extends base_1.PurePluginUIComponent {
-    constructor() {
-        super(...arguments);
-        this.state = {
+    };
+    StructureComponentGroup.prototype.render = function () {
+        var _this = this;
+        var _a;
+        var component = this.pivot;
+        var cell = component.cell;
+        var label = (_a = cell.obj) === null || _a === void 0 ? void 0 : _a.label;
+        var labelEle = this.props.boldHeader ? (0, jsx_runtime_1.jsx)("strong", { children: label }) : label;
+        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(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: "".concat(label, " - Click to focus."), onClick: this.focus, style: { textAlign: 'left' }, disabled: this.state.isBusy, children: labelEle }), (0, jsx_runtime_1.jsx)(common_1.IconButton, { disabled: this.state.isBusy, svg: this.state.isHidden ? icons_1.VisibilityOffOutlinedSvg : icons_1.VisibilityOutlinedSvg, toggleState: false, onClick: this.toggleVisible, title: "".concat(this.state.isHidden ? 'Show' : 'Hide', " component"), small: true, className: 'msp-form-control', flex: true }), (0, jsx_runtime_1.jsx)(common_1.IconButton, { disabled: this.state.isBusy, svg: icons_1.MoreHorizSvg, onClick: this.toggleAction, title: 'Actions', toggleState: this.state.action === 'action', className: 'msp-form-control', flex: true })] }), this.state.action === 'action' && (0, jsx_runtime_1.jsx)("div", { className: 'msp-accent-offset', children: (0, jsx_runtime_1.jsx)("div", { style: { marginBottom: '6px' }, children: component.representations.map(function (r) { return (0, jsx_runtime_1.jsx)(StructureRepresentationEntry, { group: _this.props.group, representation: r }, r.cell.transform.ref); }) }) })] });
+    };
+    return StructureComponentGroup;
+}(base_1.PurePluginUIComponent));
+var StructureRepresentationEntry = /** @class */ (function (_super) {
+    tslib_1.__extends(StructureRepresentationEntry, _super);
+    function StructureRepresentationEntry() {
+        var _this = _super.apply(this, tslib_1.__spreadArray([], tslib_1.__read(arguments), false)) || this;
+        _this.state = {
             isBusy: false,
             clusterVal: { cluster: 'All' }
         };
-        this.remove = () => this.plugin.managers.structure.component.removeRepresentations(this.props.group, this.props.representation);
-        this.toggleVisible = (e) => {
+        _this.remove = function () { return _this.plugin.managers.structure.component.removeRepresentations(_this.props.group, _this.props.representation); };
+        _this.toggleVisible = function (e) {
             e.preventDefault();
             e.currentTarget.blur();
-            this.plugin.managers.structure.component.toggleVisibility(this.props.group, this.props.representation);
+            _this.plugin.managers.structure.component.toggleVisibility(_this.props.group, _this.props.representation);
         };
-        this.update = (params) => {
-            return this.updateRepresentations(this.props.group, this.props.representation, params);
+        _this.update = function (params) {
+            return _this.updateRepresentations(_this.props.group, _this.props.representation, params);
         };
-        this.selectCluster = (params) => {
-            this.setState({ clusterVal: { cluster: params.cluster } });
+        _this.selectCluster = function (params) {
+            _this.setState({ clusterVal: { cluster: params.cluster } });
         };
+        return _this;
     }
-    componentDidMount() {
-        this.subscribe(this.plugin.state.events.cell.stateUpdated, e => {
-            if (mol_state_1.State.ObjectEvent.isCell(e, this.props.representation.cell))
-                this.forceUpdate();
+    StructureRepresentationEntry.prototype.componentDidMount = function () {
+        var _this = this;
+        this.subscribe(this.plugin.state.events.cell.stateUpdated, function (e) {
+            if (mol_state_1.State.ObjectEvent.isCell(e, _this.props.representation.cell))
+                _this.forceUpdate();
         });
-        this.subscribe(this.plugin.behaviors.state.isBusy, v => {
-            this.setState({ isBusy: v });
+        this.subscribe(this.plugin.behaviors.state.isBusy, function (v) {
+            _this.setState({ isBusy: v });
         });
-        this.subscribe(this.plugin.customState.events.isBusy, (e) => {
-            this.setState({ isBusy: e });
+        this.subscribe(this.plugin.customState.events.isBusy, function (e) {
+            _this.setState({ isBusy: e });
         });
-    }
-    updateRepresentations(components, pivot, params) {
+    };
+    StructureRepresentationEntry.prototype.updateRepresentations = function (components, pivot, params) {
+        var e_4, _a;
+        var _b, _c, _d;
         if (components.length === 0)
             return Promise.resolve();
-        const index = components[0].representations.indexOf(pivot);
+        var index = components[0].representations.indexOf(pivot);
         if (index < 0)
             return Promise.resolve();
-        const superpositionState = this.plugin.customState.superpositionState;
-        let filteredComps = [];
+        var superpositionState = this.plugin.customState.superpositionState;
+        var filteredComps = [];
         if (this.state.clusterVal.cluster !== 'All') {
-            const clusterData = superpositionState.segmentData[superpositionState.activeSegment - 1].clusters[parseInt(this.state.clusterVal.cluster) - 1];
-            filteredComps = clusterData.map((s) => {
-                return `${s.pdb_id}_${s.struct_asym_id}`;
+            var clusterData = superpositionState.segmentData[superpositionState.activeSegment - 1].clusters[parseInt(this.state.clusterVal.cluster) - 1];
+            filteredComps = clusterData.map(function (s) {
+                return "".concat(s.pdb_id, "_").concat(s.struct_asym_id);
             });
             if (filteredComps.length === 0)
                 return;
         }
-        const update = this.plugin.state.data.build();
-        for (const c of components) {
-            // TODO: is it ok to use just the index here? Could possible lead to ugly edge cases, but perhaps not worth the trouble to "fix".
-            const repr = c.representations[index];
-            if (!repr)
-                continue;
-            if (repr.cell.transform.transformer !== pivot.cell.transform.transformer)
-                continue;
-            if (this.state.clusterVal.cluster !== 'All') {
-                const rmIndex = filteredComps.indexOf(superpositionState.refMaps[repr.cell.transform.parent]);
-                if (rmIndex === -1)
+        var update = this.plugin.state.data.build();
+        try {
+            for (var components_1 = tslib_1.__values(components), components_1_1 = components_1.next(); !components_1_1.done; components_1_1 = components_1.next()) {
+                var c = components_1_1.value;
+                // TODO: is it ok to use just the index here? Could possible lead to ugly edge cases, but perhaps not worth the trouble to "fix".
+                var repr = c.representations[index];
+                if (!repr)
+                    continue;
+                if (repr.cell.transform.transformer !== pivot.cell.transform.transformer)
                     continue;
+                if (this.state.clusterVal.cluster !== 'All') {
+                    var rmIndex = filteredComps.indexOf(superpositionState.refMaps[repr.cell.transform.parent]);
+                    if (rmIndex === -1)
+                        continue;
+                }
+                var updatedParams = {
+                    type: params.type ? params.type : (_b = repr.cell.params) === null || _b === void 0 ? void 0 : _b.values.type,
+                    colorTheme: params.colorTheme ? params.colorTheme : (_c = repr.cell.params) === null || _c === void 0 ? void 0 : _c.values.colorTheme,
+                    sizeTheme: params.sizeTheme ? params.sizeTheme : (_d = repr.cell.params) === null || _d === void 0 ? void 0 : _d.values.sizeTheme
+                };
+                update.to(repr.cell).update(updatedParams);
             }
-            const updatedParams = {
-                type: params.type ? params.type : repr.cell.params?.values.type,
-                colorTheme: params.colorTheme ? params.colorTheme : repr.cell.params?.values.colorTheme,
-                sizeTheme: params.sizeTheme ? params.sizeTheme : repr.cell.params?.values.sizeTheme
-            };
-            update.to(repr.cell).update(updatedParams);
+        }
+        catch (e_4_1) { e_4 = { error: e_4_1 }; }
+        finally {
+            try {
+                if (components_1_1 && !components_1_1.done && (_a = components_1.return)) _a.call(components_1);
+            }
+            finally { if (e_4) throw e_4.error; }
         }
         return update.commit({ canUndo: 'Update Representation' });
-    }
-    render() {
-        const repr = this.props.representation.cell;
-        const superpositionState = this.plugin.customState.superpositionState;
-        let clusterSelectArr = [['All', 'All']];
-        superpositionState.segmentData[superpositionState.activeSegment - 1].clusters.forEach((c, i) => {
+    };
+    StructureRepresentationEntry.prototype.render = function () {
+        var _a, _b, _c, _d, _e, _f;
+        var repr = this.props.representation.cell;
+        var superpositionState = this.plugin.customState.superpositionState;
+        var clusterSelectArr = [['All', 'All']];
+        superpositionState.segmentData[superpositionState.activeSegment - 1].clusters.forEach(function (c, i) {
             clusterSelectArr.push([(i + 1) + '', (i + 1) + '']);
         });
-        const clusterOptions = {
+        var clusterOptions = {
             cluster: param_definition_1.ParamDefinition.Select('All', clusterSelectArr, { label: 'Select Cluster' })
         };
-        let isSurrVisual = false;
-        let isAlphafold = false;
+        var isSurrVisual = false;
+        var isAlphafold = false;
         if (repr && repr.obj) {
-            const reprObj = repr.obj;
+            var reprObj = repr.obj;
             if (reprObj.tags && reprObj.tags.indexOf('superposition-focus-surr-repr') >= 0)
                 isSurrVisual = true;
             if (reprObj.tags && reprObj.tags.indexOf('af-superposition-visual') >= 0)
                 isAlphafold = true;
         }
-        return (0, jsx_runtime_1.jsx)("div", { className: 'msp-representation-entry', children: repr.parent && (0, jsx_runtime_1.jsxs)("div", { children: [(clusterSelectArr.length > 2 && !isSurrVisual && !isAlphafold) && (0, jsx_runtime_1.jsx)("div", { className: 'msp-representation-entry', children: (0, jsx_runtime_1.jsx)(parameters_1.ParameterControls, { params: clusterOptions, values: this.state.clusterVal, onChangeValues: this.selectCluster, isDisabled: this.state.isBusy }) }), (0, jsx_runtime_1.jsx)("div", { className: 'msp-representation-entry', children: (0, jsx_runtime_1.jsx)(parameters_1.ParameterControls, { params: { type: repr.params?.definition.type }, values: { type: repr.params?.values.type }, onChangeValues: this.update, isDisabled: this.state.isBusy }) }), (0, jsx_runtime_1.jsx)("div", { className: 'msp-representation-entry', children: (0, jsx_runtime_1.jsx)(parameters_1.ParameterControls, { params: { colorTheme: repr.params?.definition.colorTheme }, values: { colorTheme: repr.params?.values.colorTheme }, onChangeValues: this.update, isDisabled: this.state.isBusy }) }), (0, jsx_runtime_1.jsx)("div", { className: 'msp-representation-entry', children: (0, jsx_runtime_1.jsx)(parameters_1.ParameterControls, { params: { sizeTheme: repr.params?.definition.sizeTheme }, values: { sizeTheme: repr.params?.values.sizeTheme }, onChangeValues: this.update, isDisabled: this.state.isBusy }) })] }) });
-    }
-}
+        return (0, jsx_runtime_1.jsx)("div", { className: 'msp-representation-entry', children: repr.parent && (0, jsx_runtime_1.jsxs)("div", { children: [(clusterSelectArr.length > 2 && !isSurrVisual && !isAlphafold) && (0, jsx_runtime_1.jsx)("div", { className: 'msp-representation-entry', children: (0, jsx_runtime_1.jsx)(parameters_1.ParameterControls, { params: clusterOptions, values: this.state.clusterVal, onChangeValues: this.selectCluster, isDisabled: this.state.isBusy }) }), (0, jsx_runtime_1.jsx)("div", { className: 'msp-representation-entry', children: (0, jsx_runtime_1.jsx)(parameters_1.ParameterControls, { params: { type: (_a = repr.params) === null || _a === void 0 ? void 0 : _a.definition.type }, values: { type: (_b = repr.params) === null || _b === void 0 ? void 0 : _b.values.type }, onChangeValues: this.update, isDisabled: this.state.isBusy }) }), (0, jsx_runtime_1.jsx)("div", { className: 'msp-representation-entry', children: (0, jsx_runtime_1.jsx)(parameters_1.ParameterControls, { params: { colorTheme: (_c = repr.params) === null || _c === void 0 ? void 0 : _c.definition.colorTheme }, values: { colorTheme: (_d = repr.params) === null || _d === void 0 ? void 0 : _d.values.colorTheme }, onChangeValues: this.update, isDisabled: this.state.isBusy }) }), (0, jsx_runtime_1.jsx)("div", { className: 'msp-representation-entry', children: (0, jsx_runtime_1.jsx)(parameters_1.ParameterControls, { params: { sizeTheme: (_e = repr.params) === null || _e === void 0 ? void 0 : _e.definition.sizeTheme }, values: { sizeTheme: (_f = repr.params) === null || _f === void 0 ? void 0 : _f.values.sizeTheme }, onChangeValues: this.update, isDisabled: this.state.isBusy }) })] }) });
+    };
+    return StructureRepresentationEntry;
+}(base_1.PurePluginUIComponent));