@jbrowse/plugin-alignments 2.16.1 → 2.18.0

package/dist/PileupRenderer/index.js

@@ -5,8 +5,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = register;
 const PileupRenderer_1 = __importDefault(require("./PileupRenderer"));
-const configSchema_1 = __importDefault(require("./configSchema"));
 const PileupRendering_1 = __importDefault(require("./components/PileupRendering"));
+const configSchema_1 = __importDefault(require("./configSchema"));
 function register(pluginManager) {
     pluginManager.addRendererType(() => {
         return new PileupRenderer_1.default({

package/dist/PileupRenderer/layoutFeature.d.ts

@@ -1,5 +1,5 @@
-import { Feature, Region } from '@jbrowse/core/util';
-import { BaseLayout } from '@jbrowse/core/util/layouts';
+import type { Feature, Region } from '@jbrowse/core/util';
+import type { BaseLayout } from '@jbrowse/core/util/layouts';
 export interface LayoutRecord {
     feature: Feature;
     leftPx: number;

package/dist/PileupRenderer/layoutFeature.js

@@ -5,7 +5,6 @@ const util_1 = require("@jbrowse/core/util");
 function layoutFeature({ feature, layout, bpPerPx, region, showSoftClip, heightPx, displayMode, }) {
     let expansionBefore = 0;
     let expansionAfter = 0;
-    // Expand the start and end of feature when softclipping enabled
     if (showSoftClip) {
         const mismatches = feature.get('mismatches');
         const seq = feature.get('seq');

package/dist/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/dist/PileupRenderer/layoutFeatures.js

@@ -3,10 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.layoutFeats = layoutFeats;
 const configuration_1 = require("@jbrowse/core/configuration");
 const util_1 = require("@jbrowse/core/util");
-// locals
 const layoutFeature_1 = require("./layoutFeature");
 const sortUtil_1 = require("./sortUtil");
-// layout determines the height of the canvas that we use to render
 function layoutFeats(props) {
     const { layout, features, sortedBy, config, bpPerPx, showSoftClip, regions } = props;
     const region = regions[0];
@@ -15,7 +13,7 @@ function layoutFeats(props) {
         : features;
     const heightPx = (0, configuration_1.readConfObject)(config, 'height');
     const displayMode = (0, configuration_1.readConfObject)(config, 'displayMode');
-    return (0, util_1.iterMap)(featureMap.values(), feature => (0, layoutFeature_1.layoutFeature)({
+    const layoutRecords = (0, util_1.iterMap)(featureMap.values(), feature => (0, layoutFeature_1.layoutFeature)({
         feature,
         layout,
         bpPerPx,
@@ -23,5 +21,9 @@ function layoutFeats(props) {
         showSoftClip,
         heightPx,
         displayMode,
-    }), featureMap.size);
+    }), featureMap.size).filter(util_1.notEmpty);
+    return {
+        layoutRecords,
+        height: Math.max(layout.getTotalHeight(), 1),
+    };
 }

package/dist/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/dist/PileupRenderer/makeImageData.js

@@ -3,12 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.makeImageData = makeImageData;
 const configuration_1 = require("@jbrowse/core/configuration");
 const ui_1 = require("@jbrowse/core/ui");
-const util_1 = require("./util");
+const stopToken_1 = require("@jbrowse/core/util/stopToken");
 const renderAlignment_1 = require("./renderAlignment");
 const renderMismatches_1 = require("./renderMismatches");
 const renderSoftClipping_1 = require("./renderSoftClipping");
+const util_1 = require("./util");
 function makeImageData({ ctx, layoutRecords, canvasWidth, renderArgs, }) {
-    const { config, showSoftClip, colorBy, theme: configTheme } = renderArgs;
+    const { stopToken, config, showSoftClip, colorBy, theme: configTheme, } = renderArgs;
     const mismatchAlpha = (0, configuration_1.readConfObject)(config, 'mismatchAlpha');
     const minSubfeatureWidth = (0, configuration_1.readConfObject)(config, 'minSubfeatureWidth');
     const largeInsertionIndicatorScale = (0, configuration_1.readConfObject)(config, 'largeInsertionIndicatorScale');
@@ -20,7 +21,12 @@ function makeImageData({ ctx, layoutRecords, canvasWidth, renderArgs, }) {
     const { charWidth, charHeight } = (0, util_1.getCharWidthHeight)();
     const drawSNPsMuted = (0, util_1.shouldDrawSNPsMuted)(colorBy === null || colorBy === void 0 ? void 0 : colorBy.type);
     const drawIndels = (0, util_1.shouldDrawIndels)();
+    let start = performance.now();
     for (const feat of layoutRecords) {
+        if (performance.now() - start > 400) {
+            (0, stopToken_1.checkStopToken)(stopToken);
+            start = performance.now();
+        }
         (0, renderAlignment_1.renderAlignment)({
             ctx,
             feat,

package/dist/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/dist/PileupRenderer/renderAlignment.js

@@ -3,9 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.renderAlignment = renderAlignment;
 const getAlignmentShapeColor_1 = require("./getAlignmentShapeColor");
 const renderAlignmentShape_1 = require("./renderAlignmentShape");
-const renderPerBaseQuality_1 = require("./renderPerBaseQuality");
-const renderPerBaseLettering_1 = require("./renderPerBaseLettering");
 const renderModifications_1 = require("./renderModifications");
+const renderPerBaseLettering_1 = require("./renderPerBaseLettering");
+const renderPerBaseQuality_1 = require("./renderPerBaseQuality");
+const MismatchParser_1 = require("../MismatchParser");
 const renderMethylation_1 = require("./renderMethylation");
 function renderAlignment({ ctx, feat, renderArgs, colorForBase, contrastForBase, charWidth, charHeight, defaultColor, canvasWidth, }) {
     const { config, bpPerPx, regions, colorBy, colorTagMap = {} } = renderArgs;
@@ -21,19 +22,21 @@ function renderAlignment({ ctx, feat, renderArgs, colorForBase, contrastForBase,
         colorTagMap,
     });
     (0, renderAlignmentShape_1.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 = (0, MismatchParser_1.parseCigar)(feature.get('CIGAR'));
             (0, renderPerBaseQuality_1.renderPerBaseQuality)({
                 ctx,
                 feat,
                 region,
                 bpPerPx,
                 canvasWidth,
+                cigarOps,
             });
             break;
-        case 'perBaseLettering':
+        }
+        case 'perBaseLettering': {
+            const cigarOps = (0, MismatchParser_1.parseCigar)(feature.get('CIGAR'));
             (0, renderPerBaseLettering_1.renderPerBaseLettering)({
                 ctx,
                 feat,
@@ -44,9 +47,12 @@ function renderAlignment({ ctx, feat, renderArgs, colorForBase, contrastForBase,
                 charWidth,
                 charHeight,
                 canvasWidth,
+                cigarOps,
             });
             break;
-        case 'modifications':
+        }
+        case 'modifications': {
+            const cigarOps = (0, MismatchParser_1.parseCigar)(feature.get('CIGAR'));
             (0, renderModifications_1.renderModifications)({
                 ctx,
                 feat,
@@ -54,9 +60,12 @@ function renderAlignment({ ctx, feat, renderArgs, colorForBase, contrastForBase,
                 bpPerPx,
                 renderArgs,
                 canvasWidth,
+                cigarOps,
             });
             break;
-        case 'methylation':
+        }
+        case 'methylation': {
+            const cigarOps = (0, MismatchParser_1.parseCigar)(feature.get('CIGAR'));
             (0, renderMethylation_1.renderMethylation)({
                 ctx,
                 feat,
@@ -64,7 +73,9 @@ function renderAlignment({ ctx, feat, renderArgs, colorForBase, contrastForBase,
                 bpPerPx,
                 renderArgs,
                 canvasWidth,
+                cigarOps,
             });
             break;
+        }
     }
 }

package/dist/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/dist/PileupRenderer/renderAlignmentShape.js

@@ -2,38 +2,119 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.renderAlignmentShape = renderAlignmentShape;
 const util_1 = require("@jbrowse/core/util");
+const MismatchParser_1 = require("../MismatchParser");
 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] = (0, util_1.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 = (0, MismatchParser_1.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] = (0, util_1.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] = (0, util_1.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] = (0, util_1.bpSpanPx)(drawStart - drawLen, drawStart, region, bpPerPx);
+                        ctx.fillRect(leftPx, topPx, rightPx - leftPx, heightPx);
+                    }
+                    drawStart -= drawLen + opLen;
+                    drawLen = 0;
+                }
+            }
+            if (drawLen !== 0) {
+                const [leftPx, rightPx] = (0, util_1.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] = (0, util_1.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/dist/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/dist/PileupRenderer/renderMethylation.js

@@ -2,13 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.renderMethylation = renderMethylation;
 const util_1 = require("@jbrowse/core/util");
-const MismatchParser_1 = require("../MismatchParser");
-const util_2 = require("./util");
 const colord_1 = require("@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
-function renderMethylation({ ctx, feat, region, bpPerPx, renderArgs, canvasWidth, }) {
-    var _a, _b;
+const util_2 = require("./util");
+const ModificationParser_1 = require("../ModificationParser");
+function renderMethylation({ ctx, feat, region, bpPerPx, renderArgs, canvasWidth, cigarOps, }) {
     const { regionSequence } = renderArgs;
     const { feature, topPx, heightPx } = feat;
     if (!regionSequence) {
@@ -20,7 +17,7 @@ function renderMethylation({ ctx, feat, region, bpPerPx, renderArgs, canvasWidth
     }
     const fstart = feature.get('start');
     const fend = feature.get('end');
-    const { methBins, methProbs } = (0, MismatchParser_1.getMethBins)(feature);
+    const { methBins, methProbs, hydroxyMethBins, hydroxyMethProbs } = (0, ModificationParser_1.getMethBins)(feature, cigarOps);
     function getCol(k) {
         if (methBins[k]) {
             const p = methProbs[k] || 0;
@@ -28,12 +25,19 @@ function renderMethylation({ ctx, feat, region, bpPerPx, renderArgs, canvasWidth
                 ? (0, colord_1.colord)('red').alpha((p - 0.5) * 2)
                 : (0, colord_1.colord)('blue').alpha(1 - p * 2)).toHslString();
         }
+        if (hydroxyMethBins[k]) {
+            const p = hydroxyMethProbs[k] || 0;
+            return (p > 0.5
+                ? (0, colord_1.colord)('pink').alpha((p - 0.5) * 2)
+                : (0, colord_1.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] = (0, util_1.bpSpanPx)(j, j + 2, region, bpPerPx);

package/dist/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/dist/PileupRenderer/renderMismatches.js

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.renderMismatches = renderMismatches;
 const util_1 = require("@jbrowse/core/util");
-const util_2 = require("./util");
 const colord_1 = require("@jbrowse/core/util/colord");
+const util_2 = require("./util");
 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;
@@ -12,44 +12,36 @@ function renderMismatches({ ctx, feat, renderArgs, minSubfeatureWidth, largeInse
     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] = (0, util_1.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
-                        : (0, colord_1.colord)(baseColor)
-                            .alpha(Math.min(1, mismatch.qual / 50))
-                            .toHslString()
+                const c = mismatchAlpha && mismatch.qual !== undefined
+                    ? (0, colord_1.colord)(baseColor)
+                        .alpha(Math.min(1, mismatch.qual / 50))
+                        .toHslString()
                     : baseColor;
                 (0, util_2.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
-                        : (0, colord_1.colord)(contrastColor)
+                ctx.fillStyle =
+                    mismatchAlpha && mismatch.qual !== undefined
+                        ? (0, colord_1.colord)(contrastColor)
                             .alpha(Math.min(1, mismatch.qual / 50))
                             .toHslString()
-                    : contrastColor;
+                        : contrastColor;
                 ctx.fillText(mbase, leftPx + (widthPx - charWidth) / 2 + 1, topPx + heightPx);
             }
         }
@@ -63,7 +55,6 @@ function renderMismatches({ ctx, feat, renderArgs, minSubfeatureWidth, largeInse
             }
         }
         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));
@@ -90,26 +81,24 @@ function renderMismatches({ ctx, feat, renderArgs, minSubfeatureWidth, largeInse
             }
         }
         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);
-                (0, util_2.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;
+                (0, util_2.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] = (0, util_1.bpSpanPx)(mstart, mstart + mlen, region, bpPerPx);
             const len = +mismatch.base || mismatch.length;
-            const txt = `${len}`;
             if (mismatch.type === 'insertion' && len >= 10) {
+                const [leftPx] = (0, util_1.bpSpanPx)(mstart, mstart + mlen, region, bpPerPx);
+                const txt = `${len}`;
                 if (bpPerPx > largeInsertionIndicatorScale) {
                     (0, util_2.fillRect)(ctx, leftPx - 1, topPx, 2, heightPx, canvasWidth, 'purple');
                 }

package/dist/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/dist/PileupRenderer/renderModifications.js

@@ -2,47 +2,42 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.renderModifications = renderModifications;
 const util_1 = require("@jbrowse/core/util");
-const MismatchParser_1 = require("../MismatchParser");
-const util_2 = require("../util");
-const util_3 = require("./util");
-const colord_1 = require("@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
-function renderModifications({ ctx, feat, region, bpPerPx, renderArgs, canvasWidth, }) {
+const util_2 = require("./util");
+const getMaximumModificationAtEachPosition_1 = require("../shared/getMaximumModificationAtEachPosition");
+const util_3 = require("../shared/util");
+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 = (0, util_2.getTagAlt)(feature, 'MM', 'Mm') || '';
-    const cigar = feature.get('CIGAR');
     const start = feature.get('start');
-    const strand = feature.get('strand');
-    const cigarOps = (0, MismatchParser_1.parseCigar)(cigar);
-    const probabilities = (0, MismatchParser_1.getModificationProbabilities)(feature);
-    const modifications = (0, MismatchParser_1.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 = (0, colord_1.colord)(col);
-        for (const readPos of (0, MismatchParser_1.getNextRefPos)(cigarOps, positions)) {
-            const r = start + readPos;
-            const [leftPx, rightPx] = (0, util_1.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 = (0, getMaximumModificationAtEachPosition_1.getMaxProbModAtEachPosition)(feature, cigarOps)) === null || _c === void 0 ? void 0 : _c.forEach(({ allProbs, prob, type }, pos) => {
+        const r = start + pos;
+        const [leftPx, rightPx] = (0, util_1.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 - (0, util_1.sum)(allProbs);
+        if (twoColor && s > (0, util_1.max)(allProbs)) {
+            const c = (0, util_3.alphaColor)('blue', s);
             const w = rightPx - leftPx + 0.5;
-            (0, util_3.fillRect)(ctx, leftPx, topPx, w, heightPx, canvasWidth, c);
-            probIndex++;
+            (0, util_2.fillRect)(ctx, leftPx, topPx, w, heightPx, canvasWidth, c);
         }
-    }
+        else {
+            const c = (0, util_3.alphaColor)(col, prob);
+            const w = rightPx - leftPx + 0.5;
+            (0, util_2.fillRect)(ctx, leftPx, topPx, w, heightPx, canvasWidth, c);
+        }
+    });
 }