pdbe-molstar 3.5.0 → 3.7.0

package/lib/superposition.js

@@ -10,6 +10,7 @@ exports.transform = transform;
 const tslib_1 = require("tslib");
 const linear_algebra_1 = require("molstar/lib/mol-math/linear-algebra");
 const structure_1 = require("molstar/lib/mol-model/structure");
+const superposition_sifts_mapping_1 = require("molstar/lib/mol-model/structure/structure/util/superposition-sifts-mapping");
 const transforms_1 = require("molstar/lib/mol-plugin-state/transforms");
 const builder_1 = require("molstar/lib/mol-script/language/builder");
 const script_1 = require("molstar/lib/mol-script/script");
@@ -20,7 +21,6 @@ const lists_1 = require("molstar/lib/mol-util/color/lists");
 const alphafold_transparency_1 = require("./alphafold-transparency");
 const helpers_1 = require("./helpers");
 const plugin_custom_state_1 = require("./plugin-custom-state");
-const superposition_sifts_mapping_1 = require("./superposition-sifts-mapping");
 function combinedColorPalette(palettes) {
     return palettes.flatMap(paletteName => lists_1.ColorLists[paletteName].list);
 }
@@ -67,7 +67,6 @@ function initSuperposition(plugin, completeSubject) {
                     visibility: [],
                     transforms: [],
                     rmsds: [],
-                    coordinateSystems: [],
                 },
             };
             // Get segment and cluster information for the given uniprot accession
@@ -158,7 +157,7 @@ function loadAfStructure(plugin) {
         const { structure } = yield loadStructure(plugin, url, 'mmcif', isBinary);
         const strInstance = structure;
         if (!strInstance)
-            return false;
+            return undefined;
         // Store Refs in state
         const spState = customState.superpositionState;
         spState.alphafold.ref = strInstance === null || strInstance === void 0 ? void 0 : strInstance.ref;
@@ -170,79 +169,65 @@ function loadAfStructure(plugin) {
             yield plugin.builders.structure.representation.addRepresentation(chainSel, { type: 'putty', color: 'plddt-confidence', size: 'uniform', sizeParams: { value: 1.5 } }, { tag: `af-superposition-visual` });
             return strInstance === null || strInstance === void 0 ? void 0 : strInstance.ref;
         }
-        return false;
+        return undefined;
     });
 }
