pdbe-molstar 3.2.1-beta.1 → 3.2.1-beta.3

package/lib/viewer.js

@@ -0,0 +1,1286 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PDBeMolstarPlugin = void 0;
+var tslib_1 = require("tslib");
+var geo_export_1 = require("molstar/lib/extensions/geo-export");
+var behavior_1 = require("molstar/lib/extensions/model-archive/quality-assessment/behavior");
+var mp4_export_1 = require("molstar/lib/extensions/mp4-export");
+var behavior_2 = require("molstar/lib/extensions/mvs/behavior");
+var custom_tooltips_prop_1 = require("molstar/lib/extensions/mvs/components/custom-tooltips-prop");
+var pdbe_1 = require("molstar/lib/extensions/pdbe");
+var behavior_3 = require("molstar/lib/extensions/rcsb/assembly-symmetry/behavior");
+var loci_1 = require("molstar/lib/mol-model/loci");
+var structure_1 = require("molstar/lib/mol-model/structure");
+var assembly_unwind_1 = require("molstar/lib/mol-plugin-state/animation/built-in/assembly-unwind");
+var camera_rock_1 = require("molstar/lib/mol-plugin-state/animation/built-in/camera-rock");
+var camera_spin_1 = require("molstar/lib/mol-plugin-state/animation/built-in/camera-spin");
+var model_index_1 = require("molstar/lib/mol-plugin-state/animation/built-in/model-index");
+var spin_structure_1 = require("molstar/lib/mol-plugin-state/animation/built-in/spin-structure");
+var state_interpolation_1 = require("molstar/lib/mol-plugin-state/animation/built-in/state-interpolation");
+var state_snapshots_1 = require("molstar/lib/mol-plugin-state/animation/built-in/state-snapshots");
+var structure_overpaint_1 = require("molstar/lib/mol-plugin-state/helpers/structure-overpaint");
+var structure_representation_params_1 = require("molstar/lib/mol-plugin-state/helpers/structure-representation-params");
+var objects_1 = require("molstar/lib/mol-plugin-state/objects");
+var transforms_1 = require("molstar/lib/mol-plugin-state/transforms");
+var model_1 = require("molstar/lib/mol-plugin-state/transforms/model");
+var representation_1 = require("molstar/lib/mol-plugin-state/transforms/representation");
+var react18_1 = require("molstar/lib/mol-plugin-ui/react18");
+var camera_1 = require("molstar/lib/mol-plugin/behavior/dynamic/camera");
+var representation_2 = require("molstar/lib/mol-plugin/behavior/dynamic/representation");
+var structure_focus_representation_1 = require("molstar/lib/mol-plugin/behavior/dynamic/selection/structure-focus-representation");
+var transformers_1 = require("molstar/lib/mol-plugin/behavior/dynamic/volume-streaming/transformers");
+var commands_1 = require("molstar/lib/mol-plugin/commands");
+var config_1 = require("molstar/lib/mol-plugin/config");
+var layout_1 = require("molstar/lib/mol-plugin/layout");
+var spec_1 = require("molstar/lib/mol-plugin/spec");
+var mol_state_1 = require("molstar/lib/mol-state");
+var element_symbol_1 = require("molstar/lib/mol-theme/color/element-symbol");
+var assets_1 = require("molstar/lib/mol-util/assets");
+var color_1 = require("molstar/lib/mol-util/color/color");
+var rx_event_helper_1 = require("molstar/lib/mol-util/rx-event-helper");
+var custom_events_1 = require("./custom-events");
+var behavior_4 = require("./domain-annotations/behavior");
+var Foldseek = tslib_1.__importStar(require("./extensions/foldseek"));
+var helpers_1 = require("./helpers");
+var overlay_1 = require("./overlay");
+var plugin_custom_state_1 = require("./plugin-custom-state");
+var spec_2 = require("./spec");
+var spec_from_html_1 = require("./spec-from-html");
+var subscribe_events_1 = require("./subscribe-events");
+var superposition_1 = require("./superposition");
+var superposition_focus_representation_1 = require("./superposition-focus-representation");
+var pdbe_left_panel_1 = require("./ui/pdbe-left-panel");
+var pdbe_structure_controls_1 = require("./ui/pdbe-structure-controls");
+var pdbe_viewport_controls_1 = require("./ui/pdbe-viewport-controls");
+var superposition_viewport_1 = require("./ui/superposition-viewport");
+var PDBeMolstarPlugin = /** @class */ (function () {
+    function PDBeMolstarPlugin() {
+        var _this = this;
+        this._ev = rx_event_helper_1.RxEventHelper.create();
+        this.events = {
+            loadComplete: this._ev()
+        };
+        this.assemblyRef = '';
+        this.isHighlightColorUpdated = false;
+        this.isSelectedColorUpdated = false;
+        /** Keeps track of representations added by `.visual.select` for each structure. */
+        this.addedReprs = {};
+        /** Maps structure IDs (assigned when loading) to cell refs. */
+        this.structureRefMap = new Map();
+        /** Helper methods related to canvas and layout */
+        this.canvas = {
+            /** Set canvas background color. */
+            setBgColor: function (color) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
+                return tslib_1.__generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            if (!color)
+                                return [2 /*return*/];
+                            return [4 /*yield*/, this.canvas.applySettings({ color: color })];
+                        case 1:
+                            _a.sent();
+                            return [2 /*return*/];
+                    }
+                });
+            }); },
+            /** Set controls panel visibility. Without `isVisible` parameter, toggle controls panel visibility. */
+            toggleControls: function (isVisible) {
+                if (typeof isVisible === 'undefined')
+                    isVisible = !_this.plugin.layout.state.showControls;
+                commands_1.PluginCommands.Layout.Update(_this.plugin, { state: { showControls: isVisible } });
+            },
+            /** Set full-screen mode on or off. Without `isExpanded` parameter, toggle full-screen mode. */
+            toggleExpanded: function (isExpanded) {
+                if (typeof isExpanded === 'undefined')
+                    isExpanded = !_this.plugin.layout.state.isExpanded;
+                commands_1.PluginCommands.Layout.Update(_this.plugin, { state: { isExpanded: isExpanded } });
+            },
+            applySettings: function (settings) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
+                var renderer;
+                return tslib_1.__generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            if (!settings)
+                                return [2 /*return*/];
+                            if (!this.plugin.canvas3d)
+                                return [2 /*return*/];
+                            renderer = tslib_1.__assign({}, this.plugin.canvas3d.props.renderer);
+                            if (settings.color) {
+                                renderer.backgroundColor = (0, helpers_1.normalizeColor)(settings.color);
+                            }
+                            if (settings.lighting) {
+                                renderer.style = { name: settings.lighting }; // I don't think this does anything and I don't see how it could ever have worked
+                            }
+                            return [4 /*yield*/, commands_1.PluginCommands.Canvas3D.SetSettings(this.plugin, { settings: { renderer: renderer } })];
+                        case 1:
+                            _a.sent();
+                            return [2 /*return*/];
+                    }
+                });
+            }); },
+        };
+        /** Helper methods related to 3D visuals */
+        this.visual = {
+            /** Change the visibility of individual entity visuals */
+            visibility: function (data) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
+                var _a, _b, _c, _i, visual, requiredVisibility, tags, _d, tags_1, tag, componentRef, compVisual, currentlyVisible;
+                var _e;
+                return tslib_1.__generator(this, function (_f) {
+                    switch (_f.label) {
+                        case 0:
+                            if (!data)
+                                return [2 /*return*/];
+                            _a = data;
+                            _b = [];
+                            for (_c in _a)
+                                _b.push(_c);
+                            _i = 0;
+                            _f.label = 1;
+                        case 1:
+                            if (!(_i < _b.length)) return [3 /*break*/, 6];
+                            _c = _b[_i];
+                            if (!(_c in _a)) return [3 /*break*/, 5];
+                            visual = _c;
+                            requiredVisibility = data[visual];
+                            if (requiredVisibility === undefined)
+                                return [3 /*break*/, 5];
+                            tags = (_e = helpers_1.StructureComponentTags[visual]) !== null && _e !== void 0 ? _e : [];
+                            _d = 0, tags_1 = tags;
+                            _f.label = 2;
+                        case 2:
+                            if (!(_d < tags_1.length)) return [3 /*break*/, 5];
+                            tag = tags_1[_d];
+                            componentRef = mol_state_1.StateSelection.findTagInSubtree(this.plugin.state.data.tree, mol_state_1.StateTransform.RootRef, tag);
+                            if (!componentRef) return [3 /*break*/, 4];
+                            compVisual = this.plugin.state.data.select(componentRef)[0];
+                            if (!(compVisual && compVisual.obj)) return [3 /*break*/, 4];
+                            currentlyVisible = !(compVisual.state && compVisual.state.isHidden);
+                            if (!(currentlyVisible !== requiredVisibility)) return [3 /*break*/, 4];
+                            return [4 /*yield*/, commands_1.PluginCommands.State.ToggleVisibility(this.plugin, { state: this.state, ref: componentRef })];
+                        case 3:
+                            _f.sent();
+                            _f.label = 4;
+                        case 4:
+                            _d++;
+                            return [3 /*break*/, 2];
+                        case 5:
+                            _i++;
+                            return [3 /*break*/, 1];
+                        case 6: return [2 /*return*/];
+                    }
+                });
+            }); },
+            /** Change the visibility of a structure.
+             * `structureNumberOrId` is either index (numbered from 1!) or the ID that was provided when loading the structure.
+             * If `visibility` is undefined, toggle current visibility state. */
+            structureVisibility: function (structureNumberOrId, visibility) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
+                var struct, currentVisibility;
+                return tslib_1.__generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            struct = this.getStructure(structureNumberOrId);
+                            if (!struct) {
+                                console.error("Cannot change visibility of structure ".concat(structureNumberOrId, ": structure not found."));
+                                return [2 /*return*/];
+                            }
+                            currentVisibility = !struct.cell.state.isHidden;
+                            if (!(visibility !== currentVisibility)) return [3 /*break*/, 2];
+                            return [4 /*yield*/, commands_1.PluginCommands.State.ToggleVisibility(this.plugin, { state: this.state, ref: struct.cell.transform.ref })];
+                        case 1:
+                            _a.sent();
+                            _a.label = 2;
+                        case 2: return [2 /*return*/];
+                    }
+                });
+            }); },
+            /** With `isSpinning` parameter, switch visual rotation on or off. Without `isSpinning` parameter, toggle rotation. If `resetCamera`, also reset the camera zoom. */
+            toggleSpin: function (isSpinning, resetCamera) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
+                var trackball, toggleSpinParam;
+                return tslib_1.__generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            if (!this.plugin.canvas3d)
+                                return [2 /*return*/];
+                            trackball = this.plugin.canvas3d.props.trackball;
+                            toggleSpinParam = trackball.animate.name === 'spin' ? { name: 'off', params: {} } : { name: 'spin', params: { speed: 1 } };
+                            if (typeof isSpinning !== 'undefined') {
+                                toggleSpinParam = { name: 'off', params: {} };
+                                if (isSpinning)
+                                    toggleSpinParam = { name: 'spin', params: { speed: 1 } };
+                            }
+                            return [4 /*yield*/, commands_1.PluginCommands.Canvas3D.SetSettings(this.plugin, { settings: { trackball: tslib_1.__assign(tslib_1.__assign({}, trackball), { animate: toggleSpinParam }) } })];
+                        case 1:
+                            _a.sent();
+                            if (!resetCamera) return [3 /*break*/, 3];
+                            return [4 /*yield*/, commands_1.PluginCommands.Camera.Reset(this.plugin, {})];
+                        case 2:
+                            _a.sent();
+                            _a.label = 3;
+                        case 3: return [2 /*return*/];
+                    }
+                });
+            }); },
+            /** Focus (zoom) on the part of the structure defined by `selection`.
+             * If `selection` contains more items, focus on the union of those.
+             * If `structureNumber` is provided, use the specified structure (numbered from 1!); otherwise use the last added structure. */
+            focus: function (selection, structureNumber) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
+                var loci;
+                return tslib_1.__generator(this, function (_a) {
+                    loci = this.getLociForParams(selection, structureNumber);
+                    this.plugin.managers.camera.focusLoci(loci);
+                    return [2 /*return*/];
+                });
+            }); },
+            /** Trigger highlight on the part of the structure defined by `data`
+             * (this will look the same as when the user hovers over a part of the structure).
+             * If `focus`, also zoom on the highlighted part.
+             * If `structureNumber` is provided, use the specified structure (numbered from 1!); otherwise use the last added structure. */
+            highlight: function (params) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
+                var loci;
+                return tslib_1.__generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            loci = this.getLociForParams(params.data, params.structureNumber);
+                            if (loci_1.Loci.isEmpty(loci))
+                                return [2 /*return*/];
+                            if (!params.color) return [3 /*break*/, 2];
+                            return [4 /*yield*/, this.visual.setColor({ highlight: params.color })];
+                        case 1:
+                            _a.sent();
+                            _a.label = 2;
+                        case 2:
+                            this.plugin.managers.interactivity.lociHighlights.highlightOnly({ loci: loci });
+                            if (params.focus)
+                                this.plugin.managers.camera.focusLoci(loci);
+                            return [2 /*return*/];
+                    }
+                });
+            }); },
+            /** Remove any current highlight and reset the highlight color to its default value. */
+            clearHighlight: function () { return tslib_1.__awaiter(_this, void 0, void 0, function () {
+                return tslib_1.__generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            this.plugin.managers.interactivity.lociHighlights.highlightOnly({ loci: loci_1.EmptyLoci });
+                            if (!this.isHighlightColorUpdated) return [3 /*break*/, 2];
+                            return [4 /*yield*/, this.visual.reset({ highlightColor: true })];
+                        case 1:
+                            _a.sent();
+                            _a.label = 2;
+                        case 2: return [2 /*return*/];
+                    }
+                });
+            }); },
+            /** Color the parts of the structure defined by `data`. Color the rest of the structure in `nonSelectedColor` if provided.
+             * If any items in `data` contain `focus`, zoom to the union of these items.
+             * If any items in `data` contain `sideChain` or `representation`, add extra representations to them (colored in `representationColor` if provided).
+             * If `structureNumber` is provided, apply to the specified structure (numbered from 1!); otherwise apply to all loaded structures.
+             * Remove any previously added coloring and extra representations, unless `keepColors` and/or `keepRepresentations` is set. */
+            select: function (params) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
+                var structureNumberOrId, structures, addedReprParams, _i, _a, param, repr, DefaultSelectColor, focusLoci, _b, structures_1, struct, selections, _c, selections_1, selection, overpaintLayers, wholeStructBundle, _d, _e, _f, _g, repr, bundle, overpaintLayers_1;
+                var _h, _j, _k, _l;
+                return tslib_1.__generator(this, function (_m) {
+                    switch (_m.label) {
+                        case 0:
+                            structureNumberOrId = (_h = params.structureId) !== null && _h !== void 0 ? _h : params.structureNumber;
+                            return [4 /*yield*/, this.visual.clearSelection(structureNumberOrId, { keepColors: params.keepColors, keepRepresentations: params.keepRepresentations })];
+                        case 1:
+                            _m.sent();
+                            structures = this.getStructures(structureNumberOrId);
+                            addedReprParams = {};
+                            for (_i = 0, _a = params.data; _i < _a.length; _i++) {
+                                param = _a[_i];
+                                repr = (_j = param.representation) !== null && _j !== void 0 ? _j : (param.sideChain ? 'ball-and-stick' : undefined);
+                                if (repr) {
+                                    ((_k = addedReprParams[repr]) !== null && _k !== void 0 ? _k : (addedReprParams[repr] = [])).push(param);
+                                }
+                            }
+                            DefaultSelectColor = color_1.Color.fromRgb(255, 112, 3);
+                            focusLoci = [];
+                            _b = 0, structures_1 = structures;
+                            _m.label = 2;
+                        case 2:
+                            if (!(_b < structures_1.length)) return [3 /*break*/, 8];
+                            struct = structures_1[_b];
+                            selections = this.getSelections(params.data, struct.number);
+                            for (_c = 0, selections_1 = selections; _c < selections_1.length; _c++) {
+                                selection = selections_1[_c];
+                                if (selection.param.focus) {
+                                    focusLoci.push(selection.loci);
+                                }
+                            }
+                            overpaintLayers = selections
+                                .filter(function (s) { return s.param.color !== null; })
+                                .map(function (s) { return ({
+                                bundle: s.bundle,
+                                color: s.param.color ? (0, helpers_1.normalizeColor)(s.param.color) : DefaultSelectColor,
+                                clear: false,
+                            }); });
+                            if (params.nonSelectedColor) {
+                                wholeStructBundle = this.getBundle([{}], struct.number);
+                                if (wholeStructBundle) {
+                                    overpaintLayers.unshift({
+                                        bundle: wholeStructBundle,
+                                        color: (0, helpers_1.normalizeColor)(params.nonSelectedColor),
+                                        clear: false,
+                                    });
+                                }
+                            }
+                            return [4 /*yield*/, (0, helpers_1.applyOverpaint)(this.plugin, struct.structureRef, overpaintLayers)];
+                        case 3:
+                            _m.sent();
+                            _d = addedReprParams;
+                            _e = [];
+                            for (_f in _d)
+                                _e.push(_f);
+                            _g = 0;
+                            _m.label = 4;
+                        case 4:
+                            if (!(_g < _e.length)) return [3 /*break*/, 7];
+                            _f = _e[_g];
+                            if (!(_f in _d)) return [3 /*break*/, 6];
+                            repr = _f;
+                            bundle = this.getBundle(addedReprParams[repr], struct.number);
+                            if (!bundle)
+                                return [3 /*break*/, 6];
+                            overpaintLayers_1 = selections.filter(function (s) { return s.param.representationColor; }).map(function (s) { return ({
+                                bundle: s.bundle,
+                                color: (0, helpers_1.normalizeColor)(s.param.representationColor),
+                                clear: false,
+                            }); });
+                            return [4 /*yield*/, this.plugin.build()
+                                    .to(struct.structureRef.cell)
+                                    .apply(model_1.StructureComponent, { type: { name: 'bundle', params: bundle }, label: repr }, { tags: helpers_1.Tags.AddedComponent })
+                                    .apply(representation_1.StructureRepresentation3D, (0, structure_representation_params_1.createStructureRepresentationParams)(this.plugin, (_l = struct.structureRef.cell.obj) === null || _l === void 0 ? void 0 : _l.data, { type: repr }))
+                                    .apply(transforms_1.StateTransforms.Representation.OverpaintStructureRepresentation3DFromBundle, { layers: overpaintLayers_1 }, { tags: helpers_1.Tags.Overpaint })
+                                    .commit()];
+                        case 5:
+                            _m.sent();
+                            // Track that reprs have been added (for later clearSelection)
+                            this.addedReprs[struct.number] = true;
+                            _m.label = 6;
+                        case 6:
+                            _g++;
+                            return [3 /*break*/, 4];
+                        case 7:
+                            _b++;
+                            return [3 /*break*/, 2];
+                        case 8:
+                            // Apply focus
+                            if (focusLoci.length > 0) {
+                                this.plugin.managers.camera.focusLoci(focusLoci);
+                            }
+                            return [2 /*return*/];
+                    }
+                });
+            }); },
+            /** Remove any coloring and extra representations previously added by the `select` method.
+             * If `structureNumber` is provided, apply to the specified structure (numbered from 1!); otherwise apply to all loaded structures.
+             * If `keepColors`, current residue coloring is preserved. If `keepRepresentations`, current added representations are preserved. */
+            clearSelection: function (structureNumberOrId, options) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
+                var structures, _i, structures_2, struct, componentsToClear, componentsToDelete, update, _a, componentsToDelete_1, comp;
+                return tslib_1.__generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0:
+                            structures = this.getStructures(structureNumberOrId);
+                            _i = 0, structures_2 = structures;
+                            _b.label = 1;
+                        case 1:
+                            if (!(_i < structures_2.length)) return [3 /*break*/, 6];
+                            struct = structures_2[_i];
+                            if (!!(options === null || options === void 0 ? void 0 : options.keepColors)) return [3 /*break*/, 3];
+                            componentsToClear = struct.structureRef.components.filter(function (c) { var _a; return !((_a = c.cell.transform.tags) === null || _a === void 0 ? void 0 : _a.includes(helpers_1.Tags.AddedComponent)); });
+                            return [4 /*yield*/, (0, structure_overpaint_1.clearStructureOverpaint)(this.plugin, componentsToClear)];
+                        case 2:
+                            _b.sent();
+                            _b.label = 3;
+                        case 3:
+                            if (!!(options === null || options === void 0 ? void 0 : options.keepRepresentations)) return [3 /*break*/, 5];
+                            if (!this.addedReprs[struct.number]) return [3 /*break*/, 5];
+                            componentsToDelete = struct.structureRef.components.filter(function (comp) { var _a; return (_a = comp.cell.transform.tags) === null || _a === void 0 ? void 0 : _a.includes(helpers_1.Tags.AddedComponent); });
+                            update = this.plugin.build();
+                            for (_a = 0, componentsToDelete_1 = componentsToDelete; _a < componentsToDelete_1.length; _a++) {
+                                comp = componentsToDelete_1[_a];
+                                update.delete(comp.cell.transform.ref);
+                            }
+                            return [4 /*yield*/, update.commit()];
+                        case 4:
+                            _b.sent();
+                            delete this.addedReprs[struct.number];
+                            _b.label = 5;
+                        case 5:
+                            _i++;
+                            return [3 /*break*/, 1];
+                        case 6: return [2 /*return*/];
+                    }
+                });
+            }); },
+            /** Add interactive tooltips to parts of the structure. The added tooltips will be shown on a separate line in the tooltip box.
+             * Repeated call to this function removes any previously added tooltips.
+             * `structureNumber` counts from 1; if not provided, tooltips will be applied to all loaded structures.
+             * Example: `await this.visual.tooltips({ data: [{ struct_asym_id: 'A', tooltip: 'Chain A' }, { struct_asym_id: 'B', tooltip: 'Chain B' }] });`. */
+            tooltips: function (params) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
+                var structures, _loop_1, this_1, _i, structures_3, struct;
+                var _a;
+                return tslib_1.__generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0:
+                            structures = this.getStructures((_a = params.structureId) !== null && _a !== void 0 ? _a : params.structureNumber);
+                            _loop_1 = function (struct) {
+                                var selections, customTooltipProps, structRef, customPropsCells;
+                                return tslib_1.__generator(this, function (_c) {
+                                    switch (_c.label) {
+                                        case 0:
+                                            selections = this_1.getSelections(params.data, struct.number);
+                                            customTooltipProps = {
+                                                tooltips: selections.map(function (s) { var _a; return ({ text: (_a = s.param.tooltip) !== null && _a !== void 0 ? _a : '', selector: { name: 'bundle', params: s.bundle } }); }),
+                                            };
+                                            structRef = struct.structureRef.cell.transform.ref;
+                                            customPropsCells = this_1.plugin.state.data.select(mol_state_1.StateSelection.Generators.ofTransformer(model_1.CustomStructureProperties, structRef));
+                                            if (!(customPropsCells.length === 0)) return [3 /*break*/, 2];
+                                            return [4 /*yield*/, this_1.plugin.build().to(structRef).apply(model_1.CustomStructureProperties).commit()];
+                                        case 1:
+                                            _c.sent();
+                                            customPropsCells = this_1.plugin.state.data.select(mol_state_1.StateSelection.Generators.ofTransformer(model_1.CustomStructureProperties, structRef));
+                                            _c.label = 2;
+                                        case 2: return [4 /*yield*/, this_1.plugin.build().to(customPropsCells[0]).update(function (old) {
+                                                var _a;
+                                                return ({
+                                                    properties: tslib_1.__assign(tslib_1.__assign({}, old.properties), (_a = {}, _a[custom_tooltips_prop_1.CustomTooltipsProvider.descriptor.name] = customTooltipProps, _a)),
+                                                    autoAttach: old.autoAttach.includes(custom_tooltips_prop_1.CustomTooltipsProvider.descriptor.name) ?
+                                                        old.autoAttach
+                                                        : tslib_1.__spreadArray(tslib_1.__spreadArray([], old.autoAttach, true), [custom_tooltips_prop_1.CustomTooltipsProvider.descriptor.name], false),
+                                                });
+                                            }).commit()];
+                                        case 3:
+                                            _c.sent();
+                                            return [2 /*return*/];
+                                    }
+                                });
+                            };
+                            this_1 = this;
+                            _i = 0, structures_3 = structures;
+                            _b.label = 1;
+                        case 1:
+                            if (!(_i < structures_3.length)) return [3 /*break*/, 4];
+                            struct = structures_3[_i];
+                            return [5 /*yield**/, _loop_1(struct)];
+                        case 2:
+                            _b.sent();
+                            _b.label = 3;
+                        case 3:
+                            _i++;
+                            return [3 /*break*/, 1];
+                        case 4: return [2 /*return*/];
+                    }
+                });
+            }); },
+            /** Remove any custom tooltips added by the `tooltips` method. */
+            clearTooltips: function (structureNumberOrId) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
+                return tslib_1.__generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, this.visual.tooltips({ data: [], structureId: structureNumberOrId })];
+                        case 1:
+                            _a.sent();
+                            return [2 /*return*/];
+                    }
+                });
+            }); },
+            /** Set highlight and/or selection color.
+             * Highlight color is used when the user hovers over a part of the structure or when applying the `highlight` method.
+             * Selection color is used when creating selections with Selection Mode (the mouse cursor icon) and is not related to the color used by the `select` method. */
+            setColor: function (params) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
+                var renderer, marking;
+                return tslib_1.__generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            if (!this.plugin.canvas3d)
+                                return [2 /*return*/];
+                            if (!params.highlight && !params.select)
+                                return [2 /*return*/];
+                            renderer = tslib_1.__assign({}, this.plugin.canvas3d.props.renderer);
+                            marking = tslib_1.__assign({}, this.plugin.canvas3d.props.marking);
+                            if (params.highlight) {
+                                renderer.highlightColor = (0, helpers_1.normalizeColor)(params.highlight);
+                                marking.highlightEdgeColor = color_1.Color.darken((0, helpers_1.normalizeColor)(params.highlight), 1);
+                                this.isHighlightColorUpdated = true;
+                            }
+                            if (params.select) {
+                                renderer.selectColor = (0, helpers_1.normalizeColor)(params.select);
+                                marking.selectEdgeColor = color_1.Color.darken((0, helpers_1.normalizeColor)(params.select), 1);
+                                this.isSelectedColorUpdated = true;
+                            }
+                            return [4 /*yield*/, commands_1.PluginCommands.Canvas3D.SetSettings(this.plugin, { settings: { renderer: renderer, marking: marking } })];
+                        case 1:
+                            _a.sent();
+                            return [2 /*return*/];
+                    }
+                });
+            }); },
+            /** Reset various settings to defaults:
+             * `camera` resets camera position (i.e. zooms on the whole scene).
+             * `theme` resets color theme for visual representations.
+             * `highlightColor` and `selectColor` reset colors previously set by the `setColor` method. */
+            reset: function (params) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
+                var defaultTheme, componentGroups, _i, componentGroups_1, compGrp, renderer, marking;
+                return tslib_1.__generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            if (!params.camera) return [3 /*break*/, 2];
+                            return [4 /*yield*/, commands_1.PluginCommands.Camera.Reset(this.plugin, { durationMs: 250 })];
+                        case 1:
+                            _a.sent();
+                            _a.label = 2;
+                        case 2:
+                            if (!params.theme) return [3 /*break*/, 6];
+                            defaultTheme = { color: this.defaultColorTheme() };
+                            componentGroups = this.plugin.managers.structure.hierarchy.currentComponentGroups;
+                            _i = 0, componentGroups_1 = componentGroups;
+                            _a.label = 3;
+                        case 3:
+                            if (!(_i < componentGroups_1.length)) return [3 /*break*/, 6];
+                            compGrp = componentGroups_1[_i];
+                            return [4 /*yield*/, this.plugin.managers.structure.component.updateRepresentationsTheme(compGrp, defaultTheme)];
+                        case 4:
+                            _a.sent();
+                            _a.label = 5;
+                        case 5:
+                            _i++;
+                            return [3 /*break*/, 3];
+                        case 6:
+                            if (!(params.highlightColor || params.selectColor)) return [3 /*break*/, 8];
+                            if (!this.plugin.canvas3d)
+                                return [2 /*return*/];
+                            renderer = tslib_1.__assign({}, this.plugin.canvas3d.props.renderer);
+                            marking = tslib_1.__assign({}, this.plugin.canvas3d.props.marking);
+                            if (params.highlightColor) {
+                                renderer.highlightColor = this.defaultRendererProps.highlightColor;
+                                marking.highlightEdgeColor = this.defaultMarkingProps.highlightEdgeColor;
+                                this.isHighlightColorUpdated = false;
+                            }
+                            if (params.selectColor) {
+                                renderer.selectColor = this.defaultRendererProps.selectColor;
+                                marking.selectEdgeColor = this.defaultMarkingProps.selectEdgeColor;
+                                this.isSelectedColorUpdated = false;
+                            }
+                            return [4 /*yield*/, commands_1.PluginCommands.Canvas3D.SetSettings(this.plugin, { settings: { renderer: renderer, marking: marking } })];
+                        case 7:
+                            _a.sent();
+                            _a.label = 8;
+                        case 8: return [2 /*return*/];
+                    }
+                });
+            }); },
+            /** Change parameters of the plugin instance.
+             * Can be used to load a different structure.
+             * If `fullLoad`, remove currently loaded structure before loading the new one;
+             * otherwise add the new structure to existing structures. */
+            update: function (options, fullLoad) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
+                var validationIssues, dataSource;
+                return tslib_1.__generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            console.debug('Updating PDBeMolstarPlugin instance with options:', options);
+                            // Validate options
+                            if (!options) {
+                                console.error('Missing `options` argument to `PDBeMolstarPlugin.visual.update');
+                                return [2 /*return*/, false];
+                            }
+                            validationIssues = (0, spec_2.validateInitParams)(options);
+                            if (validationIssues) {
+                                console.error('Invalid PDBeMolstarPlugin options:', options);
+                                return [2 /*return*/, false];
+                            }
+                            this.initParams = (0, helpers_1.addDefaults)(options, spec_2.DefaultParams);
+                            if (!this.initParams.moleculeId && !this.initParams.customData)
+                                return [2 /*return*/, false];
+                            if (this.initParams.customData && this.initParams.customData.url && !this.initParams.customData.format)
+                                return [2 /*return*/, false];
+                            (0, plugin_custom_state_1.PluginCustomState)(this.plugin).initParams = this.initParams;
+                            // Show/hide buttons in the viewport control panel
+                            this.plugin.config.set(config_1.PluginConfig.Viewport.ShowExpand, !this.initParams.hideCanvasControls.includes('expand'));
+                            this.plugin.config.set(config_1.PluginConfig.Viewport.ShowSelectionMode, !this.initParams.hideCanvasControls.includes('selection'));
+                            this.plugin.config.set(config_1.PluginConfig.Viewport.ShowAnimation, !this.initParams.hideCanvasControls.includes('animation'));
+                            this.plugin.config.set(config_1.PluginConfig.Viewport.ShowControls, !this.initParams.hideCanvasControls.includes('controlToggle'));
+                            this.plugin.config.set(config_1.PluginConfig.Viewport.ShowSettings, !this.initParams.hideCanvasControls.includes('controlInfo'));
+                            if (!(this.initParams.bgColor || this.initParams.lighting)) return [3 /*break*/, 2];
+                            return [4 /*yield*/, this.canvas.applySettings({ color: this.initParams.bgColor, lighting: this.initParams.lighting })];
+                        case 1:
+                            _a.sent();
+                            _a.label = 2;
+                        case 2:
+                            dataSource = this.getMoleculeSrcUrl();
+                            if (!dataSource) return [3 /*break*/, 4];
+                            return [4 /*yield*/, this.load({ url: dataSource.url, format: dataSource.format, assemblyId: this.initParams.assemblyId, isBinary: dataSource.isBinary }, fullLoad)];
+                        case 3:
+                            _a.sent();
+                            _a.label = 4;
+                        case 4: return [2 /*return*/, true];
+                    }
+                });
+            }); },
+        };
+    }
+    /** Extract InitParams from attributes of an HTML element */
+    PDBeMolstarPlugin.initParamsFromHtmlAttributes = function (element) {
+        return (0, spec_from_html_1.initParamsFromHtmlAttributes)(element);
+    };
+    PDBeMolstarPlugin.prototype.render = function (target, options) {
+        var _a, _b, _c, _d, _e, _f;
+        return tslib_1.__awaiter(this, void 0, void 0, function () {
+            var validationIssues, pdbePluginSpec, _g, dataSource;
+            return tslib_1.__generator(this, function (_h) {
+                switch (_h.label) {
+                    case 0:
+                        console.debug('Rendering PDBeMolstarPlugin instance with options:', options);
+                        // Validate options
+                        if (!options) {
+                            console.error('Missing `options` argument to `PDBeMolstarPlugin.render');
+                            return [2 /*return*/];
+                        }
+                        validationIssues = (0, spec_2.validateInitParams)(options);
+                        if (validationIssues) {
+                            console.error('Invalid PDBeMolstarPlugin options:', options);
+                            return [2 /*return*/];
+                        }
+                        this.initParams = (0, helpers_1.addDefaults)(options, spec_2.DefaultParams);
+                        pdbePluginSpec = (0, spec_2.DefaultPluginUISpec)();
+                        (_a = pdbePluginSpec.config) !== null && _a !== void 0 ? _a : (pdbePluginSpec.config = []);
+                        pdbePluginSpec.behaviors.push(spec_1.PluginSpec.Behavior(behavior_2.MolViewSpec));
+                        if (!this.initParams.ligandView && !this.initParams.superposition && this.initParams.selectInteraction) {
+                            pdbePluginSpec.behaviors.push(spec_1.PluginSpec.Behavior(structure_focus_representation_1.StructureFocusRepresentation));
+                        }
+                        if (this.initParams.superposition) {
+                            pdbePluginSpec.behaviors.push(spec_1.PluginSpec.Behavior(superposition_focus_representation_1.SuperpositionFocusRepresentation), spec_1.PluginSpec.Behavior(behavior_1.MAQualityAssessment, { autoAttach: true, showTooltip: true }));
+                        }
+                        // Add custom properties
+                        if (this.initParams.domainAnnotation) {
+                            pdbePluginSpec.behaviors.push(spec_1.PluginSpec.Behavior(behavior_4.PDBeDomainAnnotations, { autoAttach: true, showTooltip: false }));
+                        }
+                        if (this.initParams.validationAnnotation) {
+                            pdbePluginSpec.behaviors.push(spec_1.PluginSpec.Behavior(pdbe_1.PDBeStructureQualityReport, { autoAttach: true, showTooltip: false }));
+                        }
+                        if (this.initParams.symmetryAnnotation) {
+                            pdbePluginSpec.behaviors.push(spec_1.PluginSpec.Behavior(behavior_3.RCSBAssemblySymmetry));
+                            pdbePluginSpec.config.push([behavior_3.RCSBAssemblySymmetryConfig.DefaultServerType, 'pdbe'], [behavior_3.RCSBAssemblySymmetryConfig.DefaultServerUrl, 'https://www.ebi.ac.uk/pdbe/aggregated-api/pdb/symmetry'], [behavior_3.RCSBAssemblySymmetryConfig.ApplyColors, false]);
+                        }
+                        pdbePluginSpec.layout = {
+                            initial: {
+                                isExpanded: this.initParams.expanded,
+                                showControls: !this.initParams.hideControls,
+                                regionState: {
+                                    left: this.initParams.leftPanel ? 'full' : 'hidden',
+                                    right: this.initParams.rightPanel ? 'full' : 'hidden',
+                                    top: this.initParams.sequencePanel ? 'full' : 'hidden',
+                                    bottom: this.initParams.logPanel ? 'full' : 'hidden',
+                                },
+                                controlsDisplay: this.initParams.reactive ? 'reactive' : this.initParams.landscape ? 'landscape' : layout_1.PluginLayoutStateParams.controlsDisplay.defaultValue,
+                            }
+                        };
+                        pdbePluginSpec.components = {
+                            controls: {
+                                left: pdbe_left_panel_1.PDBeLeftPanelControls,
+                            },
+                            viewport: {
+                                controls: pdbe_viewport_controls_1.PDBeViewportControls,
+                                view: this.initParams.superposition ? superposition_viewport_1.SuperpostionViewport : void 0
+                            },
+                            remoteState: 'none',
+                            structureTools: this.initParams.superposition ? pdbe_structure_controls_1.PDBeSuperpositionStructureTools : this.initParams.ligandView ? pdbe_structure_controls_1.PDBeLigandViewStructureTools : pdbe_structure_controls_1.PDBeStructureTools
+                        };
+                        if (this.initParams.alphafoldView) {
+                            pdbePluginSpec.behaviors.push(spec_1.PluginSpec.Behavior(behavior_1.MAQualityAssessment, { autoAttach: true, showTooltip: true }));
+                        }
+                        pdbePluginSpec.config.push([config_1.PluginConfig.Structure.DefaultRepresentationPresetParams, {
+                                theme: {
+                                    globalName: (this.initParams.alphafoldView) ? 'plddt-confidence' : undefined,
+                                    carbonColor: { name: 'element-symbol', params: {} },
+                                    focus: {
+                                        name: 'element-symbol',
+                                        params: { carbonColor: { name: 'element-symbol', params: {} } }
+                                    }
+                                }
+                            }]);
+                        element_symbol_1.ElementSymbolColorThemeParams.carbonColor.defaultValue = { name: 'element-symbol', params: {} };
+                        // Add animation props
+                        if (!this.initParams.ligandView && !this.initParams.superposition) {
+                            pdbePluginSpec.animations = [model_index_1.AnimateModelIndex, camera_spin_1.AnimateCameraSpin, camera_rock_1.AnimateCameraRock, state_snapshots_1.AnimateStateSnapshots, assembly_unwind_1.AnimateAssemblyUnwind, spin_structure_1.AnimateStructureSpin, state_interpolation_1.AnimateStateInterpolation];
+                            pdbePluginSpec.behaviors.push(spec_1.PluginSpec.Behavior(mp4_export_1.Mp4Export));
+                            pdbePluginSpec.behaviors.push(spec_1.PluginSpec.Behavior(geo_export_1.GeometryExport));
+                        }
+                        if (this.initParams.hideCanvasControls.includes('expand'))
+                            pdbePluginSpec.config.push([config_1.PluginConfig.Viewport.ShowExpand, false]);
+                        if (this.initParams.hideCanvasControls.includes('selection'))
+                            pdbePluginSpec.config.push([config_1.PluginConfig.Viewport.ShowSelectionMode, false]);
+                        if (this.initParams.hideCanvasControls.includes('animation'))
+                            pdbePluginSpec.config.push([config_1.PluginConfig.Viewport.ShowAnimation, false]);
+                        if (this.initParams.hideCanvasControls.includes('controlToggle'))
+                            pdbePluginSpec.config.push([config_1.PluginConfig.Viewport.ShowControls, false]);
+                        if (this.initParams.hideCanvasControls.includes('controlInfo'))
+                            pdbePluginSpec.config.push([config_1.PluginConfig.Viewport.ShowSettings, false]);
+                        // override default event bindings
+                        if (this.initParams.selectBindings) {
+                            pdbePluginSpec.behaviors.push(spec_1.PluginSpec.Behavior(representation_2.SelectLoci, { bindings: this.initParams.selectBindings }));
+                        }
+                        if (this.initParams.focusBindings) {
+                            pdbePluginSpec.behaviors.push(spec_1.PluginSpec.Behavior(camera_1.FocusLoci, { bindings: this.initParams.focusBindings }));
+                        }
+                        this.targetElement = typeof target === 'string' ? document.getElementById(target) : target;
+                        this.targetElement.viewerInstance = this;
+                        // Create/ Initialise Plugin
+                        _g = this;
+                        return [4 /*yield*/, (0, react18_1.createPluginUI)(this.targetElement, pdbePluginSpec)];
+                    case 1:
+                        // Create/ Initialise Plugin
+                        _g.plugin = _h.sent();
+                        (0, plugin_custom_state_1.PluginCustomState)(this.plugin).initParams = tslib_1.__assign({}, this.initParams);
+                        (0, plugin_custom_state_1.PluginCustomState)(this.plugin).events = {
+                            segmentUpdate: this._ev(),
+                            superpositionInit: this._ev(),
+                            isBusy: this._ev()
+                        };
+                        // Set background colour
+                        if (this.initParams.bgColor || this.initParams.lighting) {
+                            this.canvas.applySettings({ color: this.initParams.bgColor, lighting: this.initParams.lighting });
+                        }
+                        // Set selection granularity
+                        if (this.initParams.granularity) {
+                            this.plugin.managers.interactivity.setProps({ granularity: this.initParams.granularity });
+                        }
+                        // Set default highlight and selection colors
+                        if (this.initParams.highlightColor || this.initParams.selectColor) {
+                            this.visual.setColor({ highlight: this.initParams.highlightColor, select: this.initParams.selectColor });
+                        }
+                        // Save renderer defaults
+                        this.defaultRendererProps = tslib_1.__assign({}, this.plugin.canvas3d.props.renderer);
+                        this.defaultMarkingProps = tslib_1.__assign({}, this.plugin.canvas3d.props.marking);
+                        if (this.initParams.superposition) {
+                            // Set left panel tab
+                            this.plugin.behaviors.layout.leftPanelTabName.next('segments');
+                            // Initialise superposition
+                            if (this.initParams.loadingOverlay) {
+                                new overlay_1.LoadingOverlay(this.targetElement, { resize: (_c = (_b = this.plugin) === null || _b === void 0 ? void 0 : _b.canvas3d) === null || _c === void 0 ? void 0 : _c.resized, hide: this.events.loadComplete }).show();
+                            }
+                            (0, superposition_1.initSuperposition)(this.plugin, this.events.loadComplete);
+                        }
+                        else {
+                            // Set left panel tab to none (collapses the panel if visible)
+                            this.plugin.behaviors.layout.leftPanelTabName.next('none');
+                            dataSource = this.getMoleculeSrcUrl();
+                            if (dataSource) {
+                                if (this.initParams.loadingOverlay) {
+                                    new overlay_1.LoadingOverlay(this.targetElement, { resize: (_e = (_d = this.plugin) === null || _d === void 0 ? void 0 : _d.canvas3d) === null || _e === void 0 ? void 0 : _e.resized, hide: this.events.loadComplete }).show();
+                                }
+                                this.load({
+                                    url: dataSource.url,
+                                    format: dataSource.format,
+                                    assemblyId: this.initParams.assemblyId,
+                                    isBinary: dataSource.isBinary,
+                                    progressMessage: "Loading ".concat((_f = this.initParams.moleculeId) !== null && _f !== void 0 ? _f : '', " ..."),
+                                    id: 'main',
+                                });
+                            }
+                            // Binding to other PDB Component events
+                            if (this.initParams.subscribeEvents) {
+                                (0, subscribe_events_1.subscribeToComponentEvents)(this);
+                            }
+                            // Event handling
+                            custom_events_1.CustomEvents.add(this.plugin, this.targetElement);
+                        }
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    PDBeMolstarPlugin.prototype.getMoleculeSrcUrl = function () {
+        if (this.initParams.customData) {
+            var _a = this.initParams.customData, url = _a.url, format = _a.format, binary = _a.binary;
+            if (!url || !format) {
+                throw new Error("Provide all custom data parameters");
+            }
+            if (format === 'cif' || format === 'bcif')
+                format = 'mmcif';
+            // Validate supported format
+            var supportedFormats = ['mmcif', 'pdb', 'sdf'];
+            if (!supportedFormats.includes(format)) {
+                throw new Error("".concat(format, " not supported."));
+            }
+            return {
+                url: url,
+                format: format,
+                isBinary: binary,
+            };
+        }
+        if (this.initParams.moleculeId) {
+            var request = { pdbId: this.initParams.moleculeId, queryType: 'full', queryParams: {} };
+            if (this.initParams.ligandView) {
+                request.queryType = 'residueSurroundings';
+                request.queryParams['data_source'] = 'pdb-h';
+                if (!this.initParams.ligandView.label_comp_id_list) {
+                    request.queryParams['label_comp_id'] = this.initParams.ligandView.label_comp_id;
+                    request.queryParams['auth_seq_id'] = this.initParams.ligandView.auth_seq_id;
+                    request.queryParams['auth_asym_id'] = this.initParams.ligandView.auth_asym_id;
+                }
+            }
+            return {
+                url: (0, helpers_1.getStructureUrl)(this.initParams, request),
+                format: 'mmcif',
+                isBinary: this.initParams.encoding === 'bcif',
+            };
+        }
+        throw new Error("Mandatory parameters missing! (customData or moleculeId must be defined)");
+    };
+    Object.defineProperty(PDBeMolstarPlugin.prototype, "state", {
+        get: function () {
+            return this.plugin.state.data;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    PDBeMolstarPlugin.prototype.createLigandStructure = function (isBranched) {
+        var _a, e_1, _b, _c;
+        var _d, _e;
+        return tslib_1.__awaiter(this, void 0, void 0, function () {
+            var _f, _g, _h, comp, e_1_1, structure, ligandQuery, ligandVis, ligandSurr, ligRef, cell, repr, ligLoci, current;
+            return tslib_1.__generator(this, function (_j) {
+                switch (_j.label) {
+                    case 0:
+                        if (this.assemblyRef === '')
+                            return [2 /*return*/];
+                        _j.label = 1;
+                    case 1:
+                        _j.trys.push([1, 9, 10, 15]);
+                        _f = true, _g = tslib_1.__asyncValues(this.plugin.managers.structure.hierarchy.currentComponentGroups);
+                        _j.label = 2;
+                    case 2: return [4 /*yield*/, _g.next()];
+                    case 3:
+                        if (!(_h = _j.sent(), _a = _h.done, !_a)) return [3 /*break*/, 8];
+                        _c = _h.value;
+                        _f = false;
+                        _j.label = 4;
+                    case 4:
+                        _j.trys.push([4, , 6, 7]);
+                        comp = _c;
+                        return [4 /*yield*/, commands_1.PluginCommands.State.RemoveObject(this.plugin, { state: comp[0].cell.parent, ref: comp[0].cell.transform.ref, removeParentGhosts: true })];
+                    case 5:
+                        _j.sent();
+                        return [3 /*break*/, 7];
+                    case 6:
+                        _f = true;
+                        return [7 /*endfinally*/];
+                    case 7: return [3 /*break*/, 2];
+                    case 8: return [3 /*break*/, 15];
+                    case 9:
+                        e_1_1 = _j.sent();
+                        e_1 = { error: e_1_1 };
+                        return [3 /*break*/, 15];
+                    case 10:
+                        _j.trys.push([10, , 13, 14]);
+                        if (!(!_f && !_a && (_b = _g.return))) return [3 /*break*/, 12];
+                        return [4 /*yield*/, _b.call(_g)];
+                    case 11:
+                        _j.sent();
+                        _j.label = 12;
+                    case 12: return [3 /*break*/, 14];
+                    case 13:
+                        if (e_1) throw e_1.error;
+                        return [7 /*endfinally*/];
+                    case 14: return [7 /*endfinally*/];
+                    case 15:
+                        structure = this.state.select(this.assemblyRef)[0];
+                        if (isBranched) {
+                            ligandQuery = helpers_1.LigandView.branchedQuery((_d = this.initParams.ligandView) === null || _d === void 0 ? void 0 : _d.label_comp_id_list);
+                        }
+                        else {
+                            ligandQuery = helpers_1.LigandView.query(this.initParams.ligandView);
+                        }
+                        return [4 /*yield*/, this.plugin.builders.structure.tryCreateComponentFromExpression(structure, ligandQuery.core, 'pivot', { label: 'Ligand' })];
+                    case 16:
+                        ligandVis = _j.sent();
+                        if (!ligandVis) return [3 /*break*/, 18];
+                        return [4 /*yield*/, this.plugin.builders.structure.representation.addRepresentation(ligandVis, { type: 'ball-and-stick', color: 'element-symbol', colorParams: { carbonColor: { name: 'element-symbol', params: {} } }, size: 'uniform', sizeParams: { value: 2.5 } }, { tag: 'ligand-vis' })];
+                    case 17:
+                        _j.sent();
+                        _j.label = 18;
+                    case 18: return [4 /*yield*/, this.plugin.builders.structure.tryCreateComponentFromExpression(structure, ligandQuery.surroundings, 'rest', { label: 'Surroundings' })];
+                    case 19:
+                        ligandSurr = _j.sent();
+                        if (!ligandSurr) return [3 /*break*/, 21];
+                        return [4 /*yield*/, this.plugin.builders.structure.representation.addRepresentation(ligandSurr, { type: 'ball-and-stick', color: 'element-symbol', colorParams: { carbonColor: { name: 'element-symbol', params: {} } }, size: 'uniform', sizeParams: { value: 0.8 } })];
+                    case 20:
+                        _j.sent();
+                        _j.label = 21;
+                    case 21:
+                        ligRef = mol_state_1.StateSelection.findTagInSubtree(this.plugin.state.data.tree, mol_state_1.StateTransform.RootRef, 'ligand-vis');
+                        if (!ligRef)
+                            return [2 /*return*/];
+                        cell = this.plugin.state.data.cells.get(ligRef);
+                        if (cell === null || cell === void 0 ? void 0 : cell.obj) {
+                            repr = cell.obj.data.repr;
+                            ligLoci = repr.getAllLoci()[0];
+                            this.plugin.managers.structure.focus.setFromLoci(ligLoci);
+                            current = (_e = this.plugin.managers.structure.focus.current) === null || _e === void 0 ? void 0 : _e.loci;
+                            if (current)
+                                this.plugin.managers.camera.focusLoci(current);
+                        }
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    PDBeMolstarPlugin.prototype.load = function (_a, fullLoad) {
+        var url = _a.url, _b = _a.format, format = _b === void 0 ? 'mmcif' : _b, _c = _a.isBinary, isBinary = _c === void 0 ? false : _c, _d = _a.assemblyId, assemblyId = _d === void 0 ? '' : _d, progressMessage = _a.progressMessage, id = _a.id;
+        if (fullLoad === void 0) { fullLoad = true; }
+        return tslib_1.__awaiter(this, void 0, void 0, function () {
+            var _this = this;
+            return tslib_1.__generator(this, function (_e) {
+                switch (_e.label) {
+                    case 0: return [4 /*yield*/, (0, helpers_1.runWithProgressMessage)(this.plugin, progressMessage, function () { return tslib_1.__awaiter(_this, void 0, void 0, function () {
+                            var success, isHetView, downloadOptions, isBranchedView, data_1, trajectory, structRef, model, structure, pivotIndex, pivot, asm, defaultMapParams, pdbeMapParams;
+                            return tslib_1.__generator(this, function (_a) {
+                                switch (_a.label) {
+                                    case 0:
+                                        success = false;
+                                        _a.label = 1;
+                                    case 1:
+                                        _a.trys.push([1, , 18, 19]);
+                                        if (!fullLoad) return [3 /*break*/, 3];
+                                        return [4 /*yield*/, this.clear()];
+                                    case 2:
+                                        _a.sent();
+                                        _a.label = 3;
+                                    case 3:
+                                        isHetView = this.initParams.ligandView ? true : false;
+                                        downloadOptions = void 0;
+                                        isBranchedView = false;
+                                        if (this.initParams.ligandView && this.initParams.ligandView.label_comp_id_list) {
+                                            isBranchedView = true;
+                                            downloadOptions = { body: JSON.stringify(this.initParams.ligandView.label_comp_id_list), headers: [['Content-type', 'application/json']] };
+                                        }
+                                        return [4 /*yield*/, this.plugin.builders.data.download({ url: assets_1.Asset.Url(url, downloadOptions), isBinary: isBinary }, { state: { isGhost: true } })];
+                                    case 4:
+                                        data_1 = _a.sent();
+                                        return [4 /*yield*/, this.plugin.builders.structure.parseTrajectory(data_1, format)];
+                                    case 5:
+                                        trajectory = _a.sent();
+                                        structRef = void 0;
+                                        if (!!isHetView) return [3 /*break*/, 10];
+                                        return [4 /*yield*/, this.plugin.builders.structure.hierarchy.applyPreset(trajectory, this.initParams.defaultPreset, {
+                                                structure: assemblyId ? (assemblyId === 'preferred') ? void 0 : { name: 'assembly', params: { id: assemblyId } } : { name: 'model', params: {} },
+                                                showUnitcell: false,
+                                                representationPreset: 'auto'
+                                            })];
+                                    case 6:
+                                        _a.sent();
+                                        structRef = this.plugin.state.data.selectQ(function (q) { return q.byRef(data_1.ref).subtree().ofType(objects_1.PluginStateObject.Molecule.Structure); })[0].transform.ref;
+                                        if (!(this.initParams.hideStructure.length > 0 || this.initParams.visualStyle)) return [3 /*break*/, 9];
+                                        return [4 /*yield*/, this.deleteStructureComponents(structRef, this.initParams.hideStructure)];
+                                    case 7:
+                                        _a.sent();
+                                        return [4 /*yield*/, this.applyVisualStyles(structRef, this.initParams.visualStyle)];
+                                    case 8:
+                                        _a.sent();
+                                        _a.label = 9;
+                                    case 9: return [3 /*break*/, 13];
+                                    case 10: return [4 /*yield*/, this.plugin.builders.structure.createModel(trajectory)];
+                                    case 11:
+                                        model = _a.sent();
+                                        return [4 /*yield*/, this.plugin.builders.structure.createStructure(model, { name: 'model', params: {} })];
+                                    case 12:
+                                        structure = _a.sent();
+                                        structRef = structure.ref;
+                                        _a.label = 13;
+                                    case 13:
+                                        if (id) {
+                                            this.structureRefMap.set(id, structRef);
+                                        }
+                                        // show selection if param is set
+                                        if (this.initParams.selection) {
+                                            this.visual.select(this.initParams.selection);
+                                        }
+                                        pivotIndex = this.plugin.managers.structure.hierarchy.selection.structures.length - 1;
+                                        pivot = this.plugin.managers.structure.hierarchy.selection.structures[pivotIndex];
+                                        if (pivot && pivot.cell.parent)
+                                            this.assemblyRef = pivot.cell.transform.ref;
+                                        if (!this.initParams.loadMaps) return [3 /*break*/, 15];
+                                        if (this.assemblyRef === '')
+                                            return [2 /*return*/];
+                                        asm = this.state.select(this.assemblyRef)[0].obj;
+                                        defaultMapParams = transformers_1.InitVolumeStreaming.createDefaultParams(asm, this.plugin);
+                                        pdbeMapParams = helpers_1.PDBeVolumes.mapParams(defaultMapParams, this.initParams.mapSettings, '');
+                                        if (!pdbeMapParams) return [3 /*break*/, 15];
+                                        return [4 /*yield*/, this.plugin.runTask(this.state.applyAction(transformers_1.InitVolumeStreaming, pdbeMapParams, this.assemblyRef))];
+                                    case 14:
+                                        _a.sent();
+                                        if (pdbeMapParams.method !== 'em' && !this.initParams.ligandView)
+                                            helpers_1.PDBeVolumes.displayUsibilityMessage(this.plugin);
+                                        _a.label = 15;
+                                    case 15:
+                                        if (!isHetView) return [3 /*break*/, 17];
+                                        return [4 /*yield*/, this.createLigandStructure(isBranchedView)];
+                                    case 16:
+                                        _a.sent();
+                                        _a.label = 17;
+                                    case 17:
+                                        success = true;
+                                        return [3 /*break*/, 19];
+                                    case 18:
+                                        this.events.loadComplete.next(success);
+                                        return [7 /*endfinally*/];
+                                    case 19: return [2 /*return*/];
+                                }
+                            });
+                        }); })];
+                    case 1:
+                        _e.sent();
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    /** Remove loaded structure(s).
+     * `structureNumberOrId` is either index (numbered from 1!) or the ID that was provided when loading the structure.
+     * If `structureNumberOrId` is undefined, remove all structures.
+     * You will likely need to call `await this.visual.reset({ camera: true })` afterwards. */
+    PDBeMolstarPlugin.prototype.deleteStructure = function (structureNumberOrId) {
+        return tslib_1.__awaiter(this, void 0, void 0, function () {
+            var structs, _loop_2, this_2, _i, structs_1, struct;
+            return tslib_1.__generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        structs = this.getStructures(structureNumberOrId);
+                        if (structureNumberOrId !== undefined && structs.length === 0) {
+                            console.error("Cannot delete structure: there is no structure with number or id ".concat(structureNumberOrId, "."));
+                        }
+                        _loop_2 = function (struct) {
+                            var dataNode;
+                            return tslib_1.__generator(this, function (_b) {
+                                switch (_b.label) {
+                                    case 0:
+                                        dataNode = this_2.plugin.state.data.selectQ(function (q) { return q.byRef(struct.structureRef.cell.transform.ref).ancestorOfType([objects_1.PluginStateObject.Data.String, objects_1.PluginStateObject.Data.Binary]); })[0];
+                                        if (!dataNode) return [3 /*break*/, 2];
+                                        return [4 /*yield*/, this_2.plugin.build().delete(dataNode).commit()];
+                                    case 1:
+                                        _b.sent();
+                                        _b.label = 2;
+                                    case 2: return [2 /*return*/];
+                                }
+                            });
+                        };
+                        this_2 = this;
+                        _i = 0, structs_1 = structs;
+                        _a.label = 1;
+                    case 1:
+                        if (!(_i < structs_1.length)) return [3 /*break*/, 4];
+                        struct = structs_1[_i];
+                        return [5 /*yield**/, _loop_2(struct)];
+                    case 2:
+                        _a.sent();
+                        _a.label = 3;
+                    case 3:
+                        _i++;
+                        return [3 /*break*/, 1];
+                    case 4: return [2 /*return*/];
+                }
+            });
+        });
+    };
+    /** Apply representations to structure components based on `styles`, also removing any existing representations.
+     * Components not included in `styles` will keep their representations.
+     * E.g. `styles={polymer:'putty',nonStandard:'ball-and-stick'}` - apply only putty to polymer, only ball-and-stick to non-standard residues, leave other components untouched.
+     * E.g. `styles='ball-and-stick'` - apply only ball-and-stick to all components. */
+    PDBeMolstarPlugin.prototype.applyVisualStyles = function (structureRef, styles) {
+        var _a, _b, _c, _d;
+        return tslib_1.__awaiter(this, void 0, void 0, function () {
+            var components, compStyles, _loop_3, this_3, _i, components_1, comp;
+            return tslib_1.__generator(this, function (_e) {
+                switch (_e.label) {
+                    case 0:
+                        if (styles === undefined)
+                            return [2 /*return*/];
+                        components = this.plugin.state.data.selectQ(function (q) { return q.byRef(structureRef).subtree().withTransformer(model_1.StructureComponent); });
+                        compStyles = (0, spec_2.resolveVisualStyleSpec)(styles);
+                        _loop_3 = function (comp) {
+                            var compType, compStyle, update, existingReprs, _f, existingReprs_1, repr, newReprProps, newRepr;
+                            return tslib_1.__generator(this, function (_g) {
+                                switch (_g.label) {
+                                    case 0:
+                                        compType = (0, helpers_1.getComponentTypeFromTags)((_a = comp.obj) === null || _a === void 0 ? void 0 : _a.tags);
+                                        if (compType === undefined)
+                                            return [2 /*return*/, "continue"];
+                                        compStyle = compStyles[compType];
+                                        if (compStyle === undefined)
+                                            return [2 /*return*/, "continue"];
+                                        update = this_3.plugin.build();
+                                        existingReprs = this_3.plugin.state.data.selectQ(function (q) { return q.byValue(comp).subtree().withTransformer(representation_1.StructureRepresentation3D); });
+                                        for (_f = 0, existingReprs_1 = existingReprs; _f < existingReprs_1.length; _f++) {
+                                            repr = existingReprs_1[_f];
+                                            update.delete(repr);
+                                        }
+                                        newReprProps = (0, structure_representation_params_1.createStructureRepresentationParams)(this_3.plugin, (_b = comp.obj) === null || _b === void 0 ? void 0 : _b.data, tslib_1.__assign({ color: this_3.defaultColorTheme() }, compStyle));
+                                        return [4 /*yield*/, update.to(comp).apply(representation_1.StructureRepresentation3D, newReprProps).commit()];
+                                    case 1:
+                                        newRepr = _g.sent();
+                                        if (!(((_d = (_c = newRepr.cell) === null || _c === void 0 ? void 0 : _c.params) === null || _d === void 0 ? void 0 : _d.values.type.name) !== compStyle.type)) return [3 /*break*/, 3];
+                                        return [4 /*yield*/, this_3.plugin.build().delete(newRepr).commit()];
+                                    case 2:
+                                        _g.sent(); // sometimes Molstar applies different repr type than requested (especially for water), we must remove such unwanted reprs
+                                        _g.label = 3;
+                                    case 3: return [2 /*return*/];
+                                }
+                            });
+                        };
+                        this_3 = this;
+                        _i = 0, components_1 = components;
+                        _e.label = 1;
+                    case 1:
+                        if (!(_i < components_1.length)) return [3 /*break*/, 4];
+                        comp = components_1[_i];
+                        return [5 /*yield**/, _loop_3(comp)];
+                    case 2:
+                        _e.sent();
+                        _e.label = 3;
+                    case 3:
+                        _i++;
+                        return [3 /*break*/, 1];
+                    case 4: return [2 /*return*/];
+                }
+            });
+        });
+    };
+    PDBeMolstarPlugin.prototype.defaultColorTheme = function () {
+        return this.initParams.alphafoldView ? 'plddt-confidence' : 'default';
+    };
+    /** Remove all structure components of the given structure which correspond to any component type listed in `deleteComponents`. */
+    PDBeMolstarPlugin.prototype.deleteStructureComponents = function (structureRef, deleteComponents) {
+        var _a, _b;
+        return tslib_1.__awaiter(this, void 0, void 0, function () {
+            var comps, deleteTags, update, _i, comps_1, comp, tags, remove;
+            return tslib_1.__generator(this, function (_c) {
+                switch (_c.label) {
+                    case 0:
+                        comps = this.plugin.state.data.selectQ(function (q) { return q.byRef(structureRef).subtree().withTransformer(model_1.StructureComponent); });
+                        deleteTags = deleteComponents.flatMap(function (comp) { var _a; return (_a = helpers_1.StructureComponentTags[comp]) !== null && _a !== void 0 ? _a : []; });
+                        update = this.plugin.build();
+                        for (_i = 0, comps_1 = comps; _i < comps_1.length; _i++) {
+                            comp = comps_1[_i];
+                            tags = (_b = (_a = comp.obj) === null || _a === void 0 ? void 0 : _a.tags) !== null && _b !== void 0 ? _b : [];
+                            remove = tags.some(function (tag) { return deleteTags.includes(tag); });
+                            if (remove) {
+                                update.delete(comp);
+                            }
+                        }
+                        return [4 /*yield*/, update.commit()];
+                    case 1:
+                        _c.sent();
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    /** Get loci corresponding to a selection within a structure.
+     * If `params` contains more items, return loci for the union of the selections.
+     * If `structureNumber` is provided, use the specified structure (numbered from 1!); otherwise use the last added structure. */
+    PDBeMolstarPlugin.prototype.getLociForParams = function (params, structureNumber) {
+        var assemblyRef = this.assemblyRef;
+        if (structureNumber) {
+            assemblyRef = this.plugin.managers.structure.hierarchy.current.structures[structureNumber - 1].cell.transform.ref;
+        }
+        if (assemblyRef === '')
+            return loci_1.EmptyLoci;
+        var data = this.plugin.state.data.select(assemblyRef)[0].obj.data;
+        if (!data)
+            return loci_1.EmptyLoci;
+        return helpers_1.QueryHelper.getInteractivityLoci(params, data);
+    };
+    PDBeMolstarPlugin.prototype.getLociByPLDDT = function (score, structureNumber) {
+        var assemblyRef = this.assemblyRef;
+        if (structureNumber) {
+            assemblyRef = this.plugin.managers.structure.hierarchy.current.structures[structureNumber - 1].cell.transform.ref;
+        }
+        if (assemblyRef === '')
+            return loci_1.EmptyLoci;
+        var data = this.plugin.state.data.select(assemblyRef)[0].obj.data;
+        if (!data)
+            return loci_1.EmptyLoci;
+        return helpers_1.AlphafoldView.getLociByPLDDT(score, data);
+    };
+    /** For each item in params, get loci and bundle */
+    PDBeMolstarPlugin.prototype.getSelections = function (params, structNumber) {
+        var result = [];
+        for (var _i = 0, params_1 = params; _i < params_1.length; _i++) {
+            var param = params_1[_i];
+            var loci = this.getLociForParams([param], structNumber);
+            if (loci_1.Loci.isEmpty(loci) || !structure_1.StructureElement.Loci.is(loci))
+                continue;
+            var bundle = structure_1.StructureElement.Bundle.fromLoci(loci);
+            result.push({ param: param, loci: loci, bundle: bundle });
+        }
+        return result;
+    };
+    PDBeMolstarPlugin.prototype.getBundle = function (params, structNumber) {
+        var loci = this.getLociForParams(params, structNumber);
+        if (loci_1.Loci.isEmpty(loci) || !structure_1.StructureElement.Loci.is(loci))
+            return undefined;
+        return structure_1.StructureElement.Bundle.fromLoci(loci);
+    };
+    PDBeMolstarPlugin.prototype.normalizeColor = function (colorVal, defaultColor) {
+        if (defaultColor === void 0) { defaultColor = color_1.Color.fromRgb(170, 170, 170); }
+        return (0, helpers_1.normalizeColor)(colorVal, defaultColor);
+    };
+    /** Get structure ref for a structure with given `structureNumberOrId`.
+     * `structureNumberOrId` is either index (numbered from 1!) or the ID that was provided when loading the structure.
+     * If `structureNumberOrId` is undefined, return refs for all loaded structures. */
+    PDBeMolstarPlugin.prototype.getStructures = function (structureNumberOrId) {
+        var allStructures = this.plugin.managers.structure.hierarchy.current.structures.map(function (structureRef, i) { return ({ structureRef: structureRef, number: i + 1 }); });
+        if (typeof structureNumberOrId === 'number') {
+            var theStructure = allStructures[structureNumberOrId - 1];
+            return theStructure ? [theStructure] : [];
+        }
+        else if (typeof structureNumberOrId === 'string') {
+            var structRef_1 = this.structureRefMap.get(structureNumberOrId);
+            if (structRef_1 === undefined) {
+                return [];
+            }
+            var found = allStructures.find(function (s) { return s.structureRef.cell.transform.ref === structRef_1; });
+            if (found) {
+                return [found];
+            }
+            else {
+                this.structureRefMap.delete(structureNumberOrId); // remove outdated record
+                return [];
+            }
+        }
+        else {
+            return allStructures;
+        }
+    };
+    /** Get StructureRef for a structure with given `structureNumberOrId`.
+     * `structureNumberOrId` is either index (numbered from 1!) or the ID that was provided when loading the structure. */
+    PDBeMolstarPlugin.prototype.getStructure = function (structureNumberOrId) {
+        var _a;
+        return (_a = this.getStructures(structureNumberOrId)[0]) === null || _a === void 0 ? void 0 : _a.structureRef;
+    };
+    PDBeMolstarPlugin.prototype.clear = function () {
+        return tslib_1.__awaiter(this, void 0, void 0, function () {
+            return tslib_1.__generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, this.plugin.clear()];
+                    case 1:
+                        _a.sent();
+                        this.assemblyRef = '';
+                        this.addedReprs = {};
+                        this.isHighlightColorUpdated = false;
+                        this.isSelectedColorUpdated = false;
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    /** Helper functions related to specific views or use cases */
+    PDBeMolstarPlugin.extensions = {
+        foldseek: Foldseek,
+    };
+    return PDBeMolstarPlugin;
+}());
+exports.PDBeMolstarPlugin = PDBeMolstarPlugin;