@jbrowse/plugin-alignments 3.6.5 → 4.0.0

package/esm/PileupRenderer/renderers/renderAlignmentShape.js

@@ -0,0 +1,165 @@
+import { CIGAR_N, CIGAR_REF_CONSUMING_MASK } from "./cigarUtil.js";
+import { CHEVRON_WIDTH } from "../../shared/util.js";
+function drawForwardChevron(ctx, leftPx, rightPx, topPx, heightPx, midY) {
+    ctx.beginPath();
+    ctx.moveTo(leftPx, topPx);
+    ctx.lineTo(leftPx, topPx + heightPx);
+    ctx.lineTo(rightPx, topPx + heightPx);
+    ctx.lineTo(rightPx + CHEVRON_WIDTH, midY);
+    ctx.lineTo(rightPx, topPx);
+    ctx.closePath();
+    ctx.fill();
+}
+function drawReverseChevron(ctx, leftPx, rightPx, topPx, heightPx, midY) {
+    ctx.beginPath();
+    ctx.moveTo(leftPx - CHEVRON_WIDTH, midY);
+    ctx.lineTo(leftPx, topPx + heightPx);
+    ctx.lineTo(rightPx, topPx + heightPx);
+    ctx.lineTo(rightPx, topPx);
+    ctx.lineTo(leftPx, topPx);
+    ctx.closePath();
+    ctx.fill();
+}
+export function renderAlignmentShape({ ctx, feat, renderArgs, canvasWidth, color, cigarOps, }) {
+    const { regions, bpPerPx } = renderArgs;
+    const { heightPx, topPx, feature } = feat;
+    const region = regions[0];
+    const regionStart = region.start;
+    const regionEnd = region.end;
+    const reversed = region.reversed;
+    const invBpPerPx = 1 / bpPerPx;
+    const s = feature.get('start');
+    const e = feature.get('end');
+    const flip = region.reversed ? -1 : 1;
+    const strand = feature.get('strand') * flip;
+    const renderChevrons = bpPerPx < 10 && heightPx > 5;
+    ctx.fillStyle = color;
+    let hasSkips = false;
+    for (let i = 0, l = cigarOps.length; i < l; i++) {
+        if ((cigarOps[i] & 0xf) === CIGAR_N) {
+            hasSkips = true;
+            break;
+        }
+    }
+    if (hasSkips) {
+        const midY = topPx + heightPx / 2;
+        if (strand === 1) {
+            let drawLen = 0;
+            let drawStart = s;
+            const opsLen = cigarOps.length;
+            for (let i = 0; i < opsLen; i++) {
+                const packed = cigarOps[i];
+                const opLen = packed >> 4;
+                const op = packed & 0xf;
+                if ((1 << op) & CIGAR_REF_CONSUMING_MASK) {
+                    drawLen += opLen;
+                }
+                else if (op === CIGAR_N) {
+                    if (drawLen) {
+                        const drawEnd = drawStart + drawLen;
+                        const leftPx = reversed
+                            ? (regionEnd - drawEnd) * invBpPerPx
+                            : (drawStart - regionStart) * invBpPerPx;
+                        const rightPx = reversed
+                            ? (regionEnd - drawStart) * invBpPerPx
+                            : (drawEnd - regionStart) * invBpPerPx;
+                        const w = rightPx - leftPx;
+                        if (leftPx + w > 0 && leftPx < canvasWidth) {
+                            ctx.fillRect(leftPx, topPx, w, heightPx);
+                        }
+                    }
+                    drawStart += drawLen + opLen;
+                    drawLen = 0;
+                }
+            }
+            if (drawLen) {
+                const drawEnd = drawStart + drawLen;
+                const leftPx = reversed
+                    ? (regionEnd - drawEnd) * invBpPerPx
+                    : (drawStart - regionStart) * invBpPerPx;
+                const rightPx = reversed
+                    ? (regionEnd - drawStart) * invBpPerPx
+                    : (drawEnd - regionStart) * invBpPerPx;
+                if (renderChevrons) {
+                    drawForwardChevron(ctx, leftPx, rightPx, topPx, heightPx, midY);
+                }
+                else {
+                    const w = rightPx - leftPx;
+                    if (leftPx + w > 0 && leftPx < canvasWidth) {
+                        ctx.fillRect(leftPx, topPx, w, heightPx);
+                    }
+                }
+            }
+        }
+        else if (strand === -1) {
+            let drawLen = 0;
+            let drawStart = e;
+            for (let i = cigarOps.length - 1; i >= 0; i--) {
+                const packed = cigarOps[i];
+                const opLen = packed >> 4;
+                const op = packed & 0xf;
+                if ((1 << op) & CIGAR_REF_CONSUMING_MASK) {
+                    drawLen += opLen;
+                }
+                else if (op === CIGAR_N) {
+                    if (drawLen) {
+                        const drawBegin = drawStart - drawLen;
+                        const leftPx = reversed
+                            ? (regionEnd - drawStart) * invBpPerPx
+                            : (drawBegin - regionStart) * invBpPerPx;
+                        const rightPx = reversed
+                            ? (regionEnd - drawBegin) * invBpPerPx
+                            : (drawStart - regionStart) * invBpPerPx;
+                        const w = rightPx - leftPx;
+                        if (leftPx + w > 0 && leftPx < canvasWidth) {
+                            ctx.fillRect(leftPx, topPx, w, heightPx);
+                        }
+                    }
+                    drawStart -= drawLen + opLen;
+                    drawLen = 0;
+                }
+            }
+            if (drawLen) {
+                const drawBegin = drawStart - drawLen;
+                const leftPx = reversed
+                    ? (regionEnd - drawStart) * invBpPerPx
+                    : (drawBegin - regionStart) * invBpPerPx;
+                const rightPx = reversed
+                    ? (regionEnd - drawBegin) * invBpPerPx
+                    : (drawStart - regionStart) * invBpPerPx;
+                if (renderChevrons) {
+                    drawReverseChevron(ctx, leftPx, rightPx, topPx, heightPx, midY);
+                }
+                else {
+                    const w = rightPx - leftPx;
+                    if (leftPx + w > 0 && leftPx < canvasWidth) {
+                        ctx.fillRect(leftPx, topPx, w, heightPx);
+                    }
+                }
+            }
+        }
+    }
+    else {
+        const leftPx = reversed
+            ? (regionEnd - e) * invBpPerPx
+            : (s - regionStart) * invBpPerPx;
+        const rightPx = reversed
+            ? (regionEnd - s) * invBpPerPx
+            : (e - regionStart) * invBpPerPx;
+        const midY = topPx + heightPx / 2;
+        if (renderChevrons) {
+            if (strand === -1) {
+                drawReverseChevron(ctx, leftPx, rightPx, topPx, heightPx, midY);
+            }
+            else {
+                drawForwardChevron(ctx, leftPx, rightPx, topPx, heightPx, midY);
+            }
+        }
+        else {
+            const w = rightPx - leftPx;
+            if (leftPx + w > 0 && leftPx < canvasWidth) {
+                ctx.fillRect(leftPx, topPx, w, heightPx);
+            }
+        }
+    }
+}

