@jbrowse/plugin-alignments 3.7.0 → 4.0.1

package/esm/SNPCoverageRenderer/makeImage.js

@@ -1,11 +1,15 @@
 import { readConfObject } from '@jbrowse/core/configuration';
 import { createJBrowseTheme } from '@jbrowse/core/ui';
-import { bpSpanPx, featureSpanPx, forEachWithStopTokenCheck, } from '@jbrowse/core/util';
+import { checkStopToken2, createStopTokenChecker, featureSpanPx, renderToAbstractCanvas, } from '@jbrowse/core/util';
+import Flatbush from '@jbrowse/core/util/flatbush';
+import { rpcResult } from '@jbrowse/core/util/librpc';
+import { collectTransferables } from '@jbrowse/core/util/offscreenCanvasPonyfill';
 import { YSCALEBAR_LABEL_OFFSET, getOrigin, getScale, } from '@jbrowse/plugin-wiggle';
-import { alphaColor } from '../shared/util';
+import { alphaColor } from "../shared/util.js";
 const INTERBASE_INDICATOR_WIDTH = 7;
 const INTERBASE_INDICATOR_HEIGHT = 4.5;
 const MINIMUM_INTERBASE_INDICATOR_READ_DEPTH = 7;
+const INTERBASE_DRAW_THRESHOLD = 0.1;
 const complementBase = {
     C: 'G',
     G: 'C',
@@ -13,26 +17,335 @@ const complementBase = {
     T: 'A',
 };
 const fudgeFactor = 0.6;
+const SNP_CLICKMAP_THRESHOLD = 0.04;
+function createInterbaseItem(maxBase, count, total, start, maxEntry) {
+    return {
+        type: maxBase,
+        base: maxBase,
+        count,
+        total,
+        avgLength: maxEntry?.avgLength,
+        minLength: maxEntry?.minLength,
+        maxLength: maxEntry?.maxLength,
+        topSequence: maxEntry?.topSequence,
+        start,
+    };
+}
+function drawStackedBars(ctx, entries, colorMap, x, bottom, w, h, depth, startCurr) {
+    let curr = startCurr;
+    for (const base in entries) {
+        const { entryDepth } = entries[base];
+        ctx.fillStyle = colorMap[base] || 'black';
+        ctx.fillRect(x, bottom - ((entryDepth + curr) / depth) * h, w, (entryDepth / depth) * h);
+        curr += entryDepth;
+    }
+    return curr;
+}
+function drawCrossHatches(ctx, ticks, width, toY) {
+    ctx.lineWidth = 1;
+    ctx.strokeStyle = 'rgba(140,140,140,0.8)';
+    for (const tick of ticks.values) {
+        ctx.beginPath();
+        ctx.moveTo(0, Math.round(toY(tick)));
+        ctx.lineTo(width, Math.round(toY(tick)));
+        ctx.stroke();
+    }
+}
 function calculateModificationCounts({ base, isSimplex, refbase, snps, ref, score0, }) {
-    var _a, _b, _c, _d;
     if (base === 'N') {
         return { modifiable: score0, detectable: score0 };
     }
     const cmp = complementBase[base];
-    const baseCount = (((_a = snps[base]) === null || _a === void 0 ? void 0 : _a.entryDepth) || 0) + (refbase === base ? ref.entryDepth : 0);
-    const complCount = (((_b = snps[cmp]) === null || _b === void 0 ? void 0 : _b.entryDepth) || 0) + (refbase === cmp ? ref.entryDepth : 0);
+    const baseCount = (snps[base]?.entryDepth || 0) + (refbase === base ? ref.entryDepth : 0);
+    const complCount = (snps[cmp]?.entryDepth || 0) + (refbase === cmp ? ref.entryDepth : 0);
     const modifiable = baseCount + complCount;
     const detectable = isSimplex
-        ? (((_c = snps[base]) === null || _c === void 0 ? void 0 : _c['1']) || 0) +
-            (((_d = snps[cmp]) === null || _d === void 0 ? void 0 : _d['-1']) || 0) +
+        ? (snps[base]?.['1'] || 0) +
+            (snps[cmp]?.['-1'] || 0) +
             (refbase === base ? ref['1'] : 0) +
             (refbase === cmp ? ref['-1'] : 0)
         : modifiable;
     return { modifiable, detectable };
 }
-export async function makeImage(ctx, props) {
-    var _a;
-    const { features, regions, bpPerPx, colorBy, displayCrossHatches, visibleModifications = {}, simplexModifications = [], scaleOpts, height: unadjustedHeight, theme: configTheme, config: cfg, ticks, stopToken, } = props;
+function buildClickMap(coords, items) {
+    const flatbush = new Flatbush(Math.max(items.length, 1));
+    if (coords.length) {
+        for (let i = 0; i < coords.length; i += 4) {
+            flatbush.add(coords[i], coords[i + 1], coords[i + 2], coords[i + 3]);
+        }
+    }
+    else {
+        flatbush.add(0, 0);
+    }
+    flatbush.finish();
+    return {
+        flatbush: flatbush.data,
+        items,
+    };
+}
+function drawNoncovEvents(passCtx, snpinfo, leftPx, score0, prevTotal, skipDraw, fstart) {
+    const { ctx, colorMap, toHeight2, extraHorizontallyFlippedOffset, coords, items, bpPerPx, indicatorThreshold, showInterbaseCounts, showInterbaseIndicators, } = passCtx;
+    let totalCount = 0;
+    let maxDepth = 0;
+    let maxBase = '';
+    let totalHeight = 0;
+    const r = 0.6;
+    const x = leftPx - r + extraHorizontallyFlippedOffset;
+    for (const base in snpinfo.noncov) {
+        const { entryDepth } = snpinfo.noncov[base];
+        totalCount += entryDepth;
+        if (entryDepth > maxDepth) {
+            maxDepth = entryDepth;
+            maxBase = base;
+        }
+    }
+    const isSignificant = score0 > 0 && totalCount > score0 * INTERBASE_DRAW_THRESHOLD;
+    const showCounts = showInterbaseCounts && (!skipDraw || isSignificant);
+    if (showCounts) {
+        for (const base in snpinfo.noncov) {
+            const { entryDepth } = snpinfo.noncov[base];
+            const barHeight = toHeight2(entryDepth);
+            ctx.fillStyle = colorMap[base];
+            ctx.fillRect(x, INTERBASE_INDICATOR_HEIGHT + totalHeight, r * 2, barHeight);
+            totalHeight += barHeight;
+        }
+    }
+    if (totalCount > 0) {
+        const maxEntry = snpinfo.noncov[maxBase];
+        if (showCounts) {
+            if (bpPerPx < 50 || isSignificant) {
+                const clickWidth = Math.max(r * 2, 2);
+                coords.push(x, INTERBASE_INDICATOR_HEIGHT, x + clickWidth, INTERBASE_INDICATOR_HEIGHT + totalHeight);
+                items.push(createInterbaseItem(maxBase, totalCount, score0, fstart, maxEntry));
+            }
+        }
+        if (showInterbaseIndicators && (!skipDraw || isSignificant)) {
+            const indicatorComparatorScore = Math.max(score0, prevTotal);
+            if (totalCount > indicatorComparatorScore * indicatorThreshold &&
+                indicatorComparatorScore > MINIMUM_INTERBASE_INDICATOR_READ_DEPTH) {
+                ctx.fillStyle = colorMap[maxBase];
+                ctx.beginPath();
+                const l = leftPx + extraHorizontallyFlippedOffset;
+                ctx.moveTo(l - INTERBASE_INDICATOR_WIDTH / 2, 0);
+                ctx.lineTo(l + INTERBASE_INDICATOR_WIDTH / 2, 0);
+                ctx.lineTo(l, INTERBASE_INDICATOR_HEIGHT);
+                ctx.fill();
+                const hitboxPadding = 1;
+                coords.push(l - INTERBASE_INDICATOR_WIDTH / 2 - hitboxPadding, 0, l + INTERBASE_INDICATOR_WIDTH / 2 + hitboxPadding, INTERBASE_INDICATOR_HEIGHT + hitboxPadding);
+                items.push(createInterbaseItem(maxBase, totalCount, indicatorComparatorScore, fstart, maxEntry));
+            }
+        }
+    }
+}
+function drawSecondPassModifications(passCtx, visibleModifications, isolatedModification, simplexSet) {
+    const { ctx, coverageFeatures, region, bpPerPx, toY, toHeight, lastCheck } = passCtx;
+    let snpDrawn = 0;
+    let snpSkipped = 0;
+    let lastDrawnX = Number.NEGATIVE_INFINITY;
+    let prevTotal = 0;
+    for (let i = 0, l = coverageFeatures.length; i < l; i++) {
+        checkStopToken2(lastCheck);
+        const feature = coverageFeatures[i];
+        const [leftPx, rightPx] = featureSpanPx(feature, region, bpPerPx);
+        const snpinfo = feature.get('snpinfo');
+        const w = Math.max(rightPx - leftPx, 1);
+        const score0 = feature.get('score');
+        const drawX = Math.round(leftPx);
+        const skipDraw = drawX === lastDrawnX;
+        let curr = 0;
+        const refbase = snpinfo.refbase?.toUpperCase();
+        const { nonmods, mods, snps, ref } = snpinfo;
+        const h = toHeight(score0);
+        const bottom = toY(score0) + h;
+        for (const key in nonmods) {
+            const modKey = key.slice(7);
+            const mod = visibleModifications[modKey];
+            if (!mod || (isolatedModification && mod.type !== isolatedModification)) {
+                continue;
+            }
+            const { modifiable, detectable } = calculateModificationCounts({
+                base: mod.base,
+                isSimplex: simplexSet.has(mod.type),
+                refbase,
+                snps,
+                ref,
+                score0,
+            });
+            const { entryDepth, avgProbability = 0 } = nonmods[key];
+            const modFraction = (modifiable / score0) * (entryDepth / detectable);
+            const barHeight = modFraction * h;
+            if (skipDraw) {
+                snpSkipped++;
+            }
+            else {
+                ctx.fillStyle = alphaColor('blue', avgProbability);
+                ctx.fillRect(drawX, bottom - (curr + barHeight), w, barHeight);
+                snpDrawn++;
+                lastDrawnX = drawX;
+            }
+            curr += barHeight;
+        }
+        for (const key in mods) {
+            const modKey = key.slice(4);
+            const mod = visibleModifications[modKey];
+            if (!mod || (isolatedModification && mod.type !== isolatedModification)) {
+                continue;
+            }
+            const { modifiable, detectable } = calculateModificationCounts({
+                base: mod.base,
+                isSimplex: simplexSet.has(mod.type),
+                refbase,
+                snps,
+                ref,
+                score0,
+            });
+            const { entryDepth, avgProbability = 0 } = mods[key];
+            const modFraction = (modifiable / score0) * (entryDepth / detectable);
+            const barHeight = modFraction * h;
+            if (skipDraw) {
+                snpSkipped++;
+            }
+            else {
+                ctx.fillStyle = alphaColor(mod.color || 'black', avgProbability);
+                ctx.fillRect(drawX, bottom - (curr + barHeight), w, barHeight);
+                snpDrawn++;
+                lastDrawnX = drawX;
+            }
+            curr += barHeight;
+        }
+        drawNoncovEvents(passCtx, snpinfo, leftPx, score0, prevTotal, skipDraw, feature.get('start'));
+        prevTotal = score0;
+    }
+    return { snpDrawn, snpSkipped };
+}
+function drawSecondPassMethylation(passCtx) {
+    const { ctx, coverageFeatures, region, bpPerPx, colorMap, toY, toHeight, lastCheck, } = passCtx;
+    let lastDrawnX = Number.NEGATIVE_INFINITY;
+    let prevTotal = 0;
+    for (let i = 0, l = coverageFeatures.length; i < l; i++) {
+        checkStopToken2(lastCheck);
+        const feature = coverageFeatures[i];
+        const [leftPx, rightPx] = featureSpanPx(feature, region, bpPerPx);
+        const snpinfo = feature.get('snpinfo');
+        const w = Math.max(rightPx - leftPx, 1);
+        const score0 = feature.get('score');
+        const drawX = Math.round(leftPx);
+        const skipDraw = drawX === lastDrawnX;
+        if (!skipDraw) {
+            const { depth, nonmods, mods } = snpinfo;
+            const h = toHeight(score0);
+            const bottom = toY(score0) + h;
+            const curr = drawStackedBars(ctx, mods, colorMap, drawX, bottom, w, h, depth, 0);
+            drawStackedBars(ctx, nonmods, colorMap, drawX, bottom, w, h, depth, curr);
+            lastDrawnX = drawX;
+        }
+        drawNoncovEvents(passCtx, snpinfo, leftPx, score0, prevTotal, skipDraw, feature.get('start'));
+        prevTotal = score0;
+    }
+    return { snpDrawn: 0, snpSkipped: 0 };
+}
+function drawSecondPassSNPs(passCtx) {
+    const { ctx, coverageFeatures, region, bpPerPx, colorMap, toY, toHeight, lastCheck, coords, items, } = passCtx;
+    let snpDrawn = 0;
+    let snpSkipped = 0;
+    let lastDrawnX = Number.NEGATIVE_INFINITY;
+    let lastDrawnDepth = -1;
+    let prevTotal = 0;
+    for (let i = 0, l = coverageFeatures.length; i < l; i++) {
+        checkStopToken2(lastCheck);
+        const feature = coverageFeatures[i];
+        const [leftPx, rightPx] = featureSpanPx(feature, region, bpPerPx);
+        const snpinfo = feature.get('snpinfo');
+        const w = Math.max(rightPx - leftPx, 1);
+        const score0 = feature.get('score');
+        const drawX = Math.round(leftPx);
+        const skipDraw = drawX === lastDrawnX;
+        const { depth, snps, refbase } = snpinfo;
+        const refbaseUpper = refbase?.toUpperCase();
+        const h = toHeight(score0);
+        const bottom = toY(score0) + h;
+        let curr = 0;
+        for (const base in snps) {
+            const entry = snps[base];
+            const { entryDepth } = entry;
+            const y1 = bottom - ((entryDepth + curr) / depth) * h;
+            const barHeight = (entryDepth / depth) * h;
+            const isSignificant = entryDepth / score0 >= SNP_CLICKMAP_THRESHOLD;
+            const sameDepthAtSameX = skipDraw && entryDepth === lastDrawnDepth;
+            if ((skipDraw && !isSignificant) || sameDepthAtSameX) {
+                snpSkipped++;
+            }
+            else {
+                ctx.fillStyle = colorMap[base] || 'black';
+                ctx.fillRect(drawX, y1, w, barHeight);
+                snpDrawn++;
+                lastDrawnX = drawX;
+                lastDrawnDepth = entryDepth;
+            }
+            if (isSignificant) {
+                coords.push(drawX, y1, drawX + w, y1 + barHeight);
+                items.push({
+                    type: 'snp',
+                    base,
+                    count: entryDepth,
+                    total: score0,
+                    refbase: refbaseUpper,
+                    avgQual: entry.avgProbability,
+                    fwdCount: entry['1'] || 0,
+                    revCount: entry['-1'] || 0,
+                    bin: snpinfo,
+                    start: feature.get('start'),
+                    end: feature.get('end'),
+                });
+            }
+            curr += entryDepth;
+        }
+        drawNoncovEvents(passCtx, snpinfo, leftPx, score0, prevTotal, skipDraw, feature.get('start'));
+        prevTotal = score0;
+    }
+    return { snpDrawn, snpSkipped };
+}
+export async function renderSNPCoverageToCanvas(props) {
+    const { features, regions, bpPerPx, adapterConfig } = props;
+    const region = regions[0];
+    const width = (region.end - region.start) / bpPerPx;
+    const height = props.height;
+    const adapterId = adapterConfig.adapterId ?? 'unknown';
+    const skipFeatures = [];
+    const coverageFeatures = [];
+    for (const feature of features.values()) {
+        if (feature.get('type') === 'skip') {
+            skipFeatures.push({
+                uniqueId: feature.id(),
+                type: 'skip',
+                refName: region.refName,
+                start: feature.get('start'),
+                end: feature.get('end'),
+                strand: feature.get('strand'),
+                score: feature.get('score'),
+                effectiveStrand: feature.get('effectiveStrand'),
+            });
+        }
+        else {
+            coverageFeatures.push(feature);
+        }
+    }
+    const { reducedFeatures, coords, items, ...rest } = await renderToAbstractCanvas(width, height, props, ctx => drawSNPCoverage(ctx, props, coverageFeatures));
+    const serialized = {
+        ...rest,
+        features: reducedFeatures.map((f, idx) => ({
+            ...f,
+            uniqueId: `${adapterId}-${f.start}-${idx}`,
+        })),
+        skipFeatures,
+        clickMap: buildClickMap(coords, items),
+        height,
+        width,
+    };
+    return rpcResult(serialized, collectTransferables(rest));
+}
+function drawSNPCoverage(ctx, props, coverageFeatures) {
+    const { regions, bpPerPx, colorBy, displayCrossHatches, visibleModifications = {}, simplexModifications = [], scaleOpts, height: unadjustedHeight, theme: configTheme, config: cfg, ticks, stopToken, } = props;
     const theme = createJBrowseTheme(configTheme);
     const region = regions[0];
     const width = (region.end - region.start) / bpPerPx;
@@ -46,15 +359,12 @@ export async function makeImage(ctx, props) {
         scaleType: 'linear',
     });
     const originY = getOrigin(scaleOpts.scaleType);
-    const originLinear = getOrigin('linear');
     const indicatorThreshold = readConfObject(cfg, 'indicatorThreshold');
     const showInterbaseCounts = readConfObject(cfg, 'showInterbaseCounts');
-    const showArcs = readConfObject(cfg, 'showArcs');
     const showInterbaseIndicators = readConfObject(cfg, 'showInterbaseIndicators');
     const toY = (n) => height - (viewScale(n) || 0) + offset;
     const toHeight = (n) => toY(originY) - toY(n);
-    const toY2 = (n) => height - (indicatorViewScale(n) || 0) + offset;
-    const toHeight2 = (n) => toY2(originLinear) - toY2(n);
+    const toHeight2 = (n) => indicatorViewScale(n) || 0;
     const { bases, softclip, hardclip, insertion } = theme.palette;
     const colorMap = {
         A: bases.A.main,
@@ -69,199 +379,61 @@ export async function makeImage(ctx, props) {
         cpg_meth: 'red',
         cpg_unmeth: 'blue',
     };
+    const reducedFeatures = [];
+    let prevReducedLeftPx = Number.NEGATIVE_INFINITY;
+    const coords = [];
+    const items = [];
     ctx.fillStyle = colorMap.total;
-    forEachWithStopTokenCheck(features.values(), stopToken, feature => {
-        if (feature.get('type') === 'skip') {
-            return;
-        }
+    const lastCheck = createStopTokenChecker(stopToken);
+    for (let i = 0, l = coverageFeatures.length; i < l; i++) {
+        checkStopToken2(lastCheck);
+        const feature = coverageFeatures[i];
         const [leftPx, rightPx] = featureSpanPx(feature, region, bpPerPx);
         const w = rightPx - leftPx + fudgeFactor;
         const score = feature.get('score');
         ctx.fillRect(leftPx, toY(score), w, toHeight(score));
-    });
-    let prevTotal = 0;
-    const extraHorizontallyFlippedOffset = region.reversed ? 1 / bpPerPx : 0;
-    const drawingModifications = colorBy.type === 'modifications';
-    const drawingMethylation = colorBy.type === 'methylation';
-    const isolatedModification = (_a = colorBy.modifications) === null || _a === void 0 ? void 0 : _a.isolatedModification;
-    const simplexSet = new Set(simplexModifications);
-    forEachWithStopTokenCheck(features.values(), stopToken, feature => {
-        var _a;
-        if (feature.get('type') === 'skip') {
-            return;
+        if (leftPx > prevReducedLeftPx + 1) {
+            reducedFeatures.push({
+                start: feature.get('start'),
+                end: feature.get('end'),
+                score,
+                snpinfo: feature.get('snpinfo'),
+                refName: region.refName,
+            });
+            prevReducedLeftPx = leftPx;
         }
-        const [leftPx, rightPx] = featureSpanPx(feature, region, bpPerPx);
-        const snpinfo = feature.get('snpinfo');
-        const w = Math.max(rightPx - leftPx, 1);
-        const score0 = feature.get('score');
-        if (drawingModifications) {
-            let curr = 0;
-            const refbase = (_a = snpinfo.refbase) === null || _a === void 0 ? void 0 : _a.toUpperCase();
-            const { nonmods, mods, snps, ref } = snpinfo;
-            const nonmodKeys = Object.keys(nonmods).sort().reverse();
-            for (const m of nonmodKeys) {
-                const modKey = m.replace(/^(nonmod_|mod_)/, '');
-                const mod = visibleModifications[modKey];
-                if (!mod) {
-                    console.warn(`${m} not known yet`);
-                    continue;
-                }
-                if (isolatedModification && mod.type !== isolatedModification) {
-                    continue;
-                }
-                const { modifiable, detectable } = calculateModificationCounts({
-                    base: mod.base,
-                    isSimplex: simplexSet.has(mod.type),
-                    refbase,
-                    snps,
-                    ref,
-                    score0,
-                });
-                const { entryDepth, avgProbability = 0 } = snpinfo.nonmods[m];
-                const modFraction = (modifiable / score0) * (entryDepth / detectable);
-                const nonModColor = 'blue';
-                const c = alphaColor(nonModColor, avgProbability);
-                const height = toHeight(score0);
-                const bottom = toY(score0) + height;
-                ctx.fillStyle = c;
-                ctx.fillRect(Math.round(leftPx), bottom - (curr + modFraction * height), w, modFraction * height);
-                curr += modFraction * height;
-            }
-            const modKeys = Object.keys(mods).sort().reverse();
-            for (const m of modKeys) {
-                const modKey = m.replace('mod_', '');
-                const mod = visibleModifications[modKey];
-                if (!mod) {
-                    console.warn(`${m} not known yet`);
-                    continue;
-                }
-                if (isolatedModification && mod.type !== isolatedModification) {
-                    continue;
-                }
-                const { modifiable, detectable } = calculateModificationCounts({
-                    base: mod.base,
-                    isSimplex: simplexSet.has(mod.type),
-                    refbase,
-                    snps,
-                    ref,
-                    score0,
-                });
-                const { entryDepth, avgProbability = 0 } = mods[m];
-                const modFraction = (modifiable / score0) * (entryDepth / detectable);
-                const baseColor = mod.color || 'black';
-                const c = alphaColor(baseColor, avgProbability);
-                const height = toHeight(score0);
-                const bottom = toY(score0) + height;
-                ctx.fillStyle = c;
-                ctx.fillRect(Math.round(leftPx), bottom - (curr + modFraction * height), w, modFraction * height);
-                curr += modFraction * height;
-            }
-        }
-        else if (drawingMethylation) {
-            const { depth, nonmods, mods } = snpinfo;
-            let curr = 0;
-            for (const base of Object.keys(mods).sort().reverse()) {
-                const { entryDepth } = mods[base];
-                const height = toHeight(score0);
-                const bottom = toY(score0) + height;
-                ctx.fillStyle = colorMap[base] || 'black';
-                ctx.fillRect(Math.round(leftPx), bottom - ((entryDepth + curr) / depth) * height, w, (entryDepth / depth) * height);
-                curr += entryDepth;
-            }
-            for (const base of Object.keys(nonmods).sort().reverse()) {
-                const { entryDepth } = nonmods[base];
-                const height = toHeight(score0);
-                const bottom = toY(score0) + height;
-                ctx.fillStyle = colorMap[base] || 'black';
-                ctx.fillRect(Math.round(leftPx), bottom - ((entryDepth + curr) / depth) * height, w, (entryDepth / depth) * height);
-                curr += entryDepth;
-            }
-        }
-        else {
-            const { depth, snps } = snpinfo;
-            let curr = 0;
-            for (const base of Object.keys(snps).sort().reverse()) {
-                const { entryDepth } = snps[base];
-                const height = toHeight(score0);
-                const bottom = toY(score0) + height;
-                ctx.fillStyle = colorMap[base] || 'black';
-                ctx.fillRect(Math.round(leftPx), bottom - ((entryDepth + curr) / depth) * height, w, (entryDepth / depth) * height);
-                curr += entryDepth;
-            }
-        }
-        const interbaseEvents = Object.keys(snpinfo.noncov);
-        if (showInterbaseCounts) {
-            let curr = 0;
-            for (const base of interbaseEvents) {
-                const { entryDepth } = snpinfo.noncov[base];
-                const r = 0.6;
-                ctx.fillStyle = colorMap[base];
-                ctx.fillRect(leftPx - r + extraHorizontallyFlippedOffset, INTERBASE_INDICATOR_HEIGHT + toHeight2(curr), r * 2, toHeight2(entryDepth));
-                curr += entryDepth;
-            }
-        }
-        if (showInterbaseIndicators) {
-            let accum = 0;
-            let max = 0;
-            let maxBase = '';
-            for (const base of interbaseEvents) {
-                const { entryDepth } = snpinfo.noncov[base];
-                accum += entryDepth;
-                if (entryDepth > max) {
-                    max = entryDepth;
-                    maxBase = base;
-                }
-            }
-            const indicatorComparatorScore = Math.max(score0, prevTotal);
-            if (accum > indicatorComparatorScore * indicatorThreshold &&
-                indicatorComparatorScore > MINIMUM_INTERBASE_INDICATOR_READ_DEPTH) {
-                ctx.fillStyle = colorMap[maxBase];
-                ctx.beginPath();
-                const l = leftPx + extraHorizontallyFlippedOffset;
-                ctx.moveTo(l - INTERBASE_INDICATOR_WIDTH / 2, 0);
-                ctx.lineTo(l + INTERBASE_INDICATOR_WIDTH / 2, 0);
-                ctx.lineTo(l, INTERBASE_INDICATOR_HEIGHT);
-                ctx.fill();
-            }
-        }
-        prevTotal = score0;
-    });
-    if (showArcs) {
-        forEachWithStopTokenCheck(features.values(), stopToken, feature => {
-            if (feature.get('type') !== 'skip') {
-                return;
-            }
-            const s = feature.get('start');
-            const e = feature.get('end');
-            const [left, right] = bpSpanPx(s, e, region, bpPerPx);
-            ctx.beginPath();
-            const effectiveStrand = feature.get('effectiveStrand');
-            const pos = 'rgba(255,200,200,0.7)';
-            const neg = 'rgba(200,200,255,0.7)';
-            const neutral = 'rgba(200,200,200,0.7)';
-            if (effectiveStrand === 1) {
-                ctx.strokeStyle = pos;
-            }
-            else if (effectiveStrand === -1) {
-                ctx.strokeStyle = neg;
-            }
-            else {
-                ctx.strokeStyle = neutral;
-            }
-            ctx.lineWidth = Math.log(feature.get('score') + 1);
-            ctx.moveTo(left, height - offset * 2);
-            ctx.bezierCurveTo(left, 0, right, 0, right, height - offset * 2);
-            ctx.stroke();
-        });
+    }
+    const extraHorizontallyFlippedOffset = region.reversed ? 1 / bpPerPx : 0;
+    const passCtx = {
+        ctx,
+        coverageFeatures,
+        region,
+        bpPerPx,
+        colorMap,
+        toY,
+        toHeight,
+        toHeight2,
+        lastCheck,
+        extraHorizontallyFlippedOffset,
+        coords,
+        items,
+        indicatorThreshold,
+        showInterbaseCounts,
+        showInterbaseIndicators,
+    };
+    if (colorBy.type === 'modifications') {
+        const isolatedModification = colorBy.modifications?.isolatedModification;
+        const simplexSet = new Set(simplexModifications);
+        drawSecondPassModifications(passCtx, visibleModifications, isolatedModification, simplexSet);
+    }
+    else if (colorBy.type === 'methylation') {
+        drawSecondPassMethylation(passCtx);
+    }
+    else {
+        drawSecondPassSNPs(passCtx);
     }
     if (displayCrossHatches) {
-        ctx.lineWidth = 1;
-        ctx.strokeStyle = 'rgba(140,140,140,0.8)';
-        for (const tick of ticks.values) {
-            ctx.beginPath();
-            ctx.moveTo(0, Math.round(toY(tick)));
-            ctx.lineTo(width, Math.round(toY(tick)));
-            ctx.stroke();
-        }
+        drawCrossHatches(ctx, ticks, width, toY);
     }
+    return { reducedFeatures, coords, items };
 }