windmill-components 1.379.4 → 1.382.3

package/package/components/apps/editor/settingsPanel/decisionTree/DecisionTreePreview.svelte

@@ -1,110 +1,21 @@
-<script>import Svelvet from '../../../../graph/svelvet/container/views/Svelvet.svelte';
-import { NODE } from '../../../../graph';
-import { createEventDispatcher, getContext, onMount } from 'svelte';
+<script>import { NODE } from '../../../../graph';
 import { sugiyama, dagStratify, decrossOpt, coordCenter } from 'd3-dag';
-import { deepEqual } from 'fast-equals';
+import { SvelteFlow, ConnectionLineType, Controls } from '@xyflow/svelte';
+import { addNewBranch, addNode, getFirstNode, getParents, insertNode, removeBranch, removeNode } from './utils';
 import DecisionTreeGraphNode from '../DecisionTreeGraphNode.svelte';
 import DecisionTreeGraphHeader from '../DecisionTreeGraphHeader.svelte';
-import { addNewBranch, addNode, getFirstNode, getParents, insertNode, removeBranch, removeNode } from './utils';
-import { createEdge, createNode } from './nodeHelpers';
+import { writable } from 'svelte/store';
+import { createEventDispatcher, getContext } from 'svelte';
 import { deleteGridItem } from '../../appUtils';
-import DarkModeObserver from '../../../../DarkModeObserver.svelte';
 export let nodes;
-export let rebuildOnChange = undefined;
 export let paneWidth = 0;
 export let paneHeight = 0;
 export let component;
-let displayedNodes = [];
-let edges = [];
-let scroll = false;
-let darkMode = false;
+const nodesStore = writable([]);
+const edgesStore = writable([]);
 const dispatch = createEventDispatcher();
 const { selectedNodeId } = getContext('DecisionTreeEditor');
-$: rebuildOnChange && triggerRebuild();
-let oldRebuildOnChange = rebuildOnChange ? JSON.parse(JSON.stringify(rebuildOnChange)) : undefined;
-function triggerRebuild() {
-    if (!deepEqual(oldRebuildOnChange, rebuildOnChange)) {
-        oldRebuildOnChange = JSON.parse(JSON.stringify(rebuildOnChange));
-        createGraph();
-    }
-}
-function buildStartNode() {
-    const firstNode = getFirstNode(nodes);
-    if (!firstNode) {
-        return;
-    }
-    const startNodeConfig = {
-        id: 'start',
-        data: {
-            custom: {
-                component: DecisionTreeGraphHeader,
-                props: {
-                    node: {
-                        id: 'start',
-                        label: 'Start',
-                        next: {
-                            id: firstNode.id,
-                            condition: {
-                                type: 'evalv2',
-                                expr: 'true',
-                                fieldType: 'boolean'
-                            }
-                        }
-                    },
-                    canDelete: false,
-                    label: 'Start'
-                },
-                cb: (e, detail) => nodeCallbackHandler(e, detail, undefined, [], false)
-            }
-        }
-    };
-    const startNode = createNode(startNodeConfig);
-    displayedNodes.push(startNode);
-    edges.push(createEdge({
-        id: `start-${firstNode?.id}`,
-        source: 'start',
-        target: firstNode?.id
-    }));
-}
 const { app, runnableComponents, componentControl, debuggingComponents } = getContext('AppViewerContext');
