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

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

@@ -6,6 +6,7 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'defau
 
 var React = require('react');
 var React__default = _interopDefault(React);
+var mobx = require('mobx');
 var configuration = require('@jbrowse/core/configuration');
 var models = require('@jbrowse/core/pluggableElementTypes/models');
 var TrackType = _interopDefault(require('@jbrowse/core/pluggableElementTypes/TrackType'));
@@ -14,15 +15,12 @@ var ViewType = _interopDefault(require('@jbrowse/core/pluggableElementTypes/View
 var Plugin = _interopDefault(require('@jbrowse/core/Plugin'));
 var util = require('@jbrowse/core/util');
 var LineStyleIcon = _interopDefault(require('@material-ui/icons/LineStyle'));
+var core = require('@material-ui/core');
 var CompositeMap = _interopDefault(require('@jbrowse/core/util/compositeMap'));
 var simpleFeature = require('@jbrowse/core/util/simpleFeature');
 var tracks = require('@jbrowse/core/util/tracks');
-var Button = _interopDefault(require('@material-ui/core/Button'));
-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 MenuOpenIcon = _interopDefault(require('@material-ui/icons/MenuOpen'));
 var ui = require('@jbrowse/core/ui');
 var mobxReact = require('mobx-react');
 var reactPopper = require('react-popper');
@@ -30,6 +28,8 @@ 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 Typography = _interopDefault(require('@material-ui/core/Typography'));
+var Button = _interopDefault(require('@material-ui/core/Button'));
 var RefreshIcon = _interopDefault(require('@material-ui/icons/Refresh'));
 var configurationSchema = require('@jbrowse/core/configuration/configurationSchema');
 var calculateDynamicBlocks = _interopDefault(require('@jbrowse/core/util/calculateDynamicBlocks'));
@@ -65,8 +65,8 @@ 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 ErrorMessage = _interopDefault(require('@jbrowse/core/ui/ErrorMessage'));
+var AssemblySelector = _interopDefault(require('@jbrowse/core/ui/AssemblySelector'));
 var ArrowDown = _interopDefault(require('@material-ui/icons/KeyboardArrowDown'));
 var Menu = _interopDefault(require('@jbrowse/core/ui/Menu'));
 var copy = _interopDefault(require('copy-to-clipboard'));
@@ -190,14 +190,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);
@@ -437,16 +437,6 @@ function _createForOfIteratorHelper(o, allowArrayLike) {
   };
 }
 
-var baseLinearDisplayConfigSchema = /*#__PURE__*/configuration.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;
 }
@@ -1176,6 +1166,21 @@ var runtime_1 = /*#__PURE__*/createCommonjsModule(function (module) {
   }
 });
 
