@jbrowse/plugin-alignments 3.6.5 → 4.0.0

package/esm/LinearSNPCoverageDisplay/components/SashimiArcs.js

@@ -0,0 +1,169 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from 'react';
+import BaseTooltip from '@jbrowse/core/ui/BaseTooltip';
+import { getContainingTrack, getContainingView, getSession, isSessionModelWithWidgets, notEmpty, } from '@jbrowse/core/util';
+import { observer } from 'mobx-react';
+import ArcTooltipContents from "./ArcTooltipContents.js";
+import { featureToArcData, getArcSelectedColor } from "./arcUtils.js";
+const YSCALEBAR_LABEL_OFFSET = 5;
+const SVGNS = 'http://www.w3.org/2000/svg';
+const SashimiArcs = observer(function SashimiArcs({ model, }) {
+    const { showArcsSetting, height, skipFeatures } = model;
+    const view = getContainingView(model);
+    const { assemblyManager } = getSession(model);
+    const [hoverInfo, setHoverInfo] = useState(null);
+    const [selectedArcId, setSelectedArcId] = useState(null);
+    const svgRef = useRef(null);
+    const arcMapRef = useRef(new Map());
+    const pathMapRef = useRef(new Map());
+    const selectedArcIdRef = useRef(null);
+    selectedArcIdRef.current = selectedArcId;
+    const width = Math.round(view.dynamicBlocks.totalWidthPx);
+    const effectiveHeight = height - YSCALEBAR_LABEL_OFFSET * 2;
+    const { arcs, drawnAtBpPerPx, drawnAtOffsetPx } = useMemo(() => {
+        const currentOffsetPx = view.offsetPx;
+        const assembly = assemblyManager.get(view.assemblyNames[0]);
+        return {
+            arcs: assembly
+                ? skipFeatures
+                    .map(f => featureToArcData(f, view, effectiveHeight, currentOffsetPx, assembly))
+                    .filter(notEmpty)
+                : [],
+            drawnAtBpPerPx: view.bpPerPx,
+            drawnAtOffsetPx: currentOffsetPx,
+        };
+    }, [skipFeatures, view.bpPerPx, effectiveHeight]);
+    useEffect(() => {
+        const svg = svgRef.current;
+        if (!svg) {
+            return;
+        }
+        while (svg.firstChild) {
+            svg.firstChild.remove();
+        }
+        const arcMap = new Map();
+        const pathMap = new Map();
+        const handleMouseEnter = (event) => {
+            const target = event.currentTarget;
+            const id = target.dataset.id;
+            if (id) {
+                const arc = arcMap.get(id);
+                if (arc) {
+                    setHoverInfo({ arc, x: event.clientX, y: event.clientY });
+                    const isSelected = id === selectedArcIdRef.current;
+                    target.setAttribute('opacity', '1');
+                    target.setAttribute('stroke-width', String(arc.strokeWidth + (isSelected ? 4 : 2)));
+                }
+            }
+        };
+        const handleMouseLeave = (event) => {
+            const target = event.currentTarget;
+            const id = target.dataset.id;
+            if (id) {
+                const arc = arcMap.get(id);
+                if (arc) {
+                    const isSelected = id === selectedArcIdRef.current;
+                    target.setAttribute('opacity', '0.7');
+                    if (isSelected) {
+                        target.setAttribute('stroke', getArcSelectedColor(arc.strand));
+                        target.setAttribute('stroke-width', String(arc.strokeWidth + 3));
+                    }
+                    else {
+                        target.setAttribute('stroke', arc.stroke);
+                        target.setAttribute('stroke-width', String(arc.strokeWidth));
+                    }
+                }
+            }
+            setHoverInfo(null);
+        };
+        const handleClick = (event) => {
+            const target = event.currentTarget;
+            const id = target.dataset.id;
+            if (id) {
+                setSelectedArcId(prev => (prev === id ? null : id));
+                const arc = arcMap.get(id);
+                if (arc) {
+                    const session = getSession(model);
+                    if (isSessionModelWithWidgets(session)) {
+                        const featureWidget = session.addWidget('BaseFeatureWidget', 'baseFeature', {
+                            featureData: {
+                                uniqueId: arc.id,
+                                refName: arc.refName,
+                                start: arc.start,
+                                end: arc.end,
+                                type: 'junction',
+                                strand: arc.strand,
+                                score: arc.score,
+                                length: arc.end - arc.start,
+                            },
+                            view: getContainingView(model),
+                            track: getContainingTrack(model),
+                        });
+                        session.showWidget(featureWidget);
+                    }
+                }
+            }
+        };
+        const sortedArcs = [...arcs].sort((a, b) => a.score - b.score);
+        for (const arc of sortedArcs) {
+            arcMap.set(arc.id, arc);
+            const path = document.createElementNS(SVGNS, 'path');
+            path.setAttribute('d', arc.path);
+            path.setAttribute('stroke', arc.stroke);
+            path.setAttribute('stroke-width', String(arc.strokeWidth));
+            path.setAttribute('fill', 'none');
+            path.setAttribute('opacity', '0.7');
+            path.setAttribute('pointer-events', 'stroke');
+            path.setAttribute('cursor', 'pointer');
+            path.dataset.id = arc.id;
+            path.addEventListener('mouseenter', handleMouseEnter);
+            path.addEventListener('mouseleave', handleMouseLeave);
+            path.addEventListener('click', handleClick);
+            pathMap.set(arc.id, path);
+            svg.append(path);
+        }
+        arcMapRef.current = arcMap;
+        pathMapRef.current = pathMap;
+        return () => {
+            while (svg.firstChild) {
+                const child = svg.firstChild;
+                child.removeEventListener('mouseenter', handleMouseEnter);
+                child.removeEventListener('mouseleave', handleMouseLeave);
+                child.removeEventListener('click', handleClick);
+                child.remove();
+            }
+        };
+    }, [arcs, model]);
+    useEffect(() => {
+        const pathMap = pathMapRef.current;
+        const arcMap = arcMapRef.current;
+        for (const [id, path] of pathMap) {
+            const arc = arcMap.get(id);
+            if (arc) {
+                if (id === selectedArcId) {
+                    path.setAttribute('stroke', getArcSelectedColor(arc.strand));
+                    path.setAttribute('stroke-width', String(arc.strokeWidth + 3));
+                }
+                else {
+                    path.setAttribute('stroke', arc.stroke);
+                    path.setAttribute('stroke-width', String(arc.strokeWidth));
+                }
+            }
+        }
+    }, [selectedArcId]);
+    if (!showArcsSetting ||
+        !view.initialized ||
+        drawnAtBpPerPx !== view.bpPerPx) {
+        return null;
+    }
+    const left = drawnAtOffsetPx - view.offsetPx;
+    return (_jsxs(_Fragment, { children: [_jsx("svg", { ref: svgRef, style: {
+                    position: 'absolute',
+                    top: YSCALEBAR_LABEL_OFFSET,
+                    left,
+                    pointerEvents: 'none',
+                    height: effectiveHeight,
+                    width,
+                } }), hoverInfo ? (_jsx(BaseTooltip, { clientPoint: { x: hoverInfo.x + 5, y: hoverInfo.y }, children: _jsx(ArcTooltipContents, { arc: hoverInfo.arc }) })) : null] }));
+});
+export default SashimiArcs;

