@weng-lab/visualization 2.6.0-beta.1 → 2.7.0-beta.0

package/dist/visualization.es7.js

@@ -1,172 +1,306 @@
-import { jsx as N, jsxs as oe } from "react/jsx-runtime";
-import { useState as G, useMemo as f, useRef as U, useCallback as R } from "react";
-import { ZoomFrame as ce } from "./visualization.es53.js";
-import { RenderTree as re } from "./visualization.es54.js";
-import ie from "./visualization.es48.js";
-import le from "./visualization.es55.js";
-import de from "./visualization.es56.js";
-import ue from "./visualization.es57.js";
-import he from "./visualization.es58.js";
-import S from "./visualization.es59.js";
-import pe from "./visualization.es28.js";
-import me from "./visualization.es60.js";
-import { pathRadialStep as J } from "./visualization.es61.js";
-const we = {
-  duration: 0.3,
-  ease: "easeInOut"
-}, be = () => 1, ge = (t, i, r) => i === 0 ? 0 : t / i * r, Le = (t) => {
-  const i = /-?\d*\.?\d+[eE][+-]?\d+/g;
-  return t.replace(i, (r) => Number(r).toFixed(10).replace(/\.?0+$/, ""));
-}, K = (t) => (i) => {
-  const r = t(i);
-  return r ? Le(r) : "";
-}, Ne = K(J({
-  source: (t) => t.source,
-  target: (t) => t.target,
-  x: (t) => t?.x || 0,
-  y: (t) => t?.y || 0
-})), fe = K(J({
-  source: (t) => t.source,
-  target: (t) => t.target,
-  x: (t) => t?.x || 0,
-  y: (t) => t?.branchLengthScaledRadius || 0
-})), xe = (t, i) => {
-  t = t.replace(/^#/, "");
-  let r = parseInt(t.substring(0, 2), 16), u = parseInt(t.substring(2, 4), 16), h = parseInt(t.substring(4, 6), 16);
-  r = Math.round(r + (255 - r) * i), u = Math.round(u + (255 - u) * i), h = Math.round(h + (255 - h) * i);
-  const b = (x) => x.toString(16).padStart(2, "0");
-  return `#${b(r)}${b(u)}${b(h)}`;
-}, y = 500, Ae = y * 2;
-function De({
-  width: t,
-  height: i,
-  data: r,
-  highlighted: u = [],
-  hovered: h = [],
-  leafFontSize: b = 8,
-  leafFontFamily: x = "Arial",
-  linkStrokeWidth: I = 1,
-  getColor: X = () => "black",
-  getLabel: Q = (v) => v,
-  onBranchClick: E = () => null,
-  onLeafHoverChange: g,
-  labelPadding: V = 135,
-  defaultScaling: C = "scaled",
-  tooltipContents: B,
-  leafOrder: p
-}) {
-  const [v, W] = G(C === "scaled"), [T, _] = G(null), {
-    tooltipData: P,
-    tooltipLeft: ee,
-    tooltipTop: te,
-    showTooltip: k,
-    hideTooltip: w
-  } = ie(), A = f(() => T ? [T, ...h] : h, [T, h]), {
-    TooltipInPortal: se
-  } = le({
-    scroll: !0,
-    detectBounds: !0
-  }), D = U(null), Y = U(!1), j = (c, s) => {
-    D.current = s ? {
-      node: s,
-      x: c.clientX,
-      y: c.clientY
-    } : {
-      node: null,
-      x: 0,
-      y: 0
-    }, Y.current || (Y.current = !0, requestAnimationFrame(() => {
-      const l = D.current, e = l?.node ?? null;
-      _(e ? e.data.id : null), e && !e.children ? k({
-        tooltipData: e.data,
-        tooltipLeft: l.x,
-        tooltipTop: l.y
-      }) : w(), g && g(e ? e.leaves().map((n) => n.data.id) : []), Y.current = !1;
-    }));
-  }, L = Math.max(0, y - V), q = f(() => [2 * Math.PI, L], [L]), $ = f(() => de(r, (s) => s.children).sum((s) => s.children ? 0 : 1).sort((s, l) => {
-    if (p) {
-      const a = new Map(p.map((d, M) => [d, M])), o = (d) => Math.min(...d.leaves().map((M) => a.get(M.data.id) ?? 1 / 0));
-      return o(s) - o(l);
-    }
-    const e = s.leaves().some((a) => a.data.id === "Homo_sapiens"), n = l.leaves().some((a) => a.data.id === "Homo_sapiens");
-    return e !== n ? e ? -1 : 1 : (s.value || 0) - (l.value || 0) || ue(s.data.branch_length ?? void 0, l.data.branch_length ?? void 0);
-  }), [r, X, L, p]), F = f(() => {
-    const c = he();
-    c.size(q), c.separation(be);
-    const s = c($.copy());
-    let l = 0;
-    if (s.each((e) => {
-      e.label = Q(e.data.id);
-    }), s.eachAfter((e) => {
-      if (!e.children)
-        e.color = X(e.data.id);
-      else {
-        const n = e.children.map((d) => d.color), a = e.children[0].color, o = a !== null && n.every((d) => d === a);
-        e.color = o ? a : "#666";
-      }
-    }), s.eachBefore((e) => {
-      const a = (e.parent?.cumulativeBranchLength ?? 0) + (e.data.branch_length ?? 0);
-      a > l && (l = a), e.cumulativeBranchLength = a;
-    }), s.descendants().forEach((e) => {
-      const n = ge(e.cumulativeBranchLength ?? 0, l, L);
-      e.branchLengthScaledRadius = n;
-    }), s.descendants().forEach((e) => {
-      const [n, a] = S(e.x, e.y), [o, d] = S(e.x, e.branchLengthScaledRadius ?? 0);
-      e.baseNodeX = n, e.baseNodeY = a, e.scaledNodeX = o, e.scaledNodeY = d;
-    }), s.descendants().forEach((e) => {
-      const [n, a] = S(e.x, e.y), [o, d] = S(e.x, e.branchLengthScaledRadius ?? 0);
-      e.baseNodeX = n, e.baseNodeY = a, e.scaledNodeX = o, e.scaledNodeY = d;
-    }), s.descendants().forEach((e) => {
-      if (e.parent) {
-        const n = {
-          source: e.parent,
-          target: e
-        }, a = Ne(n), o = fe(n);
-        e.baseLinkPath = a, e.scaledLinkPath = o;
+import { jsxs as X, jsx as I } from "react/jsx-runtime";
+import { useRef as G, useState as v, useEffect as q } from "react";
+import V from "./visualization.es28.js";
+import ye from "./visualization.es29.js";
+import me from "./visualization.es30.js";
+import { useScreenshot as he } from "./visualization.es31.js";
+import pe from "./visualization.es32.js";
+/* empty css                   */
+import ge from "./visualization.es34.js";
+import { Typography as be } from "@mui/material";
+V.use(ye);
+V.use(me(A));
+function A(o, x, S) {
+  const h = document.createElement("div");
+  return document.body.appendChild(h), pe(h, {
+    getReferenceClientRect: o.getBoundingClientRect,
+    trigger: "manual",
+    content: x,
+    arrow: !0,
+    placement: "bottom",
+    hideOnClick: !1,
+    sticky: "reference",
+    interactive: !0,
+    appendTo: document.body,
+    ...S
+  });
+}
+const ve = (o, {
+  name: x = "img",
+  extension: S = "jpg"
+} = {}) => {
+  const h = document.createElement("a");
+  h.href = o, h.download = `${x}.${S}`, h.click();
+}, Ee = (o) => 10 * Math.log(o * 4 + 1), He = ({
+  data: o,
+  title: x,
+  id: S,
+  width: h = "100%",
+  height: Y = "100%",
+  scale: W = Ee,
+  getLabel: F,
+  getColor: u,
+  legendToggle: r,
+  legendNodeLabel: T,
+  legendEdgeLabel: j,
+  order: y,
+  fontFamily: k = "Arial",
+  onNodeClick: P,
+  onEdgeClick: U,
+  directional: _ = !1,
+  scaleLabel: ee
+}) => {
+  const z = G(null), [te] = v(!0), [n, oe] = v([]), [R, ne] = v([]), [$, re] = v([]), [m, ce] = v([]), [E, ae] = v(!0), [w, Z] = v({}), C = /* @__PURE__ */ new Set();
+  r !== void 0 ? (o.node.forEach((e) => {
+    C.add(r(e));
+  }), o.edge.forEach((e) => {
+    e.category && C.add(r(e));
+  })) : (o.node.forEach((e) => {
+    C.add(e.category);
+  }), o.edge.forEach((e) => {
+    e.category && C.add(e.category);
+  }));
+  let M = /* @__PURE__ */ new Set();
+  o.node.forEach((e) => {
+    r && !y ? M.add(r(e)) : M.add(e.category);
+  }), o.edge.forEach((e) => {
+    e.category && r ? M.add(r(e)) : e.category && M.add(e.category);
+  });
+  let O = Array.from(M);
+  y && (O = O.sort((e, c) => y.indexOf(e) - y.indexOf(c)));
+  const J = {};
+  O.forEach((e) => {
+    J[e] = !0;
+  });
+  const D = G(null), [we, K] = he(), se = () => {
+    D.current && typeof K == "function" && K(D.current).then(ve);
+  }, ie = G(null);
+  let N = "cy-" + S;
+  q(() => {
+    oe(o.node), ce(o.edge), ne(o.edge.map((e) => e.effectSize)), re(o.edge.map((e) => r ? r(e) : e.category !== void 0 ? e.category : "Edge")), Z(J);
+  }, [o]);
+  let le = n.map((e) => e.category), H = Array.from(new Set(le));
+  y && (H = H.sort((e, c) => y.indexOf(e) - y.indexOf(c)));
+  const B = n.map((e) => r && !y ? r(e) : e.category), de = n.map((e) => r ? r(e) : e.category), L = (e) => n[e].id;
+  q(() => {
+    if (n.length === 0 || R.length === 0 || $.length === 0 || m.length === 0) return;
+    const e = n.map((t) => t.id);
+    let c = [];
+    for (let t = 0; t < n.length; t++)
+      c.push([]);
+    m.forEach((t) => {
+      const a = e.indexOf(t.from), s = e.indexOf(t.to);
+      a !== -1 && s !== -1 && c[a].push(s);
+    });
+    const f = V({
+      container: document.getElementById(N),
+      style: [{
+        selector: "node",
+        style: {
+          label: "",
+          "font-size": 12
+        }
+      }, {
+        selector: "edge",
+        style: {
+          "line-color": "#ccc",
+          "curve-style": "bezier"
+        }
+      }],
+      minZoom: 0.25,
+      maxZoom: 5
+    });
+    z.current = f, f.ready(() => {
+      f.nodes().forEach((t) => {
+        const s = [30, 70, 110][Math.floor(Math.random() * 3)];
+        t.css("width", s), t.css("height", s);
+      }), f.layout({
+        name: "cose-bilkent",
+        animate: "end",
+        animationDuration: 1e3
+      }).run();
+    });
+    const ue = `data:image/svg+xml;utf8,${encodeURIComponent(`
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="24px" height="24px">
+  <path d="M0 0h24v24H0z" fill="none"/>
+  <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/>
+</svg>
+`)}`;
+    for (var l = 0; l < n.length; l++)
+      w[B[l]] !== !1 && (o?.centered && n[l].id === o.centered.id ? f.add({
+        data: {
+          id: L(l)
+        },
+        // create name
+        position: {
+          // random position
+          x: Math.random() * 1150 + 100,
+          y: Math.random() * 500 + 100
+        },
+        style: {
+          // find color based on CRE
+          "background-color": u ? u(n[l]) : "grey",
+          label: E ? n[l].id : "",
+          fontSize: "12px",
+          borderWidth: "2px",
+          borderColor: "black",
+          fontFamily: k,
+          backgroundFit: "contain",
+          backgroundClip: "none",
+          backgroundImage: `url(${ue})`
+        }
+      }) : f.add({
+        data: {
+          id: L(l)
+        },
+        // create name
+        position: {
+          // random position
+          x: Math.random() * 1150 + 100,
+          y: Math.random() * 500 + 100
+        },
+        style: {
+          // find color based on CRE
+          "background-color": u ? u(n[l]) : "grey",
+          label: E ? F ? F(n[l]) : n[l].id : "",
+          fontSize: "12px",
+          fontFamily: k
+        }
+      }));
+    let p = 0;
+    for (var b = 0; b < n.length; b++)
+      if (w[B[b]] !== !1) {
+        let t = c[b].length;
+        for (let a = 0; a < t; a++) {
+          const s = m[p]?.category;
+          if (w[B[c[b][a]]] !== !1 && (!s || w[$[p]] !== !1)) {
+            let d = o.edge.every((i) => i.category);
+            f.add({
+              data: {
+                id: "edge " + p,
+                source: L(b),
+                target: L(c[b][a]),
+                category: d ? m[p].category : "Edge"
+              },
+              style: {
+                "line-color": u ? u(m[p]) : "grey",
+                "target-arrow-shape": _ ? "triangle" : null,
+                "target-arrow-color": u ? u(m[p]) : "grey",
+                width: W(R[p])
+              }
+            });
+          }
+          p++;
+        }
       }
-    }), s.leaves().forEach((e) => {
-      e.baseLeafLinkExtension = {
-        x1: e.baseNodeX ?? 0,
-        x2: e.baseNodeX ?? 0,
-        y1: e.baseNodeY ?? 0,
-        y2: e.baseNodeY ?? 0
-      }, e.scaledLeafLinkExtension = {
-        x1: e.scaledNodeX ?? 0,
-        x2: e.baseNodeX ?? 0,
-        y1: e.scaledNodeY ?? 0,
-        y2: e.baseNodeY ?? 0
-      }, e.lightenedLinkExtColor = xe(e.color ?? "#000000", 0.7);
-    }), s.each((e) => {
-      const a = !e.children ? u.includes(e.data.id) : e.leaves().some((o) => u.includes(o.data.id));
-      e.linkStrokeWidth = a ? I * 2 : I, e.labelStrokeWidth = a ? 0.7 : 0;
-    }), s.each((e) => {
-      const n = new Set(e.ancestors().map((o) => o.data.id)), a = new Set(e.descendants().map((o) => o.data.id));
-      e.ancestorIds = n, e.descendantIds = a;
-    }), p) {
-      const e = s.leaves().map((m) => m.data.id), n = new Set(e), a = new Set(p), o = p.filter((m) => n.has(m)), d = e.filter((m) => a.has(m));
-      o.some((m, ne) => m !== d[ne]) && console.error(`[PhyloTree] Requested leafOrder is not achievable given the tree topology.
-Requested: ` + o.join(", ") + `
-Achieved:  ` + d.join(", "));
+    return f.nodes().forEach((t, a) => {
+      const s = t.popperRef(), d = document.createElement("div");
+      o?.centered && e[a].toString() === o.centered.id ? d.innerHTML = `ID: ${e[a]}<br>Type: ${r ? r(n[a]) : n[a].category}<br>Centered Node` : d.innerHTML = `ID: ${e[a]}<br>Type: ${r ? r(n[a]) : n[a].category}`, d.style.fontSize = "12px", d.style.fontFamily = k;
+      const i = A(s, d, {});
+      t.on("mouseover", () => {
+        i.show(), document.body.style.cursor = "pointer";
+      }), t.on("click", () => {
+        if (P) {
+          const g = {
+            accession: t.style("label"),
+            start: 0,
+            end: 0,
+            chromosome: ""
+          };
+          P(g);
+        }
+        i.hide(), document.body.style.cursor = "default";
+      }), t.on("mouseout", () => {
+        i.hide(), document.body.style.cursor = "default";
+      });
+    }), f.edges().forEach((t) => {
+      const a = t.popperRef(), s = document.createElement("div");
+      if (o.edge.every((i) => i.category)) {
+        let i = "";
+        m.forEach((g) => {
+          if (r && g.category && t.data("category") && t.data("category") === g.category) {
+            i = r(g);
+            return;
+          } else if (g.category && t.data("category") && t.data("category") === g.category) {
+            i = g.category;
+            return;
+          }
+        }), i.length === 0 ? s.innerHTML = "Edge" : s.innerHTML = `Edge Type: ${i}`;
+      } else
+        s.innerHTML = "Edge";
+      s.style.fontSize = "12px", s.style.fontFamily = k;
+      const d = A(a, s, {});
+      t.on("click", () => {
+        U && U(), d.hide(), document.body.style.cursor = "default";
+      }), t.on("mouseover", () => d.show()), t.on("mouseout", () => d.hide());
+    }), Q(), () => {
+      f.destroy();
+    };
+  }, [n, R, $, m, w]), q(() => {
+    if (!z.current) return;
+    let e = 0;
+    z.current.nodes().forEach((c) => {
+      c.style({
+        label: E ? L(e) : ""
+      }), e++;
+    });
+  }, [E]);
+  const fe = () => {
+    const e = z.current;
+    if (e) {
+      const c = {
+        name: "random",
+        animate: !0,
+        animationDuration: 1e3,
+        animationEasing: "ease-out"
+      };
+      e.layout(c).run();
     }
-    return s;
-  }, [r, q, L, $, u, I, p]), H = R(() => W((c) => !c), []), Z = R((c, s) => {
-    j(c, s), !s.children && k({
-      tooltipData: s.data,
-      tooltipLeft: c.clientX,
-      tooltipTop: c.clientY
-    }), g && g(s.leaves().map((l) => l.data.id));
-  }, []), O = R((c, s) => {
-    j(c, null), w(), g && g([]);
-  }, []), z = f(() => /* @__PURE__ */ N(pe, { top: y, left: y, children: /* @__PURE__ */ N(re, { node: F, hovered: A, leafFontFamily: x, leafFontSize: b, useBranchLengths: v, onNodeMouseMove: Z, onNodeMouseLeave: O, onBranchClick: E }) }), [F, A, x, b, v, Z, O, E]), ae = R((c) => /* @__PURE__ */ N(ce, { zoom: c, totalWidth: t, totalHeight: i, toggleBranchLength: H, children: z }), [t, i, H, z]);
-  return t < 10 ? null : /* @__PURE__ */ oe("div", { children: [
-    /* @__PURE__ */ N(me, { width: t, height: i, scaleXMin: 0.8, scaleXMax: 4, scaleYMin: 0.8, scaleYMax: 4, children: ae }),
-    P && B && /* @__PURE__ */ N(se, { left: ee, top: te, children: B(P.id) })
+  }, Q = () => {
+    const e = z.current, c = {
+      name: "cose-bilkent",
+      animate: "end",
+      animationEasing: "ease-out",
+      animationDuration: 1e3,
+      randomize: !0
+    };
+    e && e.layout(c).run();
+  };
+  return /* @__PURE__ */ X("div", { style: {
+    width: h,
+    height: Y,
+    position: "relative",
+    overflow: "hidden",
+    fontSize: "14px",
+    fontFamily: "helvetica"
+  }, children: [
+    /* @__PURE__ */ I(be, { variant: "h1", style: {
+      marginLeft: "3px",
+      fontSize: "18px",
+      fontWeight: "bold",
+      fontFamily: k
+    }, children: x }),
+    /* @__PURE__ */ X("div", { ref: D, style: {
+      position: "relative"
+    }, children: [
+      /* @__PURE__ */ I("div", { ref: ie, id: N, style: {
+        width: "95%",
+        height: "90vh",
+        zIndex: 999
+      } }),
+      te && /* @__PURE__ */ I("div", { style: {
+        backgroundColor: "white",
+        boxShadow: "0 0 10px rgba(0,0,0,0.5)"
+      }, children: /* @__PURE__ */ I(ge, { toggles: w, onToggle: (e) => {
+        Z((c) => ({
+          ...c,
+          [e]: !c[e]
+        }));
+      }, simpleCategories: de, edgeType: o.edge.every((e) => e.category), elements: n, edges: m, scales: R, scaleWidth: W, downloadScreenshot: se, randomize: fe, organize: Q, toggleLabels: () => ae(!E), labelsOn: E, colorFunc: u, legendToggle: r, legendNodeLabel: T, legendEdgeLabel: j, uniqueCat: y ? H : void 0, scaleLabel: ee }) })
+    ] })
   ] });
-}
+};
 export {
-  Ae as TOTAL_INNER_DIAMETER,
-  y as TOTAL_INNER_RADIUS,
-  De as default,
-  we as useBranchLengthTransition
+  He as default
 };
 //# sourceMappingURL=visualization.es7.js.map

package/dist/visualization.es7.js.map

@@ -1 +1 @@
-{"version":3,"file":"visualization.es7.js","sources":["../src/components/PhyloTree/PhyloTree.tsx"],"sourcesContent":["import { useMemo, useState, useCallback, useRef, useEffect } from \"react\";\nimport { Group } from \"@visx/group\";\nimport { ascending } from \"@visx/vendor/d3-array\";\nimport { pathRadialStep } from \"@visx/shape\";\nimport { cluster as d3cluster, hierarchy as d3hierarchy } from \"d3-hierarchy\";\nimport { PhyloTreeProps, TreeItem, TreeLink, TreeNode, ZoomState } from \"./types\";\nimport { useTooltip, defaultStyles, useTooltipInPortal } from \"@visx/tooltip\";\nimport { Zoom, ProvidedZoom } from \"@visx/zoom\";\nimport { ZoomFrame } from \"./ZoomFrame\";\nimport { pointRadial } from \"d3-shape\";\nimport { RenderTree } from \"./RenderTree\";\n\n/**\n * Improvements that would make this scale better (as much as svg can):\n * - Combine links into fewer path elements\n *    - Requires having static hit detecting paths, but can create fewer <path> elements by combining link paths\n *    - Creates less work for the browser to update fewer, but more complex paths\n *    - Would need base branches grouped by color, selection path, external highlight path, and invisible static hit target paths for branch selection\n * - Remove hover interaction and opt for click only interactions\n * - If keeping hover behavior, define gapless areas between nodes to prevent -> hover NodeA, hover null, hover NodeB in favor of NodeA -> NodeB\n * - Define single hit area that takes in click event and determines what was hit\n */\n\nexport const useBranchLengthTransition = {\n  duration: 0.3,\n  ease: \"easeInOut\",\n} as const;\n\n// Keep spacing of all leaf nodes consistent\nconst separationFn = () => 1;\n\nconst getBranchLengthScaledY = (cumulativeBranchLength: number, maxBranchLength: number, innerRadius: number) => {\n  return maxBranchLength === 0 ? 0 : (cumulativeBranchLength / maxBranchLength) * innerRadius;\n};\n\n// Framer motion had issues with e notation\nconst rmSciNotation = (pathString: string) => {\n  // Regex to match scientific notation:\n  // optional sign, digits/dots, 'e' or 'E', optional sign, and exponent digits\n  const scientificRegex = /-?\\d*\\.?\\d+[eE][+-]?\\d+/g;\n\n  return pathString.replace(scientificRegex, (match) => {\n    // Convert the match to a Number and then back to a decimal string\n    const num = Number(match);\n\n    // Use toFixed() to ensure no new scientific notation is generated\n    // 10 decimal places is usually enough for SVG precision\n    return num.toFixed(10).replace(/\\.?0+$/, \"\");\n  });\n};\n\nconst withNoSciNotation =\n  <L extends TreeLink>(generator: (link: L) => string | null) =>\n  (link: L) => {\n    const path = generator(link);\n    return path ? rmSciNotation(path) : \"\";\n  };\n\nconst getLinkPath = withNoSciNotation(\n  pathRadialStep<TreeLink, TreeNode>({\n    source: (l) => l.source,\n    target: (l) => l.target,\n    x: (n) => n?.x || 0,\n    y: (n) => n?.y || 0,\n  })\n);\n\nconst getScaledLinkPath = withNoSciNotation(\n  pathRadialStep<TreeLink, TreeNode>({\n    source: (l) => l.source,\n    target: (l) => l.target,\n    x: (n) => n?.x || 0,\n    y: (n) => n?.branchLengthScaledRadius || 0,\n  })\n);\n\n/**\n * Lightens a hex color by blending it with white.\n * @param {string} hex - The input color, e.g. \"#336699\"\n * @param {number} factor - How much to lighten: 0 = no change, 1 = full white\n * @returns {string} - The lightened hex color\n */\nconst lightenHex = (hex: string, factor: number) => {\n  // Remove leading \"#\" if present\n  hex = hex.replace(/^#/, '');\n\n  // Parse r, g, b\n  let r = parseInt(hex.substring(0, 2), 16);\n  let g = parseInt(hex.substring(2, 4), 16);\n  let b = parseInt(hex.substring(4, 6), 16);\n\n  // Blend each channel toward 255 (white)\n  r = Math.round(r + (255 - r) * factor);\n  g = Math.round(g + (255 - g) * factor);\n  b = Math.round(b + (255 - b) * factor);\n\n  // Convert back to hex and pad with zeros\n  const toHex = (c: number) => c.toString(16).padStart(2, '0');\n  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;\n}\n\n/**\n * For internal svg calculation only\n */\nexport const TOTAL_INNER_RADIUS = 500;\n/**\n * For internal svg calculation only (used to define viewbox in ZoomFrame)\n */\nexport const TOTAL_INNER_DIAMETER = TOTAL_INNER_RADIUS * 2;\n\nexport default function PhyloTree({\n  width: totalWidth,\n  height: totalHeight,\n  data,\n  highlighted = [],\n  hovered: externalHovered = [],\n  leafFontSize = 8,\n  leafFontFamily = \"Arial\",\n  linkStrokeWidth = 1,\n  getColor = () => \"black\",\n  getLabel = (id) => id,\n  onBranchClick = () => null,\n  onLeafHoverChange,\n  labelPadding = 135,\n  defaultScaling = \"scaled\",\n  tooltipContents,\n  leafOrder,\n}: PhyloTreeProps) {\n  const [enableBranchLengths, setEnableBranchLengths] = useState<boolean>(defaultScaling === \"scaled\");\n\n  const [internalHovered, setInternalHovered] = useState<string | null>(null)\n  const { tooltipData, tooltipLeft, tooltipTop, tooltipOpen, showTooltip, hideTooltip } = useTooltip<TreeItem>();\n\n  const hovered = useMemo(\n    () => (internalHovered ? [internalHovered, ...externalHovered] : externalHovered),\n    [internalHovered, externalHovered]\n  );\n\n  const { TooltipInPortal } = useTooltipInPortal({\n    scroll: true,\n    detectBounds: true,\n  });\n\n  interface PendingHover {\n    node: TreeNode | null;\n    x: number;\n    y: number;\n  }\n\n  const pendingRef = useRef<PendingHover | null>(null);\n  const frameRef = useRef(false);\n\n  /**\n   * Prevents hover updates more frequently than the browser can repaint by using requestAnimationFrame\n   */\n  const handleDebounceHover = (event: React.MouseEvent, node: TreeNode | null) => {\n    pendingRef.current = node \n      ? { node, x: event.clientX, y: event.clientY }\n      : { node: null, x: 0, y: 0 };\n\n    if (!frameRef.current) {\n      frameRef.current = true;\n\n      requestAnimationFrame(() => {\n        // Everything comes from the ref now — consistent snapshot\n        const pending = pendingRef.current;\n        const pendingNode = pending?.node ?? null;\n\n        setInternalHovered(pendingNode ? pendingNode.data.id : null);\n\n        if (pendingNode && !pendingNode.children) {\n          showTooltip({\n            tooltipData: pendingNode.data,\n            tooltipLeft: pending!.x,\n            tooltipTop: pending!.y,\n          });\n        } else {\n          hideTooltip();\n        }\n\n        if (onLeafHoverChange) {\n          onLeafHoverChange(\n            pendingNode ? pendingNode.leaves().map((leaf) => leaf.data.id) : []\n          );\n        }\n\n        frameRef.current = false;\n      });\n    }\n  };\n\n  const circleRadius = Math.max(0, TOTAL_INNER_RADIUS - labelPadding);\n\n  // This defines the arbitrary x/y coordinate system. For our radial layout X is the angle defined in radians, Y is radius. https://d3js.org/d3-hierarchy/cluster#cluster_size\n  const size: [number, number] = useMemo(() => [2 * Math.PI, circleRadius], [circleRadius]);\n\n  /* Construct root node */\n  const root = useMemo(() => {\n    const r = d3hierarchy(data, (d) => d.children)\n      // sorts first by least number of children, and then by branch length to create nice looking plot\n      .sum((d) => (d.children ? 0 : 1))\n      .sort((a, b) => {\n        if (leafOrder) {\n          const indexMap = new Map(leafOrder.map((id, i) => [id, i]));\n          const minIdx = (node: typeof a) =>\n            Math.min(...node.leaves().map((l) => indexMap.get(l.data.id) ?? Infinity));\n          return minIdx(a) - minIdx(b);\n        }\n\n        // Float the Homo_sapiens subtree to the end so it appears at the top\n        const aHasHuman = a.leaves().some((l) => l.data.id === \"Homo_sapiens\");\n        const bHasHuman = b.leaves().some((l) => l.data.id === \"Homo_sapiens\");\n        if (aHasHuman !== bHasHuman) return aHasHuman ? -1 : 1;\n\n        return (\n          (a.value || 0) - (b.value || 0) ||\n          ascending(a.data.branch_length ?? undefined, b.data.branch_length ?? undefined)\n        );\n      });\n    return r;\n  }, [data, getColor, circleRadius, leafOrder]);\n\n  /* Add layout/render properties */\n  const rootNode = useMemo(() => {\n    const clusterLayout = d3cluster<TreeItem>();\n    clusterLayout.size(size);\n    clusterLayout.separation(separationFn);\n    //copy root node so that the reference changes when this useMemo is rerun. Otherwise is modifying in place\n    const clusterRoot: TreeNode = clusterLayout(root.copy());\n\n    let maxBranchLength = 0;\n\n    clusterRoot.each((node) => {\n      node.label = getLabel(node.data.id)\n    })\n\n    // uniformLeafColor\n    clusterRoot.eachAfter((node) => {\n      //This node is visited after all of it's descendents. Allows us to look at immediate children to see if they have same color.\n      //For leaf nodes, there will be no children, so assign the color AND assign light\n      if (!node.children) {\n        node.color = getColor(node.data.id);\n      } else {\n        const childColors = node.children.map((x) => x.color);\n        const firstColor = node.children[0].color;\n        const allSame = firstColor !== null && childColors.every((color) => color === firstColor);\n        node.color = allSame ? firstColor : \"#666\";\n      }\n    });\n\n    // cumulativeBranchLength\n    clusterRoot.eachBefore((node) => {\n      const parentLen = node.parent?.cumulativeBranchLength ?? 0;\n      const cumulativeBranchLength = parentLen + (node.data.branch_length ?? 0);\n\n      if (cumulativeBranchLength > maxBranchLength) {\n        maxBranchLength = cumulativeBranchLength;\n      }\n      \n      node.cumulativeBranchLength = cumulativeBranchLength;\n    });\n    \n    // Add BranchLengthScaledRadius. Must come after cumulativeBranchLength\n    clusterRoot.descendants().forEach((node) => {\n      const branchLengthScaledRadius = getBranchLengthScaledY(\n        node.cumulativeBranchLength ?? 0,\n        maxBranchLength,\n        circleRadius\n      );\n\n      node.branchLengthScaledRadius = branchLengthScaledRadius;\n    })\n\n    // Base/Scaled X/Y. Must come after branchLengthScaledRadius assignment\n    clusterRoot.descendants().forEach((node) => {\n      const [baseNodeX, baseNodeY] = pointRadial(node.x, node.y);\n      const [scaledNodeX, scaledNodeY] = pointRadial(node.x, node.branchLengthScaledRadius ?? 0);\n\n      node.baseNodeX = baseNodeX;\n      node.baseNodeY = baseNodeY;\n      node.scaledNodeX = scaledNodeX;\n      node.scaledNodeY = scaledNodeY;\n    });\n\n    // Base/Scaled X/Y. Must come after branchLengthScaledRadius assignment\n    clusterRoot.descendants().forEach((node) => {\n      const [baseNodeX, baseNodeY] = pointRadial(node.x, node.y);\n      const [scaledNodeX, scaledNodeY] = pointRadial(node.x, node.branchLengthScaledRadius ?? 0);\n\n      node.baseNodeX = baseNodeX;\n      node.baseNodeY = baseNodeY;\n      node.scaledNodeX = scaledNodeX;\n      node.scaledNodeY = scaledNodeY;\n    });\n    \n    //Link Path gen must come after the above assignment of branchLengthScaledRadius\n    clusterRoot.descendants().forEach((node) => {\n      if (node.parent) {\n        const link = { source: node.parent, target: node };\n\n        const baseLinkPath = getLinkPath(link);\n        const scaledLinkPath = getScaledLinkPath(link);\n\n        node.baseLinkPath = baseLinkPath;\n        node.scaledLinkPath = scaledLinkPath;\n      }\n    });\n\n    clusterRoot.leaves().forEach((leaf) => {\n      leaf.baseLeafLinkExtension = {\n        x1: leaf.baseNodeX ?? 0,\n        x2: leaf.baseNodeX ?? 0,\n        y1: leaf.baseNodeY ?? 0,\n        y2: leaf.baseNodeY ?? 0,\n      };\n      leaf.scaledLeafLinkExtension = {\n        x1: leaf.scaledNodeX ?? 0,\n        x2: leaf.baseNodeX ?? 0,\n        y1: leaf.scaledNodeY ?? 0,\n        y2: leaf.baseNodeY ?? 0,\n      };\n      leaf.lightenedLinkExtColor = lightenHex(leaf.color ?? \"#000000\", 0.7);\n    })\n\n    // Highlighted state\n    clusterRoot.each((node) => {\n      //probably could do this more efficiently with .eachAfter\n      const isLeaf = !node.children\n      const isHighlighted = isLeaf ? highlighted.includes(node.data.id) : node.leaves().some(leaf => highlighted.includes(leaf.data.id))\n\n      node.linkStrokeWidth = isHighlighted ? linkStrokeWidth * 2 : linkStrokeWidth\n      node.labelStrokeWidth = isHighlighted ? 0.7 : 0\n    })\n    //Add ancestors and descendant IDs for faster static lookup on hover rerender\n    clusterRoot.each((node) => {\n      const ancestorIds = new Set(node.ancestors().map(node => node.data.id))\n      const descendantIds = new Set(node.descendants().map(node => node.data.id))\n      \n\n      node.ancestorIds = ancestorIds\n      node.descendantIds = descendantIds\n    })\n\n    if (leafOrder) {\n      const achievedOrder = clusterRoot.leaves().map((l) => l.data.id);\n      const treeLeafSet = new Set(achievedOrder);\n      const leafOrderSet = new Set(leafOrder);\n      const requestedFiltered = leafOrder.filter((id) => treeLeafSet.has(id));\n      const achievedFiltered = achievedOrder.filter((id) => leafOrderSet.has(id));\n      const mismatch = requestedFiltered.some((id, i) => id !== achievedFiltered[i]);\n      if (mismatch) {\n        console.error(\n          \"[PhyloTree] Requested leafOrder is not achievable given the tree topology.\\n\" +\n          \"Requested: \" + requestedFiltered.join(\", \") + \"\\n\" +\n          \"Achieved:  \" + achievedFiltered.join(\", \")\n        );\n      }\n    }\n\n    return clusterRoot;\n  }, [data, size, circleRadius, root, highlighted, linkStrokeWidth, leafOrder]);\n\n  const toggleBranchLength = useCallback(() => setEnableBranchLengths((prev) => !prev), []);\n\n  const handleLeafOnMouseMove = useCallback((event: React.MouseEvent<Element, MouseEvent>, node: TreeNode) => {\n    handleDebounceHover(event, node)\n    !node.children && showTooltip({\n      tooltipData: node.data,\n      tooltipLeft: event.clientX,\n      tooltipTop: event.clientY,\n    });\n    if (onLeafHoverChange) {\n      onLeafHoverChange(node.leaves().map(leaf => leaf.data.id))\n    }\n  }, []);\n\n  const handleLeafOnMouseLeave = useCallback((event: React.MouseEvent<Element, MouseEvent>, node: TreeNode) => {\n    handleDebounceHover(event, null)\n    hideTooltip();\n    if (onLeafHoverChange) {\n      onLeafHoverChange([])\n    }\n  }, []);\n\n  const treeContent = useMemo(() => {\n    return (\n      <Group top={TOTAL_INNER_RADIUS} left={TOTAL_INNER_RADIUS}>\n        <RenderTree\n          node={rootNode}\n          hovered={hovered}\n          leafFontFamily={leafFontFamily}\n          leafFontSize={leafFontSize}\n          useBranchLengths={enableBranchLengths}\n          onNodeMouseMove={handleLeafOnMouseMove}\n          onNodeMouseLeave={handleLeafOnMouseLeave}\n          onBranchClick={onBranchClick}\n        />\n      </Group>\n    );\n  }, [\n    rootNode,\n    hovered,\n    leafFontFamily,\n    leafFontSize,\n    enableBranchLengths,\n    handleLeafOnMouseMove,\n    handleLeafOnMouseLeave,\n    onBranchClick,\n  ]);\n\n  const renderTreeInZoom = useCallback(\n    (zoom: ProvidedZoom<SVGSVGElement> & ZoomState) => {\n      return (\n        <ZoomFrame\n          zoom={zoom}\n          totalWidth={totalWidth}\n          totalHeight={totalHeight}\n          toggleBranchLength={toggleBranchLength}\n        >\n          {treeContent}\n        </ZoomFrame>\n      );\n    },\n    [totalWidth, totalHeight, toggleBranchLength, treeContent]\n  );\n\n  return totalWidth < 10 ? null : (\n    <div>\n      <Zoom<SVGSVGElement>\n        width={totalWidth}\n        height={totalHeight}\n        scaleXMin={0.8}\n        scaleXMax={4}\n        scaleYMin={0.8}\n        scaleYMax={4}\n      >\n        {renderTreeInZoom}\n      </Zoom>\n      {tooltipData && tooltipContents && (\n        <TooltipInPortal left={tooltipLeft} top={tooltipTop}>\n          {tooltipContents(tooltipData.id)}\n        </TooltipInPortal>\n      )}\n    </div>\n  );\n}\n"],"names":["useBranchLengthTransition","duration","ease","separationFn","getBranchLengthScaledY","cumulativeBranchLength","maxBranchLength","innerRadius","rmSciNotation","pathString","scientificRegex","replace","match","Number","toFixed","withNoSciNotation","generator","link","path","getLinkPath","pathRadialStep","source","l","target","x","n","y","getScaledLinkPath","branchLengthScaledRadius","lightenHex","hex","factor","r","parseInt","substring","g","b","Math","round","toHex","c","toString","padStart","TOTAL_INNER_RADIUS","TOTAL_INNER_DIAMETER","PhyloTree","width","totalWidth","height","totalHeight","data","highlighted","hovered","externalHovered","leafFontSize","leafFontFamily","linkStrokeWidth","getColor","getLabel","id","onBranchClick","onLeafHoverChange","labelPadding","defaultScaling","tooltipContents","leafOrder","enableBranchLengths","setEnableBranchLengths","useState","internalHovered","setInternalHovered","tooltipData","tooltipLeft","tooltipTop","showTooltip","hideTooltip","useTooltip","useMemo","TooltipInPortal","useTooltipInPortal","scroll","detectBounds","pendingRef","useRef","frameRef","handleDebounceHover","event","node","current","clientX","clientY","requestAnimationFrame","pending","pendingNode","children","leaves","map","leaf","circleRadius","max","size","PI","root","d3hierarchy","d","sum","sort","a","indexMap","Map","i","minIdx","min","get","Infinity","aHasHuman","some","bHasHuman","value","ascending","branch_length","undefined","rootNode","clusterLayout","d3cluster","separation","clusterRoot","copy","each","label","eachAfter","color","childColors","firstColor","allSame","every","eachBefore","parent","descendants","forEach","baseNodeX","baseNodeY","pointRadial","scaledNodeX","scaledNodeY","baseLinkPath","scaledLinkPath","baseLeafLinkExtension","x1","x2","y1","y2","scaledLeafLinkExtension","lightenedLinkExtColor","isHighlighted","includes","labelStrokeWidth","ancestorIds","Set","ancestors","descendantIds","achievedOrder","treeLeafSet","leafOrderSet","requestedFiltered","filter","has","achievedFiltered","console","error","join","toggleBranchLength","useCallback","prev","handleLeafOnMouseMove","handleLeafOnMouseLeave","treeContent","jsx","Group","RenderTree","renderTreeInZoom","zoom","ZoomFrame","jsxs","Zoom"],"mappings":"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"}
+{"version":3,"file":"visualization.es7.js","sources":["../src/components/Graph/Graph.tsx"],"sourcesContent":["import React, { useRef, useEffect, useState } from 'react';\nimport cytoscape, { Core, EdgeSingular, NodeSingular } from 'cytoscape';\nimport coseBilkent from 'cytoscape-cose-bilkent';\nimport cytoscapePopper from 'cytoscape-popper';\nimport { useScreenshot } from 'use-react-screenshot';\nimport { GraphProps, Node, Edge } from './types';\nimport tippy, { Instance, Props } from 'tippy.js';\nimport 'tippy.js/dist/tippy.css';\n\nimport ControlPanel from './ControlPanel';\nimport { Typography } from '@mui/material';\n\ncytoscape.use(coseBilkent);\ncytoscape.use(cytoscapePopper(popperFactory));\n\nfunction popperFactory(\n  ref: any,\n  content: string | HTMLElement,\n  opts?: Partial<Props>\n): Instance<Props> {\n  const dummyDomElem = document.createElement('div');\n  document.body.appendChild(dummyDomElem);\n  return tippy(dummyDomElem, {\n    getReferenceClientRect: ref.getBoundingClientRect,\n    trigger: 'manual',\n    content: content,\n    arrow: true,\n    placement: 'bottom',\n    hideOnClick: false,\n    sticky: 'reference',\n    interactive: true,\n    appendTo: document.body,\n    ...opts,\n  });\n}\n\nconst download = (image: string, { name = 'img', extension = 'jpg' } = {}) => {\n  const a = document.createElement('a');\n  a.href = image;\n  a.download = `${name}.${extension}`;\n  a.click();\n};\n\nconst defaultScale = (n: number) => 10 * Math.log(n * 4 + 1);\n\nconst Graph: React.FC<GraphProps> = ({\n  data,\n  title,\n  id,\n  width = '100%',\n  height = '100%',\n  scale = defaultScale,\n  getLabel,\n  getColor,\n  legendToggle,\n  legendNodeLabel,\n  legendEdgeLabel,\n  order,\n  fontFamily = 'Arial',\n  onNodeClick,\n  onEdgeClick,\n  directional = false,\n  scaleLabel,\n}) => {\n  const cyRef = useRef<Core | null>(null);\n\n  // state hooks\n  const [showControls] = useState(true);\n  const [elements, setElements] = useState<Node[]>([]);\n  const [scales, setScales] = useState<number[]>([]);\n  const [edgeTypes, setEdgeTypes] = useState<string[]>([]);\n  const [edges, setEdges] = useState<Edge[]>([]);\n  const [showLabels, setShowLabels] = useState(true);\n  const [toggles, setToggles] = useState<{ [key: string]: boolean }>({});\n\n  // unique categories for legend toggles or the node / edge categories\n  const uniqueCategories = new Set<string>();\n\n  if (legendToggle !== undefined) {\n    data.node.forEach((node) => {\n      uniqueCategories.add(legendToggle(node));\n    });\n\n    data.edge.forEach((edge) => {\n      if (edge.category) {\n        uniqueCategories.add(legendToggle(edge));\n      }\n    });\n  } else {\n    data.node.forEach((node) => {\n      uniqueCategories.add(node.category);\n    });\n\n    data.edge.forEach((edge) => {\n      if (edge.category) {\n        uniqueCategories.add(edge.category);\n      }\n    });\n  }\n\n  let allCategories = new Set<string>(); // holds all unique categories of nodes based on legendToggle and order\n  data.node.forEach((node) => {\n    if (legendToggle && !order) {\n      allCategories.add(legendToggle(node)); // simple legend name\n    } else {\n      allCategories.add(node.category); // node category\n    }\n  });\n  data.edge.forEach((edge) => {\n    if (edge.category && legendToggle) {\n      allCategories.add(legendToggle(edge));\n    } else if (edge.category) {\n      allCategories.add(edge.category);\n    }\n  });\n\n  let orderedCategories = Array.from(allCategories);\n\n  if (order) {\n    orderedCategories = orderedCategories.sort(\n      (a, b) => order.indexOf(a) - order.indexOf(b)\n    );\n  }\n\n  const initialToggles: { [key: string]: boolean } = {};\n  orderedCategories.forEach((category) => {\n    initialToggles[category] = true;\n  });\n\n  // DOWNLOAD SCREENSHOT\n  const ref = useRef<HTMLDivElement>(null);\n  const [_, takeScreenShot] = useScreenshot();\n\n  const downloadScreenshot = () => {\n    if (ref.current && typeof takeScreenShot === 'function') {\n      takeScreenShot(ref.current).then(download);\n    }\n  };\n\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  // each graph needs a unique id\n  let k = 'cy-' + id;\n\n  useEffect(() => {\n    setElements(data.node);\n    setEdges(data.edge);\n    setScales(data.edge.map((e: Edge) => e.effectSize));\n    setEdgeTypes(\n      data.edge.map((e) => {\n        if (legendToggle) return legendToggle(e);\n        if (e.category !== undefined) return e.category;\n        return 'Edge';\n      })\n    );\n    setToggles(initialToggles);\n  }, [data]);\n\n  let elem = elements.map((e) => e.category);\n  let unique = Array.from(new Set(elem)); // holds unique node categories only\n\n  if (order) {\n    unique = unique.sort((a, b) => order.indexOf(a) - order.indexOf(b));\n  }\n\n  const simple: string[] = elements.map((e) => {\n    // used for toggles\n    if (legendToggle && !order) return legendToggle(e);\n    else {\n      return e.category;\n    }\n  });\n  const simpleCat: string[] = elements.map((e) => {\n    // used for legend calculations\n    if (legendToggle) return legendToggle(e);\n    else {\n      return e.category;\n    }\n  });\n\n  const createID = (index: number): string => elements[index].id;\n  useEffect(() => {\n    if (\n      elements.length === 0 ||\n      scales.length === 0 ||\n      edgeTypes.length === 0 ||\n      edges.length === 0\n    )\n      return;\n\n    const allcCREs: string[] = elements.map((e) => e.id);\n\n    let connect: number[][] = [];\n    for (let i = 0; i < elements.length; i++) {\n      connect.push([]); // does not work with Array.fill\n    }\n\n    // connect holds all the connections between nodes\n    // connect[0] holds the TARGET node INDICES for the FIRST node\n    edges.forEach((e) => {\n      const fromIndex = allcCREs.indexOf(e.from);\n      const toIndex = allcCREs.indexOf(e.to);\n\n      if (fromIndex !== -1 && toIndex !== -1) {\n        connect[fromIndex].push(toIndex);\n      }\n    });\n    const cy = cytoscape({\n      container: document.getElementById(k),\n      style: [\n        {\n          selector: 'node',\n          style: {\n            label: '',\n            'font-size': 12,\n          },\n        },\n        {\n          selector: 'edge',\n          style: {\n            'line-color': '#ccc',\n            'curve-style': 'bezier',\n          },\n        },\n      ],\n      minZoom: 0.25,\n      maxZoom: 5,\n    });\n\n    cyRef.current = cy; // save Cytoscape instance to ref\n\n    cy.ready(() => {\n      cy.nodes().forEach((node: NodeSingular) => {\n        const width = [30, 70, 110];\n        const size = width[Math.floor(Math.random() * 3)];\n        node.css('width', size);\n        node.css('height', size);\n      });\n\n      cy.layout({\n        name: 'cose-bilkent',\n        animate: 'end',\n        animationDuration: 1000,\n      } as any).run();\n    });\n\n    const starSVG = `\n<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"black\" width=\"24px\" height=\"24px\">\n  <path d=\"M0 0h24v24H0z\" fill=\"none\"/>\n  <path d=\"M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\"/>\n</svg>\n`;\n    const starSVGURL = `data:image/svg+xml;utf8,${encodeURIComponent(starSVG)}`;\n\n    // ADD NODES\n    for (var i = 0; i < elements.length; i++) {\n      if (toggles[simple[i]] !== false) {\n        if (data?.centered && elements[i].id === data.centered.id) {\n          // if centered node\n          cy.add({\n            data: { id: createID(i) }, // create name\n            position: {\n              // random position\n              x: Math.random() * (1250 - 100) + 100,\n              y: Math.random() * (600 - 100) + 100,\n            },\n            style: {\n              // find color based on CRE\n              'background-color': getColor ? getColor(elements[i]) : 'grey',\n              label: showLabels ? elements[i].id : '',\n              fontSize: '12px',\n              borderWidth: '2px',\n              borderColor: 'black',\n              fontFamily: fontFamily,\n              backgroundFit: 'contain',\n              backgroundClip: 'none',\n              backgroundImage: `url(${starSVGURL})`,\n            },\n          });\n        } else {\n          cy.add({\n            data: { id: createID(i) }, // create name\n            position: {\n              // random position\n              x: Math.random() * (1250 - 100) + 100,\n              y: Math.random() * (600 - 100) + 100,\n            },\n            style: {\n              // find color based on CRE\n              'background-color': getColor ? getColor(elements[i]) : 'grey',\n              label: showLabels\n                ? getLabel\n                  ? getLabel(elements[i])\n                  : elements[i].id\n                : '',\n              fontSize: '12px',\n              fontFamily: fontFamily,\n            },\n          });\n        }\n      }\n    }\n\n    // ADD EDGES\n    let edgeCount = 0;\n\n    for (var j = 0; j < elements.length; j++) {\n      // add # of edges per node based on the target connections\n      if (toggles[simple[j]] !== false) {\n        let len = connect[j].length;\n        for (let s = 0; s < len; s++) {\n          const edgeCategory = edges[edgeCount]?.category;\n\n          if (\n            toggles[simple[connect[j][s]]] !== false &&\n            (edgeCategory ? toggles[edgeTypes[edgeCount]] !== false : true)\n          ) {\n            let c = data.edge.every((e) => e.category);\n            cy.add({\n              data: {\n                id: 'edge ' + edgeCount,\n                source: createID(j),\n                target: createID(connect[j][s]),\n                category: c ? edges[edgeCount].category : 'Edge',\n              },\n              style: {\n                'line-color': getColor ? getColor(edges[edgeCount]) : 'grey',\n                'target-arrow-shape': directional ? 'triangle' : null,\n                'target-arrow-color': getColor\n                  ? getColor(edges[edgeCount])\n                  : 'grey',\n                width: scale(scales[edgeCount]),\n              },\n            });\n          }\n          edgeCount++;\n        }\n      }\n    }\n\n    // TOOLTIP NODES\n    cy.nodes().forEach((node: NodeSingular, idx: number) => {\n      const ref = node.popperRef();\n      const content = document.createElement('div');\n      if (data?.centered && allcCREs[idx].toString() === data.centered.id) {\n        content.innerHTML = `ID: ${allcCREs[idx]}<br>Type: ${\n          legendToggle ? legendToggle(elements[idx]) : elements[idx].category\n        }<br>Centered Node`;\n      } else {\n        content.innerHTML = `ID: ${allcCREs[idx]}<br>Type: ${\n          legendToggle ? legendToggle(elements[idx]) : elements[idx].category\n        }`;\n      }\n\n      content.style.fontSize = '12px';\n      content.style.fontFamily = fontFamily;\n      const tip = popperFactory(ref, content, {});\n\n      node.on('mouseover', () => {\n        tip.show();\n        document.body.style.cursor = 'pointer';\n      });\n\n      node.on('click', () => {\n        if (onNodeClick) {\n          const c = {\n            accession: node.style('label'),\n            start: 0,\n            end: 0,\n            chromosome: '',\n          };\n          onNodeClick(c);\n        }\n\n        tip.hide();\n        document.body.style.cursor = 'default';\n      });\n\n      node.on('mouseout', () => {\n        tip.hide();\n        document.body.style.cursor = 'default';\n      });\n    });\n\n    // TOOLTIP EDGES\n    cy.edges().forEach((edge: EdgeSingular) => {\n      const ref = edge.popperRef();\n      const content = document.createElement('div');\n\n      if (data.edge.every((e) => e.category)) {\n        let c = '';\n        edges.forEach((e) => {\n          if (\n            legendToggle &&\n            e.category &&\n            edge.data('category') &&\n            edge.data('category') === e.category\n          ) {\n            c = legendToggle(e);\n            return;\n          } else if (\n            e.category &&\n            edge.data('category') &&\n            edge.data('category') === e.category\n          ) {\n            c = e.category;\n            return;\n          }\n        });\n\n        if (c.length === 0) {\n          content.innerHTML = `Edge`;\n        } else {\n          content.innerHTML = `Edge Type: ${c}`;\n        }\n      } else {\n        content.innerHTML = `Edge`;\n      }\n\n      content.style.fontSize = '12px';\n      content.style.fontFamily = fontFamily;\n      const tip = popperFactory(ref, content, {});\n      edge.on('click', () => {\n        if (onEdgeClick) {\n          onEdgeClick();\n        }\n\n        tip.hide();\n        document.body.style.cursor = 'default';\n      });\n\n      edge.on('mouseover', () => tip.show());\n      edge.on('mouseout', () => tip.hide());\n    });\n\n    organize();\n\n    return () => {\n      cy.destroy();\n    };\n  }, [elements, scales, edgeTypes, edges, toggles]);\n\n  // toggle labels\n  useEffect(() => {\n    if (!cyRef.current) return;\n    let ind = 0;\n\n    cyRef.current.nodes().forEach((node) => {\n      node.style({\n        label: showLabels ? createID(ind) : '',\n      });\n      ind++;\n    });\n  }, [showLabels]);\n\n  // RANDOMIZE\n  const randomize = () => {\n    const cy = cyRef.current;\n    if (cy) {\n      const options = {\n        name: 'random',\n        animate: true,\n        animationDuration: 1000,\n        animationEasing: 'ease-out',\n      } as any;\n      cy.layout(options).run();\n    }\n  };\n\n  // ORGANIZE\n  const organize = () => {\n    const cy = cyRef.current;\n    const options = {\n      name: 'cose-bilkent',\n      animate: 'end',\n      animationEasing: 'ease-out',\n      animationDuration: 1000,\n      randomize: true,\n    } as any;\n    if (cy) {\n      cy.layout(options).run();\n    }\n  };\n\n  // TOGGLE CATEGORIES\n  const handleToggle = (category: string) => {\n    setToggles((prevToggles) => ({\n      ...prevToggles,\n      [category]: !prevToggles[category],\n    }));\n  };\n\n  return (\n    <div\n      style={{\n        width: width,\n        height: height,\n        position: 'relative',\n        overflow: 'hidden',\n        fontSize: '14px',\n        fontFamily: 'helvetica',\n      }}\n    >\n      <Typography\n        variant=\"h1\"\n        style={{\n          marginLeft: '3px',\n          fontSize: '18px',\n          fontWeight: 'bold',\n          fontFamily: fontFamily,\n        }}\n      >\n        {title}\n      </Typography>\n\n      <div\n        ref={ref}\n        style={{\n          position: 'relative',\n        }}\n      >\n        <div\n          ref={containerRef}\n          id={k}\n          style={{\n            width: '95%',\n            height: '90vh',\n            zIndex: 999,\n          }}\n        ></div>\n\n        {showControls && (\n          <div\n            style={{\n              backgroundColor: 'white',\n              boxShadow: '0 0 10px rgba(0,0,0,0.5)',\n            }}\n          >\n            <ControlPanel\n              toggles={toggles}\n              onToggle={handleToggle}\n              simpleCategories={simpleCat}\n              edgeType={data.edge.every((e) => e.category)}\n              elements={elements}\n              edges={edges}\n              scales={scales}\n              scaleWidth={scale}\n              downloadScreenshot={downloadScreenshot}\n              randomize={randomize}\n              organize={organize}\n              toggleLabels={() => setShowLabels(!showLabels)}\n              labelsOn={showLabels}\n              colorFunc={getColor}\n              legendToggle={legendToggle}\n              legendNodeLabel={legendNodeLabel}\n              legendEdgeLabel={legendEdgeLabel}\n              uniqueCat={order ? unique : undefined}\n              scaleLabel={scaleLabel}\n            />\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport default Graph;\n"],"names":["cytoscape","use","coseBilkent","cytoscapePopper","popperFactory","ref","content","opts","dummyDomElem","document","createElement","body","appendChild","tippy","getReferenceClientRect","getBoundingClientRect","trigger","arrow","placement","hideOnClick","sticky","interactive","appendTo","download","image","name","extension","a","href","click","defaultScale","n","Math","log","Graph","data","title","id","width","height","scale","getLabel","getColor","legendToggle","legendNodeLabel","legendEdgeLabel","order","fontFamily","onNodeClick","onEdgeClick","directional","scaleLabel","cyRef","useRef","showControls","useState","elements","setElements","scales","setScales","edgeTypes","setEdgeTypes","edges","setEdges","showLabels","setShowLabels","toggles","setToggles","uniqueCategories","Set","undefined","node","forEach","add","edge","category","allCategories","orderedCategories","Array","from","sort","b","indexOf","initialToggles","_","takeScreenShot","useScreenshot","downloadScreenshot","current","then","containerRef","k","useEffect","map","e","effectSize","elem","unique","simple","simpleCat","createID","index","length","allcCREs","connect","i","push","fromIndex","toIndex","to","cy","container","getElementById","style","selector","label","minZoom","maxZoom","ready","nodes","size","floor","random","css","layout","animate","animationDuration","run","starSVGURL","encodeURIComponent","centered","position","x","y","fontSize","borderWidth","borderColor","backgroundFit","backgroundClip","backgroundImage","edgeCount","j","len","s","edgeCategory","c","every","source","target","idx","popperRef","toString","innerHTML","tip","on","show","cursor","accession","start","end","chromosome","hide","organize","destroy","ind","randomize","options","animationEasing","jsxs","overflow","jsx","Typography","marginLeft","fontWeight","zIndex","backgroundColor","boxShadow","ControlPanel","handleToggle","prevToggles"],"mappings":"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"}