@jbrowse/plugin-alignments 3.6.5 → 3.7.0

package/dist/LinearSNPCoverageDisplay/components/TooltipContents.js

@@ -4,21 +4,159 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const util_1 = require("@jbrowse/core/util");
 const mui_1 = require("tss-react/mui");
+const modificationData_1 = require("../../shared/modificationData");
 const useStyles = (0, mui_1.makeStyles)()(() => ({
     td: {
         whiteSpace: 'nowrap',
     },
+    table: {
+        width: '100%',
+        tableLayout: 'auto',
+    },
 }));
-const toP = (s = 0) => +(+s).toFixed(1);
+const toP = (s = 0) => +s.toFixed(1);
 const pct = (n, total = 1) => `${toP((n / (total || 1)) * 100)}%`;
-function ColorSquare({ base, model, }) {
+function getModificationColor(base, model) {
     var _a;
-    const { visibleModifications } = model;
-    return base.startsWith('mod_') ? ((0, jsx_runtime_1.jsx)("div", { style: {
-            width: 10,
-            height: 10,
-            background: (_a = visibleModifications.get(base.replace('mod_', ''))) === null || _a === void 0 ? void 0 : _a.color,
-        } })) : null;
+    if (!base.startsWith('mod_') && !base.startsWith('nonmod_')) {
+        return undefined;
+    }
+    if (base.startsWith('nonmod_')) {
+        return 'blue';
+    }
+    return (_a = model.visibleModifications.get(base.replace(/^mod_/, ''))) === null || _a === void 0 ? void 0 : _a.color;
+}
+function isModification(base) {
+    return base.startsWith('mod_') || base.startsWith('nonmod_');
+}
+function getModificationType(base) {
+    return base.replace(/^(mod_|nonmod_)/, '');
+}
+function formatStrandCounts(score) {
+    const neg = score['-1'] ? `${score['-1']}(-)` : '';
+    const pos = score['1'] ? `${score['1']}(+)` : '';
+    return neg + pos;
+}
+function shouldShowPercentage(base) {
+    return base !== 'depth' && base !== 'skip';
+}
+function getModificationLabel(base, model) {
+    const isNonmod = base.startsWith('nonmod_');
+    if (isNonmod) {
+        const genomicBase = base.replace('nonmod_', '');
+        return `Unmodified ${genomicBase}`;
+    }
+    const modType = getModificationType(base);
+    const mod = model.visibleModifications.get(modType);
+    if (mod) {
+        const modName = (0, modificationData_1.getModificationName)(modType);
+        return modName;
+    }
+    return base.toUpperCase();
+}
+function getDuplexModificationLabel(base, model) {
+    const isNonmod = base.startsWith('nonmod_');
+    if (isNonmod) {
+        const genomicBase = base.replace('nonmod_', '');
+        return `Unmodified ${genomicBase}`;
+    }
+    const modType = getModificationType(base);
+    const mod = model.visibleModifications.get(modType);
+    if (!mod) {
+        return base.toUpperCase();
+    }
+    const modName = (0, modificationData_1.getModificationName)(modType);
+    return modName;
+}
+function ColorSquare({ base, model }) {
+    const color = getModificationColor(base, model);
+    if (!color) {
+        return null;
+    }
+    return (0, jsx_runtime_1.jsx)("div", { style: { width: 10, height: 10, background: color } });
+}
+function TableHeader() {
+    return ((0, jsx_runtime_1.jsx)("thead", { children: (0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("th", {}), (0, jsx_runtime_1.jsx)("th", { children: "Base" }), (0, jsx_runtime_1.jsx)("th", { children: "Count" }), (0, jsx_runtime_1.jsx)("th", { children: "% of Reads" }), (0, jsx_runtime_1.jsx)("th", { children: "Strands" }), (0, jsx_runtime_1.jsx)("th", { children: "Avg Prob" })] }) }));
+}
+function TotalRow({ readsCounted }) {
+    return ((0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("td", {}), (0, jsx_runtime_1.jsx)("td", { children: "Total" }), (0, jsx_runtime_1.jsx)("td", { children: readsCounted }), (0, jsx_runtime_1.jsx)("td", { children: " " }), (0, jsx_runtime_1.jsx)("td", { children: " " }), (0, jsx_runtime_1.jsx)("td", { children: " " })] }));
+}
+function RefRow({ referenceBase, reference, readsCounted, }) {
+    return ((0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("td", {}), (0, jsx_runtime_1.jsxs)("td", { children: ["REF ", referenceBase ? `(${referenceBase.toUpperCase()})` : ''] }), (0, jsx_runtime_1.jsx)("td", { children: reference.entryDepth }), (0, jsx_runtime_1.jsx)("td", { children: pct(reference.entryDepth, readsCounted) }), (0, jsx_runtime_1.jsx)("td", { children: formatStrandCounts(reference) }), (0, jsx_runtime_1.jsx)("td", { children: " " })] }));
+}
+function DuplexModificationRow({ base, score, readsCounted, model, tdClass, rowKey, }) {
+    return ((0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("td", { children: (0, jsx_runtime_1.jsx)(ColorSquare, { model: model, base: base }) }), (0, jsx_runtime_1.jsx)("td", { children: getDuplexModificationLabel(base, model) }), (0, jsx_runtime_1.jsx)("td", { className: tdClass, children: score.entryDepth }), (0, jsx_runtime_1.jsx)("td", { children: shouldShowPercentage(base)
+                    ? pct(score.entryDepth, readsCounted)
+                    : '---' }), (0, jsx_runtime_1.jsx)("td", { children: formatStrandCounts(score) }), (0, jsx_runtime_1.jsx)("td", { children: score.avgProbability !== undefined ? pct(score.avgProbability) : '' })] }, rowKey));
+}
+function SimplexOrRegularRow({ base, score, isMod, readsCounted, model, tdClass, rowKey, }) {
+    return ((0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("td", { children: (0, jsx_runtime_1.jsx)(ColorSquare, { model: model, base: base }) }), (0, jsx_runtime_1.jsx)("td", { children: isMod ? getModificationLabel(base, model) : base.toUpperCase() }), (0, jsx_runtime_1.jsx)("td", { className: tdClass, children: score.entryDepth }), (0, jsx_runtime_1.jsx)("td", { children: shouldShowPercentage(base)
+                    ? pct(score.entryDepth, readsCounted)
+                    : '---' }), (0, jsx_runtime_1.jsx)("td", { children: formatStrandCounts(score) }), (0, jsx_runtime_1.jsx)("td", { children: score.avgProbability !== undefined ? pct(score.avgProbability) : '' })] }, rowKey));
+}
+function ModificationRows({ info, readsCounted, model, tdClass, }) {
+    const consolidatedEntries = {};
+    for (const [key, entry] of Object.entries(info)) {
+        for (const [base, score] of Object.entries(entry)) {
+            const isNonmod = base.startsWith('nonmod_');
+            if (isNonmod) {
+                const modType = getModificationType(base);
+                const mod = model.visibleModifications.get(modType);
+                const genomicBase = (mod === null || mod === void 0 ? void 0 : mod.base) || 'X';
+                const consolidatedKey = `${key}_nonmod_${genomicBase}`;
+                if (!consolidatedEntries[consolidatedKey]) {
+                    consolidatedEntries[consolidatedKey] = {
+                        base: `nonmod_${genomicBase}`,
+                        score: {
+                            entryDepth: 0,
+                            '1': 0,
+                            '-1': 0,
+                            avgProbability: 0,
+                        },
+                        isNonmod: true,
+                    };
+                }
+                const consolidated = consolidatedEntries[consolidatedKey];
+                consolidated.score.entryDepth += score.entryDepth;
+                consolidated.score['1'] += score['1'];
+                consolidated.score['-1'] += score['-1'];
+                if (score.avgProbability !== undefined) {
+                    const prevAvg = consolidated.score.avgProbability || 0;
+                    const prevCount = consolidated.score.entryDepth - score.entryDepth;
+                    consolidated.score.avgProbability =
+                        prevCount > 0
+                            ? (prevAvg * prevCount +
+                                score.avgProbability * score.entryDepth) /
+                                consolidated.score.entryDepth
+                            : score.avgProbability;
+                }
+            }
+            else {
+                consolidatedEntries[`${key}_${base}`] = {
+                    base,
+                    score: { ...score },
+                    isNonmod: false,
+                };
+            }
+        }
+    }
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: Object.entries(consolidatedEntries).map(([rowKey, { base, score, isNonmod }]) => {
+            var _a;
+            const modType = getModificationType(base);
+            const isMod = isModification(base) || isNonmod;
+            const isSimplex = !isNonmod && isMod && ((_a = model.simplexModifications) === null || _a === void 0 ? void 0 : _a.has(modType));
+            const posStrandCount = score['1'] || 0;
+            const negStrandCount = score['-1'] || 0;
+            if (isNonmod) {
+                return ((0, jsx_runtime_1.jsx)(SimplexOrRegularRow, { base: base, score: score, isMod: true, isSimplex: false, readsCounted: readsCounted, model: model, tdClass: tdClass, rowKey: rowKey }, rowKey));
+            }
+            if (isMod &&
+                !isSimplex &&
+                (posStrandCount > 0 || negStrandCount > 0)) {
+                return ((0, jsx_runtime_1.jsx)(DuplexModificationRow, { base: base, score: score, posStrandCount: posStrandCount, negStrandCount: negStrandCount, readsCounted: readsCounted, model: model, tdClass: tdClass, rowKey: rowKey }, rowKey));
+            }
+            return ((0, jsx_runtime_1.jsx)(SimplexOrRegularRow, { base: base, score: score, isMod: isMod, isSimplex: isSimplex, readsCounted: readsCounted, model: model, tdClass: tdClass, rowKey: rowKey }, rowKey));
+        }) }));
 }
 const TooltipContents = (0, react_1.forwardRef)(function TooltipContents2(props, reactRef) {
     const { feature, model } = props;
@@ -26,7 +164,7 @@ const TooltipContents = (0, react_1.forwardRef)(function TooltipContents2(props,
     const start = feature.get('start') + 1;
     const end = feature.get('end');
     const name = feature.get('refName');
-    const { refbase, readsCounted, depth, ref, ...info } = feature.get('snpinfo');
+    const { refbase: referenceBase, readsCounted, depth, ref: reference, ...info } = feature.get('snpinfo');
     return ((0, jsx_runtime_1.jsx)("div", { ref: reactRef, children: (0, jsx_runtime_1.jsxs)("table", { children: [(0, jsx_runtime_1.jsx)("caption", { children: [
                         name,
                         start === end
@@ -34,15 +172,6 @@ const TooltipContents = (0, react_1.forwardRef)(function TooltipContents2(props,
                             : `${(0, util_1.toLocale)(start)}..${(0, util_1.toLocale)(end)}`,
                     ]
                         .filter(f => !!f)
-                        .join(':') }), (0, jsx_runtime_1.jsx)("thead", { children: (0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("th", {}), (0, jsx_runtime_1.jsx)("th", { children: "Base" }), (0, jsx_runtime_1.jsx)("th", { children: "Count" }), (0, jsx_runtime_1.jsx)("th", { children: "% of Total" }), (0, jsx_runtime_1.jsx)("th", { children: "Strands" })] }) }), (0, jsx_runtime_1.jsxs)("tbody", { children: [(0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("td", {}), (0, jsx_runtime_1.jsx)("td", { children: "Total" }), (0, jsx_runtime_1.jsx)("td", { children: readsCounted }), (0, jsx_runtime_1.jsx)("td", { children: " " }), (0, jsx_runtime_1.jsx)("td", { children: " " })] }), (0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("td", {}), (0, jsx_runtime_1.jsxs)("td", { children: ["REF ", refbase ? `(${refbase.toUpperCase()})` : ''] }), (0, jsx_runtime_1.jsx)("td", { children: ref.entryDepth }), (0, jsx_runtime_1.jsx)("td", { children: pct(ref.entryDepth, readsCounted) }), (0, jsx_runtime_1.jsxs)("td", { children: [ref['-1'] ? `${ref['-1']}(-)` : '', ref['1'] ? `${ref['1']}(+)` : ''] })] }), Object.entries(info).map(([key, entry]) => Object.entries(entry).map(([base, score]) => ((0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("td", { children: (0, jsx_runtime_1.jsx)(ColorSquare, { model: model, base: base }) }), (0, jsx_runtime_1.jsxs)("td", { children: [base.toUpperCase(), " "] }), (0, jsx_runtime_1.jsx)("td", { className: classes.td, children: [
-                                        score.entryDepth,
-                                        score.avgProbability !== undefined
-                                            ? `(avg. ${pct(score.avgProbability)} prob.)`
-                                            : '',
-                                    ]
-                                        .filter(f => !!f)
-                                        .join(' ') }), (0, jsx_runtime_1.jsx)("td", { children: base === 'depth' || base === 'skip'
-                                        ? '---'
-                                        : pct(score.entryDepth, readsCounted) }), (0, jsx_runtime_1.jsxs)("td", { children: [score['-1'] ? `${score['-1']}(-)` : '', score['1'] ? `${score['1']}(+)` : ''] })] }, `${key}_${base}`))))] })] }) }));
+                        .join(':') }), (0, jsx_runtime_1.jsx)(TableHeader, {}), (0, jsx_runtime_1.jsxs)("tbody", { children: [(0, jsx_runtime_1.jsx)(TotalRow, { readsCounted: readsCounted }), (0, jsx_runtime_1.jsx)(RefRow, { referenceBase: referenceBase, reference: reference, readsCounted: readsCounted }), (0, jsx_runtime_1.jsx)(ModificationRows, { info: info, readsCounted: readsCounted, model: model, tdClass: classes.td })] })] }) }));
 });
 exports.default = TooltipContents;