+var baseLinearDisplayConfigSchema = /*#__PURE__*/configuration.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__*/styles.makeStyles(function (theme) {
   return {
     contentBlock: {
@@ -1960,6 +1965,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__*/mobxStateTree.types.compose('BaseLinearDisplay', models.BaseDisplay, mobxStateTree.types.model({
@@ -1967,13 +1992,17 @@ var BaseLinearDisplay$1 = /*#__PURE__*/mobxStateTree.types.compose('BaseLinearDi
     return n >= minDisplayHeight;
   }), defaultDisplayHeight),
   blockState: mobxStateTree.types.map(blockState),
-  userBpPerPxLimit: mobxStateTree.types.maybe(mobxStateTree.types.number)
+  userBpPerPxLimit: mobxStateTree.types.maybe(mobxStateTree.types.number),
+  userByteSizeLimit: mobxStateTree.types.maybe(mobxStateTree.types.number)
 }))["volatile"](function () {
   return {
+    currBpPerPx: 0,
     message: '',
     featureIdUnderMouse: undefined,
     contextMenuFeature: undefined,
-    scrollTop: 0
+    scrollTop: 0,
+    estimatedRegionStatsP: undefined,
+    estimatedRegionStats: undefined
   };
 }).views(function (self) {
   return {
@@ -1995,13 +2024,6 @@ var BaseLinearDisplay$1 = /*#__PURE__*/mobxStateTree.types.compose('BaseLinearDi
   };
 }).views(function (self) {
   return {
-    /**
-     * set limit to config amount, or user amount if they force load,
-     */
-    get maxViewBpPerPx() {
-      return self.userBpPerPxLimit || configuration.getConf(self, 'maxDisplayedBpPerPx');
-    },
-
     /**
      * how many milliseconds to wait for the display to
      * "settle" before re-rendering a block
@@ -2071,7 +2093,8 @@ var BaseLinearDisplay$1 = /*#__PURE__*/mobxStateTree.types.compose('BaseLinearDi
     },
 
     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) {
@@ -2097,16 +2120,49 @@ var BaseLinearDisplay$1 = /*#__PURE__*/mobxStateTree.types.compose('BaseLinearDi
         }
       });
       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 = util.getContainingView(self);
+      return (((_self$estimatedRegion2 = self.estimatedRegionStats) === null || _self$estimatedRegion2 === void 0 ? void 0 : _self$estimatedRegion2.featureDensity) || 0) * view.bpPerPx;
+    },
+
+    get maxFeatureScreenDensity() {
+      return configuration.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) || configuration.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 = mobx.autorun(function () {
-        // create any blocks that we need to create
         var blocksPresent = {};
         var view = util.getContainingView(self);
 
@@ -2117,8 +2173,7 @@ var BaseLinearDisplay$1 = /*#__PURE__*/mobxStateTree.types.compose('BaseLinearDi
             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);
@@ -2128,6 +2183,47 @@ var BaseLinearDisplay$1 = /*#__PURE__*/mobxStateTree.types.compose('BaseLinearDi
       });
       mobxStateTree.addDisposer(self, blockWatchDisposer);
     },
+    estimateRegionsStats: function estimateRegionsStats(regions, opts) {
+      var _this2 = this;
+
+      if (self.estimatedRegionStatsP) {
+        return self.estimatedRegionStatsP;
+      }
+
+      var _getSession2 = util.getSession(self),
+          rpcManager = _getSession2.rpcManager;
+
+      var adapterConfig = self.adapterConfig;
+      var sessionId = tracks.getRpcSessionId(self);
+
+      var params = _objectSpread2({
+        sessionId: sessionId,
+        regions: regions,
+        adapterConfig: adapterConfig,
+        statusCallback: function statusCallback(message) {
+          if (mobxStateTree.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;
@@ -2145,13 +2241,14 @@ var BaseLinearDisplay$1 = /*#__PURE__*/mobxStateTree.types.compose('BaseLinearDi
     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 = util.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({
@@ -2159,6 +2256,9 @@ var BaseLinearDisplay$1 = /*#__PURE__*/mobxStateTree.types.compose('BaseLinearDi
         region: block.toRegion()
       }));
     },
+    setCurrBpPerPx: function setCurrBpPerPx(n) {
+      self.currBpPerPx = n;
+    },
     deleteBlock: function deleteBlock(key) {
       self.blockState["delete"](key);
     },
@@ -2196,14 +2296,178 @@ var BaseLinearDisplay$1 = /*#__PURE__*/mobxStateTree.types.compose('BaseLinearDi
   };
 }).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 = util.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 = util.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 (!mobxStateTree.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)
+      mobxStateTree.addDisposer(self, mobx.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 = util.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 (mobxStateTree.isAlive(self)) {
+                  self.setRegionStats(estimatedRegionStats);
+                }
+
+                _context2.next = 23;
+                break;
+
+              case 20:
+                _context2.prev = 20;
+                _context2.t0 = _context2["catch"](0);
+
+                if (!util.isAbortException(_context2.t0) && mobxStateTree.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' : '';
     },
 
     /**
@@ -2214,20 +2478,25 @@ var BaseLinearDisplay$1 = /*#__PURE__*/mobxStateTree.types.compose('BaseLinearDi
      *  react node allows user to force load at current setting
      */
     regionCannotBeRendered: function regionCannotBeRendered(_region) {
-      var view = util.getContainingView(self);
+      var regionTooLarge = self.regionTooLarge,
+          regionTooLargeReason = self.regionTooLargeReason;
 
-      if (view && view.bpPerPx > self.maxViewBpPerPx) {
-        return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Typography, {
+      if (regionTooLarge) {
+        return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(core.Typography, {
           component: "span",
           variant: "body2"
-        }, "Zoom in to see features or", ' '), /*#__PURE__*/React__default.createElement(Button, {
-          "data-testid": "reload_button",
+        }, regionTooLargeReason ? regionTooLargeReason + '. ' : '', "Zoom in to see features or", ' '), /*#__PURE__*/React__default.createElement(core.Button, {
+          "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__default.createElement(Typography, {
+        }, "Force Load"), /*#__PURE__*/React__default.createElement(core.Typography, {
           component: "span",
           variant: "body2"
         }, "(force load may be slow)"));
@@ -2250,7 +2519,9 @@ var BaseLinearDisplay$1 = /*#__PURE__*/mobxStateTree.types.compose('BaseLinearDi
       }] : [];
     },
     renderProps: function renderProps() {
+      var view = util.getContainingView(self);
       return _objectSpread2(_objectSpread2({}, tracks.getParentRenderProps(self)), {}, {
+        notReady: self.currBpPerPx !== view.bpPerPx || !self.estimatedRegionStats,
         rpcDriverName: self.rpcDriverName,
         displayModel: self,
         onFeatureClick: function onFeatureClick(_, featureId) {
@@ -2260,7 +2531,10 @@ var BaseLinearDisplay$1 = /*#__PURE__*/mobxStateTree.types.compose('BaseLinearDi
             self.clearFeatureSelection();
           } else {
             var feature = self.features.get(f);
-            self.selectFeature(feature);
+
+            if (feature) {
+              self.selectFeature(feature);
+            }
           }
         },
         onClick: function onClick() {
@@ -2293,18 +2567,18 @@ var BaseLinearDisplay$1 = /*#__PURE__*/mobxStateTree.types.compose('BaseLinearDi
 }).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 = util.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
@@ -2342,13 +2616,11 @@ var BaseLinearDisplay$1 = /*#__PURE__*/mobxStateTree.types.compose('BaseLinearDi
                 }));
 
               case 6:
-                renderings = _context.sent;
-                return _context.abrupt("return", /*#__PURE__*/React__default.createElement(React__default.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__default.createElement(React__default.Fragment, null, renderings.map(function (rendering, index) {
+                  var offsetPx = roundedDynamicBlocks[index].offsetPx;
+                  var offset = offsetPx - viewOffsetPx;
+                  var clipid = getId(id, index);
                   return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
                     key: "frag-".concat(index)
                   }, /*#__PURE__*/React__default.createElement("defs", null, /*#__PURE__*/React__default.createElement("clipPath", {
@@ -2362,7 +2634,10 @@ var BaseLinearDisplay$1 = /*#__PURE__*/mobxStateTree.types.compose('BaseLinearDi
                     transform: "translate(".concat(offset, " 0)")
                   }, /*#__PURE__*/React__default.createElement("g", {
                     clipPath: "url(#".concat(clipid, ")")
-                  }, /*#__PURE__*/React__default.isValidElement(rendering.reactElement) ? rendering.reactElement : /*#__PURE__*/React__default.createElement("g", {
+                  }, /*#__PURE__*/React__default.isValidElement(rendering.reactElement) ? rendering.reactElement :
+                  /*#__PURE__*/
+                  // eslint-disable-next-line react/no-danger
+                  React__default.createElement("g", {
                     dangerouslySetInnerHTML: {
                       __html: rendering.html
                     }
@@ -2371,10 +2646,10 @@ var BaseLinearDisplay$1 = /*#__PURE__*/mobxStateTree.types.compose('BaseLinearDi
 
               case 8:
               case "end":
-                return _context.stop();
+                return _context3.stop();
             }
           }
-        }, _callee);
+        }, _callee3);
       }))();
     }
   };
@@ -3572,6 +3847,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,
@@ -3782,11 +4059,11 @@ function RefNameAutocomplete(_ref) {
             style: {
               marginRight: 7
             }
-          }, /*#__PURE__*/React__default.createElement(SearchIcon, null), /*#__PURE__*/React__default.createElement(core.IconButton, {
+          }, /*#__PURE__*/React__default.createElement(SearchIcon, null), showHelp ? /*#__PURE__*/React__default.createElement(core.IconButton, {
             onClick: function onClick() {
               return setHelpDialogDisplayed(true);
             }
-          }, /*#__PURE__*/React__default.createElement(HelpIcon, null))), params.InputProps.endAdornment)
+          }, /*#__PURE__*/React__default.createElement(HelpIcon, null)) : null), params.InputProps.endAdornment)
         }),
         placeholder: "Search for location",
         onChange: function onChange(e) {
@@ -3820,65 +4097,233 @@ function RefNameAutocomplete(_ref) {
 
 var RefNameAutocomplete$1 = /*#__PURE__*/mobxReact.observer(RefNameAutocomplete);
 
-var useStyles$7 = /*#__PURE__*/styles.makeStyles(function (theme) {
+var useStyles$7 = /*#__PURE__*/core.makeStyles(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 = core.useTheme();
+  var session = util.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 = React.useState(offscreenCanvas),
-      _useState2 = _slicedToArray(_useState, 2),
-      rasterizeLayers = _useState2[0],
-      setRasterizeLayers = _useState2[1];
+  function fetchResults(_x, _x2) {
+    return _fetchResults.apply(this, arguments);
+  }
 
-  var _useState3 = React.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 = React.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__default.createElement(core.Dialog, {
-    open: true,
-    onClose: handleClose
-  }, /*#__PURE__*/React__default.createElement(core.DialogTitle, null, "Export SVG", /*#__PURE__*/React__default.createElement(core.IconButton, {
-    className: classes.closeButton,
-    onClick: handleClose
-  }, /*#__PURE__*/React__default.createElement(CloseIcon, null))), /*#__PURE__*/React__default.createElement(core.DialogContent, null, error ? /*#__PURE__*/React__default.createElement("div", {
-    style: {
-      color: 'red'
-    }
-  }, "".concat(error)) : loading ? /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(core.CircularProgress, {
-    size: 20,
-    style: {
-      marginRight: 20
-    }
-  }), /*#__PURE__*/React__default.createElement(core.Typography, {
-    display: "inline"
-  }, "Creating SVG")) : null, offscreenCanvas ? /*#__PURE__*/React__default.createElement(core.FormControlLabel, {
-    control: /*#__PURE__*/React__default.createElement(core.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"
+              _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__default({
+                  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__default.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: core.alpha(theme.palette.background.paper, 0.8)
+        }
+      }
+    }
+  });
+}
+
+var SearchBox$1 = /*#__PURE__*/mobxReact.observer(SearchBox);
+
+var useStyles$8 = /*#__PURE__*/styles.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 = React.useState(offscreenCanvas),
+      _useState2 = _slicedToArray(_useState, 2),
+      rasterizeLayers = _useState2[0],
+      setRasterizeLayers = _useState2[1];
+
+  var _useState3 = React.useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      loading = _useState4[0],
+      setLoading = _useState4[1];
+
+  var _useState5 = React.useState(),
+      _useState6 = _slicedToArray(_useState5, 2),
+      error = _useState6[0],
+      setError = _useState6[1];
+
+  var classes = useStyles$8();
+  return /*#__PURE__*/React__default.createElement(core.Dialog, {
+    open: true,
+    onClose: handleClose
+  }, /*#__PURE__*/React__default.createElement(core.DialogTitle, null, "Export SVG", /*#__PURE__*/React__default.createElement(core.IconButton, {
+    className: classes.closeButton,
+    onClick: handleClose
+  }, /*#__PURE__*/React__default.createElement(CloseIcon, null))), /*#__PURE__*/React__default.createElement(core.DialogContent, null, error ? /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      color: 'red'
+    }
+  }, "".concat(error)) : loading ? /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(core.CircularProgress, {
+    size: 20,
+    style: {
+      marginRight: 20
+    }
+  }), /*#__PURE__*/React__default.createElement(core.Typography, {
+    display: "inline"
+  }, "Creating SVG")) : null, offscreenCanvas ? /*#__PURE__*/React__default.createElement(core.FormControlLabel, {
+    control: /*#__PURE__*/React__default.createElement(core.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__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",
@@ -3936,7 +4381,7 @@ function ExportSvgDlg(_ref) {
   }, "Submit")));
 }
 
-var useStyles$8 = /*#__PURE__*/styles.makeStyles(function (theme) {
+var useStyles$9 = /*#__PURE__*/styles.makeStyles(function (theme) {
   return {
     closeButton: {
       position: 'absolute',
@@ -3950,7 +4395,7 @@ var useStyles$8 = /*#__PURE__*/styles.makeStyles(function (theme) {
 function ReturnToImportFormDialog(_ref) {
   var model = _ref.model,
       handleClose = _ref.handleClose;
-  var classes = useStyles$8();
+  var classes = useStyles$9();
   return /*#__PURE__*/React__default.createElement(core.Dialog, {
     maxWidth: "xl",
     open: true,
@@ -3980,7 +4425,7 @@ function ReturnToImportFormDialog(_ref) {
 
 var ReturnToImportFormDlg = /*#__PURE__*/mobxReact.observer(ReturnToImportFormDialog);
 
-var useStyles$9 = /*#__PURE__*/styles.makeStyles({
+var useStyles$a = /*#__PURE__*/styles.makeStyles({
   container: {
     display: 'flex',
     flexDirection: 'row',
@@ -3993,7 +4438,7 @@ var useStyles$9 = /*#__PURE__*/styles.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,
@@ -4040,9 +4485,7 @@ function ZoomControls(_ref) {
 
 var ZoomControls$1 = /*#__PURE__*/mobxReact.observer(ZoomControls);
 
-var WIDGET_HEIGHT = 32;
-var SPACING = 7;
-var useStyles$a = /*#__PURE__*/core.makeStyles(function (theme) {
+var useStyles$b = /*#__PURE__*/core.makeStyles(function (theme) {
   return {
     headerBar: {
       height: HEADER_BAR_HEIGHT,
@@ -4055,10 +4498,6 @@ var useStyles$a = /*#__PURE__*/core.makeStyles(function (theme) {
     spacer: {
       flexGrow: 1
     },
-    input: {},
-    headerRefName: {
-      minWidth: 100
-    },
     panButton: {
       background: core.alpha(theme.palette.background.paper, 0.8),
       height: WIDGET_HEIGHT,
@@ -4079,9 +4518,9 @@ var useStyles$a = /*#__PURE__*/core.makeStyles(function (theme) {
     }
   };
 });
-var Controls = /*#__PURE__*/mobxReact.observer(function (_ref) {
+var HeaderButtons = /*#__PURE__*/mobxReact.observer(function (_ref) {
   var model = _ref.model;
-  var classes = useStyles$a();
+  var classes = useStyles$b();
   return /*#__PURE__*/React__default.createElement(core.Button, {
     onClick: model.activateTrackSelector,
     className: classes.toggleButton,
@@ -4095,7 +4534,7 @@ var Controls = /*#__PURE__*/mobxReact.observer(function (_ref) {
 
 function PanControls(_ref2) {
   var model = _ref2.model;
-  var classes = useStyles$a();
+  var classes = useStyles$b();
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(core.Button, {
     variant: "outlined",
     className: classes.panButton,
@@ -4113,150 +4552,21 @@ function PanControls(_ref2) {
 
 var RegionWidth = /*#__PURE__*/mobxReact.observer(function (_ref3) {
   var model = _ref3.model;
-  var classes = useStyles$a();
+  var classes = useStyles$b();
   var coarseTotalBp = model.coarseTotalBp;
   return /*#__PURE__*/React__default.createElement(core.Typography, {
     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__*/mobxReact.observer(function (_ref4) {
-  var model = _ref4.model;
-  var classes = useStyles$a();
-  var theme = core.useTheme();
-  var session = util.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__default({
-                  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__default.createElement("div", {
+var Controls = function Controls(_ref4) {
+  var model = _ref4.model;
+  var classes = useStyles$b();
+  return /*#__PURE__*/React__default.createElement("div", {
     className: classes.headerBar
-  }, /*#__PURE__*/React__default.createElement(Controls, {
+  }, /*#__PURE__*/React__default.createElement(HeaderButtons, {
     model: model
   }), /*#__PURE__*/React__default.createElement("div", {
     className: classes.spacer
@@ -4265,26 +4575,8 @@ var LinearGenomeViewHeader = /*#__PURE__*/mobxReact.observer(function (_ref4) {
     className: classes.headerForm
   }, /*#__PURE__*/React__default.createElement(PanControls, {
     model: model
-  }), /*#__PURE__*/React__default.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: core.alpha(theme.palette.background.paper, 0.8)
-        }
-      }
-    }
+  }), /*#__PURE__*/React__default.createElement(SearchBox$1, {
+    model: model
   })), /*#__PURE__*/React__default.createElement(RegionWidth, {
     model: model
   }), /*#__PURE__*/React__default.createElement(ZoomControls$1, {
@@ -4292,20 +4584,23 @@ var LinearGenomeViewHeader = /*#__PURE__*/mobxReact.observer(function (_ref4) {
   }), /*#__PURE__*/React__default.createElement("div", {
     className: classes.spacer
   }));
+};
 
-  if (model.hideHeaderOverview) {
-    return controls;
-  }
-
-  return /*#__PURE__*/React__default.createElement(OverviewScaleBar$1, {
+var LinearGenomeViewHeader = /*#__PURE__*/mobxReact.observer(function (_ref5) {
+  var model = _ref5.model;
+  return model.hideHeaderOverview ? /*#__PURE__*/React__default.createElement(Controls, {
+    model: model
+  }) : /*#__PURE__*/React__default.createElement(OverviewScaleBar$1, {
+    model: model
+  }, /*#__PURE__*/React__default.createElement(Controls, {
     model: model
-  }, controls);
+  }));
 });
 
-var useStyles$b = /*#__PURE__*/styles.makeStyles(function (theme) {
+var useStyles$c = /*#__PURE__*/core.makeStyles(function (theme) {
   return {
     root: {
-      background: styles.alpha(theme.palette.background.paper, 0.8),
+      background: core.alpha(theme.palette.background.paper, 0.8),
       '&:hover': {
         background: theme.palette.background.paper
       },
@@ -4336,7 +4631,7 @@ var useStyles$b = /*#__PURE__*/styles.makeStyles(function (theme) {
 var TrackLabel = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
   var _session$getTrackActi;
 
-  var classes = useStyles$b();
+  var classes = useStyles$c();
 
   var _React$useState = React__default.useState(null),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -4388,7 +4683,7 @@ var TrackLabel = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
   }
 
   var items = track.trackMenuItems();
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Paper, {
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(core.Paper, {
     ref: ref,
     className: clsx(className, classes.root)
   }, /*#__PURE__*/React__default.createElement("span", {
@@ -4399,18 +4694,18 @@ var TrackLabel = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
     "data-testid": "dragHandle-".concat(view.id, "-").concat(trackId)
   }, /*#__PURE__*/React__default.createElement(DragIcon, {
     className: classes.dragHandleIcon
-  })), /*#__PURE__*/React__default.createElement(IconButton, {
+  })), /*#__PURE__*/React__default.createElement(core.IconButton, {
     onClick: function onClick() {
       return view.hideTrack(trackId);
     },
     className: classes.iconButton,
     title: "close this track",
     color: "secondary"
-  }, /*#__PURE__*/React__default.createElement(CloseIcon, null)), /*#__PURE__*/React__default.createElement(Typography, {
+  }, /*#__PURE__*/React__default.createElement(CloseIcon, null)), /*#__PURE__*/React__default.createElement(core.Typography, {
     variant: "body1",
     component: "span",
     className: classes.trackName
-  }, trackName), /*#__PURE__*/React__default.createElement(IconButton, {
+  }, trackName), /*#__PURE__*/React__default.createElement(core.IconButton, {
     "aria-controls": "simple-menu",
     "aria-haspopup": "true",
     onClick: handleClick,
@@ -4430,7 +4725,7 @@ var TrackLabel = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
 });
 var TrackLabel$1 = /*#__PURE__*/mobxReact.observer(TrackLabel);
 
-var useStyles$c = /*#__PURE__*/styles.makeStyles(function (theme) {
+var useStyles$d = /*#__PURE__*/styles.makeStyles(function (theme) {
   return {
     root: {},
     resizeHandle: {
@@ -4479,7 +4774,7 @@ var useStyles$c = /*#__PURE__*/styles.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];
@@ -4561,7 +4856,7 @@ function TrackContainer(props) {
 
 var TrackContainer$1 = /*#__PURE__*/mobxReact.observer(TrackContainer);
 
-var useStyles$d = /*#__PURE__*/styles.makeStyles(function (theme) {
+var useStyles$e = /*#__PURE__*/styles.makeStyles(function (theme) {
   var background = theme.palette.tertiary ? colorManipulator.alpha(theme.palette.tertiary.main, 0.7) : colorManipulator.alpha(theme.palette.primary.main, 0.7);
   return {
     rubberBand: {
@@ -4600,7 +4895,7 @@ var useStyles$d = /*#__PURE__*/styles.makeStyles(function (theme) {
 var VerticalGuide = /*#__PURE__*/mobxReact.observer(function (_ref) {
   var model = _ref.model,
       coordX = _ref.coordX;
-  var classes = useStyles$d();
+  var classes = useStyles$e();
   return /*#__PURE__*/React__default.createElement(Tooltip$1, {
     open: true,
     placement: "top",
@@ -4644,7 +4939,7 @@ function RubberBand(_ref2) {
 
   var controlsRef = React.useRef(null);
   var rubberBandRef = React.useRef(null);
-  var classes = useStyles$d();
+  var classes = useStyles$e();
   var mouseDragging = startX !== undefined && anchorPosition === undefined;
   var setOffsets = model.setOffsets,
       pxToBp = model.pxToBp;
@@ -4847,7 +5142,7 @@ RubberBand.defaultProps = {
 var RubberBand$1 = /*#__PURE__*/mobxReact.observer(RubberBand);
 
 var _excluded$1 = ["model", "style", "className"];
-var useStyles$e = /*#__PURE__*/styles.makeStyles(function (theme) {
+var useStyles$f = /*#__PURE__*/styles.makeStyles(function (theme) {
   return {
     scaleBarContainer: {
       overflow: 'hidden',
@@ -4891,7 +5186,7 @@ var useStyles$e = /*#__PURE__*/styles.makeStyles(function (theme) {
 });
 var RenderedRefNameLabels = /*#__PURE__*/mobxReact.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) {
@@ -4913,7 +5208,7 @@ var RenderedRefNameLabels = /*#__PURE__*/mobxReact.observer(function (_ref) {
 });
 var RenderedScaleBarLabels = /*#__PURE__*/mobxReact.observer(function (_ref2) {
   var model = _ref2.model;
-  var classes = useStyles$e();
+  var classes = useStyles$f();
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, model.staticBlocks.map(function (block, index) {
     if (block instanceof blockTypes.ContentBlock) {
       var ticks = makeTicks(block.start, block.end, model.bpPerPx, true, false);
@@ -4966,7 +5261,7 @@ var ScaleBar$2 = /*#__PURE__*/React__default.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__default.createElement(Paper, Object.assign({
     "data-resizer": "true" // used to avoid click-and-drag scrolls on trackscontainer
@@ -4994,7 +5289,7 @@ var ScaleBar$2 = /*#__PURE__*/React__default.forwardRef(function (_ref3, ref) {
 });
 var ScaleBar$3 = /*#__PURE__*/mobxReact.observer(ScaleBar$2);
 
-var useStyles$f = /*#__PURE__*/styles.makeStyles(function (theme) {
+var useStyles$g = /*#__PURE__*/styles.makeStyles(function (theme) {
   return {
     verticalGuidesZoomContainer: {
       position: 'absolute',
@@ -5025,7 +5320,7 @@ var useStyles$f = /*#__PURE__*/styles.makeStyles(function (theme) {
 });
 var RenderedVerticalGuides = /*#__PURE__*/mobxReact.observer(function (_ref) {
   var model = _ref.model;
-  var classes = useStyles$f();
+  var classes = useStyles$g();
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, model.staticBlocks.map(function (block, index) {
     if (block instanceof blockTypes.ContentBlock) {
       var ticks = makeTicks(block.start, block.end, model.bpPerPx);
@@ -5065,7 +5360,7 @@ var RenderedVerticalGuides = /*#__PURE__*/mobxReact.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__default.createElement("div", {
@@ -5086,7 +5381,7 @@ function VerticalGuides(_ref2) {
 
 var VerticalGuides$1 = /*#__PURE__*/mobxReact.observer(VerticalGuides);
 
-var useStyles$g = /*#__PURE__*/styles.makeStyles(function () {
+var useStyles$h = /*#__PURE__*/styles.makeStyles(function () {
   return {
     centerLineContainer: {
       background: 'transparent',
@@ -5115,7 +5410,7 @@ function CenterLine(_ref) {
       tracks = model.tracks,
       width = model.width;
   var ref = React.useRef(null);
-  var classes = useStyles$g();
+  var classes = useStyles$h();
   var startingPosition = width / 2;
   return tracks.length ? /*#__PURE__*/React__default.createElement("div", {
     "data-testid": "centerline_container",
@@ -5142,7 +5437,7 @@ CenterLine.propTypes = {
 };
 var CenterLine$1 = /*#__PURE__*/mobxReact.observer(CenterLine);
 
-var useStyles$h = /*#__PURE__*/styles.makeStyles(function (theme) {
+var useStyles$i = /*#__PURE__*/styles.makeStyles(function (theme) {
   return {
     tracksContainer: {
       position: 'relative',
@@ -5159,7 +5454,7 @@ var useStyles$h = /*#__PURE__*/styles.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 = React.useRef(0);
@@ -5325,7 +5620,7 @@ var TracksContainer$1 = /*#__PURE__*/mobxReact.observer(TracksContainer);
 var SearchResultsDialog = /*#__PURE__*/React.lazy(function () {
   return Promise.resolve().then(function () { return SearchResultsDialog$2; });
 });
-var useStyles$i = /*#__PURE__*/core.makeStyles(function (theme) {
+var useStyles$j = /*#__PURE__*/core.makeStyles(function (theme) {
   return {
     importFormContainer: {
       padding: theme.spacing(2)
@@ -5339,7 +5634,7 @@ var ImportForm = /*#__PURE__*/mobxReact.observer(function (_ref) {
   var _regions$;
 
   var model = _ref.model;
-  var classes = useStyles$i();
+  var classes = useStyles$j();
   var session = util.getSession(model);
   var assemblyNames = session.assemblyNames,
       assemblyManager = session.assemblyManager,
@@ -5639,7 +5934,7 @@ var MiniControls = /*#__PURE__*/mobxReact.observer(function (props) {
   }));
 });
 
-var useStyles$j = /*#__PURE__*/core.makeStyles(function (theme) {
+var useStyles$k = /*#__PURE__*/core.makeStyles(function (theme) {
   return {
     loadingMessage: {
       padding: theme.spacing(5)
@@ -5735,7 +6030,7 @@ function _fetchSequence() {
 function SequenceDialog(_ref) {
   var model = _ref.model,
       handleClose = _ref.handleClose;
-  var classes = useStyles$j();
+  var classes = useStyles$k();
   var session = util.getSession(model);
 
   var _useState = React.useState(),
@@ -5900,7 +6195,7 @@ function SequenceDialog(_ref) {
 
 var SequenceDialog$1 = /*#__PURE__*/mobxReact.observer(SequenceDialog);
 
-var useStyles$k = /*#__PURE__*/core.makeStyles(function (theme) {
+var useStyles$l = /*#__PURE__*/core.makeStyles(function (theme) {
   return {
     dialogContent: {
       width: '80em'
@@ -5919,7 +6214,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 = util.getSession(model);
 
   var _getEnv = mobxStateTree.getEnv(session),
@@ -6040,11 +6335,11 @@ function SearchResultsDialog$1(_ref) {
 
 var SearchResultsDialog$2 = {
   __proto__: null,
-  useStyles: useStyles$k,
+  useStyles: useStyles$l,
   'default': SearchResultsDialog$1
 };
 
-var useStyles$l = /*#__PURE__*/core.makeStyles(function (theme) {
+var useStyles$m = /*#__PURE__*/core.makeStyles(function (theme) {
   return {
     note: {
       textAlign: 'center',
@@ -6080,7 +6375,7 @@ var LinearGenomeView = /*#__PURE__*/mobxReact.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__default.createElement(core.Typography, {
@@ -6169,6 +6464,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 mobxStateTree.types.compose(models.BaseViewModel, mobxStateTree.types.model('LinearGenomeView', {
     id: mst.ElementId,
@@ -6182,9 +6479,17 @@ function stateModelFactory$1(pluginManager) {
     hideHeader: false,
     hideHeaderOverview: false,
     trackSelectorType: mobxStateTree.types.optional(mobxStateTree.types.enumeration(['hierarchical']), 'hierarchical'),
-    trackLabels: 'overlapping',
-    showCenterLine: false,
-    showCytobandsSetting: true
+    trackLabels: mobxStateTree.types.optional(mobxStateTree.types.string, function () {
+      return localStorage.getItem('lgv-trackLabels') || 'overlapping';
+    }),
+    showCenterLine: mobxStateTree.types.optional(mobxStateTree.types["boolean"], function () {
+      var setting = localStorage.getItem('lgv-showCenterLine');
+      return setting !== undefined ? !!setting : false;
+    }),
+    showCytobandsSetting: mobxStateTree.types.optional(mobxStateTree.types["boolean"], function () {
+      var setting = localStorage.getItem('lgv-showCytobands');
+      return setting !== undefined ? !!setting : true;
+    })
   }))["volatile"](function () {
     return {
       volatileWidth: undefined,
@@ -6291,11 +6596,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() {
@@ -6358,39 +6661,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 util.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;
       },
 
       /**
@@ -6542,6 +6818,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;
@@ -6611,13 +6888,13 @@ function stateModelFactory$1(pluginManager) {
         var configuration = mobxStateTree.resolveIdentifier(trackConfigSchema, mobxStateTree.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);
@@ -6629,7 +6906,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) {
@@ -6712,9 +6989,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 = mobxStateTree.cast(regions);
@@ -7628,13 +7907,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
@@ -7717,6 +7990,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 mobx.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",
@@ -7736,7 +8084,7 @@ var LinearGenomeViewPlugin = /*#__PURE__*/function (_Plugin) {
   return LinearGenomeViewPlugin;
 }(Plugin);
 
-var useStyles$m = /*#__PURE__*/core.makeStyles(function (theme) {
+var useStyles$n = /*#__PURE__*/core.makeStyles(function (theme) {
   return {
     closeButton: {
       position: 'absolute',
@@ -7748,7 +8096,7 @@ var useStyles$m = /*#__PURE__*/core.makeStyles(function (theme) {
 });
 function HelpDialog$1(_ref) {
   var handleClose = _ref.handleClose;
-  var classes = useStyles$m();
+  var classes = useStyles$n();
   return /*#__PURE__*/React__default.createElement(core.Dialog, {
     open: true,
     maxWidth: "xl",
@@ -7769,11 +8117,11 @@ function HelpDialog$1(_ref) {
 
 var HelpDialog$2 = {
   __proto__: null,
-  useStyles: useStyles$m,
+  useStyles: useStyles$n,
   'default': HelpDialog$1
 };
 
-var useStyles$n = /*#__PURE__*/core.makeStyles(function (theme) {
+var useStyles$o = /*#__PURE__*/core.makeStyles(function (theme) {
   return {
     root: {
       width: 500
@@ -7793,7 +8141,7 @@ var useStyles$n = /*#__PURE__*/core.makeStyles(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;
 
@@ -7845,6 +8193,7 @@ var SetMaxHeight$1 = {
 exports.BaseLinearDisplay = BaseLinearDisplay$1;
 exports.BaseLinearDisplayComponent = BaseLinearDisplay;
 exports.RefNameAutocomplete = RefNameAutocomplete$1;
+exports.SearchBox = SearchBox$1;
 exports.baseLinearDisplayConfigSchema = baseLinearDisplayConfigSchema;
 exports.default = LinearGenomeViewPlugin;
 exports.linearBareDisplayConfigSchemaFactory = configSchemaFactory;