@jbrowse/plugin-linear-genome-view 5.0.0-beta.13 → 5.0.0-beta.16

package/esm/FeatureTrack/configSchema.d.ts

@@ -2,7 +2,8 @@ import type PluginManager from '@jbrowse/core/PluginManager';
 /**
  * #config FeatureTrack
  * #category track
- * used for basic gene and feature tracks, generally used with LinearBasicDisplay
+ * Holds gene and other feature annotations, such as a GFF3 or BED file, which
+ * `LinearBasicDisplay` usually draws.
  *
  * #example
  * A minimal hand-authored entry in the top-level `tracks` array — `adapter`

package/esm/FeatureTrack/configSchema.js

@@ -3,7 +3,8 @@ import { createBaseTrackConfig } from '@jbrowse/core/pluggableElementTypes';
 /**
  * #config FeatureTrack
  * #category track
- * used for basic gene and feature tracks, generally used with LinearBasicDisplay
+ * Holds gene and other feature annotations, such as a GFF3 or BED file, which
+ * `LinearBasicDisplay` usually draws.
  *
  * #example
  * A minimal hand-authored entry in the top-level `tracks` array — `adapter`

package/esm/LinearGenomeView/afterAttach.js

@@ -1,4 +1,4 @@
-import { getSession, isSessionModelWithWidgets, localStorageSetItem, resolveNamedRegions, } from '@jbrowse/core/util';
+import { getSession, isSessionModelWithWidgets, resolveNamedRegions, } from '@jbrowse/core/util';
 import { coerceHighlight } from '@jbrowse/core/util/highlights';
 import { installInitAutorun } from '@jbrowse/core/util/installInitAutorun';
 import { normalizeTrackInit, warmTrackDisplayGeneric, } from '@jbrowse/core/util/tracks';
@@ -258,27 +258,6 @@ function setupCoarseDynamicBlocksAutorun(self) {
         name: 'LGVCoarseDynamicBlocks',
     }));
 }
-/**
- * Autorun that syncs view settings to localStorage
- */
-function setupLocalStorageAutorun(self) {
-    addDisposer(self, autorun(function localStorageAutorun() {
-        const s = (s) => JSON.stringify(s);
-        const { showCytobands, showCenterLine, colorByCDS, showAminoAcids, showTrackOutlines, trackLabels, } = self;
-        localStorageSetItem('lgv-showCytobands', s(showCytobands));
-        localStorageSetItem('lgv-showCenterLine', s(showCenterLine));
-        localStorageSetItem('lgv-colorByCDS', s(colorByCDS));
-        localStorageSetItem('lgv-showAminoAcids', s(showAminoAcids));
-        localStorageSetItem('lgv-showTrackOutlines', s(showTrackOutlines));
-        // skip writing the empty default — otherwise reads later round-trip to
-        // '' instead of null, hiding the config-fallback path
-        if (trackLabels) {
-            localStorageSetItem('lgv-trackLabels', trackLabels);
-        }
-    }, {
-        name: 'LGVLocalStorage',
-    }));
-}
 /**
  * Sets up all afterAttach autoruns for the LinearGenomeView
  */
@@ -286,5 +265,4 @@ export function doAfterAttach(self) {
     setupInitWarmup(self);
     setupInitAutorun(self);
     setupCoarseDynamicBlocksAutorun(self);
-    setupLocalStorageAutorun(self);
 }

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

@@ -1,12 +1,16 @@
 import type { TrackLabelMode, ViewTrackLabelMode } from '../types.ts';
 import type { BaseExportSvgOptions } from '@jbrowse/core/ui';
-export default function ExportSvgDialog({ model, handleClose, }: {
+declare const ExportSvgDialog: ({ model, handleClose, chooseWidth, }: {
     model: {
+        width?: number;
         effectiveTrackLabels?: ViewTrackLabelMode;
         exportSvg(opts: BaseExportSvgOptions & {
             trackLabels: TrackLabelMode;
             showGridlines: boolean;
+            viewWidth?: number;
         }): Promise<unknown>;
     };
     handleClose: () => void;
-}): import("react").JSX.Element;
+    chooseWidth?: boolean;
+}) => import("react").JSX.Element;
+export default ExportSvgDialog;

