From 64dc90bf25302223296508dfb4fd292ec8402bd7 Mon Sep 17 00:00:00 2001
From: Olga Nad <olga@union.ai>
Date: Mon, 18 Apr 2022 12:08:53 -0500
Subject: [PATCH 1/2] feat: add cache icons for cached tasks in graph view

Signed-off-by: Olga Nad <olga@union.ai>
---
 .../ExecutionDetails/ExecutionMetadata.tsx    |  2 +-
 src/components/flytegraph/Graph.tsx           | 15 -----------
 .../ReactFlow/customNodeComponents.tsx        | 25 ++++++++++++++++++-
 .../ReactFlow/transformDAGToReactFlowV2.tsx   | 11 +++++---
 src/components/flytegraph/ReactFlow/types.ts  |  2 ++
 src/components/flytegraph/ReactFlow/utils.tsx |  2 ++
 6 files changed, 37 insertions(+), 20 deletions(-)
 delete mode 100644 src/components/flytegraph/Graph.tsx

diff --git a/src/components/Executions/ExecutionDetails/ExecutionMetadata.tsx b/src/components/Executions/ExecutionDetails/ExecutionMetadata.tsx
index 48f95266e..46ad0b29e 100644
--- a/src/components/Executions/ExecutionDetails/ExecutionMetadata.tsx
+++ b/src/components/Executions/ExecutionDetails/ExecutionMetadata.tsx
@@ -23,7 +23,7 @@ const useStyles = makeStyles((theme: Theme) => {
       position: 'relative',
     },
     detailsContainer: {
-      alignItems: 'center',
+      alignItems: 'start',
       display: 'flex',
       flex: '0 1 auto',
       paddingTop: theme.spacing(3),
diff --git a/src/components/flytegraph/Graph.tsx b/src/components/flytegraph/Graph.tsx
deleted file mode 100644
index 4b37d1478..000000000
--- a/src/components/flytegraph/Graph.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-// import * as React from 'react';
-// import ReactFlowGraphComponent from './ReactFlow/ReactFlowGraphComponent';
-// import { dNode } from 'models/Graph/types';
-
-// export class Graph<T> extends React.Component<dNode> {
-//     public render() {
-//         const { data, onNodeSelectionChanged } = this.props;
-//         return (
-//             <ReactFlowGraphComponent
-//                 data={data}
-//                 onNodeSelectionChanged={onNodeSelectionChanged}
-//             />
-//         );
-//     }
-// }
diff --git a/src/components/flytegraph/ReactFlow/customNodeComponents.tsx b/src/components/flytegraph/ReactFlow/customNodeComponents.tsx
index d91048b2c..9e88f56c3 100644
--- a/src/components/flytegraph/ReactFlow/customNodeComponents.tsx
+++ b/src/components/flytegraph/ReactFlow/customNodeComponents.tsx
@@ -2,6 +2,9 @@ import * as React from 'react';
 import { useState, useEffect } from 'react';
 import { Handle, Position } from 'react-flow-renderer';
 import { dTypes } from 'models/Graph/types';
+import CachedOutlined from '@material-ui/icons/CachedOutlined';
+import { CatalogCacheStatus } from 'models/Execution/enums';
+import { PublishedWithChangesOutlined } from 'components/common/PublishedWithChanges';
 import {
   COLOR_TASK_TYPE,
   COLOR_GRAPH_BACKGROUND,
@@ -226,6 +229,12 @@ export const ReactFlowCustomTaskNode = ({ data }: any) => {
     padding: '.1rem .2rem',
     fontSize: '.3rem',
   };
+  const cacheIconStyles: React.CSSProperties = {
+    width: '8px',
+    height: '8px',
+    marginLeft: '4px',
+    color: COLOR_GRAPH_BACKGROUND,
+  };
 
   const handleClick = (_e) => {
     setSelectedNode(true);
@@ -238,10 +247,24 @@ export const ReactFlowCustomTaskNode = ({ data }: any) => {
       </div>
     );
   };
+
+  const renderCacheIcon = (cacheStatus) => {
+    if (cacheStatus === CatalogCacheStatus.CACHE_HIT) {
+      return <CachedOutlined style={cacheIconStyles} />;
+    }
+    if (cacheStatus === CatalogCacheStatus.CACHE_POPULATED) {
+      return <PublishedWithChangesOutlined style={cacheIconStyles} />;
+    }
+    return null;
+  };
+
   return (
     <div onClick={handleClick}>
       {data.taskType ? renderTaskType() : null}
-      <div style={styles}>{data.text}</div>
+      <div style={styles}>
+        {data.text}
+        {renderCacheIcon(data.cacheStatus)}
+      </div>
       {renderDefaultHandles(
         data.scopedId,
         getGraphHandleStyle('source'),
diff --git a/src/components/flytegraph/ReactFlow/transformDAGToReactFlowV2.tsx b/src/components/flytegraph/ReactFlow/transformDAGToReactFlowV2.tsx
index de7f3c991..1da17bdc7 100644
--- a/src/components/flytegraph/ReactFlow/transformDAGToReactFlowV2.tsx
+++ b/src/components/flytegraph/ReactFlow/transformDAGToReactFlowV2.tsx
@@ -1,6 +1,6 @@
 import { dEdge, dNode, dTypes } from 'models/Graph/types';
 import { Edge, Node, Position } from 'react-flow-renderer';
-import { NodeExecutionPhase } from 'models/Execution/enums';
+import { CatalogCacheStatus, NodeExecutionPhase } from 'models/Execution/enums';
 import { createDebugLogger } from 'common/log';
 import { ReactFlowGraphConfig } from './utils';
 import { ConvertDagProps } from './types';
@@ -77,13 +77,18 @@ export const buildReactFlowDataProps = (props: BuildDataProps) => {
   };
   const nodeExecutionStatus = mapNodeExecutionStatus();
 
+  const cacheStatus: CatalogCacheStatus =
+    nodeExecutionsById[node.scopedId]?.closure.taskNodeMetadata?.cacheStatus ??
+    CatalogCacheStatus.CACHE_DISABLED;
+
   const dataProps = {
-    nodeExecutionStatus: nodeExecutionStatus,
+    nodeExecutionStatus,
     text: displayName,
     handles: [],
     nodeType: node.type,
     scopedId: node.scopedId,
-    taskType: taskType,
+    taskType,
+    cacheStatus,
     onNodeSelectionChanged: () => {
       if (onNodeSelectionChanged) {
         onNodeSelectionChanged([node.scopedId]);
diff --git a/src/components/flytegraph/ReactFlow/types.ts b/src/components/flytegraph/ReactFlow/types.ts
index 28ebe1c33..328c89a8b 100644
--- a/src/components/flytegraph/ReactFlow/types.ts
+++ b/src/components/flytegraph/ReactFlow/types.ts
@@ -1,3 +1,4 @@
+import { CatalogCacheStatus } from 'models/Execution/enums';
 import { NodeExecutionsById } from 'models/Execution/types';
 import { dNode, dTypes } from 'models/Graph/types';
 import { HandleProps } from 'react-flow-renderer';
@@ -72,6 +73,7 @@ export interface RFCustomData {
   scopedId: string;
   dag: any;
   taskType?: dTypes;
+  cacheStatus?: CatalogCacheStatus;
   onNodeSelectionChanged?: any;
   onAddNestedView: any;
   onRemoveNestedView: any;
diff --git a/src/components/flytegraph/ReactFlow/utils.tsx b/src/components/flytegraph/ReactFlow/utils.tsx
index 23e459f26..025c8acdd 100644
--- a/src/components/flytegraph/ReactFlow/utils.tsx
+++ b/src/components/flytegraph/ReactFlow/utils.tsx
@@ -167,6 +167,8 @@ export const getGraphNodeStyle = (
     width: 'auto',
     zIndex: 100000,
     position: 'relative',
+    display: 'flex',
+    alignItems: 'center',
   };
 
   const nestedPoint = {

From 1ab2b6d8ee49ca6216cb8a3f70b22de7b8a222fe Mon Sep 17 00:00:00 2001
From: Olga Nad <olga@union.ai>
Date: Mon, 18 Apr 2022 15:00:44 -0500
Subject: [PATCH 2/2] feat: address pr feedback

Signed-off-by: Olga Nad <olga@union.ai>
---
 .../flytegraph/ReactFlow/customNodeComponents.tsx  | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/components/flytegraph/ReactFlow/customNodeComponents.tsx b/src/components/flytegraph/ReactFlow/customNodeComponents.tsx
index 9e88f56c3..ca755503e 100644
--- a/src/components/flytegraph/ReactFlow/customNodeComponents.tsx
+++ b/src/components/flytegraph/ReactFlow/customNodeComponents.tsx
@@ -233,6 +233,7 @@ export const ReactFlowCustomTaskNode = ({ data }: any) => {
     width: '8px',
     height: '8px',
     marginLeft: '4px',
+    marginTop: '1px',
     color: COLOR_GRAPH_BACKGROUND,
   };
 
@@ -249,13 +250,14 @@ export const ReactFlowCustomTaskNode = ({ data }: any) => {
   };
 
   const renderCacheIcon = (cacheStatus) => {
-    if (cacheStatus === CatalogCacheStatus.CACHE_HIT) {
-      return <CachedOutlined style={cacheIconStyles} />;
+    switch (cacheStatus) {
+      case CatalogCacheStatus.CACHE_HIT:
+        return <CachedOutlined style={cacheIconStyles} />;
+      case CatalogCacheStatus.CACHE_POPULATED:
+        return <PublishedWithChangesOutlined style={cacheIconStyles} />;
+      default:
+        return null;
     }
-    if (cacheStatus === CatalogCacheStatus.CACHE_POPULATED) {
-      return <PublishedWithChangesOutlined style={cacheIconStyles} />;
-    }
-    return null;
   };
 
   return (