@jbrowse/plugin-linear-genome-view 1.7.9 → 2.0.0

package/dist/LinearGenomeView/index.js

@@ -1,1418 +1,1194 @@
 "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');
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
         }
-
-        return self.volatileWidth;
-      },
-
-      get interRegionPaddingWidth() {
-        return INTER_REGION_PADDING_WIDTH;
-      }
-
+        return t;
     };
-  }).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
-          });
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
         }
-
-        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;
-          }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
         }
-
-        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 to.concat(ar || Array.prototype.slice.call(from));
+};
+var __values = (this && this.__values) || function(o) {
+    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
+    if (m) return m.call(o);
+    if (o && typeof o.length === "number") return {
+        next: function () {
+            if (o && i >= o.length) o = void 0;
+            return { value: o && o[i++], done: !o };
         }
-
-        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);
+    };
+    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ReactComponent = exports.SearchBox = exports.RefNameAutocomplete = exports.renderToSvg = exports.stateModelFactory = exports.WIDGET_HEIGHT = exports.SPACING = exports.INTER_REGION_PADDING_WIDTH = exports.RESIZE_HANDLE_HEIGHT = exports.SCALE_BAR_HEIGHT = exports.HEADER_OVERVIEW_HEIGHT = exports.HEADER_BAR_HEIGHT = void 0;
+var configuration_1 = require("@jbrowse/core/configuration");
+var models_1 = require("@jbrowse/core/pluggableElementTypes/models");
+var mst_1 = require("@jbrowse/core/util/types/mst");
+var ui_1 = require("@jbrowse/core/ui");
+var util_1 = require("@jbrowse/core/util");
+var calculateDynamicBlocks_1 = __importDefault(require("@jbrowse/core/util/calculateDynamicBlocks"));
+var calculateStaticBlocks_1 = __importDefault(require("@jbrowse/core/util/calculateStaticBlocks"));
+var tracks_1 = require("@jbrowse/core/util/tracks");
+var mobx_1 = require("mobx");
+var mobx_state_tree_1 = require("mobx-state-tree");
+var Base1DViewModel_1 = __importDefault(require("@jbrowse/core/util/Base1DViewModel"));
+var clone_1 = __importDefault(require("clone"));
+var file_saver_1 = require("file-saver");
+// icons
+var Icons_1 = require("@jbrowse/core/ui/Icons");
+var SyncAlt_1 = __importDefault(require("@mui/icons-material/SyncAlt"));
+var Visibility_1 = __importDefault(require("@mui/icons-material/Visibility"));
+var Label_1 = __importDefault(require("@mui/icons-material/Label"));
+var FolderOpen_1 = __importDefault(require("@mui/icons-material/FolderOpen"));
+var PhotoCamera_1 = __importDefault(require("@mui/icons-material/PhotoCamera"));
+var ZoomIn_1 = __importDefault(require("@mui/icons-material/ZoomIn"));
+var MenuOpen_1 = __importDefault(require("@mui/icons-material/MenuOpen"));
+// locals
+var LinearGenomeViewSvg_1 = require("./components/LinearGenomeViewSvg");
+Object.defineProperty(exports, "renderToSvg", { enumerable: true, get: function () { return LinearGenomeViewSvg_1.renderToSvg; } });
+var RefNameAutocomplete_1 = __importDefault(require("./components/RefNameAutocomplete"));
+exports.RefNameAutocomplete = RefNameAutocomplete_1.default;
+var SearchBox_1 = __importDefault(require("./components/SearchBox"));
+exports.SearchBox = SearchBox_1.default;
+var ExportSvgDialog_1 = __importDefault(require("./components/ExportSvgDialog"));
+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_1.assembleLocString)(__assign(__assign({}, block), { start: Math.round(block.start), end: Math.round(block.end), assemblyName: isSingleAssemblyName ? undefined : block.assemblyName }));
+    });
+    return locs.join(' ');
+}
+exports.HEADER_BAR_HEIGHT = 48;
+exports.HEADER_OVERVIEW_HEIGHT = 20;
+exports.SCALE_BAR_HEIGHT = 17;
+exports.RESIZE_HANDLE_HEIGHT = 3;
+exports.INTER_REGION_PADDING_WIDTH = 2;
+exports.SPACING = 7;
+exports.WIDGET_HEIGHT = 32;
+function localStorageGetItem(item) {
+    return typeof localStorage !== 'undefined'
+        ? localStorage.getItem(item)
+        : undefined;
+}
+function stateModelFactory(pluginManager) {
+    return mobx_state_tree_1.types
+        .compose(models_1.BaseViewModel, mobx_state_tree_1.types.model('LinearGenomeView', {
+        id: mst_1.ElementId,
+        type: mobx_state_tree_1.types.literal('LinearGenomeView'),
+        offsetPx: 0,
+        bpPerPx: 1,
+        displayedRegions: mobx_state_tree_1.types.array(mst_1.Region),
+        // we use an array for the tracks because the tracks are displayed in a
+        // specific order that we need to keep.
+        tracks: mobx_state_tree_1.types.array(pluginManager.pluggableMstType('track', 'stateModel')),
+        hideHeader: false,
+        hideHeaderOverview: false,
+        hideNoTracksActive: false,
+        trackSelectorType: mobx_state_tree_1.types.optional(mobx_state_tree_1.types.enumeration(['hierarchical']), 'hierarchical'),
+        trackLabels: mobx_state_tree_1.types.optional(mobx_state_tree_1.types.string, function () { return localStorageGetItem('lgv-trackLabels') || 'overlapping'; }),
+        showCenterLine: mobx_state_tree_1.types.optional(mobx_state_tree_1.types.boolean, function () {
+            var setting = localStorageGetItem('lgv-showCenterLine');
+            return setting !== undefined && setting !== null ? !!+setting : false;
+        }),
+        showCytobandsSetting: mobx_state_tree_1.types.optional(mobx_state_tree_1.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 exports.INTER_REGION_PADDING_WIDTH;
+        },
+        get assemblyNames() {
+            return __spreadArray([], __read(new Set(self.displayedRegions.map(function (region) { return region.assemblyName; }))), false);
+        },
+    }); })
+        .views(function (self) { return ({
+        get assemblyErrors() {
+            var assemblyManager = (0, util_1.getSession)(self).assemblyManager;
+            var assemblyNames = self.assemblyNames;
+            return assemblyNames
+                .map(function (a) { var _a; return (_a = assemblyManager.get(a)) === null || _a === void 0 ? void 0 : _a.error; })
+                .filter(function (f) { return !!f; })
+                .join(', ');
+        },
+        get assembliesInitialized() {
+            var assemblyManager = (0, util_1.getSession)(self).assemblyManager;
+            var assemblyNames = self.assemblyNames;
+            return assemblyNames.every(function (a) { var _a; return (_a = assemblyManager.get(a)) === null || _a === void 0 ? void 0 : _a.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 exports.SCALE_BAR_HEIGHT + exports.RESIZE_HANDLE_HEIGHT;
+        },
+        get headerHeight() {
+            if (self.hideHeader) {
+                return 0;
+            }
+            if (self.hideHeaderOverview) {
+                return exports.HEADER_BAR_HEIGHT;
+            }
+            return exports.HEADER_BAR_HEIGHT + exports.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 * exports.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 () {
+            return __assign(__assign({}, (0, tracks_1.getParentRenderProps)(self)), { bpPerPx: self.bpPerPx, highResolutionScaling: (0, configuration_1.getConf)((0, util_1.getSession)(self), 'highResolutionScaling') });
+        },
+        searchScope: function (assemblyName) {
+            return {
+                assemblyName: assemblyName,
+                includeAggregateIndexes: true,
+                tracks: self.tracks,
+            };
+        },
+        bpToPx: function (_a) {
+            var refName = _a.refName, coord = _a.coord, regionNumber = _a.regionNumber;
+            return (0, util_1.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 (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;
+                var snap = (0, mobx_state_tree_1.getSnapshot)(region);
+                return __assign(__assign({}, snap), { oob: true, coord: region.reversed
+                        ? Math.floor(region.end - offset) + 1
+                        : Math.floor(region.start + offset) + 1, offset: offset, index: 0 });
             }
-          }
-        });
-        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));
+            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) {
+                    var snap = (0, mobx_state_tree_1.getSnapshot)(region);
+                    return __assign(__assign({}, snap), { 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 region = self.displayedRegions[n - 1];
+                var len = region.end - region.start;
+                var offset = bp - bpSoFar + len;
+                var snap = (0, mobx_state_tree_1.getSnapshot)(region);
+                return __assign(__assign({}, snap), { oob: true, offset: offset, coord: region.reversed
+                        ? Math.floor(region.end - offset) + 1
+                        : Math.floor(region.start + offset) + 1, index: n - 1 });
+            }
+            return {
+                coord: 0,
+                index: 0,
+                refName: '',
+                oob: true,
+                assemblyName: '',
+                offset: 0,
+                start: 0,
+                end: 0,
+                reversed: false,
             };
-          }
-        });
-      },
-
-      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
+        },
+        getTrack: function (id) {
+            return self.tracks.find(function (t) { return t.configuration.trackId === id; });
+        },
+        rankSearchResults: function (results) {
+            // order of rank
+            var openTrackIds = self.tracks.map(function (track) { return track.configuration.trackId; });
+            results.forEach(function (result) {
+                if (openTrackIds.includes(result.trackId)) {
+                    result.updateScore(result.getScore() + 1);
+                }
             });
-            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;
+            return results;
+        },
+        // modifies view menu action onClick to apply to all tracks of same type
+        rewriteOnClicks: function (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_1 = action.onClick;
+                    action.onClick = function () {
+                        var args = [];
+                        for (var _i = 0; _i < arguments.length; _i++) {
+                            args[_i] = arguments[_i];
+                        }
+                        self.tracks.forEach(function (track) {
+                            if (track.type === trackType) {
+                                holdOnClick_1.apply(track, __spreadArray([track], __read(args), false));
+                            }
+                        });
+                    };
+                }
+            });
+        },
+        get trackTypeActions() {
+            var _this = this;
+            var allActions = new Map();
+            self.tracks.forEach(function (track) {
+                var trackInMap = allActions.get(track.type);
+                if (!trackInMap) {
+                    var viewMenuActions = (0, clone_1.default)(track.viewMenuActions);
+                    _this.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 (flag) {
+            self.showCytobandsSetting = flag;
+            localStorage.setItem('lgv-showCytobands', "".concat(+flag));
+        },
+        setWidth: function (newWidth) {
+            self.volatileWidth = newWidth;
+        },
+        setError: function (error) {
+            self.volatileError = error;
+        },
+        toggleHeader: function () {
+            self.hideHeader = !self.hideHeader;
+        },
+        toggleHeaderOverview: function () {
+            self.hideHeaderOverview = !self.hideHeaderOverview;
+        },
+        toggleNoTracksActive: function () {
+            self.hideNoTracksActive = !self.hideNoTracksActive;
+        },
+        scrollTo: function (offsetPx) {
+            var newOffsetPx = (0, util_1.clamp)(offsetPx, self.minOffset, self.maxOffset);
+            self.offsetPx = newOffsetPx;
+            return newOffsetPx;
+        },
+        zoomTo: function (bpPerPx) {
+            var newBpPerPx = (0, util_1.clamp)(bpPerPx, self.minBpPerPx, self.maxBpPerPx);
+            if (newBpPerPx === self.bpPerPx) {
+                return newBpPerPx;
             }
-
-            if (e === undefined) {
-              e = r.end;
+            var oldBpPerPx = self.bpPerPx;
+            self.bpPerPx = newBpPerPx;
+            if (Math.abs(oldBpPerPx - newBpPerPx) < 0.000001) {
+                console.warn('zoomTo bpPerPx rounding error');
+                return oldBpPerPx;
             }
-
-            if (s >= r.start && s <= r.end && e <= r.end && e >= r.start) {
-              return true;
+            // 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 (left, right) {
+            // sets offsets used in the get sequence dialog
+            self.leftOffset = left;
+            self.rightOffset = right;
+        },
+        setSearchResults: function (results, query) {
+            self.searchResults = results;
+            self.searchQuery = query;
+        },
+        setSequenceDialogOpen: function (open) {
+            self.seqDialogDisplayed = open;
+        },
+        setNewView: function (bpPerPx, offsetPx) {
+            this.zoomTo(bpPerPx);
+            this.scrollTo(offsetPx);
+        },
+        horizontallyFlip: function () {
+            self.displayedRegions = (0, mobx_state_tree_1.cast)(self.displayedRegions
+                .slice()
+                .reverse()
+                .map(function (region) { return (__assign(__assign({}, region), { reversed: !region.reversed })); }));
+            this.scrollTo(self.totalBp / self.bpPerPx - self.offsetPx - self.width);
+        },
+        showTrack: function (trackId, initialSnapshot, displayInitialSnapshot) {
+            if (initialSnapshot === void 0) { initialSnapshot = {}; }
+            if (displayInitialSnapshot === void 0) { displayInitialSnapshot = {}; }
+            var schema = pluginManager.pluggableConfigSchemaType('track');
+            var conf = (0, mobx_state_tree_1.resolveIdentifier)(schema, (0, mobx_state_tree_1.getRoot)(self), trackId);
+            if (!conf) {
+                throw new Error("Could not resolve identifier \"".concat(trackId, "\""));
             }
-
-            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;
+            var trackType = pluginManager.getTrackType(conf === null || conf === void 0 ? void 0 : conf.type);
+            if (!trackType) {
+                throw new Error("Unknown track type ".concat(conf.type));
             }
-
-            if (!refNameMatched) {
-              throw new Error("could not find a region with refName \"".concat(refName, "\""));
+            var viewType = pluginManager.getViewType(self.type);
+            var supportedDisplays = viewType.displayTypes.map(function (d) { return d.name; });
+            var displayConf = conf.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));
             }
-
-            if (s === undefined) {
-              throw new Error("could not find a region with refName \"".concat(refName, "\" that contained an end position ").concat(e));
+            var t = self.tracks.filter(function (t) { return t.configuration === conf; });
+            if (t.length === 0) {
+                var track = trackType.stateModel.create(__assign(__assign({}, initialSnapshot), { type: conf.type, configuration: conf, displays: [
+                        __assign({ type: displayConf.type, configuration: displayConf }, displayInitialSnapshot),
+                    ] }));
+                self.tracks.push(track);
+                return track;
             }
-
-            if (e === undefined) {
-              throw new Error("could not find a region with refName \"".concat(refName, "\" that contained a start position ").concat(s + 1));
+            return t[0];
+        },
+        hideTrack: function (trackId) {
+            var schema = pluginManager.pluggableConfigSchemaType('track');
+            var conf = (0, mobx_state_tree_1.resolveIdentifier)(schema, (0, mobx_state_tree_1.getRoot)(self), trackId);
+            var t = self.tracks.filter(function (t) { return t.configuration === conf; });
+            (0, mobx_1.transaction)(function () { return t.forEach(function (t) { return self.tracks.remove(t); }); });
+            return t.length;
+        },
+    }); })
+        .actions(function (self) { return ({
+        moveTrack: function (movingId, targetId) {
+            var oldIndex = self.tracks.findIndex(function (track) { return track.id === movingId; });
+            if (oldIndex === -1) {
+                throw new Error("Track ID ".concat(movingId, " not found"));
             }
-
-            if (index === -1) {
-              throw new Error("could not find a region that completely contained \"".concat((0, _util.assembleLocString)(firstLocation), "\""));
+            var newIndex = self.tracks.findIndex(function (track) { return track.id === targetId; });
+            if (newIndex === -1) {
+                throw new Error("Track ID ".concat(targetId, " not found"));
             }
-
-            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 track = (0, mobx_state_tree_1.getSnapshot)(self.tracks[oldIndex]);
+            self.tracks.splice(oldIndex, 1);
+            self.tracks.splice(newIndex, 0, track);
+        },
+        closeView: function () {
+            var parent = (0, util_1.getContainingView)(self);
+            if (parent) {
+                // I am embedded in a some other view
+                if ((0, util_1.isViewContainer)(parent)) {
+                    parent.removeView(self);
+                }
             }
-
-            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"));
-              }
+            else {
+                // I am part of a session
+                (0, util_1.getSession)(self).removeView(self);
             }
-
-            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;
+        },
+        toggleTrack: function (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);
             }
-          }
-        }
-      },
-
-      /**
-       * 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;
+        },
+        setTrackLabels: function (setting) {
+            self.trackLabels = setting;
+            localStorage.setItem('lgv-trackLabels', setting);
+        },
+        toggleCenterLine: function () {
+            self.showCenterLine = !self.showCenterLine;
+            localStorage.setItem('lgv-showCenterLine', "".concat(+self.showCenterLine));
+        },
+        setDisplayedRegions: function (regions) {
+            self.displayedRegions = (0, mobx_state_tree_1.cast)(regions);
+            self.zoomTo(self.bpPerPx);
+        },
+        activateTrackSelector: function () {
+            if (self.trackSelectorType === 'hierarchical') {
+                var session = (0, util_1.getSession)(self);
+                if ((0, util_1.isSessionModelWithWidgets)(session)) {
+                    var selector = session.addWidget('HierarchicalTrackSelectorWidget', 'hierarchicalTrackSelector', { view: self });
+                    session.showWidget(selector);
+                    return selector;
+                }
             }
-          }
-
-          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
-              }];
+            throw new Error("invalid track selector type ".concat(self.trackSelectorType));
+        },
+        navToLocString: function (locString, optAssemblyName) {
+            var assemblyNames = self.assemblyNames;
+            var assemblyManager = (0, util_1.getSession)(self).assemblyManager;
+            var isValidRefName = assemblyManager.isValidRefName;
+            var assemblyName = optAssemblyName || assemblyNames[0];
+            var parsedLocStrings;
+            var inputs = locString
+                .split(/(\s+)/)
+                .map(function (f) { return f.trim(); })
+                .filter(function (f) { return !!f; });
+            // first try interpreting as a whitespace-separated sequence of
+            // multiple locstrings
+            try {
+                parsedLocStrings = inputs.map(function (l) {
+                    return (0, util_1.parseLocString)(l, function (ref) { return isValidRefName(ref, assemblyName); });
+                });
+            }
+            catch (e) {
+                // if this fails, try interpreting as a whitespace-separated refname,
+                // start, end if start and end are integer inputs
+                var _a = __read(inputs, 3), refName = _a[0], start = _a[1], end = _a[2];
+                if ("".concat(e).match(/Unknown reference sequence/) &&
+                    Number.isInteger(+start) &&
+                    Number.isInteger(+end)) {
+                    parsedLocStrings = [
+                        (0, util_1.parseLocString)(refName + ':' + start + '..' + end, function (ref) {
+                            return isValidRefName(ref, assemblyName);
+                        }),
+                    ];
+                }
+                else {
+                    throw e;
+                }
+            }
+            var locations = parsedLocStrings === null || parsedLocStrings === void 0 ? void 0 : 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 __assign(__assign({}, region), { assemblyName: asmName, parentRegion: parentRegion });
             });
-          }
-        }, {
-          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');
+            if (locations.length === 1) {
+                var loc = locations[0];
+                this.setDisplayedRegions([
+                    __assign({ reversed: loc.reversed }, loc.parentRegion),
+                ]);
+                var start = loc.start, end = loc.end, parentRegion = loc.parentRegion;
+                this.navTo(__assign(__assign({}, loc), { start: (0, util_1.clamp)(start !== null && start !== void 0 ? start : 0, 0, parentRegion.end), end: (0, util_1.clamp)(end !== null && end !== void 0 ? end : parentRegion.end, 0, parentRegion.end) }));
             }
-          }, {
-            label: 'Offset',
-            icon: _Visibility.default,
-            type: 'radio',
-            checked: self.trackLabels === 'offset',
-            onClick: function onClick() {
-              return self.setTrackLabels('offset');
+            else {
+                this.setDisplayedRegions(
+                // @ts-ignore
+                locations.map(function (r) { return (r.start === undefined ? r.parentRegion : r); }));
+                this.showAllRegions();
             }
-          }, {
-            label: 'Hidden',
-            icon: _Visibility.default,
-            type: 'radio',
-            checked: self.trackLabels === 'hidden',
-            onClick: function onClick() {
-              return self.setTrackLabels('hidden');
+        },
+        /**
+         * 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 (query) {
+            this.navToMultiple([query]);
+        },
+        navToMultiple: function (locations) {
+            var firstLocation = locations[0];
+            var refName = firstLocation.refName;
+            var start = firstLocation.start, end = firstLocation.end, _a = firstLocation.assemblyName, assemblyName = _a === void 0 ? self.assemblyNames[0] : _a;
+            if (start !== undefined && end !== undefined && start > end) {
+                throw new Error("start \"".concat(start + 1, "\" is greater than end \"").concat(end, "\""));
             }
-          }]
-        }].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);
-              });
+            var session = (0, util_1.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 (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_1.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_1.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_1 = locations[locationIndex];
+                        var region = self.displayedRegions[index + locationIndex];
+                        locationStart = location_1.start || region.start;
+                        locationEnd = location_1.end || region.end;
+                        if (location_1.refName !== region.refName) {
+                            throw new Error("Entered location ".concat((0, util_1.assembleLocString)(location_1), " 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 (leftPx, rightPx) {
+            var _a;
+            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) {
+                ;
+                _a = __read([rightPx, leftPx], 2), leftPx = _a[0], rightPx = _a[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);
             }
-          }
-        } catch (err) {
-          _iterator.e(err);
-        } finally {
-          _iterator.f();
+            else {
+                var session = (0, util_1.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 (leftOffset, rightOffset) {
+            var snap = (0, mobx_state_tree_1.getSnapshot)(self);
+            var simView = Base1DViewModel_1.default.create(__assign(__assign({}, snap), { interRegionPaddingWidth: self.interRegionPaddingWidth }));
+            simView.setVolatileWidth(self.width);
+            simView.zoomToDisplayedRegions(leftOffset, rightOffset);
+            return simView.dynamicBlocks.contentBlocks.map(function (region) { return (__assign(__assign({}, 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 (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 (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 (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 (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 () {
+            var centerBp = self.totalBp / 2;
+            self.scrollTo(Math.round(centerBp / self.bpPerPx - self.width / 2));
+        },
+        showAllRegions: function () {
+            self.zoomTo(self.maxBpPerPx);
+            this.center();
+        },
+        showAllRegionsInAssembly: function (assemblyName) {
+            var _a;
+            var session = (0, util_1.getSession)(self);
+            var assemblyManager = session.assemblyManager;
+            if (!assemblyName) {
+                var assemblyNames = __spreadArray([], __read(new Set(self.displayedRegions.map(function (region) { return region.assemblyName; }))), false);
+                if (assemblyNames.length > 1) {
+                    session.notify("Can't perform this with multiple assemblies currently");
+                    return;
+                }
+                ;
+                _a = __read(assemblyNames, 1), assemblyName = _a[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 (idx) {
+            self.draggingTrackId = idx;
+        },
+        setScaleFactor: function (factor) {
+            self.scaleFactor = factor;
+        },
+    }); })
+        .actions(function (self) {
+        var cancelLastAnimation = function () { };
+        function slide(viewWidths) {
+            var _a = __read((0, util_1.springAnimate)(self.offsetPx, self.offsetPx + self.width * viewWidths, self.scrollTo), 2), animate = _a[0], cancelAnimation = _a[1];
+            cancelLastAnimation();
+            cancelLastAnimation = cancelAnimation;
+            animate();
         }
-
-        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 { slide: slide };
+    })
+        .actions(function (self) {
+        var cancelLastAnimation = function () { };
+        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 _a = __read((0, util_1.springAnimate)(1, factor, self.setScaleFactor, function () {
+                self.zoomTo(targetBpPerPx);
+                self.setScaleFactor(1);
+            }), 2), animate = _a[0], cancelAnimation = _a[1];
+            cancelLastAnimation();
+            cancelLastAnimation = cancelAnimation;
+            animate();
         }
-
-        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, opts.filename || 'image.svg');
-
-                case 6:
-                case "end":
-                  return _context.stop();
-              }
+        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 assemblyManager = (0, util_1.getSession)(self).assemblyManager;
+            var assemblyNames = self.assemblyNames;
+            return assemblyNames.some(function (asm) { var _a, _b; return (_b = (_a = assemblyManager.get(asm)) === null || _a === void 0 ? void 0 : _a.cytobands) === null || _b === void 0 ? void 0 : _b.length; });
+        },
+        get cytobandOffset() {
+            return this.showCytobands
+                ? (0, util_1.measureText)(self.displayedRegions[0].refName, 12) + 15
+                : 0;
+        },
+    }); })
+        .views(function (self) { return ({
+        menuItems: function () {
+            var e_1, _a;
+            var canShowCytobands = self.canShowCytobands, showCytobands = self.showCytobands;
+            var menuItems = __spreadArray([
+                {
+                    label: 'Return to import form',
+                    onClick: function () {
+                        (0, util_1.getSession)(self).queueDialog(function (handleClose) { return [
+                            ui_1.ReturnToImportFormDialog,
+                            { model: self, handleClose: handleClose },
+                        ]; });
+                    },
+                    icon: FolderOpen_1.default,
+                },
+                {
+                    label: 'Export SVG',
+                    icon: PhotoCamera_1.default,
+                    onClick: function () {
+                        (0, util_1.getSession)(self).queueDialog(function (handleClose) { return [
+                            ExportSvgDialog_1.default,
+                            { model: self, handleClose: handleClose },
+                        ]; });
+                    },
+                },
+                {
+                    label: 'Open track selector',
+                    onClick: self.activateTrackSelector,
+                    icon: Icons_1.TrackSelector,
+                },
+                {
+                    label: 'Horizontally flip',
+                    icon: SyncAlt_1.default,
+                    onClick: self.horizontallyFlip,
+                },
+                { type: 'divider' },
+                {
+                    label: 'Show all regions in assembly',
+                    icon: Visibility_1.default,
+                    onClick: self.showAllRegionsInAssembly,
+                },
+                {
+                    label: 'Show center line',
+                    icon: Visibility_1.default,
+                    type: 'checkbox',
+                    checked: self.showCenterLine,
+                    onClick: self.toggleCenterLine,
+                },
+                {
+                    label: 'Show header',
+                    icon: Visibility_1.default,
+                    type: 'checkbox',
+                    checked: !self.hideHeader,
+                    onClick: self.toggleHeader,
+                },
+                {
+                    label: 'Show header overview',
+                    icon: Visibility_1.default,
+                    type: 'checkbox',
+                    checked: !self.hideHeaderOverview,
+                    onClick: self.toggleHeaderOverview,
+                    disabled: self.hideHeader,
+                },
+                {
+                    label: 'Show no tracks active button',
+                    icon: Visibility_1.default,
+                    type: 'checkbox',
+                    checked: !self.hideNoTracksActive,
+                    onClick: self.toggleNoTracksActive,
+                },
+                {
+                    label: 'Track labels',
+                    icon: Label_1.default,
+                    subMenu: [
+                        {
+                            label: 'Overlapping',
+                            icon: Visibility_1.default,
+                            type: 'radio',
+                            checked: self.trackLabels === 'overlapping',
+                            onClick: function () { return self.setTrackLabels('overlapping'); },
+                        },
+                        {
+                            label: 'Offset',
+                            icon: Visibility_1.default,
+                            type: 'radio',
+                            checked: self.trackLabels === 'offset',
+                            onClick: function () { return self.setTrackLabels('offset'); },
+                        },
+                        {
+                            label: 'Hidden',
+                            icon: Visibility_1.default,
+                            type: 'radio',
+                            checked: self.trackLabels === 'hidden',
+                            onClick: function () { return self.setTrackLabels('hidden'); },
+                        },
+                    ],
+                }
+            ], __read((canShowCytobands
+                ? [
+                    {
+                        label: showCytobands ? 'Hide ideogram' : 'Show ideograms',
+                        onClick: function () {
+                            self.setShowCytobands(!showCytobands);
+                        },
+                    },
+                ]
+                : [])), false);
+            try {
+                // add track's view level menu options
+                for (var _b = __values(self.trackTypeActions.entries()), _c = _b.next(); !_c.done; _c = _b.next()) {
+                    var _d = __read(_c.value, 2), key = _d[0], value = _d[1];
+                    if (value.length) {
+                        menuItems.push({ type: 'divider' }, { type: 'subHeader', label: key });
+                        value.forEach(function (action) {
+                            menuItems.push(action);
+                        });
+                    }
+                }
             }
-          }, _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);
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+                }
+                finally { if (e_1) throw e_1.error; }
             }
-          }
-        }, {
-          label: 'Get sequence',
-          icon: _MenuOpen.default,
-          onClick: function onClick() {
-            self.setSequenceDialogOpen(true);
-          }
-        }];
-      }
-    };
-  });
-}
+            return menuItems;
+        },
+    }); })
+        .views(function (self) {
+        var currentlyCalculatedStaticBlocks;
+        var stringifiedCurrentlyCalculatedStaticBlocks = '';
+        return {
+            get staticBlocks() {
+                var ret = (0, calculateStaticBlocks_1.default)(self);
+                var sret = JSON.stringify(ret);
+                if (stringifiedCurrentlyCalculatedStaticBlocks !== sret) {
+                    currentlyCalculatedStaticBlocks = ret;
+                    stringifiedCurrentlyCalculatedStaticBlocks = sret;
+                }
+                return currentlyCalculatedStaticBlocks;
+            },
+            get dynamicBlocks() {
+                return (0, calculateDynamicBlocks_1.default)(self);
+            },
+            get roundedDynamicBlocks() {
+                return this.dynamicBlocks.contentBlocks.map(function (block) {
+                    return __assign(__assign({}, 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 () {
+            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 (blocks) {
+            self.coarseDynamicBlocks = blocks.contentBlocks;
+            self.coarseTotalBp = blocks.totalBp;
+        },
+        afterAttach: function () {
+            var _this = this;
+            (0, mobx_state_tree_1.addDisposer)(self, (0, mobx_1.autorun)(function () {
+                if (self.initialized) {
+                    _this.setCoarseDynamicBlocks(self.dynamicBlocks);
+                }
+            }, { delay: 150 }));
+        },
+    }); })
+        .actions(function (self) { return ({
+        exportSvg: function (opts) {
+            if (opts === void 0) { opts = {}; }
+            return __awaiter(this, void 0, void 0, function () {
+                var html, blob;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, (0, LinearGenomeViewSvg_1.renderToSvg)(self, opts)];
+                        case 1:
+                            html = _a.sent();
+                            blob = new Blob([html], { type: 'image/svg+xml' });
+                            (0, file_saver_1.saveAs)(blob, opts.filename || 'image.svg');
+                            return [2 /*return*/];
+                    }
+                });
+            });
+        },
+    }); })
+        .views(function (self) { return ({
+        rubberBandMenuItems: function () {
+            return [
+                {
+                    label: 'Zoom to region',
+                    icon: ZoomIn_1.default,
+                    onClick: function () {
+                        var leftOffset = self.leftOffset, rightOffset = self.rightOffset;
+                        if (leftOffset && rightOffset) {
+                            self.moveTo(leftOffset, rightOffset);
+                        }
+                    },
+                },
+                {
+                    label: 'Get sequence',
+                    icon: MenuOpen_1.default,
+                    onClick: function () {
+                        self.setSequenceDialogOpen(true);
+                    },
+                },
+            ];
+        },
+    }); });
+}
+exports.stateModelFactory = stateModelFactory;
+var LinearGenomeView_1 = require("./components/LinearGenomeView");
+Object.defineProperty(exports, "ReactComponent", { enumerable: true, get: function () { return __importDefault(LinearGenomeView_1).default; } });
+//# sourceMappingURL=index.js.map