fix: Tasks status out of sync

packages/console/src/components/Executions/ExecutionDetails/NodeExecutionDetailsPanelContent.tsx

@@ -257,9 +257,11 @@ export const NodeExecutionDetailsPanelContent: React.FC<
     useNodeExecutionsById();
 
   const nodeExecution = useMemo(() => {
-    return values(nodeExecutionsById).find(node =>
+    const finalExecution = values(nodeExecutionsById).find(node =>
       isEqual(node.id, nodeExecutionId),
     );
+
+    return finalExecution;
   }, [nodeExecutionId, nodeExecutionsById]);
 
   const [isReasonsVisible, setReasonsVisible] = useState<boolean>(false);
@@ -299,7 +301,7 @@ export const NodeExecutionDetailsPanelContent: React.FC<
     return () => {
       isCurrent = false;
     };
-  });
+  }, [nodeExecution]);
 
   useEffect(() => {
     let isCurrent = true;
@@ -408,7 +410,7 @@ export const NodeExecutionDetailsPanelContent: React.FC<
       isGateNode,
     );
     return computedPhase;
-  }, [nodeExecution?.closure.phase, isGateNode]);
+  }, [nodeExecution, isGateNode]);
 
   const isRunningPhase = useMemo(
     () =>

packages/console/src/components/Executions/ExecutionDetails/Timeline/TimelineChart/utils.ts

@@ -71,7 +71,7 @@ export const parseSpanData = (
 export const getOperationsFromWorkflowExecutionMetrics = (
   data: Admin.WorkflowExecutionGetMetricsResponse,
 ): string[] => {
-  const operationIds = uniq(
+  const operationIds = uniq<string>(
     traverse(data)
       .paths()
       .filter(path => path[path.length - 1] === 'operationId')
@@ -173,7 +173,7 @@ export const getDuration = (
 export const getExecutionMetricsOperationIds = (
   data: Admin.WorkflowExecutionGetMetricsResponse,
 ): string[] => {
-  const operationIds = uniq(
+  const operationIds = uniq<string>(
     traverse(data)
       .paths()
       .filter(path => path[path.length - 1] === 'operationId')

packages/console/src/components/Executions/contextProvider/NodeExecutionDetails/WorkflowNodeExecutionsProvider.tsx

@@ -1,6 +1,5 @@
 import React, {
   PropsWithChildren,
-  useCallback,
   useContext,
   useEffect,
   useState,
@@ -11,7 +10,7 @@ import {
   NodeExecutionsById,
   WorkflowNodeExecutionsContext,
 } from 'components/Executions/contexts';
-import { isEqual, keyBy, merge, mergeWith } from 'lodash';
+import { isEqual, keyBy, merge, mergeWith, cloneDeep } from 'lodash';
 import { dNode } from 'models/Graph/types';
 import {
   NodeExecutionDynamicWorkflowQueryResult,
@@ -187,33 +186,31 @@ export const WorkflowNodeExecutionsProvider = ({
     }
   }, [shouldUpdate]);
 
-  const setCurrentNodeExecutionsById = useCallback(
-    (
-      newNodeExecutionsById: NodeExecutionsById,
-      checkForDynamicParents?: boolean,
-    ): void => {
-      setNodeExecutionsById(prev => {
-        const newNodes = mergeWith(
-          { ...prev },
-          { ...newNodeExecutionsById },
-          mergeNodeExecutions,
-        );
-        if (
-          JSON.stringify(prev, mapStringifyReplacer) ===
-          JSON.stringify(newNodes, mapStringifyReplacer)
-        ) {
-          return prev;
-        }
+  const setCurrentNodeExecutionsById = (
+    newNodeExecutionsById: NodeExecutionsById,
+    checkForDynamicParents?: boolean,
+  ): void => {
+    const mergedNodes = mergeWith(
+      cloneDeep(nodeExecutionsById),
+      cloneDeep(newNodeExecutionsById),
+      mergeNodeExecutions,
+    );
 
-        if (checkForDynamicParents) {
-          setShouldUpdate(true);
-        }
+    setNodeExecutionsById(prev => {
+      if (
+        JSON.stringify(prev, mapStringifyReplacer) ===
+        JSON.stringify(mergedNodes, mapStringifyReplacer)
+      ) {
+        return prev;
+      }
 
-        return newNodes;
-      });
-    },
-    [],
-  );
+      if (checkForDynamicParents) {
+        setShouldUpdate(true);
+      }
+
+      return mergedNodes;
+    });
+  };
 
   return (
     <WorkflowNodeExecutionsContext.Provider

packages/console/src/components/Executions/contextProvider/NodeExecutionDetails/utils.ts

@@ -18,20 +18,15 @@ export const stringifyIsEqual = (a: any, b: any) => {
   );
 };
 
-export const mergeNodeExecutions = (val, srcVal, _key) => {
+export const mergeNodeExecutions = (val, srcVal, _topkey) => {
   const retVal = mergeWith(val, srcVal, (target, src, _key) => {
     if (!target) {
       return src;
     }
-    const clonedTarget = cloneDeep(target);
-    const clonedSrc = cloneDeep(src);
-    if (clonedSrc instanceof Map) {
-      return clonedSrc;
+    if (src instanceof Map) {
+      return src;
     }
-    const finaVal =
-      typeof clonedSrc === 'object'
-        ? merge(clonedTarget, clonedSrc)
-        : clonedSrc;
+    const finaVal = typeof src === 'object' ? merge(target, src) : src;
     return finaVal;
   });
   return retVal;

packages/console/src/components/WorkflowGraph/transformerWorkflowToDag.tsx

@@ -14,6 +14,7 @@ import {
 import { isParentNode } from 'components/Executions/utils';
 import { isStartOrEndNode } from 'models/Node/utils';
 import { NodeExecutionsById } from 'components/Executions/contexts';
+import { cloneDeep, values } from 'lodash';
 import {
   getDisplayName,
   getSubWorkflowFromId,
@@ -509,11 +510,14 @@ export interface TransformerWorkflowToDag {
 export const transformerWorkflowToDag = (
   workflow: CompiledWorkflowClosure,
   dynamicToMerge: any | null = null,
-  nodeExecutionsById = {},
+  inputNodeExecutionsById: NodeExecutionsById = {},
 ): TransformerWorkflowToDag => {
   const { primary } = workflow;
   const staticExecutionIdsMap = {};
 
+  // clone nodeExecutionsById to prevent mutation
+  const nodeExecutionsById = cloneDeep(inputNodeExecutionsById);
+
   const primaryWorkflowRoot = createDNode({
     compiledNode: {
       id: startNodeId,