Merge pull request #511 from akmorrow13/genome_letters

fixed hidden genome track letters
hammerlab · Mar 17, 2019 · f933d0d · f933d0d
2 parents e5dfca9 + f876928
commit f933d0d
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 13 deletions.
diff --git a/src/main/style.js b/src/main/style.js
@@ -7,7 +7,29 @@
 
 "use strict";
 
+import DisplayMode from './viz/DisplayMode';
+
+
+/**
+ * Computes styles for base pairs which are rendered as letters.
+  *
+ * @param mode DisplayMode to render text.
+ * @param fontSize font size.
+ */
+function TEXT_STYLE(mode: number, fontSize: number): string {
+
+  if (mode == DisplayMode.LOOSE) {
+    return  `${fontSize}px 'Helvetica Neue', Helvetica, Arial, sans-serif`;
+  } else if (mode == DisplayMode.TIGHT) {
+    return `bold ${fontSize}px 'Helvetica Neue', Helvetica, Arial, sans-serif`;
+  } else {
+    return `${fontSize}px`;
+  }
+}
+
 module.exports = {
+  TEXT_STYLE,
+
   // Colors for individual base pairs
   BASE_COLORS: {
     'A': '#188712',
@@ -18,9 +40,6 @@ module.exports = {
     'N': 'black'
   },
 
-  // Styles for base pairs which are rendered as letters
-  LOOSE_TEXT_STYLE: `24px 'Helvetica Neue', Helvetica, Arial, sans-serif`,
-  TIGHT_TEXT_STYLE: `bold 12px 'Helvetica Neue', Helvetica, Arial, sans-serif`,
 
   // Gene track
   GENE_ARROW_SIZE: 4,

diff --git a/src/main/viz/GenomeTrack.js b/src/main/viz/GenomeTrack.js
@@ -32,13 +32,12 @@ function renderGenome(ctx: DataCanvasRenderingContext2D,
   var mode = DisplayMode.getDisplayMode(pxPerLetter);
   var showText = DisplayMode.isText(mode);
 
+  // get adjusted canvas height for drawing letters and rects
+  var adjustedHeight = height/window.devicePixelRatio;
+
   if (mode != DisplayMode.HIDDEN) {
     ctx.textAlign = 'center';
-    if (mode == DisplayMode.LOOSE) {
-      ctx.font = style.LOOSE_TEXT_STYLE;
-    } else if (mode == DisplayMode.TIGHT) {
-      ctx.font = style.TIGHT_TEXT_STYLE;
-    }
+    ctx.font = style.TEXT_STYLE(mode, adjustedHeight);
 
     var previousBase = null;
     var start = range.start(),
@@ -54,19 +53,19 @@ function renderGenome(ctx: DataCanvasRenderingContext2D,
         // We only push objects in the text case as it involves creating a
         // new object & can become a performance issue.
         // 0.5 = centered
-        ctx.fillText(letter, scale(1 + 0.5 + pos), height - 1);
+        ctx.fillText(letter, scale(1 + 0.5 + pos), adjustedHeight);
       } else {
         if (pxPerLetter >= style.COVERAGE_MIN_BAR_WIDTH_FOR_GAP) {
           // We want a white space between blocks at this size, so we can see
           // the difference between bases.
-          ctx.fillRect(scale(1 + pos) + 0.5, 0,  pxPerLetter - 1.5, height);
+          ctx.fillRect(scale(1 + pos) + 0.5, 0,  pxPerLetter - 1.5, adjustedHeight);
         } else if (previousBase === letter) {
           // Otherwise, we want runs of colors to be completely solid ...
-          ctx.fillRect(scale(1 + pos) - 1.5, 0, pxPerLetter + 1.5, height);
+          ctx.fillRect(scale(1 + pos) - 1.5, 0, pxPerLetter + 1.5, adjustedHeight);
         } else {
           // ... and minimize the amount of smudging and whitespace between
           // bases.
-          ctx.fillRect(scale(1 + pos) - 0.5, 0,  pxPerLetter + 1.5, height);
+          ctx.fillRect(scale(1 + pos) - 0.5, 0,  pxPerLetter + 1.5, adjustedHeight);
         }
       }
 

diff --git a/src/main/viz/PileupTrack.js b/src/main/viz/PileupTrack.js
@@ -209,7 +209,7 @@ function renderPileup(ctx: DataCanvasRenderingContext2D,
     ctx.popObject();
   }
 
-  ctx.font = style.TIGHT_TEXT_STYLE;
+  ctx.font = style.TEXT_STYLE(DisplayMode.TIGHT, style.READ_HEIGHT - 1);
   vGroups.forEach(vGroup => drawGroup(vGroup));
 }