@weng-lab/genomebrowser 1.8.5-beta.4 → 1.8.6

package/dist/genomebrowser.es.js

@@ -326,7 +326,7 @@ function fc(e, t = uc) {
 const Ci = (e) => {
   const t = lc(e), n = (r) => fc(t, r);
   return Object.assign(n, t), n;
-}, It = ((e) => e ? Ci(e) : Ci), sh = Ko;
+}, It = ((e) => e ? Ci(e) : Ci), ch = Ko;
 function dc(e) {
   return ce(() => Ko(), e ?? []);
 }
@@ -444,7 +444,7 @@ function Je(e) {
 }
 var me = /* @__PURE__ */ ((e) => (e.BigWig = "bigwig", e.BigBed = "bigbed", e.Transcript = "transcript", e.Motif = "motif", e.Importance = "importance", e.LDTrack = "ldtrack", e.BulkBed = "bulkbed", e.MethylC = "methylc", e.Manhattan = "manhattan", e.Custom = "custom", e))(me || {}), Fe = /* @__PURE__ */ ((e) => (e.Full = "full", e.Dense = "dense", e.Squish = "squish", e.Pack = "pack", e.Combined = "combined", e.Split = "split", e.Scatter = "scatter", e.LDBlock = "ldblock", e.GenericLD = "genericld", e))(Fe || {});
 const gc = /* @__PURE__ */ new Set(["chr", "start", "end", "rest"]);
-function ch(e) {
+function lh(e) {
   return rs(e), e;
 }
 function mc(e) {
@@ -5263,7 +5263,7 @@ lr`
     }
   }
 `;
-async function gh(e, t, n) {
+async function mh(e, t, n) {
   return await Mt(e, t.expandedDomain, t.preRenderedWidth, n);
 }
 async function jl(e) {
@@ -5702,7 +5702,7 @@ function Ts({
     })
   ] });
 }
-const Ql = 0, lo = 255, mh = [
+const Ql = 0, lo = 255, vh = [
   "#fd7f6f",
   "#7eb0d5",
   "#b2e061",
@@ -5712,7 +5712,7 @@ const Ql = 0, lo = 255, mh = [
   "#beb9db",
   "#fdcce5",
   "#8bd3c7"
-], vh = [
+], xh = [
   "#e60049",
   "#0bb4ff",
   "#50e991",
@@ -5823,6 +5823,14 @@ function ru({ id: e, data: t, color: n, height: r, dimensions: i, tooltip: a })
     )
   ] });
 }
