pdbe-molstar 3.4.0 → 3.5.0

package/lib/ui/segment-tree.js

@@ -60,13 +60,13 @@ class SegmentTree extends base_1.PurePluginUIComponent {
             updatedParams.value = val;
             this.setState({ segment: updatedParams });
             setTimeout(() => tslib_1.__awaiter(this, void 0, void 0, function* () {
-                var _b, _c;
+                var _a, _b;
                 const updatedSegmentIndex = parseInt(val.segment.split(' ')[0]);
                 customState.superpositionState.activeSegment = updatedSegmentIndex;
                 // Display current segment visible structures
                 yield this.displayStructures(customState.superpositionState.activeSegment - 1);
-                (_b = customState.events) === null || _b === void 0 ? void 0 : _b.isBusy.next(false);
-                (_c = customState.events) === null || _c === void 0 ? void 0 : _c.segmentUpdate.next(true);
+                (_a = customState.events) === null || _a === void 0 ? void 0 : _a.isBusy.next(false);
+                (_b = customState.events) === null || _b === void 0 ? void 0 : _b.segmentUpdate.next(true);
             }), 100);
             return false;
         });
@@ -120,14 +120,14 @@ class SegmentTree extends base_1.PurePluginUIComponent {
             }
         };
         this.displayStructures = (segmentIndex) => tslib_1.__awaiter(this, void 0, void 0, function* () {
-            var _d;
+            var _a;
             const customState = this.customState;
             const spState = customState.superpositionState;
             if (!spState)
                 throw new Error('customState.superpositionState has not been initialized');
             if (spState.visibleRefs[segmentIndex].length === 0) {
                 const loadStrs = [];
-                (_d = spState.segmentData) === null || _d === void 0 ? void 0 : _d[segmentIndex].clusters.forEach(cluster => {
+                (_a = spState.segmentData) === null || _a === void 0 ? void 0 : _a[segmentIndex].clusters.forEach(cluster => {
                     var _a, _b;
                     let entryList = [cluster[0]];
                     if ((_b = (_a = customState.initParams) === null || _a === void 0 ? void 0 : _a.superpositionParams) === null || _b === void 0 ? void 0 : _b.superposeAll) {
@@ -243,10 +243,10 @@ class SegmentTree extends base_1.PurePluginUIComponent {
             if (customState && customState.initParams && customState.initParams.superposition) {
                 sectionHeader = (0, jsx_runtime_1.jsx)(common_1.SectionHeader, { title: `Structure clusters - ${customState.initParams.moleculeId}` });
                 if (customState.superpositionError) {
-                    return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [sectionHeader, (0, jsx_runtime_1.jsx)("div", Object.assign({ style: { textAlign: 'center' } }, { children: customState.superpositionError }))] });
+                    return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [sectionHeader, (0, jsx_runtime_1.jsx)("div", { style: { textAlign: 'center' }, children: customState.superpositionError })] });
                 }
                 else if (!customState.superpositionState || !customState.superpositionState.segmentData) {
-                    return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [sectionHeader, (0, jsx_runtime_1.jsx)("div", Object.assign({ style: { textAlign: 'center' } }, { children: "Loading Segment Data!" }))] });
+                    return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [sectionHeader, (0, jsx_runtime_1.jsx)("div", { style: { textAlign: 'center' }, children: "Loading Segment Data!" })] });
                 }
             }
         }
