@jbrowse/plugin-linear-genome-view 1.6.9 → 1.7.0

package/dist/BaseLinearDisplay/models/BaseLinearDisplayModel.js

@@ -0,0 +1,763 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BaseLinearDisplay = void 0;
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _core = require("@material-ui/core");
+
+var _models = require("@jbrowse/core/pluggableElementTypes/models");
+
+var _configuration = require("@jbrowse/core/configuration");
+
+var _util = require("@jbrowse/core/util");
+
+var _compositeMap = _interopRequireDefault(require("@jbrowse/core/util/compositeMap"));
+
+var _simpleFeature = require("@jbrowse/core/util/simpleFeature");
+
+var _tracks = require("@jbrowse/core/util/tracks");
+
+var _mobx = require("mobx");
+
+var _mobxStateTree = require("mobx-state-tree");
+
+var _MenuOpen = _interopRequireDefault(require("@material-ui/icons/MenuOpen"));
+
+var _BaseLinearDisplay = require("../components/BaseLinearDisplay");
+
+var _serverSideRenderedBlock = _interopRequireWildcard(require("./serverSideRenderedBlock"));
+
+var _excluded = ["blockState"];
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+// stabilize clipid under test for snapshot
+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 = _mobxStateTree.types.compose('BaseLinearDisplay', _models.BaseDisplay, _mobxStateTree.types.model({
+  height: _mobxStateTree.types.optional(_mobxStateTree.types.refinement('displayHeight', _mobxStateTree.types.number, function (n) {
+    return n >= minDisplayHeight;
+  }), defaultDisplayHeight),
+  blockState: _mobxStateTree.types.map(_serverSideRenderedBlock["default"]),
+  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,
+    estimatedRegionStatsP: undefined,
+    estimatedRegionStats: undefined
+  };
+}).views(function (self) {
+  return {
+    get blockType() {
+      return 'staticBlocks';
+    },
+
+    get blockDefinitions() {
+      var blockType = this.blockType;
+      var view = (0, _util.getContainingView)(self);
+
+      if (!view.initialized) {
+        throw new Error('view not initialized yet');
+      }
+
+      return view[blockType];
+    }
+
+  };
+}).views(function (self) {
+  return {
+    /**
+     * how many milliseconds to wait for the display to
+     * "settle" before re-rendering a block
+     */
+    get renderDelay() {
+      return 50;
+    },
+
+    get TooltipComponent() {
+      return _BaseLinearDisplay.Tooltip;
+    },
+
+    /**
+     * returns a string feature ID if the globally-selected object
+     * is probably a feature
+     */
+    get selectedFeatureId() {
+      if ((0, _mobxStateTree.isAlive)(self)) {
+        var _getSession = (0, _util.getSession)(self),
+            selection = _getSession.selection; // does it quack like a feature?
+
+
+        if ((0, _simpleFeature.isFeature)(selection)) {
+          return selection.id();
+        }
+      }
+
+      return undefined;
+    },
+
+    /**
+     * if a display-level message should be displayed instead of the blocks,
+     * make this return a react component
+     */
+    get DisplayMessageComponent() {
+      return undefined;
+    }
+
+  };
+}).views(function (self) {
+  return {
+    /**
+     * a CompositeMap of `featureId -> feature obj` that
+     * just looks in all the block data for that feature
+     */
+    get features() {
+      var featureMaps = [];
+
+      var _iterator = _createForOfIteratorHelper(self.blockState.values()),
+          _step;
+
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var block = _step.value;
+
+          if (block && block.features) {
+            featureMaps.push(block.features);
+          }
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+
+      return new _compositeMap["default"](featureMaps);
+    },
+
+    get featureUnderMouse() {
+      var feat = self.featureIdUnderMouse;
+      return feat ? this.features.get(feat) : undefined;
+    },
+
+    getFeatureOverlapping: function getFeatureOverlapping(blockKey, x, y) {
+      var _self$blockState$get, _self$blockState$get$;
+
+      return (_self$blockState$get = self.blockState.get(blockKey)) === null || _self$blockState$get === void 0 ? void 0 : (_self$blockState$get$ = _self$blockState$get.layout) === null || _self$blockState$get$ === void 0 ? void 0 : _self$blockState$get$.getByCoord(x, y);
+    },
+    getFeatureByID: function getFeatureByID(blockKey, id) {
+      var _self$blockState$get2, _self$blockState$get3;
+
+      return (_self$blockState$get2 = self.blockState.get(blockKey)) === null || _self$blockState$get2 === void 0 ? void 0 : (_self$blockState$get3 = _self$blockState$get2.layout) === null || _self$blockState$get3 === void 0 ? void 0 : _self$blockState$get3.getByID(id);
+    },
+    // if block key is not supplied, can look at all blocks
+    searchFeatureByID: function searchFeatureByID(id) {
+      var ret;
+      self.blockState.forEach(function (block) {
+        var _block$layout;
+
+        var val = block === null || block === void 0 ? void 0 : (_block$layout = block.layout) === null || _block$layout === void 0 ? void 0 : _block$layout.getByID(id);
+
+        if (val) {
+          ret = val;
+        }
+      });
+      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 = (0, _util.getContainingView)(self);
+      return (((_self$estimatedRegion2 = self.estimatedRegionStats) === null || _self$estimatedRegion2 === void 0 ? void 0 : _self$estimatedRegion2.featureDensity) || 0) * view.bpPerPx;
+    },
+
+    get maxFeatureScreenDensity() {
+      return (0, _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) || (0, _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,
+      // then we recreate the blocks on our own model (creating and deleting to
+      // match the parent blocks)
+      var blockWatchDisposer = (0, _mobx.autorun)(function () {
+        var blocksPresent = {};
+        var view = (0, _util.getContainingView)(self);
+
+        if (view.initialized) {
+          self.blockDefinitions.contentBlocks.forEach(function (block) {
+            blocksPresent[block.key] = true;
+
+            if (!self.blockState.has(block.key)) {
+              _this.addBlock(block.key, block);
+            }
+          });
+          self.blockState.forEach(function (_, key) {
+            if (!blocksPresent[key]) {
+              _this.deleteBlock(key);
+            }
+          });
+        }
+      });
+      (0, _mobxStateTree.addDisposer)(self, blockWatchDisposer);
+    },
+    estimateRegionsStats: function estimateRegionsStats(regions, opts) {
+      var _this2 = this;
+
+      if (self.estimatedRegionStatsP) {
+        return self.estimatedRegionStatsP;
+      }
+
+      var _getSession2 = (0, _util.getSession)(self),
+          rpcManager = _getSession2.rpcManager;
+
+      var adapterConfig = self.adapterConfig;
+      var sessionId = (0, _tracks.getRpcSessionId)(self);
+
+      var params = _objectSpread({
+        sessionId: sessionId,
+        regions: regions,
+        adapterConfig: adapterConfig,
+        statusCallback: function statusCallback(message) {
+          if ((0, _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;
+      } else {
+        self.height = minDisplayHeight;
+      }
+
+      return self.height;
+    },
+    resizeHeight: function resizeHeight(distance) {
+      var oldHeight = self.height;
+      var newHeight = this.setHeight(self.height + distance);
+      return newHeight - oldHeight;
+    },
+    setScrollTop: function setScrollTop(scrollTop) {
+      self.scrollTop = scrollTop;
+    },
+    updateStatsLimit: function updateStatsLimit(stats) {
+      var view = (0, _util.getContainingView)(self);
+
+      if (stats.bytes) {
+        self.userByteSizeLimit = stats.bytes;
+      } else {
+        self.userBpPerPxLimit = view.bpPerPx;
+      }
+    },
+    addBlock: function addBlock(key, block) {
+      self.blockState.set(key, _serverSideRenderedBlock["default"].create({
+        key: key,
+        region: block.toRegion()
+      }));
+    },
+    setCurrBpPerPx: function setCurrBpPerPx(n) {
+      self.currBpPerPx = n;
+    },
+    deleteBlock: function deleteBlock(key) {
+      self.blockState["delete"](key);
+    },
+    selectFeature: function selectFeature(feature) {
+      var session = (0, _util.getSession)(self);
+
+      if ((0, _util.isSessionModelWithWidgets)(session)) {
+        var featureWidget = session.addWidget('BaseFeatureWidget', 'baseFeature', {
+          featureData: feature.toJSON(),
+          view: (0, _util.getContainingView)(self)
+        });
+        session.showWidget(featureWidget);
+      }
+
+      if ((0, _util.isSelectionContainer)(session)) {
+        session.setSelection(feature);
+      }
+    },
+    clearFeatureSelection: function clearFeatureSelection() {
+      var session = (0, _util.getSession)(self);
+      session.clearSelection();
+    },
+    setFeatureIdUnderMouse: function setFeatureIdUnderMouse(feature) {
+      self.featureIdUnderMouse = feature;
+    },
+    reload: function reload() {
+      ;
+      (0, _toConsumableArray2["default"])(self.blockState.values()).map(function (val) {
+        return val.doReload();
+      });
+    },
+    setContextMenuFeature: function setContextMenuFeature(feature) {
+      self.contextMenuFeature = feature;
+    }
+  };
+}).views(function (self) {
+  return {
+    // 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 = (0, _util.getContainingView)(self);
+
+      if (!self.estimatedStatsReady || view.dynamicBlocks.totalBp < 20000) {
+        return false;
+      }
+
+      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 (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+        var aborter, view, estimatedRegionStats;
+        return _regenerator["default"].wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                self.setError();
+                aborter = new AbortController();
+                view = (0, _util.getContainingView)(self); // extra check for contentBlocks.length
+                // https://github.com/GMOD/jbrowse-components/issues/2694
+
+                if (!(!view.initialized || !view.staticBlocks.contentBlocks.length)) {
+                  _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 (!(0, _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 estimateRegionsStats 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)
+      (0, _mobxStateTree.addDisposer)(self, (0, _mobx.autorun)( /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
+        var _self$estimatedRegion4, aborter, view, statsP, estimatedRegionStats;
+
+        return _regenerator["default"].wrap(function _callee2$(_context2) {
+          while (1) {
+            switch (_context2.prev = _context2.next) {
+              case 0:
+                _context2.prev = 0;
+                aborter = new AbortController();
+                view = (0, _util.getContainingView)(self); // extra check for contentBlocks.length
+                // https://github.com/GMOD/jbrowse-components/issues/2694
+
+                if (!(!view.initialized || !view.staticBlocks.contentBlocks.length)) {
+                  _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 ((0, _mobxStateTree.isAlive)(self)) {
+                  self.setRegionStats(estimatedRegionStats);
+                }
+
+                _context2.next = 23;
+                break;
+
+              case 20:
+                _context2.prev = 20;
+                _context2.t0 = _context2["catch"](0);
+
+                if (!(0, _util.isAbortException)(_context2.t0) && (0, _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' : '';
+    },
+
+    /**
+     * @param region -
+     * @returns falsy if the region is fine to try rendering. Otherwise,
+     *  return a react node + string of text.
+     *  string of text describes why it cannot be rendered
+     *  react node allows user to force load at current setting
+     */
+    regionCannotBeRendered: function regionCannotBeRendered(_region) {
+      var regionTooLarge = self.regionTooLarge,
+          regionTooLargeReason = self.regionTooLargeReason;
+
+      if (regionTooLarge) {
+        return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_core.Typography, {
+          component: "span",
+          variant: "body2"
+        }, regionTooLargeReason ? regionTooLargeReason + '. ' : '', "Zoom in to see features or", ' '), /*#__PURE__*/_react["default"].createElement(_core.Button, {
+          "data-testid": "force_reload_button",
+          onClick: function onClick() {
+            if (!self.estimatedRegionStats) {
+              console.error('No global stats?');
+            } else {
+              self.updateStatsLimit(self.estimatedRegionStats);
+              self.reload();
+            }
+          },
+          variant: "outlined"
+        }, "Force Load"), /*#__PURE__*/_react["default"].createElement(_core.Typography, {
+          component: "span",
+          variant: "body2"
+        }, "(force load may be slow)"));
+      }
+
+      return undefined;
+    },
+    trackMenuItems: function trackMenuItems() {
+      return [];
+    },
+    contextMenuItems: function contextMenuItems() {
+      return self.contextMenuFeature ? [{
+        label: 'Open feature details',
+        icon: _MenuOpen["default"],
+        onClick: function onClick() {
+          if (self.contextMenuFeature) {
+            self.selectFeature(self.contextMenuFeature);
+          }
+        }
+      }] : [];
+    },
+    renderProps: function renderProps() {
+      var view = (0, _util.getContainingView)(self);
+      return _objectSpread(_objectSpread({}, (0, _tracks.getParentRenderProps)(self)), {}, {
+        notReady: self.currBpPerPx !== view.bpPerPx || !self.estimatedRegionStats,
+        rpcDriverName: self.rpcDriverName,
+        displayModel: self,
+        onFeatureClick: function onFeatureClick(_, featureId) {
+          var f = featureId || self.featureIdUnderMouse;
+
+          if (!f) {
+            self.clearFeatureSelection();
+          } else {
+            var feature = self.features.get(f);
+
+            if (feature) {
+              self.selectFeature(feature);
+            }
+          }
+        },
+        onClick: function onClick() {
+          self.clearFeatureSelection();
+        },
+        // similar to click but opens a menu with further options
+        onFeatureContextMenu: function onFeatureContextMenu(_, featureId) {
+          var f = featureId || self.featureIdUnderMouse;
+
+          if (!f) {
+            self.clearFeatureSelection();
+          } else {
+            // feature id under mouse passed to context menu
+            self.setContextMenuFeature(self.features.get(f));
+          }
+        },
+        onMouseMove: function onMouseMove(_, featureId) {
+          self.setFeatureIdUnderMouse(featureId);
+        },
+        onMouseLeave: function onMouseLeave(_) {
+          self.setFeatureIdUnderMouse(undefined);
+        },
+        onContextMenu: function onContextMenu() {
+          self.setContextMenuFeature(undefined);
+          self.clearFeatureSelection();
+        }
+      });
+    }
+  };
+}).actions(function (self) {
+  return {
+    renderSvg: function renderSvg(opts) {
+      return (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3() {
+        var height, id, overrideHeight, view, viewOffsetPx, roundedDynamicBlocks, width, renderings;
+        return _regenerator["default"].wrap(function _callee3$(_context3) {
+          while (1) {
+            switch (_context3.prev = _context3.next) {
+              case 0:
+                height = self.height, id = self.id;
+                overrideHeight = opts.overrideHeight;
+                view = (0, _util.getContainingView)(self);
+                viewOffsetPx = view.offsetPx, roundedDynamicBlocks = view.roundedDynamicBlocks, width = view.width;
+                _context3.next = 6;
+                return Promise.all(roundedDynamicBlocks.map(function (block) {
+                  var blockState = _serverSideRenderedBlock["default"].create({
+                    key: block.key,
+                    region: block
+                  }); // regionCannotBeRendered can return jsx so look for plaintext
+                  // version, or just get the default if none available
+
+
+                  // regionCannotBeRendered can return jsx so look for plaintext
+                  // version, or just get the default if none available
+                  var cannotBeRenderedReason = self.regionCannotBeRenderedText(block) || self.regionCannotBeRendered(block);
+
+                  if (cannotBeRenderedReason) {
+                    return {
+                      reactElement: /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("rect", {
+                        x: 0,
+                        y: 0,
+                        width: width,
+                        height: 20,
+                        fill: "#aaa"
+                      }), /*#__PURE__*/_react["default"].createElement("text", {
+                        x: 0,
+                        y: 15
+                      }, cannotBeRenderedReason))
+                    };
+                  }
+
+                  var _renderBlockData = (0, _serverSideRenderedBlock.renderBlockData)(blockState, self),
+                      rpcManager = _renderBlockData.rpcManager,
+                      renderArgs = _renderBlockData.renderArgs,
+                      renderProps = _renderBlockData.renderProps,
+                      rendererType = _renderBlockData.rendererType;
+
+                  return rendererType.renderInClient(rpcManager, _objectSpread(_objectSpread(_objectSpread({}, renderArgs), renderProps), {}, {
+                    viewParams: (0, _util.getViewParams)(self, true),
+                    exportSVG: opts
+                  }));
+                }));
+
+              case 6:
+                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", {
+                    id: clipid
+                  }, /*#__PURE__*/_react["default"].createElement("rect", {
+                    x: 0,
+                    y: 0,
+                    width: width,
+                    height: overrideHeight || height
+                  }))), /*#__PURE__*/_react["default"].createElement("g", {
+                    transform: "translate(".concat(offset, " 0)")
+                  }, /*#__PURE__*/_react["default"].createElement("g", {
+                    clipPath: "url(#".concat(clipid, ")")
+                  }, /*#__PURE__*/_react["default"].isValidElement(rendering.reactElement) ? rendering.reactElement :
+                  /*#__PURE__*/
+                  // eslint-disable-next-line react/no-danger
+                  _react["default"].createElement("g", {
+                    dangerouslySetInnerHTML: {
+                      __html: rendering.html
+                    }
+                  }))));
+                })));
+
+              case 8:
+              case "end":
+                return _context3.stop();
+            }
+          }
+        }, _callee3);
+      }))();
+    }
+  };
+}).postProcessSnapshot(function (self) {
+  var blockState = self.blockState,
+      rest = (0, _objectWithoutProperties2["default"])(self, _excluded);
+  return rest;
+});
+
+exports.BaseLinearDisplay = BaseLinearDisplay;