@jbrowse/plugin-linear-genome-view 4.2.1 → 5.0.0-beta.1

package/esm/LinearGenomeView/components/SearchBox.js

@@ -1,82 +1,74 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { RefNameAutocomplete, RefNameAutocompleteEndAdornment, adornmentReservePx, getInputWidth, useRecentLocations, } from '@jbrowse/core/ui';
 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 SearchBox = observer(function SearchBox({ model, showHelp = true, minWidth = MIN_WIDTH, maxWidth = MAX_WIDTH, style = defaultStyle, }) {
     const theme = useTheme();
     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 => {
+            navigate(option).catch(() => { });
+        },
+        onClear: clearRecentLocations,
+    });
+    return (_jsx(RefNameAutocomplete, { onSelect: option => {
+            navigate(option).catch(() => { });
+        }, assemblyName: assemblyName, fetchResults: (queryString, stopToken) => 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 }),
-                },
-            },
+            stopToken,
+        }), 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(theme.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

@@ -2,8 +2,8 @@ import type { LinearGenomeViewModel } from '../../index.ts';
 import type BaseResult from '@jbrowse/core/TextSearch/BaseResults';
 export default function SearchResultsDialog({ model, assemblyName, searchQuery, searchResults, handleClose, }: {
     model: LinearGenomeViewModel;
-    assemblyName?: string;
+    assemblyName: string;
     searchQuery: string;
-    searchResults?: BaseResult[];
+    searchResults: BaseResult[];
     handleClose: () => void;
-}): import("react/jsx-runtime").JSX.Element;
+}): 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";
+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, }) {
-    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" }) })] }));
+    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 })] })) }));
 }

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

@@ -1,8 +1,9 @@
 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, }: {
     searchResults: BaseResult[];
-    assemblyName?: string;
+    assemblyName: string;
     model: LinearGenomeViewModel;
     handleClose: () => void;
-}): import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
+export default SearchResultsTable;

package/esm/LinearGenomeView/components/SearchResultsTable.js

@@ -1,64 +1,56 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { assembleLocString, getEnv, getSession, parseLocString, } from '@jbrowse/core/util';
+import { readConfObject } from '@jbrowse/core/configuration';
+import { assembleLocString, getSession, parseLocString, } from '@jbrowse/core/util';
 import { Button, Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, } from '@mui/material';
