@jbrowse/plugin-linear-genome-view 4.3.0 → 5.0.0-beta.10

package/esm/LinearGenomeView/components/CrisprGuidePanel.js

@@ -0,0 +1,142 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { LabeledCheckbox } from '@jbrowse/core/ui';
+import { IUPAC_MOTIF_REGEX } from '@jbrowse/core/util';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
+import { MenuItem, TextField, ToggleButton, ToggleButtonGroup, Typography, } from '@mui/material';
+import { observer } from 'mobx-react';
+import SearchPanelForm from './SearchPanelForm.js';
+import StrandCheckboxes from './StrandCheckboxes.js';
+import { addReferenceScanTrack } from './searchModes.js';
+const useStyles = makeStyles()({
+    row: {
+        display: 'flex',
+        gap: 12,
+        '& > *': {
+            flex: 1,
+        },
+    },
+    toggleRow: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: 12,
+    },
+});
+// PAM 3' of the protospacer for Cas9-type enzymes, 5' for Cas12a. The two cut
+// offsets are bp from the PAM-proximal end of the protospacer to each strand's
+// cut: equal for a blunt cutter, staggered for Cas12a, which leaves a 5-nt 5'
+// overhang.
+const ENZYME_PRESETS = {
+    SpCas9: {
+        pam: 'NGG',
+        guideLength: 20,
+        pamLocation: '3prime',
+        cutOffset: 3,
+        cutOffsetBottom: 3,
+    },
+    SaCas9: {
+        pam: 'NNGRRT',
+        guideLength: 21,
+        pamLocation: '3prime',
+        cutOffset: 3,
+        cutOffsetBottom: 3,
+    },
+    'Cas12a (Cpf1)': {
+        pam: 'TTTV',
+        guideLength: 23,
+        pamLocation: '5prime',
+        cutOffset: 18,
+        cutOffsetBottom: 23,
+    },
+};
+// The one filter preset the panel offers. The adapter's slots are a free GC
+// range plus a poly-T flag; these are the conventional cutoffs, named in the
+// checkbox label so the numbers aren't hidden behind a word like "usable".
+const GC_FILTER = { minGcPercent: 40, maxGcPercent: 60 };
+const NO_FILTER = { minGcPercent: 0, maxGcPercent: 100 };
+const DEFAULT_ENZYME = 'SpCas9';
+const DEFAULT_PRESET = ENZYME_PRESETS[DEFAULT_ENZYME];
+const toBpCount = (str) => (str.trim() ? Number(str) : Number.NaN);
+const CrisprGuidePanel = observer(function CrisprGuidePanel({ model, handleClose, }) {
+    const { classes } = useStyles();
+    const [enzyme, setEnzyme] = useState(DEFAULT_ENZYME);
+    const [pam, setPam] = useState(DEFAULT_PRESET.pam);
+    const [pamLocation, setPamLocation] = useState(DEFAULT_PRESET.pamLocation);
+    const [guideLengthStr, setGuideLengthStr] = useState(String(DEFAULT_PRESET.guideLength));
+    const [cutOffsetStr, setCutOffsetStr] = useState(String(DEFAULT_PRESET.cutOffset));
+    const [searchForward, setSearchForward] = useState(true);
+    const [searchReverse, setSearchReverse] = useState(true);
+    const [filterQuality, setFilterQuality] = useState(false);
+    // `Number('')` is 0, so an emptied field would otherwise read as a valid zero
+    const guideLength = toBpCount(guideLengthStr);
+    const cutOffset = toBpCount(cutOffsetStr);
+    // Custom is a blunt cutter: config can express a staggered one directly
+    const cutOffsetBottom = ENZYME_PRESETS[enzyme]?.cutOffsetBottom ?? cutOffset;
+    // both are bp counts used for fixed-length string slicing, so a fractional
+    // value would silently truncate and skew the placement
+    const guideLengthValid = Number.isInteger(guideLength) && guideLength > 0;
+    // a cut beyond either end of the protospacer draws its tick outside the glyph
+    // that is supposed to carry it, and outside the box that can be clicked
+    const cutOffsetValid = Number.isInteger(cutOffset) && cutOffset >= 0 && cutOffset <= guideLength;
+    // each PAM position must be a single IUPAC code (one base); other characters
+    // would leak into the match regex and break the fixed-length placement
+    const pamValid = IUPAC_MOTIF_REGEX.test(pam);
+    const canSubmit = pamValid &&
+        guideLengthValid &&
+        cutOffsetValid &&
+        (searchForward || searchReverse);
+    // a staggered cutter shows both offsets, e.g. "cut 18/23 bp from PAM"
+    const cutSummary = cutOffsetBottom === cutOffset
+        ? cutOffset
+        : `${cutOffset}/${cutOffsetBottom}`;
+    const presetSummary = ENZYME_PRESETS[enzyme]
+        ? `PAM ${pam} · ${guideLength} bp guide · cut ${cutSummary} bp from PAM`
+        : 'Set a custom PAM and geometry below';
+    function applyPreset(name) {
+        setEnzyme(name);
+        const preset = ENZYME_PRESETS[name];
+        if (preset) {
+            setPam(preset.pam);
+            setPamLocation(preset.pamLocation);
+            setGuideLengthStr(String(preset.guideLength));
+            setCutOffsetStr(String(preset.cutOffset));
+        }
+    }
+    function handleSubmit() {
+        addReferenceScanTrack(model, {
+            trackId: `crispr_guides_${Date.now()}`,
+            name: enzyme === 'Custom'
+                ? `CRISPR guides ${pam}`
+                : `CRISPR guides ${enzyme} (${pam})`,
+            adapter: {
+                type: 'CrisprGuideAdapter',
+                pam,
+                guideLength,
+                pamLocation,
+                cutOffset,
+                cutOffsetBottom,
+                searchForward,
+                searchReverse,
+                excludePolyT: filterQuality,
+                ...(filterQuality ? GC_FILTER : NO_FILTER),
+            },
+        });
+        handleClose();
+    }
+    return (_jsxs(SearchPanelForm, { onSubmit: handleSubmit, handleClose: handleClose, submitDisabled: !canSubmit, children: [_jsx(TextField, { select: true, variant: "outlined", size: "small", label: "Enzyme", value: enzyme, helperText: presetSummary, onChange: event => {
+                    applyPreset(event.target.value);
+                }, children: [...Object.keys(ENZYME_PRESETS), 'Custom'].map(name => (_jsx(MenuItem, { value: name, children: name }, name))) }), enzyme === 'Custom' ? (_jsxs(_Fragment, { children: [_jsx(TextField, { size: "small", label: "PAM (IUPAC)", value: pam, error: !pamValid, helperText: pamValid ? undefined : 'Use IUPAC codes only', onChange: event => {
+                            setPam(event.target.value.toUpperCase());
+                        } }), _jsxs("div", { className: classes.row, children: [_jsx(TextField, { size: "small", label: "Guide length (bp)", value: guideLengthStr, error: !guideLengthValid, helperText: guideLengthValid ? undefined : 'A whole number of bp', onChange: event => {
+                                    setGuideLengthStr(event.target.value);
+                                } }), _jsx(TextField, { size: "small", label: "Cut offset (bp)", value: cutOffsetStr, error: !cutOffsetValid, helperText: cutOffsetValid ? undefined : 'bp from the PAM, within the guide', onChange: event => {
+                                    setCutOffsetStr(event.target.value);
+                                } })] }), _jsxs("div", { className: classes.toggleRow, children: [_jsx(Typography, { variant: "body2", color: "textSecondary", children: "PAM location" }), _jsxs(ToggleButtonGroup, { exclusive: true, size: "small", value: pamLocation, onChange: (_event, value) => {
+                                    if (value) {
+                                        setPamLocation(value);
+                                    }
+                                }, children: [_jsx(ToggleButton, { value: "3prime", children: "3\u2032 (Cas9)" }), _jsx(ToggleButton, { value: "5prime", children: "5\u2032 (Cas12a)" })] })] })] })) : null, _jsx(StrandCheckboxes, { searchForward: searchForward, searchReverse: searchReverse, setSearchForward: setSearchForward, setSearchReverse: setSearchReverse }), _jsx(LabeledCheckbox, { size: "small", checked: filterQuality, onChange: val => {
+                    setFilterQuality(val);
+                }, label: "Keep only guides with 40-60% GC and no poly-T run" })] }));
+});
+export default CrisprGuidePanel;