package/esm/PileupRenderer/{renderMethylation.d.ts → renderers/renderMethylation.d.ts}

@@ -1,12 +1,14 @@
-import type { ProcessedRenderArgs } from './types';
-import type { LayoutFeature } from './util';
+import type { FlatbushItem, ProcessedRenderArgs } from '../types.ts';
+import type { LayoutFeature } from '../util.ts';
 import type { Region } from '@jbrowse/core/util';
-export declare function renderMethylation({ ctx, feat, region, bpPerPx, renderArgs, canvasWidth, cigarOps, }: {
+export declare function renderMethylation({ ctx, feat, region, bpPerPx, renderArgs, cigarOps, }: {
     ctx: CanvasRenderingContext2D;
     feat: LayoutFeature;
     region: Region;
     bpPerPx: number;
     renderArgs: ProcessedRenderArgs;
-    canvasWidth: number;
-    cigarOps: string[];
-}): void;
+    cigarOps: ArrayLike<number>;
+}): {
+    items: FlatbushItem[];
+    coords: number[];
+};

package/esm/PileupRenderer/renderers/renderMethylation.js

@@ -0,0 +1,97 @@
+import { colord } from '@jbrowse/core/util/colord';
+import { getMethBins } from "../../ModificationParser/getMethBins.js";
+import { buildMismatchMap } from "../../shared/util.js";
+const RED_COLORD = colord('red');
+const BLUE_COLORD = colord('blue');
+const PINK_COLORD = colord('pink');
+const PURPLE_COLORD = colord('purple');
+export function renderMethylation({ ctx, feat, region, bpPerPx, renderArgs, cigarOps, }) {
+    const items = [];
+    const coords = [];
+    const { regionSequence } = renderArgs;
+    const { feature, topPx, heightPx } = feat;
+    const bottomPx = topPx + heightPx;
+    if (!regionSequence) {
+        throw new Error('region sequence required for methylation');
+    }
+    const seq = feature.get('seq');
+    if (!seq) {
+        return { items, coords };
+    }
+    const fstart = feature.get('start');
+    const fend = feature.get('end');
+    const { methBins, methProbs, hydroxyMethBins, hydroxyMethProbs } = getMethBins(feature, cigarOps);
+    const mismatchMap = buildMismatchMap(feature, fstart);
+    function getColAndProb(k) {
+        if (methBins[k]) {
+            const p = methProbs[k] || 0;
+            return {
+                color: (p > 0.5
+                    ? RED_COLORD.alpha((p - 0.5) * 2)
+                    : BLUE_COLORD.alpha(1 - p * 2)).toHslString(),
+                prob: p,
+                type: 'm (5mC)',
+            };
+        }
+        if (hydroxyMethBins[k]) {
+            const p = hydroxyMethProbs[k] || 0;
+            return {
+                color: (p > 0.5
+                    ? PINK_COLORD.alpha((p - 0.5) * 2)
+                    : PURPLE_COLORD.alpha(1 - p * 2)).toHslString(),
+                prob: p,
+                type: 'h (5hmC)',
+            };
+        }
+        return undefined;
+    }
+    const regionStart = region.start;
+    const regionEnd = region.end;
+    const reversed = region.reversed;
+    const invBpPerPx = 1 / bpPerPx;
+    const r = regionSequence.toLowerCase();
+    function drawBase(start, end, info, label) {
+        const leftPx = reversed
+            ? (regionEnd - end) * invBpPerPx
+            : (start - regionStart) * invBpPerPx;
+        const rightPx = reversed
+            ? (regionEnd - start) * invBpPerPx
+            : (end - regionStart) * invBpPerPx;
+        const w = rightPx - leftPx + 0.5;
+        ctx.fillStyle = info?.color || 'blue';
+        ctx.fillRect(leftPx, topPx, w, heightPx);
+        if (rightPx - leftPx >= 0.2) {
+            const prob = info?.prob ?? 0;
+            const modType = info?.type ?? 'unmethylated';
+            const mismatchBase = mismatchMap.get(start);
+            items.push({
+                type: 'modification',
+                info: `${label} ${modType} (${(prob * 100).toFixed(1)}%)`,
+                modType: 'methylation',
+                probability: prob,
+                start,
+                mismatch: mismatchBase,
+            });
+            coords.push(leftPx, topPx, rightPx, bottomPx);
+        }
+    }
+    const visStart = Math.max(0, regionStart - fstart);
+    const visEnd = Math.min(fend - fstart, regionEnd - fstart);
+    for (let i = visStart; i < visEnd; i++) {
+        const j = i + fstart;
+        const l1 = r[j - regionStart + 1];
+        const l2 = r[j - regionStart + 2];
+        if (l1 === 'c' && l2 === 'g') {
+            const info1 = getColAndProb(i);
+            const info2 = getColAndProb(i + 1);
+            if (bpPerPx > 2) {
+                drawBase(j, j + 2, info1 || info2, 'CpG');
+            }
+            else {
+                drawBase(j, j + 1, info1, 'CpG C');
+                drawBase(j + 1, j + 2, info2, 'CpG G');
+            }
+        }
+    }
+    return { items, coords };
+}

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

