Bug fix: Save Image - GroupBy graphical elements now save properly

igvteam · Sep 5, 2024 · 9562de1 · 9562de1
1 parent dd0345d
commit 9562de1
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 7 deletions.
diff --git a/dev/issues/git-1886.html b/dev/issues/git-1886.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Git Issue - 1886</title>
+</head>
+<body>
+
+<header>
+    <h1>Git Issue - 1886</h1>
+</header>
+
+<main>
+    <div id="igvDiv" style="padding-top: 50px;padding-bottom: 20px; height: auto"></div>
+</main>
+
+<script type="module">
+
+    import igv from "../../js/index.js"
+
+    const config =
+        {
+            "version": "3.0.5",
+            "showSampleNames": false,
+            "reference": {
+                "id": "hg19",
+                "name": "Human (GRCh37/hg19)",
+                "fastaURL": "https://igv-genepattern-org.s3.amazonaws.com/genomes/seq/hg19/hg19.fasta",
+                "indexURL": "https://igv-genepattern-org.s3.amazonaws.com/genomes/seq/hg19/hg19.fasta.fai",
+                "cytobandURL": "https://hgdownload.soe.ucsc.edu/goldenPath/hg19/database/cytoBand.txt.gz",
+                "aliasURL": "https://hgdownload.soe.ucsc.edu/goldenPath/hg19/bigZips/hg19.chromAlias.txt",
+                "twoBitURL": "https://hgdownload.soe.ucsc.edu/goldenPath/hg19/bigZips/hg19.2bit",
+                "chromSizesURL": "https://hgdownload.soe.ucsc.edu/goldenPath/hg19/bigZips/hg19.chrom.sizes",
+                "chromosomeOrder": "chr1,chr2,chr3,chr4,chr5,chr6,chr7,chr8,chr9,chr10,chr11,chr12,chr13,chr14,chr15,chr16,chr17,chr18,chr19,chr20,chr21,chr22,chrX,chrY"
+            },
+            "locus": "chr3:86,924,605-86,924,924",
+            "roi": [],
+            "tracks": [
+                {
+                    "type": "sequence",
+                    "order": -9007199254740991
+                },
+                {
+                    "sourceType": "gcs",
+                    "type": "alignment",
+                    "url": "gs://genomics-public-data/platinum-genomes/bam/NA12889_S1.bam",
+                    "indexURL": "gs://genomics-public-data/platinum-genomes/bam/NA12889_S1.bam.bai",
+                    "name": "NA12889",
+                    "order": 0,
+                    "colorBy": "unexpectedPair"
+                },
+                {
+                    "name": "Refseq Genes",
+                    "format": "refgene",
+                    "id": "hg19_genes",
+                    "url": "https://hgdownload.soe.ucsc.edu/goldenPath/hg19/database/ncbiRefSeq.txt.gz",
+                    "indexed": false,
+                    "order": 1000000,
+                    "infoURL": "https://www.ncbi.nlm.nih.gov/gene/?term=$$",
+                    "type": "annotation",
+                    "height": 70
+                }
+            ]
+        }
+
+    igv.createBrowser(document.getElementById('igvDiv'), config)
+        .then(browser => {
+            console.log(`browser ${ browser.guid } is good to go`)
+        })
+
+</script>
+</body>
+</html>
diff --git a/js/bam/alignmentTrack.js b/js/bam/alignmentTrack.js
@@ -304,6 +304,7 @@ class AlignmentTrack extends TrackBase {
                 if (this.groupBy && groupName) {
 
                     ctx.save()
+
                     ctx.font = '400 12px sans-serif'
                     const textMetrics = ctx.measureText(groupName)
                     const w = textMetrics.width + 10
@@ -314,14 +315,10 @@ class AlignmentTrack extends TrackBase {
                     ctx.textAlign = "center"
                     ctx.fillStyle = 'white'
                     ctx.strokeStyle = 'lightGray'
-                    ctx.beginPath()
-                    ctx.roundRect(x, baselineY - textMetrics.actualBoundingBoxAscent - 5, w, h, 2)
-                    ctx.fill()
-                    ctx.stroke()
+                    IGVGraphics.roundRect(ctx, x, baselineY - textMetrics.actualBoundingBoxAscent - 5, w, h, 2, 1, 1)
 
                     ctx.fillStyle = 'black'
                     ctx.fillText(groupName, x + w / 2, baselineY)
-
                     IGVGraphics.dashedLine(ctx, 0, alignmentY, pixelWidth, alignmentY)
 
                     ctx.restore()
@@ -1229,7 +1226,7 @@ class AlignmentTrack extends TrackBase {
         const y = clickState.y
         const offsetY = y - this.top
         const genomicLocation = clickState.genomicLocation
- 
+
         if(features.packedGroups) {
             let minGroupY = Number.MAX_VALUE
             for (let group of features.packedGroups.values()) {

diff --git a/js/trackViewport.js b/js/trackViewport.js
@@ -475,7 +475,8 @@ class TrackViewport extends Viewport {
 
             context.saveWithTranslationAndClipRect(id, x, y, width, height, yClipOffset)
 
-            let {start, bpPerPixel} = this.referenceFrame
+            const {start, bpPerPixel} = this.referenceFrame
+            const pixelXOffset = Math.round((start - this.referenceFrame.start) / bpPerPixel)
 
             const config =
                 {
@@ -486,6 +487,8 @@ class TrackViewport extends Viewport {
                     pixelTop: yClipOffset,
                     pixelWidth: width,
                     pixelHeight: height,
+                    pixelXOffset,
+                    pixelShift: pixelXOffset,
                     bpStart: start,
                     bpEnd: start + (width * bpPerPixel),
                     bpPerPixel,