@jbrowse/plugin-linear-genome-view 2.5.0 → 2.6.2

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

@@ -1,6 +1,7 @@
+import React from 'react';
 import { LinearGenomeViewModel } from '..';
 type LGV = LinearGenomeViewModel;
 declare const _default: ({ model }: {
     model: LGV;
-}) => JSX.Element;
+}) => React.JSX.Element;
 export default _default;

package/esm/LinearGenomeView/components/ImportForm.js

@@ -140,4 +140,3 @@ export default observer(function ({ model }) {
                                     model.showAllRegionsInAssembly(selectedAsm);
                                 }, variant: "contained", color: "secondary" }, "Show all regions in assembly"))))))));
 });
-//# sourceMappingURL=ImportForm.js.map

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

@@ -1,6 +1,7 @@
+import React from 'react';
 import { LinearGenomeViewModel } from '..';
 type LGV = LinearGenomeViewModel;
 declare const LinearGenomeView: ({ model }: {
     model: LGV;
-}) => JSX.Element;
+}) => React.JSX.Element;
 export default LinearGenomeView;

package/esm/LinearGenomeView/components/LinearGenomeView.js

@@ -1,12 +1,13 @@
-import React from 'react';
+import React, { lazy } from 'react';
 import { Button, Paper, Typography } from '@mui/material';
 import { makeStyles } from 'tss-react/mui';
-import { TrackSelector as TrackSelectorIcon } from '@jbrowse/core/ui/Icons';
 import { LoadingEllipses } from '@jbrowse/core/ui';
 import { observer } from 'mobx-react';
+// icons
+import { TrackSelector as TrackSelectorIcon } from '@jbrowse/core/ui/Icons';
 import TrackContainer from './TrackContainer';
 import TracksContainer from './TracksContainer';
-import ImportForm from './ImportForm';
+const ImportForm = lazy(() => import('./ImportForm'));
 const useStyles = makeStyles()(theme => ({
     note: {
         textAlign: 'center',
@@ -33,4 +34,3 @@ const LinearGenomeView = observer(({ model }) => {
             React.createElement(Button, { variant: "contained", color: "primary", onClick: model.activateTrackSelector, style: { zIndex: 1000 }, startIcon: React.createElement(TrackSelectorIcon, null) }, "Open track selector"))) : (React.createElement("div", { style: { height: '48px' } })))) : (tracks.map(track => (React.createElement(TrackContainer, { key: track.id, model: model, track: track })))))));
 });
 export default LinearGenomeView;
-//# sourceMappingURL=LinearGenomeView.js.map

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

@@ -1,5 +1,6 @@
+import React from 'react';
 import { LinearGenomeViewModel } from '..';
-declare const MiniControls: (props: {
+declare const MiniControls: ({ model, }: {
     model: LinearGenomeViewModel;
-}) => JSX.Element | null;
+}) => React.JSX.Element | null;
 export default MiniControls;

package/esm/LinearGenomeView/components/MiniControls.js

@@ -1,27 +1,29 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { observer } from 'mobx-react';
 import { IconButton, Paper } from '@mui/material';
-import Menu from '@jbrowse/core/ui/Menu';
 // icons
 import ZoomIn from '@mui/icons-material/ZoomIn';
 import ZoomOut from '@mui/icons-material/ZoomOut';
 import ArrowDown from '@mui/icons-material/KeyboardArrowDown';
