@jbrowse/plugin-alignments 2.1.0 → 2.1.2

package/dist/PileupRenderer/PileupRenderer.js

@@ -1,30 +1,4 @@
 "use strict";
-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);
@@ -48,84 +22,21 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __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");
+const BoxRendererType_1 = __importDefault(require("@jbrowse/core/pluggableElementTypes/renderers/BoxRendererType"));
+const ui_1 = require("@jbrowse/core/ui");
+const util_1 = require("@jbrowse/core/util");
+const offscreenCanvasUtils_1 = require("@jbrowse/core/util/offscreenCanvasUtils");
+const dataAdapterCache_1 = require("@jbrowse/core/data_adapters/dataAdapterCache");
+const 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");
+const MismatchParser_1 = require("../BamAdapter/MismatchParser");
+const sortUtil_1 = require("./sortUtil");
+const util_2 = require("../util");
+const PileupLayoutSession_1 = require("./PileupLayoutSession");
 function fillRect(ctx, l, t, w, h, cw, color) {
     if (l + w < 0 || l > cw) {
         return;
@@ -138,8 +49,7 @@ function fillRect(ctx, l, t, w, h, cw, color) {
     }
 }
 function getColorBaseMap(theme) {
-    // @ts-ignore
-    var bases = theme.palette.bases;
+    const { bases } = theme.palette;
     return {
         A: bases.A.main,
         C: bases.C.main,
@@ -149,15 +59,12 @@ function getColorBaseMap(theme) {
     };
 }
 function getContrastBaseMap(theme) {
-    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),
-        ];
-    }));
+    return Object.fromEntries(Object.entries(getColorBaseMap(theme)).map(([key, value]) => [
+        key,
+        theme.palette.getContrastText(value),
+    ]));
 }
