@jbrowse/plugin-linear-genome-view 5.0.0-beta.1 → 5.0.0-beta.11

package/esm/LinearGenomeView/components/ResizeAllTracksHandle.js

@@ -0,0 +1,71 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useLayoutEffect, useRef } from 'react';
+import { ResizeHandle } from '@jbrowse/core/ui';
+import { scrollPortOf } from '@jbrowse/core/util/hooks';
+import { isAlive } from '@jbrowse/mobx-state-tree';
+import { observer } from 'mobx-react';
+import { RESIZE_ALL_HANDLE_HEIGHT } from '../consts.js';
+function useScrollPortExcess(ref, model, enabled) {
+    useLayoutEffect(() => {
+        const box = ref.current?.closest('[data-testid^="view-container-"]') ??
+            ref.current?.closest('[data-testid^="linear-genome-view-"]');
+        if (!enabled || !box || !('ResizeObserver' in window)) {
+            return;
+        }
+        const port = scrollPortOf(box);
+        const measure = () => {
+            const { marginTop, marginBottom } = getComputedStyle(box);
+            const outer = box.getBoundingClientRect().height +
+                Number.parseFloat(marginTop) +
+                Number.parseFloat(marginBottom);
+            model.setScrollPortExcess(Math.round(outer - (port?.clientHeight ?? window.innerHeight)));
+        };
+        measure();
+        const observer = new ResizeObserver(measure);
+        observer.observe(box);
+        if (port) {
+            observer.observe(port);
+        }
+        else {
+            window.addEventListener('resize', measure);
+        }
+        return () => {
+            observer.disconnect();
+            window.removeEventListener('resize', measure);
+            if (isAlive(model)) {
+                model.setScrollPortExcess(undefined);
+            }
+        };
+    }, [ref, model, enabled]);
+}
+const ResizeAllTracksHandle = observer(function ResizeAllTracksHandle({ model, }) {
+    const ref = useRef(null);
+    const drag = useRef({ from: new Map(), moved: 0 });
+    const { isTopLevelView } = model;
+    useScrollPortExcess(ref, model, isTopLevelView);
+    return (_jsx("div", { ref: ref, style: isTopLevelView
+            ? { position: 'sticky', bottom: 0, zIndex: 300 }
+            : { position: 'relative', height: 0, zIndex: 300 }, children: _jsx(ResizeHandle, { grip: isTopLevelView || 'hover', "data-testid": "resize-all-tracks", title: isTopLevelView
+                ? 'Drag to resize all tracks, double-click to fit them to the window'
+                : 'Drag to resize all tracks', style: isTopLevelView
+                ? { height: RESIZE_ALL_HANDLE_HEIGHT }
+                : {
+                    height: RESIZE_ALL_HANDLE_HEIGHT,
+                    position: 'absolute',
+                    bottom: 0,
+                }, onDragStart: () => {
+                drag.current = { from: model.resizableTrackHeights, moved: 0 };
+                for (const track of model.tracks) {
+                    track.setResizing(true);
+                }
+            }, onDrag: distance => {
+                drag.current.moved = model.resizeTracks(drag.current.moved + distance, drag.current.from);
+            }, onDragEnd: () => {
+                for (const track of model.tracks) {
+                    track.setResizing(false);
+                }
+            }, onDoubleClick: () => {
+                model.fitTracksToWindow();
+            } }) }));
+});
+export default ResizeAllTracksHandle;

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

@@ -1,7 +1,6 @@
 import type { LinearGenomeViewModel } from '../index.ts';
 type LGV = LinearGenomeViewModel;