-import { navToOption } from "../../searchUtils.js";
-export default function SearchResultsTable({ searchResults, assemblyName: optAssemblyName, model, handleClose, }) {
+import { observer } from 'mobx-react';
+import { isOpenInView, navToOption } from '../../searchUtils.js';
+const SearchResultsTable = observer(function SearchResultsTable({ searchResults, assemblyName, model, handleClose, }) {
     const session = getSession(model);
-    const { pluginManager } = getEnv(session);
     const { assemblyManager } = session;
-    const assemblyName = optAssemblyName || model.displayedRegions[0].assemblyName;
     const assembly = assemblyManager.get(assemblyName);
-    if (!assembly) {
-        throw new Error(`assembly ${assemblyName} not found`);
-    }
-    if (!assembly.regions) {
-        throw new Error(`assembly ${assemblyName} regions not loaded`);
-    }
     function getTrackName(trackId) {
-        return trackId !== undefined ? session.getTracksById()[trackId]?.name : '';
+        const conf = trackId !== undefined ? session.getTrackById(trackId) : undefined;
+        return conf ? readConfObject(conf, 'name') : '';
     }
-    async function handleClick(result) {
-        if (result.hasLocation()) {
-            await navToOption({
-                option: result,
-                model,
-                assemblyName,
-            });
+    // the raw locString, prettified to the assembly's canonical refName when the
+    // assembly is loaded and the string parses. A result the assembly can't
+    // resolve is still listed as-is rather than blowing up the dialog: the Go
+    // button navigates through navToOption, which reports its own failure
+    function formatLocation(locString) {
+        if (assembly && locString) {
+            try {
+                const loc = parseLocString(locString, refName => assembly.isValidRefName(refName));
+                return assembleLocString({
+                    ...loc,
+                    refName: assembly.getCanonicalRefName2(loc.refName),
+                });
+            }
+            catch (e) {
+                console.warn('failed to parse location string', locString, e);
+                return locString;
+            }
         }
         else {
-            const location = result.getLabel();
-            const newRegion = assembly?.regions?.find(region => location === region.refName);
-            if (newRegion) {
-                model.setDisplayedRegions([newRegion]);
-                model.showAllRegions();
-            }
-            await pluginManager.evaluateAsyncExtensionPoint('LinearGenomeView-searchResultSelected', undefined, { session, result, model, assemblyName });
+            return locString;
         }
     }
-    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: searchResults.map(result => {
-                        const locString = result.getLocation();
-                        let loc;
-                        try {
-                            loc = locString
-                                ? parseLocString(locString, refName => assembly.isValidRefName(refName))
-                                : undefined;
-                        }
-                        catch (e) { }
-                        return (_jsxs(TableRow, { children: [_jsx(TableCell, { component: "th", scope: "row", children: result.getLabel() }), _jsx(TableCell, { align: "right", children: loc
-                                        ? assembleLocString({
-                                            ...loc,
-                                            refName: assembly.getCanonicalRefName(loc.refName) ||
-                                                loc.refName,
-                                        })
-                                        : locString }), _jsx(TableCell, { align: "right", children: getTrackName(result.getTrackId()) || 'N/A' }), _jsx(TableCell, { align: "right", children: _jsx(Button, { onClick: async () => {
-                                            try {
-                                                await handleClick(result);
-                                            }
-                                            catch (e) {
-                                                console.error(e);
-                                                session.notifyError(`${e}`, e);
-                                            }
-                                            handleClose();
-                                        }, color: "primary", variant: "contained", children: "Go" }) })] }, result.getId()));
-                    }) })] }) }));
-}
+    // 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: getTrackName(result.getTrackId()) || 'N/A' }), _jsx(TableCell, { align: "right", children: _jsx(Button, { onClick: async () => {
+                                        try {
+                                            await navToOption({
+                                                option: result,
+                                                model,
+                                                assemblyName,
+                                            });
+                                        }
+                                        catch (e) {
+                                            console.error(e);
+                                            session.notifyError(`${e}`, e);
+                                        }
+                                        handleClose();
+                                    }, color: "primary", variant: "contained", children: "Go" }) })] }, result.getId()))) })] }) }));
+});
+export default SearchResultsTable;

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

@@ -0,0 +1,5 @@
+import type { LinearGenomeViewModel } from '../index.ts';
+declare const SequenceFeatureHoverHighlight: ({ model, }: {
+    model: LinearGenomeViewModel;
+}) => import("react").JSX.Element;
+export default SequenceFeatureHoverHighlight;

package/esm/LinearGenomeView/components/SequenceFeatureHoverHighlight.js

@@ -0,0 +1,37 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { observer } from 'mobx-react';
+import ConnectedHoverHighlight from './ConnectedHoverHighlight.js';
+import HoverPositionHighlight from './HoverPositionHighlight.js';
+// A feature-detail widget is "connected" to this view when its `view` reference
+// points back at it; that widget's sequence panel publishes the hovered base as
+// `sequenceHoverPosition`.
+function isFeatureWidgetForView(w, viewId) {
+    const candidate = w;
+    return (!!candidate &&
+        !!candidate.sequenceFeatureDetails &&
+        candidate.view?.id === viewId);
+}
+// The same panel also opens straight off a feature's right-click menu, where it
+// 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;
+}
+// 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.
+const SequenceFeatureHoverHighlight = observer(function SequenceFeatureHoverHighlight({ model, }) {
+    return (_jsxs(_Fragment, { children: [_jsx(ConnectedHoverHighlight, { model: model, getPosition: (widget, viewId) => isFeatureWidgetForView(widget, viewId)
+                    ? widget.sequenceHoverPosition
+                    : undefined }), model.tracks
+                .flatMap(track => track.displays)
+                .flatMap(display => {
+                const position = displayHoverPosition(display);
+                return position
+                    ? [
+                        _jsx(HoverPositionHighlight, { model: model, position: position }, `hover-${display.id}`),
+                    ]
+                    : [];
+            })] }));
+});
+export default SequenceFeatureHoverHighlight;

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

@@ -0,0 +1,2 @@
+import type PluginManager from '@jbrowse/core/PluginManager';
+export default function SequenceFeatureHoverHighlightExtensionF(pluginManager: PluginManager): void;

package/esm/LinearGenomeView/components/SequenceFeatureHoverHighlightExtension.js

