mirror of
https://github.com/windmill-labs/windmill.git
synced 2026-10-24 16:04:00 +00:00
* 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>
95 lines
2.4 KiB
Svelte
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>
|