Add custom sequence component

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@3dbionotes/pdbe-molstar",
-  "version": "3.1.0-est-2",
+  "version": "3.1.0-est-2-beta.5",
   "description": "Molstar implementation for PDBe",
   "main": "index.js",
   "scripts": {

src/app/index.ts

@@ -1,7 +1,5 @@
 import { createPluginUI, DefaultPluginUISpec, InitParams, DefaultParams } from './spec';
-import { PluginContext } from 'Molstar/mol-plugin/context';
 import { PluginCommands } from 'Molstar/mol-plugin/commands';
-import { SequenceView } from "Molstar/mol-plugin-ui/sequence"
 import { PluginStateObject } from 'Molstar/mol-plugin-state/objects';
 import { StateTransform } from 'Molstar/mol-state';
 import { Loci, EmptyLoci } from 'Molstar/mol-model/loci';
@@ -46,6 +44,9 @@ import { AnimateAssemblyUnwind } from 'Molstar/mol-plugin-state/animation/built-
 import { DownloadDensity, EmdbDownloadProvider } from 'molstar/lib/mol-plugin-state/actions/volume';
 import { ControlsWrapper } from 'molstar/lib/mol-plugin-ui/plugin';
 import { PluginToast } from 'molstar/lib/mol-plugin/util/toast';
+import { getEntityChainPairs } from './ui/sequence';
+import { initSequenceView } from './ui/sequence-wrapper';
+import { PluginContext } from 'molstar/lib/mol-plugin/context';
 
 require("Molstar/mol-plugin-ui/skin/dark.scss");
 
@@ -64,6 +65,13 @@ class PDBeMolstarPlugin {
     readonly events = {
         loadComplete: this._ev<boolean>(),
         updateComplete: this._ev<boolean>(),
+        sequenceComplete: this._ev<any>(),
+        chainUpdate: this._ev<string>(), // chainId
+        ligandUpdate: this._ev<{ ligandId: string, chainId: string }>(),
+        dependencyChanged: {
+            onChainUpdate: this._ev<(chainId: string) => void>(),
+            isLigandView: this._ev<() => boolean>()
+        },
     };
 
     plugin: PluginContext;
@@ -76,6 +84,8 @@ class PDBeMolstarPlugin {
     isSelectedColorUpdated = false;
     toasts: string[] = [];
 
+    chainSelected: string | undefined = undefined;
+
     async render(target: string | HTMLElement, options: InitParams) {
         if (!options) return;
         this.initParams = { ...DefaultParams };
@@ -158,7 +168,7 @@ class PDBeMolstarPlugin {
                 left: showDebugPanels ? LeftPanelControls : "none",
                 right: showDebugPanels ? ControlsWrapper : "none",
                 top: "none",
-                bottom: SequenceView,
+                bottom: this.initParams.onChainUpdate && this.initParams.isLigandView ? initSequenceView(this, this.initParams.onChainUpdate, this.initParams.isLigandView).component : "none",
             },
             viewport: {
                 controls: PDBeViewportControls,
@@ -170,8 +180,8 @@ class PDBeMolstarPlugin {
             structureTools: this.initParams.superposition
                 ? PDBeSuperpositionStructureTools
                 : this.initParams.ligandView
-                ? PDBeLigandViewStructureTools
-                : PDBeStructureTools,
+                    ? PDBeLigandViewStructureTools
+                    : PDBeStructureTools,
         };
 
         if (this.initParams.alphafoldView) {
@@ -189,8 +199,8 @@ class PDBeMolstarPlugin {
             };
         }
 
-        if(this.initParams.sequencePanel) {
-            if(pdbePluginSpec.components.controls?.top) delete pdbePluginSpec.components.controls.top;
+        if (this.initParams.sequencePanel) {
+            if (pdbePluginSpec.components.controls?.top) delete pdbePluginSpec.components.controls.top;
         }
 
         pdbePluginSpec.config = [
@@ -343,7 +353,7 @@ class PDBeMolstarPlugin {
             // Load Molecule CIF or coordQuery and Parse
             let dataSource = this.getMoleculeSrcUrl();
             if (dataSource) {
-                this.load({
+                await this.load({
                     url: dataSource.url,
                     label: this.initParams.moleculeId,
                     format: dataSource.format as BuiltInTrajectoryFormat,
@@ -360,7 +370,7 @@ class PDBeMolstarPlugin {
             // Event handling
             CustomEvents.add(this.plugin, this.targetElement);
 
-            if(!dataSource) { //allow plugin to load without pdbId
+            if (!dataSource) { //allow plugin to load without pdbId
                 this.events.loadComplete.next(true);
             }
         }
@@ -384,7 +394,7 @@ class PDBeMolstarPlugin {
                 if (this.initParams.ligandView.label_comp_id) {
                     queryParams.push(
                         "label_comp_id=" +
-                            this.initParams.ligandView.label_comp_id
+                        this.initParams.ligandView.label_comp_id
                     );
                 } else if (this.initParams.ligandView.auth_seq_id) {
                     queryParams.push(
@@ -394,17 +404,15 @@ class PDBeMolstarPlugin {
                 if (this.initParams.ligandView.auth_asym_id)
                     queryParams.push(
                         "auth_asym_id=" +
-                            this.initParams.ligandView.auth_asym_id
+                        this.initParams.ligandView.auth_asym_id
                     );
             }
             query = "residueSurroundings?" + queryParams.join("&");
             sep = "&";
         }
-        let url = `${
-            this.initParams.pdbeUrl
-        }model-server/v1/${id}/${query}${sep}encoding=${
-            this.initParams.encoding
-        }${this.initParams.lowPrecisionCoords ? "&lowPrecisionCoords=1" : ""}`;
+        let url = `${this.initParams.pdbeUrl
+            }model-server/v1/${id}/${query}${sep}encoding=${this.initParams.encoding
+            }${this.initParams.lowPrecisionCoords ? "&lowPrecisionCoords=1" : ""}`;
         let isBinary = this.initParams.encoding === "bcif" ? true : false;
         let format = "mmcif";
 
@@ -591,7 +599,7 @@ class PDBeMolstarPlugin {
             { url: Asset.Url(url, downloadOptions), label, isBinary },
             { state: { isGhost: true } }
         );
-        
+
         const trajectory = await this.plugin.builders.structure
             .parseTrajectory(data, format)
             .then((trajectory) => {
@@ -641,7 +649,7 @@ class PDBeMolstarPlugin {
                 .length - 1;
         const pivot =
             this.plugin.managers.structure.hierarchy.selection.structures[
-                pivotIndex
+            pivotIndex
             ];
         if (pivot && pivot.cell.parent)
             this.assemblyRef = pivot.cell.transform.ref;
@@ -680,9 +688,19 @@ class PDBeMolstarPlugin {
             await this.createLigandStructure(isBranchedView);
         }
 
+        // Sequence Viewer
+        try {
+            const ONLY_POLYMERS = true;
+            const sequenceOptions = getEntityChainPairs(this.plugin.state.data, ONLY_POLYMERS);
+            this.events.sequenceComplete.next(sequenceOptions);
+        } catch (error) {
+            console.error(error);
+            this.events.sequenceComplete.error(error);
+        }
+
         this.events.loadComplete.next(true);
     }
-    
+
     applyVisualParams = () => {
         const TagRefs: any = {
             "structure-component-static-polymer": "polymer",
@@ -812,22 +830,22 @@ class PDBeMolstarPlugin {
 
     getLociByPLDDT(score: number, structureNumber?: number) {
         let assemblyRef = this.assemblyRef;
-        if(structureNumber) {
+        if (structureNumber) {
             assemblyRef = this.plugin.managers.structure.hierarchy.current.structures[structureNumber - 1].cell.transform.ref;
         }
 
-        if(assemblyRef === '') return EmptyLoci;
+        if (assemblyRef === '') return EmptyLoci;
         const structure = this.plugin.state.data.select(assemblyRef)[0]?.obj as
             | PluginStateObject.Molecule.Structure
             | undefined;
         const data = structure?.data;
-        if(!data) return EmptyLoci;
+        if (!data) return EmptyLoci;
         return AlphafoldView.getLociByPLDDT(score, data);
     }
 
 
 
-    normalizeColor(colorVal: any, defaultColor?: Color){
+    normalizeColor(colorVal: any, defaultColor?: Color) {
         let color = Color.fromRgb(170, 170, 170);
         try {
             if (typeof colorVal.r !== "undefined") {
@@ -887,7 +905,7 @@ class PDBeMolstarPlugin {
             if (params.structureNumber) {
                 structureData = [
                     this.plugin.managers.structure.hierarchy.current.structures[
-                        params.structureNumber - 1
+                    params.structureNumber - 1
                     ],
                 ];
             }
@@ -1090,7 +1108,7 @@ class PDBeMolstarPlugin {
             // Load Molecule CIF or coordQuery and Parse
             let dataSource = this.getMoleculeSrcUrl();
             if (dataSource) {
-                this.load(
+                await this.load(
                     {
                         url: dataSource.url,
                         label: this.initParams.moleculeId,
@@ -1104,6 +1122,12 @@ class PDBeMolstarPlugin {
 
             this.events.updateComplete.next(true);
         },
+        updateChain: (chainId: string) => this.events.chainUpdate.next(chainId),
+        updateLigand: (options: { chainId: string; ligandId: string }) => this.events.ligandUpdate.next(options),
+        updateDependency: {
+            onChainUpdate: (callback: (chainId: string) => void) => this.events.dependencyChanged.onChainUpdate.next(callback),
+            isLigandView: (callback: () => boolean) => this.events.dependencyChanged.isLigandView.next(callback),
+        },
         visibility: (data: {
             polymer?: boolean;
             het?: boolean;

src/app/spec.ts

@@ -68,6 +68,8 @@ export type InitParams = {
     selectColor?: {r: number, g: number, b: number}, highlightColor?: {r: number, g: number, b: number}, superpositionParams?: {matrixAccession?: string, segment?: number, cluster?: number[], superposeCompleteCluster?: boolean, ligandView?: boolean},
     hideStructure?: ['polymer', 'het', 'water', 'carbs', 'nonStandard', 'coarse'], visualStyle?: 'cartoon' | 'ball-and-stick', encoding: 'cif' | 'bcif'
     granularity?: Loci.Granularity, selection?: { data: QueryParam[], nonSelectedColor?: any, clearPrevious?: boolean }, mapSettings: any, [key: string]: any;
+    onChainUpdate?: (chainId: string) => void;
+    isLigandView?: () => boolean;
 }
 
 export const DefaultParams: InitParams = {
@@ -105,5 +107,7 @@ export const DefaultParams: InitParams = {
     landscape: false,
     subscribeEvents: false,
     alphafoldView: false,
-    sequencePanel: false
+    sequencePanel: false,
+    onChainUpdate: undefined,
+    isLigandView: undefined,
 };

src/app/subscribe-events.ts

@@ -65,14 +65,14 @@ export function subscribeToComponentEvents(wrapperCtx: any) {
             // Create query object from event data
             if(e.detail.start && e.detail.end){
                 highlightQuery = {
-                    start_residue_number: parseInt(e.detail.start),
-                    end_residue_number: parseInt(e.detail.end)
+                    start_auth_residue_number: parseInt(e.detail.start),
+                    end_auth_residue_number: parseInt(e.detail.end)
                 };
             }
 
             if(e.detail.feature && e.detail.feature.entityId) highlightQuery['entity_id'] = e.detail.feature.entityId + '';
-            if(e.detail.feature && e.detail.feature.bestChainId) highlightQuery['struct_asym_id'] = e.detail.feature.bestChainId;
-            if(e.detail.feature && e.detail.feature.chainId) highlightQuery['struct_asym_id'] = e.detail.feature.chainId;
+            if(e.detail.feature && e.detail.feature.bestChainId) highlightQuery['auth_asym_id'] = e.detail.feature.bestChainId;
+            if(e.detail.feature && e.detail.feature.chainId) highlightQuery['auth_asym_id'] = e.detail.feature.chainId;
 
             if(highlightQuery) wrapperCtx.visual.highlight({data: [highlightQuery]});
         }
@@ -84,11 +84,11 @@ export function subscribeToComponentEvents(wrapperCtx: any) {
 
         const params = (detail.fragments || []).map((fragment): QueryParam => {
             return {
-                start_residue_number: (fragment.start),
-                end_residue_number: (fragment.end),
+                start_auth_residue_number: (fragment.start),
+                end_auth_residue_number: (fragment.end),
                 color: fragment.color,
                 entity_id: fragment.feature?.entityId,
-                struct_asym_id: fragment.feature?.bestChainId,
+                auth_asym_id: fragment.feature?.bestChainId,
             };
         });
 
@@ -115,14 +115,14 @@ export function subscribeToComponentEvents(wrapperCtx: any) {
             // Create query object from event data
             if(e.detail.start && e.detail.end){
                 highlightQuery = {
-                    start_residue_number: parseInt(e.detail.start),
-                    end_residue_number: parseInt(e.detail.end)
+                    start_auth_residue_number: parseInt(e.detail.start),
+                    end_auth_residue_number: parseInt(e.detail.end)
                 };
             }
 
             if(e.detail.feature && e.detail.feature.entityId) highlightQuery['entity_id'] = e.detail.feature.entityId + '';
-            if(e.detail.feature && e.detail.feature.bestChainId) highlightQuery['struct_asym_id'] = e.detail.feature.bestChainId;
-            if(e.detail.feature && e.detail.feature.chainId) highlightQuery['struct_asym_id'] = e.detail.feature.chainId;
+            if(e.detail.feature && e.detail.feature.bestChainId) highlightQuery['auth_asym_id'] = e.detail.feature.bestChainId;
+            if(e.detail.feature && e.detail.feature.chainId) highlightQuery['auth_asym_id'] = e.detail.feature.chainId;
 
             if(e.detail.feature && e.detail.feature.accession && e.detail.feature.accession.split(' ')[0] === 'Chain' || e.detail.feature.tooltipContent === 'Ligand binding site') {
                 showInteraction = true;

src/app/ui/sequence-wrapper.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { SequenceView } from "./sequence";
+import { PDBeMolstarPlugin } from "..";
+
+export function initSequenceView(
+    plugin: PDBeMolstarPlugin,
+    onChainUpdate: (chainId: string) => void,
+    isLigandView: () => boolean
+) {
+    return {
+        component: class extends React.Component<{}> {
+            render() {
+                return (
+                    <SequenceView
+                        {...this.props}
+                        plugin={plugin}
+                        onChainUpdate={onChainUpdate}
+                        isLigandView={isLigandView}
+                    />
+                );
+            }
+        },
+    };
+}