@jbrowse/plugin-alignments 1.7.9 → 1.7.10

package/dist/PileupRenderer/PileupRenderer.d.ts

@@ -65,24 +65,56 @@ export default class PileupRenderer extends BoxRendererType {
     getOrientation(feature: Feature, config: AnyConfigurationModel): string;
     colorByInsertSize(feature: Feature, _config: AnyConfigurationModel): string;
     colorByStranded(feature: Feature, _config: AnyConfigurationModel): "color_rev_strand" | "color_fwd_strand" | "color_rev_missing_mate" | "color_fwd_missing_mate" | "color_rev_strand_not_proper" | "color_fwd_strand_not_proper" | "color_fwd_diff_chr" | "color_rev_diff_chr";
-    colorByPerBaseLettering(ctx: CanvasRenderingContext2D, feat: LayoutFeature, _config: AnyConfigurationModel, region: Region, bpPerPx: number, props: {
+    colorByPerBaseLettering({ ctx, feat, region, bpPerPx, colorForBase, contrastForBase, charWidth, charHeight, canvasWidth, }: {
+        ctx: CanvasRenderingContext2D;
+        feat: LayoutFeature;
+        region: Region;
+        bpPerPx: number;
         colorForBase: Record<string, string>;
         contrastForBase: Record<string, string>;
         charWidth: number;
         charHeight: number;
+        canvasWidth: number;
+    }): void;
+    colorByPerBaseQuality({ ctx, feat, region, bpPerPx, canvasWidth, }: {
+        ctx: CanvasRenderingContext2D;
+        feat: LayoutFeature;
+        region: Region;
+        bpPerPx: number;
+        canvasWidth: number;
+    }): void;
+    colorByModifications({ ctx, feat, region, bpPerPx, renderArgs, canvasWidth, }: {
+        ctx: CanvasRenderingContext2D;
+        feat: LayoutFeature;
+        region: Region;
+        bpPerPx: number;
+        renderArgs: RenderArgsDeserializedWithFeaturesAndLayout;
+        canvasWidth: number;
+    }): void;
+    colorByMethylation({ ctx, feat, region, bpPerPx, renderArgs, canvasWidth, }: {
+        ctx: CanvasRenderingContext2D;
+        feat: LayoutFeature;
+        region: Region;
+        bpPerPx: number;
+        renderArgs: RenderArgsDeserializedWithFeaturesAndLayout;
+        canvasWidth: number;
     }): void;
-    colorByPerBaseQuality(ctx: CanvasRenderingContext2D, feat: LayoutFeature, _config: AnyConfigurationModel, region: Region, bpPerPx: number): void;
-    colorByModifications(ctx: CanvasRenderingContext2D, layoutFeature: LayoutFeature, _config: AnyConfigurationModel, region: Region, bpPerPx: number, props: RenderArgsDeserializedWithFeaturesAndLayout): void;
-    colorByMethylation(ctx: CanvasRenderingContext2D, layoutFeature: LayoutFeature, _config: AnyConfigurationModel, region: Region, bpPerPx: number, props: RenderArgsDeserializedWithFeaturesAndLayout): void;
     drawRect(ctx: CanvasRenderingContext2D, feat: LayoutFeature, props: RenderArgsDeserialized): void;
-    drawAlignmentRect(ctx: CanvasRenderingContext2D, feat: LayoutFeature, props: RenderArgsDeserializedWithFeaturesAndLayout & {
+    drawAlignmentRect({ ctx, feat, renderArgs, colorForBase, contrastForBase, charWidth, charHeight, defaultColor, canvasWidth, }: {
+        ctx: CanvasRenderingContext2D;
+        feat: LayoutFeature;
+        renderArgs: RenderArgsDeserializedWithFeaturesAndLayout;
         colorForBase: Record<string, string>;
         contrastForBase: Record<string, string>;
         charWidth: number;
         charHeight: number;
         defaultColor: boolean;
+        canvasWidth: number;
     }): void;
-    drawMismatches(ctx: CanvasRenderingContext2D, feat: LayoutFeature, props: RenderArgsDeserializedWithFeaturesAndLayout, opts: {
+    drawMismatches({ ctx, feat, renderArgs, minSubfeatureWidth, largeInsertionIndicatorScale, mismatchAlpha, charWidth, charHeight, colorForBase, contrastForBase, canvasWidth, drawSNPs, drawIndels, }: {
+        ctx: CanvasRenderingContext2D;
+        feat: LayoutFeature;
+        renderArgs: RenderArgsDeserializedWithFeaturesAndLayout;
         colorForBase: {
             [key: string]: string;
         };
@@ -96,9 +128,22 @@ export default class PileupRenderer extends BoxRendererType {
         largeInsertionIndicatorScale: number;
         charWidth: number;
         charHeight: number;
+        canvasWidth: number;
+    }): void;
+    drawSoftClipping({ ctx, feat, renderArgs, config, theme, canvasWidth, }: {
+        ctx: CanvasRenderingContext2D;
+        feat: LayoutFeature;
+        renderArgs: RenderArgsDeserializedWithFeaturesAndLayout;
+        config: AnyConfigurationModel;
+        theme: Theme;
+        canvasWidth: number;
+    }): void;
+    makeImageData({ ctx, layoutRecords, canvasWidth, renderArgs, }: {
+        ctx: CanvasRenderingContext2D;
+        canvasWidth: number;
+        layoutRecords: (LayoutFeature | null)[];
+        renderArgs: RenderArgsDeserializedWithFeaturesAndLayout;
     }): void;
-    drawSoftClipping(ctx: CanvasRenderingContext2D, feat: LayoutFeature, props: RenderArgsDeserializedWithFeaturesAndLayout, config: AnyConfigurationModel, theme: Theme): void;
-    makeImageData(ctx: CanvasRenderingContext2D, layoutRecords: (LayoutFeature | null)[], props: RenderArgsDeserializedWithFeaturesAndLayout): void;
     layoutFeats(props: RenderArgsDeserializedWithFeaturesAndLayout): (LayoutRecord | null)[];
     fetchSequence(renderProps: RenderArgsDeserialized): Promise<any>;
     render(renderProps: RenderArgsDeserialized): Promise<{

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,
@@ -275,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
 
@@ -303,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);
             }
           }
 
@@ -325,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;
@@ -351,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;
@@ -376,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) {
@@ -425,8 +452,7 @@ var PileupRenderer = /*#__PURE__*/function (_BoxRendererType) {
 
 
             var prob = probabilities[probIndex];
-            ctx.fillStyle = prob && prob !== 1 ? base.alpha(prob + 0.1).hsl().string() : col;
-            ctx.fillRect(leftPx, topPx, rightPx - leftPx + 0.5, heightPx);
+            fillRect(ctx, leftPx, topPx, rightPx - leftPx + 0.5, heightPx, canvasWidth, prob && prob !== 1 ? base.alpha(prob + 0.1).hsl().string() : col);
             probIndex++;
           }
         } catch (err) {
@@ -441,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) {
@@ -505,8 +537,7 @@ var PileupRenderer = /*#__PURE__*/function (_BoxRendererType) {
                   leftPx = _bpSpanPx10[0],
                   rightPx = _bpSpanPx10[1];
 
-              ctx.fillStyle = methBins[_i] || methBins[_i + 1] ? 'red' : '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 {
@@ -519,16 +550,14 @@ var PileupRenderer = /*#__PURE__*/function (_BoxRendererType) {
                   _leftPx = _bpSpanPx12[0],
                   _rightPx = _bpSpanPx12[1];
 
-              ctx.fillStyle = methBins[_i] ? 'red' : '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];
 
-              ctx.fillStyle = methBins[_i + 1] ? 'red' : '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');
             }
           }
         }
@@ -580,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
@@ -685,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;
@@ -759,8 +821,7 @@ var PileupRenderer = /*#__PURE__*/function (_BoxRendererType) {
 
         if (mismatch.type === 'mismatch' && drawSNPs) {
           var baseColor = colorForBase[mismatch.base] || '#888';
-          ctx.fillStyle = !mismatchAlpha ? baseColor : mismatch.qual !== undefined ? (0, _color.default)(baseColor).alpha(Math.min(1, mismatch.qual / 50)).hsl().string() : baseColor;
-          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
@@ -769,9 +830,7 @@ var PileupRenderer = /*#__PURE__*/function (_BoxRendererType) {
             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);
 
@@ -786,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') {
@@ -814,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
@@ -839,20 +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 _rwidth = (0, _util.measureText)(_txt);
 
               var padding = 5;
-              ctx.fillStyle = 'purple';
-              ctx.fillRect(_leftPx2 - _rwidth / 2 - padding, topPx, _rwidth + 2 * padding, heightPx);
+              fillRect(ctx, _leftPx2 - _rwidth / 2 - padding, topPx, _rwidth + 2 * padding, heightPx, canvasWidth, 'purple');
               ctx.fillStyle = 'white';
               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');
             }
           }
         }
@@ -860,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];
@@ -913,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);
@@ -925,12 +984,16 @@ var PileupRenderer = /*#__PURE__*/function (_BoxRendererType) {
     }
   }, {
     key: "makeImageData",
-    value: function makeImageData(ctx, layoutRecords, props) {
-      var layout = props.layout,
-          config = props.config,
-          showSoftClip = props.showSoftClip,
-          colorBy = props.colorBy,
-          configTheme = props.theme;
+    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');
@@ -963,14 +1026,21 @@ var PileupRenderer = /*#__PURE__*/function (_BoxRendererType) {
           continue;
         }
 
-        this.drawAlignmentRect(ctx, feat, _objectSpread(_objectSpread({}, props), {}, {
+        this.drawAlignmentRect({
+          ctx: ctx,
+          feat: feat,
+          renderArgs: renderArgs,
           defaultColor: defaultColor,
           colorForBase: colorForBase,
           contrastForBase: contrastForBase,
           charWidth: charWidth,
-          charHeight: charHeight
-        }));
-        this.drawMismatches(ctx, feat, props, {
+          charHeight: charHeight,
+          canvasWidth: canvasWidth
+        });
+        this.drawMismatches({
+          ctx: ctx,
+          feat: feat,
+          renderArgs: renderArgs,
           mismatchAlpha: mismatchAlpha,
           drawSNPs: drawSNPs,
           drawIndels: drawIndels,
@@ -979,19 +1049,19 @@ var PileupRenderer = /*#__PURE__*/function (_BoxRendererType) {
           charWidth: charWidth,
           charHeight: charHeight,
           colorForBase: colorForBase,
-          contrastForBase: contrastForBase
+          contrastForBase: contrastForBase,
+          canvasWidth: canvasWidth
         });
-      }
-
-      if (showSoftClip) {
-        for (var _i3 = 0; _i3 < layoutRecords.length; _i3++) {
-          var _feat = layoutRecords[_i3];
-
-          if (_feat === null) {
-            continue;
-          }
 
-          this.drawSoftClipping(ctx, _feat, props, config, theme);
+        if (showSoftClip) {
+          this.drawSoftClipping({
+            ctx: ctx,
+            feat: feat,
+            renderArgs: renderArgs,
+            config: config,
+            theme: theme,
+            canvasWidth: canvasWidth
+          });
         }
       }
     } // we perform a full layout before render as a separate method because the
@@ -1130,11 +1200,16 @@ var PileupRenderer = /*#__PURE__*/function (_BoxRendererType) {
                 height = Math.max(layout.getTotalHeight(), 1);
                 _context2.next = 20;
                 return (0, _offscreenCanvasUtils.renderToAbstractCanvas)(width, height, renderProps, function (ctx) {
-                  return _this3.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:

package/dist/SNPCoverageAdapter/SNPCoverageAdapter.d.ts

@@ -19,7 +19,9 @@ export default class SNPCoverageAdapter extends BaseFeatureDataAdapter {
         };
     }): Promise<{
         bins: {
+            refbase?: string | undefined;
             total: number;
+            all: number;
             ref: number;
             '-1': 0;
             '0': 0;