[airflow] branch main updated: Update graph nodes with operator style attributes. (#32822)

[bbovenzi]

This is an automated email from the ASF dual-hosted git repository.

bbovenzi pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/airflow.git


The following commit(s) were added to refs/heads/main by this push:
     new 3bb63f1087 Update graph nodes with operator style attributes. (#32822)
3bb63f1087 is described below

commit 3bb63f1087176b24e9dc8f4cc51cf44ce9986d34
Author: Karthikeyan Singaravelan <tir.kar...@gmail.com>
AuthorDate: Thu Aug 3 14:36:11 2023 +0530

    Update graph nodes with operator style attributes. (#32822)
    
    * Update graph nodes with task style attributes.
    
    * Change operator text to a tag w/ colors
    
    ---------
    
    Co-authored-by: Brent Bovenzi <brent.bove...@gmail.com>
---
 airflow/www/static/js/dag/details/graph/Node.tsx | 27 +++++++++++++++++++++---
 airflow/www/static/js/types/index.ts             |  2 ++
 airflow/www/static/js/utils/graph.ts             |  2 +-
 3 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/airflow/www/static/js/dag/details/graph/Node.tsx 
b/airflow/www/static/js/dag/details/graph/Node.tsx
index 01c2d038f7..25827f2595 100644
--- a/airflow/www/static/js/dag/details/graph/Node.tsx
+++ b/airflow/www/static/js/dag/details/graph/Node.tsx
@@ -48,6 +48,8 @@ export interface CustomNodeProps {
   isActive?: boolean;
   setupTeardownType?: "setup" | "teardown";
   fullParentNode?: string;
+  labelStyle?: string;
+  style?: string;
 }
 
 export const BaseNode = ({
@@ -65,6 +67,8 @@ export const BaseNode = ({
     isOpen,
     isActive,
     setupTeardownType,
+    labelStyle,
+    style,
   },
 }: NodeProps<CustomNodeProps>) => {
   const { colors } = useTheme();
@@ -73,6 +77,7 @@ export const BaseNode = ({
 
   if (!task) return null;
 
+  const bg = isOpen ? "blackAlpha.50" : "white";
   const { isMapped } = task;
   const mappedStates = instance?.mappedStates;
 
@@ -82,7 +87,15 @@ export const BaseNode = ({
     ? `${label} [${instance ? totalTasks : " "}]`
     : label;
 
-  const bg = isOpen ? "blackAlpha.50" : "white";
+  let operatorTextColor = "";
+  let operatorBG = "";
+  if (style) {
+    [, operatorBG] = style.split(":");
+  }
+
+  if (labelStyle) {
+    [, operatorTextColor] = labelStyle.split(":");
+  }
 
   return (
     <Tooltip
@@ -141,13 +154,21 @@ export const BaseNode = ({
             {!!instance && instance.state && (
               <Flex alignItems="center">
                 <SimpleStatus state={instance.state} />
-                <Text ml={2} color="gray.500" fontSize="sm">
+                <Text ml={2} color="gray.500" fontSize="md">
                   {instance.state}
                 </Text>
               </Flex>
             )}
             {task?.operator && (
-              <Text color="gray.500" fontWeight={400} fontSize="md">
+              <Text
+                fontWeight={400}
+                fontSize="md"
+                width="fit-content"
+                borderRadius={5}
+                bg={operatorBG}
+                color={operatorTextColor || "gray.500"}
+                px={1}
+              >
                 {task.operator}
               </Text>
             )}
diff --git a/airflow/www/static/js/types/index.ts 
b/airflow/www/static/js/types/index.ts
index 4fbb1b0ccc..478b04d4f6 100644
--- a/airflow/www/static/js/types/index.ts
+++ b/airflow/www/static/js/types/index.ts
@@ -120,6 +120,8 @@ interface DepNode {
     isOpen?: boolean;
     isJoinNode?: boolean;
     childCount?: number;
+    labelStyle: string;
+    style: string;
     setupTeardownType?: "setup" | "teardown";
   };
   children?: DepNode[];
diff --git a/airflow/www/static/js/utils/graph.ts 
b/airflow/www/static/js/utils/graph.ts
index ec38f87cf9..cd2af9cf4c 100644
--- a/airflow/www/static/js/utils/graph.ts
+++ b/airflow/www/static/js/utils/graph.ts
@@ -147,7 +147,7 @@ const generateGraph = ({
         childCount,
       },
       width: isJoinNode ? 10 : 200,
-      height: isJoinNode ? 10 : 60,
+      height: isJoinNode ? 10 : 70,
     };
   };