@jbrowse/plugin-alignments 1.7.9 → 2.0.0

package/dist/PileupRenderer/PileupRenderer.js

@@ -1,370 +1,363 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
 });
-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; } }
-
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __values = (this && this.__values) || function(o) {
+    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
+    if (m) return m.call(o);
+    if (o && typeof o.length === "number") return {
+        next: function () {
+            if (o && i >= o.length) o = void 0;
+            return { value: o && o[i++], done: !o };
+        }
+    };
+    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var BoxRendererType_1 = __importDefault(require("@jbrowse/core/pluggableElementTypes/renderers/BoxRendererType"));
+var ui_1 = require("@jbrowse/core/ui");
+var util_1 = require("@jbrowse/core/util");
+var offscreenCanvasUtils_1 = require("@jbrowse/core/util/offscreenCanvasUtils");
+var dataAdapterCache_1 = require("@jbrowse/core/data_adapters/dataAdapterCache");
+var configuration_1 = require("@jbrowse/core/configuration");
+// locals
+var MismatchParser_1 = require("../BamAdapter/MismatchParser");
+var sortUtil_1 = require("./sortUtil");
+var util_2 = require("../util");
+var PileupLayoutSession_1 = require("./PileupLayoutSession");
+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,
-    C: theme.palette.bases.C.main,
-    G: theme.palette.bases.G.main,
-    T: theme.palette.bases.T.main,
-    deletion: '#808080' // gray
-
-  };
+    // @ts-ignore
+    var bases = theme.palette.bases;
+    return {
+        A: bases.A.main,
+        C: bases.C.main,
+        G: bases.G.main,
+        T: 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)];
-  }));
+    return Object.fromEntries(Object.entries(getColorBaseMap(theme)).map(function (_a) {
+        var _b = __read(_a, 2), key = _b[0], value = _b[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'
+    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 shouldDrawSNPs(type) {
-  return !['methylation', 'modifications'].includes(type || '');
+function shouldDrawSNPsMuted(type) {
+    return ['methylation', 'modifications'].includes(type || '');
 }
-
 function shouldDrawIndels(type) {
-  return true;
+    return true;
 }
-
-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];
+var PileupRenderer = /** @class */ (function (_super) {
+    __extends(PileupRenderer, _super);
+    function PileupRenderer() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.supportsSVG = true;
+        return _this;
     }
-
-    _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
+    // get width and height of chars the height is an approximation: width
     // letter M is approximately the height
-    function getCharWidthHeight(ctx) {
-      var charWidth = (0, _util.measureText)('A');
-      var charHeight = (0, _util.measureText)('M');
-      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;
+    PileupRenderer.prototype.getCharWidthHeight = function (ctx) {
+        var charWidth = (0, util_1.measureText)('A');
+        var charHeight = (0, util_1.measureText)('M') - 2;
+        return { charWidth: charWidth, charHeight: charHeight };
+    };
+    PileupRenderer.prototype.layoutFeature = function (_a) {
+        var feature = _a.feature, layout = _a.layout, bpPerPx = _a.bpPerPx, region = _a.region, showSoftClip = _a.showSoftClip, heightPx = _a.heightPx, displayMode = _a.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 _b = mismatches[i], type = _b.type, start = _b.start, _c = _b.cliplen, cliplen = _c === void 0 ? 0 : _c;
+                    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, feature);
-
-      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
+        var _d = __read((0, util_1.bpSpanPx)(feature.get('start') - expansionBefore, feature.get('end') + expansionAfter, region, bpPerPx), 2), leftPx = _d[0], rightPx = _d[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, feature);
+        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';
+    PileupRenderer.prototype.getExpandedRegion = function (region, renderArgs) {
+        var config = renderArgs.config, showSoftClip = renderArgs.showSoftClip;
+        var maxClippingSize = (0, configuration_1.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 __assign(__assign({}, region), { start: Math.floor(Math.max(start - bpExpansion, 0)), end: Math.ceil(end + bpExpansion) });
+    };
+    PileupRenderer.prototype.colorByOrientation = function (feature, config) {
+        return alignmentColoring[this.getOrientation(feature, config) || 'color_nostrand'];
+    };
+    PileupRenderer.prototype.getOrientation = function (feature, config) {
+        var orientationType = (0, configuration_1.readConfObject)(config, 'orientationType');
+        var type = util_2.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];
+    };
+    PileupRenderer.prototype.colorByInsertSize = function (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%)");
+    };
+    PileupRenderer.prototype.colorByStranded = function (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';
         }
-
-        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);
+        return strand === 1 ? 'color_fwd_strand' : 'color_rev_strand';
+    };
+    PileupRenderer.prototype.colorByPerBaseLettering = function (_a) {
+        var ctx = _a.ctx, feat = _a.feat, region = _a.region, bpPerPx = _a.bpPerPx, colorForBase = _a.colorForBase, contrastForBase = _a.contrastForBase, charWidth = _a.charWidth, charHeight = _a.charHeight, canvasWidth = _a.canvasWidth;
+        var heightLim = charHeight - 2;
+        var feature = feat.feature, topPx = feat.topPx, heightPx = feat.heightPx;
+        var seq = feature.get('seq');
+        var cigarOps = (0, MismatchParser_1.parseCigar)(feature.get('CIGAR'));
+        var w = 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];
+                    var r = start + roffset + m;
+                    var _b = __read((0, util_1.bpSpanPx)(r, r + 1, region, bpPerPx), 1), leftPx = _b[0];
+                    fillRect(ctx, leftPx, topPx, w + 0.5, heightPx, canvasWidth, colorForBase[letter]);
+                    if (w >= charWidth && heightPx >= heightLim) {
+                        // normal SNP coloring
+                        ctx.fillStyle = contrastForBase[letter];
+                        ctx.fillText(letter, leftPx + (w - charWidth) / 2 + 1, topPx + heightPx);
+                    }
+                }
+                soffset += len;
+                roffset += len;
             }
-          }
-
-          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;
+    };
+    PileupRenderer.prototype.colorByPerBaseQuality = function (_a) {
+        var ctx = _a.ctx, feat = _a.feat, region = _a.region, bpPerPx = _a.bpPerPx, canvasWidth = _a.canvasWidth;
+        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_1.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];
+                    var _b = __read((0, util_1.bpSpanPx)(start + roffset + m, start + roffset + m + 1, region, bpPerPx), 1), leftPx = _b[0];
+                    fillRect(ctx, leftPx, topPx, width + 0.5, heightPx, canvasWidth, "hsl(".concat(score === 255 ? 150 : score * 1.5, ",55%,50%)"));
+                }
+                soffset += len;
+                roffset += len;
+            }
         }
