@jbrowse/plugin-alignments 3.6.5 → 3.7.0

package/esm/ModificationParser/detectSimplexModifications.js

@@ -0,0 +1,17 @@
+export function detectSimplexModifications(modifications) {
+    const minusStrandMods = new Set();
+    const simplexModifications = new Set();
+    for (const modification of modifications) {
+        const mod = modification;
+        if (mod.strand === '-') {
+            minusStrandMods.add(mod.type);
+        }
+    }
+    for (const modification of modifications) {
+        const mod = modification;
+        if (mod.strand === '+' && !minusStrandMods.has(mod.type)) {
+            simplexModifications.add(mod.type);
+        }
+    }
+    return simplexModifications;
+}

package/esm/ModificationParser/getModPositions.d.ts

@@ -1,6 +1,6 @@
 export declare function getModPositions(mm: string, fseq: string, fstrand: number): {
     type: string;
-    positions: number[];
     base: string;
     strand: string;
+    positions: any[];
 }[];

package/esm/ModificationParser/getModPositions.js

@@ -2,6 +2,7 @@ import { revcom } from '@jbrowse/core/util';
 import { modificationRegex } from './consts';
 export function getModPositions(mm, fseq, fstrand) {
     const seq = fstrand === -1 ? revcom(fseq) : fseq;
+    const seqLength = seq.length;
     const mods = mm.split(';');
     const result = [];
     for (const mod of mods) {
@@ -16,44 +17,40 @@ export function getModPositions(mm, fseq, fstrand) {
         }
         const [, base, strand, typestr] = matches;
         const types = typestr.split(/(\d+|.)/);
-        if (strand === '-') {
-            console.warn('unsupported negative strand modifications');
-            result.push({
-                type: 'unsupported',
-                positions: [],
-                base: base,
-                strand: strand,
-            });
-        }
         for (const type of types) {
             if (type === '') {
                 continue;
             }
+            const splitLength = split.length;
             let currPos = 0;
-            const positions = [];
-            for (let i = 1, l = split.length; i < l; i++) {
+            const positions = fstrand === -1 ? new Array(splitLength - 1) : [];
+            let writeIndex = fstrand === -1 ? splitLength - 2 : 0;
+            for (let i = 1; i < splitLength; i++) {
                 let delta = +split[i];
                 do {
                     if (base === 'N' || base === seq[currPos]) {
                         delta--;
                     }
                     currPos++;
-                } while (delta >= 0 && currPos < seq.length);
+                } while (delta >= 0 && currPos < seqLength);
                 if (fstrand === -1) {
-                    const pos = seq.length - currPos;
+                    const pos = seqLength - currPos;
                     if (pos >= 0) {
-                        positions.unshift(pos);
+                        positions[writeIndex--] = pos;
+                    }
+                    else {
                     }
                 }
                 else {
-                    positions.push(currPos - 1);
+                    positions[writeIndex++] = currPos - 1;
                 }
             }
+            const validPositions = fstrand === -1 ? positions.slice(writeIndex + 1) : positions;
             result.push({
                 type,
                 base: base,
                 strand: strand,
-                positions,
+                positions: validPositions,
             });
         }
     }

package/esm/PileupRPC/methods/GetVisibleModifications.d.ts

@@ -10,5 +10,8 @@ export default class PileupGetVisibleModifications extends PileupBaseRPC {
         regions: Region[];
         sessionId: string;
         tag: string;
-    }, rpcDriver: string): Promise<ModificationType[]>;
+    }, rpcDriver: string): Promise<{
+        modifications: ModificationType[];
+        simplexModifications: string[];
+    }>;
 }

package/esm/PileupRPC/methods/GetVisibleModifications.js

@@ -1,6 +1,7 @@
 import { getAdapter } from '@jbrowse/core/data_adapters/dataAdapterCache';
 import { firstValueFrom } from 'rxjs';
 import { toArray } from 'rxjs/operators';
+import { detectSimplexModifications } from '../../ModificationParser/detectSimplexModifications';
 import { getModTypes } from '../../ModificationParser/getModTypes';
 import { getTagAlt } from '../../util';
 import PileupBaseRPC from '../base';