package/esm/LinearSNPCoverageDisplay/components/Tooltip.d.ts

@@ -1,12 +1,18 @@
 import type { Feature } from '@jbrowse/core/util';
-type Coord = [number, number];
 declare const SNPCoverageTooltip: (props: {
     model: {
         featureUnderMouse?: Feature;
+        mouseoverExtraInformation?: string;
+        visibleModifications: Map<string, {
+            color: string;
+            base: string;
+            strand: string;
+        }>;
+        simplexModifications?: Set<string>;
     };
     height: number;
-    offsetMouseCoord: Coord;
-    clientMouseCoord: Coord;
+    offsetMouseCoord: [number, number];
+    clientMouseCoord: [number, number];
     clientRect?: DOMRect;
 }) => import("react/jsx-runtime").JSX.Element | null;
 export default SNPCoverageTooltip;

package/esm/LinearSNPCoverageDisplay/components/Tooltip.js

@@ -1,10 +1,34 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Tooltip } from '@jbrowse/plugin-wiggle';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import BaseTooltip from '@jbrowse/core/ui/BaseTooltip';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
+import { Tooltip, YSCALEBAR_LABEL_OFFSET } from '@jbrowse/plugin-wiggle';
 import { observer } from 'mobx-react';
-import TooltipContents from './TooltipContents';
-const SNPCoverageTooltip = observer(function (props) {
-    const { model } = props;
-    const { featureUnderMouse: feat } = model;
-    return feat && feat.get('type') === 'skip' ? null : (_jsx(Tooltip, { TooltipContents: TooltipContents, ...props }));
+import TooltipContents from "./TooltipContents.js";
+const useStyles = makeStyles()(theme => ({
+    hoverVertical: {
+        background: theme.palette.text.primary,
+        border: 'none',
+        width: 1,
+        height: '100%',
+        top: YSCALEBAR_LABEL_OFFSET,
+        cursor: 'default',
+        position: 'absolute',
+        pointerEvents: 'none',
+    },
+}));
+const SNPCoverageTooltip = observer(function SNPCoverageTooltip(props) {
+    const { model, height, clientMouseCoord, offsetMouseCoord } = props;
+    const { featureUnderMouse: feat, mouseoverExtraInformation } = model;
+    const { classes } = useStyles();
+    if (mouseoverExtraInformation && !feat) {
+        const x = clientMouseCoord[0] + 5;
+        const y = clientMouseCoord[1];
+        const { item, refName } = JSON.parse(mouseoverExtraInformation);
+        return (_jsxs(_Fragment, { children: [_jsx(BaseTooltip, { clientPoint: { x, y }, children: _jsx(TooltipContents, { item: item, refName: refName, model: model }) }), _jsx("div", { className: classes.hoverVertical, style: {
+                        left: offsetMouseCoord[0],
+                        height: height - YSCALEBAR_LABEL_OFFSET * 2,
+                    } })] }));
+    }
+    return feat?.get('type') === 'skip' ? null : (_jsx(Tooltip, { TooltipContents: TooltipContents, ...props }));
 });
 export default SNPCoverageTooltip;

package/esm/LinearSNPCoverageDisplay/components/TooltipContents.d.ts

@@ -1,11 +1,18 @@
+import type { ClickMapItem } from '../../SNPCoverageRenderer/types.ts';
 import type { Feature } from '@jbrowse/core/util';
+interface Model {
+    visibleModifications: Map<string, {
+        color: string;
+        base: string;
+        strand: string;
+    }>;
+    simplexModifications?: Set<string>;
+}
 interface Props {
-    feature: Feature;
-    model: {
-        visibleModifications: Map<string, {
-            color: string;
-        }>;
-    };
+    feature?: Feature;
+    item?: ClickMapItem;
+    refName?: string;
+    model: Model;
 }
 declare const TooltipContents: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLDivElement>>;
 export default TooltipContents;

package/esm/LinearSNPCoverageDisplay/components/TooltipContents.js

@@ -1,46 +1,202 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { forwardRef } from 'react';
-import { toLocale } from '@jbrowse/core/util';
-import { makeStyles } from 'tss-react/mui';
+import { reducePrecision, toLocale } from '@jbrowse/core/util';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
+import { getInterbaseTypeLabel } from "../../SNPCoverageRenderer/types.js";
+import { getModificationName } from "../../shared/modificationData.js";
 const useStyles = makeStyles()(() => ({
     td: {
         whiteSpace: 'nowrap',
     },
 }));
-const toP = (s = 0) => +(+s).toFixed(1);
-const pct = (n, total = 1) => `${toP((n / (total || 1)) * 100)}%`;
-function ColorSquare({ base, model, }) {
-    var _a;
-    const { visibleModifications } = model;
-    return base.startsWith('mod_') ? (_jsx("div", { style: {
-            width: 10,
-            height: 10,
-            background: (_a = visibleModifications.get(base.replace('mod_', ''))) === null || _a === void 0 ? void 0 : _a.color,
-        } })) : null;
+function pct(n, total = 1) {
+    return `${((n / (total || 1)) * 100).toFixed(1)}%`;
+}
+function formatStrandCounts(entry) {
+    const neg = entry['-1'] ? `${entry['-1']}(-)` : '';
+    const pos = entry['1'] ? `${entry['1']}(+)` : '';
+    return neg + pos || '-';
+}
+function getModificationColor(base, model) {
+    if (!base.startsWith('mod_') && !base.startsWith('nonmod_')) {
+        return undefined;
+    }
+    if (base.startsWith('nonmod_')) {
+        return 'blue';
+    }
+    return model.visibleModifications.get(base.replace(/^mod_/, ''))?.color;
+}
+function isModification(base) {
+    return base.startsWith('mod_') || base.startsWith('nonmod_');
+}
+function getModificationType(base) {
+    return base.replace(/^(mod_|nonmod_)/, '');
+}
+function shouldShowPercentage(base) {
+    return base !== 'depth' && base !== 'skip';
+}
+function getModificationLabel(base, model) {
+    if (base.startsWith('nonmod_')) {
+        return `Unmodified ${base.replace('nonmod_', '')}`;
+    }
+    const modType = getModificationType(base);
+    const mod = model.visibleModifications.get(modType);
+    return mod ? getModificationName(modType) : base.toUpperCase();
+}
+function ColorSquare({ base, model }) {
+    const color = getModificationColor(base, model);
+    if (!color) {
+        return null;
+    }
+    return _jsx("div", { style: { width: 10, height: 10, background: color } });
+}
+function TableHeader() {
+    return (_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", {}), _jsx("th", { children: "Base" }), _jsx("th", { children: "# of Reads" }), _jsx("th", { children: "% of Reads" }), _jsx("th", { children: "Strands" }), _jsx("th", { children: "Avg Prob" })] }) }));
+}
+function TotalRow({ readsCounted }) {
+    return (_jsxs("tr", { children: [_jsx("td", {}), _jsx("td", { children: "Total" }), _jsx("td", { children: readsCounted }), _jsx("td", {}), _jsx("td", {}), _jsx("td", {})] }));
+}
+function RefRow({ referenceBase, reference, readsCounted, }) {
+    return (_jsxs("tr", { children: [_jsx("td", {}), _jsxs("td", { children: ["REF ", referenceBase ? `(${referenceBase.toUpperCase()})` : ''] }), _jsx("td", { children: reference.entryDepth }), _jsx("td", { children: pct(reference.entryDepth, readsCounted) }), _jsx("td", { children: formatStrandCounts(reference) }), _jsx("td", {})] }));
+}
+function DuplexModificationRow({ base, score, readsCounted, model, tdClass, rowKey, }) {
+    return (_jsxs("tr", { children: [_jsx("td", { children: _jsx(ColorSquare, { model: model, base: base }) }), _jsx("td", { children: getModificationLabel(base, model) }), _jsx("td", { className: tdClass, children: score.entryDepth }), _jsx("td", { children: shouldShowPercentage(base)
+                    ? pct(score.entryDepth, readsCounted)
+                    : '---' }), _jsx("td", { children: formatStrandCounts(score) }), _jsx("td", { children: score.avgProbability !== undefined ? pct(score.avgProbability) : '' })] }, rowKey));
+}
+function SimplexOrRegularRow({ base, score, isMod, readsCounted, model, tdClass, rowKey, }) {
+    return (_jsxs("tr", { children: [_jsx("td", { children: _jsx(ColorSquare, { model: model, base: base }) }), _jsx("td", { children: isMod ? getModificationLabel(base, model) : base.toUpperCase() }), _jsx("td", { className: tdClass, children: score.entryDepth }), _jsx("td", { children: shouldShowPercentage(base)
+                    ? pct(score.entryDepth, readsCounted)
+                    : '---' }), _jsx("td", { children: formatStrandCounts(score) }), _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?.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 (_jsx(_Fragment, { children: Object.entries(consolidatedEntries).map(([rowKey, { base, score, isNonmod }]) => {
+            const modType = getModificationType(base);
+            const isMod = isModification(base) || isNonmod;
+            const isSimplex = !isNonmod && isMod && model.simplexModifications?.has(modType);
+            const posStrandCount = score['1'] || 0;
+            const negStrandCount = score['-1'] || 0;
+            if (isNonmod) {
+                return (_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 (_jsx(DuplexModificationRow, { base: base, score: score, posStrandCount: posStrandCount, negStrandCount: negStrandCount, readsCounted: readsCounted, model: model, tdClass: tdClass, rowKey: rowKey }, rowKey));
+            }
+            return (_jsx(SimplexOrRegularRow, { base: base, score: score, isMod: isMod, isSimplex: isSimplex, readsCounted: readsCounted, model: model, tdClass: tdClass, rowKey: rowKey }, rowKey));
+        }) }));
+}
+function formatLocation(refName, start, end) {
+    if (start === undefined) {
+        return refName || '';
+    }
+    const pos = end === undefined || start === end - 1
+        ? toLocale(start + 1)
+        : `${toLocale(start + 1)}..${toLocale(end)}`;
+    return refName ? `${refName}:${pos}` : pos;
+}
+function BinTooltip({ bin, location, model, tdClass, reactRef, }) {
+    const { refbase, readsCounted, ref, snps, mods, nonmods, delskips, noncov } = bin;
+    return (_jsx("div", { ref: reactRef, children: _jsxs("table", { children: [_jsx("caption", { children: location }), _jsx(TableHeader, {}), _jsxs("tbody", { children: [_jsx(TotalRow, { readsCounted: readsCounted }), _jsx(RefRow, { referenceBase: refbase, reference: ref, readsCounted: readsCounted }), _jsx(ModificationRows, { info: { snps, mods, nonmods, delskips, noncov }, readsCounted: readsCounted, model: model, tdClass: tdClass })] })] }) }));
+}
+function SimpleSNPTooltip({ item, location, tdClass, reactRef, }) {
+    const { base, count, total, refbase, avgQual, fwdCount, revCount } = item;
+    const mutation = refbase ? `${refbase}→${base}` : base;
+    return (_jsx("div", { ref: reactRef, children: _jsxs("table", { children: [_jsx("caption", { children: location }), _jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { children: "Base" }), _jsx("th", { children: "Count" }), _jsx("th", { children: "% of Reads" }), _jsx("th", { children: "Strands" }), _jsx("th", { children: "Qual" })] }) }), _jsx("tbody", { children: _jsxs("tr", { children: [_jsx("td", { children: mutation.toUpperCase() }), _jsx("td", { className: tdClass, children: count }), _jsx("td", { children: pct(count, total) }), _jsx("td", { children: `${fwdCount}(+) ${revCount}(-)` }), _jsx("td", { children: avgQual !== undefined ? reducePrecision(avgQual) : '' })] }) })] }) }));
+}
+function ModificationTooltip({ item, location, model, tdClass, reactRef, }) {
+    const { modType, base, count, total, avgProb, fwdCount, revCount, isUnmodified, } = item;
+    const color = isUnmodified
+        ? 'blue'
+        : model.visibleModifications.get(modType)?.color;
+    const label = isUnmodified
+        ? `Unmodified ${base}`
+        : getModificationName(modType) || `${modType} (${base})`;
+    return (_jsx("div", { ref: reactRef, children: _jsxs("table", { children: [_jsx("caption", { children: location }), _jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", {}), _jsx("th", { children: "Modification" }), _jsx("th", { children: "Count" }), _jsx("th", { children: "% of Reads" }), _jsx("th", { children: "Strands" }), _jsx("th", { children: "Avg Prob" })] }) }), _jsx("tbody", { children: _jsxs("tr", { children: [_jsx("td", { children: color ? (_jsx("div", { style: { width: 10, height: 10, background: color } })) : null }), _jsx("td", { children: label }), _jsx("td", { className: tdClass, children: count }), _jsx("td", { children: pct(count, total) }), _jsx("td", { children: `${fwdCount}(+) ${revCount}(-)` }), _jsx("td", { children: avgProb !== undefined ? `${(avgProb * 100).toFixed(1)}%` : '' })] }) })] }) }));
+}
+function InterbaseTooltip({ item, location, tdClass, reactRef, }) {
+    const { type, count, total, avgLength, minLength, maxLength, topSequence } = item;
+    const sizeStr = minLength !== undefined && maxLength !== undefined
+        ? minLength === maxLength
+            ? `${minLength}bp`
+            : `${minLength}-${maxLength}bp (avg ${avgLength?.toFixed(1)}bp)`
+        : avgLength !== undefined
+            ? `avg ${avgLength.toFixed(1)}bp`
+            : '';
+    return (_jsx("div", { ref: reactRef, children: _jsxs("table", { children: [_jsx("caption", { children: location }), _jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { children: "Type" }), _jsx("th", { children: "Count" }), _jsx("th", { children: "% of Reads" }), _jsx("th", { children: "Size" })] }) }), _jsxs("tbody", { children: [_jsxs("tr", { children: [_jsx("td", { children: getInterbaseTypeLabel(type) }), _jsx("td", { className: tdClass, children: count }), _jsx("td", { children: pct(count, total) }), _jsx("td", { children: sizeStr })] }), topSequence ? (_jsx("tr", { children: _jsxs("td", { colSpan: 4, children: ["Most common sequence:", ' ', topSequence.length > 20
+                                        ? `${topSequence.slice(0, 20)}...`
+                                        : topSequence] }) })) : null] })] }) }));
 }
 const TooltipContents = forwardRef(function TooltipContents2(props, reactRef) {
-    const { feature, model } = props;
+    const { feature, item, refName, model } = props;
     const { classes } = useStyles();
-    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');
-    return (_jsx("div", { ref: reactRef, children: _jsxs("table", { children: [_jsx("caption", { children: [
-                        name,
-                        start === end
-                            ? toLocale(start)
-                            : `${toLocale(start)}..${toLocale(end)}`,
-                    ]
-                        .filter(f => !!f)
-                        .join(':') }), _jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", {}), _jsx("th", { children: "Base" }), _jsx("th", { children: "Count" }), _jsx("th", { children: "% of Total" }), _jsx("th", { children: "Strands" })] }) }), _jsxs("tbody", { children: [_jsxs("tr", { children: [_jsx("td", {}), _jsx("td", { children: "Total" }), _jsx("td", { children: readsCounted }), _jsx("td", { children: " " }), _jsx("td", { children: " " })] }), _jsxs("tr", { children: [_jsx("td", {}), _jsxs("td", { children: ["REF ", refbase ? `(${refbase.toUpperCase()})` : ''] }), _jsx("td", { children: ref.entryDepth }), _jsx("td", { children: pct(ref.entryDepth, readsCounted) }), _jsxs("td", { children: [ref['-1'] ? `${ref['-1']}(-)` : '', ref['1'] ? `${ref['1']}(+)` : ''] })] }), Object.entries(info).map(([key, entry]) => Object.entries(entry).map(([base, score]) => (_jsxs("tr", { children: [_jsx("td", { children: _jsx(ColorSquare, { model: model, base: base }) }), _jsxs("td", { children: [base.toUpperCase(), " "] }), _jsx("td", { className: classes.td, children: [
-                                        score.entryDepth,
-                                        score.avgProbability !== undefined
-                                            ? `(avg. ${pct(score.avgProbability)} prob.)`
-                                            : '',
-                                    ]
-                                        .filter(f => !!f)
-                                        .join(' ') }), _jsx("td", { children: base === 'depth' || base === 'skip'
-                                        ? '---'
-                                        : pct(score.entryDepth, readsCounted) }), _jsxs("td", { children: [score['-1'] ? `${score['-1']}(-)` : '', score['1'] ? `${score['1']}(+)` : ''] })] }, `${key}_${base}`))))] })] }) }));
+    if (item) {
+        const location = formatLocation(refName, item.start, 'end' in item ? item.end : undefined);
+        if (item.type === 'snp' && item.bin) {
+            return (_jsx(BinTooltip, { bin: item.bin, location: location, model: model, tdClass: classes.td, reactRef: reactRef }));
+        }
+        if (item.type === 'snp') {
+            return (_jsx(SimpleSNPTooltip, { item: item, location: location, tdClass: classes.td, reactRef: reactRef }));
+        }
+        if (item.type === 'modification') {
+            return (_jsx(ModificationTooltip, { item: item, location: location, model: model, tdClass: classes.td, reactRef: reactRef }));
+        }
+        return (_jsx(InterbaseTooltip, { item: item, location: location, tdClass: classes.td, reactRef: reactRef }));
+    }
+    if (feature) {
+        const start = feature.get('start');
+        const end = feature.get('end');
+        const name = feature.get('refName');
+        const snpinfo = feature.get('snpinfo');
+        const location = formatLocation(name, start, end);
+        return (_jsx(BinTooltip, { bin: snpinfo, location: location, model: model, tdClass: classes.td, reactRef: reactRef }));
+    }
+    return null;
 });
 export default TooltipContents;

