windmill/frontend/src/lib/components/flows/content/FlowPathViewer.svelte

<script lang="ts">
	import { run } from 'svelte/legacy'

	import Skeleton from '$lib/components/common/skeleton/Skeleton.svelte'
	import FlowGraphViewer from '$lib/components/FlowGraphViewer.svelte'
	import type { TriggerContext } from '$lib/components/triggers'
	import { Triggers } from '$lib/components/triggers/triggers.svelte'
	import { FlowService, type Flow, type TriggersCount } from '$lib/gen'
	import { workspaceStore } from '$lib/stores'
	import { getContext, setContext } from 'svelte'
	import type { FlowEditorContext } from '../types'
	import { writable } from 'svelte/store'
	import { NO_TRIGGER_DRAFT_TARGET } from '$lib/components/triggers/utils'

	interface Props {
		path: string
		noSide?: boolean
		fillAvailableHeight?: boolean
		/** Explicit workspace override; takes precedence over the flow-editor
		 * `opWorkspace` context and the nav `$workspaceStore`. */
		workspace?: string
	}

	let { path, noSide = false, fillAvailableHeight = false, workspace = undefined }: Props = $props()

	const flowEditorContext = getContext<FlowEditorContext>('FlowEditorContext')
	let opWs = $derived(workspace ?? flowEditorContext?.opWorkspace?.() ?? $workspaceStore)

	let flow: Flow | undefined = $state(undefined)

	const triggersCount = writable<TriggersCount | undefined>(undefined)
	setContext<TriggerContext>('TriggerContext', {
		triggersCount: triggersCount,
		simplifiedPoll: writable(false),
		showCaptureHint: writable(undefined),
		triggersState: new Triggers(),
		draftTarget: () => NO_TRIGGER_DRAFT_TARGET
	})

	async function loadFlow(path: string) {
		flow = await FlowService.getFlowByPath({ workspace: opWs!, path })
		triggersCount.set(await FlowService.getTriggersCountOfFlow({ workspace: opWs!, path }))
	}

	run(() => {
		path && loadFlow(path)
	})
</script>

<div class="flex flex-col flex-1 h-full overflow-auto">
	{#if flow}
		<FlowGraphViewer triggerNode={true} {noSide} {flow} {fillAvailableHeight} workspace={opWs} />
	{:else}
		<Skeleton layout={[[40]]} />
	{/if}
</div>