@jbrowse/plugin-alignments 1.6.9 → 1.7.3

package/dist/PileupRenderer/PileupRenderer.js

@@ -0,0 +1,1220 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _get2 = _interopRequireDefault(require("@babel/runtime/helpers/get"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _color = _interopRequireDefault(require("color"));
+
+var _BoxRendererType2 = _interopRequireDefault(require("@jbrowse/core/pluggableElementTypes/renderers/BoxRendererType"));
+
+var _ui = require("@jbrowse/core/ui");
+
+var _util = require("@jbrowse/core/util");
+
+var _offscreenCanvasUtils = require("@jbrowse/core/util/offscreenCanvasUtils");
+
+var _dataAdapterCache = require("@jbrowse/core/data_adapters/dataAdapterCache");
+
+var _configuration = require("@jbrowse/core/configuration");
+
+var _MismatchParser = require("../BamAdapter/MismatchParser");
+
+var _sortUtil = require("./sortUtil");
+
+var _util2 = require("../util");
+
+var _PileupLayoutSession = require("./PileupLayoutSession");
+
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
+
+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 getColorBaseMap(theme) {
+  return {
+    A: theme.palette.bases.A.main,
+    C: theme.palette.bases.C.main,
+    G: theme.palette.bases.G.main,
+    T: theme.palette.bases.T.main,
+    deletion: '#808080' // gray
+
+  };
+}
+
+function getContrastBaseMap(theme) {
+  return Object.fromEntries(Object.entries(getColorBaseMap(theme)).map(function (_ref) {
+    var _ref2 = (0, _slicedToArray2["default"])(_ref, 2),
+        key = _ref2[0],
+        value = _ref2[1];
+
+    return [key, theme.palette.getContrastText(value)];
+  }));
+}
+
+var alignmentColoring = {
+  color_fwd_strand_not_proper: '#ECC8C8',
+  color_rev_strand_not_proper: '#BEBED8',
+  color_fwd_strand: '#EC8B8B',
+  color_rev_strand: '#8F8FD8',
+  color_fwd_missing_mate: '#D11919',
+  color_rev_missing_mate: '#1919D1',
+  color_fwd_diff_chr: '#000',
+  color_rev_diff_chr: '#969696',
+  color_pair_lr: '#c8c8c8',
+  color_pair_rr: 'navy',
+  color_pair_rl: 'teal',
+  color_pair_ll: 'green',
+  color_nostrand: '#c8c8c8',
+  color_interchrom: 'orange',
+  color_longinsert: 'red',
+  color_shortinsert: 'pink'
+};
+
+function shouldDrawMismatches(type) {
+  return !['methylation', 'modifications'].includes(type || '');
+}
+
+var PileupRenderer = /*#__PURE__*/function (_BoxRendererType) {
+  (0, _inherits2["default"])(PileupRenderer, _BoxRendererType);
+
+  var _super = _createSuper(PileupRenderer);
+
+  function PileupRenderer() {
+    var _this;
+
+    (0, _classCallCheck2["default"])(this, PileupRenderer);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "supportsSVG", true);
+    return _this;
+  }
+
+  (0, _createClass2["default"])(PileupRenderer, [{
+    key: "getCharWidthHeight",
+    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;
+      return {
+        charWidth: charWidth,
+        charHeight: charHeight
+      };
+    }
+  }, {
+    key: "layoutFeature",
+    value: function layoutFeature(_ref3) {
+      var feature = _ref3.feature,
+          layout = _ref3.layout,
+          bpPerPx = _ref3.bpPerPx,
+          region = _ref3.region,
+          showSoftClip = _ref3.showSoftClip,
+          heightPx = _ref3.heightPx,
+          displayMode = _ref3.displayMode;
+      var expansionBefore = 0;
+      var expansionAfter = 0; // Expand the start and end of feature when softclipping enabled
+
+      if (showSoftClip) {
+        var mismatches = feature.get('mismatches');
+        var seq = feature.get('seq');
+
+        if (seq) {
+          for (var i = 0; i < mismatches.length; i += 1) {
+            var _mismatches$i = mismatches[i],
+                type = _mismatches$i.type,
+                start = _mismatches$i.start,
+                _mismatches$i$cliplen = _mismatches$i.cliplen,
+                cliplen = _mismatches$i$cliplen === void 0 ? 0 : _mismatches$i$cliplen;
+
+            if (type === 'softclip') {
+              start === 0 ? expansionBefore = cliplen : expansionAfter = cliplen;
+            }
+          }
+        }
+      }
+
+      var _bpSpanPx = (0, _util.bpSpanPx)(feature.get('start') - expansionBefore, feature.get('end') + expansionAfter, region, bpPerPx),
+          _bpSpanPx2 = (0, _slicedToArray2["default"])(_bpSpanPx, 2),
+          leftPx = _bpSpanPx2[0],
+          rightPx = _bpSpanPx2[1];
+
+      if (displayMode === 'compact') {
+        heightPx /= 3;
+      }
+
+      if (feature.get('refName') !== region.refName) {
+        throw new Error("feature ".concat(feature.id(), " is not on the current region's reference sequence ").concat(region.refName));
+      }
+
+      var topPx = layout.addRect(feature.id(), feature.get('start') - expansionBefore, feature.get('end') + expansionAfter, heightPx);
+
+      if (topPx === null) {
+        return null;
+      }
+
+      return {
+        feature: feature,
+        leftPx: leftPx,
+        rightPx: rightPx,
+        topPx: displayMode === 'collapse' ? 0 : topPx,
+        heightPx: heightPx
+      };
+    } // expands region for clipping to use. possible improvement: use average read
+    // size to set the heuristic maxClippingSize expansion (e.g. short reads
+    // don't have to expand a softclipping size a lot, but long reads might)
+
+  }, {
+    key: "getExpandedRegion",
+    value: function getExpandedRegion(region, renderArgs) {
+      var config = renderArgs.config,
+          showSoftClip = renderArgs.showSoftClip;
+      var maxClippingSize = (0, _configuration.readConfObject)(config, 'maxClippingSize');
+      var start = region.start,
+          end = region.end;
+      var len = end - start;
+      var bpExpansion = Math.max(len, showSoftClip ? Math.round(maxClippingSize) : 0);
+      return _objectSpread(_objectSpread({}, region), {}, {
+        start: Math.floor(Math.max(start - bpExpansion, 0)),
+        end: Math.ceil(end + bpExpansion)
+      });
+    }
+  }, {
+    key: "colorByOrientation",
+    value: function colorByOrientation(feature, config) {
+      return alignmentColoring[this.getOrientation(feature, config) || 'color_nostrand'];
+    }
+  }, {
+    key: "getOrientation",
+    value: function getOrientation(feature, config) {
+      var orientationType = (0, _configuration.readConfObject)(config, 'orientationType');
+      var type = _util2.orientationTypes[orientationType];
+      var orientation = type[feature.get('pair_orientation')];
+      var map = {
+        LR: 'color_pair_lr',
+        RR: 'color_pair_rr',
+        RL: 'color_pair_rl',
+        LL: 'color_pair_ll'
+      };
+      return map[orientation];
+    }
+  }, {
+    key: "colorByInsertSize",
+    value: function colorByInsertSize(feature, _config) {
+      return feature.get('is_paired') && feature.get('seq_id') !== feature.get('next_seq_id') ? '#555' : "hsl(".concat(Math.abs(feature.get('template_length')) / 10, ",50%,50%)");
+    }
+  }, {
+    key: "colorByStranded",
+    value: function colorByStranded(feature, _config) {
+      var flags = feature.get('flags');
+      var strand = feature.get('strand'); // is paired
+
+      if (flags & 1) {
+        var revflag = flags & 64;
+        var flipper = revflag ? -1 : 1; // proper pairing
+
+        if (flags & 2) {
+          return strand * flipper === 1 ? 'color_rev_strand' : 'color_fwd_strand';
+        }
+
+        if (feature.get('multi_segment_next_segment_unmapped')) {
+          return strand * flipper === 1 ? 'color_rev_missing_mate' : 'color_fwd_missing_mate';
+        }
+
+        if (feature.get('seq_id') === feature.get('next_seq_id')) {
+          return strand * flipper === 1 ? 'color_rev_strand_not_proper' : 'color_fwd_strand_not_proper';
+        } // should only leave aberrant chr
+
+
+        return strand === 1 ? 'color_fwd_diff_chr' : 'color_rev_diff_chr';
+      }
+
+      return strand === 1 ? 'color_fwd_strand' : 'color_rev_strand';
+    }
+  }, {
+    key: "colorByPerBaseLettering",
+    value: function colorByPerBaseLettering(ctx, feat, _config, region, bpPerPx, props) {
+      var colorForBase = props.colorForBase,
+          contrastForBase = props.contrastForBase,
+          charWidth = props.charWidth,
+          charHeight = props.charHeight;
+      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 start = feature.get('start');
+      var soffset = 0; // sequence offset
+
+      var roffset = 0; // reference offset
+
+      for (var i = 0; i < cigarOps.length; i += 2) {
+        var len = +cigarOps[i];
+        var op = cigarOps[i + 1];
+
+        if (op === 'S' || op === 'I') {
+          soffset += len;
+        } else if (op === 'D' || op === 'N') {
+          roffset += len;
+        } else if (op === 'M' || op === 'X' || op === '=') {
+          for (var m = 0; m < len; m++) {
+            var letter = seq[soffset + m];
+            ctx.fillStyle = colorForBase[letter];
+
+            var _bpSpanPx3 = (0, _util.bpSpanPx)(start + roffset + m, start + roffset + m + 1, region, bpPerPx),
+                _bpSpanPx4 = (0, _slicedToArray2["default"])(_bpSpanPx3, 1),
+                leftPx = _bpSpanPx4[0];
+
+            ctx.fillRect(leftPx, topPx, widthPx + 0.5, heightPx);
+
+            if (widthPx >= charWidth && heightPx >= heightLim) {
+              // normal SNP coloring
+              ctx.fillStyle = contrastForBase[letter];
+              ctx.fillText(letter, leftPx + (widthPx - charWidth) / 2 + 1, topPx + heightPx);
+            }
+          }
+
+          soffset += len;
+          roffset += len;
+        }
+      }
+    }
+  }, {
+    key: "colorByPerBaseQuality",
+    value: function colorByPerBaseQuality(ctx, feat, _config, region, bpPerPx) {
+      var feature = feat.feature,
+          topPx = feat.topPx,
+          heightPx = feat.heightPx;
+      var qual = feature.get('qual') || '';
+      var scores = qual.split(' ').map(function (val) {
+        return +val;
+      });
+      var cigarOps = (0, _MismatchParser.parseCigar)(feature.get('CIGAR'));
+      var width = 1 / bpPerPx;
+      var start = feature.get('start');
+      var soffset = 0; // sequence offset
+
+      var roffset = 0; // reference offset
+
+      for (var i = 0; i < cigarOps.length; i += 2) {
+        var len = +cigarOps[i];
+        var op = cigarOps[i + 1];
+
+        if (op === 'S' || op === 'I') {
+          soffset += len;
+        } else if (op === 'D' || op === 'N') {
+          roffset += len;
+        } 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);
+          }
+
+          soffset += len;
+          roffset += len;
+        }
+      }
+    } // ML stores probabilities as array of numerics and MP is scaled phred scores
+    // https://github.com/samtools/hts-specs/pull/418/files#diff-e765c6479316309f56b636f88189cdde8c40b854c7bdcce9ee7fe87a4e76febcR596
+    //
+    // if we have ML or Ml, it is an 8bit probability, divide by 255
+    //
+    // if we have MP or Mp it is phred scaled ASCII, which can go up to 90 but
+    // has very high likelihood basecalls at that point, we really only care
+    // about low qual calls <20 approx
+    //
+
+  }, {
+    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;
+      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) {
+        return +e;
+      }) : ml).map(function (e) {
+        return e / 255;
+      }) : (0, _util2.getTagAlt)(feature, 'MP', 'Mp').split('').map(function (s) {
+        return s.charCodeAt(0) - 33;
+      }).map(function (elt) {
+        return Math.min(1, elt / 50);
+      });
+      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);
+      var modifications = (0, _MismatchParser.getModificationPositions)(mm, seq, strand); // probIndex applies across multiple modifications e.g.
+
+      var probIndex = 0;
+
+      for (var i = 0; i < modifications.length; i++) {
+        var _modifications$i = modifications[i],
+            type = _modifications$i.type,
+            positions = _modifications$i.positions;
+        var col = modificationTagMap[type] || 'black';
+        var base = (0, _color["default"])(col);
+
+        var _iterator = _createForOfIteratorHelper((0, _MismatchParser.getNextRefPos)(cigarOps, positions)),
+            _step;
+
+        try {
+          for (_iterator.s(); !(_step = _iterator.n()).done;) {
+            var readPos = _step.value;
+
+            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
+
+
+              ctx.fillStyle = base.alpha(probabilities[probIndex] + 0.1).hsl().string();
+              ctx.fillRect(leftPx, topPx, rightPx - leftPx + 0.5, heightPx);
+            }
+
+            probIndex++;
+          }
+        } catch (err) {
+          _iterator.e(err);
+        } finally {
+          _iterator.f();
+        }
+      }
+    } // Color by methylation is slightly modified version of color by
+    // modifications that focuses on CpG sites, with non-methylated CpG colored
+    // blue
+
+  }, {
+    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;
+      var mm = (0, _util2.getTagAlt)(feature, 'MM', 'Mm') || '';
+
+      if (!regionSequence) {
+        throw new Error('region sequence required for methylation');
+      }
+
+      var cigar = feature.get('CIGAR');
+      var fstart = feature.get('start');
+      var fend = feature.get('end');
+      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 modifications = (0, _MismatchParser.getModificationPositions)(mm, seq, strand);
+
+      for (var i = 0; i < modifications.length; i++) {
+        var _modifications$i2 = modifications[i],
+            type = _modifications$i2.type,
+            positions = _modifications$i2.positions;
+
+        if (type === 'm' && positions) {
+          var _iterator2 = _createForOfIteratorHelper((0, _MismatchParser.getNextRefPos)(cigarOps, positions)),
+              _step2;
+
+          try {
+            for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+              var pos = _step2.value;
+              var epos = pos + fstart - rstart;
+
+              if (epos >= 0 && epos < methBins.length) {
+                methBins[epos] = 1;
+              }
+            }
+          } catch (err) {
+            _iterator2.e(err);
+          } finally {
+            _iterator2.f();
+          }
+        }
+      }
+
+      for (var j = fstart; j < fend; j++) {
+        var _i = j - rstart;
+
+        if (_i >= 0 && _i < methBins.length) {
+          var l1 = regionSequence[_i].toLowerCase();
+
+          var l2 = regionSequence[_i + 1].toLowerCase(); // if we are zoomed out, display just a block over the cpg
+
+
+          if (bpPerPx > 2) {
+            if (l1 === 'c' && l2 === 'g') {
+              var s = rstart + _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);
+            }
+          } // if we are zoomed in, color the c inside the cpg
+          else {
+            // color
+            if (l1 === 'c' && l2 === 'g') {
+              var _s = rstart + _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);
+
+              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);
+            }
+          }
+        }
+      }
+    }
+  }, {
+    key: "drawRect",
+    value: function drawRect(ctx, feat, props) {
+      var regions = props.regions,
+          bpPerPx = props.bpPerPx;
+      var heightPx = feat.heightPx,
+          topPx = feat.topPx,
+          feature = feat.feature;
+
+      var _regions = (0, _slicedToArray2["default"])(regions, 1),
+          region = _regions[0];
+
+      var _bpSpanPx15 = (0, _util.bpSpanPx)(feature.get('start'), feature.get('end'), region, bpPerPx),
+          _bpSpanPx16 = (0, _slicedToArray2["default"])(_bpSpanPx15, 2),
+          leftPx = _bpSpanPx16[0],
+          rightPx = _bpSpanPx16[1];
+
+      var flip = region.reversed ? -1 : 1;
+      var strand = feature.get('strand') * flip;
+
+      if (bpPerPx < 10) {
+        if (strand === -1) {
+          ctx.beginPath();
+          ctx.moveTo(leftPx - 5, topPx + heightPx / 2);
+          ctx.lineTo(leftPx, topPx + heightPx);
+          ctx.lineTo(rightPx, topPx + heightPx);
+          ctx.lineTo(rightPx, topPx);
+          ctx.lineTo(leftPx, topPx);
+          ctx.closePath();
+          ctx.fill();
+        } else {
+          ctx.beginPath();
+          ctx.moveTo(leftPx, topPx);
+          ctx.lineTo(leftPx, topPx + heightPx);
+          ctx.lineTo(rightPx, topPx + heightPx);
+          ctx.lineTo(rightPx + 5, topPx + heightPx / 2);
+          ctx.lineTo(rightPx, topPx);
+          ctx.closePath();
+          ctx.fill();
+        }
+      } else {
+        ctx.fillRect(leftPx, topPx, rightPx - leftPx, heightPx);
+      }
+    }
+  }, {
+    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;
+
+      var feature = feat.feature;
+      var region = regions[0]; // first pass for simple color changes that change the color of the
+      // alignment
+
+      switch (colorType) {
+        case 'insertSize':
+          ctx.fillStyle = this.colorByInsertSize(feature, config);
+          break;
+
+        case 'strand':
+          ctx.fillStyle = feature.get('strand') === -1 ? '#8F8FD8' : '#EC8B8B';
+          break;
+
+        case 'mappingQuality':
+          ctx.fillStyle = "hsl(".concat(feature.get('mq'), ",50%,50%)");
+          break;
+
+        case 'pairOrientation':
+          ctx.fillStyle = this.colorByOrientation(feature, config);
+          break;
+
+        case 'stranded':
+          ctx.fillStyle = alignmentColoring[this.colorByStranded(feature, config)];
+          break;
+
+        case 'xs':
+        case 'tag':
+          {
+            var tags = feature.get('tags');
+            var val = tags ? tags[tag] : feature.get(tag); // special for for XS/TS tag
+
+            if (tag === 'XS' || tag === 'TS') {
+              var map = {
+                '-': 'color_rev_strand',
+                '+': 'color_fwd_strand'
+              };
+              ctx.fillStyle = alignmentColoring[map[val] || 'color_nostrand'];
+            } // lower case 'ts' from minimap2 is flipped from xs
+
+
+            if (tag === 'ts') {
+              var _map = {
+                '-': feature.get('strand') === -1 ? 'color_fwd_strand' : 'color_rev_strand',
+                '+': feature.get('strand') === -1 ? 'color_rev_strand' : 'color_fwd_strand'
+              };
+              ctx.fillStyle = alignmentColoring[_map[val] || 'color_nostrand'];
+            } // tag is not one of the autofilled tags, has color-value pairs from
+            // fetchValues
+            else {
+              var foundValue = colorTagMap[val];
+              ctx.fillStyle = foundValue || alignmentColoring['color_nostrand'];
+            }
+
+            break;
+          }
+
+        case 'insertSizeAndPairOrientation':
+          break;
+
+        case 'modifications':
+        case 'methylation':
+          // this coloring is similar to igv.js, and is helpful to color negative
+          // strand reads differently because their c-g will be flipped (e.g. g-c
+          // read right to left)
+          if (feature.get('flags') & 16) {
+            ctx.fillStyle = '#c8dcc8';
+          } else {
+            ctx.fillStyle = '#c8c8c8';
+          }
+
+          break;
+
+        case 'normal':
+        default:
+          if (defaultColor) {
+            // avoid a readConfObject call here
+            ctx.fillStyle = '#c8c8c8';
+          } else {
+            ctx.fillStyle = (0, _configuration.readConfObject)(config, 'color', {
+              feature: feature
+            });
+          }
+
+          break;
+      }
+
+      this.drawRect(ctx, feat, props); // 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);
+          break;
+
+        case 'perBaseLettering':
+          this.colorByPerBaseLettering(ctx, feat, config, region, bpPerPx, {
+            colorForBase: colorForBase,
+            contrastForBase: contrastForBase,
+            charWidth: charWidth,
+            charHeight: charHeight
+          });
+          break;
+
+        case 'modifications':
+          this.colorByModifications(ctx, feat, config, region, bpPerPx, props);
+          break;
+
+        case 'methylation':
+          this.colorByMethylation(ctx, feat, config, region, bpPerPx, props);
+          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;
+      var heightPx = feat.heightPx,
+          topPx = feat.topPx,
+          feature = feat.feature;
+
+      var _regions2 = (0, _slicedToArray2["default"])(regions, 1),
+          region = _regions2[0];
+
+      var start = feature.get('start');
+      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
+      // 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
+
+      for (var i = 0; i < mismatches.length; i += 1) {
+        var mismatch = mismatches[i];
+        var mstart = start + mismatch.start;
+        var mlen = mismatch.length;
+        var mbase = mismatch.base;
+
+        var _bpSpanPx17 = (0, _util.bpSpanPx)(mstart, mstart + mlen, region, bpPerPx),
+            _bpSpanPx18 = (0, _slicedToArray2["default"])(_bpSpanPx17, 2),
+            leftPx = _bpSpanPx18[0],
+            rightPx = _bpSpanPx18[1];
+
+        var widthPx = Math.max(minSubfeatureWidth, Math.abs(leftPx - rightPx));
+
+        if (mismatch.type === 'mismatch' && drawSNPs) {
+          var baseColor = colorForBase[mismatch.base] || '#888';
+          ctx.fillStyle = getAlphaColor(baseColor, mismatch);
+          ctx.fillRect(leftPx, topPx, widthPx, heightPx);
+
+          if (widthPx >= charWidth && heightPx >= heightLim) {
+            // normal SNP coloring
+            var contrast = contrastForBase[mismatch.base] || 'black';
+            ctx.fillStyle = getAlphaColor(contrast, mismatch);
+            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);
+          var txt = "".concat(mismatch.length);
+          var rwidth = (0, _util.measureText)(txt, 10);
+
+          if (widthPx >= rwidth && heightPx >= heightLim) {
+            ctx.fillStyle = contrastForBase.deletion;
+            ctx.fillText(txt, (leftPx + rightPx) / 2 - rwidth / 2, topPx + heightPx);
+          }
+        } else if (mismatch.type === 'insertion' && drawIndels) {
+          ctx.fillStyle = 'purple';
+          var pos = leftPx + extraHorizontallyFlippedOffset;
+          var len = +mismatch.base || mismatch.length;
+          var insW = Math.max(minSubfeatureWidth, Math.min(1.2, 1 / bpPerPx));
+
+          if (len < 10) {
+            ctx.fillRect(pos, topPx, insW, heightPx);
+
+            if (1 / bpPerPx >= charWidth && heightPx >= heightLim) {
+              ctx.fillRect(pos - insW, topPx, insW * 3, 1);
+              ctx.fillRect(pos - insW, topPx + heightPx - 1, insW * 3, 1);
+              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);
+
+          if (1 / bpPerPx >= charWidth && heightPx >= heightLim) {
+            ctx.fillRect(_pos - w, topPx, w * 3, 1);
+            ctx.fillRect(_pos - w, topPx + heightPx - 1, w * 3, 1);
+            ctx.fillText("(".concat(mismatch.base, ")"), _pos + 3, topPx + heightPx);
+          }
+        } else if (mismatch.type === 'skip') {
+          // fix to avoid bad rendering note that this was also related to chrome
+          // bug https://bugs.chromium.org/p/chromium/issues/detail?id=1131528
+          // also affected firefox ref #1236 #2750
+          if (leftPx + widthPx > 0) {
+            // 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);
+          }
+        }
+      } // second pass, draw wide insertion markers on top
+
+
+      if (drawIndels) {
+        for (var _i2 = 0; _i2 < mismatches.length; _i2 += 1) {
+          var _mismatch = mismatches[_i2];
+
+          var _mstart = start + _mismatch.start;
+
+          var _mlen = _mismatch.length;
+
+          var _bpSpanPx19 = (0, _util.bpSpanPx)(_mstart, _mstart + _mlen, region, bpPerPx),
+              _bpSpanPx20 = (0, _slicedToArray2["default"])(_bpSpanPx19, 1),
+              _leftPx2 = _bpSpanPx20[0];
+
+          var _len2 = +_mismatch.base || _mismatch.length;
+
+          var _txt = "".concat(_len2);
+
+          if (_mismatch.type === 'insertion' && _len2 >= 10) {
+            if (bpPerPx > largeInsertionIndicatorScale) {
+              ctx.fillStyle = 'purple';
+              ctx.fillRect(_leftPx2 - 1, topPx, 2, heightPx);
+            } else if (heightPx > charHeight) {
+              var rect = ctx.measureText(_txt);
+              var padding = 5;
+              ctx.fillStyle = 'purple';
+              ctx.fillRect(_leftPx2 - rect.width / 2 - padding, topPx, rect.width + 2 * padding, heightPx);
+              ctx.fillStyle = 'white';
+              ctx.fillText(_txt, _leftPx2 - rect.width / 2, topPx + heightPx);
+            } else {
+              var _padding = 2;
+              ctx.fillStyle = 'purple';
+              ctx.fillRect(_leftPx2 - _padding, topPx, 2 * _padding, heightPx);
+            }
+          }
+        }
+      }
+    }
+  }, {
+    key: "drawSoftClipping",
+    value: function drawSoftClipping(ctx, feat, props, config, theme) {
+      var feature = feat.feature,
+          topPx = feat.topPx,
+          heightPx = feat.heightPx;
+      var regions = props.regions,
+          bpPerPx = props.bpPerPx;
+
+      var _regions3 = (0, _slicedToArray2["default"])(regions, 1),
+          region = _regions3[0];
+
+      var minFeatWidth = (0, _configuration.readConfObject)(config, 'minSubfeatureWidth');
+      var mismatches = feature.get('mismatches');
+      var seq = feature.get('seq');
+
+      var _this$getCharWidthHei = this.getCharWidthHeight(ctx),
+          charWidth = _this$getCharWidthHei.charWidth,
+          charHeight = _this$getCharWidthHei.charHeight;
+
+      var colorForBase = {
+        A: theme.palette.bases.A.main,
+        C: theme.palette.bases.C.main,
+        G: theme.palette.bases.G.main,
+        T: theme.palette.bases.T.main,
+        deletion: '#808080' // gray
+
+      }; // Display all bases softclipped off in lightened colors
+
+      if (seq) {
+        mismatches.filter(function (mismatch) {
+          return mismatch.type === 'softclip';
+        }).forEach(function (mismatch) {
+          var softClipLength = mismatch.cliplen || 0;
+          var s = feature.get('start');
+          var softClipStart = mismatch.start === 0 ? s - softClipLength : s + mismatch.start;
+
+          for (var k = 0; k < softClipLength; k += 1) {
+            var base = seq.charAt(k + mismatch.start); // If softclip length+start is longer than sequence, no need to
+            // continue showing base
+
+            if (!base) {
+              return;
+            }
+
+            var _bpSpanPx21 = (0, _util.bpSpanPx)(softClipStart + k, softClipStart + k + 1, region, bpPerPx),
+                _bpSpanPx22 = (0, _slicedToArray2["default"])(_bpSpanPx21, 2),
+                softClipLeftPx = _bpSpanPx22[0],
+                softClipRightPx = _bpSpanPx22[1];
+
+            var softClipWidthPx = Math.max(minFeatWidth, Math.abs(softClipLeftPx - softClipRightPx)); // Black accounts for IUPAC ambiguity code bases such as N that
+            // show in soft clipping
+
+            var baseColor = colorForBase[base] || '#000000';
+            ctx.fillStyle = baseColor;
+            ctx.fillRect(softClipLeftPx, topPx, softClipWidthPx, heightPx);
+
+            if (softClipWidthPx >= charWidth && heightPx >= charHeight - 5) {
+              ctx.fillStyle = theme.palette.getContrastText(baseColor);
+              ctx.fillText(base, softClipLeftPx + (softClipWidthPx - charWidth) / 2 + 1, topPx + heightPx);
+            }
+          }
+        });
+      }
+    }
+  }, {
+    key: "makeImageData",
+    value: function () {
+      var _makeImageData = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(ctx, layoutRecords, props) {
+        var _this2 = this;
+
+        var layout, config, showSoftClip, colorBy, configTheme, mismatchAlpha, minSubfeatureWidth, insertScale, defaultColor, theme, colorForBase, contrastForBase, _this$getCharWidthHei2, charWidth, charHeight;
+
+        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;
+                }
+
+                throw new Error("layout required");
+
+              case 10:
+                if (layout.addRect) {
+                  _context.next = 12;
+                  break;
+                }
+
+                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
+                  });
+
+                  if (showSoftClip) {
+                    _this2.drawSoftClipping(ctx, feat, props, config, theme);
+                  }
+                });
+
+              case 15:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee, this);
+      }));
+
+      function makeImageData(_x, _x2, _x3) {
+        return _makeImageData.apply(this, arguments);
+      }
+
+      return makeImageData;
+    }() // 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 layout = props.layout,
+          features = props.features,
+          sortedBy = props.sortedBy,
+          config = props.config,
+          bpPerPx = props.bpPerPx,
+          showSoftClip = props.showSoftClip,
+          regions = props.regions;
+
+      var _regions4 = (0, _slicedToArray2["default"])(regions, 1),
+          region = _regions4[0];
+
+      if (!layout) {
+        throw new Error("layout required");
+      }
+
+      if (!layout.addRect) {
+        throw new Error('invalid layout object');
+      }
+
+      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({
+          feature: feature,
+          layout: layout,
+          bpPerPx: bpPerPx,
+          region: region,
+          showSoftClip: showSoftClip,
+          heightPx: heightPx,
+          displayMode: displayMode
+        });
+      }, featureMap.size);
+      return layoutRecords;
+    }
+  }, {
+    key: "fetchSequence",
+    value: function () {
+      var _fetchSequence2 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2(renderProps) {
+        var sessionId, regions, adapterConfig, sequenceAdapter, _yield$getAdapter, dataAdapter, _regions5, region;
+
+        return _regenerator["default"].wrap(function _callee2$(_context2) {
+          while (1) {
+            switch (_context2.prev = _context2.next) {
+              case 0:
+                sessionId = renderProps.sessionId, regions = renderProps.regions, adapterConfig = renderProps.adapterConfig;
+                sequenceAdapter = adapterConfig.sequenceAdapter;
+
+                if (sequenceAdapter) {
+                  _context2.next = 4;
+                  break;
+                }
+
+                return _context2.abrupt("return", undefined);
+
+              case 4:
+                _context2.next = 6;
+                return (0, _dataAdapterCache.getAdapter)(this.pluginManager, sessionId, sequenceAdapter);
+
+              case 6:
+                _yield$getAdapter = _context2.sent;
+                dataAdapter = _yield$getAdapter.dataAdapter;
+                _regions5 = (0, _slicedToArray2["default"])(regions, 1), region = _regions5[0];
+                return _context2.abrupt("return", (0, _util2.fetchSequence)(region, dataAdapter));
+
+              case 10:
+              case "end":
+                return _context2.stop();
+            }
+          }
+        }, _callee2, this);
+      }));
+
+      function fetchSequence(_x4) {
+        return _fetchSequence2.apply(this, arguments);
+      }
+
+      return fetchSequence;
+    }()
+  }, {
+    key: "render",
+    value: function () {
+      var _render = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3(renderProps) {
+        var _renderProps$colorBy,
+            _this4 = this;
+
+        var features, layout, regions, bpPerPx, layoutRecords, _regions6, region, regionSequence, end, start, width, height, res, results;
+
+        return _regenerator["default"].wrap(function _callee3$(_context3) {
+          while (1) {
+            switch (_context3.prev = _context3.next) {
+              case 0:
+                _context3.next = 2;
+                return this.getFeatures(renderProps);
+
+              case 2:
+                features = _context3.sent;
+                layout = this.createLayoutInWorker(renderProps);
+                regions = renderProps.regions, bpPerPx = renderProps.bpPerPx;
+                layoutRecords = this.layoutFeats(_objectSpread(_objectSpread({}, renderProps), {}, {
+                  features: features,
+                  layout: layout
+                }));
+                _regions6 = (0, _slicedToArray2["default"])(regions, 1), region = _regions6[0]; // only need reference sequence if there are features and only for some
+                // cases
+
+                if (!(features.size && (0, _util2.shouldFetchReferenceSequence)((_renderProps$colorBy = renderProps.colorBy) === null || _renderProps$colorBy === void 0 ? void 0 : _renderProps$colorBy.type))) {
+                  _context3.next = 13;
+                  break;
+                }
+
+                _context3.next = 10;
+                return this.fetchSequence(renderProps);
+
+              case 10:
+                _context3.t0 = _context3.sent;
+                _context3.next = 14;
+                break;
+
+              case 13:
+                _context3.t0 = undefined;
+
+              case 14:
+                regionSequence = _context3.t0;
+                end = region.end, start = region.start;
+                width = (end - start) / bpPerPx;
+                height = Math.max(layout.getTotalHeight(), 1);
+                _context3.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
+                  }));
+                });
+
+              case 20:
+                res = _context3.sent;
+                _context3.next = 23;
+                return (0, _get2["default"])((0, _getPrototypeOf2["default"])(PileupRenderer.prototype), "render", this).call(this, _objectSpread(_objectSpread(_objectSpread({}, renderProps), res), {}, {
+                  features: features,
+                  layout: layout,
+                  height: height,
+                  width: width
+                }));
+
+              case 23:
+                results = _context3.sent;
+                return _context3.abrupt("return", _objectSpread(_objectSpread(_objectSpread({}, results), res), {}, {
+                  features: features,
+                  layout: layout,
+                  height: height,
+                  width: width,
+                  maxHeightReached: layout.maxHeightReached
+                }));
+
+              case 25:
+              case "end":
+                return _context3.stop();
+            }
+          }
+        }, _callee3, this);
+      }));
+
+      function render(_x5) {
+        return _render.apply(this, arguments);
+      }
+
+      return render;
+    }()
+  }, {
+    key: "createSession",
+    value: function createSession(args) {
+      return new _PileupLayoutSession.PileupLayoutSession(args);
+    }
+  }]);
+  return PileupRenderer;
+}(_BoxRendererType2["default"]);
+
+exports["default"] = PileupRenderer;