Even more UI tweaks

src/modules/manager/workflowTemplates/components/VisualisetTab.tsx

@@ -515,6 +515,42 @@ const VisualiserTab: React.FC<VisualiserTabProps> = ({
 
     return eligibility;
   }, [edges, levelByGuid]);
+  const mergedRightSourcesByTarget = React.useMemo(() => {
+    const map = new Map<string, Set<string>>();
+
+    edges.forEach((edge) => {
+      const sourceLevel = levelByGuid.get(edge.sourceGuid) ?? 0;
+      const targetLevel = levelByGuid.get(edge.targetGuid) ?? 0;
+      const levelDelta = targetLevel - sourceLevel;
+      if (levelDelta <= 0) {
+        return;
+      }
+
+      if (!mergedRightIncomingByTarget.has(edge.targetGuid)) {
+        return;
+      }
+
+      const eligibility = rightMergeEligibleByTarget.get(edge.targetGuid);
+      const isMergedEdge =
+        (levelDelta > 1 && eligibility?.mergeLong) ||
+        (levelDelta === 1 && eligibility?.mergeAdjacent);
+
+      if (!isMergedEdge) {
+        return;
+      }
+
+      const contributors = map.get(edge.targetGuid) ?? new Set<string>();
+      contributors.add(edge.sourceGuid);
+      map.set(edge.targetGuid, contributors);
+    });
+
+    return map;
+  }, [
+    edges,
+    levelByGuid,
+    mergedRightIncomingByTarget,
+    rightMergeEligibleByTarget,
+  ]);
   const connectedByGuid = React.useMemo(() => {
     const map = new Map<string, Set<string>>();
 
@@ -706,13 +742,12 @@ const VisualiserTab: React.FC<VisualiserTabProps> = ({
             const mergedRightLaneX = mergedRightIncomingByTarget.get(
               edge.targetGuid,
             );
-            const rightMergeEligibility = rightMergeEligibleByTarget.get(
+            const mergedRightSources = mergedRightSourcesByTarget.get(
               edge.targetGuid,
             );
             const isMergedRight =
               mergedRightLaneX !== undefined &&
-              ((levelDelta > 1 && rightMergeEligibility?.mergeLong) ||
+              (mergedRightSources?.has(edge.sourceGuid) ?? false);
-                (levelDelta === 1 && rightMergeEligibility?.mergeAdjacent));
 
             let path = "";
             let labelX = 0;
@@ -907,16 +942,11 @@ const VisualiserTab: React.FC<VisualiserTabProps> = ({
 
               const endX = target.x + target.width / 2;
               const endY = target.y;
+              const mergedSources =
+                mergedRightSourcesByTarget.get(targetGuid) ?? new Set<string>();
               const mergedIsActive =
                 hoveredGuid !== null &&
-                (hoveredGuid === targetGuid ||
+                (hoveredGuid === targetGuid || mergedSources.has(hoveredGuid));
-                  edges.some(
-                    (edge) =>
-                      edge.targetGuid === targetGuid &&
-                      edge.sourceGuid === hoveredGuid &&
-                      (levelByGuid.get(edge.targetGuid) ?? 0) >
-                        (levelByGuid.get(edge.sourceGuid) ?? 0),
-                  ));
               const mergedIsDim = hoveredGuid !== null && !mergedIsActive;
               const mergedIntensityClass =
                 hoveredGuid === targetGuid