pdbe-molstar 3.4.0 → 3.5.0

package/lib/extensions/interactions/index.js

@@ -0,0 +1,112 @@
+"use strict";
+/** Helper functions to allow showing custom atom interactions */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.loadInteractions_example = loadInteractions_example;
+exports.loadInteractions = loadInteractions;
+exports.clearInteractions = clearInteractions;
+const tslib_1 = require("tslib");
+const primitives_1 = require("molstar/lib/extensions/mvs/components/primitives");
+const mvs_data_1 = require("molstar/lib/extensions/mvs/mvs-data");
+const representation_1 = require("molstar/lib/mol-plugin-state/transforms/representation");
+const state_1 = require("molstar/lib/mol-plugin/behavior/static/state");
+const __1 = require("../..");
+const helpers_1 = require("../../helpers");
+const plugin_custom_state_1 = require("../../plugin-custom-state");
+/** Name used when registering extension, custom state, etc. */
+const InteractionsExtensionName = 'pdbe-custom-interactions';
+const getExtensionCustomState = plugin_custom_state_1.ExtensionCustomState.getter(InteractionsExtensionName);
+const DEFAULT_COLOR = 'white';
+const DEFAULT_RADIUS = 0.075;
+const DEFAULT_DASH_LENGTH = 0.1;
+const DEFAULT_OPACITY = 1;
+function loadInteractions_example(viewer, params) {
+    return loadInteractions(viewer, Object.assign(Object.assign({}, params), { interactions: exampleData }));
+}
+/** Show custom atom interactions */
+function loadInteractions(viewer, params) {
+    return tslib_1.__awaiter(this, void 0, void 0, function* () {
+        var _a, _b;
+        var _c;
+        const structureId = (_a = params.structureId) !== null && _a !== void 0 ? _a : __1.PDBeMolstarPlugin.MAIN_STRUCTURE_ID;
+        const struct = viewer.getStructure(structureId);
+        if (!struct)
+            throw new Error(`Did not find structure with ID "${structureId}"`);
+        const primitivesMvsNode = interactionsToMvsPrimitiveData(params);
+        const update = viewer.plugin.build();
+        const data = update.to(struct.cell).apply(primitives_1.MVSInlinePrimitiveData, { node: primitivesMvsNode }, { tags: ['custom-interactions-data'] });
+        data.apply(primitives_1.MVSBuildPrimitiveShape, { kind: 'mesh' }).apply(representation_1.ShapeRepresentation3D, {}, { tags: ['custom-interactions-mesh'] });
+        data.apply(primitives_1.MVSBuildPrimitiveShape, { kind: 'lines' }).apply(representation_1.ShapeRepresentation3D, {}, { tags: ['custom-interactions-lines'] });
+        data.apply(primitives_1.MVSBuildPrimitiveShape, { kind: 'labels' }).apply(representation_1.ShapeRepresentation3D, {}, { tags: ['custom-interactions-labels'] });
+        yield update.commit();
+        const visual = {
+            ref: data.ref,
+            setVisibility: (visible) => (0, state_1.setSubtreeVisibility)(viewer.plugin.state.data, data.ref, !visible /* true means hidden */),
+            delete: () => viewer.plugin.build().delete(data.ref).commit(),
+        };
+        const visualsList = (_b = (_c = getExtensionCustomState(viewer.plugin)).visuals) !== null && _b !== void 0 ? _b : (_c.visuals = []);
+        visualsList.push(visual);
+        return visual;
+    });
+}
+/** Remove any previously added interactions */
+function clearInteractions(viewer) {
+    return tslib_1.__awaiter(this, void 0, void 0, function* () {
+        const visuals = getExtensionCustomState(viewer.plugin).visuals;
+        if (!visuals)
+            return;
+        for (const visual of visuals) {
+            yield visual.delete();
+        }
+        visuals.length = 0;
+    });
+}
+function interactionsToMvsPrimitiveData(params) {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const builder = mvs_data_1.MVSData.createBuilder();
+    const primitives = builder.primitives({
+        opacity: (_a = params.opacity) !== null && _a !== void 0 ? _a : DEFAULT_OPACITY,
+        color: (_b = params.color) !== null && _b !== void 0 ? _b : DEFAULT_COLOR,
+    });
+    for (const interaction of params.interactions) {
+        primitives.tube({
+            start: { expressions: (0, helpers_1.queryParamsToMvsComponentExpressions)([interaction.start]) },
+            end: { expressions: (0, helpers_1.queryParamsToMvsComponentExpressions)([interaction.end]) },
+            radius: (_d = (_c = interaction.radius) !== null && _c !== void 0 ? _c : params.radius) !== null && _d !== void 0 ? _d : DEFAULT_RADIUS,
+            dash_length: (_f = (_e = interaction.dash_length) !== null && _e !== void 0 ? _e : params.dash_length) !== null && _f !== void 0 ? _f : DEFAULT_DASH_LENGTH,
+            color: interaction.color,
+            tooltip: interaction.tooltip,
+        });
+    }
+    const state = builder.getState();
+    const primitivesNode = (_g = state.root.children) === null || _g === void 0 ? void 0 : _g.find(child => child.kind === 'primitives');
+    if (!primitivesNode)
+        throw new Error('AssertionError: Failed to create MVS "primitives" subtree.');
+    return primitivesNode;
+}
+/** Selected interactions from https://www.ebi.ac.uk/pdbe/graph-api/pdb/bound_ligand_interactions/1hda/C/143 */
+const exampleData = [
+    {
+        'start': { 'auth_asym_id': 'C', 'auth_seq_id': 143, 'atoms': ['CBC'] },
+        'end': { 'auth_asym_id': 'C', 'auth_seq_id': 32, 'atoms': ['CE'] },
+        'color': 'yellow',
+        'tooltip': '<strong>Hydrophobic interaction</strong><br>HEM 143 | CBC — MET 32 | CE',
+    },
+    {
+        'start': { 'auth_asym_id': 'C', 'auth_seq_id': 143, 'atoms': ['CBC'] },
+        'end': { 'auth_asym_id': 'C', 'auth_seq_id': 32, 'atoms': ['SD'] },
+        'color': 'yellow',
+        'tooltip': '<strong>Hydrophobic interaction</strong><br>HEM 143 | CBC — MET 32 | SD',
+    },
+    {
+        'start': { 'auth_asym_id': 'C', 'auth_seq_id': 143, 'atoms': ['CMD'] },
+        'end': { 'auth_asym_id': 'C', 'auth_seq_id': 42, 'atoms': ['O'] },
+        'color': 'gray',
+        'tooltip': '<strong>Mixed interaction</strong><br>Vdw, Weak polar<br>HEM 143 | CMD — TYR 42 | O',
+    },
+    {
+        'start': { 'auth_asym_id': 'C', 'auth_seq_id': 143, 'atoms': ['C1B', 'C2B', 'C3B', 'C4B', 'NB'] },
+        'end': { 'auth_asym_id': 'C', 'auth_seq_id': 136, 'atoms': ['CD1'] },
+        'color': 'magenta',
+        'tooltip': '<strong>CARBONPI interaction</strong><br>HEM 143 | C1B, C2B, C3B, C4B, NB — LEU 136 | CD1',
+    },
+];

