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

package/dist/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/dist/LinearGenomeView/components/ImportForm.js

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

package/dist/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/dist/LinearGenomeView/components/LinearGenomeView.js

@@ -1,17 +1,41 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 const material_1 = require("@mui/material");
 const mui_1 = require("tss-react/mui");
-const Icons_1 = require("@jbrowse/core/ui/Icons");
 const ui_1 = require("@jbrowse/core/ui");
 const mobx_react_1 = require("mobx-react");
+// icons
+const Icons_1 = require("@jbrowse/core/ui/Icons");
 const TrackContainer_1 = __importDefault(require("./TrackContainer"));
 const TracksContainer_1 = __importDefault(require("./TracksContainer"));
-const ImportForm_1 = __importDefault(require("./ImportForm"));
+const ImportForm = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./ImportForm'))));
 const useStyles = (0, mui_1.makeStyles)()(theme => ({
     note: {
         textAlign: 'center',
@@ -26,7 +50,7 @@ const LinearGenomeView = (0, mobx_react_1.observer)(({ model }) => {
         return react_1.default.createElement(ui_1.LoadingEllipses, { variant: "h6" });
     }
     if (!hasDisplayedRegions || error) {
-        return react_1.default.createElement(ImportForm_1.default, { model: model });
+        return react_1.default.createElement(ImportForm, { model: model });
     }
     const MiniControlsComponent = model.MiniControlsComponent();
     const HeaderComponent = model.HeaderComponent();
@@ -38,4 +62,3 @@ const LinearGenomeView = (0, mobx_react_1.observer)(({ model }) => {
             react_1.default.createElement(material_1.Button, { variant: "contained", color: "primary", onClick: model.activateTrackSelector, style: { zIndex: 1000 }, startIcon: react_1.default.createElement(Icons_1.TrackSelector, null) }, "Open track selector"))) : (react_1.default.createElement("div", { style: { height: '48px' } })))) : (tracks.map(track => (react_1.default.createElement(TrackContainer_1.default, { key: track.id, model: model, track: track })))))));
 });
 exports.default = LinearGenomeView;
-//# sourceMappingURL=LinearGenomeView.js.map

package/dist/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/dist/LinearGenomeView/components/MiniControls.js

@@ -1,55 +1,34 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
+const react_1 = __importDefault(require("react"));
 const mobx_react_1 = require("mobx-react");
 const material_1 = require("@mui/material");
-const Menu_1 = __importDefault(require("@jbrowse/core/ui/Menu"));
 // icons
 const ZoomIn_1 = __importDefault(require("@mui/icons-material/ZoomIn"));
 const ZoomOut_1 = __importDefault(require("@mui/icons-material/ZoomOut"));
 const KeyboardArrowDown_1 = __importDefault(require("@mui/icons-material/KeyboardArrowDown"));