package/esm/LinearSNPCoverageDisplay/components/arcUtils.d.ts

@@ -0,0 +1,18 @@
+import type { Assembly } from '@jbrowse/core/assemblyManager/assembly';
+import type { Feature } from '@jbrowse/core/util';
+import type { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view';
+export interface ArcData {
+    id: string;
+    path: string;
+    stroke: string;
+    strokeWidth: number;
+    start: number;
+    end: number;
+    refName: string;
+    score: number;
+    strand: number;
+}
+export declare function getArcColor(strand: number): "rgba(255,170,170,0.7)" | "rgba(160,160,255,0.7)" | "rgba(200,200,200,0.7)";
+export declare function getArcSelectedColor(strand: number): "rgba(255,100,100,1)" | "rgba(100,100,255,1)" | "rgba(120,120,120,1)";
+export declare function getStrandLabel(strand: number): "-" | "+" | "unknown";
+export declare function featureToArcData(feature: Feature, view: LinearGenomeViewModel, effectiveHeight: number, offsetPx: number, assembly: Assembly): ArcData | undefined;

package/esm/LinearSNPCoverageDisplay/components/arcUtils.js

@@ -0,0 +1,42 @@
+export function getArcColor(strand) {
+    return strand === 1
+        ? 'rgba(255,170,170,0.7)'
+        : strand === -1
+            ? 'rgba(160,160,255,0.7)'
+            : 'rgba(200,200,200,0.7)';
+}
+export function getArcSelectedColor(strand) {
+    return strand === 1
+        ? 'rgba(255,100,100,1)'
+        : strand === -1
+            ? 'rgba(100,100,255,1)'
+            : 'rgba(120,120,120,1)';
+}
+export function getStrandLabel(strand) {
+    return strand === 1 ? '+' : strand === -1 ? '-' : 'unknown';
+}
+export function featureToArcData(feature, view, effectiveHeight, offsetPx, assembly) {
+    const start = feature.get('start');
+    const end = feature.get('end');
+    const refName = assembly.getCanonicalRefName2(feature.get('refName'));
+    const startPx = view.bpToPx({ refName, coord: start });
+    const endPx = view.bpToPx({ refName, coord: end });
+    if (startPx === undefined || endPx === undefined) {
+        return undefined;
+    }
+    const left = startPx.offsetPx - offsetPx;
+    const right = endPx.offsetPx - offsetPx;
+    const strand = feature.get('effectiveStrand') ?? 0;
+    const score = feature.get('score') ?? 1;
+    return {
+        id: feature.id(),
+        path: `M ${left} ${effectiveHeight * 0.9} C ${left} ${effectiveHeight * 0.1}, ${right} ${effectiveHeight * 0.1}, ${right} ${effectiveHeight * 0.9}`,
+        stroke: getArcColor(strand),
+        strokeWidth: Math.log(score + 1),
+        start,
+        end,
+        refName,
+        score,
+        strand,
+    };
+}

package/esm/LinearSNPCoverageDisplay/components/renderSvg.d.ts

@@ -0,0 +1,10 @@
+import type { Feature } from '@jbrowse/core/util';
+import type { ExportSvgDisplayOptions } from '@jbrowse/plugin-linear-genome-view';
+interface SNPCoverageDisplayModel {
+    id: string;
+    skipFeatures: Feature[];
+    height: number;
+    showArcsSetting: boolean;
+}
+export declare function renderSNPCoverageSvg(self: SNPCoverageDisplayModel, opts: ExportSvgDisplayOptions, superRenderSvg: (opts: ExportSvgDisplayOptions) => Promise<React.ReactNode>): Promise<import("react/jsx-runtime").JSX.Element>;
+export {};

package/esm/LinearSNPCoverageDisplay/components/renderSvg.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { getContainingView, getSession } from '@jbrowse/core/util';
+import { featureToArcData } from "./arcUtils.js";
+const YSCALEBAR_LABEL_OFFSET = 5;
+function renderSashimiArcsSvg(self, view) {
+    const { id, skipFeatures, height, showArcsSetting } = self;
+    if (!showArcsSetting || skipFeatures.length === 0) {
+        return null;
+    }
+    const { assemblyManager } = getSession(self);
+    const assembly = assemblyManager.get(view.assemblyNames[0]);
+    if (!assembly) {
+        return null;
+    }
+    const effectiveHeight = height - YSCALEBAR_LABEL_OFFSET * 2;
+    const currentOffsetPx = view.offsetPx;
+    const width = view.dynamicBlocks.totalWidthPx;
+    const arcs = skipFeatures
+        .map(f => featureToArcData(f, view, effectiveHeight, currentOffsetPx, assembly))
+        .filter((arc) => arc !== undefined);
+    if (arcs.length === 0) {
+        return null;
+    }
+    const clipId = `sashimi-arcs-clip-${id}`;
+    return (_jsxs(_Fragment, { children: [_jsx("defs", { children: _jsx("clipPath", { id: clipId, children: _jsx("rect", { x: 0, y: 0, width: width, height: height }) }) }), _jsx("g", { clipPath: `url(#${clipId})`, children: _jsx("g", { transform: `translate(0, ${YSCALEBAR_LABEL_OFFSET})`, children: arcs.map(arc => (_jsx("path", { d: arc.path, stroke: arc.stroke, strokeWidth: arc.strokeWidth, fill: "none" }, arc.id))) }) })] }));
+}
+export async function renderSNPCoverageSvg(self, opts, superRenderSvg) {
+    const view = getContainingView(self);
+    const baseRendering = await superRenderSvg(opts);
+    const arcsRendering = renderSashimiArcsSvg(self, view);
+    return (_jsxs(_Fragment, { children: [baseRendering, arcsRendering] }));
+}