package/lib/extensions/state-gallery/behavior.d.ts

@@ -19,7 +19,7 @@ export interface StateGalleryParams {
     showTitleBox: boolean;
 }
 /** `StateGallery` extension allows browsing pre-computed 3D states for a PDB entry */
-export declare const StateGallery: import("molstar/lib/mol-state/transformer").StateTransformer<PluginBehavior.Category, PluginBehavior.Behavior, StateGalleryParams>;
+export declare const StateGallery: import("molstar/lib/mol-state").StateTransformer<PluginBehavior.Category, PluginBehavior.Behavior, StateGalleryParams>;
 /** Public functions provided by the `StateGallery` extension  */
 export declare const StateGalleryExtensionFunctions: {
     StateGalleryManager: typeof StateGalleryManager;

package/lib/extensions/state-gallery/config.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getStateGalleryConfig = exports.StateGalleryConfig = exports.StateGalleryConfigDefaults = void 0;
+exports.StateGalleryConfig = exports.StateGalleryConfigDefaults = void 0;
+exports.getStateGalleryConfig = getStateGalleryConfig;
 const config_1 = require("molstar/lib/mol-plugin/config");
 const helpers_1 = require("../../helpers");
 /** Default values of plugin config items for the `StateGallery` extension */
@@ -28,4 +29,3 @@ exports.StateGalleryConfig = {
 function getStateGalleryConfig(plugin) {
     return helpers_1.PluginConfigUtils.getConfigValues(plugin, exports.StateGalleryConfig, exports.StateGalleryConfigDefaults);
 }
-exports.getStateGalleryConfig = getStateGalleryConfig;

package/lib/extensions/state-gallery/manager.js

@@ -12,6 +12,7 @@ const helpers_1 = require("../../helpers");
 const behavior_1 = require("./behavior");
 const config_1 = require("./config");
 const titles_1 = require("./titles");
+const string_like_1 = require("molstar/lib/mol-io/common/string-like");
 /** Categories of images/states */
 exports.ImageCategory = ['Entry', 'Assemblies', 'Entities', 'Ligands', 'Modified residues', 'Domains', 'Miscellaneous'];
 /** Provides functionality to get list of images (3D states) for an entry, load individual images, keeps track of the currently loaded image.
@@ -99,8 +100,8 @@ class StateGalleryManager {
     }
     /** Request to load an image (3D state). When there are multiple concurrent requests, some requests may be skipped (will resolve to `{ status: 'cancelled' }` or `{ status: 'skipped' }`) as only the last request is really important. */
     load(img) {
-        var _a;
         return tslib_1.__awaiter(this, void 0, void 0, function* () {
+            var _a;
             if (typeof img === 'string') {
                 img = (_a = this.getImageByFilename(img)) !== null && _a !== void 0 ? _a : { filename: img };
             }
@@ -151,14 +152,14 @@ class StateGalleryManager {
         return tslib_1.__awaiter(this, void 0, void 0, function* () {
             const url = (0, helpers_1.combineUrl)(this.options.ServerUrl, `${filename}.molj`);
             const data = yield this.plugin.runTask(this.plugin.fetch({ url, type: 'string' }));
-            return data;
+            return string_like_1.StringLike.toString(data);
         });
     }
     /** Get MOLJ state for the image (get from cache or fetch from API) */
     getSnapshot(filename) {
-        var _a;
-        var _b;
         return tslib_1.__awaiter(this, void 0, void 0, function* () {
+            var _a;
+            var _b;
             return (_a = (_b = this.cache)[filename]) !== null && _a !== void 0 ? _a : (_b[filename] = yield this.fetchSnapshot(filename));
         });
     }

package/lib/extensions/state-gallery/ui.js

@@ -1,6 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StateGalleryTitleBox = exports.StateGalleryManagerControls = exports.StateGalleryControls = void 0;
+exports.StateGalleryControls = void 0;
+exports.StateGalleryManagerControls = StateGalleryManagerControls;
+exports.StateGalleryTitleBox = StateGalleryTitleBox;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const base_1 = require("molstar/lib/mol-plugin-ui/base");
@@ -69,7 +71,7 @@ class StateGalleryControls extends base_1.CollapsableControls {
     }
     renderControls() {
         return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(parameters_1.ParameterControls, { params: Params, values: this.values, onChangeValues: this.onChangeValues, onEnter: this.load }), (!this.state.manager || this.state.manager.entryId !== this.state.entryId) &&
-                    (0, jsx_runtime_1.jsx)(common_1.Button, Object.assign({ icon: this.state.isLoading ? undefined : icons_1.CheckSvg, title: 'Load', disabled: this.loadDisabled(), onClick: this.load, className: 'msp-btn-block' }, { children: this.state.isLoading ? 'Loading...' : 'Load' })), this.state.manager &&
+                    (0, jsx_runtime_1.jsx)(common_1.Button, { icon: this.state.isLoading ? undefined : icons_1.CheckSvg, title: 'Load', disabled: this.loadDisabled(), onClick: this.load, className: 'msp-btn-block', children: this.state.isLoading ? 'Loading...' : 'Load' }), this.state.manager &&
                     (0, jsx_runtime_1.jsx)(StateGalleryManagerControls, { manager: this.state.manager })] });
     }
 }
@@ -102,21 +104,20 @@ function StateGalleryManagerControls(props) {
         return () => subs.forEach(sub => sub.unsubscribe());
     }, [props.manager]);
     if (nImages === 0) {
-        return (0, jsx_runtime_1.jsxs)("div", Object.assign({ style: { margin: 8 } }, { children: ["No data available for ", props.manager.entryId, "."] }));
+        return (0, jsx_runtime_1.jsxs)("div", { style: { margin: 8 }, children: ["No data available for ", props.manager.entryId, "."] });
     }
