@jbrowse/plugin-alignments 3.6.5 → 4.0.0

package/esm/shared/arcUtils.js

@@ -0,0 +1,73 @@
+import { SAM_FLAG_MATE_REVERSE, SAM_FLAG_MATE_UNMAPPED, SAM_FLAG_SECONDARY, SAM_FLAG_SUPPLEMENTARY, } from "./samFlags.js";
+export function jitter(n) {
+    return Math.random() * 2 * n - n;
+}
+export function drawVerticalLine(ctx, x, height, color) {
+    ctx.strokeStyle = color;
+    ctx.beginPath();
+    ctx.moveTo(x, 0);
+    ctx.lineTo(x, height);
+    ctx.stroke();
+}
+export function extractCoreFeat(f) {
+    return {
+        refName: f.get('refName'),
+        start: f.get('start'),
+        end: f.get('end'),
+        strand: f.get('strand'),
+        tlen: f.get('template_length'),
+        pair_orientation: f.get('pair_orientation'),
+        next_ref: f.get('next_ref'),
+    };
+}
+export function extractCoreFeatBasic(f) {
+    return {
+        refName: f.get('refName'),
+        start: f.get('start'),
+        end: f.get('end'),
+        strand: f.get('strand'),
+    };
+}
+export function getStrandRelativeFirstClipLength(f) {
+    return 'get' in f
+        ? f.get('clipLengthAtStartOfRead')
+        : f
+            .clipLengthAtStartOfRead;
+}
+export function toCoreFeat(f) {
+    return 'get' in f ? extractCoreFeat(f) : f;
+}
+export function toCoreFeatBasic(f) {
+    return 'get' in f ? extractCoreFeatBasic(f) : f;
+}
+export function getMateInfo(f) {
+    const flags = f.get('flags') || 0;
+    const mateStrand = flags & SAM_FLAG_MATE_REVERSE ? -1 : 1;
+    return {
+        refName: f.get('next_ref') || '',
+        start: f.get('next_pos') || 0,
+        end: f.get('next_pos') || 0,
+        strand: mateStrand,
+    };
+}
+export function filterPairedChain(chain) {
+    const result = [];
+    for (const f of chain) {
+        const flags = f.get('flags');
+        if (!(flags & SAM_FLAG_SUPPLEMENTARY) &&
+            !(flags & SAM_FLAG_MATE_UNMAPPED)) {
+            result.push(f);
+        }
+    }
+    return result;
+}
+export function filterAndSortLongReadChain(chain) {
+    const filtered = [];
+    for (const f of chain) {
+        if (!(f.get('flags') & SAM_FLAG_SECONDARY)) {
+            filtered.push(f);
+        }
+    }
+    filtered.sort((a, b) => a.get('clipLengthAtStartOfRead') - b.get('clipLengthAtStartOfRead'));
+    return filtered;
+}

package/{dist/LinearReadCloudDisplay/util.d.ts → esm/shared/canvasUtils.d.ts}

@@ -1,2 +1,2 @@
-export declare function fillRectCtx(x: number, y: number, width: number, height: number, ctx: CanvasRenderingContext2D, fillColor?: string): void;
 export declare function strokeRectCtx(x: number, y: number, width: number, height: number, ctx: CanvasRenderingContext2D, strokeColor?: string): void;
+export declare function lineToCtx(x1: number, y1: number, x2: number, y2: number, ctx: CanvasRenderingContext2D, strokeColor?: string): void;

package/esm/{LinearReadCloudDisplay/util.js → shared/canvasUtils.js}

