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

package/dist/visualization.es4.js

@@ -1,306 +1,93 @@
-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.es41.js";
-import ye from "./visualization.es42.js";
-import me from "./visualization.es43.js";
-import { useScreenshot as he } from "./visualization.es44.js";
-import pe from "./visualization.es45.js";
-/* empty css                   */
-import ge from "./visualization.es47.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++;
-        }
+import { jsx as o, jsxs as y, Fragment as $ } from "react/jsx-runtime";
+import { c as q } from "react/compiler-runtime";
+import E from "@mui/icons-material/Tune";
+import { Button as P, Tooltip as D, IconButton as G, Badge as H, Stack as F, Typography as L, Popover as J } from "@mui/material";
+import { useState as K } from "react";
+import { sameRange as M, formatRange as N } from "./visualization.es21.js";
+import Q from "./visualization.es84.js";
+import U from "./visualization.es85.js";
+const re = (f) => {
+  const e = q(35), {
+    label: z,
+    notes: h,
+    onOpen: R,
+    onClose: j,
+    ...t
+  } = f;
+  let g;
+  e[0] !== h ? (g = h === void 0 ? [] : h, e[0] = h, e[1] = g) : g = e[1];
+  const m = g, [p, A] = K(null), u = !M(t.range, t.defaultRange), b = z ? "right" : "left";
+  let v;
+  e[2] !== R ? (v = (W) => {
+    A(W.currentTarget), R?.();
+  }, e[2] = R, e[3] = v) : v = e[3];
+  const O = v;
+  let x;
+  e[4] !== j ? (x = () => {
+    A(null), j?.();
+  }, e[4] = j, e[5] = x) : x = e[5];
+  const w = x, I = z ? /* @__PURE__ */ o(P, { size: "small", variant: "outlined", color: u ? "primary" : "inherit", startIcon: /* @__PURE__ */ o(E, { fontSize: "small" }), onClick: O, "aria-haspopup": "dialog", sx: {
+    flexShrink: 0,
+    whiteSpace: "nowrap",
+    bgcolor: "background.paper",
+    borderColor: u ? void 0 : "divider"
+  }, children: /* @__PURE__ */ y("span", { children: [
+    z,
+    " ",
+    /* @__PURE__ */ o(U, { text: N(t.kind, t.range, t.format), hold: p !== null })
+  ] }) }) : /* @__PURE__ */ o(D, { title: "Adjust the color range", disableInteractive: !0, children: /* @__PURE__ */ o(G, { size: "small", onClick: O, "aria-label": "Adjust the color range", "aria-haspopup": "dialog", sx: {
+    flexShrink: 0
+  }, children: /* @__PURE__ */ o(H, { variant: "dot", color: "primary", invisible: !u, children: /* @__PURE__ */ o(E, { fontSize: "small" }) }) }) }), T = p !== null;
+  let l, n;
+  e[6] !== b ? (l = {
+    vertical: "bottom",
+    horizontal: b
+  }, n = {
+    vertical: "top",
+    horizontal: b
+  }, e[6] = b, e[7] = l, e[8] = n) : (l = e[7], n = e[8]);
+  let C;
+  e[9] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (C = {
+    paper: {
+      sx: {
+        p: 2,
+        mt: 0.5
       }
-    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();
     }
-  }, 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 }) })
-    ] })
-  ] });
+  }, e[9] = C) : C = e[9];
+  const _ = m.length ? 0.5 : 1;
+  let S;
+  e[10] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (S = /* @__PURE__ */ o(L, { variant: "subtitle2", children: "Color range" }), e[10] = S) : S = e[10];
+  const B = !u;
+  let r;
+  e[11] !== t ? (r = () => t.onChange(t.defaultRange), e[11] = t, e[12] = r) : r = e[12];
+  let i;
+  e[13] !== B || e[14] !== r ? (i = /* @__PURE__ */ o(P, { size: "small", disabled: B, onClick: r, children: "Reset" }), e[13] = B, e[14] = r, e[15] = i) : i = e[15];
+  let a;
+  e[16] !== _ || e[17] !== i ? (a = /* @__PURE__ */ y(F, { direction: "row", alignItems: "center", justifyContent: "space-between", mb: _, children: [
+    S,
+    i
+  ] }), e[16] = _, e[17] = i, e[18] = a) : a = e[18];
+  let s;
+  e[19] !== m ? (s = m.length > 0 && /* @__PURE__ */ o(F, { gap: 0.5, mb: 1.5, width: 0, minWidth: "100%", children: m.map(V) }), e[19] = m, e[20] = s) : s = e[20];
+  let c;
+  e[21] !== t ? (c = /* @__PURE__ */ o(Q, { ...t }), e[21] = t, e[22] = c) : c = e[22];
+  let d;
+  e[23] !== p || e[24] !== w || e[25] !== a || e[26] !== s || e[27] !== c || e[28] !== T || e[29] !== l || e[30] !== n ? (d = /* @__PURE__ */ y(J, { open: T, anchorEl: p, onClose: w, disableScrollLock: !0, anchorOrigin: l, transformOrigin: n, slotProps: C, children: [
+    a,
+    s,
+    c
+  ] }), e[23] = p, e[24] = w, e[25] = a, e[26] = s, e[27] = c, e[28] = T, e[29] = l, e[30] = n, e[31] = d) : d = e[31];
+  let k;
+  return e[32] !== d || e[33] !== I ? (k = /* @__PURE__ */ y($, { children: [
+    I,
+    d
+  ] }), e[32] = d, e[33] = I, e[34] = k) : k = e[34], k;
 };