@@ -307,44 +307,39 @@ class ClusterNode extends base_1.PluginUIComponent {
             const currentState = Object.assign({}, this.state);
             this.setState({ showAll: false, showNone: false });
             setTimeout(() => tslib_1.__awaiter(this, void 0, void 0, function* () {
-                var _b, e_1, _c, _d;
-                var _e;
+                var _a, e_1, _b, _c;
+                var _d;
                 const loadStrs = [];
                 try {
-                    for (var _f = true, _g = tslib_1.__asyncValues(this.state.cluster), _h; _h = yield _g.next(), _b = _h.done, !_b;) {
-                        _d = _h.value;
-                        _f = false;
-                        try {
-                            const str = _d;
-                            const structStateId = `${str.pdb_id}_${str.struct_asym_id}`;
-                            let structRef = undefined;
-                            if (customState && customState.superpositionState && customState.superpositionState.models[structStateId]) {
-                                structRef = customState.superpositionState.models[structStateId];
-                            }
-                            if (structRef) {
-                                const cell = this.plugin.state.data.cells.get(structRef);
-                                if (cell) {
-                                    const isHidden = cell.state.isHidden ? true : false;
-                                    if ((isHidden && currentState.showAll) || (!isHidden && currentState.showNone)) {
-                                        yield commands_1.PluginCommands.State.ToggleVisibility(this.plugin, { state: cell.parent, ref: structRef });
-                                        // await PluginCommands.State.ToggleVisibility(this.plugin, { state: cell.parent!, ref: cell.transform.parent });
-                                    }
+                    for (var _e = true, _f = tslib_1.__asyncValues(this.state.cluster), _g; _g = yield _f.next(), _a = _g.done, !_a; _e = true) {
+                        _c = _g.value;
+                        _e = false;
+                        const str = _c;
+                        const structStateId = `${str.pdb_id}_${str.struct_asym_id}`;
+                        let structRef = undefined;
+                        if (customState && customState.superpositionState && customState.superpositionState.models[structStateId]) {
+                            structRef = customState.superpositionState.models[structStateId];
+                        }
+                        if (structRef) {
+                            const cell = this.plugin.state.data.cells.get(structRef);
+                            if (cell) {
+                                const isHidden = cell.state.isHidden ? true : false;
+                                if ((isHidden && currentState.showAll) || (!isHidden && currentState.showNone)) {
+                                    yield commands_1.PluginCommands.State.ToggleVisibility(this.plugin, { state: cell.parent, ref: structRef });
+                                    // await PluginCommands.State.ToggleVisibility(this.plugin, { state: cell.parent!, ref: cell.transform.parent });
                                 }
                             }
-                            else {
-                                if (currentState.showAll)
-                                    loadStrs.push(str);
-                            }
                         }
-                        finally {
-                            _f = true;
+                        else {
+                            if (currentState.showAll)
+                                loadStrs.push(str);
                         }
                     }
                 }
                 catch (e_1_1) { e_1 = { error: e_1_1 }; }
                 finally {
                     try {
-                        if (!_f && !_b && (_c = _g.return)) yield _c.call(_g);
+                        if (!_e && !_a && (_b = _f.return)) yield _b.call(_f);
                     }
                     finally { if (e_1) throw e_1.error; }
                 }
@@ -353,7 +348,7 @@ class ClusterNode extends base_1.PluginUIComponent {
                 if (loadStrs.length > 0) {
                     yield (0, superposition_1.renderSuperposition)(this.plugin, this.props.segmentIndex, loadStrs);
                 }
-                (_e = customState.events) === null || _e === void 0 ? void 0 : _e.isBusy.next(false);
+                (_d = customState.events) === null || _d === void 0 ? void 0 : _d.isBusy.next(false);
             }));
         });
         this.cancelAction = (e) => {
@@ -383,11 +378,11 @@ class ClusterNode extends base_1.PluginUIComponent {
             return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
         const expand = (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: this.state.isCollapsed ? icons_1.ArrowRightSvg : icons_1.ArrowDropDownSvg, flex: '20px', onClick: this.toggleExpanded, transparent: true, disabled: this.state.isBusy, className: 'msp-no-hover-outline' });
         const title = `Segment ${customState.superpositionState.activeSegment} Cluster ${this.props.clusterIndex + 1}`;
-        const label = (0, jsx_runtime_1.jsxs)(common_1.Button, Object.assign({ className: `msp-btn-tree-label`, noOverflow: true, title: title, disabled: this.state.isBusy }, { children: [(0, jsx_runtime_1.jsxs)("span", { children: ["Cluster ", this.props.clusterIndex + 1] }), " ", (0, jsx_runtime_1.jsxs)("small", { children: [this.state.cluster.length < this.props.cluster.length ? `${this.state.cluster.length} / ` : '', this.props.cluster.length, " chain", this.props.cluster.length > 1 ? 's' : ''] })] }));
-        const selectionControls = (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(common_1.Button, Object.assign({ icon: icons_1.CheckSvg, flex: true, onClick: this.selectAll, style: { flex: '0 0 50px', textAlign: 'center', fontSize: '80%', color: '#9cacc3', padding: 0 }, disabled: this.state.isBusy, title: `Show all chains` }, { children: "All" })), (0, jsx_runtime_1.jsx)(common_1.Button, Object.assign({ icon: icons_1.CloseSvg, flex: true, onClick: this.selectNone, style: { flex: '0 0 50px', textAlign: 'center', fontSize: '80%', color: '#9cacc3', padding: 0 }, disabled: this.state.isBusy, title: `Hide all chains` }, { children: "None" }))] });
-        const mainRow = (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `msp-flex-row msp-tree-row`, style: { marginTop: '10px' } }, { children: [expand, label, this.props.cluster.length > 1 && selectionControls] }));
-        const searchControls = (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'msp-mapped-parameter-group', style: { fontSize: '90%' } }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'msp-control-row msp-transform-header-brand-gray', style: { height: '33px', marginLeft: '30px' } }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'msp-control-row-label' }, { children: "Search PDB ID" })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'msp-control-row-ctrl' }, { children: (0, jsx_runtime_1.jsx)("input", { type: 'text', placeholder: 'Enter PDB ID..', disabled: this.state.isBusy, onChange: e => this.inputStream.next(e.target.value), value: this.state.searchText, maxLength: 4 }) }))] })), (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.CloseSvg, flex: true, onClick: this.clearSearch, style: { flex: '0 0 24px', padding: 0 }, disabled: this.state.isBusy || this.state.searchText === '', toggleState: this.state.searchText !== '', title: 'Clear search input' })] }));
-        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [mainRow, (this.state.showAll || this.state.showNone) && (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `msp-control-row msp-transform-header-brand-${this.state.showAll ? 'green' : 'red'}`, style: { display: 'flex', marginLeft: '20px', height: '35px' } }, { children: [(0, jsx_runtime_1.jsxs)("span", Object.assign({ className: 'msp-control-row-label', style: { flex: '1 1 auto', textAlign: 'left', fontSize: '85%' } }, { children: [this.state.showAll ? 'Display' : 'Hide', " ", this.state.cluster.length < this.props.cluster.length ? `${this.state.cluster.length} / ` : 'all ', this.props.cluster.length, " chains"] })), (0, jsx_runtime_1.jsx)(common_1.Button, Object.assign({ icon: icons_1.CheckSvg, flex: true, onClick: this.applyAction, style: { flex: '0 0 60px', textAlign: 'center', fontSize: '78%', color: '#9cacc3', padding: 0, margin: '0 1px' }, title: `Apply action` }, { children: "Apply" })), (0, jsx_runtime_1.jsx)(common_1.Button, Object.assign({ icon: icons_1.CloseSvg, flex: true, onClick: this.cancelAction, style: { flex: '0 0 60px', textAlign: 'center', fontSize: '78%', color: '#9cacc3', padding: 0, margin: '0 1px' }, title: `Cancel action` }, { children: "Cancel" }))] })) }), (!this.state.isCollapsed && this.props.cluster.length > 5) && searchControls, !this.state.isCollapsed && (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'msp-tree-updates-wrapper', style: { maxHeight: (this.props.totalClusters > 1) ? '330px' : '87%', overflowY: 'auto' } }, { children: this.state.cluster.map((s, i) => (0, jsx_runtime_1.jsx)(StructureNode, { segmentIndex: this.props.segmentIndex, structure: s, isRep: i === 0 ? true : false }, `str-${s.pdb_id}${s.struct_asym_id}${i}`)) }))] });
+        const label = (0, jsx_runtime_1.jsxs)(common_1.Button, { className: `msp-btn-tree-label`, noOverflow: true, title: title, disabled: this.state.isBusy, children: [(0, jsx_runtime_1.jsxs)("span", { children: ["Cluster ", this.props.clusterIndex + 1] }), " ", (0, jsx_runtime_1.jsxs)("small", { children: [this.state.cluster.length < this.props.cluster.length ? `${this.state.cluster.length} / ` : '', this.props.cluster.length, " chain", this.props.cluster.length > 1 ? 's' : ''] })] });
+        const selectionControls = (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: this.selectAll, style: { flex: '0 0 50px', textAlign: 'center', fontSize: '80%', color: '#9cacc3', padding: 0 }, disabled: this.state.isBusy, title: `Show all chains`, children: "All" }), (0, jsx_runtime_1.jsx)(common_1.Button, { icon: icons_1.CloseSvg, flex: true, onClick: this.selectNone, style: { flex: '0 0 50px', textAlign: 'center', fontSize: '80%', color: '#9cacc3', padding: 0 }, disabled: this.state.isBusy, title: `Hide all chains`, children: "None" })] });
+        const mainRow = (0, jsx_runtime_1.jsxs)("div", { className: `msp-flex-row msp-tree-row`, style: { marginTop: '10px' }, children: [expand, label, this.props.cluster.length > 1 && selectionControls] });
+        const searchControls = (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', marginLeft: '30px' }, children: [(0, jsx_runtime_1.jsx)("span", { className: 'msp-control-row-label', children: "Search PDB ID" }), (0, jsx_runtime_1.jsx)("div", { className: 'msp-control-row-ctrl', children: (0, jsx_runtime_1.jsx)("input", { type: 'text', placeholder: 'Enter PDB ID..', disabled: this.state.isBusy, onChange: e => this.inputStream.next(e.target.value), value: this.state.searchText, maxLength: 4 }) })] }), (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: icons_1.CloseSvg, flex: true, onClick: this.clearSearch, style: { flex: '0 0 24px', padding: 0 }, disabled: this.state.isBusy || this.state.searchText === '', toggleState: this.state.searchText !== '', title: 'Clear search input' })] });
+        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [mainRow, (this.state.showAll || this.state.showNone) && (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)("div", { className: `msp-control-row msp-transform-header-brand-${this.state.showAll ? 'green' : 'red'}`, style: { display: 'flex', marginLeft: '20px', height: '35px' }, children: [(0, jsx_runtime_1.jsxs)("span", { className: 'msp-control-row-label', style: { flex: '1 1 auto', textAlign: 'left', fontSize: '85%' }, children: [this.state.showAll ? 'Display' : 'Hide', " ", this.state.cluster.length < this.props.cluster.length ? `${this.state.cluster.length} / ` : 'all ', this.props.cluster.length, " chains"] }), (0, jsx_runtime_1.jsx)(common_1.Button, { icon: icons_1.CheckSvg, flex: true, onClick: this.applyAction, style: { flex: '0 0 60px', textAlign: 'center', fontSize: '78%', color: '#9cacc3', padding: 0, margin: '0 1px' }, title: `Apply action`, children: "Apply" }), (0, jsx_runtime_1.jsx)(common_1.Button, { icon: icons_1.CloseSvg, flex: true, onClick: this.cancelAction, style: { flex: '0 0 60px', textAlign: 'center', fontSize: '78%', color: '#9cacc3', padding: 0, margin: '0 1px' }, title: `Cancel action`, children: "Cancel" })] }) }), (!this.state.isCollapsed && this.props.cluster.length > 5) && searchControls, !this.state.isCollapsed && (0, jsx_runtime_1.jsx)("div", { className: 'msp-tree-updates-wrapper', style: { maxHeight: (this.props.totalClusters > 1) ? '330px' : '87%', overflowY: 'auto' }, children: this.state.cluster.map((s, i) => (0, jsx_runtime_1.jsx)(StructureNode, { segmentIndex: this.props.segmentIndex, structure: s, isRep: i === 0 ? true : false }, `str-${s.pdb_id}${s.struct_asym_id}${i}`)) })] });
     }
 }
 class StructureNode extends base_1.PluginUIComponent {
@@ -572,7 +567,7 @@ class StructureNode extends base_1.PluginUIComponent {
                 showAddChainBtn = false;
             }
             if (representations.length > 0) {
-                return (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'msp-accent-offset', style: { marginLeft: '40px' } }, { children: [representations.length > 0 && representations.map((r, i) => (0, jsx_runtime_1.jsx)(StructureRepresentationEntry, { group: [structHierarchy], representation: r }, `${r.cell.transform.ref}-${i}`)), showAddChainBtn && (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'msp-control-group-header', style: { marginTop: '1px' } }, { children: (0, jsx_runtime_1.jsxs)(common_1.Button, Object.assign({ noOverflow: true, className: 'msp-control-button-label', title: `Click to add chain representaion`, onClick: () => this.addChainRepr() }, { children: ["\u00A0\u00A0Add Chain ", this.props.structure.struct_asym_id, " Representation"] })) }))] }));
+                return (0, jsx_runtime_1.jsxs)("div", { className: 'msp-accent-offset', style: { marginLeft: '40px' }, children: [representations.length > 0 && representations.map((r, i) => (0, jsx_runtime_1.jsx)(StructureRepresentationEntry, { group: [structHierarchy], representation: r }, `${r.cell.transform.ref}-${i}`)), showAddChainBtn && (0, jsx_runtime_1.jsx)("div", { className: 'msp-control-group-header', style: { marginTop: '1px' }, children: (0, jsx_runtime_1.jsxs)(common_1.Button, { noOverflow: true, className: 'msp-control-button-label', title: `Click to add chain representaion`, onClick: () => this.addChainRepr(), children: ["\u00A0\u00A0Add Chain ", this.props.structure.struct_asym_id, " Representation"] }) })] });
             }
         }
         return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