package/esm/LinearGenomeView/components/Cytobands.d.ts

@@ -1,9 +1,9 @@
-import type { Assembly } from '@jbrowse/core/assemblyManager/assembly';
-import type { Base1DViewModel } from '@jbrowse/core/util/Base1DViewModel';
+import type { Cytoband } from './util.ts';
+import type { ViewLayout } from '@jbrowse/core/util/Base1DUtils';
 import type { ContentBlock } from '@jbrowse/core/util/blockTypes';
-declare const Cytobands: ({ overview, block, assembly, }: {
-    overview: Base1DViewModel;
-    assembly?: Assembly;
+declare const Cytobands: ({ overview, block, cytobands, }: {
+    overview: ViewLayout;
+    cytobands: Cytoband[];
     block: ContentBlock;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export default Cytobands;

package/esm/LinearGenomeView/components/Cytobands.js

@@ -1,26 +1,27 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { getFillProps } from '@jbrowse/core/util';
+import { layoutBpToPx } from '@jbrowse/core/util/Base1DUtils';
 import { observer } from 'mobx-react';
-import { getCytobands } from "./util.js";
-import { HEADER_OVERVIEW_HEIGHT } from "../consts.js";
+import { HEADER_OVERVIEW_HEIGHT } from '../consts.js';
+// rounded rect from https://stackoverflow.com/a/45889603/2129219
 function rightRoundedRect(x, y, width, height, radius) {
     return `M${x},${y}h${width - radius}a${radius},${radius} 0 0 1 ${radius},${radius}v${height - 2 * radius}a${radius},${radius} 0 0 1 ${-radius},${radius}h${radius - width}z`;
 }
 function leftRoundedRect(x, y, width, height, radius) {
     return `M${x + radius},${y}h${width - radius}v${height}h${radius - width}a${radius},${radius} 0 0 1 ${-radius},${-radius}v${2 * radius - height}a${radius},${radius} 0 0 1 ${radius},${-radius}z`;
 }
-function leftTriangle(x, _y, width, height) {
+function triangleRight(x, y, width, height) {
     return [
-        [x, 0],
-        [x + width, height / 2],
-        [x, height],
+        [x, y],
+        [x + width, y + height / 2],
+        [x, y + height],
     ].toString();
 }
-function rightTriangle(x, _y, width, height) {
+function triangleLeft(x, y, width, height) {
     return [
-        [x, height / 2],
-        [x + width, 0],
-        [x + width, height],
+        [x, y + height / 2],
+        [x + width, y],
+        [x + width, y + height],
     ].toString();
 }
 const colorMap = {
@@ -35,53 +36,75 @@ const colorMap = {
     stalk: 'rgb(127,127,127)',
     acen: '#800',
 };
-const Cytobands = observer(function Cytobands({ overview, block, assembly, }) {
+// assemblies without Giemsa stains (e.g. dm6's numbered polytene divisions)
+// arrive as 'n/a'; alternate two greys per numbered group so adjacent divisions
+// stay distinguishable without painting a distracting colored block
+function bandColors(cytobands) {
+    let prevKey = '';
+    let group = 0;
+    return cytobands.map(({ name, type }) => {
+        if (type !== 'n/a') {
+            return colorMap[type] ?? 'black';
+        }
+        const [, digits, letter] = name?.match(/^(\d+)([A-Za-z])/) ?? [];
+        const key = digits && letter ? digits + letter : '';
+        if (key && key !== prevKey) {
+            prevKey = key;
+            group++;
+        }
+        return group % 2 ? 'rgb(120,120,120)' : 'rgb(190,190,190)';
+    });
+}
+// A block covers a single displayed region, which can be a slice of the
+// chromosome, so clip each band to it and drop the ones that fall outside.
+// Projecting an out-of-block coord returns undefined, and treating that as px 0
+// used to draw runaway triangles and duplicate the centromere in every block.
+function layoutBands(cytobands, overview, block) {
+    const { displayedRegionIndex, reversed } = block;
+    const firstAcenIdx = cytobands.findIndex(({ type }) => type === 'acen');
+    const colors = bandColors(cytobands);
+    return cytobands
+        .map((band, index) => {
+        const { refName, type } = band;
+        const start = Math.max(band.start, block.start);
+        const end = Math.min(band.end, block.end);
+        const toPx = (coord) => layoutBpToPx(overview, { refName, coord, displayedRegionIndex });
+        const s = toPx(start);
+        const e = toPx(end);
+        return start < end && s !== undefined && e !== undefined
+            ? {
+                // name can be missing or duplicated; start/end uniquely identify it
+                key: `${band.start}-${band.end}`,
+                color: colors[index],
+                left: Math.min(s, e),
+                width: Math.abs(e - s),
+                isAcen: type === 'acen',
+                // the two acen bands always point at each other, meeting at the
+                // centromere: the p arm points right and the q arm left, and both
+                // flip when reversed puts the p arm on the right
+                // eslint-disable-next-line unicorn/no-chained-comparison -- parenthesised XOR, not `a === b !== c`
+                pointsRight: (index === firstAcenIdx) !== reversed,
+            }
+            : undefined;
+    })
+        .filter(f => f !== undefined);
+}
+const Cytobands = observer(function Cytobands({ overview, block, cytobands, }) {
     const { offsetPx, reversed } = block;
-    const cytobands = getCytobands(assembly, block.refName);
-    const lcap = reversed ? cytobands.length - 1 : 0;
-    const rcap = reversed ? 0 : cytobands.length - 1;
     const h = HEADER_OVERVIEW_HEIGHT;
-    let centromereSeen = false;
-    let curr = '';
-    let idx = 0;
-    return (_jsx("g", { transform: `translate(-${offsetPx})`, children: cytobands.map((args, index) => {
-            const k = JSON.stringify(args);
-            const { refName, name, type, start, end } = args;
-            const s = overview.bpToPx({ refName, coord: start }) || 0;
-            const e = overview.bpToPx({ refName, coord: end }) || 0;
-            const l = Math.min(s, e);
-            const w = Math.abs(e - s);
-            if (type === 'n/a') {
-                const match = name?.match(/^(\d+)([A-Za-z])/);
-                const ret = match[1] + match[2];
-                if (ret && ret !== curr) {
-                    curr = ret;
-                    idx++;
-                }
-            }
-            const c = type === 'n/a'
-                ? idx % 2
-                    ? 'black'
-                    : '#a77'
-                : colorMap[type] || 'black';
-            if (type === 'acen' && !centromereSeen) {
-                centromereSeen = true;
-                return (_jsx("polygon", { points: reversed
-                        ? rightTriangle(s - w, 0, w, h)
-                        : leftTriangle(s, 0, w, h), ...getFillProps(c) }, k));
-            }
-            if (type === 'acen' && centromereSeen) {
-                return (_jsx("polygon", { points: reversed
-                        ? leftTriangle(s - w, 0, w, h)
-                        : rightTriangle(s, 0, w, h), ...getFillProps(c) }, k));
-            }
-            if (lcap === index) {
-                return (_jsx("path", { d: leftRoundedRect(l, 0, w, h, 8), ...getFillProps(c) }, k));
+    const bands = layoutBands(cytobands, overview, block);
+    const lcap = reversed ? bands.length - 1 : 0;
+    const rcap = reversed ? 0 : bands.length - 1;
+    return (_jsx("g", { transform: `translate(-${offsetPx})`, children: bands.map(({ key, color, left, width, isAcen, pointsRight }, index) => {
+            if (isAcen) {
+                const triangle = pointsRight ? triangleRight : triangleLeft;
+                return (_jsx("polygon", { points: triangle(left, 0, width, h), ...getFillProps(color) }, key));
             }
-            if (rcap === index) {
-                return (_jsx("path", { d: rightRoundedRect(l, 0, w, h, 8), ...getFillProps(c) }, k));
+            if (index === lcap || index === rcap) {
+                const rect = index === lcap ? leftRoundedRect : rightRoundedRect;
+                return (_jsx("path", { d: rect(left, 0, width, h, 8), ...getFillProps(color) }, key));
             }
-            return (_jsx("rect", { x: l, y: 0, width: w, height: h, ...getFillProps(c) }, k));
+            return (_jsx("rect", { x: left, y: 0, width: width, height: h, ...getFillProps(color) }, key));
         }) }));
 });
 export default Cytobands;

package/esm/LinearGenomeView/components/ExportSvgDialog.d.ts

@@ -1,7 +1,12 @@
-import type { ExportSvgOptions } from '../types.ts';
+import type { TrackLabelMode, ViewTrackLabelMode } from '../types.ts';
+import type { BaseExportSvgOptions } from '@jbrowse/core/ui';
 export default function ExportSvgDialog({ model, handleClose, }: {
     model: {
-        exportSvg(opts: ExportSvgOptions): Promise<void>;
+        effectiveTrackLabels?: ViewTrackLabelMode;
+        exportSvg(opts: BaseExportSvgOptions & {
+            trackLabels: TrackLabelMode;
+            showGridlines: boolean;
+        }): Promise<unknown>;
     };
     handleClose: () => void;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;

package/esm/LinearGenomeView/components/ExportSvgDialog.js

@@ -1,70 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
-import { Dialog, ErrorMessage } from '@jbrowse/core/ui';
-import { getSession, useLocalStorage } from '@jbrowse/core/util';
-import { Button, Checkbox, CircularProgress, DialogActions, DialogContent, FormControlLabel, MenuItem, TextField, ToggleButton, ToggleButtonGroup, Typography, } from '@mui/material';
-function LoadingMessage({ format }) {
-    return (_jsxs("div", { children: [_jsx(CircularProgress, { size: 20, style: { marginRight: 20 } }), _jsxs(Typography, { display: "inline", children: ["Creating ", format.toUpperCase()] })] }));
-}
-function useSvgLocal(key, val) {
-    return useLocalStorage(`svg-${key}`, val);
-}
-function TextField2({ children, ...rest }) {
-    return (_jsx("div", { children: _jsx(TextField, { ...rest, children: children }) }));
-}
+import { BaseExportSvgDialog, LabeledCheckbox, useExportSvgPreference, } from '@jbrowse/core/ui';
+import { MenuItem, TextField } from '@mui/material';
+// Shared track-label + gridlines export dialog. Used by LGV, linear-synteny and
+// breakpoint-split views (their lazyDialogs re-export this).
 export default function ExportSvgDialog({ model, handleClose, }) {
-    const session = getSession(model);
-    const offscreenCanvas = typeof OffscreenCanvas !== 'undefined';
-    const [rasterizeLayers, setRasterizeLayers] = useState(offscreenCanvas);
-    const [showGridlines, setShowGridlines] = useSvgLocal('gridlines', false);
-    const [loading, setLoading] = useState(false);
-    const [error, setError] = useState();
-    const [format, setFormat] = useSvgLocal('format', 'svg');
-    const [filename, setFilename] = useSvgLocal('file', 'jbrowse.svg');
-    const [trackLabels, setTrackLabels] = useSvgLocal('tracklabels', 'offset');
-    const [themeName, setThemeName] = useSvgLocal('theme', session.themeName || 'default');
-    return (_jsxs(Dialog, { open: true, onClose: handleClose, title: "Export image", children: [_jsxs(DialogContent, { children: [error ? (_jsx(ErrorMessage, { error: error })) : loading ? (_jsx(LoadingMessage, { format: format })) : null, _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 8 }, children: [_jsx(TextField, { helperText: "filename", value: filename, onChange: event => {
-                                    setFilename(event.target.value);
-                                } }), _jsxs(ToggleButtonGroup, { value: format, exclusive: true, onChange: (_event, value) => {
-                                    if (value) {
-                                        setFormat(value);
-                                        if (filename.endsWith('.svg') && value === 'png') {
-                                            setFilename(filename.replace(/\.svg$/, '.png'));
-                                        }
-                                        else if (filename.endsWith('.png') && value === 'svg') {
-                                            setFilename(filename.replace(/\.png$/, '.svg'));
-                                        }
-                                    }
-                                }, size: "small", children: [_jsx(ToggleButton, { value: "svg", children: "SVG" }), _jsx(ToggleButton, { value: "png", children: "PNG" })] })] }), _jsxs(TextField2, { select: true, label: "Track label positioning", variant: "outlined", style: { width: 150 }, value: trackLabels, onChange: event => {
-                            setTrackLabels(event.target.value);
-                        }, children: [_jsx(MenuItem, { value: "offset", children: "Offset" }), _jsx(MenuItem, { value: "overlay", children: "Overlay" }), _jsx(MenuItem, { value: "left", children: "Left" }), _jsx(MenuItem, { value: "none", children: "None" })] }), session.allThemes ? (_jsx(TextField2, { select: true, label: "Theme", variant: "outlined", value: themeName, onChange: event => {
-                            setThemeName(event.target.value);
-                        }, children: Object.entries(session.allThemes()).map(([key, val]) => (_jsx(MenuItem, { value: key, children: val.name || '(Unknown name)' }, key))) })) : null, _jsx(FormControlLabel, { control: _jsx(Checkbox, { checked: showGridlines, onChange: () => {
-                                setShowGridlines(val => !val);
-                            } }), label: "Show gridlines" }), offscreenCanvas ? (_jsx(FormControlLabel, { control: _jsx(Checkbox, { checked: rasterizeLayers, onChange: () => {
-                                setRasterizeLayers(val => !val);
-                            } }), label: "Rasterize canvas based tracks? File may be much larger if this is turned off" })) : (_jsx(Typography, { children: "Note: rasterizing layers not yet supported in this browser, so SVG size may be large" }))] }), _jsxs(DialogActions, { children: [_jsx(Button, { variant: "contained", color: "secondary", onClick: () => {
-                            handleClose();
-                        }, children: "Cancel" }), _jsx(Button, { variant: "contained", color: "primary", type: "submit", onClick: async () => {
-                            setLoading(true);
-                            setError(undefined);
-                            try {
-                                await model.exportSvg({
-                                    rasterizeLayers,
-                                    format,
-                                    filename,
-                                    trackLabels,
-                                    themeName,
-                                    showGridlines,
-                                });
-                                handleClose();
-                            }
-                            catch (e) {
-                                console.error(e);
-                                setError(e);
-                            }
-                            finally {
-                                setLoading(false);
-                            }
-                        }, children: "Submit" })] })] }));
+    // The view's own setting is already an export mode, so a user who has not
+    // picked one here gets the figure their screen shows. The key is `-mode`
+    // because the modes were once spelled `overlay`/`none`, and a stored one of
+    // those would select nothing in the dropdown.
+    const [trackLabels, setTrackLabels] = useExportSvgPreference('tracklabels-mode', model.effectiveTrackLabels ?? 'offset');
+    const [showGridlines, setShowGridlines] = useExportSvgPreference('gridlines', false);
+    return (_jsx(BaseExportSvgDialog, { model: model, handleClose: handleClose, exportSvg: opts => model.exportSvg({ ...opts, trackLabels, showGridlines }), checkboxes: _jsx(LabeledCheckbox, { checked: showGridlines, onChange: val => {
+                setShowGridlines(val);
+            }, label: "Show gridlines" }), children: _jsxs(TextField, { select: true, label: "Track label positioning", variant: "outlined", style: { minWidth: 200 }, value: trackLabels, onChange: event => {
+                setTrackLabels(event.target.value);
+            }, children: [_jsx(MenuItem, { value: "offset", children: "Offset" }), _jsx(MenuItem, { value: "overlapping", children: "Overlapping" }), _jsx(MenuItem, { value: "left", children: "Left" }), _jsx(MenuItem, { value: "hidden", children: "Hidden" })] }) }));
 }

package/esm/LinearGenomeView/components/GetSequenceDialog.d.ts

@@ -1,12 +1,8 @@
-import type { BpOffset } from '../types.ts';
 import type { Region } from '@jbrowse/core/util';
-declare const GetSequenceDialog: ({ model, handleClose, }: {
-    model: {
-        leftOffset?: BpOffset;
-        rightOffset?: BpOffset;
-        getSelectedRegions: (left?: BpOffset, right?: BpOffset) => Region[];
-        setOffsets: (left?: BpOffset, right?: BpOffset) => void;
-    };
+import type { IAnyStateTreeNode } from '@jbrowse/mobx-state-tree';
+declare const GetSequenceDialog: ({ model, regions, handleClose, }: {
+    model: IAnyStateTreeNode;
+    regions: Region[];
     handleClose: () => void;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export default GetSequenceDialog;