accessType in ctx + fix insert button positioning

frontend/src/lib/components/flows/types.ts

@@ -86,7 +86,7 @@ export type FlowEditorContext = {
 
 export type FlowGraphAssetContext = StateStore<{
 	selectedAsset: Asset | undefined
-	assetsMap?: Record<string, Asset[]> // Maps module ids to their assets
+	assetsMap?: Record<string, { asset: Asset; accessType: 'read' | 'write' }[]> // Maps module ids to their assets
 	s3FilePicker: S3FilePicker | undefined
 	dbManagerDrawer: DbManagerDrawer | undefined
 	resourceEditorDrawer: ResourceEditorDrawer | undefined

frontend/src/lib/components/flows/utils.ts

@@ -195,3 +195,6 @@ export function checkIfParentLoop(
 	}
 	return undefined
 }
+
+export const NODE_WITH_READ_ASSET_Y_OFFSET = 45
+export const NODE_WITH_WRITE_ASSET_Y_OFFSET = 45

frontend/src/lib/components/graph/FlowGraphV2.svelte

@@ -52,7 +52,7 @@
 	import { deepEqual } from 'fast-equals'
 	import ViewportResizer from './ViewportResizer.svelte'
 	import AssetNode from './renderers/nodes/AssetNode.svelte'
-	import { formatAsset, parseAsset, type Asset } from '../assets/lib'
+	import { formatAsset, parseAsset } from '../assets/lib'
 	import type { FlowGraphAssetContext } from '../flows/types'
 	import { getAllModules } from '../flows/flowExplorer'
 	import { inferAssets } from '$lib/infer'
@@ -60,6 +60,7 @@
 	import S3FilePicker from '../S3FilePicker.svelte'
 	import DbManagerDrawer from '../DBManagerDrawer.svelte'
 	import ResourceEditorDrawer from '../ResourceEditorDrawer.svelte'
+	import { NODE_WITH_READ_ASSET_Y_OFFSET, NODE_WITH_WRITE_ASSET_Y_OFFSET } from '../flows/utils'
 
 	let useDataflow: Writable<boolean | undefined> = writable<boolean | undefined>(false)
 
@@ -175,7 +176,7 @@
 
 	const flowGraphAssetsCtx: FlowGraphAssetContext = $state({
 		val: {
-			assetsMap: {} as Record<string, Asset[]>,
+			assetsMap: {},
 			selectedAsset: undefined,
 			dbManagerDrawer: undefined,
 			s3FilePicker: undefined,
@@ -187,7 +188,7 @@
 	const assetsMap = $derived(flowGraphAssetsCtx.val.assetsMap)
 	const resMetadataCache = $derived(flowGraphAssetsCtx.val.resourceMetadataCache)
 	$effect(() => {
-		for (const asset of Object.values(assetsMap ?? []).flatMap((x) => x)) {
+		for (const { asset } of Object.values(assetsMap ?? []).flatMap((x) => x)) {
 			if (asset.kind !== 'resource' || asset.path in resMetadataCache) continue
 			ResourceService.getResource({ path: asset.path, workspace: $workspaceStore! })
 				.then((r) => (resMetadataCache[asset.path] = { resourceType: r.resource_type }))
@@ -213,9 +214,6 @@
 		)
 	}
 
-	const NODE_WITH_READ_ASSET_Y_OFFSET = 45
-	const NODE_WITH_WRITE_ASSET_Y_OFFSET = 60
-
 	let lastNodes: [NodeLayout[], Node[], assetsMap: any] | undefined = undefined
 	function layoutNodes(nodes: NodeLayout[]): Node[] {
 		let lastResult = lastNodes?.[1]
@@ -312,16 +310,16 @@
 		for (const node of newNodes) {
 			const assets = assetsMap?.[node.id]
 			const assetNodes: (Node & AssetN)[] | undefined = assets?.map(
-				(asset, assetIdx) =>
+				({ asset, accessType }, assetIdx) =>
 					({
 						id: `${node.id}-asset-${formatAsset(asset)}`,
 						type: 'asset',
-						data: { asset, accessType: 'write' },
+						data: { asset, accessType },
 						position: {
 							x:
 								(ASSET_WIDTH + ASSET_X_GAP) * (assetIdx - assets.length / 2) +
 								(NODE.width + ASSET_X_GAP) / 2,
-							y: WRITE_ASSET_Y_OFFSET
+							y: accessType === 'read' ? READ_ASSET_Y_OFFSET : WRITE_ASSET_Y_OFFSET
 						},
 						parentId: node.id,
 						width: ASSET_WIDTH
@@ -673,7 +671,8 @@
 			onChange={() =>
 				inferAssets(v.language, v.content).then((assetsRaw) => {
 					const newAssets = assetsRaw.map(parseAsset).filter((a) => !!a)
-					if (assetsMap && !deepEqual(assetsMap[mod.id], newAssets)) assetsMap[mod.id] = newAssets
+					if (assetsMap && !deepEqual(assetsMap[mod.id], newAssets))
+						assetsMap[mod.id] = newAssets.map((asset) => ({ asset, accessType: 'read' }))
 				})}
 		/>
 	{/if}

frontend/src/lib/components/graph/renderers/edges/BaseEdge.svelte

@@ -7,11 +7,15 @@
 	import type { GraphEventHandlers } from '../../graphBuilder.svelte'
 	import { getStraightLinePath } from '../utils'
 	import { twMerge } from 'tailwind-merge'
+	import { type FlowGraphAssetContext } from '$lib/components/flows/types'
+	import { NODE_WITH_WRITE_ASSET_Y_OFFSET } from '$lib/components/flows/utils'
 
 	const { useDataflow } = getContext<{
 		useDataflow: Writable<boolean | undefined>
 	}>('FlowGraphContext')
 
+	const flowGraphAssetCtx = getContext<FlowGraphAssetContext | undefined>('FlowGraphAssetContext')
+
 	let {
 		// id,
 		sourceX,
@@ -38,6 +42,10 @@
 		}
 	} = $props()
 
+	const shouldOffsetInsertButtonDueToAssetNode = flowGraphAssetCtx?.val.assetsMap?.[
+		data.sourceId
+	]?.some((a) => a.accessType === 'write')
+
 	let [edgePath] = $derived(
 		getBezierPath({
 			sourceX,
@@ -57,7 +65,12 @@
 	)
 </script>
 
-<EdgeLabel x={sourceX} y={sourceY + 28} class="base-edge" style="">
+<EdgeLabel
+	x={sourceX}
+	y={sourceY + 28 + (shouldOffsetInsertButtonDueToAssetNode ? NODE_WITH_WRITE_ASSET_Y_OFFSET : 0)}
+	class="base-edge"
+	style=""
+>
 	{#if data?.insertable && !$useDataflow && !data?.moving}
 		<div
 			class={twMerge('edgeButtonContainer nodrag nopan top-0')}

frontend/src/lib/components/graph/renderers/nodes/AssetNode.svelte

@@ -21,7 +21,7 @@
 	const usageCount = $derived(
 		Object.values(flowGraphAssetsCtx.val.assetsMap ?? {})
 			.flat()
-			.filter((a) => assetEq(a, data.asset)).length
+			.filter(({ asset }) => assetEq(asset, data.asset)).length
 	)
 
 	let { data }: Props = $props()