-    return (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'pdbemolstar-state-gallery-controls', onKeyDown: handleKeyDown, tabIndex: -1, ref: keyDownTargetRef }, { children: [(0, jsx_runtime_1.jsx)(common_1.ExpandGroup, Object.assign({ header: 'States', initiallyExpanded: true }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ style: { marginBottom: 8 } }, { children: categories.groups.map(cat => {
+    return (0, jsx_runtime_1.jsxs)("div", { className: 'pdbemolstar-state-gallery-controls', onKeyDown: handleKeyDown, tabIndex: -1, ref: keyDownTargetRef, children: [(0, jsx_runtime_1.jsx)(common_1.ExpandGroup, { header: 'States', initiallyExpanded: true, children: (0, jsx_runtime_1.jsx)("div", { style: { marginBottom: 8 }, children: categories.groups.map(cat => {
                         var _a;
-                        return (0, jsx_runtime_1.jsx)(common_1.ExpandGroup, Object.assign({ header: cat, initiallyExpanded: true }, { children: (_a = categories.members.get(cat)) === null || _a === void 0 ? void 0 : _a.map(img => (0, jsx_runtime_1.jsx)(ImageButton, { img: img, isSelected: img === selected, status: status, onClick: () => props.manager.load(img) }, img.filename)) }), cat);
-                    }) })) }), 'states'), (0, jsx_runtime_1.jsx)(common_1.ExpandGroup, Object.assign({ header: 'Description', initiallyExpanded: true }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'pdbemolstar-state-gallery-legend' }, { children: (0, jsx_runtime_1.jsx)("div", { dangerouslySetInnerHTML: { __html: (_a = selected === null || selected === void 0 ? void 0 : selected.description) !== null && _a !== void 0 ? _a : '' } }) })) }), 'description')] }));
+                        return (0, jsx_runtime_1.jsx)(common_1.ExpandGroup, { header: cat, initiallyExpanded: true, children: (_a = categories.members.get(cat)) === null || _a === void 0 ? void 0 : _a.map(img => (0, jsx_runtime_1.jsx)(ImageButton, { img: img, isSelected: img === selected, status: status, onClick: () => props.manager.load(img) }, img.filename)) }, cat);
+                    }) }) }, 'states'), (0, jsx_runtime_1.jsx)(common_1.ExpandGroup, { header: 'Description', initiallyExpanded: true, children: (0, jsx_runtime_1.jsx)("div", { className: 'pdbemolstar-state-gallery-legend', children: (0, jsx_runtime_1.jsx)("div", { dangerouslySetInnerHTML: { __html: (_a = selected === null || selected === void 0 ? void 0 : selected.description) !== null && _a !== void 0 ? _a : '' } }) }) }, 'description')] });
 }
