Files
windmill/frontend/src/lib/components/FlowGraphViewer.svelte
T
Diego ImbertandClaude Opus 4.6 5d79f33590 Final Svelte 5 migration (#8211)
* Remove $$props.field usage

* Rename slots to ensure no hyphen

* _props

* _trigger

* OnSelectedIteration type correct capitalization

* rename _content

* Remove afterUpdate

* Migrate everything to svelte 5

* array bind

* Fix popover

* type never

* nit fixes

* Fixed many trivial errors

* onClick

* Fix errors

* use let:

* nit typing

* fix: wrap state_referenced_locally vars with untrack()

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* Add untrack import

* Fix all syntax errors due to untrack migration

* Fix undefined errors

* Fix more undefined errors

* untrack(() => initialOpen)

* svelte-ignore

* Fix state_descriptors_fixed error in Chart.svelte

Use $state.snapshot() to pass plain copies of data/options to Chart.js
instead of $state proxies. Chart.js's listenArrayEvents tries to define
property descriptors on data arrays, which Svelte 5 proxies reject.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* nit typing

* Merge issue

* Fix "path is not set" error in resource picker / editor

* Fix InputTransformForm error when rerunning some flows

* fix npm run check

---------

Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>
2026-03-05 18:11:40 +01:00

95 lines
2.4 KiB
Svelte

<script lang="ts">
import type { FlowModule, FlowValue } from '$lib/gen'
import { createEventDispatcher } from 'svelte'
import { twMerge } from 'tailwind-merge'
import FlowGraphViewerStep from './FlowGraphViewerStep.svelte'
import FlowGraphV2 from './graph/FlowGraphV2.svelte'
import { dfs } from './flows/dfs'
import { workspaceStore } from '$lib/stores'
interface Props {
flow: {
summary: string
description?: string
value: FlowValue
schema?: any
path?: string
};
overflowAuto?: boolean;
noSide?: boolean;
download?: boolean;
noGraph?: boolean;
triggerNode?: boolean;
stepDetail?: FlowModule | string | undefined;
workspace?: string | undefined;
minHeight?: number;
noBorder?: boolean;
}
let {
flow,
overflowAuto = false,
noSide = false,
download = false,
noGraph = false,
triggerNode = false,
stepDetail = $bindable(undefined),
workspace = $workspaceStore,
minHeight = 400,
noBorder = false
}: Props = $props();
const dispatch = createEventDispatcher()
</script>
<div class="grid grid-cols-3 w-full h-full">
{#if !noGraph}
<div
class="{noSide ? 'col-span-3' : 'sm:col-span-2 col-span-3'} w-full max-h-full"
class:overflow-auto={overflowAuto}
class:border={!noBorder}
>
<FlowGraphV2
{triggerNode}
earlyStop={flow.value.skip_expr !== undefined}
cache={flow.value.cache_ttl !== undefined}
path={flow?.path}
{download}
{minHeight}
{workspace}
modules={flow?.value?.modules}
failureModule={flow?.value?.failure_module}
preprocessorModule={flow?.value?.preprocessor_module}
notes={flow?.value?.notes}
onSelect={(nodeId) => {
if (nodeId === 'Trigger') {
dispatch('triggerDetail')
return
} else if (nodeId === 'failure') {
stepDetail = flow?.value?.failure_module
} else if (nodeId === 'preprocessor') {
stepDetail = flow?.value?.preprocessor_module
} else {
stepDetail = dfs(flow?.value?.modules ?? [], (m) => m).find((m) => m?.id === nodeId)
}
stepDetail = stepDetail ?? nodeId
dispatch('select', stepDetail)
}}
/>
</div>
{/if}
{#if !noSide}
<div
class={twMerge(
'relative w-full h-full min-h-[150px] max-h-[90vh] border-r border-b border-t p-2 pt-0 overflow-auto hidden sm:flex flex-col gap-4',
noGraph ? 'border-0 w-max' : ''
)}
>
<FlowGraphViewerStep schema={flow.schema} {stepDetail} />
</div>
{/if}
</div>