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

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, signal, statusCallback) => {
+        if (regions.length === 0) {
+            throw new Error('Selected region is out of bounds');
+        }
+        const chunks = await fetchSequence(model, regions, {
+            signal,
+            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;

package/esm/LinearGenomeView/components/Header.js

@@ -1,31 +1,57 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton';
+import ScrollZoomToggle from '@jbrowse/core/ui/ScrollZoomToggle';
+import { getSession } from '@jbrowse/core/util';
 import { makeStyles } from '@jbrowse/core/util/tss-react';
-import { FormGroup } from '@mui/material';
+import useMeasure from '@jbrowse/core/util/useMeasure';
+import MenuIcon from '@mui/icons-material/Menu';
+import { useMediaQuery } from '@mui/material';
 import { observer } from 'mobx-react';
-import HeaderPanControls from "./HeaderPanControls.js";
-import HeaderRegionWidth from "./HeaderRegionWidth.js";
-import HeaderTrackSelectorButton from "./HeaderTrackSelectorButton.js";
-import HeaderZoomControls from "./HeaderZoomControls.js";
-import OverviewScalebar from "./OverviewScalebar.js";
-import SearchBox from "./SearchBox.js";
-import { HEADER_BAR_HEIGHT } from "../consts.js";
+import { HEADER_BAR_HEIGHT } from '../consts.js';
+import { headerFit } from '../headerFit.js';
+import HeaderClearHighlightButton, { highlightedDisplays, } from './HeaderClearHighlightButton.js';
+import HeaderPanControls from './HeaderPanControls.js';
+import HeaderRegionWidth from './HeaderRegionWidth.js';
+import HeaderTrackSelectorButton from './HeaderTrackSelectorButton.js';
+import HeaderZoomControls from './HeaderZoomControls.js';
+import OverviewScalebar from './OverviewScalebar.js';
+import SearchBox, { searchBoxWidth } from './SearchBox.js';
 const useStyles = makeStyles()({
     headerBar: {
         display: 'flex',
-        height: HEADER_BAR_HEIGHT,
-    },
-    headerForm: {
-        flexWrap: 'nowrap',
-        marginRight: 7,
+        alignItems: 'center',
+        gap: 4,
+        // a floor, not a height. The constant was written onto this row by #4237 so
+        // the sticky offsets summing it would be true, and the row's own content
+        // reaches it at a 28px root font — the search box measures 48.13 there —
+        // after which a fixed height holds the row smaller than what is in it
+        minHeight: HEADER_BAR_HEIGHT,
     },
     spacer: {
         flexGrow: 1,
     },
 });
-const Controls = function ({ model }) {
+const Controls = observer(function Controls({ model, }) {
     const { classes } = useStyles();
-    return (_jsxs("div", { className: classes.headerBar, children: [_jsx(HeaderTrackSelectorButton, { model: model }), _jsx("div", { className: classes.spacer }), _jsxs(FormGroup, { row: true, className: classes.headerForm, children: [_jsx(HeaderPanControls, { model: model }), _jsx(SearchBox, { model: model })] }), _jsx(HeaderRegionWidth, { model: model }), _jsx(HeaderZoomControls, { model: model }), _jsx("div", { className: classes.spacer })] }));
-};
+    // the row itself, not `model.width`: what the pieces below have to fit into
+    // is this box, and the offset between it and the view's measured width
+    // differs between the app's view container, an embedded host and a synteny
+    // row
+    const [ref, { width }] = useMeasure('width');
+    const highlighted = highlightedDisplays(model);
+    const viewMenu = getSession(model).viewTitleBars === false;
+    const touch = useMediaQuery('(pointer: coarse)', {
+        noSsr: true,
+    });
+    const fit = headerFit({
+        width,
+        searchBoxPx: searchBoxWidth(model.coarseVisibleLocStrings),
+        clearHighlight: highlighted.length > 0,
+        viewMenu,
+        touch,
+    });
+    return (_jsxs("div", { className: classes.headerBar, ref: ref, children: [viewMenu ? (_jsx(CascadingMenuButton, { menuItems: () => model.menuItems(), "data-testid": "view_menu_icon", children: _jsx(MenuIcon, {}) })) : null, _jsx(HeaderTrackSelectorButton, { model: model, indent: fit.trackSelectorIndent }), touch ? null : (_jsx(ScrollZoomToggle, { model: model, iconOnly: !fit.scrollZoomLabel })), _jsx("div", { className: classes.spacer }), touch ? null : (_jsx(HeaderPanControls, { model: model, compact: !fit.panButtonSpacing })), _jsx(SearchBox, { model: model }), _jsx(HeaderClearHighlightButton, { highlighted: highlighted }), fit.regionWidth ? _jsx(HeaderRegionWidth, { model: model }) : null, _jsx(HeaderZoomControls, { model: model, showSlider: fit.zoomSlider }), _jsx("div", { className: classes.spacer })] }));
+});
 const LinearGenomeViewHeader = observer(function LinearGenomeViewHeader({ model, }) {
     const { hideHeader, hideHeaderOverview } = model;
     return !hideHeader ? (hideHeaderOverview ? (_jsx(Controls, { model: model })) : (_jsx(OverviewScalebar, { model: model, children: _jsx(Controls, { model: model }) }))) : null;

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

@@ -0,0 +1,21 @@
+import type { LinearGenomeViewModel } from '../index.ts';
+interface FeatureHighlightCapableDisplay {
+    featureHighlights: {
+        length: number;
+    };
+    clearFeatureHighlights: () => void;
+}
+/**
+ * Every display in the view with an active feature highlight — from a text
+ * search or the right-click "Highlight feature" menu, which land in the same
+ * set.
+ *
+ * The header reads this rather than leaving it to the button below, because
+ * whether the button is in the row changes how much of the row is left for
+ * everything else (see `headerFit`).
+ */
+export declare function highlightedDisplays(model: LinearGenomeViewModel): FeatureHighlightCapableDisplay[];
+declare const HeaderClearHighlightButton: ({ highlighted, }: {
+    highlighted: FeatureHighlightCapableDisplay[];
+}) => import("react").JSX.Element | null;
+export default HeaderClearHighlightButton;

package/esm/LinearGenomeView/components/HeaderClearHighlightButton.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import HighlightOffIcon from '@mui/icons-material/HighlightOff';
+import { IconButton } from '@mui/material';
+import { observer } from 'mobx-react';
+function isFeatureHighlightCapable(d) {
+    return (typeof d === 'object' &&
+        d !== null &&
+        'featureHighlights' in d &&
+        'clearFeatureHighlights' in d &&
+        typeof d.clearFeatureHighlights === 'function');
+}
+/**
+ * Every display in the view with an active feature highlight — from a text
+ * search or the right-click "Highlight feature" menu, which land in the same
+ * set.
+ *
+ * The header reads this rather than leaving it to the button below, because
+ * whether the button is in the row changes how much of the row is left for
+ * everything else (see `headerFit`).
+ */
+export function highlightedDisplays(model) {
+    return model.tracks
+        .flatMap(t => t.displays)
+        .filter(isFeatureHighlightCapable)
+        .filter(d => d.featureHighlights.length > 0);
+}
+// Clears every feature highlight in the view. Shown only while there is one.
+const HeaderClearHighlightButton = observer(function HeaderClearHighlightButton({ highlighted, }) {
+    return highlighted.length > 0 ? (_jsx(IconButton, { "data-testid": "clear_search_highlight", title: "Clear feature highlights", onClick: () => {
+            for (const d of highlighted) {
+                d.clearFeatureHighlights();
+            }
+        }, children: _jsx(HighlightOffIcon, {}) })) : null;
+});
+export default HeaderClearHighlightButton;

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

@@ -1,6 +1,7 @@
 import type { LinearGenomeViewModel } from '../index.ts';
 type LGV = LinearGenomeViewModel;
-export default function HeaderPanControls({ model }: {
+export default function HeaderPanControls({ model, compact, }: {
     model: LGV;
-}): import("react/jsx-runtime").JSX.Element;
+    compact?: boolean;
+}): import("react").JSX.Element;
 export {};

package/esm/LinearGenomeView/components/HeaderPanControls.js

@@ -1,21 +1,31 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { alpha } from '@jbrowse/core/ui/palette';
 import { makeStyles } from '@jbrowse/core/util/tss-react';
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
-import { Button, alpha } from '@mui/material';
-import { SPACING } from "../consts.js";
+import { Button } from '@mui/material';
+import { SPACING, WIDGET_HEIGHT } from '../consts.js';
 const useStyles = makeStyles()(theme => ({
     panButton: {
         background: alpha(theme.palette.background.paper, 0.8),
-        color: theme.palette.text.primary,
+        height: WIDGET_HEIGHT,
         margin: SPACING,
     },
+    // the arrows are the whole button, so MUI's 64px text-button minimum and the
+    // gap either side of it are pure air — the pair gives up 80px of it when the
+    // header can't hold everything
+    compact: {
+        margin: 1,
+        minWidth: 0,
+        padding: theme.spacing(0, 0.5),
+    },
 }));
-export default function HeaderPanControls({ model }) {
-    const { classes } = useStyles();
-    return (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "outlined", className: classes.panButton, onClick: () => {
+export default function HeaderPanControls({ model, compact, }) {
+    const { classes, cx } = useStyles();
+    const className = cx(classes.panButton, compact && classes.compact);
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "outlined", "aria-label": "Pan left", className: className, onClick: () => {
                     model.slide(-0.9);
-                }, children: _jsx(ArrowBackIcon, {}) }), _jsx(Button, { variant: "outlined", className: classes.panButton, onClick: () => {
+                }, children: _jsx(ArrowBackIcon, {}) }), _jsx(Button, { variant: "outlined", "aria-label": "Pan right", className: className, onClick: () => {
                     model.slide(0.9);
                 }, children: _jsx(ArrowForwardIcon, {}) })] }));
 }

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

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

package/esm/LinearGenomeView/components/HeaderRegionWidth.js

@@ -2,17 +2,20 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { makeStyles } from '@jbrowse/core/util/tss-react';
 import { Typography } from '@mui/material';
 import { observer } from 'mobx-react';
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
     bp: {
         display: 'flex',
         alignItems: 'center',
-        marginLeft: 5,
-        cursor: 'pointer',
+        // reserve a fixed width so the varying-length bp string (e.g. 19.5Mbp vs
+        // 950Kbp) does not shift the adjacent zoom controls as the user zooms/pans
+        minWidth: 50,
+        // equal-width digits so the number does not reflow as it changes
+        fontVariantNumeric: 'tabular-nums',
+        color: theme.palette.text.secondary,
     },
-});
+}));
 const HeaderRegionWidth = observer(function HeaderRegionWidth({ model, }) {
     const { classes } = useStyles();
-    const { effectiveTotalBpDisplayStr } = model;
-    return (_jsx(Typography, { variant: "body2", color: "textSecondary", className: classes.bp, children: effectiveTotalBpDisplayStr }));
+    return (_jsx(Typography, { variant: "body2", className: classes.bp, "data-testid": "header_region_width", children: model.effectiveTotalBpDisplayStr }));
 });
 export default HeaderRegionWidth;

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

