windmill-components 1.493.10 → 1.501.5

package/package/components/graph/FlowGraphV2.svelte

@@ -1,20 +1,20 @@
 <script lang="ts">import { FlowService } from '../../gen';
 import { NODE } from '.';
-import { createEventDispatcher, getContext, onDestroy, onMount, setContext, tick } from 'svelte';
+import { getContext, onDestroy, setContext, tick, untrack } from 'svelte';
 import { get, writable } from 'svelte/store';
-import '@xyflow/svelte/dist/style.css';
-import { SvelteFlow, ConnectionLineType, Controls, ControlButton } from '@xyflow/svelte';
-import { graphBuilder, isTriggerStep } from './graphBuilder';
+import '@xyflow/svelte/dist/base.css';
+import { SvelteFlow, ConnectionLineType, Controls, ControlButton, SvelteFlowProvider } from '@xyflow/svelte';
+import { graphBuilder, isTriggerStep } from './graphBuilder.svelte';
 import ModuleNode from './renderers/nodes/ModuleNode.svelte';
 import InputNode from './renderers/nodes/InputNode.svelte';
 import BranchAllStart from './renderers/nodes/BranchAllStart.svelte';
-import BranchAllEndNode from './renderers/nodes/branchAllEndNode.svelte';
+import BranchAllEndNode from './renderers/nodes/BranchAllEndNode.svelte';
 import ForLoopEndNode from './renderers/nodes/ForLoopEndNode.svelte';
 import ForLoopStartNode from './renderers/nodes/ForLoopStartNode.svelte';
 import ResultNode from './renderers/nodes/ResultNode.svelte';
 import BaseEdge from './renderers/edges/BaseEdge.svelte';
 import EmptyEdge from './renderers/edges/EmptyEdge.svelte';
-import { sugiyama, dagStratify, decrossOpt, coordCenter } from 'd3-dag';
+import { sugiyama, dagStratify, coordCenter, decrossTwoLayer, decrossOpt } from 'd3-dag';
 import { Expand } from 'lucide-svelte';
 import Toggle from '../Toggle.svelte';
 import DataflowEdge from './renderers/edges/DataflowEdge.svelte';
@@ -30,39 +30,14 @@ import BranchOneEndNode from './renderers/nodes/branchOneEndNode.svelte';
 import { workspaceStore } from '../../stores';
 import SubflowBound from './renderers/nodes/SubflowBound.svelte';
 import { deepEqual } from 'fast-equals';
-export let success = undefined;
-export let modules = [];
-export let failureModule = undefined;
-export let preprocessorModule = undefined;
-export let minHeight = 0;
-export let maxHeight = undefined;
-export let notSelectable = false;
-export let flowModuleStates = undefined;
-export let selectedId = writable(undefined);
-export let path = undefined;
-export let newFlow = false;
-export let insertable = false;
-export let earlyStop = false;
-export let cache = false;
-export let scroll = false;
-export let moving = undefined;
-// Download: display a top level button to open the graph in a new tab
-export let download = false;
-export let fullSize = false;
-export let disableAi = false;
-export let flowInputsStore = writable(undefined);
-export let triggerNode = false;
-export let workspace = $workspaceStore ?? 'NO_WORKSPACE';
-export let editMode = false;
+import ViewportResizer from './ViewportResizer.svelte';
 let useDataflow = writable(false);
-setContext('FlowGraphContext', { selectedId, flowInputsStore, useDataflow });
 const triggerContext = getContext('TriggerContext');
-const dispatch = createEventDispatcher();
 let fullWidth = 0;
