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

package/esm/LinearGenomeView/components/ScalebarRefNameLabels.js

@@ -5,7 +5,8 @@ import { assembleLocString, assembleLocStrings } from '@jbrowse/core/util';
 import { copyText } from '@jbrowse/core/util/copyText';
 import { makeStyles } from '@jbrowse/core/util/tss-react';
 import { observer } from 'mobx-react';
-import { REF_NAME_LABEL_FONT_SIZE, regionMoveActions, withRegionMoved, withRegionRemoved, withRegionReversed, } from '../util.js';
+import { REF_NAME_LABEL_FONT_SIZE, regionMoveActions, regionRunBounds, withRegionMoved, withRegionRemoved, withRegionReversed, withRegionsKept, } from '../util.js';
+import { scalebarRefLabelProps } from './util.js';
 const useStyles = makeStyles()(theme => ({
     refLabel: {
         // the width the fit test in getScalebarRefNameLabels measures against
@@ -31,65 +32,45 @@ const useStyles = makeStyles()(theme => ({
         overflow: 'clip',
         whiteSpace: 'nowrap',
     },
-    // only a refName label opens a menu. The assembly-name chip beside it is a
-    // caption, and wearing the pointer and the hover tint made it look like the
-    // one thing on the row that does nothing when clicked
+    // refName labels only: the caption chip opens no menu
     clickable: {
         cursor: 'pointer',
         '&:hover': {
-            // action.hover is a mode-aware translucent overlay; the old hardcoded
-            // grey[300] stayed light in dark mode, washing out the light label text
             background: theme.palette.action.hover,
         },
     },
-    prefixLabel: {
+    caption: {
         zIndex: 100,
     },
 }));
 const ScalebarRefNameLabels = observer(function ScalebarRefNameLabels({ model, }) {
     const { classes, cx } = useStyles();
     const [menuState, setMenuState] = useState();
-    // `model.scalebarRefNameLabels`, not a getScalebarRefNameLabels call of its
-    // own: a host drawing its own region names reads the same getter, so the
-    // sticky/dedup/fit rules can't be one thing here and another there. The SVG
-    // export still calls the helper directly, deliberately and with no prefix.
     const { labels, caption } = model.scalebarRefNameLabels;
     return (_jsxs(_Fragment, { children: [labels.map((label, i) => (_jsx(RefLabel
             // eslint-disable-next-line @eslint-react/no-array-index-key -- position IS the identity here; keying by the run makes the list churn on zoom
-            , { model: model, label: label, onOpenMenu: state => {
-                    setMenuState(state);
-                } }, i))), caption === undefined ? null : (_jsx("span", { className: cx(classes.prefixLabel, classes.refLabel), "data-testid": "refLabel-prefix", children: caption })), menuState ? (_jsx(RefNameMenu, { model: model, menuState: menuState, onClose: () => {
+            , { model: model, label: label, onOpenMenu: setMenuState }, i))), caption === undefined ? null : (_jsx("span", { className: cx(classes.caption, classes.refLabel), "data-testid": "refLabel-prefix", children: caption })), menuState ? (_jsx(RefNameMenu, { model: model, menuState: menuState, onClose: () => {
                     model.setIsScalebarRefNameMenuOpen(false);
                     setMenuState(undefined);
                 } })) : null] }));
 });
-// One refName label. Not an observer: `label` is already plain data computed by
-// the parent, and `model` is only used to fire actions. mouseDown flags the
-// click as starting on a label so the scalebar's rubberband hands the click to
-// this label's own onClick instead of opening the range menu.
-function RefLabel({ model, label, onOpenMenu, }) {
+// The attribute tells the scalebar's rubberband to leave a click here to this
+// label's onClick.
+const RefLabel = observer(function RefLabel({ model, label, onOpenMenu, }) {
     const { classes, cx } = useStyles();
-    const { refName, displayedRegionIndex, lastDisplayedRegionIndex, transform, maxWidth, paddingLeft, text, } = label;
+    const { refName, transform, maxWidth, paddingLeft, text } = label;
     return (_jsx("span", { className: cx(classes.refLabel, classes.clickable), style: {
             transform: `translateX(${transform}px)`,
             paddingLeft,
             maxWidth,
-        }, "data-testid": `refLabel-${refName}`, onMouseDown: () => {
-            model.setScalebarRefNameClickPending(true);
-        }, onClick: e => {
-            model.setScalebarRefNameClickPending(false);
+        }, "data-testid": `refLabel-${refName}`, ...scalebarRefLabelProps, onClick: e => {
             model.setIsScalebarRefNameMenuOpen(true);
-            onOpenMenu({
-                anchorEl: e.currentTarget,
-                refName,
-                displayedRegionIndex,
-                lastDisplayedRegionIndex,
-            });
+            onOpenMenu({ anchorEl: e.currentTarget, label });
         }, children: text }));
-}
+});
 const RefNameMenu = observer(function RefNameMenu({ model, menuState, onClose, }) {
     const { displayedRegions } = model;
-    const { refName, displayedRegionIndex: idx, lastDisplayedRegionIndex: lastIdx, } = menuState;
+    const { refName, displayedRegionIndex: idx, lastDisplayedRegionIndex: lastIdx, } = menuState.label;
     const numRegions = displayedRegions.length;
     const labeled = displayedRegions.slice(idx, lastIdx + 1);
     // A label naming several regions is the collapsed-intron case: adjacent
@@ -104,6 +85,16 @@ const RefNameMenu = observer(function RefNameMenu({ model, menuState, onClose, }
     const locString = oneRegion
         ? assembleLocString(displayedRegions[idx])
         : assembleLocStrings(labeled);
+    // The region this label's blocks were cut out of. Taken over the WHOLE run
+    // rather than `labeled`, which the viewport clips: a collapsed-introns view
+    // zoomed into two exons would otherwise offer a span that is not the gene's.
+    const { first: runFirst, last: runLast } = regionRunBounds(displayedRegions, idx, lastIdx);
+    const run = displayedRegions.slice(runFirst, runLast + 1);
+    const wholeSpan = {
+        ...run[0],
+        start: Math.min(...run.map(r => r.start)),
+        end: Math.max(...run.map(r => r.end)),
+    };
     return (_jsx(Menu, { anchorEl: menuState.anchorEl, open: true, onClose: onClose, onMenuItemClick: callback => {
             callback();
             onClose();
@@ -126,7 +117,31 @@ const RefNameMenu = observer(function RefNameMenu({ model, menuState, onClose, }
                             ? 'Show only this region'
                             : `Show only ${refName}`,
                         onClick: () => {
-                            model.setDisplayedRegions(labeled);
+                            model.editDisplayedRegions(withRegionsKept(displayedRegions, idx, lastIdx));
+                        },
+                    },
+                ]
+                : []),
+            ...(runLast > runFirst
+                ? [
+                    {
+                        // Names its subject the way the two rows above it do; the span
+                        // it lands on is not spelled into the label, which would move
+                        // under the reader as they navigate.
+                        label: `Show the whole span of ${refName}`,
+                        // Focused rather than centre-kept: the rejoined region is one
+                        // the old viewport never saw, so there is no centre to hold,
+                        // and showing the span is the whole point of the row.
+                        onClick: () => {
+                            model.setDisplayedRegions([
+                                ...displayedRegions.slice(0, runFirst),
+                                wholeSpan,
+                                ...displayedRegions.slice(runLast + 1),
+                            ]);
+                            model.moveTo({ index: runFirst, offset: 0 }, {
+                                index: runFirst,
+                                offset: wholeSpan.end - wholeSpan.start,
+                            });
                         },
                     },
                 ]
@@ -156,13 +171,13 @@ const RefNameMenu = observer(function RefNameMenu({ model, menuState, onClose, }
                             {
                                 label: 'Reverse region',
                                 onClick: () => {
-                                    model.setDisplayedRegions(withRegionReversed(displayedRegions, idx));
+                                    model.editDisplayedRegions(withRegionReversed(displayedRegions, idx));
                                 },
                             },
                             ...regionMoveActions(idx, numRegions).map(({ label, to }) => ({
                                 label,
                                 onClick: () => {
-                                    model.setDisplayedRegions(withRegionMoved(displayedRegions, idx, to));
+                                    model.editDisplayedRegions(withRegionMoved(displayedRegions, idx, to));
                                 },
                             })),
                             ...(numRegions > 1
@@ -170,7 +185,7 @@ const RefNameMenu = observer(function RefNameMenu({ model, menuState, onClose, }
                                     {
                                         label: 'Remove this region from view',
                                         onClick: () => {
-                                            model.setDisplayedRegions(withRegionRemoved(displayedRegions, idx));
+                                            model.editDisplayedRegions(withRegionRemoved(displayedRegions, idx));
                                         },
                                     },
                                 ]

package/esm/LinearGenomeView/components/SearchBox.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { RefNameAutocomplete, RefNameAutocompleteEndAdornment, adornmentReservePx, getInputWidth, useRecentLocations, } from '@jbrowse/core/ui';
+import { usePalette } from '@jbrowse/core/ui/PaletteContext';
+import { alpha } from '@jbrowse/core/ui/palette';
 import { getSession } from '@jbrowse/core/util';
-import { alpha, useTheme } from '@mui/material';
 import { observer } from 'mobx-react';
 import { fetchResults, navigateToSelectedOption, notifySearchFailure, } from '../../searchUtils.js';
 import { SPACING, WIDGET_HEIGHT } from '../consts.js';
@@ -31,17 +32,16 @@ export function searchBoxWidth(value) {
         2 * SPACING);
 }
 const SearchBox = observer(function SearchBox({ model, showHelp = true, minWidth = MIN_WIDTH, maxWidth = MAX_WIDTH, style = defaultStyle, }) {
-    const theme = useTheme();
+    const palette = usePalette();
     const session = getSession(model);
-    const { textSearchManager, assemblyManager } = session;
     const { assemblyNames } = model;
     const assemblyName = assemblyNames[0];
-    const assembly = assemblyManager.get(assemblyName);
     const { recentLocations, addRecentLocation, clearRecentLocations } = useRecentLocations(assemblyName);
     async function navigate(option) {
         try {
-            await navigateToSelectedOption({ model, assemblyName, option });
-            addRecentLocation(recentLocationOf(option));
+            if (await navigateToSelectedOption({ model, assemblyName, option })) {
+                addRecentLocation(recentLocationOf(option));
+            }
         }
         catch (e) {
             notifySearchFailure(session, e);
@@ -50,25 +50,19 @@ const SearchBox = observer(function SearchBox({ model, showHelp = true, minWidth
     const recentMenuItems = recentLocationsMenu({
         recentLocations,
         onNavigate: option => {
-            navigate(option).catch(() => { });
+            void navigate(option);
         },
         onClear: clearRecentLocations,
     });
     return (_jsx(RefNameAutocomplete, { onSelect: option => {
-            navigate(option).catch(() => { });
-        }, assemblyName: assemblyName, fetchResults: (queryString, stopToken) => fetchResults({
-            queryString,
-            assemblyName,
-            textSearchManager,
-            assembly,
-            stopToken,
-        }), session: session, value: model.coarseVisibleLocStrings, minWidth: minWidth, maxWidth: maxWidth, adornmentWidth: adornmentReservePx({
+            void navigate(option);
+        }, assemblyName: assemblyName, fetchResults: (queryString, signal) => fetchResults({ session, queryString, assemblyName, signal }), session: session, value: model.coarseVisibleLocStrings, minWidth: minWidth, maxWidth: maxWidth, adornmentWidth: adornmentReservePx({
             showHelp,
             menuItemCount: recentMenuItems.length,
         }), style: style, endAdornment: _jsx(RefNameAutocompleteEndAdornment, { showHelp: showHelp, menuItems: recentMenuItems }), inputStyle: {
             padding: 0,
             height: WIDGET_HEIGHT,
-            background: alpha(theme.palette.background.paper, 0.8),
+            background: alpha(palette.background.paper, 0.8),
         } }));
 });
 export default SearchBox;

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

@@ -1,9 +1,10 @@
 import type { ReactNode } from 'react';
-export default function SearchPanelForm({ onSubmit, handleClose, submitDisabled, submitText, actions, children, }: {
+declare const SearchPanelForm: ({ onSubmit, handleClose, submitDisabled, submitText, actions, children, }: {
     onSubmit: () => void;
     handleClose: () => void;
     submitDisabled: boolean;
     submitText?: string;
     actions?: ReactNode;
     children: ReactNode;
-}): import("react").JSX.Element;
+}) => import("react").JSX.Element;
+export default SearchPanelForm;

package/esm/LinearGenomeView/components/SearchPanelForm.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { SubmitForm } from '@jbrowse/core/ui';
 import { makeStyles } from '@jbrowse/core/util/tss-react';
+import { observer } from 'mobx-react';
 const useStyles = makeStyles()({
     dialogContent: {
         width: '34em',
@@ -12,7 +13,8 @@ const useStyles = makeStyles()({
 // The chrome shared by the sequence-search mode panels: the fixed-width column
 // their fields lay out in, plus SubmitForm's Cancel/Submit footer. Each panel
 // still owns its own fields and its own submit, so this is only the frame.
-export default function SearchPanelForm({ onSubmit, handleClose, submitDisabled, submitText, actions, children, }) {
+const SearchPanelForm = observer(function SearchPanelForm({ onSubmit, handleClose, submitDisabled, submitText, actions, children, }) {
     const { classes } = useStyles();
     return (_jsx(SubmitForm, { contentClassName: classes.dialogContent, onSubmit: onSubmit, onCancel: handleClose, submitDisabled: submitDisabled, submitText: submitText, actions: actions, children: children }));
-}
+});
+export default SearchPanelForm;

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

@@ -1,9 +1,5 @@
-import type { LinearGenomeViewModel } from '../../index.ts';
-import type BaseResult from '@jbrowse/core/TextSearch/BaseResults';
-export default function SearchResultsDialog({ model, assemblyName, searchQuery, searchResults, handleClose, }: {
+import type { LinearGenomeViewModel } from '../index.ts';
+declare const SearchResultsDialog: ({ model, }: {
     model: LinearGenomeViewModel;
-    assemblyName: string;
-    searchQuery: string;
-    searchResults: BaseResult[];
-    handleClose: () => void;
-}): import("react").JSX.Element;
+}) => import("react").JSX.Element | null;
+export default SearchResultsDialog;

package/esm/LinearGenomeView/components/SearchResultsDialog.js

@@ -1,7 +1,10 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { InfoDialog } from '@jbrowse/core/ui';
 import { Typography } from '@mui/material';
+import { observer } from 'mobx-react';
 import SearchResultsTable from './SearchResultsTable.js';
-export default function SearchResultsDialog({ model, assemblyName, searchQuery, searchResults, handleClose, }) {
-    return (_jsx(InfoDialog, { open: true, maxWidth: "xl", onClose: handleClose, title: "Search results", children: !searchResults.length ? (_jsxs(Typography, { children: ["No results found for ", _jsx("b", { children: searchQuery })] })) : (_jsxs(_Fragment, { children: [_jsxs(Typography, { children: ["Showing results for ", _jsx("b", { children: searchQuery })] }), _jsx(SearchResultsTable, { model: model, handleClose: handleClose, assemblyName: assemblyName, searchResults: searchResults })] })) }));
-}
+const SearchResultsDialog = observer(function SearchResultsDialog({ model, }) {
+    const { searchPicker } = model;
+    return searchPicker ? (_jsxs(InfoDialog, { open: true, maxWidth: "xl", onClose: model.closeSearchPicker, title: "Search results", children: [_jsxs(Typography, { children: [searchPicker.rows.length, " matches for ", _jsx("b", { children: searchPicker.query })] }), _jsx(SearchResultsTable, { picker: searchPicker })] })) : null;
+});
+export default SearchResultsDialog;

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

@@ -1,9 +1,6 @@
-import type { LinearGenomeViewModel } from '../../index.ts';
-import type BaseResult from '@jbrowse/core/TextSearch/BaseResults';
-declare const SearchResultsTable: ({ searchResults, assemblyName, model, handleClose, }: {
-    searchResults: BaseResult[];
-    assemblyName: string;
-    model: LinearGenomeViewModel;
-    handleClose: () => void;
+import type { SearchPickerRow, SearchPickerState } from '../model.ts';
+export declare function filterRows(rows: SearchPickerRow[], text: string): SearchPickerRow[];
+declare const SearchResultsTable: ({ picker, }: {
+    picker: SearchPickerState;
 }) => import("react").JSX.Element;
 export default SearchResultsTable;

package/esm/LinearGenomeView/components/SearchResultsTable.js

@@ -1,56 +1,28 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { readConfObject } from '@jbrowse/core/configuration';
-import { assembleLocString, getSession, parseLocString, } from '@jbrowse/core/util';
-import { Button, Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, } from '@mui/material';
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { SanitizedHTML } from '@jbrowse/core/ui';
+import { Button, Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TextField, } from '@mui/material';
 import { observer } from 'mobx-react';
-import { isOpenInView, navToOption } from '../../searchUtils.js';
-const SearchResultsTable = observer(function SearchResultsTable({ searchResults, assemblyName, model, handleClose, }) {
-    const session = getSession(model);
-    const { assemblyManager } = session;
-    const assembly = assemblyManager.get(assemblyName);
-    function getTrackName(trackId) {
-        const conf = trackId !== undefined ? session.getTrackById(trackId) : undefined;
-        return conf ? readConfObject(conf, 'name') : '';
-    }
-    // the raw locString, prettified to the assembly's canonical refName when the
-    // assembly is loaded and the string parses. A result the assembly can't
-    // resolve is still listed as-is rather than blowing up the dialog: the Go
-    // button navigates through navToOption, which reports its own failure
-    function formatLocation(locString) {
-        if (assembly && locString) {
-            try {
-                const loc = parseLocString(locString, refName => assembly.isValidRefName(refName));
-                return assembleLocString({
-                    ...loc,
-                    refName: assembly.getCanonicalRefName2(loc.refName),
-                });
-            }
-            catch (e) {
-                console.warn('failed to parse location string', locString, e);
-                return locString;
-            }
-        }
-        else {
-            return locString;
-        }
-    }
-    // A hit in a track that is already on screen is usually the one meant, so it
-    // is listed first rather than given a control that says so. sort is stable,
-    // so everything else keeps the ranked order it arrived in.
-    const ordered = [...searchResults].sort((a, b) => Number(isOpenInView(b, model)) - Number(isOpenInView(a, model)));
-    return (_jsx(TableContainer, { component: Paper, children: _jsxs(Table, { children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableCell, { children: "Name" }), _jsx(TableCell, { align: "right", children: "Location" }), _jsx(TableCell, { align: "right", children: "Track" }), _jsx(TableCell, { align: "right" })] }) }), _jsx(TableBody, { children: ordered.map(result => (_jsxs(TableRow, { children: [_jsx(TableCell, { component: "th", scope: "row", children: result.getLabel() }), _jsx(TableCell, { align: "right", children: formatLocation(result.getLocation()) }), _jsx(TableCell, { align: "right", children: getTrackName(result.getTrackId()) || 'N/A' }), _jsx(TableCell, { align: "right", children: _jsx(Button, { onClick: async () => {
-                                        try {
-                                            await navToOption({
-                                                option: result,
-                                                model,
-                                                assemblyName,
-                                            });
-                                        }
-                                        catch (e) {
-                                            console.error(e);
-                                            session.notifyError(`${e}`, e);
-                                        }
-                                        handleClose();
-                                    }, color: "primary", variant: "contained", children: "Go" }) })] }, result.getId()))) })] }) }));
+// past this many rows a list is easier to narrow than to read; gene names
+// sort too irregularly (scn1ab, HOXA10-AS) for an order to stand in for it
+const FILTER_AT = 8;
+export function filterRows(rows, text) {
+    const needle = text.trim().toLowerCase();
+    return needle
+        ? rows.filter(row => [row.label, row.location, row.trackName].some(field => field.toLowerCase().includes(needle)))
+        : rows;
+}
+const SearchResultsTable = observer(function SearchResultsTable({ picker, }) {
+    const [filter, setFilter] = useState('');
+    const rows = filterRows(picker.rows, filter);
+    return (_jsxs(_Fragment, { children: [picker.rows.length > FILTER_AT ? (_jsx(TextField, { autoFocus: true, fullWidth: true, size: "small", margin: "dense", placeholder: "Filter by name, location or track", slotProps: { htmlInput: { 'aria-label': 'Filter search results' } }, value: filter, onChange: event => {
+                    setFilter(event.target.value);
+                }, onKeyDown: event => {
+                    if (event.key === 'Enter' && rows.length === 1) {
+                        void picker.pick(rows[0].id);
+                    }
+                }, helperText: filter ? `${rows.length} of ${picker.rows.length}` : undefined })) : null, _jsx(TableContainer, { component: Paper, children: _jsxs(Table, { children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableCell, { children: "Name" }), _jsx(TableCell, { align: "right", children: "Location" }), _jsx(TableCell, { align: "right", children: "Track" }), _jsx(TableCell, { align: "right" })] }) }), _jsx(TableBody, { children: rows.map(row => (_jsxs(TableRow, { children: [_jsx(TableCell, { component: "th", scope: "row", children: row.label }), _jsx(TableCell, { align: "right", children: row.location }), _jsx(TableCell, { align: "right", children: _jsx(SanitizedHTML, { html: row.trackName || 'N/A' }) }), _jsx(TableCell, { align: "right", children: _jsx(Button, { onClick: () => {
+                                                void picker.pick(row.id);
+                                            }, color: "primary", variant: "contained", "aria-label": `Go to ${row.label} at ${row.location}`, children: "Go" }) })] }, row.id))) })] }) })] }));
 });
 export default SearchResultsTable;

package/esm/LinearGenomeView/components/SequenceFeatureHoverHighlight.js

@@ -15,8 +15,7 @@ function isFeatureWidgetForView(w, viewId) {
 // is owned by the display rather than by a widget — so the view's own displays
 // publish hover positions too.
 function displayHoverPosition(display) {
-    const candidate = display;
-    return candidate?.sequenceHoverPosition;
+    return display.sequenceHoverPosition;
 }
 // Draws a crosshair on the LGV at the base a connected feature-detail sequence
 // panel is hovering, so mousing over the sequence readout points at the genome.
@@ -24,7 +23,7 @@ const SequenceFeatureHoverHighlight = observer(function SequenceFeatureHoverHigh
     return (_jsxs(_Fragment, { children: [_jsx(ConnectedHoverHighlight, { model: model, getPosition: (widget, viewId) => isFeatureWidgetForView(widget, viewId)
                     ? widget.sequenceHoverPosition
                     : undefined }), model.tracks
-                .flatMap(track => track.displays)
+                .flatMap((track) => track.displays)
                 .flatMap(display => {
                 const position = displayHoverPosition(display);
                 return position

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

@@ -1,8 +1,6 @@
+import type { SequenceSearchModel } from './searchModes.ts';
 declare const SequenceSearchDialog: ({ model, handleClose, }: {
-    model: {
-        assemblyNames: string[];
-        launchTrack: (trackId: string) => Promise<unknown>;
-    };
+    model: SequenceSearchModel;
     handleClose: () => void;
 }) => import("react").JSX.Element;
 export default SequenceSearchDialog;

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

@@ -1,8 +1,9 @@
 import type { ReactNode } from 'react';
-export default function StrandCheckboxes({ searchForward, searchReverse, setSearchForward, setSearchReverse, children, }: {
+declare const StrandCheckboxes: ({ searchForward, searchReverse, setSearchForward, setSearchReverse, children, }: {
     searchForward: boolean;
     searchReverse: boolean;
     setSearchForward: (arg: boolean) => void;
     setSearchReverse: (arg: boolean) => void;
     children?: ReactNode;
-}): import("react").JSX.Element;
+}) => import("react").JSX.Element;
+export default StrandCheckboxes;

package/esm/LinearGenomeView/components/StrandCheckboxes.js

@@ -1,13 +1,15 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { LabeledCheckbox } from '@jbrowse/core/ui';
 import { FormGroup, Typography } from '@mui/material';
+import { observer } from 'mobx-react';
 // Forward/reverse strand checkboxes plus the "select at least one" guard, shared
 // by the sequence-search mode panels. Extra checkboxes for a specific panel (e.g.
 // "Case insensitive") slot in alongside via `children`.
-export default function StrandCheckboxes({ searchForward, searchReverse, setSearchForward, setSearchReverse, children, }) {
+const StrandCheckboxes = observer(function StrandCheckboxes({ searchForward, searchReverse, setSearchForward, setSearchReverse, children, }) {
     return (_jsxs(_Fragment, { children: [_jsxs(FormGroup, { row: true, children: [_jsx(LabeledCheckbox, { size: "small", checked: searchForward, onChange: val => {
                             setSearchForward(val);
                         }, label: "Forward strand" }), _jsx(LabeledCheckbox, { size: "small", checked: searchReverse, onChange: val => {
                             setSearchReverse(val);
                         }, label: "Reverse strand" }), children] }), !searchForward && !searchReverse ? (_jsx(Typography, { color: "error", variant: "body2", children: "Select at least one strand" })) : null] }));
-}
+});
+export default StrandCheckboxes;

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

@@ -1,8 +1,7 @@
-import type { LinearGenomeViewModel } from '../index.ts';
-import type { BaseTrackModel } from '@jbrowse/core/pluggableElementTypes/models';
+import type { LinearGenomeViewModel, LinearGenomeViewTrack } from '../index.ts';
 type LGV = LinearGenomeViewModel;
 declare const TrackContainer: ({ model, track, }: {
     model: LGV;
-    track: BaseTrackModel;
+    track: LinearGenomeViewTrack;
 }) => import("react").JSX.Element;
 export default TrackContainer;

package/esm/LinearGenomeView/components/TrackContainer.js

@@ -1,8 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
 import { ErrorBanner, ResizeHandle } from '@jbrowse/core/ui';
 import { ErrorBoundary } from '@jbrowse/core/ui/ErrorBoundary';
 import { cx, makeStyles } from '@jbrowse/core/util/tss-react';
 import { TrackOverlaySlot } from '@jbrowse/display-ui';
+import { isAlive } from '@jbrowse/mobx-state-tree';
 import { Paper } from '@mui/material';
 import { observer } from 'mobx-react';
 import { RESIZE_HANDLE_HEIGHT, TRACK_OUTLINE_BORDER, TRACK_TOP_GAP, } from '../consts.js';
@@ -16,8 +18,8 @@ const useStyles = makeStyles()({
     // described in TrackRenderingContainer. flow-root keeps the block formatting
     // context that `overflow: hidden` used to establish as a side effect (neither
     // `clip` nor no overflow does), so child margins still can't collapse through
-    // and shift the track — which the breakpoint split view would pick up, since
-    // its connector overlay measures trackRefs' getBoundingClientRect().top.
+    // and shift the track — which would put the pixels off the model's offset
+    // arithmetic, which the breakpoint split view draws its connectors from.
     root: {
         marginTop: TRACK_TOP_GAP,
         position: 'relative',
@@ -56,17 +58,61 @@ const useStyles = makeStyles()({
     // spends the other 4 on clearance.
     trackLabelOffset: {
         position: 'relative',
-        display: 'inline-block',
         marginBottom: 8,
     },
     trackLabelOverlap: {
         position: 'absolute',
     },
+    // in flow, so the track keeps the banner's height, and raised over the
+    // `PaddingBlocks` painted after it
+    crashBanner: {
+        position: 'relative',
+        zIndex: 1,
+    },
 });
+// Measures the in-flow label band, the distance from the Paper's content top to
+// the rendering container, into the model. Observes the Paper: it grows and
+// shrinks with the label, the label setting, and the display, and each of those
+// can move the container. Published after a requestAnimationFrame like
+// useWidthSetter, and cleared on unmount so a removed track leaves no band.
+function useTrackLabelBand(model, trackId) {
+    const [paper, setPaper] = useState(null);
+    const [container, setContainer] = useState(null);
+    useEffect(() => {
+        if (paper && container && 'ResizeObserver' in window) {
+            let token;
+            const publish = () => {
+                token = requestAnimationFrame(() => {
+                    if (isAlive(model)) {
+                        const paperRect = paper.getBoundingClientRect();
+                        const band = container.getBoundingClientRect().top -
+                            paperRect.top -
+                            paper.clientTop;
+                        model.setTrackLabelBand(trackId, band);
+                    }
+                });
+            };
+            publish();
+            const observer = new ResizeObserver(publish);
+            observer.observe(paper);
+            return () => {
+                observer.disconnect();
+                if (token !== undefined) {
+                    cancelAnimationFrame(token);
+                }
+                if (isAlive(model)) {
+                    model.setTrackLabelBand(trackId, 0);
+                }
+            };
+        }
+        return undefined;
+    }, [paper, container, model, trackId]);
+    return { setPaper, setContainer };
+}
 const TrackContainer = observer(function TrackContainer({ model, track, }) {
     const { classes } = useStyles();
-    // an LGV track always holds at least one linear display (activeDisplay =
-    // displays[0]); narrow to the linear shape for prefersOffset/resizeHeight
+    // read once and handed down, so a track's chrome and its body can't read two
+    // displays
     const display = track.activeDisplay;
     const { showTrackOutlines } = model;
     // The Paper's 1px border, present iff outlines are on. Everything laid out in
@@ -76,12 +122,19 @@ const TrackContainer = observer(function TrackContainer({ model, track, }) {
     // the data. One binding rather than three copies of the ternary, because the
     // three agreeing is the whole point.
     const outlineOffset = showTrackOutlines ? TRACK_OUTLINE_BORDER : 0;
-    const trackLabelStyle = model.effectiveTrackLabels !== 'overlapping' || display.prefersOffset
-        ? classes.trackLabelOffset
-        : classes.trackLabelOverlap;
-    return (_jsxs(Paper, { className: cx(classes.root, track.pinned ? null : classes.unpinnedTrack), variant: showTrackOutlines ? 'outlined' : undefined, elevation: showTrackOutlines ? undefined : 0, onDragOver: event => {
+    // A label in flow is a row of track height, which is most of what minimizing
+    // buys back — so a minimized track overlaps its label whatever the setting
+    // says, and there is nothing under it to print over. `prefersOffset` is the
+    // display asking for the offset row in 'overlapping' mode, because its left
+    // edge carries an axis or a sidebar the label would cover.
+    const trackLabelStyle = track.minimized ||
+        (model.effectiveTrackLabels === 'overlapping' && !display.prefersOffset)
+        ? classes.trackLabelOverlap
+        : classes.trackLabelOffset;
+    const { setPaper, setContainer } = useTrackLabelBand(model, track.trackId);
+    return (_jsxs(Paper, { ref: setPaper, className: cx(classes.root, track.pinned ? null : classes.unpinnedTrack), variant: showTrackOutlines ? 'outlined' : undefined, elevation: showTrackOutlines ? undefined : 0, onDragOver: event => {
             model.onTrackDragOver(track.id, event.clientY);
-        }, children: [track.pinned ? _jsx(Gridlines, { model: model, offset: outlineOffset }) : null, model.effectiveTrackLabels !== 'hidden' ? (_jsx(TrackLabel, { track: track, className: trackLabelStyle })) : null, _jsx(TrackOverlaySlot, { zIndex: 100, overlayStyle: { left: -outlineOffset }, children: _jsx(ErrorBoundary, { resetKeys: [display.id], FallbackComponent: e => (_jsx(ErrorBanner, { error: e.error, onReset: e.resetErrorBoundary })), children: _jsx(TrackRenderingContainer, { model: model, track: track }) }) }), _jsx(PaddingBlocks, { model: model, offset: outlineOffset }), _jsx(ResizeHandle, { style: { height: RESIZE_HANDLE_HEIGHT }, onDrag: distance => display.resizeHeight(distance), 
+        }, children: [track.pinned ? _jsx(Gridlines, { model: model, offset: outlineOffset }) : null, model.effectiveTrackLabels !== 'hidden' ? (_jsx(TrackLabel, { track: track, className: trackLabelStyle })) : null, _jsx(TrackOverlaySlot, { zIndex: 100, overlayStyle: { left: -outlineOffset }, labelBand: model.trackLabelBand(track), children: _jsx(ErrorBoundary, { FallbackComponent: e => (_jsx("div", { className: classes.crashBanner, "data-gesture-owner": "true", children: _jsx(ErrorBanner, { error: e.error, onReset: e.resetErrorBoundary }) })), children: _jsx(TrackRenderingContainer, { model: model, track: track, display: display, ref: setContainer }) }, display.id) }), _jsx(PaddingBlocks, { model: model, offset: outlineOffset }), _jsx(ResizeHandle, { style: { height: RESIZE_HANDLE_HEIGHT }, value: display.height, onChange: height => display.resizeHeight(height - display.height), 
                 // the drag's shortcut: grow the track by whatever it is scrolled over,
                 // so a pileup showing three rows of forty opens to all forty
                 // Optional: only a display that scrolls its own content has anything

package/esm/LinearGenomeView/components/TrackLabel.js

@@ -13,17 +13,27 @@ const useStyles = makeStyles()(theme => ({
     root: {
         // above breakpoint split view
         zIndex: 200,
-        background: theme.palette.background.paper,
+        ...(theme.palette.mode === 'dark' && {
+            outline: `1px solid ${theme.palette.divider}`,
+            outlineOffset: -1,
+        }),
+        display: 'inline-flex',
+        alignItems: 'center',
+        maxWidth: 'calc(100% - 16px)',
     },
+    // one line: a long name wrapping over a narrow view covered the data below
     trackName: {
-        margin: '0 auto',
-        width: '90%',
+        margin: theme.spacing(0, 0.5),
+        minWidth: 0,
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
         pointerEvents: 'none',
     },
 }));
 const TrackLabel = observer(function TrackLabel({ track, className, }) {
     const { classes } = useStyles();
     const trackName = getTrackName(track.configuration, getSession(track));
-    return (_jsxs(Paper, { className: cx(className, classes.root), children: [_jsx(TrackLabelDragHandle, { track: track }), _jsx(TrackLabelCloseButton, { track: track }), _jsx(TrackLabelMinimizeButton, { track: track }), _jsx(Typography, { variant: "body2", component: "span", className: classes.trackName, children: _jsx(SanitizedHTML, { html: trackName }) }), _jsx(TrackLabelRefNameWarning, { track: track }), _jsx(TrackLabelMenu, { track: track })] }));
+    return (_jsxs(Paper, { className: cx(className, classes.root), "data-testid": `trackLabel-${track.trackId}`, children: [_jsx(TrackLabelDragHandle, { track: track }), _jsx(TrackLabelCloseButton, { track: track }), _jsx(TrackLabelMinimizeButton, { track: track }), _jsx(Typography, { variant: "body2", component: "span", className: classes.trackName, children: _jsx(SanitizedHTML, { html: trackName }) }), _jsx(TrackLabelRefNameWarning, { track: track }), _jsx(TrackLabelMenu, { track: track })] }));
 });
 export default TrackLabel;