@jbrowse/plugin-alignments 2.16.1 → 2.17.0

package/esm/PileupRPC/methods/GetReducedFeatures.js

@@ -5,7 +5,7 @@ import { firstValueFrom } from 'rxjs';
 // locals
 import { filterForPairs, getInsertSizeStats } from '../util';
 import PileupBaseRPC from '../base';
-import { getTag } from '../../util';
+import { getClip } from '../../MismatchParser';
 // specialized get features to return limited data about alignments
 export default class PileupGetReducedFeatures extends PileupBaseRPC {
     constructor() {
@@ -17,21 +17,24 @@ export default class PileupGetReducedFeatures extends PileupBaseRPC {
         const { adapterConfig, sessionId, regions } = des;
         const dataAdapter = (await getAdapter(this.pluginManager, sessionId, adapterConfig)).dataAdapter;
         const featuresArray = await firstValueFrom(dataAdapter.getFeaturesInMultipleRegions(regions, des).pipe(toArray()));
-        const reduced = dedupe(featuresArray.map(f => ({
-            id: f.id(),
-            refName: f.get('refName'),
-            name: f.get('name'),
-            start: f.get('start'),
-            strand: f.get('strand'),
-            end: f.get('end'),
-            flags: f.get('flags'),
-            tlen: f.get('template_length'),
-            pair_orientation: f.get('pair_orientation'),
-            next_ref: f.get('next_ref'),
-            next_pos: f.get('next_pos'),
-            clipPos: f.get('clipPos'),
-            SA: getTag(f, 'SA'),
-        })), f => f.id);
+        const reduced = dedupe(featuresArray.map(f => {
+            var _a;
+            return ({
+                id: f.id(),
+                refName: f.get('refName'),
+                name: f.get('name'),
+                start: f.get('start'),
+                strand: f.get('strand'),
+                end: f.get('end'),
+                flags: f.get('flags'),
+                tlen: f.get('template_length'),
+                pair_orientation: f.get('pair_orientation'),
+                next_ref: f.get('next_ref'),
+                next_pos: f.get('next_pos'),
+                clipPos: getClip(f.get('CIGAR'), f.get('strand')),
+                SA: (_a = f.get('tags')) === null || _a === void 0 ? void 0 : _a.SA,
+            });
+        }), f => f.id);
         const filtered = filterForPairs(reduced);
         const stats = filtered.length ? getInsertSizeStats(filtered) : undefined;
         const chains = groupBy(reduced, f => f.name);

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

@@ -1,5 +1,6 @@
 import { RemoteAbortSignal } from '@jbrowse/core/rpc/remoteAbortSignals';
 import { Region } from '@jbrowse/core/util';
+import { ModificationType } from '../../shared/types';
 import PileupBaseRPC from '../base';
 export default class PileupGetVisibleModifications extends PileupBaseRPC {
     name: string;
@@ -10,5 +11,5 @@ export default class PileupGetVisibleModifications extends PileupBaseRPC {
         regions: Region[];
         sessionId: string;
         tag: string;
-    }, rpcDriver: string): Promise<string[]>;
+    }, rpcDriver: string): Promise<ModificationType[]>;
 }

package/esm/PileupRPC/methods/GetVisibleModifications.js

@@ -1,10 +1,9 @@
 import { getAdapter } from '@jbrowse/core/data_adapters/dataAdapterCache';
 import { toArray } from 'rxjs/operators';
 import { firstValueFrom } from 'rxjs';
-// locals
-import { getModificationTypes } from '../../MismatchParser';
-import PileupBaseRPC from '../base';
+import { getModTypes } from '../../ModificationParser';
 import { getTagAlt } from '../../util';
