windmill-components 1.379.4 → 1.382.3

package/package/components/flows/map/VirtualItem.svelte

@@ -1,50 +1,18 @@
-<script>import { base } from '../../../base';
-import { Badge } from '../../common';
+<script>import { Badge } from '../../common';
 import { classNames } from '../../../utils';
-import { ClipboardCopy, ExternalLink, Wand2, X } from 'lucide-svelte';
 import { createEventDispatcher, getContext } from 'svelte';
-import InsertModuleButton from './InsertModuleButton.svelte';
-import { copilotInfo } from '../../../stores';
-import Menu from '../../common/menu/Menu.svelte';
-import InsertTriggerButton from './InsertTriggerButton.svelte';
 export let label;
-export let modules;
-export let index;
-export let insertable;
 export let bgColor = '';
 export let selected;
 export let selectable;
-export let deleteBranch = undefined;
 export let id = undefined;
-export let moving = undefined;
 export let center = true;
-export let disableAi = false;
-export let wrapperNode = undefined;
 export let borderColor = undefined;
 export let hideId = false;
 const dispatch = createEventDispatcher();
-let openMenu = false;
-let triggerOpenMenu = false;
-let openNoCopilot = false;
-const { drawerStore: copilotDrawerStore, currentStepStore: copilotCurrentStepStore } = getContext('FlowCopilotContext') || {};
+const { currentStepStore: copilotCurrentStepStore } = getContext('FlowCopilotContext') || {};
 </script>
 
-{#if insertable && deleteBranch}
-	<div class="w-[27px] absolute -top-[40px] left-[50%] right-[50%] -translate-x-1/2">
-		<button
-			title="Delete branch"
-			on:click|stopPropagation={() => {
-				if (deleteBranch) {
-					dispatch('deleteBranch', deleteBranch)
-				}
-			}}
-			type="button"
-			class="text-primary bg-surface border mx-[1px] 'border-gray-300 dark:border-gray-500 focus:outline-none hover:bg-surface-hover focus:ring-4 focus:ring-gray-200 font-medium rounded-full text-sm w-[25px] h-[25px] flex items-center justify-center"
-		>
-			<X class="m-[5px]" size={15} />
-		</button>
-	</div>
-{/if}
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
@@ -52,9 +20,10 @@ const { drawerStore: copilotDrawerStore, currentStepStore: copilotCurrentStepSto
 		'w-full flex relative overflow-hidden rounded-sm',
 		selectable ? 'cursor-pointer' : '',
 		selected ? 'outline outline-offset-1 outline-2  outline-gray-600' : '',
-		label === 'Input' && $copilotCurrentStepStore === 'Input' ? 'z-[901]' : ''
+		label === 'Input' && $copilotCurrentStepStore === 'Input' ? 'z-[901]' : '',
+		'bg-surface'
 	)}