+function hi() {
+  const [e, t] = be(1), n = fe((r) => r.svgRef);
+  return Ee(() => {
+    if (!n || !n.current) return;
+    const r = n.current.getBoundingClientRect();
+    t(r.width / n.current.viewBox.baseVal.width);
+  }, [n]), e;
+}
 var rr = { exports: {} }, $n = {}, mr = { exports: {} }, vr = { exports: {} }, we = {};
 /** @license React v16.13.1
  * react-is.production.min.js
@@ -6046,7 +6054,7 @@ function au() {
   }, zn;
 }
 var Fn, go;
-function hi() {
+function pi() {
   if (go) return Fn;
   go = 1;
   var e = "SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED";
@@ -6063,7 +6071,7 @@ function ou() {
   var e = function() {
   };
   if (process.env.NODE_ENV !== "production") {
-    var t = /* @__PURE__ */ hi(), n = {}, r = /* @__PURE__ */ Rs();
+    var t = /* @__PURE__ */ pi(), n = {}, r = /* @__PURE__ */ Rs();
     e = function(a) {
       var o = "Warning: " + a;
       typeof console < "u" && console.error(o);
@@ -6109,7 +6117,7 @@ var Wn, xo;
 function su() {
   if (xo) return Wn;
   xo = 1;
-  var e = Cs(), t = au(), n = /* @__PURE__ */ hi(), r = /* @__PURE__ */ Rs(), i = /* @__PURE__ */ ou(), a = function() {
+  var e = Cs(), t = au(), n = /* @__PURE__ */ pi(), r = /* @__PURE__ */ Rs(), i = /* @__PURE__ */ ou(), a = function() {
   };
   process.env.NODE_ENV !== "production" && (a = function(s) {
     var c = "Warning: " + s;
@@ -6430,7 +6438,7 @@ var Yn, yo;
 function cu() {
   if (yo) return Yn;
   yo = 1;
-  var e = /* @__PURE__ */ hi();
+  var e = /* @__PURE__ */ pi();
   function t() {
   }
   function n() {
@@ -6560,7 +6568,7 @@ function uu() {
   return _t.default = t(), _t;
 }
 var ko;
-function pi() {
+function gi() {
   if (ko) return je;
   ko = 1, Object.defineProperty(je, "__esModule", {
     value: !0
@@ -6706,7 +6714,7 @@ function js() {
   Eo = 1, Object.defineProperty(ct, "__esModule", {
     value: !0
   }), ct.canDragX = i, ct.canDragY = a, ct.createCoreData = s, ct.createDraggableData = c, ct.getBoundPosition = n, ct.getControlPosition = o, ct.snapToGrid = r;
-  var e = Lr(), t = pi();
+  var e = Lr(), t = gi();
   function n(h, b, v) {
     if (!h.props.bounds) return [b, v];
     let {
@@ -6811,7 +6819,7 @@ function fu() {
   To = 1, Object.defineProperty(nr, "__esModule", {
     value: !0
   }), nr.default = void 0;
-  var e = c(Te), t = s(/* @__PURE__ */ Ds()), n = s(Vo), r = pi(), i = js(), a = Lr(), o = s(Ms());
+  var e = c(Te), t = s(/* @__PURE__ */ Ds()), n = s(Vo), r = gi(), i = js(), a = Lr(), o = s(Ms());
   function s(D) {
     return D && D.__esModule ? D : { default: D };
   }
@@ -7117,7 +7125,7 @@ function du() {
         return c.default;
       }
     }), e.default = void 0;
-    var t = h(Te), n = p(/* @__PURE__ */ Ds()), r = p(Vo), i = lu(), a = pi(), o = js(), s = Lr(), c = p(fu()), u = p(Ms());
+    var t = h(Te), n = p(/* @__PURE__ */ Ds()), r = p(Vo), i = lu(), a = gi(), o = js(), s = Lr(), c = p(fu()), u = p(Ms());
     function p(E) {
       return E && E.__esModule ? E : { default: E };
     }
@@ -7431,17 +7439,9 @@ function hu() {
   return rr.exports = e, rr.exports.default = e, rr.exports.DraggableCore = t, rr.exports;
 }
 var pu = hu();
-const Tr = /* @__PURE__ */ Xo(pu);
-function gi() {
-  const [e, t] = be(1), n = fe((r) => r.svgRef);
-  return Ee(() => {
-    if (!n || !n.current) return;
-    const r = n.current.getBoundingClientRect();
-    t(r.width / n.current.viewBox.baseVal.width);
-  }, [n]), e;
-}
+const gu = /* @__PURE__ */ Xo(pu), Tr = gu;
 function Bs({ children: e, id: t }) {
-  const [n, r] = be(!1), [i, a] = be({ x: 0, y: 0 }), o = Ie(null), s = fe((D) => D.delta), c = fe((D) => D.setDelta), u = fe((D) => D.shiftDomain), p = gi();
+  const [n, r] = be(!1), [i, a] = be({ x: 0, y: 0 }), o = Ie(null), s = fe((D) => D.delta), c = fe((D) => D.setDelta), u = fe((D) => D.shiftDomain), p = hi();
   Ee(() => {
     n || a({ x: s, y: 0 });
   }, [s, n]);
@@ -7463,13 +7463,13 @@ function Bs({ children: e, id: t }) {
       position: i,
       axis: "x",
       onStart: k,
-      onDrag: (D, w) => h(D, w),
+      onDrag: h,
       onStop: b,
       children: /* @__PURE__ */ f.jsx("g", { id: `drag-track-${t}`, ref: o, height: "100%", style: { cursor: v }, children: e })
     }
   );
 }
-function gu(e) {
+function mu(e) {
   return /* @__PURE__ */ f.jsx(
     "svg",
     {
@@ -7522,7 +7522,7 @@ function gu(e) {
     }
   );
 }
-function mu(e) {
+function vu(e) {
   return /* @__PURE__ */ f.jsx(
     "svg",
     {
@@ -7547,7 +7547,7 @@ function mu(e) {
     }
   );
 }
-function vu(e) {
+function xu(e) {
   return /* @__PURE__ */ f.jsx(
     "svg",
     {
@@ -7571,7 +7571,7 @@ function vu(e) {
     }
   );
 }
-function xu({
+function yu({
   id: e,
   height: t,
   color: n,
@@ -7623,13 +7623,13 @@ function xu({
         /* @__PURE__ */ f.jsx("rect", { x: 0, y: 0, width: s / 15, height: t, stroke: "#000000", strokeWidth: 0.5, fill: n }),
         /* @__PURE__ */ f.jsxs("g", { id: `margin-buttons-${e}`, children: [
           e !== "ruler" && /* @__PURE__ */ f.jsxs("g", { ref: h, onClick: L, style: { cursor: "pointer" }, children: [
-            /* @__PURE__ */ f.jsx(gu, { x: s / 10, y: t / 2 + 2, height: 15, width: 15, fill: C }),
+            /* @__PURE__ */ f.jsx(mu, { x: s / 10, y: t / 2 + 2, height: 15, width: 15, fill: C }),
             /* @__PURE__ */ f.jsx("circle", { cx: s / 10 + 7.5, cy: t / 2 + 10, r: 7.5, strokeWidth: 0, fill: "transparent" })
           ] }),
           e !== "ruler" && /* @__PURE__ */ f.jsxs("g", { onClick: w ? y : void 0, style: { cursor: "pointer" }, children: [
             /* @__PURE__ */ f.jsx("circle", { cx: s / 10 + 22.5, cy: t / 2 + 10, r: 7.5, strokeWidth: 0, fill: "transparent" }),
             /* @__PURE__ */ f.jsx(
-              mu,
+              vu,
               {
                 x: s / 10 + 15,
                 y: t / 2 + 3,
@@ -7642,7 +7642,7 @@ function xu({
           e !== "ruler" && /* @__PURE__ */ f.jsxs("g", { onClick: E ? d : void 0, style: { cursor: "pointer" }, children: [
             /* @__PURE__ */ f.jsx("circle", { cx: s / 10 + 37.5, cy: t / 2 + 10, r: 7.5, strokeWidth: 0, fill: "transparent" }),
             /* @__PURE__ */ f.jsx(
-              vu,
+              xu,
               {
                 x: s / 10 + 30,
                 y: t / 2 + 2,
@@ -7686,7 +7686,7 @@ function Do({
   ] });
 }
 const De = 80;
-function yu() {
+function _u() {
   const e = fe((h) => h.getTrackDimensions), { sideWidth: t, totalWidth: n } = e(), r = fe((h) => h.getExpandedDomain), i = fe((h) => h.getDomain), [a, o] = be(r()), s = nt((h) => h.isFetching), { x: c } = lt(n);
   Ee(() => {
     s || o(r());
@@ -7779,24 +7779,24 @@ function yu() {
           fontSize: De / 6 + "px",
           textAnchor: "end",
           fill: u,
-          children: _u(w.end - w.start)
+          children: bu(w.end - w.start)
         }
       ),
       E
     ] });
   }, [a, i, c, n, t, u]);
 }
-function _u(e) {
+function bu(e) {
   return e >= 1e9 ? Math.round(e / 1e9) + " Gb" : e >= 1e6 ? Math.round(e / 1e6) + " Mb" : e >= 1e3 ? Math.round(e / 1e3) + " kb" : e + " bp";
 }
-function bu({
+function wu({
   id: e,
   children: t,
   setSwapping: n,
   height: r,
   width: i
 }) {
-  const [a, o] = be({ x: 0, y: 0 }), [s, c] = be(!1), [u, p] = be(0), h = Ie(null), b = gi(), v = fe((m) => m.marginWidth), k = xe((m) => m.shiftTracks), D = xe((m) => m.getTrackIndex), w = ws(e), E = Ul(e), L = (m, _) => {
+  const [a, o] = be({ x: 0, y: 0 }), [s, c] = be(!1), [u, p] = be(0), h = Ie(null), b = hi(), v = fe((m) => m.marginWidth), k = xe((m) => m.shiftTracks), D = xe((m) => m.getTrackIndex), w = ws(e), E = Ul(e), L = (m, _) => {
     m.preventDefault(), c(!0), n(!0), o({ x: 0, y: _.y }), p(_.y);
   }, y = () => {
     if (o({ x: 0, y: 0 }), c(!1), n(!1), Math.abs(u) <= 5) return;
@@ -7815,18 +7815,18 @@ function bu({
       onStart: d,
       onDrag: L,
       onStop: y,
-      children: /* @__PURE__ */ f.jsx("g", { id: `swap-track-${e}`, ref: h, children: s ? /* @__PURE__ */ f.jsx(wu, { height: r, width: i, margin: v, position: w + a.y + De, children: t }) : t })
+      children: /* @__PURE__ */ f.jsx("g", { id: `swap-track-${e}`, ref: h, children: s ? /* @__PURE__ */ f.jsx(Su, { height: r, width: i, margin: v, position: w + a.y + De, children: t }) : t })
     }
   );
 }
-function wu({
+function Su({
   children: e,
   position: t,
   height: n,
   width: r,
   margin: i
 }) {
-  const a = fe((c) => c.svgRef), o = gi(), s = Ie(null);
+  const a = fe((c) => c.svgRef), o = hi(), s = Ie(null);
   return Zo(
     /* @__PURE__ */ f.jsx(
       Tr,
@@ -7843,14 +7843,14 @@ function wu({
     a.current
   );
 }
-const Su = `M20.201,5.169c-8.254,0-14.946,6.692-14.946,14.946c0,8.255,6.692,14.946,14.946,14.946
+const ku = `M20.201,5.169c-8.254,0-14.946,6.692-14.946,14.946c0,8.255,6.692,14.946,14.946,14.946
 s14.946-6.691,14.946-14.946C35.146,11.861,28.455,5.169,20.201,5.169z M20.201,31.749c-6.425,0-11.634-5.208-11.634-11.634
-c0-6.425,5.209-11.634,11.634-11.634c6.425,0,11.633,5.209,11.633,11.634C31.834,26.541,26.626,31.749,20.201,31.749z`, ku = `M26.013,10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0
+c0-6.425,5.209-11.634,11.634-11.634c6.425,0,11.633,5.209,11.633,11.634C31.834,26.541,26.626,31.749,20.201,31.749z`, Eu = `M26.013,10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0
 			   C22.32,8.481,24.301,9.057,26.013,10.047z`;
-function Eu({ width: e, height: t, color: n }) {
+function Lu({ width: e, height: t, color: n }) {
   return /* @__PURE__ */ f.jsxs("svg", { width: e, height: t, viewBox: "0 0 40 40", children: [
-    /* @__PURE__ */ f.jsx("path", { opacity: "0.2", fill: n, d: Su }),
-    /* @__PURE__ */ f.jsx("path", { fill: n, d: ku, children: /* @__PURE__ */ f.jsx(
+    /* @__PURE__ */ f.jsx("path", { opacity: "0.2", fill: n, d: ku }),
+    /* @__PURE__ */ f.jsx("path", { fill: n, d: Eu, children: /* @__PURE__ */ f.jsx(
       "animateTransform",
       {
         attributeType: "xml",
@@ -7864,21 +7864,21 @@ function Eu({ width: e, height: t, color: n }) {
     ) })
   ] });
 }
-const Lu = `M446.324,367.381L262.857,41.692c-15.644-28.444-58.311-28.444-73.956,0L5.435,367.381
-c-15.644,28.444,4.267,64,36.978,64h365.511C442.057,429.959,461.968,395.825,446.324,367.381z`, Tu = `M196.013,212.359l11.378,75.378c1.422,8.533,8.533,15.644,18.489,15.644l0,0
+const Tu = `M446.324,367.381L262.857,41.692c-15.644-28.444-58.311-28.444-73.956,0L5.435,367.381
+c-15.644,28.444,4.267,64,36.978,64h365.511C442.057,429.959,461.968,395.825,446.324,367.381z`, Cu = `M196.013,212.359l11.378,75.378c1.422,8.533,8.533,15.644,18.489,15.644l0,0
 c8.533,0,17.067-7.111,18.489-15.644l11.378-75.378c2.844-18.489-11.378-34.133-29.867-34.133l0,0
 C207.39,178.225,194.59,193.87,196.013,212.359z`;
-function Cu({
+function Ru({
   width: e,
   height: t,
   outline: n,
   inside: r
 }) {
   return /* @__PURE__ */ f.jsxs("svg", { width: e, height: t, viewBox: "0 0 451.74 481.74", children: [
-    /* @__PURE__ */ f.jsx("path", { fill: n, d: Lu }),
+    /* @__PURE__ */ f.jsx("path", { fill: n, d: Tu }),
     /* @__PURE__ */ f.jsx("path", { fill: r, d: "M225.879,63.025l183.467,325.689H42.413L225.879,63.025L225.879,63.025z" }),
     /* @__PURE__ */ f.jsxs("g", { children: [
-      /* @__PURE__ */ f.jsx("path", { fill: "#3F4448;", d: Tu }),
+      /* @__PURE__ */ f.jsx("path", { fill: "#3F4448;", d: Cu }),
       /* @__PURE__ */ f.jsx("circle", { fill: "#3F4448", cx: "225.879", cy: "336.092", r: "17.067" })
     ] })
   ] });
@@ -7895,12 +7895,12 @@ function Is({ children: e, transform: t, id: n, loading: r, error: i }) {
   }, []), g = at(() => {
     c(!1);
   }, []);
-  return /* @__PURE__ */ f.jsx("g", { id: `wrapper-${n}`, transform: t, children: /* @__PURE__ */ f.jsxs(bu, { id: n, setSwapping: o, height: E, width: h, children: [
+  return /* @__PURE__ */ f.jsx("g", { id: `wrapper-${n}`, transform: t, children: /* @__PURE__ */ f.jsxs(wu, { id: n, setSwapping: o, height: E, width: h, children: [
     r && !i && /* @__PURE__ */ f.jsx(
       "g",
       {
         transform: `translate(${u + (h - L) / 2},${(E - L) / 2})`,
-        children: /* @__PURE__ */ f.jsx(Eu, { color: d, width: L, height: L })
+        children: /* @__PURE__ */ f.jsx(Lu, { color: d, width: L, height: L })
       }
     ),
     i && /* @__PURE__ */ f.jsxs(
@@ -7908,7 +7908,7 @@ function Is({ children: e, transform: t, id: n, loading: r, error: i }) {
       {
         transform: `translate(${u + (h - L) / 2},${(E - L) / 2})`,
         children: [
-          /* @__PURE__ */ f.jsx(Cu, { outline: d, inside: m, width: L, height: L }),
+          /* @__PURE__ */ f.jsx(Ru, { outline: d, inside: m, width: L, height: L }),
           /* @__PURE__ */ f.jsx("g", { transform: `translate(${L / 2},${L + 10})`, children: /* @__PURE__ */ f.jsx("text", { fill: d, textAnchor: "middle", fontSize: `${D}px`, children: i }) })
         ]
       }
@@ -7937,7 +7937,7 @@ function Is({ children: e, transform: t, id: n, loading: r, error: i }) {
       }
     ),
     /* @__PURE__ */ f.jsx(
-      xu,
+      yu,
       {
         id: n,
         height: E,
@@ -7967,7 +7967,7 @@ function Cr(e, t, n = 12) {
     r(t, { height: i });
   }, [n, t, r, e]), n;
 }
-function Ru({
+function Du({
   id: e,
   data: t,
   height: n,
@@ -8013,15 +8013,15 @@ function Ru({
 function Os(e) {
   return e ? e.includes("MANE_Select") : !1;
 }
-function Du(e, t) {
+function ju(e, t) {
   return e.coordinates.start === t.coordinates.start ? e.coordinates.end - t.coordinates.end : e.coordinates.start - t.coordinates.start;
 }
-function ju(e) {
-  const n = e.transcripts.reduce((i, a) => [...i, ...a.exons || []], []).sort(Du), r = n.length === 0 ? [] : [{ coordinates: { ...n[0].coordinates }, UTRs: n[0].UTRs && [...n[0].UTRs] }];
+function Mu(e) {
+  const n = e.transcripts.reduce((i, a) => [...i, ...a.exons || []], []).sort(ju), r = n.length === 0 ? [] : [{ coordinates: { ...n[0].coordinates }, UTRs: n[0].UTRs && [...n[0].UTRs] }];
   return n.slice(1).forEach((i) => {
     i.coordinates.start < r[r.length - 1].coordinates.end ? (r[r.length - 1].UTRs = [...r[r.length - 1].UTRs || [], ...i.UTRs || []], r[r.length - 1].coordinates.end = Math.max(i.coordinates.end, r[r.length - 1].coordinates.end)) : r.push({ coordinates: { ...i.coordinates }, UTRs: i.UTRs && [...i.UTRs] });
   }), r.forEach((i) => {
-    i.UTRs = Mu(i.UTRs || []);
+    i.UTRs = Bu(i.UTRs || []);
   }), {
     name: e.name || "",
     strand: e.strand,
@@ -8034,7 +8034,7 @@ function ju(e) {
     color: ""
   };
 }
-function Mu(e) {
+function Bu(e) {
   if (e.length === 0) return [];
   const t = [{ coordinates: { ...e[0].coordinates } }];
   return e.slice(1).forEach((n) => {
@@ -8046,9 +8046,9 @@ function Mu(e) {
 }
 function Ps(e, t, n, r) {
   var o;
-  const i = Bu(e, t), a = {
-    exons: ((o = i.exons) == null ? void 0 : o.reduce((s, c) => s + Pu(c, n / 2, n, r), "")) || "",
-    introns: Ou(
+  const i = Iu(e, t), a = {
+    exons: ((o = i.exons) == null ? void 0 : o.reduce((s, c) => s + Au(c, n / 2, n, r), "")) || "",
+    introns: Pu(
       i.coordinates.start,
       i.coordinates.end,
       i.strand,
@@ -8059,7 +8059,7 @@ function Ps(e, t, n, r) {
   };
   return { transcript: i, paths: a };
 }
-function Bu(e, t) {
+function Iu(e, t) {
   var n;
   return {
     strand: e.strand,
@@ -8088,10 +8088,10 @@ function Bu(e, t) {
     })) || []
   };
 }
-function Iu(e) {
+function Ou(e) {
   return e.reduce((t, n) => (n.transcripts.forEach((r) => t.push({ ...r, strand: n.strand })), t), []).sort((t, n) => t.coordinates.start - n.coordinates.start);
 }
-function Ou(e, t, n, r, i, a) {
+function Pu(e, t, n, r, i, a) {
   let o = "";
   if (e = e < 0 ? 0 : e, t = t > a ? a : t, n === "+")
     for (let s = e + 10; s < t - 10; s += 20)
@@ -8101,7 +8101,7 @@ function Ou(e, t, n, r, i, a) {
       o += it(s + i, r - i) + ge(s, r) + ge(s + i, r + i) + ge(s, r) + ge(s + i, r - i);
   return o + " M " + e + " " + r + " L " + t + " " + r;
 }
-function Pu(e, t, n, r) {
+function Au(e, t, n, r) {
   var h, b;
   if (e.coordinates.start > r || e.coordinates.end < 0) return "";
   const i = ((h = e.UTRs) == null ? void 0 : h.filter((v) => v.coordinates.start === e.coordinates.start)) || [], a = ((b = e.UTRs) == null ? void 0 : b.filter((v) => v.coordinates.end === e.coordinates.end)) || [], o = t - n * 0.2, s = t + n * 0.2, c = t - n * 0.3, u = t + n * 0.3;
@@ -8122,7 +8122,7 @@ const As = (e, t) => {
     coordinates: i
   };
 };
-function Au({
+function Nu({
   id: e,
   data: t,
   geneName: n,
@@ -8136,7 +8136,7 @@ function Au({
   onLeave: p,
   tooltip: h
 }) {
-  const { totalWidth: b, sideWidth: v } = i, { x: k, reverseX: D } = lt(b), w = fe((j) => j.domain), E = 10, L = ce(() => (t || []).map((j) => ju(j)), [t]), y = ce(
+  const { totalWidth: b, sideWidth: v } = i, { x: k, reverseX: D } = lt(b), w = fe((j) => j.domain), E = 10, L = ce(() => (t || []).map((j) => Mu(j)), [t]), y = ce(
     () => L.filter(
       (j) => j.coordinates.end >= w.start && j.coordinates.start <= w.end
     ),
@@ -8206,7 +8206,7 @@ function Au({
     ))
   ] });
 }
-function Nu({
+function qu({
   id: e,
   data: t,
   geneName: n,
@@ -8220,7 +8220,7 @@ function Nu({
   onLeave: p,
   tooltip: h
 }) {
-  const { totalWidth: b, sideWidth: v } = i, { x: k, reverseX: D } = lt(b), w = fe((j) => j.domain), E = 10, L = ce(() => Iu(t || []), [t]), y = ce(
+  const { totalWidth: b, sideWidth: v } = i, { x: k, reverseX: D } = lt(b), w = fe((j) => j.domain), E = 10, L = ce(() => Ou(t || []), [t]), y = ce(
     () => L.filter(
       (j) => j.coordinates.end >= w.start && j.coordinates.start <= w.end
     ),
@@ -8290,7 +8290,7 @@ function Nu({
     ))
   ] });
 }
-function qu(e, t, n) {
+function $u(e, t, n) {
   return ce(
     () => e.map((r) => {
       const i = t.slice(r.coordinates[0], r.coordinates[1] + 1).map((s) => s.importance), a = [Math.min(...i), Math.max(...i)], o = n(a[1]);
@@ -8303,36 +8303,36 @@ function qu(e, t, n) {
     [e, n]
   );
 }
-function $u(e, t) {
+function zu(e, t) {
   const n = ce(
-    () => zu(e) ? e.importance.map((o, s) => ({
+    () => Fu(e) ? e.importance.map((o, s) => ({
       base: e.sequence.charAt(s),
       importance: o
     })) : e,
     [e]
-  ), r = ce(() => Uu(n, (o) => o.importance), [n]), i = Fu(r, { start: t, end: 0 }), a = at(Hu(i), [r, t]);
+  ), r = ce(() => Hu(n, (o) => o.importance), [n]), i = Uu(r, { start: t, end: 0 }), a = at(Wu(i), [r, t]);
   return [n, a, i];
 }
-function zu(e) {
+function Fu(e) {
   return e.sequence !== void 0;
 }
-function Fu(e, t) {
+function Uu(e, t) {
   return (n) => t.start + (t.end - t.start) * ((n - e.start) / (e.end - e.start));
 }
-function Uu(e, t) {
+function Hu(e, t) {
   const n = e.map(t), r = Math.min(...n), i = Math.max(...n);
   return {
     start: r > 0 ? 0 : r,
     end: i < 0 ? 0 : i
   };
 }
-function Hu(e) {
+function Wu(e) {
   return (t) => {
     const n = e((t < 0, t)), r = e((t < 0, 0)), i = Math.abs(r - n) / 100;
     return [n * (t < 0 ? -1 : 1), i, t < 0 ? "scale(1,-1)" : ""];
   };
 }
-const Wu = (e) => /* @__PURE__ */ f.jsxs("g", { children: [
+const Yu = (e) => /* @__PURE__ */ f.jsxs("g", { children: [
   /* @__PURE__ */ f.jsx(
     "path",
     {
@@ -8341,7 +8341,7 @@ const Wu = (e) => /* @__PURE__ */ f.jsxs("g", { children: [
     }
   ),
   /* @__PURE__ */ f.jsx("path", { fill: "#ffffff", d: "M 77 70 C 70 90 30 90 22 80 C 10 50 80 60 77 70" })
-] }), Yu = (e) => /* @__PURE__ */ f.jsxs("g", { children: [
+] }), Gu = (e) => /* @__PURE__ */ f.jsxs("g", { children: [
   /* @__PURE__ */ f.jsx(
     "path",
     {
@@ -8350,7 +8350,7 @@ const Wu = (e) => /* @__PURE__ */ f.jsxs("g", { children: [
     }
   ),
   /* @__PURE__ */ f.jsx("path", { d: "M 79 60 C 80 95 20 95 20 65 C 20 30 80 30 79 65", fill: "#ffffff" })
-] }), Gu = (e) => /* @__PURE__ */ f.jsxs("g", { children: [
+] }), Vu = (e) => /* @__PURE__ */ f.jsxs("g", { children: [
   /* @__PURE__ */ f.jsx(
     "path",
     {
@@ -8359,7 +8359,7 @@ const Wu = (e) => /* @__PURE__ */ f.jsxs("g", { children: [
     }
   ),
   /* @__PURE__ */ f.jsx("path", { d: "M 79 60 C 80 95 20 95 20 65 C 20 30 80 30 79 65", fill: "#ffffff" })
-] }), Vu = (e) => /* @__PURE__ */ f.jsxs("g", { children: [
+] }), Zu = (e) => /* @__PURE__ */ f.jsxs("g", { children: [
   /* @__PURE__ */ f.jsx(
     "path",
     {
@@ -8368,13 +8368,13 @@ const Wu = (e) => /* @__PURE__ */ f.jsxs("g", { children: [
     }
   ),
   /* @__PURE__ */ f.jsx("path", { d: "M 33 37 L 68 37 C 58 10 42 10 33 37", fill: "#ffffff" })
-] }), Zu = (e) => /* @__PURE__ */ f.jsx(
+] }), Xu = (e) => /* @__PURE__ */ f.jsx(
   "path",
   {
     d: "M 95 32 C 80 -17 20 -5 20 37 L 7 37 L 7 50 L 20 50 L 20 100 L 45 100 L 45 50 L 57 50 L 57 37 L 45 37 C 45 10 70 10 75 32 L 95 32",
     ...e
   }
-), Xu = (e) => /* @__PURE__ */ f.jsxs("g", { children: [
+), Ku = (e) => /* @__PURE__ */ f.jsxs("g", { children: [
   /* @__PURE__ */ f.jsx(
     "path",
     {
@@ -8383,13 +8383,13 @@ const Wu = (e) => /* @__PURE__ */ f.jsxs("g", { children: [
     }
   ),
   /* @__PURE__ */ f.jsx("path", { d: "M 67 30 C 70 10 25 10 27 30 C 25 50 70 50 67 30", fill: "#ffffff" })
-] }), Ku = (e) => /* @__PURE__ */ f.jsx(
+] }), Ju = (e) => /* @__PURE__ */ f.jsx(
   "path",
   {
     d: "M 0 0 L 0 100 L 20 100 L 20 80 C 20 40 80 40 80 80 L 80 100 L 100 100 L 100 50 C 80 20 20 20 20 45 L 20 0 L 0 0",
     ...e
   }
-), Ju = (e) => /* @__PURE__ */ f.jsxs("g", { children: [
+), Qu = (e) => /* @__PURE__ */ f.jsxs("g", { children: [
   /* @__PURE__ */ f.jsx(
     "rect",
     {
@@ -8410,7 +8410,7 @@ const Wu = (e) => /* @__PURE__ */ f.jsxs("g", { children: [
       height: 15
     }
   )
-] }), Qu = (e) => /* @__PURE__ */ f.jsxs("g", { children: [
+] }), ef = (e) => /* @__PURE__ */ f.jsxs("g", { children: [
   /* @__PURE__ */ f.jsx(
     "path",
     {
@@ -8419,13 +8419,13 @@ const Wu = (e) => /* @__PURE__ */ f.jsxs("g", { children: [
     }
   ),
   /* @__PURE__ */ f.jsx("path", { d: "M 0 60 L 100 20", ...e })
-] }), ef = (e) => /* @__PURE__ */ f.jsx(
+] }), tf = (e) => /* @__PURE__ */ f.jsx(
   "path",
   {
     d: "M 0 0 L 20 0 L 20 60 L 75 30 L 100 30 L 50 65 L 100 100 L 75 100 L 27 80 L 20 85 L 20 100 L 0 100 L 0 0",
     ...e
   }
-), tf = (e) => /* @__PURE__ */ f.jsx(
+), rf = (e) => /* @__PURE__ */ f.jsx(
   "rect",
   {
     x: 40,
@@ -8434,19 +8434,19 @@ const Wu = (e) => /* @__PURE__ */ f.jsxs("g", { children: [
     height: 100,
     ...e
   }
-), rf = (e) => /* @__PURE__ */ f.jsx(
+), nf = (e) => /* @__PURE__ */ f.jsx(
   "path",
   {
     d: "M 0 0 L 0 100 L 20 100 L 20 60 C 20 20 40 20 40 50 L 40 100 L 60 100 L 60 50 C 60 20 80 20 80 50 L 80 100 L 100 100 L 100 50 C 100 -10 40 -10 50 50 C 50 -5 20 -5 20 20 L 20 0 L 0 0",
     ...e
   }
-), nf = (e) => /* @__PURE__ */ f.jsx(
+), af = (e) => /* @__PURE__ */ f.jsx(
   "path",
   {
     d: "M 0 0 L 0 100 L 20 100 L 20 60 C 20 0 80 0 80 50 L 80 100 L 100 100 L 100 25 C 80 -10 20 -10 20 20 L 20 0 L 0 0",
     ...e
   }
-), af = (e) => /* @__PURE__ */ f.jsxs("g", { children: [
+), of = (e) => /* @__PURE__ */ f.jsxs("g", { children: [
   /* @__PURE__ */ f.jsx(
     "path",
     {
@@ -8455,7 +8455,7 @@ const Wu = (e) => /* @__PURE__ */ f.jsxs("g", { children: [
     }
   ),
   /* @__PURE__ */ f.jsx("path", { d: "M 79 40 C 80 5 20 5 20 35 C 20 70 80 70 79 35", fill: "#ffffff" })
-] }), of = (e) => /* @__PURE__ */ f.jsxs("g", { children: [
+] }), sf = (e) => /* @__PURE__ */ f.jsxs("g", { children: [
   /* @__PURE__ */ f.jsx(
     "path",
     {
@@ -8464,19 +8464,19 @@ const Wu = (e) => /* @__PURE__ */ f.jsxs("g", { children: [
     }
   ),
   /* @__PURE__ */ f.jsx("path", { d: "M 79 40 C 80 5 20 5 20 35 C 20 70 80 70 79 35", fill: "#ffffff" })
-] }), sf = (e) => /* @__PURE__ */ f.jsx(
+] }), cf = (e) => /* @__PURE__ */ f.jsx(
   "path",
   {
     d: "M 0 0 L 0 100 L 20 100 L 20 60 C 20 0 80 0 80 50 L 100 50 L 100 25 C 80 -10 20 -10 20 20 L 20 0 L 0 0",
     ...e
   }
-), cf = (e) => /* @__PURE__ */ f.jsx(
+), lf = (e) => /* @__PURE__ */ f.jsx(
   "path",
   {
     d: "M 95 68 C 80 117 20 105 20 63 L 20 47 L 7 47 L 7 27 L 20 27 L 20 0 L 45 0 L 45 27 L 57 27 L 57 47 L 45 47 L 45 63 C 45 90 70 90 75 68 L 95 68",
     ...e
   }
-), lf = (e) => /* @__PURE__ */ f.jsxs("g", { children: [
+), uf = (e) => /* @__PURE__ */ f.jsxs("g", { children: [
   /* @__PURE__ */ f.jsx(
     "path",
     {
@@ -8494,14 +8494,14 @@ const Wu = (e) => /* @__PURE__ */ f.jsxs("g", { children: [
       width: 25
     }
   )
-] }), uf = (e) => /* @__PURE__ */ f.jsx(
+] }), ff = (e) => /* @__PURE__ */ f.jsx(
   "path",
   {
     d: "M 0 0 L 25 0 L 50 36 L 75 0 L 100 0 L 40 100 L 12 100 L 37 55 L 0 0",
     ...e
   }
 );
-function ff(e) {
+function df(e) {
   return /* @__PURE__ */ f.jsx(
     "path",
     {
@@ -8510,43 +8510,43 @@ function ff(e) {
     }
   );
 }
-const df = (e) => /* @__PURE__ */ f.jsx(
+const hf = (e) => /* @__PURE__ */ f.jsx(
   "path",
   {
     ...e,
     d: "M 0 25 C 20 -8 80 -8 100 25 C 100 90 30 50 20 85 L 100 85 L 100 100 L 0 100 L 0 70 C 10 40 75 70 75 25 C 70 10 30 10 25 28 L 0 25"
   }
-), hf = (e) => /* @__PURE__ */ f.jsx(
+), pf = (e) => /* @__PURE__ */ f.jsx(
   "path",
   {
     ...e,
     d: "M 0 35 L 0 25 C 20 -8 80 -8 100 25 C 100 30 100 50 75 50 C 100 50 100 70 100 75 C 80 108 20 108 0 75 L 0 65 L 25 65 L 25 75 C 30 88 70 88 75 75 C 75 68 75 65 47 58 L 47 42 C 75 32 75 35 75 25 C 70 12 30 12 25 25 L 25 35"
   }
-), pf = (e) => /* @__PURE__ */ f.jsx(
+), gf = (e) => /* @__PURE__ */ f.jsx(
   "path",
   {
     ...e,
     d: "M 50 0 L 0 50 L 0 70 L 50 70 L 50 100 L 75 100 L 75 70 L 100 70 L 100 50 L 75 50 L 75 0 L 50 15 L 50 50 L 30 50 L 75 0 L 50 0"
   }
-), gf = (e) => /* @__PURE__ */ f.jsx(
+), mf = (e) => /* @__PURE__ */ f.jsx(
   "path",
   {
     ...e,
     d: "M 95 20 L 100 0 L 10 0 L 0 60 L 25 60 C 30 45 90 50 75 77 C 66 87 30 90 26 72 L 0 80 C 20 110 80 110 100 70 C 100 25 10 25 25 40 L 30 20 L 95 20"
   }
-), mf = (e) => /* @__PURE__ */ f.jsx(
+), vf = (e) => /* @__PURE__ */ f.jsx(
   "path",
   {
     ...e,
     d: "M 50 0 C -40 70 10 100 50 100 C 90 100 100 80 100 55 C 80 30 30 30 35 50 L 30 60 C 80 50 80 85 50 80 C 10 80 48 10 90 0 L 50 0"
   }
-), vf = (e) => /* @__PURE__ */ f.jsx(
+), xf = (e) => /* @__PURE__ */ f.jsx(
   "path",
   {
     ...e,
     d: "M 0 0 L 100 0 L 50 100 L 20 100 L 60 20 L 0 20 L 0 0"
   }
-), xf = (e) => /* @__PURE__ */ f.jsxs("g", { children: [
+), yf = (e) => /* @__PURE__ */ f.jsxs("g", { children: [
   /* @__PURE__ */ f.jsx(
     "path",
     {
@@ -8561,7 +8561,7 @@ const df = (e) => /* @__PURE__ */ f.jsx(
       d: "M 100 35 L 100 25 C 80 -8 20 -8 0 25 C 0 30 0 50 25 50 C 0 50 0 70 0 75 C 20 108 80 108 100 75 L 100 65 L 75 65 L 75 75 C 70 88 30 88 25 75 C 25 68 25 65 53 58 L 53 42 C 25 32 25 35 25 25 C 30 12 70 12 75 25 L 75 35"
     }
   )
-] }), yf = (e) => /* @__PURE__ */ f.jsx(
+] }), _f = (e) => /* @__PURE__ */ f.jsx(
   "path",
   {
     ...e,
@@ -8576,10 +8576,10 @@ const df = (e) => /* @__PURE__ */ f.jsx(
     }
   ),
   /* @__PURE__ */ f.jsx("path", { fill: "#ffffff", d: "M 41 55 L 50 25 L 58 55 L 41 55" })
-] }), _f = `M 0 0 L 80 0 C 105 0 105 50 80 50
+] }), bf = `M 0 0 L 80 0 C 105 0 105 50 80 50
          C 105 50 105 100 80 100 L 00 100
-         L 0 0`, bf = (e) => /* @__PURE__ */ f.jsxs("g", { children: [
-  /* @__PURE__ */ f.jsx("path", { ...e, d: _f }),
+         L 0 0`, wf = (e) => /* @__PURE__ */ f.jsxs("g", { children: [
+  /* @__PURE__ */ f.jsx("path", { ...e, d: bf }),
   /* @__PURE__ */ f.jsx(
     "path",
     {
@@ -8594,31 +8594,31 @@ const df = (e) => /* @__PURE__ */ f.jsx(
       fill: "#ffffff"
     }
   )
-] }), wf = `M 100 28 C 100 -13 0 -13 0 50
+] }), Sf = `M 100 28 C 100 -13 0 -13 0 50
          C 0 113 100 113 100 72 L 75 72
          C 75 90 30 90 30 50 C 30 10 75 10 75 28
-         L 100 28`, br = (e) => /* @__PURE__ */ f.jsx("path", { ...e, d: wf }), Sf = `M 0 0 L 60 0 C 110 0 110 100 60 100
-               L 0 100 L 0 0`, kf = `M 20 15 L 40 15 C 85 15 85 85 40 85
-                    L 20 85 L 20 15`, Ef = (e) => /* @__PURE__ */ f.jsxs("g", { children: [
-  /* @__PURE__ */ f.jsx("path", { ...e, d: Sf }),
-  /* @__PURE__ */ f.jsx("path", { fill: "#ffffff", d: kf })
-] }), Lf = `M 0 0 L 100 0 L 100 20 L 20 20 L 20 40
+         L 100 28`, br = (e) => /* @__PURE__ */ f.jsx("path", { ...e, d: Sf }), kf = `M 0 0 L 60 0 C 110 0 110 100 60 100
+               L 0 100 L 0 0`, Ef = `M 20 15 L 40 15 C 85 15 85 85 40 85
+                    L 20 85 L 20 15`, Lf = (e) => /* @__PURE__ */ f.jsxs("g", { children: [
+  /* @__PURE__ */ f.jsx("path", { ...e, d: kf }),
+  /* @__PURE__ */ f.jsx("path", { fill: "#ffffff", d: Ef })
+] }), Tf = `M 0 0 L 100 0 L 100 20 L 20 20 L 20 40
                L 90 40 L 90 60 L 20 60 L 20 80 L 100 80
-               L 100 100 L 0 100 L 0 0`, Tf = (e) => /* @__PURE__ */ f.jsx("path", { ...e, d: Lf }), Cf = `M 0 0 L 100 0 L 100 20 L 20 20 L 20 40
+               L 100 100 L 0 100 L 0 0`, Cf = (e) => /* @__PURE__ */ f.jsx("path", { ...e, d: Tf }), Rf = `M 0 0 L 100 0 L 100 20 L 20 20 L 20 40
                L 80 40 L 80 60 L 20 60 L 20 100 L 0 100
-               L 0 0`, Rf = (e) => /* @__PURE__ */ f.jsx("path", { ...e, d: Cf }), Df = `M 100 28 C 100 -13 0 -13 0 50 C 0 113 100 113 100 72
+               L 0 0`, Df = (e) => /* @__PURE__ */ f.jsx("path", { ...e, d: Rf }), jf = `M 100 28 C 100 -13 0 -13 0 50 C 0 113 100 113 100 72
          L 100 48 L 55 48 L 55 72 L 75 72 C 75 90 30 90 30 50
-         C 30 10 75 5 75 28 L 100 28`, vi = (e) => /* @__PURE__ */ f.jsx("path", { ...e, d: Df }), jf = `M 0 0 L 20 0 L 20 40 L 80 40 L 80 0
+         C 30 10 75 5 75 28 L 100 28`, vi = (e) => /* @__PURE__ */ f.jsx("path", { ...e, d: jf }), Mf = `M 0 0 L 20 0 L 20 40 L 80 40 L 80 0
                L 100 0 L 100 100 L 80 100 L 80 60
-               L 20 60 L 20 100 L 0 100 L 0 0`, Mf = (e) => /* @__PURE__ */ f.jsx("path", { ...e, d: jf }), Bf = "M 40 0 L 60 0 L 60 100 L 40 100 L 40 0", If = (e) => /* @__PURE__ */ f.jsx("path", { ...e, d: Bf }), Of = `M 0 60 C 0 111 100 111 100 60
+               L 20 60 L 20 100 L 0 100 L 0 0`, Bf = (e) => /* @__PURE__ */ f.jsx("path", { ...e, d: Mf }), If = "M 40 0 L 60 0 L 60 100 L 40 100 L 40 0", Of = (e) => /* @__PURE__ */ f.jsx("path", { ...e, d: If }), Pf = `M 0 60 C 0 111 100 111 100 60
          L 100 0 L 75 0 L 75 60
-         C 80 90 20 90 25 60`, Pf = (e) => /* @__PURE__ */ f.jsx("path", { ...e, d: Of }), Af = `M 0 0 L 20 0 L 20 40 L 75 0 L 100 0
+         C 80 90 20 90 25 60`, Af = (e) => /* @__PURE__ */ f.jsx("path", { ...e, d: Pf }), Nf = `M 0 0 L 20 0 L 20 40 L 75 0 L 100 0
                L 50 50 L 100 100 L 75 100 L 30 65
-               L 20 75 L 20 100 L 0 100 L 0 0`, Nf = (e) => /* @__PURE__ */ f.jsx("path", { ...e, d: Af }), qf = `M 0 0 L 0 100 L 100 100 L 100 80
-               L 20 80 L 20 0 L 0 0`, $f = (e) => /* @__PURE__ */ f.jsx("path", { ...e, d: qf }), zf = `M 0 0 L 20 0 L 50 35 L 80 0 L 100 0 L 100 100
+               L 20 75 L 20 100 L 0 100 L 0 0`, qf = (e) => /* @__PURE__ */ f.jsx("path", { ...e, d: Nf }), $f = `M 0 0 L 0 100 L 100 100 L 100 80
+               L 20 80 L 20 0 L 0 0`, zf = (e) => /* @__PURE__ */ f.jsx("path", { ...e, d: $f }), Ff = `M 0 0 L 20 0 L 50 35 L 80 0 L 100 0 L 100 100
                L 80 100 L 80 30 L 50 65 L 20 30 L 20 100
-               L 0 100 L 0 0`, Ff = (e) => /* @__PURE__ */ f.jsx("path", { ...e, d: zf }), Uf = `M 0 100 L 0 0 L 20 0 L 80 75 L 80 0
-         L 100 0 L 100 100 L 80 100 L 20 25 L 20 100 L 0 100`, Hf = (e) => /* @__PURE__ */ f.jsx("path", { ...e, d: Uf }), Gn = (e) => /* @__PURE__ */ f.jsxs("g", { children: [
+               L 0 100 L 0 0`, Uf = (e) => /* @__PURE__ */ f.jsx("path", { ...e, d: Ff }), Hf = `M 0 100 L 0 0 L 20 0 L 80 75 L 80 0
+         L 100 0 L 100 100 L 80 100 L 20 25 L 20 100 L 0 100`, Wf = (e) => /* @__PURE__ */ f.jsx("path", { ...e, d: Hf }), Gn = (e) => /* @__PURE__ */ f.jsxs("g", { children: [
   /* @__PURE__ */ f.jsx(
     "circle",
     {
@@ -8629,9 +8629,9 @@ const df = (e) => /* @__PURE__ */ f.jsx(
     }
   ),
   /* @__PURE__ */ f.jsx("circle", { cx: "50", cy: "50", r: "32", fill: "#ffffff" })
-] }), Wf = `M 0 0 L 80 0 C 105 0 105 50 80 50
-               L 20 50 L 20 100 L 0 100 L 0 0`, Yf = (e) => /* @__PURE__ */ f.jsxs("g", { children: [
-  /* @__PURE__ */ f.jsx("path", { ...e, d: Wf }),
+] }), Yf = `M 0 0 L 80 0 C 105 0 105 50 80 50
+               L 20 50 L 20 100 L 0 100 L 0 0`, Gf = (e) => /* @__PURE__ */ f.jsxs("g", { children: [
+  /* @__PURE__ */ f.jsx("path", { ...e, d: Yf }),
   /* @__PURE__ */ f.jsx(
     "path",
     {
@@ -8639,7 +8639,7 @@ const df = (e) => /* @__PURE__ */ f.jsx(
       d: "M 20 15 L 70 15 C 80 15 80 35 70 35 L 20 35 L 20 15"
     }
   )
-] }), Gf = "M 85 100 L 55 70 L 70 55 L 100 85 L 85 100", Vf = (e) => /* @__PURE__ */ f.jsxs("g", { children: [
+] }), Vf = "M 85 100 L 55 70 L 70 55 L 100 85 L 85 100", Zf = (e) => /* @__PURE__ */ f.jsxs("g", { children: [
   /* @__PURE__ */ f.jsx(
     "circle",
     {
@@ -8650,12 +8650,12 @@ const df = (e) => /* @__PURE__ */ f.jsx(
     }
   ),
   /* @__PURE__ */ f.jsx("circle", { cx: "50", cy: "50", r: "32", fill: "#ffffff" }),
-  /* @__PURE__ */ f.jsx("path", { d: Gf, ...e })
-] }), Zf = `M 0 0 L 80 0 C 105 0 105 50 80 50
+  /* @__PURE__ */ f.jsx("path", { d: Vf, ...e })
+] }), Xf = `M 0 0 L 80 0 C 105 0 105 50 80 50
                 C 100 50 100 70 100 70 L 100 100 L 80 100
                 L 80 80 C 80 80 80 60 50 60 L 20 60
-                L 20 100 L 0 100 L 0 0`, Xf = (e) => /* @__PURE__ */ f.jsxs("g", { children: [
-  /* @__PURE__ */ f.jsx("path", { ...e, d: Zf }),
+                L 20 100 L 0 100 L 0 0`, Kf = (e) => /* @__PURE__ */ f.jsxs("g", { children: [
+  /* @__PURE__ */ f.jsx("path", { ...e, d: Xf }),
   /* @__PURE__ */ f.jsx(
     "path",
     {
@@ -8663,33 +8663,33 @@ const df = (e) => /* @__PURE__ */ f.jsx(
       d: "M 20 15 L 70 15 C 80 15 80 35 70 35 L 20 35 L 20 15"
     }
   )
-] }), Kf = "M92 26 A43 20 0 1 0 43 46 A42 23 0 1 1 9 68", jo = ({ fill: e, fillOpacity: t }) => /* @__PURE__ */ f.jsx(
+] }), Jf = "M92 26 A43 20 0 1 0 43 46 A42 23 0 1 1 9 68", jo = ({ fill: e, fillOpacity: t }) => /* @__PURE__ */ f.jsx(
   "path",
   {
     fill: "#ffffff",
     stroke: e,
     strokeOpacity: t,
     strokeWidth: "18",
-    d: Kf
+    d: Jf
   }
-), Jf = `M 0 0 L 0 20 L 35 20 L 35 100
+), Qf = `M 0 0 L 0 20 L 35 20 L 35 100
          L 65 100 L 65 20 L 100 20
-         L 100 0 L 0 0`, xi = (e) => /* @__PURE__ */ f.jsx("path", { ...e, d: Jf }), Qf = `M 0 0 L 0 60 C 0 111 100 111 100 60
+         L 100 0 L 0 0`, xi = (e) => /* @__PURE__ */ f.jsx("path", { ...e, d: Qf }), ed = `M 0 0 L 0 60 C 0 111 100 111 100 60
          L 100 0 L 75 0 L 75 60
-         C 80 90 20 90 25 60 L 25 0 L 0 0`, ed = (e) => /* @__PURE__ */ f.jsx("path", { ...e, d: Qf }), td = `M 0 0 L 20 0 L 50 80 L 80 0
-               L 100 0 L 60 100 L 40 100 L 0 0`, Mo = (e) => /* @__PURE__ */ f.jsx("path", { ...e, d: td }), rd = `M 0 0 L 20 0 L 30 70 L 50 30 L 70 70 L 80 0
+         C 80 90 20 90 25 60 L 25 0 L 0 0`, td = (e) => /* @__PURE__ */ f.jsx("path", { ...e, d: ed }), rd = `M 0 0 L 20 0 L 50 80 L 80 0
+               L 100 0 L 60 100 L 40 100 L 0 0`, Mo = (e) => /* @__PURE__ */ f.jsx("path", { ...e, d: rd }), nd = `M 0 0 L 20 0 L 30 70 L 50 30 L 70 70 L 80 0
                L 100 0 L 90 100 L 70 100 L 50 65 L 30 100
-               L 10 100 L 0 0`, Bo = (e) => /* @__PURE__ */ f.jsx("path", { ...e, d: rd }), nd = `M 0 0 L 20 0 L 50 40 L 80 0 L 100 0 L 70 50
+               L 10 100 L 0 0`, Bo = (e) => /* @__PURE__ */ f.jsx("path", { ...e, d: nd }), id = `M 0 0 L 20 0 L 50 40 L 80 0 L 100 0 L 70 50
                L 100 100 L 80 100 L 50 60 L 20 100 L 0 100
-               L 30 50 L 0 0`, Io = (e) => /* @__PURE__ */ f.jsx("path", { ...e, d: nd }), id = `M 0 0 L 20 0 L 50 45 L 80 0 L 100 0
-               L 60 60 L 60 100 L 40 100 L 40 60 L 0 0`, ad = (e) => /* @__PURE__ */ f.jsx("path", { ...e, d: id }), od = `M 0 0 L 100 0 L 100 20 L 35 80 L 100 80
+               L 30 50 L 0 0`, Io = (e) => /* @__PURE__ */ f.jsx("path", { ...e, d: id }), ad = `M 0 0 L 20 0 L 50 45 L 80 0 L 100 0
+               L 60 60 L 60 100 L 40 100 L 40 60 L 0 0`, od = (e) => /* @__PURE__ */ f.jsx("path", { ...e, d: ad }), sd = `M 0 0 L 100 0 L 100 20 L 35 80 L 100 80
                L 100 100 L 0 100 L 0 80 L 65 20 L 0 20
-               L 0 0`, Oo = (e) => /* @__PURE__ */ f.jsx("path", { ...e, d: od });
-function sd({ xscale: e, yscale: t, inverted: n, children: r }) {
+               L 0 0`, Oo = (e) => /* @__PURE__ */ f.jsx("path", { ...e, d: sd });
+function cd({ xscale: e, yscale: t, inverted: n, children: r }) {
   const i = t * (n ? -1 : 1);
   return /* @__PURE__ */ f.jsx("g", { transform: "scale(" + e + "," + i + ")", children: r });
 }
-const cd = ({
+const ld = ({
   height: e,
   width: t,
   indices: n,
@@ -8731,7 +8731,7 @@ const cd = ({
           regex: [r[k].regex[L]],
           color: r[k].color && [r[k].color[L]]
         })),
-        children: /* @__PURE__ */ f.jsx(sd, { xscale: w, yscale: i[k], inverted: s || !1, children: /* @__PURE__ */ f.jsx(
+        children: /* @__PURE__ */ f.jsx(cd, { xscale: w, yscale: i[k], inverted: s || !1, children: /* @__PURE__ */ f.jsx(
           E,
           {
             fill: r[k].color && r[k].color[L] || "#000000",
@@ -8744,7 +8744,7 @@ const cd = ({
     ));
   });
   return /* @__PURE__ */ f.jsx("g", { transform: a, children: v });
-}, ld = (e, t) => (n) => t[0] + (t[1] - t[0]) * ((n - e[0]) / (e[1] - e[0])), ud = ({
+}, ud = (e, t) => (n) => t[0] + (t[1] - t[0]) * ((n - e[0]) / (e[1] - e[0])), fd = ({
   minrange: e,
   maxrange: t,
   xstart: n,
@@ -8754,7 +8754,7 @@ const cd = ({
   numberofgridlines: o,
   stroke: s
 }) => {
-  const c = ld([e, t], [n, r]), u = t - e, p = a + i, h = Math.ceil(u) / o, b = Math.ceil(u / h), v = Array.from(Array(b).keys());
+  const c = ud([e, t], [n, r]), u = t - e, p = a + i, h = Math.ceil(u) / o, b = Math.ceil(u / h), v = Array.from(Array(b).keys());
   return /* @__PURE__ */ f.jsxs("g", { stroke: s || "#000000", children: [
     v.map((k) => {
       const D = e + h * k;
@@ -8765,68 +8765,68 @@ const cd = ({
   ] });
 }, Vn = "FREQUENCY", Po = [
   { component: [mi], regex: ["A"], color: ["red"] },
-  { component: [bf], regex: ["B"], color: ["maroon"] },
+  { component: [wf], regex: ["B"], color: ["maroon"] },
   { component: [br], regex: ["C"], color: ["blue"] },
-  { component: [Ef], regex: ["D"], color: ["green"] },
-  { component: [Tf], regex: ["E"], color: ["olive"] },
-  { component: [Rf], regex: ["F"], color: ["navy"] },
+  { component: [Lf], regex: ["D"], color: ["green"] },
+  { component: [Cf], regex: ["E"], color: ["olive"] },
+  { component: [Df], regex: ["F"], color: ["navy"] },
   { component: [vi], regex: ["G"], color: ["orange"] },
-  { component: [Mf], regex: ["H"], color: ["teal"] },
-  { component: [If], regex: ["I"], color: ["cadetblue"] },
-  { component: [Pf], regex: ["J"], color: ["lavender"] },
-  { component: [Nf], regex: ["K"], color: ["chocolate"] },
-  { component: [$f], regex: ["L"], color: ["coral"] },
-  { component: [Ff], regex: ["M"], color: ["darkolivegreen"] },
-  { component: [Hf], regex: ["N"], color: ["darkorange"] },
+  { component: [Bf], regex: ["H"], color: ["teal"] },
+  { component: [Of], regex: ["I"], color: ["cadetblue"] },
+  { component: [Af], regex: ["J"], color: ["lavender"] },
+  { component: [qf], regex: ["K"], color: ["chocolate"] },
+  { component: [zf], regex: ["L"], color: ["coral"] },
+  { component: [Uf], regex: ["M"], color: ["darkolivegreen"] },
+  { component: [Wf], regex: ["N"], color: ["darkorange"] },
   { component: [Gn], regex: ["O"], color: ["gold"] },
-  { component: [Yf], regex: ["P"], color: ["darkorchid"] },
-  { component: [Vf], regex: ["Q"], color: ["darkslateblue"] },
-  { component: [Xf], regex: ["R"], color: ["firebrick"] },
+  { component: [Gf], regex: ["P"], color: ["darkorchid"] },
+  { component: [Zf], regex: ["Q"], color: ["darkslateblue"] },
+  { component: [Kf], regex: ["R"], color: ["firebrick"] },
   { component: [jo], regex: ["S"], color: ["darkslategrey"] },
   { component: [xi], regex: ["T"], color: ["#228b22"] },
-  { component: [ed], regex: ["U"], color: ["seagreen"] },
+  { component: [td], regex: ["U"], color: ["seagreen"] },
   { component: [Mo], regex: ["V"], color: ["indigo"] },
   { component: [Bo], regex: ["W"], color: ["mediumseagreen"] },
   { component: [Io], regex: ["X"], color: ["black"] },
-  { component: [ad], regex: ["Y"], color: ["palevioletred"] },
+  { component: [od], regex: ["Y"], color: ["palevioletred"] },
   { component: [Oo], regex: ["Z"], color: ["peru"] },
-  { component: [Wu], regex: ["a"], color: ["red"] },
-  { component: [Yu], regex: ["b"], color: ["maroon"] },
+  { component: [Yu], regex: ["a"], color: ["red"] },
+  { component: [Gu], regex: ["b"], color: ["maroon"] },
   { component: [br], regex: ["c"], color: ["purple"] },
-  { component: [Gu], regex: ["d"], color: ["green"] },
-  { component: [Vu], regex: ["e"], color: ["olive"] },
-  { component: [Zu], regex: ["f"], color: ["navy"] },
-  { component: [Xu], regex: ["g"], color: ["orange"] },
-  { component: [Ku], regex: ["h"], color: ["teal"] },
-  { component: [Ju], regex: ["i"], color: ["cadetblue"] },
-  { component: [Qu], regex: ["j"], color: ["lavender"] },
-  { component: [ef], regex: ["k"], color: ["chocolate"] },
-  { component: [tf], regex: ["l"], color: ["coral"] },
-  { component: [rf], regex: ["m"], color: ["darkolivegreen"] },
-  { component: [nf], regex: ["n"], color: ["darkorange"] },
+  { component: [Vu], regex: ["d"], color: ["green"] },
+  { component: [Zu], regex: ["e"], color: ["olive"] },
+  { component: [Xu], regex: ["f"], color: ["navy"] },
+  { component: [Ku], regex: ["g"], color: ["orange"] },
+  { component: [Ju], regex: ["h"], color: ["teal"] },
+  { component: [Qu], regex: ["i"], color: ["cadetblue"] },
+  { component: [ef], regex: ["j"], color: ["lavender"] },
+  { component: [tf], regex: ["k"], color: ["chocolate"] },
+  { component: [rf], regex: ["l"], color: ["coral"] },
+  { component: [nf], regex: ["m"], color: ["darkolivegreen"] },
+  { component: [af], regex: ["n"], color: ["darkorange"] },
   { component: [Gn], regex: ["o"], color: ["gold"] },
-  { component: [af], regex: ["p"], color: ["darkorchid"] },
-  { component: [of], regex: ["q"], color: ["darkslateblue"] },
-  { component: [sf], regex: ["r"], color: ["firebrick"] },
+  { component: [of], regex: ["p"], color: ["darkorchid"] },
+  { component: [sf], regex: ["q"], color: ["darkslateblue"] },
+  { component: [cf], regex: ["r"], color: ["firebrick"] },
   { component: [jo], regex: ["s"], color: ["darkslategrey"] },
-  { component: [cf], regex: ["t"], color: ["#228b22"] },
-  { component: [lf], regex: ["u"], color: ["seagreen"] },
+  { component: [lf], regex: ["t"], color: ["#228b22"] },
+  { component: [uf], regex: ["u"], color: ["seagreen"] },
   { component: [Mo], regex: ["v"], color: ["indigo"] },
   { component: [Bo], regex: ["w"], color: ["mediumseagreen"] },
   { component: [Io], regex: ["x"], color: ["black"] },
-  { component: [uf], regex: ["y"], color: ["palevioletred"] },
+  { component: [ff], regex: ["y"], color: ["palevioletred"] },
   { component: [Oo], regex: ["z"], color: ["peru"] },
   { component: [Gn], regex: ["0"], color: ["indianred"] },
-  { component: [ff], regex: ["1"], color: ["red"] },
-  { component: [df], regex: ["2"], color: ["green"] },
-  { component: [hf], regex: ["3"], color: ["purple"] },
-  { component: [pf], regex: ["4"], color: ["navy"] },
-  { component: [gf], regex: ["5"], color: ["teal"] },
-  { component: [mf], regex: ["6"], color: ["gold"] },
-  { component: [vf], regex: ["7"], color: ["olive"] },
-  { component: [xf], regex: ["8"], color: ["slate"] },
-  { component: [yf], regex: ["9"], color: ["firebrick"] }
-], fd = (e, t) => {
+  { component: [df], regex: ["1"], color: ["red"] },
+  { component: [hf], regex: ["2"], color: ["green"] },
+  { component: [pf], regex: ["3"], color: ["purple"] },
+  { component: [gf], regex: ["4"], color: ["navy"] },
+  { component: [mf], regex: ["5"], color: ["teal"] },
+  { component: [vf], regex: ["6"], color: ["gold"] },
+  { component: [xf], regex: ["7"], color: ["olive"] },
+  { component: [yf], regex: ["8"], color: ["slate"] },
+  { component: [_f], regex: ["9"], color: ["firebrick"] }
+], dd = (e, t) => {
   let n = ("" + e).length;
   for (let r = e + 1; r < e + t; ++r)
     ("" + r).length > n && (n = ("" + r).length);
@@ -8838,7 +8838,7 @@ const cd = ({
       e[r] = Po[n];
     });
   }), e;
-})(), dd = (e) => e.map((t) => {
+})(), hd = (e) => e.map((t) => {
   if (t.regex.length === 1)
     return Object.assign({}, t, {
       component: Ao[t.regex[0]].component
@@ -8848,7 +8848,7 @@ const cd = ({
   for (let i = 0; i < r.regex.length; ++i)
     r.component.push(Ao[r.regex[i]].component[0]), r.color.push(t.color && t.color[i] || n);
   return r;
-}), hd = (e) => (t, n) => {
+}), pd = (e) => (t, n) => {
   let r = 0, i = n || 0;
   return t.map(
     (a, o) => r += a === 0 ? 0 : a * Math.log2(a / (e[o] || 0.01))
@@ -8856,12 +8856,12 @@ const cd = ({
     const o = a * (r - i);
     return o <= 0 ? 0 : o;
   });
-}, pd = (e) => e.map((t, n) => n).sort((t, n) => e[t] < e[n] ? -1 : e[t] === e[n] ? 0 : 1), gd = (e) => e.map((t, n) => n).sort((t, n) => e[t] < e[n] ? 1 : e[t] === e[n] ? 0 : -1), yi = (e) => {
+}, gd = (e) => e.map((t, n) => n).sort((t, n) => e[t] < e[n] ? -1 : e[t] === e[n] ? 0 : 1), md = (e) => e.map((t, n) => n).sort((t, n) => e[t] < e[n] ? 1 : e[t] === e[n] ? 0 : -1), yi = (e) => {
   let t = [];
   for (let n = 0; n < Math.floor(e); n++)
     t.push(n);
   return t;
-}, md = ({
+}, vd = ({
   n: e,
   transform: t,
   glyphWidth: n,
@@ -8879,7 +8879,7 @@ const cd = ({
     },
     a
   )) }) });
-}, vd = (e) => {
+}, xd = (e) => {
   const t = yi(e.bits + 1), n = e.zeroPoint || 1;
   return /* @__PURE__ */ f.jsxs("g", { transform: e.transform, children: [
     /* @__PURE__ */ f.jsx(
@@ -8923,7 +8923,7 @@ const cd = ({
       }
     ) })
   ] });
-}, xd = (e) => {
+}, yd = (e) => {
   const t = yi(e.ticks + 1).map((n) => n / e.ticks);
   return /* @__PURE__ */ f.jsxs("g", { transform: e.transform, children: [
     /* @__PURE__ */ f.jsx(
@@ -8958,10 +8958,10 @@ const cd = ({
     )),
     /* @__PURE__ */ f.jsx("g", { transform: "rotate(-90)", children: /* @__PURE__ */ f.jsx("text", { y: "15", x: -e.height / 2, textAnchor: "middle", fontSize: "18", children: "frequency" }) })
   ] });
-}, yd = (e, t, n, r) => (i, a, o, s, c, u) => {
-  const p = u ? gd(i) : pd(i), { onSymbolMouseOver: h, onSymbolMouseOut: b, onSymbolClick: v } = s;
+}, _d = (e, t, n, r) => (i, a, o, s, c, u) => {
+  const p = u ? md(i) : gd(i), { onSymbolMouseOver: h, onSymbolMouseOut: b, onSymbolClick: v } = s;
   return /* @__PURE__ */ f.jsx(
-    cd,
+    ld,
     {
       indices: p,
       alphabet: o,
@@ -8977,7 +8977,7 @@ const cd = ({
     },
     a
   );
-}, _d = ({
+}, bd = ({
   values: e,
   glyphWidth: t,
   stackHeight: n,
@@ -8986,10 +8986,10 @@ const cd = ({
   onSymbolMouseOut: a,
   onSymbolClick: o
 }) => {
-  const s = yd(t, n);
+  const s = _d(t, n);
   for (const c in r)
     if (!r[c].component) {
-      r = dd(r);
+      r = hd(r);
       break;
     }
   return e.map(
@@ -9012,7 +9012,7 @@ const cd = ({
     count: n.length,
     pfm: r
   };
-}, bd = (e, t) => {
+}, wd = (e, t) => {
   const n = {}, r = [];
   return e.forEach((i, a) => {
     i.regex.forEach((o) => {
@@ -9022,7 +9022,7 @@ const cd = ({
 `).forEach((i) => {
     i[0] === ">" ? r.push("") : r[r.length - 1] += i.trim();
   }), Ns(e, n, r);
-}, wd = (e, t) => {
+}, Sd = (e, t) => {
   const n = {};
   return e.forEach((r, i) => {
     r.regex.forEach((a) => {
@@ -9034,7 +9034,7 @@ const cd = ({
     t.split(`
 `).map((r) => r.trim())
   );
-}, Sd = ({
+}, kd = ({
   ppm: e,
   pfm: t,
   values: n,
@@ -9061,7 +9061,7 @@ const cd = ({
   let _ = null;
   const g = (t || r) && !v && !d ? !k : !1, x = g ? 0 : (v || 0) / s.length;
   if (!e && !t && r) {
-    const ne = (y ? wd : bd)(
+    const ne = (y ? Sd : wd)(
       s,
       r.toUpperCase()
     );
@@ -9083,7 +9083,7 @@ const cd = ({
   let j = e[0].length;
   b || (b = e[0].map((ne) => 1 / j));
   let M = n || (i !== Vn ? e.map(
-    (ne, F) => hd(b)(ne, C ? C[F] : void 0)
+    (ne, F) => pd(b)(ne, C ? C[F] : void 0)
   ) : e.map(
     (ne) => ne.map((F) => F * Math.log2(j))
   ));
@@ -9091,7 +9091,7 @@ const cd = ({
   p = p && !isNaN(parseFloat(p.toString())) && isFinite(p) ? p : 1;
   let V = 100 * A;
   c = V / 6 * (c || 1);
-  let W = M.length * c + 80, ae = V + 18 * (fd(p, M.length) + 1);
+  let W = M.length * c + 80, ae = V + 18 * (dd(p, M.length) + 1);
   return u && (W > ae ? o = u : a = u), /* @__PURE__ */ f.jsxs(
     "svg",
     {
@@ -9101,7 +9101,7 @@ const cd = ({
       ref: m,
       children: [
         h && /* @__PURE__ */ f.jsx(
-          ud,
+          fd,
           {
             minrange: p,
             maxrange: p + e.length,
@@ -9113,7 +9113,7 @@ const cd = ({
           }
         ),
         /* @__PURE__ */ f.jsx(
-          md,
+          vd,
           {
             transform: "translate(80," + (V + 20) + ")",
             n: M.length,
@@ -9122,7 +9122,7 @@ const cd = ({
           }
         ),
         i === Vn ? /* @__PURE__ */ f.jsx(
-          xd,
+          yd,
           {
             transform: "translate(0,10)",
             width: 65,
@@ -9130,7 +9130,7 @@ const cd = ({
             ticks: 2
           }
         ) : /* @__PURE__ */ f.jsx(
-          vd,
+          xd,
           {
             transform: "translate(0,10)",
             width: 65,
@@ -9140,7 +9140,7 @@ const cd = ({
           }
         ),
         /* @__PURE__ */ f.jsx("g", { transform: "translate(80,10)", children: /* @__PURE__ */ f.jsx(
-          _d,
+          bd,
           {
             values: M,
             glyphWidth: c,
@@ -9154,26 +9154,26 @@ const cd = ({
       ]
     }
   );
-}, kd = [
+}, Ed = [
   { component: [mi], regex: ["A"], color: ["red"] },
   { component: [br], regex: ["C"], color: ["blue"] },
   { component: [vi], regex: ["G"], color: ["orange"] },
   { component: [xi], regex: ["T"], color: ["#228b22"] }
 ];
-function Ed(e) {
-  return /* @__PURE__ */ f.jsx(Sd, { ...e, alphabet: kd });
+function Ld(e) {
+  return /* @__PURE__ */ f.jsx(kd, { ...e, alphabet: Ed });
 }
 const No = /* @__PURE__ */ new Map([
   ["A", mi],
   ["C", br],
   ["G", vi],
   ["T", xi]
-]), Ld = /* @__PURE__ */ new Map([
+]), Td = /* @__PURE__ */ new Map([
   ["A", "#008800"],
   ["C", "#000088"],
   ["G", "#a89132"],
   ["T", "#880000"]
-]), Td = (e) => {
+]), Cd = (e) => {
   const [t, n, r] = ce(() => e.transform(e.importance), [e.transform, e.importance]);
   return No.get(e.base) ? /* @__PURE__ */ f.jsxs(f.Fragment, { children: [
     /* @__PURE__ */ f.jsx(
@@ -9192,14 +9192,14 @@ const No = /* @__PURE__ */ new Map([
       }
     ),
     /* @__PURE__ */ f.jsx("g", { transform: `${r} translate(${e.x},${t}) scale(${e.xScale},${n})`, children: oi(No.get(e.base), {
-      fill: Ld.get(e.base)
+      fill: Td.get(e.base)
     }) })
   ] }) : null;
-}, Cd = Te.memo(Td, (e, t) => e.base === t.base && e.importance === t.importance && e.x === t.x && e.totalHeight === t.totalHeight && e.totalWidth === t.totalWidth && e.xScale === t.xScale && e.transform === t.transform && e.onMouseOver === t.onMouseOver && e.onMouseOut === t.onMouseOut && e.onMouseUp === t.onMouseUp && e.onClick === t.onClick);
-function Rd({ data: e, annotations: t, dimensions: n, height: r, zeroLineProps: i }) {
+}, Rd = Te.memo(Cd, (e, t) => e.base === t.base && e.importance === t.importance && e.x === t.x && e.totalHeight === t.totalHeight && e.totalWidth === t.totalWidth && e.xScale === t.xScale && e.transform === t.transform && e.onMouseOver === t.onMouseOver && e.onMouseOut === t.onMouseOut && e.onMouseUp === t.onMouseUp && e.onClick === t.onClick);
+function Dd({ data: e, annotations: t, dimensions: n, height: r, zeroLineProps: i }) {
   if (e.length === 0 || e.importance.length === 0)
     return null;
-  const { viewWidth: a } = n, [o] = be(null), [s, c, u] = $u(e, r), p = qu(t || [], s, u), h = ce(() => a / s.length / 100, [a, s.length]), b = at(c, [c]), v = ce(() => p.map((L, y) => {
+  const { viewWidth: a } = n, [o] = be(null), [s, c, u] = zu(e, r), p = $u(t || [], s, u), h = ce(() => a / s.length / 100, [a, s.length]), b = at(c, [c]), v = ce(() => p.map((L, y) => {
     const d = 100 * h * Math.abs(L.coordinates[1] - L.coordinates[0]), m = Math.min(...L.coordinates) * h * 100, _ = L.y + L.height, g = 80;
     return /* @__PURE__ */ f.jsxs(Ks, { children: [
       /* @__PURE__ */ f.jsx(
@@ -9232,7 +9232,7 @@ function Rd({ data: e, annotations: t, dimensions: n, height: r, zeroLineProps:
     }),
     [h, r, b]
   ), D = ce(() => s.map(
-    (L, y) => L.importance ? /* @__PURE__ */ oi(Cd, { ...k, key: y, x: y * h * 100, ...L }) : null
+    (L, y) => L.importance ? /* @__PURE__ */ oi(Rd, { ...k, key: y, x: y * h * 100, ...L }) : null
   ), [s, h, r, b]), w = ce(() => c(0)[0], [c]), E = ce(() => s.filter((L) => L.importance).length > 0 ? /* @__PURE__ */ f.jsx("line", { stroke: "#ff0000", strokeWidth: 1, ...i, x1: 0, x2: a, y1: w, y2: w }) : /* @__PURE__ */ f.jsx("text", { x: 0, y: r / 2, children: "No importance track data" }), [s, a, w, r, i]);
   return /* @__PURE__ */ f.jsxs("g", { width: a, height: r, children: [
     o !== null && /* @__PURE__ */ f.jsx(
@@ -9289,9 +9289,9 @@ const qs = (e) => /* @__PURE__ */ f.jsxs("g", { transform: "translate(0, -150)",
       style: { filter: "drop-shadow(0px 0px 5px rgba(0,0,0,0.3))" }
     }
   ),
-  e.pwm && /* @__PURE__ */ f.jsx(Ed, { ppm: e.pwm, mode: "INFORMATION_CONTENT", width: e.pwm.length * 20, height: 150 })
+  e.pwm && /* @__PURE__ */ f.jsx(Ld, { ppm: e.pwm, mode: "INFORMATION_CONTENT", width: e.pwm.length * 20, height: 150 })
 ] });
-function Dd({
+function jd({
   id: e,
   data: t,
   height: n,
@@ -9343,7 +9343,7 @@ function Dd({
     ))
   ] });
 }
-function jd({
+function Md({
   id: e,
   data: t,
   height: n,
@@ -9404,7 +9404,7 @@ function jd({
     )) }, `group_${g}`))
   ] });
 }
-function Md({
+function Bd({
   data: e,
   datasets: t,
   id: n,
@@ -9458,7 +9458,7 @@ function Ft(e, t, n, r = !1, i, a, o = !1) {
   const { range: c, rangeSize: u } = s, p = r ? 0 : t;
   let h = it(0, p), b = it(0, p);
   return e.forEach((v, k) => {
-    if (v.min === null || v.max === null || o && !Bd(a == null ? void 0 : a[k])) return;
+    if (v.min === null || v.max === null || o && !Id(a == null ? void 0 : a[k])) return;
     const D = zs(v, c, u, t, r);
     b += ge(v.x, p) + ge(D.x, r ? t : 0) + ge(D.x + 1, r ? t : 0) + ge(v.x + 1, p), h += ge(v.x, p) + ge(D.x, D.y) + ge(D.x + 1, D.y) + ge(v.x + 1, p);
   }), {
@@ -9478,7 +9478,7 @@ function zo(e, t, n, r = !1, i) {
 }
 function $s(e, t) {
   if (!e || e.length === 0) return null;
-  const n = t || { min: Od(e), max: Id(e) }, r = n.max - n.min;
+  const n = t || { min: Pd(e), max: Od(e) }, r = n.max - n.min;
   return r <= 0 ? null : { range: n, rangeSize: r };
 }
 function zs(e, t, n, r, i) {
@@ -9488,13 +9488,13 @@ function zs(e, t, n, r, i) {
     y: i ? s : r - s
   };
 }
-function Bd(e) {
+function Id(e) {
   return e != null && e.max != null && e.max > 0;
 }
-function Id(e) {
+function Od(e) {
   return Math.max(...e.map((t) => t.max));
 }
-function Od(e) {
+function Pd(e) {
   return Math.min(...e.map((t) => t.min));
 }
 const bt = {
@@ -9507,7 +9507,7 @@ const bt = {
   depth: "#525252"
   // rgb(82, 82, 82)
 };
-function Pd({
+function Ad({
   tooltipValues: e,
   showRows: t
 }) {
@@ -9575,7 +9575,7 @@ function Pd({
     ] })
   ] });
 }
-function Ad({
+function Nd({
   id: e,
   height: t,
   maskCpgByCoverage: n,
@@ -9639,7 +9639,7 @@ function Ad({
     onClick: void 0,
     onHover: void 0,
     onLeave: void 0,
-    tooltip: s || Pd
+    tooltip: s || Ad
   });
   return /* @__PURE__ */ f.jsxs("g", { width: p, height: t, clipPath: `url(#${e})`, transform: `translate(-${u}, 0)`, children: [
     /* @__PURE__ */ f.jsx("rect", { width: p, height: t, fill: "transparent" }),
@@ -9679,7 +9679,7 @@ function Ad({
     )
   ] });
 }
-function Nd({
+function qd({
   data: e,
   customRange: t,
   id: n,
@@ -9697,7 +9697,7 @@ function Nd({
   Ee(() => {
     w(n, { range: E });
   }, [n, E, w]);
-  const L = ce(() => qd(
+  const L = ce(() => $d(
     e,
     r,
     i,
@@ -9742,7 +9742,7 @@ function Nd({
     )
   ] });
 }
-function qd(e, t, n, r, i, a) {
+function $d(e, t, n, r, i, a) {
   const o = {
     min: e.map((E) => E.min).reduce((E, L) => Math.min(E, L), 1 / 0),
     max: e.map((E) => E.max).reduce((E, L) => Math.max(E, L), -1 / 0)
@@ -9772,8 +9772,8 @@ const Fo = (e, t, n, r, i) => {
   if (e.ldblocksnpid === "Lead") return e.rsquare;
   const n = e.ldblocksnpid.split(",").map((a) => a.trim()), r = e.rsquare.split(",").map((a) => a.trim()), i = n.indexOf(t);
   return i >= 0 && i < r.length ? r[i] : r[0] || e.rsquare;
-}, $d = (e) => e.ldblocksnpid === "Lead" ? e.rsquare : e.rsquare.split(",").map((n) => n.trim())[0] || e.rsquare, wt = (e) => e.rsquare.includes("*") || e.ldblocksnpid.includes("Lead"), zd = (e, t) => wt(e) ? t : pt(t, 0.3);
-function Fd({
+}, zd = (e) => e.ldblocksnpid === "Lead" ? e.rsquare : e.rsquare.split(",").map((n) => n.trim())[0] || e.rsquare, wt = (e) => e.rsquare.includes("*") || e.ldblocksnpid.includes("Lead"), Fd = (e, t) => wt(e) ? t : pt(t, 0.3);
+function Ud({
   id: e,
   data: t,
   height: n,
@@ -9800,7 +9800,7 @@ function Fd({
     onClick: s,
     onHover: c,
     onLeave: u,
-    tooltip: p || Ud
+    tooltip: p || Hd
   }), [x, C] = be(null), [j, M] = be([]), [B, A] = be([]), q = ce(() => {
     const N = a || [], V = d.filter((ae) => N.includes(ae.snpid));
     return (x ? [...V, x] : V).filter((ae, ne, F) => ne === F.findIndex((I) => I.snpid === ae.snpid));
@@ -9874,7 +9874,7 @@ function Fd({
           width: N.pixelEnd - N.pixelStart + k,
           x: N.pixelStart - k / 2,
           y: wt(N) ? -y + L : 0,
-          fill: zd(N, r),
+          fill: Fd(N, r),
           stroke: W ? v : "none",
           strokeWidth: W ? 1 : 0,
           onClick: () => {
@@ -9924,7 +9924,7 @@ function Fd({
     })
   ] });
 }
-function Ud(e) {
+function Hd(e) {
   const t = ht((r) => r.text), n = ht((r) => r.background);
   return /* @__PURE__ */ f.jsxs("g", { style: { filter: `drop-shadow(0 0 2px ${t})` }, children: [
     /* @__PURE__ */ f.jsx("rect", { width: 180, height: 50, y: 0, fill: n }),
@@ -9936,10 +9936,10 @@ function Ud(e) {
       "-",
       e.stop
     ] }),
-    /* @__PURE__ */ f.jsx("text", { fontSize: 14, x: 5, y: 48, children: wt(e) ? "Lead" : $d(e) })
+    /* @__PURE__ */ f.jsx("text", { fontSize: 14, x: 5, y: 48, children: wt(e) ? "Lead" : zd(e) })
   ] });
 }
-function Hd({
+function Wd({
   id: e,
   data: t,
   cutoffValue: n,
@@ -9957,7 +9957,7 @@ function Hd({
     onClick: c,
     onHover: u,
     onLeave: p,
-    tooltip: h || Wd
+    tooltip: h || Yd
   }), d = ce(() => {
     const g = t.map((C) => C.value).reduce((C, j) => Math.min(C, j), 1 / 0), x = t.map((C) => C.value).reduce((C, j) => Math.max(C, j), -1 / 0);
     return {
@@ -10021,7 +10021,7 @@ function Hd({
     ] })
   ] });
 }
-function Wd(e) {
+function Yd(e) {
   const t = ht((r) => r.text), n = ht((r) => r.background);
   return /* @__PURE__ */ f.jsxs("g", { style: { filter: `drop-shadow(0 0 2px ${t})` }, children: [
     /* @__PURE__ */ f.jsx("rect", { width: 180, height: 50, y: 0, fill: n }),
@@ -10039,7 +10039,7 @@ function Wd(e) {
     ] })
   ] });
 }
-function Yd({
+function Gd({
   id: e,
   data: t,
   lead: n,
@@ -10060,7 +10060,7 @@ function Yd({
     onClick: s,
     onHover: c,
     onLeave: u,
-    tooltip: p || Gd
+    tooltip: p || Vd
   });
   return /* @__PURE__ */ f.jsxs("g", { transform: `translate(-${b}, 0)`, children: [
     /* @__PURE__ */ f.jsx("rect", { width: h, height: i, fill: "transparent" }),
@@ -10096,7 +10096,7 @@ function Yd({
     )) })
   ] });
 }
-function Gd(e) {
+function Vd(e) {
   const t = ht((r) => r.text), n = ht((r) => r.background);
   return /* @__PURE__ */ f.jsxs("g", { style: { filter: `drop-shadow(0 0 2px ${t})` }, children: [
     /* @__PURE__ */ f.jsx("rect", { width: 180, height: 50, y: 0, fill: n }),
@@ -10111,50 +10111,50 @@ function Gd(e) {
     /* @__PURE__ */ f.jsx("text", { fontSize: 14, x: 5, y: 48, children: Number(e.value).toFixed(3) })
   ] });
 }
-function Vd({ id: e }) {
+function Zd({ id: e }) {
   const t = xe((h) => h.getTrack(e)), n = nt((h) => h.trackData.get(e)), i = fe((h) => h.getTrackDimensions)(), a = !n || n.data === null && n.error === null, o = (n == null ? void 0 : n.error) ?? void 0, s = (n == null ? void 0 : n.data) ?? void 0, c = ws(e), u = ce(() => `translate(0, ${c + De})`, [c]), p = ce(
-    () => t && s ? Zd(t, s, i) : /* @__PURE__ */ f.jsx(f.Fragment, {}),
+    () => t && s ? Xd(t, s, i) : /* @__PURE__ */ f.jsx(f.Fragment, {}),
     [t, s, i]
   );
   return /* @__PURE__ */ f.jsx(Is, { id: e, transform: u, error: o, loading: a, children: p });
 }
 const _i = {
   [me.BigWig]: {
-    [Fe.Full]: Nd,
+    [Fe.Full]: qd,
     [Fe.Dense]: ru
   },
   [me.BigBed]: {
     [Fe.Dense]: Ts,
-    [Fe.Squish]: Ru
+    [Fe.Squish]: Du
   },
   [me.Transcript]: {
-    [Fe.Squish]: Au,
-    [Fe.Pack]: Nu
+    [Fe.Squish]: Nu,
+    [Fe.Pack]: qu
   },
   [me.Motif]: {
-    [Fe.Dense]: Dd,
-    [Fe.Squish]: jd
+    [Fe.Dense]: jd,
+    [Fe.Squish]: Md
   },
   [me.Importance]: {
-    [Fe.Full]: Rd
+    [Fe.Full]: Dd
   },
   [me.LDTrack]: {
-    [Fe.LDBlock]: Fd,
-    [Fe.GenericLD]: Yd
+    [Fe.LDBlock]: Ud,
+    [Fe.GenericLD]: Gd
   },
   [me.BulkBed]: {
-    [Fe.Full]: Md
+    [Fe.Full]: Bd
   },
   [me.MethylC]: {
     // [DisplayMode.Combined]: CombinedMethylC,
-    [Fe.Split]: Ad
+    [Fe.Split]: Nd
   },
   [me.Manhattan]: {
-    [Fe.Scatter]: Hd
+    [Fe.Scatter]: Wd
   },
   [me.Custom]: {}
 };
-function Zd(e, t, n) {
+function Xd(e, t, n) {
   if (e.trackType === me.Custom) {
     const a = e.renderers[e.displayMode];
     return a ? /* @__PURE__ */ f.jsx(a, { ...e, data: t, dimensions: n }) : null;
@@ -10170,13 +10170,13 @@ function Zd(e, t, n) {
   }
   return /* @__PURE__ */ f.jsx(r, { ...e, data: t, dimensions: n });
 }
-function Xd(e, t, n) {
-  const r = Kd(t, n), i = new Set(r), s = ["chrom	chromStart	chromEnd	value", Array.from(i).map((u) => `${u.chrom}	${u.chromStart}	${u.chromEnd}	${u.value}`).join(`
+function Kd(e, t, n) {
+  const r = Jd(t, n), i = new Set(r), s = ["chrom	chromStart	chromEnd	value", Array.from(i).map((u) => `${u.chrom}	${u.chromStart}	${u.chromEnd}	${u.value}`).join(`
 `)].join(`
 `), c = document.createElement("a");
   c.href = "data:text/plain;charset=utf-8," + encodeURIComponent(s), c.download = `${e}.bedGraph`, c.click();
 }
-function Kd(e, t) {
+function Jd(e, t) {
   const n = (t.end - t.start) / e.length;
   return e.map((r, i) => {
     const a = Math.floor(t.start + i * n), o = Math.floor(t.start + (i + 1) * n);
@@ -10188,8 +10188,8 @@ function Kd(e, t) {
     };
   }).filter((r) => r !== null);
 }
-function Jd(e, t, n) {
-  const r = Qd(t, n);
+function Qd(e, t, n) {
+  const r = e0(t, n);
   if (r.length === 0) return;
   const i = "chrom	chromStart	chromEnd	name	score	strand	itemRgb", a = r.map(
     (c) => `${c.chrom}	${c.chromStart}	${c.chromEnd}	${c.name}	${c.score}	${c.strand}	${c.itemRgb}`
@@ -10198,7 +10198,7 @@ function Jd(e, t, n) {
 `), s = document.createElement("a");
   s.href = "data:text/plain;charset=utf-8," + encodeURIComponent(o), s.download = `${e}.bed`, s.click();
 }
-function Qd(e, t) {
+function e0(e, t) {
   return e.map((n) => {
     var o;
     const [r, i, a] = ((o = n.color) == null ? void 0 : o.match(/\d+/g)) || ["0", "0", "0"];
@@ -10213,12 +10213,12 @@ function Qd(e, t) {
     };
   });
 }
-function e0(e) {
+function t0(e) {
   const t = document.getElementById("browserSVG");
   return t ? t.querySelector(`g#wrapper-${e}`) : null;
 }
 function Fs(e, t, n = !0) {
-  const r = e0(e);
+  const r = t0(e);
   if (!r) return;
   const i = document.createElementNS("http://www.w3.org/2000/svg", "svg");
   i.setAttribute("xmlns", "http://www.w3.org/2000/svg");
@@ -10237,7 +10237,7 @@ function Fs(e, t, n = !0) {
   const s = new XMLSerializer().serializeToString(i), c = document.createElement("a");
   c.href = "data:image/svg+xml;base64," + btoa(s), c.download = `${t}.svg`, c.click();
 }
-function t0() {
+function r0() {
   const e = Ut((w) => w.open), t = Ut((w) => w.id), n = Ut((w) => w.x), r = Ut((w) => w.y), i = Ut((w) => w.setContextMenu), a = Ie(null), o = xe((w) => w.getTrack(t || "")), s = nt((w) => w.trackData.get(t || "")), c = xe((w) => w.editTrack), u = xe((w) => w.removeTrack), [p, h] = be(null);
   if (Ee(() => {
     const w = (E) => {
@@ -10396,19 +10396,19 @@ var cr = function(e, t, n) {
   return Te.createElement("div", { className: a, style: { top: 100 * i + "%", left: 100 * n + "%" } }, Te.createElement("div", { className: "react-colorful__pointer-fill", style: { backgroundColor: t } }));
 }, Ae = function(e, t, n) {
   return t === void 0 && (t = 0), n === void 0 && (n = Math.pow(10, t)), Math.round(n * e) / n;
-}, r0 = function(e) {
-  return s0(ri(e));
+}, n0 = function(e) {
+  return c0(ri(e));
 }, ri = function(e) {
   return e[0] === "#" && (e = e.substring(1)), e.length < 6 ? { r: parseInt(e[0] + e[0], 16), g: parseInt(e[1] + e[1], 16), b: parseInt(e[2] + e[2], 16), a: e.length === 4 ? Ae(parseInt(e[3] + e[3], 16) / 255, 2) : 1 } : { r: parseInt(e.substring(0, 2), 16), g: parseInt(e.substring(2, 4), 16), b: parseInt(e.substring(4, 6), 16), a: e.length === 8 ? Ae(parseInt(e.substring(6, 8), 16) / 255, 2) : 1 };
-}, n0 = function(e) {
-  return o0(a0(e));
 }, i0 = function(e) {
+  return s0(o0(e));
+}, a0 = function(e) {
   var t = e.s, n = e.v, r = e.a, i = (200 - t) * n / 100;
   return { h: Ae(e.h), s: Ae(i > 0 && i < 200 ? t * n / 100 / (i <= 100 ? i : 200 - i) * 100 : 0), l: Ae(i / 2), a: Ae(r, 2) };
 }, ni = function(e) {
-  var t = i0(e);
+  var t = a0(e);
   return "hsl(" + t.h + ", " + t.s + "%, " + t.l + "%)";
-}, a0 = function(e) {
+}, o0 = function(e) {
   var t = e.h, n = e.s, r = e.v, i = e.a;
   t = t / 360 * 6, n /= 100, r /= 100;
   var a = Math.floor(t), o = r * (1 - n), s = r * (1 - (t - a) * n), c = r * (1 - (1 - t + a) * n), u = a % 6;
@@ -10416,20 +10416,20 @@ var cr = function(e, t, n) {
 }, _r = function(e) {
   var t = e.toString(16);
   return t.length < 2 ? "0" + t : t;
-}, o0 = function(e) {
+}, s0 = function(e) {
   var t = e.r, n = e.g, r = e.b, i = e.a, a = i < 1 ? _r(Ae(255 * i)) : "";
   return "#" + _r(t) + _r(n) + _r(r) + a;
-}, s0 = function(e) {
+}, c0 = function(e) {
   var t = e.r, n = e.g, r = e.b, i = e.a, a = Math.max(t, n, r), o = a - Math.min(t, n, r), s = o ? a === t ? (n - r) / o : a === n ? 2 + (r - t) / o : 4 + (t - n) / o : 0;
   return { h: Ae(60 * (s < 0 ? s + 6 : s)), s: Ae(a ? o / a * 100 : 0), v: Ae(a / 255 * 100), a: i };
-}, c0 = Te.memo(function(e) {
+}, l0 = Te.memo(function(e) {
   var t = e.hue, n = e.onChange, r = bi(["react-colorful__hue", e.className]);
   return Te.createElement("div", { className: r }, Te.createElement(Hs, { onMove: function(i) {
     n({ h: 360 * i.left });
   }, onKey: function(i) {
     n({ h: cr(t + 360 * i.left, 0, 360) });
   }, "aria-label": "Hue", "aria-valuenow": Ae(t), "aria-valuemax": "360", "aria-valuemin": "0" }, Te.createElement(Ws, { className: "react-colorful__hue-pointer", left: t / 360, color: ni({ h: t, s: 100, v: 100, a: 1 }) })));
-}), l0 = Te.memo(function(e) {
+}), u0 = Te.memo(function(e) {
   var t = e.hsva, n = e.onChange, r = { backgroundColor: ni({ h: t.h, s: 100, v: 100, a: 1 }) };
   return Te.createElement("div", { className: "react-colorful__saturation", style: r }, Te.createElement(Hs, { onMove: function(i) {
     n({ s: 100 * i.left, v: 100 - 100 * i.top });
@@ -10440,10 +10440,10 @@ var cr = function(e, t, n) {
   if (e === t) return !0;
   for (var n in e) if (e[n] !== t[n]) return !1;
   return !0;
-}, u0 = function(e, t) {
+}, f0 = function(e, t) {
   return e.toLowerCase() === t.toLowerCase() || Ys(ri(e), ri(t));
 };
-function f0(e, t, n) {
+function d0(e, t, n) {
   var r = ei(n), i = be(function() {
     return e.toHsva(t);
   }), a = i[0], o = i[1], s = Ie({ color: t, hsva: a });
@@ -10463,29 +10463,29 @@ function f0(e, t, n) {
   }, []);
   return [a, c];
 }
-var d0 = typeof window < "u" ? Js : Ee, h0 = function() {
+var h0 = typeof window < "u" ? Js : Ee, p0 = function() {
   return typeof __webpack_nonce__ < "u" ? __webpack_nonce__ : void 0;
-}, Yo = /* @__PURE__ */ new Map(), p0 = function(e) {
-  d0(function() {
+}, Yo = /* @__PURE__ */ new Map(), g0 = function(e) {
+  h0(function() {
     var t = e.current ? e.current.ownerDocument : document;
     if (t !== void 0 && !Yo.has(t)) {
       var n = t.createElement("style");
       n.innerHTML = `.react-colorful{position:relative;display:flex;flex-direction:column;width:200px;height:200px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default}.react-colorful__saturation{position:relative;flex-grow:1;border-color:transparent;border-bottom:12px solid #000;border-radius:8px 8px 0 0;background-image:linear-gradient(0deg,#000,transparent),linear-gradient(90deg,#fff,hsla(0,0%,100%,0))}.react-colorful__alpha-gradient,.react-colorful__pointer-fill{content:"";position:absolute;left:0;top:0;right:0;bottom:0;pointer-events:none;border-radius:inherit}.react-colorful__alpha-gradient,.react-colorful__saturation{box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}.react-colorful__alpha,.react-colorful__hue{position:relative;height:24px}.react-colorful__hue{background:linear-gradient(90deg,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red)}.react-colorful__last-control{border-radius:0 0 8px 8px}.react-colorful__interactive{position:absolute;left:0;top:0;right:0;bottom:0;border-radius:inherit;outline:none;touch-action:none}.react-colorful__pointer{position:absolute;z-index:1;box-sizing:border-box;width:28px;height:28px;transform:translate(-50%,-50%);background-color:#fff;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2)}.react-colorful__interactive:focus .react-colorful__pointer{transform:translate(-50%,-50%) scale(1.1)}.react-colorful__alpha,.react-colorful__alpha-pointer{background-color:#fff;background-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill-opacity=".05"><path d="M8 0h8v8H8zM0 8h8v8H0z"/></svg>')}.react-colorful__saturation-pointer{z-index:3}.react-colorful__hue-pointer{z-index:2}`, Yo.set(t, n);
-      var r = h0();
+      var r = p0();
       r && n.setAttribute("nonce", r), t.head.appendChild(n);
     }
   }, []);
-}, g0 = function(e) {
+}, m0 = function(e) {
   var t = e.className, n = e.colorModel, r = e.color, i = r === void 0 ? n.defaultColor : r, a = e.onChange, o = Us(e, ["className", "colorModel", "color", "onChange"]), s = Ie(null);
-  p0(s);
-  var c = f0(n, i, a), u = c[0], p = c[1], h = bi(["react-colorful", t]);
-  return Te.createElement("div", Rr({}, o, { ref: s, className: h }), Te.createElement(l0, { hsva: u, onChange: p }), Te.createElement(c0, { hue: u.h, onChange: p, className: "react-colorful__last-control" }));
-}, m0 = { defaultColor: "000", toHsva: r0, fromHsva: function(e) {
-  return n0({ h: e.h, s: e.s, v: e.v, a: 1 });
-}, equal: u0 }, v0 = function(e) {
-  return Te.createElement(g0, Rr({}, e, { colorModel: m0 }));
+  g0(s);
+  var c = d0(n, i, a), u = c[0], p = c[1], h = bi(["react-colorful", t]);
+  return Te.createElement("div", Rr({}, o, { ref: s, className: h }), Te.createElement(u0, { hsva: u, onChange: p }), Te.createElement(l0, { hue: u.h, onChange: p, className: "react-colorful__last-control" }));
+}, v0 = { defaultColor: "000", toHsva: n0, fromHsva: function(e) {
+  return i0({ h: e.h, s: e.s, v: e.v, a: 1 });
+}, equal: f0 }, x0 = function(e) {
+  return Te.createElement(m0, Rr({}, e, { colorModel: v0 }));
 };
-function x0(e, t) {
+function y0(e, t) {
   const [n, r] = be(e);
   return Ee(() => {
     const i = setTimeout(() => {
@@ -10516,8 +10516,8 @@ function gt({ title: e, children: t }) {
     }
   );
 }
-function y0({ track: e }) {
-  const [t, n] = be(e.title), r = xe((o) => o.editTrack), i = x0(t, 500);
+function _0({ track: e }) {
+  const [t, n] = be(e.title), r = xe((o) => o.editTrack), i = y0(t, 500);
   Ee(() => {
     r(e.id, { title: i });
   }, [i, r, e.id]);
@@ -10526,12 +10526,12 @@ function y0({ track: e }) {
   };
   return /* @__PURE__ */ f.jsx(gt, { title: "", children: /* @__PURE__ */ f.jsxs("div", { style: { display: "flex", flexDirection: "row", alignItems: "center", gap: "5px" }, children: [
     /* @__PURE__ */ f.jsx("div", { style: { fontWeight: "bold" }, children: "Color: " }),
-    /* @__PURE__ */ f.jsx(_0, { color: e.color || "", onChange: a }),
+    /* @__PURE__ */ f.jsx(b0, { color: e.color || "", onChange: a }),
     /* @__PURE__ */ f.jsx("div", { style: { fontWeight: "bold" }, children: "Title: " }),
     /* @__PURE__ */ f.jsx("input", { id: "titleInput", type: "text", value: t, onChange: (o) => n(o.target.value) })
   ] }) });
 }
-function _0({ color: e, onChange: t }) {
+function b0({ color: e, onChange: t }) {
   const [n, r] = be(!1), i = Ie(null);
   Ee(() => {
     const s = (c) => {
@@ -10557,7 +10557,7 @@ function _0({ color: e, onChange: t }) {
   };
   return /* @__PURE__ */ f.jsxs("div", { style: { position: "relative" }, children: [
     /* @__PURE__ */ f.jsx("div", { style: a, onClick: () => r(!n) }),
-    n && /* @__PURE__ */ f.jsx("div", { ref: i, style: o, children: /* @__PURE__ */ f.jsx(v0, { color: e, onChange: t }) })
+    n && /* @__PURE__ */ f.jsx("div", { ref: i, style: o, children: /* @__PURE__ */ f.jsx(x0, { color: e, onChange: t }) })
   ] });
 }
 function wr(e) {
@@ -10571,7 +10571,7 @@ function ar(e, t) {
   const a = n.toString(16).length == 1 ? "0" + n.toString(16) : n.toString(16), o = r.toString(16).length == 1 ? "0" + r.toString(16) : r.toString(16), s = i.toString(16).length == 1 ? "0" + i.toString(16) : i.toString(16);
   return "#" + a + o + s;
 }
-const b0 = (e) => {
+const w0 = (e) => {
   const t = e.slice(1), n = parseInt(t.slice(0, 2), 16), r = parseInt(t.slice(2, 4), 16), i = parseInt(t.slice(4, 6), 16);
   return (0.299 * n + 0.587 * r + 0.114 * i) / 255 < 0.5;
 };
@@ -10583,7 +10583,7 @@ function wi(e, t) {
     color: wr(s)
   };
 }
-function w0({ id: e, trackType: t }) {
+function S0({ id: e, trackType: t }) {
   const n = xe((p) => p.getTrack(e)), r = t === me.Custom && n ? n.renderers : _i[t], i = Object.keys(r), a = n == null ? void 0 : n.displayMode, o = n == null ? void 0 : n.color, s = xe((p) => p.editTrack), c = (p) => ({
     ...wi(o || "#000000", p),
     marginRight: "5px",
@@ -10596,7 +10596,7 @@ function w0({ id: e, trackType: t }) {
   };
   return n ? /* @__PURE__ */ f.jsx(gt, { title: "Display Mode", children: /* @__PURE__ */ f.jsx("div", { style: { display: "flex", flexDirection: "row", gap: "5px" }, children: i.map((p) => /* @__PURE__ */ f.jsx("button", { onClick: () => u(p), style: c(p === a), children: p }, p)) }) }) : null;
 }
-function S0({ id: e, defaultHeight: t }) {
+function k0({ id: e, defaultHeight: t }) {
   const n = Ie(null), r = xe((y) => y.editTrack), i = xe((y) => y.editAllTracksByType), a = xe((y) => y.getTrack), o = xe((y) => y.tracks), s = 20, c = 300, u = a(e), p = u == null ? void 0 : u.trackType, h = u == null ? void 0 : u.color, b = (y) => {
     const d = Number(y) < s ? s : Number(y) > c ? c : Number(y);
     r(e, { height: d });
@@ -10640,7 +10640,7 @@ function S0({ id: e, defaultHeight: t }) {
     whiteSpace: "nowrap"
   });
   return /* @__PURE__ */ f.jsx(gt, { title: "Height", children: /* @__PURE__ */ f.jsxs("div", { style: { display: "flex", flexDirection: "row", gap: "5px", alignItems: "flex-start" }, children: [
-    /* @__PURE__ */ f.jsx(k0, { inputRef: n, defaultValue: t, validate: v, callback: b }),
+    /* @__PURE__ */ f.jsx(E0, { inputRef: n, defaultValue: t, validate: v, callback: b }),
     w && p && /* @__PURE__ */ f.jsxs(
       "button",
       {
@@ -10656,7 +10656,7 @@ function S0({ id: e, defaultHeight: t }) {
     )
   ] }) });
 }
-function k0({
+function E0({
   inputRef: e,
   defaultValue: t,
   validate: n,
@@ -10678,17 +10678,17 @@ function k0({
       ref: e,
       type: "number",
       step: "any",
-      placeholder: E0(Number(t)),
+      placeholder: L0(Number(t)),
       onChange: o,
       style: { appearance: "textfield" }
     }
   );
 }
-function E0(e) {
+function L0(e) {
   return Number.isNaN(e) ? "" : Number.isInteger(e) ? e.toString() : Number(e.toFixed(2)).toString();
 }
 var ii = /* @__PURE__ */ ((e) => (e[e.V29 = 29] = "V29", e[e.V40 = 40] = "V40", e[e.V47 = 47] = "V47", e))(ii || {}), Gs = /* @__PURE__ */ ((e) => (e[e.V21 = 21] = "V21", e[e.V25 = 25] = "V25", e))(Gs || {});
-function L0({ track: e }) {
+function T0({ track: e }) {
   const t = xe((u) => u.editTrack), [n, r] = be(e.version), a = fe((u) => u.getExpandedDomain)(), o = (u) => {
     r(u);
     const p = Object.values(ii).includes(u);
@@ -10722,7 +10722,7 @@ function L0({ track: e }) {
     p
   )) }) });
 }
-function T0(e) {
+function C0(e) {
   return /* @__PURE__ */ f.jsx("svg", { width: e.width, height: e.height, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ f.jsx(
     "path",
     {
@@ -10755,16 +10755,16 @@ function ai({
       ref: r,
       type: "number",
       step: "any",
-      placeholder: C0(Number(e)),
+      placeholder: R0(Number(e)),
       onChange: o,
       style: { appearance: "textfield" }
     }
   );
 }
-function C0(e) {
+function R0(e) {
   return Number.isNaN(e) ? "" : Number.isInteger(e) ? e.toString() : Number(e.toFixed(2)).toString();
 }
-function R0({
+function D0({
   id: e,
   defaultRange: t,
   customRange: n
@@ -10813,10 +10813,10 @@ function R0({
         callback: s
       }
     ),
-    /* @__PURE__ */ f.jsx("button", { title: "auto scale range", onClick: () => r(e, { customRange: void 0 }), children: /* @__PURE__ */ f.jsx(T0, { fill: "#000000", width: 15, height: 15, style: { cursor: "pointer" } }) })
+    /* @__PURE__ */ f.jsx("button", { title: "auto scale range", onClick: () => r(e, { customRange: void 0 }), children: /* @__PURE__ */ f.jsx(C0, { fill: "#000000", width: 15, height: 15, style: { cursor: "pointer" } }) })
   ] }) });
 }
-function D0({ id: e, name: t }) {
+function j0({ id: e, name: t }) {
   const n = xe((i) => i.editTrack), r = (i) => {
     n(e, { geneName: i.target.value });
   };
@@ -10833,9 +10833,9 @@ const Xn = {
   textAlign: "center",
   padding: "6px 12px"
 };
-function j0({ track: e }) {
-  const t = fe((k) => k.getExpandedDomain), n = nt((k) => k.trackData.get(e.id || "")), r = t(), i = e.color || "#ffffff", a = b0(i), o = ar(i, a ? 30 : -30), s = wr(i), c = (n == null ? void 0 : n.data) ?? void 0, u = () => {
-    e.trackType === me.BigWig ? Xd(e.id, c, r) : e.trackType === me.BigBed && Jd(e.id, c, r);
+function M0({ track: e }) {
+  const t = fe((k) => k.getExpandedDomain), n = nt((k) => k.trackData.get(e.id || "")), r = t(), i = e.color || "#ffffff", a = w0(i), o = ar(i, a ? 30 : -30), s = wr(i), c = (n == null ? void 0 : n.data) ?? void 0, u = () => {
+    e.trackType === me.BigWig ? Kd(e.id, c, r) : e.trackType === me.BigBed && Qd(e.id, c, r);
   }, p = () => {
     Fs(e.id, e.title, !0);
   }, h = () => {
@@ -10898,7 +10898,7 @@ function j0({ track: e }) {
     ) : null
   ] }) }) });
 }
-function M0({ id: e, defaultGap: t }) {
+function B0({ id: e, defaultGap: t }) {
   const n = xe((s) => s.editTrack), r = 0, i = 20, a = (s) => {
     const c = Number(s) < r ? r : Number(s) > i ? i : Number(s);
     n(e, { gap: c });
@@ -10911,10 +10911,10 @@ function M0({ id: e, defaultGap: t }) {
   };
   return /* @__PURE__ */ f.jsx(gt, { title: "Gap", children: /* @__PURE__ */ f.jsx(ai, { defaultValue: t, validate: o, callback: a }) });
 }
-function B0({ datasets: e }) {
+function I0({ datasets: e }) {
   return /* @__PURE__ */ f.jsx(gt, { title: "Datasets", children: /* @__PURE__ */ f.jsx("div", { style: { display: "flex", flexDirection: "column", gap: "2px" }, children: e.map((t, n) => /* @__PURE__ */ f.jsx("div", { style: { fontSize: "12px", color: "#666" }, children: t.name }, n)) }) });
 }
-function I0() {
+function O0() {
   const e = ir((b) => b.id), t = ir((b) => b.open), n = ir((b) => b.closeModal), r = ir((b) => b.position), i = 40, [a, o] = be(r), [s, c] = be(!1), u = (b, v) => {
     b.preventDefault(), o({ x: v.x, y: v.y }), c(!0);
   };
@@ -10967,7 +10967,7 @@ function I0() {
                   alignItems: "center"
                 },
                 children: [
-                  /* @__PURE__ */ f.jsx(P0, { handleClose: n, color: wr(p.color || "transparent") }),
+                  /* @__PURE__ */ f.jsx(A0, { handleClose: n, color: wr(p.color || "transparent") }),
                   /* @__PURE__ */ f.jsx("div", { style: { margin: "10px" }, children: /* @__PURE__ */ f.jsxs("div", { style: { paddingBottom: "0px", fontSize: "1.2em", fontWeight: "bold" }, children: [
                     "Configure",
                     " ",
@@ -10976,26 +10976,26 @@ function I0() {
                 ]
               }
             ),
-            /* @__PURE__ */ f.jsx(O0, { id: e })
+            /* @__PURE__ */ f.jsx(P0, { id: e })
           ]
         }
       )
     }
   );
 }
-function O0({ id: e }) {
+function P0({ id: e }) {
   const t = xe((r) => r.getTrack(e));
   if (!t) return "no configuration available";
   const n = (() => {
     switch (t.trackType) {
       case me.BigWig:
-        return /* @__PURE__ */ f.jsx(R0, { id: e, defaultRange: t.range, customRange: t.customRange });
+        return /* @__PURE__ */ f.jsx(D0, { id: e, defaultRange: t.range, customRange: t.customRange });
       case me.BigBed:
         return /* @__PURE__ */ f.jsx(f.Fragment, {});
       case me.Transcript:
         return /* @__PURE__ */ f.jsxs(f.Fragment, { children: [
-          /* @__PURE__ */ f.jsx(L0, { track: t }),
-          /* @__PURE__ */ f.jsx(D0, { id: e, name: t.geneName || "" })
+          /* @__PURE__ */ f.jsx(T0, { track: t }),
+          /* @__PURE__ */ f.jsx(j0, { id: e, name: t.geneName || "" })
         ] });
       case me.Motif:
         return /* @__PURE__ */ f.jsx(f.Fragment, {});
@@ -11005,8 +11005,8 @@ function O0({ id: e }) {
         return /* @__PURE__ */ f.jsx(f.Fragment, {});
       case me.BulkBed:
         return /* @__PURE__ */ f.jsxs(f.Fragment, { children: [
-          /* @__PURE__ */ f.jsx(M0, { id: e, defaultGap: t.gap || 0 }),
-          /* @__PURE__ */ f.jsx(B0, { datasets: t.datasets || [] })
+          /* @__PURE__ */ f.jsx(B0, { id: e, defaultGap: t.gap || 0 }),
+          /* @__PURE__ */ f.jsx(I0, { datasets: t.datasets || [] })
         ] });
       case me.Custom: {
         const r = t.settingsPanel;
@@ -11017,16 +11017,16 @@ function O0({ id: e }) {
     }
   })();
   return /* @__PURE__ */ f.jsxs(f.Fragment, { children: [
-    /* @__PURE__ */ f.jsx(y0, { track: t }),
+    /* @__PURE__ */ f.jsx(_0, { track: t }),
     /* @__PURE__ */ f.jsxs("div", { style: { display: "flex", flexDirection: "row", gap: "5px" }, children: [
-      /* @__PURE__ */ f.jsx(S0, { id: e, defaultHeight: t.height }),
-      /* @__PURE__ */ f.jsx(w0, { id: t.id, trackType: t.trackType })
+      /* @__PURE__ */ f.jsx(k0, { id: e, defaultHeight: t.height }),
+      /* @__PURE__ */ f.jsx(S0, { id: t.id, trackType: t.trackType })
     ] }),
     n,
-    /* @__PURE__ */ f.jsx(j0, { track: t })
+    /* @__PURE__ */ f.jsx(M0, { track: t })
   ] });
 }
-function P0({ handleClose: e, color: t }) {
+function A0({ handleClose: e, color: t }) {
   const n = "25px";
   return /* @__PURE__ */ f.jsx(
     "svg",
@@ -11050,7 +11050,7 @@ function P0({ handleClose: e, color: t }) {
     }
   );
 }
-function A0() {
+function N0() {
   const e = Ht((E) => E.content), t = Ht((E) => E.x), n = Ht((E) => E.y), r = Ht((E) => E.show), [i, a] = be(0), [o, s] = be(0), [c, u] = be({ width: 0, height: 0 }), p = Ie(null), h = fe((E) => E.delta), b = fe((E) => E.browserWidth), k = kr() + De, D = 5, w = at(() => {
     if (!p.current) return;
     const E = t, L = n, y = p.current.getBBox(), d = y.width, m = y.height;
@@ -11072,7 +11072,7 @@ function A0() {
     }), () => E.disconnect();
   }, [r, e, t, n, b, k]), !r || h ? null : /* @__PURE__ */ f.jsx("g", { ref: p, id: "tooltip", transform: `translate(${i}, ${o})`, style: { pointerEvents: "none" }, children: e });
 }
-function N0({ children: e }) {
+function q0({ children: e }) {
   const t = fe((o) => o.setSvgRef), n = Ie(null), r = kr(), i = fe((o) => o.browserWidth), a = nt((o) => o.isFetching);
   return Ee(() => {
     t(n);
@@ -11103,7 +11103,7 @@ function N0({ children: e }) {
     }
   );
 }
-function q0() {
+function $0() {
   const e = fe((k) => k.browserWidth), t = fe((k) => k.marginWidth), n = De, r = kr() + De, [i, a] = be([0, 0]), [o, s] = be(!1), c = fe((k) => k.svgRef), u = fe((k) => k.domain), p = fe((k) => k.setDomain), h = (k) => {
     if (!c || !c.current) return null;
     const D = Go(k, c.current);
@@ -11164,7 +11164,7 @@ function Go(e, t) {
   const r = t.getScreenCTM();
   return r ? n.matrixTransform(r.inverse()) : null;
 }
-function $0() {
+function z0() {
   const e = nt((v) => v.isFetching), t = fe((v) => v.domain), n = fe((v) => v.getExpandedDomain), [r, i] = be(n()), a = fe((v) => v.delta);
   Ee(() => {
     e || a !== 0 || i(n());
@@ -11175,7 +11175,7 @@ function $0() {
     /* @__PURE__ */ f.jsx("g", { id: "highlights-clipped", clipPath: "url(#highlight-clip)", children: /* @__PURE__ */ f.jsx(Bs, { id: "highlights", children: o.map((v) => {
       let k = v.domain.chromosome;
       return k || (k = r.chromosome), k !== r.chromosome ? null : /* @__PURE__ */ f.jsx(
-        z0,
+        F0,
         {
           highlight: v,
           totalWidth: p,
@@ -11188,14 +11188,14 @@ function $0() {
     }) }) })
   ] });
 }
-function z0({
+function F0({
   highlight: e,
   browserDomain: t,
   totalHeight: n,
   totalWidth: r,
   marginWidth: i
 }) {
-  const a = e.domain, o = F0(a, t, r);
+  const a = e.domain, o = U0(a, t, r);
   return /* @__PURE__ */ f.jsx(
     "rect",
     {
@@ -11209,25 +11209,25 @@ function z0({
     }
   );
 }
-function F0(e, t, n) {
+function U0(e, t, n) {
   const r = t.end - t.start, i = (e.start - t.start) / r, a = (e.end - t.start) / r;
   return { start: i * n, end: a * n };
 }
-function U0() {
+function H0() {
   const e = xe((t) => t.ids);
   return Fl(), /* @__PURE__ */ f.jsxs(f.Fragment, { children: [
-    /* @__PURE__ */ f.jsxs(N0, { children: [
-      /* @__PURE__ */ f.jsx(q0, {}),
-      /* @__PURE__ */ f.jsx(Is, { id: "ruler", transform: "translate(0, 0)", loading: !1, error: void 0, children: /* @__PURE__ */ f.jsx(yu, {}) }),
+    /* @__PURE__ */ f.jsxs(q0, { children: [
       /* @__PURE__ */ f.jsx($0, {}),
-      e.map((t) => /* @__PURE__ */ f.jsx(Vd, { id: t }, t)),
-      /* @__PURE__ */ f.jsx(A0, {})
+      /* @__PURE__ */ f.jsx(Is, { id: "ruler", transform: "translate(0, 0)", loading: !1, error: void 0, children: /* @__PURE__ */ f.jsx(_u, {}) }),
+      /* @__PURE__ */ f.jsx(z0, {}),
+      e.map((t) => /* @__PURE__ */ f.jsx(Zd, { id: t }, t)),
+      /* @__PURE__ */ f.jsx(N0, {})
     ] }),
-    /* @__PURE__ */ f.jsx(t0, {}),
-    /* @__PURE__ */ f.jsx(I0, {})
+    /* @__PURE__ */ f.jsx(r0, {}),
+    /* @__PURE__ */ f.jsx(O0, {})
   ] });
 }
-function yh({ browserStore: e, trackStore: t, externalDataStore: n }) {
+function _h({ browserStore: e, trackStore: t, externalDataStore: n }) {
   const r = n ?? dc([]), i = ce(() => Jo(), []), a = ce(() => Qo(), []), o = ce(() => es(), []), s = ce(() => ts(), []), c = ce(
     () => ({
       browserStore: e,
@@ -11240,10 +11240,10 @@ function yh({ browserStore: e, trackStore: t, externalDataStore: n }) {
     }),
     [e, t, r, i, a, o, s]
   );
-  return /* @__PURE__ */ f.jsx(pc, { value: c, children: /* @__PURE__ */ f.jsx(U0, {}) });
+  return /* @__PURE__ */ f.jsx(pc, { value: c, children: /* @__PURE__ */ f.jsx(H0, {}) });
 }
-const _h = Vs;
-function bh(e, t) {
+const bh = Vs;
+function wh(e, t) {
   return ce(() => Vs(e), t ?? []);
 }
 function Vs(e) {
@@ -11325,8 +11325,8 @@ function Vs(e) {
     setTitleSize: (r) => t({ titleSize: r })
   }));
 }
-const wh = Zs;
-function Sh(e, t) {
+const Sh = Zs;
+function kh(e, t) {
   return ce(() => Zs(e), t ?? []);
 }
 function Zs(e = []) {
@@ -11437,31 +11437,31 @@ function Zs(e = []) {
     }
   }));
 }
-const H0 = "https://screen.api.wenglab.org/graphql", W0 = new rc({
-  link: new ic({ uri: H0 }),
+const W0 = "https://screen.api.wenglab.org/graphql", Y0 = new rc({
+  link: new ic({ uri: W0 }),
   cache: new nc(),
   devtools: {
     enabled: !0,
     name: "Genome Browser"
   }
 });
-function kh({ children: e }) {
-  return /* @__PURE__ */ f.jsx(ec, { client: W0, children: e });
+function Eh({ children: e }) {
+  return /* @__PURE__ */ f.jsx(ec, { client: Y0, children: e });
 }
-function Y0(e, t, n, r) {
+function G0(e, t, n, r) {
   return r ? `M ${e} ${n * 0.1} L ${e + t} ${n / 2} L ${e} ${n * 0.9}` : `M ${e + t} ${n * 0.1} L ${e} ${n / 2} L ${e + t} ${n * 0.9}`;
 }
-function G0(e) {
-  return /* @__PURE__ */ f.jsx("path", { d: Y0(e.x, e.width, e.height, e.opening), fill: e.color });
+function V0(e) {
+  return /* @__PURE__ */ f.jsx("path", { d: G0(e.x, e.width, e.height, e.opening), fill: e.color });
 }
-const V0 = /* @__PURE__ */ new Map([
+const Z0 = /* @__PURE__ */ new Map([
   ["stalk", (e) => e.stalk],
   ["gvar", (e) => e.default],
   ["gneg", (e) => pt(e.default, 0.9)]
 ]);
-function Z0(e) {
+function X0(e) {
   var n;
-  const t = e.type.slice(0, 4) === "gpos" ? pt(e.colors.default, 1 - +e.type.replace(/gpos/g, "") / 100) : (n = V0.get(e.type)) == null ? void 0 : n.call(null, e.colors);
+  const t = e.type.slice(0, 4) === "gpos" ? pt(e.colors.default, 1 - +e.type.replace(/gpos/g, "") / 100) : (n = Z0.get(e.type)) == null ? void 0 : n.call(null, e.colors);
   return t === void 0 ? null : /* @__PURE__ */ f.jsx(
     "rect",
     {
@@ -11474,8 +11474,8 @@ function Z0(e) {
     }
   );
 }
-function X0(e) {
-  return e.x(e.highlight.end) - e.x(e.highlight.start) < 10 ? /* @__PURE__ */ f.jsx(K0, { highlight: e.highlight, x: e.x, height: e.height }) : /* @__PURE__ */ f.jsx(
+function K0(e) {
+  return e.x(e.highlight.end) - e.x(e.highlight.start) < 10 ? /* @__PURE__ */ f.jsx(J0, { highlight: e.highlight, x: e.x, height: e.height }) : /* @__PURE__ */ f.jsx(
     "rect",
     {
       x: e.x(e.highlight.start),
@@ -11489,14 +11489,14 @@ function X0(e) {
     }
   );
 }
-function K0(e) {
+function J0(e) {
   const { highlight: t, height: n, x: r } = e, i = `M ${r(t.start) - 5} 0 L ${r(t.start)} ${n * 0.2} L ${r(t.start) + 5} 0`, a = `M ${r(t.start) - 5} ${n} L ${r(t.start)} ${n * 0.8} L ${r(t.start) + 5} ${n}`;
   return /* @__PURE__ */ f.jsxs(f.Fragment, { children: [
     /* @__PURE__ */ f.jsx("path", { d: i, stroke: t.color || "#ff0000", strokeWidth: 3, fill: "none" }),
     /* @__PURE__ */ f.jsx("path", { d: a, stroke: t.color || "#ff0000", strokeWidth: 3, fill: "none" })
   ] });
 }
-const J0 = lr`
+const Q0 = lr`
   query cytobands($assembly: String!, $chromosome: String) {
     cytoband(assembly: $assembly, chromosome: $chromosome) {
       stain
@@ -11507,21 +11507,21 @@ const J0 = lr`
       }
     }
   }
-`, Q0 = {
+`, eh = {
   default: "#000000",
   centromere: "#880000",
   stalk: "#ff0000"
 };
-function Eh({
+function Lh({
   assembly: e,
   currentDomain: t
 }) {
-  const i = { ...t, color: "rgba(50,50,255,0.75)" }, a = "translate(0,0)", { data: o, loading: s, error: c } = tc(J0, {
+  const i = { ...t, color: "rgba(50,50,255,0.75)" }, a = "translate(0,0)", { data: o, loading: s, error: c } = tc(Q0, {
     variables: {
       assembly: e,
       chromosome: t.chromosome || ""
     }
-  }), u = Q0;
+  }), u = eh;
   if (s)
     return /* @__PURE__ */ f.jsx("g", { width: 700, height: 20, children: /* @__PURE__ */ f.jsx("text", { x: "350", y: "15", textAnchor: "middle", style: { fontSize: "14px", fontFamily: "sans-serif" }, children: "Loading..." }) });
   if (c)
@@ -11529,7 +11529,7 @@ function Eh({
       "Error: ",
       c.message
     ] }) });
-  const p = o, h = { start: 0, end: Math.max(...p.cytoband.map((k) => k.coordinates.end)) }, b = eh(
+  const p = o, h = { start: 0, end: Math.max(...p.cytoband.map((k) => k.coordinates.end)) }, b = th(
     {
       start: h.start,
       end: h.end,
@@ -11542,7 +11542,7 @@ function Eh({
     p.cytoband.map((k, D) => {
       const w = b(k.coordinates.start), E = b(k.coordinates.end) - w;
       return k.stain === "acen" ? /* @__PURE__ */ f.jsx(
-        G0,
+        V0,
         {
           width: E,
           x: w,
@@ -11551,10 +11551,10 @@ function Eh({
           opening: v++ === 0
         },
         D
-      ) : /* @__PURE__ */ f.jsx(Z0, { type: k.stain, width: E, x: w, height: 20, colors: u, opacity: 1 }, D);
+      ) : /* @__PURE__ */ f.jsx(X0, { type: k.stain, width: E, x: w, height: 20, colors: u, opacity: 1 }, D);
     }),
     i ? /* @__PURE__ */ f.jsx(
-      X0,
+      K0,
       {
         onMouseOut: () => {
         },
@@ -11566,37 +11566,37 @@ function Eh({
     ) : null
   ] });
 }
-function eh(e, t) {
+function th(e, t) {
   return (n) => (n - e.start) * t / (e.end - e.start);
 }
-function Lh(e, t, n) {
+function Th(e, t, n) {
   const r = n((a) => a.setTrackData), i = n((a) => a.isFetching);
   Ee(() => {
     i || (t.loading ? r(e, { data: null, error: null }) : t.error ? r(e, { data: null, error: t.error.message }) : t.data && r(e, { data: t.data, error: null }));
   }, [t.data, t.loading, t.error, i, e, r]);
 }
 export {
-  yh as Browser,
+  _h as Browser,
   Ot as ClipPath,
-  Eh as Cytobands,
+  Lh as Cytobands,
   Fe as DisplayMode,
-  kh as GQLWrapper,
-  mh as Pastels,
+  Eh as GQLWrapper,
+  vh as Pastels,
   me as TrackType,
-  vh as Vibrant,
-  _h as createBrowserStore,
-  bh as createBrowserStoreMemo,
-  sh as createDataStore,
+  xh as Vibrant,
+  bh as createBrowserStore,
+  wh as createBrowserStoreMemo,
+  ch as createDataStore,
   dc as createDataStoreMemo,
-  wh as createTrackStore,
-  Sh as createTrackStoreMemo,
-  ch as defineBigBedSchema,
-  gh as fetchBigBedUrl,
+  Sh as createTrackStore,
+  kh as createTrackStoreMemo,
+  lh as defineBigBedSchema,
+  mh as fetchBigBedUrl,
   Kl as renderDenseBigBedData,
   Jl as renderSquishBigBedData,
-  gi as useBrowserScale,
+  hi as useBrowserScale,
   fe as useBrowserStore,
-  Lh as useCustomData,
+  Th as useCustomData,
   et as useInteraction,
   di as useMouseToIndex,
   Cr as useRowHeight,