windmill-components 1.542.4 → 1.550.0

package/package/components/FlowLogViewerWrapper.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">import FlowLogViewer from './FlowLogViewer.svelte';
-import { untrack } from 'svelte';
+import { TimelineCompute } from '../timelineCompute.svelte';
+import { onMount, untrack } from 'svelte';
 import { ChangeTracker } from '../svelte5Utils.svelte';
 import { readFieldsRecursively } from '../utils';
-let { job, localModuleStates, workspaceId, render, onSelectedIteration, mode = 'flow' } = $props();
+import OnChange from './common/OnChange.svelte';
+let { job, localModuleStates, localDurationStatuses, workspaceId, render, onSelectedIteration, mode = 'flow' } = $props();
 // State for tracking expanded rows - using Record to allow explicit control
 let expandedRows = $state({});
 let allExpanded = $state(false);
@@ -10,6 +12,19 @@ let showResultsInputs = $state(true);
 // Keyboard navigation state - incremental like expandedRows
 let currentId = $state('flow-root');
 let navigationChain = $state({});
+// Timeline state
+let timelineCompute = $state(undefined);
+onMount(() => {
+    timelineCompute = new TimelineCompute(modules.map((m) => m.id), localDurationStatuses ?? {}, job.type === 'CompletedJob');
+    return () => {
+        timelineCompute?.destroy();
+    };
+});
+// Derived timeline values
+const timelineMin = $derived(timelineCompute?.min ?? undefined);
+const timelineTotal = $derived(timelineCompute?.total ?? undefined);
+const timelineItems = $derived(timelineCompute?.items ?? undefined);
+const timelineNow = $derived(timelineCompute?.now ?? Date.now());
 let moduleTracker = new ChangeTracker($state.snapshot(job.raw_flow?.modules ?? []));
 $effect(() => {
     readFieldsRecursively(job.raw_flow?.modules ?? []);
@@ -64,8 +79,41 @@ function handleKeydown(event) {
 function select(id) {
     currentId = id;
 }
+let timelineAvailableWidths = $state({});
+let lastJobId = $state(job.id);
+const timelinelWidth = $derived.by(() => {
+    const widths = Object.values(timelineAvailableWidths);
+    return widths.length > 0 ? Math.max(Math.min(...widths) - 12, 0) : 0;
+});
+function updateJobId() {
+    if (job.id !== lastJobId) {
+        lastJobId = job.id;
+        navigationChain = {};
+        timelineAvailableWidths = {};
+        currentId = 'flow-root';
+        showResultsInputs = true;
+        timelineCompute?.reset();
+    }
+}
+$effect.pre(() => {
+    job.id;
+    untrack(() => {
+        job.id && updateJobId();
+    });
+});
 </script>
 
+<OnChange
+	key={localDurationStatuses}
+	onChange={() => {
+		timelineCompute?.updateInputs(
+			modules.map((m) => m.id),
+			localDurationStatuses ?? {},
+			job.type === 'CompletedJob'
+		)
+	}}
+/>
+
 <div
 	class="w-full rounded-md overflow-hidden border focus:border-gray-400 dark:focus:border-gray-400"
 	role="tree"
@@ -86,10 +134,15 @@ function select(id) {
 		{render}
 		{getSelectedIteration}
 		flowId="root"
-		flowStatus={undefined}
 		{mode}
 		{currentId}
 		bind:navigationChain
 		{select}
+		{timelineMin}
+		{timelineTotal}
+		{timelineItems}
+		{timelineNow}
+		bind:timelineAvailableWidths
+		{timelinelWidth}
 	/>
 </div>

package/package/components/FlowLogViewerWrapper.svelte.d.ts

@@ -1,11 +1,12 @@
 import type { Job } from '../gen';
-import type { GraphModuleState } from './graph';
+import type { DurationStatus, GraphModuleState } from './graph';
 interface Props {
     job: Partial<Job>;
-    localModuleStates: Record<string, GraphModuleState>;
+    localDurationStatuses?: Record<string, DurationStatus>;
     workspaceId: string | undefined;
     render: boolean;
-    onSelectedIteration: (detail: {
+    localModuleStates: Record<string, GraphModuleState>;
+    onSelectedIteration?: (detail: {
         id: string;
         index: number;
         manuallySet: true;

package/package/components/FlowLoopIterationPreview.svelte

@@ -43,14 +43,14 @@ export const whileLoopSchema = {
 };
 let selectedJobStep = $state(undefined);
 let isRunning = $state(false);
-let jobProgressReset = $state(undefined);
+let progressBar = $state(undefined);
 export function test() {
     runPreview(previewArgs, undefined);
 }
 const { flowStateStore, pathStore } = getContext('FlowEditorContext');
 const dispatch = createEventDispatcher();
 export async function runPreview(args, restartedFrom) {
-    jobProgressReset?.();
+    progressBar?.reset();
     const newFlow = { value: { modules }, summary: '' };
     jobId = await runFlowPreview(args, newFlow, $pathStore, restartedFrom);
     isRunning = true;
@@ -129,7 +129,7 @@ $effect(() => {
 		<div></div>
 	</div>
 	<div class="w-full flex flex-col gap-y-1">
-		<FlowProgressBar {job} bind:reset={jobProgressReset} />
+		<FlowProgressBar {job} bind:this={progressBar} />
 	</div>
 	<div class="overflow-y-auto grow pr-4">
 		<div class="max-h-1/2 overflow-auto border-b">
@@ -144,7 +144,7 @@ $effect(() => {
 		<div class="pt-4 grow">
 			{#if jobId}
 				<FlowStatusViewer
-					bind:flowStateStore={flowStateStore.val}
+					bind:flowState={flowStateStore.val}
 					{jobId}
 					onJobsLoaded={({ job: newJob }) => {
 						job = newJob

package/package/components/FlowMetadata.svelte

@@ -8,9 +8,8 @@ import { workspaceStore } from '../stores';
 import Tooltip from './Tooltip.svelte';
 import { Clock, MemoryStick, Calendar, Bot, User, Code2 } from 'lucide-svelte';
 import BarsStaggered from './icons/BarsStaggered.svelte';
-export let job;
 const SMALL_ICON_SIZE = 14;
-export let scheduleEditor;
+let { job, scheduleEditor } = $props();
 </script>
 
 <div
@@ -72,11 +71,11 @@ export let scheduleEditor;
 				<Calendar size={SMALL_ICON_SIZE} class="text-secondary min-w-3.5" />
 				<span class="whitespace-nowrap">
 					Schedule:
-					<!-- svelte-ignore a11y-invalid-attribute -->
+					<!-- svelte-ignore a11y_invalid_attribute -->
 					<a
 						href="#"
 						class="break-words text-blue-600 font-normal"
-						on:click={() =>
+						onclick={() =>
 							scheduleEditor?.openEdit(job.schedule_path ?? '', job.job_kind == 'flow')}
 					>
 						{truncateRev(job.schedule_path, 40)}

package/package/components/FlowMetadata.svelte.d.ts

@@ -1,23 +1,9 @@
 import { type Job } from '../gen';
 import ScheduleEditor from './triggers/schedules/ScheduleEditor.svelte';
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const FlowMetadata: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     job: Job;
     scheduleEditor: ScheduleEditor;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type FlowMetadata = InstanceType<typeof FlowMetadata>;
+}
+declare const FlowMetadata: import("svelte").Component<Props, {}, "">;
+type FlowMetadata = ReturnType<typeof FlowMetadata>;
 export default FlowMetadata;

package/package/components/FlowPreviewContent.svelte

@@ -9,7 +9,7 @@ import SchemaForm from './SchemaForm.svelte';
 import SchemaFormWithArgPicker from './SchemaFormWithArgPicker.svelte';
 import FlowStatusViewer from '../components/FlowStatusViewer.svelte';
 import FlowProgressBar from './flows/FlowProgressBar.svelte';
-import { AlertTriangle, ArrowRight, CornerDownLeft, Play, RefreshCw, X } from 'lucide-svelte';
+import { AlertTriangle, ArrowRight, CornerDownLeft, Loader2, Play, RefreshCw, X } from 'lucide-svelte';
 import { emptyString, sendUserToast } from '../utils';
 import { dfs } from './flows/dfs';
 import { sliceModules } from './flows/flowStateUtils.svelte';
@@ -40,6 +40,7 @@ let schemaFormWithArgPicker = $state(undefined);
 let currentJobId = $state(undefined);
 let stepHistoryLoader = getStepHistoryLoaderContext();
 let flowProgressBar = $state(undefined);
+let loadingHistory = $state(false);
 function extractFlow(previewMode) {
     const previewFlow = aiChatManager.flowAiChatHelpers?.getPreviewFlow();
     if (previewMode === 'whole') {
@@ -429,7 +430,7 @@ export function flowHasChanged() {
 									helperScript={flowStore.val.schema?.['x-windmill-dyn-select-code'] &&
 									flowStore.val.schema?.['x-windmill-dyn-select-lang']
 										? {
-												type: 'inline',
+												source: 'inline',
 												code: flowStore.val.schema['x-windmill-dyn-select-code'] as string,
 												lang: flowStore.val.schema['x-windmill-dyn-select-lang'] as ScriptLang
 											}
@@ -463,6 +464,7 @@ export function flowHasChanged() {
 							currentJobId = undefined
 						}}
 						path={$initialPathStore == '' ? $pathStore : $initialPathStore}
+						bind:loading={loadingHistory}
 					/>
 				{/if}
 			</div>
@@ -490,7 +492,7 @@ export function flowHasChanged() {
 					bind:suspendStatus
 					hideDownloadInGraph={customUi?.downloadLogs === false}
 					wideResults
-					bind:flowStateStore={flowStateStore.val}
+					bind:flowState={flowStateStore.val}
 					{jobId}
 					onDone={() => {
 						isRunning = false
@@ -503,6 +505,10 @@ export function flowHasChanged() {
 					{render}
 					{customUi}
 				/>
+			{:else if loadingHistory}
+				<div class="italic text-tertiary h-full grow mx-auto flex flex-row items-center gap-2">
+					<Loader2 class="animate-spin" /> <span> Loading history... </span>
+				</div>
 			{:else}
 				<div class="italic text-tertiary h-full grow"> Flow status will be displayed here </div>
 			{/if}

package/package/components/FlowPreviewContent.svelte.d.ts

@@ -57,6 +57,6 @@ declare const FlowPreviewContent: $$__sveltets_2_IsomorphicComponent<Props, {
     getIsOwner: () => boolean;
     getJob: () => Job | undefined;
     flowHasChanged: () => boolean;
-}, "initial" | "preventEscape" | "job" | "scrollTop" | "jobId" | "localModuleStates" | "rightColumnSelect" | "localDurationStatuses" | "selectedJobStep" | "previewMode" | "selectedJobStepIsTopLevel" | "selectedJobStepType" | "branchOrIterationN">;
+}, "initial" | "preventEscape" | "job" | "scrollTop" | "jobId" | "localModuleStates" | "localDurationStatuses" | "rightColumnSelect" | "selectedJobStep" | "previewMode" | "selectedJobStepIsTopLevel" | "selectedJobStepType" | "branchOrIterationN">;
 type FlowPreviewContent = InstanceType<typeof FlowPreviewContent>;
 export default FlowPreviewContent;

package/package/components/FlowStatusViewer.svelte

@@ -2,13 +2,12 @@
 import { setContext, untrack } from 'svelte';
 import { isOwner as loadIsOwner } from '../utils';
 import { userStore, workspaceStore } from '../stores';
-let { jobId, initialJob = undefined, workspaceId = undefined, flowStateStore = $bindable({}), selectedJobStep = $bindable(undefined), hideFlowResult = false, hideTimeline = false, hideDownloadInGraph = false, hideNodeDefinition = false, hideJobId = false, hideDownloadLogs = false, rightColumnSelect = $bindable('timeline'), isOwner = $bindable(false), wideResults = false, localModuleStates = $bindable({}), localDurationStatuses = $bindable({}), job = $bindable(undefined), render = true, suspendStatus = $bindable({ val: {} }), customUi, onStart, onJobsLoaded, onDone } = $props();
+let { jobId, initialJob = undefined, workspaceId = undefined, flowState = $bindable({}), selectedJobStep = $bindable(undefined), hideFlowResult = false, hideTimeline = false, hideDownloadInGraph = false, hideNodeDefinition = false, hideJobId = false, hideDownloadLogs = false, rightColumnSelect = $bindable('timeline'), isOwner = $bindable(false), wideResults = false, localModuleStates = $bindable({}), localDurationStatuses = $bindable({}), job = $bindable(undefined), render = true, suspendStatus = $bindable({ val: {} }), customUi, onStart, onJobsLoaded, onDone } = $props();
 let lastJobId = jobId;
 let retryStatus = $state({ val: {} });
 let globalRefreshes = $state({});
-let globalIterationBounds = $state({});
 setContext('FlowStatusViewer', {
-    flowStateStore,
+    flowState: flowState,
     suspendStatus,
     retryStatus,
     hideDownloadInGraph,
@@ -22,11 +21,14 @@ function loadOwner(path) {
 }
 async function updateJobId() {
     if (jobId !== lastJobId) {
+        console.log('updateJobId 3', jobId);
         lastJobId = jobId;
         retryStatus.val = {};
         suspendStatus.val = {};
         globalRefreshes = {};
-        globalIterationBounds = {};
+        flowState = {};
+        localDurationStatuses = {};
+        localModuleStates = {};
     }
 }
 let lastScriptPath = $state(undefined);
@@ -47,59 +49,60 @@ let storedToolCallJobs = $state({});
 let toolCallIndicesToLoad = $state([]);
 </script>
 
-<FlowStatusViewerInner
-	{hideFlowResult}
-	onJobsLoaded={({ job, force }) => {
-		if (job.script_path != lastScriptPath && job.script_path) {
-			lastScriptPath = job.script_path
-			loadOwner(lastScriptPath ?? '')
-		}
-		onJobsLoaded?.({ job, force })
-	}}
-	globalModuleStates={[]}
-	{globalIterationBounds}
-	bind:localModuleStates
-	bind:selectedNode={selectedJobStep}
-	bind:localDurationStatuses
-	{onStart}
-	{onDone}
-	bind:job
-	{initialJob}
-	{jobId}
-	{workspaceId}
-	{isOwner}
-	{wideResults}
-	bind:rightColumnSelect
-	{render}
-	{customUi}
-	graphTabOpen={true}
-	isNodeSelected={true}
-	{refreshGlobal}
-	{updateGlobalRefresh}
-	toolCallStore={{
-		getStoredToolCallJob: (storeKey: string) => storedToolCallJobs[storeKey],
-		setStoredToolCallJob: (storeKey: string, job: Job) => {
-			storedToolCallJobs[storeKey] = job
-		},
-		getLocalToolCallJobs: (prefix: string) => {
-			// we return a map from tool call index to job
-			// to do so, we filter the storedToolCallJobs object by the prefix and we make sure what's left in the key is a tool call index: 2 part of format agentModuleId-toolCallIndex
-			// and not a further nested tool call index
-			return Object.fromEntries(
-				Object.entries(storedToolCallJobs)
-					.filter(
-						([key]) => key.startsWith(prefix) && key.replace(prefix, '').split('-').length === 2
-					)
-					.map(([key, job]) => [Number(key.replace(prefix, '').split('-').pop()), job])
-			)
-		},
-		isToolCallToBeLoaded: (storeKey: string) => {
-			return toolCallIndicesToLoad.includes(storeKey)
-		},
-		addToolCallToLoad: (storeKey: string) => {
-			if (!toolCallIndicesToLoad.includes(storeKey)) {
-				toolCallIndicesToLoad.push(storeKey)
+{#key jobId}
+	<FlowStatusViewerInner
+		{hideFlowResult}
+		onJobsLoaded={({ job, force }) => {
+			if (job.script_path != lastScriptPath && job.script_path) {
+				lastScriptPath = job.script_path
+				loadOwner(lastScriptPath ?? '')
 			}
-		}
-	}}
-/>
+			onJobsLoaded?.({ job, force })
+		}}
+		globalModuleStates={[]}
+		bind:localModuleStates
+		bind:selectedNode={selectedJobStep}
+		bind:localDurationStatuses
+		{onStart}
+		{onDone}
+		bind:job
+		{initialJob}
+		{jobId}
+		{workspaceId}
+		{isOwner}
+		{wideResults}
+		bind:rightColumnSelect
+		{render}
+		{customUi}
+		graphTabOpen={true}
+		isNodeSelected={true}
+		{refreshGlobal}
+		{updateGlobalRefresh}
+		toolCallStore={{
+			getStoredToolCallJob: (storeKey: string) => storedToolCallJobs[storeKey],
+			setStoredToolCallJob: (storeKey: string, job: Job) => {
+				storedToolCallJobs[storeKey] = job
+			},
+			getLocalToolCallJobs: (prefix: string) => {
+				// we return a map from tool call index to job
+				// to do so, we filter the storedToolCallJobs object by the prefix and we make sure what's left in the key is a tool call index: 2 part of format agentModuleId-toolCallIndex
+				// and not a further nested tool call index
+				return Object.fromEntries(
+					Object.entries(storedToolCallJobs)
+						.filter(
+							([key]) => key.startsWith(prefix) && key.replace(prefix, '').split('-').length === 2
+						)
+						.map(([key, job]) => [Number(key.replace(prefix, '').split('-').pop()), job])
+				)
+			},
+			isToolCallToBeLoaded: (storeKey: string) => {
+				return toolCallIndicesToLoad.includes(storeKey)
+			},
+			addToolCallToLoad: (storeKey: string) => {
+				if (!toolCallIndicesToLoad.includes(storeKey)) {
+					toolCallIndicesToLoad.push(storeKey)
+				}
+			}
+		}}
+	/>
+{/key}

package/package/components/FlowStatusViewer.svelte.d.ts

@@ -6,7 +6,7 @@ interface Props {
     jobId: string;
     initialJob?: Job | undefined;
     workspaceId?: string | undefined;
-    flowStateStore?: FlowState;
+    flowState?: FlowState;
     selectedJobStep?: string | undefined;
     hideFlowResult?: boolean;
     hideTimeline?: boolean;
@@ -37,6 +37,6 @@ interface Props {
         job: CompletedJob;
     }) => void;
 }
-declare const FlowStatusViewer: import("svelte").Component<Props, {}, "job" | "isOwner" | "suspendStatus" | "localModuleStates" | "flowStateStore" | "rightColumnSelect" | "localDurationStatuses" | "selectedJobStep">;
+declare const FlowStatusViewer: import("svelte").Component<Props, {}, "job" | "isOwner" | "suspendStatus" | "localModuleStates" | "localDurationStatuses" | "flowState" | "rightColumnSelect" | "selectedJobStep">;
 type FlowStatusViewer = ReturnType<typeof FlowStatusViewer>;
 export default FlowStatusViewer;