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

package/esm/LinearGenomeView/components/Header.js

@@ -1,31 +1,47 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import ScrollZoomToggle from '@jbrowse/core/ui/ScrollZoomToggle';
 import { makeStyles } from '@jbrowse/core/util/tss-react';
-import { FormGroup } from '@mui/material';
+import useMeasure from '@jbrowse/core/util/useMeasure';
 import { observer } from 'mobx-react';
-import HeaderPanControls from "./HeaderPanControls.js";
-import HeaderRegionWidth from "./HeaderRegionWidth.js";
-import HeaderTrackSelectorButton from "./HeaderTrackSelectorButton.js";
-import HeaderZoomControls from "./HeaderZoomControls.js";
-import OverviewScalebar from "./OverviewScalebar.js";
-import SearchBox from "./SearchBox.js";
-import { HEADER_BAR_HEIGHT } from "../consts.js";
+import { HEADER_BAR_HEIGHT } from '../consts.js';
+import { headerFit } from '../headerFit.js';
+import HeaderClearHighlightButton, { highlightedDisplays, } from './HeaderClearHighlightButton.js';
+import HeaderPanControls from './HeaderPanControls.js';
+import HeaderRegionWidth from './HeaderRegionWidth.js';
+import HeaderTrackSelectorButton from './HeaderTrackSelectorButton.js';
+import HeaderZoomControls from './HeaderZoomControls.js';
+import OverviewScalebar from './OverviewScalebar.js';
+import SearchBox, { searchBoxWidth } from './SearchBox.js';
 const useStyles = makeStyles()({
     headerBar: {
         display: 'flex',
-        height: HEADER_BAR_HEIGHT,
-    },
-    headerForm: {
-        flexWrap: 'nowrap',
-        marginRight: 7,
+        alignItems: 'center',
+        gap: 4,
+        // a floor, not a height. The constant was written onto this row by #4237 so
+        // the sticky offsets summing it would be true, and the row's own content
+        // reaches it at a 28px root font — the search box measures 48.13 there —
+        // after which a fixed height holds the row smaller than what is in it
+        minHeight: HEADER_BAR_HEIGHT,
     },
     spacer: {
         flexGrow: 1,
     },
 });
