windmill-components 1.542.5 → 1.550.0

package/package/components/FlowTimeline.svelte

@@ -1,104 +1,57 @@
-<script lang="ts">import { debounce, displayDate, msToSec, readFieldsRecursively } from '../utils';
-import { onDestroy, untrack } from 'svelte';
-import { getDbClockNow } from '../forLater';
+<script lang="ts">import { displayDate, msToSec } from '../utils';
 import { Loader2 } from 'lucide-svelte';
 import TimelineBar from './TimelineBar.svelte';
 import WaitTimeWarning from './common/waitTimeWarning/WaitTimeWarning.svelte';
-let { selfWaitTime = undefined, aggregateWaitTime = undefined, flowModules, durationStatuses, flowDone = false, decreaseIterationFrom, buildSubflowKey, globalIterationBounds } = $props();
-let min = $state(undefined);
-let max = $state(undefined);
-let total = $state(undefined);
-let items = $state(undefined);
-let { debounced, clearDebounce } = debounce(() => computeItems(durationStatuses), 30);
+import { TimelineCompute } from '../timelineCompute.svelte';
+import { onMount, untrack } from 'svelte';
+import OnChange from './common/OnChange.svelte';
+import VirtualList from '@tutorlatin/svelte-tiny-virtual-list';
+import FlowJobsMenu from './flows/map/FlowJobsMenu.svelte';
+let { selfWaitTime = undefined, aggregateWaitTime = undefined, flowModules, durationStatuses, flowDone = false, localModuleStates, onSelectedIteration } = $props();
+let timelineCompute = $state(undefined);
+const flowModulesIds = $derived(flowModules.map(({ id }) => id));
+// Initialize timeline compute when we have duration statuses
+onMount(() => {
+    timelineCompute = new TimelineCompute(flowModulesIds, durationStatuses, flowDone);
+    return () => {
+        timelineCompute?.destroy();
+    };
+});
 $effect(() => {
-    readFieldsRecursively(durationStatuses);
-    flowDone != undefined && durationStatuses && untrack(() => debounced());
+    flowDone;
+    untrack(() => {
+        timelineCompute?.setFlowDone(flowDone);
+    });
 });
+// Derived timeline values
+const min = $derived(timelineCompute?.min ?? undefined);
+const max = $derived(timelineCompute?.max ?? undefined);
+const total = $derived(timelineCompute?.total ?? undefined);
+const items = $derived(timelineCompute?.items ?? undefined);
+const now = $derived(timelineCompute?.now ?? Date.now());
 export function reset() {
-    min = undefined;
-    max = undefined;
-    items = computeItems(durationStatuses);
+    timelineCompute?.reset();
 }
-function computeItems(durationStatuses) {
-    let nmin = undefined;
-    let nmax = undefined;
-    let isStillRunning = false;
-    let cnt = 0;
-    let nitems = {};
-    Object.entries(durationStatuses).forEach(([k, o]) => {
-        Object.values(o.byJob).forEach((v) => {
-            cnt++;
-            if (v.started_at) {
-                if (!nmin) {
-                    nmin = v.started_at;
-                }
-                else {
-                    nmin = Math.min(nmin, v.started_at);
-                }
-            }
-            if (!flowDone && v.duration_ms == undefined) {
-                isStillRunning = true;
-            }
-            if (!isStillRunning) {
-                if (v.started_at && v.duration_ms != undefined) {
-                    let lmax = v.started_at + v.duration_ms;
-                    if (!nmax) {
-                        nmax = lmax;
-                    }
-                    else {
-                        nmax = Math.max(nmax, lmax);
-                    }
-                }
-            }
-        });
-        let arr = Object.entries(o.byJob).map(([k, v]) => ({ ...v, id: k }));
-        arr.sort((x, y) => {
-            if (!x.started_at) {
-                return -1;
-            }
-            else if (!y.started_at) {
-                return 1;
-            }
-            else {
-                return x.started_at - y.started_at;
-            }
-        });
-        nitems[k] = arr;
-    });
-    items = nitems;
-    min = nmin;
-    max = isStillRunning || (cnt < flowModules.length && !flowDone) ? undefined : nmax;
-    if (max && min) {
-        total = max - min;
-        total = Math.max(total, 2000);
-    }
-}
-let now = $state(getDbClockNow().getTime());
-let interval = setInterval((x) => {
-    if (!max) {
-        now = getDbClockNow().getTime();
-    }
-    if (min && (!max || total == undefined)) {
-        total = max ? max - min : Math.max(now - min, 2000);
-    }
-}, 30);
-onDestroy(() => {
-    interval && clearInterval(interval);
-    clearDebounce();
-});
+const barHeight = 32;
 </script>
 
