Issue #820: feature track data from backend API [IN PROGRESS]

src/examples/assembly-tm/FeatureViewConfig.ts

@@ -30,7 +30,7 @@ import { TmDetRcsbPreset } from "./preset2";
 import { TmDetDescriptorCache } from "./tmdet-extension/prop";
 
 export async function createFeatureViewerConfing(
-    params: { pdbEntry: string, pdbtmEntry: string, htpEntry: string, labelAsymId: string, side1: string, title: string }
+    params: { pdbEntry: string, pdbtmEntry: string, htpEntry: string, labelAsymId: string, side1: string, title: string, fvConfigData?: any },
 ) {
 
     const modelId = `${params.pdbEntry}_model`;
@@ -52,65 +52,73 @@ export async function createFeatureViewerConfing(
         }
     ];
 
-    const fvConfig: FeatureViewInterface<LoadMolstarInterface<unknown,unknown>,LoadMolstarReturnType> = {
-        boardId: `${params.pdbEntry}_board`,
-        boardConfig: {
-            rowTitleWidth: 190,
-            includeAxis: true
-        },
-        rowConfig: rowConfig,
-        sequenceSelectionChangeCallback: (plugin: StructureViewerPublicInterface<LoadMolstarInterface<unknown,unknown>,LoadMolstarReturnType>, stateManager: RcsbFvStateManager, sequenceRegion: Array<RcsbFvTrackDataElementInterface>) => {
-            stateManager.selectionState.clearSelection("select", {modelId: modelId, labelAsymId: params.labelAsymId});
-            if(sequenceRegion.length > 0) {
-                const regions = sequenceRegion.map(r => ({
-                    modelId: modelId,
-                    labelAsymId: params.labelAsymId,
-                    region: {begin: r.begin, end: r.end ?? r.begin, source: "sequence"} as RegionSelectionInterface
-                }));
-                stateManager.selectionState.addSelectionFromMultipleRegions(regions, "select");
-                plugin.select(regions.map(r => ({
-                    ...r,
-                    begin: r.region.begin,
-                    end: r.region.end
-                })), "select", "set");
-            }else{
-                plugin.clearSelection("select", {modelId: modelId, labelAsymId: params.labelAsymId})
-                plugin.resetCamera();
-            }
-        },
-        sequenceElementClickCallback: (plugin: StructureViewerPublicInterface<LoadMolstarInterface<unknown,unknown>,LoadMolstarReturnType>, stateManager: RcsbFvStateManager, d: RcsbFvTrackDataElementInterface) => {
-            if(d!=null)
-                plugin.cameraFocus(modelId, params.labelAsymId, d.begin, d.end ?? d.begin);
-        },
-        sequenceHoverCallback: (plugin: StructureViewerPublicInterface<LoadMolstarInterface<unknown,unknown>,LoadMolstarReturnType>, stateManager: RcsbFvStateManager, elements: Array<RcsbFvTrackDataElementInterface>) => {
-            if(elements == null || elements.length == 0)
-                plugin.clearSelection("hover");
-            else {
-                const e = elements[0];
-                plugin.select(elements.map(e=>({
-                    modelId: modelId,
-                    labelAsymId: params.labelAsymId,
-                    begin: e.begin,
-                    end: e.end ?? e.begin
-                })), "hover", "set");
-            }
-        },
-        structureSelectionCallback: (plugin: StructureViewerPublicInterface<LoadMolstarInterface<unknown,unknown>,LoadMolstarReturnType>, pfv: RcsbFv, stateManager: RcsbFvStateManager) => {
-            const sel: SaguaroRegionList | undefined = stateManager.selectionState.getSelectionWithCondition(modelId, params.labelAsymId, "select");
-            if(sel == null) {
-                pfv.clearSelection("select");
-                plugin.resetCamera();
-            }else {
-                pfv.setSelection({elements: sel.regions, mode: "select"});
-            }
-        },
-        structureHoverCallback: (plugin: StructureViewerPublicInterface<LoadMolstarInterface<unknown,unknown>,LoadMolstarReturnType>, pfv: RcsbFv, stateManager: RcsbFvStateManager) => {
-            const sel: SaguaroRegionList | undefined = stateManager.selectionState.getSelectionWithCondition(modelId, params.labelAsymId, "hover");
-            if(sel == null)
-                pfv.clearSelection("hover");
-            else
-                pfv.setSelection({elements:sel.regions, mode:"hover"});
+    const fvConfig: FeatureViewInterface<LoadMolstarInterface<unknown,unknown>,LoadMolstarReturnType> =
+        params.fvConfigData
+        ?? {
+            boardId: `${params.pdbEntry}_board`,
+            boardConfig: {
+                rowTitleWidth: 190,
+                includeAxis: true
+            },
+            rowConfig: rowConfig,
+            sequenceSelectionChangeCallback: () => {},
+            sequenceElementClickCallback: () => {},
+            sequenceHoverCallback: () => {},
+            structureSelectionCallback: () => {},
+            structureHoverCallback: () => {}
+        };
+
+    fvConfig.sequenceSelectionChangeCallback = (plugin: StructureViewerPublicInterface<LoadMolstarInterface<unknown,unknown>,LoadMolstarReturnType>, stateManager: RcsbFvStateManager, sequenceRegion: Array<RcsbFvTrackDataElementInterface>) => {
+        stateManager.selectionState.clearSelection("select", {modelId: modelId, labelAsymId: params.labelAsymId});
+        if(sequenceRegion.length > 0) {
+            const regions = sequenceRegion.map(r => ({
+                modelId: modelId,
+                labelAsymId: params.labelAsymId,
+                region: {begin: r.begin, end: r.end ?? r.begin, source: "sequence"} as RegionSelectionInterface
+            }));
+            stateManager.selectionState.addSelectionFromMultipleRegions(regions, "select");
+            plugin.select(regions.map(r => ({
+                ...r,
+                begin: r.region.begin,
+                end: r.region.end
+            })), "select", "set");
+        }else{
+            plugin.clearSelection("select", {modelId: modelId, labelAsymId: params.labelAsymId})
+            plugin.resetCamera();
+        }
+    },
+    fvConfig.sequenceElementClickCallback = (plugin: StructureViewerPublicInterface<LoadMolstarInterface<unknown,unknown>,LoadMolstarReturnType>, stateManager: RcsbFvStateManager, d: RcsbFvTrackDataElementInterface) => {
+        if(d!=null)
+            plugin.cameraFocus(modelId, params.labelAsymId, d.begin, d.end ?? d.begin);
+    },
+    fvConfig.sequenceHoverCallback = (plugin: StructureViewerPublicInterface<LoadMolstarInterface<unknown,unknown>,LoadMolstarReturnType>, stateManager: RcsbFvStateManager, elements: Array<RcsbFvTrackDataElementInterface>) => {
+        if(elements == null || elements.length == 0)
+            plugin.clearSelection("hover");
+        else {
+            const e = elements[0];
+            plugin.select(elements.map(e=>({
+                modelId: modelId,
+                labelAsymId: params.labelAsymId,
+                begin: e.begin,
+                end: e.end ?? e.begin
+            })), "hover", "set");
+        }
+    },
+    fvConfig.structureSelectionCallback = (plugin: StructureViewerPublicInterface<LoadMolstarInterface<unknown,unknown>,LoadMolstarReturnType>, pfv: RcsbFv, stateManager: RcsbFvStateManager) => {
+        const sel: SaguaroRegionList | undefined = stateManager.selectionState.getSelectionWithCondition(modelId, params.labelAsymId, "select");
+        if(sel == null) {
+            pfv.clearSelection("select");
+            plugin.resetCamera();
+        }else {
+            pfv.setSelection({elements: sel.regions, mode: "select"});
         }
+    },
+    fvConfig.structureHoverCallback = (plugin: StructureViewerPublicInterface<LoadMolstarInterface<unknown,unknown>,LoadMolstarReturnType>, pfv: RcsbFv, stateManager: RcsbFvStateManager) => {
+        const sel: SaguaroRegionList | undefined = stateManager.selectionState.getSelectionWithCondition(modelId, params.labelAsymId, "hover");
+        if(sel == null)
+            pfv.clearSelection("hover");
+        else
+            pfv.setSelection({elements:sel.regions, mode:"hover"});
     }
 
     const block: FeatureBlockInterface<LoadMolstarInterface<unknown,unknown>,LoadMolstarReturnType> = {
@@ -148,26 +156,28 @@ export async function createFeatureViewerConfing(
     };
 
     updateSiteColors(params.side1 as any);
-    const htpDescriptor = await fetchHtpDescriptor(params.htpEntry);
-    const jsvlibDescriptor = await fetchPdbtmJsvLibDescriptor(params.pdbtmEntry);
+    if (!params.fvConfigData) {
+        const htpDescriptor = await fetchHtpDescriptor(params.htpEntry);
+        const jsvlibDescriptor = await fetchPdbtmJsvLibDescriptor(params.pdbtmEntry);
 
-    let sequence = htpDescriptor.Sequence.Seq;
-    sequence = sequence.replace(/\s+/g, '');
-
-    fvConfig.boardConfig.length = parseInt(htpDescriptor.Sequence['@attributes'].Length);
-    fvConfig.rowConfig[0].rowTitle = `${htpDescriptor['@attributes'].id} sequence`;
-    rowConfig[0].trackData![0].value = sequence;
-    rowConfig.push(...htpDescriptorToTrackData(htpDescriptor));
-
-    const descriptor = TmDetDescriptorCache.get(params.pdbEntry);
-    const chain = descriptor?.chains.filter(ch => ch.chain_label == params.labelAsymId)[0];
-    const offset = parseInt(chain?.residues[0].pdb_res_label!) - 1;
-    jsvlibDescriptor.regions.forEach((region: any) => {
-        region.start += offset;
-        region.end += offset;
-    });
-    console.log('JSVLIB:', jsvlibDescriptor);
-    rowConfig.push(...jsvLibDescriptorToTrackData(jsvlibDescriptor));
+        let sequence = htpDescriptor.Sequence.Seq;
+        sequence = sequence.replace(/\s+/g, '');
+    
+        fvConfig.boardConfig.length = parseInt(htpDescriptor.Sequence['@attributes'].Length);
+        fvConfig.rowConfig[0].rowTitle = `${htpDescriptor['@attributes'].id} sequence`;
+        rowConfig[0].trackData![0].value = sequence;
+        rowConfig.push(...htpDescriptorToTrackData(htpDescriptor));
+    
+        const descriptor = TmDetDescriptorCache.get(params.pdbEntry);
+        const chain = descriptor?.chains.filter(ch => ch.chain_label == params.labelAsymId)[0];
+        const offset = parseInt(chain?.residues[0].pdb_res_label!) - 1;
+        jsvlibDescriptor.regions.forEach((region: any) => {
+            region.start += offset;
+            region.end += offset;
+        });
+        console.log('JSVLIB:', jsvlibDescriptor);
+        rowConfig.push(...jsvLibDescriptorToTrackData(jsvlibDescriptor));
+    }
 
     return { sequenceConfig: sequenceConfig, molstarConfig: molstarConfig };
 }

src/examples/assembly-tm/UniTmpHelper.ts

@@ -14,7 +14,7 @@ export async function fetchPdbtmJsvLibDescriptor(entryId: string) {
     return fetchDescriptor(`https://pdbtm.unitmp.org/api/v1/jsvlib/${entryId}`);
 }
 
-async function fetchDescriptor(url: string) {
+export async function fetchDescriptor(url: string) {
     const response = await fetch(url);
     const descriptor = await response.json();
     return descriptor;

src/examples/assembly-tm/index.html

@@ -9,9 +9,8 @@
           title: 'TmSaguaro Example',
           elementId: "tmSaguaro",
           pdbEntry: "7khm",
-          labelAsymId: "A",
           side1: "Inside",
-          htpEntry: "ZDH15_HUMAN"
+          configData: "./zdh15_saguaro.json"
       });
     </script>
 </head>

src/examples/assembly-tm/index.ts

@@ -1,7 +1,7 @@
 import { RcsbFv3DCustomInterface} from "../../RcsbFv3D/RcsbFv3DCustom";
 import { DebugUtil } from "./tmdet-extension/debug-utils";
 import { createFeatureViewerConfing } from "./FeatureViewConfig";
-import { registerRegionDescriptorData } from "./UniTmpHelper";
+import { fetchDescriptor, registerRegionDescriptorData } from "./UniTmpHelper";
 import { TmFv3DCustom } from "./tmdet-viewer/TmFv3DCustom";
 
 function createViewer(configParams: any) {
@@ -10,14 +10,7 @@ function createViewer(configParams: any) {
 
             DebugUtil.enableLog();
 
-            const panel3dConfig = await createConfig({
-                title: configParams.title,
-                elementId: configParams.elementId,
-                pdbEntry: configParams.pdbEntry,
-                labelAsymId: configParams.labelAsymId,
-                side1: configParams.side1,
-                htpEntry: configParams.htpEntry,
-            });
+            const panel3dConfig = await createConfig(configParams);
             DebugUtil.log('Panel config', JSON.stringify(panel3dConfig));
 
             const panel3d = new TmFv3DCustom(panel3dConfig);
@@ -30,7 +23,7 @@ function createViewer(configParams: any) {
 async function createConfig(configParams: any): Promise<RcsbFv3DCustomInterface> {
     const pdbEntry = configParams.pdbEntry;
     const labelAsymId = configParams.labelAsymId;
-    const params = {
+    const params: any = {
         title: configParams.title,
         side1: configParams.side1,
         htpEntry: configParams.htpEntry,
@@ -39,8 +32,14 @@ async function createConfig(configParams: any): Promise<RcsbFv3DCustomInterface>
         pdbtmEntry: `${pdbEntry}_${labelAsymId}`
     };
 
-    const descriptorUrl = `/${pdbEntry}.json`;
-    registerRegionDescriptorData(descriptorUrl, params.side1 as any);
+    if (pdbEntry) {
+        const descriptorUrl = `/${pdbEntry}.json`;
+        registerRegionDescriptorData(descriptorUrl, params.side1 as any);
+    }
+    if (configParams.configData) {
+        params.fvConfigData = (await fetchDescriptor(configParams.configData))
+            .sequencePanelConfig.config.blockConfig[0].featureViewConfig[0]
+    }
 
     const { sequenceConfig, molstarConfig } = await createFeatureViewerConfing(params);
     const panel3dConfig: RcsbFv3DCustomInterface = {