@jbrowse/plugin-alignments 2.4.2 → 2.6.0

package/esm/PileupRenderer/PileupRenderer.js

@@ -1,121 +1,32 @@
 import BoxRendererType from '@jbrowse/core/pluggableElementTypes/renderers/BoxRendererType';
-import { createJBrowseTheme } from '@jbrowse/core/ui';
-import { bpSpanPx, iterMap, measureText, } from '@jbrowse/core/util';
-import { renderToAbstractCanvas } from '@jbrowse/core/util/offscreenCanvasUtils';
+import { notEmpty, renderToAbstractCanvas, } from '@jbrowse/core/util';
 import { getAdapter } from '@jbrowse/core/data_adapters/dataAdapterCache';
-import { readConfObject, } from '@jbrowse/core/configuration';
-// locals
-import { parseCigar, getModificationPositions, getNextRefPos, } from '../MismatchParser';
-import { sortFeature } from './sortUtil';
-import { getTagAlt, orientationTypes, fetchSequence, shouldFetchReferenceSequence, } from '../util';
 import { PileupLayoutSession, } from './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) {
-    const { bases } = theme.palette;
-    return {
-        A: bases.A.main,
-        C: bases.C.main,
-        G: bases.G.main,
-        T: bases.T.main,
-        deletion: '#808080', // gray
-    };
-}
-function getContrastBaseMap(theme) {
-    const map = getColorBaseMap(theme);
-    return Object.fromEntries(Object.entries(map).map(([k, v]) => [k, theme.palette.getContrastText(v)]));
-}
-const alignmentColoring = {
-    color_fwd_strand_not_proper: '#ECC8C8',
-    color_rev_strand_not_proper: '#BEBED8',
-    color_fwd_strand: '#EC8B8B',
-    color_rev_strand: '#8F8FD8',
-    color_fwd_missing_mate: '#D11919',
-    color_rev_missing_mate: '#1919D1',
-    color_fwd_diff_chr: '#000',
-    color_rev_diff_chr: '#969696',
-    color_pair_lr: '#c8c8c8',
-    color_pair_rr: 'navy',
-    color_pair_rl: 'teal',
-    color_pair_ll: 'green',
-    color_nostrand: '#c8c8c8',
-    color_interchrom: 'orange',
-    color_longinsert: 'red',
-    color_shortinsert: 'pink',
-};
-function shouldDrawSNPsMuted(type) {
-    return ['methylation', 'modifications'].includes(type || '');
-}
-function shouldDrawIndels(type) {
-    return true;
-}
+// locals
+import { fetchSequence, shouldFetchReferenceSequence } from '../util';
+import { layoutFeats } from './layoutFeatures';
+import { makeImageData } from './makeImageData';
+import { readConfObject } from '@jbrowse/core/configuration';
 export default class PileupRenderer extends BoxRendererType {
     constructor() {
         super(...arguments);
         this.supportsSVG = true;
     }
-    // get width and height of chars the height is an approximation: width
-    // letter M is approximately the height
-    getCharWidthHeight() {
-        const charWidth = measureText('A');
-        const charHeight = 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) {
-            const mismatches = feature.get('mismatches');
-            const seq = feature.get('seq');
-            if (seq && mismatches) {
-                for (let i = 0; i < mismatches.length; i += 1) {
-                    const { type, start, cliplen = 0 } = mismatches[i];
-                    if (type === 'softclip') {
-                        start === 0
-                            ? (expansionBefore = cliplen)
-                            : (expansionAfter = cliplen);
-                    }
-                }
-            }
-        }
-        const s = feature.get('start') - expansionBefore;
-        const e = feature.get('end') + expansionAfter;
-        const [leftPx, rightPx] = bpSpanPx(s, e, region, bpPerPx);
-        if (displayMode === 'compact') {
-            heightPx /= 3;
-        }
-        if (feature.get('refName') !== region.refName) {
-            throw new Error(`feature ${feature.id()} is not on the current region's reference sequence ${region.refName}`);
-        }
-        const topPx = layout.addRect(feature.id(), s, e, heightPx, feature);
-        if (topPx === null) {
-            return null;
+    async fetchSequence(renderProps) {
+        const { sessionId, regions, adapterConfig } = renderProps;
+        const { sequenceAdapter } = adapterConfig;
+        if (!sequenceAdapter) {
+            return undefined;
         }
-        return {
-            feature,
-            leftPx,
-            rightPx,
-            topPx: displayMode === 'collapse' ? 0 : topPx,
-            heightPx,
-        };
+        const pm = this.pluginManager;
+        const { dataAdapter } = await getAdapter(pm, sessionId, sequenceAdapter);
+        const [region] = regions;
+        return fetchSequence(region, dataAdapter);
     }
-    // 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)
     getExpandedRegion(region, renderArgs) {
         const { config, showSoftClip } = renderArgs;
-        const maxClippingSize = readConfObject(config, 'maxClippingSize');
         const { start, end } = region;
+        const maxClippingSize = readConfObject(config, 'maxClippingSize');
         const bpExpansion = showSoftClip ? Math.round(maxClippingSize) : 0;
         return {
             // xref https://github.com/mobxjs/mobx-state-tree/issues/1524 for Omit
@@ -124,657 +35,13 @@ export default class PileupRenderer extends BoxRendererType {
             end: Math.ceil(end + bpExpansion),
         };
     }
-    colorByOrientation(feature, config) {
-        return alignmentColoring[this.getOrientation(feature, config) || 'color_nostrand'];
-    }
-    getOrientation(feature, config) {
-        const orientationType = readConfObject(config, 'orientationType');
-        const type = 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];
-    }
-    colorByInsertSize(feature, _config) {
-        return feature.get('is_paired') &&
-            feature.get('refName') !== feature.get('next_ref')
-            ? '#555'
-            : `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) {
-            const revflag = flags & 64;
-            const 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('refName') === feature.get('next_refName')) {
-                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';
-    }
-    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 = 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;
-            }
-            else if (op === 'D' || op === 'N') {
-                roffset += len;
-            }
-            else if (op === 'M' || op === 'X' || op === '=') {
-                for (let m = 0; m < len; m++) {
-                    const letter = seq[soffset + m];
-                    const r = start + roffset + m;
-                    const [leftPx] = 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
-                        ctx.fillStyle = contrastForBase[letter];
-                        ctx.fillText(letter, leftPx + (w - charWidth) / 2 + 1, topPx + heightPx);
-                    }
-                }
-                soffset += len;
-                roffset += len;
-            }
-        }
-    }
-    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 = 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;
-            }
-            else if (op === 'D' || op === 'N') {
-                roffset += len;
-            }
-            else if (op === 'M' || op === 'X' || op === '=') {
-                for (let m = 0; m < len; m++) {
-                    const score = scores[soffset + m];
-                    const [leftPx] = 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
-    //
-    // if we have ML or Ml, it is an 8bit probability, divide by 255
-    //
-    // if we have MP or Mp it is phred scaled ASCII, which can go up to 90 but
-    // has very high likelihood basecalls at that point, we really only care
-    // about low qual calls <20 approx
-    //
-    colorByModifications({ ctx, feat, region, bpPerPx, renderArgs, canvasWidth, }) {
-        const { feature, topPx, heightPx } = feat;
-        const { Color, modificationTagMap = {} } = renderArgs;
-        const mm = getTagAlt(feature, 'MM', 'Mm') || '';
-        const ml = getTagAlt(feature, 'ML', 'Ml') || [];
-        const probabilities = ml
-            ? (typeof ml === 'string' ? ml.split(',').map(e => +e) : ml).map(e => e / 255)
-            : getTagAlt(feature, 'MP', 'Mp')
-                .split('')
-                .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 = parseCigar(cigar);
-        const modifications = getModificationPositions(mm, seq, strand);
-        // probIndex applies across multiple modifications e.g.
-        let probIndex = 0;
-        for (const { type, positions } of modifications) {
-            const col = modificationTagMap[type] || 'black';
-            // @ts-expect-error
-            const base = Color(col);
-            for (const readPos of getNextRefPos(cigarOps, positions)) {
-                const r = start + readPos;
-                const [leftPx, rightPx] = 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
-    colorByMethylation({ ctx, feat, region, bpPerPx, renderArgs, canvasWidth, }) {
-        const { regionSequence } = renderArgs;
-        const { feature, topPx, heightPx } = feat;
-        const mm = getTagAlt(feature, 'MM', 'Mm') || '';
-        if (!regionSequence) {
-            throw new Error('region sequence required for methylation');
-        }
-        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 = parseCigar(cigar);
-        const methBins = new Array(region.end - region.start).fill(0);
-        const modifications = getModificationPositions(mm, seq, strand);
-        for (let i = 0; i < modifications.length; i++) {
-            const { type, positions } = modifications[i];
-            if (type === 'm' && positions) {
-                for (const pos of getNextRefPos(cigarOps, positions)) {
-                    const epos = pos + fstart - region.start;
-                    if (epos >= 0 && epos < methBins.length) {
-                        methBins[epos] = 1;
-                    }
-                }
-            }
-        }
-        for (let j = fstart; j < fend; j++) {
-            const i = j - region.start;
-            if (i >= 0 && i < methBins.length) {
-                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') {
-                        const s = region.start + i;
-                        const [leftPx, rightPx] = bpSpanPx(s, s + 2, region, bpPerPx);
-                        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') {
-                        const s = region.start + i;
-                        const [leftPx, rightPx] = bpSpanPx(s, s + 1, region, bpPerPx);
-                        fillRect(ctx, leftPx, topPx, rightPx - leftPx + 0.5, heightPx, canvasWidth, methBins[i] ? 'red' : 'blue');
-                        const [leftPx2, rightPx2] = bpSpanPx(s + 1, s + 2, region, bpPerPx);
-                        fillRect(ctx, leftPx2, topPx, rightPx2 - leftPx2 + 0.5, heightPx, canvasWidth, methBins[i + 1] ? 'red' : 'blue');
-                    }
-                }
-            }
-        }
-    }
-    drawRect(ctx, feat, props) {
-        const { regions, bpPerPx } = props;
-        const { heightPx, topPx, feature } = feat;
-        const [region] = regions;
-        const [leftPx, rightPx] = 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();
-                ctx.moveTo(leftPx - 5, topPx + heightPx / 2);
-                ctx.lineTo(leftPx, topPx + heightPx);
-                ctx.lineTo(rightPx, topPx + heightPx);
-                ctx.lineTo(rightPx, topPx);
-                ctx.lineTo(leftPx, topPx);
-                ctx.closePath();
-                ctx.fill();
-            }
-            else {
-                ctx.beginPath();
-                ctx.moveTo(leftPx, topPx);
-                ctx.lineTo(leftPx, topPx + heightPx);
-                ctx.lineTo(rightPx, topPx + heightPx);
-                ctx.lineTo(rightPx + 5, topPx + heightPx / 2);
-                ctx.lineTo(rightPx, topPx);
-                ctx.closePath();
-                ctx.fill();
-            }
-        }
-        else {
-            ctx.fillRect(leftPx, topPx, rightPx - leftPx, heightPx);
-        }
-    }
-    drawAlignmentRect({ ctx, feat, renderArgs, colorForBase, contrastForBase, charWidth, charHeight, defaultColor, theme, 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) {
-            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(${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': {
-                const tags = feature.get('tags');
-                const val = tags ? tags[tag] : feature.get(tag);
-                // special for for XS/TS tag
-                if (tag === 'XS' || tag === 'TS') {
-                    const 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') {
-                    const 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 {
-                    const 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)
-                ctx.fillStyle = feature.get('flags') & 16 ? '#c8dcc8' : '#c8c8c8';
-                break;
-            }
-            default: {
-                ctx.fillStyle = defaultColor
-                    ? 'lightgrey'
-                    : readConfObject(config, 'color', { feature });
-                break;
-            }
-        }
-        this.drawRect(ctx, feat, renderArgs);
-        // second pass for color types that render per-base things that go over the
-        // existing drawing
-        switch (colorType) {
-            case 'perBaseQuality':
-                this.colorByPerBaseQuality({
-                    ctx,
-                    feat,
-                    region,
-                    bpPerPx,
-                    canvasWidth,
-                });
-                break;
-            case 'perBaseLettering':
-                this.colorByPerBaseLettering({
-                    ctx,
-                    feat,
-                    region,
-                    bpPerPx,
-                    colorForBase,
-                    contrastForBase,
-                    charWidth,
-                    charHeight,
-                    canvasWidth,
-                });
-                break;
-            case 'modifications':
-                this.colorByModifications({
-                    ctx,
-                    feat,
-                    region,
-                    bpPerPx,
-                    renderArgs,
-                    canvasWidth,
-                });
-                break;
-            case 'methylation':
-                this.colorByMethylation({
-                    ctx,
-                    feat,
-                    region,
-                    bpPerPx,
-                    renderArgs,
-                    canvasWidth,
-                });
-                break;
-        }
-    }
-    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
-        const extraHorizontallyFlippedOffset = region.reversed
-            ? 1 / bpPerPx + 1
-            : -1;
-        if (!mismatches) {
-            return;
-        }
-        // two pass rendering: first pass, draw all the mismatches except wide
-        // insertion markers
-        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] = bpSpanPx(mstart, mstart + mlen, region, bpPerPx);
-            const widthPx = Math.max(minSubfeatureWidth, Math.abs(leftPx - rightPx));
-            if (mismatch.type === 'mismatch') {
-                if (!drawSNPsMuted) {
-                    const baseColor = colorForBase[mismatch.base] || '#888';
-                    fillRect(ctx, Math.round(leftPx), topPx, widthPx, heightPx, canvasWidth, mismatchAlpha
-                        ? mismatch.qual === undefined
-                            ? baseColor
-                            : // @ts-expect-error
-                                Color(baseColor)
-                                    .alpha(Math.min(1, mismatch.qual / 50))
-                                    .hsl()
-                                    .string()
-                        : baseColor);
-                }
-                if (widthPx >= charWidth && heightPx >= heightLim) {
-                    // normal SNP coloring
-                    const contrastColor = drawSNPsMuted
-                        ? 'black'
-                        : contrastForBase[mismatch.base] || 'black';
-                    ctx.fillStyle = mismatchAlpha
-                        ? mismatch.qual === undefined
-                            ? contrastColor
-                            : // @ts-expect-error
-                                Color(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) {
-                fillRect(ctx, leftPx, topPx, Math.abs(leftPx - rightPx), heightPx, canvasWidth, colorForBase.deletion);
-                const txt = `${mismatch.length}`;
-                const rwidth = 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';
-                const pos = leftPx + extraHorizontallyFlippedOffset;
-                const len = +mismatch.base || mismatch.length;
-                const insW = Math.max(0, 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(`(${mismatch.base})`, pos + 3, topPx + heightPx);
-                    }
-                }
-            }
-            else if (mismatch.type === 'hardclip' || mismatch.type === 'softclip') {
-                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(`(${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
-                    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');
-                }
-            }
-        }
-        // second pass, draw wide insertion markers on top
-        if (drawIndels) {
-            for (let i = 0; i < mismatches.length; i += 1) {
-                const mismatch = mismatches[i];
-                const mstart = start + mismatch.start;
-                const mlen = mismatch.length;
-                const [leftPx] = 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) {
-                        const rwidth = 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 {
-                        const padding = 2;
-                        fillRect(ctx, leftPx - padding, topPx, 2 * padding, heightPx, canvasWidth, 'purple');
-                    }
-                }
-            }
-        }
-    }
-    drawSoftClipping({ ctx, feat, renderArgs, config, theme, canvasWidth, }) {
-        const { feature, topPx, heightPx } = feat;
-        const { regions, bpPerPx } = renderArgs;
-        const [region] = regions;
-        const minFeatWidth = readConfObject(config, 'minSubfeatureWidth');
-        const mismatches = feature.get('mismatches');
-        const seq = feature.get('seq');
-        const { charWidth, charHeight } = this.getCharWidthHeight();
-        const { bases } = theme.palette;
-        const 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)) {
-            return;
-        }
-        mismatches
-            .filter(mismatch => mismatch.type === 'softclip')
-            .forEach(mismatch => {
-            const len = mismatch.cliplen || 0;
-            const s = feature.get('start');
-            const start = mismatch.start === 0 ? s - len : s + mismatch.start;
-            for (let k = 0; k < len; 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;
-                }
-                const [leftPx, rightPx] = bpSpanPx(start + k, start + k + 1, region, bpPerPx);
-                const widthPx = Math.max(minFeatWidth, rightPx - leftPx);
-                // Black accounts for IUPAC ambiguity code bases such as N that
-                // show in soft clipping
-                const baseColor = colorForBase[base] || '#000000';
-                ctx.fillStyle = baseColor;
-                fillRect(ctx, leftPx, topPx, widthPx, heightPx, canvasWidth);
-                if (widthPx >= charWidth && heightPx >= charHeight - 5) {
-                    ctx.fillStyle = theme.palette.getContrastText(baseColor);
-                    ctx.fillText(base, leftPx + (widthPx - charWidth) / 2 + 1, topPx + heightPx);
-                }
-            }
-        });
-    }
-    makeImageData({ ctx, layoutRecords, canvasWidth, renderArgs, }) {
-        const { layout, config, showSoftClip, colorBy, theme: configTheme, } = renderArgs;
-        const mismatchAlpha = readConfObject(config, 'mismatchAlpha');
-        const minSubfeatureWidth = readConfObject(config, 'minSubfeatureWidth');
-        const largeInsertionIndicatorScale = readConfObject(config, 'largeInsertionIndicatorScale');
-        const defaultColor = readConfObject(config, 'color') === '#f0f';
-        const theme = createJBrowseTheme(configTheme);
-        const colorForBase = getColorBaseMap(theme);
-        const 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';
-        const { charWidth, charHeight } = this.getCharWidthHeight();
-        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,
-                feat,
-                renderArgs,
-                defaultColor,
-                colorForBase,
-                contrastForBase,
-                charWidth,
-                charHeight,
-                canvasWidth,
-                theme,
-            });
-            this.drawMismatches({
-                ctx,
-                feat,
-                renderArgs,
-                mismatchAlpha,
-                drawSNPsMuted,
-                drawIndels,
-                largeInsertionIndicatorScale,
-                minSubfeatureWidth,
-                charWidth,
-                charHeight,
-                colorForBase,
-                contrastForBase,
-                canvasWidth,
-                theme,
-            });
-            if (showSoftClip) {
-                this.drawSoftClipping({
-                    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
-    layoutFeats(props) {
-        const { layout, features, sortedBy, config, bpPerPx, showSoftClip, regions, } = props;
-        const [region] = regions;
-        if (!layout) {
-            throw new Error(`layout required`);
-        }
-        if (!layout.addRect) {
-            throw new Error('invalid layout object');
-        }
-        const featureMap = (sortedBy === null || sortedBy === void 0 ? void 0 : sortedBy.type) && region.start === sortedBy.pos
-            ? sortFeature(features, sortedBy)
-            : features;
-        const heightPx = readConfObject(config, 'height');
-        const displayMode = readConfObject(config, 'displayMode');
-        return 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 getAdapter(this.pluginManager, sessionId, sequenceAdapter);
-        const [region] = regions;
-        return fetchSequence(region, dataAdapter);
-    }
     async render(renderProps) {
         var _a;
         const features = await this.getFeatures(renderProps);
         const layout = this.createLayoutInWorker(renderProps);
         const { regions, bpPerPx } = renderProps;
         const [region] = regions;
-        const layoutRecords = this.layoutFeats({
+        const layoutRecords = layoutFeats({
             ...renderProps,
             features,
             layout,
@@ -784,13 +51,12 @@ export default class PileupRenderer extends BoxRendererType {
         const regionSequence = features.size && 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 width = (region.end - region.start) / bpPerPx;
         const height = Math.max(layout.getTotalHeight(), 1);
         const Color = await import('color').then(f => f.default);
-        const res = await renderToAbstractCanvas(width, height, renderProps, ctx => this.makeImageData({
+        const res = await renderToAbstractCanvas(width, height, renderProps, ctx => makeImageData({
             ctx,
-            layoutRecords,
+            layoutRecords: layoutRecords.filter(notEmpty),
             canvasWidth: width,
             renderArgs: {
                 ...renderProps,