Skip to content

UI: Highlight selected Grid task square - #70451

Merged
bbovenzi merged 2 commits into
apache:mainfrom
dheerajturaga:ui-highlight-selected-grid-task
Aug 4, 2026
Merged

bbovenzi merged 2 commits into
apache:mainfrom
dheerajturaga:ui-highlight-selected-grid-task

Conversation

@dheerajturaga

@dheerajturaga dheerajturaga commented Jul 25, 2026 •

Copy link
Copy Markdown
Member

Highlight the selected task instance square in Grid view so it is easier to identify the currently open task.

The highlight is scoped to the selected Dag run and task, so selecting a task no longer highlights the same task across every visible Dag run column. Dark mode uses a lighter outline color for better contrast.

Tests added for selected task highlighting, dark-mode outline token selection, different-task behavior, and same-task/different-run behavior.

before: (Hard to easily see when you have a lot of tasks)
image

After:
image


Was generative AI tooling used to co-author this PR?
  • Yes — Codex (GPT-5)

Generated-by: Codex (GPT-5) following the guidelines

@boring-cyborg boring-cyborg Bot added the area:UI Related to UI/UX. For Frontend Developers. label Jul 25, 2026

@shubhamraj-git shubhamraj-git left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Thanks for the changes..

The dark mode looks good, but the light mode is not that different from the original if we have lot of grids, maybe we need to increase the border.

Image

@dheerajturaga
dheerajturaga force-pushed the ui-highlight-selected-grid-task branch from 0ddeb7f to 276be1d Compare July 26, 2026 15:18
@dheerajturaga

Copy link
Copy Markdown
Member Author

Thanks for the changes..

The dark mode looks good, but the light mode is not that different from the original if we have lot of grids, maybe we need to increase the border.

Image

Make it thicker 2px
image

@bbovenzi

Copy link
Copy Markdown
Contributor

Adding a focus highlight makes sense. But why get rid of the row highlight?

@dheerajturaga

Copy link
Copy Markdown
Member Author

Adding a focus highlight makes sense. But why get rid of the row highlight?

Good catch, That wasnt my intent. Let me fix this

@dheerajturaga
dheerajturaga force-pushed the ui-highlight-selected-grid-task branch from 276be1d to f109b0f Compare July 29, 2026 20:02
@dheerajturaga

Copy link
Copy Markdown
Member Author

Adding a focus highlight makes sense. But why get rid of the row highlight?

Done!
image

@dheerajturaga dheerajturaga added the ready for maintainer review Set by triage when all criteria pass, or by the fork CI reconciler when fork CI is green. label Jul 29, 2026
@dheerajturaga dheerajturaga added this to the Airflow 3.3.1 milestone Jul 29, 2026
@vatsrahul1001

Copy link
Copy Markdown
Contributor

Moving to 3.4.0 as this new addition suits minot better

@dheerajturaga

Copy link
Copy Markdown
Member Author

@bbovenzi , @shubhamraj-git ok to merge?

@bbovenzi
bbovenzi merged commit 16df29a into apache:main Aug 4, 2026
169 of 170 checks passed
dabla pushed a commit to dabla/airflow that referenced this pull request Aug 14, 2026
* UI: Highlight selected Grid task square

* UI: Restore selected Grid row highlight
imrichardwu pushed a commit to imrichardwu/airflow that referenced this pull request Sep 11, 2026
* UI: Highlight selected Grid task square

* UI: Restore selected Grid row highlight
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

area:UI Related to UI/UX. For Frontend Developers. ready for maintainer review Set by triage when all criteria pass, or by the fork CI reconciler when fork CI is green.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants