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

package/esm/LinearGenomeView/components/useSideScroll.js

@@ -1,125 +1,175 @@
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef } from 'react';
+import { transaction } from 'mobx';
 // A press that travels further than this is a pan, and the click that ends it
 // is not a click. A hand that wobbles two pixels can still select something.
 const PAN_CLICK_THRESHOLD_PX = 4;
 // The pan publishes its state as attributes on the element the press landed in
 // (TracksContainer), so a track's own pointer handlers read it with `closest`
 // and nothing has to hand them a ref or a model field — the same marker shape
-// as `data-gesture-owner`. `data-pan-dragging` is present from mousedown to
-// mouseup; `data-pan-moved` is set once the press travels past the threshold
-// and cleared by the next press, so it still answers for the click that
-// follows mouseup.
+// as `data-gesture-owner`. `data-pan-dragging` is present from press to
+// release; `data-pan-moved` is set once the press travels past the threshold
+// or becomes a pinch, and cleared by the next press, so it still answers for
+// the click that follows the release: `clickCapture` swallows that click
+// before any track sees it.
 const PAN_DRAGGING_ATTR = 'data-pan-dragging';
 const PAN_MOVED_ATTR = 'data-pan-moved';
+function preventDefault(event) {
+    event.preventDefault();
+}
+function pointOf(event) {
+    return { x: event.clientX, y: event.clientY };
+}
+/**
+ * Drag to pan and pinch to zoom, on pointer events so a finger works the same
+ * as a mouse. A second finger turns a pan into a pinch: the spread between the
+ * two zooms about their midpoint, and moving the midpoint pans. Lifting either
+ * finger goes back to panning with the other.
+ *
+ * The host sets `touch-action` to leave the browser only the gestures this
+ * does not want (TracksContainer keeps vertical scroll); without it a touch
+ * drag is a page scroll and a pinch zooms the page, and no pointer stream
+ * arrives.
+ *
+ * The window listeners go on in the press handler itself rather than in an
+ * effect, so a release that lands before React commits still finds them.
+ */
 export function useSideScroll(model) {
-    const [mouseDragging, setMouseDragging] = useState(false);
-    const scheduledRef = useRef(false);
-    const rafRef = useRef(null);
-    const startXRef = useRef(0);
-    const prevXRef = useRef(0);
-    const currXRef = useRef(0);
-    const hostRef = useRef(null);
-    useEffect(() => {
-        // apply the movement accumulated since the previous frame, then advance the
-        // baseline. shared by the rAF tick and the mouseup flush
-        function flushScroll() {
-            const distance = currXRef.current - prevXRef.current;
-            if (distance) {
-                model.horizontalScroll(-distance);
-                prevXRef.current = currXRef.current;
-            }
-        }
-        function globalMouseMove(event) {
-            event.preventDefault();
-            currXRef.current = event.clientX;
-            if (Math.abs(currXRef.current - startXRef.current) > PAN_CLICK_THRESHOLD_PX) {
-                hostRef.current?.setAttribute(PAN_MOVED_ATTR, '');
-            }
-            const distance = currXRef.current - prevXRef.current;
-            // use rAF to make it so multiple event handlers aren't fired per-frame
-            // see https://calendar.perfplanet.com/2013/the-runtime-performance-checklist/
-            if (distance && !scheduledRef.current) {
-                scheduledRef.current = true;
-                rafRef.current = window.requestAnimationFrame(() => {
-                    rafRef.current = null;
-                    scheduledRef.current = false;
-                    flushScroll();
-                });
-            }
-        }
-        function globalMouseUp() {
-            // flush any movement still queued for the next frame before ending the
-            // drag; otherwise a quick flick (mousedown/move/up within one frame) or
-            // the cleanup below would cancel it and drop the scroll
-            if (rafRef.current !== null) {
-                window.cancelAnimationFrame(rafRef.current);
-                rafRef.current = null;
-                scheduledRef.current = false;
-                flushScroll();
-            }
-            prevXRef.current = 0;
-            hostRef.current?.removeAttribute(PAN_DRAGGING_ATTR);
-            if (mouseDragging) {
-                setMouseDragging(false);
-            }
-        }
-        if (mouseDragging) {
-            window.addEventListener('mousemove', globalMouseMove, true);
-            window.addEventListener('mouseup', globalMouseUp, true);
-            return () => {
-                window.removeEventListener('mousemove', globalMouseMove, true);
-                window.removeEventListener('mouseup', globalMouseUp, true);
-                // drop a frame queued mid-drag so it can't fire a stray scroll after
-                // unmount (matches `useVirtualScrollWheel`'s cleanup)
-                if (rafRef.current !== null) {
-                    window.cancelAnimationFrame(rafRef.current);
-                    rafRef.current = null;
-                }
-                scheduledRef.current = false;
-            };
+    const gestureRef = useRef(undefined);
+    useEffect(() => () => {
+        gestureRef.current?.cancel();
+    }, []);
+    function pointerDown(event) {
+        const host = event.currentTarget;
+        if (gestureRef.current) {
+            gestureRef.current.join(event);
+            return;
         }
-        return undefined;
-    }, [model, mouseDragging]);
-    function mouseDown(event) {
-        // Cleared for EVERY press, ahead of the returns below, because the marker
-        // outlives the gesture that set it: a pan, then a shift-press or a press on
-        // a button, used to leave `data-pan-moved` standing on the container. The
-        // one reader today re-enters through a press that reaches the bottom of
-        // this function, so nothing was wrong — but these attributes are a DOM
-        // contract other displays read with `closest`, and a stale true is what the
-        // next reader would inherit.
-        event.currentTarget.removeAttribute(PAN_MOVED_ATTR);
-        if (event.shiftKey) {
+        // Cleared for EVERY press, ahead of the returns below: the marker outlives
+        // the gesture that set it, and a stale true is what the next reader of
+        // this DOM contract would inherit.
+        host.removeAttribute(PAN_MOVED_ATTR);
+        if (event.shiftKey || event.button !== 0 || !event.isPrimary) {
             return;
         }
-        // skip the click-drag pan when pressing an interactive control: a
-        // draggable element, a control that claimed the press (resize handles, the
-        // scalebar), or a button (e.g. the menu button on a highlight/bookmark
-        // chip, whose actual target is the icon inside it). All three are matched
-        // with `closest`, since the press usually lands on a child of the control
-        // rather than the control itself.
+        // a draggable element, a control that claimed the press (resize handles,
+        // the scalebar, a legend), or a button: `closest`, since the press usually
+        // lands on a child of the control
         const target = event.target;
         if (target.draggable ||
             target.closest('[data-gesture-owner]') ||
             target.closest('button')) {
             return;
         }
-        // otherwise do click and drag scroll
-        if (event.button === 0) {
-            hostRef.current = event.currentTarget;
-            event.currentTarget.setAttribute(PAN_DRAGGING_ATTR, '');
-            startXRef.current = event.clientX;
-            prevXRef.current = event.clientX;
-            currXRef.current = event.clientX;
-            setMouseDragging(true);
+        const left = host.getBoundingClientRect().left;
+        const startX = event.clientX;
+        // where each finger is now, and where it was when the view last moved
+        const pointers = new Map([[event.pointerId, pointOf(event)]]);
+        let applied = new Map(pointers);
+        let frame;
+        function flush() {
+            frame = undefined;
+            const [a, b] = [...pointers.keys()];
+            const curr1 = pointers.get(a);
+            const prev1 = applied.get(a);
+            if (b === undefined) {
+                if (curr1.x !== prev1.x) {
+                    model.horizontalScroll(prev1.x - curr1.x);
+                }
+            }
+            else {
+                const curr2 = pointers.get(b);
+                const prev2 = applied.get(b);
+                const prevSpread = Math.hypot(prev1.x - prev2.x, prev1.y - prev2.y);
+                const spread = Math.hypot(curr1.x - curr2.x, curr1.y - curr2.y);
+                const prevMid = (prev1.x + prev2.x) / 2;
+                const mid = (curr1.x + curr2.x) / 2;
+                transaction(() => {
+                    if (prevSpread > 0 && spread > 0) {
+                        model.zoomTo((model.bpPerPx * prevSpread) / spread, prevMid - left);
+                    }
+                    if (mid !== prevMid) {
+                        model.horizontalScroll(prevMid - mid);
+                    }
+                });
+            }
+            applied = new Map(pointers);
+        }
+        // Applies what is queued before the set of fingers changes, so the next
+        // frame measures from where every finger is now rather than jumping by the
+        // distance between them.
+        function settle() {
+            if (frame !== undefined) {
+                window.cancelAnimationFrame(frame);
+                flush();
+            }
+        }
+        function move(e) {
+            if (!pointers.has(e.pointerId)) {
+                return;
+            }
+            pointers.set(e.pointerId, pointOf(e));
+            if (Math.abs(e.clientX - startX) > PAN_CLICK_THRESHOLD_PX) {
+                host.setAttribute(PAN_MOVED_ATTR, '');
+            }
+            frame ??= window.requestAnimationFrame(flush);
         }
+        function end(applyQueued) {
+            if (applyQueued) {
+                settle();
+            }
+            else if (frame !== undefined) {
+                window.cancelAnimationFrame(frame);
+            }
+            host.removeAttribute(PAN_DRAGGING_ATTR);
+            window.removeEventListener('pointermove', move, true);
+            window.removeEventListener('pointerup', release, true);
+            window.removeEventListener('pointercancel', release, true);
+            window.removeEventListener('selectstart', preventDefault, true);
+            gestureRef.current = undefined;
+        }
+        // pointercancel as well as pointerup: the browser cancels a touch it takes
+        // over as a vertical scroll, and the gesture would otherwise stay latched
+        function release(e) {
+            if (!pointers.has(e.pointerId)) {
+                return;
+            }
+            if (pointers.size > 1) {
+                settle();
+                pointers.delete(e.pointerId);
+                applied.delete(e.pointerId);
+            }
+            else {
+                end(true);
+            }
+        }
+        host.setAttribute(PAN_DRAGGING_ATTR, '');
+        window.addEventListener('pointermove', move, true);
+        window.addEventListener('pointerup', release, true);
+        window.addEventListener('pointercancel', release, true);
+        window.addEventListener('selectstart', preventDefault, true);
+        gestureRef.current = {
+            join(e) {
+                if (e.pointerType !== 'touch' || pointers.size > 1) {
+                    return;
+                }
+                settle();
+                pointers.set(e.pointerId, pointOf(e));
+                applied = new Map(pointers);
+                host.setAttribute(PAN_MOVED_ATTR, '');
+                model.cancelZoomAnimation();
+            },
+            cancel() {
+                end(false);
+            },
+        };
     }
-    // this local mouseup is used in addition to the global because sometimes
-    // the global add/remove are not called in time, resulting in issue #533
-    function mouseUp(event) {
-        event.preventDefault();
-        hostRef.current?.removeAttribute(PAN_DRAGGING_ATTR);
-        setMouseDragging(false);
+    // The browser fires `click` after a release on whatever the press and the
+    // release share, which over a track is its canvas, so a pan that ended on a
+    // gene would open that gene's details.
+    function clickCapture(event) {
+        if (event.currentTarget.hasAttribute(PAN_MOVED_ATTR)) {
+            event.stopPropagation();
+        }
     }
-    return { mouseDown, mouseUp };
+    return { pointerDown, clickCapture };
 }

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

@@ -1,6 +1,10 @@
 import type { Assembly } from '@jbrowse/core/assemblyManager/assembly';
 import type { ViewLayout } from '@jbrowse/core/util/Base1DUtils';
 export { getHighlightColor, highlightKey } from '@jbrowse/core/util/highlights';
+export declare const scalebarRefLabelProps: {
+    'data-scalebar-ref-label': string;
+};
+export declare function isOnScalebarRefLabel(target: EventTarget | null): boolean;
 export declare const elidedBlockStyles: {
     readonly backgroundColor: '#999';
     readonly backgroundImage: 'repeating-linear-gradient(90deg, transparent, transparent 1px, rgba(255,255,255,.5) 1px, rgba(255,255,255,.5) 3px)';

package/esm/LinearGenomeView/components/util.js

@@ -3,8 +3,10 @@ import { pxToBp } from '@jbrowse/core/util/Base1DUtils';
 // getHighlightColor/highlightKey live in core so the dotplot highlight bands can
 // share the exact same color and React-key semantics
 export { getHighlightColor, highlightKey } from '@jbrowse/core/util/highlights';
-// Shared style for elided (collapsed) blocks — striped grey pattern used
-// consistently across OverviewScalebar, ScalebarCoordinateLabels, and Gridlines
+export const scalebarRefLabelProps = { 'data-scalebar-ref-label': '' };
+export function isOnScalebarRefLabel(target) {
+    return (target instanceof Element && !!target.closest('[data-scalebar-ref-label]'));
+}
 export const elidedBlockStyles = {
     backgroundColor: '#999',
     backgroundImage: 'repeating-linear-gradient(90deg, transparent, transparent 1px, rgba(255,255,255,.5) 1px, rgba(255,255,255,.5) 3px)',

package/esm/LinearGenomeView/consts.d.ts

@@ -1,10 +1,12 @@
 export declare const MIN_BP_PER_PX: number;
+export declare const MINIMUM_BLOCK_WIDTH = 3;
 export declare const SHOW_ALL_REGIONS_FILL = 0.9;
 export declare const HEADER_BAR_HEIGHT = 48;
 export declare const HEADER_OVERVIEW_HEIGHT = 20;
 export declare const SCALE_BAR_HEIGHT = 17;
 export declare const SVG_SCALEBAR_CAP = 5;
 export declare const RESIZE_HANDLE_HEIGHT = 4;
+export declare const RESIZE_ALL_HANDLE_HEIGHT = 6;
 export declare const TRACK_TOP_GAP = 2;
 export declare const TRACK_OUTLINE_BORDER = 1;
 export declare const MINIMIZED_TRACK_HEIGHT = 20;

package/esm/LinearGenomeView/consts.js

@@ -1,5 +1,6 @@
 // most zoomed-in level: 50px per bp
 export const MIN_BP_PER_PX = 1 / 50;
+export const MINIMUM_BLOCK_WIDTH = 3;
 // fraction of the view width the whole genome fills at the most zoomed-out
 // level, leaving a 10% margin
 export const SHOW_ALL_REGIONS_FILL = 0.9;
@@ -14,8 +15,9 @@ export const SVG_SCALEBAR_CAP = 5;
 // TrackContainer lays its Paper out from these same three and nothing else —
 // the previous spelling had the model on a 3 while the CSS rendered 2 + 1 + 4,
 // which put every model-derived track offset 5px per track above the pixels.
-// The track *label* is deliberately not among them; see `trackChromeHeight`.
+// The track *label* is not among them: it is measured, see `trackLabelBand`.
 export const RESIZE_HANDLE_HEIGHT = 4;
+export const RESIZE_ALL_HANDLE_HEIGHT = 6;
 export const TRACK_TOP_GAP = 2;
 export const TRACK_OUTLINE_BORDER = 1;
 export const MINIMIZED_TRACK_HEIGHT = 20;

package/esm/LinearGenomeView/containingLgv.d.ts

@@ -0,0 +1,21 @@
+import type { LinearGenomeViewModel } from './model.ts';
+import type { IStateTreeNode } from '@jbrowse/mobx-state-tree';
+/**
+ * The containing view as the linear genome view itself, for a display that
+ * needs `pxToBp`, `showTrack`, `navTo` or the view's own chrome settings.
+ *
+ * The twin of display-kit's `containingHost`, and deliberately not the same
+ * function: `RegionHost` is the region contract display-kit reads, and widening
+ * it to carry the LGV's own surface is how the display layer would come to
+ * depend on the view plugin. A display that wants the view names the view.
+ *
+ * A view that lays its displays along a strip of its own — the circular view's
+ * ring host — is answered here too, the way `containingHost` answers it: the
+ * strip carries the members a display reads to draw (`bpToPx`, `pxToBp`, the
+ * blocks), and a display drawn there that reaches for a member the strip has
+ * not is the display that stays off the circle.
+ *
+ * Components and structural helpers taking duck-typed model shapes keep calling
+ * `getContainingView` — the same carve-out `containingHost` documents.
+ */
+export declare function containingLgv(self: IStateTreeNode): LinearGenomeViewModel;

package/esm/LinearGenomeView/containingLgv.js

@@ -0,0 +1,23 @@
+import { getContainingView } from '@jbrowse/core/util';
+/**
+ * The containing view as the linear genome view itself, for a display that
+ * needs `pxToBp`, `showTrack`, `navTo` or the view's own chrome settings.
+ *
+ * The twin of display-kit's `containingHost`, and deliberately not the same
+ * function: `RegionHost` is the region contract display-kit reads, and widening
+ * it to carry the LGV's own surface is how the display layer would come to
+ * depend on the view plugin. A display that wants the view names the view.
+ *
+ * A view that lays its displays along a strip of its own — the circular view's
+ * ring host — is answered here too, the way `containingHost` answers it: the
+ * strip carries the members a display reads to draw (`bpToPx`, `pxToBp`, the
+ * blocks), and a display drawn there that reaches for a member the strip has
+ * not is the display that stays off the circle.
+ *
+ * Components and structural helpers taking duck-typed model shapes keep calling
+ * `getContainingView` — the same carve-out `containingHost` documents.
+ */
+export function containingLgv(self) {
+    const view = getContainingView(self);
+    return (view.regionHost ?? view);
+}

package/esm/LinearGenomeView/headerFit.d.ts

@@ -1,4 +1,4 @@
-declare const SHEDDABLE: readonly [readonly ['trackSelectorIndent', 16], readonly ['panButtonSpacing', 100], readonly ['scrollZoomLabel', 83], readonly ['zoomSlider', 100], readonly ['regionWidth', 54]];
+declare const SHEDDABLE: readonly [readonly ['trackSelectorIndent', 16], readonly ['panButtonSpacing', 100], readonly ['scrollZoomLabel', 88], readonly ['zoomSlider', 100], readonly ['regionWidth', 54]];
 export type HeaderFit = Record<(typeof SHEDDABLE)[number][0], boolean>;
 /**
  * Which of the header bar's optional pieces a header `width` px wide still has
@@ -19,9 +19,11 @@ export type HeaderFit = Record<(typeof SHEDDABLE)[number][0], boolean>;
  * not a cliff: it shrinks from what it asked for rather than from the 101px the
  * unshed row used to leave it.
  */
-export declare function headerFit({ width, searchBoxPx, clearHighlight, }: {
+export declare function headerFit({ width, searchBoxPx, clearHighlight, viewMenu, touch, }: {
     width: number | undefined;
     searchBoxPx: number;
     clearHighlight?: boolean;
+    viewMenu?: boolean;
+    touch?: boolean;
 }): HeaderFit;
 export {};

package/esm/LinearGenomeView/headerFit.js

@@ -1,15 +1,23 @@
 // Widths measured against a built jbrowse-web at the default theme and root
 // font size — `products/jbrowse-web/browser-tests/probe-lgv-header-fit.ts`
-// prints the row piece by piece. It spends 591px on everything that is not the
-// search box (47 track selector, 114 scroll-zoom toggle, 156 pan buttons, 50 bp
+// prints the row piece by piece. It spends 596px on everything that is not the
+// search box (47 track selector, 119 scroll-zoom checkbox, 156 pan buttons, 50 bp
 // readout, 192 zoom controls, 32 of flex gap). What the box itself asks for is
 // the caller's, because it follows the locstring rather than being a constant.
-const ROW_WITHOUT_SEARCH_PX = 591;
+const ROW_WITHOUT_SEARCH_PX = 596;
 // The one piece of the row that comes and goes on its own. A text search that
 // lands on a feature raises it — the same flow that was just using the search
 // box this whole table exists to protect — so its width is taken off the top
 // rather than left for the search box to absorb.
 const CLEAR_HIGHLIGHT_PX = 35;
+// An embedded view has no title bar, so its menu button leads this row: a
+// 40px icon button and its flex gap.
+const VIEW_MENU_PX = 44;
+// A touch device drops the scroll-zoom toggle, which has no wheel to
+// govern, and the pan buttons, which a swipe replaces: 119 + 156, and the flex
+// gaps of the three items.
+const TOUCH_ABSENT_PX = 287;
+const TOUCH_ABSENT = new Set(['panButtonSpacing', 'scrollZoomLabel']);
 // What the header gives up as its window narrows, cheapest first, with the
 // pixels each one frees. Whitespace goes before words, words before a redundant
 // control, and that before a readout. The search box is not on the list: it is
@@ -18,7 +26,7 @@ const CLEAR_HIGHLIGHT_PX = 35;
 const SHEDDABLE = [
     ['trackSelectorIndent', 16],
     ['panButtonSpacing', 100],
-    ['scrollZoomLabel', 83],
+    ['scrollZoomLabel', 88],
     ['zoomSlider', 100],
     ['regionWidth', 54],
 ];
@@ -41,17 +49,22 @@ const SHEDDABLE = [
  * not a cliff: it shrinks from what it asked for rather than from the 101px the
  * unshed row used to leave it.
  */
-export function headerFit({ width, searchBoxPx, clearHighlight = false, }) {
+export function headerFit({ width, searchBoxPx, clearHighlight = false, viewMenu = false, touch = false, }) {
     const fit = Object.fromEntries(SHEDDABLE.map(([k]) => [k, true]));
     if (width === undefined) {
         return fit;
     }
-    const room = width - (clearHighlight ? CLEAR_HIGHLIGHT_PX : 0);
-    let need = ROW_WITHOUT_SEARCH_PX + searchBoxPx;
+    const room = width -
+        (clearHighlight ? CLEAR_HIGHLIGHT_PX : 0) -
+        (viewMenu ? VIEW_MENU_PX : 0);
+    let need = ROW_WITHOUT_SEARCH_PX + searchBoxPx - (touch ? TOUCH_ABSENT_PX : 0);
     for (const [key, saves] of SHEDDABLE) {
         if (need <= room) {
             break;
         }
+        if (touch && TOUCH_ABSENT.has(key)) {
+            continue;
+        }
         fit[key] = false;
         need -= saves;
     }

package/esm/LinearGenomeView/index.d.ts

@@ -26,9 +26,5 @@ declare module '@jbrowse/core/PluginManager' {
 export default function LinearGenomeViewF(pluginManager: PluginManager): void;
 export { stateModelFactory } from './model.ts';
 export type { LinearGenomeViewModel, LinearGenomeViewStateModel, } from './model.ts';
-export type { BpOffset, ExportSvgOptions, HighlightType, InitState, LinearGenomeViewLaunchProps, NavLocation, TrackLabelMode, VolatileGuide, } from './types.ts';
-export { type SyncableViewAction, installLinkedViewSync, } from './linkedViewSync.ts';
-export { default as HighlightBand } from './components/HighlightBand.tsx';
+export { installLinkedViewSync } from './linkedViewSync.ts';
 export { default as HighlightChip } from './components/HighlightChip.tsx';
-export { default as OverviewHighlightBand } from './components/OverviewHighlightBand.tsx';
-export { default as SVGHighlightBand } from './components/SVGHighlightBand.tsx';

package/esm/LinearGenomeView/index.js

@@ -1,19 +1,22 @@
-import { lazy } from 'react';
 import { ViewType } from '@jbrowse/core/pluggableElementTypes';
+import { lazyWithPreload } from '@jbrowse/core/util/lazyWithPreload';
+import { lgvLaunchKeys } from './launchKeys.js';
 import { stateModelFactory } from './model.js';
 export default function LinearGenomeViewF(pluginManager) {
     pluginManager.addViewType(() => {
+        // annotated against the registry rather than inferred, which is what
+        // makes a hand-written augmentation earn what `getViewType` promises
+        // its callers — see `ViewTypeRegistry`
+        const stateModel = stateModelFactory(pluginManager);
         return new ViewType({
             name: 'LinearGenomeView',
             displayName: 'Linear genome view',
-            stateModel: stateModelFactory(pluginManager),
-            ReactComponent: lazy(() => import('./components/LinearGenomeView.js')),
+            stateModel,
+            launchKeys: lgvLaunchKeys,
+            ReactComponent: lazyWithPreload(() => import('./components/LinearGenomeView.js')),
         });
     });
 }
 export { stateModelFactory } from './model.js';
-export { installLinkedViewSync, } from './linkedViewSync.js';
-export { default as HighlightBand } from './components/HighlightBand.js';
+export { installLinkedViewSync } from './linkedViewSync.js';
 export { default as HighlightChip } from './components/HighlightChip.js';
-export { default as OverviewHighlightBand } from './components/OverviewHighlightBand.js';
-export { default as SVGHighlightBand } from './components/SVGHighlightBand.js';

package/esm/LinearGenomeView/keyboardHandler.d.ts

@@ -5,5 +5,7 @@ import type { LinearGenomeViewModel } from './model.ts';
  * - Ctrl/Cmd + ArrowRight: slide right
  * - Ctrl/Cmd + ArrowUp: zoom in
  * - Ctrl/Cmd + ArrowDown: zoom out
+ * - Ctrl/Cmd + Shift + D: highlight the region in view
+ * - Ctrl/Cmd + Shift + M: go to the newest highlight
  */
 export declare function setupKeyboardHandler(self: LinearGenomeViewModel): void;

package/esm/LinearGenomeView/keyboardHandler.js

@@ -1,4 +1,5 @@
 import { getSession } from '@jbrowse/core/util';
+import { isTextEntryFocused } from '@jbrowse/core/util/isTextEntryFocused';
 import { addDisposer } from '@jbrowse/mobx-state-tree';
 /**
  * Sets up keyboard shortcuts for the LinearGenomeView
@@ -6,6 +7,8 @@ import { addDisposer } from '@jbrowse/mobx-state-tree';
  * - Ctrl/Cmd + ArrowRight: slide right
  * - Ctrl/Cmd + ArrowUp: zoom in
  * - Ctrl/Cmd + ArrowDown: zoom out
+ * - Ctrl/Cmd + Shift + D: highlight the region in view
+ * - Ctrl/Cmd + Shift + M: go to the newest highlight
  */
 export function setupKeyboardHandler(self) {
     if (typeof document === 'undefined') {
@@ -13,7 +16,9 @@ export function setupKeyboardHandler(self) {
     }
     function handler(e) {
         const session = getSession(self);
-        if (session.focusedViewId === self.id && (e.ctrlKey || e.metaKey)) {
+        if (session.focusedViewId === self.id &&
+            (e.ctrlKey || e.metaKey) &&
+            !isTextEntryFocused()) {
             if (e.code === 'ArrowLeft') {
                 e.preventDefault();
                 self.slide(-0.9);
@@ -30,6 +35,15 @@ export function setupKeyboardHandler(self) {
                 e.preventDefault();
                 self.zoom(self.bpPerPx * 2);
             }
+            else if (e.shiftKey && e.code === 'KeyD') {
+                e.preventDefault();
+                self.highlightCurrentRegion();
+                session.notify('Region highlighted.', 'success');
+            }
+            else if (e.shiftKey && e.code === 'KeyM') {
+                e.preventDefault();
+                void self.navigateNewestHighlight();
+            }
         }
     }
     document.addEventListener('keydown', handler);

package/esm/LinearGenomeView/launchKeys.d.ts

@@ -0,0 +1,2 @@
+import type { InitState } from './types.ts';
+export declare const lgvLaunchKeys: import("@jbrowse/core/util/withLaunchInput").LaunchKeyRegistration<InitState, "bpPerPx" | "offsetPx" | "showCytobandsSetting">;

package/esm/LinearGenomeView/launchKeys.js

@@ -0,0 +1,27 @@
+import { defineLaunchKeys } from '@jbrowse/core/util/withLaunchInput';
+// The argument is `Record<keyof InitState, LaunchKeySpec>`, so a command this
+// view interprets and nobody registered here is a compile error rather than a
+// key that partitions as a typo.
+//
+// `bpPerPx`/`offsetPx` are v4's viewport spelling from before it was stored as
+// a window, and `showCytobandsSetting` its cytoband toggle. None is a declared
+// property, so the partition would read them as typos; the model's own
+// preProcessSnapshot still converts them, so a URL or saved spec naming them
+// goes on working. Share links carry all three, so they stay.
+//
+// #launchKeys LinearGenomeView — the URL parameters page renders this list
+// rather than restating it; each of these keys has its own `&param=` section
+// there, which is why no description is attached here.
+export const lgvLaunchKeys = defineLaunchKeys()({
+    loc: { kind: 'launch' },
+    grow: { kind: 'launch' },
+    showHitTrack: { kind: 'launch' },
+    assembly: { kind: 'launch' },
+    displayedRegionNames: { kind: 'launch' },
+    tracklist: { kind: 'launch' },
+    nav: { kind: 'launch' },
+    tracks: { kind: 'trackEntries' },
+    highlight: { kind: 'launch' },
+}, {
+    passThrough: ['bpPerPx', 'offsetPx', 'showCytobandsSetting'],
+});

package/esm/LinearGenomeView/lazyDialogs.d.ts

@@ -5,10 +5,7 @@ export declare const ReturnToImportFormDialog: import("react").LazyExoticCompone
     handleClose: () => void;
 }) => import("react").JSX.Element>;
 export declare const SequenceSearchDialog: import("react").LazyExoticComponent<({ model, handleClose, }: {
-    model: {
-        assemblyNames: string[];
-        showTrack: (trackId: string) => void;
-    };
+    model: import("./components/searchModes.ts").SequenceSearchModel;
     handleClose: () => void;
 }) => import("react").JSX.Element>;
 export declare const ExportSvgDialog: import("react").LazyExoticComponent<typeof import("./components/ExportSvgDialog.tsx").default>;
@@ -17,3 +14,4 @@ export declare const GetSequenceDialog: import("react").LazyExoticComponent<({ m
     regions: import("@jbrowse/core/util").Region[];
     handleClose: () => void;
 }) => import("react").JSX.Element>;
+export declare const RegionWidthEditorDialog: import("react").LazyExoticComponent<typeof import("./components/RegionWidthEditorDialog.tsx").default>;

package/esm/LinearGenomeView/lazyDialogs.js

@@ -3,3 +3,4 @@ export const ReturnToImportFormDialog = lazy(() => import('@jbrowse/core/ui/Retu
 export const SequenceSearchDialog = lazy(() => import('./components/SequenceSearchDialog.js'));
 export const ExportSvgDialog = lazy(() => import('./components/ExportSvgDialog.js'));
 export const GetSequenceDialog = lazy(() => import('./components/GetSequenceDialog.js'));
+export const RegionWidthEditorDialog = lazy(() => import('./components/RegionWidthEditorDialog.js'));

package/esm/LinearGenomeView/linkedViewSync.d.ts

@@ -1,20 +1,12 @@
 import type { LinearGenomeViewModel } from './model.ts';
 import type { IStateTreeNode } from '@jbrowse/mobx-state-tree';
-/**
- * The single source of truth for which LinearGenomeView actions can be
- * replayed across linked views. Keeping it here (rather than as loose string
- * arrays in each parent view) means the dispatch below stays exhaustive and a
- * typo can't silently produce a no-op sync.
- */
-export type SyncableViewAction = 'horizontalScroll' | 'zoomTo' | 'showTrack' | 'toggleTrack' | 'hideTrack' | 'setTrackLabels' | 'setShowCenterLine';
 interface LinkableViews {
     linkViews: boolean;
     views: LinearGenomeViewModel[];
 }
 /**
- * Install a middleware that, while `linkViews` is on, replays each listed
- * action onto every other sub-view so panning/zooming/track-toggling stays in
- * sync. Used by linear-comparative-view and breakpoint-split-view.
+ * While `linkViews` is on, replay each pan, zoom and track toggle made on one
+ * sub-view onto every other, with the same arguments.
  */
-export declare function installLinkedViewSync(self: IStateTreeNode & LinkableViews, syncActions: readonly SyncableViewAction[]): void;
+export declare function installLinkedViewSync(self: IStateTreeNode & LinkableViews): void;
 export {};