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

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

package/esm/LinearGenomeView/components/ExportSvgDialog.js

@@ -1,70 +1,14 @@
 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" })] })] }));
+    const [trackLabels, setTrackLabels] = useExportSvgPreference('tracklabels', '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: "overlay", children: "Overlay" }), _jsx(MenuItem, { value: "left", children: "Left" }), _jsx(MenuItem, { value: "none", children: "None" })] }) }));
 }

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;

package/esm/LinearGenomeView/components/GetSequenceDialog.js

@@ -1,101 +1,97 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
-import { Dialog, ErrorMessage, LoadingEllipses } from '@jbrowse/core/ui';
-import { complement, reverse, toLocale } from '@jbrowse/core/util';
+import { useState } from 'react';
+import { CopyToClipboardButton, Dialog, ErrorBanner, LabeledCheckbox, LoadingEllipses, MonospaceTextField, } from '@jbrowse/core/ui';
+import { complement, reverse, statusProgressLabel, toLocale, } from '@jbrowse/core/util';
 import { formatSeqFasta } from '@jbrowse/core/util/formatFastaStrings';
-import { makeStyles } from '@jbrowse/core/util/tss-react';
+import { useFetch } from '@jbrowse/core/util/useFetch';
 import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 import GetAppIcon from '@mui/icons-material/GetApp';
-import { Button, Checkbox, DialogActions, DialogContent, FormControlLabel, FormGroup, TextField, Typography, } from '@mui/material';
+import { Button, DialogActions, DialogContent, FormGroup, Typography, } from '@mui/material';
 import { observer } from 'mobx-react';
