@jbrowse/plugin-alignments 3.6.5 → 3.7.0

package/esm/PileupRenderer/renderers/renderModifications.js

@@ -0,0 +1,81 @@
+import { bpSpanPx, max, sum } from '@jbrowse/core/util';
+import { getNextRefPos } from '../../MismatchParser';
+import { getModPositions } from '../../ModificationParser/getModPositions';
+import { getModProbabilities } from '../../ModificationParser/getModProbabilities';
+import { getMaxProbModAtEachPosition } from '../../shared/getMaximumModificationAtEachPosition';
+import { getModificationName } from '../../shared/modificationData';
+import { alphaColor } from '../../shared/util';
+import { getTagAlt } from '../../util';
+import { fillRect } from '../util';
+export function renderModifications({ ctx, feat, region, bpPerPx, renderArgs, canvasWidth, cigarOps, }) {
+    var _a, _b, _c, _d, _e;
+    const items = [];
+    const coords = [];
+    const { feature, topPx, heightPx } = feat;
+    const { colorBy, visibleModifications = {} } = renderArgs;
+    const seq = feature.get('seq');
+    if (!seq) {
+        return { coords, items };
+    }
+    const start = feature.get('start');
+    const isolatedModification = (_a = colorBy === null || colorBy === void 0 ? void 0 : colorBy.modifications) === null || _a === void 0 ? void 0 : _a.isolatedModification;
+    const twoColor = (_b = colorBy === null || colorBy === void 0 ? void 0 : colorBy.modifications) === null || _b === void 0 ? void 0 : _b.twoColor;
+    const modificationThreshold = (_d = (_c = colorBy === null || colorBy === void 0 ? void 0 : colorBy.modifications) === null || _c === void 0 ? void 0 : _c.threshold) !== null && _d !== void 0 ? _d : 10;
+    const thresholdFraction = modificationThreshold / 100;
+    const fstrand = feature.get('strand');
+    const mm = getTagAlt(feature, 'MM', 'Mm') || '';
+    const modifications = getModPositions(mm, seq, fstrand);
+    const probabilities = getModProbabilities(feature);
+    const modsByPosition = new Map();
+    let probIndex = 0;
+    for (const { type, base, strand, positions } of modifications) {
+        for (const { ref, idx } of getNextRefPos(cigarOps, positions)) {
+            const prob = (probabilities === null || probabilities === void 0 ? void 0 : probabilities[probIndex + (fstrand === -1 ? positions.length - 1 - idx : idx)]) || 0;
+            if (!modsByPosition.has(ref)) {
+                modsByPosition.set(ref, []);
+            }
+            modsByPosition.get(ref).push({ type, base, strand, prob });
+        }
+        probIndex += positions.length;
+    }
+    (_e = getMaxProbModAtEachPosition(feature, cigarOps)) === null || _e === void 0 ? void 0 : _e.forEach(({ allProbs, prob, type }, pos) => {
+        const r = start + pos;
+        const [leftPx, rightPx] = bpSpanPx(r, r + 1, region, bpPerPx);
+        const mod = visibleModifications[type];
+        if (!mod) {
+            console.warn(`${type} not known yet`);
+            return;
+        }
+        if (isolatedModification && mod.type !== isolatedModification) {
+            return;
+        }
+        if (prob < thresholdFraction) {
+            return;
+        }
+        const col = mod.color || 'black';
+        const s = 1 - sum(allProbs);
+        if (twoColor && s > max(allProbs)) {
+            const c = alphaColor('blue', s);
+            const w = rightPx - leftPx + 0.5;
+            fillRect(ctx, leftPx, topPx, w, heightPx, canvasWidth, c);
+        }
+        else {
+            const c = alphaColor(col, prob);
+            const w = rightPx - leftPx + 0.5;
+            fillRect(ctx, leftPx, topPx, w, heightPx, canvasWidth, c);
+        }
+        const modsAtPos = modsByPosition.get(pos) || [];
+        const strandInfo = modsAtPos
+            .map(m => `${m.base}${m.strand}${m.type} ${getModificationName(m.type)} (${(m.prob * 100).toFixed(1)}%)`)
+            .join('<br/>');
+        items.push({
+            type: 'modification',
+            seq: strandInfo || mod.base,
+            modType: type,
+            probability: prob,
+        });
+        coords.push(leftPx, topPx, rightPx, topPx + heightPx);
+        pos++;
+    });
+    return { coords, items };
+}

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

