Issue #805: assembly-tm based on single-chain; some logging reverted

src/RcsbFv3D/RcsbFv3DAssembly.tsx

@@ -59,7 +59,6 @@ export class RcsbFv3DAssembly extends RcsbFv3DAbstract<
 
     constructor(params: RcsbFv3DAssemblyInterface) {
         const elementId: string = params.elementId ?? uniqid("RcsbFv3D_");
-        console.log({ PARAMS: params.additionalConfig });
         super({
             elementId: params.elementId ?? elementId,
             sequenceConfig:{

src/RcsbFvSequence/SequenceViews/RcsbView/PfvManagerFactoryImplementation/AssemblyPfvManagerFactory.tsx

@@ -65,7 +65,6 @@ class AssemblyPfvManager extends AbstractPfvManager<{instanceSequenceConfig?: In
                 },100);
             });
         });
-        console.log({ ADD_CONFIG: this.additionalConfig });
         const operatorNameContainer: DataContainer<string> = new DataContainer<string>(config.defaultOperatorName);
         if(this.stateManager.assemblyModelSate.get("entryId") != null) {
             this.module = await buildInstanceSequenceFv(
@@ -111,7 +110,9 @@ class AssemblyPfvManager extends AbstractPfvManager<{instanceSequenceConfig?: In
                 {
                     ...this.additionalConfig,
                     boardConfig: this.boardConfigContainer.get(),
-                    externalTrackBuilder: this.additionalConfig?.externalTrackBuilder
+                    externalTrackBuilder:{
+                        filterFeatures: this.filterFeatures.bind(this)
+                    }
                 }
             );
         }

src/examples/assembly-tm/index.ts

@@ -1,106 +1,167 @@
-
-import {RcsbFv3DAssembly} from "../../RcsbFv3D/RcsbFv3DAssembly";
+import {RcsbFv3DCustom} from "../../RcsbFv3D/RcsbFv3DCustom";
+import {RcsbFvStructureConfigInterface} from "../../RcsbFvStructure/RcsbFvStructure";
 import {
-    AlignmentResponse,
-    AnnotationFeatures,
-    Type
-} from "@rcsb/rcsb-api-tools/build/RcsbGraphQL/Types/Borrego/GqlTypes";
-import {RcsbFvDisplayTypes, RcsbFvRowConfigInterface} from "@rcsb/rcsb-saguaro";
-import {PolymerEntityInstanceInterface} from "@rcsb/rcsb-saguaro-app/build/dist/RcsbCollectTools/DataCollectors/PolymerEntityInstancesCollector";
-
-document.addEventListener("DOMContentLoaded", function(event) {
-
-    function getJsonFromUrl() {
-        const url = location.search;
-        var query = url.substring(1);
-        var result: any = {};
-        query.split("&").forEach(function(part) {
-            var item = part.split("=");
-            result[item[0]] = decodeURIComponent(item[1]);
-        });
-        return result;
-    }
-
-    const args: {pdbId:string} = getJsonFromUrl().pdbId ? getJsonFromUrl() : {pdbId:"1A6D"};
-    const defaultAsymId = "A"
-    const config = {
-        entryId: args.pdbId,
-        title: "Title " + args.pdbId,
-        subtitle: "Subtitle for " + args.pdbId,
-        asymId: defaultAsymId
-    };
+    CustomViewInterface,
+    FeatureBlockInterface, FeatureViewInterface
+} from "../../RcsbFvSequence/SequenceViews/CustomView/CustomView";
+import * as React from "react";
+import {
+    RcsbFv,
+    RcsbFvDisplayTypes,
+    RcsbFvRowConfigInterface,
+    RcsbFvTrackDataElementInterface
+} from "@rcsb/rcsb-saguaro";
+import {
+    RcsbFvSelectorManager,
+    RegionSelectionInterface
+} from "../../RcsbFvState/RcsbFvSelectorManager";
+import {
+    StructureViewerPublicInterface, SaguaroRegionList
+} from "../../RcsbFvStructure/StructureViewerInterface";
+import {
+    LoadMethod,
+    LoadMolstarInterface, LoadMolstarReturnType
+} from "../../RcsbFvStructure/StructureViewers/MolstarViewer/MolstarActionManager";
+import {ViewerProps} from "@rcsb/rcsb-molstar/build/src/viewer";
+import {RcsbFvStateManager} from "../../RcsbFvState/RcsbFvStateManager";
 
-    const panel3d = new RcsbFv3DAssembly({
-        elementId: "null",
-        config: config,
-        instanceSequenceConfig:{
-            dropdownTitle: "Chain",
-            module: "interface",
-            defaultValue: defaultAsymId,
-            onChangeCallback: (context, module)=>{
-               console.log(context);
+const rowConfig: Array<RcsbFvRowConfigInterface> = [
+    {
+        trackId: "sequenceTrack",
+        trackHeight: 20,
+        trackColor: "#F9F9F9",
+        displayType: RcsbFvDisplayTypes.SEQUENCE,
+        nonEmptyDisplay: true,
+        rowTitle: "1ASH SEQUENCE",
+        trackData: [
+            {
+                begin: 1,
+                value: "ANKTRELCMKSLEHAKVDTSNEARQDGIDLYKHMFENYPPLRKYFKSREEYTAEDVQNDPFFAKQGQKILLACHVLCATYDDRETFNAYTRELLDRHARDHVHMPPEVWTDFWKLFEEYLGKKTTLDEPTKQAWHEIGREFAKEINKHGR"
             }
-        },
-        additionalConfig: {
-            boardConfig: {
-                elementClickCallBack: (e) => {
-                    console.log(`Element clicked ${e?.type}`)
-                }
-            },
-            externalTrackBuilder:externalTrackBuilder()
-        },
-        useOperatorsFlag: true
-    });
-    panel3d.render();
-
-});
-
-function externalTrackBuilder(){
-    let myComputedTrack: RcsbFvRowConfigInterface = {
+        ]
+    },{
         trackId: "blockTrack",
         trackHeight: 20,
         trackColor: "#F9F9F9",
-        titleFlagColor: "#48a1b3",
         displayType: RcsbFvDisplayTypes.BLOCK,
-        displayColor: "#56e0f5",
-        rowTitle: "COMPUTED",
-        trackData: []
-    };
-    console.log('COMPUTED track', myComputedTrack);
-    return {
-        processAlignmentAndFeatures(data: { annotations?: Array<AnnotationFeatures>; alignments?: AlignmentResponse }): Promise<void> {
-            console.log('PROCESS...', data);
-            return new Promise<void>(resolve => {
-                myComputedTrack.trackData = [];
-                data.annotations?.forEach(a=>{
-                    a.features?.forEach(f=>{
-                        if(f!=null && f.type === Type.Site){
-                            if(f.feature_positions)
-                                myComputedTrack.trackData?.push( ...f.feature_positions?.map(p=>({
-                                    begin:p?.beg_seq_id ?? 0,
-                                    end:p?.end_seq_id ?? undefined
-                                })))
-                        }
-                    })
-                });
-                resolve(void 0);
-            })
+        displayColor: "#FF0000",
+        rowTitle: "1ASH",
+        trackData: [{
+            begin: 30,
+            end: 60
+        }]
+    }
+];
 
+const fvConfig: FeatureViewInterface<LoadMolstarInterface<unknown,unknown>,LoadMolstarReturnType> = {
+    boardId:"1ash_board",
+    boardConfig: {
+        range: {
+            min: 1,
+            max: 150
         },
-        addTo(tracks: { alignmentTracks?: Array<RcsbFvRowConfigInterface>; annotationTracks?: Array<RcsbFvRowConfigInterface>; rcsbContext?: Partial<PolymerEntityInstanceInterface>; }): Promise<void> {
-            console.log('addTo(): TRACKS...', tracks);
-            return new Promise<void>(resolve => {
-                if (tracks.rcsbContext?.asymId === "A" && myComputedTrack?.trackData && myComputedTrack.trackData.length > 0) {
-                    tracks.annotationTracks?.push(myComputedTrack);
-                }
-                resolve(void 0);
-            })
-        },
-        filterFeatures(data: {annotations: Array<AnnotationFeatures>; rcsbContext:Partial<PolymerEntityInstanceInterface>}): Promise<Array<AnnotationFeatures>> {
-            console.log('filterFeatures(): DATA...', data);
-            return new Promise<Array<AnnotationFeatures>>(resolve => {
-                resolve(data.annotations);
-            })
+        rowTitleWidth: 190,
+        includeAxis: true
+    },
+    rowConfig: rowConfig,
+    sequenceSelectionChangeCallback: (plugin: StructureViewerPublicInterface<LoadMolstarInterface<unknown,unknown>,LoadMolstarReturnType>, stateManager: RcsbFvStateManager, sequenceRegion: Array<RcsbFvTrackDataElementInterface>) => {
+        stateManager.selectionState.clearSelection("select", {modelId:"1ash_model", labelAsymId:"A"});
+        if(sequenceRegion.length > 0) {
+            const regions = sequenceRegion.map(r => ({
+                modelId: "1ash_model",
+                labelAsymId: "A",
+                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: "1ash_model", labelAsymId: "A"})
+            plugin.resetCamera();
+        }
+    },
+    sequenceElementClickCallback: (plugin: StructureViewerPublicInterface<LoadMolstarInterface<unknown,unknown>,LoadMolstarReturnType>, stateManager: RcsbFvStateManager, d: RcsbFvTrackDataElementInterface) => {
+        if(d!=null)
+            plugin.cameraFocus("1ash_model", "A", 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
+            plugin.select(elements.map(e=>({
+                modelId: "1ash_model",
+                labelAsymId: "A",
+                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("1ash_model", "A", "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("1ash_model", "A", "hover");
+        if(sel == null)
+            pfv.clearSelection("hover");
+        else
+            pfv.setSelection({elements:sel.regions, mode:"hover"});
     }
 }
+
+const block: FeatureBlockInterface<LoadMolstarInterface<unknown,unknown>,LoadMolstarReturnType> = {
+    blockId:"MyBlock_1",
+    featureViewConfig: [fvConfig]
+};
+
+const customConfig: CustomViewInterface<LoadMolstarInterface<unknown,unknown>,LoadMolstarReturnType> = {
+    blockConfig:[block]
+}
+
+const sequenceConfig = {
+    title: "Single chain example",
+    subtitle: "PDB entry with  single chain",
+    config: customConfig
+};
+
+const molstarConfig: RcsbFvStructureConfigInterface<LoadMolstarInterface<unknown,unknown>,{viewerProps:Partial<ViewerProps>}> = {
+    loadConfig: {
+        loadMethod: LoadMethod.loadPdbId,
+        loadParams: {
+            entryId: "1ash",
+            id:"1ash_model"
+        }
+    },
+    structureViewerConfig: {
+        viewerProps:{
+            showImportControls: true,
+            showSessionControls: false
+        }
+    }
+};
+
+document.addEventListener("DOMContentLoaded", function(event) {
+    const panel3d = new RcsbFv3DCustom({
+        elementId: "pfv",
+        structurePanelConfig: molstarConfig,
+        sequencePanelConfig: sequenceConfig,
+        cssConfig:{
+            structurePanel:{
+                minWidth:800,
+                minHeight:800
+            },
+            sequencePanel:{
+                minWidth:800
+            }
+        }
+    });
+    panel3d.render();
+});
+

src/examples/assembly/index.ts

@@ -59,17 +59,15 @@ function externalTrackBuilder(){
     let myComputedTrack: RcsbFvRowConfigInterface = {
         trackId: "blockTrack",
         trackHeight: 20,
-        trackColor: "#000000",
+        trackColor: "#F9F9F9",
         titleFlagColor: "#48a1b3",
         displayType: RcsbFvDisplayTypes.BLOCK,
         displayColor: "#56e0f5",
         rowTitle: "COMPUTED",
         trackData: []
     };
-    console.log('COMPUTED track', myComputedTrack);
     return {
         processAlignmentAndFeatures(data: { annotations?: Array<AnnotationFeatures>; alignments?: AlignmentResponse }): Promise<void> {
-            console.log('Process alignment...', data);
             return new Promise<void>(resolve => {
                 myComputedTrack.trackData = [];
                 data.annotations?.forEach(a=>{
@@ -88,7 +86,6 @@ function externalTrackBuilder(){
 
         },
         addTo(tracks: { alignmentTracks?: Array<RcsbFvRowConfigInterface>; annotationTracks?: Array<RcsbFvRowConfigInterface>; rcsbContext?: Partial<PolymerEntityInstanceInterface>; }): Promise<void> {
-            console.log('addTo(): TRACKS...', tracks);
             return new Promise<void>(resolve => {
                 if (tracks.rcsbContext?.asymId === "A" && myComputedTrack?.trackData && myComputedTrack.trackData.length > 0) {
                     tracks.annotationTracks?.push(myComputedTrack);
@@ -97,7 +94,6 @@ function externalTrackBuilder(){
             })
         },
         filterFeatures(data: {annotations: Array<AnnotationFeatures>; rcsbContext:Partial<PolymerEntityInstanceInterface>}): Promise<Array<AnnotationFeatures>> {
-            console.log('filterFeatures(): DATA...', data);
             return new Promise<Array<AnnotationFeatures>>(resolve => {
                 resolve(data.annotations);
             })

webpack.server.dev.config.js

@@ -39,7 +39,8 @@ const commonConfig = {
     devtool: 'source-map'
 };
 
-const examples = ['assembly'];
+const examples = ['assembly-tm', 'assembly','uniprot','structural-alignment','sequence-identity','single-chain','multiple-chain','alignment-provider'];
+//const examples = ['assembly-tm'];
 const entries = examples.reduce((prev,current)=>{
         prev[current]= fs.existsSync(`./src/examples/${current}/index.ts`) ? `./src/examples/${current}/index.ts` : `./src/examples/${current}/index.tsx`;
         return prev;