improvements to dev and example html

igvteam · Sep 7, 2021 · d111a7e · d111a7e
1 parent ac5942f
commit d111a7e
Show file tree

Hide file tree

Showing 33 changed files with 248 additions and 434 deletions.
diff --git a/dev/alignment/bamNonIndexed.html b/dev/alignment/bamNonIndexed.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <title>IGV</title>
+    <title>igv.js</title>
 </head>
 
 <body>
@@ -20,7 +20,7 @@ <h1>Non-indexed BAM file</h1>
     const options =
         {
             genome: "hg19",
-            locus: "gstt1",
+            locus: "chr22:24,376,164-24,376,475",
             tracks: [
                 {
                     id: "myBamTrack",

diff --git a/dev/alignment/bamSorted.html b/dev/alignment/bamSorted.html
@@ -8,12 +8,15 @@
 
 <h1>BAM file with initial sort</h1>
 
-In this example a BAM file is loaded with an initial sort position set.   Also demonstrated is the use of <i>findTracks</i>
-and <i>sort</i> functions to programmatically trigger a sort at specific positions.
+In this example a BAM file is loaded with an initial sort position set. Also demonstrated is the use of
+<i>findTracks</i>and <i>sort</i> functions to programmatically trigger a sort at specific positions.
+
+<div style="padding-top: 20px;">
+    <button id="gotoButton">Goto chr1:155,155,358</button>
+    <button id="button1">Sort position chr1:155,155,358</button>
+    <button id="button2">Sort position chr1:155,155,361</button>
+</div>
 
-<button id="gotoButton">Goto chr1:155,155,358</button>
-<button id="button1">Sort position chr1:155,155,358</button>
-<button id="button2">Sort position chr1:155,155,361</button>
 <div id="igvDiv" style="padding-top: 50px;padding-bottom: 20px; height: auto"></div>
 
 <script type="module">
@@ -57,20 +60,22 @@ <h1>BAM file with initial sort</h1>
             document.getElementById("button1").addEventListener("click", () => {
                 const bamTrack = browser.findTracks("id", "myBamTrack")[0];
                 bamTrack.sort({
-                chr: "chr1",
-                position: 155155358,
-                option: "BASE",
-                direction: "ASC"
-            });})
+                    chr: "chr1",
+                    position: 155155358,
+                    option: "BASE",
+                    direction: "ASC"
+                });
+            })
 
             document.getElementById("button2").addEventListener("click", () => {
                 const bamTrack = browser.findTracks("id", "myBamTrack")[0];
                 bamTrack.sort({
-                chr: "chr1",
-                position: 155155361,
-                option: "BASE",
-                direction: "ASC"
-            });})
+                    chr: "chr1",
+                    position: 155155361,
+                    option: "BASE",
+                    direction: "ASC"
+                });
+            })
 
         })
 

diff --git a/dev/alignment/deepcoverage.html b/dev/alignment/deepcoverage.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <title>IGV</title>
+    <title>igv.js</title>
 </head>
 
 <body>

diff --git a/dev/alignment/pacbio.html b/dev/alignment/pacbio.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <title>IGV</title>
+    <title>igv.js</title>
 </head>
 
 <body>