+function V(f) {
+  return /* @__PURE__ */ o(L, { variant: "caption", color: "text.secondary", component: "p", children: f }, f);
+}
 export {
-  He as default
+  re 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","jsxs","overflow","jsx","Typography","marginLeft","fontWeight","zIndex","backgroundColor","boxShadow","ControlPanel","handleToggle","prevToggles"],"mappings":"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"}
+{"version":3,"file":"visualization.es4.js","sources":["../src/components/Legend/ColorRange/ColorRangeButton.tsx"],"sourcesContent":["import TuneIcon from \"@mui/icons-material/Tune\";\nimport { Badge, Button, IconButton, Popover, Stack, Tooltip, Typography } from \"@mui/material\";\nimport { useState, type MouseEvent } from \"react\";\nimport { formatRange, sameRange, type ColorRange, type RangePreset } from \"../colorbarAxis\";\nimport ColorRangeEditor, { type ColorRangeEditorProps } from \"./ColorRangeEditor\";\nimport SteadyText from \"./SteadyText\";\n\n/** What moving a colorbar's range needs beyond what the colorbar already has. */\nexport type ColorRangeControl = {\n  defaultRange: ColorRange;\n  /** The lowest and highest value there is, shown or not: how far the editor's bar reaches. The ends of the colorbar's values by default. */\n  extent?: ColorRange;\n  /** Ranges offered in one click. By default ±2, ±3, ±5, ±10 for a diverging scale, the middle 90–98% otherwise. */\n  presets?: RangePreset[];\n  /** Fired on every step of a drag, and for a preset or a reset. */\n  onChange: (range: ColorRange) => void;\n  /** Fired as the editor closes, so a range kept somewhere costly to write, like the URL, is written once. */\n  onClose?: () => void;\n};\n\nexport type ColorRangeButtonProps = ColorRangeEditorProps & {\n  /**\n   * What the scale is and where it starts, one paragraph each: a log transform, why the default range\n   * is what it is. Shown above the editor.\n   */\n  notes?: readonly string[];\n  /** Written on the button before the range, so \"Colors\" reads \"Colors ±3.0\". The icon alone where omitted. */\n  label?: string;\n  /** Fired as the editor opens. */\n  onOpen?: () => void;\n  /** Fired as the editor closes, so a range kept somewhere costly to write, like the URL, is written once. */\n  onClose?: () => void;\n};\n\n/**\n * Opens the color range editor, kept off the legend where handles would crowd the bar and catch the\n * cursor mid-sweep. A dot on the icon, or the button's color, says the range has been moved.\n */\nconst ColorRangeButton = ({ label, notes = [], onOpen, onClose, ...editor }: ColorRangeButtonProps) => {\n  const [anchor, setAnchor] = useState<HTMLElement | null>(null);\n  const adjusted = !sameRange(editor.range, editor.defaultRange);\n  const side = label ? \"right\" : \"left\";\n  const open = (event: MouseEvent<HTMLElement>) => {\n    setAnchor(event.currentTarget);\n    onOpen?.();\n  };\n  const close = () => {\n    setAnchor(null);\n    onClose?.();\n  };\n\n  return (\n    <>\n      {label ? (\n        <Button\n          size=\"small\"\n          variant=\"outlined\"\n          color={adjusted ? \"primary\" : \"inherit\"}\n          startIcon={<TuneIcon fontSize=\"small\" />}\n          onClick={open}\n          aria-haspopup=\"dialog\"\n          sx={{\n            flexShrink: 0,\n            whiteSpace: \"nowrap\",\n            bgcolor: \"background.paper\",\n            borderColor: adjusted ? undefined : \"divider\",\n          }}\n        >\n          {/* One span, so the space after the label survives the button's flexbox. */}\n          <span>\n            {label} {/* Held while the editor is open, so the button, and the panel anchored to it, hold still. */}\n            <SteadyText text={formatRange(editor.kind, editor.range, editor.format)} hold={anchor !== null} />\n          </span>\n        </Button>\n      ) : (\n        <Tooltip title=\"Adjust the color range\" disableInteractive>\n          <IconButton\n            size=\"small\"\n            onClick={open}\n            aria-label=\"Adjust the color range\"\n            aria-haspopup=\"dialog\"\n            sx={{ flexShrink: 0 }}\n          >\n            <Badge variant=\"dot\" color=\"primary\" invisible={!adjusted}>\n              <TuneIcon fontSize=\"small\" />\n            </Badge>\n          </IconButton>\n        </Tooltip>\n      )}\n      <Popover\n        open={anchor !== null}\n        anchorEl={anchor}\n        onClose={close}\n        // Leaves the page its scrollbar, which the lock swaps for a blank strip; the panel follows its\n        // button when the page scrolls instead.\n        disableScrollLock\n        anchorOrigin={{ vertical: \"bottom\", horizontal: side }}\n        transformOrigin={{ vertical: \"top\", horizontal: side }}\n        slotProps={{ paper: { sx: { p: 2, mt: 0.5 } } }}\n      >\n        <Stack direction=\"row\" alignItems=\"center\" justifyContent=\"space-between\" mb={notes.length ? 0.5 : 1}>\n          <Typography variant=\"subtitle2\">Color range</Typography>\n          <Button size=\"small\" disabled={!adjusted} onClick={() => editor.onChange(editor.defaultRange)}>\n            Reset\n          </Button>\n        </Stack>\n        {/* As wide as the editor, so a long note wraps rather than widening the panel. */}\n        {notes.length > 0 && (\n          <Stack gap={0.5} mb={1.5} width={0} minWidth=\"100%\">\n            {notes.map((note) => (\n              <Typography key={note} variant=\"caption\" color=\"text.secondary\" component=\"p\">\n                {note}\n              </Typography>\n            ))}\n          </Stack>\n        )}\n        <ColorRangeEditor {...editor} />\n      </Popover>\n    </>\n  );\n};\n\nexport default ColorRangeButton;\n"],"names":["ColorRangeButton","t0","$","_c","label","notes","t1","onOpen","onClose","editor","t2","undefined","anchor","setAnchor","useState","adjusted","sameRange","range","defaultRange","side","t3","event","currentTarget","open","t4","close","t5","jsx","Button","TuneIcon","flexShrink","whiteSpace","bgcolor","borderColor","SteadyText","formatRange","kind","format","Tooltip","IconButton","Badge","t6","t7","t8","vertical","horizontal","t9","Symbol","for","paper","sx","p","mt","t10","length","t11","Typography","t12","t13","onChange","t14","t15","jsxs","Stack","t16","map","_temp","t17","ColorRangeEditor","t18","Popover","t19","note"],"mappings":"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"}

package/dist/visualization.es40.js

@@ -1,84 +1,8 @@
-import { c as j } from "react/compiler-runtime";
-import { useState as w, useRef as k, useEffect as z } from "react";
-import { invertRescaled as q } from "./visualization.es18.js";
-import { useStableCallback as B } from "./visualization.es20.js";
-import D from "./visualization.es78.js";
-const O = (E) => {
-  const e = j(23), {
-    enabled: C,
-    margin: l,
-    boundedWidth: g,
-    boundedHeight: x,
-    xScale: y,
-    yScale: R,
-    onCrosshairChange: H
-  } = E, [S, L] = w(null), F = k(null), n = B(H), s = k(null), o = k(null);
-  let u;
-  e[0] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (u = () => {
-    s.current !== null && (cancelAnimationFrame(s.current), s.current = null);
-  }, e[0] = u) : u = e[0];
-  const P = u;
-  let c;
-  e[1] !== n ? (c = (t) => {
-    F.current = t, L(t), n(t);
-  }, e[1] = n, e[2] = c) : c = e[2];
-  const i = c;
-  let a;
-  e[3] !== i ? (a = (t) => {
-    if (t === null) {
-      if (P(), o.current = null, F.current === null)
-        return;
-      i(null);
-      return;
-    }
-    o.current = t, s.current === null && (s.current = requestAnimationFrame(() => {
-      s.current = null;
-      const b = o.current;
-      o.current = null, b && i(b);
-    }));
-  }, e[3] = i, e[4] = a) : a = e[4];
-  const r = a;
-  let f, m;
-  e[5] !== n ? (f = () => () => {
-    P(), F.current !== null && n(null);
-  }, m = [P, n], e[5] = n, e[6] = f, e[7] = m) : (f = e[6], m = e[7]), z(f, m);
-  let h;
-  e[8] !== x || e[9] !== g || e[10] !== C || e[11] !== l.left || e[12] !== l.top || e[13] !== r || e[14] !== y || e[15] !== R ? (h = (t, b) => {
-    if (!C)
-      return;
-    const v = D(t.currentTarget, t);
-    if (!v)
-      return;
-    const A = v.x - l.left, M = v.y - l.top;
-    if (A < 0 || A > g || M < 0 || M > x) {
-      r(null);
-      return;
-    }
-    const {
-      translateX: T,
-      translateY: W,
-      scaleX: _,
-      scaleY: $
-    } = b.transformMatrix;
-    r({
-      x: q(y, T, _, A),
-      y: q(R, W, $, M)
-    });
-  }, e[8] = x, e[9] = g, e[10] = C, e[11] = l.left, e[12] = l.top, e[13] = r, e[14] = y, e[15] = R, e[16] = h) : h = e[16];
-  const X = h;
-  let p;
-  e[17] !== r ? (p = () => {
-    r(null);
-  }, e[17] = r, e[18] = p) : p = e[18];
-  const Y = p;
-  let d;
-  return e[19] !== S || e[20] !== Y || e[21] !== X ? (d = {
-    crosshairPosition: S,
-    handleCrosshairMove: X,
-    handleCrosshairLeave: Y
-  }, e[19] = S, e[20] = Y, e[21] = X, e[22] = d) : d = e[22], d;
-};
+function h(l, u, a, d, o) {
+  for (var i = l.children, e, n = -1, v = i.length, c = l.value && (o - a) / l.value; ++n < v; )
+    e = i[n], e.x0 = u, e.x1 = d, e.y0 = a, e.y1 = a += e.value * c;
+}
 export {
-  O as useCrosshair
+  h as default
 };
 //# sourceMappingURL=visualization.es40.js.map

package/dist/visualization.es40.js.map

@@ -1 +1 @@
-{"version":3,"file":"visualization.es40.js","sources":["../src/components/ScatterPlot/hooks/useCrosshair.ts"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from \"react\";\nimport { localPoint } from \"@visx/event\";\nimport { ScaleLinear } from \"@visx/vendor/d3-scale\";\nimport { CrosshairPosition, ZoomType } from \"../types\";\nimport { invertRescaled } from \"../helpers\";\nimport { useStableCallback } from \"../../../hooks\";\n\ntype UseCrosshairProps = {\n    enabled: boolean;\n    margin: { top: number; left: number };\n    boundedWidth: number;\n    boundedHeight: number;\n    xScale: ScaleLinear<number, number, never>;\n    yScale: ScaleLinear<number, number, never>;\n    onCrosshairChange?: (position: CrosshairPosition | null) => void;\n};\n\n/**\n * Tracks the pointer as a crosshair position in data coordinates.\n *\n * Data coordinates rather than pixels because the position is also published to consumers, who\n * may mirror it onto another plot or feed it back in as a controlled position. Keeping one\n * currency means every plot showing this crosshair resolves it through its own scales and so\n * agrees with the others, even mid-zoom.\n *\n * The zoom transform arrives as an argument rather than a hook input because it only exists\n * inside the Zoom render prop, below where this hook is called.\n *\n * Moves are coalesced to one update per animation frame. A mouse can report positions faster\n * than the browser paints, and mousemove is a continuous event that React flushes synchronously,\n * so publishing every one of them - into this state and, through onCrosshairChange, into a\n * parent shared by several plots - re-renders the whole group without ever yielding, and React\n * eventually warns about the update depth. Leaving is published immediately: it ends the\n * gesture, and a frame queued behind it would put the crosshair back.\n */\nexport const useCrosshair = ({\n    enabled,\n    margin,\n    boundedWidth,\n    boundedHeight,\n    xScale,\n    yScale,\n    onCrosshairChange,\n}: UseCrosshairProps) => {\n    const [crosshairPosition, setCrosshairPosition] = useState<CrosshairPosition | null>(null);\n    const publishedRef = useRef<CrosshairPosition | null>(null);\n    const publishChange = useStableCallback(onCrosshairChange);\n\n    const frameRef = useRef<number | null>(null);\n    const pendingRef = useRef<CrosshairPosition | null>(null);\n\n    const cancelFrame = useCallback(() => {\n        if (frameRef.current === null) return;\n        cancelAnimationFrame(frameRef.current);\n        frameRef.current = null;\n    }, []);\n\n    const apply = useCallback((position: CrosshairPosition | null) => {\n        publishedRef.current = position;\n        setCrosshairPosition(position);\n        publishChange(position);\n    }, [publishChange]);\n\n    const publish = useCallback((position: CrosshairPosition | null) => {\n        if (position === null) {\n            cancelFrame();\n            pendingRef.current = null;\n            // Leaving the plot area fires on every subsequent move; only announce the first one.\n            if (publishedRef.current === null) return;\n            apply(null);\n            return;\n        }\n\n        pendingRef.current = position;\n        if (frameRef.current !== null) return;\n        frameRef.current = requestAnimationFrame(() => {\n            frameRef.current = null;\n            const pending = pendingRef.current;\n            pendingRef.current = null;\n            if (pending) apply(pending);\n        });\n    }, [apply, cancelFrame]);\n\n    // On unmount, drop any queued frame and announce the crosshair as gone. Without the second\n    // half a parent mirroring this position onto sibling plots - ScatterPlotSync - keeps drawing\n    // the crosshair of a plot that no longer exists, until something else happens to move it.\n    useEffect(() => () => {\n        cancelFrame();\n        if (publishedRef.current !== null) publishChange(null);\n    }, [cancelFrame, publishChange]);\n\n    const handleCrosshairMove = useCallback((event: React.MouseEvent<SVGElement>, zoom: ZoomType) => {\n        if (!enabled) return;\n\n        const point = localPoint(event.currentTarget, event);\n        if (!point) return;\n\n        // The listener covers the whole svg, margins included, so anything outside the plot\n        // area counts as leaving it.\n        const plotX = point.x - margin.left;\n        const plotY = point.y - margin.top;\n        if (plotX < 0 || plotX > boundedWidth || plotY < 0 || plotY > boundedHeight) {\n            publish(null);\n            return;\n        }\n\n        const { translateX, translateY, scaleX, scaleY } = zoom.transformMatrix;\n        publish({\n            x: invertRescaled(xScale, translateX, scaleX, plotX),\n            y: invertRescaled(yScale, translateY, scaleY, plotY),\n        });\n    }, [boundedHeight, boundedWidth, enabled, margin.left, margin.top, publish, xScale, yScale]);\n\n    const handleCrosshairLeave = useCallback(() => {\n        publish(null);\n    }, [publish]);\n\n    return { crosshairPosition, handleCrosshairMove, handleCrosshairLeave };\n};\n"],"names":["useCrosshair","t0","$","_c","enabled","margin","boundedWidth","boundedHeight","xScale","yScale","onCrosshairChange","crosshairPosition","setCrosshairPosition","useState","publishedRef","useRef","publishChange","useStableCallback","frameRef","pendingRef","t1","Symbol","for","current","cancelAnimationFrame","cancelFrame","t2","position","apply","t3","position_0","requestAnimationFrame","pending","publish","t4","t5","useEffect","t6","left","top","event","zoom","point","localPoint","currentTarget","plotX","x","plotY","y","translateX","translateY","scaleX","scaleY","transformMatrix","invertRescaled","handleCrosshairMove","t7","handleCrosshairLeave","t8"],"mappings":"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"}
+{"version":3,"file":"visualization.es40.js","sources":["../../../node_modules/.pnpm/d3-hierarchy@1.1.9/node_modules/d3-hierarchy/src/treemap/slice.js"],"sourcesContent":["export default function(parent, x0, y0, x1, y1) {\n  var nodes = parent.children,\n      node,\n      i = -1,\n      n = nodes.length,\n      k = parent.value && (y1 - y0) / parent.value;\n\n  while (++i < n) {\n    node = nodes[i], node.x0 = x0, node.x1 = x1;\n    node.y0 = y0, node.y1 = y0 += node.value * k;\n  }\n}\n"],"names":["treemapSlice","parent","x0","y0","x1","y1","nodes","node","i","n","k"],"mappings":"AAAe,SAAAA,EAASC,GAAQC,GAAIC,GAAIC,GAAIC,GAAI;AAO9C,WANIC,IAAQL,EAAO,UACfM,GACAC,IAAI,IACJC,IAAIH,EAAM,QACVI,IAAIT,EAAO,UAAUI,IAAKF,KAAMF,EAAO,OAEpC,EAAEO,IAAIC;AACX,IAAAF,IAAOD,EAAME,CAAC,GAAGD,EAAK,KAAKL,GAAIK,EAAK,KAAKH,GACzCG,EAAK,KAAKJ,GAAII,EAAK,KAAKJ,KAAMI,EAAK,QAAQG;AAE/C;","x_google_ignoreList":[0]}