-function superposeAf(plugin, traceOnly, segmentIndex) {
+function superposeAf(plugin, traceOnly) {
     return tslib_1.__awaiter(this, void 0, void 0, function* () {
         const customState = (0, plugin_custom_state_1.PluginCustomState)(plugin);
         const spState = customState.superpositionState;
         if (!(spState === null || spState === void 0 ? void 0 : spState.segmentData))
-            return;
+            return false;
         // Load AF structure
-        const afStrRef = spState.alphafold.ref || (yield loadAfStructure(plugin));
-        if (!afStrRef)
-            return;
-        const afStr = plugin.managers.structure.hierarchy.current.refs.get(afStrRef);
-        const segmentNum = segmentIndex ? segmentIndex : spState.activeSegment - 1;
+        const afStructRefString = spState.alphafold.ref || (yield loadAfStructure(plugin));
+        if (!afStructRefString)
+            return false;
+        const afStructRef = plugin.managers.structure.hierarchy.current.refs.get(afStructRefString);
+        if ((afStructRef === null || afStructRef === void 0 ? void 0 : afStructRef.kind) !== 'structure')
+            return false;
+        const segmentNum = spState.activeSegment - 1;
         if (!spState.alphafold.transforms[segmentNum]) {
             // Create representative list
             const mappingResult = [];
-            const coordinateSystems = [];
-            const failedPairsResult = [];
-            const zeroOverlapPairsResult = [];
-            let minRmsd = 0;
+            let minRmsd = Infinity;
             let minIndex = 0;
             const rmsdList = [];
             const segmentClusters = spState.segmentData[segmentNum].clusters;
-            segmentClusters.forEach((cluster) => {
-                var _a, _b, _c;
-                const modelRef = spState.models[`${cluster[0].pdb_id}_${cluster[0].struct_asym_id}`];
-                if (modelRef) {
-                    const structHierarchy = plugin.managers.structure.hierarchy.current.refs.get(modelRef);
-                    if (structHierarchy) {
-                        const input = [structHierarchy.components[0], afStr];
-                        const structures = input.map(s => { var _a; return (_a = s.cell.obj) === null || _a === void 0 ? void 0 : _a.data; });
-                        let { entries, failedPairs, zeroOverlapPairs } = (0, superposition_sifts_mapping_1.alignAndSuperposeWithSIFTSMapping)(structures, {
-                            traceOnly,
-                            includeResidueTest: loc => structure_1.StructureProperties.atom.B_iso_or_equiv(loc) > 70,
-                            applyTestIndex: [1],
-                        });
-                        if (entries.length === 0 || (entries && entries[0] && entries[0].transform.rmsd.toFixed(1) === '0.0')) {
-                            const alignWithoutPlddt = (0, superposition_sifts_mapping_1.alignAndSuperposeWithSIFTSMapping)(structures, { traceOnly });
-                            entries = alignWithoutPlddt.entries;
-                        }
-                        if (entries && entries[0]) {
-                            mappingResult.push(entries[0]);
-                            coordinateSystems.push((_c = (_b = (_a = input[0]) === null || _a === void 0 ? void 0 : _a.transform) === null || _b === void 0 ? void 0 : _b.cell.obj) === null || _c === void 0 ? void 0 : _c.data.coordinateSystem);
-                            const totalMappings = mappingResult.length;
-                            if (totalMappings === 1 || entries[0].transform.rmsd < minRmsd) {
-                                minRmsd = entries[0].transform.rmsd;
-                                minIndex = totalMappings === 1 ? 0 : mappingResult.length - 1;
-                            }
-                            rmsdList.push(`${cluster[0].pdb_id} chain ${cluster[0].struct_asym_id}:${entries[0].transform.rmsd.toFixed(2)}`);
-                        }
-                        else {
-                            if (failedPairs.length > 0)
-                                failedPairsResult.push(failedPairs);
-                            if (zeroOverlapPairs.length > 0)
-                                zeroOverlapPairsResult.push(zeroOverlapPairs);
-                            // rmsdList.push(`${cluster[0].pdb_id} ${cluster[0].struct_asym_id}:-`)
-                        }
+            for (const cluster of segmentClusters) {
+                const representative = cluster[0];
+                const structRefString = spState.models[`${representative.pdb_id}_${representative.struct_asym_id}`];
+                if (!structRefString)
+                    continue;
+                const structRef = plugin.managers.structure.hierarchy.current.refs.get(structRefString);
+                if ((structRef === null || structRef === void 0 ? void 0 : structRef.kind) !== 'structure')
+                    continue;
+                const structComponentRef = structRef.components[0];
+                const structures = [structComponentRef.cell.obj.data, afStructRef.cell.obj.data];
+                let { entries } = (0, superposition_sifts_mapping_1.alignAndSuperposeWithSIFTSMapping)(structures, {
+                    traceOnly,
+                    includeResidueTest: loc => !(loc.structure === structures[1] && structure_1.StructureProperties.atom.B_iso_or_equiv(loc) <= 70), // exclude AlphaFold residues with pLDDT <= 70
+                });
+                if (entries.length === 0 || (entries[0] && entries[0].transform.rmsd.toFixed(1) === '0.0')) {
+                    const alignWithoutPlddt = (0, superposition_sifts_mapping_1.alignAndSuperposeWithSIFTSMapping)(structures, { traceOnly });
+                    entries = alignWithoutPlddt.entries;
+                }
+                if (entries[0]) {
+                    mappingResult.push(entries[0]);
+                    if (entries[0].transform.rmsd < minRmsd) {
+                        minRmsd = entries[0].transform.rmsd;
+                        minIndex = mappingResult.length - 1;
                     }
+                    rmsdList.push(`${representative.pdb_id} chain ${representative.struct_asym_id}:${entries[0].transform.rmsd.toFixed(2)}`);
                 }
-            });
-            // console.log(failedPairsResult);
-            // console.log(zeroOverlapPairsResult);
+            }
             if (mappingResult.length > 0) {
                 spState.alphafold.visibility[segmentNum] = true;
                 spState.alphafold.transforms[segmentNum] = mappingResult[minIndex].transform.bTransform;
-                spState.alphafold.coordinateSystems[segmentNum] = coordinateSystems[minIndex];
                 spState.alphafold.rmsds[segmentNum] = rmsdList.sort((a, b) => parseFloat(a.split(':')[1]) - parseFloat(b.split(':')[1]));
             }
         }
-        yield afTransform(plugin, afStr.cell, spState.alphafold.transforms[segmentNum], spState.alphafold.coordinateSystems[segmentNum]);
-        (0, alphafold_transparency_1.applyAFTransparency)(plugin, afStr, 0.8, 70);
+        yield afTransform(plugin, afStructRef.cell, spState.alphafold.transforms[segmentNum]);
+        yield (0, alphafold_transparency_1.applyAFTransparency)(plugin, afStructRef, 0.8, 70);
         return true;
     });
 }
@@ -325,10 +310,6 @@ function renderSuperposition(plugin, segmentIndex, entryList) {
                         yield plugin.builders.structure.representation.addRepresentation(chainSel, { type: 'putty', color: 'uniform', colorParams: { value: uniformColor2 }, size: 'uniform' }, { tag: `superposition-visual` });
                         spState.refMaps[chainSel.ref] = `${s.pdb_id}_${s.struct_asym_id}`;
                     }
-                    // // const addTooltipUpdate = plugin.state.behaviors.build().to(BestDatabaseSequenceMapping.id).update(BestDatabaseSequenceMapping, (old: any) => { old.showTooltip = true; });
-                    // // await plugin.runTask(plugin.state.behaviors.updateTree(addTooltipUpdate));
-                    // BestDatabaseSequenceMapping
-                    // console.log(plugin.state.data.select(modelRef)[0])
                 }
                 let invalidStruct = chainSel ? false : true;
                 if (superpositionParams && superpositionParams.ligandView) {
@@ -391,7 +372,7 @@ function renderSuperposition(plugin, segmentIndex, entryList) {
                                 0: polymerChainWithSurroundings,
                                 by: carbEntityChain,
                             });
-                            const data = (plugin.state.data.select(strInstance.ref)[0].obj).data;
+                            const data = plugin.state.data.select(strInstance.ref)[0].obj.data;
                             const carbChainSel = script_1.Script.getStructureSelection(carbEntityChainInVicinity, data);
                             if (carbChainSel && carbChainSel.kind === 'sequence') {
                                 // console.log(carbEntityChainId + ' chain present in 5 A radius');

package/lib/ui/alphafold-superposition.js

@@ -148,10 +148,10 @@ class AfSuperpositionControls extends base_1.PurePluginUIComponent {
         return (0, plugin_custom_state_1.PluginCustomState)(this.plugin);
     }
     superposeByDbMapping() {
-        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(common_1.Button, { icon: icons_1.SuperposeChainsSvg, title: 'Superpose AlphaFold structure using intersection of residues from SIFTS UNIPROT mapping.', className: 'msp-btn msp-btn-block', onClick: this.superposeDb, style: { marginTop: '1px', textAlign: 'left' }, disabled: this.state.isBusy, children: "Load AlphaFold structure" }) });
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(common_1.Button, { icon: icons_1.AddSvg, title: 'Superpose AlphaFold structure using intersection of residues from SIFTS UNIPROT mapping.', className: 'msp-btn msp-btn-block', onClick: this.superposeDb, style: { marginTop: '1px', textAlign: 'left' }, disabled: this.state.isBusy, children: "Load AlphaFold structure" }) });
     }
     render() {
-        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: { backgroundColor: '#dce54e', fontWeight: 500, padding: '5px 12px' }, children: "New Feature!" }), (0, jsx_runtime_1.jsx)("div", { className: 'msp-help-text', style: { margin: '2px 0' }, children: (0, jsx_runtime_1.jsxs)("div", { className: 'msp-help-description', children: [(0, jsx_runtime_1.jsx)(icons_1.Icon, { svg: icons_2.InfoIconSvg, inline: true }), "Load and superpose AlphaFold structure against representative chains."] }) }), (0, jsx_runtime_1.jsxs)("div", { className: 'msp-flex-row', children: [this.state.canUseDb && this.superposeByDbMapping(), (0, jsx_runtime_1.jsx)(common_1.ToggleButton, { icon: icons_1.TuneSvg, label: '', title: 'Options', toggle: this.toggleOptions, isSelected: this.state.action === 'options', disabled: this.state.isBusy, style: { flex: '0 0 40px', padding: 0 } })] }), this.state.action === 'options' && (0, jsx_runtime_1.jsx)("div", { className: 'msp-control-offset', children: (0, jsx_runtime_1.jsx)(parameters_1.ParameterControls, { params: exports.AlphafoldSuperpositionParams, values: this.state.options, onChangeValues: this.setOptions, isDisabled: this.state.isBusy }) })] });
+        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: 'msp-help-text', style: { margin: '2px 0' }, children: (0, jsx_runtime_1.jsxs)("div", { className: 'msp-help-description', children: [(0, jsx_runtime_1.jsx)(icons_1.Icon, { svg: icons_2.InfoIconSvg, inline: true }), "Load and superpose AlphaFold structure against representative chains."] }) }), (0, jsx_runtime_1.jsxs)("div", { className: 'msp-flex-row', children: [this.state.canUseDb && this.superposeByDbMapping(), (0, jsx_runtime_1.jsx)(common_1.ToggleButton, { icon: icons_1.TuneSvg, label: '', title: 'Options', toggle: this.toggleOptions, isSelected: this.state.action === 'options', disabled: this.state.isBusy, style: { flex: '0 0 40px', padding: 0 } })] }), this.state.action === 'options' && (0, jsx_runtime_1.jsx)("div", { className: 'msp-control-offset', children: (0, jsx_runtime_1.jsx)(parameters_1.ParameterControls, { params: exports.AlphafoldSuperpositionParams, values: this.state.options, onChangeValues: this.setOptions, isDisabled: this.state.isBusy }) })] });
     }
 }
 exports.AfSuperpositionControls = AfSuperpositionControls;

