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

package/esm/searchUtils.js

@@ -1,77 +1,364 @@
-import BaseResult from '@jbrowse/core/TextSearch/BaseResults';
-import { dedupe, getEnv, getSession } from '@jbrowse/core/util';
-export async function navToOption({ option, model, assemblyName, }) {
-    const location = option.getLocation();
-    const trackId = option.getTrackId();
-    if (location) {
-        await model.navToLocString(location, assemblyName, 0.2);
-        if (trackId) {
-            model.showTrack(trackId);
+import { RefSequenceResult } from '@jbrowse/core/TextSearch/BaseResults';
+import { groupByPlace } from '@jbrowse/core/TextSearch/places';
+import { dedupe, getEnv, getNotificationSink, getSession, matchRefNames, MAX_GLOB_REGIONS, UnknownRefNameError, } from '@jbrowse/core/util';
+import { isAlive } from '@jbrowse/mobx-state-tree';
+import { parseLocStrings } from './LinearGenomeView/util.js';
+// Budget for refName suggestions from a query. Deliberately far below the
+// autocomplete's ~100-row display cap: refNames are returned ahead of the text
+// search hits, so a scaffold-heavy assembly would otherwise fill every row with
+// scaffolds and push the gene hits out of the list entirely. Raising this to
+// match the display cap looks like a consistency fix and is not one.
+const MAX_REFNAME_HITS = 10;
+// shared dispatch used by SearchBox.onSelect and the LGV ImportForm submit:
+// route a chosen result to a direct nav, a multi-result dialog, or a generic
+// locstring/refname resolution
+export async function navigateToSelectedOption({ option, model, assemblyName, }) {
+    if (option.hasLocation()) {
+        await navToOption({ option, model, assemblyName });
+    }
+    else if (option.results?.length) {
+        await showSearchResults({
+            results: option.results,
+            query: option.getLabel(),
+            model,
+            assemblyName,
+        });
+    }
+    else {
+        await handleSelectedRegion({
+            input: option.getLabel(),
+            assemblyName,
+            model,
+        });
+    }
+}
+// Whether the view already has the track this hit came from on screen.
+export function isOpenInView(result, model) {
+    const trackId = result.getTrackId();
+    return trackId !== undefined && !!model.getTrack(trackId);
+}
+// Which hit of an agreeing group to travel through, best rung first: a track
+// the view already has on screen, then one the session could open if asked,
+// then whatever the ranking put first. The middle rung is not hypothetical —
+// a JBrowse 1 names index stores JBrowse 1 track *names*, and volvox's has
+// four EDEN.1 entries of which two name nothing any JBrowse 2 config claims.
+// Travelling through one of those navigates correctly and then drops a
+// "could not resolve identifier" snackbar on top of it.
+function trackRank(result, model, session) {
+    const trackId = result.getTrackId();
+    if (trackId === undefined) {
+        return 2;
+    }
+    else if (model.getTrack(trackId)) {
+        return 0;
+    }
+    else {
+        return session.getTrackById(trackId) ? 1 : 3;
+    }
+}
+// The pick is a stable minimum, so a linear scan rather than a sort: keeping
+// the first strictly-lowest rung leaves a group with nothing to choose between
+// in the order the ranking handed it. A comparator would ask `trackRank`, and
+// through it `session.getTrackById`, O(n log n) times.
+function bestRanked(results, model, session) {
+    let best = results[0];
+    let bestRank = trackRank(best, model, session);
+    for (let i = 1; i < results.length; i++) {
+        const rank = trackRank(results[i], model, session);
+        if (rank < bestRank) {
+            best = results[i];
+            bestRank = rank;
         }
     }
+    return best;
+}
+// One hit per place, in the order the ranking first reached each. Hits that
+// name one feature at one place are several indexes having found it, not a
+// choice to put to the user: a handful of gene tracks turned every gene search
+// into a picker whose only varying column was Track (issues #4302 and #5068),
+// and two whose gene models end a few bases apart still did.
+export function distinctDestinations({ results, model, session, assembly, }) {
+    return groupByPlace(results, assembly).map(group => bestRanked(group, model, session));
+}
+// Every multi-hit result set reaches the picker through here, so the two
+// search surfaces cannot disagree about when one is worth raising: only when
+// the hits name more than one place. Returns whether the view moved.
+export async function showSearchResults({ results, query, model, assemblyName, grow, showHitTrack, }) {
+    const session = getSession(model);
+    const places = distinctDestinations({
+        results,
+        model,
+        session,
+        assembly: session.assemblyManager.get(assemblyName),
+    });
+    const land = (option) => navToOption({ option, model, assemblyName, grow, showHitTrack });
+    if (places.length === 1) {
+        await land(places[0]);
+        return true;
+    }
+    else {
+        model.setSearchResults(places, query, assemblyName, land);
+        return false;
+    }
+}
+// A search hit lands with context around it rather than flush to the feature's
+// own edges, which is what this default is; a caller that asked for a specific
+// padding gets that instead.
+const SEARCH_HIT_GROW = 0.2;
+// The track to show beside a hit: the one its index came from, when this
+// session has it. A shared index names tracks of whichever config it was built
+// for — the UCSC hg38 names index says `hg38-ncbiRefSeqGff`, which the HPRC
+// pangenome config reuses without carrying — and launching a track the session
+// lacks turned every gene search there into a "Could not resolve identifier"
+// error over a view that had navigated fine.
+export function hitTrackToShow(result, session) {
+    const trackId = result.getTrackId();
+    return trackId !== undefined && session.getTrackById(trackId)
+        ? trackId
+        : undefined;
+}
+// A hit lands with the track its index came from shown, which is what a name
+// typed into the search box wants. A session spec that named its own tracks
+// passes false: it asked for those tracks, and a hosted config's full RefSeq
+// appearing beside the curated one it listed read as a bug.
+export async function navToOption({ option, model, assemblyName, grow, showHitTrack = true, }) {
+    // getLocation() can be an empty string when a result reports hasLocation()
+    // but carries no coordinates; treat that as "no location" and fall back to
+    // the label rather than forwarding '' into an empty, view-blanking parse
+    const location = option.getLocation() || option.getLabel();
     const session = getSession(model);
-    const { pluginManager } = getEnv(session);
-    await pluginManager.evaluateAsyncExtensionPoint('LinearGenomeView-searchResultSelected', undefined, { session, result: option, model, assemblyName });
-}
-export async function handleSelectedRegion({ input, model, assembly, }) {
-    const allRefs = assembly.allRefNamesWithLowerCase || [];
-    const assemblyName = assembly.name;
-    if (input.split(' ').every(entry => checkRef(entry, allRefs))) {
-        await model.navToLocString(input, assembly.name);
+    const { assemblyManager } = session;
+    await model.navToLocations(parseLocStrings(location, assemblyName, (ref, asm) => assemblyManager.isValidRefName(ref, asm)), assemblyName, grow ?? SEARCH_HIT_GROW);
+    const trackId = showHitTrack ? hitTrackToShow(option, session) : undefined;
+    if (trackId && isAlive(model)) {
+        await model.launchTrack(trackId);
+    }
+    // same detach hazard as showTrack above: navToLocations awaits, and handlers
+    // read off the view (the canvas one calls getSession(model) and model.tracks),
+    // which throws once it has left the tree. Deliberately not the Strict runner —
+    // this fires after the navigation has already succeeded, so a plugin's
+    // post-nav side effect failing must not turn a completed search into an error
+    if (isAlive(model)) {
+        const { pluginManager } = getEnv(session);
+        await pluginManager.evaluateAsyncExtensionPoint(
+        /** #extensionPoint LinearGenomeView-searchResultSelected | async | Invoked when a search result is selected */
+        'LinearGenomeView-searchResultSelected', undefined, { session, result: option, model, assemblyName });
+    }
+}
+// Thrown when a name search yields no hits and the input isn't coordinate-shaped.
+// Typed (rather than a bare Error) so callers can render it as a soft "not found"
+// warning instead of an error — string-matching the message would be brittle.
+export class SearchResultsNotFoundError extends Error {
+    name = 'SearchResultsNotFoundError';
+}
+// How every search surface reports a failed navigation. A miss is the ordinary
+// outcome of typing a name that isn't there, so it shows its own sentence
+// rather than `${e}`, which would prefix it with the class name. Shared so the
+// import form and the header box can't drift apart on it again.
+export function notifySearchFailure(session, e) {
+    console.error(e);
+    session.notify(e instanceof SearchResultsNotFoundError ? e.message : `${e}`, 'warning');
+}
+// if input is a known ref or locstring, navigate directly;
+// otherwise search and: pop a dialog for multiple results, navigate for one,
+// or fall back to treating input as a locstring
+//
+// Returns whether the view actually moved. Three branches deliberately do not
+// navigate — a glob too wide to open, a multi-hit search whose hits disagree
+// about where to go and so raise the picker, and a view detached while the
+// search RPC ran — and each of them resolves, so a caller awaiting this cannot
+// otherwise tell "showing it" from "asked you which one".
+export async function handleSelectedRegion({ input, model, assemblyName, grow, showHitTrack, }) {
+    const { assemblyManager, textSearchManager } = getSession(model);
+    // resolves only once regions/aliases are loaded, which isValidRefName needs
+    // (it throws otherwise). A load failure is not this function's to report:
+    // swallow it and let the input fall through to the text-search path below
+    // rather than surfacing as a nav error
+    const assembly = await assemblyManager
+        .waitForAssembly(assemblyName)
+        .catch(() => undefined);
+    // the same predicate navToLocstrings hands parseLocStrings, so a locstring
+    // that passes here is one the parse below will accept
+    const isRef = (ref) => !!assembly && assemblyManager.isValidRefName(ref, assemblyName);
+    // navigate treating input as one or more whitespace-separated locstrings
+    const navToLocstrings = () => model.navToLocations(parseLocStrings(input, assemblyName, (ref, asm) => assemblyManager.isValidRefName(ref, asm)), assemblyName, grow);
+    if (input
+        .split(/\s+/)
+        .filter(Boolean)
+        .every(entry => checkRef(entry, isRef))) {
+        await navToLocstrings();
+        return true;
+    }
+    else if (input.includes('*') && !!assembly) {
+        // Enter does what the dropdown's "Show all N regions matching …" row does,
+        // for the same text. It is NOT a blind resolution: that row, and the matches
+        // under it, have been on screen the whole time the pattern was being typed,
+        // which is the reason a glob belongs in the picker at all. What would be
+        // indefensible is the two disagreeing — Enter reporting no results over a
+        // list the box is showing is the same failure the exact-first search pass
+        // was written to end, and a glob is precisely the query the text index can
+        // never answer, since nothing PREFIX-matches the literal `chr*`.
+        //
+        // Ordered after the refName check, so a contig whose name really contains
+        // `*` — GRCh38's HLA decoys — navigates to itself rather than being read as
+        // a pattern. Same literal-first rule as selectNamedRegions.
+        const names = matchRefNames(assembly, input, MAX_GLOB_REGIONS);
+        if (names.length > MAX_GLOB_REGIONS) {
+            // Refused rather than truncated, and said out loud. Opening the first
+            // thousand of a wider match is the one outcome that would look like it
+            // worked.
+            getNotificationSink(model).notify(`"${input}" matches more than ${MAX_GLOB_REGIONS} regions — narrow the pattern`, 'warning');
+            return false;
+        }
+        else if (names.length) {
+            await model.navToLocations(parseLocStrings(names.join(' '), assemblyName, (ref, asm) => assemblyManager.isValidRefName(ref, asm)), assemblyName);
+            return true;
+        }
+        else {
+            // matched nothing: a pattern is not a feature name, so there is no index
+            // to fall through to, and the miss is the whole answer
+            throw new SearchResultsNotFoundError(`No results found for "${input}"`);
+        }
     }
     else {
-        const searchScope = model.searchScope(assemblyName);
-        const { textSearchManager } = getSession(model);
-        const results = await fetchResults({
+        // Ask once, unrestricted, and read exactness off the hits. Prefer the
+        // exact ones so a precise name navigates straight to its feature instead
+        // of opening a picker of everything it prefixes ("EDEN" must not pop a
+        // dialog for EDEN.1/.2/.3) — but an exact miss is not a no-result, since
+        // the autocomplete dropdown searched unrestricted and anything it just
+        // listed has to be reachable here too (typing "apple" and pressing enter
+        // once reported `No results found for "apple"` for a query the dropdown
+        // had two hits for).
+        //
+        // This used to be two searches, an exact one and then a broad one on the
+        // miss, which is two reads of the same index for the same query — the
+        // adapters answer 'exact' by filtering exactly this list. An adapter that
+        // tags nothing simply never wins the exact pass, which is the behaviour it
+        // had when it returned nothing for searchType: 'exact'.
+        const found = await searchNames({
             queryString: input,
-            searchType: 'exact',
-            searchScope,
-            rankSearchResults: model.rankSearchResults,
+            assemblyName,
             textSearchManager,
             assembly,
         });
+        const exactResults = found.results.filter(r => r.isExact());
+        const results = exactResults.length ? exactResults : found.results;
+        // the view may have been closed/detached while the text-search RPC ran
+        if (!isAlive(model)) {
+            return false;
+        }
         if (results.length > 1) {
-            model.setSearchResults(results, input.toLowerCase(), assemblyName);
+            return await showSearchResults({
+                results,
+                query: input,
+                model,
+                assemblyName,
+                grow,
+                showHitTrack,
+            });
         }
         else if (results.length === 1) {
+            // `grow` reached the locstring branch above but not this one, so a
+            // caller's padding — a session spec's `grow`, sv-core's navToLoc — was
+            // honoured or silently replaced by 0.2 depending on whether the input
+            // happened to parse as a locstring rather than resolve to a feature
             await navToOption({
                 option: results[0],
                 model,
                 assemblyName,
+                grow,
+                showHitTrack,
             });
+            return true;
         }
         else {
-            await model.navToLocString(input, assemblyName);
+            // no search hits: still try to resolve the input as a locstring (bare
+            // refname, "ref start end" triplet, etc). if that also can't find a
+            // refname AND the input is a single bare token (a plausible gene name),
+            // reframe the unknown-ref error as a name miss; keep the specific ref
+            // error for coordinate/multi-part queries
+            try {
+                await navToLocstrings();
+                return true;
+            }
+            catch (e) {
+                const isPlainName = !input.includes(':') && !input.includes(' ');
+                if (e instanceof UnknownRefNameError && isPlainName) {
+                    throw nameNotFound(input, assemblyName, found);
+                }
+                else {
+                    throw e;
+                }
+            }
         }
     }
 }
-export function checkRef(str, allRefs) {
+export function checkRef(str, isRef) {
     const [ref, rest] = splitLast(str, ':');
-    return (allRefs.includes(str) ||
-        (allRefs.includes(ref) && !Number.isNaN(Number.parseInt(rest, 10))));
+    return isRef(str) || (isRef(ref) && /^\d/.test(rest));
 }
-export async function fetchResults({ queryString, searchType, searchScope, rankSearchResults, textSearchManager, assembly, }) {
-    if (!textSearchManager) {
-        console.warn('No text search manager');
-    }
-    const textSearchResults = await textSearchManager?.search({
+async function searchNames({ queryString, searchType, assemblyName, textSearchManager, assembly, signal, }) {
+    const report = await textSearchManager?.searchIndexes({
         queryString,
         searchType,
-    }, searchScope, rankSearchResults);
-    const refNameResults = [
-        ...new Set(assembly?.allRefNames
-            ?.filter(ref => ref.toLowerCase().startsWith(queryString.toLowerCase()))
-            .map(ref => assembly.getCanonicalRefName(ref) ?? ref)
-            .slice(0, 10)),
-    ].map(r => new BaseResult({ label: r, matchedObject: { refName: r } }));
-    return dedupe([...refNameResults, ...(textSearchResults ?? [])], elt => elt.getId());
+        signal,
+    }, assemblyName);
+    // ensure aliases are loaded: allRefNames is a pure getter, so reading it does
+    // not itself kick off the lazy load. A load failure just leaves allRefNames
+    // undefined, so this still returns whatever the text search turned up
+    await assembly?.load().catch(() => { });
+    const refNameResults = assembly
+        ? searchRefNames(assembly, queryString, searchType)
+        : [];
+    return {
+        results: dedupe([...refNameResults, ...(report?.results ?? [])], elt => elt.getId()),
+        indexCount: report?.indexCount ?? 0,
+        failures: report?.failures ?? [],
+    };
 }
-export function splitLast(str, split) {
-    const lastIndex = str.lastIndexOf(split);
-    if (lastIndex === -1) {
-        return [str, ''];
+export async function fetchResults(args) {
+    return (await searchNames(args)).results;
+}
+// A miss says when an index could not answer: with none answering it is a
+// failure, and with some answering it is still a miss, naming what failed
+export function nameNotFound(input, assemblyName, { indexCount, failures }) {
+    const [failure] = failures;
+    const miss = `No results found for "${input}"`;
+    return failure === undefined
+        ? new SearchResultsNotFoundError(indexCount ? miss : `${miss}: ${assemblyName} has no text search index`)
+        : failures.length === indexCount
+            ? new Error(`Searching for "${input}" failed: ${failure}`, {
+                cause: failure,
+            })
+            : new SearchResultsNotFoundError(`${miss} (a search index failed: ${failure})`, { cause: failure });
+}
+// Scan assembly refnames for query matches, resolving aliases (e.g. 'contigB')
+// to the canonical refname ('ctgB') so the dropdown shows the name that matches
+// the FASTA / displayed regions. allRefNames can hold ~10^6 entries, so stop
+// once enough unique canonical hits accumulate rather than lowercasing and
+// scanning the entire list on every keystroke.
+function searchRefNames(assembly, queryString, searchType) {
+    const q = queryString.toLowerCase();
+    // canonical name -> whether any alias of it matched the query exactly, so
+    // "contigb" is an exact hit on ctgB even though the canonical name is not
+    // the query. Same collapsing as before, now carrying the flag through it
+    const canonicalHits = new Map();
+    for (const ref of assembly.allRefNames ?? []) {
+        const lower = ref.toLowerCase();
+        const exact = lower === q;
+        const isMatch = searchType === 'exact' ? exact : lower.startsWith(q);
+        if (isMatch) {
+            const canonical = assembly.getCanonicalRefName2(ref);
+            canonicalHits.set(canonical, exact || !!canonicalHits.get(canonical));
+            if (canonicalHits.size >= MAX_REFNAME_HITS) {
+                break;
+            }
+        }
     }
-    const before = str.slice(0, lastIndex);
-    const after = str.slice(lastIndex + 1);
-    return [before, after];
+    return [...canonicalHits].map(([r, exact]) => new RefSequenceResult({ label: r, refName: r, exact }));
+}
+// splits on the last instance of a character
+export function splitLast(str, split) {
+    const i = str.lastIndexOf(split);
+    return i === -1 ? [str, ''] : [str.slice(0, i), str.slice(i + 1)];
 }

package/esm/shared/RubberbandSpan.d.ts

@@ -0,0 +1,15 @@
+/**
+ * The selection band of a rubberband drag, with its bp coordinates at the edges
+ * and an optional size in the middle. Callers format their own text, since a
+ * single view reads one coordinate per edge and the multi-level rubberband reads
+ * one per level.
+ */
+export default function RubberbandSpan({ left, width, viewWidth, stickyTop, leftLabel, rightLabel, size, }: {
+    left: number;
+    width: number;
+    viewWidth: number;
+    stickyTop: string | undefined;
+    leftLabel: React.ReactNode;
+    rightLabel: React.ReactNode;
+    size?: React.ReactNode;
+}): import("react").JSX.Element;

package/esm/shared/RubberbandSpan.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { alpha } from '@jbrowse/core/ui/palette';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
+import { Typography } from '@mui/material';
+import { LABEL_WIDTH, SpanEdgeLabels } from './coordLabels.js';
+const useStyles = makeStyles()(theme => ({
+    rubberband: {
+        height: '100%',
+        background: alpha(theme.palette.tertiary.light, 0.7),
+        position: 'absolute',
+        left: 0,
+        zIndex: 830,
+        textAlign: 'center',
+        cursor: 'crosshair',
+    },
+    rubberbandText: {
+        color: theme.palette.tertiary.contrastText,
+    },
+}));
+/**
+ * The selection band of a rubberband drag, with its bp coordinates at the edges
+ * and an optional size in the middle. Callers format their own text, since a
+ * single view reads one coordinate per edge and the multi-level rubberband reads
+ * one per level.
+ */
+export default function RubberbandSpan({ left, width, viewWidth, stickyTop, leftLabel, rightLabel, size, }) {
+    const { classes } = useStyles();
+    // a label only moves inside its edge when the span can hold it, so a sliver of
+    // a selection at a view border keeps both labels outside and takes the clip
+    const fitsInside = width > LABEL_WIDTH;
+    return (_jsxs("div", { className: classes.rubberband, style: { transform: `translateX(${left}px)`, width }, children: [_jsx(SpanEdgeLabels, { stickyTop: stickyTop, left: leftLabel, right: rightLabel, insideLeft: fitsInside && left < LABEL_WIDTH, insideRight: fitsInside && left + width > viewWidth - LABEL_WIDTH }), size ? (_jsx(Typography, { variant: "h6", className: classes.rubberbandText, style: stickyTop === undefined
+                    ? undefined
+                    : { position: 'sticky', top: stickyTop }, children: size })) : null] }));
+}

package/esm/shared/coordLabels.d.ts

@@ -0,0 +1,47 @@
+export declare const LABEL_WIDTH = 100;
+/** A red vertical line at `coordX` with `children` labelled above it. */
+export declare function VerticalGuideLine({ coordX, viewWidth, stickyTop, children, }: {
+    coordX: number;
+    viewWidth: number;
+    stickyTop: string | undefined;
+    children: React.ReactNode;
+}): import("react").JSX.Element;
+/**
+ * The bp coordinate under a vertical guide, drawn just above the top of the
+ * guide line so it covers neither the line nor the cursor hovering the scalebar
+ * the line starts at.
+ *
+ * A zero-height anchor marks that spot in the flow (`stickyTop` pins it to the
+ * scalebar it rides once that scrolls away) but the label itself portals to the
+ * body: sitting above the guide means sitting above the top of the tracks
+ * container, and that container's `contain: layout` traps its children in a
+ * stacking context the sticky LGV header (z-index 850, opaque background)
+ * paints over. So the anchor's viewport position is measured and the label
+ * placed at fixed coordinates outside it.
+ *
+ * Deliberately not a MUI Tooltip: it is permanently open and re-renders on
+ * every pan frame, and an open popper re-runs its whole modifier chain (~17
+ * getBoundingClientRect calls) on every render of its parent, since MUI's
+ * `BasePopper` calls `forceUpdate()` from a dep-less effect. Here the anchor is
+ * measured once per hover, not per mousemove — only `coordX` changes as the
+ * mouse moves, and that needs no measurement.
+ */
+export declare function GuideLabel({ coordX, viewWidth, stickyTop, children, }: {
+    coordX: number;
+    viewWidth: number;
+    stickyTop: string | undefined;
+    children: React.ReactNode;
+}): import("react").JSX.Element;
+/**
+ * The bp coordinates of a rubberband selection, one label just outside each edge
+ * of the span. Renders inside the span, so the edges are its own box. A label
+ * with no room outside its edge flips inside instead, which is why the span it
+ * has to fit in is a prop.
+ */
+export declare function SpanEdgeLabels({ stickyTop, left, right, insideLeft, insideRight, }: {
+    stickyTop: string | undefined;
+    left: React.ReactNode;
+    right: React.ReactNode;
+    insideLeft: boolean;
+    insideRight: boolean;
+}): import("react").JSX.Element;

package/esm/shared/coordLabels.js

@@ -0,0 +1,133 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { alpha } from '@jbrowse/core/ui/palette';
+import { MUI_TOOLTIP_Z_INDEX } from '@jbrowse/core/ui/zIndexes';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
+import { createPortal } from 'react-dom';
+// roughly how wide a coordinate label is. the guide clamps itself half of this
+// from either border, and a rubberband label that would hang off a border goes
+// inside its edge instead — the popper's `preventOverflow`, without the popper
+export const LABEL_WIDTH = 100;
+// gap between the bottom of a guide label and the top of the guide it labels
+const LABEL_GAP = 3;
+const useStyles = makeStyles()(theme => ({
+    // zero height so it takes no flow space while sticking with the scalebar.
+    // sticky positioning makes this a stacking context, so the z-index has to
+    // live here rather than on the labels it traps
+    anchor: {
+        height: 0,
+        zIndex: 1002,
+    },
+    label: {
+        background: alpha(theme.palette.grey[700], 0.92),
+        color: theme.palette.common.white,
+        borderRadius: theme.shape.borderRadius,
+        padding: '2px 6px',
+        fontSize: theme.typography.pxToRem(11),
+        fontWeight: theme.typography.fontWeightMedium,
+        lineHeight: 1.2,
+        whiteSpace: 'nowrap',
+        pointerEvents: 'none',
+    },
+    spanLabel: {
+        position: 'absolute',
+    },
+    guideLabel: {
+        position: 'fixed',
+        transform: 'translateX(-50%)',
+        zIndex: MUI_TOOLTIP_Z_INDEX,
+    },
+    leftOfEdge: {
+        right: '100%',
+        marginRight: 2,
+    },
+    rightOfEdge: {
+        left: '100%',
+        marginLeft: 2,
+    },
+    insideLeftEdge: {
+        left: 0,
+    },
+    insideRightEdge: {
+        right: 0,
+    },
+    guideLine: {
+        pointerEvents: 'none',
+        height: '100%',
+        width: 1,
+        position: 'absolute',
+        left: 0,
+        background: 'red',
+        zIndex: 1001,
+    },
+}));
+/** A red vertical line at `coordX` with `children` labelled above it. */
+export function VerticalGuideLine({ coordX, viewWidth, stickyTop, children, }) {
+    const { classes } = useStyles();
+    return (_jsxs(_Fragment, { children: [_jsx(GuideLabel, { coordX: coordX, viewWidth: viewWidth, stickyTop: stickyTop, children: children }), _jsx("div", { className: classes.guideLine, style: { transform: `translateX(${coordX}px)` } })] }));
+}
+function anchorStyle(stickyTop) {
+    return stickyTop === undefined
+        ? { position: 'relative' }
+        : { position: 'sticky', top: stickyTop };
+}
+/**
+ * The bp coordinate under a vertical guide, drawn just above the top of the
+ * guide line so it covers neither the line nor the cursor hovering the scalebar
+ * the line starts at.
+ *
+ * A zero-height anchor marks that spot in the flow (`stickyTop` pins it to the
+ * scalebar it rides once that scrolls away) but the label itself portals to the
+ * body: sitting above the guide means sitting above the top of the tracks
+ * container, and that container's `contain: layout` traps its children in a
+ * stacking context the sticky LGV header (z-index 850, opaque background)
+ * paints over. So the anchor's viewport position is measured and the label
+ * placed at fixed coordinates outside it.
+ *
+ * Deliberately not a MUI Tooltip: it is permanently open and re-renders on
+ * every pan frame, and an open popper re-runs its whole modifier chain (~17
+ * getBoundingClientRect calls) on every render of its parent, since MUI's
+ * `BasePopper` calls `forceUpdate()` from a dep-less effect. Here the anchor is
+ * measured once per hover, not per mousemove — only `coordX` changes as the
+ * mouse moves, and that needs no measurement.
+ */
+export function GuideLabel({ coordX, viewWidth, stickyTop, children, }) {
+    const { classes, cx } = useStyles();
+    const anchorRef = useRef(null);
+    const [anchorPos, setAnchorPos] = useState();
+    useEffect(() => {
+        const measure = () => {
+            const el = anchorRef.current;
+            if (el) {
+                const { left, top } = el.getBoundingClientRect();
+                setAnchorPos({ left, top, viewportHeight: window.innerHeight });
+            }
+        };
+        measure();
+        // capture phase: the anchor can ride any scrolling ancestor, not just the
+        // window
+        window.addEventListener('scroll', measure, true);
+        window.addEventListener('resize', measure);
+        return () => {
+            window.removeEventListener('scroll', measure, true);
+            window.removeEventListener('resize', measure);
+        };
+    }, [stickyTop]);
+    const clampedX = Math.min(Math.max(coordX, LABEL_WIDTH / 2), viewWidth - LABEL_WIDTH / 2);
+    return (_jsxs(_Fragment, { children: [_jsx("div", { ref: anchorRef, className: classes.anchor, style: anchorStyle(stickyTop) }), anchorPos
+                ? createPortal(_jsx("div", { className: cx(classes.label, classes.guideLabel), style: {
+                        left: anchorPos.left + clampedX,
+                        bottom: anchorPos.viewportHeight - anchorPos.top + LABEL_GAP,
+                    }, children: children }), document.body)
+                : null] }));
+}
+/**
+ * The bp coordinates of a rubberband selection, one label just outside each edge
+ * of the span. Renders inside the span, so the edges are its own box. A label
+ * with no room outside its edge flips inside instead, which is why the span it
+ * has to fit in is a prop.
+ */
+export function SpanEdgeLabels({ stickyTop, left, right, insideLeft, insideRight, }) {
+    const { classes, cx } = useStyles();
+    return (_jsxs("div", { className: classes.anchor, style: anchorStyle(stickyTop), children: [_jsx("div", { className: cx(classes.label, classes.spanLabel, insideLeft ? classes.insideLeftEdge : classes.leftOfEdge), children: left }), _jsx("div", { className: cx(classes.label, classes.spanLabel, insideRight ? classes.insideRightEdge : classes.rightOfEdge), children: right })] }));
+}