-import { fetchSequence } from "./fetchSequence.js";
-const useStyles = makeStyles()({
-    dialogContent: {
-        width: '80em',
-    },
-    textAreaFont: {
-        fontFamily: 'Courier New',
-    },
-});
-const GetSequenceDialog = observer(function GetSequenceDialog({ model, handleClose, }) {
-    const { classes } = useStyles();
-    const [error, setError] = useState();
-    const [sequenceChunks, setSequenceChunks] = useState();
-    const [rev, setReverse] = useState(false);
-    const [copied, setCopied] = useState(false);
-    const [comp, setComplement] = useState(false);
-    const { leftOffset, rightOffset } = model;
-    const loading = sequenceChunks === undefined;
-    useEffect(() => {
-        const controller = new AbortController();
-        (async () => {
-            try {
-                const selection = model.getSelectedRegions(leftOffset, rightOffset);
-                if (selection.length === 0) {
-                    throw new Error('Selected region is out of bounds');
-                }
-                setSequenceChunks(await fetchSequence(model, selection));
-            }
-            catch (e) {
-                console.error(e);
-                setError(e);
+import { fetchSequence } from './fetchSequence.js';
+// Guard on the requested span, before fetching, so a whole-chromosome request
+// (easy to trigger now that features/regions can open this) never round-trips
+// megabases just to be display-blocked. Above the display limit the sequence is
+// still downloadable; above the fetch limit it is refused outright.
+//
+// The display limit is in FASTA characters, not bp — it caps what goes into the
+// textarea, which is the formatted output including headers and line breaks.
+const MAX_DISPLAY_CHARS = 1_000_000;
+const MAX_FETCH_BP = 10_000_000;
+const GetSequenceDialog = observer(function GetSequenceDialog({ model, regions, handleClose, }) {
+    const [rev, setRev] = useState(false);
+    const [comp, setComp] = useState(false);
+    const totalBp = regions.reduce((a, r) => a + (r.end - r.start), 0);
+    const tooLargeToFetch = totalBp > MAX_FETCH_BP;
+    const { data: sequenceChunks, error, isLoading: loading, status, } = useFetch(tooLargeToFetch
+        ? false
+        : [
+            'fetchSequence',
+            regions.map(r => `${r.refName}:${r.start}-${r.end}`),
+        ], 
+    // a selection this dialog will happily take is a whole chromosome of
+    // sequence, so both handles are forwarded: closing the dialog stops the
+    // read rather than leaving the worker on it, and the wait is named
+    async (_name, _locs, stopToken, statusCallback) => {
+        if (regions.length === 0) {
+            throw new Error('Selected region is out of bounds');
+        }
+        const chunks = await fetchSequence(model, regions, {
+            stopToken,
+            statusCallback,
+        });
+        // validate here (in the async path) so a length mismatch surfaces via the
+        // dialog's own ErrorBanner rather than throwing during render
+        return chunks.map(chunk => {
+            const seq = chunk.get('seq');
+            const start = chunk.get('start') + 1;
+            const end = chunk.get('end');
+            const loc = `${chunk.get('refName')}:${start}-${end}`;
+            if (seq.length !== end - start + 1) {
+                throw new Error(`${loc} returned ${toLocale(seq.length)} bases, but should have returned ${toLocale(end - start + 1)}`);
             }
-        })();
-        return () => {
-            controller.abort();
+            return { loc, seq };
+        });
+    });
+    const entries = sequenceChunks?.map(({ loc, seq }) => {
+        const revSeq = rev ? reverse(seq) : seq;
+        return {
+            header: loc + (rev ? '-rev' : '') + (comp ? '-comp' : ''),
+            seq: comp ? complement(revSeq) : revSeq,
         };
-    }, [model, leftOffset, rightOffset]);
-    const sequence = sequenceChunks
-        ? formatSeqFasta(sequenceChunks.map(chunk => {
-            let chunkSeq = chunk.get('seq');
-            const chunkRefName = chunk.get('refName');
-            const chunkStart = chunk.get('start') + 1;
-            const chunkEnd = chunk.get('end');
-            const loc = `${chunkRefName}:${chunkStart}-${chunkEnd}`;
-            if (chunkSeq?.length !== chunkEnd - chunkStart + 1) {
-                throw new Error(`${loc} returned ${toLocale(chunkSeq.length)} bases, but should have returned ${toLocale(chunkEnd - chunkStart)}`);
-            }
-            if (rev) {
-                chunkSeq = reverse(chunkSeq);
-            }
-            if (comp) {
-                chunkSeq = complement(chunkSeq);
-            }
-            return {
-                header: loc + (rev ? '-rev' : '') + (comp ? '-comp' : ''),
-                seq: chunkSeq,
-            };
-        }))
-        : '';
-    const sequenceTooLarge = sequence ? sequence.length > 1_000_000 : false;
+    }) ?? [];
+    const sequence = formatSeqFasta(entries);
+    const plainSequence = entries.map(e => e.seq).join('\n');
+    const sequenceTooLarge = sequence.length > MAX_DISPLAY_CHARS;
+    // What the textarea says instead of a sequence. `tooLargeToFetch` disables the
+    // fetch, so without this branch it left an empty box with no loading state, no
+    // error and no explanation — and a Download FASTA button that wrote 0 bytes.
+    const notice = tooLargeToFetch
+        ? `Selected region is ${toLocale(totalBp)}bp, over the ${toLocale(MAX_FETCH_BP)}bp limit for fetching a reference sequence. Zoom in or select a smaller region.`
+        : sequenceTooLarge
+            ? 'Reference sequence too large to display, use the download FASTA button'
+            : undefined;
     return (_jsxs(Dialog, { maxWidth: "xl", open: true, title: "Reference sequence", onClose: () => {
             handleClose();
-            model.setOffsets();
-        }, children: [_jsxs(DialogContent, { children: [error ? (_jsx(ErrorMessage, { error: error })) : loading ? (_jsx(LoadingEllipses, { message: "Retrieving sequences" })) : null, _jsx(TextField, { variant: "outlined", multiline: true, minRows: 5, maxRows: 10, disabled: sequenceTooLarge, className: classes.dialogContent, fullWidth: true, value: sequenceTooLarge
-                            ? 'Reference sequence too large to display, use the download FASTA button'
-                            : sequence, slotProps: {
-                            input: {
-                                readOnly: true,
-                                classes: {
-                                    input: classes.textAreaFont,
-                                },
-                            },
-                        } }), _jsxs(FormGroup, { children: [_jsx(FormControlLabel, { control: _jsx(Checkbox, { value: rev, onChange: event => {
-                                        setReverse(event.target.checked);
-                                    } }), label: "Reverse sequence" }), _jsx(FormControlLabel, { control: _jsx(Checkbox, { value: comp, onChange: event => {
-                                        setComplement(event.target.checked);
-                                    } }), label: "Complement sequence" })] }), _jsx(Typography, { style: { margin: 10 }, children: "Note: Check both boxes for the \"reverse complement\"" })] }), _jsxs(DialogActions, { children: [_jsx(Button, { onClick: async () => {
-                            const { default: copy } = await import('copy-to-clipboard');
-                            copy(sequence);
-                            setCopied(true);
-                            setTimeout(() => {
-                                setCopied(false);
-                            }, 500);
-                        }, disabled: loading || !!error || sequenceTooLarge, color: "primary", startIcon: _jsx(ContentCopyIcon, {}), children: copied ? 'Copied' : 'Copy to clipboard' }), _jsx(Button, { onClick: async () => {
-                            const { saveAs } = await import('file-saver-es');
-                            saveAs(new Blob([sequence || ''], {
+        }, children: [_jsxs(DialogContent, { style: { width: '80em' }, children: [error ? (_jsx(ErrorBanner, { error: error })) : loading ? (_jsx(LoadingEllipses, { message: statusProgressLabel(status) || 'Retrieving sequences' })) : null, _jsxs("div", { style: {
+                            display: 'flex',
+                            justifyContent: 'flex-end',
+                            gap: 8,
+                            marginBottom: 4,
+                        }, children: [_jsx(CopyToClipboardButton, { value: plainSequence, copiedLabel: "Copied", disabled: !plainSequence || sequenceTooLarge, variant: "contained", color: "primary", size: "small", startIcon: _jsx(ContentCopyIcon, {}), children: "Copy plain text" }), _jsx(CopyToClipboardButton, { value: sequence, copiedLabel: "Copied", disabled: !sequence || sequenceTooLarge, variant: "contained", color: "primary", size: "small", startIcon: _jsx(ContentCopyIcon, {}), children: "Copy FASTA" })] }), _jsx(MonospaceTextField, { fullWidth: true, readOnly: true, minRows: 5, maxRows: 10, disabled: notice !== undefined, value: notice ?? sequence }), _jsxs(FormGroup, { children: [_jsx(LabeledCheckbox, { checked: rev, onChange: val => {
+                                    setRev(val);
+                                }, label: "Reverse sequence" }), _jsx(LabeledCheckbox, { checked: comp, onChange: val => {
+                                    setComp(val);
+                                }, label: "Complement sequence" })] }), _jsx(Typography, { style: { margin: 10 }, children: "Note: Check both boxes for the \"reverse complement\"" })] }), _jsxs(DialogActions, { children: [_jsx(Button, { variant: "contained", onClick: async () => {
+                            const { saveAs } = await import('@jbrowse/core/util/FileSaver');
+                            saveAs(new Blob([sequence], {
                                 type: 'text/x-fasta;charset=utf-8',
                             }), 'jbrowse_ref_seq.fa');
-                        }, disabled: loading || !!error, color: "primary", startIcon: _jsx(GetAppIcon, {}), children: "Download FASTA" }), _jsx(Button, { onClick: handleClose, variant: "contained", children: "Close" })] })] }));
+                        }, 
+                        // `!sequence` covers every path with nothing to write: still loading,
+                        // errored, and the over-fetch-limit refusal
+                        disabled: !sequence, color: "primary", startIcon: _jsx(GetAppIcon, {}), children: "Download FASTA" }), _jsx(Button, { onClick: () => {
+                            handleClose();
+                        }, variant: "contained", children: "Close" })] })] }));
 });
 export default GetSequenceDialog;

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

@@ -3,5 +3,5 @@ type LGV = LinearGenomeViewModel;
 declare const Gridlines: ({ model, offset, }: {
     model: LGV;
     offset?: number;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export default Gridlines;

package/esm/LinearGenomeView/components/Gridlines.js

@@ -1,72 +1,43 @@
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { makeStyles } from '@jbrowse/core/util/tss-react';
 import { observer } from 'mobx-react';
-import { ContentBlock as ContentBlockComponent, ElidedBlock as ElidedBlockComponent, InterRegionPaddingBlock as InterRegionPaddingBlockComponent, } from "../../BaseLinearDisplay/components/Block.js";
-import { makeTicks } from "../util.js";
+import ZoomTransform from './ZoomTransform.js';
 const useStyles = makeStyles()(theme => ({
-    verticalGuidesZoomContainer: {
+    // top/left stay unset: as an inline-level box the svg takes its static
+    // position on a line box, and pinning it to 0 shifts the ticks off the
+    // canvas's own grid
+    absoluteFill: {
         position: 'absolute',
-        top: 0,
-        height: '100%',
         width: '100%',
-        pointerEvents: 'none',
-    },
-    verticalGuidesContainer: {
-        position: 'absolute',
-        height: '100%',
-        pointerEvents: 'none',
-        display: 'flex',
-    },
-    tick: {
-        position: 'absolute',
         height: '100%',
-        width: 1,
     },
-    majorTick: {
-        background: theme.palette.action.disabled,
+    minorLine: {
+        stroke: theme.palette.gridlineMinor,
     },
-    minorTick: {
-        background: theme.palette.divider,
+    majorLine: {
+        stroke: theme.palette.gridlineMajor,
     },
 }));
-function RenderedBlockLines({ block, bpPerPx, }) {
-    const { classes } = useStyles();
-    const { start, end, reversed } = block;
-    const ticks = makeTicks(start, end, bpPerPx);
-    const majorTickClass = `${classes.tick} ${classes.majorTick}`;
-    const minorTickClass = `${classes.tick} ${classes.minorTick}`;
-    return (_jsx(ContentBlockComponent, { block: block, children: ticks.map(({ type, base }) => {
-            const x = (reversed ? end - base : base - start) / bpPerPx;
-            return (_jsx("div", { className: type === 'major' || type === 'labeledMajor'
-                    ? majorTickClass
-                    : minorTickClass, style: { left: x } }, base));
-        }) }));
-}
-const RenderedVerticalGuides = observer(function RenderedVerticalGuides({ model, }) {
-    const { staticBlocks, bpPerPx } = model;
-    return (_jsx(_Fragment, { children: staticBlocks.map((block, index) => {
-            const k = `${block.key}-${index}`;
-            if (block.type === 'ContentBlock') {
-                return _jsx(RenderedBlockLines, { block: block, bpPerPx: bpPerPx }, k);
-            }
-            else if (block.type === 'ElidedBlock') {
-                return _jsx(ElidedBlockComponent, { width: block.widthPx }, k);
-            }
-            else if (block.type === 'InterRegionPaddingBlock') {
-                return (_jsx(InterRegionPaddingBlockComponent, { width: block.widthPx, boundary: block.variant === 'boundary' }, k));
-            }
-            return null;
-        }) }));
-});
+// Background gridline ticks; render UNDER track content. Tick marks collapse
+// into two <path>s (minor + major) rather than one div each: zoom rebuilds two
+// `d` strings and patches two attributes instead of reconciling ~150 nodes per
+// frame. Vector stays crisp at any DPR with no canvas pixel-buffer size cap;
+// +0.5 centers the 1px stroke on a pixel column to match the old divs; lines
+// run to y=100000 and are clipped by the svg box, so we never measure height.
 const Gridlines = observer(function Gridlines({ model, offset = 0, }) {
     const { classes } = useStyles();
-    const { staticBlocks, scaleFactor, offsetPx } = model;
-    const offsetLeft = staticBlocks.offsetPx - offsetPx;
-    return (_jsx("div", { className: classes.verticalGuidesZoomContainer, style: {
-            transform: scaleFactor !== 1 ? `scaleX(${scaleFactor})` : undefined,
-        }, children: _jsx("div", { className: classes.verticalGuidesContainer, style: {
-                left: offsetLeft - offset,
-                width: staticBlocks.totalWidthPx,
-            }, children: _jsx(RenderedVerticalGuides, { model: model }) }) }));
+    const { gridlineTicks } = model;
+    let minorD = '';
+    let majorD = '';
+    for (const { x, major } of gridlineTicks) {
+        const seg = `M${x + 0.5} 0V100000`;
+        if (major) {
+            majorD += seg;
+        }
+        else {
+            minorD += seg;
+        }
+    }
+    return (_jsx(ZoomTransform, { model: model, offset: offset, children: _jsxs("svg", { className: classes.absoluteFill, children: [_jsx("path", { d: minorD, className: classes.minorLine, strokeWidth: 1 }), _jsx("path", { d: majorD, className: classes.majorLine, strokeWidth: 1 })] }) }));
 });
 export default Gridlines;

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

@@ -1,5 +1,5 @@
 import type { LinearGenomeViewModel } from '../index.ts';
 declare const LinearGenomeViewHeader: ({ model, }: {
     model: LinearGenomeViewModel;
-}) => import("react/jsx-runtime").JSX.Element | null;
+}) => import("react").JSX.Element | null;
 export default LinearGenomeViewHeader;