+import PileupBaseRPC from '../base';
 export default class PileupGetVisibleModifications extends PileupBaseRPC {
     constructor() {
         super(...arguments);
@@ -14,10 +13,14 @@ export default class PileupGetVisibleModifications extends PileupBaseRPC {
         const { adapterConfig, sessionId, regions } = await this.deserializeArguments(args, rpcDriver);
         const dataAdapter = (await getAdapter(this.pluginManager, sessionId, adapterConfig)).dataAdapter;
         const featuresArray = await firstValueFrom(dataAdapter.getFeaturesInMultipleRegions(regions).pipe(toArray()));
-        const uniqueValues = new Set();
+        const uniqueModifications = new Map();
         featuresArray.forEach(f => {
-            getModificationTypes(getTagAlt(f, 'MM', 'Mm') || '').forEach(t => uniqueValues.add(t));
+            for (const mod of getModTypes(getTagAlt(f, 'MM', 'Mm') || '')) {
+                if (!uniqueModifications.has(mod.type)) {
+                    uniqueModifications.set(mod.type, mod);
+                }
+            }
         });
-        return [...uniqueValues];
+        return [...uniqueModifications.values()];
     }
 }

package/esm/PileupRenderer/PileupLayoutSession.d.ts

@@ -3,26 +3,27 @@ import { AnyConfigurationModel } from '@jbrowse/core/configuration';
 import SerializableFilterChain from '@jbrowse/core/pluggableElementTypes/renderers/util/serializableFilterChain';
 import GranularRectLayout from '@jbrowse/core/util/layouts/GranularRectLayout';
 import MultiLayout from '@jbrowse/core/util/layouts/MultiLayout';
+import { FilterBy, SortedBy } from '../shared/types';
 export interface PileupLayoutSessionProps {
     config: AnyConfigurationModel;
     bpPerPx: number;
     filters: SerializableFilterChain;
-    filterBy: unknown;
-    sortedBy: unknown;
-    showSoftClip: unknown;
+    filterBy: FilterBy;
+    sortedBy: SortedBy;
+    showSoftClip: boolean;
 }
 type MyMultiLayout = MultiLayout<GranularRectLayout<unknown>, unknown>;
 interface CachedPileupLayout {
     layout: MyMultiLayout;
     config: AnyConfigurationModel;
     filters?: SerializableFilterChain;
-    filterBy: unknown;
-    sortedBy: unknown;
+    filterBy?: FilterBy;
+    sortedBy?: SortedBy;
     showSoftClip: boolean;
 }
 export declare class PileupLayoutSession extends LayoutSession {
-    sortedBy: unknown;
-    filterBy: unknown;
+    sortedBy?: SortedBy;
+    filterBy?: FilterBy;
     showSoftClip: boolean;
     constructor(args: PileupLayoutSessionProps);
     cachedLayoutIsValid(cachedLayout: CachedPileupLayout): boolean;

package/esm/PileupRenderer/PileupRenderer.d.ts

@@ -2,20 +2,12 @@ import BoxRendererType, { RenderArgsDeserialized as BoxRenderArgsDeserialized }
 import { Feature, Region } from '@jbrowse/core/util';
 import { BaseLayout } from '@jbrowse/core/util/layouts/BaseLayout';
 import { PileupLayoutSession, PileupLayoutSessionProps } from './PileupLayoutSession';
+import { ColorBy, ModificationTypeWithColor, SortedBy } from '../shared/types';
 export interface RenderArgsDeserialized extends BoxRenderArgsDeserialized {
-    colorBy?: {
-        type: string;
-        tag?: string;
-    };
+    colorBy?: ColorBy;
     colorTagMap?: Record<string, string>;
-    modificationTagMap?: Record<string, string>;
-    sortedBy?: {
-        type: string;
-        pos: number;
-        refName: string;
-        assemblyName: string;
-        tag?: string;
-    };
+    visibleModifications?: Record<string, ModificationTypeWithColor>;
+    sortedBy?: SortedBy;
     showSoftClip: boolean;
     highResolutionScaling: number;
 }
@@ -30,8 +22,8 @@ export default class PileupRenderer extends BoxRendererType {
     getExpandedRegion(region: Region, renderArgs: RenderArgsDeserialized): {
         start: number;
         end: number;
-        refName: string;
         reversed?: boolean | undefined;
+        refName: string;
         assemblyName: string;
     };
     render(renderProps: RenderArgsDeserialized): Promise<{
@@ -63,4 +55,4 @@ export default class PileupRenderer extends BoxRendererType {
     }>;
     createSession(args: PileupLayoutSessionProps): PileupLayoutSession;
 }
-export { type RenderArgs, type RenderResults, type RenderArgsSerialized, type ResultsSerialized, type ResultsDeserialized, } from '@jbrowse/core/pluggableElementTypes/renderers/BoxRendererType';
+export type { RenderArgs, RenderResults, RenderArgsSerialized, ResultsSerialized, ResultsDeserialized, } from '@jbrowse/core/pluggableElementTypes/renderers/BoxRendererType';

package/esm/PileupRenderer/PileupRenderer.js

@@ -4,7 +4,7 @@ import { readConfObject } from '@jbrowse/core/configuration';
 import { getAdapter } from '@jbrowse/core/data_adapters/dataAdapterCache';
 import { PileupLayoutSession, } from './PileupLayoutSession';
 // locals
-import { fetchSequence, shouldFetchReferenceSequence } from '../util';
+import { fetchSequence } from '../util';
 import { layoutFeats } from './layoutFeatures';
 export default class PileupRenderer extends BoxRendererType {
     constructor() {
@@ -17,10 +17,13 @@ export default class PileupRenderer extends BoxRendererType {
         if (!sequenceAdapter) {
             return undefined;
         }
-        const pm = this.pluginManager;
-        const { dataAdapter } = await getAdapter(pm, sessionId, sequenceAdapter);
+        const { dataAdapter } = await getAdapter(this.pluginManager, sessionId, sequenceAdapter);
         const region = regions[0];
-        return fetchSequence(region, dataAdapter);
+        return fetchSequence({
+            ...region,
+            start: Math.max(0, region.start - 1),
+            end: region.end + 1,
+        }, dataAdapter);
     }
     getExpandedRegion(region, renderArgs) {
         const { config, showSoftClip } = renderArgs;
@@ -35,7 +38,6 @@ export default class PileupRenderer extends BoxRendererType {
         };
     }
     async render(renderProps) {
-        var _a;
         const features = await this.getFeatures(renderProps);
         const layout = this.createLayoutInWorker(renderProps);
         const { regions, bpPerPx } = renderProps;
@@ -47,7 +49,7 @@ export default class PileupRenderer extends BoxRendererType {
         });
         // only need reference sequence if there are features and only for some
         // cases
-        const regionSequence = features.size && shouldFetchReferenceSequence((_a = renderProps.colorBy) === null || _a === void 0 ? void 0 : _a.type)
+        const regionSequence = features.size
             ? await this.fetchSequence(renderProps)
             : undefined;
         const width = (region.end - region.start) / bpPerPx;

package/esm/PileupRenderer/renderAlignment.js

@@ -4,6 +4,7 @@ import { renderPerBaseQuality } from './renderPerBaseQuality';
 import { renderPerBaseLettering } from './renderPerBaseLettering';
 import { renderModifications } from './renderModifications';
 import { renderMethylation } from './renderMethylation';
+import { parseCigar } from '../MismatchParser';
 export function renderAlignment({ ctx, feat, renderArgs, colorForBase, contrastForBase, charWidth, charHeight, defaultColor, canvasWidth, }) {
     const { config, bpPerPx, regions, colorBy, colorTagMap = {} } = renderArgs;
     const { tag = '', type: colorType = '' } = colorBy || {};
@@ -21,16 +22,20 @@ export function renderAlignment({ ctx, feat, renderArgs, colorForBase, contrastF
     // second pass for color types that render per-base things that go over the
     // existing drawing
     switch (colorType) {
-        case 'perBaseQuality':
+        case 'perBaseQuality': {
+            const cigarOps = parseCigar(feature.get('CIGAR'));
             renderPerBaseQuality({
                 ctx,
                 feat,
                 region,
                 bpPerPx,
                 canvasWidth,
+                cigarOps,
             });
             break;
-        case 'perBaseLettering':
+        }
+        case 'perBaseLettering': {
+            const cigarOps = parseCigar(feature.get('CIGAR'));
             renderPerBaseLettering({
                 ctx,
                 feat,
@@ -41,9 +46,12 @@ export function renderAlignment({ ctx, feat, renderArgs, colorForBase, contrastF
                 charWidth,
                 charHeight,
                 canvasWidth,
+                cigarOps,
             });
             break;
-        case 'modifications':
+        }
+        case 'modifications': {
+            const cigarOps = parseCigar(feature.get('CIGAR'));
             renderModifications({
                 ctx,
                 feat,
@@ -51,9 +59,12 @@ export function renderAlignment({ ctx, feat, renderArgs, colorForBase, contrastF
                 bpPerPx,
                 renderArgs,
                 canvasWidth,
+                cigarOps,
             });
             break;
-        case 'methylation':
+        }
+        case 'methylation': {
+            const cigarOps = parseCigar(feature.get('CIGAR'));
             renderMethylation({
                 ctx,
                 feat,
@@ -61,7 +72,9 @@ export function renderAlignment({ ctx, feat, renderArgs, colorForBase, contrastF
                 bpPerPx,
                 renderArgs,
                 canvasWidth,
+                cigarOps,
             });
             break;
+        }
     }
 }

package/esm/PileupRenderer/renderAlignmentShape.js

@@ -1,36 +1,117 @@
 import { bpSpanPx } from '@jbrowse/core/util';
+import { parseCigar } from '../MismatchParser';
 export function renderAlignmentShape({ ctx, feat, renderArgs, }) {
     const { regions, bpPerPx } = renderArgs;
     const { heightPx, topPx, feature } = feat;
     const region = regions[0];
     const s = feature.get('start');
     const e = feature.get('end');
-    const [leftPx, rightPx] = bpSpanPx(s, e, region, bpPerPx);
+    const CIGAR = feature.get('CIGAR');
     const flip = region.reversed ? -1 : 1;
     const strand = feature.get('strand') * flip;
-    if (bpPerPx < 10 && heightPx > 5) {
-        if (strand === -1) {
-            ctx.beginPath();
-            ctx.moveTo(leftPx - 5, topPx + heightPx / 2);
-            ctx.lineTo(leftPx, topPx + heightPx);
-            ctx.lineTo(rightPx, topPx + heightPx);
-            ctx.lineTo(rightPx, topPx);
-            ctx.lineTo(leftPx, topPx);
-            ctx.closePath();
-            ctx.fill();
+    const renderChevrons = bpPerPx < 10 && heightPx > 5;
+    if (CIGAR.includes('N')) {
+        const cigarOps = parseCigar(CIGAR);
+        if (strand === 1) {
+            let drawLen = 0;
+            let drawStart = s;
+            for (let i = 0; i < cigarOps.length; i += 2) {
+                const opLen = +cigarOps[i];
+                const op = cigarOps[i + 1];
+                if (op === 'M' || op === 'X' || op === '=' || op === 'D') {
+                    drawLen += opLen;
+                }
+                else if (op === 'N') {
+                    if (drawStart !== drawLen) {
+                        const [leftPx, rightPx] = bpSpanPx(drawStart, drawStart + drawLen, region, bpPerPx);
+                        const w = rightPx - leftPx;
+                        ctx.fillRect(leftPx, topPx, w, heightPx);
+                    }
+                    drawStart += drawLen + opLen;
+                    drawLen = 0;
+                }
+            }
+            if (drawStart !== drawLen) {
+                const [leftPx, rightPx] = bpSpanPx(drawStart, drawStart + drawLen, region, bpPerPx);
+                const w = rightPx - leftPx;
+                if (renderChevrons) {
+                    ctx.beginPath();
+                    ctx.moveTo(leftPx, topPx);
+                    ctx.lineTo(leftPx, topPx + heightPx);
+                    ctx.lineTo(rightPx, topPx + heightPx);
+                    ctx.lineTo(rightPx + 5, topPx + heightPx / 2);
+                    ctx.lineTo(rightPx, topPx);
+                    ctx.closePath();
+                    ctx.fill();
+                }
+                else {
+                    ctx.fillRect(leftPx, topPx, w, heightPx);
+                }
+            }
         }
-        else {
-            ctx.beginPath();
-            ctx.moveTo(leftPx, topPx);
-            ctx.lineTo(leftPx, topPx + heightPx);
-            ctx.lineTo(rightPx, topPx + heightPx);
-            ctx.lineTo(rightPx + 5, topPx + heightPx / 2);
-            ctx.lineTo(rightPx, topPx);
-            ctx.closePath();
-            ctx.fill();
+        else if (strand === -1) {
+            let drawLen = 0;
+            let drawStart = e;
+            for (let i = cigarOps.length - 2; i >= 0; i -= 2) {
+                const opLen = +cigarOps[i];
+                const op = cigarOps[i + 1];
+                if (op === 'M' || op === 'X' || op === '=' || op === 'D') {
+                    drawLen += opLen;
+                }
+                else if (op === 'N') {
+                    if (drawLen !== 0) {
+                        const [leftPx, rightPx] = bpSpanPx(drawStart - drawLen, drawStart, region, bpPerPx);
+                        ctx.fillRect(leftPx, topPx, rightPx - leftPx, heightPx);
+                    }
+                    drawStart -= drawLen + opLen;
+                    drawLen = 0;
+                }
+            }
+            if (drawLen !== 0) {
+                const [leftPx, rightPx] = bpSpanPx(drawStart - drawLen, drawStart, region, bpPerPx);
+                const w = rightPx - leftPx;
+                if (renderChevrons) {
+                    ctx.beginPath();
+                    ctx.moveTo(leftPx - 5, topPx + heightPx / 2);
+                    ctx.lineTo(leftPx, topPx + heightPx);
+                    ctx.lineTo(rightPx, topPx + heightPx);
+                    ctx.lineTo(rightPx, topPx);
+                    ctx.lineTo(leftPx, topPx);
+                    ctx.closePath();
+                    ctx.fill();
+                }
+                else {
+                    ctx.fillRect(leftPx, topPx, w, heightPx);
+                }
+            }
         }
     }
     else {
-        ctx.fillRect(leftPx, topPx, rightPx - leftPx, heightPx);
+        const [leftPx, rightPx] = bpSpanPx(s, e, region, bpPerPx);
+        if (bpPerPx < 10 && heightPx > 5) {
+            if (strand === -1) {
+                ctx.beginPath();
+                ctx.moveTo(leftPx - 5, topPx + heightPx / 2);
+                ctx.lineTo(leftPx, topPx + heightPx);
+                ctx.lineTo(rightPx, topPx + heightPx);
+                ctx.lineTo(rightPx, topPx);
+                ctx.lineTo(leftPx, topPx);
+                ctx.closePath();
+                ctx.fill();
+            }
+            else {
+                ctx.beginPath();
+                ctx.moveTo(leftPx, topPx);
+                ctx.lineTo(leftPx, topPx + heightPx);
+                ctx.lineTo(rightPx, topPx + heightPx);
+                ctx.lineTo(rightPx + 5, topPx + heightPx / 2);
+                ctx.lineTo(rightPx, topPx);
+                ctx.closePath();
+                ctx.fill();
+            }
+        }
+        else {
+            ctx.fillRect(leftPx, topPx, rightPx - leftPx, heightPx);
+        }
     }
 }

package/esm/PileupRenderer/renderMethylation.d.ts

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

package/esm/PileupRenderer/renderMethylation.js

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

package/esm/PileupRenderer/renderMismatches.js

@@ -9,8 +9,8 @@ export function renderMismatches({ ctx, feat, renderArgs, minSubfeatureWidth, la
     const pxPerBp = Math.min(1 / bpPerPx, 2);
     const mismatches = feature.get('mismatches');
     const heightLim = charHeight - 2;
-    // extraHorizontallyFlippedOffset is used to draw interbase items, which
-    // are located to the left when forward and right when reversed
+    // 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;
@@ -22,16 +22,14 @@ export function renderMismatches({ ctx, feat, renderArgs, minSubfeatureWidth, la
         const mlen = mismatch.length;
         const mbase = mismatch.base;
         const [leftPx, rightPx] = bpSpanPx(mstart, mstart + mlen, region, bpPerPx);
-        const widthPx = Math.max(minSubfeatureWidth, Math.abs(leftPx - rightPx));
+        const widthPx = Math.max(minSubfeatureWidth, rightPx - leftPx);
         if (mismatch.type === 'mismatch') {
             if (!drawSNPsMuted) {
                 const baseColor = colorForBase[mismatch.base] || '#888';
-                const c = mismatchAlpha
-                    ? mismatch.qual === undefined
-                        ? baseColor
-                        : colord(baseColor)
-                            .alpha(Math.min(1, mismatch.qual / 50))
-                            .toHslString()
+                const c = mismatchAlpha && mismatch.qual !== undefined
+                    ? colord(baseColor)
+                        .alpha(Math.min(1, mismatch.qual / 50))
+                        .toHslString()
                     : baseColor;
                 fillRect(ctx, Math.round(leftPx), topPx, widthPx, heightPx, canvasWidth, c);
             }
@@ -40,13 +38,12 @@ export function renderMismatches({ ctx, feat, renderArgs, minSubfeatureWidth, la
                 const contrastColor = drawSNPsMuted
                     ? 'black'
                     : contrastForBase[mismatch.base] || 'black';
-                ctx.fillStyle = mismatchAlpha
-                    ? mismatch.qual === undefined
-                        ? contrastColor
-                        : colord(contrastColor)
+                ctx.fillStyle =
+                    mismatchAlpha && mismatch.qual !== undefined
+                        ? colord(contrastColor)
                             .alpha(Math.min(1, mismatch.qual / 50))
                             .toHslString()
-                    : contrastColor;
+                        : contrastColor;
                 ctx.fillText(mbase, leftPx + (widthPx - charWidth) / 2 + 1, topPx + heightPx);
             }
         }
@@ -60,7 +57,6 @@ export function renderMismatches({ ctx, feat, renderArgs, minSubfeatureWidth, la
             }
         }
         else if (mismatch.type === 'insertion' && drawIndels) {
-            ctx.fillStyle = 'purple';
             const pos = leftPx + extraHorizontallyFlippedOffset;
             const len = +mismatch.base || mismatch.length;
             const insW = Math.max(0, Math.min(1.2, 1 / bpPerPx));
@@ -89,12 +85,16 @@ export function renderMismatches({ ctx, feat, renderArgs, minSubfeatureWidth, la
         else if (mismatch.type === 'skip') {
             // fix to avoid bad rendering note that this was also related to chrome
             // bug https://bugs.chromium.org/p/chromium/issues/detail?id=1131528
+            //
             // also affected firefox ref #1236 #2750
             if (leftPx + widthPx > 0) {
                 // make small exons more visible when zoomed far out
                 const adjustPx = widthPx - (bpPerPx > 10 ? 1.5 : 0);
-                ctx.clearRect(leftPx, topPx, adjustPx, heightPx);
-                fillRect(ctx, Math.max(0, leftPx), topPx + heightPx / 2 - 1, adjustPx + Math.min(leftPx, 0), 2, canvasWidth, '#333');
+                const l = Math.max(0, leftPx);
+                const t = topPx + heightPx / 2 - 1;
+                const w = adjustPx + Math.min(leftPx, 0);
+                const h = 1;
+                fillRect(ctx, l, t, w, h, canvasWidth, 'rgb(151,184,201)');
             }
         }
     }
@@ -103,10 +103,10 @@ export function renderMismatches({ ctx, feat, renderArgs, minSubfeatureWidth, la
         for (const mismatch of mismatches) {
             const mstart = start + mismatch.start;
             const mlen = mismatch.length;
-            const [leftPx] = bpSpanPx(mstart, mstart + mlen, region, bpPerPx);
             const len = +mismatch.base || mismatch.length;
-            const txt = `${len}`;
             if (mismatch.type === 'insertion' && len >= 10) {
+                const [leftPx] = bpSpanPx(mstart, mstart + mlen, region, bpPerPx);
+                const txt = `${len}`;
                 if (bpPerPx > largeInsertionIndicatorScale) {
                     fillRect(ctx, leftPx - 1, topPx, 2, heightPx, canvasWidth, 'purple');
                 }

package/esm/PileupRenderer/renderModifications.d.ts

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