react-beauti-graph 1.3.0 → 1.3.1

package/dist/index.js

@@ -1,34 +1,45 @@
 "use client";
 import { useEffect as e, useId as t, useRef as n, useState as r } from "react";
 import i from "cytoscape";
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import a from "cytoscape-svg";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
 // src/default_setting.ts
-var s = "#e91e63", c = "#2e7d32", l = "#7b1fa2", u = "#efeb00", d = "#8b4513", f = "rgb(239, 108, 0)", p = "22px", m = "18px", h = "#0066cc", g = "#fff", _ = "#f0f8ff", v = 2, y = -8, b = 16, x = 16, S = 14, C = [
+var c = "#e91e63", l = "#2e7d32", u = "#7b1fa2", d = "#efeb00", f = "#8b4513", p = "rgb(239, 108, 0)", m = "22px", h = "18px", g = "#0066cc", _ = "#fff", v = "#f0f8ff";
+// src/graphFactory.tsx
+i.use(a);
+function y(e) {
+	let t = e.svg({
+		full: !0,
+		scale: 1
+	}), n = URL.createObjectURL(new Blob([t], { type: "image/svg+xml" })), r = document.createElement("a");
+	r.href = n, r.download = "graph.svg", r.click(), URL.revokeObjectURL(n);
+}
+var b = 2, x = -8, S = 16, C = 16, w = 14, T = [
 	["top", "Font Top Panel"],
 	["right", "Font Right Panel"],
 	["graph", "Font Graph Panel"]
-], w = "Helvetica Neue, Helvetica, Arial, sans-serif", T = 1.2, E = .6, D = "macromolecule", O = "compartment", k = `node[class = "${D}"]`, A;
-function j(e, t) {
-	if (A === void 0) try {
-		A = document.createElement("canvas").getContext("2d");
+], E = "Helvetica Neue, Helvetica, Arial, sans-serif", D = 1.2, O = .6, k = "macromolecule", A = "compartment", j = `node[class = "${k}"]`, M;
+function N(e, t) {
+	if (M === void 0) try {
+		M = document.createElement("canvas").getContext("2d");
 	} catch {
-		A = null;
+		M = null;
 	}
-	return A ? (A.font = `${t}px ${w}`, A.measureText(e).width) : e.length * t * E;
+	return M ? (M.font = `${t}px ${E}`, M.measureText(e).width) : e.length * t * O;
 }
-function ee(e, t = x) {
+function ee(e, t = C) {
 	return {
-		width: Math.ceil(j(e ?? "", t)) + 8,
-		height: Math.ceil(t * T) + 8
+		width: Math.ceil(N(e ?? "", t)) + 8,
+		height: Math.ceil(t * D) + 8
 	};
 }
-function M(e, t) {
+function P(e, t) {
 	return e.localeCompare(t, void 0, {
 		numeric: !0,
 		sensitivity: "base"
 	});
 }
-function N(e = []) {
+function F(e = []) {
 	let t = /* @__PURE__ */ new Map();
 	return e.map((e) => e.map((e) => {
 		let n = t.get(e) ?? 0;
@@ -53,19 +64,19 @@ function te(e, t, n = {}) {
 		});
 	});
 }
-function P(e, t) {
+function I(e, t) {
 	let n = e, r = 2;
 	for (; t.has(n);) n = `${e}_${r++}`;
 	return t.add(n), n;
 }
-function F(e, t = 10) {
-	let n = Math.max(1, Math.floor(t) || 1), r = e.filter((e) => e.data.class === D), i = e.filter((e) => e.data.class === O).map((e) => r.filter((t) => t.data.parent === e.data.id));
+function ne(e, t = 10) {
+	let n = Math.max(1, Math.floor(t) || 1), r = e.filter((e) => e.data.class === k), i = e.filter((e) => e.data.class === A).map((e) => r.filter((t) => t.data.parent === e.data.id));
 	i.push(r.filter((e) => !e.data.parent));
 	let a = [];
 	for (let e of i) for (let t = 0; t < e.length; t += n) a.push(e.slice(t, t + n).map((e) => e.data.id));
 	return a;
 }
-function I(e = {}, t = [], n = []) {
+function L(e = {}, t = [], n = []) {
 	let r = [], i = /* @__PURE__ */ new Set(), a = /* @__PURE__ */ new Set([...t.flat(), ...n]);
 	for (let t of Object.values(e)) for (let e of t) i.add(e);
 	for (let e of a) i.add(e);
@@ -74,10 +85,10 @@ function I(e = {}, t = [], n = []) {
 		return t ? t.charAt(0).toLowerCase() + t.slice(1) : "folder";
 	}, s = /* @__PURE__ */ new Map(), c = /* @__PURE__ */ new Map();
 	for (let [t, n] of Object.entries(e)) {
-		let e = P(o(t), i);
+		let e = I(o(t), i);
 		c.set(t, e), r.push({ data: {
 			id: e,
-			class: O,
+			class: A,
 			label: t
 		} });
 		for (let e of n) {
@@ -107,7 +118,7 @@ function I(e = {}, t = [], n = []) {
 	for (let { actualId: e, originalId: t, folderLabel: n } of l) {
 		let i = {
 			id: e,
-			class: D,
+			class: k,
 			rawLabel: t,
 			displayLabel: n ? `${t} (${n})` : t,
 			group: n
@@ -124,16 +135,16 @@ function I(e = {}, t = [], n = []) {
 			return;
 		}
 		let c = { data: {
-			id: P(`e${n + 1}`, i),
+			id: I(`e${n + 1}`, i),
 			source: a,
 			target: o
 		} };
 		f.set(d(a, o), c), r.push(c);
 	}), r;
 }
-function ne(e, t, n) {
-	return e.filter((e) => t || e.data.class !== O).map((e) => {
-		if (e.data.class !== D) return {
+function re(e, t, n) {
+	return e.filter((e) => t || e.data.class !== A).map((e) => {
+		if (e.data.class !== k) return {
 			...e,
 			data: { ...e.data }
 		};
@@ -147,7 +158,7 @@ function ne(e, t, n) {
 		};
 	});
 }
-function L(e, t = !1) {
+function R(e, t = !1) {
 	let n = (e) => ({
 		id: e.id(),
 		name: e.data("rawLabel") ?? e.id(),
@@ -158,18 +169,18 @@ function L(e, t = !1) {
 		t.target().same(e) && (r.set(t.source().id(), n(t.source())), a && i.set(t.source().id(), n(t.source()))), t.source().same(e) && (i.set(t.target().id(), n(t.target())), a && r.set(t.target().id(), n(t.target())));
 	}), t) {
 		let t = [[r, "parents"], [i, "children"]];
-		for (let [r, i] of t) r.clear(), R(e, i).nodes().forEach((t) => {
+		for (let [r, i] of t) r.clear(), z(e, i).nodes().forEach((t) => {
 			t.same(e) || r.set(t.id(), n(t));
 		});
 	}
-	let a = (e, t) => M(e.name, t.name);
+	let a = (e, t) => P(e.name, t.name);
 	return {
 		...n(e),
 		parents: [...r.values()].sort(a),
 		children: [...i.values()].sort(a)
 	};
 }
-function R(e, t) {
+function z(e, t) {
 	let n = t === "parents", r = e.cy().collection(), i = /* @__PURE__ */ new Set([e.id()]), a = [e];
 	for (let e = a.shift(); e !== void 0; e = a.shift()) {
 		let t = e;
@@ -180,20 +191,20 @@ function R(e, t) {
 	}
 	return r.union(e.cy().nodes().filter((e) => i.has(e.id())));
 }
-function z(e) {
+function ie(e) {
 	return [["Parent Nodes", e.parents], ["Child Nodes", e.children]].filter(([, e]) => e.length > 0);
 }
-function re(e, t) {
-	let n = e.nodes(k).filter((e) => t.has(e.id())), r = e.nodes(":parent").filter((e) => e.children().every((e) => n.has(e)));
+function ae(e, t) {
+	let n = e.nodes(j).filter((e) => t.has(e.id())), r = e.nodes(":parent").filter((e) => e.children().every((e) => n.has(e)));
 	return n.union(r);
 }
 function B(e) {
 	let t = (e) => e.group ? `${e.name} (${e.group})` : e.name, n = [`Node: ${e.name}`];
 	e.group && n.push(`Group: ${e.group}`);
-	for (let [r, i] of z(e)) n.push("", `${r} (${i.length}):`, ...i.map(t));
+	for (let [r, i] of ie(e)) n.push("", `${r} (${i.length}):`, ...i.map(t));
 	return n.join("\n");
 }
-function V(e) {
+function oe(e) {
 	let t = /^#([0-9a-f]{6})$/i.exec(e)?.[1];
 	if (t !== void 0) return parseInt(t, 16);
 	let n = /^rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)$/i.exec(e);
@@ -201,8 +212,8 @@ function V(e) {
 	let [r = 0, i = 0, a = 0] = n.slice(1).map((e) => Math.min(Number(e), 255));
 	return r << 16 | i << 8 | a;
 }
-function H(e, t = .88) {
-	let n = V(e);
+function V(e, t = .88) {
+	let n = oe(e);
 	return n === null ? "#ffffff" : `#${[
 		16,
 		8,
@@ -212,7 +223,7 @@ function H(e, t = .88) {
 		return Math.round(r + (255 - r) * t).toString(16).padStart(2, "0");
 	}).join("")}`;
 }
-function ie(e, t, n = f) {
+function se(e, t, n = p) {
 	let r = ["track", "track2"], i = r.flatMap((e) => [
 		`${e}-parents`,
 		`${e}-children`,
@@ -224,7 +235,7 @@ function ie(e, t, n = f) {
 			if (!t) return null;
 			let a = e.getElementById(t);
 			if (a.empty()) return null;
-			let o = R(a, n), s = r[i] ?? "track";
+			let o = z(a, n), s = r[i] ?? "track";
 			return o.addClass(`${s}-${n}`), a.addClass(`${s}-root`), o;
 		}), o = a.filter((e) => e !== null);
 		if (o.length === 0) return;
@@ -232,26 +243,26 @@ function ie(e, t, n = f) {
 		s && c && s.intersection(c).forEach((e) => {
 			e.data({
 				trackMixColor: n,
-				trackMixFill: H(n)
+				trackMixFill: V(n)
 			}), e.addClass("track-mixed");
 		});
 		let l = o.reduce((e, t) => e.union(t));
 		e.elements().not(l).not("node:parent").addClass("faded");
 	});
 }
-function U({ selectedColor: e = s, parentsColor: t = c, childrenColor: n = l, track2ParentsColor: r = u, track2ChildrenColor: i = d } = {}) {
+function H({ selectedColor: e = c, parentsColor: t = l, childrenColor: n = u, track2ParentsColor: r = d, track2ChildrenColor: i = f } = {}) {
 	return [
 		{
 			selector: "node",
 			style: {
-				"background-color": g,
+				"background-color": _,
 				label: "data(graphLabel)",
 				shape: "rectangle",
-				"font-family": w,
-				"font-size": x,
-				color: h,
+				"font-family": E,
+				"font-size": C,
+				color: g,
 				"border-width": 2,
-				"border-color": h,
+				"border-color": g,
 				"text-valign": "center",
 				"text-halign": "center"
 			}
@@ -259,12 +270,12 @@ function U({ selectedColor: e = s, parentsColor: t = c, childrenColor: n = l, tr
 		{
 			selector: "node:parent",
 			style: {
-				"background-color": _,
+				"background-color": v,
 				"background-opacity": .5,
 				"border-style": "dashed",
 				label: "data(label)",
 				"text-valign": "top",
-				"font-size": S,
+				"font-size": w,
 				"font-weight": "bold",
 				padding: "18px"
 			}
@@ -280,11 +291,11 @@ function U({ selectedColor: e = s, parentsColor: t = c, childrenColor: n = l, tr
 		{
 			selector: "edge",
 			style: {
-				"line-color": h,
+				"line-color": g,
 				width: 2,
 				"curve-style": "bezier",
 				"target-arrow-shape": "vee",
-				"target-arrow-color": h,
+				"target-arrow-color": g,
 				"target-arrow-fill": "filled",
 				"arrow-scale": 2
 			}
@@ -301,7 +312,7 @@ function U({ selectedColor: e = s, parentsColor: t = c, childrenColor: n = l, tr
 			selector: "edge.bidirectional",
 			style: {
 				"source-arrow-shape": "vee",
-				"source-arrow-color": h,
+				"source-arrow-color": g,
 				"source-arrow-fill": "filled"
 			}
 		},
@@ -351,7 +362,7 @@ function U({ selectedColor: e = s, parentsColor: t = c, childrenColor: n = l, tr
 				selector: `node.${e}.${t}`,
 				style: {
 					"border-width": 5,
-					"background-color": H(n)
+					"background-color": V(n)
 				}
 			}
 		]),
@@ -384,9 +395,9 @@ function U({ selectedColor: e = s, parentsColor: t = c, childrenColor: n = l, tr
 		}
 	];
 }
-var W = "ALL";
-function G({ id: t, options: i, selectedId: s, onSelect: c, noneLabel: l = W, hiddenIds: u, onToggleVisible: d }) {
-	let [f, p] = r(""), [m, h] = r(""), [g, _] = r(!1), [v, y] = r(0), b = n(null), x = n(null), S = i.find((e) => e.id === s)?.label ?? "", [C, w] = r(null);
+var U = "ALL";
+function W({ id: t, options: i, selectedId: a, onSelect: c, noneLabel: l = U, hiddenIds: u, onToggleVisible: d }) {
+	let [f, p] = r(""), [m, h] = r(""), [g, _] = r(!1), [v, y] = r(0), b = n(null), x = n(null), S = i.find((e) => e.id === a)?.label ?? "", [C, w] = r(null);
 	C !== S && (w(S), p(S));
 	let T = m.trim().toLowerCase(), E = T ? i.filter((e) => e.label.toLowerCase().includes(T)) : i, D = {
 		id: "",
@@ -406,11 +417,11 @@ function G({ id: t, options: i, selectedId: s, onSelect: c, noneLabel: l = W, hi
 		return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
 	}), e(() => {
 		x.current?.children[v]?.scrollIntoView({ block: "nearest" });
-	}, [v, g]), /* @__PURE__ */ o("div", {
+	}, [v, g]), /* @__PURE__ */ s("div", {
 		className: "node-search",
 		ref: b,
 		children: [
-			/* @__PURE__ */ a("input", {
+			/* @__PURE__ */ o("input", {
 				id: t,
 				type: "text",
 				value: f,
@@ -434,7 +445,7 @@ function G({ id: t, options: i, selectedId: s, onSelect: c, noneLabel: l = W, hi
 					} else e.key === "Escape" && A();
 				}
 			}),
-			f && /* @__PURE__ */ a("button", {
+			f && /* @__PURE__ */ o("button", {
 				type: "button",
 				className: "node-search-clear",
 				"aria-label": "Clear",
@@ -443,17 +454,17 @@ function G({ id: t, options: i, selectedId: s, onSelect: c, noneLabel: l = W, hi
 				},
 				children: "×"
 			}),
-			g && /* @__PURE__ */ a("ul", {
+			g && /* @__PURE__ */ o("ul", {
 				className: "node-search-list",
 				ref: x,
 				role: "listbox",
-				children: O.length === 0 ? /* @__PURE__ */ a("li", {
+				children: O.length === 0 ? /* @__PURE__ */ o("li", {
 					className: "node-search-empty",
 					role: "option",
 					"aria-selected": "false",
 					"aria-disabled": "true",
 					children: "no match"
-				}) : O.map((e, t) => /* @__PURE__ */ o("li", {
+				}) : O.map((e, t) => /* @__PURE__ */ s("li", {
 					role: "option",
 					"aria-selected": t === v,
 					className: [t === v && "active", u?.has(e.id) && "off"].filter(Boolean).join(" ") || void 0,
@@ -461,7 +472,7 @@ function G({ id: t, options: i, selectedId: s, onSelect: c, noneLabel: l = W, hi
 						t.preventDefault(), j(e);
 					},
 					onMouseEnter: () => y(t),
-					children: [d && e.id && /* @__PURE__ */ a("input", {
+					children: [d && e.id && /* @__PURE__ */ o("input", {
 						type: "checkbox",
 						checked: !u?.has(e.id),
 						"aria-label": `Show ${e.label}`,
@@ -476,116 +487,118 @@ function G({ id: t, options: i, selectedId: s, onSelect: c, noneLabel: l = W, hi
 		]
 	});
 }
-function K(h = {}, g = [], _ = null, w = {}) {
-	let T = Array.isArray(_) ? _ : null, E = _ !== null && !Array.isArray(_) ? _ : w, D = T !== null && T.length > 0, { selectedColor: O = s, parentsColor: A = c, childrenColor: j = l, track2ParentsColor: P = u, track2ChildrenColor: R = d, commonColor: V = f, topControlsFontSize: H = p, rightDisplayFontSize: W = m, layoutColumns: K = 10 } = E, ae = U({
-		selectedColor: O,
+function G(a = {}, g = [], _ = null, v = {}) {
+	let E = Array.isArray(_) ? _ : null, D = _ !== null && !Array.isArray(_) ? _ : v, O = E !== null && E.length > 0, { selectedColor: k = c, parentsColor: A = l, childrenColor: M = u, track2ParentsColor: N = d, track2ChildrenColor: I = f, commonColor: z = p, topControlsFontSize: oe = m, rightDisplayFontSize: V = h, layoutColumns: U = 10 } = D, G = H({
+		selectedColor: k,
 		parentsColor: A,
-		childrenColor: j,
-		track2ParentsColor: P,
-		track2ChildrenColor: R
-	}), oe = {
+		childrenColor: M,
+		track2ParentsColor: N,
+		track2ChildrenColor: I
+	}), ce = {
 		"--rbg-parents-color": A,
-		"--rbg-children-color": j
-	}, se = {
-		"--rbg-parents-color": P,
-		"--rbg-children-color": R
-	}, q = I(h, g, T !== null && D ? T.flat() : []), ce = T !== null && D ? N(T) : F(q, K);
-	function J() {
-		let s = n(null), c = n(null), l = t(), [u, d] = r([]), [f, p] = r(""), [m, h] = r(0), [g, _] = r(""), [w, T] = r("parents"), [D, O] = r(""), [A, j] = r("parents"), [N, P] = r(!0), [F, I] = r(!0), [R, U] = r(null), [K, J] = r(null), [Y, le] = r("top"), [X, ue] = r({
+		"--rbg-children-color": M
+	}, le = {
+		"--rbg-parents-color": N,
+		"--rbg-children-color": I
+	}, K = L(a, g, E !== null && O ? E.flat() : []), ue = E !== null && O ? F(E) : ne(K, U);
+	function q() {
+		let a = n(null), c = n(null), l = t(), [u, d] = r([]), [f, p] = r(""), [m, h] = r(0), [g, _] = r(""), [v, E] = r("parents"), [O, k] = r(""), [A, M] = r("parents"), [N, F] = r(!0), [I, ne] = r(!0), [L, H] = r(null), [U, q] = r(null), [J, de] = r("top"), [Y, fe] = r({
 			top: 0,
 			right: 0,
 			graph: 0
-		}), [Z, de] = r(!1), Q = n(!1);
+		}), [X, pe] = r(!1), Z = n(!1);
 		e(() => {
-			Q.current = Z;
-		}, [Z]);
-		let [$, fe] = r(() => /* @__PURE__ */ new Set());
+			Z.current = X;
+		}, [X]);
+		let [Q, me] = r(() => /* @__PURE__ */ new Set());
 		e(() => {
-			let e = s.current;
+			let e = a.current;
 			if (!e) return;
 			let t = i({
 				container: e,
-				elements: ne(q, N, F),
-				style: ae,
+				elements: re(K, N, I),
+				style: G,
 				layout: {
 					name: "preset",
 					fit: !1
 				}
 			});
-			t.on("cxttap", k, (e) => {
-				let t = B(L(e.target, Q.current)), { clientX: n, clientY: r } = e.originalEvent;
-				U({
+			t.on("cxttap", j, (e) => {
+				let t = B(R(e.target, Z.current)), { clientX: n, clientY: r } = e.originalEvent;
+				H({
 					x: n,
 					y: r,
 					copyText: t
 				});
-			}), t.on("dbltap", k, (e) => {
-				J(L(e.target, Q.current));
+			}), t.on("dbltap", j, (e) => {
+				q(R(e.target, Z.current));
 			}), t.on("tap cxttap", (e) => {
-				e.target === t && U(null);
-			}), t.on("tap", "node", () => U(null)), t.on("viewport", () => U(null));
+				e.target === t && H(null);
+			}), t.on("tap", "node", () => H(null)), t.on("viewport", () => H(null));
 			let n = (e) => e.preventDefault();
-			return e.addEventListener("contextmenu", n), te(t, ce, E), requestAnimationFrame(() => t.resize()), d(t.nodes(k).map((e) => ({
+			return e.addEventListener("contextmenu", n), te(t, ue, D), requestAnimationFrame(() => t.resize()), d(t.nodes(j).map((e) => ({
 				id: e.id(),
 				label: e.data("displayLabel")
-			})).sort((e, t) => M(e.label, t.label))), c.current = t, () => {
-				e.removeEventListener("contextmenu", n), U(null), t.destroy(), c.current = null;
+			})).sort((e, t) => P(e.label, t.label))), c.current = t, () => {
+				e.removeEventListener("contextmenu", n), H(null), t.destroy(), c.current = null;
 			};
-		}, [N, F]), e(() => {
+		}, [N, I]), e(() => {
 			let e = c.current;
 			if (!e) return;
-			let t = X.graph;
+			let t = Y.graph;
 			e.batch(() => {
-				e.nodes(k).forEach((e) => {
-					let n = x + t, { width: r, height: i } = ee(e.data("graphLabel"), n);
+				e.nodes(j).forEach((e) => {
+					let n = C + t, { width: r, height: i } = ee(e.data("graphLabel"), n);
 					e.style({
 						"font-size": n,
 						width: r,
 						height: i
 					});
-				}), e.nodes(":parent").style("font-size", S + t);
+				}), e.nodes(":parent").style("font-size", w + t);
 			});
 		}, [
-			X.graph,
+			Y.graph,
 			N,
-			F
+			I
 		]), e(() => {
-			if (!R) return;
+			if (!L) return;
 			let e = (e) => {
-				e.target.closest(".node-context-menu") || U(null);
+				e.target.closest(".node-context-menu") || H(null);
 			}, t = (e) => {
-				e.key === "Escape" && U(null);
+				e.key === "Escape" && H(null);
 			};
 			return document.addEventListener("mousedown", e), document.addEventListener("keydown", t), () => {
 				document.removeEventListener("mousedown", e), document.removeEventListener("keydown", t);
 			};
-		}, [R]);
-		let pe = () => {
-			if (R === null) return;
-			let { copyText: e } = R;
-			U(null), navigator.clipboard.writeText(e).catch((e) => {
+		}, [L]);
+		let he = () => {
+			if (L === null) return;
+			let { copyText: e } = L;
+			H(null), navigator.clipboard.writeText(e).catch((e) => {
 				console.error("Failed to copy:", e);
 			});
-		}, me = (e) => {
-			fe((t) => {
+		}, ge = () => {
+			c.current && y(c.current);
+		}, $ = (e) => {
+			me((t) => {
 				let n = new Set(t);
 				return n.has(e) ? n.delete(e) : n.add(e), n;
 			});
-		}, he = (e) => {
+		}, _e = (e) => {
 			let t = c.current?.getElementById(e);
-			t && !t.empty() && ($.has(e) && me(e), p(e), J(L(t, Z)));
-		}, ge = () => {
-			p(""), J(null), h((e) => e + 1);
+			t && !t.empty() && (Q.has(e) && $(e), p(e), q(R(t, X)));
+		}, ve = () => {
+			p(""), q(null), h((e) => e + 1);
 		};
 		e(() => {
 			let e = c.current;
 			e && e.batch(() => {
-				e.elements().removeClass("hidden"), re(e, $).addClass("hidden");
+				e.elements().removeClass("hidden"), ae(e, Q).addClass("hidden");
 			});
 		}, [
-			$,
+			Q,
 			N,
-			F
+			I
 		]), e(() => {
 			let e = c.current;
 			m && e && (e.stop(), e.resize(), e.animate({ fit: {
@@ -603,94 +616,94 @@ function K(h = {}, g = [], _ = null, w = {}) {
 		}, [
 			f,
 			N,
-			F
+			I
 		]), e(() => {
 			let e = c.current;
-			e && ie(e, [{
+			e && se(e, [{
 				id: g,
-				direction: w
+				direction: v
 			}, {
-				id: D,
+				id: O,
 				direction: A
-			}], V);
+			}], z);
 		}, [
 			g,
-			w,
-			D,
+			v,
+			O,
 			A,
 			N,
-			F
+			I
 		]), e(() => {
 			c.current?.resize();
-		}, [K !== null]), e(() => {
+		}, [U !== null]), e(() => {
 			let e = () => c.current?.resize();
 			return window.addEventListener("resize", e), () => window.removeEventListener("resize", e);
 		}, []);
-		let _e = [{
+		let ye = [{
 			n: 1,
 			id: g,
 			setId: _,
-			direction: w,
-			setDirection: T,
+			direction: v,
+			setDirection: E,
 			style: void 0
 		}, {
 			n: 2,
-			id: D,
-			setId: O,
+			id: O,
+			setId: k,
 			direction: A,
-			setDirection: j,
-			style: se
-		}], ve = [{
+			setDirection: M,
+			style: le
+		}], be = [{
 			label: "Smaller text",
 			symbol: "−",
 			step: -2,
-			atLimit: X[Y] <= y
+			atLimit: Y[J] <= x
 		}, {
 			label: "Larger text",
 			symbol: "+",
-			step: v,
-			atLimit: X[Y] >= b
+			step: b,
+			atLimit: Y[J] >= S
 		}];
-		return /* @__PURE__ */ o("div", {
+		return /* @__PURE__ */ s("div", {
 			className: "rbg-graph",
 			style: {
-				...oe,
-				"--rbg-top-controls-font-size": `calc(${H} + ${X.top}px)`,
-				"--rbg-right-display-font-size": `calc(${W} + ${X.right}px)`
+				...ce,
+				"--rbg-top-controls-font-size": `calc(${oe} + ${Y.top}px)`,
+				"--rbg-right-display-font-size": `calc(${V} + ${Y.right}px)`
 			},
 			children: [
-				/* @__PURE__ */ o("div", {
+				/* @__PURE__ */ s("div", {
 					className: "controls",
 					children: [
-						/* @__PURE__ */ o("span", {
+						/* @__PURE__ */ s("span", {
 							className: "control-group",
-							children: [/* @__PURE__ */ a("label", {
+							children: [/* @__PURE__ */ o("label", {
 								htmlFor: `${l}-search`,
 								children: "Node to Display:"
-							}), /* @__PURE__ */ a(G, {
+							}), /* @__PURE__ */ o(W, {
 								id: `${l}-search`,
 								options: u,
 								selectedId: f,
-								onSelect: (e) => e ? he(e) : ge(),
-								hiddenIds: $,
-								onToggleVisible: me
+								onSelect: (e) => e ? _e(e) : ve(),
+								hiddenIds: Q,
+								onToggleVisible: $
 							})]
 						}),
-						/* @__PURE__ */ o("label", { children: [/* @__PURE__ */ a("input", {
+						/* @__PURE__ */ s("label", { children: [/* @__PURE__ */ o("input", {
 							type: "checkbox",
 							checked: N,
-							onChange: (e) => P(e.target.checked)
+							onChange: (e) => F(e.target.checked)
 						}), "Show Groups"] }),
-						/* @__PURE__ */ o("label", { children: [/* @__PURE__ */ a("input", {
+						/* @__PURE__ */ s("label", { children: [/* @__PURE__ */ o("input", {
 							type: "checkbox",
-							checked: F,
-							onChange: (e) => I(e.target.checked)
+							checked: I,
+							onChange: (e) => ne(e.target.checked)
 						}), "Add Group to Node Name"] }),
-						_e.map(({ n: e, id: t, setId: n, direction: r, setDirection: i, style: s }) => /* @__PURE__ */ o("span", {
+						ye.map(({ n: e, id: t, setId: n, direction: r, setDirection: i, style: a }) => /* @__PURE__ */ s("span", {
 							className: "control-group",
-							style: s,
+							style: a,
 							children: [
-								/* @__PURE__ */ o("label", {
+								/* @__PURE__ */ s("label", {
 									htmlFor: `${l}-track${e}`,
 									children: [
 										"Show Dependency ",
@@ -698,21 +711,21 @@ function K(h = {}, g = [], _ = null, w = {}) {
 										":"
 									]
 								}),
-								/* @__PURE__ */ a(G, {
+								/* @__PURE__ */ o(W, {
 									id: `${l}-track${e}`,
 									options: u,
 									selectedId: t,
 									onSelect: n,
 									noneLabel: "Show Nothing"
 								}),
-								/* @__PURE__ */ o("span", {
+								/* @__PURE__ */ s("span", {
 									className: t ? "track-switch" : "track-switch disabled",
 									children: [
-										/* @__PURE__ */ a("span", {
+										/* @__PURE__ */ o("span", {
 											className: r === "parents" ? "parents on" : "parents",
 											children: "Parents"
 										}),
-										/* @__PURE__ */ a("button", {
+										/* @__PURE__ */ o("button", {
 											type: "button",
 											role: "switch",
 											"aria-checked": r === "children",
@@ -720,9 +733,9 @@ function K(h = {}, g = [], _ = null, w = {}) {
 											className: "switch",
 											disabled: !t,
 											onClick: () => i((e) => e === "parents" ? "children" : "parents"),
-											children: /* @__PURE__ */ a("span", { className: "switch-knob" })
+											children: /* @__PURE__ */ o("span", { className: "switch-knob" })
 										}),
-										/* @__PURE__ */ a("span", {
+										/* @__PURE__ */ o("span", {
 											className: r === "children" ? "children on" : "children",
 											children: "Children"
 										})
@@ -730,113 +743,119 @@ function K(h = {}, g = [], _ = null, w = {}) {
 								})
 							]
 						}, e)),
-						/* @__PURE__ */ o("span", {
+						/* @__PURE__ */ s("span", {
 							className: "help",
-							children: [/* @__PURE__ */ a("button", {
+							children: [/* @__PURE__ */ o("button", {
 								type: "button",
 								className: "help-icon",
 								"aria-label": "Help",
 								"aria-describedby": `${l}-help`,
 								children: "?"
-							}), /* @__PURE__ */ o("span", {
+							}), /* @__PURE__ */ s("span", {
 								id: `${l}-help`,
 								role: "tooltip",
 								className: "help-tooltip",
 								children: [
-									/* @__PURE__ */ a("strong", { children: "Double click" }),
+									/* @__PURE__ */ o("strong", { children: "Double click" }),
 									" on a node to see its information, parents and children.",
-									/* @__PURE__ */ a("br", {}),
-									/* @__PURE__ */ a("strong", { children: "Right click" }),
+									/* @__PURE__ */ o("br", {}),
+									/* @__PURE__ */ o("strong", { children: "Right click" }),
 									" on a node to save the same information to the clipboard."
 								]
 							})]
 						}),
-						/* @__PURE__ */ o("span", {
+						/* @__PURE__ */ s("span", {
 							className: "font-size-buttons",
-							children: [/* @__PURE__ */ a("select", {
+							children: [/* @__PURE__ */ o("select", {
 								"aria-label": "Area whose text size the + and - buttons change",
-								value: Y,
-								onChange: (e) => le(e.target.value),
-								children: C.map(([e, t]) => /* @__PURE__ */ a("option", {
+								value: J,
+								onChange: (e) => de(e.target.value),
+								children: T.map(([e, t]) => /* @__PURE__ */ o("option", {
 									value: e,
 									children: t
 								}, e))
-							}), ve.map(({ label: e, symbol: t, step: n, atLimit: r }) => /* @__PURE__ */ a("button", {
+							}), be.map(({ label: e, symbol: t, step: n, atLimit: r }) => /* @__PURE__ */ o("button", {
 								type: "button",
 								className: "help-icon",
 								"aria-label": e,
 								disabled: r,
-								onClick: () => ue((e) => ({
+								onClick: () => fe((e) => ({
 									...e,
-									[Y]: e[Y] + n
+									[J]: e[J] + n
 								})),
 								children: t
 							}, e))]
+						}),
+						/* @__PURE__ */ o("button", {
+							type: "button",
+							className: "export-svg",
+							onClick: ge,
+							children: "Export SVG"
 						})
 					]
 				}),
-				/* @__PURE__ */ o("div", {
+				/* @__PURE__ */ s("div", {
 					className: "graph-area",
-					children: [/* @__PURE__ */ a("div", {
-						ref: s,
+					children: [/* @__PURE__ */ o("div", {
+						ref: a,
 						className: "cy-container"
-					}), K && /* @__PURE__ */ o("aside", {
+					}), U && /* @__PURE__ */ s("aside", {
 						className: "node-info-panel",
 						children: [
-							/* @__PURE__ */ o("div", {
+							/* @__PURE__ */ s("div", {
 								className: "node-info-header",
-								children: [/* @__PURE__ */ o("h2", { children: [
-									/* @__PURE__ */ a("strong", { children: "Node:" }),
+								children: [/* @__PURE__ */ s("h2", { children: [
+									/* @__PURE__ */ o("strong", { children: "Node:" }),
 									" ",
-									K.name
-								] }), /* @__PURE__ */ a("button", {
+									U.name
+								] }), /* @__PURE__ */ o("button", {
 									type: "button",
-									onClick: () => J(null),
+									onClick: () => q(null),
 									"aria-label": "Close",
 									children: "×"
 								})]
 							}),
-							K.group && /* @__PURE__ */ o("p", { children: [
-								/* @__PURE__ */ a("strong", { children: "Group:" }),
+							U.group && /* @__PURE__ */ s("p", { children: [
+								/* @__PURE__ */ o("strong", { children: "Group:" }),
 								" ",
-								K.group
+								U.group
 							] }),
-							/* @__PURE__ */ o("div", {
+							/* @__PURE__ */ s("div", {
 								className: "track-switch level-switch",
 								children: [
-									/* @__PURE__ */ a("span", {
-										className: Z ? "" : "parents on",
+									/* @__PURE__ */ o("span", {
+										className: X ? "" : "parents on",
 										children: "One level"
 									}),
-									/* @__PURE__ */ a("button", {
+									/* @__PURE__ */ o("button", {
 										type: "button",
 										role: "switch",
-										"aria-checked": Z,
+										"aria-checked": X,
 										"aria-label": "Show all levels of parents and children",
 										className: "switch",
 										onClick: () => {
-											let e = !Z;
-											de(e);
-											let t = c.current?.getElementById(K.id);
-											t && !t.empty() && J(L(t, e));
+											let e = !X;
+											pe(e);
+											let t = c.current?.getElementById(U.id);
+											t && !t.empty() && q(R(t, e));
 										},
-										children: /* @__PURE__ */ a("span", { className: "switch-knob" })
+										children: /* @__PURE__ */ o("span", { className: "switch-knob" })
 									}),
-									/* @__PURE__ */ a("span", {
-										className: Z ? "children on" : "",
+									/* @__PURE__ */ o("span", {
+										className: X ? "children on" : "",
 										children: "All levels"
 									})
 								]
 							}),
-							z(K).map(([e, t]) => /* @__PURE__ */ o("section", { children: [/* @__PURE__ */ o("h3", { children: [
+							ie(U).map(([e, t]) => /* @__PURE__ */ s("section", { children: [/* @__PURE__ */ s("h3", { children: [
 								e,
 								" (",
 								t.length,
 								"):"
-							] }), /* @__PURE__ */ a("ul", { children: t.map((e) => /* @__PURE__ */ a("li", { children: /* @__PURE__ */ o("button", {
+							] }), /* @__PURE__ */ o("ul", { children: t.map((e) => /* @__PURE__ */ o("li", { children: /* @__PURE__ */ s("button", {
 								type: "button",
-								onClick: () => he(e.id),
-								children: [e.name, e.group && /* @__PURE__ */ o("span", { children: [
+								onClick: () => _e(e.id),
+								children: [e.name, e.group && /* @__PURE__ */ s("span", { children: [
 									" (",
 									e.group,
 									")"
@@ -845,24 +864,24 @@ function K(h = {}, g = [], _ = null, w = {}) {
 						]
 					})]
 				}),
-				R && /* @__PURE__ */ a("div", {
+				L && /* @__PURE__ */ o("div", {
 					className: "node-context-menu",
 					style: {
-						left: R.x,
-						top: R.y
+						left: L.x,
+						top: L.y
 					},
 					onContextMenu: (e) => e.preventDefault(),
-					children: /* @__PURE__ */ a("button", {
+					children: /* @__PURE__ */ o("button", {
 						type: "button",
-						onClick: pe,
+						onClick: he,
 						children: "Save to clipboard"
 					})
 				})
 			]
 		});
 	}
-	return J.displayName = "CytoscapeGraph", J;
+	return q.displayName = "CytoscapeGraph", q;
 }
-export { G as NodeSearch, K as create_graph, B as formatNodeInfo, L as getNodeInfo };
+export { W as NodeSearch, G as create_graph, y as downloadSvg, B as formatNodeInfo, R as getNodeInfo };
 
 //# sourceMappingURL=index.js.map