@jbrowse/plugin-alignments 3.7.0 → 4.0.0

package/esm/PileupRenderer/layoutFeature.js

@@ -1,38 +1,33 @@
-import { bpSpanPx } from '@jbrowse/core/util';
-export function layoutFeature({ feature, layout, bpPerPx, region, showSoftClip, heightPx, displayMode, }) {
-    let expansionBefore = 0;
-    let expansionAfter = 0;
+export function layoutFeature({ feature, layout, showSoftClip, heightPx, displayMode, }) {
+    const featureStart = feature.get('start');
+    const featureEnd = feature.get('end');
+    let s = featureStart;
+    let e = featureEnd;
     if (showSoftClip) {
         const mismatches = feature.get('mismatches');
-        const seq = feature.get('seq');
-        if (seq) {
-            for (const { type, start, cliplen = 0 } of mismatches) {
-                if (type === 'softclip') {
-                    if (start === 0) {
-                        expansionBefore = cliplen;
+        if (mismatches) {
+            for (const mismatch of mismatches) {
+                if (mismatch.type === 'softclip') {
+                    const cliplen = mismatch.cliplen;
+                    if (mismatch.start === 0) {
+                        s -= cliplen;
                     }
                     else {
-                        expansionAfter = cliplen;
+                        e += cliplen;
                     }
                 }
             }
         }
     }
-    const [leftPx, rightPx] = bpSpanPx(feature.get('start') - expansionBefore, feature.get('end') + expansionAfter, region, bpPerPx);
     if (displayMode === 'compact') {
         heightPx /= 3;
     }
-    if (feature.get('refName') !== region.refName) {
-        throw new Error(`feature ${feature.id()} is not on the current region's reference sequence ${region.refName}`);
-    }
-    const topPx = layout.addRect(feature.id(), feature.get('start') - expansionBefore, feature.get('end') + expansionAfter, heightPx, feature);
+    const topPx = layout.addRect(feature.id(), s, e, heightPx, feature);
     if (topPx === null) {
         return null;
     }
     return {
         feature,
-        leftPx,
-        rightPx,
         topPx: displayMode === 'collapse' ? 0 : topPx,
         heightPx,
     };

package/esm/PileupRenderer/layoutFeatures.d.ts

@@ -1,5 +1,5 @@
-import type { PreProcessedRenderArgs } from './types';
+import type { LayoutFeature, PreProcessedRenderArgs } from './types.ts';
 export declare function layoutFeats(props: PreProcessedRenderArgs): {
-    layoutRecords: import("./layoutFeature").LayoutRecord[];
+    layoutRecords: LayoutFeature[];
     height: number;
 };

package/esm/PileupRenderer/layoutFeatures.js

@@ -1,24 +1,29 @@
 import { readConfObject } from '@jbrowse/core/configuration';
-import { iterMap, notEmpty } from '@jbrowse/core/util';
-import { layoutFeature } from './layoutFeature';
-import { sortFeature } from './sortUtil';
+import { layoutFeature } from "./layoutFeature.js";
+import { sortFeature } from "./sortUtil.js";
 export function layoutFeats(props) {
-    const { layout, features, sortedBy, config, bpPerPx, showSoftClip, regions } = props;
+    const { layout, features, sortedBy, config, showSoftClip, regions } = props;
     const region = regions[0];
-    const featureMap = (sortedBy === null || sortedBy === void 0 ? void 0 : sortedBy.type) && region.start === sortedBy.pos
-        ? sortFeature(features, sortedBy)
-        : features;
+    const hasSortedBy = sortedBy?.type && region.start === sortedBy.pos;
+    const featureMap = hasSortedBy ? sortFeature(features, sortedBy) : features;
     const heightPx = readConfObject(config, 'height');
     const displayMode = readConfObject(config, 'displayMode');
-    const layoutRecords = iterMap(featureMap.values(), feature => layoutFeature({
-        feature,
-        layout,
-        bpPerPx,
-        region,
-        showSoftClip,
-        heightPx,
-        displayMode,
-    }), featureMap.size).filter(notEmpty);
+    const featureArr = hasSortedBy
+        ? [...featureMap.values()]
+        : [...featureMap.values()].sort((a, b) => a.get('start') - b.get('start'));
+    const layoutRecords = [];
+    for (const feature of featureArr) {
+        const result = layoutFeature({
+            feature,
+            layout,
+            showSoftClip,
+            heightPx,
+            displayMode,
+        });
+        if (result) {
+            layoutRecords.push(result);
+        }
+    }
     return {
         layoutRecords,
         height: Math.max(layout.getTotalHeight(), 1),

package/esm/PileupRenderer/makeImageData.d.ts

@@ -1,17 +1,20 @@
-import type { FlatbushItem, ProcessedRenderArgs } from './types';
-import type { Feature } from '@jbrowse/core/util';
-interface LayoutFeature {
-    heightPx: number;
-    topPx: number;
-    feature: Feature;
-}
-export declare function makeImageData({ ctx, layoutRecords, canvasWidth, renderArgs, }: {
-    ctx: CanvasRenderingContext2D;
-    canvasWidth: number;
-    layoutRecords: LayoutFeature[];
-    renderArgs: ProcessedRenderArgs;
-}): {
-    flatbush: ArrayBufferLike;
-    items: FlatbushItem[];
-};
-export {};
+import type { FlatbushItem, PreProcessedRenderArgs } from './types.ts';
+import type PluginManager from '@jbrowse/core/PluginManager';
+export declare function makeImageData({ width, renderArgs, pluginManager, }: {
+    width: number;
+    renderArgs: PreProcessedRenderArgs;
+    pluginManager: PluginManager;
+}): Promise<{
+    result: {
+        flatbush: ArrayBufferLike;
+        items: FlatbushItem[];
+    } & ({
+        canvasRecordedData: Record<string, unknown>;
+    } | {
+        imageData: ImageBitmap;
+    } | {
+        html: string;
+    });
+    height: number;
+    featureNames: Record<string, string>;
+}>;

package/esm/PileupRenderer/makeImageData.js

@@ -1,28 +1,53 @@
 import { readConfObject } from '@jbrowse/core/configuration';
+import { getAdapter } from '@jbrowse/core/data_adapters/dataAdapterCache';
 import { createJBrowseTheme } from '@jbrowse/core/ui';
-import { forEachWithStopTokenCheck } from '@jbrowse/core/util';
+import { renderToAbstractCanvas } from '@jbrowse/core/util';
 import Flatbush from '@jbrowse/core/util/flatbush';
-import { renderAlignment } from './renderers/renderAlignment';
-import { renderMismatches } from './renderers/renderMismatches';
-import { renderSoftClipping } from './renderers/renderSoftClipping';
-import { getCharWidthHeight, getColorBaseMap, getContrastBaseMap, shouldDrawIndels, shouldDrawSNPsMuted, } from './util';
-export function makeImageData({ ctx, layoutRecords, canvasWidth, renderArgs, }) {
+import { checkStopToken2, createStopTokenChecker, } from '@jbrowse/core/util/stopToken';
+import { layoutFeats } from "./layoutFeatures.js";
+import { renderAlignment } from "./renderers/renderAlignment.js";
+import { renderMismatchesCallback } from "./renderers/renderMismatchesCallback.js";
+import { renderSoftClipping } from "./renderers/renderSoftClipping.js";
+import { getCharWidthHeight, getColorBaseMap, getContrastBaseMap, setAlignmentFont, shouldDrawIndels, shouldDrawSNPsMuted, } from "../shared/util.js";
+async function fetchRegionSequence(renderArgs, pluginManager) {
+    const { colorBy, features, sessionId, regions, adapterConfig } = renderArgs;
+    if (colorBy?.type !== 'methylation' || !features.size) {
+        return undefined;
+    }
+    const { dataAdapter } = await getAdapter(pluginManager, sessionId, adapterConfig);
+    const sequenceAdapterConfig = dataAdapter.sequenceAdapterConfig;
+    if (!sequenceAdapterConfig) {
+        return undefined;
+    }
+    const { dataAdapter: seqAdapter } = await getAdapter(pluginManager, sessionId, sequenceAdapterConfig);
+    const region = regions[0];
+    return seqAdapter.getSequence({
+        ...region,
+        refName: region.originalRefName || region.refName,
+        start: Math.max(0, region.start - 1),
+        end: region.end + 1,
+    });
+}
+function renderFeatures({ ctx, layoutRecords, canvasWidth, renderArgs, }) {
     const { stopToken, config, showSoftClip, colorBy, theme: configTheme, } = renderArgs;
     const mismatchAlpha = readConfObject(config, 'mismatchAlpha');
     const minSubfeatureWidth = readConfObject(config, 'minSubfeatureWidth');
     const largeInsertionIndicatorScale = readConfObject(config, 'largeInsertionIndicatorScale');
     const hideSmallIndels = readConfObject(config, 'hideSmallIndels');
+    const hideMismatches = readConfObject(config, 'hideMismatches');
+    const hideLargeIndels = readConfObject(config, 'hideLargeIndels');
     const defaultColor = readConfObject(config, 'color') === '#f0f';
     const theme = createJBrowseTheme(configTheme);
     const colorMap = getColorBaseMap(theme);
     const colorContrastMap = getContrastBaseMap(theme);
-    ctx.font = 'bold 10px Courier New,monospace';
+    setAlignmentFont(ctx);
     const { charWidth, charHeight } = getCharWidthHeight();
-    const drawSNPsMuted = shouldDrawSNPsMuted(colorBy === null || colorBy === void 0 ? void 0 : colorBy.type);
+    const drawSNPsMuted = shouldDrawSNPsMuted(colorBy?.type);
     const drawIndels = shouldDrawIndels();
     const coords = [];
     const items = [];
-    forEachWithStopTokenCheck(layoutRecords, stopToken, feat => {
+    const lastCheck = createStopTokenChecker(stopToken);
+    for (const feat of layoutRecords) {
         const alignmentRet = renderAlignment({
             ctx,
             feat,
@@ -40,11 +65,14 @@ export function makeImageData({ ctx, layoutRecords, canvasWidth, renderArgs, })
         for (let i = 0, l = alignmentRet.items.length; i < l; i++) {
             items.push(alignmentRet.items[i]);
         }
-        const ret = renderMismatches({
+        const ret = renderMismatchesCallback({
             ctx,
             feat,
-            renderArgs,
+            bpPerPx: renderArgs.bpPerPx,
+            regions: renderArgs.regions,
             hideSmallIndels,
+            hideMismatches,
+            hideLargeIndels,
             mismatchAlpha,
             drawSNPsMuted,
             drawIndels,
@@ -73,7 +101,8 @@ export function makeImageData({ ctx, layoutRecords, canvasWidth, renderArgs, })
                 canvasWidth,
             });
         }
-    });
+        checkStopToken2(lastCheck);
+    }
     const flatbush = new Flatbush(Math.max(items.length, 1));
     if (coords.length) {
         for (let i = 0; i < coords.length; i += 4) {
@@ -89,3 +118,28 @@ export function makeImageData({ ctx, layoutRecords, canvasWidth, renderArgs, })
         items,
     };
 }
+export async function makeImageData({ width, renderArgs, pluginManager, }) {
+    const { statusCallback = () => { }, features } = renderArgs;
+    statusCallback('Creating layout');
+    const { layoutRecords, height } = layoutFeats(renderArgs);
+    statusCallback('Fetching sequence');
+    const regionSequence = await fetchRegionSequence(renderArgs, pluginManager);
+    statusCallback('Rendering alignments');
+    const result = await renderToAbstractCanvas(width, height, renderArgs, ctx => renderFeatures({
+        ctx,
+        layoutRecords,
+        canvasWidth: width,
+        renderArgs: {
+            ...renderArgs,
+            regionSequence,
+        },
+    }));
+    const featureNames = {};
+    for (const [id, feature] of features) {
+        const name = feature.get('name');
+        if (name) {
+            featureNames[id] = name;
+        }
+    }
+    return { result, height, featureNames };
+}

package/esm/PileupRenderer/renderers/cigarUtil.d.ts

@@ -0,0 +1,18 @@
+export declare const CIGAR_M = 0;
+export declare const CIGAR_I = 1;
+export declare const CIGAR_D = 2;
+export declare const CIGAR_N = 3;
+export declare const CIGAR_S = 4;
+export declare const CIGAR_H = 5;
+export declare const CIGAR_P = 6;
+export declare const CIGAR_EQ = 7;
+export declare const CIGAR_X = 8;
+export declare const CIGAR_M_EQ_MASK = 129;
+export declare const CIGAR_MATCH_MASK = 385;
+export declare const CIGAR_SEQ_ONLY_MASK = 18;
+export declare const CIGAR_REF_SKIP_MASK = 12;
+export declare const CIGAR_REF_CONSUMING_MASK = 389;
+export declare const SEQRET = "=ACMGRSVTWYHKDBN";
+export declare const SEQRET_NUMERIC_DECODER: Uint8Array<ArrayBuffer>;
+export declare const CHAR_FROM_CODE: string[];
+export declare function getCigarOps(cigar: Uint32Array | string | undefined): ArrayLike<number>;

package/esm/PileupRenderer/renderers/cigarUtil.js

@@ -0,0 +1,23 @@
+import { parseCigar2 } from "../../MismatchParser/index.js";
+export const CIGAR_M = 0;
+export const CIGAR_I = 1;
+export const CIGAR_D = 2;
+export const CIGAR_N = 3;
+export const CIGAR_S = 4;
+export const CIGAR_H = 5;
+export const CIGAR_P = 6;
+export const CIGAR_EQ = 7;
+export const CIGAR_X = 8;
+export const CIGAR_M_EQ_MASK = 0b10000001;
+export const CIGAR_MATCH_MASK = 0b110000001;
+export const CIGAR_SEQ_ONLY_MASK = 0b10010;
+export const CIGAR_REF_SKIP_MASK = 0b1100;
+export const CIGAR_REF_CONSUMING_MASK = 0b110000101;
+export const SEQRET = '=ACMGRSVTWYHKDBN';
+export const SEQRET_NUMERIC_DECODER = new Uint8Array([
+    61, 97, 99, 109, 103, 114, 115, 118, 116, 119, 121, 104, 107, 100, 98, 110,
+]);
+export const CHAR_FROM_CODE = Array.from({ length: 128 }, (_, i) => String.fromCharCode(i));
+export function getCigarOps(cigar) {
+    return typeof cigar === 'string' ? parseCigar2(cigar) : cigar || [];
+}

package/esm/PileupRenderer/renderers/getAlignmentShapeColor.js

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

package/esm/PileupRenderer/renderers/renderAlignment.d.ts

@@ -1,5 +1,5 @@
-import type { FlatbushItem, ProcessedRenderArgs } from '../types';
-import type { LayoutFeature } from '../util';
+import type { FlatbushItem, ProcessedRenderArgs } from '../types.ts';
+import type { LayoutFeature } from '../util.ts';
 export declare function renderAlignment({ ctx, feat, renderArgs, colorMap, colorContrastMap, charWidth, charHeight, defaultColor, canvasWidth, }: {
     ctx: CanvasRenderingContext2D;
     feat: LayoutFeature;

package/esm/PileupRenderer/renderers/renderAlignment.js

@@ -1,10 +1,18 @@
-import { getAlignmentShapeColor } from './getAlignmentShapeColor';
-import { renderAlignmentShape } from './renderAlignmentShape';
-import { renderMethylation } from './renderMethylation';
-import { renderModifications } from './renderModifications';
-import { renderPerBaseLettering } from './renderPerBaseLettering';
-import { renderPerBaseQuality } from './renderPerBaseQuality';
-import { parseCigar } from '../../MismatchParser';
+import { getCigarOps } from "./cigarUtil.js";
+import { getAlignmentShapeColor } from "./getAlignmentShapeColor.js";
+import { renderAlignmentShape } from "./renderAlignmentShape.js";
+import { renderMethylation } from "./renderMethylation.js";
+import { renderModifications } from "./renderModifications.js";
+import { renderPerBaseLettering } from "./renderPerBaseLettering.js";
+import { renderPerBaseQuality } from "./renderPerBaseQuality.js";
+function collectResults(ret, coords, items) {
+    for (let i = 0, l = ret.coords.length; i < l; i++) {
+        coords.push(ret.coords[i]);
+    }
+    for (let i = 0, l = ret.items.length; i < l; i++) {
+        items.push(ret.items[i]);
+    }
+}
 export function renderAlignment({ ctx, feat, renderArgs, colorMap, colorContrastMap, charWidth, charHeight, defaultColor, canvasWidth, }) {
     const items = [];
     const coords = [];
@@ -12,7 +20,7 @@ export function renderAlignment({ ctx, feat, renderArgs, colorMap, colorContrast
     const { tag = '', type: colorType = '' } = colorBy || {};
     const { feature } = feat;
     const region = regions[0];
-    ctx.fillStyle = getAlignmentShapeColor({
+    const alignmentColor = getAlignmentShapeColor({
         feature,
         config,
         tag,
@@ -20,22 +28,27 @@ export function renderAlignment({ ctx, feat, renderArgs, colorMap, colorContrast
         colorType,
         colorTagMap,
     });
-    renderAlignmentShape({ ctx, feat, renderArgs });
+    const cigarOps = getCigarOps(feature.get('NUMERIC_CIGAR') || feature.get('CIGAR'));
+    renderAlignmentShape({
+        ctx,
+        feat,
+        renderArgs,
+        canvasWidth,
+        color: alignmentColor,
+        cigarOps,
+    });
     switch (colorType) {
         case 'perBaseQuality': {
-            const cigarOps = parseCigar(feature.get('CIGAR'));
             renderPerBaseQuality({
                 ctx,
                 feat,
                 region,
                 bpPerPx,
-                canvasWidth,
                 cigarOps,
             });
             break;
         }
         case 'perBaseLettering': {
-            const cigarOps = parseCigar(feature.get('CIGAR'));
             renderPerBaseLettering({
                 ctx,
                 feat,
@@ -51,35 +64,18 @@ export function renderAlignment({ ctx, feat, renderArgs, colorMap, colorContrast
             break;
         }
         case 'modifications': {
-            const cigarOps = parseCigar(feature.get('CIGAR'));
-            const ret = renderModifications({
+            collectResults(renderModifications({
                 ctx,
                 feat,
                 region,
                 bpPerPx,
                 renderArgs,
-                canvasWidth,
                 cigarOps,
-            });
-            for (let i = 0, l = ret.coords.length; i < l; i++) {
-                coords.push(ret.coords[i]);
-            }
-            for (let i = 0, l = ret.items.length; i < l; i++) {
-                items.push(ret.items[i]);
-            }
+            }), coords, items);
             break;
         }
         case 'methylation': {
-            const cigarOps = parseCigar(feature.get('CIGAR'));
-            renderMethylation({
-                ctx,
-                feat,
-                region,
-                bpPerPx,
-                renderArgs,
-                canvasWidth,
-                cigarOps,
-            });
+            collectResults(renderMethylation({ ctx, feat, region, bpPerPx, renderArgs, cigarOps }), coords, items);
             break;
         }
     }

package/esm/PileupRenderer/renderers/renderAlignmentShape.d.ts

@@ -1,7 +1,10 @@
-import type { ProcessedRenderArgs } from '../types';
-import type { LayoutFeature } from '../util';
-export declare function renderAlignmentShape({ ctx, feat, renderArgs, }: {
+import type { ProcessedRenderArgs } from '../types.ts';
+import type { LayoutFeature } from '../util.ts';
+export declare function renderAlignmentShape({ ctx, feat, renderArgs, canvasWidth, color, cigarOps, }: {
     ctx: CanvasRenderingContext2D;
     feat: LayoutFeature;
     renderArgs: ProcessedRenderArgs;
+    canvasWidth: number;
+    color: string;
+    cigarOps: ArrayLike<number>;
 }): void;