@jbrowse/plugin-linear-genome-view 5.0.0-beta.17 → 5.0.0-beta.19

package/esm/LinearGenomeView/afterAttach.js

@@ -2,8 +2,10 @@ import { getSession, isSessionModelWithWidgets, resolveNamedRegions, } from '@jb
 import { coerceHighlight } from '@jbrowse/core/util/highlights';
 import { installInitAutorun } from '@jbrowse/core/util/installInitAutorun';
 import { normalizeTrackInit, warmTrackDisplayGeneric, } from '@jbrowse/core/util/tracks';
+import { requestedDisplayType } from '@jbrowse/launch-args/displaySettings';
 import { addDisposer } from '@jbrowse/mobx-state-tree';
 import { autorun, untracked, when } from 'mobx';
+import { launchTrackInit } from '../TrackModifiers/index.js';
 import { SearchResultsNotFoundError } from '../searchUtils.js';
 // `init` is a frozen blob that often comes from hand-authored JSON, where a
 // lone entry gets written bare (`tracks: 'genes'`). A string is iterable, so
@@ -127,8 +129,7 @@ async function navigateInit(self, session, init) {
 // display's state model first when it is registered lazily
 async function showInitTracks(self, init) {
     for (const t of asArray(init.tracks)) {
-        const { trackId, trackSnapshot, displaySnapshot } = normalizeTrackInit(t);
-        await self.launchTrack(trackId, trackSnapshot, displaySnapshot);
+        await launchTrackInit(self, t);
     }
 }
 /**
@@ -219,8 +220,9 @@ function setupInitWarmup(self) {
                 }
             }
             for (const t of tracks) {
-                const { trackId, displaySnapshot } = normalizeTrackInit(t);
-                warmTrackDisplayGeneric(self, trackId, displaySnapshot, assembly);
+                const { trackId, displaySnapshot, modifiers } = normalizeTrackInit(t);
+                const type = requestedDisplayType(modifiers);
+                warmTrackDisplayGeneric(self, trackId, type ? { ...displaySnapshot, type } : displaySnapshot, assembly);
             }
         });
     }, { name: 'LGVInitWarmup' }));

package/esm/LinearGenomeView/components/ImportForm.js

@@ -20,9 +20,8 @@ const useStyles = makeStyles()(theme => ({
 const LinearGenomeViewImportForm = observer(function LinearGenomeViewImportForm({ model, }) {
     const { classes } = useStyles();
     const session = getSession(model);
-    const { textSearchManager } = session;
     const { error: viewError } = model;
-    const { selectedAssemblyName: selectedAsm, setSelectedAssemblyName, assembly, assemblyError, regions, } = useAssemblySelection(session, 'lgv');
+    const { selectedAssemblyName: selectedAsm, setSelectedAssemblyName, assemblyError, regions, } = useAssemblySelection(session, 'lgv');
     const { recentLocations, addRecentLocation, clearRecentLocations } = useRecentLocations(selectedAsm);
     // The location the form will open, tagged with the assembly it was entered
     // for, and read back only while that tag still matches. Switching assembly
@@ -85,9 +84,8 @@ const LinearGenomeViewImportForm = observer(function LinearGenomeViewImportForm(
                                 model.setError(undefined);
                                 setSelectedAssemblyName(val);
                             }, session: session, selected: selectedAsm }), selectedAsm ? (assemblyError ? (_jsx(CloseIcon, { color: "error" })) : regions ? (_jsx(RefNameAutocomplete, { fetchResults: (queryString, signal) => fetchResults({
+                                session,
                                 queryString,
-                                assembly,
-                                textSearchManager,
                                 assemblyName: selectedAsm,
                                 signal,
                             }), session: session, assemblyName: selectedAsm, value: value, minWidth: 270, adornmentWidth: adornmentReservePx({

package/esm/LinearGenomeView/components/LinearGenomeViewContainer.js

@@ -99,10 +99,12 @@ const LinearGenomeViewContainer = observer(function LinearGenomeViewContainer({
                 // alone. At most one display can be under the pointer, so the first
                 // non-empty answer is the answer.
                 const hoverFeature = tracks
-                    .flatMap(t => t.displays)
+                    .flatMap((t) => t.displays)
                     .map(d => d.hoveredFeature)
                     .find(Boolean);
-                session.setHovered({ hoverPosition, hoverFeature });
+                // `viewId` lets a view paired with one linear view ignore another
+                // showing the same locus
+                session.setHovered({ hoverPosition, hoverFeature, viewId: model.id });
             }, children: [_jsx(NavigationAnnouncer, { model: model }), _jsxs("div", { ref: headerRef, "data-testid": `lgv-header-${model.id}`, className: classes.header, style: { position: stickyViewHeaders ? 'sticky' : undefined }, children: [_jsx(Header, { model: model }), hideHeader ? _jsx(MiniControls, { model: model }) : null] }), _jsx("div", { ref: tracksRef, children: model.scalebarOnly ? (_jsx(Rubberband, { model: model })) : (_jsx(TracksContainer, { model: model, children: !tracks.length ? (_jsx(NoTracksActiveButton, { model: model })) : (_jsxs(_Fragment, { children: [pinnedTracks.length ? (_jsx(Paper, { elevation: 2, "data-testid": "pinned-tracks", className: classes.pinnedTracks, style: {
                                         top: stickyTops.pinnedTracks,
                                         // the scroll port this sticks in, not the window: a

package/esm/LinearGenomeView/components/SearchBox.js

@@ -34,10 +34,8 @@ export function searchBoxWidth(value) {
 const SearchBox = observer(function SearchBox({ model, showHelp = true, minWidth = MIN_WIDTH, maxWidth = MAX_WIDTH, style = defaultStyle, }) {
     const palette = usePalette();
     const session = getSession(model);
-    const { textSearchManager, assemblyManager } = session;
     const { assemblyNames } = model;
     const assemblyName = assemblyNames[0];
-    const assembly = assemblyManager.get(assemblyName);
     const { recentLocations, addRecentLocation, clearRecentLocations } = useRecentLocations(assemblyName);
     async function navigate(option) {
         try {
@@ -57,13 +55,7 @@ const SearchBox = observer(function SearchBox({ model, showHelp = true, minWidth
     });
     return (_jsx(RefNameAutocomplete, { onSelect: option => {
             void navigate(option);
-        }, assemblyName: assemblyName, fetchResults: (queryString, signal) => fetchResults({
-            queryString,
-            assemblyName,
-            textSearchManager,
-            assembly,
-            signal,
-        }), session: session, value: model.coarseVisibleLocStrings, minWidth: minWidth, maxWidth: maxWidth, adornmentWidth: adornmentReservePx({
+        }, assemblyName: assemblyName, fetchResults: (queryString, signal) => fetchResults({ session, queryString, assemblyName, signal }), session: session, value: model.coarseVisibleLocStrings, minWidth: minWidth, maxWidth: maxWidth, adornmentWidth: adornmentReservePx({
             showHelp,
             menuItemCount: recentMenuItems.length,
         }), style: style, endAdornment: _jsx(RefNameAutocompleteEndAdornment, { showHelp: showHelp, menuItems: recentMenuItems }), inputStyle: {

package/esm/LinearGenomeView/components/SearchResultsDialog.js

@@ -5,6 +5,6 @@ import { observer } from 'mobx-react';
 import SearchResultsTable from './SearchResultsTable.js';
 const SearchResultsDialog = observer(function SearchResultsDialog({ model, }) {
     const { searchPicker } = model;
-    return searchPicker ? (_jsxs(InfoDialog, { open: true, maxWidth: "xl", onClose: model.closeSearchPicker, title: "Search results", children: [_jsxs(Typography, { children: ["Showing results for ", _jsx("b", { children: searchPicker.query })] }), _jsx(SearchResultsTable, { picker: searchPicker })] })) : null;
+    return searchPicker ? (_jsxs(InfoDialog, { open: true, maxWidth: "xl", onClose: model.closeSearchPicker, title: "Search results", children: [_jsxs(Typography, { children: [searchPicker.rows.length, " matches for ", _jsx("b", { children: searchPicker.query })] }), _jsx(SearchResultsTable, { picker: searchPicker })] })) : null;
 });
 export default SearchResultsDialog;

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

@@ -1,4 +1,5 @@
-import type { SearchPickerState } from '../model.ts';
+import type { SearchPickerRow, SearchPickerState } from '../model.ts';
+export declare function filterRows(rows: SearchPickerRow[], text: string): SearchPickerRow[];
 declare const SearchResultsTable: ({ picker, }: {
     picker: SearchPickerState;
 }) => import("react").JSX.Element;

package/esm/LinearGenomeView/components/SearchResultsTable.js

@@ -1,10 +1,28 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
 import { SanitizedHTML } from '@jbrowse/core/ui';
-import { Button, Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, } from '@mui/material';
+import { Button, Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TextField, } from '@mui/material';
 import { observer } from 'mobx-react';
+// past this many rows a list is easier to narrow than to read; gene names
+// sort too irregularly (scn1ab, HOXA10-AS) for an order to stand in for it
+const FILTER_AT = 8;
+export function filterRows(rows, text) {
+    const needle = text.trim().toLowerCase();
+    return needle
+        ? rows.filter(row => [row.label, row.location, row.trackName].some(field => field.toLowerCase().includes(needle)))
+        : rows;
+}
 const SearchResultsTable = observer(function SearchResultsTable({ picker, }) {
-    return (_jsx(TableContainer, { component: Paper, children: _jsxs(Table, { children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableCell, { children: "Name" }), _jsx(TableCell, { align: "right", children: "Location" }), _jsx(TableCell, { align: "right", children: "Track" }), _jsx(TableCell, { align: "right" })] }) }), _jsx(TableBody, { children: picker.rows.map(row => (_jsxs(TableRow, { children: [_jsx(TableCell, { component: "th", scope: "row", children: row.label }), _jsx(TableCell, { align: "right", children: row.location }), _jsx(TableCell, { align: "right", children: _jsx(SanitizedHTML, { html: row.trackName || 'N/A' }) }), _jsx(TableCell, { align: "right", children: _jsx(Button, { onClick: () => {
-                                        void picker.pick(row.id);
-                                    }, color: "primary", variant: "contained", children: "Go" }) })] }, row.id))) })] }) }));
+    const [filter, setFilter] = useState('');
+    const rows = filterRows(picker.rows, filter);
+    return (_jsxs(_Fragment, { children: [picker.rows.length > FILTER_AT ? (_jsx(TextField, { autoFocus: true, fullWidth: true, size: "small", margin: "dense", placeholder: "Filter by name, location or track", value: filter, onChange: event => {
+                    setFilter(event.target.value);
+                }, onKeyDown: event => {
+                    if (event.key === 'Enter' && rows.length === 1) {
+                        void picker.pick(rows[0].id);
+                    }
+                }, helperText: filter ? `${rows.length} of ${picker.rows.length}` : undefined })) : null, _jsx(TableContainer, { component: Paper, children: _jsxs(Table, { children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableCell, { children: "Name" }), _jsx(TableCell, { align: "right", children: "Location" }), _jsx(TableCell, { align: "right", children: "Track" }), _jsx(TableCell, { align: "right" })] }) }), _jsx(TableBody, { children: rows.map(row => (_jsxs(TableRow, { children: [_jsx(TableCell, { component: "th", scope: "row", children: row.label }), _jsx(TableCell, { align: "right", children: row.location }), _jsx(TableCell, { align: "right", children: _jsx(SanitizedHTML, { html: row.trackName || 'N/A' }) }), _jsx(TableCell, { align: "right", children: _jsx(Button, { onClick: () => {
+                                                void picker.pick(row.id);
+                                            }, color: "primary", variant: "contained", children: "Go" }) })] }, row.id))) })] }) })] }));
 });
 export default SearchResultsTable;

package/esm/LinearGenomeView/components/SequenceFeatureHoverHighlight.js

@@ -15,8 +15,7 @@ function isFeatureWidgetForView(w, viewId) {
 // is owned by the display rather than by a widget — so the view's own displays
 // publish hover positions too.
 function displayHoverPosition(display) {
-    const candidate = display;
-    return candidate?.sequenceHoverPosition;
+    return display.sequenceHoverPosition;
 }
 // Draws a crosshair on the LGV at the base a connected feature-detail sequence
 // panel is hovering, so mousing over the sequence readout points at the genome.
@@ -24,7 +23,7 @@ const SequenceFeatureHoverHighlight = observer(function SequenceFeatureHoverHigh
     return (_jsxs(_Fragment, { children: [_jsx(ConnectedHoverHighlight, { model: model, getPosition: (widget, viewId) => isFeatureWidgetForView(widget, viewId)
                     ? widget.sequenceHoverPosition
                     : undefined }), model.tracks
-                .flatMap(track => track.displays)
+                .flatMap((track) => track.displays)
                 .flatMap(display => {
                 const position = displayHoverPosition(display);
                 return position

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

@@ -1,8 +1,7 @@
-import type { LinearGenomeViewModel } from '../index.ts';
-import type { BaseTrackModel } from '@jbrowse/core/pluggableElementTypes/models';
+import type { LinearGenomeViewModel, LinearGenomeViewTrack } from '../index.ts';
 type LGV = LinearGenomeViewModel;
 declare const TrackContainer: ({ model, track, }: {
     model: LGV;
-    track: BaseTrackModel;
+    track: LinearGenomeViewTrack;
 }) => import("react").JSX.Element;
 export default TrackContainer;

package/esm/LinearGenomeView/components/TrackContainer.js

@@ -111,9 +111,8 @@ function useTrackLabelBand(model, trackId) {
 }
 const TrackContainer = observer(function TrackContainer({ model, track, }) {
     const { classes } = useStyles();
-    // an LGV track always holds at least one linear display (activeDisplay =
-    // displays[0]). The one narrowing to the linear shape, handed down rather
-    // than repeated, so a track's chrome and its body can't read two displays.
+    // read once and handed down, so a track's chrome and its body can't read two
+    // displays
     const display = track.activeDisplay;
     const { showTrackOutlines } = model;
     // The Paper's 1px border, present iff outlines are on. Everything laid out in
@@ -135,7 +134,7 @@ const TrackContainer = observer(function TrackContainer({ model, track, }) {
     const { setPaper, setContainer } = useTrackLabelBand(model, track.trackId);
     return (_jsxs(Paper, { ref: setPaper, className: cx(classes.root, track.pinned ? null : classes.unpinnedTrack), variant: showTrackOutlines ? 'outlined' : undefined, elevation: showTrackOutlines ? undefined : 0, onDragOver: event => {
             model.onTrackDragOver(track.id, event.clientY);
-        }, children: [track.pinned ? _jsx(Gridlines, { model: model, offset: outlineOffset }) : null, model.effectiveTrackLabels !== 'hidden' ? (_jsx(TrackLabel, { track: track, className: trackLabelStyle })) : null, _jsx(TrackOverlaySlot, { zIndex: 100, overlayStyle: { left: -outlineOffset }, children: _jsx(ErrorBoundary, { FallbackComponent: e => (_jsx("div", { className: classes.crashBanner, "data-gesture-owner": "true", children: _jsx(ErrorBanner, { error: e.error, onReset: e.resetErrorBoundary }) })), children: _jsx(TrackRenderingContainer, { model: model, track: track, display: display, ref: setContainer }) }, display.id) }), _jsx(PaddingBlocks, { model: model, offset: outlineOffset }), _jsx(ResizeHandle, { style: { height: RESIZE_HANDLE_HEIGHT }, onDrag: distance => display.resizeHeight(distance), 
+        }, children: [track.pinned ? _jsx(Gridlines, { model: model, offset: outlineOffset }) : null, model.effectiveTrackLabels !== 'hidden' ? (_jsx(TrackLabel, { track: track, className: trackLabelStyle })) : null, _jsx(TrackOverlaySlot, { zIndex: 100, overlayStyle: { left: -outlineOffset }, labelBand: model.trackLabelBand(track), children: _jsx(ErrorBoundary, { FallbackComponent: e => (_jsx("div", { className: classes.crashBanner, "data-gesture-owner": "true", children: _jsx(ErrorBanner, { error: e.error, onReset: e.resetErrorBoundary }) })), children: _jsx(TrackRenderingContainer, { model: model, track: track, display: display, ref: setContainer }) }, display.id) }), _jsx(PaddingBlocks, { model: model, offset: outlineOffset }), _jsx(ResizeHandle, { style: { height: RESIZE_HANDLE_HEIGHT }, onDrag: distance => display.resizeHeight(distance), 
                 // the drag's shortcut: grow the track by whatever it is scrolled over,
                 // so a pileup showing three rows of forty opens to all forty
                 // Optional: only a display that scrolls its own content has anything

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

@@ -1,9 +1,8 @@
 import type { BaseTrackModel } from '@jbrowse/core/pluggableElementTypes/models';
 /**
- * The track label's warning for a file whose reference names have nothing in
- * common with the assembly's — the commonest data-configuration mistake in
- * JBrowse, and until now a silent one: the track draws nothing and reads
- * exactly like a track with no features in view.
+ * The track label's warning for a file that does not fit its assembly: its
+ * reference names have nothing in common with the assembly's, so the track
+ * draws nothing, or its contig lengths say it was made against another build.
  *
  * The label rather than the display chrome, deliberately. The chrome's states
  * are `displayPhase`'s, which are mutually exclusive and two of which replace

package/esm/LinearGenomeView/components/TrackLabelRefNameWarning.js

@@ -1,6 +1,6 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
-import { refNameMismatchMessage } from '@jbrowse/core/assemblyManager/assembly';
+import { contigLengthMismatchMessage, refNameMismatchMessage, } from '@jbrowse/core/assemblyManager/assembly';
 import { InfoDialog } from '@jbrowse/core/ui';
 import { makeStyles } from '@jbrowse/core/util/tss-react';
 import WarningIcon from '@mui/icons-material/Warning';
@@ -12,11 +12,24 @@ const useStyles = makeStyles()(theme => ({
         color: theme.palette.warning.main,
     },
 }));
+function warningFor(track) {
+    const { refNameMismatch, contigLengthMismatch } = track;
+    return refNameMismatch
+        ? {
+            title: 'Reference names do not match the assembly',
+            message: refNameMismatchMessage(refNameMismatch),
+        }
+        : contigLengthMismatch
+            ? {
+                title: 'Reference sequence lengths do not match the assembly',
+                message: contigLengthMismatchMessage(contigLengthMismatch),
+            }
+            : undefined;
+}
 /**
- * The track label's warning for a file whose reference names have nothing in
- * common with the assembly's — the commonest data-configuration mistake in
- * JBrowse, and until now a silent one: the track draws nothing and reads
- * exactly like a track with no features in view.
+ * The track label's warning for a file that does not fit its assembly: its
+ * reference names have nothing in common with the assembly's, so the track
+ * draws nothing, or its contig lengths say it was made against another build.
  *
  * The label rather than the display chrome, deliberately. The chrome's states
  * are `displayPhase`'s, which are mutually exclusive and two of which replace
@@ -32,15 +45,15 @@ const useStyles = makeStyles()(theme => ({
 const TrackLabelRefNameWarning = observer(function TrackLabelRefNameWarning({ track, }) {
     const { classes } = useStyles();
     const [open, setOpen] = useState(false);
-    const { refNameMismatch } = track;
-    if (!refNameMismatch) {
+    const warning = warningFor(track);
+    if (!warning) {
         return null;
     }
-    const message = refNameMismatchMessage(refNameMismatch);
+    const { title, message } = warning;
     return (_jsxs(_Fragment, { children: [_jsx(IconButton, { onClick: () => {
                     setOpen(true);
-                }, className: classes.iconButton, title: message, "data-testid": `track-refname-warning-${track.trackId}`, children: _jsx(WarningIcon, { fontSize: "small" }) }), open ? (_jsxs(InfoDialog, { open: true, title: "Reference names do not match the assembly", onClose: () => {
+                }, className: classes.iconButton, title: message, "data-testid": `track-refname-warning-${track.trackId}`, children: _jsx(WarningIcon, { fontSize: "small" }) }), open ? (_jsxs(InfoDialog, { open: true, title: title, onClose: () => {
                     setOpen(false);
-                }, children: [_jsx(Typography, { children: message }), _jsx(Typography, { variant: "body2", style: { marginTop: 8 }, children: "The track menu's \"About track\" shows every reference name the file uses." })] })) : null] }));
+                }, children: [_jsx(Typography, { children: message }), _jsx(Typography, { variant: "body2", style: { marginTop: 8 }, children: "The track menu's \"About track\" shows every reference name the file uses, with the lengths it states." })] })) : null] }));
 });
 export default TrackLabelRefNameWarning;

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

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

package/esm/LinearGenomeView/components/TrackRenderingContainer.js

@@ -18,7 +18,7 @@ const useStyles = makeStyles()({
         width: '100%',
     },
     // Tracks never scroll natively on this outer container — every display owns
-    // its own vertical scroll: canvas displays scroll an inner sticky-canvas
+    // its own vertical scroll: feature displays scroll an inner sticky-canvas
     // container (FeatureComponent), while alignments and variants draw a custom
     // VerticalScrollbar overlay and redraw the canvas at `scrollTop`. A native
     // scroll port here only produced a *second*, spurious scrollbar whenever a

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

@@ -22,7 +22,7 @@ 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.
- * A caller spreading the rows into a "Show..." submenu passes `'Search boxes'`
+ * A caller spreading the rows into a "Show" submenu passes `'Search boxes'`
  * as the toggle's label.
  */
 export declare function searchBoxMenuItems({ showSearchBoxes, setShowSearchBoxes, sideBySide, setSideBySide, }: SearchBoxPrefs, toggleLabel?: string): MenuItem[];

package/esm/LinearGenomeView/components/useSearchBoxPrefs.js

@@ -22,7 +22,7 @@ export function useSearchBoxPrefs(prefix, numViews) {
 /**
  * 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.
- * A caller spreading the rows into a "Show..." submenu passes `'Search boxes'`
+ * A caller spreading the rows into a "Show" submenu passes `'Search boxes'`
  * as the toggle's label.
  */
 export function searchBoxMenuItems({ showSearchBoxes, setShowSearchBoxes, sideBySide, setSideBySide, }, toggleLabel = 'Show search boxes') {

package/esm/LinearGenomeView/index.d.ts

@@ -25,6 +25,6 @@ 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 { LinearGenomeViewModel, LinearGenomeViewStateModel, LinearGenomeViewTrack, } from './model.ts';
 export { installLinkedViewSync } from './linkedViewSync.ts';
 export { default as HighlightChip } from './components/HighlightChip.tsx';

package/esm/LinearGenomeView/index.js

@@ -1,5 +1,6 @@
 import { ViewType } from '@jbrowse/core/pluggableElementTypes';
 import { lazyWithPreload } from '@jbrowse/core/util/lazyWithPreload';
+import { lgvKeyboardShortcuts } from './keyboardHandler.js';
 import { lgvLaunchKeys } from './launchKeys.js';
 import { stateModelFactory } from './model.js';
 export default function LinearGenomeViewF(pluginManager) {
@@ -13,6 +14,7 @@ export default function LinearGenomeViewF(pluginManager) {
             displayName: 'Linear genome view',
             stateModel,
             launchKeys: lgvLaunchKeys,
+            keyboardShortcuts: lgvKeyboardShortcuts,
             ReactComponent: lazyWithPreload(() => import('./components/LinearGenomeView.js')),
         });
     });

package/esm/LinearGenomeView/keyboardHandler.d.ts

@@ -1,11 +1,10 @@
 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
- */
+import type { KeyboardShortcut } from '@jbrowse/core/pluggableElementTypes';
+interface LgvShortcut extends KeyboardShortcut {
+    code: string;
+    shift?: boolean;
+    run: (self: LinearGenomeViewModel) => void;
+}
+export declare const lgvKeyboardShortcuts: readonly LgvShortcut[];
 export declare function setupKeyboardHandler(self: LinearGenomeViewModel): void;
+export {};

package/esm/LinearGenomeView/keyboardHandler.js

@@ -1,48 +1,72 @@
 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
- */
+// every entry also needs Ctrl or Cmd; an arrow fires with or without Shift
+export const lgvKeyboardShortcuts = [
+    {
+        keys: 'Ctrl/Cmd + ←',
+        description: 'Pan left',
+        code: 'ArrowLeft',
+        run: self => {
+            self.slide(-0.9);
+        },
+    },
+    {
+        keys: 'Ctrl/Cmd + →',
+        description: 'Pan right',
+        code: 'ArrowRight',
+        run: self => {
+            self.slide(0.9);
+        },
+    },
+    {
+        keys: 'Ctrl/Cmd + ↑',
+        description: 'Zoom in',
+        code: 'ArrowUp',
+        run: self => {
+            self.zoom(self.bpPerPx / 2);
+        },
+    },
+    {
+        keys: 'Ctrl/Cmd + ↓',
+        description: 'Zoom out',
+        code: 'ArrowDown',
+        run: self => {
+            self.zoom(self.bpPerPx * 2);
+        },
+    },
+    {
+        keys: 'Ctrl/Cmd + Shift + D',
+        description: 'Highlight the region in view',
+        code: 'KeyD',
+        shift: true,
+        run: self => {
+            self.highlightCurrentRegion();
+            getSession(self).notify('Region highlighted.', 'success');
+        },
+    },
+    {
+        keys: 'Ctrl/Cmd + Shift + M',
+        description: 'Go to the newest highlight',
+        code: 'KeyM',
+        shift: true,
+        run: self => {
+            void self.navigateNewestHighlight();
+        },
+    },
+];
 export function setupKeyboardHandler(self) {
     if (typeof document === 'undefined') {
         return;
     }
     function handler(e) {
-        const session = getSession(self);
-        if (session.focusedViewId === self.id &&
+        if (getSession(self).focusedViewId === self.id &&
             (e.ctrlKey || e.metaKey) &&
             !isTextEntryFocused()) {
-            if (e.code === 'ArrowLeft') {
+            const shortcut = lgvKeyboardShortcuts.find(s => s.code === e.code && (!s.shift || e.shiftKey));
+            if (shortcut) {
                 e.preventDefault();
-                self.slide(-0.9);
-            }
-            else if (e.code === 'ArrowRight') {
-                e.preventDefault();
-                self.slide(0.9);
-            }
-            else if (e.code === 'ArrowUp') {
-                e.preventDefault();
-                self.zoom(self.bpPerPx / 2);
-            }
-            else if (e.code === 'ArrowDown') {
-                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();
+                shortcut.run(self);
             }
         }
     }

package/esm/LinearGenomeView/menuItems.js

@@ -1,7 +1,7 @@
 import { Highlighter, TrackSelector as TrackSelectorIcon, } from '@jbrowse/core/ui/Icons';
-import { radioItems, subMenuIfAny } from '@jbrowse/core/ui/menuItems';
+import { highlightListMenuItems, radioItems, subMenuIfAny, } from '@jbrowse/core/ui/menuItems';
 import { makeShowSubMenu } from '@jbrowse/core/ui/showSubMenu';
-import { assembleLocStrings, getDialogHost, getSession, isSessionWithAddSessionTrack, toLocale, } from '@jbrowse/core/util';
+import { assembleLocStrings, getDialogHost, getEnv, getSession, isSessionWithAddSessionTrack, toLocale, } from '@jbrowse/core/util';
 import { basePaintedAt, computeMoveToLayout, } from '@jbrowse/core/util/Base1DUtils';
 import { copyText } from '@jbrowse/core/util/copyText';
 import { renameIds } from '@jbrowse/core/util/types/mst';
@@ -78,6 +78,7 @@ export function buildHighlightsSubMenuItems(self) {
                 session.setHighlightLabelsVisible(!session.highlightLabelsVisible);
             },
         },
+        ...highlightListMenuItems(session, getEnv(self).pluginManager),
     ];
 }
 /**