@jbrowse/plugin-alignments 3.7.0 → 4.0.1

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,14 +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;
-            base: string;
-            strand: string;
-        }>;
-        simplexModifications?: Set<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,28 +1,30 @@
 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 { getModificationName } from '../../shared/modificationData';
+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',
     },
-    table: {
-        width: '100%',
-        tableLayout: 'auto',
-    },
 }));
-const toP = (s = 0) => +s.toFixed(1);
-const pct = (n, total = 1) => `${toP((n / (total || 1)) * 100)}%`;
+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) {
-    var _a;
     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;
+    return model.visibleModifications.get(base.replace(/^mod_/, ''))?.color;
 }
 function isModification(base) {
     return base.startsWith('mod_') || base.startsWith('nonmod_');
@@ -30,41 +32,16 @@ function isModification(base) {
 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 = 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}`;
+    if (base.startsWith('nonmod_')) {
+        return `Unmodified ${base.replace('nonmod_', '')}`;
     }
     const modType = getModificationType(base);
     const mod = model.visibleModifications.get(modType);
-    if (!mod) {
-        return base.toUpperCase();
-    }
-    const modName = getModificationName(modType);
-    return modName;
+    return mod ? getModificationName(modType) : base.toUpperCase();
 }
 function ColorSquare({ base, model }) {
     const color = getModificationColor(base, model);
@@ -74,16 +51,16 @@ function ColorSquare({ base, model }) {
     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: "Count" }), _jsx("th", { children: "% of Reads" }), _jsx("th", { children: "Strands" }), _jsx("th", { children: "Avg Prob" })] }) }));
+    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", { children: " " }), _jsx("td", { children: " " }), _jsx("td", { children: " " })] }));
+    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", { children: " " })] }));
+    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: getDuplexModificationLabel(base, model) }), _jsx("td", { className: tdClass, children: score.entryDepth }), _jsx("td", { children: shouldShowPercentage(base)
+    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));
 }
@@ -100,7 +77,7 @@ function ModificationRows({ info, readsCounted, model, tdClass, }) {
             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 genomicBase = mod?.base || 'X';
                 const consolidatedKey = `${key}_nonmod_${genomicBase}`;
                 if (!consolidatedEntries[consolidatedKey]) {
                     consolidatedEntries[consolidatedKey] = {
@@ -139,10 +116,9 @@ function ModificationRows({ info, readsCounted, model, tdClass, }) {
         }
     }
     return (_jsx(_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 isSimplex = !isNonmod && isMod && model.simplexModifications?.has(modType);
             const posStrandCount = score['1'] || 0;
             const negStrandCount = score['-1'] || 0;
             if (isNonmod) {
@@ -156,20 +132,71 @@ function ModificationRows({ info, readsCounted, model, tdClass, }) {
             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: referenceBase, readsCounted, depth, ref: reference, ...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(TableHeader, {}), _jsxs("tbody", { children: [_jsx(TotalRow, { readsCounted: readsCounted }), _jsx(RefRow, { referenceBase: referenceBase, reference: reference, readsCounted: readsCounted }), _jsx(ModificationRows, { info: info, readsCounted: readsCounted, model: model, tdClass: classes.td })] })] }) }));
+    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] }));
+}

package/esm/LinearSNPCoverageDisplay/configSchema.d.ts

@@ -1,9 +1,9 @@
 import type PluginManager from '@jbrowse/core/PluginManager';
-export default function SNPCoverageConfigFactory(pluginManager: PluginManager): import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
+export default function SNPCoverageConfigFactory(pluginManager: PluginManager): import("node_modules/@jbrowse/core/src/configuration/configurationSchema.ts").ConfigurationSchemaType<{
     autoscale: {
         type: string;
         defaultValue: string;
-        model: import("mobx-state-tree").ISimpleType<string>;
+        model: import("@jbrowse/mobx-state-tree").ISimpleType<string>;
         description: string;
     };
     minScore: {
@@ -18,7 +18,7 @@ export default function SNPCoverageConfigFactory(pluginManager: PluginManager):
     };
     scaleType: {
         type: string;
-        model: import("mobx-state-tree").ISimpleType<string>;
+        model: import("@jbrowse/mobx-state-tree").ISimpleType<string>;
         description: string;
         defaultValue: string;
     };
@@ -32,9 +32,9 @@ export default function SNPCoverageConfigFactory(pluginManager: PluginManager):
         description: string;
         defaultValue: boolean;
     };
-    renderers: import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
+    renderers: import("node_modules/@jbrowse/core/src/configuration/configurationSchema.ts").ConfigurationSchemaType<{
         SNPCoverageRenderer: import("@jbrowse/core/configuration").AnyConfigurationSchemaType;
-    }, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, undefined>>;
+    }, import("node_modules/@jbrowse/core/src/configuration/configurationSchema.ts").ConfigurationSchemaOptions<undefined, undefined>>;
     colorBy: {
         type: string;
         description: string;
@@ -50,7 +50,7 @@ export default function SNPCoverageConfigFactory(pluginManager: PluginManager):
             flagExclude: number;
         };
     };
-}, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
+}, import("node_modules/@jbrowse/core/src/configuration/configurationSchema.ts").ConfigurationSchemaOptions<import("node_modules/@jbrowse/core/src/configuration/configurationSchema.ts").ConfigurationSchemaType<{
     maxFeatureScreenDensity: {
         type: string;
         description: string;
@@ -77,4 +77,4 @@ export default function SNPCoverageConfigFactory(pluginManager: PluginManager):
         description: string;
         defaultValue: never[];
     };
-}, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, "displayId">>, undefined>>;
+}, import("node_modules/@jbrowse/core/src/configuration/configurationSchema.ts").ConfigurationSchemaOptions<undefined, "displayId">>, undefined>>;

package/esm/LinearSNPCoverageDisplay/configSchema.js

@@ -1,7 +1,7 @@
 import { ConfigurationSchema } from '@jbrowse/core/configuration';
+import { types } from '@jbrowse/mobx-state-tree';
 import { baseLinearDisplayConfigSchema } from '@jbrowse/plugin-linear-genome-view';
-import { types } from 'mobx-state-tree';
-import { defaultFilterFlags } from '../shared/util';
+import { defaultFilterFlags } from "../shared/util.js";
 function x() { }
 export default function SNPCoverageConfigFactory(pluginManager) {
     return ConfigurationSchema('LinearSNPCoverageDisplay', {

package/esm/LinearSNPCoverageDisplay/index.js

@@ -1,18 +1,19 @@
+import { lazy } from 'react';
 import DisplayType from '@jbrowse/core/pluggableElementTypes/DisplayType';
-import { LinearWiggleDisplayReactComponent } from '@jbrowse/plugin-wiggle';
-import configSchemaFactory from './configSchema';
-import modelFactory from './model';
+import configSchemaFactory from "./configSchema.js";
+import modelFactory from "./model.js";
 export default function register(pluginManager) {
     pluginManager.addDisplayType(() => {
         const configSchema = configSchemaFactory(pluginManager);
         return new DisplayType({
             name: 'LinearSNPCoverageDisplay',
             displayName: 'SNPCoverage display',
+            helpText: 'Display coverage histogram and SNP composition for each genomic position',
             configSchema,
             stateModel: modelFactory(pluginManager, configSchema),
             trackType: 'AlignmentsTrack',
             viewType: 'LinearGenomeView',
-            ReactComponent: LinearWiggleDisplayReactComponent,
+            ReactComponent: lazy(() => import("./components/SNPCoverageDisplayComponent.js")),
         });
     });
 }