@@ -637,11 +632,11 @@ class StructureNode extends base_1.PluginUIComponent {
         if (superpositionParams && superpositionParams.ligandView) {
             strTitle = `${this.props.structure.pdb_id} ${this.props.structure.struct_asym_id}`;
         }
-        const label = (0, jsx_runtime_1.jsxs)(common_1.Button, Object.assign({ className: `msp-btn-tree-label`, style: { borderLeftColor: this.panelColor }, noOverflow: true, title: strTitle, disabled: (invalidStruct || this.state.isBusy || this.state.isProcessing) ? true : false, onMouseEnter: this.highlight, onMouseLeave: this.clearHighlight }, { children: [(0, jsx_runtime_1.jsx)("span", { children: strTitle }), subTitle && (0, jsx_runtime_1.jsx)("small", { children: subTitle })] }));
+        const label = (0, jsx_runtime_1.jsxs)(common_1.Button, { className: `msp-btn-tree-label`, style: { borderLeftColor: this.panelColor }, noOverflow: true, title: strTitle, disabled: (invalidStruct || this.state.isBusy || this.state.isProcessing) ? true : false, onMouseEnter: this.highlight, onMouseLeave: this.clearHighlight, children: [(0, jsx_runtime_1.jsx)("span", { children: strTitle }), subTitle && (0, jsx_runtime_1.jsx)("small", { children: subTitle })] });
         const expand = (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: !this.state.showControls ? icons_1.ArrowRightSvg : icons_1.ArrowDropDownSvg, flex: '20px', onClick: this.toggleControls, transparent: true, className: 'msp-no-hover-outline', disabled: (invalidStruct || this.state.isBusy || this.state.isProcessing) ? true : false });
         const visibility = (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: this.state.isHidden ? icons_1.VisibilityOffOutlinedSvg : icons_1.VisibilityOutlinedSvg, toggleState: false, small: true, onClick: this.toggleVisible, disabled: (invalidStruct || this.state.isBusy || this.state.isProcessing) ? true : false, title: this.state.isHidden ? `Show chain` : `Hide chain` });
