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

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

@@ -0,0 +1,32 @@
+import type { LinearGenomeViewModel } from '../index.ts';
+/**
+ * The one thing that tells a screen-reader user a pan, a zoom or a search
+ * actually moved the view: a polite live region restating where the view now is.
+ *
+ * **It reads `coarseVisibleLocStrings`, never `visibleLocStrings`**, and that is
+ * the whole design. The fine one changes on every `offsetPx` write — every frame
+ * of a drag, a wheel zoom or a keyboard slide — and a live region driven by it
+ * queues an utterance per frame, which does not merely say too much: it makes
+ * the screen reader unusable for as long as the drag lasts, because polite
+ * announcements are a queue rather than a latest-value. The coarse blocks are
+ * already the view's settled signal, published by a `delay: 500` autorun
+ * (`setupCoarseDynamicBlocksAutorun`) and flushed synchronously by `moveTo` so a
+ * discrete jump — a search, a bookmark, `navToLocString` — announces at once
+ * instead of 500ms later. Both properties are what this needs, so this adds no
+ * timer of its own; if the debounce ever moves, this moves with it.
+ *
+ * Its own observer so the view container does not re-render when the locus
+ * settles: this component is a text node with no children, and the container
+ * mounts every track.
+ *
+ * The region is rendered with its text from the first render rather than being
+ * filled after mount. A live region whose content is present when the node is
+ * inserted is generally not announced (the region has to exist before the
+ * change), so in practice a freshly-mounted view says nothing; where a reader
+ * does announce it, "chr1:1..1,000" as the view appears is a fair thing to hear,
+ * and it is one utterance per view rather than one per frame.
+ */
+declare const NavigationAnnouncer: ({ model, }: {
+    model: LinearGenomeViewModel;
+}) => import("react").JSX.Element;
+export default NavigationAnnouncer;

package/esm/LinearGenomeView/components/NavigationAnnouncer.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { observer } from 'mobx-react';
+// Off-screen but not `display:none` / `visibility:hidden` / `aria-hidden` — any
+// of those takes the node out of the accessibility tree, which is exactly what a
+// live region must not be. The 1px-clipped box is the long-standing spelling of
+// "readable by assistive tech, occupying no layout".
+const visuallyHidden = {
+    position: 'absolute',
+    width: 1,
+    height: 1,
+    margin: -1,
+    padding: 0,
+    border: 0,
+    overflow: 'hidden',
+    clipPath: 'inset(50%)',
+    whiteSpace: 'nowrap',
+};
+/**
+ * The one thing that tells a screen-reader user a pan, a zoom or a search
+ * actually moved the view: a polite live region restating where the view now is.
+ *
+ * **It reads `coarseVisibleLocStrings`, never `visibleLocStrings`**, and that is
+ * the whole design. The fine one changes on every `offsetPx` write — every frame
+ * of a drag, a wheel zoom or a keyboard slide — and a live region driven by it
+ * queues an utterance per frame, which does not merely say too much: it makes
+ * the screen reader unusable for as long as the drag lasts, because polite
+ * announcements are a queue rather than a latest-value. The coarse blocks are
+ * already the view's settled signal, published by a `delay: 500` autorun
+ * (`setupCoarseDynamicBlocksAutorun`) and flushed synchronously by `moveTo` so a
+ * discrete jump — a search, a bookmark, `navToLocString` — announces at once
+ * instead of 500ms later. Both properties are what this needs, so this adds no
+ * timer of its own; if the debounce ever moves, this moves with it.
+ *
+ * Its own observer so the view container does not re-render when the locus
+ * settles: this component is a text node with no children, and the container
+ * mounts every track.
+ *
+ * The region is rendered with its text from the first render rather than being
+ * filled after mount. A live region whose content is present when the node is
+ * inserted is generally not announced (the region has to exist before the
+ * change), so in practice a freshly-mounted view says nothing; where a reader
+ * does announce it, "chr1:1..1,000" as the view appears is a fair thing to hear,
+ * and it is one utterance per view rather than one per frame.
+ */
+const NavigationAnnouncer = observer(function NavigationAnnouncer({ model, }) {
+    const { coarseVisibleLocStrings, coarseTotalBpDisplayStr } = model;
+    return (_jsx("div", { role: "status", "aria-live": "polite", "aria-atomic": "true", style: visuallyHidden, children: coarseVisibleLocStrings
+            ? `${coarseVisibleLocStrings} (${coarseTotalBpDisplayStr})`
+            : '' }));
+});
+export default NavigationAnnouncer;

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

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