-      }
-    } // ML stores probabilities as array of numerics and MP is scaled phred scores
+    };
+    // 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
@@ -373,811 +366,626 @@ var PileupRenderer = /*#__PURE__*/function (_BoxRendererType) {
     // 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 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;
-            var r = start + readPos;
-
-            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
-
-
-            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);
-            probIndex++;
-          }
-        } catch (err) {
-          _iterator.e(err);
-        } finally {
-          _iterator.f();
+    PileupRenderer.prototype.colorByModifications = function (_a) {
+        var e_1, _b;
+        var ctx = _a.ctx, feat = _a.feat, region = _a.region, bpPerPx = _a.bpPerPx, renderArgs = _a.renderArgs, canvasWidth = _a.canvasWidth;
+        var feature = feat.feature, topPx = feat.topPx, heightPx = feat.heightPx;
+        var Color = renderArgs.Color, _c = renderArgs.modificationTagMap, modificationTagMap = _c === void 0 ? {} : _c;
+        var mm = (0, util_2.getTagAlt)(feature, 'MM', 'Mm') || '';
+        var ml = (0, util_2.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, util_2.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 seq = feature.get('seq');
+        var strand = feature.get('strand');
+        var cigarOps = (0, MismatchParser_1.parseCigar)(cigar);
+        var modifications = (0, MismatchParser_1.getModificationPositions)(mm, seq, strand);
+        // probIndex applies across multiple modifications e.g.
+        var probIndex = 0;
+        for (var i = 0; i < modifications.length; i++) {
+            var _d = modifications[i], type = _d.type, positions = _d.positions;
+            var col = modificationTagMap[type] || 'black';
+            // @ts-ignore
+            var base = Color(col);
+            try {
+                for (var _e = (e_1 = void 0, __values((0, MismatchParser_1.getNextRefPos)(cigarOps, positions))), _f = _e.next(); !_f.done; _f = _e.next()) {
+                    var readPos = _f.value;
+                    var r = start + readPos;
+                    var _g = __read((0, util_1.bpSpanPx)(r, r + 1, region, bpPerPx), 2), leftPx = _g[0], rightPx = _g[1];
+                    // give it a little boost of 0.1 to not make them fully
+                    // invisible to avoid confusion
+                    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 (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (_f && !_f.done && (_b = _e.return)) _b.call(_e);
+                }
+                finally { if (e_1) throw e_1.error; }
+            }
         }
-      }
-    } // Color by methylation is slightly modified version of color by
+    };
+    // 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 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++) {
-        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 - region.start;
-
-              if (epos >= 0 && epos < methBins.length) {
-                methBins[epos] = 1;
-              }
-            }
-          } catch (err) {
-            _iterator2.e(err);
-          } finally {
-            _iterator2.f();
-          }
+    PileupRenderer.prototype.colorByMethylation = function (_a) {
+        var e_2, _b;
+        var ctx = _a.ctx, feat = _a.feat, region = _a.region, bpPerPx = _a.bpPerPx, renderArgs = _a.renderArgs, canvasWidth = _a.canvasWidth;
+        var regionSequence = renderArgs.regionSequence;
+        var feature = feat.feature, topPx = feat.topPx, heightPx = feat.heightPx;
+        var mm = (0, util_2.getTagAlt)(feature, 'MM', 'Mm') || '';
+        if (!regionSequence) {
+            throw new Error('region sequence required for methylation');
         }
-      }
-
-      for (var j = fstart; j < fend; j++) {
-        var _i = j - region.start;
-
-        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 = 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];
-
-              ctx.fillStyle = methBins[_i] || methBins[_i + 1] ? 'red' : '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 = 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];
-
-              ctx.fillStyle = methBins[_i] ? 'red' : '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];
-
-              ctx.fillStyle = methBins[_i + 1] ? 'red' : 'blue';
-              ctx.fillRect(leftPx2, topPx, rightPx2 - leftPx2 + 0.5, heightPx);
+        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_1.parseCigar)(cigar);
+        var methBins = new Array(region.end - region.start).fill(0);
+        var modifications = (0, MismatchParser_1.getModificationPositions)(mm, seq, strand);
+        for (var i = 0; i < modifications.length; i++) {
+            var _c = modifications[i], type = _c.type, positions = _c.positions;
+            if (type === 'm' && positions) {
+                try {
+                    for (var _d = (e_2 = void 0, __values((0, MismatchParser_1.getNextRefPos)(cigarOps, positions))), _e = _d.next(); !_e.done; _e = _d.next()) {
+                        var pos = _e.value;
+                        var epos = pos + fstart - region.start;
+                        if (epos >= 0 && epos < methBins.length) {
+                            methBins[epos] = 1;
+                        }
+                    }
+                }
+                catch (e_2_1) { e_2 = { error: e_2_1 }; }
+                finally {
+                    try {
+                        if (_e && !_e.done && (_b = _d.return)) _b.call(_d);
+                    }
+                    finally { if (e_2) throw e_2.error; }
+                }
             }
-          }
         }