package/lib/ui/pdbe-viewport-controls.js

@@ -17,9 +17,8 @@ class PDBeViewportControls extends viewport_1.ViewportControls {
         const showPDBeLink = (initParams === null || initParams === void 0 ? void 0 : initParams.moleculeId) && (initParams === null || initParams === void 0 ? void 0 : initParams.pdbeLink) && !(initParams === null || initParams === void 0 ? void 0 : initParams.superposition);
         const pdbeLinkColor = this.isBlack() ? '#fff' : '#555';
         const pdbeLink = {
-            parentStyle: { width: 'auto' },
-            bgStyle: { position: 'absolute', height: '27px', width: '54px', marginLeft: '-33px' },
-            containerStyle: { position: 'absolute', right: '10px', top: '10px', padding: '3px 3px 3px 18px' },
+            containerStyle: { position: 'absolute', right: '10px', top: '10px', padding: '6px', paddingRight: '3px', paddingLeft: '18px' },
+            bgStyle: { position: 'absolute', height: '32px', width: '54px', marginLeft: '-33px' },
             style: { display: 'inline-block', fontSize: '14px', color: pdbeLinkColor, borderBottom: 'none', cursor: 'pointer', textDecoration: 'none', position: 'absolute', right: '5px' },
             pdbeImg: {
                 src: 'https://www.ebi.ac.uk/pdbe/entry/static/images/logos/PDBe/logo_T_64.png',
@@ -27,7 +26,7 @@ class PDBeViewportControls extends viewport_1.ViewportControls {
                 style: { height: '12px', width: '12px', border: 0, position: 'absolute', margin: '4px 0 0 -13px' },
             },
         };
-        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [showPDBeLink && (0, jsx_runtime_1.jsxs)("div", { className: 'msp-viewport-controls-buttons', style: pdbeLink.containerStyle, children: [(0, jsx_runtime_1.jsx)("div", { className: 'msp-semi-transparent-background', style: pdbeLink.bgStyle }), (0, jsx_runtime_1.jsxs)("a", { className: 'msp-pdbe-link', style: pdbeLink.style, target: "_blank", href: `https://pdbe.org/${initParams.moleculeId}`, children: [(0, jsx_runtime_1.jsx)("img", { src: pdbeLink.pdbeImg.src, alt: pdbeLink.pdbeImg.alt, style: pdbeLink.pdbeImg.style }), initParams.moleculeId] })] }), (0, jsx_runtime_1.jsx)("div", { style: { position: 'absolute', top: showPDBeLink ? (27 + 4) : 0, right: 0 }, children: super.render() })] });
+        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [showPDBeLink && (0, jsx_runtime_1.jsxs)("div", { className: 'msp-viewport-controls-buttons', style: pdbeLink.containerStyle, children: [(0, jsx_runtime_1.jsx)("div", { className: 'msp-semi-transparent-background', style: pdbeLink.bgStyle }), (0, jsx_runtime_1.jsxs)("a", { className: 'msp-pdbe-link', style: pdbeLink.style, target: "_blank", href: `https://pdbe.org/${initParams.moleculeId}`, children: [(0, jsx_runtime_1.jsx)("img", { src: pdbeLink.pdbeImg.src, alt: pdbeLink.pdbeImg.alt, style: pdbeLink.pdbeImg.style }), initParams.moleculeId] })] }), (0, jsx_runtime_1.jsx)("div", { style: { position: 'absolute', top: showPDBeLink ? (32 + 4) : 0, right: 0 }, children: super.render() })] });
     }
 }
 exports.PDBeViewportControls = PDBeViewportControls;