-var alignmentColoring = {
+const alignmentColoring = {
     color_fwd_strand_not_proper: '#ECC8C8',
     color_rev_strand_not_proper: '#BEBED8',
     color_fwd_strand: '#EC8B8B',
@@ -181,31 +88,28 @@ function shouldDrawSNPsMuted(type) {
 function shouldDrawIndels(type) {
     return true;
 }
-var PileupRenderer = /** @class */ (function (_super) {
-    __extends(PileupRenderer, _super);
-    function PileupRenderer() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.supportsSVG = true;
-        return _this;
+class PileupRenderer extends BoxRendererType_1.default {
+    constructor() {
+        super(...arguments);
+        this.supportsSVG = true;
     }
     // get width and height of chars the height is an approximation: width
     // letter M is approximately the height
-    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;
+    getCharWidthHeight(ctx) {
+        const charWidth = (0, util_1.measureText)('A');
+        const charHeight = (0, util_1.measureText)('M') - 2;
+        return { charWidth, charHeight };
+    }
+    layoutFeature({ feature, layout, bpPerPx, region, showSoftClip, heightPx, displayMode, }) {
+        let expansionBefore = 0;
+        let expansionAfter = 0;
         // Expand the start and end of feature when softclipping enabled
         if (showSoftClip) {
-            var mismatches = feature.get('mismatches');
-            var seq = feature.get('seq');
+            const mismatches = feature.get('mismatches');
+            const 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;
+                for (let i = 0; i < mismatches.length; i += 1) {
+                    const { type, start, cliplen = 0 } = mismatches[i];
                     if (type === 'softclip') {
                         start === 0
                             ? (expansionBefore = cliplen)
@@ -214,64 +118,69 @@ var PileupRenderer = /** @class */ (function (_super) {
                 }
             }
         }
-        var _d = __read((0, util_1.bpSpanPx)(feature.get('start') - expansionBefore, feature.get('end') + expansionAfter, region, bpPerPx), 2), leftPx = _d[0], rightPx = _d[1];
+        const [leftPx, rightPx] = (0, util_1.bpSpanPx)(feature.get('start') - expansionBefore, feature.get('end') + expansionAfter, region, bpPerPx);
         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));
+            throw new Error(`feature ${feature.id()} is not on the current region's reference sequence ${region.refName}`);
         }
-        var topPx = layout.addRect(feature.id(), feature.get('start') - expansionBefore, feature.get('end') + expansionAfter, heightPx, feature);
+        const 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,
+            feature,
+            leftPx,
+            rightPx,
             topPx: displayMode === 'collapse' ? 0 : topPx,
-            heightPx: 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)
-    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) {
+    getExpandedRegion(region, renderArgs) {
+        const { config, showSoftClip } = renderArgs;
+        const maxClippingSize = (0, configuration_1.readConfObject)(config, 'maxClippingSize');
+        const { start, end } = region;
+        const len = end - start;
+        const bpExpansion = Math.max(len, showSoftClip ? Math.round(maxClippingSize) : 0);
+        return {
+            // xref https://github.com/mobxjs/mobx-state-tree/issues/1524 for Omit
+            ...region,
+            start: Math.floor(Math.max(start - bpExpansion, 0)),
+            end: Math.ceil(end + bpExpansion),
+        };
+    }
+    colorByOrientation(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 = {
+    }
+    getOrientation(feature, config) {
+        const orientationType = (0, configuration_1.readConfObject)(config, 'orientationType');
+        const type = util_2.orientationTypes[orientationType];
+        const orientation = type[feature.get('pair_orientation')];
+        const 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) {
+    }
+    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%)");
-    };
-    PileupRenderer.prototype.colorByStranded = function (feature, _config) {
-        var flags = feature.get('flags');
-        var strand = feature.get('strand');
+            : `hsl(${Math.abs(feature.get('template_length')) / 10},50%,50%)`;
+    }
+    colorByStranded(feature, _config) {
+        const flags = feature.get('flags');
+        const strand = feature.get('strand');
         // is paired
         if (flags & 1) {
-            var revflag = flags & 64;
-            var flipper = revflag ? -1 : 1;
+            const revflag = flags & 64;
+            const flipper = revflag ? -1 : 1;
             // proper pairing
             if (flags & 2) {
                 return strand * flipper === 1 ? 'color_rev_strand' : 'color_fwd_strand';
@@ -290,20 +199,19 @@ var PileupRenderer = /** @class */ (function (_super) {
             return strand === 1 ? 'color_fwd_diff_chr' : 'color_rev_diff_chr';
         }
         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];
+    }
+    colorByPerBaseLettering({ ctx, feat, region, bpPerPx, colorForBase, contrastForBase, charWidth, charHeight, canvasWidth, }) {
+        const heightLim = charHeight - 2;
+        const { feature, topPx, heightPx } = feat;
+        const seq = feature.get('seq');
+        const cigarOps = (0, MismatchParser_1.parseCigar)(feature.get('CIGAR'));
+        const w = 1 / bpPerPx;
+        const start = feature.get('start');
+        let soffset = 0; // sequence offset
+        let roffset = 0; // reference offset
+        for (let i = 0; i < cigarOps.length; i += 2) {
+            const len = +cigarOps[i];
+            const op = cigarOps[i + 1];
             if (op === 'S' || op === 'I') {
                 soffset += len;
             }
@@ -311,10 +219,10 @@ var PileupRenderer = /** @class */ (function (_super) {
                 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];
+                for (let m = 0; m < len; m++) {
+                    const letter = seq[soffset + m];
+                    const r = start + roffset + m;
+                    const [leftPx] = (0, util_1.bpSpanPx)(r, r + 1, region, bpPerPx);
                     fillRect(ctx, leftPx, topPx, w + 0.5, heightPx, canvasWidth, colorForBase[letter]);
                     if (w >= charWidth && heightPx >= heightLim) {
                         // normal SNP coloring
@@ -326,20 +234,19 @@ var PileupRenderer = /** @class */ (function (_super) {
                 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];
+    }
+    colorByPerBaseQuality({ ctx, feat, region, bpPerPx, canvasWidth, }) {
+        const { feature, topPx, heightPx } = feat;
+        const qual = feature.get('qual') || '';
+        const scores = qual.split(' ').map(val => +val);
+        const cigarOps = (0, MismatchParser_1.parseCigar)(feature.get('CIGAR'));
+        const width = 1 / bpPerPx;
+        const start = feature.get('start');
+        let soffset = 0; // sequence offset
+        let roffset = 0; // reference offset
+        for (let i = 0; i < cigarOps.length; i += 2) {
+            const len = +cigarOps[i];
+            const op = cigarOps[i + 1];
             if (op === 'S' || op === 'I') {
                 soffset += len;
             }
@@ -347,16 +254,16 @@ var PileupRenderer = /** @class */ (function (_super) {
                 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%)"));
+                for (let m = 0; m < len; m++) {
+                    const score = scores[soffset + m];
+                    const [leftPx] = (0, util_1.bpSpanPx)(start + roffset + m, start + roffset + m + 1, region, bpPerPx);
+                    fillRect(ctx, leftPx, topPx, width + 0.5, heightPx, canvasWidth, `hsl(${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
     // https://github.com/samtools/hts-specs/pull/418/files#diff-e765c6479316309f56b636f88189cdde8c40b854c7bdcce9ee7fe87a4e76febcR596
     //
@@ -366,109 +273,85 @@ var PileupRenderer = /** @class */ (function (_super) {
     // has very high likelihood basecalls at that point, we really only care
     // about low qual calls <20 approx
     //
-    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; })
+    colorByModifications({ ctx, feat, region, bpPerPx, renderArgs, canvasWidth, }) {
+        const { feature, topPx, heightPx } = feat;
+        const { Color, modificationTagMap = {} } = renderArgs;
+        const mm = (0, util_2.getTagAlt)(feature, 'MM', 'Mm') || '';
+        const ml = (0, util_2.getTagAlt)(feature, 'ML', 'Ml') || [];
+        const probabilities = ml
+            ? (typeof ml === 'string' ? ml.split(',').map(e => +e) : ml).map(e => 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);
+                .map(s => s.charCodeAt(0) - 33)
+                .map(elt => Math.min(1, elt / 50));
+        const cigar = feature.get('CIGAR');
+        const start = feature.get('start');
+        const seq = feature.get('seq');
+        const strand = feature.get('strand');
+        const cigarOps = (0, MismatchParser_1.parseCigar)(cigar);
+        const 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';
+        let probIndex = 0;
+        for (let i = 0; i < modifications.length; i++) {
+            const { type, positions } = modifications[i];
+            const 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; }
+            const base = Color(col);
+            for (const readPos of (0, MismatchParser_1.getNextRefPos)(cigarOps, positions)) {
+                const r = start + readPos;
+                const [leftPx, rightPx] = (0, util_1.bpSpanPx)(r, r + 1, region, bpPerPx);
+                // give it a little boost of 0.1 to not make them fully
+                // invisible to avoid confusion
+                const 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++;
             }
         }
-    };
+    }
     // Color by methylation is slightly modified version of color by
     // modifications that focuses on CpG sites, with non-methylated CpG colored
     // blue
-    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') || '';
+    colorByMethylation({ ctx, feat, region, bpPerPx, renderArgs, canvasWidth, }) {
+        const { regionSequence } = renderArgs;
+        const { feature, topPx, heightPx } = feat;
+        const mm = (0, util_2.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_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;
+        const cigar = feature.get('CIGAR');
+        const fstart = feature.get('start');
+        const fend = feature.get('end');
+        const seq = feature.get('seq');
+        const strand = feature.get('strand');
+        const cigarOps = (0, MismatchParser_1.parseCigar)(cigar);
+        const methBins = new Array(region.end - region.start).fill(0);
+        const modifications = (0, MismatchParser_1.getModificationPositions)(mm, seq, strand);
+        for (let i = 0; i < modifications.length; i++) {
+            const { type, positions } = modifications[i];
             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);
+                for (const pos of (0, MismatchParser_1.getNextRefPos)(cigarOps, positions)) {
+                    const epos = pos + fstart - region.start;
+                    if (epos >= 0 && epos < methBins.length) {
+                        methBins[epos] = 1;
                     }
-                    finally { if (e_2) throw e_2.error; }
                 }
             }
         }
-        for (var j = fstart; j < fend; j++) {
-            var i = j - region.start;
+        for (let j = fstart; j < fend; j++) {
+            const i = j - region.start;
             if (i >= 0 && i < methBins.length) {
-                var l1 = regionSequence[i].toLowerCase();
-                var l2 = regionSequence[i + 1].toLowerCase();
+                const l1 = regionSequence[i].toLowerCase();
+                const 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];
+                        const s = region.start + i;
+                        const [leftPx, rightPx] = (0, util_1.bpSpanPx)(s, s + 2, region, bpPerPx);
                         fillRect(ctx, leftPx, topPx, rightPx - leftPx + 0.5, heightPx, canvasWidth, methBins[i] || methBins[i + 1] ? 'red' : 'blue');
                     }
                 }
@@ -476,23 +359,23 @@ var PileupRenderer = /** @class */ (function (_super) {
                 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];
+                        const s = region.start + i;
+                        const [leftPx, rightPx] = (0, util_1.bpSpanPx)(s, s + 1, region, bpPerPx);
                         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];
+                        const [leftPx2, rightPx2] = (0, util_1.bpSpanPx)(s + 1, s + 2, region, bpPerPx);
                         fillRect(ctx, leftPx2, topPx, rightPx2 - leftPx2 + 0.5, heightPx, canvasWidth, methBins[i + 1] ? 'red' : 'blue');
                     }
                 }
             }
         }
-    };
-    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;
+    }
+    drawRect(ctx, feat, props) {
+        const { regions, bpPerPx } = props;
+        const { heightPx, topPx, feature } = feat;
+        const [region] = regions;
+        const [leftPx, rightPx] = (0, util_1.bpSpanPx)(feature.get('start'), feature.get('end'), region, bpPerPx);
+        const flip = region.reversed ? -1 : 1;
+        const strand = feature.get('strand') * flip;
         if (bpPerPx < 10) {
             if (strand === -1) {
                 ctx.beginPath();
@@ -518,13 +401,12 @@ var PileupRenderer = /** @class */ (function (_super) {
         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];
+    }
+    drawAlignmentRect({ ctx, feat, renderArgs, colorForBase, contrastForBase, charWidth, charHeight, defaultColor, canvasWidth, }) {
+        const { config, bpPerPx, regions, colorBy, colorTagMap = {} } = renderArgs;
+        const { tag = '', type: colorType = '' } = colorBy || {};
+        const { feature } = feat;
+        const region = regions[0];
         // first pass for simple color changes that change the color of the
         // alignment
         switch (colorType) {
@@ -535,7 +417,7 @@ var PileupRenderer = /** @class */ (function (_super) {
                 ctx.fillStyle = feature.get('strand') === -1 ? '#8F8FD8' : '#EC8B8B';
                 break;
             case 'mappingQuality':
-                ctx.fillStyle = "hsl(".concat(feature.get('mq'), ",50%,50%)");
+                ctx.fillStyle = `hsl(${feature.get('mq')},50%,50%)`;
                 break;
             case 'pairOrientation':
                 ctx.fillStyle = this.colorByOrientation(feature, config);
@@ -545,11 +427,11 @@ var PileupRenderer = /** @class */ (function (_super) {
                 break;
             case 'xs':
             case 'tag': {
-                var tags = feature.get('tags');
-                var val = tags ? tags[tag] : feature.get(tag);
+                const tags = feature.get('tags');
+                const val = tags ? tags[tag] : feature.get(tag);
                 // special for for XS/TS tag
                 if (tag === 'XS' || tag === 'TS') {
-                    var map = {
+                    const map = {
                         '-': 'color_rev_strand',
                         '+': 'color_fwd_strand',
                     };
@@ -557,7 +439,7 @@ var PileupRenderer = /** @class */ (function (_super) {
                 }
                 // lower case 'ts' from minimap2 is flipped from xs
                 if (tag === 'ts') {
-                    var map = {
+                    const map = {
                         '-': feature.get('strand') === -1
                             ? 'color_fwd_strand'
                             : 'color_rev_strand',
@@ -570,7 +452,7 @@ var PileupRenderer = /** @class */ (function (_super) {
                 // tag is not one of the autofilled tags, has color-value pairs from
                 // fetchValues
                 else {
-                    var foundValue = colorTagMap[val];
+                    const foundValue = colorTagMap[val];
                     ctx.fillStyle = foundValue || alignmentColoring['color_nostrand'];
                 }
                 break;
@@ -596,7 +478,7 @@ var PileupRenderer = /** @class */ (function (_super) {
                     ctx.fillStyle = '#c8c8c8';
                 }
                 else {
-                    ctx.fillStyle = (0, configuration_1.readConfObject)(config, 'color', { feature: feature });
+                    ctx.fillStyle = (0, configuration_1.readConfObject)(config, 'color', { feature });
                 }
                 break;
         }
@@ -606,75 +488,74 @@ var PileupRenderer = /** @class */ (function (_super) {
         switch (colorType) {
             case 'perBaseQuality':
                 this.colorByPerBaseQuality({
-                    ctx: ctx,
-                    feat: feat,
-                    region: region,
-                    bpPerPx: bpPerPx,
-                    canvasWidth: canvasWidth,
+                    ctx,
+                    feat,
+                    region,
+                    bpPerPx,
+                    canvasWidth,
                 });
                 break;
             case 'perBaseLettering':
                 this.colorByPerBaseLettering({
-                    ctx: ctx,
-                    feat: feat,
-                    region: region,
-                    bpPerPx: bpPerPx,
-                    colorForBase: colorForBase,
-                    contrastForBase: contrastForBase,
-                    charWidth: charWidth,
-                    charHeight: charHeight,
-                    canvasWidth: canvasWidth,
+                    ctx,
+                    feat,
+                    region,
+                    bpPerPx,
+                    colorForBase,
+                    contrastForBase,
+                    charWidth,
+                    charHeight,
+                    canvasWidth,
                 });
                 break;
             case 'modifications':
                 this.colorByModifications({
-                    ctx: ctx,
-                    feat: feat,
-                    region: region,
-                    bpPerPx: bpPerPx,
-                    renderArgs: renderArgs,
-                    canvasWidth: canvasWidth,
+                    ctx,
+                    feat,
+                    region,
+                    bpPerPx,
+                    renderArgs,
+                    canvasWidth,
                 });
                 break;
             case 'methylation':
                 this.colorByMethylation({
-                    ctx: ctx,
-                    feat: feat,
-                    region: region,
-                    bpPerPx: bpPerPx,
-                    renderArgs: renderArgs,
-                    canvasWidth: canvasWidth,
+                    ctx,
+                    feat,
+                    region,
+                    bpPerPx,
+                    renderArgs,
+                    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;
+    }
+    drawMismatches({ ctx, feat, renderArgs, minSubfeatureWidth, largeInsertionIndicatorScale, mismatchAlpha, charWidth, charHeight, colorForBase, contrastForBase, canvasWidth, drawSNPsMuted, drawIndels = true, }) {
+        const { Color, bpPerPx, regions } = renderArgs;
+        const { heightPx, topPx, feature } = feat;
+        const [region] = regions;
+        const start = feature.get('start');
+        const pxPerBp = Math.min(1 / bpPerPx, 2);
+        const w = Math.max(minSubfeatureWidth, pxPerBp);
+        const mismatches = feature.get('mismatches');
+        const 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
+        const 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));
+        for (let i = 0; i < mismatches.length; i += 1) {
+            const mismatch = mismatches[i];
+            const mstart = start + mismatch.start;
+            const mlen = mismatch.length;
+            const mbase = mismatch.base;
+            const [leftPx, rightPx] = (0, util_1.bpSpanPx)(mstart, mstart + mlen, region, bpPerPx);
+            const widthPx = Math.max(minSubfeatureWidth, Math.abs(leftPx - rightPx));
             if (mismatch.type === 'mismatch') {
                 if (!drawSNPsMuted) {
-                    var baseColor = colorForBase[mismatch.base] || '#888';
+                    const baseColor = colorForBase[mismatch.base] || '#888';
                     fillRect(ctx, leftPx, topPx, widthPx, heightPx, canvasWidth, !mismatchAlpha
                         ? baseColor
                         : mismatch.qual !== undefined
@@ -687,7 +568,7 @@ var PileupRenderer = /** @class */ (function (_super) {
                 }
                 if (widthPx >= charWidth && heightPx >= heightLim) {
                     // normal SNP coloring
-                    var contrastColor = drawSNPsMuted
+                    const contrastColor = drawSNPsMuted
                         ? 'black'
                         : contrastForBase[mismatch.base] || 'black';
                     ctx.fillStyle = !mismatchAlpha
@@ -704,8 +585,8 @@ var PileupRenderer = /** @class */ (function (_super) {
             }
             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);
+                const txt = `${mismatch.length}`;
+                const 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);
@@ -713,25 +594,25 @@ var PileupRenderer = /** @class */ (function (_super) {
             }
             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));
+                const pos = leftPx + extraHorizontallyFlippedOffset;
+                const len = +mismatch.base || mismatch.length;
+                const 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);
+                        ctx.fillText(`(${mismatch.base})`, pos + 3, topPx + heightPx);
                     }
                 }
             }
             else if (mismatch.type === 'hardclip' || mismatch.type === 'softclip') {
-                var pos = leftPx + extraHorizontallyFlippedOffset;
+                const 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);
+                    ctx.fillText(`(${mismatch.base})`, pos + 3, topPx + heightPx);
                 }
             }
             else if (mismatch.type === 'skip') {
@@ -740,7 +621,7 @@ var PileupRenderer = /** @class */ (function (_super) {
                 // 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);
+                    const 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');
                 }
@@ -748,44 +629,42 @@ var PileupRenderer = /** @class */ (function (_super) {
         }
         // 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);
+            for (let i = 0; i < mismatches.length; i += 1) {
+                const mismatch = mismatches[i];
+                const mstart = start + mismatch.start;
+                const mlen = mismatch.length;
+                const [leftPx] = (0, util_1.bpSpanPx)(mstart, mstart + mlen, region, bpPerPx);
+                const len = +mismatch.base || mismatch.length;
+                const txt = `${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;
+                        const rwidth = (0, util_1.measureText)(txt);
+                        const 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;
+                        const padding = 2;
                         fillRect(ctx, leftPx - padding, topPx, 2 * padding, heightPx, canvasWidth, 'purple');
                     }
                 }
             }
         }
-    };
-    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 = {
+    }
+    drawSoftClipping({ ctx, feat, renderArgs, config, theme, canvasWidth, }) {
+        const { feature, topPx, heightPx } = feat;
+        const { regions, bpPerPx } = renderArgs;
+        const [region] = regions;
+        const minFeatWidth = (0, configuration_1.readConfObject)(config, 'minSubfeatureWidth');
+        const mismatches = feature.get('mismatches');
+        const seq = feature.get('seq');
+        const { charWidth, charHeight } = this.getCharWidthHeight(ctx);
+        const { bases } = theme.palette;
+        const colorForBase = {
             A: bases.A.main,
             C: bases.C.main,
             G: bases.G.main,
@@ -795,23 +674,23 @@ var PileupRenderer = /** @class */ (function (_super) {
         // 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);
+                .filter(mismatch => mismatch.type === 'softclip')
+                .forEach(mismatch => {
+                const softClipLength = mismatch.cliplen || 0;
+                const s = feature.get('start');
+                const softClipStart = mismatch.start === 0 ? s - softClipLength : s + mismatch.start;
+                for (let k = 0; k < softClipLength; k += 1) {
+                    const 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));
+                    const [softClipLeftPx, softClipRightPx] = (0, util_1.bpSpanPx)(softClipStart + k, softClipStart + k + 1, region, bpPerPx);
+                    const 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';
+                    const baseColor = colorForBase[base] || '#000000';
                     ctx.fillStyle = baseColor;
                     fillRect(ctx, softClipLeftPx, topPx, softClipWidthPx, heightPx, canvasWidth);
                     if (softClipWidthPx >= charWidth && heightPx >= charHeight - 5) {
@@ -821,171 +700,158 @@ var PileupRenderer = /** @class */ (function (_super) {
                 }
             });
         }
-    };
-    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);
+    }
+    makeImageData({ ctx, layoutRecords, canvasWidth, renderArgs, }) {
+        const { layout, config, showSoftClip, colorBy, theme: configTheme, } = renderArgs;
+        const mismatchAlpha = (0, configuration_1.readConfObject)(config, 'mismatchAlpha');
+        const minSubfeatureWidth = (0, configuration_1.readConfObject)(config, 'minSubfeatureWidth');
+        const largeInsertionIndicatorScale = (0, configuration_1.readConfObject)(config, 'largeInsertionIndicatorScale');
+        const defaultColor = (0, configuration_1.readConfObject)(config, 'color') === '#f0f';
+        const theme = (0, ui_1.createJBrowseTheme)(configTheme);
+        const colorForBase = getColorBaseMap(theme);
+        const contrastForBase = getContrastBaseMap(theme);
         if (!layout) {
-            throw new Error("layout required");
+            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];
+        const { charWidth, charHeight } = this.getCharWidthHeight(ctx);
+        const drawSNPsMuted = shouldDrawSNPsMuted(colorBy === null || colorBy === void 0 ? void 0 : colorBy.type);
+        const drawIndels = shouldDrawIndels(colorBy === null || colorBy === void 0 ? void 0 : colorBy.type);
+        for (let i = 0; i < layoutRecords.length; i++) {
+            const 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,
+                ctx,
+                feat,
+                renderArgs,
+                defaultColor,
+                colorForBase,
+                contrastForBase,
+                charWidth,
+                charHeight,
+                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,
+                ctx,
+                feat,
+                renderArgs,
+                mismatchAlpha,
+                drawSNPsMuted,
+                drawIndels,
+                largeInsertionIndicatorScale,
+                minSubfeatureWidth,
+                charWidth,
+                charHeight,
+                colorForBase,
+                contrastForBase,
+                canvasWidth,
             });
             if (showSoftClip) {
                 this.drawSoftClipping({
-                    ctx: ctx,
-                    feat: feat,
-                    renderArgs: renderArgs,
-                    config: config,
-                    theme: theme,
-                    canvasWidth: canvasWidth,
+                    ctx,
+                    feat,
+                    renderArgs,
+                    config,
+                    theme,
+                    canvasWidth,
                 });
             }
         }
-    };
+    }
     // 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];
+    layoutFeats(props) {
+        const { layout, features, sortedBy, config, bpPerPx, showSoftClip, regions, } = props;
+        const [region] = regions;
         if (!layout) {
-            throw new Error("layout required");
+            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
+        const 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) {
+        const heightPx = (0, configuration_1.readConfObject)(config, 'height');
+        const displayMode = (0, configuration_1.readConfObject)(config, 'displayMode');
+        return (0, util_1.iterMap)(featureMap.values(), feature => this.layoutFeature({
+            feature,
+            layout,
+            bpPerPx,
+            region,
+            showSoftClip,
+            heightPx,
+            displayMode,
+        }), featureMap.size);
+    }
+    async fetchSequence(renderProps) {
+        const { sessionId, regions, adapterConfig } = renderProps;
+        const { sequenceAdapter } = adapterConfig;
+        if (!sequenceAdapter) {
+            return undefined;
+        }
+        const { dataAdapter } = await (0, dataAdapterCache_1.getAdapter)(this.pluginManager, sessionId, sequenceAdapter);
+        const [region] = regions;
+        return (0, util_2.fetchSequence)(region, dataAdapter);
+    }
+    async render(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 })];
-                }
-            });
+        const features = await this.getFeatures(renderProps);
+        const layout = this.createLayoutInWorker(renderProps);
+        const { regions, bpPerPx } = renderProps;
+        const layoutRecords = this.layoutFeats({
+            ...renderProps,
+            features,
+            layout,
         });
-    };
-    PileupRenderer.prototype.createSession = function (args) {
+        const [region] = regions;
+        // only need reference sequence if there are features and only for some
+        // cases
+        const regionSequence = features.size && (0, util_2.shouldFetchReferenceSequence)((_a = renderProps.colorBy) === null || _a === void 0 ? void 0 : _a.type)
+            ? await this.fetchSequence(renderProps)
+            : undefined;
+        const { end, start } = region;
+        const width = (end - start) / bpPerPx;
+        const height = Math.max(layout.getTotalHeight(), 1);
+        const Color = await Promise.resolve().then(() => __importStar(require('color'))).then(f => f.default);
+        const res = await (0, offscreenCanvasUtils_1.renderToAbstractCanvas)(width, height, renderProps, ctx => this.makeImageData({
+            ctx,
+            layoutRecords,
+            canvasWidth: width,
+            renderArgs: {
+                ...renderProps,
+                layout,
+                features,
+                regionSequence,
+                Color,
+            },
+        }));
+        const results = await super.render({
+            ...renderProps,
+            ...res,
+            features,
+            layout,
+            height,
+            width,
+        });
+        return {
+            ...results,
+            ...res,
+            features: new Map(),
+            layout,
+            height,
+            width,
+            maxHeightReached: layout.maxHeightReached,
+        };
+    }
+    createSession(args) {
         return new PileupLayoutSession_1.PileupLayoutSession(args);
-    };
-    return PileupRenderer;
-}(BoxRendererType_1.default));
+    }
+}
 exports.default = PileupRenderer;
 //# sourceMappingURL=PileupRenderer.js.map