fix: toggle in timeline

Signed-off-by: Olga Nad <[email protected]>
flyteorg · Feb 6, 2023 · 42d2e25 · 42d2e25
1 parent 6a48658
commit 42d2e25
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 66 deletions.
diff --git a/packages/console/src/components/Executions/ExecutionDetails/Timeline/ExecutionTimeline.tsx b/packages/console/src/components/Executions/ExecutionDetails/Timeline/ExecutionTimeline.tsx
@@ -6,17 +6,16 @@ import React, {
   useState,
 } from 'react';
 import { makeStyles, Typography } from '@material-ui/core';
-import {
-  isEndNode,
-  isStartNode,
-  isExpanded,
-} from 'components/WorkflowGraph/utils';
 import { tableHeaderColor } from 'components/Theme/constants';
 import { timestampToDate } from 'common/utils';
 import { dNode } from 'models/Graph/types';
 import { NodeExecutionsByIdContext } from 'components/Executions/contexts';
-import { fetchChildrenExecutions } from 'components/Executions/utils';
+import {
+  fetchChildrenExecutions,
+  searchNode,
+} from 'components/Executions/utils';
 import { useQueryClient } from 'react-query';
+import { eq, merge } from 'lodash';
 import { convertToPlainNodes } from './helpers';
 import { ChartHeader } from './ChartHeader';
 import { useScaleContext } from './scaleContext';
