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

package/esm/LinearGenomeView/components/HeaderClearHighlightButton.js

@@ -24,9 +24,9 @@ export function highlightedDisplays(model) {
         .filter(isFeatureHighlightCapable)
         .filter(d => d.featureHighlights.length > 0);
 }
-// Clears every highlight in the view at once. Shown only while there is one.
+// Clears every feature highlight in the view. Shown only while there is one.
 const HeaderClearHighlightButton = observer(function HeaderClearHighlightButton({ highlighted, }) {
-    return highlighted.length > 0 ? (_jsx(IconButton, { "data-testid": "clear_search_highlight", title: "Clear highlights", onClick: () => {
+    return highlighted.length > 0 ? (_jsx(IconButton, { "data-testid": "clear_search_highlight", title: "Clear feature highlights", onClick: () => {
             for (const d of highlighted) {
                 d.clearFeatureHighlights();
             }

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

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

package/esm/LinearGenomeView/components/HeaderPanControls.js

@@ -1,8 +1,10 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { alpha } from '@jbrowse/core/ui/palette';
 import { makeStyles } from '@jbrowse/core/util/tss-react';
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
-import { Button, alpha } from '@mui/material';
+import { Button } from '@mui/material';
+import { observer } from 'mobx-react';
 import { SPACING, WIDGET_HEIGHT } from '../consts.js';
 const useStyles = makeStyles()(theme => ({
     panButton: {
@@ -19,7 +21,7 @@ const useStyles = makeStyles()(theme => ({
         padding: theme.spacing(0, 0.5),
     },
 }));
-export default function HeaderPanControls({ model, compact, }) {
+const HeaderPanControls = observer(function HeaderPanControls({ model, compact, }) {
     const { classes, cx } = useStyles();
     const className = cx(classes.panButton, compact && classes.compact);
     return (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "outlined", "aria-label": "Pan left", className: className, onClick: () => {
@@ -27,4 +29,5 @@ export default function HeaderPanControls({ model, compact, }) {
                 }, children: _jsx(ArrowBackIcon, {}) }), _jsx(Button, { variant: "outlined", "aria-label": "Pan right", className: className, onClick: () => {
                     model.slide(0.9);
                 }, children: _jsx(ArrowForwardIcon, {}) })] }));
-}
+});
+export default HeaderPanControls;

package/esm/LinearGenomeView/components/HeaderSearchBoxes.js

@@ -13,8 +13,11 @@ const useStyles = makeStyles()(theme => ({
         display: 'flex',
         alignItems: 'center',
         gap: theme.spacing(0.5),
+        minWidth: 0,
     },
 }));
+const MIN_BOX_WIDTH = 100;
+const boxStyle = { margin: 0, minWidth: MIN_BOX_WIDTH };
 // One row's locate control in a header that stacks several linear genome views:
 // the compact search box, then the assembly name and the span on screen. The
 // comparative view and the breakpoint split view each draw one per row, and each
@@ -23,6 +26,6 @@ const useStyles = makeStyles()(theme => ({
 const HeaderSearchBoxes = observer(function HeaderSearchBoxes({ view, }) {
     const { classes } = useStyles();
     const { assemblyDisplayNames, coarseTotalBp } = view;
-    return (_jsxs("span", { className: classes.searchBox, children: [_jsx(SearchBox, { model: view, showHelp: false, maxWidth: 250, minWidth: 100, style: { margin: 0 } }), _jsxs(Typography, { variant: "body2", color: "text.secondary", className: classes.bp, children: [assemblyDisplayNames.join(','), " ", getBpDisplayStr(coarseTotalBp)] })] }));
+    return (_jsxs("span", { className: classes.searchBox, children: [_jsx(SearchBox, { model: view, showHelp: false, maxWidth: 250, minWidth: MIN_BOX_WIDTH, style: boxStyle }), _jsxs(Typography, { variant: "body2", color: "text.secondary", className: classes.bp, children: [assemblyDisplayNames.join(','), " ", getBpDisplayStr(coarseTotalBp)] })] }));
 });
 export default HeaderSearchBoxes;

package/esm/LinearGenomeView/components/HeaderZoomControls.js

@@ -1,14 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { lazy, useState } from 'react';
+import { useState } from 'react';
 import { SingleSlider } from '@jbrowse/core/ui';
 import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton';
-import { getBpDisplayStr, getDialogHost } 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 { observer } from 'mobx-react';
-import { showAllRegionsMenuItem } from '../menuItems.js';
+import { zoomMenuItems } from '../menuItems.js';
 import ZoomButton from './ZoomButton.js';
-const RegionWidthEditorDialog = lazy(() => import('./RegionWidthEditorDialog.js'));
 const useStyles = makeStyles()(theme => ({
     container: {
         display: 'flex',
@@ -29,35 +28,6 @@ const useStyles = makeStyles()(theme => ({
         },
     },
 }));
-function getZoomMenuItems(model) {
-    return [
-        ...[10, 50, 100].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);
-            },
-        })),
-        showAllRegionsMenuItem(model),
-        {
-            label: 'Custom zoom',
-            onClick: () => {
-                getDialogHost(model).queueDialog(handleClose => [
-                    RegionWidthEditorDialog,
-                    {
-                        model,
-                        handleClose,
-                    },
-                ]);
-            },
-        },
-    ];
-}
 // 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
@@ -67,11 +37,12 @@ const ZoomSlider = observer(function ZoomSlider({ model, }) {
     const { width, maxBpPerPx, minBpPerPx, bpPerPx } = model;
     const [dragValue, setDragValue] = useState(null);
     const value = dragValue ?? -Math.log2(bpPerPx) * 100;
+    const windowSize = (sliderValue) => `Window size: ${getBpDisplayStr(2 ** (-sliderValue / 100) * width)}`;
     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 => {
+        }, valueLabelDisplay: "auto", "aria-label": "Zoom level", valueLabelFormat: newValue => windowSize(newValue), getAriaValueText: newValue => windowSize(newValue), 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) {
@@ -82,6 +53,6 @@ const ZoomSlider = observer(function ZoomSlider({ model, }) {
 });
 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: () => getZoomMenuItems(model), children: _jsx(MoreVert, {}) })] }));
+    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, { tooltip: "Zoom options", menuItems: () => zoomMenuItems(model), children: _jsx(MoreVert, {}) })] }));
 });
 export default HeaderZoomControls;

