react-beauti-graph 0.0.0-stage → 1.3.0

package/dist/index.js

@@ -0,0 +1,868 @@
+"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";
+// 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 = [
+	["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");
+	} catch {
+		A = null;
+	}
+	return A ? (A.font = `${t}px ${w}`, A.measureText(e).width) : e.length * t * E;
+}
+function ee(e, t = x) {
+	return {
+		width: Math.ceil(j(e ?? "", t)) + 8,
+		height: Math.ceil(t * T) + 8
+	};
+}
+function M(e, t) {
+	return e.localeCompare(t, void 0, {
+		numeric: !0,
+		sensitivity: "base"
+	});
+}
+function N(e = []) {
+	let t = /* @__PURE__ */ new Map();
+	return e.map((e) => e.map((e) => {
+		let n = t.get(e) ?? 0;
+		if (t.set(e, n + 1), n === 0) return e;
+		let r = `${e}(${n})`;
+		return console.warn(`layout: duplicate id "${e}" — renamed to "${r}"`), r;
+	}));
+}
+function te(e, t, n = {}) {
+	let { startX: r = 0, startY: i = 0, offsetX: a = 200, offsetY: o = 200, base: s = 1 } = n, c = /* @__PURE__ */ new Set();
+	t.forEach((t, n) => {
+		t.forEach((t, l) => {
+			let u = t, d = e.getElementById(u);
+			if (d.empty()) {
+				let n = /^(.+)\((\d+)\)$/.exec(t)?.[1];
+				n !== void 0 && e.getElementById(n).nonempty() && (u = n, d = e.getElementById(u), console.warn(`applyLayout: "${t}" not found — using "${u}" instead`));
+			}
+			d.empty() ? console.warn(`applyLayout: node "${t}" not found`) : c.has(u) ? console.warn(`applyLayout: duplicate layout entry for node "${u}" (from "${t}") — keeping the first position`) : (c.add(u), d.position({
+				x: r + (l + s) * a,
+				y: i + (n + s) * o
+			}));
+		});
+	});
+}
+function P(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));
+	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 = []) {
+	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);
+	let o = (e) => {
+		let t = e.replace(/\s+/g, "");
+		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);
+		c.set(t, e), r.push({ data: {
+			id: e,
+			class: O,
+			label: t
+		} });
+		for (let e of n) {
+			let n = s.get(e) ?? [], r = e;
+			if (n.length > 0) {
+				let t = n.length;
+				for (r = `${e}(${t})`; i.has(r);) r = `${e}(${++t})`;
+				i.add(r);
+			}
+			n.push({
+				actualId: r,
+				folderLabel: t
+			}), s.set(e, n);
+		}
+	}
+	let l = [];
+	for (let [e, t] of s) for (let { actualId: n, folderLabel: r } of t) l.push({
+		actualId: n,
+		originalId: e,
+		folderLabel: r
+	});
+	for (let e of a) s.has(e) || l.push({
+		actualId: e,
+		originalId: e,
+		folderLabel: null
+	});
+	for (let { actualId: e, originalId: t, folderLabel: n } of l) {
+		let i = {
+			id: e,
+			class: D,
+			rawLabel: t,
+			displayLabel: n ? `${t} (${n})` : t,
+			group: n
+		};
+		n && (i.parent = c.get(n)), r.push({ data: i });
+	}
+	let u = (e) => s.get(e)?.[0]?.actualId ?? e, d = (e, t) => `${e}->${t}`, f = /* @__PURE__ */ new Map();
+	return t.forEach(([e, t], n) => {
+		let a = u(e), o = u(t);
+		if (f.has(d(a, o))) return;
+		let s = f.get(d(o, a));
+		if (s) {
+			s.classes = "bidirectional";
+			return;
+		}
+		let c = { data: {
+			id: P(`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 {
+			...e,
+			data: { ...e.data }
+		};
+		let t = n ? e.data.displayLabel : e.data.rawLabel;
+		return {
+			...e,
+			data: {
+				...e.data,
+				graphLabel: t
+			}
+		};
+	});
+}
+function L(e, t = !1) {
+	let n = (e) => ({
+		id: e.id(),
+		name: e.data("rawLabel") ?? e.id(),
+		group: e.data("group") ?? null
+	}), r = /* @__PURE__ */ new Map(), i = /* @__PURE__ */ new Map();
+	if (e.connectedEdges().forEach((t) => {
+		let a = t.hasClass("bidirectional");
+		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) => {
+			t.same(e) || r.set(t.id(), n(t));
+		});
+	}
+	let a = (e, t) => M(e.name, t.name);
+	return {
+		...n(e),
+		parents: [...r.values()].sort(a),
+		children: [...i.values()].sort(a)
+	};
+}
+function R(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;
+		t.connectedEdges().forEach((e) => {
+			let o = e.hasClass("bidirectional"), s = null;
+			e.target().same(t) && (n || o) && (s = e.source()), e.source().same(t) && (!n || o) && (s = e.target()), s && (r = r.union(e), i.has(s.id()) || (i.add(s.id()), a.push(s)));
+		});
+	}
+	return r.union(e.cy().nodes().filter((e) => i.has(e.id())));
+}
+function z(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)));
+	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));
+	return n.join("\n");
+}
+function V(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);
+	if (n === null) return null;
+	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);
+	return n === null ? "#ffffff" : `#${[
+		16,
+		8,
+		0
+	].map((e) => {
+		let r = n >> e & 255;
+		return Math.round(r + (255 - r) * t).toString(16).padStart(2, "0");
+	}).join("")}`;
+}
+function ie(e, t, n = f) {
+	let r = ["track", "track2"], i = r.flatMap((e) => [
+		`${e}-parents`,
+		`${e}-children`,
+		`${e}-root`
+	]).concat("faded", "track-mixed").join(" ");
+	e.batch(() => {
+		e.elements().removeClass(i).removeData("trackMixColor trackMixFill");
+		let a = t.map(({ id: t, direction: n }, i) => {
+			if (!t) return null;
+			let a = e.getElementById(t);
+			if (a.empty()) return null;
+			let o = R(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;
+		let [s, c] = a;
+		s && c && s.intersection(c).forEach((e) => {
+			e.data({
+				trackMixColor: n,
+				trackMixFill: H(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 } = {}) {
+	return [
+		{
+			selector: "node",
+			style: {
+				"background-color": g,
+				label: "data(graphLabel)",
+				shape: "rectangle",
+				"font-family": w,
+				"font-size": x,
+				color: h,
+				"border-width": 2,
+				"border-color": h,
+				"text-valign": "center",
+				"text-halign": "center"
+			}
+		},
+		{
+			selector: "node:parent",
+			style: {
+				"background-color": _,
+				"background-opacity": .5,
+				"border-style": "dashed",
+				label: "data(label)",
+				"text-valign": "top",
+				"font-size": S,
+				"font-weight": "bold",
+				padding: "18px"
+			}
+		},
+		{
+			selector: ".selected",
+			style: {
+				"overlay-color": e,
+				"overlay-opacity": .35,
+				"overlay-padding": 8
+			}
+		},
+		{
+			selector: "edge",
+			style: {
+				"line-color": h,
+				width: 2,
+				"curve-style": "bezier",
+				"target-arrow-shape": "vee",
+				"target-arrow-color": h,
+				"target-arrow-fill": "filled",
+				"arrow-scale": 2
+			}
+		},
+		{
+			selector: "edge:loop",
+			style: {
+				"loop-direction": "0deg",
+				"loop-sweep": "-50deg",
+				"control-point-step-size": 70
+			}
+		},
+		{
+			selector: "edge.bidirectional",
+			style: {
+				"source-arrow-shape": "vee",
+				"source-arrow-color": h,
+				"source-arrow-fill": "filled"
+			}
+		},
+		{
+			selector: ".faded",
+			style: { opacity: .15 }
+		},
+		...[
+			[
+				"track-parents",
+				"track-root",
+				t
+			],
+			[
+				"track-children",
+				"track-root",
+				n
+			],
+			[
+				"track2-parents",
+				"track2-root",
+				r
+			],
+			[
+				"track2-children",
+				"track2-root",
+				i
+			]
+		].flatMap(([e, t, n]) => [
+			{
+				selector: `edge.${e}`,
+				style: {
+					"line-color": n,
+					"target-arrow-color": n,
+					"source-arrow-color": n,
+					width: 4
+				}
+			},
+			{
+				selector: `node.${e}`,
+				style: {
+					"border-color": n,
+					"border-width": 3
+				}
+			},
+			{
+				selector: `node.${e}.${t}`,
+				style: {
+					"border-width": 5,
+					"background-color": H(n)
+				}
+			}
+		]),
+		{
+			selector: "edge.track-mixed",
+			style: {
+				"line-color": "data(trackMixColor)",
+				"target-arrow-color": "data(trackMixColor)",
+				"source-arrow-color": "data(trackMixColor)",
+				width: 5
+			}
+		},
+		{
+			selector: "node.track-mixed",
+			style: {
+				"border-color": "data(trackMixColor)",
+				"border-width": 4
+			}
+		},
+		{
+			selector: "node.track-mixed.track-root, node.track-mixed.track2-root",
+			style: {
+				"border-width": 6,
+				"background-color": "data(trackMixFill)"
+			}
+		},
+		{
+			selector: ".hidden",
+			style: { display: "none" }
+		}
+	];
+}
+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);
+	C !== S && (w(S), p(S));
+	let T = m.trim().toLowerCase(), E = T ? i.filter((e) => e.label.toLowerCase().includes(T)) : i, D = {
+		id: "",
+		label: l
+	}, O = !T || l.toLowerCase().includes(T) ? [D, ...E] : E, k = () => {
+		h(""), y(0), _(!0);
+	}, A = () => {
+		_(!1), h(""), p(S);
+	}, j = (e) => {
+		c(e.id), p(e.id ? e.label : ""), h(""), _(!1);
+	};
+	return e(() => {
+		if (!g) return;
+		let e = (e) => {
+			b.current?.contains(e.target) || A();
+		};
+		return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+	}), e(() => {
+		x.current?.children[v]?.scrollIntoView({ block: "nearest" });
+	}, [v, g]), /* @__PURE__ */ o("div", {
+		className: "node-search",
+		ref: b,
+		children: [
+			/* @__PURE__ */ a("input", {
+				id: t,
+				type: "text",
+				value: f,
+				placeholder: "-- type to search --",
+				autoComplete: "off",
+				onChange: (e) => {
+					p(e.target.value), h(e.target.value), y(0), _(!0);
+				},
+				onFocus: (e) => {
+					e.target.select(), k();
+				},
+				onClick: () => {
+					g || k();
+				},
+				onKeyDown: (e) => {
+					if (e.key === "ArrowDown") e.preventDefault(), g || _(!0), y((e) => Math.min(e + 1, O.length - 1));
+					else if (e.key === "ArrowUp") e.preventDefault(), y((e) => Math.max(e - 1, 0));
+					else if (e.key === "Enter" && g) {
+						let t = O[v];
+						t && (e.preventDefault(), j(t));
+					} else e.key === "Escape" && A();
+				}
+			}),
+			f && /* @__PURE__ */ a("button", {
+				type: "button",
+				className: "node-search-clear",
+				"aria-label": "Clear",
+				onClick: () => {
+					c(""), p(""), h("");
+				},
+				children: "×"
+			}),
+			g && /* @__PURE__ */ a("ul", {
+				className: "node-search-list",
+				ref: x,
+				role: "listbox",
+				children: O.length === 0 ? /* @__PURE__ */ a("li", {
+					className: "node-search-empty",
+					role: "option",
+					"aria-selected": "false",
+					"aria-disabled": "true",
+					children: "no match"
+				}) : O.map((e, t) => /* @__PURE__ */ o("li", {
+					role: "option",
+					"aria-selected": t === v,
+					className: [t === v && "active", u?.has(e.id) && "off"].filter(Boolean).join(" ") || void 0,
+					onMouseDown: (t) => {
+						t.preventDefault(), j(e);
+					},
+					onMouseEnter: () => y(t),
+					children: [d && e.id && /* @__PURE__ */ a("input", {
+						type: "checkbox",
+						checked: !u?.has(e.id),
+						"aria-label": `Show ${e.label}`,
+						onMouseDown: (e) => {
+							e.preventDefault(), e.stopPropagation();
+						},
+						onClick: (e) => e.stopPropagation(),
+						onChange: () => d(e.id)
+					}), e.label]
+				}, e.id || "__none__"))
+			})
+		]
+	});
+}
+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,
+		parentsColor: A,
+		childrenColor: j,
+		track2ParentsColor: P,
+		track2ChildrenColor: R
+	}), oe = {
+		"--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({
+			top: 0,
+			right: 0,
+			graph: 0
+		}), [Z, de] = r(!1), Q = n(!1);
+		e(() => {
+			Q.current = Z;
+		}, [Z]);
+		let [$, fe] = r(() => /* @__PURE__ */ new Set());
+		e(() => {
+			let e = s.current;
+			if (!e) return;
+			let t = i({
+				container: e,
+				elements: ne(q, N, F),
+				style: ae,
+				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({
+					x: n,
+					y: r,
+					copyText: t
+				});
+			}), t.on("dbltap", k, (e) => {
+				J(L(e.target, Q.current));
+			}), t.on("tap cxttap", (e) => {
+				e.target === t && U(null);
+			}), t.on("tap", "node", () => U(null)), t.on("viewport", () => U(null));
+			let n = (e) => e.preventDefault();
+			return e.addEventListener("contextmenu", n), te(t, ce, E), requestAnimationFrame(() => t.resize()), d(t.nodes(k).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;
+			};
+		}, [N, F]), e(() => {
+			let e = c.current;
+			if (!e) return;
+			let t = X.graph;
+			e.batch(() => {
+				e.nodes(k).forEach((e) => {
+					let n = x + 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);
+			});
+		}, [
+			X.graph,
+			N,
+			F
+		]), e(() => {
+			if (!R) return;
+			let e = (e) => {
+				e.target.closest(".node-context-menu") || U(null);
+			}, t = (e) => {
+				e.key === "Escape" && U(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) => {
+				console.error("Failed to copy:", e);
+			});
+		}, me = (e) => {
+			fe((t) => {
+				let n = new Set(t);
+				return n.has(e) ? n.delete(e) : n.add(e), n;
+			});
+		}, he = (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);
+		};
+		e(() => {
+			let e = c.current;
+			e && e.batch(() => {
+				e.elements().removeClass("hidden"), re(e, $).addClass("hidden");
+			});
+		}, [
+			$,
+			N,
+			F
+		]), e(() => {
+			let e = c.current;
+			m && e && (e.stop(), e.resize(), e.animate({ fit: {
+				eles: e.elements().not(".hidden"),
+				padding: 30
+			} }, { duration: 400 }));
+		}, [m]), e(() => {
+			let e = c.current;
+			if (!e || (e.nodes().removeClass("selected"), !f)) return;
+			let t = e.getElementById(f);
+			t.nonempty() && (t.addClass("selected"), e.animate({
+				center: { eles: t },
+				zoom: 1.8
+			}, { duration: 400 }));
+		}, [
+			f,
+			N,
+			F
+		]), e(() => {
+			let e = c.current;
+			e && ie(e, [{
+				id: g,
+				direction: w
+			}, {
+				id: D,
+				direction: A
+			}], V);
+		}, [
+			g,
+			w,
+			D,
+			A,
+			N,
+			F
+		]), e(() => {
+			c.current?.resize();
+		}, [K !== null]), e(() => {
+			let e = () => c.current?.resize();
+			return window.addEventListener("resize", e), () => window.removeEventListener("resize", e);
+		}, []);
+		let _e = [{
+			n: 1,
+			id: g,
+			setId: _,
+			direction: w,
+			setDirection: T,
+			style: void 0
+		}, {
+			n: 2,
+			id: D,
+			setId: O,
+			direction: A,
+			setDirection: j,
+			style: se
+		}], ve = [{
+			label: "Smaller text",
+			symbol: "−",
+			step: -2,
+			atLimit: X[Y] <= y
+		}, {
+			label: "Larger text",
+			symbol: "+",
+			step: v,
+			atLimit: X[Y] >= b
+		}];
+		return /* @__PURE__ */ o("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)`
+			},
+			children: [
+				/* @__PURE__ */ o("div", {
+					className: "controls",
+					children: [
+						/* @__PURE__ */ o("span", {
+							className: "control-group",
+							children: [/* @__PURE__ */ a("label", {
+								htmlFor: `${l}-search`,
+								children: "Node to Display:"
+							}), /* @__PURE__ */ a(G, {
+								id: `${l}-search`,
+								options: u,
+								selectedId: f,
+								onSelect: (e) => e ? he(e) : ge(),
+								hiddenIds: $,
+								onToggleVisible: me
+							})]
+						}),
+						/* @__PURE__ */ o("label", { children: [/* @__PURE__ */ a("input", {
+							type: "checkbox",
+							checked: N,
+							onChange: (e) => P(e.target.checked)
+						}), "Show Groups"] }),
+						/* @__PURE__ */ o("label", { children: [/* @__PURE__ */ a("input", {
+							type: "checkbox",
+							checked: F,
+							onChange: (e) => I(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", {
+							className: "control-group",
+							style: s,
+							children: [
+								/* @__PURE__ */ o("label", {
+									htmlFor: `${l}-track${e}`,
+									children: [
+										"Show Dependency ",
+										e,
+										":"
+									]
+								}),
+								/* @__PURE__ */ a(G, {
+									id: `${l}-track${e}`,
+									options: u,
+									selectedId: t,
+									onSelect: n,
+									noneLabel: "Show Nothing"
+								}),
+								/* @__PURE__ */ o("span", {
+									className: t ? "track-switch" : "track-switch disabled",
+									children: [
+										/* @__PURE__ */ a("span", {
+											className: r === "parents" ? "parents on" : "parents",
+											children: "Parents"
+										}),
+										/* @__PURE__ */ a("button", {
+											type: "button",
+											role: "switch",
+											"aria-checked": r === "children",
+											"aria-label": `Show Dependency ${e}: track children instead of parents`,
+											className: "switch",
+											disabled: !t,
+											onClick: () => i((e) => e === "parents" ? "children" : "parents"),
+											children: /* @__PURE__ */ a("span", { className: "switch-knob" })
+										}),
+										/* @__PURE__ */ a("span", {
+											className: r === "children" ? "children on" : "children",
+											children: "Children"
+										})
+									]
+								})
+							]
+						}, e)),
+						/* @__PURE__ */ o("span", {
+							className: "help",
+							children: [/* @__PURE__ */ a("button", {
+								type: "button",
+								className: "help-icon",
+								"aria-label": "Help",
+								"aria-describedby": `${l}-help`,
+								children: "?"
+							}), /* @__PURE__ */ o("span", {
+								id: `${l}-help`,
+								role: "tooltip",
+								className: "help-tooltip",
+								children: [
+									/* @__PURE__ */ a("strong", { children: "Double click" }),
+									" on a node to see its information, parents and children.",
+									/* @__PURE__ */ a("br", {}),
+									/* @__PURE__ */ a("strong", { children: "Right click" }),
+									" on a node to save the same information to the clipboard."
+								]
+							})]
+						}),
+						/* @__PURE__ */ o("span", {
+							className: "font-size-buttons",
+							children: [/* @__PURE__ */ a("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: e,
+									children: t
+								}, e))
+							}), ve.map(({ label: e, symbol: t, step: n, atLimit: r }) => /* @__PURE__ */ a("button", {
+								type: "button",
+								className: "help-icon",
+								"aria-label": e,
+								disabled: r,
+								onClick: () => ue((e) => ({
+									...e,
+									[Y]: e[Y] + n
+								})),
+								children: t
+							}, e))]
+						})
+					]
+				}),
+				/* @__PURE__ */ o("div", {
+					className: "graph-area",
+					children: [/* @__PURE__ */ a("div", {
+						ref: s,
+						className: "cy-container"
+					}), K && /* @__PURE__ */ o("aside", {
+						className: "node-info-panel",
+						children: [
+							/* @__PURE__ */ o("div", {
+								className: "node-info-header",
+								children: [/* @__PURE__ */ o("h2", { children: [
+									/* @__PURE__ */ a("strong", { children: "Node:" }),
+									" ",
+									K.name
+								] }), /* @__PURE__ */ a("button", {
+									type: "button",
+									onClick: () => J(null),
+									"aria-label": "Close",
+									children: "×"
+								})]
+							}),
+							K.group && /* @__PURE__ */ o("p", { children: [
+								/* @__PURE__ */ a("strong", { children: "Group:" }),
+								" ",
+								K.group
+							] }),
+							/* @__PURE__ */ o("div", {
+								className: "track-switch level-switch",
+								children: [
+									/* @__PURE__ */ a("span", {
+										className: Z ? "" : "parents on",
+										children: "One level"
+									}),
+									/* @__PURE__ */ a("button", {
+										type: "button",
+										role: "switch",
+										"aria-checked": Z,
+										"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));
+										},
+										children: /* @__PURE__ */ a("span", { className: "switch-knob" })
+									}),
+									/* @__PURE__ */ a("span", {
+										className: Z ? "children on" : "",
+										children: "All levels"
+									})
+								]
+							}),
+							z(K).map(([e, t]) => /* @__PURE__ */ o("section", { children: [/* @__PURE__ */ o("h3", { children: [
+								e,
+								" (",
+								t.length,
+								"):"
+							] }), /* @__PURE__ */ a("ul", { children: t.map((e) => /* @__PURE__ */ a("li", { children: /* @__PURE__ */ o("button", {
+								type: "button",
+								onClick: () => he(e.id),
+								children: [e.name, e.group && /* @__PURE__ */ o("span", { children: [
+									" (",
+									e.group,
+									")"
+								] })]
+							}) }, e.id)) })] }, e))
+						]
+					})]
+				}),
+				R && /* @__PURE__ */ a("div", {
+					className: "node-context-menu",
+					style: {
+						left: R.x,
+						top: R.y
+					},
+					onContextMenu: (e) => e.preventDefault(),
+					children: /* @__PURE__ */ a("button", {
+						type: "button",
+						onClick: pe,
+						children: "Save to clipboard"
+					})
+				})
+			]
+		});
+	}
+	return J.displayName = "CytoscapeGraph", J;
+}
+export { G as NodeSearch, K as create_graph, B as formatNodeInfo, L as getNodeInfo };
+
+//# sourceMappingURL=index.js.map