-	style="min-width: 275px; max-height: 80px; background-color: {bgColor};"
+	style="width: 275px; max-height: 34px; background-color: {bgColor} !important;"
 	on:click={() => {
 		if (selectable) {
 			if (id) {
@@ -77,7 +46,7 @@ const { drawerStore: copilotDrawerStore, currentStepStore: copilotCurrentStepSto
 			<span class="mr-2" />
 		{/if}
 		<div />
-		<div class="flex-1 truncate"><pre>{label}</pre></div>
+		<div class="truncate"><pre>{label}</pre></div>
 		<div class="flex items-center space-x-2">
 			{#if id && !hideId}
 				<Badge color="indigo">{id}</Badge>
@@ -85,125 +54,3 @@ const { drawerStore: copilotDrawerStore, currentStepStore: copilotCurrentStepSto
 		</div>
 	</div>
 </div>
-
-{#if insertable && modules && (label != 'Input' || modules.length == 0)}
-	<div
-		class="{openMenu
-			? 'z-20'
-			: ''} w-[27px] absolute top-[49px] left-[50%] right-[50%] -translate-x-1/2"
-	>
-		{#if moving}
-			<button
-				title="Add branch"
-				on:click={() => {
-					if (modules) {
-						dispatch('insert', {
-							modules,
-							index,
-							detail: 'move'
-						})
-					}
-				}}
-				type="button"
-				disabled={wrapperNode?.id === moving}
-				class="text-primary bg-surface border mx-[1px] border-gray-300 dark:border-gray-500 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-full text-sm w-[25px] h-[25px] flex items-center justify-center"
-			>
-				<ClipboardCopy size={12} />
-			</button>
-		{:else}
-			<InsertModuleButton
-				{disableAi}
-				bind:open={openMenu}
-				trigger={label == 'Input'}
-				on:insert={(e) => {
-					if (modules) {
-						dispatch('insert', {
-							modules,
-							index,
-							detail: 'script',
-							script: e.detail
-						})
-					}
-				}}
-				on:new={(e) => {
-					if (modules) {
-						dispatch('insert', {
-							modules,
-							index: index,
-							detail: e.detail
-						})
-					}
-				}}
-				{index}
-				modules={modules ?? []}
-			/>
-		{/if}
-	</div>
-{/if}
-
-{#if insertable && modules && label == 'Input'}
-	{#if !disableAi}
-		<div
-			class="{openNoCopilot
-				? 'z-10'
-				: ''} w-9 absolute -top-10 left-[50%] right-[50%] -translate-x-1/2"
-		>
-			<Menu pointerDown noMinW placement="bottom-center" let:close bind:show={openNoCopilot}>
-				<button
-					title="AI Flow Builder"
-					on:pointerdown={$copilotInfo.exists_openai_resource_path
-						? (ev) => {
-								ev.preventDefault()
-								ev.stopPropagation()
-								$copilotDrawerStore?.openDrawer()
-						  }
-						: undefined}
-					slot="trigger"
-					type="button"
-					class=" bg-surface text-violet-800 dark:text-violet-400 border mx-0.5 focus:outline-none hover:bg-surface-hover focus:ring-4 focus:ring-gray-200 font-medium rounded-full text-sm w-8 h-8 flex items-center justify-center"
-				>
-					<Wand2 size={16} />
-				</button>
-				{#if !$copilotInfo.exists_openai_resource_path}
-					<div class="text-primary p-4">
-						<p class="text-sm w-80">
-							Enable Windmill AI in the
-							<a
-								href="{base}/workspace_settings?tab=openai"
-								target="_blank"
-								class="inline-flex flex-row items-center gap-1"
-								on:click={() => {
-									close()
-								}}
-							>
-								workspace settings
-								<ExternalLink size={16} />
-							</a>
-						</p>
-					</div>
-				{/if}
-			</Menu>
-		</div>
-	{/if}
-	<div
-		class="{triggerOpenMenu
-			? 'z-10'
-			: ''} w-[27px] absolute top-[50px] left-[65%] right-[35%] -translate-x-1/2"
-	>
-		<InsertTriggerButton
-			{disableAi}
-			bind:open={triggerOpenMenu}
-			on:new={(e) => {
-				if (modules) {
-					dispatch('insert', {
-						modules,
-						index: 0,
-						detail: e.detail
-					})
-				}
-			}}
-			index={0}
-			modules={modules ?? []}
-		/>
-	</div>
-{/if}

package/package/components/flows/map/VirtualItem.svelte.d.ts

@@ -1,24 +1,13 @@
-/// <reference types="node" />
 import { SvelteComponent } from "svelte";
 import type { FlowModule } from '../../../gen';
 declare const __propDef: {
     props: {
         label: string;
-        modules: FlowModule[] | undefined;
-        index: number;
-        insertable: boolean;
         bgColor?: string | undefined;
         selected: boolean;
         selectable: boolean;
-        deleteBranch?: {
-            module: FlowModule;
-            index: number;
-        } | undefined;
         id?: string | undefined;
-        moving?: string | undefined;
         center?: boolean | undefined;
-        disableAi?: boolean | undefined;
-        wrapperNode?: FlowModule | undefined;
         borderColor?: string | undefined;
         hideId?: boolean | undefined;
     };
@@ -34,10 +23,6 @@ declare const __propDef: {
             index: number;
         }>;
         select: CustomEvent<string>;
-        deleteBranch: CustomEvent<{
-            module: FlowModule;
-            index: number;
-        }>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/package/components/flows/propPicker/PropPickerWrapper.svelte

@@ -10,6 +10,7 @@ import { writable } from 'svelte/store';
 import { twMerge } from 'tailwind-merge';
 export let pickableProperties;
 export let result = undefined;
+export let extraResults = undefined;
 export let flow_input = undefined;
 export let error = false;
 export let displayContext = true;
@@ -53,6 +54,7 @@ setContext('PropPickerWrapper', {
 			{#if result}
 				<PropPickerResult
 					{result}
+					{extraResults}
 					{flow_input}
 					on:select={({ detail }) => {
 						if (!notSelectable && !$propPickerConfig) {

package/package/components/flows/propPicker/PropPickerWrapper.svelte.d.ts

@@ -17,6 +17,7 @@ declare const __propDef: {
     props: {
         pickableProperties: PickableProperties | undefined;
         result?: any;
+        extraResults?: any;
         flow_input?: any;
         error?: boolean | undefined;
         displayContext?: boolean | undefined;

package/package/components/flows/types.d.ts

@@ -5,6 +5,7 @@ import type { Writable } from 'svelte/store';
 import type ScriptEditorDrawer from './content/ScriptEditorDrawer.svelte';
 import type { FlowState } from './flowState';
 import type { Schedule } from './scheduleUtils';
+import type { FlowBuilderWhitelabelCustomUi } from '../custom_ui';
 export type FlowInput = Record<string, {
     flowStepWarnings?: Record<string, {
         message: string;
@@ -33,4 +34,5 @@ export type FlowEditorContext = {
     saveDraft: () => void;
     initialPath: string;
     flowInputsStore: Writable<FlowInput>;
+    customUi: FlowBuilderWhitelabelCustomUi;
 };

package/package/components/graph/FlowGraphV2.svelte

@@ -0,0 +1,256 @@
+<script>import {} from '../../gen';
+import { NODE } from '.';
+import { createEventDispatcher, onMount, setContext } from 'svelte';
+import { writable } from 'svelte/store';
+import '@xyflow/svelte/dist/style.css';
+import { SvelteFlow, ConnectionLineType, Controls, ControlButton } from '@xyflow/svelte';
+import graphBuilder from './graphBuilder';
+import ModuleNode from './renderers/nodes/ModuleNode.svelte';
+import InputNode from './renderers/nodes/InputNode.svelte';
+import BranchAllStart from './renderers/nodes/BranchAllStart.svelte';
+import BranchAllEndNode from './renderers/nodes/branchAllEndNode.svelte';
+import ForLoopEndNode from './renderers/nodes/ForLoopEndNode.svelte';
+import ForLoopStartNode from './renderers/nodes/ForLoopStartNode.svelte';
+import ResultNode from './renderers/nodes/ResultNode.svelte';
+import BaseEdge from './renderers/edges/BaseEdge.svelte';
+import EmptyEdge from './renderers/edges/EmptyEdge.svelte';
+import { sugiyama, dagStratify, decrossOpt, coordCenter } from 'd3-dag';
+import { Expand } from 'lucide-svelte';
+import Toggle from '../Toggle.svelte';
+import DataflowEdge from './renderers/edges/DataflowEdge.svelte';
+import { encodeState } from '../../utils';
+import BranchOneStart from './renderers/nodes/BranchOneStart.svelte';
+import NoBranchNode from './renderers/nodes/NoBranchNode.svelte';
+export let success = undefined;
+export let modules = [];
+export let failureModule = undefined;
+export let minHeight = 0;
+export let maxHeight = undefined;
+export let notSelectable = false;
+export let flowModuleStates = undefined;
+export let selectedId = writable(undefined);
+export let insertable = false;
+export let moving = undefined;
+export let scroll = false;
+// Download: display a top level button to open the graph in a new tab
+export let download = false;
+export let fullSize = false;
+export let disableAi = false;
+export let flowInputsStore = writable(undefined);
+let useDataflow = writable(false);
+setContext('FlowGraphContext', { selectedId, flowInputsStore, useDataflow });
+const dispatch = createEventDispatcher();
+let fullWidth = 0;
+let width = 0;
+function layoutNodes(nodes) {
+    let seenId = [];
+    for (const n of nodes) {
+        if (seenId.includes(n.id)) {
+            n.id = n.id + '_dup';
+        }
+        seenId.push(n.id);
+    }
+    const flattenParentIds = nodes.map((n) => ({
+        ...n,
+        parentIds: n.data?.parentIds ?? []
+    }));
+    const stratify = dagStratify().id(({ id }) => id);
+    const dag = stratify(flattenParentIds);
+    let boxSize;
+    try {
+        const layout = sugiyama()
+            .decross(decrossOpt())
+            .coord(coordCenter())
+            .nodeSize(() => [NODE.width + NODE.gap.horizontal, NODE.height + NODE.gap.vertical]);
+        boxSize = layout(dag);
+    }
+    catch {
+        const layout = sugiyama()
+            .coord(coordCenter())
+            .nodeSize(() => [NODE.width + NODE.gap.horizontal, NODE.height + NODE.gap.vertical]);
+        boxSize = layout(dag);
+    }
+    const newNodes = dag.descendants().map((des) => ({
+        ...des.data,
+        id: des.data.id,
+        position: {
+            x: des.x
+                ? // @ts-ignore
+                    (des.data.data.offset ?? 0) +
+                        // @ts-ignore
+                        des.x +
+                        (fullSize ? fullWidth : width) / 2 -
+                        boxSize.width / 2 -
+                        NODE.width / 2 -
+                        (width - fullWidth) / 2
+                : 0,
+            y: des.y || 0
+        }
+    }));
+    return newNodes;
+}
+$: graph = graphBuilder(modules, {
+    disableAi,
+    insertable,
+    flowModuleStates,
+    selectedId: $selectedId
+}, failureModule, {
+    deleteBranch: (detail, label) => {
+        $selectedId = label;
+        dispatch('deleteBranch', detail);
+    },
+    insert: (detail) => {
+        dispatch('insert', detail);
+    },
+    select: (modId) => {
+        if (!notSelectable) {
+            if ($selectedId != modId) {
+                $selectedId = modId;
+            }
+            dispatch('select', modId);
+        }
+    },
+    delete: (detail, label) => {
+        $selectedId = label;
+        dispatch('delete', detail);
+    },
+    newBranch: (module) => {
+        dispatch('newBranch', { module });
+    },
+    move: (module, modules) => {
+        dispatch('move', { module, modules });
+    },
+    selectedIteration: (detail, moduleId) => {
+        dispatch('selectedIteration', { ...detail, moduleId: moduleId });
+    }
+}, success, $useDataflow, $selectedId, moving);
+const nodes = writable([]);
+const edges = writable([]);
+let height = 0;
+function updateStores() {
+    $nodes = layoutNodes(graph?.nodes);
+    $edges = graph.edges;
+    height = Math.max(...$nodes.map((n) => n.position.y + NODE.height + 40), minHeight);
+}
+$: graph && updateStores();
+const nodeTypes = {
+    input2: InputNode,
+    module: ModuleNode,
+    branchAllStart: BranchAllStart,
+    branchAllEnd: BranchAllEndNode,
+    forLoopEnd: ForLoopEndNode,
+    forLoopStart: ForLoopStartNode,
+    result: ResultNode,
+    whileLoopStart: ForLoopStartNode,
+    whileLoopEnd: ForLoopEndNode,
+    branchOneStart: BranchOneStart,
+    branchOneEnd: BranchAllEndNode,
+    noBranch: NoBranchNode
+};
+const edgeTypes = {
+    edge: BaseEdge,
+    empty: EmptyEdge,
+    dataflowedge: DataflowEdge
+};
+const proOptions = { hideAttribution: true };
+$: showDataflow =
+    $selectedId != undefined &&
+        !$selectedId.startsWith('constants') &&
+        !$selectedId.startsWith('settings') &&
+        $selectedId !== 'failure' &&
+        $selectedId !== 'Result';
+const viewport = writable({
+    x: 0,
+    y: 5,
+    zoom: 1
+});
+function centerViewport(width) {
+    viewport.update((vp) => ({
+        ...vp,
+        x: (width - fullWidth) / 2,
+        y: vp.y
+    }));
+}
+$: width && centerViewport(width);
+onMount(() => {
+    centerViewport(width);
+});
+</script>
+
+<div style={`height: ${height}px; max-height: ${maxHeight}px;`} bind:clientWidth={width}>
+	<SvelteFlow
+		{nodes}
+		{edges}
+		{edgeTypes}
+		{nodeTypes}
+		{viewport}
+		{height}
+		minZoom={0.5}
+		connectionLineType={ConnectionLineType.SmoothStep}
+		defaultEdgeOptions={{ type: 'smoothstep' }}
+		preventScrolling={scroll}
+		zoomOnDoubleClick={false}
+		elementsSelectable={false}
+		{proOptions}
+		nodesDraggable={false}
+	>
+		<div class="absolute inset-0 !bg-surface-secondary" />
+		<Controls position="top-right" orientation="horizontal" showLock={false}>
+			{#if download}
+				<ControlButton
+					on:click={() => {
+						try {
+							localStorage.setItem('svelvet', encodeState({ modules, failureModule }))
+						} catch (e) {
+							console.error('error interacting with local storage', e)
+						}
+						window.open('/view_graph', '_blank')
+					}}
+					class="!bg-surface"
+				>
+					<Expand size="14" />
+				</ControlButton>
+			{/if}
+		</Controls>
+
+		<Controls
+			position="top-left"
+			orientation="horizontal"
+			showLock={false}
+			showZoom={false}
+			showFitView={false}
+		>
+			{#if showDataflow}
+				<Toggle
+					value={$useDataflow}
+					on:change={() => {
+						$useDataflow = !$useDataflow
+					}}
+					size="xs"
+					options={{
+						right: 'Dataflow'
+					}}
+				/>
+			{/if}
+		</Controls>
+	</SvelteFlow>
+</div>
+
+<style>
+	:global(.svelte-flow__handle) {
+		opacity: 0;
+	}
+
+	:global(.svelte-flow__controls-button) {
+		border-width: 0px;
+		--tw-bg-opacity: 1;
+		background-color: rgb(var(--color-surface) / var(--tw-bg-opacity));
+}
+	:global(.svelte-flow__controls-button:hover) {
+		--tw-bg-opacity: 1;
+		background-color: rgb(var(--color-surface-hover) / var(--tw-bg-opacity));
+}
+
+	:global(.svelte-flow__edgelabel-renderer) {
+		z-index: 50;
+}</style>

package/package/components/graph/{FlowGraph.svelte.d.ts → FlowGraphV2.svelte.d.ts}

@@ -2,6 +2,7 @@ import { SvelteComponent } from "svelte";
 import { type FlowModule } from '../../gen';
 import { type GraphModuleState } from '.';
 import { type Writable } from 'svelte/store';
+import '@xyflow/svelte/dist/style.css';
 import type { FlowInput } from '../flows/types';
 declare const __propDef: {
     props: {
@@ -12,7 +13,6 @@ declare const __propDef: {
         maxHeight?: number | undefined;
         notSelectable?: boolean | undefined;
         flowModuleStates?: Record<string, GraphModuleState> | undefined;
-        rebuildOnChange?: any;
         selectedId?: Writable<string | undefined> | undefined;
         insertable?: boolean | undefined;
         moving?: string | undefined;
@@ -23,21 +23,21 @@ declare const __propDef: {
         flowInputsStore?: Writable<FlowInput | undefined> | undefined;
     };
     events: {
-        delete: CustomEvent<any>;
-        select: CustomEvent<any>;
+        deleteBranch: CustomEvent<any>;
         insert: CustomEvent<any>;
+        select: CustomEvent<any>;
+        delete: CustomEvent<any>;
         newBranch: CustomEvent<any>;
         move: CustomEvent<any>;
         selectedIteration: CustomEvent<any>;
-        deleteBranch: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
 };
-export type FlowGraphProps = typeof __propDef.props;
-export type FlowGraphEvents = typeof __propDef.events;
-export type FlowGraphSlots = typeof __propDef.slots;
-export default class FlowGraph extends SvelteComponent<FlowGraphProps, FlowGraphEvents, FlowGraphSlots> {
+export type FlowGraphV2Props = typeof __propDef.props;
+export type FlowGraphV2Events = typeof __propDef.events;
+export type FlowGraphV2Slots = typeof __propDef.slots;
+export default class FlowGraphV2 extends SvelteComponent<FlowGraphV2Props, FlowGraphV2Events, FlowGraphV2Slots> {
 }
 export {};

package/package/components/graph/graphBuilder.d.ts

@@ -0,0 +1,15 @@
+import type { FlowModule } from '../../gen';
+import { type Node, type Edge } from '@xyflow/svelte';
+export type GraphEventHandlers = {
+    insert: (detail: any) => void;
+    deleteBranch: (detail: any, label: string) => void;
+    select: (modId: string) => void;
+    delete: (detail: any, label: string) => void;
+    newBranch: (module: FlowModule) => void;
+    move: (module: FlowModule, modules: FlowModule[]) => void;
+    selectedIteration: (detail: any, moduleId: string) => void;
+};
+export default function graphBuilder(modules: FlowModule[] | undefined, extra: Record<string, any>, failureModule: FlowModule | undefined, eventHandlers: GraphEventHandlers, success: boolean | undefined, useDataflow: boolean | undefined, selectedId: string | undefined, moving: string | undefined): {
+    nodes: Node[];
+    edges: Edge[];
+};