package/esm/LinearGenomeView/components/ExportSvgDialog.js

@@ -1,18 +1,42 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
 import { BaseExportSvgDialog, LabeledCheckbox, useExportSvgPreference, } from '@jbrowse/core/ui';
 import { MenuItem, TextField } from '@mui/material';
+import { observer } from 'mobx-react';
+const MIN_WIDTH = 100;
+const MAX_WIDTH = 10000;
 // Shared track-label + gridlines export dialog. Used by LGV, linear-synteny and
-// breakpoint-split views (their lazyDialogs re-export this).
-export default function ExportSvgDialog({ model, handleClose, }) {
+// breakpoint-split views (their lazyDialogs re-export this). Only a caller
+// passing `chooseWidth` offers the width field, whose model lays itself out at
+// `viewWidth`.
+const ExportSvgDialog = observer(function ExportSvgDialog({ model, handleClose, chooseWidth, }) {
     // The view's own setting is already an export mode, so a user who has not
     // picked one here gets the figure their screen shows. The key is `-mode`
     // because the modes were once spelled `overlay`/`none`, and a stored one of
     // those would select nothing in the dropdown.
     const [trackLabels, setTrackLabels] = useExportSvgPreference('tracklabels-mode', model.effectiveTrackLabels ?? 'offset');
     const [showGridlines, setShowGridlines] = useExportSvgPreference('gridlines', false);
-    return (_jsx(BaseExportSvgDialog, { model: model, handleClose: handleClose, exportSvg: opts => model.exportSvg({ ...opts, trackLabels, showGridlines }), checkboxes: _jsx(LabeledCheckbox, { checked: showGridlines, onChange: val => {
+    // not a stored preference: a remembered width would drift from the screen's
+    const [widthText, setWidthText] = useState(() => String(Math.round(model.width ?? 0)));
+    const typedWidth = Number(widthText);
+    const widthValid = Number.isInteger(typedWidth) &&
+        typedWidth >= MIN_WIDTH &&
+        typedWidth <= MAX_WIDTH;
+    return (_jsxs(BaseExportSvgDialog, { model: model, handleClose: handleClose, exportSvg: opts => model.exportSvg({
+            ...opts,
+            trackLabels,
+            showGridlines,
+            viewWidth: chooseWidth && widthValid ? typedWidth : undefined,
+        }), checkboxes: _jsx(LabeledCheckbox, { checked: showGridlines, onChange: val => {
                 setShowGridlines(val);
-            }, label: "Show gridlines" }), children: _jsxs(TextField, { select: true, label: "Track label positioning", variant: "outlined", style: { minWidth: 200 }, value: trackLabels, onChange: event => {
-                setTrackLabels(event.target.value);
-            }, children: [_jsx(MenuItem, { value: "offset", children: "Offset" }), _jsx(MenuItem, { value: "overlapping", children: "Overlapping" }), _jsx(MenuItem, { value: "left", children: "Left" }), _jsx(MenuItem, { value: "hidden", children: "Hidden" })] }) }));
-}
+            }, label: "Show gridlines" }), children: [_jsxs(TextField, { select: true, label: "Track label positioning", variant: "outlined", style: { minWidth: 200 }, value: trackLabels, onChange: event => {
+                    setTrackLabels(event.target.value);
+                }, children: [_jsx(MenuItem, { value: "offset", children: "Offset" }), _jsx(MenuItem, { value: "overlapping", children: "Overlapping" }), _jsx(MenuItem, { value: "left", children: "Left" }), _jsx(MenuItem, { value: "hidden", children: "Hidden" })] }), chooseWidth ? (_jsx(TextField, { label: "Width (px)", variant: "outlined", type: "number", value: widthText, error: !widthValid, helperText: widthValid
+                    ? 'Lays the tracks out as a window this wide would; text keeps its size'
+                    : `A whole number from ${MIN_WIDTH} to ${MAX_WIDTH}`, slotProps: {
+                    htmlInput: { min: MIN_WIDTH, max: MAX_WIDTH, step: 1 },
+                }, onChange: event => {
+                    setWidthText(event.target.value);
+                } })) : null] }));
+});
+export default ExportSvgDialog;

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