-const MiniControls = observer((props) => {
-    const { model } = props;
+import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton';
+import { makeStyles } from 'tss-react/mui';
+const useStyles = makeStyles()(theme => ({
+    bg: {
+        position: 'absolute',
+        right: 0,
+        zIndex: 1001,
+        background: theme.palette.background.paper,
+    },
+}));
+const MiniControls = observer(function ({ model, }) {
+    const { classes } = useStyles();
     const { bpPerPx, maxBpPerPx, minBpPerPx, scaleFactor, hideHeader } = model;
-    const [anchorEl, setAnchorEl] = useState();
-    return hideHeader ? (React.createElement("div", { style: { position: 'absolute', right: '0px', zIndex: '1001' } },
-        React.createElement(Paper, { style: { background: '#aaa7' } },
-            React.createElement(IconButton, { onClick: event => setAnchorEl(event.currentTarget) },
-                React.createElement(ArrowDown, { fontSize: "small" })),
-            React.createElement(IconButton, { "data-testid": "zoom_out", onClick: () => model.zoom(bpPerPx * 2), disabled: bpPerPx >= maxBpPerPx - 0.0001 || scaleFactor !== 1 },
-                React.createElement(ZoomOut, { fontSize: "small" })),
-            React.createElement(IconButton, { "data-testid": "zoom_in", onClick: () => model.zoom(model.bpPerPx / 2), disabled: bpPerPx <= minBpPerPx + 0.0001 || scaleFactor !== 1 },
-                React.createElement(ZoomIn, { fontSize: "small" })),
-            React.createElement(Menu, { anchorEl: anchorEl, open: Boolean(anchorEl), onMenuItemClick: (_, callback) => {
-                    callback();
-                    setAnchorEl(undefined);
-                }, onClose: () => setAnchorEl(undefined), menuItems: model.menuItems() })))) : null;
+    return hideHeader ? (React.createElement(Paper, { className: classes.bg },
+        React.createElement(CascadingMenuButton, { menuItems: model.menuItems() },
+            React.createElement(ArrowDown, { fontSize: "small" })),
+        React.createElement(IconButton, { "data-testid": "zoom_out", onClick: () => model.zoom(bpPerPx * 2), disabled: bpPerPx >= maxBpPerPx - 0.0001 || scaleFactor !== 1 },
+            React.createElement(ZoomOut, { fontSize: "small" })),
+        React.createElement(IconButton, { "data-testid": "zoom_in", onClick: () => model.zoom(model.bpPerPx / 2), disabled: bpPerPx <= minBpPerPx + 0.0001 || scaleFactor !== 1 },
+            React.createElement(ZoomIn, { fontSize: "small" })))) : null;
 });
 export default MiniControls;
-//# sourceMappingURL=MiniControls.js.map

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

@@ -6,5 +6,5 @@ declare const _default: ({ model, overview, ControlComponent, }: {
     model: LGV;
     overview: Base1DViewModel;
     ControlComponent?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
-}) => JSX.Element;
+}) => React.JSX.Element;
 export default _default;

package/esm/LinearGenomeView/components/OverviewRubberband.js

@@ -128,4 +128,3 @@ export default observer(function OverviewRubberband({ model, overview, ControlCo
         leftBpOffset && rightBpOffset ? (React.createElement(RubberbandSpan, { leftBpOffset: leftBpOffset, rightBpOffset: rightBpOffset, width: Math.abs(width), left: left })) : null,
         React.createElement("div", { "data-testid": "rubberband_controls", className: classes.rubberbandControl, ref: controlsRef, onMouseDown: mouseDown, onMouseOut: mouseOut, onMouseMove: mouseMove }, ControlComponent)));
 });
-//# sourceMappingURL=OverviewRubberband.js.map

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

@@ -5,12 +5,12 @@ declare const Polygon: ({ model, overview, useOffset, }: {
     model: LGV;
     overview: Base1DViewModel;
     useOffset?: boolean | undefined;
-}) => JSX.Element | null;
+}) => React.JSX.Element | null;
 type LGV = LinearGenomeViewModel;
 declare const _default: ({ model, children, }: {
     model: LGV;
     children: React.ReactNode;
-}) => JSX.Element;
+}) => React.JSX.Element;
 export default _default;
 export { Polygon };
 export { default as Cytobands } from './Cytobands';

package/esm/LinearGenomeView/components/OverviewScalebar.js