@@ -20,11 +21,23 @@ export default class PileupGetVisibleModifications extends PileupBaseRPC {
         for (const feat of featuresArray) {
             const mmTag = getTagAlt(feat, 'MM', 'Mm');
             for (const mod of getModTypes(typeof mmTag === 'string' ? mmTag : '')) {
-                if (!uniqueModifications.has(mod.type)) {
-                    uniqueModifications.set(mod.type, mod);
+                const key = `${mod.base}${mod.strand}${mod.type}`;
+                if (!uniqueModifications.has(key)) {
+                    uniqueModifications.set(key, mod);
                 }
             }
         }
-        return [...uniqueModifications.values()];
+        const modifications = [...uniqueModifications.values()];
+        const simplexModifications = detectSimplexModifications(modifications);
+        const modificationsForDisplay = new Map();
+        for (const mod of modifications) {
+            if (!modificationsForDisplay.has(mod.type)) {
+                modificationsForDisplay.set(mod.type, mod);
+            }
+        }
+        return {
+            modifications: [...modificationsForDisplay.values()],
+            simplexModifications: [...simplexModifications],
+        };
     }
 }

package/esm/PileupRenderer/PileupRenderer.d.ts

@@ -20,6 +20,8 @@ export default class PileupRenderer extends BoxRendererType {
         width: number;
         maxHeightReached: boolean;
         containsNoTransferables: boolean;
+        flatbush: ArrayBufferLike;
+        items: import("./types").FlatbushItem[];
         canvasRecordedData: Record<string, unknown>;
         reactElement?: React.ReactElement;
         html?: string;
@@ -30,6 +32,8 @@ export default class PileupRenderer extends BoxRendererType {
         width: number;
         maxHeightReached: boolean;
         containsNoTransferables: boolean;
+        flatbush: ArrayBufferLike;
+        items: import("./types").FlatbushItem[];
         imageData: any;
         reactElement?: React.ReactElement;
         html?: string;
@@ -40,9 +44,10 @@ export default class PileupRenderer extends BoxRendererType {
         width: number;
         maxHeightReached: boolean;
         containsNoTransferables: boolean;
+        flatbush: ArrayBufferLike;
+        items: import("./types").FlatbushItem[];
         reactElement: React.ReactElement;
         html?: string;
     }>;
     createLayoutSession(args: PileupLayoutSessionProps): PileupLayoutSession;
 }
-export type { RenderArgs, RenderArgsSerialized, RenderResults, ResultsDeserialized, ResultsSerialized, } from '@jbrowse/core/pluggableElementTypes/renderers/BoxRendererType';

package/esm/PileupRenderer/PileupRenderer.js

@@ -50,20 +50,17 @@ export default class PileupRenderer extends BoxRendererType {
                 ? await this.fetchSequence(renderProps, region)
                 : undefined;
             const { makeImageData } = await import('./makeImageData');
-            return renderToAbstractCanvas(width, height, renderProps, ctx => {
-                makeImageData({
-                    ctx,
-                    layoutRecords,
-                    canvasWidth: width,
-                    renderArgs: {
-                        ...renderProps,
-                        layout,
-                        features,
-                        regionSequence,
-                    },
-                });
-                return undefined;
-            });
+            return renderToAbstractCanvas(width, height, renderProps, ctx => makeImageData({
+                ctx,
+                layoutRecords,
+                canvasWidth: width,
+                renderArgs: {
+                    ...renderProps,
+                    layout,
+                    features,
+                    regionSequence,
+                },
+            }));
         });
         const results = await super.render({
             ...renderProps,

package/esm/PileupRenderer/components/PileupRendering.d.ts

@@ -1,3 +1,5 @@
+import type { ColorBy, FilterBy, SortedBy } from '../../shared/types';
+import type { FlatbushItem } from '../types';
 import type { Region } from '@jbrowse/core/util/types';
 import type { BaseLinearDisplayModel } from '@jbrowse/plugin-linear-genome-view';
 declare const PileupRendering: (props: {
@@ -7,20 +9,11 @@ declare const PileupRendering: (props: {
     height: number;
     regions: Region[];
     bpPerPx: number;
-    sortedBy?: {
-        type: string;
-        pos: number;
-        refName: string;
-    };
-    colorBy?: {
-        type: string;
-        tag?: string;
-    };
-    filterBy?: {
-        tagFilter?: {
-            tag: string;
-        };
-    };
-    onMouseMove?: (event: React.MouseEvent, featureId?: string) => void;
+    sortedBy?: SortedBy;
+    colorBy?: ColorBy;
+    filterBy?: FilterBy;
+    items: FlatbushItem[];
+    flatbush: any;
+    onMouseMove?: (event: React.MouseEvent, featureId?: string, extra?: string) => void;
 }) => import("react/jsx-runtime").JSX.Element;
 export default PileupRendering;

package/esm/PileupRenderer/components/PileupRendering.js

@@ -1,11 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { PrerenderedCanvas } from '@jbrowse/core/ui';
 import { bpSpanPx } from '@jbrowse/core/util';
+import Flatbush from '@jbrowse/core/util/flatbush';
 import { observer } from 'mobx-react';
 const PileupRendering = observer(function (props) {
     var _a;
-    const { onMouseMove, blockKey, displayModel, width, height, regions, bpPerPx, sortedBy, colorBy, filterBy, } = props;
+    const { onMouseMove, blockKey, displayModel, width, height, regions, bpPerPx, sortedBy, colorBy, filterBy, flatbush, items, } = props;
+    const flatbush2 = useMemo(() => Flatbush.from(flatbush), [flatbush]);
     const { selectedFeatureId, featureIdUnderMouse, contextMenuFeature } = displayModel || {};
     const [firstRender, setFirstRender] = useState(false);
     useEffect(() => {
@@ -79,7 +81,18 @@ const PileupRendering = observer(function (props) {
         const offsetY = event.clientY - rect.top;
         const px = region.reversed ? width - offsetX : offsetX;
         const clientBp = region.start + bpPerPx * px;
-        onMouseMove === null || onMouseMove === void 0 ? void 0 : onMouseMove(event, displayModel === null || displayModel === void 0 ? void 0 : displayModel.getFeatureOverlapping(blockKey, clientBp, offsetY));
+        const search = flatbush2.search(offsetX, offsetY, offsetX + 1, offsetY + 1);
+        const item = search.length ? items[search[0]] : undefined;
+        const label = item
+            ? item.type === 'insertion'
+                ? `Insertion: ${item.seq}`
+                : item.type === 'deletion'
+                    ? `Deletion: ${item.seq}bp`
+                    : item.type === 'modification'
+                        ? item.seq
+                        : `Mismatch: ${item.seq}`
+            : undefined;
+        onMouseMove === null || onMouseMove === void 0 ? void 0 : onMouseMove(event, displayModel === null || displayModel === void 0 ? void 0 : displayModel.getFeatureOverlapping(blockKey, clientBp, offsetY), label);
     }
     function callMouseHandler(handlerName, event) {
         const featureHandler = props[`onFeature${handlerName}`];

package/esm/PileupRenderer/makeImageData.d.ts

@@ -1,4 +1,4 @@
-import type { ProcessedRenderArgs } from './types';
+import type { FlatbushItem, ProcessedRenderArgs } from './types';
 import type { Feature } from '@jbrowse/core/util';
 interface LayoutFeature {
     heightPx: number;
@@ -10,5 +10,8 @@ export declare function makeImageData({ ctx, layoutRecords, canvasWidth, renderA
     canvasWidth: number;
     layoutRecords: LayoutFeature[];
     renderArgs: ProcessedRenderArgs;
-}): undefined;
+}): {
+    flatbush: ArrayBufferLike;
+    items: FlatbushItem[];
+};
 export {};

package/esm/PileupRenderer/makeImageData.js

@@ -1,9 +1,10 @@
 import { readConfObject } from '@jbrowse/core/configuration';
 import { createJBrowseTheme } from '@jbrowse/core/ui';
 import { forEachWithStopTokenCheck } from '@jbrowse/core/util';
-import { renderAlignment } from './renderAlignment';
-import { renderMismatches } from './renderMismatches';
-import { renderSoftClipping } from './renderSoftClipping';
+import Flatbush from '@jbrowse/core/util/flatbush';
+import { renderAlignment } from './renderers/renderAlignment';
+import { renderMismatches } from './renderers/renderMismatches';
+import { renderSoftClipping } from './renderers/renderSoftClipping';
 import { getCharWidthHeight, getColorBaseMap, getContrastBaseMap, shouldDrawIndels, shouldDrawSNPsMuted, } from './util';
 export function makeImageData({ ctx, layoutRecords, canvasWidth, renderArgs, }) {
     const { stopToken, config, showSoftClip, colorBy, theme: configTheme, } = renderArgs;
@@ -19,8 +20,10 @@ export function makeImageData({ ctx, layoutRecords, canvasWidth, renderArgs, })
     const { charWidth, charHeight } = getCharWidthHeight();
     const drawSNPsMuted = shouldDrawSNPsMuted(colorBy === null || colorBy === void 0 ? void 0 : colorBy.type);
     const drawIndels = shouldDrawIndels();
+    const coords = [];
+    const items = [];
     forEachWithStopTokenCheck(layoutRecords, stopToken, feat => {
-        renderAlignment({
+        const alignmentRet = renderAlignment({
             ctx,
             feat,
             renderArgs,
@@ -31,7 +34,13 @@ export function makeImageData({ ctx, layoutRecords, canvasWidth, renderArgs, })
             charHeight,
             canvasWidth,
         });
-        renderMismatches({
+        for (let i = 0, l = alignmentRet.coords.length; i < l; i++) {
+            coords.push(alignmentRet.coords[i]);
+        }
+        for (let i = 0, l = alignmentRet.items.length; i < l; i++) {
+            items.push(alignmentRet.items[i]);
+        }
+        const ret = renderMismatches({
             ctx,
             feat,
             renderArgs,
@@ -47,6 +56,12 @@ export function makeImageData({ ctx, layoutRecords, canvasWidth, renderArgs, })
             colorContrastMap,
             canvasWidth,
         });
+        for (let i = 0, l = ret.coords.length; i < l; i++) {
+            coords.push(ret.coords[i]);
+        }
+        for (let i = 0, l = ret.items.length; i < l; i++) {
+            items.push(ret.items[i]);
+        }
         if (showSoftClip) {
             renderSoftClipping({
                 ctx,
@@ -59,5 +74,18 @@ export function makeImageData({ ctx, layoutRecords, canvasWidth, renderArgs, })
             });
         }
     });
-    return undefined;
+    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/PileupRenderer/{getAlignmentShapeColor.js → renderers/getAlignmentShapeColor.js}

@@ -1,6 +1,6 @@
 import { readConfObject } from '@jbrowse/core/configuration';
-import { colorByInsertSize, colorByMappingQuality, colorByOrientation, colorByStrand, colorByStrandedRnaSeq, } from './colorBy';
-import { fillColor } from '../shared/color';
+import { fillColor } from '../../shared/color';
+import { colorByInsertSize, colorByMappingQuality, colorByOrientation, colorByStrand, colorByStrandedRnaSeq, } from '../colorBy';
 export function getAlignmentShapeColor({ colorType, tag, feature, config, defaultColor, colorTagMap, }) {
     switch (colorType) {
         case 'insertSize':

package/{dist/PileupRenderer → esm/PileupRenderer/renderers}/renderAlignment.d.ts

@@ -1,5 +1,5 @@
-import type { ProcessedRenderArgs } from './types';
-import type { LayoutFeature } from './util';
+import type { FlatbushItem, ProcessedRenderArgs } from '../types';
+import type { LayoutFeature } from '../util';
 export declare function renderAlignment({ ctx, feat, renderArgs, colorMap, colorContrastMap, charWidth, charHeight, defaultColor, canvasWidth, }: {
     ctx: CanvasRenderingContext2D;
     feat: LayoutFeature;
@@ -10,4 +10,7 @@ export declare function renderAlignment({ ctx, feat, renderArgs, colorMap, color
     charHeight: number;
     defaultColor: boolean;
     canvasWidth: number;
-}): void;
+}): {
+    coords: number[];
+    items: FlatbushItem[];
+};

package/esm/PileupRenderer/{renderAlignment.js → renderers/renderAlignment.js}

@@ -1,11 +1,13 @@
 import { getAlignmentShapeColor } from './getAlignmentShapeColor';
 import { renderAlignmentShape } from './renderAlignmentShape';
+import { renderMethylation } from './renderMethylation';
 import { renderModifications } from './renderModifications';
 import { renderPerBaseLettering } from './renderPerBaseLettering';
 import { renderPerBaseQuality } from './renderPerBaseQuality';
-import { parseCigar } from '../MismatchParser';
-import { renderMethylation } from './renderMethylation';
+import { parseCigar } from '../../MismatchParser';
 export function renderAlignment({ ctx, feat, renderArgs, colorMap, colorContrastMap, charWidth, charHeight, defaultColor, canvasWidth, }) {
+    const items = [];
+    const coords = [];
     const { config, bpPerPx, regions, colorBy, colorTagMap = {} } = renderArgs;
     const { tag = '', type: colorType = '' } = colorBy || {};
     const { feature } = feat;
@@ -50,7 +52,7 @@ export function renderAlignment({ ctx, feat, renderArgs, colorMap, colorContrast
         }
         case 'modifications': {
             const cigarOps = parseCigar(feature.get('CIGAR'));
-            renderModifications({
+            const ret = renderModifications({
                 ctx,
                 feat,
                 region,
@@ -59,6 +61,12 @@ export function renderAlignment({ ctx, feat, renderArgs, colorMap, colorContrast
                 canvasWidth,
                 cigarOps,
             });
+            for (let i = 0, l = ret.coords.length; i < l; i++) {
+                coords.push(ret.coords[i]);
+            }
+            for (let i = 0, l = ret.items.length; i < l; i++) {
+                items.push(ret.items[i]);
+            }
             break;
         }
         case 'methylation': {
@@ -75,4 +83,5 @@ export function renderAlignment({ ctx, feat, renderArgs, colorMap, colorContrast
             break;
         }
     }
+    return { coords, items };
 }

package/{dist/PileupRenderer → esm/PileupRenderer/renderers}/renderAlignmentShape.d.ts

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

package/esm/PileupRenderer/{renderAlignmentShape.js → renderers/renderAlignmentShape.js}

@@ -1,5 +1,5 @@
 import { bpSpanPx } from '@jbrowse/core/util';
-import { parseCigar } from '../MismatchParser';
+import { parseCigar } from '../../MismatchParser';
 export function renderAlignmentShape({ ctx, feat, renderArgs, }) {
     const { regions, bpPerPx } = renderArgs;
     const { heightPx, topPx, feature } = feat;

package/esm/PileupRenderer/{renderMethylation.d.ts → renderers/renderMethylation.d.ts}

@@ -1,5 +1,5 @@
-import type { ProcessedRenderArgs } from './types';
-import type { LayoutFeature } from './util';
+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;

package/esm/PileupRenderer/{renderMethylation.js → renderers/renderMethylation.js}

@@ -1,7 +1,7 @@
 import { bpSpanPx } from '@jbrowse/core/util';
 import { colord } from '@jbrowse/core/util/colord';
-import { fillRect } from './util';
-import { getMethBins } from '../ModificationParser/getMethBins';
+import { getMethBins } from '../../ModificationParser/getMethBins';
+import { fillRect } from '../util';
 export function renderMethylation({ ctx, feat, region, bpPerPx, renderArgs, canvasWidth, cigarOps, }) {
     const { regionSequence } = renderArgs;
     const { feature, topPx, heightPx } = feat;

package/esm/PileupRenderer/{renderMismatches.d.ts → renderers/renderMismatches.d.ts}

@@ -1,5 +1,5 @@
-import type { ProcessedRenderArgs } from './types';
-import type { LayoutFeature } from './util';
+import type { FlatbushItem, ProcessedRenderArgs } from '../types';
+import type { LayoutFeature } from '../util';
 export declare function renderMismatches({ ctx, feat, renderArgs, minSubfeatureWidth, largeInsertionIndicatorScale, mismatchAlpha, charWidth, charHeight, colorMap, colorContrastMap, hideSmallIndels, canvasWidth, drawSNPsMuted, drawIndels, }: {
     ctx: CanvasRenderingContext2D;
     feat: LayoutFeature;
@@ -15,4 +15,7 @@ export declare function renderMismatches({ ctx, feat, renderArgs, minSubfeatureW
     charWidth: number;
     charHeight: number;
     canvasWidth: number;
-}): void;
+}): {
+    coords: number[];
+    items: FlatbushItem[];
+};

package/esm/PileupRenderer/{renderMismatches.js → renderers/renderMismatches.js}

@@ -1,18 +1,18 @@
 import { bpSpanPx, measureText } from '@jbrowse/core/util';
 import { colord } from '@jbrowse/core/util/colord';
-import { fillRect } from './util';
+import { fillRect } from '../util';
 export function renderMismatches({ ctx, feat, renderArgs, minSubfeatureWidth, largeInsertionIndicatorScale, mismatchAlpha, charWidth, charHeight, colorMap, colorContrastMap, hideSmallIndels, canvasWidth, drawSNPsMuted, drawIndels = true, }) {
+    var _a;
+    const items = [];
+    const coords = [];
     const { bpPerPx, regions } = renderArgs;
     const { heightPx, topPx, feature } = feat;
     const region = regions[0];
     const start = feature.get('start');
     const pxPerBp = Math.min(1 / bpPerPx, 2);
-    const mismatches = feature.get('mismatches');
+    const mismatches = (_a = feature.get('mismatches')) !== null && _a !== void 0 ? _a : [];
     const heightLim = charHeight - 2;
     const extraHorizontallyFlippedOffset = region.reversed ? 1 / bpPerPx + 1 : -1;
-    if (!mismatches) {
-        return;
-    }
     for (const mismatch of mismatches) {
         const mstart = start + mismatch.start;
         const mlen = mismatch.length;
@@ -20,6 +20,11 @@ export function renderMismatches({ ctx, feat, renderArgs, minSubfeatureWidth, la
         const [leftPx, rightPx] = bpSpanPx(mstart, mstart + mlen, region, bpPerPx);
         const widthPx = Math.max(minSubfeatureWidth, rightPx - leftPx);
         if (mismatch.type === 'mismatch') {
+            items.push({
+                type: 'mismatch',
+                seq: mismatch.base,
+            });
+            coords.push(leftPx, topPx, rightPx, topPx + heightPx);
             if (!drawSNPsMuted) {
                 const baseColor = colorMap[mismatch.base] || '#888';
                 const c = mismatchAlpha && mismatch.qual !== undefined
@@ -46,6 +51,11 @@ export function renderMismatches({ ctx, feat, renderArgs, minSubfeatureWidth, la
             const len = mismatch.length;
             if (!hideSmallIndels || len >= 10) {
                 fillRect(ctx, leftPx, topPx, Math.abs(leftPx - rightPx), heightPx, canvasWidth, colorMap.deletion);
+                items.push({
+                    type: 'deletion',
+                    seq: `${mismatch.length}`,
+                });
+                coords.push(leftPx, topPx, rightPx, topPx + heightPx);
                 const txt = `${mismatch.length}`;
                 const rwidth = measureText(txt, 10);
                 if (widthPx >= rwidth && heightPx >= heightLim) {
@@ -62,6 +72,11 @@ export function renderMismatches({ ctx, feat, renderArgs, minSubfeatureWidth, la
                 if (!hideSmallIndels) {
                     fillRect(ctx, pos, topPx, insW, heightPx, canvasWidth, colorMap.insertion);
                     if (1 / bpPerPx >= charWidth && heightPx >= heightLim) {
+                        items.push({
+                            type: 'insertion',
+                            seq: mismatch.insertedBases || 'unknown',
+                        });
+                        coords.push(leftPx - 2, topPx, leftPx + insW + 2, topPx + heightPx);
                         const l = Math.round(pos - insW);
                         fillRect(ctx, l, topPx, insW * 3, 1, canvasWidth);
                         fillRect(ctx, l, topPx + heightPx - 1, insW * 3, 1, canvasWidth);
@@ -101,6 +116,11 @@ export function renderMismatches({ ctx, feat, renderArgs, minSubfeatureWidth, la
             if (mismatch.type === 'insertion' && len >= 10) {
                 const [leftPx] = bpSpanPx(mstart, mstart + mlen, region, bpPerPx);
                 const txt = `${len}`;
+                items.push({
+                    type: 'insertion',
+                    seq: mismatch.insertedBases || 'unknown',
+                });
+                coords.push(leftPx - 3, topPx, leftPx + 4, topPx + heightPx);
                 if (bpPerPx > largeInsertionIndicatorScale) {
                     fillRect(ctx, leftPx - 1, topPx, 2, heightPx, canvasWidth, colorMap.insertion);
                 }
@@ -118,4 +138,8 @@ export function renderMismatches({ ctx, feat, renderArgs, minSubfeatureWidth, la
             }
         }
     }
+    return {
+        coords,
+        items,
+    };
 }

package/esm/PileupRenderer/{renderModifications.d.ts → renderers/renderModifications.d.ts}

@@ -1,5 +1,5 @@
-import type { ProcessedRenderArgs } from './types';
-import type { LayoutFeature } from './util';
+import type { FlatbushItem, 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;
@@ -9,4 +9,7 @@ export declare function renderModifications({ ctx, feat, region, bpPerPx, render
     renderArgs: ProcessedRenderArgs;
     canvasWidth: number;
     cigarOps: string[];
-}): void;
+}): {
+    coords: number[];
+    items: FlatbushItem[];
+};