windmill-components 1.511.1 → 1.531.0

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

@@ -5,18 +5,19 @@ export const WRITE_ASSET_Y_OFFSET = 64;
 export const assetDisplaysAsInputInFlowGraph = (a) => !getAccessType(a) || getAccessType(a) === 'r' || getAccessType(a) === 'rw';
 export const assetDisplaysAsOutputInFlowGraph = (a) => getAccessType(a) === 'w' || getAccessType(a) === 'rw';
 let computeAssetNodesCache;
-export function computeAssetNodes(nodes, edges) {
-    if (nodes === computeAssetNodesCache?.[0])
+export function computeAssetNodes(nodes) {
+    if (computeAssetNodesCache && deepEqual(nodes, computeAssetNodesCache[0])) {
         return computeAssetNodesCache[1];
+    }
     const MAX_ASSET_ROW_WIDTH = 300;
     const ASSETS_OVERFLOWED_NODE_WIDTH = 25;
     const allAssetNodes = [];
     const allAssetEdges = [];
     const yPosMap = {};
     for (const node of nodes) {
-        if (node.type !== 'module' && node.type !== 'input2')
-            continue;
         const assets = node.data.assets ?? [];
+        if (!assets.length)
+            continue;
         // Each asset can be displayed at the top and bottom
         // i.e once (R or W) or twice (RW)
         const inputAssets = assets.filter(assetDisplaysAsInputInFlowGraph);
@@ -152,7 +153,9 @@ export function computeAssetNodes(nodes, edges) {
         });
     }
     // Shift all nodes to make space for the new asset nodes
-    const sortedNewNodes = clone(nodes.sort((a, b) => a.position.y - b.position.y));
+    const sortedNewNodes = nodes
+        .map((n) => ({ position: { ...n.position }, id: n.id }))
+        .sort((a, b) => a.position.y - b.position.y);
     let currentYOffset = 0;
     let prevYPos = NaN;
     for (const node of sortedNewNodes) {
@@ -165,10 +168,11 @@ export function computeAssetNodes(nodes, edges) {
         }
         node.position.y += currentYOffset;
     }
-    let ret = [
-        [...sortedNewNodes, ...allAssetNodes],
-        [...edges, ...allAssetEdges]
-    ];
+    let ret = {
+        newAssetNodes: allAssetNodes,
+        newAssetEdges: allAssetEdges,
+        newNodePositions: Object.fromEntries(sortedNewNodes.map((n) => [n.id, n.position]))
+    };
     computeAssetNodesCache = [nodes, ret];
     return ret;
 }
@@ -181,14 +185,16 @@ import { twMerge } from 'tailwind-merge';
 import { getContext } from 'svelte';
 import ExploreAssetButton, { assetCanBeExplored } from '../../../ExploreAssetButton.svelte';
 import { Tooltip } from '../../../meltComponents';
-import { clone, pluralize } from '../../../../utils';
+import { pluralize } from '../../../../utils';
 import AssetGenericIcon from '../../../icons/AssetGenericIcon.svelte';
 import { NODE } from '../../util';
 import { userStore } from '../../../../stores';
+import { deepEqual } from 'fast-equals';
 const flowGraphAssetsCtx = getContext('FlowGraphAssetContext');
 let { data } = $props();
 const isSelected = $derived(assetEq(flowGraphAssetsCtx?.val.selectedAsset, data.asset));
 const cachedResourceMetadata = $derived(flowGraphAssetsCtx?.val.resourceMetadataCache[data.asset.path]);
+const usageCount = $derived(flowGraphAssetsCtx?.val.computeAssetsCount?.(data.asset));
 </script>
 
 <NodeWrapper>