@@ -0,0 +1,6 @@
+import type { LinearGenomeViewModel } from '../model.ts';
+declare const HeaderSearchBoxRow: ({ views, sideBySide, }: {
+    views: LinearGenomeViewModel[];
+    sideBySide: boolean;
+}) => import("react").JSX.Element;
+export default HeaderSearchBoxRow;

package/esm/LinearGenomeView/components/HeaderSearchBoxRow.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx, makeStyles } from '@jbrowse/core/util/tss-react';
+import { observer } from 'mobx-react';
+import HeaderSearchBoxes from './HeaderSearchBoxes.js';
+const useStyles = makeStyles()({
+    searchBoxContainer: {
+        display: 'flex',
+        // scroll rather than clip when many rows' search boxes exceed the bar width
+        overflowX: 'auto',
+        minWidth: 0,
+        gap: 12,
+    },
+    // the only thing the orientation changes: side-by-side is the container as
+    // declared above, since this span is a flex item of the header bar either way
+    vertical: {
+        flexDirection: 'column',
+    },
+});
+// The whole search-box strip of a header that stacks several linear genome
+// views: one box per row, laid out side by side or in a column. `sideBySide` is
+// the caller's, because where the choice is remembered differs — each container
+// keys its own `useSearchBoxPrefs` under its own storage prefix.
+const HeaderSearchBoxRow = observer(function HeaderSearchBoxRow({ views, sideBySide, }) {
+    const { classes } = useStyles();
+    return (_jsx("span", { className: cx(classes.searchBoxContainer, !sideBySide && classes.vertical), children: views.map(view => (_jsx(HeaderSearchBoxes, { view: view }, view.id))) }));
+});
+export default HeaderSearchBoxRow;

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

