@jbrowse/plugin-alignments 4.0.4 → 4.1.3

package/esm/RenderLinearReadCloudDisplayRPC/drawFeatsCloud.js

@@ -1,37 +1,24 @@
 import { scaleLog } from '@mui/x-charts-vendor/d3-scale';
 export const CLOUD_HEIGHT_PADDING = 20;
 const DEFAULT_MAX_DISTANCE = 1000;
-export function createCloudScale(minDistance, maxDistance, height) {
+export function createCloudScale(maxDistance, height) {
     return scaleLog()
         .base(2)
-        .domain([Math.max(1, minDistance), Math.max(2, maxDistance)])
+        .domain([1, Math.max(2, maxDistance)])
         .range([0, height - CLOUD_HEIGHT_PADDING])
         .clamp(true);
 }
-export function calculateCloudTicks(domain, height) {
-    const [minDistance, maxDistance] = domain;
-    const scale = createCloudScale(minDistance, maxDistance, height);
+export function calculateCloudTicks(maxDistance, height) {
+    const scale = createCloudScale(maxDistance, height);
     const tickValues = scale.ticks(6);
     const ticks = tickValues.map(value => ({
         value,
         y: scale(value),
     }));
-    return { ticks, height, minDistance, maxDistance };
+    return { ticks, height, maxDistance };
 }
-export function calculateCloudYOffsetsUtil(computedChains, height, cloudDomain) {
+export function calculateCloudYOffsetsUtil(computedChains, height) {
     const chainYOffsets = new Map();
-    if (cloudDomain) {
-        const [, maxDistance] = cloudDomain;
-        const scale = createCloudScale(1, maxDistance, height);
-        for (const { id, distance } of computedChains) {
-            const top = distance > 0 ? scale(distance) : 0;
-            chainYOffsets.set(id, top);
-        }
-        return {
-            chainYOffsets,
-            cloudMaxDistance: maxDistance,
-        };
-    }
     let maxDistance = Number.MIN_VALUE;
     for (const { distance } of computedChains) {
         if (distance > 0) {
@@ -41,7 +28,7 @@ export function calculateCloudYOffsetsUtil(computedChains, height, cloudDomain)
     if (maxDistance === Number.MIN_VALUE) {
         maxDistance = DEFAULT_MAX_DISTANCE;
     }
-    const scale = createCloudScale(1, maxDistance, height);
+    const scale = createCloudScale(maxDistance, height);
     for (const { id, distance } of computedChains) {
         const top = distance > 0 ? scale(distance) : 0;
         chainYOffsets.set(id, top);

package/esm/RenderLinearReadCloudDisplayRPC/drawFeatsCommon.d.ts

@@ -3,7 +3,7 @@ import type { FlatbushItem } from '../PileupRenderer/types.ts';
 import type { FlatbushEntry } from '../shared/flatbushType.ts';
 import type { ChainData, ColorBy, ModificationTypeWithColor } from '../shared/types.ts';
 import type { AnyConfigurationModel } from '@jbrowse/core/configuration';
-import type { Feature } from '@jbrowse/core/util';
+import type { Feature, LastStopTokenCheck } from '@jbrowse/core/util';
 import type { BaseBlock } from '@jbrowse/core/util/blockTypes';
 import type { ThemeOptions } from '@mui/material';
 interface ViewForDrawing {
@@ -44,7 +44,7 @@ export interface DrawFeatsParams {
     regions: BaseBlock[];
     bpPerPx: number;
     canvasWidth: number;
-    stopToken?: string;
+    stopTokenCheck?: LastStopTokenCheck;
     visibleModifications?: Record<string, ModificationTypeWithColor>;
     hideSmallIndels?: boolean;
     hideMismatches?: boolean;

package/esm/RenderLinearReadCloudDisplayRPC/drawFeatsCommon.js

@@ -176,7 +176,7 @@ export function addChainMouseoverRects(computedChains, chainYOffsets, featureHei
     }
 }
 export function drawFeatsCore({ ctx, params, view, calculateYOffsets, }) {
-    const { chainData, featureHeight, colorBy, drawSingletons, drawProperPairs, flipStrandLongReadChains, stopToken, } = params;
+    const { chainData, featureHeight, colorBy, drawSingletons, drawProperPairs, flipStrandLongReadChains, stopTokenCheck, } = params;
     const type = colorBy.type || 'insertSizeAndOrientation';
     const { chains } = chainData;
     const filteredChains = filterChains(chains, drawSingletons, drawProperPairs, type, chainData);
@@ -210,7 +210,7 @@ export function drawFeatsCore({ ctx, params, view, calculateYOffsets, }) {
             bpPerPx: params.bpPerPx,
             colorBy: params.colorBy,
             visibleModifications: params.visibleModifications,
-            stopToken,
+            stopTokenCheck,
             hideSmallIndels: params.hideSmallIndels,
             hideMismatches: params.hideMismatches,
             hideLargeIndels: params.hideLargeIndels,
@@ -231,7 +231,7 @@ export function drawFeatsCore({ ctx, params, view, calculateYOffsets, }) {
             bpPerPx: params.bpPerPx,
             colorBy: params.colorBy,
             visibleModifications: params.visibleModifications,
-            stopToken,
+            stopTokenCheck,
             hideSmallIndels: params.hideSmallIndels,
             hideMismatches: params.hideMismatches,
             hideLargeIndels: params.hideLargeIndels,

package/esm/RenderLinearReadCloudDisplayRPC/drawLongReadChains.d.ts

@@ -2,9 +2,10 @@ import type { MismatchData } from './drawChainsUtil.ts';
 import type { ComputedChain } from './drawFeatsCommon.ts';
 import type { ChainData, ColorBy, ModificationTypeWithColor } from '../shared/types.ts';
 import type { AnyConfigurationModel } from '@jbrowse/core/configuration';
+import type { LastStopTokenCheck } from '@jbrowse/core/util';
 import type { BaseBlock } from '@jbrowse/core/util/blockTypes';
 import type { ThemeOptions } from '@mui/material';
-export declare function drawLongReadChains({ ctx, chainData, chainYOffsets, renderChevrons, featureHeight, computedChains, flipStrandLongReadChains, config, theme: configTheme, region, regionStartPx, bpPerPx, colorBy, visibleModifications, stopToken, hideSmallIndels, hideMismatches, hideLargeIndels, showOutline, }: {
+export declare function drawLongReadChains({ ctx, chainData, chainYOffsets, renderChevrons, featureHeight, computedChains, flipStrandLongReadChains, config, theme: configTheme, region, regionStartPx, bpPerPx, colorBy, visibleModifications, stopTokenCheck, hideSmallIndels, hideMismatches, hideLargeIndels, showOutline, }: {
     ctx: CanvasRenderingContext2D;
     chainData: ChainData;
     chainYOffsets: Map<string, number>;
@@ -19,7 +20,7 @@ export declare function drawLongReadChains({ ctx, chainData, chainYOffsets, rend
     bpPerPx: number;
     colorBy: ColorBy;
     visibleModifications?: Record<string, ModificationTypeWithColor>;
-    stopToken?: string;
+    stopTokenCheck?: LastStopTokenCheck;
     hideSmallIndels?: boolean;
     hideMismatches?: boolean;
     hideLargeIndels?: boolean;

package/esm/RenderLinearReadCloudDisplayRPC/drawLongReadChains.js

@@ -1,17 +1,16 @@
-import { checkStopToken2, createStopTokenChecker, } from '@jbrowse/core/util/stopToken';
+import { checkStopToken2 } from '@jbrowse/core/util/stopToken';
 import { calculateFeaturePositionPx, featureOverlapsRegion, getChainBoundsOnRef, getConnectingLineColor, getMismatchRenderingConfig, getStrandColorKey, renderFeatureMismatchesAndModifications, renderFeatureShape, } from "./drawChainsUtil.js";
 import { lineToCtx } from "../shared/canvasUtils.js";
 import { fillColor, getSingletonColor, strokeColor } from "../shared/color.js";
 import { getPrimaryStrandFromFlags } from "../shared/primaryStrand.js";
-export function drawLongReadChains({ ctx, chainData, chainYOffsets, renderChevrons, featureHeight, computedChains, flipStrandLongReadChains, config, theme: configTheme, region, regionStartPx, bpPerPx, colorBy, visibleModifications, stopToken, hideSmallIndels, hideMismatches, hideLargeIndels, showOutline, }) {
+export function drawLongReadChains({ ctx, chainData, chainYOffsets, renderChevrons, featureHeight, computedChains, flipStrandLongReadChains, config, theme: configTheme, region, regionStartPx, bpPerPx, colorBy, visibleModifications, stopTokenCheck, hideSmallIndels, hideMismatches, hideLargeIndels, showOutline, }) {
     const mismatchConfig = getMismatchRenderingConfig(ctx, config, configTheme, colorBy, { hideSmallIndels, hideMismatches, hideLargeIndels });
     const canvasWidth = region.widthPx;
     const regionStart = region.start;
     const allCoords = [];
     const allItems = [];
-    const lastCheck = createStopTokenChecker(stopToken);
     for (const computedChain of computedChains) {
-        checkStopToken2(lastCheck);
+        checkStopToken2(stopTokenCheck);
         const { id, chain, isPairedEnd, nonSupplementary } = computedChain;
         if (isPairedEnd) {
             continue;

package/esm/RenderLinearReadCloudDisplayRPC/drawPairChains.d.ts

@@ -2,9 +2,10 @@ import type { MismatchData } from './drawChainsUtil.ts';
 import type { ComputedChain } from './drawFeatsCommon.ts';
 import type { ChainData, ColorBy, ModificationTypeWithColor } from '../shared/types.ts';
 import type { AnyConfigurationModel } from '@jbrowse/core/configuration';
+import type { LastStopTokenCheck } from '@jbrowse/core/util';
 import type { BaseBlock } from '@jbrowse/core/util/blockTypes';
 import type { ThemeOptions } from '@mui/material';
-export declare function drawPairChains({ ctx, type, chainData, chainYOffsets, renderChevrons, featureHeight, computedChains, config, theme: configTheme, region, regionStartPx, bpPerPx, colorBy, visibleModifications, stopToken, hideSmallIndels, hideMismatches, hideLargeIndels, showOutline, }: {
+export declare function drawPairChains({ ctx, type, chainData, chainYOffsets, renderChevrons, featureHeight, computedChains, config, theme: configTheme, region, regionStartPx, bpPerPx, colorBy, visibleModifications, stopTokenCheck, hideSmallIndels, hideMismatches, hideLargeIndels, showOutline, }: {
     ctx: CanvasRenderingContext2D;
     type: string;
     chainData: ChainData;
@@ -19,7 +20,7 @@ export declare function drawPairChains({ ctx, type, chainData, chainYOffsets, re
     bpPerPx: number;
     colorBy: ColorBy;
     visibleModifications?: Record<string, ModificationTypeWithColor>;
-    stopToken?: string;
+    stopTokenCheck?: LastStopTokenCheck;
     hideSmallIndels?: boolean;
     hideMismatches?: boolean;
     hideLargeIndels?: boolean;

package/esm/RenderLinearReadCloudDisplayRPC/drawPairChains.js

@@ -1,16 +1,15 @@
-import { checkStopToken2, createStopTokenChecker, } from '@jbrowse/core/util/stopToken';
+import { checkStopToken2 } from '@jbrowse/core/util/stopToken';
 import { calculateFeaturePositionPx, featureOverlapsRegion, getChainBoundsOnRef, getConnectingLineColor, getMismatchRenderingConfig, renderFeatureMismatchesAndModifications, renderFeatureShape, } from "./drawChainsUtil.js";
 import { lineToCtx } from "../shared/canvasUtils.js";
 import { fillColor, getPairedColor, strokeColor } from "../shared/color.js";
-export function drawPairChains({ ctx, type, chainData, chainYOffsets, renderChevrons, featureHeight, computedChains, config, theme: configTheme, region, regionStartPx, bpPerPx, colorBy, visibleModifications, stopToken, hideSmallIndels, hideMismatches, hideLargeIndels, showOutline, }) {
+export function drawPairChains({ ctx, type, chainData, chainYOffsets, renderChevrons, featureHeight, computedChains, config, theme: configTheme, region, regionStartPx, bpPerPx, colorBy, visibleModifications, stopTokenCheck, hideSmallIndels, hideMismatches, hideLargeIndels, showOutline, }) {
     const mismatchConfig = getMismatchRenderingConfig(ctx, config, configTheme, colorBy, { hideSmallIndels, hideMismatches, hideLargeIndels });
     const canvasWidth = region.widthPx;
     const regionStart = region.start;
     const allCoords = [];
     const allItems = [];
-    const lastCheck = createStopTokenChecker(stopToken);
     for (const computedChain of computedChains) {
-        checkStopToken2(lastCheck);
+        checkStopToken2(stopTokenCheck);
         const { id, chain, isPairedEnd, nonSupplementary } = computedChain;
         if (!isPairedEnd) {
             continue;
@@ -89,7 +88,7 @@ export function drawPairChains({ ctx, type, chainData, chainYOffsets, renderChev
                 allItems,
             });
         }
-        checkStopToken2(lastCheck);
+        checkStopToken2(stopTokenCheck);
     }
     return { coords: allCoords, items: allItems };
 }

package/esm/RenderLinearReadCloudDisplayRPC/executeRenderLinearReadCloudDisplay.js

@@ -3,7 +3,7 @@ import { collectTransferables, dedupe, groupBy, max, min, renderToAbstractCanvas
 import { bpToPx } from '@jbrowse/core/util/Base1DUtils';
 import Base1DView from '@jbrowse/core/util/Base1DViewModel';
 import { rpcResult } from '@jbrowse/core/util/librpc';
-import { checkStopToken } from '@jbrowse/core/util/stopToken';
+import { checkStopToken2, createStopTokenChecker, } from '@jbrowse/core/util/stopToken';
 import { getSnapshot } from '@jbrowse/mobx-state-tree';
 import { firstValueFrom } from 'rxjs';
 import { toArray } from 'rxjs/operators';
@@ -12,7 +12,8 @@ import { computeChainBounds, drawFeatsCore, filterChains, sortComputedChains, }
 import { calculateStackYOffsetsUtil } from "./drawFeatsStack.js";
 import { getInsertSizeStats } from "../shared/insertSizeStats.js";
 export async function executeRenderLinearReadCloudDisplay({ pluginManager, args, }) {
-    const { sessionId, view: viewSnapshot, adapterConfig, sequenceAdapter, config, theme, featureHeight, noSpacing, drawCloud, colorBy, drawSingletons, drawProperPairs, flipStrandLongReadChains, trackMaxHeight, cloudModeHeight, cloudDomain, highResolutionScaling, exportSVG, statusCallback = () => { }, stopToken, visibleModifications, hideSmallIndels, hideMismatches, hideLargeIndels, showOutline, } = args;
+    const { sessionId, view: viewSnapshot, adapterConfig, sequenceAdapter, config, theme, featureHeight, noSpacing, drawCloud, colorBy, drawSingletons, drawProperPairs, flipStrandLongReadChains, trackMaxHeight, cloudModeHeight, highResolutionScaling, exportSVG, statusCallback = () => { }, stopToken, visibleModifications, hideSmallIndels, hideMismatches, hideLargeIndels, showOutline, } = args;
+    const stopTokenCheck = createStopTokenChecker(stopToken);
     const view = Base1DView.create(viewSnapshot);
     if (viewSnapshot.width) {
         view.setVolatileWidth(viewSnapshot.width);
@@ -45,7 +46,7 @@ export async function executeRenderLinearReadCloudDisplay({ pluginManager, args,
         dataAdapter.setSequenceAdapterConfig(sequenceAdapter);
     }
     const featuresArray = await updateStatus('Fetching alignments', statusCallback, () => firstValueFrom(dataAdapter.getFeaturesInMultipleRegions(regions, args).pipe(toArray())));
-    checkStopToken(stopToken);
+    checkStopToken2(stopTokenCheck);
     const deduped = dedupe(featuresArray, f => f.id());
     const { chains, stats } = await updateStatus('Processing alignments', statusCallback, async () => {
         const tlens = [];
@@ -74,7 +75,7 @@ export async function executeRenderLinearReadCloudDisplay({ pluginManager, args,
         };
     });
     const chainData = { chains, stats };
-    checkStopToken(stopToken);
+    checkStopToken2(stopTokenCheck);
     const { computedChains } = await updateStatus('Calculating layout', statusCallback, async () => {
         const filtered = filterChains(chains, drawSingletons, drawProperPairs, colorBy.type || 'insertSizeAndOrientation', chainData);
         const computed = computeChainBounds(filtered, viewSnap);
@@ -115,7 +116,7 @@ export async function executeRenderLinearReadCloudDisplay({ pluginManager, args,
                 theme,
                 regions,
                 bpPerPx,
-                stopToken,
+                stopTokenCheck,
                 visibleModifications,
                 hideSmallIndels,
                 hideMismatches,
@@ -125,7 +126,7 @@ export async function executeRenderLinearReadCloudDisplay({ pluginManager, args,
             view: viewSnap,
             calculateYOffsets: (chains) => {
                 return drawCloud
-                    ? calculateCloudYOffsetsUtil(chains, actualHeight, cloudDomain)
+                    ? calculateCloudYOffsetsUtil(chains, actualHeight)
                     : calculateStackYOffsetsUtil(chains, featureHeight, noSpacing, trackMaxHeight ?? 1200);
             },
         });

package/esm/SNPCoverageRenderer/buildClickMap.d.ts

@@ -0,0 +1,5 @@
+import type { ClickMapItem } from './types.ts';
+export declare function buildClickMap(coords: number[], items: ClickMapItem[]): {
+    flatbush: ArrayBufferLike;
+    items: ClickMapItem[];
+};

package/esm/SNPCoverageRenderer/buildClickMap.js

@@ -0,0 +1,17 @@
+import Flatbush from '@jbrowse/core/util/flatbush';
+export 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,
+    };
+}

package/esm/SNPCoverageRenderer/calculateModificationCounts.d.ts

@@ -1,20 +1,2 @@
-export interface StrandCounts {
-    readonly entryDepth: number;
-    readonly '1': number;
-    readonly '-1': number;
-    readonly '0': number;
-}
-export interface ModificationCountsParams {
-    readonly base: string;
-    readonly isSimplex: boolean;
-    readonly refbase: string | undefined;
-    readonly snps: Readonly<Record<string, Partial<StrandCounts>>>;
-    readonly ref: StrandCounts;
-    readonly score0: number;
-}
-interface ModificationCountsResult {
-    readonly modifiable: number;
-    readonly detectable: number;
-}
+import type { ModificationCountsParams, ModificationCountsResult } from './types.ts';
 export declare function calculateModificationCounts({ base, isSimplex, refbase, snps, ref, score0, }: ModificationCountsParams): ModificationCountsResult;
-export {};

package/esm/SNPCoverageRenderer/calculateModificationCounts.js

@@ -1,9 +1,4 @@
-const complementBase = {
-    C: 'G',
-    G: 'C',
-    A: 'T',
-    T: 'A',
-};
+import { complementBase } from "./constants.js";
 export function calculateModificationCounts({ base, isSimplex, refbase, snps, ref, score0, }) {
     if (base === 'N') {
         return { modifiable: score0, detectable: score0 };

package/esm/SNPCoverageRenderer/constants.d.ts

@@ -0,0 +1,12 @@
+export declare const INTERBASE_INDICATOR_WIDTH = 7;
+export declare const INTERBASE_INDICATOR_HEIGHT = 4.5;
+export declare const MINIMUM_INTERBASE_INDICATOR_READ_DEPTH = 7;
+export declare const INTERBASE_DRAW_THRESHOLD = 0.1;
+export declare const complementBase: {
+    readonly C: "G";
+    readonly G: "C";
+    readonly A: "T";
+    readonly T: "A";
+};
+export declare const fudgeFactor = 0.6;
+export declare const SNP_CLICKMAP_THRESHOLD = 0.04;

package/esm/SNPCoverageRenderer/constants.js

@@ -0,0 +1,12 @@
+export const INTERBASE_INDICATOR_WIDTH = 7;
+export const INTERBASE_INDICATOR_HEIGHT = 4.5;
+export const MINIMUM_INTERBASE_INDICATOR_READ_DEPTH = 7;
+export const INTERBASE_DRAW_THRESHOLD = 0.1;
+export const complementBase = {
+    C: 'G',
+    G: 'C',
+    A: 'T',
+    T: 'A',
+};
+export const fudgeFactor = 0.6;
+export const SNP_CLICKMAP_THRESHOLD = 0.04;

package/esm/SNPCoverageRenderer/createInterbaseItem.d.ts

@@ -0,0 +1,7 @@
+import type { InterbaseIndicatorItem } from './types.ts';
+export declare function createInterbaseItem(maxBase: string, count: number, total: number, start: number, maxEntry?: {
+    avgLength?: number;
+    minLength?: number;
+    maxLength?: number;
+    topSequence?: string;
+}): InterbaseIndicatorItem;

package/esm/SNPCoverageRenderer/createInterbaseItem.js

@@ -0,0 +1,13 @@
+export 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,
+    };
+}

package/esm/SNPCoverageRenderer/drawCrossHatches.d.ts

@@ -0,0 +1,3 @@
+export declare function drawCrossHatches(ctx: CanvasRenderingContext2D, ticks: {
+    values: number[];
+}, width: number, toY: (n: number) => number): void;

package/esm/SNPCoverageRenderer/drawCrossHatches.js

@@ -0,0 +1,10 @@
+export 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();
+    }
+}

package/esm/SNPCoverageRenderer/drawNoncovEvents.d.ts

@@ -0,0 +1,3 @@
+import type { SecondPassContext } from './types.ts';
+import type { BaseCoverageBin } from '../shared/types.ts';
+export declare function drawNoncovEvents(passCtx: SecondPassContext, snpinfo: BaseCoverageBin, leftPx: number, score0: number, prevTotal: number, skipDraw: boolean, fstart: number): void;

package/esm/SNPCoverageRenderer/drawNoncovEvents.js

@@ -0,0 +1,56 @@
+import { INTERBASE_DRAW_THRESHOLD, INTERBASE_INDICATOR_HEIGHT, INTERBASE_INDICATOR_WIDTH, MINIMUM_INTERBASE_INDICATOR_READ_DEPTH, } from "./constants.js";
+import { createInterbaseItem } from "./createInterbaseItem.js";
+export 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));
+            }
+        }
+    }
+}

package/esm/SNPCoverageRenderer/drawSecondPassMethylation.d.ts

@@ -0,0 +1,2 @@
+import type { SecondPassContext, SecondPassStats } from './types.ts';
+export declare function drawSecondPassMethylation(passCtx: SecondPassContext): SecondPassStats;

package/esm/SNPCoverageRenderer/drawSecondPassMethylation.js

@@ -0,0 +1,30 @@
+import { checkStopToken2, featureSpanPx } from '@jbrowse/core/util';
+import { drawNoncovEvents } from "./drawNoncovEvents.js";
+import { drawStackedBars } from "./drawStackedBars.js";
+export function drawSecondPassMethylation(passCtx) {
+    const { ctx, coverageFeatures, region, bpPerPx, colorMap, toY, toHeight, stopTokenCheck, } = passCtx;
+    let snpDrawn = 0;
+    const snpSkipped = 0;
+    let lastDrawnX = Number.NEGATIVE_INFINITY;
+    let prevTotal = 0;
+    for (let i = 0, l = coverageFeatures.length; i < l; i++) {
+        checkStopToken2(stopTokenCheck);
+        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, 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);
+        snpDrawn++;
+        lastDrawnX = drawX;
+        drawNoncovEvents(passCtx, snpinfo, leftPx, score0, prevTotal, skipDraw, feature.get('start'));
+        prevTotal = score0;
+    }
+    return { snpDrawn, snpSkipped };
+}

package/esm/SNPCoverageRenderer/drawSecondPassModifications.d.ts

@@ -0,0 +1,6 @@
+import type { SecondPassContext, SecondPassStats } from './types.ts';
+export declare function drawSecondPassModifications(passCtx: SecondPassContext, visibleModifications: Record<string, {
+    base: string;
+    type: string;
+    color?: string;
+}>, isolatedModification: string | undefined, simplexSet: Set<string>): SecondPassStats;

package/esm/SNPCoverageRenderer/drawSecondPassModifications.js

@@ -0,0 +1,85 @@
+import { checkStopToken2, featureSpanPx } from '@jbrowse/core/util';
+import { calculateModificationCounts } from "./calculateModificationCounts.js";
+import { drawNoncovEvents } from "./drawNoncovEvents.js";
+import { alphaColor } from "../shared/util.js";
+export function drawSecondPassModifications(passCtx, visibleModifications, isolatedModification, simplexSet) {
+    const { ctx, coverageFeatures, region, bpPerPx, toY, toHeight, stopTokenCheck, } = 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(stopTokenCheck);
+        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: snps || {},
+                ref: ref || { entryDepth: 0, '1': 0, '-1': 0, '0': 0 },
+                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: snps || {},
+                ref: ref || { entryDepth: 0, '1': 0, '-1': 0, '0': 0 },
+                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 };
+}

package/esm/SNPCoverageRenderer/drawSecondPassSNPs.d.ts

@@ -0,0 +1,2 @@
+import type { SecondPassContext, SecondPassStats } from './types.ts';
+export declare function drawSecondPassSNPs(passCtx: SecondPassContext): SecondPassStats;

package/esm/SNPCoverageRenderer/drawSecondPassSNPs.js

@@ -0,0 +1,64 @@
+import { checkStopToken2, featureSpanPx } from '@jbrowse/core/util';
+import { SNP_CLICKMAP_THRESHOLD } from "./constants.js";
+import { drawNoncovEvents } from "./drawNoncovEvents.js";
+export function drawSecondPassSNPs(passCtx) {
+    const { ctx, coverageFeatures, region, bpPerPx, colorMap, toY, toHeight, stopTokenCheck, 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(stopTokenCheck);
+        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 };
+}

package/esm/SNPCoverageRenderer/drawStackedBars.d.ts

@@ -0,0 +1,3 @@
+export declare function drawStackedBars(ctx: CanvasRenderingContext2D, entries: Record<string, {
+    entryDepth: number;
+}>, colorMap: Record<string, string>, x: number, bottom: number, w: number, h: number, depth: number, startCurr: number): number;