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

package/dist/LinearGenomeView/index.js

@@ -0,0 +1,1418 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RESIZE_HANDLE_HEIGHT = exports.INTER_REGION_PADDING_WIDTH = exports.HEADER_OVERVIEW_HEIGHT = exports.HEADER_BAR_HEIGHT = void 0;
+Object.defineProperty(exports, "ReactComponent", {
+  enumerable: true,
+  get: function get() {
+    return _LinearGenomeView["default"];
+  }
+});
+Object.defineProperty(exports, "RefNameAutocomplete", {
+  enumerable: true,
+  get: function get() {
+    return _RefNameAutocomplete["default"];
+  }
+});
+exports.SPACING = exports.SCALE_BAR_HEIGHT = void 0;
+Object.defineProperty(exports, "SearchBox", {
+  enumerable: true,
+  get: function get() {
+    return _SearchBox["default"];
+  }
+});
+exports.WIDGET_HEIGHT = void 0;
+Object.defineProperty(exports, "renderToSvg", {
+  enumerable: true,
+  get: function get() {
+    return _LinearGenomeViewSvg.renderToSvg;
+  }
+});
+exports.stateModelFactory = stateModelFactory;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _configuration = require("@jbrowse/core/configuration");
+
+var _models = require("@jbrowse/core/pluggableElementTypes/models");
+
+var _mst = require("@jbrowse/core/util/types/mst");
+
+var _ui = require("@jbrowse/core/ui");
+
+var _util = require("@jbrowse/core/util");
+
+var _calculateDynamicBlocks = _interopRequireDefault(require("@jbrowse/core/util/calculateDynamicBlocks"));
+
+var _calculateStaticBlocks = _interopRequireDefault(require("@jbrowse/core/util/calculateStaticBlocks"));
+
+var _tracks = require("@jbrowse/core/util/tracks");
+
+var _mobx = require("mobx");
+
+var _mobxStateTree = require("mobx-state-tree");
+
+var _Base1DViewModel = _interopRequireDefault(require("@jbrowse/core/util/Base1DViewModel"));
+
+var _clone = _interopRequireDefault(require("clone"));
+
+var _fileSaver = require("file-saver");
+
+var _Icons = require("@jbrowse/core/ui/Icons");
+
+var _SyncAlt = _interopRequireDefault(require("@material-ui/icons/SyncAlt"));
+
+var _Visibility = _interopRequireDefault(require("@material-ui/icons/Visibility"));
+
+var _Label = _interopRequireDefault(require("@material-ui/icons/Label"));
+
+var _FolderOpen = _interopRequireDefault(require("@material-ui/icons/FolderOpen"));
+
+var _PhotoCamera = _interopRequireDefault(require("@material-ui/icons/PhotoCamera"));
+
+var _ZoomIn = _interopRequireDefault(require("@material-ui/icons/ZoomIn"));
+
+var _MenuOpen = _interopRequireDefault(require("@material-ui/icons/MenuOpen"));
+
+var _LinearGenomeViewSvg = require("./components/LinearGenomeViewSvg");
+
+var _RefNameAutocomplete = _interopRequireDefault(require("./components/RefNameAutocomplete"));
+
+var _SearchBox = _interopRequireDefault(require("./components/SearchBox"));
+
+var _ExportSvgDialog = _interopRequireDefault(require("./components/ExportSvgDialog"));
+
+var _LinearGenomeView = _interopRequireDefault(require("./components/LinearGenomeView"));
+
+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; }
+
+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 calculateVisibleLocStrings(contentBlocks) {
+  if (!contentBlocks.length) {
+    return '';
+  }
+
+  var isSingleAssemblyName = contentBlocks.every(function (block) {
+    return block.assemblyName === contentBlocks[0].assemblyName;
+  });
+  var locs = contentBlocks.map(function (block) {
+    return (0, _util.assembleLocString)(_objectSpread(_objectSpread({}, block), {}, {
+      start: Math.round(block.start),
+      end: Math.round(block.end),
+      assemblyName: isSingleAssemblyName ? undefined : block.assemblyName
+    }));
+  });
+  return locs.join(' ');
+}
+
+var HEADER_BAR_HEIGHT = 48;
+exports.HEADER_BAR_HEIGHT = HEADER_BAR_HEIGHT;
+var HEADER_OVERVIEW_HEIGHT = 20;
+exports.HEADER_OVERVIEW_HEIGHT = HEADER_OVERVIEW_HEIGHT;
+var SCALE_BAR_HEIGHT = 17;
+exports.SCALE_BAR_HEIGHT = SCALE_BAR_HEIGHT;
+var RESIZE_HANDLE_HEIGHT = 3;
+exports.RESIZE_HANDLE_HEIGHT = RESIZE_HANDLE_HEIGHT;
+var INTER_REGION_PADDING_WIDTH = 2;
+exports.INTER_REGION_PADDING_WIDTH = INTER_REGION_PADDING_WIDTH;
+var SPACING = 7;
+exports.SPACING = SPACING;
+var WIDGET_HEIGHT = 32;
+exports.WIDGET_HEIGHT = WIDGET_HEIGHT;
+
+function localStorageGetItem(item) {
+  return typeof localStorage !== 'undefined' ? localStorage.getItem(item) : undefined;
+}
+
+function stateModelFactory(pluginManager) {
+  return _mobxStateTree.types.compose(_models.BaseViewModel, _mobxStateTree.types.model('LinearGenomeView', {
+    id: _mst.ElementId,
+    type: _mobxStateTree.types.literal('LinearGenomeView'),
+    offsetPx: 0,
+    bpPerPx: 1,
+    displayedRegions: _mobxStateTree.types.array(_mst.Region),
+    // we use an array for the tracks because the tracks are displayed in a
+    // specific order that we need to keep.
+    tracks: _mobxStateTree.types.array(pluginManager.pluggableMstType('track', 'stateModel')),
+    hideHeader: false,
+    hideHeaderOverview: false,
+    trackSelectorType: _mobxStateTree.types.optional(_mobxStateTree.types.enumeration(['hierarchical']), 'hierarchical'),
+    trackLabels: _mobxStateTree.types.optional(_mobxStateTree.types.string, function () {
+      return localStorageGetItem('lgv-trackLabels') || 'overlapping';
+    }),
+    showCenterLine: _mobxStateTree.types.optional(_mobxStateTree.types["boolean"], function () {
+      var setting = localStorageGetItem('lgv-showCenterLine');
+      return setting !== undefined && setting !== null ? !!+setting : false;
+    }),
+    showCytobandsSetting: _mobxStateTree.types.optional(_mobxStateTree.types["boolean"], function () {
+      var setting = localStorageGetItem('lgv-showCytobands');
+      return setting !== undefined && setting !== null ? !!+setting : true;
+    })
+  }))["volatile"](function () {
+    return {
+      volatileWidth: undefined,
+      minimumBlockWidth: 3,
+      draggingTrackId: undefined,
+      volatileError: undefined,
+      // array of callbacks to run after the next set of the displayedRegions,
+      // which is basically like an onLoad
+      afterDisplayedRegionsSetCallbacks: [],
+      scaleFactor: 1,
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      trackRefs: {},
+      coarseDynamicBlocks: [],
+      coarseTotalBp: 0,
+      leftOffset: undefined,
+      rightOffset: undefined,
+      searchResults: undefined,
+      searchQuery: undefined,
+      seqDialogDisplayed: false
+    };
+  }).views(function (self) {
+    return {
+      get width() {
+        if (self.volatileWidth === undefined) {
+          throw new Error('width undefined, make sure to check for model.initialized');
+        }
+
+        return self.volatileWidth;
+      },
+
+      get interRegionPaddingWidth() {
+        return INTER_REGION_PADDING_WIDTH;
+      }
+
+    };
+  }).views(function (self) {
+    return {
+      get assemblyErrors() {
+        var _getSession = (0, _util.getSession)(self),
+            assemblyManager = _getSession.assemblyManager;
+
+        return this.assemblyNames.map(function (a) {
+          var _assemblyManager$get;
+
+          return (_assemblyManager$get = assemblyManager.get(a)) === null || _assemblyManager$get === void 0 ? void 0 : _assemblyManager$get.error;
+        }).filter(function (f) {
+          return !!f;
+        }).join(', ');
+      },
+
+      get assembliesInitialized() {
+        var _getSession2 = (0, _util.getSession)(self),
+            assemblyManager = _getSession2.assemblyManager;
+
+        return this.assemblyNames.every(function (a) {
+          var _assemblyManager$get2;
+
+          return (_assemblyManager$get2 = assemblyManager.get(a)) === null || _assemblyManager$get2 === void 0 ? void 0 : _assemblyManager$get2.initialized;
+        });
+      },
+
+      get initialized() {
+        return self.volatileWidth !== undefined && this.assembliesInitialized;
+      },
+
+      get hasDisplayedRegions() {
+        return self.displayedRegions.length > 0;
+      },
+
+      get isSearchDialogDisplayed() {
+        return self.searchResults !== undefined;
+      },
+
+      get scaleBarHeight() {
+        return SCALE_BAR_HEIGHT + RESIZE_HANDLE_HEIGHT;
+      },
+
+      get headerHeight() {
+        if (self.hideHeader) {
+          return 0;
+        }
+
+        if (self.hideHeaderOverview) {
+          return HEADER_BAR_HEIGHT;
+        }
+
+        return HEADER_BAR_HEIGHT + HEADER_OVERVIEW_HEIGHT;
+      },
+
+      get trackHeights() {
+        return self.tracks.map(function (t) {
+          return t.displays[0].height;
+        }).reduce(function (a, b) {
+          return a + b;
+        }, 0);
+      },
+
+      get trackHeightsWithResizeHandles() {
+        return this.trackHeights + self.tracks.length * RESIZE_HANDLE_HEIGHT;
+      },
+
+      get height() {
+        return this.trackHeightsWithResizeHandles + this.headerHeight + this.scaleBarHeight;
+      },
+
+      get totalBp() {
+        return self.displayedRegions.reduce(function (a, b) {
+          return a + b.end - b.start;
+        }, 0);
+      },
+
+      get maxBpPerPx() {
+        return this.totalBp / (self.width * 0.9);
+      },
+
+      get minBpPerPx() {
+        return 1 / 50;
+      },
+
+      get error() {
+        return self.volatileError || this.assemblyErrors;
+      },
+
+      get maxOffset() {
+        // objectively determined to keep the linear genome on the main screen
+        var leftPadding = 10;
+        return this.displayedRegionsTotalPx - leftPadding;
+      },
+
+      get minOffset() {
+        // objectively determined to keep the linear genome on the main screen
+        var rightPadding = 30;
+        return -self.width + rightPadding;
+      },
+
+      get displayedRegionsTotalPx() {
+        return this.totalBp / self.bpPerPx;
+      },
+
+      renderProps: function renderProps() {
+        return _objectSpread(_objectSpread({}, (0, _tracks.getParentRenderProps)(self)), {}, {
+          bpPerPx: self.bpPerPx,
+          highResolutionScaling: (0, _configuration.getConf)((0, _util.getSession)(self), 'highResolutionScaling')
+        });
+      },
+
+      get assemblyNames() {
+        return (0, _toConsumableArray2["default"])(new Set(self.displayedRegions.map(function (region) {
+          return region.assemblyName;
+        })));
+      },
+
+      searchScope: function searchScope(assemblyName) {
+        return {
+          assemblyName: assemblyName,
+          includeAggregateIndexes: true,
+          tracks: self.tracks
+        };
+      },
+
+      /**
+       * @param refName - refName of the displayedRegion
+       * @param coord - coordinate at the displayed Region
+       * @param regionNumber - optional param used as identifier when
+       * there are multiple displayedRegions with the same refName
+       * @returns offsetPx of the displayed region that it lands in
+       */
+      bpToPx: function bpToPx(_ref) {
+        var refName = _ref.refName,
+            coord = _ref.coord,
+            regionNumber = _ref.regionNumber;
+        return (0, _util.viewBpToPx)({
+          refName: refName,
+          coord: coord,
+          regionNumber: regionNumber,
+          self: self
+        });
+      },
+
+      /**
+       *
+       * @param px - px in the view area, return value is the displayed regions
+       * @returns BpOffset of the displayed region that it lands in
+       */
+      pxToBp: function pxToBp(px) {
+        var bpSoFar = 0;
+        var bp = (self.offsetPx + px) * self.bpPerPx;
+        var n = self.displayedRegions.length;
+
+        if (bp < 0) {
+          var region = self.displayedRegions[0];
+          var offset = bp;
+          return _objectSpread(_objectSpread({}, (0, _mobxStateTree.getSnapshot)(region)), {}, {
+            oob: true,
+            coord: region.reversed ? Math.floor(region.end - offset) + 1 : Math.floor(region.start + offset) + 1,
+            offset: offset,
+            index: 0
+          });
+        }
+
+        var interRegionPaddingBp = self.interRegionPaddingWidth * self.bpPerPx;
+        var minimumBlockBp = self.minimumBlockWidth * self.bpPerPx;
+
+        for (var index = 0; index < self.displayedRegions.length; index += 1) {
+          var _region = self.displayedRegions[index];
+          var len = _region.end - _region.start;
+
+          var _offset = bp - bpSoFar;
+
+          if (len + bpSoFar > bp && bpSoFar <= bp) {
+            return _objectSpread(_objectSpread({}, (0, _mobxStateTree.getSnapshot)(_region)), {}, {
+              oob: false,
+              offset: _offset,
+              coord: _region.reversed ? Math.floor(_region.end - _offset) + 1 : Math.floor(_region.start + _offset) + 1,
+              index: index
+            });
+          } // add the interRegionPaddingWidth if the boundary is in the screen
+          // e.g. offset>0 && offset<width
+
+
+          if (_region.end - _region.start > minimumBlockBp && _offset / self.bpPerPx > 0 && _offset / self.bpPerPx < self.width) {
+            bpSoFar += len + interRegionPaddingBp;
+          } else {
+            bpSoFar += len;
+          }
+        }
+
+        if (bp >= bpSoFar) {
+          var _region2 = self.displayedRegions[n - 1];
+
+          var _len = _region2.end - _region2.start;
+
+          var _offset2 = bp - bpSoFar + _len;
+
+          return _objectSpread(_objectSpread({}, (0, _mobxStateTree.getSnapshot)(_region2)), {}, {
+            oob: true,
+            offset: _offset2,
+            coord: _region2.reversed ? Math.floor(_region2.end - _offset2) + 1 : Math.floor(_region2.start + _offset2) + 1,
+            index: n - 1
+          });
+        }
+
+        return {
+          coord: 0,
+          index: 0,
+          refName: '',
+          oob: true,
+          assemblyName: '',
+          offset: 0,
+          start: 0,
+          end: 0,
+          reversed: false
+        };
+      },
+      getTrack: function getTrack(id) {
+        return self.tracks.find(function (t) {
+          return t.configuration.trackId === id;
+        });
+      },
+      rankSearchResults: function rankSearchResults(results) {
+        // order of rank
+        var openTrackIds = self.tracks.map(function (track) {
+          return track.configuration.trackId;
+        });
+        results.forEach(function (result) {
+          if (openTrackIds !== []) {
+            if (openTrackIds.includes(result.trackId)) {
+              result.updateScore(result.getScore() + 1);
+            }
+          }
+        });
+        return results;
+      },
+      // modifies view menu action onClick to apply to all tracks of same type
+      rewriteOnClicks: function rewriteOnClicks(trackType, viewMenuActions) {
+        var _this = this;
+
+        viewMenuActions.forEach(function (action) {
+          // go to lowest level menu
+          if ('subMenu' in action) {
+            _this.rewriteOnClicks(trackType, action.subMenu);
+          }
+
+          if ('onClick' in action) {
+            var holdOnClick = action.onClick;
+
+            action.onClick = function () {
+              for (var _len2 = arguments.length, args = new Array(_len2), _key = 0; _key < _len2; _key++) {
+                args[_key] = arguments[_key];
+              }
+
+              self.tracks.forEach(function (track) {
+                if (track.type === trackType) {
+                  holdOnClick.apply(track, [track].concat(args));
+                }
+              });
+            };
+          }
+        });
+      },
+
+      get trackTypeActions() {
+        var _this2 = this;
+
+        var allActions = new Map();
+        self.tracks.forEach(function (track) {
+          var trackInMap = allActions.get(track.type);
+
+          if (!trackInMap) {
+            var viewMenuActions = (0, _clone["default"])(track.viewMenuActions);
+
+            _this2.rewriteOnClicks(track.type, viewMenuActions);
+
+            allActions.set(track.type, viewMenuActions);
+          }
+        });
+        return allActions;
+      },
+
+      get centerLineInfo() {
+        return self.displayedRegions.length ? this.pxToBp(self.width / 2) : undefined;
+      }
+
+    };
+  }).actions(function (self) {
+    return {
+      setShowCytobands: function setShowCytobands(flag) {
+        self.showCytobandsSetting = flag;
+        localStorage.setItem('lgv-showCytobands', "".concat(+flag));
+      },
+      setWidth: function setWidth(newWidth) {
+        self.volatileWidth = newWidth;
+      },
+      setError: function setError(error) {
+        self.volatileError = error;
+      },
+      toggleHeader: function toggleHeader() {
+        self.hideHeader = !self.hideHeader;
+      },
+      toggleHeaderOverview: function toggleHeaderOverview() {
+        self.hideHeaderOverview = !self.hideHeaderOverview;
+      },
+      scrollTo: function scrollTo(offsetPx) {
+        var newOffsetPx = (0, _util.clamp)(offsetPx, self.minOffset, self.maxOffset);
+        self.offsetPx = newOffsetPx;
+        return newOffsetPx;
+      },
+      zoomTo: function zoomTo(bpPerPx) {
+        var newBpPerPx = (0, _util.clamp)(bpPerPx, self.minBpPerPx, self.maxBpPerPx);
+
+        if (newBpPerPx === self.bpPerPx) {
+          return newBpPerPx;
+        }
+
+        var oldBpPerPx = self.bpPerPx;
+        self.bpPerPx = newBpPerPx;
+
+        if (Math.abs(oldBpPerPx - newBpPerPx) < 0.000001) {
+          console.warn('zoomTo bpPerPx rounding error');
+          return oldBpPerPx;
+        } // tweak the offset so that the center of the view remains at the same coordinate
+
+
+        var viewWidth = self.width;
+        this.scrollTo(Math.round((self.offsetPx + viewWidth / 2) * oldBpPerPx / newBpPerPx - viewWidth / 2));
+        return newBpPerPx;
+      },
+      setOffsets: function setOffsets(left, right) {
+        // sets offsets used in the get sequence dialog
+        self.leftOffset = left;
+        self.rightOffset = right;
+      },
+      setSearchResults: function setSearchResults(results, query) {
+        self.searchResults = results;
+        self.searchQuery = query;
+      },
+      setSequenceDialogOpen: function setSequenceDialogOpen(open) {
+        self.seqDialogDisplayed = open;
+      },
+      setNewView: function setNewView(bpPerPx, offsetPx) {
+        this.zoomTo(bpPerPx);
+        this.scrollTo(offsetPx);
+      },
+      horizontallyFlip: function horizontallyFlip() {
+        self.displayedRegions = (0, _mobxStateTree.cast)(self.displayedRegions.slice().reverse().map(function (region) {
+          return _objectSpread(_objectSpread({}, region), {}, {
+            reversed: !region.reversed
+          });
+        }));
+        this.scrollTo(self.totalBp / self.bpPerPx - self.offsetPx - self.width);
+      },
+      showTrack: function showTrack(trackId) {
+        var initialSnapshot = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+        var displayInitialSnapshot = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+        var trackConfigSchema = pluginManager.pluggableConfigSchemaType('track');
+        var configuration = (0, _mobxStateTree.resolveIdentifier)(trackConfigSchema, (0, _mobxStateTree.getRoot)(self), trackId);
+
+        if (!configuration) {
+          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));
+        }
+
+        var viewType = pluginManager.getViewType(self.type);
+        var supportedDisplays = viewType.displayTypes.map(function (displayType) {
+          return displayType.name;
+        });
+        var displayConf = configuration.displays.find(function (d) {
+          return supportedDisplays.includes(d.type);
+        });
+
+        if (!displayConf) {
+          throw new Error("Could not find a compatible display for view type ".concat(self.type));
+        }
+
+        var shownTracks = self.tracks.filter(function (t) {
+          return t.configuration === configuration;
+        });
+
+        if (shownTracks.length === 0) {
+          var track = trackType.stateModel.create(_objectSpread(_objectSpread({}, initialSnapshot), {}, {
+            type: configuration.type,
+            configuration: configuration,
+            displays: [_objectSpread({
+              type: displayConf.type,
+              configuration: displayConf
+            }, displayInitialSnapshot)]
+          }));
+          self.tracks.push(track);
+          return track;
+        }
+
+        return shownTracks[0];
+      },
+      hideTrack: function hideTrack(trackId) {
+        var trackConfigSchema = pluginManager.pluggableConfigSchemaType('track');
+        var configuration = (0, _mobxStateTree.resolveIdentifier)(trackConfigSchema, (0, _mobxStateTree.getRoot)(self), trackId); // if we have any tracks with that configuration, turn them off
+
+        var shownTracks = self.tracks.filter(function (t) {
+          return t.configuration === configuration;
+        });
+        (0, _mobx.transaction)(function () {
+          return shownTracks.forEach(function (t) {
+            return self.tracks.remove(t);
+          });
+        });
+        return shownTracks.length;
+      }
+    };
+  }).actions(function (self) {
+    return {
+      moveTrack: function moveTrack(movingTrackId, targetTrackId) {
+        var oldIndex = self.tracks.findIndex(function (track) {
+          return track.id === movingTrackId;
+        });
+
+        if (oldIndex === -1) {
+          throw new Error("Track ID ".concat(movingTrackId, " not found"));
+        }
+
+        var newIndex = self.tracks.findIndex(function (track) {
+          return track.id === targetTrackId;
+        });
+
+        if (newIndex === -1) {
+          throw new Error("Track ID ".concat(targetTrackId, " not found"));
+        }
+
+        var track = (0, _mobxStateTree.getSnapshot)(self.tracks[oldIndex]);
+        self.tracks.splice(oldIndex, 1);
+        self.tracks.splice(newIndex, 0, track);
+      },
+      closeView: function closeView() {
+        var parent = (0, _util.getContainingView)(self);
+
+        if (parent) {
+          // I am embedded in a some other view
+          if ((0, _util.isViewContainer)(parent)) {
+            parent.removeView(self);
+          }
+        } else {
+          // I am part of a session
+          (0, _util.getSession)(self).removeView(self);
+        }
+      },
+      toggleTrack: function toggleTrack(trackId) {
+        // if we have any tracks with that configuration, turn them off
+        var hiddenCount = self.hideTrack(trackId); // if none had that configuration, turn one on
+
+        if (!hiddenCount) {
+          self.showTrack(trackId);
+        }
+      },
+      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 = (0, _mobxStateTree.cast)(regions);
+        self.zoomTo(self.bpPerPx);
+      },
+      activateTrackSelector: function activateTrackSelector() {
+        if (self.trackSelectorType === 'hierarchical') {
+          var session = (0, _util.getSession)(self);
+
+          if ((0, _util.isSessionModelWithWidgets)(session)) {
+            var selector = session.addWidget('HierarchicalTrackSelectorWidget', 'hierarchicalTrackSelector', {
+              view: self
+            });
+            session.showWidget(selector);
+            return selector;
+          }
+        }
+
+        throw new Error("invalid track selector type ".concat(self.trackSelectorType));
+      },
+      navToLocString: function navToLocString(locString, optAssemblyName) {
+        var assemblyNames = self.assemblyNames;
+
+        var _getSession3 = (0, _util.getSession)(self),
+            assemblyManager = _getSession3.assemblyManager;
+
+        var isValidRefName = assemblyManager.isValidRefName;
+        var assemblyName = optAssemblyName || assemblyNames[0];
+        var parsedLocStrings = locString.split(' ').filter(function (f) {
+          return !!f.trim();
+        }).map(function (l) {
+          return (0, _util.parseLocString)(l, function (ref) {
+            return isValidRefName(ref, assemblyName);
+          });
+        });
+        var locations = parsedLocStrings.map(function (region) {
+          var asmName = region.assemblyName || assemblyName;
+          var asm = assemblyManager.get(asmName);
+          var refName = region.refName;
+
+          if (!asm) {
+            throw new Error("assembly ".concat(asmName, " not found"));
+          }
+
+          var regions = asm.regions;
+
+          if (!regions) {
+            throw new Error("regions not loaded yet for ".concat(asmName));
+          }
+
+          var canonicalRefName = asm.getCanonicalRefName(region.refName);
+
+          if (!canonicalRefName) {
+            throw new Error("Could not find refName ".concat(refName, " in ").concat(asm.name));
+          }
+
+          var parentRegion = regions.find(function (region) {
+            return region.refName === canonicalRefName;
+          });
+
+          if (!parentRegion) {
+            throw new Error("Could not find refName ".concat(refName, " in ").concat(asmName));
+          }
+
+          return _objectSpread(_objectSpread({}, region), {}, {
+            assemblyName: asmName,
+            parentRegion: parentRegion
+          });
+        });
+
+        if (locations.length === 1) {
+          var loc = locations[0];
+          this.setDisplayedRegions([_objectSpread({
+            reversed: loc.reversed
+          }, loc.parentRegion)]);
+          var start = loc.start,
+              end = loc.end,
+              parentRegion = loc.parentRegion;
+          this.navTo(_objectSpread(_objectSpread({}, loc), {}, {
+            start: (0, _util.clamp)(start !== null && start !== void 0 ? start : 0, 0, parentRegion.end),
+            end: (0, _util.clamp)(end !== null && end !== void 0 ? end : parentRegion.end, 0, parentRegion.end)
+          }));
+        } else {
+          this.setDisplayedRegions( // @ts-ignore
+          locations.map(function (r) {
+            return r.start === undefined ? r.parentRegion : r;
+          }));
+          this.showAllRegions();
+        }
+      },
+
+      /**
+       * Navigate to a location based on its refName and optionally start, end,
+       * and assemblyName. Can handle if there are multiple displayedRegions
+       * from same refName. Only navigates to a location if it is entirely
+       * within a displayedRegion. Navigates to the first matching location
+       * encountered.
+       *
+       * Throws an error if navigation was unsuccessful
+       *
+       * @param location - a proposed location to navigate to
+       */
+      navTo: function navTo(query) {
+        this.navToMultiple([query]);
+      },
+      navToMultiple: function navToMultiple(locations) {
+        var firstLocation = locations[0];
+        var refName = firstLocation.refName;
+        var start = firstLocation.start,
+            end = firstLocation.end,
+            _firstLocation$assemb = firstLocation.assemblyName,
+            assemblyName = _firstLocation$assemb === void 0 ? self.assemblyNames[0] : _firstLocation$assemb;
+
+        if (start !== undefined && end !== undefined && start > end) {
+          throw new Error("start \"".concat(start + 1, "\" is greater than end \"").concat(end, "\""));
+        }
+
+        var session = (0, _util.getSession)(self);
+        var assemblyManager = session.assemblyManager;
+        var assembly = assemblyManager.get(assemblyName);
+
+        if (assembly) {
+          var canonicalRefName = assembly.getCanonicalRefName(refName);
+
+          if (canonicalRefName) {
+            refName = canonicalRefName;
+          }
+        }
+
+        var s = start;
+        var e = end;
+        var refNameMatched = false;
+
+        var predicate = function predicate(r) {
+          if (refName === r.refName) {
+            refNameMatched = true;
+
+            if (s === undefined) {
+              s = r.start;
+            }
+
+            if (e === undefined) {
+              e = r.end;
+            }
+
+            if (s >= r.start && s <= r.end && e <= r.end && e >= r.start) {
+              return true;
+            }
+
+            s = start;
+            e = end;
+          }
+
+          return false;
+        };
+
+        var lastIndex = (0, _util.findLastIndex)(self.displayedRegions, predicate);
+        var index;
+
+        while (index !== lastIndex) {
+          try {
+            var previousIndex = index;
+            index = self.displayedRegions.slice(previousIndex === undefined ? 0 : previousIndex + 1).findIndex(predicate);
+
+            if (previousIndex !== undefined) {
+              index += previousIndex + 1;
+            }
+
+            if (!refNameMatched) {
+              throw new Error("could not find a region with refName \"".concat(refName, "\""));
+            }
+
+            if (s === undefined) {
+              throw new Error("could not find a region with refName \"".concat(refName, "\" that contained an end position ").concat(e));
+            }
+
+            if (e === undefined) {
+              throw new Error("could not find a region with refName \"".concat(refName, "\" that contained a start position ").concat(s + 1));
+            }
+
+            if (index === -1) {
+              throw new Error("could not find a region that completely contained \"".concat((0, _util.assembleLocString)(firstLocation), "\""));
+            }
+
+            if (locations.length === 1) {
+              var f = self.displayedRegions[index];
+              this.moveTo({
+                index: index,
+                offset: f.reversed ? f.end - e : s - f.start
+              }, {
+                index: index,
+                offset: f.reversed ? f.end - s : e - f.start
+              });
+              return;
+            }
+
+            var locationIndex = 0;
+            var locationStart = 0;
+            var locationEnd = 0;
+
+            for (locationIndex; locationIndex < locations.length; locationIndex++) {
+              var location = locations[locationIndex];
+              var region = self.displayedRegions[index + locationIndex];
+              locationStart = location.start || region.start;
+              locationEnd = location.end || region.end;
+
+              if (location.refName !== region.refName) {
+                throw new Error("Entered location ".concat((0, _util.assembleLocString)(location), " does not match with displayed regions"));
+              }
+            }
+
+            locationIndex -= 1;
+            var startDisplayedRegion = self.displayedRegions[index];
+            var endDisplayedRegion = self.displayedRegions[index + locationIndex];
+            this.moveTo({
+              index: index,
+              offset: startDisplayedRegion.reversed ? startDisplayedRegion.end - e : s - startDisplayedRegion.start
+            }, {
+              index: index + locationIndex,
+              offset: endDisplayedRegion.reversed ? endDisplayedRegion.end - locationStart : locationEnd - endDisplayedRegion.start
+            });
+            return;
+          } catch (error) {
+            if (index === lastIndex) {
+              throw error;
+            }
+          }
+        }
+      },
+
+      /**
+       * Navigate to a location based on user clicking and dragging on the
+       * overview scale bar to select a region to zoom into.
+       * Can handle if there are multiple displayedRegions from same refName.
+       * Only navigates to a location if it is entirely within a displayedRegion.
+       *
+       * @param leftPx- `object as {start, end, index, offset}`, offset = start of user drag
+       * @param rightPx- `object as {start, end, index, offset}`, offset = end of user drag
+       */
+      zoomToDisplayedRegions: function zoomToDisplayedRegions(leftPx, rightPx) {
+        if (leftPx === undefined || rightPx === undefined) {
+          return;
+        }
+
+        var singleRefSeq = leftPx.refName === rightPx.refName && leftPx.index === rightPx.index; // zooming into one displayed Region
+
+        if (singleRefSeq && rightPx.offset < leftPx.offset || leftPx.index > rightPx.index) {
+          ;
+          var _ref2 = [rightPx, leftPx];
+          leftPx = _ref2[0];
+          rightPx = _ref2[1];
+        }
+
+        var startOffset = {
+          start: leftPx.start,
+          end: leftPx.end,
+          index: leftPx.index,
+          offset: leftPx.offset
+        };
+        var endOffset = {
+          start: rightPx.start,
+          end: rightPx.end,
+          index: rightPx.index,
+          offset: rightPx.offset
+        };
+
+        if (startOffset && endOffset) {
+          this.moveTo(startOffset, endOffset);
+        } else {
+          var session = (0, _util.getSession)(self);
+          session.notify('No regions found to navigate to', 'warning');
+        }
+      },
+
+      /**
+       * Helper method for the fetchSequence.
+       * Retrieves the corresponding regions that were selected by the rubberband
+       *
+       * @param leftOffset - `object as {start, end, index, offset}`, offset = start of user drag
+       * @param rightOffset - `object as {start, end, index, offset}`, offset = end of user drag
+       * @returns array of Region[]
+       */
+      getSelectedRegions: function getSelectedRegions(leftOffset, rightOffset) {
+        var simView = _Base1DViewModel["default"].create(_objectSpread(_objectSpread({}, (0, _mobxStateTree.getSnapshot)(self)), {}, {
+          interRegionPaddingWidth: self.interRegionPaddingWidth
+        }));
+
+        simView.setVolatileWidth(self.width);
+        simView.zoomToDisplayedRegions(leftOffset, rightOffset);
+        return simView.dynamicBlocks.contentBlocks.map(function (region) {
+          return _objectSpread(_objectSpread({}, region), {}, {
+            start: Math.floor(region.start),
+            end: Math.ceil(region.end)
+          });
+        });
+      },
+      // schedule something to be run after the next time displayedRegions is set
+      afterDisplayedRegionsSet: function afterDisplayedRegionsSet(cb) {
+        self.afterDisplayedRegionsSetCallbacks.push(cb);
+      },
+
+      /**
+       * offset is the base-pair-offset in the displayed region, index is the index of the
+       * displayed region in the linear genome view
+       *
+       * @param start - object as `{start, end, offset, index}`
+       * @param end - object as `{start, end, offset, index}`
+       */
+      moveTo: function moveTo(start, end) {
+        // find locations in the modellist
+        var bpSoFar = 0;
+
+        if (start.index === end.index) {
+          bpSoFar += end.offset - start.offset;
+        } else {
+          var s = self.displayedRegions[start.index];
+          bpSoFar += s.end - s.start - start.offset;
+
+          if (end.index - start.index >= 2) {
+            for (var i = start.index + 1; i < end.index; i += 1) {
+              bpSoFar += self.displayedRegions[i].end - self.displayedRegions[i].start;
+            }
+          }
+
+          bpSoFar += end.offset;
+        }
+
+        var targetBpPerPx = bpSoFar / (self.width - self.interRegionPaddingWidth * (end.index - start.index));
+        var newBpPerPx = self.zoomTo(targetBpPerPx); // If our target bpPerPx was smaller than the allowed minBpPerPx, adjust
+        // the scroll so the requested range is in the middle of the screen
+
+        var extraBp = 0;
+
+        if (targetBpPerPx < newBpPerPx) {
+          extraBp = (newBpPerPx - targetBpPerPx) * self.width / 2;
+        }
+
+        var bpToStart = -extraBp;
+
+        for (var _i = 0; _i < self.displayedRegions.length; _i += 1) {
+          var region = self.displayedRegions[_i];
+
+          if (start.index === _i) {
+            bpToStart += start.offset;
+            break;
+          } else {
+            bpToStart += region.end - region.start;
+          }
+        }
+
+        self.scrollTo(Math.round(bpToStart / self.bpPerPx) + self.interRegionPaddingWidth * start.index);
+      },
+      horizontalScroll: function horizontalScroll(distance) {
+        var oldOffsetPx = self.offsetPx; // newOffsetPx is the actual offset after the scroll is clamped
+
+        var newOffsetPx = self.scrollTo(self.offsetPx + distance);
+        return newOffsetPx - oldOffsetPx;
+      },
+
+      /**
+       * scrolls the view to center on the given bp. if that is not in any
+       * of the displayed regions, does nothing
+       * @param bp - basepair at which you want to center the view
+       * @param refName - refName of the displayedRegion you are centering at
+       * @param regionIndex - index of the displayedRegion
+       */
+      centerAt: function centerAt(bp, refName, regionIndex) {
+        var centerPx = self.bpToPx({
+          refName: refName,
+          coord: bp,
+          regionNumber: regionIndex
+        });
+
+        if (centerPx) {
+          self.scrollTo(Math.round(centerPx.offsetPx - self.width / 2));
+        }
+      },
+      center: function center() {
+        var centerBp = self.totalBp / 2;
+        self.scrollTo(Math.round(centerBp / self.bpPerPx - self.width / 2));
+      },
+      showAllRegions: function showAllRegions() {
+        self.zoomTo(self.maxBpPerPx);
+        this.center();
+      },
+      showAllRegionsInAssembly: function showAllRegionsInAssembly(assemblyName) {
+        var session = (0, _util.getSession)(self);
+        var assemblyManager = session.assemblyManager;
+
+        if (!assemblyName) {
+          var assemblyNames = (0, _toConsumableArray2["default"])(new Set(self.displayedRegions.map(function (region) {
+            return region.assemblyName;
+          })));
+
+          if (assemblyNames.length > 1) {
+            session.notify("Can't perform this with multiple assemblies currently");
+            return;
+          }
+
+          ;
+
+          var _assemblyNames = (0, _slicedToArray2["default"])(assemblyNames, 1);
+
+          assemblyName = _assemblyNames[0];
+        }
+
+        var assembly = assemblyManager.get(assemblyName);
+
+        if (assembly) {
+          var regions = assembly.regions;
+
+          if (regions) {
+            this.setDisplayedRegions(regions);
+            self.zoomTo(self.maxBpPerPx);
+            this.center();
+          }
+        }
+      },
+      setDraggingTrackId: function setDraggingTrackId(idx) {
+        self.draggingTrackId = idx;
+      },
+      setScaleFactor: function setScaleFactor(factor) {
+        self.scaleFactor = factor;
+      }
+    };
+  }).actions(function (self) {
+    var cancelLastAnimation = function cancelLastAnimation() {};
+
+    function slide(viewWidths) {
+      var _springAnimate = (0, _util.springAnimate)(self.offsetPx, self.offsetPx + self.width * viewWidths, self.scrollTo),
+          _springAnimate2 = (0, _slicedToArray2["default"])(_springAnimate, 2),
+          animate = _springAnimate2[0],
+          cancelAnimation = _springAnimate2[1];
+
+      cancelLastAnimation();
+      cancelLastAnimation = cancelAnimation;
+      animate();
+    }
+
+    return {
+      slide: slide
+    };
+  }).actions(function (self) {
+    var cancelLastAnimation = function cancelLastAnimation() {};
+
+    function zoom(targetBpPerPx) {
+      self.zoomTo(self.bpPerPx);
+
+      if ( // already zoomed all the way in
+      targetBpPerPx < self.bpPerPx && self.bpPerPx === self.minBpPerPx || // already zoomed all the way out
+      targetBpPerPx > self.bpPerPx && self.bpPerPx === self.maxBpPerPx) {
+        return;
+      }
+
+      var factor = self.bpPerPx / targetBpPerPx;
+
+      var _springAnimate3 = (0, _util.springAnimate)(1, factor, self.setScaleFactor, function () {
+        self.zoomTo(targetBpPerPx);
+        self.setScaleFactor(1);
+      }),
+          _springAnimate4 = (0, _slicedToArray2["default"])(_springAnimate3, 2),
+          animate = _springAnimate4[0],
+          cancelAnimation = _springAnimate4[1];
+
+      cancelLastAnimation();
+      cancelLastAnimation = cancelAnimation;
+      animate();
+    }
+
+    return {
+      zoom: zoom
+    };
+  }).views(function (self) {
+    return {
+      get canShowCytobands() {
+        return self.displayedRegions.length === 1 && this.anyCytobandsExist;
+      },
+
+      get showCytobands() {
+        return this.canShowCytobands && self.showCytobandsSetting;
+      },
+
+      get anyCytobandsExist() {
+        var _getSession4 = (0, _util.getSession)(self),
+            assemblyManager = _getSession4.assemblyManager;
+
+        var assemblyNames = self.assemblyNames;
+        return assemblyNames.some(function (asm) {
+          var _assemblyManager$get3, _assemblyManager$get4;
+
+          return (_assemblyManager$get3 = assemblyManager.get(asm)) === null || _assemblyManager$get3 === void 0 ? void 0 : (_assemblyManager$get4 = _assemblyManager$get3.cytobands) === null || _assemblyManager$get4 === void 0 ? void 0 : _assemblyManager$get4.length;
+        });
+      },
+
+      get cytobandOffset() {
+        return this.showCytobands ? (0, _util.measureText)(self.displayedRegions[0].refName, 12) + 15 : 0;
+      }
+
+    };
+  }).views(function (self) {
+    return {
+      menuItems: function menuItems() {
+        var canShowCytobands = self.canShowCytobands,
+            showCytobands = self.showCytobands;
+        var menuItems = [{
+          label: 'Return to import form',
+          onClick: function onClick() {
+            (0, _util.getSession)(self).queueDialog(function (handleClose) {
+              return [_ui.ReturnToImportFormDialog, {
+                model: self,
+                handleClose: handleClose
+              }];
+            });
+          },
+          icon: _FolderOpen["default"]
+        }, {
+          label: 'Export SVG',
+          icon: _PhotoCamera["default"],
+          onClick: function onClick() {
+            (0, _util.getSession)(self).queueDialog(function (handleClose) {
+              return [_ExportSvgDialog["default"], {
+                model: self,
+                handleClose: handleClose
+              }];
+            });
+          }
+        }, {
+          label: 'Open track selector',
+          onClick: self.activateTrackSelector,
+          icon: _Icons.TrackSelector
+        }, {
+          label: 'Horizontally flip',
+          icon: _SyncAlt["default"],
+          onClick: self.horizontallyFlip
+        }, {
+          type: 'divider'
+        }, {
+          label: 'Show all regions in assembly',
+          icon: _Visibility["default"],
+          onClick: self.showAllRegionsInAssembly
+        }, {
+          label: 'Show center line',
+          icon: _Visibility["default"],
+          type: 'checkbox',
+          checked: self.showCenterLine,
+          onClick: self.toggleCenterLine
+        }, {
+          label: 'Show header',
+          icon: _Visibility["default"],
+          type: 'checkbox',
+          checked: !self.hideHeader,
+          onClick: self.toggleHeader
+        }, {
+          label: 'Show header overview',
+          icon: _Visibility["default"],
+          type: 'checkbox',
+          checked: !self.hideHeaderOverview,
+          onClick: self.toggleHeaderOverview,
+          disabled: self.hideHeader
+        }, {
+          label: 'Track labels',
+          icon: _Label["default"],
+          subMenu: [{
+            label: 'Overlapping',
+            icon: _Visibility["default"],
+            type: 'radio',
+            checked: self.trackLabels === 'overlapping',
+            onClick: function onClick() {
+              return self.setTrackLabels('overlapping');
+            }
+          }, {
+            label: 'Offset',
+            icon: _Visibility["default"],
+            type: 'radio',
+            checked: self.trackLabels === 'offset',
+            onClick: function onClick() {
+              return self.setTrackLabels('offset');
+            }
+          }, {
+            label: 'Hidden',
+            icon: _Visibility["default"],
+            type: 'radio',
+            checked: self.trackLabels === 'hidden',
+            onClick: function onClick() {
+              return self.setTrackLabels('hidden');
+            }
+          }]
+        }].concat((0, _toConsumableArray2["default"])(canShowCytobands ? [{
+          label: showCytobands ? 'Hide ideogram' : 'Show ideograms',
+          onClick: function onClick() {
+            self.setShowCytobands(!showCytobands);
+          }
+        }] : [])); // add track's view level menu options
+
+        var _iterator = _createForOfIteratorHelper(self.trackTypeActions.entries()),
+            _step;
+
+        try {
+          for (_iterator.s(); !(_step = _iterator.n()).done;) {
+            var _step$value = (0, _slicedToArray2["default"])(_step.value, 2),
+                _key2 = _step$value[0],
+                value = _step$value[1];
+
+            if (value.length) {
+              menuItems.push({
+                type: 'divider'
+              }, {
+                type: 'subHeader',
+                label: _key2
+              });
+              value.forEach(function (action) {
+                menuItems.push(action);
+              });
+            }
+          }
+        } catch (err) {
+          _iterator.e(err);
+        } finally {
+          _iterator.f();
+        }
+
+        return menuItems;
+      }
+    };
+  }).views(function (self) {
+    var currentlyCalculatedStaticBlocks;
+    var stringifiedCurrentlyCalculatedStaticBlocks = '';
+    return {
+      get staticBlocks() {
+        var ret = (0, _calculateStaticBlocks["default"])(self);
+        var sret = JSON.stringify(ret);
+
+        if (stringifiedCurrentlyCalculatedStaticBlocks !== sret) {
+          currentlyCalculatedStaticBlocks = ret;
+          stringifiedCurrentlyCalculatedStaticBlocks = sret;
+        }
+
+        return currentlyCalculatedStaticBlocks;
+      },
+
+      get dynamicBlocks() {
+        return (0, _calculateDynamicBlocks["default"])(self);
+      },
+
+      get roundedDynamicBlocks() {
+        return this.dynamicBlocks.contentBlocks.map(function (block) {
+          return _objectSpread(_objectSpread({}, block), {}, {
+            start: Math.floor(block.start),
+            end: Math.ceil(block.end)
+          });
+        });
+      },
+
+      get visibleLocStrings() {
+        return calculateVisibleLocStrings(this.dynamicBlocks.contentBlocks);
+      },
+
+      get coarseVisibleLocStrings() {
+        return calculateVisibleLocStrings(self.coarseDynamicBlocks);
+      }
+
+    };
+  }).actions(function (self) {
+    return {
+      // this "clears the view" and makes the view return to the import form
+      clearView: function clearView() {
+        self.setDisplayedRegions([]);
+        self.tracks.clear(); // it is necessary to run these after setting displayed regions empty
+        // or else model.offsetPx gets set to Infinity and breaks
+        // mobx-state-tree snapshot
+
+        self.scrollTo(0);
+        self.zoomTo(10);
+      },
+      setCoarseDynamicBlocks: function setCoarseDynamicBlocks(blocks) {
+        self.coarseDynamicBlocks = blocks.contentBlocks;
+        self.coarseTotalBp = blocks.totalBp;
+      },
+      afterAttach: function afterAttach() {
+        var _this3 = this;
+
+        (0, _mobxStateTree.addDisposer)(self, (0, _mobx.autorun)(function () {
+          if (self.initialized) {
+            _this3.setCoarseDynamicBlocks(self.dynamicBlocks);
+          }
+        }, {
+          delay: 150
+        }));
+      }
+    };
+  }).actions(function (self) {
+    return {
+      exportSvg: function exportSvg() {
+        var _arguments = arguments;
+        return (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+          var opts, html, blob;
+          return _regenerator["default"].wrap(function _callee$(_context) {
+            while (1) {
+              switch (_context.prev = _context.next) {
+                case 0:
+                  opts = _arguments.length > 0 && _arguments[0] !== undefined ? _arguments[0] : {};
+                  _context.next = 3;
+                  return (0, _LinearGenomeViewSvg.renderToSvg)(self, opts);
+
+                case 3:
+                  html = _context.sent;
+                  blob = new Blob([html], {
+                    type: 'image/svg+xml'
+                  });
+                  (0, _fileSaver.saveAs)(blob, 'image.svg');
+
+                case 6:
+                case "end":
+                  return _context.stop();
+              }
+            }
+          }, _callee);
+        }))();
+      }
+    };
+  }).views(function (self) {
+    return {
+      rubberBandMenuItems: function rubberBandMenuItems() {
+        return [{
+          label: 'Zoom to region',
+          icon: _ZoomIn["default"],
+          onClick: function onClick() {
+            var leftOffset = self.leftOffset,
+                rightOffset = self.rightOffset;
+
+            if (leftOffset && rightOffset) {
+              self.moveTo(leftOffset, rightOffset);
+            }
+          }
+        }, {
+          label: 'Get sequence',
+          icon: _MenuOpen["default"],
+          onClick: function onClick() {
+            self.setSequenceDialogOpen(true);
+          }
+        }];
+      }
+    };
+  });
+}