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

package/esm/LinearGenomeView/components/LinearGenomeViewContainer.js

@@ -1,59 +1,117 @@
-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 { stickyChromeTops } from '../stickyChrome.js';
+import Header from './Header.js';
+import MiniControls from './MiniControls.js';
+import NavigationAnnouncer from './NavigationAnnouncer.js';
+import ResizeAllTracksHandle from './ResizeAllTracksHandle.js';
+import Rubberband from './Rubberband.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, "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(Suspense, { fallback: null, children: _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
+                                        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))), _jsx(ResizeAllTracksHandle, { model: model })] })) })) })] }) }));
 });
 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,21 @@
 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 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 } 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 +24,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 ? '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 })] }) }));
 });
 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;

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

@@ -0,0 +1,32 @@
+import type { LinearGenomeViewModel } from '../index.ts';
+/**
+ * The one thing that tells a screen-reader user a pan, a zoom or a search
+ * actually moved the view: a polite live region restating where the view now is.
+ *
+ * **It reads `coarseVisibleLocStrings`, never `visibleLocStrings`**, and that is
+ * the whole design. The fine one changes on every `offsetPx` write — every frame
+ * of a drag, a wheel zoom or a keyboard slide — and a live region driven by it
+ * queues an utterance per frame, which does not merely say too much: it makes
+ * the screen reader unusable for as long as the drag lasts, because polite
+ * announcements are a queue rather than a latest-value. The coarse blocks are
+ * already the view's settled signal, published by a `delay: 500` autorun
+ * (`setupCoarseDynamicBlocksAutorun`) and flushed synchronously by `moveTo` so a
+ * discrete jump — a search, a bookmark, `navToLocString` — announces at once
+ * instead of 500ms later. Both properties are what this needs, so this adds no
+ * timer of its own; if the debounce ever moves, this moves with it.
+ *
+ * Its own observer so the view container does not re-render when the locus
+ * settles: this component is a text node with no children, and the container
+ * mounts every track.
+ *
+ * The region is rendered with its text from the first render rather than being
+ * filled after mount. A live region whose content is present when the node is
+ * inserted is generally not announced (the region has to exist before the
+ * change), so in practice a freshly-mounted view says nothing; where a reader
+ * does announce it, "chr1:1..1,000" as the view appears is a fair thing to hear,
+ * and it is one utterance per view rather than one per frame.
+ */
+declare const NavigationAnnouncer: ({ model, }: {
+    model: LinearGenomeViewModel;
+}) => import("react").JSX.Element;
+export default NavigationAnnouncer;

package/esm/LinearGenomeView/components/NavigationAnnouncer.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { observer } from 'mobx-react';
+// Off-screen but not `display:none` / `visibility:hidden` / `aria-hidden` — any
+// of those takes the node out of the accessibility tree, which is exactly what a
+// live region must not be. The 1px-clipped box is the long-standing spelling of
+// "readable by assistive tech, occupying no layout".
+const visuallyHidden = {
+    position: 'absolute',
+    width: 1,
+    height: 1,
+    margin: -1,
+    padding: 0,
+    border: 0,
+    overflow: 'hidden',
+    clipPath: 'inset(50%)',
+    whiteSpace: 'nowrap',
+};
+/**
+ * The one thing that tells a screen-reader user a pan, a zoom or a search
+ * actually moved the view: a polite live region restating where the view now is.
+ *
+ * **It reads `coarseVisibleLocStrings`, never `visibleLocStrings`**, and that is
+ * the whole design. The fine one changes on every `offsetPx` write — every frame
+ * of a drag, a wheel zoom or a keyboard slide — and a live region driven by it
+ * queues an utterance per frame, which does not merely say too much: it makes
+ * the screen reader unusable for as long as the drag lasts, because polite
+ * announcements are a queue rather than a latest-value. The coarse blocks are
+ * already the view's settled signal, published by a `delay: 500` autorun
+ * (`setupCoarseDynamicBlocksAutorun`) and flushed synchronously by `moveTo` so a
+ * discrete jump — a search, a bookmark, `navToLocString` — announces at once
+ * instead of 500ms later. Both properties are what this needs, so this adds no
+ * timer of its own; if the debounce ever moves, this moves with it.
+ *
+ * Its own observer so the view container does not re-render when the locus
+ * settles: this component is a text node with no children, and the container
+ * mounts every track.
+ *
+ * The region is rendered with its text from the first render rather than being
+ * filled after mount. A live region whose content is present when the node is
+ * inserted is generally not announced (the region has to exist before the
+ * change), so in practice a freshly-mounted view says nothing; where a reader
+ * does announce it, "chr1:1..1,000" as the view appears is a fair thing to hear,
+ * and it is one utterance per view rather than one per frame.
+ */
+const NavigationAnnouncer = observer(function NavigationAnnouncer({ model, }) {
+    const { coarseVisibleLocStrings, coarseTotalBpDisplayStr } = model;
+    return (_jsx("div", { role: "status", "aria-live": "polite", "aria-atomic": "true", style: visuallyHidden, children: coarseVisibleLocStrings
+            ? `${coarseVisibleLocStrings} (${coarseTotalBpDisplayStr})`
+            : '' }));
+});
+export default NavigationAnnouncer;

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

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