@@ -1,7 +1,7 @@
 import type { LinearGenomeViewModel } from '../index.ts';
 type LGV = LinearGenomeViewModel;
-export default function HeaderPanControls({ model, compact, }: {
+declare const HeaderPanControls: ({ model, compact, }: {
     model: LGV;
     compact?: boolean;
-}): import("react").JSX.Element;
-export {};
+}) => import("react").JSX.Element;
+export default HeaderPanControls;

package/esm/LinearGenomeView/components/HeaderPanControls.js

@@ -4,6 +4,7 @@ import { makeStyles } from '@jbrowse/core/util/tss-react';
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
 import { Button } from '@mui/material';
+import { observer } from 'mobx-react';
 import { SPACING, WIDGET_HEIGHT } from '../consts.js';
 const useStyles = makeStyles()(theme => ({
     panButton: {
@@ -20,7 +21,7 @@ const useStyles = makeStyles()(theme => ({
         padding: theme.spacing(0, 0.5),
     },
 }));
-export default function HeaderPanControls({ model, compact, }) {
+const HeaderPanControls = observer(function HeaderPanControls({ model, compact, }) {
     const { classes, cx } = useStyles();
     const className = cx(classes.panButton, compact && classes.compact);
     return (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "outlined", "aria-label": "Pan left", className: className, onClick: () => {
@@ -28,4 +29,5 @@ export default function HeaderPanControls({ model, compact, }) {
                 }, children: _jsx(ArrowBackIcon, {}) }), _jsx(Button, { variant: "outlined", "aria-label": "Pan right", className: className, onClick: () => {
                     model.slide(0.9);
                 }, children: _jsx(ArrowForwardIcon, {}) })] }));
-}
+});
+export default HeaderPanControls;

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

@@ -2,7 +2,7 @@ export declare function gapMask(gaps: {
     top: number;
     height: number;
 }[]): string;