-        const row = (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `msp-flex-row msp-tree-row`, style: { marginLeft: !this.state.isHidden ? '10px' : '31px' } }, { children: [!this.state.isHidden && expand, label, visibility] }));
-        return (0, jsx_runtime_1.jsxs)("div", Object.assign({ style: { marginBottom: '1px' } }, { children: [row, this.state.showControls && this.updates()] }));
+        const row = (0, jsx_runtime_1.jsxs)("div", { className: `msp-flex-row msp-tree-row`, style: { marginLeft: !this.state.isHidden ? '10px' : '31px' }, children: [!this.state.isHidden && expand, label, visibility] });
+        return (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: '1px' }, children: [row, this.state.showControls && this.updates()] });
     }
 }
 class StructureRepresentationEntry extends base_1.PurePluginUIComponent {
@@ -677,6 +672,6 @@ class StructureRepresentationEntry extends base_1.PurePluginUIComponent {
         }
         if (((_f = repr.obj) === null || _f === void 0 ? void 0 : _f.data.repr) && ((_g = repr.obj) === null || _g === void 0 ? void 0 : _g.data.repr.label) === 'Custom Selection')
             label = 'Custom Selection';
-        return (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'msp-representation-entry' }, { children: [repr.parent && (0, jsx_runtime_1.jsx)(common_1.ExpandGroup, Object.assign({ header: `${label || 'Representation'}`, noOffset: true, headerStyle: { overflow: 'hidden' } }, { children: (0, jsx_runtime_1.jsx)(update_transform_1.UpdateTransformControl, { state: repr.parent, transform: repr.transform, customHeader: 'none', noMargin: true }) })), (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: this.props.representation.cell.state.isHidden ? icons_1.VisibilityOffOutlinedSvg : icons_1.VisibilityOutlinedSvg, toggleState: false, onClick: this.toggleVisible, title: this.props.representation.cell.state.isHidden ? `Show representation` : `Hide representation`, small: true, className: 'msp-default-bg', style: { position: 'absolute', top: 0, right: 0, lineHeight: '24px', height: '24px', textAlign: 'right', width: '32px', paddingRight: '6px', background: 'none' } })] }));
+        return (0, jsx_runtime_1.jsxs)("div", { className: 'msp-representation-entry', children: [repr.parent && (0, jsx_runtime_1.jsx)(common_1.ExpandGroup, { header: `${label || 'Representation'}`, noOffset: true, headerStyle: { overflow: 'hidden' }, children: (0, jsx_runtime_1.jsx)(update_transform_1.UpdateTransformControl, { state: repr.parent, transform: repr.transform, customHeader: 'none', noMargin: true }) }), (0, jsx_runtime_1.jsx)(common_1.IconButton, { svg: this.props.representation.cell.state.isHidden ? icons_1.VisibilityOffOutlinedSvg : icons_1.VisibilityOutlinedSvg, toggleState: false, onClick: this.toggleVisible, title: this.props.representation.cell.state.isHidden ? `Show representation` : `Hide representation`, small: true, className: 'msp-default-bg', style: { position: 'absolute', top: 0, right: 0, lineHeight: '24px', height: '24px', textAlign: 'right', width: '32px', paddingRight: '6px', background: 'none' } })] });
     }
 }

