windmill-components 1.665.1 → 1.677.0

package/package/components/graph/noteEditor.svelte.js

@@ -179,7 +179,7 @@ export class NoteEditor {
     /**
      * Clean up group notes using DAG path completion
      */
-    cleanupGroupNotes(flowNodes) {
+    cleanupGroupNotes(flowNodes, collapsedModuleIds) {
         if (!this.isAvailable()) {
             return;
         }
@@ -189,6 +189,12 @@ export class NoteEditor {
             return;
         let hasChanges = false;
         const nodeSet = new Set(flowNodes.map((n) => n.id));
+        // Include collapsed module IDs as valid — they are hidden but still exist
+        if (collapsedModuleIds) {
+            for (const id of collapsedModuleIds) {
+                nodeSet.add(id);
+            }
+        }
         // Step 1: Clean invalid nodes from existing group notes
         for (const note of groupNotes) {
             const originalIds = note.contained_node_ids || [];
@@ -204,6 +210,11 @@ export class NoteEditor {
             const originalNodes = note.contained_node_ids || [];
             if (originalNodes.length === 0)
                 continue;
+            // Skip path completion for notes that reference collapsed modules,
+            // since the DAG is incomplete when groups are collapsed
+            if (collapsedModuleIds && originalNodes.some((id) => collapsedModuleIds.has(id))) {
+                continue;
+            }
             // Use the DAG path completion and splitting algorithm
             const completedGroups = completeAndSplitGroup(originalNodes, flowNodes);
             if (completedGroups.length <= 1) {

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

@@ -58,7 +58,7 @@ export declare function calculateAllNoteZIndexes(notes: FlowNote[], nodes: NodeD
 /**
  * Main function to compute note nodes and adjust nodes position based on group notes
  */
-export declare function computeNoteNodes(nodes: NodeDep[], notes: FlowNote[], noteTextHeights: Record<string, number>, onTextHeightChange: (noteId: string, height: number) => void, editMode: boolean | undefined, noteEditorContext: NoteEditorContext | undefined): NoteComputeResult;
+export declare function computeNoteNodes(nodes: NodeDep[], notes: FlowNote[], noteTextHeights: Record<string, number>, onTextHeightChange: (noteId: string, height: number) => void, editMode: boolean | undefined, noteEditorContext: NoteEditorContext | undefined, collapsedModuleIds?: Set<string>): NoteComputeResult;
 export declare function addGroupNoteContextMenuItem(nodeId: string, noteEditorContext: NoteEditorContext | undefined): {
     id: string;
     label: string;

package/package/components/graph/noteUtils.svelte.js

@@ -176,7 +176,7 @@ function createNoteData(note, onTextHeightChange, isGroupNote, editMode) {
 /**
  * Main function to compute note nodes and adjust nodes position based on group notes
  */
-export function computeNoteNodes(nodes, notes, noteTextHeights, onTextHeightChange, editMode = false, noteEditorContext) {
+export function computeNoteNodes(nodes, notes, noteTextHeights, onTextHeightChange, editMode = false, noteEditorContext, collapsedModuleIds) {
     // Check cache first
     if (computeNoteNodesCache &&
         deepEqual(nodes, computeNoteNodesCache[0]) &&
@@ -186,7 +186,7 @@ export function computeNoteNodes(nodes, notes, noteTextHeights, onTextHeightChan
     }
     if (editMode) {
         if (noteEditorContext?.noteEditor?.isAvailable()) {
-            noteEditorContext.noteEditor.cleanupGroupNotes(nodes);
+            noteEditorContext.noteEditor.cleanupGroupNotes(nodes, collapsedModuleIds);
         }
     }
     const allNoteNodes = [];
@@ -206,6 +206,13 @@ export function computeNoteNodes(nodes, notes, noteTextHeights, onTextHeightChan
     const noteZIndexes = calculateAllNoteZIndexes(notes, nodes);
     for (const note of notes) {
         const isGroupNote = note.type === 'group';
+        // Skip group notes whose contained nodes are all inside collapsed groups
+        if (isGroupNote && collapsedModuleIds?.size) {
+            const ids = note.contained_node_ids ?? [];
+            if (ids.length > 0 && ids.every((id) => collapsedModuleIds.has(id))) {
+                continue;
+            }
+        }
         const zIndex = noteZIndexes[note.id];
         // Calculate position and size using node positions for group notes
         const { position, size } = isGroupNote

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

@@ -0,0 +1,41 @@
+<script lang="ts">import { BaseEdge as XyBaseEdge, EdgeLabel, getBezierPath } from '@xyflow/svelte';
+let { id, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, label, animated } = $props();
+let [path, labelX, labelY] = $derived(getBezierPath({
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
+    sourcePosition,
+    targetPosition,
+    curvature: 0.25
+}));
+</script>
+
+<XyBaseEdge {id} {path} interactionWidth={0} />
+
+{#if label}
+	<EdgeLabel x={labelX} y={labelY}>
+		<span class="text-2xs text-tertiary bg-surface px-1 rounded">{label}</span>
+	</EdgeLabel>
+{/if}
+
+{#if animated}
+	<path
+		d={path}
+		fill="none"
+		stroke-dasharray="5 5"
+		stroke="var(--color-border)"
+		stroke-width="1"
+		class="animated-dash"
+	/>
+{/if}
+
+<style>
+	.animated-dash {
+		animation: dash 1s linear infinite;
+	}
+	@keyframes dash {
+		to {
+			stroke-dashoffset: -10;
+		}
+	}</style>

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

@@ -0,0 +1,4 @@
+import { type EdgeProps } from '@xyflow/svelte';
+declare const WacEdge: import("svelte").Component<EdgeProps, {}, "">;
+type WacEdge = ReturnType<typeof WacEdge>;
+export default WacEdge;

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

@@ -0,0 +1,51 @@
+<script lang="ts">import { Handle, Position } from '@xyflow/svelte';
+import { NODE } from '../../util';
+let { data } = $props();
+let dagNode = $derived(data.dagNode);
+let nodeType = $derived(dagNode.node_type.type);
+let displayLabel = $derived.by(() => {
+    const nt = dagNode.node_type;
+    switch (nt.type) {
+        case 'Branch':
+            return nt.condition_source;
+        case 'ParallelStart':
+            return 'parallel';
+        case 'ParallelEnd':
+            return 'join';
+        case 'LoopStart':
+            return `${dagNode.label} (${nt.iter_source})`;
+        case 'LoopEnd':
+            return dagNode.label;
+        case 'Sleep':
+            return `sleep(${nt.seconds}s)`;
+        case 'WaitForApproval':
+            return 'wait for approval';
+        case 'Return':
+            return 'return';
+        default:
+            return dagNode.label;
+    }
+});
+let bgClass = $derived.by(() => {
+    switch (nodeType) {
+        case 'Return':
+            return 'bg-surface-tertiary';
+        default:
+            return 'bg-component-virtual-node';
+    }
+});
+</script>
+
+<div class="relative">
+	<div
+		class="w-full flex relative rounded-md drop-shadow-sm {bgClass} overflow-hidden"
+		style="width: {NODE.width}px; height: {NODE.height}px;"
+	>
+		<div class="flex flex-row items-center justify-center w-full p-2 text-2xs rounded-md">
+			<div class="truncate text-center text-emphasis">{displayLabel}</div>
+		</div>
+	</div>
+</div>
+
+<Handle type="target" position={Position.Top} isConnectable={false} />
+<Handle type="source" position={Position.Bottom} isConnectable={false} />

package/package/components/graph/renderers/nodes/WacControlNode.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { WacDagNode } from '../../../../infer';
+type $$ComponentProps = {
+    data: {
+        dagNode: WacDagNode;
+    };
+};
+declare const WacControlNode: import("svelte").Component<$$ComponentProps, {}, "">;
+type WacControlNode = ReturnType<typeof WacControlNode>;
+export default WacControlNode;

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

@@ -0,0 +1,35 @@
+<script lang="ts">import { Handle, Position } from '@xyflow/svelte';
+import { Badge } from '../../../common';
+import { NODE } from '../../util';
+let { data } = $props();
+let dagNode = $derived(data.dagNode);
+let isInline = $derived(dagNode.node_type.type === 'InlineStep');
+let label = $derived(dagNode.label);
+let script = $derived(dagNode.node_type.type === 'Step' ? dagNode.node_type.script : undefined);
+let hasExternalPath = $derived(script !== undefined && script !== label);
+</script>
+
+<div class="relative">
+	<div
+		class="w-full flex relative rounded-md drop-shadow-sm bg-surface-tertiary overflow-hidden"
+		style="width: {NODE.width}px; height: {NODE.height}px;"
+	>
+		<div class="flex flex-row items-center w-full p-2 text-2xs text-primary rounded-md gap-2">
+			<div class="flex flex-col flex-grow min-w-0">
+				<div class="truncate text-center text-emphasis">{label}</div>
+			</div>
+			{#if hasExternalPath}
+				<Badge color="blue" baseClass="max-w-[100px]" title={script}>
+					<span class="text-2xs truncate">{script}</span>
+				</Badge>
+			{:else if isInline}
+				<Badge color="indigo" baseClass="max-w-[60px]">
+					<span class="text-2xs">inline</span>
+				</Badge>
+			{/if}
+		</div>
+	</div>
+</div>
+
+<Handle type="target" position={Position.Top} isConnectable={false} />
+<Handle type="source" position={Position.Bottom} isConnectable={false} />

package/package/components/graph/renderers/nodes/WacStepNode.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { WacDagNode } from '../../../../infer';
+type $$ComponentProps = {
+    data: {
+        dagNode: WacDagNode;
+    };
+};
+declare const WacStepNode: import("svelte").Component<$$ComponentProps, {}, "">;
+type WacStepNode = ReturnType<typeof WacStepNode>;
+export default WacStepNode;

package/package/components/graph/wacDagLayout.d.ts

@@ -0,0 +1,10 @@
+import type { Node, Edge } from '@xyflow/svelte';
+import type { WacWorkflowDag } from '../../infer';
+/**
+ * Simple top-to-bottom DAG layout for WAC workflow graphs.
+ * Uses the same NODE dimensions as the flow editor for visual consistency.
+ */
+export declare function dagToXyflow(dag: WacWorkflowDag): {
+    nodes: Node[];
+    edges: Edge[];
+};

package/package/components/graph/wacDagLayout.js

@@ -0,0 +1,120 @@
+import { NODE } from './util';
+const GAP_X = NODE.gap.horizontal;
+const GAP_Y = NODE.gap.vertical;
+/**
+ * Simple top-to-bottom DAG layout for WAC workflow graphs.
+ * Uses the same NODE dimensions as the flow editor for visual consistency.
+ */
+export function dagToXyflow(dag) {
+    if (dag.nodes.length === 0) {
+        return { nodes: [], edges: [] };
+    }
+    // Build adjacency maps
+    const childrenMap = new Map();
+    const parentMap = new Map();
+    for (const edge of dag.edges) {
+        if (!childrenMap.has(edge.from))
+            childrenMap.set(edge.from, []);
+        childrenMap.get(edge.from).push({ id: edge.to, label: edge.label });
+        if (!parentMap.has(edge.to))
+            parentMap.set(edge.to, []);
+        parentMap.get(edge.to).push(edge.from);
+    }
+    // Find root nodes (no parents, excluding back-edges to loop starts)
+    const roots = dag.nodes.filter((n) => {
+        const parents = parentMap.get(n.id) ?? [];
+        return (parents.length === 0 ||
+            parents.every((p) => {
+                const edge = dag.edges.find((e) => e.from === p && e.to === n.id);
+                return edge?.label === 'next';
+            }));
+    });
+    // Assign layers using BFS (ignoring back-edges)
+    const layers = new Map();
+    const queue = [];
+    for (const root of roots) {
+        layers.set(root.id, 0);
+        queue.push(root.id);
+    }
+    while (queue.length > 0) {
+        const nodeId = queue.shift();
+        const layer = layers.get(nodeId);
+        const children = childrenMap.get(nodeId) ?? [];
+        for (const child of children) {
+            if (child.label === 'next')
+                continue; // skip back-edges
+            const existing = layers.get(child.id);
+            if (existing === undefined || existing < layer + 1) {
+                layers.set(child.id, layer + 1);
+                queue.push(child.id);
+            }
+        }
+    }
+    // Group nodes by layer
+    const layerGroups = new Map();
+    for (const [nodeId, layer] of layers) {
+        if (!layerGroups.has(layer))
+            layerGroups.set(layer, []);
+        layerGroups.get(layer).push(nodeId);
+    }
+    const maxLayer = Math.max(...layers.values(), 0);
+    // Position nodes — centered, using flow editor dimensions
+    const positions = new Map();
+    for (let layer = 0; layer <= maxLayer; layer++) {
+        const group = layerGroups.get(layer) ?? [];
+        const totalWidth = group.length * NODE.width + (group.length - 1) * GAP_X;
+        const startX = -totalWidth / 2;
+        for (let i = 0; i < group.length; i++) {
+            positions.set(group[i], {
+                x: startX + i * (NODE.width + GAP_X),
+                y: layer * (NODE.height + GAP_Y)
+            });
+        }
+    }
+    // Convert to xyflow nodes
+    const nodeMap = new Map(dag.nodes.map((n) => [n.id, n]));
+    const xyNodes = [];
+    for (const [id, pos] of positions) {
+        const dagNode = nodeMap.get(id);
+        if (!dagNode)
+            continue;
+        xyNodes.push({
+            id,
+            type: getXyflowNodeType(dagNode),
+            position: { x: pos.x, y: pos.y },
+            data: { dagNode },
+            width: NODE.width,
+            height: NODE.height
+        });
+    }
+    // Convert to xyflow edges
+    const xyEdges = dag.edges.map((e, i) => ({
+        id: `e-${i}`,
+        source: e.from,
+        target: e.to,
+        type: 'wacEdge',
+        label: e.label === 'next' ? '' : (e.label ?? ''),
+        animated: e.label === 'next',
+        style: e.label === 'next' ? 'stroke-dasharray: 5 5;' : undefined
+    }));
+    return { nodes: xyNodes, edges: xyEdges };
+}
+function getXyflowNodeType(node) {
+    switch (node.node_type.type) {
+        case 'Step':
+        case 'InlineStep':
+            return 'wacStep';
+        case 'Sleep':
+        case 'WaitForApproval':
+        case 'Branch':
+        case 'ParallelStart':
+        case 'ParallelEnd':
+        case 'LoopStart':
+        case 'LoopEnd':
+        case 'Merge':
+        case 'Return':
+            return 'wacControl';
+        default:
+            return 'wacStep';
+    }
+}

package/package/components/graph/wacToFlow.js

@@ -8,7 +8,7 @@ export function isWorkflowAsCode(code, language) {
     if (language === 'bun' || language === 'deno') {
         return (/workflow\s*\(/.test(code) &&
             /task\s*\(/.test(code) &&
-            /import.*(?:workflow|task).*from\s+['"]windmill-client(?:@[^'"]*)?['"]/.test(code));
+            /['"]windmill-client(?:@[^'"]*)?['"]/.test(code));
     }
     return false;
 }

package/package/components/home/ItemsList.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">import CenteredPage from '../CenteredPage.svelte';
-import { Button, Skeleton } from '../common';
+import { Badge, Button, Skeleton } from '../common';
 import Toggle from '../Toggle.svelte';
 import { AppService, FlowService, ScriptService } from '../../gen';
 import { userStore, workspaceStore } from '../../stores';
-import { ChevronsDownUp, ChevronsUpDown, Code2, LayoutDashboard, ListFilterPlus, SearchCode } from 'lucide-svelte';
+import { ChevronsDownUp, ChevronsUpDown, Code2, LayoutDashboard, ListFilterPlus, SearchCode, Tag } from 'lucide-svelte';
 import { HOME_SEARCH_SHOW_FLOW, HOME_SEARCH_PLACEHOLDER } from '../../consts';
 import SearchItems from '../SearchItems.svelte';
 import ListFilters from './ListFilters.svelte';
@@ -89,6 +89,7 @@ function filterItemsPathsBaseOnUserFilters(item, filterUserFolders, filterUserFo
     return true; // should not happen
 }
 let ownerFilter = $state(undefined);
+let labelFilter = $state(undefined);
 const cmp = new Intl.Collator('en').compare;
 const opts = {
     sort: (info, haystack, needle) => {
@@ -198,17 +199,21 @@ let combinedItems = $derived(flows == undefined || scripts == undefined || apps
             time: new Date(x.edited_at).getTime()
         }))
     ].sort((a, b) => a.starred != b.starred ? (a.starred ? -1 : 1) : a.time - b.time > 0 ? -1 : 1));
+let allLabels = $derived(Array.from(new Set(combinedItems?.flatMap((x) => ('labels' in x && x.labels) || []) ?? [])).sort());
 $effect(() => {
     if ($workspaceStore) {
         ownerFilter = undefined;
+        labelFilter = undefined;
     }
 });
 let preFilteredItems = $derived(ownerFilter != undefined
     ? combinedItems?.filter((x) => x.path.startsWith(ownerFilter + '/') &&
         (x.type == itemKind || itemKind == 'all') &&
-        filterItemsPathsBaseOnUserFilters(x, filterUserFolders, filterUserFoldersType))
+        filterItemsPathsBaseOnUserFilters(x, filterUserFolders, filterUserFoldersType) &&
+        (labelFilter == undefined || ('labels' in x && x.labels?.includes(labelFilter))))
     : combinedItems?.filter((x) => (x.type == itemKind || itemKind == 'all') &&
-        filterItemsPathsBaseOnUserFilters(x, filterUserFolders, filterUserFoldersType)));
+        filterItemsPathsBaseOnUserFilters(x, filterUserFolders, filterUserFoldersType) &&
+        (labelFilter == undefined || ('labels' in x && x.labels?.includes(labelFilter)))));
 let items = $derived(filter !== '' ? filteredItems : preFilteredItems);
 $effect(() => {
     items && resetScroll();
@@ -344,6 +349,25 @@ $effect(() => {
 			filters={owners}
 			bottomMargin={false}
 		/>
+		{#if allLabels.length > 0}
+			<div class="gap-1.5 w-full flex flex-wrap mt-2">
+				{#each allLabels as label (label)}
+					<Badge
+						color="blue"
+						small
+						clickable
+						selected={label === labelFilter}
+						title="Label: {label}"
+						onclick={() => {
+							labelFilter = labelFilter === label ? undefined : label
+						}}
+					>
+						<Tag size={10} class="inline -mt-px" />{label}
+						{#if label === labelFilter}&cross;{/if}
+					</Badge>
+				{/each}
+			</div>
+		{/if}
 		{#if filteredItems?.length == 0}
 			<div class="mt-10"></div>
 		{/if}

package/package/components/icons/RIcon.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">"use strict";
+let { height = 24, width = 24 } = $props();
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	{width}
+	{height}
+	viewBox="0 0 724 561"
+	preserveAspectRatio="xMidYMid"
+>
+	<defs>
+		<linearGradient id="r-grad-1" x1="0" x2="1" y1="0" y2="1">
+			<stop offset="0" stop-color="rgb(203,206,208)" />
+			<stop offset="1" stop-color="rgb(132,131,139)" />
+		</linearGradient>
+		<linearGradient id="r-grad-2" x1="0" x2="1" y1="0" y2="1">
+			<stop offset="0" stop-color="rgb(39,109,195)" />
+			<stop offset="1" stop-color="rgb(22,92,170)" />
+		</linearGradient>
+	</defs>
+	<path
+		d="M361.453,485.937 C162.329,485.937 0.906,377.828 0.906,244.469 C0.906,111.109 162.329,3.000 361.453,3.000 C560.578,3.000 722.000,111.109 722.000,244.469 C722.000,377.828 560.578,485.937 361.453,485.937 ZM416.641,97.406 C265.289,97.406 142.594,171.314 142.594,262.484 C142.594,353.654 265.289,427.562 416.641,427.562 C567.992,427.562 679.687,377.033 679.687,262.484 C679.687,147.971 567.992,97.406 416.641,97.406 Z"
+		fill="url(#r-grad-1)"
+		fill-rule="evenodd"
+	/>
+	<path
+		d="M550.000,377.000 C550.000,377.000 571.822,383.585 584.500,390.000 C588.899,392.226 596.510,396.668 602.000,402.500 C607.378,408.212 610.000,414.000 610.000,414.000 L696.000,559.000 L557.000,559.062 L492.000,437.000 C492.000,437.000 478.690,414.131 470.500,407.500 C463.668,401.969 460.755,400.000 454.000,400.000 C449.298,400.000 420.974,400.000 420.974,400.000 L421.000,558.974 L298.000,559.026 L298.000,152.938 L545.000,152.938 C545.000,152.938 657.500,154.967 657.500,262.000 C657.500,369.033 550.000,377.000 550.000,377.000 ZM496.500,241.024 L422.037,240.976 L422.000,310.026 L496.500,310.002 C496.500,310.002 531.000,309.895 531.000,274.877 C531.000,239.155 496.500,241.024 496.500,241.024 Z"
+		fill="url(#r-grad-2)"
+		fill-rule="evenodd"
+	/>
+</svg>

package/package/components/icons/RIcon.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    height?: number;
+    width?: number;
+}
+declare const RIcon: import("svelte").Component<Props, {}, "">;
+type RIcon = ReturnType<typeof RIcon>;
+export default RIcon;