@@ -1,4 +1,4 @@
-import type { LayoutFeature } from './util';
+import type { LayoutFeature } from '../util';
 import type { Region } from '@jbrowse/core/util';
 export declare function renderPerBaseLettering({ ctx, feat, region, bpPerPx, colorMap, colorContrastMap, charWidth, charHeight, canvasWidth, cigarOps, }: {
     ctx: CanvasRenderingContext2D;

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

@@ -1,5 +1,5 @@
 import { bpSpanPx } from '@jbrowse/core/util';
-import { fillRect } from './util';
+import { fillRect } from '../util';
 export function renderPerBaseLettering({ ctx, feat, region, bpPerPx, colorMap, colorContrastMap, charWidth, charHeight, canvasWidth, cigarOps, }) {
     const heightLim = charHeight - 2;
     const { feature, topPx, heightPx } = feat;

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

@@ -1,4 +1,4 @@
-import type { LayoutFeature } from './util';
+import type { LayoutFeature } from '../util';
 import type { Region } from '@jbrowse/core/util';
 export declare function renderPerBaseQuality({ ctx, feat, region, bpPerPx, canvasWidth, cigarOps, }: {
     ctx: CanvasRenderingContext2D;

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

@@ -1,5 +1,5 @@
 import { bpSpanPx } from '@jbrowse/core/util';
-import { fillRect } from './util';
+import { fillRect } from '../util';
 export function renderPerBaseQuality({ ctx, feat, region, bpPerPx, canvasWidth, cigarOps, }) {
     const { feature, topPx, heightPx } = feat;
     const qual = feature.get('qual') || '';

package/esm/PileupRenderer/{renderSoftClipping.d.ts → renderers/renderSoftClipping.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 { AnyConfigurationModel } from '@jbrowse/core/configuration';
 import type { Theme } from '@mui/material';
 export declare function renderSoftClipping({ ctx, feat, renderArgs, config, theme, colorMap, canvasWidth, }: {

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

@@ -1,7 +1,7 @@
 import { readConfObject } from '@jbrowse/core/configuration';
 import { bpSpanPx } from '@jbrowse/core/util';
-import { fillRect, getCharWidthHeight } from './util';
-import { parseCigar } from '../MismatchParser';
+import { parseCigar } from '../../MismatchParser';
+import { fillRect, getCharWidthHeight } from '../util';
 export function renderSoftClipping({ ctx, feat, renderArgs, config, theme, colorMap, canvasWidth, }) {
     const { feature, topPx, heightPx } = feat;
     const { regions, bpPerPx } = renderArgs;

package/esm/PileupRenderer/types.d.ts

@@ -7,6 +7,12 @@ export interface LayoutFeature {
     topPx: number;
     feature: Feature;
 }
+export interface FlatbushItem {
+    type: 'insertion' | 'deletion' | 'mismatch' | 'modification';
+    seq: string;
+    modType?: string;
+    probability?: number;
+}
 export interface RenderArgsDeserialized extends BoxRenderArgsDeserialized {
     colorBy?: ColorBy;
     colorTagMap?: Record<string, string>;

package/esm/SNPCoverageAdapter/generateCoverageBins.js

@@ -10,6 +10,7 @@ export async function generateCoverageBins({ fetchSequence, features, region, op
     const bins = [];
     const start2 = Math.max(0, region.start - 1);
     const diff = region.start - start2;
+    let regionSequence;
     let start = performance.now();
     for (const feature of features) {
         if (performance.now() - start > 400) {
@@ -22,11 +23,11 @@ export async function generateCoverageBins({ fetchSequence, features, region, op
             region,
         });
         if ((colorBy === null || colorBy === void 0 ? void 0 : colorBy.type) === 'modifications') {
-            const regionSequence = (await fetchSequence({
+            regionSequence !== null && regionSequence !== void 0 ? regionSequence : (regionSequence = (await fetchSequence({
                 ...region,
                 start: start2,
                 end: region.end + 1,
-            })) || '';
+            })) || '');
             processModifications({
                 feature,
                 colorBy,
@@ -36,11 +37,11 @@ export async function generateCoverageBins({ fetchSequence, features, region, op
             });
         }
         else if ((colorBy === null || colorBy === void 0 ? void 0 : colorBy.type) === 'methylation') {
-            const regionSequence = (await fetchSequence({
+            regionSequence !== null && regionSequence !== void 0 ? regionSequence : (regionSequence = (await fetchSequence({
                 ...region,
                 start: start2,
                 end: region.end + 1,
-            })) || '';
+            })) || '');
             processReferenceCpGs({
                 feature,
                 bins,

package/esm/SNPCoverageAdapter/processModifications.js

@@ -1,17 +1,28 @@
 import { max, sum } from '@jbrowse/core/util';
 import { incWithProbabilities } from './util';
+import { parseCigar } from '../MismatchParser';
 import { getMaxProbModAtEachPosition } from '../shared/getMaximumModificationAtEachPosition';
 export function processModifications({ feature, colorBy, region, bins, regionSequence, }) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e;
     const fstart = feature.get('start');
     const fstrand = feature.get('strand');
     const fend = feature.get('end');
     const twoColor = (_a = colorBy === null || colorBy === void 0 ? void 0 : colorBy.modifications) === null || _a === void 0 ? void 0 : _a.twoColor;
     const isolatedModification = (_b = colorBy === null || colorBy === void 0 ? void 0 : colorBy.modifications) === null || _b === void 0 ? void 0 : _b.isolatedModification;
-    (_c = getMaxProbModAtEachPosition(feature)) === null || _c === void 0 ? void 0 : _c.forEach(({ allProbs, prob, type }, pos) => {
+    const seq = feature.get('seq');
+    const modificationThreshold = (_d = (_c = colorBy === null || colorBy === void 0 ? void 0 : colorBy.modifications) === null || _c === void 0 ? void 0 : _c.threshold) !== null && _d !== void 0 ? _d : 10;
+    const thresholdFraction = modificationThreshold / 100;
+    if (!seq) {
+        return;
+    }
+    const cigarOps = parseCigar(feature.get('CIGAR'));
+    (_e = getMaxProbModAtEachPosition(feature, cigarOps)) === null || _e === void 0 ? void 0 : _e.forEach(({ allProbs, prob, type }, pos) => {
         if (isolatedModification && type !== isolatedModification) {
             return;
         }
+        if (prob < thresholdFraction) {
+            return;
+        }
         const epos = pos + fstart - region.start;
         if (epos >= 0 && epos < bins.length && pos + fstart < fend) {
             if (bins[epos] === undefined) {
@@ -32,9 +43,9 @@ export function processModifications({ feature, colorBy, region, bins, regionSeq
                     noncov: {},
                 };
             }
-            const s = 1 - sum(allProbs);
             const bin = bins[epos];
             bin.refbase = regionSequence[epos];
+            const s = 1 - sum(allProbs);
             if (twoColor && s > max(allProbs)) {
                 incWithProbabilities(bin, fstrand, 'nonmods', `nonmod_${type}`, s);
             }
@@ -42,6 +53,5 @@ export function processModifications({ feature, colorBy, region, bins, regionSeq
                 incWithProbabilities(bin, fstrand, 'mods', `mod_${type}`, prob);
             }
         }
-        pos++;
     });
 }

package/esm/SNPCoverageRenderer/makeImage.js

@@ -13,9 +13,26 @@ const complementBase = {
     T: 'A',
 };
 const fudgeFactor = 0.6;
+function calculateModificationCounts({ base, isSimplex, refbase, snps, ref, score0, }) {
+    var _a, _b, _c, _d;
+    if (base === 'N') {
+        return { modifiable: score0, detectable: score0 };
+    }
+    const cmp = complementBase[base];
+    const baseCount = (((_a = snps[base]) === null || _a === void 0 ? void 0 : _a.entryDepth) || 0) + (refbase === base ? ref.entryDepth : 0);
+    const complCount = (((_b = snps[cmp]) === null || _b === void 0 ? void 0 : _b.entryDepth) || 0) + (refbase === cmp ? ref.entryDepth : 0);
+    const modifiable = baseCount + complCount;
+    const detectable = isSimplex
+        ? (((_c = snps[base]) === null || _c === void 0 ? void 0 : _c['1']) || 0) +
+            (((_d = snps[cmp]) === null || _d === void 0 ? void 0 : _d['-1']) || 0) +
+            (refbase === base ? ref['1'] : 0) +
+            (refbase === cmp ? ref['-1'] : 0)
+        : modifiable;
+    return { modifiable, detectable };
+}
 export async function makeImage(ctx, props) {
     var _a;
-    const { features, regions, bpPerPx, colorBy, displayCrossHatches, visibleModifications = {}, scaleOpts, height: unadjustedHeight, theme: configTheme, config: cfg, ticks, stopToken, } = props;
+    const { features, regions, bpPerPx, colorBy, displayCrossHatches, visibleModifications = {}, simplexModifications = [], scaleOpts, height: unadjustedHeight, theme: configTheme, config: cfg, ticks, stopToken, } = props;
     const theme = createJBrowseTheme(configTheme);
     const region = regions[0];
     const width = (region.end - region.start) / bpPerPx;
@@ -67,8 +84,9 @@ export async function makeImage(ctx, props) {
     const drawingModifications = colorBy.type === 'modifications';
     const drawingMethylation = colorBy.type === 'methylation';
     const isolatedModification = (_a = colorBy.modifications) === null || _a === void 0 ? void 0 : _a.isolatedModification;
+    const simplexSet = new Set(simplexModifications);
     forEachWithStopTokenCheck(features.values(), stopToken, feature => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        var _a;
         if (feature.get('type') === 'skip') {
             return;
         }
@@ -80,9 +98,10 @@ export async function makeImage(ctx, props) {
             let curr = 0;
             const refbase = (_a = snpinfo.refbase) === null || _a === void 0 ? void 0 : _a.toUpperCase();
             const { nonmods, mods, snps, ref } = snpinfo;
-            for (const m of Object.keys(nonmods).sort().reverse()) {
-                const mod = visibleModifications[m.replace('nonmod_', '')] ||
-                    visibleModifications[m.replace('mod_', '')];
+            const nonmodKeys = Object.keys(nonmods).sort().reverse();
+            for (const m of nonmodKeys) {
+                const modKey = m.replace(/^(nonmod_|mod_)/, '');
+                const mod = visibleModifications[modKey];
                 if (!mod) {
                     console.warn(`${m} not known yet`);
                     continue;
@@ -90,19 +109,14 @@ export async function makeImage(ctx, props) {
                 if (isolatedModification && mod.type !== isolatedModification) {
                     continue;
                 }
-                const cmp = complementBase[mod.base];
-                const detectable = mod.base === 'N'
-                    ? score0
-                    : (((_b = snps[mod.base]) === null || _b === void 0 ? void 0 : _b.entryDepth) || 0) +
-                        (((_c = snps[cmp]) === null || _c === void 0 ? void 0 : _c.entryDepth) || 0) +
-                        (refbase === mod.base ? ref['1'] : 0) +
-                        (refbase === cmp ? ref['-1'] : 0);
-                const modifiable = mod.base === 'N'
-                    ? score0
-                    : (((_d = snps[mod.base]) === null || _d === void 0 ? void 0 : _d.entryDepth) || 0) +
-                        (((_e = snps[cmp]) === null || _e === void 0 ? void 0 : _e.entryDepth) || 0) +
-                        (refbase === mod.base ? ref.entryDepth : 0) +
-                        (refbase === cmp ? ref.entryDepth : 0);
+                const { modifiable, detectable } = calculateModificationCounts({
+                    base: mod.base,
+                    isSimplex: simplexSet.has(mod.type),
+                    refbase,
+                    snps,
+                    ref,
+                    score0,
+                });
                 const { entryDepth, avgProbability = 0 } = snpinfo.nonmods[m];
                 const modFraction = (modifiable / score0) * (entryDepth / detectable);
                 const nonModColor = 'blue';
@@ -113,8 +127,10 @@ export async function makeImage(ctx, props) {
                 ctx.fillRect(Math.round(leftPx), bottom - (curr + modFraction * height), w, modFraction * height);
                 curr += modFraction * height;
             }
-            for (const m of Object.keys(mods).sort().reverse()) {
-                const mod = visibleModifications[m.replace('mod_', '')];
+            const modKeys = Object.keys(mods).sort().reverse();
+            for (const m of modKeys) {
+                const modKey = m.replace('mod_', '');
+                const mod = visibleModifications[modKey];
                 if (!mod) {
                     console.warn(`${m} not known yet`);
                     continue;
@@ -122,19 +138,14 @@ export async function makeImage(ctx, props) {
                 if (isolatedModification && mod.type !== isolatedModification) {
                     continue;
                 }
-                const cmp = complementBase[mod.base];
-                const detectable = mod.base === 'N'
-                    ? score0
-                    : (((_f = snps[mod.base]) === null || _f === void 0 ? void 0 : _f.entryDepth) || 0) +
-                        (((_g = snps[cmp]) === null || _g === void 0 ? void 0 : _g.entryDepth) || 0) +
-                        (refbase === mod.base ? ref['1'] : 0) +
-                        (refbase === cmp ? ref['-1'] : 0);
-                const modifiable = mod.base === 'N'
-                    ? score0
-                    : (((_h = snps[mod.base]) === null || _h === void 0 ? void 0 : _h.entryDepth) || 0) +
-                        (((_j = snps[cmp]) === null || _j === void 0 ? void 0 : _j.entryDepth) || 0) +
-                        (refbase === mod.base ? ref.entryDepth : 0) +
-                        (refbase === cmp ? ref.entryDepth : 0);
+                const { modifiable, detectable } = calculateModificationCounts({
+                    base: mod.base,
+                    isSimplex: simplexSet.has(mod.type),
+                    refbase,
+                    snps,
+                    ref,
+                    score0,
+                });
                 const { entryDepth, avgProbability = 0 } = mods[m];
                 const modFraction = (modifiable / score0) * (entryDepth / detectable);
                 const baseColor = mod.color || 'black';

package/esm/SNPCoverageRenderer/types.d.ts

@@ -15,6 +15,7 @@ export interface RenderArgsDeserializedWithFeatures extends RenderArgsDeserializ
     };
     displayCrossHatches: boolean;
     visibleModifications?: Record<string, ModificationTypeWithColor>;
+    simplexModifications?: string[];
     statusCallback?: (arg: string) => void;
     colorBy: ColorBy;
 }

package/esm/shared/LinearReadDisplayBaseMixin.d.ts

@@ -0,0 +1,24 @@
+import type { ChainData } from './fetchChains';
+import type { ColorBy, FilterBy } from './types';
+export declare function LinearReadDisplayBaseMixin(): import("mobx-state-tree").IModelType<{
+    filterBySetting: import("mobx-state-tree").IType<FilterBy | undefined, FilterBy | undefined, FilterBy | undefined>;
+    colorBySetting: import("mobx-state-tree").IType<ColorBy | undefined, ColorBy | undefined, ColorBy | undefined>;
+}, {
+    loading: boolean;
+    chainData: ChainData | undefined;
+    lastDrawnOffsetPx: number | undefined;
+    lastDrawnBpPerPx: number;
+    ref: HTMLCanvasElement | null;
+} & {
+    setLastDrawnOffsetPx(n: number): void;
+    setLastDrawnBpPerPx(n: number): void;
+    setLoading(f: boolean): void;
+    setRef(ref: HTMLCanvasElement | null): void;
+    setColorScheme(colorBy: {
+        type: string;
+    }): void;
+    setChainData(args: ChainData): void;
+    setFilterBy(filter: FilterBy): void;
+} & {
+    readonly drawn: boolean;
+}, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>;

package/esm/shared/LinearReadDisplayBaseMixin.js

@@ -0,0 +1,47 @@
+import { types } from 'mobx-state-tree';
+export function LinearReadDisplayBaseMixin() {
+    return types
+        .model('LinearReadDisplayBaseMixin', {
+        filterBySetting: types.frozen(),
+        colorBySetting: types.frozen(),
+    })
+        .volatile(() => ({
+        loading: false,
+        chainData: undefined,
+        lastDrawnOffsetPx: undefined,
+        lastDrawnBpPerPx: 0,
+        ref: null,
+    }))
+        .actions(self => ({
+        setLastDrawnOffsetPx(n) {
+            self.lastDrawnOffsetPx = n;
+        },
+        setLastDrawnBpPerPx(n) {
+            self.lastDrawnBpPerPx = n;
+        },
+        setLoading(f) {
+            self.loading = f;
+        },
+        setRef(ref) {
+            self.ref = ref;
+        },
+        setColorScheme(colorBy) {
+            self.colorBySetting = {
+                ...colorBy,
+            };
+        },
+        setChainData(args) {
+            self.chainData = args;
+        },
+        setFilterBy(filter) {
+            self.filterBySetting = {
+                ...filter,
+            };
+        },
+    }))
+        .views(self => ({
+        get drawn() {
+            return self.lastDrawnOffsetPx !== undefined;
+        },
+    }));
+}

package/esm/shared/LinearReadDisplayWithLayoutMixin.d.ts

@@ -0,0 +1,11 @@
+import type { FlatbushEntry } from './flatbushType';
+import type Flatbush from '@jbrowse/core/util/flatbush';
+export declare function LinearReadDisplayWithLayoutMixin(): import("mobx-state-tree").IModelType<{}, {
+    featureLayout: Flatbush | undefined;
+    mouseoverRef: HTMLCanvasElement | null;
+    featuresForFlatbush: FlatbushEntry[];
+} & {
+    setFeatureLayout(layout: Flatbush): void;
+    setMouseoverRef(ref: HTMLCanvasElement | null): void;
+    setFeaturesForFlatbush(features: FlatbushEntry[]): void;
+}, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>;

package/esm/shared/LinearReadDisplayWithLayoutMixin.js

@@ -0,0 +1,21 @@
+import { types } from 'mobx-state-tree';
+export function LinearReadDisplayWithLayoutMixin() {
+    return types
+        .model('LinearReadDisplayWithLayoutMixin', {})
+        .volatile(() => ({
+        featureLayout: undefined,
+        mouseoverRef: null,
+        featuresForFlatbush: [],
+    }))
+        .actions(self => ({
+        setFeatureLayout(layout) {
+            self.featureLayout = layout;
+        },
+        setMouseoverRef(ref) {
+            self.mouseoverRef = ref;
+        },
+        setFeaturesForFlatbush(features) {
+            self.featuresForFlatbush = features;
+        },
+    }));
+}

package/esm/shared/LinearReadDisplayWithPairFiltersMixin.d.ts

@@ -0,0 +1,11 @@
+export declare function LinearReadDisplayWithPairFiltersMixin(): import("mobx-state-tree").IModelType<{
+    drawSingletons: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    drawProperPairs: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    flipStrandLongReadChains: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    featureHeight: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<number>>;
+}, {
+    setDrawSingletons(f: boolean): void;
+    setDrawProperPairs(f: boolean): void;
+    setFlipStrandLongReadChains(f: boolean): void;
+    setFeatureHeight(n?: number): void;
+}, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>;

package/esm/shared/LinearReadDisplayWithPairFiltersMixin.js

@@ -0,0 +1,24 @@
+import { types } from 'mobx-state-tree';
+export function LinearReadDisplayWithPairFiltersMixin() {
+    return types
+        .model('LinearReadDisplayWithPairFiltersMixin', {
+        drawSingletons: true,
+        drawProperPairs: true,
+        flipStrandLongReadChains: true,
+        featureHeight: types.maybe(types.number),
+    })
+        .actions(self => ({
+        setDrawSingletons(f) {
+            self.drawSingletons = f;
+        },
+        setDrawProperPairs(f) {
+            self.drawProperPairs = f;
+        },
+        setFlipStrandLongReadChains(f) {
+            self.flipStrandLongReadChains = f;
+        },
+        setFeatureHeight(n) {
+            self.featureHeight = n;
+        },
+    }));
+}

package/esm/shared/afterAttach.js

@@ -17,10 +17,11 @@ export function doAfterAttach(self, cb) {
         if (!self.chainData) {
             return;
         }
-        ctx.clearRect(0, 0, canvas.width, self.height * 2);
+        const height = 'layoutHeight' in self ? self.layoutHeight || 1 : self.height;
         ctx.resetTransform();
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
         ctx.scale(2, 2);
-        cb(self, ctx, canvas.width, self.height);
+        cb(self, ctx, canvas.width, height);
         self.setLastDrawnOffsetPx(view.offsetPx);
         self.setLastDrawnBpPerPx(view.bpPerPx);
     }

package/esm/shared/chainToSimpleFeature.d.ts

@@ -0,0 +1,3 @@
+import { SimpleFeature } from '@jbrowse/core/util';
+import type { ReducedFeature } from './fetchChains';
+export declare function chainToSimpleFeature(chain: ReducedFeature[]): SimpleFeature;

package/esm/shared/chainToSimpleFeature.js

@@ -0,0 +1,40 @@
+import { SimpleFeature } from '@jbrowse/core/util';
+export function chainToSimpleFeature(chain) {
+    if (chain.length === 0) {
+        throw new Error('Chain cannot be empty');
+    }
+    const firstFeat = chain[0];
+    return new SimpleFeature({
+        uniqueId: firstFeat.id,
+        id: firstFeat.id,
+        name: firstFeat.name,
+        refName: firstFeat.refName,
+        start: Math.min(...chain.map(f => f.start)),
+        end: Math.max(...chain.map(f => f.end)),
+        strand: firstFeat.strand,
+        flags: firstFeat.flags,
+        tlen: firstFeat.tlen,
+        pair_orientation: firstFeat.pair_orientation,
+        clipPos: firstFeat.clipPos,
+        ...(firstFeat.next_ref && { next_ref: firstFeat.next_ref }),
+        ...(firstFeat.next_pos !== undefined && { next_pos: firstFeat.next_pos }),
+        ...(firstFeat.SA && { SA: firstFeat.SA }),
+        subfeatures: chain.map((feat, idx) => ({
+            uniqueId: `${feat.id}_${idx}`,
+            id: `${feat.id}_${idx}`,
+            name: feat.name,
+            refName: feat.refName,
+            start: feat.start,
+            end: feat.end,
+            strand: feat.strand,
+            type: 'alignment_part',
+            flags: feat.flags,
+            tlen: feat.tlen,
+            pair_orientation: feat.pair_orientation,
+            clipPos: feat.clipPos,
+            ...(feat.next_ref && { next_ref: feat.next_ref }),
+            ...(feat.next_pos !== undefined && { next_pos: feat.next_pos }),
+            ...(feat.SA && { SA: feat.SA }),
+        })),
+    });
+}

package/esm/shared/chevron.d.ts

@@ -0,0 +1 @@
+export declare function drawChevron(ctx: CanvasRenderingContext2D, x: number, y: number, width: number, height: number, strand: number, color: string, chevronWidth: number, stroke?: string): void;

package/esm/shared/chevron.js

@@ -0,0 +1,24 @@
+export function drawChevron(ctx, x, y, width, height, strand, color, chevronWidth, stroke) {
+    ctx.fillStyle = color;
+    ctx.beginPath();
+    if (strand === -1) {
+        ctx.moveTo(x - chevronWidth, y + height / 2);
+        ctx.lineTo(x, y + height);
+        ctx.lineTo(x + width, y + height);
+        ctx.lineTo(x + width, y);
+        ctx.lineTo(x, y);
+    }
+    else {
+        ctx.moveTo(x, y);
+        ctx.lineTo(x, y + height);
+        ctx.lineTo(x + width, y + height);
+        ctx.lineTo(x + width + chevronWidth, y + height / 2);
+        ctx.lineTo(x + width, y);
+    }
+    ctx.closePath();
+    ctx.fill();
+    if (stroke) {
+        ctx.strokeStyle = stroke;
+        ctx.stroke();
+    }
+}