@@ -0,0 +1,5 @@
+import { addExtensionElement } from '@jbrowse/core/ui';
+import SequenceFeatureHoverHighlight from './SequenceFeatureHoverHighlight.js';
+export default function SequenceFeatureHoverHighlightExtensionF(pluginManager) {
+    addExtensionElement(pluginManager, 'LinearGenomeView-TracksContainerComponent', SequenceFeatureHoverHighlight);
+}

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

@@ -0,0 +1,3 @@
+import type { SequenceSearchModeProps } from './searchModes.ts';
+declare const SequencePatternPanel: ({ model, handleClose, }: SequenceSearchModeProps) => import("react").JSX.Element;
+export default SequencePatternPanel;

package/esm/LinearGenomeView/components/SequencePatternPanel.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { LabeledCheckbox } from '@jbrowse/core/ui';
+import { TextField } from '@mui/material';
+import { observer } from 'mobx-react';
+import SearchPanelForm from './SearchPanelForm.js';
+import StrandCheckboxes from './StrandCheckboxes.js';
+import { addReferenceScanTrack } from './searchModes.js';
+const SequencePatternPanel = observer(function SequencePatternPanel({ model, handleClose, }) {
+    const [value, setValue] = useState('');
+    const [caseInsensitive, setCaseInsensitive] = useState(true);
+    const [searchForward, setSearchForward] = useState(true);
+    const [searchReverse, setSearchReverse] = useState(true);
+    let patternError;
+    try {
+        new RegExp(value);
+    }
+    catch (e) {
+        patternError = e;
+    }
+    const canSubmit = !!value && !patternError && (searchForward || searchReverse);
+    function handleSubmit() {
+        addReferenceScanTrack(model, {
+            trackId: `sequence_search_${Date.now()}`,
+            name: `Sequence search ${value}`,
+            adapter: {
+                type: 'SequenceSearchAdapter',
+                search: value,
+                searchForward,
+                searchReverse,
+                caseInsensitive,
+            },
+        });
+        handleClose();
+    }
+    return (_jsxs(SearchPanelForm, { onSubmit: handleSubmit, handleClose: handleClose, submitDisabled: !canSubmit, children: [_jsx(TextField, { size: "small", value: value, onChange: e => {
+                    setValue(e.target.value);
+                }, label: "Sequence pattern", placeholder: "e.g. AACT(C|T)", error: !!patternError, helperText: patternError ? `${patternError}` : 'Plain sequence or a regex' }), _jsx(StrandCheckboxes, { searchForward: searchForward, searchReverse: searchReverse, setSearchForward: setSearchForward, setSearchReverse: setSearchReverse, children: _jsx(LabeledCheckbox, { size: "small", checked: caseInsensitive, onChange: val => {
+                        setCaseInsensitive(val);
+                    }, label: "Case insensitive" }) })] }));
+});
+export default SequencePatternPanel;

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

