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

package/esm/LinearGenomeView/components/HighlightBand.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { makeStyles } from '@jbrowse/core/util/tss-react';
+import { Typography } from '@mui/material';
+const useStyles = makeStyles()(theme => ({
+    highlight: {
+        height: '100%',
+        position: 'absolute',
+        left: 0,
+        // 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',
+    },
+    overlay: {
+        position: 'absolute',
+        top: 0,
+        left: 3,
+    },
+    label: {
+        color: theme.palette.text.primary,
+    },
+}));
+// Shared band renderer for LGV and grid-bookmark highlights; 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();
+    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 && content ? (_jsx("div", { className: classes.overlay, children: content })) : null }));
+}

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

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

package/esm/LinearGenomeView/components/HighlightChip.js

@@ -0,0 +1,15 @@
+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 while the band is revealing it
+// (see `useHighlightChip`): 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. `setOpen` is how the band learns to keep the
+// chip drawn while the menu is up.
+export default function HighlightChip({ color, label, tooltip, menuItems, setOpen, }) {
+    // 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, setOpen: setOpen, 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.primary.main, 0.4),
+        borderLeft: `2px solid ${theme.palette.primary.main}`,
+        borderRight: `2px solid ${theme.palette.primary.main}`,
+        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, stopToken) => fetchResults({
+                                queryString,
+                                assembly,
+                                textSearchManager,
+                                assemblyName: selectedAsm,
+                                stopToken,
+                            }), 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;
+    const { showLoading, showImportForm, loadingMessage, loadingProgress } = model;
     if (showLoading) {
-        return _jsx(LoadingEllipses, { variant: "h6", message: loadingMessage });
+        return (_jsx(ViewLoadingScreen, { message: loadingMessage, fraction: loadingProgress, source: model.loadingSource }));
     }
     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;

package/esm/LinearGenomeView/components/LinearGenomeViewContainer.js

@@ -1,59 +1,118 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Suspense, lazy, useEffect, useRef } from 'react';
 import { VIEW_HEADER_HEIGHT } from '@jbrowse/core/ui';
 import { getSession } from '@jbrowse/core/util';
+import { LGV_HEADER_HEIGHT_VAR, SCROLL_PORT_HEIGHT_VAR, VIEW_HEADER_HEIGHT_VAR, useChromeHeightVar, useFocusOnInteraction, } from '@jbrowse/core/util/hooks';
 import { makeStyles } from '@jbrowse/core/util/tss-react';
+import { useWheelZoom } from '@jbrowse/core/util/usePanZoom';
 import Paper from '@mui/material/Paper';
 import { observer } from 'mobx-react';
