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

package/esm/LinearGenomeView/headerFit.d.ts

@@ -0,0 +1,29 @@
+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
+ * room for, given what the search box is asking for — `searchBoxWidth`, margins
+ * included — and whether the clear-highlights button is currently in the row.
+ * An unmeasured width — the first render, before the ResizeObserver has
+ * reported — keeps all of them, so the common wide case paints its final form
+ * immediately rather than flashing the compact one.
+ *
+ * `searchBoxPx` is the box's ask and not its floor, because the two differ by
+ * the locstring — 189px empty, 194 at `ctgA:1..20,000`, 284 at
+ * `chr22:10,510,000..10,610,000`. Shedding against the floor is what left
+ * flexbox squeezing the box this whole table exists to protect: against the
+ * floor the probe read 184px of an asked 210 at an 800px window and 186 at 600.
+ *
+ * The fully shed row costs 238px, so under `238 + searchBoxPx` the row overflows
+ * whatever it gives up and the box shrinks like any flex item. That is a floor,
+ * 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, viewMenu, touch, }: {
+    width: number | undefined;
+    searchBoxPx: number;
+    clearHighlight?: boolean;
+    viewMenu?: boolean;
+    touch?: boolean;
+}): HeaderFit;
+export {};

package/esm/LinearGenomeView/headerFit.js

@@ -0,0 +1,72 @@
+// 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 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 = 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
+// the one control in the row with no equivalent anywhere else in the view, so
+// everything else exists to keep it on screen.
+const SHEDDABLE = [
+    ['trackSelectorIndent', 16],
+    ['panButtonSpacing', 100],
+    ['scrollZoomLabel', 88],
+    ['zoomSlider', 100],
+    ['regionWidth', 54],
+];
+/**
+ * Which of the header bar's optional pieces a header `width` px wide still has
+ * room for, given what the search box is asking for — `searchBoxWidth`, margins
+ * included — and whether the clear-highlights button is currently in the row.
+ * An unmeasured width — the first render, before the ResizeObserver has
+ * reported — keeps all of them, so the common wide case paints its final form
+ * immediately rather than flashing the compact one.
+ *
+ * `searchBoxPx` is the box's ask and not its floor, because the two differ by
+ * the locstring — 189px empty, 194 at `ctgA:1..20,000`, 284 at
+ * `chr22:10,510,000..10,610,000`. Shedding against the floor is what left
+ * flexbox squeezing the box this whole table exists to protect: against the
+ * floor the probe read 184px of an asked 210 at an 800px window and 186 at 600.
+ *
+ * The fully shed row costs 238px, so under `238 + searchBoxPx` the row overflows
+ * whatever it gives up and the box shrinks like any flex item. That is a floor,
+ * 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, 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) -
+        (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;
+    }
+    return fit;
+}

package/esm/LinearGenomeView/index.d.ts

@@ -1,5 +1,30 @@
+import type { LinearGenomeViewModel } from './model.ts';
 import type PluginManager from '@jbrowse/core/PluginManager';
+import type { ViewLayout } from '@jbrowse/core/util/Base1DUtils';
+declare module '@jbrowse/core/PluginManager' {
+    interface ExtensionPointRegistry {
+        /** #extensionPoint LinearGenomeView-TracksContainerComponent | sync | Add a component into the LGV tracks container */
+        'LinearGenomeView-TracksContainerComponent': ElementList<{
+            model: LinearGenomeViewModel;
+        }>;
+        /** #extensionPoint LinearGenomeView-ScalebarHighlightComponent | sync | Add a highlight component to the scalebar */
+        'LinearGenomeView-ScalebarHighlightComponent': ElementList<{
+            model: LinearGenomeViewModel;
+        }>;
+        /** #extensionPoint LinearGenomeView-HighlightSVGComponent | sync | Add an SVG highlight overlay in the LGV SVG export */
+        'LinearGenomeView-HighlightSVGComponent': ElementList<{
+            model: LinearGenomeViewModel;
+            height: number;
+        }>;
+        /** #extensionPoint LinearGenomeView-OverviewScalebarComponent | sync | Add a component to the overview scalebar */
+        'LinearGenomeView-OverviewScalebarComponent': ElementList<{
+            model: LinearGenomeViewModel;
+            overview: ViewLayout;
+        }>;
+    }
+}
 export default function LinearGenomeViewF(pluginManager: PluginManager): void;
-export * from './model.ts';
-export * from './types.ts';
-export { default as HighlightBand } from './components/HighlightBand.tsx';
+export { stateModelFactory } from './model.ts';
+export type { LinearGenomeViewModel, LinearGenomeViewStateModel, } from './model.ts';
+export { installLinkedViewSync } from './linkedViewSync.ts';
+export { default as HighlightChip } from './components/HighlightChip.tsx';

package/esm/LinearGenomeView/index.js

@@ -1,16 +1,22 @@
-import { lazy } from 'react';
 import { ViewType } from '@jbrowse/core/pluggableElementTypes';
-import { stateModelFactory } from "./model.js";
+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 * from "./model.js";
-export * from "./types.js";
-export { default as HighlightBand } from "./components/HighlightBand.js";
+export { stateModelFactory } from './model.js';
+export { installLinkedViewSync } from './linkedViewSync.js';
+export { default as HighlightChip } from './components/HighlightChip.js';

package/esm/LinearGenomeView/keyboardHandler.d.ts

@@ -1,2 +1,11 @@
 import type { LinearGenomeViewModel } from './model.ts';
