test: initialise genome browser and import data from test data #TASK-…

…4724
opencb · Jul 14, 2023 · cf2d30b · cf2d30b
1 parent b83c421
commit cf2d30b
Showing 1 changed file with 104 additions and 17 deletions.
diff --git a/src/sites/test-app/webcomponents/genome-browser-test.js b/src/sites/test-app/webcomponents/genome-browser-test.js
@@ -17,6 +17,16 @@
 import {html, LitElement} from "lit";
 
 import UtilsNew from "../../../core/utils-new.js";
+import Region from "../../../core/bioinfo/region.js";
+
+import GenomeBrowser from "../../../genome-browser/genome-browser.js";
+import FeatureTrack from "../../../genome-browser/tracks/feature-track.js";
+import GeneOverviewTrack from "../../../genome-browser/tracks/gene-overview-track.js";
+import GeneTrack from "../../../genome-browser/tracks/gene-track.js";
+import SequenceTrack from "../../../genome-browser/tracks/sequence-track.js";
+import VariantTrack from "../../../genome-browser/tracks/variant-track.js";
+import OpenCGAVariantTrack from "../../../genome-browser/tracks/opencga-variant-track.js";
+import OpenCGAAlignmentTrack from "../../../genome-browser/tracks/opencga-alignment-track.js";
 
 
 class GenomeBrowserTest extends LitElement {
@@ -53,23 +63,26 @@ class GenomeBrowserTest extends LitElement {
     }
 
     testDataVersionObserver() {
-        // const filesToImport = [
-        // ];
-        // const promises = filesToImport.map(file => {
-        //     return UtilsNew.importJSONFile(`./test-data/${this.testDataVersion}/${file}`);
-        // });
-
-        // // Import all files
-        // Promise.all(promises)
-        //     .then(data => {
-        //         this._data = data;
-        //         // Mutate data and draw protein lollipop
-        //         this.mutate();
-        //         this.drawGenomeBrowser();
-        //     })
-        //     .catch(error => {
-        //         console.error(error);
-        //     });
+        const filesToImport = [
+            "genome-browser-features-of-interest.json",
+        ];
+        const promises = filesToImport.map(file => {
+            return UtilsNew.importJSONFile(`./test-data/${this.testDataVersion}/${file}`);
+        });
+
+        // Import all files
+        Promise.all(promises)
+            .then(data => {
+                this._data = {
+                    featuresOfInterest: data[0],
+                };
+                // Mutate data and draw protein lollipop
+                this.mutate();
+                // this.drawGenomeBrowser();
+            })
+            .catch(error => {
+                console.error(error);
+            });
     }
 
     mutate() {
@@ -78,6 +91,80 @@ class GenomeBrowserTest extends LitElement {
 
     drawGenomeBrowser() {
         const target = this.querySelector(`div#${this._prefix}`);
+        const region = new Region({
+            chromosome: "17",
+            start: 43096757,
+            end: 43112003,
+        });
+        // TODO
+        // const species = availableSpecies.vertebrates[0];
+        const species = {
+            id: "hsapiens",
+            scientificName: "Homo sapiens",
+            assembly: {
+                name: "GRCh38",
+                ensemblVersion: "104_38",
+            },
+        };
+
+        const genomeBrowser = new GenomeBrowser(target, {
+            cellBaseClient: cellBaseClient,
+            cellBaseHost: "CELLBASE_HOST",
+            cellBaseVersion: "CELLBASE_VERSION",
+            width: parent.getBoundingClientRect().width,
+            region: region,
+            species: species,
+            resizable: true,
+            featuresOfInterest: this._data.featuresOfInterest,
+        });
+
+        // When GB is ready add tracks and draw
+        genomeBrowser.on("ready", () => {
+            // Overview tracks
+            genomeBrowser.addOverviewTracks([
+                new GeneOverviewTrack({
+                    cellBaseClient: cellBaseClient,
+                }),
+            ]);
+
+            // Detail tracks
+            genomeBrowser.addTracks([
+                // Sequence Track
+                new SequenceTrack({
+                    cellBaseClient: cellBaseClient,
+                }),
+                // Gene track
+                new GeneTrack({
+                    title: "Gene",
+                    cellBaseClient: cellBaseClient,
+                }),
+                // OpenCGA Variant track with query
+                new OpenCGAVariantTrack({
+                    title: "Variant (Samples)",
+                    closable: false,
+                    minHistogramRegionSize: 20000000,
+                    maxLabelRegionSize: 10000000,
+                    minTranscriptRegionSize: 200000,
+                    visibleRegionSize: 100000000,
+                    height: 200,
+                    opencgaClient: opencgaClient,
+                    opencgaStudy: "demo@family:platinum",
+                    query: {
+                        sample: "NA12877,NA12878,NA12889",
+                    },
+                    highlights: [
+                        {
+                            id: "test1",
+                            name: "[TEST] Length > 0",
+                            description: "This variant has length > 0.",
+                            condition: feature => feature.end - feature.start + 1 > 0,
+                        },
+                    ],
+                }),
+            ]);
+
+            genomeBrowser.draw();
+        });
     }
 
     render() {