@jbrowse/plugin-alignments 3.7.0 → 4.0.0

package/esm/PileupRenderer/renderers/renderMismatchesCallback.js

@@ -0,0 +1,304 @@
+import { colord } from '@jbrowse/core/util/colord';
+import { DELETION_TYPE, HARDCLIP_TYPE, INSERTION_TYPE, INTERBASE_MASK, MISMATCH_REV_MAP, MISMATCH_TYPE, SKIP_TYPE, SOFTCLIP_TYPE, } from "../../shared/forEachMismatchTypes.js";
+import { measureTextSmallNumber } from "../util.js";
+const alphaColorCache = new Map();
+function applyQualAlpha(baseColor, qual) {
+    const key = `${baseColor},${qual}`;
+    const hit = alphaColorCache.get(key);
+    if (hit) {
+        return hit;
+    }
+    const result = qual >= 0
+        ? colord(baseColor)
+            .alpha(Math.min(1, qual / 50))
+            .toHslString()
+        : baseColor;
+    alphaColorCache.set(key, result);
+    return result;
+}
+export function renderMismatchesCallback({ ctx, feat, bpPerPx, regions, minSubfeatureWidth, largeInsertionIndicatorScale, mismatchAlpha, charWidth, charHeight, colorMap, colorContrastMap, hideSmallIndels, hideMismatches, hideLargeIndels, canvasWidth, drawSNPsMuted, checkRef, drawIndels = true, }) {
+    const items = [];
+    const coords = [];
+    const { heightPx, topPx, feature } = feat;
+    const bottomPx = topPx + heightPx;
+    const featStart = feature.get('start');
+    const region = checkRef
+        ? (regions.find(r => {
+            const rn = feature.get('refName');
+            const end = feature.get('end');
+            return r.refName === rn && r.start <= featStart && end <= r.end;
+        }) ?? regions[0])
+        : regions[0];
+    const invBpPerPx = 1 / bpPerPx;
+    const pxPerBp = Math.min(invBpPerPx, 2);
+    const canRenderText = heightPx >= charHeight - 2;
+    const useAlpha = mismatchAlpha === true;
+    const regionStart = region.start;
+    const regionEnd = region.end;
+    const reversed = region.reversed;
+    const extraHorizontallyFlippedOffset = reversed ? invBpPerPx + 1 : -1;
+    const secondPassItems = [];
+    let mismatchDrawn = 0;
+    let mismatchSkipped = 0;
+    let deletionDrawn = 0;
+    let deletionSkipped = 0;
+    let lastMismatchX = Number.NEGATIVE_INFINITY;
+    const featureWithIterator = feature;
+    const mismatchHandler = (type, start, length, base, qualVal, _altbase, cliplen) => {
+        const mismatchStart = featStart + start;
+        const mismatchEnd = mismatchStart + length;
+        if ((1 << type) & INTERBASE_MASK) {
+            if (mismatchStart >= regionStart && mismatchStart < regionEnd) {
+                secondPassItems.push({
+                    type,
+                    start,
+                    base,
+                    cliplen: cliplen,
+                });
+            }
+            return;
+        }
+        if (mismatchEnd <= regionStart || mismatchStart >= regionEnd) {
+            return;
+        }
+        const leftPx = reversed
+            ? (regionEnd - mismatchEnd) * invBpPerPx
+            : (mismatchStart - regionStart) * invBpPerPx;
+        const rightPx = reversed
+            ? (regionEnd - mismatchStart) * invBpPerPx
+            : (mismatchEnd - regionStart) * invBpPerPx;
+        if (rightPx < 0 || leftPx > canvasWidth) {
+            return;
+        }
+        const widthPx = Math.max(minSubfeatureWidth, rightPx - leftPx);
+        if (type === MISMATCH_TYPE) {
+            if (!hideMismatches) {
+                if (rightPx - leftPx >= 0.2) {
+                    items.push({
+                        type: 'mismatch',
+                        base,
+                        start: mismatchStart,
+                    });
+                    coords.push(leftPx, topPx, rightPx, bottomPx);
+                }
+                if (!drawSNPsMuted) {
+                    const baseColor = colorMap[base] || '#888';
+                    const c = useAlpha && qualVal ? applyQualAlpha(baseColor, qualVal) : baseColor;
+                    const l = Math.round(leftPx);
+                    const w = widthPx;
+                    if (l === lastMismatchX) {
+                        mismatchSkipped++;
+                    }
+                    else if (l + w > 0 && l < canvasWidth) {
+                        ctx.fillStyle = c;
+                        ctx.fillRect(l, topPx, w, heightPx);
+                        mismatchDrawn++;
+                        lastMismatchX = l;
+                    }
+                }
+                if (widthPx >= charWidth && canRenderText) {
+                    const contrastColor = drawSNPsMuted
+                        ? 'black'
+                        : colorContrastMap[base] || 'black';
+                    const textColor = useAlpha && qualVal
+                        ? applyQualAlpha(contrastColor, qualVal)
+                        : contrastColor;
+                    const x = leftPx + (widthPx - charWidth) / 2 + 1;
+                    if (x > 0 && x < canvasWidth && textColor) {
+                        ctx.fillStyle = textColor;
+                        ctx.fillText(base, x, bottomPx);
+                    }
+                }
+            }
+        }
+        else if (type === DELETION_TYPE && drawIndels) {
+            const shouldHide = (length < 10 && hideSmallIndels) || (length >= 10 && hideLargeIndels);
+            if (!shouldHide) {
+                const w = Math.abs(leftPx - rightPx);
+                if (w >= 0.3 && leftPx + w > 0 && leftPx < canvasWidth) {
+                    ctx.fillStyle = colorMap.deletion;
+                    ctx.fillRect(leftPx, topPx, w, heightPx);
+                    deletionDrawn++;
+                    items.push({
+                        type: 'deletion',
+                        length,
+                        start: mismatchStart,
+                    });
+                    coords.push(leftPx, topPx, rightPx, bottomPx);
+                }
+                else if (w < 0.3) {
+                    deletionSkipped++;
+                }
+                const txt = String(length);
+                const rwidth = measureTextSmallNumber(length, 10);
+                if (widthPx >= rwidth && canRenderText) {
+                    const x = (leftPx + rightPx) / 2 - rwidth / 2;
+                    if (x > 0 && x < canvasWidth) {
+                        ctx.fillStyle = colorContrastMap.deletion;
+                        ctx.fillText(txt, x, bottomPx);
+                    }
+                }
+            }
+        }
+        else if (type === SKIP_TYPE) {
+            const w = Math.max(widthPx, 1.5);
+            if (leftPx + w > 0 && leftPx < canvasWidth) {
+                ctx.fillStyle = colorMap.skip;
+                ctx.fillRect(leftPx, topPx + heightPx / 2 - 1, w, 1);
+            }
+        }
+    };
+    if ('forEachMismatch' in feature) {
+        featureWithIterator.forEachMismatch(mismatchHandler);
+    }
+    else {
+        const mismatches = feature.get('mismatches');
+        if (mismatches) {
+            for (let i = 0, l = mismatches.length; i < l; i++) {
+                const m = mismatches[i];
+                let base;
+                let cliplen;
+                if (m.type === 'mismatch') {
+                    base = m.base;
+                }
+                else if (m.type === 'insertion') {
+                    base = m.insertedBases ?? '';
+                    cliplen = m.insertlen;
+                }
+                else if (m.type === 'softclip' || m.type === 'hardclip') {
+                    base = '';
+                    cliplen = m.cliplen;
+                }
+                else {
+                    base = '';
+                }
+                mismatchHandler(MISMATCH_REV_MAP[m.type], m.start, m.length, base, m.type === 'mismatch' ? m.qual : undefined, m.type === 'mismatch' ? m.altbase?.charCodeAt(0) : undefined, cliplen);
+            }
+        }
+    }
+    for (const item of secondPassItems) {
+        const { type, start, base, cliplen } = item;
+        const mstart = featStart + start;
+        const leftPx = reversed
+            ? (regionEnd - mstart - 1) * invBpPerPx
+            : (mstart - regionStart) * invBpPerPx;
+        const pos = leftPx + extraHorizontallyFlippedOffset;
+        if (pos < -20 || pos > canvasWidth + 20) {
+            continue;
+        }
+        if (type === INSERTION_TYPE && drawIndels) {
+            const len = cliplen;
+            const insW = Math.max(0, Math.min(1.2, invBpPerPx));
+            if (len < 10) {
+                if (!hideSmallIndels) {
+                    const c = colorMap.insertion;
+                    if (pos + insW > 0 && pos < canvasWidth) {
+                        ctx.fillStyle = c;
+                        ctx.fillRect(pos, topPx, insW, heightPx);
+                    }
+                    if (invBpPerPx >= charWidth && canRenderText) {
+                        const l = Math.round(pos - insW);
+                        const insW3 = insW * 3;
+                        if (l + insW3 > 0 && l < canvasWidth) {
+                            ctx.fillRect(l, topPx, insW3, 1);
+                            ctx.fillRect(l, bottomPx - 1, insW3, 1);
+                        }
+                        const x = pos + 3;
+                        if (x > 0 && x < canvasWidth) {
+                            ctx.fillText(`(${len})`, x, bottomPx);
+                        }
+                    }
+                    if (bpPerPx < 3) {
+                        items.push({
+                            type: 'insertion',
+                            length: len,
+                            ...(base ? { sequence: base } : {}),
+                            start: mstart,
+                        });
+                        coords.push(leftPx - 2, topPx, leftPx + insW + 2, bottomPx);
+                    }
+                }
+            }
+            else if (!hideLargeIndels) {
+                items.push({
+                    type: 'insertion',
+                    length: len,
+                    ...(base ? { sequence: base } : {}),
+                    start: mstart,
+                });
+                const txt = `${len}`;
+                if (bpPerPx > largeInsertionIndicatorScale) {
+                    coords.push(leftPx - 1, topPx, leftPx + 1, bottomPx);
+                    const l = leftPx - 1;
+                    const w = 2;
+                    if (l + w > 0 && l < canvasWidth) {
+                        ctx.fillStyle = colorMap.insertion;
+                        ctx.fillRect(l, topPx, w, heightPx);
+                    }
+                }
+                else if (heightPx > charHeight) {
+                    const rwidth = measureTextSmallNumber(len);
+                    const padding = 5;
+                    coords.push(leftPx - rwidth / 2 - padding, topPx, leftPx + rwidth / 2 + padding, bottomPx);
+                    const l = leftPx - rwidth / 2 - padding;
+                    const w = rwidth + 2 * padding;
+                    if (l + w > 0 && l < canvasWidth) {
+                        ctx.fillStyle = colorMap.insertion;
+                        ctx.fillRect(l, topPx, w, heightPx);
+                    }
+                    const x = leftPx - rwidth / 2;
+                    if (x > 0 && x < canvasWidth) {
+                        ctx.fillStyle = colorContrastMap.insertion;
+                        ctx.fillText(txt, x, bottomPx);
+                    }
+                }
+                else {
+                    const padding = 2;
+                    coords.push(leftPx - padding, topPx, leftPx + padding, bottomPx);
+                    const l = leftPx - padding;
+                    const w = 2 * padding;
+                    if (l + w > 0 && l < canvasWidth) {
+                        ctx.fillStyle = colorMap.insertion;
+                        ctx.fillRect(l, topPx, w, heightPx);
+                    }
+                }
+            }
+        }
+        else if ((type === SOFTCLIP_TYPE || type === HARDCLIP_TYPE) &&
+            !hideLargeIndels) {
+            const typeName = type === SOFTCLIP_TYPE ? 'softclip' : 'hardclip';
+            const c = colorMap[typeName];
+            const clipW = Math.max(minSubfeatureWidth, pxPerBp);
+            if (pos + clipW > 0 && pos < canvasWidth) {
+                ctx.fillStyle = c;
+                ctx.fillRect(pos, topPx, clipW, heightPx);
+            }
+            items.push({ type: typeName, length: cliplen, start: mstart });
+            coords.push(pos - clipW, topPx, pos + clipW * 2, bottomPx);
+            if (invBpPerPx >= charWidth && canRenderText) {
+                const l = pos - clipW;
+                const clipW3 = clipW * 3;
+                if (l + clipW3 > 0 && l < canvasWidth) {
+                    ctx.fillStyle = c;
+                    ctx.fillRect(l, topPx, clipW3, 1);
+                    ctx.fillRect(l, bottomPx - 1, clipW3, 1);
+                }
+                const x = pos + 3;
+                if (x > 0 && x < canvasWidth) {
+                    ctx.fillStyle = c;
+                    ctx.fillText(`(${base})`, x, bottomPx);
+                }
+            }
+        }
+    }
+    return {
+        coords,
+        items,
+        stats: {
+            mismatchDrawn,
+            mismatchSkipped,
+            deletionDrawn,
+            deletionSkipped,
+        },
+    };
+}

