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-3-beta.1",
   "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,15 @@ 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,
@@ -343,7 +361,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,
@@ -680,9 +698,18 @@ class PDBeMolstarPlugin {
             await this.createLigandStructure(isBranchedView);
         }
 
+        // Sequence Viewer
+        try {
+            const sequenceOptions = getEntityChainPairs(this.plugin.state.data, { onlyPolymers: true });
+            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",
@@ -1090,7 +1117,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 +1131,15 @@ 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 SequenceViewWrapper extends React.Component<{}> {
+            render() {
+                return (
+                    <SequenceView
+                        {...this.props}
+                        plugin={plugin}
+                        onChainUpdate={onChainUpdate}
+                        isLigandView={isLigandView}
+                    />
+                );
+            }
+        },
+    };
+}