@jbrowse/plugin-alignments 2.16.0 → 2.17.0

package/dist/PileupRPC/methods/GetGlobalValueForTag.js

@@ -8,7 +8,6 @@ const operators_1 = require("rxjs/operators");
 const rxjs_1 = require("rxjs");
 // locals
 const base_1 = __importDefault(require("../base"));
-const util_1 = require("../../util");
 class PileupGetGlobalValueForTag extends base_1.default {
     constructor() {
         super(...arguments);
@@ -21,7 +20,7 @@ class PileupGetGlobalValueForTag extends base_1.default {
         const featuresArray = await (0, rxjs_1.firstValueFrom)(features.pipe((0, operators_1.toArray)()));
         return [
             ...new Set(featuresArray
-                .map(feature => (0, util_1.getTag)(feature, tag))
+                .map(feature => { var _a; return (_a = feature.get('tags')) === null || _a === void 0 ? void 0 : _a[tag]; })
                 .filter(f => f !== undefined)
                 .map(f => `${f}`)),
         ];

package/dist/PileupRPC/methods/GetReducedFeatures.d.ts

@@ -23,7 +23,7 @@ export default class PileupGetReducedFeatures extends PileupBaseRPC {
             pair_orientation: any;
             next_ref: any;
             next_pos: any;
-            clipPos: any;
+            clipPos: number;
             SA: any;
         }[][];
         stats: {

package/dist/PileupRPC/methods/GetReducedFeatures.js

@@ -10,7 +10,7 @@ const rxjs_1 = require("rxjs");
 // locals
 const util_2 = require("../util");
 const base_1 = __importDefault(require("../base"));
-const util_3 = require("../../util");
+const MismatchParser_1 = require("../../MismatchParser");
 // specialized get features to return limited data about alignments
 class PileupGetReducedFeatures extends base_1.default {
     constructor() {
@@ -22,21 +22,24 @@ class PileupGetReducedFeatures extends base_1.default {
         const { adapterConfig, sessionId, regions } = des;
         const dataAdapter = (await (0, dataAdapterCache_1.getAdapter)(this.pluginManager, sessionId, adapterConfig)).dataAdapter;
         const featuresArray = await (0, rxjs_1.firstValueFrom)(dataAdapter.getFeaturesInMultipleRegions(regions, des).pipe((0, operators_1.toArray)()));
-        const reduced = (0, util_1.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: (0, util_3.getTag)(f, 'SA'),
-        })), f => f.id);
+        const reduced = (0, util_1.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: (0, MismatchParser_1.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 = (0, util_2.filterForPairs)(reduced);
         const stats = filtered.length ? (0, util_2.getInsertSizeStats)(filtered) : undefined;
         const chains = (0, util_1.groupBy)(reduced, f => f.name);

package/dist/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/dist/PileupRPC/methods/GetVisibleModifications.js

@@ -6,10 +6,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const dataAdapterCache_1 = require("@jbrowse/core/data_adapters/dataAdapterCache");
 const operators_1 = require("rxjs/operators");
 const rxjs_1 = require("rxjs");
-// locals
-const MismatchParser_1 = require("../../MismatchParser");
-const base_1 = __importDefault(require("../base"));
+const ModificationParser_1 = require("../../ModificationParser");
 const util_1 = require("../../util");
+const base_1 = __importDefault(require("../base"));
 class PileupGetVisibleModifications extends base_1.default {
     constructor() {
         super(...arguments);
@@ -19,11 +18,15 @@ class PileupGetVisibleModifications extends base_1.default {
         const { adapterConfig, sessionId, regions } = await this.deserializeArguments(args, rpcDriver);
         const dataAdapter = (await (0, dataAdapterCache_1.getAdapter)(this.pluginManager, sessionId, adapterConfig)).dataAdapter;
         const featuresArray = await (0, rxjs_1.firstValueFrom)(dataAdapter.getFeaturesInMultipleRegions(regions).pipe((0, operators_1.toArray)()));
-        const uniqueValues = new Set();
+        const uniqueModifications = new Map();
         featuresArray.forEach(f => {
-            (0, MismatchParser_1.getModificationTypes)((0, util_1.getTagAlt)(f, 'MM', 'Mm') || '').forEach(t => uniqueValues.add(t));
+            for (const mod of (0, ModificationParser_1.getModTypes)((0, util_1.getTagAlt)(f, 'MM', 'Mm') || '')) {
+                if (!uniqueModifications.has(mod.type)) {
+                    uniqueModifications.set(mod.type, mod);
+                }
+            }
         });
-        return [...uniqueValues];
+        return [...uniqueModifications.values()];
     }
 }
 exports.default = PileupGetVisibleModifications;

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

@@ -45,10 +45,13 @@ class PileupRenderer extends BoxRendererType_1.default {
         if (!sequenceAdapter) {
             return undefined;
         }
-        const pm = this.pluginManager;
-        const { dataAdapter } = await (0, dataAdapterCache_1.getAdapter)(pm, sessionId, sequenceAdapter);
+        const { dataAdapter } = await (0, dataAdapterCache_1.getAdapter)(this.pluginManager, sessionId, sequenceAdapter);
         const region = regions[0];
-        return (0, util_2.fetchSequence)(region, dataAdapter);
+        return (0, util_2.fetchSequence)({
+            ...region,
+            start: Math.max(0, region.start - 1),
+            end: region.end + 1,
+        }, dataAdapter);
     }
     getExpandedRegion(region, renderArgs) {
         const { config, showSoftClip } = renderArgs;
@@ -63,7 +66,6 @@ class PileupRenderer extends BoxRendererType_1.default {
         };
     }
     async render(renderProps) {
-        var _a;
         const features = await this.getFeatures(renderProps);
         const layout = this.createLayoutInWorker(renderProps);
         const { regions, bpPerPx } = renderProps;
@@ -75,7 +77,7 @@ class PileupRenderer extends BoxRendererType_1.default {
         });
         // only need reference sequence if there are features and only for some
         // cases
-        const regionSequence = features.size && (0, util_2.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/dist/PileupRenderer/renderAlignment.js

@@ -7,6 +7,7 @@ const renderPerBaseQuality_1 = require("./renderPerBaseQuality");
 const renderPerBaseLettering_1 = require("./renderPerBaseLettering");
 const renderModifications_1 = require("./renderModifications");
 const renderMethylation_1 = require("./renderMethylation");
+const MismatchParser_1 = require("../MismatchParser");
 function renderAlignment({ ctx, feat, renderArgs, colorForBase, contrastForBase, charWidth, charHeight, defaultColor, canvasWidth, }) {
     const { config, bpPerPx, regions, colorBy, colorTagMap = {} } = renderArgs;
     const { tag = '', type: colorType = '' } = colorBy || {};
@@ -24,16 +25,20 @@ function renderAlignment({ ctx, feat, renderArgs, colorForBase, contrastForBase,
     // second pass for color types that render per-base things that go over the
     // existing drawing
     switch (colorType) {
-        case 'perBaseQuality':
+        case 'perBaseQuality': {
+            const cigarOps = (0, MismatchParser_1.parseCigar)(feature.get('CIGAR'));
             (0, renderPerBaseQuality_1.renderPerBaseQuality)({
                 ctx,
                 feat,
                 region,
                 bpPerPx,
                 canvasWidth,
+                cigarOps,
             });
             break;
-        case 'perBaseLettering':
+        }
+        case 'perBaseLettering': {
+            const cigarOps = (0, MismatchParser_1.parseCigar)(feature.get('CIGAR'));
             (0, renderPerBaseLettering_1.renderPerBaseLettering)({
                 ctx,
                 feat,
@@ -44,9 +49,12 @@ function renderAlignment({ ctx, feat, renderArgs, colorForBase, contrastForBase,
                 charWidth,
                 charHeight,
                 canvasWidth,
+                cigarOps,
             });
             break;
-        case 'modifications':
+        }
+        case 'modifications': {
+            const cigarOps = (0, MismatchParser_1.parseCigar)(feature.get('CIGAR'));
             (0, renderModifications_1.renderModifications)({
                 ctx,
                 feat,
@@ -54,9 +62,12 @@ function renderAlignment({ ctx, feat, renderArgs, colorForBase, contrastForBase,
                 bpPerPx,
                 renderArgs,
                 canvasWidth,
+                cigarOps,
             });
             break;
-        case 'methylation':
+        }
+        case 'methylation': {
+            const cigarOps = (0, MismatchParser_1.parseCigar)(feature.get('CIGAR'));
             (0, renderMethylation_1.renderMethylation)({
                 ctx,
                 feat,
@@ -64,7 +75,9 @@ function renderAlignment({ ctx, feat, renderArgs, colorForBase, contrastForBase,
                 bpPerPx,
                 renderArgs,
                 canvasWidth,
+                cigarOps,
             });
             break;
+        }
     }
 }

package/dist/PileupRenderer/renderAlignmentShape.js

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

package/dist/PileupRenderer/renderMethylation.d.ts

@@ -1,11 +1,12 @@
 import { Region } from '@jbrowse/core/util';
 import { LayoutFeature } from './util';
 import { RenderArgsWithColor } from './makeImageData';
-export declare function renderMethylation({ ctx, feat, region, bpPerPx, renderArgs, canvasWidth, }: {
+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/dist/PileupRenderer/renderMethylation.js

@@ -2,13 +2,14 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.renderMethylation = renderMethylation;
 const util_1 = require("@jbrowse/core/util");
-const MismatchParser_1 = require("../MismatchParser");
-const util_2 = require("./util");
 const colord_1 = require("@jbrowse/core/util/colord");
-// Color by methylation is slightly modified version of color by
-// modifications that focuses on CpG sites, with non-methylated CpG colored
-function renderMethylation({ ctx, feat, region, bpPerPx, renderArgs, canvasWidth, }) {
-    var _a, _b;
+// locals
+const util_2 = require("./util");
+const ModificationParser_1 = require("../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)
+function renderMethylation({ ctx, feat, region, bpPerPx, renderArgs, canvasWidth, cigarOps, }) {
     const { regionSequence } = renderArgs;
     const { feature, topPx, heightPx } = feat;
     if (!regionSequence) {
@@ -20,7 +21,7 @@ function renderMethylation({ ctx, feat, region, bpPerPx, renderArgs, canvasWidth
     }
     const fstart = feature.get('start');
     const fend = feature.get('end');
-    const { methBins, methProbs } = (0, MismatchParser_1.getMethBins)(feature);
+    const { methBins, methProbs, hydroxyMethBins, hydroxyMethProbs } = (0, ModificationParser_1.getMethBins)(feature, cigarOps);
     function getCol(k) {
         if (methBins[k]) {
             const p = methProbs[k] || 0;
@@ -28,12 +29,19 @@ function renderMethylation({ ctx, feat, region, bpPerPx, renderArgs, canvasWidth
                 ? (0, colord_1.colord)('red').alpha((p - 0.5) * 2)
                 : (0, colord_1.colord)('blue').alpha(1 - p * 2)).toHslString();
         }
+        if (hydroxyMethBins[k]) {
+            const p = hydroxyMethProbs[k] || 0;
+            return (p > 0.5
+                ? (0, colord_1.colord)('pink').alpha((p - 0.5) * 2)
+                : (0, colord_1.colord)('purple').alpha(1 - p * 2)).toHslString();
+        }
         return undefined;
     }
+    const r = regionSequence.toLowerCase();
     for (let i = 0; i < fend - fstart; i++) {
         const j = i + fstart;
-        const l1 = (_a = regionSequence[j - region.start + 1]) === null || _a === void 0 ? void 0 : _a.toLowerCase();
-        const l2 = (_b = regionSequence[j - region.start + 2]) === null || _b === void 0 ? void 0 : _b.toLowerCase();
+        const l1 = r[j - region.start + 1];
+        const l2 = r[j - region.start + 2];
         if (l1 === 'c' && l2 === 'g') {
             if (bpPerPx > 2) {
                 const [leftPx, rightPx] = (0, util_1.bpSpanPx)(j, j + 2, region, bpPerPx);

package/dist/PileupRenderer/renderMismatches.js

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

package/dist/PileupRenderer/renderModifications.d.ts

@@ -1,11 +1,12 @@
-import { Region } from '@jbrowse/core/util';
+import 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;