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

package/esm/LinearGenomeView/components/ScalebarRefNameLabels.js

@@ -1,168 +1,199 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
 import { Menu } from '@jbrowse/core/ui';
+import { assembleLocString, assembleLocStrings } from '@jbrowse/core/util';
+import { copyText } from '@jbrowse/core/util/copyText';
 import { makeStyles } from '@jbrowse/core/util/tss-react';
 import { observer } from 'mobx-react';
+import { REF_NAME_LABEL_FONT_SIZE, regionMoveActions, regionRunBounds, withRegionMoved, withRegionRemoved, withRegionReversed, withRegionsKept, } from '../util.js';
+import { scalebarRefLabelProps } from './util.js';
 const useStyles = makeStyles()(theme => ({
     refLabel: {
-        fontSize: 11,
+        // the width the fit test in getScalebarRefNameLabels measures against
+        fontSize: REF_NAME_LABEL_FONT_SIZE,
+        // maxWidth is the label's whole box, paddingLeft included — stated here
+        // rather than inherited from whatever box-sizing the embedding page sets,
+        // since under content-box the padding comes off the text twice (once in the
+        // maxWidth the fit test was given, once in the layout) and every name wide
+        // enough to need the space is clipped mid-glyph
+        boxSizing: 'border-box',
         position: 'absolute',
-        left: 2,
+        // x-position is driven by transform:translateX (compositor-only) not left
+        left: 0,
         top: -1,
         fontWeight: 'bold',
         lineHeight: 'normal',
         zIndex: 1,
         background: theme.palette.background.paper,
-        cursor: 'pointer',
-        overflow: 'hidden',
+        // clip, not hidden: transform/maxWidth are patched on every scroll-zoom
+        // frame, and `hidden` would make each label its own scroll container —
+        // scrollable-overflow bookkeeping and scroll anchoring per label per frame,
+        // for a box that never scrolls. clip is a paint-time rect instead
+        overflow: 'clip',
         whiteSpace: 'nowrap',
+    },
+    // refName labels only: the caption chip opens no menu
+    clickable: {
+        cursor: 'pointer',
         '&:hover': {
-            background: theme.palette.grey[300],
+            background: theme.palette.action.hover,
         },
     },
-    b0: {
-        left: 0,
+    caption: {
         zIndex: 100,
     },
 }));
 const ScalebarRefNameLabels = observer(function ScalebarRefNameLabels({ model, }) {
     const { classes, cx } = useStyles();
-    const { staticBlocks, offsetPx, scalebarDisplayPrefix } = model;
     const [menuState, setMenuState] = useState();
-    useEffect(() => {
-        model.setIsScalebarRefNameMenuOpen(!!menuState);
-    }, [model, menuState]);
-    let lastLeftBlock = staticBlocks.blocks.findIndex(b => b.type === 'ContentBlock');
-    if (lastLeftBlock < 0) {
-        lastLeftBlock = 0;
-    }
-    staticBlocks.forEach((block, i) => {
-        if (block.type === 'ContentBlock' && block.offsetPx - offsetPx < 0) {
-            lastLeftBlock = i;
-        }
-    });
-    const val = scalebarDisplayPrefix();
-    const b0 = staticBlocks.blocks[0];
-    const regionEndPx = new Map();
-    for (const block of staticBlocks.blocks) {
-        if (block.type === 'ContentBlock' && block.regionNumber !== undefined) {
-            const endPx = block.offsetPx + block.widthPx;
-            const current = regionEndPx.get(block.regionNumber);
-            if (current === undefined || endPx > current) {
-                regionEndPx.set(block.regionNumber, endPx);
-            }
-        }
-    }
-    return (_jsxs(_Fragment, { children: [b0?.type !== 'ContentBlock' && val ? (_jsx("span", { className: cx(classes.b0, classes.refLabel), children: val })) : null, staticBlocks.map((block, index) => {
-                const { offsetPx: blockOffsetPx, isLeftEndOfDisplayedRegion, key, type, refName, regionNumber, } = block;
-                const last = index === lastLeftBlock;
-                const regEndPx = regionNumber !== undefined ? regionEndPx.get(regionNumber) : undefined;
-                const labelStartPx = last ? offsetPx : blockOffsetPx;
-                const maxWidth = regEndPx !== undefined ? regEndPx - labelStartPx - 2 : undefined;
-                const minLabelWidth = 20;
-                const hasEnoughSpace = maxWidth === undefined || maxWidth >= minLabelWidth;
-                return type === 'ContentBlock' &&
-                    (isLeftEndOfDisplayedRegion || last) &&
-                    hasEnoughSpace ? (_jsxs("span", { style: {
-                        left: last
-                            ? Math.max(0, -offsetPx)
-                            : blockOffsetPx - offsetPx - 1,
-                        paddingLeft: last ? 0 : 1,
-                        maxWidth: maxWidth !== undefined && maxWidth > 0 ? maxWidth : undefined,
-                    }, className: classes.refLabel, "data-testid": `refLabel-${refName}`, onMouseDown: () => {
-                        model.setScalebarRefNameClickPending(true);
-                    }, onClick: event => {
-                        model.setScalebarRefNameClickPending(false);
-                        setMenuState({
-                            anchorEl: event.currentTarget,
-                            refName,
-                            regionNumber: regionNumber,
-                        });
-                    }, children: [last && val ? `${val}:` : '', refName] }, `refLabel-${key}-${index}`)) : null;
-            }), menuState ? (_jsx(RefNameMenu, { model: model, menuState: menuState, onClose: () => {
+    const { labels, caption } = model.scalebarRefNameLabels;
+    return (_jsxs(_Fragment, { children: [labels.map((label, i) => (_jsx(RefLabel
+            // eslint-disable-next-line @eslint-react/no-array-index-key -- position IS the identity here; keying by the run makes the list churn on zoom
+            , { model: model, label: label, onOpenMenu: setMenuState }, i))), caption === undefined ? null : (_jsx("span", { className: cx(classes.caption, classes.refLabel), "data-testid": "refLabel-prefix", children: caption })), menuState ? (_jsx(RefNameMenu, { model: model, menuState: menuState, onClose: () => {
+                    model.setIsScalebarRefNameMenuOpen(false);
                     setMenuState(undefined);
                 } })) : null] }));
 });
-function RefNameMenu({ model, menuState, onClose, }) {
+// 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, }) {
+    const { classes, cx } = useStyles();
+    const { refName, transform, maxWidth, paddingLeft, text } = label;
+    return (_jsx("span", { className: cx(classes.refLabel, classes.clickable), style: {
+            transform: `translateX(${transform}px)`,
+            paddingLeft,
+            maxWidth,
+        }, "data-testid": `refLabel-${refName}`, ...scalebarRefLabelProps, onClick: e => {
+            model.setIsScalebarRefNameMenuOpen(true);
+            onOpenMenu({ anchorEl: e.currentTarget, label });
+        }, children: text }));
+}
+const RefNameMenu = observer(function RefNameMenu({ model, menuState, onClose, }) {
     const { displayedRegions } = model;
-    const { refName, regionNumber } = menuState;
+    const { refName, displayedRegionIndex: idx, lastDisplayedRegionIndex: lastIdx, } = menuState.label;
     const numRegions = displayedRegions.length;
-    function moveRegion(fromIndex, toIndex) {
-        const regions = [...displayedRegions];
-        const [removed] = regions.splice(fromIndex, 1);
-        regions.splice(toIndex, 0, removed);
-        model.setDisplayedRegions(regions);
-    }
-    function removeRegion(index) {
-        const regions = displayedRegions.filter((_, i) => i !== index);
-        model.setDisplayedRegions(regions);
-    }
-    const actionItems = [
-        ...(regionNumber > 0
-            ? [
-                {
-                    label: 'Move left',
-                    onClick: () => {
-                        moveRegion(regionNumber, regionNumber - 1);
-                    },
-                },
-            ]
-            : []),
-        ...(regionNumber < numRegions - 1
-            ? [
-                {
-                    label: 'Move right',
-                    onClick: () => {
-                        moveRegion(regionNumber, regionNumber + 1);
-                    },
-                },
-            ]
-            : []),
-        ...(numRegions > 2 && regionNumber > 0
-            ? [
-                {
-                    label: 'Move to far left',
-                    onClick: () => {
-                        moveRegion(regionNumber, 0);
-                    },
-                },
-            ]
-            : []),
-        ...(numRegions > 2 && regionNumber < numRegions - 1
-            ? [
-                {
-                    label: 'Move to far right',
-                    onClick: () => {
-                        moveRegion(regionNumber, numRegions - 1);
-                    },
-                },
-            ]
-            : []),
-        {
-            label: 'Remove this region from view',
-            onClick: () => {
-                removeRegion(regionNumber);
-            },
-        },
-    ];
-    return (_jsx(Menu, { anchorEl: menuState.anchorEl, open: true, onClose: onClose, onMenuItemClick: (_, callback) => {
+    const labeled = displayedRegions.slice(idx, lastIdx + 1);
+    // A label naming several regions is the collapsed-intron case: adjacent
+    // regions sharing a refName get one label between them. Reverse/move/remove
+    // are per-region and this label names no particular one — it used to act on
+    // whichever region the label happened to ride, which for the pinned label
+    // changed as you scrolled — so a run offers only the two items that mean the
+    // whole run.
+    const oneRegion = idx === lastIdx;
+    // one region keeps its `{assembly}` qualifier; a run drops the qualifier the
+    // regions all share, as the view header does for the same list
+    const locString = oneRegion
+        ? assembleLocString(displayedRegions[idx])
+        : assembleLocStrings(labeled);
+    // The region this label's blocks were cut out of. Taken over the WHOLE run
+    // rather than `labeled`, which the viewport clips: a collapsed-introns view
+    // zoomed into two exons would otherwise offer a span that is not the gene's.
+    const { first: runFirst, last: runLast } = regionRunBounds(displayedRegions, idx, lastIdx);
+    const run = displayedRegions.slice(runFirst, runLast + 1);
+    const wholeSpan = {
+        ...run[0],
+        start: Math.min(...run.map(r => r.start)),
+        end: Math.max(...run.map(r => r.end)),
+    };
+    return (_jsx(Menu, { anchorEl: menuState.anchorEl, open: true, onClose: onClose, onMenuItemClick: callback => {
             callback();
             onClose();
         }, menuItems: [
             {
                 label: `Focus on ${refName}`,
+                // moveTo by index, not navTo by refName: navTo resolves to the FIRST
+                // region carrying the name, so on a duplicated refName (a chromosome
+                // displayed twice) clicking the third chr1 label jumped to the first.
+                // Every other item in this menu is already idx-based.
                 onClick: () => {
-                    model.navTo({ refName });
+                    const last = displayedRegions[lastIdx];
+                    model.moveTo({ index: idx, offset: 0 }, { index: lastIdx, offset: last.end - last.start });
                 },
             },
-            ...(numRegions > 1
+            ...(labeled.length < numRegions
+                ? [
+                    {
+                        label: oneRegion
+                            ? 'Show only this region'
+                            : `Show only ${refName}`,
+                        onClick: () => {
+                            model.editDisplayedRegions(withRegionsKept(displayedRegions, idx, lastIdx));
+                        },
+                    },
+                ]
+                : []),
+            ...(runLast > runFirst
+                ? [
+                    {
+                        // Names its subject the way the two rows above it do; the span
+                        // it lands on is not spelled into the label, which would move
+                        // under the reader as they navigate.
+                        label: `Show the whole span of ${refName}`,
+                        // Focused rather than centre-kept: the rejoined region is one
+                        // the old viewport never saw, so there is no centre to hold,
+                        // and showing the span is the whole point of the row.
+                        onClick: () => {
+                            model.setDisplayedRegions([
+                                ...displayedRegions.slice(0, runFirst),
+                                wholeSpan,
+                                ...displayedRegions.slice(runLast + 1),
+                            ]);
+                            model.moveTo({ index: runFirst, offset: 0 }, {
+                                index: runFirst,
+                                offset: wholeSpan.end - wholeSpan.start,
+                            });
+                        },
+                    },
+                ]
+                : []),
+            {
+                label: 'Copy to clipboard',
+                subMenu: [
+                    {
+                        label: 'Reference sequence name',
+                        onClick: () => {
+                            void copyText(model, refName, 'reference sequence name');
+                        },
+                    },
+                    {
+                        label: 'Region',
+                        onClick: () => {
+                            void copyText(model, locString, 'region');
+                        },
+                    },
+                ],
+            },
+            ...(oneRegion
                 ? [
                     {
                         label: 'Actions',
-                        subMenu: actionItems,
+                        subMenu: [
+                            {
+                                label: 'Reverse region',
+                                onClick: () => {
+                                    model.editDisplayedRegions(withRegionReversed(displayedRegions, idx));
+                                },
+                            },
+                            ...regionMoveActions(idx, numRegions).map(({ label, to }) => ({
+                                label,
+                                onClick: () => {
+                                    model.editDisplayedRegions(withRegionMoved(displayedRegions, idx, to));
+                                },
+                            })),
+                            ...(numRegions > 1
+                                ? [
+                                    {
+                                        label: 'Remove this region from view',
+                                        onClick: () => {
+                                            model.editDisplayedRegions(withRegionRemoved(displayedRegions, idx));
+                                        },
+                                    },
+                                ]
+                                : []),
+                        ],
                     },
                 ]
                 : []),
         ] }));
-}
+});
 export default ScalebarRefNameLabels;

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

@@ -1,6 +1,26 @@
 import type { LinearGenomeViewModel } from '../model.ts';
-declare const SearchBox: ({ model, showHelp, }: {
+import type React from 'react';
+/**
+ * What the box asks its row for at `value`, margins included — the number
+ * `headerFit` sheds against.
+ *
+ * The ask follows the locstring, which is the whole point of asking: 194px at
+ * `ctgA:1..20,000` and 284px at `chr22:10,510,000..10,610,000`, so a row sized
+ * against the 189px floor sheds too little and flexbox squeezes the box anyway.
+ * It is `getInputWidth`, the same function the box sizes itself with, rather
+ * than that arithmetic done again out here.
+ *
+ * `showHelp` is the component's own default below, and with help on
+ * `adornmentReservePx` returns the same number whatever the recent-locations
+ * menu holds — so the count only this component's hook knows cannot change the
+ * answer.
+ */
+export declare function searchBoxWidth(value: string): number;
+declare const SearchBox: ({ model, showHelp, minWidth, maxWidth, style, }: {
     showHelp?: boolean;
     model: LinearGenomeViewModel;
-}) => import("react/jsx-runtime").JSX.Element;
+    minWidth?: number;
+    maxWidth?: number;
+    style?: React.CSSProperties;
+}) => React.JSX.Element;
 export default SearchBox;

package/esm/LinearGenomeView/components/SearchBox.js

@@ -1,82 +1,75 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { RefNameAutocomplete, RefNameAutocompleteEndAdornment, adornmentReservePx, getInputWidth, useRecentLocations, } from '@jbrowse/core/ui';
+import { usePalette } from '@jbrowse/core/ui/PaletteContext';
+import { alpha } from '@jbrowse/core/ui/palette';
 import { getSession } from '@jbrowse/core/util';
-import { makeStyles } from '@jbrowse/core/util/tss-react';
-import { alpha, useTheme } from '@mui/material';
 import { observer } from 'mobx-react';
-import EndAdornment from "./RefNameAutocomplete/EndAdornment.js";
-import RefNameAutocomplete from "./RefNameAutocomplete/index.js";
-import { fetchResults } from "./util.js";
-import { handleSelectedRegion, navToOption } from "../../searchUtils.js";
-import { SPACING, WIDGET_HEIGHT } from "../consts.js";
-const useStyles = makeStyles()({
-    headerRefName: {
-        minWidth: 100,
-    },
-});
-async function onSelect({ option, model, assemblyName, }) {
-    const { assemblyManager } = getSession(model);
-    const assembly = assemblyManager.get(assemblyName);
-    if (option.hasLocation()) {
-        await navToOption({
-            option,
-            model,
-            assemblyName,
-        });
-    }
-    else if (option.results?.length) {
-        model.setSearchResults(option.results, option.getLabel());
-    }
-    else if (assembly) {
-        await handleSelectedRegion({
-            input: option.getLabel(),
-            assembly,
-            model,
-        });
-    }
+import { fetchResults, navigateToSelectedOption, notifySearchFailure, } from '../../searchUtils.js';
+import { SPACING, WIDGET_HEIGHT } from '../consts.js';
+import { recentLocationOf, recentLocationsMenu } from './recentLocationsMenu.js';
+const defaultStyle = { margin: SPACING };
+// The header box's floor and ceiling. A stacked view's row passes its own, and
+// `searchBoxWidth` answers for these.
+const MIN_WIDTH = 175;
+const MAX_WIDTH = 550;
+/**
+ * What the box asks its row for at `value`, margins included — the number
+ * `headerFit` sheds against.
+ *
+ * The ask follows the locstring, which is the whole point of asking: 194px at
+ * `ctgA:1..20,000` and 284px at `chr22:10,510,000..10,610,000`, so a row sized
+ * against the 189px floor sheds too little and flexbox squeezes the box anyway.
+ * It is `getInputWidth`, the same function the box sizes itself with, rather
+ * than that arithmetic done again out here.
+ *
+ * `showHelp` is the component's own default below, and with help on
+ * `adornmentReservePx` returns the same number whatever the recent-locations
+ * menu holds — so the count only this component's hook knows cannot change the
+ * answer.
+ */
+export function searchBoxWidth(value) {
+    return (getInputWidth(value, MIN_WIDTH, MAX_WIDTH, adornmentReservePx({ showHelp: true })) +
+        2 * SPACING);
 }
-const SearchBox = observer(function SearchBox({ model, showHelp = true, }) {
-    const { classes } = useStyles();
-    const theme = useTheme();
+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, rankSearchResults } = model;
+    const { assemblyNames } = model;
     const assemblyName = assemblyNames[0];
     const assembly = assemblyManager.get(assemblyName);
-    const searchScope = model.searchScope(assemblyName);
-    return (_jsx(RefNameAutocomplete, { onSelect: async (option) => {
-            try {
-                await onSelect({
-                    model,
-                    assemblyName,
-                    option,
-                });
-            }
-            catch (e) {
-                console.error(e);
-                getSession(model).notify(`${e}`, 'warning');
-            }
-        }, assemblyName: assemblyName, fetchResults: queryString => fetchResults({
+    const { recentLocations, addRecentLocation, clearRecentLocations } = useRecentLocations(assemblyName);
+    async function navigate(option) {
+        try {
+            await navigateToSelectedOption({ model, assemblyName, option });
+            addRecentLocation(recentLocationOf(option));
+        }
+        catch (e) {
+            notifySearchFailure(session, e);
+        }
+    }
+    const recentMenuItems = recentLocationsMenu({
+        recentLocations,
+        onNavigate: option => {
+            void navigate(option);
+        },
+        onClear: clearRecentLocations,
+    });
+    return (_jsx(RefNameAutocomplete, { onSelect: option => {
+            void navigate(option);
+        }, assemblyName: assemblyName, fetchResults: (queryString, signal) => fetchResults({
             queryString,
-            searchScope,
-            rankSearchResults,
+            assemblyName,
             textSearchManager,
             assembly,
-        }), model: model, minWidth: 175, TextFieldProps: {
-            variant: 'outlined',
-            className: classes.headerRefName,
-            style: {
-                margin: SPACING,
-            },
-            slotProps: {
-                input: {
-                    style: {
-                        padding: 0,
-                        height: WIDGET_HEIGHT,
-                        background: alpha(theme.palette.background.paper, 0.8),
-                    },
-                    endAdornment: _jsx(EndAdornment, { showHelp: showHelp }),
-                },
-            },
+            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: {
+            padding: 0,
+            height: WIDGET_HEIGHT,
+            background: alpha(palette.background.paper, 0.8),
         } }));
 });
 export default SearchBox;

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

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

package/esm/LinearGenomeView/components/SearchPanelForm.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SubmitForm } from '@jbrowse/core/ui';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
+const useStyles = makeStyles()({
+    dialogContent: {
+        width: '34em',
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 12,
+    },
+});
+// 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 { classes } = useStyles();
+    return (_jsx(SubmitForm, { contentClassName: classes.dialogContent, onSubmit: onSubmit, onCancel: handleClose, submitDisabled: submitDisabled, submitText: submitText, actions: actions, children: children }));
+}

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

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

package/esm/LinearGenomeView/components/SearchResultsDialog.js

@@ -1,9 +1,7 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Dialog } from '@jbrowse/core/ui';
-import { Button, DialogActions, DialogContent, Divider, Typography, } from '@mui/material';
-import SearchResultsTable from "./SearchResultsTable.js";
-export default function SearchResultsDialog({ model, assemblyName, searchQuery, searchResults, handleClose, }) {
-    return (_jsxs(Dialog, { open: true, maxWidth: "xl", onClose: handleClose, title: "Search results", children: [_jsx(DialogContent, { 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 })] })) }), _jsx(Divider, {}), _jsx(DialogActions, { children: _jsx(Button, { onClick: () => {
-                        handleClose();
-                    }, color: "primary", children: "Cancel" }) })] }));
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { InfoDialog } from '@jbrowse/core/ui';
+import { Typography } from '@mui/material';
+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 })] })) }));
 }

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

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