-const MiniControls = (0, mobx_react_1.observer)((props) => {
-    const { model } = props;
+const CascadingMenuButton_1 = __importDefault(require("@jbrowse/core/ui/CascadingMenuButton"));
+const mui_1 = require("tss-react/mui");
+const useStyles = (0, mui_1.makeStyles)()(theme => ({
+    bg: {
+        position: 'absolute',
+        right: 0,
+        zIndex: 1001,
+        background: theme.palette.background.paper,
+    },
+}));
+const MiniControls = (0, mobx_react_1.observer)(function ({ model, }) {
+    const { classes } = useStyles();
     const { bpPerPx, maxBpPerPx, minBpPerPx, scaleFactor, hideHeader } = model;
-    const [anchorEl, setAnchorEl] = (0, react_1.useState)();
-    return hideHeader ? (react_1.default.createElement("div", { style: { position: 'absolute', right: '0px', zIndex: '1001' } },
-        react_1.default.createElement(material_1.Paper, { style: { background: '#aaa7' } },
-            react_1.default.createElement(material_1.IconButton, { onClick: event => setAnchorEl(event.currentTarget) },
-                react_1.default.createElement(KeyboardArrowDown_1.default, { fontSize: "small" })),
-            react_1.default.createElement(material_1.IconButton, { "data-testid": "zoom_out", onClick: () => model.zoom(bpPerPx * 2), disabled: bpPerPx >= maxBpPerPx - 0.0001 || scaleFactor !== 1 },
-                react_1.default.createElement(ZoomOut_1.default, { fontSize: "small" })),
-            react_1.default.createElement(material_1.IconButton, { "data-testid": "zoom_in", onClick: () => model.zoom(model.bpPerPx / 2), disabled: bpPerPx <= minBpPerPx + 0.0001 || scaleFactor !== 1 },
-                react_1.default.createElement(ZoomIn_1.default, { fontSize: "small" })),
-            react_1.default.createElement(Menu_1.default, { anchorEl: anchorEl, open: Boolean(anchorEl), onMenuItemClick: (_, callback) => {
-                    callback();
-                    setAnchorEl(undefined);
-                }, onClose: () => setAnchorEl(undefined), menuItems: model.menuItems() })))) : null;
+    return hideHeader ? (react_1.default.createElement(material_1.Paper, { className: classes.bg },
+        react_1.default.createElement(CascadingMenuButton_1.default, { menuItems: model.menuItems() },
+            react_1.default.createElement(KeyboardArrowDown_1.default, { fontSize: "small" })),
+        react_1.default.createElement(material_1.IconButton, { "data-testid": "zoom_out", onClick: () => model.zoom(bpPerPx * 2), disabled: bpPerPx >= maxBpPerPx - 0.0001 || scaleFactor !== 1 },
+            react_1.default.createElement(ZoomOut_1.default, { fontSize: "small" })),
+        react_1.default.createElement(material_1.IconButton, { "data-testid": "zoom_in", onClick: () => model.zoom(model.bpPerPx / 2), disabled: bpPerPx <= minBpPerPx + 0.0001 || scaleFactor !== 1 },
+            react_1.default.createElement(ZoomIn_1.default, { fontSize: "small" })))) : null;
 });
 exports.default = MiniControls;
-//# sourceMappingURL=MiniControls.js.map

package/dist/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/dist/LinearGenomeView/components/OverviewRubberband.js

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

package/dist/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/dist/LinearGenomeView/components/OverviewScalebar.js

@@ -78,11 +78,14 @@ const Polygon = (0, mobx_react_1.observer)(function ({ model, overview, useOffse
     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,
@@ -155,15 +158,18 @@ const Scalebar = (0, mobx_react_1.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,
@@ -207,4 +213,3 @@ exports.default = (0, mobx_react_1.observer)(function OverviewScalebar({ model,
 });
 var Cytobands_2 = require("./Cytobands");
 Object.defineProperty(exports, "Cytobands", { enumerable: true, get: function () { return __importDefault(Cytobands_2).default; } });
-//# sourceMappingURL=OverviewScalebar.js.map

package/dist/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/dist/LinearGenomeView/components/RefNameAutocomplete/AutocompleteTextField.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const material_1 = require("@mui/material");
+// locals
+const EndAdornment_1 = __importDefault(require("./EndAdornment"));
+function AutocompleteTextField({ TextFieldProps, inputBoxVal, params, showHelp, setInputValue, setCurrentSearch, }) {
+    const { helperText, InputProps = {} } = TextFieldProps;
+    return (react_1.default.createElement(material_1.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_1.default.createElement(EndAdornment_1.default, { showHelp: showHelp, endAdornment: params.InputProps.endAdornment })),
+        }, placeholder: "Search for location", onChange: e => setCurrentSearch(e.target.value) }));
+}
+exports.default = AutocompleteTextField;

package/dist/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/dist/LinearGenomeView/components/RefNameAutocomplete/EndAdornment.js

@@ -0,0 +1,51 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const material_1 = require("@mui/material");
+// icons
+const Search_1 = __importDefault(require("@mui/icons-material/Search"));
+const Help_1 = __importDefault(require("@mui/icons-material/Help"));
+// lazy
+const HelpDialog = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./HelpDialog'))));
+function HelpAdornment() {
+    const [isHelpDialogDisplayed, setHelpDialogDisplayed] = (0, react_1.useState)(false);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(material_1.IconButton, { onClick: () => setHelpDialogDisplayed(true), size: "small" },
+            react_1.default.createElement(Help_1.default, { fontSize: "small" })),
+        isHelpDialogDisplayed ? (react_1.default.createElement(react_1.Suspense, { fallback: react_1.default.createElement("div", null) },
+            react_1.default.createElement(HelpDialog, { handleClose: () => setHelpDialogDisplayed(false) }))) : null));
+}
+function EndAdornment({ showHelp, endAdornment, }) {
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(material_1.InputAdornment, { position: "end", style: { marginRight: 7 } },
+            react_1.default.createElement(Search_1.default, { fontSize: "small" }),
+            showHelp ? react_1.default.createElement(HelpAdornment, null) : null),
+        endAdornment));
+}
+exports.default = EndAdornment;

package/dist/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/dist/LinearGenomeView/components/{HelpDialog.js → RefNameAutocomplete/HelpDialog.js}

@@ -46,4 +46,3 @@ function HelpDialog({ handleClose, }) {
             react_1.default.createElement(material_1.Button, { onClick: () => handleClose(), color: "primary" }, "Close"))));
 }
 exports.default = HelpDialog;
-//# sourceMappingURL=HelpDialog.js.map

package/dist/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/dist/LinearGenomeView/components/RefNameAutocomplete/index.js

