@jbrowse/plugin-linear-genome-view 1.3.4 → 1.5.0

package/dist/plugin-linear-genome-view.cjs.development.js

@@ -22,12 +22,14 @@ var Typography = _interopDefault(require('@material-ui/core/Typography'));
 var MenuOpenIcon = _interopDefault(require('@material-ui/icons/MenuOpen'));
 var mobx = require('mobx');
 var mobxStateTree = require('mobx-state-tree');
+var core = require('@material-ui/core');
 var ui = require('@jbrowse/core/ui');
-var styles = require('@material-ui/core/styles');
 var mobxReact = require('mobx-react');
-var MUITooltip = _interopDefault(require('@material-ui/core/Tooltip'));
+var reactPopper = require('react-popper');
+var styles = require('@material-ui/core/styles');
 var blockTypes = require('@jbrowse/core/util/blockTypes');
 var mst = require('@jbrowse/core/util/types/mst');
+var types = require('@jbrowse/core/util/types');
 var RefreshIcon = _interopDefault(require('@material-ui/icons/Refresh'));
 var configurationSchema = require('@jbrowse/core/configuration/configurationSchema');
 var calculateDynamicBlocks = _interopDefault(require('@jbrowse/core/util/calculateDynamicBlocks'));
@@ -43,17 +45,12 @@ var ZoomIn = _interopDefault(require('@material-ui/icons/ZoomIn'));
 var clone = _interopDefault(require('clone'));
 var fileSaver = require('file-saver');
 var server = require('react-dom/server');
-var core = require('@material-ui/core');
-var FormGroup = _interopDefault(require('@material-ui/core/FormGroup'));
 var ArrowForwardIcon = _interopDefault(require('@material-ui/icons/ArrowForward'));
 var ArrowBackIcon = _interopDefault(require('@material-ui/icons/ArrowBack'));
 var BaseResult = require('@jbrowse/core/TextSearch/BaseResults');
 var BaseResult__default = _interopDefault(BaseResult);
-var CircularProgress = _interopDefault(require('@material-ui/core/CircularProgress'));
-var TextField = _interopDefault(require('@material-ui/core/TextField'));
 var SearchIcon = _interopDefault(require('@material-ui/icons/Search'));
-var Autocomplete = require('@material-ui/lab/Autocomplete');
-var Autocomplete__default = _interopDefault(Autocomplete);
+var Autocomplete = _interopDefault(require('@material-ui/lab/Autocomplete'));
 var LinearProgress = _interopDefault(require('@material-ui/core/LinearProgress'));
 var clsx = _interopDefault(require('clsx'));
 var ReactPropTypes = _interopDefault(require('prop-types'));
@@ -67,6 +64,7 @@ var CloseIcon = _interopDefault(require('@material-ui/icons/Close'));
 var normalizeWheel = _interopDefault(require('normalize-wheel'));
 var colorManipulator = require('@material-ui/core/styles/colorManipulator');
 var Popover = _interopDefault(require('@material-ui/core/Popover'));
+var Tooltip$1 = _interopDefault(require('@material-ui/core/Tooltip'));
 var AssemblySelector = _interopDefault(require('@jbrowse/core/ui/AssemblySelector'));
 var ArrowDown = _interopDefault(require('@material-ui/icons/KeyboardArrowDown'));
 var Menu = _interopDefault(require('@jbrowse/core/ui/Menu'));