package/esm/LinearGenomeView/components/NoTracksActiveButton.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { TrackSelector as TrackSelectorIcon } from '@jbrowse/core/ui/Icons';
 import { makeStyles } from '@jbrowse/core/util/tss-react';
 import { Button, Paper, Typography } from '@mui/material';

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

@@ -1,8 +1,6 @@
 import type { LinearGenomeViewModel } from '../model.ts';
-import type { Base1DViewModel } from '@jbrowse/core/util/Base1DViewModel';
 type LGV = LinearGenomeViewModel;
-declare const OverviewHighlight: ({ model, overview, }: {
+declare const OverviewHighlight: ({ model, }: {
     model: LGV;
-    overview: Base1DViewModel;
-}) => import("react/jsx-runtime").JSX.Element[];
+}) => import("react").JSX.Element[] | null;
 export default OverviewHighlight;

package/esm/LinearGenomeView/components/OverviewHighlight.js

@@ -1,50 +1,29 @@
 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 { makeStyles } from '@jbrowse/core/util/tss-react';
 import { observer } from 'mobx-react';
-const useStyles = makeStyles()(theme => ({
-    highlight: {
-        height: '100%',
-        position: 'absolute',
-        left: 0,
-        background: colord(theme.palette.highlight.main).alpha(0.35).toRgbString(),
-        borderLeft: `1px solid ${theme.palette.highlight.main}`,
-        borderRight: `1px solid ${theme.palette.highlight.main}`,
-    },
-}));
-const OverviewHighlight = observer(function OverviewHighlight({ model, overview, }) {
-    const { classes } = useStyles();
-    const { highlight, cytobandOffset } = model;
-    const session = getSession(model);
-    const { assemblyManager } = session;
-    return highlight
-        .map(r => {
-        const asm = r.assemblyName
-            ? assemblyManager.get(r.assemblyName)
-            : undefined;
-        const refName = asm?.getCanonicalRefName(r.refName) ?? r.refName;
-        const s = overview.bpToPx({
-            ...r,
-            refName,
-            coord: r.start,
-        });
-        const e = overview.bpToPx({
-            ...r,
-            refName,
-            coord: r.end,
-        });
-        return s !== undefined && e !== undefined
-            ? {
-                width: Math.abs(e - s),
-                left: s + cytobandOffset,
-            }
-            : undefined;
-    })
-        .filter(notEmpty)
-        .map(({ left, width }, idx) => (_jsx("div", { className: classes.highlight, style: {
-            width,
-            transform: `translateX(${left}px)`,
-        } }, `${left}_${width}_${idx}`)));
+import OverviewHighlightBand from './OverviewHighlightBand.js';
+import { getHighlightColor, highlightKey } from './util.js';
+const OverviewHighlight = observer(function OverviewHighlight({ model, }) {
+    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.highlights
+            .map(highlight => {
+            const coords = model.getOverviewHighlightCoords(highlight);
+            return coords ? { coords, highlight } : undefined;
+        })
+            .filter(notEmpty)
+            .map(({ coords, highlight }, idx) => {
+            const bandColor = getHighlightColor(highlight, theme);
+            return (_jsx(OverviewHighlightBand
+            // region fields keep the key stable across pan/zoom (unlike pixel
+            // coords); idx disambiguates duplicate highlights on the region
+            , { coords: coords, background: bandColor.toRgbString(), borderColor: (highlight.color ? bandColor : themed).toRgbString(), tooltip: highlight.label }, highlightKey(highlight, idx)));
+        })
+        : null;
 });
 export default OverviewHighlight;

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

@@ -0,0 +1,9 @@
+export default function OverviewHighlightBand({ coords, background, borderColor, tooltip, }: {
+    coords: {
+        left: number;
+        width: number;
+    };
+    background: string;
+    borderColor?: string;
+    tooltip?: string;
+}): import("react").JSX.Element;

package/esm/LinearGenomeView/components/OverviewHighlightBand.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { makeStyles } from '@jbrowse/core/util/tss-react';
+import { Tooltip } from '@mui/material';
+// A single absolute-positioned band over the overview scalebar. The 1px border
+// keeps very narrow bands visible.
+const useStyles = makeStyles()({
+    highlight: {
+        height: '100%',
+        position: 'absolute',
+        left: 0,
+    },
+});
+export default function OverviewHighlightBand({ coords, background, borderColor, tooltip, }) {
+    const { classes } = useStyles();
+    const band = (_jsx("div", { className: classes.highlight, style: {
+            transform: `translateX(${coords.left}px)`,
+            width: coords.width,
+            background,
+            ...(borderColor && {
+                borderLeft: `1px solid ${borderColor}`,
+                borderRight: `1px solid ${borderColor}`,
+            }),
+        } }));
+    return tooltip ? (_jsx(Tooltip, { title: tooltip, arrow: true, children: band })) : (band);
+}

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

@@ -1,9 +1,9 @@
 import type { LinearGenomeViewModel } from '../index.ts';
-import type { Base1DViewModel } from '@jbrowse/core/util/Base1DViewModel';
+import type { ViewLayout } from '@jbrowse/core/util/Base1DUtils';
 type LGV = LinearGenomeViewModel;
 declare const OverviewRubberband: ({ model, overview, ControlComponent, }: {
     model: LGV;
-    overview: Base1DViewModel;
+    overview: ViewLayout;
     ControlComponent?: React.ReactElement;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export default OverviewRubberband;