@jbrowse/plugin-alignments 2.18.0 → 3.0.1

package/esm/SNPCoverageRenderer/makeImage.js

@@ -0,0 +1,267 @@
+import { readConfObject } from '@jbrowse/core/configuration';
+import { createJBrowseTheme } from '@jbrowse/core/ui';
+import { bpSpanPx, featureSpanPx } from '@jbrowse/core/util';
+import { checkStopToken } from '@jbrowse/core/util/stopToken';
+import { YSCALEBAR_LABEL_OFFSET, getOrigin, getScale, } from '@jbrowse/plugin-wiggle';
+import { alphaColor } from '../shared/util';
+const INTERBASE_INDICATOR_WIDTH = 7;
+const INTERBASE_INDICATOR_HEIGHT = 4.5;
+const MINIMUM_INTERBASE_INDICATOR_READ_DEPTH = 7;
+const complementBase = {
+    C: 'G',
+    G: 'C',
+    A: 'T',
+    T: 'A',
+};
+const fudgeFactor = 0.6;
+export async function makeImage(ctx, props) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    const { features, regions, bpPerPx, colorBy, displayCrossHatches, visibleModifications = {}, scaleOpts, height: unadjustedHeight, theme: configTheme, config: cfg, ticks, stopToken, } = props;
+    const theme = createJBrowseTheme(configTheme);
+    const region = regions[0];
+    const width = (region.end - region.start) / bpPerPx;
+    const offset = YSCALEBAR_LABEL_OFFSET;
+    const height = unadjustedHeight - offset * 2;
+    const opts = { ...scaleOpts, range: [0, height] };
+    const viewScale = getScale(opts);
+    const indicatorViewScale = getScale({
+        ...opts,
+        range: [0, height / 2],
+        scaleType: 'linear',
+    });
+    const originY = getOrigin(scaleOpts.scaleType);
+    const originLinear = getOrigin('linear');
+    const indicatorThreshold = readConfObject(cfg, 'indicatorThreshold');
+    const showInterbaseCounts = readConfObject(cfg, 'showInterbaseCounts');
+    const showArcs = readConfObject(cfg, 'showArcs');
+    const showInterbaseIndicators = readConfObject(cfg, 'showInterbaseIndicators');
+    const toY = (n) => height - (viewScale(n) || 0) + offset;
+    const toHeight = (n) => toY(originY) - toY(n);
+    const toY2 = (n) => height - (indicatorViewScale(n) || 0) + offset;
+    const toHeight2 = (n) => toY2(originLinear) - toY2(n);
+    const { bases } = theme.palette;
+    const colorForBase = {
+        A: bases.A.main,
+        C: bases.C.main,
+        G: bases.G.main,
+        T: bases.T.main,
+        insertion: 'purple',
+        softclip: 'blue',
+        hardclip: 'red',
+        total: readConfObject(cfg, 'color'),
+        mod_NONE: 'blue',
+        cpg_meth: 'red',
+        cpg_unmeth: 'blue',
+    };
+    const feats = [...features.values()];
+    ctx.fillStyle = colorForBase.total;
+    let start = performance.now();
+    for (const feature of feats) {
+        if (feature.get('type') === 'skip') {
+            continue;
+        }
+        const [leftPx, rightPx] = featureSpanPx(feature, region, bpPerPx);
+        const w = rightPx - leftPx + fudgeFactor;
+        const score = feature.get('score');
+        ctx.fillRect(leftPx, toY(score), w, toHeight(score));
+        if (performance.now() - start > 400) {
+            checkStopToken(stopToken);
+            start = performance.now();
+        }
+    }
+    let prevTotal = 0;
+    const extraHorizontallyFlippedOffset = region.reversed ? 1 / bpPerPx : 0;
+    const drawingModifications = colorBy.type === 'modifications';
+    const drawingMethylation = colorBy.type === 'methylation';
+    const isolatedModification = (_a = colorBy.modifications) === null || _a === void 0 ? void 0 : _a.isolatedModification;
+    start = performance.now();
+    for (const feature of feats) {
+        const now = performance.now();
+        if (now - start > 400) {
+            checkStopToken(stopToken);
+        }
+        if (feature.get('type') === 'skip') {
+            continue;
+        }
+        const [leftPx, rightPx] = featureSpanPx(feature, region, bpPerPx);
+        const snpinfo = feature.get('snpinfo');
+        const w = Math.max(rightPx - leftPx, 1);
+        const score0 = feature.get('score');
+        if (drawingModifications) {
+            let curr = 0;
+            const refbase = (_b = snpinfo.refbase) === null || _b === void 0 ? void 0 : _b.toUpperCase();
+            const { nonmods, mods, snps, ref } = snpinfo;
+            for (const m of Object.keys(nonmods).sort().reverse()) {
+                const mod = visibleModifications[m.replace('nonmod_', '')] ||
+                    visibleModifications[m.replace('mod_', '')];
+                if (!mod) {
+                    console.warn(`${m} not known yet`);
+                    continue;
+                }
+                if (isolatedModification && mod.type !== isolatedModification) {
+                    continue;
+                }
+                const cmp = complementBase[mod.base];
+                const detectable = mod.base === 'N'
+                    ? score0
+                    : (((_c = snps[mod.base]) === null || _c === void 0 ? void 0 : _c.entryDepth) || 0) +
+                        (((_d = snps[cmp]) === null || _d === void 0 ? void 0 : _d.entryDepth) || 0) +
+                        (refbase === mod.base ? ref['1'] : 0) +
+                        (refbase === cmp ? ref['-1'] : 0);
+                const modifiable = mod.base === 'N'
+                    ? score0
+                    : (((_e = snps[mod.base]) === null || _e === void 0 ? void 0 : _e.entryDepth) || 0) +
+                        (((_f = snps[cmp]) === null || _f === void 0 ? void 0 : _f.entryDepth) || 0) +
+                        (refbase === mod.base ? ref.entryDepth : 0) +
+                        (refbase === cmp ? ref.entryDepth : 0);
+                const { entryDepth, avgProbability = 0 } = snpinfo.nonmods[m];
+                const modFraction = (modifiable / score0) * (entryDepth / detectable);
+                const nonModColor = 'blue';
+                const c = alphaColor(nonModColor, avgProbability);
+                const height = toHeight(score0);
+                const bottom = toY(score0) + height;
+                ctx.fillStyle = c;
+                ctx.fillRect(Math.round(leftPx), bottom - (curr + modFraction * height), w, modFraction * height);
+                curr += modFraction * height;
+            }
+            for (const m of Object.keys(mods).sort().reverse()) {
+                const mod = visibleModifications[m.replace('mod_', '')];
+                if (!mod) {
+                    console.warn(`${m} not known yet`);
+                    continue;
+                }
+                if (isolatedModification && mod.type !== isolatedModification) {
+                    continue;
+                }
+                const cmp = complementBase[mod.base];
+                const detectable = mod.base === 'N'
+                    ? score0
+                    : (((_g = snps[mod.base]) === null || _g === void 0 ? void 0 : _g.entryDepth) || 0) +
+                        (((_h = snps[cmp]) === null || _h === void 0 ? void 0 : _h.entryDepth) || 0) +
+                        (refbase === mod.base ? ref['1'] : 0) +
+                        (refbase === cmp ? ref['-1'] : 0);
+                const modifiable = mod.base === 'N'
+                    ? score0
+                    : (((_j = snps[mod.base]) === null || _j === void 0 ? void 0 : _j.entryDepth) || 0) +
+                        (((_k = snps[cmp]) === null || _k === void 0 ? void 0 : _k.entryDepth) || 0) +
+                        (refbase === mod.base ? ref.entryDepth : 0) +
+                        (refbase === cmp ? ref.entryDepth : 0);
+                const { entryDepth, avgProbability = 0 } = mods[m];
+                const modFraction = (modifiable / score0) * (entryDepth / detectable);
+                const baseColor = mod.color || 'black';
+                const c = alphaColor(baseColor, avgProbability);
+                const height = toHeight(score0);
+                const bottom = toY(score0) + height;
+                ctx.fillStyle = c;
+                ctx.fillRect(Math.round(leftPx), bottom - (curr + modFraction * height), w, modFraction * height);
+                curr += modFraction * height;
+            }
+        }
+        else if (drawingMethylation) {
+            const { depth, nonmods, mods } = snpinfo;
+            let curr = 0;
+            for (const base of Object.keys(mods).sort().reverse()) {
+                const { entryDepth } = mods[base];
+                const height = toHeight(score0);
+                const bottom = toY(score0) + height;
+                ctx.fillStyle = colorForBase[base] || 'black';
+                ctx.fillRect(Math.round(leftPx), bottom - ((entryDepth + curr) / depth) * height, w, (entryDepth / depth) * height);
+                curr += entryDepth;
+            }
+            for (const base of Object.keys(nonmods).sort().reverse()) {
+                const { entryDepth } = nonmods[base];
+                const height = toHeight(score0);
+                const bottom = toY(score0) + height;
+                ctx.fillStyle = colorForBase[base] || 'black';
+                ctx.fillRect(Math.round(leftPx), bottom - ((entryDepth + curr) / depth) * height, w, (entryDepth / depth) * height);
+                curr += entryDepth;
+            }
+        }
+        else {
+            const { depth, snps } = snpinfo;
+            let curr = 0;
+            for (const base of Object.keys(snps).sort().reverse()) {
+                const { entryDepth } = snps[base];
+                const height = toHeight(score0);
+                const bottom = toY(score0) + height;
+                ctx.fillStyle = colorForBase[base] || 'black';
+                ctx.fillRect(Math.round(leftPx), bottom - ((entryDepth + curr) / depth) * height, w, (entryDepth / depth) * height);
+                curr += entryDepth;
+            }
+        }
+        const interbaseEvents = Object.keys(snpinfo.noncov);
+        if (showInterbaseCounts) {
+            let curr = 0;
+            for (const base of interbaseEvents) {
+                const { entryDepth } = snpinfo.noncov[base];
+                const r = 0.6;
+                ctx.fillStyle = colorForBase[base];
+                ctx.fillRect(leftPx - r + extraHorizontallyFlippedOffset, INTERBASE_INDICATOR_HEIGHT + toHeight2(curr), r * 2, toHeight2(entryDepth));
+                curr += entryDepth;
+            }
+        }
+        if (showInterbaseIndicators) {
+            let accum = 0;
+            let max = 0;
+            let maxBase = '';
+            for (const base of interbaseEvents) {
+                const { entryDepth } = snpinfo.noncov[base];
+                accum += entryDepth;
+                if (entryDepth > max) {
+                    max = entryDepth;
+                    maxBase = base;
+                }
+            }
+            const indicatorComparatorScore = Math.max(score0, prevTotal);
+            if (accum > indicatorComparatorScore * indicatorThreshold &&
+                indicatorComparatorScore > MINIMUM_INTERBASE_INDICATOR_READ_DEPTH) {
+                ctx.fillStyle = colorForBase[maxBase];
+                ctx.beginPath();
+                const l = leftPx + extraHorizontallyFlippedOffset;
+                ctx.moveTo(l - INTERBASE_INDICATOR_WIDTH / 2, 0);
+                ctx.lineTo(l + INTERBASE_INDICATOR_WIDTH / 2, 0);
+                ctx.lineTo(l, INTERBASE_INDICATOR_HEIGHT);
+                ctx.fill();
+            }
+        }
+        prevTotal = score0;
+    }
+    if (showArcs) {
+        for (const f of feats) {
+            if (f.get('type') !== 'skip') {
+                continue;
+            }
+            const s = f.get('start');
+            const e = f.get('end');
+            const [left, right] = bpSpanPx(s, e, region, bpPerPx);
+            ctx.beginPath();
+            const effectiveStrand = f.get('effectiveStrand');
+            const pos = 'rgba(255,200,200,0.7)';
+            const neg = 'rgba(200,200,255,0.7)';
+            const neutral = 'rgba(200,200,200,0.7)';
+            if (effectiveStrand === 1) {
+                ctx.strokeStyle = pos;
+            }
+            else if (effectiveStrand === -1) {
+                ctx.strokeStyle = neg;
+            }
+            else {
+                ctx.strokeStyle = neutral;
+            }
+            ctx.lineWidth = Math.log(f.get('score') + 1);
+            ctx.moveTo(left, height - offset * 2);
+            ctx.bezierCurveTo(left, 0, right, 0, right, height - offset * 2);
+            ctx.stroke();
+        }
+    }
+    if (displayCrossHatches) {
+        ctx.lineWidth = 1;
+        ctx.strokeStyle = 'rgba(140,140,140,0.8)';
+        for (const tick of ticks.values) {
+            ctx.beginPath();
+            ctx.moveTo(0, Math.round(toY(tick)));
+            ctx.lineTo(width, Math.round(toY(tick)));
+            ctx.stroke();
+        }
+    }
+}