-      }
-    }
-  }, {
-    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();
+        for (var j = fstart; j < fend; j++) {
+            var i = j - region.start;
+            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 = region.start + i;
+                        var _f = __read((0, util_1.bpSpanPx)(s, s + 2, region, bpPerPx), 2), leftPx = _f[0], rightPx = _f[1];
+                        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 = region.start + i;
+                        var _g = __read((0, util_1.bpSpanPx)(s, s + 1, region, bpPerPx), 2), leftPx = _g[0], rightPx = _g[1];
+                        fillRect(ctx, leftPx, topPx, rightPx - leftPx + 0.5, heightPx, canvasWidth, methBins[i] ? 'red' : 'blue');
+                        var _h = __read((0, util_1.bpSpanPx)(s + 1, s + 2, region, bpPerPx), 2), leftPx2 = _h[0], rightPx2 = _h[1];
+                        fillRect(ctx, leftPx2, topPx, rightPx2 - leftPx2 + 0.5, heightPx, canvasWidth, methBins[i + 1] ? 'red' : 'blue');
+                    }
+                }
+            }
         }
-      } 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'];
+    };
+    PileupRenderer.prototype.drawRect = function (ctx, feat, props) {
+        var regions = props.regions, bpPerPx = props.bpPerPx;
+        var heightPx = feat.heightPx, topPx = feat.topPx, feature = feat.feature;
+        var _a = __read(regions, 1), region = _a[0];
+        var _b = __read((0, util_1.bpSpanPx)(feature.get('start'), feature.get('end'), region, bpPerPx), 2), leftPx = _b[0], rightPx = _b[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();
             }
-
-            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; // 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 = !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);
-
-          if (widthPx >= charWidth && heightPx >= heightLim) {
-            // normal SNP coloring
-            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);
-          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 / 2, 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 {
+                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 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 _rwidth = (0, _util.measureText)(_txt);
-
-              var padding = 5;
-              ctx.fillStyle = 'purple';
-              ctx.fillRect(_leftPx2 - _rwidth / 2 - padding, topPx, _rwidth + 2 * padding, heightPx);
-              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);
+        else {
+            ctx.fillRect(leftPx, topPx, rightPx - leftPx, heightPx);
+        }
+    };
+    PileupRenderer.prototype.drawAlignmentRect = function (_a) {
+        var ctx = _a.ctx, feat = _a.feat, renderArgs = _a.renderArgs, colorForBase = _a.colorForBase, contrastForBase = _a.contrastForBase, charWidth = _a.charWidth, charHeight = _a.charHeight, defaultColor = _a.defaultColor, canvasWidth = _a.canvasWidth;
+        var config = renderArgs.config, bpPerPx = renderArgs.bpPerPx, regions = renderArgs.regions, colorBy = renderArgs.colorBy, _b = renderArgs.colorTagMap, colorTagMap = _b === void 0 ? {} : _b;
+        var _c = colorBy || {}, _d = _c.tag, tag = _d === void 0 ? '' : _d, _e = _c.type, colorType = _e === void 0 ? '' : _e;
+        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_1.readConfObject)(config, 'color', { feature: feature });
+                }
+                break;
         }