@@ -232,10 +238,9 @@ const cachedResourceMetadata = $derived(flowGraphAssetsCtx?.val.resourceMetadata
 				{/if}
 			</div>
 			<svelte:fragment slot="text">
-				Used in {pluralize(
-					flowGraphAssetsCtx?.val.computeAssetsCount?.(data.asset) ?? -1,
-					'step'
-				)}<br />
+				{#if usageCount !== undefined}
+					Used in {pluralize(usageCount, 'step')}<br />
+				{/if}
 				<a
 					href={undefined}
 					class={twMerge(

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

@@ -4,7 +4,24 @@ export declare const READ_ASSET_Y_OFFSET = -45;
 export declare const WRITE_ASSET_Y_OFFSET = 64;
 export declare const assetDisplaysAsInputInFlowGraph: (a: AssetWithAltAccessType) => boolean;
 export declare const assetDisplaysAsOutputInFlowGraph: (a: AssetWithAltAccessType) => boolean;
-export declare function computeAssetNodes(nodes: (Node & NodeLayout)[], edges: Edge[]): [(Node & NodeLayout)[], Edge[]];
+type NodeDep = {
+    data: object & {
+        assets?: AssetWithAltAccessType[] | undefined;
+    };
+    id: string;
+    position: {
+        x: number;
+        y: number;
+    };
+};
+export declare function computeAssetNodes(nodes: NodeDep[]): {
+    newAssetNodes: (Node & NodeLayout)[];
+    newAssetEdges: Edge[];
+    newNodePositions: Record<string, {
+        x: number;
+        y: number;
+    }>;
+};
 import type { AssetN, NodeLayout } from '../../graphBuilder.svelte';
 import { type AssetWithAltAccessType } from '../../../assets/lib';
 import type { Edge, Node } from '@xyflow/svelte';

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

@@ -13,7 +13,7 @@ let { data } = $props();
 			selected={false}
 			bgColor={getStateColor(undefined, darkMode)}
 			bgHoverColor={getStateHoverColor(undefined, darkMode)}
-			borderColor={getStateColor(data?.flowModuleStates?.[data?.id]?.type, darkMode)}
+			borderColor={getStateColor(data?.flowModuleState?.type, darkMode)}
 			on:select={(e) => {
 				data?.eventHandlers?.select(e.detail)
 			}}

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

@@ -5,7 +5,7 @@ import { X } from 'lucide-svelte';
 import { getStateColor, getStateHoverColor } from '../../util';
 import { computeBorderStatus } from '../utils';
 let { data } = $props();
-let borderStatus = $derived(computeBorderStatus(data.branchIndex, 'branchall', data.flowModuleStates?.[data.id]));
+let borderStatus = $derived(computeBorderStatus(data.branchIndex, 'branchall', data.flowModuleState));
 </script>
 
 <NodeWrapper offset={data.offset}>

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

@@ -5,7 +5,7 @@ import { X } from 'lucide-svelte';
 import { getStateColor, getStateHoverColor } from '../../util';
 import { computeBorderStatus } from '../utils';
 let { data } = $props();
-let borderStatus = $derived(computeBorderStatus(data.branchIndex + 1, 'branchone', data.flowModuleStates?.[data.id]));
+let borderStatus = $derived(computeBorderStatus(data.branchIndex + 1, 'branchone', data.flowModuleState));
 </script>
 
 <NodeWrapper offset={data.offset}>

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

@@ -14,7 +14,7 @@ let { data } = $props();
 				id={data.id}
 				hideId
 				bgColor={getStateColor(undefined, darkMode)}
-				borderColor={getStateColor(data.flowModuleStates?.[data.id]?.type, darkMode)}
+				borderColor={getStateColor(data.flowModuleState?.type, darkMode)}
 				on:select={(e) => {
 					setTimeout(() => data?.eventHandlers?.select(e.detail))
 				}}
@@ -26,7 +26,7 @@ let { data } = $props();
 				selected={false}
 				id={data.id}
 				bgColor={getStateColor(undefined, darkMode)}
-				borderColor={getStateColor(data.flowModuleStates?.[data.id]?.type, darkMode)}
+				borderColor={getStateColor(data.flowModuleState?.type, darkMode)}
 				on:select={(e) => {
 					setTimeout(() => data?.eventHandlers?.select(e.detail))
 				}}

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

@@ -54,7 +54,7 @@ let filteredInput = $derived(filterIterFromInput($pickablePropertiesFiltered?.fl
 			hideId
 			bgColor={getStateColor(undefined, darkMode)}
 			bgHoverColor={getStateHoverColor(undefined, darkMode)}
-			borderColor={getStateColor(computeStatus(data.flowModuleStates?.[data.id]), darkMode)}
+			borderColor={getStateColor(computeStatus(data.flowModuleState), darkMode)}
 			on:select={(e) => {
 				setTimeout(() => data?.eventHandlers?.select(e.detail))
 			}}

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

@@ -3,18 +3,23 @@ import MapItem from '../../../flows/map/MapItem.svelte';
 import { GitBranchPlus, Maximize2 } from 'lucide-svelte';
 import NodeWrapper from './NodeWrapper.svelte';
 import { getStateColor, getStateHoverColor } from '../../util';
+import { jobToGraphModuleState } from '../../../modulesTest.svelte';
 let { data } = $props();
-let moduleState = $derived(data.flowModuleStates?.[data.id]);
-let flowJobs = $derived(moduleState?.flow_jobs
+let state = $derived.by(() => {
+    return data.testModuleState
+        ? (jobToGraphModuleState(data.testModuleState) ?? data.flowModuleState)
+        : data.flowModuleState;
+});
+let flowJobs = $derived(state?.flow_jobs
     ? {
-        flowJobs: moduleState?.flow_jobs,
-        selected: moduleState?.selectedForloopIndex ?? 0,
-        selectedManually: moduleState?.selectedForLoopSetManually,
-        flowJobsSuccess: moduleState?.flow_jobs_success
+        flowJobs: state?.flow_jobs,
+        selected: state?.selectedForloopIndex ?? 0,
+        selectedManually: state?.selectedForLoopSetManually,
+        flowJobsSuccess: state?.flow_jobs_success
     }
     : undefined);
 let type = $derived.by(() => {
-    let typ = data.flowModuleStates?.[data.id]?.type;
+    let typ = state?.type;
     if (!typ && flowJobs) {
         return 'InProgress';
     }
@@ -47,27 +52,22 @@ let type = $derived.by(() => {
 			annotation={flowJobs &&
 			(data.module.value.type === 'forloopflow' || data.module.value.type === 'whileloopflow')
 				? 'Iteration: ' +
-					((moduleState?.selectedForloopIndex ?? 0) >= 0
-						? (moduleState?.selectedForloopIndex ?? 0) + 1
-						: moduleState?.flow_jobs?.length) +
+					((state?.selectedForloopIndex ?? 0) >= 0
+						? (state?.selectedForloopIndex ?? 0) + 1
+						: state?.flow_jobs?.length) +
 					'/' +
-					(moduleState?.iteration_total ?? '?')
+					(state?.iteration_total ?? '?')
 				: ''}
-			bgColor={getStateColor(
-				data.editMode ? undefined : type,
-				darkMode,
-				true,
-				moduleState?.skipped
-			)}
+			bgColor={getStateColor(data.editMode ? undefined : type, darkMode, true, state?.skipped)}
 			bgHoverColor={getStateHoverColor(
 				data.editMode ? undefined : type,
 				darkMode,
 				true,
-				moduleState?.skipped
+				state?.skipped
 			)}
 			moving={data.moving}
-			duration_ms={moduleState?.duration_ms}
-			retries={moduleState?.retries}
+			duration_ms={state?.duration_ms}
+			retries={state?.retries}
 			{flowJobs}
 			on:delete={(e) => {
 				data.eventHandlers.delete(e.detail, '')
@@ -96,7 +96,7 @@ let type = $derived.by(() => {
 			isOwner={data.isOwner}
 			{type}
 			{darkMode}
-			skipped={moduleState?.skipped}
+			skipped={state?.skipped}
 		/>
 
 		<div class="absolute -bottom-10 left-1/2 transform -translate-x-1/2 z-10">

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

@@ -0,0 +1,64 @@
+<script lang="ts">import { twMerge } from 'tailwind-merge';
+import {} from '../../graphBuilder.svelte';
+import NodeWrapper from './NodeWrapper.svelte';
+import Popover from '../../../meltComponents/Popover.svelte';
+import InsertModuleInner from '../../../flows/map/InsertModuleInner.svelte';
+let funcDesc = $state('');
+let { data } = $props();
+</script>
+
+<NodeWrapper>
+	{#snippet children({ darkMode })}
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
+		<Popover
+			portal={null}
+			usePointerDownOutside
+			class={twMerge(
+				'!w-full text-2xs font-normal bg-surface h-6 pr-0.5 flex justify-center items-center rounded-sm text-tertiary border',
+				'hover:bg-surface-hover'
+			)}
+			placement="top"
+		>
+			<svelte:fragment slot="trigger">+tool</svelte:fragment>
+			<svelte:fragment slot="content" let:close>
+				<InsertModuleInner
+					bind:funcDesc
+					scriptOnly
+					on:close={() => {
+						close()
+					}}
+					on:new={(e) => {
+						data.eventHandlers.insert({
+							index: -1, // ignored when agentId is set
+							agentId: data.agentModuleId,
+							...e.detail
+						})
+						close()
+					}}
+					on:insert={(e) => {
+						data.eventHandlers.insert({
+							index: -1, // ignored when agentId is set
+							agentId: data.agentModuleId,
+							...e.detail
+						})
+						close()
+					}}
+					on:pickScript={(e) => {
+						data.eventHandlers.insert({
+							index: -1, // ignored when agentId is set
+							agentId: data.agentModuleId,
+							kind: e.detail.kind,
+							script: {
+								...e.detail,
+								summary: e.detail.summary
+									? e.detail.summary.replace(/\s/, '_').replace(/[^a-zA-Z0-9_]/g, '')
+									: e.detail.path.split('/').pop()
+							}
+						})
+						close()
+					}}
+				/>
+			</svelte:fragment>
+		</Popover>
+	{/snippet}
+</NodeWrapper>

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

@@ -0,0 +1,7 @@
+import { type NewAiToolN } from '../../graphBuilder.svelte';
+interface Props {
+    data: NewAiToolN['data'];
+}
+declare const NewAiToolNode: import("svelte").Component<Props, {}, "">;
+type NewAiToolNode = ReturnType<typeof NewAiToolNode>;
+export default NewAiToolNode;

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

@@ -13,7 +13,7 @@ let { data } = $props();
 			selected={false}
 			bgColor={getStateColor(undefined, darkMode)}
 			bgHoverColor={getStateHoverColor(undefined, darkMode)}
-			borderColor={getStateColor(data?.flowModuleStates?.[data?.id]?.type, darkMode)}
+			borderColor={getStateColor(data?.flowModuleState?.type, darkMode)}
 			on:select={(e) => {
 				setTimeout(() => data?.eventHandlers?.select(e.detail))
 			}}

package/package/components/icons/AssetDucklakeIcon.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">"use strict";
+let { height = '24px', width = '24px', fill = 'black', class: className = '' } = $props();
+</script>
+
+<svg
+	{width}
+	{height}
+	class={className}
+	viewBox="0 0 22 22"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+>
+	<path
+		d="M11.0586 0.306641C11.3106 0.315989 11.5582 0.378277 11.7822 0.495117C12.0247 0.621655 12.2331 0.805033 12.3897 1.0293L12.3916 1.03223L17.9033 9H16.2022L11.6963 2.4873V9H10.2959V2.4873L1.75196 14.8457C1.72867 14.8796 1.71294 14.9186 1.70508 14.959C1.69725 14.9995 1.69803 15.0418 1.70704 15.082C1.71605 15.1222 1.73351 15.1601 1.75782 15.1934C1.78213 15.2266 1.81309 15.2546 1.84864 15.2754H1.84766L8.75001 19.2158V20.8281L1.14844 16.4883L1.14258 16.4844C0.940872 16.3666 0.765826 16.2081 0.627936 16.0195C0.489969 15.8308 0.391887 15.6158 0.340827 15.3877C0.289772 15.1595 0.286682 14.9229 0.331061 14.6934C0.375447 14.4641 0.466395 14.2462 0.59864 14.0537L0.599616 14.0518L9.59962 1.03223L9.60157 1.0293C9.75823 0.804889 9.9673 0.62167 10.21 0.495117C10.4336 0.378564 10.6802 0.316161 10.9316 0.306641C10.9528 0.304686 10.9744 0.299805 10.9961 0.299805C11.0172 0.299841 11.038 0.304797 11.0586 0.306641Z"
+		{fill}
+		stroke="none"
+	/>
+	<path
+		d="M14.036 10C16.4558 10 18.4768 11.6945 18.9614 13.9535H17.2654C16.8219 12.6035 15.5438 11.6279 14.036 11.6279C12.1603 11.6279 10.6396 13.1376 10.6396 15C10.6396 16.8624 12.1603 18.3721 14.036 18.3721C15.7121 18.3721 17.1044 17.1667 17.3819 15.5814H19.038C18.7478 18.0689 16.6193 20 14.036 20C11.2547 20 9 17.7614 9 15C9 12.2386 11.2547 10 14.036 10Z"
+		{fill}
+		stroke="none"
+	/>
+	<path
+		d="M22 14.7674C22 16.0338 20.9049 16.9767 19.6618 16.9767L18.018 16.9767V15.5814L19.6618 15.5814C20.2251 15.5814 20.5946 15.1708 20.5946 14.7674C20.5946 14.3641 20.2251 13.9535 19.6618 13.9535L18.018 13.9535V12.5581L19.6618 12.5581C20.9049 12.5581 22 13.5011 22 14.7674Z"
+		{fill}
+		stroke="none"
+	/>
+</svg>

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

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

package/package/components/icons/AssetGenericIcon.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">import { Pyramid } from 'lucide-svelte';
 import AssetResIcon from './AssetResIcon.svelte';
 import AssetS3Icon from './AssetS3Icon.svelte';
+import AssetDucklakeIcon from './AssetDucklakeIcon.svelte';
 let { assetKind, fill, size, class: className = '' } = $props();
 </script>
 
@@ -8,6 +9,8 @@ let { assetKind, fill, size, class: className = '' } = $props();
 	<AssetS3Icon {fill} width={size} height={size} class={className} />
 {:else if assetKind == 'resource'}
 	<AssetResIcon {fill} width={size} height={size} class={className} />
+{:else if assetKind == 'ducklake'}
+	<AssetDucklakeIcon {fill} width={size} height={size} class={className} />
 {:else}
 	<Pyramid {size} color={fill} class={'!fill-none ' + className} />
 {/if}

package/package/components/icons/DucklakeIcon.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">"use strict";
+let { size = 24 } = $props();
+</script>
+
+<svg
+	width={size}
+	height={size}
+	viewBox="0 0 13 13"
+	style="fill:currentcolor;"
+	xmlns="http://www.w3.org/2000/svg"
+>
+	<path
+		d="M5.03604 1.5C7.45583 1.5 9.4768 3.19448 9.96136 5.45349H8.26545C7.82193 4.10348 6.54384 3.12791 5.03604 3.12791C3.16026 3.12791 1.63964 4.63764 1.63964 6.5C1.63964 8.36236 3.16026 9.87209 5.03604 9.87209C6.71211 9.87209 8.10437 8.66667 8.38188 7.0814H10.038C9.74784 9.56889 7.61927 11.5 5.03604 11.5C2.25471 11.5 0 9.26142 0 6.5C0 3.73858 2.25471 1.5 5.03604 1.5Z"
+	/>
+	<path
+		d="M13 6.26744C13 7.53379 11.9049 8.47674 10.6618 8.47674L9.01802 8.47674V7.0814L10.6618 7.0814C11.2251 7.0814 11.5946 6.67079 11.5946 6.26744C11.5946 5.86409 11.2251 5.45349 10.6618 5.45349L9.01802 5.45349V4.05814L10.6618 4.05814C11.9049 4.05814 13 5.00109 13 6.26744Z"
+	/>
+</svg>

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

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