-import TrackContainer from "./TrackContainer.js";
-import TracksContainer from "./TracksContainer.js";
-const NoTracksActiveButton = lazy(() => import("./NoTracksActiveButton.js"));
+import { SCALE_BAR_HEIGHT } from '../consts.js';
+import { stickyChromeTops } from '../stickyChrome.js';
+import Header from './Header.js';
+import MiniControls from './MiniControls.js';
+import NavigationAnnouncer from './NavigationAnnouncer.js';
+import Rubberband from './Rubberband.js';
+import Scalebar from './Scalebar.js';
+import TrackContainer from './TrackContainer.js';
+import TracksContainer from './TracksContainer.js';
+// lazies
+const NoTracksActiveButton = lazy(() => import('./NoTracksActiveButton.js'));
 const useStyles = makeStyles()(theme => ({
     header: {
         background: theme.palette.background.paper,
-        top: VIEW_HEADER_HEIGHT,
+        // measured, with the constant as the fallback: the view header above is a
+        // minimum-height box that grows with its content, so summing constants
+        // here put this over the bottom of it at a larger root font size
+        top: `var(${VIEW_HEADER_HEIGHT_VAR}, ${VIEW_HEADER_HEIGHT}px)`,
         zIndex: 850,
     },
     pinnedTracks: {
         position: 'sticky',
         zIndex: 3,
+        // cap the sticky block at the space below its top offset so pinning
+        // many/tall tracks scrolls within the block instead of burying the
+        // unpinned tracks underneath it — see the maxHeight below for which space
+        overflowY: 'auto',
     },
     rel: {
         position: 'relative',
     },
 }));
 const LinearGenomeViewContainer = observer(function LinearGenomeViewContainer({ model, }) {
-    const { pinnedTracks, stickyViewHeaders, pinnedTracksTop, tracks, unpinnedTracks, } = model;
+    const { pinnedTracks, stickyViewHeaders, headerHeight, tracks, unpinnedTracks, hideHeader, } = model;
+    const stickyTops = stickyChromeTops({ stickyViewHeaders, headerHeight });
+    const headerRef = useRef(null);
+    useChromeHeightVar(headerRef, LGV_HEADER_HEIGHT_VAR);
     const { classes } = useStyles();
     const session = getSession(model);
     const ref = useRef(null);
-    const MiniControlsComponent = model.MiniControlsComponent();
-    const HeaderComponent = model.HeaderComponent();
+    // cached left edge of the view, refreshed on resize, so the mousemove hover
+    // handler doesn't call getBoundingClientRect() (a layout reflow) every move
+    const rectLeftRef = useRef(0);
+    // The tracks area, and not the whole view — the same rule the click-drag half
+    // already follows (see TracksContainer's useSideScroll), for a bigger payoff.
+    // The chrome above the tracks is the only surface left where a wheel still
+    // means "move down the page": the view header is `position: sticky`, so
+    // binding the gesture below it leaves ~100px of always-visible gutter that
+    // scrolls, instead of the ~26px of view title bar that is all a full-view
+    // binding leaves. That gutter is the whole answer for scroll-to-zoom users,
+    // because there is no modifier to fall back on — the browser turns shift into
+    // horizontal scroll, ctrl/meta is pinch-zoom, and Firefox binds alt to
+    // history navigation.
+    //
+    // Nothing is lost by it: a wheel over the toolbar used to zoom the view from
+    // a point that shows none of it. `wheelBinding.test.tsx` is the pin — which
+    // element the listener is on is a DOM fact, so jsdom sees it exactly;
+    // `browser-tests/probe-scroll-gutter.ts` measures how many pixels wide the
+    // resulting band is, which is the part that needs a real layout and runs by
+    // hand.
+    const tracksRef = useRef(null);
+    useWheelZoom(tracksRef, model);
     useEffect(() => {
-        function handleSelectView(e) {
-            if (e.target instanceof Element && ref.current?.contains(e.target)) {
-                session.setFocusedViewId?.(model.id);
-            }
+        const curr = ref.current;
+        if (!curr) {
+            return;
         }
-        document.addEventListener('mousedown', handleSelectView);
-        document.addEventListener('keydown', handleSelectView);
+        rectLeftRef.current = curr.getBoundingClientRect().left;
+        const observer = 'ResizeObserver' in window
+            ? new ResizeObserver(() => {
+                rectLeftRef.current = curr.getBoundingClientRect().left;
+            })
+            : undefined;
+        observer?.observe(curr);
         return () => {
-            document.removeEventListener('mousedown', handleSelectView);
-            document.removeEventListener('keydown', handleSelectView);
+            observer?.disconnect();
         };
-    }, [session, model]);
-    return (_jsxs("div", { className: classes.rel, ref: ref, onMouseLeave: () => {
-            session.setHovered(undefined);
-        }, onMouseMove: event => {
-            const c = ref.current;
-            if (!c) {
-                return;
-            }
-            const { tracks } = model;
-            const leftPx = event.clientX - c.getBoundingClientRect().left;
-            const hoverPosition = model.pxToBp(leftPx);
-            const hoverFeature = tracks.find(t => t.displays[0].featureUnderMouse);
-            session.setHovered({ hoverPosition, hoverFeature });
-        }, children: [_jsxs("div", { className: classes.header, style: { position: stickyViewHeaders ? 'sticky' : undefined }, children: [_jsx(HeaderComponent, { model: model }), _jsx(MiniControlsComponent, { model: model })] }), _jsx(TracksContainer, { model: model, children: !tracks.length ? (_jsx(Suspense, { fallback: null, children: _jsx(NoTracksActiveButton, { model: model }) })) : (_jsxs(_Fragment, { children: [pinnedTracks.length ? (_jsx(Paper, { elevation: 6, className: classes.pinnedTracks, style: { top: pinnedTracksTop }, children: pinnedTracks.map(track => (_jsx(TrackContainer, { model: model, track: track }, track.id))) })) : null, unpinnedTracks.map(track => (_jsx(TrackContainer, { model: model, track: track }, track.id)))] })) })] }));
+    }, []);
+    // sets the focused view id based on a click within the LGV; necessary for
+    // subviews to be focused properly
+    useFocusOnInteraction(ref, () => {
+        session.setFocusedViewId?.(model.id);
+    });
+    return (_jsx(_Fragment, { children: _jsxs("div", { "data-testid": `linear-genome-view-${model.id}`, className: classes.rel, ref: ref, onMouseLeave: () => {
+                session.setHovered(undefined);
+            }, onMouseMove: event => {
+                const leftPx = event.clientX - rectLeftRef.current;
+                const hoverPosition = model.pxToBp(leftPx);
+                // `hoveredFeature` is BaseDisplay's hook, so every display type
+                // answers it — this used to read `featureUnderMouse`, a name only the
+                // wiggle, alignments and Manhattan families used, off `displays[0]`
+                // alone. At most one display can be under the pointer, so the first
+                // non-empty answer is the answer.
+                const hoverFeature = tracks
+                    .flatMap(t => t.displays)
+                    .map(d => d.hoveredFeature)
+                    .find(Boolean);
+                session.setHovered({ hoverPosition, hoverFeature });
+            }, children: [_jsx(NavigationAnnouncer, { model: model }), _jsxs("div", { ref: headerRef, className: classes.header, style: { position: stickyViewHeaders ? 'sticky' : undefined }, children: [_jsx(Header, { model: model }), hideHeader ? _jsx(MiniControls, { model: model }) : null] }), _jsx("div", { ref: tracksRef, children: model.scalebarOnly ? (_jsx(Rubberband, { model: model, ControlComponent: _jsx(Scalebar, { model: model, style: { height: SCALE_BAR_HEIGHT, boxSizing: 'border-box' } }) })) : (_jsx(TracksContainer, { model: model, children: !tracks.length ? (_jsx(Suspense, { fallback: null, children: _jsx(NoTracksActiveButton, { model: model }) })) : (_jsxs(_Fragment, { children: [pinnedTracks.length ? (_jsx(Paper, { elevation: 6, className: classes.pinnedTracks, style: {
+                                        top: stickyTops.pinnedTracks,
+                                        // the scroll port this sticks in, not the window: it is
+                                        // under the app bar in the classic stack, a dockview
+                                        // cell in a workspace, and the host's box when embedded.
+                                        // The fallback is what an unbounded embed gets, where
+                                        // the page itself is the scroller
+                                        maxHeight: `calc(var(${SCROLL_PORT_HEIGHT_VAR}, 100vh) - ${stickyTops.pinnedTracks})`,
+                                    }, children: pinnedTracks.map(track => (_jsx(TrackContainer, { model: model, track: track }, track.id))) })) : null, unpinnedTracks.map(track => (_jsx(TrackContainer, { model: model, track: track }, track.id)))] })) })) })] }) }));
 });
 export default LinearGenomeViewContainer;

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

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

