drugflow-molstar 0.2.10 → 0.3.1

package/lib/index2.js

@@ -0,0 +1,1369 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var spec_1 = require("./spec");
+var commands_1 = require("Molstar/mol-plugin/commands");
+var mol_state_1 = require("Molstar/mol-state");
+var loci_1 = require("Molstar/mol-model/loci");
+var rx_event_helper_1 = require("Molstar/mol-util/rx-event-helper");
+var helpers_1 = require("./helpers");
+var pdbe_structure_controls_1 = require("./ui/pdbe-structure-controls");
+var pdbe_viewport_controls_1 = require("./ui/pdbe-viewport-controls");
+var mol_state_2 = require("Molstar/mol-state");
+var structure_focus_representation_1 = require("Molstar/mol-plugin/behavior/dynamic/selection/structure-focus-representation");
+var spec_2 = require("Molstar/mol-plugin/spec");
+var transformers_1 = require("Molstar/mol-plugin/behavior/dynamic/volume-streaming/transformers");
+var structure_representation_params_1 = require("Molstar/mol-plugin-state/helpers/structure-representation-params");
+var subscribe_events_1 = require("./subscribe-events");
+var pdbe_left_panel_1 = require("./ui/pdbe-left-panel");
+var superposition_1 = require("./superposition");
+var custom_events_1 = require("./custom-events");
+var assets_1 = require("Molstar/mol-util/assets");
+var config_1 = require("Molstar/mol-plugin/config");
+var color_1 = require("Molstar/mol-util/color/color");
+var component_1 = require("Molstar/mol-plugin-state/manager/structure/component");
+var param_definition_1 = require("Molstar/mol-util/param-definition");
+var behavior_1 = require("./domain-annotations/behavior");
+var pdbe_1 = require("Molstar/extensions/pdbe");
+var behavior_2 = require("Molstar/extensions/model-archive/quality-assessment/behavior");
+var structure_overpaint_1 = require("Molstar/mol-plugin-state/helpers/structure-overpaint");
+var superposition_focus_representation_1 = require("./superposition-focus-representation");
+var superposition_viewport_1 = require("./ui/superposition-viewport");
+var representation_1 = require("Molstar/mol-plugin/behavior/dynamic/representation");
+var camera_1 = require("molstar/lib/mol-plugin/behavior/dynamic/camera");
+var mp4_export_1 = require("Molstar/extensions/mp4-export");
+var geo_export_1 = require("Molstar/extensions/geo-export");
+var element_symbol_1 = require("Molstar/mol-theme/color/element-symbol");
+var model_index_1 = require("Molstar/mol-plugin-state/animation/built-in/model-index");
+var camera_spin_1 = require("Molstar/mol-plugin-state/animation/built-in/camera-spin");
+var state_snapshots_1 = require("Molstar/mol-plugin-state/animation/built-in/state-snapshots");
+var state_interpolation_1 = require("Molstar/mol-plugin-state/animation/built-in/state-interpolation");
+var spin_structure_1 = require("Molstar/mol-plugin-state/animation/built-in/spin-structure");
+var camera_rock_1 = require("Molstar/mol-plugin-state/animation/built-in/camera-rock");
+var assembly_unwind_1 = require("Molstar/mol-plugin-state/animation/built-in/assembly-unwind");
+var builder_1 = require("molstar/lib/mol-script/language/builder");
+var names_1 = require("molstar/lib/mol-util/color/names");
+var units_visual_1 = require("molstar/lib/mol-repr/structure/units-visual");
+var param_definition_2 = require("molstar/lib/mol-util/param-definition");
+var representation_2 = require("molstar/lib/mol-repr/structure/representation");
+var structure_selection_query_1 = require("molstar/lib/mol-plugin-state/helpers/structure-selection-query");
+var representation_3 = require("molstar/lib/mol-repr/representation");
+var box_1 = require("molstar/lib/mol-geo/geometry/mesh/builder/box");
+var mesh_builder_1 = require("molstar/lib/mol-geo/geometry/mesh/mesh-builder");
+var linear_algebra_1 = require("molstar/lib/mol-math/linear-algebra");
+var int_1 = require("molstar/lib/mol-data/int");
+var location_iterator_1 = require("molstar/lib/mol-geo/util/location-iterator");
+var location_1 = require("molstar/lib/mol-model/location");
+var loci_2 = require("molstar/lib/mol-model/loci");
+var structure_1 = require("molstar/lib/mol-model/structure");
+var mol_task_1 = require("molstar/lib/mol-task");
+var state_1 = require("molstar/lib/mol-plugin/behavior/static/state");
+var transforms_1 = require("molstar/lib/mol-plugin-state/transforms");
+// import { StateBuilder} from 'molstar/lib/mol-state'
+// import { Download } from 'molstar/lib/mol-plugin-state/transforms/data'
+require('Molstar/mol-plugin-ui/skin/dark.scss');
+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;
+        this.get_quick_querys = function (structure, pdb_string) {
+            var ligand_queries = _this.get_ligand_queries(pdb_string);
+            var chain_queries = _this.get_chain_queries(pdb_string);
+            var pocket_queries = _this.get_pocket_queries(ligand_queries, 5);
+            var water = structure_selection_query_1.StructureSelectionQueries.water;
+            return {
+                ligands: ligand_queries,
+                chains: chain_queries,
+                pockets: pocket_queries,
+                water: [water]
+            };
+        };
+        this.get_pocket_queries = function (ligand_queries, radius) {
+            // 同名的ligand_query会被合并
+            var queries = [];
+            for (var i = 0; i < ligand_queries.length; i++) {
+                var label = _this.get_ligand_query_name(ligand_queries[i]);
+                var core = builder_1.MolScriptBuilder.struct.generator.atomGroups({
+                    'residue-test': builder_1.MolScriptBuilder.core.set.has([builder_1.MolScriptBuilder.set.apply(builder_1.MolScriptBuilder, [label]), builder_1.MolScriptBuilder.ammp('auth_comp_id')])
+                });
+                var surrounding = builder_1.MolScriptBuilder.struct.modifier.union([
+                    builder_1.MolScriptBuilder.struct.modifier.exceptBy({
+                        0: builder_1.MolScriptBuilder.struct.modifier.includeSurroundings({
+                            0: core,
+                            radius: radius,
+                            'as-whole-residues': true
+                        }),
+                        by: core
+                    })
+                ]);
+                var ligand_expand_q = (0, structure_selection_query_1.StructureSelectionQuery)('Surrounding Residues (5 \u212B) of ' + label, surrounding, {
+                    description: 'Select residues within 5 \u212B of ' + label,
+                    category: structure_selection_query_1.StructureSelectionCategory.Manipulate,
+                    referencesCurrent: true
+                });
+                queries.push({ query: ligand_expand_q, expression: surrounding, label: label });
+            }
+            return queries;
+        };
+        this.ownResidueQuery = function (chain_name, residue_name_list, residue_id, category, priority) {
+            if (priority === void 0) {
+                priority = 0;
+            }
+            var description = '[' + residue_name_list[0] + ']|' + chain_name + ':' + residue_name_list[0] + ':' + residue_id;
+            return (0, structure_selection_query_1.StructureSelectionQuery)(description, builder_1.MolScriptBuilder.struct.modifier.union([
+                builder_1.MolScriptBuilder.struct.generator.atomGroups({
+                    'chain-test': builder_1.MolScriptBuilder.core.rel.eq([builder_1.MolScriptBuilder.ammp('auth_asym_id'), chain_name]),
+                    'residue-test': builder_1.MolScriptBuilder.core.rel.eq([builder_1.MolScriptBuilder.ammp('auth_seq_id'), Number(residue_id)])
+                    // 'residue-test-comp': MS.core.set.has([MS.set.apply(MS, residue_name_list), MS.ammp('auth_comp_id')])
+                })
+            ]), { category: category, priority: priority, description: description });
+        };
+        this.applyVisualParams = function () {
+            var TagRefs = {
+                'structure-component-static-polymer': 'polymer',
+                'structure-component-static-ligand': 'het',
+                'structure-component-static-branched': 'carbs',
+                'structure-component-static-water': 'water',
+                'structure-component-static-coarse': 'coarse',
+                'non-standard': 'nonStandard'
+            };
+            var componentGroups = _this.plugin.managers.structure.hierarchy.currentComponentGroups;
+            componentGroups.forEach(function (compGrp) {
+                var _a;
+                var compGrpIndex = compGrp.length - 1;
+                var key = compGrp[compGrpIndex].key;
+                var rm = false;
+                if (key && _this.initParams.hideStructure) {
+                    var structType = TagRefs[key];
+                    if (structType && ((_a = _this.initParams.hideStructure) === null || _a === void 0 ? void 0 : _a.indexOf(structType)) > -1)
+                        rm = true;
+                }
+                if (rm) {
+                    _this.plugin.managers.structure.hierarchy.remove([compGrp[compGrpIndex]]);
+                }
+                if (!rm && _this.initParams.visualStyle) {
+                    if (compGrp[compGrpIndex] && compGrp[compGrpIndex].representations) {
+                        compGrp[compGrpIndex].representations.forEach(function (rep) {
+                            var currentParams = (0, structure_representation_params_1.createStructureRepresentationParams)(_this.plugin, void 0, { type: _this.initParams.visualStyle });
+                            _this.plugin.managers.structure.component.updateRepresentations([compGrp[compGrpIndex]], rep, currentParams);
+                        });
+                    }
+                }
+            });
+        };
+        this.canvas = {
+            toggleControls: function (isVisible) {
+                if (typeof isVisible === 'undefined')
+                    isVisible = !_this.plugin.layout.state.showControls;
+                commands_1.PluginCommands.Layout.Update(_this.plugin, { state: { showControls: isVisible } });
+            },
+            toggleExpanded: function (isExpanded) {
+                if (typeof isExpanded === 'undefined')
+                    isExpanded = !_this.plugin.layout.state.isExpanded;
+                commands_1.PluginCommands.Layout.Update(_this.plugin, { state: { isExpanded: isExpanded } });
+            },
+            setBgColor: function (color) {
+                if (!color)
+                    return;
+                _this.canvas.applySettings({ color: color });
+            },
+            applySettings: function (settings) {
+                if (!settings)
+                    return;
+                var rendererParams = {};
+                if (settings.color)
+                    rendererParams['backgroundColor'] = color_1.Color.fromRgb(settings.color.r, settings.color.g, settings.color.b);
+                if (settings.lighting)
+                    rendererParams['style'] = { name: settings.lighting };
+                var renderer = _this.plugin.canvas3d.props.renderer;
+                commands_1.PluginCommands.Canvas3D.SetSettings(_this.plugin, { settings: { renderer: tslib_1.__assign(tslib_1.__assign({}, renderer), rendererParams) } });
+            },
+            toggleSelect: function (isSelect) {
+                _this.plugin.selectionMode = !isSelect;
+            }
+        };
+        this.visual = {
+            highlight: function (params) {
+                var loci = _this.getLociForParams(params.data, params.structureNumber);
+                if (loci_1.Loci.isEmpty(loci))
+                    return;
+                if (params.color) {
+                    _this.visual.setColor({ highlight: params.color });
+                }
+                _this.plugin.managers.interactivity.lociHighlights.highlightOnly({ loci: loci });
+                if (params.focus)
+                    _this.plugin.managers.camera.focusLoci(loci);
+            },
+            clearHighlight: function () { return tslib_1.__awaiter(_this, void 0, void 0, function () {
+                return tslib_1.__generator(this, function (_a) {
+                    this.plugin.managers.interactivity.lociHighlights.highlightOnly({ loci: loci_1.EmptyLoci });
+                    if (this.isHighlightColorUpdated)
+                        this.visual.reset({ highlightColor: true });
+                    return [2 /*return*/];
+                });
+            }); },
+            hideSelect: function () { return tslib_1.__awaiter(_this, void 0, void 0, function () {
+                var sel, components, _i, sel_1, s;
+                return tslib_1.__generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            sel = this.plugin.managers.structure.hierarchy.getStructuresWithSelection();
+                            components = [];
+                            for (_i = 0, sel_1 = sel; _i < sel_1.length; _i++) {
+                                s = sel_1[_i];
+                                components.push.apply(components, s.components);
+                            }
+                            if (components.length === 0)
+                                return [2 /*return*/];
+                            return [4 /*yield*/, this.plugin.managers.structure.component.modifyByCurrentSelection(components, 'subtract')];
+                        case 1:
+                            _a.sent();
+                            return [2 /*return*/];
+                    }
+                });
+            }); },
+            showSelect: function () { return tslib_1.__awaiter(_this, void 0, void 0, function () {
+                var sel, components, _i, sel_1, s;
+                return tslib_1.__generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            sel = this.plugin.managers.structure.hierarchy.getStructuresWithSelection();
+                            console.log('sel', sel);
+                            console.log('sele', this.plugin.managers.structure.hierarchy.selection);
+                            components = [];
+                            for (_i = 0, sel_1 = sel; _i < sel_1.length; _i++) {
+                                s = sel_1[_i];
+                                components.push.apply(components, s.components);
+                            }
+                            if (components.length === 0)
+                                return [2 /*return*/];
+                            return [4 /*yield*/, this.plugin.managers.structure.component.modifyByCurrentSelection(components, 'union')];
+                        case 1:
+                            _a.sent();
+                            return [2 /*return*/];
+                    }
+                });
+            }); },
+            changeProps: function (val) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
+                return tslib_1.__generator(this, function (_a) {
+                    //todo 切换选中粒度
+                    this.plugin.managers.interactivity.setProps({ granularity: val });
+                    return [2 /*return*/];
+                });
+            }); },
+            select: function (params) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
+                var _a, _b, param, loci, repr, defaultParams, defaultValues, values, structures, updatedStructureData, comps, lastCompsIndex, recentRepComp, uniformColor, e_1_1;
+                var e_1, _c;
+                return tslib_1.__generator(this, function (_d) {
+                    switch (_d.label) {
+                        case 0:
+                            _d.trys.push([0, 7, 8, 13]);
+                            _a = tslib_1.__asyncValues(params.data);
+                            _d.label = 1;
+                        case 1: return [4 /*yield*/, _a.next()];
+                        case 2:
+                            if (!(_b = _d.sent(), !_b.done)) return [3 /*break*/, 6];
+                            param = _b.value;
+                            loci = this.getLociForParams([param], params.structureNumber);
+                            if (loci_1.Loci.isEmpty(loci))
+                                return [2 /*return*/];
+                            // set default selection color to minimise change display
+                            // this.visual.setColor({select: param.color ? param.color : { r:255, g:112, b:3}});
+                            // apply selection
+                            this.plugin.managers.interactivity.lociSelects.select({ loci: loci });
+                            if (!(param.sideChain || param.representation)) return [3 /*break*/, 4];
+                            repr = 'ball-and-stick';
+                            if (param.representation)
+                                repr = param.representation;
+                            defaultParams = component_1.StructureComponentManager.getAddParams(this.plugin, { allowNone: false, hideSelection: true, checkExisting: true });
+                            defaultValues = param_definition_1.ParamDefinition.getDefaultValues(defaultParams);
+                            defaultValues.options = { label: 'selection-by-script', checkExisting: params.structureNumber ? false : true };
+                            values = tslib_1.__assign(tslib_1.__assign({}, defaultValues), { representation: repr });
+                            structures = this.plugin.managers.structure.hierarchy.getStructuresWithSelection();
+                            return [4 /*yield*/, this.plugin.managers.structure.component.add(values, structures)];
+                        case 3:
+                            _d.sent();
+                            // Apply uniform theme
+                            if (param.representationColor) {
+                                updatedStructureData = this.plugin.managers.structure.hierarchy.current.structures;
+                                if (params.structureNumber) {
+                                    updatedStructureData = [this.plugin.managers.structure.hierarchy.current.structures[params.structureNumber - 1]];
+                                }
+                                comps = updatedStructureData[0].components;
+                                lastCompsIndex = comps.length - 1;
+                                recentRepComp = [comps[lastCompsIndex]];
+                                uniformColor = param.representationColor ? this.normalizeColor(param.representationColor) : color_1.Color.fromRgb(255, 112, 3);
+                                this.plugin.managers.structure.component.updateRepresentationsTheme(recentRepComp, { color: 'uniform', colorParams: { value: uniformColor } });
+                            }
+                            params.addedRepr = true;
+                            _d.label = 4;
+                        case 4:
+                            // focus loci
+                            if (param.focus)
+                                this.plugin.managers.camera.focusLoci(loci);
+                            _d.label = 5;
+                        case 5: return [3 /*break*/, 1];
+                        case 6: return [3 /*break*/, 13];
+                        case 7:
+                            e_1_1 = _d.sent();
+                            e_1 = { error: e_1_1 };
+                            return [3 /*break*/, 13];
+                        case 8:
+                            _d.trys.push([8, , 11, 12]);
+                            if (!(_b && !_b.done && (_c = _a.return))) return [3 /*break*/, 10];
+                            return [4 /*yield*/, _c.call(_a)];
+                        case 9:
+                            _d.sent();
+                            _d.label = 10;
+                        case 10: return [3 /*break*/, 12];
+                        case 11:
+                            if (e_1) throw e_1.error;
+                            return [7 /*endfinally*/];
+                        case 12: return [7 /*endfinally*/];
+                        case 13:
+                            // reset selection color
+                            this.visual.reset({ selectColor: true });
+                            // save selection params to optimise clear
+                            this.selectedParams = params;
+                            return [2 /*return*/];
+                    }
+                });
+            }); },
+            clearSelection: function (structureNumber) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
+                var structIndex, selReprCells, _a, _b, c, selReprCells_1, selReprCells_1_1, selReprCell, e_2_1;
+                var e_2, _c;
+                return tslib_1.__generator(this, function (_d) {
+                    switch (_d.label) {
+                        case 0:
+                            structIndex = structureNumber ? structureNumber - 1 : 0;
+                            this.plugin.managers.interactivity.lociSelects.deselectAll();
+                            // reset theme to default
+                            if (this.selectedParams && this.selectedParams.nonSelectedColor) {
+                                this.visual.reset({ theme: true });
+                            }
+                            // remove overpaints
+                            return [4 /*yield*/, (0, structure_overpaint_1.clearStructureOverpaint)(this.plugin, this.plugin.managers.structure.hierarchy.current.structures[structIndex].components)];
+                        case 1:
+                            // remove overpaints
+                            _d.sent();
+                            if (!(this.selectedParams && this.selectedParams.addedRepr)) return [3 /*break*/, 15];
+                            selReprCells = [];
+                            for (_a = 0, _b = this.plugin.managers.structure.hierarchy.current.structures[structIndex].components; _a < _b.length; _a++) {
+                                c = _b[_a];
+                                if (c.cell && c.cell.params && c.cell.params.values && c.cell.params.values.label === 'selection-by-script')
+                                    selReprCells.push(c.cell);
+                            }
+                            if (!(selReprCells.length > 0)) return [3 /*break*/, 15];
+                            _d.label = 2;
+                        case 2:
+                            _d.trys.push([2, 8, 9, 14]);
+                            selReprCells_1 = tslib_1.__asyncValues(selReprCells);
+                            _d.label = 3;
+                        case 3: return [4 /*yield*/, selReprCells_1.next()];
+                        case 4:
+                            if (!(selReprCells_1_1 = _d.sent(), !selReprCells_1_1.done)) return [3 /*break*/, 7];
+                            selReprCell = selReprCells_1_1.value;
+                            return [4 /*yield*/, commands_1.PluginCommands.State.RemoveObject(this.plugin, { state: selReprCell.parent, ref: selReprCell.transform.ref })];
+                        case 5:
+                            _d.sent();
+                            _d.label = 6;
+                        case 6: return [3 /*break*/, 3];
+                        case 7: return [3 /*break*/, 14];
+                        case 8:
+                            e_2_1 = _d.sent();
+                            e_2 = { error: e_2_1 };
+                            return [3 /*break*/, 14];
+                        case 9:
+                            _d.trys.push([9, , 12, 13]);
+                            if (!(selReprCells_1_1 && !selReprCells_1_1.done && (_c = selReprCells_1.return))) return [3 /*break*/, 11];
+                            return [4 /*yield*/, _c.call(selReprCells_1)];
+                        case 10:
+                            _d.sent();
+                            _d.label = 11;
+                        case 11: return [3 /*break*/, 13];
+                        case 12:
+                            if (e_2) throw e_2.error;
+                            return [7 /*endfinally*/];
+                        case 13: return [7 /*endfinally*/];
+                        case 14:
+                            ;
+                            _d.label = 15;
+                        case 15:
+                            this.selectedParams = undefined;
+                            return [2 /*return*/];
+                    }
+                });
+            }); },
+            update: function (options, fullLoad) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
+                var param, settings, dataSource;
+                return tslib_1.__generator(this, function (_a) {
+                    if (!options)
+                        return [2 /*return*/];
+                    // for(let param in this.initParams){
+                    //     if(options[param]) this.initParams[param] = options[param];
+                    // }
+                    this.initParams = tslib_1.__assign({}, spec_1.DefaultParams);
+                    for (param in spec_1.DefaultParams) {
+                        if (typeof options[param] !== 'undefined')
+                            this.initParams[param] = options[param];
+                    }
+                    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];
+                    this.plugin.customState.initParams = this.initParams;
+                    // Set background colour
+                    if (this.initParams.bgColor || this.initParams.lighting) {
+                        settings = {};
+                        if (this.initParams.bgColor)
+                            settings.color = this.initParams.bgColor;
+                        if (this.initParams.lighting)
+                            settings.lighting = this.initParams.lighting;
+                        this.canvas.applySettings(settings);
+                    }
+                    dataSource = this.getMoleculeSrcUrl();
+                    if (dataSource) {
+                        this.load({ url: dataSource.url, format: dataSource.format, assemblyId: this.initParams.assemblyId, isBinary: dataSource.isBinary }, fullLoad);
+                    }
+                    return [2 /*return*/];
+                });
+            }); },
+            visibility: function (data) {
+                if (!data)
+                    return;
+                var refMap = {
+                    polymer: 'structure-component-static-polymer',
+                    het: 'structure-component-static-ligand',
+                    water: 'structure-component-static-water',
+                    carbs: 'structure-component-static-branched',
+                    maps: 'volume-streaming-info'
+                };
+                for (var visual in data) {
+                    var tagName = refMap[visual];
+                    var componentRef = mol_state_2.StateSelection.findTagInSubtree(_this.plugin.state.data.tree, mol_state_1.StateTransform.RootRef, tagName);
+                    if (componentRef) {
+                        var compVisual = _this.plugin.state.data.select(componentRef)[0];
+                        if (compVisual && compVisual.obj) {
+                            var currentlyVisible = (compVisual.state && compVisual.state.isHidden) ? false : true;
+                            if (data[visual] !== currentlyVisible) {
+                                commands_1.PluginCommands.State.ToggleVisibility(_this.plugin, { state: _this.state, ref: componentRef });
+                            }
+                        }
+                    }
+                }
+            },
+            toggleSpin: function (isSpinning, resetCamera) {
+                if (!_this.plugin.canvas3d)
+                    return;
+                var trackball = _this.plugin.canvas3d.props.trackball;
+                var 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 } };
+                }
+                commands_1.PluginCommands.Canvas3D.SetSettings(_this.plugin, { settings: { trackball: tslib_1.__assign(tslib_1.__assign({}, trackball), { animate: toggleSpinParam }) } });
+                if (resetCamera)
+                    commands_1.PluginCommands.Camera.Reset(_this.plugin, {});
+            },
+            focus: function (params, structureNumber) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
+                var loci;
+                return tslib_1.__generator(this, function (_a) {
+                    loci = this.getLociForParams(params, structureNumber);
+                    this.plugin.managers.camera.focusLoci(loci);
+                    return [2 /*return*/];
+                });
+            }); },
+            setColor: function (param) {
+                if (!_this.plugin.canvas3d)
+                    return;
+                var renderer = _this.plugin.canvas3d.props.renderer;
+                var rParam = {};
+                if (param.highlight)
+                    rParam['highlightColor'] = _this.normalizeColor(param.highlight);
+                if (param.select)
+                    rParam['selectColor'] = _this.normalizeColor(param.select);
+                commands_1.PluginCommands.Canvas3D.SetSettings(_this.plugin, { settings: { renderer: tslib_1.__assign(tslib_1.__assign({}, renderer), rParam) } });
+                if (rParam.highlightColor)
+                    _this.isHighlightColorUpdated = true;
+            },
+            reset: function (params) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
+                var defaultTheme_1, componentGroups, renderer, rParam;
+                var _this = this;
+                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) {
+                                defaultTheme_1 = { color: this.initParams.alphafoldView ? 'plddt-confidence' : 'default' };
+                                componentGroups = this.plugin.managers.structure.hierarchy.currentComponentGroups;
+                                componentGroups.forEach(function (compGrp) {
+                                    _this.plugin.managers.structure.component.updateRepresentationsTheme(compGrp, defaultTheme_1);
+                                });
+                            }
+                            if (params.highlightColor || params.selectColor) {
+                                if (!this.plugin.canvas3d)
+                                    return [2 /*return*/];
+                                renderer = this.plugin.canvas3d.props.renderer;
+                                rParam = {};
+                                if (params.highlightColor)
+                                    rParam['highlightColor'] = this.defaultRendererProps.highlightColor;
+                                if (params.selectColor)
+                                    rParam['selectColor'] = this.defaultRendererProps.selectColor;
+                                commands_1.PluginCommands.Canvas3D.SetSettings(this.plugin, { settings: { renderer: tslib_1.__assign(tslib_1.__assign({}, renderer), rParam) } });
+                                if (rParam.highlightColor)
+                                    this.isHighlightColorUpdated = false;
+                            }
+                            return [2 /*return*/];
+                    }
+                });
+            }); }
+        };
+        this.ArbitrarySphereVisuals = {
+            'arbitrary-sphere': function (ctx, getParams) { return (0, representation_2.UnitsRepresentation)('Arbitrary sphere mesh', ctx, getParams, _this.ArbitrarySphereVisual); }
+        };
+        this.ArbitrarySphereParams = tslib_1.__assign(tslib_1.__assign({}, units_visual_1.UnitsMeshParams), { x: param_definition_2.ParamDefinition.Numeric(0), y: param_definition_2.ParamDefinition.Numeric(0), z: param_definition_2.ParamDefinition.Numeric(0), l1: param_definition_2.ParamDefinition.Numeric(1), l2: param_definition_2.ParamDefinition.Numeric(1), l3: param_definition_2.ParamDefinition.Numeric(1) });
+        this.ArbitrarySphereVisual = function (materialId) {
+            return (0, units_visual_1.UnitsMeshVisual)({
+                defaultProps: param_definition_2.ParamDefinition.getDefaultValues(_this.ArbitrarySphereParams),
+                createGeometry: _this.createArbitrarySphereMesh,
+                createLocationIterator: function (structureGroup) {
+                    return (0, location_iterator_1.LocationIterator)(1, structureGroup.group.units.length, 1, function () { return location_1.NullLocation; });
+                },
+                getLoci: function (pickingId, structureGroup, id) {
+                    var objectId = pickingId.objectId;
+                    if (objectId !== id)
+                        return loci_1.EmptyLoci;
+                    return (0, loci_2.DataLoci)('arbitrary-sphere-data-loci', void 0, [0], void 0, function () { return "Yo, I'm a sphere!"; });
+                },
+                eachLocation: function (loci, structureGroup, apply) {
+                    if (loci.kind === 'data-loci' && loci.tag === 'arbitrary-sphere-data-loci') {
+                        return apply(int_1.Interval.ofBounds(0, 1));
+                    }
+                    return false;
+                },
+                setUpdateState: function (state, newProps, currentProps) {
+                    state.createGeometry = (newProps.x !== currentProps.x ||
+                        newProps.y !== currentProps.y ||
+                        newProps.z !== currentProps.z ||
+                        newProps.l1 !== currentProps.l1 ||
+                        newProps.l2 !== currentProps.l2 ||
+                        newProps.l3 !== currentProps.l3);
+                }
+            }, materialId);
+        };
+        this.ConfalPyramidsRepresentation = function (ctx, getParams) {
+            return representation_3.Representation.createMulti('Confal Pyramids', ctx, getParams, representation_2.StructureRepresentationStateBuilder, _this.ArbitrarySphereVisuals);
+        };
+        this.ArbitrarySphereRepresentationProvider = (0, representation_2.StructureRepresentationProvider)({
+            name: 'arbitrary-sphere',
+            label: 'Arbitrary sphere',
+            description: 'Displays an arbitrary sphere at given coordinates',
+            factory: this.ConfalPyramidsRepresentation,
+            getParams: function (ctx, structure) { return param_definition_2.ParamDefinition.clone(_this.ArbitrarySphereParams); },
+            defaultValues: param_definition_2.ParamDefinition.getDefaultValues(this.ArbitrarySphereParams),
+            defaultColorTheme: { name: 'uniform' },
+            defaultSizeTheme: { name: 'uniform' },
+            isApplicable: function (structure) { return true; }
+        });
+        this.createArbitrarySphereMesh = function (ctx, unit, structure, theme, props, mesh) {
+            var mb = mesh_builder_1.MeshBuilder.createState(16, 16, mesh);
+            mb.currentGroup = 0;
+            var min = (0, linear_algebra_1.Vec3)();
+            var max = (0, linear_algebra_1.Vec3)();
+            min[0] = props.x - (props.l1 / 2);
+            min[1] = props.y - (props.l2 / 2);
+            min[2] = props.z - (props.l3 / 2);
+            max[0] = props.x + (props.l1 / 2);
+            max[1] = props.y + (props.l2 / 2);
+            max[2] = props.z + (props.l3 / 2);
+            // addSphere(mb, position, props.radius, 2)
+            (0, box_1.addBoundingBox)(mb, { min: min, max: max }, 0.1, 1, 1);
+            return mesh_builder_1.MeshBuilder.getMesh(mb);
+        };
+    }
+    PDBeMolstarPlugin.prototype.render = function (target, options) {
+        var _a;
+        return tslib_1.__awaiter(this, void 0, void 0, function () {
+            var param, defaultPDBeSpec, pdbePluginSpec, _b, settings, dataSource;
+            return tslib_1.__generator(this, function (_c) {
+                switch (_c.label) {
+                    case 0:
+                        if (!options)
+                            return [2 /*return*/];
+                        this.initParams = tslib_1.__assign({}, spec_1.DefaultParams);
+                        for (param in spec_1.DefaultParams) {
+                            if (typeof options[param] !== 'undefined')
+                                this.initParams[param] = options[param];
+                        }
+                        defaultPDBeSpec = (0, spec_1.DefaultPluginUISpec)();
+                        pdbePluginSpec = {
+                            actions: tslib_1.__spreadArray([], defaultPDBeSpec.actions || [], true),
+                            behaviors: tslib_1.__spreadArray([], defaultPDBeSpec.behaviors, true),
+                            animations: tslib_1.__spreadArray([], defaultPDBeSpec.animations || [], true),
+                            customParamEditors: defaultPDBeSpec.customParamEditors,
+                            config: defaultPDBeSpec.config
+                        };
+                        if (!this.initParams.ligandView && !this.initParams.superposition && this.initParams.selectInteraction) {
+                            pdbePluginSpec.behaviors.push(spec_2.PluginSpec.Behavior(structure_focus_representation_1.StructureFocusRepresentation));
+                        }
+                        if (this.initParams.superposition) {
+                            pdbePluginSpec.behaviors.push(spec_2.PluginSpec.Behavior(superposition_focus_representation_1.SuperpositionFocusRepresentation), spec_2.PluginSpec.Behavior(behavior_2.MAQualityAssessment, { autoAttach: true, showTooltip: true }));
+                        }
+                        // Add custom properties
+                        if (this.initParams.domainAnnotation) {
+                            pdbePluginSpec.behaviors.push(spec_2.PluginSpec.Behavior(behavior_1.PDBeDomainAnnotations, { autoAttach: true, showTooltip: false }));
+                        }
+                        if (this.initParams.validationAnnotation) {
+                            pdbePluginSpec.behaviors.push(spec_2.PluginSpec.Behavior(pdbe_1.PDBeStructureQualityReport, { autoAttach: true, showTooltip: false }));
+                        }
+                        pdbePluginSpec.layout = {
+                            initial: {
+                                isExpanded: this.initParams.landscape ? false : this.initParams.expanded,
+                                showControls: !this.initParams.hideControls
+                            }
+                        };
+                        pdbePluginSpec.components = {
+                            controls: {
+                                left: pdbe_left_panel_1.LeftPanelControls,
+                                // right: DefaultStructureTools,
+                                top: 'none',
+                                bottom: 'none'
+                            },
+                            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_2.PluginSpec.Behavior(behavior_2.MAQualityAssessment, { autoAttach: true, showTooltip: true }));
+                        }
+                        if (this.initParams.sequencePanel) {
+                            if ((_a = pdbePluginSpec.components.controls) === null || _a === void 0 ? void 0 : _a.top)
+                                delete pdbePluginSpec.components.controls.top;
+                        }
+                        pdbePluginSpec.config = [
+                            [
+                                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_2.PluginSpec.Behavior(mp4_export_1.Mp4Export));
+                            pdbePluginSpec.behaviors.push(spec_2.PluginSpec.Behavior(geo_export_1.GeometryExport));
+                        }
+                        if (this.initParams.hideCanvasControls) {
+                            if (this.initParams.hideCanvasControls.indexOf('expand') > -1)
+                                pdbePluginSpec.config.push([config_1.PluginConfig.Viewport.ShowExpand, false]);
+                            if (this.initParams.hideCanvasControls.indexOf('selection') > -1)
+                                pdbePluginSpec.config.push([config_1.PluginConfig.Viewport.ShowSelectionMode, false]);
+                            if (this.initParams.hideCanvasControls.indexOf('animation') > -1)
+                                pdbePluginSpec.config.push([config_1.PluginConfig.Viewport.ShowAnimation, false]);
+                        }
+                        ;
+                        if (this.initParams.landscape && pdbePluginSpec.layout && pdbePluginSpec.layout.initial)
+                            pdbePluginSpec.layout.initial['controlsDisplay'] = 'landscape';
+                        if (this.initParams.reactive && pdbePluginSpec.layout && pdbePluginSpec.layout.initial)
+                            pdbePluginSpec.layout.initial['controlsDisplay'] = 'reactive';
+                        // override default event bindings
+                        if (this.initParams.selectBindings) {
+                            pdbePluginSpec.behaviors.push(spec_2.PluginSpec.Behavior(representation_1.SelectLoci, { bindings: this.initParams.selectBindings }));
+                        }
+                        if (this.initParams.focusBindings) {
+                            pdbePluginSpec.behaviors.push(spec_2.PluginSpec.Behavior(camera_1.FocusLoci, { bindings: this.initParams.focusBindings }));
+                        }
+                        this.targetElement = typeof target === 'string' ? document.getElementById(target) : target;
+                        // Create/ Initialise Plugin
+                        _b = this;
+                        return [4 /*yield*/, (0, spec_1.createPluginUI)(this.targetElement, pdbePluginSpec)];
+                    case 1:
+                        // Create/ Initialise Plugin
+                        _b.plugin = _c.sent();
+                        this.plugin.customState.initParams = tslib_1.__assign({}, this.initParams);
+                        this.plugin.customState.events = {
+                            segmentUpdate: this._ev(),
+                            superpositionInit: this._ev(),
+                            isBusy: this._ev()
+                        };
+                        // Set background colour
+                        if (this.initParams.bgColor || this.initParams.lighting) {
+                            settings = {};
+                            if (this.initParams.bgColor)
+                                settings.color = this.initParams.bgColor;
+                            if (this.initParams.lighting)
+                                settings.lighting = this.initParams.lighting;
+                            this.canvas.applySettings(settings);
+                        }
+                        // 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);
+                        if (this.initParams.superposition) {
+                            // Set left panel tab
+                            this.plugin.behaviors.layout.leftPanelTabName.next('segments');
+                            // Initialise superposition
+                            (0, superposition_1.initSuperposition)(this.plugin);
+                        }
+                        else {
+                            // Collapse left panel and set left panel tab to none
+                            commands_1.PluginCommands.Layout.Update(this.plugin, { state: { regionState: tslib_1.__assign(tslib_1.__assign({}, this.plugin.layout.state.regionState), { left: 'collapsed' }) } });
+                            this.plugin.behaviors.layout.leftPanelTabName.next('none');
+                            dataSource = this.getMoleculeSrcUrl();
+                            if (dataSource) {
+                                this.load({ url: dataSource.url, format: dataSource.format, assemblyId: this.initParams.assemblyId, isBinary: dataSource.isBinary, pdb_string: dataSource.pdb_string });
+                            }
+                            // 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);
+                        }
+                        this.plugin.representation.structure.registry.add(this.ArbitrarySphereRepresentationProvider);
+                        return [4 /*yield*/, this.plugin.init()];
+                    case 2:
+                        _c.sent();
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    PDBeMolstarPlugin.prototype.getMoleculeSrcUrl = function () {
+        var supportedFormats = ['mmcif', 'pdb', 'sdf'];
+        var id = this.initParams.moleculeId;
+        // if(!id && !this.initParams.customData){
+        //     throw new Error(`Mandatory parameters missing!`);
+        // }
+        var query = 'full';
+        var sep = '?';
+        if (this.initParams.ligandView) {
+            var queryParams = ['data_source=pdb-h'];
+            if (!this.initParams.ligandView.label_comp_id_list) {
+                if (this.initParams.ligandView.label_comp_id) {
+                    queryParams.push('label_comp_id=' + this.initParams.ligandView.label_comp_id);
+                }
+                else if (this.initParams.ligandView.auth_seq_id) {
+                    queryParams.push('auth_seq_id=' + this.initParams.ligandView.auth_seq_id);
+                }
+                if (this.initParams.ligandView.auth_asym_id)
+                    queryParams.push('auth_asym_id=' + this.initParams.ligandView.auth_asym_id);
+            }
+            query = 'residueSurroundings?' + queryParams.join('&');
+            sep = '&';
+        }
+        var url = "".concat(this.initParams.pdbeUrl, "model-server/v1/").concat(id, "/").concat(query).concat(sep, "encoding=").concat(this.initParams.encoding).concat(this.initParams.lowPrecisionCoords ? '&lowPrecisionCoords=1' : '');
+        var isBinary = this.initParams.encoding === 'bcif' ? true : false;
+        var format = 'mmcif';
+        var pdb_string = undefined;
+        if (this.initParams.customData) {
+            if (!this.initParams.customData.url && !this.initParams.customData.pdb_string) {
+                throw new Error("Provide all custom data parameters");
+            }
+            if (!this.initParams.customData.format) {
+                throw new Error("Provide all custom data parameters");
+            }
+            url = this.initParams.customData.url;
+            format = this.initParams.customData.format;
+            if (format === 'cif' || format === 'bcif')
+                format = 'mmcif';
+            // Validate supported format
+            if (supportedFormats.indexOf(format) === -1) {
+                throw new Error("".concat(format, " not supported."));
+            }
+            pdb_string = this.initParams.customData.pdb_string;
+            isBinary = this.initParams.customData.binary ? this.initParams.customData.binary : false;
+        }
+        else {
+            console.log('no custom data');
+            return undefined;
+        }
+        return {
+            url: url,
+            format: format,
+            isBinary: isBinary,
+            pdb_string: pdb_string
+        };
+    };
+    Object.defineProperty(PDBeMolstarPlugin.prototype, "state", {
+        get: function () {
+            return this.plugin.state.data;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    PDBeMolstarPlugin.prototype.add_mouse_event = function (func) {
+        this.plugin.behaviors.interaction.click.subscribe(function (e) {
+            func(e);
+        });
+    };
+    PDBeMolstarPlugin.prototype.add_shape = function (structure, params) {
+        // params: {x: -10, y: -11, z: 10, radius: 8}
+        Object.assign(params, { color: names_1.ColorNames.orange });
+        return this.plugin.builders.structure.representation.addRepresentation(structure, {
+            type: 'arbitrary-sphere',
+            typeParams: params,
+            colorParams: { value: params.color }
+        });
+    };
+    PDBeMolstarPlugin.prototype.remove_shape = function (selector) {
+        var _a, _b;
+        selector.obj.data.repr.destroy();
+        (_a = this.plugin.canvas3d) === null || _a === void 0 ? void 0 : _a.remove(selector.obj.data.repr);
+        (_b = this.plugin.canvas3d) === null || _b === void 0 ? void 0 : _b.update();
+    };
+    PDBeMolstarPlugin.prototype.get_ligand_queries = function (pdb_string) {
+        var ligand_info_list = this.parse_ligand_info(pdb_string);
+        var queries = [];
+        try {
+            for (var i = 0; i < ligand_info_list.length; i++) {
+                queries.push(this.ownResidueQuery(ligand_info_list[i].chain_name, [ligand_info_list[i].residue_name], ligand_info_list[i].residue_id, 'Ligand/Non-standard Residue', 200));
+            }
+            return queries;
+        }
+        catch (e) {
+            console.error('e', e);
+        }
+    };
+    PDBeMolstarPlugin.prototype.ownChainQuery = function (chain_name, category, priority) {
+        if (priority === void 0) {
+            priority = 0;
+        }
+        var description = chain_name;
+        var res_names = ['ALA', 'ARG', 'ASN', 'ASP', 'CYS', 'GLN', 'GLU', 'GLY', 'HIS', 'ILE', 'LEU', 'LYS', 'MET', 'PHE', 'PRO', 'SER', 'THR', 'TRP', 'TYR', 'VAL'];
+        return (0, structure_selection_query_1.StructureSelectionQuery)(description, builder_1.MolScriptBuilder.struct.modifier.union([
+            builder_1.MolScriptBuilder.struct.generator.atomGroups({
+                'chain-test': builder_1.MolScriptBuilder.core.rel.eq([builder_1.MolScriptBuilder.ammp('auth_asym_id'), chain_name]),
+                'residue-test': builder_1.MolScriptBuilder.core.set.has([builder_1.MolScriptBuilder.set.apply(builder_1.MolScriptBuilder, res_names), builder_1.MolScriptBuilder.ammp('auth_comp_id')])
+            }),
+        ]), { category: category, priority: priority, description: description });
+    };
+    PDBeMolstarPlugin.prototype.get_chain_queries = function (pdb_string) {
+        var chain_info_list = this.parse_chain_info(pdb_string);
+        var queries = [];
+        try {
+            for (var i = 0; i < chain_info_list.length; i++) {
+                queries.push(this.ownChainQuery(chain_info_list[i].chain_main_name, 'Chain', 200));
+            }
+            return queries;
+        }
+        catch (e) {
+            console.error('e', e);
+            return queries;
+        }
+    };
+    PDBeMolstarPlugin.prototype.get_ligand_query_name = function (query) {
+        var label = query.label;
+        var match = label.match(/\[(.*?)\]/);
+        var extracted = match ? match[1] : null;
+        return extracted;
+    };
+    PDBeMolstarPlugin.prototype.change_repr = function (selector, params, state, comps, repr) {
+        var _a;
+        if (params === void 0) { params = undefined; }
+        if (state === void 0) { state = undefined; }
+        if (comps === void 0) { comps = undefined; }
+        if (repr === void 0) { repr = undefined; }
+        return tslib_1.__awaiter(this, void 0, void 0, function () {
+            return tslib_1.__generator(this, function (_b) {
+                // let s = selector
+                console.log('s', this.plugin.managers.structure.hierarchy.current.structures, this.plugin.state);
+                // if (params) {
+                //     const currentParams = createStructureRepresentationParams(this.plugin, void 0, params);
+                //     await this.plugin.managers.structure.component.updateRepresentations(comps, repr, currentParams)
+                // }
+                // if (state) {
+                //     s.obj.data.repr.setState(state)
+                //     this.plugin.canvas3d?.update()
+                // }
+                (0, state_1.setSubtreeVisibility)(this.plugin.state.data, this.plugin.managers.structure.hierarchy.current.structures[0].components[0].cell.transform.ref, false);
+                (_a = this.plugin.canvas3d) === null || _a === void 0 ? void 0 : _a.update();
+                return [2 /*return*/];
+            });
+        });
+    };
+    PDBeMolstarPlugin.prototype.get_component_groups = function () {
+        return this.plugin.managers.structure.hierarchy.currentComponentGroups;
+    };
+    PDBeMolstarPlugin.prototype.add_repr_on_select_expression = function (structure, select_expression, label, params, comp) {
+        if (params === void 0) { params = { type: 'ball-and-stick' }; }
+        if (comp === void 0) { comp = undefined; }
+        return tslib_1.__awaiter(this, void 0, void 0, function () {
+            var component, repr_selector;
+            return tslib_1.__generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        component = undefined;
+                        if (!!comp) return [3 /*break*/, 2];
+                        return [4 /*yield*/, this.plugin.builders.structure.tryCreateComponentFromExpression(structure, select_expression, label, { 'label': label })];
+                    case 1:
+                        component = _a.sent();
+                        return [3 /*break*/, 3];
+                    case 2:
+                        component = comp;
+                        _a.label = 3;
+                    case 3: return [4 /*yield*/, this.plugin.builders.structure.representation.addRepresentation(component, params)];
+                    case 4:
+                        repr_selector = _a.sent();
+                        return [2 /*return*/, repr_selector];
+                }
+            });
+        });
+    };
+    PDBeMolstarPlugin.prototype.highlight_and_focuson_query = function (structure, query) {
+        var _this = this;
+        var data = structure.data;
+        if (!data)
+            return;
+        this.plugin.runTask(mol_task_1.Task.create('Structure Selection', function (runtime) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
+            var selection, loci;
+            return tslib_1.__generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, query.getSelection(this.plugin, runtime, structure.data)];
+                    case 1:
+                        selection = _a.sent();
+                        loci = structure_1.StructureSelection.toLociWithSourceUnits(selection);
+                        this.plugin.managers.interactivity.lociHighlights.highlightOnly({ loci: loci });
+                        this.plugin.managers.camera.focusLoci(loci);
+                        return [2 /*return*/];
+                }
+            });
+        }); }));
+    };
+    PDBeMolstarPlugin.prototype.createLigandStructure = function (isBranched) {
+        var e_3, _a;
+        var _b;
+        return tslib_1.__awaiter(this, void 0, void 0, function () {
+            var _c, _d, comp, e_3_1, structure, ligandQuery, ligandVis, ligandSurr, ligRef, cell, ligLoci;
+            var _this = this;
+            return tslib_1.__generator(this, function (_e) {
+                switch (_e.label) {
+                    case 0:
+                        if (this.assemblyRef === '')
+                            return [2 /*return*/];
+                        _e.label = 1;
+                    case 1:
+                        _e.trys.push([1, 7, 8, 13]);
+                        _c = tslib_1.__asyncValues(this.plugin.managers.structure.hierarchy.currentComponentGroups);
+                        _e.label = 2;
+                    case 2: return [4 /*yield*/, _c.next()];
+                    case 3:
+                        if (!(_d = _e.sent(), !_d.done)) return [3 /*break*/, 6];
+                        comp = _d.value;
+                        return [4 /*yield*/, commands_1.PluginCommands.State.RemoveObject(this.plugin, { state: comp[0].cell.parent, ref: comp[0].cell.transform.ref, removeParentGhosts: true })];
+                    case 4:
+                        _e.sent();
+                        _e.label = 5;
+                    case 5: return [3 /*break*/, 2];
+                    case 6: return [3 /*break*/, 13];
+                    case 7:
+                        e_3_1 = _e.sent();
+                        e_3 = { error: e_3_1 };
+                        return [3 /*break*/, 13];
+                    case 8:
+                        _e.trys.push([8, , 11, 12]);
+                        if (!(_d && !_d.done && (_a = _c.return))) return [3 /*break*/, 10];
+                        return [4 /*yield*/, _a.call(_c)];
+                    case 9:
+                        _e.sent();
+                        _e.label = 10;
+                    case 10: return [3 /*break*/, 12];
+                    case 11:
+                        if (e_3) throw e_3.error;
+                        return [7 /*endfinally*/];
+                    case 12: return [7 /*endfinally*/];
+                    case 13:
+                        structure = this.state.select(this.assemblyRef)[0];
+                        if (isBranched) {
+                            ligandQuery = helpers_1.LigandView.branchedQuery((_b = this.initParams.ligandView) === null || _b === void 0 ? void 0 : _b.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 14:
+                        ligandVis = _e.sent();
+                        if (!ligandVis) return [3 /*break*/, 16];
+                        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 15:
+                        _e.sent();
+                        _e.label = 16;
+                    case 16: return [4 /*yield*/, this.plugin.builders.structure.tryCreateComponentFromExpression(structure, ligandQuery.surroundings, 'rest', { label: 'Surroundings' })];
+                    case 17:
+                        ligandSurr = _e.sent();
+                        if (!ligandSurr) return [3 /*break*/, 19];
+                        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 18:
+                        _e.sent();
+                        _e.label = 19;
+                    case 19:
+                        ligRef = mol_state_2.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) {
+                            ligLoci = cell.obj.data.repr.getLoci();
+                            this.plugin.managers.structure.focus.setFromLoci(ligLoci);
+                            setTimeout(function () {
+                                var _a;
+                                // focus-add is not handled in camera behavior, doing it here
+                                var current = (_a = _this.plugin.managers.structure.focus.current) === null || _a === void 0 ? void 0 : _a.loci;
+                                if (current)
+                                    _this.plugin.managers.camera.focusLoci(current);
+                            }, 500);
+                        }
+                        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, _e = _a.pdb_string, pdb_string = _e === void 0 ? '' : _e, _f = _a.if_render, if_render = _f === void 0 ? true : _f;
+        if (fullLoad === void 0) { fullLoad = true; }
+        return tslib_1.__awaiter(this, void 0, void 0, function () {
+            var isHetView, downloadOptions, isBranchedView, data, trajectory, _g, _h, asm, defaultMapParams, pdbeMapParams, pivotIndex, pivot;
+            return tslib_1.__generator(this, function (_j) {
+                switch (_j.label) {
+                    case 0:
+                        if (fullLoad)
+                            this.clear();
+                        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']] };
+                        }
+                        data = null;
+                        if (!pdb_string) return [3 /*break*/, 2];
+                        return [4 /*yield*/, this.plugin.builders.data.rawData({ data: pdb_string }, { state: { isGhost: true } })];
+                    case 1:
+                        data = _j.sent();
+                        return [3 /*break*/, 4];
+                    case 2: return [4 /*yield*/, this.plugin.builders.data.download({ url: assets_1.Asset.Url(url, downloadOptions), isBinary: isBinary }, { state: { isGhost: true } })];
+                    case 3:
+                        data = _j.sent();
+                        _j.label = 4;
+                    case 4: return [4 /*yield*/, this.plugin.builders.structure.parseTrajectory(data, format)];
+                    case 5:
+                        trajectory = _j.sent();
+                        _g = this;
+                        return [4 /*yield*/, this.plugin.builders.structure.createModel(trajectory)];
+                    case 6:
+                        _g.model = _j.sent();
+                        _h = this;
+                        return [4 /*yield*/, this.plugin.builders.structure.createStructure(this.model, { name: 'model', params: {} })];
+                    case 7:
+                        _h.structure = _j.sent();
+                        if (!if_render) return [3 /*break*/, 13];
+                        if (!!isHetView) return [3 /*break*/, 9];
+                        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 8:
+                        _j.sent();
+                        if (this.initParams.hideStructure || this.initParams.visualStyle) {
+                            this.applyVisualParams();
+                        }
+                        _j.label = 9;
+                    case 9:
+                        // show selection if param is set
+                        if (this.initParams.selection) {
+                            this.visual.select(this.initParams.selection);
+                        }
+                        if (!this.initParams.loadMaps) return [3 /*break*/, 11];
+                        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*/, 11];
+                        return [4 /*yield*/, this.plugin.runTask(this.state.applyAction(transformers_1.InitVolumeStreaming, pdbeMapParams, this.assemblyRef))];
+                    case 10:
+                        _j.sent();
+                        if (pdbeMapParams.method !== 'em' && !this.initParams.ligandView)
+                            helpers_1.PDBeVolumes.displayUsibilityMessage(this.plugin);
+                        _j.label = 11;
+                    case 11:
+                        if (!isHetView) return [3 /*break*/, 13];
+                        return [4 /*yield*/, this.createLigandStructure(isBranchedView)];
+                    case 12:
+                        _j.sent();
+                        _j.label = 13;
+                    case 13:
+                        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;
+                        this.events.loadComplete.next(true);
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    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);
+    };
+    PDBeMolstarPlugin.prototype.normalizeColor = function (colorVal, defaultColor) {
+        var color = color_1.Color.fromRgb(170, 170, 170);
+        try {
+            if (typeof colorVal.r !== 'undefined') {
+                color = color_1.Color.fromRgb(colorVal.r, colorVal.g, colorVal.b);
+            }
+            else if (colorVal[0] === '#') {
+                color = (0, color_1.Color)(Number("0x".concat(colorVal.substr(1))));
+            }
+            else {
+                color = (0, color_1.Color)(colorVal);
+            }
+        }
+        catch (e) {
+            if (defaultColor)
+                color = defaultColor;
+        }
+        return color;
+    };
+    PDBeMolstarPlugin.prototype.getObj = function (ref) {
+        var state = this.state;
+        var cell = state.select(ref)[0];
+        if (!cell || !cell.obj)
+            return void 0;
+        return cell.obj.data;
+    };
+    // private applyState(tree: StateBuilder) {
+    //     return PluginCommands.State.Update(this.plugin, { state: this.plugin.state.data, tree })
+    // }
+    PDBeMolstarPlugin.prototype.create_structure = function (model) {
+        var s = this.plugin.state.data.build().to(model).apply(transforms_1.StateTransforms.Model.StructureFromModel, { type: { name: 'model', params: {} } }, { ref: 'Structure' });
+        return s.commit({ revertOnError: true });
+        // s.apply(StateTransforms.Model.StructureComplexElement, { type: 'atomic-sequence' }, { ref: 'Polymer' })
+        // s.apply(StateTransforms.Model.StructureComplexElement, { type: 'atomic-het' }, { ref: 'Het' })
+        // s.apply(StateTransforms.Model.StructureComplexElement, { type: 'water' }, { ref: 'Water' })
+        // return s
+    };
+    PDBeMolstarPlugin.prototype.load_tree = 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, _e = _a.pdb_string, pdb_string = _e === void 0 ? '' : _e, _f = _a.if_render, if_render = _f === void 0 ? true : _f;
+        if (fullLoad === void 0) { fullLoad = true; }
+        return tslib_1.__awaiter(this, void 0, void 0, function () {
+            var state, data, trajectory, model, structureTree;
+            return tslib_1.__generator(this, function (_g) {
+                switch (_g.label) {
+                    case 0:
+                        state = this.plugin.state.data;
+                        if (!fullLoad) return [3 /*break*/, 2];
+                        return [4 /*yield*/, commands_1.PluginCommands.State.RemoveObject(this.plugin, { state: state, ref: state.tree.root.ref })];
+                    case 1:
+                        _g.sent();
+                        _g.label = 2;
+                    case 2:
+                        data = null;
+                        if (!pdb_string) return [3 /*break*/, 4];
+                        return [4 /*yield*/, this.plugin.builders.data.rawData({ data: pdb_string }, { state: { isGhost: true } })];
+                    case 3:
+                        data = _g.sent();
+                        return [3 /*break*/, 6];
+                    case 4: return [4 /*yield*/, this.plugin.builders.data.download({ url: url, isBinary: isBinary }, { state: { isGhost: true } })];
+                    case 5:
+                        data = _g.sent();
+                        _g.label = 6;
+                    case 6: return [4 /*yield*/, this.plugin.builders.structure.parseTrajectory(data, format)];
+                    case 7:
+                        trajectory = _g.sent();
+                        return [4 /*yield*/, this.plugin.builders.structure.createModel(trajectory, { modelIndex: 0 })];
+                    case 8:
+                        model = _g.sent();
+                        console.log('this.model', model);
+                        return [4 /*yield*/, this.create_structure(model)];
+                    case 9:
+                        structureTree = _g.sent();
+                        console.log('structureTree', structureTree);
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    PDBeMolstarPlugin.prototype.update_comp_repr = function (comp_ref, repr_ref, if_show, params) {
+        return tslib_1.__awaiter(this, void 0, void 0, function () {
+            var structure, tree;
+            return tslib_1.__generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        structure = this.getObj('Structure');
+                        tree = this.visual_tree(structure, comp_ref, repr_ref, if_show, params);
+                        if (!tree) {
+                            console.log('build tree failed');
+                            return [2 /*return*/];
+                        }
+                        return [4 /*yield*/, commands_1.PluginCommands.State.Update(this.plugin, { state: this.plugin.state.data, tree: tree })];
+                    case 1:
+                        _a.sent();
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    PDBeMolstarPlugin.prototype.visual_tree = function (structure, comp_ref, repr_ref, if_show, params) {
+        var update = this.plugin.state.data.build();
+        var root = update.to(comp_ref);
+        if (!if_show) {
+            root.delete(repr_ref);
+        }
+        else {
+            root.applyOrUpdate(repr_ref, transforms_1.StateTransforms.Representation.StructureRepresentation3D, (0, structure_representation_params_1.createStructureRepresentationParams)(this.plugin, structure, params));
+        }
+        return update;
+    };
+    PDBeMolstarPlugin.prototype.clear = function () {
+        return tslib_1.__awaiter(this, void 0, void 0, function () {
+            return tslib_1.__generator(this, function (_a) {
+                this.plugin.clear();
+                this.assemblyRef = '';
+                this.selectedParams = void 0;
+                this.isHighlightColorUpdated = false;
+                this.isSelectedColorUpdated = false;
+                return [2 /*return*/];
+            });
+        });
+    };
+    PDBeMolstarPlugin.prototype.parse_ligand_info = function (pdb_string) {
+        // 解析所有的配体信息
+        // chain_name
+        // name
+        // count
+        var ret_list = [];
+        var lines = pdb_string.split('\n');
+        var ligand_dict = {};
+        for (var _a = 0, lines_1 = lines; _a < lines_1.length; _a++) {
+            var line = lines_1[_a];
+            if (line.startsWith('HETATM')) {
+                var ligand_name = line.substr(17, 3).trim();
+                if (ligand_name === 'HOH') {
+                    continue;
+                }
+                var residue_id = line.substr(22, 5).trim();
+                var chain_name = line.substr(21, 1).trim();
+                var x = line.substr(30, 8).trim();
+                var y = line.substr(38, 8).trim();
+                var z = line.substr(46, 8).trim();
+                if (ligand_dict[chain_name + ':' + ligand_name + ':' + residue_id] === undefined) {
+                    ligand_dict[chain_name + ':' + ligand_name + ':' + residue_id] = {
+                        'chain_name': chain_name,
+                        'name': chain_name + ':' + ligand_name + ':' + residue_id,
+                        'residue_name': ligand_name,
+                        'residue_id': residue_id,
+                        'count': 1,
+                        'show_option': true,
+                        'coords': [[Number(x), Number(y), Number(z)]]
+                    };
+                }
+                else {
+                    ligand_dict[chain_name + ':' + ligand_name + ':' + residue_id].count += 1;
+                    ligand_dict[chain_name + ':' + ligand_name + ':' + residue_id].coords.push([Number(x), Number(y), Number(z)]);
+                }
+            }
+        }
+        for (var key in ligand_dict) {
+            var max_min_dict = this.calc_max_min(ligand_dict[key]);
+            ligand_dict[key]['max_min_coord'] = max_min_dict;
+            ret_list.push(ligand_dict[key]);
+        }
+        return ret_list;
+    };
+    PDBeMolstarPlugin.prototype.parse_chain_info = function (pdb_string) {
+        // 解析所有的链信息
+        var lines = pdb_string.split('\n');
+        // 获得链中的residue信息
+        var chain_dict = {};
+        for (var _a = 0, lines_2 = lines; _a < lines_2.length; _a++) {
+            var line = lines_2[_a];
+            if (line.startsWith('ATOM')) {
+                var residue_name = line.substr(17, 3).trim();
+                var chain_name = line.substr(21, 1).trim();
+                if (chain_dict[chain_name] === undefined) {
+                    chain_dict[chain_name] = [];
+                }
+                chain_dict[chain_name].push(residue_name);
+            }
+        }
+        var ret_list = [];
+        for (var chain_name in chain_dict) {
+            ret_list.push({ 'chain_full_name': chain_name, 'chain_main_name': chain_name, 'chain_cont': chain_dict[chain_name] });
+        }
+        return ret_list;
+    };
+    PDBeMolstarPlugin.prototype.calc_max_min = function (ligand_dict) {
+        var coords = ligand_dict.coords;
+        var x_list = [];
+        var y_list = [];
+        var z_list = [];
+        for (var _a = 0, coords_1 = coords; _a < coords_1.length; _a++) {
+            var coord = coords_1[_a];
+            x_list.push(coord[0]);
+            y_list.push(coord[1]);
+            z_list.push(coord[2]);
+        }
+        return {
+            'max_x': Math.max.apply(Math, x_list),
+            'min_x': Math.min.apply(Math, x_list),
+            'max_y': Math.max.apply(Math, y_list),
+            'min_y': Math.min.apply(Math, y_list),
+            'max_z': Math.max.apply(Math, z_list),
+            'min_z': Math.min.apply(Math, z_list)
+        };
+    };
+    return PDBeMolstarPlugin;
+}());
+window.PDBeMolstarPlugin = PDBeMolstarPlugin;