@jbrowse/plugin-circular-view 1.5.9 → 1.6.4

package/dist/plugin-circular-view.cjs.development.js

@@ -6,19 +6,22 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'defau
 
 var React = require('react');
 var React__default = _interopDefault(React);
+var mobx = require('mobx');
 var util = require('@jbrowse/core/util');
 var Plugin = _interopDefault(require('@jbrowse/core/Plugin'));
 var ViewType = _interopDefault(require('@jbrowse/core/pluggableElementTypes/ViewType'));
 var DataUsageIcon = _interopDefault(require('@material-ui/icons/DataUsage'));
 var mobxStateTree = require('mobx-state-tree');
 var mst = require('@jbrowse/core/util/types/mst');
-var mobx = require('mobx');
 var configuration = require('@jbrowse/core/configuration');
 var models = require('@jbrowse/core/pluggableElementTypes/models');
 var CircularChordRendererType = _interopDefault(require('@jbrowse/core/pluggableElementTypes/renderers/CircularChordRendererType'));
 var simpleFeature = require('@jbrowse/core/util/simpleFeature');
 var tracks = require('@jbrowse/core/util/tracks');
 var mobxReact = require('mobx-react');
+var ui = require('@jbrowse/core/ui');
+var core = require('@material-ui/core');
+var colors = require('@material-ui/core/colors');
 var ZoomOut = _interopDefault(require('@material-ui/icons/ZoomOut'));
 var ZoomIn = _interopDefault(require('@material-ui/icons/ZoomIn'));
 var RotateLeft = _interopDefault(require('@material-ui/icons/RotateLeft'));
@@ -26,11 +29,9 @@ var RotateRight = _interopDefault(require('@material-ui/icons/RotateRight'));
 var LockOutline = _interopDefault(require('@material-ui/icons/LockOutlined'));
 var LockOpen = _interopDefault(require('@material-ui/icons/LockOpen'));
 var Icons = require('@jbrowse/core/ui/Icons');
-var core = require('@material-ui/core');
-var colors = require('@material-ui/core/colors');
-var ui = require('@jbrowse/core/ui');
 var color = require('@jbrowse/core/util/color');
 var styles = require('@material-ui/core/styles');
+var ErrorMessage = _interopDefault(require('@jbrowse/core/ui/ErrorMessage'));
 var AssemblySelector = _interopDefault(require('@jbrowse/core/ui/AssemblySelector'));
 
 function ownKeys(object, enumerableOnly) {
@@ -140,14 +141,14 @@ function _inherits(subClass, superClass) {
     throw new TypeError("Super expression must either be null or a function");
   }
 
+  subClass.prototype = Object.create(superClass && superClass.prototype, {
+    constructor: {
+      value: subClass,
+      writable: true,
+      configurable: true
+    }
+  });
   Object.defineProperty(subClass, "prototype", {
-    value: Object.create(superClass && superClass.prototype, {
-      constructor: {
-        value: subClass,
-        writable: true,
-        configurable: true
-      }
-    }),
     writable: false
   });
   if (superClass) _setPrototypeOf(subClass, superClass);
@@ -387,1758 +388,1759 @@ function _createForOfIteratorHelper(o, allowArrayLike) {
   };
 }
 
