@teselagen/ove 0.3.24 → 0.3.26

package/index.umd.js

@@ -23198,11 +23198,174 @@ var __async = (__this, __arguments, generator) => {
       }
     }, "effect")
   });
+  var mouseCoords = {
+    clientX: 0,
+    clientY: 0
+  };
+  var activeInstances = [];
+  function storeMouseCoords(_ref) {
+    var clientX = _ref.clientX, clientY = _ref.clientY;
+    mouseCoords = {
+      clientX,
+      clientY
+    };
+  }
+  __name(storeMouseCoords, "storeMouseCoords");
+  function addMouseCoordsListener(doc) {
+    doc.addEventListener("mousemove", storeMouseCoords);
+  }
+  __name(addMouseCoordsListener, "addMouseCoordsListener");
+  function removeMouseCoordsListener(doc) {
+    doc.removeEventListener("mousemove", storeMouseCoords);
+  }
+  __name(removeMouseCoordsListener, "removeMouseCoordsListener");
+  var followCursor = {
+    name: "followCursor",
+    defaultValue: false,
+    fn: /* @__PURE__ */ __name(function fn2(instance) {
+      var reference2 = instance.reference;
+      var doc = getOwnerDocument(instance.props.triggerTarget || reference2);
+      var isInternalUpdate = false;
+      var wasFocusEvent = false;
+      var isUnmounted = true;
+      var prevProps = instance.props;
+      function getIsInitialBehavior() {
+        return instance.props.followCursor === "initial" && instance.state.isVisible;
+      }
+      __name(getIsInitialBehavior, "getIsInitialBehavior");
+      function addListener() {
+        doc.addEventListener("mousemove", onMouseMove);
+      }
+      __name(addListener, "addListener");
+      function removeListener() {
+        doc.removeEventListener("mousemove", onMouseMove);
+      }
+      __name(removeListener, "removeListener");
+      function unsetGetReferenceClientRect() {
+        isInternalUpdate = true;
+        instance.setProps({
+          getReferenceClientRect: null
+        });
+        isInternalUpdate = false;
+      }
+      __name(unsetGetReferenceClientRect, "unsetGetReferenceClientRect");
+      function onMouseMove(event) {
+        var isCursorOverReference = event.target ? reference2.contains(event.target) : true;
+        var followCursor2 = instance.props.followCursor;
+        var clientX = event.clientX, clientY = event.clientY;
+        var rect = reference2.getBoundingClientRect();
+        var relativeX = clientX - rect.left;
+        var relativeY = clientY - rect.top;
+        if (isCursorOverReference || !instance.props.interactive) {
+          instance.setProps({
+            // @ts-ignore - unneeded DOMRect properties
+            getReferenceClientRect: /* @__PURE__ */ __name(function getReferenceClientRect() {
+              var rect2 = reference2.getBoundingClientRect();
+              var x2 = clientX;
+              var y2 = clientY;
+              if (followCursor2 === "initial") {
+                x2 = rect2.left + relativeX;
+                y2 = rect2.top + relativeY;
+              }
+              var top2 = followCursor2 === "horizontal" ? rect2.top : y2;
+              var right2 = followCursor2 === "vertical" ? rect2.right : x2;
+              var bottom2 = followCursor2 === "horizontal" ? rect2.bottom : y2;
+              var left2 = followCursor2 === "vertical" ? rect2.left : x2;
+              return {
+                width: right2 - left2,
+                height: bottom2 - top2,
+                top: top2,
+                right: right2,
+                bottom: bottom2,
+                left: left2
+              };
+            }, "getReferenceClientRect")
+          });
+        }
+      }
+      __name(onMouseMove, "onMouseMove");
+      function create2() {
+        if (instance.props.followCursor) {
+          activeInstances.push({
+            instance,
+            doc
+          });
+          addMouseCoordsListener(doc);
+        }
+      }
+      __name(create2, "create");
+      function destroy2() {
+        activeInstances = activeInstances.filter(function(data) {
+          return data.instance !== instance;
+        });
+        if (activeInstances.filter(function(data) {
+          return data.doc === doc;
+        }).length === 0) {
+          removeMouseCoordsListener(doc);
+        }
+      }
+      __name(destroy2, "destroy");
+      return {
+        onCreate: create2,
+        onDestroy: destroy2,
+        onBeforeUpdate: /* @__PURE__ */ __name(function onBeforeUpdate() {
+          prevProps = instance.props;
+        }, "onBeforeUpdate"),
+        onAfterUpdate: /* @__PURE__ */ __name(function onAfterUpdate(_2, _ref2) {
+          var followCursor2 = _ref2.followCursor;
+          if (isInternalUpdate) {
+            return;
+          }
+          if (followCursor2 !== void 0 && prevProps.followCursor !== followCursor2) {
+            destroy2();
+            if (followCursor2) {
+              create2();
+              if (instance.state.isMounted && !wasFocusEvent && !getIsInitialBehavior()) {
+                addListener();
+              }
+            } else {
+              removeListener();
+              unsetGetReferenceClientRect();
+            }
+          }
+        }, "onAfterUpdate"),
+        onMount: /* @__PURE__ */ __name(function onMount() {
+          if (instance.props.followCursor && !wasFocusEvent) {
+            if (isUnmounted) {
+              onMouseMove(mouseCoords);
+              isUnmounted = false;
+            }
+            if (!getIsInitialBehavior()) {
+              addListener();
+            }
+          }
+        }, "onMount"),
+        onTrigger: /* @__PURE__ */ __name(function onTrigger(_2, event) {
+          if (isMouseEvent$1(event)) {
+            mouseCoords = {
+              clientX: event.clientX,
+              clientY: event.clientY
+            };
+          }
+          wasFocusEvent = event.type === "focus";
+        }, "onTrigger"),
+        onHidden: /* @__PURE__ */ __name(function onHidden() {
+          if (instance.props.followCursor) {
+            unsetGetReferenceClientRect();
+            removeListener();
+            isUnmounted = true;
+          }
+        }, "onHidden")
+      };
+    }, "fn")
+  };
   tippy$1.setDefaultProps({
     render: render$1
   });
   const tippy = "";
   let tippys = [];
