pdbe-molstar 3.5.0 → 3.7.0

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");
@@ -30,9 +34,12 @@ const sleep_1 = require("molstar/lib/mol-util/sleep");
 const sifts_mapping_1 = require("./sifts-mapping");
 var PDBeVolumes;
 (function (PDBeVolumes) {
-    function mapParams(defaultParams, mapParams, ref) {
+    function mapParams(defaultParams, mapParams) {
         const pdbeParams = Object.assign({}, defaultParams);
-        pdbeParams.options.behaviorRef = 'volume-streaming' + '' + Math.floor(Math.random() * Math.floor(100));
+        if (mapParams === null || mapParams === void 0 ? void 0 : mapParams.defaultView) {
+            pdbeParams.defaultView = mapParams.defaultView;
+        }
+        pdbeParams.options.behaviorRef = `volume-streaming${Math.floor(Math.random() * 100)}`;
         pdbeParams.options.emContourProvider = 'pdbe';
         pdbeParams.options.serverUrl = 'https://www.ebi.ac.uk/pdbe/volume-server';
         const MAIN_MAP_DEFAULTS = { opacity: 0.49, wireframe: false };
@@ -148,7 +155,7 @@ var LigandView;
     LigandView.branchedQuery = branchedQuery;
 })(LigandView || (exports.LigandView = LigandView = {}));
 function queryParamsToMvsComponentExpressions(params) {
-    const broadcasted = broadcast(params, ['atoms', 'atom_id']);
+    const broadcasted = broadcast(params, ['atoms', 'atom_id', 'type_symbol']);
     return broadcasted.map(item => {
         var _a;
         return ({
@@ -164,7 +171,7 @@ function queryParamsToMvsComponentExpressions(params) {
             end_auth_seq_id: item.end_auth_residue_number,
             label_atom_id: item.atoms,
             auth_atom_id: undefined,
-            type_symbol: undefined,
+            type_symbol: item.type_symbol,
             atom_id: item.atom_id,
             atom_index: undefined,
             label_comp_id: item.label_comp_id,
@@ -197,92 +204,108 @@ 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));
-        });
+            if (param.type_symbol) {
+                predicates.atom.push(l => param.type_symbol.includes(structure_1.StructureProperties.atom.type_symbol(l.element)));
+            }
+            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.modifiers.union(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 +593,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/plugin-custom-state.d.ts

@@ -1,4 +1,3 @@
-import { SymmetryOperator } from 'molstar/lib/mol-math/geometry';
 import { Mat4 } from 'molstar/lib/mol-math/linear-algebra';
 import { PluginContext } from 'molstar/lib/mol-plugin/context';
 import { StateSelection, StateTransform } from 'molstar/lib/mol-state';
@@ -55,7 +54,6 @@ export interface PluginCustomState {
             visibility: boolean[];
             transforms: Mat4[];
             rmsds: string[][];
-            coordinateSystems: (SymmetryOperator | undefined)[];
         };
     };
     superpositionError?: string;

package/lib/sequence-color/behavior.d.ts

@@ -0,0 +1,5 @@
+import { PluginBehavior } from 'molstar/lib/mol-plugin/behavior';
+/** Allows coloring residues in sequence panel */
+export declare const SequenceColor: import("molstar/lib/mol-state").StateTransformer<PluginBehavior.Category, PluginBehavior.Behavior, {
+    autoAttach: boolean;
+}>;

package/lib/sequence-color/behavior.js

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SequenceColor = void 0;
+const model_1 = require("molstar/lib/mol-plugin-state/transforms/model");
+const context_1 = require("molstar/lib/mol-plugin-ui/context");
+const behavior_1 = require("molstar/lib/mol-plugin/behavior");
+const param_definition_1 = require("molstar/lib/mol-util/param-definition");
+const rxjs_1 = require("rxjs");
+const color_1 = require("./color");
+const prop_1 = require("./prop");
+/** Allows coloring residues in sequence panel */
+exports.SequenceColor = behavior_1.PluginBehavior.create({
+    name: 'sequence-color',
+    category: 'misc',
+    display: {
+        name: 'Sequence Color',
+        description: 'Sequence Color extension, allows assigning custom residue colors to be shown in the sequence panel, based on a custom structure property',
+    },
+    ctor: class extends behavior_1.PluginBehavior.Handler {
+        register() {
+            var _a, _b;
+            this.ctx.customStructureProperties.register(prop_1.SequenceColorProperty.Provider, this.params.autoAttach);
+            if (this.ctx instanceof context_1.PluginUIContext) {
+                const customUIState = (_a = this.ctx.customUIState) !== null && _a !== void 0 ? _a : {}; // TODO remove this hack once `customUIState` is available in core Molstar
+                const theme = (_b = customUIState.experimentalSequenceColorTheme) !== null && _b !== void 0 ? _b : (customUIState.experimentalSequenceColorTheme = new rxjs_1.BehaviorSubject(undefined));
+                this.sub = this.ctx.state.events.cell.stateUpdated.subscribe(s => {
+                    if (s.cell.transform.transformer === model_1.CustomStructureProperties) {
+                        theme.next(color_1.CustomSequenceColorTheme.Provider);
+                    }
+                });
+            }
+        }
+        update(p) {
+            const updated = this.params.autoAttach !== p.autoAttach;
+            this.params.autoAttach = p.autoAttach;
+            this.ctx.customStructureProperties.setDefaultAutoAttach(prop_1.SequenceColorProperty.Provider.descriptor.name, this.params.autoAttach);
+            return updated;
+        }
+        unregister() {
+            var _a, _b;
+            this.ctx.customStructureProperties.unregister(prop_1.SequenceColorProperty.Provider.descriptor.name);
+            (_a = this.sub) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+            this.sub = undefined;
+            if (this.ctx instanceof context_1.PluginUIContext) {
+                const customUIState = (_b = this.ctx.customUIState) !== null && _b !== void 0 ? _b : {}; // TODO remove this hack once `customUIState` is available in core Molstar
+                const theme = customUIState.experimentalSequenceColorTheme;
+                theme === null || theme === void 0 ? void 0 : theme.next(undefined);
+            }
+        }
+    },
+    params: () => ({
+        autoAttach: param_definition_1.ParamDefinition.Boolean(true),
+    }),
+});

package/lib/sequence-color/color.d.ts

@@ -0,0 +1,11 @@
+import { ColorTheme } from 'molstar/lib/mol-theme/color';
+import { ThemeDataContext } from 'molstar/lib/mol-theme/theme';
+import { ParamDefinition as PD } from 'molstar/lib/mol-util/param-definition';
+export declare namespace CustomSequenceColorTheme {
+    const Params: {};
+    type Params = typeof Params;
+    type Props = PD.Values<Params>;
+    function Theme(ctx: ThemeDataContext, props: Props): ColorTheme<Props>;
+    /** A thingy that is needed to register color theme "MVS Annotation" */
+    const Provider: ColorTheme.Provider<Params, 'custom-sequence-color'>;
+}

package/lib/sequence-color/color.js

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CustomSequenceColorTheme = void 0;
+const selector_1 = require("molstar/lib/extensions/mvs/components/selector");
+const structure_1 = require("molstar/lib/mol-model/structure");
+const color_1 = require("molstar/lib/mol-util/color");
+const param_definition_1 = require("molstar/lib/mol-util/param-definition");
+const prop_1 = require("./prop");
+/** Special color value meaning "no color assigned" */
+const NoColor = (0, color_1.Color)(-1);
+var CustomSequenceColorTheme;
+(function (CustomSequenceColorTheme) {
+    CustomSequenceColorTheme.Params = {};
+    function Theme(ctx, props) {
+        let color = () => NoColor;
+        if (ctx.structure && !ctx.structure.isEmpty) {
+            const colorData = prop_1.SequenceColorProperty.Provider.get(ctx.structure).value;
+            if (colorData && colorData.items.length > 0) {
+                color = location => structure_1.StructureElement.Location.is(location) ? sequenceColorForLocation(colorData, location) : NoColor;
+            }
+        }
+        return {
+            factory: Theme,
+            granularity: 'groupInstance',
+            color: color,
+            props: props,
+            description: 'Assigns colors based on custom structure property `SequenceColorProperty`.',
+        };
+    }
+    CustomSequenceColorTheme.Theme = Theme;
+    /** A thingy that is needed to register color theme "MVS Annotation" */
+    CustomSequenceColorTheme.Provider = {
+        name: 'custom-sequence-color',
+        label: 'Custom Sequence Color',
+        category: 'Miscellaneous',
+        factory: Theme,
+        getParams: ctx => CustomSequenceColorTheme.Params,
+        defaultValues: param_definition_1.ParamDefinition.getDefaultValues(CustomSequenceColorTheme.Params),
+        isApplicable: (ctx) => !!ctx.structure,
+    };
+})(CustomSequenceColorTheme || (exports.CustomSequenceColorTheme = CustomSequenceColorTheme = {}));
+function sequenceColorForLocation(colorData, location) {
+    var _a, _b;
+    var _c, _d, _e;
+    const unitCache = (_a = (_c = colorData.colorCache)[_d = location.unit.id]) !== null && _a !== void 0 ? _a : (_c[_d] = {});
+    return (_b = unitCache[_e = location.element]) !== null && _b !== void 0 ? _b : (unitCache[_e] = findSequenceColorForLocation(colorData, location));
+}
+function findSequenceColorForLocation(colorData, location) {
+    var _a;
+    for (let i = colorData.items.length - 1; i >= 0; i--) { // last color matters
+        const item = colorData.items[i];
+        const elements = (_a = item.elementSet) !== null && _a !== void 0 ? _a : (item.elementSet = selector_1.ElementSet.fromSelector(location.structure, item.selector));
+        if (selector_1.ElementSet.has(elements, location)) {
+            return item.color;
+        }
+    }
+    return NoColor;
+}

package/lib/sequence-color/prop.d.ts

@@ -0,0 +1,38 @@
+import { ElementSet, Selector } from 'molstar/lib/extensions/mvs/components/selector';
+import { CustomStructureProperty } from 'molstar/lib/mol-model-props/common/custom-structure-property';
+import { ElementIndex } from 'molstar/lib/mol-model/structure';
+import { Color } from 'molstar/lib/mol-util/color';
+import { ParamDefinition as PD } from 'molstar/lib/mol-util/param-definition';
+export declare namespace SequenceColorProperty {
+    /** Parameter definition for custom structure property `SequenceColorProperty` */
+    type Params = typeof Params;
+    const Params: {
+        colors: PD.ObjectList<PD.Normalize<{
+            color: Color;
+            selector: PD.NamedParams<"all" | "polymer" | "water" | "branched" | "ligand" | "ion" | "lipid" | "protein" | "nucleic" | "non-standard" | "coarse", "static"> | PD.NamedParams<import("molstar/lib/mol-script/script").Script, "script"> | PD.NamedParams<import("molstar/lib/mol-script/language/expression").Expression, "expression"> | PD.NamedParams<import("molstar/lib/mol-model/structure/structure/element/bundle").Bundle, "bundle"> | PD.NamedParams<PD.Normalize<{
+                annotationId: string;
+                fieldName: string;
+                fieldValues: PD.NamedParams<PD.Normalize<unknown>, "all"> | PD.NamedParams<PD.Normalize<{
+                    value: any;
+                }>[], "selected">;
+            }>, "annotation">;
+        }>>;
+    };
+    /** Parameter values of custom structure property `SequenceColorProperty` */
+    type Props = PD.Values<Params>;
+    /** Values of custom structure property `SequenceColorProperty` */
+    interface Data {
+        items: {
+            selector: Selector;
+            color: Color;
+            elementSet?: ElementSet;
+        }[];
+        colorCache: {
+            [unitId: number]: {
+                [elemIdx: ElementIndex]: Color;
+            };
+        };
+    }
+    /** Provider for custom structure property `SequenceColorProperty` */
+    const Provider: CustomStructureProperty.Provider<Params, Data>;
+}

package/lib/sequence-color/prop.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SequenceColorProperty = void 0;
+const tslib_1 = require("tslib");
+const selector_1 = require("molstar/lib/extensions/mvs/components/selector");
+const custom_structure_property_1 = require("molstar/lib/mol-model-props/common/custom-structure-property");
+const custom_property_1 = require("molstar/lib/mol-model/custom-property");
+const color_1 = require("molstar/lib/mol-util/color");
+const names_1 = require("molstar/lib/mol-util/color/names");
+const param_definition_1 = require("molstar/lib/mol-util/param-definition");
+var SequenceColorProperty;
+(function (SequenceColorProperty) {
+    SequenceColorProperty.Params = {
+        colors: param_definition_1.ParamDefinition.ObjectList({
+            color: param_definition_1.ParamDefinition.Color(names_1.ColorNames.grey, { description: 'Color to apply to a substructure' }),
+            selector: selector_1.SelectorParams,
+        }, obj => color_1.Color.toHexStyle(obj.color), { description: 'List of substructure-color assignments' }),
+    };
+    /** Provider for custom structure property `SequenceColorProperty` */
+    SequenceColorProperty.Provider = custom_structure_property_1.CustomStructureProperty.createProvider({
+        label: 'Sequence Color',
+        descriptor: (0, custom_property_1.CustomPropertyDescriptor)({
+            name: 'sequence-color',
+        }),
+        type: 'root',
+        defaultParams: SequenceColorProperty.Params,
+        getParams: (data) => SequenceColorProperty.Params,
+        isApplicable: (data) => data.root === data,
+        obtain: (ctx, data, props) => tslib_1.__awaiter(this, void 0, void 0, function* () {
+            const fullProps = Object.assign(Object.assign({}, param_definition_1.ParamDefinition.getDefaultValues(SequenceColorProperty.Params)), props);
+            const items = fullProps.colors.map(t => ({
+                selector: t.selector,
+                color: t.color,
+            }));
+            return { value: { items, colorCache: {} } };
+        }),
+    });
+})(SequenceColorProperty || (exports.SequenceColorProperty = SequenceColorProperty = {}));

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/superposition.d.ts

@@ -8,8 +8,8 @@ import { ClusterMember } from './plugin-custom-state';
 export declare const SuperpositionColorPalette: ColorListEntry[];
 export declare function getNextColor(plugin: PluginContext, segmentIndex: number): ColorListEntry;
 export declare function initSuperposition(plugin: PluginContext, completeSubject?: Subject<boolean>): Promise<void>;
-export declare function loadAfStructure(plugin: PluginContext): Promise<string | false>;
-export declare function superposeAf(plugin: PluginContext, traceOnly: boolean, segmentIndex?: number): Promise<true | undefined>;
+export declare function loadAfStructure(plugin: PluginContext): Promise<string | undefined>;
+export declare function superposeAf(plugin: PluginContext, traceOnly: boolean): Promise<boolean>;
 export declare function renderSuperposition(plugin: PluginContext, segmentIndex: number, entryList: ClusterMember[]): Promise<void>;
 /** Apply tranformation to a structure. Only use once per structure, combining multiple transformations is not implemented. */
 export declare function transform(plugin: PluginContext, s: StateObjectRef<PSO.Molecule.Structure>, matrix: Mat4): Promise<StateObjectSelector<PSO.Molecule.Structure, import("molstar/lib/mol-state").StateTransformer<import("molstar/lib/mol-state").StateObject<any, import("molstar/lib/mol-state").StateObject.Type<any>>, import("molstar/lib/mol-state").StateObject<any, import("molstar/lib/mol-state").StateObject.Type<any>>, any>>>;