-export default function HighlightBand({ coords, background, label, gaps, children, }: {
+declare const HighlightBand: ({ coords, background, label, gaps, children, }: {
     coords: {
         left: number;
         width: number;
@@ -14,4 +14,5 @@ export default function HighlightBand({ coords, background, label, gaps, childre
         height: number;
     }[];
     children?: React.ReactNode;
-}): import("react").JSX.Element;
+}) => import("react").JSX.Element;
+export default HighlightBand;

package/esm/LinearGenomeView/components/HighlightBand.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { makeStyles } from '@jbrowse/core/util/tss-react';
 import { Typography } from '@mui/material';
+import { observer } from 'mobx-react';
 const useStyles = makeStyles()(theme => ({
     highlight: {
         height: '100%',
@@ -37,7 +38,7 @@ export function gapMask(gaps) {
 // colored band with an
 // optional top label; when `children` (the highlight chip) is passed it renders
 // that instead of the plain label. Visibility is toggled from the view menu
-export default function HighlightBand({ coords, background, label, gaps, children, }) {
+const HighlightBand = observer(function HighlightBand({ coords, background, label, gaps, children, }) {
     const { classes } = useStyles();
     const content = children ??
         (label ? (_jsx(Typography, { variant: "caption", className: classes.label, noWrap: true, children: label })) : null);
@@ -49,4 +50,5 @@ export default function HighlightBand({ coords, background, label, gaps, childre
                 ? { maskImage: gapMask(gaps), WebkitMaskImage: gapMask(gaps) }
                 : undefined),
         }, children: coords.width > 3 && content ? (_jsx("div", { className: classes.overlay, children: content })) : null }));
-}
+});
+export default HighlightBand;

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

@@ -1,8 +1,9 @@
 import type { MenuItem } from '@jbrowse/core/ui';
 import type { Colord } from '@jbrowse/core/util/colord';
-export default function HighlightChip({ color, label, tooltip, menuItems, }: {
+declare const HighlightChip: ({ color, label, tooltip, menuItems, }: {
     color: Colord;
     label?: string;
     tooltip?: string;
     menuItems: MenuItem[];
-}): import("react").JSX.Element;
+}) => import("react").JSX.Element;
+export default HighlightChip;

package/esm/LinearGenomeView/components/HighlightChip.js

@@ -2,12 +2,14 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton';
 import LinkIcon from '@mui/icons-material/Link';
 import { Box, Tooltip, Typography } from '@mui/material';
+import { observer } from 'mobx-react';
 // Interactive chip drawn inside a highlight band: a link icon tinted to the
 // band color plus an optional inline label, wrapped in a context menu. Sets its
 // own pointer-events since the band is click-through.
-export default function HighlightChip({ color, label, tooltip, menuItems, }) {
+const HighlightChip = observer(function HighlightChip({ color, label, tooltip, menuItems, }) {
     // hide the icon color when the band is fully transparent ("label-only"
     // highlight); otherwise bump to 0.8 alpha so the chip stays legible
     const chipAlpha = color.alpha() === 0 ? 0 : 0.8;
     return (_jsx(Box, { sx: { pointerEvents: 'auto' }, children: _jsx(CascadingMenuButton, { "data-testid": "highlight-chip", menuItems: menuItems, children: _jsx(Tooltip, { title: tooltip, arrow: true, children: _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 0.5 }, children: [_jsx(LinkIcon, { fontSize: "small", sx: { color: color.alpha(chipAlpha).toRgbString() } }), label ? (_jsx(Typography, { variant: "caption", noWrap: true, children: label })) : null] }) }) }) }));
-}
+});
+export default HighlightChip;

package/esm/LinearGenomeView/components/LinearGenomeView.js

@@ -1,20 +1,13 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { lazy } from 'react';
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Suspense, lazy } from 'react';
 import { ViewLoadingScreen } from '@jbrowse/core/ui';
 import { observer } from 'mobx-react';
 import LinearGenomeViewContainer from './LinearGenomeViewContainer.js';
 // lazies
 const ImportForm = lazy(() => import('./ImportForm.js'));
+const SearchResultsDialog = lazy(() => import('./SearchResultsDialog.js'));
 const LinearGenomeView = observer(function LinearGenomeView({ model, }) {
-    const { loading, showImportForm } = model;
-    if (loading) {
-        return _jsx(ViewLoadingScreen, { ...loading });
-    }
-    else if (showImportForm) {
-        return _jsx(ImportForm, { model: model });
-    }
-    else {
-        return _jsx(LinearGenomeViewContainer, { model: model });
-    }
+    const { loading, showImportForm, searchPicker } = model;
+    return (_jsxs(_Fragment, { children: [loading ? (_jsx(ViewLoadingScreen, { ...loading })) : showImportForm ? (_jsx(ImportForm, { model: model })) : (_jsx(LinearGenomeViewContainer, { model: model })), searchPicker ? (_jsx(Suspense, { fallback: null, children: _jsx(SearchResultsDialog, { model: model }) })) : null] }));
 });
 export default LinearGenomeView;

package/esm/LinearGenomeView/components/LinearGenomeViewContainer.js

