use elliptical rings for node expansion placement

Ripple rings are now elliptical (2:1 horizontal-to-vertical ratio)
to match the rectangular shape of nodes. This spreads children wider
horizontally where nodes need more room, and keeps them tighter
vertically where nodes are slim.

Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]>

1 files changed, 8 insertions, 4 deletions

diff --git a/src/zenserver/frontend/html/util/graphengine.js b/src/zenserver/frontend/html/util/graphengine.js
index 4248e29f6..95830be2a 100644
--- a/src/zenserver/frontend/html/util/graphengine.js
+++ b/src/zenserver/frontend/html/util/graphengine.js
@@ -567,17 +567,21 @@ export class GraphEngine
 				arc_span = Math.PI;
 			}
 
-			// place children in concentric rings (ripples)
+			// place children in concentric elliptical rings (ripples)
+			// ellipse: wider horizontally to match rectangular node shape
 			const base_radius = 70;
 			const ring_gap = 40;
 			const min_node_gap = 45;
+			const ellipse_ratio = 2.0;  // horizontal / vertical
 			var added = 0;
 			var ring = 0;
 
 			while (added < deps.length && added < MAX_VISIBLE_DEPS)
 			{
 				const r = base_radius + ring * ring_gap;
-				const arc_len = arc_span * r;
+				const rx = r * ellipse_ratio;
+				const ry = r;
+				const arc_len = arc_span * rx;
 				const capacity = Math.max(1, Math.floor(arc_len / min_node_gap));
 				const remaining = Math.min(deps.length, MAX_VISIBLE_DEPS) - added;
 				const batch = Math.min(capacity, remaining);
@@ -590,8 +594,8 @@ export class GraphEngine
 					const jitter = (Math.random() - 0.5) * 10;
 					const dep_node = this.add_node(
 						dep.opkey,
-						node.x + Math.cos(angle) * (r + jitter),
-						node.y + Math.sin(angle) * (r + jitter),
+						node.x + Math.cos(angle) * (rx + jitter),
+						node.y + Math.sin(angle) * (ry + jitter),
 						false
 					);
 					dep_node.unresolved = dep.unresolved || false;