@fxhash/open-form-graph 0.0.3 → 0.0.4

package/dist/{OpenFormGraph-i8VSTamk.js → OpenFormGraph-Ccizmxbo.js}

@@ -1,14 +1,228 @@
-import { DEFAULT_GRAPH_CONFIG, VOID_DETACH_ID, VOID_ROOT_ID, useOpenFormGraph } from "./provider-PqOen2FE.js";
+import { DEFAULT_GRAPH_CONFIG, VOID_DETACH_ID, VOID_ROOT_ID, useOpenFormGraph } from "./provider-CPq89n3a.js";
 import { useEffect, useRef } from "react";
-import { jsx } from "react/jsx-runtime";
-import { forceCenter, forceCollide, forceManyBody, forceRadial, forceSimulation } from "d3-force";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { forceCenter, forceCollide, forceManyBody, forceSimulation } from "d3-force";
+import { EventEmitter, MappedArray, xorshiftString } from "@fxhash/utils";
+import groupBy from "lodash.groupby";
 import { scaleLinear, scaleLog } from "d3-scale";
-import { EventEmitter, float2hex, xorshiftString } from "@fxhash/utils";
 
+//#region src/util/canvas.ts
+/**
+* draws a circle on the canvas
+* @param ctx - The canvas rendering context
+* @param x - The x-coordinate of the circle's center
+* @param y - The y-coordinate of the circle's center
+* @param radius - The radius of the circle (default is 5)
+* @param options - Optional parameters for styling the circle
+* @param options.fill - Whether to fill the circle (default is true)
+* @param options.fillStyle - The fill color of the circle
+* @param options.stroke - Whether to stroke the circle (default is false)
+* @param options.strokeStyle - The stroke color of the circle
+* @param options.lineWidth - The width of the stroke (default is 0.2)
+* @returns void
+*/
+function circle(ctx, x, y, radius = 5, options) {
+	const { fill = true, fillStyle, stroke = false, strokeStyle, lineWidth = .2 } = options || {};
+	ctx.save();
+	if (fillStyle !== void 0) ctx.fillStyle = fillStyle;
+	if (strokeStyle !== void 0) ctx.strokeStyle = strokeStyle;
+	if (lineWidth !== void 0) ctx.lineWidth = lineWidth;
+	ctx.beginPath();
+	ctx.arc(x, y, radius, 0, 2 * Math.PI);
+	ctx.closePath();
+	if (fill) ctx.fill();
+	if (stroke) ctx.stroke();
+	ctx.restore();
+}
+/**
+* draws a rectangle on the canvas
+* @param ctx - The canvas rendering context
+* @param x - The x-coordinate of the rectangle's top-left corner
+* @param y - The y-coordinate of the rectangle's top-left corner
+* @param width - The width of the rectangle
+* @param height - The height of the rectangle
+* @param options - Optional parameters for styling the rectangle
+* @param options.fill - Whether to fill the rectangle (default is true)
+* @param options.fillStyle - The fill color of the rectangle
+* @param options.stroke - Whether to stroke the rectangle (default is false)
+* @param options.strokeStyle - The stroke color of the rectangle
+* @param options.lineWidth - The width of the stroke (default is 0.2)
+* @param options.borderRadius - The radius of the corners (default is 0)
+* @returns void
+*/
+function rect(ctx, x, y, width, height, options) {
+	const { fill = true, fillStyle, stroke = false, strokeStyle, lineWidth = .2, borderRadius = 0 } = options || {};
+	ctx.save();
+	if (fillStyle !== void 0) ctx.fillStyle = fillStyle;
+	if (strokeStyle !== void 0) ctx.strokeStyle = strokeStyle;
+	if (lineWidth !== void 0) ctx.lineWidth = lineWidth;
+	const r = Math.min(borderRadius, width / 2, height / 2);
+	ctx.beginPath();
+	if (r > 0) {
+		ctx.moveTo(x + r, y);
+		ctx.lineTo(x + width - r, y);
+		ctx.quadraticCurveTo(x + width, y, x + width, y + r);
+		ctx.lineTo(x + width, y + height - r);
+		ctx.quadraticCurveTo(x + width, y + height, x + width - r, y + height);
+		ctx.lineTo(x + r, y + height);
+		ctx.quadraticCurveTo(x, y + height, x, y + height - r);
+		ctx.lineTo(x, y + r);
+		ctx.quadraticCurveTo(x, y, x + r, y);
+	} else ctx.rect(x, y, width, height);
+	ctx.closePath();
+	if (fill) ctx.fill();
+	if (stroke) ctx.stroke();
+	ctx.restore();
+}
+/**
+* draws an image on the canvas with optional border radius and opacity
+* @param ctx - The canvas rendering context
+* @param image - The HTMLImageElement to draw
+* @param x - The x-coordinate of the image's top-left corner
+* @param y - The y-coordinate of the image's top-left corner
+* @param width - The width of the image
+* @param height - The height of the image
+* @param borderRadius - The radius of the corners (default is 0)
+* @param opacity - The opacity of the image (default is 1.0)
+* @param bgColor - Optional background color to fill the clipped area
+* @returns void
+*/
+function img(ctx, image, x, y, width, height, borderRadius = 0, opacity = 1, bgColor) {
+	ctx.save();
+	ctx.beginPath();
+	ctx.globalAlpha = 1;
+	if (borderRadius > 0) {
+		const r = Math.min(borderRadius, width / 2, height / 2);
+		ctx.moveTo(x + r, y);
+		ctx.lineTo(x + width - r, y);
+		ctx.quadraticCurveTo(x + width, y, x + width, y + r);
+		ctx.lineTo(x + width, y + height - r);
+		ctx.quadraticCurveTo(x + width, y + height, x + width - r, y + height);
+		ctx.lineTo(x + r, y + height);
+		ctx.quadraticCurveTo(x, y + height, x, y + height - r);
+		ctx.lineTo(x, y + r);
+		ctx.quadraticCurveTo(x, y, x + r, y);
+	} else ctx.rect(x, y, width, height);
+	ctx.closePath();
+	if (bgColor && opacity < 1) {
+		ctx.save();
+		ctx.fillStyle = bgColor;
+		ctx.fill();
+		ctx.restore();
+	}
+	ctx.clip();
+	ctx.globalAlpha = opacity;
+	ctx.drawImage(image, x, y, width, height);
+	ctx.restore();
+}
+function hexagon(ctx, x, y, radius, options) {
+	const { fill = true, fillStyle, stroke = false, strokeStyle, lineWidth = .2, rotation = 0, borderRadius = 0 } = options || {};
+	ctx.save();
+	if (fillStyle !== void 0) ctx.fillStyle = fillStyle;
+	if (strokeStyle !== void 0) ctx.strokeStyle = strokeStyle;
+	if (lineWidth !== void 0) ctx.lineWidth = lineWidth;
+	const sides = 6;
+	const angleStep = Math.PI * 2 / sides;
+	ctx.beginPath();
+	const points = [];
+	for (let i = 0; i < sides; i++) {
+		const angle = rotation + i * angleStep;
+		points.push({
+			x: x + radius * Math.cos(angle),
+			y: y + radius * Math.sin(angle)
+		});
+	}
+	if (borderRadius > 0) {
+		const maxBorderRadius = Math.min(borderRadius, radius / 3);
+		for (let i = 0; i < sides; i++) {
+			const current = points[i];
+			const next = points[(i + 1) % sides];
+			const prev = points[(i - 1 + sides) % sides];
+			const toPrev = {
+				x: prev.x - current.x,
+				y: prev.y - current.y
+			};
+			const toNext = {
+				x: next.x - current.x,
+				y: next.y - current.y
+			};
+			const lenPrev = Math.sqrt(toPrev.x * toPrev.x + toPrev.y * toPrev.y);
+			const lenNext = Math.sqrt(toNext.x * toNext.x + toNext.y * toNext.y);
+			const normPrev = {
+				x: toPrev.x / lenPrev,
+				y: toPrev.y / lenPrev
+			};
+			const normNext = {
+				x: toNext.x / lenNext,
+				y: toNext.y / lenNext
+			};
+			const cpPrev = {
+				x: current.x + normPrev.x * maxBorderRadius,
+				y: current.y + normPrev.y * maxBorderRadius
+			};
+			const cpNext = {
+				x: current.x + normNext.x * maxBorderRadius,
+				y: current.y + normNext.y * maxBorderRadius
+			};
+			if (i === 0) ctx.moveTo(cpPrev.x, cpPrev.y);
+			else ctx.lineTo(cpPrev.x, cpPrev.y);
+			ctx.quadraticCurveTo(current.x, current.y, cpNext.x, cpNext.y);
+		}
+	} else {
+		ctx.moveTo(points[0].x, points[0].y);
+		for (let i = 1; i < sides; i++) ctx.lineTo(points[i].x, points[i].y);
+	}
+	ctx.closePath();
+	if (fill) ctx.fill();
+	if (stroke) ctx.stroke();
+	ctx.restore();
+}
+
+//#endregion
+//#region src/util/color.ts
+/**
+* Some utility functions to handle colors
+*/
+function color(rgb) {
+	const colorHandler = function(arg) {
+		if (typeof arg === "number") return `rgba(${rgb[0]},${rgb[1]},${rgb[2]},${arg})`;
+		if (typeof arg === "function") {
+			const transformedRGB = arg(rgb);
+			return color(transformedRGB);
+		}
+		return `rgb(${rgb[0]},${rgb[1]},${rgb[2]})`;
+	};
+	colorHandler.rgb = rgb;
+	return colorHandler;
+}
+/**
+* Dims a color to white or black
+* @param color An array of 3 numbers representing RGB values (0-255)
+* @param dimFactor A value between 0 and 1 where 0 is completely black and 1 is the original color
+* @returns A new array with the dimmed RGB values
+*/
+function dim(factor = .6, white = true) {
+	const base = white ? 255 : 0;
+	return function(rgb) {
+		return [
+			Math.round(rgb[0] + (base - rgb[0]) * (1 - factor)),
+			Math.round(rgb[1] + (base - rgb[1]) * (1 - factor)),
+			Math.round(rgb[2] + (base - rgb[2]) * (1 - factor))
+		];
+	};
+}
+
+//#endregion
 //#region src/util/types.ts
 function isSimNode(node) {
 	return typeof node === "object" && "id" in node;
 }
+function getNodeId(node) {
+	return isSimNode(node) ? node.id : node.toString();
+}
+function getLinkId(link) {
+	return `${getNodeId(link.target)}-${getNodeId(link.source)}`;
+}
 function isSimLink(link) {
 	return typeof link === "object" && "source" in link && typeof link.source !== "string";
 }
