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

package/esm/searchUtils.js

@@ -1,22 +1,26 @@
 import { RefSequenceResult } from '@jbrowse/core/TextSearch/BaseResults';
-import { assembleLocString, dedupe, getEnv, getNotificationSink, getSession, matchRefNames, MAX_GLOB_REGIONS, parseLocString, UnknownRefNameError, } from '@jbrowse/core/util';
+import { groupByPlace, landsInAssembly } from '@jbrowse/core/TextSearch/places';
+import { dedupe, getEnv, getNotificationSink, getSession, matchRefNames, MAX_GLOB_REGIONS, rankRefNames, 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
+// autocomplete's ~100-row display cap: exact and prefix refName hits 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
+// Resolves whether the view moved: a hit that raised the picker, or a glob
+// refused as too wide, did not.
 export async function navigateToSelectedOption({ option, model, assemblyName, }) {
     if (option.hasLocation()) {
         await navToOption({ option, model, assemblyName });
+        return true;
     }
     else if (option.results?.length) {
-        await showSearchResults({
+        return showSearchResults({
             results: option.results,
             query: option.getLabel(),
             model,
@@ -24,7 +28,7 @@ export async function navigateToSelectedOption({ option, model, assemblyName, })
         });
     }
     else {
-        await handleSelectedRegion({
+        return handleSelectedRegion({
             input: option.getLabel(),
             assemblyName,
             model,
@@ -36,37 +40,6 @@ export function isOpenInView(result, model) {
     const trackId = result.getTrackId();
     return trackId !== undefined && !!model.getTrack(trackId);
 }
-// One spelling of a locstring, so two indexes that answer `chr1:1-100` and
-// `1:1..100` are recognised as one place. An unparseable string is compared
-// raw, which can only ever split a group that would otherwise have merged —
-// the safe direction, since the picker is what an unprovable match falls back
-// to.
-function canonicalLocString(locString, assembly) {
-    try {
-        const loc = parseLocString(locString, refName => assembly.isValidRefName(refName));
-        return assembleLocString({
-            ...loc,
-            refName: assembly.getCanonicalRefName2(loc.refName),
-        });
-    }
-    catch (e) {
-        console.warn('failed to parse location string', locString, e);
-        return locString;
-    }
-}
-// What a hit means as a destination: the name it shows and the place it goes.
-// A hit with no location has no destination and can never join a group.
-function destination(result, assembly) {
-    const locString = result.getLocation();
-    return locString
-        ? [
-            result.getDisplayString(),
-            assembly?.initialized
-                ? canonicalLocString(locString, assembly)
-                : locString,
-        ].join('\u0000')
-        : undefined;
-}
 // 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 —
@@ -86,12 +59,10 @@ function trackRank(result, model, session) {
         return session.getTrackById(trackId) ? 1 : 3;
     }
 }
-// The pick is a stable minimum, so a linear scan rather than a sort: only the
-// best rung is taken, and keeping the first strictly-lowest one is what leaves
-// an agreeing group with nothing to choose between in the order the ranking
-// handed it. Ranked once per hit for the reason `destinations` above it is:
-// `trackRank` reaches `session.getTrackById`, and a comparator asks O(n log n)
-// times for an answer that does not vary.
+// 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);
@@ -104,42 +75,32 @@ function bestRanked(results, model, session) {
     }
     return best;
 }
-// The picker exists to disambiguate, and hits that name one feature at one
-// place are not ambiguous — they are several indexes having found it. An
-// instance carrying a handful of gene tracks turns every gene search into a
-// table whose only varying column is Track, which is issues #4302 and #5068.
-// When the hits agree there is nothing to ask, so navigate instead.
-export function unanimousResult({ results, model, session, assembly, }) {
-    // computed once per hit rather than once per comparison: a broad query can
-    // carry a hundred results, and each one costs a locstring parse
-    const destinations = results.map(r => destination(r, assembly));
-    const agree = destinations[0] !== undefined &&
-        destinations.every(d => d === destinations[0]);
-    return agree ? bestRanked(results, model, session) : undefined;
+// 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. Returns
-// whether the view moved.
+// 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 unanimous = unanimousResult({
+    const places = distinctDestinations({
         results,
         model,
         session,
         assembly: session.assemblyManager.get(assemblyName),
     });
-    if (unanimous) {
-        await navToOption({
-            option: unanimous,
-            model,
-            assemblyName,
-            grow,
-            showHitTrack,
-        });
+    const land = (option) => navToOption({ option, model, assemblyName, grow, showHitTrack });
+    if (places.length === 1) {
+        await land(places[0]);
         return true;
     }
     else {
-        model.setSearchResults(results, query, assemblyName);
+        model.setSearchResults(places, query, assemblyName, land);
         return false;
     }
 }
@@ -147,6 +108,18 @@ export async function showSearchResults({ results, query, model, assemblyName, g
 // 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
@@ -156,11 +129,11 @@ export async function navToOption({ option, model, assemblyName, grow, showHitTr
     // 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 trackId = option.getTrackId();
     const session = getSession(model);
     const { assemblyManager } = session;
     await model.navToLocations(parseLocStrings(location, assemblyName, (ref, asm) => assemblyManager.isValidRefName(ref, asm)), assemblyName, grow ?? SEARCH_HIT_GROW);
-    if (showHitTrack && trackId && isAlive(model)) {
+    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
@@ -189,9 +162,9 @@ 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
+// if input parses as one or more locstrings, navigate directly; otherwise
+// search and: pop a dialog for multiple results, navigate for one, or report
+// the miss
 //
 // 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
@@ -200,6 +173,7 @@ export function notifySearchFailure(session, e) {
 // otherwise tell "showing it" from "asked you which one".
 export async function handleSelectedRegion({ input, model, assemblyName, grow, showHitTrack, }) {
     const { assemblyManager, textSearchManager } = getSession(model);
+    model.closeSearchPicker();
     // 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
@@ -207,16 +181,11 @@ export async function handleSelectedRegion({ input, model, assemblyName, grow, s
     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
+    await Promise.all(assembliesNamedIn(input).map(name => assemblyManager.requireAssembly(name)));
     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();
+    const parsed = parseOrError(() => parseLocStrings(input, assemblyName, (ref, asm) => assemblyManager.isValidRefName(ref, asm)));
+    if (parsed.locations) {
+        await model.navToLocations(parsed.locations, assemblyName, grow);
         return true;
     }
     else if (input.includes('*') && !!assembly) {
@@ -265,14 +234,14 @@ export async function handleSelectedRegion({ input, model, assemblyName, grow, s
         // 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 allResults = await fetchResults({
+        const found = await searchNames({
             queryString: input,
             assemblyName,
             textSearchManager,
             assembly,
         });
-        const exactResults = allResults.filter(r => r.isExact());
-        const results = exactResults.length ? exactResults : allResults;
+        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;
@@ -302,73 +271,104 @@ export async function handleSelectedRegion({ input, model, assemblyName, grow, s
             return true;
         }
         else {
-            // 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 clean "no results" message; 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 new SearchResultsNotFoundError(`No results found for "${input}"`);
-                }
-                else {
-                    throw e;
-                }
-            }
+            // no search hits and no locstring either. An input naming no sequence
+            // and no coordinate — a gene name, or a phrase like "breast cancer" — is
+            // reported as a name miss; coordinate-shaped input keeps its ref error
+            const isPlainName = !input.includes(':') &&
+                input
+                    .trim()
+                    .split(/\s+/)
+                    .every(token => !isRef(token) && !/^\d[\d,]*$/.test(token));
+            throw parsed.error instanceof UnknownRefNameError && isPlainName
+                ? nameNotFound(input, assemblyName, found)
+                : parsed.error;
         }
     }
 }
-export function checkRef(str, isRef) {
-    const [ref, rest] = splitLast(str, ':');
-    return isRef(str) || (isRef(ref) && /^\d/.test(rest));
+function parseOrError(parse) {
+    try {
+        return { locations: parse() };
+    }
+    catch (error) {
+        return { error };
+    }
+}
+function assembliesNamedIn(input) {
+    return [...input.matchAll(/(?:^|\s)\{([^}]+)\}/g)].map(([, name]) => name);
 }
-export async function fetchResults({ queryString, searchType, assemblyName, textSearchManager, assembly, stopToken, }) {
-    const textSearchResults = await textSearchManager?.search({
+async function searchNames({ queryString, searchType, assemblyName, textSearchManager, assembly, signal, }) {
+    const report = await textSearchManager?.searchIndexes({
         queryString,
         searchType,
-        stopToken,
+        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
+    const { strong, weak } = assembly
         ? searchRefNames(assembly, queryString, searchType)
-        : [];
-    return dedupe([...refNameResults, ...(textSearchResults ?? [])], elt => elt.getId());
+        : { strong: [], weak: [] };
+    return {
+        results: dedupe([
+            ...strong,
+            ...(report?.results ?? []).filter(r => landsInAssembly(r, assembly)),
+            ...weak,
+        ], elt => elt.getId()),
+        indexCount: report?.indexCount ?? 0,
+        failures: report?.failures ?? [],
+    };
 }
-// 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;
-            }
-        }
+/**
+ * The search box's hits for a query: refNames and text-index results, merged.
+ * Pass the session and the function finds the index manager and the assembly
+ * itself; passing `textSearchManager` and `assembly` is the older form.
+ */
+export async function fetchResults(args) {
+    if ('session' in args) {
+        const { session, ...rest } = args;
+        const assembly = await session.assemblyManager
+            .waitForAssembly(args.assemblyName)
+            .catch(() => undefined);
+        return (await searchNames({
+            ...rest,
+            textSearchManager: session.textSearchManager,
+            assembly,
+        })).results;
+    }
+    else {
+        return (await searchNames(args)).results;
     }
-    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)];
+// 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 });
+}
+// The refNames a query names, through the same ranking the dropdown's fallback
+// list uses. A refName the query is only a substring of is the weakest kind of
+// hit, so it goes behind the text-search results rather than ahead of them
+function searchRefNames(assembly, queryString, searchType) {
+    const hits = rankRefNames(assembly, queryString, MAX_REFNAME_HITS)
+        .filter(({ tier }) => searchType !== 'exact' || tier === 'exact')
+        .map(({ refName, tier }) => ({
+        tier,
+        result: new RefSequenceResult({
+            label: refName,
+            refName,
+            exact: tier === 'exact',
+        }),
+    }));
+    return {
+        strong: hits.filter(h => h.tier !== 'substring').map(h => h.result),
+        weak: hits.filter(h => h.tier === 'substring').map(h => h.result),
+    };
 }

package/esm/shared/RubberbandSpan.d.ts

@@ -4,7 +4,7 @@
  * 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, }: {
+declare const RubberbandSpan: ({ left, width, viewWidth, stickyTop, leftLabel, rightLabel, size, }: {
     left: number;
     width: number;
     viewWidth: number;
@@ -12,4 +12,5 @@ export default function RubberbandSpan({ left, width, viewWidth, stickyTop, left
     leftLabel: React.ReactNode;
     rightLabel: React.ReactNode;
     size?: React.ReactNode;
-}): import("react").JSX.Element;
+}) => import("react").JSX.Element;
+export default RubberbandSpan;

package/esm/shared/RubberbandSpan.js

@@ -1,6 +1,8 @@
 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, alpha } from '@mui/material';
+import { Typography } from '@mui/material';
+import { observer } from 'mobx-react';
 import { LABEL_WIDTH, SpanEdgeLabels } from './coordLabels.js';
 const useStyles = makeStyles()(theme => ({
     rubberband: {
@@ -22,7 +24,7 @@ const useStyles = makeStyles()(theme => ({
  * 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 RubberbandSpan = observer(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
@@ -30,4 +32,5 @@ export default function RubberbandSpan({ left, width, viewWidth, stickyTop, left
     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] }));
-}
+});
+export default RubberbandSpan;

package/esm/shared/coordLabels.d.ts

@@ -1,4 +1,11 @@
 export declare const LABEL_WIDTH = 100;
+/** A red vertical line at `coordX` with `children` labelled above it. */
+export declare const 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
@@ -19,22 +26,22 @@ export declare const LABEL_WIDTH = 100;
  * 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, }: {
+export declare const GuideLabel: ({ coordX, viewWidth, stickyTop, children, }: {
     coordX: number;
     viewWidth: number;
     stickyTop: string | undefined;
     children: React.ReactNode;
-}): import("react").JSX.Element;
+}) => 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, }: {
+export declare const SpanEdgeLabels: ({ stickyTop, left, right, insideLeft, insideRight, }: {
     stickyTop: string | undefined;
     left: React.ReactNode;
     right: React.ReactNode;
     insideLeft: boolean;
     insideRight: boolean;
-}): import("react").JSX.Element;
+}) => import("react").JSX.Element;

package/esm/shared/coordLabels.js

@@ -1,8 +1,9 @@
 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 { alpha } from '@mui/material';
+import { observer } from 'mobx-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
@@ -51,7 +52,21 @@ const useStyles = makeStyles()(theme => ({
     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 const VerticalGuideLine = observer(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' }
@@ -77,7 +92,7 @@ function anchorStyle(stickyTop) {
  * 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, }) {
+export const GuideLabel = observer(function GuideLabel({ coordX, viewWidth, stickyTop, children, }) {
     const { classes, cx } = useStyles();
     const anchorRef = useRef(null);
     const [anchorPos, setAnchorPos] = useState();
@@ -106,14 +121,14 @@ export function GuideLabel({ coordX, viewWidth, stickyTop, children, }) {
                         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, }) {
+export const SpanEdgeLabels = observer(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 })] }));
-}
+});

package/esm/shared/useWindowDrag.d.ts

@@ -0,0 +1,18 @@
+import type React from 'react';
+export interface DragEnd {
+    startX: number;
+    endX: number;
+    isClick: boolean;
+    clientX: number;
+    clientY: number;
+}
+/**
+ * Follow a press that began at `startX` (px from `ref`'s left edge) through
+ * window events until it ends, so the pointer can leave the element mid-drag.
+ * A release within 3px of the press is a click. Undefined `startX` is no drag.
+ */
+export declare function useWindowDrag(ref: React.RefObject<HTMLElement | null>, startX: number | undefined, handlers: {
+    onMove: (x: number) => void;
+    onEnd: (end: DragEnd) => void;
+    onCancel: () => void;
+}): void;

package/esm/shared/useWindowDrag.js

@@ -0,0 +1,47 @@
+import { useEffect } from 'react';
+import { useEventCallback } from '@jbrowse/core/util/useEventCallback';
+/**
+ * Follow a press that began at `startX` (px from `ref`'s left edge) through
+ * window events until it ends, so the pointer can leave the element mid-drag.
+ * A release within 3px of the press is a click. Undefined `startX` is no drag.
+ */
+export function useWindowDrag(ref, startX, handlers) {
+    const onMove = useEventCallback(handlers.onMove);
+    const onEnd = useEventCallback(handlers.onEnd);
+    const onCancel = useEventCallback(handlers.onCancel);
+    useEffect(() => {
+        const el = ref.current;
+        if (startX === undefined || !el) {
+            return;
+        }
+        const { left } = el.getBoundingClientRect();
+        const mouseMove = (event) => {
+            onMove(event.clientX - left);
+        };
+        const mouseUp = ({ button, clientX, clientY }) => {
+            if (button === 0) {
+                const endX = clientX - left;
+                onEnd({
+                    startX,
+                    endX,
+                    isClick: Math.abs(endX - startX) <= 3,
+                    clientX,
+                    clientY,
+                });
+            }
+        };
+        const keyDown = (event) => {
+            if (event.key === 'Escape') {
+                onCancel();
+            }
+        };
+        window.addEventListener('mousemove', mouseMove);
+        window.addEventListener('mouseup', mouseUp);
+        window.addEventListener('keydown', keyDown);
+        return () => {
+            window.removeEventListener('mousemove', mouseMove);
+            window.removeEventListener('mouseup', mouseUp);
+            window.removeEventListener('keydown', keyDown);
+        };
+    }, [ref, startX, onMove, onEnd, onCancel]);
+}