diff --git a/frontend/src/lib/components/flows/types.ts b/frontend/src/lib/components/flows/types.ts index 4df676be88..4d1e4d9c7a 100644 --- a/frontend/src/lib/components/flows/types.ts +++ b/frontend/src/lib/components/flows/types.ts @@ -86,7 +86,7 @@ export type FlowEditorContext = { export type FlowGraphAssetContext = StateStore<{ selectedAsset: Asset | undefined - assetsMap?: Record // Maps module ids to their assets + assetsMap?: Record // Maps module ids to their assets s3FilePicker: S3FilePicker | undefined dbManagerDrawer: DbManagerDrawer | undefined resourceEditorDrawer: ResourceEditorDrawer | undefined diff --git a/frontend/src/lib/components/flows/utils.ts b/frontend/src/lib/components/flows/utils.ts index 7e433c359b..cc9b4ec2f6 100644 --- a/frontend/src/lib/components/flows/utils.ts +++ b/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 diff --git a/frontend/src/lib/components/graph/FlowGraphV2.svelte b/frontend/src/lib/components/graph/FlowGraphV2.svelte index 1ce3ba44b5..d5f59cc4b0 100644 --- a/frontend/src/lib/components/graph/FlowGraphV2.svelte +++ b/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 = writable(false) @@ -175,7 +176,7 @@ const flowGraphAssetsCtx: FlowGraphAssetContext = $state({ val: { - assetsMap: {} as Record, + 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} diff --git a/frontend/src/lib/components/graph/renderers/edges/BaseEdge.svelte b/frontend/src/lib/components/graph/renderers/edges/BaseEdge.svelte index eff59e5ee5..5d096772a3 100644 --- a/frontend/src/lib/components/graph/renderers/edges/BaseEdge.svelte +++ b/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 }>('FlowGraphContext') + const flowGraphAssetCtx = getContext('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 @@ ) - + {#if data?.insertable && !$useDataflow && !data?.moving}
assetEq(a, data.asset)).length + .filter(({ asset }) => assetEq(asset, data.asset)).length ) let { data }: Props = $props()