@jbrowse/plugin-linear-genome-view 1.5.9 → 1.6.0

package/dist/plugin-linear-genome-view.esm.js

@@ -1,28 +1,28 @@
 import React, { useRef, useState, useMemo, useEffect, Suspense, lazy } from 'react';
+import { autorun, when, transaction } from 'mobx';
 import { ConfigurationSchema, getConf, readConfObject, ConfigurationReference as ConfigurationReference$1 } from '@jbrowse/core/configuration';
 import { BaseDisplay, BaseViewModel, createBaseTrackConfig, createBaseTrackModel } from '@jbrowse/core/pluggableElementTypes/models';
 import TrackType from '@jbrowse/core/pluggableElementTypes/TrackType';
 import DisplayType from '@jbrowse/core/pluggableElementTypes/DisplayType';
 import ViewType from '@jbrowse/core/pluggableElementTypes/ViewType';
 import Plugin from '@jbrowse/core/Plugin';
-import { getContainingView, getContainingDisplay, makeAbortableReaction, assembleLocString, getSession, isSessionModelWithWidgets, isSelectionContainer, stringify, useDebounce, measureText, useDebouncedCallback, clamp, isViewContainer, parseLocString, findLastIndex, springAnimate, isAbstractMenuManager } from '@jbrowse/core/util';
+import { getContainingView, getContainingDisplay, makeAbortableReaction, assembleLocString, getSession, isSessionModelWithWidgets, isSelectionContainer, isAbortException, stringify, useDebounce, measureText, useDebouncedCallback, viewBpToPx, clamp, isViewContainer, parseLocString, findLastIndex, springAnimate, isAbstractMenuManager } from '@jbrowse/core/util';
 import LineStyleIcon from '@material-ui/icons/LineStyle';
+import { useTheme, makeStyles as makeStyles$1, alpha, Portal, Typography as Typography$1, Button as Button$1, Popover, Tooltip as Tooltip$1, TextField, Popper, CircularProgress, InputAdornment, IconButton, Dialog, DialogTitle, DialogContent, FormControlLabel, Checkbox, DialogActions, Divider, FormGroup, Paper, Container, Grid, TableContainer, Table, TableHead, TableRow, TableCell, TableBody } from '@material-ui/core';
 import CompositeMap from '@jbrowse/core/util/compositeMap';
 import { isFeature } from '@jbrowse/core/util/simpleFeature';
 import { getParentRenderProps, getTrackAssemblyNames, getRpcSessionId } from '@jbrowse/core/util/tracks';
-import Button from '@material-ui/core/Button';
-import Typography from '@material-ui/core/Typography';
-import MenuOpenIcon from '@material-ui/icons/MenuOpen';
-import { autorun, when, transaction } from 'mobx';
 import { getParent, types, cast, isAlive, addDisposer, getEnv, resolveIdentifier, getRoot, getSnapshot } from 'mobx-state-tree';
-import { useTheme, makeStyles as makeStyles$1, alpha, Portal, Popover, Typography as Typography$1, Tooltip as Tooltip$1, TextField, Popper, CircularProgress, InputAdornment, IconButton, Dialog, DialogTitle, DialogContent, FormControlLabel, Checkbox, DialogActions, Button as Button$1, Divider, FormGroup, Container, Grid, TableContainer, Paper as Paper$1, Table, TableHead, TableRow, TableCell, TableBody } from '@material-ui/core';
+import MenuOpenIcon from '@material-ui/icons/MenuOpen';
 import { Menu, ResizeHandle } from '@jbrowse/core/ui';
 import { observer, PropTypes } from 'mobx-react';
 import { usePopper } from 'react-popper';
-import { makeStyles, alpha as alpha$1 } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import { ContentBlock as ContentBlock$1, ElidedBlock as ElidedBlock$1, InterRegionPaddingBlock as InterRegionPaddingBlock$1 } from '@jbrowse/core/util/blockTypes';
 import { Region, ElementId } from '@jbrowse/core/util/types/mst';
 import { isRetryException } from '@jbrowse/core/util/types';
+import Typography from '@material-ui/core/Typography';
+import Button from '@material-ui/core/Button';
 import RefreshIcon from '@material-ui/icons/Refresh';
 import { ConfigurationReference } from '@jbrowse/core/configuration/configurationSchema';
 import calculateDynamicBlocks from '@jbrowse/core/util/calculateDynamicBlocks';
@@ -50,15 +50,15 @@ import ArrowBackIcon from '@material-ui/icons/ArrowBack';
 import IconButton$1 from '@material-ui/core/IconButton';
 import Slider from '@material-ui/core/Slider';
 import ZoomOut from '@material-ui/icons/ZoomOut';
-import Paper from '@material-ui/core/Paper';
+import Paper$1 from '@material-ui/core/Paper';
 import MoreVertIcon from '@material-ui/icons/MoreVert';
 import DragIcon from '@material-ui/icons/DragIndicator';
 import normalizeWheel from 'normalize-wheel';
-import { alpha as alpha$2 } from '@material-ui/core/styles/colorManipulator';
+import { alpha as alpha$1 } from '@material-ui/core/styles/colorManipulator';
 import Popover$1 from '@material-ui/core/Popover';
 import Tooltip$2 from '@material-ui/core/Tooltip';
-import AssemblySelector from '@jbrowse/core/ui/AssemblySelector';
 import ErrorMessage from '@jbrowse/core/ui/ErrorMessage';
+import AssemblySelector from '@jbrowse/core/ui/AssemblySelector';
 import ArrowDown from '@material-ui/icons/KeyboardArrowDown';
 import Menu$1 from '@jbrowse/core/ui/Menu';
 import copy from 'copy-to-clipboard';
@@ -182,14 +182,14 @@ function _inherits(subClass, superClass) {
     throw new TypeError("Super expression must either be null or a function");
   }
 
+  subClass.prototype = Object.create(superClass && superClass.prototype, {
+    constructor: {
+      value: subClass,
+      writable: true,
+      configurable: true
+    }
+  });
   Object.defineProperty(subClass, "prototype", {
-    value: Object.create(superClass && superClass.prototype, {
-      constructor: {
-        value: subClass,
-        writable: true,
-        configurable: true
-      }
-    }),
     writable: false
   });
   if (superClass) _setPrototypeOf(subClass, superClass);
@@ -429,16 +429,6 @@ function _createForOfIteratorHelper(o, allowArrayLike) {
   };
 }
 
-var baseLinearDisplayConfigSchema = /*#__PURE__*/ConfigurationSchema('BaseLinearDisplay', {
-  maxDisplayedBpPerPx: {
-    type: 'number',
-    description: 'maximum bpPerPx that is displayed in the view',
-    defaultValue: Number.MAX_VALUE
-  }
-}, {
-  explicitIdentifier: 'displayId'
-});
-
 function createCommonjsModule(fn, module) {
 	return module = { exports: {} }, fn(module, module.exports), module.exports;
 }
@@ -1168,6 +1158,21 @@ var runtime_1 = /*#__PURE__*/createCommonjsModule(function (module) {
   }
 });
 