package/esm/SNPCoverageRenderer/types.d.ts

@@ -0,0 +1,19 @@
+import type { ColorBy, ModificationTypeWithColor } from '../shared/types';
+import type { RenderArgsDeserialized as FeatureRenderArgsDeserialized } from '@jbrowse/core/pluggableElementTypes/renderers/FeatureRendererType';
+import type { Feature } from '@jbrowse/core/util';
+import type { ScaleOpts } from '@jbrowse/plugin-wiggle';
+export interface RenderArgsDeserialized extends FeatureRenderArgsDeserialized {
+    bpPerPx: number;
+    height: number;
+    highResolutionScaling: number;
+    scaleOpts: ScaleOpts;
+}
+export interface RenderArgsDeserializedWithFeatures extends RenderArgsDeserialized {
+    features: Map<string, Feature>;
+    ticks: {
+        values: number[];
+    };
+    displayCrossHatches: boolean;
+    visibleModifications?: Record<string, ModificationTypeWithColor>;
+    colorBy: ColorBy;
+}

package/esm/SNPCoverageRenderer/types.js

@@ -0,0 +1 @@
+export {};

package/esm/shared/components/BaseDisplayComponent.d.ts

@@ -1,8 +1,7 @@
-import React from 'react';
 import type { LinearReadArcsDisplayModel } from '../../LinearReadArcsDisplay/model';
 import type { LinearReadCloudDisplayModel } from '../../LinearReadCloudDisplay/model';
 declare const BaseDisplayComponent: ({ model, children, }: {
     model: LinearReadArcsDisplayModel | LinearReadCloudDisplayModel;
     children?: React.ReactNode;
-}) => React.JSX.Element | null;
+}) => import("react/jsx-runtime").JSX.Element | null;
 export default BaseDisplayComponent;

