@jbrowse/plugin-alignments 1.7.7 → 1.7.10

package/dist/PileupRenderer/PileupRenderer.js

@@ -65,6 +65,18 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
+function fillRect(ctx, l, t, w, h, cw, color) {
+  if (l + w < 0 || l > cw) {
+    return;
+  } else {
+    if (color) {
+      ctx.fillStyle = color;
+    }
+
+    ctx.fillRect(l, t, w, h);
+  }
+}
+
 function getColorBaseMap(theme) {
   return {
     A: theme.palette.bases.A.main,
@@ -105,10 +117,14 @@ var alignmentColoring = {
   color_shortinsert: 'pink'
 };
 
-function shouldDrawMismatches(type) {
+function shouldDrawSNPs(type) {
   return !['methylation', 'modifications'].includes(type || '');
 }
 
+function shouldDrawIndels(type) {
+  return true;
+}
+
 var PileupRenderer = /*#__PURE__*/function (_BoxRendererType) {
   (0, _inherits2.default)(PileupRenderer, _BoxRendererType);
 
@@ -133,8 +149,8 @@ var PileupRenderer = /*#__PURE__*/function (_BoxRendererType) {
     value: // get width and height of chars the height is an approximation: width
     // letter M is approximately the height
     function getCharWidthHeight(ctx) {
-      var charWidth = ctx.measureText('A').width;
-      var charHeight = ctx.measureText('M').width;
+      var charWidth = (0, _util.measureText)('A');
+      var charHeight = (0, _util.measureText)('M');
       return {
         charWidth: charWidth,
         charHeight: charHeight
@@ -271,18 +287,23 @@ var PileupRenderer = /*#__PURE__*/function (_BoxRendererType) {
     }
   }, {
     key: "colorByPerBaseLettering",
-    value: function colorByPerBaseLettering(ctx, feat, _config, region, bpPerPx, props) {
-      var colorForBase = props.colorForBase,
-          contrastForBase = props.contrastForBase,
-          charWidth = props.charWidth,
-          charHeight = props.charHeight;
+    value: function colorByPerBaseLettering(_ref4) {
+      var ctx = _ref4.ctx,
+          feat = _ref4.feat,
+          region = _ref4.region,
+          bpPerPx = _ref4.bpPerPx,
+          colorForBase = _ref4.colorForBase,
+          contrastForBase = _ref4.contrastForBase,
+          charWidth = _ref4.charWidth,
+          charHeight = _ref4.charHeight,
+          canvasWidth = _ref4.canvasWidth;
       var heightLim = charHeight - 2;
       var feature = feat.feature,
           topPx = feat.topPx,
           heightPx = feat.heightPx;
       var seq = feature.get('seq');
       var cigarOps = (0, _MismatchParser.parseCigar)(feature.get('CIGAR'));
-      var widthPx = 1 / bpPerPx;
+      var w = 1 / bpPerPx;
       var start = feature.get('start');
       var soffset = 0; // sequence offset
 
@@ -299,18 +320,18 @@ var PileupRenderer = /*#__PURE__*/function (_BoxRendererType) {
         } else if (op === 'M' || op === 'X' || op === '=') {
           for (var m = 0; m < len; m++) {
             var letter = seq[soffset + m];
-            ctx.fillStyle = colorForBase[letter];
+            var r = start + roffset + m;
 
-            var _bpSpanPx3 = (0, _util.bpSpanPx)(start + roffset + m, start + roffset + m + 1, region, bpPerPx),
+            var _bpSpanPx3 = (0, _util.bpSpanPx)(r, r + 1, region, bpPerPx),
                 _bpSpanPx4 = (0, _slicedToArray2.default)(_bpSpanPx3, 1),
                 leftPx = _bpSpanPx4[0];
 
-            ctx.fillRect(leftPx, topPx, widthPx + 0.5, heightPx);
+            fillRect(ctx, leftPx, topPx, w + 0.5, heightPx, canvasWidth, colorForBase[letter]);
 
-            if (widthPx >= charWidth && heightPx >= heightLim) {
+            if (w >= charWidth && heightPx >= heightLim) {
               // normal SNP coloring
               ctx.fillStyle = contrastForBase[letter];
-              ctx.fillText(letter, leftPx + (widthPx - charWidth) / 2 + 1, topPx + heightPx);
+              ctx.fillText(letter, leftPx + (w - charWidth) / 2 + 1, topPx + heightPx);
             }
           }
 
@@ -321,7 +342,12 @@ var PileupRenderer = /*#__PURE__*/function (_BoxRendererType) {
     }
   }, {
     key: "colorByPerBaseQuality",
-    value: function colorByPerBaseQuality(ctx, feat, _config, region, bpPerPx) {
+    value: function colorByPerBaseQuality(_ref5) {
+      var ctx = _ref5.ctx,
+          feat = _ref5.feat,
+          region = _ref5.region,
+          bpPerPx = _ref5.bpPerPx,
+          canvasWidth = _ref5.canvasWidth;
       var feature = feat.feature,
           topPx = feat.topPx,
           heightPx = feat.heightPx;
@@ -347,13 +373,12 @@ var PileupRenderer = /*#__PURE__*/function (_BoxRendererType) {
         } else if (op === 'M' || op === 'X' || op === '=') {
           for (var m = 0; m < len; m++) {
             var score = scores[soffset + m];
-            ctx.fillStyle = "hsl(".concat(score === 255 ? 150 : score * 1.5, ",55%,50%)");
 
             var _bpSpanPx5 = (0, _util.bpSpanPx)(start + roffset + m, start + roffset + m + 1, region, bpPerPx),
                 _bpSpanPx6 = (0, _slicedToArray2.default)(_bpSpanPx5, 1),
                 leftPx = _bpSpanPx6[0];
 
-            ctx.fillRect(leftPx, topPx, width + 0.5, heightPx);
+            fillRect(ctx, leftPx, topPx, width + 0.5, heightPx, canvasWidth, "hsl(".concat(score === 255 ? 150 : score * 1.5, ",55%,50%)"));
           }
 
           soffset += len;
@@ -372,12 +397,18 @@ var PileupRenderer = /*#__PURE__*/function (_BoxRendererType) {
 
   }, {
     key: "colorByModifications",
-    value: function colorByModifications(ctx, layoutFeature, _config, region, bpPerPx, props) {
-      var feature = layoutFeature.feature,
-          topPx = layoutFeature.topPx,
-          heightPx = layoutFeature.heightPx;
-      var _props$modificationTa = props.modificationTagMap,
-          modificationTagMap = _props$modificationTa === void 0 ? {} : _props$modificationTa;
+    value: function colorByModifications(_ref6) {
+      var ctx = _ref6.ctx,
+          feat = _ref6.feat,
+          region = _ref6.region,
+          bpPerPx = _ref6.bpPerPx,
+          renderArgs = _ref6.renderArgs,
+          canvasWidth = _ref6.canvasWidth;
+      var feature = feat.feature,
+          topPx = feat.topPx,
+          heightPx = feat.heightPx;
+      var _renderArgs$modificat = renderArgs.modificationTagMap,
+          modificationTagMap = _renderArgs$modificat === void 0 ? {} : _renderArgs$modificat;
       var mm = (0, _util2.getTagAlt)(feature, 'MM', 'Mm') || '';
       var ml = (0, _util2.getTagAlt)(feature, 'ML', 'Ml') || [];
       var probabilities = ml ? (typeof ml === 'string' ? ml.split(',').map(function (e) {
@@ -391,7 +422,6 @@ var PileupRenderer = /*#__PURE__*/function (_BoxRendererType) {
       });
       var cigar = feature.get('CIGAR');
       var start = feature.get('start');
-      var end = feature.get('end');
       var seq = feature.get('seq');
       var strand = feature.get('strand');
       var cigarOps = (0, _MismatchParser.parseCigar)(cigar);
@@ -412,19 +442,17 @@ var PileupRenderer = /*#__PURE__*/function (_BoxRendererType) {
         try {
           for (_iterator.s(); !(_step = _iterator.n()).done;) {
             var readPos = _step.value;
+            var r = start + readPos;
 
-            if (readPos >= 0 && start + readPos < end) {
-              var _bpSpanPx7 = (0, _util.bpSpanPx)(start + readPos, start + readPos + 1, region, bpPerPx),
-                  _bpSpanPx8 = (0, _slicedToArray2.default)(_bpSpanPx7, 2),
-                  leftPx = _bpSpanPx8[0],
-                  rightPx = _bpSpanPx8[1]; // give it a little boost of 0.1 to not make them fully
-              // invisible to avoid confusion
+            var _bpSpanPx7 = (0, _util.bpSpanPx)(r, r + 1, region, bpPerPx),
+                _bpSpanPx8 = (0, _slicedToArray2.default)(_bpSpanPx7, 2),
+                leftPx = _bpSpanPx8[0],
+                rightPx = _bpSpanPx8[1]; // give it a little boost of 0.1 to not make them fully
+            // invisible to avoid confusion
 
 
-              ctx.fillStyle = base.alpha(probabilities[probIndex] + 0.1).hsl().string();
-              ctx.fillRect(leftPx, topPx, rightPx - leftPx + 0.5, heightPx);
-            }
-
+            var prob = probabilities[probIndex];
+            fillRect(ctx, leftPx, topPx, rightPx - leftPx + 0.5, heightPx, canvasWidth, prob && prob !== 1 ? base.alpha(prob + 0.1).hsl().string() : col);
             probIndex++;
           }
         } catch (err) {
@@ -439,11 +467,17 @@ var PileupRenderer = /*#__PURE__*/function (_BoxRendererType) {
 
   }, {
     key: "colorByMethylation",
-    value: function colorByMethylation(ctx, layoutFeature, _config, region, bpPerPx, props) {
-      var regionSequence = props.regionSequence;
-      var feature = layoutFeature.feature,
-          topPx = layoutFeature.topPx,
-          heightPx = layoutFeature.heightPx;
+    value: function colorByMethylation(_ref7) {
+      var ctx = _ref7.ctx,
+          feat = _ref7.feat,
+          region = _ref7.region,
+          bpPerPx = _ref7.bpPerPx,
+          renderArgs = _ref7.renderArgs,
+          canvasWidth = _ref7.canvasWidth;
+      var regionSequence = renderArgs.regionSequence;
+      var feature = feat.feature,
+          topPx = feat.topPx,
+          heightPx = feat.heightPx;
       var mm = (0, _util2.getTagAlt)(feature, 'MM', 'Mm') || '';
 
       if (!regionSequence) {
@@ -456,9 +490,7 @@ var PileupRenderer = /*#__PURE__*/function (_BoxRendererType) {
       var seq = feature.get('seq');
       var strand = feature.get('strand');
       var cigarOps = (0, _MismatchParser.parseCigar)(cigar);
-      var rstart = region.start,
-          rend = region.end;
-      var methBins = new Array(rend - rstart).fill(0);
+      var methBins = new Array(region.end - region.start).fill(0);
       var modifications = (0, _MismatchParser.getModificationPositions)(mm, seq, strand);
 
       for (var i = 0; i < modifications.length; i++) {
@@ -473,7 +505,7 @@ var PileupRenderer = /*#__PURE__*/function (_BoxRendererType) {
           try {
             for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
               var pos = _step2.value;
-              var epos = pos + fstart - rstart;
+              var epos = pos + fstart - region.start;
 
               if (epos >= 0 && epos < methBins.length) {
                 methBins[epos] = 1;
@@ -488,7 +520,7 @@ var PileupRenderer = /*#__PURE__*/function (_BoxRendererType) {
       }
 
       for (var j = fstart; j < fend; j++) {
-        var _i = j - rstart;
+        var _i = j - region.start;
 
         if (_i >= 0 && _i < methBins.length) {
           var l1 = regionSequence[_i].toLowerCase();
@@ -498,52 +530,34 @@ var PileupRenderer = /*#__PURE__*/function (_BoxRendererType) {
 
           if (bpPerPx > 2) {
             if (l1 === 'c' && l2 === 'g') {
-              var s = rstart + _i;
+              var s = region.start + _i;
 
               var _bpSpanPx9 = (0, _util.bpSpanPx)(s, s + 2, region, bpPerPx),
                   _bpSpanPx10 = (0, _slicedToArray2.default)(_bpSpanPx9, 2),
                   leftPx = _bpSpanPx10[0],
                   rightPx = _bpSpanPx10[1];
 
-              if (methBins[_i] || methBins[_i + 1]) {
-                ctx.fillStyle = 'red';
-              } else {
-                ctx.fillStyle = 'blue';
-              }
-
-              ctx.fillRect(leftPx, topPx, rightPx - leftPx + 0.5, heightPx);
+              fillRect(ctx, leftPx, topPx, rightPx - leftPx + 0.5, heightPx, canvasWidth, methBins[_i] || methBins[_i + 1] ? 'red' : 'blue');
             }
           } // if we are zoomed in, color the c inside the cpg
           else {
             // color
             if (l1 === 'c' && l2 === 'g') {
-              var _s = rstart + _i;
+              var _s = region.start + _i;
 
               var _bpSpanPx11 = (0, _util.bpSpanPx)(_s, _s + 1, region, bpPerPx),
                   _bpSpanPx12 = (0, _slicedToArray2.default)(_bpSpanPx11, 2),
                   _leftPx = _bpSpanPx12[0],
                   _rightPx = _bpSpanPx12[1];
 
-              if (methBins[_i]) {
-                ctx.fillStyle = 'red';
-              } else {
-                ctx.fillStyle = 'blue';
-              }
-
-              ctx.fillRect(_leftPx, topPx, _rightPx - _leftPx + 0.5, heightPx);
+              fillRect(ctx, _leftPx, topPx, _rightPx - _leftPx + 0.5, heightPx, canvasWidth, methBins[_i] ? 'red' : 'blue');
 
               var _bpSpanPx13 = (0, _util.bpSpanPx)(_s + 1, _s + 2, region, bpPerPx),
                   _bpSpanPx14 = (0, _slicedToArray2.default)(_bpSpanPx13, 2),
                   leftPx2 = _bpSpanPx14[0],
                   rightPx2 = _bpSpanPx14[1];
 
-              if (methBins[_i + 1]) {
-                ctx.fillStyle = 'red';
-              } else {
-                ctx.fillStyle = 'blue';
-              }
-
-              ctx.fillRect(leftPx2, topPx, rightPx2 - leftPx2 + 0.5, heightPx);
+              fillRect(ctx, leftPx2, topPx, rightPx2 - leftPx2 + 0.5, heightPx, canvasWidth, methBins[_i + 1] ? 'red' : 'blue');
             }
           }
         }
@@ -595,24 +609,28 @@ var PileupRenderer = /*#__PURE__*/function (_BoxRendererType) {
     }
   }, {
     key: "drawAlignmentRect",
-    value: function drawAlignmentRect(ctx, feat, props) {
-      var defaultColor = props.defaultColor,
-          config = props.config,
-          bpPerPx = props.bpPerPx,
-          regions = props.regions,
-          colorBy = props.colorBy,
-          _props$colorTagMap = props.colorTagMap,
-          colorTagMap = _props$colorTagMap === void 0 ? {} : _props$colorTagMap,
-          colorForBase = props.colorForBase,
-          contrastForBase = props.contrastForBase,
-          charWidth = props.charWidth,
-          charHeight = props.charHeight;
-
-      var _ref4 = colorBy || {},
-          _ref4$tag = _ref4.tag,
-          tag = _ref4$tag === void 0 ? '' : _ref4$tag,
-          _ref4$type = _ref4.type,
-          colorType = _ref4$type === void 0 ? '' : _ref4$type;
+    value: function drawAlignmentRect(_ref8) {
+      var ctx = _ref8.ctx,
+          feat = _ref8.feat,
+          renderArgs = _ref8.renderArgs,
+          colorForBase = _ref8.colorForBase,
+          contrastForBase = _ref8.contrastForBase,
+          charWidth = _ref8.charWidth,
+          charHeight = _ref8.charHeight,
+          defaultColor = _ref8.defaultColor,
+          canvasWidth = _ref8.canvasWidth;
+      var config = renderArgs.config,
+          bpPerPx = renderArgs.bpPerPx,
+          regions = renderArgs.regions,
+          colorBy = renderArgs.colorBy,
+          _renderArgs$colorTagM = renderArgs.colorTagMap,
+          colorTagMap = _renderArgs$colorTagM === void 0 ? {} : _renderArgs$colorTagM;
+
+      var _ref9 = colorBy || {},
+          _ref9$tag = _ref9.tag,
+          tag = _ref9$tag === void 0 ? '' : _ref9$tag,
+          _ref9$type = _ref9.type,
+          colorType = _ref9$type === void 0 ? '' : _ref9$type;
 
       var feature = feat.feature;
       var region = regions[0]; // first pass for simple color changes that change the color of the
@@ -700,48 +718,77 @@ var PileupRenderer = /*#__PURE__*/function (_BoxRendererType) {
           break;
       }
 
-      this.drawRect(ctx, feat, props); // second pass for color types that render per-base things that go over the
+      this.drawRect(ctx, feat, renderArgs); // second pass for color types that render per-base things that go over the
       // existing drawing
 
       switch (colorType) {
         case 'perBaseQuality':
-          this.colorByPerBaseQuality(ctx, feat, config, region, bpPerPx);
+          this.colorByPerBaseQuality({
+            ctx: ctx,
+            feat: feat,
+            region: region,
+            bpPerPx: bpPerPx,
+            canvasWidth: canvasWidth
+          });
           break;
 
         case 'perBaseLettering':
-          this.colorByPerBaseLettering(ctx, feat, config, region, bpPerPx, {
+          this.colorByPerBaseLettering({
+            ctx: ctx,
+            feat: feat,
+            region: region,
+            bpPerPx: bpPerPx,
             colorForBase: colorForBase,
             contrastForBase: contrastForBase,
             charWidth: charWidth,
-            charHeight: charHeight
+            charHeight: charHeight,
+            canvasWidth: canvasWidth
           });
           break;
 
         case 'modifications':
-          this.colorByModifications(ctx, feat, config, region, bpPerPx, props);
+          this.colorByModifications({
+            ctx: ctx,
+            feat: feat,
+            region: region,
+            bpPerPx: bpPerPx,
+            renderArgs: renderArgs,
+            canvasWidth: canvasWidth
+          });
           break;
 
         case 'methylation':
-          this.colorByMethylation(ctx, feat, config, region, bpPerPx, props);
+          this.colorByMethylation({
+            ctx: ctx,
+            feat: feat,
+            region: region,
+            bpPerPx: bpPerPx,
+            renderArgs: renderArgs,
+            canvasWidth: canvasWidth
+          });
           break;
       }
     }
   }, {
     key: "drawMismatches",
-    value: function drawMismatches(ctx, feat, props, opts) {
-      var minSubfeatureWidth = opts.minSubfeatureWidth,
-          largeInsertionIndicatorScale = opts.largeInsertionIndicatorScale,
-          mismatchAlpha = opts.mismatchAlpha,
-          _opts$drawSNPs = opts.drawSNPs,
-          drawSNPs = _opts$drawSNPs === void 0 ? true : _opts$drawSNPs,
-          _opts$drawIndels = opts.drawIndels,
-          drawIndels = _opts$drawIndels === void 0 ? true : _opts$drawIndels,
-          charWidth = opts.charWidth,
-          charHeight = opts.charHeight,
-          colorForBase = opts.colorForBase,
-          contrastForBase = opts.contrastForBase;
-      var bpPerPx = props.bpPerPx,
-          regions = props.regions;
+    value: function drawMismatches(_ref10) {
+      var ctx = _ref10.ctx,
+          feat = _ref10.feat,
+          renderArgs = _ref10.renderArgs,
+          minSubfeatureWidth = _ref10.minSubfeatureWidth,
+          largeInsertionIndicatorScale = _ref10.largeInsertionIndicatorScale,
+          mismatchAlpha = _ref10.mismatchAlpha,
+          charWidth = _ref10.charWidth,
+          charHeight = _ref10.charHeight,
+          colorForBase = _ref10.colorForBase,
+          contrastForBase = _ref10.contrastForBase,
+          canvasWidth = _ref10.canvasWidth,
+          _ref10$drawSNPs = _ref10.drawSNPs,
+          drawSNPs = _ref10$drawSNPs === void 0 ? true : _ref10$drawSNPs,
+          _ref10$drawIndels = _ref10.drawIndels,
+          drawIndels = _ref10$drawIndels === void 0 ? true : _ref10$drawIndels;
+      var bpPerPx = renderArgs.bpPerPx,
+          regions = renderArgs.regions;
       var heightPx = feat.heightPx,
           topPx = feat.topPx,
           feature = feat.feature;
@@ -753,20 +800,9 @@ var PileupRenderer = /*#__PURE__*/function (_BoxRendererType) {
       var pxPerBp = Math.min(1 / bpPerPx, 2);
       var w = Math.max(minSubfeatureWidth, pxPerBp);
       var mismatches = feature.get('mismatches');
-      var heightLim = charHeight - 2;
-
-      function getAlphaColor(baseColor, mismatch) {
-        var color = baseColor;
-
-        if (mismatchAlpha && mismatch.qual !== undefined) {
-          color = (0, _color.default)(baseColor).alpha(Math.min(1, mismatch.qual / 50)).hsl().string();
-        }
-
-        return color;
-      } // extraHorizontallyFlippedOffset is used to draw interbase items, which
+      var heightLim = charHeight - 2; // extraHorizontallyFlippedOffset is used to draw interbase items, which
       // are located to the left when forward and right when reversed
 
-
       var extraHorizontallyFlippedOffset = region.reversed ? 1 / bpPerPx + 1 : -1; // two pass rendering: first pass, draw all the mismatches except wide
       // insertion markers
 
@@ -785,19 +821,16 @@ var PileupRenderer = /*#__PURE__*/function (_BoxRendererType) {
 
         if (mismatch.type === 'mismatch' && drawSNPs) {
           var baseColor = colorForBase[mismatch.base] || '#888';
-          ctx.fillStyle = getAlphaColor(baseColor, mismatch);
-          ctx.fillRect(leftPx, topPx, widthPx, heightPx);
+          fillRect(ctx, leftPx, topPx, widthPx, heightPx, canvasWidth, !mismatchAlpha ? baseColor : mismatch.qual !== undefined ? (0, _color.default)(baseColor).alpha(Math.min(1, mismatch.qual / 50)).hsl().string() : baseColor);
 
           if (widthPx >= charWidth && heightPx >= heightLim) {
             // normal SNP coloring
-            var contrast = contrastForBase[mismatch.base] || 'black';
-            ctx.fillStyle = getAlphaColor(contrast, mismatch);
+            var contrastColor = contrastForBase[mismatch.base] || 'black';
+            ctx.fillStyle = !mismatchAlpha ? contrastColor : mismatch.qual !== undefined ? (0, _color.default)(contrastColor).alpha(Math.min(1, mismatch.qual / 50)).hsl().string() : contrastColor;
             ctx.fillText(mbase, leftPx + (widthPx - charWidth) / 2 + 1, topPx + heightPx);
           }
         } else if (mismatch.type === 'deletion' && drawIndels) {
-          var _baseColor = colorForBase.deletion;
-          ctx.fillStyle = _baseColor;
-          ctx.fillRect(leftPx, topPx, widthPx, heightPx);
+          fillRect(ctx, leftPx, topPx, widthPx, heightPx, canvasWidth, colorForBase.deletion);
           var txt = "".concat(mismatch.length);
           var rwidth = (0, _util.measureText)(txt, 10);
 
@@ -812,24 +845,22 @@ var PileupRenderer = /*#__PURE__*/function (_BoxRendererType) {
           var insW = Math.max(minSubfeatureWidth / 2, Math.min(1.2, 1 / bpPerPx));
 
           if (len < 10) {
-            ctx.fillRect(pos, topPx, insW, heightPx);
+            fillRect(ctx, pos, topPx, insW, heightPx, canvasWidth, 'purple');
 
             if (1 / bpPerPx >= charWidth && heightPx >= heightLim) {
-              ctx.fillRect(pos - insW, topPx, insW * 3, 1);
-              ctx.fillRect(pos - insW, topPx + heightPx - 1, insW * 3, 1);
+              fillRect(ctx, pos - insW, topPx, insW * 3, 1, canvasWidth);
+              fillRect(ctx, pos - insW, topPx + heightPx - 1, insW * 3, 1, canvasWidth);
               ctx.fillText("(".concat(mismatch.base, ")"), pos + 3, topPx + heightPx);
             }
           }
         } else if (mismatch.type === 'hardclip' || mismatch.type === 'softclip') {
-          ctx.fillStyle = mismatch.type === 'hardclip' ? 'red' : 'blue';
-
           var _pos = leftPx + extraHorizontallyFlippedOffset;
 
-          ctx.fillRect(_pos, topPx, w, heightPx);
+          fillRect(ctx, _pos, topPx, w, heightPx, canvasWidth, mismatch.type === 'hardclip' ? 'red' : 'blue');
 
           if (1 / bpPerPx >= charWidth && heightPx >= heightLim) {
-            ctx.fillRect(_pos - w, topPx, w * 3, 1);
-            ctx.fillRect(_pos - w, topPx + heightPx - 1, w * 3, 1);
+            fillRect(ctx, _pos - w, topPx, w * 3, 1, canvasWidth);
+            fillRect(ctx, _pos - w, topPx + heightPx - 1, w * 3, 1, canvasWidth);
             ctx.fillText("(".concat(mismatch.base, ")"), _pos + 3, topPx + heightPx);
           }
         } else if (mismatch.type === 'skip') {
@@ -840,8 +871,7 @@ var PileupRenderer = /*#__PURE__*/function (_BoxRendererType) {
             // make small exons more visible when zoomed far out
             var adjustPx = widthPx - (bpPerPx > 10 ? 1.5 : 0);
             ctx.clearRect(leftPx, topPx, adjustPx, heightPx);
-            ctx.fillStyle = '#333';
-            ctx.fillRect(Math.max(0, leftPx), topPx + heightPx / 2 - 1, adjustPx + (leftPx < 0 ? leftPx : 0), 2);
+            fillRect(ctx, Math.max(0, leftPx), topPx + heightPx / 2 - 1, adjustPx + (leftPx < 0 ? leftPx : 0), 2, canvasWidth, '#333');
           }
         }
       } // second pass, draw wide insertion markers on top
@@ -865,19 +895,17 @@ var PileupRenderer = /*#__PURE__*/function (_BoxRendererType) {
 
           if (_mismatch.type === 'insertion' && _len2 >= 10) {
             if (bpPerPx > largeInsertionIndicatorScale) {
-              ctx.fillStyle = 'purple';
-              ctx.fillRect(_leftPx2 - 1, topPx, 2, heightPx);
+              fillRect(ctx, _leftPx2 - 1, topPx, 2, heightPx, canvasWidth, 'purple');
             } else if (heightPx > charHeight) {
-              var rect = ctx.measureText(_txt);
+              var _rwidth = (0, _util.measureText)(_txt);
+
               var padding = 5;
-              ctx.fillStyle = 'purple';
-              ctx.fillRect(_leftPx2 - rect.width / 2 - padding, topPx, rect.width + 2 * padding, heightPx);
+              fillRect(ctx, _leftPx2 - _rwidth / 2 - padding, topPx, _rwidth + 2 * padding, heightPx, canvasWidth, 'purple');
               ctx.fillStyle = 'white';
-              ctx.fillText(_txt, _leftPx2 - rect.width / 2, topPx + heightPx);
+              ctx.fillText(_txt, _leftPx2 - _rwidth / 2, topPx + heightPx);
             } else {
               var _padding = 2;
-              ctx.fillStyle = 'purple';
-              ctx.fillRect(_leftPx2 - _padding, topPx, 2 * _padding, heightPx);
+              fillRect(ctx, _leftPx2 - _padding, topPx, 2 * _padding, heightPx, canvasWidth, 'purple');
             }
           }
         }
@@ -885,12 +913,18 @@ var PileupRenderer = /*#__PURE__*/function (_BoxRendererType) {
     }
   }, {
     key: "drawSoftClipping",
-    value: function drawSoftClipping(ctx, feat, props, config, theme) {
+    value: function drawSoftClipping(_ref11) {
+      var ctx = _ref11.ctx,
+          feat = _ref11.feat,
+          renderArgs = _ref11.renderArgs,
+          config = _ref11.config,
+          theme = _ref11.theme,
+          canvasWidth = _ref11.canvasWidth;
       var feature = feat.feature,
           topPx = feat.topPx,
           heightPx = feat.heightPx;
-      var regions = props.regions,
-          bpPerPx = props.bpPerPx;
+      var regions = renderArgs.regions,
+          bpPerPx = renderArgs.bpPerPx;
 
       var _regions3 = (0, _slicedToArray2.default)(regions, 1),
           region = _regions3[0];
@@ -938,7 +972,7 @@ var PileupRenderer = /*#__PURE__*/function (_BoxRendererType) {
 
             var baseColor = colorForBase[base] || '#000000';
             ctx.fillStyle = baseColor;
-            ctx.fillRect(softClipLeftPx, topPx, softClipWidthPx, heightPx);
+            fillRect(ctx, softClipLeftPx, topPx, softClipWidthPx, heightPx, canvasWidth);
 
             if (softClipWidthPx >= charWidth && heightPx >= charHeight - 5) {
               ctx.fillStyle = theme.palette.getContrastText(baseColor);
@@ -950,93 +984,93 @@ var PileupRenderer = /*#__PURE__*/function (_BoxRendererType) {
     }
   }, {
     key: "makeImageData",
-    value: function () {
-      var _makeImageData = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(ctx, layoutRecords, props) {
-        var _this2 = this;
+    value: function makeImageData(_ref12) {
+      var ctx = _ref12.ctx,
+          layoutRecords = _ref12.layoutRecords,
+          canvasWidth = _ref12.canvasWidth,
+          renderArgs = _ref12.renderArgs;
+      var layout = renderArgs.layout,
+          config = renderArgs.config,
+          showSoftClip = renderArgs.showSoftClip,
+          colorBy = renderArgs.colorBy,
+          configTheme = renderArgs.theme;
+      var mismatchAlpha = (0, _configuration.readConfObject)(config, 'mismatchAlpha');
+      var minSubfeatureWidth = (0, _configuration.readConfObject)(config, 'minSubfeatureWidth');
+      var largeInsertionIndicatorScale = (0, _configuration.readConfObject)(config, 'largeInsertionIndicatorScale');
+      var defaultColor = (0, _configuration.readConfObject)(config, 'color') === '#f0f';
+      var theme = (0, _ui.createJBrowseTheme)(configTheme);
+      var colorForBase = getColorBaseMap(theme);
+      var contrastForBase = getContrastBaseMap(theme);
+
+      if (!layout) {
+        throw new Error("layout required");
+      }
 
-        var layout, config, showSoftClip, colorBy, configTheme, mismatchAlpha, minSubfeatureWidth, insertScale, defaultColor, theme, colorForBase, contrastForBase, _this$getCharWidthHei2, charWidth, charHeight;
+      if (!layout.addRect) {
+        throw new Error('invalid layout object');
+      }
 
-        return _regenerator.default.wrap(function _callee$(_context) {
-          while (1) {
-            switch (_context.prev = _context.next) {
-              case 0:
-                layout = props.layout, config = props.config, showSoftClip = props.showSoftClip, colorBy = props.colorBy, configTheme = props.theme;
-                mismatchAlpha = (0, _configuration.readConfObject)(config, 'mismatchAlpha');
-                minSubfeatureWidth = (0, _configuration.readConfObject)(config, 'minSubfeatureWidth');
-                insertScale = (0, _configuration.readConfObject)(config, 'largeInsertionIndicatorScale');
-                defaultColor = (0, _configuration.readConfObject)(config, 'color') === '#f0f';
-                theme = (0, _ui.createJBrowseTheme)(configTheme);
-                colorForBase = getColorBaseMap(theme);
-                contrastForBase = getContrastBaseMap(theme);
-
-                if (layout) {
-                  _context.next = 10;
-                  break;
-                }
+      ctx.font = 'bold 10px Courier New,monospace';
 
-                throw new Error("layout required");
+      var _this$getCharWidthHei2 = this.getCharWidthHeight(ctx),
+          charWidth = _this$getCharWidthHei2.charWidth,
+          charHeight = _this$getCharWidthHei2.charHeight;
 
-              case 10:
-                if (layout.addRect) {
-                  _context.next = 12;
-                  break;
-                }
+      var drawSNPs = shouldDrawSNPs(colorBy === null || colorBy === void 0 ? void 0 : colorBy.type);
+      var drawIndels = shouldDrawIndels(colorBy === null || colorBy === void 0 ? void 0 : colorBy.type);
 
-                throw new Error('invalid layout object');
-
-              case 12:
-                ctx.font = 'bold 10px Courier New,monospace';
-                _this$getCharWidthHei2 = this.getCharWidthHeight(ctx), charWidth = _this$getCharWidthHei2.charWidth, charHeight = _this$getCharWidthHei2.charHeight;
-                layoutRecords.forEach(function (feat) {
-                  if (feat === null) {
-                    return;
-                  }
-
-                  _this2.drawAlignmentRect(ctx, feat, _objectSpread(_objectSpread({}, props), {}, {
-                    defaultColor: defaultColor,
-                    colorForBase: colorForBase,
-                    contrastForBase: contrastForBase,
-                    charWidth: charWidth,
-                    charHeight: charHeight
-                  }));
-
-                  _this2.drawMismatches(ctx, feat, props, {
-                    mismatchAlpha: mismatchAlpha,
-                    drawSNPs: shouldDrawMismatches(colorBy === null || colorBy === void 0 ? void 0 : colorBy.type),
-                    drawIndels: shouldDrawMismatches(colorBy === null || colorBy === void 0 ? void 0 : colorBy.type),
-                    largeInsertionIndicatorScale: insertScale,
-                    minSubfeatureWidth: minSubfeatureWidth,
-                    charWidth: charWidth,
-                    charHeight: charHeight,
-                    colorForBase: colorForBase,
-                    contrastForBase: contrastForBase
-                  });
+      for (var i = 0; i < layoutRecords.length; i++) {
+        var feat = layoutRecords[i];
 
-                  if (showSoftClip) {
-                    _this2.drawSoftClipping(ctx, feat, props, config, theme);
-                  }
-                });
+        if (feat === null) {
+          continue;
+        }
 
-              case 15:
-              case "end":
-                return _context.stop();
-            }
-          }
-        }, _callee, this);
-      }));
+        this.drawAlignmentRect({
+          ctx: ctx,
+          feat: feat,
+          renderArgs: renderArgs,
+          defaultColor: defaultColor,
+          colorForBase: colorForBase,
+          contrastForBase: contrastForBase,
+          charWidth: charWidth,
+          charHeight: charHeight,
+          canvasWidth: canvasWidth
+        });
+        this.drawMismatches({
+          ctx: ctx,
+          feat: feat,
+          renderArgs: renderArgs,
+          mismatchAlpha: mismatchAlpha,
+          drawSNPs: drawSNPs,
+          drawIndels: drawIndels,
+          largeInsertionIndicatorScale: largeInsertionIndicatorScale,
+          minSubfeatureWidth: minSubfeatureWidth,
+          charWidth: charWidth,
+          charHeight: charHeight,
+          colorForBase: colorForBase,
+          contrastForBase: contrastForBase,
+          canvasWidth: canvasWidth
+        });
 
-      function makeImageData(_x, _x2, _x3) {
-        return _makeImageData.apply(this, arguments);
+        if (showSoftClip) {
+          this.drawSoftClipping({
+            ctx: ctx,
+            feat: feat,
+            renderArgs: renderArgs,
+            config: config,
+            theme: theme,
+            canvasWidth: canvasWidth
+          });
+        }
       }
-
-      return makeImageData;
-    }() // we perform a full layout before render as a separate method because the
+    } // we perform a full layout before render as a separate method because the
     // layout determines the height of the canvas that we use to render
 
   }, {
     key: "layoutFeats",
     value: function layoutFeats(props) {
-      var _this3 = this;
+      var _this2 = this;
 
       var layout = props.layout,
           features = props.features,
@@ -1060,8 +1094,8 @@ var PileupRenderer = /*#__PURE__*/function (_BoxRendererType) {
       var featureMap = sortedBy !== null && sortedBy !== void 0 && sortedBy.type && region.start === sortedBy.pos ? (0, _sortUtil.sortFeature)(features, sortedBy) : features;
       var heightPx = (0, _configuration.readConfObject)(config, 'height');
       var displayMode = (0, _configuration.readConfObject)(config, 'displayMode');
-      var layoutRecords = (0, _util.iterMap)(featureMap.values(), function (feature) {
-        return _this3.layoutFeature({
+      return (0, _util.iterMap)(featureMap.values(), function (feature) {
+        return _this2.layoutFeature({
           feature: feature,
           layout: layout,
           bpPerPx: bpPerPx,
@@ -1071,47 +1105,46 @@ var PileupRenderer = /*#__PURE__*/function (_BoxRendererType) {
           displayMode: displayMode
         });
       }, featureMap.size);
-      return layoutRecords;
     }
   }, {
     key: "fetchSequence",
     value: function () {
-      var _fetchSequence2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(renderProps) {
+      var _fetchSequence2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(renderProps) {
         var sessionId, regions, adapterConfig, sequenceAdapter, _yield$getAdapter, dataAdapter, _regions5, region;
 
-        return _regenerator.default.wrap(function _callee2$(_context2) {
+        return _regenerator.default.wrap(function _callee$(_context) {
           while (1) {
-            switch (_context2.prev = _context2.next) {
+            switch (_context.prev = _context.next) {
               case 0:
                 sessionId = renderProps.sessionId, regions = renderProps.regions, adapterConfig = renderProps.adapterConfig;
                 sequenceAdapter = adapterConfig.sequenceAdapter;
 
                 if (sequenceAdapter) {
-                  _context2.next = 4;
+                  _context.next = 4;
                   break;
                 }
 
-                return _context2.abrupt("return", undefined);
+                return _context.abrupt("return", undefined);
 
               case 4:
-                _context2.next = 6;
+                _context.next = 6;
                 return (0, _dataAdapterCache.getAdapter)(this.pluginManager, sessionId, sequenceAdapter);
 
               case 6:
-                _yield$getAdapter = _context2.sent;
+                _yield$getAdapter = _context.sent;
                 dataAdapter = _yield$getAdapter.dataAdapter;
                 _regions5 = (0, _slicedToArray2.default)(regions, 1), region = _regions5[0];
-                return _context2.abrupt("return", (0, _util2.fetchSequence)(region, dataAdapter));
+                return _context.abrupt("return", (0, _util2.fetchSequence)(region, dataAdapter));
 
               case 10:
               case "end":
-                return _context2.stop();
+                return _context.stop();
             }
           }
-        }, _callee2, this);
+        }, _callee, this);
       }));
 
-      function fetchSequence(_x4) {
+      function fetchSequence(_x) {
         return _fetchSequence2.apply(this, arguments);
       }
 
@@ -1120,21 +1153,21 @@ var PileupRenderer = /*#__PURE__*/function (_BoxRendererType) {
   }, {
     key: "render",
     value: function () {
-      var _render = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3(renderProps) {
+      var _render = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(renderProps) {
         var _renderProps$colorBy,
-            _this4 = this;
+            _this3 = this;
 
         var features, layout, regions, bpPerPx, layoutRecords, _regions6, region, regionSequence, end, start, width, height, res, results;
 
-        return _regenerator.default.wrap(function _callee3$(_context3) {
+        return _regenerator.default.wrap(function _callee2$(_context2) {
           while (1) {
-            switch (_context3.prev = _context3.next) {
+            switch (_context2.prev = _context2.next) {
               case 0:
-                _context3.next = 2;
+                _context2.next = 2;
                 return this.getFeatures(renderProps);
 
               case 2:
-                features = _context3.sent;
+                features = _context2.sent;
                 layout = this.createLayoutInWorker(renderProps);
                 regions = renderProps.regions, bpPerPx = renderProps.bpPerPx;
                 layoutRecords = this.layoutFeats(_objectSpread(_objectSpread({}, renderProps), {}, {
@@ -1145,38 +1178,43 @@ var PileupRenderer = /*#__PURE__*/function (_BoxRendererType) {
                 // cases
 
                 if (!(features.size && (0, _util2.shouldFetchReferenceSequence)((_renderProps$colorBy = renderProps.colorBy) === null || _renderProps$colorBy === void 0 ? void 0 : _renderProps$colorBy.type))) {
-                  _context3.next = 13;
+                  _context2.next = 13;
                   break;
                 }
 
-                _context3.next = 10;
+                _context2.next = 10;
                 return this.fetchSequence(renderProps);
 
               case 10:
-                _context3.t0 = _context3.sent;
-                _context3.next = 14;
+                _context2.t0 = _context2.sent;
+                _context2.next = 14;
                 break;
 
               case 13:
-                _context3.t0 = undefined;
+                _context2.t0 = undefined;
 
               case 14:
-                regionSequence = _context3.t0;
+                regionSequence = _context2.t0;
                 end = region.end, start = region.start;
                 width = (end - start) / bpPerPx;
                 height = Math.max(layout.getTotalHeight(), 1);
-                _context3.next = 20;
+                _context2.next = 20;
                 return (0, _offscreenCanvasUtils.renderToAbstractCanvas)(width, height, renderProps, function (ctx) {
-                  return _this4.makeImageData(ctx, layoutRecords, _objectSpread(_objectSpread({}, renderProps), {}, {
-                    layout: layout,
-                    features: features,
-                    regionSequence: regionSequence
-                  }));
+                  return _this3.makeImageData({
+                    ctx: ctx,
+                    layoutRecords: layoutRecords,
+                    canvasWidth: width,
+                    renderArgs: _objectSpread(_objectSpread({}, renderProps), {}, {
+                      layout: layout,
+                      features: features,
+                      regionSequence: regionSequence
+                    })
+                  });
                 });
 
               case 20:
-                res = _context3.sent;
-                _context3.next = 23;
+                res = _context2.sent;
+                _context2.next = 23;
                 return (0, _get2.default)((0, _getPrototypeOf2.default)(PileupRenderer.prototype), "render", this).call(this, _objectSpread(_objectSpread(_objectSpread({}, renderProps), res), {}, {
                   features: features,
                   layout: layout,
@@ -1185,8 +1223,8 @@ var PileupRenderer = /*#__PURE__*/function (_BoxRendererType) {
                 }));
 
               case 23:
-                results = _context3.sent;
-                return _context3.abrupt("return", _objectSpread(_objectSpread(_objectSpread({}, results), res), {}, {
+                results = _context2.sent;
+                return _context2.abrupt("return", _objectSpread(_objectSpread(_objectSpread({}, results), res), {}, {
                   features: new Map(),
                   layout: layout,
                   height: height,
@@ -1196,13 +1234,13 @@ var PileupRenderer = /*#__PURE__*/function (_BoxRendererType) {
 
               case 25:
               case "end":
-                return _context3.stop();
+                return _context2.stop();
             }
           }
-        }, _callee3, this);
+        }, _callee2, this);
       }));
 
-      function render(_x5) {
+      function render(_x2) {
         return _render.apply(this, arguments);
       }