@@ -0,0 +1,5 @@
+import type { LinearGenomeViewModel } from '../model.ts';
+declare const HeaderSearchBoxes: ({ view, }: {
+    view: LinearGenomeViewModel;
+}) => import("react").JSX.Element;
+export default HeaderSearchBoxes;

package/esm/LinearGenomeView/components/HeaderSearchBoxes.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getBpDisplayStr } from '@jbrowse/core/util';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
+import { Typography } from '@mui/material';
+import { observer } from 'mobx-react';
+import SearchBox from './SearchBox.js';
+const useStyles = makeStyles()(theme => ({
+    bp: {
+        display: 'flex',
+        alignItems: 'center',
+    },
+    searchBox: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: theme.spacing(0.5),
+    },
+}));
+// One row's locate control in a header that stacks several linear genome views:
+// the compact search box, then the assembly name and the span on screen. The
+// comparative view and the breakpoint split view each draw one per row, and each
+// carried a character-identical copy of it — the same plugin-to-plugin import
+// (`SearchBox`) both were already making, one file further down.
+const HeaderSearchBoxes = observer(function HeaderSearchBoxes({ view, }) {
+    const { classes } = useStyles();
+    const { assemblyDisplayNames, coarseTotalBp } = view;
+    return (_jsxs("span", { className: classes.searchBox, children: [_jsx(SearchBox, { model: view, showHelp: false, maxWidth: 250, minWidth: 100, style: { margin: 0 } }), _jsxs(Typography, { variant: "body2", color: "text.secondary", className: classes.bp, children: [assemblyDisplayNames.join(','), " ", getBpDisplayStr(coarseTotalBp)] })] }));
+});
+export default HeaderSearchBoxes;

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

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