@jbrowse/plugin-alignments 3.7.0 → 4.0.0

package/esm/PileupRenderer/renderers/renderAlignmentShape.js

@@ -1,117 +1,165 @@
-import { bpSpanPx } from '@jbrowse/core/util';
-import { parseCigar } from '../../MismatchParser';
-export function renderAlignmentShape({ ctx, feat, renderArgs, }) {
+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 CIGAR = feature.get('CIGAR');
     const flip = region.reversed ? -1 : 1;
     const strand = feature.get('strand') * flip;
     const renderChevrons = bpPerPx < 10 && heightPx > 5;
-    if (CIGAR === null || CIGAR === void 0 ? void 0 : CIGAR.includes('N')) {
-        const cigarOps = parseCigar(CIGAR);
+    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;
-            for (let i = 0; i < cigarOps.length; i += 2) {
-                const opLen = +cigarOps[i];
-                const op = cigarOps[i + 1];
-                if (op === 'M' || op === 'X' || op === '=' || op === 'D') {
+            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 === 'N') {
-                    if (drawStart !== drawLen) {
-                        const [leftPx, rightPx] = bpSpanPx(drawStart, drawStart + drawLen, region, bpPerPx);
+                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;
-                        ctx.fillRect(leftPx, topPx, w, heightPx);
+                        if (leftPx + w > 0 && leftPx < canvasWidth) {
+                            ctx.fillRect(leftPx, topPx, w, heightPx);
+                        }
                     }
                     drawStart += drawLen + opLen;
                     drawLen = 0;
                 }
             }
-            if (drawStart !== drawLen) {
-                const [leftPx, rightPx] = bpSpanPx(drawStart, drawStart + drawLen, region, bpPerPx);
-                const w = rightPx - leftPx;
+            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) {
-                    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();
+                    drawForwardChevron(ctx, leftPx, rightPx, topPx, heightPx, midY);
                 }
                 else {
-                    ctx.fillRect(leftPx, topPx, w, heightPx);
+                    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 - 2; i >= 0; i -= 2) {
-                const opLen = +cigarOps[i];
-                const op = cigarOps[i + 1];
-                if (op === 'M' || op === 'X' || op === '=' || op === 'D') {
+            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 === 'N') {
-                    if (drawLen !== 0) {
-                        const [leftPx, rightPx] = bpSpanPx(drawStart - drawLen, drawStart, region, bpPerPx);
-                        ctx.fillRect(leftPx, topPx, rightPx - leftPx, heightPx);
+                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 !== 0) {
-                const [leftPx, rightPx] = bpSpanPx(drawStart - drawLen, drawStart, region, bpPerPx);
-                const w = rightPx - leftPx;
+            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) {
-                    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();
+                    drawReverseChevron(ctx, leftPx, rightPx, topPx, heightPx, midY);
                 }
                 else {
-                    ctx.fillRect(leftPx, topPx, w, heightPx);
+                    const w = rightPx - leftPx;
+                    if (leftPx + w > 0 && leftPx < canvasWidth) {
+                        ctx.fillRect(leftPx, topPx, w, heightPx);
+                    }
                 }
             }
         }
     }
     else {
-        const [leftPx, rightPx] = bpSpanPx(s, e, region, bpPerPx);
-        if (bpPerPx < 10 && heightPx > 5) {
+        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) {
-                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();
+                drawReverseChevron(ctx, leftPx, rightPx, topPx, heightPx, midY);
             }
             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();
+                drawForwardChevron(ctx, leftPx, rightPx, topPx, heightPx, midY);
             }
         }
         else {
-            ctx.fillRect(leftPx, topPx, rightPx - leftPx, heightPx);
+            const w = rightPx - leftPx;
+            if (leftPx + w > 0 && leftPx < canvasWidth) {
+                ctx.fillRect(leftPx, topPx, w, heightPx);
+            }
         }
     }
 }

package/esm/PileupRenderer/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

@@ -1,57 +1,97 @@
-import { bpSpanPx } from '@jbrowse/core/util';
 import { colord } from '@jbrowse/core/util/colord';
-import { getMethBins } from '../../ModificationParser/getMethBins';
-import { fillRect } from '../util';
-export function renderMethylation({ ctx, feat, region, bpPerPx, renderArgs, canvasWidth, cigarOps, }) {
+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;
+        return { items, coords };
     }
     const fstart = feature.get('start');
     const fend = feature.get('end');
     const { methBins, methProbs, hydroxyMethBins, hydroxyMethProbs } = getMethBins(feature, cigarOps);
-    function getCol(k) {
+    const mismatchMap = buildMismatchMap(feature, fstart);
+    function getColAndProb(k) {
         if (methBins[k]) {
             const p = methProbs[k] || 0;
-            return (p > 0.5
-                ? colord('red').alpha((p - 0.5) * 2)
-                : colord('blue').alpha(1 - p * 2)).toHslString();
+            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 (p > 0.5
-                ? colord('pink').alpha((p - 0.5) * 2)
-                : colord('purple').alpha(1 - p * 2)).toHslString();
+            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();
-    for (let i = 0; i < fend - fstart; i++) {
+    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 - region.start + 1];
-        const l2 = r[j - region.start + 2];
+        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) {
-                const [leftPx, rightPx] = bpSpanPx(j, j + 2, region, bpPerPx);
-                const w = rightPx - leftPx + 0.5;
-                const c = getCol(i) || getCol(i + 1) || 'blue';
-                fillRect(ctx, leftPx, topPx, w, heightPx, canvasWidth, c);
+                drawBase(j, j + 2, info1 || info2, 'CpG');
             }
             else {
-                const [leftPx, rightPx] = bpSpanPx(j, j + 1, region, bpPerPx);
-                const w = rightPx - leftPx + 0.5;
-                const c = getCol(i) || 'blue';
-                fillRect(ctx, leftPx, topPx, w, heightPx, canvasWidth, c);
-                const [leftPx2, rightPx2] = bpSpanPx(j + 1, j + 2, region, bpPerPx);
-                const w2 = rightPx2 - leftPx2 + 0.5;
-                const c2 = getCol(i + 1) || 'blue';
-                fillRect(ctx, leftPx2, topPx, w2, heightPx, canvasWidth, c2);
+                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;
+    };
+};