@@ -72,11 +72,14 @@ const Polygon = observer(function ({ model, overview, useOffset = true, }) {
     const { contentBlocks, totalWidthPxWithoutBorders } = dynamicBlocks;
     const { tertiary, primary } = theme.palette;
     const polygonColor = tertiary ? tertiary.light : primary.light;
+    // catches possible null from at's below
     if (!contentBlocks.length) {
         return null;
     }
-    const first = contentBlocks[0];
-    const last = contentBlocks[contentBlocks.length - 1];
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    const first = contentBlocks.at(0);
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    const last = contentBlocks.at(-1);
     const topLeft = (overview.bpToPx({
         ...first,
         coord: first.reversed ? first.end : first.start,
@@ -148,15 +151,18 @@ const Scalebar = observer(function ({ model, scale, overview, }) {
     const overviewVisibleRegions = overview.dynamicBlocks;
     const { tertiary, primary } = theme.palette;
     const scalebarColor = tertiary ? tertiary.light : primary.light;
+    // catches possible null from at's below
     if (!visibleRegions.length) {
         return null;
     }
-    const first = visibleRegions[0];
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    const first = visibleRegions.at(0);
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    const last = visibleRegions.at(-1);
     const firstOverviewPx = overview.bpToPx({
         ...first,
         coord: first.reversed ? first.end : first.start,
     }) || 0;
-    const last = visibleRegions[visibleRegions.length - 1];
     const lastOverviewPx = overview.bpToPx({
         ...last,
         coord: last.reversed ? last.start : last.end,
@@ -200,4 +206,3 @@ export default observer(function OverviewScalebar({ model, children, }) {
 });
 export { Polygon };
 export { default as Cytobands } from './Cytobands';
-//# sourceMappingURL=OverviewScalebar.js.map

package/esm/LinearGenomeView/components/RefNameAutocomplete/AutocompleteTextField.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { AutocompleteRenderInputParams, TextFieldProps as TFP } from '@mui/material';
+export default function AutocompleteTextField({ TextFieldProps, inputBoxVal, params, showHelp, setInputValue, setCurrentSearch, }: {
+    TextFieldProps: TFP;
+    inputBoxVal: string;
+    showHelp?: boolean;
+    params: AutocompleteRenderInputParams;
+    setInputValue: (arg: string) => void;
+    setCurrentSearch: (arg: string) => void;
+}): React.JSX.Element;

package/esm/LinearGenomeView/components/RefNameAutocomplete/AutocompleteTextField.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { TextField, } from '@mui/material';
+// locals
+import EndAdornment from './EndAdornment';
+export default function AutocompleteTextField({ TextFieldProps, inputBoxVal, params, showHelp, setInputValue, setCurrentSearch, }) {
+    const { helperText, InputProps = {} } = TextFieldProps;
+    return (React.createElement(TextField, { onBlur: () => 
+        // this is used to restore a refName or the non-user-typed input
+        // to the box on blurring
+        setInputValue(inputBoxVal), ...params, ...TextFieldProps, size: "small", helperText: helperText, InputProps: {
+            ...params.InputProps,
+            ...InputProps,
+            endAdornment: (React.createElement(EndAdornment, { showHelp: showHelp, endAdornment: params.InputProps.endAdornment })),
+        }, placeholder: "Search for location", onChange: e => setCurrentSearch(e.target.value) }));
+}

package/esm/LinearGenomeView/components/RefNameAutocomplete/EndAdornment.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export default function EndAdornment({ showHelp, endAdornment, }: {
+    showHelp?: boolean;
+    endAdornment: React.ReactNode;
+}): React.JSX.Element;

package/esm/LinearGenomeView/components/RefNameAutocomplete/EndAdornment.js

@@ -0,0 +1,22 @@
+import React, { Suspense, lazy, useState } from 'react';
+import { IconButton, InputAdornment } from '@mui/material';
+// icons
+import SearchIcon from '@mui/icons-material/Search';
+import HelpIcon from '@mui/icons-material/Help';
+// lazy
+const HelpDialog = lazy(() => import('./HelpDialog'));
+function HelpAdornment() {
+    const [isHelpDialogDisplayed, setHelpDialogDisplayed] = useState(false);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(IconButton, { onClick: () => setHelpDialogDisplayed(true), size: "small" },
+            React.createElement(HelpIcon, { fontSize: "small" })),
+        isHelpDialogDisplayed ? (React.createElement(Suspense, { fallback: React.createElement("div", null) },
+            React.createElement(HelpDialog, { handleClose: () => setHelpDialogDisplayed(false) }))) : null));
+}
+export default function EndAdornment({ showHelp, endAdornment, }) {
+    return (React.createElement(React.Fragment, null,
+        React.createElement(InputAdornment, { position: "end", style: { marginRight: 7 } },
+            React.createElement(SearchIcon, { fontSize: "small" }),
+            showHelp ? React.createElement(HelpAdornment, null) : null),
+        endAdornment));
+}

package/esm/LinearGenomeView/components/{HelpDialog.d.ts → RefNameAutocomplete/HelpDialog.d.ts}

@@ -1,3 +1,4 @@
+import React from 'react';
 export default function HelpDialog({ handleClose, }: {
     handleClose: () => void;
-}): JSX.Element;
+}): React.JSX.Element;

package/esm/LinearGenomeView/components/{HelpDialog.js → RefNameAutocomplete/HelpDialog.js}

@@ -40,4 +40,3 @@ export default function HelpDialog({ handleClose, }) {
         React.createElement(DialogActions, null,
             React.createElement(Button, { onClick: () => handleClose(), color: "primary" }, "Close"))));
 }
-//# sourceMappingURL=HelpDialog.js.map

package/esm/LinearGenomeView/components/RefNameAutocomplete/index.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import BaseResult from '@jbrowse/core/TextSearch/BaseResults';
+import { TextFieldProps as TFP } from '@mui/material';
+import { LinearGenomeViewModel } from '../../model';
+declare const _default: ({ model, onSelect, assemblyName, style, fetchResults, onChange, value, showHelp, minWidth, maxWidth, TextFieldProps, }: {
+    model: LinearGenomeViewModel;
+    onSelect?: ((region: BaseResult) => void) | undefined;
+    onChange?: ((val: string) => void) | undefined;
+    assemblyName?: string | undefined;
+    value?: string | undefined;
+    fetchResults: (query: string) => Promise<BaseResult[]>;
+    style?: React.CSSProperties | undefined;
+    minWidth?: number | undefined;
+    maxWidth?: number | undefined;
+    showHelp?: boolean | undefined;
+    TextFieldProps?: TFP | undefined;
+}) => React.JSX.Element;
+export default _default;

package/esm/LinearGenomeView/components/RefNameAutocomplete/index.js

@@ -0,0 +1,82 @@
+import React, { useEffect, useState } from 'react';
+import { observer } from 'mobx-react';
+import { getSession, useDebounce, measureText } from '@jbrowse/core/util';
+import BaseResult, { RefSequenceResult, } from '@jbrowse/core/TextSearch/BaseResults';
+import { Autocomplete } from '@mui/material';
+import { getDeduplicatedResult, getFiltered } from './util';
+import AutocompleteTextField from './AutocompleteTextField';
+export default observer(function RefNameAutocomplete({ model, onSelect, assemblyName, style, fetchResults, onChange, value, showHelp = true, minWidth = 200, maxWidth = 550, TextFieldProps = {}, }) {
+    var _a;
+    const session = getSession(model);
+    const { assemblyManager } = session;
+    const [open, setOpen] = useState(false);
+    const [loaded, setLoaded] = useState(true);
+    const [currentSearch, setCurrentSearch] = useState('');
+    const [inputValue, setInputValue] = useState('');
+    const [searchOptions, setSearchOptions] = useState();
+    const debouncedSearch = useDebounce(currentSearch, 300);
+    const assembly = assemblyName ? assemblyManager.get(assemblyName) : undefined;
+    const { coarseVisibleLocStrings, hasDisplayedRegions } = model;
+    useEffect(() => {
+        let active = true;
+        (async () => {
+            try {
+                if (debouncedSearch === '' || !assemblyName) {
+                    return;
+                }
+                setLoaded(false);
+                const results = await fetchResults(debouncedSearch);
+                if (active) {
+                    setLoaded(true);
+                    setSearchOptions(getDeduplicatedResult(results));
+                }
+            }
+            catch (e) {
+                console.error(e);
+                if (active) {
+                    session.notify(`${e}`, 'error');
+                }
+            }
+        })();
+        return () => {
+            active = false;
+        };
+    }, [assemblyName, fetchResults, debouncedSearch, session, model]);
+    const inputBoxVal = coarseVisibleLocStrings || value || '';
+    // heuristic, text width + 60 accommodates help icon and search icon
+    const width = Math.min(Math.max(measureText(inputBoxVal, 14) + 100, minWidth), maxWidth);
+    // notes on implementation:
+    // The selectOnFocus setting helps highlight the field when clicked
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Autocomplete, { "data-testid": "autocomplete", disableListWrap: true, disableClearable: true, disabled: !assemblyName, freeSolo: true, includeInputInList: true, selectOnFocus: true, style: { ...style, width }, value: inputBoxVal, loading: !loaded, inputValue: inputValue, onInputChange: (_event, newInputValue) => {
+                setInputValue(newInputValue);
+                onChange === null || onChange === void 0 ? void 0 : onChange(newInputValue);
+            }, loadingText: "loading results", open: open, onOpen: () => setOpen(true), onClose: () => {
+                setOpen(false);
+                setLoaded(true);
+                if (hasDisplayedRegions) {
+                    setCurrentSearch('');
+                    setSearchOptions(undefined);
+                }
+            }, onChange: (_event, selectedOption) => {
+                if (!selectedOption || !assemblyName) {
+                    return;
+                }
+                if (typeof selectedOption === 'string') {
+                    // handles string inputs on keyPress enter
+                    onSelect === null || onSelect === void 0 ? void 0 : onSelect(new BaseResult({ label: selectedOption }));
+                }
+                else {
+                    onSelect === null || onSelect === void 0 ? void 0 : onSelect(selectedOption.result);
+                }
+                setInputValue(inputBoxVal);
+            }, options: !(searchOptions === null || searchOptions === void 0 ? void 0 : searchOptions.length)
+                ? ((_a = assembly === null || assembly === void 0 ? void 0 : assembly.regions) === null || _a === void 0 ? void 0 : _a.map(option => ({
+                    result: new RefSequenceResult({
+                        refName: option.refName,
+                        label: option.refName,
+                        matchedAttribute: 'refName',
+                    }),
+                }))) || []
+                : searchOptions, getOptionDisabled: option => option.group === 'limitOption', filterOptions: (opts, { inputValue }) => getFiltered(opts, inputValue), renderInput: params => (React.createElement(AutocompleteTextField, { showHelp: showHelp, params: params, inputBoxVal: inputBoxVal, TextFieldProps: TextFieldProps, setCurrentSearch: setCurrentSearch, setInputValue: setInputValue })), getOptionLabel: opt => typeof opt === 'string' ? opt : opt.result.getDisplayString() })));
+});

