Cleaner look for the outcomes

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
+    // Separate leftward and rightward curves for different grouping strategies
-    const targetGroups = new Map<string, typeof connections>();
+    const leftwardCurves = connections.filter(
-    connections.forEach((conn) => {
+      (conn) => conn.sourceY > conn.targetY,
-      const key = conn.targetGuid;
+    );
-      const group = targetGroups.get(key) ?? [];
+    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
+    // Group rightward curves by source (multiple diverging from same source)
-    targetGroups.forEach((group) => {
+    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;