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

package/esm/LinearGenomeView/util.js

@@ -1,4 +1,4 @@
-import { UnknownRefNameError, assembleLocStrings, getTickDisplayStr, measureText, parseBpString, parseLocString, } from '@jbrowse/core/util';
+import { UnknownRefNameError, assembleLocString, assembleLocStrings, getTickDisplayStr, measureText, parseBpString, parseLocString, } from '@jbrowse/core/util';
 import { bpOffsetInRegion } from '@jbrowse/core/util/Base1DUtils';
 import { chooseGridPitch } from '@jbrowse/core/util/chooseGridPitch';
 import { tickLabelsWorthDrawing } from '@jbrowse/core/util/tickLabels';
@@ -18,7 +18,7 @@ import { tickLabelsWorthDrawing } from '@jbrowse/core/util/tickLabels';
  * A caller building a view SNAPSHOT does: it has no model to call
  * `fitAllRegions()` on, and naming `bpPerPx`/`offsetPx` instead is dropped
  * whenever the snapshot also carries a `windowWidthBp` — which one copied off an
- * existing view always does. plugin-canvas's collapsed-intron launch is that
+ * existing view always does. plugin-features's collapsed-intron launch is that
  * caller. A live view calls `fitAllRegions()`.
  *
  * `width` enters only through the zoom-in floor, which bites for a region set
