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

package/esm/MultiLevelRubberband/MultiLevelRubberband.d.ts

@@ -0,0 +1,6 @@
+import type { MultiLevelRubberbandModel } from './types.ts';
+declare const MultiLevelRubberband: ({ model, ControlComponent, }: {
+    model: MultiLevelRubberbandModel;
+    ControlComponent?: React.ReactElement;
+}) => import("react").JSX.Element;
+export default MultiLevelRubberband;

package/esm/MultiLevelRubberband/MultiLevelRubberband.js

@@ -0,0 +1,40 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from 'react';
+import { Menu } from '@jbrowse/core/ui';
+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 { VerticalGuideLine } from '../shared/coordLabels.js';
+import { useRangeSelect } from './useRangeSelect.js';
+const useStyles = makeStyles()({
+    rubberbandControl: {
+        cursor: 'crosshair',
+        width: '100%',
+        minHeight: 8,
+        position: 'relative',
+        zIndex: 900,
+    },
+});
+const MultiLevelRubberband = observer(function MultiLevelRubberband({ model, ControlComponent = _jsx("div", {}), }) {
+    const ref = useRef(null);
+    const { classes } = useStyles();
+    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: 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.
+                onMouseLeave: mouseOut, children: ControlComponent })] }));
+});
+// 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 }) {
+    return rows.map((row, idx) => (_jsx("div", { children: row }, idx)));
+}
+export default MultiLevelRubberband;

package/esm/MultiLevelRubberband/index.d.ts

@@ -0,0 +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

@@ -0,0 +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[];

package/esm/MultiLevelRubberband/menuItems.js

@@ -0,0 +1,52 @@
+import { rowLabels } from './rowLabel.js';
+/**
+ * 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 function multiLevelRowMenuItems(views) {
+    return rowLabels(views).map((label, idx) => ({
+        label,
+        subMenu: views[idx].rubberBandMenuItems(),
+    }));
+}
+/**
+ * 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 function multiLevelRowClickMenuItems(views, px) {
+    return rowLabels(views).flatMap((label, idx) => {
+        const view = views[idx];
+        // A row with no regions is dropped, because `pxToBp` THROWS on one rather
+        // than answering an offset that names no base — so gating on the built
+        // submenu being empty, which is what this did, was a guard that could never
+        // fire in front of a call that had already thrown. Reachable: a row's
+        // `initialized` is assembly readiness, and the stack mounts this strip once
+        // ANY row is ready.
+        if (!view.displayedRegions.length) {
+            return [];
+        }
+        return [{ label, subMenu: view.rubberbandClickMenuItems(view.pxToBp(px)) }];
+    });
+}

package/esm/MultiLevelRubberband/rowLabel.d.ts

@@ -0,0 +1,22 @@
+/**
+ * What to call each genome row, one label per row. The assembly name where
+ * there is one, and the row's position where a row is still loading, so a label
+ * stays true whatever the assemblies turn out to be called.
+ *
+ * A NAME THAT REPEATS PICKS UP ITS ROW NUMBER, because a stack can hold one
+ * assembly twice — two loci of the same genome, a read against its own
+ * reference — and there the bare name gives two menu rows that open different
+ * things under identical text. Only the repeats pay for it: the ordinary
+ * pairwise view still reads "hg38" and "mm39".
+ *
+ * One function over the whole list rather than one row at a time, since
+ * uniqueness is a property of the list. Shared by every menu that names the
+ * rows — the track selectors, the row menus, the follow anchors, the
+ * rubberband — so they cannot drift into calling the same row two different
+ * things one click apart. Here rather than in the synteny view because the
+ * breakpoint split view is the same stack of rows and had been numbering them
+ * itself.
+ */
+export declare function rowLabels(views: {
+    assemblyNames: string[];
+}[]): string[];

package/esm/MultiLevelRubberband/rowLabel.js

