@jbrowse/plugin-alignments 2.16.1 → 2.18.0

package/esm/PileupRenderer/layoutFeatures.d.ts

@@ -1,2 +1,5 @@
-import { RenderArgsDeserializedWithFeaturesAndLayout } from './PileupRenderer';
-export declare function layoutFeats(props: RenderArgsDeserializedWithFeaturesAndLayout): (import("./layoutFeature").LayoutRecord | null)[];
+import type { PreProcessedRenderArgs } from './types';
+export declare function layoutFeats(props: PreProcessedRenderArgs): {
+    layoutRecords: import("./layoutFeature").LayoutRecord[];
+    height: number;
+};

package/esm/PileupRenderer/layoutFeatures.js

@@ -1,9 +1,7 @@
 import { readConfObject } from '@jbrowse/core/configuration';
-import { iterMap } from '@jbrowse/core/util';
-// locals
+import { iterMap, notEmpty } from '@jbrowse/core/util';
 import { layoutFeature } from './layoutFeature';
 import { sortFeature } from './sortUtil';
-// layout determines the height of the canvas that we use to render
 export function layoutFeats(props) {
     const { layout, features, sortedBy, config, bpPerPx, showSoftClip, regions } = props;
     const region = regions[0];
@@ -12,7 +10,7 @@ export function layoutFeats(props) {
         : features;
     const heightPx = readConfObject(config, 'height');
     const displayMode = readConfObject(config, 'displayMode');
-    return iterMap(featureMap.values(), feature => layoutFeature({
+    const layoutRecords = iterMap(featureMap.values(), feature => layoutFeature({
         feature,
         layout,
         bpPerPx,
@@ -20,5 +18,9 @@ export function layoutFeats(props) {
         showSoftClip,
         heightPx,
         displayMode,
-    }), featureMap.size);
+    }), featureMap.size).filter(notEmpty);
+    return {
+        layoutRecords,
+        height: Math.max(layout.getTotalHeight(), 1),
+    };
 }

package/esm/PileupRenderer/makeImageData.d.ts

@@ -1,6 +1,5 @@
-import { Feature } from '@jbrowse/core/util';
-import { RenderArgsDeserializedWithFeaturesAndLayout } from './PileupRenderer';
-export type RenderArgsWithColor = RenderArgsDeserializedWithFeaturesAndLayout;
+import type { ProcessedRenderArgs } from './types';
+import type { Feature } from '@jbrowse/core/util';
 interface LayoutFeature {
     heightPx: number;
     topPx: number;
@@ -10,6 +9,6 @@ export declare function makeImageData({ ctx, layoutRecords, canvasWidth, renderA
     ctx: CanvasRenderingContext2D;
     canvasWidth: number;
     layoutRecords: LayoutFeature[];
-    renderArgs: RenderArgsWithColor;
+    renderArgs: ProcessedRenderArgs;
 }): undefined;
 export {};

package/esm/PileupRenderer/makeImageData.js

@@ -1,11 +1,12 @@
 import { readConfObject } from '@jbrowse/core/configuration';
 import { createJBrowseTheme } from '@jbrowse/core/ui';
-import { getCharWidthHeight, getColorBaseMap, getContrastBaseMap, shouldDrawIndels, shouldDrawSNPsMuted, } from './util';
+import { checkStopToken } from '@jbrowse/core/util/stopToken';
 import { renderAlignment } from './renderAlignment';
 import { renderMismatches } from './renderMismatches';
 import { renderSoftClipping } from './renderSoftClipping';
+import { getCharWidthHeight, getColorBaseMap, getContrastBaseMap, shouldDrawIndels, shouldDrawSNPsMuted, } from './util';
 export function makeImageData({ ctx, layoutRecords, canvasWidth, renderArgs, }) {
-    const { config, showSoftClip, colorBy, theme: configTheme } = renderArgs;
+    const { stopToken, config, showSoftClip, colorBy, theme: configTheme, } = renderArgs;
     const mismatchAlpha = readConfObject(config, 'mismatchAlpha');
     const minSubfeatureWidth = readConfObject(config, 'minSubfeatureWidth');
     const largeInsertionIndicatorScale = readConfObject(config, 'largeInsertionIndicatorScale');
@@ -17,7 +18,12 @@ export function makeImageData({ ctx, layoutRecords, canvasWidth, renderArgs, })
     const { charWidth, charHeight } = getCharWidthHeight();
     const drawSNPsMuted = shouldDrawSNPsMuted(colorBy === null || colorBy === void 0 ? void 0 : colorBy.type);
     const drawIndels = shouldDrawIndels();
+    let start = performance.now();
     for (const feat of layoutRecords) {
+        if (performance.now() - start > 400) {
+            checkStopToken(stopToken);
+            start = performance.now();
+        }
         renderAlignment({
             ctx,
             feat,

package/esm/PileupRenderer/renderAlignment.d.ts

@@ -1,9 +1,9 @@
-import { LayoutFeature } from './util';
-import { RenderArgsWithColor } from './makeImageData';
+import type { ProcessedRenderArgs } from './types';
+import type { LayoutFeature } from './util';
 export declare function renderAlignment({ ctx, feat, renderArgs, colorForBase, contrastForBase, charWidth, charHeight, defaultColor, canvasWidth, }: {
     ctx: CanvasRenderingContext2D;
     feat: LayoutFeature;
-    renderArgs: RenderArgsWithColor;
+    renderArgs: ProcessedRenderArgs;
     colorForBase: Record<string, string>;
     contrastForBase: Record<string, string>;
     charWidth: number;

package/esm/PileupRenderer/renderAlignment.js

@@ -1,8 +1,9 @@
 import { getAlignmentShapeColor } from './getAlignmentShapeColor';
 import { renderAlignmentShape } from './renderAlignmentShape';
-import { renderPerBaseQuality } from './renderPerBaseQuality';
-import { renderPerBaseLettering } from './renderPerBaseLettering';
 import { renderModifications } from './renderModifications';
+import { renderPerBaseLettering } from './renderPerBaseLettering';
+import { renderPerBaseQuality } from './renderPerBaseQuality';
+import { parseCigar } from '../MismatchParser';
 import { renderMethylation } from './renderMethylation';
 export function renderAlignment({ ctx, feat, renderArgs, colorForBase, contrastForBase, charWidth, charHeight, defaultColor, canvasWidth, }) {
     const { config, bpPerPx, regions, colorBy, colorTagMap = {} } = renderArgs;
@@ -18,19 +19,21 @@ export function renderAlignment({ ctx, feat, renderArgs, colorForBase, contrastF
         colorTagMap,
     });
     renderAlignmentShape({ ctx, feat, renderArgs });
-    // second pass for color types that render per-base things that go over the
-    // existing drawing
     switch (colorType) {
-        case 'perBaseQuality':
+        case 'perBaseQuality': {
+            const cigarOps = parseCigar(feature.get('CIGAR'));
             renderPerBaseQuality({
                 ctx,
                 feat,
                 region,
                 bpPerPx,
                 canvasWidth,
+                cigarOps,
             });
             break;
-        case 'perBaseLettering':
+        }
+        case 'perBaseLettering': {
+            const cigarOps = parseCigar(feature.get('CIGAR'));
             renderPerBaseLettering({
                 ctx,
                 feat,
@@ -41,9 +44,12 @@ export function renderAlignment({ ctx, feat, renderArgs, colorForBase, contrastF
                 charWidth,
                 charHeight,
                 canvasWidth,
+                cigarOps,
             });
             break;
-        case 'modifications':
+        }
+        case 'modifications': {
+            const cigarOps = parseCigar(feature.get('CIGAR'));
             renderModifications({
                 ctx,
                 feat,
@@ -51,9 +57,12 @@ export function renderAlignment({ ctx, feat, renderArgs, colorForBase, contrastF
                 bpPerPx,
                 renderArgs,
                 canvasWidth,
+                cigarOps,
             });
             break;
-        case 'methylation':
+        }
+        case 'methylation': {
+            const cigarOps = parseCigar(feature.get('CIGAR'));
             renderMethylation({
                 ctx,
                 feat,
@@ -61,7 +70,9 @@ export function renderAlignment({ ctx, feat, renderArgs, colorForBase, contrastF
                 bpPerPx,
                 renderArgs,
                 canvasWidth,
+                cigarOps,
             });
             break;
+        }
     }
 }

package/esm/PileupRenderer/renderAlignmentShape.d.ts

@@ -1,7 +1,7 @@
-import { RenderArgsDeserialized } from './PileupRenderer';
-import { LayoutFeature } from './util';
+import type { ProcessedRenderArgs } from './types';
+import type { LayoutFeature } from './util';
 export declare function renderAlignmentShape({ ctx, feat, renderArgs, }: {
     ctx: CanvasRenderingContext2D;
     feat: LayoutFeature;
-    renderArgs: RenderArgsDeserialized;
+    renderArgs: ProcessedRenderArgs;
 }): void;

package/esm/PileupRenderer/renderAlignmentShape.js

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

package/esm/PileupRenderer/renderMethylation.d.ts

@@ -1,11 +1,12 @@
-import { Region } from '@jbrowse/core/util';
-import { LayoutFeature } from './util';
-import { RenderArgsWithColor } from './makeImageData';
-export declare function renderMethylation({ ctx, feat, region, bpPerPx, renderArgs, canvasWidth, }: {
+import type { ProcessedRenderArgs } from './types';
+import type { LayoutFeature } from './util';
+import type { Region } from '@jbrowse/core/util';
+export declare function renderMethylation({ ctx, feat, region, bpPerPx, renderArgs, canvasWidth, cigarOps, }: {
     ctx: CanvasRenderingContext2D;
     feat: LayoutFeature;
     region: Region;
     bpPerPx: number;
-    renderArgs: RenderArgsWithColor;
+    renderArgs: ProcessedRenderArgs;
     canvasWidth: number;
+    cigarOps: string[];
 }): void;

package/esm/PileupRenderer/renderMethylation.js

@@ -1,11 +1,8 @@
 import { bpSpanPx } from '@jbrowse/core/util';
-import { getMethBins } from '../MismatchParser';
-import { fillRect } from './util';
 import { colord } from '@jbrowse/core/util/colord';
-// Color by methylation is slightly modified version of color by
-// modifications that focuses on CpG sites, with non-methylated CpG colored
-export function renderMethylation({ ctx, feat, region, bpPerPx, renderArgs, canvasWidth, }) {
-    var _a, _b;
+import { fillRect } from './util';
+import { getMethBins } from '../ModificationParser';
+export function renderMethylation({ ctx, feat, region, bpPerPx, renderArgs, canvasWidth, cigarOps, }) {
     const { regionSequence } = renderArgs;
     const { feature, topPx, heightPx } = feat;
     if (!regionSequence) {
@@ -17,7 +14,7 @@ export function renderMethylation({ ctx, feat, region, bpPerPx, renderArgs, canv
     }
     const fstart = feature.get('start');
     const fend = feature.get('end');
-    const { methBins, methProbs } = getMethBins(feature);
+    const { methBins, methProbs, hydroxyMethBins, hydroxyMethProbs } = getMethBins(feature, cigarOps);
     function getCol(k) {
         if (methBins[k]) {
             const p = methProbs[k] || 0;
@@ -25,12 +22,19 @@ export function renderMethylation({ ctx, feat, region, bpPerPx, renderArgs, canv
                 ? colord('red').alpha((p - 0.5) * 2)
                 : colord('blue').alpha(1 - p * 2)).toHslString();
         }
+        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 undefined;
     }
+    const r = regionSequence.toLowerCase();
     for (let i = 0; i < fend - fstart; i++) {
         const j = i + fstart;
-        const l1 = (_a = regionSequence[j - region.start + 1]) === null || _a === void 0 ? void 0 : _a.toLowerCase();
-        const l2 = (_b = regionSequence[j - region.start + 2]) === null || _b === void 0 ? void 0 : _b.toLowerCase();
+        const l1 = r[j - region.start + 1];
+        const l2 = r[j - region.start + 2];
         if (l1 === 'c' && l2 === 'g') {
             if (bpPerPx > 2) {
                 const [leftPx, rightPx] = bpSpanPx(j, j + 2, region, bpPerPx);

package/esm/PileupRenderer/renderMismatches.d.ts

@@ -1,9 +1,9 @@
-import { LayoutFeature } from './util';
-import { RenderArgsWithColor } from './makeImageData';
+import type { ProcessedRenderArgs } from './types';
+import type { LayoutFeature } from './util';
 export declare function renderMismatches({ ctx, feat, renderArgs, minSubfeatureWidth, largeInsertionIndicatorScale, mismatchAlpha, charWidth, charHeight, colorForBase, contrastForBase, canvasWidth, drawSNPsMuted, drawIndels, }: {
     ctx: CanvasRenderingContext2D;
     feat: LayoutFeature;
-    renderArgs: RenderArgsWithColor;
+    renderArgs: ProcessedRenderArgs;
     colorForBase: Record<string, string>;
     contrastForBase: Record<string, string>;
     mismatchAlpha?: boolean;

package/esm/PileupRenderer/renderMismatches.js

@@ -1,6 +1,6 @@
 import { bpSpanPx, measureText } from '@jbrowse/core/util';
-import { fillRect } from './util';
 import { colord } from '@jbrowse/core/util/colord';
+import { fillRect } from './util';
 export function renderMismatches({ ctx, feat, renderArgs, minSubfeatureWidth, largeInsertionIndicatorScale, mismatchAlpha, charWidth, charHeight, colorForBase, contrastForBase, canvasWidth, drawSNPsMuted, drawIndels = true, }) {
     const { bpPerPx, regions } = renderArgs;
     const { heightPx, topPx, feature } = feat;
@@ -9,44 +9,36 @@ export function renderMismatches({ ctx, feat, renderArgs, minSubfeatureWidth, la
     const pxPerBp = Math.min(1 / bpPerPx, 2);
     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 (const mismatch of mismatches) {
         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));
+        const widthPx = Math.max(minSubfeatureWidth, rightPx - leftPx);
         if (mismatch.type === 'mismatch') {
             if (!drawSNPsMuted) {
                 const baseColor = colorForBase[mismatch.base] || '#888';
-                const c = mismatchAlpha
-                    ? mismatch.qual === undefined
-                        ? baseColor
-                        : colord(baseColor)
-                            .alpha(Math.min(1, mismatch.qual / 50))
-                            .toHslString()
+                const c = mismatchAlpha && mismatch.qual !== undefined
+                    ? colord(baseColor)
+                        .alpha(Math.min(1, mismatch.qual / 50))
+                        .toHslString()
                     : baseColor;
                 fillRect(ctx, Math.round(leftPx), topPx, widthPx, heightPx, canvasWidth, c);
             }
             if (widthPx >= charWidth && heightPx >= heightLim) {
-                // normal SNP coloring
                 const contrastColor = drawSNPsMuted
                     ? 'black'
                     : contrastForBase[mismatch.base] || 'black';
-                ctx.fillStyle = mismatchAlpha
-                    ? mismatch.qual === undefined
-                        ? contrastColor
-                        : colord(contrastColor)
+                ctx.fillStyle =
+                    mismatchAlpha && mismatch.qual !== undefined
+                        ? colord(contrastColor)
                             .alpha(Math.min(1, mismatch.qual / 50))
                             .toHslString()
-                    : contrastColor;
+                        : contrastColor;
                 ctx.fillText(mbase, leftPx + (widthPx - charWidth) / 2 + 1, topPx + heightPx);
             }
         }
@@ -60,7 +52,6 @@ export function renderMismatches({ ctx, feat, renderArgs, minSubfeatureWidth, la
             }
         }
         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));
@@ -87,26 +78,24 @@ export function renderMismatches({ ctx, feat, renderArgs, minSubfeatureWidth, la
             }
         }
         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 + Math.min(leftPx, 0), 2, canvasWidth, '#333');
+                const l = Math.max(0, leftPx);
+                const t = topPx + heightPx / 2 - 1;
+                const w = adjustPx + Math.min(leftPx, 0);
+                const h = 1;
+                fillRect(ctx, l, t, w, h, canvasWidth, 'rgb(151,184,201)');
             }
         }
     }
-    // second pass, draw wide insertion markers on top
     if (drawIndels) {
         for (const mismatch of mismatches) {
             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) {
+                const [leftPx] = bpSpanPx(mstart, mstart + mlen, region, bpPerPx);
+                const txt = `${len}`;
                 if (bpPerPx > largeInsertionIndicatorScale) {
                     fillRect(ctx, leftPx - 1, topPx, 2, heightPx, canvasWidth, 'purple');
                 }

package/esm/PileupRenderer/renderModifications.d.ts

@@ -1,11 +1,12 @@
-import { Region } from '@jbrowse/core/util';
-import { LayoutFeature } from './util';
-import { RenderArgsWithColor } from './makeImageData';
-export declare function renderModifications({ ctx, feat, region, bpPerPx, renderArgs, canvasWidth, }: {
+import type { ProcessedRenderArgs } from './types';
+import type { LayoutFeature } from './util';
+import type { Region } from '@jbrowse/core/util';
+export declare function renderModifications({ ctx, feat, region, bpPerPx, renderArgs, canvasWidth, cigarOps, }: {
     ctx: CanvasRenderingContext2D;
     feat: LayoutFeature;
     region: Region;
     bpPerPx: number;
-    renderArgs: RenderArgsWithColor;
+    renderArgs: ProcessedRenderArgs;
     canvasWidth: number;
+    cigarOps: string[];
 }): void;

package/esm/PileupRenderer/renderModifications.js

@@ -1,45 +1,40 @@
-import { bpSpanPx } from '@jbrowse/core/util';
-import { getModificationPositions, getModificationProbabilities, getNextRefPos, parseCigar, } from '../MismatchParser';
-import { getTagAlt } from '../util';
+import { bpSpanPx, max, sum } from '@jbrowse/core/util';
 import { fillRect } from './util';
-import { colord } from '@jbrowse/core/util/colord';
-// render modifications stored in MM tag in BAM
-//
-// 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
-export function renderModifications({ ctx, feat, region, bpPerPx, renderArgs, canvasWidth, }) {
+import { getMaxProbModAtEachPosition } from '../shared/getMaximumModificationAtEachPosition';
+import { alphaColor } from '../shared/util';
+export function renderModifications({ ctx, feat, region, bpPerPx, renderArgs, canvasWidth, cigarOps, }) {
+    var _a, _b, _c;
     const { feature, topPx, heightPx } = feat;
-    const { modificationTagMap = {} } = renderArgs;
+    const { colorBy, visibleModifications = {} } = renderArgs;
     const seq = feature.get('seq');
     if (!seq) {
         return;
     }
-    const mm = getTagAlt(feature, 'MM', 'Mm') || '';
-    const cigar = feature.get('CIGAR');
     const start = feature.get('start');
-    const strand = feature.get('strand');
-    const cigarOps = parseCigar(cigar);
-    const probabilities = getModificationProbabilities(feature);
-    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';
-        const base = colord(col);
-        for (const readPos of getNextRefPos(cigarOps, positions)) {
-            const r = start + readPos;
-            const [leftPx, rightPx] = bpSpanPx(r, r + 1, region, bpPerPx);
-            const prob = (probabilities === null || probabilities === void 0 ? void 0 : probabilities[probIndex]) || 0;
-            const c = prob !== 1 ? base.alpha(prob + 0.1).toHslString() : col;
+    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;
+    (_c = getMaxProbModAtEachPosition(feature, cigarOps)) === null || _c === void 0 ? void 0 : _c.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`);
+            return;
+        }
+        if (isolatedModification && mod.type !== isolatedModification) {
+            return;
+        }
+        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);
-            probIndex++;
         }
-    }
+        else {
+            const c = alphaColor(col, prob);
+            const w = rightPx - leftPx + 0.5;
+            fillRect(ctx, leftPx, topPx, w, heightPx, canvasWidth, c);
+        }
+    });
 }

package/esm/PileupRenderer/renderPerBaseLettering.d.ts

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

package/esm/PileupRenderer/renderPerBaseLettering.js

@@ -1,11 +1,9 @@
 import { bpSpanPx } from '@jbrowse/core/util';
-import { parseCigar } from '../MismatchParser';
 import { fillRect } from './util';
-export function renderPerBaseLettering({ ctx, feat, region, bpPerPx, colorForBase, contrastForBase, charWidth, charHeight, canvasWidth, }) {
+export function renderPerBaseLettering({ ctx, feat, region, bpPerPx, colorForBase, contrastForBase, charWidth, charHeight, canvasWidth, cigarOps, }) {
     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;
@@ -30,7 +28,6 @@ export function renderPerBaseLettering({ ctx, feat, region, bpPerPx, colorForBas
                 const c = colorForBase[letter];
                 fillRect(ctx, leftPx, topPx, w + 0.5, heightPx, canvasWidth, c);
                 if (w >= charWidth && heightPx >= heightLim) {
-                    // normal SNP coloring
                     ctx.fillStyle = contrastForBase[letter];
                     ctx.fillText(letter, leftPx + (w - charWidth) / 2 + 1, topPx + heightPx);
                 }