@@ -105,11 +105,10 @@ const LinearGenomeViewContainer = observer(function LinearGenomeViewContainer({
                 session.setHovered({ hoverPosition, hoverFeature });
             }, 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: it is
-                                        // under the app bar in the classic stack, a dockview
-                                        // cell in a workspace, and the host's box when embedded.
-                                        // The fallback is what an unbounded embed gets, where
-                                        // the page itself is the scroller
+                                        // the scroll port this sticks in, not the window: a
+                                        // workspace cell, or the host's box when embedded. The
+                                        // fallback is what an unbounded embed gets, where the
+                                        // page itself is the scroller
                                         maxHeight: `calc(var(${SCROLL_PORT_HEIGHT_VAR}, 100vh) - ${stickyTops.pinnedTracks})`,
                                     }, children: pinnedTracks.map(track => (_jsx(TrackContainer, { model: model, track: track }, track.id))) })) : null, unpinnedTracks.map(track => (_jsx(TrackContainer, { model: model, track: track }, track.id))), _jsx(ResizeAllTracksHandle, { model: model })] })) })) })] }) }));
 });

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

@@ -1,4 +1,4 @@
-export default function OverviewHighlightBand({ coords, background, borderColor, tooltip, }: {
+declare const OverviewHighlightBand: ({ coords, background, borderColor, tooltip, }: {
     coords: {
         left: number;
         width: number;
@@ -6,4 +6,5 @@ export default function OverviewHighlightBand({ coords, background, borderColor,
     background: string;
     borderColor?: string;
     tooltip?: string;
-}): import("react").JSX.Element;
+}) => import("react").JSX.Element;
+export default OverviewHighlightBand;

package/esm/LinearGenomeView/components/OverviewHighlightBand.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { makeStyles } from '@jbrowse/core/util/tss-react';
 import { Tooltip } from '@mui/material';
+import { observer } from 'mobx-react';
 // A single absolute-positioned band over the overview scalebar. The 1px border
 // keeps very narrow bands visible.
 const useStyles = makeStyles()({
@@ -10,7 +11,7 @@ const useStyles = makeStyles()({
         left: 0,
     },
 });
-export default function OverviewHighlightBand({ coords, background, borderColor, tooltip, }) {
+const OverviewHighlightBand = observer(function OverviewHighlightBand({ coords, background, borderColor, tooltip, }) {
     const { classes } = useStyles();
     const band = (_jsx("div", { className: classes.highlight, style: {
             transform: `translateX(${coords.left}px)`,
@@ -22,4 +23,5 @@ export default function OverviewHighlightBand({ coords, background, borderColor,
             }),
         } }));
     return tooltip ? (_jsx(Tooltip, { title: tooltip, arrow: true, children: band })) : (band);
-}
+});
+export default OverviewHighlightBand;

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

@@ -1,5 +1,6 @@
 import type { LinearGenomeViewModel } from '../model.ts';
-export default function RegionWidthEditorDialog({ model, handleClose, }: {
+declare const RegionWidthEditorDialog: ({ model, handleClose, }: {
     model: LinearGenomeViewModel;
     handleClose: () => void;
-}): import("react").JSX.Element;
+}) => import("react").JSX.Element;
+export default RegionWidthEditorDialog;

package/esm/LinearGenomeView/components/RegionWidthEditorDialog.js

@@ -3,12 +3,11 @@ import { useState } from 'react';
 import { SubmitDialog } from '@jbrowse/core/ui';
 import { parseBpString, toLocale } from '@jbrowse/core/util';
 import { TextField, Typography } from '@mui/material';
+import { observer } from 'mobx-react';
 function format(n) {
     return toLocale(Math.floor(n));
 }
-// not an observer: the initial value is seeded once and the field is
-// user-edited thereafter, so it shouldn't reactively reset if bpPerPx changes
-export default function RegionWidthEditorDialog({ model, handleClose, }) {
+const RegionWidthEditorDialog = observer(function RegionWidthEditorDialog({ model, handleClose, }) {
     const [val, setVal] = useState(() => format(model.bpPerPx * model.width));
     const bp = parseBpString(val);
     const valid = bp !== undefined && bp > 0;
@@ -20,4 +19,5 @@ export default function RegionWidthEditorDialog({ model, handleClose, }) {
         }, children: _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 30 }, children: [_jsx(Typography, { children: "Enter a specific number of base pairs to change the viewport to show, either in full or abbreviated as e.g. 500kb or 1.5Mbp. This is approximate and does not account for padding between regions or off-screen scrolling" }), _jsx(TextField, { label: "Zoom level (bp)", autoFocus: true, fullWidth: true, variant: "outlined", value: val, onChange: event => {
                         setVal(event.target.value);
                     } })] }) }));
-}
+});
+export default RegionWidthEditorDialog;

