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

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

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

package/esm/LinearGenomeView/components/NoTracksActiveButton.js

@@ -1,4 +1,4 @@
-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 { TrackSelector as TrackSelectorIcon } from '@jbrowse/core/ui/Icons';
 import { makeStyles } from '@jbrowse/core/util/tss-react';
 import { Button, Paper, Typography } from '@mui/material';

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

@@ -1,8 +1,6 @@
 import type { LinearGenomeViewModel } from '../model.ts';
-import type { Base1DViewModel } from '@jbrowse/core/util/Base1DViewModel';
 type LGV = LinearGenomeViewModel;
-declare const OverviewHighlight: ({ model, overview, }: {
+declare const OverviewHighlight: ({ model, }: {
     model: LGV;
-    overview: Base1DViewModel;
-}) => import("react/jsx-runtime").JSX.Element[];
+}) => import("react").JSX.Element[] | null;
 export default OverviewHighlight;

package/esm/LinearGenomeView/components/OverviewHighlight.js

@@ -1,50 +1,29 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { getSession, notEmpty } from '@jbrowse/core/util';
 import { colord } from '@jbrowse/core/util/colord';
-import { makeStyles } from '@jbrowse/core/util/tss-react';
+import { useTheme } from '@mui/material';
 import { observer } from 'mobx-react';
