drugflow-molstar 0.3.77 → 0.4.1

package/lib/ui/superposition-components.js

@@ -1,42 +1,35 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SuperpositionComponentControls = void 0;
-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 () {
+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() {
         return {
             header: 'Components',
             isCollapsed: false,
             isDisabled: false,
             brand: { accent: 'blue', svg: icons_1.CubeOutlineSvg }
         };
-    };
-    SuperpositionComponentControls.prototype.renderControls = function () {
+    }
+    renderControls() {
         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;
 ;
-var ComponentListControls = /** @class */ (function (_super) {
-    tslib_1.__extends(ComponentListControls, _super);
-    function ComponentListControls() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.state = {
+class ComponentListControls extends base_1.PurePluginUIComponent {
+    constructor() {
+        super(...arguments);
+        this.state = {
             segmentWatch: false,
             ligSearchText: '',
             carbSearchText: '',
@@ -47,144 +40,108 @@ var ComponentListControls = /** @class */ (function (_super) {
             isCarbCollapsed: false,
             isBusy: false
         };
-        _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('-');
+        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('-');
                 return cId1Arr[2].toLowerCase().indexOf(inputStr.toLowerCase()) >= 0;
             });
-            _this.setState({ ligGroups: filteredRes });
+            this.setState({ ligGroups: filteredRes });
         };
-        _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('-');
+        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('-');
                 cId1Arr.splice(0, 2);
                 cId1Arr.pop();
                 return cId1Arr.join('-').toLowerCase().indexOf(inputStr.toLowerCase()) >= 0;
             });
-            _this.setState({ carbGroups: filteredRes });
+            this.setState({ carbGroups: filteredRes });
         };
-        _this.toggleVisible = function (e, action, type) {
+        this.toggleVisible = (e, action, type) => {
             e.preventDefault();
             e.currentTarget.blur();
-            var customState = _this.plugin.customState;
+            const customState = this.plugin.customState;
             customState.events.isBusy.next(true);
-            var visualEntites = (type === 'ligands') ? _this.state.ligGroups : _this.state.carbGroups;
-            setTimeout(function () { return tslib_1.__awaiter(_this, void 0, void 0, function () {
-                var visualEntites_1, visualEntites_1_1, visualEntity, e_1_1;
-                var e_1, _a;
-                return tslib_1.__generator(this, function (_b) {
-                    switch (_b.label) {
-                        case 0:
-                            _b.trys.push([0, 5, 6, 11]);
-                            visualEntites_1 = tslib_1.__asyncValues(visualEntites);
-                            _b.label = 1;
-                        case 1: return [4 /*yield*/, visualEntites_1.next()];
-                        case 2:
-                            if (!(visualEntites_1_1 = _b.sent(), !visualEntites_1_1.done)) return [3 /*break*/, 4];
-                            visualEntity = visualEntites_1_1.value;
-                            this.plugin.managers.structure.hierarchy.toggleVisibility(visualEntity, action);
-                            _b.label = 3;
-                        case 3: return [3 /*break*/, 1];
-                        case 4: return [3 /*break*/, 11];
-                        case 5:
-                            e_1_1 = _b.sent();
-                            e_1 = { error: e_1_1 };
-                            return [3 /*break*/, 11];
-                        case 6:
-                            _b.trys.push([6, , 9, 10]);
-                            if (!(visualEntites_1_1 && !visualEntites_1_1.done && (_a = visualEntites_1.return))) return [3 /*break*/, 8];
-                            return [4 /*yield*/, _a.call(visualEntites_1)];
-                        case 7:
-                            _b.sent();
-                            _b.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*/];
-                    }
-                });
-            }); });
+            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);
+            });
         };