package/esm/LinearGenomeView/components/ScalebarRefNameLabels.js

@@ -54,9 +54,9 @@ const ScalebarRefNameLabels = observer(function ScalebarRefNameLabels({ model, }
                     setMenuState(undefined);
                 } })) : null] }));
 });
-// Not an observer: `label` is plain data from the parent. The attribute tells
-// the scalebar's rubberband to leave a click here to this label's onClick.
-function RefLabel({ model, label, onOpenMenu, }) {
+// The attribute tells the scalebar's rubberband to leave a click here to this
+// label's onClick.
+const RefLabel = observer(function RefLabel({ model, label, onOpenMenu, }) {
     const { classes, cx } = useStyles();
     const { refName, transform, maxWidth, paddingLeft, text } = label;
     return (_jsx("span", { className: cx(classes.refLabel, classes.clickable), style: {
@@ -67,7 +67,7 @@ function RefLabel({ model, label, onOpenMenu, }) {
             model.setIsScalebarRefNameMenuOpen(true);
             onOpenMenu({ anchorEl: e.currentTarget, label });
         }, children: text }));
-}
+});
 const RefNameMenu = observer(function RefNameMenu({ model, menuState, onClose, }) {
     const { displayedRegions } = model;
     const { refName, displayedRegionIndex: idx, lastDisplayedRegionIndex: lastIdx, } = menuState.label;

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

@@ -1,9 +1,10 @@
 import type { ReactNode } from 'react';
-export default function SearchPanelForm({ onSubmit, handleClose, submitDisabled, submitText, actions, children, }: {
+declare const SearchPanelForm: ({ onSubmit, handleClose, submitDisabled, submitText, actions, children, }: {
     onSubmit: () => void;
     handleClose: () => void;
     submitDisabled: boolean;
     submitText?: string;
     actions?: ReactNode;
     children: ReactNode;
-}): import("react").JSX.Element;
+}) => import("react").JSX.Element;
+export default SearchPanelForm;

package/esm/LinearGenomeView/components/SearchPanelForm.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { SubmitForm } from '@jbrowse/core/ui';
 import { makeStyles } from '@jbrowse/core/util/tss-react';
+import { observer } from 'mobx-react';
 const useStyles = makeStyles()({
     dialogContent: {
         width: '34em',
@@ -12,7 +13,8 @@ const useStyles = makeStyles()({
 // The chrome shared by the sequence-search mode panels: the fixed-width column
 // their fields lay out in, plus SubmitForm's Cancel/Submit footer. Each panel
 // still owns its own fields and its own submit, so this is only the frame.
-export default function SearchPanelForm({ onSubmit, handleClose, submitDisabled, submitText, actions, children, }) {
+const SearchPanelForm = observer(function SearchPanelForm({ onSubmit, handleClose, submitDisabled, submitText, actions, children, }) {
     const { classes } = useStyles();
     return (_jsx(SubmitForm, { contentClassName: classes.dialogContent, onSubmit: onSubmit, onCancel: handleClose, submitDisabled: submitDisabled, submitText: submitText, actions: actions, children: children }));
-}
+});
+export default SearchPanelForm;

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

@@ -1,10 +1,5 @@
-import type { LinearGenomeViewModel } from '../../index.ts';
-import type BaseResult from '@jbrowse/core/TextSearch/BaseResults';
-export default function SearchResultsDialog({ model, assemblyName, searchQuery, searchResults, handleClose, onPick, }: {
+import type { LinearGenomeViewModel } from '../index.ts';
+declare const SearchResultsDialog: ({ model, }: {
     model: LinearGenomeViewModel;
-    assemblyName: string;
-    searchQuery: string;
-    searchResults: BaseResult[];
-    handleClose: () => void;
-    onPick: (result: BaseResult) => Promise<unknown>;
-}): import("react").JSX.Element;
+}) => import("react").JSX.Element | null;
+export default SearchResultsDialog;

package/esm/LinearGenomeView/components/SearchResultsDialog.js

@@ -1,7 +1,10 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { InfoDialog } from '@jbrowse/core/ui';
 import { Typography } from '@mui/material';
+import { observer } from 'mobx-react';
 import SearchResultsTable from './SearchResultsTable.js';
-export default function SearchResultsDialog({ model, assemblyName, searchQuery, searchResults, handleClose, onPick, }) {
-    return (_jsx(InfoDialog, { open: true, maxWidth: "xl", onClose: handleClose, title: "Search results", children: !searchResults.length ? (_jsxs(Typography, { children: ["No results found for ", _jsx("b", { children: searchQuery })] })) : (_jsxs(_Fragment, { children: [_jsxs(Typography, { children: ["Showing results for ", _jsx("b", { children: searchQuery })] }), _jsx(SearchResultsTable, { model: model, handleClose: handleClose, assemblyName: assemblyName, searchResults: searchResults, onPick: onPick })] })) }));
-}
+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;
+});
+export default SearchResultsDialog;

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

@@ -1,10 +1,5 @@
-import type { LinearGenomeViewModel } from '../../index.ts';
-import type BaseResult from '@jbrowse/core/TextSearch/BaseResults';
-declare const SearchResultsTable: ({ searchResults, assemblyName, model, handleClose, onPick, }: {
-    searchResults: BaseResult[];
-    assemblyName: string;
-    model: LinearGenomeViewModel;
-    handleClose: () => void;
-    onPick: (result: BaseResult) => Promise<unknown>;
+import type { SearchPickerState } from '../model.ts';
+declare const SearchResultsTable: ({ picker, }: {
+    picker: SearchPickerState;
 }) => import("react").JSX.Element;
 export default SearchResultsTable;

package/esm/LinearGenomeView/components/SearchResultsTable.js

@@ -1,38 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { canonicalLocString } from '@jbrowse/core/TextSearch/places';
 import { SanitizedHTML } from '@jbrowse/core/ui';
-import { getSession } from '@jbrowse/core/util';
 import { Button, Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, } from '@mui/material';
 import { observer } from 'mobx-react';
-import { isOpenInView } from '../../searchUtils.js';
-const SearchResultsTable = observer(function SearchResultsTable({ searchResults, assemblyName, model, handleClose, onPick, }) {
-    const session = getSession(model);
-    const { assemblyManager } = session;
-    const assembly = assemblyManager.get(assemblyName);
-    function getTrackName(trackId) {
-        const conf = trackId !== undefined ? session.getTrackById(trackId) : undefined;
-        return conf?.name ?? '';
-    }
-    // A location the assembly can't resolve is listed as-is: Go navigates
-    // through navToOption, which reports its own failure
-    function formatLocation(locString) {
-        return assembly && locString
-            ? canonicalLocString(locString, assembly)
-            : locString;
-    }
-    // A hit in a track that is already on screen is usually the one meant, so it
-    // is listed first rather than given a control that says so. sort is stable,
-    // so everything else keeps the ranked order it arrived in.
-    const ordered = [...searchResults].sort((a, b) => Number(isOpenInView(b, model)) - Number(isOpenInView(a, model)));
-    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: ordered.map(result => (_jsxs(TableRow, { children: [_jsx(TableCell, { component: "th", scope: "row", children: result.getLabel() }), _jsx(TableCell, { align: "right", children: formatLocation(result.getLocation()) }), _jsx(TableCell, { align: "right", children: _jsx(SanitizedHTML, { html: getTrackName(result.getTrackId()) || 'N/A' }) }), _jsx(TableCell, { align: "right", children: _jsx(Button, { onClick: async () => {
-                                        try {
-                                            await onPick(result);
-                                        }
-                                        catch (e) {
-                                            console.error(e);
-                                            session.notifyError(`${e}`, e);
-                                        }
-                                        handleClose();
-                                    }, color: "primary", variant: "contained", children: "Go" }) })] }, result.getId()))) })] }) }));
+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))) })] }) }));
 });
 export default SearchResultsTable;

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

