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

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,37 @@
+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 VerticalGuide from './VerticalGuide.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 { guideX, rubberbandOn, leftBpOffset, rightBpOffset, numOfBpSelected, width, left, anchorPosition, open, handleMenuItemClick, handleClose, mouseMove, mouseDown, mouseOut, } = useRangeSelect(ref, model);
+    return (_jsxs(_Fragment, { children: [guideX !== undefined ? (_jsx(VerticalGuide, { model: model, coordX: guideX })) : rubberbandOn ? (_jsx(RubberbandSpan, { leftLabel: _jsx(PerLevelRows, { rows: leftBpOffset.map(l => stringify(l, true)) }), rightLabel: _jsx(PerLevelRows, { rows: rightBpOffset.map(r => stringify(r, true)) }), size: _jsx(PerLevelRows, { rows: numOfBpSelected.map(getBpDisplayStr) }), width: width, left: left, viewWidth: Math.min(...model.views.map(view => view.width)), stickyTop: undefined })) : null, anchorPosition ? (_jsx(Menu, { anchorReference: "anchorPosition", anchorPosition: {
+                    left: anchorPosition.clientX,
+                    top: anchorPosition.clientY,
+                }, onMenuItemClick: handleMenuItemClick, open: open, onClose: handleClose, menuItems: model.rubberBandMenuItems() })) : null, _jsx("div", { "data-testid": "rubberband_controls", className: classes.rubberbandControl, ref: ref, onMouseDown: mouseDown, onMouseMove: mouseMove, 
+                // 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/VerticalGuide.d.ts

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

package/esm/MultiLevelRubberband/VerticalGuide.js

@@ -0,0 +1,21 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { stringify } from '@jbrowse/core/util';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
+import { observer } from 'mobx-react';
+import { GuideLabel } from '../shared/coordLabels.js';
+const useStyles = makeStyles()({
+    guide: {
+        pointerEvents: 'none',
+        height: '100%',
+        width: 1,
+        position: 'absolute',
+        background: 'red',
+        zIndex: 1001,
+    },
+});
+const VerticalGuide = observer(function VerticalGuide({ model, coordX, }) {
+    const { classes } = useStyles();
+    const { views } = model;
+    return (_jsxs(_Fragment, { children: [_jsx(GuideLabel, { coordX: coordX, viewWidth: Math.min(...views.map(view => view.width)), stickyTop: undefined, children: views.map(view => (_jsx("div", { children: stringify(view.pxToBp(coordX), true) }, view.id))) }), _jsx("div", { className: classes.guide, style: { left: coordX } })] }));
+});
+export default VerticalGuide;

package/esm/MultiLevelRubberband/index.d.ts

@@ -0,0 +1,2 @@
+export { default as MultiLevelRubberband } from './MultiLevelRubberband.tsx';
+export type { MultiLevelRubberbandModel } from './types.ts';

package/esm/MultiLevelRubberband/index.js

@@ -0,0 +1 @@
+export { default as MultiLevelRubberband } from './MultiLevelRubberband.js';

package/esm/MultiLevelRubberband/types.d.ts

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

package/esm/MultiLevelRubberband/useRangeSelect.d.ts

@@ -0,0 +1,24 @@
+import type { MultiLevelRubberbandModel } from './types.ts';
+import type React from 'react';
+interface AnchorPosition {
+    offsetX: number;
+    clientX: number;
+    clientY: number;
+}
+export declare function useRangeSelect(ref: React.RefObject<HTMLDivElement | null>, model: MultiLevelRubberbandModel): {
+    open: boolean;
+    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,136 @@
+import { useCallback, useEffect, useState } from 'react';
+import { getRelativeX } from '@jbrowse/core/util/getRelativeX';
+import { transaction } from 'mobx';
+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 — closing the menu (button, Escape, or a bare click) is the
+    // point the selection is actually finished with
+    const handleClose = useCallback(() => {
+        setAnchorPosition(undefined);
+        setStartX(undefined);
+        setCurrentX(0);
+        setGuideX(undefined);
+        clearOffsets();
+    }, [clearOffsets]);
+    useEffect(() => {
+        const el = ref.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) {
+            setCurrentX(event.clientX - left);
+        }
+        function globalMouseUp(event) {
+            if (startX === undefined) {
+                return;
+            }
+            const offsetX = event.clientX - left;
+            if (Math.abs(offsetX - startX) <= 3) {
+                handleClose();
+                return;
+            }
+            setAnchorPosition({
+                offsetX,
+                clientX: event.clientX,
+                clientY: event.clientY,
+            });
+            const leftPx = Math.min(startX, offsetX);
+            const rightPx = Math.max(startX, offsetX);
+            transaction(() => {
+                for (const view of model.views) {
+                    view.setOffsets(view.pxToBp(leftPx), view.pxToBp(rightPx));
+                }
+            });
+            setGuideX(undefined);
+        }
+        function globalKeyDown(event) {
+            if (event.key === 'Escape') {
+                handleClose();
+            }
+        }
+        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, ref, 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 the menu is open (rubberband locked) 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 rubberbandOn = startX !== undefined;
+    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 {
+        open: Boolean(anchorPosition),
+        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,
+    };
+}