bug: SVG rendering of ideogram is not happening

igvteam · Aug 5, 2024 · f75cad9 · f75cad9
1 parent e199a16
commit f75cad9
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 22 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/js/ideogramTrack.js b/js/ideogramTrack.js
@@ -129,7 +129,13 @@ 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)
+    let cytobands
+    if (0 === genome.cytobandSource.cytobands.size) {
+        cytobands = await genome.getCytobands(chr)
+    } else {
+        cytobands = genome.cytobandSource.cytobands.get(chr)
+    }
+
     if (cytobands) {
 
         const center = (ideogramTop + height / 2)

diff --git a/js/ideogramViewport.js b/js/ideogramViewport.js
@@ -27,6 +27,7 @@ import $ from "./vendor/jquery-3.3.1.slim.js"
 import IGVGraphics from './igv-canvas.js'
 import * as DOMUtils from "./ui/utils/dom-utils.js"
 import TrackViewport from "./trackViewport.js"
+import {appleCrayonRGB} from "./util/colorPalletes.js"
 
 class IdeogramViewport extends TrackViewport {
 
@@ -87,34 +88,40 @@ 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()}`
 
-        this.trackView.track.draw({
-            context,
-            referenceFrame: this.referenceFrame,
-            pixelWidth: width,
-            pixelHeight: height
-        })
+        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, pixelWidth:width, pixelHeight:height, referenceFrame:this.referenceFrame })
         context.restore()
-    }
 
-    repaint() {
-        this.draw({referenceFrame: this.referenceFrame})
     }
 
-    async draw({referenceFrame}) {
+    repaint() {
+        const {width, height} = this.$viewport.get(0).getBoundingClientRect()
+        const config =
+            {
+                context:this.ideogram_ctx,
+                pixelWidth: width,
+                pixelHeight: height,
+                referenceFrame: this.referenceFrame
+            }
 
-        IGVGraphics.configureHighDPICanvas(this.ideogram_ctx, this.$viewport.width(), this.$viewport.height())
+        this.draw(config)
+    }
 
-        this.trackView.track.draw({
-            context: this.ideogram_ctx,
-            referenceFrame,
-            pixelWidth: this.$viewport.width(),
-            pixelHeight: this.$viewport.height()
-        })
+    async draw({ context, pixelWidth, pixelHeight, referenceFrame }) {
+        IGVGraphics.configureHighDPICanvas(context, pixelWidth, pixelHeight)
+        this.trackView.track.draw({ context, pixelWidth, pixelHeight, referenceFrame })
     }
 
     startSpinner() {