@@ -1,8 +1,9 @@
 import type { ReactNode } from 'react';
-export default function StrandCheckboxes({ searchForward, searchReverse, setSearchForward, setSearchReverse, children, }: {
+declare const StrandCheckboxes: ({ searchForward, searchReverse, setSearchForward, setSearchReverse, children, }: {
     searchForward: boolean;
     searchReverse: boolean;
     setSearchForward: (arg: boolean) => void;
     setSearchReverse: (arg: boolean) => void;
     children?: ReactNode;
-}): import("react").JSX.Element;
+}) => import("react").JSX.Element;
+export default StrandCheckboxes;

package/esm/LinearGenomeView/components/StrandCheckboxes.js

@@ -1,13 +1,15 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { LabeledCheckbox } from '@jbrowse/core/ui';
 import { FormGroup, Typography } from '@mui/material';
+import { observer } from 'mobx-react';
 // Forward/reverse strand checkboxes plus the "select at least one" guard, shared
 // by the sequence-search mode panels. Extra checkboxes for a specific panel (e.g.
 // "Case insensitive") slot in alongside via `children`.
-export default function StrandCheckboxes({ searchForward, searchReverse, setSearchForward, setSearchReverse, children, }) {
+const StrandCheckboxes = observer(function StrandCheckboxes({ searchForward, searchReverse, setSearchForward, setSearchReverse, children, }) {
     return (_jsxs(_Fragment, { children: [_jsxs(FormGroup, { row: true, children: [_jsx(LabeledCheckbox, { size: "small", checked: searchForward, onChange: val => {
                             setSearchForward(val);
                         }, label: "Forward strand" }), _jsx(LabeledCheckbox, { size: "small", checked: searchReverse, onChange: val => {
                             setSearchReverse(val);
                         }, label: "Reverse strand" }), children] }), !searchForward && !searchReverse ? (_jsx(Typography, { color: "error", variant: "body2", children: "Select at least one strand" })) : null] }));
-}
+});
+export default StrandCheckboxes;