-exports.StateGalleryManagerControls = StateGalleryManagerControls;
 /** Button with image title */
 function ImageButton(props) {
     var _a;
     const { img, isSelected, status, onClick } = props;
     const icon = !isSelected ? icons_2.EmptyIconSvg : (status === 'loading') ? icons_2.HourglassBottomSvg : (status === 'error') ? icons_1.ErrorSvg : icons_1.CheckSvg;
     const tooltip = imageTooltip(img, isSelected ? status : 'ready');
-    return (0, jsx_runtime_1.jsxs)(common_1.Button, Object.assign({ className: 'msp-action-menu-button pdbemolstar-state-gallery-state-button', icon: icon, onClick: onClick, title: tooltip, style: { fontWeight: isSelected ? 'bold' : undefined } }, { children: [(_a = img.title) !== null && _a !== void 0 ? _a : img.filename, img.subtitle && (0, jsx_runtime_1.jsxs)("small", { children: ["\u2002 ", img.subtitle] })] }));
+    return (0, jsx_runtime_1.jsxs)(common_1.Button, { className: 'msp-action-menu-button pdbemolstar-state-gallery-state-button', icon: icon, onClick: onClick, title: tooltip, style: { fontWeight: isSelected ? 'bold' : undefined }, children: [(_a = img.title) !== null && _a !== void 0 ? _a : img.filename, img.subtitle && (0, jsx_runtime_1.jsxs)("small", { children: ["\u2002 ", img.subtitle] })] });
 }
 /** Box in viewport with image title and arrows to move between images (3D states) */
 function StateGalleryTitleBox() {
@@ -147,11 +148,10 @@ function StateGalleryTitleBox() {
     }, [plugin]);
     if (image === undefined)
         return null;
-    return (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'pdbemolstar-state-gallery-title-box' }, { children: [manager &&
-                (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(common_1.Button, { className: 'msp-btn-icon', title: 'Previous state', icon: icons_2.ChevronLeftSvg, onClick: () => manager.loadPrevious() }) }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'pdbemolstar-state-gallery-title', title: imageTooltip(image, status) }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'pdbemolstar-state-gallery-title-icon' }, { children: (0, jsx_runtime_1.jsx)(icons_1.Icon, { svg: status === 'error' ? icons_1.ErrorSvg : status === 'loading' ? icons_2.HourglassBottomSvg : icons_2.EmptyIconSvg }) })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'pdbemolstar-state-gallery-title-text' }, { children: [(_a = image.title) !== null && _a !== void 0 ? _a : image.filename, (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("small", { children: image.subtitle })] }))] })), manager &&
-                (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(common_1.Button, { className: 'msp-btn-icon', title: 'Next state', icon: icons_2.ChevronRightSvg, onClick: () => manager === null || manager === void 0 ? void 0 : manager.loadNext() }) })] }));
+    return (0, jsx_runtime_1.jsxs)("div", { className: 'pdbemolstar-state-gallery-title-box', children: [manager &&
+                (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(common_1.Button, { className: 'msp-btn-icon', title: 'Previous state', icon: icons_2.ChevronLeftSvg, onClick: () => manager.loadPrevious() }) }), (0, jsx_runtime_1.jsxs)("div", { className: 'pdbemolstar-state-gallery-title', title: imageTooltip(image, status), children: [(0, jsx_runtime_1.jsx)("div", { className: 'pdbemolstar-state-gallery-title-icon', children: (0, jsx_runtime_1.jsx)(icons_1.Icon, { svg: status === 'error' ? icons_1.ErrorSvg : status === 'loading' ? icons_2.HourglassBottomSvg : icons_2.EmptyIconSvg }) }), (0, jsx_runtime_1.jsxs)("div", { className: 'pdbemolstar-state-gallery-title-text', children: [(_a = image.title) !== null && _a !== void 0 ? _a : image.filename, (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("small", { children: image.subtitle })] })] }), manager &&
+                (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(common_1.Button, { className: 'msp-btn-icon', title: 'Next state', icon: icons_2.ChevronRightSvg, onClick: () => manager === null || manager === void 0 ? void 0 : manager.loadNext() }) })] });
 }