package/esm/LinearGenomeView/components/RefNameAutocomplete/util.d.ts

@@ -0,0 +1,12 @@
+import BaseResult from '@jbrowse/core/TextSearch/BaseResults';
+export interface Option {
+    group?: string;
+    result: BaseResult;
+}
+export declare function getFiltered(opts: Option[], inputValue: string): Option[];
+export declare function aggregateResults(results: BaseResult[]): {
+    [key: string]: BaseResult[];
+};
+export declare function getDeduplicatedResult(results: BaseResult[]): {
+    result: BaseResult;
+}[];

package/esm/LinearGenomeView/components/RefNameAutocomplete/util.js

@@ -0,0 +1,49 @@
+import BaseResult from '@jbrowse/core/TextSearch/BaseResults';
+// filter so don't need re-filtering
+function filterOptions(options, searchQuery) {
+    return options.filter(({ result }) => result.getLabel().toLowerCase().includes(searchQuery) ||
+        result.matchedObject);
+}
+// the logic of this method is to only apply a filter to RefSequenceResults
+// because they do not have a matchedObject. the trix search results already
+export function getFiltered(opts, inputValue) {
+    const filtered = filterOptions(opts, inputValue.toLocaleLowerCase());
+    return [
+        ...filtered.slice(0, 100),
+        ...(filtered.length > 100
+            ? [
+                {
+                    group: 'limitOption',
+                    result: new BaseResult({
+                        label: 'keep typing for more results',
+                    }),
+                },
+            ]
+            : []),
+    ];
+}
+export function aggregateResults(results) {
+    const m = {};
+    for (const result of results) {
+        const displayString = result.getDisplayString();
+        if (!m[displayString]) {
+            m[displayString] = [];
+        }
+        m[displayString].push(result);
+    }
+    return m;
+}
+export function getDeduplicatedResult(results) {
+    return Object.entries(aggregateResults(results)).map(([displayString, results]) => results.length === 1
+        ? {
+            result: results[0],
+        }
+        : {
+            // deduplicate a "multi-result"
+            result: new BaseResult({
+                displayString,
+                results,
+                label: displayString,
+            }),
+        });
+}

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