@@ -89,7 +89,7 @@ export function makeOverviewTicks(start, end, bpPerPx, reversed = false) {
  * `makeBlockTicks`. What the two do share is already shared: `chooseGridPitch`,
  * and `base` as the 0-based coordinate that `getTickDisplayStr` labels `base+1`.
  */
-export function makeTicks(start, end, bpPerPx, emitMajor = true, emitMinor = true) {
+export function makeTicks(start, end, bpPerPx, includeMinor = true) {
     // Ask for the ~200px spacing this ruler actually wants, and mark majors at
     // that pitch. This used to ask for 60px and then mark majors every *two*
     // pitches, which spaced them the same but off chooseGridPitch's 1/2/5 ladder:
@@ -106,12 +106,12 @@ export function makeTicks(start, end, bpPerPx, emitMajor = true, emitMinor = tru
     const iterPitch = minorPitch || majorPitch;
     const ticks = [];
     for (let base = Math.floor(minBase / iterPitch) * iterPitch; base < Math.ceil(maxBase / iterPitch) * iterPitch + 1; base += iterPitch) {
-        if (emitMinor && base % majorPitch) {
-            ticks.push({ type: 'minor', base: base - 1 });
-        }
-        else if (emitMajor && !(base % majorPitch)) {
+        if (!(base % majorPitch)) {
             ticks.push({ type: 'major', base: base - 1 });
         }
+        else if (includeMinor) {
+            ticks.push({ type: 'minor', base: base - 1 });
+        }
     }
     return ticks;
 }
@@ -177,13 +177,12 @@ function refNameRuns(blocks) {
     return runs;
 }
 /**
- * Index of the run carrying the "sticky" refName label pinned to the left edge:
- * the rightmost run whose left edge has scrolled off the left of the viewport,
- * or the first run when none have.
+ * Index of the run carrying the "sticky" refName label pinned to the strip's
+ * left edge: the rightmost run starting left of `leftEdgePx` (block frame), or
+ * the first run when none does.
  */
-function stickyRunIndex(runs, offsetPx) {
-    const scrolledOff = runs.findLastIndex(run => run.offsetPx < offsetPx);
-    return scrolledOff === -1 ? 0 : scrolledOff;
+function stickyRunIndex(runs, leftEdgePx) {
+    return Math.max(0, runs.findLastIndex(run => run.offsetPx < leftEdgePx));
 }
 export function regionsOrientation(regions) {
     const first = !!regions[0]?.reversed;
@@ -202,161 +201,79 @@ export function regionsOrientation(regions) {
  * upstream is whole-or-nothing, and it would go on believing a glyph fits.
  */
 const REV_MARKER = ' [rev]';
-/** Clearance between the standalone assembly-name chip and a sticky label. */
-const PREFIX_GAP = 4;
-/** Left inset of a non-sticky refName label from its region's left edge. */
-const REF_NAME_LABEL_PADDING_PX = 7;
+/** Clearance between the caption chip and the sticky label after it. */
+const CAPTION_GAP = 4;
 /**
- * translateX, maxWidth and paddingLeft for one refName label. Sticky labels
- * start at the viewport's left edge; others start at their run's left edge.
- *
- * maxWidth is the width of the whole label box, paddingLeft included, so the
- * text has `maxWidth - paddingLeft` to draw in — that is what both consumers
- * clip to (a border-box max-width on the span, an SVG clip rect from the box's
- * own left edge). The caller decides whether the name it wants to draw fits in
- * that (see refNameLabelWidth); a name is drawn whole or not at all.
+ * Left inset of a non-sticky refName label from its region's left edge, clear
+ * of the 3px region divider drawn there.
  */
-function refLabelLayout({ run, offsetPx, sticky, 
-// left-edge x a sticky label may not start before, so a caption chip drawn
-// there keeps the strip to itself. Zero wherever the caption folds into the
-// label instead (the assembly prefix does)
-minTransform = 0, }) {
-    const transform = sticky
-        ? Math.max(minTransform, -offsetPx)
-        : run.offsetPx - offsetPx - 1;
-    // block-frame x where the label actually starts. Derived from `transform` (=
-    // transform + offsetPx) so the width-to-run-end clip stays in lockstep with
-    // where the label is drawn: a sticky label pins to the run's left edge, not
-    // the viewport's, whenever the view is left-overscrolled (offsetPx < 0) —
-    // reading offsetPx directly there over-counted the available width by
-    // |offsetPx|, letting the name bleed past its run's right edge.
-    const labelStartPx = transform + offsetPx;
-    // A non-sticky label's transform anchors at the same x as the region
-    // divider drawn just to its left (SVGRegionSeparators, a 3px bar spanning
-    // local [0,3] from this same run.offsetPx edge), so paddingLeft must clear
-    // that bar plus a few px of breathing room, else the text visually touches
-    // the divider. Sticky labels sit at the viewport's own left edge, no divider.
-    const paddingLeft = sticky ? 0 : REF_NAME_LABEL_PADDING_PX;
-    return { transform, maxWidth: run.endPx - labelStartPx - 1, paddingLeft };
-}
+const REF_NAME_LABEL_PADDING_PX = 7;
 /**
  * Builds the refName labels drawn along the scalebar as plain data (no JSX): one
- * label per run of same-refName regions (deduped so collapsed introns don't
- * repeat the name) plus a "sticky" label pinned to the left edge naming the
- * refName under the viewport's left border.
+ * label per run of same-refName regions, the leftmost of them "sticky" — pinned
+ * so the run under the left edge stays named once its own left edge scrolls off.
  *
- * `caption` is the row-level chip at the viewport's left edge, and it says two
- * things: which assembly this row is (`prefix`, an assembly name, synteny only)
- * and whether the row is flipped. Without it a row of stacked genomes would
- * label some rows with the assembly name and some without, depending only on
- * how wide their leftmost chromosome happens to be.
+ * `caption` is the row-level chip at the viewport's left edge: which assembly
+ * the row is (`prefix`, synteny only) and whether the whole row is flipped. The
+ * chip takes `captionSpanPx` of the strip and the labels get the rest, so the
+ * sticky label pins to the chip's right edge ("hg38" then "chr1") and rides the
+ * run under THAT edge. A run the chip covers entirely goes unnamed, and the
+ * chip is not shortened to uncover it: a width fitted to the run under it
+ * changes with every run that pans past, and a fixed cap short enough to
+ * uncover a 55px chromosome cuts ordinary names. The assembly's `displayName`
+ * is where a long name gets shortened.
  *
- * The assembly name alone folds into the sticky label instead — "prefix:refName"
- * — whenever the two would collide at the left edge, and stands alone when the
- * sticky label sits far enough right not to (a view scrolled left of its first
- * region, so the row's data starts mid-viewport) or when there is no sticky
- * label at all.
+ * `orientation` decides the ` [rev]` marker, following `assembleLocStrings`: say
+ * it where it distinguishes, once where it does not.
  *
- * `orientation` decides the ` [rev]` marker, and it is the row's
- * (`displayedRegionsOrientation`) rather than anything read off the blocks —
- * blocks cover the window, and a row is flipped or not whatever part of it you
- * are looking at. The rule is `assembleLocStrings`': say it where it
- * distinguishes, once where it does not.
- *
- * - `reversed`: the whole row is flipped, which is a fact about the row, so the
- *   caption carries it and NO name does. The caption cannot fold in this state
- *   — the sticky label is pushed clear of it instead — because a marker sitting
- *   on a chromosome name is how the mixed case spells a fact about that one
- *   region. `chr1 [rev] | chr2` would otherwise mean both "the row is flipped,
- *   said once" and "chr1 is flipped and chr2 is not", in identical pixels.
- * - `mixed`: only some regions are flipped — reachable through the label menu's
- *   per-region "Reverse region" — so every reversed run is marked and the
- *   forward ones are left alone. Here the marker on a name is the only thing
- *   telling two labels apart.
+ * - `reversed`: the caption carries the marker and no name does. A marker on a
+ *   chromosome name is how the mixed case flags that one region.
+ * - `mixed`: every reversed run is marked. A marked label that fails the fit
+ *   test falls back to the bare name rather than dropping.
  * - `forward`: no marker.
  *
- * Saying it once is the point: a flipped whole-genome row would otherwise
- * repeat `[rev]` after all 24 chromosomes to say a single thing about the row.
- *
- * Under `mixed` the marker never costs a name: a suffixed label that fails the
- * fit test falls back to the bare name rather than being dropped. Widening the
- * text moves the region width a name needs from ~30px to ~56px at 11px bold,
- * and a feature meant to surface information should not be deleting chromosome
- * names in the narrow half of that gap.
+ * `maxWidth` is the whole label box, `paddingLeft` included — both consumers
+ * clip from the box's left edge. A name is drawn whole or not at all: clipped
+ * mid-glyph, "chr16" reads as "chr1".
  */
 export function getScalebarRefNameLabels({ blocks, offsetPx, prefix, orientation = 'forward', }) {
-    const hasPrefix = prefix !== undefined && prefix !== '';
-    const rowIsReversed = orientation === 'reversed';
-    const captionText = rowIsReversed
-        ? `${hasPrefix ? prefix : ''}${REV_MARKER}`.trimStart()
-        : prefix;
-    // the caption chip occupies the viewport's left edge, so a sticky label
-    // starting inside that span has to yield: absorb the assembly name, or, where
-    // the caption carries the row's orientation and so cannot fold, start after
-    // it. The gap is part of the span: a sticky label carries no padding of its
-    // own, so one starting at exactly the chip's right edge abuts it and the two
-    // read as a single word ("volvoxctgA") for the few px of scroll around the
-    // threshold
-    const captionSpanPx = captionText
-        ? refNameLabelWidth(captionText) + PREFIX_GAP
-        : 0;
+    const caption = [prefix, orientation === 'reversed' ? REV_MARKER.trim() : undefined]
+        .filter(Boolean)
+        .join(' ') || undefined;
+    const captionSpanPx = caption ? refNameLabelWidth(caption) + CAPTION_GAP : 0;
     const runs = refNameRuns(blocks);
-    const stickyIdx = stickyRunIndex(runs, offsetPx);
+    const stickyIdx = stickyRunIndex(runs, offsetPx + captionSpanPx);
     const labels = [];
-    let stickyHasPrefix = false;
     for (const [i, run] of runs.entries()) {
         const sticky = i === stickyIdx;
-        // A non-sticky run starting left of the viewport is entirely off-screen:
-        // the sticky run is by definition the rightmost one starting there, so
-        // every earlier run also *ends* left of the viewport. Its label would just
-        // repeat the name the sticky label already shows, drawn off-canvas —
-        // invisible on screen (overflow:clip) but bleeding into the margin of an
-        // SVG export, which has no such clip.
-        const runStart = run.offsetPx >= offsetPx && run.isLeftEndOfDisplayedRegion;
-        if (!(sticky || runStart)) {
+        // runs left of the sticky one end under the caption or off screen
+        if (i < stickyIdx || !(sticky || run.isLeftEndOfDisplayedRegion)) {
             continue;
         }
-        const layout = refLabelLayout({
-            run,
-            offsetPx,
-            sticky,
-            minTransform: rowIsReversed ? captionSpanPx : 0,
-        });
-        const withPrefix = !rowIsReversed && sticky && hasPrefix && layout.transform < captionSpanPx;
-        const name = withPrefix ? `${prefix}:${run.refName}` : run.refName;
-        // draw the name whole or not at all: a name clipped mid-glyph reads as a
-        // different chromosome ("LG2" cut to "LG"), and measuring it means a short
-        // name gets its label in a region a fixed minimum width would have skipped.
-        // The marker is the one part that degrades instead of dropping the label
+        const runStartPx = run.offsetPx - offsetPx;
+        const transform = sticky
+            ? Math.max(captionSpanPx, runStartPx)
+            : runStartPx - 1;
+        const paddingLeft = sticky ? 0 : REF_NAME_LABEL_PADDING_PX;
+        const maxWidth = run.endPx - offsetPx - transform - 1;
         const text = (orientation === 'mixed' && run.reversed
-            ? [`${name}${REV_MARKER}`, name]
-            : [name]).find(candidate => layout.maxWidth >= layout.paddingLeft + refNameLabelWidth(candidate));
-        if (text === undefined) {
-            continue;
+            ? [`${run.refName}${REV_MARKER}`, run.refName]
+            : [run.refName]).find(candidate => maxWidth >= paddingLeft + refNameLabelWidth(candidate));
+        if (text !== undefined) {
+            labels.push({
+                key: run.key,
+                refName: run.refName,
+                displayedRegionIndex: run.firstRegionIndex,
+                lastDisplayedRegionIndex: run.lastRegionIndex,
+                sticky,
+                transform,
+                maxWidth,
+                paddingLeft,
+                text,
+            });
         }
-        stickyHasPrefix ||= withPrefix;
-        labels.push({
-            key: run.key,
-            refName: run.refName,
-            displayedRegionIndex: run.firstRegionIndex,
-            lastDisplayedRegionIndex: run.lastRegionIndex,
-            sticky,
-            transform: layout.transform,
-            maxWidth: layout.maxWidth,
-            paddingLeft: layout.paddingLeft,
-            text,
-        });
     }
-    return {
-        labels,
-        // the chip to draw at the left edge, or undefined for none. A caption
-        // carrying the orientation always draws; one carrying only the assembly
-        // name draws when no sticky label folded it in
-        caption: rowIsReversed || (hasPrefix && !stickyHasPrefix)
-            ? captionText
-            : undefined,
-        captionSpanPx,
-    };
+    return { labels, caption, captionSpanPx };
 }
 /**
  * Screen-x span a refName label paints over: its padding and its glyphs, which
@@ -404,22 +321,74 @@ export function regionMoveActions(idx, numRegions) {
         },
     ].flatMap(({ when, label, to }) => (when ? [{ label, to }] : []));
 }
-/**
- * The region reorderings offered by the refName-label menu, as pure list
- * transforms feeding setDisplayedRegions (which re-clamps bpPerPx/offsetPx for
- * the new region set).
- */
 export function withRegionMoved(regions, from, to) {
     const out = [...regions];
     const [moved] = out.splice(from, 1);
     out.splice(to, 0, moved);
-    return out;
+    return {
+        regions: out,
+        newIndexOf: i => i === from
+            ? to
+            : i - (i > from && i <= to ? 1 : 0) + (i >= to && i < from ? 1 : 0),
+    };
 }
 export function withRegionRemoved(regions, index) {
-    return regions.filter((_, i) => i !== index);
+    return {
+        regions: regions.filter((_, i) => i !== index),
+        newIndexOf: i => (i === index ? -1 : i > index ? i - 1 : i),
+    };
+}
+export function withRegionsKept(regions, first, last) {
+    return {
+        regions: regions.slice(first, last + 1),
+        newIndexOf: i => (i >= first && i <= last ? i - first : -1),
+    };
 }
 export function withRegionReversed(regions, index) {
-    return regions.map((region, i) => i === index ? { ...region, reversed: !region.reversed } : region);
+    return {
+        regions: regions.map((region, i) => i === index ? { ...region, reversed: !region.reversed } : region),
+        newIndexOf: i => i,
+    };
+}
+/**
+ * Apply a region edit and keep the base under the middle of the viewport
+ * there, where the edit kept its region. `setDisplayedRegions` alone carries
+ * `offsetPx` into a coordinate space the edit redefined, which lands on
+ * whatever region now sits at that offset.
+ */
+export function setDisplayedRegionsKeepingCenter(model, { regions, newIndexOf }) {
+    const center = model.displayedRegions.length
+        ? model.pxToBp(model.width / 2)
+        : undefined;
+    model.setDisplayedRegions(regions);
+    const index = center ? newIndexOf(center.index) : -1;
+    if (center && index !== -1) {
+        model.centerAt(center.coord0, center.refName, index);
+    }
+}
+/**
+ * The full run of same-orientation regions on one refName that a scalebar
+ * label's `firstRegionIndex`..`lastRegionIndex` sits inside. Those come off the
+ * static blocks, which are clipped to the viewport and broken by an elided
+ * block, so a zoomed-in collapsed-introns view brackets only the exons on
+ * screen — which is the wrong answer for anything acting on the whole run.
+ */
+export function regionRunBounds(regions, firstIndex, lastIndex) {
+    const anchor = regions[firstIndex];
+    const inRun = (r) => r !== undefined &&
+        anchor !== undefined &&
+        r.refName === anchor.refName &&
+        r.assemblyName === anchor.assemblyName &&
+        !!r.reversed === !!anchor.reversed;
+    let first = firstIndex;
+    let last = lastIndex;
+    while (inRun(regions[first - 1])) {
+        first--;
+    }
+    while (inRun(regions[last + 1])) {
+        last++;
+    }
+    return { first, last };
 }
 /**
  * Whether a label occupying [leftPx, leftPx + labelWidth] fits within a block
@@ -508,14 +477,16 @@ export function groupContiguousBlocks(blocks) {
                 current.end = Math.max(current.end, block.end);
             }
             else {
+                const reversed = !!block.reversed;
                 current = {
                     offsetPx: block.offsetPx,
                     widthPx: block.widthPx,
                     start: block.start,
                     end: block.end,
-                    reversed: !!block.reversed,
+                    reversed,
                     refName: block.refName,
                     isLeftEndOfDisplayedRegion: !!block.isLeftEndOfDisplayedRegion,
+                    labeled: current?.refName !== block.refName || current.reversed !== reversed,
                 };
                 currentRegionIndex = block.displayedRegionIndex;
                 runs.push(current);
@@ -553,8 +524,7 @@ export function groupContiguousBlocks(blocks) {
  * this frame.
  */
 export function runRefNameLabelPx(runs, orientation = 'forward') {
-    const isRunStart = showRefNameLabels(runs, run => run.refName);
-    return runs.map((run, i) => isRunStart[i] && run.isLeftEndOfDisplayedRegion
+    return runs.map(run => run.labeled && run.isLeftEndOfDisplayedRegion
         ? REF_NAME_LABEL_PADDING_PX +
             refNameLabelWidth(orientation === 'mixed' && run.reversed
                 ? `${run.refName}${REV_MARKER}`
@@ -566,10 +536,10 @@ export function runRefNameLabelPx(runs, orientation = 'forward') {
  * regions. Single source of the tick→px formula shared by gridlines, the
  * scalebar coordinate labels, and SVG export so their positions can't drift.
  */
-export function makeBlockTicks({ start, end, reversed = false, }, bpPerPx, emitMajor = true, emitMinor = true) {
-    return makeTicks(start, end, bpPerPx, emitMajor, emitMinor).map(tick => ({
+export function makeBlockTicks({ start, end, reversed = false, }, bpPerPx, includeMinor = true) {
+    return makeTicks(start, end, bpPerPx, includeMinor).map(tick => ({
         ...tick,
-        x: (reversed ? end - tick.base : tick.base - start) / bpPerPx,
+        x: bpOffsetInRegion({ start, end, reversed }, tick.base) / bpPerPx,
     }));
 }
 /**
@@ -588,6 +558,10 @@ export function makeBlockTicks({ start, end, reversed = false, }, bpPerPx, emitM
  * navigating to a feature
  */
 export async function generateLocations({ regions, assemblyManager, assemblyName, grow, }) {
+    const backwards = regions.find(({ start, end }) => start !== undefined && end !== undefined && start > end);
+    if (backwards) {
+        throw new Error(`found start greater than end in ${assembleLocString(backwards)}`);
+    }
     return Promise.all(regions.map(async (region) => {
         const asmName = region.assemblyName || assemblyName;
         if (!asmName) {
@@ -639,14 +613,12 @@ export async function generateLocations({ regions, assemblyManager, assemblyName
  * Used by navToLocString
  */
 export function parseLocStrings(input, assemblyName, isValidRefName) {
-    const inputs = input
-        .split(/(\s+)/)
-        .map(f => f.trim())
-        .filter(f => !!f);
+    const inputs = input.split(/\s+/).filter(Boolean);
+    const isRef = (ref, asm) => isValidRefName(ref, asm ?? assemblyName);
     // first try interpreting as a whitespace-separated sequence of
     // multiple locstrings
     try {
-        return inputs.map(loc => parseLocString(loc, ref => isValidRefName(ref, assemblyName)));
+        return inputs.map(loc => parseLocString(loc, isRef));
     }
     catch (e) {
         // if this fails, try interpreting as a whitespace-separated refname,
@@ -656,15 +628,95 @@ export function parseLocStrings(input, assemblyName, isValidRefName) {
         // in this form as in the colon form.
         const [refName, start = '', end = ''] = inputs;
         if (e instanceof UnknownRefNameError &&
+            inputs.length === 3 &&
             parseBpString(start) !== undefined &&
             parseBpString(end) !== undefined) {
-            return [
-                parseLocString(`${refName}:${start}..${end}`, ref => isValidRefName(ref, assemblyName)),
-            ];
+            return [parseLocString(`${refName}:${start}..${end}`, isRef)];
         }
         throw e;
     }
 }
+// Frozen because every consumer maps over it and a caller that sorted in place
+// would do so for the whole session.
+const NO_PADDING_SPANS = Object.freeze([]);
+/**
+ * Tick positions in the staticBlocks frame, one pass per merged run so a tick
+ * on an internal ~800px chunk boundary is emitted once.
+ */
+export function getGridlineTicks({ blocks, firstBlockOffset, bpPerPx, }) {
+    const ticks = [];
+    for (const run of groupContiguousBlocks(blocks)) {
+        const runLeft = run.offsetPx - firstBlockOffset;
+        for (const { type, x } of makeBlockTicks(run, bpPerPx)) {
+            if (x >= 0 && x <= run.widthPx) {
+                ticks.push({ x: runLeft + x, major: type === 'major' });
+            }
+        }
+    }
+    return ticks;
+}
+/**
+ * Coordinate labels in the staticBlocks frame, off the same ticks as
+ * `getGridlineTicks`. A run that can hold too few labels to make a ruler goes
+ * unnumbered, and the bold refName label pinned at a run's left edge takes
+ * precedence over a number.
+ */
+export function getScalebarLabels({ blocks, firstBlockOffset, bpPerPx, orientation, }) {
+    const labels = [];
+    const runs = groupContiguousBlocks(blocks);
+    const refNameLabelPx = runRefNameLabelPx(runs, orientation);
+    for (const [i, run] of runs.entries()) {
+        const runLeft = run.offsetPx - firstBlockOffset;
+        const runLabels = [];
+        for (const { base, x } of makeBlockTicks(run, bpPerPx, false)) {
+            const label = getTickDisplayStr(base + 1, bpPerPx);
+            const w = tickLabelWidth(label);
+            if (x - w / 2 >= refNameLabelPx[i] &&
+                labelFitsInBlock(x - w / 2, w, run.widthPx)) {
+                runLabels.push({
+                    x: runLeft + x,
+                    label,
+                    key: `${run.offsetPx}-${base}`,
+                });
+            }
+        }
+        if (tickLabelsWorthDrawing(runLabels.length)) {
+            labels.push(...runLabels);
+        }
+    }
+    return labels;
+}
+/**
+ * Every span along the row that is not track data, in the staticBlocks frame.
+ * Nothing to draw returns one shared array, so the computed's value repeats and
+ * MobX's `===` stops the chain: a view inside one contig has no seam, elision
+ * or boundary, and a fresh `[]` each frame re-rendered every track's padding.
+ */
+export function getPaddingSpans(blocks, firstBlockOffset) {
+    const spans = [];
+    for (const block of blocks) {
+        const x = block.offsetPx - firstBlockOffset;
+        if (block.type === 'ContentBlock') {
+            if (block.isRightEndOfDisplayedRegion) {
+                spans.push({
+                    key: `${block.key}-sep`,
+                    x: x + block.widthPx - 1,
+                    width: 3,
+                    kind: 'seam',
+                });
+            }
+        }
+        else {
+            spans.push({
+                key: block.key,
+                x,
+                width: block.widthPx,
+                kind: block.type === 'ElidedBlock' ? 'elided' : 'boundary',
+            });
+        }
+    }
+    return spans.length > 0 ? spans : NO_PADDING_SPANS;
+}
 export function calculateVisibleLocStrings(contentBlocks) {
     return assembleLocStrings(contentBlocks.map(block => ({
         refName: block.refName,

package/esm/MultiLevelRubberband/MultiLevelRubberband.js

@@ -5,7 +5,7 @@ import { getBpDisplayStr, stringify } from '@jbrowse/core/util';
 import { makeStyles } from '@jbrowse/core/util/tss-react';
 import { observer } from 'mobx-react';
 import RubberbandSpan from '../shared/RubberbandSpan.js';
-import VerticalGuide from './VerticalGuide.js';
+import { VerticalGuideLine } from '../shared/coordLabels.js';
 import { useRangeSelect } from './useRangeSelect.js';
 const useStyles = makeStyles()({
     rubberbandControl: {
@@ -19,11 +19,14 @@ const useStyles = makeStyles()({
 const MultiLevelRubberband = observer(function MultiLevelRubberband({ model, ControlComponent = _jsx("div", {}), }) {
     const ref = useRef(null);
     const { classes } = useStyles();
-    const { guideX, rubberbandOn, leftBpOffset, rightBpOffset, numOfBpSelected, width, left, anchorPosition, open, handleMenuItemClick, handleClose, mouseMove, mouseDown, mouseOut, } = useRangeSelect(ref, model);
-    return (_jsxs(_Fragment, { children: [guideX !== undefined ? (_jsx(VerticalGuide, { model: model, coordX: guideX })) : rubberbandOn ? (_jsx(RubberbandSpan, { leftLabel: _jsx(PerLevelRows, { rows: leftBpOffset.map(l => stringify(l, true)) }), rightLabel: _jsx(PerLevelRows, { rows: rightBpOffset.map(r => stringify(r, true)) }), size: _jsx(PerLevelRows, { rows: numOfBpSelected.map(getBpDisplayStr) }), width: width, left: left, viewWidth: Math.min(...model.views.map(view => view.width)), stickyTop: undefined })) : null, anchorPosition ? (_jsx(Menu, { anchorReference: "anchorPosition", anchorPosition: {
+    const { isClick, guideX, rubberbandOn, leftBpOffset, rightBpOffset, numOfBpSelected, width, left, anchorPosition, handleMenuItemClick, handleClose, mouseMove, mouseDown, mouseOut, } = useRangeSelect(ref, model);
+    const viewWidth = Math.min(...model.views.map(view => view.width));
+    return (_jsxs(_Fragment, { children: [guideX !== undefined ? (_jsx(VerticalGuideLine, { coordX: guideX, viewWidth: viewWidth, stickyTop: undefined, children: _jsx(PerLevelRows, { rows: model.views.map(view => stringify(view.pxToBp(guideX), true)) }) })) : rubberbandOn ? (_jsx(RubberbandSpan, { leftLabel: _jsx(PerLevelRows, { rows: leftBpOffset.map(l => stringify(l, true)) }), rightLabel: _jsx(PerLevelRows, { rows: rightBpOffset.map(r => stringify(r, true)) }), size: _jsx(PerLevelRows, { rows: numOfBpSelected.map(getBpDisplayStr) }), width: width, left: left, viewWidth: viewWidth, stickyTop: undefined })) : null, anchorPosition ? (_jsx(Menu, { anchorReference: "anchorPosition", anchorPosition: {
                     left: anchorPosition.clientX,
                     top: anchorPosition.clientY,
-                }, onMenuItemClick: handleMenuItemClick, open: open, onClose: handleClose, menuItems: model.rubberBandMenuItems() })) : null, _jsx("div", { "data-testid": "rubberband_controls", className: classes.rubberbandControl, ref: ref, onMouseDown: mouseDown, onMouseMove: mouseMove, 
+                }, onMenuItemClick: handleMenuItemClick, open: true, onClose: handleClose, menuItems: isClick
+                    ? model.rubberbandClickMenuItemsAtPx(anchorPosition.offsetX)
+                    : model.rubberBandMenuItems() })) : null, _jsx("div", { "data-testid": "rubberband_controls", className: classes.rubberbandControl, ref: ref, onMouseDown: mouseDown, onMouseMove: mouseMove, 
                 // Leave, not out: mouseout bubbles up from every child, so moving across
                 // the ControlComponent's own children fired it and flickered the guide.
                 // Matches Rubberband/OverviewRubberband.
@@ -31,7 +34,7 @@ const MultiLevelRubberband = observer(function MultiLevelRubberband({ model, Con
 });
 // one row per rubberband level, in level order. values repeat across levels
 // whenever the assemblies line up, so the index is the only stable key
-function PerLevelRows({ rows }) {
+const PerLevelRows = observer(function PerLevelRows({ rows, }) {
     return rows.map((row, idx) => (_jsx("div", { children: row }, idx)));
-}
+});
 export default MultiLevelRubberband;

package/esm/MultiLevelRubberband/index.d.ts

@@ -1,2 +1,4 @@
 export { default as MultiLevelRubberband } from './MultiLevelRubberband.tsx';
+export { multiLevelRowClickMenuItems, multiLevelRowMenuItems, } from './menuItems.ts';
+export { rowLabels } from './rowLabel.ts';
 export type { MultiLevelRubberbandModel } from './types.ts';

package/esm/MultiLevelRubberband/index.js

@@ -1 +1,3 @@
 export { default as MultiLevelRubberband } from './MultiLevelRubberband.js';
+export { multiLevelRowClickMenuItems, multiLevelRowMenuItems, } from './menuItems.js';
+export { rowLabels } from './rowLabel.js';

package/esm/MultiLevelRubberband/menuItems.d.ts

@@ -0,0 +1,34 @@
+import type { LinearGenomeViewModel } from '../LinearGenomeView/model.ts';
+import type { MenuItem } from '@jbrowse/core/ui';
+/**
+ * One row per genome row, each holding that row's own rubberband menu — Get
+ * sequence, Copy range, Highlight region, and whatever a plugin contributes
+ * under Launch.
+ *
+ * A drag on the multi-level strip commits offsets on EVERY row (see
+ * `useRangeSelect`), so each row's `rubberBandMenuItems()` already describes a
+ * real selection and was simply never offered: the stacked views' menu held
+ * "Zoom to region(s)" and nothing else, while the same drag in a plain linear
+ * genome view offered five actions. Per row rather than applied across rows
+ * because each row is its own assembly — one sequence to fetch, one range to
+ * copy, one highlight to place — so there is no "all rows" answer to give.
+ *
+ * Zoom is the exception and stays where each view already has it: zooming every
+ * row at once is what the gesture means, and the synteny view holds its follow
+ * anchor across the loop.
+ */
+export declare function multiLevelRowMenuItems(views: LinearGenomeViewModel[]): MenuItem[];
+/**
+ * The same per-row rows for a bare CLICK on the strip rather than a drag — each
+ * row's Center view here, Zoom to base level and Copy coordinate, at the base
+ * that row paints under `px`.
+ *
+ * No all-rows row above them, unlike the drag's "Zoom to region(s)". A drag
+ * names a span in pixels and every row can act on it; a click names a
+ * COORDINATE, and the rows are different assemblies, so which genome's base the
+ * pointer is over is the question the menu has to ask rather than answer.
+ *
+ * `px` rather than a resolved offset: each row maps the pixel through its own
+ * `pxToBp`, so there is no one offset to pass.
+ */
+export declare function multiLevelRowClickMenuItems(views: LinearGenomeViewModel[], px: number): MenuItem[];