drugflow-molstar 0.2.1 → 0.2.2

package/lib/ui/superposition-components.js

@@ -1,435 +1,435 @@
-"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 () {
-        return {
-            header: 'Components',
-            isCollapsed: false,
-            isDisabled: false,
-            brand: { accent: 'blue', svg: icons_1.CubeOutlineSvg }
-        };
-    };
-    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;
-;
-var ComponentListControls = /** @class */ (function (_super) {
-    tslib_1.__extends(ComponentListControls, _super);
-    function ComponentListControls() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.state = {
-            segmentWatch: false,
-            ligSearchText: '',
-            carbSearchText: '',
-            componentGroups: { nonLigGroups: [], ligGroups: [], carbGroups: [], alphafold: [] },
-            ligGroups: [],
-            isLigCollapsed: false,
-            carbGroups: [],
-            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('-');
-                return cId1Arr[2].toLowerCase().indexOf(inputStr.toLowerCase()) >= 0;
-            });
-            _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('-');
-                cId1Arr.splice(0, 2);
-                cId1Arr.pop();
-                return cId1Arr.join('-').toLowerCase().indexOf(inputStr.toLowerCase()) >= 0;
-            });
-            _this.setState({ carbGroups: filteredRes });
-        };
-        _this.toggleVisible = function (e, action, type) {
-            e.preventDefault();
-            e.currentTarget.blur();
-            var 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*/];
-                    }
-                });
-            }); });
-        };
-        _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.clearLigSearch = function (e) {
-            e.preventDefault();
-            _this.setState({ ligSearchText: '' });
-            _this.ligInputStream.next('');
-            e.currentTarget.blur();
-        };
-        _this.clearCarbSearch = function (e) {
-            e.preventDefault();
-            _this.setState({ carbSearchText: '' });
-            _this.carbInputStream.next('');
-            e.currentTarget.blur();
-        };
-        _this.collapseSection = function (e, type) {
-            e.preventDefault();
-            e.currentTarget.blur();
-            if (type === 'ligands') {
-                _this.setState({ isLigCollapsed: !_this.state.isLigCollapsed });
-            }
-            else {
-                _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] }));
-        };
-        return _this;
-    }
-    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, function (v) {
-            _this.setState({ isBusy: v });
-        });
-    };
-    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, function () {
-                _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;
-            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('-');
-                if (gKeys.indexOf('superposition-focus-surr-sel') === -1) {
-                    if (cId1Arr[cId1Arr.length - 1] !== (customState.superpositionState.activeSegment - 1) + '')
-                        return;
-                    if (gKeys.indexOf('superposition-ligand-sel') >= 0) {
-                        componentGroupsVal.ligGroups.push(g);
-                    }
-                    else if (gKeys.indexOf('superposition-carb-sel') >= 0) {
-                        componentGroupsVal.carbGroups.push(g);
-                    }
-                    else if (gKeys.indexOf('alphafold-chain') >= 0) {
-                        componentGroupsVal.alphafold.push(g);
-                    }
-                    else {
-                        componentGroupsVal.nonLigGroups.push(g);
-                    }
-                }
-                else {
-                    componentGroupsVal.nonLigGroups.push(g);
-                }
-            }
-            else {
-                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) {
-                    componentGroupsVal.alphafold.push(g);
-                }
-            }
-        });
-        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 = {
-            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;
-                    }
-                }
-                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') {
-                var 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) {
-            e.preventDefault();
-            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; }) });
-        };
-        _this.clearHighlight = function (e) {
-            e.preventDefault();
-            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];
-                if (!c.cell.state.isHidden) {
-                    allHidden = false;
-                    break;
-                }
-            }
-            if (allHidden) {
-                _this.plugin.managers.structure.hierarchy.toggleVisibility(_this.props.group, 'show');
-            }
-            _this.plugin.managers.camera.focusSpheres(_this.props.group, function (e) {
-                var _a;
-                if (e.cell.state.isHidden)
-                    return;
-                return (_a = e.cell.obj) === null || _a === void 0 ? void 0 : _a.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;
-        this.checkAllHidden();
-        this.subscribe(this.plugin.state.events.cell.stateUpdated, function (e) {
-            var _a, _b;
-            // 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 (!e.cell.state.isHidden) {
-                    _this.setState({ isHidden: false });
-                }
-                else {
-                    _this.checkAllHidden();
-                }
-            }
-        });
-        this.subscribe(this.plugin.behaviors.state.isBusy, function (v) {
-            _this.setState({ isBusy: v });
-        });
-        this.subscribe(this.plugin.customState.events.isBusy, function (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 = {
-            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) {
-            e.preventDefault();
-            e.currentTarget.blur();
-            _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.selectCluster = function (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();
-        });
-        this.subscribe(this.plugin.behaviors.state.isBusy, function (v) {
-            _this.setState({ isBusy: v });
-        });
-        this.subscribe(this.plugin.customState.events.isBusy, function (e) {
-            _this.setState({ isBusy: e });
-        });
-    };
-    StructureRepresentationEntry.prototype.updateRepresentations = function (components, pivot, params) {
-        var _a, _b, _c;
-        if (components.length === 0)
-            return Promise.resolve();
-        var index = components[0].representations.indexOf(pivot);
-        if (index < 0)
-            return Promise.resolve();
-        var superpositionState = this.plugin.customState.superpositionState;
-        var 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);
-            });
-            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];
-            // 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 : (_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
-            };
-            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) {
-            clusterSelectArr.push([(i + 1) + '', (i + 1) + '']);
-        });
-        var clusterOptions = {
-            cluster: param_definition_1.ParamDefinition.Select('All', clusterSelectArr, { label: 'Select Cluster' })
-        };
-        var isSurrVisual = false;
-        var isAlphafold = false;
-        if (repr && 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", 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));
+"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 () {
+        return {
+            header: 'Components',
+            isCollapsed: false,
+            isDisabled: false,
+            brand: { accent: 'blue', svg: icons_1.CubeOutlineSvg }
+        };
+    };
+    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;
+;
+var ComponentListControls = /** @class */ (function (_super) {
+    tslib_1.__extends(ComponentListControls, _super);
+    function ComponentListControls() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.state = {
+            segmentWatch: false,
+            ligSearchText: '',
+            carbSearchText: '',
+            componentGroups: { nonLigGroups: [], ligGroups: [], carbGroups: [], alphafold: [] },
+            ligGroups: [],
+            isLigCollapsed: false,
+            carbGroups: [],
+            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('-');
+                return cId1Arr[2].toLowerCase().indexOf(inputStr.toLowerCase()) >= 0;
+            });
+            _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('-');
+                cId1Arr.splice(0, 2);
+                cId1Arr.pop();
+                return cId1Arr.join('-').toLowerCase().indexOf(inputStr.toLowerCase()) >= 0;
+            });
+            _this.setState({ carbGroups: filteredRes });
+        };
+        _this.toggleVisible = function (e, action, type) {
+            e.preventDefault();
+            e.currentTarget.blur();
+            var 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*/];
+                    }
+                });
+            }); });
+        };
+        _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.clearLigSearch = function (e) {
+            e.preventDefault();
+            _this.setState({ ligSearchText: '' });
+            _this.ligInputStream.next('');
+            e.currentTarget.blur();
+        };
+        _this.clearCarbSearch = function (e) {
+            e.preventDefault();
+            _this.setState({ carbSearchText: '' });
+            _this.carbInputStream.next('');
+            e.currentTarget.blur();
+        };
+        _this.collapseSection = function (e, type) {
+            e.preventDefault();
+            e.currentTarget.blur();
+            if (type === 'ligands') {
+                _this.setState({ isLigCollapsed: !_this.state.isLigCollapsed });
+            }
+            else {
+                _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] }));
+        };
+        return _this;
+    }
+    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, function (v) {
+            _this.setState({ isBusy: v });
+        });
+    };
+    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, function () {
+                _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;
+            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('-');
+                if (gKeys.indexOf('superposition-focus-surr-sel') === -1) {
+                    if (cId1Arr[cId1Arr.length - 1] !== (customState.superpositionState.activeSegment - 1) + '')
+                        return;
+                    if (gKeys.indexOf('superposition-ligand-sel') >= 0) {
+                        componentGroupsVal.ligGroups.push(g);
+                    }
+                    else if (gKeys.indexOf('superposition-carb-sel') >= 0) {
+                        componentGroupsVal.carbGroups.push(g);
+                    }
+                    else if (gKeys.indexOf('alphafold-chain') >= 0) {
+                        componentGroupsVal.alphafold.push(g);
+                    }
+                    else {
+                        componentGroupsVal.nonLigGroups.push(g);
+                    }
+                }
+                else {
+                    componentGroupsVal.nonLigGroups.push(g);
+                }
+            }
+            else {
+                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) {
+                    componentGroupsVal.alphafold.push(g);
+                }
+            }
+        });
+        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 = {
+            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;
+                    }
+                }
+                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') {
+                var 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) {
+            e.preventDefault();
+            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; }) });
+        };
+        _this.clearHighlight = function (e) {
+            e.preventDefault();
+            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];
+                if (!c.cell.state.isHidden) {
+                    allHidden = false;
+                    break;
+                }
+            }
+            if (allHidden) {
+                _this.plugin.managers.structure.hierarchy.toggleVisibility(_this.props.group, 'show');
+            }
+            _this.plugin.managers.camera.focusSpheres(_this.props.group, function (e) {
+                var _a;
+                if (e.cell.state.isHidden)
+                    return;
+                return (_a = e.cell.obj) === null || _a === void 0 ? void 0 : _a.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;
+        this.checkAllHidden();
+        this.subscribe(this.plugin.state.events.cell.stateUpdated, function (e) {
+            var _a, _b;
+            // 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 (!e.cell.state.isHidden) {
+                    _this.setState({ isHidden: false });
+                }
+                else {
+                    _this.checkAllHidden();
+                }
+            }
+        });
+        this.subscribe(this.plugin.behaviors.state.isBusy, function (v) {
+            _this.setState({ isBusy: v });
+        });
+        this.subscribe(this.plugin.customState.events.isBusy, function (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 = {
+            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) {
+            e.preventDefault();
+            e.currentTarget.blur();
+            _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.selectCluster = function (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();
+        });
+        this.subscribe(this.plugin.behaviors.state.isBusy, function (v) {
+            _this.setState({ isBusy: v });
+        });
+        this.subscribe(this.plugin.customState.events.isBusy, function (e) {
+            _this.setState({ isBusy: e });
+        });
+    };
+    StructureRepresentationEntry.prototype.updateRepresentations = function (components, pivot, params) {
+        var _a, _b, _c;
+        if (components.length === 0)
+            return Promise.resolve();
+        var index = components[0].representations.indexOf(pivot);
+        if (index < 0)
+            return Promise.resolve();
+        var superpositionState = this.plugin.customState.superpositionState;
+        var 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);
+            });
+            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];
+            // 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 : (_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
+            };
+            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) {
+            clusterSelectArr.push([(i + 1) + '', (i + 1) + '']);
+        });
+        var clusterOptions = {
+            cluster: param_definition_1.ParamDefinition.Select('All', clusterSelectArr, { label: 'Select Cluster' })
+        };
+        var isSurrVisual = false;
+        var isAlphafold = false;
+        if (repr && 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", 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));