-exports.StateGalleryTitleBox = StateGalleryTitleBox;
 /** Return tooltip text for an image */
 function imageTooltip(img, status) {
     var _a;

package/lib/helpers.d.ts

@@ -1,3 +1,4 @@
+import { ComponentExpressionT } from 'molstar/lib/extensions/mvs/tree/mvs/param-types';
 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';
@@ -76,7 +77,9 @@ export interface QueryParam {
     representationColor?: any;
     focus?: boolean;
     tooltip?: string;
+    /** @deprecated I don't know what this is */
     start?: any;
+    /** @deprecated I don't know what this is */
     end?: any;
     atom_id?: number[];
     uniprot_accession?: string;
@@ -84,6 +87,7 @@ export interface QueryParam {
     start_uniprot_residue_number?: number;
     end_uniprot_residue_number?: number;
 }
+export declare function queryParamsToMvsComponentExpressions(params: QueryParam[]): ComponentExpressionT[];
 export declare namespace QueryHelper {
     function getQueryObject(params: QueryParam[], contextData: Structure): Expression;
     function getInteractivityLoci(params: QueryParam[], contextData: Structure): import("molstar/lib/mol-model/structure/structure/element/loci").Loci;

package/lib/helpers.js

@@ -1,6 +1,18 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PluginConfigUtils = exports.PreemptiveQueue = exports.nonnegativeModulo = exports.createIndex = exports.groupElements = exports.distinct = exports.getComponentTypeFromTags = exports.StructureComponentTags = exports.Tags = exports.applyOverpaint = exports.normalizeColor = exports.addDefaults = exports.combineUrl = exports.getStructureUrl = exports.runWithProgressMessage = exports.ModelInfo = exports.QueryHelper = exports.LigandView = exports.AlphafoldView = exports.PDBeVolumes = void 0;
+exports.PluginConfigUtils = exports.PreemptiveQueue = exports.StructureComponentTags = exports.Tags = exports.ModelInfo = exports.QueryHelper = exports.LigandView = exports.AlphafoldView = exports.PDBeVolumes = void 0;
+exports.queryParamsToMvsComponentExpressions = queryParamsToMvsComponentExpressions;
+exports.runWithProgressMessage = runWithProgressMessage;
+exports.getStructureUrl = getStructureUrl;
+exports.combineUrl = combineUrl;
+exports.addDefaults = addDefaults;
+exports.normalizeColor = normalizeColor;
+exports.applyOverpaint = applyOverpaint;
+exports.getComponentTypeFromTags = getComponentTypeFromTags;
+exports.distinct = distinct;
+exports.groupElements = groupElements;
+exports.createIndex = createIndex;
+exports.nonnegativeModulo = nonnegativeModulo;
 const tslib_1 = require("tslib");
 const prop_1 = require("molstar/lib/extensions/model-archive/quality-assessment/prop");
 const structure_1 = require("molstar/lib/mol-model/structure");
@@ -50,7 +62,7 @@ var PDBeVolumes;
         }
     }
     PDBeVolumes.toggle = toggle;
-})(PDBeVolumes = exports.PDBeVolumes || (exports.PDBeVolumes = {}));
+})(PDBeVolumes || (exports.PDBeVolumes = PDBeVolumes = {}));
 var AlphafoldView;
 (function (AlphafoldView) {
     function getLociByPLDDT(score, contextData) {
@@ -69,7 +81,7 @@ var AlphafoldView;
         return structure_1.StructureSelection.toLociWithSourceUnits(sel);
     }
     AlphafoldView.getLociByPLDDT = getLociByPLDDT;
-})(AlphafoldView = exports.AlphafoldView || (exports.AlphafoldView = {}));
+})(AlphafoldView || (exports.AlphafoldView = AlphafoldView = {}));
 var LigandView;
 (function (LigandView) {
     function query(ligandViewParams) {
@@ -134,7 +146,53 @@ var LigandView;
         };
     }
     LigandView.branchedQuery = branchedQuery;
-})(LigandView = exports.LigandView || (exports.LigandView = {}));
+})(LigandView || (exports.LigandView = LigandView = {}));
+function queryParamsToMvsComponentExpressions(params) {
+    const broadcasted = broadcast(params, ['atoms', 'atom_id']);
+    return broadcasted.map(item => {
+        var _a;
+        return ({
+            label_entity_id: item.entity_id,
+            label_asym_id: item.struct_asym_id,
+            auth_asym_id: item.auth_asym_id,
+            label_seq_id: item.residue_number,
+            auth_seq_id: (_a = item.auth_seq_id) !== null && _a !== void 0 ? _a : item.auth_residue_number,
+            pdbx_PDB_ins_code: item.auth_ins_code_id,
+            beg_label_seq_id: item.start_residue_number,
+            end_label_seq_id: item.end_residue_number,
+            beg_auth_seq_id: item.start_auth_residue_number,
+            end_auth_seq_id: item.end_auth_residue_number,
+            label_atom_id: item.atoms,
+            auth_atom_id: undefined,
+            type_symbol: undefined,
+            atom_id: item.atom_id,
+            atom_index: undefined,
+            label_comp_id: item.label_comp_id,
+            auth_comp_id: undefined,
+        });
+    });
+}
+/** `broadcastSingleKey([{chain: 'A', residue: 5, atom: ['C', 'O']}], 'atom')`
+ * -> `[{chain: 'A', residue: 5, atom: 'C'}], {chain: 'A', residue: 5, atom: 'O'}` */
+function broadcastSingleKey(objs, key) {
+    const out = [];
+    for (const obj of objs) {
+        if (obj[key] === undefined) {
+            out.push(obj);
+        }
+        else {
+            for (const value of obj[key]) {
+                out.push(Object.assign(Object.assign({}, obj), { [key]: value }));
+            }
+        }
+    }
+    return out;
+}
+/** `broadcast([{chain: 'A', residue: [5, 6], atom: ['C', 'O']}], ['residue', 'atom'])`
+ * -> `[{chain: 'A', residue: 5, atom: 'C'}], {chain: 'A', residue: 5, atom: 'O', {chain: 'A', residue: 6, atom: 'C'}], {chain: 'A', residue: 6, atom: 'O'}` */
+function broadcast(objs, keys) {
+    return keys.reduce((list, key) => broadcastSingleKey(list, key), objs);
+}
 var QueryHelper;
 (function (QueryHelper) {
     function getQueryObject(params, contextData) {
@@ -154,6 +212,7 @@ var QueryHelper;
                 selection['chainTest'] = 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;
             }
@@ -197,6 +256,7 @@ var QueryHelper;
             }
             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
             }
             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 => {
@@ -234,7 +294,7 @@ var QueryHelper;
         return structure_1.StructureSelection.toLociWithSourceUnits(sel);
     }
     QueryHelper.getHetLoci = getHetLoci;
