@weng-lab/visualization 2.2.2 → 2.3.1

package/dist/visualization.es4.js

@@ -1,99 +1,99 @@
-import { j as w } from "./visualization.es18.js";
-import { useRef as G, useState as E, useEffect as j } from "react";
-import A from "./visualization.es44.js";
-import me from "./visualization.es45.js";
-import ye from "./visualization.es46.js";
-import { useScreenshot as he } from "./visualization.es47.js";
-import pe from "./visualization.es48.js";
+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.es78.js";
+import ye from "./visualization.es79.js";
+import me from "./visualization.es80.js";
+import { useScreenshot as he } from "./visualization.es81.js";
+import pe from "./visualization.es82.js";
 /* empty css                   */
-import ge from "./visualization.es50.js";
+import ge from "./visualization.es84.js";
 import { Typography as be } from "@mui/material";
-A.use(me);
-A.use(ye(q));
-function q(o, S, k) {
+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: S,
+    content: x,
     arrow: !0,
     placement: "bottom",
     hideOnClick: !1,
     sticky: "reference",
     interactive: !0,
     appendTo: document.body,
-    ...k
+    ...S
   });
 }
-const Ee = (o, {
-  name: S = "img",
-  extension: k = "jpg"
+const ve = (o, {
+  name: x = "img",
+  extension: S = "jpg"
 } = {}) => {
   const h = document.createElement("a");
-  h.href = o, h.download = `${S}.${k}`, h.click();
-}, ve = (o) => 10 * Math.log(o * 4 + 1), De = ({
+  h.href = o, h.download = `${x}.${S}`, h.click();
+}, Ee = (o) => 10 * Math.log(o * 4 + 1), He = ({
   data: o,
-  title: S,
-  id: k,
+  title: x,
+  id: S,
   width: h = "100%",
-  height: Q = "100%",
-  scale: V = ve,
-  getLabel: W,
+  height: Y = "100%",
+  scale: W = Ee,
+  getLabel: F,
   getColor: u,
-  legendToggle: n,
-  legendNodeLabel: X,
-  legendEdgeLabel: Y,
-  order: m,
-  fontFamily: z = "Arial",
-  onNodeClick: F,
-  onEdgeClick: P,
-  directional: T = !1,
-  scaleLabel: _
+  legendToggle: r,
+  legendNodeLabel: T,
+  legendEdgeLabel: j,
+  order: y,
+  fontFamily: k = "Arial",
+  onNodeClick: P,
+  onEdgeClick: U,
+  directional: _ = !1,
+  scaleLabel: ee
 }) => {
-  const M = G(null), [ee] = E(!0), [r, te] = E([]), [C, oe] = E([]), [$, re] = E([]), [y, ne] = E([]), [v, ce] = E(!0), [x, U] = E({}), I = /* @__PURE__ */ new Set();
-  n !== void 0 ? (o.node.forEach((e) => {
-    I.add(n(e));
+  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 && I.add(n(e));
+    e.category && C.add(r(e));
   })) : (o.node.forEach((e) => {
-    I.add(e.category);
+    C.add(e.category);
   }), o.edge.forEach((e) => {
-    e.category && I.add(e.category);
+    e.category && C.add(e.category);
   }));
-  let L = /* @__PURE__ */ new Set();
+  let M = /* @__PURE__ */ new Set();
   o.node.forEach((e) => {
-    n && !m ? L.add(n(e)) : L.add(e.category);
+    r && !y ? M.add(r(e)) : M.add(e.category);
   }), o.edge.forEach((e) => {
-    e.category && n ? L.add(n(e)) : e.category && L.add(e.category);
+    e.category && r ? M.add(r(e)) : e.category && M.add(e.category);
   });
-  let O = Array.from(L);
-  m && (O = O.sort((e, c) => m.indexOf(e) - m.indexOf(c)));
-  const Z = {};
+  let O = Array.from(M);
+  y && (O = O.sort((e, c) => y.indexOf(e) - y.indexOf(c)));
+  const J = {};
   O.forEach((e) => {
-    Z[e] = !0;
+    J[e] = !0;
   });
-  const D = G(null), [xe, J] = he(), se = () => {
-    D.current && typeof J == "function" && J(D.current).then(Ee);
-  }, ae = G(null);
-  let K = "cy-" + k;
-  j(() => {
-    te(o.node), ne(o.edge), oe(o.edge.map((e) => e.effectSize)), re(o.edge.map((e) => n ? n(e) : e.category !== void 0 ? e.category : "Edge")), U(Z);
+  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 ie = r.map((e) => e.category), H = Array.from(new Set(ie));
-  m && (H = H.sort((e, c) => m.indexOf(e) - m.indexOf(c)));
-  const B = r.map((e) => n && !m ? n(e) : e.category), le = r.map((e) => n ? n(e) : e.category), R = (e) => r[e].id;
-  j(() => {
-    if (r.length === 0 || C.length === 0 || $.length === 0 || y.length === 0) return;
-    const e = r.map((t) => t.id);
+  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 < r.length; t++)
+    for (let t = 0; t < n.length; t++)
       c.push([]);
-    y.forEach((t) => {
-      const s = e.indexOf(t.from), a = e.indexOf(t.to);
-      s !== -1 && a !== -1 && c[s].push(a);
+    m.forEach((t) => {
+      const a = e.indexOf(t.from), s = e.indexOf(t.to);
+      a !== -1 && s !== -1 && c[a].push(s);
     });
-    const f = A({
-      container: document.getElementById(K),
+    const f = V({
+      container: document.getElementById(N),
       style: [{
         selector: "node",
         style: {
@@ -110,10 +110,10 @@ const Ee = (o, {
       minZoom: 0.25,
       maxZoom: 5
     });
-    M.current = f, f.ready(() => {
+    z.current = f, f.ready(() => {
       f.nodes().forEach((t) => {
-        const a = [30, 70, 110][Math.floor(Math.random() * 3)];
-        t.css("width", a), t.css("height", a);
+        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",
@@ -126,10 +126,10 @@ const Ee = (o, {
   <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 < r.length; l++)
-      x[B[l]] !== !1 && (o?.centered && r[l].id === o.centered.id ? f.add({
+    for (var l = 0; l < n.length; l++)
+      w[B[l]] !== !1 && (o?.centered && n[l].id === o.centered.id ? f.add({
         data: {
-          id: R(l)
+          id: L(l)
         },
         // create name
         position: {
@@ -139,19 +139,19 @@ const Ee = (o, {
         },
         style: {
           // find color based on CRE
-          "background-color": u ? u(r[l]) : "grey",
-          label: v ? r[l].id : "",
+          "background-color": u ? u(n[l]) : "grey",
+          label: E ? n[l].id : "",
           fontSize: "12px",
           borderWidth: "2px",
           borderColor: "black",
-          fontFamily: z,
+          fontFamily: k,
           backgroundFit: "contain",
           backgroundClip: "none",
           backgroundImage: `url(${ue})`
         }
       }) : f.add({
         data: {
-          id: R(l)
+          id: L(l)
         },
         // create name
         position: {
@@ -161,92 +161,92 @@ const Ee = (o, {
         },
         style: {
           // find color based on CRE
-          "background-color": u ? u(r[l]) : "grey",
-          label: v ? W ? W(r[l]) : r[l].id : "",
+          "background-color": u ? u(n[l]) : "grey",
+          label: E ? F ? F(n[l]) : n[l].id : "",
           fontSize: "12px",
-          fontFamily: z
+          fontFamily: k
         }
       }));
     let p = 0;
-    for (var b = 0; b < r.length; b++)
-      if (x[B[b]] !== !1) {
+    for (var b = 0; b < n.length; b++)
+      if (w[B[b]] !== !1) {
         let t = c[b].length;
-        for (let s = 0; s < t; s++) {
-          const a = y[p]?.category;
-          if (x[B[c[b][s]]] !== !1 && (!a || x[$[p]] !== !1)) {
+        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: R(b),
-                target: R(c[b][s]),
-                category: d ? y[p].category : "Edge"
+                source: L(b),
+                target: L(c[b][a]),
+                category: d ? m[p].category : "Edge"
               },
               style: {
-                "line-color": u ? u(y[p]) : "grey",
-                "target-arrow-shape": T ? "triangle" : null,
-                "target-arrow-color": u ? u(y[p]) : "grey",
-                width: V(C[p])
+                "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++;
         }
       }
-    return f.nodes().forEach((t, s) => {
-      const a = t.popperRef(), d = document.createElement("div");
-      o?.centered && e[s].toString() === o.centered.id ? d.innerHTML = `ID: ${e[s]}<br>Type: ${n ? n(r[s]) : r[s].category}<br>Centered Node` : d.innerHTML = `ID: ${e[s]}<br>Type: ${n ? n(r[s]) : r[s].category}`, d.style.fontSize = "12px", d.style.fontFamily = z;
-      const i = q(a, d, {});
+    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 (F) {
+        if (P) {
           const g = {
             accession: t.style("label"),
             start: 0,
             end: 0,
             chromosome: ""
           };
-          F(g);
+          P(g);
         }
         i.hide(), document.body.style.cursor = "default";
       }), t.on("mouseout", () => {
         i.hide(), document.body.style.cursor = "default";
       });
     }), f.edges().forEach((t) => {
-      const s = t.popperRef(), a = document.createElement("div");
+      const a = t.popperRef(), s = document.createElement("div");
       if (o.edge.every((i) => i.category)) {
         let i = "";
-        y.forEach((g) => {
-          if (n && g.category && t.data("category") && t.data("category") === g.category) {
-            i = n(g);
+        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 ? a.innerHTML = "Edge" : a.innerHTML = `Edge Type: ${i}`;
+        }), i.length === 0 ? s.innerHTML = "Edge" : s.innerHTML = `Edge Type: ${i}`;
       } else
-        a.innerHTML = "Edge";
-      a.style.fontSize = "12px", a.style.fontFamily = z;
-      const d = q(s, a, {});
+        s.innerHTML = "Edge";
+      s.style.fontSize = "12px", s.style.fontFamily = k;
+      const d = A(a, s, {});
       t.on("click", () => {
-        P && P(), d.hide(), document.body.style.cursor = "default";
+        U && U(), d.hide(), document.body.style.cursor = "default";
       }), t.on("mouseover", () => d.show()), t.on("mouseout", () => d.hide());
-    }), N(), () => {
+    }), Q(), () => {
       f.destroy();
     };
-  }, [r, C, $, y, x]), j(() => {
-    if (!M.current) return;
+  }, [n, R, $, m, w]), q(() => {
+    if (!z.current) return;
     let e = 0;
-    M.current.nodes().forEach((c) => {
+    z.current.nodes().forEach((c) => {
       c.style({
-        label: v ? R(e) : ""
+        label: E ? L(e) : ""
       }), e++;
     });
-  }, [v]);
-  const de = () => {
-    const e = M.current;
+  }, [E]);
+  const fe = () => {
+    const e = z.current;
     if (e) {
       const c = {
         name: "random",
@@ -256,8 +256,8 @@ const Ee = (o, {
       };
       e.layout(c).run();
     }
-  }, N = () => {
-    const e = M.current, c = {
+  }, Q = () => {
+    const e = z.current, c = {
       name: "cose-bilkent",
       animate: "end",
       animationEasing: "ease-out",
@@ -265,42 +265,42 @@ const Ee = (o, {
       randomize: !0
     };
     e && e.layout(c).run();
-  }, fe = (e) => {
-    U((c) => ({
-      ...c,
-      [e]: !c[e]
-    }));
   };
-  return /* @__PURE__ */ w.jsxs("div", { style: {
+  return /* @__PURE__ */ X("div", { style: {
     width: h,
-    height: Q,
+    height: Y,
     position: "relative",
     overflow: "hidden",
     fontSize: "14px",
     fontFamily: "helvetica"
   }, children: [
-    /* @__PURE__ */ w.jsx(be, { variant: "h1", style: {
+    /* @__PURE__ */ I(be, { variant: "h1", style: {
       marginLeft: "3px",
       fontSize: "18px",
       fontWeight: "bold",
-      fontFamily: z
-    }, children: S }),
-    /* @__PURE__ */ w.jsxs("div", { ref: D, style: {
+      fontFamily: k
+    }, children: x }),
+    /* @__PURE__ */ X("div", { ref: D, style: {
       position: "relative"
     }, children: [
-      /* @__PURE__ */ w.jsx("div", { ref: ae, id: K, style: {
+      /* @__PURE__ */ I("div", { ref: ie, id: N, style: {
         width: "95%",
         height: "90vh",
         zIndex: 999
       } }),
-      ee && /* @__PURE__ */ w.jsx("div", { style: {
+      te && /* @__PURE__ */ I("div", { style: {
         backgroundColor: "white",
         boxShadow: "0 0 10px rgba(0,0,0,0.5)"
-      }, children: /* @__PURE__ */ w.jsx(ge, { toggles: x, onToggle: fe, simpleCategories: le, edgeType: o.edge.every((e) => e.category), elements: r, edges: y, scales: C, scaleWidth: V, downloadScreenshot: se, randomize: de, organize: N, toggleLabels: () => ce(!v), labelsOn: v, colorFunc: u, legendToggle: n, legendNodeLabel: X, legendEdgeLabel: Y, uniqueCat: m ? H : void 0, scaleLabel: _ }) })
+      }, 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 {
-  De as default
+  He as default
 };
 //# sourceMappingURL=visualization.es4.js.map

package/dist/visualization.es4.js.map

@@ -1 +1 @@
-{"version":3,"file":"visualization.es4.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","handleToggle","prevToggles","jsxs","overflow","jsx","Typography","marginLeft","fontWeight","zIndex","backgroundColor","boxShadow","ControlPanel"],"mappings":"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"}
+{"version":3,"file":"visualization.es4.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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"}

package/dist/visualization.es40.js

@@ -1,24 +1,34 @@
-import { c as p } from "./visualization.es32.js";
-import { useState as l } from "react";
-const f = (i) => {
-  const t = p.c(3), {
-    initialOpen: s
-  } = i, [n, r] = l(s);
-  let e;
-  t[0] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (e = () => {
-    r(m);
-  }, t[0] = e) : e = t[0];
-  const c = e;
-  let o;
-  return t[1] !== n ? (o = {
-    showMiniMap: n,
-    toggleMiniMap: c
-  }, t[1] = n, t[2] = o) : o = t[2], o;
-};
-function m(i) {
-  return !i;
+import S from "./visualization.es38.js";
+import g from "./visualization.es36.js";
+var k = (1 + Math.sqrt(5)) / 2;
+function D(w, d, i, a, l, f) {
+  for (var p = [], t = d.children, v, u, q = 0, r = 0, M = t.length, m, c, o = d.value, e, h, s, V, R, b, n; q < M; ) {
+    m = l - i, c = f - a;
+    do
+      e = t[r++].value;
+    while (!e && r < M);
+    for (h = s = e, b = Math.max(c / m, m / c) / (o * w), n = e * e * b, R = Math.max(s / n, n / h); r < M; ++r) {
+      if (e += u = t[r].value, u < h && (h = u), u > s && (s = u), n = e * e * b, V = Math.max(s / n, n / h), V > R) {
+        e -= u;
+        break;
+      }
+      R = V;
+    }
+    p.push(v = { value: e, dice: m < c, children: t.slice(q, r) }), v.dice ? S(v, i, a, l, o ? a += c * e / o : f) : g(v, i, a, o ? i += m * e / o : l, f), o -= e, q = r;
+  }
+  return p;
 }
+const A = (function w(d) {
+  function i(a, l, f, p, t) {
+    D(d, a, l, f, p, t);
+  }
+  return i.ratio = function(a) {
+    return w((a = +a) > 1 ? a : 1);
+  }, i;
+})(k);
 export {
-  f as useMiniMapToggle
+  A as default,
+  k as phi,
+  D as squarifyRatio
 };
 //# sourceMappingURL=visualization.es40.js.map