package/esm/LinearGenomeView/components/Highlight.js

@@ -1,28 +1,44 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useHighlightChip } from '@jbrowse/core/ui/highlightChipReveal';
+import { useStyleTheme } from '@jbrowse/core/ui/PaletteContext';
 import { getSession } from '@jbrowse/core/util';
 import CloseIcon from '@mui/icons-material/Close';
+import EditIcon from '@mui/icons-material/Edit';
 import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
-import { useTheme } from '@mui/material';
 import { observer } from 'mobx-react';
 import HighlightBand from './HighlightBand.js';
 import HighlightChip from './HighlightChip.js';
+import HighlightLabelDialog from './HighlightLabelDialog.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 theme = useStyleTheme();
     const coords = model.getHighlightCoords(highlight);
     const bandColor = getHighlightColor(highlight, theme);
-    const label = model.labelsVisible ? highlight.label : undefined;
-    const { chipVisible, setMenuOpen } = useHighlightChip(coords, model.showHighlightChips);
-    return coords ? (_jsx(HighlightBand, { coords: coords, background: bandColor.toRgbString(), label: label, children: chipVisible && coords.width >= CHIP_MIN_WIDTH ? (_jsx(HighlightChip, { color: bandColor, label: label, tooltip: highlight.label ?? 'Highlighted region', setOpen: setMenuOpen, menuItems: [
+    const label = getSession(model).highlightLabelsVisible
+        ? highlight.label
+        : undefined;
+    return coords ? (_jsx(HighlightBand, { coords: coords, background: bandColor.toRgbString(), label: label, gaps: model.nonGenomicTrackBands(), children: _jsx(HighlightChip, { color: bandColor, label: label, tooltip: highlight.label ?? 'Highlighted region', menuItems: [
+                {
+                    label: 'Edit label...',
+                    icon: EditIcon,
+                    onClick: () => {
+                        const session = getSession(model);
+                        session.queueDialog(handleClose => [
+                            HighlightLabelDialog,
+                            {
+                                label: highlight.label,
+                                onSubmit: (label) => {
+                                    session.updateHighlight(highlight, { label });
+                                },
+                                handleClose,
+                            },
+                        ]);
+                    },
+                },
                 {
                     label: 'Dismiss highlight',
                     icon: CloseIcon,
                     onClick: () => {
-                        model.removeHighlight(highlight);
+                        getSession(model).removeHighlight(highlight);
                     },
                 },
                 {
@@ -33,6 +49,6 @@ const Highlight = observer(function Highlight({ model, highlight, }) {
                     },
                 },
                 ...model.highlightMenuItems(highlight),
-            ] })) : null })) : null;
+            ] }) })) : null;
 });
 export default Highlight;

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