-})(QueryHelper = exports.QueryHelper || (exports.QueryHelper = {}));
+})(QueryHelper || (exports.QueryHelper = QueryHelper = {}));
 var ModelInfo;
 (function (ModelInfo) {
     function get(model, structures) {
@@ -267,7 +327,7 @@ var ModelInfo;
         });
     }
     ModelInfo.get = get;
-})(ModelInfo = exports.ModelInfo || (exports.ModelInfo = {}));
+})(ModelInfo || (exports.ModelInfo = ModelInfo = {}));
 /** Run `action` with showing a message in the bottom-left corner of the plugin UI */
 function runWithProgressMessage(plugin, progressMessage, action) {
     return tslib_1.__awaiter(this, void 0, void 0, function* () {
@@ -287,7 +347,6 @@ function runWithProgressMessage(plugin, progressMessage, action) {
         yield plugin.runTask(task);
     });
 }
-exports.runWithProgressMessage = runWithProgressMessage;
 /** Return URL for a ModelServer request.
  * If `queryType` is 'full' and `lowPrecisionCoords` is false, return URL of the static file instead (updated mmCIF or bCIF). */
 function getStructureUrl(initParams, request) {
@@ -304,7 +363,6 @@ function getStructureUrl(initParams, request) {
         return (queryString !== '') ? `${url}?${queryString}` : url;
     }
 }
-exports.getStructureUrl = getStructureUrl;
 /** Combine URL parts into one URL while avoiding double slashes. Examples:
  * combineUrl('https://example.org', '1tqn') -> 'https://example.org/1tqn';
  * combineUrl('https://example.org/', '1tqn') -> 'https://example.org/1tqn'; */
@@ -315,7 +373,6 @@ function combineUrl(firstPart, ...moreParts) {
     }
     return result;
 }
-exports.combineUrl = combineUrl;
 /** Create a copy of object `object`, fill in missing/undefined keys using `defaults`.
  * This is similar to {...defaults,...object} but `undefined` in `object` will not override a value from `defaults`. */
 function addDefaults(object, defaults) {
@@ -326,7 +383,6 @@ function addDefaults(object, defaults) {
     }
     return result;
 }
-exports.addDefaults = addDefaults;
 /** Convert `colorVal` from any of supported color formats (e.g. 'yellow', '#ffff00', {r:255,g:255,b:0}) to `Color`.
  * Return default color (gray) if `colorVal` is undefined or null.
 */
@@ -349,12 +405,11 @@ function normalizeColor(colorVal, defaultColor = color_1.Color.fromRgb(170, 170,
     }
     return defaultColor;
 }