package/lib/ui/split-ui/components.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ControlsWrapper, Log } from 'molstar/lib/mol-plugin-ui/plugin';
 import { SequenceView } from 'molstar/lib/mol-plugin-ui/sequence';
 export declare const UIComponents: {

package/lib/ui/split-ui/split-ui.js

@@ -1,6 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.resolveHTMLElement = exports.createPluginSplitUI = exports.LayoutSpecComponent = void 0;
+exports.LayoutSpecComponent = LayoutSpecComponent;
+exports.createPluginSplitUI = createPluginSplitUI;
+exports.resolveHTMLElement = resolveHTMLElement;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const base_1 = require("molstar/lib/mol-plugin-ui/base");
@@ -11,10 +13,9 @@ const spec_1 = require("../../spec");
 function LayoutSpecComponent(target, component, props) {
     return { target, component, props };
 }
-exports.LayoutSpecComponent = LayoutSpecComponent;
 function createPluginSplitUI(options) {
-    var _a;
     return tslib_1.__awaiter(this, void 0, void 0, function* () {
+        var _a;
         const { spec, layout, onBeforeUIRender } = options;
         const render = (_a = options.render) !== null && _a !== void 0 ? _a : react18_1.renderReact18;
         const ctx = new context_1.PluginUIContext(spec || (0, spec_1.DefaultPluginUISpec)());
@@ -44,7 +45,6 @@ function createPluginSplitUI(options) {
         return ctx;
     });
 }
-exports.createPluginSplitUI = createPluginSplitUI;
 function resolveHTMLElement(element) {
     if (typeof element === 'string') {
         const result = document.getElementById(element);
@@ -56,7 +56,6 @@ function resolveHTMLElement(element) {
         return element;
     }
 }
-exports.resolveHTMLElement = resolveHTMLElement;
 function PluginPanelWrapper({ plugin, component, props }) {
     const [state, setState] = (0, react_1.useState)({ kind: 'pending' });
     (0, react_1.useEffect)(() => {
@@ -73,7 +72,7 @@ function PluginPanelWrapper({ plugin, component, props }) {
     }, [plugin]);
     if (state.kind !== 'initialized') {
         const message = state.kind === 'error' ? `Initialization error: ${state.message}` : 'Waiting for plugin initialization';
-        return (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'msp-plugin', style: { position: 'relative', width: '100%', height: '100%' } }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'msp-plugin-init-error' }, { children: message })) }));
+        return (0, jsx_runtime_1.jsx)("div", { className: 'msp-plugin', style: { position: 'relative', width: '100%', height: '100%' }, children: (0, jsx_runtime_1.jsx)("div", { className: 'msp-plugin-init-error', children: message }) });
     }
-    return (0, jsx_runtime_1.jsx)(base_1.PluginReactContext.Provider, Object.assign({ value: plugin }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'msp-plugin', style: { position: 'relative', width: '100%', height: '100%' } }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'msp-plugin-content msp-layout-standard msp-layout-static', style: { position: 'relative', width: '100%', height: '100%' } }, { children: (0, react_1.createElement)(component, props) })) })) }));
+    return (0, jsx_runtime_1.jsx)(base_1.PluginReactContext.Provider, { value: plugin, children: (0, jsx_runtime_1.jsx)("div", { className: 'msp-plugin', style: { position: 'relative', width: '100%', height: '100%' }, children: (0, jsx_runtime_1.jsx)("div", { className: 'msp-plugin-content msp-layout-standard msp-layout-static', style: { position: 'relative', width: '100%', height: '100%' }, children: (0, react_1.createElement)(component, props) }) }) });
 }

package/lib/ui/superposition-components.js

@@ -72,34 +72,29 @@ class ComponentListControls extends base_1.PurePluginUIComponent {
             (_a = customState.events) === null || _a === void 0 ? void 0 : _a.isBusy.next(true);
             const visualEntites = (type === 'ligands') ? this.state.ligGroups : this.state.carbGroups;
             setTimeout(() => tslib_1.__awaiter(this, void 0, void 0, function* () {
-                var _b, e_1, _c, _d;
-                var _e;
+                var _a, e_1, _b, _c;
+                var _d;
                 try {
-                    for (var _f = true, visualEntites_1 = tslib_1.__asyncValues(visualEntites), visualEntites_1_1; visualEntites_1_1 = yield visualEntites_1.next(), _b = visualEntites_1_1.done, !_b;) {
-                        _d = visualEntites_1_1.value;
-                        _f = false;
-                        try {
-                            const visualEntity = _d;
-                            this.plugin.managers.structure.hierarchy.toggleVisibility(visualEntity, action);
-                        }
-                        finally {
-                            _f = true;
-                        }
+                    for (var _e = true, visualEntites_1 = tslib_1.__asyncValues(visualEntites), visualEntites_1_1; visualEntites_1_1 = yield visualEntites_1.next(), _a = visualEntites_1_1.done, !_a; _e = true) {
+                        _c = visualEntites_1_1.value;
+                        _e = false;
+                        const visualEntity = _c;
+                        this.plugin.managers.structure.hierarchy.toggleVisibility(visualEntity, action);
                     }
                 }
                 catch (e_1_1) { e_1 = { error: e_1_1 }; }
                 finally {
                     try {
-                        if (!_f && !_b && (_c = visualEntites_1.return)) yield _c.call(visualEntites_1);
+                        if (!_e && !_a && (_b = visualEntites_1.return)) yield _b.call(visualEntites_1);
                     }
                     finally { if (e_1) throw e_1.error; }
                 }
                 ;
-                (_e = customState.events) === null || _e === void 0 ? void 0 : _e.isBusy.next(false);
+                (_d = customState.events) === null || _d === void 0 ? void 0 : _d.isBusy.next(false);
             }));
         };
         this.showHideAllControls = (type) => {
-            return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(common_1.Button, Object.assign({ 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, Object.assign({ 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" }))] });
+            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 = (e) => {
             e.preventDefault();
@@ -128,7 +123,7 @@ class ComponentListControls extends base_1.PurePluginUIComponent {
             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", Object.assign({ className: 'msp-flex-row', style: { marginTop: '6px' } }, { children: [(0, jsx_runtime_1.jsxs)("button", Object.assign({ 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", Object.assign({ style: { color: '#7d91b0' } }, { children: [" ( ", visibleVisuals, visibleVisuals < totalVisuals ? ` / ${totalVisuals}` : '', " )"] }))] })), visibleVisuals > 1 && showHideAllControls] }));
