From 42e2eadaf3b1f9875051d19fb0716fbaf49587df Mon Sep 17 00:00:00 2001
From: Diego Imbert <diego@windmill.dev>
Date: Wed, 2 Jul 2025 11:14:05 +0200
Subject: [PATCH] Fix y positioning of nodes with assets

---
 .../lib/components/graph/FlowGraphV2.svelte   | 29 ++++++++++++++-----
 frontend/src/lib/utils.ts                     | 12 ++++++++
 2 files changed, 34 insertions(+), 7 deletions(-)

diff --git a/frontend/src/lib/components/graph/FlowGraphV2.svelte b/frontend/src/lib/components/graph/FlowGraphV2.svelte
index 3ff1184c6b..4157292ad7 100644
--- a/frontend/src/lib/components/graph/FlowGraphV2.svelte
+++ b/frontend/src/lib/components/graph/FlowGraphV2.svelte
@@ -211,7 +211,7 @@
 		)
 	}
 
-	const ASSET_OFFSET_TOP = 45
+	const NODE_WITH_ASSET_OFFSET_TOP = 45
 
 	let lastNodes: [NodeLayout[], Node[], assetsMap: any] | undefined = undefined
 	function layoutNodes(nodes: NodeLayout[]): Node[] {
@@ -253,7 +253,7 @@
 				.coord(coordCenter())
 				.nodeSize((d) => {
 					const id: string | undefined = d?.data?.['id'] ?? ''
-					const assetOffsetTop = assetsMap?.[id]?.length ? ASSET_OFFSET_TOP : 0
+					const assetOffsetTop = assetsMap?.[id]?.length ? NODE_WITH_ASSET_OFFSET_TOP : 0
 					return [
 						(nodeWidths[id] ?? 1) * (NODE.width + NODE.gap.horizontal * 1),
 						NODE.height + NODE.gap.vertical + assetOffsetTop
@@ -300,6 +300,11 @@
 		const allAssetEdges: Edge[] = []
 		const newNodes = [...nodes]
 
+		// If node at yPosition 310.5 has asset nodes on the top, every node
+		// at the same yPosition will need to get shifted by the same amount for everything
+		// to align
+		const yPosAccessTypeMap: Record<number, 'read'> = {}
+
 		for (const node of newNodes) {
 			const assets = assetsMap?.[node.id]
 			const assetNodes = assets?.map(
@@ -319,6 +324,10 @@
 					}) satisfies Node & AssetN
 			)
 
+			if (assets?.length) {
+				yPosAccessTypeMap[node.position.y] = 'read'
+			}
+
 			const assetEdges = assetNodes?.map((n) => {
 				const source = (n.data.accessType !== 'read' ? n.parentId : n.id) ?? ''
 				const target = (n.data.accessType !== 'read' ? n.id : n.parentId) ?? ''
@@ -341,14 +350,21 @@
 				} satisfies Edge
 			})
 
-			if (assets?.length) {
-				node.position.y += ASSET_TOP_OFFSET / 2
-			}
-
 			allAssetEdges.push(...(assetEdges ?? []))
 			allAssetNodes.push(...(assetNodes ?? []))
 		}
 
+		console.log('yPosAccessTypeMap', yPosAccessTypeMap)
+		// Fix y positions of all nodes that were shifted by layoutNodes
+		for (const node of newNodes) {
+			if (node.position.y in yPosAccessTypeMap) {
+				const accessType = yPosAccessTypeMap[node.position.y]
+				if (accessType === 'read') {
+					node.position.y = node.position.y + NODE_WITH_ASSET_OFFSET_TOP / 2
+				}
+			}
+		}
+
 		return [
 			[...newNodes, ...allAssetNodes],
 			[...edges, ...allAssetEdges]
@@ -441,7 +457,6 @@
 			return
 		}
 		let newGraph = graph
-
 		;[nodes, edges] = computeAssetNodes(layoutNodes(newGraph.nodes), newGraph.edges)
 		await tick()
 		height = Math.max(...nodes.map((n) => n.position.y + NODE.height + 100), minHeight)
diff --git a/frontend/src/lib/utils.ts b/frontend/src/lib/utils.ts
index 9293479a88..66dabea990 100644
--- a/frontend/src/lib/utils.ts
+++ b/frontend/src/lib/utils.ts
@@ -1464,3 +1464,15 @@ export function isS3Uri(uri: string): uri is S3Uri {
 	const match = uri.match(/^s3:\/\/([^/]*)\/(.*)$/)
 	return !!match && match.length === 3
 }
+
+export function transpose<T>(matrix: T[][]): T[][] {
+	const maxW = Math.max(...matrix.map((row) => row.length))
+	const maxH = matrix.length
+	const transposed: T[][] = Array.from({ length: maxW }, () => Array(maxH).fill(undefined))
+	for (let i = 0; i < maxH; i++) {
+		for (let j = 0; j < matrix[i].length; j++) {
+			transposed[j][i] = matrix[i][j]
+		}
+	}
+	return transposed
+}