@@ -0,0 +1,110 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const mobx_react_1 = require("mobx-react");
+const util_1 = require("@jbrowse/core/util");
+const BaseResults_1 = __importStar(require("@jbrowse/core/TextSearch/BaseResults"));
+const material_1 = require("@mui/material");
+const util_2 = require("./util");
+const AutocompleteTextField_1 = __importDefault(require("./AutocompleteTextField"));
+exports.default = (0, mobx_react_1.observer)(function RefNameAutocomplete({ model, onSelect, assemblyName, style, fetchResults, onChange, value, showHelp = true, minWidth = 200, maxWidth = 550, TextFieldProps = {}, }) {
+    var _a;
+    const session = (0, util_1.getSession)(model);
+    const { assemblyManager } = session;
+    const [open, setOpen] = (0, react_1.useState)(false);
+    const [loaded, setLoaded] = (0, react_1.useState)(true);
+    const [currentSearch, setCurrentSearch] = (0, react_1.useState)('');
+    const [inputValue, setInputValue] = (0, react_1.useState)('');
+    const [searchOptions, setSearchOptions] = (0, react_1.useState)();
+    const debouncedSearch = (0, util_1.useDebounce)(currentSearch, 300);
+    const assembly = assemblyName ? assemblyManager.get(assemblyName) : undefined;
+    const { coarseVisibleLocStrings, hasDisplayedRegions } = model;
+    (0, react_1.useEffect)(() => {
+        let active = true;
+        (async () => {
+            try {
+                if (debouncedSearch === '' || !assemblyName) {
+                    return;
+                }
+                setLoaded(false);
+                const results = await fetchResults(debouncedSearch);
+                if (active) {
+                    setLoaded(true);
+                    setSearchOptions((0, util_2.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((0, util_1.measureText)(inputBoxVal, 14) + 100, minWidth), maxWidth);
+    // notes on implementation:
+    // The selectOnFocus setting helps highlight the field when clicked
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(material_1.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 BaseResults_1.default({ 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 BaseResults_1.RefSequenceResult({
+                        refName: option.refName,
+                        label: option.refName,
+                        matchedAttribute: 'refName',
+                    }),
+                }))) || []
+                : searchOptions, getOptionDisabled: option => option.group === 'limitOption', filterOptions: (opts, { inputValue }) => (0, util_2.getFiltered)(opts, inputValue), renderInput: params => (react_1.default.createElement(AutocompleteTextField_1.default, { showHelp: showHelp, params: params, inputBoxVal: inputBoxVal, TextFieldProps: TextFieldProps, setCurrentSearch: setCurrentSearch, setInputValue: setInputValue })), getOptionLabel: opt => typeof opt === 'string' ? opt : opt.result.getDisplayString() })));
+});

package/dist/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/dist/LinearGenomeView/components/RefNameAutocomplete/util.js

@@ -0,0 +1,58 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getDeduplicatedResult = exports.aggregateResults = exports.getFiltered = void 0;
+const BaseResults_1 = __importDefault(require("@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
+function getFiltered(opts, inputValue) {
+    const filtered = filterOptions(opts, inputValue.toLocaleLowerCase());
+    return [
+        ...filtered.slice(0, 100),
+        ...(filtered.length > 100
+            ? [
+                {
+                    group: 'limitOption',
+                    result: new BaseResults_1.default({
+                        label: 'keep typing for more results',
+                    }),
+                },
+            ]
+            : []),
+    ];
+}
+exports.getFiltered = getFiltered;
+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;
+}
+exports.aggregateResults = aggregateResults;
+function getDeduplicatedResult(results) {
+    return Object.entries(aggregateResults(results)).map(([displayString, results]) => results.length === 1
+        ? {
+            result: results[0],
+        }
+        : {
+            // deduplicate a "multi-result"
+            result: new BaseResults_1.default({
+                displayString,
+                results,
+                label: displayString,
+            }),
+        });
+}
+exports.getDeduplicatedResult = getDeduplicatedResult;

package/dist/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/dist/LinearGenomeView/components/Rubberband.js

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

package/dist/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/dist/LinearGenomeView/components/RubberbandSpan.js

@@ -73,4 +73,3 @@ function RubberbandSpan({ leftBpOffset, rightBpOffset, numOfBpSelected, left, wi
             " bp")) : null)));
 }
 exports.default = RubberbandSpan;
-//# sourceMappingURL=RubberbandSpan.js.map

package/dist/LinearGenomeView/components/Scalebar.js

@@ -114,4 +114,3 @@ const Scalebar = react_1.default.forwardRef(({ model, style, className, ...other
         react_1.default.createElement(RenderedRefNameLabels, { model: model })));
 });
 exports.default = (0, mobx_react_1.observer)(Scalebar);
-//# sourceMappingURL=Scalebar.js.map

package/dist/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/dist/LinearGenomeView/components/SearchBox.js

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

package/dist/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/dist/LinearGenomeView/components/SearchResultsDialog.js

@@ -21,4 +21,3 @@ function SearchResultsDialog({ model, assemblyName, searchQuery, searchResults,
             react_1.default.createElement(material_1.Button, { onClick: () => handleClose(), color: "primary" }, "Cancel"))));
 }
 exports.default = SearchResultsDialog;
-//# sourceMappingURL=SearchResultsDialog.js.map