+            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] });
         };
     }
     componentDidMount() {
@@ -200,11 +195,11 @@ class ComponentListControls extends base_1.PurePluginUIComponent {
         this.setState({ componentGroups: componentGroupsVal, ligGroups: componentGroupsVal.ligGroups, carbGroups: componentGroupsVal.carbGroups, ligSearchText: '', carbSearchText: '' });
     }
     render() {
-        const ligSearchControls = (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'msp-mapped-parameter-group', style: { fontSize: '90%' } }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'msp-control-row msp-transform-header-brand-gray', style: { height: '33px' } }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'msp-control-row-label' }, { children: "Search Ligand" })), (0, jsx_runtime_1.jsx)("div", Object.assign({ 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", Object.assign({ className: 'msp-mapped-parameter-group', style: { fontSize: '90%' } }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'msp-control-row msp-transform-header-brand-gray', style: { height: '33px' } }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'msp-control-row-label' }, { children: "Search Carbohydrate" })), (0, jsx_runtime_1.jsx)("div", Object.assign({ 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 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", Object.assign({ 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", Object.assign({ 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)) }))] });
+        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 {
@@ -298,7 +293,7 @@ class StructureComponentGroup extends base_1.PurePluginUIComponent {
         const cell = component.cell;
         const label = (_a = cell.obj) === null || _a === void 0 ? void 0 : _a.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", Object.assign({ className: 'msp-flex-row' }, { children: [(0, jsx_runtime_1.jsx)(common_1.Button, Object.assign({ 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", Object.assign({ className: 'msp-accent-offset' }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ style: { marginBottom: '6px' } }, { children: component.representations.map(r => (0, jsx_runtime_1.jsx)(StructureRepresentationEntry, { group: this.props.group, representation: r }, r.cell.transform.ref)) })) }))] });
+        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 {
@@ -398,6 +393,6 @@ class StructureRepresentationEntry extends base_1.PurePluginUIComponent {
             if (reprObj.tags && reprObj.tags.indexOf('af-superposition-visual') >= 0)
                 isAlphafold = true;
         }
-        return (0, jsx_runtime_1.jsx)("div", Object.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", Object.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", Object.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", Object.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", Object.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 (0, jsx_runtime_1.jsx)("div", { className: 'msp-representation-entry', children: repr.parent && (0, jsx_runtime_1.jsxs)("div", { children: [(clusterSelectArr.length > 2 && !isSurrVisual && !isAlphafold) && (0, jsx_runtime_1.jsx)("div", { className: 'msp-representation-entry', children: (0, jsx_runtime_1.jsx)(parameters_1.ParameterControls, { params: clusterOptions, values: this.state.clusterVal, onChangeValues: this.selectCluster, isDisabled: this.state.isBusy }) }), (0, jsx_runtime_1.jsx)("div", { className: 'msp-representation-entry', children: (0, jsx_runtime_1.jsx)(parameters_1.ParameterControls, { params: { type: (_a = repr.params) === null || _a === void 0 ? void 0 : _a.definition.type }, values: { type: (_b = repr.params) === null || _b === void 0 ? void 0 : _b.values.type }, onChangeValues: this.update, isDisabled: this.state.isBusy }) }), (0, jsx_runtime_1.jsx)("div", { className: 'msp-representation-entry', children: (0, jsx_runtime_1.jsx)(parameters_1.ParameterControls, { params: { colorTheme: (_c = repr.params) === null || _c === void 0 ? void 0 : _c.definition.colorTheme }, values: { colorTheme: (_d = repr.params) === null || _d === void 0 ? void 0 : _d.values.colorTheme }, onChangeValues: this.update, isDisabled: this.state.isBusy }) }), (0, jsx_runtime_1.jsx)("div", { className: 'msp-representation-entry', children: (0, jsx_runtime_1.jsx)(parameters_1.ParameterControls, { params: { sizeTheme: (_e = repr.params) === null || _e === void 0 ? void 0 : _e.definition.sizeTheme }, values: { sizeTheme: (_f = repr.params) === null || _f === void 0 ? void 0 : _f.values.sizeTheme }, onChangeValues: this.update, isDisabled: this.state.isBusy }) })] }) });
     }
 }

package/lib/ui/symmetry-annotation-controls.d.ts