-const useStyles = makeStyles()(theme => ({
-    highlight: {
-        height: '100%',
-        position: 'absolute',
-        left: 0,
-        background: colord(theme.palette.highlight.main).alpha(0.35).toRgbString(),
-        borderLeft: `1px solid ${theme.palette.highlight.main}`,
-        borderRight: `1px solid ${theme.palette.highlight.main}`,
-    },
-}));
-const OverviewHighlight = observer(function OverviewHighlight({ model, overview, }) {
-    const { classes } = useStyles();
-    const { highlight, cytobandOffset } = model;
-    const session = getSession(model);
-    const { assemblyManager } = session;
-    return highlight
-        .map(r => {
-        const asm = r.assemblyName
-            ? assemblyManager.get(r.assemblyName)
-            : undefined;
-        const refName = asm?.getCanonicalRefName(r.refName) ?? r.refName;
-        const s = overview.bpToPx({
-            ...r,
-            refName,
-            coord: r.start,
-        });
-        const e = overview.bpToPx({
-            ...r,
-            refName,
-            coord: r.end,
-        });
-        return s !== undefined && e !== undefined
-            ? {
-                width: Math.abs(e - s),
-                left: s + cytobandOffset,
-            }
-            : undefined;
-    })
-        .filter(notEmpty)
-        .map(({ left, width }, idx) => (_jsx("div", { className: classes.highlight, style: {
-            width,
-            transform: `translateX(${left}px)`,
-        } }, `${left}_${width}_${idx}`)));
+import OverviewHighlightBand from './OverviewHighlightBand.js';
+import { getHighlightColor, highlightKey } from './util.js';
+const OverviewHighlight = observer(function OverviewHighlight({ model, }) {
+    const theme = useTheme();
+    const themed = colord(theme.palette.highlight.main);
+    // gate on highlightsVisible to match the main-view band, scalebar band, and
+    // SVG export — otherwise "Turn off highlights" leaves the overview bands up
+    return getSession(model).highlightsVisible
+        ? model.highlight
+            .map(highlight => {
+            const coords = model.getOverviewHighlightCoords(highlight);
+            return coords ? { coords, highlight } : undefined;
+        })
+            .filter(notEmpty)
+            .map(({ coords, highlight }, idx) => {
+            const bandColor = getHighlightColor(highlight, theme);
+            return (_jsx(OverviewHighlightBand
+            // region fields keep the key stable across pan/zoom (unlike pixel
+            // coords); idx disambiguates duplicate highlights on the region
+            , { coords: coords, background: bandColor.toRgbString(), borderColor: (highlight.color ? bandColor : themed).toRgbString(), tooltip: highlight.label }, highlightKey(highlight, idx)));
+        })
+        : null;
 });
 export default OverviewHighlight;

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

@@ -0,0 +1,9 @@
+export default function OverviewHighlightBand({ coords, background, borderColor, tooltip, }: {
+    coords: {
+        left: number;
+        width: number;
+    };
+    background: string;
+    borderColor?: string;
+    tooltip?: string;
+}): import("react").JSX.Element;

package/esm/LinearGenomeView/components/OverviewHighlightBand.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { makeStyles } from '@jbrowse/core/util/tss-react';
+import { Tooltip } from '@mui/material';
+// Renders a single absolute-positioned band over the overview scalebar. Used
+// for both LGV `view.highlight` entries and grid-bookmark bookmark highlights.
+// The 1px border keeps very narrow bands visible.
+const useStyles = makeStyles()({
+    highlight: {
+        height: '100%',
+        position: 'absolute',
+        left: 0,
+    },
+});
+export default function OverviewHighlightBand({ coords, background, borderColor, tooltip, }) {
+    const { classes } = useStyles();
+    const band = (_jsx("div", { className: classes.highlight, style: {
+            transform: `translateX(${coords.left}px)`,
+            width: coords.width,
+            background,
+            ...(borderColor && {
+                borderLeft: `1px solid ${borderColor}`,
+                borderRight: `1px solid ${borderColor}`,
+            }),
+        } }));
+    return tooltip ? (_jsx(Tooltip, { title: tooltip, arrow: true, children: band })) : (band);
+}

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

@@ -1,9 +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 OverviewRubberband: ({ model, overview, ControlComponent, }: {
     model: LGV;
-    overview: Base1DViewModel;
+    overview: ViewLayout;
     ControlComponent?: React.ReactElement;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export default OverviewRubberband;

package/esm/LinearGenomeView/components/OverviewRubberband.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
-import { getSession } from '@jbrowse/core/util';
+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 OverviewRubberbandHoverTooltip from './OverviewRubberbandHoverTooltip.js';
+import { overviewPxToBp } from './util.js';
 const useStyles = makeStyles()({
     rubberbandControl: {
         cursor: 'crosshair',
@@ -25,35 +26,40 @@ const OverviewRubberband = observer(function OverviewRubberband({ model, overvie
     const { classes } = useStyles();
     const mouseDragging = startX !== undefined;
     useEffect(() => {
+        const el = controlsRef.current;
+        if (!mouseDragging || !el) {
+            return;
+        }
+        // the container's left edge is fixed for the duration of a drag, so measure
+        // it once here rather than calling getBoundingClientRect on every mousemove
+        const { left } = el.getBoundingClientRect();
         function globalMouseMove(event) {
-            const ref = controlsRef.current;
-            if (ref && mouseDragging) {
-                setCurrentX(getRelativeX(event, ref));
-            }
+            setCurrentX(event.clientX - left);
         }
-        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);
+        function globalMouseUp(event) {
+            // read the up position from the event so currentX state doesn't need to
+            // be a dep (which would re-subscribe these listeners every mousemove)
+            if (startX !== undefined) {
+                const offsetX = event.clientX - left;
+                if (Math.abs(offsetX - startX) > 3) {
+                    const leftPx = Math.min(startX, offsetX);
+                    const rightPx = Math.max(startX, offsetX);
+                    model.moveTo(overviewPxToBp(overview, leftPx, cytobandOffset), overviewPxToBp(overview, rightPx, cytobandOffset));
                 }
                 else {
-                    model.centerAt(Math.round(click.coord), click.refName, click.index);
+                    const click = overviewPxToBp(overview, startX, cytobandOffset);
+                    if (click.refName) {
+                        model.centerAt(click.coord0, click.refName, click.index);
+                    }
+                    else {
+                        getNotificationSink(model).notify('unknown position clicked');
+                        console.error('unknown position clicked', click);
+                    }
                 }
             }
             setStartX(undefined);
             setCurrentX(undefined);
-            if (startX !== undefined) {
-                setGuideX(undefined);
-            }
+            setGuideX(undefined);
         }
         function globalKeyDown(event) {
             if (event.key === 'Escape') {
@@ -61,18 +67,15 @@ const OverviewRubberband = observer(function OverviewRubberband({ model, overvie
                 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]);
+        window.addEventListener('mousemove', globalMouseMove);
+        window.addEventListener('mouseup', globalMouseUp);
+        window.addEventListener('keydown', globalKeyDown);
+        return () => {
+            window.removeEventListener('mousemove', globalMouseMove);
+            window.removeEventListener('mouseup', globalMouseUp);
+            window.removeEventListener('keydown', globalKeyDown);
+        };
+    }, [startX, mouseDragging, model, overview, cytobandOffset]);
     function mouseDown(event) {
         event.preventDefault();
         event.stopPropagation();
@@ -84,25 +87,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,17 @@
-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 { 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 { 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 +26,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 +47,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 +70,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 +81,74 @@ const useStyles = makeStyles()(theme => ({
         width: '100%',
         position: 'absolute',
     },
+    elidedOverviewBlock: {
+        ...elidedBlockStyles,
+    },
+    cytoSvg: {
+        width: '100%',
+    },
 }));
-const OverviewBox = observer(function OverviewBox({ scale, model, block, overview, }) {
+const OverviewBox = observer(function OverviewBox({ model, block, showRefName, }) {
     const { classes } = useStyles();
     const theme = useTheme();
-    const { cytobandOffset, showCytobands } = model;
+    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 VisibleRegionBox = observer(function VisibleRegionBox({ model, }) {
+    const { classes } = useStyles();
     const theme = useTheme();
-    const scalebarColor = theme.palette.tertiary.light;
-    const { dynamicBlocks, showCytobands, cytobandOffset } = model;
-    const visibleRegions = dynamicBlocks.contentBlocks;
-    if (!visibleRegions.length) {
+    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;