@@ -292,6 +290,8 @@ function _assertThisInitialized(self) {
 function _possibleConstructorReturn(self, call) {
   if (call && (typeof call === "object" || typeof call === "function")) {
     return call;
+  } else if (call !== void 0) {
+    throw new TypeError("Derived constructors may only return object or undefined");
   }
 
   return _assertThisInitialized(self);
@@ -555,11 +555,9 @@ var runtime_1 = /*#__PURE__*/createCommonjsModule(function (module) {
 
 
     var IteratorPrototype = {};
-
-    IteratorPrototype[iteratorSymbol] = function () {
+    define(IteratorPrototype, iteratorSymbol, function () {
       return this;
-    };
-
+    });
     var getProto = Object.getPrototypeOf;
     var NativeIteratorPrototype = getProto && getProto(getProto(values([])));
 
@@ -570,8 +568,9 @@ var runtime_1 = /*#__PURE__*/createCommonjsModule(function (module) {
     }
 
     var Gp = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(IteratorPrototype);
-    GeneratorFunction.prototype = Gp.constructor = GeneratorFunctionPrototype;
-    GeneratorFunctionPrototype.constructor = GeneratorFunction;
+    GeneratorFunction.prototype = GeneratorFunctionPrototype;
+    define(Gp, "constructor", GeneratorFunctionPrototype);
+    define(GeneratorFunctionPrototype, "constructor", GeneratorFunction);
     GeneratorFunction.displayName = define(GeneratorFunctionPrototype, toStringTagSymbol, "GeneratorFunction"); // Helper for defining the .next, .throw, and .return methods of the
     // Iterator interface in terms of a single ._invoke method.
 
@@ -676,11 +675,9 @@ var runtime_1 = /*#__PURE__*/createCommonjsModule(function (module) {
     }
 
     defineIteratorMethods(AsyncIterator.prototype);
-
-    AsyncIterator.prototype[asyncIteratorSymbol] = function () {
+    define(AsyncIterator.prototype, asyncIteratorSymbol, function () {
       return this;
-    };
-
+    });
     exports.AsyncIterator = AsyncIterator; // Note that simple async functions are implemented on top of
     // AsyncIterator objects; they just return a Promise for the value of
     // the final result produced by the iterator.
@@ -857,13 +854,12 @@ var runtime_1 = /*#__PURE__*/createCommonjsModule(function (module) {
     // object to not be returned from this call. This ensures that doesn't happen.
     // See https://github.com/facebook/regenerator/issues/274 for more details.
 
-    Gp[iteratorSymbol] = function () {
+    define(Gp, iteratorSymbol, function () {
       return this;
-    };
-
-    Gp.toString = function () {
+    });
+    define(Gp, "toString", function () {
       return "[object Generator]";
-    };
+    });
 
     function pushTryEntry(locs) {
       var entry = {
@@ -1175,14 +1171,19 @@ var runtime_1 = /*#__PURE__*/createCommonjsModule(function (module) {
   } catch (accidentalStrictMode) {
     // This module should not be running in strict mode, so the above
     // assignment should always work unless something is misconfigured. Just
-    // in case runtime.js accidentally runs in strict mode, we can escape
+    // in case runtime.js accidentally runs in strict mode, in modern engines
+    // we can explicitly access globalThis. In older engines we can escape
     // strict mode using a global Function call. This could conceivably fail
     // if a Content Security Policy forbids using Function, but in that case
     // the proper solution is to fix the accidental strict mode problem. If
     // you've misconfigured your bundler to force strict mode and applied a
     // CSP to forbid Function, and you're not willing to fix either of those
     // problems, please detail your unique predicament in a GitHub issue.
-    Function("r", "regeneratorRuntime = r")(runtime);
+    if (typeof globalThis === "object") {
+      globalThis.regeneratorRuntime = runtime;
+    } else {
+      Function("r", "regeneratorRuntime = r")(runtime);
+    }
   }
 });
 
@@ -1336,49 +1337,125 @@ LinearBlocks.propTypes = {
 };
 var LinearBlocks$1 = /*#__PURE__*/mobxReact.observer(LinearBlocks);
 
-var useStyles$2 = /*#__PURE__*/styles.makeStyles({
-  display: {
-    position: 'relative',
-    whiteSpace: 'nowrap',
-    textAlign: 'left',
-    width: '100%',
-    minHeight: '100%'
-  }
+function round(value) {
+  return Math.round(value * 1e5) / 1e5;
+}
+
+var useStyles$2 = /*#__PURE__*/core.makeStyles(function (theme) {
+  return {
+    display: {
+      position: 'relative',
+      whiteSpace: 'nowrap',
+      textAlign: 'left',
+      width: '100%',
+      minHeight: '100%'
+    },
+    // these styles come from
+    // https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/Tooltip/Tooltip.js
+    tooltip: {
+      pointerEvents: 'none',
+      backgroundColor: core.alpha(theme.palette.grey[700], 0.9),
+      borderRadius: theme.shape.borderRadius,
+      color: theme.palette.common.white,
+      fontFamily: theme.typography.fontFamily,
+      padding: '4px 8px',
+      fontSize: theme.typography.pxToRem(10),
+      lineHeight: "".concat(round(14 / 10), "em"),
+      maxWidth: 300,
+      wordWrap: 'break-word',
+      fontWeight: theme.typography.fontWeightMedium
+    }
+  };
 });
-var Tooltip = /*#__PURE__*/mobxReact.observer(function (props) {
-  var model = props.model,
-      mouseCoord = props.mouseCoord;
+var TooltipContents = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
+  var message = _ref.message;
+  return /*#__PURE__*/React__default.createElement("div", {
+    ref: ref
+  }, message);
+});
+var Tooltip = /*#__PURE__*/mobxReact.observer(function (_ref2) {
+  var model = _ref2.model,
+      clientMouseCoord = _ref2.clientMouseCoord;
+  var classes = useStyles$2();
   var featureUnderMouse = model.featureUnderMouse;
-  var mouseover = featureUnderMouse ? configuration.getConf(model, 'mouseover', {
+
+  var _useState = React.useState(0),
+      _useState2 = _slicedToArray(_useState, 2),
+      width = _useState2[0],
+      setWidth = _useState2[1];
+
+  var _useState3 = React.useState(null),
+      _useState4 = _slicedToArray(_useState3, 2),
+      popperElt = _useState4[0],
+      setPopperElt = _useState4[1]; // must be memoized a la https://github.com/popperjs/react-popper/issues/391
+
+
+  var virtElement = React.useMemo(function () {
+    return {
+      getBoundingClientRect: function getBoundingClientRect() {
+        var x = clientMouseCoord[0] + width / 2 + 20;
+        var y = clientMouseCoord[1];
+        return {
+          top: y,
+          left: x,
+          bottom: y,
+          right: x,
+          width: 0,
+          height: 0,
+          x: x,
+          y: y,
+          toJSON: function toJSON() {}
+        };
+      }
+    };
+  }, [clientMouseCoord, width]);
+
+  var _usePopper = reactPopper.usePopper(virtElement, popperElt),
+      styles = _usePopper.styles,
+      attributes = _usePopper.attributes;
+
+  var contents = featureUnderMouse ? configuration.getConf(model, 'mouseover', {
     feature: featureUnderMouse
   }) : undefined;
-  return mouseover ? /*#__PURE__*/React__default.createElement(MUITooltip, {
-    title: mouseover,
-    open: true,
-    placement: "right"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    style: {
-      position: 'absolute',
-      left: mouseCoord[0],
-      top: mouseCoord[1]
-    }
-  }, ' ')) : null;
+  return featureUnderMouse && contents ? /*#__PURE__*/React__default.createElement(core.Portal, null, /*#__PURE__*/React__default.createElement("div", Object.assign({
+    ref: setPopperElt,
+    className: classes.tooltip,
+    // zIndex needed to go over widget drawer
+    style: _objectSpread2(_objectSpread2({}, styles.popper), {}, {
+      zIndex: 100000
+    })
+  }, attributes.popper), /*#__PURE__*/React__default.createElement(TooltipContents, {
+    ref: function ref(elt) {
+      return setWidth((elt === null || elt === void 0 ? void 0 : elt.getBoundingClientRect().width) || 0);
+    },
+    message: contents
+  }))) : null;
 });
 var BaseLinearDisplay = /*#__PURE__*/mobxReact.observer(function (props) {
   var classes = useStyles$2();
-  var theme = styles.useTheme();
+  var theme = core.useTheme();
+  var ref = React.useRef(null);
 
-  var _useState = React.useState([0, 0]),
-      _useState2 = _slicedToArray(_useState, 2),
-      mouseCoord = _useState2[0],
-      setMouseCoord = _useState2[1];
+  var _useState5 = React.useState(),
+      _useState6 = _slicedToArray(_useState5, 2),
+      clientRect = _useState6[0],
+      setClientRect = _useState6[1];
 
-  var _useState3 = React.useState(),
-      _useState4 = _slicedToArray(_useState3, 2),
-      contextCoord = _useState4[0],
-      setContextCoord = _useState4[1];
+  var _useState7 = React.useState([0, 0]),
+      _useState8 = _slicedToArray(_useState7, 2),
+      offsetMouseCoord = _useState8[0],
+      setOffsetMouseCoord = _useState8[1];
+
+  var _useState9 = React.useState([0, 0]),
+      _useState10 = _slicedToArray(_useState9, 2),
+      clientMouseCoord = _useState10[0],
+      setClientMouseCoord = _useState10[1];
+
+  var _useState11 = React.useState(),
+      _useState12 = _slicedToArray(_useState11, 2),
+      contextCoord = _useState12[0],
+      setContextCoord = _useState12[1];
 
-  var ref = React.useRef(null);
   var model = props.model,
       children = props.children;
   var TooltipComponent = model.TooltipComponent,
@@ -1403,7 +1480,9 @@ var BaseLinearDisplay = /*#__PURE__*/mobxReact.observer(function (props) {
     onMouseMove: function onMouseMove(event) {
       if (ref.current) {
         var rect = ref.current.getBoundingClientRect();
-        setMouseCoord([event.clientX - rect.left, event.clientY - rect.top]);
+        setOffsetMouseCoord([event.clientX - rect.left, event.clientY - rect.top]);
+        setClientMouseCoord([event.clientX, event.clientY]);
+        setClientRect(rect);
       }
     },
     role: "presentation"
@@ -1412,7 +1491,10 @@ var BaseLinearDisplay = /*#__PURE__*/mobxReact.observer(function (props) {
   }) : /*#__PURE__*/React__default.createElement(LinearBlocks$1, Object.assign({}, props)), children, /*#__PURE__*/React__default.createElement(TooltipComponent, {
     model: model,
     height: height,
-    mouseCoord: mouseCoord
+    offsetMouseCoord: offsetMouseCoord,
+    clientMouseCoord: clientMouseCoord,
+    clientRect: clientRect,
+    mouseCoord: offsetMouseCoord
   }), /*#__PURE__*/React__default.createElement(ui.Menu, {
     open: Boolean(contextCoord) && Boolean(contextMenuItems().length),
     onMenuItemClick: function onMenuItemClick(_, callback) {
@@ -1708,6 +1790,10 @@ var blockState = /*#__PURE__*/mobxStateTree.types.model('BlockState', {
       self.error = error;
       self.renderProps = undefined;
       renderInProgress = undefined;
+
+      if (types.isRetryException(error)) {
+        this.reload();
+      }
     },
     reload: function reload() {
       self.renderInProgress = undefined;
@@ -1945,8 +2031,9 @@ var BaseLinearDisplay$1 = /*#__PURE__*/mobxStateTree.types.compose('BaseLinearDi
      */
     get selectedFeatureId() {
       if (mobxStateTree.isAlive(self)) {
-        var session = util.getSession(self);
-        var selection = session.selection; // does it quack like a feature?
+        var _getSession = util.getSession(self),
+            selection = _getSession.selection; // does it quack like a feature?
+
 
         if (simpleFeature.isFeature(selection)) {
           return selection.id();
@@ -2003,7 +2090,13 @@ var BaseLinearDisplay$1 = /*#__PURE__*/mobxStateTree.types.compose('BaseLinearDi
 
       return (_self$blockState$get = self.blockState.get(blockKey)) === null || _self$blockState$get === void 0 ? void 0 : (_self$blockState$get$ = _self$blockState$get.layout) === null || _self$blockState$get$ === void 0 ? void 0 : _self$blockState$get$.getByCoord(x, y);
     },
-    getFeatureByID: function getFeatureByID(id) {
+    getFeatureByID: function getFeatureByID(blockKey, id) {
+      var _self$blockState$get2, _self$blockState$get3;
+
+      return (_self$blockState$get2 = self.blockState.get(blockKey)) === null || _self$blockState$get2 === void 0 ? void 0 : (_self$blockState$get3 = _self$blockState$get2.layout) === null || _self$blockState$get3 === void 0 ? void 0 : _self$blockState$get3.getByID(id);
+    },
+    // if block key is not supplied, can look at all blocks
+    searchFeatureByID: function searchFeatureByID(id) {
       var ret;
       self.blockState.forEach(function (block) {
         var _block$layout;
@@ -2333,51 +2426,36 @@ function stateModelFactory(configSchema) {
   });
 }
 
-var filter = /*#__PURE__*/Autocomplete.createFilterOptions({
-  trim: true,
-  ignoreCase: true,
-  limit: 100
-});
-
 function fetchResults(_x, _x2, _x3) {
   return _fetchResults.apply(this, arguments);
-}
+} // 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
+// filter so don't need re-filtering
+
 
 function _fetchResults() {
   _fetchResults = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee2(self, query, assemblyName) {
-    var session, _getEnv, pluginManager, rankSearchResults, textSearchManager, searchScope, args, searchResults;
+    var _getSession, textSearchManager, rankSearchResults, searchScope;
 
     return runtime_1.wrap(function _callee2$(_context2) {
       while (1) {
         switch (_context2.prev = _context2.next) {
           case 0:
-            session = util.getSession(self);
-            _getEnv = mobxStateTree.getEnv(session), pluginManager = _getEnv.pluginManager;
+            _getSession = util.getSession(self), textSearchManager = _getSession.textSearchManager;
             rankSearchResults = self.rankSearchResults;
-            textSearchManager = pluginManager.rootModel.textSearchManager;
             searchScope = self.searchScope(assemblyName);
-            args = {
+            return _context2.abrupt("return", textSearchManager === null || textSearchManager === void 0 ? void 0 : textSearchManager.search({
               queryString: query,
               searchType: 'prefix'
-            };
-            _context2.next = 8;
-            return textSearchManager === null || textSearchManager === void 0 ? void 0 : textSearchManager.search(args, searchScope, rankSearchResults);
-
-          case 8:
-            _context2.t0 = _context2.sent;
-
-            if (_context2.t0) {
-              _context2.next = 11;
-              break;
-            }
-
-            _context2.t0 = [];
-
-          case 11:
-            searchResults = _context2.t0;
-            return _context2.abrupt("return", searchResults);
+            }, searchScope, rankSearchResults).then(function (results) {
+              return results.filter(function (elem, index, self) {
+                return index === self.findIndex(function (t) {
+                  return t.label === elem.label;
+                });
+              });
+            }));
 
-          case 13:
+          case 4:
           case "end":
             return _context2.stop();
         }
@@ -2387,6 +2465,27 @@ function _fetchResults() {
   return _fetchResults.apply(this, arguments);
 }
 
+function _filterOptions(options, searchQuery) {
+  return options.filter(function (option) {
+    var result = option.result;
+    return result.getLabel().toLowerCase().includes(searchQuery) || result.matchedObject;
+  });
+} // MyPopper used to expand search results box wider if needed
+// xref https://stackoverflow.com/a/63583835/2129219
+
+
+var MyPopper = function MyPopper(props) {
+  var style = props.style;
+  return /*#__PURE__*/React__default.createElement(core.Popper, Object.assign({}, props, {
+    style: {
+      width: 'fit-content',
+      minWidth: Math.min(+((style === null || style === void 0 ? void 0 : style.width) || 0), 200),
+      background: 'white'
+    },
+    placement: "bottom-start"
+  }));
+};
+
 function RefNameAutocomplete(_ref) {
   var model = _ref.model,
       onSelect = _ref.onSelect,
@@ -2396,36 +2495,41 @@ function RefNameAutocomplete(_ref) {
       _ref$TextFieldProps = _ref.TextFieldProps,
       TextFieldProps = _ref$TextFieldProps === void 0 ? {} : _ref$TextFieldProps;
   var session = util.getSession(model);
+  var assemblyManager = session.assemblyManager;
 
   var _useState = React.useState(false),
       _useState2 = _slicedToArray(_useState, 2),
       open = _useState2[0],
       setOpen = _useState2[1];
 
-  var _useState3 = React.useState(),
+  var _useState3 = React.useState(true),
       _useState4 = _slicedToArray(_useState3, 2),
-      error = _useState4[0],
-      setError = _useState4[1];
+      loaded = _useState4[0],
+      setLoaded = _useState4[1];
 
   var _useState5 = React.useState(''),
       _useState6 = _slicedToArray(_useState5, 2),
       currentSearch = _useState6[0],
       setCurrentSearch = _useState6[1];
 
-  var debouncedSearch = util.useDebounce(currentSearch, 300);
-
-  var _useState7 = React.useState([]),
+  var _useState7 = React.useState(''),
       _useState8 = _slicedToArray(_useState7, 2),
-      searchOptions = _useState8[0],
-      setSearchOptions = _useState8[1];
+      inputValue = _useState8[0],
+      setInputValue = _useState8[1];
 
-  var assemblyManager = session.assemblyManager;
-  var coarseVisibleLocStrings = model.coarseVisibleLocStrings;
+  var _useState9 = React.useState([]),
+      _useState10 = _slicedToArray(_useState9, 2),
+      searchOptions = _useState10[0],
+      setSearchOptions = _useState10[1];
+
+  var debouncedSearch = util.useDebounce(currentSearch, 300);
+  var coarseVisibleLocStrings = model.coarseVisibleLocStrings,
+      hasDisplayedRegions = model.hasDisplayedRegions;
   var assembly = assemblyName ? assemblyManager.get(assemblyName) : undefined; // eslint-disable-next-line react-hooks/exhaustive-deps
 
   var regions = (assembly === null || assembly === void 0 ? void 0 : assembly.regions) || [];
   var options = React.useMemo(function () {
-    var defaultOptions = regions.map(function (option) {
+    return regions.map(function (option) {
       return {
         result: new BaseResult.RefSequenceResult({
           refName: option.refName,
@@ -2434,40 +2538,43 @@ function RefNameAutocomplete(_ref) {
         })
       };
     });
-    return defaultOptions;
   }, [regions]);
   React.useEffect(function () {
     var active = true;
 
     _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee() {
-      var results, searchResults, adapterResults;
+      var results;
       return runtime_1.wrap(function _callee$(_context) {
         while (1) {
           switch (_context.prev = _context.next) {
             case 0:
               _context.prev = 0;
-              results = [];
 
-              if (!(debouncedSearch && debouncedSearch !== '' && assemblyName)) {
-                _context.next = 7;
+              if (!(debouncedSearch === '' || !assemblyName)) {
+                _context.next = 3;
                 break;
               }
 
-              _context.next = 5;
+              return _context.abrupt("return");
+
+            case 3:
+              setLoaded(false);
+              _context.next = 6;
               return fetchResults(model, debouncedSearch, assemblyName);
 
-            case 5:
-              searchResults = _context.sent;
-              results = results.concat(searchResults);
+            case 6:
+              results = _context.sent;
 
-            case 7:
-              if (results.length > 0 && active) {
-                adapterResults = results.map(function (result) {
-                  return {
-                    result: result
-                  };
-                });
-                setSearchOptions(adapterResults);
+              if (active) {
+                if (results && results.length >= 0) {
+                  setSearchOptions(results.map(function (result) {
+                    return {
+                      result: result
+                    };
+                  }));
+                }
+
+                setLoaded(true);
               }
 
               _context.next = 14;
@@ -2479,7 +2586,7 @@ function RefNameAutocomplete(_ref) {
               console.error(_context.t0);
 
               if (active) {
-                setError(_context.t0);
+                session.notify("".concat(_context.t0), 'error');
               }
 
             case 14:
@@ -2493,87 +2600,98 @@ function RefNameAutocomplete(_ref) {
     return function () {
       active = false;
     };
-  }, [assemblyName, debouncedSearch, model]);
+  }, [assemblyName, debouncedSearch, session, model]);
+  var inputBoxVal = coarseVisibleLocStrings || value || ''; // heuristic, text width + icon width, minimum 200
 
-  function _onChange(selectedOption) {
-    if (selectedOption && assemblyName) {
-      if (typeof selectedOption === 'string') {
-        // handles string inputs on keyPress enter
-        var newResult = new BaseResult__default({
-          label: selectedOption
-        });
-        onSelect(newResult);
-      } else {
-        var result = selectedOption.result;
-        onSelect(result);
-      }
-    }
-  }
+  var width = Math.min(Math.max(util.measureText(inputBoxVal, 16) + 25, 200), 550); // notes on implementation:
+  // The selectOnFocus setting helps highlight the field when clicked
 
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Autocomplete__default, {
+  return /*#__PURE__*/React__default.createElement(Autocomplete, {
     id: "refNameAutocomplete-".concat(model.id),
     "data-testid": "autocomplete",
-    freeSolo: true,
     disableListWrap: true,
     disableClearable: true,
+    PopperComponent: MyPopper,
+    disabled: !assemblyName,
+    freeSolo: true,
     includeInputInList: true,
-    clearOnBlur: true,
     selectOnFocus: true,
-    disabled: !!error || !assemblyName,
-    style: style,
-    value: coarseVisibleLocStrings || value || '',
+    style: _objectSpread2(_objectSpread2({}, style), {}, {
+      width: width
+    }),
+    value: inputBoxVal,
+    loading: !loaded,
+    inputValue: inputValue,
+    onInputChange: function onInputChange(event, newInputValue) {
+      return setInputValue(newInputValue);
+    },
+    loadingText: "loading results",
     open: open,
     onOpen: function onOpen() {
       return setOpen(true);
     },
     onClose: function onClose() {
       setOpen(false);
-      setCurrentSearch('');
-      setSearchOptions([]);
+      setLoaded(true);
+
+      if (hasDisplayedRegions) {
+        setCurrentSearch('');
+        setSearchOptions([]);
+      }
+    },
+    onChange: function onChange(_event, selectedOption) {
+      if (!selectedOption || !assemblyName) {
+        return;
+      }
+
+      if (typeof selectedOption === 'string') {
+        // handles string inputs on keyPress enter
+        onSelect(new BaseResult__default({
+          label: selectedOption
+        }));
+      } else {
+        onSelect(selectedOption.result);
+      }
+
+      setInputValue(inputBoxVal);
     },
     options: searchOptions.length === 0 ? options : searchOptions,
     getOptionDisabled: function getOptionDisabled(option) {
       return (option === null || option === void 0 ? void 0 : option.group) === 'limitOption';
     },
-    filterOptions: function filterOptions(possibleOptions, params) {
-      var filtered = filter(possibleOptions, params);
-      return filtered.length >= 100 ? filtered.concat([{
+    filterOptions: function filterOptions(options, params) {
+      var filtered = _filterOptions(options, params.inputValue.toLocaleLowerCase());
+
+      return [].concat(_toConsumableArray(filtered.slice(0, 100)), _toConsumableArray(filtered.length > 100 ? [{
         group: 'limitOption',
         result: new BaseResult__default({
-          label: 'keep typing for more results',
-          renderingComponent: /*#__PURE__*/React__default.createElement(Typography, null, 'keep typing for more results')
+          label: 'keep typing for more results'
         })
-      }]) : filtered;
-    },
-    ListboxProps: {
-      style: {
-        maxHeight: 250
-      }
-    },
-    onChange: function onChange(_, selectedOption) {
-      return _onChange(selectedOption);
+      }] : []));
     },
     renderInput: function renderInput(params) {
       var helperText = TextFieldProps.helperText,
           _TextFieldProps$Input = TextFieldProps.InputProps,
           InputProps = _TextFieldProps$Input === void 0 ? {} : _TextFieldProps$Input;
-
-      var TextFieldInputProps = _objectSpread2(_objectSpread2(_objectSpread2({}, params.InputProps), InputProps), {}, {
-        endAdornment: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, regions.length === 0 && searchOptions.length === 0 ? /*#__PURE__*/React__default.createElement(CircularProgress, {
-          color: "inherit",
-          size: 20
-        }) : /*#__PURE__*/React__default.createElement(core.InputAdornment, {
-          position: "end",
-          style: {
-            marginRight: 7
-          }
-        }, /*#__PURE__*/React__default.createElement(SearchIcon, null)), params.InputProps.endAdornment)
-      });
-
-      return /*#__PURE__*/React__default.createElement(TextField, Object.assign({}, params, TextFieldProps, {
+      return /*#__PURE__*/React__default.createElement(core.TextField, Object.assign({
+        onBlur: function onBlur() {
+          // this is used to restore a refName or the non-user-typed input
+          // to the box on blurring
+          setInputValue(inputBoxVal);
+        }
+      }, params, TextFieldProps, {
         helperText: helperText,
-        value: coarseVisibleLocStrings || value || '',
-        InputProps: TextFieldInputProps,
+        InputProps: _objectSpread2(_objectSpread2(_objectSpread2({}, params.InputProps), InputProps), {}, {
+          endAdornment: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, regions.length === 0 ? /*#__PURE__*/React__default.createElement(core.CircularProgress, {
+            color: "inherit",
+            size: 20
+          }) : /*#__PURE__*/React__default.createElement(core.InputAdornment, {
+            position: "end",
+            style: {
+              marginRight: 7
+            }
+          }, /*#__PURE__*/React__default.createElement(SearchIcon, null)), params.InputProps.endAdornment)
+        }),
         placeholder: "Search for location",
         onChange: function onChange(e) {
           setCurrentSearch(e.target.value);
@@ -2582,28 +2700,20 @@ function RefNameAutocomplete(_ref) {
     },
     renderOption: function renderOption(option) {
       var result = option.result;
-      var rendering = result.getLabel(); // if renderingComponent is provided render that
-
       var component = result.getRenderingComponent();
 
-      if (component) {
-        if ( /*#__PURE__*/React__default.isValidElement(component)) {
-          return component;
-        }
+      if (component && /*#__PURE__*/React__default.isValidElement(component)) {
+        return component;
       }
 
-      return /*#__PURE__*/React__default.createElement(Typography, {
+      return /*#__PURE__*/React__default.createElement(core.Typography, {
         noWrap: true
-      }, rendering);
+      }, result.getDisplayString());
     },
     getOptionLabel: function getOptionLabel(option) {
-      // needed for filtering options and value
       return (typeof option === 'string' ? option : option.result.getLabel()) || '';
     }
-  }), error ? /*#__PURE__*/React__default.createElement(Typography, {
-    variant: "h6",
-    color: "error"
-  }, "".concat(error)) : null);
+  });
 }
 
 var RefNameAutocomplete$1 = /*#__PURE__*/mobxReact.observer(RefNameAutocomplete);
@@ -3132,7 +3242,8 @@ var ScaleBar = /*#__PURE__*/mobxReact.observer(function (_ref2) {
       }
     }, /*#__PURE__*/React__default.createElement(core.Typography, {
       style: {
-        color: refNameColor
+        color: refNameColor,
+        zIndex: 100
       },
       className: classes.scaleBarRefName
     }, seq.refName), tickLabels.map(function (tickLabel, labelIdx) {
@@ -3250,9 +3361,17 @@ function ZoomControls(_ref) {
 
 var ZoomControls$1 = /*#__PURE__*/mobxReact.observer(ZoomControls);
 
+function dedupe(results) {
+  return results === null || results === void 0 ? void 0 : results.filter(function (elem, index, self) {
+    return index === self.findIndex(function (t) {
+      return t.getId() === elem.getId();
+    });
+  });
+}
+
 var WIDGET_HEIGHT = 32;
 var SPACING = 7;
-var useStyles$7 = /*#__PURE__*/styles.makeStyles(function (theme) {
+var useStyles$7 = /*#__PURE__*/core.makeStyles(function (theme) {
   return {
     headerBar: {
       height: HEADER_BAR_HEIGHT,
@@ -3270,7 +3389,7 @@ var useStyles$7 = /*#__PURE__*/styles.makeStyles(function (theme) {
       minWidth: 100
     },
     panButton: {
-      background: styles.alpha(theme.palette.background.paper, 0.8),
+      background: core.alpha(theme.palette.background.paper, 0.8),
       height: WIDGET_HEIGHT,
       margin: SPACING
     },
@@ -3292,7 +3411,7 @@ var useStyles$7 = /*#__PURE__*/styles.makeStyles(function (theme) {
 var Controls = /*#__PURE__*/mobxReact.observer(function (_ref) {
   var model = _ref.model;
   var classes = useStyles$7();
-  return /*#__PURE__*/React__default.createElement(Button, {
+  return /*#__PURE__*/React__default.createElement(core.Button, {
     onClick: model.activateTrackSelector,
     className: classes.toggleButton,
     title: "Open track selector",
@@ -3306,13 +3425,13 @@ var Controls = /*#__PURE__*/mobxReact.observer(function (_ref) {
 function PanControls(_ref2) {
   var model = _ref2.model;
   var classes = useStyles$7();
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Button, {
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(core.Button, {
     variant: "outlined",
     className: classes.panButton,
     onClick: function onClick() {
       return model.slide(-0.9);
     }
-  }, /*#__PURE__*/React__default.createElement(ArrowBackIcon, null)), /*#__PURE__*/React__default.createElement(Button, {
+  }, /*#__PURE__*/React__default.createElement(ArrowBackIcon, null)), /*#__PURE__*/React__default.createElement(core.Button, {
     variant: "outlined",
     className: classes.panButton,
     onClick: function onClick() {
@@ -3325,7 +3444,7 @@ var RegionWidth = /*#__PURE__*/mobxReact.observer(function (_ref3) {
   var model = _ref3.model;
   var classes = useStyles$7();
   var coarseTotalBp = model.coarseTotalBp;
-  return /*#__PURE__*/React__default.createElement(Typography, {
+  return /*#__PURE__*/React__default.createElement(core.Typography, {
     variant: "body2",
     color: "textSecondary",
     className: classes.bp
@@ -3334,106 +3453,123 @@ var RegionWidth = /*#__PURE__*/mobxReact.observer(function (_ref3) {
 var LinearGenomeViewHeader = /*#__PURE__*/mobxReact.observer(function (_ref4) {
   var model = _ref4.model;
   var classes = useStyles$7();
-  var theme = styles.useTheme();
+  var theme = core.useTheme();
   var session = util.getSession(model);
-  var assemblyManager = session.assemblyManager;
-
-  var _getEnv = mobxStateTree.getEnv(session),
-      pluginManager = _getEnv.pluginManager;
-
-  var textSearchManager = pluginManager.rootModel.textSearchManager;
-  var contentBlocks = model.coarseDynamicBlocks,
-      displayedRegions = model.displayedRegions,
+  var textSearchManager = session.textSearchManager,
+      assemblyManager = session.assemblyManager;
+  var assemblyNames = model.assemblyNames,
       rankSearchResults = model.rankSearchResults;
-
-  var _ref5 = contentBlocks[0] || {
-    refName: ''
-  },
-      assemblyName = _ref5.assemblyName,
-      refName = _ref5.refName;
-
-  var assembly = assemblyName && assemblyManager.get(assemblyName);
-  var regions = assembly && assembly.regions || [];
+  var assemblyName = assemblyNames[0];
+  var assembly = assemblyManager.get(assemblyName);
   var searchScope = model.searchScope(assemblyName);
 
-  function setDisplayedRegion(_x) {
-    return _setDisplayedRegion.apply(this, arguments);
+  function fetchResults(_x) {
+    return _fetchResults.apply(this, arguments);
   }
 
-  function _setDisplayedRegion() {
-    _setDisplayedRegion = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee(result) {
-      var newRegionValue, newRegion, results;
+  function _fetchResults() {
+    _fetchResults = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee(queryString) {
+      var results;
       return runtime_1.wrap(function _callee$(_context) {
         while (1) {
           switch (_context.prev = _context.next) {
             case 0:
-              if (!result) {
-                _context.next = 15;
-                break;
+              if (!textSearchManager) {
+                console.warn('No text search manager');
               }
 
-              newRegionValue = result.getLocation(); // need to fix finding region
+              _context.next = 3;
+              return textSearchManager === null || textSearchManager === void 0 ? void 0 : textSearchManager.search({
+                queryString: queryString.toLowerCase(),
+                searchType: 'exact'
+              }, searchScope, rankSearchResults);
 
-              newRegion = regions.find(function (region) {
-                return newRegionValue === region.refName;
-              });
+            case 3:
+              results = _context.sent;
+              return _context.abrupt("return", dedupe(results));
 
-              if (!newRegion) {
-                _context.next = 8;
+            case 5:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+    return _fetchResults.apply(this, arguments);
+  }
+
+  function handleSelectedRegion(_x2) {
+    return _handleSelectedRegion.apply(this, arguments);
+  }
+
+  function _handleSelectedRegion() {
+    _handleSelectedRegion = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee2(option) {
+      var trackId, location, label, _assembly$refNames, results;
+
+      return runtime_1.wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              trackId = option.getTrackId();
+              location = option.getLocation();
+              label = option.getLabel();
+              _context2.prev = 3;
+
+              if (!(assembly !== null && assembly !== void 0 && (_assembly$refNames = assembly.refNames) !== null && _assembly$refNames !== void 0 && _assembly$refNames.includes(location))) {
+                _context2.next = 8;
                 break;
               }
 
-              model.setDisplayedRegions([newRegion]); // we use showAllRegions after setDisplayedRegions to make the entire
-              // region visible, xref #1703
-
-              model.showAllRegions();
-              _context.next = 15;
+              model.navToLocString(location);
+              _context2.next = 19;
               break;
 
             case 8:
-              _context.next = 10;
-              return textSearchManager === null || textSearchManager === void 0 ? void 0 : textSearchManager.search({
-                queryString: newRegionValue.toLocaleLowerCase(),
-                searchType: 'exact'
-              }, searchScope, rankSearchResults);
+              _context2.next = 10;
+              return fetchResults(label);
 
             case 10:
-              _context.t0 = _context.sent;
+              results = _context2.sent;
 
-              if (_context.t0) {
-                _context.next = 13;
+              if (!(results && results.length > 1)) {
+                _context2.next = 16;
                 break;
               }
 
-              _context.t0 = [];
-
-            case 13:
-              results = _context.t0;
-
-              // distinguishes between locstrings and search strings
-              if (results.length > 0) {
-                model.setSearchResults(results, newRegionValue.toLocaleLowerCase());
-              } else {
-                try {
-                  newRegionValue !== '' && model.navToLocString(newRegionValue);
-                } catch (e) {
-                  if ("".concat(e) === "Error: Unknown reference sequence \"".concat(newRegionValue, "\"")) {
-                    model.setSearchResults(results, newRegionValue.toLocaleLowerCase());
-                  } else {
-                    console.warn(e);
-                    session.notify("".concat(e), 'warning');
-                  }
-                }
+              model.setSearchResults(results, label.toLowerCase());
+              return _context2.abrupt("return");
+
+            case 16:
+              if ((results === null || results === void 0 ? void 0 : results.length) === 1) {
+                location = results[0].getLocation();
+                trackId = results[0].getTrackId();
               }
 
-            case 15:
+            case 17:
+              model.navToLocString(location, assemblyName);
+
+              if (trackId) {
+                model.showTrack(trackId);
+              }
+
+            case 19:
+              _context2.next = 25;
+              break;
+
+            case 21:
+              _context2.prev = 21;
+              _context2.t0 = _context2["catch"](3);
+              console.error(_context2.t0);
+              session.notify("".concat(_context2.t0), 'warning');
+
+            case 25:
             case "end":
-              return _context.stop();
+              return _context2.stop();
           }
         }
-      }, _callee);
+      }, _callee2, null, [[3, 21]]);
     }));
-    return _setDisplayedRegion.apply(this, arguments);
+    return _handleSelectedRegion.apply(this, arguments);
   }
 
   var controls = /*#__PURE__*/React__default.createElement("div", {
@@ -3442,15 +3578,14 @@ var LinearGenomeViewHeader = /*#__PURE__*/mobxReact.observer(function (_ref4) {
     model: model
   }), /*#__PURE__*/React__default.createElement("div", {
     className: classes.spacer
-  }), /*#__PURE__*/React__default.createElement(FormGroup, {
+  }), /*#__PURE__*/React__default.createElement(core.FormGroup, {
     row: true,
     className: classes.headerForm
   }, /*#__PURE__*/React__default.createElement(PanControls, {
     model: model
   }), /*#__PURE__*/React__default.createElement(RefNameAutocomplete$1, {
-    onSelect: setDisplayedRegion,
+    onSelect: handleSelectedRegion,
     assemblyName: assemblyName,
-    value: displayedRegions.length > 1 ? '' : refName,
     model: model,
     TextFieldProps: {
       variant: 'outlined',
@@ -3463,7 +3598,7 @@ var LinearGenomeViewHeader = /*#__PURE__*/mobxReact.observer(function (_ref4) {
         style: {
           padding: 0,
           height: WIDGET_HEIGHT,
-          background: styles.alpha(theme.palette.background.paper, 0.8)
+          background: core.alpha(theme.palette.background.paper, 0.8)
         }
       }
     }
@@ -3783,7 +3918,7 @@ var VerticalGuide = /*#__PURE__*/mobxReact.observer(function (_ref) {
   var model = _ref.model,
       coordX = _ref.coordX;
   var classes = useStyles$a();
-  return /*#__PURE__*/React__default.createElement(MUITooltip, {
+  return /*#__PURE__*/React__default.createElement(Tooltip$1, {
     open: true,
     placement: "top",
     title: util.stringify(model.pxToBp(coordX)),
@@ -4574,19 +4709,6 @@ function SearchResultsDialog(_ref) {
     }
   }
 
-  function handleShowTrack(trackId) {
-    var trackConfigSchema = pluginManager.pluggableConfigSchemaType('track');
-    var configuration = mobxStateTree.resolveIdentifier(trackConfigSchema, mobxStateTree.getRoot(model), trackId); // check if we have any tracks with that configuration
-
-    var shownTracks = model.tracks.filter(function (t) {
-      return t.configuration === configuration;
-    });
-
-    if (shownTracks.length === 0) {
-      model.showTrack(trackId);
-    }
-  }
-
   function getTrackName(trackId) {
     if (trackId) {
       var trackConfigSchema = pluginManager.pluggableConfigSchemaType('track');
@@ -4651,7 +4773,7 @@ function SearchResultsDialog(_ref) {
         var resultTrackId = result.getTrackId();
 
         if (resultTrackId) {
-          handleShowTrack(resultTrackId);
+          model.showTrack(resultTrackId);
         }
 
         handleClose();
@@ -4673,9 +4795,6 @@ var useStyles$g = /*#__PURE__*/core.makeStyles(function (theme) {
     importFormContainer: {
       padding: theme.spacing(2)
     },
-    importFormEntry: {
-      minWidth: 180
-    },
     button: {
       margin: theme.spacing(2)
     }
@@ -4689,18 +4808,14 @@ var ErrorDisplay = /*#__PURE__*/mobxReact.observer(function (_ref) {
   }, "".concat(error));
 });
 var ImportForm = /*#__PURE__*/mobxReact.observer(function (_ref2) {
-  var _regions$;
+  var _regions$, _regions$2;
 
   var model = _ref2.model;
   var classes = useStyles$g();
   var session = util.getSession(model);
   var assemblyNames = session.assemblyNames,
-      assemblyManager = session.assemblyManager;
-
-  var _getEnv = mobxStateTree.getEnv(session),
-      pluginManager = _getEnv.pluginManager;
-
-  var textSearchManager = pluginManager.rootModel.textSearchManager;
+      assemblyManager = session.assemblyManager,
+      textSearchManager = session.textSearchManager;
   var rankSearchResults = model.rankSearchResults,
       isSearchDialogDisplayed = model.isSearchDialogDisplayed,
       modelError = model.error;
@@ -4724,69 +4839,139 @@ var ImportForm = /*#__PURE__*/mobxReact.observer(function (_ref2) {
 
   var _useState5 = React.useState(),
       _useState6 = _slicedToArray(_useState5, 2),
-      mySelectedRegion = _useState6[0],
-      setSelectedRegion = _useState6[1];
+      myOption = _useState6[0],
+      setOption = _useState6[1]; // use this instead of useState initializer because the useState initializer
+  // won't update in response to an observable
 
-  var selectedRegion = mySelectedRegion || ((_regions$ = regions[0]) === null || _regions$ === void 0 ? void 0 : _regions$.refName);
 
-  function handleSelectedRegion(_x) {
-    return _handleSelectedRegion.apply(this, arguments);
+  var option = myOption || new BaseResult.RefSequenceResult({
+    refName: (_regions$ = regions[0]) === null || _regions$ === void 0 ? void 0 : _regions$.refName,
+    label: (_regions$2 = regions[0]) === null || _regions$2 === void 0 ? void 0 : _regions$2.refName
+  });
+  var selectedRegion = option === null || option === void 0 ? void 0 : option.getLocation();
+
+  function fetchResults(_x) {
+    return _fetchResults.apply(this, arguments);
   }
+  /**
+   * gets a string as input, or use stored option results from previous query,
+   * then re-query and
+   * 1) if it has multiple results: pop a dialog
+   * 2) if it's a single result navigate to it
+   * 3) else assume it's a locstring and navigate to it
+   */
 
-  function _handleSelectedRegion() {
-    _handleSelectedRegion = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee(input) {
-      var newRegion, results;
+
+  function _fetchResults() {
+    _fetchResults = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee(queryString) {
+      var results;
       return runtime_1.wrap(function _callee$(_context) {
         while (1) {
           switch (_context.prev = _context.next) {
             case 0:
-              newRegion = regions.find(function (r) {
-                return selectedRegion === r.refName;
-              });
+              if (!textSearchManager) {
+                console.warn('No text search manager');
+              }
 
-              if (!newRegion) {
-                _context.next = 6;
+              _context.next = 3;
+              return textSearchManager === null || textSearchManager === void 0 ? void 0 : textSearchManager.search({
+                queryString: queryString.toLowerCase(),
+                searchType: 'exact'
+              }, searchScope, rankSearchResults);
+
+            case 3:
+              results = _context.sent;
+              return _context.abrupt("return", dedupe(results));
+
+            case 5:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+    return _fetchResults.apply(this, arguments);
+  }
+
+  function handleSelectedRegion(_x2) {
+    return _handleSelectedRegion.apply(this, arguments);
+  } // implementation notes:
+  // having this wrapped in a form allows intuitive use of enter key to submit
+
+
+  function _handleSelectedRegion() {
+    _handleSelectedRegion = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee2(input) {
+      var trackId, location, _assembly$refNames, results;
+
+      return runtime_1.wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              if (option) {
+                _context2.next = 2;
                 break;
               }
 
-              model.setDisplayedRegions([newRegion]); // we use showAllRegions after setDisplayedRegions to make the entire
-              // region visible, xref #1703
+              return _context2.abrupt("return");
+
+            case 2:
+              trackId = option.getTrackId();
+              location = input || option.getLocation() || '';
+              _context2.prev = 4;
+
+              if (!(assembly !== null && assembly !== void 0 && (_assembly$refNames = assembly.refNames) !== null && _assembly$refNames !== void 0 && _assembly$refNames.includes(location))) {
+                _context2.next = 9;
+                break;
+              }
 
-              model.showAllRegions();
-              _context.next = 10;
+              model.navToLocString(location, selectedAsm);
+              _context2.next = 20;
               break;
 
-            case 6:
-              _context.next = 8;
-              return textSearchManager === null || textSearchManager === void 0 ? void 0 : textSearchManager.search({
-                queryString: input.toLocaleLowerCase(),
-                searchType: 'exact'
-              }, searchScope, rankSearchResults);
+            case 9:
+              _context2.next = 11;
+              return fetchResults(input);
 
-            case 8:
-              results = _context.sent;
+            case 11:
+              results = _context2.sent;
 
-              if ((results === null || results === void 0 ? void 0 : results.length) > 0) {
-                model.setSearchResults(results, input.toLocaleLowerCase());
-              } else {
-                try {
-                  input && model.navToLocString(input, selectedAsm);
-                } catch (e) {
-                  if ("".concat(e) === "Error: Unknown reference sequence \"".concat(input, "\"")) {
-                    model.setSearchResults(results, input.toLocaleLowerCase());
-                  } else {
-                    console.warn(e);
-                    session.notify("".concat(e), 'warning');
-                  }
-                }
+              if (!(results && results.length > 1)) {
+                _context2.next = 17;
+                break;
               }
 
-            case 10:
+              model.setSearchResults(results, input.toLowerCase());
+              return _context2.abrupt("return");
+
+            case 17:
+              if ((results === null || results === void 0 ? void 0 : results.length) === 1) {
+                location = results[0].getLocation();
+                trackId = results[0].getTrackId();
+              }
+
+            case 18:
+              model.navToLocString(location, selectedAsm);
+
+              if (trackId) {
+                model.showTrack(trackId);
+              }
+
+            case 20:
+              _context2.next = 26;
+              break;
+
+            case 22:
+              _context2.prev = 22;
+              _context2.t0 = _context2["catch"](4);
+              console.error(_context2.t0);
+              session.notify("".concat(_context2.t0), 'warning');
+
+            case 26:
             case "end":
-              return _context.stop();
+              return _context2.stop();
           }
         }
-      }, _callee);
+      }, _callee2, null, [[4, 22]]);
     }));
     return _handleSelectedRegion.apply(this, arguments);
   }
@@ -4795,6 +4980,10 @@ var ImportForm = /*#__PURE__*/mobxReact.observer(function (_ref2) {
     error: err
   }) : null, /*#__PURE__*/React__default.createElement(core.Container, {
     className: classes.importFormContainer
+  }, /*#__PURE__*/React__default.createElement("form", {
+    onSubmit: function onSubmit(event) {
+      event.preventDefault();
+    }
   }, /*#__PURE__*/React__default.createElement(core.Grid, {
     container: true,
     spacing: 1,
@@ -4818,27 +5007,12 @@ var ImportForm = /*#__PURE__*/mobxReact.observer(function (_ref2) {
     assemblyName: message ? undefined : selectedAsm,
     value: selectedRegion,
     onSelect: function onSelect(option) {
-      return setSelectedRegion(option.getLocation());
+      setOption(option);
     },
     TextFieldProps: {
       margin: 'normal',
       variant: 'outlined',
-      helperText: 'Enter a sequence or location',
-      className: classes.importFormEntry,
-      onBlur: function onBlur(event) {
-        if (event.target.value !== '') {
-          setSelectedRegion(event.target.value);
-        }
-      },
-      onKeyPress: function onKeyPress(event) {
-        var elt = event.target; // maybe check regular expression here to see if it's a
-        // locstring try defaulting exact matches to first exact
-        // match
-
-        if (event.key === 'Enter') {
-          handleSelectedRegion(elt.value);
-        }
-      }
+      helperText: 'Enter a sequence or location'
     }
   }) : /*#__PURE__*/React__default.createElement(core.CircularProgress, {
     role: "progressbar",
@@ -4847,6 +5021,7 @@ var ImportForm = /*#__PURE__*/mobxReact.observer(function (_ref2) {
   }) : null), /*#__PURE__*/React__default.createElement(core.Grid, {
     item: true
   }, /*#__PURE__*/React__default.createElement(core.Button, {
+    type: "submit",
     disabled: !selectedRegion,
     className: classes.button,
     onClick: function onClick() {
@@ -4867,7 +5042,7 @@ var ImportForm = /*#__PURE__*/mobxReact.observer(function (_ref2) {
     },
     variant: "contained",
     color: "secondary"
-  }, "Show all regions in assembly")))), isSearchDialogDisplayed ? /*#__PURE__*/React__default.createElement(SearchResultsDialog, {
+  }, "Show all regions in assembly"))))), isSearchDialogDisplayed ? /*#__PURE__*/React__default.createElement(SearchResultsDialog, {
     model: model,
     optAssemblyName: selectedAsm,
     handleClose: function handleClose() {
@@ -4925,7 +5100,7 @@ var MiniControls = /*#__PURE__*/mobxReact.observer(function (props) {
   }));
 });
 
-var useStyles$h = /*#__PURE__*/styles.makeStyles(function (theme) {
+var useStyles$h = /*#__PURE__*/core.makeStyles(function (theme) {
   return {
     loadingMessage: {
       padding: theme.spacing(5)
@@ -4953,7 +5128,7 @@ function fetchSequence(_x, _x2, _x3) {
 }
 
 function _fetchSequence() {
-  _fetchSequence = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee2(model, selectedRegions, signal) {
+  _fetchSequence = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee2(model, regions, signal) {
     var session, leftOffset, rightOffset, rpcManager, assemblyManager, assemblyName, assembly, adapterConfig, sessionId, chunks;
     return runtime_1.wrap(function _callee2$(_context2) {
       while (1) {
@@ -4993,7 +5168,7 @@ function _fetchSequence() {
             adapterConfig = configuration.readConfObject(assembly.configuration, ['sequence', 'adapter']);
             sessionId = 'getSequence';
             _context2.next = 15;
-            return Promise.all(selectedRegions.map(function (region) {
+            return Promise.all(regions.map(function (region) {
               return rpcManager.call(sessionId, 'CoreGetFeatures', {
                 adapterConfig: adapterConfig,
                 region: region,
@@ -5029,12 +5204,12 @@ function SequenceDialog(_ref) {
       error = _useState2[0],
       setError = _useState2[1];
 
-  var _useState3 = React.useState(''),
+  var _useState3 = React.useState(),
       _useState4 = _slicedToArray(_useState3, 2),
       sequence = _useState4[0],
       setSequence = _useState4[1];
 
-  var loading = Boolean(!sequence) || Boolean(error);
+  var loading = Boolean(sequence === undefined);
   var leftOffset = model.leftOffset,
       rightOffset = model.rightOffset; // avoid infinite looping of useEffect
   // random note: the current selected region can't be a computed because it
@@ -5047,25 +5222,6 @@ function SequenceDialog(_ref) {
     var active = true;
     var controller = new AbortController();
 
-    function formatSequence(seqChunks) {
-      return formatFastaStrings.formatSeqFasta(seqChunks.map(function (chunk) {
-        var chunkSeq = chunk.get('seq');
-        var chunkRefName = chunk.get('refName');
-        var chunkStart = chunk.get('start') + 1;
-        var chunkEnd = chunk.get('end');
-        var chunkLocstring = "".concat(chunkRefName, ":").concat(chunkStart, "-").concat(chunkEnd);
-
-        if ((chunkSeq === null || chunkSeq === void 0 ? void 0 : chunkSeq.length) !== chunkEnd - chunkStart + 1) {
-          throw new Error("".concat(chunkLocstring, " returned ").concat(chunkSeq.length.toLocaleString(), " bases, but should have returned ").concat((chunkEnd - chunkStart).toLocaleString()));
-        }
-
-        return {
-          header: chunkLocstring,
-          seq: chunkSeq
-        };
-      }));
-    }
-
     _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee() {
       var chunks;
       return runtime_1.wrap(function _callee$(_context) {
@@ -5086,7 +5242,24 @@ function SequenceDialog(_ref) {
               chunks = _context.sent;
 
               if (active) {
-                setSequence(formatSequence(chunks));
+                setSequence(formatFastaStrings.formatSeqFasta(chunks.filter(function (f) {
+                  return !!f;
+                }).map(function (chunk) {
+                  var chunkSeq = chunk.get('seq');
+                  var chunkRefName = chunk.get('refName');
+                  var chunkStart = chunk.get('start') + 1;
+                  var chunkEnd = chunk.get('end');
+                  var chunkLocstring = "".concat(chunkRefName, ":").concat(chunkStart, "-").concat(chunkEnd);
+
+                  if ((chunkSeq === null || chunkSeq === void 0 ? void 0 : chunkSeq.length) !== chunkEnd - chunkStart + 1) {
+                    throw new Error("".concat(chunkLocstring, " returned ").concat(chunkSeq.length.toLocaleString(), " bases, but should have returned ").concat((chunkEnd - chunkStart).toLocaleString()));
+                  }
+
+                  return {
+                    header: chunkLocstring,
+                    seq: chunkSeq
+                  };
+                })));
               }
 
               _context.next = 9;
@@ -5121,7 +5294,7 @@ function SequenceDialog(_ref) {
       active = false;
     };
   }, [model, session, regionsSelected, setSequence]);
-  var sequenceTooLarge = sequence.length > 1000000;
+  var sequenceTooLarge = sequence ? sequence.length > 1000000 : false;
   return /*#__PURE__*/React__default.createElement(core.Dialog, {
     "data-testid": "sequence-dialog",
     maxWidth: "xl",
@@ -5146,7 +5319,7 @@ function SequenceDialog(_ref) {
     },
     size: 20,
     disableShrink: true
-  })) : null, sequence !== undefined ? /*#__PURE__*/React__default.createElement(core.TextField, {
+  })) : null, /*#__PURE__*/React__default.createElement(core.TextField, {
     "data-testid": "rubberband-sequence",
     variant: "outlined",
     multiline: true,
@@ -5161,12 +5334,12 @@ function SequenceDialog(_ref) {
         input: classes.textAreaFont
       }
     }
-  }) : null), /*#__PURE__*/React__default.createElement(core.DialogActions, null, /*#__PURE__*/React__default.createElement(core.Button, {
+  })), /*#__PURE__*/React__default.createElement(core.DialogActions, null, /*#__PURE__*/React__default.createElement(core.Button, {
     onClick: function onClick() {
       copy(sequence || '');
       session.notify('Copied to clipboard', 'success');
     },
-    disabled: loading || sequenceTooLarge,
+    disabled: loading || !!error || sequenceTooLarge,
     color: "primary",
     startIcon: /*#__PURE__*/React__default.createElement(Icons.ContentCopy, null)
   }, "Copy to clipboard"), /*#__PURE__*/React__default.createElement(core.Button, {
@@ -5176,7 +5349,7 @@ function SequenceDialog(_ref) {
       });
       fileSaver.saveAs(seqFastaFile, 'jbrowse_ref_seq.fa');
     },
-    disabled: loading,
+    disabled: loading || !!error,
     color: "primary",
     startIcon: /*#__PURE__*/React__default.createElement(GetAppIcon, null)
   }, "Download FASTA"), /*#__PURE__*/React__default.createElement(core.Button, {
@@ -5197,20 +5370,17 @@ function mathPower(num) {
 }
 
 var useStyles$i = /*#__PURE__*/styles.makeStyles(function () {
-  return (
-    /* theme */
-    {
-      majorTickLabel: {
-        fontSize: '11px'
-      },
-      majorTick: {
-        stroke: '#555'
-      },
-      minorTick: {
-        stroke: '#999'
-      }
+  return {
+    majorTickLabel: {
+      fontSize: '11px'
+    },
+    majorTick: {
+      stroke: '#555'
+    },
+    minorTick: {
+      stroke: '#999'
     }
-  );
+  };
 });
 
 function Ruler(_ref) {
@@ -5629,8 +5799,10 @@ var useStyles$k = /*#__PURE__*/styles.makeStyles(function (theme) {
 function ExportSvgDlg(_ref) {
   var model = _ref.model,
       handleClose = _ref.handleClose;
+  // @ts-ignore
+  var offscreenCanvas = typeof OffscreenCanvas !== 'undefined';
 
-  var _useState = React.useState(typeof OffscreenCanvas !== 'undefined'),
+  var _useState = React.useState(offscreenCanvas),
       _useState2 = _slicedToArray(_useState, 2),
       rasterizeLayers = _useState2[0],
       setRasterizeLayers = _useState2[1];
@@ -5663,7 +5835,7 @@ function ExportSvgDlg(_ref) {
     }
   }), /*#__PURE__*/React__default.createElement(core.Typography, {
     display: "inline"
-  }, "Creating SVG")) : null, typeof OffscreenCanvas !== 'undefined' ? /*#__PURE__*/React__default.createElement(core.FormControlLabel, {
+  }, "Creating SVG")) : null, offscreenCanvas ? /*#__PURE__*/React__default.createElement(core.FormControlLabel, {
     control: /*#__PURE__*/React__default.createElement(core.Checkbox, {
       checked: rasterizeLayers,
       onChange: function onChange() {
@@ -5673,7 +5845,13 @@ function ExportSvgDlg(_ref) {
       }
     }),
     label: "Rasterize canvas based tracks? File may be much larger if this is turned off"
-  }) : /*#__PURE__*/React__default.createElement(core.Typography, null, "Note: rasterizing layers not yet supported in this browser, so SVG size may be large"), /*#__PURE__*/React__default.createElement(core.Button, {
+  }) : /*#__PURE__*/React__default.createElement(core.Typography, null, "Note: rasterizing layers not yet supported in this browser, so SVG size may be large")), /*#__PURE__*/React__default.createElement(core.DialogActions, null, /*#__PURE__*/React__default.createElement(core.Button, {
+    variant: "contained",
+    color: "secondary",
+    onClick: function onClick() {
+      return handleClose();
+    }
+  }, "Cancel"), /*#__PURE__*/React__default.createElement(core.Button, {
     variant: "contained",
     color: "primary",
     type: "submit",
@@ -5693,25 +5871,26 @@ function ExportSvgDlg(_ref) {
 
               case 5:
                 handleClose();
-                _context.next = 11;
+                _context.next = 12;
                 break;
 
               case 8:
                 _context.prev = 8;
                 _context.t0 = _context["catch"](2);
+                console.error(_context.t0);
                 setError(_context.t0);
 
-              case 11:
-                _context.prev = 11;
+              case 12:
+                _context.prev = 12;
                 setLoading(false);
-                return _context.finish(11);
+                return _context.finish(12);
 
-              case 14:
+              case 15:
               case "end":
                 return _context.stop();
             }
           }
-        }, _callee, null, [[2, 8, 11, 14]]);
+        }, _callee, null, [[2, 8, 12, 15]]);
       }));
 
       function onClick() {
@@ -6226,7 +6405,12 @@ function stateModelFactory$1(pluginManager) {
         var displayInitialSnapshot = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
         var trackConfigSchema = pluginManager.pluggableConfigSchemaType('track');
         var configuration = mobxStateTree.resolveIdentifier(trackConfigSchema, mobxStateTree.getRoot(self), trackId);
-        var trackType = pluginManager.getTrackType(configuration.type);
+
+        if (!configuration) {
+          throw new Error("Could not resolve identifier");
+        }
+
+        var trackType = pluginManager.getTrackType(configuration === null || configuration === void 0 ? void 0 : configuration.type);
 
         if (!trackType) {
           throw new Error("unknown track type ".concat(configuration.type));
@@ -6244,16 +6428,24 @@ function stateModelFactory$1(pluginManager) {
           throw new Error("could not find a compatible display for view type ".concat(self.type));
         }
 
-        var track = trackType.stateModel.create(_objectSpread2(_objectSpread2({}, initialSnapshot), {}, {
-          type: configuration.type,
-          configuration: configuration,
-          displays: [_objectSpread2({
-            type: displayConf.type,
-            configuration: displayConf
-          }, displayInitialSnapshot)]
-        }));
-        self.tracks.push(track);
-        return track;
+        var shownTracks = self.tracks.filter(function (t) {
+          return t.configuration === configuration;
+        });
+
+        if (shownTracks.length === 0) {
+          var track = trackType.stateModel.create(_objectSpread2(_objectSpread2({}, initialSnapshot), {}, {
+            type: configuration.type,
+            configuration: configuration,
+            displays: [_objectSpread2({
+              type: displayConf.type,
+              configuration: displayConf
+            }, displayInitialSnapshot)]
+          }));
+          self.tracks.push(track);
+          return track;
+        }
+
+        return shownTracks[0];
       },
       hideTrack: function hideTrack(trackId) {
         var trackConfigSchema = pluginManager.pluggableConfigSchemaType('track');
@@ -6811,8 +7003,7 @@ function stateModelFactory$1(pluginManager) {
       self.zoomTo(self.bpPerPx);
 
       if ( // already zoomed all the way in
-      targetBpPerPx < self.bpPerPx && self.bpPerPx === self.minBpPerPx || // already zoomed all the way out
-      targetBpPerPx > self.bpPerPx && self.bpPerPx === self.maxBpPerPx) {
+      targetBpPerPx < self.bpPerPx && self.bpPerPx === self.minBpPerPx || targetBpPerPx > self.bpPerPx && self.bpPerPx === self.maxBpPerPx) {
         return;
       }
 
@@ -6842,8 +7033,11 @@ function stateModelFactory$1(pluginManager) {
         var menuItems = [{
           label: 'Return to import form',
           onClick: function onClick() {
-            util.getSession(self).setDialogComponent(ReturnToImportFormDlg, {
-              model: self
+            util.getSession(self).queueDialog(function (doneCallback) {
+              return [ReturnToImportFormDlg, {
+                model: self,
+                handleClose: doneCallback
+              }];
             });
           },
           icon: FolderOpenIcon
@@ -6851,8 +7045,11 @@ function stateModelFactory$1(pluginManager) {
           label: 'Export SVG',
           icon: PhotoCameraIcon,
           onClick: function onClick() {
-            util.getSession(self).setDialogComponent(ExportSvgDlg, {
-              model: self
+            util.getSession(self).queueDialog(function (doneCallback) {
+              return [ExportSvgDlg, {
+                model: self,
+                handleClose: doneCallback
+              }];
             });
           }
         }, {
@@ -7071,6 +7268,7 @@ var stateModelFactory$2 = function stateModelFactory(configSchema) {
   return mobxStateTree.types.compose('LinearBasicDisplay', BaseLinearDisplay$1, mobxStateTree.types.model({
     type: mobxStateTree.types.literal('LinearBasicDisplay'),
     trackShowLabels: mobxStateTree.types.maybe(mobxStateTree.types["boolean"]),
+    trackShowDescriptions: mobxStateTree.types.maybe(mobxStateTree.types["boolean"]),
     trackDisplayMode: mobxStateTree.types.maybe(mobxStateTree.types.string),
     trackMaxHeight: mobxStateTree.types.maybe(mobxStateTree.types.number),
     configuration: configuration.ConfigurationReference(configSchema)
@@ -7085,6 +7283,11 @@ var stateModelFactory$2 = function stateModelFactory(configSchema) {
         return self.trackShowLabels !== undefined ? self.trackShowLabels : showLabels;
       },
 
+      get showDescriptions() {
+        var showDescriptions = configuration.getConf(self, ['renderer', 'showLabels']);
+        return self.trackShowDescriptions !== undefined ? self.trackShowDescriptions : showDescriptions;
+      },
+
       get maxHeight() {
         var maxHeight = configuration.getConf(self, ['renderer', 'maxHeight']);
         return self.trackMaxHeight !== undefined ? self.trackMaxHeight : maxHeight;
@@ -7099,6 +7302,7 @@ var stateModelFactory$2 = function stateModelFactory(configSchema) {
         var configBlob = configuration.getConf(self, ['renderer']) || {};
         return self.rendererType.configSchema.create(_objectSpread2(_objectSpread2({}, configBlob), {}, {
           showLabels: this.showLabels,
+          showDescriptions: this.showDescriptions,
           displayMode: this.displayMode,
           maxHeight: this.maxHeight
         }), mobxStateTree.getEnv(self));
@@ -7110,6 +7314,9 @@ var stateModelFactory$2 = function stateModelFactory(configSchema) {
       toggleShowLabels: function toggleShowLabels() {
         self.trackShowLabels = !self.showLabels;
       },
+      toggleShowDescriptions: function toggleShowDescriptions() {
+        self.trackShowDescriptions = !self.showDescriptions;
+      },
       setDisplayMode: function setDisplayMode(val) {
         self.trackDisplayMode = val;
       },
@@ -7136,6 +7343,14 @@ var stateModelFactory$2 = function stateModelFactory(configSchema) {
           onClick: function onClick() {
             self.toggleShowLabels();
           }
+        }, {
+          label: 'Show descriptions',
+          icon: VisibilityIcon,
+          type: 'checkbox',
+          checked: self.showDescriptions,
+          onClick: function onClick() {
+            self.toggleShowDescriptions();
+          }
         }, {
           label: 'Display mode',
           icon: VisibilityIcon,
@@ -7150,8 +7365,11 @@ var stateModelFactory$2 = function stateModelFactory(configSchema) {
         }, {
           label: 'Set max height',
           onClick: function onClick() {
-            util.getSession(self).setDialogComponent(SetMaxHeightDlg, {
-              model: self
+            util.getSession(self).queueDialog(function (doneCallback) {
+              return [SetMaxHeightDlg, {
+                model: self,
+                handleClose: doneCallback
+              }];
             });
           }
         }]);
@@ -7262,7 +7480,7 @@ var LinearGenomeViewPlugin = /*#__PURE__*/function (_Plugin) {
     key: "configure",
     value: function configure(pluginManager) {
       if (util.isAbstractMenuManager(pluginManager.rootModel)) {
-        pluginManager.rootModel.appendToSubMenu(['File', 'Add'], {
+        pluginManager.rootModel.appendToSubMenu(['Add'], {
           label: 'Linear genome view',
           icon: LineStyleIcon,
           onClick: function onClick(session) {
@@ -7347,6 +7565,7 @@ var SetMaxHeight$1 = {
 
 exports.BaseLinearDisplay = BaseLinearDisplay$1;
 exports.BaseLinearDisplayComponent = BaseLinearDisplay;
+exports.RefNameAutocomplete = RefNameAutocomplete$1;
 exports.baseLinearDisplayConfigSchema = baseLinearDisplayConfigSchema;
 exports.default = LinearGenomeViewPlugin;
 exports.linearBareDisplayConfigSchemaFactory = configSchemaFactory;