-        _this.showHideAllControls = function (type) {
-            return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(common_1.Button, tslib_1.__assign({ 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, tslib_1.__assign({ 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.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.clearLigSearch = function (e) {
+        this.clearLigSearch = (e) => {
             e.preventDefault();
-            _this.setState({ ligSearchText: '' });
-            _this.ligInputStream.next('');
+            this.setState({ ligSearchText: '' });
+            this.ligInputStream.next('');
             e.currentTarget.blur();
         };
-        _this.clearCarbSearch = function (e) {
+        this.clearCarbSearch = (e) => {
             e.preventDefault();
-            _this.setState({ carbSearchText: '' });
-            _this.carbInputStream.next('');
+            this.setState({ carbSearchText: '' });
+            this.carbInputStream.next('');
             e.currentTarget.blur();
         };
-        _this.collapseSection = function (e, type) {
+        this.collapseSection = (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 = 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", tslib_1.__assign({ className: 'msp-flex-row', style: { marginTop: '6px' } }, { children: [(0, jsx_runtime_1.jsxs)("button", tslib_1.__assign({ 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", tslib_1.__assign({ style: { color: '#7d91b0' } }, { children: [" ( ", visibleVisuals, visibleVisuals < totalVisuals ? " / ".concat(totalVisuals) : '', " )"] }))] })), visibleVisuals > 1 && showHideAllControls] }));
+        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] });
         };
-        return _this;
     }