@@ -4,5 +4,5 @@ declare const SequenceSearchDialog: ({ model, handleClose, }: {
         showTrack: (trackId: string) => void;
     };
     handleClose: () => void;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export default SequenceSearchDialog;

package/esm/LinearGenomeView/components/SequenceSearchDialog.js

@@ -1,65 +1,43 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { Dialog } from '@jbrowse/core/ui';
-import { getSession, isSessionWithAddTracks } from '@jbrowse/core/util';
 import { makeStyles } from '@jbrowse/core/util/tss-react';
-import { getSnapshot } from '@jbrowse/mobx-state-tree';
-import { Button, Checkbox, DialogActions, DialogContent, FormControlLabel, FormGroup, TextField, Typography, } from '@mui/material';
+import { ToggleButton, ToggleButtonGroup } from '@mui/material';
 import { observer } from 'mobx-react';
+import CrisprGuidePanel from './CrisprGuidePanel.js';
+import MotifListPanel from './MotifListPanel.js';
+import SequencePatternPanel from './SequencePatternPanel.js';
 const useStyles = makeStyles()({
-    dialogContent: {
-        width: '40em',
+    modeBar: {
+        padding: '12px 24px 0',
     },
 });
+const MODES = [
+    {
+        id: 'pattern',
+        label: 'Sequence pattern',
+        ReactComponent: SequencePatternPanel,
+    },
+    {
+        id: 'crispr',
+        label: 'CRISPR guide RNAs',
+        ReactComponent: CrisprGuidePanel,
+    },
+    {
+        id: 'motifs',
+        label: 'Motif list',
+        ReactComponent: MotifListPanel,
+    },
+];
 const SequenceSearchDialog = observer(function SequenceSearchDialog({ model, handleClose, }) {
     const { classes } = useStyles();
-    const [value, setValue] = useState('');
-    const [searchForward, setSearchForward] = useState(true);
-    const [searchReverse, setSearchReverse] = useState(true);
-    const [caseInsensitive, setCaseInsensitive] = useState(true);
-    let error;
-    try {
-        new RegExp(value);
-    }
-    catch (e) {
-        error = e;
-    }
-    return (_jsxs(Dialog, { maxWidth: "xl", open: true, onClose: handleClose, title: "Sequence search", children: [_jsxs(DialogContent, { className: classes.dialogContent, children: [_jsx(Typography, { children: "Supply a sequence to search for. A track will be created with the resulting matches once submitted. You can also supply regex style expressions e.g. AACT(C|T)." }), _jsx(TextField, { value: value, onChange: e => {
-                            setValue(e.target.value);
-                        }, helperText: "Sequence search pattern" }), _jsxs(FormGroup, { children: [_jsx(FormControlLabel, { control: _jsx(Checkbox, { checked: searchForward, onChange: event => {
-                                        setSearchForward(event.target.checked);
-                                    } }), label: "Search forward strand" }), _jsx(FormControlLabel, { control: _jsx(Checkbox, { checked: searchReverse, onChange: event => {
-                                        setSearchReverse(event.target.checked);
-                                    } }), label: "Search reverse strand" }), _jsx(FormControlLabel, { control: _jsx(Checkbox, { checked: caseInsensitive, onChange: event => {
-                                        setCaseInsensitive(event.target.checked);
-                                    } }), label: "Case insensitive" })] }), error ? _jsx(Typography, { color: "error", children: `${error}` }) : null] }), _jsxs(DialogActions, { children: [_jsx(Button, { onClick: () => {
-                            if (value) {
-                                const trackId = `sequence_search_${Date.now()}`;
-                                const session = getSession(model);
-                                const { assemblyManager } = session;
-                                const assemblyName = model.assemblyNames[0];
-                                if (isSessionWithAddTracks(session)) {
-                                    session.addTrackConf({
-                                        trackId,
-                                        name: `Sequence search ${value}`,
-                                        assemblyNames: [assemblyName],
-                                        type: 'FeatureTrack',
-                                        adapter: {
-                                            type: 'SequenceSearchAdapter',
-                                            search: value,
-                                            searchForward,
-                                            searchReverse,
-                                            caseInsensitive,
-                                            sequenceAdapter: getSnapshot(assemblyManager.get(assemblyName)?.configuration.sequence
-                                                .adapter),
-                                        },
-                                    });
-                                    model.showTrack(trackId);
-                                }
-                            }
-                            handleClose();
-                        }, variant: "contained", color: "primary", children: "Submit" }), _jsx(Button, { onClick: () => {
-                            handleClose();
-                        }, variant: "contained", color: "secondary", children: "Close" })] })] }));
+    const [modeId, setModeId] = useState(MODES[0].id);
+    const active = MODES.find(m => m.id === modeId) ?? MODES[0];
+    const { ReactComponent } = active;
+    return (_jsxs(Dialog, { maxWidth: "xl", open: true, onClose: handleClose, title: "Sequence search", children: [_jsx("div", { className: classes.modeBar, children: _jsx(ToggleButtonGroup, { exclusive: true, fullWidth: true, size: "small", value: active.id, onChange: (_event, value) => {
+                        if (value) {
+                            setModeId(value);
+                        }
+                    }, children: MODES.map(m => (_jsx(ToggleButton, { value: m.id, children: m.label }, m.id))) }) }), _jsx(ReactComponent, { model: model, handleClose: handleClose })] }));
 });
 export default SequenceSearchDialog;

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

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

package/esm/LinearGenomeView/components/StrandCheckboxes.js

@@ -0,0 +1,13 @@
+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';
+// 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, }) {
+    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] }));
+}

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

@@ -4,5 +4,5 @@ type LGV = LinearGenomeViewModel;
 declare const TrackContainer: ({ model, track, }: {
     model: LGV;
     track: BaseTrackModel;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export default TrackContainer;