-      }
-    }
-  }, {
-    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;
+        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: ctx,
+                    feat: feat,
+                    region: region,
+                    bpPerPx: bpPerPx,
+                    canvasWidth: canvasWidth,
+                });
+                break;
+            case 'perBaseLettering':
+                this.colorByPerBaseLettering({
+                    ctx: ctx,
+                    feat: feat,
+                    region: region,
+                    bpPerPx: bpPerPx,
+                    colorForBase: colorForBase,
+                    contrastForBase: contrastForBase,
+                    charWidth: charWidth,
+                    charHeight: charHeight,
+                    canvasWidth: canvasWidth,
+                });
+                break;
+            case 'modifications':
+                this.colorByModifications({
+                    ctx: ctx,
+                    feat: feat,
+                    region: region,
+                    bpPerPx: bpPerPx,
+                    renderArgs: renderArgs,
+                    canvasWidth: canvasWidth,
+                });
+                break;
+            case 'methylation':
+                this.colorByMethylation({
+                    ctx: ctx,
+                    feat: feat,
+                    region: region,
+                    bpPerPx: bpPerPx,
+                    renderArgs: renderArgs,
+                    canvasWidth: canvasWidth,
+                });
+                break;
+        }
+    };
+    PileupRenderer.prototype.drawMismatches = function (_a) {
+        var ctx = _a.ctx, feat = _a.feat, renderArgs = _a.renderArgs, minSubfeatureWidth = _a.minSubfeatureWidth, largeInsertionIndicatorScale = _a.largeInsertionIndicatorScale, mismatchAlpha = _a.mismatchAlpha, charWidth = _a.charWidth, charHeight = _a.charHeight, colorForBase = _a.colorForBase, contrastForBase = _a.contrastForBase, canvasWidth = _a.canvasWidth, drawSNPsMuted = _a.drawSNPsMuted, _b = _a.drawIndels, drawIndels = _b === void 0 ? true : _b;
+        var Color = renderArgs.Color, bpPerPx = renderArgs.bpPerPx, regions = renderArgs.regions;
+        var heightPx = feat.heightPx, topPx = feat.topPx, feature = feat.feature;
+        var _c = __read(regions, 1), region = _c[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;
+        // 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 _d = __read((0, util_1.bpSpanPx)(mstart, mstart + mlen, region, bpPerPx), 2), leftPx = _d[0], rightPx = _d[1];
+            var widthPx = Math.max(minSubfeatureWidth, Math.abs(leftPx - rightPx));
+            if (mismatch.type === 'mismatch') {
+                if (!drawSNPsMuted) {
+                    var baseColor = colorForBase[mismatch.base] || '#888';
+                    fillRect(ctx, leftPx, topPx, widthPx, heightPx, canvasWidth, !mismatchAlpha
+                        ? baseColor
+                        : mismatch.qual !== undefined
+                            ? // @ts-ignore
+                                Color(baseColor)
+                                    .alpha(Math.min(1, mismatch.qual / 50))
+                                    .hsl()
+                                    .string()
+                            : baseColor);
+                }
+                if (widthPx >= charWidth && heightPx >= heightLim) {
+                    // normal SNP coloring
+                    var contrastColor = drawSNPsMuted
+                        ? 'black'
+                        : contrastForBase[mismatch.base] || 'black';
+                    ctx.fillStyle = !mismatchAlpha
+                        ? contrastColor
+                        : mismatch.qual !== undefined
+                            ? // @ts-ignore
+                                Color(contrastColor)
+                                    .alpha(Math.min(1, mismatch.qual / 50))
+                                    .hsl()
+                                    .string()
+                            : contrastColor;
+                    ctx.fillText(mbase, leftPx + (widthPx - charWidth) / 2 + 1, topPx + heightPx);
+                }
             }
-
-            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);
+            else if (mismatch.type === 'deletion' && drawIndels) {
+                fillRect(ctx, leftPx, topPx, widthPx, heightPx, canvasWidth, colorForBase.deletion);
+                var txt = "".concat(mismatch.length);
+                var rwidth = (0, util_1.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 / 2, Math.min(1.2, 1 / bpPerPx));
+                if (len < 10) {
+                    fillRect(ctx, pos, topPx, insW, heightPx, canvasWidth, 'purple');
+                    if (1 / bpPerPx >= charWidth && heightPx >= heightLim) {
+                        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') {
+                var pos = leftPx + extraHorizontallyFlippedOffset;
+                fillRect(ctx, pos, topPx, w, heightPx, canvasWidth, mismatch.type === 'hardclip' ? 'red' : 'blue');
+                if (1 / bpPerPx >= charWidth && heightPx >= heightLim) {
+                    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') {
+                // 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);
+                    fillRect(ctx, Math.max(0, leftPx), topPx + heightPx / 2 - 1, adjustPx + (leftPx < 0 ? leftPx : 0), 2, canvasWidth, '#333');
+                }
             }
-          }
-        });
-      }
-    }
-  }, {
-    key: "makeImageData",
-    value: function makeImageData(ctx, layoutRecords, props) {
-      var layout = props.layout,
-          config = props.config,
-          showSoftClip = props.showSoftClip,
-          colorBy = props.colorBy,
-          configTheme = props.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");
-      }
-
-      if (!layout.addRect) {
-        throw new Error('invalid layout object');
-      }
-
-      ctx.font = 'bold 10px Courier New,monospace';
-
-      var _this$getCharWidthHei2 = this.getCharWidthHeight(ctx),
-          charWidth = _this$getCharWidthHei2.charWidth,
-          charHeight = _this$getCharWidthHei2.charHeight;
-
-      var drawSNPs = shouldDrawSNPs(colorBy === null || colorBy === void 0 ? void 0 : colorBy.type);
-      var drawIndels = shouldDrawIndels(colorBy === null || colorBy === void 0 ? void 0 : colorBy.type);
-
-      for (var i = 0; i < layoutRecords.length; i++) {
-        var feat = layoutRecords[i];
-
-        if (feat === null) {
-          continue;
-        }
-
-        this.drawAlignmentRect(ctx, feat, _objectSpread(_objectSpread({}, props), {}, {
-          defaultColor: defaultColor,
-          colorForBase: colorForBase,
-          contrastForBase: contrastForBase,
-          charWidth: charWidth,
-          charHeight: charHeight
-        }));
-        this.drawMismatches(ctx, feat, props, {
-          mismatchAlpha: mismatchAlpha,
-          drawSNPs: drawSNPs,
-          drawIndels: drawIndels,
-          largeInsertionIndicatorScale: largeInsertionIndicatorScale,
-          minSubfeatureWidth: minSubfeatureWidth,
-          charWidth: charWidth,
-          charHeight: charHeight,
-          colorForBase: colorForBase,
-          contrastForBase: contrastForBase
-        });
-      }
-
-      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);
         }
