This is an automated email from the ASF dual-hosted git repository.
kaxilnaik 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 dfaf602bfaa UI: Fix operator overflow in graph (#50252)
dfaf602bfaa is described below
commit dfaf602bfaaa9deeed83ada44fef9dd48296d4aa
Author: Brent Bovenzi <[email protected]>
AuthorDate: Tue May 6 11:54:52 2025 -0400
UI: Fix operator overflow in graph (#50252)
---
.../airflow/ui/src/components/Graph/TaskNode.tsx | 91 ++++++++++++----------
1 file changed, 49 insertions(+), 42 deletions(-)
diff --git a/airflow-core/src/airflow/ui/src/components/Graph/TaskNode.tsx
b/airflow-core/src/airflow/ui/src/components/Graph/TaskNode.tsx
index f34f2420d8f..13f158b5398 100644
--- a/airflow-core/src/airflow/ui/src/components/Graph/TaskNode.tsx
+++ b/airflow-core/src/airflow/ui/src/components/Graph/TaskNode.tsx
@@ -63,7 +63,7 @@ export const TaskNode = ({
}}
taskInstance={taskInstance}
>
- <Flex
+ <Box
// Alternate background color for nested open groups
bg={isOpen && depth !== undefined && depth % 2 === 0 ? "bg.muted"
: "bg"}
borderColor={
@@ -73,51 +73,58 @@ export const TaskNode = ({
borderWidth={isSelected ? 4 : 2}
height={`${height + (isSelected ? 4 : 0)}px`}
justifyContent="space-between"
+ overflow="hidden"
+ position="relative"
px={isSelected ? 1 : 2}
py={isSelected ? 0 : 1}
width={`${width + (isSelected ? 4 : 0)}px`}
>
- <Box>
- <LinkOverlay asChild>
- <TaskLink
- childCount={taskInstance?.task_count}
- id={id}
- isGroup={isGroup}
- isMapped={isMapped}
- isOpen={isOpen}
- label={label}
- setupTeardownType={setupTeardownType}
- />
- </LinkOverlay>
- <Text color="fg.muted" fontSize="sm" textTransform="capitalize">
- {isGroup ? "Task Group" : operator}
- </Text>
- {taskInstance === undefined ? undefined : (
- <HStack>
- <StateBadge fontSize="xs" state={taskInstance.state}>
- {taskInstance.state}
- </StateBadge>
- {taskInstance.try_number > 1 ? <CgRedo /> : undefined}
- </HStack>
- )}
- </Box>
- <Box>
- {isGroup ? (
- <Button
- colorPalette="blue"
- cursor="pointer"
- height="inherit"
- onClick={onClick}
- pb={2}
- pr={0}
- variant="plain"
- >
- {isOpen ? "- " : "+ "}
- {pluralize("task", childCount, undefined, false)}
- </Button>
- ) : undefined}
- </Box>
- </Flex>
+ <LinkOverlay asChild>
+ <TaskLink
+ childCount={taskInstance?.task_count}
+ id={id}
+ isGroup={isGroup}
+ isMapped={isMapped}
+ isOpen={isOpen}
+ label={label}
+ setupTeardownType={setupTeardownType}
+ />
+ </LinkOverlay>
+ <Text
+ color="fg.muted"
+ fontSize="sm"
+ overflow="hidden"
+ textOverflow="ellipsis"
+ textTransform="capitalize"
+ whiteSpace="nowrap"
+ >
+ {isGroup ? "Task Group" : operator}
+ </Text>
+ {taskInstance === undefined ? undefined : (
+ <HStack>
+ <StateBadge fontSize="xs" state={taskInstance.state}>
+ {taskInstance.state}
+ </StateBadge>
+ {taskInstance.try_number > 1 ? <CgRedo /> : undefined}
+ </HStack>
+ )}
+ {isGroup ? (
+ <Button
+ colorPalette="blue"
+ cursor="pointer"
+ height={8}
+ onClick={onClick}
+ position="absolute"
+ px={1}
+ right={0}
+ top={0}
+ variant="plain"
+ >
+ {isOpen ? "- " : "+ "}
+ {pluralize("task", childCount, undefined, false)}
+ </Button>
+ ) : undefined}
+ </Box>
</TaskInstanceTooltip>
{Boolean(isMapped) || Boolean(isGroup && !isOpen) ? (
<>