-function buildEndNode() {
-    const lastNodesIds = nodes
-        .filter((node) => {
-        return node.next.length == 0;
-    })
-        .map((node) => node.id);
-    displayedNodes.push(createNode({
-        id: 'end',
-        data: {
-            custom: {
-                component: DecisionTreeGraphHeader,
-                props: {
-                    node: {
-                        id: 'end',
-                        label: 'End',
-                        next: []
-                    },
-                    canDelete: false,
-                    isTail: true,
-                    label: 'End'
-                },
-                cb: (e, detail) => {
-                    if (e == 'select') {
-                        $selectedNodeId = detail;
-                    }
-                }
-            }
-        },
-        parentIds: lastNodesIds
-    }));
-    lastNodesIds.forEach((lastNodeId) => {
-        edges.push(createEdge({
-            id: `${lastNodeId}-end`,
-            source: lastNodeId,
-            target: 'end'
-        }));
-    });
-}
 function addSubGrid() {
     const numberOfPanes = nodes.length;
     if (!$app.subgrids) {
@@ -193,119 +104,179 @@ function nodeCallbackHandler(event, detail, graphNode, parentIds, branchInsert =
     }
     dispatch('render');
 }
-function buildGraphNodes() {
-    nodes?.forEach((graphNode, index) => {
-        const parentIds = getParents(nodes, graphNode.id);
-        const parentNext = nodes.find((node) => node.id == parentIds[0])?.next;
-        const hasParentBranches = parentNext ? parentNext.length > 1 : false;
-        if (hasParentBranches) {
-            const positionRelativeToParent = parentNext?.findIndex((next) => next.id == graphNode.id);
-            const branchHeaderId = `${parentIds[0]}-${graphNode.id}-branch-header`;
-            // We create a header node for the branch, which will be the parent of the actual node
-            displayedNodes.push(createNode({
-                id: branchHeaderId,
-                data: {
-                    custom: {
-                        component: DecisionTreeGraphHeader,
-                        props: {
-                            node: graphNode,
-                            canDelete: true,
+function graphBuilder(decisionTreeNodes) {
+    const nodes = [];
+    const edges = [];
+    function addNode(node, type = 'step', data, x = nodeCallbackHandler) {
+        nodes.push({
+            id: node.id,
+            type,
+            position: { x: -1, y: -1 },
+            data: {
+                node,
+                nodeCallbackHandler: x,
+                ...data
+            }
+        });
+    }
+    const parents = {};
+    function addEdge(source, target) {
+        parents[target] = [...(parents[target] ?? []), source];
+        edges.push({
+            id: `${source}-${target}`,
+            source,
+            target,
+            type: 'edge'
+        });
+    }
+    function processNodes(decisionTreeNodes) {
+        decisionTreeNodes.forEach((graphNode, index) => {
+            const parentIds = getParents(decisionTreeNodes, graphNode.id);
+            const parentNext = decisionTreeNodes.find((node) => node.id == parentIds[0])?.next;
+            const hasParentBranches = parentNext ? parentNext.length > 1 : false;
+            if (hasParentBranches) {
+                const positionRelativeToParent = parentNext?.findIndex((next) => next.id == graphNode.id);
+                const branchHeaderId = `${parentIds[0]}-${graphNode.id}-branch-header`;
+                // We create a header node for the branch, which will be the parent of the actual node
+                const header = {
+                    id: branchHeaderId,
+                    type: 'start',
+                    position: { x: -1, y: -1 },
+                    data: {
+                        node: {
                             label: positionRelativeToParent === 0
                                 ? 'Default branch'
-                                : `Branch ${positionRelativeToParent}`
+                                : `Branch ${positionRelativeToParent}`,
+                            id: branchHeaderId,
+                            allowed: undefined,
+                            next: [],
+                            parentIds: [parentIds[0]]
                         },
-                        cb: (e, detail) => {
-                            nodeCallbackHandler(e, detail, graphNode, parentIds, true);
-                        }
-                    }
-                },
-                parentIds: [parentIds[0]]
-            }));
-            const cannotAddBranch = graphNode.next.length === 0 ||
-                (graphNode.next.length === 1 && getParents(nodes, graphNode.next[0].id).length > 1);
-            // We create the actual node
-            displayedNodes.push(createNode({
-                id: graphNode.id,
-                data: {
-                    custom: {
-                        component: DecisionTreeGraphNode,
-                        props: {
-                            node: graphNode,
-                            canDelete: !(graphNode.next.length > 1 && parentIds.length > 1),
-                            canAddBranch: !cannotAddBranch,
-                            index,
-                            darkMode
+                        canDelete: true,
+                        nodeCallbackHandler: (e, d) => {
+                            nodeCallbackHandler(e, d, graphNode, parentIds, true);
                         },
-                        cb: (e, detail) => nodeCallbackHandler(e, detail, graphNode, parentIds, false)
+                        branchHeader: true
                     }
-                },
-                parentIds: [
-                    branchHeaderId,
-                    ...parentIds.filter((pId) => {
-                        const firstLetter = branchHeaderId.split('-')[0];
-                        return pId !== firstLetter;
-                    })
-                ]
-            }));
-            // Edge between branch header and node
-            edges.push(createEdge({
-                id: `${graphNode.id}-${branchHeaderId}`,
-                source: branchHeaderId,
-                target: graphNode.id
-            }));
-            if (graphNode.next.length === 1) {
-                edges.push(createEdge({
-                    id: `${branchHeaderId}-${graphNode.next[0].id}`,
-                    source: graphNode.id,
-                    target: graphNode.next[0].id
-                }));
+                };
+                nodes.push(header);
+                const cannotAddBranch = graphNode.next.length === 0 ||
+                    (graphNode.next.length === 1 &&
+                        getParents(decisionTreeNodes, graphNode.next[0].id).length > 1);
+                // We create the actual node
+                addNode(graphNode, 'step', {
+                    canDelete: !(graphNode.next.length > 1 && parentIds.length > 1),
+                    canAddBranch: !cannotAddBranch,
+                    index,
+                    parentIds: [
+                        branchHeaderId,
+                        ...parentIds.filter((pId) => {
+                            const firstLetter = branchHeaderId.split('-')[0];
+                            return pId !== firstLetter;
+                        })
+                    ]
+                }, (e, d) => {
+                    nodeCallbackHandler(e, d, graphNode, parentIds, false);
+                    return undefined;
+                });
+                addEdge(branchHeaderId, graphNode.id);
+                if (graphNode.next.length === 1) {
+                    addEdge(graphNode.id, graphNode.next[0].id);
+                }
+                else {
+                    graphNode.next.forEach((nextNode) => {
+                        addEdge(graphNode.id, `${graphNode.id}-${nextNode.id}-branch-header`);
+                    });
+                }
             }
             else {
+                const cannotAddBranch = graphNode.next.length === 0 ||
+                    (graphNode.next.length === 1 &&
+                        getParents(decisionTreeNodes, graphNode.next[0].id).length > 1);
+                addNode(graphNode, 'step', {
+                    canDelete: !cannotAddBranch && (graphNode.next.length == 1 || !parentIds.includes('start')),
+                    canAddBranch: !cannotAddBranch,
+                    index,
+                    parentIds: parentIds
+                }, (e, d) => {
+                    nodeCallbackHandler(e, d, graphNode, parentIds, false);
+                    return undefined;
+                });
+                // if node has multiple next, it means it needs to be connected to a branch header
+                const hasMultipleNext = graphNode.next.length > 1;
                 graphNode.next.forEach((nextNode) => {
-                    edges.push(createEdge({
-                        id: `${graphNode.id}-${nextNode.id}-branch-header-${nextNode.id}`,
-                        source: graphNode.id,
-                        target: `${graphNode.id}-${nextNode.id}-branch-header`
-                    }));
+                    const target = hasMultipleNext
+                        ? `${graphNode.id}-${nextNode.id}-branch-header`
+                        : nextNode.id;
+                    addEdge(graphNode.id, target);
                 });
             }
-        }
-        else {
-            const cannotAddBranch = graphNode.next.length === 0 ||
-                (graphNode.next.length === 1 && getParents(nodes, graphNode.next[0].id).length > 1);
-            displayedNodes.push(createNode({
-                id: graphNode.id,
-                data: {
-                    custom: {
-                        component: DecisionTreeGraphNode,
-                        props: {
-                            node: graphNode,
-                            canDelete: !cannotAddBranch &&
-                                (graphNode.next.length == 1 || !parentIds.includes('start')),
-                            canAddBranch: !cannotAddBranch,
-                            index,
-                            darkMode
-                        },
-                        cb: (e, detail) => nodeCallbackHandler(e, detail, graphNode, parentIds, false)
-                    }
+        });
+    }
+    const firstNode = getFirstNode(decisionTreeNodes);
+    if (firstNode) {
+        const startNode = {
+            id: 'start',
+            type: 'start',
+            position: { x: -1, y: -1 },
+            data: {
+                node: {
+                    id: 'start',
+                    label: 'Start',
+                    allowed: undefined,
+                    next: [
+                        {
+                            id: firstNode.id,
+                            condition: {
+                                type: 'evalv2',
+                                expr: 'true',
+                                fieldType: 'boolean'
+                            }
+                        }
+                    ]
                 },
-                parentIds: parentIds
-            }));
-            // if node has multiple next, it means it needs to be connected to a branch header
-            const hasMultipleNext = graphNode.next.length > 1;
-            graphNode.next.forEach((nextNode) => {
-                const target = hasMultipleNext
-                    ? `${graphNode.id}-${nextNode.id}-branch-header`
-                    : nextNode.id;
-                edges.push(createEdge({
-                    id: `${graphNode.id}-${nextNode.id}`,
-                    source: graphNode.id,
-                    target
-                }));
-            });
+                canDelete: false,
+                nodeCallbackHandler
+            }
+        };
+        nodes.push(startNode);
+        addEdge('start', firstNode.id);
+    }
+    processNodes(decisionTreeNodes);
+    const endNode = {
+        id: 'end',
+        type: 'end',
+        position: { x: -1, y: -1 },
+        data: {
+            node: {
+                id: 'end',
+                label: 'End',
+                allowed: undefined,
+                next: []
+            },
+            canDelete: false,
+            nodeCallbackHandler
+        }
+    };
+    const lastNodesIds = decisionTreeNodes
+        .filter((node) => {
+        return node.next.length == 0;
+    })
+        .map((node) => node.id);
+    lastNodesIds.forEach((id) => {
+        addEdge(id, endNode.id);
+    });
+    nodes.push(endNode);
+    Object.keys(parents).forEach((key) => {
+        const node = nodes.find((n) => n.id === key);
+        if (node) {
+            node.data.parentIds = parents[key];
         }
     });
+    $nodesStore = layoutNodes(nodes);
+    $edgesStore = edges;
 }
+$: graphBuilder(nodes);
 function layoutNodes(nodes) {
     let seenId = [];
     for (const n of nodes) {
@@ -314,8 +285,12 @@ 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(nodes);
+    const dag = stratify(flattenParentIds);
     let boxSize;
     try {
         const layout = sugiyama()
@@ -330,67 +305,51 @@ function layoutNodes(nodes) {
             .nodeSize(() => [NODE.width + NODE.gap.horizontal, NODE.height + NODE.gap.vertical]);
         boxSize = layout(dag);
     }
-    return {
-        nodes: dag.descendants().map((des) => {
-            return {
-                ...des.data,
-                id: des.data.id,
-                position: {
-                    x: des.x ? des.x + paneWidth / 2 - boxSize.width / 2 - NODE.width / 2 : 0,
-                    y: des.y || 0
-                }
-            };
-        }),
-        height: boxSize.height + NODE.height,
-        width: boxSize.width + NODE.width
-    };
-}
-function resetGraphData() {
-    displayedNodes = [];
-    edges = [];
-}
-function createGraph() {
-    try {
-        resetGraphData();
-        buildStartNode();
-        buildGraphNodes();
-        buildEndNode();
-        applyLayoutToNodes();
-    }
-    catch (e) {
-        console.error(e);
-    }
-}
-function applyLayoutToNodes() {
-    const layered = layoutNodes(displayedNodes);
-    displayedNodes = layered.nodes;
+    const newNodes = dag.descendants().map((des) => ({
+        ...des.data,
+        id: des.data.id,
+        position: {
+            x: des.x ? des.x - boxSize.width / 2 - NODE.width / 2 : 0,
+            y: des.y || 0
+        }
+    }));
+    return newNodes;
 }
-let mounted = false;
-onMount(() => {
-    setTimeout(() => {
-        createGraph();
-    }, 10);
-    mounted = true;
+const viewport = writable({
+    x: 0,
+    y: 5,
+    zoom: 1
 });
-$: if (nodes.length > 0 && !$selectedNodeId) {
-    $selectedNodeId = getFirstNode(nodes)?.id;
+function centerViewport(width) {
+    viewport.update((vp) => ({
+        ...vp,
+        x: width / 2,
+        y: vp.y
+    }));
 }
+$: paneWidth && centerViewport(paneWidth);
+const nodeTypes = {
+    step: DecisionTreeGraphNode,
+    start: DecisionTreeGraphHeader,
+    end: DecisionTreeGraphHeader
+};
 </script>
 
-<DarkModeObserver bind:darkMode />
+<SvelteFlow
+	nodes={nodesStore}
+	edges={edgesStore}
+	{nodeTypes}
+	{viewport}
+	height={paneHeight}
+	minZoom={0.5}
+	connectionLineType={ConnectionLineType.SmoothStep}
+	defaultEdgeOptions={{ type: 'smoothstep' }}
+	zoomOnDoubleClick={false}
+	elementsSelectable={false}
+	proOptions={{ hideAttribution: true }}
+	nodesDraggable={false}
+>
+	<div class="absolute inset-0 !bg-surface-secondary" />
 
-{#if mounted}
-	<Svelvet
-		download={false}
-		highlightEdges={false}
-		locked
-		dataflow={false}
-		nodes={displayedNodes}
-		{edges}
-		height={paneHeight}
-		{scroll}
-		nodeSelected={false}
-		background={false}
-		width={paneWidth}
-	/>
-{/if}
+	<Controls position="top-right" orientation="horizontal" showLock={false} />
+</SvelteFlow>

package/package/components/apps/editor/settingsPanel/decisionTree/DecisionTreePreview.svelte.d.ts

@@ -3,7 +3,6 @@ import type { AppComponent, DecisionTreeNode } from '../../component';
 declare const __propDef: {
     props: {
         nodes: DecisionTreeNode[];
-        rebuildOnChange?: any;
         paneWidth?: number | undefined;
         paneHeight?: number | undefined;
         component: AppComponent;

package/package/components/apps/editor/settingsPanel/decisionTree/nodeHelpers.d.ts

@@ -1,4 +1,4 @@
-import { type Node } from '../../../../graph';
+import { type Node } from '@xyflow/svelte';
 interface NodeConfig {
     id: string;
     type?: string;

package/package/components/apps/editor/settingsPanel/decisionTree/nodeHelpers.js

@@ -1,4 +1,5 @@
 import { NODE } from '../../../../graph';
+import {} from '@xyflow/svelte';
 export function createNode(nodeConfig) {
     return {
         type: 'node',
@@ -6,12 +7,7 @@ export function createNode(nodeConfig) {
         position: nodeConfig.position || { x: -1, y: -1 },
         data: nodeConfig.data,
         width: nodeConfig.width || NODE.width,
-        height: nodeConfig.height || NODE.height,
-        borderColor: nodeConfig.borderColor || '#999',
-        sourcePosition: 'bottom',
-        targetPosition: 'top',
-        parentIds: nodeConfig.parentIds || [],
-        loopDepth: nodeConfig.loopDepth || 0
+        height: nodeConfig.height || NODE.height
     };
 }
 export function createEdge(edgeConfig) {

package/package/components/custom_ui.d.ts

@@ -1,5 +1,5 @@
 import type { SupportedLanguage } from '../common';
-export type WhitelabelCustomUi = {
+export type FlowBuilderWhitelabelCustomUi = {
     topBar?: {
         path?: boolean;
         export?: boolean;
@@ -7,8 +7,18 @@ export type WhitelabelCustomUi = {
         aiBuilder?: boolean;
         tutorials?: boolean;
         diff?: boolean;
+        extraDeployOptions?: boolean;
     };
     settingsPanel?: boolean;
+    settingsTabs?: {
+        schedule?: boolean;
+        sharedDiretory?: boolean;
+        earlyStop?: boolean;
+        earlyReturn?: boolean;
+        workerGroup?: boolean;
+        concurrency?: boolean;
+        cache?: boolean;
+    };
     triggers?: boolean;
     flowNode?: boolean;
     hub?: boolean;
@@ -22,4 +32,28 @@ export type WhitelabelCustomUi = {
     stepAdvancedSettings?: boolean;
     languages?: (SupportedLanguage | 'docker' | 'bunnative')[];
     scriptFork?: boolean;
+    editorBar?: EditorBarUi;
+};
+export type EditorBarUi = {
+    contextVar?: boolean;
+    variable?: boolean;
+    type?: boolean;
+    assistants?: boolean;
+    multiplayer?: boolean;
+    autoformatting?: boolean;
+    aiGen?: boolean;
+    aiFix?: boolean;
+    library?: boolean;
+    useVsCode?: boolean;
+};
+export type ScriptEditorWhitelabelCustomUi = {
+    editorBar?: EditorBarUi;
+};
+export type ScriptBuilderWhitelabelCustomUi = {
+    topBar?: {
+        path?: boolean;
+        settings?: boolean;
+        extraDeployOptions?: boolean;
+    };
+    editorBar?: EditorBarUi;
 };

package/package/components/details/DetailPageDetailPanel.svelte

@@ -1,6 +1,6 @@
 <script>import { Tabs, Tab, TabContent, Button } from '../common';
 import { copyToClipboard } from '../../utils';
-import { CalendarCheck2, Clipboard, Terminal, Webhook } from 'lucide-svelte';
+import { CalendarCheck2, Clipboard, MailIcon, Terminal, Webhook } from 'lucide-svelte';
 import { Highlight } from 'svelte-highlight';
 import { yaml } from 'svelte-highlight/languages';
 import json from 'svelte-highlight/languages/json';
@@ -59,6 +59,12 @@ $: !hasStepDetails && selected === 'flow_step' && (selected = 'saved_inputs');
 											Schedules
 										</span>
 									</Tab>
+									<Tab value="email">
+										<span class="flex flex-row gap-2 items-center">
+											<MailIcon size={14} />
+											Email
+										</span>
+									</Tab>
 									<Tab value="cli">
 										<span class="flex flex-row gap-2 items-center">
 											<Terminal size={14} />
@@ -71,6 +77,8 @@ $: !hasStepDetails && selected === 'flow_step' && (selected = 'saved_inputs');
 									<div class="h-full overflow-auto">
 										{#if triggerSelected === 'webhooks'}
 											<slot name="webhooks" />
+										{:else if triggerSelected === 'email'}
+											<slot name="email" />
 										{:else if triggerSelected === 'schedule'}
 											<slot name="schedule" />
 										{:else if triggerSelected === 'cli'}

package/package/components/details/DetailPageDetailPanel.svelte.d.ts

@@ -1,7 +1,7 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        triggerSelected?: "schedule" | "webhooks" | "cli" | undefined;
+        triggerSelected?: "email" | "schedule" | "webhooks" | "cli" | undefined;
         flow_json?: any | undefined;
         hasStepDetails?: boolean | undefined;
         isOperator?: boolean | undefined;
@@ -14,6 +14,7 @@ declare const __propDef: {
         save_inputs: {};
         details: {};
         webhooks: {};
+        email: {};
         schedule: {};
         cli: {};
         flow_step: {};

package/package/components/details/DetailPageLayout.svelte

@@ -29,6 +29,7 @@ let clientWidth = window.innerWidth;
 							{hasStepDetails}
 						>
 							<slot slot="webhooks" name="webhooks" />
+							<slot slot="email" name="email" />
 							<slot slot="schedule" name="schedule" />
 							<slot slot="cli" name="cli" />
 							<slot slot="details" name="details" />
@@ -53,6 +54,7 @@ let clientWidth = window.innerWidth;
 					<TabContent value="detail" class="flex flex-col flex-1 h-full">
 						<DetailPageDetailPanel bind:triggerSelected bind:selected {isOperator} {hasStepDetails}>
 							<slot slot="webhooks" name="webhooks" />
+							<slot slot="email" name="email" />
 							<slot slot="schedule" name="schedule" />
 							<slot slot="cli" name="cli" />
 							<slot slot="details" name="details" />