package/lib/ui/pdbe-viewport.d.ts

@@ -1,6 +1,10 @@
 import { DefaultViewport } from 'molstar/lib/mol-plugin-ui/plugin';
+import { ComponentClass } from 'react';
 /** A modified copy of DefaultViewport */
 export declare class CustomizableDefaultViewport extends DefaultViewport {
     render(): import("react/jsx-runtime").JSX.Element;
 }
-export declare const PDBeViewport: import("react").ComponentClass<{}, any>;
+/** Version of `PDBeViewport` to use as part of other components. Does not expand to fullscreen individually. */
+export declare const PDBeViewport_NoFullscreen: ComponentClass<{}, any>;
+/** Component containing 3D canvas, button in top left and top right corners, and tooltip box (center panel in default layout). Changes to fullscreen view by "Toggle Expanded Viewport" button, or "expanded" option. */
+export declare const PDBeViewport: ComponentClass<{}, any>;

package/lib/ui/pdbe-viewport.js

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PDBeViewport = exports.CustomizableDefaultViewport = void 0;
+exports.PDBeViewport = exports.PDBeViewport_NoFullscreen = exports.CustomizableDefaultViewport = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const base_1 = require("molstar/lib/mol-plugin-ui/base");
 const controls_1 = require("molstar/lib/mol-plugin-ui/controls");
 const plugin_1 = require("molstar/lib/mol-plugin-ui/plugin");
 const task_1 = require("molstar/lib/mol-plugin-ui/task");
