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

package/esm/LinearGenomeView/components/useRangeSelect.js

@@ -1,8 +1,10 @@
 import { useCallback, useEffect, useState } from 'react';
-import { getRelativeX } from "./util.js";
+import { getRelativeX } from '@jbrowse/core/util/getRelativeX';
 export function useRangeSelect(ref, model, shiftOnly) {
     const [startX, setStartX] = useState();
     const [currentX, setCurrentX] = useState();
+    // clientX and clientY used for anchorPosition for menu
+    // offsetX used for calculations about width of selection
     const [anchorPosition, setAnchorPosition] = useState();
     const [guideX, setGuideX] = useState();
     const mouseDragging = startX !== undefined && anchorPosition === undefined;
@@ -13,102 +15,99 @@ export function useRangeSelect(ref, model, shiftOnly) {
         setGuideX(undefined);
     }, []);
     useEffect(() => {
-        function computeOffsets(offsetX) {
-            if (startX === undefined) {
-                return;
-            }
-            const leftPx = Math.min(startX, offsetX);
-            const rightPx = Math.max(startX, offsetX);
-            return {
-                leftOffset: model.pxToBp(leftPx),
-                rightOffset: model.pxToBp(rightPx),
-            };
+        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) {
-            if (ref.current && mouseDragging) {
-                const relativeX = getRelativeX(event, ref.current);
-                setCurrentX(relativeX);
-            }
+            setCurrentX(event.clientX - left);
         }
         function globalMouseUp(event) {
-            if (startX !== undefined && ref.current) {
-                const { clientX, clientY } = event;
-                const offsetX = getRelativeX(event, ref.current);
-                const isClick = Math.abs(offsetX - startX) <= 3;
-                if (isClick && model.scalebarRefNameClickPending) {
-                    setStartX(undefined);
-                    setCurrentX(undefined);
-                    return;
-                }
-                if (!isClick && model.scalebarRefNameClickPending) {
-                    model.setScalebarRefNameClickPending(false);
-                }
-                setAnchorPosition({
-                    offsetX,
-                    clientX,
-                    clientY,
-                    isClick,
-                });
-                if (isClick) {
-                    setGuideX(offsetX);
-                }
-                else {
-                    const args = computeOffsets(offsetX);
-                    if (args) {
-                        model.setOffsets(args.leftOffset, args.rightOffset);
-                    }
-                    setGuideX(undefined);
-                }
+            if (startX === undefined) {
+                return;
+            }
+            const { clientX, clientY } = event;
+            const offsetX = clientX - left;
+            const isClick = Math.abs(offsetX - startX) <= 3;
+            // Clear the flag unconditionally once consumed: the label's own onClick
+            // also clears it, but that only fires if mouseup lands on the label, so
+            // relying on it alone can leave the flag stuck (swallowing the next
+            // scalebar click) when mouseup drifts a few px off the label edge.
+            const startedOnRefLabel = model.scalebarRefNameClickPending;
+            if (startedOnRefLabel) {
+                model.setScalebarRefNameClickPending(false);
+            }
+            // A click that began on a scalebar refname label is handled by that
+            // label's onClick (opens its menu), not by the rubberband menu here.
+            // Drop the hover guide too: the label's menu covers it while it is open,
+            // and nothing else clears it, so picking an item like "Focus on X" left a
+            // red line stranded on the scalebar with the pointer nowhere near it
+            if (isClick && startedOnRefLabel) {
+                setStartX(undefined);
+                setCurrentX(undefined);
+                setGuideX(undefined);
+                return;
+            }
+            setAnchorPosition({ offsetX, clientX, clientY, isClick });
+            if (isClick) {
+                setGuideX(offsetX);
+            }
+            else {
+                model.setOffsets(model.pxToBp(Math.min(startX, offsetX)), model.pxToBp(Math.max(startX, offsetX)));
+                setGuideX(undefined);
             }
         }
-        if (mouseDragging) {
-            window.addEventListener('mousemove', globalMouseMove);
-            window.addEventListener('mouseup', globalMouseUp);
-            return () => {
-                window.removeEventListener('mousemove', globalMouseMove);
-                window.removeEventListener('mouseup', globalMouseUp);
-            };
+        function globalKeyDown(event) {
+            if (event.key === 'Escape') {
+                setStartX(undefined);
+                setCurrentX(undefined);
+            }
         }
-        return () => { };
-    }, [startX, mouseDragging, model, ref, 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]);
     function mouseDown(event) {
         if (shiftOnly && !event.shiftKey) {
             return;
         }
+        // a press with the refName menu already open reopens it on the label under
+        // the pointer; same stranded-guide reasoning as the mouseup path above
         if (model.isScalebarRefNameMenuOpen) {
+            setGuideX(undefined);
             return;
         }
         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);
         const relativeX = getRelativeX(event, ref.current);
         setStartX(relativeX);
         setCurrentX(relativeX);
     }
     function mouseMove(event) {
+        // Keep the rubberband visible while a drag-selection menu is open
         if (anchorPosition?.isClick === false) {
             return;
         }
-        if (mouseDragging) {
-            setGuideX(undefined);
-        }
-        else if (shiftOnly) {
-            if (event.shiftKey) {
-                setGuideX(getRelativeX(event, ref.current));
-            }
-            else {
-                setGuideX(undefined);
-            }
-        }
-        else {
-            setGuideX(getRelativeX(event, ref.current));
-        }
+        const wantsGuide = !mouseDragging && (!shiftOnly || event.shiftKey);
+        setGuideX(wantsGuide ? getRelativeX(event, ref.current) : undefined);
     }
     function mouseOut() {
         if (!anchorPosition?.isClick) {
             setGuideX(undefined);
         }
     }
-    function handleMenuItemClick(_, callback) {
+    function handleMenuItemClick(callback) {
         callback();
         handleClose();
     }
@@ -117,42 +116,34 @@ export function useRangeSelect(ref, model, shiftOnly) {
     const clickBpOffset = isClick
         ? model.pxToBp(anchorPosition.offsetX)
         : undefined;
-    if (startX === undefined) {
-        return {
-            open,
-            isClick,
-            clickBpOffset,
-            guideX,
-            mouseDown,
-            mouseMove,
-            mouseOut,
-            handleClose,
-            handleMenuItemClick,
-            anchorPosition,
+    // rubberband geometry only exists while a drag is in progress (startX set);
+    // grouped so a single truthiness check narrows all fields for RubberbandSpan
+    let rubberband;
+    if (startX !== undefined) {
+        const right = anchorPosition ? anchorPosition.offsetX : (currentX ?? startX);
+        const left = Math.min(right, startX);
+        const width = Math.abs(right - startX);
+        rubberband = {
+            leftBpOffset: model.pxToBp(left),
+            rightBpOffset: model.pxToBp(left + width),
+            numOfBpSelected: Math.ceil(width * model.bpPerPx),
+            width,
+            left,
         };
     }
-    const right = anchorPosition ? anchorPosition.offsetX : currentX || 0;
-    const left = Math.min(right, startX);
-    const width = Math.abs(right - startX);
-    const leftBpOffset = model.pxToBp(left);
-    const rightBpOffset = model.pxToBp(left + width);
-    const numOfBpSelected = Math.ceil(width * model.bpPerPx);
     return {
         open,
         isClick,
         clickBpOffset,
         guideX,
-        rubberbandOn: !isClick,
+        // true only mid-drag and not a click — drives RubberbandSpan vs guide
+        rubberbandOn: rubberband !== undefined && !isClick,
         mouseDown,
         mouseMove,
         mouseOut,
         handleClose,
         handleMenuItemClick,
-        leftBpOffset,
-        rightBpOffset,
         anchorPosition,
-        numOfBpSelected,
-        width,
-        left,
+        rubberband,
     };
 }

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

@@ -0,0 +1,26 @@
+import type { MenuItem } from '@jbrowse/core/ui';
+/**
+ * Visibility and orientation of the search-box strip a stacked-LGV header
+ * draws, persisted per regime (few vs many rows) rather than under one global
+ * key, so the "compact default" heuristic isn't permanently overridden by a
+ * choice made in a differently-sized view.
+ *
+ * `prefix` keys the storage per container — the comparative view and the
+ * breakpoint split view remember their own. Everything else is shared, because
+ * the two headers held a copy each and the copies carried a comment telling the
+ * next editor to change the labels in both. They already import
+ * `HeaderSearchBoxRow` from this plugin, so the shared home costs no new
+ * dependency edge.
+ */
+export declare function useSearchBoxPrefs(prefix: string, numViews: number): {
+    showSearchBoxes: boolean;
+    setShowSearchBoxes: (value: boolean | ((val: boolean) => boolean)) => void;
+    sideBySide: boolean;
+    setSideBySide: (value: boolean | ((val: boolean) => boolean)) => void;
+};
+export type SearchBoxPrefs = ReturnType<typeof useSearchBoxPrefs>;
+/**
+ * The menu rows that drive those prefs. "Stacked" rather than "Vertical": the
+ * two headers name the same state and had drifted apart on it once already.
+ */
+export declare function searchBoxMenuItems({ showSearchBoxes, setShowSearchBoxes, sideBySide, setSideBySide, }: SearchBoxPrefs): MenuItem[];

package/esm/LinearGenomeView/components/useSearchBoxPrefs.js

@@ -0,0 +1,58 @@
+import { useLocalStorage } from '@jbrowse/core/util/hooks';
+/**
+ * Visibility and orientation of the search-box strip a stacked-LGV header
+ * draws, persisted per regime (few vs many rows) rather than under one global
+ * key, so the "compact default" heuristic isn't permanently overridden by a
+ * choice made in a differently-sized view.
+ *
+ * `prefix` keys the storage per container — the comparative view and the
+ * breakpoint split view remember their own. Everything else is shared, because
+ * the two headers held a copy each and the copies carried a comment telling the
+ * next editor to change the labels in both. They already import
+ * `HeaderSearchBoxRow` from this plugin, so the shared home costs no new
+ * dependency edge.
+ */
+export function useSearchBoxPrefs(prefix, numViews) {
+    const compact = numViews <= 3;
+    const regime = compact ? 'compact' : 'large';
+    const [showSearchBoxes, setShowSearchBoxes] = useLocalStorage(`${prefix}-showSearchBoxes-${regime}`, compact);
+    const [sideBySide, setSideBySide] = useLocalStorage(`${prefix}-sideBySide-${regime}`, compact);
+    return { showSearchBoxes, setShowSearchBoxes, sideBySide, setSideBySide };
+}
+/**
+ * The menu rows that drive those prefs. "Stacked" rather than "Vertical": the
+ * two headers name the same state and had drifted apart on it once already.
+ */
+export function searchBoxMenuItems({ showSearchBoxes, setShowSearchBoxes, sideBySide, setSideBySide, }) {
+    return [
+        {
+            label: 'Show search boxes',
+            type: 'checkbox',
+            checked: showSearchBoxes,
+            onClick: () => {
+                setShowSearchBoxes(!showSearchBoxes);
+            },
+        },
+        {
+            label: 'Search box orientation',
+            subMenu: [
+                {
+                    label: 'Side-by-side',
+                    type: 'radio',
+                    checked: sideBySide,
+                    onClick: () => {
+                        setSideBySide(true);
+                    },
+                },
+                {
+                    label: 'Stacked',
+                    type: 'radio',
+                    checked: !sideBySide,
+                    onClick: () => {
+                        setSideBySide(false);
+                    },
+                },
+            ],
+        },
+    ];
+}

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

@@ -1,5 +1,5 @@
-import type React from 'react';
 import type { LinearGenomeViewModel } from '../index.ts';
+import type React from 'react';
 export declare function useSideScroll(model: LinearGenomeViewModel): {
     mouseDown: (event: React.MouseEvent) => void;
     mouseUp: (event: React.MouseEvent) => void;

package/esm/LinearGenomeView/components/useSideScroll.js

@@ -1,27 +1,64 @@
 import { useEffect, useRef, useState } from 'react';
+// 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.
+const PAN_DRAGGING_ATTR = 'data-pan-dragging';
+const PAN_MOVED_ATTR = 'data-pan-moved';
 export function useSideScroll(model) {
     const [mouseDragging, setMouseDragging] = useState(false);
-    const scheduled = useRef(false);
-    const prevX = useRef(0);
+    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(() => {
-        let cleanup = () => { };
+        // 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();
-            const currX = event.clientX;
-            const distance = currX - prevX.current;
-            if (distance) {
-                if (!scheduled.current) {
-                    scheduled.current = true;
-                    window.requestAnimationFrame(() => {
-                        model.horizontalScroll(-distance);
-                        scheduled.current = false;
-                        prevX.current = event.clientX;
-                    });
-                }
+            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() {
-            prevX.current = 0;
+            // 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);
             }
@@ -29,28 +66,59 @@ export function useSideScroll(model) {
         if (mouseDragging) {
             window.addEventListener('mousemove', globalMouseMove, true);
             window.addEventListener('mouseup', globalMouseUp, true);
-            cleanup = () => {
+            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;
             };
         }
-        return cleanup;
+        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) {
             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.
         const target = event.target;
-        if (target.draggable || target.dataset.resizer) {
+        if (target.draggable ||
+            target.closest('[data-gesture-owner]') ||
+            target.closest('button')) {
             return;
         }
+        // otherwise do click and drag scroll
         if (event.button === 0) {
-            prevX.current = event.clientX;
+            hostRef.current = event.currentTarget;
+            event.currentTarget.setAttribute(PAN_DRAGGING_ATTR, '');
+            startXRef.current = event.clientX;
+            prevXRef.current = event.clientX;
+            currXRef.current = event.clientX;
             setMouseDragging(true);
         }
     }
+    // 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);
     }
     return { mouseDown, mouseUp };

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

@@ -1,14 +1,28 @@
 import type { Assembly } from '@jbrowse/core/assemblyManager/assembly';
-export { fetchResults, splitLast } from '../../searchUtils.ts';
-export declare function getRelativeX(event: {
-    clientX: number;
-    target: EventTarget | null;
-}, element: HTMLElement | null): number;
+import type { ViewLayout } from '@jbrowse/core/util/Base1DUtils';
+export { getHighlightColor, highlightKey } from '@jbrowse/core/util/highlights';
+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)';
+};
+export type Cytoband = ReturnType<typeof getCytobands>[number];
 export declare function getCytobands(assembly: Assembly | undefined, refName: string): {
     refName: string;
     start: number;
     end: number;
     type: string;
-    name: any;
+    name: string | undefined;
 }[];
+/**
+ * The bp under a pixel of the overview strip. The strip spans the whole view,
+ * but the overview *layout* is laid out in the pixels after the chromosome-name
+ * gutter (cytobandOffset), so a press or hover on that gutter sits left of the
+ * layout's own origin. `pxToBp` extrapolates there rather than refusing, and
+ * every overview reader took it at face value: the hover and rubberband labels
+ * read out an impossible "ctgA:-12,345,678", and a click did nothing at all,
+ * silently, because `centerAt` cannot resolve a coordinate that is in no region.
+ * Clamping into the layout's own span makes all three name the genome's start,
+ * which is what the gutter is adjacent to.
+ */
+export declare function overviewPxToBp(overview: ViewLayout, px: number, cytobandOffset: number): import("@jbrowse/core/util/Base1DUtils").PxToBpResult;
 export declare function shouldSwapTracks(lastSwapY: number | undefined, currentY: number, movingDown: boolean): boolean;

package/esm/LinearGenomeView/components/util.js

@@ -1,17 +1,38 @@
-export { fetchResults, splitLast } from "../../searchUtils.js";
-export function getRelativeX(event, element) {
-    return event.clientX - (element?.getBoundingClientRect().left || 0);
-}
+import { clamp } from '@jbrowse/core/util';
+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 elidedBlockStyles = {
+    backgroundColor: '#999',
+    backgroundImage: 'repeating-linear-gradient(90deg, transparent, transparent 1px, rgba(255,255,255,.5) 1px, rgba(255,255,255,.5) 3px)',
+};
 export function getCytobands(assembly, refName) {
     return (assembly?.cytobands
         ?.map(f => ({
-        refName: assembly.getCanonicalRefName(f.get('refName')) || f.get('refName'),
+        refName: assembly.getCanonicalRefName2(f.get('refName')),
         start: f.get('start'),
         end: f.get('end'),
         type: f.get('gieStain'),
         name: f.get('name'),
     }))
-        .filter(f => f.refName === refName) || []);
+        .filter(f => f.refName === refName) ?? []);
+}
+/**
+ * The bp under a pixel of the overview strip. The strip spans the whole view,
+ * but the overview *layout* is laid out in the pixels after the chromosome-name
+ * gutter (cytobandOffset), so a press or hover on that gutter sits left of the
+ * layout's own origin. `pxToBp` extrapolates there rather than refusing, and
+ * every overview reader took it at face value: the hover and rubberband labels
+ * read out an impossible "ctgA:-12,345,678", and a click did nothing at all,
+ * silently, because `centerAt` cannot resolve a coordinate that is in no region.
+ * Clamping into the layout's own span makes all three name the genome's start,
+ * which is what the gutter is adjacent to.
+ */
+export function overviewPxToBp(overview, px, cytobandOffset) {
+    return pxToBp(overview, clamp(px - cytobandOffset, 0, overview.width - 1));
 }
 const MIN_DRAG_DISTANCE = 30;
 export function shouldSwapTracks(lastSwapY, currentY, movingDown) {

package/esm/LinearGenomeView/consts.d.ts

@@ -1,7 +1,12 @@
+export declare const MIN_BP_PER_PX: number;
+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 RESIZE_HANDLE_HEIGHT = 3;
-export declare const INTER_REGION_PADDING_WIDTH = 2;
+export declare const SVG_SCALEBAR_CAP = 5;
+export declare const RESIZE_HANDLE_HEIGHT = 4;
+export declare const TRACK_TOP_GAP = 2;
+export declare const TRACK_OUTLINE_BORDER = 1;
+export declare const MINIMIZED_TRACK_HEIGHT = 20;
 export declare const SPACING = 7;
 export declare const WIDGET_HEIGHT = 32;

package/esm/LinearGenomeView/consts.js

@@ -1,7 +1,23 @@
+// most zoomed-in level: 50px per bp
+export const MIN_BP_PER_PX = 1 / 50;
+// 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;
 export const HEADER_BAR_HEIGHT = 48;
 export const HEADER_OVERVIEW_HEIGHT = 20;
 export const SCALE_BAR_HEIGHT = 17;
-export const RESIZE_HANDLE_HEIGHT = 3;
-export const INTER_REGION_PADDING_WIDTH = 2;
+// Half-height of the total-bp scalebar's end caps in the SVG export; also the
+// clearance the bar needs below the assembly label.
+export const SVG_SCALEBAR_CAP = 5;
+// The three pieces of chrome TrackContainer puts around a track's rendering
+// container. The model sums them to place a track without measuring the DOM, so
+// 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`.
+export const RESIZE_HANDLE_HEIGHT = 4;
+export const TRACK_TOP_GAP = 2;
+export const TRACK_OUTLINE_BORDER = 1;
+export const MINIMIZED_TRACK_HEIGHT = 20;
 export const SPACING = 7;
 export const WIDGET_HEIGHT = 32;

package/esm/LinearGenomeView/flyTo.d.ts

@@ -0,0 +1,38 @@
+/**
+ * A window of the view's linearized bp space — the space `windowStartBp` is in,
+ * so a position here is invariant under zoom and a flight can be planned once
+ * for a path whose scale changes under it.
+ */
+export interface FlightViewport {
+    centerBp: number;
+    windowWidthBp: number;
+}
+export interface Flight {
+    durationMs: number;
+    /** the viewport at `t` in [0,1]; exactly the destination at t >= 1 */
+    at: (t: number) => FlightViewport;
+}
+/**
+ * The viewport path from `from` to `to`, and how long to spend on it.
+ *
+ * The path is equation (9) of the paper cited at the top of this file: it zooms
+ * out as it travels and back in as it arrives, along the geodesic that holds
+ * the *perceived* velocity constant, so the reader can follow the whole journey
+ * rather than watching one blurred smear.
+ *
+ * A STRAIGHT PAN IS NOT THE ALTERNATIVE, it is the thing this exists to avoid.
+ * The jump that wants animating here is a synteny row showing a whole assembly
+ * being sent to a mate on another chromosome: tens of megabases at a window of
+ * tens of kilobases, which is a thousand screens of travel. Panned at constant
+ * scale that is a thousand screens of unreadable streaking and no frame in
+ * which the reader is anywhere identifiable. Pulled back to where both ends fit
+ * and then dropped in, it is a picture of where they came from and where they
+ * landed.
+ *
+ * The zoomed-out apex is `w0 * cosh(r0)` — for a same-zoom hop, about the
+ * distance travelled — so the arc naturally tops out at "both endpoints on
+ * screen". A view whose `maxBpPerPx` is tighter than that simply clamps there
+ * and flies the middle of the path flat; nothing here has to know the limit,
+ * because the caller writes through `zoomTo` and reads back what it got.
+ */
+export declare function planFlight(from: FlightViewport, to: FlightViewport): Flight;