@@ -9,8 +9,8 @@ declare const DefaultSymmetryParams: {
     on: PD.BooleanParam;
     /** Index of the currently selected symmetry (in case there a more symmetries for an assembly), regardless of whether visibility is on of off */
     symmetryIndex: PD.Select<number>;
-    /** `true` if symmetry data have been retrieved but do not contain any non-trivial symmetry */
-    noSymmetries: PD.BooleanParam;
+    /** `true` if visibility is on and symmetry data have been retrieved and contain at least one non-trivial symmetry. */
+    hasSymmetries: PD.BooleanParam;
 };
 type SymmetryParams = typeof DefaultSymmetryParams;
 type SymmetryProps = PD.ValuesFor<SymmetryParams>;
@@ -25,8 +25,8 @@ export declare class SymmetryAnnotationControls extends PurePluginUIComponent<{}
     componentDidMount(): void;
     /** Synchronize parameters and values in UI with real parameters currently applied in `AssemblySymmetryProvider` */
     syncParams(): void;
-    /** Return `true` if symmetry data have been retrieved and do not contain any non-trivial symmetry. */
-    noSymmetriesAvailable(): boolean;
+    /** Return `true` if symmetry data have been retrieved and contain at least one non-trivial symmetry. */
+    hasSymmetriesAvailable(): boolean;
     /** Get the first loaded structure, if any. */
     getPivotStructure(): StructureRef | undefined;
     /** Get parameters currently applied in `AssemblySymmetryProvider` */

package/lib/ui/symmetry-annotation-controls.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isAssemblySymmetryAnnotationApplicable = exports.SymmetryAnnotationControls = void 0;
+exports.SymmetryAnnotationControls = void 0;
+exports.isAssemblySymmetryAnnotationApplicable = isAssemblySymmetryAnnotationApplicable;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const behavior_1 = require("molstar/lib/extensions/assembly-symmetry/behavior");
@@ -15,8 +16,8 @@ const DefaultSymmetryParams = {
     on: param_definition_1.ParamDefinition.Boolean(false, { isHidden: true }),
     /** Index of the currently selected symmetry (in case there a more symmetries for an assembly), regardless of whether visibility is on of off */
     symmetryIndex: param_definition_1.ParamDefinition.Select(0, [[0, 'Auto']]),
-    /** `true` if symmetry data have been retrieved but do not contain any non-trivial symmetry */
-    noSymmetries: param_definition_1.ParamDefinition.Boolean(false, { isHidden: true }),
+    /** `true` if visibility is on and symmetry data have been retrieved and contain at least one non-trivial symmetry. */
+    hasSymmetries: param_definition_1.ParamDefinition.Boolean(false, { isHidden: true }),
 };
 const DefaultSymmetryControlsState = {
     params: DefaultSymmetryParams,
@@ -54,21 +55,21 @@ class SymmetryAnnotationControls extends base_1.PurePluginUIComponent {
     /** Synchronize parameters and values in UI with real parameters currently applied in `AssemblySymmetryProvider` */
     syncParams() {
         if (this.hasAssemblySymmetry3D()) {
-            const noSymmetries = this.noSymmetriesAvailable();
+            const hasSymmetries = this.hasSymmetriesAvailable();
             const realParams = this.getRealParams();
             const realValues = this.getRealValues();
-            const options = noSymmetries ?
-                [[0, 'None']]
-                : realParams.symmetryIndex.options.filter(([index, label]) => index >= 0); // Removing the 'off' option (having index -1)
+            const options = hasSymmetries ?
+                realParams.symmetryIndex.options.filter(([index, label]) => index >= 0) // Removing the 'off' option (having index -1)
+                : [[0, 'None']];
             const params = Object.assign(Object.assign({}, this.state.params), { symmetryIndex: param_definition_1.ParamDefinition.Select(0, options) });
             const values = (realValues.symmetryIndex >= 0) ? {
                 on: true,
                 symmetryIndex: realValues.symmetryIndex,
-                noSymmetries: noSymmetries,
+                hasSymmetries,
             } : {
                 on: false,
                 symmetryIndex: this.state.values.symmetryIndex,
-                noSymmetries: noSymmetries,
+                hasSymmetries,
             };
             this.setState({ params, values });
         }
@@ -79,12 +80,12 @@ class SymmetryAnnotationControls extends base_1.PurePluginUIComponent {
             });
         }
     }
-    /** Return `true` if symmetry data have been retrieved and do not contain any non-trivial symmetry. */
-    noSymmetriesAvailable() {
+    /** Return `true` if symmetry data have been retrieved and contain at least one non-trivial symmetry. */
+    hasSymmetriesAvailable() {
         var _a, _b;
         const structure = (_b = (_a = this.getPivotStructure()) === null || _a === void 0 ? void 0 : _a.cell.obj) === null || _b === void 0 ? void 0 : _b.data;
         const symmetryData = structure && prop_1.AssemblySymmetryDataProvider.get(structure).value;
-        return symmetryData !== undefined && symmetryData.filter(sym => sym.symbol !== 'C1').length === 0;
+        return symmetryData !== undefined && symmetryData.filter(sym => sym.symbol !== 'C1').length > 0;
     }
     /** Get the first loaded structure, if any. */
     getPivotStructure() {
@@ -145,8 +146,8 @@ class SymmetryAnnotationControls extends base_1.PurePluginUIComponent {
     }
     /** Run changes needed to change parameter values, and set UI accordingly */
     changeParamValues(values) {
-        var _a;
         return tslib_1.__awaiter(this, void 0, void 0, function* () {
+            var _a;
             const struct = this.getPivotStructure();
             if (!struct)
                 return;
@@ -201,20 +202,13 @@ class SymmetryAnnotationControls extends base_1.PurePluginUIComponent {
         });
     }
     render() {
-        const shortTitle = 'Assembly Symmetry' + (this.state.values.noSymmetries ? ' [Not Available]' : '');
-        const title = 'Assembly Symmetry' + (this.state.values.noSymmetries ? ' [Not Available]\nSymmetry information for this assembly is not available' : '');
-        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(SymmetryAnnotationRowControls, { shortTitle: shortTitle, title: title, applied: this.state.values.on, onChangeApplied: applied => this.apply(applied), params: this.state.params, values: this.state.values, onChangeValues: v => this.changeParamValues(v) }) });
+        const notAvailable = this.state.values.on && !this.state.values.hasSymmetries;
+        const shortTitle = 'Assembly Symmetry' + (notAvailable ? ' [Not Available]' : '');
+        const title = 'Assembly Symmetry' + (notAvailable ? ' [Not Available]\nSymmetry information for this assembly is not available' : '');
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(annotation_row_controls_1.AnnotationRowControls, { shortTitle: shortTitle, title: title, applied: this.state.values.on, onChangeApplied: applied => this.apply(applied), params: this.state.params, values: this.state.values, onChangeValues: v => this.changeParamValues(v), errorMessage: !this.state.values.on ? 'First activate annotation to show options' : notAvailable ? 'Symmetry information not available' : undefined }) });
     }
 }
 exports.SymmetryAnnotationControls = SymmetryAnnotationControls;
