resource editor

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

@@ -11,6 +11,7 @@ import type { TestSteps } from './testSteps.svelte'
 import type { Asset } from '../assets/lib'
 import type S3FilePicker from '../S3FilePicker.svelte'
 import type DbManagerDrawer from '../DBManagerDrawer.svelte'
+import type ResourceEditorDrawer from '../ResourceEditorDrawer.svelte'
 
 export type FlowInput = Record<
 	string,
@@ -88,6 +89,7 @@ export type FlowGraphAssetContext = StateStore<{
 	assetsMap?: Record<string, Asset[]> // Maps module ids to their assets
 	s3FilePicker: S3FilePicker | undefined
 	dbManagerDrawer: DbManagerDrawer | undefined
+	resourceEditorDrawer: ResourceEditorDrawer | undefined
 	// Maps resource paths to their metadata. undefined is for error
 	resourceMetadataCache: Record<string, { resourceType?: string } | undefined>
 }>

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

@@ -59,6 +59,7 @@
 	import OnChange from '../common/OnChange.svelte'
 	import S3FilePicker from '../S3FilePicker.svelte'
 	import DbManagerDrawer from '../DBManagerDrawer.svelte'
+	import ResourceEditorDrawer from '../ResourceEditorDrawer.svelte'
 
 	let useDataflow: Writable<boolean | undefined> = writable<boolean | undefined>(false)
 
@@ -178,6 +179,7 @@
 			selectedAsset: undefined,
 			dbManagerDrawer: undefined,
 			s3FilePicker: undefined,
+			resourceEditorDrawer: undefined,
 			resourceMetadataCache: {}
 		}
 	})
@@ -354,7 +356,6 @@
 			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) {
@@ -670,6 +671,7 @@
 
 <S3FilePicker bind:this={flowGraphAssetsCtx.val.s3FilePicker} readOnlyMode />
 <DbManagerDrawer bind:this={flowGraphAssetsCtx.val.dbManagerDrawer} />
+<ResourceEditorDrawer bind:this={flowGraphAssetsCtx.val.resourceEditorDrawer} />
 
 <style lang="postcss">
 	:global(.svelte-flow__handle) {

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

@@ -10,6 +10,7 @@
 		assetCanBeExplored
 	} from '../../../../../routes/(root)/(logged)/assets/ExploreAssetButton.svelte'
 	import { Tooltip } from '$lib/components/meltComponents'
+	import { pluralize } from '$lib/utils'
 
 	interface Props {
 		data: AssetN['data']
@@ -17,6 +18,12 @@
 
 	const flowGraphAssetsCtx = getContext<FlowGraphAssetContext>('FlowGraphAssetContext')
 
+	const usageCount = $derived(
+		Object.values(flowGraphAssetsCtx.val.assetsMap ?? {})
+			.flat()
+			.filter((a) => assetEq(a, data.asset)).length
+	)
+
 	let { data }: Props = $props()
 	const isSelected = $derived(assetEq(flowGraphAssetsCtx.val.selectedAsset, data.asset))
 </script>
@@ -57,7 +64,22 @@
 					{/if}
 				{/if}
 			</div>
-			<svelte:fragment slot="text">{formatAsset(data.asset)}</svelte:fragment>
+			<svelte:fragment slot="text">
+				Used in {pluralize(usageCount, 'step')}<br />
+				<a
+					href={undefined}
+					class={twMerge(
+						'text-xs',
+						data.asset.kind === 'resource' ? 'text-blue-400 cursor-pointer' : 'text-tertiary'
+					)}
+					onclick={() => {
+						if (data.asset.kind === 'resource')
+							flowGraphAssetsCtx.val.resourceEditorDrawer?.initEdit(data.asset.path)
+					}}
+				>
+					{formatAsset(data.asset)}
+				</a>
+			</svelte:fragment>
 		</Tooltip>
 	{/snippet}
 </NodeWrapper>