package/esm/LinearGenomeView/components/NoTracksActiveButton.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { TrackSelector as TrackSelectorIcon } from '@jbrowse/core/ui/Icons';
 import { makeStyles } from '@jbrowse/core/util/tss-react';
 import { Button, Paper, Typography } from '@mui/material';

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

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

package/esm/LinearGenomeView/components/OverviewHighlight.js

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

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

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

package/esm/LinearGenomeView/components/OverviewHighlightBand.js

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

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

@@ -1,9 +1,9 @@
 import type { LinearGenomeViewModel } from '../index.ts';
-import type { Base1DViewModel } from '@jbrowse/core/util/Base1DViewModel';
+import type { ViewLayout } from '@jbrowse/core/util/Base1DUtils';
 type LGV = LinearGenomeViewModel;
 declare const OverviewRubberband: ({ model, overview, ControlComponent, }: {
     model: LGV;
-    overview: Base1DViewModel;
+    overview: ViewLayout;
     ControlComponent?: React.ReactElement;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export default OverviewRubberband;

package/esm/LinearGenomeView/components/OverviewRubberband.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
-import { getSession } from '@jbrowse/core/util';
+import { getNotificationSink, stringify } from '@jbrowse/core/util';
+import { getRelativeX } from '@jbrowse/core/util/getRelativeX';
 import { makeStyles } from '@jbrowse/core/util/tss-react';
 import { observer } from 'mobx-react';
-import OverviewRubberbandHoverTooltip from "./OverviewRubberbandHoverTooltip.js";
-import RubberbandSpan from "./RubberbandSpan.js";
-import { getRelativeX } from "./util.js";
+import RubberbandSpan from '../../shared/RubberbandSpan.js';
+import OverviewRubberbandHoverTooltip from './OverviewRubberbandHoverTooltip.js';
+import { overviewPxToBp } from './util.js';
 const useStyles = makeStyles()({
     rubberbandControl: {
         cursor: 'crosshair',
@@ -25,35 +26,40 @@ const OverviewRubberband = observer(function OverviewRubberband({ model, overvie
     const { classes } = useStyles();
     const mouseDragging = startX !== undefined;
     useEffect(() => {
+        const el = controlsRef.current;
+        if (!mouseDragging || !el) {
+            return;
+        }
+        // the container's left edge is fixed for the duration of a drag, so measure
+        // it once here rather than calling getBoundingClientRect on every mousemove
+        const { left } = el.getBoundingClientRect();
         function globalMouseMove(event) {
-            const ref = controlsRef.current;
-            if (ref && mouseDragging) {
-                setCurrentX(getRelativeX(event, ref));
-            }
+            setCurrentX(event.clientX - left);
         }
-        function globalMouseUp() {
-            if (startX !== undefined && currentX !== undefined) {
-                if (Math.abs(currentX - startX) > 3) {
-                    const left = Math.min(startX, currentX);
-                    const right = Math.max(startX, currentX);
-                    model.moveTo(overview.pxToBp(left - cytobandOffset), overview.pxToBp(right - cytobandOffset));
-                }
-            }
-            if (startX !== undefined && currentX === undefined) {
-                const click = overview.pxToBp(startX - cytobandOffset);
-                if (!click.refName) {
-                    getSession(model).notify('unknown position clicked');
-                    console.error('unknown position clicked', click);
+        function globalMouseUp(event) {
+            // read the up position from the event so currentX state doesn't need to
+            // be a dep (which would re-subscribe these listeners every mousemove)
+            if (startX !== undefined) {
+                const offsetX = event.clientX - left;
+                if (Math.abs(offsetX - startX) > 3) {
+                    const leftPx = Math.min(startX, offsetX);
+                    const rightPx = Math.max(startX, offsetX);
+                    model.moveTo(overviewPxToBp(overview, leftPx, cytobandOffset), overviewPxToBp(overview, rightPx, cytobandOffset));
                 }
                 else {
-                    model.centerAt(Math.round(click.coord), click.refName, click.index);
+                    const click = overviewPxToBp(overview, startX, cytobandOffset);
+                    if (click.refName) {
+                        model.centerAt(click.coord0, click.refName, click.index);
+                    }
+                    else {
+                        getNotificationSink(model).notify('unknown position clicked');
+                        console.error('unknown position clicked', click);
+                    }
                 }
             }
             setStartX(undefined);
             setCurrentX(undefined);
-            if (startX !== undefined) {
-                setGuideX(undefined);
-            }
+            setGuideX(undefined);
         }
         function globalKeyDown(event) {
             if (event.key === 'Escape') {
@@ -61,18 +67,15 @@ const OverviewRubberband = observer(function OverviewRubberband({ model, overvie
                 setCurrentX(undefined);
             }
         }
-        if (mouseDragging) {
-            window.addEventListener('mousemove', globalMouseMove, true);
-            window.addEventListener('mouseup', globalMouseUp, true);
-            window.addEventListener('keydown', globalKeyDown, true);
-            return () => {
-                window.removeEventListener('mousemove', globalMouseMove, true);
-                window.removeEventListener('mouseup', globalMouseUp, true);
-                window.removeEventListener('keydown', globalKeyDown, true);
-            };
-        }
-        return () => { };
-    }, [mouseDragging, currentX, startX, model, overview, cytobandOffset]);
+        window.addEventListener('mousemove', globalMouseMove);
+        window.addEventListener('mouseup', globalMouseUp);
+        window.addEventListener('keydown', globalKeyDown);
+        return () => {
+            window.removeEventListener('mousemove', globalMouseMove);
+            window.removeEventListener('mouseup', globalMouseUp);
+            window.removeEventListener('keydown', globalKeyDown);
+        };
+    }, [startX, mouseDragging, model, overview, cytobandOffset]);
     function mouseDown(event) {
         event.preventDefault();
         event.stopPropagation();
@@ -84,25 +87,9 @@ const OverviewRubberband = observer(function OverviewRubberband({ model, overvie
     function mouseOut() {
         setGuideX(undefined);
     }
-    if (startX === undefined) {
-        return (_jsxs("div", { className: classes.rel, children: [guideX !== undefined ? (_jsx(OverviewRubberbandHoverTooltip, { model: model, open: !mouseDragging, overview: overview, guideX: guideX })) : null, _jsx("div", { className: classes.rubberbandControl, ref: controlsRef, onMouseDown: mouseDown, onMouseOut: mouseOut, onMouseMove: mouseMove, children: ControlComponent })] }));
-    }
-    let left = startX || 0;
-    let width = 0;
-    if (currentX !== undefined) {
-        left = Math.min(currentX, startX);
-        width = currentX - startX;
-    }
-    let leftBpOffset;
-    let rightBpOffset;
-    if (startX) {
-        leftBpOffset = overview.pxToBp(startX - cytobandOffset);
-        rightBpOffset = overview.pxToBp(startX + width - cytobandOffset);
-        if (currentX !== undefined && currentX < startX) {
-            ;
-            [leftBpOffset, rightBpOffset] = [rightBpOffset, leftBpOffset];
-        }
-    }
-    return (_jsxs("div", { className: classes.rel, children: [leftBpOffset && rightBpOffset ? (_jsx(RubberbandSpan, { leftBpOffset: leftBpOffset, rightBpOffset: rightBpOffset, width: Math.abs(width), left: left })) : null, _jsx("div", { "data-testid": "rubberband_controls", className: classes.rubberbandControl, ref: controlsRef, onMouseDown: mouseDown, onMouseOut: mouseOut, onMouseMove: mouseMove, children: ControlComponent })] }));
+    const endX = currentX ?? startX;
+    const leftPx = mouseDragging ? Math.min(startX, endX) : 0;
+    const rightPx = mouseDragging ? Math.max(startX, endX) : 0;
+    return (_jsxs("div", { className: classes.rel, children: [!mouseDragging && guideX !== undefined ? (_jsx(OverviewRubberbandHoverTooltip, { model: model, overview: overview, guideX: guideX })) : null, mouseDragging ? (_jsx(RubberbandSpan, { leftLabel: stringify(overviewPxToBp(overview, leftPx, cytobandOffset)), rightLabel: stringify(overviewPxToBp(overview, rightPx, cytobandOffset)), width: rightPx - leftPx, left: leftPx, viewWidth: overview.width, stickyTop: undefined })) : null, _jsx("div", { "data-testid": mouseDragging ? 'rubberband_controls' : undefined, className: classes.rubberbandControl, ref: controlsRef, onMouseDown: mouseDown, onMouseLeave: mouseOut, onMouseMove: mouseMove, children: ControlComponent })] }));
 });
 export default OverviewRubberband;

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

@@ -1,10 +1,9 @@
 import type { LinearGenomeViewModel } from '../index.ts';
-import type { Base1DViewModel } from '@jbrowse/core/util/Base1DViewModel';
+import type { ViewLayout } from '@jbrowse/core/util/Base1DUtils';
 type LGV = LinearGenomeViewModel;
-declare const OverviewRubberbandHoverTooltip: ({ model, open, guideX, overview, }: {
+declare const OverviewRubberbandHoverTooltip: ({ model, guideX, overview, }: {
     model: LGV;
-    open: boolean;
     guideX: number;
-    overview: Base1DViewModel;
-}) => import("react/jsx-runtime").JSX.Element;
+    overview: ViewLayout;
+}) => import("react").JSX.Element;
 export default OverviewRubberbandHoverTooltip;

package/esm/LinearGenomeView/components/OverviewRubberbandHoverTooltip.js

@@ -1,30 +1,23 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { getSession, stringify } from '@jbrowse/core/util';
-import { makeStyles } from '@jbrowse/core/util/tss-react';
-import { Tooltip } from '@mui/material';
 import { observer } from 'mobx-react';
-const useStyles = makeStyles()({
-    guide: {
-        pointerEvents: 'none',
-        height: '100%',
-        width: 1,
-        position: 'absolute',
-        left: 0,
-    },
-});
-const OverviewRubberbandHoverTooltip = observer(function OverviewRubberbandHoverTooltip({ model, open, guideX, overview, }) {
-    const { classes } = useStyles();
+import { GuideLabel } from '../../shared/coordLabels.js';
+import { overviewPxToBp } from './util.js';
+// Label only, no guide line: the overview already marks position with the
+// visible-region box, and unlike the LGV/multi-level guides this one never had a
+// background, so the 1px div it used to render painted nothing while still
+// taking a transform patch per mousemove. Add a background here if a visible
+// line is ever wanted.
+const OverviewRubberbandHoverTooltip = observer(function OverviewRubberbandHoverTooltip({ model, guideX, overview, }) {
     const { cytobandOffset } = model;
     const { assemblyManager } = getSession(model);
-    const px = overview.pxToBp(guideX - cytobandOffset);
+    const px = overviewPxToBp(overview, guideX, cytobandOffset);
     const assembly = assemblyManager.get(px.assemblyName);
     const cytoband = assembly?.cytobands?.find(f => px.coord > f.get('start') &&
         px.coord < f.get('end') &&
-        px.refName === assembly.getCanonicalRefName(f.get('refName')));
-    return (_jsx(Tooltip, { open: open, placement: "top", title: [
-            stringify(px),
-            cytoband?.get('name'),
-            cytoband?.get('type'),
-        ].join(' '), arrow: true, children: _jsx("div", { className: classes.guide, style: { transform: `translateX(${guideX}px)` } }) }));
+        px.refName === assembly.getCanonicalRefName2(f.get('refName')));
+    return (_jsx(GuideLabel, { coordX: guideX, viewWidth: overview.width, stickyTop: undefined, children: [stringify(px), cytoband?.get('name'), cytoband?.get('type')]
+            .filter(Boolean)
+            .join(' ') }));
 });
 export default OverviewRubberbandHoverTooltip;

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

@@ -1,7 +1,8 @@
 import type { LinearGenomeViewModel } from '../index.ts';
+import type { ReactNode } from 'react';
 type LGV = LinearGenomeViewModel;
 declare const OverviewScalebar: ({ model, children, }: {
     model: LGV;
-    children: React.ReactNode;
-}) => import("react/jsx-runtime").JSX.Element;
+    children: ReactNode;
+}) => import("react").JSX.Element;
 export default OverviewScalebar;