windmill-components 1.408.2 → 1.430.2

package/package/components/FlowStatusViewerInner.svelte

@@ -3,7 +3,7 @@ import { workspaceStore } from '../stores';
 import { base } from '../base';
 import FlowJobResult from './FlowJobResult.svelte';
 import FlowPreviewStatus from './preview/FlowPreviewStatus.svelte';
-import { createEventDispatcher, getContext } from 'svelte';
+import { createEventDispatcher, getContext, tick } from 'svelte';
 import { onDestroy } from 'svelte';
 import { Badge, Button, Tab } from './common';
 import DisplayResult from './DisplayResult.svelte';
@@ -17,10 +17,11 @@ import FlowStatusWaitingForEvents from './FlowStatusWaitingForEvents.svelte';
 import { deepEqual } from 'fast-equals';
 import FlowTimeline from './FlowTimeline.svelte';
 import { dfs } from './flows/dfs';
-import { writable } from 'svelte/store';
+import { get, writable } from 'svelte/store';
 import Alert from './common/alert/Alert.svelte';
 import FlowGraphViewerStep from './FlowGraphViewerStep.svelte';
 import FlowGraphV2 from './graph/FlowGraphV2.svelte';
+import { buildPrefix } from './graph/graphBuilder';
 const dispatch = createEventDispatcher();
 let { flowStateStore, retryStatus, suspendStatus, hideDownloadInGraph, hideTimeline, hideNodeDefinition, hideDownloadLogs } = getContext('FlowStatusViewer');
 export let jobId;
@@ -29,42 +30,147 @@ export let workspaceId = undefined;
 export let flowJobIds = undefined;
 //only useful when forloops are optimized and the job doesn't contain the mod id anymore
 export let innerModule = undefined;
+export let globalRefreshes = {};
 export let render = true;
 export let isOwner = false;
 export let selectedNode = undefined;
 export let globalModuleStates;
 export let globalDurationStatuses;
-export let globalRefreshes = {};
 export let childFlow = false;
+export let isSubflow = false;
 export let reducedPolling = false;
 export let wideResults = false;
 export let hideFlowResult = false;
+export let workspace = $workspaceStore;
+export let prefix = undefined;
+export let subflowParentsGlobalModuleStates = [];
+export let subflowParentsDurationStatuses = [];
+export let isForloopSelected = false;
+export let parentRecursiveRefresh = {};
+export let job = undefined;
+let recursiveRefresh = {};
 let jobResults = flowJobIds?.flowJobs?.map((x, id) => `iter #${id + 1} not loaded by frontend yet`) ?? [];
 let retry_selected = '';
 let timeout;
 let localModuleStates = writable({});
 let localDurationStatuses = writable({});