package/esm/LinearGenomeView/components/MiniControls.js

@@ -1,17 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton';
+import { TrackSelector as TrackSelectorIcon } from '@jbrowse/core/ui/Icons';
 import { getSession } from '@jbrowse/core/util';
 import { makeStyles } from '@jbrowse/core/util/tss-react';
-import ArrowDown from '@mui/icons-material/KeyboardArrowDown';
-import ZoomIn from '@mui/icons-material/ZoomIn';
-import ZoomOut from '@mui/icons-material/ZoomOut';
-import { IconButton, Paper, alpha } from '@mui/material';
+import AddIcon from '@mui/icons-material/Add';
+import MoreVertIcon from '@mui/icons-material/MoreVert';
+import RemoveIcon from '@mui/icons-material/Remove';
+import { IconButton, Paper, Tooltip, alpha } from '@mui/material';
 import { observer } from 'mobx-react';
+import ZoomButton from './ZoomButton.js';
 const useStyles = makeStyles()(theme => ({
     background: {
         position: 'absolute',
         right: 0,
         background: theme.palette.background.paper,
+        // needed when sticky header is off in lgv, e.g. in breakpoint split view
         zIndex: 2,
     },
     focusedBackground: {
@@ -20,12 +23,12 @@ const useStyles = makeStyles()(theme => ({
 }));
 const MiniControls = observer(function MiniControls({ model, }) {
     const { classes } = useStyles();
-    const { id, bpPerPx, maxBpPerPx, minBpPerPx, hideHeader, effectiveBpPerPx } = model;
+    const { id, scalebarOnly } = model;
     const { focusedViewId } = getSession(model);
-    return hideHeader ? (_jsx(Paper, { className: classes.background, children: _jsxs(Paper, { className: focusedViewId === id ? classes.focusedBackground : undefined, children: [_jsx(CascadingMenuButton, { menuItems: () => model.menuItems(), children: _jsx(ArrowDown, { fontSize: "small" }) }), _jsx(IconButton, { "data-testid": "zoom_out", onClick: () => {
-                        model.zoom(bpPerPx * 2);
-                    }, disabled: effectiveBpPerPx >= maxBpPerPx - 0.0001, children: _jsx(ZoomOut, { fontSize: "small" }) }), _jsx(IconButton, { "data-testid": "zoom_in", onClick: () => {
-                        model.zoom(bpPerPx / 2);
-                    }, disabled: effectiveBpPerPx <= minBpPerPx + 0.0001, children: _jsx(ZoomIn, { fontSize: "small" }) })] }) })) : null;
+    return (_jsx(Paper, { className: classes.background, children: _jsxs(Paper, { className: focusedViewId === id ? classes.focusedBackground : undefined, children: [_jsx(Tooltip, { title: "Open track selector", children: _jsx(IconButton, { size: "small", onClick: () => {
+                            model.activateTrackSelector();
+                        }, children: _jsx(TrackSelectorIcon, { fontSize: "small" }) }) }), _jsx(CascadingMenuButton, { menuItems: () => model.menuItems(), children: _jsx(MoreVertIcon, { fontSize: "small" }) }), _jsx(Tooltip, { title: scalebarOnly ? 'Expand tracks' : 'Collapse to ruler', children: _jsx(IconButton, { size: "small", onClick: () => {
+                            model.setScalebarOnly(!scalebarOnly);
+                        }, children: scalebarOnly ? (_jsx(AddIcon, { fontSize: "small" })) : (_jsx(RemoveIcon, { fontSize: "small" })) }) }), _jsx(ZoomButton, { model: model, direction: "out", small: true }), _jsx(ZoomButton, { model: model, direction: "in", small: true })] }) }));
 });
 export default MiniControls;

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

@@ -0,0 +1,3 @@
+import type { SequenceSearchModeProps } from './searchModes.ts';
+declare const MotifListPanel: ({ model, handleClose, }: SequenceSearchModeProps) => import("react").JSX.Element;
+export default MotifListPanel;

package/esm/LinearGenomeView/components/MotifListPanel.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { isPalindromic, parseMotifList, pluralize } from '@jbrowse/core/util';
+import { Button, TextField, Typography } from '@mui/material';
+import { observer } from 'mobx-react';
+import SearchPanelForm from './SearchPanelForm.js';
+import StrandCheckboxes from './StrandCheckboxes.js';
+import { DEFAULT_MOTIFS } from './defaultMotifs.js';
+import { addReferenceScanTrack } from './searchModes.js';
+const MotifListPanel = observer(function MotifListPanel({ model, handleClose, }) {
+    const [text, setText] = useState(DEFAULT_MOTIFS);
+    const [searchForward, setSearchForward] = useState(true);
+    const [searchReverse, setSearchReverse] = useState(true);
+    const { motifs, errors } = parseMotifList(text);
+    // strand choice only means something for motifs that read differently on the
+    // two strands; most restriction sites are palindromes, which always match both
+    const hasStrandedMotif = motifs.some(m => !isPalindromic(m.site));
+    const strandValid = !hasStrandedMotif || searchForward || searchReverse;
+    const canSubmit = motifs.length > 0 && errors.length === 0 && strandValid;
+    function handleSubmitCombined() {
+        addReferenceScanTrack(model, {
+            trackId: `motif_search_${Date.now()}`,
+            name: motifs.length === 1
+                ? `Motif ${motifs[0].name}`
+                : `Motif search (${motifs.length} motifs)`,
+            adapter: {
+                type: 'MotifListAdapter',
+                motifs: text,
+                searchForward,
+                searchReverse,
+            },
+        });
+        handleClose();
+    }
+    function handleSubmitSeparate() {
+        const now = Date.now();
+        for (const [idx, motif] of motifs.entries()) {
+            addReferenceScanTrack(model, {
+                trackId: `motif_search_${now}_${idx}`,
+                name: `Motif ${motif.name}`,
+                adapter: {
+                    type: 'MotifListAdapter',
+                    motifs: motif.line,
+                    searchForward,
+                    searchReverse,
+                },
+            });
+        }
+        handleClose();
+    }
+    return (_jsxs(SearchPanelForm, { onSubmit: handleSubmitCombined, handleClose: handleClose, submitDisabled: !canSubmit, submitText: "Launch as one track", actions: motifs.length > 1 ? (_jsx(Button, { type: "button", onClick: () => {
+                handleSubmitSeparate();
+            }, disabled: !canSubmit, variant: "contained", color: "primary", children: "Launch one track per motif" })) : null, children: [_jsx(TextField, { multiline: true, fullWidth: true, rows: 12, variant: "outlined", label: "Motifs", value: text, onChange: event => {
+                    setText(event.target.value);
+                }, slotProps: { htmlInput: { style: { fontFamily: 'monospace' } } } }), errors.length > 0 ? (_jsx(Typography, { color: "error", variant: "body2", children: errors.map(e => `Line ${e.line}: ${e.message}`).join('\n') })) : (_jsx(Typography, { variant: "body2", color: "textSecondary", children: motifs.length === 0
+                    ? 'Add at least one motif'
+                    : `${motifs.length} ${pluralize(motifs.length, 'motif')}` })), hasStrandedMotif ? (_jsx(StrandCheckboxes, { searchForward: searchForward, searchReverse: searchReverse, setSearchForward: setSearchForward, setSearchReverse: setSearchReverse })) : motifs.length > 0 ? (_jsx(Typography, { variant: "body2", color: "textSecondary", children: "All motifs are palindromic, so each match covers both strands." })) : null] }));
+});
+export default MotifListPanel;