Enhance note button visibility with highlighting when notes exist

[dheerajturaga]

• Add blue notification dot when DAG run or task instance has a note
• Fix state synchronization when switching between runs to maintain proper highlighting
• Improve user experience by making existing notes more discoverable in the UI

Without note:

With Note:

[jscheffl]

Oh, after I made earlier the PR #51764 which was debated and later reverted (partially) by @pierrejeambrun this is one alternative we can have a look.

I agreed with Pierre that the visibility of the note and the results in layout might need to be discussed. Unfortuantely I was distracted the last week and had no focus on creating an proposal. This PR could be one option to highlight that notes exist. Whereas still you would need to click to see it. I am still a bit in favor of directly displaying but also my proposal in #51859 was not rated positive.

[dheerajturaga]

@jscheffl, reviewing your PR, I think having the note directly displayed is much better! It helps identify runs with one click where current approach is 2 clicks. I have an issue where I want to add some notes/markers to be able to easily identify runs in a sea of dag runs. Having to click through every note button adds friction.

If we think this will take time, I would prefer my PR be considered as it addresses the visibility issue of the current notes atleast.

[pierrejeambrun]

I think there is two things that we can improve for note visibility:

1. Find a way to identify quickly which dag/ti contains a note across multiple runs/tis. In AF3 we had a small transparency marker on the grid to indicate that and I think it was a smart way of achieving it.

2. Find a way to display the note in a more natural way and drag attention of users to the note, so they do not miss it before performing any action on the TI or DagRun. |

For 1) I tend to think that the way we did it in AF2 was actually good, but I'm open to other suggestions.

For 2) I think that button coloring or some 'notification' marker on the button could drag user attention that there is a note here. Embedding the note directly in the main details tab is tricky for the reason mentioned in Jens PR. And if we end up putting it in a dedicated tab, it's still extra clicks to get there. For instance maybe a simple 'notification' indicator on the button, similarly to what github is doing could be nice:

[dheerajturaga]

I think there is two things that we can improve for note visibility:

1. Find a way to identify quickly which dag/ti contains a note across multiple runs/tis. In AF3 we had a small transparency marker on the grid to indicate that and I think it was a smart way of achieving it.
2. Find a way to display the note in a more natural way and drag attention of users to the note, so they do not miss it before performing any action on the TI or DagRun. |

For 1) I tend to think that the way we did it in AF2 was actually good, but I'm open to other suggestions.

For 2) I think that button coloring or some 'notification' marker on the button could drag user attention that there is a note here. Embedding the note directly in the main details tab is tricky for the reason mentioned in Jens PR. And if we end up putting it in a dedicated tab, it's still extra clicks to get there. For instance maybe a simple 'notification' indicator on the button, similarly to what github is doing could be nice:

For 1. Transparency marker is good, however AF2 also displayed the note in the dag run page which was very helpful personally. I do agree that pushing down the dag runs to accommodate the notes can get visually unappealing if the note is very large. I dont think these notes get large in general though...

For 2. The way github does notifications is not really eye catching. I really like the big colored buttons which are very obvious especially for things like "Note" because you want to invite viewers to see whats going on for that run. On that note I like github's way of highlighting PRs

Im open to any other suggestions to make this more visible

[pierrejeambrun]

I don't think that the whole button changing color fits supper well into the current UI, because buttons have consistent colors throughout the UI and having just one button yellow seems weird. Also for accessibility reason (for instance people that do not see colors very well), we try to avoid relying on only colors to implement a feature, another visual indicator could help.

[dheerajturaga]

@pierrejeambrun , I updated this to be similar to github, with a small blue notification icon

[dheerajturaga]

I don't think that the whole button changing color fits supper well into the current UI, because buttons have consistent colors throughout the UI and having just one button yellow seems weird. Also for accessibility reason (for instance people that do not see colors very well), we try to avoid relying on only colors to implement a feature, another visual indicator could help.

Fair enough, I updated the PR to align with what github is doing for notifications

[pierrejeambrun]

That looks cool 🎉

A few last adjustments to make.

[pierrejeambrun]

Can you also remove or update the PR description ? (screenshots)

[bbovenzi]

In addition to the little notification dot, what do we think of the github icon approach. Use PiNoteBlankLight and PiNoteLight?

[dheerajturaga]

@pierrejeambrun , I've incorporated all your suggestions. Please let me know if you think we need anything else

[dheerajturaga]

In addition to the little notification dot, what do we think of the github icon approach. Use PiNoteBlankLight and PiNoteLight?

@bbovenzi , Use this on the Add Note button you mean? Or do you mean like a translucent overlay ontop of the dag run column like how we had for airflow 2? ( like the image below?)

[bbovenzi]

@bbovenzi , Use this on the Add Note button you mean? Or do you mean like a translucent overlay ontop of the dag run column like how we had for airflow 2?

Just the button. With icons added to the grid view we removed the note indicator. It was too much going on in a small space.

[dheerajturaga]

@bbovenzi , Use this on the Add Note button you mean? Or do you mean like a translucent overlay ontop of the dag run column like how we had for airflow 2?

Just the button. With icons added to the grid view we removed the note indicator. It was too much going on in a small space.

Done! the note icon is now using PiNote icons

[dheerajturaga]

@pierrejeambrun, I tried your suggestion on relying on the hasConten. When you try to toggle between multiple tasks with/without notes it still seems to carry over the notification dot even when there isn't a note and is needing a page refresh to render correctly. The useEffect seems to be the only reliable way at least in my experiments. Do you think you can contribute a tweak here which I can test out? else if you think the useEffect here is acceptable let me know if we can merge.

[jscheffl]

Looks good to me. I assume just there is a bug with the note popup (not this PR).

note_text_bug-2025-08-16_12.16.41.mp4

Still I'd favor having the note presented w/o the need to have a click for a popup to have direct visibility (especially when scrolling through a number of tasks/dags... but my alternative proposal was not getting traction until now :-(

[dheerajturaga]

Looks good to me. I assume just there is a bug with the note popup (not this PR).

note_text_bug-2025-08-16_12.16.41.mp4
Still I'd favor having the note presented w/o the need to have a click for a popup to have direct visibility (especially when scrolling through a number of tasks/dags... but my alternative proposal was not getting traction until now :-(

I hear you, I prefer the note showing directly as well. Let me brainstorm on this on the side (in another pr) to see if we can do something similar to your original PR in a way that it doesn't disturb the layout. Meanwhile if these current changes are good with everyone lets merge them in.

[bbovenzi]

I agree. We can keep thinking of a UX that shows the notes without affecting the formatting of the whole page. But this PR is definitely an improvement