-function findCircleIntersectionX(y, cx, cy, r, resultArray) {
-  var d = Math.abs(y - cy);
-
-  if (d > r) {
-    return;
-  }
-
-  if (d === r) {
-    resultArray.push([cx, y]);
-  }
-
-  var solution = Math.sqrt(r * r - d * d);
-  resultArray.push([cx - solution, y]);
-  resultArray.push([cx + solution, y]);
+function createCommonjsModule(fn, module) {
+	return module = { exports: {} }, fn(module, module.exports), module.exports;
 }
 
-function findCircleIntersectionY(x, cx, cy, r, resultArray) {
-  var d = Math.abs(x - cx);
+var runtime_1 = /*#__PURE__*/createCommonjsModule(function (module) {
+  /**
+   * Copyright (c) 2014-present, Facebook, Inc.
+   *
+   * This source code is licensed under the MIT license found in the
+   * LICENSE file in the root directory of this source tree.
+   */
+  var runtime = function (exports) {
 
-  if (d > r) {
-    return;
-  }
+    var Op = Object.prototype;
+    var hasOwn = Op.hasOwnProperty;
+    var undefined$1; // More compressible than void 0.
 
-  if (d === r) {
-    resultArray.push([x, cy]);
-  }
+    var $Symbol = typeof Symbol === "function" ? Symbol : {};
+    var iteratorSymbol = $Symbol.iterator || "@@iterator";
+    var asyncIteratorSymbol = $Symbol.asyncIterator || "@@asyncIterator";
+    var toStringTagSymbol = $Symbol.toStringTag || "@@toStringTag";
 
-  var solution = Math.sqrt(r * r - d * d);
-  resultArray.push([x, cy - solution]);
-  resultArray.push([x, cy + solution]);
-}
+    function define(obj, key, value) {
+      Object.defineProperty(obj, key, {
+        value: value,
+        enumerable: true,
+        configurable: true,
+        writable: true
+      });
+      return obj[key];
+    }
 
-function cartesianToTheta(x, y) {
-  var theta = (Math.atan(y / x) + 2 * Math.PI) % (2 * Math.PI);
+    try {
+      // IE 8 has a broken Object.defineProperty that only works on DOM objects.
+      define({}, "");
+    } catch (err) {
+      define = function define(obj, key, value) {
+        return obj[key] = value;
+      };
+    }
 
-  if (x < 0) {
-    if (y <= 0) {
-      theta += Math.PI;
-    } else {
-      theta -= Math.PI;
+    function wrap(innerFn, outerFn, self, tryLocsList) {
+      // If outerFn provided and outerFn.prototype is a Generator, then outerFn.prototype instanceof Generator.
+      var protoGenerator = outerFn && outerFn.prototype instanceof Generator ? outerFn : Generator;
+      var generator = Object.create(protoGenerator.prototype);
+      var context = new Context(tryLocsList || []); // The ._invoke method unifies the implementations of the .next,
+      // .throw, and .return methods.
+
+      generator._invoke = makeInvokeMethod(innerFn, self, context);
+      return generator;
     }
-  }
 
-  return theta;
-}
+    exports.wrap = wrap; // Try/catch helper to minimize deoptimizations. Returns a completion
+    // record like context.tryEntries[i].completion. This interface could
+    // have been (and was previously) designed to take a closure to be
+    // invoked without arguments, but in all the cases we care about we
+    // already have an existing method we want to call, so there's no need
+    // to create a new function object. We can even get away with assuming
+    // the method takes exactly one argument, since that happens to be true
+    // in every case, so we don't have to touch the arguments object. The
+    // only additional allocation required is the completion record, which
+    // has a stable shape and so hopefully should be cheap to allocate.
 
-function cartesianToPolar(x, y) {
-  var rho = Math.sqrt(x * x + y * y);
+    function tryCatch(fn, obj, arg) {
+      try {
+        return {
+          type: "normal",
+          arg: fn.call(obj, arg)
+        };
+      } catch (err) {
+        return {
+          type: "throw",
+          arg: err
+        };
+      }
+    }
 
-  if (rho === 0) {
-    return [0, 0];
-  }
+    var GenStateSuspendedStart = "suspendedStart";
+    var GenStateSuspendedYield = "suspendedYield";
+    var GenStateExecuting = "executing";
+    var GenStateCompleted = "completed"; // Returning this object from the innerFn has the same effect as
+    // breaking out of the dispatch switch statement.
 
-  var theta = cartesianToTheta(x, y);
-  return [rho, theta];
-}
-var twoPi = 2 * Math.PI;
-function thetaRangesOverlap(r1start, r1length, r2start, r2length) {
-  if (r1length <= 0 || r2length <= 0) {
-    return false;
-  }
+    var ContinueSentinel = {}; // Dummy constructor functions that we use as the .constructor and
+    // .constructor.prototype properties for functions that return Generator
+    // objects. For full spec compliance, you may wish to configure your
+    // minifier not to mangle the names of these two functions.
 
-  if (r1length + 0.0001 >= twoPi || r2length + 0.0001 >= twoPi) {
-    return true;
-  } // put both range starts between 2π and 4π
+    function Generator() {}
 
+    function GeneratorFunction() {}
 
-  r1start = (r1start % twoPi + twoPi) % twoPi + twoPi;
-  r2start = (r2start % twoPi + twoPi) % twoPi + twoPi;
+    function GeneratorFunctionPrototype() {} // This is a polyfill for %IteratorPrototype% for environments that
+    // don't natively support it.
 
-  if (r1start < r2start + r2length && r1start + r1length > r2start) {
-    return true;
-  } // move r2 2π to the left and check
 
+    var IteratorPrototype = {};
+    define(IteratorPrototype, iteratorSymbol, function () {
+      return this;
+    });
+    var getProto = Object.getPrototypeOf;
+    var NativeIteratorPrototype = getProto && getProto(getProto(values([])));
 
-  r2start -= twoPi;
+    if (NativeIteratorPrototype && NativeIteratorPrototype !== Op && hasOwn.call(NativeIteratorPrototype, iteratorSymbol)) {
+      // This environment has a native %IteratorPrototype%; use it instead
+      // of the polyfill.
+      IteratorPrototype = NativeIteratorPrototype;
+    }
 
-  if (r1start < r2start + r2length && r1start + r1length > r2start) {
-    return true;
-  } // move it 2π to the right and check
+    var Gp = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(IteratorPrototype);
+    GeneratorFunction.prototype = GeneratorFunctionPrototype;
+    define(Gp, "constructor", GeneratorFunctionPrototype);
+    define(GeneratorFunctionPrototype, "constructor", GeneratorFunction);
+    GeneratorFunction.displayName = define(GeneratorFunctionPrototype, toStringTagSymbol, "GeneratorFunction"); // Helper for defining the .next, .throw, and .return methods of the
+    // Iterator interface in terms of a single ._invoke method.
 
+    function defineIteratorMethods(prototype) {
+      ["next", "throw", "return"].forEach(function (method) {
+        define(prototype, method, function (arg) {
+          return this._invoke(method, arg);
+        });
+      });
+    }
 
-  r2start += twoPi + twoPi;
-  return r1start < r2start + r2length && r1start + r1length > r2start;
-} // return which arc range has any part of the circle visible in the viewport
+    exports.isGeneratorFunction = function (genFun) {
+      var ctor = typeof genFun === "function" && genFun.constructor;
+      return ctor ? ctor === GeneratorFunction || // For the native GeneratorFunction constructor, the best we can
+      // do is to check its .name property.
+      (ctor.displayName || ctor.name) === "GeneratorFunction" : false;
+    };
 
-function viewportVisibleSection(viewSides, circleCenter, circleRadius) {
-  var _viewSides = _slicedToArray(viewSides, 4),
-      viewL = _viewSides[0],
-      viewR = _viewSides[1],
-      viewT = _viewSides[2],
-      viewB = _viewSides[3];
+    exports.mark = function (genFun) {
+      if (Object.setPrototypeOf) {
+        Object.setPrototypeOf(genFun, GeneratorFunctionPrototype);
+      } else {
+        genFun.__proto__ = GeneratorFunctionPrototype;
+        define(genFun, toStringTagSymbol, "GeneratorFunction");
+      }
 
-  var _circleCenter = _slicedToArray(circleCenter, 2),
-      cx = _circleCenter[0],
-      cy = _circleCenter[1]; // transform coordinate system to center of circle
+      genFun.prototype = Object.create(Gp);
+      return genFun;
+    }; // Within the body of any async function, `await x` is transformed to
+    // `yield regeneratorRuntime.awrap(x)`, so that the runtime can test
+    // `hasOwn.call(value, "__await")` to determine if the yielded value is
+    // meant to be awaited.
 
 
-  viewL -= cx;
-  viewR -= cx;
-  viewT -= cy;
-  viewB -= cy;
-  var centerIsInsideViewport = viewL < 0 && viewR > 0 && viewT < 0 && viewB > 0;
+    exports.awrap = function (arg) {
+      return {
+        __await: arg
+      };
+    };
 
-  if (centerIsInsideViewport) {
-    var _vertices = [[viewL, viewT], [viewR, viewT], [viewL, viewB], [viewR, viewB]];
-    var maxRho = -Infinity;
+    function AsyncIterator(generator, PromiseImpl) {
+      function invoke(method, arg, resolve, reject) {
+        var record = tryCatch(generator[method], generator, arg);
 
-    for (var i = 0; i < _vertices.length; i += 1) {
-      var _vertices$i = _slicedToArray(_vertices[i], 2),
-          x = _vertices$i[0],
-          y = _vertices$i[1];
+        if (record.type === "throw") {
+          reject(record.arg);
+        } else {
+          var result = record.arg;
+          var value = result.value;
 
-      var rho = Math.sqrt(x * x + y * y);
+          if (value && typeof value === "object" && hasOwn.call(value, "__await")) {
+            return PromiseImpl.resolve(value.__await).then(function (value) {
+              invoke("next", value, resolve, reject);
+            }, function (err) {
+              invoke("throw", err, resolve, reject);
+            });
+          }
 
-      if (rho > maxRho) {
-        maxRho = rho;
+          return PromiseImpl.resolve(value).then(function (unwrapped) {
+            // When a yielded Promise is resolved, its final value becomes
+            // the .value of the Promise<{value,done}> result for the
+            // current iteration.
+            result.value = unwrapped;
+            resolve(result);
+          }, function (error) {
+            // If a rejected Promise was yielded, throw the rejection back
+            // into the async generator function so it can be handled there.
+            return invoke("throw", error, resolve, reject);
+          });
+        }
       }
-    }
 
-    return {
-      rho: [0, Math.min(circleRadius, maxRho)],
-      theta: [0, 2 * Math.PI]
-    };
-  } // const viewportCompletelyContainsCircle =
-  //   circleCenter[0] - viewL >= circleRadius &&
-  //   viewR - circleCenter[0] >= circleRadius &&
-  //   circleCenter[1] - viewT >= circleRadius &&
-  //   viewB - circleCenter[1] >= circleRadius
-  // if (viewportCompletelyContainsCircle) {
-  //   return [0, 2 * Math.PI]
-  // }
-  // const distToCenterSquared = ([x, y]) => {
-  //   const [cx, cy] = circleCenter
-  //   const sq = n => n * n
-  //   return sq(x - cx) + sq(y - cy)
-  // }
-  // const circleRadiusSquared = circleRadius * circleRadius
-  // const tlInside = distToCenterSquared([viewL, viewT]) <= circleRadiusSquared
-  // const trInside = distToCenterSquared([viewR, viewT]) <= circleRadiusSquared
-  // const blInside = distToCenterSquared([viewL, viewB]) <= circleRadiusSquared
-  // const brInside = distToCenterSquared([viewR, viewB]) <= circleRadiusSquared
-  // const noIntersection = !tlInside && !trInside && !blInside && !brInside
-  // if (noIntersection) return undefined
-  // const circleCompletelyContainsViewport =
-  //   tlInside && trInside && blInside && brInside
-  // if (circleCompletelyContainsViewport) {
-  //   // viewport is in the circle, but the center is not in it, so take max
-  //   // and min of thetas to the center
-  //   const thetas = [
-  //     Math.atan(viewT / viewL),
-  //     Math.atan(viewT / viewR),
-  //     Math.atan(viewB / viewL),
-  //     Math.atan(viewB / viewR),
-  //   ]
-  //   return [Math.min(...thetas), Math.max(...thetas)]
-  // }
-  // if we get here, the viewport is partly in, partly out of the circle
-  // const viewLIntersects = Math.abs(viewL - circleCenter[0]) <= circleRadius
-  // const viewRIntersects = Math.abs(viewR - circleCenter[0]) <= circleRadius
-  // const viewTIntersects = Math.abs(viewT - circleCenter[1]) <= circleRadius
-  // const viewBIntersects = Math.abs(viewB - circleCenter[1]) <= circleRadius
-  // const numIntersectingSides =
-  //   Number(viewLIntersects) +
-  //   Number(viewRIntersects) +
-  //   Number(viewTIntersects) +
-  //   Number(viewBIntersects)
-  // if (numIntersectingSides === 4) return [0, 2 * Math.PI]
-  // if (numIntersectingSides === 3) {
-  //   // TODO calculate the thetas of the
-  // } else if (numIntersectingSides === 2) {
-  //   // TODO calculate the thetas of the 2 intersection points
-  // } else if (numIntersectingSides === 1) {
-  //   // TODO calculate the thetas of the 1-2 intersection points of the line, and the angle between
-  // }
-  // make a list of vertices-of-interest that lie inside both shapes to examine
-  // to determine the range covered by their intersection
-  // transform coordinates to have the circle as the origin and find the intersections
-  // of the circle and the view rectangle
+      var previousPromise;
 
+      function enqueue(method, arg) {
+        function callInvokeWithMethodAndArg() {
+          return new PromiseImpl(function (resolve, reject) {
+            invoke(method, arg, resolve, reject);
+          });
+        }
 
-  var vertices = [[viewL, viewT], [viewR, viewT], [viewL, viewB], [viewR, viewB]];
-  findCircleIntersectionY(viewL, 0, 0, circleRadius, vertices);
-  findCircleIntersectionY(viewR, 0, 0, circleRadius, vertices);
-  findCircleIntersectionX(viewT, 0, 0, circleRadius, vertices);
-  findCircleIntersectionX(viewB, 0, 0, circleRadius, vertices); // for each edge, also look at the closest point to center if it is inside the circle
+        return previousPromise = // If enqueue has been called before, then we want to wait until
+        // all previous Promises have been resolved before calling invoke,
+        // so that results are always delivered in the correct order. If
+        // enqueue has not been called before, then it is important to
+        // call invoke immediately, without waiting on a callback to fire,
+        // so that the async generator function has the opportunity to do
+        // any necessary setup in a predictable way. This predictability
+        // is why the Promise constructor synchronously invokes its
+        // executor callback, and why async functions synchronously
+        // execute code before the first await. Since we implement simple
+        // async functions in terms of async generators, it is especially
+        // important to get this right, even though it requires care.
+        previousPromise ? previousPromise.then(callInvokeWithMethodAndArg, // Avoid propagating failures to Promises returned by later
+        // invocations of the iterator.
+        callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg();
+      } // Define the unified helper method that is used to implement .next,
+      // .throw, and .return (see defineIteratorMethods).
 
-  if (-viewL < circleRadius) {
-    vertices.push([viewL, 0]);
-  }
 
-  if (viewR < circleRadius) {
-    vertices.push([viewR, 0]);
-  }
+      this._invoke = enqueue;
+    }
 
-  if (-viewT < circleRadius) {
-    vertices.push([0, viewT]);
-  }
+    defineIteratorMethods(AsyncIterator.prototype);
+    define(AsyncIterator.prototype, asyncIteratorSymbol, function () {
+      return this;
+    });
+    exports.AsyncIterator = AsyncIterator; // Note that simple async functions are implemented on top of
+    // AsyncIterator objects; they just return a Promise for the value of
+    // the final result produced by the iterator.
 
-  if (viewB < circleRadius) {
-    vertices.push([0, viewB]);
-  } // const verticesOriginal = vertices.map(([x, y]) => [x + cx, y + cy])
-  // now convert them all to polar and take the max and min of rho and theta
-  // const viewportCenterTheta = cartesianToTheta(viewR + viewL, viewT + viewB)
+    exports.async = function (innerFn, outerFn, self, tryLocsList, PromiseImpl) {
+      if (PromiseImpl === void 0) PromiseImpl = Promise;
+      var iter = new AsyncIterator(wrap(innerFn, outerFn, self, tryLocsList), PromiseImpl);
+      return exports.isGeneratorFunction(outerFn) ? iter // If outerFn is a generator, return the full iterator.
+      : iter.next().then(function (result) {
+        return result.done ? result.value : iter.next();
+      });
+    };
 
+    function makeInvokeMethod(innerFn, self, context) {
+      var state = GenStateSuspendedStart;
+      return function invoke(method, arg) {
+        if (state === GenStateExecuting) {
+          throw new Error("Generator is already running");
+        }
 
-  var reflect = viewL >= 0 ? -1 : 1; // viewportCenterTheta < Math.PI / 2 || viewportCenterTheta > 1.5 * Math.PI
-  //   ? -1
-  //   : 1
+        if (state === GenStateCompleted) {
+          if (method === "throw") {
+            throw arg;
+          } // Be forgiving, per 25.3.3.3.3 of the spec:
+          // https://people.mozilla.org/~jorendorff/es6-draft.html#sec-generatorresume
 
-  var rhoMin = Infinity;
-  var rhoMax = -Infinity;
-  var thetaMin = Infinity;
-  var thetaMax = -Infinity;
 
-  for (var _i = 0; _i < vertices.length; _i += 1) {
-    // ignore vertex if outside the viewport
-    var _vertices$_i = _slicedToArray(vertices[_i], 2),
-        vx = _vertices$_i[0],
-        vy = _vertices$_i[1];
+          return doneResult();
+        }
 
-    if (vx >= viewL && vx <= viewR && vy >= viewT && vy <= viewB) {
-      var _cartesianToPolar = cartesianToPolar(vx * reflect, vy * reflect),
-          _cartesianToPolar2 = _slicedToArray(_cartesianToPolar, 2),
-          _rho = _cartesianToPolar2[0],
-          theta = _cartesianToPolar2[1]; // ignore vertex if outside the circle
+        context.method = method;
+        context.arg = arg;
 
+        while (true) {
+          var delegate = context.delegate;
 
-      if (_rho <= circleRadius + 0.001) {
-        // ignore theta if rho is 0
-        if (theta < thetaMin && _rho > 0.0001) {
-          thetaMin = theta;
-        }
+          if (delegate) {
+            var delegateResult = maybeInvokeDelegate(delegate, context);
 
-        if (theta > thetaMax && _rho > 0.0001) {
-          thetaMax = theta;
-        }
+            if (delegateResult) {
+              if (delegateResult === ContinueSentinel) continue;
+              return delegateResult;
+            }
+          }
 
-        if (_rho < rhoMin) {
-          rhoMin = _rho;
-        }
+          if (context.method === "next") {
+            // Setting context._sent for legacy support of Babel's
+            // function.sent implementation.
+            context.sent = context._sent = context.arg;
+          } else if (context.method === "throw") {
+            if (state === GenStateSuspendedStart) {
+              state = GenStateCompleted;
+              throw context.arg;
+            }
 
-        if (_rho > rhoMax) {
-          rhoMax = _rho;
-        }
-      }
-    }
-  }
+            context.dispatchException(context.arg);
+          } else if (context.method === "return") {
+            context.abrupt("return", context.arg);
+          }
 
-  if (reflect === -1) {
-    thetaMin += Math.PI;
-    thetaMax += Math.PI;
-  }
+          state = GenStateExecuting;
+          var record = tryCatch(innerFn, self, context);
 
-  if (thetaMin > 2 * Math.PI && thetaMax > 2 * Math.PI) {
-    thetaMin -= 2 * Math.PI;
-    thetaMax -= 2 * Math.PI;
-  }
+          if (record.type === "normal") {
+            // If an exception is thrown from innerFn, we leave state ===
+            // GenStateExecuting and loop back for another invocation.
+            state = context.done ? GenStateCompleted : GenStateSuspendedYield;
 
-  return {
-    rho: [rhoMin, Math.min(circleRadius, rhoMax)],
-    theta: [thetaMin, thetaMax]
-  };
-}
+            if (record.arg === ContinueSentinel) {
+              continue;
+            }
 
-var Slice = /*#__PURE__*/function () {
-  function Slice(view, region, currentRadianOffset, radianWidth) {
-    _classCallCheck(this, Slice);
+            return {
+              value: record.arg,
+              done: context.done
+            };
+          } else if (record.type === "throw") {
+            state = GenStateCompleted; // Dispatch the exception by looping back around to the
+            // context.dispatchException(context.arg) call above.
 
-    this.region = region;
-    this.radianWidth = radianWidth;
-    var bpPerRadian = view.bpPerRadian;
-    this.key = util.assembleLocString(region);
-    this.offsetRadians = currentRadianOffset;
-    this.bpPerRadian = bpPerRadian;
-    this.flipped = false;
-    this.startRadians = this.offsetRadians;
-    this.endRadians = region.widthBp / this.bpPerRadian + this.offsetRadians;
-    Object.freeze(this);
-  }
+            context.method = "throw";
+            context.arg = record.arg;
+          }
+        }
+      };
+    } // Call delegate.iterator[context.method](context.arg) and handle the
+    // result, either by returning a { value, done } result from the
+    // delegate iterator, or by modifying context.method and context.arg,
+    // setting context.delegate to null, and returning the ContinueSentinel.
 
-  _createClass(Slice, [{
-    key: "bpToXY",
-    value: function bpToXY(bp, radiusPx) {
-      var offsetBp;
 
-      if (this.region.elided) {
-        offsetBp = this.region.widthBp / 2;
-      } else if (this.flipped) {
-        offsetBp = this.region.end - bp;
-      } else {
-        offsetBp = bp - this.region.start;
-      }
+    function maybeInvokeDelegate(delegate, context) {
+      var method = delegate.iterator[context.method];
 
-      var totalRadians = offsetBp / this.bpPerRadian + this.offsetRadians;
-      return util.polarToCartesian(radiusPx, totalRadians);
-    }
-  }, {
-    key: "toJSON",
-    value: function toJSON() {
-      return util.objectFromEntries(Object.entries(this));
-    }
-  }]);
+      if (method === undefined$1) {
+        // A .throw or .return when the delegate iterator has no .throw
+        // method always terminates the yield* loop.
+        context.delegate = null;
 
-  return Slice;
-}(); // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        if (context.method === "throw") {
+          // Note: ["return"] must be used for ES3 parsing compatibility.
+          if (delegate.iterator["return"]) {
+            // If the delegate iterator has a return method, give it a
+            // chance to clean up.
+            context.method = "return";
+            context.arg = undefined$1;
+            maybeInvokeDelegate(delegate, context);
 
-function calculateStaticSlices(self) {
-  var slices = [];
-  var currentRadianOffset = 0;
+            if (context.method === "throw") {
+              // If maybeInvokeDelegate(context) changed context.method from
+              // "return" to "throw", let that override the TypeError below.
+              return ContinueSentinel;
+            }
+          }
 
-  var _iterator = _createForOfIteratorHelper(self.elidedRegions),
-      _step;
+          context.method = "throw";
+          context.arg = new TypeError("The iterator does not provide a 'throw' method");
+        }
 
-  try {
-    for (_iterator.s(); !(_step = _iterator.n()).done;) {
-      var region = _step.value;
-      var radianWidth = region.widthBp / self.bpPerRadian + self.spacingPx / self.pxPerRadian;
-      slices.push(new Slice(self, region, currentRadianOffset, radianWidth));
-      currentRadianOffset += radianWidth;
-    }
-  } catch (err) {
-    _iterator.e(err);
-  } finally {
-    _iterator.f();
-  }
+        return ContinueSentinel;
+      }
 
-  return slices;
-} // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      var record = tryCatch(method, delegate.iterator, context.arg);
 
+      if (record.type === "throw") {
+        context.method = "throw";
+        context.arg = record.arg;
+        context.delegate = null;
+        return ContinueSentinel;
+      }
 
-function sliceIsVisible(self, slice) {
-  var _self$visibleSection$ = _slicedToArray(self.visibleSection.theta, 2),
-      visibleThetaMin = _self$visibleSection$[0],
-      visibleThetaMax = _self$visibleSection$[1];
+      var info = record.arg;
 
-  return thetaRangesOverlap(slice.offsetRadians + self.offsetRadians, slice.radianWidth, visibleThetaMin, visibleThetaMax - visibleThetaMin);
-}
+      if (!info) {
+        context.method = "throw";
+        context.arg = new TypeError("iterator result is not an object");
+        context.delegate = null;
+        return ContinueSentinel;
+      }
 
-function CircularView(pluginManager) {
-  var minHeight = 40;
-  var minWidth = 100;
-  var defaultHeight = 400;
-  return mobxStateTree.types.compose(models.BaseViewModel, mobxStateTree.types.model('CircularView', {
-    type: mobxStateTree.types.literal('CircularView'),
-    offsetRadians: -Math.PI / 2,
-    bpPerPx: 2000000,
-    tracks: mobxStateTree.types.array(pluginManager.pluggableMstType('track', 'stateModel')),
-    hideVerticalResizeHandle: false,
-    hideTrackSelectorButton: false,
-    lockedFitToWindow: true,
-    disableImportForm: false,
-    height: mobxStateTree.types.optional(mobxStateTree.types.refinement('trackHeight', mobxStateTree.types.number, function (n) {
-      return n >= minHeight;
-    }), defaultHeight),
-    minimumRadiusPx: 25,
-    spacingPx: 10,
-    paddingPx: 80,
-    lockedPaddingPx: 100,
-    minVisibleWidth: 6,
-    minimumBlockWidth: 20,
-    displayedRegions: mobxStateTree.types.array(mst.Region),
-    scrollX: 0,
-    scrollY: 0,
-    trackSelectorType: 'hierarchical'
-  })["volatile"](function () {
-    return {
-      width: 800
-    };
-  }).views(function (self) {
-    return {
-      get staticSlices() {
-        return calculateStaticSlices(self);
-      },
+      if (info.done) {
+        // Assign the result of the finished delegate to the temporary
+        // variable specified by delegate.resultName (see delegateYield).
+        context[delegate.resultName] = info.value; // Resume execution at the desired location (see delegateYield).
 
-      get visibleStaticSlices() {
-        return this.staticSlices.filter(sliceIsVisible.bind(this, self));
-      },
+        context.next = delegate.nextLoc; // If context.method was "throw" but the delegate handled the
+        // exception, let the outer generator proceed normally. If
+        // context.method was "next", forget context.arg since it has been
+        // "consumed" by the delegate iterator. If context.method was
+        // "return", allow the original .return call to continue in the
+        // outer generator.
 
-      get visibleSection() {
-        return viewportVisibleSection([self.scrollX, self.scrollX + self.width, self.scrollY, self.scrollY + self.height], this.centerXY, this.radiusPx);
-      },
+        if (context.method !== "return") {
+          context.method = "next";
+          context.arg = undefined$1;
+        }
+      } else {
+        // Re-yield the result returned by the delegate method.
+        return info;
+      } // The delegate iterator is finished, so forget it and continue with
+      // the outer generator.
 
-      get circumferencePx() {
-        var elidedBp = 0;
 
-        var _iterator = _createForOfIteratorHelper(this.elidedRegions),
-            _step;
+      context.delegate = null;
+      return ContinueSentinel;
+    } // Define Generator.prototype.{next,throw,return} in terms of the
+    // unified ._invoke helper method.
 
-        try {
-          for (_iterator.s(); !(_step = _iterator.n()).done;) {
-            var r = _step.value;
-            elidedBp += r.widthBp;
-          }
-        } catch (err) {
-          _iterator.e(err);
-        } finally {
-          _iterator.f();
-        }
 
-        return elidedBp / self.bpPerPx + self.spacingPx * this.elidedRegions.length;
-      },
+    defineIteratorMethods(Gp);
+    define(Gp, toStringTagSymbol, "Generator"); // A Generator should always return itself as the iterator object when the
+    // @@iterator function is called on it. Some browsers' implementations of the
+    // iterator prototype chain incorrectly implement this, causing the Generator
+    // object to not be returned from this call. This ensures that doesn't happen.
+    // See https://github.com/facebook/regenerator/issues/274 for more details.
 
-      get radiusPx() {
-        return this.circumferencePx / (2 * Math.PI);
-      },
+    define(Gp, iteratorSymbol, function () {
+      return this;
+    });
+    define(Gp, "toString", function () {
+      return "[object Generator]";
+    });
 
-      get bpPerRadian() {
-        return self.bpPerPx * this.radiusPx;
-      },
+    function pushTryEntry(locs) {
+      var entry = {
+        tryLoc: locs[0]
+      };
 
-      get pxPerRadian() {
-        return this.radiusPx;
-      },
+      if (1 in locs) {
+        entry.catchLoc = locs[1];
+      }
 
-      get centerXY() {
-        return [this.radiusPx + self.paddingPx, this.radiusPx + self.paddingPx];
-      },
+      if (2 in locs) {
+        entry.finallyLoc = locs[2];
+        entry.afterLoc = locs[3];
+      }
 
-      get totalBp() {
-        var total = 0;
+      this.tryEntries.push(entry);
+    }
 
-        var _iterator2 = _createForOfIteratorHelper(self.displayedRegions),
-            _step2;
+    function resetTryEntry(entry) {
+      var record = entry.completion || {};
+      record.type = "normal";
+      delete record.arg;
+      entry.completion = record;
+    }
 
-        try {
-          for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
-            var region = _step2.value;
-            total += region.end - region.start;
-          }
-        } catch (err) {
-          _iterator2.e(err);
-        } finally {
-          _iterator2.f();
-        }
+    function Context(tryLocsList) {
+      // The root entry object (effectively a try statement without a catch
+      // or a finally block) gives us a place to store values thrown from
+      // locations where there is no enclosing try statement.
+      this.tryEntries = [{
+        tryLoc: "root"
+      }];
+      tryLocsList.forEach(pushTryEntry, this);
+      this.reset(true);
+    }
 
-        return total;
-      },
+    exports.keys = function (object) {
+      var keys = [];
 
-      get maximumRadiusPx() {
-        return self.lockedFitToWindow ? Math.min(self.width, self.height) / 2 - self.lockedPaddingPx : 1000000;
-      },
+      for (var key in object) {
+        keys.push(key);
+      }
 
-      get maxBpPerPx() {
-        var minCircumferencePx = 2 * Math.PI * self.minimumRadiusPx;
-        return this.totalBp / minCircumferencePx;
-      },
+      keys.reverse(); // Rather than returning an object with a next method, we keep
+      // things simple and return the next function itself.
 
-      get minBpPerPx() {
-        // min depends on window dimensions, clamp between old min(0.01) and max
-        var maxCircumferencePx = 2 * Math.PI * this.maximumRadiusPx;
-        return util.clamp(this.totalBp / maxCircumferencePx, 0.0000000001, this.maxBpPerPx);
-      },
+      return function next() {
+        while (keys.length) {
+          var key = keys.pop();
 
-      get atMaxBpPerPx() {
-        return self.bpPerPx >= this.maxBpPerPx;
-      },
+          if (key in object) {
+            next.value = key;
+            next.done = false;
+            return next;
+          }
+        } // To avoid creating an additional object, we just hang the .value
+        // and .done properties off the next function object itself. This
+        // also ensures that the minifier will not anonymize the function.
 
-      get atMinBpPerPx() {
-        return self.bpPerPx <= this.minBpPerPx;
-      },
 
-      get tooSmallToLock() {
-        return this.minBpPerPx <= 0.0000000001;
-      },
-
-      get figureDimensions() {
-        return [this.radiusPx * 2 + 2 * self.paddingPx, this.radiusPx * 2 + 2 * self.paddingPx];
-      },
-
-      get figureWidth() {
-        return this.figureDimensions[0];
-      },
+        next.done = true;
+        return next;
+      };
+    };
 
-      get figureHeight() {
-        return this.figureDimensions[1];
-      },
+    function values(iterable) {
+      if (iterable) {
+        var iteratorMethod = iterable[iteratorSymbol];
 
-      // this is displayedRegions, post-processed to
-      // elide regions that are too small to see reasonably
-      get elidedRegions() {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        var visible = [];
-        self.displayedRegions.forEach(function (region) {
-          var widthBp = region.end - region.start;
-          var widthPx = widthBp / self.bpPerPx;
+        if (iteratorMethod) {
+          return iteratorMethod.call(iterable);
+        }
 
-          if (widthPx < self.minVisibleWidth) {
-            // too small to see, collapse into a single elision region
-            var lastVisible = visible[visible.length - 1];
+        if (typeof iterable.next === "function") {
+          return iterable;
+        }
 
-            if (lastVisible && lastVisible.elided) {
-              lastVisible.regions.push(_objectSpread2({}, region));
-              lastVisible.widthBp += widthBp;
-            } else {
-              visible.push({
-                elided: true,
-                widthBp: widthBp,
-                regions: [_objectSpread2({}, region)]
-              });
+        if (!isNaN(iterable.length)) {
+          var i = -1,
+              next = function next() {
+            while (++i < iterable.length) {
+              if (hasOwn.call(iterable, i)) {
+                next.value = iterable[i];
+                next.done = false;
+                return next;
+              }
             }
-          } else {
-            // big enough to see, display it
-            visible.push(_objectSpread2(_objectSpread2({}, region), {}, {
-              widthBp: widthBp
-            }));
-          }
-        }); // remove any single-region elisions
 
-        for (var i = 0; i < visible.length; i += 1) {
-          var v = visible[i];
+            next.value = undefined$1;
+            next.done = true;
+            return next;
+          };
 
-          if (v.elided && v.regions.length === 1) {
-            delete v.elided;
-            visible[i] = _objectSpread2(_objectSpread2({}, v), v.regions[0]);
-          }
+          return next.next = next;
         }
+      } // Return an iterator with no values.
 
-        return visible;
-      },
-
-      get assemblyNames() {
-        var assemblyNames = [];
-        self.displayedRegions.forEach(function (displayedRegion) {
-          if (!assemblyNames.includes(displayedRegion.assemblyName)) {
-            assemblyNames.push(displayedRegion.assemblyName);
-          }
-        });
-        return assemblyNames;
-      },
 
-      get initialized() {
-        var _getSession = util.getSession(self),
-            assemblyManager = _getSession.assemblyManager; // if the assemblyManager is tracking a given assembly name, wait for
-        // it to be loaded. this is done by looking in the assemblyManager's
-        // assembly list, and then waiting on it's initialized state which is
-        // updated later
+      return {
+        next: doneResult
+      };
+    }
 
+    exports.values = values;
 
-        var assembliesInitialized = this.assemblyNames.every(function (assemblyName) {
-          var _assemblyManager$asse;
+    function doneResult() {
+      return {
+        value: undefined$1,
+        done: true
+      };
+    }
 
-          if ((_assemblyManager$asse = assemblyManager.assemblyList) !== null && _assemblyManager$asse !== void 0 && _assemblyManager$asse.map(function (asm) {
-            return asm.name;
-          }).includes(assemblyName)) {
-            return (assemblyManager.get(assemblyName) || {}).initialized;
-          }
+    Context.prototype = {
+      constructor: Context,
+      reset: function reset(skipTempReset) {
+        this.prev = 0;
+        this.next = 0; // Resetting context._sent for legacy support of Babel's
+        // function.sent implementation.
 
-          return true;
-        });
-        return assembliesInitialized;
-      }
+        this.sent = this._sent = undefined$1;
+        this.done = false;
+        this.delegate = null;
+        this.method = "next";
+        this.arg = undefined$1;
+        this.tryEntries.forEach(resetTryEntry);
 
-    };
-  })["volatile"](function () {
-    return {
-      error: undefined
-    };
-  }).actions(function (self) {
-    return {
-      // toggle action with a flag stating which mode it's in
-      setWidth: function setWidth(newWidth) {
-        self.width = Math.max(newWidth, minWidth);
-        return self.width;
-      },
-      setHeight: function setHeight(newHeight) {
-        self.height = Math.max(newHeight, minHeight);
-        return self.height;
-      },
-      resizeHeight: function resizeHeight(distance) {
-        var oldHeight = self.height;
-        var newHeight = this.setHeight(self.height + distance);
-        this.setModelViewWhenAdjust(!self.tooSmallToLock);
-        return newHeight - oldHeight;
-      },
-      resizeWidth: function resizeWidth(distance) {
-        var oldWidth = self.width;
-        var newWidth = this.setWidth(self.width + distance);
-        this.setModelViewWhenAdjust(!self.tooSmallToLock);
-        return newWidth - oldWidth;
-      },
-      rotateClockwiseButton: function rotateClockwiseButton() {
-        this.rotateClockwise(Math.PI / 6);
-      },
-      rotateCounterClockwiseButton: function rotateCounterClockwiseButton() {
-        this.rotateCounterClockwise(Math.PI / 6);
-      },
-      rotateClockwise: function rotateClockwise() {
-        var distance = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0.17;
-        self.offsetRadians += distance;
-      },
-      rotateCounterClockwise: function rotateCounterClockwise() {
-        var distance = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0.17;
-        self.offsetRadians -= distance;
-      },
-      zoomInButton: function zoomInButton() {
-        this.setBpPerPx(self.bpPerPx / 1.4);
-      },
-      zoomOutButton: function zoomOutButton() {
-        this.setBpPerPx(self.bpPerPx * 1.4);
-      },
-      setBpPerPx: function setBpPerPx(newVal) {
-        self.bpPerPx = util.clamp(newVal, self.minBpPerPx, self.maxBpPerPx);
-      },
-      setModelViewWhenAdjust: function setModelViewWhenAdjust(secondCondition) {
-        if (self.lockedFitToWindow && secondCondition) {
-          this.setBpPerPx(self.minBpPerPx);
+        if (!skipTempReset) {
+          for (var name in this) {
+            // Not sure about the optimal order of these conditions:
+            if (name.charAt(0) === "t" && hasOwn.call(this, name) && !isNaN(+name.slice(1))) {
+              this[name] = undefined$1;
+            }
+          }
         }
       },
-      closeView: function closeView() {
-        mobxStateTree.getParent(self, 2).removeView(self);
-      },
-      setDisplayedRegions: function setDisplayedRegions(regions) {
-        var previouslyEmpty = self.displayedRegions.length === 0;
-        self.displayedRegions = mobxStateTree.cast(regions);
+      stop: function stop() {
+        this.done = true;
+        var rootEntry = this.tryEntries[0];
+        var rootRecord = rootEntry.completion;
 
-        if (previouslyEmpty) {
-          this.setBpPerPx(self.minBpPerPx);
-        } else {
-          this.setBpPerPx(self.bpPerPx);
+        if (rootRecord.type === "throw") {
+          throw rootRecord.arg;
         }
-      },
-      activateTrackSelector: function activateTrackSelector() {
-        if (self.trackSelectorType === 'hierarchical') {
-          var session = util.getSession(self);
 
-          if (util.isSessionModelWithWidgets(session)) {
-            var selector = session.addWidget('HierarchicalTrackSelectorWidget', 'hierarchicalTrackSelector', {
-              view: self
-            });
-            session.showWidget(selector);
-            return selector;
-          }
+        return this.rval;
+      },
+      dispatchException: function dispatchException(exception) {
+        if (this.done) {
+          throw exception;
         }
 
-        throw new Error("invalid track selector type ".concat(self.trackSelectorType));
-      },
-      toggleTrack: function toggleTrack(trackId) {
-        // if we have any tracks with that configuration, turn them off
-        var hiddenCount = this.hideTrack(trackId); // if none had that configuration, turn one on
+        var context = this;
 
-        if (!hiddenCount) {
-          this.showTrack(trackId);
-        }
-      },
-      setError: function setError(error) {
-        console.error(error);
-        self.error = error;
-      },
-      showTrack: function showTrack(trackId) {
-        var initialSnapshot = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-        var trackConfigSchema = pluginManager.pluggableConfigSchemaType('track');
-        var configuration = mobxStateTree.resolveIdentifier(trackConfigSchema, mobxStateTree.getRoot(self), trackId);
-        var trackType = pluginManager.getTrackType(configuration.type);
+        function handle(loc, caught) {
+          record.type = "throw";
+          record.arg = exception;
+          context.next = loc;
 
-        if (!trackType) {
-          throw new Error("unknown track type ".concat(configuration.type));
+          if (caught) {
+            // If the dispatched exception was caught by a catch block,
+            // then let that catch block handle the exception normally.
+            context.method = "next";
+            context.arg = undefined$1;
+          }
+
+          return !!caught;
         }
 
-        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);
-        });
-        var track = trackType.stateModel.create(_objectSpread2(_objectSpread2({}, initialSnapshot), {}, {
-          type: configuration.type,
-          configuration: configuration,
-          displays: [{
-            type: displayConf.type,
-            configuration: displayConf
-          }]
-        }));
-        self.tracks.push(track);
-      },
-      addTrackConf: function addTrackConf(configuration$1) {
-        var initialSnapshot = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-        var type = configuration$1.type;
-        var name = configuration.readConfObject(configuration$1, 'name');
-        var trackType = pluginManager.getTrackType(type);
+        for (var i = this.tryEntries.length - 1; i >= 0; --i) {
+          var entry = this.tryEntries[i];
+          var record = entry.completion;
 
-        if (!trackType) {
-          throw new Error("unknown track type ".concat(configuration$1.type));
-        }
+          if (entry.tryLoc === "root") {
+            // Exception thrown outside of any try block that could handle
+            // it, so set the completion value of the entire function to
+            // throw the exception.
+            return handle("end");
+          }
 
-        var viewType = pluginManager.getViewType(self.type);
-        var supportedDisplays = viewType.displayTypes.map(function (displayType) {
-          return displayType.name;
-        });
-        var displayConf = configuration$1.displays.find(function (d) {
-          return supportedDisplays.includes(d.type);
-        });
-        var track = trackType.stateModel.create(_objectSpread2(_objectSpread2({}, initialSnapshot), {}, {
-          name: name,
-          type: type,
-          configuration: configuration$1,
-          displays: [{
-            type: displayConf.type,
-            configuration: displayConf
-          }]
-        }));
-        self.tracks.push(track);
-      },
-      hideTrack: function hideTrack(trackId) {
-        var trackConfigSchema = pluginManager.pluggableConfigSchemaType('track');
-        var configuration = mobxStateTree.resolveIdentifier(trackConfigSchema, mobxStateTree.getRoot(self), trackId); // if we have any tracks with that configuration, turn them off
+          if (entry.tryLoc <= this.prev) {
+            var hasCatch = hasOwn.call(entry, "catchLoc");
+            var hasFinally = hasOwn.call(entry, "finallyLoc");
 
-        var shownTracks = self.tracks.filter(function (t) {
-          return t.configuration === configuration;
-        });
-        mobx.transaction(function () {
-          return shownTracks.forEach(function (t) {
-            return self.tracks.remove(t);
-          });
-        });
-        return shownTracks.length;
+            if (hasCatch && hasFinally) {
+              if (this.prev < entry.catchLoc) {
+                return handle(entry.catchLoc, true);
+              } else if (this.prev < entry.finallyLoc) {
+                return handle(entry.finallyLoc);
+              }
+            } else if (hasCatch) {
+              if (this.prev < entry.catchLoc) {
+                return handle(entry.catchLoc, true);
+              }
+            } else if (hasFinally) {
+              if (this.prev < entry.finallyLoc) {
+                return handle(entry.finallyLoc);
+              }
+            } else {
+              throw new Error("try statement without catch or finally");
+            }
+          }
+        }
       },
-      toggleFitToWindowLock: function toggleFitToWindowLock() {
-        self.lockedFitToWindow = !self.lockedFitToWindow; // when going unlocked -> locked and circle is cut off, set to the locked minBpPerPx
+      abrupt: function abrupt(type, arg) {
+        for (var i = this.tryEntries.length - 1; i >= 0; --i) {
+          var entry = this.tryEntries[i];
 
-        this.setModelViewWhenAdjust(self.atMinBpPerPx);
-        return self.lockedFitToWindow;
-      }
-    };
-  }));
-}
-/*
-PLANS
+          if (entry.tryLoc <= this.prev && hasOwn.call(entry, "finallyLoc") && this.prev < entry.finallyLoc) {
+            var finallyEntry = entry;
+            break;
+          }
+        }
 
-- tracks
-- ruler tick marks
-- set viewport scroll from state snapshot
+        if (finallyEntry && (type === "break" || type === "continue") && finallyEntry.tryLoc <= arg && arg <= finallyEntry.finallyLoc) {
+          // Ignore the finally entry if control is not jumping to a
+          // location outside the try/catch block.
+          finallyEntry = null;
+        }
 
-*/
+        var record = finallyEntry ? finallyEntry.completion : {};
+        record.type = type;
+        record.arg = arg;
 
-var ChordDisplayLoadingFactory = (function (pluginManager) {
-  var lib = pluginManager.lib;
-  var React = lib.react;
-  var useState = React.useState,
-      useEffect = React.useEffect;
-  var makeStyles = lib['@material-ui/core/styles'].makeStyles;
-  var observer = lib['mobx-react'].observer;
-  var useStyles = makeStyles(function (theme) {
-    var offset = 2;
-    var duration = 1.4;
-    return {
-      path: {
-        strokeDasharray: 187,
-        strokeDashoffset: 50,
-        animation: "$dash ".concat(duration, "s ease-in-out infinite, $colors ").concat(duration * 4, "s ease-in-out infinite")
-      },
-      '@keyframes colors': {
-        '0%': {
-          stroke: theme.palette.primary.light
-        },
-        '25%': {
-          stroke: theme.palette.secondary.light
-        },
-        '50%': {
-          stroke: theme.palette.tertiary.light
-        },
-        '75%': {
-          stroke: theme.palette.quaternary.light
-        },
-        '100%': {
-          stroke: theme.palette.primary.light
+        if (finallyEntry) {
+          this.method = "next";
+          this.next = finallyEntry.finallyLoc;
+          return ContinueSentinel;
         }
+
+        return this.complete(record);
       },
-      '@keyframes dash': {
-        '0%': {
-          strokeDashoffset: offset
-        },
-        '50%': {
-          strokeDashoffset: offset / 4,
-          transform: 'rotate(135deg)'
-        },
-        '100%': {
-          strokeDashoffset: offset,
-          transform: 'rotate(720deg)'
+      complete: function complete(record, afterLoc) {
+        if (record.type === "throw") {
+          throw record.arg;
         }
-      }
-    };
-  }); // 'repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(255,255,255,.5) 5px, rgba(255,255,255,.5) 10px)',
 
-  var Loading = observer(function (_ref) {
-    var radius = _ref.model.renderProps.radius;
-    var classes = useStyles(); // only show the loading message after 400ms to prevent excessive flickering
+        if (record.type === "break" || record.type === "continue") {
+          this.next = record.arg;
+        } else if (record.type === "return") {
+          this.rval = this.arg = record.arg;
+          this.method = "return";
+          this.next = "end";
+        } else if (record.type === "normal" && afterLoc) {
+          this.next = afterLoc;
+        }
 
-    var _useState = useState(false),
-        _useState2 = _slicedToArray(_useState, 2),
-        shown = _useState2[0],
-        setShown = _useState2[1];
+        return ContinueSentinel;
+      },
+      finish: function finish(finallyLoc) {
+        for (var i = this.tryEntries.length - 1; i >= 0; --i) {
+          var entry = this.tryEntries[i];
 
-    useEffect(function () {
-      var timeout = setTimeout(function () {
-        return setShown(true);
-      }, 400);
-      return function () {
-        return clearTimeout(timeout);
-      };
-    });
-    return !shown ? null : React.createElement("g", null, React.createElement("defs", null, React.createElement("pattern", {
-      id: "diagonalHatch",
-      width: "10",
-      height: "10",
-      patternTransform: "rotate(45 0 0)",
-      patternUnits: "userSpaceOnUse"
-    }, React.createElement("line", {
-      x1: "0",
-      y1: "0",
-      x2: "0",
-      y2: "10",
-      style: {
-        stroke: 'rgba(255,255,255,0.5)',
-        strokeWidth: 10
-      }
-    }))), React.createElement("circle", {
-      cx: "0",
-      cy: "0",
-      r: radius,
-      fill: "#f1f1f1"
-    }), React.createElement("circle", {
-      cx: "0",
-      cy: "0",
-      r: radius,
-      fill: "url(#diagonalHatch)"
-    }), React.createElement("text", {
-      x: "0",
-      y: "0",
-      transform: "rotate(90 0 0)",
-      dominantBaseline: "middle",
-      textAnchor: "middle"
-    }, "Loading\u2026"), React.createElement("circle", {
-      className: classes.path,
-      fill: "none",
-      strokeWidth: "4",
-      strokeLinecap: "round",
-      cx: "0",
-      cy: "0",
-      r: "60"
-    }));
-  });
-  return Loading;
-});
+          if (entry.finallyLoc === finallyLoc) {
+            this.complete(entry.completion, entry.afterLoc);
+            resetTryEntry(entry);
+            return ContinueSentinel;
+          }
+        }
+      },
+      "catch": function _catch(tryLoc) {
+        for (var i = this.tryEntries.length - 1; i >= 0; --i) {
+          var entry = this.tryEntries[i];
 
-var ChordDisplayErrorFactory = (function (_ref) {
-  var jbrequire = _ref.jbrequire;
-  var React = jbrequire('react');
+          if (entry.tryLoc === tryLoc) {
+            var record = entry.completion;
 
-  var _jbrequire = jbrequire('@material-ui/core/styles'),
-      makeStyles = _jbrequire.makeStyles;
+            if (record.type === "throw") {
+              var thrown = record.arg;
+              resetTryEntry(entry);
+            }
 
-  var _jbrequire2 = jbrequire('mobx-react'),
-      observer = _jbrequire2.observer;
+            return thrown;
+          }
+        } // The context.catch method must only be called with a location
+        // argument that corresponds to a known catch block.
 
-  var useStyles = makeStyles({
-    errorMessage: {},
-    errorBackground: {},
-    errorText: {}
-  }); // 'repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(255,255,255,.5) 5px, rgba(255,255,255,.5) 10px)',
 
-  var DisplayError = observer(function (_ref2) {
-    var _ref2$model = _ref2.model,
-        radius = _ref2$model.renderProps.radius,
-        error = _ref2$model.error;
-    var classes = useStyles();
-    return /*#__PURE__*/React.createElement("g", {
-      className: classes.errorMessage
-    }, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("pattern", {
-      id: "diagonalHatch",
-      width: "10",
-      height: "10",
-      patternTransform: "rotate(45 0 0)",
-      patternUnits: "userSpaceOnUse"
-    }, /*#__PURE__*/React.createElement("line", {
-      x1: "0",
-      y1: "0",
-      x2: "0",
-      y2: "10",
-      style: {
-        stroke: 'rgba(255,0,0,0.5)',
-        strokeWidth: 10
+        throw new Error("illegal catch attempt");
+      },
+      delegateYield: function delegateYield(iterable, resultName, nextLoc) {
+        this.delegate = {
+          iterator: values(iterable),
+          resultName: resultName,
+          nextLoc: nextLoc
+        };
+
+        if (this.method === "next") {
+          // Deliberately forget the last sent value so that we don't
+          // accidentally pass it on to the delegate.
+          this.arg = undefined$1;
+        }
+
+        return ContinueSentinel;
       }
-    }))), /*#__PURE__*/React.createElement("circle", {
-      className: classes.errorBackground,
-      cx: "0",
-      cy: "0",
-      r: radius,
-      fill: "#ffb4b4"
-    }), /*#__PURE__*/React.createElement("circle", {
-      className: classes.errorPattern,
-      cx: "0",
-      cy: "0",
-      r: radius,
-      fill: "url(#diagonalHatch)"
-    }), /*#__PURE__*/React.createElement("text", {
-      className: classes.errorText,
-      x: "0",
-      y: "0",
-      transform: "rotate(90 0 0)",
-      dominantBaseline: "middle",
-      textAnchor: "middle"
-    }, String(error)));
-  });
-  return DisplayError;
+    }; // Regardless of whether this script is executing as a CommonJS module
+    // or not, return the runtime object so that we can declare the variable
+    // regeneratorRuntime in the outer scope, which allows this module to be
+    // injected easily by `bin/regenerator --include-runtime script.js`.
+
+    return exports;
+  }( // If this script is executing as a CommonJS module, use module.exports
+  // as the regeneratorRuntime namespace. Otherwise create a new empty
+  // object. Either way, the resulting object will be used to initialize
+  // the regeneratorRuntime variable at the top of this file.
+   module.exports );
+
+  try {
+    regeneratorRuntime = runtime;
+  } catch (accidentalStrictMode) {
+    // This module should not be running in strict mode, so the above
+    // assignment should always work unless something is misconfigured. Just
+    // in case runtime.js accidentally runs in strict mode, in modern engines
+    // we can explicitly access globalThis. In older engines we can escape
+    // strict mode using a global Function call. This could conceivably fail
+    // if a Content Security Policy forbids using Function, but in that case
+    // the proper solution is to fix the accidental strict mode problem. If
+    // you've misconfigured your bundler to force strict mode and applied a
+    // CSP to forbid Function, and you're not willing to fix either of those
+    // problems, please detail your unique predicament in a GitHub issue.
+    if (typeof globalThis === "object") {
+      globalThis.regeneratorRuntime = runtime;
+    } else {
+      Function("r", "regeneratorRuntime = r")(runtime);
+    }
+  }
 });
 
-var RpcRenderedSvgGroupF = (function (_ref) {
-  var jbrequire = _ref.jbrequire;
-  var React = jbrequire('react');
+function findCircleIntersectionX(y, cx, cy, r, resultArray) {
+  var d = Math.abs(y - cy);
 
-  var _jbrequire = jbrequire('mobx-state-tree'),
-      isAlive = _jbrequire.isAlive;
+  if (d > r) {
+    return;
+  }
 
-  var useEffect = React.useEffect,
-      useRef = React.useRef;
+  if (d === r) {
+    resultArray.push([cx, y]);
+  }
 
-  var _jbrequire2 = jbrequire('mobx-react'),
-      observer = _jbrequire2.observer,
-      MobxPropTypes = _jbrequire2.PropTypes;
+  var solution = Math.sqrt(r * r - d * d);
+  resultArray.push([cx - solution, y]);
+  resultArray.push([cx + solution, y]);
+}
 
-  var _jbrequire3 = jbrequire('react-dom'),
-      unmountComponentAtNode = _jbrequire3.unmountComponentAtNode,
-      hydrate = _jbrequire3.hydrate;
+function findCircleIntersectionY(x, cx, cy, r, resultArray) {
+  var d = Math.abs(x - cx);
 
-  var _jbrequire4 = jbrequire('@jbrowse/core/util'),
-      rIC = _jbrequire4.rIC;
+  if (d > r) {
+    return;
+  }
 
-  function RpcRenderedSvgGroup(_ref2) {
-    var model = _ref2.model;
-    var data = model.data,
-        html = model.html,
-        filled = model.filled,
-        renderingComponent = model.renderingComponent;
-    var ssrContainerNode = useRef(null);
-    useEffect(function () {
-      var domNode = ssrContainerNode.current;
+  if (d === r) {
+    resultArray.push([x, cy]);
+  }
 
-      function doHydrate() {
-        if (domNode && filled) {
-          if (domNode && domNode.innerHTML) {
-            domNode.style.display = 'none';
-            unmountComponentAtNode(domNode);
-          } // setting outline:none fixes react "focusable" element issue. see
-          // https://github.com/GMOD/jbrowse-components/issues/2160
+  var solution = Math.sqrt(r * r - d * d);
+  resultArray.push([x, cy - solution]);
+  resultArray.push([x, cy + solution]);
+}
 
+function cartesianToTheta(x, y) {
+  var theta = (Math.atan(y / x) + 2 * Math.PI) % (2 * Math.PI);
 
-          domNode.style.outline = 'none';
-          domNode.innerHTML = html; // use requestIdleCallback to defer main-thread rendering
-          // and hydration for when we have some free time. helps
-          // keep the framerate up.
+  if (x < 0) {
+    if (y <= 0) {
+      theta += Math.PI;
+    } else {
+      theta -= Math.PI;
+    }
+  }
 
-          rIC(function () {
-            if (!isAlive(model)) {
-              return;
-            }
+  return theta;
+}
 
-            var mainThreadRendering = React.createElement(renderingComponent, _objectSpread2(_objectSpread2({}, data), model.renderProps()), null);
-            rIC(function () {
-              if (!isAlive(model)) {
-                return;
-              }
+function cartesianToPolar(x, y) {
+  var rho = Math.sqrt(x * x + y * y);
 
-              hydrate(mainThreadRendering, domNode);
-            });
-          });
-        }
-      }
+  if (rho === 0) {
+    return [0, 0];
+  }
 
-      doHydrate();
-      return function () {
-        if (domNode) {
-          unmountComponentAtNode(domNode);
-        }
-      };
-    });
-    return /*#__PURE__*/React.createElement("g", {
-      ref: ssrContainerNode
-    });
+  var theta = cartesianToTheta(x, y);
+  return [rho, theta];
+}
+var twoPi = 2 * Math.PI;
+function thetaRangesOverlap(r1start, r1length, r2start, r2length) {
+  if (r1length <= 0 || r2length <= 0) {
+    return false;
   }
 
-  RpcRenderedSvgGroup.propTypes = {
-    model: MobxPropTypes.observableObject.isRequired
-  };
-  return observer(RpcRenderedSvgGroup);
-});
+  if (r1length + 0.0001 >= twoPi || r2length + 0.0001 >= twoPi) {
+    return true;
+  } // put both range starts between 2π and 4π
 
-var BaseChordDisplay = (function (_ref) {
-  var lib = _ref.lib,
-      load = _ref.load;
-  var React = lib.react;
-  var _lib$mobxReact = lib['mobx-react'],
-      observer = _lib$mobxReact.observer,
-      MobxPropTypes = _lib$mobxReact.PropTypes;
-  var Loading = load(ChordDisplayLoadingFactory);
-  var DisplayError = load(ChordDisplayErrorFactory);
-  var RpcRenderedSvgGroup = load(RpcRenderedSvgGroupF); // eslint-disable-next-line @typescript-eslint/no-explicit-any
 
-  function BaseChordDisplay(_ref2) {
-    var display = _ref2.display;
+  r1start = (r1start % twoPi + twoPi) % twoPi + twoPi;
+  r2start = (r2start % twoPi + twoPi) % twoPi + twoPi;
 
-    if (display.error) {
-      return React.createElement(DisplayError, {
-        model: display
-      });
-    }
+  if (r1start < r2start + r2length && r1start + r1length > r2start) {
+    return true;
+  } // move r2 2π to the left and check
 
-    if (!display.filled) {
-      return React.createElement(Loading, {
-        model: display
-      });
-    }
 
-    return React.createElement(RpcRenderedSvgGroup, {
-      model: display
-    });
-  }
+  r2start -= twoPi;
 
-  BaseChordDisplay.propTypes = {
-    display: MobxPropTypes.observableObject.isRequired
-  };
-  return observer(BaseChordDisplay);
-});
+  if (r1start < r2start + r2length && r1start + r1length > r2start) {
+    return true;
+  } // move it 2π to the right and check
 
-function createCommonjsModule(fn, module) {
-	return module = { exports: {} }, fn(module, module.exports), module.exports;
-}
 
-var runtime_1 = /*#__PURE__*/createCommonjsModule(function (module) {
-  /**
-   * Copyright (c) 2014-present, Facebook, Inc.
-   *
-   * This source code is licensed under the MIT license found in the
-   * LICENSE file in the root directory of this source tree.
-   */
-  var runtime = function (exports) {
+  r2start += twoPi + twoPi;
+  return r1start < r2start + r2length && r1start + r1length > r2start;
+} // return which arc range has any part of the circle visible in the viewport
 
-    var Op = Object.prototype;
-    var hasOwn = Op.hasOwnProperty;
-    var undefined$1; // More compressible than void 0.
+function viewportVisibleSection(viewSides, circleCenter, circleRadius) {
+  var _viewSides = _slicedToArray(viewSides, 4),
+      viewL = _viewSides[0],
+      viewR = _viewSides[1],
+      viewT = _viewSides[2],
+      viewB = _viewSides[3];
 
-    var $Symbol = typeof Symbol === "function" ? Symbol : {};
-    var iteratorSymbol = $Symbol.iterator || "@@iterator";
-    var asyncIteratorSymbol = $Symbol.asyncIterator || "@@asyncIterator";
-    var toStringTagSymbol = $Symbol.toStringTag || "@@toStringTag";
+  var _circleCenter = _slicedToArray(circleCenter, 2),
+      cx = _circleCenter[0],
+      cy = _circleCenter[1]; // transform coordinate system to center of circle
 
-    function define(obj, key, value) {
-      Object.defineProperty(obj, key, {
-        value: value,
-        enumerable: true,
-        configurable: true,
-        writable: true
-      });
-      return obj[key];
-    }
 
-    try {
-      // IE 8 has a broken Object.defineProperty that only works on DOM objects.
-      define({}, "");
-    } catch (err) {
-      define = function define(obj, key, value) {
-        return obj[key] = value;
-      };
-    }
+  viewL -= cx;
+  viewR -= cx;
+  viewT -= cy;
+  viewB -= cy;
+  var centerIsInsideViewport = viewL < 0 && viewR > 0 && viewT < 0 && viewB > 0;
 
-    function wrap(innerFn, outerFn, self, tryLocsList) {
-      // If outerFn provided and outerFn.prototype is a Generator, then outerFn.prototype instanceof Generator.
-      var protoGenerator = outerFn && outerFn.prototype instanceof Generator ? outerFn : Generator;
-      var generator = Object.create(protoGenerator.prototype);
-      var context = new Context(tryLocsList || []); // The ._invoke method unifies the implementations of the .next,
-      // .throw, and .return methods.
+  if (centerIsInsideViewport) {
+    var _vertices = [[viewL, viewT], [viewR, viewT], [viewL, viewB], [viewR, viewB]];
+    var maxRho = -Infinity;
 
-      generator._invoke = makeInvokeMethod(innerFn, self, context);
-      return generator;
-    }
+    for (var i = 0; i < _vertices.length; i += 1) {
+      var _vertices$i = _slicedToArray(_vertices[i], 2),
+          x = _vertices$i[0],
+          y = _vertices$i[1];
 
-    exports.wrap = wrap; // Try/catch helper to minimize deoptimizations. Returns a completion
-    // record like context.tryEntries[i].completion. This interface could
-    // have been (and was previously) designed to take a closure to be
-    // invoked without arguments, but in all the cases we care about we
-    // already have an existing method we want to call, so there's no need
-    // to create a new function object. We can even get away with assuming
-    // the method takes exactly one argument, since that happens to be true
-    // in every case, so we don't have to touch the arguments object. The
-    // only additional allocation required is the completion record, which
-    // has a stable shape and so hopefully should be cheap to allocate.
+      var rho = Math.sqrt(x * x + y * y);
 
-    function tryCatch(fn, obj, arg) {
-      try {
-        return {
-          type: "normal",
-          arg: fn.call(obj, arg)
-        };
-      } catch (err) {
-        return {
-          type: "throw",
-          arg: err
-        };
+      if (rho > maxRho) {
+        maxRho = rho;
       }
     }
 
-    var GenStateSuspendedStart = "suspendedStart";
-    var GenStateSuspendedYield = "suspendedYield";
-    var GenStateExecuting = "executing";
-    var GenStateCompleted = "completed"; // Returning this object from the innerFn has the same effect as
-    // breaking out of the dispatch switch statement.
+    return {
+      rho: [0, Math.min(circleRadius, maxRho)],
+      theta: [0, 2 * Math.PI]
+    };
+  } // const viewportCompletelyContainsCircle =
+  //   circleCenter[0] - viewL >= circleRadius &&
+  //   viewR - circleCenter[0] >= circleRadius &&
+  //   circleCenter[1] - viewT >= circleRadius &&
+  //   viewB - circleCenter[1] >= circleRadius
+  // if (viewportCompletelyContainsCircle) {
+  //   return [0, 2 * Math.PI]
+  // }
+  // const distToCenterSquared = ([x, y]) => {
+  //   const [cx, cy] = circleCenter
+  //   const sq = n => n * n
+  //   return sq(x - cx) + sq(y - cy)
+  // }
+  // const circleRadiusSquared = circleRadius * circleRadius
+  // const tlInside = distToCenterSquared([viewL, viewT]) <= circleRadiusSquared
+  // const trInside = distToCenterSquared([viewR, viewT]) <= circleRadiusSquared
+  // const blInside = distToCenterSquared([viewL, viewB]) <= circleRadiusSquared
+  // const brInside = distToCenterSquared([viewR, viewB]) <= circleRadiusSquared
+  // const noIntersection = !tlInside && !trInside && !blInside && !brInside
+  // if (noIntersection) return undefined
+  // const circleCompletelyContainsViewport =
+  //   tlInside && trInside && blInside && brInside
+  // if (circleCompletelyContainsViewport) {
+  //   // viewport is in the circle, but the center is not in it, so take max
+  //   // and min of thetas to the center
+  //   const thetas = [
+  //     Math.atan(viewT / viewL),
+  //     Math.atan(viewT / viewR),
+  //     Math.atan(viewB / viewL),
+  //     Math.atan(viewB / viewR),
+  //   ]
+  //   return [Math.min(...thetas), Math.max(...thetas)]
+  // }
+  // if we get here, the viewport is partly in, partly out of the circle
+  // const viewLIntersects = Math.abs(viewL - circleCenter[0]) <= circleRadius
+  // const viewRIntersects = Math.abs(viewR - circleCenter[0]) <= circleRadius
+  // const viewTIntersects = Math.abs(viewT - circleCenter[1]) <= circleRadius
+  // const viewBIntersects = Math.abs(viewB - circleCenter[1]) <= circleRadius
+  // const numIntersectingSides =
+  //   Number(viewLIntersects) +
+  //   Number(viewRIntersects) +
+  //   Number(viewTIntersects) +
+  //   Number(viewBIntersects)
+  // if (numIntersectingSides === 4) return [0, 2 * Math.PI]
+  // if (numIntersectingSides === 3) {
+  //   // TODO calculate the thetas of the
+  // } else if (numIntersectingSides === 2) {
+  //   // TODO calculate the thetas of the 2 intersection points
+  // } else if (numIntersectingSides === 1) {
+  //   // TODO calculate the thetas of the 1-2 intersection points of the line, and the angle between
+  // }
+  // make a list of vertices-of-interest that lie inside both shapes to examine
+  // to determine the range covered by their intersection
+  // transform coordinates to have the circle as the origin and find the intersections
+  // of the circle and the view rectangle
 
-    var ContinueSentinel = {}; // Dummy constructor functions that we use as the .constructor and
-    // .constructor.prototype properties for functions that return Generator
-    // objects. For full spec compliance, you may wish to configure your
-    // minifier not to mangle the names of these two functions.
 
-    function Generator() {}
+  var vertices = [[viewL, viewT], [viewR, viewT], [viewL, viewB], [viewR, viewB]];
+  findCircleIntersectionY(viewL, 0, 0, circleRadius, vertices);
+  findCircleIntersectionY(viewR, 0, 0, circleRadius, vertices);
+  findCircleIntersectionX(viewT, 0, 0, circleRadius, vertices);
+  findCircleIntersectionX(viewB, 0, 0, circleRadius, vertices); // for each edge, also look at the closest point to center if it is inside the circle
 
-    function GeneratorFunction() {}
+  if (-viewL < circleRadius) {
+    vertices.push([viewL, 0]);
+  }
 
-    function GeneratorFunctionPrototype() {} // This is a polyfill for %IteratorPrototype% for environments that
-    // don't natively support it.
+  if (viewR < circleRadius) {
+    vertices.push([viewR, 0]);
+  }
 
+  if (-viewT < circleRadius) {
+    vertices.push([0, viewT]);
+  }
 
-    var IteratorPrototype = {};
-    define(IteratorPrototype, iteratorSymbol, function () {
-      return this;
-    });
-    var getProto = Object.getPrototypeOf;
-    var NativeIteratorPrototype = getProto && getProto(getProto(values([])));
+  if (viewB < circleRadius) {
+    vertices.push([0, viewB]);
+  } // const verticesOriginal = vertices.map(([x, y]) => [x + cx, y + cy])
+  // now convert them all to polar and take the max and min of rho and theta
+  // const viewportCenterTheta = cartesianToTheta(viewR + viewL, viewT + viewB)
 
-    if (NativeIteratorPrototype && NativeIteratorPrototype !== Op && hasOwn.call(NativeIteratorPrototype, iteratorSymbol)) {
-      // This environment has a native %IteratorPrototype%; use it instead
-      // of the polyfill.
-      IteratorPrototype = NativeIteratorPrototype;
-    }
 
-    var Gp = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(IteratorPrototype);
-    GeneratorFunction.prototype = GeneratorFunctionPrototype;
-    define(Gp, "constructor", GeneratorFunctionPrototype);
-    define(GeneratorFunctionPrototype, "constructor", GeneratorFunction);
-    GeneratorFunction.displayName = define(GeneratorFunctionPrototype, toStringTagSymbol, "GeneratorFunction"); // Helper for defining the .next, .throw, and .return methods of the
-    // Iterator interface in terms of a single ._invoke method.
+  var reflect = viewL >= 0 ? -1 : 1; // viewportCenterTheta < Math.PI / 2 || viewportCenterTheta > 1.5 * Math.PI
+  //   ? -1
+  //   : 1
 
-    function defineIteratorMethods(prototype) {
-      ["next", "throw", "return"].forEach(function (method) {
-        define(prototype, method, function (arg) {
-          return this._invoke(method, arg);
-        });
-      });
-    }
+  var rhoMin = Infinity;
+  var rhoMax = -Infinity;
+  var thetaMin = Infinity;
+  var thetaMax = -Infinity;
 
-    exports.isGeneratorFunction = function (genFun) {
-      var ctor = typeof genFun === "function" && genFun.constructor;
-      return ctor ? ctor === GeneratorFunction || // For the native GeneratorFunction constructor, the best we can
-      // do is to check its .name property.
-      (ctor.displayName || ctor.name) === "GeneratorFunction" : false;
-    };
+  for (var _i = 0; _i < vertices.length; _i += 1) {
+    // ignore vertex if outside the viewport
+    var _vertices$_i = _slicedToArray(vertices[_i], 2),
+        vx = _vertices$_i[0],
+        vy = _vertices$_i[1];
 
-    exports.mark = function (genFun) {
-      if (Object.setPrototypeOf) {
-        Object.setPrototypeOf(genFun, GeneratorFunctionPrototype);
-      } else {
-        genFun.__proto__ = GeneratorFunctionPrototype;
-        define(genFun, toStringTagSymbol, "GeneratorFunction");
-      }
+    if (vx >= viewL && vx <= viewR && vy >= viewT && vy <= viewB) {
+      var _cartesianToPolar = cartesianToPolar(vx * reflect, vy * reflect),
+          _cartesianToPolar2 = _slicedToArray(_cartesianToPolar, 2),
+          _rho = _cartesianToPolar2[0],
+          theta = _cartesianToPolar2[1]; // ignore vertex if outside the circle
 
-      genFun.prototype = Object.create(Gp);
-      return genFun;
-    }; // Within the body of any async function, `await x` is transformed to
-    // `yield regeneratorRuntime.awrap(x)`, so that the runtime can test
-    // `hasOwn.call(value, "__await")` to determine if the yielded value is
-    // meant to be awaited.
 
+      if (_rho <= circleRadius + 0.001) {
+        // ignore theta if rho is 0
+        if (theta < thetaMin && _rho > 0.0001) {
+          thetaMin = theta;
+        }
 
-    exports.awrap = function (arg) {
-      return {
-        __await: arg
-      };
-    };
+        if (theta > thetaMax && _rho > 0.0001) {
+          thetaMax = theta;
+        }
 
-    function AsyncIterator(generator, PromiseImpl) {
-      function invoke(method, arg, resolve, reject) {
-        var record = tryCatch(generator[method], generator, arg);
-
-        if (record.type === "throw") {
-          reject(record.arg);
-        } else {
-          var result = record.arg;
-          var value = result.value;
-
-          if (value && typeof value === "object" && hasOwn.call(value, "__await")) {
-            return PromiseImpl.resolve(value.__await).then(function (value) {
-              invoke("next", value, resolve, reject);
-            }, function (err) {
-              invoke("throw", err, resolve, reject);
-            });
-          }
+        if (_rho < rhoMin) {
+          rhoMin = _rho;
+        }
 
-          return PromiseImpl.resolve(value).then(function (unwrapped) {
-            // When a yielded Promise is resolved, its final value becomes
-            // the .value of the Promise<{value,done}> result for the
-            // current iteration.
-            result.value = unwrapped;
-            resolve(result);
-          }, function (error) {
-            // If a rejected Promise was yielded, throw the rejection back
-            // into the async generator function so it can be handled there.
-            return invoke("throw", error, resolve, reject);
-          });
+        if (_rho > rhoMax) {
+          rhoMax = _rho;
         }
       }
+    }
+  }
 
-      var previousPromise;
+  if (reflect === -1) {
+    thetaMin += Math.PI;
+    thetaMax += Math.PI;
+  }
 
-      function enqueue(method, arg) {
-        function callInvokeWithMethodAndArg() {
-          return new PromiseImpl(function (resolve, reject) {
-            invoke(method, arg, resolve, reject);
-          });
-        }
+  if (thetaMin > 2 * Math.PI && thetaMax > 2 * Math.PI) {
+    thetaMin -= 2 * Math.PI;
+    thetaMax -= 2 * Math.PI;
+  }
 
-        return previousPromise = // If enqueue has been called before, then we want to wait until
-        // all previous Promises have been resolved before calling invoke,
-        // so that results are always delivered in the correct order. If
-        // enqueue has not been called before, then it is important to
-        // call invoke immediately, without waiting on a callback to fire,
-        // so that the async generator function has the opportunity to do
-        // any necessary setup in a predictable way. This predictability
-        // is why the Promise constructor synchronously invokes its
-        // executor callback, and why async functions synchronously
-        // execute code before the first await. Since we implement simple
-        // async functions in terms of async generators, it is especially
-        // important to get this right, even though it requires care.
-        previousPromise ? previousPromise.then(callInvokeWithMethodAndArg, // Avoid propagating failures to Promises returned by later
-        // invocations of the iterator.
-        callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg();
-      } // Define the unified helper method that is used to implement .next,
-      // .throw, and .return (see defineIteratorMethods).
+  return {
+    rho: [rhoMin, Math.min(circleRadius, rhoMax)],
+    theta: [thetaMin, thetaMax]
+  };
+}
 
+var Slice = /*#__PURE__*/function () {
+  function Slice(view, region, currentRadianOffset, radianWidth) {
+    _classCallCheck(this, Slice);
 
-      this._invoke = enqueue;
-    }
+    this.region = region;
+    this.radianWidth = radianWidth;
+    var bpPerRadian = view.bpPerRadian;
+    this.key = util.assembleLocString(region);
+    this.offsetRadians = currentRadianOffset;
+    this.bpPerRadian = bpPerRadian;
+    this.flipped = false;
+    this.startRadians = this.offsetRadians;
+    this.endRadians = region.widthBp / this.bpPerRadian + this.offsetRadians;
+    Object.freeze(this);
+  }
 
-    defineIteratorMethods(AsyncIterator.prototype);
-    define(AsyncIterator.prototype, asyncIteratorSymbol, function () {
-      return this;
-    });
-    exports.AsyncIterator = AsyncIterator; // Note that simple async functions are implemented on top of
-    // AsyncIterator objects; they just return a Promise for the value of
-    // the final result produced by the iterator.
+  _createClass(Slice, [{
+    key: "bpToXY",
+    value: function bpToXY(bp, radiusPx) {
+      var offsetBp;
 
-    exports.async = function (innerFn, outerFn, self, tryLocsList, PromiseImpl) {
-      if (PromiseImpl === void 0) PromiseImpl = Promise;
-      var iter = new AsyncIterator(wrap(innerFn, outerFn, self, tryLocsList), PromiseImpl);
-      return exports.isGeneratorFunction(outerFn) ? iter // If outerFn is a generator, return the full iterator.
-      : iter.next().then(function (result) {
-        return result.done ? result.value : iter.next();
-      });
-    };
+      if (this.region.elided) {
+        offsetBp = this.region.widthBp / 2;
+      } else if (this.flipped) {
+        offsetBp = this.region.end - bp;
+      } else {
+        offsetBp = bp - this.region.start;
+      }
 
-    function makeInvokeMethod(innerFn, self, context) {
-      var state = GenStateSuspendedStart;
-      return function invoke(method, arg) {
-        if (state === GenStateExecuting) {
-          throw new Error("Generator is already running");
-        }
+      var totalRadians = offsetBp / this.bpPerRadian + this.offsetRadians;
+      return util.polarToCartesian(radiusPx, totalRadians);
+    }
+  }, {
+    key: "toJSON",
+    value: function toJSON() {
+      return util.objectFromEntries(Object.entries(this));
+    }
+  }]);
 
-        if (state === GenStateCompleted) {
-          if (method === "throw") {
-            throw arg;
-          } // Be forgiving, per 25.3.3.3.3 of the spec:
-          // https://people.mozilla.org/~jorendorff/es6-draft.html#sec-generatorresume
+  return Slice;
+}(); // eslint-disable-next-line @typescript-eslint/no-explicit-any
 
+function calculateStaticSlices(self) {
+  var slices = [];
+  var currentRadianOffset = 0;
 
-          return doneResult();
-        }
+  var _iterator = _createForOfIteratorHelper(self.elidedRegions),
+      _step;
 
-        context.method = method;
-        context.arg = arg;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var region = _step.value;
+      var radianWidth = region.widthBp / self.bpPerRadian + self.spacingPx / self.pxPerRadian;
+      slices.push(new Slice(self, region, currentRadianOffset, radianWidth));
+      currentRadianOffset += radianWidth;
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
 
-        while (true) {
-          var delegate = context.delegate;
+  return slices;
+} // eslint-disable-next-line @typescript-eslint/no-explicit-any
 
-          if (delegate) {
-            var delegateResult = maybeInvokeDelegate(delegate, context);
 
-            if (delegateResult) {
-              if (delegateResult === ContinueSentinel) continue;
-              return delegateResult;
-            }
-          }
+function sliceIsVisible(self, slice) {
+  var _self$visibleSection$ = _slicedToArray(self.visibleSection.theta, 2),
+      visibleThetaMin = _self$visibleSection$[0],
+      visibleThetaMax = _self$visibleSection$[1];
 
-          if (context.method === "next") {
-            // Setting context._sent for legacy support of Babel's
-            // function.sent implementation.
-            context.sent = context._sent = context.arg;
-          } else if (context.method === "throw") {
-            if (state === GenStateSuspendedStart) {
-              state = GenStateCompleted;
-              throw context.arg;
-            }
+  return thetaRangesOverlap(slice.offsetRadians + self.offsetRadians, slice.radianWidth, visibleThetaMin, visibleThetaMax - visibleThetaMin);
+}
 
-            context.dispatchException(context.arg);
-          } else if (context.method === "return") {
-            context.abrupt("return", context.arg);
-          }
+function CircularView(pluginManager) {
+  var minHeight = 40;
+  var minWidth = 100;
+  var defaultHeight = 400;
+  return mobxStateTree.types.compose(models.BaseViewModel, mobxStateTree.types.model('CircularView', {
+    type: mobxStateTree.types.literal('CircularView'),
+    offsetRadians: -Math.PI / 2,
+    bpPerPx: 2000000,
+    tracks: mobxStateTree.types.array(pluginManager.pluggableMstType('track', 'stateModel')),
+    hideVerticalResizeHandle: false,
+    hideTrackSelectorButton: false,
+    lockedFitToWindow: true,
+    disableImportForm: false,
+    height: mobxStateTree.types.optional(mobxStateTree.types.refinement('trackHeight', mobxStateTree.types.number, function (n) {
+      return n >= minHeight;
+    }), defaultHeight),
+    minimumRadiusPx: 25,
+    spacingPx: 10,
+    paddingPx: 80,
+    lockedPaddingPx: 100,
+    minVisibleWidth: 6,
+    minimumBlockWidth: 20,
+    displayedRegions: mobxStateTree.types.array(mst.Region),
+    scrollX: 0,
+    scrollY: 0,
+    trackSelectorType: 'hierarchical'
+  })["volatile"](function () {
+    return {
+      width: 0
+    };
+  }).views(function (self) {
+    return {
+      get staticSlices() {
+        return calculateStaticSlices(self);
+      },
 
-          state = GenStateExecuting;
-          var record = tryCatch(innerFn, self, context);
+      get visibleStaticSlices() {
+        return this.staticSlices.filter(sliceIsVisible.bind(this, self));
+      },
 
-          if (record.type === "normal") {
-            // If an exception is thrown from innerFn, we leave state ===
-            // GenStateExecuting and loop back for another invocation.
-            state = context.done ? GenStateCompleted : GenStateSuspendedYield;
+      get visibleSection() {
+        return viewportVisibleSection([self.scrollX, self.scrollX + self.width, self.scrollY, self.scrollY + self.height], this.centerXY, this.radiusPx);
+      },
 
-            if (record.arg === ContinueSentinel) {
-              continue;
-            }
+      get circumferencePx() {
+        var elidedBp = 0;
 
-            return {
-              value: record.arg,
-              done: context.done
-            };
-          } else if (record.type === "throw") {
-            state = GenStateCompleted; // Dispatch the exception by looping back around to the
-            // context.dispatchException(context.arg) call above.
+        var _iterator = _createForOfIteratorHelper(this.elidedRegions),
+            _step;
 
-            context.method = "throw";
-            context.arg = record.arg;
+        try {
+          for (_iterator.s(); !(_step = _iterator.n()).done;) {
+            var r = _step.value;
+            elidedBp += r.widthBp;
           }
+        } catch (err) {
+          _iterator.e(err);
+        } finally {
+          _iterator.f();
         }
-      };
-    } // Call delegate.iterator[context.method](context.arg) and handle the
-    // result, either by returning a { value, done } result from the
-    // delegate iterator, or by modifying context.method and context.arg,
-    // setting context.delegate to null, and returning the ContinueSentinel.
 
+        return elidedBp / self.bpPerPx + self.spacingPx * this.elidedRegions.length;
+      },
 
-    function maybeInvokeDelegate(delegate, context) {
-      var method = delegate.iterator[context.method];
+      get radiusPx() {
+        return this.circumferencePx / (2 * Math.PI);
+      },
 
-      if (method === undefined$1) {
-        // A .throw or .return when the delegate iterator has no .throw
-        // method always terminates the yield* loop.
-        context.delegate = null;
+      get bpPerRadian() {
+        return self.bpPerPx * this.radiusPx;
+      },
 
-        if (context.method === "throw") {
-          // Note: ["return"] must be used for ES3 parsing compatibility.
-          if (delegate.iterator["return"]) {
-            // If the delegate iterator has a return method, give it a
-            // chance to clean up.
-            context.method = "return";
-            context.arg = undefined$1;
-            maybeInvokeDelegate(delegate, context);
+      get pxPerRadian() {
+        return this.radiusPx;
+      },
 
-            if (context.method === "throw") {
-              // If maybeInvokeDelegate(context) changed context.method from
-              // "return" to "throw", let that override the TypeError below.
-              return ContinueSentinel;
-            }
-          }
+      get centerXY() {
+        return [this.radiusPx + self.paddingPx, this.radiusPx + self.paddingPx];
+      },
 
-          context.method = "throw";
-          context.arg = new TypeError("The iterator does not provide a 'throw' method");
-        }
+      get totalBp() {
+        var total = 0;
 
-        return ContinueSentinel;
-      }
+        var _iterator2 = _createForOfIteratorHelper(self.displayedRegions),
+            _step2;
 
-      var record = tryCatch(method, delegate.iterator, context.arg);
+        try {
+          for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+            var region = _step2.value;
+            total += region.end - region.start;
+          }
+        } catch (err) {
+          _iterator2.e(err);
+        } finally {
+          _iterator2.f();
+        }
 
-      if (record.type === "throw") {
-        context.method = "throw";
-        context.arg = record.arg;
-        context.delegate = null;
-        return ContinueSentinel;
-      }
+        return total;
+      },
 
-      var info = record.arg;
+      get maximumRadiusPx() {
+        return self.lockedFitToWindow ? Math.min(self.width, self.height) / 2 - self.lockedPaddingPx : 1000000;
+      },
 
-      if (!info) {
-        context.method = "throw";
-        context.arg = new TypeError("iterator result is not an object");
-        context.delegate = null;
-        return ContinueSentinel;
-      }
+      get maxBpPerPx() {
+        var minCircumferencePx = 2 * Math.PI * self.minimumRadiusPx;
+        return this.totalBp / minCircumferencePx;
+      },
 
-      if (info.done) {
-        // Assign the result of the finished delegate to the temporary
-        // variable specified by delegate.resultName (see delegateYield).
-        context[delegate.resultName] = info.value; // Resume execution at the desired location (see delegateYield).
+      get minBpPerPx() {
+        // min depends on window dimensions, clamp between old min(0.01) and max
+        var maxCircumferencePx = 2 * Math.PI * this.maximumRadiusPx;
+        return util.clamp(this.totalBp / maxCircumferencePx, 0.0000000001, this.maxBpPerPx);
+      },
 
-        context.next = delegate.nextLoc; // If context.method was "throw" but the delegate handled the
-        // exception, let the outer generator proceed normally. If
-        // context.method was "next", forget context.arg since it has been
-        // "consumed" by the delegate iterator. If context.method was
-        // "return", allow the original .return call to continue in the
-        // outer generator.
+      get atMaxBpPerPx() {
+        return self.bpPerPx >= this.maxBpPerPx;
+      },
 
-        if (context.method !== "return") {
-          context.method = "next";
-          context.arg = undefined$1;
-        }
-      } else {
-        // Re-yield the result returned by the delegate method.
-        return info;
-      } // The delegate iterator is finished, so forget it and continue with
-      // the outer generator.
+      get atMinBpPerPx() {
+        return self.bpPerPx <= this.minBpPerPx;
+      },
 
+      get tooSmallToLock() {
+        return this.minBpPerPx <= 0.0000000001;
+      },
 
-      context.delegate = null;
-      return ContinueSentinel;
-    } // Define Generator.prototype.{next,throw,return} in terms of the
-    // unified ._invoke helper method.
+      get figureDimensions() {
+        return [this.radiusPx * 2 + 2 * self.paddingPx, this.radiusPx * 2 + 2 * self.paddingPx];
+      },
 
+      get figureWidth() {
+        return this.figureDimensions[0];
+      },
 
-    defineIteratorMethods(Gp);
-    define(Gp, toStringTagSymbol, "Generator"); // A Generator should always return itself as the iterator object when the
-    // @@iterator function is called on it. Some browsers' implementations of the
-    // iterator prototype chain incorrectly implement this, causing the Generator
-    // object to not be returned from this call. This ensures that doesn't happen.
-    // See https://github.com/facebook/regenerator/issues/274 for more details.
+      get figureHeight() {
+        return this.figureDimensions[1];
+      },
 
-    define(Gp, iteratorSymbol, function () {
-      return this;
-    });
-    define(Gp, "toString", function () {
-      return "[object Generator]";
-    });
+      // this is displayedRegions, post-processed to
+      // elide regions that are too small to see reasonably
+      get elidedRegions() {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        var visible = [];
+        self.displayedRegions.forEach(function (region) {
+          var widthBp = region.end - region.start;
+          var widthPx = widthBp / self.bpPerPx;
 
-    function pushTryEntry(locs) {
-      var entry = {
-        tryLoc: locs[0]
-      };
+          if (widthPx < self.minVisibleWidth) {
+            // too small to see, collapse into a single elision region
+            var lastVisible = visible[visible.length - 1];
 
-      if (1 in locs) {
-        entry.catchLoc = locs[1];
-      }
+            if (lastVisible && lastVisible.elided) {
+              lastVisible.regions.push(_objectSpread2({}, region));
+              lastVisible.widthBp += widthBp;
+            } else {
+              visible.push({
+                elided: true,
+                widthBp: widthBp,
+                regions: [_objectSpread2({}, region)]
+              });
+            }
+          } else {
+            // big enough to see, display it
+            visible.push(_objectSpread2(_objectSpread2({}, region), {}, {
+              widthBp: widthBp
+            }));
+          }
+        }); // remove any single-region elisions
 
-      if (2 in locs) {
-        entry.finallyLoc = locs[2];
-        entry.afterLoc = locs[3];
-      }
+        for (var i = 0; i < visible.length; i += 1) {
+          var v = visible[i];
 
-      this.tryEntries.push(entry);
-    }
+          if (v.elided && v.regions.length === 1) {
+            delete v.elided;
+            visible[i] = _objectSpread2(_objectSpread2({}, v), v.regions[0]);
+          }
+        }
 
-    function resetTryEntry(entry) {
-      var record = entry.completion || {};
-      record.type = "normal";
-      delete record.arg;
-      entry.completion = record;
-    }
+        return visible;
+      },
 
-    function Context(tryLocsList) {
-      // The root entry object (effectively a try statement without a catch
-      // or a finally block) gives us a place to store values thrown from
-      // locations where there is no enclosing try statement.
-      this.tryEntries = [{
-        tryLoc: "root"
-      }];
-      tryLocsList.forEach(pushTryEntry, this);
-      this.reset(true);
-    }
+      get assemblyNames() {
+        var assemblyNames = [];
+        self.displayedRegions.forEach(function (displayedRegion) {
+          if (!assemblyNames.includes(displayedRegion.assemblyName)) {
+            assemblyNames.push(displayedRegion.assemblyName);
+          }
+        });
+        return assemblyNames;
+      },
 
-    exports.keys = function (object) {
-      var keys = [];
+      get initialized() {
+        var _getSession = util.getSession(self),
+            assemblyManager = _getSession.assemblyManager; // if the assemblyManager is tracking a given assembly name, wait for
+        // it to be loaded. this is done by looking in the assemblyManager's
+        // assembly list, and then waiting on it's initialized state which is
+        // updated later
 
-      for (var key in object) {
-        keys.push(key);
-      }
 
-      keys.reverse(); // Rather than returning an object with a next method, we keep
-      // things simple and return the next function itself.
+        return this.assemblyNames.every(function (assemblyName) {
+          var _assemblyManager$asse;
 
-      return function next() {
-        while (keys.length) {
-          var key = keys.pop();
+          if ((_assemblyManager$asse = assemblyManager.assemblyList) !== null && _assemblyManager$asse !== void 0 && _assemblyManager$asse.map(function (asm) {
+            return asm.name;
+          }).includes(assemblyName)) {
+            var _assemblyManager$get;
 
-          if (key in object) {
-            next.value = key;
-            next.done = false;
-            return next;
+            return (_assemblyManager$get = assemblyManager.get(assemblyName)) === null || _assemblyManager$get === void 0 ? void 0 : _assemblyManager$get.initialized;
           }
-        } // To avoid creating an additional object, we just hang the .value
-        // and .done properties off the next function object itself. This
-        // also ensures that the minifier will not anonymize the function.
 
+          return true;
+        });
+      }
 
-        next.done = true;
-        return next;
-      };
     };
-
-    function values(iterable) {
-      if (iterable) {
-        var iteratorMethod = iterable[iteratorSymbol];
-
-        if (iteratorMethod) {
-          return iteratorMethod.call(iterable);
-        }
-
-        if (typeof iterable.next === "function") {
-          return iterable;
+  })["volatile"](function () {
+    return {
+      error: undefined
+    };
+  }).actions(function (self) {
+    return {
+      // toggle action with a flag stating which mode it's in
+      setWidth: function setWidth(newWidth) {
+        self.width = Math.max(newWidth, minWidth);
+        return self.width;
+      },
+      setHeight: function setHeight(newHeight) {
+        self.height = Math.max(newHeight, minHeight);
+        return self.height;
+      },
+      resizeHeight: function resizeHeight(distance) {
+        var oldHeight = self.height;
+        var newHeight = this.setHeight(self.height + distance);
+        this.setModelViewWhenAdjust(!self.tooSmallToLock);
+        return newHeight - oldHeight;
+      },
+      resizeWidth: function resizeWidth(distance) {
+        var oldWidth = self.width;
+        var newWidth = this.setWidth(self.width + distance);
+        this.setModelViewWhenAdjust(!self.tooSmallToLock);
+        return newWidth - oldWidth;
+      },
+      rotateClockwiseButton: function rotateClockwiseButton() {
+        this.rotateClockwise(Math.PI / 6);
+      },
+      rotateCounterClockwiseButton: function rotateCounterClockwiseButton() {
+        this.rotateCounterClockwise(Math.PI / 6);
+      },
+      rotateClockwise: function rotateClockwise() {
+        var distance = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0.17;
+        self.offsetRadians += distance;
+      },
+      rotateCounterClockwise: function rotateCounterClockwise() {
+        var distance = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0.17;
+        self.offsetRadians -= distance;
+      },
+      zoomInButton: function zoomInButton() {
+        this.setBpPerPx(self.bpPerPx / 1.4);
+      },
+      zoomOutButton: function zoomOutButton() {
+        this.setBpPerPx(self.bpPerPx * 1.4);
+      },
+      setBpPerPx: function setBpPerPx(newVal) {
+        self.bpPerPx = util.clamp(newVal, self.minBpPerPx, self.maxBpPerPx);
+      },
+      setModelViewWhenAdjust: function setModelViewWhenAdjust(secondCondition) {
+        if (self.lockedFitToWindow && secondCondition) {
+          this.setBpPerPx(self.minBpPerPx);
         }
+      },
+      closeView: function closeView() {
+        mobxStateTree.getParent(self, 2).removeView(self);
+      },
+      setDisplayedRegions: function setDisplayedRegions(regions) {
+        var previouslyEmpty = self.displayedRegions.length === 0;
+        self.displayedRegions = mobxStateTree.cast(regions);
 
-        if (!isNaN(iterable.length)) {
-          var i = -1,
-              next = function next() {
-            while (++i < iterable.length) {
-              if (hasOwn.call(iterable, i)) {
-                next.value = iterable[i];
-                next.done = false;
-                return next;
-              }
-            }
-
-            next.value = undefined$1;
-            next.done = true;
-            return next;
-          };
+        if (previouslyEmpty) {
+          this.setBpPerPx(self.minBpPerPx);
+        } else {
+          this.setBpPerPx(self.bpPerPx);
+        }
+      },
+      activateTrackSelector: function activateTrackSelector() {
+        if (self.trackSelectorType === 'hierarchical') {
+          var session = util.getSession(self);
 
-          return next.next = next;
+          if (util.isSessionModelWithWidgets(session)) {
+            var selector = session.addWidget('HierarchicalTrackSelectorWidget', 'hierarchicalTrackSelector', {
+              view: self
+            });
+            session.showWidget(selector);
+            return selector;
+          }
         }
-      } // Return an iterator with no values.
 
+        throw new Error("invalid track selector type ".concat(self.trackSelectorType));
+      },
+      toggleTrack: function toggleTrack(trackId) {
+        // if we have any tracks with that configuration, turn them off
+        var hiddenCount = this.hideTrack(trackId); // if none had that configuration, turn one on
 
-      return {
-        next: doneResult
-      };
-    }
+        if (!hiddenCount) {
+          this.showTrack(trackId);
+        }
+      },
+      setError: function setError(error) {
+        console.error(error);
+        self.error = error;
+      },
+      showTrack: function showTrack(trackId) {
+        var initialSnapshot = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+        var trackConfigSchema = pluginManager.pluggableConfigSchemaType('track');
+        var configuration = mobxStateTree.resolveIdentifier(trackConfigSchema, mobxStateTree.getRoot(self), trackId);
+        var trackType = pluginManager.getTrackType(configuration.type);
 
-    exports.values = values;
+        if (!trackType) {
+          throw new Error("unknown track type ".concat(configuration.type));
+        }
 
-    function doneResult() {
-      return {
-        value: undefined$1,
-        done: true
-      };
-    }
+        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);
+        });
+        var track = trackType.stateModel.create(_objectSpread2(_objectSpread2({}, initialSnapshot), {}, {
+          type: configuration.type,
+          configuration: configuration,
+          displays: [{
+            type: displayConf.type,
+            configuration: displayConf
+          }]
+        }));
+        self.tracks.push(track);
+      },
+      addTrackConf: function addTrackConf(configuration$1) {
+        var initialSnapshot = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+        var type = configuration$1.type;
+        var name = configuration.readConfObject(configuration$1, 'name');
+        var trackType = pluginManager.getTrackType(type);
 
-    Context.prototype = {
-      constructor: Context,
-      reset: function reset(skipTempReset) {
-        this.prev = 0;
-        this.next = 0; // Resetting context._sent for legacy support of Babel's
-        // function.sent implementation.
+        if (!trackType) {
+          throw new Error("unknown track type ".concat(configuration$1.type));
+        }
 
-        this.sent = this._sent = undefined$1;
-        this.done = false;
-        this.delegate = null;
-        this.method = "next";
-        this.arg = undefined$1;
-        this.tryEntries.forEach(resetTryEntry);
+        var viewType = pluginManager.getViewType(self.type);
+        var supportedDisplays = viewType.displayTypes.map(function (displayType) {
+          return displayType.name;
+        });
+        var displayConf = configuration$1.displays.find(function (d) {
+          return supportedDisplays.includes(d.type);
+        });
+        var track = trackType.stateModel.create(_objectSpread2(_objectSpread2({}, initialSnapshot), {}, {
+          name: name,
+          type: type,
+          configuration: configuration$1,
+          displays: [{
+            type: displayConf.type,
+            configuration: displayConf
+          }]
+        }));
+        self.tracks.push(track);
+      },
+      hideTrack: function hideTrack(trackId) {
+        var trackConfigSchema = pluginManager.pluggableConfigSchemaType('track');
+        var configuration = mobxStateTree.resolveIdentifier(trackConfigSchema, mobxStateTree.getRoot(self), trackId); // if we have any tracks with that configuration, turn them off
 
-        if (!skipTempReset) {
-          for (var name in this) {
-            // Not sure about the optimal order of these conditions:
-            if (name.charAt(0) === "t" && hasOwn.call(this, name) && !isNaN(+name.slice(1))) {
-              this[name] = undefined$1;
-            }
-          }
-        }
+        var shownTracks = self.tracks.filter(function (t) {
+          return t.configuration === configuration;
+        });
+        mobx.transaction(function () {
+          return shownTracks.forEach(function (t) {
+            return self.tracks.remove(t);
+          });
+        });
+        return shownTracks.length;
       },
-      stop: function stop() {
-        this.done = true;
-        var rootEntry = this.tryEntries[0];
-        var rootRecord = rootEntry.completion;
+      toggleFitToWindowLock: function toggleFitToWindowLock() {
+        self.lockedFitToWindow = !self.lockedFitToWindow; // when going unlocked -> locked and circle is cut off, set to the locked minBpPerPx
 
-        if (rootRecord.type === "throw") {
-          throw rootRecord.arg;
-        }
+        this.setModelViewWhenAdjust(self.atMinBpPerPx);
+        return self.lockedFitToWindow;
+      }
+    };
+  }));
+}
+/*
+PLANS
 
-        return this.rval;
+- tracks
+- ruler tick marks
+- set viewport scroll from state snapshot
+
+*/
+
+var ChordDisplayLoadingFactory = (function (pluginManager) {
+  var lib = pluginManager.lib;
+  var React = lib.react;
+  var useState = React.useState,
+      useEffect = React.useEffect;
+  var makeStyles = lib['@material-ui/core/styles'].makeStyles;
+  var observer = lib['mobx-react'].observer;
+  var useStyles = makeStyles(function (theme) {
+    var offset = 2;
+    var duration = 1.4;
+    return {
+      path: {
+        strokeDasharray: 187,
+        strokeDashoffset: 50,
+        animation: "$dash ".concat(duration, "s ease-in-out infinite, $colors ").concat(duration * 4, "s ease-in-out infinite")
       },
-      dispatchException: function dispatchException(exception) {
-        if (this.done) {
-          throw exception;
+      '@keyframes colors': {
+        '0%': {
+          stroke: theme.palette.primary.light
+        },
+        '25%': {
+          stroke: theme.palette.secondary.light
+        },
+        '50%': {
+          stroke: theme.palette.tertiary.light
+        },
+        '75%': {
+          stroke: theme.palette.quaternary.light
+        },
+        '100%': {
+          stroke: theme.palette.primary.light
         }
+      },
+      '@keyframes dash': {
+        '0%': {
+          strokeDashoffset: offset
+        },
+        '50%': {
+          strokeDashoffset: offset / 4,
+          transform: 'rotate(135deg)'
+        },
+        '100%': {
+          strokeDashoffset: offset,
+          transform: 'rotate(720deg)'
+        }
+      }
+    };
+  }); // 'repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(255,255,255,.5) 5px, rgba(255,255,255,.5) 10px)',
 
-        var context = this;
+  var Loading = observer(function (_ref) {
+    var radius = _ref.model.renderProps.radius;
+    var classes = useStyles(); // only show the loading message after 400ms to prevent excessive flickering
 
-        function handle(loc, caught) {
-          record.type = "throw";
-          record.arg = exception;
-          context.next = loc;
+    var _useState = useState(false),
+        _useState2 = _slicedToArray(_useState, 2),
+        shown = _useState2[0],
+        setShown = _useState2[1];
 
-          if (caught) {
-            // If the dispatched exception was caught by a catch block,
-            // then let that catch block handle the exception normally.
-            context.method = "next";
-            context.arg = undefined$1;
-          }
+    useEffect(function () {
+      var timeout = setTimeout(function () {
+        return setShown(true);
+      }, 400);
+      return function () {
+        return clearTimeout(timeout);
+      };
+    });
+    return !shown ? null : React.createElement("g", null, React.createElement("defs", null, React.createElement("pattern", {
+      id: "diagonalHatch",
+      width: "10",
+      height: "10",
+      patternTransform: "rotate(45 0 0)",
+      patternUnits: "userSpaceOnUse"
+    }, React.createElement("line", {
+      x1: "0",
+      y1: "0",
+      x2: "0",
+      y2: "10",
+      style: {
+        stroke: 'rgba(255,255,255,0.5)',
+        strokeWidth: 10
+      }
+    }))), React.createElement("circle", {
+      cx: "0",
+      cy: "0",
+      r: radius,
+      fill: "#f1f1f1"
+    }), React.createElement("circle", {
+      cx: "0",
+      cy: "0",
+      r: radius,
+      fill: "url(#diagonalHatch)"
+    }), React.createElement("text", {
+      x: "0",
+      y: "0",
+      transform: "rotate(90 0 0)",
+      dominantBaseline: "middle",
+      textAnchor: "middle"
+    }, "Loading\u2026"), React.createElement("circle", {
+      className: classes.path,
+      fill: "none",
+      strokeWidth: "4",
+      strokeLinecap: "round",
+      cx: "0",
+      cy: "0",
+      r: "60"
+    }));
+  });
+  return Loading;
+});
+
+var ChordDisplayErrorFactory = (function (_ref) {
+  var jbrequire = _ref.jbrequire;
+  var React = jbrequire('react');
+
+  var _jbrequire = jbrequire('@material-ui/core/styles'),
+      makeStyles = _jbrequire.makeStyles;
+
+  var _jbrequire2 = jbrequire('mobx-react'),
+      observer = _jbrequire2.observer;
+
+  var useStyles = makeStyles({
+    errorMessage: {},
+    errorBackground: {},
+    errorText: {}
+  }); // 'repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(255,255,255,.5) 5px, rgba(255,255,255,.5) 10px)',
+
+  var DisplayError = observer(function (_ref2) {
+    var _ref2$model = _ref2.model,
+        radius = _ref2$model.renderProps.radius,
+        error = _ref2$model.error;
+    var classes = useStyles();
+    return /*#__PURE__*/React.createElement("g", {
+      className: classes.errorMessage
+    }, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("pattern", {
+      id: "diagonalHatch",
+      width: "10",
+      height: "10",
+      patternTransform: "rotate(45 0 0)",
+      patternUnits: "userSpaceOnUse"
+    }, /*#__PURE__*/React.createElement("line", {
+      x1: "0",
+      y1: "0",
+      x2: "0",
+      y2: "10",
+      style: {
+        stroke: 'rgba(255,0,0,0.5)',
+        strokeWidth: 10
+      }
+    }))), /*#__PURE__*/React.createElement("circle", {
+      className: classes.errorBackground,
+      cx: "0",
+      cy: "0",
+      r: radius,
+      fill: "#ffb4b4"
+    }), /*#__PURE__*/React.createElement("circle", {
+      className: classes.errorPattern,
+      cx: "0",
+      cy: "0",
+      r: radius,
+      fill: "url(#diagonalHatch)"
+    }), /*#__PURE__*/React.createElement("text", {
+      className: classes.errorText,
+      x: "0",
+      y: "0",
+      transform: "rotate(90 0 0)",
+      dominantBaseline: "middle",
+      textAnchor: "middle"
+    }, String(error)));
+  });
+  return DisplayError;
+});
 
-          return !!caught;
-        }
+var RpcRenderedSvgGroupF = (function (_ref) {
+  var jbrequire = _ref.jbrequire;
+  var React = jbrequire('react');
 
-        for (var i = this.tryEntries.length - 1; i >= 0; --i) {
-          var entry = this.tryEntries[i];
-          var record = entry.completion;
+  var _jbrequire = jbrequire('mobx-state-tree'),
+      isAlive = _jbrequire.isAlive;
 
-          if (entry.tryLoc === "root") {
-            // Exception thrown outside of any try block that could handle
-            // it, so set the completion value of the entire function to
-            // throw the exception.
-            return handle("end");
-          }
+  var useEffect = React.useEffect,
+      useRef = React.useRef;
 
-          if (entry.tryLoc <= this.prev) {
-            var hasCatch = hasOwn.call(entry, "catchLoc");
-            var hasFinally = hasOwn.call(entry, "finallyLoc");
+  var _jbrequire2 = jbrequire('mobx-react'),
+      observer = _jbrequire2.observer,
+      MobxPropTypes = _jbrequire2.PropTypes;
 
-            if (hasCatch && hasFinally) {
-              if (this.prev < entry.catchLoc) {
-                return handle(entry.catchLoc, true);
-              } else if (this.prev < entry.finallyLoc) {
-                return handle(entry.finallyLoc);
-              }
-            } else if (hasCatch) {
-              if (this.prev < entry.catchLoc) {
-                return handle(entry.catchLoc, true);
-              }
-            } else if (hasFinally) {
-              if (this.prev < entry.finallyLoc) {
-                return handle(entry.finallyLoc);
-              }
-            } else {
-              throw new Error("try statement without catch or finally");
-            }
-          }
-        }
-      },
-      abrupt: function abrupt(type, arg) {
-        for (var i = this.tryEntries.length - 1; i >= 0; --i) {
-          var entry = this.tryEntries[i];
+  var _jbrequire3 = jbrequire('react-dom'),
+      unmountComponentAtNode = _jbrequire3.unmountComponentAtNode,
+      hydrate = _jbrequire3.hydrate;
 
-          if (entry.tryLoc <= this.prev && hasOwn.call(entry, "finallyLoc") && this.prev < entry.finallyLoc) {
-            var finallyEntry = entry;
-            break;
-          }
-        }
+  var _jbrequire4 = jbrequire('@jbrowse/core/util'),
+      rIC = _jbrequire4.rIC;
 
-        if (finallyEntry && (type === "break" || type === "continue") && finallyEntry.tryLoc <= arg && arg <= finallyEntry.finallyLoc) {
-          // Ignore the finally entry if control is not jumping to a
-          // location outside the try/catch block.
-          finallyEntry = null;
-        }
+  function RpcRenderedSvgGroup(_ref2) {
+    var model = _ref2.model;
+    var data = model.data,
+        html = model.html,
+        filled = model.filled,
+        renderingComponent = model.renderingComponent;
+    var ssrContainerNode = useRef(null);
+    useEffect(function () {
+      var domNode = ssrContainerNode.current;
 
-        var record = finallyEntry ? finallyEntry.completion : {};
-        record.type = type;
-        record.arg = arg;
+      function doHydrate() {
+        if (domNode && filled) {
+          if (domNode && domNode.innerHTML) {
+            domNode.style.display = 'none';
+            unmountComponentAtNode(domNode);
+          } // setting outline:none fixes react "focusable" element issue. see
+          // https://github.com/GMOD/jbrowse-components/issues/2160
 
-        if (finallyEntry) {
-          this.method = "next";
-          this.next = finallyEntry.finallyLoc;
-          return ContinueSentinel;
-        }
 
-        return this.complete(record);
-      },
-      complete: function complete(record, afterLoc) {
-        if (record.type === "throw") {
-          throw record.arg;
-        }
+          domNode.style.outline = 'none';
+          domNode.innerHTML = html; // use requestIdleCallback to defer main-thread rendering
+          // and hydration for when we have some free time. helps
+          // keep the framerate up.
 
-        if (record.type === "break" || record.type === "continue") {
-          this.next = record.arg;
-        } else if (record.type === "return") {
-          this.rval = this.arg = record.arg;
-          this.method = "return";
-          this.next = "end";
-        } else if (record.type === "normal" && afterLoc) {
-          this.next = afterLoc;
-        }
+          rIC(function () {
+            if (!isAlive(model)) {
+              return;
+            }
 
-        return ContinueSentinel;
-      },
-      finish: function finish(finallyLoc) {
-        for (var i = this.tryEntries.length - 1; i >= 0; --i) {
-          var entry = this.tryEntries[i];
+            var mainThreadRendering = React.createElement(renderingComponent, _objectSpread2(_objectSpread2({}, data), model.renderProps()), null);
+            rIC(function () {
+              if (!isAlive(model)) {
+                return;
+              }
 
-          if (entry.finallyLoc === finallyLoc) {
-            this.complete(entry.completion, entry.afterLoc);
-            resetTryEntry(entry);
-            return ContinueSentinel;
-          }
+              hydrate(mainThreadRendering, domNode);
+            });
+          });
         }
-      },
-      "catch": function _catch(tryLoc) {
-        for (var i = this.tryEntries.length - 1; i >= 0; --i) {
-          var entry = this.tryEntries[i];
-
-          if (entry.tryLoc === tryLoc) {
-            var record = entry.completion;
-
-            if (record.type === "throw") {
-              var thrown = record.arg;
-              resetTryEntry(entry);
-            }
-
-            return thrown;
-          }
-        } // The context.catch method must only be called with a location
-        // argument that corresponds to a known catch block.
+      }
 
+      doHydrate();
+      return function () {
+        if (domNode) {
+          unmountComponentAtNode(domNode);
+        }
+      };
+    });
+    return /*#__PURE__*/React.createElement("g", {
+      ref: ssrContainerNode
+    });
+  }
 
-        throw new Error("illegal catch attempt");
-      },
-      delegateYield: function delegateYield(iterable, resultName, nextLoc) {
-        this.delegate = {
-          iterator: values(iterable),
-          resultName: resultName,
-          nextLoc: nextLoc
-        };
+  RpcRenderedSvgGroup.propTypes = {
+    model: MobxPropTypes.observableObject.isRequired
+  };
+  return observer(RpcRenderedSvgGroup);
+});
 
-        if (this.method === "next") {
-          // Deliberately forget the last sent value so that we don't
-          // accidentally pass it on to the delegate.
-          this.arg = undefined$1;
-        }
+var BaseChordDisplay = (function (_ref) {
+  var lib = _ref.lib,
+      load = _ref.load;
+  var React = lib.react;
+  var _lib$mobxReact = lib['mobx-react'],
+      observer = _lib$mobxReact.observer,
+      MobxPropTypes = _lib$mobxReact.PropTypes;
+  var Loading = load(ChordDisplayLoadingFactory);
+  var DisplayError = load(ChordDisplayErrorFactory);
+  var RpcRenderedSvgGroup = load(RpcRenderedSvgGroupF); // eslint-disable-next-line @typescript-eslint/no-explicit-any
 
-        return ContinueSentinel;
-      }
-    }; // Regardless of whether this script is executing as a CommonJS module
-    // or not, return the runtime object so that we can declare the variable
-    // regeneratorRuntime in the outer scope, which allows this module to be
-    // injected easily by `bin/regenerator --include-runtime script.js`.
+  function BaseChordDisplay(_ref2) {
+    var display = _ref2.display;
 
-    return exports;
-  }( // If this script is executing as a CommonJS module, use module.exports
-  // as the regeneratorRuntime namespace. Otherwise create a new empty
-  // object. Either way, the resulting object will be used to initialize
-  // the regeneratorRuntime variable at the top of this file.
-   module.exports );
+    if (display.error) {
+      return React.createElement(DisplayError, {
+        model: display
+      });
+    }
 
-  try {
-    regeneratorRuntime = runtime;
-  } catch (accidentalStrictMode) {
-    // This module should not be running in strict mode, so the above
-    // assignment should always work unless something is misconfigured. Just
-    // in case runtime.js accidentally runs in strict mode, in modern engines
-    // we can explicitly access globalThis. In older engines we can escape
-    // strict mode using a global Function call. This could conceivably fail
-    // if a Content Security Policy forbids using Function, but in that case
-    // the proper solution is to fix the accidental strict mode problem. If
-    // you've misconfigured your bundler to force strict mode and applied a
-    // CSP to forbid Function, and you're not willing to fix either of those
-    // problems, please detail your unique predicament in a GitHub issue.
-    if (typeof globalThis === "object") {
-      globalThis.regeneratorRuntime = runtime;
-    } else {
-      Function("r", "regeneratorRuntime = r")(runtime);
+    if (!display.filled) {
+      return React.createElement(Loading, {
+        model: display
+      });
     }
+
+    return React.createElement(RpcRenderedSvgGroup, {
+      model: display
+    });
   }
+
+  BaseChordDisplay.propTypes = {
+    display: MobxPropTypes.observableObject.isRequired
+  };
+  return observer(BaseChordDisplay);
 });
 
 var _excluded = ["html"];
@@ -2523,6 +2525,65 @@ var CircularViewPlugin = /*#__PURE__*/function (_Plugin) {
           name: 'CircularView'
         });
       });
+      pluginManager.addToExtensionPoint('LaunchView-CircularView',
+      /*#__PURE__*/
+      // @ts-ignore
+      function () {
+        var _ref2 = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee(_ref) {
+          var session, assembly, _ref$tracks, tracks, assemblyManager, view, asm;
+
+          return runtime_1.wrap(function _callee$(_context) {
+            while (1) {
+              switch (_context.prev = _context.next) {
+                case 0:
+                  session = _ref.session, assembly = _ref.assembly, _ref$tracks = _ref.tracks, tracks = _ref$tracks === void 0 ? [] : _ref$tracks;
+                  assemblyManager = session.assemblyManager;
+                  view = session.addView('CircularView', {});
+                  _context.next = 5;
+                  return mobx.when(function () {
+                    return view.initialized;
+                  });
+
+                case 5:
+                  if (assembly) {
+                    _context.next = 7;
+                    break;
+                  }
+
+                  throw new Error('No assembly provided when launching circular genome view');
+
+                case 7:
+                  _context.next = 9;
+                  return assemblyManager.waitForAssembly(assembly);
+
+                case 9:
+                  asm = _context.sent;
+
+                  if (asm) {
+                    _context.next = 12;
+                    break;
+                  }
+
+                  throw new Error("Assembly \"".concat(assembly, "\" not found when launching circular genome view"));
+
+                case 12:
+                  view.setDisplayedRegions(asm.regions || []);
+                  tracks.forEach(function (track) {
+                    return view.showTrack(track);
+                  });
+
+                case 14:
+                case "end":
+                  return _context.stop();
+              }
+            }
+          }, _callee);
+        }));
+
+        return function (_x) {
+          return _ref2.apply(this, arguments);
+        };
+      }());
     }
   }, {
     key: "configure",
@@ -2730,17 +2791,10 @@ var useStyles$1 = /*#__PURE__*/core.makeStyles(function (theme) {
       marginBottom: theme.spacing(4)
     }
   };
-});
-var ErrorDisplay = /*#__PURE__*/mobxReact.observer(function (_ref) {
-  var error = _ref.error;
-  return /*#__PURE__*/React__default.createElement(core.Typography, {
-    variant: "h6",
-    color: "error"
-  }, "".concat(error));
 }); // eslint-disable-next-line @typescript-eslint/no-explicit-any
 
-var ImportForm = /*#__PURE__*/mobxReact.observer(function (_ref2) {
-  var model = _ref2.model;
+var ImportForm = /*#__PURE__*/mobxReact.observer(function (_ref) {
+  var model = _ref.model;
   var classes = useStyles$1();
   var session = util.getSession(model);
   var modelError = model.error;
@@ -2761,7 +2815,7 @@ var ImportForm = /*#__PURE__*/mobxReact.observer(function (_ref2) {
   var assemblyError = assemblyNames.length ? assembly === null || assembly === void 0 ? void 0 : assembly.error : 'No configured assemblies';
   var regions = (assembly === null || assembly === void 0 ? void 0 : assembly.regions) || [];
   var err = assemblyError || error;
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(core.Container, {
+  return /*#__PURE__*/React__default.createElement(core.Container, {
     className: classes.importFormContainer
   }, err ? /*#__PURE__*/React__default.createElement(core.Grid, {
     container: true,
@@ -2770,7 +2824,7 @@ var ImportForm = /*#__PURE__*/mobxReact.observer(function (_ref2) {
     alignItems: "center"
   }, /*#__PURE__*/React__default.createElement(core.Grid, {
     item: true
-  }, /*#__PURE__*/React__default.createElement(ErrorDisplay, {
+  }, /*#__PURE__*/React__default.createElement(ErrorMessage, {
     error: err
   }))) : null, /*#__PURE__*/React__default.createElement(core.Grid, {
     container: true,
@@ -2789,13 +2843,13 @@ var ImportForm = /*#__PURE__*/mobxReact.observer(function (_ref2) {
   })), /*#__PURE__*/React__default.createElement(core.Grid, {
     item: true
   }, /*#__PURE__*/React__default.createElement(core.Button, {
-    disabled: !(regions && regions.length),
+    disabled: !(regions !== null && regions !== void 0 && regions.length),
     onClick: function onClick() {
       return model.setDisplayedRegions(regions);
     },
     variant: "contained",
     color: "primary"
-  }, regions.length ? 'Open' : 'Loading…')))));
+  }, regions.length ? 'Open' : 'Loading…'))));
 });
 
 var dragHandleHeight = 3;
@@ -2838,20 +2892,20 @@ var useStyles$2 = /*#__PURE__*/core.makeStyles(function (theme) {
 });
 var Slices = /*#__PURE__*/mobxReact.observer(function (_ref) {
   var model = _ref.model;
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(React__default.Fragment, null, model.staticSlices.map(function (slice) {
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, model.staticSlices.map(function (slice) {
     return /*#__PURE__*/React__default.createElement(CircularRuler, {
       key: util.assembleLocString(slice.region.elided ? slice.region.regions[0] : slice.region),
       model: model,
       slice: slice
     });
-  })), /*#__PURE__*/React__default.createElement(React__default.Fragment, null, model.tracks.map(function (track) {
+  }), model.tracks.map(function (track) {
     var display = track.displays[0];
     return /*#__PURE__*/React__default.createElement(display.RenderingComponent, {
       key: display.id,
       display: display,
       view: model
     });
-  })));
+  }));
 });
 var Controls = /*#__PURE__*/mobxReact.observer(function (_ref2) {
   var model = _ref2.model,
@@ -2909,11 +2963,9 @@ var CircularView$1 = /*#__PURE__*/mobxReact.observer(function (_ref3) {
       height: model.height
     },
     "data-testid": model.id
-  }, model.error ? /*#__PURE__*/React__default.createElement("p", {
-    style: {
-      color: 'red'
-    }
-  }, model.error.message) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, showImportForm ? /*#__PURE__*/React__default.createElement(ImportForm, {
+  }, model.error ? /*#__PURE__*/React__default.createElement(ui.ErrorMessage, {
+    error: model.error
+  }) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, showImportForm ? /*#__PURE__*/React__default.createElement(ImportForm, {
     model: model
   }) : null, /*#__PURE__*/React__default.createElement(React__default.Fragment, null, !showFigure ? null : /*#__PURE__*/React__default.createElement("div", {
     className: classes.scroller,