pdbe-molstar 3.5.0 → 3.6.0

package/lib/extensions/complexes/index.js

@@ -0,0 +1,123 @@
+"use strict";
+/** Helper functions to allow superposition of complexes */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Coloring = void 0;
+exports.loadComplexSuperposition = loadComplexSuperposition;
+exports.superposeStructuresByMolstarDefault = superposeStructuresByMolstarDefault;
+const tslib_1 = require("tslib");
+const superposition_sifts_mapping_1 = require("molstar/lib/mol-model/structure/structure/util/superposition-sifts-mapping");
+const commands_1 = require("molstar/lib/mol-plugin/commands");
+const sleep_1 = require("molstar/lib/mol-util/sleep");
+const __1 = require("../..");
+const helpers_1 = require("../../helpers");
+const superposition_1 = require("../../superposition");
+const Coloring = tslib_1.__importStar(require("./coloring"));
+const superpose_by_biggest_chain_1 = require("./superpose-by-biggest-chain");
+exports.Coloring = tslib_1.__importStar(require("./coloring"));
+/** Load a structure, superpose onto the main structure based on Uniprot residue numbers, and optionally apply coloring to show common/additional components. */
+function loadComplexSuperposition(viewer, params) {
+    return tslib_1.__awaiter(this, void 0, void 0, function* () {
+        var _a, _b, _c, _d, _e, _f, _g;
+        const { pdbId, assemblyId, animationDuration = 250, coloring, baseComponents, otherComponents, baseMappings, otherMappings, coreColor, unmappedColor, componentColors, method = 'biggest-matched-chain' } = params;
+        const baseStructId = __1.PDBeMolstarPlugin.MAIN_STRUCTURE_ID;
+        const otherStructId = (_a = params.id) !== null && _a !== void 0 ? _a : `${pdbId}_${assemblyId}`;
+        // Apply coloring to base structure
+        if (coloring) {
+            if (!baseComponents)
+                throw new Error('`baseComponents` is required when `coloring` is not `undefined`');
+            if (!otherComponents)
+                throw new Error('`otherComponents` is required when `coloring` is not `undefined`');
+        }
+        if (coloring === 'subcomplex') {
+            yield Coloring.colorSubcomplex(viewer, { baseStructId, baseComponents: baseComponents, otherComponents: otherComponents, baseMappings, otherMappings, coreColor, componentColors });
+        }
+        if (coloring === 'supercomplex') {
+            yield Coloring.colorSupercomplex(viewer, { baseStructId, baseComponents: baseComponents, otherComponents: otherComponents, baseMappings, otherMappings, coreColor, unmappedColor, componentColors });
+        }
+        // Load other structure
+        const otherStructUrl = (0, helpers_1.getStructureUrl)(viewer.initParams, { pdbId, queryType: 'full' });
+        yield viewer.load({ url: otherStructUrl, isBinary: viewer.initParams.encoding === 'bcif', assemblyId, id: otherStructId }, false);
+        yield viewer.visual.structureVisibility(otherStructId, false); // hide structure until superposition complete, to avoid flickering
+        const baseStruct = (_c = (_b = viewer.getStructure(baseStructId)) === null || _b === void 0 ? void 0 : _b.cell.obj) === null || _c === void 0 ? void 0 : _c.data;
+        if (!baseStruct)
+            throw new Error('Static structure not loaded');
+        const otherStruct = (_e = (_d = viewer.getStructure(otherStructId)) === null || _d === void 0 ? void 0 : _d.cell.obj) === null || _e === void 0 ? void 0 : _e.data;
+        if (!otherStruct)
+            throw new Error('Mobile structure not loaded');
+        // Superpose other structure on base structure
+        const { status, superposition } = method === 'biggest-matched-chain' ?
+            (0, superpose_by_biggest_chain_1.superposeStructuresByBiggestCommonChain)(baseStruct, otherStruct, baseComponents, otherComponents)
+            : superposeStructuresByMolstarDefault(baseStruct, otherStruct);
+        if (superposition) {
+            yield (0, superposition_1.transform)(viewer.plugin, viewer.getStructure(otherStructId).cell, superposition.bTransform);
+        }
+        // Apply coloring to other structure
+        if (coloring === 'subcomplex') {
+            yield Coloring.colorSubcomplex(viewer, { otherStructId, baseComponents: baseComponents, otherComponents: otherComponents, baseMappings, otherMappings, coreColor, componentColors });
+        }
+        if (coloring === 'supercomplex') {
+            yield Coloring.colorSupercomplex(viewer, { otherStructId, baseComponents: baseComponents, otherComponents: otherComponents, baseMappings, otherMappings, coreColor, unmappedColor, componentColors });
+        }
+        // Adjust camera
+        const staticStructRef = viewer.getStructure(baseStructId);
+        const mobileStructRef = viewer.getStructure(otherStructId); // it is important to run this after superposition, to get correct coordinates for camera adjustment
+        // Wanted to use PluginCommands.Camera.Focus with viewer.plugin.canvas3d?.boundingSphere, but seems to not work properly, so using the following workaround:
+        yield commands_1.PluginCommands.Camera.FocusObject(viewer.plugin, {
+            targets: [
+                { targetRef: staticStructRef === null || staticStructRef === void 0 ? void 0 : staticStructRef.cell.transform.ref, extraRadius: 0.3 },
+                { targetRef: (_g = ((_f = mobileStructRef === null || mobileStructRef === void 0 ? void 0 : mobileStructRef.transform) !== null && _f !== void 0 ? _f : mobileStructRef)) === null || _g === void 0 ? void 0 : _g.cell.transform.ref, extraRadius: 0.3 },
+                // 0.3 is amount by which bounding sphere algorithm usually underestimates actual visible bounding sphere
+            ],
+            durationMs: animationDuration,
+        });
+        yield (0, sleep_1.sleep)(animationDuration); // wait until camera adjustment completed
+        // Reveal new structure
+        yield viewer.visual.structureVisibility(otherStructId, true);
+        return {
+            /** Structure identifier of the newly loaded complex structure, to refer to this structure later */
+            id: otherStructId,
+            /** Status of pairwise superposition ('success' / 'zero-overlap' / 'failed') */
+            status,
+            /** Superposition RMSD and tranform (if status is 'success') */
+            superposition,
+            /** Function that deletes the newly loaded complex structure */
+            delete: () => viewer.deleteStructure(otherStructId),
+        };
+    });
+}
+/** Superpose mobile structure onto static structure, based on Uniprot residue numbers. */
+function superposeStructuresByMolstarDefault(staticStruct, mobileStruct) {
+    var _a;
+    const aln = (0, superposition_sifts_mapping_1.alignAndSuperposeWithSIFTSMapping)([staticStruct, mobileStruct], { traceOnly: true });
+    const superposition = (_a = aln.entries.find(e => e.pivot === 0 && e.other === 1)) === null || _a === void 0 ? void 0 : _a.transform;
+    if (superposition) {
+        return { status: 'success', superposition: Object.assign(Object.assign({}, superposition), { nAlignedElements: Number.NaN }) };
+    }
+    else if (aln.zeroOverlapPairs.find(e => e[0] === 0 && e[1] === 1)) {
+        return { status: 'zero-overlap', superposition: undefined };
+    }
+    else {
+        return { status: 'failed', superposition: undefined };
+    }
+}
+/*
+Coloring - subcomplexes:
+- base common -> by entity, lighter
+- base additional -> gray, lighter
+- sub common -> by entity, darker
+- sub additional -> gray, darker (these are all unmapped components, includes antibodies and ligands)
+
+-> Colors can be assigned based on base complex and applied to subcomplex
+
+Coloring - supercomplexes:
+- base common -> gray, lighter
+- base additional -> unmapped color, lighter (these are all unmapped components, includes antibodies and ligands)
+- super common -> gray, darker
+- super additional mapped -> by entity, darker
+- super additional unmapped -> unmapped color, darker
+
+-> Colors can be assigned based on supercomplex complex, consistency between supercomplexes is probably not necessary
+
+-> For both subcomplexes and supercomplexes, colors could be assigned based on UniprotID hash -> database-wide consistency but complexes with similar-color components will occur
+
+*/