@@ -0,0 +1,32 @@
+import type { FlatbushItem } from '../types.ts';
+import type { LayoutFeature } from '../util.ts';
+import type { Region } from '@jbrowse/core/util';
+export declare function renderMismatchesCallback({ ctx, feat, bpPerPx, regions, minSubfeatureWidth, largeInsertionIndicatorScale, mismatchAlpha, charWidth, charHeight, colorMap, colorContrastMap, hideSmallIndels, hideMismatches, hideLargeIndels, canvasWidth, drawSNPsMuted, checkRef, drawIndels, }: {
+    ctx: CanvasRenderingContext2D;
+    feat: LayoutFeature;
+    bpPerPx: number;
+    regions: Region[];
+    colorMap: Record<string, string>;
+    colorContrastMap: Record<string, string>;
+    mismatchAlpha?: boolean;
+    drawIndels?: boolean;
+    drawSNPsMuted?: boolean;
+    minSubfeatureWidth: number;
+    largeInsertionIndicatorScale: number;
+    hideSmallIndels: boolean;
+    hideMismatches?: boolean;
+    hideLargeIndels?: boolean;
+    checkRef?: boolean;
+    charWidth: number;
+    charHeight: number;
+    canvasWidth: number;
+}): {
+    coords: number[];
+    items: FlatbushItem[];
+    stats: {
+        mismatchDrawn: number;
+        mismatchSkipped: number;
+        deletionDrawn: number;
+        deletionSkipped: number;
+    };
+};

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

@@ -0,0 +1,20 @@
+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 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: RenderModificationsArgs;
+    cigarOps: ArrayLike<number>;
+}): {
+    coords: number[];
+    items: FlatbushItem[];
+};