-class SymmetryAnnotationRowControls extends annotation_row_controls_1.AnnotationRowControls {
-    renderOptions() {
-        if (this.props.values.noSymmetries) {
-            return (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'msp-row-text' }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ title: 'Symmetry information for this assembly is not available' }, { children: "Symmetry information not available" })) }));
-        }
-        return super.renderOptions();
-    }
-}
 /** Get the first loaded structure, if any. */
 function getPivotStructure(plugin) {
     return plugin.managers.structure.hierarchy.selection.structures[0];
@@ -229,4 +223,3 @@ function isAssemblySymmetryAnnotationApplicable(plugin) {
     // by `AssemblySymmetry.isApplicable = struct => struct?.units[0].conformation.operator.assembly !== undefined;`
     // But we cannot easily override the `fetch` function which calls the original `isApplicable`.
 }
-exports.isAssemblySymmetryAnnotationApplicable = isAssemblySymmetryAnnotationApplicable;

package/lib/viewer.d.ts

@@ -1,4 +1,5 @@
-/// <reference types="react" />
+import { loadMVS } from 'molstar/lib/extensions/mvs/load';
+import { MVSData } from 'molstar/lib/extensions/mvs/mvs-data';
 import { Canvas3DProps } from 'molstar/lib/mol-canvas3d/canvas3d';
 import { EmptyLoci } from 'molstar/lib/mol-model/loci';
 import { StructureElement } from 'molstar/lib/mol-model/structure';
@@ -6,6 +7,7 @@ import { StructureRef } from 'molstar/lib/mol-plugin-state/manager/structure/hie
 import { PluginContext } from 'molstar/lib/mol-plugin/context';
 import { Color } from 'molstar/lib/mol-util/color/color';
 import * as Foldseek from './extensions/foldseek';
+import * as Interactions from './extensions/interactions';
 import { StateGalleryManager } from './extensions/state-gallery/manager';
 import { StateGalleryControls } from './extensions/state-gallery/ui';
 import { LoadParams, QueryParam } from './helpers';
@@ -37,7 +39,7 @@ export declare class PDBeMolstarPlugin {
         format: string;
         isBinary: boolean;
     };
-    get state(): import("molstar/lib/mol-state/state").State;
+    get state(): import("molstar/lib/mol-state").State;
     createLigandStructure(isBranched: boolean): Promise<void>;
     load({ url, format, isBinary, assemblyId, progressMessage, id }: LoadParams, fullLoad?: boolean): Promise<void>;
     /** Remove loaded structure(s).
@@ -189,6 +191,25 @@ export declare class PDBeMolstarPlugin {
     /** Helper functions related to specific views or use cases */
     static extensions: {
         Foldseek: typeof Foldseek;
+        Interactions: typeof Interactions;
+        MVS: {
+            MVSData: {
+                SupportedVersion: number;
+                fromMVSJ(mvsjString: string): MVSData;
+                toMVSJ(mvsData: MVSData, space?: string | number): string;
+                isValid(mvsData: MVSData, options?: {
+                    noExtra?: boolean;
+                }): boolean;
+                validationIssues(mvsData: MVSData, options?: {
+                    noExtra?: boolean;
+                }): string[] | undefined;
+                toPrettyString(mvsData: MVSData): string;
+                createBuilder(): import("molstar/lib/extensions/mvs/tree/mvs/mvs-builder").Root;
+                createMultistate(snapshots: import("molstar/lib/extensions/mvs/mvs-data").Snapshot[], metadata?: Pick<import("molstar/lib/extensions/mvs/mvs-data").GlobalMetadata, "title" | "description" | "description_format">): import("molstar/lib/extensions/mvs/mvs-data").MVSData_States;
+                stateToStates(state: import("molstar/lib/extensions/mvs/mvs-data").MVSData_State): import("molstar/lib/extensions/mvs/mvs-data").MVSData_States;
+            };
+            loadMVS: typeof loadMVS;
+        };
         StateGallery: {
             StateGalleryManager: typeof StateGalleryManager;
             StateGalleryCustomState: (plugin: PluginContext) => Partial<import("./extensions/state-gallery/behavior").StateGalleryCustomState>;
@@ -206,4 +227,5 @@ export declare class PDBeMolstarPlugin {
         readonly DefaultLeftPanelControls: import("react").ComponentClass<{}, any>;
         readonly DefaultRightPanelControls: typeof import("molstar/lib/mol-plugin-ui/plugin").ControlsWrapper;
     };
+    static MAIN_STRUCTURE_ID: string;
 }