@@ -1,17 +1,3 @@
-export function fillRectCtx(x, y, width, height, ctx, fillColor) {
-    if (width < 0) {
-        x += width;
-        width = -width;
-    }
-    if (height < 0) {
-        y += height;
-        height = -height;
-    }
-    if (fillColor) {
-        ctx.fillStyle = fillColor;
-    }
-    ctx.fillRect(x, y, width, height);
-}
 export function strokeRectCtx(x, y, width, height, ctx, strokeColor) {
     if (width < 0) {
         x += width;
@@ -26,3 +12,12 @@ export function strokeRectCtx(x, y, width, height, ctx, strokeColor) {
     }
     ctx.strokeRect(x, y, width, height);
 }
+export function lineToCtx(x1, y1, x2, y2, ctx, strokeColor) {
+    if (strokeColor) {
+        ctx.strokeStyle = strokeColor;
+    }
+    ctx.beginPath();
+    ctx.moveTo(x1, y1);
+    ctx.lineTo(x2, y2);
+    ctx.stroke();
+}

package/esm/shared/chevron.d.ts

@@ -0,0 +1 @@
+export declare function drawChevron(ctx: CanvasRenderingContext2D, x: number, y: number, width: number, height: number, strand: number, color: string, chevronWidth: number, stroke?: string): void;

package/esm/shared/chevron.js

@@ -0,0 +1,24 @@
+export function drawChevron(ctx, x, y, width, height, strand, color, chevronWidth, stroke) {
+    ctx.fillStyle = color;
+    ctx.beginPath();
+    if (strand === -1) {
+        ctx.moveTo(x - chevronWidth, y + height / 2);
+        ctx.lineTo(x, y + height);
+        ctx.lineTo(x + width, y + height);
+        ctx.lineTo(x + width, y);
+        ctx.lineTo(x, y);
+    }
+    else {
+        ctx.moveTo(x, y);
+        ctx.lineTo(x, y + height);
+        ctx.lineTo(x + width, y + height);
+        ctx.lineTo(x + width + chevronWidth, y + height / 2);
+        ctx.lineTo(x + width, y);
+    }
+    ctx.closePath();
+    ctx.fill();
+    if (stroke) {
+        ctx.strokeStyle = stroke;
+        ctx.stroke();
+    }
+}

package/esm/shared/color.d.ts

@@ -1,4 +1,14 @@
-import type { ChainStats } from './fetchChains';
+import type { ChainStats } from './types.ts';
+import type { Feature } from '@jbrowse/core/util';
+export declare const PairType: {
+    readonly PROPER_PAIR: 0;
+    readonly LONG_INSERT: 1;
+    readonly SHORT_INSERT: 2;
+    readonly INTER_CHROM: 3;
+    readonly ABNORMAL_ORIENTATION: 4;
+    readonly UNMAPPED_MATE: 5;
+};
+export type PairTypeValue = (typeof PairType)[keyof typeof PairType];
 export declare const fillColor: {
     color_fwd_strand_not_proper: string;
     color_rev_strand_not_proper: string;
@@ -16,7 +26,12 @@ export declare const fillColor: {
     color_interchrom: string;
     color_longinsert: string;
     color_shortinsert: string;
+    color_unmapped_mate: string;
     color_unknown: string;
+    color_longread_rev_fwd: string;
+    color_longread_fwd_rev: string;
+    color_longread_same: string;
+    color_supplementary: string;
 };
 export declare const strokeColor: {
     color_fwd_strand_not_proper: string;
@@ -35,24 +50,52 @@ export declare const strokeColor: {
     color_interchrom: string;
     color_longinsert: string;
     color_shortinsert: string;
+    color_unmapped_mate: string;
     color_unknown: string;
+    color_longread_rev_fwd: string;
+    color_longread_fwd_rev: string;
+    color_longread_same: string;
+    color_supplementary: string;
 };
-export declare function getPairedInsertSizeColor(f1: {
+export declare function getPairedType({ type, f, stats, }: {
+    type: string;
+    f: {
+        refName: string;
+        next_ref?: string;
+        pair_orientation?: string;
+        tlen?: number;
+        flags?: number;
+    };
+    stats?: ChainStats;
+}): PairTypeValue;
+export declare function getPairedInsertSizeColor(f: {
     refName: string;
+    next_ref?: string;
     tlen?: number;
-}, f2: {
-    refName: string;
+    flags?: number;
 }, stats?: ChainStats): readonly [string, string] | undefined;
-export declare function getPairedInsertSizeAndOrientationColor(f1: {
-    refName: string;
-    pair_orientation?: string;
-    tlen?: number;
-}, f2: {
-    refName: string;
-}, stats?: ChainStats): readonly [string, string];
 export declare function getPairedOrientationColorOrDefault(f: {
     pair_orientation?: string;
+    flags?: number;
 }): readonly [string, string] | undefined;
 export declare function getPairedOrientationColor(f: {
     pair_orientation?: string;
+    flags?: number;
 }): readonly [string, string];
+export declare function getPairedInsertSizeAndOrientationColor(f: {
+    refName: string;
+    next_ref?: string;
+    pair_orientation?: string;
+    tlen?: number;
+    flags?: number;
+}, stats?: ChainStats): readonly [string, string];
+export declare function getSingletonColor(f: {
+    tlen?: number;
+    pair_orientation?: string;
+    flags?: number;
+}, stats?: ChainStats): readonly [string, string];
+export declare function getPairedColor({ type, v0, stats, }: {
+    type: string;
+    v0: Feature;
+    stats?: ChainStats;
+}): readonly [string, string] | undefined;

package/esm/shared/color.js

@@ -1,4 +1,12 @@
-import { orientationTypes, pairMap } from '../util';
+import { orientationTypes, pairMap } from "../util.js";
+export const PairType = {
+    PROPER_PAIR: 0,
+    LONG_INSERT: 1,
+    SHORT_INSERT: 2,
+    INTER_CHROM: 3,
+    ABNORMAL_ORIENTATION: 4,
+    UNMAPPED_MATE: 5,
+};
 export const fillColor = {
     color_fwd_strand_not_proper: '#ECC8C8',
     color_rev_strand_not_proper: '#BEBED8',
@@ -8,15 +16,20 @@ export const fillColor = {
     color_rev_missing_mate: '#1919D1',
     color_fwd_diff_chr: '#000',
     color_rev_diff_chr: '#969696',
-    color_pair_lr: '#c8c8c8',
-    color_pair_rr: 'navy',
+    color_pair_lr: 'lightgrey',
+    color_pair_rr: '#3a3a9d',
     color_pair_rl: 'teal',
     color_pair_ll: 'green',
     color_nostrand: '#c8c8c8',
     color_interchrom: 'purple',
     color_longinsert: 'red',
     color_shortinsert: 'pink',
+    color_unmapped_mate: '#8B4513',
     color_unknown: 'grey',
+    color_longread_rev_fwd: 'navy',
+    color_longread_fwd_rev: 'green',
+    color_longread_same: 'grey',
+    color_supplementary: '#f0b878',
 };
 export const strokeColor = {
     color_fwd_strand_not_proper: '#CA6767',
@@ -28,45 +41,128 @@ export const strokeColor = {
     color_fwd_diff_chr: '#000000',
     color_rev_diff_chr: '#696969',
     color_pair_lr: '#8C8C8C',
-    color_pair_rr: '#00005A',
+    color_pair_rr: '#00002A',
     color_pair_rl: '#005A5A',
     color_pair_ll: '#005A00',
     color_nostrand: '#8C8C8C',
     color_interchrom: '#5A005A',
     color_longinsert: '#B30000',
     color_shortinsert: '#FF3A5C',
-    color_unknown: 'grey',
+    color_unmapped_mate: '#5D2E0D',
+    color_unknown: '#444',
+    color_longread_rev_fwd: '#00004D',
+    color_longread_fwd_rev: '#005A00',
+    color_longread_same: '#444',
+    color_supplementary: '#c88030',
 };
-export function getPairedInsertSizeColor(f1, f2, stats) {
-    const sameRef = f1.refName === f2.refName;
-    const tlen = Math.abs(f1.tlen || 0);
-    if (sameRef && tlen > ((stats === null || stats === void 0 ? void 0 : stats.upper) || 0)) {
-        return [fillColor.color_longinsert, strokeColor.color_longinsert];
+const defaultColor = [
+    fillColor.color_pair_lr,
+    strokeColor.color_pair_lr,
+];
+export function getPairedType({ type, f, stats, }) {
+    if (f.flags !== undefined && f.flags & 8) {
+        return PairType.UNMAPPED_MATE;
     }
-    else if (sameRef && tlen < ((stats === null || stats === void 0 ? void 0 : stats.lower) || 0)) {
-        return [fillColor.color_shortinsert, strokeColor.color_shortinsert];
+    if (type === 'insertSizeAndOrientation' || type === 'orientation') {
+        const orientationType = orientationTypes.fr;
+        const r = orientationType[f.pair_orientation || ''];
+        if (r && r !== 'LR') {
+            return PairType.ABNORMAL_ORIENTATION;
+        }
     }
-    else if (!sameRef) {
-        return [fillColor.color_interchrom, strokeColor.color_interchrom];
-    }
-    else {
-        return undefined;
+    if (type === 'insertSizeAndOrientation' || type === 'insertSize') {
+        const sameRef = f.refName === f.next_ref;
+        const tlen = Math.abs(f.tlen || 0);
+        if (!sameRef) {
+            return PairType.INTER_CHROM;
+        }
+        if (stats) {
+            if (tlen > stats.upper) {
+                return PairType.LONG_INSERT;
+            }
+            if (tlen < stats.lower) {
+                return PairType.SHORT_INSERT;
+            }
+        }
     }
+    return PairType.PROPER_PAIR;
 }
-const defaultColor = [fillColor.color_unknown, fillColor.color_unknown];
-export function getPairedInsertSizeAndOrientationColor(f1, f2, stats) {
-    return (getPairedOrientationColorOrDefault(f1) ||
-        getPairedInsertSizeColor(f1, f2, stats) ||
-        defaultColor);
+export function getPairedInsertSizeColor(f, stats) {
+    const pairType = getPairedType({
+        type: 'insertSize',
+        f,
+        stats,
+    });
+    switch (pairType) {
+        case PairType.UNMAPPED_MATE:
+            return [
+                fillColor.color_unmapped_mate,
+                strokeColor.color_unmapped_mate,
+            ];
+        case PairType.LONG_INSERT:
+            return [fillColor.color_longinsert, strokeColor.color_longinsert];
+        case PairType.SHORT_INSERT:
+            return [
+                fillColor.color_shortinsert,
+                strokeColor.color_shortinsert,
+            ];
+        case PairType.INTER_CHROM:
+            return [fillColor.color_interchrom, strokeColor.color_interchrom];
+        case PairType.PROPER_PAIR:
+            return undefined;
+        default:
+            return undefined;
+    }
 }
 export function getPairedOrientationColorOrDefault(f) {
+    if (f.flags !== undefined && f.flags & 8) {
+        return [
+            fillColor.color_unmapped_mate,
+            strokeColor.color_unmapped_mate,
+        ];
+    }
     const type = orientationTypes.fr;
     const r = type[f.pair_orientation || ''];
+    if (!r || r === 'LR') {
+        return undefined;
+    }
     const type2 = pairMap[r];
-    return r === 'LR'
-        ? undefined
-        : [fillColor[type2], strokeColor[type2]];
+    return [fillColor[type2], strokeColor[type2]];
 }
 export function getPairedOrientationColor(f) {
     return getPairedOrientationColorOrDefault(f) || defaultColor;
 }
+export function getPairedInsertSizeAndOrientationColor(f, stats) {
+    return (getPairedOrientationColorOrDefault(f) ||
+        getPairedInsertSizeColor(f, stats) ||
+        defaultColor);
+}
+export function getSingletonColor(f, stats) {
+    const tlen = Math.abs(f.tlen || 0);
+    if (stats && tlen > stats.upper) {
+        return [
+            fillColor.color_fwd_missing_mate,
+            strokeColor.color_fwd_missing_mate,
+        ];
+    }
+    return defaultColor;
+}
+export function getPairedColor({ type, v0, stats, }) {
+    const f0 = {
+        refName: v0.get('refName'),
+        next_ref: v0.get('next_ref'),
+        pair_orientation: v0.get('pair_orientation'),
+        tlen: v0.get('template_length'),
+        flags: v0.get('flags'),
+    };
+    if (type === 'insertSizeAndOrientation') {
+        return getPairedInsertSizeAndOrientationColor(f0, stats);
+    }
+    if (type === 'orientation') {
+        return getPairedOrientationColor(f0);
+    }
+    if (type === 'insertSize') {
+        return getPairedInsertSizeColor(f0, stats);
+    }
+    return undefined;
+}

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

@@ -1,4 +1,4 @@
-import type { FilterBy } from '../types';
+import type { FilterBy } from '../types.ts';
 declare const FilterByTagDialog: (props: {
     model: {
         filterBy: FilterBy;

package/esm/shared/components/FilterByTagDialog.js

@@ -1,9 +1,9 @@
 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 { makeStyles } from '@jbrowse/core/util/tss-react';
 import { Button, DialogActions, DialogContent, Link, Paper, TextField, Typography, } from '@mui/material';
 import { observer } from 'mobx-react';
-import { makeStyles } from 'tss-react/mui';
 const useStyles = makeStyles()(theme => ({
     paper: {
         padding: theme.spacing(2),
@@ -44,15 +44,14 @@ function Bitmask(props) {
                             } }), _jsx("label", { htmlFor: key, children: name })] }, key));
             })] }));
 }
-const FilterByTagDialog = observer(function (props) {
-    var _a, _b;
+const FilterByTagDialog = observer(function FilterByTagDialog(props) {
     const { model, handleClose } = props;
     const { classes } = useStyles();
     const { filterBy } = model;
     const [flagInclude, setFlagInclude] = useState(filterBy.flagInclude);
     const [flagExclude, setFlagExclude] = useState(filterBy.flagExclude);
-    const [tag, setTag] = useState(((_a = filterBy.tagFilter) === null || _a === void 0 ? void 0 : _a.tag) || '');
-    const [tagValue, setTagValue] = useState(((_b = filterBy.tagFilter) === null || _b === void 0 ? void 0 : _b.value) || '');
+    const [tag, setTag] = useState(filterBy.tagFilter?.tag || '');
+    const [tagValue, setTagValue] = useState(filterBy.tagFilter?.value || '');
     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';

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

@@ -0,0 +1,10 @@
+declare const SetFeatureHeightDialog: (props: {
+    model: {
+        setFeatureHeight: (arg?: number) => void;
+        setNoSpacing: (arg?: boolean) => void;
+        featureHeightSetting: number;
+        noSpacing?: boolean;
+    };
+    handleClose: () => void;
+}) => import("react/jsx-runtime").JSX.Element;
+export default SetFeatureHeightDialog;

package/esm/shared/components/SetFeatureHeightDialog.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Dialog } from '@jbrowse/core/ui';
+import { Button, Checkbox, DialogActions, DialogContent, FormControlLabel, TextField, Typography, } from '@mui/material';
+import { observer } from 'mobx-react';
+const SetFeatureHeightDialog = observer(function SetFeatureHeightDialog(props) {
+    const { model, handleClose } = props;
+    const { featureHeightSetting, noSpacing: noSpacingSetting } = model;
+    const [height, setHeight] = useState(`${featureHeightSetting}`);
+    const [noSpacing, setNoSpacing] = useState(noSpacingSetting);
+    const ok = height !== '' && !Number.isNaN(+height);
+    return (_jsx(Dialog, { open: true, onClose: handleClose, title: "Set feature height", children: _jsxs(DialogContent, { children: [_jsx(Typography, { children: "Adjust the feature height and whether there is any spacing between features. Setting feature height to 1 and removing spacing makes the display very compact." }), _jsx(TextField, { value: height, helperText: "Feature height", onChange: event => {
+                        setHeight(event.target.value);
+                    } }), _jsx(FormControlLabel, { control: _jsx(Checkbox, { checked: !!noSpacing, onChange: () => {
+                            setNoSpacing(val => !val);
+                        } }), label: "Remove spacing between features in y-direction?" }), _jsxs(DialogActions, { children: [_jsx(Button, { variant: "contained", color: "primary", type: "submit", autoFocus: true, disabled: !ok, onClick: () => {
+                                model.setFeatureHeight(height !== '' && !Number.isNaN(+height) ? +height : undefined);
+                                model.setNoSpacing(noSpacing);
+                                handleClose();
+                            }, children: "Submit" }), _jsx(Button, { variant: "contained", color: "secondary", onClick: () => {
+                                handleClose();
+                            }, children: "Cancel" })] })] }) }));
+});
+export default SetFeatureHeightDialog;

package/esm/{LinearPileupDisplay → shared}/components/SetMaxHeightDialog.js

@@ -1,20 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { Dialog } from '@jbrowse/core/ui';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
 import { Button, DialogActions, DialogContent, TextField, Typography, } from '@mui/material';
 import { observer } from 'mobx-react';
-import { makeStyles } from 'tss-react/mui';
 const useStyles = makeStyles()({
     root: {
         width: 500,
     },
 });
-const SetMaxHeightDialog = observer(function (props) {
+const SetMaxHeightDialog = observer(function SetMaxHeightDialog(props) {
     const { model, handleClose } = props;
     const { classes } = useStyles();
     const { maxHeight = '' } = model;
     const [max, setMax] = useState(`${maxHeight}`);
-    return (_jsx(Dialog, { open: true, onClose: handleClose, title: "Set max height", children: _jsxs(DialogContent, { className: classes.root, children: [_jsx(Typography, { children: "Set max height for the track. For example, you can increase this if the layout says \"Max height reached\"" }), _jsx(TextField, { value: max, autoFocus: true, onChange: event => {
+    return (_jsx(Dialog, { open: true, onClose: handleClose, title: "Set max track height", children: _jsxs(DialogContent, { className: classes.root, children: [_jsx(Typography, { children: "Set max layout height for the track. For example, you can increase this if the layout says \"Max height reached\"" }), _jsx(TextField, { value: max, autoFocus: true, onChange: event => {
                         setMax(event.target.value);
                     }, placeholder: "Enter max height for layout" }), _jsxs(DialogActions, { children: [_jsx(Button, { variant: "contained", color: "primary", type: "submit", autoFocus: true, onClick: () => {
                                 model.setMaxHeight(max !== '' && !Number.isNaN(+max) ? +max : undefined);

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

@@ -0,0 +1,10 @@
+import type { ColorBy } from '../types.ts';
+declare const SetModificationThresholdDialog: (props: {
+    model: {
+        modificationThreshold: number;
+        colorBy?: ColorBy;
+        setColorScheme: (colorBy: ColorBy) => void;
+    };
+    handleClose: () => void;
+}) => import("react/jsx-runtime").JSX.Element;
+export default SetModificationThresholdDialog;

package/esm/shared/components/SetModificationThresholdDialog.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Dialog } from '@jbrowse/core/ui';
+import { Button, DialogActions, DialogContent, TextField, Typography, } from '@mui/material';
+import { observer } from 'mobx-react';
+const SetModificationThresholdDialog = observer(function SetModificationThresholdDialog(props) {
+    const { model, handleClose } = props;
+    const [threshold, setThreshold] = useState(String(model.modificationThreshold));
+    const numThreshold = Number.parseFloat(threshold);
+    const validThreshold = !Number.isNaN(numThreshold) && numThreshold >= 0 && numThreshold <= 100;
+    return (_jsx(Dialog, { open: true, onClose: handleClose, title: "Adjust modification threshold", children: _jsxs(DialogContent, { children: [_jsx(Typography, { children: "Set the minimum probability threshold for displaying modifications" }), _jsx(Typography, { color: "textSecondary", children: "Only modifications with probability above this threshold will be displayed (0-100%)" }), _jsx(TextField, { value: threshold, onChange: event => {
+                        setThreshold(event.target.value);
+                    }, placeholder: "Enter threshold (e.g., 10)", error: threshold !== '' && !validThreshold, helperText: threshold !== '' && !validThreshold
+                        ? 'Must be a number between 0 and 100'
+                        : '', autoComplete: "off", type: "number", slotProps: {
+                        htmlInput: {
+                            min: 0,
+                            max: 100,
+                            step: 1,
+                        },
+                    } }), _jsxs(DialogActions, { children: [_jsx(Button, { variant: "contained", color: "primary", type: "submit", autoFocus: true, disabled: !validThreshold, onClick: () => {
+                                const currentColorBy = model.colorBy || {
+                                    type: 'modifications',
+                                };
+                                model.setColorScheme({
+                                    ...currentColorBy,
+                                    modifications: {
+                                        ...currentColorBy.modifications,
+                                        threshold: numThreshold,
+                                    },
+                                });
+                                handleClose();
+                            }, children: "Submit" }), _jsx(Button, { variant: "contained", color: "secondary", onClick: () => {
+                                handleClose();
+                            }, children: "Cancel" })] })] }) }));
+});
+export default SetModificationThresholdDialog;

package/esm/shared/createRPCRenderingSetup.d.ts

@@ -0,0 +1,37 @@
+import { getSession } from '@jbrowse/core/util';
+import type { AnyConfigurationModel } from '@jbrowse/core/configuration';
+import type { StopToken } from '@jbrowse/core/util/stopToken';
+import type { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view';
+type LGV = LinearGenomeViewModel;
+export interface RPCRenderableModel {
+    id: string;
+    error: unknown;
+    featureDensityStatsReadyAndRegionNotTooLarge: boolean;
+    effectiveRpcDriverName: string;
+    adapterConfig: unknown;
+    configuration: AnyConfigurationModel;
+    renderingStopToken?: StopToken;
+    setRenderingStopToken: (token?: StopToken) => void;
+    setLoading: (loading: boolean) => void;
+    setError: (error: unknown) => void;
+    setRenderingImageData: (imageData: ImageBitmap | undefined) => void;
+    setLastDrawnOffsetPx: (offsetPx: number) => void;
+    setLastDrawnBpPerPx: (bpPerPx: number) => void;
+    ref: HTMLCanvasElement | null;
+    renderingImageData?: ImageBitmap;
+    setStatusMessage?: (msg: string) => void;
+}
+export interface RPCRenderSetupParams<T extends RPCRenderableModel, R = Record<string, unknown>> {
+    self: T;
+    rpcMethodName: string;
+    getRPCParams: (params: {
+        view: LGV;
+        session: ReturnType<typeof getSession>;
+        sequenceAdapter: unknown;
+        stopToken: StopToken;
+    }) => Record<string, unknown>;
+    onResult: (result: R) => void;
+}
+export declare function createRPCRenderFunction<T extends RPCRenderableModel, R = Record<string, unknown>>({ self, rpcMethodName, getRPCParams, onResult }: RPCRenderSetupParams<T, R>): () => Promise<void>;
+export declare function setupCanvasRenderingAutorun<T extends RPCRenderableModel>(self: T): void;
+export {};