windmill-components 1.379.4 → 1.382.3

package/package/components/graph/graphBuilder.js

@@ -0,0 +1,337 @@
+import {} from '@xyflow/svelte';
+import { getDependeeAndDependentComponents } from '../flows/flowExplorer';
+import { dfsByModule } from '../flows/previousResults';
+import { defaultIfEmptyString } from '../../utils';
+export default function graphBuilder(modules, extra, failureModule, eventHandlers, success, useDataflow, selectedId, moving) {
+    const nodes = [];
+    const edges = [];
+    if (!modules) {
+        return { nodes, edges };
+    }
+    function addNode(module, offset, type, subModules) {
+        nodes.push({
+            id: module.id,
+            data: {
+                value: module.value,
+                offset: offset,
+                module: module,
+                modules: subModules ?? modules,
+                parentIds: [],
+                eventHandlers: eventHandlers,
+                moving: moving,
+                ...extra
+            },
+            position: { x: -1, y: -1 },
+            type: type
+        });
+        return module.id;
+    }
+    const parents = {};
+    function addEdge(sourceId, targetId, options) {
+        parents[targetId] = [...(parents[targetId] ?? []), sourceId];
+        // Find the index of the target module in the modules array
+        const mods = options?.subModules ?? modules;
+        // Index of the target module in the modules array
+        let index = mods?.findIndex((m) => m.id === targetId) ?? -1;
+        edges.push({
+            id: options?.customId || `edge:${sourceId}->${targetId}`,
+            source: sourceId,
+            target: targetId,
+            type: options?.type ?? 'edge',
+            data: {
+                insertable: extra.insertable,
+                modules: options?.subModules ?? modules,
+                sourceId,
+                targetId,
+                moving,
+                eventHandlers,
+                disableMoveIds: options?.disableMoveIds,
+                enableTrigger: sourceId === 'Input',
+                // If the index is -1, it means that the target module is not in the modules array, so we set it to the length of the array
+                index: index >= 0 ? index : mods?.length ?? 0,
+                ...extra
+            }
+        });
+    }
+    const inputNode = {
+        id: 'Input',
+        position: { x: -1, y: -1 },
+        type: 'input2',
+        data: {
+            eventHandlers: eventHandlers,
+            modules: modules,
+            ...extra
+        }
+    };
+    const resultNode = {
+        id: 'result',
+        data: {
+            eventHandlers: eventHandlers,
+            modules: modules,
+            success: success,
+            ...extra
+        },
+        position: { x: -1, y: -1 },
+        type: 'result'
+    };
+    nodes.push(inputNode);
+    nodes.push(resultNode);
+    function processModules(modules, beforeNode, nextNode, currentOffset = 0, disableMoveIds = []) {
+        let previousId = undefined;
+        if (modules.length === 0) {
+            addEdge(beforeNode.id, nextNode.id, {
+                subModules: modules,
+                disableMoveIds
+            });
+        }
+        else {
+            modules.forEach((module, index) => {
+                const localDisableMoveIds = [...disableMoveIds, module.id];
+                // Add the edge between the previous node and the current one
+                if (index > 0 && previousId) {
+                    addEdge(previousId, module.id, {
+                        subModules: modules,
+                        disableMoveIds
+                    });
+                }
+                if (module.value.type === 'branchall') {
+                    // Start
+                    addNode(module, currentOffset, 'module', modules);
+                    // "Collect result of each branch" node
+                    const endNode = {
+                        id: `${module.id}-end`,
+                        data: {
+                            offset: currentOffset,
+                            id: module.id,
+                            module: module,
+                            modules: modules,
+                            ...extra
+                        },
+                        position: { x: -1, y: -1 },
+                        type: 'branchAllEnd'
+                    };
+                    nodes.push(endNode);
+                    if (module.value.branches.length === 0) {
+                        // Add a "No branches" node
+                        const startNode = {
+                            id: `${module.id}-branch-0`,
+                            data: {
+                                offset: currentOffset,
+                                id: module.id,
+                                branchIndex: -1,
+                                modules: modules,
+                                eventHandlers: eventHandlers,
+                                ...extra
+                            },
+                            position: { x: -1, y: -1 },
+                            type: 'noBranch'
+                        };
+                        nodes.push(startNode);
+                        addEdge(module.id, startNode.id, {
+                            type: 'empty'
+                        });
+                        addEdge(startNode.id, endNode.id, {
+                            type: 'empty'
+                        });
+                    }
+                    else {
+                        module.value.branches.forEach((branch, branchIndex) => {
+                            // Start node by branch
+                            const startNode = {
+                                id: `${module.id}-branch-${branchIndex}`,
+                                data: {
+                                    offset: currentOffset,
+                                    label: defaultIfEmptyString(branch.summary, `Branch ${branchIndex + 1}`),
+                                    id: module.id,
+                                    branchIndex: branchIndex,
+                                    modules: modules,
+                                    eventHandlers: eventHandlers,
+                                    ...extra
+                                },
+                                position: { x: -1, y: -1 },
+                                type: 'branchAllStart'
+                            };
+                            nodes.push(startNode);
+                            addEdge(module.id, startNode.id, {
+                                type: 'empty'
+                            });
+                            processModules(branch.modules, startNode, endNode, currentOffset, localDisableMoveIds);
+                        });
+                    }
+                    previousId = endNode.id;
+                }
+                else if (module.value.type === 'forloopflow') {
+                    addNode(module, currentOffset, 'module', modules);
+                    const startNode = {
+                        id: `${module.id}-start`,
+                        data: {
+                            offset: currentOffset + 25,
+                            id: module.id,
+                            module: module,
+                            modules: modules,
+                            eventHandlers: eventHandlers,
+                            ...extra
+                        },
+                        position: { x: -1, y: -1 },
+                        type: 'forLoopStart'
+                    };
+                    addEdge(module.id, startNode.id, {
+                        type: 'empty'
+                    });
+                    const endNode = {
+                        id: `${module.id}-end`,
+                        data: {
+                            offset: currentOffset,
+                            id: module.id,
+                            module: module,
+                            modules: modules,
+                            eventHandlers: eventHandlers,
+                            ...extra
+                        },
+                        position: { x: -1, y: -1 },
+                        type: 'forLoopEnd'
+                    };
+                    nodes.push(startNode);
+                    nodes.push(endNode);
+                    processModules(module.value.modules, startNode, endNode, currentOffset + 25, localDisableMoveIds);
+                    previousId = endNode.id;
+                }
+                else if (module.value.type === 'whileloopflow') {
+                    addNode(module, currentOffset, 'module', modules);
+                    const startNode = {
+                        id: `${module.id}-start`,
+                        data: {
+                            offset: currentOffset + 25,
+                            module: module,
+                            modules: modules,
+                            eventHandlers: eventHandlers,
+                            ...extra
+                        },
+                        position: { x: -1, y: -1 },
+                        type: 'whileLoopStart'
+                    };
+                    addEdge(module.id, startNode.id, {
+                        type: 'empty'
+                    });
+                    const endNode = {
+                        id: `${module.id}-end`,
+                        data: { offset: currentOffset, module: module, modules: modules, ...extra },
+                        position: { x: -1, y: -1 },
+                        type: 'whileLoopEnd'
+                    };
+                    nodes.push(startNode);
+                    nodes.push(endNode);
+                    processModules(module.value.modules, startNode, endNode, currentOffset + 25, localDisableMoveIds);
+                    previousId = endNode.id;
+                }
+                else if (module.value.type === 'branchone') {
+                    addNode(module, currentOffset, 'module', modules);
+                    const endNode = {
+                        id: `${module.id}-end`,
+                        data: { offset: currentOffset, eventHandlers: eventHandlers },
+                        position: { x: -1, y: -1 },
+                        type: 'branchOneEnd'
+                    };
+                    nodes.push(endNode);
+                    // Add default branch
+                    const defaultBranch = {
+                        id: `${module.id}-default`,
+                        data: {
+                            offset: currentOffset,
+                            label: 'Default',
+                            id: module.id,
+                            branchIndex: -1,
+                            modules: module.value.default,
+                            eventHandlers: eventHandlers,
+                            ...extra
+                        },
+                        position: { x: -1, y: -1 },
+                        type: 'noBranch'
+                    };
+                    nodes.push(defaultBranch);
+                    addEdge(module.id, defaultBranch.id, { type: 'empty' });
+                    processModules(module.value.default, defaultBranch, endNode, currentOffset, localDisableMoveIds);
+                    module.value.branches.forEach((branch, branchIndex) => {
+                        // Start node by branch
+                        const startNode = {
+                            id: `${module.id}-branch-${branchIndex}`,
+                            data: {
+                                offset: currentOffset,
+                                label: defaultIfEmptyString(branch.summary, 'Branch ' + (branchIndex + 1)) +
+                                    '\n`' +
+                                    branch.expr +
+                                    '`',
+                                id: module.id,
+                                branchIndex: branchIndex,
+                                modules: modules,
+                                eventHandlers: eventHandlers,
+                                ...extra
+                            },
+                            position: { x: -1, y: -1 },
+                            type: 'branchOneStart'
+                        };
+                        nodes.push(startNode);
+                        addEdge(module.id, startNode.id, { type: 'empty' });
+                        processModules(branch.modules, startNode, endNode, currentOffset, localDisableMoveIds);
+                    });
+                    previousId = endNode.id;
+                }
+                else {
+                    addNode(module, currentOffset, 'module', modules);
+                    previousId = module.id;
+                }
+                if (index === 0) {
+                    addEdge(beforeNode.id, module.id, {
+                        subModules: modules,
+                        disableMoveIds
+                    });
+                }
+                if (index === modules.length - 1 && previousId) {
+                    addEdge(previousId, nextNode.id, {
+                        subModules: modules,
+                        disableMoveIds
+                    });
+                }
+            });
+        }
+    }
+    processModules(modules, inputNode, resultNode);
+    if (failureModule) {
+        addNode(failureModule, 0, 'module');
+    }
+    Object.keys(parents).forEach((key) => {
+        const node = nodes.find((n) => n.id === key);
+        if (node) {
+            node.data.parentIds = parents[key];
+        }
+    });
+    if (useDataflow && selectedId) {
+        let deps = getDependeeAndDependentComponents(selectedId, modules ?? [], failureModule);
+        if (deps) {
+            Object.entries(deps.dependees).forEach((x, i) => {
+                const inputs = x[1];
+                inputs?.forEach((input, index) => {
+                    let pid = x[0];
+                    if (input?.startsWith('flow_input.iter')) {
+                        const parent = dfsByModule(selectedId, modules ?? [])?.pop();
+                        if (parent?.id) {
+                            pid = parent.id;
+                        }
+                    }
+                    addEdge(pid, selectedId, {
+                        customId: `dep-${pid}-${selectedId}-${input}-${index}`,
+                        type: 'dataflowedge'
+                    });
+                });
+            });
+            Object.entries(deps.dependents).forEach((x, i) => {
+                let pid = x[0];
+                addEdge(selectedId, pid, {
+                    customId: `dep-${selectedId}-${pid}-${i}`,
+                    type: 'dataflowedge'
+                });
+            });
+        }
+    }
+    return { nodes, edges };
+}