@@ -0,0 +1,27 @@
+/**
+ * What to call each genome row, one label per row. The assembly name where
+ * there is one, and the row's position where a row is still loading, so a label
+ * stays true whatever the assemblies turn out to be called.
+ *
+ * A NAME THAT REPEATS PICKS UP ITS ROW NUMBER, because a stack can hold one
+ * assembly twice — two loci of the same genome, a read against its own
+ * reference — and there the bare name gives two menu rows that open different
+ * things under identical text. Only the repeats pay for it: the ordinary
+ * pairwise view still reads "hg38" and "mm39".
+ *
+ * One function over the whole list rather than one row at a time, since
+ * uniqueness is a property of the list. Shared by every menu that names the
+ * rows — the track selectors, the row menus, the follow anchors, the
+ * rubberband — so they cannot drift into calling the same row two different
+ * things one click apart. Here rather than in the synteny view because the
+ * breakpoint split view is the same stack of rows and had been numbering them
+ * itself.
+ */
+export function rowLabels(views) {
+    const names = views.map((view, idx) => view.assemblyNames[0] ?? `Row ${idx + 1}`);
+    const counts = new Map();
+    for (const name of names) {
+        counts.set(name, (counts.get(name) ?? 0) + 1);
+    }
+    return names.map((name, idx) => counts.get(name) > 1 ? `${name} (row ${idx + 1})` : name);
+}

package/esm/MultiLevelRubberband/types.d.ts

@@ -0,0 +1,7 @@
+import type { LinearGenomeViewModel } from '../LinearGenomeView/model.ts';
+import type { MenuItem } from '@jbrowse/core/ui';
+export interface MultiLevelRubberbandModel {
+    views: LinearGenomeViewModel[];
+    rubberBandMenuItems: () => MenuItem[];
+    rubberbandClickMenuItemsAtPx: (px: number) => MenuItem[];
+}

package/esm/MultiLevelRubberband/useRangeSelect.d.ts

@@ -0,0 +1,25 @@
+import type { MultiLevelRubberbandModel } from './types.ts';
+import type React from 'react';
+interface AnchorPosition {
+    offsetX: number;
+    clientX: number;
+    clientY: number;
+    isClick: boolean;
+}
+export declare function useRangeSelect(ref: React.RefObject<HTMLDivElement | null>, model: MultiLevelRubberbandModel): {
+    isClick: boolean | undefined;
+    rubberbandOn: boolean;
+    guideX: number | undefined;
+    anchorPosition: AnchorPosition | undefined;
+    left: number;
+    width: number;
+    leftBpOffset: import("@jbrowse/core/util/Base1DUtils").PxToBpResult[];
+    rightBpOffset: import("@jbrowse/core/util/Base1DUtils").PxToBpResult[];
+    numOfBpSelected: number[];
+    mouseDown: (event: React.MouseEvent<HTMLDivElement>) => void;
+    mouseMove: (event: React.MouseEvent<HTMLDivElement>) => void;
+    mouseOut: () => void;
+    handleClose: () => void;
+    handleMenuItemClick: (callback: () => void) => void;
+};
+export {};

package/esm/MultiLevelRubberband/useRangeSelect.js

