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

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;

package/esm/LinearGenomeView/components/OverviewScalebarPolygon.js

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

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

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

package/esm/LinearGenomeView/components/OverviewScalebarTickLabels.js

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

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

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

package/esm/LinearGenomeView/components/PaddingBlocks.js

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

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

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

package/esm/LinearGenomeView/components/RangeSelectOverlay.js

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

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

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

package/esm/LinearGenomeView/components/RegionWidthEditorDialog.js

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

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

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