@@ -19,4 +20,24 @@ class CustomizableDefaultViewport extends plugin_1.DefaultViewport {
     }
 }
 exports.CustomizableDefaultViewport = CustomizableDefaultViewport;
-exports.PDBeViewport = (0, overlay_1.WithLoadingOverlay)(CustomizableDefaultViewport);
+/** Return a React component with MainContent, expanded to whole browser window whenever `this.plugin.layout.state.isExpanded === true`. */
+function Fullscreenable(MainContent) {
+    return class _Fullscreenable extends base_1.PurePluginUIComponent {
+        constructor() {
+            super(...arguments);
+            this.state = { fullscreen: this.plugin.layout.state.isExpanded };
+        }
+        componentDidMount() {
+            this.subscribe(this.plugin.layout.events.updated, () => {
+                this.setState({ fullscreen: this.plugin.layout.state.isExpanded });
+            });
+        }
+        render() {
+            return (0, jsx_runtime_1.jsxs)("div", { className: this.state.fullscreen ? 'msp-layout-expanded msp-viewport-expanded' : undefined, children: [(0, jsx_runtime_1.jsx)(MainContent, {}), ";"] });
+        }
+    };
+}
+/** Version of `PDBeViewport` to use as part of other components. Does not expand to fullscreen individually. */
+exports.PDBeViewport_NoFullscreen = (0, overlay_1.WithLoadingOverlay)(CustomizableDefaultViewport);
+/** Component containing 3D canvas, button in top left and top right corners, and tooltip box (center panel in default layout). Changes to fullscreen view by "Toggle Expanded Viewport" button, or "expanded" option. */
+exports.PDBeViewport = Fullscreenable(exports.PDBeViewport_NoFullscreen);

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

