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

package/esm/LinearGenomeView/components/Rubberband.js

@@ -1,11 +1,10 @@
-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 { useRef } from 'react';
-import { Menu } from '@jbrowse/core/ui';
 import { makeStyles } from '@jbrowse/core/util/tss-react';
 import { observer } from 'mobx-react';
-import RubberbandSpan from "./RubberbandSpan.js";
-import VerticalGuide from "./VerticalGuide.js";
-import { useRangeSelect } from "./useRangeSelect.js";
+import { stickyChromeTops } from '../stickyChrome.js';
+import RangeSelectOverlay from './RangeSelectOverlay.js';
+import { useRangeSelect } from './useRangeSelect.js';
 const useStyles = makeStyles()({
     rubberbandControl: {
         cursor: 'crosshair',
@@ -17,16 +16,14 @@ const useStyles = makeStyles()({
 const Rubberband = observer(function Rubberband({ model, ControlComponent = _jsx("div", {}), }) {
     const ref = useRef(null);
     const { classes } = useStyles();
-    const { stickyViewHeaders, rubberbandTop, isScalebarRefNameMenuOpen } = model;
-    const { guideX, rubberbandOn, leftBpOffset, rightBpOffset, numOfBpSelected, width, left, anchorPosition, open, isClick, clickBpOffset, handleMenuItemClick, handleClose, mouseMove, mouseDown, mouseOut, } = useRangeSelect(ref, model);
-    return (_jsxs(_Fragment, { children: [guideX !== undefined && !isScalebarRefNameMenuOpen ? (_jsx(VerticalGuide, { model: model, coordX: guideX })) : rubberbandOn ? (_jsx(RubberbandSpan, { leftBpOffset: leftBpOffset, rightBpOffset: rightBpOffset, numOfBpSelected: numOfBpSelected, width: width, left: left, top: rubberbandTop, sticky: stickyViewHeaders })) : null, anchorPosition ? (_jsx(Menu, { anchorReference: "anchorPosition", anchorPosition: {
-                    left: anchorPosition.clientX + 10,
-                    top: anchorPosition.clientY,
-                }, onMenuItemClick: handleMenuItemClick, open: open, onClose: handleClose, menuItems: isClick && clickBpOffset
-                    ? model.rubberbandClickMenuItems(clickBpOffset)
-                    : model.rubberBandMenuItems() })) : null, _jsx("div", { "data-testid": "rubberband_controls", className: classes.rubberbandControl, style: {
-                    top: rubberbandTop,
-                    position: stickyViewHeaders ? 'sticky' : undefined,
-                }, ref: ref, onMouseDown: mouseDown, onMouseMove: mouseMove, onMouseOut: mouseOut, children: ControlComponent })] }));
+    const { stickyViewHeaders, headerHeight } = model;
+    const { scalebar } = stickyChromeTops({ stickyViewHeaders, headerHeight });
+    const range = useRangeSelect(ref, model);
+    return (_jsxs(_Fragment, { children: [_jsx(RangeSelectOverlay, { model: model, range: range, menuOffsetX: 10 }), _jsx("div", { "data-testid": "rubberband_controls", className: classes.rubberbandControl, style: scalebar ? { top: scalebar, position: 'sticky' } : undefined, ref: ref, onMouseDown: range.mouseDown, onMouseMove: range.mouseMove, 
+                // mouseleave, not mouseout, matching the other useRangeSelect instance
+                // (TracksContainer): mouseout bubbles from every child, so crossing a
+                // refName or coordinate label inside the scalebar cleared the guide and
+                // the next mousemove put it straight back
+                onMouseLeave: range.mouseOut, children: ControlComponent })] }));
 });
 export default Rubberband;

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

@@ -0,0 +1,10 @@
+export default function SVGHighlightBand({ coords, height, color, label, labelColor, }: {
+    coords: {
+        left: number;
+        width: number;
+    };
+    height: number;
+    color: string;
+    label?: string;
+    labelColor: string;
+}): import("react").JSX.Element;

package/esm/LinearGenomeView/components/SVGHighlightBand.js

@@ -0,0 +1,9 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getFillProps } from '@jbrowse/core/util';
+// One full-height SVG highlight band with an optional label at the top,
+// mirroring the on-screen HighlightBand div. Shared by the LGV native-highlight
+// export (SVGHighlights) and the grid-bookmark export (LGVHighlightSVG). The
+// label is hidden on bands too narrow to fit it.
+export default function SVGHighlightBand({ coords, height, color, label, labelColor, }) {
+    return (_jsxs(_Fragment, { children: [_jsx("rect", { x: coords.left, y: 0, width: coords.width, height: height, ...getFillProps(color) }), label && coords.width > 3 ? (_jsx("text", { x: coords.left + 3, y: 2, fontSize: 11, dominantBaseline: "hanging", ...getFillProps(labelColor), children: label })) : null] }));
+}

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

@@ -1,10 +1,10 @@
-import type React from 'react';
 import type { LinearGenomeViewModel } from '../index.ts';
+import type React from 'react';
 type LGV = LinearGenomeViewModel;
 interface ScalebarProps {
     model: LGV;
     style?: React.CSSProperties;
     className?: string;
 }
-declare const Scalebar: ({ model, style, className, ...other }: ScalebarProps) => import("react/jsx-runtime").JSX.Element;
+declare const Scalebar: ({ model, style, className, }: ScalebarProps) => React.JSX.Element;
 export default Scalebar;

package/esm/LinearGenomeView/components/Scalebar.js

@@ -2,32 +2,27 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cx, makeStyles } from '@jbrowse/core/util/tss-react';
 import { Paper } from '@mui/material';
 import { observer } from 'mobx-react';
-import Gridlines from "./Gridlines.js";
-import ScalebarCoordinateLabels from "./ScalebarCoordinateLabels.js";
-import ScalebarRefNameLabels from "./ScalebarRefNameLabels.js";
+import Gridlines from './Gridlines.js';
+import PaddingBlocks from './PaddingBlocks.js';
+import ScalebarCoordinateLabels from './ScalebarCoordinateLabels.js';
+import ScalebarRefNameLabels from './ScalebarRefNameLabels.js';
 const useStyles = makeStyles()({
+    // clip, not hidden: this holds a staticBlocks-width strip of labels, and a
+    // scroll container here can be scrolled by the browser (focus,
+    // scrollIntoView) with no scrollbar to show it, sliding the coordinates out
+    // of register with the tracks. clip cannot be scrolled at all
     container: {
-        overflow: 'hidden',
+        overflow: 'clip',
         position: 'relative',
     },
-    zoomContainer: {
-        position: 'relative',
-    },
-    scalebar: {
-        position: 'absolute',
-        display: 'flex',
-        pointerEvents: 'none',
-    },
 });
-const Scalebar = observer(function Scalebar({ model, style, className, ...other }) {
+const Scalebar = observer(function Scalebar({ model, style, className, }) {
     const { classes } = useStyles();
-    const { scaleFactor, staticBlocks, offsetPx } = model;
-    const offsetLeft = Math.round(staticBlocks.offsetPx - offsetPx);
-    return (_jsxs(Paper, { "data-resizer": "true", className: cx(classes.container, className), variant: "outlined", style: style, ...other, children: [_jsx(Gridlines, { model: model, offset: 1 }), _jsx("div", { className: classes.zoomContainer, style: {
-                    transform: scaleFactor !== 1 ? `scaleX(${scaleFactor})` : undefined,
-                }, children: _jsx("div", { className: classes.scalebar, style: {
-                        transform: `translateX(${offsetLeft - 1}px)`,
-                        width: staticBlocks.totalWidthPx,
-                    }, children: _jsx(ScalebarCoordinateLabels, { model: model }) }) }), _jsx(ScalebarRefNameLabels, { model: model })] }));
+    return (_jsxs(Paper
+    // The rubberband owns presses on the scalebar (it wraps this as its
+    // ControlComponent), so the view's click-drag pan must not also start one
+    // on the paths where the rubberband doesn't stopPropagation — a press with
+    // the refName menu already open. See ResizeHandle for the marker contract.
+    , { "data-gesture-owner": "true", className: cx(classes.container, className), variant: "outlined", style: style, children: [_jsx(Gridlines, { model: model, offset: 1 }), _jsx(PaddingBlocks, { model: model, offset: 1 }), _jsx(ScalebarCoordinateLabels, { model: model }), _jsx(ScalebarRefNameLabels, { model: model })] }));
 });
 export default Scalebar;

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

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

package/esm/LinearGenomeView/components/ScalebarCoordinateLabels.js

@@ -1,18 +1,19 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { getTickDisplayStr } from '@jbrowse/core/util';
 import { makeStyles } from '@jbrowse/core/util/tss-react';
 import { observer } from 'mobx-react';
-import { makeTicks } from "../util.js";
+import { TICK_LABEL_FONT_SIZE, refNameLabelSpanPx, tickLabelWidth, } from '../util.js';
 const useStyles = makeStyles()(theme => ({
-    block: {
-        position: 'relative',
-        flexShrink: 0,
-        overflow: 'hidden',
+    // spans the full staticBlocks width; labels are absolutely positioned within
+    // it so a label on an internal (~800px) block boundary is no longer clipped.
+    // Absolute (with top/left left at their static position, i.e. the top-left of
+    // the scalebar Paper) so a strip wider than the viewport adds no flow width
+    container: {
+        position: 'absolute',
         height: 13,
-    },
-    elidedBlock: {
-        backgroundColor: '#999',
-        backgroundImage: 'repeating-linear-gradient(90deg, transparent, transparent 1px, rgba(255,255,255,.5) 1px, rgba(255,255,255,.5) 3px)',
+        pointerEvents: 'none',
+        // clip rather than hidden so this never becomes a scroll container (see
+        // Scalebar)
+        overflow: 'clip',
     },
     tick: {
         position: 'absolute',
@@ -21,37 +22,55 @@ const useStyles = makeStyles()(theme => ({
         justifyContent: 'center',
         pointerEvents: 'none',
     },
-    label: {
-        fontSize: 11,
+    tickLabel: {
+        fontSize: TICK_LABEL_FONT_SIZE,
         zIndex: 1,
-        background: theme.palette.background.paper,
         lineHeight: 'normal',
         pointerEvents: 'none',
+        // paper backing so the number stays readable over the gridline behind it
+        background: theme.palette.background.paper,
+        padding: '0 2px',
     },
 }));
-function ContentBlockLabels({ block, bpPerPx, }) {
-    const { classes } = useStyles();
-    const ticks = makeTicks(block.start, block.end, bpPerPx, true, false);
-    return (_jsx("div", { className: classes.block, style: { width: block.widthPx }, children: ticks.map(({ type, base }) => {
-            if (type !== 'major') {
-                return null;
-            }
-            const x = (block.reversed ? block.end - base : base - block.start) / bpPerPx;
-            return (_jsx("div", { className: classes.tick, style: { left: x }, children: _jsx("div", { className: classes.label, children: getTickDisplayStr(base + 1, bpPerPx) }) }, base));
-        }) }));
-}
 const ScalebarCoordinateLabels = observer(function ScalebarCoordinateLabels({ model, }) {
-    const { classes, cx } = useStyles();
-    const { staticBlocks, bpPerPx } = model;
-    return (_jsx("div", { style: { display: 'flex' }, children: staticBlocks.map((block, index) => {
-            const key = `${block.key}-${index}`;
-            if (block.type === 'ContentBlock') {
-                return (_jsx(ContentBlockLabels, { block: block, bpPerPx: bpPerPx }, key));
-            }
-            else if (block.type === 'ElidedBlock') {
-                return (_jsx("div", { className: cx(classes.block, classes.elidedBlock), style: { width: block.widthPx } }, key));
-            }
-            return (_jsx("div", { className: classes.block, style: { width: block.widthPx } }, key));
+    const { classes } = useStyles();
+    const { scalebarLabels, staticBlocks, staticBlocksTranslateX } = model;
+    // labels are laid out in the staticBlocks frame, which overhangs the
+    // viewport; shift it into view (the -1 clears the left track border, as
+    // Gridlines/PaddingBlocks do with their `offset` prop). Rounded, unlike
+    // ZoomTransform: these children are text, and a fractional offset blurs it.
+    const offsetLeft = Math.round(staticBlocksTranslateX);
+    // `runRefNameLabelPx` keeps the numbers out from under a refName label at its
+    // run's left edge, in this frame, which is what lets scalebarLabels stay
+    // stable across a scroll. It cannot reach the label pinned to the VIEWPORT's
+    // left edge, whose x is a function of the scroll — and that one is drawn over
+    // a run whose own left edge is off screen, so nothing reserved for it. The
+    // number underneath came out with its leading digits painted over: "22,000"
+    // showing as ",000" reads as a coordinate, just not the right one. Hide it
+    // instead, the same call the run-start reservation makes, and hide rather
+    // than drop so the node count this list pools stays put.
+    //
+    // The row's caption chip is the other one: it sits at x=0, outside the block
+    // frame for the same reason, and now draws on a plain LGV too whenever the
+    // row is flipped.
+    const { labels, caption, captionSpanPx } = model.scalebarRefNameLabels;
+    const sticky = labels.find(l => l.sticky);
+    const covered = [
+        ...(sticky ? [refNameLabelSpanPx(sticky)] : []),
+        ...(caption === undefined ? [] : [{ left: 0, right: captionSpanPx }]),
+    ];
+    return (_jsx("div", { className: classes.container, style: {
+            width: staticBlocks.totalWidthPx,
+            transform: `translateX(${offsetLeft - 1}px)`,
+        }, children: scalebarLabels.map(({ x, label }, i) => {
+            const halfWidth = tickLabelWidth(label) / 2;
+            const centerPx = offsetLeft - 1 + x;
+            const hidden = covered.some(span => centerPx - halfWidth < span.right &&
+                centerPx + halfWidth > span.left);
+            return (_jsx("div", { className: classes.tick, style: {
+                    transform: `translateX(${x}px)`,
+                    visibility: hidden ? 'hidden' : undefined,
+                }, children: _jsx("div", { className: classes.tickLabel, children: label }) }, i));
         }) }));
 });
 export default ScalebarCoordinateLabels;

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

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

package/esm/LinearGenomeView/components/ScalebarRefNameLabels.js

@@ -1,168 +1,184 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
 import { Menu } from '@jbrowse/core/ui';
+import { assembleLocString, assembleLocStrings } from '@jbrowse/core/util';
+import { copyText } from '@jbrowse/core/util/copyText';
 import { makeStyles } from '@jbrowse/core/util/tss-react';
 import { observer } from 'mobx-react';
+import { REF_NAME_LABEL_FONT_SIZE, regionMoveActions, withRegionMoved, withRegionRemoved, withRegionReversed, } from '../util.js';
 const useStyles = makeStyles()(theme => ({
     refLabel: {
-        fontSize: 11,
+        // the width the fit test in getScalebarRefNameLabels measures against
+        fontSize: REF_NAME_LABEL_FONT_SIZE,
+        // maxWidth is the label's whole box, paddingLeft included — stated here
+        // rather than inherited from whatever box-sizing the embedding page sets,
+        // since under content-box the padding comes off the text twice (once in the
+        // maxWidth the fit test was given, once in the layout) and every name wide
+        // enough to need the space is clipped mid-glyph
+        boxSizing: 'border-box',
         position: 'absolute',
-        left: 2,
+        // x-position is driven by transform:translateX (compositor-only) not left
+        left: 0,
         top: -1,
         fontWeight: 'bold',
         lineHeight: 'normal',
         zIndex: 1,
         background: theme.palette.background.paper,
-        cursor: 'pointer',
-        overflow: 'hidden',
+        // clip, not hidden: transform/maxWidth are patched on every scroll-zoom
+        // frame, and `hidden` would make each label its own scroll container —
+        // scrollable-overflow bookkeeping and scroll anchoring per label per frame,
+        // for a box that never scrolls. clip is a paint-time rect instead
+        overflow: 'clip',
         whiteSpace: 'nowrap',
+    },
+    // only a refName label opens a menu. The assembly-name chip beside it is a
+    // caption, and wearing the pointer and the hover tint made it look like the
+    // one thing on the row that does nothing when clicked
+    clickable: {
+        cursor: 'pointer',
         '&:hover': {
-            background: theme.palette.grey[300],
+            // action.hover is a mode-aware translucent overlay; the old hardcoded
+            // grey[300] stayed light in dark mode, washing out the light label text
+            background: theme.palette.action.hover,
         },
     },
-    b0: {
-        left: 0,
+    prefixLabel: {
         zIndex: 100,
     },
 }));
 const ScalebarRefNameLabels = observer(function ScalebarRefNameLabels({ model, }) {
     const { classes, cx } = useStyles();
-    const { staticBlocks, offsetPx, scalebarDisplayPrefix } = model;
     const [menuState, setMenuState] = useState();
-    useEffect(() => {
-        model.setIsScalebarRefNameMenuOpen(!!menuState);
-    }, [model, menuState]);
-    let lastLeftBlock = staticBlocks.blocks.findIndex(b => b.type === 'ContentBlock');
-    if (lastLeftBlock < 0) {
-        lastLeftBlock = 0;
-    }
-    staticBlocks.forEach((block, i) => {
-        if (block.type === 'ContentBlock' && block.offsetPx - offsetPx < 0) {
-            lastLeftBlock = i;
-        }
-    });
-    const val = scalebarDisplayPrefix();
-    const b0 = staticBlocks.blocks[0];
-    const regionEndPx = new Map();
-    for (const block of staticBlocks.blocks) {
-        if (block.type === 'ContentBlock' && block.regionNumber !== undefined) {
-            const endPx = block.offsetPx + block.widthPx;
-            const current = regionEndPx.get(block.regionNumber);
-            if (current === undefined || endPx > current) {
-                regionEndPx.set(block.regionNumber, endPx);
-            }
-        }
-    }
-    return (_jsxs(_Fragment, { children: [b0?.type !== 'ContentBlock' && val ? (_jsx("span", { className: cx(classes.b0, classes.refLabel), children: val })) : null, staticBlocks.map((block, index) => {
-                const { offsetPx: blockOffsetPx, isLeftEndOfDisplayedRegion, key, type, refName, regionNumber, } = block;
-                const last = index === lastLeftBlock;
-                const regEndPx = regionNumber !== undefined ? regionEndPx.get(regionNumber) : undefined;
-                const labelStartPx = last ? offsetPx : blockOffsetPx;
-                const maxWidth = regEndPx !== undefined ? regEndPx - labelStartPx - 2 : undefined;
-                const minLabelWidth = 20;
-                const hasEnoughSpace = maxWidth === undefined || maxWidth >= minLabelWidth;
-                return type === 'ContentBlock' &&
-                    (isLeftEndOfDisplayedRegion || last) &&
-                    hasEnoughSpace ? (_jsxs("span", { style: {
-                        left: last
-                            ? Math.max(0, -offsetPx)
-                            : blockOffsetPx - offsetPx - 1,
-                        paddingLeft: last ? 0 : 1,
-                        maxWidth: maxWidth !== undefined && maxWidth > 0 ? maxWidth : undefined,
-                    }, className: classes.refLabel, "data-testid": `refLabel-${refName}`, onMouseDown: () => {
-                        model.setScalebarRefNameClickPending(true);
-                    }, onClick: event => {
-                        model.setScalebarRefNameClickPending(false);
-                        setMenuState({
-                            anchorEl: event.currentTarget,
-                            refName,
-                            regionNumber: regionNumber,
-                        });
-                    }, children: [last && val ? `${val}:` : '', refName] }, `refLabel-${key}-${index}`)) : null;
-            }), menuState ? (_jsx(RefNameMenu, { model: model, menuState: menuState, onClose: () => {
+    // `model.scalebarRefNameLabels`, not a getScalebarRefNameLabels call of its
+    // own: a host drawing its own region names reads the same getter, so the
+    // sticky/dedup/fit rules can't be one thing here and another there. The SVG
+    // export still calls the helper directly, deliberately and with no prefix.
+    const { labels, caption } = model.scalebarRefNameLabels;
+    return (_jsxs(_Fragment, { children: [labels.map((label, i) => (_jsx(RefLabel
+            // eslint-disable-next-line @eslint-react/no-array-index-key -- position IS the identity here; keying by the run makes the list churn on zoom
+            , { model: model, label: label, onOpenMenu: state => {
+                    setMenuState(state);
+                } }, i))), caption === undefined ? null : (_jsx("span", { className: cx(classes.prefixLabel, classes.refLabel), "data-testid": "refLabel-prefix", children: caption })), menuState ? (_jsx(RefNameMenu, { model: model, menuState: menuState, onClose: () => {
+                    model.setIsScalebarRefNameMenuOpen(false);
                     setMenuState(undefined);
                 } })) : null] }));
 });
-function RefNameMenu({ model, menuState, onClose, }) {
+// One refName label. Not an observer: `label` is already plain data computed by
+// the parent, and `model` is only used to fire actions. mouseDown flags the
+// click as starting on a label so the scalebar's rubberband hands the click to
+// this label's own onClick instead of opening the range menu.
+function RefLabel({ model, label, onOpenMenu, }) {
+    const { classes, cx } = useStyles();
+    const { refName, displayedRegionIndex, lastDisplayedRegionIndex, transform, maxWidth, paddingLeft, text, } = label;
+    return (_jsx("span", { className: cx(classes.refLabel, classes.clickable), style: {
+            transform: `translateX(${transform}px)`,
+            paddingLeft,
+            maxWidth,
+        }, "data-testid": `refLabel-${refName}`, onMouseDown: () => {
+            model.setScalebarRefNameClickPending(true);
+        }, onClick: e => {
+            model.setScalebarRefNameClickPending(false);
+            model.setIsScalebarRefNameMenuOpen(true);
+            onOpenMenu({
+                anchorEl: e.currentTarget,
+                refName,
+                displayedRegionIndex,
+                lastDisplayedRegionIndex,
+            });
+        }, children: text }));
+}
+const RefNameMenu = observer(function RefNameMenu({ model, menuState, onClose, }) {
     const { displayedRegions } = model;
-    const { refName, regionNumber } = menuState;
+    const { refName, displayedRegionIndex: idx, lastDisplayedRegionIndex: lastIdx, } = menuState;
     const numRegions = displayedRegions.length;
-    function moveRegion(fromIndex, toIndex) {
-        const regions = [...displayedRegions];
-        const [removed] = regions.splice(fromIndex, 1);
-        regions.splice(toIndex, 0, removed);
-        model.setDisplayedRegions(regions);
-    }
-    function removeRegion(index) {
-        const regions = displayedRegions.filter((_, i) => i !== index);
-        model.setDisplayedRegions(regions);
-    }
-    const actionItems = [
-        ...(regionNumber > 0
-            ? [
-                {
-                    label: 'Move left',
-                    onClick: () => {
-                        moveRegion(regionNumber, regionNumber - 1);
-                    },
-                },
-            ]
-            : []),
-        ...(regionNumber < numRegions - 1
-            ? [
-                {
-                    label: 'Move right',
-                    onClick: () => {
-                        moveRegion(regionNumber, regionNumber + 1);
-                    },
-                },
-            ]
-            : []),
-        ...(numRegions > 2 && regionNumber > 0
-            ? [
-                {
-                    label: 'Move to far left',
-                    onClick: () => {
-                        moveRegion(regionNumber, 0);
-                    },
-                },
-            ]
-            : []),
-        ...(numRegions > 2 && regionNumber < numRegions - 1
-            ? [
-                {
-                    label: 'Move to far right',
-                    onClick: () => {
-                        moveRegion(regionNumber, numRegions - 1);
-                    },
-                },
-            ]
-            : []),
-        {
-            label: 'Remove this region from view',
-            onClick: () => {
-                removeRegion(regionNumber);
-            },
-        },
-    ];
-    return (_jsx(Menu, { anchorEl: menuState.anchorEl, open: true, onClose: onClose, onMenuItemClick: (_, callback) => {
+    const labeled = displayedRegions.slice(idx, lastIdx + 1);
+    // A label naming several regions is the collapsed-intron case: adjacent
+    // regions sharing a refName get one label between them. Reverse/move/remove
+    // are per-region and this label names no particular one — it used to act on
+    // whichever region the label happened to ride, which for the pinned label
+    // changed as you scrolled — so a run offers only the two items that mean the
+    // whole run.
+    const oneRegion = idx === lastIdx;
+    // one region keeps its `{assembly}` qualifier; a run drops the qualifier the
+    // regions all share, as the view header does for the same list
+    const locString = oneRegion
+        ? assembleLocString(displayedRegions[idx])
+        : assembleLocStrings(labeled);
+    return (_jsx(Menu, { anchorEl: menuState.anchorEl, open: true, onClose: onClose, onMenuItemClick: callback => {
             callback();
             onClose();
         }, menuItems: [
             {
                 label: `Focus on ${refName}`,
+                // moveTo by index, not navTo by refName: navTo resolves to the FIRST
+                // region carrying the name, so on a duplicated refName (a chromosome
+                // displayed twice) clicking the third chr1 label jumped to the first.
+                // Every other item in this menu is already idx-based.
                 onClick: () => {
-                    model.navTo({ refName });
+                    const last = displayedRegions[lastIdx];
+                    model.moveTo({ index: idx, offset: 0 }, { index: lastIdx, offset: last.end - last.start });
                 },
             },
-            ...(numRegions > 1
+            ...(labeled.length < numRegions
+                ? [
+                    {
+                        label: oneRegion
+                            ? 'Show only this region'
+                            : `Show only ${refName}`,
+                        onClick: () => {
+                            model.setDisplayedRegions(labeled);
+                        },
+                    },
+                ]
+                : []),
+            {
+                label: 'Copy to clipboard',
+                subMenu: [
+                    {
+                        label: 'Reference sequence name',
+                        onClick: () => {
+                            void copyText(model, refName, 'reference sequence name');
+                        },
+                    },
+                    {
+                        label: 'Region',
+                        onClick: () => {
+                            void copyText(model, locString, 'region');
+                        },
+                    },
+                ],
+            },
+            ...(oneRegion
                 ? [
                     {
                         label: 'Actions',
-                        subMenu: actionItems,
+                        subMenu: [
+                            {
+                                label: 'Reverse region',
+                                onClick: () => {
+                                    model.setDisplayedRegions(withRegionReversed(displayedRegions, idx));
+                                },
+                            },
+                            ...regionMoveActions(idx, numRegions).map(({ label, to }) => ({
+                                label,
+                                onClick: () => {
+                                    model.setDisplayedRegions(withRegionMoved(displayedRegions, idx, to));
+                                },
+                            })),
+                            ...(numRegions > 1
+                                ? [
+                                    {
+                                        label: 'Remove this region from view',
+                                        onClick: () => {
+                                            model.setDisplayedRegions(withRegionRemoved(displayedRegions, idx));
+                                        },
+                                    },
+                                ]
+                                : []),
+                        ],
                     },
                 ]
                 : []),
         ] }));
-}
+});
 export default ScalebarRefNameLabels;

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

@@ -1,6 +1,26 @@
 import type { LinearGenomeViewModel } from '../model.ts';
-declare const SearchBox: ({ model, showHelp, }: {
+import type React from 'react';
+/**
+ * What the box asks its row for at `value`, margins included — the number
+ * `headerFit` sheds against.
+ *
+ * The ask follows the locstring, which is the whole point of asking: 194px at
+ * `ctgA:1..20,000` and 284px at `chr22:10,510,000..10,610,000`, so a row sized
+ * against the 189px floor sheds too little and flexbox squeezes the box anyway.
+ * It is `getInputWidth`, the same function the box sizes itself with, rather
+ * than that arithmetic done again out here.
+ *
+ * `showHelp` is the component's own default below, and with help on
+ * `adornmentReservePx` returns the same number whatever the recent-locations
+ * menu holds — so the count only this component's hook knows cannot change the
+ * answer.
+ */
+export declare function searchBoxWidth(value: string): number;
+declare const SearchBox: ({ model, showHelp, minWidth, maxWidth, style, }: {
     showHelp?: boolean;
     model: LinearGenomeViewModel;
-}) => import("react/jsx-runtime").JSX.Element;
+    minWidth?: number;
+    maxWidth?: number;
+    style?: React.CSSProperties;
+}) => React.JSX.Element;
 export default SearchBox;