package/package/components/graph/index.d.ts

@@ -1,3 +1,2 @@
-export { default as FlowGraph } from './FlowGraph.svelte';
 export * from './model';
 export * from './util';

package/package/components/graph/index.js

@@ -1,3 +1,2 @@
-export { default as FlowGraph } from './FlowGraph.svelte';
 export * from './model';
 export * from './util';

package/package/components/graph/model.d.ts

@@ -1,16 +1,8 @@
 /// <reference types="svelte" />
 import type { FlowStatusModule, Job } from '../../gen';
 import type { Writable } from 'svelte/store';
-import type { UserNodeType } from './svelvet/types';
 import type { FlowState } from '../flows/flowState';
 export type ModuleHost = 'workspace' | 'inline' | 'hub';
-export type Node = UserNodeType & {
-    parentIds: string[];
-    edgeLabel?: string;
-    host?: ModuleHost;
-    type: 'node';
-    loopDepth: number;
-};
 export type Loop = {
     type: 'loop';
     items: NestedNodes;
@@ -42,6 +34,9 @@ export type FlowStatusViewerContext = {
         nb: number;
         job: Job;
     }>>;
+    hideDownloadInGraph?: boolean;
+    hideTimeline?: boolean;
+    hideNodeDefinition?: boolean;
 };
 export type GraphModuleState = {
     type: FlowStatusModule['type'];
@@ -50,6 +45,7 @@ export type GraphModuleState = {
     flow_jobs_results?: any;
     branchChosen?: number;
     result?: any;
+    tag?: string;
     scheduled_for?: Date;
     job_id?: string;
     parent_module?: string;

package/package/components/graph/renderers/edges/BaseEdge.svelte

@@ -0,0 +1,109 @@
+<script>import InsertModuleButton from '../../../flows/map/InsertModuleButton.svelte';
+import { getBezierPath, BaseEdge, EdgeLabelRenderer } from '@xyflow/svelte';
+import { ClipboardCopy } from 'lucide-svelte';
+import { getContext } from 'svelte';
+import { getStraightLinePath } from '../utils';
+import InsertTriggerButton from '../../../flows/map/InsertTriggerButton.svelte';
+import { twMerge } from 'tailwind-merge';
+export let sourceX;
+export let sourceY;
+export let sourcePosition;
+export let targetX;
+export let targetY;
+export let targetPosition;
+export let markerEnd = undefined;
+export let data;
+$: [edgePath] = getBezierPath({
+    sourceX,
+    sourceY: targetY - sourceY > 100 ? targetY - 100 : sourceY,
+    sourcePosition,
+    targetX,
+    targetY,
+    targetPosition,
+    curvature: 0.25
+});
+$: completeEdge =
+    targetY - sourceY > 100
+        ? `${edgePath} ${getStraightLinePath({ sourceX, sourceY, targetY })}`
+        : edgePath;
+const { useDataflow } = getContext('FlowGraphContext');
+let menuOpen = false;
+</script>
+
+<EdgeLabelRenderer>
+	{#if data?.insertable && !$useDataflow && !data?.moving}
+		<div
+			class={twMerge('edgeButtonContainer nodrag nopan top-0', menuOpen ? 'z-50' : '')}
+			style:transform="translate(-50%, 50%) translate({sourceX}px,{sourceY}px)"
+		>
+			<InsertModuleButton
+				disableAi={data.disableAi}
+				index={data.index ?? 0}
+				trigger={data.enableTrigger}
+				modules={data?.modules ?? []}
+				on:new={(e) => {
+					data?.eventHandlers.insert({ modules: data.modules, index: data.index, detail: e.detail })
+				}}
+				bind:open={menuOpen}
+			/>
+		</div>
+		{#if data.enableTrigger}
+			<div
+				class="edgeButtonContainer nodrag nopan"
+				style:transform="translate(100%, 50%) translate({sourceX}px,{sourceY}px)"
+			>
+				<InsertTriggerButton
+					disableAi={data.disableAi}
+					on:new={(e) => {
+						data?.eventHandlers.insert({
+							modules: data.modules,
+							index: data.index,
+							detail: e.detail
+						})
+					}}
+					index={data?.index ?? 0}
+					modules={data?.modules ?? []}
+				/>
+			</div>
+		{/if}
+	{/if}
+
+	{#if data?.moving}
+		<div
+			class="edgeButtonContainer nodrag nopan"
+			style:transform="translate(-50%, 50%) translate({sourceX}px,{sourceY}px)"
+		>
+			{#if data.moving && !data.disableMoveIds?.includes(data.moving)}
+				<button
+					title="Paste module"
+					on:click={() => {
+						data.eventHandlers.insert({
+							modules: data.modules,
+							index: data.index
+						})
+					}}
+					type="button"
+					class={twMerge(
+						'w-6 h-6 flex items-center justify-center',
+						'border border-gray-300 dark:border-gray-500',
+						'text-primary text-sm',
+						'bg-surface focus:outline-none hover:bg-surface-hover focus:ring-4 focus:ring-surface-selected rounded-full '
+					)}
+				>
+					<ClipboardCopy size={14} />
+				</button>
+			{/if}
+		</div>
+	{/if}
+</EdgeLabelRenderer>
+
+<BaseEdge path={completeEdge} {markerEnd} class={$useDataflow ? 'hidden' : ''} />
+
+<style>
+	.edgeButtonContainer {
+		position: absolute;
+		font-size: 12pt;
+		/* everything inside EdgeLabelRenderer has no pointer events by default */
+		/* if you have an interactive element, set pointer-events: all */
+		pointer-events: all;
+	}</style>

package/package/components/graph/renderers/edges/BaseEdge.svelte.d.ts

@@ -0,0 +1,35 @@
+import { SvelteComponent } from "svelte";
+import type { FlowModule } from '../../../../gen';
+import { type Position } from '@xyflow/svelte';
+import type { GraphEventHandlers } from '../../graphBuilder';
+declare const __propDef: {
+    props: {
+        sourceX: number;
+        sourceY: number;
+        sourcePosition: Position;
+        targetX: number;
+        targetY: number;
+        targetPosition: Position;
+        markerEnd?: string | undefined;
+        data: {
+            insertable: boolean;
+            modules: FlowModule[];
+            moving: string | undefined;
+            eventHandlers: GraphEventHandlers;
+            index: number;
+            enableTrigger: boolean;
+            disableAi: boolean;
+            disableMoveIds: string[];
+        };
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type BaseEdgeProps = typeof __propDef.props;
+export type BaseEdgeEvents = typeof __propDef.events;
+export type BaseEdgeSlots = typeof __propDef.slots;
+export default class BaseEdge extends SvelteComponent<BaseEdgeProps, BaseEdgeEvents, BaseEdgeSlots> {
+}
+export {};

package/package/components/graph/renderers/edges/DataflowEdge.svelte

@@ -0,0 +1,37 @@
+<script>import { getBezierPath, BaseEdge, EdgeLabelRenderer } from '@xyflow/svelte';
+import { getStraightLinePath } from '../utils';
+export let sourceX;
+export let sourceY;
+export let sourcePosition;
+export let targetX;
+export let targetY;
+export let targetPosition;
+export let markerEnd = undefined;
+export let data;
+$: [edgePath, labelX, labelY] = getBezierPath({
+    sourceX,
+    sourceY: targetY - sourceY > 100 ? targetY - 100 : sourceY,
+    sourcePosition,
+    targetX,
+    targetY,
+    targetPosition,
+    curvature: 0.25
+});
+</script>
+
+<EdgeLabelRenderer>
+	<div
+		class="absolute cursor-pointer nodrag nopan bg-surface-selected p-1 border text-xs"
+		style:transform="translate(-50%, -50%) translate({labelX}px,{labelY}px)"
+	>
+		{data.sourceId} -> {data.targetId}
+	</div>
+</EdgeLabelRenderer>
+
+<BaseEdge
+	path={targetY - sourceY > 100
+		? `${edgePath} ${getStraightLinePath({ sourceX, sourceY, targetY })}`
+		: edgePath}
+	{markerEnd}
+	style={`animation:dashdraw 0.5s linear infinite; stroke-dasharray: 5px;`}
+/>

package/package/components/graph/renderers/edges/DataflowEdge.svelte.d.ts

@@ -0,0 +1,29 @@
+import { SvelteComponent } from "svelte";
+import type { FlowModule } from '../../../../gen';
+import { type Position } from '@xyflow/svelte';
+declare const __propDef: {
+    props: {
+        sourceX: number;
+        sourceY: number;
+        sourcePosition: Position;
+        targetX: number;
+        targetY: number;
+        targetPosition: Position;
+        markerEnd?: string | undefined;
+        data: {
+            modules: FlowModule[];
+            sourceId: string;
+            targetId: string;
+        };
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type DataflowEdgeProps = typeof __propDef.props;
+export type DataflowEdgeEvents = typeof __propDef.events;
+export type DataflowEdgeSlots = typeof __propDef.slots;
+export default class DataflowEdge extends SvelteComponent<DataflowEdgeProps, DataflowEdgeEvents, DataflowEdgeSlots> {
+}
+export {};

package/package/components/graph/renderers/edges/EmptyEdge.svelte

@@ -0,0 +1,22 @@
+<script>import { getBezierPath, BaseEdge } from '@xyflow/svelte';
+import { getContext } from 'svelte';
+export let sourceX;
+export let sourceY;
+export let sourcePosition;
+export let targetX;
+export let targetY;
+export let targetPosition;
+export let markerEnd = undefined;
+const { useDataflow } = getContext('FlowGraphContext');
+$: [edgePath] = getBezierPath({
+    sourceX,
+    sourceY,
+    sourcePosition,
+    targetX,
+    targetY,
+    targetPosition,
+    curvature: 0.25
+});
+</script>
+
+<BaseEdge path={edgePath} {markerEnd} class={$useDataflow ? 'hidden' : ''} />

package/package/components/graph/renderers/edges/EmptyEdge.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponent } from "svelte";
+import { type Position } from '@xyflow/svelte';
+declare const __propDef: {
+    props: {
+        sourceX: number;
+        sourceY: number;
+        sourcePosition: Position;
+        targetX: number;
+        targetY: number;
+        targetPosition: Position;
+        markerEnd?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type EmptyEdgeProps = typeof __propDef.props;
+export type EmptyEdgeEvents = typeof __propDef.events;
+export type EmptyEdgeSlots = typeof __propDef.slots;
+export default class EmptyEdge extends SvelteComponent<EmptyEdgeProps, EmptyEdgeEvents, EmptyEdgeSlots> {
+}
+export {};

package/package/components/graph/renderers/nodes/BranchAllStart.svelte

@@ -0,0 +1,44 @@
+<script>import VirtualItem from '../../../flows/map/VirtualItem.svelte';
+import NodeWrapper from './NodeWrapper.svelte';
+import { X } from 'lucide-svelte';
+import { getStateColor } from '../../util';
+import { computeBorderStatus } from '../utils';
+export let data;
+$: borderStatus = computeBorderStatus(data.branchIndex, 'branchall', data.flowModuleStates?.[data.id]);
+</script>
+
+<NodeWrapper let:darkMode offset={data.offset}>
+	<VirtualItem
+		label={data.label}
+		selectable
+		selected={data.selected}
+		bgColor={getStateColor(undefined, darkMode)}
+		borderColor={borderStatus
+			? getStateColor(borderStatus, darkMode) + (!darkMode ? '; border-width: 3px' : '')
+			: undefined}
+		on:select={() => {
+			data.eventHandlers.select(data.id)
+		}}
+		on:insert={(e) => {
+			data.eventHandlers.insert(e.detail)
+		}}
+	/>
+	{#if data.insertable}
+		<button
+			class="z-50 absolute -top-[10px] -right-[10px] rounded-full h-[20px] w-[20px] center-center text-primary
+border-[1.5px] border-gray-700 bg-surface duration-150 hover:bg-red-400 hover:text-white
+hover:border-red-700"
+			on:click|preventDefault|stopPropagation={() => {
+				data.eventHandlers.deleteBranch(
+					{
+						module: data.modules.find((m) => m.id === data.id),
+						index: data.branchIndex
+					},
+					data.label
+				)
+			}}
+		>
+			<X size={12} />
+		</button>
+	{/if}
+</NodeWrapper>