windmill-components 1.522.0 → 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,10 +185,11 @@ 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));

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))
 			}}