Skip to content

Conversation

@andreahlert
Copy link
Contributor

@andreahlert andreahlert commented Feb 8, 2026

Related #28737.

This adds a small info icon (ℹ) next to the existing keyboard shortcut icon in the grid view. On hover, it displays a tooltip showing each DAG run type with its corresponding icon:

  • Scheduled
  • Manual
  • Backfill
  • Asset Triggered

The previous attempt (#51736) was closed due to performance issues with Chakra tooltips on large grids and bad UX with truncated markdown notes. This implementation keeps things simple by reusing the existing Tooltip component (same as the keyboard shortcut tooltip) and the RunTypeIcon component already used throughout the grid.

Note indicators were left out of scope since the grid API responses (GridRunsResponse, LightGridTaskInstanceSummary) don't include note fields.

Changes:

  • New GridLegend component in layouts/Details/Grid/GridLegend.tsx
  • Added GridLegend to PanelButtons.tsx (grid-only section)
  • Added legend translation key to dag.json

@guan404ming
Copy link
Member

guan404ming commented Feb 8, 2026

Could you help attach screenshot for your changes, thanks!

Copy link
Member

@pierrejeambrun pierrejeambrun left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice, tested locally looks good.

A few nits/adjustments before we can merge.

Screenshot 2026-02-11 at 21 01 29

"toggleGroup": "Toggle group"
}
},
"legend": "Run Type Legend"
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nit:

Suggested change
"legend": "Run Type Legend"
"runTypeLegend": "Run Type Legend"

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Your not using it, it should be above the run types description


const runTypes: Array<DAGRunResponse["run_type"]> = ["scheduled", "manual", "backfill", "asset_triggered"];

export const GridLegend = () => {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
export const GridLegend = () => {
export const RunTypeLegend = () => {

return (
<Tooltip
content={
<Box>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

here add "Run Type Legend"

@pierrejeambrun pierrejeambrun added this to the Airflow 3.1.8 milestone Feb 11, 2026
@pierrejeambrun pierrejeambrun added the backport-to-v3-1-test Mark PR with this label to backport to v3-1-test branch label Feb 11, 2026
@pierrejeambrun
Copy link
Member

pierrejeambrun commented Feb 11, 2026

Updated the PR description. Its part of #28737 but there are other items on the issue.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

area:translations area:UI Related to UI/UX. For Frontend Developers. backport-to-v3-1-test Mark PR with this label to backport to v3-1-test branch translation:default

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants