bug: SVG rendering of ideogram is not happening (#1862)

* bug: SVG rendering of ideogram is not happening Co-authored-by: jrobinso <933148+jrobinso@users.noreply.github.com>
igvteam · Aug 5, 2024 · edde742 · edde742
1 parent d11b4f7
commit edde742
Show file tree

Hide file tree

Showing 5 changed files with 85 additions and 32 deletions.
diff --git a/dev/misc/png.html b/dev/misc/png.html
@@ -27,8 +27,8 @@
 
 <script type="module">
 
-    // import igv from '../../js/index.js'
-    import igv from '../../dist/igv.esm.js'
+    import igv from '../../js/index.js'
+    // import igv from '../../dist/igv.esm.js'
 
     const bedgraph_options = {
         locus: '19:49301000-49305700',

diff --git a/httpd b/httpd
diff --git a/js/genome/genome.js b/js/genome/genome.js
@@ -186,10 +186,11 @@ class Genome {
         }
     }
 
-    getCytobands(chr) {
+    async getCytobands(chr) {
         if (this.cytobandSource) {
             const chrName = this.getChromosomeName(chr)
-            return this.cytobandSource.getCytobands(chrName)
+            const cytos = await this.cytobandSource.getCytobands(chrName)
+            return cytos
         }
     }
 

diff --git a/js/ideogramTrack.js b/js/ideogramTrack.js
@@ -40,15 +40,11 @@ class IdeogramTrack {
         this.ignoreTrackMenu = true
     }
 
-    async getFeatures(chr, start, end) {
-        return []
-    }
-
     computePixelHeight(ignore) {
         return this.height
     }
 
-    async draw({context, referenceFrame, pixelWidth, pixelHeight}) {
+    draw({context, referenceFrame, pixelWidth, pixelHeight, features}) {
 
         const chr = referenceFrame.chr
         const chromosome = referenceFrame.genome.getChromosome(chr)
@@ -59,8 +55,9 @@ class IdeogramTrack {
 
         const stainColors = []
 
-        await drawIdeogram({
+        drawIdeogram({
             ctx: context,
+            features,
             chr,
             referenceFrame,
             genome: referenceFrame.genome,
@@ -117,7 +114,7 @@ class IdeogramTrack {
     }
 }
 
-async function drawIdeogram({ctx, chr, referenceFrame, genome, width, height, stainColors}) {
+function drawIdeogram({ctx, chr, referenceFrame, genome, width, height, stainColors, features}) {
 
     const shim = 1
     const shim2 = 0.5 * shim
@@ -129,7 +126,7 @@ async function drawIdeogram({ctx, chr, referenceFrame, genome, width, height, st
 
     IGVGraphics.fillRect(ctx, 0, 0, width, height, {fillStyle: IGVColor.greyScale(255)})
 
-    const cytobands = await genome.getCytobands(chr)
+    const cytobands = features
     if (cytobands) {
 
         const center = (ideogramTop + height / 2)

diff --git a/js/ideogramViewport.js b/js/ideogramViewport.js
@@ -30,21 +30,64 @@ import TrackViewport from "./trackViewport.js"
 
 class IdeogramViewport extends TrackViewport {
 
+    featureCache = new IdeogramFeatureCache()
+
     constructor(trackView, viewportColumn, referenceFrame, width) {
         super(trackView, viewportColumn, referenceFrame, width)
     }
 
     initializationHelper() {
 
         this.canvas = document.createElement('canvas')
+
         this.canvas.className = 'igv-ideogram-canvas'
-        //this.$content.append($(this.canvas))
         this.$viewport.append($(this.canvas))
         this.ideogram_ctx = this.canvas.getContext('2d')
 
         this.addMouseHandlers()
     }
 
+    async getFeatures(chr, start, end, bpPerPixel) {
+        if (this.featureCache.containsRange(chr)) {
+            return this.featureCache.get(chr)
+        } else {
+          return this.loadFeatures()
+        }
+    }
+
+    async loadFeatures() {
+        const chr = this.referenceFrame.chr;
+        const features = await  this.referenceFrame.genome.getCytobands(chr)
+        this.featureCache.set(chr, features)
+        return features
+    }
+
+    repaint() {
+
+        if (undefined === this.featureCache) {
+            return
+        }
+
+        const {width, height} = this.$viewport[0].getBoundingClientRect()
+        IGVGraphics.configureHighDPICanvas(this.ideogram_ctx, width, height)
+
+        const chr = this.referenceFrame.chr
+        const features = this.featureCache.get(chr)
+
+        const config =
+            {
+                context: this.ideogram_ctx,
+                pixelWidth: width,
+                pixelHeight: height,
+                referenceFrame: this.referenceFrame,
+                features
+            }
+
+        this.trackView.track.draw(config)
+
+    }
+
+
     addMouseHandlers() {
         this.addViewportClickHandler(this.$viewport.get(0))
     }
@@ -87,42 +130,55 @@ class IdeogramViewport extends TrackViewport {
         this.$viewport.width(width)
     }
 
-    drawSVGWithContext(context, width, height, id, x, y, yClipOffset) {
+    renderSVGContext(context, {deltaX, deltaY}, includeLabel = true) {
 
-        context.saveWithTranslationAndClipRect(id, x, y, width, height, yClipOffset)
+        const {width, height} = this.$viewport.get(0).getBoundingClientRect()
 
+        const str = 'ideogram'
+        const index = this.browser.referenceFrameList.indexOf(this.referenceFrame)
+        const id = `${str}_referenceFrame_${index}_guid_${DOMUtils.guid()}`
+
+        const x = deltaX
+        const y = deltaY + this.contentTop
+        const yClipOffset = -this.contentTop
+
+        context.saveWithTranslationAndClipRect(id, x, y, width, height, yClipOffset)
         this.trackView.track.draw({
             context,
-            referenceFrame: this.referenceFrame,
             pixelWidth: width,
-            pixelHeight: height
+            pixelHeight: height,
+            referenceFrame: this.referenceFrame,
+            features: this.featureCache.get(this.referenceFrame.chr)
         })
-
         context.restore()
-    }
 
-    repaint() {
-        this.draw({referenceFrame: this.referenceFrame})
     }
 
-    async draw({referenceFrame}) {
 
-        IGVGraphics.configureHighDPICanvas(this.ideogram_ctx, this.$viewport.width(), this.$viewport.height())
+    startSpinner() {
+    }
 
-        this.trackView.track.draw({
-            context: this.ideogram_ctx,
-            referenceFrame,
-            pixelWidth: this.$viewport.width(),
-            pixelHeight: this.$viewport.height()
-        })
+    stopSpinner() {
     }
+}
 
-    startSpinner() {
+/**
+ * A very simple feature cache.  The smallest chunk of features for ideograms is a whole chromosome
+ */
+class IdeogramFeatureCache {
+    features = new Map()
+
+    containsRange(chr) {
+        return this.features.has(chr)
     }
 
-    stopSpinner() {
+    set(chr, features) {
+        this.features.set(chr, features)
     }
 
+    get(chr) {
+        return this.features.get(chr)
+    }
 }
 
 export default IdeogramViewport