@jbrowse/plugin-circular-view 1.7.0 → 1.7.3

package/dist/plugin-circular-view.esm.js

@@ -1,3004 +0,0 @@
-import React, { lazy, useState } from 'react';
-import { transaction, when } from 'mobx';
-import { polarToCartesian, objectFromEntries, assembleLocString, clamp, getSession, isSessionModelWithWidgets, getContainingView, makeAbortableReaction, isAbstractMenuManager, radToDeg } from '@jbrowse/core/util';
-import Plugin from '@jbrowse/core/Plugin';
-import ViewType from '@jbrowse/core/pluggableElementTypes/ViewType';
-import DataUsageIcon from '@material-ui/icons/DataUsage';
-import { types, getParent, cast, resolveIdentifier, getRoot, getEnv, isAlive } from 'mobx-state-tree';
-import { Region } from '@jbrowse/core/util/types/mst';
-import { readConfObject, getConf, ConfigurationSchema } from '@jbrowse/core/configuration';
-import { BaseViewModel, BaseDisplay } from '@jbrowse/core/pluggableElementTypes/models';
-import CircularChordRendererType from '@jbrowse/core/pluggableElementTypes/renderers/CircularChordRendererType';
-import { isFeature } from '@jbrowse/core/util/simpleFeature';
-import { getParentRenderProps, getTrackAssemblyNames, getRpcSessionId } from '@jbrowse/core/util/tracks';
-import { observer } from 'mobx-react';
-import { ErrorMessage as ErrorMessage$1, ResizeHandle } from '@jbrowse/core/ui';
-import { Container, Grid, Button, makeStyles as makeStyles$1, IconButton } from '@material-ui/core';
-import { grey } from '@material-ui/core/colors';
-import ZoomOut from '@material-ui/icons/ZoomOut';
-import ZoomIn from '@material-ui/icons/ZoomIn';
-import RotateLeft from '@material-ui/icons/RotateLeft';
-import RotateRight from '@material-ui/icons/RotateRight';
-import LockOutline from '@material-ui/icons/LockOutlined';
-import LockOpen from '@material-ui/icons/LockOpen';
-import { TrackSelector } from '@jbrowse/core/ui/Icons';
-import { makeContrasting } from '@jbrowse/core/util/color';
-import { useTheme, makeStyles } from '@material-ui/core/styles';
-import ErrorMessage from '@jbrowse/core/ui/ErrorMessage';
-import AssemblySelector from '@jbrowse/core/ui/AssemblySelector';
-
-function ownKeys(object, enumerableOnly) {
-  var keys = Object.keys(object);
-
-  if (Object.getOwnPropertySymbols) {
-    var symbols = Object.getOwnPropertySymbols(object);
-    enumerableOnly && (symbols = symbols.filter(function (sym) {
-      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-    })), keys.push.apply(keys, symbols);
-  }
-
-  return keys;
-}
-
-function _objectSpread2(target) {
-  for (var i = 1; i < arguments.length; i++) {
-    var source = null != arguments[i] ? arguments[i] : {};
-    i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
-      _defineProperty(target, key, source[key]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
-      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-    });
-  }
-
-  return target;
-}
-
-function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
-  try {
-    var info = gen[key](arg);
-    var value = info.value;
-  } catch (error) {
-    reject(error);
-    return;
-  }
-
-  if (info.done) {
-    resolve(value);
-  } else {
-    Promise.resolve(value).then(_next, _throw);
-  }
-}
-
-function _asyncToGenerator(fn) {
-  return function () {
-    var self = this,
-        args = arguments;
-    return new Promise(function (resolve, reject) {
-      var gen = fn.apply(self, args);
-
-      function _next(value) {
-        asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
-      }
-
-      function _throw(err) {
-        asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
-      }
-
-      _next(undefined);
-    });
-  };
-}
-
-function _classCallCheck(instance, Constructor) {
-  if (!(instance instanceof Constructor)) {
-    throw new TypeError("Cannot call a class as a function");
-  }
-}
-
-function _defineProperties(target, props) {
-  for (var i = 0; i < props.length; i++) {
-    var descriptor = props[i];
-    descriptor.enumerable = descriptor.enumerable || false;
-    descriptor.configurable = true;
-    if ("value" in descriptor) descriptor.writable = true;
-    Object.defineProperty(target, descriptor.key, descriptor);
-  }
-}
-
-function _createClass(Constructor, protoProps, staticProps) {
-  if (protoProps) _defineProperties(Constructor.prototype, protoProps);
-  if (staticProps) _defineProperties(Constructor, staticProps);
-  Object.defineProperty(Constructor, "prototype", {
-    writable: false
-  });
-  return Constructor;
-}
-
-function _defineProperty(obj, key, value) {
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value: value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-
-  return obj;
-}
-
-function _inherits(subClass, superClass) {
-  if (typeof superClass !== "function" && superClass !== null) {
-    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", {
-    writable: false
-  });
-  if (superClass) _setPrototypeOf(subClass, superClass);
-}
-
-function _getPrototypeOf(o) {
-  _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
-    return o.__proto__ || Object.getPrototypeOf(o);
-  };
-  return _getPrototypeOf(o);
-}
-
-function _setPrototypeOf(o, p) {
-  _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
-    o.__proto__ = p;
-    return o;
-  };
-
-  return _setPrototypeOf(o, p);
-}
-
-function _isNativeReflectConstruct() {
-  if (typeof Reflect === "undefined" || !Reflect.construct) return false;
-  if (Reflect.construct.sham) return false;
-  if (typeof Proxy === "function") return true;
-
-  try {
-    Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
-    return true;
-  } catch (e) {
-    return false;
-  }
-}
-
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
-  }
-
-  return target;
-}
-
-function _objectWithoutProperties(source, excluded) {
-  if (source == null) return {};
-
-  var target = _objectWithoutPropertiesLoose(source, excluded);
-
-  var key, i;
-
-  if (Object.getOwnPropertySymbols) {
-    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
-
-    for (i = 0; i < sourceSymbolKeys.length; i++) {
-      key = sourceSymbolKeys[i];
-      if (excluded.indexOf(key) >= 0) continue;
-      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
-      target[key] = source[key];
-    }
-  }
-
-  return target;
-}
-
-function _assertThisInitialized(self) {
-  if (self === void 0) {
-    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-  }
-
-  return self;
-}
-
-function _possibleConstructorReturn(self, call) {
-  if (call && (typeof call === "object" || typeof call === "function")) {
-    return call;
-  } else if (call !== void 0) {
-    throw new TypeError("Derived constructors may only return object or undefined");
-  }
-
-  return _assertThisInitialized(self);
-}
-
-function _createSuper(Derived) {
-  var hasNativeReflectConstruct = _isNativeReflectConstruct();
-
-  return function _createSuperInternal() {
-    var Super = _getPrototypeOf(Derived),
-        result;
-
-    if (hasNativeReflectConstruct) {
-      var NewTarget = _getPrototypeOf(this).constructor;
-
-      result = Reflect.construct(Super, arguments, NewTarget);
-    } else {
-      result = Super.apply(this, arguments);
-    }
-
-    return _possibleConstructorReturn(this, result);
-  };
-}
-
-function _slicedToArray(arr, i) {
-  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
-}
-
-function _toConsumableArray(arr) {
-  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
-}
-
-function _arrayWithoutHoles(arr) {
-  if (Array.isArray(arr)) return _arrayLikeToArray(arr);
-}
-
-function _arrayWithHoles(arr) {
-  if (Array.isArray(arr)) return arr;
-}
-
-function _iterableToArray(iter) {
-  if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
-}
-
-function _iterableToArrayLimit(arr, i) {
-  var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
-
-  if (_i == null) return;
-  var _arr = [];
-  var _n = true;
-  var _d = false;
-
-  var _s, _e;
-
-  try {
-    for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
-      _arr.push(_s.value);
-
-      if (i && _arr.length === i) break;
-    }
-  } catch (err) {
-    _d = true;
-    _e = err;
-  } finally {
-    try {
-      if (!_n && _i["return"] != null) _i["return"]();
-    } finally {
-      if (_d) throw _e;
-    }
-  }
-
-  return _arr;
-}
-
-function _unsupportedIterableToArray(o, minLen) {
-  if (!o) return;
-  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
-  var n = Object.prototype.toString.call(o).slice(8, -1);
-  if (n === "Object" && o.constructor) n = o.constructor.name;
-  if (n === "Map" || n === "Set") return Array.from(o);
-  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
-}
-
-function _arrayLikeToArray(arr, len) {
-  if (len == null || len > arr.length) len = arr.length;
-
-  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
-
-  return arr2;
-}
-
-function _nonIterableSpread() {
-  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-
-function _nonIterableRest() {
-  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-
-function _createForOfIteratorHelper(o, allowArrayLike) {
-  var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
-
-  if (!it) {
-    if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
-      if (it) o = it;
-      var i = 0;
-
-      var F = function () {};
-
-      return {
-        s: F,
-        n: function () {
-          if (i >= o.length) return {
-            done: true
-          };
-          return {
-            done: false,
-            value: o[i++]
-          };
-        },
-        e: function (e) {
-          throw e;
-        },
-        f: F
-      };
-    }
-
-    throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-  }
-
-  var normalCompletion = true,
-      didErr = false,
-      err;
-  return {
-    s: function () {
-      it = it.call(o);
-    },
-    n: function () {
-      var step = it.next();
-      normalCompletion = step.done;
-      return step;
-    },
-    e: function (e) {
-      didErr = true;
-      err = e;
-    },
-    f: function () {
-      try {
-        if (!normalCompletion && it.return != null) it.return();
-      } finally {
-        if (didErr) throw err;
-      }
-    }
-  };
-}
-
-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) {
-
-    var Op = Object.prototype;
-    var hasOwn = Op.hasOwnProperty;
-    var undefined$1; // More compressible than void 0.
-
-    var $Symbol = typeof Symbol === "function" ? Symbol : {};
-    var iteratorSymbol = $Symbol.iterator || "@@iterator";
-    var asyncIteratorSymbol = $Symbol.asyncIterator || "@@asyncIterator";
-    var toStringTagSymbol = $Symbol.toStringTag || "@@toStringTag";
-
-    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;
-      };
-    }
-
-    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;
-    }
-
-    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 tryCatch(fn, obj, arg) {
-      try {
-        return {
-          type: "normal",
-          arg: fn.call(obj, arg)
-        };
-      } catch (err) {
-        return {
-          type: "throw",
-          arg: err
-        };
-      }
-    }
-
-    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 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() {}
-
-    function GeneratorFunction() {}
-
-    function GeneratorFunctionPrototype() {} // This is a polyfill for %IteratorPrototype% for environments that
-    // don't natively support it.
-
-
-    var IteratorPrototype = {};
-    define(IteratorPrototype, iteratorSymbol, function () {
-      return this;
-    });
-    var getProto = Object.getPrototypeOf;
-    var NativeIteratorPrototype = getProto && getProto(getProto(values([])));
-
-    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.
-
-    function defineIteratorMethods(prototype) {
-      ["next", "throw", "return"].forEach(function (method) {
-        define(prototype, method, function (arg) {
-          return this._invoke(method, arg);
-        });
-      });
-    }
-
-    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;
-    };
-
-    exports.mark = function (genFun) {
-      if (Object.setPrototypeOf) {
-        Object.setPrototypeOf(genFun, GeneratorFunctionPrototype);
-      } else {
-        genFun.__proto__ = GeneratorFunctionPrototype;
-        define(genFun, toStringTagSymbol, "GeneratorFunction");
-      }
-
-      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.
-
-
-    exports.awrap = function (arg) {
-      return {
-        __await: arg
-      };
-    };
-
-    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);
-            });
-          }
-
-          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);
-          });
-        }
-      }
-
-      var previousPromise;
-
-      function enqueue(method, arg) {
-        function callInvokeWithMethodAndArg() {
-          return new PromiseImpl(function (resolve, reject) {
-            invoke(method, arg, resolve, reject);
-          });
-        }
-
-        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).
-
-
-      this._invoke = enqueue;
-    }
-
-    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.
-
-    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");
-        }
-
-        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 doneResult();
-        }
-
-        context.method = method;
-        context.arg = arg;
-
-        while (true) {
-          var delegate = context.delegate;
-
-          if (delegate) {
-            var delegateResult = maybeInvokeDelegate(delegate, context);
-
-            if (delegateResult) {
-              if (delegateResult === ContinueSentinel) continue;
-              return delegateResult;
-            }
-          }
-
-          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;
-            }
-
-            context.dispatchException(context.arg);
-          } else if (context.method === "return") {
-            context.abrupt("return", context.arg);
-          }
-
-          state = GenStateExecuting;
-          var record = tryCatch(innerFn, self, context);
-
-          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;
-
-            if (record.arg === ContinueSentinel) {
-              continue;
-            }
-
-            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.
-
-            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.
-
-
-    function maybeInvokeDelegate(delegate, context) {
-      var method = delegate.iterator[context.method];
-
-      if (method === undefined$1) {
-        // A .throw or .return when the delegate iterator has no .throw
-        // method always terminates the yield* loop.
-        context.delegate = null;
-
-        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);
-
-            if (context.method === "throw") {
-              // If maybeInvokeDelegate(context) changed context.method from
-              // "return" to "throw", let that override the TypeError below.
-              return ContinueSentinel;
-            }
-          }
-
-          context.method = "throw";
-          context.arg = new TypeError("The iterator does not provide a 'throw' method");
-        }
-
-        return ContinueSentinel;
-      }
-
-      var record = tryCatch(method, delegate.iterator, context.arg);
-
-      if (record.type === "throw") {
-        context.method = "throw";
-        context.arg = record.arg;
-        context.delegate = null;
-        return ContinueSentinel;
-      }
-
-      var info = record.arg;
-
-      if (!info) {
-        context.method = "throw";
-        context.arg = new TypeError("iterator result is not an object");
-        context.delegate = null;
-        return ContinueSentinel;
-      }
-
-      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).
-
-        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.
-
-        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.
-
-
-      context.delegate = null;
-      return ContinueSentinel;
-    } // Define Generator.prototype.{next,throw,return} in terms of the
-    // unified ._invoke helper method.
-
-
-    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.
-
-    define(Gp, iteratorSymbol, function () {
-      return this;
-    });
-    define(Gp, "toString", function () {
-      return "[object Generator]";
-    });
-
-    function pushTryEntry(locs) {
-      var entry = {
-        tryLoc: locs[0]
-      };
-
-      if (1 in locs) {
-        entry.catchLoc = locs[1];
-      }
-
-      if (2 in locs) {
-        entry.finallyLoc = locs[2];
-        entry.afterLoc = locs[3];
-      }
-
-      this.tryEntries.push(entry);
-    }
-
-    function resetTryEntry(entry) {
-      var record = entry.completion || {};
-      record.type = "normal";
-      delete record.arg;
-      entry.completion = record;
-    }
-
-    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);
-    }
-
-    exports.keys = function (object) {
-      var keys = [];
-
-      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 function next() {
-        while (keys.length) {
-          var key = keys.pop();
-
-          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.
-
-
-        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;
-        }
-
-        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;
-          };
-
-          return next.next = next;
-        }
-      } // Return an iterator with no values.
-
-
-      return {
-        next: doneResult
-      };
-    }
-
-    exports.values = values;
-
-    function doneResult() {
-      return {
-        value: undefined$1,
-        done: true
-      };
-    }
-
-    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.
-
-        this.sent = this._sent = undefined$1;
-        this.done = false;
-        this.delegate = null;
-        this.method = "next";
-        this.arg = undefined$1;
-        this.tryEntries.forEach(resetTryEntry);
-
-        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;
-            }
-          }
-        }
-      },
-      stop: function stop() {
-        this.done = true;
-        var rootEntry = this.tryEntries[0];
-        var rootRecord = rootEntry.completion;
-
-        if (rootRecord.type === "throw") {
-          throw rootRecord.arg;
-        }
-
-        return this.rval;
-      },
-      dispatchException: function dispatchException(exception) {
-        if (this.done) {
-          throw exception;
-        }
-
-        var context = this;
-
-        function handle(loc, caught) {
-          record.type = "throw";
-          record.arg = exception;
-          context.next = loc;
-
-          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;
-        }
-
-        for (var i = this.tryEntries.length - 1; i >= 0; --i) {
-          var entry = this.tryEntries[i];
-          var record = entry.completion;
-
-          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");
-          }
-
-          if (entry.tryLoc <= this.prev) {
-            var hasCatch = hasOwn.call(entry, "catchLoc");
-            var hasFinally = hasOwn.call(entry, "finallyLoc");
-
-            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];
-
-          if (entry.tryLoc <= this.prev && hasOwn.call(entry, "finallyLoc") && this.prev < entry.finallyLoc) {
-            var finallyEntry = entry;
-            break;
-          }
-        }
-
-        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;
-
-        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;
-        }
-
-        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;
-        }
-
-        return ContinueSentinel;
-      },
-      finish: function finish(finallyLoc) {
-        for (var i = this.tryEntries.length - 1; i >= 0; --i) {
-          var entry = this.tryEntries[i];
-
-          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];
-
-          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.
-
-
-        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;
-      }
-    }; // 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);
-    }
-  }
-});
-
-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 findCircleIntersectionY(x, cx, cy, r, resultArray) {
-  var d = Math.abs(x - cx);
-
-  if (d > r) {
-    return;
-  }
-
-  if (d === r) {
-    resultArray.push([x, cy]);
-  }
-
-  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);
-
-  if (x < 0) {
-    if (y <= 0) {
-      theta += Math.PI;
-    } else {
-      theta -= Math.PI;
-    }
-  }
-
-  return theta;
-}
-
-function cartesianToPolar(x, y) {
-  var rho = Math.sqrt(x * x + y * y);
-
-  if (rho === 0) {
-    return [0, 0];
-  }
-
-  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;
-  }
-
-  if (r1length + 0.0001 >= twoPi || r2length + 0.0001 >= twoPi) {
-    return true;
-  } // put both range starts between 2π and 4π
-
-
-  r1start = (r1start % twoPi + twoPi) % twoPi + twoPi;
-  r2start = (r2start % twoPi + twoPi) % twoPi + twoPi;
-
-  if (r1start < r2start + r2length && r1start + r1length > r2start) {
-    return true;
-  } // move r2 2π to the left and check
-
-
-  r2start -= twoPi;
-
-  if (r1start < r2start + r2length && r1start + r1length > r2start) {
-    return true;
-  } // move it 2π to the right and check
-
-
-  r2start += twoPi + twoPi;
-  return r1start < r2start + r2length && r1start + r1length > r2start;
-} // return which arc range has any part of the circle visible in the viewport
-
-function viewportVisibleSection(viewSides, circleCenter, circleRadius) {
-  var _viewSides = _slicedToArray(viewSides, 4),
-      viewL = _viewSides[0],
-      viewR = _viewSides[1],
-      viewT = _viewSides[2],
-      viewB = _viewSides[3];
-
-  var _circleCenter = _slicedToArray(circleCenter, 2),
-      cx = _circleCenter[0],
-      cy = _circleCenter[1]; // transform coordinate system to center of circle
-
-
-  viewL -= cx;
-  viewR -= cx;
-  viewT -= cy;
-  viewB -= cy;
-  var centerIsInsideViewport = viewL < 0 && viewR > 0 && viewT < 0 && viewB > 0;
-
-  if (centerIsInsideViewport) {
-    var _vertices = [[viewL, viewT], [viewR, viewT], [viewL, viewB], [viewR, viewB]];
-    var maxRho = -Infinity;
-
-    for (var i = 0; i < _vertices.length; i += 1) {
-      var _vertices$i = _slicedToArray(_vertices[i], 2),
-          x = _vertices$i[0],
-          y = _vertices$i[1];
-
-      var rho = Math.sqrt(x * x + y * y);
-
-      if (rho > maxRho) {
-        maxRho = rho;
-      }
-    }
-
-    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 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
-
-  if (-viewL < circleRadius) {
-    vertices.push([viewL, 0]);
-  }
-
-  if (viewR < circleRadius) {
-    vertices.push([viewR, 0]);
-  }
-
-  if (-viewT < circleRadius) {
-    vertices.push([0, viewT]);
-  }
-
-  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)
-
-
-  var reflect = viewL >= 0 ? -1 : 1; // viewportCenterTheta < Math.PI / 2 || viewportCenterTheta > 1.5 * Math.PI
-  //   ? -1
-  //   : 1
-
-  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];
-
-    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
-
-
-      if (_rho <= circleRadius + 0.001) {
-        // ignore theta if rho is 0
-        if (theta < thetaMin && _rho > 0.0001) {
-          thetaMin = theta;
-        }
-
-        if (theta > thetaMax && _rho > 0.0001) {
-          thetaMax = theta;
-        }
-
-        if (_rho < rhoMin) {
-          rhoMin = _rho;
-        }
-
-        if (_rho > rhoMax) {
-          rhoMax = _rho;
-        }
-      }
-    }
-  }
-
-  if (reflect === -1) {
-    thetaMin += Math.PI;
-    thetaMax += Math.PI;
-  }
-
-  if (thetaMin > 2 * Math.PI && thetaMax > 2 * Math.PI) {
-    thetaMin -= 2 * Math.PI;
-    thetaMax -= 2 * Math.PI;
-  }
-
-  return {
-    rho: [rhoMin, Math.min(circleRadius, rhoMax)],
-    theta: [thetaMin, thetaMax]
-  };
-}
-
-var Slice = /*#__PURE__*/function () {
-  function Slice(view, region, currentRadianOffset, radianWidth) {
-    _classCallCheck(this, Slice);
-
-    this.region = region;
-    this.radianWidth = radianWidth;
-    var bpPerRadian = view.bpPerRadian;
-    this.key = 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);
-  }
-
-  _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;
-      }
-
-      var totalRadians = offsetBp / this.bpPerRadian + this.offsetRadians;
-      return polarToCartesian(radiusPx, totalRadians);
-    }
-  }, {
-    key: "toJSON",
-    value: function toJSON() {
-      return objectFromEntries(Object.entries(this));
-    }
-  }]);
-
-  return Slice;
-}(); // eslint-disable-next-line @typescript-eslint/no-explicit-any
-
-function calculateStaticSlices(self) {
-  var slices = [];
-  var currentRadianOffset = 0;
-
-  var _iterator = _createForOfIteratorHelper(self.elidedRegions),
-      _step;
-
-  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 slices;
-} // eslint-disable-next-line @typescript-eslint/no-explicit-any
-
-
-function sliceIsVisible(self, slice) {
-  var _self$visibleSection$ = _slicedToArray(self.visibleSection.theta, 2),
-      visibleThetaMin = _self$visibleSection$[0],
-      visibleThetaMax = _self$visibleSection$[1];
-
-  return thetaRangesOverlap(slice.offsetRadians + self.offsetRadians, slice.radianWidth, visibleThetaMin, visibleThetaMax - visibleThetaMin);
-}
-
-function CircularView(pluginManager) {
-  var minHeight = 40;
-  var minWidth = 100;
-  var defaultHeight = 400;
-  return types.compose(BaseViewModel, types.model('CircularView', {
-    type: types.literal('CircularView'),
-    offsetRadians: -Math.PI / 2,
-    bpPerPx: 2000000,
-    tracks: types.array(pluginManager.pluggableMstType('track', 'stateModel')),
-    hideVerticalResizeHandle: false,
-    hideTrackSelectorButton: false,
-    lockedFitToWindow: true,
-    disableImportForm: false,
-    height: types.optional(types.refinement('trackHeight', types.number, function (n) {
-      return n >= minHeight;
-    }), defaultHeight),
-    minimumRadiusPx: 25,
-    spacingPx: 10,
-    paddingPx: 80,
-    lockedPaddingPx: 100,
-    minVisibleWidth: 6,
-    minimumBlockWidth: 20,
-    displayedRegions: types.array(Region),
-    scrollX: 0,
-    scrollY: 0,
-    trackSelectorType: 'hierarchical'
-  })["volatile"](function () {
-    return {
-      width: 0
-    };
-  }).views(function (self) {
-    return {
-      get staticSlices() {
-        return calculateStaticSlices(self);
-      },
-
-      get visibleStaticSlices() {
-        return this.staticSlices.filter(sliceIsVisible.bind(this, self));
-      },
-
-      get visibleSection() {
-        return viewportVisibleSection([self.scrollX, self.scrollX + self.width, self.scrollY, self.scrollY + self.height], this.centerXY, this.radiusPx);
-      },
-
-      get circumferencePx() {
-        var elidedBp = 0;
-
-        var _iterator = _createForOfIteratorHelper(this.elidedRegions),
-            _step;
-
-        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;
-      },
-
-      get radiusPx() {
-        return this.circumferencePx / (2 * Math.PI);
-      },
-
-      get bpPerRadian() {
-        return self.bpPerPx * this.radiusPx;
-      },
-
-      get pxPerRadian() {
-        return this.radiusPx;
-      },
-
-      get centerXY() {
-        return [this.radiusPx + self.paddingPx, this.radiusPx + self.paddingPx];
-      },
-
-      get totalBp() {
-        var total = 0;
-
-        var _iterator2 = _createForOfIteratorHelper(self.displayedRegions),
-            _step2;
-
-        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();
-        }
-
-        return total;
-      },
-
-      get maximumRadiusPx() {
-        return self.lockedFitToWindow ? Math.min(self.width, self.height) / 2 - self.lockedPaddingPx : 1000000;
-      },
-
-      get maxBpPerPx() {
-        var minCircumferencePx = 2 * Math.PI * self.minimumRadiusPx;
-        return this.totalBp / minCircumferencePx;
-      },
-
-      get minBpPerPx() {
-        // min depends on window dimensions, clamp between old min(0.01) and max
-        var maxCircumferencePx = 2 * Math.PI * this.maximumRadiusPx;
-        return clamp(this.totalBp / maxCircumferencePx, 0.0000000001, this.maxBpPerPx);
-      },
-
-      get atMaxBpPerPx() {
-        return self.bpPerPx >= this.maxBpPerPx;
-      },
-
-      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];
-      },
-
-      get figureHeight() {
-        return this.figureDimensions[1];
-      },
-
-      // 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 (widthPx < self.minVisibleWidth) {
-            // too small to see, collapse into a single elision region
-            var lastVisible = visible[visible.length - 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
-
-        for (var i = 0; i < visible.length; i += 1) {
-          var v = visible[i];
-
-          if (v.elided && v.regions.length === 1) {
-            delete v.elided;
-            visible[i] = _objectSpread2(_objectSpread2({}, v), v.regions[0]);
-          }
-        }
-
-        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 = getSession(self),
-            assemblyManager = _getSession.assemblyManager;
-
-        return this.assemblyNames.every(function (a) {
-          var _assemblyManager$get;
-
-          return (_assemblyManager$get = assemblyManager.get(a)) === null || _assemblyManager$get === void 0 ? void 0 : _assemblyManager$get.initialized;
-        });
-      }
-
-    };
-  })["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 = clamp(newVal, self.minBpPerPx, self.maxBpPerPx);
-      },
-      setModelViewWhenAdjust: function setModelViewWhenAdjust(secondCondition) {
-        if (self.lockedFitToWindow && secondCondition) {
-          this.setBpPerPx(self.minBpPerPx);
-        }
-      },
-      closeView: function closeView() {
-        getParent(self, 2).removeView(self);
-      },
-      setDisplayedRegions: function setDisplayedRegions(regions) {
-        var previouslyEmpty = self.displayedRegions.length === 0;
-        self.displayedRegions = cast(regions);
-
-        if (previouslyEmpty) {
-          this.setBpPerPx(self.minBpPerPx);
-        } else {
-          this.setBpPerPx(self.bpPerPx);
-        }
-      },
-      activateTrackSelector: function activateTrackSelector() {
-        if (self.trackSelectorType === 'hierarchical') {
-          var session = getSession(self);
-
-          if (isSessionModelWithWidgets(session)) {
-            var selector = session.addWidget('HierarchicalTrackSelectorWidget', 'hierarchicalTrackSelector', {
-              view: self
-            });
-            session.showWidget(selector);
-            return selector;
-          }
-        }
-
-        throw new Error("invalid track selector type ".concat(self.trackSelectorType));
-      },
-      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
-
-        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 = resolveIdentifier(trackConfigSchema, getRoot(self), trackId);
-        var trackType = pluginManager.getTrackType(configuration.type);
-
-        if (!trackType) {
-          throw new Error("unknown track type ".concat(configuration.type));
-        }
-
-        var viewType = pluginManager.getViewType(self.type);
-        var supportedDisplays = viewType.displayTypes.map(function (displayType) {
-          return displayType.name;
-        });
-        var displayConf = configuration.displays.find(function (d) {
-          return supportedDisplays.includes(d.type);
-        });
-        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) {
-        var initialSnapshot = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-        var type = configuration.type;
-        var name = readConfObject(configuration, 'name');
-        var trackType = pluginManager.getTrackType(type);
-
-        if (!trackType) {
-          throw new Error("unknown track type ".concat(configuration.type));
-        }
-
-        var viewType = pluginManager.getViewType(self.type);
-        var supportedDisplays = viewType.displayTypes.map(function (displayType) {
-          return displayType.name;
-        });
-        var displayConf = configuration.displays.find(function (d) {
-          return supportedDisplays.includes(d.type);
-        });
-        var track = trackType.stateModel.create(_objectSpread2(_objectSpread2({}, initialSnapshot), {}, {
-          name: name,
-          type: type,
-          configuration: configuration,
-          displays: [{
-            type: displayConf.type,
-            configuration: displayConf
-          }]
-        }));
-        self.tracks.push(track);
-      },
-      hideTrack: function hideTrack(trackId) {
-        var trackConfigSchema = pluginManager.pluggableConfigSchemaType('track');
-        var configuration = resolveIdentifier(trackConfigSchema, getRoot(self), trackId); // if we have any tracks with that configuration, turn them off
-
-        var shownTracks = self.tracks.filter(function (t) {
-          return t.configuration === configuration;
-        });
-        transaction(function () {
-          return shownTracks.forEach(function (t) {
-            return self.tracks.remove(t);
-          });
-        });
-        return shownTracks.length;
-      },
-      toggleFitToWindowLock: function toggleFitToWindowLock() {
-        self.lockedFitToWindow = !self.lockedFitToWindow; // when going unlocked -> locked and circle is cut off, set to the locked minBpPerPx
-
-        this.setModelViewWhenAdjust(self.atMinBpPerPx);
-        return self.lockedFitToWindow;
-      }
-    };
-  }));
-}
-/*
-PLANS
-
-- 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")
-      },
-      '@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 Loading = observer(function (_ref) {
-    var radius = _ref.model.renderProps.radius;
-    var classes = useStyles(); // only show the loading message after 400ms to prevent excessive flickering
-
-    var _useState = useState(false),
-        _useState2 = _slicedToArray(_useState, 2),
-        shown = _useState2[0],
-        setShown = _useState2[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;
-});
-
-var RpcRenderedSvgGroupF = (function (_ref) {
-  var jbrequire = _ref.jbrequire;
-  var React = jbrequire('react');
-
-  var _jbrequire = jbrequire('mobx-state-tree'),
-      isAlive = _jbrequire.isAlive;
-
-  var useEffect = React.useEffect,
-      useRef = React.useRef;
-
-  var _jbrequire2 = jbrequire('mobx-react'),
-      observer = _jbrequire2.observer,
-      MobxPropTypes = _jbrequire2.PropTypes;
-
-  var _jbrequire3 = jbrequire('react-dom'),
-      unmountComponentAtNode = _jbrequire3.unmountComponentAtNode,
-      hydrate = _jbrequire3.hydrate;
-
-  var _jbrequire4 = jbrequire('@jbrowse/core/util'),
-      rIC = _jbrequire4.rIC;
-
-  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;
-
-      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
-
-
-          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.
-
-          rIC(function () {
-            if (!isAlive(model)) {
-              return;
-            }
-
-            var mainThreadRendering = React.createElement(renderingComponent, _objectSpread2(_objectSpread2({}, data), model.renderProps()), null);
-            rIC(function () {
-              if (!isAlive(model)) {
-                return;
-              }
-
-              hydrate(mainThreadRendering, domNode);
-            });
-          });
-        }
-      }
-
-      doHydrate();
-      return function () {
-        if (domNode) {
-          unmountComponentAtNode(domNode);
-        }
-      };
-    });
-    return /*#__PURE__*/React.createElement("g", {
-      ref: ssrContainerNode
-    });
-  }
-
-  RpcRenderedSvgGroup.propTypes = {
-    model: MobxPropTypes.observableObject.isRequired
-  };
-  return observer(RpcRenderedSvgGroup);
-});
-
-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;
-
-    if (display.error) {
-      return React.createElement(DisplayError, {
-        model: display
-      });
-    }
-
-    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"];
-var renderReactionFactory = (function (_ref) {
-  var jbrequire = _ref.jbrequire;
-
-  var _jbrequire = jbrequire('@jbrowse/core/util/tracks'),
-      getRpcSessionId = _jbrequire.getRpcSessionId;
-
-  var _jbrequire2 = jbrequire('@jbrowse/core/util'),
-      getContainingView = _jbrequire2.getContainingView;
-
-  var _jbrequire3 = jbrequire('@jbrowse/core/util'),
-      getSession = _jbrequire3.getSession;
-
-  function renderReactionData(self) {
-    var _view$displayedRegion;
-
-    var view = getContainingView(self);
-    var rendererType = self.rendererType;
-
-    var _getSession = getSession(view),
-        rpcManager = _getSession.rpcManager;
-
-    return {
-      rendererType: rendererType,
-      rpcManager: rpcManager,
-      renderProps: self.renderProps(),
-      renderArgs: {
-        assemblyName: (_view$displayedRegion = view.displayedRegions[0]) === null || _view$displayedRegion === void 0 ? void 0 : _view$displayedRegion.assemblyName,
-        adapterConfig: JSON.parse(JSON.stringify(self.adapterConfig)),
-        rendererType: rendererType.name,
-        regions: JSON.parse(JSON.stringify(view.displayedRegions)),
-        blockDefinitions: self.blockDefinitions,
-        sessionId: getRpcSessionId(self),
-        timeout: 1000000
-      }
-    };
-  }
-
-  function renderReactionEffect(_x, _x2, _x3) {
-    return _renderReactionEffect.apply(this, arguments);
-  }
-
-  function _renderReactionEffect() {
-    _renderReactionEffect = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee(props, signal, self) {
-      var rendererType, rpcManager, cannotBeRenderedReason, renderArgs, renderProps, _yield$rendererType$r, html, data;
-
-      return runtime_1.wrap(function _callee$(_context) {
-        while (1) {
-          switch (_context.prev = _context.next) {
-            case 0:
-              if (props) {
-                _context.next = 2;
-                break;
-              }
-
-              throw new Error('cannot render with no props');
-
-            case 2:
-              rendererType = props.rendererType, rpcManager = props.rpcManager, cannotBeRenderedReason = props.cannotBeRenderedReason, renderArgs = props.renderArgs, renderProps = props.renderProps;
-
-              if (!cannotBeRenderedReason) {
-                _context.next = 5;
-                break;
-              }
-
-              return _context.abrupt("return", {
-                message: cannotBeRenderedReason
-              });
-
-            case 5:
-              if (!(!props.renderProps.radius || !props.renderArgs.regions || !props.renderArgs.regions.length)) {
-                _context.next = 7;
-                break;
-              }
-
-              return _context.abrupt("return", {
-                message: 'Skipping render'
-              });
-
-            case 7:
-              if (self.isCompatibleWithRenderer(rendererType)) {
-                _context.next = 9;
-                break;
-              }
-
-              throw new Error("renderer ".concat(rendererType.name, " is not compatible with this display type"));
-
-            case 9:
-              _context.next = 11;
-              return rendererType.renderInClient(rpcManager, _objectSpread2(_objectSpread2(_objectSpread2({}, renderArgs), renderProps), {}, {
-                signal: signal
-              }));
-
-            case 11:
-              _yield$rendererType$r = _context.sent;
-              html = _yield$rendererType$r.html;
-              data = _objectWithoutProperties(_yield$rendererType$r, _excluded);
-              return _context.abrupt("return", {
-                html: html,
-                data: data,
-                renderingComponent: rendererType.ReactComponent
-              });
-
-            case 15:
-            case "end":
-              return _context.stop();
-          }
-        }
-      }, _callee);
-    }));
-    return _renderReactionEffect.apply(this, arguments);
-  }
-
-  return {
-    renderReactionData: renderReactionData,
-    renderReactionEffect: renderReactionEffect
-  };
-});
-
-var BaseChordDisplayModel = /*#__PURE__*/types.compose('BaseChordDisplay', BaseDisplay, types.model({
-  bezierRadiusRatio: 0.1,
-  assemblyName: types.maybe(types.string)
-}))["volatile"](function () {
-  return {
-    // NOTE: all this volatile stuff has to be filled in at once
-    // so that it stays consistent
-    filled: false,
-    reactElement: undefined,
-    data: undefined,
-    message: '',
-    renderingComponent: undefined,
-    refNameMap: undefined
-  };
-}).actions(function (self) {
-  var _getEnv = getEnv(self),
-      pluginManager = _getEnv.pluginManager;
-
-  var track = self;
-  return {
-    onChordClick: function onChordClick(feature) {
-      getConf(self, 'onChordClick', {
-        feature: feature,
-        track: track,
-        pluginManager: pluginManager
-      });
-    }
-  };
-}).views(function (self) {
-  return {
-    get blockDefinitions() {
-      var origSlices = getContainingView(self).staticSlices;
-
-      if (!self.refNameMap) {
-        return origSlices;
-      }
-
-      var slices = JSON.parse(JSON.stringify(origSlices)); // eslint-disable-next-line @typescript-eslint/no-explicit-any
-
-      slices.forEach(function (slice) {
-        var regions = slice.region.elided ? slice.region.regions : [slice.region];
-        regions.forEach(function (region) {
-          var _self$refNameMap;
-
-          var renamed = (_self$refNameMap = self.refNameMap) === null || _self$refNameMap === void 0 ? void 0 : _self$refNameMap[region.refName];
-
-          if (renamed && region.refName !== renamed) {
-            region.refName = renamed;
-          }
-        });
-      });
-      return slices;
-    },
-
-    renderProps: function renderProps() {
-      var view = getContainingView(self);
-      return _objectSpread2(_objectSpread2({}, getParentRenderProps(self)), {}, {
-        rpcDriverName: self.rpcDriverName,
-        displayModel: self,
-        bezierRadius: view.radiusPx * self.bezierRadiusRatio,
-        radius: view.radiusPx,
-        blockDefinitions: this.blockDefinitions,
-        onChordClick: self.onChordClick
-      });
-    },
-
-    /**
-     * the pluggable element type object for this diplay's
-     * renderer
-     */
-    get rendererType() {
-      var display = self;
-
-      var _getEnv2 = getEnv(self),
-          pluginManager = _getEnv2.pluginManager;
-
-      var ThisRendererType = pluginManager.getRendererType(self.rendererTypeName);
-
-      if (!ThisRendererType) {
-        throw new Error("renderer \"".concat(display.rendererTypeName, "\" not found"));
-      }
-
-      if (!ThisRendererType.ReactComponent) {
-        throw new Error("renderer ".concat(display.rendererTypeName, " has no ReactComponent, it may not be completely implemented yet"));
-      }
-
-      return ThisRendererType;
-    },
-
-    isCompatibleWithRenderer: function isCompatibleWithRenderer(renderer) {
-      return !!(renderer instanceof CircularChordRendererType);
-    },
-
-    /**
-     * returns a string feature ID if the globally-selected object
-     * is probably a feature
-     */
-    get selectedFeatureId() {
-      if (!isAlive(self)) {
-        return undefined;
-      }
-
-      var session = getSession(self);
-
-      if (!session) {
-        return undefined;
-      }
-
-      var selection = session.selection; // does it quack like a feature?
-
-      if (isFeature(selection)) {
-        return selection.id();
-      }
-
-      return undefined;
-    }
-
-  };
-}).actions(function (self) {
-  return {
-    renderStarted: function renderStarted() {
-      self.filled = false;
-      self.message = '';
-      self.reactElement = undefined;
-      self.data = undefined;
-      self.error = undefined;
-      self.renderingComponent = undefined;
-    },
-    renderSuccess: function renderSuccess(_ref) {
-      var message = _ref.message,
-          data = _ref.data,
-          reactElement = _ref.reactElement,
-          renderingComponent = _ref.renderingComponent;
-
-      if (message) {
-        self.filled = false;
-        self.message = message;
-        self.reactElement = undefined;
-        self.data = undefined;
-        self.error = undefined;
-        self.renderingComponent = undefined;
-      } else {
-        self.filled = true;
-        self.message = '';
-        self.reactElement = reactElement;
-        self.data = data;
-        self.error = undefined;
-        self.renderingComponent = renderingComponent;
-      }
-    },
-    renderError: function renderError(error) {
-      console.error(error); // the rendering failed for some reason
-
-      self.filled = false;
-      self.message = '';
-      self.reactElement = undefined;
-      self.data = undefined;
-      self.error = error;
-      self.renderingComponent = undefined;
-    },
-    setRefNameMap: function setRefNameMap(refNameMap) {
-      self.refNameMap = refNameMap;
-    }
-  };
-}).actions(function (self) {
-  var _getEnv3 = getEnv(self),
-      pluginManager = _getEnv3.pluginManager;
-
-  var _pluginManager$jbrequ = pluginManager.jbrequire(renderReactionFactory),
-      renderReactionData = _pluginManager$jbrequ.renderReactionData,
-      renderReactionEffect = _pluginManager$jbrequ.renderReactionEffect;
-
-  return {
-    afterAttach: function afterAttach() {
-      makeAbortableReaction(self, renderReactionData, renderReactionEffect, {
-        name: "".concat(self.type, " ").concat(self.id, " rendering"),
-        // delay: self.renderDelay || 300,
-        fireImmediately: true
-      }, self.renderStarted, self.renderSuccess, self.renderError);
-      makeAbortableReaction(self, function () {
-        return {
-          assemblyNames: getTrackAssemblyNames(self.parentTrack),
-          adapter: getConf(getParent(self, 2), 'adapter'),
-          assemblyManager: getSession(self).assemblyManager
-        };
-      },
-      /*#__PURE__*/
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      function () {
-        var _ref3 = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee(_ref2, signal) {
-          var assemblyNames, adapter, assemblyManager;
-          return runtime_1.wrap(function _callee$(_context) {
-            while (1) {
-              switch (_context.prev = _context.next) {
-                case 0:
-                  assemblyNames = _ref2.assemblyNames, adapter = _ref2.adapter, assemblyManager = _ref2.assemblyManager;
-                  return _context.abrupt("return", assemblyManager.getRefNameMapForAdapter(adapter, assemblyNames[0], {
-                    signal: signal,
-                    sessionId: getRpcSessionId(self)
-                  }));
-
-                case 2:
-                case "end":
-                  return _context.stop();
-              }
-            }
-          }, _callee);
-        }));
-
-        return function (_x, _x2) {
-          return _ref3.apply(this, arguments);
-        };
-      }(), {
-        name: "".concat(self.type, " ").concat(self.id, " getting refNames"),
-        fireImmediately: true
-      }, function () {}, function (refNameMap) {
-        self.setRefNameMap(refNameMap);
-      }, function (error) {
-        console.error(error);
-        self.setError(error);
-      });
-    }
-  };
-});
-
-var baseChordDisplayConfig = /*#__PURE__*/ConfigurationSchema('BaseChordDisplay', {
-  onChordClick: {
-    type: 'boolean',
-    description: 'callback that should be run when a chord in the track is clicked',
-    defaultValue: false,
-    contextVariable: ['feature', 'track', 'pluginManager']
-  }
-}, {
-  explicitIdentifier: 'displayId'
-});
-
-var CircularViewPlugin = /*#__PURE__*/function (_Plugin) {
-  _inherits(CircularViewPlugin, _Plugin);
-
-  var _super = /*#__PURE__*/_createSuper(CircularViewPlugin);
-
-  function CircularViewPlugin() {
-    var _this;
-
-    _classCallCheck(this, CircularViewPlugin);
-
-    _this = _super.apply(this, arguments);
-    _this.name = 'CircularViewPlugin';
-    return _this;
-  }
-
-  _createClass(CircularViewPlugin, [{
-    key: "install",
-    value: function install(pluginManager) {
-      pluginManager.addViewType(function () {
-        return new ViewType({
-          ReactComponent: /*#__PURE__*/lazy(function () {
-            return Promise.resolve().then(function () { return CircularView$2; });
-          }),
-          stateModel: CircularView(pluginManager),
-          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 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",
-    value: function configure(pluginManager) {
-      if (isAbstractMenuManager(pluginManager.rootModel)) {
-        pluginManager.rootModel.appendToSubMenu(['Add'], {
-          label: 'Circular view',
-          icon: DataUsageIcon,
-          onClick: function onClick(session) {
-            session.addView('CircularView', {});
-          }
-        });
-      }
-    }
-  }]);
-
-  return CircularViewPlugin;
-}(Plugin);
-
-var useStyles = /*#__PURE__*/makeStyles({
-  rulerLabel: {
-    fontSize: '0.8rem',
-    fontWeight: 500,
-    lineHeight: 1.6,
-    letterSpacing: '0.0075em'
-  }
-});
-
-function sliceArcPath(slice, radiusPx, startBase, endBase) {
-  // A rx ry x-axis-rotation large-arc-flag sweep-flag x y
-  if (slice.flipped) {
-    var _ref = [endBase, startBase];
-    startBase = _ref[0];
-    endBase = _ref[1];
-  }
-
-  var startXY = slice.bpToXY(startBase, radiusPx);
-  var endXY = slice.bpToXY(endBase, radiusPx);
-  var largeArc = Math.abs(endBase - startBase) / slice.bpPerRadian > Math.PI ? '1' : '0';
-  var sweepFlag = '1';
-  return ['M'].concat(_toConsumableArray(startXY), ['A', radiusPx, radiusPx, '0', largeArc, sweepFlag], _toConsumableArray(endXY)).join(' ');
-}
-
-var ElisionRulerArc = /*#__PURE__*/observer(function (_ref2) {
-  var model = _ref2.model,
-      slice = _ref2.slice;
-  var theme = useTheme();
-  var modelRadiusPx = model.radiusPx;
-  var radiusPx = modelRadiusPx + 1;
-  var endRadians = slice.endRadians,
-      startRadians = slice.startRadians,
-      region = slice.region;
-  var startXY = polarToCartesian(radiusPx, startRadians);
-  var endXY = polarToCartesian(radiusPx, endRadians);
-  var widthPx = (endRadians - startRadians) * radiusPx;
-  var largeArc = endRadians - startRadians > Math.PI ? '1' : '0'; // TODO: draw the elision
-
-  var centerRadians = (endRadians + startRadians) / 2;
-  var regionCountString = "[".concat(Number(region.regions.length).toLocaleString(), "]");
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(RulerLabel, {
-    text: regionCountString,
-    view: model,
-    maxWidthPx: widthPx,
-    radians: centerRadians,
-    radiusPx: radiusPx,
-    title: "".concat(Number(region.regions.length).toLocaleString(), " more regions"),
-    color: theme.palette.text.primary
-  }), /*#__PURE__*/React.createElement("path", {
-    d: ['M'].concat(_toConsumableArray(startXY), ['A', radiusPx, radiusPx, '0', largeArc, '1'], _toConsumableArray(endXY)).join(' '),
-    stroke: theme.palette.text.secondary,
-    strokeWidth: 2,
-    strokeDasharray: "2,2",
-    fill: "none"
-  }));
-});
-var RulerLabel = /*#__PURE__*/observer(function (_ref3) {
-  var view = _ref3.view,
-      text = _ref3.text,
-      maxWidthPx = _ref3.maxWidthPx,
-      radians = _ref3.radians,
-      radiusPx = _ref3.radiusPx,
-      title = _ref3.title,
-      color = _ref3.color;
-  var classes = useStyles();
-  var textXY = polarToCartesian(radiusPx + 5, radians);
-
-  if (!text) {
-    return null;
-  }
-
-  if (text.length * 6.5 < maxWidthPx) {
-    // text is rotated parallel to the ruler arc
-    return /*#__PURE__*/React.createElement("text", {
-      x: 0,
-      y: 0,
-      className: classes.rulerLabel,
-      textAnchor: "middle",
-      dominantBaseline: "baseline",
-      transform: "translate(".concat(textXY, ") rotate(").concat(radToDeg(radians) + 90, ")"),
-      style: {
-        fill: color
-      }
-    }, text, /*#__PURE__*/React.createElement("title", null, title || text));
-  }
-
-  if (maxWidthPx > 4) {
-    // text is rotated perpendicular to the ruler arc
-    var overallRotation = radToDeg(radians + view.offsetRadians - Math.PI / 2);
-
-    if (overallRotation >= 180) {
-      return /*#__PURE__*/React.createElement("text", {
-        x: 0,
-        y: 0,
-        className: classes.rulerLabel,
-        textAnchor: "start",
-        dominantBaseline: "middle",
-        transform: "translate(".concat(textXY, ") rotate(").concat(radToDeg(radians), ")"),
-        style: {
-          fill: color
-        }
-      }, text, /*#__PURE__*/React.createElement("title", null, title || text));
-    }
-
-    return /*#__PURE__*/React.createElement("text", {
-      x: 0,
-      y: 0,
-      className: classes.rulerLabel,
-      textAnchor: "end",
-      dominantBaseline: "middle",
-      transform: "translate(".concat(textXY, ") rotate(").concat(radToDeg(radians) + 180, ")"),
-      style: {
-        fill: color
-      }
-    }, text, /*#__PURE__*/React.createElement("title", null, title || text));
-  } // if you get here there is no room for the text at all
-
-
-  return null;
-});
-var RegionRulerArc = /*#__PURE__*/observer(function (_ref4) {
-  var model = _ref4.model,
-      slice = _ref4.slice;
-  var theme = useTheme();
-  var radiusPx = model.radiusPx;
-  var region = slice.region,
-      endRadians = slice.endRadians,
-      startRadians = slice.startRadians;
-  var centerRadians = (endRadians + startRadians) / 2;
-  var widthPx = (endRadians - startRadians) * radiusPx;
-  var session = getSession(model);
-  var color;
-  var assembly = session.assemblyManager.get(slice.region.assemblyName);
-
-  if (assembly) {
-    color = assembly.getRefNameColor(region.refName);
-  }
-
-  if (color) {
-    try {
-      color = makeContrasting(color, theme.palette.background.paper);
-    } catch (error) {
-      color = theme.palette.text.primary;
-    }
-  } else {
-    color = theme.palette.text.primary;
-  } // TODO: slice flipping
-
-
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(RulerLabel, {
-    text: region.refName,
-    view: model,
-    maxWidthPx: widthPx,
-    radians: centerRadians,
-    radiusPx: radiusPx,
-    color: color
-  }), /*#__PURE__*/React.createElement("path", {
-    d: sliceArcPath(slice, radiusPx + 1, region.start, region.end),
-    stroke: color,
-    strokeWidth: 2,
-    fill: "none"
-  }, /*#__PURE__*/React.createElement("title", null, region.refName)));
-});
-var CircularRuler = /*#__PURE__*/observer(function Ruler(_ref5) {
-  var model = _ref5.model,
-      slice = _ref5.slice;
-
-  if (slice.region.elided) {
-    return /*#__PURE__*/React.createElement(ElisionRulerArc, {
-      key: assembleLocString(slice.region.regions[0]),
-      model: model,
-      slice: slice
-    });
-  }
-
-  return /*#__PURE__*/React.createElement(RegionRulerArc, {
-    key: assembleLocString(slice.region),
-    model: model,
-    slice: slice
-  });
-});
-
-var useStyles$1 = /*#__PURE__*/makeStyles$1(function (theme) {
-  return {
-    importFormContainer: {
-      marginBottom: theme.spacing(4)
-    }
-  };
-}); // eslint-disable-next-line @typescript-eslint/no-explicit-any
-
-var ImportForm = /*#__PURE__*/observer(function (_ref) {
-  var model = _ref.model;
-  var classes = useStyles$1();
-  var session = getSession(model);
-  var modelError = model.error;
-  var assemblyNames = session.assemblyNames,
-      assemblyManager = session.assemblyManager;
-
-  var _useState = useState(assemblyNames[0]),
-      _useState2 = _slicedToArray(_useState, 2),
-      selectedAsm = _useState2[0],
-      setSelectedAsm = _useState2[1];
-
-  var _useState3 = useState(modelError),
-      _useState4 = _slicedToArray(_useState3, 2),
-      error = _useState4[0],
-      setError = _useState4[1];
-
-  var assembly = assemblyManager.get(selectedAsm);
-  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.createElement(Container, {
-    className: classes.importFormContainer
-  }, err ? /*#__PURE__*/React.createElement(Grid, {
-    container: true,
-    spacing: 1,
-    justifyContent: "center",
-    alignItems: "center"
-  }, /*#__PURE__*/React.createElement(Grid, {
-    item: true
-  }, /*#__PURE__*/React.createElement(ErrorMessage, {
-    error: err
-  }))) : null, /*#__PURE__*/React.createElement(Grid, {
-    container: true,
-    spacing: 1,
-    justifyContent: "center",
-    alignItems: "center"
-  }, /*#__PURE__*/React.createElement(Grid, {
-    item: true
-  }, /*#__PURE__*/React.createElement(AssemblySelector, {
-    onChange: function onChange(val) {
-      setError(undefined);
-      setSelectedAsm(val);
-    },
-    session: session,
-    selected: selectedAsm
-  })), /*#__PURE__*/React.createElement(Grid, {
-    item: true
-  }, /*#__PURE__*/React.createElement(Button, {
-    disabled: !(regions !== null && regions !== void 0 && regions.length),
-    onClick: function onClick() {
-      return model.setDisplayedRegions(regions);
-    },
-    variant: "contained",
-    color: "primary"
-  }, regions.length ? 'Open' : 'Loading…'))));
-});
-
-var dragHandleHeight = 3;
-var useStyles$2 = /*#__PURE__*/makeStyles$1(function (theme) {
-  return {
-    root: {
-      position: 'relative',
-      marginBottom: theme.spacing(1),
-      overflow: 'hidden',
-      background: 'white'
-    },
-    scroller: {
-      overflow: 'auto'
-    },
-    sliceRoot: {
-      background: 'none',
-      // background: theme.palette.background.paper,
-      boxSizing: 'content-box',
-      display: 'block'
-    },
-    iconButton: {
-      padding: '4px',
-      margin: '0 2px 0 2px'
-    },
-    controls: {
-      overflow: 'hidden',
-      whiteSpace: 'nowrap',
-      position: 'absolute',
-      background: grey[200],
-      boxSizing: 'border-box',
-      borderRight: '1px solid #a2a2a2',
-      borderBottom: '1px solid #a2a2a2',
-      left: 0,
-      top: 0
-    },
-    importFormContainer: {
-      marginBottom: theme.spacing(4)
-    }
-  };
-});
-var Slices = /*#__PURE__*/observer(function (_ref) {
-  var model = _ref.model;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, model.staticSlices.map(function (slice) {
-    return /*#__PURE__*/React.createElement(CircularRuler, {
-      key: assembleLocString(slice.region.elided ? slice.region.regions[0] : slice.region),
-      model: model,
-      slice: slice
-    });
-  }), model.tracks.map(function (track) {
-    var display = track.displays[0];
-    return /*#__PURE__*/React.createElement(display.RenderingComponent, {
-      key: display.id,
-      display: display,
-      view: model
-    });
-  }));
-});
-var Controls = /*#__PURE__*/observer(function (_ref2) {
-  var model = _ref2.model,
-      showingFigure = _ref2.showingFigure;
-  var classes = useStyles$2();
-  return /*#__PURE__*/React.createElement("div", {
-    className: classes.controls
-  }, /*#__PURE__*/React.createElement(IconButton, {
-    onClick: model.zoomOutButton,
-    className: classes.iconButton,
-    title: model.lockedFitToWindow ? 'unlock to zoom out' : 'zoom out',
-    disabled: !showingFigure || model.atMaxBpPerPx || model.lockedFitToWindow,
-    color: "secondary"
-  }, /*#__PURE__*/React.createElement(ZoomOut, null)), /*#__PURE__*/React.createElement(IconButton, {
-    onClick: model.zoomInButton,
-    className: classes.iconButton,
-    title: "zoom in",
-    disabled: !showingFigure || model.atMinBpPerPx,
-    color: "secondary"
-  }, /*#__PURE__*/React.createElement(ZoomIn, null)), /*#__PURE__*/React.createElement(IconButton, {
-    onClick: model.rotateCounterClockwiseButton,
-    className: classes.iconButton,
-    title: "rotate counter-clockwise",
-    disabled: !showingFigure,
-    color: "secondary"
-  }, /*#__PURE__*/React.createElement(RotateLeft, null)), /*#__PURE__*/React.createElement(IconButton, {
-    onClick: model.rotateClockwiseButton,
-    className: classes.iconButton,
-    title: "rotate clockwise",
-    disabled: !showingFigure,
-    color: "secondary"
-  }, /*#__PURE__*/React.createElement(RotateRight, null)), /*#__PURE__*/React.createElement(IconButton, {
-    onClick: model.toggleFitToWindowLock,
-    className: classes.iconButton,
-    title: model.lockedFitToWindow ? 'locked model to window size' : 'unlocked model to zoom further',
-    disabled: model.tooSmallToLock,
-    color: "secondary"
-  }, model.lockedFitToWindow ? /*#__PURE__*/React.createElement(LockOutline, null) : /*#__PURE__*/React.createElement(LockOpen, null)), model.hideTrackSelectorButton ? null : /*#__PURE__*/React.createElement(IconButton, {
-    onClick: model.activateTrackSelector,
-    title: "Open track selector",
-    "data-testid": "circular_track_select",
-    color: "secondary"
-  }, /*#__PURE__*/React.createElement(TrackSelector, null)));
-});
-var CircularView$1 = /*#__PURE__*/observer(function (_ref3) {
-  var model = _ref3.model;
-  var classes = useStyles$2();
-  var initialized = !!model.displayedRegions.length && model.figureWidth && model.figureHeight;
-  var showImportForm = !initialized && !model.disableImportForm;
-  var showFigure = initialized && !showImportForm;
-  return /*#__PURE__*/React.createElement("div", {
-    className: classes.root,
-    style: {
-      width: model.width,
-      height: model.height
-    },
-    "data-testid": model.id
-  }, model.error ? /*#__PURE__*/React.createElement(ErrorMessage$1, {
-    error: model.error
-  }) : /*#__PURE__*/React.createElement(React.Fragment, null, showImportForm ? /*#__PURE__*/React.createElement(ImportForm, {
-    model: model
-  }) : null, /*#__PURE__*/React.createElement(React.Fragment, null, !showFigure ? null : /*#__PURE__*/React.createElement("div", {
-    className: classes.scroller,
-    style: {
-      width: model.width,
-      height: model.height
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classes.rotator,
-    style: {
-      transform: ["rotate(".concat(model.offsetRadians, "rad)")].join(' '),
-      transition: 'transform 0.5s',
-      transformOrigin: model.centerXY.map(function (x) {
-        return "".concat(x, "px");
-      }).join(' ')
-    }
-  }, /*#__PURE__*/React.createElement("svg", {
-    style: {
-      position: 'absolute',
-      left: 0,
-      top: 0
-    },
-    className: classes.sliceRoot,
-    width: "".concat(model.figureWidth, "px"),
-    height: "".concat(model.figureHeight, "px"),
-    version: "1.1"
-  }, /*#__PURE__*/React.createElement("g", {
-    transform: "translate(".concat(model.centerXY, ")")
-  }, /*#__PURE__*/React.createElement(Slices, {
-    model: model
-  }))))), /*#__PURE__*/React.createElement(Controls, {
-    model: model,
-    showingFigure: showFigure
-  }), model.hideVerticalResizeHandle ? null : /*#__PURE__*/React.createElement(ResizeHandle, {
-    onDrag: model.resizeHeight,
-    style: {
-      height: dragHandleHeight,
-      position: 'absolute',
-      bottom: 0,
-      left: 0,
-      background: '#ccc',
-      boxSizing: 'border-box',
-      borderTop: '1px solid #fafafa'
-    }
-  }))));
-});
-
-var CircularView$2 = {
-  __proto__: null,
-  'default': CircularView$1
-};
-
-export default CircularViewPlugin;
-export { BaseChordDisplay as BaseChordDisplayComponentFactory, BaseChordDisplayModel, baseChordDisplayConfig };
-//# sourceMappingURL=plugin-circular-view.esm.js.map