pdbe-molstar 3.4.0 → 3.6.0

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,11 +1,15 @@
-/// <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 { Mat3 } from 'molstar/lib/mol-math/linear-algebra';
 import { EmptyLoci } from 'molstar/lib/mol-model/loci';
 import { StructureElement } from 'molstar/lib/mol-model/structure';
 import { StructureRef } from 'molstar/lib/mol-plugin-state/manager/structure/hierarchy-state';
 import { PluginContext } from 'molstar/lib/mol-plugin/context';
 import { Color } from 'molstar/lib/mol-util/color/color';
+import * as Complexes from './extensions/complexes';
 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,14 +41,14 @@ 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).
      * `structureNumberOrId` is either index (numbered from 1!) or the ID that was provided when loading the structure.
      * If `structureNumberOrId` is undefined, remove all structures.
      * You will likely need to call `await this.visual.reset({ camera: true })` afterwards. */
-    deleteStructure(structureNumberOrId?: number): Promise<void>;
+    deleteStructure(structureNumberOrId?: number | string): Promise<void>;
     /** Apply representations to structure components based on `styles`, also removing any existing representations.
      * Components not included in `styles` will keep their representations.
      * E.g. `styles={polymer:'putty',nonStandard:'ball-and-stick'}` - apply only putty to polymer, only ball-and-stick to non-standard residues, leave other components untouched.
@@ -179,6 +183,9 @@ export declare class PDBeMolstarPlugin {
             highlightColor?: boolean;
             selectColor?: boolean;
         }) => Promise<void>;
+        setViewDirection: (view: "front" | "back" | "right" | "left" | "top" | "bottom" | Mat3, options?: {
+            durationMs: number;
+        }) => Promise<void>;
         /** Change parameters of the plugin instance.
          * Can be used to load a different structure.
          * If `fullLoad`, remove currently loaded structure before loading the new one;
@@ -188,7 +195,27 @@ export declare class PDBeMolstarPlugin {
     clear(): Promise<void>;
     /** Helper functions related to specific views or use cases */
     static extensions: {
+        Complexes: typeof Complexes;
         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 +233,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;
 }

package/lib/viewer.js