package/lib/extensions/complexes/superpose-by-biggest-chain.d.ts

@@ -0,0 +1,17 @@
+import { MinimizeRmsd } from 'molstar/lib/mol-math/linear-algebra/3d/minimize-rmsd';
+import { Structure } from 'molstar/lib/mol-model/structure';
+export type SuperpositionResult = {
+    status: 'success';
+    superposition: MinimizeRmsd.Result & {
+        nAlignedElements: number;
+    };
+} | {
+    status: 'zero-overlap';
+    superposition: undefined;
+} | {
+    status: 'failed';
+    superposition: undefined;
+};
+/** Status of pairwise superposition (success = superposed, zero-overlap = failed to superpose because the two structures have no matchable elements, failed = failed to superpose for other reasons) */
+export type SuperpositionStatus = SuperpositionResult['status'];
+export declare function superposeStructuresByBiggestCommonChain(structA: Structure, structB: Structure, allowedComponentsA: string[] | undefined, allowedComponentsB: string[] | undefined): SuperpositionResult;

package/lib/extensions/complexes/superpose-by-biggest-chain.js

@@ -0,0 +1,135 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.superposeStructuresByBiggestCommonChain = superposeStructuresByBiggestCommonChain;
+const minimize_rmsd_1 = require("molstar/lib/mol-math/linear-algebra/3d/minimize-rmsd");
+const mmcif_1 = require("molstar/lib/mol-model-formats/structure/mmcif");
+function extractUniprotIndex(structure, allowedAccessions) {
+    var _a, _b, _c;
+    var _d, _e;
+    const allowedAccessionsSet = allowedAccessions ? new Set(allowedAccessions) : undefined;
+    const seenUnitInvariantIds = new Set();
+    const out = {};
+    for (const unit of structure.units) {
+        if (seenUnitInvariantIds.has(unit.invariantId))
+            continue;
+        else
+            seenUnitInvariantIds.add(unit.invariantId);
+        const src = structure.model.sourceData;
+        if (!mmcif_1.MmcifFormat.is(src))
+            throw new Error('Source data must be mmCIF/BCIF');
+        const h = unit.model.atomicHierarchy;
+        const { pdbx_sifts_xref_db_acc, pdbx_sifts_xref_db_name, pdbx_sifts_xref_db_num } = src.data.db.atom_site;
+        const atoms = unit.polymerElements;
+        const nAtoms = atoms.length;
+        for (let i = 0; i < nAtoms; i++) {
+            const iAtom = atoms[i];
+            const srcIAtom = h.atomSourceIndex.value(iAtom);
+            const dbName = pdbx_sifts_xref_db_name.value(srcIAtom);
+            if (dbName !== 'UNP')
+                continue;
+            const dbAcc = pdbx_sifts_xref_db_acc.value(srcIAtom);
+            if (allowedAccessionsSet && !allowedAccessionsSet.has(dbAcc))
+                continue;
+            const dbNum = pdbx_sifts_xref_db_num.value(srcIAtom);
+            const structMapping = (_a = out[dbAcc]) !== null && _a !== void 0 ? _a : (out[dbAcc] = {});
+            const chainMapping = (_b = structMapping[_d = unit.id]) !== null && _b !== void 0 ? _b : (structMapping[_d] = {
+                label_asym_id: h.chains.label_asym_id.value(h.chainAtomSegments.index[atoms[0]]),
+                auth_asym_id: h.chains.auth_asym_id.value(h.chainAtomSegments.index[atoms[0]]),
+                atomMap: {},
+            });
+            (_c = (_e = chainMapping.atomMap)[dbNum]) !== null && _c !== void 0 ? _c : (_e[dbNum] = iAtom);
+        }
+    }
+    return out;
+}
+function bestUniprotMatch(a, b) {
+    const sortedA = sortAccessionAndChains(a);
+    const sortedB = sortAccessionAndChains(b);
+    let bestMatch = undefined;
+    let bestScore = 0;
+    for (const accession of sortedA.accessions) {
+        const unitsA = sortedA.units[accession];
+        const unitsB = sortedB.units[accession];
+        if (!unitsB)
+            continue;
+        for (const ua of unitsA) {
+            if (ua.size <= bestScore)
+                break;
+            const unitA = a[accession][ua.unitId];
+            for (const ub of unitsB) {
+                if (ub.size <= bestScore || ua.size <= bestScore)
+                    break;
+                const unitB = b[accession][ub.unitId];
+                const score = objectKeyOverlap(unitA.atomMap, unitB.atomMap);
+                if (score > bestScore) {
+                    bestScore = score;
+                    bestMatch = { accession, unitA: ua.unitId, unitB: ub.unitId, nMatchedElements: score };
+                }
+            }
+        }
+    }
+    return bestMatch;
+}
+/** Sort units for each accession by decreasing size and sort accessions by decreasing biggest unit size. */
+function sortAccessionAndChains(uniprotIndex) {
+    const unitsByAccession = {};
+    for (const accession in uniprotIndex) {
+        const unitIds = uniprotIndex[accession];
+        const units = [];
+        for (const unitId in unitIds) {
+            const size = Object.keys(unitIds[unitId].atomMap).length;
+            units.push({ unitId, size });
+        }
+        units.sort((a, b) => b.size - a.size);
+        unitsByAccession[accession] = units;
+    }
+    return {
+        /** Accessions sorted by decreasing biggest unit size */
+        accessions: Object.keys(unitsByAccession).sort((a, b) => unitsByAccession[b][0].size - unitsByAccession[a][0].size),
+        /** Units per accession, sorted by decreasing unit size */
+        units: unitsByAccession,
+    };
+}
+/** Return number of keys common to objects `a` and `b` */
+function objectKeyOverlap(a, b) {
+    let overlap = 0;
+    for (const key in a) {
+        if (key in b) {
+            overlap++;
+        }
+    }
+    return overlap;
+}
+function superposeStructuresByBiggestCommonChain(structA, structB, allowedComponentsA, allowedComponentsB) {
+    const indexA = extractUniprotIndex(structA, allowedComponentsA);
+    const indexB = extractUniprotIndex(structB, allowedComponentsB);
+    const bestMatch = bestUniprotMatch(indexA, indexB);
+    if (!bestMatch) {
+        return { status: 'zero-overlap', superposition: undefined };
+    }
+    const unitA = structA.unitMap.get(Number(bestMatch.unitA));
+    const unitB = structB.unitMap.get(Number(bestMatch.unitB));
+    const unitIndexA = indexA[bestMatch.accession][bestMatch.unitA];
+    const unitIndexB = indexB[bestMatch.accession][bestMatch.unitB];
+    const positionsA = minimize_rmsd_1.MinimizeRmsd.Positions.empty(bestMatch.nMatchedElements);
+    const positionsB = minimize_rmsd_1.MinimizeRmsd.Positions.empty(bestMatch.nMatchedElements);
+    let i = 0;
+    for (const unpNum in unitIndexA.atomMap) {
+        const iAtomB = unitIndexB.atomMap[unpNum];
+        if (iAtomB === undefined)
+            continue;
+        const iAtomA = unitIndexA.atomMap[unpNum];
+        positionsA.x[i] = unitA.conformation.coordinates.x[iAtomA];
+        positionsA.y[i] = unitA.conformation.coordinates.y[iAtomA];
+        positionsA.z[i] = unitA.conformation.coordinates.z[iAtomA];
+        positionsB.x[i] = unitB.conformation.coordinates.x[iAtomB];
+        positionsB.y[i] = unitB.conformation.coordinates.y[iAtomB];
+        positionsB.z[i] = unitB.conformation.coordinates.z[iAtomB];
+        i++;
+    }
+    const superposition = minimize_rmsd_1.MinimizeRmsd.compute({ a: positionsA, b: positionsB });
+    if (isNaN(superposition.rmsd)) {
+        return { status: 'failed', superposition: undefined };
+    }
+    return { status: 'success', superposition: Object.assign(Object.assign({}, superposition), { nAlignedElements: bestMatch.nMatchedElements }) };
+}