+var baseLinearDisplayConfigSchema = /*#__PURE__*/ConfigurationSchema('BaseLinearDisplay', {
+  maxFeatureScreenDensity: {
+    type: 'number',
+    description: 'maximum features per pixel that is displayed in the view, used if byte size estimates not available',
+    defaultValue: 0.3
+  },
+  fetchSizeLimit: {
+    type: 'number',
+    defaultValue: 1000000,
+    description: "maximum data to attempt to download for a given track, used if adapter doesn't specify one"
+  }
+}, {
+  explicitIdentifier: 'displayId'
+});
+
 var useStyles = /*#__PURE__*/makeStyles(function (theme) {
   return {
     contentBlock: {
@@ -1952,6 +1957,26 @@ function _renderBlockEffect() {
 }
 
 var _excluded = ["blockState"];
+
+function getId(id, index) {
+  var isJest = typeof jest === 'undefined';
+  return "clip-".concat(isJest ? id : 'jest', "-").concat(index);
+}
+
+function getDisplayStr(totalBytes) {
+  var displayBp;
+
+  if (Math.floor(totalBytes / 1000000) > 0) {
+    displayBp = "".concat(parseFloat((totalBytes / 1000000).toPrecision(3)), " Mb");
+  } else if (Math.floor(totalBytes / 1000) > 0) {
+    displayBp = "".concat(parseFloat((totalBytes / 1000).toPrecision(3)), " Kb");
+  } else {
+    displayBp = "".concat(Math.floor(totalBytes), " bytes");
+  }
+
+  return displayBp;
+}
+
 var minDisplayHeight = 20;
 var defaultDisplayHeight = 100;
 var BaseLinearDisplay$1 = /*#__PURE__*/types.compose('BaseLinearDisplay', BaseDisplay, types.model({
@@ -1959,13 +1984,17 @@ var BaseLinearDisplay$1 = /*#__PURE__*/types.compose('BaseLinearDisplay', BaseDi
     return n >= minDisplayHeight;
   }), defaultDisplayHeight),
   blockState: types.map(blockState),
-  userBpPerPxLimit: types.maybe(types.number)
+  userBpPerPxLimit: types.maybe(types.number),
+  userByteSizeLimit: types.maybe(types.number)
 }))["volatile"](function () {
   return {
+    currBpPerPx: 0,
     message: '',
     featureIdUnderMouse: undefined,
     contextMenuFeature: undefined,
-    scrollTop: 0
+    scrollTop: 0,
+    estimatedRegionStatsP: undefined,
+    estimatedRegionStats: undefined
   };
 }).views(function (self) {
   return {
@@ -1987,13 +2016,6 @@ var BaseLinearDisplay$1 = /*#__PURE__*/types.compose('BaseLinearDisplay', BaseDi
   };
 }).views(function (self) {
   return {
-    /**
-     * set limit to config amount, or user amount if they force load,
-     */
-    get maxViewBpPerPx() {
-      return self.userBpPerPxLimit || getConf(self, 'maxDisplayedBpPerPx');
-    },
-
     /**
      * how many milliseconds to wait for the display to
      * "settle" before re-rendering a block
@@ -2063,7 +2085,8 @@ var BaseLinearDisplay$1 = /*#__PURE__*/types.compose('BaseLinearDisplay', BaseDi
     },
 
     get featureUnderMouse() {
-      return self.featureIdUnderMouse ? this.features.get(self.featureIdUnderMouse) : undefined;
+      var feat = self.featureIdUnderMouse;
+      return feat ? this.features.get(feat) : undefined;
     },
 
     getFeatureOverlapping: function getFeatureOverlapping(blockKey, x, y) {
@@ -2089,16 +2112,49 @@ var BaseLinearDisplay$1 = /*#__PURE__*/types.compose('BaseLinearDisplay', BaseDi
         }
       });
       return ret;
+    },
+
+    get currentBytesRequested() {
+      var _self$estimatedRegion;
+
+      return ((_self$estimatedRegion = self.estimatedRegionStats) === null || _self$estimatedRegion === void 0 ? void 0 : _self$estimatedRegion.bytes) || 0;
+    },
+
+    get currentFeatureScreenDensity() {
+      var _self$estimatedRegion2;
+
+      var view = getContainingView(self);
+      return (((_self$estimatedRegion2 = self.estimatedRegionStats) === null || _self$estimatedRegion2 === void 0 ? void 0 : _self$estimatedRegion2.featureDensity) || 0) * view.bpPerPx;
+    },
+
+    get maxFeatureScreenDensity() {
+      return getConf(self, 'maxFeatureScreenDensity');
+    },
+
+    get estimatedStatsReady() {
+      return !!self.estimatedRegionStats;
+    },
+
+    get maxAllowableBytes() {
+      var _self$estimatedRegion3;
+
+      return self.userByteSizeLimit || ((_self$estimatedRegion3 = self.estimatedRegionStats) === null || _self$estimatedRegion3 === void 0 ? void 0 : _self$estimatedRegion3.fetchSizeLimit) || getConf(self, 'fetchSizeLimit');
     }
+
   };
 }).actions(function (self) {
   return {
+    // base display reload does nothing, see specialized displays for details
+    setMessage: function setMessage(message) {
+      self.message = message;
+    },
     afterAttach: function afterAttach() {
       var _this = this;
 
-      // watch the parent's blocks to update our block state when they change
+      // watch the parent's blocks to update our block state when they change,
+      // then we recreate the blocks on our own model (creating and deleting to
+      // match the parent blocks)
       var blockWatchDisposer = autorun(function () {
-        // create any blocks that we need to create
         var blocksPresent = {};
         var view = getContainingView(self);
 
@@ -2109,8 +2165,7 @@ var BaseLinearDisplay$1 = /*#__PURE__*/types.compose('BaseLinearDisplay', BaseDi
             if (!self.blockState.has(block.key)) {
               _this.addBlock(block.key, block);
             }
-          }); // delete any blocks we need go delete
-
+          });
           self.blockState.forEach(function (_, key) {
             if (!blocksPresent[key]) {
               _this.deleteBlock(key);
@@ -2120,6 +2175,47 @@ var BaseLinearDisplay$1 = /*#__PURE__*/types.compose('BaseLinearDisplay', BaseDi
       });
       addDisposer(self, blockWatchDisposer);
     },
+    estimateRegionsStats: function estimateRegionsStats(regions, opts) {
+      var _this2 = this;
+
+      if (self.estimatedRegionStatsP) {
+        return self.estimatedRegionStatsP;
+      }
+
+      var _getSession2 = getSession(self),
+          rpcManager = _getSession2.rpcManager;
+
+      var adapterConfig = self.adapterConfig;
+      var sessionId = getRpcSessionId(self);
+
+      var params = _objectSpread2({
+        sessionId: sessionId,
+        regions: regions,
+        adapterConfig: adapterConfig,
+        statusCallback: function statusCallback(message) {
+          if (isAlive(self)) {
+            _this2.setMessage(message);
+          }
+        }
+      }, opts);
+
+      self.estimatedRegionStatsP = rpcManager.call(sessionId, 'CoreEstimateRegionStats', params)["catch"](function (e) {
+        _this2.setRegionStatsP(undefined);
+
+        throw e;
+      });
+      return self.estimatedRegionStatsP;
+    },
+    setRegionStatsP: function setRegionStatsP(p) {
+      self.estimatedRegionStatsP = p;
+    },
+    setRegionStats: function setRegionStats(estimatedRegionStats) {
+      self.estimatedRegionStats = estimatedRegionStats;
+    },
+    clearRegionStats: function clearRegionStats() {
+      self.estimatedRegionStatsP = undefined;
+      self.estimatedRegionStats = undefined;
+    },
     setHeight: function setHeight(displayHeight) {
       if (displayHeight > minDisplayHeight) {
         self.height = displayHeight;
@@ -2137,13 +2233,14 @@ var BaseLinearDisplay$1 = /*#__PURE__*/types.compose('BaseLinearDisplay', BaseDi
     setScrollTop: function setScrollTop(scrollTop) {
       self.scrollTop = scrollTop;
     },
-    // sets the new bpPerPxLimit if user chooses to force load
-    setUserBpPerPxLimit: function setUserBpPerPxLimit(limit) {
-      self.userBpPerPxLimit = limit;
-    },
-    // base display reload does nothing, see specialized displays for details
-    setMessage: function setMessage(message) {
-      self.message = message;
+    updateStatsLimit: function updateStatsLimit(stats) {
+      var view = getContainingView(self);
+
+      if (stats.bytes) {
+        self.userByteSizeLimit = stats.bytes;
+      } else {
+        self.userBpPerPxLimit = view.bpPerPx;
+      }
     },
     addBlock: function addBlock(key, block) {
       self.blockState.set(key, blockState.create({
@@ -2151,6 +2248,9 @@ var BaseLinearDisplay$1 = /*#__PURE__*/types.compose('BaseLinearDisplay', BaseDi
         region: block.toRegion()
       }));
     },
+    setCurrBpPerPx: function setCurrBpPerPx(n) {
+      self.currBpPerPx = n;
+    },
     deleteBlock: function deleteBlock(key) {
       self.blockState["delete"](key);
     },
@@ -2188,14 +2288,178 @@ var BaseLinearDisplay$1 = /*#__PURE__*/types.compose('BaseLinearDisplay', BaseDi
   };
 }).views(function (self) {
   return {
-    regionCannotBeRenderedText: function regionCannotBeRenderedText(_region) {
+    // region is too large if:
+    // - stats are ready
+    // - region is greater than 20kb (don't warn when zoomed in less than that)
+    // - and bytes > max allowed bytes || curr density>max density
+    get regionTooLarge() {
       var view = getContainingView(self);
 
-      if (view && view.bpPerPx > self.maxViewBpPerPx) {
-        return 'Zoom in to see features';
+      if (!self.estimatedStatsReady || view.dynamicBlocks.totalBp < 20000) {
+        return false;
       }
 
-      return '';
+      var bpLimitOrDensity = self.userBpPerPxLimit ? view.bpPerPx > self.userBpPerPxLimit : self.currentFeatureScreenDensity > self.maxFeatureScreenDensity;
+      return self.currentBytesRequested > self.maxAllowableBytes || bpLimitOrDensity;
+    },
+
+    // only shows a message of bytes requested is defined, the feature density
+    // based stats don't produce any helpful message besides to zoom in
+    get regionTooLargeReason() {
+      var req = self.currentBytesRequested;
+      var max = self.maxAllowableBytes;
+      return req && req > max ? "Requested too much data (".concat(getDisplayStr(req), ")") : '';
+    }
+
+  };
+}).actions(function (self) {
+  var superReload = self.reload;
+  return {
+    reload: function reload() {
+      return _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee() {
+        var aborter, view, estimatedRegionStats;
+        return runtime_1.wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                self.setError();
+                aborter = new AbortController();
+                view = getContainingView(self);
+
+                if (view.initialized) {
+                  _context.next = 5;
+                  break;
+                }
+
+                return _context.abrupt("return");
+
+              case 5:
+                _context.prev = 5;
+                self.estimatedRegionStatsP = self.estimateRegionsStats(view.staticBlocks.contentBlocks, {
+                  signal: aborter.signal
+                });
+                _context.next = 9;
+                return self.estimatedRegionStatsP;
+
+              case 9:
+                estimatedRegionStats = _context.sent;
+
+                if (!isAlive(self)) {
+                  _context.next = 15;
+                  break;
+                }
+
+                self.setRegionStats(estimatedRegionStats);
+                superReload();
+                _context.next = 16;
+                break;
+
+              case 15:
+                return _context.abrupt("return");
+
+              case 16:
+                _context.next = 21;
+                break;
+
+              case 18:
+                _context.prev = 18;
+                _context.t0 = _context["catch"](5);
+                self.setError(_context.t0);
+
+              case 21:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee, null, [[5, 18]]);
+      }))();
+    },
+    afterAttach: function afterAttach() {
+      // this autorun performs stats estimation
+      //
+      // the chain of events calls estimateRegionStats against the data
+      // adapter which by default uses featureDensity, but can also respond
+      // with a byte size estimate and fetch size limit (data adapter can
+      // define what is too much data)
+      addDisposer(self, autorun( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee2() {
+        var _self$estimatedRegion4, aborter, view, statsP, estimatedRegionStats;
+
+        return runtime_1.wrap(function _callee2$(_context2) {
+          while (1) {
+            switch (_context2.prev = _context2.next) {
+              case 0:
+                _context2.prev = 0;
+                aborter = new AbortController();
+                view = getContainingView(self);
+
+                if (view.initialized) {
+                  _context2.next = 5;
+                  break;
+                }
+
+                return _context2.abrupt("return");
+
+              case 5:
+                if (!(((_self$estimatedRegion4 = self.estimatedRegionStats) === null || _self$estimatedRegion4 === void 0 ? void 0 : _self$estimatedRegion4.featureDensity) !== undefined)) {
+                  _context2.next = 8;
+                  break;
+                }
+
+                self.setCurrBpPerPx(view.bpPerPx);
+                return _context2.abrupt("return");
+
+              case 8:
+                if (!(view.bpPerPx === self.currBpPerPx)) {
+                  _context2.next = 10;
+                  break;
+                }
+
+                return _context2.abrupt("return");
+
+              case 10:
+                self.clearRegionStats();
+                self.setCurrBpPerPx(view.bpPerPx);
+                statsP = self.estimateRegionsStats(view.staticBlocks.contentBlocks, {
+                  signal: aborter.signal
+                });
+                self.setRegionStatsP(statsP);
+                _context2.next = 16;
+                return statsP;
+
+              case 16:
+                estimatedRegionStats = _context2.sent;
+
+                if (isAlive(self)) {
+                  self.setRegionStats(estimatedRegionStats);
+                }
+
+                _context2.next = 23;
+                break;
+
+              case 20:
+                _context2.prev = 20;
+                _context2.t0 = _context2["catch"](0);
+
+                if (!isAbortException(_context2.t0) && isAlive(self)) {
+                  console.error(_context2.t0);
+                  self.setError(_context2.t0);
+                }
+
+              case 23:
+              case "end":
+                return _context2.stop();
+            }
+          }
+        }, _callee2, null, [[0, 20]]);
+      })), {
+        delay: 500
+      }));
+    }
+  };
+}).views(function (self) {
+  return {
+    regionCannotBeRenderedText: function regionCannotBeRenderedText(_region) {
+      return self.regionTooLarge ? 'Force load to see features' : '';
     },
 
     /**
@@ -2206,20 +2470,25 @@ var BaseLinearDisplay$1 = /*#__PURE__*/types.compose('BaseLinearDisplay', BaseDi
      *  react node allows user to force load at current setting
      */
     regionCannotBeRendered: function regionCannotBeRendered(_region) {
-      var view = getContainingView(self);
+      var regionTooLarge = self.regionTooLarge,
+          regionTooLargeReason = self.regionTooLargeReason;
 
-      if (view && view.bpPerPx > self.maxViewBpPerPx) {
-        return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Typography, {
+      if (regionTooLarge) {
+        return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Typography$1, {
           component: "span",
           variant: "body2"
-        }, "Zoom in to see features or", ' '), /*#__PURE__*/React.createElement(Button, {
-          "data-testid": "reload_button",
+        }, regionTooLargeReason ? regionTooLargeReason + '. ' : '', "Zoom in to see features or", ' '), /*#__PURE__*/React.createElement(Button$1, {
+          "data-testid": "force_reload_button",
           onClick: function onClick() {
-            self.setUserBpPerPxLimit(view.bpPerPx);
-            self.reload();
+            if (!self.estimatedRegionStats) {
+              console.error('No global stats?');
+            } else {
+              self.updateStatsLimit(self.estimatedRegionStats);
+              self.reload();
+            }
           },
           variant: "outlined"
-        }, "Force Load"), /*#__PURE__*/React.createElement(Typography, {
+        }, "Force Load"), /*#__PURE__*/React.createElement(Typography$1, {
           component: "span",
           variant: "body2"
         }, "(force load may be slow)"));
@@ -2242,7 +2511,9 @@ var BaseLinearDisplay$1 = /*#__PURE__*/types.compose('BaseLinearDisplay', BaseDi
       }] : [];
     },
     renderProps: function renderProps() {
+      var view = getContainingView(self);
       return _objectSpread2(_objectSpread2({}, getParentRenderProps(self)), {}, {
+        notReady: self.currBpPerPx !== view.bpPerPx || !self.estimatedRegionStats,
         rpcDriverName: self.rpcDriverName,
         displayModel: self,
         onFeatureClick: function onFeatureClick(_, featureId) {
@@ -2252,7 +2523,10 @@ var BaseLinearDisplay$1 = /*#__PURE__*/types.compose('BaseLinearDisplay', BaseDi
             self.clearFeatureSelection();
           } else {
             var feature = self.features.get(f);
-            self.selectFeature(feature);
+
+            if (feature) {
+              self.selectFeature(feature);
+            }
           }
         },
         onClick: function onClick() {
@@ -2285,18 +2559,18 @@ var BaseLinearDisplay$1 = /*#__PURE__*/types.compose('BaseLinearDisplay', BaseDi
 }).actions(function (self) {
   return {
     renderSvg: function renderSvg(opts) {
-      return _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee() {
-        var height, id, overrideHeight, view, viewOffsetPx, dynamicBlocks, width, renderings;
-        return runtime_1.wrap(function _callee$(_context) {
+      return _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee3() {
+        var height, id, overrideHeight, view, viewOffsetPx, roundedDynamicBlocks, width, renderings;
+        return runtime_1.wrap(function _callee3$(_context3) {
           while (1) {
-            switch (_context.prev = _context.next) {
+            switch (_context3.prev = _context3.next) {
               case 0:
                 height = self.height, id = self.id;
                 overrideHeight = opts.overrideHeight;
                 view = getContainingView(self);
-                viewOffsetPx = view.offsetPx, dynamicBlocks = view.roundedDynamicBlocks, width = view.width;
-                _context.next = 6;
-                return Promise.all(dynamicBlocks.map(function (block) {
+                viewOffsetPx = view.offsetPx, roundedDynamicBlocks = view.roundedDynamicBlocks, width = view.width;
+                _context3.next = 6;
+                return Promise.all(roundedDynamicBlocks.map(function (block) {
                   var blockState$1 = blockState.create({
                     key: block.key,
                     region: block
@@ -2334,13 +2608,11 @@ var BaseLinearDisplay$1 = /*#__PURE__*/types.compose('BaseLinearDisplay', BaseDi
                 }));
 
               case 6:
-                renderings = _context.sent;
-                return _context.abrupt("return", /*#__PURE__*/React.createElement(React.Fragment, null, renderings.map(function (rendering, index) {
-                  var offsetPx = dynamicBlocks[index].offsetPx;
-                  var offset = offsetPx - viewOffsetPx; // stabalize clipid under test for snapshot
-
-                  // stabalize clipid under test for snapshot
-                  var clipid = "clip-".concat(typeof jest === 'undefined' ? id : 'jest', "-").concat(index);
+                renderings = _context3.sent;
+                return _context3.abrupt("return", /*#__PURE__*/React.createElement(React.Fragment, null, renderings.map(function (rendering, index) {
+                  var offsetPx = roundedDynamicBlocks[index].offsetPx;
+                  var offset = offsetPx - viewOffsetPx;
+                  var clipid = getId(id, index);
                   return /*#__PURE__*/React.createElement(React.Fragment, {
                     key: "frag-".concat(index)
                   }, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
@@ -2354,7 +2626,10 @@ var BaseLinearDisplay$1 = /*#__PURE__*/types.compose('BaseLinearDisplay', BaseDi
                     transform: "translate(".concat(offset, " 0)")
                   }, /*#__PURE__*/React.createElement("g", {
                     clipPath: "url(#".concat(clipid, ")")
-                  }, /*#__PURE__*/React.isValidElement(rendering.reactElement) ? rendering.reactElement : /*#__PURE__*/React.createElement("g", {
+                  }, /*#__PURE__*/React.isValidElement(rendering.reactElement) ? rendering.reactElement :
+                  /*#__PURE__*/
+                  // eslint-disable-next-line react/no-danger
+                  React.createElement("g", {
                     dangerouslySetInnerHTML: {
                       __html: rendering.html
                     }
@@ -2363,10 +2638,10 @@ var BaseLinearDisplay$1 = /*#__PURE__*/types.compose('BaseLinearDisplay', BaseDi
 
               case 8:
               case "end":
-                return _context.stop();
+                return _context3.stop();
             }
           }
-        }, _callee);
+        }, _callee3);
       }))();
     }
   };
@@ -3564,6 +3839,8 @@ var MyPopper = function MyPopper(props) {
 
 function RefNameAutocomplete(_ref) {
   var model = _ref.model,
+      _ref$showHelp = _ref.showHelp,
+      showHelp = _ref$showHelp === void 0 ? true : _ref$showHelp,
       onSelect = _ref.onSelect,
       assemblyName = _ref.assemblyName,
       style = _ref.style,
@@ -3774,11 +4051,11 @@ function RefNameAutocomplete(_ref) {
             style: {
               marginRight: 7
             }
-          }, /*#__PURE__*/React.createElement(SearchIcon, null), /*#__PURE__*/React.createElement(IconButton, {
+          }, /*#__PURE__*/React.createElement(SearchIcon, null), showHelp ? /*#__PURE__*/React.createElement(IconButton, {
             onClick: function onClick() {
               return setHelpDialogDisplayed(true);
             }
-          }, /*#__PURE__*/React.createElement(HelpIcon, null))), params.InputProps.endAdornment)
+          }, /*#__PURE__*/React.createElement(HelpIcon, null)) : null), params.InputProps.endAdornment)
         }),
         placeholder: "Search for location",
         onChange: function onChange(e) {
@@ -3812,67 +4089,235 @@ function RefNameAutocomplete(_ref) {
 
 var RefNameAutocomplete$1 = /*#__PURE__*/observer(RefNameAutocomplete);
 
-var useStyles$7 = /*#__PURE__*/makeStyles(function (theme) {
+var useStyles$7 = /*#__PURE__*/makeStyles$1(function () {
   return {
-    closeButton: {
-      position: 'absolute',
-      right: theme.spacing(1),
-      top: theme.spacing(1),
-      color: theme.palette.grey[500]
+    headerRefName: {
+      minWidth: 100
     }
   };
 });
-function ExportSvgDlg(_ref) {
+
+function SearchBox(_ref) {
   var model = _ref.model,
-      handleClose = _ref.handleClose;
-  // @ts-ignore
-  var offscreenCanvas = typeof OffscreenCanvas !== 'undefined';
+      showHelp = _ref.showHelp;
+  var classes = useStyles$7();
+  var theme = useTheme();
+  var session = getSession(model);
+  var textSearchManager = session.textSearchManager,
+      assemblyManager = session.assemblyManager;
+  var assemblyNames = model.assemblyNames,
+      rankSearchResults = model.rankSearchResults;
+  var assemblyName = assemblyNames[0];
+  var assembly = assemblyManager.get(assemblyName);
+  var searchScope = model.searchScope(assemblyName);
 
-  var _useState = useState(offscreenCanvas),
-      _useState2 = _slicedToArray(_useState, 2),
-      rasterizeLayers = _useState2[0],
-      setRasterizeLayers = _useState2[1];
+  function fetchResults(_x, _x2) {
+    return _fetchResults.apply(this, arguments);
+  }
 
-  var _useState3 = useState(false),
-      _useState4 = _slicedToArray(_useState3, 2),
-      loading = _useState4[0],
-      setLoading = _useState4[1];
+  function _fetchResults() {
+    _fetchResults = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee(query, searchType) {
+      var _assembly$allRefNames;
 
-  var _useState5 = useState(),
-      _useState6 = _slicedToArray(_useState5, 2),
-      error = _useState6[0],
-      setError = _useState6[1];
+      var textSearchResults, refNameResults;
+      return runtime_1.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              if (!textSearchManager) {
+                console.warn('No text search manager');
+              }
 
-  var classes = useStyles$7();
-  return /*#__PURE__*/React.createElement(Dialog, {
-    open: true,
-    onClose: handleClose
-  }, /*#__PURE__*/React.createElement(DialogTitle, null, "Export SVG", /*#__PURE__*/React.createElement(IconButton, {
-    className: classes.closeButton,
-    onClick: handleClose
-  }, /*#__PURE__*/React.createElement(CloseIcon, null))), /*#__PURE__*/React.createElement(DialogContent, null, error ? /*#__PURE__*/React.createElement("div", {
-    style: {
-      color: 'red'
-    }
-  }, "".concat(error)) : loading ? /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CircularProgress, {
-    size: 20,
-    style: {
-      marginRight: 20
-    }
-  }), /*#__PURE__*/React.createElement(Typography$1, {
-    display: "inline"
-  }, "Creating SVG")) : null, offscreenCanvas ? /*#__PURE__*/React.createElement(FormControlLabel, {
-    control: /*#__PURE__*/React.createElement(Checkbox, {
-      checked: rasterizeLayers,
-      onChange: function onChange() {
-        return setRasterizeLayers(function (val) {
-          return !val;
-        });
-      }
-    }),
-    label: "Rasterize canvas based tracks? File may be much larger if this is turned off"
-  }) : /*#__PURE__*/React.createElement(Typography$1, null, "Note: rasterizing layers not yet supported in this browser, so SVG size may be large")), /*#__PURE__*/React.createElement(DialogActions, null, /*#__PURE__*/React.createElement(Button$1, {
-    variant: "contained",
+              _context.next = 3;
+              return textSearchManager === null || textSearchManager === void 0 ? void 0 : textSearchManager.search({
+                queryString: query,
+                searchType: searchType
+              }, searchScope, rankSearchResults);
+
+            case 3:
+              textSearchResults = _context.sent;
+              refNameResults = assembly === null || assembly === void 0 ? void 0 : (_assembly$allRefNames = assembly.allRefNames) === null || _assembly$allRefNames === void 0 ? void 0 : _assembly$allRefNames.filter(function (refName) {
+                return refName.startsWith(query);
+              }).map(function (r) {
+                return new BaseResult({
+                  label: r
+                });
+              }).slice(0, 10);
+              return _context.abrupt("return", dedupe([].concat(_toConsumableArray(refNameResults || []), _toConsumableArray(textSearchResults || [])), function (elt) {
+                return elt.getId();
+              }));
+
+            case 6:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+    return _fetchResults.apply(this, arguments);
+  }
+
+  function handleSelectedRegion(_x3) {
+    return _handleSelectedRegion.apply(this, arguments);
+  }
+
+  function _handleSelectedRegion() {
+    _handleSelectedRegion = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee2(option) {
+      var trackId, location, label, _assembly$allRefNames2, 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$allRefNames2 = assembly.allRefNames) !== null && _assembly$allRefNames2 !== void 0 && _assembly$allRefNames2.includes(location))) {
+                _context2.next = 8;
+                break;
+              }
+
+              model.navToLocString(location);
+              _context2.next = 19;
+              break;
+
+            case 8:
+              _context2.next = 10;
+              return fetchResults(label, 'exact');
+
+            case 10:
+              results = _context2.sent;
+
+              if (!(results && results.length > 1)) {
+                _context2.next = 16;
+                break;
+              }
+
+              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 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 _context2.stop();
+          }
+        }
+      }, _callee2, null, [[3, 21]]);
+    }));
+    return _handleSelectedRegion.apply(this, arguments);
+  }
+
+  return /*#__PURE__*/React.createElement(RefNameAutocomplete$1, {
+    showHelp: showHelp,
+    onSelect: handleSelectedRegion,
+    assemblyName: assemblyName,
+    fetchResults: fetchResults,
+    model: model,
+    TextFieldProps: {
+      variant: 'outlined',
+      className: classes.headerRefName,
+      style: {
+        margin: SPACING,
+        minWidth: '175px'
+      },
+      InputProps: {
+        style: {
+          padding: 0,
+          height: WIDGET_HEIGHT,
+          background: alpha(theme.palette.background.paper, 0.8)
+        }
+      }
+    }
+  });
+}
+
+var SearchBox$1 = /*#__PURE__*/observer(SearchBox);
+
+var useStyles$8 = /*#__PURE__*/makeStyles(function (theme) {
+  return {
+    closeButton: {
+      position: 'absolute',
+      right: theme.spacing(1),
+      top: theme.spacing(1),
+      color: theme.palette.grey[500]
+    }
+  };
+});
+function ExportSvgDlg(_ref) {
+  var model = _ref.model,
+      handleClose = _ref.handleClose;
+  // @ts-ignore
+  var offscreenCanvas = typeof OffscreenCanvas !== 'undefined';
+
+  var _useState = useState(offscreenCanvas),
+      _useState2 = _slicedToArray(_useState, 2),
+      rasterizeLayers = _useState2[0],
+      setRasterizeLayers = _useState2[1];
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      loading = _useState4[0],
+      setLoading = _useState4[1];
+
+  var _useState5 = useState(),
+      _useState6 = _slicedToArray(_useState5, 2),
+      error = _useState6[0],
+      setError = _useState6[1];
+
+  var classes = useStyles$8();
+  return /*#__PURE__*/React.createElement(Dialog, {
+    open: true,
+    onClose: handleClose
+  }, /*#__PURE__*/React.createElement(DialogTitle, null, "Export SVG", /*#__PURE__*/React.createElement(IconButton, {
+    className: classes.closeButton,
+    onClick: handleClose
+  }, /*#__PURE__*/React.createElement(CloseIcon, null))), /*#__PURE__*/React.createElement(DialogContent, null, error ? /*#__PURE__*/React.createElement("div", {
+    style: {
+      color: 'red'
+    }
+  }, "".concat(error)) : loading ? /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CircularProgress, {
+    size: 20,
+    style: {
+      marginRight: 20
+    }
+  }), /*#__PURE__*/React.createElement(Typography$1, {
+    display: "inline"
+  }, "Creating SVG")) : null, offscreenCanvas ? /*#__PURE__*/React.createElement(FormControlLabel, {
+    control: /*#__PURE__*/React.createElement(Checkbox, {
+      checked: rasterizeLayers,
+      onChange: function onChange() {
+        return setRasterizeLayers(function (val) {
+          return !val;
+        });
+      }
+    }),
+    label: "Rasterize canvas based tracks? File may be much larger if this is turned off"
+  }) : /*#__PURE__*/React.createElement(Typography$1, null, "Note: rasterizing layers not yet supported in this browser, so SVG size may be large")), /*#__PURE__*/React.createElement(DialogActions, null, /*#__PURE__*/React.createElement(Button$1, {
+    variant: "contained",
     color: "secondary",
     onClick: function onClick() {
       return handleClose();
@@ -3928,7 +4373,7 @@ function ExportSvgDlg(_ref) {
   }, "Submit")));
 }
 
-var useStyles$8 = /*#__PURE__*/makeStyles(function (theme) {
+var useStyles$9 = /*#__PURE__*/makeStyles(function (theme) {
   return {
     closeButton: {
       position: 'absolute',
@@ -3942,7 +4387,7 @@ var useStyles$8 = /*#__PURE__*/makeStyles(function (theme) {
 function ReturnToImportFormDialog(_ref) {
   var model = _ref.model,
       handleClose = _ref.handleClose;
-  var classes = useStyles$8();
+  var classes = useStyles$9();
   return /*#__PURE__*/React.createElement(Dialog, {
     maxWidth: "xl",
     open: true,
@@ -3972,7 +4417,7 @@ function ReturnToImportFormDialog(_ref) {
 
 var ReturnToImportFormDlg = /*#__PURE__*/observer(ReturnToImportFormDialog);
 
-var useStyles$9 = /*#__PURE__*/makeStyles({
+var useStyles$a = /*#__PURE__*/makeStyles({
   container: {
     display: 'flex',
     flexDirection: 'row',
@@ -3985,7 +4430,7 @@ var useStyles$9 = /*#__PURE__*/makeStyles({
 
 function ZoomControls(_ref) {
   var model = _ref.model;
-  var classes = useStyles$9();
+  var classes = useStyles$a();
   var maxBpPerPx = model.maxBpPerPx,
       minBpPerPx = model.minBpPerPx,
       bpPerPx = model.bpPerPx,
@@ -4032,9 +4477,7 @@ function ZoomControls(_ref) {
 
 var ZoomControls$1 = /*#__PURE__*/observer(ZoomControls);
 
-var WIDGET_HEIGHT = 32;
-var SPACING = 7;
-var useStyles$a = /*#__PURE__*/makeStyles$1(function (theme) {
+var useStyles$b = /*#__PURE__*/makeStyles$1(function (theme) {
   return {
     headerBar: {
       height: HEADER_BAR_HEIGHT,
@@ -4047,10 +4490,6 @@ var useStyles$a = /*#__PURE__*/makeStyles$1(function (theme) {
     spacer: {
       flexGrow: 1
     },
-    input: {},
-    headerRefName: {
-      minWidth: 100
-    },
     panButton: {
       background: alpha(theme.palette.background.paper, 0.8),
       height: WIDGET_HEIGHT,
@@ -4071,9 +4510,9 @@ var useStyles$a = /*#__PURE__*/makeStyles$1(function (theme) {
     }
   };
 });
-var Controls = /*#__PURE__*/observer(function (_ref) {
+var HeaderButtons = /*#__PURE__*/observer(function (_ref) {
   var model = _ref.model;
-  var classes = useStyles$a();
+  var classes = useStyles$b();
   return /*#__PURE__*/React.createElement(Button$1, {
     onClick: model.activateTrackSelector,
     className: classes.toggleButton,
@@ -4087,7 +4526,7 @@ var Controls = /*#__PURE__*/observer(function (_ref) {
 
 function PanControls(_ref2) {
   var model = _ref2.model;
-  var classes = useStyles$a();
+  var classes = useStyles$b();
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button$1, {
     variant: "outlined",
     className: classes.panButton,
@@ -4105,150 +4544,21 @@ function PanControls(_ref2) {
 
 var RegionWidth = /*#__PURE__*/observer(function (_ref3) {
   var model = _ref3.model;
-  var classes = useStyles$a();
+  var classes = useStyles$b();
   var coarseTotalBp = model.coarseTotalBp;
   return /*#__PURE__*/React.createElement(Typography$1, {
     variant: "body2",
     color: "textSecondary",
     className: classes.bp
-  }, "".concat(Math.round(coarseTotalBp).toLocaleString('en-US'), " bp"));
+  }, Math.round(coarseTotalBp).toLocaleString('en-US'), " bp");
 });
-var LinearGenomeViewHeader = /*#__PURE__*/observer(function (_ref4) {
-  var model = _ref4.model;
-  var classes = useStyles$a();
-  var theme = useTheme();
-  var session = getSession(model);
-  var textSearchManager = session.textSearchManager,
-      assemblyManager = session.assemblyManager;
-  var assemblyNames = model.assemblyNames,
-      rankSearchResults = model.rankSearchResults;
-  var assemblyName = assemblyNames[0];
-  var assembly = assemblyManager.get(assemblyName);
-  var searchScope = model.searchScope(assemblyName);
-
-  function fetchResults(_x, _x2) {
-    return _fetchResults.apply(this, arguments);
-  }
-
-  function _fetchResults() {
-    _fetchResults = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee(query, searchType) {
-      var _assembly$allRefNames;
-
-      var textSearchResults, refNameResults;
-      return runtime_1.wrap(function _callee$(_context) {
-        while (1) {
-          switch (_context.prev = _context.next) {
-            case 0:
-              if (!textSearchManager) {
-                console.warn('No text search manager');
-              }
-
-              _context.next = 3;
-              return textSearchManager === null || textSearchManager === void 0 ? void 0 : textSearchManager.search({
-                queryString: query,
-                searchType: searchType
-              }, searchScope, rankSearchResults);
-
-            case 3:
-              textSearchResults = _context.sent;
-              refNameResults = assembly === null || assembly === void 0 ? void 0 : (_assembly$allRefNames = assembly.allRefNames) === null || _assembly$allRefNames === void 0 ? void 0 : _assembly$allRefNames.filter(function (refName) {
-                return refName.startsWith(query);
-              }).map(function (r) {
-                return new BaseResult({
-                  label: r
-                });
-              }).slice(0, 10);
-              return _context.abrupt("return", dedupe([].concat(_toConsumableArray(refNameResults || []), _toConsumableArray(textSearchResults || [])), function (elt) {
-                return elt.getId();
-              }));
 
-            case 6:
-            case "end":
-              return _context.stop();
-          }
-        }
-      }, _callee);
-    }));
-    return _fetchResults.apply(this, arguments);
-  }
-
-  function handleSelectedRegion(_x3) {
-    return _handleSelectedRegion.apply(this, arguments);
-  }
-
-  function _handleSelectedRegion() {
-    _handleSelectedRegion = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee2(option) {
-      var trackId, location, label, _assembly$allRefNames2, 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$allRefNames2 = assembly.allRefNames) !== null && _assembly$allRefNames2 !== void 0 && _assembly$allRefNames2.includes(location))) {
-                _context2.next = 8;
-                break;
-              }
-
-              model.navToLocString(location);
-              _context2.next = 19;
-              break;
-
-            case 8:
-              _context2.next = 10;
-              return fetchResults(label, 'exact');
-
-            case 10:
-              results = _context2.sent;
-
-              if (!(results && results.length > 1)) {
-                _context2.next = 16;
-                break;
-              }
-
-              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 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 _context2.stop();
-          }
-        }
-      }, _callee2, null, [[3, 21]]);
-    }));
-    return _handleSelectedRegion.apply(this, arguments);
-  }
-
-  var controls = /*#__PURE__*/React.createElement("div", {
+var Controls = function Controls(_ref4) {
+  var model = _ref4.model;
+  var classes = useStyles$b();
+  return /*#__PURE__*/React.createElement("div", {
     className: classes.headerBar
-  }, /*#__PURE__*/React.createElement(Controls, {
+  }, /*#__PURE__*/React.createElement(HeaderButtons, {
     model: model
   }), /*#__PURE__*/React.createElement("div", {
     className: classes.spacer
@@ -4257,26 +4567,8 @@ var LinearGenomeViewHeader = /*#__PURE__*/observer(function (_ref4) {
     className: classes.headerForm
   }, /*#__PURE__*/React.createElement(PanControls, {
     model: model
-  }), /*#__PURE__*/React.createElement(RefNameAutocomplete$1, {
-    onSelect: handleSelectedRegion,
-    assemblyName: assemblyName,
-    fetchResults: fetchResults,
-    model: model,
-    TextFieldProps: {
-      variant: 'outlined',
-      className: classes.headerRefName,
-      style: {
-        margin: SPACING,
-        minWidth: '175px'
-      },
-      InputProps: {
-        style: {
-          padding: 0,
-          height: WIDGET_HEIGHT,
-          background: alpha(theme.palette.background.paper, 0.8)
-        }
-      }
-    }
+  }), /*#__PURE__*/React.createElement(SearchBox$1, {
+    model: model
   })), /*#__PURE__*/React.createElement(RegionWidth, {
     model: model
   }), /*#__PURE__*/React.createElement(ZoomControls$1, {
@@ -4284,20 +4576,23 @@ var LinearGenomeViewHeader = /*#__PURE__*/observer(function (_ref4) {
   }), /*#__PURE__*/React.createElement("div", {
     className: classes.spacer
   }));
+};
 
-  if (model.hideHeaderOverview) {
-    return controls;
-  }
-
-  return /*#__PURE__*/React.createElement(OverviewScaleBar$1, {
+var LinearGenomeViewHeader = /*#__PURE__*/observer(function (_ref5) {
+  var model = _ref5.model;
+  return model.hideHeaderOverview ? /*#__PURE__*/React.createElement(Controls, {
+    model: model
+  }) : /*#__PURE__*/React.createElement(OverviewScaleBar$1, {
+    model: model
+  }, /*#__PURE__*/React.createElement(Controls, {
     model: model
-  }, controls);
+  }));
 });
 
-var useStyles$b = /*#__PURE__*/makeStyles(function (theme) {
+var useStyles$c = /*#__PURE__*/makeStyles$1(function (theme) {
   return {
     root: {
-      background: alpha$1(theme.palette.background.paper, 0.8),
+      background: alpha(theme.palette.background.paper, 0.8),
       '&:hover': {
         background: theme.palette.background.paper
       },
@@ -4328,7 +4623,7 @@ var useStyles$b = /*#__PURE__*/makeStyles(function (theme) {
 var TrackLabel = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _session$getTrackActi;
 
-  var classes = useStyles$b();
+  var classes = useStyles$c();
 
   var _React$useState = React.useState(null),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -4391,18 +4686,18 @@ var TrackLabel = /*#__PURE__*/React.forwardRef(function (props, ref) {
     "data-testid": "dragHandle-".concat(view.id, "-").concat(trackId)
   }, /*#__PURE__*/React.createElement(DragIcon, {
     className: classes.dragHandleIcon
-  })), /*#__PURE__*/React.createElement(IconButton$1, {
+  })), /*#__PURE__*/React.createElement(IconButton, {
     onClick: function onClick() {
       return view.hideTrack(trackId);
     },
     className: classes.iconButton,
     title: "close this track",
     color: "secondary"
-  }, /*#__PURE__*/React.createElement(CloseIcon, null)), /*#__PURE__*/React.createElement(Typography, {
+  }, /*#__PURE__*/React.createElement(CloseIcon, null)), /*#__PURE__*/React.createElement(Typography$1, {
     variant: "body1",
     component: "span",
     className: classes.trackName
-  }, trackName), /*#__PURE__*/React.createElement(IconButton$1, {
+  }, trackName), /*#__PURE__*/React.createElement(IconButton, {
     "aria-controls": "simple-menu",
     "aria-haspopup": "true",
     onClick: handleClick,
@@ -4422,7 +4717,7 @@ var TrackLabel = /*#__PURE__*/React.forwardRef(function (props, ref) {
 });
 var TrackLabel$1 = /*#__PURE__*/observer(TrackLabel);
 
-var useStyles$c = /*#__PURE__*/makeStyles(function (theme) {
+var useStyles$d = /*#__PURE__*/makeStyles(function (theme) {
   return {
     root: {},
     resizeHandle: {
@@ -4471,7 +4766,7 @@ var useStyles$c = /*#__PURE__*/makeStyles(function (theme) {
 });
 
 function TrackContainer(props) {
-  var classes = useStyles$c();
+  var classes = useStyles$d();
   var model = props.model,
       track = props.track;
   var display = track.displays[0];
@@ -4507,7 +4802,7 @@ function TrackContainer(props) {
   }, view.trackLabels !== 'hidden' ? /*#__PURE__*/React.createElement(TrackLabel$1, {
     track: track,
     className: clsx(classes.trackLabel, view.trackLabels === 'overlapping' ? classes.trackLabelOverlap : classes.trackLabelInline)
-  }) : null, /*#__PURE__*/React.createElement(Paper, {
+  }) : null, /*#__PURE__*/React.createElement(Paper$1, {
     variant: "outlined",
     className: classes.trackRenderingContainer,
     style: {
@@ -4553,8 +4848,8 @@ function TrackContainer(props) {
 
 var TrackContainer$1 = /*#__PURE__*/observer(TrackContainer);
 
-var useStyles$d = /*#__PURE__*/makeStyles(function (theme) {
-  var background = theme.palette.tertiary ? alpha$2(theme.palette.tertiary.main, 0.7) : alpha$2(theme.palette.primary.main, 0.7);
+var useStyles$e = /*#__PURE__*/makeStyles(function (theme) {
+  var background = theme.palette.tertiary ? alpha$1(theme.palette.tertiary.main, 0.7) : alpha$1(theme.palette.primary.main, 0.7);
   return {
     rubberBand: {
       height: '100%',
@@ -4592,7 +4887,7 @@ var useStyles$d = /*#__PURE__*/makeStyles(function (theme) {
 var VerticalGuide = /*#__PURE__*/observer(function (_ref) {
   var model = _ref.model,
       coordX = _ref.coordX;
-  var classes = useStyles$d();
+  var classes = useStyles$e();
   return /*#__PURE__*/React.createElement(Tooltip$2, {
     open: true,
     placement: "top",
@@ -4636,7 +4931,7 @@ function RubberBand(_ref2) {
 
   var controlsRef = useRef(null);
   var rubberBandRef = useRef(null);
-  var classes = useStyles$d();
+  var classes = useStyles$e();
   var mouseDragging = startX !== undefined && anchorPosition === undefined;
   var setOffsets = model.setOffsets,
       pxToBp = model.pxToBp;
@@ -4839,7 +5134,7 @@ RubberBand.defaultProps = {
 var RubberBand$1 = /*#__PURE__*/observer(RubberBand);
 
 var _excluded$1 = ["model", "style", "className"];
-var useStyles$e = /*#__PURE__*/makeStyles(function (theme) {
+var useStyles$f = /*#__PURE__*/makeStyles(function (theme) {
   return {
     scaleBarContainer: {
       overflow: 'hidden',
@@ -4883,7 +5178,7 @@ var useStyles$e = /*#__PURE__*/makeStyles(function (theme) {
 });
 var RenderedRefNameLabels = /*#__PURE__*/observer(function (_ref) {
   var model = _ref.model;
-  var classes = useStyles$e(); // find the block that needs pinning to the left side for context
+  var classes = useStyles$f(); // find the block that needs pinning to the left side for context
 
   var lastLeftBlock = 0;
   model.staticBlocks.forEach(function (block, i) {
@@ -4905,7 +5200,7 @@ var RenderedRefNameLabels = /*#__PURE__*/observer(function (_ref) {
 });
 var RenderedScaleBarLabels = /*#__PURE__*/observer(function (_ref2) {
   var model = _ref2.model;
-  var classes = useStyles$e();
+  var classes = useStyles$f();
   return /*#__PURE__*/React.createElement(React.Fragment, null, model.staticBlocks.map(function (block, index) {
     if (block instanceof ContentBlock$1) {
       var ticks = makeTicks(block.start, block.end, model.bpPerPx, true, false);
@@ -4958,9 +5253,9 @@ var ScaleBar$2 = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
       className = _ref3.className,
       other = _objectWithoutProperties(_ref3, _excluded$1);
 
-  var classes = useStyles$e();
+  var classes = useStyles$f();
   var offsetLeft = model.staticBlocks.offsetPx - model.offsetPx;
-  return /*#__PURE__*/React.createElement(Paper, Object.assign({
+  return /*#__PURE__*/React.createElement(Paper$1, Object.assign({
     "data-resizer": "true" // used to avoid click-and-drag scrolls on trackscontainer
     ,
     className: clsx(classes.scaleBarContainer, className),
@@ -4986,7 +5281,7 @@ var ScaleBar$2 = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
 });
 var ScaleBar$3 = /*#__PURE__*/observer(ScaleBar$2);
 
-var useStyles$f = /*#__PURE__*/makeStyles(function (theme) {
+var useStyles$g = /*#__PURE__*/makeStyles(function (theme) {
   return {
     verticalGuidesZoomContainer: {
       position: 'absolute',
@@ -5017,7 +5312,7 @@ var useStyles$f = /*#__PURE__*/makeStyles(function (theme) {
 });
 var RenderedVerticalGuides = /*#__PURE__*/observer(function (_ref) {
   var model = _ref.model;
-  var classes = useStyles$f();
+  var classes = useStyles$g();
   return /*#__PURE__*/React.createElement(React.Fragment, null, model.staticBlocks.map(function (block, index) {
     if (block instanceof ContentBlock$1) {
       var ticks = makeTicks(block.start, block.end, model.bpPerPx);
@@ -5057,7 +5352,7 @@ var RenderedVerticalGuides = /*#__PURE__*/observer(function (_ref) {
 
 function VerticalGuides(_ref2) {
   var model = _ref2.model;
-  var classes = useStyles$f(); // find the block that needs pinning to the left side for context
+  var classes = useStyles$g(); // find the block that needs pinning to the left side for context
 
   var offsetLeft = model.staticBlocks.offsetPx - model.offsetPx;
   return /*#__PURE__*/React.createElement("div", {
@@ -5078,7 +5373,7 @@ function VerticalGuides(_ref2) {
 
 var VerticalGuides$1 = /*#__PURE__*/observer(VerticalGuides);
 
-var useStyles$g = /*#__PURE__*/makeStyles(function () {
+var useStyles$h = /*#__PURE__*/makeStyles(function () {
   return {
     centerLineContainer: {
       background: 'transparent',
@@ -5107,7 +5402,7 @@ function CenterLine(_ref) {
       tracks = model.tracks,
       width = model.width;
   var ref = useRef(null);
-  var classes = useStyles$g();
+  var classes = useStyles$h();
   var startingPosition = width / 2;
   return tracks.length ? /*#__PURE__*/React.createElement("div", {
     "data-testid": "centerline_container",
@@ -5134,7 +5429,7 @@ CenterLine.propTypes = {
 };
 var CenterLine$1 = /*#__PURE__*/observer(CenterLine);
 
-var useStyles$h = /*#__PURE__*/makeStyles(function (theme) {
+var useStyles$i = /*#__PURE__*/makeStyles(function (theme) {
   return {
     tracksContainer: {
       position: 'relative',
@@ -5151,7 +5446,7 @@ var useStyles$h = /*#__PURE__*/makeStyles(function (theme) {
 function TracksContainer(_ref) {
   var children = _ref.children,
       model = _ref.model;
-  var classes = useStyles$h(); // refs are to store these variables to avoid repeated rerenders associated
+  var classes = useStyles$i(); // refs are to store these variables to avoid repeated rerenders associated
   // with useState/setState
 
   var delta = useRef(0);
@@ -5317,7 +5612,7 @@ var TracksContainer$1 = /*#__PURE__*/observer(TracksContainer);
 var SearchResultsDialog = /*#__PURE__*/lazy(function () {
   return Promise.resolve().then(function () { return SearchResultsDialog$2; });
 });
-var useStyles$i = /*#__PURE__*/makeStyles$1(function (theme) {
+var useStyles$j = /*#__PURE__*/makeStyles$1(function (theme) {
   return {
     importFormContainer: {
       padding: theme.spacing(2)
@@ -5331,7 +5626,7 @@ var ImportForm = /*#__PURE__*/observer(function (_ref) {
   var _regions$;
 
   var model = _ref.model;
-  var classes = useStyles$i();
+  var classes = useStyles$j();
   var session = getSession(model);
   var assemblyNames = session.assemblyNames,
       assemblyManager = session.assemblyManager,
@@ -5594,7 +5889,7 @@ var MiniControls = /*#__PURE__*/observer(function (props) {
       anchorEl = _useState2[0],
       setAnchorEl = _useState2[1];
 
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Paper, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Paper$1, {
     style: {
       background: '#aaa7'
     }
@@ -5631,7 +5926,7 @@ var MiniControls = /*#__PURE__*/observer(function (props) {
   }));
 });
 
-var useStyles$j = /*#__PURE__*/makeStyles$1(function (theme) {
+var useStyles$k = /*#__PURE__*/makeStyles$1(function (theme) {
   return {
     loadingMessage: {
       padding: theme.spacing(5)
@@ -5727,7 +6022,7 @@ function _fetchSequence() {
 function SequenceDialog(_ref) {
   var model = _ref.model,
       handleClose = _ref.handleClose;
-  var classes = useStyles$j();
+  var classes = useStyles$k();
   var session = getSession(model);
 
   var _useState = useState(),
@@ -5892,7 +6187,7 @@ function SequenceDialog(_ref) {
 
 var SequenceDialog$1 = /*#__PURE__*/observer(SequenceDialog);
 
-var useStyles$k = /*#__PURE__*/makeStyles$1(function (theme) {
+var useStyles$l = /*#__PURE__*/makeStyles$1(function (theme) {
   return {
     dialogContent: {
       width: '80em'
@@ -5911,7 +6206,7 @@ function SearchResultsDialog$1(_ref) {
   var model = _ref.model,
       optAssemblyName = _ref.optAssemblyName,
       handleClose = _ref.handleClose;
-  var classes = useStyles$k();
+  var classes = useStyles$l();
   var session = getSession(model);
 
   var _getEnv = getEnv(session),
@@ -5988,7 +6283,7 @@ function SearchResultsDialog$1(_ref) {
       handleClose();
     }
   }, /*#__PURE__*/React.createElement(CloseIcon, null)) : null), /*#__PURE__*/React.createElement(Divider, null), /*#__PURE__*/React.createElement(DialogContent, null, !((_model$searchResults = model.searchResults) !== null && _model$searchResults !== void 0 && _model$searchResults.length) ? /*#__PURE__*/React.createElement(Typography$1, null, "No results found for ", /*#__PURE__*/React.createElement("b", null, model.searchQuery)) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Typography$1, null, "Showing results for ", /*#__PURE__*/React.createElement("b", null, model.searchQuery)), /*#__PURE__*/React.createElement(TableContainer, {
-    component: Paper$1
+    component: Paper
   }, /*#__PURE__*/React.createElement(Table, null, /*#__PURE__*/React.createElement(TableHead, null, /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(TableCell, null, "Name"), /*#__PURE__*/React.createElement(TableCell, {
     align: "right"
   }, "Location"), /*#__PURE__*/React.createElement(TableCell, {
@@ -6032,11 +6327,11 @@ function SearchResultsDialog$1(_ref) {
 
 var SearchResultsDialog$2 = {
   __proto__: null,
-  useStyles: useStyles$k,
+  useStyles: useStyles$l,
   'default': SearchResultsDialog$1
 };
 
-var useStyles$l = /*#__PURE__*/makeStyles$1(function (theme) {
+var useStyles$m = /*#__PURE__*/makeStyles$1(function (theme) {
   return {
     note: {
       textAlign: 'center',
@@ -6072,7 +6367,7 @@ var LinearGenomeView = /*#__PURE__*/observer(function (_ref) {
       hideHeader = model.hideHeader,
       initialized = model.initialized,
       hasDisplayedRegions = model.hasDisplayedRegions;
-  var classes = useStyles$l();
+  var classes = useStyles$m();
 
   if (!initialized && !error) {
     return /*#__PURE__*/React.createElement(Typography$1, {
@@ -6113,7 +6408,7 @@ var LinearGenomeView = /*#__PURE__*/observer(function (_ref) {
     model: model
   })), /*#__PURE__*/React.createElement(TracksContainer$1, {
     model: model
-  }, !tracks.length ? /*#__PURE__*/React.createElement(Paper$1, {
+  }, !tracks.length ? /*#__PURE__*/React.createElement(Paper, {
     variant: "outlined",
     className: classes.note
   }, /*#__PURE__*/React.createElement(Typography$1, null, "No tracks active."), /*#__PURE__*/React.createElement(Button$1, {
@@ -6161,6 +6456,8 @@ var HEADER_OVERVIEW_HEIGHT = 20;
 var SCALE_BAR_HEIGHT = 17;
 var RESIZE_HANDLE_HEIGHT = 3;
 var INTER_REGION_PADDING_WIDTH = 2;
+var WIDGET_HEIGHT = 32;
+var SPACING = 7;
 function stateModelFactory$1(pluginManager) {
   return types.compose(BaseViewModel, types.model('LinearGenomeView', {
     id: ElementId,
@@ -6174,9 +6471,17 @@ function stateModelFactory$1(pluginManager) {
     hideHeader: false,
     hideHeaderOverview: false,
     trackSelectorType: types.optional(types.enumeration(['hierarchical']), 'hierarchical'),
-    trackLabels: 'overlapping',
-    showCenterLine: false,
-    showCytobandsSetting: true
+    trackLabels: types.optional(types.string, function () {
+      return localStorage.getItem('lgv-trackLabels') || 'overlapping';
+    }),
+    showCenterLine: types.optional(types["boolean"], function () {
+      var setting = localStorage.getItem('lgv-showCenterLine');
+      return setting !== undefined ? !!setting : false;
+    }),
+    showCytobandsSetting: types.optional(types["boolean"], function () {
+      var setting = localStorage.getItem('lgv-showCytobands');
+      return setting !== undefined ? !!setting : true;
+    })
   }))["volatile"](function () {
     return {
       volatileWidth: undefined,
@@ -6283,11 +6588,9 @@ function stateModelFactory$1(pluginManager) {
       },
 
       get totalBp() {
-        var totalbp = 0;
-        self.displayedRegions.forEach(function (region) {
-          totalbp += region.end - region.start;
-        });
-        return totalbp;
+        return self.displayedRegions.reduce(function (a, b) {
+          return a + b.end - b.start;
+        }, 0);
       },
 
       get maxBpPerPx() {
@@ -6350,39 +6653,12 @@ function stateModelFactory$1(pluginManager) {
         var refName = _ref.refName,
             coord = _ref.coord,
             regionNumber = _ref.regionNumber;
-        var offsetBp = 0;
-        var interRegionPaddingBp = self.interRegionPaddingWidth * self.bpPerPx;
-        var minimumBlockBp = self.minimumBlockWidth * self.bpPerPx;
-        var index = self.displayedRegions.findIndex(function (region, idx) {
-          var len = region.end - region.start;
-
-          if (refName === region.refName && coord >= region.start && coord <= region.end) {
-            if (regionNumber ? regionNumber === idx : true) {
-              offsetBp += region.reversed ? region.end - coord : coord - region.start;
-              return true;
-            }
-          } // add the interRegionPaddingWidth if the boundary is in the screen
-          // e.g. offset>=0 && offset<width
-
-
-          if (len > minimumBlockBp && offsetBp / self.bpPerPx >= 0 && offsetBp / self.bpPerPx < self.width) {
-            offsetBp += len + interRegionPaddingBp;
-          } else {
-            offsetBp += len;
-          }
-
-          return false;
+        return viewBpToPx({
+          refName: refName,
+          coord: coord,
+          regionNumber: regionNumber,
+          self: self
         });
-        var foundRegion = self.displayedRegions[index];
-
-        if (foundRegion) {
-          return {
-            index: index,
-            offsetPx: Math.round(offsetBp / self.bpPerPx)
-          };
-        }
-
-        return undefined;
       },
 
       /**
@@ -6534,6 +6810,7 @@ function stateModelFactory$1(pluginManager) {
     return {
       setShowCytobands: function setShowCytobands(flag) {
         self.showCytobandsSetting = flag;
+        localStorage.setItem('lgv-showCytobands', "".concat(+flag));
       },
       setWidth: function setWidth(newWidth) {
         self.volatileWidth = newWidth;
@@ -6603,13 +6880,13 @@ function stateModelFactory$1(pluginManager) {
         var configuration = resolveIdentifier(trackConfigSchema, getRoot(self), trackId);
 
         if (!configuration) {
-          throw new Error("Could not resolve identifier");
+          throw new Error("Could not resolve identifier \"".concat(trackId, "\""));
         }
 
         var trackType = pluginManager.getTrackType(configuration === null || configuration === void 0 ? void 0 : configuration.type);
 
         if (!trackType) {
-          throw new Error("unknown track type ".concat(configuration.type));
+          throw new Error("Unknown track type ".concat(configuration.type));
         }
 
         var viewType = pluginManager.getViewType(self.type);
@@ -6621,7 +6898,7 @@ function stateModelFactory$1(pluginManager) {
         });
 
         if (!displayConf) {
-          throw new Error("could not find a compatible display for view type ".concat(self.type));
+          throw new Error("Could not find a compatible display for view type ".concat(self.type));
         }
 
         var shownTracks = self.tracks.filter(function (t) {
@@ -6704,9 +6981,11 @@ function stateModelFactory$1(pluginManager) {
       },
       setTrackLabels: function setTrackLabels(setting) {
         self.trackLabels = setting;
+        localStorage.setItem('lgv-trackLabels', setting);
       },
       toggleCenterLine: function toggleCenterLine() {
         self.showCenterLine = !self.showCenterLine;
+        localStorage.setItem('lgv-showCenterLine', "".concat(+self.showCenterLine));
       },
       setDisplayedRegions: function setDisplayedRegions(regions) {
         self.displayedRegions = cast(regions);
@@ -7620,13 +7899,7 @@ function configSchemaFactory$1(pluginManager) {
       defaultValue: "jexl:get(feature,'name')",
       contextVariable: ['feature']
     },
-    renderer: pluginManager.pluggableConfigSchemaType('renderer'),
-    // overrides base
-    maxDisplayedBpPerPx: {
-      type: 'number',
-      description: 'maximum bpPerPx that is displayed in the view',
-      defaultValue: 1000
-    }
+    renderer: pluginManager.pluggableConfigSchemaType('renderer')
   }, {
     baseConfiguration: baseLinearDisplayConfigSchema,
     explicitlyTyped: true
@@ -7709,6 +7982,81 @@ var LinearGenomeViewPlugin = /*#__PURE__*/function (_Plugin) {
           })
         });
       });
+      pluginManager.addToExtensionPoint('LaunchView-LinearGenomeView',
+      /*#__PURE__*/
+      // @ts-ignore
+      function () {
+        var _ref2 = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee(_ref) {
+          var session, assembly, loc, _ref$tracks, tracks, assemblyManager, view, asm, idsNotFound;
+
+          return runtime_1.wrap(function _callee$(_context) {
+            while (1) {
+              switch (_context.prev = _context.next) {
+                case 0:
+                  session = _ref.session, assembly = _ref.assembly, loc = _ref.loc, _ref$tracks = _ref.tracks, tracks = _ref$tracks === void 0 ? [] : _ref$tracks;
+                  assemblyManager = session.assemblyManager;
+                  view = session.addView('LinearGenomeView', {});
+                  _context.next = 5;
+                  return when(function () {
+                    return !!view.volatileWidth;
+                  });
+
+                case 5:
+                  if (assembly) {
+                    _context.next = 7;
+                    break;
+                  }
+
+                  throw new Error('No assembly provided when launching linear genome view');
+
+                case 7:
+                  _context.next = 9;
+                  return assemblyManager.waitForAssembly(assembly);
+
+                case 9:
+                  asm = _context.sent;
+
+                  if (asm) {
+                    _context.next = 12;
+                    break;
+                  }
+
+                  throw new Error("Assembly \"".concat(assembly, "\" not found when launching linear genome view"));
+
+                case 12:
+                  view.navToLocString(loc, assembly);
+                  idsNotFound = [];
+                  tracks.forEach(function (track) {
+                    try {
+                      view.showTrack(track);
+                    } catch (e) {
+                      if ("".concat(e).match('Could not resolve identifier')) {
+                        idsNotFound.push(track);
+                      } else {
+                        throw e;
+                      }
+                    }
+                  });
+
+                  if (!idsNotFound.length) {
+                    _context.next = 17;
+                    break;
+                  }
+
+                  throw new Error("Could not resolve identifiers: ".concat(idsNotFound.join(',')));
+
+                case 17:
+                case "end":
+                  return _context.stop();
+              }
+            }
+          }, _callee);
+        }));
+
+        return function (_x) {
+          return _ref2.apply(this, arguments);
+        };
+      }());
     }
   }, {
     key: "configure",
@@ -7728,7 +8076,7 @@ var LinearGenomeViewPlugin = /*#__PURE__*/function (_Plugin) {
   return LinearGenomeViewPlugin;
 }(Plugin);
 
-var useStyles$m = /*#__PURE__*/makeStyles$1(function (theme) {
+var useStyles$n = /*#__PURE__*/makeStyles$1(function (theme) {
   return {
     closeButton: {
       position: 'absolute',
@@ -7740,7 +8088,7 @@ var useStyles$m = /*#__PURE__*/makeStyles$1(function (theme) {
 });
 function HelpDialog$1(_ref) {
   var handleClose = _ref.handleClose;
-  var classes = useStyles$m();
+  var classes = useStyles$n();
   return /*#__PURE__*/React.createElement(Dialog, {
     open: true,
     maxWidth: "xl",
@@ -7761,11 +8109,11 @@ function HelpDialog$1(_ref) {
 
 var HelpDialog$2 = {
   __proto__: null,
-  useStyles: useStyles$m,
+  useStyles: useStyles$n,
   'default': HelpDialog$1
 };
 
-var useStyles$n = /*#__PURE__*/makeStyles$1(function (theme) {
+var useStyles$o = /*#__PURE__*/makeStyles$1(function (theme) {
   return {
     root: {
       width: 500
@@ -7785,7 +8133,7 @@ var useStyles$n = /*#__PURE__*/makeStyles$1(function (theme) {
 function SetMaxHeightDlg$1(props) {
   var model = props.model,
       handleClose = props.handleClose;
-  var classes = useStyles$n();
+  var classes = useStyles$o();
   var _model$maxHeight = model.maxHeight,
       maxHeight = _model$maxHeight === void 0 ? '' : _model$maxHeight;
 
@@ -7835,5 +8183,5 @@ var SetMaxHeight$1 = {
 };
 
 export default LinearGenomeViewPlugin;
-export { BaseLinearDisplay$1 as BaseLinearDisplay, BaseLinearDisplay as BaseLinearDisplayComponent, RefNameAutocomplete$1 as RefNameAutocomplete, baseLinearDisplayConfigSchema, configSchemaFactory as linearBareDisplayConfigSchemaFactory, configSchemaFactory$1 as linearBasicDisplayConfigSchemaFactory, stateModelFactory$2 as linearBasicDisplayModelFactory, renderToSvg };
+export { BaseLinearDisplay$1 as BaseLinearDisplay, BaseLinearDisplay as BaseLinearDisplayComponent, RefNameAutocomplete$1 as RefNameAutocomplete, SearchBox$1 as SearchBox, baseLinearDisplayConfigSchema, configSchemaFactory as linearBareDisplayConfigSchemaFactory, configSchemaFactory$1 as linearBasicDisplayConfigSchemaFactory, stateModelFactory$2 as linearBasicDisplayModelFactory, renderToSvg };
 //# sourceMappingURL=plugin-linear-genome-view.esm.js.map