+/**
+ * Sets up keyboard shortcuts for the LinearGenomeView
+ * - Ctrl/Cmd + ArrowLeft: slide left
+ * - 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,9 +1,24 @@
 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
+ * - Ctrl/Cmd + ArrowLeft: slide left
+ * - 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') {
+        return;
+    }
     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);
@@ -20,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

@@ -3,21 +3,15 @@ export declare const ReturnToImportFormDialog: import("react").LazyExoticCompone
         clearView: () => void;
     };
     handleClose: () => void;
-}) => import("react/jsx-runtime").JSX.Element>;
+}) => 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-runtime").JSX.Element>;
+}) => import("react").JSX.Element>;
 export declare const ExportSvgDialog: import("react").LazyExoticComponent<typeof import("./components/ExportSvgDialog.tsx").default>;
-export declare const GetSequenceDialog: import("react").LazyExoticComponent<({ model, handleClose, }: {
-    model: {
-        leftOffset?: import("./types.ts").BpOffset;
-        rightOffset?: import("./types.ts").BpOffset;
-        getSelectedRegions: (left?: import("./types.ts").BpOffset, right?: import("./types.ts").BpOffset) => import("@jbrowse/core/util").Region[];
-        setOffsets: (left?: import("./types.ts").BpOffset, right?: import("./types.ts").BpOffset) => void;
-    };
+export declare const GetSequenceDialog: import("react").LazyExoticComponent<({ model, regions, handleClose, }: {
+    model: import("@jbrowse/mobx-state-tree").IAnyStateTreeNode;
+    regions: import("@jbrowse/core/util").Region[];
     handleClose: () => void;
-}) => import("react/jsx-runtime").JSX.Element>;
+}) => import("react").JSX.Element>;
+export declare const RegionWidthEditorDialog: import("react").LazyExoticComponent<typeof import("./components/RegionWidthEditorDialog.tsx").default>;

package/esm/LinearGenomeView/lazyDialogs.js

@@ -1,5 +1,6 @@
 import { lazy } from 'react';
 export const ReturnToImportFormDialog = lazy(() => import('@jbrowse/core/ui/ReturnToImportFormDialog'));
-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 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

@@ -0,0 +1,12 @@
+import type { LinearGenomeViewModel } from './model.ts';
+import type { IStateTreeNode } from '@jbrowse/mobx-state-tree';
+interface LinkableViews {
+    linkViews: boolean;
+    views: LinearGenomeViewModel[];
+}
+/**
+ * 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): void;
+export {};

package/esm/LinearGenomeView/linkedViewSync.js

@@ -0,0 +1,36 @@
+import { addDisposer, addMiddleware } from '@jbrowse/mobx-state-tree';
+const LINKED_ACTIONS = [
+    'horizontalScroll',
+    'zoomTo',
+    'showTrack',
+    'toggleTrack',
+    'launchTrack',
+    'launchToggleTrack',
+    'hideTrack',
+    'setTrackLabels',
+    'setShowCenterLine',
+];
+function isLinkedAction(name) {
+    return LINKED_ACTIONS.includes(name);
+}
+/**
+ * While `linkViews` is on, replay each pan, zoom and track toggle made on one
+ * sub-view onto every other, with the same arguments.
+ */
+export function installLinkedViewSync(self) {
+    addDisposer(self, addMiddleware(self, (call, next) => {
+        next(call);
+        const { name, args, context } = call;
+        if (call.type === 'action' &&
+            call.id === call.rootId &&
+            self.linkViews &&
+            isLinkedAction(name)) {
+            for (const view of self.views) {
+                if (view !== context) {
+                    const action = view[name];
+                    void action(...args);
+                }
+            }
+        }
+    }));
+}

package/esm/LinearGenomeView/menuItems.d.ts

@@ -1,7 +1,30 @@
 import type { LinearGenomeViewModel } from './model.ts';
 import type { BpOffset } from './types.ts';
 import type { MenuItem } from '@jbrowse/core/ui';
-export declare function rewriteOnClicks(self: LinearGenomeViewModel, trackType: string, viewMenuActions: MenuItem[]): void;
+export declare function zoomMenuItems(self: LinearGenomeViewModel): MenuItem[];
+export declare function buildHighlightsSubMenuItems(self: LinearGenomeViewModel): MenuItem[];
+/**
+ * Build the main view menu items. A row stacked in another view has no import
+ * form of its own, so only a top-level view offers the way back to one.
+ */
 export declare function buildMenuItems(self: LinearGenomeViewModel): MenuItem[];
-export declare function buildRubberBandMenuItems(self: LinearGenomeViewModel): MenuItem[];
+/**
+ * Open a copy of the view, tracks and their settings included, framed on the
+ * span between two offsets. The same copy as the view menu's "Copy view", and
+ * nothing links it back to the original.
+ */
+export declare function openSpanInNewView(view: LinearGenomeViewModel, start?: BpOffset, end?: BpOffset): import("@jbrowse/core/util").AbstractViewModel | undefined;
+/**
+ * Build rubberband selection menu items. What a selection can open collects
+ * under one "Launch" submenu, which sorts last, below any row a plugin appends
+ * to the menu itself: a new linear genome view of the span first, then
+ * `launchItems`, the plugin-supplied ones (`rubberBandLaunchMenuItems()`).
+ *
+ * The new view is a copy of this one, so only a top-level view offers it: a row
+ * of a comparative view carries that view's framing, such as a hidden header.
+ */
+export declare function buildRubberBandMenuItems(self: LinearGenomeViewModel, launchItems: MenuItem[]): MenuItem[];
+/**
+ * Build rubberband click menu items (single click on rubberband area)
+ */
 export declare function buildRubberbandClickMenuItems(self: LinearGenomeViewModel, clickOffset: BpOffset): MenuItem[];