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

package/esm/LinearGenomeView/components/HeaderTrackSelectorButton.js

@@ -5,13 +5,20 @@ import { IconButton } from '@mui/material';
 import { observer } from 'mobx-react';
 const useStyles = makeStyles()(theme => ({
     toggleButton: {
-        height: 44,
         border: 'none',
+    },
+    indent: {
         marginLeft: theme.spacing(4),
     },
+    selected: {
+        backgroundColor: theme.palette.action.selected,
+    },
 }));
-const HeaderTrackSelectorButton = observer(function HeaderTrackSelectorButton({ model, }) {
-    const { classes } = useStyles();
-    return (_jsx(IconButton, { onClick: model.activateTrackSelector, className: classes.toggleButton, title: "Open track selector", value: "track_select", children: _jsx(TrackSelectorIcon, {}) }));
+const HeaderTrackSelectorButton = observer(function HeaderTrackSelectorButton({ model, indent, }) {
+    const { classes, cx } = useStyles();
+    const { isTrackSelectorOpen } = model;
+    return (_jsx(IconButton, { color: isTrackSelectorOpen ? 'primary' : 'default', onClick: () => {
+            model.toggleTrackSelector();
+        }, className: cx(classes.toggleButton, indent && classes.indent, isTrackSelectorOpen ? classes.selected : undefined), title: isTrackSelectorOpen ? 'Close track selector' : 'Open track selector', value: "track_select", children: _jsx(TrackSelectorIcon, {}) }));
 });
 export default HeaderTrackSelectorButton;

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

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

package/esm/LinearGenomeView/components/HeaderZoomControls.js

@@ -1,14 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { lazy, useEffect, useState } from 'react';
+import { useState } from 'react';
+import { SingleSlider } from '@jbrowse/core/ui';
 import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton';
-import { getBpDisplayStr, getSession } from '@jbrowse/core/util';
+import { getBpDisplayStr } from '@jbrowse/core/util';
 import { makeStyles } from '@jbrowse/core/util/tss-react';
 import MoreVert from '@mui/icons-material/MoreVert';
-import ZoomIn from '@mui/icons-material/ZoomIn';
-import ZoomOut from '@mui/icons-material/ZoomOut';
-import { IconButton, Slider, Tooltip } from '@mui/material';
 import { observer } from 'mobx-react';
-const RegionWidthEditorDialog = lazy(() => import("./RegionWidthEditorDialog.js"));
+import { zoomMenuItems } from '../menuItems.js';
+import ZoomButton from './ZoomButton.js';
 const useStyles = makeStyles()(theme => ({
     container: {
         display: 'flex',
@@ -18,54 +17,41 @@ const useStyles = makeStyles()(theme => ({
     slider: {
         width: 100,
         color: theme.palette.text.secondary,
+        // The value here is live `bpPerPx`, so MUI's default 150ms ease on the thumb
+        // and the track restarts on every animation frame of a wheel zoom: the
+        // transition never completes, the thumb trails the zoom it is reporting, and
+        // the compositor gives up on the track's animated width every frame. A
+        // slider that reports a value rather than being dragged to one wants no
+        // transition at all.
+        '& .MuiSlider-thumb, & .MuiSlider-track': {
+            transition: 'none',
+        },
     },
 }));
-function ValueLabelComponent(props) {
-    const { children, open, value } = props;
-    return (_jsx(Tooltip, { open: open, enterTouchDelay: 0, placement: "top", title: value, arrow: true, children: children }));
-}
-const HeaderZoomControls = observer(function HeaderZoomControls({ model, }) {
+// The slider tracks live `bpPerPx`, which changes on every animation frame of a
+// zoom. Isolated into its own observer so the surrounding zoom buttons/menu —
+// whose MUI Tooltip/IconButton machinery is comparatively expensive and only
+// depends on the debounced `coarseBpPerPx` — don't re-render every frame.
+const ZoomSlider = observer(function ZoomSlider({ model, }) {
     const { classes } = useStyles();
-    const { width, maxBpPerPx, minBpPerPx, bpPerPx, effectiveBpPerPx } = model;
-    const [value, setValue] = useState(-Math.log2(bpPerPx) * 100);
-    useEffect(() => {
-        setValue(-Math.log2(effectiveBpPerPx) * 100);
-    }, [effectiveBpPerPx]);
-    const zoomInDisabled = effectiveBpPerPx <= minBpPerPx + 0.0001;
-    const zoomOutDisabled = effectiveBpPerPx >= maxBpPerPx - 0.0001;
-    return (_jsxs("div", { className: classes.container, children: [_jsx(Tooltip, { title: "Zoom out 2x", children: _jsx("span", { children: _jsx(IconButton, { "data-testid": "zoom_out", disabled: zoomOutDisabled, onClick: () => {
-                            model.zoom(bpPerPx * 2);
-                        }, children: _jsx(ZoomOut, {}) }) }) }), _jsx(Slider, { size: "small", className: classes.slider, value: value, min: -Math.log2(maxBpPerPx) * 100, max: -Math.log2(minBpPerPx) * 100, onChangeCommitted: () => model.zoomTo(2 ** (-value / 100)), valueLabelDisplay: "auto", valueLabelFormat: newValue => `Window size: ${getBpDisplayStr(2 ** (-newValue / 100) * width)}`, slots: {
-                    valueLabel: ValueLabelComponent,
-                }, onChange: (_, val) => {
-                    setValue(val);
-                } }), _jsx(Tooltip, { title: "Zoom in 2x", children: _jsx("span", { children: _jsx(IconButton, { "data-testid": "zoom_in", disabled: zoomInDisabled, onClick: () => {
-                            model.zoom(model.bpPerPx / 2);
-                        }, children: _jsx(ZoomIn, {}) }) }) }), _jsx(CascadingMenuButton, { menuItems: [
-                    ...[100, 50, 10].map(r => ({
-                        label: `Zoom in ${r}x`,
-                        onClick: () => {
-                            model.zoom(model.bpPerPx / r);
-                        },
-                    })),
-                    ...[10, 50, 100].map(r => ({
-                        label: `Zoom out ${r}x`,
-                        onClick: () => {
-                            model.zoom(model.bpPerPx * r);
-                        },
-                    })),
-                    {
-                        label: 'Custom zoom',
-                        onClick: () => {
-                            getSession(model).queueDialog(handleClose => [
-                                RegionWidthEditorDialog,
-                                {
-                                    model,
-                                    handleClose,
-                                },
-                            ]);
-                        },
-                    },
-                ], children: _jsx(MoreVert, {}) })] }));
+    const { width, maxBpPerPx, minBpPerPx, bpPerPx } = model;
+    const [dragValue, setDragValue] = useState(null);
+    const value = dragValue ?? -Math.log2(bpPerPx) * 100;
+    return (_jsx(SingleSlider, { size: "small", className: classes.slider, value: value, min: -Math.log2(maxBpPerPx) * 100, max: -Math.log2(minBpPerPx) * 100, onChangeCommitted: val => {
+            setDragValue(null);
+            model.cancelZoomAnimation();
+            model.zoomTo(2 ** (-val / 100));
+        }, valueLabelDisplay: "auto", valueLabelFormat: newValue => `Window size: ${getBpDisplayStr(2 ** (-newValue / 100) * width)}`, onChange: val => {
+            // Take over from any in-flight animated zoom as soon as the user grabs
+            // the thumb, so the view stops lurching underneath the drag.
+            if (dragValue === null) {
+                model.cancelZoomAnimation();
+            }
+            setDragValue(val);
+        } }));
+});
+const HeaderZoomControls = observer(function HeaderZoomControls({ model, showSlider = true, }) {
+    const { classes } = useStyles();
+    return (_jsxs("div", { className: classes.container, children: [_jsx(ZoomButton, { model: model, direction: "out" }), showSlider ? _jsx(ZoomSlider, { model: model }) : null, _jsx(ZoomButton, { model: model, direction: "in" }), _jsx(CascadingMenuButton, { menuItems: () => zoomMenuItems(model), children: _jsx(MoreVert, {}) })] }));
 });
 export default HeaderZoomControls;

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

@@ -4,5 +4,5 @@ type LGV = LinearGenomeViewModel;
 declare const Highlight: ({ model, highlight, }: {
     model: LGV;
     highlight: HighlightType;
-}) => import("react/jsx-runtime").JSX.Element | null;
+}) => import("react").JSX.Element | null;
 export default Highlight;

package/esm/LinearGenomeView/components/Highlight.js

@@ -1,42 +1,38 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useStyleTheme } from '@jbrowse/core/ui/PaletteContext';
 import { getSession } from '@jbrowse/core/util';
-import { colord } from '@jbrowse/core/util/colord';
-import BookmarkIcon from '@mui/icons-material/Bookmark';
 import CloseIcon from '@mui/icons-material/Close';
-import LinkIcon from '@mui/icons-material/Link';
-import { Box, Tooltip, Typography, useTheme } from '@mui/material';
+import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
 import { observer } from 'mobx-react';
-import HighlightBand from "./HighlightBand.js";
+import HighlightBand from './HighlightBand.js';
+import HighlightChip from './HighlightChip.js';
+import { getHighlightColor } from './util.js';
+// A band narrower than the link-icon chip clips it into a smudge, so below this
+// width the chip is dropped (the band itself still draws).
+const CHIP_MIN_WIDTH = 24;
 const Highlight = observer(function Highlight({ model, highlight, }) {
-    const theme = useTheme();
-    const session = getSession(model);
+    const theme = useStyleTheme();
     const coords = model.getHighlightCoords(highlight);
-    const bandColor = highlight.color
-        ? colord(highlight.color)
-        : colord(theme.palette.highlight.main).alpha(0.35);
-    return coords ? (_jsx(HighlightBand, { coords: coords, background: bandColor.toRgbString(), children: _jsx(CascadingMenuButton, { menuItems: [
+    const bandColor = getHighlightColor(highlight, theme);
+    const label = getSession(model).highlightLabelsVisible
+        ? highlight.label
+        : undefined;
+    return coords ? (_jsx(HighlightBand, { coords: coords, background: bandColor.toRgbString(), label: label, children: coords.width >= CHIP_MIN_WIDTH ? (_jsx(HighlightChip, { color: bandColor, label: label, tooltip: highlight.label ?? 'Highlighted region', menuItems: [
                 {
                     label: 'Dismiss highlight',
                     icon: CloseIcon,
                     onClick: () => {
-                        model.removeHighlight(highlight);
+                        getSession(model).removeHighlight(highlight);
                     },
                 },
                 {
-                    label: 'Bookmark highlighted region',
-                    icon: BookmarkIcon,
+                    label: 'Turn off highlights',
+                    icon: VisibilityOffIcon,
                     onClick: () => {
-                        const bookmarkWidget = (session.widgets.get('GridBookmark') ??
-                            session.addWidget('GridBookmarkWidget', 'GridBookmark'));
-                        bookmarkWidget.addBookmark({
-                            ...highlight,
-                            assemblyName: highlight.assemblyName ?? model.assemblyNames[0],
-                        });
-                        session.showWidget(bookmarkWidget);
-                        model.removeHighlight(highlight);
+                        getSession(model).setHighlightsVisible(false);
                     },
                 },
-            ], children: _jsx(Tooltip, { title: highlight.label ?? 'Highlighted region', arrow: true, children: _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 0.5 }, children: [_jsx(LinkIcon, { fontSize: "small", sx: { color: bandColor.alpha(0.8).toRgbString() } }), highlight.label && model.labelsVisible ? (_jsx(Typography, { variant: "caption", noWrap: true, children: highlight.label })) : null] }) }) }) })) : null;
+                ...model.highlightMenuItems(highlight),
+            ] })) : null })) : null;
 });
 export default Highlight;

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

@@ -1,8 +1,9 @@
-export default function HighlightBand({ coords, background, children, }: {
+export default function HighlightBand({ coords, background, label, children, }: {
     coords: {
         left: number;
         width: number;
     };
     background: string;
+    label?: string;
     children?: React.ReactNode;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;

package/esm/LinearGenomeView/components/HighlightBand.js

@@ -1,23 +1,40 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { makeStyles } from '@jbrowse/core/util/tss-react';
-const useStyles = makeStyles()({
+import { Typography } from '@mui/material';
+const useStyles = makeStyles()(theme => ({
     highlight: {
         height: '100%',
         position: 'absolute',
         left: 0,
-        overflow: 'hidden',
+        // clip rather than hidden so this never becomes a scroll container (see
+        // Scalebar)
+        overflow: 'clip',
+        // paint above sibling TrackContainers (which would otherwise win in tree
+        // order). pointer-events:none lets clicks fall through to the tracks; an
+        // interactive chip re-enables pointer-events on itself
         zIndex: 1,
         pointerEvents: 'none',
     },
-    chip: {
-        pointerEvents: 'auto',
+    overlay: {
+        position: 'absolute',
+        top: 0,
+        left: 3,
+    },
+    label: {
+        color: theme.palette.text.primary,
     },
-});
-export default function HighlightBand({ coords, background, children, }) {
+}));
+// OverviewHighlight stays separate (different bpToPx API). A non-interactive
+// colored band with an
+// optional top label; when `children` (the highlight chip) is passed it renders
+// that instead of the plain label. Visibility is toggled from the view menu
+export default function HighlightBand({ coords, background, label, children, }) {
     const { classes } = useStyles();
-    return (_jsx("div", { className: classes.highlight, style: {
+    const content = children ??
+        (label ? (_jsx(Typography, { variant: "caption", className: classes.label, noWrap: true, children: label })) : null);
+    return (_jsx("div", { "data-testid": "highlight-band", className: classes.highlight, style: {
             transform: `translateX(${coords.left}px)`,
             width: coords.width,
             background,
-        }, children: coords.width > 3 && children ? (_jsx("div", { className: classes.chip, children: children })) : null }));
+        }, children: coords.width > 3 && content ? (_jsx("div", { className: classes.overlay, children: content })) : null }));
 }

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

@@ -0,0 +1,8 @@
+import type { MenuItem } from '@jbrowse/core/ui';
+import type { Colord } from '@jbrowse/core/util/colord';
+export default function HighlightChip({ color, label, tooltip, menuItems, }: {
+    color: Colord;
+    label?: string;
+    tooltip?: string;
+    menuItems: MenuItem[];
+}): import("react").JSX.Element;

package/esm/LinearGenomeView/components/HighlightChip.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton';
+import LinkIcon from '@mui/icons-material/Link';
+import { Box, Tooltip, Typography } from '@mui/material';
+// Interactive chip drawn inside a highlight band: a link icon tinted to the
+// band color plus an optional inline label, wrapped in a context menu. Sets its
+// own pointer-events since the band is click-through.
+export default function HighlightChip({ color, label, tooltip, menuItems, }) {
+    // hide the icon color when the band is fully transparent ("label-only"
+    // highlight); otherwise bump to 0.8 alpha so the chip stays legible
+    const chipAlpha = color.alpha() === 0 ? 0 : 0.8;
+    return (_jsx(Box, { sx: { pointerEvents: 'auto' }, children: _jsx(CascadingMenuButton, { "data-testid": "highlight-chip", menuItems: menuItems, children: _jsx(Tooltip, { title: tooltip, arrow: true, children: _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 0.5 }, children: [_jsx(LinkIcon, { fontSize: "small", sx: { color: color.alpha(chipAlpha).toRgbString() } }), label ? (_jsx(Typography, { variant: "caption", noWrap: true, children: label })) : null] }) }) }) }));
+}

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

@@ -0,0 +1,12 @@
+import type { LinearGenomeViewModel } from '../model.ts';
+export interface HoverHighlightPosition {
+    refName: string;
+    start: number;
+    end: number;
+    assemblyName?: string;
+}
+declare const HoverPositionHighlight: ({ model, position, }: {
+    model: LinearGenomeViewModel;
+    position: HoverHighlightPosition;
+}) => import("react").JSX.Element | null;
+export default HoverPositionHighlight;

package/esm/LinearGenomeView/components/HoverPositionHighlight.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { alpha } from '@jbrowse/core/ui/palette';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
+import { observer } from 'mobx-react';
+const useStyles = makeStyles()(theme => ({
+    highlight: {
+        height: '100%',
+        position: 'absolute',
+        background: alpha(theme.palette.accent, 0.4),
+        borderLeft: `2px solid ${theme.palette.accent}`,
+        borderRight: `2px solid ${theme.palette.accent}`,
+        pointerEvents: 'none',
+        zIndex: 10,
+    },
+}));
+// Renders one crosshair box on the LGV for a hovered genomic interval, or
+// nothing if the interval is off-screen. Shared by the widgets that publish a
+// hover position (e.g. the feature-detail sequence panel and the MAF sequence
+// widget).
+const HoverPositionHighlight = observer(function HoverPositionHighlight({ model, position, }) {
+    const { classes } = useStyles();
+    const coords = model.getHighlightCoords(position);
+    return coords ? (_jsx("div", { className: classes.highlight, style: { left: coords.left, width: coords.width } })) : null;
+});
+export default HoverPositionHighlight;

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

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

package/esm/LinearGenomeView/components/ImportForm.js

@@ -1,77 +1,111 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
-import { AssemblySelector, ErrorMessage } from '@jbrowse/core/ui';
+import { useState } from 'react';
+import BaseResult from '@jbrowse/core/TextSearch/BaseResults';
+import { AssemblySelector, ErrorBanner, RefNameAutocomplete, RefNameAutocompleteEndAdornment, adornmentReservePx, useAssemblySelection, useRecentLocations, } from '@jbrowse/core/ui';
 import { getSession } from '@jbrowse/core/util';
 import { makeStyles } from '@jbrowse/core/util/tss-react';
 import CloseIcon from '@mui/icons-material/Close';
-import { Button, CircularProgress, Container, FormControl, Grid as Grid, } from '@mui/material';
+import { Button, CircularProgress, Container, Grid } from '@mui/material';
 import { observer } from 'mobx-react';
-import ImportFormRefNameAutocomplete from "./ImportFormRefNameAutocomplete.js";
-import { handleSelectedRegion, navToOption } from "../../searchUtils.js";
+import { fetchResults, navigateToSelectedOption, notifySearchFailure, } from '../../searchUtils.js';
+import { recentLocationOf, recentLocationsMenu } from './recentLocationsMenu.js';
 const useStyles = makeStyles()(theme => ({
     importFormContainer: {
-        padding: theme.spacing(2),
+        padding: theme.spacing(4),
     },
     button: {
         margin: theme.spacing(2),
     },
-    container: {
-        padding: theme.spacing(4),
-    },
 }));
-const LinearGenomeViewImportForm = observer(function LinearGenomeViewImportForm({ model }) {
+const LinearGenomeViewImportForm = observer(function LinearGenomeViewImportForm({ model, }) {
     const { classes } = useStyles();
     const session = getSession(model);
-    const { assemblyNames, assemblyManager } = session;
-    const { initialized, error } = model;
-    const [selectedAsm, setSelectedAsm] = useState(assemblyNames[0]);
-    const [option, setOption] = useState();
-    const assembly = assemblyManager.get(selectedAsm);
-    const assemblyError = assemblyNames.length
-        ? assembly?.error
-        : 'No configured assemblies';
-    const displayError = assemblyError || error;
-    const [value, setValue] = useState('');
-    const regions = assembly?.regions;
-    const assemblyLoaded = !!regions;
-    const r0 = regions ? regions[0]?.refName || '' : '';
-    useEffect(() => {
-        setValue(r0);
-    }, [r0, selectedAsm]);
-    return (_jsxs("div", { className: classes.container, children: [displayError ? _jsx(ErrorMessage, { error: displayError }) : null, initialized ? (_jsx(Container, { className: classes.importFormContainer, children: _jsx("form", { onSubmit: async (event) => {
-                        event.preventDefault();
-                        model.setError(undefined);
-                        if (value) {
-                            try {
-                                if (option?.getDisplayString() === value &&
-                                    option.hasLocation()) {
-                                    await navToOption({
-                                        option,
-                                        model,
-                                        assemblyName: selectedAsm,
-                                    });
-                                }
-                                else if (option?.results?.length) {
-                                    model.setSearchResults(option.results, option.getLabel(), selectedAsm);
-                                }
-                                else if (assembly) {
-                                    await handleSelectedRegion({
-                                        input: value,
-                                        assembly,
-                                        model,
-                                    });
-                                }
-                            }
-                            catch (e) {
-                                console.error(e);
-                                session.notify(`${e}`, 'warning');
-                            }
-                        }
-                    }, children: _jsxs(Grid, { container: true, spacing: 1, justifyContent: "center", alignItems: "center", children: [_jsx(FormControl, { children: _jsx(AssemblySelector, { onChange: val => {
-                                        setSelectedAsm(val);
-                                    }, localStorageKey: "lgv", session: session, selected: selectedAsm }) }), selectedAsm ? (assemblyError ? (_jsx(CloseIcon, { style: { color: 'red' } })) : assemblyLoaded ? (_jsx(FormControl, { children: _jsx(ImportFormRefNameAutocomplete, { value: value, setValue: setValue, selectedAsm: selectedAsm, setOption: setOption, model: model }) })) : (_jsx(CircularProgress, { size: 20, disableShrink: true }))) : null, _jsx(FormControl, { children: _jsx(Button, { type: "submit", disabled: !value, className: classes.button, variant: "contained", color: "primary", children: "Open" }) }), _jsx(FormControl, { children: _jsx(Button, { disabled: !value, className: classes.button, onClick: () => {
-                                        model.setError(undefined);
-                                        model.showAllRegionsInAssembly(selectedAsm);
-                                    }, variant: "contained", color: "secondary", children: "Show all regions in assembly" }) })] }) }) })) : null] }));
+    const { textSearchManager } = session;
+    const { error: viewError } = model;
+    const { selectedAssemblyName: selectedAsm, setSelectedAssemblyName, assembly, assemblyError, regions, } = useAssemblySelection(session, 'lgv');
+    const { recentLocations, addRecentLocation, clearRecentLocations } = useRecentLocations(selectedAsm);
+    // The location the form will open, tagged with the assembly it was entered
+    // for, and read back only while that tag still matches. Switching assembly
+    // then drops it structurally — nothing has to remember to clear it — which
+    // is the shape `useAssemblySelection` already uses for the assembly choice
+    // itself ("stored as an override, re-resolved against the live list every
+    // render") and the breakpoint form uses for its shared track. One object
+    // rather than a text/option pair for the same reason: they are only ever
+    // valid together, and as two useStates every write had to remember to reset
+    // the other.
+    //
+    // Undefined means "nothing entered yet", which is what makes the box fall
+    // back to the first refname below and keeps that default out of the recent
+    // locations list.
+    const [entered, setEntered] = useState();
+    const current = entered?.assemblyName === selectedAsm ? entered : undefined;
+    const value = current?.text ?? regions?.[0]?.refName ?? '';
+    const displayError = assemblyError ?? viewError;
+    async function navigate({ option, record, }) {
+        model.setError(undefined);
+        if (selectedAsm) {
+            try {
+                await navigateToSelectedOption({
+                    option,
+                    model,
+                    assemblyName: selectedAsm,
+                });
+                if (record) {
+                    addRecentLocation(recentLocationOf(option));
+                }
+            }
+            catch (e) {
+                notifySearchFailure(session, e);
+            }
+        }
+    }
+    const recentMenuItems = recentLocationsMenu({
+        recentLocations,
+        onNavigate: option => {
+            navigate({ option, record: true }).catch(() => { });
+        },
+        onClear: clearRecentLocations,
+    });
+    return (_jsxs(Container, { className: classes.importFormContainer, "data-testid": "import-form", children: [displayError ? _jsx(ErrorBanner, { error: displayError }) : null, _jsx("form", { onSubmit: async (event) => {
+                    event.preventDefault();
+                    if (value) {
+                        await navigate({
+                            option: current?.option ?? new BaseResult({ label: value }),
+                            record: current !== undefined,
+                        });
+                    }
+                }, children: _jsxs(Grid, { container: true, spacing: 1, sx: { justifyContent: 'center', alignItems: 'center' }, children: [_jsx(AssemblySelector, { onChange: val => {
+                                // Only the model's error needs clearing by hand: it lives
+                                // outside React and is not tagged with the assembly it was
+                                // about. The typed location isn't reset here — `entered` is
+                                // tagged, so it drops itself. The banner reports the previous
+                                // assembly's failure (that is why the form is up at all), so it
+                                // has to go with it; the circular form clears here for the same
+                                // reason.
+                                model.setError(undefined);
+                                setSelectedAssemblyName(val);
+                            }, session: session, selected: selectedAsm }), selectedAsm ? (assemblyError ? (_jsx(CloseIcon, { color: "error" })) : regions ? (_jsx(RefNameAutocomplete, { fetchResults: (queryString, signal) => fetchResults({
+                                queryString,
+                                assembly,
+                                textSearchManager,
+                                assemblyName: selectedAsm,
+                                signal,
+                            }), session: session, assemblyName: selectedAsm, value: value, minWidth: 270, adornmentWidth: adornmentReservePx({
+                                menuItemCount: recentMenuItems.length,
+                            }), onChange: v => {
+                                // no `option` on the new object, so typing over a picked
+                                // search result discards it rather than opening the old
+                                // one's location under the new text
+                                setEntered({ assemblyName: selectedAsm, text: v });
+                            }, onSelect: opt => {
+                                setEntered({
+                                    assemblyName: selectedAsm,
+                                    text: opt.getDisplayString(),
+                                    option: opt,
+                                });
+                            }, endAdornment: _jsx(RefNameAutocompleteEndAdornment, { menuItems: recentMenuItems }), helperText: "Enter sequence name, feature name, or location" })) : (_jsx(CircularProgress, { size: 20, disableShrink: true }))) : null, _jsx(Button, { type: "submit", disabled: !value, className: classes.button, variant: "contained", color: "primary", children: "Open" }), _jsx(Button, { disabled: !!assemblyError || !regions, className: classes.button, onClick: () => {
+                                model.setError(undefined);
+                                model.showAllRegionsInAssembly(selectedAsm);
+                            }, variant: "contained", color: "secondary", children: "Show all regions in assembly" })] }) })] }));
 });
 export default LinearGenomeViewImportForm;

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

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

package/esm/LinearGenomeView/components/LinearGenomeView.js

@@ -1,13 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { lazy } from 'react';
-import { LoadingEllipses } from '@jbrowse/core/ui';
+import { ViewLoadingScreen } from '@jbrowse/core/ui';
 import { observer } from 'mobx-react';
-import LinearGenomeViewContainer from "./LinearGenomeViewContainer.js";
-const ImportForm = lazy(() => import("./ImportForm.js"));
+import LinearGenomeViewContainer from './LinearGenomeViewContainer.js';
+// lazies
+const ImportForm = lazy(() => import('./ImportForm.js'));
 const LinearGenomeView = observer(function LinearGenomeView({ model, }) {
-    const { showLoading, showImportForm, loadingMessage } = model;
-    if (showLoading) {
-        return _jsx(LoadingEllipses, { variant: "h6", message: loadingMessage });
+    const { loading, showImportForm } = model;
+    if (loading) {
+        return _jsx(ViewLoadingScreen, { ...loading });
     }
     else if (showImportForm) {
         return _jsx(ImportForm, { model: model });

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

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