-    ComponentListControls.prototype.componentDidMount = function () {
-        var _this = this;
-        this.subscribe(this.plugin.managers.structure.hierarchy.behaviors.selection, function () {
-            _this.categoriseGroups();
-            _this.forceUpdate();
+    componentDidMount() {
+        this.subscribe(this.plugin.managers.structure.hierarchy.behaviors.selection, () => {
+            this.categoriseGroups();
+            this.forceUpdate();
         });
-        this.subscribe(this.plugin.behaviors.state.isBusy, function (v) {
-            _this.setState({ isBusy: v });
+        this.subscribe(this.plugin.behaviors.state.isBusy, v => {
+            this.setState({ isBusy: v });
         });
-    };
-    ComponentListControls.prototype.componentDidUpdate = function () {
-        var _this = this;
-        var customState = this.plugin.customState;
+    }
+    componentDidUpdate() {
+        const customState = this.plugin.customState;
         if (customState.events && !this.state.segmentWatch) {
             this.setState({ segmentWatch: true });
-            this.subscribe(customState.events.segmentUpdate, function () {
-                _this.categoriseGroups();
-                _this.forceUpdate();
+            this.subscribe(customState.events.segmentUpdate, () => {
+                this.categoriseGroups();
+                this.forceUpdate();
             });
         }
-        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;
+        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;
             if (customState.initParams && customState.initParams.superpositionParams && customState.initParams.superpositionParams.ligandView) {
                 isLigandView = true;
             }
             if (isLigandView) {
-                var gKeys = g[0].key.split(',');
-                var cId1Arr = gKeys[0].split('-');
+                const gKeys = g[0].key.split(',');
+                const cId1Arr = gKeys[0].split('-');
                 if (gKeys.indexOf('superposition-focus-surr-sel') === -1) {
                     if (cId1Arr[cId1Arr.length - 1] !== (customState.superpositionState.activeSegment - 1) + '')
                         return;
@@ -206,8 +163,8 @@ var ComponentListControls = /** @class */ (function (_super) {
                 }
             }
             else {
-                var gKeys = g[0].key.split(',');
-                if (gKeys.indexOf('superposition-focus-surr-sel') >= 0 || gKeys.indexOf("Chain-".concat(customState.superpositionState.activeSegment - 1)) >= 0) {
+                const gKeys = g[0].key.split(',');
+                if (gKeys.indexOf('superposition-focus-surr-sel') >= 0 || gKeys.indexOf(`Chain-${customState.superpositionState.activeSegment - 1}`) >= 0) {
                     componentGroupsVal.nonLigGroups.push(g);
                 }
                 else if (gKeys.indexOf('alphafold-chain') >= 0) {
@@ -216,220 +173,193 @@ var ComponentListControls = /** @class */ (function (_super) {
             }
         });
         this.setState({ componentGroups: componentGroupsVal, ligGroups: componentGroupsVal.ligGroups, carbGroups: componentGroupsVal.carbGroups, ligSearchText: '', carbSearchText: '' });
-    };
-    ComponentListControls.prototype.render = function () {
-        var _this = this;
-        var ligSearchControls = (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: 'msp-mapped-parameter-group', style: { fontSize: '90%' } }, { children: [(0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: 'msp-control-row msp-transform-header-brand-gray', style: { height: '33px' } }, { children: [(0, jsx_runtime_1.jsx)("span", tslib_1.__assign({ className: 'msp-control-row-label' }, { children: "Search Ligand" })), (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ 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", tslib_1.__assign({ className: 'msp-mapped-parameter-group', style: { fontSize: '90%' } }, { children: [(0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: 'msp-control-row msp-transform-header-brand-gray', style: { height: '33px' } }, { children: [(0, jsx_runtime_1.jsx)("span", tslib_1.__assign({ className: 'msp-control-row-label' }, { children: "Search Carbohydrate" })), (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ 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", tslib_1.__assign({ 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", tslib_1.__assign({ 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 !== null && _super.apply(this, arguments) || this;
-        _this.state = {
+    }
+    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 = {
             action: void 0,
             isHidden: false,
             isBusy: false
         };
-        _this.checkAllHidden = function () { return tslib_1.__awaiter(_this, void 0, void 0, function () {
-            var allHidden, _i, _a, c;
-            return tslib_1.__generator(this, function (_b) {
-                allHidden = true;
-                for (_i = 0, _a = this.props.group; _i < _a.length; _i++) {
-                    c = _a[_i];
-                    if (!c.cell.state.isHidden) {
-                        allHidden = false;
-                        break;
-                    }
+        this.checkAllHidden = async () => {
+            let allHidden = true;
+            for (const c of this.props.group) {
+                if (!c.cell.state.isHidden) {
+                    allHidden = false;
+                    break;
                 }
-                if (allHidden)
-                    this.setState({ isHidden: true });
-                return [2 /*return*/];
-            });
-        }); };
-        _this.toggleVisible = function (e) {
+            }
+            if (allHidden)
+                this.setState({ isHidden: true });
+        };
+        this.toggleVisible = (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') {
-                var 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') {
+                const spState = this.plugin.customState.superpositionState;
+                spState.alphafold.visibility[spState.activeSegment - 1] = this.state.isHidden;
             }
         };
-        _this.toggleAction = function () { return _this.setState({ action: _this.state.action === 'action' ? void 0 : 'action' }); };
-        _this.highlight = function (e) {
+        this.toggleAction = () => this.setState({ action: this.state.action === 'action' ? void 0 : 'action' });
+        this.highlight = (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(function (c) { return c.cell.transform.ref; }) });
+            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) });
         };
-        _this.clearHighlight = function (e) {
+        this.clearHighlight = (e) => {
             e.preventDefault();
-            commands_1.PluginCommands.Interactivity.ClearHighlights(_this.plugin);
+            commands_1.PluginCommands.Interactivity.ClearHighlights(this.plugin);
         };
-        _this.focus = function () {
-            var allHidden = true;
-            for (var _i = 0, _a = _this.props.group; _i < _a.length; _i++) {
-                var c = _a[_i];
+        this.focus = () => {
+            let allHidden = true;
+            for (const c of this.props.group) {
                 if (!c.cell.state.isHidden) {
                     allHidden = false;
                     break;
                 }
             }
             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, function (e) {
-                var _a;
+            this.plugin.managers.camera.focusSpheres(this.props.group, e => {
                 if (e.cell.state.isHidden)
                     return;
-                return (_a = e.cell.obj) === null || _a === void 0 ? void 0 : _a.data.boundary.sphere;
+                return e.cell.obj?.data.boundary.sphere;
             });
         };
-        return _this;
     }
-    Object.defineProperty(StructureComponentGroup.prototype, "pivot", {
-        get: function () {
-            return this.props.group[0];
-        },
-        enumerable: false,
-        configurable: true
-    });
-    StructureComponentGroup.prototype.componentDidMount = function () {
-        var _this = this;
+    get pivot() {
+        return this.props.group[0];
+    }
+    componentDidMount() {
         this.checkAllHidden();
-        this.subscribe(this.plugin.state.events.cell.stateUpdated, function (e) {
-            var _a, _b;
+        this.subscribe(this.plugin.state.events.cell.stateUpdated, e => {
             // if (State.ObjectEvent.isCell(e, this.pivot.cell)) this.forceUpdate();
-            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 (this.pivot.cell.obj?.label === e.cell.obj?.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, function (v) {
-            _this.setState({ isBusy: v });
+        this.subscribe(this.plugin.behaviors.state.isBusy, v => {
+            this.setState({ isBusy: v });
         });
-        this.subscribe(this.plugin.customState.events.isBusy, function (e) {
-            _this.setState({ isBusy: e });
+        this.subscribe(this.plugin.customState.events.isBusy, (e) => {
+            this.setState({ isBusy: e });
         });
-    };
-    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", 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: "".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", tslib_1.__assign({ className: 'msp-accent-offset' }, { children: (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ 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 !== null && _super.apply(this, arguments) || this;
-        _this.state = {
+    }
+    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 = {
             isBusy: false,
             clusterVal: { cluster: 'All' }
         };
-        _this.remove = function () { return _this.plugin.managers.structure.component.removeRepresentations(_this.props.group, _this.props.representation); };
-        _this.toggleVisible = function (e) {
+        this.remove = () => this.plugin.managers.structure.component.removeRepresentations(this.props.group, this.props.representation);
+        this.toggleVisible = (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 = function (params) {
-            return _this.updateRepresentations(_this.props.group, _this.props.representation, params);
+        this.update = (params) => {
+            return this.updateRepresentations(this.props.group, this.props.representation, params);
         };
-        _this.selectCluster = function (params) {
-            _this.setState({ clusterVal: { cluster: params.cluster } });
+        this.selectCluster = (params) => {
+            this.setState({ clusterVal: { cluster: params.cluster } });
         };
-        return _this;
     }
-    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();
+    componentDidMount() {
+        this.subscribe(this.plugin.state.events.cell.stateUpdated, e => {
+            if (mol_state_1.State.ObjectEvent.isCell(e, this.props.representation.cell))
+                this.forceUpdate();
         });
-        this.subscribe(this.plugin.behaviors.state.isBusy, function (v) {
-            _this.setState({ isBusy: v });
+        this.subscribe(this.plugin.behaviors.state.isBusy, v => {
+            this.setState({ isBusy: v });
         });
-        this.subscribe(this.plugin.customState.events.isBusy, function (e) {
-            _this.setState({ isBusy: e });
+        this.subscribe(this.plugin.customState.events.isBusy, (e) => {
+            this.setState({ isBusy: e });
         });
-    };
-    StructureRepresentationEntry.prototype.updateRepresentations = function (components, pivot, params) {
-        var _a, _b, _c;
+    }
+    updateRepresentations(components, pivot, params) {
         if (components.length === 0)
             return Promise.resolve();
-        var index = components[0].representations.indexOf(pivot);
+        const index = components[0].representations.indexOf(pivot);
         if (index < 0)
             return Promise.resolve();
-        var superpositionState = this.plugin.customState.superpositionState;
-        var filteredComps = [];
+        const superpositionState = this.plugin.customState.superpositionState;
+        let filteredComps = [];
         if (this.state.clusterVal.cluster !== 'All') {
-            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);
+            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}`;
             });
             if (filteredComps.length === 0)
                 return;
         }
-        var update = this.plugin.state.data.build();
-        for (var _i = 0, components_1 = components; _i < components_1.length; _i++) {
-            var c = components_1[_i];
+        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".
-            var repr = c.representations[index];
+            const 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]);
+                const rmIndex = filteredComps.indexOf(superpositionState.refMaps[repr.cell.transform.parent]);
                 if (rmIndex === -1)
                     continue;
             }
-            var updatedParams = {
-                type: params.type ? params.type : (_a = repr.cell.params) === null || _a === void 0 ? void 0 : _a.values.type,
-                colorTheme: params.colorTheme ? params.colorTheme : (_b = repr.cell.params) === null || _b === void 0 ? void 0 : _b.values.colorTheme,
-                sizeTheme: params.sizeTheme ? params.sizeTheme : (_c = repr.cell.params) === null || _c === void 0 ? void 0 : _c.values.sizeTheme
+            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);
         }
         return update.commit({ canUndo: 'Update Representation' });
-    };
-    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) {
+    }
+    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) => {
             clusterSelectArr.push([(i + 1) + '', (i + 1) + '']);
         });
-        var clusterOptions = {
+        const clusterOptions = {
             cluster: param_definition_1.ParamDefinition.Select('All', clusterSelectArr, { label: 'Select Cluster' })
         };
-        var isSurrVisual = false;
-        var isAlphafold = false;
+        let isSurrVisual = false;
+        let isAlphafold = false;
         if (repr && repr.obj) {
-            var reprObj = repr.obj;
+            const 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", tslib_1.__assign({ 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", tslib_1.__assign({ 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", tslib_1.__assign({ 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", tslib_1.__assign({ 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", tslib_1.__assign({ 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));
+        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 }) })] }) });
+    }
+}