-const Controls = function ({ model }) {
+const Controls = observer(function Controls({ model, }) {
     const { classes } = useStyles();
-    return (_jsxs("div", { className: classes.headerBar, children: [_jsx(HeaderTrackSelectorButton, { model: model }), _jsx("div", { className: classes.spacer }), _jsxs(FormGroup, { row: true, className: classes.headerForm, children: [_jsx(HeaderPanControls, { model: model }), _jsx(SearchBox, { model: model })] }), _jsx(HeaderRegionWidth, { model: model }), _jsx(HeaderZoomControls, { model: model }), _jsx("div", { className: classes.spacer })] }));
-};
+    // the row itself, not `model.width`: what the pieces below have to fit into
+    // is this box, and the offset between it and the view's measured width
+    // differs between the app's view container, an embedded host and a synteny
+    // row
+    const [ref, { width }] = useMeasure('width');
+    const highlighted = highlightedDisplays(model);
+    const fit = headerFit({
+        width,
+        searchBoxPx: searchBoxWidth(model.coarseVisibleLocStrings),
+        clearHighlight: highlighted.length > 0,
+    });
+    return (_jsxs("div", { className: classes.headerBar, ref: ref, children: [_jsx(HeaderTrackSelectorButton, { model: model, indent: fit.trackSelectorIndent }), _jsx(ScrollZoomToggle, { model: model, iconOnly: !fit.scrollZoomLabel }), _jsx("div", { className: classes.spacer }), _jsx(HeaderPanControls, { model: model, compact: !fit.panButtonSpacing }), _jsx(SearchBox, { model: model }), _jsx(HeaderClearHighlightButton, { highlighted: highlighted }), fit.regionWidth ? _jsx(HeaderRegionWidth, { model: model }) : null, _jsx(HeaderZoomControls, { model: model, showSlider: fit.zoomSlider }), _jsx("div", { className: classes.spacer })] }));
+});
 const LinearGenomeViewHeader = observer(function LinearGenomeViewHeader({ model, }) {
     const { hideHeader, hideHeaderOverview } = model;
     return !hideHeader ? (hideHeaderOverview ? (_jsx(Controls, { model: model })) : (_jsx(OverviewScalebar, { model: model, children: _jsx(Controls, { model: model }) }))) : null;

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

@@ -0,0 +1,21 @@
+import type { LinearGenomeViewModel } from '../index.ts';
+interface FeatureHighlightCapableDisplay {
+    featureHighlights: {
+        length: number;
+    };
+    clearFeatureHighlights: () => void;
+}
+/**
+ * Every display in the view with an active feature highlight — from a text
+ * search or the right-click "Highlight feature" menu, which land in the same
+ * set.
+ *
+ * The header reads this rather than leaving it to the button below, because
+ * whether the button is in the row changes how much of the row is left for
+ * everything else (see `headerFit`).
+ */
+export declare function highlightedDisplays(model: LinearGenomeViewModel): FeatureHighlightCapableDisplay[];
+declare const HeaderClearHighlightButton: ({ highlighted, }: {
+    highlighted: FeatureHighlightCapableDisplay[];
+}) => import("react").JSX.Element | null;
+export default HeaderClearHighlightButton;

package/esm/LinearGenomeView/components/HeaderClearHighlightButton.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import HighlightOffIcon from '@mui/icons-material/HighlightOff';
+import { IconButton } from '@mui/material';
+import { observer } from 'mobx-react';
+function isFeatureHighlightCapable(d) {
+    return (typeof d === 'object' &&
+        d !== null &&
+        'featureHighlights' in d &&
+        'clearFeatureHighlights' in d &&
+        typeof d.clearFeatureHighlights === 'function');
+}
+/**
+ * Every display in the view with an active feature highlight — from a text
+ * search or the right-click "Highlight feature" menu, which land in the same
+ * set.
+ *
+ * The header reads this rather than leaving it to the button below, because
+ * whether the button is in the row changes how much of the row is left for
+ * everything else (see `headerFit`).
+ */
+export function highlightedDisplays(model) {
+    return model.tracks
+        .flatMap(t => t.displays)
+        .filter(isFeatureHighlightCapable)
+        .filter(d => d.featureHighlights.length > 0);
+}
+// Clears every highlight in the view at once. 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: () => {
+            for (const d of highlighted) {
+                d.clearFeatureHighlights();
+            }
+        }, children: _jsx(HighlightOffIcon, {}) })) : null;
+});
+export default HeaderClearHighlightButton;

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

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

package/esm/LinearGenomeView/components/HeaderPanControls.js

@@ -1,21 +1,30 @@
-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 { 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 { SPACING } from "../consts.js";
+import { SPACING, WIDGET_HEIGHT } from '../consts.js';
 const useStyles = makeStyles()(theme => ({
     panButton: {
         background: alpha(theme.palette.background.paper, 0.8),
-        color: theme.palette.text.primary,
+        height: WIDGET_HEIGHT,
         margin: SPACING,
     },
+    // the arrows are the whole button, so MUI's 64px text-button minimum and the
+    // gap either side of it are pure air — the pair gives up 80px of it when the
+    // header can't hold everything
+    compact: {
+        margin: 1,
+        minWidth: 0,
+        padding: theme.spacing(0, 0.5),
+    },
 }));
-export default function HeaderPanControls({ model }) {
-    const { classes } = useStyles();
-    return (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "outlined", className: classes.panButton, onClick: () => {
+export default 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: () => {
                     model.slide(-0.9);
-                }, children: _jsx(ArrowBackIcon, {}) }), _jsx(Button, { variant: "outlined", className: classes.panButton, onClick: () => {
+                }, children: _jsx(ArrowBackIcon, {}) }), _jsx(Button, { variant: "outlined", "aria-label": "Pan right", className: className, onClick: () => {
                     model.slide(0.9);
                 }, children: _jsx(ArrowForwardIcon, {}) })] }));
 }

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

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

package/esm/LinearGenomeView/components/HeaderRegionWidth.js