@@ -4,6 +4,6 @@ type LGV = LinearGenomeViewModel;
 declare function Rubberband({ model, ControlComponent, }: {
     model: LGV;
     ControlComponent?: React.ReactElement;
-}): JSX.Element;
+}): React.JSX.Element;
 declare const _default: typeof Rubberband;
 export default _default;

package/esm/LinearGenomeView/components/Rubberband.js

@@ -26,4 +26,3 @@ function Rubberband({ model, ControlComponent = React.createElement("div", null)
         React.createElement("div", { "data-testid": "rubberband_controls", className: classes.rubberbandControl, ref: ref, onMouseDown: mouseDown, onMouseMove: mouseMove, onMouseOut: mouseOut }, ControlComponent)));
 }
 export default observer(Rubberband);
-//# sourceMappingURL=Rubberband.js.map

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

@@ -1,3 +1,4 @@
+import React from 'react';
 interface Offset {
     coord: number;
     refName?: string;
@@ -9,5 +10,5 @@ export default function RubberbandSpan({ leftBpOffset, rightBpOffset, numOfBpSel
     numOfBpSelected?: number;
     left: number;
     width: number;
-}): JSX.Element;
+}): React.JSX.Element;
 export {};

package/esm/LinearGenomeView/components/RubberbandSpan.js