@@ -8,7 +8,10 @@ const behavior_2 = require("molstar/lib/extensions/model-archive/quality-assessm
 const mp4_export_1 = require("molstar/lib/extensions/mp4-export");
 const behavior_3 = require("molstar/lib/extensions/mvs/behavior");
 const custom_tooltips_prop_1 = require("molstar/lib/extensions/mvs/components/custom-tooltips-prop");
+const load_1 = require("molstar/lib/extensions/mvs/load");
+const mvs_data_1 = require("molstar/lib/extensions/mvs/mvs-data");
 const pdbe_1 = require("molstar/lib/extensions/pdbe");
+const linear_algebra_1 = require("molstar/lib/mol-math/linear-algebra");
 const loci_1 = require("molstar/lib/mol-model/loci");
 const structure_1 = require("molstar/lib/mol-model/structure");
 const assembly_unwind_1 = require("molstar/lib/mol-plugin-state/animation/built-in/assembly-unwind");
@@ -32,7 +35,6 @@ const structure_focus_representation_1 = require("molstar/lib/mol-plugin/behavio
 const transformers_1 = require("molstar/lib/mol-plugin/behavior/dynamic/volume-streaming/transformers");
 const commands_1 = require("molstar/lib/mol-plugin/commands");
 const config_1 = require("molstar/lib/mol-plugin/config");
-const layout_1 = require("molstar/lib/mol-plugin/layout");
 const spec_1 = require("molstar/lib/mol-plugin/spec");
 const mol_state_1 = require("molstar/lib/mol-state");
 const element_symbol_1 = require("molstar/lib/mol-theme/color/element-symbol");
@@ -41,7 +43,9 @@ const color_1 = require("molstar/lib/mol-util/color/color");
 const rx_event_helper_1 = require("molstar/lib/mol-util/rx-event-helper");
 const custom_events_1 = require("./custom-events");
 const behavior_4 = require("./domain-annotations/behavior");
+const Complexes = tslib_1.__importStar(require("./extensions/complexes"));
 const Foldseek = tslib_1.__importStar(require("./extensions/foldseek"));
+const Interactions = tslib_1.__importStar(require("./extensions/interactions"));
 const behavior_5 = require("./extensions/state-gallery/behavior");
 const manager_1 = require("./extensions/state-gallery/manager");
 const ui_1 = require("./extensions/state-gallery/ui");
@@ -177,8 +181,8 @@ class PDBeMolstarPlugin {
              * If `structureId` or `structureNumber` is provided, use the specified structure (numbered from 1!);
              * otherwise use the last added structure. */
             interactivityFocus: (params) => tslib_1.__awaiter(this, void 0, void 0, function* () {
-                var _b;
-                const structureNumberOrId = (_b = params.structureId) !== null && _b !== void 0 ? _b : params.structureNumber;
+                var _a;
+                const structureNumberOrId = (_a = params.structureId) !== null && _a !== void 0 ? _a : params.structureNumber;
                 const loci = this.getLociForParams(params.data, structureNumberOrId);
                 this.plugin.managers.structure.focus.setFromLoci(loci);
             }),
@@ -187,8 +191,8 @@ class PDBeMolstarPlugin {
              * If `focus`, also zoom on the highlighted part.
              * If `structureId` or `structureNumber` is provided, use the specified structure (numbered from 1!); otherwise use the last added structure. */
             highlight: (params) => tslib_1.__awaiter(this, void 0, void 0, function* () {
-                var _c;
-                const loci = this.getLociForParams(params.data, (_c = params.structureId) !== null && _c !== void 0 ? _c : params.structureNumber);
+                var _a;
+                const loci = this.getLociForParams(params.data, (_a = params.structureId) !== null && _a !== void 0 ? _a : params.structureNumber);
                 if (loci_1.Loci.isEmpty(loci))
                     return;
                 if (params.color) {
@@ -211,17 +215,17 @@ class PDBeMolstarPlugin {
              * If `structureNumber` is provided, apply to the specified structure (numbered from 1!); otherwise apply to all loaded structures.
              * Remove any previously added coloring and extra representations, unless `keepColors` and/or `keepRepresentations` is set. */
             select: (params) => tslib_1.__awaiter(this, void 0, void 0, function* () {
-                var _d, _e, _f, _g;
-                const structureNumberOrId = (_d = params.structureId) !== null && _d !== void 0 ? _d : params.structureNumber;
+                var _a, _b, _c, _d;
+                const structureNumberOrId = (_a = params.structureId) !== null && _a !== void 0 ? _a : params.structureNumber;
                 yield this.visual.clearSelection(structureNumberOrId, { keepColors: params.keepColors, keepRepresentations: params.keepRepresentations });
                 // Structure list to apply selection
                 const structures = this.getStructures(structureNumberOrId);
                 // Filter selection items that apply added representations
                 const addedReprParams = {};
                 for (const param of params.data) {
-                    const repr = (_e = param.representation) !== null && _e !== void 0 ? _e : (param.sideChain ? 'ball-and-stick' : undefined);
+                    const repr = (_b = param.representation) !== null && _b !== void 0 ? _b : (param.sideChain ? 'ball-and-stick' : undefined);
                     if (repr) {
-                        ((_f = addedReprParams[repr]) !== null && _f !== void 0 ? _f : (addedReprParams[repr] = [])).push(param);
+                        ((_c = addedReprParams[repr]) !== null && _c !== void 0 ? _c : (addedReprParams[repr] = [])).push(param);
                     }
                 }
                 const DefaultSelectColor = color_1.Color.fromRgb(255, 112, 3);
@@ -265,7 +269,7 @@ class PDBeMolstarPlugin {
                         yield this.plugin.build()
                             .to(struct.structureRef.cell)
                             .apply(model_1.StructureComponent, { type: { name: 'bundle', params: bundle }, label: repr }, { tags: helpers_1.Tags.AddedComponent })
-                            .apply(representation_1.StructureRepresentation3D, (0, structure_representation_params_1.createStructureRepresentationParams)(this.plugin, (_g = struct.structureRef.cell.obj) === null || _g === void 0 ? void 0 : _g.data, { type: repr }))
+                            .apply(representation_1.StructureRepresentation3D, (0, structure_representation_params_1.createStructureRepresentationParams)(this.plugin, (_d = struct.structureRef.cell.obj) === null || _d === void 0 ? void 0 : _d.data, { type: repr }))
                             .apply(transforms_1.StateTransforms.Representation.OverpaintStructureRepresentation3DFromBundle, { layers: overpaintLayers }, { tags: helpers_1.Tags.Overpaint })
                             .commit();
                         // Track that reprs have been added (for later clearSelection)
@@ -309,9 +313,9 @@ class PDBeMolstarPlugin {
              * `structureNumber` counts from 1; if not provided, tooltips will be applied to all loaded structures.
              * Example: `await this.visual.tooltips({ data: [{ struct_asym_id: 'A', tooltip: 'Chain A' }, { struct_asym_id: 'B', tooltip: 'Chain B' }] });`. */
             tooltips: (params) => tslib_1.__awaiter(this, void 0, void 0, function* () {
-                var _h;
+                var _a;
                 // Structure list to apply tooltips
-                const structures = this.getStructures((_h = params.structureId) !== null && _h !== void 0 ? _h : params.structureNumber);
+                const structures = this.getStructures((_a = params.structureId) !== null && _a !== void 0 ? _a : params.structureNumber);
                 for (const struct of structures) {
                     const selections = this.getSelections(params.data, struct.number);
                     const customTooltipProps = {
@@ -389,6 +393,22 @@ class PDBeMolstarPlugin {
                     yield commands_1.PluginCommands.Canvas3D.SetSettings(this.plugin, { settings: { renderer, marking } });
                 }
             }),
+            setViewDirection: (view, options) => tslib_1.__awaiter(this, void 0, void 0, function* () {
+                var _a;
+                const visibleSphere = (_a = this.plugin.canvas3d) === null || _a === void 0 ? void 0 : _a.boundingSphereVisible;
+                if (!visibleSphere)
+                    return;
+                const rot = (0, helpers_1.getRotationMat4)(view);
+                const snapshot = this.plugin.canvas3d.camera.getFocus(visibleSphere.center, visibleSphere.radius);
+                // Need to force direction and up after getFocus (getFocus sometimes flips direction/up)
+                const newDir = linear_algebra_1.Vec3.create(0, 0, -1);
+                linear_algebra_1.Vec3.transformMat4(newDir, newDir, rot);
+                linear_algebra_1.Vec3.scale(newDir, newDir, linear_algebra_1.Vec3.distance(snapshot.position, snapshot.target));
+                snapshot.position = linear_algebra_1.Vec3.sub(newDir, snapshot.target, newDir);
+                const newUp = linear_algebra_1.Vec3.create(0, 1, 0);
+                snapshot.up = linear_algebra_1.Vec3.transformMat4(newUp, newUp, rot);
+                yield commands_1.PluginCommands.Camera.SetSnapshot(this.plugin, { snapshot, durationMs: options === null || options === void 0 ? void 0 : options.durationMs });
+            }),
             /** Change parameters of the plugin instance.
              * Can be used to load a different structure.
              * If `fullLoad`, remove currently loaded structure before loading the new one;
@@ -411,7 +431,10 @@ class PDBeMolstarPlugin {
                 if (this.initParams.customData && this.initParams.customData.url && !this.initParams.customData.format)
                     return false;
                 (0, plugin_custom_state_1.PluginCustomState)(this.plugin).initParams = this.initParams;
+                // Update layout
+                commands_1.PluginCommands.Layout.Update(this.plugin, { state: (0, helpers_1.pluginLayoutStateFromInitParams)(this.initParams) });
                 // Show/hide buttons in the viewport control panel
+                this.plugin.config.set(config_1.PluginConfig.Viewport.ShowScreenshotControls, !this.initParams.hideCanvasControls.includes('screenshot'));
                 this.plugin.config.set(config_1.PluginConfig.Viewport.ShowExpand, !this.initParams.hideCanvasControls.includes('expand'));
                 this.plugin.config.set(config_1.PluginConfig.Viewport.ShowControls, !this.initParams.hideCanvasControls.includes('controlToggle'));
                 this.plugin.config.set(config_1.PluginConfig.Viewport.ShowSettings, !this.initParams.hideCanvasControls.includes('controlInfo'));
@@ -436,8 +459,8 @@ class PDBeMolstarPlugin {
         return (0, spec_from_html_1.initParamsFromHtmlAttributes)(element);
     }
     render(target, options) {
-        var _a, _b;
         return tslib_1.__awaiter(this, void 0, void 0, function* () {
+            var _a, _b;
             console.debug('Rendering PDBeMolstarPlugin instance with options:', options);
             // Validate options
             if (!options) {
@@ -468,17 +491,7 @@ class PDBeMolstarPlugin {
                 pdbePluginSpec.behaviors.push(spec_1.PluginSpec.Behavior(superposition_focus_representation_1.SuperpositionFocusRepresentation), spec_1.PluginSpec.Behavior(behavior_2.MAQualityAssessment, { autoAttach: true, showTooltip: true }));
             }
             pdbePluginSpec.layout = {
-                initial: {
-                    isExpanded: this.initParams.expanded,
-                    showControls: !this.initParams.hideControls,
-                    regionState: {
-                        left: this.initParams.leftPanel ? 'full' : 'hidden',
-                        right: this.initParams.rightPanel ? 'full' : 'hidden',
-                        top: this.initParams.sequencePanel ? 'full' : 'hidden',
-                        bottom: this.initParams.logPanel ? 'full' : 'hidden',
-                    },
-                    controlsDisplay: this.initParams.reactive ? 'reactive' : this.initParams.landscape ? 'landscape' : layout_1.PluginLayoutStateParams.controlsDisplay.defaultValue,
-                },
+                initial: (0, helpers_1.pluginLayoutStateFromInitParams)(this.initParams),
             };
             pdbePluginSpec.components = {
                 controls: {
@@ -486,7 +499,7 @@ class PDBeMolstarPlugin {
                 },
                 viewport: {
                     controls: pdbe_viewport_controls_1.PDBeViewportControls,
-                    view: pdbe_viewport_1.PDBeViewport,
+                    view: pdbe_viewport_1.PDBeViewport_NoFullscreen,
                 },
                 remoteState: 'none',
                 structureTools: this.initParams.superposition ? pdbe_structure_controls_1.PDBeSuperpositionStructureTools
@@ -514,6 +527,8 @@ class PDBeMolstarPlugin {
                 pdbePluginSpec.behaviors.push(spec_1.PluginSpec.Behavior(mp4_export_1.Mp4Export));
                 pdbePluginSpec.behaviors.push(spec_1.PluginSpec.Behavior(geo_export_1.GeometryExport));
             }
+            if (this.initParams.hideCanvasControls.includes('screenshot'))
+                pdbePluginSpec.config.push([config_1.PluginConfig.Viewport.ShowScreenshotControls, false]);
             if (this.initParams.hideCanvasControls.includes('expand'))
                 pdbePluginSpec.config.push([config_1.PluginConfig.Viewport.ShowExpand, false]);
             if (this.initParams.hideCanvasControls.includes('controlToggle'))
@@ -604,7 +619,7 @@ class PDBeMolstarPlugin {
                         assemblyId: this.initParams.assemblyId,
                         isBinary: dataSource.isBinary,
                         progressMessage: `Loading ${(_b = this.initParams.moleculeId) !== null && _b !== void 0 ? _b : ''} ...`,
-                        id: 'main',
+                        id: PDBeMolstarPlugin.MAIN_STRUCTURE_ID,
                     });
                 }
                 // Subscribe to events from other PDB Component
@@ -658,22 +673,17 @@ class PDBeMolstarPlugin {
         return this.plugin.state.data;
     }
     createLigandStructure(isBranched) {
-        var _a, e_1, _b, _c;
-        var _d, _e;
         return tslib_1.__awaiter(this, void 0, void 0, function* () {
+            var _a, e_1, _b, _c;
+            var _d, _e;
             if (this.assemblyRef === '')
                 return;
             try {
-                for (var _f = true, _g = tslib_1.__asyncValues(this.plugin.managers.structure.hierarchy.currentComponentGroups), _h; _h = yield _g.next(), _a = _h.done, !_a;) {
+                for (var _f = true, _g = tslib_1.__asyncValues(this.plugin.managers.structure.hierarchy.currentComponentGroups), _h; _h = yield _g.next(), _a = _h.done, !_a; _f = true) {
                     _c = _h.value;
                     _f = false;
-                    try {
-                        const comp = _c;
-                        yield commands_1.PluginCommands.State.RemoveObject(this.plugin, { state: comp[0].cell.parent, ref: comp[0].cell.transform.ref, removeParentGhosts: true });
-                    }
-                    finally {
-                        _f = true;
-                    }
+                    const comp = _c;
+                    yield commands_1.PluginCommands.State.RemoveObject(this.plugin, { state: comp[0].cell.parent, ref: comp[0].cell.transform.ref, removeParentGhosts: true });
                 }
             }
             catch (e_1_1) { e_1 = { error: e_1_1 }; }
@@ -713,8 +723,8 @@ class PDBeMolstarPlugin {
             }
         });
     }
-    load({ url, format = 'mmcif', isBinary = false, assemblyId = '', progressMessage, id }, fullLoad = true) {
-        return tslib_1.__awaiter(this, void 0, void 0, function* () {
+    load(_a) {
+        return tslib_1.__awaiter(this, arguments, void 0, function* ({ url, format = 'mmcif', isBinary = false, assemblyId = '', progressMessage, id }, fullLoad = true) {
             yield (0, helpers_1.runWithProgressMessage)(this.plugin, progressMessage, () => tslib_1.__awaiter(this, void 0, void 0, function* () {
                 var _a, _b;
                 let success = false;
@@ -810,8 +820,8 @@ class PDBeMolstarPlugin {
      * E.g. `styles={polymer:'putty',nonStandard:'ball-and-stick'}` - apply only putty to polymer, only ball-and-stick to non-standard residues, leave other components untouched.
      * E.g. `styles='ball-and-stick'` - apply only ball-and-stick to all components. */
     applyVisualStyles(structureRef, styles) {
-        var _a, _b;
         return tslib_1.__awaiter(this, void 0, void 0, function* () {
+            var _a, _b;
             if (styles === undefined)
                 return;
             const components = this.plugin.state.data.selectQ(q => q.byRef(structureRef).subtree().withTransformer(model_1.StructureComponent));
@@ -850,8 +860,8 @@ class PDBeMolstarPlugin {
     }
     /** Remove all structure components of the given structure which correspond to any component type listed in `deleteComponents`. */
     deleteStructureComponents(structureRef, deleteComponents) {
-        var _a, _b;
         return tslib_1.__awaiter(this, void 0, void 0, function* () {
+            var _a, _b;
             if (deleteComponents.length === 0)
                 return;
             const comps = this.plugin.state.data.selectQ(q => q.byRef(structureRef).subtree().withTransformer(model_1.StructureComponent));
@@ -962,8 +972,12 @@ class PDBeMolstarPlugin {
 exports.PDBeMolstarPlugin = PDBeMolstarPlugin;
 /** Helper functions related to specific views or use cases */
 PDBeMolstarPlugin.extensions = {
+    Complexes: Complexes,
     Foldseek: Foldseek,
+    Interactions: Interactions,
+    MVS: { MVSData: mvs_data_1.MVSData, loadMVS: load_1.loadMVS },
     StateGallery: behavior_5.StateGalleryExtensionFunctions,
 };
 /** Components for building custom UI layouts */
 PDBeMolstarPlugin.UIComponents = components_1.UIComponents;
+PDBeMolstarPlugin.MAIN_STRUCTURE_ID = 'main';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pdbe-molstar",
-  "version": "3.4.0",
+  "version": "3.6.0",
   "description": "Molstar implementation for PDBe",
   "main": "index.js",
   "scripts": {
@@ -16,7 +16,7 @@
     "watch-tsc": "tsc --watch --incremental",
     "watch-extra": "cpx 'src/app/**/*.{scss,html,ico}' lib/ --watch",
     "watch-webpack": "webpack -w --mode development --stats minimal --config ./webpack.config.development.js",
-    "serve": "http-server -p 1338 -g -c-1",
+    "serve": "http-server -p 1339 -g -c-1",
     "bundle-webcomponent": "node scripts.js bundle-webcomponent"
   },
   "files": [
@@ -65,7 +65,7 @@
     "sass": "^1.80.4",
     "sass-loader": "^16.0.2",
     "style-loader": "^4.0.0",
-    "typescript": "^4.6.4",
+    "typescript": "^5.7.3",
     "typescript-eslint": "^8.2.0",
     "webpack": "^5.95.0",
     "webpack-cli": "^5.1.4"
@@ -78,7 +78,7 @@
     "d3-scale": "^4.0.2",
     "d3-selection": "^3.0.0",
     "lit": "^3.1.1",
-    "molstar": "4.8.0",
+    "molstar": "4.18.0",
     "path-browserify": "^1.0.1",
     "stream-browserify": "^3.0.0",
     "vm-browserify": "^1.1.2"