-declare const Rubberband: ({ model, ControlComponent, }: {
+declare const Rubberband: ({ model }: {
     model: LGV;
-    ControlComponent?: React.ReactElement;
 }) => import("react").JSX.Element;
 export default Rubberband;

package/esm/LinearGenomeView/components/Rubberband.js

@@ -4,6 +4,7 @@ import { makeStyles } from '@jbrowse/core/util/tss-react';
 import { observer } from 'mobx-react';
 import { stickyChromeTops } from '../stickyChrome.js';
 import RangeSelectOverlay from './RangeSelectOverlay.js';
+import Scalebar from './Scalebar.js';
 import { useRangeSelect } from './useRangeSelect.js';
 const useStyles = makeStyles()({
     rubberbandControl: {
@@ -13,7 +14,7 @@ const useStyles = makeStyles()({
         zIndex: 825,
     },
 });
-const Rubberband = observer(function Rubberband({ model, ControlComponent = _jsx("div", {}), }) {
+const Rubberband = observer(function Rubberband({ model }) {
     const ref = useRef(null);
     const { classes } = useStyles();
     const { stickyViewHeaders, headerHeight } = model;
@@ -24,6 +25,6 @@ const Rubberband = observer(function Rubberband({ model, ControlComponent = _jsx
                 // (TracksContainer): mouseout bubbles from every child, so crossing a
                 // refName or coordinate label inside the scalebar cleared the guide and
                 // the next mousemove put it straight back
-                onMouseLeave: range.mouseOut, children: ControlComponent })] }));
+                onMouseLeave: range.mouseOut, children: _jsx(Scalebar, { model: model }) })] }));
 });
 export default Rubberband;

package/esm/LinearGenomeView/components/SVGHighlightBand.js

@@ -1,9 +1,8 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { getFillProps } from '@jbrowse/core/util';
 // One full-height SVG highlight band with an optional label at the top,
-// mirroring the on-screen HighlightBand div. Shared by the LGV native-highlight
-// export (SVGHighlights) and the grid-bookmark export (LGVHighlightSVG). The
-// label is hidden on bands too narrow to fit it.
+// mirroring the on-screen HighlightBand div. The label is hidden on bands too
+// narrow to fit it.
 export default function SVGHighlightBand({ coords, height, color, label, labelColor, }) {
     return (_jsxs(_Fragment, { children: [_jsx("rect", { x: coords.left, y: 0, width: coords.width, height: height, ...getFillProps(color) }), label && coords.width > 3 ? (_jsx("text", { x: coords.left + 3, y: 2, fontSize: 11, dominantBaseline: "hanging", ...getFillProps(labelColor), children: label })) : null] }));
 }

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

@@ -1,10 +1,6 @@
 import type { LinearGenomeViewModel } from '../index.ts';
-import type React from 'react';
 type LGV = LinearGenomeViewModel;
-interface ScalebarProps {
+declare const Scalebar: ({ model }: {
     model: LGV;
-    style?: React.CSSProperties;
-    className?: string;
-}
-declare const Scalebar: ({ model, style, className, }: ScalebarProps) => React.JSX.Element;
+}) => import("react").JSX.Element;
 export default Scalebar;

package/esm/LinearGenomeView/components/Scalebar.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cx, makeStyles } from '@jbrowse/core/util/tss-react';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
 import { Paper } from '@mui/material';
 import { observer } from 'mobx-react';
+import { SCALE_BAR_HEIGHT } from '../consts.js';
 import Gridlines from './Gridlines.js';
 import PaddingBlocks from './PaddingBlocks.js';
 import ScalebarCoordinateLabels from './ScalebarCoordinateLabels.js';
@@ -14,15 +15,17 @@ const useStyles = makeStyles()({
     container: {
         overflow: 'clip',
         position: 'relative',
+        height: SCALE_BAR_HEIGHT,
+        boxSizing: 'border-box',
     },
 });
-const Scalebar = observer(function Scalebar({ model, style, className, }) {
+const Scalebar = observer(function Scalebar({ model }) {
     const { classes } = useStyles();
     return (_jsxs(Paper
-    // The rubberband owns presses on the scalebar (it wraps this as its
-    // ControlComponent), so the view's click-drag pan must not also start one
+    // The rubberband owns presses on the scalebar (it wraps this), so the
+    // view's click-drag pan must not also start one
     // on the paths where the rubberband doesn't stopPropagation — a press with
     // the refName menu already open. See ResizeHandle for the marker contract.
-    , { "data-gesture-owner": "true", className: cx(classes.container, className), variant: "outlined", style: style, children: [_jsx(Gridlines, { model: model, offset: 1 }), _jsx(PaddingBlocks, { model: model, offset: 1 }), _jsx(ScalebarCoordinateLabels, { model: model }), _jsx(ScalebarRefNameLabels, { model: model })] }));
+    , { "data-gesture-owner": "true", className: classes.container, variant: "outlined", children: [_jsx(Gridlines, { model: model, offset: 1 }), _jsx(PaddingBlocks, { model: model, offset: 1 }), _jsx(ScalebarCoordinateLabels, { model: model }), _jsx(ScalebarRefNameLabels, { model: model })] }));
 });
 export default Scalebar;

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.
+// Not an observer: `label` is plain data from the parent. The attribute tells
+// the scalebar's rubberband to leave a click here to this label's onClick.
 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,7 +32,7 @@ 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;