package/dist/LinearSNPCoverageDisplay/model.js

@@ -61,6 +61,7 @@ function stateModelFactory(pluginManager, configSchema) {
     }))
         .volatile(() => ({
         visibleModifications: mobx_1.observable.map({}),
+        simplexModifications: new Set(),
         modificationsReady: false,
     }))
         .views(self => ({
@@ -102,10 +103,17 @@ function stateModelFactory(pluginManager, configSchema) {
                 }
             }
         },
+        setSimplexModifications(simplex) {
+            self.simplexModifications = new Set(simplex);
+        },
     }))
         .views(self => {
         const { adapterProps: superAdapterProps } = self;
         return {
+            get modificationThreshold() {
+                var _a, _b, _c;
+                return (_c = (_b = (_a = self.colorBy) === null || _a === void 0 ? void 0 : _a.modifications) === null || _b === void 0 ? void 0 : _b.threshold) !== null && _c !== void 0 ? _c : 10;
+            },
             get rendererConfig() {
                 const configBlob = (0, configuration_1.getConf)(self, ['renderers', self.rendererTypeName]) || {};
                 const { showArcs, showInterbaseCounts, showInterbaseIndicators } = self;
@@ -141,6 +149,7 @@ function stateModelFactory(pluginManager, configSchema) {
                     ...superProps,
                     filters,
                     filterBy,
+                    modificationThreshold: this.modificationThreshold,
                 };
             },
         };
@@ -170,13 +179,14 @@ function stateModelFactory(pluginManager, configSchema) {
                 const { staticBlocks } = view;
                 const { colorBy } = self;
                 if ((colorBy === null || colorBy === void 0 ? void 0 : colorBy.type) === 'modifications') {
-                    const vals = await (0, getUniqueModifications_1.getUniqueModifications)({
+                    const { modifications, simplexModifications } = await (0, getUniqueModifications_1.getUniqueModifications)({
                         model: self,
                         adapterConfig: (0, configuration_1.getConf)(self.parentTrack, 'adapter'),
                         blocks: staticBlocks,
                     });
                     if ((0, mobx_state_tree_1.isAlive)(self)) {
-                        self.updateVisibleModifications(vals);
+                        self.updateVisibleModifications(modifications);
+                        self.setSimplexModifications(simplexModifications);
                         self.setModificationsReady(true);
                     }
                 }
@@ -194,12 +204,13 @@ function stateModelFactory(pluginManager, configSchema) {
                 return !superProps.notReady && self.modificationsReady;
             },
             renderProps() {
-                const { colorBy, visibleModifications } = self;
+                const { colorBy, visibleModifications, simplexModifications } = self;
                 return {
                     ...superRenderProps(),
                     notReady: !this.renderReady(),
                     colorBy,
                     visibleModifications: Object.fromEntries(visibleModifications.toJSON()),
+                    simplexModifications: [...simplexModifications],
                 };
             },
             get TooltipComponent() {

package/dist/MismatchParser/cigarToMismatches.js

@@ -30,6 +30,7 @@ function cigarToMismatches(ops, seq, ref, qual) {
                 start: roffset,
                 type: 'insertion',
                 base: `${len}`,
+                insertedBases: seq === null || seq === void 0 ? void 0 : seq.slice(soffset, soffset + len),
                 length: 0,
             });
             soffset += len;

package/dist/ModificationParser/detectSimplexModifications.d.ts

@@ -0,0 +1,4 @@
+import type { ModificationType } from '../shared/types';
+type ModificationTypeList = readonly ModificationType[];
+export declare function detectSimplexModifications(modifications: ModificationTypeList): ReadonlySet<string>;
+export {};

package/dist/ModificationParser/detectSimplexModifications.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.detectSimplexModifications = detectSimplexModifications;
+function detectSimplexModifications(modifications) {
+    const minusStrandMods = new Set();
+    const simplexModifications = new Set();
+    for (const modification of modifications) {
+        const mod = modification;
+        if (mod.strand === '-') {
+            minusStrandMods.add(mod.type);
+        }
+    }
+    for (const modification of modifications) {
+        const mod = modification;
+        if (mod.strand === '+' && !minusStrandMods.has(mod.type)) {
+            simplexModifications.add(mod.type);
+        }
+    }
+    return simplexModifications;
+}

package/dist/ModificationParser/getModPositions.d.ts

@@ -1,6 +1,6 @@
 export declare function getModPositions(mm: string, fseq: string, fstrand: number): {
     type: string;
-    positions: number[];
     base: string;
     strand: string;
+    positions: any[];
 }[];

package/dist/ModificationParser/getModPositions.js

@@ -5,6 +5,7 @@ const util_1 = require("@jbrowse/core/util");
 const consts_1 = require("./consts");
 function getModPositions(mm, fseq, fstrand) {
     const seq = fstrand === -1 ? (0, util_1.revcom)(fseq) : fseq;
+    const seqLength = seq.length;
     const mods = mm.split(';');
     const result = [];
     for (const mod of mods) {
@@ -19,44 +20,40 @@ function getModPositions(mm, fseq, fstrand) {
         }
         const [, base, strand, typestr] = matches;
         const types = typestr.split(/(\d+|.)/);
-        if (strand === '-') {
-            console.warn('unsupported negative strand modifications');
-            result.push({
-                type: 'unsupported',
-                positions: [],
-                base: base,
-                strand: strand,
-            });
-        }
         for (const type of types) {
             if (type === '') {
                 continue;
             }
+            const splitLength = split.length;
             let currPos = 0;
-            const positions = [];
-            for (let i = 1, l = split.length; i < l; i++) {
+            const positions = fstrand === -1 ? new Array(splitLength - 1) : [];
+            let writeIndex = fstrand === -1 ? splitLength - 2 : 0;
+            for (let i = 1; i < splitLength; i++) {
                 let delta = +split[i];
                 do {
                     if (base === 'N' || base === seq[currPos]) {
                         delta--;
                     }
                     currPos++;
-                } while (delta >= 0 && currPos < seq.length);
+                } while (delta >= 0 && currPos < seqLength);
                 if (fstrand === -1) {
-                    const pos = seq.length - currPos;
+                    const pos = seqLength - currPos;
                     if (pos >= 0) {
-                        positions.unshift(pos);
+                        positions[writeIndex--] = pos;
+                    }
+                    else {
                     }
                 }
                 else {
-                    positions.push(currPos - 1);
+                    positions[writeIndex++] = currPos - 1;
                 }
             }
+            const validPositions = fstrand === -1 ? positions.slice(writeIndex + 1) : positions;
             result.push({
                 type,
                 base: base,
                 strand: strand,
-                positions,
+                positions: validPositions,
             });
         }
     }

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

@@ -10,5 +10,8 @@ export default class PileupGetVisibleModifications extends PileupBaseRPC {
         regions: Region[];
         sessionId: string;
         tag: string;
-    }, rpcDriver: string): Promise<ModificationType[]>;
+    }, rpcDriver: string): Promise<{
+        modifications: ModificationType[];
+        simplexModifications: string[];
+    }>;
 }

package/dist/PileupRPC/methods/GetVisibleModifications.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const dataAdapterCache_1 = require("@jbrowse/core/data_adapters/dataAdapterCache");
 const rxjs_1 = require("rxjs");
 const operators_1 = require("rxjs/operators");
+const detectSimplexModifications_1 = require("../../ModificationParser/detectSimplexModifications");
 const getModTypes_1 = require("../../ModificationParser/getModTypes");
 const util_1 = require("../../util");
 const base_1 = __importDefault(require("../base"));
@@ -25,12 +26,24 @@ class PileupGetVisibleModifications extends base_1.default {
         for (const feat of featuresArray) {
             const mmTag = (0, util_1.getTagAlt)(feat, 'MM', 'Mm');
             for (const mod of (0, getModTypes_1.getModTypes)(typeof mmTag === 'string' ? mmTag : '')) {
-                if (!uniqueModifications.has(mod.type)) {
-                    uniqueModifications.set(mod.type, mod);
+                const key = `${mod.base}${mod.strand}${mod.type}`;
+                if (!uniqueModifications.has(key)) {
+                    uniqueModifications.set(key, mod);
                 }
             }
         }
-        return [...uniqueModifications.values()];
+        const modifications = [...uniqueModifications.values()];
+        const simplexModifications = (0, detectSimplexModifications_1.detectSimplexModifications)(modifications);
+        const modificationsForDisplay = new Map();
+        for (const mod of modifications) {
+            if (!modificationsForDisplay.has(mod.type)) {
+                modificationsForDisplay.set(mod.type, mod);
+            }
+        }
+        return {
+            modifications: [...modificationsForDisplay.values()],
+            simplexModifications: [...simplexModifications],
+        };
     }
 }
 exports.default = PileupGetVisibleModifications;

package/dist/PileupRenderer/PileupRenderer.d.ts

@@ -20,6 +20,8 @@ export default class PileupRenderer extends BoxRendererType {
         width: number;
         maxHeightReached: boolean;
         containsNoTransferables: boolean;
+        flatbush: ArrayBufferLike;
+        items: import("./types").FlatbushItem[];
         canvasRecordedData: Record<string, unknown>;
         reactElement?: React.ReactElement;
         html?: string;
@@ -30,6 +32,8 @@ export default class PileupRenderer extends BoxRendererType {
         width: number;
         maxHeightReached: boolean;
         containsNoTransferables: boolean;
+        flatbush: ArrayBufferLike;
+        items: import("./types").FlatbushItem[];
         imageData: any;
         reactElement?: React.ReactElement;
         html?: string;
@@ -40,9 +44,10 @@ export default class PileupRenderer extends BoxRendererType {
         width: number;
         maxHeightReached: boolean;
         containsNoTransferables: boolean;
+        flatbush: ArrayBufferLike;
+        items: import("./types").FlatbushItem[];
         reactElement: React.ReactElement;
         html?: string;
     }>;
     createLayoutSession(args: PileupLayoutSessionProps): PileupLayoutSession;
 }
-export type { RenderArgs, RenderArgsSerialized, RenderResults, ResultsDeserialized, ResultsSerialized, } from '@jbrowse/core/pluggableElementTypes/renderers/BoxRendererType';

package/dist/PileupRenderer/PileupRenderer.js

@@ -88,20 +88,17 @@ class PileupRenderer extends BoxRendererType_1.default {
                 ? await this.fetchSequence(renderProps, region)
                 : undefined;
             const { makeImageData } = await Promise.resolve().then(() => __importStar(require('./makeImageData')));
-            return (0, util_1.renderToAbstractCanvas)(width, height, renderProps, ctx => {
-                makeImageData({
-                    ctx,
-                    layoutRecords,
-                    canvasWidth: width,
-                    renderArgs: {
-                        ...renderProps,
-                        layout,
-                        features,
-                        regionSequence,
-                    },
-                });
-                return undefined;
-            });
+            return (0, util_1.renderToAbstractCanvas)(width, height, renderProps, ctx => makeImageData({
+                ctx,
+                layoutRecords,
+                canvasWidth: width,
+                renderArgs: {
+                    ...renderProps,
+                    layout,
+                    features,
+                    regionSequence,
+                },
+            }));
         });
         const results = await super.render({
             ...renderProps,

package/dist/PileupRenderer/components/PileupRendering.d.ts

@@ -1,3 +1,5 @@
+import type { ColorBy, FilterBy, SortedBy } from '../../shared/types';
+import type { FlatbushItem } from '../types';
 import type { Region } from '@jbrowse/core/util/types';
 import type { BaseLinearDisplayModel } from '@jbrowse/plugin-linear-genome-view';
 declare const PileupRendering: (props: {
@@ -7,20 +9,11 @@ declare const PileupRendering: (props: {
     height: number;
     regions: Region[];
     bpPerPx: number;
-    sortedBy?: {
-        type: string;
-        pos: number;
-        refName: string;
-    };
-    colorBy?: {
-        type: string;
-        tag?: string;
-    };
-    filterBy?: {
-        tagFilter?: {
-            tag: string;
-        };
-    };
-    onMouseMove?: (event: React.MouseEvent, featureId?: string) => void;
+    sortedBy?: SortedBy;
+    colorBy?: ColorBy;
+    filterBy?: FilterBy;
+    items: FlatbushItem[];
+    flatbush: any;
+    onMouseMove?: (event: React.MouseEvent, featureId?: string, extra?: string) => void;
 }) => import("react/jsx-runtime").JSX.Element;
 export default PileupRendering;

package/dist/PileupRenderer/components/PileupRendering.js

@@ -1,13 +1,18 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const ui_1 = require("@jbrowse/core/ui");
 const util_1 = require("@jbrowse/core/util");
+const flatbush_1 = __importDefault(require("@jbrowse/core/util/flatbush"));
 const mobx_react_1 = require("mobx-react");
 const PileupRendering = (0, mobx_react_1.observer)(function (props) {
     var _a;
-    const { onMouseMove, blockKey, displayModel, width, height, regions, bpPerPx, sortedBy, colorBy, filterBy, } = props;
+    const { onMouseMove, blockKey, displayModel, width, height, regions, bpPerPx, sortedBy, colorBy, filterBy, flatbush, items, } = props;
+    const flatbush2 = (0, react_1.useMemo)(() => flatbush_1.default.from(flatbush), [flatbush]);
     const { selectedFeatureId, featureIdUnderMouse, contextMenuFeature } = displayModel || {};
     const [firstRender, setFirstRender] = (0, react_1.useState)(false);
     (0, react_1.useEffect)(() => {
@@ -81,7 +86,18 @@ const PileupRendering = (0, mobx_react_1.observer)(function (props) {
         const offsetY = event.clientY - rect.top;
         const px = region.reversed ? width - offsetX : offsetX;
         const clientBp = region.start + bpPerPx * px;
-        onMouseMove === null || onMouseMove === void 0 ? void 0 : onMouseMove(event, displayModel === null || displayModel === void 0 ? void 0 : displayModel.getFeatureOverlapping(blockKey, clientBp, offsetY));
+        const search = flatbush2.search(offsetX, offsetY, offsetX + 1, offsetY + 1);
+        const item = search.length ? items[search[0]] : undefined;
+        const label = item
+            ? item.type === 'insertion'
+                ? `Insertion: ${item.seq}`
+                : item.type === 'deletion'
+                    ? `Deletion: ${item.seq}bp`
+                    : item.type === 'modification'
+                        ? item.seq
+                        : `Mismatch: ${item.seq}`
+            : undefined;
+        onMouseMove === null || onMouseMove === void 0 ? void 0 : onMouseMove(event, displayModel === null || displayModel === void 0 ? void 0 : displayModel.getFeatureOverlapping(blockKey, clientBp, offsetY), label);
     }
     function callMouseHandler(handlerName, event) {
         const featureHandler = props[`onFeature${handlerName}`];

package/dist/PileupRenderer/makeImageData.d.ts

@@ -1,4 +1,4 @@
-import type { ProcessedRenderArgs } from './types';
+import type { FlatbushItem, ProcessedRenderArgs } from './types';
 import type { Feature } from '@jbrowse/core/util';
 interface LayoutFeature {
     heightPx: number;
@@ -10,5 +10,8 @@ export declare function makeImageData({ ctx, layoutRecords, canvasWidth, renderA
     canvasWidth: number;
     layoutRecords: LayoutFeature[];
     renderArgs: ProcessedRenderArgs;
-}): undefined;
+}): {
+    flatbush: ArrayBufferLike;
+    items: FlatbushItem[];
+};
 export {};

package/dist/PileupRenderer/makeImageData.js

@@ -1,12 +1,16 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.makeImageData = makeImageData;
 const configuration_1 = require("@jbrowse/core/configuration");
 const ui_1 = require("@jbrowse/core/ui");
 const util_1 = require("@jbrowse/core/util");
-const renderAlignment_1 = require("./renderAlignment");
-const renderMismatches_1 = require("./renderMismatches");
-const renderSoftClipping_1 = require("./renderSoftClipping");
+const flatbush_1 = __importDefault(require("@jbrowse/core/util/flatbush"));
+const renderAlignment_1 = require("./renderers/renderAlignment");
+const renderMismatches_1 = require("./renderers/renderMismatches");
+const renderSoftClipping_1 = require("./renderers/renderSoftClipping");
 const util_2 = require("./util");
 function makeImageData({ ctx, layoutRecords, canvasWidth, renderArgs, }) {
     const { stopToken, config, showSoftClip, colorBy, theme: configTheme, } = renderArgs;
@@ -22,8 +26,10 @@ function makeImageData({ ctx, layoutRecords, canvasWidth, renderArgs, }) {
     const { charWidth, charHeight } = (0, util_2.getCharWidthHeight)();
     const drawSNPsMuted = (0, util_2.shouldDrawSNPsMuted)(colorBy === null || colorBy === void 0 ? void 0 : colorBy.type);
     const drawIndels = (0, util_2.shouldDrawIndels)();
+    const coords = [];
+    const items = [];
     (0, util_1.forEachWithStopTokenCheck)(layoutRecords, stopToken, feat => {
-        (0, renderAlignment_1.renderAlignment)({
+        const alignmentRet = (0, renderAlignment_1.renderAlignment)({
             ctx,
             feat,
             renderArgs,
@@ -34,7 +40,13 @@ function makeImageData({ ctx, layoutRecords, canvasWidth, renderArgs, }) {
             charHeight,
             canvasWidth,
         });
-        (0, renderMismatches_1.renderMismatches)({
+        for (let i = 0, l = alignmentRet.coords.length; i < l; i++) {
+            coords.push(alignmentRet.coords[i]);
+        }
+        for (let i = 0, l = alignmentRet.items.length; i < l; i++) {
+            items.push(alignmentRet.items[i]);
+        }
+        const ret = (0, renderMismatches_1.renderMismatches)({
             ctx,
             feat,
             renderArgs,
@@ -50,6 +62,12 @@ function makeImageData({ ctx, layoutRecords, canvasWidth, renderArgs, }) {
             colorContrastMap,
             canvasWidth,
         });
+        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]);
+        }
         if (showSoftClip) {
             (0, renderSoftClipping_1.renderSoftClipping)({
                 ctx,
@@ -62,5 +80,18 @@ function makeImageData({ ctx, layoutRecords, canvasWidth, renderArgs, }) {
             });
         }
     });
-    return undefined;
+    const flatbush = new flatbush_1.default(Math.max(items.length, 1));
+    if (coords.length) {
+        for (let i = 0; i < coords.length; i += 4) {
+            flatbush.add(coords[i], coords[i + 1], coords[i + 2], coords[i + 3]);
+        }
+    }
+    else {
+        flatbush.add(0, 0);
+    }
+    flatbush.finish();
+    return {
+        flatbush: flatbush.data,
+        items,
+    };
 }