package/esm/shared/components/BaseDisplayComponent.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { LoadingEllipses } from '@jbrowse/core/ui';
 import { getContainingView } from '@jbrowse/core/util';
 import { BlockMsg } from '@jbrowse/plugin-linear-genome-view';
@@ -20,27 +20,23 @@ const useStyles = makeStyles()(theme => ({
 }));
 const BlockError = observer(function ({ model, }) {
     const { error } = model;
-    return (React.createElement(BlockMsg, { message: `${error}`, severity: "error", action: React.createElement(Tooltip, { title: "Reload" },
-            React.createElement(Button, { "data-testid": "reload_button", onClick: () => {
+    return (_jsx(BlockMsg, { message: `${error}`, severity: "error", action: _jsx(Tooltip, { title: "Reload", children: _jsx(Button, { "data-testid": "reload_button", onClick: () => {
                     model.reload();
-                } }, "Reload")) }));
+                }, children: "Reload" }) }) }));
 });
 const BaseDisplayComponent = observer(function ({ model, children, }) {
     const { error, regionTooLarge } = model;
-    return error ? (React.createElement(BlockError, { model: model })) : regionTooLarge ? (model.regionCannotBeRendered()) : (React.createElement(DataDisplay, { model: model }, children));
+    return error ? (_jsx(BlockError, { model: model })) : regionTooLarge ? (model.regionCannotBeRendered()) : (_jsx(DataDisplay, { model: model, children: children }));
 });
 const DataDisplay = observer(function ({ model, children, }) {
     const { drawn, loading } = model;
     const view = getContainingView(model);
     const left = (model.lastDrawnOffsetPx || 0) - view.offsetPx;
-    return (React.createElement("div", { "data-testid": `drawn-${drawn}` },
-        React.createElement("div", { style: { position: 'absolute', left } }, children),
-        left !== 0 || loading ? React.createElement(LoadingBar, { model: model }) : null));
+    return (_jsxs("div", { "data-testid": `drawn-${drawn}`, children: [_jsx("div", { style: { position: 'absolute', left }, children: children }), left !== 0 || loading ? _jsx(LoadingBar, { model: model }) : null] }));
 });
 const LoadingBar = observer(function ({ model, }) {
     const { classes } = useStyles();
     const { message } = model;
-    return (React.createElement("div", { className: classes.loading },
-        React.createElement(LoadingEllipses, { message: message })));
+    return (_jsx("div", { className: classes.loading, children: _jsx(LoadingEllipses, { message: message }) }));
 });
 export default BaseDisplayComponent;

