Merge branch 'master' into xqtl

igvteam · Jul 19, 2024 · 9b4be5e · 9b4be5e
2 parents b73cc78 + 46013f4
commit 9b4be5e
Show file tree

Hide file tree

Showing 10 changed files with 203 additions and 7 deletions.
diff --git a/css/_roi.scss b/css/_roi.scss
@@ -465,7 +465,7 @@ $igv-roi-table-background-color: #eee;
 
   overflow: visible;
 
-  margin-top: 44px;
+  margin-top: 66px;
 
   //border-left-width: thin;
   //border-left-style: solid;

diff --git a/css/igv.css b/css/igv.css
diff --git a/dev/misc/roiSampleInfoLayoutBug.html b/dev/misc/roiSampleInfoLayoutBug.html
@@ -0,0 +1,142 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link href=https://igv.org/web/img/favicon.ico rel="shortcut icon">
+    <title>IGV - Dev</title>
+
+</head>
+
+<body>
+
+<p>
+    <input id="fileInput" type="file">
+</p>
+<p>
+    <input id="processFileInput" type="button" value="Load Sample Info File">
+</p>
+<p>
+    <button id="sessionButton">Session JSON</button>
+</p>
+
+<div id="myDiv" style="padding-top: 50px;padding-bottom: 20px; height: auto"></div>
+
+<script type="module">
+
+    import igv from '../../js/index.js'
+
+    const config =
+        {
+            locus: "1:67,655,272-67,684,468",
+            genome: "hg19",
+            doShowROITableButton: true,
+            showSampleNames: false,
+            roi:
+                [
+                    {
+                        name: 'ROI set 1',
+                        url: 'https://s3.amazonaws.com/igv.org.test/data/roi/roi_bed_1.bed',
+                        indexed: false,
+                        color: "rgba(94,255,1,0.25)"
+                    },
+                    {
+                        name: "ROI set 2",
+                        color: "rgba(3,52,249,0.25)",
+                        features: [
+                            {
+                                chr: "chr1",
+                                start: 67670000,
+                                end: 67671080,
+                                name: 'Set 2 feature 1'
+                            },
+                            {
+                                chr: "chr1",
+                                start: 67672095,
+                                end: 67673993
+                            },
+                            {
+                                chr: "chr1",
+                                start: 67674681,
+                                end: 67675237
+                            },
+                            {
+                                chr: "chr1",
+                                start: 67676055,
+                                end: 67676710
+                            },
+                            {
+                                chr: "chr1",
+                                start: 67677561,
+                                end: 67677888
+                            },
+                            {
+                                chr: "chr1",
+                                start: 67679263,
+                                end: 67679394
+                            },
+                            {
+                                chr: "chr1",
+                                start: 67679950,
+                                end: 67680180
+                            },
+                            {
+                                chr: "chr1",
+                                start: 67681849,
+                                end: 67682340
+                            }
+                        ]
+                    }
+                ],
+            tracks:
+                [
+                    {
+                        "type": "sequence",
+                        "order": -9007199254740991
+                    },
+                    {
+                        "url": "https://www.dropbox.com/scl/fi/rob7ilg4ca0b9djhtcu3d/GBMCopyNumber.seg.gz?rlkey=c89kstbjm6ge73ytku2s4g0gf&dl=0",
+                        "filename": "GBMCopyNumber.seg.gz",
+                        "name": "GBMCopyNumber.seg.gz",
+                        "order": 1,
+                        "format": "seg",
+                        "type": "seg",
+                        "height": 300
+                    },
+                    {
+                        "name": "Refseq Genes",
+                        "format": "refgene",
+                        "url": "https://hgdownload.soe.ucsc.edu/goldenPath/hg38/database/ncbiRefSeq.txt.gz",
+                        "indexed": false,
+                        "order": 1000001,
+                        "infoURL": "https://www.ncbi.nlm.nih.gov/gene/?term=$$",
+                        "type": "annotation",
+                        "height": 70
+                    }
+                ]
+        };
+
+    const browser = await igv.createBrowser(document.getElementById('myDiv'), config)
+
+    document.getElementById('processFileInput').addEventListener('click', processFile)
+
+    async function processFile() {
+        const [ file ] = document.getElementById('fileInput').files
+        await browser.loadSampleInfo({ url: file })
+    }
+
+    document.getElementById("sessionButton").addEventListener("click", () => {
+        try {
+            const json = browser.toJSON()
+            console.log(`${ json }`)
+        } catch (e) {
+            alert(e);
+        }
+    })
+
+
+</script>
+
+</body>
+
+</html>
+
diff --git a/dev/qtl/xqtl.html b/dev/qtl/xqtl.html
@@ -69,6 +69,7 @@ <h3>QTL example</h3>
             {
                 type: "qtl",
                 format: "qtl",
+
                 name: "Monocyte mQTL",
                 url: "https://igv-genepattern-org.s3.amazonaws.com/test/qtl/Monocyte_mQTL.tsv.gz",
                 indexURL: "https://igv-genepattern-org.s3.amazonaws.com/test/qtl/Monocyte_mQTL.tsv.gz.tbi",
@@ -78,6 +79,7 @@ <h3>QTL example</h3>
                 type: "qtl",
                 format: "qtl",
                 name: "Monocyte hQTL",
+
                 url: "https://igv-genepattern-org.s3.amazonaws.com/test/qtl/Monocyte_hQTL.tsv.gz",
                 indexURL: "https://igv-genepattern-org.s3.amazonaws.com/test/qtl/Monocyte_hQTL.tsv.gz.tbi",
                 visibilityWindow: 4000000

diff --git a/examples/xqtl.html b/examples/xqtl.html
@@ -65,6 +65,7 @@ <h3>QTL example</h3>
             {
                 type: "qtl",
                 format: "qtl",
+
                 name: "Monocyte mQTL",
                 url: "https://igv-genepattern-org.s3.amazonaws.com/test/qtl/Monocyte_mQTL.tsv.gz",
                 indexURL: "https://igv-genepattern-org.s3.amazonaws.com/test/qtl/Monocyte_mQTL.tsv.gz.tbi",
@@ -73,6 +74,7 @@ <h3>QTL example</h3>
             {
                 type: "qtl",
                 format: "qtl",
+
                 name: "Monocyte hQTL",
                 url: "https://igv-genepattern-org.s3.amazonaws.com/test/qtl/Monocyte_hQTL.tsv.gz",
                 indexURL: "https://igv-genepattern-org.s3.amazonaws.com/test/qtl/Monocyte_hQTL.tsv.gz.tbi",

diff --git a/js/embedCss.js b/js/embedCss.js
diff --git a/js/qtl/qtlParser.js b/js/qtl/qtlParser.js
@@ -181,7 +181,6 @@ class QTLParser {
         return allFeatures
     }
 
-
     /**
      * Test first line to see if this is a QTL file.  Used to determine file format for the case of generic
      * extensions such as "tsv"
@@ -205,7 +204,6 @@ class QTLParser {
         }
         return true
     }
-
 }
 
 

diff --git a/js/roi/ROIManager.js b/js/roi/ROIManager.js
@@ -1,6 +1,7 @@
 import * as DOMUtils from "../ui/utils/dom-utils.js"
 import ROISet, {screenCoordinates} from './ROISet.js'
 import Popover from "../ui/popover.js"
+import {getElementVerticalDimension} from "../util/igvUtils.js"
 
 class ROIManager {
 
@@ -9,11 +10,40 @@ class ROIManager {
         this.browser = browser
         this.roiMenu = roiMenu
         this.roiTable = roiTable
-        this.top = top
+        // this.top = top
+        this.top = 0
         this.roiSets = roiSets || []
         this.boundLocusChangeHandler = locusChangeHandler.bind(this)
         browser.on('locuschange', this.boundLocusChangeHandler)
 
+        this.constructionHelper(browser)
+
+    }
+
+    constructionHelper(browser) {
+
+        const updateROIDimensions = () => {
+
+            const tracks = browser.findTracks(track => new Set(['ideogram', 'ruler']).has(track.type))
+            const [ rectA, rectB ] = tracks
+                .map( track => track.trackView.viewports[ 0 ].$viewport.get(0))
+                .map(element => getElementVerticalDimension(element))
+
+            const elements = browser.columnContainer.querySelectorAll('.igv-roi-region')
+
+            const fudge = -0.5
+            if (elements) {
+                for (const element of elements) {
+                    element.style.marginTop = `${ rectA.height  + rectB.height + fudge }px`
+                }
+
+            }
+        }
+
+        this.observer = new MutationObserver(updateROIDimensions)
+        const [ column ] = browser.columnContainer.querySelectorAll('.igv-column')
+        this.observer.observe(column, { attributes: true, childList: true, subtree: true })
+
     }
 
     async initialize() {

diff --git a/js/sample/sampleInfo.js b/js/sample/sampleInfo.js
@@ -51,12 +51,17 @@ class SampleInfo {
         this.sampleMappingDictionary = {}
         this.colorDictionary = {}
         this.attributeRangeLUT = {}
+        this.initialized = false
     }
 
     get attributeCount() {
         return this.attributeNames ? this.attributeNames.length : 0
     }
 
+    isInitialized() {
+        return this.initialized
+    }
+
     hasAttributes() {
         return this.attributeCount > 0
     }
@@ -96,6 +101,8 @@ class SampleInfo {
             }
         }
 
+        this.initialized = true
+
     }
 
     getAttributeColor(attribute, value) {

diff --git a/js/util/igvUtils.js b/js/util/igvUtils.js
@@ -257,8 +257,23 @@ function expandRegion(start, end, extent) {
     }
 }
 
+function getElementVerticalDimension(element) {
+
+    const style = window.getComputedStyle(element)
+
+    const marginTop = parseInt(style.marginTop);
+    const marginBottom = parseInt(style.marginBottom);
+
+    const { top, bottom, height } = element.getBoundingClientRect()
+    return {
+        top: Math.floor(top) - marginTop,
+        bottom: Math.floor(bottom) + marginBottom,
+        height: Math.floor(height) + marginTop + marginBottom
+    };
+}
+
 export {
     createColumn, extend, isSimpleType, buildOptions, validateGenomicExtent, doAutoscale, isNumber,
     getFilename, prettyBasePairNumber, isDataURL, insertElementBefore, insertElementAfter, isSecureContext,
-    getElementAbsoluteHeight, expandRegion, isInteger
+    getElementAbsoluteHeight, expandRegion, isInteger, getElementVerticalDimension
 }