package/lib/helpers.d.ts

@@ -1,9 +1,11 @@
 import { ComponentExpressionT } from 'molstar/lib/extensions/mvs/tree/mvs/param-types';
+import { Mat3, Mat4 } from 'molstar/lib/mol-math/linear-algebra';
 import { Model, Structure } from 'molstar/lib/mol-model/structure';
 import { BuiltInTrajectoryFormat } from 'molstar/lib/mol-plugin-state/formats/trajectory';
 import { StructureRef } from 'molstar/lib/mol-plugin-state/manager/structure/hierarchy-state';
 import { PluginConfigItem } from 'molstar/lib/mol-plugin/config';
 import { PluginContext } from 'molstar/lib/mol-plugin/context';
+import { PluginLayoutStateProps } from 'molstar/lib/mol-plugin/layout';
 import { Expression } from 'molstar/lib/mol-script/language/expression';
 import { Overpaint } from 'molstar/lib/mol-theme/overpaint';
 import { Color } from 'molstar/lib/mol-util/color';
@@ -192,4 +194,6 @@ export declare namespace PluginConfigUtils {
     /** Retrieve config values for items in `configItems` from the current plugin config */
     function getConfigValues<T extends object>(plugin: PluginContext | undefined, configItems: ConfigFor<T>, defaults: T): T;
 }