-      }
-    } // 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 _this2 = 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');
-      return (0, _util.iterMap)(featureMap.values(), function (feature) {
-        return _this2.layoutFeature({
-          feature: feature,
-          layout: layout,
-          bpPerPx: bpPerPx,
-          region: region,
-          showSoftClip: showSoftClip,
-          heightPx: heightPx,
-          displayMode: displayMode
-        });
-      }, featureMap.size);
-    }
-  }, {
-    key: "fetchSequence",
-    value: function () {
-      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 _callee$(_context) {
-          while (1) {
-            switch (_context.prev = _context.next) {
-              case 0:
-                sessionId = renderProps.sessionId, regions = renderProps.regions, adapterConfig = renderProps.adapterConfig;
-                sequenceAdapter = adapterConfig.sequenceAdapter;
-
-                if (sequenceAdapter) {
-                  _context.next = 4;
-                  break;
+        // second pass, draw wide insertion markers on top
+        if (drawIndels) {
+            for (var i = 0; i < mismatches.length; i += 1) {
+                var mismatch = mismatches[i];
+                var mstart = start + mismatch.start;
+                var mlen = mismatch.length;
+                var _e = __read((0, util_1.bpSpanPx)(mstart, mstart + mlen, region, bpPerPx), 1), leftPx = _e[0];
+                var len = +mismatch.base || mismatch.length;
+                var txt = "".concat(len);
+                if (mismatch.type === 'insertion' && len >= 10) {
+                    if (bpPerPx > largeInsertionIndicatorScale) {
+                        fillRect(ctx, leftPx - 1, topPx, 2, heightPx, canvasWidth, 'purple');
+                    }
+                    else if (heightPx > charHeight) {
+                        var rwidth = (0, util_1.measureText)(txt);
+                        var padding = 5;
+                        fillRect(ctx, leftPx - rwidth / 2 - padding, topPx, rwidth + 2 * padding, heightPx, canvasWidth, 'purple');
+                        ctx.fillStyle = 'white';
+                        ctx.fillText(txt, leftPx - rwidth / 2, topPx + heightPx);
+                    }
+                    else {
+                        var padding = 2;
+                        fillRect(ctx, leftPx - padding, topPx, 2 * padding, heightPx, canvasWidth, 'purple');
+                    }
                 }
-
-                return _context.abrupt("return", undefined);
-
-              case 4:
-                _context.next = 6;
-                return (0, _dataAdapterCache.getAdapter)(this.pluginManager, sessionId, sequenceAdapter);
-
-              case 6:
-                _yield$getAdapter = _context.sent;
-                dataAdapter = _yield$getAdapter.dataAdapter;
-                _regions5 = (0, _slicedToArray2.default)(regions, 1), region = _regions5[0];
-                return _context.abrupt("return", (0, _util2.fetchSequence)(region, dataAdapter));
-
-              case 10:
-              case "end":
-                return _context.stop();
             }
-          }
-        }, _callee, this);
-      }));
-
-      function fetchSequence(_x) {
-        return _fetchSequence2.apply(this, arguments);
-      }
-
-      return fetchSequence;
-    }()
-  }, {
-    key: "render",
-    value: function () {
-      var _render = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(renderProps) {
-        var _renderProps$colorBy,
-            _this3 = this;
-
-        var features, layout, regions, bpPerPx, layoutRecords, _regions6, region, regionSequence, end, start, width, height, res, results;
-
-        return _regenerator.default.wrap(function _callee2$(_context2) {
-          while (1) {
-            switch (_context2.prev = _context2.next) {
-              case 0:
-                _context2.next = 2;
-                return this.getFeatures(renderProps);
-
-              case 2:
-                features = _context2.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))) {
-                  _context2.next = 13;
-                  break;
+        }
+    };
+    PileupRenderer.prototype.drawSoftClipping = function (_a) {
+        var ctx = _a.ctx, feat = _a.feat, renderArgs = _a.renderArgs, config = _a.config, theme = _a.theme, canvasWidth = _a.canvasWidth;
+        var feature = feat.feature, topPx = feat.topPx, heightPx = feat.heightPx;
+        var regions = renderArgs.regions, bpPerPx = renderArgs.bpPerPx;
+        var _b = __read(regions, 1), region = _b[0];
+        var minFeatWidth = (0, configuration_1.readConfObject)(config, 'minSubfeatureWidth');
+        var mismatches = feature.get('mismatches');
+        var seq = feature.get('seq');
+        var _c = this.getCharWidthHeight(ctx), charWidth = _c.charWidth, charHeight = _c.charHeight;
+        // @ts-ignore
+        var bases = theme.palette.bases;
+        var colorForBase = {
+            A: bases.A.main,
+            C: bases.C.main,
+            G: bases.G.main,
+            T: 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 _a = __read((0, util_1.bpSpanPx)(softClipStart + k, softClipStart + k + 1, region, bpPerPx), 2), softClipLeftPx = _a[0], softClipRightPx = _a[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;
+                    fillRect(ctx, softClipLeftPx, topPx, softClipWidthPx, heightPx, canvasWidth);
+                    if (softClipWidthPx >= charWidth && heightPx >= charHeight - 5) {
+                        ctx.fillStyle = theme.palette.getContrastText(baseColor);
+                        ctx.fillText(base, softClipLeftPx + (softClipWidthPx - charWidth) / 2 + 1, topPx + heightPx);
+                    }
                 }
-
-                _context2.next = 10;
-                return this.fetchSequence(renderProps);
-
-              case 10:
-                _context2.t0 = _context2.sent;
-                _context2.next = 14;
-                break;
-
-              case 13:
-                _context2.t0 = undefined;
-
-              case 14:
-                regionSequence = _context2.t0;
-                end = region.end, start = region.start;
-                width = (end - start) / bpPerPx;
-                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
-                  }));
+            });
+        }
+    };
+    PileupRenderer.prototype.makeImageData = function (_a) {
+        var ctx = _a.ctx, layoutRecords = _a.layoutRecords, canvasWidth = _a.canvasWidth, renderArgs = _a.renderArgs;
+        var layout = renderArgs.layout, config = renderArgs.config, showSoftClip = renderArgs.showSoftClip, colorBy = renderArgs.colorBy, configTheme = renderArgs.theme;
+        var mismatchAlpha = (0, configuration_1.readConfObject)(config, 'mismatchAlpha');
+        var minSubfeatureWidth = (0, configuration_1.readConfObject)(config, 'minSubfeatureWidth');
+        var largeInsertionIndicatorScale = (0, configuration_1.readConfObject)(config, 'largeInsertionIndicatorScale');
+        var defaultColor = (0, configuration_1.readConfObject)(config, 'color') === '#f0f';
+        var theme = (0, ui_1.createJBrowseTheme)(configTheme);
+        var colorForBase = getColorBaseMap(theme);
+        var contrastForBase = getContrastBaseMap(theme);
+        if (!layout) {
+            throw new Error("layout required");
+        }
+        if (!layout.addRect) {
+            throw new Error('invalid layout object');
+        }
+        ctx.font = 'bold 10px Courier New,monospace';
+        var _b = this.getCharWidthHeight(ctx), charWidth = _b.charWidth, charHeight = _b.charHeight;
+        var drawSNPsMuted = shouldDrawSNPsMuted(colorBy === null || colorBy === void 0 ? void 0 : colorBy.type);
+        var drawIndels = shouldDrawIndels(colorBy === null || colorBy === void 0 ? void 0 : colorBy.type);
+        for (var i = 0; i < layoutRecords.length; i++) {
+            var feat = layoutRecords[i];
+            if (feat === null) {
+                continue;
+            }
+            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,
+                drawSNPsMuted: drawSNPsMuted,
+                drawIndels: drawIndels,
+                largeInsertionIndicatorScale: largeInsertionIndicatorScale,
+                minSubfeatureWidth: minSubfeatureWidth,
+                charWidth: charWidth,
+                charHeight: charHeight,
+                colorForBase: colorForBase,
+                contrastForBase: contrastForBase,
+                canvasWidth: canvasWidth,
+            });
+            if (showSoftClip) {
+                this.drawSoftClipping({
+                    ctx: ctx,
+                    feat: feat,
+                    renderArgs: renderArgs,
+                    config: config,
+                    theme: theme,
+                    canvasWidth: canvasWidth,
                 });
-
-              case 20:
-                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,
-                  height: height,
-                  width: width
-                }));
-
-              case 23:
-                results = _context2.sent;
-                return _context2.abrupt("return", _objectSpread(_objectSpread(_objectSpread({}, results), res), {}, {
-                  features: new Map(),
-                  layout: layout,
-                  height: height,
-                  width: width,
-                  maxHeightReached: layout.maxHeightReached
-                }));
-
-              case 25:
-              case "end":
-                return _context2.stop();
             }