package/esm/LinearGenomeView/components/TrackContainer.js

@@ -135,7 +135,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, 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 }, 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/TrackLabelMenu.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton';
+import { TRACK_MENU_PRIORITY, subMenuIfAny } from '@jbrowse/core/ui/menuItems';
 import { getSession } from '@jbrowse/core/util';
 import { makeStyles } from '@jbrowse/core/util/tss-react';
 import LowPriorityIcon from '@mui/icons-material/LowPriority';
@@ -27,21 +28,16 @@ const TrackLabelMenu = observer(function TrackLabelMenu({ track, }) {
             view,
         }) ?? [];
         return [
-            ...(orderSubMenu.length
-                ? [
-                    {
-                        label: 'Track order',
-                        icon: LowPriorityIcon,
-                        type: 'subMenu',
-                        priority: 1000,
-                        subMenu: orderSubMenu,
-                    },
-                ]
-                : []),
+            ...subMenuIfAny({
+                label: 'Track order',
+                icon: LowPriorityIcon,
+                priority: TRACK_MENU_PRIORITY.trackOrder,
+                subMenu: orderSubMenu,
+            }),
             ...sessionItems,
             track.saveTrackDataMenuItem,
             ...track.trackMenuItems(),
-        ].sort((a, b) => (b.priority ?? 0) - (a.priority ?? 0));
+        ];
     }
     return (_jsx(CascadingMenuButton, { menuItems: getMenuItems, className: classes.menuButton, "data-testid": "track_menu_icon", "data-trackid": track.trackId, tooltip: "Track settings", children: _jsx(MoreVertIcon, { fontSize: "small" }) }));
 });