+  let recentlyHidden = false;
+  let clearMe;
   (function() {
     let lastMouseOverElement = null;
     document.addEventListener("mouseover", function(event) {
@@ -23223,21 +23386,63 @@ var __async = (__this, __arguments, generator) => {
         lastMouseOverElement = element2;
         const id2 = "tippyEllipsizedEl";
         let innerRun = false;
-        const inner2 = /* @__PURE__ */ __name((content2, el22) => {
+        const inner2 = /* @__PURE__ */ __name((content2, el22, { dataTitle, dataAvoid, dataAvoidBackup }) => {
+          var _a3, _b3;
           innerRun = true;
           document.querySelectorAll(`.${id2}`).forEach((elem) => {
             elem.classList.remove(id2);
           });
           el22.classList.add(id2);
-          const inst = tippy$1(`.${id2}`, {
+          const inst = tippy$1(`.${id2}`, __spreadValues(__spreadProps(__spreadValues({
+            plugins: [followCursor],
             content: content2,
-            delay: [0, 0],
+            delay: dataTitle && !recentlyHidden ? [1300, 1300] : dataTitle ? [150, 150] : [0, 0],
             allowHTML: true
-          });
+          }, dataTitle && {
+            followCursor: dataTitle ? "initial" : false
+          }), {
+            onHidden() {
+              recentlyHidden = true;
+              clearMe && clearTimeout(clearMe);
+              clearMe = setTimeout(() => {
+                if (tippys.length === 0)
+                  recentlyHidden = false;
+              }, 700);
+            }
+          }), dataAvoid && {
+            popperOptions: {
+              modifiers: [
+                {
+                  name: "myModifier",
+                  enabled: true,
+                  phase: "beforeWrite",
+                  requires: ["computeStyles"],
+                  requiresIfExists: ["offset"],
+                  fn({ state: state2 }) {
+                    const customBoundary = document.querySelector(dataAvoid) || document.querySelector(dataAvoidBackup);
+                    if (!customBoundary)
+                      return;
+                    const a2 = customBoundary.getBoundingClientRect();
+                    if (a2.top < state2.rects.reference.y) {
+                      const b3 = Math.abs(
+                        Math.abs(a2.top - state2.rects.reference.y) - 10
+                      );
+                      state2.styles.popper.bottom = b3 + "px";
+                    }
+                  }
+                }
+              ]
+            }
+          }));
+          if (dataTitle) {
+            (_b3 = (_a3 = inst[0]) == null ? void 0 : _a3.popper) == null ? void 0 : _b3.classList.add("isDataTitle");
+          }
           clearOldTippys(...inst);
-          inst.forEach((i2) => {
-            i2.show();
-          });
+          if (!dataTitle) {
+            inst.forEach((i2) => {
+              i2.show();
+            });
+          }
           tippys = [...tippys, ...inst];
           if (content2 === el22.getAttribute("title")) {
             el22.removeAttribute("title");
@@ -23252,14 +23457,22 @@ var __async = (__this, __arguments, generator) => {
           const style2 = window.getComputedStyle(el2);
           const whiteSpace = style2.getPropertyValue("white-space");
           const textOverflow = style2.getPropertyValue("text-overflow");
-          dataTip = el2.getAttribute("data-tip");
+          const dataTitle = el2.getAttribute("data-title");
+          const dataAvoid = el2.getAttribute("data-avoid");
+          const dataAvoidBackup = el2.getAttribute("data-avoid-backup");
+          dataTip = el2.getAttribute("data-tip") || dataTitle;
           const isEllipsized = whiteSpace === "nowrap" && textOverflow === "ellipsis";
+          const opts2 = {
+            dataTitle,
+            dataAvoid,
+            dataAvoidBackup
+          };
           if (dataTip) {
-            inner2(dataTip, el2);
+            inner2(dataTip, el2, opts2);
             break;
           } else if (isEllipsized && el2.offsetWidth < el2.scrollWidth - 4 && //the -4 is adding a teeny bit of tolerance to fix issues with the column headers getting tooltips even when fully visible
           !el2.classList.contains("no-data-tip") && el2.textContent && ((_b2 = (_a2 = el2.textContent) == null ? void 0 : _a2.trim) == null ? void 0 : _b2.call(_a2).length) !== 0) {
-            inner2(el2.textContent, el2);
+            inner2(el2.textContent, el2, opts2);
             break;
           } else if (isEllipsized && el2.offsetWidth >= el2.scrollWidth)
             ;
@@ -26907,10 +27120,10 @@ var __async = (__this, __arguments, generator) => {
     /* istanbul ignore next */
     Object.getOwnPropertyNames
   );
-  function toPrimitive$2(value) {
+  function toPrimitive$3(value) {
     return value === null ? null : typeof value === "object" ? "" + value : value;
   }
-  __name(toPrimitive$2, "toPrimitive$2");
+  __name(toPrimitive$3, "toPrimitive$3");
   function hasProp(target, prop2) {
     return objectPrototype$2.hasOwnProperty.call(target, prop2);
   }
@@ -27807,7 +28020,7 @@ var __async = (__this, __arguments, generator) => {
       return this.name_ + "[" + this.value_ + "]";
     }, "toString");
     _proto.valueOf = /* @__PURE__ */ __name(function valueOf() {
-      return toPrimitive$2(this.get());
+      return toPrimitive$3(this.get());
     }, "valueOf");
     _proto[_Symbol$toPrimitive] = function() {
       return this.valueOf();
@@ -27992,7 +28205,7 @@ var __async = (__this, __arguments, generator) => {
       return this.name_ + "[" + this.derivation.toString() + "]";
     }, "toString");
     _proto.valueOf = /* @__PURE__ */ __name(function valueOf() {
-      return toPrimitive$2(this.get());
+      return toPrimitive$3(this.get());
     }, "valueOf");
     _proto[_Symbol$toPrimitive$1] = function() {
       return this.valueOf();
@@ -44680,20 +44893,11 @@ ${latestSubscriptionCallbackError.current.stack}
     return _domCreate;
   }
   __name(require_domCreate, "require_domCreate");
-  var _ie8DomDefine;
-  var hasRequired_ie8DomDefine;
-  function require_ie8DomDefine() {
-    if (hasRequired_ie8DomDefine)
-      return _ie8DomDefine;
-    hasRequired_ie8DomDefine = 1;
-    _ie8DomDefine = !require_descriptors() && !_fails(function() {
-      return Object.defineProperty(require_domCreate()("div"), "a", { get: function() {
-        return 7;
-      } }).a != 7;
-    });
-    return _ie8DomDefine;
-  }
-  __name(require_ie8DomDefine, "require_ie8DomDefine");
+  var _ie8DomDefine = !require_descriptors() && !_fails(function() {
+    return Object.defineProperty(require_domCreate()("div"), "a", { get: function() {
+      return 7;
+    } }).a != 7;
+  });
   var isObject$6 = _isObject;
   var _toPrimitive$1 = /* @__PURE__ */ __name(function(it, S2) {
     if (!isObject$6(it))
@@ -44707,33 +44911,25 @@ ${latestSubscriptionCallbackError.current.stack}
       return val2;
     throw TypeError("Can't convert object to primitive value");
   }, "_toPrimitive$1");
-  var hasRequired_objectDp;
-  function require_objectDp() {
-    if (hasRequired_objectDp)
-      return _objectDp;
-    hasRequired_objectDp = 1;
-    var anObject2 = _anObject;
-    var IE8_DOM_DEFINE2 = require_ie8DomDefine();
-    var toPrimitive2 = _toPrimitive$1;
-    var dP2 = Object.defineProperty;
-    _objectDp.f = require_descriptors() ? Object.defineProperty : /* @__PURE__ */ __name(function defineProperty2(O2, P2, Attributes) {
-      anObject2(O2);
-      P2 = toPrimitive2(P2, true);
-      anObject2(Attributes);
-      if (IE8_DOM_DEFINE2)
-        try {
-          return dP2(O2, P2, Attributes);
-        } catch (e2) {
-        }
-      if ("get" in Attributes || "set" in Attributes)
-        throw TypeError("Accessors not supported!");
-      if ("value" in Attributes)
-        O2[P2] = Attributes.value;
-      return O2;
-    }, "defineProperty");
-    return _objectDp;
-  }
-  __name(require_objectDp, "require_objectDp");
+  var anObject$5 = _anObject;
+  var IE8_DOM_DEFINE$1 = _ie8DomDefine;
+  var toPrimitive$2 = _toPrimitive$1;
+  var dP$3 = Object.defineProperty;
+  _objectDp.f = require_descriptors() ? Object.defineProperty : /* @__PURE__ */ __name(function defineProperty2(O2, P2, Attributes) {
+    anObject$5(O2);
+    P2 = toPrimitive$2(P2, true);
+    anObject$5(Attributes);
+    if (IE8_DOM_DEFINE$1)
+      try {
+        return dP$3(O2, P2, Attributes);
+      } catch (e2) {
+      }
+    if ("get" in Attributes || "set" in Attributes)
+      throw TypeError("Accessors not supported!");
+    if ("value" in Attributes)
+      O2[P2] = Attributes.value;
+    return O2;
+  }, "defineProperty");
   var _propertyDesc = /* @__PURE__ */ __name(function(bitmap, value) {
     return {
       enumerable: !(bitmap & 1),
@@ -44742,7 +44938,7 @@ ${latestSubscriptionCallbackError.current.stack}
       value
     };
   }, "_propertyDesc");
-  var dP$2 = require_objectDp();
+  var dP$2 = _objectDp;
   var createDesc$3 = _propertyDesc;
   var _hide = require_descriptors() ? function(object2, key2, value) {
     return dP$2.f(object2, key2, createDesc$3(1, value));
@@ -44816,25 +45012,16 @@ ${latestSubscriptionCallbackError.current.stack}
   var _cof = /* @__PURE__ */ __name(function(it) {
     return toString$4.call(it).slice(8, -1);
   }, "_cof");
-  var _iobject;
-  var hasRequired_iobject;
-  function require_iobject() {
-    if (hasRequired_iobject)
-      return _iobject;
-    hasRequired_iobject = 1;
-    var cof2 = _cof;
-    _iobject = Object("z").propertyIsEnumerable(0) ? Object : function(it) {
-      return cof2(it) == "String" ? it.split("") : Object(it);
-    };
-    return _iobject;
-  }
-  __name(require_iobject, "require_iobject");
+  var cof$2 = _cof;
+  var _iobject = Object("z").propertyIsEnumerable(0) ? Object : function(it) {
+    return cof$2(it) == "String" ? it.split("") : Object(it);
+  };
   var _defined = /* @__PURE__ */ __name(function(it) {
     if (it == void 0)
       throw TypeError("Can't call method on  " + it);
     return it;
   }, "_defined");
-  var IObject = require_iobject();
+  var IObject = _iobject;
   var defined$2 = _defined;
   var _toIobject = /* @__PURE__ */ __name(function(it) {
     return IObject(defined$2(it));
@@ -44931,15 +45118,7 @@ ${latestSubscriptionCallbackError.current.stack}
   var _objectGops = {};
   _objectGops.f = Object.getOwnPropertySymbols;
   var _objectPie = {};
-  var hasRequired_objectPie;
-  function require_objectPie() {
-    if (hasRequired_objectPie)
-      return _objectPie;
-    hasRequired_objectPie = 1;
-    _objectPie.f = {}.propertyIsEnumerable;
-    return _objectPie;
-  }
-  __name(require_objectPie, "require_objectPie");
+  _objectPie.f = {}.propertyIsEnumerable;
   var defined$1 = _defined;
   var _toObject = /* @__PURE__ */ __name(function(it) {
     return Object(defined$1(it));
@@ -44953,9 +45132,9 @@ ${latestSubscriptionCallbackError.current.stack}
     var DESCRIPTORS2 = require_descriptors();
     var getKeys2 = _objectKeys;
     var gOPS2 = _objectGops;
-    var pIE2 = require_objectPie();
+    var pIE2 = _objectPie;
     var toObject2 = _toObject;
-    var IObject2 = require_iobject();
+    var IObject2 = _iobject;
     var $assign = Object.assign;
     _objectAssign = !$assign || _fails(function() {
       var A2 = {};
@@ -45016,7 +45195,7 @@ ${latestSubscriptionCallbackError.current.stack}
   }, "_iterStep");
   var _iterators = {};
   var _redefine = _hide;
-  var dP$1 = require_objectDp();
+  var dP$1 = _objectDp;
   var anObject$4 = _anObject;
   var getKeys$1 = _objectKeys;
   var _objectDps = require_descriptors() ? Object.defineProperties : /* @__PURE__ */ __name(function defineProperties2(O2, Properties2) {
@@ -45086,7 +45265,7 @@ ${latestSubscriptionCallbackError.current.stack}
   };
   $exports.store = store$2;
   var _wksExports = _wks.exports;
-  var def = require_objectDp().f;
+  var def = _objectDp.f;
   var has$b = _has;
   var TAG$1 = _wksExports("toStringTag");
   var _setToStringTag = /* @__PURE__ */ __name(function(it, tag, stat) {
@@ -45359,7 +45538,7 @@ ${latestSubscriptionCallbackError.current.stack}
   var _isArrayIter = /* @__PURE__ */ __name(function(it) {
     return it !== void 0 && (Iterators.Array === it || ArrayProto[ITERATOR] === it);
   }, "_isArrayIter");
-  var $defineProperty$1 = require_objectDp();
+  var $defineProperty$1 = _objectDp;
   var createDesc$2 = _propertyDesc;
   var _createProperty = /* @__PURE__ */ __name(function(object2, index2, value) {
     if (index2 in object2)
@@ -45488,7 +45667,7 @@ ${latestSubscriptionCallbackError.current.stack}
     }
   }, "_default$8");
   var $export$3 = _export;
-  $export$3($export$3.S + $export$3.F * !require_descriptors(), "Object", { defineProperty: require_objectDp().f });
+  $export$3($export$3.S + $export$3.F * !require_descriptors(), "Object", { defineProperty: _objectDp.f });
   var $Object$1 = _coreExports.Object;
   var defineProperty$6 = /* @__PURE__ */ __name(function defineProperty2(it, key2, desc) {
     return $Object$1.defineProperty(it, key2, desc);
@@ -45529,7 +45708,7 @@ ${latestSubscriptionCallbackError.current.stack}
   var META$1 = _uid("meta");
   var isObject$5 = _isObject;
   var has$9 = _has;
-  var setDesc = require_objectDp().f;
+  var setDesc = _objectDp.f;
   var id$1 = 0;
   var isExtensible = Object.isExtensible || function() {
     return true;
@@ -45582,7 +45761,7 @@ ${latestSubscriptionCallbackError.current.stack}
   var _metaExports = _meta.exports;
   var core = _coreExports;
   var wksExt$1 = _wksExt;
-  var defineProperty$4 = require_objectDp().f;
+  var defineProperty$4 = _objectDp.f;
   var _wksDefine = /* @__PURE__ */ __name(function(name2) {
     var $Symbol2 = core.Symbol || (core.Symbol = {});
     if (name2.charAt(0) != "_" && !(name2 in $Symbol2))
@@ -45590,7 +45769,7 @@ ${latestSubscriptionCallbackError.current.stack}
   }, "_wksDefine");
   var getKeys = _objectKeys;
   var gOPS$1 = _objectGops;
-  var pIE$1 = require_objectPie();
+  var pIE$1 = _objectPie;
   var _enumKeys = /* @__PURE__ */ __name(function(it) {
     var result = getKeys(it);
     var getSymbols2 = gOPS$1.f;
@@ -45631,12 +45810,12 @@ ${latestSubscriptionCallbackError.current.stack}
     return windowNames && toString$3.call(it) == "[object Window]" ? getWindowNames(it) : gOPN$1(toIObject$2(it));
   }, "getOwnPropertyNames");
   var _objectGopd = {};
-  var pIE = require_objectPie();
+  var pIE = _objectPie;
   var createDesc$1 = _propertyDesc;
   var toIObject$1 = _toIobject;
   var toPrimitive$1 = _toPrimitive$1;
   var has$8 = _has;
-  var IE8_DOM_DEFINE = require_ie8DomDefine();
+  var IE8_DOM_DEFINE = _ie8DomDefine;
   var gOPD$2 = Object.getOwnPropertyDescriptor;
   _objectGopd.f = require_descriptors() ? gOPD$2 : /* @__PURE__ */ __name(function getOwnPropertyDescriptor2(O2, P2) {
     O2 = toIObject$1(O2);
@@ -45674,7 +45853,7 @@ ${latestSubscriptionCallbackError.current.stack}
   var gOPNExt = _objectGopnExt;
   var $GOPD = _objectGopd;
   var $GOPS = _objectGops;
-  var $DP = require_objectDp();
+  var $DP = _objectDp;
   var $keys$1 = _objectKeys;
   var gOPD$1 = $GOPD.f;
   var dP = $DP.f;
@@ -45811,7 +45990,7 @@ ${latestSubscriptionCallbackError.current.stack}
     $GOPD.f = $getOwnPropertyDescriptor;
     $DP.f = $defineProperty;
     _objectGopn.f = gOPNExt.f = $getOwnPropertyNames;
-    require_objectPie().f = $propertyIsEnumerable;
+    _objectPie.f = $propertyIsEnumerable;
     $GOPS.f = $getOwnPropertySymbols;
     if (DESCRIPTORS && !_library) {
       redefine(ObjectProto, "propertyIsEnumerable", $propertyIsEnumerable);
@@ -88405,12 +88584,13 @@ ${latestSubscriptionCallbackError.current.stack}
               tabIndex: -1,
               onKeyDown: (e2) => {
                 var _a2, _b2, _c2, _d2, _e, _f;
-                const isArrowKey = e2.keyCode >= 37 && e2.keyCode <= 40 || e2.keyCode === 9;
-                if (isArrowKey && ((_a2 = e2.target) == null ? void 0 : _a2.tagName) !== "INPUT") {
+                const isTabKey = e2.keyCode === 9;
+                const isArrowKey = e2.keyCode >= 37 && e2.keyCode <= 40;
+                if (isArrowKey && ((_a2 = e2.target) == null ? void 0 : _a2.tagName) !== "INPUT" || isTabKey) {
                   const { schema: schema22, entities: entities2 } = computePresets(this.props);
                   const left2 = e2.keyCode === 37;
                   const up = e2.keyCode === 38;
-                  const down = e2.keyCode === 40;
+                  const down = e2.keyCode === 40 || e2.keyCode === 13;
                   let cellIdToUse = this.getPrimarySelectedCellId();
                   const pathToIndex = getFieldPathToIndex(schema22);
                   const entityMap = getEntityIdToEntity(entities2);
@@ -101120,6 +101300,7 @@ ${latestSubscriptionCallbackError.current.stack}
     // called when a file link in the filelist is clicked
     dropzoneProps = {},
     overflowList,
+    autoUnzip,
     disabled,
     initializeForm,
     showFilesCount,
@@ -101144,7 +101325,7 @@ ${latestSubscriptionCallbackError.current.stack}
       validateAgainstSchema = validateAgainstSchemaStore.current;
     }
     const accept = !_accept ? void 0 : lodashExports.isPlainObject(_accept) ? [_accept] : lodashExports.isArray(_accept) ? _accept : _accept.split(",").map((a2) => ({ type: a2 }));
-    if (validateAgainstSchemaStore.current && accept && !accept.some((a2) => a2.type === "zip")) {
+    if ((validateAgainstSchema || autoUnzip) && accept && !accept.some((a2) => a2.type === "zip")) {
       accept == null ? void 0 : accept.unshift({
         type: "zip",
         description: "Any of the following types, just compressed"
@@ -101505,7 +101686,7 @@ ${latestSubscriptionCallbackError.current.stack}
               var _a3, _b3;
               let acceptedFiles = [];
               for (const file of _acceptedFiles) {
-                if (validateAgainstSchema && isZipFile(file)) {
+                if ((validateAgainstSchema || autoUnzip) && isZipFile(file)) {
                   const files = yield filterFilesInZip(
                     file,
                     ((_a3 = simpleAccept == null ? void 0 : simpleAccept.split(", ")) == null ? void 0 : _a3.map((a2) => a2.startsWith(".") ? a2 : "." + a2)) || []
@@ -101530,9 +101711,7 @@ ${latestSubscriptionCallbackError.current.stack}
               if (!acceptedFiles.length)
                 return;
               setLoading(true);
-              if (fileLimit) {
-                acceptedFiles = acceptedFiles.slice(0, fileLimit);
-              }
+              acceptedFiles = trimFiles(acceptedFiles, fileLimit);
               acceptedFiles.forEach((file) => {
                 file.preview = URL.createObjectURL(file);
                 file.loading = true;
@@ -101718,9 +101897,9 @@ ${latestSubscriptionCallbackError.current.stack}
                   `It looks like there wasn't any data in your file. Please add some data and try again`
                 );
               }
-              const cleanedFileList = [...toKeep, ...fileListToUse].slice(
-                0,
-                fileLimit ? fileLimit : void 0
+              const cleanedFileList = trimFiles(
+                [...toKeep, ...fileListToUse],
+                fileLimit
               );
               handleSecondHalfOfUpload({ acceptedFiles, cleanedFileList });
             })
@@ -101968,6 +102147,18 @@ ${latestSubscriptionCallbackError.current.stack}
   __name(stripId, "stripId");
   const manualEnterMessage = "Build CSV File";
   const manualEnterSubMessage = "Paste or type data to build a CSV file";
+  function trimFiles(incomingFiles, fileLimit) {
+    if (fileLimit) {
+      if (fileLimit && incomingFiles.length > fileLimit) {
+        window.toastr && window.toastr.warning(
+          `Detected additional files in your upload that we are ignoring. You can only upload ${fileLimit} file${fileLimit > 1 ? "s" : ""} at a time.`
+        );
+      }
+      return incomingFiles.slice(0, fileLimit);
+    }
+    return incomingFiles;
+  }
+  __name(trimFiles, "trimFiles");
   const style$w = "";
   function DNALoader({ style: style2, className }) {
     return /* @__PURE__ */ React$2.createElement("div", { className: classNames$1("dna-loader", className), style: style2 }, /* @__PURE__ */ React$2.createElement("div", { className: "nucleobase" }), /* @__PURE__ */ React$2.createElement("div", { className: "nucleobase" }), /* @__PURE__ */ React$2.createElement("div", { className: "nucleobase" }), /* @__PURE__ */ React$2.createElement("div", { className: "nucleobase" }), /* @__PURE__ */ React$2.createElement("div", { className: "nucleobase" }), /* @__PURE__ */ React$2.createElement("div", { className: "nucleobase" }), /* @__PURE__ */ React$2.createElement("div", { className: "nucleobase" }), /* @__PURE__ */ React$2.createElement("div", { className: "nucleobase" }), /* @__PURE__ */ React$2.createElement("div", { className: "nucleobase" }), /* @__PURE__ */ React$2.createElement("div", { className: "nucleobase" }));
@@ -150444,8 +150635,23 @@ ${seq.sequence}
       }, hoveredAnnotationActions)
     ),
     withHandlers({
-      onMouseOver: (props) => (e2) => {
+      onMouseOver: (props) => function(e2) {
         var _a2;
+        const target = e2.target;
+        let alreadyHandled = false;
+        let currentElement = target;
+        while (currentElement) {
+          if (currentElement === e2.currentTarget) {
+            break;
+          }
+          if (currentElement.classList.contains("hoverHelper")) {
+            alreadyHandled = true;
+            break;
+          }
+          currentElement = currentElement.parentElement;
+        }
+        if (alreadyHandled)
+          return;
         const { editorName, id: id2, hoveredAnnotationUpdate: hoveredAnnotationUpdate2 } = props;
         const isIdHashmap = typeof id2 === "object";
         const idToPass = isIdHashmap ? Object.keys(id2)[0] : id2;
@@ -150455,7 +150661,6 @@ ${seq.sequence}
         }
         if (window.__veDragging || window.__veScrolling)
           return;
-        e2.stopPropagation();
         hoveredAnnotationUpdate2 && hoveredAnnotationUpdate2(idToPass, { editorName });
       },
       onMouseLeave: (props) => (e2) => {
@@ -154974,7 +155179,7 @@ Part of ${annotation.translationType} Translation from BPs ${annotation.start +
   }
   __name(showFileDialog, "showFileDialog");
   const name = "@teselagen/ove";
-  const version = "0.3.23";
+  const version = "0.3.25";
   const main = "./src/index.js";
   const exports$1 = {
     ".": {
@@ -155727,8 +155932,7 @@ Part of ${annotation.translationType} Translation from BPs ${annotation.start +
       });
       props.annotationVisibilityShow("translations");
     },
-    isHidden: (props) => isProtein(props) || !props.annotationsToSupport || // props.readOnly ||
-    !props.annotationsToSupport.translations,
+    isHidden: (props) => isProtein(props) || !props.annotationsToSupport || props.readOnly || !props.annotationsToSupport.translations,
     isDisabled: (props) => (
       /* (props.readOnly && readOnlyDisabledTooltip) ||  */
       props.sequenceLength === 0 || noSelection(props)
@@ -161864,438 +162068,18 @@ Part of ${annotation.translationType} Translation from BPs ${annotation.start +
   }
   __name(combineLabels, "combineLabels");
   const style$f = "";
-  const fontWidthToFontSize = 1.75;
-  const getTextLength = /* @__PURE__ */ __name((text2) => {
-    let len2 = (text2 || "Unlabeled").length;
-    const nonEnInputReg = /[^\x00-\xff]+/g;
-    const nonEnStrings = (text2 || "Unlabeled").match(nonEnInputReg) || [];
-    nonEnStrings.forEach((str) => len2 += str.length * 0.5);
-    return len2;
-  }, "getTextLength");
-  function Labels({
-    labels: labels2 = [],
-    extraSideSpace,
-    smartCircViewLabelRender,
-    radius: outerRadius,
-    editorName,
-    noRedux,
-    rotationRadians,
-    textScalingFactor,
-    labelLineIntensity: labelLineIntensity2,
-    labelSize: labelSize2 = 8,
-    fontHeightMultiplier = 2.4,
-    circularViewWidthVsHeightRatio,
-    //width of the circular view
-    condenseOverflowingXLabels = true
-    //set to true to make labels tha
-  }) {
-    if (!labels2.length) {
-      return {
-        component: null,
-        height: 15
-      };
-    }
-    const originalOuterRadius = outerRadius;
-    outerRadius += smartCircViewLabelRender ? 10 : 25;
-    const radius = outerRadius;
-    const outerPointRadius = outerRadius - 20;
-    const fontWidth = labelSize2 * (textScalingFactor < 1 ? textScalingFactor : 1);
-    const fontHeight = fontWidth * lodashExports.clamp(fontHeightMultiplier, 1.5, 3.5);
-    const labelPoints = labels2.map(function(label) {
-      const {
-        annotationCenterAngle: _annotationCenterAngle,
-        annotationCenterRadius
-      } = label;
-      const annotationCenterAngle = _annotationCenterAngle + (rotationRadians || 0);
-      return __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, label), {
-        width: getTextLength(label.text) * fontWidth,
-        //three points define the label:
-        innerPoint: __spreadProps(__spreadValues({}, polarToSpecialCartesian$1(
-          annotationCenterRadius,
-          annotationCenterAngle
-        )), {
-          radius: annotationCenterRadius,
-          angle: annotationCenterAngle
-        }),
-        truncatedInnerPoint: __spreadProps(__spreadValues({}, polarToSpecialCartesian$1(
-          outerPointRadius - 15,
-          annotationCenterAngle
-        )), {
-          radius: outerPointRadius - 15,
-          angle: annotationCenterAngle
-        }),
-        outerPoint: __spreadProps(__spreadValues({}, polarToSpecialCartesian$1(outerPointRadius, annotationCenterAngle)), {
-          radius: outerPointRadius,
-          angle: annotationCenterAngle
-        })
-      }), polarToSpecialCartesian$1(radius, annotationCenterAngle)), {
-        radius: radius + 10,
-        angle: annotationCenterAngle
-      });
-    }).map(function(label) {
-      label.labelAndSublabels = [label];
-      label.labelIds = { [label.id]: true };
-      return label;
-    });
-    let maxRadius = 1;
-    const groupedLabels = relaxLabelAngles(labelPoints, fontHeight, outerRadius).filter((l2) => !!l2).map((originalLabel) => {
-      if (smartCircViewLabelRender) {
-        const newR = Math.sqrt(
-          Math.pow(
-            Math.abs(originalLabel.x) + Math.max(0, originalLabel.text.length * 11 - extraSideSpace / 2),
-            2
-          ) + Math.pow(Math.abs(originalLabel.y), 2)
-        );
-        if (newR > maxRadius)
-          maxRadius = newR;
-      }
-      if (originalLabel.highPriorityLabel) {
-        return originalLabel;
-      }
-      const _highPrioritySublabel = originalLabel.labelAndSublabels.find(
-        (l2) => l2.highPriorityLabel
-      );
-      if (_highPrioritySublabel) {
-        const highPrioritySublabel = lodashExports.cloneDeep(_highPrioritySublabel);
-        [
-          "angle",
-          "annotationCenterAngle",
-          "annotationCenterRadius",
-          "innerPoint",
-          "labelAndSublabels",
-          "labelIds",
-          "outerPoint",
-          "radius",
-          "truncatedInnerPoint",
-          "x",
-          "y"
-        ].forEach((k2) => {
-          highPrioritySublabel[k2] = originalLabel[k2];
-        });
-        delete originalLabel.labelAndSublabels;
-        return highPrioritySublabel;
-      }
-      return originalLabel;
-    });
-    window.isLabelGroupOpen = false;
-    return {
-      component: /* @__PURE__ */ React$2.createElement(
-        "g",
-        {
-          key: "veLabels",
-          className: "veLabels ve-monospace-font",
-          transform: `rotate(-${rotationRadians * 180 / Math.PI})`
-        },
-        /* @__PURE__ */ React$2.createElement(
-          DrawGroupedLabels,
-          __spreadValues({}, {
-            editorName,
-            noRedux,
-            groupedLabels,
-            circularViewWidthVsHeightRatio,
-            fontWidth,
-            fontHeight,
-            condenseOverflowingXLabels,
-            outerRadius,
-            labelLineIntensity: labelLineIntensity2
-          })
-        )
-      ),
-      //we use the <use> tag to position the hovered label group at the top of the stack
-      //point events: none is to fix a click bug..
-      //http://stackoverflow.com/questions/24078524/svg-click-events-not-firing-bubbling-when-using-use-element
-      height: smartCircViewLabelRender ? Math.min(105, maxRadius - originalOuterRadius) : 120
-    };
-  }
-  __name(Labels, "Labels");
-  const DrawLabelGroup = withHover(function({
-    hovered,
-    className,
-    label,
-    labelAndSublabels,
-    fontWidth,
-    noRedux,
-    fontHeight,
-    outerRadius,
-    onMouseLeave,
-    onMouseOver,
-    editorName,
-    circularViewWidthVsHeightRatio,
-    condenseOverflowingXLabels,
-    hoveredId,
-    labelLineIntensity: labelLineIntensity2,
-    // labelIds,
-    multipleLabels
-    // isIdHashmap,
-  }) {
-    let { text: text2 = "Unlabeled" } = label;
-    const textLength = getTextLength(text2);
-    let groupLabelXStart;
-    if (label.labelAndSublabels && label.labelAndSublabels.length > 1) {
-      text2 = "+" + (label.labelAndSublabels.length - 1) + "," + text2;
-    }
-    const labelLength = textLength * fontWidth;
-    const maxLabelLength = labelAndSublabels.reduce(function(currentLength, { text: text22 = "Unlabeled" }) {
-      const _textLength = getTextLength(text22);
-      if (_textLength > currentLength) {
-        return _textLength;
-      }
-      return currentLength;
-    }, 0);
-    const maxLabelWidth = maxLabelLength * fontWidth;
-    const labelOnLeft = label.angle > Math.PI;
-    let labelXStart = label.x - (labelOnLeft ? labelLength : 0);
-    if (condenseOverflowingXLabels) {
-      const distancePastBoundary = Math.abs(label.x + (labelOnLeft ? -labelLength : labelLength)) - (outerRadius + 90) * Math.max(1, circularViewWidthVsHeightRatio);
-      if (distancePastBoundary > 0) {
-        const numberOfCharsToChop = Math.ceil(distancePastBoundary / fontWidth) + 2;
-        text2 = text2.slice(0, -numberOfCharsToChop) + "..";
-        groupLabelXStart = labelXStart + (labelOnLeft ? distancePastBoundary : -distancePastBoundary);
-        labelXStart += labelOnLeft ? distancePastBoundary : 0;
-      }
-    }
-    const dy = fontHeight;
-    const textYStart = label.y + dy / 2;
-    let content2;
-    const labelClass = ` veLabelText veCircularViewLabelText clickable ${label.color} `;
-    if ((multipleLabels || groupLabelXStart !== void 0) && hovered) {
-      window.isLabelGroupOpen = true;
-      let hoveredLabel;
-      if (groupLabelXStart !== void 0) {
-        labelXStart = groupLabelXStart;
-      }
-      labelAndSublabels.some(function(label2) {
-        if (label2.id === hoveredId) {
-          hoveredLabel = label2;
-          return true;
-        }
-        return false;
-      });
-      if (!hoveredLabel) {
-        hoveredLabel = label;
-      }
-      let labelYStart = label.y;
-      const labelGroupHeight = labelAndSublabels.length * dy;
-      const labelGroupBottom = label.y + labelGroupHeight;
-      if (labelGroupBottom > outerRadius + 20) {
-        labelYStart -= (label.labelAndSublabels.length - 1) * dy;
-      }
-      const line = LabelLine(
-        [
-          hoveredLabel.innerPoint,
-          // hoveredLabel.labelAndSublabels &&
-          // hoveredLabel.labelAndSublabels.length > 0
-          //   ? hoveredLabel.outerPoint
-          //   : {},
-          label
-        ],
-        { style: { opacity: 1 }, strokeWidth: 2 }
-      );
-      content2 = [
-        line,
-        /* @__PURE__ */ React$2.createElement(PutMyParentOnTop, { editorName, key: "gGroup" }, /* @__PURE__ */ React$2.createElement("g", { className: className + " topLevelLabelGroup" }, /* @__PURE__ */ React$2.createElement(
-          "rect",
-          {
-            onMouseOver: cancelFn,
-            x: labelXStart - 4,
-            y: labelYStart - dy / 2,
-            width: maxLabelWidth + 24,
-            height: labelGroupHeight + 4,
-            fill: "white",
-            stroke: "black"
-          }
-        ), /* @__PURE__ */ React$2.createElement(
-          "text",
-          {
-            x: labelXStart,
-            y: labelYStart,
-            style: {
-              fontSize: fontWidth * fontWidthToFontSize,
-              fontStyle: label.fontStyle
-            }
-          },
-          labelAndSublabels.map(function(label2, index2) {
-            return /* @__PURE__ */ React$2.createElement(
-              DrawGroupInnerLabel,
-              __spreadValues({
-                isSubLabel: true,
-                noRedux,
-                editorName,
-                logHover: true,
-                key: "labelItem" + index2,
-                className: (label2.className || "") + labelClass + " veDrawGroupInnerLabel",
-                id: label2.id
-              }, { labelXStart, label: label2, fontWidth, index: index2, dy })
-            );
-          })
-        )))
-      ];
-    } else {
-      content2 = [
-        /* @__PURE__ */ React$2.createElement("title", { key: "labeltitle" }, label.title || label.text),
-        /* @__PURE__ */ React$2.createElement(
-          "text",
-          {
-            key: "text",
-            x: labelXStart,
-            textLength: getTextLength(text2) * fontWidth,
-            lengthAdjust: "spacing",
-            className: labelClass + label.className + (hovered ? " veAnnotationHovered" : ""),
-            y: textYStart,
-            style: {
-              fontSize: fontWidth * fontWidthToFontSize,
-              fontStyle: label.fontStyle,
-              fill: label.color || "black"
-              // stroke: label.color ? label.color : "black"
-            }
-          },
-          text2
-        ),
-        LabelLine(
-          [
-            label.innerPoint,
-            // hovered || label.annotationType === "part" //because parts live on the outside of the sequence, we don't need to show the truncated point, we can just point to them directly
-            //   ? label.innerPoint
-            //   : label.truncatedInnerPoint,
-            label.outerPoint,
-            label
-          ],
-          hovered ? { style: { opacity: 1 }, strokeWidth: 2 } : { style: { opacity: labelLineIntensity2 } }
-        )
-      ];
-    }
-    return /* @__PURE__ */ React$2.createElement(
-      "g",
-      __spreadValues(__spreadValues({}, { onMouseLeave, onMouseOver }), {
-        onClick: label.onClick,
-        onDoubleClick: label.onDoubleClick || lodashExports.noop,
-        onContextMenu: label.onContextMenu || lodashExports.noop
-      }),
-      content2
-    );
-  });
-  function LabelLine(pointArray, options) {
-    let points = "";
-    pointArray.forEach(function({ x: x2, y: y2 }) {
-      if (!x2 && x2 !== 0)
-        return;
-      points += `${x2},${y2} `;
-    });
-    return /* @__PURE__ */ React$2.createElement(React$2.Fragment, { key: "labelLine" }, /* @__PURE__ */ React$2.createElement(
-      "polyline",
-      __spreadValues({}, __spreadValues({
-        key: "polyline-long",
-        points,
-        stroke: "black",
-        fill: "none",
-        strokeWidth: 1,
-        className: "veLabelLine"
-      }, options))
-    ));
-  }
-  __name(LabelLine, "LabelLine");
-  const DrawGroupInnerLabel = withHover(
-    ({ className, labelXStart, label, fontWidth, onMouseOver, index: index2, dy }) => {
-      return /* @__PURE__ */ React$2.createElement(
-        "tspan",
-        __spreadProps(__spreadValues({
-          x: labelXStart,
-          textLength: getTextLength(label.text) * fontWidth,
-          lengthAdjust: "spacing",
-          onClick: label.onClick,
-          onDoubleClick: (e2) => {
-            e2.stopPropagation();
-            label.onDoubleClick && label.onDoubleClick(e2);
-          },
-          onContextMenu: label.onContextMenu,
-          dy: index2 === 0 ? dy / 2 : dy,
-          style: {
-            fill: label.color ? label.color : "black",
-            fontStyle: label.fontStyle
-          }
-        }, { onMouseOver }), {
-          className
-        }),
-        /* @__PURE__ */ React$2.createElement("title", null, label.title),
-        label.text
-      );
-    }
-  );
-  const DrawGroupedLabels = /* @__PURE__ */ __name(function DrawGroupedLabelsInner({
-    groupedLabels,
-    circularViewWidthVsHeightRatio,
-    fontWidth,
-    noRedux,
-    fontHeight,
-    condenseOverflowingXLabels,
-    outerRadius,
-    editorName,
-    labelLineIntensity: labelLineIntensity2
-  }) {
-    return groupedLabels.map(function(label, i2) {
-      const { labelAndSublabels, labelIds } = label;
-      const multipleLabels = labelAndSublabels.length > 1;
-      return /* @__PURE__ */ React$2.createElement(
-        DrawLabelGroup,
-        __spreadValues({
-          key: i2,
-          id: labelIds
-        }, {
-          label,
-          noRedux,
-          passHoveredId: true,
-          //needed to get the hoveredId
-          isLabelGroup: true,
-          className: "DrawLabelGroup",
-          multipleLabels,
-          labelAndSublabels,
-          labelIds,
-          circularViewWidthVsHeightRatio,
-          fontWidth,
-          editorName,
-          fontHeight,
-          condenseOverflowingXLabels,
-          outerRadius,
-          labelLineIntensity: labelLineIntensity2
-        })
-      );
-    });
-  }, "DrawGroupedLabelsInner");
-  function cancelFn(e2) {
-    e2.stopPropagation();
-  }
-  __name(cancelFn, "cancelFn");
-  const _PutMyParentOnTop = class _PutMyParentOnTop extends React$2.Component {
-    componentDidMount() {
-      const { editorName } = this.props;
-      try {
-        const el2 = document.querySelector(
-          `.veEditor.${editorName} .topLevelLabelGroup`
-        );
-        const parent2 = el2.parentElement.parentElement;
-        const i2 = Array.prototype.indexOf.call(parent2.children, el2.parentElement);
-        parent2.insertBefore(parent2.children[i2], null);
-      } catch (error) {
-        console.warn(
-          "OVE-975239 - hit an error trying to re-order labels:",
-          error
-        );
-      }
-    }
-    render() {
-      return this.props.children;
-    }
-  };
-  __name(_PutMyParentOnTop, "PutMyParentOnTop");
-  let PutMyParentOnTop = _PutMyParentOnTop;
-  var baseGetTag = _baseGetTag, isObjectLike = isObjectLike_1;
-  var numberTag = "[object Number]";
-  function isNumber(value) {
-    return typeof value == "number" || isObjectLike(value) && baseGetTag(value) == numberTag;
+  function getRangeAnglesSpecial() {
+    const _a2 = getRangeAngles.apply(
+      this,
+      arguments
+    ), { endAngle, totalAngle } = _a2, rest = __objRest(_a2, ["endAngle", "totalAngle"]);
+    return __spreadValues({
+      endAngle: endAngle - 1e-5,
+      //we subtract a tiny amount because an angle of 2PI will cause nothing to be drawn!
+      totalAngle: totalAngle - 1e-5
+    }, rest);
   }
-  __name(isNumber, "isNumber");
-  var isNumber_1 = isNumber;
-  const isNumber$1 = /* @__PURE__ */ getDefaultExportFromCjs(isNumber_1);
+  __name(getRangeAnglesSpecial, "getRangeAnglesSpecial");
   function PositionAnnotationOnCircle(_z) {
     var _A = _z, {
       children,
@@ -162326,60 +162110,6 @@ Part of ${annotation.translationType} Translation from BPs ${annotation.start +
     return React$2.cloneElement(children, props);
   }
   __name(PositionAnnotationOnCircle, "PositionAnnotationOnCircle");
-  function Caret({
-    caretPosition: caretPosition2,
-    sequenceLength,
-    className,
-    onClick,
-    isSelection,
-    innerRadius,
-    outerRadius,
-    isProtein: isProtein2,
-    selectionMessage
-  }) {
-    const { startAngle, endAngle } = getRangeAngles(
-      { start: caretPosition2, end: caretPosition2 },
-      sequenceLength || 1
-    );
-    if (!isNumber$1(startAngle)) {
-      console.error("we've got a problem!");
-    }
-    const { transform: transform2 } = PositionAnnotationOnCircle({
-      sAngle: startAngle,
-      eAngle: endAngle,
-      height: 0
-    });
-    return /* @__PURE__ */ React$2.createElement(
-      "g",
-      {
-        onClick,
-        transform: transform2,
-        className: className + " veCaret " + draggableClassnames.caret
-      },
-      /* @__PURE__ */ React$2.createElement("title", null, selectionMessage || getSelectionMessage({ caretPosition: caretPosition2, isProtein: isProtein2, sequenceLength })),
-      /* @__PURE__ */ React$2.createElement(
-        "line",
-        {
-          strokeWidth: "1.5px",
-          x1: 0,
-          y1: -innerRadius,
-          x2: 0,
-          y2: -outerRadius
-        }
-      ),
-      isSelection ? /* @__PURE__ */ React$2.createElement(
-        "polygon",
-        {
-          className: "vePolygonCaretHandle",
-          fill: "black",
-          points: `0,${-outerRadius + 2} 5,${-outerRadius - 10} -5,${-outerRadius - 10}`
-        }
-      ) : null
-    );
-  }
-  __name(Caret, "Caret");
-  const Caret$1 = pure(Caret);
-  var sector$1 = { exports: {} };
   var path = { exports: {} };
   var geom = { exports: {} };
   (function(module2, exports3) {
@@ -162988,407 +162718,6 @@ Part of ${annotation.translationType} Translation from BPs ${annotation.start +
   })(path, path.exports);
   var pathExports = path.exports;
   const Path = /* @__PURE__ */ getDefaultExportFromCjs(pathExports);
-  var ops = {};
-  (function(exports3) {
-    Object.defineProperty(exports3, "__esModule", {
-      value: true
-    });
-    var _slicedToArray2 = function() {
-      function sliceIterator(arr, i2) {
-        var _arr = [];
-        var _n = true;
-        var _d2 = false;
-        var _e = void 0;
-        try {
-          for (var _i = arr[Symbol.iterator](), _s2; !(_n = (_s2 = _i.next()).done); _n = true) {
-            _arr.push(_s2.value);
-            if (i2 && _arr.length === i2)
-              break;
-          }
-        } catch (err2) {
-          _d2 = true;
-          _e = err2;
-        } finally {
-          try {
-            if (!_n && _i["return"])
-              _i["return"]();
-          } finally {
-            if (_d2)
-              throw _e;
-          }
-        }
-        return _arr;
-      }
-      __name(sliceIterator, "sliceIterator");
-      return function(arr, i2) {
-        if (Array.isArray(arr)) {
-          return arr;
-        } else if (Symbol.iterator in Object(arr)) {
-          return sliceIterator(arr, i2);
-        } else {
-          throw new TypeError("Invalid attempt to destructure non-iterable instance");
-        }
-      };
-    }();
-    var sum2 = /* @__PURE__ */ __name(function sum3(xs) {
-      return xs.reduce(function(a2, b3) {
-        return a2 + b3;
-      }, 0);
-    }, "sum");
-    var min2 = /* @__PURE__ */ __name(function min3(xs) {
-      return xs.reduce(function(a2, b3) {
-        return Math.min(a2, b3);
-      });
-    }, "min");
-    var max2 = /* @__PURE__ */ __name(function max3(xs) {
-      return xs.reduce(function(a2, b3) {
-        return Math.max(a2, b3);
-      });
-    }, "max");
-    var sumBy = /* @__PURE__ */ __name(function sumBy2(xs, f2) {
-      return xs.reduce(function(a2, b3) {
-        return a2 + f2(b3);
-      }, 0);
-    }, "sumBy");
-    var minBy = /* @__PURE__ */ __name(function minBy2(xs, f2) {
-      return xs.reduce(function(a2, b3) {
-        return Math.min(a2, f2(b3));
-      }, Infinity);
-    }, "minBy");
-    var maxBy = /* @__PURE__ */ __name(function maxBy2(xs, f2) {
-      return xs.reduce(function(a2, b3) {
-        return Math.max(a2, f2(b3));
-      }, -Infinity);
-    }, "maxBy");
-    var plus = /* @__PURE__ */ __name(function plus2(_ref, _ref3) {
-      var _ref2 = _slicedToArray2(_ref, 2);
-      var a2 = _ref2[0];
-      var b3 = _ref2[1];
-      var _ref32 = _slicedToArray2(_ref3, 2);
-      var c2 = _ref32[0];
-      var d2 = _ref32[1];
-      return [a2 + c2, b3 + d2];
-    }, "plus");
-    var minus = /* @__PURE__ */ __name(function minus2(_ref4, _ref5) {
-      var _ref42 = _slicedToArray2(_ref4, 2);
-      var a2 = _ref42[0];
-      var b3 = _ref42[1];
-      var _ref52 = _slicedToArray2(_ref5, 2);
-      var c2 = _ref52[0];
-      var d2 = _ref52[1];
-      return [a2 - c2, b3 - d2];
-    }, "minus");
-    var times = /* @__PURE__ */ __name(function times2(k2, _ref6) {
-      var _ref62 = _slicedToArray2(_ref6, 2);
-      var a2 = _ref62[0];
-      var b3 = _ref62[1];
-      return [k2 * a2, k2 * b3];
-    }, "times");
-    var length = /* @__PURE__ */ __name(function length2(_ref7) {
-      var _ref72 = _slicedToArray2(_ref7, 2);
-      var a2 = _ref72[0];
-      var b3 = _ref72[1];
-      return Math.sqrt(a2 * a2 + b3 * b3);
-    }, "length");
-    var sumVectors = /* @__PURE__ */ __name(function sumVectors2(xs) {
-      return xs.reduce(plus, [0, 0]);
-    }, "sumVectors");
-    var average = /* @__PURE__ */ __name(function average2(points) {
-      return times(1 / points.length, points.reduce(plus));
-    }, "average");
-    var onCircle = /* @__PURE__ */ __name(function onCircle2(r2, angle2) {
-      return times(r2, [Math.sin(angle2), -Math.cos(angle2)]);
-    }, "onCircle");
-    var enhance = /* @__PURE__ */ __name(function enhance2(compute, curve) {
-      var obj = compute || {};
-      for (var key2 in obj) {
-        var method = obj[key2];
-        curve[key2] = method(curve.index, curve.item, curve.group);
-      }
-      return curve;
-    }, "enhance");
-    var range2 = /* @__PURE__ */ __name(function range3(a2, b3, inclusive) {
-      var result = [];
-      for (var i2 = a2; i2 < b3; i2++) {
-        result.push(i2);
-      }
-      if (inclusive) {
-        result.push(b3);
-      }
-      return result;
-    }, "range");
-    var mapObject = /* @__PURE__ */ __name(function mapObject2(obj, f2) {
-      var result = [];
-      var _iteratorNormalCompletion = true;
-      var _didIteratorError = false;
-      var _iteratorError = void 0;
-      try {
-        for (var _iterator3 = Object.keys(obj)[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator3.next()).done); _iteratorNormalCompletion = true) {
-          var k2 = _step.value;
-          var v2 = obj[k2];
-          result.push(f2(k2, v2));
-        }
-      } catch (err2) {
-        _didIteratorError = true;
-        _iteratorError = err2;
-      } finally {
-        try {
-          if (!_iteratorNormalCompletion && _iterator3["return"]) {
-            _iterator3["return"]();
-          }
-        } finally {
-          if (_didIteratorError) {
-            throw _iteratorError;
-          }
-        }
-      }
-      return result;
-    }, "mapObject");
-    var pairs = /* @__PURE__ */ __name(function pairs2(obj) {
-      return mapObject(obj, function(k2, v2) {
-        return [k2, v2];
-      });
-    }, "pairs");
-    var id2 = /* @__PURE__ */ __name(function id3(x2) {
-      return x2;
-    }, "id");
-    exports3.sum = sum2;
-    exports3.min = min2;
-    exports3.max = max2;
-    exports3.sumBy = sumBy;
-    exports3.minBy = minBy;
-    exports3.maxBy = maxBy;
-    exports3.plus = plus;
-    exports3.minus = minus;
-    exports3.times = times;
-    exports3.id = id2;
-    exports3.length = length;
-    exports3.sumVectors = sumVectors;
-    exports3.average = average;
-    exports3.onCircle = onCircle;
-    exports3.enhance = enhance;
-    exports3.range = range2;
-    exports3.mapObject = mapObject;
-    exports3.pairs = pairs;
-    exports3["default"] = {
-      sum: sum2,
-      min: min2,
-      max: max2,
-      sumBy,
-      minBy,
-      maxBy,
-      plus,
-      minus,
-      times,
-      id: id2,
-      length,
-      sumVectors,
-      average,
-      onCircle,
-      enhance,
-      range: range2,
-      mapObject,
-      pairs
-    };
-  })(ops);
-  (function(module2, exports3) {
-    Object.defineProperty(exports3, "__esModule", {
-      value: true
-    });
-    function _interopRequireDefault2(obj) {
-      return obj && obj.__esModule ? obj : { "default": obj };
-    }
-    __name(_interopRequireDefault2, "_interopRequireDefault");
-    function _toConsumableArray2(arr) {
-      if (Array.isArray(arr)) {
-        for (var i2 = 0, arr2 = Array(arr.length); i2 < arr.length; i2++)
-          arr2[i2] = arr[i2];
-        return arr2;
-      } else {
-        return Array.from(arr);
-      }
-    }
-    __name(_toConsumableArray2, "_toConsumableArray");
-    var _path = pathExports;
-    var _path2 = _interopRequireDefault2(_path);
-    var _ops = ops;
-    exports3["default"] = function(_ref) {
-      var _Path$moveto$arc$lineto, _Path$moveto$arc, _Path$moveto, _Path;
-      var center = _ref.center;
-      var r2 = _ref.r;
-      var R2 = _ref.R;
-      var start2 = _ref.start;
-      var end2 = _ref.end;
-      var epsilon = 1e-4;
-      if (Math.abs(end2 - 2 * Math.PI) < epsilon) {
-        end2 = 2 * Math.PI - epsilon;
-      }
-      var a2 = (0, _ops.plus)(center, (0, _ops.onCircle)(R2, start2));
-      var b3 = (0, _ops.plus)(center, (0, _ops.onCircle)(R2, end2));
-      var c2 = (0, _ops.plus)(center, (0, _ops.onCircle)(r2, end2));
-      var d2 = (0, _ops.plus)(center, (0, _ops.onCircle)(r2, start2));
-      var large = end2 - start2 > Math.PI ? 1 : 0;
-      var path2 = (_Path$moveto$arc$lineto = (_Path$moveto$arc = (_Path$moveto = (_Path = (0, _path2["default"])()).moveto.apply(_Path, _toConsumableArray2(a2))).arc.apply(_Path$moveto, [R2, R2, 0, large, 1].concat(_toConsumableArray2(b3)))).lineto.apply(_Path$moveto$arc, _toConsumableArray2(c2))).arc.apply(_Path$moveto$arc$lineto, [r2, r2, 0, large, 0].concat(_toConsumableArray2(d2))).closepath();
-      var midAngle = (start2 + end2) / 2;
-      var midRadius = (r2 + R2) / 2;
-      var centroid = (0, _ops.plus)(center, (0, _ops.onCircle)(midRadius, midAngle));
-      return {
-        path: path2,
-        centroid
-      };
-    };
-    module2.exports = exports3["default"];
-  })(sector$1, sector$1.exports);
-  var sectorExports = sector$1.exports;
-  const sector = /* @__PURE__ */ getDefaultExportFromCjs(sectorExports);
-  function getRangeAnglesSpecial() {
-    const _a2 = getRangeAngles.apply(
-      this,
-      arguments
-    ), { endAngle, totalAngle } = _a2, rest = __objRest(_a2, ["endAngle", "totalAngle"]);
-    return __spreadValues({
-      endAngle: endAngle - 1e-5,
-      //we subtract a tiny amount because an angle of 2PI will cause nothing to be drawn!
-      totalAngle: totalAngle - 1e-5
-    }, rest);
-  }
-  __name(getRangeAnglesSpecial, "getRangeAnglesSpecial");
-  function SelectionLayer({
-    isDraggable,
-    selectionLayer: selectionLayer2,
-    sequenceLength,
-    radius,
-    hideTitle,
-    innerRadius,
-    onRightClicked,
-    onClick,
-    index: index2,
-    isProtein: isProtein2
-  }) {
-    const {
-      color: color2,
-      start: start2,
-      end: end2,
-      hideCarets = false,
-      style: style2,
-      className
-    } = selectionLayer2;
-    const { startAngle, endAngle, totalAngle } = getRangeAnglesSpecial(
-      selectionLayer2,
-      sequenceLength
-    );
-    const section = sector({
-      center: [0, 0],
-      //the center is always 0,0 for our annotations :) we rotate later!
-      r: innerRadius,
-      R: radius,
-      start: 0,
-      end: totalAngle
-    });
-    const selectionMessage = getSelectionMessage({
-      sequenceLength,
-      selectionLayer: selectionLayer2,
-      isProtein: isProtein2
-    });
-    const { transform: transform2 } = PositionAnnotationOnCircle({
-      sAngle: startAngle,
-      eAngle: endAngle,
-      height: 0
-    });
-    return /* @__PURE__ */ React$2.createElement(
-      "g",
-      {
-        onContextMenu: (event) => {
-          onRightClicked && onRightClicked({
-            annotation: selectionLayer2,
-            event
-          });
-        },
-        onClick: onClick ? (event) => {
-          onClick({
-            annotation: selectionLayer2,
-            event
-          });
-        } : void 0,
-        key: "veSelectionLayer" + index2,
-        className: "veSelectionLayer " + (className || "")
-      },
-      !hideTitle && /* @__PURE__ */ React$2.createElement("title", null, selectionMessage),
-      /* @__PURE__ */ React$2.createElement(
-        "path",
-        {
-          transform: transform2,
-          className: "selectionLayer",
-          style: __spreadValues({ opacity: 0.3 }, style2),
-          d: section.path.print(),
-          fill: color2
-        }
-      ),
-      !hideCarets && /* @__PURE__ */ React$2.createElement(
-        Caret$1,
-        {
-          key: "caret1",
-          className: className + " selectionLayerCaret " + (isDraggable ? draggableClassnames.selectionStart : ""),
-          isSelection: true,
-          onClick: onClick ? noop$4 : preventDefaultStopPropagation,
-          selectionMessage,
-          caretPosition: start2,
-          sequenceLength,
-          innerRadius,
-          outerRadius: radius
-        }
-      ),
-      !hideCarets && /* @__PURE__ */ React$2.createElement(
-        Caret$1,
-        {
-          key: "caret2",
-          className: className + " selectionLayerCaret " + (isDraggable ? draggableClassnames.selectionEnd : ""),
-          isSelection: true,
-          onClick: onClick ? noop$4 : preventDefaultStopPropagation,
-          selectionMessage,
-          caretPosition: end2 + 1,
-          sequenceLength,
-          innerRadius,
-          outerRadius: radius
-        }
-      )
-    );
-  }
-  __name(SelectionLayer, "SelectionLayer");
-  const SelectionLayer$1 = pure(SelectionLayer);
-  function Axis({
-    radius,
-    showAxisNumbers,
-    tickMarkHeight = 5,
-    textOffset = 15,
-    ringThickness = 4,
-    zoomLevel
-  }) {
-    const height2 = (ringThickness + (showAxisNumbers ? textOffset + tickMarkHeight : 0)) / zoomLevel;
-    const radiusToUse = showAxisNumbers ? radius + textOffset + tickMarkHeight : radius;
-    const component = /* @__PURE__ */ React$2.createElement("g", { key: "veAxis", className: "veAxis" }, /* @__PURE__ */ React$2.createElement(
-      "circle",
-      {
-        className: "veAxisLine veAxisOuter",
-        key: "circleOuter",
-        r: radiusToUse + ringThickness,
-        style: { fill: "#ffffff00", stroke: "black", strokeWidth: 0.5 }
-      }
-    ), /* @__PURE__ */ React$2.createElement(
-      "circle",
-      {
-        className: "veAxisLine veAxisInner",
-        key: "circle",
-        r: radiusToUse,
-        style: { fill: "#ffffff00", stroke: "black", strokeWidth: 0.5 }
-      }
-    ));
-    return {
-      component,
-      height: height2
-    };
-  }
-  __name(Axis, "Axis");
   function polarToSpecialCartesian(radius, angleInRadians) {
     return {
       x: radius * Math.cos(angleInRadians - Math.PI / 2),
@@ -163504,30 +162833,6 @@ Part of ${annotation.translationType} Translation from BPs ${annotation.start +
     return path2;
   }
   __name(drawDirectedPiePiece, "drawDirectedPiePiece");
-  function CircularPrimer$1({
-    color: color2 = "orange",
-    radius,
-    annotationHeight,
-    totalAngle
-  }) {
-    return /* @__PURE__ */ React$2.createElement(
-      "path",
-      {
-        className: "veOrf",
-        strokeWidth: ".5",
-        stroke: color2,
-        fill: color2,
-        d: drawDirectedPiePiece({
-          radius,
-          annotationHeight,
-          totalAngle,
-          arrowheadLength: 0.4,
-          tailThickness: 0.4
-        }).print()
-      }
-    );
-  }
-  __name(CircularPrimer$1, "CircularPrimer$1");
   function getInternalLabel({
     ellipsizedName,
     id: id2,
@@ -163641,58 +162946,6 @@ Part of ${annotation.translationType} Translation from BPs ${annotation.start +
     })));
   }
   __name(Feature, "Feature");
-  function CircularPrimer(props) {
-    const {
-      color: color2 = "orange",
-      radius,
-      arrowheadLength = 0.5,
-      annotationHeight,
-      totalAngle,
-      id: id2,
-      labelNeedsFlip,
-      ellipsizedName
-    } = props;
-    const [path2, textPath] = drawDirectedPiePiece({
-      radius,
-      annotationHeight,
-      totalAngle,
-      arrowheadLength,
-      tailThickness: 1,
-      //feature specific
-      returnTextPath: true,
-      hasLabel: ellipsizedName,
-      labelNeedsFlip
-    });
-    return /* @__PURE__ */ React$2.createElement(React$2.Fragment, null, getStripedPattern({ color: color2 }), /* @__PURE__ */ React$2.createElement(
-      "path",
-      {
-        className: "vePrimer veCircularViewPrimer",
-        id: id2,
-        strokeWidth: ".5",
-        stroke: "black",
-        fill: "url(#diagonalHatch)",
-        d: path2.print()
-      }
-    ), getInternalLabel(__spreadProps(__spreadValues({}, props), { colorToUse: color2, textPath })));
-  }
-  __name(CircularPrimer, "CircularPrimer");
-  function Cutsite({
-    annotationHeight,
-    radius
-    // totalAngle,
-    // ...rest
-  }) {
-    return /* @__PURE__ */ React$2.createElement(
-      "rect",
-      {
-        className: "veCutsite",
-        width: 1,
-        y: -radius - 4,
-        height: annotationHeight
-      }
-    );
-  }
-  __name(Cutsite, "Cutsite");
   function drawAnnotations(props) {
     const {
       readOnly: readOnly2,
@@ -163973,7 +163226,6 @@ Part of ${annotation.translationType} Translation from BPs ${annotation.start +
       onMouseLeave,
       onMouseOver
     };
-    const title = /* @__PURE__ */ React$2.createElement("title", null, titleText);
     function getInner({
       startAngle: startAngle2,
       endAngle: endAngle2,
@@ -163990,11 +163242,12 @@ Part of ${annotation.translationType} Translation from BPs ${annotation.start +
       });
       return /* @__PURE__ */ React$2.createElement(
         "g",
-        __spreadValues({
+        __spreadValues(__spreadProps(__spreadValues({
           transform: transform2,
+          "data-title": noTitle ? null : titleText
+        }, avoidOverlapWith), {
           key: isNotLocation ? "notLocation" : "location--" + annotation.id + "--" + i2
-        }, sharedProps),
-        noTitle ? null : title,
+        }), sharedProps),
         /* @__PURE__ */ React$2.createElement(
           Annotation,
           __spreadValues(__spreadValues(__spreadProps(__spreadValues({}, passAnnotation && { annotation }), {
@@ -164027,6 +163280,964 @@ Part of ${annotation.translationType} Translation from BPs ${annotation.start +
   }
   __name(DrawAnnotationInner, "DrawAnnotationInner");
   const DrawAnnotation = withHover(DrawAnnotationInner);
+  const avoidOverlapWith = {
+    "data-avoid": ".topLevelLabelGroup",
+    "data-avoid-backup": ".veLabel.veAnnotationHovered"
+  };
+  const fontWidthToFontSize = 1.75;
+  const getTextLength = /* @__PURE__ */ __name((text2) => {
+    let len2 = (text2 || "Unlabeled").length;
+    const nonEnInputReg = /[^\x00-\xff]+/g;
+    const nonEnStrings = (text2 || "Unlabeled").match(nonEnInputReg) || [];
+    nonEnStrings.forEach((str) => len2 += str.length * 0.5);
+    return len2;
+  }, "getTextLength");
+  function Labels({
+    labels: labels2 = [],
+    extraSideSpace,
+    smartCircViewLabelRender,
+    radius: outerRadius,
+    editorName,
+    noRedux,
+    rotationRadians,
+    textScalingFactor,
+    labelLineIntensity: labelLineIntensity2,
+    labelSize: labelSize2 = 8,
+    fontHeightMultiplier = 2.4,
+    circularViewWidthVsHeightRatio,
+    //width of the circular view
+    condenseOverflowingXLabels = true
+    //set to true to make labels tha
+  }) {
+    if (!labels2.length) {
+      return {
+        component: null,
+        height: 15
+      };
+    }
+    const originalOuterRadius = outerRadius;
+    outerRadius += smartCircViewLabelRender ? 10 : 25;
+    const radius = outerRadius;
+    const outerPointRadius = outerRadius - 20;
+    const fontWidth = labelSize2 * (textScalingFactor < 1 ? textScalingFactor : 1);
+    const fontHeight = fontWidth * lodashExports.clamp(fontHeightMultiplier, 1.5, 3.5);
+    const labelPoints = labels2.map(function(label) {
+      const {
+        annotationCenterAngle: _annotationCenterAngle,
+        annotationCenterRadius
+      } = label;
+      const annotationCenterAngle = _annotationCenterAngle + (rotationRadians || 0);
+      return __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, label), {
+        width: getTextLength(label.text) * fontWidth,
+        //three points define the label:
+        innerPoint: __spreadProps(__spreadValues({}, polarToSpecialCartesian$1(
+          annotationCenterRadius,
+          annotationCenterAngle
+        )), {
+          radius: annotationCenterRadius,
+          angle: annotationCenterAngle
+        }),
+        truncatedInnerPoint: __spreadProps(__spreadValues({}, polarToSpecialCartesian$1(
+          outerPointRadius - 15,
+          annotationCenterAngle
+        )), {
+          radius: outerPointRadius - 15,
+          angle: annotationCenterAngle
+        }),
+        outerPoint: __spreadProps(__spreadValues({}, polarToSpecialCartesian$1(outerPointRadius, annotationCenterAngle)), {
+          radius: outerPointRadius,
+          angle: annotationCenterAngle
+        })
+      }), polarToSpecialCartesian$1(radius, annotationCenterAngle)), {
+        radius: radius + 10,
+        angle: annotationCenterAngle
+      });
+    }).map(function(label) {
+      label.labelAndSublabels = [label];
+      label.labelIds = { [label.id]: true };
+      return label;
+    });
+    let maxRadius = 1;
+    const groupedLabels = relaxLabelAngles(labelPoints, fontHeight, outerRadius).filter((l2) => !!l2).map((originalLabel) => {
+      if (smartCircViewLabelRender) {
+        const newR = Math.sqrt(
+          Math.pow(
+            Math.abs(originalLabel.x) + Math.max(0, originalLabel.text.length * 11 - extraSideSpace / 2),
+            2
+          ) + Math.pow(Math.abs(originalLabel.y), 2)
+        );
+        if (newR > maxRadius)
+          maxRadius = newR;
+      }
+      if (originalLabel.highPriorityLabel) {
+        return originalLabel;
+      }
+      const _highPrioritySublabel = originalLabel.labelAndSublabels.find(
+        (l2) => l2.highPriorityLabel
+      );
+      if (_highPrioritySublabel) {
+        const highPrioritySublabel = lodashExports.cloneDeep(_highPrioritySublabel);
+        [
+          "angle",
+          "annotationCenterAngle",
+          "annotationCenterRadius",
+          "innerPoint",
+          "labelAndSublabels",
+          "labelIds",
+          "outerPoint",
+          "radius",
+          "truncatedInnerPoint",
+          "x",
+          "y"
+        ].forEach((k2) => {
+          highPrioritySublabel[k2] = originalLabel[k2];
+        });
+        delete originalLabel.labelAndSublabels;
+        return highPrioritySublabel;
+      }
+      return originalLabel;
+    });
+    window.isLabelGroupOpen = false;
+    return {
+      component: /* @__PURE__ */ React$2.createElement(
+        "g",
+        {
+          key: "veLabels",
+          className: "veLabels ve-monospace-font",
+          transform: `rotate(-${rotationRadians * 180 / Math.PI})`
+        },
+        /* @__PURE__ */ React$2.createElement(
+          DrawGroupedLabels,
+          __spreadValues({}, {
+            editorName,
+            noRedux,
+            groupedLabels,
+            circularViewWidthVsHeightRatio,
+            fontWidth,
+            fontHeight,
+            condenseOverflowingXLabels,
+            outerRadius,
+            labelLineIntensity: labelLineIntensity2
+          })
+        )
+      ),
+      //we use the <use> tag to position the hovered label group at the top of the stack
+      //point events: none is to fix a click bug..
+      //http://stackoverflow.com/questions/24078524/svg-click-events-not-firing-bubbling-when-using-use-element
+      height: smartCircViewLabelRender ? Math.min(105, maxRadius - originalOuterRadius) : 120
+    };
+  }
+  __name(Labels, "Labels");
+  const DrawLabelGroup = withHover(function({
+    hovered,
+    className,
+    label,
+    labelAndSublabels,
+    fontWidth,
+    noRedux,
+    fontHeight,
+    outerRadius,
+    onMouseLeave,
+    onMouseOver,
+    editorName,
+    circularViewWidthVsHeightRatio,
+    condenseOverflowingXLabels,
+    hoveredId,
+    labelLineIntensity: labelLineIntensity2,
+    // labelIds,
+    multipleLabels
+    // isIdHashmap,
+  }) {
+    let { text: text2 = "Unlabeled" } = label;
+    const textLength = getTextLength(text2);
+    let groupLabelXStart;
+    if (label.labelAndSublabels && label.labelAndSublabels.length > 1) {
+      text2 = "+" + (label.labelAndSublabels.length - 1) + "," + text2;
+    }
+    const labelLength = textLength * fontWidth;
+    const maxLabelLength = labelAndSublabels.reduce(function(currentLength, { text: text22 = "Unlabeled" }) {
+      const _textLength = getTextLength(text22);
+      if (_textLength > currentLength) {
+        return _textLength;
+      }
+      return currentLength;
+    }, 0);
+    const maxLabelWidth = maxLabelLength * fontWidth;
+    const labelOnLeft = label.angle > Math.PI;
+    let labelXStart = label.x - (labelOnLeft ? labelLength : 0);
+    if (condenseOverflowingXLabels) {
+      const distancePastBoundary = Math.abs(label.x + (labelOnLeft ? -labelLength : labelLength)) - (outerRadius + 90) * Math.max(1, circularViewWidthVsHeightRatio);
+      if (distancePastBoundary > 0) {
+        const numberOfCharsToChop = Math.ceil(distancePastBoundary / fontWidth) + 2;
+        text2 = text2.slice(0, -numberOfCharsToChop) + "..";
+        groupLabelXStart = labelXStart + (labelOnLeft ? distancePastBoundary : -distancePastBoundary);
+        labelXStart += labelOnLeft ? distancePastBoundary : 0;
+      }
+    }
+    const dy = fontHeight;
+    const textYStart = label.y + dy / 2;
+    let content2;
+    const labelClass = ` veLabelText veLabel veCircularViewLabelText clickable ${label.color} `;
+    if ((multipleLabels || groupLabelXStart !== void 0) && hovered) {
+      window.isLabelGroupOpen = true;
+      let hoveredLabel;
+      if (groupLabelXStart !== void 0) {
+        labelXStart = groupLabelXStart;
+      }
+      labelAndSublabels.some(function(label2) {
+        if (label2.id === hoveredId) {
+          hoveredLabel = label2;
+          return true;
+        }
+        return false;
+      });
+      if (!hoveredLabel) {
+        hoveredLabel = label;
+      }
+      let labelYStart = label.y;
+      const labelGroupHeight = labelAndSublabels.length * dy;
+      const labelGroupBottom = label.y + labelGroupHeight;
+      if (labelGroupBottom > outerRadius + 20) {
+        labelYStart -= (label.labelAndSublabels.length - 1) * dy;
+      }
+      const line = LabelLine(
+        [
+          hoveredLabel.innerPoint,
+          // hoveredLabel.labelAndSublabels &&
+          // hoveredLabel.labelAndSublabels.length > 0
+          //   ? hoveredLabel.outerPoint
+          //   : {},
+          label
+        ],
+        { style: { opacity: 1 }, strokeWidth: 2 }
+      );
+      content2 = [
+        line,
+        /* @__PURE__ */ React$2.createElement(PutMyParentOnTop, { editorName, key: "gGroup" }, /* @__PURE__ */ React$2.createElement("g", { className: className + " veLabel topLevelLabelGroup" }, /* @__PURE__ */ React$2.createElement(
+          "rect",
+          {
+            onMouseOver: cancelFn,
+            x: labelXStart - 4,
+            y: labelYStart - dy / 2,
+            width: maxLabelWidth + 24,
+            height: labelGroupHeight + 4,
+            fill: "white",
+            stroke: "black"
+          }
+        ), /* @__PURE__ */ React$2.createElement(
+          "text",
+          {
+            x: labelXStart,
+            y: labelYStart,
+            style: {
+              fontSize: fontWidth * fontWidthToFontSize,
+              fontStyle: label.fontStyle
+            }
+          },
+          labelAndSublabels.map(function(label2, index2) {
+            return /* @__PURE__ */ React$2.createElement(
+              DrawGroupInnerLabel,
+              __spreadValues({
+                isSubLabel: true,
+                noRedux,
+                editorName,
+                logHover: true,
+                key: "labelItem" + index2,
+                className: (label2.className || "") + labelClass + " veDrawGroupInnerLabel",
+                id: label2.id
+              }, { labelXStart, label: label2, fontWidth, index: index2, dy })
+            );
+          })
+        )))
+      ];
+    } else {
+      content2 = [
+        // <title key="labeltitle">{label.title || label.text}</title>,
+        /* @__PURE__ */ React$2.createElement(
+          "text",
+          __spreadProps(__spreadValues({
+            key: "text",
+            "data-title": label.title || label.text
+          }, avoidOverlapWith), {
+            x: labelXStart,
+            textLength: getTextLength(text2) * fontWidth,
+            lengthAdjust: "spacing",
+            className: labelClass + label.className + (hovered ? " veAnnotationHovered" : ""),
+            y: textYStart,
+            style: {
+              fontSize: fontWidth * fontWidthToFontSize,
+              fontStyle: label.fontStyle,
+              fill: label.color || "black"
+              // stroke: label.color ? label.color : "black"
+            }
+          }),
+          text2
+        ),
+        LabelLine(
+          [
+            label.innerPoint,
+            // hovered || label.annotationType === "part" //because parts live on the outside of the sequence, we don't need to show the truncated point, we can just point to them directly
+            //   ? label.innerPoint
+            //   : label.truncatedInnerPoint,
+            label.outerPoint,
+            label
+          ],
+          hovered ? { style: { opacity: 1 }, strokeWidth: 2 } : { style: { opacity: labelLineIntensity2 } }
+        )
+      ];
+    }
+    return /* @__PURE__ */ React$2.createElement(
+      "g",
+      __spreadValues(__spreadValues({}, { onMouseLeave, onMouseOver }), {
+        onClick: label.onClick,
+        onDoubleClick: label.onDoubleClick || lodashExports.noop,
+        onContextMenu: label.onContextMenu || lodashExports.noop
+      }),
+      content2
+    );
+  });
+  function LabelLine(pointArray, options) {
+    let points = "";
+    pointArray.forEach(function({ x: x2, y: y2 }) {
+      if (!x2 && x2 !== 0)
+        return;
+      points += `${x2},${y2} `;
+    });
+    return /* @__PURE__ */ React$2.createElement(React$2.Fragment, { key: "labelLine" }, /* @__PURE__ */ React$2.createElement(
+      "polyline",
+      __spreadValues({}, __spreadValues({
+        key: "polyline-long",
+        points,
+        stroke: "black",
+        fill: "none",
+        strokeWidth: 1,
+        className: "veLabelLine"
+      }, options))
+    ));
+  }
+  __name(LabelLine, "LabelLine");
+  const DrawGroupInnerLabel = withHover(
+    ({ className, labelXStart, label, fontWidth, onMouseOver, index: index2, dy }) => {
+      return /* @__PURE__ */ React$2.createElement(
+        "tspan",
+        __spreadProps(__spreadValues(__spreadProps(__spreadValues({
+          "data-title": label.title
+        }, avoidOverlapWith), {
+          x: labelXStart,
+          textLength: getTextLength(label.text) * fontWidth,
+          lengthAdjust: "spacing",
+          onClick: label.onClick,
+          onDoubleClick: (e2) => {
+            e2.stopPropagation();
+            label.onDoubleClick && label.onDoubleClick(e2);
+          },
+          onContextMenu: label.onContextMenu,
+          dy: index2 === 0 ? dy / 2 : dy,
+          style: {
+            fill: label.color ? label.color : "black",
+            fontStyle: label.fontStyle
+          }
+        }), { onMouseOver }), {
+          className
+        }),
+        label.text
+      );
+    }
+  );
+  const DrawGroupedLabels = /* @__PURE__ */ __name(function DrawGroupedLabelsInner({
+    groupedLabels,
+    circularViewWidthVsHeightRatio,
+    fontWidth,
+    noRedux,
+    fontHeight,
+    condenseOverflowingXLabels,
+    outerRadius,
+    editorName,
+    labelLineIntensity: labelLineIntensity2
+  }) {
+    return groupedLabels.map(function(label, i2) {
+      const { labelAndSublabels, labelIds } = label;
+      const multipleLabels = labelAndSublabels.length > 1;
+      return /* @__PURE__ */ React$2.createElement(
+        DrawLabelGroup,
+        __spreadValues({
+          key: i2,
+          id: labelIds
+        }, {
+          label,
+          noRedux,
+          passHoveredId: true,
+          //needed to get the hoveredId
+          isLabelGroup: true,
+          className: "DrawLabelGroup",
+          multipleLabels,
+          labelAndSublabels,
+          labelIds,
+          circularViewWidthVsHeightRatio,
+          fontWidth,
+          editorName,
+          fontHeight,
+          condenseOverflowingXLabels,
+          outerRadius,
+          labelLineIntensity: labelLineIntensity2
+        })
+      );
+    });
+  }, "DrawGroupedLabelsInner");
+  function cancelFn(e2) {
+    e2.stopPropagation();
+  }
+  __name(cancelFn, "cancelFn");
+  const _PutMyParentOnTop = class _PutMyParentOnTop extends React$2.Component {
+    componentDidMount() {
+      const { editorName } = this.props;
+      try {
+        const el2 = document.querySelector(
+          `.veEditor.${editorName} .topLevelLabelGroup`
+        );
+        const parent2 = el2.parentElement.parentElement;
+        const i2 = Array.prototype.indexOf.call(parent2.children, el2.parentElement);
+        parent2.insertBefore(parent2.children[i2], null);
+      } catch (error) {
+        console.warn(
+          "OVE-975239 - hit an error trying to re-order labels:",
+          error
+        );
+      }
+    }
+    render() {
+      return this.props.children;
+    }
+  };
+  __name(_PutMyParentOnTop, "PutMyParentOnTop");
+  let PutMyParentOnTop = _PutMyParentOnTop;
+  var baseGetTag = _baseGetTag, isObjectLike = isObjectLike_1;
+  var numberTag = "[object Number]";
+  function isNumber(value) {
+    return typeof value == "number" || isObjectLike(value) && baseGetTag(value) == numberTag;
+  }
+  __name(isNumber, "isNumber");
+  var isNumber_1 = isNumber;
+  const isNumber$1 = /* @__PURE__ */ getDefaultExportFromCjs(isNumber_1);
+  function Caret({
+    caretPosition: caretPosition2,
+    sequenceLength,
+    className,
+    onClick,
+    isSelection,
+    innerRadius,
+    outerRadius,
+    isProtein: isProtein2,
+    selectionMessage
+  }) {
+    const { startAngle, endAngle } = getRangeAngles(
+      { start: caretPosition2, end: caretPosition2 },
+      sequenceLength || 1
+    );
+    if (!isNumber$1(startAngle)) {
+      console.error("we've got a problem!");
+    }
+    const { transform: transform2 } = PositionAnnotationOnCircle({
+      sAngle: startAngle,
+      eAngle: endAngle,
+      height: 0
+    });
+    return /* @__PURE__ */ React$2.createElement(
+      "g",
+      {
+        onClick,
+        transform: transform2,
+        className: className + " veCaret " + draggableClassnames.caret
+      },
+      /* @__PURE__ */ React$2.createElement("title", null, selectionMessage || getSelectionMessage({ caretPosition: caretPosition2, isProtein: isProtein2, sequenceLength })),
+      /* @__PURE__ */ React$2.createElement(
+        "line",
+        {
+          strokeWidth: "1.5px",
+          x1: 0,
+          y1: -innerRadius,
+          x2: 0,
+          y2: -outerRadius
+        }
+      ),
+      isSelection ? /* @__PURE__ */ React$2.createElement(
+        "polygon",
+        {
+          className: "vePolygonCaretHandle",
+          fill: "black",
+          points: `0,${-outerRadius + 2} 5,${-outerRadius - 10} -5,${-outerRadius - 10}`
+        }
+      ) : null
+    );
+  }
+  __name(Caret, "Caret");
+  const Caret$1 = pure(Caret);
+  var sector$1 = { exports: {} };
+  var ops = {};
+  (function(exports3) {
+    Object.defineProperty(exports3, "__esModule", {
+      value: true
+    });
+    var _slicedToArray2 = function() {
+      function sliceIterator(arr, i2) {
+        var _arr = [];
+        var _n = true;
+        var _d2 = false;
+        var _e = void 0;
+        try {
+          for (var _i = arr[Symbol.iterator](), _s2; !(_n = (_s2 = _i.next()).done); _n = true) {
+            _arr.push(_s2.value);
+            if (i2 && _arr.length === i2)
+              break;
+          }
+        } catch (err2) {
+          _d2 = true;
+          _e = err2;
+        } finally {
+          try {
+            if (!_n && _i["return"])
+              _i["return"]();
+          } finally {
+            if (_d2)
+              throw _e;
+          }
+        }
+        return _arr;
+      }
+      __name(sliceIterator, "sliceIterator");
+      return function(arr, i2) {
+        if (Array.isArray(arr)) {
+          return arr;
+        } else if (Symbol.iterator in Object(arr)) {
+          return sliceIterator(arr, i2);
+        } else {
+          throw new TypeError("Invalid attempt to destructure non-iterable instance");
+        }
+      };
+    }();
+    var sum2 = /* @__PURE__ */ __name(function sum3(xs) {
+      return xs.reduce(function(a2, b3) {
+        return a2 + b3;
+      }, 0);
+    }, "sum");
+    var min2 = /* @__PURE__ */ __name(function min3(xs) {
+      return xs.reduce(function(a2, b3) {
+        return Math.min(a2, b3);
+      });
+    }, "min");
+    var max2 = /* @__PURE__ */ __name(function max3(xs) {
+      return xs.reduce(function(a2, b3) {
+        return Math.max(a2, b3);
+      });
+    }, "max");
+    var sumBy = /* @__PURE__ */ __name(function sumBy2(xs, f2) {
+      return xs.reduce(function(a2, b3) {
+        return a2 + f2(b3);
+      }, 0);
+    }, "sumBy");
+    var minBy = /* @__PURE__ */ __name(function minBy2(xs, f2) {
+      return xs.reduce(function(a2, b3) {
+        return Math.min(a2, f2(b3));
+      }, Infinity);
+    }, "minBy");
+    var maxBy = /* @__PURE__ */ __name(function maxBy2(xs, f2) {
+      return xs.reduce(function(a2, b3) {
+        return Math.max(a2, f2(b3));
+      }, -Infinity);
+    }, "maxBy");
+    var plus = /* @__PURE__ */ __name(function plus2(_ref, _ref3) {
+      var _ref2 = _slicedToArray2(_ref, 2);
+      var a2 = _ref2[0];
+      var b3 = _ref2[1];
+      var _ref32 = _slicedToArray2(_ref3, 2);
+      var c2 = _ref32[0];
+      var d2 = _ref32[1];
+      return [a2 + c2, b3 + d2];
+    }, "plus");
+    var minus = /* @__PURE__ */ __name(function minus2(_ref4, _ref5) {
+      var _ref42 = _slicedToArray2(_ref4, 2);
+      var a2 = _ref42[0];
+      var b3 = _ref42[1];
+      var _ref52 = _slicedToArray2(_ref5, 2);
+      var c2 = _ref52[0];
+      var d2 = _ref52[1];
+      return [a2 - c2, b3 - d2];
+    }, "minus");
+    var times = /* @__PURE__ */ __name(function times2(k2, _ref6) {
+      var _ref62 = _slicedToArray2(_ref6, 2);
+      var a2 = _ref62[0];
+      var b3 = _ref62[1];
+      return [k2 * a2, k2 * b3];
+    }, "times");
+    var length = /* @__PURE__ */ __name(function length2(_ref7) {
+      var _ref72 = _slicedToArray2(_ref7, 2);
+      var a2 = _ref72[0];
+      var b3 = _ref72[1];
+      return Math.sqrt(a2 * a2 + b3 * b3);
+    }, "length");
+    var sumVectors = /* @__PURE__ */ __name(function sumVectors2(xs) {
+      return xs.reduce(plus, [0, 0]);
+    }, "sumVectors");
+    var average = /* @__PURE__ */ __name(function average2(points) {
+      return times(1 / points.length, points.reduce(plus));
+    }, "average");
+    var onCircle = /* @__PURE__ */ __name(function onCircle2(r2, angle2) {
+      return times(r2, [Math.sin(angle2), -Math.cos(angle2)]);
+    }, "onCircle");
+    var enhance = /* @__PURE__ */ __name(function enhance2(compute, curve) {
+      var obj = compute || {};
+      for (var key2 in obj) {
+        var method = obj[key2];
+        curve[key2] = method(curve.index, curve.item, curve.group);
+      }
+      return curve;
+    }, "enhance");
+    var range2 = /* @__PURE__ */ __name(function range3(a2, b3, inclusive) {
+      var result = [];
+      for (var i2 = a2; i2 < b3; i2++) {
+        result.push(i2);
+      }
+      if (inclusive) {
+        result.push(b3);
+      }
+      return result;
+    }, "range");
+    var mapObject = /* @__PURE__ */ __name(function mapObject2(obj, f2) {
+      var result = [];
+      var _iteratorNormalCompletion = true;
+      var _didIteratorError = false;
+      var _iteratorError = void 0;
+      try {
+        for (var _iterator3 = Object.keys(obj)[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator3.next()).done); _iteratorNormalCompletion = true) {
+          var k2 = _step.value;
+          var v2 = obj[k2];
+          result.push(f2(k2, v2));
+        }
+      } catch (err2) {
+        _didIteratorError = true;
+        _iteratorError = err2;
+      } finally {
+        try {
+          if (!_iteratorNormalCompletion && _iterator3["return"]) {
+            _iterator3["return"]();
+          }
+        } finally {
+          if (_didIteratorError) {
+            throw _iteratorError;
+          }
+        }
+      }
+      return result;
+    }, "mapObject");
+    var pairs = /* @__PURE__ */ __name(function pairs2(obj) {
+      return mapObject(obj, function(k2, v2) {
+        return [k2, v2];
+      });
+    }, "pairs");
+    var id2 = /* @__PURE__ */ __name(function id3(x2) {
+      return x2;
+    }, "id");
+    exports3.sum = sum2;
+    exports3.min = min2;
+    exports3.max = max2;
+    exports3.sumBy = sumBy;
+    exports3.minBy = minBy;
+    exports3.maxBy = maxBy;
+    exports3.plus = plus;
+    exports3.minus = minus;
+    exports3.times = times;
+    exports3.id = id2;
+    exports3.length = length;
+    exports3.sumVectors = sumVectors;
+    exports3.average = average;
+    exports3.onCircle = onCircle;
+    exports3.enhance = enhance;
+    exports3.range = range2;
+    exports3.mapObject = mapObject;
+    exports3.pairs = pairs;
+    exports3["default"] = {
+      sum: sum2,
+      min: min2,
+      max: max2,
+      sumBy,
+      minBy,
+      maxBy,
+      plus,
+      minus,
+      times,
+      id: id2,
+      length,
+      sumVectors,
+      average,
+      onCircle,
+      enhance,
+      range: range2,
+      mapObject,
+      pairs
+    };
+  })(ops);
+  (function(module2, exports3) {
+    Object.defineProperty(exports3, "__esModule", {
+      value: true
+    });
+    function _interopRequireDefault2(obj) {
+      return obj && obj.__esModule ? obj : { "default": obj };
+    }
+    __name(_interopRequireDefault2, "_interopRequireDefault");
+    function _toConsumableArray2(arr) {
+      if (Array.isArray(arr)) {
+        for (var i2 = 0, arr2 = Array(arr.length); i2 < arr.length; i2++)
+          arr2[i2] = arr[i2];
+        return arr2;
+      } else {
+        return Array.from(arr);
+      }
+    }
+    __name(_toConsumableArray2, "_toConsumableArray");
+    var _path = pathExports;
+    var _path2 = _interopRequireDefault2(_path);
+    var _ops = ops;
+    exports3["default"] = function(_ref) {
+      var _Path$moveto$arc$lineto, _Path$moveto$arc, _Path$moveto, _Path;
+      var center = _ref.center;
+      var r2 = _ref.r;
+      var R2 = _ref.R;
+      var start2 = _ref.start;
+      var end2 = _ref.end;
+      var epsilon = 1e-4;
+      if (Math.abs(end2 - 2 * Math.PI) < epsilon) {
+        end2 = 2 * Math.PI - epsilon;
+      }
+      var a2 = (0, _ops.plus)(center, (0, _ops.onCircle)(R2, start2));
+      var b3 = (0, _ops.plus)(center, (0, _ops.onCircle)(R2, end2));
+      var c2 = (0, _ops.plus)(center, (0, _ops.onCircle)(r2, end2));
+      var d2 = (0, _ops.plus)(center, (0, _ops.onCircle)(r2, start2));
+      var large = end2 - start2 > Math.PI ? 1 : 0;
+      var path2 = (_Path$moveto$arc$lineto = (_Path$moveto$arc = (_Path$moveto = (_Path = (0, _path2["default"])()).moveto.apply(_Path, _toConsumableArray2(a2))).arc.apply(_Path$moveto, [R2, R2, 0, large, 1].concat(_toConsumableArray2(b3)))).lineto.apply(_Path$moveto$arc, _toConsumableArray2(c2))).arc.apply(_Path$moveto$arc$lineto, [r2, r2, 0, large, 0].concat(_toConsumableArray2(d2))).closepath();
+      var midAngle = (start2 + end2) / 2;
+      var midRadius = (r2 + R2) / 2;
+      var centroid = (0, _ops.plus)(center, (0, _ops.onCircle)(midRadius, midAngle));
+      return {
+        path: path2,
+        centroid
+      };
+    };
+    module2.exports = exports3["default"];
+  })(sector$1, sector$1.exports);
+  var sectorExports = sector$1.exports;
+  const sector = /* @__PURE__ */ getDefaultExportFromCjs(sectorExports);
+  function SelectionLayer({
+    isDraggable,
+    selectionLayer: selectionLayer2,
+    sequenceLength,
+    radius,
+    hideTitle,
+    innerRadius,
+    onRightClicked,
+    onClick,
+    index: index2,
+    isProtein: isProtein2
+  }) {
+    const {
+      color: color2,
+      start: start2,
+      end: end2,
+      hideCarets = false,
+      style: style2,
+      className
+    } = selectionLayer2;
+    const { startAngle, endAngle, totalAngle } = getRangeAnglesSpecial(
+      selectionLayer2,
+      sequenceLength
+    );
+    const section = sector({
+      center: [0, 0],
+      //the center is always 0,0 for our annotations :) we rotate later!
+      r: innerRadius,
+      R: radius,
+      start: 0,
+      end: totalAngle
+    });
+    const selectionMessage = getSelectionMessage({
+      sequenceLength,
+      selectionLayer: selectionLayer2,
+      isProtein: isProtein2
+    });
+    const { transform: transform2 } = PositionAnnotationOnCircle({
+      sAngle: startAngle,
+      eAngle: endAngle,
+      height: 0
+    });
+    return /* @__PURE__ */ React$2.createElement(
+      "g",
+      {
+        onContextMenu: (event) => {
+          onRightClicked && onRightClicked({
+            annotation: selectionLayer2,
+            event
+          });
+        },
+        onClick: onClick ? (event) => {
+          onClick({
+            annotation: selectionLayer2,
+            event
+          });
+        } : void 0,
+        key: "veSelectionLayer" + index2,
+        className: "veSelectionLayer " + (className || "")
+      },
+      !hideTitle && /* @__PURE__ */ React$2.createElement("title", null, selectionMessage),
+      /* @__PURE__ */ React$2.createElement(
+        "path",
+        {
+          transform: transform2,
+          className: "selectionLayer",
+          style: __spreadValues({ opacity: 0.3 }, style2),
+          d: section.path.print(),
+          fill: color2
+        }
+      ),
+      !hideCarets && /* @__PURE__ */ React$2.createElement(
+        Caret$1,
+        {
+          key: "caret1",
+          className: className + " selectionLayerCaret " + (isDraggable ? draggableClassnames.selectionStart : ""),
+          isSelection: true,
+          onClick: onClick ? noop$4 : preventDefaultStopPropagation,
+          selectionMessage,
+          caretPosition: start2,
+          sequenceLength,
+          innerRadius,
+          outerRadius: radius
+        }
+      ),
+      !hideCarets && /* @__PURE__ */ React$2.createElement(
+        Caret$1,
+        {
+          key: "caret2",
+          className: className + " selectionLayerCaret " + (isDraggable ? draggableClassnames.selectionEnd : ""),
+          isSelection: true,
+          onClick: onClick ? noop$4 : preventDefaultStopPropagation,
+          selectionMessage,
+          caretPosition: end2 + 1,
+          sequenceLength,
+          innerRadius,
+          outerRadius: radius
+        }
+      )
+    );
+  }
+  __name(SelectionLayer, "SelectionLayer");
+  const SelectionLayer$1 = pure(SelectionLayer);
+  function Axis({
+    radius,
+    showAxisNumbers,
+    tickMarkHeight = 5,
+    textOffset = 15,
+    ringThickness = 4,
+    zoomLevel
+  }) {
+    const height2 = (ringThickness + (showAxisNumbers ? textOffset + tickMarkHeight : 0)) / zoomLevel;
+    const radiusToUse = showAxisNumbers ? radius + textOffset + tickMarkHeight : radius;
+    const component = /* @__PURE__ */ React$2.createElement("g", { key: "veAxis", className: "veAxis" }, /* @__PURE__ */ React$2.createElement(
+      "circle",
+      {
+        className: "veAxisLine veAxisOuter",
+        key: "circleOuter",
+        r: radiusToUse + ringThickness,
+        style: { fill: "#ffffff00", stroke: "black", strokeWidth: 0.5 }
+      }
+    ), /* @__PURE__ */ React$2.createElement(
+      "circle",
+      {
+        className: "veAxisLine veAxisInner",
+        key: "circle",
+        r: radiusToUse,
+        style: { fill: "#ffffff00", stroke: "black", strokeWidth: 0.5 }
+      }
+    ));
+    return {
+      component,
+      height: height2
+    };
+  }
+  __name(Axis, "Axis");
+  function CircularPrimer$1({
+    color: color2 = "orange",
+    radius,
+    annotationHeight,
+    totalAngle
+  }) {
+    return /* @__PURE__ */ React$2.createElement(
+      "path",
+      {
+        className: "veOrf",
+        strokeWidth: ".5",
+        stroke: color2,
+        fill: color2,
+        d: drawDirectedPiePiece({
+          radius,
+          annotationHeight,
+          totalAngle,
+          arrowheadLength: 0.4,
+          tailThickness: 0.4
+        }).print()
+      }
+    );
+  }
+  __name(CircularPrimer$1, "CircularPrimer$1");
+  function CircularPrimer(props) {
+    const {
+      color: color2 = "orange",
+      radius,
+      arrowheadLength = 0.5,
+      annotationHeight,
+      totalAngle,
+      id: id2,
+      labelNeedsFlip,
+      ellipsizedName
+    } = props;
+    const [path2, textPath] = drawDirectedPiePiece({
+      radius,
+      annotationHeight,
+      totalAngle,
+      arrowheadLength,
+      tailThickness: 1,
+      //feature specific
+      returnTextPath: true,
+      hasLabel: ellipsizedName,
+      labelNeedsFlip
+    });
+    return /* @__PURE__ */ React$2.createElement(React$2.Fragment, null, getStripedPattern({ color: color2 }), /* @__PURE__ */ React$2.createElement(
+      "path",
+      {
+        className: "vePrimer veCircularViewPrimer",
+        id: id2,
+        strokeWidth: ".5",
+        stroke: "black",
+        fill: "url(#diagonalHatch)",
+        d: path2.print()
+      }
+    ), getInternalLabel(__spreadProps(__spreadValues({}, props), { colorToUse: color2, textPath })));
+  }
+  __name(CircularPrimer, "CircularPrimer");
+  function Cutsite({
+    annotationHeight,
+    radius
+    // totalAngle,
+    // ...rest
+  }) {
+    return /* @__PURE__ */ React$2.createElement(
+      "rect",
+      {
+        className: "veCutsite",
+        width: 1,
+        y: -radius - 4,
+        height: annotationHeight
+      }
+    );
+  }
+  __name(Cutsite, "Cutsite");
   const style$e = "";
   function c(u2, e2, c2) {
     var i2 = this, a2 = reactExports.useRef(null), o2 = reactExports.useRef(0), f2 = reactExports.useRef(null), l2 = reactExports.useRef([]), m2 = reactExports.useRef(), v2 = reactExports.useRef(), d2 = reactExports.useRef(u2), p2 = reactExports.useRef(true);
@@ -170546,7 +170757,7 @@ ${seqDataToCopy}\r
                   scrollbarWidth: "none",
                   whiteSpace: "nowrap"
                 },
-                title: name2,
+                "data-title": name2,
                 key: i2
               },
               /* @__PURE__ */ React$2.createElement(
@@ -171346,7 +171557,7 @@ ${seqDataToCopy}\r
                     textOverflow: "ellipsis",
                     whiteSpace: "nowrap"
                   },
-                  title: this.props.alignmentType || "Unknown Alignment Type"
+                  "data-title": this.props.alignmentType || "Unknown Alignment Type"
                 },
                 this.props.alignmentType || "Unknown Alignment Type"
               )),