+export declare function pluginLayoutStateFromInitParams(initParams: InitParams): PluginLayoutStateProps;
+export declare function getRotationMat4(view: 'front' | 'back' | 'right' | 'left' | 'top' | 'bottom' | Mat3): Mat4;
 export {};

package/lib/helpers.js

@@ -13,13 +13,17 @@ exports.distinct = distinct;
 exports.groupElements = groupElements;
 exports.createIndex = createIndex;
 exports.nonnegativeModulo = nonnegativeModulo;
+exports.pluginLayoutStateFromInitParams = pluginLayoutStateFromInitParams;
+exports.getRotationMat4 = getRotationMat4;
 const tslib_1 = require("tslib");
 const prop_1 = require("molstar/lib/extensions/model-archive/quality-assessment/prop");
+const linear_algebra_1 = require("molstar/lib/mol-math/linear-algebra");
 const structure_1 = require("molstar/lib/mol-model/structure");
 const query_1 = require("molstar/lib/mol-model/structure/query/query");
 const transforms_1 = require("molstar/lib/mol-plugin-state/transforms");
 const transformers_1 = require("molstar/lib/mol-plugin/behavior/dynamic/volume-streaming/transformers");
 const commands_1 = require("molstar/lib/mol-plugin/commands");
+const layout_1 = require("molstar/lib/mol-plugin/layout");
 const builder_1 = require("molstar/lib/mol-script/language/builder");
 const compiler_1 = require("molstar/lib/mol-script/runtime/query/compiler");
 const mol_state_1 = require("molstar/lib/mol-state");
