From d11e350de395811daad8a49c0eef7b3b19460ead Mon Sep 17 00:00:00 2001
From: Faton Ramadani <faton.ramadani14@gmail.com>
Date: Thu, 23 May 2024 20:17:34 +0200
Subject: [PATCH] feat(frontend): improve graph edges + fix depedencies
 detection (#3802)

* feat(frontend): improve graph edges + fix depedencies detection

* Update frontend/src/lib/components/graph/svelvet/edges/views/Edges/SimpleBezierEdge.svelte

Co-authored-by: ellipsis-dev[bot] <65095814+ellipsis-dev[bot]@users.noreply.github.com>

---------

Co-authored-by: Ruben Fiszel <ruben@windmill.dev>
Co-authored-by: ellipsis-dev[bot] <65095814+ellipsis-dev[bot]@users.noreply.github.com>
---
 .../src/lib/components/flows/flowExplorer.ts  |  5 +-
 .../edges/views/Edges/SimpleBezierEdge.svelte | 56 ++++++++++++++-----
 2 files changed, 45 insertions(+), 16 deletions(-)

diff --git a/frontend/src/lib/components/flows/flowExplorer.ts b/frontend/src/lib/components/flows/flowExplorer.ts
index ad7a3d8d6f..15522408c7 100644
--- a/frontend/src/lib/components/flows/flowExplorer.ts
+++ b/frontend/src/lib/components/flows/flowExplorer.ts
@@ -62,7 +62,10 @@ function filterDependentComponents(modules: FlowModule[], id: string): Record<st
 				modules
 					.map((mod) => [
 						mod.id,
-						getModuleExprs(mod).filter((expr) => expr.includes(`results.${id}`))
+						getModuleExprs(mod).filter((expr) => {
+							const pattern = new RegExp(`\\bresults\\.${id}(?:\\b|\\.)`)
+							return pattern.test(expr)
+						})
 					])
 					.filter((x) => x[1].length > 0)
 		  )
diff --git a/frontend/src/lib/components/graph/svelvet/edges/views/Edges/SimpleBezierEdge.svelte b/frontend/src/lib/components/graph/svelvet/edges/views/Edges/SimpleBezierEdge.svelte
index 9c82b1630e..e3c606ef8c 100644
--- a/frontend/src/lib/components/graph/svelvet/edges/views/Edges/SimpleBezierEdge.svelte
+++ b/frontend/src/lib/components/graph/svelvet/edges/views/Edges/SimpleBezierEdge.svelte
@@ -8,7 +8,7 @@
 
 	function calculateControlOffset(distance, curvature) {
 		if (distance >= 0) {
-			return 0.5 * distance
+			return 0.9 * distance
 		} else {
 			return curvature * 25 * Math.sqrt(-distance)
 		}
@@ -73,6 +73,10 @@
 		})
 		return `M${sourceX},${sourceY} C${sourceControlX},${sourceControlY} ${targetControlX},${targetControlY} ${targetX},${targetY}`
 	}
+	// returns string to pass into edge 'path' svg d attribute for the straight line
+	function getStraightLinePath({ sourceX, sourceY, targetX, targetY }) {
+		return `M${sourceX},${sourceY} L${sourceX},${targetY - 50}`
+	}
 	// determining center of the bezier curve to know where to place the bezier edge text label
 	function getSimpleBezierCenter({
 		sourceX,
@@ -109,6 +113,7 @@
 		const yOffset = Math.abs(centerY - sourceY)
 		return [centerX, centerY, xOffset, yOffset]
 	}
+
 	export let canvasId: string
 	export let edgeId: string
 	const store = findStore(canvasId)
@@ -116,33 +121,54 @@
 	let edge
 	$: edge = $edgesStore[edgeId]
 
-	let params
+	let bezierParams, lineParams
 	$: {
 		const store = findStore(canvasId)
 		const sourceAnchor = getAnchorFromEdge(store, edge.id, 'source')
 		const targetAnchor = getAnchorFromEdge(store, edge.id, 'target')
 		const mapAngle = { 0: 'right', 90: 'top', 180: 'left', 270: 'bottom' }
-		params = {
-			sourceX: edge.sourceX + (edge.offset ?? 0),
-			sourceY: edge.sourceY,
-			sourcePosition: mapAngle[sourceAnchor.angle],
-			targetX: edge.targetX + (edge.offset ?? 0),
-			targetY: edge.targetY,
-			targetPosition: mapAngle[targetAnchor.angle],
-			curvature: 0.25
+
+		if (edge.targetY - edge.sourceY > 100) {
+			bezierParams = {
+				sourceX: edge.sourceX + (edge.offset ?? 0),
+				sourceY: edge.targetY - 100,
+				sourcePosition: mapAngle[sourceAnchor.angle],
+				targetX: edge.targetX + (edge.offset ?? 0),
+				targetY: edge.targetY,
+				targetPosition: mapAngle[targetAnchor.angle],
+				curvature: 0.25
+			}
+			lineParams = {
+				sourceX: edge.sourceX + (edge.offset ?? 0),
+				sourceY: edge.sourceY,
+				targetX: edge.targetX + (edge.offset ?? 0),
+				targetY: edge.targetY - 50
+			}
+		} else {
+			bezierParams = {
+				sourceX: edge.sourceX + (edge.offset ?? 0),
+				sourceY: edge.sourceY,
+				sourcePosition: mapAngle[sourceAnchor.angle],
+				targetX: edge.targetX + (edge.offset ?? 0),
+				targetY: edge.targetY,
+				targetPosition: mapAngle[targetAnchor.angle],
+				curvature: 0.25
+			}
+			lineParams = {}
 		}
 	}
 
 	// pass in params to function that returns a string value for SVG path d attribute (where to be drawn)
-	$: path = getSimpleBezierPath(params)
-	$: [centerX, centerY] = getSimpleBezierCenter(params)
+	$: bezierPath = getSimpleBezierPath(bezierParams)
+	$: linePath = lineParams ? getStraightLinePath(lineParams) : ''
+	$: [bezierCenterX, bezierCenterY] = getSimpleBezierCenter(bezierParams)
 	// pass necessary values to BaseEdge component
 	// BaseEdge renders a 'base' path that can be customized by parent Edge components
 	$: baseEdgeProps = {
 		...edge,
-		path: path,
-		centerX: centerX,
-		centerY: centerY
+		path: `${bezierPath} ${linePath}`,
+		centerX: bezierCenterX,
+		centerY: bezierCenterY
 	}
 </script>