diff --git a/dev/annotation/ucscFormats.html b/dev/annotation/ucscFormats.html
@@ -41,7 +41,7 @@ <h1>Miscellaneous UCSC formats</h1>
                         "indexURL": "https://s3.amazonaws.com/igv.org.genomes/hg38/annotations/gwasCatalog.txt.gz.tbi"
                     },
                     {
-                        "name": "Common SNPs (150)",
+                        "name": "Common SNPs (snp)",
                         "type": "snp",
                         "format": "snp",
                         "visibilityWindow": 25000,
@@ -50,7 +50,7 @@ <h1>Miscellaneous UCSC formats</h1>
                         "indexURL": "https://s3.amazonaws.com/igv.org.genomes/hg38/annotations/snp150Common.txt.gz.tbi"
                     },
                     {
-                        "name": "Repeat Masker",
+                        "name": "Repeat Masker (rmsk)",
                         "type": "annotation",
                         "format": "rmsk",
                         "displayMode": "EXPANDED",
@@ -59,7 +59,7 @@ <h1>Miscellaneous UCSC formats</h1>
                         "visibilityWindow": 1000000
                     },
                     {
-                        "name": "CpG Islands",
+                        "name": "CpG Islands (cpgIslandExt)",
                         "type": "annotation",
                         "format": "cpgIslandExt",
                         "displayMode": "EXPANDED",

diff --git a/dev/cbio/cBio.html b/dev/cbio/cBio.html
@@ -1,13 +1,8 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="utf-8">
-    <meta content="IE=edge" http-equiv="X-UA-Compatible">
-    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
-    <meta content="" name="description">
-    <meta content="" name="author">
-    <link href=https://igv.org/web/img/favicon.ico rel="shortcut icon">
-    <title>IGV - Dev</title>
+
+    <title>igv.js</title>
 
     <style>
         #trackList {
@@ -55,7 +50,9 @@
 <h3>Select study to load copy number</h3>
 
 <div id="trackList"></div>
-
+<div class='igv-loading-spinner-container' >
+    <div id="spinner" style="display: none"></div>   <!-- This extra div is needed, apparently -->
+</div>
 <div id="igvDiv" style="padding-top: 50px;padding-bottom: 20px; height: auto"></div>
 
 <script type="module">
@@ -75,9 +72,9 @@ <h3>Select study to load copy number</h3>
                 let name = study["name"] + " (" + sampleCount + ")";
                 let trackDiv = document.createElement('div');
                 trackDiv.textContent = name;
-                trackDiv.addEventListener('click', async function (event) {
+                trackDiv.addEventListener('click', async  (event) => {
 
-                    const sampleStudyList = await cBioUtils.fetchSamplesByStudy(study.studyId)
+                    document.getElementById("spinner").style.display = "block";
 
                     const features = await cBioUtils.fetchCopyNumberByStudy(study.studyId)
 
@@ -91,6 +88,8 @@ <h3>Select study to load copy number</h3>
                     }
                     browser.loadTrack(trackJson);
 
+                    document.getElementById("spinner").style.display = "none";
+
                 });
 
                 div.appendChild(trackDiv);

diff --git a/dev/color/gff-colorBy.html b/dev/color/gff-colorBy.html
@@ -28,6 +28,16 @@ <h1>gff and gtf files</h1>
                     locus: "chr22:21,913,513-22,216,565",
                     tracks:
                         [
+                            {
+                                name: "Color by attribute \"biotype\"",
+                                format: "gff3",
+                                displayMode: "expanded",
+                                height: 300,
+                                url: "https://s3.amazonaws.com/igv.org.genomes/hg38/Homo_sapiens.GRCh38.94.chr.gff3.gz",
+                                indexURL: "https://s3.amazonaws.com/igv.org.genomes/hg38/Homo_sapiens.GRCh38.94.chr.gff3.gz.tbi",
+                                visibilityWindow: 1000000,
+                                colorBy: "biotype"
+                            },
                             {
                                 name: "Color by \"source\"",
                                 format: "gff3",

diff --git a/dev/seg/seg.html b/dev/seg/seg.html
@@ -9,6 +9,17 @@
 
 <h1>Segmented Copy Number</h1>
 
+<div style="padding-top: 10px;padding-bottom: 10px;">
+
+    Segmented copy number ("seg" format) with
+    <ul>
+        <li>No index</li>
+        <li>Index with no visibiliy window (loads by whole chromosome)</li>
+        <li>Index with visibility window of 100 MB</li>
+    </ul>
+
+</div>
+
 <div>
     <button id="bmBtn">Bookmark</button>
 </div>
@@ -19,33 +30,45 @@ <h1>Segmented Copy Number</h1>
 
     import igv from "../../js/index.js";
 
-    var options =
+    const version = igv.version();
+    console.log("Using IGV version: " + version);
+
+    const igvDiv = document.getElementById("igvDiv");
+    const options =
         {
             genome: "hg19",
+            showSampleNames: true,
             tracks: [
                 {
                     name: "Segmented Copy Number",
                     type: "seg",
                     format: "seg",
-                    url: "https://s3.amazonaws.com/igv.org.demo/GBM-TP.seg.gz"
+                    url: "https://s3.amazonaws.com/igv.org.demo/GBM-TP.seg.gz",
+                },
+                {
+                    name: "Indexed",
+                    type: "seg",
+                    format: "seg",
+                    url: "https://s3.amazonaws.com/igv.org.demo/GBM-TP.seg.gz",
+                    indexURL: "https://s3.amazonaws.com/igv.org.demo/GBM-TP.seg.gz.tbi"
+                },
+                {
+                    name: "Indexed with visibility window",
+                    type: "seg",
+                    format: "seg",
+                    url: "https://s3.amazonaws.com/igv.org.demo/GBM-TP.seg.gz",
+                    indexURL: "https://s3.amazonaws.com/igv.org.demo/GBM-TP.seg.gz.tbi",
+                    visibilityWindow: "100000000"
                 },
             ]
-        }
+        };
 
-    var igvDiv = document.getElementById("igvDiv");
 
     igv.createBrowser(igvDiv, options)
         .then(function (browser) {
             console.log("Created IGV browser");
-
-            function bookmark() {
-            }
-
-            document.getElementById("bmBtn")
-                .addEventListener("click", () => window.history.pushState({}, "IGV", browser.sessionURL()));
         })
 
-
 </script>
 </body>
 </html>
diff --git a/examples/copyNumber.html b/examples/copyNumber.html
@@ -15,6 +15,18 @@
 
 <h1>Segmented Copy Number</h1>
 
+<div style="padding-top: 10px;padding-bottom: 10px;">
+
+    Segmented copy number ("seg" format) with
+    <ul>
+        <li>No index</li>
+        <li>Index with no visibiliy window (loads by whole chromosome)</li>
+        <li>Index with visibility window of 100 MB</li>
+    </ul>
+
+</div>
+
+
 <div id="igv-div" style="padding-top: 10px;padding-bottom: 10px; border:1px solid lightgray"></div>
 
 <script type="text/javascript">
@@ -28,12 +40,13 @@ <h1>Segmented Copy Number</h1>
         const options =
             {
                 genome: "hg19",
+                showSampleNames: true,
                 tracks: [
                     {
                         name: "Segmented Copy Number",
                         type: "seg",
                         format: "seg",
-                        url: "https://s3.amazonaws.com/igv.org.demo/GBM-TP.seg.gz"
+                        url: "https://s3.amazonaws.com/igv.org.demo/GBM-TP.seg.gz",
                     },
                     {
                         name: "Indexed",

diff --git a/examples/css/custom-track-click.css b/examples/css/custom-track-click.css
diff --git a/examples/css/custom-track-click.css.map b/examples/css/custom-track-click.css.map
diff --git a/examples/css/custom-track-click.scss b/examples/css/custom-track-click.scss
diff --git a/examples/css/examples.css b/examples/css/examples.css
diff --git a/examples/css/examples.css.map b/examples/css/examples.css.map
diff --git a/examples/css/ga4gh.css b/examples/css/ga4gh.css