@@ -103,10 +102,16 @@ export const ExecutionTimeline: React.FC<ExProps> = ({
   const { chartInterval: chartTimeInterval } = useScaleContext();
 
   useEffect(() => {
-    setOriginalNodes(initialNodes);
-  }, [initialNodes]);
+    setOriginalNodes(ogn => {
+      const newNodes = merge(initialNodes, ogn);
+
+      if (!eq(newNodes, ogn)) {
+        return newNodes;
+      }
+
+      return ogn;
+    });
 
-  useEffect(() => {
     const plainNodes = convertToPlainNodes(originalNodes);
     const updatedShownNodesMap = plainNodes.map(node => {
       const execution = nodeExecutionsById[node.scopedId];
@@ -123,7 +128,7 @@ export const ExecutionTimeline: React.FC<ExProps> = ({
     if (firstStartedAt) {
       setStartedAt(timestampToDate(firstStartedAt));
     }
-  }, [originalNodes, nodeExecutionsById]);
+  }, [initialNodes, originalNodes, nodeExecutionsById]);
 
   const { items: barItemsData, totalDurationSec } = getChartDurationData(
     showNodes,
@@ -179,30 +184,7 @@ export const ExecutionTimeline: React.FC<ExProps> = ({
       setCurrentNodeExecutionsById,
       setShouldUpdate,
     );
-
-    const searchNode = (nodes: dNode[], nodeLevel: number) => {
-      if (!nodes || nodes.length === 0) {
-        return;
-      }
-      for (let i = 0; i < nodes.length; i++) {
-        const node = nodes[i];
-        if (isStartNode(node) || isEndNode(node)) {
-          continue;
-        }
-        if (
-          node.id === id &&
-          node.scopedId === scopedId &&
-          nodeLevel === level
-        ) {
-          nodes[i].expanded = !nodes[i].expanded;
-          return;
-        }
-        if (node.nodes.length > 0 && isExpanded(node)) {
-          searchNode(node.nodes, nodeLevel + 1);
-        }
-      }
-    };
-    searchNode(originalNodes, 0);
+    searchNode(originalNodes, 0, id, scopedId, level);
     setOriginalNodes([...originalNodes]);
   };
 

diff --git a/packages/console/src/components/Executions/ExecutionDetails/Timeline/TaskNames.tsx b/packages/console/src/components/Executions/ExecutionDetails/Timeline/TaskNames.tsx
@@ -1,7 +1,10 @@
 import React, { useContext } from 'react';
 import { IconButton, makeStyles, Theme, Tooltip } from '@material-ui/core';
 import { RowExpander } from 'components/Executions/Tables/RowExpander';
-import { getNodeTemplateName } from 'components/WorkflowGraph/utils';
+import {
+  getNodeTemplateName,
+  isExpanded,
+} from 'components/WorkflowGraph/utils';
 import { dNode } from 'models/Graph/types';
 import { PlayCircleOutline } from '@material-ui/icons';
 import { isParentNode } from 'components/Executions/utils';
@@ -87,7 +90,7 @@ export const TaskNames = React.forwardRef<HTMLDivElement, TaskNamesProps>(
                   {nodeExecution && isParentNode(nodeExecution) ? (
                     <RowExpander
                       ref={expanderRef as React.ForwardedRef<HTMLButtonElement>}
-                      expanded={node.expanded || false}
+                      expanded={isExpanded(node)}
                       onClick={() =>
                         onToggle(node.id, node.scopedId, nodeLevel)
                       }

diff --git a/packages/console/src/components/Executions/Tables/NodeExecutionsTable.tsx b/packages/console/src/components/Executions/Tables/NodeExecutionsTable.tsx
@@ -7,11 +7,6 @@ import { dNode } from 'models/Graph/types';
 import { NodeExecutionPhase } from 'models/Execution/enums';
 import { dateToTimestamp } from 'common/utils';
 import React, { useMemo, useEffect, useState, useContext } from 'react';
-import {
-  isEndNode,
-  isExpanded,
-  isStartNode,
-} from 'components/WorkflowGraph/utils';
 import { useQueryClient } from 'react-query';
 import { merge, eq } from 'lodash';
 import { ExecutionsTableHeader } from './ExecutionsTableHeader';
@@ -23,7 +18,7 @@ import { convertToPlainNodes } from '../ExecutionDetails/Timeline/helpers';
 import { useNodeExecutionContext } from '../contextProvider/NodeExecutionDetails';
 import { NodeExecutionRow } from './NodeExecutionRow';
 import { useNodeExecutionFiltersState } from '../filters/useExecutionFiltersState';
-import { fetchChildrenExecutions } from '../utils';
+import { fetchChildrenExecutions, searchNode } from '../utils';
 
 interface NodeExecutionsTableProps {
   initialNodes: dNode[];
@@ -106,30 +101,7 @@ export const NodeExecutionsTable: React.FC<NodeExecutionsTableProps> = ({
       setCurrentNodeExecutionsById,
       setShouldUpdate,
     );
-
-    const searchNode = (nodes: dNode[], nodeLevel: number) => {
-      if (!nodes || nodes.length === 0) {
-        return;
-      }
-      for (let i = 0; i < nodes.length; i++) {
-        const node = nodes[i];
-        if (isStartNode(node) || isEndNode(node)) {
-          continue;
-        }
-        if (
-          node.id === id &&
-          node.scopedId === scopedId &&
-          nodeLevel === level
-        ) {
-          nodes[i].expanded = !nodes[i].expanded;
-          return;
-        }
-        if (node.nodes.length > 0 && isExpanded(node)) {
-          searchNode(node.nodes, nodeLevel + 1);
-        }
-      }
-    };
-    searchNode(originalNodes, 0);
+    searchNode(originalNodes, 0, id, scopedId, level);
     setOriginalNodes([...originalNodes]);
   };
 

diff --git a/packages/console/src/components/Executions/utils.ts b/packages/console/src/components/Executions/utils.ts
@@ -1,4 +1,9 @@
 import { durationToMilliseconds, timestampToDate } from 'common/utils';
+import {
+  isEndNode,
+  isExpanded,
+  isStartNode,
+} from 'components/WorkflowGraph/utils';
 import { clone, isEqual, keyBy, merge } from 'lodash';
 import {
   runningExecutionStates,
@@ -19,6 +24,7 @@ import {
   NodeExecutionIdentifier,
   TaskExecution,
 } from 'models/Execution/types';
+import { dNode } from 'models/Graph/types';
 import { CompiledNode } from 'models/Node/types';
 import { QueryClient } from 'react-query';
 import {
@@ -215,6 +221,31 @@ export function getNodeFrontendPhase(
     : phase;
 }
 
+export function searchNode(
+  nodes: dNode[],
+  nodeLevel: number,
+  id: string,
+  scopedId: string,
+  level: number,
+) {
+  if (!nodes || nodes.length === 0) {
+    return;
+  }
+  for (let i = 0; i < nodes.length; i++) {
+    const node = nodes[i];
+    if (isStartNode(node) || isEndNode(node)) {
+      continue;
+    }
+    if (node.id === id && node.scopedId === scopedId && nodeLevel === level) {
+      nodes[i].expanded = !nodes[i].expanded;
+      return;
+    }
+    if (node.nodes.length > 0 && isExpanded(node)) {
+      searchNode(node.nodes, nodeLevel + 1, id, scopedId, level);
+    }
+  }
+}
+
 export async function fetchChildrenExecutions(
   queryClient: QueryClient,
   scopedId: string,