@jbrowse/plugin-linear-genome-view 5.0.0-beta.7 → 5.0.0-beta.9

package/esm/LinearGenomeView/components/TrackLabel.js

@@ -24,6 +24,6 @@ const useStyles = makeStyles()(theme => ({
 const TrackLabel = observer(function TrackLabel({ track, className, }) {
     const { classes } = useStyles();
     const trackName = getTrackName(track.configuration, getSession(track));
-    return (_jsxs(Paper, { className: cx(className, classes.root), children: [_jsx(TrackLabelDragHandle, { track: track }), _jsx(TrackLabelCloseButton, { track: track }), _jsx(TrackLabelMinimizeButton, { track: track }), _jsx(Typography, { variant: "body2", component: "span", className: classes.trackName, children: _jsx(SanitizedHTML, { html: trackName }) }), _jsx(TrackLabelRefNameWarning, { track: track }), _jsx(TrackLabelMenu, { track: track })] }));
+    return (_jsxs(Paper, { className: cx(className, classes.root), "data-testid": `trackLabel-${track.trackId}`, children: [_jsx(TrackLabelDragHandle, { track: track }), _jsx(TrackLabelCloseButton, { track: track }), _jsx(TrackLabelMinimizeButton, { track: track }), _jsx(Typography, { variant: "body2", component: "span", className: classes.trackName, children: _jsx(SanitizedHTML, { html: trackName }) }), _jsx(TrackLabelRefNameWarning, { track: track }), _jsx(TrackLabelMenu, { track: track })] }));
 });
 export default TrackLabel;

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

@@ -1,9 +1,11 @@
 import type { LinearGenomeViewModel } from '../index.ts';
 import type { BaseTrackModel } from '@jbrowse/core/pluggableElementTypes/models';
+import type { LinearDisplayModel } from '@jbrowse/display-kit/types';
 type LGV = LinearGenomeViewModel;
-declare const TrackRenderingContainer: ({ model, track, ref, }: {
+declare const TrackRenderingContainer: ({ model, track, display, ref, }: {
     model: LGV;
     track: BaseTrackModel;
+    display: LinearDisplayModel;
     ref?: React.Ref<HTMLDivElement>;
 }) => import("react").JSX.Element;
 export default TrackRenderingContainer;

package/esm/LinearGenomeView/components/TrackRenderingContainer.js

@@ -5,7 +5,6 @@ import { getSession } from '@jbrowse/core/util';
 import { getTrackName } from '@jbrowse/core/util/tracks';
 import { makeStyles } from '@jbrowse/core/util/tss-react';
 import { observer } from 'mobx-react';
-import { MINIMIZED_TRACK_HEIGHT } from '../consts.js';
 const useStyles = makeStyles()({
     // aligns with block boundaries. check for example the breakpoint split view
     // demo to see if features align if wanting to change things. the -1 left
@@ -72,17 +71,14 @@ const TrackDisplayRegion = observer(function TrackDisplayRegion({ model, track,
     const loc = model.coarseVisibleLocStrings;
     return (_jsx("div", { ...divProps, role: "figure", "aria-label": loc ? `${trackName} track, showing ${loc}` : `${trackName} track`, children: children }));
 });
-const TrackRenderingContainer = observer(function TrackRenderingContainer({ model, track, ref, }) {
+const TrackRenderingContainer = observer(function TrackRenderingContainer({ model, track, display, ref, }) {
     const { classes } = useStyles();
-    // an LGV track always holds at least one linear display (activeDisplay =
-    // displays[0]); narrow to the linear shape for height/RenderingComponent
-    const display = track.activeDisplay;
-    const { height, RenderingComponent, DisplayBlurb } = display;
+    const { RenderingComponent, DisplayBlurb } = display;
     const { showTrackOutlines } = model;
     const trackId = track.trackId;
     const minimized = track.minimized;
     return (_jsx("div", { ref: ref, className: classes.trackRenderingContainer, style: {
-            height: minimized ? MINIMIZED_TRACK_HEIGHT : height,
+            height: model.trackHeight(track),
         }, "data-testid": `trackRenderingContainer-${model.id}-${trackId}`, children: !minimized ? (_jsxs(_Fragment, { children: [_jsx(TrackDisplayRegion, { model: model, track: track, className: classes.renderingComponentContainer, style: { left: showTrackOutlines ? -1 : 0 }, children: _jsx(Suspense, { fallback: _jsx(LoadingOverlay, { isVisible: true, immediate: true }), children: _jsx(RenderingComponent, { model: display, onHorizontalScroll: model.horizontalScroll }) }) }), DisplayBlurb ? (_jsx("div", { style: {
                         position: 'absolute',
                         left: 0,

package/esm/LinearGenomeView/components/TracksContainer.js

@@ -1,8 +1,6 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Suspense, lazy, useRef } from 'react';
 import { PluggableElements } from '@jbrowse/core/ui';
-import { OverlayPointerProvider } from '@jbrowse/core/ui/highlightChipReveal';
-import { useMouseTracking } from '@jbrowse/core/ui/useMouseTracking';
 import { getEnv, getSession } from '@jbrowse/core/util';
 import { makeStyles } from '@jbrowse/core/util/tss-react';
 import { useTheme } from '@mui/material';
@@ -46,33 +44,27 @@ const TracksContainer = observer(function TracksContainer({ children, model, })
     // a separate range-select instance from the one inside <Rubberband> (the
     // scalebar control); don't dedupe them — they cover different regions.
     const range = useRangeSelect(ref, model, true);
-    // published rather than held (see `useMouseTracking`): the highlight bands
-    // read it, and a position in state here would re-render the whole tracks area
-    // every frame the pointer moves over it
-    const { mouseTracker, handleMouseMove, handleMouseLeave } = useMouseTracking();
-    return (_jsx("div", { ref: ref, "data-testid": "tracksContainer", className: classes.tracksContainer, onMouseDown: event => {
+    return (_jsxs("div", { ref: ref, "data-testid": "tracksContainer", className: classes.tracksContainer, onMouseDown: event => {
             sideScrollMouseDown(event);
             range.mouseDown(event);
         }, onMouseMove: event => {
-            handleMouseMove(event);
             range.mouseMove(event);
         }, onMouseLeave: () => {
-            handleMouseLeave();
             range.mouseOut();
-        }, onMouseUp: mouseUp, children: _jsxs(OverlayPointerProvider, { value: mouseTracker, children: [showGridlines ? (_jsxs(_Fragment, { children: [_jsx(Gridlines, { model: model }), _jsx(PaddingBlocks, { model: model })] })) : null, _jsx(Suspense, { fallback: null, children: showCenterLine ? _jsx(CenterLine, { model: model }) : null }), _jsx(RangeSelectOverlay, { model: model, range: range }), model.volatileGuides.map((guide, idx) => (_jsx(VerticalGuide, { model: model, coordX: guide.xPos }, idx))), _jsx(Rubberband, { model: model, ControlComponent: _jsx(Scalebar, { model: model, style: {
-                            height: SCALE_BAR_HEIGHT,
-                            boxSizing: 'border-box',
-                        } }) }), _jsx(ScalebarHighlightGroup, { model: model }), _jsx(HighlightGroup, { model: model }), _jsx(PluggableElements, { pluginManager: pluginManager, name: "LinearGenomeView-TracksContainerComponent", props: { model } }), children] }) }));
+        }, onMouseUp: mouseUp, children: [showGridlines ? (_jsxs(_Fragment, { children: [_jsx(Gridlines, { model: model }), _jsx(PaddingBlocks, { model: model })] })) : null, _jsx(Suspense, { fallback: null, children: showCenterLine ? _jsx(CenterLine, { model: model }) : null }), _jsx(RangeSelectOverlay, { model: model, range: range }), model.volatileGuides.map((guide, idx) => (_jsx(VerticalGuide, { model: model, coordX: guide.xPos }, idx))), _jsx(Rubberband, { model: model, ControlComponent: _jsx(Scalebar, { model: model, style: {
+                        height: SCALE_BAR_HEIGHT,
+                        boxSizing: 'border-box',
+                    } }) }), _jsx(ScalebarHighlightGroup, { model: model }), _jsx(HighlightGroup, { model: model }), _jsx(PluggableElements, { pluginManager: pluginManager, name: "LinearGenomeView-TracksContainerComponent", props: { model } }), children] }));
 });
 const HighlightGroup = observer(function HighlightGroup({ model, }) {
-    return getSession(model).highlightsVisible && model.highlight.length ? (_jsx(Suspense, { fallback: null, children: model.highlight.map((highlight, idx) => (_jsx(Highlight, { model: model, highlight: highlight }, highlightKey(highlight, idx)))) })) : null;
+    return getSession(model).highlightsVisible && model.highlights.length ? (_jsx(Suspense, { fallback: null, children: model.highlights.map((highlight, idx) => (_jsx(Highlight, { model: model, highlight: highlight }, highlightKey(highlight, idx)))) })) : null;
 });
 const ScalebarHighlightGroup = observer(function ScalebarHighlightGroup({ model, }) {
     const theme = useTheme();
     const { pluginManager } = getEnv(model);
     const { classes } = useStyles();
     const viewBands = getSession(model).highlightsVisible
-        ? model.highlight.map((h, idx) => {
+        ? model.highlights.map((h, idx) => {
             const coords = model.getHighlightCoords(h);
             return coords ? (_jsx(OverviewHighlightBand, { coords: coords, background: getHighlightColor(h, theme).toRgbString() }, highlightKey(h, idx))) : null;
         })

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

@@ -1,8 +1,7 @@
 import type { StatusCallback } from '@jbrowse/core/util';
-import type { StopToken } from '@jbrowse/core/util/stopToken';
 import type { Region } from '@jbrowse/core/util/types';
 import type { IAnyStateTreeNode } from '@jbrowse/mobx-state-tree';
 export declare function fetchSequence(model: IAnyStateTreeNode, regions: Region[], opts?: {
-    stopToken?: StopToken;
+    signal?: AbortSignal;
     statusCallback?: StatusCallback;
 }): Promise<import("@jbrowse/core/util").Feature[]>;

package/esm/LinearGenomeView/components/useSideScroll.js

@@ -94,7 +94,7 @@ export function useSideScroll(model) {
         }
         // 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
+        // scalebar), or a button (e.g. the menu button on a highlight
         // 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.

package/esm/LinearGenomeView/consts.d.ts

@@ -4,6 +4,8 @@ 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 CLOSE_UP_CONNECTOR_HEIGHT = 64;
+export declare const MIN_CLOSE_UP_CONNECTOR_HEIGHT = 4;
 export declare const RESIZE_HANDLE_HEIGHT = 4;
 export declare const TRACK_TOP_GAP = 2;
 export declare const TRACK_OUTLINE_BORDER = 1;

package/esm/LinearGenomeView/consts.js

@@ -9,6 +9,11 @@ export const SCALE_BAR_HEIGHT = 17;
 // 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;
+// Height of the band a close-up's trapezoid is drawn in: the default the host's
+// property starts at, and the floor a drag on the band stops at, since the band
+// is its own drag handle.
+export const CLOSE_UP_CONNECTOR_HEIGHT = 64;
+export const MIN_CLOSE_UP_CONNECTOR_HEIGHT = 4;
 // 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 —

package/esm/LinearGenomeView/headerFit.d.ts

@@ -19,9 +19,10 @@ 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, }: {
     width: number | undefined;
     searchBoxPx: number;
     clearHighlight?: boolean;
+    viewMenu?: boolean;
 }): HeaderFit;
 export {};

package/esm/LinearGenomeView/headerFit.js

@@ -10,6 +10,9 @@ const ROW_WITHOUT_SEARCH_PX = 591;
 // 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;
 // 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
@@ -41,12 +44,14 @@ 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, }) {
     const fit = Object.fromEntries(SHEDDABLE.map(([k]) => [k, true]));
     if (width === undefined) {
         return fit;
     }
-    const room = width - (clearHighlight ? CLEAR_HIGHLIGHT_PX : 0);
+    const room = width -
+        (clearHighlight ? CLEAR_HIGHLIGHT_PX : 0) -
+        (viewMenu ? VIEW_MENU_PX : 0);
     let need = ROW_WITHOUT_SEARCH_PX + searchBoxPx;
     for (const [key, saves] of SHEDDABLE) {
         if (need <= room) {

package/esm/LinearGenomeView/index.d.ts

@@ -27,7 +27,7 @@ export default function LinearGenomeViewF(pluginManager: PluginManager): void;
 export { stateModelFactory } from './model.ts';
 export { lgvLaunchKeys } from './launchKeys.ts';
 export type { LinearGenomeViewModel, LinearGenomeViewStateModel, } from './model.ts';
-export type { BpOffset, ExportSvgOptions, HighlightType, InitState, LinearGenomeViewLaunchProps, NavLocation, TrackLabelMode, VolatileGuide, } from './types.ts';
+export type { BpOffset, ExportSvgOptions, HighlightInput, HighlightType, InitState, LinearGenomeViewLaunchProps, NavLocation, TrackLabelMode, ViewTrackLabelMode, VolatileGuide, } from './types.ts';
 export { type SyncableViewAction, installLinkedViewSync, } from './linkedViewSync.ts';
 export { default as HighlightBand } from './components/HighlightBand.tsx';
 export { default as HighlightChip } from './components/HighlightChip.tsx';

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

@@ -6,6 +6,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') {
@@ -30,6 +32,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

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

package/esm/LinearGenomeView/launchKeys.js

@@ -4,9 +4,11 @@ import { defineLaunchKeys } from '@jbrowse/core/util/withLaunchInput';
 // key that partitions as a typo.
 //
 // `bpPerPx`/`offsetPx` are the viewport spelling from before it was stored as a
-// window. They are no longer declared properties, 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. Deletable with `legacyBpPerPx`.
+// window, and `showCytobandsSetting`/`cytobandsVisible` the two the cytoband
+// toggle had before `showCytobands`. 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. The
+// viewport pair is deletable with `legacyBpPerPx`.
 //
 // #launchKeys LinearGenomeView — the URL parameters page renders this list
 // rather than restating it; each of these keys has its own `&param=` section
@@ -14,10 +16,18 @@ import { defineLaunchKeys } from '@jbrowse/core/util/withLaunchInput';
 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: 'highlightEntries' },
-}, { passThrough: ['bpPerPx', 'offsetPx'] });
+    highlight: { kind: 'launch' },
+}, {
+    passThrough: [
+        'bpPerPx',
+        'offsetPx',
+        'showCytobandsSetting',
+        'cytobandsVisible',
+    ],
+});

package/esm/LinearGenomeView/lazyDialogs.d.ts

@@ -17,3 +17,10 @@ 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>;
+export declare const AddCloseUpDialog: import("react").LazyExoticComponent<({ model, leftOffset, rightOffset, handleClose, }: {
+    model: import("./model.ts").LinearGenomeViewModel;
+    leftOffset?: import("./types.ts").BpOffset;
+    rightOffset?: import("./types.ts").BpOffset;
+    handleClose: () => void;
+}) => import("react").JSX.Element>;

package/esm/LinearGenomeView/lazyDialogs.js

@@ -3,3 +3,5 @@ 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'));
+export const AddCloseUpDialog = lazy(() => import('./components/AddCloseUpDialog.js'));

package/esm/LinearGenomeView/menuItems.d.ts

@@ -2,28 +2,40 @@ import type { LinearGenomeViewModel } from './model.ts';
 import type { BpOffset } from './types.ts';
 import type { MenuItem } from '@jbrowse/core/ui';
 /**
- * Zoom all the way out, shared by the view menu and the header's zoom menu —
- * one definition so the two cannot drift in label, and the view menu is the
+ * The zoom ladder, shared by the header's zoom button and the view menu's
+ * "Zoom" — one definition so the two cannot drift, and the view menu is the
  * only one of the two that survives `hideHeader`.
- *
- * The zoom menu earns it on the merits: this is the bottom of the same "Zoom
- * out 100x" ladder, and it is where someone already zooming looks.
- *
- * The label is the import form's button text verbatim (`ImportForm.tsx`), which
- * is where most people meet the phrase. No icon: the four-arrows glyph it
- * carried reads as "fullscreen", and nothing else names the same gesture, so a
- * substitute would be decoration rather than a distinction.
  */
-export declare function showAllRegionsMenuItem(self: LinearGenomeViewModel): MenuItem;
+export declare function zoomMenuItems(self: LinearGenomeViewModel): MenuItem[];
 /**
- * Build the main view menu items
+ * 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.
+ *
+ * Four actions, a Zoom group and a Show group. The four are what people open
+ * this menu to do — pick tracks, take a picture, search the sequence, start
+ * over — and the once-a-session settings that used to sit beside them are a
+ * popup away instead of in front of every reader every time.
  */
 export declare function buildMenuItems(self: LinearGenomeViewModel): MenuItem[];
 /**
- * Build rubberband selection menu items. `launchItems` are the plugin-supplied
- * things a selection can start (`rubberBandLaunchMenuItems()`); they collect
- * under one "Launch" submenu so the menu stays three actions plus a group
- * however many plugins are loaded, and vanish entirely when none apply.
+ * 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 close-up view first, then `launchItems`, the
+ * plugin-supplied ones (`rubberBandLaunchMenuItems()`).
+ *
+ * A close-up is offered from HERE and nowhere else, because a drag is what the
+ * feature was always asking for and a menu item could not: the close-up shows
+ * one span of one place, and this is the gesture that names both. From the view
+ * menu it could only guess — a tenth of the middle, which is a span nobody
+ * picked.
+ *
+ * Only a view of its own offers it, which `isTopLevelView` is the whole of. A
+ * row of a comparative stack is already part of somebody's figure: the synteny
+ * ribbons and the breakpoint split panels are placed against each row's own
+ * height, and those views' exports draw one row per view, so a close-up grown
+ * there walks the ribbons off their rows and is dropped from the picture
+ * without a word. A close-up, living under a view rather than under the
+ * session, is not a top-level view either.
  */
 export declare function buildRubberBandMenuItems(self: LinearGenomeViewModel, launchItems: MenuItem[]): MenuItem[];
 /**