@@ -1,7 +1,7 @@
 import { ControlsWrapper, Log } from 'molstar/lib/mol-plugin-ui/plugin';
 import { SequenceView } from 'molstar/lib/mol-plugin-ui/sequence';
 export declare const UIComponents: {
-    /** Component containing 3D canvas, button in top left and top right corners, and tooltip box (center panel in default layout) */
+    /** Component containing 3D canvas, button in top left and top right corners, and tooltip box (center panel in default layout). Changes to fullscreen view by "Toggle Expanded Viewport" button, or "expanded" option. */
     readonly PDBeViewport: import("react").ComponentClass<{}, any>;
     /** Component containing 1D view of the sequences (top panel in default layout) */
     readonly SequenceView: typeof SequenceView;

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

@@ -3,10 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.UIComponents = void 0;
 const plugin_1 = require("molstar/lib/mol-plugin-ui/plugin");
 const sequence_1 = require("molstar/lib/mol-plugin-ui/sequence");
-const pdbe_viewport_1 = require("../pdbe-viewport");
 const pdbe_left_panel_1 = require("../left-panel/pdbe-left-panel");
+const pdbe_viewport_1 = require("../pdbe-viewport");
 exports.UIComponents = {
-    /** Component containing 3D canvas, button in top left and top right corners, and tooltip box (center panel in default layout) */
+    /** Component containing 3D canvas, button in top left and top right corners, and tooltip box (center panel in default layout). Changes to fullscreen view by "Toggle Expanded Viewport" button, or "expanded" option. */
     PDBeViewport: pdbe_viewport_1.PDBeViewport,
     /** Component containing 1D view of the sequences (top panel in default layout) */
     SequenceView: sequence_1.SequenceView,

package/lib/viewer.d.ts

@@ -1,11 +1,13 @@
 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';
@@ -46,7 +48,7 @@ export declare class PDBeMolstarPlugin {
      * `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.
@@ -181,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;
@@ -190,6 +195,7 @@ 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: {

package/lib/viewer.js

@@ -11,6 +11,7 @@ const custom_tooltips_prop_1 = require("molstar/lib/extensions/mvs/components/cu
 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");
@@ -34,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");
@@ -43,6 +43,7 @@ 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");
@@ -392,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;
@@ -414,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'));
@@ -471,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: {
@@ -489,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
@@ -517,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'))
@@ -764,7 +776,7 @@ class PDBeMolstarPlugin {
                             return;
                         const asm = this.state.select(this.assemblyRef)[0].obj;
                         const defaultMapParams = transformers_1.InitVolumeStreaming.createDefaultParams(asm, this.plugin);
-                        const pdbeMapParams = helpers_1.PDBeVolumes.mapParams(defaultMapParams, this.initParams.mapSettings, '');
+                        const pdbeMapParams = helpers_1.PDBeVolumes.mapParams(defaultMapParams, this.initParams.mapSettings);
                         if (pdbeMapParams) {
                             yield this.plugin.runTask(this.state.applyAction(transformers_1.InitVolumeStreaming, pdbeMapParams, this.assemblyRef));
                             if (pdbeMapParams.method !== 'em' && !this.initParams.ligandView)
@@ -960,6 +972,7 @@ 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 },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pdbe-molstar",
-  "version": "3.5.0",
+  "version": "3.7.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": [
@@ -78,7 +78,7 @@
     "d3-scale": "^4.0.2",
     "d3-selection": "^3.0.0",
     "lit": "^3.1.1",
-    "molstar": "4.17.0",
+    "molstar": "4.18.0",
     "path-browserify": "^1.0.1",
     "stream-browserify": "^3.0.0",
     "vm-browserify": "^1.1.2"

package/lib/superposition-sifts-mapping.d.ts

@@ -1,22 +0,0 @@
-import { MinimizeRmsd } from 'molstar/lib/mol-math/linear-algebra/3d/minimize-rmsd';
-import { Structure } from 'molstar/lib/mol-model/structure';
-import { ElementIndex, ResidueIndex } from 'molstar/lib/mol-model/structure/model/indexing';
-import { StructureElement } from 'molstar/lib/mol-model/structure/structure/element';
-import { Unit } from 'molstar/lib/mol-model/structure/structure/unit';
-export interface AlignmentResultEntry {
-    transform: MinimizeRmsd.Result;
-    pivot: number;
-    other: number;
-}
-export interface AlignmentResult {
-    entries: AlignmentResultEntry[];
-    zeroOverlapPairs: [number, number][];
-    failedPairs: [number, number][];
-}
-type IncludeResidueTest = (traceElementOrFirstAtom: StructureElement.Location<Unit.Atomic>, residueIndex: ResidueIndex, startIndex: ElementIndex, endIndex: ElementIndex) => boolean;
-export declare function alignAndSuperposeWithSIFTSMapping(structures: Structure[], options?: {
-    traceOnly?: boolean;
-    includeResidueTest?: IncludeResidueTest;
-    applyTestIndex?: number[];
-}): AlignmentResult;
-export {};