@@ -19,25 +233,18 @@ function isCustomHighlight(highlight) {
 
 //#endregion
 //#region src/util/graph.ts
-function getNodeId(n) {
-	return typeof n === "object" && n !== null && "id" in n ? n.id : n;
-}
-function getParents(id, links) {
-	return links.filter((l) => {
-		const targetId = isSimNode(l.target) ? l.target.id : l.target;
-		return targetId === id;
-	}).map((link) => isSimNode(link.source) ? link.source.id : link.source.toString());
+function getParent(id, links) {
+	const linkToParent = links.maps.targetId.get(id);
+	if (!linkToParent) return null;
+	return getNodeId(linkToParent.source);
 }
 function getAllParentsUntil(nodeId, links, stopAtId) {
-	const parent = getParents(nodeId, links)[0];
-	if (!parent || parent === stopAtId) return [];
+	const parent = getParent(nodeId, links);
+	if (parent === null || parent === stopAtId) return [];
 	return [parent, ...getAllParentsUntil(parent, links, stopAtId)];
 }
 function getChildren(id, links) {
-	return links.filter((l) => {
-		const sourceId = isSimNode(l.source) ? l.source.id : l.source;
-		return sourceId === id;
-	}).map((link) => link.target.toString());
+	return (links.maps.sourceId.get(id) || []).map((link) => getNodeId(link.target));
 }
 function getClusterSize(id, links) {
 	const children = getChildren(id, links);
@@ -47,51 +254,46 @@ function getClusterSize(id, links) {
 }
 function getNodeDepth(id, links) {
 	function getDepth(id$1, depth) {
-		const parents = getParents(id$1, links);
-		if (parents.length === 0) return depth;
-		return getDepth(parents[0], depth + 1);
+		const parent = getParent(id$1, links);
+		if (parent === null) return depth;
+		return getDepth(parent, depth + 1);
 	}
 	return getDepth(id, 0);
 }
 function getRootParent(id, links, stop) {
 	let currentId = id;
 	while (true) {
-		const parents = getParents(currentId, links);
-		if (stop && parents.includes(stop)) return currentId;
-		if (parents.length === 0) return currentId;
-		currentId = parents[0];
+		const parent = getParent(currentId, links);
+		if (stop && parent === stop) return currentId;
+		if (parent === null) return currentId;
+		currentId = parent;
 	}
 }
 function hasOnlyLeafs(id, links) {
-	const children = getChildren(id, links);
-	return children.every((childId) => getChildren(childId, links).length === 0);
+	return getChildren(id, links).every((childId) => getChildren(childId, links).length === 0);
 }
 function getNodeSubgraph(nodeId, nodes, links, rootId) {
-	const nodesById = Object.fromEntries(nodes.map((n) => [n.id, n]));
-	const parentSet = new Set();
-	const childSet = new Set();
-	const subLinks = new Set();
+	const parentSet = /* @__PURE__ */ new Set();
+	const childSet = /* @__PURE__ */ new Set();
+	const subLinks = /* @__PURE__ */ new Set();
 	let currentId = nodeId;
 	while (currentId !== rootId) {
-		const parentLink = links.find((l) => {
-			const targetId = isSimNode(l.target) ? l.target.id : l.target;
-			return targetId === currentId;
-		});
+		const parentLink = links.maps.targetId.get(currentId);
 		if (!parentLink) break;
-		const parentId = isSimNode(parentLink.source) ? parentLink.source.id : parentLink.source;
-		if (parentSet.has(parentId.toString())) break;
-		parentSet.add(parentId.toString());
+		const parentId = getNodeId(parentLink.source);
+		if (parentSet.has(parentId)) break;
+		parentSet.add(parentId);
 		subLinks.add(parentLink);
-		currentId = parentId.toString();
+		currentId = parentId;
 	}
 	function collectChildren(id) {
-		for (const link of links) {
-			const sourceId = isSimNode(link.source) ? link.source.id : link.source;
-			const targetId = isSimNode(link.target) ? link.target.id : link.target;
-			if (sourceId === id && !childSet.has(targetId.toString())) {
-				childSet.add(targetId.toString());
+		for (const link of links.values) {
+			const sourceId = getNodeId(link.source);
+			const targetId = getNodeId(link.target);
+			if (sourceId === id && !childSet.has(targetId)) {
+				childSet.add(targetId);
 				subLinks.add(link);
-				collectChildren(targetId.toString());
+				collectChildren(targetId);
 			}
 		}
 	}
@@ -102,59 +304,390 @@ function getNodeSubgraph(nodeId, nodes, links, rootId) {
 		...childSet
 	]);
 	const filteredLinks = Array.from(subLinks).filter((link) => {
-		const sourceId = isSimNode(link.source) ? link.source.id : link.source;
-		const targetId = isSimNode(link.target) ? link.target.id : link.target;
+		const sourceId = getNodeId(link.source);
+		const targetId = getNodeId(link.target);
 		return validIds.has(sourceId.toString()) && validIds.has(targetId.toString());
 	});
-	const allNodeIds = Array.from(validIds);
-	const subNodes = allNodeIds.map((id) => nodesById[id]).filter(Boolean);
-	return {
+	const subNodes = Array.from(validIds).map((id) => nodes.maps.id.get(id)).filter(Boolean);
+	return newGraphData({
 		nodes: subNodes,
 		links: filteredLinks
-	};
-}
-
-//#endregion
-//#region src/util/img.ts
-function loadHTMLImageElement(src) {
-	return new Promise((resolve, reject) => {
-		const img$1 = new Image();
-		img$1.onload = () => resolve(img$1);
-		img$1.onerror = reject;
-		img$1.src = src;
 	});
 }
 
 //#endregion
-//#region src/sim/TransformCanvas.ts
-const MIN_ZOOM = .1;
-const MAX_ZOOM = 10;
-const CLICK_THRESHOLD = 5;
-const ANIMATION_SPEED = .07;
-const DRAG_ANIMATION_SPEED = .5;
-const ANIMATION_THRESHOLD = {
-	x: .5,
-	y: .5,
-	scale: .001
-};
-const MOMENTUM_DAMPING = .91;
-const MIN_VELOCITY = .5;
-var TransformCanvas = class {
-	canvas;
-	transform = {
-		x: 0,
-		y: 0,
-		scale: 1
-	};
-	targetTransform = {
-		x: 0,
-		y: 0,
-		scale: 1
-	};
-	isAnimating = false;
-	animationFrame = null;
-	focus = null;
-	offset = {
+//#region src/util/data.ts
+const images = [];
+function generateTree(maxNodes, maxChildren) {
+	const nodes = [];
+	const links = [];
+	let index$1 = 0;
+	function createNode(label) {
+		const isRoot = label === VOID_ROOT_ID;
+		return {
+			id: (isRoot ? VOID_ROOT_ID : index$1++).toString(),
+			label,
+			imgSrc: isRoot ? void 0 : images[index$1 % images.length]
+		};
+	}
+	const root = createNode(VOID_ROOT_ID);
+	nodes.push(root);
+	const queue = [root];
+	while (queue.length > 0 && nodes.length < maxNodes) {
+		const parent = queue.shift();
+		const rand = Math.random();
+		const biased = Math.floor(Math.pow(rand, 2) * (maxChildren + 1));
+		const childrenCount = Math.min(biased, maxChildren);
+		for (let i = 0; i < childrenCount; i++) {
+			if (nodes.length >= maxNodes) break;
+			const child = createNode(`Node ${nodes.length}`);
+			nodes.push(child);
+			links.push({
+				source: parent.id,
+				target: child.id
+			});
+			queue.push(child);
+		}
+	}
+	return {
+		nodes,
+		links
+	};
+}
+function isSpecialNode(node) {
+	const state = node.state;
+	return !!(state?.emitterNode || state?.sessionNode || state?.rootNode || state?.groupNode);
+}
+function groupGraphNodes(startId, nodes, links, options = {
+	skip: false,
+	existingGroups: [],
+	openedGroups: []
+}) {
+	if (options.skip) return {
+		nodes,
+		links
+	};
+	const visited = /* @__PURE__ */ new Set();
+	const nodesToRemove = /* @__PURE__ */ new Set();
+	function markRemovableNodes(id) {
+		if (visited.has(id)) return;
+		visited.add(id);
+		const children = getChildren(id, links);
+		let removableChildren = [];
+		for (const childId of children) {
+			const child = nodes.maps.id.get(childId);
+			if (!child) continue;
+			if ((child.clusterSize || 0) < 1 && !isSpecialNode(child)) removableChildren.push(childId);
+		}
+		if (removableChildren.length > 3) removableChildren.forEach((id$1) => nodesToRemove.add(id$1));
+	}
+	markRemovableNodes(startId);
+	const groupedNodesToRemove = groupBy(Array.from(nodesToRemove), (id) => {
+		const sourceLink = links.maps.targetId.get(id);
+		return isSimNode(sourceLink?.source) ? sourceLink?.source.id : sourceLink?.source.toString();
+	});
+	const GROUP_CHUNK_SIZE = 100;
+	const groupNodesToAdd = [];
+	const groupLinksToAdd = [];
+	function createGroupChunkNodes(groupSourceId, groupContent) {
+		const chunks = [];
+		for (let i = 0; i < groupContent.length; i += GROUP_CHUNK_SIZE) chunks.push(groupContent.slice(i, i + GROUP_CHUNK_SIZE));
+		chunks.forEach((chunk, index$1) => {
+			const chunkId = `${groupSourceId}-group-${index$1}`;
+			if (options.openedGroups?.includes(chunkId)) {
+				chunk.forEach((id) => {
+					nodesToRemove.delete(id);
+				});
+				return;
+			}
+			const existingGroup = options.existingGroups?.find((n) => n.id === chunkId);
+			const originNode = nodes.maps.id.get(groupSourceId);
+			const groupNode = {
+				...existingGroup,
+				x: existingGroup?.x || originNode?.x || 0,
+				y: existingGroup?.y || originNode?.y || 0,
+				id: chunkId,
+				clusterSize: chunk.length,
+				state: {
+					...existingGroup?.state,
+					groupNode: true,
+					groupContent: chunk,
+					collapsed: true
+				}
+			};
+			groupNodesToAdd.push(groupNode);
+			groupLinksToAdd.push({
+				source: nodes.maps.id.get(groupSourceId),
+				target: groupNode
+			});
+		});
+	}
+	Object.keys(groupedNodesToRemove).forEach((groupSourceId) => {
+		const groupContent = groupedNodesToRemove[groupSourceId];
+		createGroupChunkNodes(groupSourceId, groupContent);
+	});
+	const _nodes = nodes.values.filter((n) => !nodesToRemove.has(n.id));
+	const _links = links.values.filter((l) => {
+		const targetId = isSimNode(l.target) ? l.target.id : l.target.toString();
+		return !nodesToRemove.has(targetId);
+	});
+	return newGraphData({
+		nodes: [..._nodes, ...groupNodesToAdd],
+		links: [..._links, ...groupLinksToAdd]
+	});
+}
+function getPrunedData(startId, nodes, links, highlights = [], options = {
+	nodeVisibility: "all",
+	emittedNodes: [],
+	groupNodes: [],
+	skipGrouping: false,
+	openedGroups: []
+}) {
+	const visibleNodes = [];
+	const visibleLinks = [];
+	const visited = /* @__PURE__ */ new Set();
+	const isLocked = (node) => node.status === "LOCKED" || node.status === "EVOLVED";
+	const isEmitted = (node) => options.emittedNodes.includes(node.id);
+	const isOwnedHighlight = (nodeId) => highlights.find((h) => h.id === nodeId && h.type === "mine");
+	const isOnSale = (node) => highlights.find((h) => h.id === node.id && h.type === "on-sale");
+	const isHighlighted = (nodeId, type) => highlights.some((h) => type ? h.id === nodeId && h.type === type : h.id === nodeId);
+	const isChildHighlighted = (nodeId, type) => {
+		const children = getChildren(nodeId, links);
+		if (children.some((h) => isHighlighted(h, type))) return true;
+		else return children.some((c) => isChildHighlighted(c, type));
+	};
+	function visbilityFilter() {
+		switch (options.nodeVisibility) {
+			case "on-sale": return (node) => !isEmitted(node) && !isSpecialNode(node) && !isOnSale(node) && !isChildHighlighted(node.id, "on-sale");
+			case "locked": return (node) => !isEmitted(node) && !isSpecialNode(node) && !isLocked(node) && !isChildHighlighted(node.id, "locked");
+			case "mine": return (node) => {
+				return !isEmitted(node) && !isSpecialNode(node) && !isOwnedHighlight(node.id) && !isChildHighlighted(node.id, "mine");
+			};
+			case "all":
+			default: return () => false;
+		}
+	}
+	const liquidatedFilter = (node) => {
+		return node.status === "LIQUIDATED" && !highlights.find((h) => h.id === node.id);
+	};
+	(function traverseTree(node = nodes.maps.id.get(startId)) {
+		if (!node || visited.has(node.id)) return;
+		visited.add(node.id);
+		if (liquidatedFilter(node)) return;
+		if (visbilityFilter()(node)) return;
+		visibleNodes.push(node);
+		if (node?.state?.collapsed) return;
+		const childLinks = links.maps.sourceId.get(node.id) || [];
+		for (const link of childLinks) {
+			const targetNode = isSimNode(link.target) ? link.target : nodes.maps.id.get(link.target.toString());
+			if (!targetNode) continue;
+			if (liquidatedFilter(targetNode)) continue;
+			if (visbilityFilter()(targetNode)) continue;
+			visibleLinks.push(link);
+			traverseTree(targetNode);
+		}
+	})();
+	const visible = newGraphData({
+		nodes: visibleNodes,
+		links: visibleLinks
+	});
+	return groupGraphNodes(startId, visible.nodes, visible.links, {
+		skip: options.skipGrouping || false,
+		existingGroups: options.groupNodes,
+		openedGroups: options.openedGroups
+	});
+}
+/**
+* Automatically identifies root nodes and builds a nested structure
+* @param nodes Array of raw nodes
+* @param links Array of links between nodes
+* @returns Array of nested nodes starting from identified roots
+*/
+function buildTreeFromGraphData(nodes, links) {
+	const nodeMap = /* @__PURE__ */ new Map();
+	nodes.forEach((node) => nodeMap.set(node.id, node));
+	const childrenMap = /* @__PURE__ */ new Map();
+	const parentMap = /* @__PURE__ */ new Map();
+	nodes.forEach((node) => {
+		childrenMap.set(node.id, []);
+		parentMap.set(node.id, []);
+	});
+	links.forEach((link) => {
+		if (nodeMap.has(link.source) && nodeMap.has(link.target)) {
+			const children = childrenMap.get(link.source) || [];
+			if (!children.includes(link.target)) {
+				children.push(link.target);
+				childrenMap.set(link.source, children);
+			}
+			const parents = parentMap.get(link.target) || [];
+			if (!parents.includes(link.source)) {
+				parents.push(link.source);
+				parentMap.set(link.target, parents);
+			}
+		}
+	});
+	const rootHashes = [];
+	nodeMap.forEach((_, hash) => {
+		if ((parentMap.get(hash) || []).length === 0) rootHashes.push(hash);
+	});
+	const buildNode = (hash, visited = /* @__PURE__ */ new Set()) => {
+		if (visited.has(hash)) return null;
+		visited.add(hash);
+		const node = nodeMap.get(hash);
+		if (!node) return null;
+		const childHashes = childrenMap.get(hash) || [];
+		const nestedChildren = [];
+		childHashes.forEach((childHash) => {
+			const childNode = buildNode(childHash, new Set([...visited]));
+			if (childNode) nestedChildren.push(childNode);
+		});
+		return {
+			...node,
+			children: nestedChildren
+		};
+	};
+	const result = [];
+	rootHashes.forEach((rootHash) => {
+		const nestedRoot = buildNode(rootHash);
+		if (nestedRoot) result.push(nestedRoot);
+	});
+	const processedNodes = /* @__PURE__ */ new Set();
+	const markProcessed = (node) => {
+		processedNodes.add(node.id);
+		node.children.forEach(markProcessed);
+	};
+	result.forEach(markProcessed);
+	nodeMap.forEach((_, hash) => {
+		if (!processedNodes.has(hash)) {
+			const orphanedRoot = buildNode(hash);
+			if (orphanedRoot) result.push(orphanedRoot);
+		}
+	});
+	return result;
+}
+/**
+* Recursively retrieves all parents of a node from a graph data structure
+* @param {string} nodeHash - The hash of the node to find parents for
+* @param {RawNode[]} nodes - Array of nodes in the graph
+* @param {RawLink[]} links - Array of links connecting the nodes
+* @returns {RawNode[]} - Array of parent nodes
+*/
+function searchParents(nodeHash, nodes, links) {
+	const visited = /* @__PURE__ */ new Set();
+	function findParents(hash) {
+		if (visited.has(hash)) return [];
+		visited.add(hash);
+		const immediateParents = links.filter((link) => link.target === hash).map((link) => link.source);
+		const parentNodes = nodes.filter((node) => immediateParents.includes(node.id));
+		const ancestorNodes = immediateParents.flatMap((parentHash) => findParents(parentHash));
+		return [...parentNodes, ...ancestorNodes];
+	}
+	return findParents(nodeHash);
+}
+
+//#endregion
+//#region src/util/img.ts
+function loadHTMLImageElement(src) {
+	return new Promise((resolve, reject) => {
+		const img$1 = new Image();
+		img$1.onload = () => resolve(img$1);
+		img$1.onerror = reject;
+		img$1.src = src;
+	});
+}
+
+//#endregion
+//#region src/util/highlights.ts
+const blue = [
+	94,
+	112,
+	235
+];
+const red = [
+	238,
+	125,
+	121
+];
+const redred = [
+	255,
+	0,
+	0
+];
+var Highlight = class {
+	static owner = (id) => {
+		return {
+			id,
+			type: "mine",
+			strokeColor: red
+		};
+	};
+	static onSale = (id) => {
+		return {
+			id,
+			type: "on-sale",
+			strokeColor: blue
+		};
+	};
+	static primary = (id) => {
+		return {
+			id,
+			type: "any",
+			linkTo: id,
+			scale: 4,
+			strokeColor: redred,
+			linkColor: redred,
+			onTop: true,
+			isDetached: true
+		};
+	};
+	static minted = (id) => {
+		return {
+			id,
+			type: "any",
+			linkTo: id,
+			scale: 1.5,
+			strokeColor: redred,
+			linkColor: redred,
+			isDetached: true,
+			onTop: true
+		};
+	};
+};
+
+//#endregion
+//#region src/sim/_interfaces.ts
+var OpenGraphEventEmitter = class extends EventEmitter {};
+
+//#endregion
+//#region src/sim/TransformCanvas.ts
+const MIN_ZOOM = .1;
+const MAX_ZOOM = 10;
+const CLICK_THRESHOLD = 5;
+const ANIMATION_SPEED = .07;
+const DRAG_ANIMATION_SPEED = .5;
+const ANIMATION_THRESHOLD = {
+	x: .5,
+	y: .5,
+	scale: .001
+};
+const MOMENTUM_DAMPING = .91;
+const MIN_VELOCITY = .5;
+var TransformCanvas = class {
+	canvas;
+	transform = {
+		x: 0,
+		y: 0,
+		scale: 1
+	};
+	targetTransform = {
+		x: 0,
+		y: 0,
+		scale: 1
+	};
+	isAnimating = false;
+	animationFrame = null;
+	focus = null;
+	offset = {
 		x: 0,
 		y: 0
 	};
@@ -302,8 +835,7 @@ var TransformCanvas = class {
 			y: this.lerp(prev.y, target.y, animationSpeed / this.dpr),
 			scale: this.lerp(prev.scale, target.scale, animationSpeed / this.dpr)
 		};
-		const done = Math.abs(next.x - target.x) < ANIMATION_THRESHOLD.x && Math.abs(next.y - target.y) < ANIMATION_THRESHOLD.y && Math.abs(next.scale - target.scale) < ANIMATION_THRESHOLD.scale;
-		if (done) {
+		if (Math.abs(next.x - target.x) < ANIMATION_THRESHOLD.x && Math.abs(next.y - target.y) < ANIMATION_THRESHOLD.y && Math.abs(next.scale - target.scale) < ANIMATION_THRESHOLD.scale) {
 			this.transform = { ...target };
 			this.stopAnimation();
 		} else {
@@ -493,8 +1025,7 @@ var TransformCanvas = class {
 				};
 			}
 			const [t1, t2] = Array.from(e.touches);
-			const dist = Math.hypot(t2.clientX - t1.clientX, t2.clientY - t1.clientY);
-			let newScale = dist / this.pinchStartDist * this.pinchStartScale;
+			let newScale = Math.hypot(t2.clientX - t1.clientX, t2.clientY - t1.clientY) / this.pinchStartDist * this.pinchStartScale;
 			newScale = Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, newScale));
 			const centerX = (t1.clientX + t2.clientX) / 2;
 			const centerY = (t1.clientY + t2.clientY) / 2;
@@ -591,8 +1122,7 @@ var TransformCanvas = class {
 			this.focus = () => {
 				const worldFocus = _focus();
 				if (!worldFocus) return null;
-				const transform = this.getTransformationFromWorld(worldFocus.x, worldFocus.y, worldFocus.scale);
-				return transform;
+				return this.getTransformationFromWorld(worldFocus.x, worldFocus.y, worldFocus.scale);
 			};
 			this.startAnimation();
 		}
@@ -606,404 +1136,78 @@ var TransformCanvas = class {
 			cancelAnimationFrame(this.momentumFrame);
 			this.momentumFrame = null;
 		}
-		this.canvas.removeEventListener("wheel", this.handleWheel);
-		this.canvas.removeEventListener("mousedown", this.handleMouseDown);
-		this.canvas.removeEventListener("click", this.handleCanvasClick);
-		this.canvas.removeEventListener("touchstart", this.handleTouchStart);
-		this.canvas.removeEventListener("touchmove", this.handleTouchMove);
-		this.canvas.removeEventListener("touchend", this.handleTouchEnd);
-		this.canvas.removeEventListener("touchcancel", this.handleTouchEnd);
-		window.removeEventListener("mousemove", this.handleMouseMove);
-		window.removeEventListener("mouseup", this.handleMouseUp);
-		if (this.resizeObserver) {
-			this.resizeObserver.disconnect();
-			this.resizeObserver = null;
-		}
-		if (this.mediaQueryList) {
-			const updateDPRFromMediaQuery = () => {
-				this.updateDPR();
-			};
-			if (this.mediaQueryList.removeEventListener) this.mediaQueryList.removeEventListener("change", updateDPRFromMediaQuery);
-			this.mediaQueryList = null;
-		}
-	}
-	getTransform() {
-		return { ...this.transform };
-	}
-	getTargetTransform() {
-		return { ...this.targetTransform };
-	}
-	getFocus() {
-		return this.focus ? { ...this.focus } : null;
-	}
-	setOffset(offset) {
-		this.offset = offset;
-	}
-};
-
-//#endregion
-//#region src/util/canvas.ts
-/**
-* draws a circle on the canvas
-* @param ctx - The canvas rendering context
-* @param x - The x-coordinate of the circle's center
-* @param y - The y-coordinate of the circle's center
-* @param radius - The radius of the circle (default is 5)
-* @param options - Optional parameters for styling the circle
-* @param options.fill - Whether to fill the circle (default is true)
-* @param options.fillStyle - The fill color of the circle
-* @param options.stroke - Whether to stroke the circle (default is false)
-* @param options.strokeStyle - The stroke color of the circle
-* @param options.lineWidth - The width of the stroke (default is 0.2)
-* @returns void
-*/
-function circle(ctx, x, y, radius = 5, options) {
-	const { fill = true, fillStyle, stroke = false, strokeStyle, lineWidth = .2 } = options || {};
-	ctx.save();
-	if (fillStyle !== void 0) ctx.fillStyle = fillStyle;
-	if (strokeStyle !== void 0) ctx.strokeStyle = strokeStyle;
-	if (lineWidth !== void 0) ctx.lineWidth = lineWidth;
-	ctx.beginPath();
-	ctx.arc(x, y, radius, 0, 2 * Math.PI);
-	ctx.closePath();
-	if (fill) ctx.fill();
-	if (stroke) ctx.stroke();
-	ctx.restore();
-}
-/**
-* draws a rectangle on the canvas
-* @param ctx - The canvas rendering context
-* @param x - The x-coordinate of the rectangle's top-left corner
-* @param y - The y-coordinate of the rectangle's top-left corner
-* @param width - The width of the rectangle
-* @param height - The height of the rectangle
-* @param options - Optional parameters for styling the rectangle
-* @param options.fill - Whether to fill the rectangle (default is true)
-* @param options.fillStyle - The fill color of the rectangle
-* @param options.stroke - Whether to stroke the rectangle (default is false)
-* @param options.strokeStyle - The stroke color of the rectangle
-* @param options.lineWidth - The width of the stroke (default is 0.2)
-* @param options.borderRadius - The radius of the corners (default is 0)
-* @returns void
-*/
-function rect(ctx, x, y, width, height, options) {
-	const { fill = true, fillStyle, stroke = false, strokeStyle, lineWidth = .2, borderRadius = 0 } = options || {};
-	ctx.save();
-	if (fillStyle !== void 0) ctx.fillStyle = fillStyle;
-	if (strokeStyle !== void 0) ctx.strokeStyle = strokeStyle;
-	if (lineWidth !== void 0) ctx.lineWidth = lineWidth;
-	const r = Math.min(borderRadius, width / 2, height / 2);
-	ctx.beginPath();
-	if (r > 0) {
-		ctx.moveTo(x + r, y);
-		ctx.lineTo(x + width - r, y);
-		ctx.quadraticCurveTo(x + width, y, x + width, y + r);
-		ctx.lineTo(x + width, y + height - r);
-		ctx.quadraticCurveTo(x + width, y + height, x + width - r, y + height);
-		ctx.lineTo(x + r, y + height);
-		ctx.quadraticCurveTo(x, y + height, x, y + height - r);
-		ctx.lineTo(x, y + r);
-		ctx.quadraticCurveTo(x, y, x + r, y);
-	} else ctx.rect(x, y, width, height);
-	ctx.closePath();
-	if (fill) ctx.fill();
-	if (stroke) ctx.stroke();
-	ctx.restore();
-}
-/**
-* draws an image on the canvas with optional border radius and opacity
-* @param ctx - The canvas rendering context
-* @param image - The HTMLImageElement to draw
-* @param x - The x-coordinate of the image's top-left corner
-* @param y - The y-coordinate of the image's top-left corner
-* @param width - The width of the image
-* @param height - The height of the image
-* @param borderRadius - The radius of the corners (default is 0)
-* @param opacity - The opacity of the image (default is 1.0)
-* @param bgColor - Optional background color to fill the clipped area
-* @returns void
-*/
-function img(ctx, image, x, y, width, height, borderRadius = 0, opacity = 1, bgColor) {
-	ctx.save();
-	ctx.beginPath();
-	ctx.globalAlpha = 1;
-	if (borderRadius > 0) {
-		const r = Math.min(borderRadius, width / 2, height / 2);
-		ctx.moveTo(x + r, y);
-		ctx.lineTo(x + width - r, y);
-		ctx.quadraticCurveTo(x + width, y, x + width, y + r);
-		ctx.lineTo(x + width, y + height - r);
-		ctx.quadraticCurveTo(x + width, y + height, x + width - r, y + height);
-		ctx.lineTo(x + r, y + height);
-		ctx.quadraticCurveTo(x, y + height, x, y + height - r);
-		ctx.lineTo(x, y + r);
-		ctx.quadraticCurveTo(x, y, x + r, y);
-	} else ctx.rect(x, y, width, height);
-	ctx.closePath();
-	if (bgColor && opacity < 1) {
-		ctx.save();
-		ctx.fillStyle = bgColor;
-		ctx.fill();
-		ctx.restore();
-	}
-	ctx.clip();
-	ctx.globalAlpha = opacity;
-	ctx.drawImage(image, x, y, width, height);
-	ctx.restore();
-}
-function hexagon(ctx, x, y, radius, options) {
-	const { fill = true, fillStyle, stroke = false, strokeStyle, lineWidth = .2, rotation = 0, borderRadius = 0 } = options || {};
-	ctx.save();
-	if (fillStyle !== void 0) ctx.fillStyle = fillStyle;
-	if (strokeStyle !== void 0) ctx.strokeStyle = strokeStyle;
-	if (lineWidth !== void 0) ctx.lineWidth = lineWidth;
-	const sides = 6;
-	const angleStep = Math.PI * 2 / sides;
-	ctx.beginPath();
-	const points = [];
-	for (let i = 0; i < sides; i++) {
-		const angle = rotation + i * angleStep;
-		points.push({
-			x: x + radius * Math.cos(angle),
-			y: y + radius * Math.sin(angle)
-		});
-	}
-	if (borderRadius > 0) {
-		const maxBorderRadius = Math.min(borderRadius, radius / 3);
-		for (let i = 0; i < sides; i++) {
-			const current = points[i];
-			const next = points[(i + 1) % sides];
-			const prev = points[(i - 1 + sides) % sides];
-			const toPrev = {
-				x: prev.x - current.x,
-				y: prev.y - current.y
-			};
-			const toNext = {
-				x: next.x - current.x,
-				y: next.y - current.y
-			};
-			const lenPrev = Math.sqrt(toPrev.x * toPrev.x + toPrev.y * toPrev.y);
-			const lenNext = Math.sqrt(toNext.x * toNext.x + toNext.y * toNext.y);
-			const normPrev = {
-				x: toPrev.x / lenPrev,
-				y: toPrev.y / lenPrev
-			};
-			const normNext = {
-				x: toNext.x / lenNext,
-				y: toNext.y / lenNext
-			};
-			const cpPrev = {
-				x: current.x + normPrev.x * maxBorderRadius,
-				y: current.y + normPrev.y * maxBorderRadius
-			};
-			const cpNext = {
-				x: current.x + normNext.x * maxBorderRadius,
-				y: current.y + normNext.y * maxBorderRadius
-			};
-			if (i === 0) ctx.moveTo(cpPrev.x, cpPrev.y);
-			else ctx.lineTo(cpPrev.x, cpPrev.y);
-			ctx.quadraticCurveTo(current.x, current.y, cpNext.x, cpNext.y);
-		}
-	} else {
-		ctx.moveTo(points[0].x, points[0].y);
-		for (let i = 1; i < sides; i++) ctx.lineTo(points[i].x, points[i].y);
-	}
-	ctx.closePath();
-	if (fill) ctx.fill();
-	if (stroke) ctx.stroke();
-	ctx.restore();
-}
-
-//#endregion
-//#region src/util/color.ts
-/**
-* Some utility functions to handle colors
-*/
-function color(rgb) {
-	const colorHandler = function(arg) {
-		if (typeof arg === "number") return `rgba(${rgb[0]},${rgb[1]},${rgb[2]},${arg})`;
-		if (typeof arg === "function") {
-			const transformedRGB = arg(rgb);
-			return color(transformedRGB);
-		}
-		return `rgb(${rgb[0]},${rgb[1]},${rgb[2]})`;
-	};
-	colorHandler.rgb = rgb;
-	return colorHandler;
-}
-/**
-* Dims a color to white or black
-* @param color An array of 3 numbers representing RGB values (0-255)
-* @param dimFactor A value between 0 and 1 where 0 is completely black and 1 is the original color
-* @returns A new array with the dimmed RGB values
-*/
-function dim(factor = .6, white = true) {
-	const base = white ? 255 : 0;
-	return function(rgb) {
-		return [
-			Math.round(rgb[0] + (base - rgb[0]) * (1 - factor)),
-			Math.round(rgb[1] + (base - rgb[1]) * (1 - factor)),
-			Math.round(rgb[2] + (base - rgb[2]) * (1 - factor))
-		];
-	};
-}
-
-//#endregion
-//#region src/util/data.ts
-const images = [];
-function generateTree(maxNodes, maxChildren) {
-	const nodes = [];
-	const links = [];
-	let index$1 = 0;
-	function createNode(label) {
-		const isRoot = label === VOID_ROOT_ID;
-		const idx = isRoot ? VOID_ROOT_ID : index$1++;
-		return {
-			id: idx.toString(),
-			label,
-			imgSrc: isRoot ? void 0 : images[index$1 % images.length]
-		};
-	}
-	const root = createNode(VOID_ROOT_ID);
-	nodes.push(root);
-	const queue = [root];
-	while (queue.length > 0 && nodes.length < maxNodes) {
-		const parent = queue.shift();
-		const rand = Math.random();
-		const biased = Math.floor(Math.pow(rand, 2) * (maxChildren + 1));
-		const childrenCount = Math.min(biased, maxChildren);
-		for (let i = 0; i < childrenCount; i++) {
-			if (nodes.length >= maxNodes) break;
-			const child = createNode(`Node ${nodes.length}`);
-			nodes.push(child);
-			links.push({
-				source: parent.id,
-				target: child.id
-			});
-			queue.push(child);
-		}
-	}
-	return {
-		nodes,
-		links
-	};
-}
-function getPrunedData(startId, nodes, links, highlights = []) {
-	const nodesById = Object.fromEntries(nodes.map((node) => [node.id, node]));
-	const visibleNodes = [];
-	const visibleLinks = [];
-	const visited = new Set();
-	(function traverseTree(node = nodesById[startId]) {
-		if (!node || visited.has(node.id)) return;
-		visited.add(node.id);
-		if (node.status === "LIQUIDATED" && !highlights.find((h) => h.id === node.id)) return;
-		visibleNodes.push(node);
-		if (node?.state?.collapsed) return;
-		const childLinks = links.filter((l) => (isSimNode(l.source) ? l.source.id : l.source) === node.id);
-		for (const link of childLinks) {
-			const targetNode = isSimNode(link.target) ? link.target : nodesById[link.target.toString()];
-			if (targetNode?.status === "LIQUIDATED" && !highlights.find((h) => h.id === targetNode.id)) continue;
-			visibleLinks.push(link);
-			traverseTree(targetNode);
-		}
-	})();
-	return {
-		nodes: visibleNodes,
-		links: visibleLinks
-	};
-}
-/**
-* Automatically identifies root nodes and builds a nested structure
-* @param nodes Array of raw nodes
-* @param links Array of links between nodes
-* @returns Array of nested nodes starting from identified roots
-*/
-function buildTreeFromGraphData(nodes, links) {
-	const nodeMap = new Map();
-	nodes.forEach((node) => nodeMap.set(node.id, node));
-	const childrenMap = new Map();
-	const parentMap = new Map();
-	nodes.forEach((node) => {
-		childrenMap.set(node.id, []);
-		parentMap.set(node.id, []);
-	});
-	links.forEach((link) => {
-		if (nodeMap.has(link.source) && nodeMap.has(link.target)) {
-			const children = childrenMap.get(link.source) || [];
-			if (!children.includes(link.target)) {
-				children.push(link.target);
-				childrenMap.set(link.source, children);
-			}
-			const parents = parentMap.get(link.target) || [];
-			if (!parents.includes(link.source)) {
-				parents.push(link.source);
-				parentMap.set(link.target, parents);
-			}
-		}
-	});
-	const rootHashes = [];
-	nodeMap.forEach((_, hash) => {
-		const parents = parentMap.get(hash) || [];
-		if (parents.length === 0) rootHashes.push(hash);
-	});
-	const buildNode = (hash, visited = new Set()) => {
-		if (visited.has(hash)) return null;
-		visited.add(hash);
-		const node = nodeMap.get(hash);
-		if (!node) return null;
-		const childHashes = childrenMap.get(hash) || [];
-		const nestedChildren = [];
-		childHashes.forEach((childHash) => {
-			const childNode = buildNode(childHash, new Set([...visited]));
-			if (childNode) nestedChildren.push(childNode);
-		});
-		return {
-			...node,
-			children: nestedChildren
-		};
-	};
-	const result = [];
-	rootHashes.forEach((rootHash) => {
-		const nestedRoot = buildNode(rootHash);
-		if (nestedRoot) result.push(nestedRoot);
-	});
-	const processedNodes = new Set();
-	const markProcessed = (node) => {
-		processedNodes.add(node.id);
-		node.children.forEach(markProcessed);
-	};
-	result.forEach(markProcessed);
-	nodeMap.forEach((_, hash) => {
-		if (!processedNodes.has(hash)) {
-			const orphanedRoot = buildNode(hash);
-			if (orphanedRoot) result.push(orphanedRoot);
+		this.canvas.removeEventListener("wheel", this.handleWheel);
+		this.canvas.removeEventListener("mousedown", this.handleMouseDown);
+		this.canvas.removeEventListener("click", this.handleCanvasClick);
+		this.canvas.removeEventListener("touchstart", this.handleTouchStart);
+		this.canvas.removeEventListener("touchmove", this.handleTouchMove);
+		this.canvas.removeEventListener("touchend", this.handleTouchEnd);
+		this.canvas.removeEventListener("touchcancel", this.handleTouchEnd);
+		window.removeEventListener("mousemove", this.handleMouseMove);
+		window.removeEventListener("mouseup", this.handleMouseUp);
+		if (this.resizeObserver) {
+			this.resizeObserver.disconnect();
+			this.resizeObserver = null;
+		}
+		if (this.mediaQueryList) {
+			const updateDPRFromMediaQuery = () => {
+				this.updateDPR();
+			};
+			if (this.mediaQueryList.removeEventListener) this.mediaQueryList.removeEventListener("change", updateDPRFromMediaQuery);
+			this.mediaQueryList = null;
 		}
-	});
-	return result;
-}
-/**
-* Recursively retrieves all parents of a node from a graph data structure
-* @param {string} nodeHash - The hash of the node to find parents for
-* @param {RawNode[]} nodes - Array of nodes in the graph
-* @param {RawLink[]} links - Array of links connecting the nodes
-* @returns {RawNode[]} - Array of parent nodes
-*/
-function searchParents(nodeHash, nodes, links) {
-	const visited = new Set();
-	function findParents(hash) {
-		if (visited.has(hash)) return [];
-		visited.add(hash);
-		const immediateParents = links.filter((link) => link.target === hash).map((link) => link.source);
-		const parentNodes = nodes.filter((node) => immediateParents.includes(node.id));
-		const ancestorNodes = immediateParents.flatMap((parentHash) => findParents(parentHash));
-		return [...parentNodes, ...ancestorNodes];
 	}
-	return findParents(nodeHash);
-}
+	getTransform() {
+		return { ...this.transform };
+	}
+	getTargetTransform() {
+		return { ...this.targetTransform };
+	}
+	getFocus() {
+		return this.focus ? { ...this.focus } : null;
+	}
+	getIsDragging() {
+		return this.isDragging;
+	}
+	setOffset(offset) {
+		this.offset = offset;
+	}
+};
 
 //#endregion
-//#region src/sim/_interfaces.ts
-var OpenGraphEventEmitter = class extends EventEmitter {};
+//#region src/_types.ts
+function newGraphData(data) {
+	return {
+		nodes: new MappedArray({
+			id: {
+				getKey: (node) => node.id,
+				multi: false
+			},
+			collapsed: {
+				getKey: (node) => (!!node.state?.collapsed).toString(),
+				multi: true
+			},
+			groupNode: {
+				getKey: (node) => (!!node.state?.groupNode).toString(),
+				multi: true
+			}
+		}, data?.nodes),
+		links: new MappedArray({
+			targetId: {
+				getKey: (link) => (isSimNode(link.target) ? link.target.id : link.target).toString(),
+				multi: false
+			},
+			linkId: {
+				getKey: (link) => getLinkId(link),
+				multi: false
+			},
+			sourceId: {
+				getKey: (link) => (isSimNode(link.source) ? link.source.id : link.source).toString(),
+				multi: true
+			}
+		}, data?.links)
+	};
+}
 
 //#endregion
 //#region src/util/math.ts
@@ -1017,60 +1221,6 @@ function getAngle(cx, cy, x, y) {
 	return Math.atan2(y - cy, x - cx);
 }
 
-//#endregion
-//#region src/util/highlights.ts
-const red = [
-	238,
-	125,
-	121
-];
-const redred = [
-	255,
-	0,
-	0
-];
-var Highlight = class {
-	static owner = (id) => {
-		return {
-			id,
-			strokeColor: red
-		};
-	};
-	static primary = (id) => {
-		return {
-			id,
-			linkTo: id,
-			scale: 4,
-			strokeColor: redred,
-			linkColor: redred,
-			onTop: true,
-			isDetached: true
-		};
-	};
-	static evolved = (id) => {
-		return {
-			id,
-			linkTo: id,
-			scale: 2.1,
-			strokeColor: redred,
-			linkColor: redred,
-			onTop: true,
-			isDetached: true
-		};
-	};
-	static minted = (id) => {
-		return {
-			id,
-			linkTo: id,
-			scale: 1.5,
-			strokeColor: redred,
-			linkColor: redred,
-			isDetached: true,
-			onTop: true
-		};
-	};
-};
-
 //#endregion
 //#region src/sim/asymmetric-link.ts
 function constant(x) {
@@ -1186,12 +1336,64 @@ function asymmetricLinks(links) {
 //#endregion
 //#region src/util/hash.ts
 function quickHash(data) {
-	return float2hex(xorshiftString(data));
+	return xorshiftString(data).toString(16);
+}
+
+//#endregion
+//#region src/sim/measurements.ts
+/**
+* @dev Temp utility to make performance measurements on the graph.
+*/
+const arr = {
+	sum(A, getV = (v) => v) {
+		return A.reduce((acc, val) => acc + getV(val), 0);
+	},
+	avg(A, getV = (v) => v) {
+		return this.sum(A, getV) / A.length;
+	}
+};
+const Measure = {
+	measures: {},
+	samples: {},
+	collect(name, value) {
+		if (!this.samples[name]) this.samples[name] = [];
+		this.samples[name].push(value);
+	},
+	start(name) {
+		this.measures[name] = performance.now();
+	},
+	end(name, ignoreError = false) {
+		if (!(name in this.measures)) {
+			if (ignoreError) return;
+			throw `invalid timer end on "${name}"`;
+		}
+		this.collect(name, performance.now() - this.measures[name]);
+	},
+	export() {
+		const samples = Object.entries(this.samples);
+		const rows = [samples.map((s) => s[0]).join(",")];
+		rows.push(samples.map((s) => arr.avg(s[1])).join(","));
+		downloadAsCsvFile("samples.csv", rows.join("\n"));
+	},
+	getSamples() {
+		return this.samples;
+	}
+};
+function downloadAsCsvFile(filename, content) {
+	const blob = new Blob([content], { type: "text/csv" });
+	const url = URL.createObjectURL(blob);
+	const a = document.createElement("a");
+	a.href = url;
+	a.download = filename.endsWith(".csv") ? filename : filename + ".csv";
+	document.body.appendChild(a);
+	a.click();
+	document.body.removeChild(a);
+	URL.revokeObjectURL(url);
 }
 
 //#endregion
 //#region src/sim/OpenGraphSimulation.ts
-const RADIAL_FORCES = false;
+const RENDER_EMITTER_NODES = false;
 const INITIAL_RADIUS = 300;
 const INCREMENTAL = 200;
 function getRadius(depth) {
@@ -1206,39 +1408,37 @@ var OpenGraphSimulation = class {
 	canvas;
 	transformCanvas;
 	theme;
+	groupRootOrphans = false;
 	rawData;
 	emitter;
 	translate = {
 		x: 0,
 		y: 0
 	};
-	data = {
-		nodes: [],
-		links: []
-	};
-	prunedData = {
-		nodes: [],
-		links: []
-	};
-	subGraph = {
-		nodes: [],
-		links: []
-	};
+	data = newGraphData();
+	prunedData = newGraphData();
+	subGraph = newGraphData();
 	rootId = "";
 	simulation = null;
 	clusterSizeRange = [0, 1];
+	emitterClusterSizeRange = [0, 1];
 	maxDepth = 0;
 	isTicking = false;
+	isDrawing = false;
 	tickCount = 0;
 	loadNodeImage;
-	imageCache = new Map();
+	imageCache = /* @__PURE__ */ new Map();
 	rootImages = [];
 	hideThumbnails = false;
 	noInteraction = false;
 	lockedNodeId;
 	selectedNode = null;
 	hoveredNode = null;
-	highlights = [];
+	highlights;
+	nodeVisibility = "all";
+	secondaryNodes = /* @__PURE__ */ new Map();
+	emittedNodes = [];
+	openedGroups = [];
 	renderLayers = {
 		links: {
 			regular: [],
@@ -1274,6 +1474,18 @@ var OpenGraphSimulation = class {
 				this.rootImages[idx] = img$1;
 			});
 		});
+		this.groupRootOrphans = props.groupRootOrphans || false;
+		this.nodeVisibility = props.nodeVisibility || "all";
+		this.highlights = new MappedArray({
+			nodeId: {
+				getKey: (highlight) => highlight.id,
+				multi: false
+			},
+			detached: {
+				getKey: (highlight) => (highlight.isDetached || false).toString(),
+				multi: true
+			}
+		}, props.highlights || []);
 	}
 	get center() {
 		return {
@@ -1289,8 +1501,7 @@ var OpenGraphSimulation = class {
 		};
 	}
 	getNodeAtPosition = (cx, cy) => {
-		const transform = this.transformCanvas.getTransform();
-		const { x: tx, y: ty, scale } = transform;
+		const { x: tx, y: ty, scale } = this.transformCanvas.getTransform();
 		const dpi = devicePixelRatio || 1;
 		const canvasX = cx * dpi;
 		const canvasY = cy * dpi;
@@ -1299,13 +1510,13 @@ var OpenGraphSimulation = class {
 		const graphX = scaledX - this.origin.x;
 		const graphY = scaledY - this.origin.y;
 		const candidates = [];
-		for (let node of this.data.nodes) {
+		for (let node of this.prunedData.nodes.values) {
 			const r = this.getNodeSize(node.id) / 2;
 			if (node.x == null || node.y == null) continue;
 			const dx = node.x - graphX;
 			const dy = node.y - graphY;
 			if (dx * dx + dy * dy < r * r) {
-				if (!this.prunedData.nodes.find((n) => n.id === node.id)) continue;
+				if (!this.prunedData.nodes.maps.id.get(node.id)) continue;
 				candidates.push(node);
 			}
 		}
@@ -1339,8 +1550,7 @@ var OpenGraphSimulation = class {
 		};
 	};
 	screenToWorld(_x, _y) {
-		const transform = this.transformCanvas.getTransform();
-		const { x: tx, y: ty, scale } = transform;
+		const { x: tx, y: ty, scale } = this.transformCanvas.getTransform();
 		const dpi = devicePixelRatio || 1;
 		const canvasX = _x * dpi;
 		const canvasY = _y * dpi;
@@ -1354,8 +1564,7 @@ var OpenGraphSimulation = class {
 		};
 	}
 	worldToScreen(worldX, worldY) {
-		const transform = this.transformCanvas.getTransform();
-		const { x: tx, y: ty, scale } = transform;
+		const { x: tx, y: ty, scale } = this.transformCanvas.getTransform();
 		const dpi = devicePixelRatio || 1;
 		const scaledX = (worldX + this.origin.x) * scale;
 		const scaledY = (worldY + this.origin.y) * scale;
@@ -1371,34 +1580,69 @@ var OpenGraphSimulation = class {
 	handleClick = (x, y) => {
 		let node = this.getNodeAtPosition(x, y);
 		if (node?.state?.sessionNode) return;
+		if (node?.state?.groupNode) {
+			this.data.nodes.values.forEach((n) => {
+				if (node?.state?.groupContent?.includes(n.id)) {
+					const circlePos = getRadialPoint(getRadius(0), this.rootNode?.x, this.rootNode?.y);
+					n.x = circlePos.x;
+					n.y = circlePos.y;
+				}
+			});
+			this.openedGroups.push(node.id);
+			this.updateHighlights();
+			return;
+		}
 		if (this.lockedNodeId && !node) node = this.getNodeById(this.lockedNodeId);
-		this.handleClickNode(node);
+		if (node === this.selectedNode) return;
+		if (node?.state?.emitterNode && RENDER_EMITTER_NODES);
+		else this.handleClickNode(node);
+	};
+	emitNodeAt = (depth) => {
+		const nodes = this.secondaryNodes[depth].filter((n) => !this.emittedNodes.includes(n.id)) || [];
+		const randomIndex = Math.floor(Math.random() * nodes.length);
+		if (randomIndex < 0 || randomIndex >= nodes.length) return;
+		const depthNode = this.emitterNodes[depth];
+		const node = nodes[randomIndex];
+		node.x = depthNode.x;
+		node.y = depthNode.y;
+		const parents = getAllParentsUntil(node.id, this.data.links, this.rootId);
+		this.emittedNodes.push(node.id);
+		node.state.collapsed = false;
+		if (parents.length > 0) {
+			parents.forEach((parentId) => {
+				const parentNode = this.data.nodes.maps.id.get(parentId);
+				if (parentNode) {
+					if (parentNode.state) parentNode.state.collapsed = false;
+				}
+			});
+			this.emittedNodes.push(...parents);
+		}
+		console.log("Emitting node at depth", depth, ":", node.id);
+		this.updateHighlights();
 	};
 	handleClickNode = (node, options = {
 		noToggle: false,
-		triggerFocus: false
+		triggerFocus: false,
+		triggerRestart: false
 	}) => {
 		let wasOpened = false;
 		if (node) {
 			if (node.id === this.rootId) {
 				this.selectedNode = null;
 				this.emitter.emit("selected-node-changed", null);
-				this.subGraph = {
-					nodes: [],
-					links: []
-				};
+				this.subGraph = newGraphData();
 				this.updateRenderLayers();
 				this.updateScene();
 				return;
 			}
 			if (node.state) {
 				const children = getChildren(node.id, this.data.links);
-				if (children.length > 0 && !options?.noToggle) {
+				if (children.length > 0) {
 					if (this.selectedNode?.id !== node.id) {
 						if (node.state.collapsed) wasOpened = true;
 						node.state.collapsed = false;
-					} else node.state.collapsed = !node.state.collapsed;
-					if (!node.state.collapsed) {
+					} else if (!options.noToggle) node.state.collapsed = !node.state.collapsed;
+					if (!node.state.collapsed && wasOpened) {
 						const clusterDistance = 100;
 						const clusterRadius = 50;
 						const parentX = node.x || this.center.x;
@@ -1408,36 +1652,24 @@ var OpenGraphSimulation = class {
 						const length = Math.sqrt(dirX * dirX + dirY * dirY) || 1;
 						const normX = dirX / length;
 						const normY = dirY / length;
-						const clusterX = parentX + normX * clusterDistance;
-						const clusterY = parentY + normY * clusterDistance;
+						parentX + normX * clusterDistance;
+						parentY + normY * clusterDistance;
 						children.forEach((childId) => {
-							const childNode = this.data.nodes.find((n) => n.id === childId);
+							const childNode = this.data.nodes.maps.id.get(childId);
+							if (childNode?.state?.groupNode) return;
 							if (childNode && isSimNode(childNode)) {
-								const angle = Math.random() * 2 * Math.PI;
-								const radius = Math.random() * clusterRadius;
-								childNode.x = clusterX + Math.cos(angle) * radius;
-								childNode.y = clusterY + Math.sin(angle) * radius;
+								Math.random() * 2 * Math.PI;
+								Math.random() * clusterRadius;
 							}
 						});
 					}
 				}
 			}
-			if (!node.state?.collapsed) {
-				const parents = getParents(node.id, this.data.links);
-				parents.forEach((parentId) => {
-					const parentNode = this.data.nodes.find((n) => n.id === parentId);
-					if (parentNode && isSimNode(parentNode) && parentNode.state) parentNode.state.collapsed = false;
-				});
+			this.subGraph = getNodeSubgraph(node.id, this.prunedData.nodes, this.prunedData.links, this.rootId);
+			if (this.selectedNode?.id !== node?.id) {
+				this.selectedNode = node;
+				this.emitter.emit("selected-node-changed", node);
 			}
-			this.subGraph = getNodeSubgraph(node.id, this.data.nodes, this.data.links, this.rootId);
-		}
-		if (this.selectedNode?.id !== node?.id) {
-			this.selectedNode = node;
-			this.emitter.emit("selected-node-changed", node);
-			this.updateRenderLayers();
-		}
-		if (node) {
-			this.restart(wasOpened ? .05 : 0);
 			if (wasOpened || options?.triggerFocus) this.transformCanvas.focusOn(() => {
 				const t = this.transformCanvas.getTransform();
 				const _node = this.getNodeById(node.id);
@@ -1450,19 +1682,26 @@ var OpenGraphSimulation = class {
 		} else if (!node && this.selectedNode) {
 			this.selectedNode = null;
 			this.emitter.emit("selected-node-changed", null);
-			this.subGraph = {
-				nodes: [],
-				links: []
-			};
+			this.subGraph = newGraphData();
 			this.updateRenderLayers();
 			this.updateScene();
 		}
 	};
+	updateEmitterNodes() {
+		this.emitterNodes.forEach((node, depth) => {
+			node.clusterSize = (this.secondaryNodes[depth] || []).filter((n) => this.emittedNodes.indexOf(n.id) === -1).length;
+		});
+		this.emitterClusterSizeRange = this.emitterNodes.reduce((acc, node) => [Math.min(acc[0], node.clusterSize || 1), Math.max(acc[1], node.clusterSize || 1)], [Infinity, -Infinity]);
+	}
+	get emitterNodes() {
+		return this.data.nodes.values.filter((n) => n.state?.emitterNode).sort((a, b) => (a.depth || 0) - (b.depth || 0)) || [];
+	}
 	updateScene = () => {
 		if (this.isTicking) return;
 		this.onDraw();
 	};
 	handleMove = (x, y) => {
+		if (this.transformCanvas.getIsDragging()) return;
 		const world = this.screenToWorld(x, y);
 		const node = this.simulation?.find(world.x, world.y, 10) || null;
 		if (node?.state?.sessionNode) return;
@@ -1477,15 +1716,13 @@ var OpenGraphSimulation = class {
 		this.updateScene();
 	};
 	updateHighlights = () => {
-		const detachedHighlights = this.highlights.filter((h) => h.isDetached);
-		const validSessionIds = new Set();
+		const detachedHighlights = this.highlights.maps.detached.get("true") || [];
+		const validSessionIds = /* @__PURE__ */ new Set();
 		let focusSessionNode = null;
 		detachedHighlights.forEach((h) => {
-			const highlightedNode = this.data.nodes.find((n) => n.id === h.id);
+			const highlightedNode = this.data.nodes.maps.id.get(h.id);
 			if (!highlightedNode) return;
-			const existingLink = this.data.links.find((l) => {
-				return isSimNode(l.target) ? l.target.id === h.id : l.target === h.id;
-			});
+			const existingLink = this.data.links.maps.targetId.get(h.id);
 			if (!existingLink) return;
 			const id = isSimNode(existingLink.source) ? existingLink.source.id : existingLink.source.toString();
 			const parentNode = this.getNodeById(id);
@@ -1493,11 +1730,11 @@ var OpenGraphSimulation = class {
 			const _sessionId = h.sessionId || parentNode.id;
 			const sessionId = parentNode.state?.sessionNode ? parentNode.id : `${VOID_DETACH_ID}-${_sessionId}`;
 			validSessionIds.add(sessionId);
-			let sessionNode = this.data.nodes.find((n) => n.id === sessionId);
+			let sessionNode = this.data.nodes.maps.id.get(sessionId);
 			if (!sessionNode) {
 				const depth = (highlightedNode?.depth || 1) + 1;
-				const angle = getAngle(this.center.x, this.center.y, parentNode?.x, parentNode?.y);
-				const circlePos = getRadialPoint(getRadius(depth), this.center.x, this.center.y, angle);
+				const angle = getAngle(this.rootNode?.x, this.rootNode?.y, parentNode?.x, parentNode?.y);
+				const circlePos = getRadialPoint(getRadius(depth), this.rootNode?.x, this.rootNode?.y, angle);
 				sessionNode = {
 					id: sessionId,
 					state: {
@@ -1516,37 +1753,50 @@ var OpenGraphSimulation = class {
 					source: parentNode
 				});
 			}
-			const existingLinkIndex = this.data.links.findIndex((l) => l === existingLink);
+			const existingLinkIndex = this.data.links.values.findIndex((l) => l === existingLink);
 			this.data.links.splice(existingLinkIndex, 1);
 			this.data.links.push({
 				target: highlightedNode,
 				source: sessionNode
 			});
-			const parents = getAllParentsUntil(highlightedNode.id, this.data.links, this.rootId);
-			parents.forEach((parentId) => {
-				const node = this.data.nodes.find((n) => n.id === parentId);
-				if (node?.state) node.state.collapsed = false;
+			getAllParentsUntil(highlightedNode.id, this.data.links, this.rootId).forEach((parentId) => {
+				if (this.data.nodes.maps.id.get(parentId)?.state) {}
 			});
 			if (highlightedNode.state) highlightedNode.state.collapsed = false;
 			if (!focusSessionNode) focusSessionNode = sessionNode;
 		});
-		const sessionNodesToRemove = this.data.nodes.filter((n) => n.state?.sessionNode && !validSessionIds.has(n.id));
-		sessionNodesToRemove.forEach((sessionNode) => {
-			const childLinks = this.data.links.filter((l) => isSimNode(l.source) && l.source.id === sessionNode.id);
-			const incomingLink = this.data.links.find((l) => isSimNode(l.target) && l.target.id === sessionNode.id);
+		this.data.nodes.values.filter((n) => n.state?.sessionNode && !validSessionIds.has(n.id)).forEach((sessionNode) => {
+			const childLinks = this.data.links.maps.sourceId.get(sessionNode.id);
+			const incomingLink = this.data.links.maps.targetId.get(sessionNode.id);
 			const parentNode = incomingLink ? isSimNode(incomingLink.source) ? incomingLink.source : this.getNodeById(incomingLink.source.toString()) : null;
-			this.data.links = this.data.links.filter((l) => !(isSimNode(l.source) && l.source.id === sessionNode.id) && !(isSimNode(l.target) && l.target.id === sessionNode.id));
-			if (parentNode) childLinks.forEach((link) => {
+			this.data.links.reset(this.data.links.values.filter((l) => !(isSimNode(l.source) && l.source.id === sessionNode.id) && !(isSimNode(l.target) && l.target.id === sessionNode.id)));
+			if (parentNode) childLinks?.forEach((link) => {
 				const targetNode = isSimNode(link.target) ? link.target : this.getNodeById(link.target.toString());
 				if (targetNode) this.data.links.push({
 					source: parentNode,
 					target: targetNode
 				});
 			});
-			const index$1 = this.data.nodes.findIndex((n) => n.id === sessionNode.id);
+			const index$1 = this.data.nodes.values.findIndex((n) => n.id === sessionNode.id);
 			if (index$1 !== -1) this.data.nodes.splice(index$1, 1);
 		});
+		const isHighlighted = (nodeId) => this.highlights.maps.nodeId.get(nodeId);
+		const isChildHighlighted = (nodeId) => {
+			const children = getChildren(nodeId, this.data.links);
+			if (children.some(isHighlighted)) return true;
+			else return children.some(isHighlighted);
+		};
+		const nodesWithoutHighlight = this.data.nodes.values.filter((n) => {
+			if (n.state?.sessionNode) return false;
+			if (n.id === this.rootId) return false;
+			if (n.state?.emitterNode) return false;
+			if (isHighlighted(n.id)) return false;
+			if (isChildHighlighted(n.id)) return false;
+			return true;
+		});
+		this.secondaryNodes = groupBy(nodesWithoutHighlight, (n) => n.depth || 0);
 		if (this.selectedNode) this.subGraph = getNodeSubgraph(this.selectedNode.id, this.data.nodes, this.data.links, this.rootId);
+		this.updateEmitterNodes();
 		this.restart();
 		if (focusSessionNode) this.transformCanvas.focusOn(() => {
 			if (!focusSessionNode) return null;
@@ -1559,24 +1809,44 @@ var OpenGraphSimulation = class {
 				scale: t.scale
 			};
 		});
+		else this.transformCanvas.focusOn(() => {
+			if (!this.rootNode) return null;
+			const t = this.transformCanvas.getTransform();
+			return {
+				x: this.rootNode.x,
+				y: this.rootNode.y,
+				scale: t.scale
+			};
+		});
+	};
+	setNodeVisibility = (visibility, groupRootOrphans) => {
+		if (this.nodeVisibility === visibility && groupRootOrphans === this.groupRootOrphans) return;
+		this.groupRootOrphans = groupRootOrphans;
+		this.nodeVisibility = visibility;
+		this.updateHighlights();
 	};
 	initialize = (data, rootId) => {
+		Measure.start("initialize");
+		this.emittedNodes = [];
 		this.rawData = data;
 		this.rootId = rootId;
-		const _links = data.links.map((l) => ({ ...l }));
-		const _nodes = data.nodes.map((n) => {
-			const existingData = this.data.nodes.find((x$1) => x$1.id === n.id);
-			const parents = getParents(n.id, _links);
-			const parentNode = this.data.nodes.find((p) => p.id === parents[0]);
-			const clusterSize = getClusterSize(n.id, _links);
-			const depth = getNodeDepth(n.id, _links);
-			const circlePos = getRadialPoint(getRadius(depth), this.center.x, this.center.y);
-			const x = depth > 0 ? null : existingData?.x || parentNode?.x || circlePos.x;
-			const y = depth > 0 ? null : existingData?.y || parentNode?.y || circlePos.y;
+		const newData = newGraphData({
+			nodes: [],
+			links: data.links.map((l) => ({ ...l }))
+		});
+		newData.nodes.reset(data.nodes.map((n) => {
+			const existingData = this.data.nodes.maps.id.get(n.id);
+			const parent = getParent(n.id, newData.links);
+			const parentNode = parent ? newData.nodes.maps.id.get(parent) : null;
+			const clusterSize = getClusterSize(n.id, newData.links);
+			const depth = getNodeDepth(n.id, newData.links);
+			const circlePos = getRadialPoint(getRadius(Math.max(depth, 2)), this.center.x, this.center.y);
+			const x = depth > 0 ? void 0 : existingData?.x || parentNode?.x || circlePos.x;
+			const y = depth > 0 ? void 0 : existingData?.y || parentNode?.y || circlePos.y;
 			return {
 				...n,
 				state: {
-					collapsed: hasOnlyLeafs(n.id, _links) && getChildren(n.id, _links).length > 1,
+					collapsed: false,
 					...existingData?.state
 				},
 				clusterSize,
@@ -1584,44 +1854,39 @@ var OpenGraphSimulation = class {
 				x,
 				y
 			};
-		}).sort((a, b) => a.depth - b.depth);
-		_nodes.forEach((n, i, arr) => {
-			const existingData = _nodes.find((x$1) => x$1.id === n.id);
-			const parents = getParents(n.id, _links);
-			const parentNode = _nodes.find((p) => p.id === parents[0]);
-			const depth = n.depth;
-			const parentAngle = depth > 0 ? getAngle(this.center.x, this.center.y, parentNode?.x, parentNode?.y) : void 0;
+		}).sort((a, b) => a.depth - b.depth));
+		newData.nodes.values.forEach((n, i, arr$1) => {
+			const parent = getParent(n.id, newData.links);
+			const parentNode = parent ? newData.nodes.maps.id.get(parent) : null;
+			const depth = Math.max(2, n.depth || 0);
+			const parentAngle = getAngle(this.center.x, this.center.y, parentNode?.x, parentNode?.y);
 			const circlePos = getRadialPoint(getRadius(depth), this.center.x, this.center.y, parentAngle);
-			const x = depth > 0 ? existingData?.x || circlePos.x : existingData?.x || circlePos.x;
-			const y = depth > 0 ? existingData?.y || circlePos.y : existingData?.y || circlePos.y;
-			_nodes[i].x = x;
-			_nodes[i].y = y;
+			n.x = n.x || circlePos.x;
+			n.y = n.y || circlePos.y;
 		});
-		if (!data.nodes.find((n) => n.id === this.rootId)) _nodes.push({
+		if (!newData.nodes.maps.id.get(this.rootId)) newData.nodes.push({
 			id: this.rootId,
 			state: {
 				collapsed: false,
-				image: void 0
+				image: void 0,
+				rootNode: true
 			},
 			depth: -1,
 			clusterSize: 1,
 			x: this.center.x,
 			y: this.center.y
 		});
-		const targetIds = new Set(_links.map((link) => link.target));
-		const rootNodes = _nodes.filter((node) => !targetIds.has(node.id));
-		for (const node of rootNodes) _links.push({
+		const rootNodes = newData.nodes.values.filter((node) => !newData.links.maps.targetId.get(node.id));
+		for (const node of rootNodes) newData.links.push({
 			source: this.rootId,
 			target: node.id
 		});
-		this.maxDepth = Math.max(..._nodes.map((n) => n.depth || 0));
-		this.data = {
-			nodes: _nodes,
-			links: _links
-		};
+		this.maxDepth = Math.max(...newData.nodes.values.map((n) => n.depth || 0));
+		this.data = newData;
 		this.loadNodeImages();
 		this.updateHighlights();
 		this.triggerSelected(true);
+		Measure.end("initialize");
 	};
 	get lockedNode() {
 		return this.lockedNodeId ? this.getNodeById(this.lockedNodeId) : null;
@@ -1633,25 +1898,43 @@ var OpenGraphSimulation = class {
 		});
 		else if (this.lockedNode) this.handleClickNode(this.lockedNode, {
 			noToggle: true,
-			triggerFocus
+			triggerFocus,
+			triggerRestart: true
 		});
 		else this.setSelectedNode(null);
 	};
-	restart = (alpha = .1) => {
+	get groupNodes() {
+		return this.prunedData.nodes.maps.groupNode.get("true");
+	}
+	restart = (alpha = .3) => {
 		this.tickCount = 0;
-		this.prunedData = getPrunedData(this.rootId, this.data.nodes, this.data.links, this.highlights);
+		console.log("Restarting simulation with alpha:", this.groupNodes);
+		this.prunedData = getPrunedData(this.rootId, this.data.nodes, this.data.links, this.highlights.values, {
+			nodeVisibility: this.nodeVisibility,
+			emittedNodes: this.emittedNodes,
+			groupNodes: this.groupNodes,
+			skipGrouping: !this.groupRootOrphans || this.data.nodes.values.length < 200,
+			openedGroups: this.openedGroups
+		});
 		this.updateRenderLayers();
-		this.clusterSizeRange = this.prunedData.nodes.filter((n) => n.state?.collapsed).reduce((acc, node) => [Math.min(acc[0], node.clusterSize || 1), Math.max(acc[1], node.clusterSize || 1)], [Infinity, -Infinity]);
+		this.clusterSizeRange = (this.prunedData.nodes.maps.collapsed.get("true") || []).reduce((acc, node) => [Math.min(acc[0], node.clusterSize || 1), Math.max(acc[1], node.clusterSize || 1)], [Infinity, -Infinity]);
 		if (this.simulation) {
 			this.simulation.stop();
 			this.simulation.on("tick", null);
 			this.simulation.on("end", null);
 		}
-		this.simulation = forceSimulation(this.prunedData.nodes).alpha(this.simulation ? alpha : .5).force("collide", forceCollide((n) => this.getNodeSize(n.id) / 2)).force("link", asymmetricLinks(this.prunedData.links).id((d) => d.id).distance((l) => {
+		this.simulation = forceSimulation(this.prunedData.nodes.values).alpha(this.simulation ? alpha : .5).force("collide", forceCollide((n) => {
+			return this.getNodeSize(n.id) / 2 + 2;
+		})).force("link", asymmetricLinks(this.prunedData.links.values).id((d) => d.id).distance((l) => {
 			const size = this.getNodeSize(isSimNode(l.target) ? l.target.id : l.target.toString());
 			if (isSimNode(l.target)) {
 				const state = l.target?.state;
+				if (state?.emitterNode) {
+					if (isSimNode(l.source) && l.source.id === this.rootId) return 100;
+					return 1;
+				}
 				if (!state?.collapsed) return size;
+				if (state.groupNode) return 5;
 			}
 			return size * 3;
 		}).strength((l) => {
@@ -1659,27 +1942,27 @@ var OpenGraphSimulation = class {
 		})).force("charge", forceManyBody().strength((node) => {
 			return -150;
 		})).force("center", forceCenter(this.center.x, this.center.y).strength(.1)).restart();
-		if (RADIAL_FORCES) for (let i = 0; i < this.maxDepth; i++) {
-			const depth = i;
-			const r = getRadius(depth);
-			const x = this.center.x;
-			const y = this.center.y;
-			console.log("Adding radial force for depth", depth, "with radius", r, x, y);
-			this.simulation.force(`radial-${depth}`, forceRadial(r, x, y).strength((n) => {
-				if (n.id === this.rootId) return 0;
-				if (n.depth === 0) return 0;
-				if (n.depth === depth) return .01;
-				return 0;
-			}));
-		}
-		this.simulation.on("tick", this.handleTick);
-		this.simulation.on("end", this.onEnd);
+		this.simulation.restart();
+		Measure.start("simulation");
+		this.simulation.on("tick", () => {
+			Measure.end("tick", true);
+			this.handleTick();
+			Measure.start("tick");
+		});
+		this.simulation.on("end", () => {
+			Measure.end("simulation");
+			this.onEnd();
+		});
 	};
 	get rootNode() {
-		return this.data.nodes.find((n) => n.id === this.rootId) || null;
+		return this.data.nodes.maps.id.get(this.rootId) || null;
 	}
 	handleTick = () => {
 		this.isTicking = true;
+		if (this.rootNode) {
+			this.rootNode.vx = 0;
+			this.rootNode.vy = 0;
+		}
 		this.onDraw();
 		this.tickCount++;
 	};
@@ -1701,29 +1984,30 @@ var OpenGraphSimulation = class {
 	}
 	getNodeSize = (nodeId) => {
 		const { nodeSize } = this.config;
-		const highlight = this.highlights.find((h) => h.id === nodeId);
-		const sizeScale = highlight?.scale || 1;
+		const sizeScale = this.highlights.maps.nodeId.get(nodeId)?.scale || 1;
 		if (nodeId === this.rootId) return nodeSize * 2 * sizeScale;
-		const node = this.data.nodes.find((n) => n.id === nodeId);
+		const node = this.prunedData.nodes.maps.id.get(nodeId);
 		if (node?.state?.sessionNode) return 5;
-		const isCollapsed = !!node?.state?.collapsed;
-		if (isCollapsed) {
-			const scale = scaleLinear().domain(this.clusterSizeRange).range([nodeSize, nodeSize * 3]);
-			return scale(node.clusterSize || 1);
+		const isEmitterNode = node?.state?.emitterNode;
+		if (isEmitterNode) {
+			if (node.clusterSize === 0) return 5;
+			return scaleLinear().domain(this.emitterClusterSizeRange).range([nodeSize, nodeSize * 3])(node.clusterSize || 1);
 		}
+		const isCollapsed = !!node?.state?.collapsed;
+		const isGroupNode = !!node?.state?.groupNode;
+		if (isCollapsed || isEmitterNode || isGroupNode) return scaleLinear().domain(this.clusterSizeRange).range([nodeSize, nodeSize * 3])(node.clusterSize || 1);
 		const isSelected = this.selectedNode?.id === nodeId;
-		const isLiquidated = node?.status === "LIQUIDATED" || node?.status === "REGENERATED";
-		const _size = isLiquidated ? nodeSize * .2 : nodeSize;
+		const _size = node?.status === "LIQUIDATED" || node?.status === "REGENERATED" ? nodeSize * .2 : nodeSize;
 		return isSelected ? _size * 4 : _size * sizeScale;
 	};
 	updateRenderLayers() {
 		const isHighlighted = (id) => {
-			const highlight = this.highlights.find((h) => h.id === id);
-			return !this.selectedNode && highlight?.onTop || this.selectedNode?.id === id || this.subGraph.nodes.find((n) => n.id === id);
+			const highlight = this.highlights.maps.nodeId.get(id);
+			return !this.selectedNode && highlight?.onTop || this.selectedNode?.id === id || this.subGraph.nodes.maps.id.get(id);
 		};
 		this.renderLayers.nodes.regular = [];
 		this.renderLayers.nodes.highlighted = [];
-		this.prunedData.nodes.forEach((node) => {
+		this.prunedData.nodes.values.forEach((node) => {
 			if (isHighlighted(node.id)) this.renderLayers.nodes.highlighted.push(node);
 			else this.renderLayers.nodes.regular.push(node);
 		});
@@ -1731,20 +2015,14 @@ var OpenGraphSimulation = class {
 		this.renderLayers.links.highlighted = [];
 		const isLinkInSubgraph = (link) => {
 			if (!this.selectedNode) return false;
-			const sourceId = isSimNode(link.source) ? link.source.id : link.source;
-			const targetId = isSimNode(link.target) ? link.target.id : link.target;
-			return this.subGraph.links.some((l) => {
-				const lSourceId = getNodeId(l.source);
-				const lTargetId = getNodeId(l.target);
-				return lSourceId === sourceId && lTargetId === targetId || lSourceId === targetId && lTargetId === sourceId;
-			});
+			return this.subGraph.links.maps.linkId.has(getLinkId(link));
 		};
 		const isLinkInHighlights = (link) => {
 			const sourceId = isSimNode(link.source) ? link.source.id : link.source;
 			const targetId = isSimNode(link.target) ? link.target.id : link.target;
-			return !this.selectedNode && !!this.highlights.find((h) => h.isDetached && (h.id === sourceId || h.id === targetId));
+			return !this.selectedNode && !!this.highlights.maps.detached.get("true")?.some((h) => h.id === sourceId || h.id === targetId);
 		};
-		this.prunedData.links.forEach((link) => {
+		this.prunedData.links.values.forEach((link) => {
 			const inSubgraph = isLinkInSubgraph(link);
 			const inHighlights = isLinkInHighlights(link);
 			if (inSubgraph || inHighlights) this.renderLayers.links.highlighted.push(link);
@@ -1757,9 +2035,9 @@ var OpenGraphSimulation = class {
 			return -1;
 		});
 		this.renderLayers.nodes.highlighted.sort((a, b) => {
-			const highlightA = this.highlights.find((h) => h.id === a.id);
-			const highlightB = this.highlights.find((h) => h.id === b.id);
-			if (this.subGraph.nodes.find((n) => n.id === a.id) || this.subGraph.nodes.find((n) => n.id === b.id)) return 2;
+			const highlightA = this.highlights.maps.nodeId.get(a.id);
+			const highlightB = this.highlights.maps.nodeId.get(b.id);
+			if (this.subGraph.nodes.maps.id.get(a.id) || this.subGraph.nodes.maps.id.get(b.id)) return 2;
 			if (a.id === this.selectedNode?.id || b.id === this.selectedNode?.id) return 2;
 			if (highlightA?.onTop || highlightB?.onTop) return 1;
 			return -1;
@@ -1767,8 +2045,14 @@ var OpenGraphSimulation = class {
 	}
 	renderLink(ctx, link, options) {
 		const sourceId = isSimNode(link.source) ? link.source.id : link.source;
-		const targetId = isSimNode(link.target) ? link.target.id : link.target;
-		let sourceNode = this.data.nodes.find((n) => n.id === sourceId);
+		const sourceNode = this.prunedData.nodes.maps.id.get(sourceId.toString());
+		if (isSimNode(link.target)) {
+			if (this.nodeVisibility === "all" || true) {
+				if (link.target.state?.emitterNode || isSimNode(link.source) && link.source.state?.emitterNode) return;
+			}
+			const isSourceNode = this.prunedData.links.maps.sourceId.has(getNodeId(link.target));
+			if (link.target.state?.emitterNode && link.target.clusterSize === 0 && !isSourceNode) return;
+		}
 		const isLight = this.theme === "light";
 		const { dim: _dim, hasSelection, highlight } = options;
 		let stroke = _dim ? this.color(dim(.09, isLight))() : hasSelection ? this.color(dim(.4, isLight))() : this.color(dim(.18, isLight))();
@@ -1802,12 +2086,13 @@ var OpenGraphSimulation = class {
 		const fill = _dim ? this.color(dim(.075, isLight))() : isCollapsed ? this.color(dim(.18, isLight))() : isHovered ? this.color(dim(.4, isLight))() : this.color();
 		const stroke = this.colorContrast();
 		const nodeSize = this.getNodeSize(node.id);
-		const highlight = this.highlights.find((h) => h.id === node.id);
+		const highlight = this.highlights.maps.nodeId.get(node.id);
 		const highlighted = !!highlight;
 		let highlightedStroke = _dim ? color(highlight?.strokeColor || red)(dim(.4, isLight))() : color(highlight?.strokeColor || red)();
 		if (node.id === this.rootId) this.renderRootNode(ctx, x, y, nodeSize, _dim, isLight);
+		else if (node.state?.emitterNode) return;
 		else if (node.state?.sessionNode) this.renderSessionNode(ctx, x, y, nodeSize);
-		else if (isCollapsed) this.renderCollapsedNode(ctx, x, y, nodeSize, {
+		else if (isCollapsed || node.state?.groupNode) this.renderCollapsedNode(ctx, x, y, nodeSize, {
 			fill,
 			stroke,
 			highlighted,
@@ -1829,6 +2114,29 @@ var OpenGraphSimulation = class {
 			image: node.state?.image
 		});
 	}
+	renderEmitterNode(ctx, x, y, size, node, dimmed) {
+		if (this.nodeVisibility === "all") return;
+		if (node.clusterSize === 0) return;
+		this.theme;
+		circle(ctx, x, y, size / 2, {
+			stroke: true,
+			strokeStyle: this.colorContrast(),
+			lineWidth: .2,
+			fill: true,
+			fillStyle: "#0000ff"
+		});
+		const transform = this.transformCanvas.getTransform();
+		const clusterSize = node.clusterSize || 1;
+		if (transform.scale - .5 >= this.visiblityScale(clusterSize) ? 1 : 0) {
+			ctx.font = `${14 / transform.scale}px Sans-Serif`;
+			ctx.textAlign = "center";
+			ctx.textBaseline = "middle";
+			ctx.fillStyle = this.colorContrast();
+			ctx.fillText(clusterSize.toString(), x, y);
+			ctx.font = `${10 / transform.scale}px Sans-Serif`;
+			ctx.fillText("click to emit", x, y + 5);
+		}
+	}
 	renderSessionNode(ctx, x, y, size) {
 		const isLight = this.theme === "light";
 		circle(ctx, x, y, size / 2, {
@@ -1873,8 +2181,7 @@ var OpenGraphSimulation = class {
 			fill: true,
 			fillStyle: fill
 		});
-		const showLabel = transform.scale >= this.visiblityScale(clusterSize) ? 1 : 0;
-		if (showLabel) {
+		if (transform.scale >= this.visiblityScale(clusterSize) ? 1 : 0) {
 			ctx.font = `${14 / transform.scale}px Sans-Serif`;
 			ctx.textAlign = "center";
 			ctx.textBaseline = "middle";
@@ -1888,7 +2195,7 @@ var OpenGraphSimulation = class {
 		rect(ctx, x - _size / 2, y - _size / 2, _size, _size, {
 			stroke: highlighted || isHovered,
 			strokeStyle: isHovered ? fill : highlightedStroke,
-			lineWidth: .5,
+			lineWidth: 1,
 			fill: this.hideThumbnails || isLiquidated || !image,
 			fillStyle: fill,
 			borderRadius: 1
@@ -1896,9 +2203,14 @@ var OpenGraphSimulation = class {
 		if (image && !this.hideThumbnails && !isLiquidated) img(ctx, image, x - size / 2, y - size / 2, size, size, 1, _dim ? .1 : 1, fill);
 	}
 	onDraw = () => {
+		Measure.start("draw");
+		this.isDrawing = true;
 		const context = this.canvas?.getContext("2d");
 		const transform = this.transformCanvas.getTransform();
-		if (!context) return;
+		if (!context) {
+			this.isDrawing = false;
+			return;
+		}
 		const dpi = devicePixelRatio || 1;
 		context.save();
 		context.scale(dpi, dpi);
@@ -1906,11 +2218,21 @@ var OpenGraphSimulation = class {
 		context.setTransform(transform.scale, 0, 0, transform.scale, transform.x, transform.y);
 		context.translate(this.origin.x, this.origin.y);
 		context.save();
+		const dimmedByHighlights = (nodeId) => {
+			if (this.nodeVisibility === "all") return false;
+			if (nodeId === this.rootId) return false;
+			if (this.prunedData.nodes.maps.id.get(nodeId)?.state?.groupNode) return false;
+			if (this.nodeVisibility === "locked") {
+				const node = this.getNodeById(nodeId);
+				return !(node?.status === "LOCKED" || node?.status === "EVOLVED");
+			}
+			return !this.highlights.maps.nodeId.get(nodeId);
+		};
 		const hasSelection = !!this.selectedNode;
 		this.renderLayers.links.regular.forEach((link) => {
-			const sourceId = isSimNode(link.source) ? link.source.id : link.source;
-			const targetId = isSimNode(link.target) ? link.target.id : link.target;
-			const _dim = hasSelection && !this.subGraph.links.find((sl) => getNodeId(sl.source) === sourceId && getNodeId(sl.target) === targetId);
+			const sourceId = getNodeId(link.source);
+			const targetId = getNodeId(link.target);
+			const _dim = hasSelection ? !this.subGraph.links.maps.linkId.has(getLinkId(link)) : dimmedByHighlights(sourceId) || dimmedByHighlights(targetId);
 			this.renderLink(context, link, {
 				dim: _dim,
 				hasSelection
@@ -1918,17 +2240,17 @@ var OpenGraphSimulation = class {
 		});
 		context.globalAlpha = 1;
 		this.renderLayers.nodes.regular.forEach((node) => {
-			const _dim = hasSelection && !this.subGraph.nodes.some((n) => n.id === node.id);
+			const _dim = hasSelection ? !this.subGraph.nodes.maps.id.has(node.id) : dimmedByHighlights(node.id);
 			this.renderNode(context, node, {
 				dim: _dim,
 				transform
 			});
 		});
 		this.renderLayers.links.highlighted.forEach((link) => {
-			const sourceId = isSimNode(link.source) ? link.source.id : link.source;
-			const targetId = isSimNode(link.target) ? link.target.id : link.target;
-			const _dim = hasSelection && !this.subGraph.links.find((sl) => getNodeId(sl.source) === sourceId && getNodeId(sl.target) === targetId);
-			const highlight = this.highlights.find((h) => h.id === sourceId || h.id === targetId);
+			const sourceId = getNodeId(link.source);
+			const targetId = getNodeId(link.target);
+			const _dim = hasSelection ? !this.subGraph.links.maps.linkId.has(getLinkId(link)) : dimmedByHighlights(sourceId) || dimmedByHighlights(targetId);
+			const highlight = this.highlights.maps.nodeId.get(sourceId) || this.highlights.maps.nodeId.get(targetId);
 			this.renderLink(context, link, {
 				dim: _dim,
 				hasSelection,
@@ -1937,7 +2259,7 @@ var OpenGraphSimulation = class {
 		});
 		context.globalAlpha = 1;
 		this.renderLayers.nodes.highlighted.forEach((node) => {
-			const _dim = hasSelection && !this.subGraph.nodes.some((n) => n.id === node.id);
+			const _dim = hasSelection ? !this.subGraph.nodes.maps.id.has(node.id) : dimmedByHighlights(node.id);
 			this.renderNode(context, node, {
 				dim: _dim,
 				transform
@@ -1946,6 +2268,8 @@ var OpenGraphSimulation = class {
 		context.restore();
 		context.restore();
 		this.transformCanvas.trackCursor();
+		this.isDrawing = false;
+		Measure.end("draw");
 	};
 	drawDebug(context) {
 		const transform = this.transformCanvas.getTransform();
@@ -1977,13 +2301,15 @@ var OpenGraphSimulation = class {
 	}
 	onEnd = () => {
 		this.isTicking = false;
+		this.emitter.emit("simulation:ended", this);
 	};
 	loadNodeImages = () => {
-		this.data.nodes.forEach((node) => {
+		this.data.nodes.values.forEach((node) => {
 			if (node.id === this.rootId) return;
 			if (node.imgSrc && this.imageCache.get(node.imgSrc)) {
+				const html = this.imageCache.get(node.imgSrc);
 				node.state = node.state || {};
-				node.state.image = this.imageCache.get(node.imgSrc);
+				node.state.image = html;
 				return;
 			}
 			const loadImage = async () => {
@@ -2012,6 +2338,18 @@ var OpenGraphSimulation = class {
 		this.theme = theme;
 		this.updateScene();
 	};
+	setNodeImage = (nodeId, src) => {
+		const node = this.getNodeById(nodeId);
+		if (!node) return;
+		const load = async () => {
+			const html = this.imageCache.get(src) || await loadHTMLImageElement(src);
+			this.imageCache.set(src, html);
+			node.state = node.state || {};
+			node.state.image = html;
+			if (!this.isTicking && !this.isDrawing) this.updateScene();
+		};
+		load();
+	};
 	setHideThumbnails = (hide) => {
 		this.hideThumbnails = hide;
 		this.updateScene();
@@ -2026,7 +2364,7 @@ var OpenGraphSimulation = class {
 		const hash = quickHash(JSON.stringify(highlights));
 		if (hash === this._highlightHash) return;
 		this._highlightHash = hash;
-		this.highlights = highlights;
+		this.highlights.reset(highlights);
 		this.updateHighlights();
 	};
 	setNoInteraction = (noInteraction) => {
@@ -2035,7 +2373,7 @@ var OpenGraphSimulation = class {
 		this.updateScene();
 	};
 	getNodeById = (nodeId) => {
-		return this.data.nodes.find((n) => n.id === nodeId) || null;
+		return this.data.nodes.maps.id.get(nodeId) || null;
 	};
 	setLockedNodeId = (nodeId) => {
 		this.lockedNodeId = nodeId || void 0;
@@ -2080,12 +2418,15 @@ var OpenGraphSimulation = class {
 		context.restore();
 		context.restore();
 	};
+	get measures() {
+		return Measure.getSamples();
+	}
 };
 
 //#endregion
 //#region src/components/OpenFormGraph.tsx
 function OpenFormGraph(props) {
-	const { width, height, highlights = [], className, noInteraction = false, loadNodeImage, translate, onTransform } = props;
+	const { width, height, highlights = [], className, noInteraction = false, loadNodeImage, translate, onTransform, onSimulationEnded, nodeVisibility = "all", children, groupRootOrphans = false } = props;
 	const { simulation, data, rootId, rootImageSources, theme, hideThumbnails, setHoveredNode, setSelectedNode, lockedNodeId } = useOpenFormGraph();
 	const canvasRef = useRef(null);
 	useEffect(() => {
@@ -2098,16 +2439,24 @@ function OpenFormGraph(props) {
 			loadNodeImage,
 			theme,
 			translate,
-			lockedNodeId
+			lockedNodeId,
+			nodeVisibility,
+			highlights,
+			groupRootOrphans
 		});
+		return () => {
+			simulation.current?.destroy();
+		};
+	}, []);
+	useEffect(() => {
+		if (!simulation.current) return;
 		simulation.current.emitter.on("selected-node-changed", setSelectedNode);
 		simulation.current.emitter.on("hovered-node-changed", setHoveredNode);
 		return () => {
 			simulation.current?.emitter.off("selected-node-changed", setSelectedNode);
 			simulation.current?.emitter.off("hovered-node-changed", setHoveredNode);
-			simulation.current?.destroy();
 		};
-	}, []);
+	}, [setSelectedNode, setHoveredNode]);
 	useEffect(() => {
 		if (!simulation.current) return;
 		if (!onTransform) return;
@@ -2116,6 +2465,10 @@ function OpenFormGraph(props) {
 			simulation.current?.emitter.off("transform-changed", onTransform);
 		};
 	}, [onTransform]);
+	useEffect(() => {
+		if (!simulation.current || !onSimulationEnded) return;
+		return simulation.current.emitter.on("simulation:ended", onSimulationEnded);
+	}, [onSimulationEnded]);
 	useEffect(() => {
 		if (!simulation.current) return;
 		simulation.current.resize(width, height);
@@ -2128,6 +2481,10 @@ function OpenFormGraph(props) {
 		if (!simulation.current) return;
 		simulation.current.setHideThumbnails(hideThumbnails);
 	}, [hideThumbnails]);
+	useEffect(() => {
+		if (!simulation.current) return;
+		simulation.current.setNodeVisibility(nodeVisibility, groupRootOrphans);
+	}, [nodeVisibility, groupRootOrphans]);
 	useEffect(() => {
 		if (!simulation.current) return;
 		simulation.current.setHighlights(highlights);
@@ -2139,7 +2496,7 @@ function OpenFormGraph(props) {
 	useEffect(() => {
 		if (!simulation.current) return;
 		simulation.current.initialize(data, rootId);
-	}, [data]);
+	}, [data, rootId]);
 	useEffect(() => {
 		if (!simulation.current) return;
 		if (!translate) return;
@@ -2149,9 +2506,9 @@ function OpenFormGraph(props) {
 		if (!simulation.current) return;
 		if (simulation.current.lockedNodeId === lockedNodeId) return;
 		simulation.current.setLockedNodeId(lockedNodeId);
-	}, [translate?.y, translate?.x]);
+	}, [lockedNodeId]);
 	const dpi = devicePixelRatio || 1;
-	return /* @__PURE__ */ jsx("canvas", {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("canvas", {
 		onMouseEnter: props.onMouseEnter,
 		onMouseLeave: props.onMouseLeave,
 		ref: canvasRef,
@@ -2162,9 +2519,9 @@ function OpenFormGraph(props) {
 			width: `${width}px`,
 			height: `${height}px`
 		}
-	});
+	}), children] });
 }
 
 //#endregion
-export { Highlight, OpenFormGraph, OpenGraphEventEmitter, OpenGraphSimulation, TransformCanvas, buildTreeFromGraphData, circle, color, dim, generateTree, getAllParentsUntil, getChildren, getClusterSize, getNodeDepth, getNodeId, getNodeSubgraph, getParents, getPrunedData, getRootParent, hasOnlyLeafs, hexagon, img, isCustomHighlight, isSimLink, isSimNode, loadHTMLImageElement, rect, red, searchParents };
-//# sourceMappingURL=OpenFormGraph-i8VSTamk.js.map
+export { Highlight, OpenFormGraph, OpenGraphEventEmitter, OpenGraphSimulation, TransformCanvas, buildTreeFromGraphData, circle, color, dim, generateTree, getAllParentsUntil, getChildren, getClusterSize, getLinkId, getNodeDepth, getNodeId, getNodeSubgraph, getParent, getPrunedData, getRootParent, groupGraphNodes, hasOnlyLeafs, hexagon, img, isCustomHighlight, isSimLink, isSimNode, loadHTMLImageElement, newGraphData, rect, red, searchParents };
+//# sourceMappingURL=OpenFormGraph-Ccizmxbo.js.map