-exports.normalizeColor = normalizeColor;
 /** Apply overpaint to every representation of every component in a structure.
  * Excludes representations created as "added representations" by `PDBeMolstarPlugin.visual.select`. */
 function applyOverpaint(plugin, structRef, overpaintLayers) {
-    var _a;
     return tslib_1.__awaiter(this, void 0, void 0, function* () {
+        var _a;
         if (overpaintLayers.length === 0)
             return;
         const update = plugin.build();
@@ -378,7 +433,6 @@ function applyOverpaint(plugin, structRef, overpaintLayers) {
         yield update.commit();
     });
 }
-exports.applyOverpaint = applyOverpaint;
 exports.Tags = {
     /** Tag needed for `clearStructureOverpaint`; defined in src/mol-plugin-state/helpers/structure-overpaint.ts but private */
     Overpaint: 'overpaint-controls',
@@ -405,7 +459,6 @@ function getComponentTypeFromTags(tags) {
     }
     return undefined;
 }
-exports.getComponentTypeFromTags = getComponentTypeFromTags;
 /** Return a new array containing `values` without duplicates (only first occurrence will be kept).
  * Values v1, v2 are considered duplicates when `key(v1)===key(v2)`. */
 function distinct(values, key = (value => value)) {
@@ -420,7 +473,6 @@ function distinct(values, key = (value => value)) {
     }
     return out;
 }
-exports.distinct = distinct;
 /** Group elements by result of `groupFunction` applied to them */
 function groupElements(elements, groupFunction) {
     const groups = [];
@@ -442,20 +494,17 @@ function groupElements(elements, groupFunction) {
         members,
     };
 }
-exports.groupElements = groupElements;
 /** Return a mapping of elements to their index in the `elements` array */
 function createIndex(elements) {
     const index = new Map();
     elements.forEach((elem, i) => index.set(elem, i));
     return index;
 }
-exports.createIndex = createIndex;
 /** Return modulo of two numbers (a % b) within range [0, b) */
 function nonnegativeModulo(a, b) {
     const modulo = a % b;
     return (modulo < 0) ? modulo + b : modulo;
 }
-exports.nonnegativeModulo = nonnegativeModulo;
 /** Queue for running jobs where enqueued jobs get discarded when a new job is enqueued.
  * (Discarded jobs may or may not actually be executed, but their result is not accessible anyway.) */
 class PreemptiveQueue {
@@ -520,4 +569,4 @@ var PluginConfigUtils;
         return values;
     }
     PluginConfigUtils.getConfigValues = getConfigValues;
-})(PluginConfigUtils = exports.PluginConfigUtils || (exports.PluginConfigUtils = {}));
+})(PluginConfigUtils || (exports.PluginConfigUtils = PluginConfigUtils = {}));

package/lib/labels.d.ts

@@ -1,2 +1,2 @@
 import { PluginBehavior } from 'molstar/lib/mol-plugin/behavior';
-export declare const PDBeLociLabelProvider: import("molstar/lib/mol-state/transformer").StateTransformer<PluginBehavior.Category, PluginBehavior.Behavior, {}>;
+export declare const PDBeLociLabelProvider: import("molstar/lib/mol-state").StateTransformer<PluginBehavior.Category, PluginBehavior.Behavior, {}>;

package/lib/loci-details.js

@@ -1,6 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports._bundleLabel = exports.bondLabel = exports.lociDetails = void 0;
+exports.lociDetails = lociDetails;
+exports.bondLabel = bondLabel;
+exports._bundleLabel = _bundleLabel;
 const int_1 = require("molstar/lib/mol-data/int");
 const sifts_mapping_1 = require("molstar/lib/mol-model-props/sequence/sifts-mapping");
 const structure_1 = require("molstar/lib/mol-model/structure");
@@ -12,13 +14,12 @@ function lociDetails(loci) {
             return structureElementStatsDetail(structure_1.StructureElement.Stats.ofLoci(loci));
         case 'bond-loci': {
             const bond = loci.bonds[0];
-            return bond ? bondLabel(bond, 'element') : '';
+            return bond ? bondLabel(bond, 'element') : {};
         }
         default:
             return undefined;
     }
 }
-exports.lociDetails = lociDetails;
 function structureElementStatsDetail(stats) {
     const { chainCount, residueCount, elementCount } = stats;
     if (elementCount === 1 && residueCount === 0 && chainCount === 0) {
@@ -100,7 +101,6 @@ function bondLabel(bond, granularity) {
         ],
     }, granularity);
 }
-exports.bondLabel = bondLabel;
 function _bundleLabel(bundle, granularity) {
     let isSingleElements = true;
     for (const l of bundle.loci) {
@@ -125,4 +125,3 @@ function _bundleLabel(bundle, granularity) {
         return elementDetails;
     }
 }
-exports._bundleLabel = _bundleLabel;

package/lib/plugin-custom-state.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PluginCustomControls = exports.ExtensionCustomState = exports.PluginCustomState = void 0;
+exports.PluginCustomControls = exports.ExtensionCustomState = void 0;
+exports.PluginCustomState = PluginCustomState;
 ;
 ;
 /** Access `plugin.customState` only through this function to get proper typing.
@@ -9,7 +10,6 @@ function PluginCustomState(plugin) {
     var _a;
     return (_a = plugin.customState) !== null && _a !== void 0 ? _a : (plugin.customState = {});
 }
-exports.PluginCustomState = PluginCustomState;
 /** Functions for accessing plugin-bound custom state for extensions. */
 exports.ExtensionCustomState = {
     /** Get plugin-bound custom state for a specific extension. If not present, initialize with empty object. */

package/lib/sifts-mapping.js

@@ -77,5 +77,4 @@ var SIFTSMapping;
         }
         return { dbName, accession, num, residue };
     }