-          }
-        }, _callee2, this);
-      }));
-
-      function render(_x2) {
-        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;
+        }
+    };
+    // 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
+    PileupRenderer.prototype.layoutFeats = function (props) {
+        var _this = this;
+        var layout = props.layout, features = props.features, sortedBy = props.sortedBy, config = props.config, bpPerPx = props.bpPerPx, showSoftClip = props.showSoftClip, regions = props.regions;
+        var _a = __read(regions, 1), region = _a[0];
+        if (!layout) {
+            throw new Error("layout required");
+        }
+        if (!layout.addRect) {
+            throw new Error('invalid layout object');
+        }
+        var featureMap = (sortedBy === null || sortedBy === void 0 ? void 0 : sortedBy.type) && region.start === sortedBy.pos
+            ? (0, sortUtil_1.sortFeature)(features, sortedBy)
+            : features;
+        var heightPx = (0, configuration_1.readConfObject)(config, 'height');
+        var displayMode = (0, configuration_1.readConfObject)(config, 'displayMode');
+        return (0, util_1.iterMap)(featureMap.values(), function (feature) {
+            return _this.layoutFeature({
+                feature: feature,
+                layout: layout,
+                bpPerPx: bpPerPx,
+                region: region,
+                showSoftClip: showSoftClip,
+                heightPx: heightPx,
+                displayMode: displayMode,
+            });
+        }, featureMap.size);
+    };
+    PileupRenderer.prototype.fetchSequence = function (renderProps) {
+        return __awaiter(this, void 0, void 0, function () {
+            var sessionId, regions, adapterConfig, sequenceAdapter, dataAdapter, _a, region;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        sessionId = renderProps.sessionId, regions = renderProps.regions, adapterConfig = renderProps.adapterConfig;
+                        sequenceAdapter = adapterConfig.sequenceAdapter;
+                        if (!sequenceAdapter) {
+                            return [2 /*return*/, undefined];
+                        }
+                        return [4 /*yield*/, (0, dataAdapterCache_1.getAdapter)(this.pluginManager, sessionId, sequenceAdapter)];
+                    case 1:
+                        dataAdapter = (_b.sent()).dataAdapter;
+                        _a = __read(regions, 1), region = _a[0];
+                        return [2 /*return*/, (0, util_2.fetchSequence)(region, dataAdapter)];
+                }
+            });
+        });
+    };
+    PileupRenderer.prototype.render = function (renderProps) {
+        var _a;
+        return __awaiter(this, void 0, void 0, function () {
+            var features, layout, regions, bpPerPx, layoutRecords, _b, region, regionSequence, _c, end, start, width, height, Color, res, results;
+            var _this = this;
+            return __generator(this, function (_d) {
+                switch (_d.label) {
+                    case 0: return [4 /*yield*/, this.getFeatures(renderProps)];
+                    case 1:
+                        features = _d.sent();
+                        layout = this.createLayoutInWorker(renderProps);
+                        regions = renderProps.regions, bpPerPx = renderProps.bpPerPx;
+                        layoutRecords = this.layoutFeats(__assign(__assign({}, renderProps), { features: features, layout: layout }));
+                        _b = __read(regions, 1), region = _b[0];
+                        if (!(features.size && (0, util_2.shouldFetchReferenceSequence)((_a = renderProps.colorBy) === null || _a === void 0 ? void 0 : _a.type))) return [3 /*break*/, 3];
+                        return [4 /*yield*/, this.fetchSequence(renderProps)];
+                    case 2:
+                        _c = _d.sent();
+                        return [3 /*break*/, 4];
+                    case 3:
+                        _c = undefined;
+                        _d.label = 4;
+                    case 4:
+                        regionSequence = _c;
+                        end = region.end, start = region.start;
+                        width = (end - start) / bpPerPx;
+                        height = Math.max(layout.getTotalHeight(), 1);
+                        return [4 /*yield*/, Promise.resolve().then(function () { return __importStar(require('color')); }).then(function (f) { return f.default; })];
+                    case 5:
+                        Color = _d.sent();
+                        return [4 /*yield*/, (0, offscreenCanvasUtils_1.renderToAbstractCanvas)(width, height, renderProps, function (ctx) {
+                                return _this.makeImageData({
+                                    ctx: ctx,
+                                    layoutRecords: layoutRecords,
+                                    canvasWidth: width,
+                                    renderArgs: __assign(__assign({}, renderProps), { layout: layout, features: features, regionSequence: regionSequence, Color: Color }),
+                                });
+                            })];
+                    case 6:
+                        res = _d.sent();
+                        return [4 /*yield*/, _super.prototype.render.call(this, __assign(__assign(__assign({}, renderProps), res), { features: features, layout: layout, height: height, width: width }))];
+                    case 7:
+                        results = _d.sent();
+                        return [2 /*return*/, __assign(__assign(__assign({}, results), res), { features: new Map(), layout: layout, height: height, width: width, maxHeightReached: layout.maxHeightReached })];
+                }
+            });
+        });
+    };
+    PileupRenderer.prototype.createSession = function (args) {
+        return new PileupLayoutSession_1.PileupLayoutSession(args);
+    };
+    return PileupRenderer;
+}(BoxRendererType_1.default));
+exports.default = PileupRenderer;
+//# sourceMappingURL=PileupRenderer.js.map