@@ -47,4 +47,3 @@ export default function RubberbandSpan({ leftBpOffset, rightBpOffset, numOfBpSel
             toLocale(numOfBpSelected),
             " bp")) : null)));
 }
-//# sourceMappingURL=RubberbandSpan.js.map

package/esm/LinearGenomeView/components/Scalebar.js

@@ -109,4 +109,3 @@ const Scalebar = React.forwardRef(({ model, style, className, ...other }, ref) =
         React.createElement(RenderedRefNameLabels, { model: model })));
 });
 export default observer(Scalebar);
-//# sourceMappingURL=Scalebar.js.map

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

@@ -1,7 +1,8 @@
+import React from 'react';
 import { LinearGenomeViewModel } from '..';
 declare function SearchBox({ model, showHelp, }: {
     showHelp?: boolean;
     model: LinearGenomeViewModel;
-}): JSX.Element;
+}): React.JSX.Element;
 declare const _default: typeof SearchBox;
 export default _default;

package/esm/LinearGenomeView/components/SearchBox.js

@@ -99,4 +99,3 @@ function SearchBox({ model, showHelp, }) {
         } }));
 }
 export default observer(SearchBox);
-//# sourceMappingURL=SearchBox.js.map

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

@@ -1,3 +1,4 @@
+import React from 'react';
 import { LinearGenomeViewModel } from '../..';
 import BaseResult from '@jbrowse/core/TextSearch/BaseResults';
 export default function SearchResultsDialog({ model, assemblyName, searchQuery, searchResults, handleClose, }: {
@@ -6,4 +7,4 @@ export default function SearchResultsDialog({ model, assemblyName, searchQuery,
     searchQuery: string;
     searchResults?: BaseResult[];
     handleClose: () => void;
-}): JSX.Element;
+}): React.JSX.Element;

package/esm/LinearGenomeView/components/SearchResultsDialog.js

@@ -15,4 +15,3 @@ export default function SearchResultsDialog({ model, assemblyName, searchQuery,
         React.createElement(DialogActions, null,
             React.createElement(Button, { onClick: () => handleClose(), color: "primary" }, "Cancel"))));
 }
-//# sourceMappingURL=SearchResultsDialog.js.map

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

@@ -1,3 +1,4 @@
+import React from 'react';
 import BaseResult from '@jbrowse/core/TextSearch/BaseResults';
 import { LinearGenomeViewModel } from '../..';
 export default function SearchResultsTable({ searchResults, assemblyName: optAssemblyName, model, handleClose, }: {
@@ -5,4 +6,4 @@ export default function SearchResultsTable({ searchResults, assemblyName: optAss
     assemblyName?: string;
     model: LinearGenomeViewModel;
     handleClose: () => void;
-}): JSX.Element;
+}): React.JSX.Element;

package/esm/LinearGenomeView/components/SearchResultsTable.js

@@ -74,4 +74,3 @@ export default function SearchResultsTable({ searchResults, assemblyName: optAss
                             handleClose();
                         }, color: "primary", variant: "contained" }, "Go")))))))));
 }
-//# sourceMappingURL=SearchResultsTable.js.map

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

@@ -1,9 +1,10 @@
+import React from 'react';
 declare function SequenceDialog({ model, handleClose, }: {
     model: {
         assemblyNames: string[];
         toggleTrack(trackId: string): void;
     };
     handleClose: () => void;
-}): JSX.Element;
+}): React.JSX.Element;
 declare const _default: typeof SequenceDialog;
 export default _default;

package/esm/LinearGenomeView/components/SequenceSearchDialog.js

@@ -61,4 +61,3 @@ function SequenceDialog({ model, handleClose, }) {
             React.createElement(Button, { onClick: () => handleClose(), variant: "contained", color: "secondary" }, "Close"))));
 }
 export default observer(SequenceDialog);
-//# sourceMappingURL=SequenceSearchDialog.js.map

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

@@ -1,9 +1,9 @@
+import React from 'react';
 import { BaseTrackModel } from '@jbrowse/core/pluggableElementTypes/models';
 import { LinearGenomeViewModel } from '..';
 type LGV = LinearGenomeViewModel;
-declare function TrackContainer({ model, track, }: {
+declare const _default: ({ model, track, }: {
     model: LGV;
     track: BaseTrackModel;
-}): JSX.Element;
-declare const _default: typeof TrackContainer;
+}) => React.JSX.Element;
 export default _default;