-let width = 0;
-export let allowSimplifiedPoll = true;
-let simplifiableFlow = undefined;
-export let expandedSubflows = {};
+let width = $state(0);
+let simplifiableFlow = $state(undefined);
+let { onInsert = undefined, onDelete = undefined, onMove = undefined, onDeleteBranch = undefined, onNewBranch = undefined, onSelect = undefined, onChangeId = undefined, onUpdateMock = undefined, onSelectedIteration = undefined, success = undefined, modules = [], failureModule = undefined, preprocessorModule = undefined, minHeight = 0, maxHeight = undefined, notSelectable = false, flowModuleStates = undefined, selectedId = writable(undefined), path = undefined, newFlow = false, insertable = false, earlyStop = false, cache = false, scroll = false, moving = undefined, download = false, fullSize = false, disableAi = false, triggerNode = false, workspace = $workspaceStore ?? 'NO_WORKSPACE', editMode = false, allowSimplifiedPoll = true, expandedSubflows = $bindable({}), onTestUpTo = undefined, onEditInput = undefined } = $props();
+setContext('FlowGraphContext', { selectedId, useDataflow });
 if (triggerContext && allowSimplifiedPoll) {
     if (isSimplifiable(modules)) {
         triggerContext?.simplifiedPoll?.set(true);
@@ -81,10 +56,14 @@ onDestroy(() => {
     }
 });
 function onModulesChange(modules) {
-    computeSimplifiableFlow(modules, triggerContext?.simplifiedPoll ? get(triggerContext.simplifiedPoll) ?? false : false);
+    computeSimplifiableFlow(modules, triggerContext?.simplifiedPoll ? (get(triggerContext.simplifiedPoll) ?? false) : false);
 }
-$: allowSimplifiedPoll && onModulesChange(modules ?? []);
+let lastNodes = undefined;
 function layoutNodes(nodes) {
+    let lastResult = lastNodes?.[1];
+    if (lastResult && deepEqual(nodes, lastNodes?.[0])) {
+        return lastResult;
+    }
     let seenId = [];
     for (const n of nodes) {
         if (seenId.includes(n.id)) {
@@ -92,26 +71,43 @@ function layoutNodes(nodes) {
         }
         seenId.push(n.id);
     }
-    const flattenParentIds = nodes.map((n) => ({
-        ...n,
-        parentIds: n.data?.parentIds ?? []
-    }));
-    const stratify = dagStratify().id(({ id }) => id);
-    const dag = stratify(flattenParentIds);
+    let nodeWidths = {};
+    const nodes2 = nodes.map((n) => {
+        return { ...n, position: { x: 0, y: 0 } };
+    });
+    for (const n of nodes.reverse()) {
+        const endId = n.id + '-end';
+        if (nodeWidths[endId] != undefined) {
+            nodeWidths[n.id] = Math.max(nodeWidths[n.id] ?? 0, nodeWidths[endId]);
+        }
+        if (n.parentIds && n.parentIds?.length == 1) {
+            const parent = n.parentIds[0];
+            const nodeWidth = nodeWidths[n.id] ?? 1;
+            nodeWidths[parent] = (nodeWidths[parent] ?? 0) + nodeWidth;
+        }
+    }
+    const dag = dagStratify().id(({ id }) => id)(nodes2);
     let boxSize;
     try {
         const layout = sugiyama()
-            .decross(decrossOpt())
+            .decross(nodes.length > 20 ? decrossTwoLayer() : decrossOpt())
             .coord(coordCenter())
-            .nodeSize(() => [NODE.width + NODE.gap.horizontal, NODE.height + NODE.gap.vertical]);
+            .nodeSize((d) => {
+            return [
+                (nodeWidths[d?.data?.['id'] ?? ''] ?? 1) * (NODE.width + NODE.gap.horizontal * 1),
+                NODE.height + NODE.gap.vertical
+            ];
+        });
         boxSize = layout(dag);
     }
     catch {
         const layout = sugiyama()
+            .decross(decrossTwoLayer())
             .coord(coordCenter())
             .nodeSize(() => [NODE.width + NODE.gap.horizontal, NODE.height + NODE.gap.vertical]);
         boxSize = layout(dag);
     }
+    const yOffset = insertable ? 100 : 0;
     const newNodes = dag.descendants().map((des) => ({
         ...des.data,
         id: des.data.id,
@@ -126,42 +122,42 @@ function layoutNodes(nodes) {
                         NODE.width / 2 -
                         (width - fullWidth) / 2
                 : 0,
-            y: des.y || 0
+            y: (des.y || 0) + yOffset
         }
     }));
+    lastNodes = [nodes, newNodes];
     return newNodes;
 }
 let eventHandler = {
     deleteBranch: (detail, label) => {
         $selectedId = label;
-        dispatch('deleteBranch', detail);
+        onDeleteBranch?.(detail);
     },
     insert: (detail) => {
-        dispatch('insert', detail);
+        onInsert?.(detail);
     },
     select: (modId) => {
         if (!notSelectable) {
             if ($selectedId != modId) {
                 $selectedId = modId;
             }
-            dispatch('select', modId);
+            onSelect?.(modId);
         }
     },
     changeId: (detail) => {
-        dispatch('changeId', detail);
+        onChangeId?.(detail);
     },
-    delete: (detail, label) => {
-        $selectedId = label;
-        dispatch('delete', detail);
+    delete: (detail) => {
+        onDelete?.(detail.id);
     },
-    newBranch: (module) => {
-        dispatch('newBranch', { module });
+    newBranch: (id) => {
+        onNewBranch?.(id);
     },
-    move: (module, modules) => {
-        dispatch('move', { module, modules });
+    move: (detail) => {
+        onMove?.(detail.id);
     },
-    selectedIteration: (detail, moduleId) => {
-        dispatch('selectedIteration', { ...detail, moduleId: moduleId });
+    selectedIteration: (detail) => {
+        onSelectedIteration?.(detail);
     },
     simplifyFlow: (detail) => {
         triggerContext?.simplifiedPoll.set(detail);
@@ -175,33 +171,28 @@ let eventHandler = {
         delete expandedSubflows[id];
         expandedSubflows = expandedSubflows;
     },
-    updateMock: () => {
-        dispatch('updateMock');
+    updateMock: (detail) => {
+        onUpdateMock?.(detail);
+    },
+    testUpTo: (id) => {
+        onTestUpTo?.(id);
+    },
+    editInput: (moduleId, key) => {
+        onEditInput?.(moduleId, key);
     }
 };
-let lastModules = structuredClone(modules);
-let newModules = modules;
-$: modules && onModulesChange2(modules);
+let lastModules = structuredClone($state.snapshot(modules));
+let moduleCounter = $state(0);
 function onModulesChange2(modules) {
     if (!deepEqual(modules, lastModules)) {
-        lastModules = structuredClone(modules);
-        newModules = modules;
+        console.log('modules changed', modules);
+        lastModules = structuredClone($state.snapshot(modules));
+        moduleCounter++;
     }
 }
-$: graph = graphBuilder(newModules, {
-    disableAi,
-    insertable,
-    flowModuleStates,
-    selectedId: $selectedId,
-    path,
-    newFlow,
-    cache,
-    earlyStop,
-    editMode
-}, failureModule, preprocessorModule, eventHandler, success, $useDataflow, $selectedId, moving, simplifiableFlow, triggerNode ? path : undefined, expandedSubflows);
-const nodes = writable([]);
-const edges = writable([]);
-let height = 0;
+let nodes = $state.raw([]);
+let edges = $state.raw([]);
+let height = $state(0);
 function isSimplifiable(modules) {
     if (!modules || modules?.length !== 2) {
         return false;
@@ -217,12 +208,11 @@ async function updateStores() {
         return;
     }
     let newGraph = graph;
-    $nodes = layoutNodes(newGraph.nodes);
-    $edges = newGraph.edges;
+    nodes = layoutNodes(newGraph.nodes);
+    edges = newGraph.edges;
     await tick();
-    height = Math.max(...$nodes.map((n) => n.position.y + NODE.height + 100), minHeight);
+    height = Math.max(...nodes.map((n) => n.position.y + NODE.height + 100), minHeight);
 }
-$: (graph || allowSimplifiedPoll) && updateStores();
 const nodeTypes = {
     input2: InputNode,
     module: ModuleNode,
@@ -246,38 +236,67 @@ const edgeTypes = {
     hiddenedge: HiddenBaseEdge
 };
 const proOptions = { hideAttribution: true };
-$: showDataflow =
-    $selectedId != undefined &&
-        !$selectedId.startsWith('constants') &&
-        !$selectedId.startsWith('settings') &&
-        $selectedId !== 'failure' &&
-        $selectedId !== 'preprocessor' &&
-        $selectedId !== 'Result' &&
-        $selectedId !== 'triggers';
-const viewport = writable({
-    x: 0,
-    y: 35,
-    zoom: 1
+// onMount(() => {
+// 	centerViewport(width)
+// })
+let yamlEditorDrawer = $state(undefined);
+$effect(() => {
+    allowSimplifiedPoll && modules && untrack(() => onModulesChange(modules ?? []));
 });
-function centerViewport(width) {
-    viewport.update((vp) => ({
-        ...vp,
-        x: (width - fullWidth) / 2,
-        y: vp.y
-    }));
-}
-$: width && centerViewport(width);
-onMount(() => {
-    centerViewport(width);
+$effect(() => {
+    modules && untrack(() => onModulesChange2(modules));
+});
+let graph = $derived.by(() => {
+    moduleCounter;
+    return graphBuilder(untrack(() => modules), {
+        disableAi,
+        insertable,
+        flowModuleStates,
+        selectedId: $selectedId,
+        path,
+        newFlow,
+        cache,
+        earlyStop,
+        editMode
+    }, failureModule, preprocessorModule, eventHandler, success, $useDataflow, $selectedId, moving, simplifiableFlow, triggerNode ? path : undefined, expandedSubflows);
+});
+$effect(() => {
+    ;
+    (graph || allowSimplifiedPoll) && untrack(() => updateStores());
+});
+let showDataflow = $derived($selectedId != undefined &&
+    !$selectedId.startsWith('constants') &&
+    !$selectedId.startsWith('settings') &&
+    $selectedId !== 'failure' &&
+    $selectedId !== 'preprocessor' &&
+    $selectedId !== 'Result' &&
+    $selectedId !== 'triggers');
+let debouncedWidth = $state(undefined);
+let timeout = $state(undefined);
+$effect(() => {
+    if (!debouncedWidth) {
+        return;
+    }
+    if (untrack(() => width) == undefined) {
+        width = debouncedWidth;
+        return;
+    }
+    if (untrack(() => timeout)) {
+        clearTimeout(untrack(() => timeout));
+    }
+    timeout = setTimeout(() => {
+        if (debouncedWidth && untrack(() => width) != debouncedWidth) {
+            width = debouncedWidth;
+        }
+    }, 10);
 });
-let yamlEditorDrawer = undefined;
 </script>
 
 {#if insertable}
 	<FlowYamlEditor bind:drawer={yamlEditorDrawer} />
 {/if}
 
-<div style={`height: ${height}px; max-height: ${maxHeight}px;`} bind:clientWidth={width}>
+<div style={`height: ${height}px; max-height: ${maxHeight}px;`} bind:clientWidth={debouncedWidth}>
 	{#if graph?.error}
 		<div class="center-center p-2">
 			<Alert title="Error parsing the flow" type="error" class="max-w-1/2">
@@ -292,70 +311,74 @@ let yamlEditorDrawer = undefined;
 			</Alert>
 		</div>
 	{:else}
-		<SvelteFlow
-			on:paneclick={(e) => {
-				document.dispatchEvent(new Event('focus'))
-			}}
-			{nodes}
-			{edges}
-			{edgeTypes}
-			{nodeTypes}
-			{viewport}
-			{height}
-			minZoom={0.5}
-			connectionLineType={ConnectionLineType.SmoothStep}
-			defaultEdgeOptions={{ type: 'smoothstep' }}
-			preventScrolling={scroll}
-			zoomOnDoubleClick={false}
-			elementsSelectable={false}
-			{proOptions}
-			nodesDraggable={false}
-			--background-color={false}
-		>
-			<div class="absolute inset-0 !bg-surface-secondary"></div>
-			<Controls position="top-right" orientation="horizontal" showLock={false}>
-				{#if download}
-					<ControlButton
-						on:click={() => {
-							try {
-								localStorage.setItem(
-									'svelvet',
-									encodeState({ modules, failureModule, preprocessorModule })
-								)
-							} catch (e) {
-								console.error('error interacting with local storage', e)
-							}
-							window.open('/view_graph', '_blank')
-						}}
-						class="!bg-surface"
-					>
-						<Expand size="14" />
-					</ControlButton>
-				{/if}
-			</Controls>
-
-			<Controls
-				position="top-left"
-				orientation="horizontal"
-				showLock={false}
-				showZoom={false}
-				showFitView={false}
-				class="!shadow-none"
+		<SvelteFlowProvider>
+			<ViewportResizer {width} />
+			<SvelteFlow
+				onpaneclick={(e) => {
+					document.dispatchEvent(new Event('focus'))
+				}}
+				{nodes}
+				{edges}
+				{edgeTypes}
+				{nodeTypes}
+				{height}
+				{width}
+				minZoom={0.2}
+				maxZoom={1.2}
+				connectionLineType={ConnectionLineType.SmoothStep}
+				defaultEdgeOptions={{ type: 'smoothstep' }}
+				preventScrolling={scroll}
+				zoomOnDoubleClick={false}
+				elementsSelectable={false}
+				{proOptions}
+				nodesDraggable={false}
+				--background-color={false}
 			>
-				{#if showDataflow}
-					<Toggle
-						value={$useDataflow}
-						on:change={() => {
-							$useDataflow = !$useDataflow
-						}}
-						size="xs"
-						options={{
-							right: 'Dataflow'
-						}}
-					/>
-				{/if}
-			</Controls>
-		</SvelteFlow>
+				<div class="absolute inset-0 !bg-surface-secondary"></div>
+				<Controls position="top-right" orientation="horizontal" showLock={false}>
+					{#if download}
+						<ControlButton
+							onclick={() => {
+								try {
+									localStorage.setItem(
+										'svelvet',
+										encodeState({ modules, failureModule, preprocessorModule })
+									)
+								} catch (e) {
+									console.error('error interacting with local storage', e)
+								}
+								window.open('/view_graph', '_blank')
+							}}
+							class="!bg-surface"
+						>
+							<Expand size="14" />
+						</ControlButton>
+					{/if}
+				</Controls>
+
+				<Controls
+					position="top-left"
+					orientation="horizontal"
+					showLock={false}
+					showZoom={false}
+					showFitView={false}
+					class="!shadow-none"
+				>
+					{#if showDataflow}
+						<Toggle
+							value={$useDataflow}
+							on:change={() => {
+								$useDataflow = !$useDataflow
+							}}
+							size="xs"
+							options={{
+								right: 'Dataflow'
+							}}
+						/>
+					{/if}
+				</Controls>
+			</SvelteFlow>
+		</SvelteFlowProvider>
 	{/if}
 </div>
 

package/package/components/graph/FlowGraphV2.svelte.d.ts

@@ -1,22 +1,9 @@
 import { type FlowModule } from '../../gen';
 import { type GraphModuleState } from '.';
 import { type Writable } from 'svelte/store';
-import '@xyflow/svelte/dist/style.css';
-import type { FlowInput } from '../flows/types';
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const FlowGraphV2: $$__sveltets_2_IsomorphicComponent<{
+import '@xyflow/svelte/dist/base.css';
+import { type InlineScript, type InsertKind, type onSelectedIteration } from './graphBuilder.svelte';
+interface Props {
     success?: boolean | undefined;
     modules?: FlowModule[] | undefined;
     failureModule?: FlowModule | undefined;
@@ -36,24 +23,54 @@ declare const FlowGraphV2: $$__sveltets_2_IsomorphicComponent<{
     download?: boolean;
     fullSize?: boolean;
     disableAi?: boolean;
-    flowInputsStore?: Writable<FlowInput | undefined>;
     triggerNode?: boolean;
     workspace?: string;
     editMode?: boolean;
     allowSimplifiedPoll?: boolean;
     expandedSubflows?: Record<string, FlowModule[]>;
-}, {
-    deleteBranch: CustomEvent<any>;
-    insert: CustomEvent<any>;
-    select: CustomEvent<any>;
-    changeId: CustomEvent<any>;
-    delete: CustomEvent<any>;
-    newBranch: CustomEvent<any>;
-    move: CustomEvent<any>;
-    selectedIteration: CustomEvent<any>;
-    updateMock: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type FlowGraphV2 = InstanceType<typeof FlowGraphV2>;
+    onDelete?: (id: string) => void;
+    onInsert?: (detail: {
+        sourceId?: string;
+        targetId?: string;
+        branch?: {
+            rootId: string;
+            branch: number;
+        };
+        index: number;
+        detail: string;
+        isPreprocessor?: boolean;
+        inlineScript?: InlineScript;
+        script?: {
+            path: string;
+            summary: string;
+            hash: string | undefined;
+        };
+        flow?: {
+            path: string;
+            summary: string;
+        };
+        kind: InsertKind;
+    }) => Promise<void>;
+    onNewBranch?: (id: string) => Promise<void>;
+    onSelect?: (id: string | FlowModule) => void;
+    onDeleteBranch?: (detail: {
+        id: string;
+        index: number;
+    }) => Promise<void>;
+    onChangeId?: (detail: {
+        id: string;
+        newId: string;
+        deps: Record<string, string[]>;
+    }) => void;
+    onMove?: (id: string) => void;
+    onUpdateMock?: (detail: {
+        mock: FlowModule['mock'];
+        id: string;
+    }) => void;
+    onTestUpTo?: ((id: string) => void) | undefined;
+    onSelectedIteration?: onSelectedIteration;
+    onEditInput?: (moduleId: string, key: string) => void;
+}
+declare const FlowGraphV2: import("svelte").Component<Props, {}, "expandedSubflows">;
+type FlowGraphV2 = ReturnType<typeof FlowGraphV2>;
 export default FlowGraphV2;

package/package/components/graph/ViewportResizer.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">import { useSvelteFlow } from '@xyflow/svelte';
+import { untrack } from 'svelte';
+let { width } = $props();
+const { setViewport, getViewport } = useSvelteFlow();
+$effect(() => {
+    ;
+    [width];
+    untrack(() => onWidthChange(width));
+});
+let lastWidth = undefined;
+function onWidthChange(width) {
+    if (lastWidth === width)
+        return;
+    const viewport = getViewport();
+    let diff = width - (lastWidth ?? 0);
+    lastWidth = width;
+    setViewport({
+        ...viewport,
+        x: viewport.x + diff / 2
+    });
+}
+</script>

package/package/components/graph/ViewportResizer.svelte.d.ts

@@ -0,0 +1,5 @@
+declare const ViewportResizer: import("svelte").Component<{
+    width: any;
+}, {}, "">;
+type ViewportResizer = ReturnType<typeof ViewportResizer>;
+export default ViewportResizer;