nathadfield opened a new pull request, #61854:
URL: https://github.com/apache/airflow/pull/61854
## Description
When a TaskGroup is collapsed or a mapped task is displayed in graph view,
the node previously showed a single aggregated state colour (e.g., "scheduled")
even when child tasks were in mixed states (`running`, `success`, `scheduled`,
etc.). This was misleading because `agg_state()` picks only the
highest-priority state from `state_priority`, so a group with 3 running, 4
scheduled, and 1 successful task would display as just `scheduled.`
This PR replaces the single-color indicator with a **multi-colored segmented
bar** that shows the proportional distribution of child task instance states.
It also adds a per-state breakdown to the tooltip when hovering over these
nodes.
No backend changes are required as the `child_states` data is already
available from the API via `LightGridTaskInstanceSummary.child_states`.
## Motivation
Users monitoring DAGs with complex task groups or large mapped tasks need to
quickly understand the state distribution across child tasks. The previous
single-color approach obscured this — a group could appear "scheduled" while
most children had already succeeded or some had failed. The segmented bar gives
an at-a-glance proportional view, and the enhanced tooltip provides the exact
counts.
## Implementation
### Segmented state bar
- New `SegmentedStateBar` component receives `child_states` (e.g.,
`{"running": 3, "scheduled": 4, "success": 1}`) from the task instance
- Filters out zero-count entries and sorts by state priority:
- Failure/error states first (`failed`, `upstream_failed`, `up_for_retry`,
`up_for_reschedule`)
- Active states (`running`, `restarting`, `deferred`)
- Pending states (`queued`, `scheduled`)
- Terminal states last (`success`, `skipped`, `removed`)
- Renders a proportional `Flex` row where each state gets a `Box` with
`flex={count}` for sizing
- Uses `minWidth="2px"` so small slices remain visible even when they
represent a tiny fraction
- Positioned via `mt="auto"` in the node's flex column, pushing it to the
bottom with natural spacing from the state badge above
- Falls back to a solid single-color bar when `child_states` is unavailable
but a task state exists, preserving existing behavior
- Renders nothing when there is no task instance data
### Tooltip enhancement
- When `child_states` is available, displays a color swatch, count, and
translated state label for each state
- Gives users exact numbers on hover rather than just the aggregated state
### Shared utilities
- `STATE_PRIORITY` constant and `sortStateEntries()` helper extracted to
`stateUtils.ts`
- Used by both the bar and the tooltip for consistent priority ordering
https://github.com/user-attachments/assets/f5552076-86e0-4df4-988f-34ea22b88b9a
## Generative AI Usage
**Was generative AI tooling used to co-author this PR?**
Yes
**Generated-by:** Claude Opus 4.6 following the [Airflow contribution
guidelines](https://github.com/apache/airflow/blob/main/contributing-docs/README.rst)
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
