From 53d8b3ce2c440b4c72ad082650797b2b38f72be7 Mon Sep 17 00:00:00 2001
From: Colin Dawson <me@cjdawson.com>
Date: Wed, 25 Feb 2026 22:58:56 +0000
Subject: [PATCH] working on the visualiser

---
 .../components/VisualisetTab.tsx              | 95 +++++++++++++++----
 1 file changed, 76 insertions(+), 19 deletions(-)

diff --git a/src/modules/manager/workflowTemplates/components/VisualisetTab.tsx b/src/modules/manager/workflowTemplates/components/VisualisetTab.tsx
index 3bbb3c3..a3dc24c 100644
--- a/src/modules/manager/workflowTemplates/components/VisualisetTab.tsx
+++ b/src/modules/manager/workflowTemplates/components/VisualisetTab.tsx
@@ -29,16 +29,6 @@ const VisualiserTab: React.FC<VisualiserTabProps> = ({
     max: allColumns.length > 0 ? Math.max(...allColumns) : 0,
   };
 
-  // Debug logging
-  if (allColumns.length > 0 && process.env.NODE_ENV === "development") {
-    const columnMap: Record<string, number> = {};
-    tasks.forEach((task) => {
-      columnMap[(task.config.name as string) || task.type] =
-        taskColumnMap.current.get(task.config.guid as string) ?? 0;
-    });
-    console.log("Column assignments:", columnMap, "Range:", columnRange);
-  }
-
   if (tasks.length > 0) {
     const byGuid = new Map<string, CreateWorkflowTemplateVersion["tasks"][0]>();
     tasks.forEach((task) => {
@@ -193,14 +183,76 @@ const VisualiserTab: React.FC<VisualiserTabProps> = ({
     return found?.positions ?? [];
   };
 
-  const renderConnector = (count: number, positions?: number[]) => {
+  // Calculate connector positions based on grid columns
+  const getConnectorPositionsByColumn = (
+    levelTasks: CreateWorkflowTemplateVersion["tasks"][],
+  ): number[] => {
+    const numColumns = columnRange.max - columnRange.min + 1;
+    if (numColumns <= 1) return [50];
+
+    return levelTasks.map((task) => {
+      const taskColumn =
+        taskColumnMap.current.get(task.config.guid as string) ?? 0;
+      const gridCol = taskColumn - columnRange.min;
+      // Map grid column to percentage (e.g., 2 columns: col 0 = 25%, col 1 = 75%)
+      return ((gridCol + 0.5) / numColumns) * 100;
+    });
+  };
+
+  const renderConnector = (
+    count: number,
+    positions?: number[],
+    predecessorPositions?: number[],
+  ) => {
     if (count <= 1) {
+      // For a single child, use predecessor position if available
+      let startX = 50;
+      let endX = 50;
+
+      // If single child with predecessor positions, connect from the appropriate predecessor
+      if (positions && positions.length === 1) {
+        endX = positions[0];
+
+        if (predecessorPositions && predecessorPositions.length > 0) {
+          // Find the closest predecessor position to the child position
+          const closest = predecessorPositions.reduce((prev, curr) =>
+            Math.abs(curr - endX) < Math.abs(prev - endX) ? curr : prev,
+          );
+          startX = closest;
+        }
+      }
+
+      // If start and end are the same, use simple vertical connector
+      if (!predecessorPositions || predecessorPositions.length === 0) {
+        return (
+          <div aria-hidden="true" className="visualiser-connector">
+            <div className="visualiser-connector-line" />
+            <div className="visualiser-connector-arrow" />
+            <div className="visualiser-connector-tail" />
+          </div>
+        );
+      }
+
+      // Otherwise render SVG with line from start to end (always, even if vertical)
       return (
-        <div aria-hidden="true" className="visualiser-connector">
-          <div className="visualiser-connector-line" />
-          <div className="visualiser-connector-arrow" />
-          <div className="visualiser-connector-tail" />
-        </div>
+        <svg
+          aria-hidden="true"
+          className="visualiser-connector-branch"
+          viewBox="0 0 100 40"
+          preserveAspectRatio="none"
+        >
+          <line
+            className="visualiser-connector-branch-line"
+            x1={startX}
+            y1="0"
+            x2={endX}
+            y2="40"
+          />
+          <polygon
+            className="visualiser-connector-branch-arrow"
+            points={`${endX - 1.5},34 ${endX + 1.5},34 ${endX},40`}
+          />
+        </svg>
       );
     }
 
@@ -285,7 +337,11 @@ const VisualiserTab: React.FC<VisualiserTabProps> = ({
           </div>
         </div>
         {levels.length > 0 &&
-          renderConnector(levels[0].length, getArrowPositionsForLevel(0))}
+          renderConnector(
+            levels[0].length,
+            getConnectorPositionsByColumn(levels[0]),
+            undefined,
+          )}
         {levels.map((level, index) => (
           <React.Fragment key={`level-${index}`}>
             <div className="visualiser-level">
@@ -351,9 +407,10 @@ const VisualiserTab: React.FC<VisualiserTabProps> = ({
             {index < levels.length - 1
               ? renderConnector(
                   levels[index + 1].length,
-                  getArrowPositionsForLevel(index + 1),
+                  getConnectorPositionsByColumn(levels[index + 1]),
+                  getConnectorPositionsByColumn(levels[index]),
                 )
-              : renderConnector(1)}
+              : renderConnector(1, undefined, undefined)}
           </React.Fragment>
         ))}
         {levels.length === 0 && renderConnector(1)}