@@ -1,9 +1,18 @@
-export default function HighlightBand({ coords, background, label, children, }: {
+export declare function gapMask(gaps: {
+    top: number;
+    height: number;
+}[]): string;
+declare const HighlightBand: ({ coords, background, label, gaps, children, }: {
     coords: {
         left: number;
         width: number;
     };
     background: string;
     label?: string;
+    gaps?: {
+        top: number;
+        height: number;
+    }[];
     children?: React.ReactNode;
-}): import("react").JSX.Element;
+}) => import("react").JSX.Element;
+export default HighlightBand;

package/esm/LinearGenomeView/components/HighlightBand.js

@@ -1,6 +1,7 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { makeStyles } from '@jbrowse/core/util/tss-react';
 import { Typography } from '@mui/material';
+import { observer } from 'mobx-react';
 const useStyles = makeStyles()(theme => ({
     highlight: {
         height: '100%',
@@ -15,26 +16,44 @@ const useStyles = makeStyles()(theme => ({
         zIndex: 1,
         pointerEvents: 'none',
     },
+    // a sibling of the band, so a label wider than a narrow band runs past its
+    // right edge. No `top`: its static position is the band's top edge, where
+    // the first track's TrackLabel (zIndex 200) would otherwise cover it
     overlay: {
         position: 'absolute',
-        top: 0,
         left: 3,
+        zIndex: 201,
+        pointerEvents: 'none',
+        whiteSpace: 'nowrap',
     },
     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, }) {
+export function gapMask(gaps) {
+    const stops = gaps.flatMap(g => [
+        `#000 ${g.top}px`,
+        `transparent ${g.top}px`,
+        `transparent ${g.top + g.height}px`,
+        `#000 ${g.top + g.height}px`,
+    ]);
+    return `linear-gradient(to bottom, ${stops.join(', ')})`;
+}
+// A colored band with an optional top label; when `children` (the highlight
+// chip) is passed it renders that instead of the plain label. Clicks fall
+// through it to the tracks, which is what keeps it apart from the hoverable
+// OverviewHighlightBand. Visibility is toggled from the view menu
+const HighlightBand = observer(function HighlightBand({ coords, background, label, gaps, children, }) {
     const { classes } = useStyles();
+    const mask = gaps?.length ? gapMask(gaps) : undefined;
     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 }));
-}
+    return (_jsxs(_Fragment, { children: [_jsx("div", { "data-testid": "highlight-band", className: classes.highlight, style: {
+                    transform: `translateX(${coords.left}px)`,
+                    width: coords.width,
+                    background,
+                    maskImage: mask,
+                    WebkitMaskImage: mask,
+                } }), content ? (_jsx("div", { className: classes.overlay, style: { transform: `translateX(${coords.left}px)` }, children: content })) : null] }));
+});
+export default HighlightBand;

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

@@ -1,9 +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, }: {
+declare const HighlightChip: ({ color, label, tooltip, menuItems, }: {
     color: Colord;
     label?: string;
     tooltip?: string;
     menuItems: MenuItem[];
-    setOpen?: (arg: boolean) => void;
-}): import("react").JSX.Element;
+}) => import("react").JSX.Element;
+export default HighlightChip;

