From b91801c4abff473f5f9a1d306aaad80503bed52d Mon Sep 17 00:00:00 2001
From: Diego Imbert <diego@windmill.dev>
Date: Wed, 2 Jul 2025 14:01:59 +0200
Subject: [PATCH] right positioning when mixing R and W assets

---
 frontend/src/lib/components/flows/utils.ts    |  4 +-
 .../lib/components/graph/FlowGraphV2.svelte   | 42 ++++++++++---------
 2 files changed, 24 insertions(+), 22 deletions(-)

diff --git a/frontend/src/lib/components/flows/utils.ts b/frontend/src/lib/components/flows/utils.ts
index eb79e5e2a0..92188454b3 100644
--- a/frontend/src/lib/components/flows/utils.ts
+++ b/frontend/src/lib/components/flows/utils.ts
@@ -197,6 +197,6 @@ export function checkIfParentLoop(
 }
 
 export const NODE_WITH_READ_ASSET_Y_OFFSET = 45
-export const NODE_WITH_WRITE_ASSET_Y_OFFSET = 48
+export const NODE_WITH_WRITE_ASSET_Y_OFFSET = 45
 export const READ_ASSET_Y_OFFSET = -45
-export const WRITE_ASSET_Y_OFFSET = 68
+export const WRITE_ASSET_Y_OFFSET = 64
diff --git a/frontend/src/lib/components/graph/FlowGraphV2.svelte b/frontend/src/lib/components/graph/FlowGraphV2.svelte
index 24728ba6d5..07f5a7a6b3 100644
--- a/frontend/src/lib/components/graph/FlowGraphV2.svelte
+++ b/frontend/src/lib/components/graph/FlowGraphV2.svelte
@@ -262,12 +262,8 @@
 					let assetAdditionalHeight = 0
 					if (assetsMap?.[id]?.some((a) => a.accessType === 'read'))
 						assetAdditionalHeight += NODE_WITH_READ_ASSET_Y_OFFSET
-
 					if (assetsMap?.[id]?.some((a) => a.accessType === 'write'))
 						assetAdditionalHeight += NODE_WITH_WRITE_ASSET_Y_OFFSET
-
-					console.log('assetAdditionalHeight', assetAdditionalHeight)
-
 					return [
 						(nodeWidths[id] ?? 1) * (NODE.width + NODE.gap.horizontal * 1),
 						NODE.height + NODE.gap.vertical + assetAdditionalHeight
@@ -320,22 +316,28 @@
 
 		for (const node of newNodes) {
 			const assets = assetsMap?.[node.id]
-			const assetNodes: (Node & AssetN)[] | undefined = assets?.map(
-				({ asset, accessType }, assetIdx) =>
-					({
-						id: `${node.id}-asset-${formatAsset(asset)}`,
-						type: 'asset',
-						data: { asset, accessType },
-						position: {
-							x:
-								(ASSET_WIDTH + ASSET_X_GAP) * (assetIdx - assets.length / 2) +
-								(NODE.width + ASSET_X_GAP) / 2,
-							y: accessType === 'read' ? READ_ASSET_Y_OFFSET : WRITE_ASSET_Y_OFFSET
-						},
-						parentId: node.id,
-						width: ASSET_WIDTH
-					}) satisfies Node & AssetN
-			)
+			let [readAssetIdx, writeAssetIdx] = [0, 0]
+			let [readAssetCount, writeAssetCount] = [
+				assets?.filter((a) => a.accessType === 'read').length ?? 0,
+				assets?.filter((a) => a.accessType === 'write').length ?? 0
+			]
+			const assetNodes: (Node & AssetN)[] | undefined = assets?.map(({ asset, accessType }) => {
+				const assetIdx = accessType === 'read' ? readAssetIdx++ : writeAssetIdx++
+				const accessTypeTotal = accessType === 'read' ? readAssetCount : writeAssetCount
+				return {
+					id: `${node.id}-asset-${formatAsset(asset)}`,
+					type: 'asset',
+					data: { asset, accessType },
+					position: {
+						x:
+							(ASSET_WIDTH + ASSET_X_GAP) * (assetIdx - accessTypeTotal / 2) +
+							(NODE.width + ASSET_X_GAP) / 2,
+						y: accessType === 'read' ? READ_ASSET_Y_OFFSET : WRITE_ASSET_Y_OFFSET
+					},
+					parentId: node.id,
+					width: ASSET_WIDTH
+				} satisfies Node & AssetN
+			})
 
 			if (assetNodes?.length) {
 				if (assetNodes.every((n) => n.data.accessType === 'read')) {