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

package/esm/LinearGenomeView/components/OverviewScalebarPolygon.js

@@ -1,39 +1,62 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { alpha } from '@jbrowse/core/ui/palette';
 import { getFillProps, getStrokeProps } from '@jbrowse/core/util';
-import { alpha, useTheme } from '@mui/material';
+import { regionBlocksPxExtent, transformPxSpan, } from '@jbrowse/core/util/Base1DUtils';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
 import { observer } from 'mobx-react';
-import { HEADER_BAR_HEIGHT } from "../consts.js";
-const OverviewScalebarPolygon = observer(function OverviewScalebarPolygon({ model, overview, useOffset = true, }) {
-    const theme = useTheme();
-    const polygonColor = theme.palette.tertiary.light;
-    const multiplier = Number(useOffset);
-    const { interRegionPaddingWidth, offsetPx, dynamicBlocks, cytobandOffset } = model;
-    const { contentBlocks, totalWidthPxWithoutBorders } = dynamicBlocks;
-    if (!contentBlocks.length) {
+import { HEADER_BAR_HEIGHT } from '../consts.js';
+/**
+ * SVG points for a trapezoid with horizontal top and bottom edges, wound as a
+ * single non-self-intersecting loop (bottom-left → bottom-right → top-right →
+ * top-left).
+ */
+function trapezoidPoints(top, bottom, height) {
+    return [
+        [bottom.leftPx, height],
+        [bottom.rightPx, height],
+        [top.rightPx, 0],
+        [top.leftPx, 0],
+    ]
+        .map(([x, y]) => `${x},${y}`)
+        .join(' ');
+}
+// Fill/stroke are theme-derived and zoom-invariant, so they live in a static
+// class computed once per theme (makeStyles memoizes) — an on-screen zoom frame
+// then does zero color parsing. SVG export can't carry a CSS class, so that path
+// serializes explicit fill/stroke attributes instead (see `exportSvg` below).
+const useStyles = makeStyles()(theme => ({
+    polygon: {
+        fill: alpha(theme.palette.tertiary.light, 0.3),
+        stroke: alpha(theme.palette.tertiary.light, 0.8),
+    },
+}));
+/**
+ * The "you are here" connector: a trapezoid joining the visible region's extent
+ * in the overview (top edge) to that same extent in the main view (bottom
+ * edge). Both edges come from one pixel extent, so they always describe the
+ * same regions — including elided ones.
+ *
+ * @param overviewOffsetPx - pixels the overview is shifted right of the main
+ * view's origin. In the interactive view the overview clears the chromosome-
+ * name gap (cytobandOffset); in SVG export it is flush (0).
+ * @param exportSvg - serialize explicit fill/stroke attributes (the split the
+ * `getFill/StrokeProps` helpers exist for) instead of the on-screen CSS class,
+ * which wouldn't survive into a standalone exported SVG.
+ */
+const OverviewScalebarPolygon = observer(function OverviewScalebarPolygon({ model, overview, overviewOffsetPx = 0, exportSvg = false, }) {
+    const { classes, theme } = useStyles();
+    const { offsetPx, bpPerPx, dynamicBlocks } = model;
+    const extent = regionBlocksPxExtent(dynamicBlocks.blocks);
+    if (!extent) {
         return null;
     }
-    const first = contentBlocks.at(0);
-    const last = contentBlocks.at(-1);
-    const topLeft = (overview.bpToPx({
-        refName: first.refName,
-        coord: first.reversed ? first.end : first.start,
-    }) || 0) +
-        cytobandOffset * multiplier;
-    const topRight = (overview.bpToPx({
-        refName: last.refName,
-        coord: last.reversed ? last.start : last.end,
-    }) || 0) +
-        cytobandOffset * multiplier;
-    const startPx = Math.max(0, -offsetPx);
-    const endPx = startPx +
-        totalWidthPxWithoutBorders +
-        (contentBlocks.length * interRegionPaddingWidth) / 2;
-    const points = [
-        [startPx, HEADER_BAR_HEIGHT],
-        [endPx, HEADER_BAR_HEIGHT],
-        [topRight, 0],
-        [topLeft, 0],
-    ];
-    return (_jsx("polygon", { points: points.toString(), ...getFillProps(alpha(polygonColor, 0.3)), ...getStrokeProps(alpha(polygonColor, 0.8)) }));
+    // the main view and overview lay out the same regions from cumulative-bp 0,
+    // so a main-view pixel maps to the (more zoomed-out) overview by the bpPerPx
+    // ratio; the bottom edge is the same extent in main-view space, shifted by
+    // the scroll offset
+    const top = transformPxSpan(extent, bpPerPx / overview.bpPerPx, overviewOffsetPx);
+    const bottom = transformPxSpan(extent, 1, -offsetPx);
+    const points = trapezoidPoints(top, bottom, HEADER_BAR_HEIGHT);
+    return exportSvg ? (_jsx("polygon", { points: points, ...getFillProps(alpha(theme.palette.tertiary.light, 0.3)), ...getStrokeProps(alpha(theme.palette.tertiary.light, 0.8)) })) : (_jsx("polygon", { points: points, className: classes.polygon }));
 });
 export default OverviewScalebarPolygon;

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

@@ -1,10 +1,9 @@
 import type { LinearGenomeViewModel } from '../index.ts';
-import type { Base1DViewModel } from '@jbrowse/core/util/Base1DViewModel';
 import type { ContentBlock } from '@jbrowse/core/util/blockTypes';
-declare const OverviewScalebarTickLabels: ({ block, scale, overview, model, }: {
+declare const OverviewScalebarTickLabels: ({ block, model, refNameColor, showRefName, }: {
     model: LinearGenomeViewModel;
-    scale: number;
     block: ContentBlock;
-    overview: Base1DViewModel;
-}) => import("react/jsx-runtime").JSX.Element[];
+    refNameColor: string | undefined;
+    showRefName: boolean;
+}) => import("react").JSX.Element[];
 export default OverviewScalebarTickLabels;

package/esm/LinearGenomeView/components/OverviewScalebarTickLabels.js

@@ -1,35 +1,33 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { getSession, getTickDisplayStr } from '@jbrowse/core/util';
 import { makeStyles } from '@jbrowse/core/util/tss-react';
 import { Typography } from '@mui/material';
 import { observer } from 'mobx-react';
-import { HEADER_OVERVIEW_HEIGHT } from "../consts.js";
-import { chooseGridPitch } from "../util.js";
+import { HEADER_OVERVIEW_HEIGHT } from '../consts.js';
+import { TICK_LABEL_FONT_SIZE, makeOverviewTickLabels, overviewRefNameLabelWidth, } from '../util.js';
 const useStyles = makeStyles()({
     scalebarLabel: {
         height: HEADER_OVERVIEW_HEIGHT,
         position: 'absolute',
         left: 0,
         display: 'flex',
-        justifyContent: 'center',
+        // 11px, not body2: makeOverviewTickLabels drops labels too wide for their
+        // block using tickLabelWidth, which measures at 11px
+        fontSize: TICK_LABEL_FONT_SIZE,
         pointerEvents: 'none',
     },
 });
-const OverviewScalebarTickLabels = observer(function OverviewScalebarTickLabels({ block, scale, overview, model, }) {
+const OverviewScalebarTickLabels = observer(function OverviewScalebarTickLabels({ block, model, refNameColor, showRefName, }) {
     const { classes } = useStyles();
-    const { start, end, reversed, refName, assemblyName } = block;
-    const { majorPitch } = chooseGridPitch(scale, 120, 15);
-    const { assemblyManager } = getSession(model);
-    const assembly = assemblyManager.get(assemblyName);
-    const refNameColor = assembly?.getRefNameColor(refName);
-    const tickLabels = [];
-    for (let i = 0; i < Math.floor((end - start) / majorPitch); i++) {
-        const offsetLabel = (i + 1) * majorPitch;
-        tickLabels.push(reversed ? end - offsetLabel : start + offsetLabel);
-    }
-    return tickLabels.map((tickLabel, labelIdx) => (_jsx(Typography, { className: classes.scalebarLabel, variant: "body2", style: {
-            transform: `translateX(${((labelIdx + 1) * majorPitch) / scale}px)`,
+    const { refName } = block;
+    const { bpPerPx } = model.overviewLayout;
+    return makeOverviewTickLabels({
+        block,
+        bpPerPx,
+        // the bold refName label pinned at the block's left edge takes precedence
+        refNameLabelPx: showRefName ? overviewRefNameLabelWidth(refName) : 0,
+    }).map(({ genomicCoord, offsetPx, label }) => (_jsx(Typography, { className: classes.scalebarLabel, style: {
+            transform: `translateX(${offsetPx}px)`,
             color: refNameColor,
-        }, children: getTickDisplayStr(tickLabel, overview.bpPerPx) }, `${JSON.stringify(block)}-${tickLabel}-${labelIdx}`)));
+        }, children: label }, genomicCoord)));
 });
 export default OverviewScalebarTickLabels;

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

@@ -0,0 +1,7 @@
+import type { LinearGenomeViewModel } from '../index.ts';
+type LGV = LinearGenomeViewModel;
+declare const PaddingBlocks: ({ model, offset, }: {
+    model: LGV;
+    offset?: number;
+}) => import("react").JSX.Element | null;
+export default PaddingBlocks;

package/esm/LinearGenomeView/components/PaddingBlocks.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx, makeStyles } from '@jbrowse/core/util/tss-react';
+import { observer } from 'mobx-react';
+import ZoomTransform from './ZoomTransform.js';
+import { elidedBlockStyles } from './util.js';
+const useStyles = makeStyles()(theme => ({
+    absoluteFill: {
+        position: 'absolute',
+        width: '100%',
+        height: '100%',
+    },
+    block: {
+        position: 'absolute',
+        height: '100%',
+    },
+    boundaryBlock: {
+        background: theme.palette.action.disabledBackground,
+    },
+    regionSeparator: {
+        // opaque (not text.disabled, which is translucent): regions are now laid
+        // out contiguously so the separator paints directly over track data on both
+        // sides. A translucent fill would tint the data instead of masking it, and
+        // would darken unevenly where the container-level and per-track
+        // PaddingBlocks overlap. An opaque grey masks cleanly and stays seamless.
+        background: theme.palette.mode === 'dark'
+            ? theme.palette.grey[500]
+            : theme.palette.grey[600],
+    },
+    elided: {
+        ...elidedBlockStyles,
+    },
+}));
+// Inter-region padding, elided, and boundary blocks plus region separators.
+// In TracksContainer: renders before children (masks gridlines in inter-track
+// margins at inter-region positions; TrackContainers paint on top).
+// In TrackContainer: renders after TrackRenderingContainer within the Paper
+// stacking context, masking the track canvas at inter-region positions while
+// TrackLabel (zIndex:200) remains above it.
+const PaddingBlocks = observer(function PaddingBlocks({ model, offset = 0, }) {
+    const { classes } = useStyles();
+    // the geometry is `model.paddingSpans` -- shared with any host drawing this
+    // itself, so a seam here and a seam in an embedder's own chrome can't be
+    // computed two different ways. This file owns only what the spans look like.
+    const spans = model.paddingSpans;
+    // Nothing to mask, so no positioned container to hold it — the common case,
+    // since a view sitting inside one contig has no seam, elision or boundary.
+    // The wrapper is not free: `ZoomTransform` reads `staticBlocks`, so an empty
+    // one still re-rendered and rewrote its transform on every gesture frame, per
+    // track. The view returns one shared array here, so this bails without even
+    // re-rendering.
+    if (spans.length === 0) {
+        return null;
+    }
+    const kindClass = {
+        seam: classes.regionSeparator,
+        elided: classes.elided,
+        boundary: classes.boundaryBlock,
+    };
+    return (_jsx(ZoomTransform, { model: model, offset: offset, children: _jsx("div", { className: classes.absoluteFill, children: spans.map(({ x, width, kind }, i) => (_jsx("div", { className: cx(classes.block, kindClass[kind]), style: { transform: `translateX(${x}px)`, width } }, i))) }) }));
+});
+export default PaddingBlocks;

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

@@ -0,0 +1,9 @@
+import type { LinearGenomeViewModel } from '../index.ts';
+import type { useRangeSelect } from './useRangeSelect.ts';
+type LGV = LinearGenomeViewModel;
+declare const RangeSelectOverlay: ({ model, range, menuOffsetX, }: {
+    model: LGV;
+    range: ReturnType<typeof useRangeSelect>;
+    menuOffsetX?: number;
+}) => import("react").JSX.Element;
+export default RangeSelectOverlay;

package/esm/LinearGenomeView/components/RangeSelectOverlay.js

@@ -0,0 +1,20 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Suspense, lazy } from 'react';
+import { Menu } from '@jbrowse/core/ui';
+import { getBpDisplayStr, stringify } from '@jbrowse/core/util';
+import { observer } from 'mobx-react';
+import { stickyChromeTops } from '../stickyChrome.js';
+import VerticalGuide from './VerticalGuide.js';
+const RubberbandSpan = lazy(() => import('../../shared/RubberbandSpan.js'));
+const RangeSelectOverlay = observer(function RangeSelectOverlay({ model, range, menuOffsetX = 0, }) {
+    const { stickyViewHeaders, headerHeight, isScalebarRefNameMenuOpen } = model;
+    const { scalebar } = stickyChromeTops({ stickyViewHeaders, headerHeight });
+    const { guideX, rubberbandOn, rubberband, anchorPosition, open, isClick, clickBpOffset, handleMenuItemClick, handleClose, } = range;
+    return (_jsxs(_Fragment, { children: [guideX !== undefined && !isScalebarRefNameMenuOpen ? (_jsx(VerticalGuide, { model: model, coordX: guideX })) : rubberbandOn && rubberband ? (_jsx(Suspense, { fallback: null, children: _jsx(RubberbandSpan, { left: rubberband.left, width: rubberband.width, viewWidth: model.width, stickyTop: scalebar, leftLabel: stringify(rubberband.leftBpOffset), rightLabel: stringify(rubberband.rightBpOffset), size: getBpDisplayStr(rubberband.numOfBpSelected) }) })) : null, anchorPosition ? (_jsx(Menu, { anchorReference: "anchorPosition", anchorPosition: {
+                    left: anchorPosition.clientX + menuOffsetX,
+                    top: anchorPosition.clientY,
+                }, onMenuItemClick: handleMenuItemClick, open: open, onClose: handleClose, menuItems: isClick && clickBpOffset
+                    ? model.rubberbandClickMenuItems(clickBpOffset)
+                    : model.rubberBandMenuItems() })) : null] }));
+});
+export default RangeSelectOverlay;

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

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

package/esm/LinearGenomeView/components/RegionWidthEditorDialog.js

@@ -1,30 +1,23 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
-import { Dialog } from '@jbrowse/core/ui';
-import { toLocale } from '@jbrowse/core/util';
-import { Button, DialogActions, DialogContent, TextField, Typography, } from '@mui/material';
-import { observer } from 'mobx-react';
+import { useState } from 'react';
+import { SubmitDialog } from '@jbrowse/core/ui';
+import { parseBpString, toLocale } from '@jbrowse/core/util';
+import { TextField, Typography } from '@mui/material';
 function format(n) {
     return toLocale(Math.floor(n));
 }
-const RegionWidthEditorDialog = observer(function RegionWidthEditorDialog({ model, handleClose, }) {
-    const { bpPerPx, width } = model;
-    const [val, setVal] = useState(format(bpPerPx * width));
-    useEffect(() => {
-        setVal(format(bpPerPx * width));
-    }, [bpPerPx, width]);
-    const val2 = val.replace(/,/g, '');
-    return (_jsxs(Dialog, { title: "Edit zoom level", open: true, onClose: handleClose, children: [_jsxs(DialogContent, { style: {
-                    display: 'flex',
-                    flexDirection: 'column',
-                    gap: 30,
-                }, children: [_jsx(Typography, { children: "Enter a specific number of base pairs to change the viewport to show. This is approximate and does not account for padding between regions or off-screen scrolling" }), _jsx(TextField, { helperText: "current zoom level (in bp)", value: val, onChange: event => {
-                            setVal(event.target.value);
-                        } })] }), _jsxs(DialogActions, { children: [_jsx(Button, { variant: "contained", color: "secondary", onClick: () => {
-                            handleClose();
-                        }, children: "Cancel" }), _jsx(Button, { variant: "contained", color: "primary", onClick: () => {
-                            model.zoomTo(+val2 / model.width);
-                            handleClose();
-                        }, children: "Submit" })] })] }));
-});
-export default RegionWidthEditorDialog;
+// not an observer: the initial value is seeded once and the field is
+// user-edited thereafter, so it shouldn't reactively reset if bpPerPx changes
+export default function RegionWidthEditorDialog({ model, handleClose, }) {
+    const [val, setVal] = useState(() => format(model.bpPerPx * model.width));
+    const bp = parseBpString(val);
+    const valid = bp !== undefined && bp > 0;
+    return (_jsx(SubmitDialog, { open: true, maxWidth: "xs", fullWidth: true, title: "Edit zoom level", onCancel: handleClose, submitDisabled: !valid, onSubmit: () => {
+            if (valid) {
+                model.zoomTo(bp / model.width);
+            }
+            handleClose();
+        }, children: _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 30 }, children: [_jsx(Typography, { children: "Enter a specific number of base pairs to change the viewport to show, either in full or abbreviated as e.g. 500kb or 1.5Mbp. This is approximate and does not account for padding between regions or off-screen scrolling" }), _jsx(TextField, { label: "Zoom level (bp)", autoFocus: true, fullWidth: true, variant: "outlined", value: val, onChange: event => {
+                        setVal(event.target.value);
+                    } })] }) }));
+}

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

@@ -3,5 +3,5 @@ type LGV = LinearGenomeViewModel;
 declare const Rubberband: ({ model, ControlComponent, }: {
     model: LGV;
     ControlComponent?: React.ReactElement;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export default Rubberband;

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;