package/esm/LinearGenomeView/components/HighlightChip.js

@@ -2,14 +2,19 @@ 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, }) {
+import { observer } from 'mobx-react';
+// Interactive chip at a highlight band's top: a link icon tinted to the band
+// color plus an optional inline label, wrapped in a context menu. Its own
+// background keeps it legible over the first track's label, and it sets its own
+// pointer-events since the band is click-through.
+const HighlightChip = observer(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, 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] }) }) }) }));
-}
+    return (_jsx(Box, { sx: {
+            pointerEvents: 'auto',
+            bgcolor: 'background.paper',
+            borderRadius: 1,
+        }, 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] }) }) }) }));
+});
+export default HighlightChip;

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

@@ -0,0 +1,6 @@
+declare const HighlightLabelDialog: ({ label, onSubmit, handleClose, }: {
+    label?: string;
+    onSubmit: (label: string | undefined) => void;
+    handleClose: () => void;
+}) => import("react").JSX.Element;
+export default HighlightLabelDialog;

package/esm/LinearGenomeView/components/HighlightLabelDialog.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { SubmitDialog } from '@jbrowse/core/ui';
+import { TextField } from '@mui/material';
+import { observer } from 'mobx-react';
+// Names a highlight. The label is written on the band and in every view that
+// draws the session's highlights, such as an alignment's column or a
+// structure's residue; an empty label leaves the highlight unnamed.
+const HighlightLabelDialog = observer(function HighlightLabelDialog({ label, onSubmit, handleClose, }) {
+    const [val, setVal] = useState(label ?? '');
+    return (_jsx(SubmitDialog, { open: true, maxWidth: "xs", fullWidth: true, title: "Edit highlight label", onCancel: handleClose, onSubmit: () => {
+            onSubmit(val.trim() || undefined);
+            handleClose();
+        }, children: _jsx(TextField, { label: "Label", autoFocus: true, fullWidth: true, variant: "outlined", value: val, onChange: event => {
+                setVal(event.target.value);
+            } }) }));
+});
+export default HighlightLabelDialog;

package/esm/LinearGenomeView/components/HoverPositionHighlight.js

