drugflow-molstar/lib/ui/superposition-components.js

Molstar implementation for DrugFlow

"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));