-export let job = undefined;
-// let lastSize = 0
-// $: {
-// 	let len = (flowJobIds?.flowJobs ?? []).length
-// 	if (len != lastSize) {
-// 		updateForloop(len)
-// 	}
-// }
+let expandedSubflows = {};
+$: flowJobIds?.moduleId && onFlowModuleId();
+function onFlowModuleId() {
+    if (globalRefreshes) {
+        let modId = flowJobIds?.moduleId;
+        if (modId) {
+            globalRefreshes[buildSubflowKey(modId, prefix)] = async (clear, root) => {
+                await refresh(clear, root); // refresh(true, loopJob)
+            };
+        }
+    }
+}
+function updateModuleStates(moduleState, key, newValue, keepType) {
+    moduleState.update((x) => {
+        if (newValue.selectedForloop != undefined &&
+            x[key]?.selectedForloop != undefined &&
+            newValue.selectedForloop != x[key].selectedForloop) {
+            if (newValue.type == 'InProgress') {
+                x[key].type = 'InProgress';
+            }
+            return x;
+        }
+        if (x[key]?.selectedForLoopSetManually) {
+            if (newValue.selectedForloop != undefined &&
+                x[key]?.selectedForloop != newValue.selectedForloop) {
+                return x;
+            }
+            else {
+                newValue.selectedForLoopSetManually = true;
+                newValue.selectedForloopIndex = x[key]?.selectedForloopIndex;
+                newValue.selectedForloop = x[key]?.selectedForloop;
+            }
+        }
+        else if (x[key]?.selectedForloopIndex != undefined) {
+            newValue.selectedForloopIndex = x[key]?.selectedForloopIndex;
+            newValue.selectedForloop = x[key]?.selectedForloop;
+        }
+        if (keepType && (x[key]?.type == 'Success' || x[key]?.type == 'Failure')) {
+            newValue.type = x[key].type;
+        }
+        x[key] = newValue;
+        return x;
+    });
+}
+function buildSubflowKey(key, prefix) {
+    return prefix ? 'subflow:' + prefix + key : key;
+}
+async function refresh(clearLoop, rootJob) {
+    let modId = flowJobIds?.moduleId;
+    if (clearLoop) {
+        if (!rootJob) {
+            let topLevelModuleStates = globalModuleStates?.[globalModuleStates?.length - 1];
+            if (modId) {
+                topLevelModuleStates?.update((x) => {
+                    if (modId) {
+                        delete x[modId];
+                    }
+                    return x;
+                });
+            }
+            if (subflowParentsGlobalModuleStates.length > 0) {
+                subflowParentsGlobalModuleStates?.[subflowParentsGlobalModuleStates?.length - 1]?.update((x) => {
+                    for (let mod of innerModules ?? []) {
+                        if (mod.id) {
+                            delete x[buildSubflowKey(mod.id, prefix)];
+                        }
+                    }
+                    return x;
+                });
+            }
+            else {
+                topLevelModuleStates?.update((x) => {
+                    for (let mod of innerModules ?? []) {
+                        if (mod.id) {
+                            delete x[mod.id];
+                        }
+                    }
+                    return x;
+                });
+            }
+        }
+    }
+    else {
+        let state = modId ? getTopModuleStates()?.[modId] : undefined;
+        let loopjob = state?.selectedForloop;
+        let njob = flowJobIds && modId && loopjob ? storedListJobs?.[loopjob] : job;
+        if (njob) {
+            dispatch('jobsLoaded', { job: njob, force: true });
+        }
+    }
+    for (let [k, rec] of Object.entries(recursiveRefresh)) {
+        if (rootJob != undefined && rootJob != k) {
+            return;
+        }
+        await tick();
+        await rec(clearLoop, false);
+    }
+}
+function updateRecursiveRefresh(jobId) {
+    if (jobId) {
+        parentRecursiveRefresh[jobId] = async (clear, root) => {
+            if (globalModuleStates.length > 0 || isSubflow) {
+                await refresh(clear, root);
+            }
+        };
+    }
+}
 function setModuleState(key, value, force, keepType) {
     let newValue = { ...($localModuleStates[key] ?? {}), ...value };
     if (!deepEqual($localModuleStates[key], value) || force) {
         ;
         [localModuleStates, ...globalModuleStates].forEach((s) => {
-            s.update((x) => {
-                if (keepType && (x[key]?.type == 'Success' || x[key]?.type == 'Failure')) {
-                    newValue.type = x[key].type;
-                }
-                x[key] = newValue;
-                return x;
-            });
+            updateModuleStates(s, key, newValue, keepType);
         });
+        if (prefix) {
+            subflowParentsGlobalModuleStates.forEach((s) => updateModuleStates(s, buildSubflowKey(key, prefix), newValue, keepType));
+        }
     }
 }
 function setDurationStatusByJob(key, id, value) {
@@ -76,19 +182,35 @@ function setDurationStatusByJob(key, id, value) {
                 return x;
             });
         });