@@ -2,17 +2,20 @@ import { jsx as _jsx } 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()({
+const useStyles = makeStyles()(theme => ({
     bp: {
         display: 'flex',
         alignItems: 'center',
-        marginLeft: 5,
-        cursor: 'pointer',
+        // reserve a fixed width so the varying-length bp string (e.g. 19.5Mbp vs
+        // 950Kbp) does not shift the adjacent zoom controls as the user zooms/pans
+        minWidth: 50,
+        // equal-width digits so the number does not reflow as it changes
+        fontVariantNumeric: 'tabular-nums',
+        color: theme.palette.text.secondary,
     },
-});
+}));
 const HeaderRegionWidth = observer(function HeaderRegionWidth({ model, }) {
     const { classes } = useStyles();
-    const { effectiveTotalBpDisplayStr } = model;
-    return (_jsx(Typography, { variant: "body2", color: "textSecondary", className: classes.bp, children: effectiveTotalBpDisplayStr }));
+    return (_jsx(Typography, { variant: "body2", className: classes.bp, "data-testid": "header_region_width", children: model.effectiveTotalBpDisplayStr }));
 });
 export default HeaderRegionWidth;

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

@@ -0,0 +1,6 @@
+import type { LinearGenomeViewModel } from '../model.ts';
+declare const HeaderSearchBoxRow: ({ views, sideBySide, }: {
+    views: LinearGenomeViewModel[];
+    sideBySide: boolean;
+}) => import("react").JSX.Element;
+export default HeaderSearchBoxRow;

package/esm/LinearGenomeView/components/HeaderSearchBoxRow.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx, makeStyles } from '@jbrowse/core/util/tss-react';
+import { observer } from 'mobx-react';
+import HeaderSearchBoxes from './HeaderSearchBoxes.js';
+const useStyles = makeStyles()({
+    searchBoxContainer: {
+        display: 'flex',
+        // scroll rather than clip when many rows' search boxes exceed the bar width
+        overflowX: 'auto',
+        minWidth: 0,
+        gap: 12,
+    },
+    // the only thing the orientation changes: side-by-side is the container as
+    // declared above, since this span is a flex item of the header bar either way
+    vertical: {
+        flexDirection: 'column',
+    },
+});
+// The whole search-box strip of a header that stacks several linear genome
+// views: one box per row, laid out side by side or in a column. `sideBySide` is
+// the caller's, because where the choice is remembered differs — each container
+// keys its own `useSearchBoxPrefs` under its own storage prefix.
+const HeaderSearchBoxRow = observer(function HeaderSearchBoxRow({ views, sideBySide, }) {
+    const { classes } = useStyles();
+    return (_jsx("span", { className: cx(classes.searchBoxContainer, !sideBySide && classes.vertical), children: views.map(view => (_jsx(HeaderSearchBoxes, { view: view }, view.id))) }));
+});
+export default HeaderSearchBoxRow;

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

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

package/esm/LinearGenomeView/components/HeaderSearchBoxes.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getBpDisplayStr } from '@jbrowse/core/util';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
+import { Typography } from '@mui/material';
+import { observer } from 'mobx-react';
+import SearchBox from './SearchBox.js';
+const useStyles = makeStyles()(theme => ({
+    bp: {
+        display: 'flex',
+        alignItems: 'center',
+    },
+    searchBox: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: theme.spacing(0.5),
+    },
+}));
+// 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
+// carried a character-identical copy of it — the same plugin-to-plugin import
+// (`SearchBox`) both were already making, one file further down.
+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)] })] }));
+});
+export default HeaderSearchBoxes;

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

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

package/esm/LinearGenomeView/components/HeaderTrackSelectorButton.js

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

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

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

package/esm/LinearGenomeView/components/HeaderZoomControls.js

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

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

@@ -1,12 +1,8 @@
 import type { LinearGenomeViewModel } from '../model.ts';
+import type { HighlightType } from '../types.ts';
 type LGV = LinearGenomeViewModel;
 declare const Highlight: ({ model, highlight, }: {
     model: LGV;
-    highlight: {
-        assemblyName: string;
-        refName: string;
-        start: number;
-        end: number;
-    };
-}) => import("react/jsx-runtime").JSX.Element | null;
+    highlight: HighlightType;
+}) => import("react").JSX.Element | null;
 export default Highlight;

package/esm/LinearGenomeView/components/Highlight.js

@@ -1,90 +1,38 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef, useState } from 'react';
-import { Menu } from '@jbrowse/core/ui';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useHighlightChip } from '@jbrowse/core/ui/highlightChipReveal';
 import { getSession } from '@jbrowse/core/util';
-import { colord } from '@jbrowse/core/util/colord';
-import { makeStyles } from '@jbrowse/core/util/tss-react';
-import BookmarkIcon from '@mui/icons-material/Bookmark';
 import CloseIcon from '@mui/icons-material/Close';
-import LinkIcon from '@mui/icons-material/Link';
-import { IconButton, Tooltip } from '@mui/material';
+import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
+import { useTheme } from '@mui/material';
 import { observer } from 'mobx-react';
-const useStyles = makeStyles()(theme => ({
-    highlight: {
-        height: '100%',
-        position: 'absolute',
-        left: 0,
-        overflow: 'hidden',
-        background: colord(theme.palette.highlight.main).alpha(0.35).toRgbString(),
-    },
-    linkIcon: {
-        color: colord(theme.palette.highlight.main).darken(0.2).toRgbString(),
-    },
-    z3: {
-        zIndex: 3,
-    },
-}));
+import HighlightBand from './HighlightBand.js';
+import HighlightChip from './HighlightChip.js';
+import { getHighlightColor } from './util.js';
+// A band narrower than the link-icon chip clips it into a smudge, so below this
+// width the chip is dropped (the band itself still draws).
+const CHIP_MIN_WIDTH = 24;
 const Highlight = observer(function Highlight({ model, highlight, }) {
-    const { classes } = useStyles();
-    const [open, setOpen] = useState(false);
-    const anchorEl = useRef(null);
-    const session = getSession(model);
-    const { assemblyManager } = session;
-    const dismissHighlight = () => {
-        model.removeHighlight(highlight);
-    };
-    function handleClose() {
-        setOpen(false);
-    }
-    const mapCoords = (r) => {
-        const s = model.bpToPx({
-            refName: r.refName,
-            coord: r.start,
-        });
-        const e = model.bpToPx({
-            refName: r.refName,
-            coord: r.end,
-        });
-        return s && e
-            ? {
-                width: Math.max(Math.abs(e.offsetPx - s.offsetPx), 3),
-                left: Math.min(s.offsetPx, e.offsetPx) - model.offsetPx,
-            }
-            : undefined;
-    };
-    const asm = assemblyManager.get(highlight.assemblyName);
-    const h = mapCoords({
-        ...highlight,
-        refName: asm?.getCanonicalRefName(highlight.refName) ?? highlight.refName,
-    });
-    return h ? (_jsxs("div", { className: classes.highlight, style: {
-            transform: `translateX(${h.left}px)`,
-            width: h.width,
-        }, children: [_jsx(Tooltip, { title: "Highlighted from URL parameter", arrow: true, children: _jsx(IconButton, { ref: anchorEl, className: classes.z3, onClick: () => {
-                        setOpen(true);
-                    }, children: _jsx(LinkIcon, { fontSize: "small", className: classes.linkIcon }) }) }), _jsx(Menu, { anchorEl: anchorEl.current, onMenuItemClick: (_event, callback) => {
-                    callback();
-                    handleClose();
-                }, open: open, onClose: handleClose, menuItems: [
-                    {
-                        label: 'Dismiss highlight',
-                        icon: CloseIcon,
-                        onClick: () => {
-                            dismissHighlight();
-                        },
+    const theme = useTheme();
+    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: [
+                {
+                    label: 'Dismiss highlight',
+                    icon: CloseIcon,
+                    onClick: () => {
+                        model.removeHighlight(highlight);
                     },
-                    {
-                        label: 'Bookmark highlighted region',
-                        icon: BookmarkIcon,
-                        onClick: () => {
-                            let bookmarkWidget = session.widgets.get('GridBookmark');
-                            if (!bookmarkWidget) {
-                                bookmarkWidget = session.addWidget('GridBookmarkWidget', 'GridBookmark');
-                            }
-                            bookmarkWidget.addBookmark(highlight);
-                            dismissHighlight();
-                        },
+                },
+                {
+                    label: 'Turn off highlights',
+                    icon: VisibilityOffIcon,
+                    onClick: () => {
+                        getSession(model).setHighlightsVisible(false);
                     },
-                ] })] })) : null;
+                },
+                ...model.highlightMenuItems(highlight),
+            ] })) : null })) : null;
 });
 export default Highlight;

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

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