drugflow-molstar 0.1.0

package/lib/index.js

@@ -0,0 +1,901 @@
+"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");
+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.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) } });
+            }
+        };
+        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*/];
+                });
+            }); },
+            select: function (params) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
+                var structureData, structureData_1, structureData_1_1, s, e_1_1, _a, _b, param, loci, themeParams, colorValue, repr, defaultParams, defaultValues, values, structures, updatedStructureData, comps, lastCompsIndex, recentRepComp, uniformColor, e_2_1;
+                var e_1, _c, e_2, _d;
+                return tslib_1.__generator(this, function (_e) {
+                    switch (_e.label) {
+                        case 0:
+                            if (!this.selectedParams) return [3 /*break*/, 2];
+                            return [4 /*yield*/, this.visual.clearSelection(params.structureNumber)];
+                        case 1:
+                            _e.sent();
+                            _e.label = 2;
+                        case 2:
+                            structureData = this.plugin.managers.structure.hierarchy.current.structures;
+                            if (params.structureNumber) {
+                                structureData = [this.plugin.managers.structure.hierarchy.current.structures[params.structureNumber - 1]];
+                            }
+                            if (!params.nonSelectedColor) return [3 /*break*/, 15];
+                            _e.label = 3;
+                        case 3:
+                            _e.trys.push([3, 9, 10, 15]);
+                            structureData_1 = tslib_1.__asyncValues(structureData);
+                            _e.label = 4;
+                        case 4: return [4 /*yield*/, structureData_1.next()];
+                        case 5:
+                            if (!(structureData_1_1 = _e.sent(), !structureData_1_1.done)) return [3 /*break*/, 8];
+                            s = structureData_1_1.value;
+                            return [4 /*yield*/, this.plugin.managers.structure.component.updateRepresentationsTheme(s.components, { color: 'uniform', colorParams: { value: this.normalizeColor(params.nonSelectedColor) } })];
+                        case 6:
+                            _e.sent();
+                            _e.label = 7;
+                        case 7: return [3 /*break*/, 4];
+                        case 8: return [3 /*break*/, 15];
+                        case 9:
+                            e_1_1 = _e.sent();
+                            e_1 = { error: e_1_1 };
+                            return [3 /*break*/, 15];
+                        case 10:
+                            _e.trys.push([10, , 13, 14]);
+                            if (!(structureData_1_1 && !structureData_1_1.done && (_c = structureData_1.return))) return [3 /*break*/, 12];
+                            return [4 /*yield*/, _c.call(structureData_1)];
+                        case 11:
+                            _e.sent();
+                            _e.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:
+                            _e.trys.push([15, 23, 24, 29]);
+                            _a = tslib_1.__asyncValues(params.data);
+                            _e.label = 16;
+                        case 16: return [4 /*yield*/, _a.next()];
+                        case 17:
+                            if (!(_b = _e.sent(), !_b.done)) return [3 /*break*/, 22];
+                            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.selectOnly({ loci: loci });
+                            themeParams = component_1.StructureComponentManager.getThemeParams(this.plugin, this.plugin.managers.structure.component.pivotStructure);
+                            colorValue = param_definition_1.ParamDefinition.getDefaultValues(themeParams);
+                            colorValue.action.params = { color: param.color ? this.normalizeColor(param.color) : color_1.Color.fromRgb(255, 112, 3), opacity: 1 };
+                            return [4 /*yield*/, this.plugin.managers.structure.component.applyTheme(colorValue, structureData)];
+                        case 18:
+                            _e.sent();
+                            if (!(param.sideChain || param.representation)) return [3 /*break*/, 20];
+                            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 19:
+                            _e.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;
+                            _e.label = 20;
+                        case 20:
+                            // focus loci
+                            if (param.focus)
+                                this.plugin.managers.camera.focusLoci(loci);
+                            // remove selection
+                            this.plugin.managers.interactivity.lociSelects.deselect({ loci: loci });
+                            _e.label = 21;
+                        case 21: return [3 /*break*/, 16];
+                        case 22: return [3 /*break*/, 29];
+                        case 23:
+                            e_2_1 = _e.sent();
+                            e_2 = { error: e_2_1 };
+                            return [3 /*break*/, 29];
+                        case 24:
+                            _e.trys.push([24, , 27, 28]);
+                            if (!(_b && !_b.done && (_d = _a.return))) return [3 /*break*/, 26];
+                            return [4 /*yield*/, _d.call(_a)];
+                        case 25:
+                            _e.sent();
+                            _e.label = 26;
+                        case 26: return [3 /*break*/, 28];
+                        case 27:
+                            if (e_2) throw e_2.error;
+                            return [7 /*endfinally*/];
+                        case 28: return [7 /*endfinally*/];
+                        case 29:
+                            // 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, _i, _a, c, selReprCells_1, selReprCells_1_1, selReprCell, e_3_1;
+                var e_3, _b;
+                return tslib_1.__generator(this, function (_c) {
+                    switch (_c.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
+                            _c.sent();
+                            if (!(this.selectedParams && this.selectedParams.addedRepr)) return [3 /*break*/, 15];
+                            selReprCells = [];
+                            for (_i = 0, _a = this.plugin.managers.structure.hierarchy.current.structures[structIndex].components; _i < _a.length; _i++) {
+                                c = _a[_i];
+                                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];
+                            _c.label = 2;
+                        case 2:
+                            _c.trys.push([2, 8, 9, 14]);
+                            selReprCells_1 = tslib_1.__asyncValues(selReprCells);
+                            _c.label = 3;
+                        case 3: return [4 /*yield*/, selReprCells_1.next()];
+                        case 4:
+                            if (!(selReprCells_1_1 = _c.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:
+                            _c.sent();
+                            _c.label = 6;
+                        case 6: return [3 /*break*/, 3];
+                        case 7: return [3 /*break*/, 14];
+                        case 8:
+                            e_3_1 = _c.sent();
+                            e_3 = { error: e_3_1 };
+                            return [3 /*break*/, 14];
+                        case 9:
+                            _c.trys.push([9, , 12, 13]);
+                            if (!(selReprCells_1_1 && !selReprCells_1_1.done && (_b = selReprCells_1.return))) return [3 /*break*/, 11];
+                            return [4 /*yield*/, _b.call(selReprCells_1)];
+                        case 10:
+                            _c.sent();
+                            _c.label = 11;
+                        case 11: return [3 /*break*/, 13];
+                        case 12:
+                            if (e_3) throw e_3.error;
+                            return [7 /*endfinally*/];
+                        case 13: return [7 /*endfinally*/];
+                        case 14:
+                            ;
+                            _c.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*/];
+                    }
+                });
+            }); }
+        };
+    }
+    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];
+                        }
+                        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];
+                        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 });
+                            }
+                            // 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 () {
+        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';
+        if (this.initParams.customData) {
+            if (!this.initParams.customData.url || !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."));
+            }
+            isBinary = this.initParams.customData.binary ? this.initParams.customData.binary : false;
+        }
+        return {
+            url: url,
+            format: format,
+            isBinary: isBinary
+        };
+    };
+    Object.defineProperty(PDBeMolstarPlugin.prototype, "state", {
+        get: function () {
+            return this.plugin.state.data;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    PDBeMolstarPlugin.prototype.createLigandStructure = function (isBranched) {
+        var e_4, _a;
+        var _b;
+        return tslib_1.__awaiter(this, void 0, void 0, function () {
+            var _c, _d, comp, e_4_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_4_1 = _e.sent();
+                        e_4 = { error: e_4_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_4) throw e_4.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;
+        if (fullLoad === void 0) { fullLoad = true; }
+        return tslib_1.__awaiter(this, void 0, void 0, function () {
+            var isHetView, downloadOptions, isBranchedView, data, trajectory, model, pivotIndex, pivot, asm, defaultMapParams, pdbeMapParams;
+            return tslib_1.__generator(this, function (_e) {
+                switch (_e.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']] };
+                        }
+                        return [4 /*yield*/, this.plugin.builders.data.download({ url: assets_1.Asset.Url(url, downloadOptions), isBinary: isBinary }, { state: { isGhost: true } })];
+                    case 1:
+                        data = _e.sent();
+                        return [4 /*yield*/, this.plugin.builders.structure.parseTrajectory(data, format)];
+                    case 2:
+                        trajectory = _e.sent();
+                        if (!!isHetView) return [3 /*break*/, 4];
+                        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 3:
+                        _e.sent();
+                        if (this.initParams.hideStructure || this.initParams.visualStyle) {
+                            this.applyVisualParams();
+                        }
+                        return [3 /*break*/, 7];
+                    case 4: return [4 /*yield*/, this.plugin.builders.structure.createModel(trajectory)];
+                    case 5:
+                        model = _e.sent();
+                        return [4 /*yield*/, this.plugin.builders.structure.createStructure(model, { name: 'model', params: {} })];
+                    case 6:
+                        _e.sent();
+                        _e.label = 7;
+                    case 7:
+                        // 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*/, 9];
+                        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*/, 9];
+                        return [4 /*yield*/, this.plugin.runTask(this.state.applyAction(transformers_1.InitVolumeStreaming, pdbeMapParams, this.assemblyRef))];
+                    case 8:
+                        _e.sent();
+                        if (pdbeMapParams.method !== 'em' && !this.initParams.ligandView)
+                            helpers_1.PDBeVolumes.displayUsibilityMessage(this.plugin);
+                        _e.label = 9;
+                    case 9:
+                        if (!isHetView) return [3 /*break*/, 11];
+                        return [4 /*yield*/, this.createLigandStructure(isBranchedView)];
+                    case 10:
+                        _e.sent();
+                        _e.label = 11;
+                    case 11:
+                        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.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*/];
+            });
+        });
+    };
+    return PDBeMolstarPlugin;
+}());
+window.PDBeMolstarPlugin = PDBeMolstarPlugin;