From 64dd818a62f47babb20da2665ee544f5c8ba5418 Mon Sep 17 00:00:00 2001
From: Colin Dawson <me@cjdawson.com>
Date: Thu, 26 Feb 2026 12:40:10 +0000
Subject: [PATCH] Cleaner look for the outcomes

---
 .../components/VisualisetTab.tsx              | 58 ++++++++++++++++---
 1 file changed, 49 insertions(+), 9 deletions(-)

diff --git a/src/modules/manager/workflowTemplates/components/VisualisetTab.tsx b/src/modules/manager/workflowTemplates/components/VisualisetTab.tsx
index 58b879a..7828218 100644
--- a/src/modules/manager/workflowTemplates/components/VisualisetTab.tsx
+++ b/src/modules/manager/workflowTemplates/components/VisualisetTab.tsx
@@ -689,20 +689,60 @@ const VisualiserTab: React.FC<VisualiserTabProps> = ({
       });
     });
 
-    // Detect overlapping connections to the same target and offset them
-    const targetGroups = new Map<string, typeof connections>();
-    connections.forEach((conn) => {
-      const key = conn.targetGuid;
-      const group = targetGroups.get(key) ?? [];
+    // Separate leftward and rightward curves for different grouping strategies
+    const leftwardCurves = connections.filter(
+      (conn) => conn.sourceY > conn.targetY,
+    );
+    const rightwardCurves = connections.filter(
+      (conn) => conn.sourceY <= conn.targetY,
+    );
+
+    // Group leftward curves by target (multiple sources converging to same target)
+    const leftwardTargetGroups = new Map<string, typeof connections>();
+    leftwardCurves.forEach((conn) => {
+      const group = leftwardTargetGroups.get(conn.targetGuid) ?? [];
       group.push(conn);
-      targetGroups.set(key, group);
+      leftwardTargetGroups.set(conn.targetGuid, group);
     });
 
-    // Assign offsets to overlapping connections
-    targetGroups.forEach((group) => {
+    // Group rightward curves by source (multiple diverging from same source)
+    const rightwardSourceGroups = new Map<string, typeof connections>();
+    rightwardCurves.forEach((conn) => {
+      const group = rightwardSourceGroups.get(conn.sourceGuid) ?? [];
+      group.push(conn);
+      rightwardSourceGroups.set(conn.sourceGuid, group);
+    });
+
+    // Assign offsets to leftward curves (grouped by target)
+    leftwardTargetGroups.forEach((group) => {
       if (group.length > 1) {
+        // Longer spans closer to center (first in array gets negative offset)
+        group.sort((a, b) => {
+          const distanceA = Math.abs(a.sourceY - a.targetY);
+          const distanceB = Math.abs(b.sourceY - b.targetY);
+          return distanceB - distanceA; // Descending: longer first
+        });
+
+        group.forEach((conn, idx) => {
+          const totalOffsets = group.length;
+          const offsetStep = CURVE_OFFSET_STEP;
+          const baseOffset = -((totalOffsets - 1) * offsetStep) / 2;
+          conn.curveOffset = baseOffset + idx * offsetStep;
+        });
+      }
+    });
+
+    // Assign offsets to rightward curves (grouped by source)
+    rightwardSourceGroups.forEach((group) => {
+      if (group.length > 1) {
+        // Shorter spans closer to center (first in array gets negative offset)
+        group.sort((a, b) => {
+          const distanceA = Math.abs(a.sourceY - a.targetY);
+          const distanceB = Math.abs(b.sourceY - b.targetY);
+          return distanceA - distanceB; // Ascending: shorter first
+        });
+
         group.forEach((conn, idx) => {
-          // Spread offsets: -10, 0, 10 for 3 connections, etc.
           const totalOffsets = group.length;
           const offsetStep = CURVE_OFFSET_STEP;
           const baseOffset = -((totalOffsets - 1) * offsetStep) / 2;