package/esm/shared/components/FilterByTagDialog.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import type { FilterBy } from '../types';
 declare const FilterByTagDialog: (props: {
     model: {
@@ -6,5 +5,5 @@ declare const FilterByTagDialog: (props: {
         setFilterBy: (arg: FilterBy) => void;
     };
     handleClose: () => void;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default FilterByTagDialog;

package/esm/shared/components/FilterByTagDialog.js

@@ -1,4 +1,5 @@
-import React, { useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
 import { Dialog } from '@jbrowse/core/ui';
 import { Button, DialogActions, DialogContent, Link, Paper, TextField, Typography, } from '@mui/material';
 import { observer } from 'mobx-react';
@@ -28,24 +29,20 @@ const flagNames = [
 ];
 function Bitmask(props) {
     const { flag = 0, setFlag } = props;
-    return (React.createElement(React.Fragment, null,
-        React.createElement(TextField, { type: "number", value: flag, onChange: event => {
-                setFlag(+event.target.value);
-            } }),
-        flagNames.map((name, index) => {
-            const val = flag & (1 << index);
-            const key = `${name}_${val}`;
-            return (React.createElement("div", { key: key },
-                React.createElement("input", { type: "checkbox", checked: Boolean(val), onChange: event => {
-                        if (event.target.checked) {
-                            setFlag(flag | (1 << index));
-                        }
-                        else {
-                            setFlag(flag & ~(1 << index));
-                        }
-                    } }),
-                React.createElement("label", { htmlFor: key }, name)));
-        })));
+    return (_jsxs(_Fragment, { children: [_jsx(TextField, { type: "number", value: flag, onChange: event => {
+                    setFlag(+event.target.value);
+                } }), flagNames.map((name, index) => {
+                const val = flag & (1 << index);
+                const key = `${name}_${val}`;
+                return (_jsxs("div", { children: [_jsx("input", { type: "checkbox", checked: Boolean(val), onChange: event => {
+                                if (event.target.checked) {
+                                    setFlag(flag | (1 << index));
+                                }
+                                else {
+                                    setFlag(flag & ~(1 << index));
+                                }
+                            } }), _jsx("label", { htmlFor: key, children: name })] }, key));
+            })] }));
 }
 const FilterByTagDialog = observer(function (props) {
     var _a, _b;
@@ -59,55 +56,31 @@ const FilterByTagDialog = observer(function (props) {
     const [readName, setReadName] = useState(filterBy.readName || '');
     const validTag = /^[A-Za-z][A-Za-z0-9]$/.exec(tag);
     const site = 'https://broadinstitute.github.io/picard/explain-flags.html';
-    return (React.createElement(Dialog, { open: true, onClose: handleClose, title: "Filter options" },
-        React.createElement(DialogContent, null,
-            React.createElement(Typography, null,
-                "Set filter bitmask options. Refer to ",
-                React.createElement(Link, { href: site }, site),
-                ' ',
-                "for details"),
-            React.createElement(Paper, { className: classes.paper, variant: "outlined" },
-                React.createElement("div", { style: { display: 'flex' } },
-                    React.createElement("div", null,
-                        React.createElement(Typography, null, "Read must have ALL these flags"),
-                        React.createElement(Bitmask, { flag: flagInclude, setFlag: setFlagInclude })),
-                    React.createElement("div", null,
-                        React.createElement(Typography, null, "Read must have NONE of these flags"),
-                        React.createElement(Bitmask, { flag: flagExclude, setFlag: setFlagExclude })))),
-            React.createElement(Paper, { className: classes.paper, variant: "outlined" },
-                React.createElement(Typography, null, "Filter by tag name and value. Use * in the value field to get all reads containing any value for that tag. Example: filter tag name SA with value * to get all split/supplementary reads. Other examples include HP for haplotype, or RG for read group"),
-                React.createElement(TextField, { className: classes.field, value: tag, onChange: event => {
-                        setTag(event.target.value);
-                    }, placeholder: "Enter tag name", error: tag.length === 2 && !validTag, helperText: tag.length === 2 && !validTag ? 'Not a valid tag' : '', slotProps: {
-                        htmlInput: {
-                            maxLength: 2,
-                        },
-                    } }),
-                React.createElement(TextField, { className: classes.field, value: tagValue, onChange: event => {
-                        setTagValue(event.target.value);
-                    }, placeholder: "Enter tag value" })),
-            React.createElement(Paper, { className: classes.paper, variant: "outlined" },
-                React.createElement(Typography, null, "Filter by read name"),
-                React.createElement(TextField, { className: classes.field, value: readName, onChange: event => {
-                        setReadName(event.target.value);
-                    }, placeholder: "Enter read name" })),
-            React.createElement(DialogActions, null,
-                React.createElement(Button, { variant: "contained", color: "primary", autoFocus: true, type: "submit", onClick: () => {
-                        model.setFilterBy({
-                            flagInclude,
-                            flagExclude,
-                            readName,
-                            tagFilter: tag !== ''
-                                ? {
-                                    tag,
-                                    value: tagValue,
-                                }
-                                : undefined,
-                        });
-                        handleClose();
-                    } }, "Submit"),
-                React.createElement(Button, { variant: "contained", color: "secondary", onClick: () => {
-                        handleClose();
-                    } }, "Cancel")))));
+    return (_jsx(Dialog, { open: true, onClose: handleClose, title: "Filter options", children: _jsxs(DialogContent, { children: [_jsxs(Typography, { children: ["Set filter bitmask options. Refer to ", _jsx(Link, { href: site, children: site }), ' ', "for details"] }), _jsx(Paper, { className: classes.paper, variant: "outlined", children: _jsxs("div", { style: { display: 'flex' }, children: [_jsxs("div", { children: [_jsx(Typography, { children: "Read must have ALL these flags" }), _jsx(Bitmask, { flag: flagInclude, setFlag: setFlagInclude })] }), _jsxs("div", { children: [_jsx(Typography, { children: "Read must have NONE of these flags" }), _jsx(Bitmask, { flag: flagExclude, setFlag: setFlagExclude })] })] }) }), _jsxs(Paper, { className: classes.paper, variant: "outlined", children: [_jsx(Typography, { children: "Filter by tag name and value. Use * in the value field to get all reads containing any value for that tag. Example: filter tag name SA with value * to get all split/supplementary reads. Other examples include HP for haplotype, or RG for read group" }), _jsx(TextField, { className: classes.field, value: tag, onChange: event => {
+                                setTag(event.target.value);
+                            }, placeholder: "Enter tag name", error: tag.length === 2 && !validTag, helperText: tag.length === 2 && !validTag ? 'Not a valid tag' : '', slotProps: {
+                                htmlInput: {
+                                    maxLength: 2,
+                                },
+                            } }), _jsx(TextField, { className: classes.field, value: tagValue, onChange: event => {
+                                setTagValue(event.target.value);
+                            }, placeholder: "Enter tag value" })] }), _jsxs(Paper, { className: classes.paper, variant: "outlined", children: [_jsx(Typography, { children: "Filter by read name" }), _jsx(TextField, { className: classes.field, value: readName, onChange: event => {
+                                setReadName(event.target.value);
+                            }, placeholder: "Enter read name" })] }), _jsxs(DialogActions, { children: [_jsx(Button, { variant: "contained", color: "primary", autoFocus: true, type: "submit", onClick: () => {
+                                model.setFilterBy({
+                                    flagInclude,
+                                    flagExclude,
+                                    readName,
+                                    tagFilter: tag !== ''
+                                        ? {
+                                            tag,
+                                            value: tagValue,
+                                        }
+                                        : undefined,
+                                });
+                                handleClose();
+                            }, children: "Submit" }), _jsx(Button, { variant: "contained", color: "secondary", onClick: () => {
+                                handleClose();
+                            }, children: "Cancel" })] })] }) }));
 });
 export default FilterByTagDialog;

package/esm/shared/renderSvgUtil.d.ts

@@ -1,7 +1,6 @@
-import React from 'react';
 export declare function renderSvg<T extends {
     id: string;
     height: number;
 }>(self: T, opts: {
     rasterizeLayers?: boolean;
-}, cb: (model: T, ctx: CanvasRenderingContext2D, width: number, height: number) => void): Promise<React.JSX.Element | undefined>;
+}, cb: (model: T, ctx: CanvasRenderingContext2D, width: number, height: number) => void): Promise<import("react/jsx-runtime").JSX.Element | undefined>;

package/esm/shared/renderSvgUtil.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { getContainingView } from '@jbrowse/core/util';
 function getId(id) {
     const isJest = typeof jest === 'undefined';
@@ -18,17 +18,13 @@ export async function renderSvg(self, opts, cb) {
         }
         ctx.scale(2, 2);
         cb(self, ctx, width, height);
-        return (React.createElement("image", { width: width, height: height, xlinkHref: canvas.toDataURL('image/png') }));
+        return (_jsx("image", { width: width, height: height, xlinkHref: canvas.toDataURL('image/png') }));
     }
     else {
         const C2S = await import('canvas2svg');
         const ctx = new C2S.default(width, height);
         cb(self, ctx, width, height);
         const clipid = getId(self.id);
-        return (React.createElement(React.Fragment, null,
-            React.createElement("defs", null,
-                React.createElement("clipPath", { id: clipid },
-                    React.createElement("rect", { x: 0, y: 0, width: width, height: height }))),
-            React.createElement("g", { dangerouslySetInnerHTML: { __html: ctx.getSvg().innerHTML }, clipPath: `url(#${clipid})` })));
+        return (_jsxs(_Fragment, { children: [_jsx("defs", { children: _jsx("clipPath", { id: clipid, children: _jsx("rect", { x: 0, y: 0, width: width, height: height }) }) }), _jsx("g", { dangerouslySetInnerHTML: { __html: ctx.getSvg().innerHTML }, clipPath: `url(#${clipid})` })] }));
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/plugin-alignments",
-  "version": "2.18.0",
+  "version": "3.0.1",
   "description": "JBrowse 2 alignments adapters, tracks, etc.",
   "keywords": [
     "jbrowse",
@@ -36,32 +36,32 @@
     "clean": "rimraf dist esm *.tsbuildinfo"
   },
   "dependencies": {
-    "@gmod/bam": "^4.0.1",
-    "@gmod/cram": "^3.0.3",
-    "@jbrowse/sv-core": "^2.18.0",
+    "@gmod/bam": "^5.0.0",
+    "@gmod/cram": "^4.0.1",
+    "@jbrowse/core": "^3.0.1",
+    "@jbrowse/plugin-linear-genome-view": "^3.0.1",
+    "@jbrowse/plugin-wiggle": "^3.0.1",
+    "@jbrowse/sv-core": "^3.0.1",
     "@mui/icons-material": "^6.0.0",
+    "@mui/material": "^6.0.0",
     "canvas2svg": "^1.0.16",
     "copy-to-clipboard": "^3.3.1",
     "fast-deep-equal": "^3.1.3",
-    "generic-filehandle": "^3.0.0"
-  },
-  "peerDependencies": {
-    "@jbrowse/core": "^2.0.0",
-    "@jbrowse/plugin-linear-genome-view": "^2.0.0",
-    "@jbrowse/plugin-wiggle": "^2.0.0",
-    "@mui/material": "^6.0.0",
+    "generic-filehandle2": "^1.0.0",
     "mobx": "^6.0.0",
     "mobx-react": "^9.0.0",
     "mobx-state-tree": "^5.0.0",
-    "react": ">=16.8.0",
     "rxjs": "^7.0.0",
     "tss-react": "^4.0.0"
   },
+  "peerDependencies": {
+    "react": ">=18.0.0"
+  },
   "publishConfig": {
     "access": "public"
   },
   "distModule": "esm/index.js",
   "srcModule": "src/index.ts",
   "module": "esm/index.js",
-  "gitHead": "c344ea60099cb7e460b77f15808946b24a7eee74"
+  "gitHead": "aa2f1d1a89d2361c7fd1a93fe29506fa4554f5cc"
 }