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

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

@@ -3,4 +3,5 @@ import type { MenuItem } from '@jbrowse/core/ui';
 export interface MultiLevelRubberbandModel {
     views: LinearGenomeViewModel[];
     rubberBandMenuItems: () => MenuItem[];
+    rubberbandClickMenuItemsAtPx: (px: number) => MenuItem[];
 }

package/esm/MultiLevelRubberband/useRangeSelect.d.ts

@@ -4,9 +4,10 @@ interface AnchorPosition {
     offsetX: number;
     clientX: number;
     clientY: number;
+    isClick: boolean;
 }
 export declare function useRangeSelect(ref: React.RefObject<HTMLDivElement | null>, model: MultiLevelRubberbandModel): {
-    open: boolean;
+    isClick: boolean | undefined;
     rubberbandOn: boolean;
     guideX: number | undefined;
     anchorPosition: AnchorPosition | undefined;

package/esm/MultiLevelRubberband/useRangeSelect.js

@@ -1,6 +1,7 @@
-import { useCallback, useEffect, useState } from 'react';
+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);
@@ -18,8 +19,15 @@ export function useRangeSelect(ref, model) {
         });
     }, [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
+    // 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);
@@ -27,54 +35,27 @@ export function useRangeSelect(ref, model) {
         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();
+    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;
             }
-            setAnchorPosition({
-                offsetX,
-                clientX: event.clientX,
-                clientY: event.clientY,
-            });
-            const leftPx = Math.min(startX, offsetX);
-            const rightPx = Math.max(startX, offsetX);
+            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);
-        }
-        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]);
+        },
+        onCancel: handleClose,
+    });
     function mouseDown(event) {
         event.preventDefault();
         event.stopPropagation();
@@ -90,8 +71,10 @@ export function useRangeSelect(ref, model) {
         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)
+        // 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;
         }
@@ -112,13 +95,14 @@ export function useRangeSelect(ref, model) {
         callback();
         handleClose();
     }
-    const rubberbandOn = startX !== undefined;
+    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 {
-        open: Boolean(anchorPosition),
+        isClick,
         rubberbandOn,
         guideX,
         anchorPosition,