-})(SIFTSMapping || (SIFTSMapping = {}));
-exports.SIFTSMapping = SIFTSMapping;
+})(SIFTSMapping || (exports.SIFTSMapping = SIFTSMapping = {}));

package/lib/sifts-mappings-behaviour.d.ts

@@ -1,5 +1,5 @@
 import { PluginBehavior } from 'molstar/lib/mol-plugin/behavior';
-export declare const PDBeSIFTSMapping: import("molstar/lib/mol-state/transformer").StateTransformer<PluginBehavior.Category, PluginBehavior.Behavior, {
+export declare const PDBeSIFTSMapping: import("molstar/lib/mol-state").StateTransformer<PluginBehavior.Category, PluginBehavior.Behavior, {
     autoAttach: boolean;
     showTooltip: boolean;
 }>;

package/lib/spec-from-html.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.initParamsFromHtmlAttributes = void 0;
+exports.initParamsFromHtmlAttributes = initParamsFromHtmlAttributes;
 const spec_1 = require("./spec");
 /** Extract InitParams from attributes of an HTML element */
 function initParamsFromHtmlAttributes(element) {
@@ -10,7 +10,6 @@ function initParamsFromHtmlAttributes(element) {
         console.error('Invalid PDBeMolstarPlugin options:', params);
     return params;
 }
-exports.initParamsFromHtmlAttributes = initParamsFromHtmlAttributes;
 /** Actions for loading individual HTML attributes into InitParams object */
 const InitParamsLoadingActions = {
     // DATA

package/lib/spec.js

@@ -1,6 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.validateInitParams = exports.DefaultParams = exports.Encoding = exports.resolveVisualStyleSpec = exports.VisualStyle = exports.ComponentType = exports.Lighting = exports.Preset = exports.DefaultPluginUISpec = exports.DefaultPluginSpec = void 0;
+exports.DefaultParams = exports.Encoding = exports.VisualStyle = exports.ComponentType = exports.Lighting = exports.Preset = exports.DefaultPluginUISpec = exports.DefaultPluginSpec = void 0;
+exports.resolveVisualStyleSpec = resolveVisualStyleSpec;
+exports.validateInitParams = validateInitParams;
 const actions_1 = require("molstar/lib/mol-plugin-state/actions");
 const volume_1 = require("molstar/lib/mol-plugin-ui/custom/volume");
 const behavior_1 = require("molstar/lib/mol-plugin/behavior");
@@ -56,7 +58,6 @@ function resolveVisualStyleSpec(spec) {
     }
     return Object.fromEntries(Object.entries(spec).map(([type, compSpec]) => [type, resolveComponentVisualStyleSpec(compSpec)]));
 }
-exports.resolveVisualStyleSpec = resolveVisualStyleSpec;
 function resolveComponentVisualStyleSpec(spec) {
     if (spec === undefined)
         return undefined;
@@ -125,4 +126,3 @@ function validateInitParams(params) {
     }
     return undefined;
 }
-exports.validateInitParams = validateInitParams;

package/lib/subscribe-events.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.subscribeToComponentEvents = void 0;
+exports.subscribeToComponentEvents = subscribeToComponentEvents;
 function subscribeToComponentEvents(wrapperCtx) {
     document.addEventListener('PDB.interactions.click', function (e) {
         if (typeof e.detail !== 'undefined') {
@@ -191,4 +191,3 @@ function subscribeToComponentEvents(wrapperCtx) {
         wrapperCtx.visual.clearHighlight();
     });
 }
-exports.subscribeToComponentEvents = subscribeToComponentEvents;

package/lib/superposition-export.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.superpositionExportHierarchy = void 0;
+exports.superpositionExportHierarchy = superpositionExportHierarchy;
 const tslib_1 = require("tslib");
 const utf8_1 = require("molstar/lib/mol-io/common/utf8");
 const structure_1 = require("molstar/lib/mol-model/structure");
@@ -21,7 +21,6 @@ function superpositionExportHierarchy(plugin, options) {
         }
     });
 }
-exports.superpositionExportHierarchy = superpositionExportHierarchy;
 function _superpositionExportHierarchy(plugin, options) {
     return mol_task_1.Task.create('Export', (ctx) => tslib_1.__awaiter(this, void 0, void 0, function* () {
         var _a, _b, _c, _d, _e, _f, _g, _h;