@@ -50,25 +51,25 @@ 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({
+            void navigate(option);
+        }, assemblyName: assemblyName, fetchResults: (queryString, signal) => fetchResults({
             queryString,
             assemblyName,
             textSearchManager,
             assembly,
-            stopToken,
+            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/SearchResultsDialog.d.ts

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

package/esm/LinearGenomeView/components/SearchResultsDialog.js

@@ -2,6 +2,6 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import { InfoDialog } from '@jbrowse/core/ui';
 import { Typography } from '@mui/material';
 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 })] })) }));
+export default function SearchResultsDialog({ model, assemblyName, searchQuery, searchResults, handleClose, onPick, }) {
+    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, onPick: onPick })] })) }));
 }

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

@@ -1,9 +1,10 @@
 import type { LinearGenomeViewModel } from '../../index.ts';
 import type BaseResult from '@jbrowse/core/TextSearch/BaseResults';
-declare const SearchResultsTable: ({ searchResults, assemblyName, model, handleClose, }: {
+declare const SearchResultsTable: ({ searchResults, assemblyName, model, handleClose, onPick, }: {
     searchResults: BaseResult[];
     assemblyName: string;
     model: LinearGenomeViewModel;
     handleClose: () => void;
+    onPick: (result: BaseResult) => Promise<unknown>;
 }) => import("react").JSX.Element;
 export default SearchResultsTable;

package/esm/LinearGenomeView/components/SearchResultsTable.js

@@ -1,10 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { canonicalLocString } from '@jbrowse/core/TextSearch/places';
 import { readConfObject } from '@jbrowse/core/configuration';
-import { assembleLocString, getSession, parseLocString, } from '@jbrowse/core/util';
+import { SanitizedHTML } from '@jbrowse/core/ui';
+import { getSession } from '@jbrowse/core/util';
 import { Button, Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, } from '@mui/material';
 import { observer } from 'mobx-react';
-import { isOpenInView, navToOption } from '../../searchUtils.js';
-const SearchResultsTable = observer(function SearchResultsTable({ searchResults, assemblyName, model, handleClose, }) {
+import { isOpenInView } from '../../searchUtils.js';
+const SearchResultsTable = observer(function SearchResultsTable({ searchResults, assemblyName, model, handleClose, onPick, }) {
     const session = getSession(model);
     const { assemblyManager } = session;
     const assembly = assemblyManager.get(assemblyName);
@@ -12,39 +14,20 @@ const SearchResultsTable = observer(function SearchResultsTable({ searchResults,
         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
+    // A location the assembly can't resolve is listed as-is: Go 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;
-        }
+        return assembly && locString
+            ? canonicalLocString(locString, assembly)
+            : 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 () => {
+    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: _jsx(SanitizedHTML, { html: getTrackName(result.getTrackId()) || 'N/A' }) }), _jsx(TableCell, { align: "right", children: _jsx(Button, { onClick: async () => {
                                         try {
-                                            await navToOption({
-                                                option: result,
-                                                model,
-                                                assemblyName,
-                                            });
+                                            await onPick(result);
                                         }
                                         catch (e) {
                                             console.error(e);

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[];
-        showTrack: (trackId: string) => void;
-    };
+    model: SequenceSearchModel;
     handleClose: () => void;
 }) => import("react").JSX.Element;
 export default SequenceSearchDialog;

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,62 @@ 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
+    // displays[0]). The one narrowing to the linear shape, handed down rather
+    // than repeated, 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 +123,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 }, children: _jsx(ErrorBoundary, { FallbackComponent: e => (_jsx("div", { className: classes.crashBanner, 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 }, onDrag: distance => display.resizeHeight(distance), 
                 // 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

@@ -14,16 +14,23 @@ const useStyles = makeStyles()(theme => ({
         // above breakpoint split view
         zIndex: 200,
         background: theme.palette.background.paper,
+        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;