+<OnChange
+	key={durationStatuses}
+	onChange={() => {
+		timelineCompute?.updateInputs(flowModulesIds, durationStatuses, flowDone)
+	}}
+/>
 {#if items}
 	<div class="divide-y border-b">
 		<div class="px-2 py-2 grid grid-cols-12 w-full"
 			><div></div>
 			<div class="col-span-11 pt-1 px-2 flex text-2xs text-secondary justify-between"
 				><div>{min ? displayDate(new Date(min), true) : ''}</div>{#if max && min}<div
-						class="hidden lg:block">{msToSec(max - min)}s</div
+						class="hidden lg:block">{msToSec(max - min, 1)}s</div
 					>
 				{/if}<div class="flex gap-1 items-center font-mono"
 					>{max ? displayDate(new Date(max), true) : ''}{#if !max && min}{#if now}
-							{msToSec(now - min, 3)}s
+							{msToSec(now - min, 1)}s
 						{/if}<Loader2 size={14} class="animate-spin" />{/if}</div
 				></div
 			>
@@ -126,61 +79,87 @@ onDestroy(() => {
 				/>
 			</div>
 		{/if}
-		{#each Object.values(flowModules) as k (k)}
-			{@const iterationFrom = globalIterationBounds[buildSubflowKey(k)]?.iteration_from ?? 0}
-			<div class="overflow-auto max-h-60 shadow-inner dark:shadow-gray-700 relative">
-				{#if iterationFrom > 0}
-					<div class="w-full flex flex-row-reverse sticky top-0">
-						<button
-							class="!text-secondary underline mr-2 text-2xs text-right whitespace-nowrap"
-							onclick={() => {
-								decreaseIterationFrom?.(k, 20)
-							}}
-							>Viewing iterations {iterationFrom} to {globalIterationBounds[buildSubflowKey(k)]
-								?.iteration_total}. Load more
-						</button>
-					</div>
-				{/if}
-
+		{#each flowModules as { id: k, type: typ } (k)}
+			{@const subItems = items?.[k]?.filter((x) => x.created_at && x.started_at)}
+			<div class="shadow-inner dark:shadow-gray-700 relative">
 				<div class="px-2 py-2 grid grid-cols-6 w-full">
-					<div class="truncate">{k.startsWith('subflow:') ? k.substring(8) : k}</div>
-					<div class="col-span-5 flex min-h-6">
+					<div class="truncate"
+						>{k.startsWith('subflow:') ? k.substring(8) : k}
+						{#if localModuleStates[k]?.selectedForloop && (typ == 'forloopflow' || typ == 'whileloopflow')}
+							<span class="text-xs font-mono font-medium inline-flex items-center -my-2">
+								<button onclick={(e) => e.stopPropagation()}>
+									<FlowJobsMenu
+										moduleId={k}
+										id={k}
+										{onSelectedIteration}
+										flowJobsSuccess={localModuleStates[k]?.flow_jobs_success}
+										flowJobs={localModuleStates[k]?.flow_jobs}
+										selected={localModuleStates[k]?.selectedForloopIndex ?? 0}
+										selectedManually={localModuleStates[k]?.selectedForLoopSetManually ?? false}
+										showIcon={false}
+									/>
+								</button>
+							</span>
+						{/if}
+					</div>
+					<div class="col-span-5 flex">
+						{#if subItems?.length > 1}
+							<div class="text-xs text-secondary absolute top-1 right-2">
+								{subItems?.length} jobs
+							</div>
+						{/if}
 						{#if min && total}
-							<div class="flex flex-col gap-2 w-full p-2 ml-4">
-								{#each items?.[k] ?? [] as b}
-									{@const waitingLen = b?.created_at
-										? b.started_at
-											? b.started_at - b?.created_at
-											: b.duration_ms
-												? 0
-												: now - b?.created_at
-										: 0}
-									<div class="flex w-full">
-										<TimelineBar
-											position="left"
-											id={b?.id}
-											{total}
-											{min}
-											gray
-											started_at={b.created_at}
-											len={waitingLen < 100 ? 0 : waitingLen - 100}
-											running={b?.started_at == undefined}
-										/>
-										{#if b.started_at}
+							<VirtualList
+								width="100%"
+								height={Math.min(400, (subItems?.length ?? 0) * barHeight)}
+								itemCount={subItems?.length ?? 0}
+								itemSize={barHeight}
+								getKey={(index) => subItems?.[index]?.id}
+							>
+								{#snippet item({ index, style })}
+									{@const b = subItems?.[index]}
+									{#if b?.created_at}
+										<!-- <div class="text-xs text-secondary">{JSON.stringify(b)}</div> -->
+										{@const waitingLen = b?.created_at
+											? b.started_at
+												? b.started_at - b?.created_at
+												: b.duration_ms
+													? 0
+													: now - b?.created_at
+											: 0}
+										<div class="flex w-full p-1 pb-2 pl-12" {style}>
 											<TimelineBar
-												position={waitingLen < 100 ? 'center' : 'right'}
+												position="left"
 												id={b?.id}
 												{total}
 												{min}
-												concat
-												started_at={b.started_at}
-												len={b.started_at ? (b?.duration_ms ?? now - b?.started_at) : 0}
-												running={b?.duration_ms == undefined}
+												gray
+												started_at={b.created_at}
+												len={waitingLen < 100 ? 0 : waitingLen - 100}
+												running={b?.started_at == undefined}
 											/>
-										{/if}
-									</div>
-								{/each}
-							</div>
+											{#if b.started_at}
+												<TimelineBar
+													position={waitingLen < 100 ? 'center' : 'right'}
+													id={b?.id}
+													{total}
+													{min}
+													concat
+													started_at={b.started_at}
+													len={b.started_at ? (b?.duration_ms ?? now - b?.started_at) : 0}
+													running={b?.duration_ms == undefined}
+												/>
+											{/if}
+										</div>
+									{:else}
+										<div class="flex w-full p-1 pb-2 pl-12">
+											<div class="text-xs text-secondary">
+												<!-- Waiting for executor/Suspend {JSON.stringify(b)} -->
+											</div>
+										</div>
+									{/if}
+								{/snippet}
+							</VirtualList>
 						{/if}</div
 					></div
 				>

package/package/components/FlowTimeline.svelte.d.ts

@@ -1,8 +1,19 @@
-import type { GlobalIterationBounds } from './graph';
+import type { GraphModuleState } from './graph';
+import type { FlowModuleForTimeline } from './FlowStatusViewerInner.svelte';
 interface Props {
     selfWaitTime?: number | undefined;
     aggregateWaitTime?: number | undefined;
-    flowModules: string[];
+    flowModules: FlowModuleForTimeline[];
+    localModuleStates: Record<string, GraphModuleState>;
+    onSelectedIteration?: (detail: {
+        id: string;
+        index: number;
+        manuallySet: true;
+        moduleId: string;
+    } | {
+        manuallySet: false;
+        moduleId: string;
+    }) => Promise<void>;
     durationStatuses: Record<string, {
         byJob: Record<string, {
             created_at?: number;
@@ -11,9 +22,7 @@ interface Props {
         }>;
     }>;
     flowDone?: boolean;
-    decreaseIterationFrom?: (key: string, amount: number) => void;
     buildSubflowKey: (key: string) => string;
-    globalIterationBounds: Record<string, GlobalIterationBounds>;
 }
 declare const FlowTimeline: import("svelte").Component<Props, {
     reset: () => void;

package/package/components/FlowTimelineBar.svelte

@@ -0,0 +1,227 @@
+<script lang="ts">import { msToReadableTime, msToReadableTimeShort } from '../utils';
+import { ZoomIn, ZoomOut } from 'lucide-svelte';
+import { twMerge } from 'tailwind-merge';
+import { Tooltip } from './meltComponents';
+let { total, min, items, selectedIndex, now, timelinelWidth, showZoomButtons = false, onZoom, zoom = 'in', onSelectIteration, idToIterationIndex, showIterations, isJobFailure } = $props();
+function getLength(item) {
+    if (!item?.started_at)
+        return 0;
+    return item.duration_ms ?? now - item.started_at;
+}
+function isRunning(item) {
+    return item.started_at !== undefined && item.duration_ms === undefined;
+}
+const filteredItems = $derived(showIterations ? items.filter((item) => showIterations.includes(item.id)) : items);
+let selectedItem = $derived(selectedIndex && selectedIndex >= 0 ? filteredItems[selectedIndex] : filteredItems[0]);
+let startItem = $derived(showIterations ? filteredItems[0] : selectedItem);
+// Calculate total execution time for multiple filteredItems
+function calculateTotalExecutionTime() {
+    let earliestStart;
+    let latestEnd = 0;
+    for (const item of filteredItems) {
+        if (item.started_at) {
+            // Track earliest start
+            if (!earliestStart || item.started_at < earliestStart) {
+                earliestStart = item.started_at;
+            }
+            // Track latest end
+            const itemEnd = item.duration_ms ? item.started_at + item.duration_ms : now;
+            latestEnd = Math.max(latestEnd, itemEnd);
+        }
+    }
+    return earliestStart ? latestEnd - earliestStart : 0;
+}
+let selectedLen = $derived(
+// If selectedIteration is set, it means we are in a loop and we are selecting an iteration
+showIterations ? calculateTotalExecutionTime() : getLength(selectedItem));
+const waitingLen = $derived(startItem?.created_at
+    ? startItem.started_at
+        ? startItem.started_at - startItem.created_at
+        : startItem.duration_ms
+            ? 0
+            : now - startItem.created_at
+    : 0);
+function calculateItemPosition(item) {
+    if (!item.started_at || !min)
+        return { left: 0, width: 0 };
+    const startOffset = item.started_at - min;
+    const duration = getLength(item);
+    const leftPercent = (startOffset / total) * 100;
+    const widthPercent = (duration / total) * 100;
+    return { left: leftPercent, width: widthPercent };
+}
+// More efficient version using sweep line algorithm for computing all overlaps at once
+function computeAllOverlaps(items) {
+    const overlapCounts = new Map();
+    const events = [];
+    for (const item of items) {
+        if (!item.started_at)
+            continue;
+        const endTime = item.duration_ms ? item.started_at + item.duration_ms : now;
+        events.push({ time: item.started_at, type: 'start', itemId: item.id });
+        events.push({ time: endTime, type: 'end', itemId: item.id });
+        overlapCounts.set(item.id, 0);
+    }
+    // Sort events by time, with end events before start events at the same time
+    events.sort((a, b) => {
+        if (a.time !== b.time)
+            return a.time - b.time;
+        return a.type === 'end' ? -1 : 1;
+    });
+    // Sweep through events
+    const activeItems = new Set();
+    for (const event of events) {
+        if (event.type === 'start') {
+            // Count current active items as overlaps for this item
+            overlapCounts.set(event.itemId, activeItems.size);
+            // Update overlap counts for all currently active items
+            for (const activeId of activeItems) {
+                overlapCounts.set(activeId, overlapCounts.get(activeId) + 1);
+            }
+            activeItems.add(event.itemId);
+        }
+        else {
+            activeItems.delete(event.itemId);
+        }
+    }
+    return Object.fromEntries(overlapCounts.entries());
+}
+// At component level, compute once when items change
+const allOverlaps = $derived(computeAllOverlaps(filteredItems));
+const maximumOverlaps = $derived(Math.max(...Object.values(allOverlaps)));
+const opacity = $derived(Math.max(0.02, 1 / maximumOverlaps));
+// Then in your template, use:
+// allOverlaps.get(item.id) ?? 0
+</script>
+
+{#if min && filteredItems.length > 0 && startItem?.started_at}
+	<div
+		class="flex items-center gap-2 ml-auto min-w-96 max-w-[1000px] h-4 group"
+		style="width: {timelinelWidth}px"
+	>
+		{#if showZoomButtons}
+			<div class="w-24 flex items-center justify-end">
+				<button
+					onclick={(e) => {
+						e.stopPropagation()
+						onZoom?.()
+					}}
+					class="hover:text-primary hover:bg-surface p-1 -my-1 rounded-md"
+				>
+					{#if zoom === 'in'}
+						<ZoomOut size={12} />
+					{:else}
+						<ZoomIn size={12} />
+					{/if}
+				</button>
+			</div>
+		{:else}
+			<div class="w-24"></div>
+		{/if}
+		<div
+			class="flex-1 h-1 bg-gray-300 dark:bg-gray-800 rounded-sm overflow-hidden group-hover:h-full transition-all duration-100 relative"
+		>
+			{#if waitingLen > 100 && startItem.created_at}
+				<div
+					style="width: {((startItem.created_at - min) / total) * 100}%"
+					class="h-full absolute left-0 top-0"
+				>
+				</div>
+				<div
+					style="left: {((startItem.created_at - min) / total) * 100}%; width: {(waitingLen /
+						total) *
+						100}%"
+					class="h-full absolute top-0 bg-gray-300 dark:bg-gray-600"
+					title={msToReadableTime(waitingLen, 1)}
+				>
+				</div>
+			{:else if startItem?.started_at}
+				<div
+					style="width: {((startItem.started_at - min) / total) * 100}%"
+					class="h-full absolute left-0 top-0"
+				></div>
+			{/if}
+
+			{#if showIterations}
+				<!-- All iterations with absolute positioning -->
+				{#each filteredItems as item, i}
+					{#if item.started_at}
+						{@const position = calculateItemPosition(item)}
+						<!-- {overlapCount}
+						{opacity} -->
+						<Tooltip
+							style="left: {position.left}%; width: {position.width}%"
+							class="h-full absolute top-0"
+							openDelay={100}
+						>
+							<!-- svelte-ignore a11y_consider_explicit_label -->
+							<div class="relative w-full h-full">
+								<button
+									class={twMerge(
+										'w-full h-full hover:outline outline-1 outline-blue-800 dark:outline-blue-300 -outline-offset-1 rounded-sm block transition-opacity duration-200',
+										isRunning(item)
+											? 'bg-blue-400'
+											: isJobFailure?.(item.id)
+												? ' bg-red-500'
+												: ' bg-blue-500',
+										i > 0 ? 'border-l border-gray-300 dark:border-gray-800 ' : '',
+										i === selectedIndex ? 'outline' : ''
+									)}
+									style="opacity: {opacity}"
+									onclick={(e) => {
+										e.stopPropagation()
+										onSelectIteration?.(item.id)
+									}}
+								>
+								</button>
+							</div>
+							{#snippet text()}
+								{`#${(idToIterationIndex?.(item.id) ?? 0) + 1}`}
+								<br />
+								{msToReadableTime(getLength(item), 1)}
+								{#if opacity < 1}
+									<br />
+									<span class="text-xs opacity-75">Overlapping</span>
+								{/if}
+							{/snippet}
+						</Tooltip>
+					{/if}
+				{/each}
+			{:else}
+				<!-- Single item case or inside a loop -->
+				{#if selectedItem?.started_at}
+					{@const position = calculateItemPosition(selectedItem)}
+					<Tooltip
+						class="h-full absolute top-0"
+						style="left: {position.left}%; width: {position.width}%"
+						openDelay={100}
+					>
+						<!-- svelte-ignore a11y_consider_explicit_label -->
+						<button
+							class={twMerge(
+								'block w-full h-full hover:outline outline-1 outline-white -outline-offset-1 rounded-sm',
+								isRunning(selectedItem)
+									? 'bg-blue-400'
+									: isJobFailure?.(selectedItem.id)
+										? ' bg-red-500'
+										: ' bg-blue-500'
+							)}
+							onclick={(e) => {
+								e.stopPropagation()
+							}}
+						></button>
+						{#snippet text()}
+							{msToReadableTime(selectedLen, 1)}
+						{/snippet}
+					</Tooltip>
+				{/if}
+			{/if}
+		</div>
+		{#if selectedLen > 0}
+			<span
+				class="text-2xs text-tertiary font-mono font-normal w-10 truncate"
+				title={msToReadableTime(selectedLen, 1)}>{msToReadableTimeShort(selectedLen, 1)}</span
+			>
+		{/if}
+	</div>
+{/if}

package/package/components/FlowTimelineBar.svelte.d.ts

@@ -0,0 +1,24 @@
+interface TimelineItem {
+    created_at?: number;
+    started_at?: number;
+    duration_ms?: number;
+    id: string;
+}
+interface Props {
+    total: number;
+    min: number | undefined;
+    items: TimelineItem[];
+    selectedIndex?: number;
+    now: number;
+    timelinelWidth: number;
+    showZoomButtons?: boolean;
+    onZoom?: () => void;
+    zoom?: 'in' | 'out';
+    onSelectIteration?: (id: string) => void;
+    idToIterationIndex?: (id: string) => number | undefined;
+    showIterations?: string[];
+    isJobFailure?: (id: string) => boolean;
+}
+declare const FlowTimelineBar: import("svelte").Component<Props, {}, "">;
+type FlowTimelineBar = ReturnType<typeof FlowTimelineBar>;
+export default FlowTimelineBar;