@@ -197,92 +201,105 @@ var QueryHelper;
 (function (QueryHelper) {
     function getQueryObject(params, contextData) {
         const selections = [];
-        let siftMappings;
-        let currentAccession;
-        params.forEach(param => {
-            const selection = {};
+        /** `undefined` means SIFTSMappingMapping has not been retrieved yet. `null` means SIFTSMappingMapping has been retrieved unsuccessfully.  */
+        let _siftMappings;
+        function getSiftsMappings() {
+            var _a;
+            if (_siftMappings === undefined)
+                _siftMappings = (_a = sifts_mapping_1.SIFTSMapping.Provider.get(contextData.models[0]).value) !== null && _a !== void 0 ? _a : null;
+            return _siftMappings;
+        }
+        for (const param of params) {
+            const predicates = {
+                entity: [],
+                chain: [],
+                residue: [],
+                atom: [],
+            };
             // entity
-            if (param.entity_id)
-                selection['entityTest'] = l => structure_1.StructureProperties.entity.id(l.element) === param.entity_id;
+            if (param.entity_id !== undefined) {
+                predicates.entity.push(l => structure_1.StructureProperties.entity.id(l.element) === param.entity_id);
+            }
             // chain
-            if (param.struct_asym_id) {
-                selection['chainTest'] = l => structure_1.StructureProperties.chain.label_asym_id(l.element) === param.struct_asym_id;
+            if (param.struct_asym_id !== undefined) {
+                predicates.chain.push(l => structure_1.StructureProperties.chain.label_asym_id(l.element) === param.struct_asym_id);
             }
-            else if (param.auth_asym_id) {
-                selection['chainTest'] = l => structure_1.StructureProperties.chain.auth_asym_id(l.element) === param.auth_asym_id;
+            if (param.auth_asym_id !== undefined) {
+                predicates.chain.push(l => structure_1.StructureProperties.chain.auth_asym_id(l.element) === param.auth_asym_id);
             }
-            // residues
-            // TODO implement AND-logic here (now { residue_number: 50, label_comp_id: 'PHE' } selects all PHE)
-            if (param.label_comp_id) {
-                selection['residueTest'] = l => structure_1.StructureProperties.atom.label_comp_id(l.element) === param.label_comp_id;
+            // residue
+            if (param.label_comp_id !== undefined) {
+                predicates.residue.push(l => structure_1.StructureProperties.atom.label_comp_id(l.element) === param.label_comp_id);
             }
-            else if (param.uniprot_accession && param.uniprot_residue_number !== undefined) {
-                selection['residueTest'] = l => {
-                    if (!siftMappings || currentAccession !== param.uniprot_accession) {
-                        siftMappings = sifts_mapping_1.SIFTSMapping.Provider.get(contextData.models[0]).value;
-                        currentAccession = param.uniprot_accession;
-                    }
-                    const rI = structure_1.StructureProperties.residue.key(l.element);
-                    return !!siftMappings && param.uniprot_accession === siftMappings.accession[rI] && param.uniprot_residue_number === +siftMappings.num[rI];
-                };
+            if (param.residue_number !== undefined) {
+                predicates.residue.push(l => structure_1.StructureProperties.residue.label_seq_id(l.element) === param.residue_number);
             }
-            else if (param.uniprot_accession && param.start_uniprot_residue_number !== undefined && param.end_uniprot_residue_number !== undefined) {
-                selection['residueTest'] = l => {
-                    if (!siftMappings || currentAccession !== param.uniprot_accession) {
-                        siftMappings = sifts_mapping_1.SIFTSMapping.Provider.get(contextData.models[0]).value;
-                        currentAccession = param.uniprot_accession;
-                    }
-                    const rI = structure_1.StructureProperties.residue.key(l.element);
-                    return !!siftMappings && param.uniprot_accession === siftMappings.accession[rI] && (param.start_uniprot_residue_number <= +siftMappings.num[rI] && param.end_uniprot_residue_number >= +siftMappings.num[rI]);
-                };
+            if (param.start_residue_number !== undefined) {
+                predicates.residue.push(l => structure_1.StructureProperties.residue.label_seq_id(l.element) >= param.start_residue_number);
             }
-            else if (param.residue_number !== undefined) {
-                selection['residueTest'] = l => structure_1.StructureProperties.residue.label_seq_id(l.element) === param.residue_number;
+            if (param.end_residue_number !== undefined) {
+                predicates.residue.push(l => structure_1.StructureProperties.residue.label_seq_id(l.element) <= param.end_residue_number);
             }
-            else if (param.start_residue_number !== undefined && param.end_residue_number !== undefined && param.end_residue_number > param.start_residue_number) {
-                selection['residueTest'] = l => {
-                    const labelSeqId = structure_1.StructureProperties.residue.label_seq_id(l.element);
-                    return labelSeqId >= param.start_residue_number && labelSeqId <= param.end_residue_number;
-                };
+            if (param.auth_seq_id !== undefined) {
+                predicates.residue.push(l => structure_1.StructureProperties.residue.auth_seq_id(l.element) === param.auth_seq_id);
             }
-            else if (param.start_residue_number !== undefined && param.end_residue_number !== undefined && param.end_residue_number === param.start_residue_number) {
-                selection['residueTest'] = l => structure_1.StructureProperties.residue.label_seq_id(l.element) === param.start_residue_number;
+            if (param.auth_residue_number !== undefined) {
+                predicates.residue.push(l => structure_1.StructureProperties.residue.auth_seq_id(l.element) === param.auth_residue_number);
             }
-            else if (param.auth_seq_id !== undefined) {
-                selection['residueTest'] = l => structure_1.StructureProperties.residue.auth_seq_id(l.element) === param.auth_seq_id;
+            if (param.auth_ins_code_id !== undefined) {
+                predicates.residue.push(l => structure_1.StructureProperties.residue.pdbx_PDB_ins_code(l.element) === param.auth_ins_code_id);
             }
-            else if (param.auth_residue_number !== undefined && !param.auth_ins_code_id) {
-                selection['residueTest'] = l => structure_1.StructureProperties.residue.auth_seq_id(l.element) === param.auth_residue_number;
+            if (param.start_auth_residue_number !== undefined) {
+                predicates.residue.push(l => structure_1.StructureProperties.residue.auth_seq_id(l.element) >= param.start_auth_residue_number);
+                if (param.start_auth_ins_code_id !== undefined) {
+                    // This assumes insertion code come in alphabetical order, which is not always true (e.g. 1ucy chain A [auth L]). However, authors of such monstrosities do not deserve their structures to be displayed correctly.
+                    predicates.residue.push(l => structure_1.StructureProperties.residue.auth_seq_id(l.element) > param.start_auth_residue_number || structure_1.StructureProperties.residue.pdbx_PDB_ins_code(l.element) >= param.start_auth_ins_code_id);
+                }
+            }
+            if (param.end_auth_residue_number !== undefined) {
+                predicates.residue.push(l => structure_1.StructureProperties.residue.auth_seq_id(l.element) <= param.end_auth_residue_number);
+                if (param.end_auth_ins_code_id !== undefined) {
+                    // This assumes insertion code come in alphabetical order, which is not always true (e.g. 1ucy chain A [auth L]). However, authors of such monstrosities do not deserve their structures to be displayed correctly.
+                    predicates.residue.push(l => structure_1.StructureProperties.residue.auth_seq_id(l.element) < param.end_auth_residue_number || structure_1.StructureProperties.residue.pdbx_PDB_ins_code(l.element) <= param.end_auth_ins_code_id);
+                }
             }
-            else if (param.auth_residue_number !== undefined && param.auth_ins_code_id) {
-                selection['residueTest'] = l => structure_1.StructureProperties.residue.auth_seq_id(l.element) === param.auth_residue_number;
-                // TODO really check ins code, same for auth_seq_id, start_auth_ins_code_id, end_auth_ins_code_id
+            if (param.uniprot_accession !== undefined) {
+                predicates.residue.push(l => { var _a; return ((_a = getSiftsMappings()) === null || _a === void 0 ? void 0 : _a.accession[structure_1.StructureProperties.residue.key(l.element)]) === param.uniprot_accession; });
             }
-            else if (param.start_auth_residue_number !== undefined && param.end_auth_residue_number !== undefined && param.end_auth_residue_number > param.start_auth_residue_number) {
-                selection['residueTest'] = l => {
-                    const authSeqId = structure_1.StructureProperties.residue.auth_seq_id(l.element);
-                    return authSeqId >= param.start_auth_residue_number && authSeqId <= param.end_auth_residue_number;
-                };
+            if (param.uniprot_residue_number !== undefined) {
+                predicates.residue.push(l => { var _a; return Number((_a = getSiftsMappings()) === null || _a === void 0 ? void 0 : _a.num[structure_1.StructureProperties.residue.key(l.element)]) === param.uniprot_residue_number; });
             }
-            else if (param.start_auth_residue_number !== undefined && param.end_auth_residue_number !== undefined && param.end_auth_residue_number === param.start_auth_residue_number) {
-                selection['residueTest'] = l => structure_1.StructureProperties.residue.auth_seq_id(l.element) === param.start_auth_residue_number;
+            if (param.start_uniprot_residue_number !== undefined) {
+                predicates.residue.push(l => { var _a; return Number((_a = getSiftsMappings()) === null || _a === void 0 ? void 0 : _a.num[structure_1.StructureProperties.residue.key(l.element)]) >= param.start_uniprot_residue_number; });
             }
-            // atoms
+            if (param.end_uniprot_residue_number !== undefined) {
+                predicates.residue.push(l => { var _a; return Number((_a = getSiftsMappings()) === null || _a === void 0 ? void 0 : _a.num[structure_1.StructureProperties.residue.key(l.element)]) <= param.end_uniprot_residue_number; });
+            }
+            // atom
             if (param.atoms) {
-                selection['atomTest'] = l => param.atoms.includes(structure_1.StructureProperties.atom.label_atom_id(l.element));
+                predicates.atom.push(l => param.atoms.includes(structure_1.StructureProperties.atom.label_atom_id(l.element)));
             }
             if (param.atom_id) {
-                selection['atomTest'] = l => param.atom_id.includes(structure_1.StructureProperties.atom.id(l.element));
+                predicates.atom.push(l => param.atom_id.includes(structure_1.StructureProperties.atom.id(l.element)));
             }
-            selections.push(selection);
-        });
-        const atmGroupsQueries = [];
-        selections.forEach(selection => {
-            atmGroupsQueries.push(structure_1.Queries.generators.atoms(selection));
-        });
+            selections.push({
+                entityTest: predicateConjunction(predicates.entity),
+                chainTest: predicateConjunction(predicates.chain),
+                residueTest: predicateConjunction(predicates.residue),
+                atomTest: predicateConjunction(predicates.atom),
+            });
+        }
+        const atmGroupsQueries = selections.map(selection => structure_1.Queries.generators.atoms(selection));
         return structure_1.Queries.combinators.merge(atmGroupsQueries);
     }
     QueryHelper.getQueryObject = getQueryObject;
+    function predicateConjunction(predicates) {
+        if (predicates.length === 0)
+            return undefined;
+        if (predicates.length === 1)
+            return predicates[0];
+        return (x => predicates.every(pred => pred(x)));
+    }
     function getInteractivityLoci(params, contextData) {
         const sel = query_1.StructureQuery.run(QueryHelper.getQueryObject(params, contextData), contextData);
         return structure_1.StructureSelection.toLociWithSourceUnits(sel);
@@ -570,3 +587,31 @@ var PluginConfigUtils;
     }
     PluginConfigUtils.getConfigValues = getConfigValues;
 })(PluginConfigUtils || (exports.PluginConfigUtils = PluginConfigUtils = {}));
+function pluginLayoutStateFromInitParams(initParams) {
+    return {
+        isExpanded: initParams.expanded,
+        showControls: !initParams.hideControls,
+        regionState: {
+            left: initParams.leftPanel ? 'full' : 'hidden',
+            right: initParams.rightPanel ? 'full' : 'hidden',
+            top: initParams.sequencePanel ? 'full' : 'hidden',
+            bottom: initParams.logPanel ? 'full' : 'hidden',
+        },
+        controlsDisplay: initParams.reactive ? 'reactive' : initParams.landscape ? 'landscape' : layout_1.PluginLayoutStateParams.controlsDisplay.defaultValue,
+    };
+}
+function getRotationMat4(view) {
+    switch (view) {
+        case 'front': return linear_algebra_1.Mat4.identity();
+        case 'back': return [-1, 0, 0, 0, 0, 1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1];
+        case 'right': return [0, 0, -1, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 1];
+        case 'left': return [0, 0, 1, 0, 0, 1, 0, 0, -1, 0, 0, 0, 0, 0, 0, 1];
+        case 'top': return [1, 0, 0, 0, 0, 0, -1, 0, 0, 1, 0, 0, 0, 0, 0, 1];
+        case 'bottom': return [1, 0, 0, 0, 0, 0, 1, 0, 0, -1, 0, 0, 0, 0, 0, 1];
+        default: {
+            const out = linear_algebra_1.Mat4.fromMat3((0, linear_algebra_1.Mat4)(), view);
+            out[15] = 1;
+            return out;
+        }
+    }
+}

package/lib/spec.d.ts

@@ -123,7 +123,7 @@ export interface InitParams {
     /** Hide all control panels by default (can be shown by the Toggle Controls Panel button (wrench icon)) */
     hideControls: boolean;
     /** Hide individual icon buttons in the top-right corner of the canvas */
-    hideCanvasControls: ('expand' | 'controlToggle' | 'controlInfo' | 'selection' | 'animation' | 'trajectory')[];
+    hideCanvasControls: ('screenshot' | 'expand' | 'controlToggle' | 'controlInfo' | 'selection' | 'animation' | 'trajectory')[];
     /** Display Sequence panel */
     sequencePanel: boolean;
     /** Display Left control panel */

package/lib/styles/pdbe-molstar/_index.scss

@@ -3,9 +3,9 @@
 // Color constants must be imported before importing this file
 // (from molstar/lib/mol-plugin-ui/skin/*.scss or molstar/lib/mol-plugin-ui/skin/colors/*.scss)
 
-.msp-plugin {
-    @import 'molstar/lib/mol-plugin-ui/skin/base/variables.scss';
+@use 'molstar/lib/mol-plugin-ui/skin/base/_vars.scss' as vars;
 
+.msp-plugin {
     ::-webkit-scrollbar-thumb {
         background-color: #80808080;
         border-radius: 10px;
@@ -22,7 +22,7 @@
     }
 
     .msp-viewport-controls-panel .msp-viewport-controls-panel-controls {
-        max-height: calc(100cqh - 41px - 24px - 10px); // 100cqh = viewport container, 41px = control buttons offset, 24px = header, 10px = space below
+        max-height: calc(100cqh - 46px - 24px - 10px); // 100cqh = viewport container, 46px = control buttons offset, 24px = header, 10px = space below
     }
 
     // Avoid wraping headers in left panel help
@@ -43,7 +43,7 @@
         float: left;
 
         &:not(:empty) {
-            margin-right: $control-spacing;
+            margin-right: vars.$control-spacing;
         }
     }
 
@@ -52,11 +52,11 @@
         display: flex;
         flex-direction: column;
         align-items: center;
-        padding-inline: calc(54px + 2 * $control-spacing); // 54px = PDBe logo box
+        padding-inline: calc(54px + 2 * vars.$control-spacing); // 54px = PDBe logo box
         pointer-events: none;
 
         >* {
-            margin-top: $control-spacing;
+            margin-top: vars.$control-spacing;
             pointer-events: auto;
             max-width: 100%;
         }
@@ -145,7 +145,7 @@
     .pdbemolstar-state-gallery-title-box {
         width: 500px;
         max-width: 100%;
-        background-color: $msp-form-control-background;
+        background-color: vars.$msp-form-control-background;
         display: flex;
         flex-direction: row;
         justify-content: space-between;

package/lib/styles/pdbe-molstar-dark.scss

@@ -1,2 +1,2 @@
-@import 'molstar/lib/mol-plugin-ui/skin/dark';
-@import './pdbe-molstar/_index';
+@use 'molstar/lib/mol-plugin-ui/skin/dark';
+@use './pdbe-molstar/_index';

package/lib/styles/pdbe-molstar-light.scss

@@ -1,2 +1,2 @@
-@import 'molstar/lib/mol-plugin-ui/skin/light';
-@import './pdbe-molstar/_index';
+@use 'molstar/lib/mol-plugin-ui/skin/light';
+@use './pdbe-molstar/_index';

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