@@ -0,0 +1,120 @@
+import { useCallback, useState } from 'react';
+import { getRelativeX } from '@jbrowse/core/util/getRelativeX';
+import { transaction } from 'mobx';
+import { useWindowDrag } from '../shared/useWindowDrag.js';
+export function useRangeSelect(ref, model) {
+    const [startX, setStartX] = useState();
+    const [currentX, setCurrentX] = useState(0);
+    const [anchorPosition, setAnchorPosition] = useState();
+    const [guideX, setGuideX] = useState();
+    const mouseDragging = startX !== undefined && anchorPosition === undefined;
+    // one selection spans every level, so it is released from all of them at once.
+    // Committing is not the mirror of this and stays inline below: each level maps
+    // the same pixels through its own pxToBp, so the offsets differ per view.
+    const clearOffsets = useCallback(() => {
+        transaction(() => {
+            for (const view of model.views) {
+                view.setOffsets(undefined, undefined);
+            }
+        });
+    }, [model]);
+    // releases the committed offsets too, since mouseOut no longer does while the
+    // menu is open — dismissing the menu, by its backdrop or Escape, is the point
+    // the selection is actually finished with. A bare click on the strip no longer
+    // comes through here: it opens the click menu instead.
+    //
+    // `CascadingMenu` dismisses BEFORE it runs the clicked row's callback, so this
+    // clears the offsets out from under it. Every menu built here captures them
+    // when the rows are built, which is why that works — the plain linear genome
+    // view's host never clears, so a row written to read them live works there
+    // and silently no-ops from a stacked row.
+    const handleClose = useCallback(() => {
+        setAnchorPosition(undefined);
+        setStartX(undefined);
+        setCurrentX(0);
+        setGuideX(undefined);
+        clearOffsets();
+    }, [clearOffsets]);
+    useWindowDrag(ref, mouseDragging ? startX : undefined, {
+        onMove: setCurrentX,
+        onEnd: ({ startX, endX, isClick, clientX, clientY }) => {
+            setAnchorPosition({ offsetX: endX, clientX, clientY, isClick });
+            if (isClick) {
+                // the click menu names a coordinate, not a span, so nothing is
+                // committed; the guide stays at the click so the menu says where
+                setGuideX(endX);
+                return;
+            }
+            const leftPx = Math.min(startX, endX);
+            const rightPx = Math.max(startX, endX);
+            transaction(() => {
+                for (const view of model.views) {
+                    view.setOffsets(view.pxToBp(leftPx), view.pxToBp(rightPx));
+                }
+            });
+            setGuideX(undefined);
+        },
+        onCancel: handleClose,
+    });
+    function mouseDown(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        // clear any leftover menu/selection so a fresh drag isn't blocked by a
+        // stale anchorPosition keeping mouseDragging false
+        setAnchorPosition(undefined);
+        // the guide is what the pointer was showing up to now, and mouseMove won't
+        // touch it during the drag — leaving it set keeps the selection span from
+        // ever rendering, since the guide wins that either/or
+        setGuideX(undefined);
+        const relativeX = getRelativeX(event, ref.current);
+        setStartX(relativeX);
+        setCurrentX(relativeX);
+    }
+    function mouseMove(event) {
+        // Don't update guideX while a menu is open — the guide is what the click
+        // menu's rows refer to, so it stays at the click rather than following the
+        // pointer to the menu — or while a drag-selection is in progress (the
+        // rubberband should show, not the guide)
+        if (anchorPosition || mouseDragging) {
+            return;
+        }
+        setGuideX(getRelativeX(event, ref.current));
+    }
+    function mouseOut() {
+        // Leave both the guide and the committed offsets alone once the menu is up
+        // (anchorPosition) or a drag is running: the offsets are exactly what the
+        // menu's items act on, and moving the pointer off the strip toward the menu
+        // used to clear them out from under it — "Zoom to region" then no-opped and
+        // "Get sequence" saw no regions.
+        if (!anchorPosition && !mouseDragging) {
+            setGuideX(undefined);
+            clearOffsets();
+        }
+    }
+    function handleMenuItemClick(callback) {
+        callback();
+        handleClose();
+    }
+    const isClick = anchorPosition?.isClick;
+    const rubberbandOn = startX !== undefined && !isClick;
+    const right = anchorPosition?.offsetX ?? currentX;
+    const left = rubberbandOn ? Math.min(right, startX) : 0;
+    const width = rubberbandOn ? Math.abs(right - startX) : 0;
+    const views = rubberbandOn ? model.views : [];
+    return {
+        isClick,
+        rubberbandOn,
+        guideX,
+        anchorPosition,
+        left,
+        width,
+        leftBpOffset: views.map(v => v.pxToBp(left)),
+        rightBpOffset: views.map(v => v.pxToBp(left + width)),
+        numOfBpSelected: views.map(v => Math.ceil(width * v.bpPerPx)),
+        mouseDown,
+        mouseMove,
+        mouseOut,
+        handleClose,
+        handleMenuItemClick,
+    };
+}