From 1dd188323ea3134e0b0030147f10552f9d349d2e Mon Sep 17 00:00:00 2001
From: Colin Dawson <me@cjdawson.com>
Date: Fri, 13 Mar 2026 01:14:39 +0000
Subject: [PATCH] UI tweaks on the hover

---
 src/Sass/visualiser.scss                      | 21 +++++++
 .../components/VisualisetTab.tsx              | 57 ++++++++++++-------
 2 files changed, 58 insertions(+), 20 deletions(-)

diff --git a/src/Sass/visualiser.scss b/src/Sass/visualiser.scss
index 4bcdd0e..6ab8e10 100644
--- a/src/Sass/visualiser.scss
+++ b/src/Sass/visualiser.scss
@@ -208,6 +208,19 @@
   stroke-dasharray: 0;
 }
 
+.visualiser-outcome-connector-line.is-active-outgoing {
+  stroke-width: 2.8px;
+  stroke: rgba($blue, 0.82);
+  stroke-dasharray: 0;
+  filter: drop-shadow(0 0 3px rgba($blue, 0.6));
+}
+
+.visualiser-outcome-connector-line.is-active-incoming {
+  stroke-width: 2.2px;
+  stroke: rgba($blue, 0.58);
+  stroke-dasharray: 2, 2;
+}
+
 .visualiser-outcome-connector-line.is-dim {
   opacity: 0.2;
 }
@@ -216,6 +229,14 @@
   fill: darken($blue, 8%);
 }
 
+.visualiser-outcome-connector-label.is-active-outgoing {
+  fill: darken($blue, 12%);
+}
+
+.visualiser-outcome-connector-label.is-active-incoming {
+  fill: darken($blue, 2%);
+}
+
 .visualiser-outcome-connector-label.is-dim {
   opacity: 0.25;
 }
diff --git a/src/modules/manager/workflowTemplates/components/VisualisetTab.tsx b/src/modules/manager/workflowTemplates/components/VisualisetTab.tsx
index ad09638..58e7d5c 100644
--- a/src/modules/manager/workflowTemplates/components/VisualisetTab.tsx
+++ b/src/modules/manager/workflowTemplates/components/VisualisetTab.tsx
@@ -650,28 +650,29 @@ const VisualiserTab: React.FC<VisualiserTabProps> = ({
               labelY = startY - 1.5 - Math.abs(laneSpread) * 0.12;
               labelAnchor = "end";
             } else {
-              // Adjacent forward flow: keep curved center connectors.
+              // Adjacent forward flow: use orthogonal segments only.
               const startX = source.x;
               const startY = source.y + source.height / 2;
               const endX = target.x;
               const endY = target.y - target.height / 2;
-              const controlOffset = Math.max(4, Math.abs(endY - startY) * 0.25);
-              const startControlX = startX + sourceShift + laneSpread;
-              const endControlX = endX + targetShift + laneSpread;
+              const xDelta = Math.abs(endX - startX);
+              const shouldSnapVertical = xDelta < 1.25;
 
-              path = `M ${startX} ${startY} C ${startControlX} ${startY + controlOffset}, ${endControlX} ${endY - controlOffset}, ${endX} ${endY}`;
+              if (shouldSnapVertical) {
+                const snappedX = (startX + endX) / 2;
+                path = `M ${snappedX} ${startY} L ${snappedX} ${endY}`;
+                labelX = snappedX;
+                labelY = (startY + endY) / 2;
+              } else {
+                const offsetX = (sourceShift + targetShift + laneSpread) * 0.35;
+                const midY = (startY + endY) / 2;
+                const fromX = startX + offsetX;
+                const toX = endX + offsetX;
 
-              const t = 0.5;
-              labelX =
-                Math.pow(1 - t, 3) * startX +
-                3 * Math.pow(1 - t, 2) * t * startControlX +
-                3 * (1 - t) * Math.pow(t, 2) * endControlX +
-                Math.pow(t, 3) * endX;
-              labelY =
-                Math.pow(1 - t, 3) * startY +
-                3 * Math.pow(1 - t, 2) * t * (startY + controlOffset) +
-                3 * (1 - t) * Math.pow(t, 2) * (endY - controlOffset) +
-                Math.pow(t, 3) * endY;
+                path = `M ${startX} ${startY} L ${fromX} ${startY} L ${fromX} ${midY} L ${toX} ${midY} L ${toX} ${endY} L ${endX} ${endY}`;
+                labelX = (fromX + toX) / 2;
+                labelY = midY;
+              }
               labelAnchor = "middle";
             }
 
@@ -699,12 +700,20 @@ const VisualiserTab: React.FC<VisualiserTabProps> = ({
               (edge.sourceGuid === hoveredGuid ||
                 edge.targetGuid === hoveredGuid);
             const edgeIsDim = hoveredGuid !== null && !edgeIsActive;
+            const edgeIntensityClass =
+              hoveredGuid === edge.sourceGuid
+                ? " is-active-outgoing"
+                : hoveredGuid === edge.targetGuid
+                  ? " is-active-incoming"
+                  : edgeIsActive
+                    ? " is-active"
+                    : "";
             const adjustedLabelY = getAdjustedLabelY(labelX, labelY - 1.25);
 
             return (
               <g key={`${edge.sourceGuid}-${edge.targetGuid}`}>
                 <path
-                  className={`visualiser-outcome-connector-line${edgeIsActive ? " is-active" : ""}${edgeIsDim ? " is-dim" : ""}`}
+                  className={`visualiser-outcome-connector-line${edgeIntensityClass}${edgeIsDim ? " is-dim" : ""}`}
                   d={path}
                   markerEnd={
                     isMergedLeft ? undefined : "url(#visualiser-arrow)"
@@ -714,7 +723,7 @@ const VisualiserTab: React.FC<VisualiserTabProps> = ({
                   <text
                     x={labelX}
                     y={adjustedLabelY}
-                    className={`visualiser-outcome-connector-label${edgeIsActive ? " is-active" : ""}${edgeIsDim ? " is-dim" : ""}`}
+                    className={`visualiser-outcome-connector-label${edgeIntensityClass}${edgeIsDim ? " is-dim" : ""}`}
                     textAnchor={labelAnchor}
                     dominantBaseline="middle"
                   >
@@ -739,14 +748,22 @@ const VisualiserTab: React.FC<VisualiserTabProps> = ({
                   edges.some(
                     (edge) =>
                       edge.targetGuid === targetGuid &&
-                      edge.sourceGuid === hoveredGuid,
+                      edge.sourceGuid === hoveredGuid &&
+                      (levelByGuid.get(edge.sourceGuid) ?? 0) >
+                        (levelByGuid.get(edge.targetGuid) ?? 0),
                   ));
               const mergedIsDim = hoveredGuid !== null && !mergedIsActive;
+              const mergedIntensityClass =
+                hoveredGuid === targetGuid
+                  ? " is-active-incoming"
+                  : mergedIsActive
+                    ? " is-active-outgoing"
+                    : "";
 
               return (
                 <path
                   key={`merged-left-${targetGuid}`}
-                  className={`visualiser-outcome-connector-line${mergedIsActive ? " is-active" : ""}${mergedIsDim ? " is-dim" : ""}`}
+                  className={`visualiser-outcome-connector-line${mergedIntensityClass}${mergedIsDim ? " is-dim" : ""}`}
                   d={`M ${laneX} ${endY} L ${endX} ${endY}`}
                   markerEnd="url(#visualiser-arrow)"
                 />