package/esm/PileupRenderer/renderers/renderModifications.d.ts

@@ -1,14 +1,19 @@
-import type { FlatbushItem, ProcessedRenderArgs } from '../types';
-import type { LayoutFeature } from '../util';
+import type { ColorBy, ModificationTypeWithColor } from '../../shared/types.ts';
+import type { FlatbushItem } from '../types.ts';
+import type { LayoutFeature } from '../util.ts';
 import type { Region } from '@jbrowse/core/util';
-export declare function renderModifications({ ctx, feat, region, bpPerPx, renderArgs, canvasWidth, cigarOps, }: {
+export interface RenderModificationsArgs {
+    colorBy?: ColorBy;
+    visibleModifications?: Record<string, ModificationTypeWithColor>;
+    regionSequence?: string;
+}
+export declare function renderModifications({ ctx, feat, region, bpPerPx, renderArgs, cigarOps, }: {
     ctx: CanvasRenderingContext2D;
     feat: LayoutFeature;
     region: Region;
     bpPerPx: number;
-    renderArgs: ProcessedRenderArgs;
-    canvasWidth: number;
-    cigarOps: string[];
+    renderArgs: RenderModificationsArgs;
+    cigarOps: ArrayLike<number>;
 }): {
     coords: number[];
     items: FlatbushItem[];

package/esm/PileupRenderer/renderers/renderModifications.js

@@ -1,14 +1,13 @@
-import { bpSpanPx, max, sum } from '@jbrowse/core/util';
-import { getNextRefPos } from '../../MismatchParser';
-import { getModPositions } from '../../ModificationParser/getModPositions';
-import { getModProbabilities } from '../../ModificationParser/getModProbabilities';
-import { getMaxProbModAtEachPosition } from '../../shared/getMaximumModificationAtEachPosition';
-import { getModificationName } from '../../shared/modificationData';
-import { alphaColor } from '../../shared/util';
-import { getTagAlt } from '../../util';
-import { fillRect } from '../util';
-export function renderModifications({ ctx, feat, region, bpPerPx, renderArgs, canvasWidth, cigarOps, }) {
-    var _a, _b, _c, _d, _e;
+import { colord } from '@jbrowse/core/util/colord';
+import { getNextRefPos } from "../../MismatchParser/index.js";
+import { getModPositions } from "../../ModificationParser/getModPositions.js";
+import { getModProbabilities } from "../../ModificationParser/getModProbabilities.js";
+import { getMaxProbModAtEachPosition } from "../../shared/getMaximumModificationAtEachPosition.js";
+import { getModificationName } from "../../shared/modificationData.js";
+import { alphaColor, buildMismatchMap } from "../../shared/util.js";
+import { getTagAlt } from "../../util.js";
+const BLUE_COLORD = colord('blue');
+export function renderModifications({ ctx, feat, region, bpPerPx, renderArgs, cigarOps, }) {
     const items = [];
     const coords = [];
     const { feature, topPx, heightPx } = feat;
@@ -18,10 +17,12 @@ export function renderModifications({ ctx, feat, region, bpPerPx, renderArgs, ca
         return { coords, items };
     }
     const start = feature.get('start');
-    const isolatedModification = (_a = colorBy === null || colorBy === void 0 ? void 0 : colorBy.modifications) === null || _a === void 0 ? void 0 : _a.isolatedModification;
-    const twoColor = (_b = colorBy === null || colorBy === void 0 ? void 0 : colorBy.modifications) === null || _b === void 0 ? void 0 : _b.twoColor;
-    const modificationThreshold = (_d = (_c = colorBy === null || colorBy === void 0 ? void 0 : colorBy.modifications) === null || _c === void 0 ? void 0 : _c.threshold) !== null && _d !== void 0 ? _d : 10;
+    const mismatchMap = buildMismatchMap(feature, start);
+    const isolatedModification = colorBy?.modifications?.isolatedModification;
+    const twoColor = colorBy?.modifications?.twoColor;
+    const modificationThreshold = colorBy?.modifications?.threshold ?? 10;
     const thresholdFraction = modificationThreshold / 100;
+    const bottomPx = topPx + heightPx;
     const fstrand = feature.get('strand');
     const mm = getTagAlt(feature, 'MM', 'Mm') || '';
     const modifications = getModPositions(mm, seq, fstrand);
@@ -30,7 +31,7 @@ export function renderModifications({ ctx, feat, region, bpPerPx, renderArgs, ca
     let probIndex = 0;
     for (const { type, base, strand, positions } of modifications) {
         for (const { ref, idx } of getNextRefPos(cigarOps, positions)) {
-            const prob = (probabilities === null || probabilities === void 0 ? void 0 : probabilities[probIndex + (fstrand === -1 ? positions.length - 1 - idx : idx)]) || 0;
+            const prob = probabilities?.[probIndex + (fstrand === -1 ? positions.length - 1 - idx : idx)] || 0;
             if (!modsByPosition.has(ref)) {
                 modsByPosition.set(ref, []);
             }
@@ -38,43 +39,60 @@ export function renderModifications({ ctx, feat, region, bpPerPx, renderArgs, ca
         }
         probIndex += positions.length;
     }
-    (_e = getMaxProbModAtEachPosition(feature, cigarOps)) === null || _e === void 0 ? void 0 : _e.forEach(({ allProbs, prob, type }, pos) => {
+    const regionStart = region.start;
+    const regionEnd = region.end;
+    const reversed = region.reversed;
+    const invBpPerPx = 1 / bpPerPx;
+    getMaxProbModAtEachPosition(feature, cigarOps)?.forEach(({ allProbs, prob, type }, pos) => {
         const r = start + pos;
-        const [leftPx, rightPx] = bpSpanPx(r, r + 1, region, bpPerPx);
-        const mod = visibleModifications[type];
-        if (!mod) {
-            console.warn(`${type} not known yet`);
+        if (r < regionStart || r >= regionEnd) {
             return;
         }
-        if (isolatedModification && mod.type !== isolatedModification) {
+        const mod = visibleModifications[type];
+        if (!mod || (isolatedModification && mod.type !== isolatedModification)) {
             return;
         }
         if (prob < thresholdFraction) {
             return;
         }
+        const leftPx = reversed
+            ? (regionEnd - r - 1) * invBpPerPx
+            : (r - regionStart) * invBpPerPx;
+        const rightPx = reversed
+            ? (regionEnd - r) * invBpPerPx
+            : (r + 1 - regionStart) * invBpPerPx;
+        const widthPx = rightPx - leftPx + 0.5;
         const col = mod.color || 'black';
-        const s = 1 - sum(allProbs);
-        if (twoColor && s > max(allProbs)) {
-            const c = alphaColor('blue', s);
-            const w = rightPx - leftPx + 0.5;
-            fillRect(ctx, leftPx, topPx, w, heightPx, canvasWidth, c);
+        let sumProbs = 0;
+        let maxProb = 0;
+        for (let i = 0, l = allProbs.length; i < l; i++) {
+            const p = allProbs[i];
+            sumProbs += p;
+            if (p > maxProb) {
+                maxProb = p;
+            }
         }
-        else {
-            const c = alphaColor(col, prob);
-            const w = rightPx - leftPx + 0.5;
-            fillRect(ctx, leftPx, topPx, w, heightPx, canvasWidth, c);
+        const s = 1 - sumProbs;
+        ctx.fillStyle =
+            twoColor && s > maxProb
+                ? BLUE_COLORD.alpha(s).toHslString()
+                : alphaColor(col, prob);
+        ctx.fillRect(leftPx, topPx, widthPx, heightPx);
+        const modsAtPos = modsByPosition.get(pos);
+        if (rightPx - leftPx >= 0.2 && modsAtPos) {
+            const mismatchBase = mismatchMap.get(r);
+            items.push({
+                type: 'modification',
+                info: modsAtPos
+                    .map(m => `${m.base}${m.strand}${m.type} ${getModificationName(m.type)} (${(m.prob * 100).toFixed(1)}%)`)
+                    .join('\n'),
+                modType: type,
+                probability: prob,
+                start: r,
+                mismatch: mismatchBase,
+            });
+            coords.push(leftPx, topPx, rightPx, bottomPx);
         }
-        const modsAtPos = modsByPosition.get(pos) || [];
-        const strandInfo = modsAtPos
-            .map(m => `${m.base}${m.strand}${m.type} ${getModificationName(m.type)} (${(m.prob * 100).toFixed(1)}%)`)
-            .join('<br/>');
-        items.push({
-            type: 'modification',
-            seq: strandInfo || mod.base,
-            modType: type,
-            probability: prob,
-        });
-        coords.push(leftPx, topPx, rightPx, topPx + heightPx);
         pos++;
     });
     return { coords, items };

package/esm/PileupRenderer/renderers/renderPerBaseLettering.d.ts

@@ -1,4 +1,4 @@
-import type { LayoutFeature } from '../util';
+import type { LayoutFeature } from '../util.ts';
 import type { Region } from '@jbrowse/core/util';
 export declare function renderPerBaseLettering({ ctx, feat, region, bpPerPx, colorMap, colorContrastMap, charWidth, charHeight, canvasWidth, cigarOps, }: {
     ctx: CanvasRenderingContext2D;
@@ -10,5 +10,5 @@ export declare function renderPerBaseLettering({ ctx, feat, region, bpPerPx, col
     charWidth: number;
     charHeight: number;
     canvasWidth: number;
-    cigarOps: string[];
+    cigarOps: ArrayLike<number>;
 }): void;

package/esm/PileupRenderer/renderers/renderPerBaseLettering.js

@@ -1,35 +1,55 @@
-import { bpSpanPx } from '@jbrowse/core/util';
-import { fillRect } from '../util';
+import { CIGAR_D, CIGAR_EQ, CIGAR_I, CIGAR_M, CIGAR_N, CIGAR_S, CIGAR_X, } from "./cigarUtil.js";
 export function renderPerBaseLettering({ ctx, feat, region, bpPerPx, colorMap, colorContrastMap, charWidth, charHeight, canvasWidth, cigarOps, }) {
     const heightLim = charHeight - 2;
     const { feature, topPx, heightPx } = feat;
     const seq = feature.get('seq');
-    const w = 1 / bpPerPx;
+    const invBpPerPx = 1 / bpPerPx;
+    const w = invBpPerPx;
     const start = feature.get('start');
     let soffset = 0;
     let roffset = 0;
     if (!seq) {
         return;
     }
-    for (let i = 0; i < cigarOps.length; i += 2) {
-        const len = +cigarOps[i];
-        const op = cigarOps[i + 1];
-        if (op === 'S' || op === 'I') {
+    const regionStart = region.start;
+    const regionEnd = region.end;
+    const reversed = region.reversed;
+    for (let i = 0, l = cigarOps.length; i < l; i++) {
+        const packed = cigarOps[i];
+        const len = packed >> 4;
+        const op = packed & 0xf;
+        if (op === CIGAR_S || op === CIGAR_I) {
             soffset += len;
         }
-        else if (op === 'D' || op === 'N') {
+        else if (op === CIGAR_D || op === CIGAR_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);
-                const c = colorMap[letter];
-                fillRect(ctx, leftPx, topPx, w + 0.5, heightPx, canvasWidth, c);
-                if (w >= charWidth && heightPx >= heightLim) {
-                    ctx.fillStyle = colorContrastMap[letter];
-                    ctx.fillText(letter, leftPx + (w - charWidth) / 2 + 1, topPx + heightPx);
+        else if (op === CIGAR_M || op === CIGAR_X || op === CIGAR_EQ) {
+            const opStart = start + roffset;
+            const opEnd = opStart + len;
+            if (opStart >= regionEnd) {
+                break;
+            }
+            if (opEnd > regionStart) {
+                const visStart = Math.max(0, regionStart - opStart);
+                const visEnd = Math.min(len, regionEnd - opStart);
+                for (let m = visStart; m < visEnd; m++) {
+                    const letter = seq[soffset + m];
+                    const r = opStart + m;
+                    const leftPx = reversed
+                        ? (regionEnd - r - 1) * invBpPerPx
+                        : (r - regionStart) * invBpPerPx;
+                    ctx.fillStyle = colorMap[letter];
+                    ctx.fillRect(leftPx, topPx, w + 0.5, heightPx);
+                    if (w >= charWidth && heightPx >= heightLim) {
+                        const x = leftPx + (w - charWidth) / 2 + 1;
+                        const y = topPx + heightPx;
+                        const color = colorContrastMap[letter];
+                        if (x >= 0 && x <= canvasWidth && color) {
+                            ctx.fillStyle = color;
+                            ctx.fillText(letter, x, y);
+                        }
+                    }
                 }
             }
             soffset += len;

package/esm/PileupRenderer/renderers/renderPerBaseQuality.d.ts

@@ -1,10 +1,9 @@
-import type { LayoutFeature } from '../util';
+import type { LayoutFeature } from '../util.ts';
 import type { Region } from '@jbrowse/core/util';
-export declare function renderPerBaseQuality({ ctx, feat, region, bpPerPx, canvasWidth, cigarOps, }: {
+export declare function renderPerBaseQuality({ ctx, feat, region, bpPerPx, cigarOps, }: {
     ctx: CanvasRenderingContext2D;
     feat: LayoutFeature;
     region: Region;
     bpPerPx: number;
-    canvasWidth: number;
-    cigarOps: string[];
+    cigarOps: ArrayLike<number>;
 }): void;

package/esm/PileupRenderer/renderers/renderPerBaseQuality.js

@@ -1,29 +1,45 @@
-import { bpSpanPx } from '@jbrowse/core/util';
-import { fillRect } from '../util';
-export function renderPerBaseQuality({ ctx, feat, region, bpPerPx, canvasWidth, cigarOps, }) {
+import { CIGAR_D, CIGAR_EQ, CIGAR_I, CIGAR_M, CIGAR_N, CIGAR_S, CIGAR_X, } from "./cigarUtil.js";
+const qualityColors = Array.from({ length: 256 }, (_, score) => `hsl(${score === 255 ? 150 : score * 1.5},55%,50%)`);
+export function renderPerBaseQuality({ ctx, feat, region, bpPerPx, cigarOps, }) {
     const { feature, topPx, heightPx } = feat;
     const qual = feature.get('qual') || '';
     const scores = qual.split(' ').map(val => +val);
-    const w = 1 / bpPerPx;
+    const invBpPerPx = 1 / bpPerPx;
+    const w = invBpPerPx;
     const start = feature.get('start');
     let soffset = 0;
     let roffset = 0;
-    for (let i = 0; i < cigarOps.length; i += 2) {
-        const len = +cigarOps[i];
-        const op = cigarOps[i + 1];
-        if (op === 'S' || op === 'I') {
+    const regionStart = region.start;
+    const regionEnd = region.end;
+    const reversed = region.reversed;
+    for (let i = 0, l = cigarOps.length; i < l; i++) {
+        const packed = cigarOps[i];
+        const len = packed >> 4;
+        const opIdx = packed & 0xf;
+        if (opIdx === CIGAR_S || opIdx === CIGAR_I) {
             soffset += len;
         }
-        else if (op === 'D' || op === 'N') {
+        else if (opIdx === CIGAR_D || opIdx === CIGAR_N) {
             roffset += len;
         }
-        else if (op === 'M' || op === 'X' || op === '=') {
-            for (let m = 0; m < len; m++) {
-                const score = scores[soffset + m];
-                const start0 = start + roffset + m;
-                const leftPx = bpSpanPx(start0, start0 + 1, region, bpPerPx)[0];
-                const c = `hsl(${score === 255 ? 150 : score * 1.5},55%,50%)`;
-                fillRect(ctx, leftPx, topPx, w + 0.5, heightPx, canvasWidth, c);
+        else if (opIdx === CIGAR_M || opIdx === CIGAR_X || opIdx === CIGAR_EQ) {
+            const opStart = start + roffset;
+            const opEnd = opStart + len;
+            if (opStart >= regionEnd) {
+                break;
+            }
+            if (opEnd > regionStart) {
+                const visStart = Math.max(0, regionStart - opStart);
+                const visEnd = Math.min(len, regionEnd - opStart);
+                for (let m = visStart; m < visEnd; m++) {
+                    const score = scores[soffset + m];
+                    const refPos = opStart + m;
+                    const leftPx = reversed
+                        ? (regionEnd - refPos - 1) * invBpPerPx
+                        : (refPos - regionStart) * invBpPerPx;
+                    ctx.fillStyle = qualityColors[score] || qualityColors[0];
+                    ctx.fillRect(leftPx, topPx, w + 0.5, heightPx);
+                }
             }
             soffset += len;
             roffset += len;

package/esm/PileupRenderer/renderers/renderSoftClipping.d.ts

@@ -1,5 +1,5 @@
-import type { ProcessedRenderArgs } from '../types';
-import type { LayoutFeature } from '../util';
+import type { ProcessedRenderArgs } from '../types.ts';
+import type { LayoutFeature } from '../util.ts';
 import type { AnyConfigurationModel } from '@jbrowse/core/configuration';
 import type { Theme } from '@mui/material';
 export declare function renderSoftClipping({ ctx, feat, renderArgs, config, theme, colorMap, canvasWidth, }: {