fix: fix flickering and unnecessary rerenders

Signed-off-by: Olga Nad <[email protected]>
flyteorg · May 12, 2022 · 98e870b · 98e870b
1 parent 10d6718
commit 98e870b
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 14 deletions.
diff --git a/...p/console/src/components/Executions/ExecutionDetails/NodeExecutionDetailsPanelContent.tsx b/...p/console/src/components/Executions/ExecutionDetails/NodeExecutionDetailsPanelContent.tsx
@@ -340,7 +340,7 @@ export const NodeExecutionDetailsPanelContent: React.FC<NodeExecutionDetailsProp
   const statusContent = nodeExecution ? (
     <div className={styles.statusContainer}>
       <div className={styles.statusHeaderContainer}>
-        <ExecutionStatusBadge phase={nodeExecution?.closure.phase} type="node" />
+        <ExecutionStatusBadge phase={nodeExecution.closure.phase} type="node" />
         {isRunningPhase && (
           <InfoIcon className={styles.reasonsIcon} onClick={handleReasonsVisibility} />
         )}

diff --git a/packages/zapp/console/src/components/flytegraph/ReactFlow/ReactFlowGraphComponent.tsx b/packages/zapp/console/src/components/flytegraph/ReactFlow/ReactFlowGraphComponent.tsx
@@ -17,13 +17,20 @@ const nodeExecutionStatusChanged = (previous, nodeExecutionsById) => {
   return false;
 };
 
-const nodeExecutionResourcesChanged = (previous, nodeExecutionsById) => {
+const nodeExecutionLogsChanged = (previous, nodeExecutionsById) => {
   for (const exe in nodeExecutionsById) {
-    const oldStatus = previous[exe]?.logsByPhase;
-    const newStatus = nodeExecutionsById[exe]?.logsByPhase;
-    if (oldStatus !== newStatus) {
+    const oldLogs = previous[exe]?.logsByPhase ?? new Map();
+    const newLogs = nodeExecutionsById[exe]?.logsByPhase ?? new Map();
+    if (oldLogs.size !== newLogs.size) {
       return true;
     }
+    for (const phase in newLogs) {
+      const oldNumOfLogs = oldLogs.get(phase)?.length ?? 0;
+      const newNumOfLogs = newLogs.get(phase)?.length ?? 0;
+      if (oldNumOfLogs !== newNumOfLogs) {
+        return true;
+      }
+    }
   }
   return false;
 };
@@ -53,7 +60,7 @@ const ReactFlowGraphComponent = (props) => {
     onPhaseSelectionChanged,
     rfGraphJson: null,
   });
-
+  // const [nodeExecutionUpdateCount, setNodeExecutionUpdateCount] = useState<number>(0);
   const onAddNestedView = (view) => {
     const currentView = state.currentNestedView[view.parent] || [];
     const newView = {
@@ -68,7 +75,7 @@ const ReactFlowGraphComponent = (props) => {
   const onRemoveNestedView = (viewParent, viewIndex) => {
     const currentNestedView: any = { ...state.currentNestedView };
     currentNestedView[viewParent] = currentNestedView[viewParent]?.filter(
-      (item, i) => i <= viewIndex,
+      (_item, i) => i <= viewIndex,
     );
     if (currentNestedView[viewParent]?.length < 1) {
       delete currentNestedView[viewParent];
@@ -85,21 +92,33 @@ const ReactFlowGraphComponent = (props) => {
       nodeExecutionsById: state.nodeExecutionsById,
       onNodeSelectionChanged: state.onNodeSelectionChanged,
       onPhaseSelectionChanged: state.onPhaseSelectionChanged,
-      onAddNestedView: onAddNestedView,
-      onRemoveNestedView: onRemoveNestedView,
+      onAddNestedView,
+      onRemoveNestedView,
       currentNestedView: state.currentNestedView,
       maxRenderDepth: 1,
     } as ConvertDagProps);
   };
 
   useEffect(() => {
     const newRFGraphData = buildReactFlowGraphData();
+    // console.log('CLO ~ useEffect ~ newRFGraphData', newRFGraphData);
     setState((state) => ({
       ...state,
       rfGraphJson: newRFGraphData,
     }));
   }, [state.currentNestedView, state.nodeExecutionsById]);
 
+  // useEffect(() => {
+  //   if (nodeExecutionUpdateCount < 2) {
+  //     const newRFGraphData = buildReactFlowGraphData();
+  //     setState((state) => ({
+  //       ...state,
+  //       rfGraphJson: newRFGraphData,
+  //     }));
+  //     setNodeExecutionUpdateCount(nodeExecutionUpdateCount + 1);
+  //   }
+  // }, [state.nodeExecutionsById]);
+
   useEffect(() => {
     if (graphNodeCountChanged(state.data, data)) {
       setState((state) => ({
@@ -109,20 +128,20 @@ const ReactFlowGraphComponent = (props) => {
     }
     if (
       nodeExecutionStatusChanged(state.nodeExecutionsById, nodeExecutionsById) ||
-      nodeExecutionResourcesChanged(state.nodeExecutionsById, nodeExecutionsById)
+      nodeExecutionLogsChanged(state.nodeExecutionsById, nodeExecutionsById)
     ) {
       setState((state) => ({
         ...state,
-        nodeExecutionsById: nodeExecutionsById,
+        nodeExecutionsById,
       }));
     }
   }, [data, nodeExecutionsById]);
 
   useEffect(() => {
     setState((state) => ({
       ...state,
-      onNodeSelectionChanged: onNodeSelectionChanged,
-      onPhaseSelectionChanged: onPhaseSelectionChanged,
+      onNodeSelectionChanged,
+      onPhaseSelectionChanged,
     }));
   }, [onNodeSelectionChanged, onPhaseSelectionChanged]);
 
@@ -141,7 +160,7 @@ const ReactFlowGraphComponent = (props) => {
       backgroundStyle,
       rfGraphJson: state.rfGraphJson,
       type: RFGraphTypes.main,
-      nodeExecutionsById: nodeExecutionsById,
+      nodeExecutionsById,
       currentNestedView: state.currentNestedView,
     };
     return (