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

package/esm/LinearGenomeView/components/OverviewRubberband.js

@@ -1,11 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from 'react';
-import { getSession } from '@jbrowse/core/util';
+import { useRef, useState } from 'react';
+import { getNotificationSink, stringify } from '@jbrowse/core/util';
+import { getRelativeX } from '@jbrowse/core/util/getRelativeX';
 import { makeStyles } from '@jbrowse/core/util/tss-react';
 import { observer } from 'mobx-react';
-import OverviewRubberbandHoverTooltip from "./OverviewRubberbandHoverTooltip.js";
-import RubberbandSpan from "./RubberbandSpan.js";
-import { getRelativeX } from "./util.js";
+import RubberbandSpan from '../../shared/RubberbandSpan.js';
+import { useWindowDrag } from '../../shared/useWindowDrag.js';
+import OverviewRubberbandHoverTooltip from './OverviewRubberbandHoverTooltip.js';
+import { overviewPxToBp } from './util.js';
 const useStyles = makeStyles()({
     rubberbandControl: {
         cursor: 'crosshair',
@@ -24,55 +26,31 @@ const OverviewRubberband = observer(function OverviewRubberband({ model, overvie
     const controlsRef = useRef(null);
     const { classes } = useStyles();
     const mouseDragging = startX !== undefined;
-    useEffect(() => {
-        function globalMouseMove(event) {
-            const ref = controlsRef.current;
-            if (ref && mouseDragging) {
-                setCurrentX(getRelativeX(event, ref));
+    useWindowDrag(controlsRef, startX, {
+        onMove: setCurrentX,
+        onEnd: ({ startX, endX, isClick }) => {
+            if (!isClick) {
+                model.moveTo(overviewPxToBp(overview, Math.min(startX, endX), cytobandOffset), overviewPxToBp(overview, Math.max(startX, endX), cytobandOffset));
             }
-        }
-        function globalMouseUp() {
-            if (startX !== undefined && currentX !== undefined) {
-                if (Math.abs(currentX - startX) > 3) {
-                    const left = Math.min(startX, currentX);
-                    const right = Math.max(startX, currentX);
-                    model.moveTo(overview.pxToBp(left - cytobandOffset), overview.pxToBp(right - cytobandOffset));
-                }
-            }
-            if (startX !== undefined && currentX === undefined) {
-                const click = overview.pxToBp(startX - cytobandOffset);
-                if (!click.refName) {
-                    getSession(model).notify('unknown position clicked');
-                    console.error('unknown position clicked', click);
+            else {
+                const click = overviewPxToBp(overview, startX, cytobandOffset);
+                if (click.refName) {
+                    model.centerAt(click.coord0, click.refName, click.index);
                 }
                 else {
-                    model.centerAt(Math.round(click.coord), click.refName, click.index);
+                    getNotificationSink(model).notify('unknown position clicked');
+                    console.error('unknown position clicked', click);
                 }
             }
             setStartX(undefined);
             setCurrentX(undefined);
-            if (startX !== undefined) {
-                setGuideX(undefined);
-            }
-        }
-        function globalKeyDown(event) {
-            if (event.key === 'Escape') {
-                setStartX(undefined);
-                setCurrentX(undefined);
-            }
-        }
-        if (mouseDragging) {
-            window.addEventListener('mousemove', globalMouseMove, true);
-            window.addEventListener('mouseup', globalMouseUp, true);
-            window.addEventListener('keydown', globalKeyDown, true);
-            return () => {
-                window.removeEventListener('mousemove', globalMouseMove, true);
-                window.removeEventListener('mouseup', globalMouseUp, true);
-                window.removeEventListener('keydown', globalKeyDown, true);
-            };
-        }
-        return () => { };
-    }, [mouseDragging, currentX, startX, model, overview, cytobandOffset]);
+            setGuideX(undefined);
+        },
+        onCancel: () => {
+            setStartX(undefined);
+            setCurrentX(undefined);
+        },
+    });
     function mouseDown(event) {
         event.preventDefault();
         event.stopPropagation();
@@ -84,25 +62,9 @@ const OverviewRubberband = observer(function OverviewRubberband({ model, overvie
     function mouseOut() {
         setGuideX(undefined);
     }
-    if (startX === undefined) {
-        return (_jsxs("div", { className: classes.rel, children: [guideX !== undefined ? (_jsx(OverviewRubberbandHoverTooltip, { model: model, open: !mouseDragging, overview: overview, guideX: guideX })) : null, _jsx("div", { className: classes.rubberbandControl, ref: controlsRef, onMouseDown: mouseDown, onMouseOut: mouseOut, onMouseMove: mouseMove, children: ControlComponent })] }));
-    }
-    let left = startX || 0;
-    let width = 0;
-    if (currentX !== undefined) {
-        left = Math.min(currentX, startX);
-        width = currentX - startX;
-    }
-    let leftBpOffset;
-    let rightBpOffset;
-    if (startX) {
-        leftBpOffset = overview.pxToBp(startX - cytobandOffset);
-        rightBpOffset = overview.pxToBp(startX + width - cytobandOffset);
-        if (currentX !== undefined && currentX < startX) {
-            ;
-            [leftBpOffset, rightBpOffset] = [rightBpOffset, leftBpOffset];
-        }
-    }
-    return (_jsxs("div", { className: classes.rel, children: [leftBpOffset && rightBpOffset ? (_jsx(RubberbandSpan, { leftBpOffset: leftBpOffset, rightBpOffset: rightBpOffset, width: Math.abs(width), left: left })) : null, _jsx("div", { "data-testid": "rubberband_controls", className: classes.rubberbandControl, ref: controlsRef, onMouseDown: mouseDown, onMouseOut: mouseOut, onMouseMove: mouseMove, children: ControlComponent })] }));
+    const endX = currentX ?? startX;
+    const leftPx = mouseDragging ? Math.min(startX, endX) : 0;
+    const rightPx = mouseDragging ? Math.max(startX, endX) : 0;
+    return (_jsxs("div", { className: classes.rel, children: [!mouseDragging && guideX !== undefined ? (_jsx(OverviewRubberbandHoverTooltip, { model: model, overview: overview, guideX: guideX })) : null, mouseDragging ? (_jsx(RubberbandSpan, { leftLabel: stringify(overviewPxToBp(overview, leftPx, cytobandOffset)), rightLabel: stringify(overviewPxToBp(overview, rightPx, cytobandOffset)), width: rightPx - leftPx, left: leftPx, viewWidth: overview.width, stickyTop: undefined })) : null, _jsx("div", { "data-testid": mouseDragging ? 'rubberband_controls' : undefined, className: classes.rubberbandControl, ref: controlsRef, onMouseDown: mouseDown, onMouseLeave: mouseOut, onMouseMove: mouseMove, children: ControlComponent })] }));
 });
 export default OverviewRubberband;

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

@@ -1,10 +1,9 @@
 import type { LinearGenomeViewModel } from '../index.ts';
-import type { Base1DViewModel } from '@jbrowse/core/util/Base1DViewModel';
+import type { ViewLayout } from '@jbrowse/core/util/Base1DUtils';
 type LGV = LinearGenomeViewModel;
-declare const OverviewRubberbandHoverTooltip: ({ model, open, guideX, overview, }: {
+declare const OverviewRubberbandHoverTooltip: ({ model, guideX, overview, }: {
     model: LGV;
-    open: boolean;
     guideX: number;
-    overview: Base1DViewModel;
-}) => import("react/jsx-runtime").JSX.Element;
+    overview: ViewLayout;
+}) => import("react").JSX.Element;
 export default OverviewRubberbandHoverTooltip;

package/esm/LinearGenomeView/components/OverviewRubberbandHoverTooltip.js

@@ -1,30 +1,23 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { getSession, stringify } from '@jbrowse/core/util';
-import { makeStyles } from '@jbrowse/core/util/tss-react';
-import { Tooltip } from '@mui/material';
 import { observer } from 'mobx-react';
-const useStyles = makeStyles()({
-    guide: {
-        pointerEvents: 'none',
-        height: '100%',
-        width: 1,
-        position: 'absolute',
-        left: 0,
-    },
-});
-const OverviewRubberbandHoverTooltip = observer(function OverviewRubberbandHoverTooltip({ model, open, guideX, overview, }) {
-    const { classes } = useStyles();
+import { GuideLabel } from '../../shared/coordLabels.js';
+import { overviewPxToBp } from './util.js';
+// Label only, no guide line: the overview already marks position with the
+// visible-region box, and unlike the LGV/multi-level guides this one never had a
+// background, so the 1px div it used to render painted nothing while still
+// taking a transform patch per mousemove. Add a background here if a visible
+// line is ever wanted.
+const OverviewRubberbandHoverTooltip = observer(function OverviewRubberbandHoverTooltip({ model, guideX, overview, }) {
     const { cytobandOffset } = model;
     const { assemblyManager } = getSession(model);
-    const px = overview.pxToBp(guideX - cytobandOffset);
+    const px = overviewPxToBp(overview, guideX, cytobandOffset);
     const assembly = assemblyManager.get(px.assemblyName);
     const cytoband = assembly?.cytobands?.find(f => px.coord > f.get('start') &&
         px.coord < f.get('end') &&
-        px.refName === assembly.getCanonicalRefName(f.get('refName')));
-    return (_jsx(Tooltip, { open: open, placement: "top", title: [
-            stringify(px),
-            cytoband?.get('name'),
-            cytoband?.get('type'),
-        ].join(' '), arrow: true, children: _jsx("div", { className: classes.guide, style: { transform: `translateX(${guideX}px)` } }) }));
+        px.refName === assembly.getCanonicalRefName2(f.get('refName')));
+    return (_jsx(GuideLabel, { coordX: guideX, viewWidth: overview.width, stickyTop: undefined, children: [stringify(px), cytoband?.get('name'), cytoband?.get('type')]
+            .filter(Boolean)
+            .join(' ') }));
 });
 export default OverviewRubberbandHoverTooltip;

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

@@ -1,7 +1,8 @@
 import type { LinearGenomeViewModel } from '../index.ts';
+import type { ReactNode } from 'react';
 type LGV = LinearGenomeViewModel;
 declare const OverviewScalebar: ({ model, children, }: {
     model: LGV;
-    children: React.ReactNode;
-}) => import("react/jsx-runtime").JSX.Element;
+    children: ReactNode;
+}) => import("react").JSX.Element;
 export default OverviewScalebar;

package/esm/LinearGenomeView/components/OverviewScalebar.js

@@ -1,18 +1,18 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from 'react';
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PluggableElements } from '@jbrowse/core/ui';
+import { alpha } from '@jbrowse/core/ui/palette';
 import { getEnv, getSession } from '@jbrowse/core/util';
-import Base1DView from '@jbrowse/core/util/Base1DViewModel';
 import { cx, makeStyles } from '@jbrowse/core/util/tss-react';
-import { Typography, alpha, useTheme } from '@mui/material';
+import { Typography } from '@mui/material';
 import { observer } from 'mobx-react';
-import Cytobands from "./Cytobands.js";
-import OverviewHighlight from "./OverviewHighlight.js";
-import OverviewRubberband from "./OverviewRubberband.js";
-import OverviewScalebarPolygon from "./OverviewScalebarPolygon.js";
-import OverviewScalebarTickLabels from "./OverviewScalebarTickLabels.js";
-import { getCytobands } from "./util.js";
-import { HEADER_BAR_HEIGHT, HEADER_OVERVIEW_HEIGHT } from "../consts.js";
-const wholeSeqSpacer = 2;
+import { HEADER_BAR_HEIGHT, HEADER_OVERVIEW_HEIGHT } from '../consts.js';
+import { REF_NAME_LABEL_FONT_SIZE, getBlockRefName, showRefNameLabels, } from '../util.js';
+import Cytobands from './Cytobands.js';
+import OverviewHighlight from './OverviewHighlight.js';
+import OverviewRubberband from './OverviewRubberband.js';
+import OverviewScalebarPolygon from './OverviewScalebarPolygon.js';
+import OverviewScalebarTickLabels from './OverviewScalebarTickLabels.js';
+import { elidedBlockStyles, getCytobands } from './util.js';
 const useStyles = makeStyles()(theme => ({
     scalebar: {
         height: HEADER_OVERVIEW_HEIGHT,
@@ -27,7 +27,16 @@ const useStyles = makeStyles()(theme => ({
         top: 0,
         left: 0,
         height: HEADER_OVERVIEW_HEIGHT,
-        overflow: 'hidden',
+        // clip rather than hidden so this never becomes a scroll container (see
+        // Scalebar)
+        overflow: 'clip',
+    },
+    // cytoband strip keeps a fixed light backdrop in both light/dark mode: the
+    // Giemsa greyscale runs to pure black (gpos100/gvar), which would vanish on
+    // the dark theme's background.default. UCSC/IGV likewise draw the ideogram on
+    // a fixed white strip.
+    scalebarContigCytoband: {
+        backgroundColor: theme.palette.common.white,
     },
     scalebarContigForward: {
         backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 9'%3E%3Cpath d='M-.1 0L6 4.5L-.1 9' fill='none' stroke='${theme.palette.divider}'/%3E%3C/svg%3E")`,
@@ -39,10 +48,19 @@ const useStyles = makeStyles()(theme => ({
     },
     scalebarRefName: {
         position: 'absolute',
-        left: 0,
+        top: 0,
+        fontSize: REF_NAME_LABEL_FONT_SIZE,
         fontWeight: 'bold',
         pointerEvents: 'none',
         zIndex: 100,
+        // clip, not hidden: transform is patched per zoom frame, and clip keeps this
+        // out of the scroll-container path. ellipsis renders identically under clip
+        // (verified pixel-for-pixel), since text-overflow applies at any non-visible
+        // overflow
+        overflow: 'clip',
+        whiteSpace: 'nowrap',
+        textOverflow: 'ellipsis',
+        maxWidth: 'calc(100% - 6px)',
     },
     scalebarVisibleRegion: {
         position: 'absolute',
@@ -53,7 +71,10 @@ const useStyles = makeStyles()(theme => ({
         left: 0,
     },
     overview: {
-        height: HEADER_BAR_HEIGHT,
+        // the band the "you are here" trapezoid is drawn over, and the box the
+        // controls row sits in — a minimum so the row can outgrow it, since the
+        // svg above is absolutely positioned and does not hold it open
+        minHeight: HEADER_BAR_HEIGHT,
         position: 'relative',
     },
     overviewSvg: {
@@ -61,89 +82,72 @@ const useStyles = makeStyles()(theme => ({
         width: '100%',
         position: 'absolute',
     },
+    elidedOverviewBlock: {
+        ...elidedBlockStyles,
+    },
+    cytoSvg: {
+        width: '100%',
+    },
 }));
-const OverviewBox = observer(function OverviewBox({ scale, model, block, overview, }) {
-    const { classes } = useStyles();
-    const theme = useTheme();
-    const { cytobandOffset, showCytobands } = model;
+const OverviewBox = observer(function OverviewBox({ model, block, showRefName, }) {
+    const { classes, theme } = useStyles();
+    const { cytobandOffset, effectiveShowCytobands, overviewLayout: overview, } = model;
     const { reversed, refName, assemblyName } = block;
     const { assemblyManager } = getSession(model);
     const assembly = assemblyManager.get(assemblyName);
     const refNameColor = assembly?.getRefNameColor(refName);
-    const canDisplayCytobands = showCytobands && getCytobands(assembly, block.refName).length;
-    return (_jsxs("div", { children: [_jsx(Typography, { style: {
-                    transform: `translateX(${block.offsetPx + 3}px)`,
-                    color: canDisplayCytobands
-                        ? theme.palette.text.primary
-                        : refNameColor,
-                }, className: classes.scalebarRefName, children: refName }), _jsx("div", { className: cx(classes.scalebarContig, canDisplayCytobands
-                    ? undefined
-                    : reversed
-                        ? classes.scalebarContigReverse
-                        : classes.scalebarContigForward, !canDisplayCytobands ? classes.scalebarBorder : undefined), style: {
-                    transform: `translateX(${block.offsetPx + cytobandOffset}px)`,
-                    width: block.widthPx,
-                    borderColor: refNameColor,
-                }, children: canDisplayCytobands ? (_jsx("svg", { style: { width: '100%' }, children: _jsx(Cytobands, { overview: overview, assembly: assembly, block: block }) })) : (_jsx(OverviewScalebarTickLabels, { model: model, overview: overview, scale: scale, block: block })) })] }));
+    const cytobands = effectiveShowCytobands
+        ? getCytobands(assembly, refName)
+        : [];
+    const canDisplayCytobands = cytobands.length > 0;
+    if (canDisplayCytobands) {
+        return (_jsxs(_Fragment, { children: [showRefName ? (_jsx(Typography, { style: {
+                        // fixed dark: this label overlays the always-white cytoband strip,
+                        // so text.primary (white in dark mode) would be invisible
+                        color: theme.palette.common.black,
+                        transform: `translateX(${block.offsetPx + 3}px)`,
+                    }, className: classes.scalebarRefName, children: refName })) : null, _jsx("div", { className: cx(classes.scalebarContig, classes.scalebarContigCytoband), style: {
+                        transform: `translateX(${block.offsetPx + cytobandOffset}px)`,
+                        width: block.widthPx,
+                    }, children: _jsx("svg", { className: classes.cytoSvg, children: _jsx(Cytobands, { overview: overview, cytobands: cytobands, block: block }) }) })] }));
+    }
+    return (_jsxs("div", { className: cx(classes.scalebarContig, reversed
+            ? classes.scalebarContigReverse
+            : classes.scalebarContigForward, classes.scalebarBorder), style: {
+            transform: `translateX(${block.offsetPx + cytobandOffset}px)`,
+            width: block.widthPx,
+            borderColor: refNameColor,
+        }, children: [showRefName ? (_jsx(Typography, { style: { color: refNameColor, left: 3 }, className: classes.scalebarRefName, children: refName })) : null, _jsx(OverviewScalebarTickLabels, { model: model, block: block, refNameColor: refNameColor, showRefName: showRefName })] }));
 });
-const VisibleRegionBox = observer(function VisibleRegionBox({ model, overview, className, }) {
-    const theme = useTheme();
-    const scalebarColor = theme.palette.tertiary.light;
-    const { dynamicBlocks, showCytobands, cytobandOffset } = model;
-    const visibleRegions = dynamicBlocks.contentBlocks;
-    if (!visibleRegions.length) {
+const VisibleRegionBox = observer(function VisibleRegionBox({ model, }) {
+    const { classes, theme } = useStyles();
+    const { effectiveShowCytobands, cytobandOffset, overviewRegionPxSpan: span, } = model;
+    if (!span) {
         return null;
     }
-    const first = visibleRegions.at(0);
-    const last = visibleRegions.at(-1);
-    const firstOverviewPx = overview.bpToPx({
-        refName: first.refName,
-        coord: first.reversed ? first.end : first.start,
-    }) || 0;
-    const lastOverviewPx = overview.bpToPx({
-        refName: last.refName,
-        coord: last.reversed ? last.start : last.end,
-    }) || 0;
-    const color = showCytobands ? '#f00' : scalebarColor;
-    const transparency = showCytobands ? 0.1 : 0.3;
-    const left = firstOverviewPx + cytobandOffset;
-    return (_jsx("div", { className: className, style: {
-            width: lastOverviewPx - firstOverviewPx,
-            transform: `translateX(${left}px)`,
-            background: alpha(color, transparency),
+    const { color, opacity } = effectiveShowCytobands
+        ? { color: '#f00', opacity: 0.1 }
+        : { color: theme.palette.tertiary.light, opacity: 0.3 };
+    return (_jsx("div", { className: classes.scalebarVisibleRegion, style: {
+            width: span.rightPx - span.leftPx,
+            transform: `translateX(${span.leftPx + cytobandOffset}px)`,
+            background: alpha(color, opacity),
             borderColor: color,
         } }));
 });
-const Scalebar = observer(function Scalebar({ model, scale, overview, }) {
+const OverviewScalebarContent = observer(function OverviewScalebarContent({ model, }) {
     const { classes } = useStyles();
     const { pluginManager } = getEnv(model);
-    const overviewVisibleRegions = overview.dynamicBlocks;
-    const additional = pluginManager.evaluateExtensionPoint('LinearGenomeView-OverviewScalebarComponent', undefined, { model, overview });
-    return (_jsxs("div", { className: classes.scalebar, children: [_jsx(VisibleRegionBox, { model: model, overview: overview, className: classes.scalebarVisibleRegion }), overviewVisibleRegions.map((block, idx) => {
-                return !(block.type === 'ContentBlock') ? (_jsx("div", { className: classes.scalebarContig, style: {
-                        width: block.widthPx,
-                        transform: `translateX(${block.offsetPx}px)`,
-                        backgroundColor: '#999',
-                        backgroundImage: 'repeating-linear-gradient(90deg, transparent, transparent 1px, rgba(255,255,255,.5) 1px, rgba(255,255,255,.5) 3px)',
-                    } }, `${JSON.stringify(block)}-${idx}`)) : (_jsx(OverviewBox, { scale: scale, block: block, model: model, overview: overview }, `${JSON.stringify(block)}-${idx}`));
-            }), _jsx(OverviewHighlight, { model: model, overview: overview }), additional] }));
+    const { overviewLayout: overview, overviewBlocks } = model;
+    const showRefName = showRefNameLabels(overviewBlocks, getBlockRefName);
+    return (_jsxs("div", { className: classes.scalebar, children: [_jsx(VisibleRegionBox, { model: model }), overviewBlocks.map((block, i) => block.type === 'ContentBlock' ? (_jsx(OverviewBox, { block: block, model: model, showRefName: showRefName[i] }, block.key)) : block.type === 'ElidedBlock' ? (_jsx("div", { className: cx(classes.scalebarContig, classes.elidedOverviewBlock), style: {
+                    width: block.widthPx,
+                    transform: `translateX(${block.offsetPx}px)`,
+                } }, block.key)) : null), _jsx(OverviewHighlight, { model: model }), _jsx(PluggableElements, { pluginManager: pluginManager, name: "LinearGenomeView-OverviewScalebarComponent", props: { model, overview } })] }));
 });
 const OverviewScalebar = observer(function OverviewScalebar({ model, children, }) {
     const { classes } = useStyles();
-    const { minimumBlockWidth, totalBp, width, cytobandOffset, displayedRegions, } = model;
-    const modWidth = width - cytobandOffset;
-    const str = JSON.stringify(displayedRegions);
-    const overview = useMemo(() => {
-        const overview = Base1DView.create({
-            displayedRegions: JSON.parse(str),
-            interRegionPaddingWidth: 0,
-            minimumBlockWidth,
-        });
-        overview.setVolatileWidth(modWidth);
-        overview.showAllRegions();
-        return overview;
-    }, [str, minimumBlockWidth, modWidth]);
-    const scale = totalBp / (modWidth - (displayedRegions.length - 1) * wholeSeqSpacer);
-    return (_jsxs("div", { children: [_jsx(OverviewRubberband, { model: model, overview: overview, ControlComponent: _jsx(Scalebar, { model: model, overview: overview, scale: scale }) }), _jsxs("div", { className: classes.overview, children: [_jsx("svg", { height: HEADER_BAR_HEIGHT, className: classes.overviewSvg, children: _jsx(OverviewScalebarPolygon, { model: model, overview: overview }) }), children] })] }));
+    const overview = model.overviewLayout;
+    return (_jsxs("div", { children: [_jsx(OverviewRubberband, { model: model, overview: overview, ControlComponent: _jsx(OverviewScalebarContent, { model: model }) }), _jsxs("div", { className: classes.overview, children: [_jsx("svg", { height: HEADER_BAR_HEIGHT, className: classes.overviewSvg, children: _jsx(OverviewScalebarPolygon, { model: model, overview: overview, overviewOffsetPx: model.cytobandOffset }) }), children] })] }));
 });
 export default OverviewScalebar;

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

@@ -1,8 +1,22 @@
 import type { LinearGenomeViewModel } from '../index.ts';
-import type { Base1DViewModel } from '@jbrowse/core/util/Base1DViewModel';
-declare const OverviewScalebarPolygon: ({ model, overview, useOffset, }: {
+import type { ViewLayout } from '@jbrowse/core/util/Base1DUtils';
+/**
+ * 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.
+ */
+declare const OverviewScalebarPolygon: ({ model, overview, overviewOffsetPx, exportSvg, }: {
     model: LinearGenomeViewModel;
-    overview: Base1DViewModel;
-    useOffset?: boolean;
-}) => import("react/jsx-runtime").JSX.Element | null;
+    overview: ViewLayout;
+    overviewOffsetPx?: number;
+    exportSvg?: boolean;
+}) => import("react").JSX.Element | null;
 export default OverviewScalebarPolygon;

package/esm/LinearGenomeView/components/OverviewScalebarPolygon.js

@@ -1,39 +1,64 @@
 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 FILL_OPACITY = 0.3;
+const STROKE_OPACITY = 0.8;
+const useStyles = makeStyles()(theme => ({
+    polygon: {
+        fill: alpha(theme.palette.tertiary.light, FILL_OPACITY),
+        stroke: alpha(theme.palette.tertiary.light, STROKE_OPACITY),
+    },
+}));
+/**
+ * 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, FILL_OPACITY)), ...getStrokeProps(alpha(theme.palette.tertiary.light, STROKE_OPACITY)) })) : (_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;