@weng-lab/visualization 1.3.0 → 1.3.2

package/dist/visualization.es3.js

@@ -0,0 +1,306 @@
+import { j as w } from "./visualization.es11.js";
+import { useRef as G, useState as E, useEffect as j } from "react";
+import A from "./visualization.es12.js";
+import me from "./visualization.es13.js";
+import ye from "./visualization.es14.js";
+import { useScreenshot as he } from "./visualization.es15.js";
+import pe from "./visualization.es16.js";
+/* empty css                   */
+import ge from "./visualization.es18.js";
+import { Typography as be } from "@mui/material";
+A.use(me);
+A.use(ye(q));
+function q(o, S, k) {
+  const h = document.createElement("div");
+  return document.body.appendChild(h), pe(h, {
+    getReferenceClientRect: o.getBoundingClientRect,
+    trigger: "manual",
+    content: S,
+    arrow: !0,
+    placement: "bottom",
+    hideOnClick: !1,
+    sticky: "reference",
+    interactive: !0,
+    appendTo: document.body,
+    ...k
+  });
+}
+const Ee = (o, {
+  name: S = "img",
+  extension: k = "jpg"
+} = {}) => {
+  const h = document.createElement("a");
+  h.href = o, h.download = `${S}.${k}`, h.click();
+}, ve = (o) => 10 * Math.log(o * 4 + 1), De = ({
+  data: o,
+  title: S,
+  id: k,
+  width: h = "100%",
+  height: Q = "100%",
+  scale: V = ve,
+  getLabel: W,
+  getColor: u,
+  legendToggle: n,
+  legendNodeLabel: X,
+  legendEdgeLabel: Y,
+  order: m,
+  fontFamily: z = "Arial",
+  onNodeClick: F,
+  onEdgeClick: P,
+  directional: T = !1,
+  scaleLabel: _
+}) => {
+  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));
+  }), o.edge.forEach((e) => {
+    e.category && I.add(n(e));
+  })) : (o.node.forEach((e) => {
+    I.add(e.category);
+  }), o.edge.forEach((e) => {
+    e.category && I.add(e.category);
+  }));
+  let L = /* @__PURE__ */ new Set();
+  o.node.forEach((e) => {
+    n && !m ? L.add(n(e)) : L.add(e.category);
+  }), o.edge.forEach((e) => {
+    e.category && n ? L.add(n(e)) : e.category && L.add(e.category);
+  });
+  let O = Array.from(L);
+  m && (O = O.sort((e, c) => m.indexOf(e) - m.indexOf(c)));
+  const Z = {};
+  O.forEach((e) => {
+    Z[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);
+  }, [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 c = [];
+    for (let t = 0; t < r.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);
+    });
+    const f = A({
+      container: document.getElementById(K),
+      style: [{
+        selector: "node",
+        style: {
+          label: "",
+          "font-size": 12
+        }
+      }, {
+        selector: "edge",
+        style: {
+          "line-color": "#ccc",
+          "curve-style": "bezier"
+        }
+      }],
+      minZoom: 0.25,
+      maxZoom: 5
+    });
+    M.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);
+      }), 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 < r.length; l++)
+      x[B[l]] !== !1 && (o?.centered && r[l].id === o.centered.id ? f.add({
+        data: {
+          id: R(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(r[l]) : "grey",
+          label: v ? r[l].id : "",
+          fontSize: "12px",
+          borderWidth: "2px",
+          borderColor: "black",
+          fontFamily: z,
+          backgroundFit: "contain",
+          backgroundClip: "none",
+          backgroundImage: `url(${ue})`
+        }
+      }) : f.add({
+        data: {
+          id: R(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(r[l]) : "grey",
+          label: v ? W ? W(r[l]) : r[l].id : "",
+          fontSize: "12px",
+          fontFamily: z
+        }
+      }));
+    let p = 0;
+    for (var b = 0; b < r.length; b++)
+      if (x[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)) {
+            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"
+              },
+              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])
+              }
+            });
+          }
+          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, {});
+      t.on("mouseover", () => {
+        i.show(), document.body.style.cursor = "pointer";
+      }), t.on("click", () => {
+        if (F) {
+          const g = {
+            accession: t.style("label"),
+            start: 0,
+            end: 0,
+            chromosome: ""
+          };
+          F(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");
+      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);
+            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}`;
+      } else
+        a.innerHTML = "Edge";
+      a.style.fontSize = "12px", a.style.fontFamily = z;
+      const d = q(s, a, {});
+      t.on("click", () => {
+        P && P(), d.hide(), document.body.style.cursor = "default";
+      }), t.on("mouseover", () => d.show()), t.on("mouseout", () => d.hide());
+    }), N(), () => {
+      f.destroy();
+    };
+  }, [r, C, $, y, x]), j(() => {
+    if (!M.current) return;
+    let e = 0;
+    M.current.nodes().forEach((c) => {
+      c.style({
+        label: v ? R(e) : ""
+      }), e++;
+    });
+  }, [v]);
+  const de = () => {
+    const e = M.current;
+    if (e) {
+      const c = {
+        name: "random",
+        animate: !0,
+        animationDuration: 1e3,
+        animationEasing: "ease-out"
+      };
+      e.layout(c).run();
+    }
+  }, N = () => {
+    const e = M.current, c = {
+      name: "cose-bilkent",
+      animate: "end",
+      animationEasing: "ease-out",
+      animationDuration: 1e3,
+      randomize: !0
+    };
+    e && e.layout(c).run();
+  }, fe = (e) => {
+    U((c) => ({
+      ...c,
+      [e]: !c[e]
+    }));
+  };
+  return /* @__PURE__ */ w.jsxs("div", { style: {
+    width: h,
+    height: Q,
+    position: "relative",
+    overflow: "hidden",
+    fontSize: "14px",
+    fontFamily: "helvetica"
+  }, children: [
+    /* @__PURE__ */ w.jsx(be, { variant: "h1", style: {
+      marginLeft: "3px",
+      fontSize: "18px",
+      fontWeight: "bold",
+      fontFamily: z
+    }, children: S }),
+    /* @__PURE__ */ w.jsxs("div", { ref: D, style: {
+      position: "relative"
+    }, children: [
+      /* @__PURE__ */ w.jsx("div", { ref: ae, id: K, style: {
+        width: "95%",
+        height: "90vh",
+        zIndex: 999
+      } }),
+      ee && /* @__PURE__ */ w.jsx("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: _ }) })
+    ] })
+  ] });
+};
+export {
+  De as default
+};
+//# sourceMappingURL=visualization.es3.js.map

package/dist/visualization.es3.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"visualization.es3.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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"}

package/dist/visualization.es30.js

@@ -0,0 +1,89 @@
+import { j as x } from "./visualization.es11.js";
+import { c as H } from "./visualization.es68.js";
+const U = (P) => {
+  const t = H.c(40), {
+    miniMap: M,
+    width: o,
+    height: a,
+    pointData: Y,
+    xScale: w,
+    yScale: k,
+    zoom: e
+  } = P, y = M.position ? M.position.bottom : 10, S = M.position ? M.position.right : 10;
+  let i;
+  t[0] !== y || t[1] !== S ? (i = {
+    position: "absolute",
+    bottom: y,
+    right: S
+  }, t[0] = y, t[1] = S, t[2] = i) : i = t[2];
+  const b = (o - 100) / 4, E = (a - 100) / 4;
+  let n;
+  t[3] !== a || t[4] !== Y || t[5] !== o || t[6] !== w || t[7] !== k ? (n = (r) => {
+    if (r) {
+      const s = r.getContext("2d"), _ = (o - 100) * 0.25, I = (a - 100) * 0.25;
+      s && (s.clearRect(0, 0, r.width, r.height), s.fillStyle = "white", s.fillRect(0, 0, _, I), s.strokeStyle = "grey", s.lineWidth = 4, s.strokeRect(0, 0, _, I), Y.forEach((W) => {
+        const z = w(W.x) * 0.25, C = k(W.y) * 0.25;
+        s.beginPath(), s.arc(z, C, 0.75, 0, Math.PI * 2), s.fillStyle = W.color ?? "black", s.fill();
+      }));
+    }
+  }, t[3] = a, t[4] = Y, t[5] = o, t[6] = w, t[7] = k, t[8] = n) : n = t[8];
+  let p;
+  t[9] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (p = {
+    display: "block"
+  }, t[9] = p) : p = t[9];
+  let l;
+  t[10] !== b || t[11] !== E || t[12] !== n ? (l = /* @__PURE__ */ x.jsx("canvas", { width: b, height: E, ref: n, style: p }), t[10] = b, t[11] = E, t[12] = n, t[13] = l) : l = t[13];
+  const j = (o - 100) / 4, D = (a - 100) / 4;
+  let u;
+  t[14] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (u = {
+    position: "absolute",
+    top: 0,
+    left: 0
+  }, t[14] = u) : u = t[14];
+  const R = o - 100, T = a - 100;
+  let c;
+  t[15] !== e ? (c = e.toStringInvert(), t[15] = e, t[16] = c) : c = t[16];
+  const v = e.isDragging ? "grabbing" : "grab";
+  let f;
+  t[17] !== v ? (f = {
+    cursor: v
+  }, t[17] = v, t[18] = f) : f = t[18];
+  let m;
+  t[19] !== e ? (m = (r) => {
+    e.isDragging && e.setTransformMatrix({
+      scaleX: e.transformMatrix.scaleX,
+      scaleY: e.transformMatrix.scaleY,
+      translateX: e.transformMatrix.translateX - r.movementX / 0.25 * e.transformMatrix.scaleX,
+      translateY: e.transformMatrix.translateY - r.movementY / 0.25 * e.transformMatrix.scaleY,
+      skewX: e.transformMatrix.skewX,
+      skewY: e.transformMatrix.skewY
+    });
+  }, t[19] = e, t[20] = m) : m = t[20];
+  let h;
+  t[21] !== e ? (h = (r) => {
+    if (e.isDragging && r.touches.length === 1) {
+      const s = r.touches[0];
+      e.setTransformMatrix({
+        scaleX: e.transformMatrix.scaleX,
+        scaleY: e.transformMatrix.scaleY,
+        translateX: e.transformMatrix.translateX - s.clientX / 0.25,
+        translateY: e.transformMatrix.translateY - s.clientY / 0.25,
+        skewX: e.transformMatrix.skewX,
+        skewY: e.transformMatrix.skewY
+      });
+    }
+  }, t[21] = e, t[22] = h) : h = t[22];
+  let d;
+  t[23] !== R || t[24] !== T || t[25] !== c || t[26] !== f || t[27] !== m || t[28] !== h || t[29] !== e.dragEnd || t[30] !== e.dragStart ? (d = /* @__PURE__ */ x.jsx("g", { transform: "scale(0.25)", children: /* @__PURE__ */ x.jsx("rect", { width: R, height: T, fill: "#0d0f98", fillOpacity: 0.2, stroke: "#0d0f98", strokeWidth: 4, rx: 8, transform: c, style: f, onMouseDown: e.dragStart, onMouseUp: e.dragEnd, onMouseMove: m, onMouseLeave: e.dragEnd, onTouchStart: e.dragStart, onTouchEnd: e.dragEnd, onTouchMove: h }) }), t[23] = R, t[24] = T, t[25] = c, t[26] = f, t[27] = m, t[28] = h, t[29] = e.dragEnd, t[30] = e.dragStart, t[31] = d) : d = t[31];
+  let g;
+  t[32] !== D || t[33] !== d || t[34] !== j ? (g = /* @__PURE__ */ x.jsx("svg", { width: j, height: D, style: u, children: d }), t[32] = D, t[33] = d, t[34] = j, t[35] = g) : g = t[35];
+  let X;
+  return t[36] !== g || t[37] !== i || t[38] !== l ? (X = /* @__PURE__ */ x.jsxs("div", { style: i, children: [
+    l,
+    g
+  ] }), t[36] = g, t[37] = i, t[38] = l, t[39] = X) : X = t[39], X;
+};
+export {
+  U as default
+};
+//# sourceMappingURL=visualization.es30.js.map

package/dist/visualization.es30.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"visualization.es30.js","sources":["../src/components/ScatterPlot/minimap.tsx"],"sourcesContent":["import { MapProps } from \"./types\";\n\nconst MiniMap = <T,>({\n    miniMap,\n    width,\n    height,\n    pointData,\n    xScale,\n    yScale,\n    zoom\n}: MapProps<T>) => {\n    return (\n        <div\n            style={{\n                position: 'absolute',\n                bottom: miniMap.position ? miniMap.position.bottom : 10,\n                right: miniMap.position ? miniMap.position.right : 10,\n            }}\n        >\n            {/* Canvas for rendering points on minimap */}\n            <canvas\n                width={(width - 100) / 4}\n                height={(height - 100) / 4}\n                ref={(canvas) => {\n                    if (canvas) {\n                        const context = canvas.getContext('2d');\n                        const scaleFactor = 0.25;\n                        const scaledWidth = (width - 100) * scaleFactor;\n                        const scaledHeight = (height - 100) * scaleFactor;\n                        if (context) {\n                            // Clear canvas\n                            context.clearRect(0, 0, canvas.width, canvas.height);\n\n                            // Draw background and outline\n                            context.fillStyle = 'white';\n                            context.fillRect(0, 0, scaledWidth, scaledHeight);\n                            context.strokeStyle = 'grey';\n                            context.lineWidth = 4;\n                            context.strokeRect(0, 0, scaledWidth, scaledHeight);\n\n                            // Draw points\n                            pointData.forEach(point => {\n                                const transformedX = xScale(point.x) * scaleFactor;\n                                const transformedY = yScale(point.y) * scaleFactor;\n                                context.beginPath();\n                                context.arc(transformedX, transformedY, 3 * scaleFactor, 0, Math.PI * 2);\n                                context.fillStyle = point.color ?? \"black\";\n                                context.fill();\n                            });\n                        }\n                    }\n                }}\n                style={{ display: 'block' }}\n            />\n\n            {/* SVG for rendering the zoom window */}\n            <svg\n                width={(width - 100) / 4}\n                height={(height - 100) / 4}\n                style={{ position: 'absolute', top: 0, left: 0 }}\n            >\n                <g transform={`scale(0.25)`}>\n                    <rect\n                        width={width - 100}\n                        height={height - 100}\n                        fill=\"#0d0f98\"\n                        fillOpacity={0.2}\n                        stroke=\"#0d0f98\"\n                        strokeWidth={4}\n                        rx={8}\n                        transform={zoom.toStringInvert()}\n                        //drag functionality for window, must invert zoom and take the scale into account\n                        style={{ cursor: zoom.isDragging ? \"grabbing\" : \"grab\" }}\n                        onMouseDown={zoom.dragStart}\n                        onMouseUp={zoom.dragEnd}\n                        onMouseMove={(event) => {\n                            if (zoom.isDragging) {\n                                zoom.setTransformMatrix({\n                                    scaleX: zoom.transformMatrix.scaleX,\n                                    scaleY: zoom.transformMatrix.scaleY,\n                                    translateX: zoom.transformMatrix.translateX - event.movementX / .25 * zoom.transformMatrix.scaleX,\n                                    translateY: zoom.transformMatrix.translateY - event.movementY / .25 * zoom.transformMatrix.scaleY,\n                                    skewX: zoom.transformMatrix.skewX,\n                                    skewY: zoom.transformMatrix.skewY\n                                });\n                            }\n                        }}\n                        onMouseLeave={zoom.dragEnd}\n                        onTouchStart={zoom.dragStart}\n                        onTouchEnd={zoom.dragEnd}\n                        onTouchMove={(event) => {\n                            if (zoom.isDragging && event.touches.length === 1) {\n                                const touch = event.touches[0];\n                                zoom.setTransformMatrix({\n                                    scaleX: zoom.transformMatrix.scaleX,\n                                    scaleY: zoom.transformMatrix.scaleY,\n                                    translateX: zoom.transformMatrix.translateX - touch.clientX / .25,\n                                    translateY: zoom.transformMatrix.translateY - touch.clientY / .25,\n                                    skewX: zoom.transformMatrix.skewX,\n                                    skewY: zoom.transformMatrix.skewY\n                                });\n                            }\n                        }}\n                    />\n                </g>\n            </svg>\n        </div>\n    );\n};\n\nexport default MiniMap;"],"names":["MiniMap","t0","$","_c","miniMap","width","height","pointData","xScale","yScale","zoom","t1","position","bottom","t2","right","t3","t4","t5","t6","canvas","context","getContext","scaledWidth","scaledHeight","clearRect","fillStyle","fillRect","strokeStyle","lineWidth","strokeRect","forEach","point","transformedX","x","transformedY","y","beginPath","arc","Math","PI","color","fill","t7","Symbol","for","display","t8","jsx","t9","t10","t11","top","left","t12","t13","t14","toStringInvert","t15","isDragging","t16","cursor","t17","event","setTransformMatrix","scaleX","transformMatrix","scaleY","translateX","movementX","translateY","movementY","skewX","skewY","t18","event_0","touches","length","touch","clientX","clientY","t19","dragEnd","dragStart","t20","t21","jsxs"],"mappings":"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"}

package/dist/visualization.es300.js

@@ -0,0 +1,38 @@
+import { isCSSVariableName as s } from "./visualization.es338.js";
+import { transformProps as n } from "./visualization.es341.js";
+import { defaultTransformValue as a, readTransformValue as i } from "./visualization.es396.js";
+import { measureViewportBox as u } from "./visualization.es440.js";
+import { DOMVisualElement as p } from "./visualization.es439.js";
+import { buildHTMLStyles as l } from "./visualization.es441.js";
+import { renderHTML as f } from "./visualization.es442.js";
+import { scrapeMotionValuesFromProps as c } from "./visualization.es443.js";
+function d(m) {
+  return window.getComputedStyle(m);
+}
+class x extends p {
+  constructor() {
+    super(...arguments), this.type = "html", this.renderInstance = f;
+  }
+  readValueFromInstance(e, r) {
+    if (n.has(r))
+      return this.projection?.isProjecting ? a(r) : i(e, r);
+    {
+      const t = d(e), o = (s(r) ? t.getPropertyValue(r) : t[r]) || 0;
+      return typeof o == "string" ? o.trim() : o;
+    }
+  }
+  measureInstanceViewportBox(e, { transformPagePoint: r }) {
+    return u(e, r);
+  }
+  build(e, r, t) {
+    l(e, r, t.transformTemplate);
+  }
+  scrapeMotionValuesFromProps(e, r, t) {
+    return c(e, r, t);
+  }
+}
+export {
+  x as HTMLVisualElement,
+  d as getComputedStyle
+};
+//# sourceMappingURL=visualization.es300.js.map

package/dist/visualization.es300.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"visualization.es300.js","sources":["../../../node_modules/.pnpm/motion-dom@12.38.0/node_modules/motion-dom/dist/es/render/html/HTMLVisualElement.mjs"],"sourcesContent":["import { isCSSVariableName } from '../../animation/utils/is-css-variable.mjs';\nimport { transformProps } from '../utils/keys-transform.mjs';\nimport { defaultTransformValue, readTransformValue } from '../dom/parse-transform.mjs';\nimport { measureViewportBox } from '../../projection/utils/measure.mjs';\nimport { DOMVisualElement } from '../dom/DOMVisualElement.mjs';\nimport { buildHTMLStyles } from './utils/build-styles.mjs';\nimport { renderHTML } from './utils/render.mjs';\nimport { scrapeMotionValuesFromProps } from './utils/scrape-motion-values.mjs';\n\nfunction getComputedStyle(element) {\n    return window.getComputedStyle(element);\n}\nclass HTMLVisualElement extends DOMVisualElement {\n    constructor() {\n        super(...arguments);\n        this.type = \"html\";\n        this.renderInstance = renderHTML;\n    }\n    readValueFromInstance(instance, key) {\n        if (transformProps.has(key)) {\n            return this.projection?.isProjecting\n                ? defaultTransformValue(key)\n                : readTransformValue(instance, key);\n        }\n        else {\n            const computedStyle = getComputedStyle(instance);\n            const value = (isCSSVariableName(key)\n                ? computedStyle.getPropertyValue(key)\n                : computedStyle[key]) || 0;\n            return typeof value === \"string\" ? value.trim() : value;\n        }\n    }\n    measureInstanceViewportBox(instance, { transformPagePoint }) {\n        return measureViewportBox(instance, transformPagePoint);\n    }\n    build(renderState, latestValues, props) {\n        buildHTMLStyles(renderState, latestValues, props.transformTemplate);\n    }\n    scrapeMotionValuesFromProps(props, prevProps, visualElement) {\n        return scrapeMotionValuesFromProps(props, prevProps, visualElement);\n    }\n}\n\nexport { HTMLVisualElement, getComputedStyle };\n//# sourceMappingURL=HTMLVisualElement.mjs.map\n"],"names":["getComputedStyle","element","HTMLVisualElement","DOMVisualElement","renderHTML","instance","key","transformProps","defaultTransformValue","readTransformValue","computedStyle","value","isCSSVariableName","transformPagePoint","measureViewportBox","renderState","latestValues","props","buildHTMLStyles","prevProps","visualElement","scrapeMotionValuesFromProps"],"mappings":";;;;;;;;AASA,SAASA,EAAiBC,GAAS;AAC/B,SAAO,OAAO,iBAAiBA,CAAO;AAC1C;AACA,MAAMC,UAA0BC,EAAiB;AAAA,EAC7C,cAAc;AACV,UAAM,GAAG,SAAS,GAClB,KAAK,OAAO,QACZ,KAAK,iBAAiBC;AAAA,EAC1B;AAAA,EACA,sBAAsBC,GAAUC,GAAK;AACjC,QAAIC,EAAe,IAAID,CAAG;AACtB,aAAO,KAAK,YAAY,eAClBE,EAAsBF,CAAG,IACzBG,EAAmBJ,GAAUC,CAAG;AAErC;AACD,YAAMI,IAAgBV,EAAiBK,CAAQ,GACzCM,KAASC,EAAkBN,CAAG,IAC9BI,EAAc,iBAAiBJ,CAAG,IAClCI,EAAcJ,CAAG,MAAM;AAC7B,aAAO,OAAOK,KAAU,WAAWA,EAAM,KAAI,IAAKA;AAAA,IACtD;AAAA,EACJ;AAAA,EACA,2BAA2BN,GAAU,EAAE,oBAAAQ,KAAsB;AACzD,WAAOC,EAAmBT,GAAUQ,CAAkB;AAAA,EAC1D;AAAA,EACA,MAAME,GAAaC,GAAcC,GAAO;AACpC,IAAAC,EAAgBH,GAAaC,GAAcC,EAAM,iBAAiB;AAAA,EACtE;AAAA,EACA,4BAA4BA,GAAOE,GAAWC,GAAe;AACzD,WAAOC,EAA4BJ,GAAOE,GAAWC,CAAa;AAAA,EACtE;AACJ;","x_google_ignoreList":[0]}

package/dist/visualization.es301.js

@@ -0,0 +1,18 @@
+import { DragGesture as r } from "./visualization.es486.js";
+import { PanGesture as o } from "./visualization.es487.js";
+import { MeasureLayout as e } from "./visualization.es488.js";
+import { HTMLProjectionNode as t } from "./visualization.es483.js";
+const u = {
+  pan: {
+    Feature: o
+  },
+  drag: {
+    Feature: r,
+    ProjectionNode: t,
+    MeasureLayout: e
+  }
+};
+export {
+  u as drag
+};
+//# sourceMappingURL=visualization.es301.js.map

package/dist/visualization.es301.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"visualization.es301.js","sources":["../../../node_modules/.pnpm/framer-motion@12.38.0_@emotion+is-prop-valid@1.4.0_react-dom@19.2.4_react@19.2.4__react@19.2.4/node_modules/framer-motion/dist/es/motion/features/drag.mjs"],"sourcesContent":["import { DragGesture } from '../../gestures/drag/index.mjs';\nimport { PanGesture } from '../../gestures/pan/index.mjs';\nimport { MeasureLayout } from './layout/MeasureLayout.mjs';\nimport { HTMLProjectionNode } from 'motion-dom';\n\nconst drag = {\n    pan: {\n        Feature: PanGesture,\n    },\n    drag: {\n        Feature: DragGesture,\n        ProjectionNode: HTMLProjectionNode,\n        MeasureLayout,\n    },\n};\n\nexport { drag };\n//# sourceMappingURL=drag.mjs.map\n"],"names":["drag","PanGesture","DragGesture","HTMLProjectionNode","MeasureLayout"],"mappings":";;;;AAKK,MAACA,IAAO;AAAA,EACT,KAAK;AAAA,IACD,SAASC;AAAA,EACjB;AAAA,EACI,MAAM;AAAA,IACF,SAASC;AAAA,IACT,gBAAgBC;AAAA,IAChB,eAAAC;AAAA,EACR;AACA;","x_google_ignoreList":[0]}

package/dist/visualization.es302.js

@@ -0,0 +1,22 @@
+import { HoverGesture as e } from "./visualization.es489.js";
+import { FocusGesture as r } from "./visualization.es490.js";
+import { PressGesture as t } from "./visualization.es491.js";
+import { InViewFeature as o } from "./visualization.es492.js";
+const a = {
+  inView: {
+    Feature: o
+  },
+  tap: {
+    Feature: t
+  },
+  focus: {
+    Feature: r
+  },
+  hover: {
+    Feature: e
+  }
+};
+export {
+  a as gestureAnimations
+};
+//# sourceMappingURL=visualization.es302.js.map

package/dist/visualization.es302.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"visualization.es302.js","sources":["../../../node_modules/.pnpm/framer-motion@12.38.0_@emotion+is-prop-valid@1.4.0_react-dom@19.2.4_react@19.2.4__react@19.2.4/node_modules/framer-motion/dist/es/motion/features/gestures.mjs"],"sourcesContent":["import { HoverGesture } from '../../gestures/hover.mjs';\nimport { FocusGesture } from '../../gestures/focus.mjs';\nimport { PressGesture } from '../../gestures/press.mjs';\nimport { InViewFeature } from './viewport/index.mjs';\n\nconst gestureAnimations = {\n    inView: {\n        Feature: InViewFeature,\n    },\n    tap: {\n        Feature: PressGesture,\n    },\n    focus: {\n        Feature: FocusGesture,\n    },\n    hover: {\n        Feature: HoverGesture,\n    },\n};\n\nexport { gestureAnimations };\n//# sourceMappingURL=gestures.mjs.map\n"],"names":["gestureAnimations","InViewFeature","PressGesture","FocusGesture","HoverGesture"],"mappings":";;;;AAKK,MAACA,IAAoB;AAAA,EACtB,QAAQ;AAAA,IACJ,SAASC;AAAA,EACjB;AAAA,EACI,KAAK;AAAA,IACD,SAASC;AAAA,EACjB;AAAA,EACI,OAAO;AAAA,IACH,SAASC;AAAA,EACjB;AAAA,EACI,OAAO;AAAA,IACH,SAASC;AAAA,EACjB;AACA;","x_google_ignoreList":[0]}

package/dist/visualization.es303.js

@@ -0,0 +1,12 @@
+import { MeasureLayout as o } from "./visualization.es488.js";
+import { HTMLProjectionNode as t } from "./visualization.es483.js";
+const a = {
+  layout: {
+    ProjectionNode: t,
+    MeasureLayout: o
+  }
+};
+export {
+  a as layout
+};
+//# sourceMappingURL=visualization.es303.js.map

package/dist/visualization.es303.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"visualization.es303.js","sources":["../../../node_modules/.pnpm/framer-motion@12.38.0_@emotion+is-prop-valid@1.4.0_react-dom@19.2.4_react@19.2.4__react@19.2.4/node_modules/framer-motion/dist/es/motion/features/layout.mjs"],"sourcesContent":["import { HTMLProjectionNode } from 'motion-dom';\nimport { MeasureLayout } from './layout/MeasureLayout.mjs';\n\nconst layout = {\n    layout: {\n        ProjectionNode: HTMLProjectionNode,\n        MeasureLayout,\n    },\n};\n\nexport { layout };\n//# sourceMappingURL=layout.mjs.map\n"],"names":["layout","HTMLProjectionNode","MeasureLayout"],"mappings":";;AAGK,MAACA,IAAS;AAAA,EACX,QAAQ;AAAA,IACJ,gBAAgBC;AAAA,IAChB,eAAAC;AAAA,EACR;AACA;","x_google_ignoreList":[0]}

package/dist/visualization.es304.js

@@ -0,0 +1,11 @@
+class s {
+  constructor(t) {
+    this.isMounted = !1, this.node = t;
+  }
+  update() {
+  }
+}
+export {
+  s as Feature
+};
+//# sourceMappingURL=visualization.es304.js.map

package/dist/visualization.es304.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"visualization.es304.js","sources":["../../../node_modules/.pnpm/motion-dom@12.38.0/node_modules/motion-dom/dist/es/render/Feature.mjs"],"sourcesContent":["/**\n * Feature base class for extending VisualElement functionality.\n * Features are plugins that can be mounted/unmounted to add behavior\n * like gestures, animations, or layout tracking.\n */\nclass Feature {\n    constructor(node) {\n        this.isMounted = false;\n        this.node = node;\n    }\n    update() { }\n}\n\nexport { Feature };\n//# sourceMappingURL=Feature.mjs.map\n"],"names":["Feature","node"],"mappings":"AAKA,MAAMA,EAAQ;AAAA,EACV,YAAYC,GAAM;AACd,SAAK,YAAY,IACjB,KAAK,OAAOA;AAAA,EAChB;AAAA,EACA,SAAS;AAAA,EAAE;AACf;","x_google_ignoreList":[0]}