@jbrowse/plugin-alignments 3.7.0 → 4.0.0

package/esm/PileupRenderer/renderers/renderSoftClipping.js

@@ -1,7 +1,6 @@
 import { readConfObject } from '@jbrowse/core/configuration';
-import { bpSpanPx } from '@jbrowse/core/util';
-import { parseCigar } from '../../MismatchParser';
-import { fillRect, getCharWidthHeight } from '../util';
+import { CIGAR_D, CIGAR_EQ, CIGAR_I, CIGAR_M, CIGAR_N, CIGAR_S, CIGAR_X, getCigarOps, } from "./cigarUtil.js";
+import { getCharWidthHeight } from "../../shared/util.js";
 export function renderSoftClipping({ ctx, feat, renderArgs, config, theme, colorMap, canvasWidth, }) {
     const { feature, topPx, heightPx } = feat;
     const { regions, bpPerPx } = renderArgs;
@@ -16,40 +15,60 @@ export function renderSoftClipping({ ctx, feat, renderArgs, config, theme, color
     const heightLim = charHeight - 2;
     let seqOffset = 0;
     let refOffset = 0;
-    const CIGAR = feature.get('CIGAR');
-    const cigarOps = parseCigar(CIGAR);
-    for (let i = 0; i < cigarOps.length; i += 2) {
-        const op = cigarOps[i + 1];
-        const len = +cigarOps[i];
-        if (op === 'S') {
-            for (let k = 0; k < len; k++) {
-                const base = seq[seqOffset + k];
-                const s0 = feature.get('start') - (i === 0 ? len : 0) + refOffset + k;
-                const [leftPx, rightPx] = bpSpanPx(s0, s0 + 1, region, bpPerPx);
-                const widthPx = Math.max(minFeatWidth, rightPx - leftPx);
-                const baseColor = colorMap[base] || '#000000';
-                ctx.fillStyle = baseColor;
-                fillRect(ctx, leftPx, topPx, widthPx, heightPx, canvasWidth);
-                if (widthPx >= charWidth && heightPx >= heightLim) {
-                    ctx.fillStyle = theme.palette.getContrastText(baseColor);
-                    ctx.fillText(base, leftPx + (widthPx - charWidth) / 2 + 1, topPx + heightPx);
+    const CIGAR = feature.get('NUMERIC_CIGAR') || feature.get('CIGAR');
+    const ops = getCigarOps(CIGAR);
+    const featStart = feature.get('start');
+    const regionStart = region.start;
+    const regionEnd = region.end;
+    const reversed = region.reversed;
+    const invBpPerPx = 1 / bpPerPx;
+    for (let i = 0, l = ops.length; i < l; i++) {
+        const packed = ops[i];
+        const len = packed >> 4;
+        const op = packed & 0xf;
+        if (op === CIGAR_S) {
+            const clipStart = featStart - (i === 0 ? len : 0) + refOffset;
+            const clipEnd = clipStart + len;
+            if (clipEnd > regionStart && clipStart < regionEnd) {
+                const visStart = Math.max(0, regionStart - clipStart);
+                const visEnd = Math.min(len, regionEnd - clipStart);
+                for (let k = visStart; k < visEnd; k++) {
+                    const base = seq[seqOffset + k];
+                    const s0 = clipStart + k;
+                    const leftPx = reversed
+                        ? (regionEnd - s0 - 1) * invBpPerPx
+                        : (s0 - regionStart) * invBpPerPx;
+                    const rightPx = reversed
+                        ? (regionEnd - s0) * invBpPerPx
+                        : (s0 + 1 - regionStart) * invBpPerPx;
+                    const widthPx = Math.max(minFeatWidth, rightPx - leftPx);
+                    const baseColor = colorMap[base] || '#000000';
+                    ctx.fillStyle = baseColor;
+                    ctx.fillRect(leftPx, topPx, widthPx, heightPx);
+                    if (widthPx >= charWidth && heightPx >= heightLim) {
+                        const x = leftPx + (widthPx - charWidth) / 2 + 1;
+                        const y = topPx + heightPx;
+                        const color = theme.palette.getContrastText(baseColor);
+                        if (x >= 0 && x <= canvasWidth && color) {
+                            ctx.fillStyle = color;
+                            ctx.fillText(base, x, y);
+                        }
+                    }
                 }
             }
             seqOffset += len;
         }
-        if (op === 'N') {
+        else if (op === CIGAR_N) {
             refOffset += len;
         }
-        if (op === 'M' || op === '=' || op === 'X') {
+        else if (op === CIGAR_M || op === CIGAR_EQ || op === CIGAR_X) {
             refOffset += len;
             seqOffset += len;
         }
-        if (op === 'H') {
-        }
-        if (op === 'D') {
+        else if (op === CIGAR_D) {
             refOffset += len;
         }
-        if (op === 'I') {
+        else if (op === CIGAR_I) {
             seqOffset += len;
         }
     }

package/esm/PileupRenderer/sortUtil.d.ts

@@ -1,3 +1,3 @@
-import type { SortedBy } from '../shared/types';
+import type { SortedBy } from '../shared/types.ts';
 import type { Feature } from '@jbrowse/core/util';
-export declare const sortFeature: (features: Map<string, Feature>, sortedBy: SortedBy) => Map<string, Feature>;
+export declare function sortFeature(features: Map<string, Feature>, sortedBy: SortedBy): Map<string, Feature>;

package/esm/PileupRenderer/sortUtil.js

@@ -1,21 +1,23 @@
 import { doesIntersect2 } from '@jbrowse/core/util';
-export const sortFeature = (features, sortedBy) => {
-    const featureArray = Array.from(features.values());
+export function sortFeature(features, sortedBy) {
     const featuresInCenterLine = [];
     const featuresOutsideCenter = [];
     const { pos, type } = sortedBy;
-    for (const innerArray of featureArray) {
-        const feature = innerArray;
+    let firstFeature;
+    for (const feature of features.values()) {
+        if (!firstFeature) {
+            firstFeature = feature;
+        }
         const start = feature.get('start');
         const end = feature.get('end');
         if (doesIntersect2(pos - 1, pos, start, end)) {
-            featuresInCenterLine.push(innerArray);
+            featuresInCenterLine.push(feature);
         }
         else {
-            featuresOutsideCenter.push(innerArray);
+            featuresOutsideCenter.push(feature);
         }
     }
-    const isCram = featureArray.length ? featureArray[0].get('tags') : false;
+    const isCram = firstFeature ? firstFeature.get('tags') : false;
     switch (type) {
         case 'Start location': {
             featuresInCenterLine.sort((a, b) => a.get('start') - b.get('start'));
@@ -37,30 +39,36 @@ export const sortFeature = (features, sortedBy) => {
             break;
         }
         case 'Base pair': {
-            const baseSortArray = [];
+            const baseMap = new Map();
             for (const feature of featuresInCenterLine) {
                 const mismatches = feature.get('mismatches');
+                const start = feature.get('start');
                 for (const m of mismatches) {
-                    const start = feature.get('start');
                     const offset = start + m.start + 1;
                     const consuming = m.type === 'insertion' || m.type === 'softclip';
                     const len = consuming ? 0 : m.length;
                     if (pos >= offset && pos < offset + len) {
-                        baseSortArray.push([feature.id(), m]);
+                        baseMap.set(feature.id(), m);
                     }
                 }
             }
-            const baseMap = new Map(baseSortArray);
             featuresInCenterLine.sort((a, b) => {
                 const aMismatch = baseMap.get(a.id());
                 const bMismatch = baseMap.get(b.id());
-                const acode = bMismatch === null || bMismatch === void 0 ? void 0 : bMismatch.base.toUpperCase();
-                const bcode = aMismatch === null || aMismatch === void 0 ? void 0 : aMismatch.base.toUpperCase();
+                const acode = aMismatch?.type === 'mismatch'
+                    ? aMismatch.base.toUpperCase()
+                    : aMismatch?.type === 'deletion'
+                        ? '*'
+                        : undefined;
+                const bcode = bMismatch?.type === 'mismatch'
+                    ? bMismatch.base.toUpperCase()
+                    : bMismatch?.type === 'deletion'
+                        ? '*'
+                        : undefined;
                 return acode === bcode && acode === '*'
-                    ?
-                        aMismatch.length - bMismatch.length
-                    : (acode ? acode.charCodeAt(0) : 0) -
-                        (bcode ? bcode.charCodeAt(0) : 0);
+                    ? (bMismatch?.length ?? 0) - (aMismatch?.length ?? 0)
+                    : (bcode ? bcode.charCodeAt(0) : 0) -
+                        (acode ? acode.charCodeAt(0) : 0);
             });
             break;
         }
@@ -69,8 +77,12 @@ export const sortFeature = (features, sortedBy) => {
             break;
         }
     }
-    return new Map([...featuresInCenterLine, ...featuresOutsideCenter].map(feature => [
-        feature.id(),
-        feature,
-    ]));
-};
+    const result = new Map();
+    for (const feature of featuresInCenterLine) {
+        result.set(feature.id(), feature);
+    }
+    for (const feature of featuresOutsideCenter) {
+        result.set(feature.id(), feature);
+    }
+    return result;
+}

package/esm/PileupRenderer/types.d.ts

@@ -1,4 +1,4 @@
-import type { ColorBy, ModificationTypeWithColor, SortedBy } from '../shared/types';
+import type { ColorBy, ModificationTypeWithColor, SortedBy } from '../shared/types.ts';
 import type { RenderArgsDeserialized as BoxRenderArgsDeserialized } from '@jbrowse/core/pluggableElementTypes/renderers/BoxRendererType';
 import type { Feature } from '@jbrowse/core/util';
 import type { BaseLayout } from '@jbrowse/core/util/layouts/BaseLayout';
@@ -7,12 +7,37 @@ export interface LayoutFeature {
     topPx: number;
     feature: Feature;
 }
-export interface FlatbushItem {
-    type: 'insertion' | 'deletion' | 'mismatch' | 'modification';
-    seq: string;
-    modType?: string;
-    probability?: number;
-}
+export type FlatbushItem = {
+    type: 'mismatch';
+    base: string;
+    start: number;
+} | {
+    type: 'insertion';
+    length: number;
+    sequence?: string;
+    start: number;
+} | {
+    type: 'deletion';
+    length: number;
+    start: number;
+} | {
+    type: 'softclip';
+    length: number;
+    start: number;
+} | {
+    type: 'hardclip';
+    length: number;
+    start: number;
+} | {
+    type: 'modification';
+    info: string;
+    modType: string;
+    probability: number;
+    start: number;
+    mismatch?: string;
+};
+export declare function getFlatbushItemLabel(item: FlatbushItem): string;
+export declare function flatbushItemToFeatureData(item: FlatbushItem, refName: string, sourceRead?: string): Record<string, unknown>;
 export interface RenderArgsDeserialized extends BoxRenderArgsDeserialized {
     colorBy?: ColorBy;
     colorTagMap?: Record<string, string>;

package/esm/PileupRenderer/types.js

@@ -1 +1,71 @@
-export {};
+const LARGE_INSERTION_THRESHOLD = 10;
+export function getFlatbushItemLabel(item) {
+    switch (item.type) {
+        case 'insertion':
+            if (item.sequence && item.sequence.length <= LARGE_INSERTION_THRESHOLD) {
+                return `Insertion: ${item.sequence}`;
+            }
+            return `Insertion: ${item.length}bp`;
+        case 'deletion':
+            return `Deletion: ${item.length}bp`;
+        case 'softclip':
+            return `Soft clip: ${item.length}bp`;
+        case 'hardclip':
+            return `Hard clip: ${item.length}bp`;
+        case 'modification': {
+            const mismatchInfo = item.mismatch ? `\nMismatch: ${item.mismatch}` : '';
+            return item.info + mismatchInfo;
+        }
+        case 'mismatch':
+            return `Mismatch: ${item.base}`;
+    }
+}
+export function flatbushItemToFeatureData(item, refName, sourceRead) {
+    const base = {
+        uniqueId: `${item.type}-${item.start}`,
+        type: item.type,
+        refName,
+        sourceRead,
+    };
+    switch (item.type) {
+        case 'insertion':
+            return {
+                ...base,
+                start: item.start,
+                end: item.start + 1,
+                ...(item.sequence ? { sequence: item.sequence } : {}),
+                insertionLength: item.length,
+            };
+        case 'deletion':
+            return {
+                ...base,
+                start: item.start,
+                end: item.start + item.length,
+            };
+        case 'softclip':
+        case 'hardclip':
+            return {
+                ...base,
+                start: item.start,
+                end: item.start + 1,
+                clipLength: item.length,
+            };
+        case 'modification':
+            return {
+                ...base,
+                start: item.start,
+                end: item.start + 1,
+                info: item.info,
+                modType: item.modType,
+                probability: item.probability.toFixed(3),
+                ...(item.mismatch ? { mismatch: item.mismatch } : {}),
+            };
+        case 'mismatch':
+            return {
+                ...base,
+                start: item.start,
+                end: item.start + 1,
+                base: item.base,
+            };
+    }
+}

package/esm/PileupRenderer/util.d.ts

@@ -1,28 +1,7 @@
 import type { Feature } from '@jbrowse/core/util';
-import type { Theme } from '@mui/material';
-export declare function fillRect(ctx: CanvasRenderingContext2D, l: number, t: number, w: number, h: number, cw: number, color?: string): void;
-export declare function getColorBaseMap(theme: Theme): {
-    A: string;
-    C: string;
-    G: string;
-    T: string;
-    deletion: string;
-    insertion: string;
-    hardclip: string;
-    softclip: string;
-    skip: string;
-};
-export declare function getContrastBaseMap(theme: Theme): {
-    [k: string]: string;
-};
-export declare function shouldDrawSNPsMuted(type?: string): boolean;
-export declare function shouldDrawIndels(): boolean;
 export interface LayoutFeature {
     heightPx: number;
     topPx: number;
     feature: Feature;
 }
-export declare function getCharWidthHeight(): {
-    charWidth: number;
-    charHeight: number;
-};
+export declare function measureTextSmallNumber(n: number, fontSize?: number): number;

package/esm/PileupRenderer/util.js

@@ -1,41 +1,15 @@
 import { measureText } from '@jbrowse/core/util';
-export function fillRect(ctx, l, t, w, h, cw, color) {
-    if (l + w < 0 || l > cw) {
-        return;
+const smallNumberWidthCache10 = new Map();
+const smallNumberWidthCache = new Map();
+export function measureTextSmallNumber(n, fontSize) {
+    const cache = fontSize === 10 ? smallNumberWidthCache10 : smallNumberWidthCache;
+    if (n >= 0 && n < 100) {
+        let width = cache.get(n);
+        if (width === undefined) {
+            width = measureText(String(n), fontSize);
+            cache.set(n, width);
+        }
+        return width;
     }
-    if (color) {
-        ctx.fillStyle = color;
-    }
-    ctx.fillRect(l, t, w, h);
-}
-export function getColorBaseMap(theme) {
-    const { skip, deletion, insertion, hardclip, softclip, bases } = theme.palette;
-    return {
-        A: bases.A.main,
-        C: bases.C.main,
-        G: bases.G.main,
-        T: bases.T.main,
-        deletion,
-        insertion,
-        hardclip,
-        softclip,
-        skip,
-    };
-}
-export function getContrastBaseMap(theme) {
-    return Object.fromEntries(Object.entries(getColorBaseMap(theme)).map(([key, value]) => [
-        key,
-        theme.palette.getContrastText(value),
-    ]));
-}
-export function shouldDrawSNPsMuted(type) {
-    return ['methylation', 'modifications'].includes(type || '');
-}
-export function shouldDrawIndels() {
-    return true;
-}
-export function getCharWidthHeight() {
-    const charWidth = measureText('A');
-    const charHeight = measureText('M') - 2;
-    return { charWidth, charHeight };
+    return measureText(String(n), fontSize);
 }

package/esm/RenderLinearReadArcsDisplayRPC/RenderLinearReadArcsDisplay.d.ts

@@ -0,0 +1,34 @@
+import RpcMethodType from '@jbrowse/core/pluggableElementTypes/RpcMethodType';
+import type { ColorBy } from '../shared/types.ts';
+import type { AnyConfigurationModel } from '@jbrowse/core/configuration';
+import type { Base1DViewModel } from '@jbrowse/core/util/Base1DViewModel';
+import type { ThemeOptions } from '@mui/material';
+export interface RenderLinearReadArcsDisplayArgs {
+    sessionId: string;
+    view: Base1DViewModel;
+    adapterConfig: AnyConfigurationModel;
+    sequenceAdapter?: Record<string, unknown>;
+    config: AnyConfigurationModel;
+    theme: ThemeOptions;
+    filterBy: Record<string, unknown>;
+    colorBy: ColorBy;
+    drawInter: boolean;
+    drawLongRange: boolean;
+    lineWidth: number;
+    jitter: number;
+    height: number;
+    highResolutionScaling?: number;
+    exportSVG?: {
+        rasterizeLayers?: boolean;
+        scale?: number;
+    };
+    statusCallback?: (status: string) => void;
+    stopToken?: string;
+}
+export default class RenderLinearReadArcsDisplay extends RpcMethodType {
+    name: string;
+    deserializeArguments(args: any, _rpcDriver: string): any;
+    renameRegionsIfNeeded(args: RenderLinearReadArcsDisplayArgs): Promise<RenderLinearReadArcsDisplayArgs>;
+    serializeArguments(args: Record<string, unknown>, rpcDriver: string): Promise<Record<string, unknown>>;
+    execute(args: Record<string, unknown>, rpcDriver: string): Promise<import("librpc-web-mod").RpcResult>;
+}

package/esm/RenderLinearReadArcsDisplayRPC/RenderLinearReadArcsDisplay.js

@@ -0,0 +1,49 @@
+import RpcMethodType from '@jbrowse/core/pluggableElementTypes/RpcMethodType';
+import { renameRegionsIfNeeded } from '@jbrowse/core/util';
+import configSchema from "../LinearReadArcsDisplay/configSchema.js";
+export default class RenderLinearReadArcsDisplay extends RpcMethodType {
+    name = 'RenderLinearReadArcsDisplay';
+    deserializeArguments(args, _rpcDriver) {
+        return {
+            ...args,
+            config: configSchema(this.pluginManager).create(args.config, {
+                pluginManager: this.pluginManager,
+            }),
+        };
+    }
+    async renameRegionsIfNeeded(args) {
+        const assemblyManager = this.pluginManager.rootModel?.session?.assemblyManager;
+        if (!assemblyManager) {
+            throw new Error('no assembly manager');
+        }
+        const { view, sessionId, adapterConfig } = args;
+        const { displayedRegions } = view;
+        if (!displayedRegions.length) {
+            return args;
+        }
+        const result = await renameRegionsIfNeeded(assemblyManager, {
+            sessionId,
+            adapterConfig,
+            regions: displayedRegions,
+        });
+        return {
+            ...args,
+            view: {
+                ...view,
+                displayedRegions: result.regions,
+            },
+        };
+    }
+    async serializeArguments(args, rpcDriver) {
+        const renamed = await this.renameRegionsIfNeeded(args);
+        return super.serializeArguments(renamed, rpcDriver);
+    }
+    async execute(args, rpcDriver) {
+        const deserializedArgs = await this.deserializeArguments(args, rpcDriver);
+        const { executeRenderLinearReadArcsDisplay } = await import("./executeRenderLinearReadArcsDisplay.js");
+        return executeRenderLinearReadArcsDisplay({
+            pluginManager: this.pluginManager,
+            args: deserializedArgs,
+        });
+    }
+}

package/esm/RenderLinearReadArcsDisplayRPC/drawFeatsRPC.d.ts

@@ -0,0 +1,24 @@
+import type { ChainData, ColorBy } from '../shared/types.ts';
+interface DrawFeatsRPCParams {
+    ctx: CanvasRenderingContext2D;
+    width: number;
+    height: number;
+    chainData: ChainData;
+    colorBy: ColorBy;
+    drawInter: boolean;
+    drawLongRange: boolean;
+    lineWidth: number;
+    jitter: number;
+    view: {
+        bpToPx: (arg: {
+            refName: string;
+            coord: number;
+        }) => {
+            offsetPx: number;
+        } | undefined;
+    };
+    offsetPx: number;
+    stopToken?: string;
+}
+export declare function drawFeatsRPC(params: DrawFeatsRPCParams): void;
+export {};

package/esm/RenderLinearReadArcsDisplayRPC/drawFeatsRPC.js

@@ -0,0 +1,156 @@
+import { checkStopToken2, createStopTokenChecker, } from '@jbrowse/core/util/stopToken';
+import { featurizeSA, getTag } from "../MismatchParser/index.js";
+import { drawVerticalLine, extractCoreFeat, extractCoreFeatBasic, filterAndSortLongReadChain, filterPairedChain, getMateInfo, getStrandRelativeFirstClipLength, jitter, toCoreFeat, toCoreFeatBasic, } from "../shared/arcUtils.js";
+import { getPairedInsertSizeAndOrientationColor, getPairedInsertSizeColor, getPairedOrientationColor, } from "../shared/color.js";
+import { SAM_FLAG_MATE_UNMAPPED } from "../shared/samFlags.js";
+import { hasPairedReads } from "../shared/util.js";
+const ARC_VS_BEZIER_THRESHOLD = 10_000;
+const VERTICAL_LINE_THRESHOLD = 100_000;
+const GRADIENT_HSL_SATURATION = 50;
+const GRADIENT_HSL_LIGHTNESS = 50;
+function getArcEndpoint(feat, isPairedEnd, isMate) {
+    const isReverse = feat.strand === -1;
+    if (isPairedEnd) {
+        return isReverse ? feat.start : feat.end;
+    }
+    return isMate
+        ? isReverse
+            ? feat.end
+            : feat.start
+        : isReverse
+            ? feat.start
+            : feat.end;
+}
+function getArcStrokeColor(params) {
+    const { longRange, drawArcInsteadOfBezier, hasPaired, colorByType, k1, s1, s2, absrad, stats, } = params;
+    if (longRange && drawArcInsteadOfBezier) {
+        return 'red';
+    }
+    if (hasPaired) {
+        if (colorByType === 'insertSizeAndOrientation') {
+            return getPairedInsertSizeAndOrientationColor(k1, stats)[0];
+        }
+        if (colorByType === 'orientation') {
+            return getPairedOrientationColor(k1)[0];
+        }
+        if (colorByType === 'insertSize') {
+            return getPairedInsertSizeColor(k1, stats)?.[0] || 'grey';
+        }
+        if (colorByType === 'gradient') {
+            return `hsl(${Math.log10(absrad) * 10},${GRADIENT_HSL_SATURATION}%,${GRADIENT_HSL_LIGHTNESS}%)`;
+        }
+        return 'grey';
+    }
+    if (colorByType === 'orientation' ||
+        colorByType === 'insertSizeAndOrientation') {
+        if (s1 === -1 && s2 === 1) {
+            return 'navy';
+        }
+        if (s1 === 1 && s2 === -1) {
+            return 'green';
+        }
+        return 'grey';
+    }
+    if (colorByType === 'gradient') {
+        return `hsl(${Math.log10(absrad) * 10},${GRADIENT_HSL_SATURATION}%,${GRADIENT_HSL_LIGHTNESS}%)`;
+    }
+    return 'grey';
+}
+function drawBezierArc(ctx, startX, endX, destY, jitterVal) {
+    ctx.beginPath();
+    ctx.moveTo(startX, 0);
+    ctx.bezierCurveTo(startX + jitter(jitterVal), destY, endX, destY, endX + jitter(jitterVal), 0);
+    ctx.stroke();
+}
+export function drawFeatsRPC(params) {
+    const { ctx, height, chainData, colorBy, drawInter, drawLongRange, lineWidth, jitter: jitterVal, view, offsetPx, stopToken, } = params;
+    const { chains, stats } = chainData;
+    const colorByType = colorBy.type;
+    const hasPaired = hasPairedReads(chainData);
+    ctx.lineWidth = lineWidth;
+    function draw(k1, k2, longRange) {
+        const s1 = k1.strand;
+        const s2 = k2.strand;
+        const p1 = getArcEndpoint(k1, hasPaired, false);
+        const p2 = getArcEndpoint(k2, hasPaired, true);
+        const r1 = view.bpToPx({ refName: k1.refName, coord: p1 })?.offsetPx;
+        const r2 = view.bpToPx({ refName: k2.refName, coord: p2 })?.offsetPx;
+        if (r1 !== undefined && r2 !== undefined) {
+            const radius = (r2 - r1) / 2;
+            const absrad = Math.abs(radius);
+            const p = r1 - offsetPx;
+            const pEnd = r2 - offsetPx;
+            const drawArcInsteadOfBezier = absrad > ARC_VS_BEZIER_THRESHOLD;
+            ctx.strokeStyle = getArcStrokeColor({
+                longRange,
+                drawArcInsteadOfBezier,
+                hasPaired,
+                colorByType,
+                k1,
+                s1,
+                s2,
+                absrad,
+                stats,
+            });
+            const destY = Math.min(height + jitter(jitterVal), absrad);
+            if (absrad < 1) {
+                ctx.fillStyle = ctx.strokeStyle;
+                ctx.fillRect(p, 0, pEnd - p, Math.max(absrad, lineWidth));
+            }
+            else if (longRange && absrad > VERTICAL_LINE_THRESHOLD) {
+                drawVerticalLine(ctx, p + jitter(jitterVal), height, 'red');
+                drawVerticalLine(ctx, pEnd + jitter(jitterVal), height, 'red');
+            }
+            else if (longRange && drawArcInsteadOfBezier) {
+                ctx.moveTo(p, 0);
+                ctx.beginPath();
+                ctx.arc(p + radius + jitter(jitterVal), 0, absrad, 0, Math.PI);
+                ctx.stroke();
+            }
+            else {
+                drawBezierArc(ctx, p, p + radius * 2, destY, jitterVal);
+            }
+        }
+        else if (r1 && drawInter) {
+            drawVerticalLine(ctx, r1 - offsetPx, height, 'purple');
+        }
+    }
+    function drawSingletonPairedEnd(f) {
+        draw(extractCoreFeat(f), getMateInfo(f), true);
+    }
+    function drawSingletonLongRead(f) {
+        const allFeatures = [
+            f,
+            ...featurizeSA(getTag(f, 'SA'), f.id(), f.get('strand'), f.get('name')),
+        ].toSorted((a, b) => getStrandRelativeFirstClipLength(a) -
+            getStrandRelativeFirstClipLength(b));
+        for (let i = 0, len = allFeatures.length; i < len - 1; i++) {
+            draw(toCoreFeat(allFeatures[i]), toCoreFeatBasic(allFeatures[i + 1]), true);
+        }
+    }
+    function drawMultiFeatureChain(chain) {
+        const filtered = hasPaired
+            ? filterPairedChain(chain)
+            : filterAndSortLongReadChain(chain);
+        for (let i = 0, len = filtered.length; i < len - 1; i++) {
+            draw(extractCoreFeat(filtered[i]), extractCoreFeatBasic(filtered[i + 1]), false);
+        }
+    }
+    const lastCheck = createStopTokenChecker(stopToken);
+    for (const chain of chains) {
+        if (chain.length === 1 && drawLongRange) {
+            const f = chain[0];
+            const isMateUnmapped = f.get('flags') & SAM_FLAG_MATE_UNMAPPED;
+            if (hasPaired && !isMateUnmapped) {
+                drawSingletonPairedEnd(f);
+            }
+            else {
+                drawSingletonLongRead(f);
+            }
+        }
+        else {
+            drawMultiFeatureChain(chain);
+        }
+        checkStopToken2(lastCheck);
+    }
+}