+        if (prefix) {
+            subflowParentsDurationStatuses.forEach((s) => {
+                s.update((x) => {
+                    x[buildSubflowKey(key, prefix)].byJob[id] = value;
+                    return x;
+                });
+            });
+        }
     }
 }
 function initializeByJob(modId) {
     if ($localDurationStatuses[modId] == undefined) {
         $localDurationStatuses[modId] = { byJob: {} };
     }
-    let prefixed = modId;
     globalDurationStatuses.forEach((x) => x.update((x) => {
-        if (x[prefixed] == undefined) {
-            x[prefixed] = { byJob: {} };
+        if (x[modId] == undefined) {
+            x[modId] = { byJob: {} };
         }
         return x;
     }));
+    if (prefix) {
+        subflowParentsDurationStatuses.forEach((x) => x.update((x) => {
+            let key = buildSubflowKey(modId, prefix);
+            if (x[key] == undefined) {
+                x[key] = { byJob: {} };
+            }
+            return x;
+        }));
+    }
 }
 let innerModules = [];
 function updateStatus(status) {
@@ -147,11 +269,19 @@ function updateInnerModules() {
             else if (mod.flow_jobs &&
                 (mod.type == 'Success' || mod.type == 'Failure') &&
                 !['Success', 'Failure'].includes($localModuleStates?.[mod.id ?? '']?.type)) {
-                // console.log(mod.id, 'FOO')
                 setModuleState(mod.id ?? '', {
                     type: mod.type
                 }, true);
             }
+            else if (isForloopSelected) {
+                setModuleState(mod.id ?? '', {}, true);
+            }
+            // if (isForloopSelected && mod?.flow_jobs) {
+            // 	let states = getTopModuleStates()
+            // 	if (states) {
+            // 		states[mod.id ?? ''] = $localModuleStates[mod.id ?? '']
+            // 	}
+            // }
             if (mod.branch_chosen) {
                 setModuleState(mod.id ?? '', {
                     branchChosen: mod.branch_chosen.type == 'default' ? 0 : (mod.branch_chosen.branch ?? 0) + 1
@@ -172,34 +302,19 @@ function updateInnerModules() {
         });
     }
 }
-let recursiveRefresh = {};
-export async function refresh(root, loopJob) {
-    let modId = flowJobIds?.moduleId;
-    if (!loopJob) {
-        loopJob = {
-            index: $localModuleStates[modId ?? '']?.selectedForloopIndex ?? 0,
-            job: $localModuleStates[modId ?? '']?.selectedForloop ?? ''
-        };
+$: isForloopSelected && globalModuleStates && loadJobInProgress();
+async function getNewJob(jobId, initialJob) {
+    if (jobId == initialJob?.id &&
+        initialJob?.id != undefined &&
+        initialJob?.type === 'CompletedJob') {
+        return initialJob;
     }
-    let last = root ? undefined : flowJobIds?.flowJobs?.[flowJobIds?.flowJobs.length - 1];
-    // console.log(innerModule, modId)
-    Object.entries(recursiveRefresh).forEach(([key, v]) => {
-        if (modId) {
-            if ((root && key == loopJob?.job) || key == last) {
-                v(false);
-            }
-        }
-        else {
-            v(false);
-        }
-    });
-    let njob = flowJobIds
-        ? root && modId
-            ? storedListJobs?.[loopJob.job]
-            : storedListJobs?.[flowJobIds.length - 1]
-        : job;
-    if (njob) {
-        dispatch('jobsLoaded', { job: njob, force: true });
+    else {
+        return await JobService.getJob({
+            workspace: workspaceId ?? $workspaceStore ?? '',
+            id: jobId ?? '',
+            noLogs: true
+        });
     }
 }
 let errorCount = 0;
@@ -208,16 +323,8 @@ async function loadJobInProgress() {
     dispatch('start');
     if (jobId != '00000000-0000-0000-0000-000000000000') {
         try {
-            const newJob = jobId == initialJob?.id &&
-                initialJob?.id != undefined &&
-                initialJob?.type === 'CompletedJob'
-                ? initialJob
-                : await JobService.getJob({
-                    workspace: workspaceId ?? $workspaceStore ?? '',
-                    id: jobId ?? '',
-                    noLogs: true
-                });
-            if (!deepEqual(job, newJob)) {
+            const newJob = await getNewJob(jobId, initialJob);
+            if (!deepEqual(job, newJob) || isForloopSelected) {
                 job = newJob;
                 job?.flow_status && updateStatus(job?.flow_status);
                 dispatch('jobsLoaded', { job, force: false });
@@ -243,6 +350,7 @@ async function loadJobInProgress() {
     }
 }
 let destroyed = false;
+updateRecursiveRefresh(jobId);
 async function updateJobId() {
     if (jobId !== job?.id) {
         $localModuleStates = {};
@@ -268,6 +376,8 @@ async function updateJobId() {
             }));
         }
         else {
+            updateRecursiveRefresh(jobId);
+            recursiveRefresh = {};
             $localDurationStatuses = {};
         }
         await loadJobInProgress();
@@ -275,21 +385,21 @@ async function updateJobId() {
 }
 $: jobId && updateJobId();
 $: isListJob = flowJobIds != undefined && Array.isArray(flowJobIds?.flowJobs);
-$: flowJobIds?.moduleId && onFlowJobFlowStatus();
-function onFlowJobFlowStatus() {
-    if (globalRefreshes) {
-        let modId = flowJobIds?.moduleId;
-        if (modId) {
-            globalRefreshes[modId] = async (loopJob) => {
-                setIteration(loopJob.index, loopJob.job, false, modId ?? '');
-                refresh(true, loopJob);
-            };
-        }
-    }
+function getTopModuleStates() {
+    return get(globalModuleStates?.[globalModuleStates?.length - 1]);
+}
+let forloop_selected = getTopModuleStates()?.[flowJobIds?.moduleId ?? '']?.selectedForloop;
+let sub = undefined;
+$: if (flowJobIds?.moduleId) {
+    sub?.();
+    sub = globalModuleStates?.[globalModuleStates?.length - 1].subscribe((x) => {
+        forloop_selected = x[flowJobIds?.moduleId ?? '']?.selectedForloop;
+    });
 }
 onDestroy(() => {
     destroyed = true;
     timeout && clearTimeout(timeout);
+    sub?.();
 });
 $: selected = isListJob ? 'sequence' : 'graph';
 function isSuccess(arg) {
@@ -329,6 +439,9 @@ function onJobsLoaded(mod, job, force) {
             });
         }
         else {
+            const parent_module = mod['parent_module'];
+            // Delete existing failure node attached to the same parent module
+            removeFailureNode(mod.id, parent_module);
             setModuleState(mod.id, {
                 args: job.args,
                 type: job['success'] ? 'Success' : 'Failure',
@@ -336,7 +449,7 @@ function onJobsLoaded(mod, job, force) {
                 result: job['result'],
                 job_id: job.id,
                 tag: job.tag,
-                parent_module: mod['parent_module'],
+                parent_module,
                 duration_ms: job['duration_ms'],
                 started_at: started_at,
                 flow_jobs: mod.flow_jobs,
@@ -354,36 +467,39 @@ function onJobsLoaded(mod, job, force) {
         }
     }
 }
-function setIteration(j, id, clicked, modId) {
+async function setIteration(j, id, clicked, modId, isForloop) {
     if (modId) {
-        if (!$localModuleStates?.[modId]) {
-            $localModuleStates[modId] = {
-                type: 'InProgress',
-                args: undefined
-            };
+        if (clicked) {
+            await globalRefreshes?.[modId]?.(true, id);
         }
-        let state = $localModuleStates?.[modId];
-        if (state) {
-            if (state.selectedForloop == id && clicked) {
-                setModuleState(modId, {
-                    selectedForloop: undefined,
-                    selectedForloopIndex: -1
-                }, false, true);
-            }
-            else {
-                setModuleState(modId, {
-                    selectedForloop: id,
-                    selectedForloopIndex: j
-                }, false, true);
-                clicked && refresh(true, undefined);
+        globalModuleStates?.[globalModuleStates?.length - 1]?.update((topLevelModuleStates) => {
+            let state = topLevelModuleStates?.[modId];
+            if (state) {
+                let manualOnce = state.selectedForLoopSetManually;
+                if (clicked ||
+                    (!manualOnce &&
+                        (state == undefined || !isForloop || j >= (state.selectedForloopIndex ?? -1)))) {
+                    let setManually = clicked || manualOnce;
+                    topLevelModuleStates[modId] = {
+                        ...(topLevelModuleStates[modId] ?? {}),
+                        selectedForloop: id,
+                        selectedForloopIndex: j,
+                        selectedForLoopSetManually: setManually ?? false
+                    };
+                    // clicked && callGlobRefresh(modId, {index: j, job: id, selectedManually: setManually ?? false})
+                }
             }
+            return topLevelModuleStates;
+        });
+        if (clicked) {
+            await globalRefreshes?.[modId]?.(false, id);
         }
     }
 }
 function innerJobLoaded(jobLoaded, j, clicked, force) {
     let modId = flowJobIds?.moduleId;
     if (modId) {
-        setIteration(j, jobLoaded.id, clicked, modId);
+        setIteration(j, jobLoaded.id, clicked, modId, innerModule?.type == 'forloopflow' || innerModule?.type == 'whileloopflow');
         if ($flowStateStore && $flowStateStore?.[modId] == undefined) {
             $flowStateStore[modId] = {
                 ...($flowStateStore[modId] ?? {}),
@@ -410,48 +526,47 @@ function innerJobLoaded(jobLoaded, j, clicked, force) {
         let created_at = jobLoaded.created_at ? new Date(jobLoaded.created_at).getTime() : undefined;
         let job_id = jobLoaded.id;
         initializeByJob(modId);
+        let v = {
+            started_at,
+            flow_jobs: flowJobIds?.flowJobs,
+            flow_jobs_success: flowJobIds?.flowJobsSuccess,
+            iteration_total: flowJobIds?.length,
+            duration_ms: undefined
+        };
+        let currentIndex = getTopModuleStates()?.[modId]?.selectedForloopIndex == j;
+        if (currentIndex) {
+            v.logs = jobLoaded.logs;
+            v.args = jobLoaded.args;
+            v.job_id = jobLoaded.id;
+        }
         if (jobLoaded.type == 'QueuedJob') {
-            if ($localModuleStates[modId]?.selectedForloopIndex == j) {
-                setModuleState(modId, {
-                    started_at,
-                    logs: jobLoaded.logs,
-                    job_id,
-                    args: jobLoaded.args,
-                    flow_jobs: flowJobIds?.flowJobs,
-                    flow_jobs_success: flowJobIds?.flowJobsSuccess,
-                    iteration_total: flowJobIds?.length,
-                    duration_ms: undefined
-                }, force, true);
+            if (started_at && $localModuleStates[modId]?.type != 'InProgress') {
+                v.type = 'InProgress';
+            }
+        }
+        else if (jobLoaded.type == 'CompletedJob') {
+            v.flow_jobs_results = jobResults;
+            if (currentIndex) {
+                v.result = jobLoaded.result;
             }
+        }
+        setModuleState(modId, v, force, true);
+        if (jobLoaded.type == 'QueuedJob') {
             setDurationStatusByJob(modId, job_id, {
                 created_at,
                 started_at
             });
         }
         else if (jobLoaded.type == 'CompletedJob') {
-            if ($localModuleStates[modId]?.selectedForloopIndex == j) {
-                setModuleState(modId, {
-                    started_at,
-                    args: jobLoaded.args,
-                    result: jobLoaded.result,
-                    flow_jobs_results: jobResults,
-                    job_id,
-                    flow_jobs: flowJobIds?.flowJobs,
-                    flow_jobs_success: flowJobIds?.flowJobsSuccess,
-                    iteration_total: flowJobIds?.length,
-                    duration_ms: undefined,
-                    isListJob: true
-                }, force, true);
-            }
             setDurationStatusByJob(modId, job_id, {
                 created_at,
                 started_at,
                 duration_ms: jobLoaded.duration_ms
             });
         }
-        if (jobLoaded.job_kind == 'script' || jobLoaded.job_kind == 'preview') {
+        if (jobLoaded.job_kind == 'script' || jobLoaded.job_kind == 'flowscript' || jobLoaded.job_kind == 'preview') {
             let id = undefined;
-            if (innerModule?.type == 'forloopflow' && innerModule.modules.length == 1) {
+            if ((innerModule?.type == 'forloopflow' || innerModule?.type == 'whileloopflow') && innerModule.modules.length == 1) {
                 id = innerModule?.modules?.[0]?.id;
             }
             if (id) {
@@ -478,6 +593,40 @@ function loadPreviousIters(lenToAdd) {
 let stepDetail = undefined;
 let storedListJobs = {};
 let wrapperHeight = 0;
+function removeFailureNode(id, parent_module) {
+    if (id?.startsWith('failure-') && parent_module) {
+        ;
+        [...globalModuleStates, localModuleStates].forEach((stateMapStore) => {
+            stateMapStore.update((stateMap) => {
+                if (id) {
+                    Object.keys(stateMap).forEach((key) => {
+                        if (stateMap[key]?.parent_module == parent_module) {
+                            delete stateMap[key];
+                        }
+                    });
+                }
+                return stateMap;
+            });
+        });
+    }
+}
+function allModulesForTimeline(modules, expandedSubflows) {
+    const ids = dfs(modules, (x) => x.id);
+    function rec(ids, prefix) {
+        return ids.concat(ids.flatMap((id) => {
+            let fms = expandedSubflows[id];
+            let oid = id.split(':').pop();
+            if (!oid) {
+                return [];
+            }
+            let nprefix = buildPrefix(prefix, oid);
+            return fms
+                ? rec(dfs(fms, (x) => x.id.startsWith('subflow:') ? x.id : buildSubflowKey(x.id, nprefix)), nprefix)
+                : [];
+        }));
+    }
+    return rec(ids, undefined);
+}
 </script>
 
 {#if notAnonynmous}
@@ -602,8 +751,6 @@ let wrapperHeight = 0;
 		<div class="{selected != 'sequence' ? 'hidden' : ''} max-w-7xl mx-auto">
 			{#if isListJob}
 				{@const sliceFrom = $localDurationStatuses[flowJobIds?.moduleId ?? '']?.iteration_from ?? 0}
-				{@const forloop_selected =
-					$localModuleStates?.[flowJobIds?.moduleId ?? '']?.selectedForloop}
 				<h3 class="text-md leading-6 font-bold text-tertiary border-b mb-4">
 					Subflows ({flowJobIds?.flowJobs.length})
 				</h3>
@@ -641,17 +788,31 @@ let wrapperHeight = 0;
 							</Button>
 						{/if}
 						{#if j >= sliceFrom || forloop_selected == loopJobId}
+							{@const forloopIsSelected =
+								forloop_selected == loopJobId ||
+								(innerModule?.type != 'forloopflow' && innerModule?.type != 'whileloopflow')}
 							<!-- <LogId id={loopJobId} /> -->
 							<div class="border p-6" class:hidden={forloop_selected != loopJobId}>
 								<svelte:self
-									bind:refresh={recursiveRefresh[loopJobId]}
 									{globalRefreshes}
+									parentRecursiveRefresh={recursiveRefresh}
 									{childFlow}
 									job={storedListJobs[j]}
-									globalModuleStates={[localModuleStates, ...globalModuleStates]}
+									initialJob={storedListJobs[j]}
+									globalModuleStates={forloopIsSelected
+										? [localModuleStates, ...globalModuleStates]
+										: []}
 									globalDurationStatuses={[localDurationStatuses, ...globalDurationStatuses]}
+									{prefix}
+									subflowParentsGlobalModuleStates={forloopIsSelected
+										? subflowParentsGlobalModuleStates
+										: []}
+									{subflowParentsDurationStatuses}
 									render={forloop_selected == loopJobId && selected == 'sequence' && render}
-									reducedPolling={flowJobIds?.flowJobs.length && flowJobIds?.flowJobs.length > 20}
+									isForloopSelected={forloop_selected == loopJobId &&
+										(innerModule?.type == 'forloopflow' || innerModule?.type == 'whileloopflow')}
+									reducedPolling={reducedPolling ||
+										(flowJobIds?.flowJobs.length && flowJobIds?.flowJobs.length > 20)}
 									{workspaceId}
 									jobId={loopJobId}
 									on:jobsLoaded={(e) => {
@@ -723,12 +884,15 @@ let wrapperHeight = 0;
 									<div class="border p-6" class:hidden={retry_selected != failedRetry}>
 										<svelte:self
 											{globalRefreshes}
-											bind:refresh={recursiveRefresh[failedRetry]}
+											parentRecursiveRefresh={recursiveRefresh}
 											{childFlow}
 											globalModuleStates={[localModuleStates, ...globalModuleStates]}
 											globalDurationStatuses={[localDurationStatuses, ...globalDurationStatuses]}
-											render={failedRetry == retry_selected}
-											reducedPolling={false}
+											{prefix}
+											{subflowParentsGlobalModuleStates}
+											{subflowParentsDurationStatuses}
+											render={failedRetry == retry_selected && render}
+											{reducedPolling}
 											{workspaceId}
 											jobId={failedRetry}
 										/>
@@ -739,12 +903,25 @@ let wrapperHeight = 0;
 								{#if job.raw_flow?.modules[i]?.value.type == 'flow'}
 									<svelte:self
 										{globalRefreshes}
-										bind:refresh={recursiveRefresh[mod.job ?? '']}
+										parentRecursiveRefresh={recursiveRefresh}
 										globalModuleStates={[]}
 										globalDurationStatuses={[]}
+										prefix={buildPrefix(prefix, mod.id ?? '')}
+										subflowParentsGlobalModuleStates={[
+											localModuleStates,
+											...globalModuleStates,
+											...subflowParentsGlobalModuleStates
+										]}
+										subflowParentsDurationStatuses={[
+											localDurationStatuses,
+											...globalDurationStatuses,
+											...subflowParentsDurationStatuses
+										]}
 										render={selected == 'sequence' && render}
 										{workspaceId}
 										jobId={mod.job}
+										{reducedPolling}
+										isSubflow
 										childFlow
 										on:jobsLoaded={(e) => {
 											let { force, job } = e.detail
@@ -756,13 +933,17 @@ let wrapperHeight = 0;
 								{:else}
 									<svelte:self
 										{globalRefreshes}
-										bind:refresh={recursiveRefresh[mod.job ?? '']}
+										parentRecursiveRefresh={recursiveRefresh}
 										{childFlow}
 										globalModuleStates={[localModuleStates, ...globalModuleStates]}
 										globalDurationStatuses={[localDurationStatuses, ...globalDurationStatuses]}
 										render={selected == 'sequence' && render}
 										{workspaceId}
+										{prefix}
+										{subflowParentsGlobalModuleStates}
+										{subflowParentsDurationStatuses}
 										jobId={mod.job}
+										{reducedPolling}
 										innerModule={mod.flow_jobs ? job.raw_flow?.modules[i]?.value : undefined}
 										flowJobIds={mod.flow_jobs
 											? {
@@ -815,10 +996,12 @@ let wrapperHeight = 0;
 						</div>
 
 						<FlowGraphV2
+							triggerNode={true}
 							download={!hideDownloadInGraph}
 							minHeight={wrapperHeight}
 							success={jobId != undefined && isSuccess(job?.['success'])}
 							flowModuleStates={$localModuleStates}
+							bind:expandedSubflows
 							on:select={(e) => {
 								if (rightColumnSelect != 'node_definition') {
 									rightColumnSelect = 'node_status'
@@ -842,22 +1025,38 @@ let wrapperHeight = 0;
 									selectedNode = e.detail.id
 								}
 							}}
-							on:selectedIteration={(e) => {
+							on:selectedIteration={async (e) => {
 								let detail = e.detail
+								if (detail.manuallySet) {
+									let rootJobId = detail.id
+									await globalRefreshes?.[detail.moduleId]?.(true, rootJobId)
 
-								setModuleState(detail.moduleId, {
-									selectedForloop: detail.id,
-									selectedForloopIndex: detail.index
-								})
-								globalRefreshes[detail.moduleId]?.({ job: detail.id, index: detail.index })
+									$localModuleStates[detail.moduleId] = {
+										...$localModuleStates[detail.moduleId],
+										selectedForloop: detail.id,
+										selectedForloopIndex: detail.index,
+										selectedForLoopSetManually: true
+									}
+
+									await tick()
+
+									await globalRefreshes?.[detail.moduleId]?.(false, rootJobId)
+								} else {
+									$localModuleStates[detail.moduleId] = {
+										...$localModuleStates[detail.moduleId],
+										selectedForLoopSetManually: false
+									}
+								}
 							}}
 							modules={job.raw_flow?.modules ?? []}
 							failureModule={job.raw_flow?.failure_module}
 							preprocessorModule={job.raw_flow?.preprocessor_module}
+							allowSimplifiedPoll={false}
+							{workspace}
 						/>
 					</div>
 					<div
-						class="border-l border-tertiary-inverse pt-1 overflow-auto min-h-[700px] flex flex-col z-0 h-full"
+						class="border-l border-tertiary-inverse pt-1 overflow-auto min-h-[700px] flex flex-col h-full"
 					>
 						<Tabs bind:selected={rightColumnSelect}>
 							{#if !hideTimeline}
@@ -878,7 +1077,10 @@ let wrapperHeight = 0;
 								aggregateWaitTime={job?.aggregate_wait_time_ms}
 								flowDone={job?.['success'] != undefined}
 								bind:this={flowTimeline}
-								flowModules={dfs(job.raw_flow?.modules ?? [], (x) => x.id)}
+								flowModules={allModulesForTimeline(
+									job?.raw_flow?.modules ?? [],
+									expandedSubflows ?? {}
+								)}
 								durationStatuses={localDurationStatuses}
 							/>
 						{:else if rightColumnSelect == 'node_status'}