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

package/esm/LinearGenomeView/components/PaddingBlocks.js

@@ -0,0 +1,56 @@
+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,
+    },
+    // opaque, since a translucent fill would darken unevenly where the
+    // container-level and per-track PaddingBlocks overlap
+    regionSeparator: {
+        background: theme.palette.regionSeparator,
+    },
+    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,19 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Menu } from '@jbrowse/core/ui';
+import { getBpDisplayStr, stringify } from '@jbrowse/core/util';
+import { observer } from 'mobx-react';
+import RubberbandSpan from '../../shared/RubberbandSpan.js';
+import { stickyChromeTops } from '../stickyChrome.js';
+import VerticalGuide from './VerticalGuide.js';
+const RangeSelectOverlay = observer(function RangeSelectOverlay({ model, range, menuOffsetX = 0, }) {
+    const { stickyViewHeaders, headerHeight, isScalebarRefNameMenuOpen } = model;
+    const { scalebar } = stickyChromeTops({ stickyViewHeaders, headerHeight });
+    const { guideX, rubberband, anchorPosition, isClick, handleMenuItemClick, handleClose, } = range;
+    return (_jsxs(_Fragment, { children: [guideX !== undefined && !isScalebarRefNameMenuOpen ? (_jsx(VerticalGuide, { model: model, coordX: guideX })) : rubberband && !isClick ? (_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: true, onClose: handleClose, menuItems: isClick
+                    ? model.rubberbandClickMenuItems(model.pxToBp(anchorPosition.offsetX))
+                    : 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/ResizeAllTracksHandle.d.ts

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

package/esm/LinearGenomeView/components/ResizeAllTracksHandle.js

@@ -0,0 +1,71 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useLayoutEffect, useRef } from 'react';
+import { ResizeHandle } from '@jbrowse/core/ui';
+import { scrollPortOf } from '@jbrowse/core/util/hooks';
+import { isAlive } from '@jbrowse/mobx-state-tree';
+import { observer } from 'mobx-react';
+import { RESIZE_ALL_HANDLE_HEIGHT } from '../consts.js';
+function useScrollPortExcess(ref, model, enabled) {
+    useLayoutEffect(() => {
+        const box = ref.current?.closest('[data-testid^="view-container-"]') ??
+            ref.current?.closest('[data-testid^="linear-genome-view-"]');
+        if (!enabled || !box || !('ResizeObserver' in window)) {
+            return;
+        }
+        const port = scrollPortOf(box);
+        const measure = () => {
+            const { marginTop, marginBottom } = getComputedStyle(box);
+            const outer = box.getBoundingClientRect().height +
+                Number.parseFloat(marginTop) +
+                Number.parseFloat(marginBottom);
+            model.setScrollPortExcess(Math.round(outer - (port?.clientHeight ?? window.innerHeight)));
+        };
+        measure();
+        const observer = new ResizeObserver(measure);
+        observer.observe(box);
+        if (port) {
+            observer.observe(port);
+        }
+        else {
+            window.addEventListener('resize', measure);
+        }
+        return () => {
+            observer.disconnect();
+            window.removeEventListener('resize', measure);
+            if (isAlive(model)) {
+                model.setScrollPortExcess(undefined);
+            }
+        };
+    }, [ref, model, enabled]);
+}
+const ResizeAllTracksHandle = observer(function ResizeAllTracksHandle({ model, }) {
+    const ref = useRef(null);
+    const drag = useRef({ from: new Map(), moved: 0 });
+    const { isTopLevelView } = model;
+    useScrollPortExcess(ref, model, isTopLevelView);
+    return (_jsx("div", { ref: ref, style: isTopLevelView
+            ? { position: 'sticky', bottom: 0, zIndex: 300 }
+            : { position: 'relative', height: 0, zIndex: 300 }, children: _jsx(ResizeHandle, { grip: isTopLevelView || 'hover', "data-testid": "resize-all-tracks", title: isTopLevelView
+                ? 'Drag to resize all tracks, double-click to fit them to the window'
+                : 'Drag to resize all tracks', style: isTopLevelView
+                ? { height: RESIZE_ALL_HANDLE_HEIGHT }
+                : {
+                    height: RESIZE_ALL_HANDLE_HEIGHT,
+                    position: 'absolute',
+                    bottom: 0,
+                }, onDragStart: () => {
+                drag.current = { from: model.resizableTrackHeights, moved: 0 };
+                for (const track of model.tracks) {
+                    track.setResizing(true);
+                }
+            }, onDrag: distance => {
+                drag.current.moved = model.resizeTracks(drag.current.moved + distance, drag.current.from);
+            }, onDragEnd: () => {
+                for (const track of model.tracks) {
+                    track.setResizing(false);
+                }
+            }, onDoubleClick: () => {
+                model.fitTracksToWindow();
+            } }) }));
+});
+export default ResizeAllTracksHandle;

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

@@ -1,7 +1,6 @@
 import type { LinearGenomeViewModel } from '../index.ts';
 type LGV = LinearGenomeViewModel;
-declare const Rubberband: ({ model, ControlComponent, }: {
+declare const Rubberband: ({ model }: {
     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,11 @@
-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 Scalebar from './Scalebar.js';
+import { useRangeSelect } from './useRangeSelect.js';
 const useStyles = makeStyles()({
     rubberbandControl: {
         cursor: 'crosshair',
@@ -14,19 +14,17 @@ const useStyles = makeStyles()({
         zIndex: 825,
     },
 });
-const Rubberband = observer(function Rubberband({ model, ControlComponent = _jsx("div", {}), }) {
+const Rubberband = observer(function Rubberband({ model }) {
     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: _jsx(Scalebar, { model: model }) })] }));
 });
 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,8 @@
+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. 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,6 @@
-import type React from 'react';
 import type { LinearGenomeViewModel } from '../index.ts';
 type LGV = LinearGenomeViewModel;
-interface ScalebarProps {
+declare const Scalebar: ({ model }: {
     model: LGV;
-    style?: React.CSSProperties;
-    className?: string;
-}
-declare const Scalebar: ({ model, style, className, ...other }: ScalebarProps) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export default Scalebar;

package/esm/LinearGenomeView/components/Scalebar.js

@@ -1,33 +1,31 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cx, makeStyles } from '@jbrowse/core/util/tss-react';
+import { 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 { SCALE_BAR_HEIGHT } from '../consts.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',
+        height: SCALE_BAR_HEIGHT,
+        boxSizing: 'border-box',
     },
 });
-const Scalebar = observer(function Scalebar({ model, style, className, ...other }) {
+const Scalebar = observer(function Scalebar({ model }) {
     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), 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: classes.container, variant: "outlined", 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;