@@ -6,9 +6,9 @@ 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}`,
+        background: alpha(theme.palette.accent, 0.4),
+        borderLeft: `2px solid ${theme.palette.accent}`,
+        borderRight: `2px solid ${theme.palette.accent}`,
         pointerEvents: 'none',
         zIndex: 10,
     },

package/esm/LinearGenomeView/components/ImportForm.js

@@ -20,9 +20,8 @@ const useStyles = makeStyles()(theme => ({
 const LinearGenomeViewImportForm = observer(function LinearGenomeViewImportForm({ model, }) {
     const { classes } = useStyles();
     const session = getSession(model);
-    const { textSearchManager } = session;
     const { error: viewError } = model;
-    const { selectedAssemblyName: selectedAsm, setSelectedAssemblyName, assembly, assemblyError, regions, } = useAssemblySelection(session, 'lgv');
+    const { selectedAssemblyName: selectedAsm, setSelectedAssemblyName, 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
@@ -45,12 +44,12 @@ const LinearGenomeViewImportForm = observer(function LinearGenomeViewImportForm(
         model.setError(undefined);
         if (selectedAsm) {
             try {
-                await navigateToSelectedOption({
+                const moved = await navigateToSelectedOption({
                     option,
                     model,
                     assemblyName: selectedAsm,
                 });
-                if (record) {
+                if (record && moved) {
                     addRecentLocation(recentLocationOf(option));
                 }
             }
@@ -62,7 +61,7 @@ const LinearGenomeViewImportForm = observer(function LinearGenomeViewImportForm(
     const recentMenuItems = recentLocationsMenu({
         recentLocations,
         onNavigate: option => {
-            navigate({ option, record: true }).catch(() => { });
+            void navigate({ option, record: true });
         },
         onClear: clearRecentLocations,
     });
@@ -84,12 +83,11 @@ const LinearGenomeViewImportForm = observer(function LinearGenomeViewImportForm(
                                 // reason.
                                 model.setError(undefined);
                                 setSelectedAssemblyName(val);
-                            }, session: session, selected: selectedAsm }), selectedAsm ? (assemblyError ? (_jsx(CloseIcon, { color: "error" })) : regions ? (_jsx(RefNameAutocomplete, { fetchResults: (queryString, stopToken) => fetchResults({
+                            }, session: session, selected: selectedAsm }), selectedAsm ? (assemblyError ? (_jsx(CloseIcon, { color: "error" })) : regions ? (_jsx(RefNameAutocomplete, { fetchResults: (queryString, signal) => fetchResults({
+                                session,
                                 queryString,
-                                assembly,
-                                textSearchManager,
                                 assemblyName: selectedAsm,
-                                stopToken,
+                                signal,
                             }), session: session, assemblyName: selectedAsm, value: value, minWidth: 270, adornmentWidth: adornmentReservePx({
                                 menuItemCount: recentMenuItems.length,
                             }), onChange: v => {

package/esm/LinearGenomeView/components/LinearGenomeView.js

@@ -1,20 +1,13 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { lazy } from 'react';
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Suspense, lazy } from 'react';
 import { ViewLoadingScreen } from '@jbrowse/core/ui';
 import { observer } from 'mobx-react';
 import LinearGenomeViewContainer from './LinearGenomeViewContainer.js';
 // lazies
 const ImportForm = lazy(() => import('./ImportForm.js'));
+const SearchResultsDialog = lazy(() => import('./SearchResultsDialog.js'));
 const LinearGenomeView = observer(function LinearGenomeView({ model, }) {
-    const { showLoading, showImportForm, loadingMessage, loadingProgress } = model;
-    if (showLoading) {
-        return (_jsx(ViewLoadingScreen, { message: loadingMessage, fraction: loadingProgress, source: model.loadingSource }));
-    }
-    else if (showImportForm) {
-        return _jsx(ImportForm, { model: model });
-    }
-    else {
-        return _jsx(LinearGenomeViewContainer, { model: model });
-    }
+    const { loading, showImportForm, searchPicker } = model;
+    return (_jsxs(_Fragment, { children: [loading ? (_jsx(ViewLoadingScreen, { ...loading })) : showImportForm ? (_jsx(ImportForm, { model: model })) : (_jsx(LinearGenomeViewContainer, { model: model })), searchPicker ? (_jsx(Suspense, { fallback: null, children: _jsx(SearchResultsDialog, { model: model }) })) : null] }));
 });
 export default LinearGenomeView;

package/esm/LinearGenomeView/components/LinearGenomeViewContainer.js

@@ -1,5 +1,5 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Suspense, lazy, useEffect, useRef } from 'react';
+import { 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';
@@ -7,17 +7,15 @@ 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 { 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 NoTracksActiveButton from './NoTracksActiveButton.js';
+import ResizeAllTracksHandle from './ResizeAllTracksHandle.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,
@@ -101,18 +99,19 @@ const LinearGenomeViewContainer = observer(function LinearGenomeViewContainer({
                 // 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)
+                    .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: {
+                // `viewId` lets a view paired with one linear view ignore another
+                // showing the same locus
+                session.setHovered({ hoverPosition, hoverFeature, viewId: model.id });
+            }, children: [_jsx(NavigationAnnouncer, { model: model }), _jsxs("div", { ref: headerRef, "data-testid": `lgv-header-${model.id}`, 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 })) : (_jsx(TracksContainer, { model: model, children: !tracks.length ? (_jsx(NoTracksActiveButton, { model: model })) : (_jsxs(_Fragment, { children: [pinnedTracks.length ? (_jsx(Paper, { elevation: 2, "data-testid": "pinned-tracks", 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
+                                        // the scroll port this sticks in, not the window: a
+                                        // workspace cell, or 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)))] })) })) })] }) }));
+                                    }, children: pinnedTracks.map(track => (_jsx(TrackContainer, { model: model, track: track }, track.id))) })) : null, unpinnedTracks.map(track => (_jsx(TrackContainer, { model: model, track: track }, track.id))), _jsx(ResizeAllTracksHandle, { model: model })] })) })) })] }) }));
 });
 export default LinearGenomeViewContainer;

package/esm/LinearGenomeView/components/MiniControls.js

@@ -1,33 +1,39 @@
 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 { alpha } from '@jbrowse/core/ui/palette';
 import { getSession } from '@jbrowse/core/util';
 import { makeStyles } from '@jbrowse/core/util/tss-react';
 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 { IconButton, Paper, Tooltip } 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: {
-        background: alpha(theme.palette.secondary.light, 0.2),
+        backgroundColor: alpha(theme.palette.secondary.light, 0.2),
     },
 }));
 const MiniControls = observer(function MiniControls({ model, }) {
     const { classes } = useStyles();
     const { id, scalebarOnly } = model;
     const { focusedViewId } = getSession(model);
-    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: () => {
+    // A ruler-only row is shorter than these controls, so they rise from the
+    // ruler's bottom edge rather than hang from its top: a nested row always has
+    // chrome above it, while the last row of a stack has only the view's frame
+    // below.
+    return (_jsx(Paper, { "data-testid": "lgv-mini-controls", className: classes.background, style: scalebarOnly
+            ? { top: model.scalebarHeight, transform: 'translateY(-100%)' }
+            : undefined, 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: () => {
+                        }, children: _jsx(TrackSelectorIcon, { fontSize: "small" }) }) }), _jsx(CascadingMenuButton, { tooltip: "View menu", menuItems: () => model.menuItems(), children: _jsx(MoreVertIcon, { fontSize: "small" }) }), _jsx(Tooltip, { title: scalebarOnly ? 'Show tracks' : 'Show ruler only', 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 })] }) }));
 });

package/esm/LinearGenomeView/components/OverviewHighlight.js

@@ -1,17 +1,17 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useStyleTheme } from '@jbrowse/core/ui/PaletteContext';
 import { getSession, notEmpty } from '@jbrowse/core/util';
 import { colord } from '@jbrowse/core/util/colord';
-import { useTheme } from '@mui/material';
 import { observer } from 'mobx-react';
 import OverviewHighlightBand from './OverviewHighlightBand.js';
 import { getHighlightColor, highlightKey } from './util.js';
 const OverviewHighlight = observer(function OverviewHighlight({ model, }) {
-    const theme = useTheme();
+    const theme = useStyleTheme();
     const themed = colord(theme.palette.highlight.main);
     // gate on highlightsVisible to match the main-view band, scalebar band, and
     // SVG export — otherwise "Turn off highlights" leaves the overview bands up
     return getSession(model).highlightsVisible
-        ? model.highlight
+        ? model.highlights
             .map(highlight => {
             const coords = model.getOverviewHighlightCoords(highlight);
             return coords ? { coords, highlight } : undefined;

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

@@ -1,4 +1,4 @@
-export default function OverviewHighlightBand({ coords, background, borderColor, tooltip, }: {
+declare const OverviewHighlightBand: ({ coords, background, borderColor, tooltip, }: {
     coords: {
         left: number;
         width: number;
@@ -6,4 +6,5 @@ export default function OverviewHighlightBand({ coords, background, borderColor,
     background: string;
     borderColor?: string;
     tooltip?: string;
-}): import("react").JSX.Element;
+}) => import("react").JSX.Element;
+export default OverviewHighlightBand;