Add resize function for Dag Documentation - #56344

Merged
bbovenzi merged 7 commits into
apache:mainfrom
RoyLee1224:doc-resize
Oct 16, 2025
Merged

Add resize function for Dag Documentation#56344
bbovenzi merged 7 commits into
apache:mainfrom
RoyLee1224:doc-resize

Conversation

@RoyLee1224

@RoyLee1224RoyLee1224 commented Oct 2, 2025•
edited by bbovenzi
Loading

Copy link
Copy Markdown
Contributor

Related

closes: #56325

Changes

  • Added react-resizable dependency to handle the resizing logic.
  • Set maxConstraints={[1200, 800]}, minConstraints={[512, 600]}
  • Improved the resize indicator visibility, as the default indicator was not easily noticeable.
  • Use brand.muted to align with Dag Note UI design

Screenshots

Before

current

After

resize.mp4

Default resize indicator

doc_before

Styled resize indicator

doc_after

^ Add meaningful description above
Read the Pull Request Guidelines for more information.
In case of fundamental code changes, an Airflow Improvement Proposal (AIP) is needed.
In case of a new dependency, check compliance with the ASF 3rd Party License Policy.
In case of backwards incompatible changes please leave a note in a newsfragment file, named {pr_number}.significant.rst or {issue_number}.significant.rst, in airflow-core/newsfragments.

@boring-cyborgboring-cyborgBot added the area:UI Related to UI/UX. For Frontend Developers. label Oct 2, 2025
@RoyLee1224

RoyLee1224 commented Oct 2, 2025

Copy link
Copy Markdown
ContributorAuthor

Should I modify Dag Note UI as well or save it to another PR?

@jscheffl

jscheffl commented Oct 2, 2025

Copy link
Copy Markdown
Contributor

Should I modify Dag Note UI as well or save it to another PR?

Would be great and of course can be another PR.

jscheffl
jscheffl reviewed Oct 2, 2025
View reviewed changes
Comment threadairflow-core/src/airflow/ui/src/components/DisplayMarkdownButton.tsx Outdated
@RoyLee1224

RoyLee1224 commented Oct 2, 2025•
edited
Loading

Copy link
Copy Markdown
ContributorAuthor

Update

  • make ResizableWrapper reusable for other dialogs
  • Add usePersistentResizableState hook to remember user preference for dialog size
resize_memorize.mp4

jscheffl
jscheffl approved these changes Oct 3, 2025
View reviewed changes

@jscheffljscheffl 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.

Looks good to me! Thanks for the persistence extension!

Before merge, maybe a second pair of review eyes?

pierrejeambrun
pierrejeambrun reviewed Oct 3, 2025
View reviewed changes

@pierrejeambrunpierrejeambrun left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

A few suggestions, tested locally and look great. Can't wait to see the same implemented for TI and DagRun notes.

Comment threadairflow-core/src/airflow/ui/src/components/ui/ResizableWrapper.tsx Outdated
Comment threadairflow-core/src/airflow/ui/src/components/DisplayMarkdownButton.tsx
Comment threadairflow-core/src/airflow/ui/src/components/DisplayMarkdownButton.tsx Outdated
Comment threadairflow-core/src/airflow/ui/src/utils/usePersistentResizableState.ts Outdated
Comment threadairflow-core/src/airflow/ui/src/utils/usePersistentResizableState.ts Outdated
Comment threadairflow-core/src/airflow/ui/src/components/ui/ResizableWrapper.tsx
@RoyLee1224

RoyLee1224 commented Oct 5, 2025•
edited
Loading

Copy link
Copy Markdown
ContributorAuthor

Follow up PR:

Add resize function for Dag Note

@bbovenzibbovenzi added this to the Airflow 3.1.1 milestone Oct 8, 2025
guan404ming
guan404ming approved these changes Oct 12, 2025
View reviewed changes

@guan404mingguan404ming left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Test and lgtm!

@bbovenzi
bbovenzi merged commit aab7f16 into apache:mainOct 16, 2025
57 checks passed
kaxil pushed a commit that referenced this pull request Oct 16, 2025
@RoyLee1224@kaxil
Add resize function for Dag Documentation (#56344)
910a923
* feat: Add dialog resize function
* feat: Memorize resize state
* refactor: replace inline style and use useLocalStorage
* fix: remove redundent style
* refactor: optimize state management
(cherry picked from commit aab7f16)
@RoyLee1224
RoyLee1224 deleted the doc-resize branch October 20, 2025 00:24
TyrellHaywood pushed a commit to TyrellHaywood/airflow that referenced this pull request Oct 22, 2025
@RoyLee1224@TyrellHaywood
Add resize function for Dag Documentation (apache#56344)
555a77e
* feat: Add dialog resize function
* feat: Memorize resize state
* refactor: replace inline style and use useLocalStorage
* fix: remove redundent style
* refactor: optimize state management
@RoyLee1224RoyLee1224 mentioned this pull request Nov 5, 2025
Merged
@potiukpotiuk mentioned this pull request Nov 8, 2025
Merged
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@pierrejeambrunpierrejeambrunpierrejeambrun left review comments
@jscheffljscheffljscheffl approved these changes
@bbovenzibbovenzibbovenzi approved these changes
@guan404mingguan404mingguan404ming approved these changes
@ryanahamiltonryanahamiltonAwaiting requested review from ryanahamiltonryanahamilton is a code owner
@shubhamraj-gitshubhamraj-gitAwaiting requested review from shubhamraj-gitshubhamraj-git is a code owner

Assignees

No one assigned

Labels

area:UIRelated to UI/UX. For Frontend Developers.

Projects

None yet

Milestone

Airflow 3.1.1

Development

Successfully merging this pull request may close these issues.

Add option to be able to modify how the Dag Documentation pop-up is displayed

5 participants

@RoyLee1224@jscheffl@bbovenzi@pierrejeambrun@guan404ming
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
Add resize function for Dag Documentation - #56344
Merged
bbovenzi merged 7 commits into
apache:mainfrom 
RoyLee1224:doc-resize
Oct 16, 2025
Merged
Add resize function for Dag Documentation#56344
bbovenzi merged 7 commits into
apache:mainfrom 
RoyLee1224:doc-resize
Conversation
@RoyLee1224
@RoyLee1224RoyLee1224
commented
Oct 2, 2025•

edited by bbovenzi

Loading

Copy link


Copy Markdown

Contributor
Related
closes: #56325
Changes
  • Added react-resizable dependency to handle the resizing logic.
  • Set maxConstraints={[1200, 800]}, minConstraints={[512, 600]}
  • Improved the resize indicator visibility, as the default indicator was not easily noticeable.
  • Use brand.muted to align with Dag Note UI design
Screenshots
Before
current
After
resize.mp4
Default resize indicator
doc_before
Styled resize indicator
doc_after
^ Add meaningful description above

Read the Pull Request Guidelines for more information.

In case of fundamental code changes, an Airflow Improvement Proposal (AIP) is needed.

In case of a new dependency, check compliance with the ASF 3rd Party License Policy.

In case of backwards incompatible changes please leave a note in a newsfragment file, named {pr_number}.significant.rst or {issue_number}.significant.rst, in airflow-core/newsfragments.
@boring-cyborgboring-cyborgBot
added
the 
area:UI
Related to UI/UX. For Frontend Developers.
label
Oct 2, 2025
@RoyLee1224
RoyLee1224
commented
Oct 2, 2025

Copy link


Copy Markdown

ContributorAuthor
Should I modify Dag Note UI as well or save it to another PR?
@jscheffl
jscheffl
commented
Oct 2, 2025

Copy link


Copy Markdown

Contributor
Should I modify Dag Note UI as well or save it to another PR?
Would be great and of course can be another PR.
jscheffl
jscheffl
reviewed
Oct 2, 2025
View reviewed changes
Comment threadairflow-core/src/airflow/ui/src/components/DisplayMarkdownButton.tsx
Outdated

@RoyLee1224
RoyLee1224
commented
Oct 2, 2025•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
Update
  • make ResizableWrapper reusable for other dialogs
  • Add usePersistentResizableState hook to remember user preference for dialog size
resize_memorize.mp4
jscheffl
jscheffl
approved these changes
Oct 3, 2025
View reviewed changes
@jscheffljscheffl
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.

Looks good to me! Thanks for the persistence extension!
Before merge, maybe a second pair of review eyes?
pierrejeambrun
pierrejeambrun
reviewed
Oct 3, 2025
View reviewed changes
@pierrejeambrunpierrejeambrun
left a comment


Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

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

A few suggestions, tested locally and look great. Can't wait to see the same implemented for TI and DagRun notes.
Comment threadairflow-core/src/airflow/ui/src/components/ui/ResizableWrapper.tsx
Outdated

Comment threadairflow-core/src/airflow/ui/src/components/DisplayMarkdownButton.tsx
Comment threadairflow-core/src/airflow/ui/src/components/DisplayMarkdownButton.tsx
Outdated

Comment threadairflow-core/src/airflow/ui/src/utils/usePersistentResizableState.ts
Outdated

Comment threadairflow-core/src/airflow/ui/src/utils/usePersistentResizableState.ts
Outdated

Comment threadairflow-core/src/airflow/ui/src/components/ui/ResizableWrapper.tsx
@RoyLee1224
RoyLee1224
commented
Oct 5, 2025•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
Follow up PR:
Add resize function for Dag Note
@bbovenzibbovenzi
added this to the Airflow 3.1.1 milestone
Oct 8, 2025
guan404ming
guan404ming
approved these changes
Oct 12, 2025
View reviewed changes
@guan404mingguan404ming
left a comment


Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

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

Test and lgtm!
@bbovenzi
bbovenzi
merged commit aab7f16
into
apache:mainOct 16, 2025

57 checks passed

kaxil pushed a commit
that referenced
this pull request
Oct 16, 2025
@RoyLee1224@kaxil
Add resize function for Dag Documentation (#56344)
910a923
* feat: Add dialog resize function
* feat: Memorize resize state
* refactor: replace inline style and use useLocalStorage
* fix: remove redundent style
* refactor: optimize state management
(cherry picked from commit aab7f16)
@RoyLee1224
RoyLee1224
deleted the

doc-resize

branch
October 20, 2025 00:24
TyrellHaywood pushed a commit
to TyrellHaywood/airflow
that referenced
this pull request
Oct 22, 2025
@RoyLee1224@TyrellHaywood
Add resize function for Dag Documentation (apache#56344)
555a77e
* feat: Add dialog resize function
* feat: Memorize resize state
* refactor: replace inline style and use useLocalStorage
* fix: remove redundent style
* refactor: optimize state management
@RoyLee1224RoyLee1224
mentioned this pull request
Nov 5, 2025
 Merged

@potiukpotiuk
mentioned this pull request
Nov 8, 2025
 Merged

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

Reviewers

@pierrejeambrunpierrejeambrunpierrejeambrun left review comments
@jscheffljscheffljscheffl approved these changes
@bbovenzibbovenzibbovenzi approved these changes
@guan404mingguan404mingguan404ming approved these changes
@ryanahamiltonryanahamiltonAwaiting requested review from ryanahamiltonryanahamilton is a code owner
@shubhamraj-gitshubhamraj-gitAwaiting requested review from shubhamraj-gitshubhamraj-git is a code owner

Assignees


No one assigned


Labels

area:UIRelated to UI/UX. For Frontend Developers.

Projects


None yet


Milestone

Airflow 3.1.1

Development

Successfully merging this pull request may close these issues.

Add option to be able to modify how the Dag Documentation pop-up is displayed


5 participants

@RoyLee1224@jscheffl@bbovenzi@pierrejeambrun@guan404ming

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
Add resize function for Dag Documentation - #56344
Merged
bbovenzi merged 7 commits into
apache:mainfrom 
RoyLee1224:doc-resize
Oct 16, 2025
Merged
Add resize function for Dag Documentation#56344
bbovenzi merged 7 commits into
apache:mainfrom 
RoyLee1224:doc-resize
Conversation
@RoyLee1224
@RoyLee1224RoyLee1224
commented
Oct 2, 2025•

edited by bbovenzi

Loading

Copy link


Copy Markdown

Contributor
Related
closes: #56325
Changes
  • Added react-resizable dependency to handle the resizing logic.
  • Set maxConstraints={[1200, 800]}, minConstraints={[512, 600]}
  • Improved the resize indicator visibility, as the default indicator was not easily noticeable.
  • Use brand.muted to align with Dag Note UI design
Screenshots
Before
current
After
resize.mp4
Default resize indicator
doc_before
Styled resize indicator
doc_after
^ Add meaningful description above

Read the Pull Request Guidelines for more information.

In case of fundamental code changes, an Airflow Improvement Proposal (AIP) is needed.

In case of a new dependency, check compliance with the ASF 3rd Party License Policy.

In case of backwards incompatible changes please leave a note in a newsfragment file, named {pr_number}.significant.rst or {issue_number}.significant.rst, in airflow-core/newsfragments.
@boring-cyborgboring-cyborgBot
added
the 
area:UI
Related to UI/UX. For Frontend Developers.
label
Oct 2, 2025
@RoyLee1224
RoyLee1224
commented
Oct 2, 2025

Copy link


Copy Markdown

ContributorAuthor
Should I modify Dag Note UI as well or save it to another PR?
@jscheffl
jscheffl
commented
Oct 2, 2025

Copy link


Copy Markdown

Contributor
Should I modify Dag Note UI as well or save it to another PR?
Would be great and of course can be another PR.
jscheffl
jscheffl
reviewed
Oct 2, 2025
View reviewed changes
Comment threadairflow-core/src/airflow/ui/src/components/DisplayMarkdownButton.tsx
Outdated

@RoyLee1224
RoyLee1224
commented
Oct 2, 2025•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
Update
  • make ResizableWrapper reusable for other dialogs
  • Add usePersistentResizableState hook to remember user preference for dialog size
resize_memorize.mp4
jscheffl
jscheffl
approved these changes
Oct 3, 2025
View reviewed changes
@jscheffljscheffl
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.

Looks good to me! Thanks for the persistence extension!
Before merge, maybe a second pair of review eyes?
pierrejeambrun
pierrejeambrun
reviewed
Oct 3, 2025
View reviewed changes
@pierrejeambrunpierrejeambrun
left a comment


Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

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

A few suggestions, tested locally and look great. Can't wait to see the same implemented for TI and DagRun notes.
Comment threadairflow-core/src/airflow/ui/src/components/ui/ResizableWrapper.tsx
Outdated

Comment threadairflow-core/src/airflow/ui/src/components/DisplayMarkdownButton.tsx
Comment threadairflow-core/src/airflow/ui/src/components/DisplayMarkdownButton.tsx
Outdated

Comment threadairflow-core/src/airflow/ui/src/utils/usePersistentResizableState.ts
Outdated

Comment threadairflow-core/src/airflow/ui/src/utils/usePersistentResizableState.ts
Outdated

Comment threadairflow-core/src/airflow/ui/src/components/ui/ResizableWrapper.tsx
@RoyLee1224
RoyLee1224
commented
Oct 5, 2025•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
Follow up PR:
Add resize function for Dag Note
@bbovenzibbovenzi
added this to the Airflow 3.1.1 milestone
Oct 8, 2025
guan404ming
guan404ming
approved these changes
Oct 12, 2025
View reviewed changes
@guan404mingguan404ming
left a comment


Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

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

Test and lgtm!
@bbovenzi
bbovenzi
merged commit aab7f16
into
apache:mainOct 16, 2025

57 checks passed

kaxil pushed a commit
that referenced
this pull request
Oct 16, 2025
@RoyLee1224@kaxil
Add resize function for Dag Documentation (#56344)
910a923
* feat: Add dialog resize function
* feat: Memorize resize state
* refactor: replace inline style and use useLocalStorage
* fix: remove redundent style
* refactor: optimize state management
(cherry picked from commit aab7f16)
@RoyLee1224
RoyLee1224
deleted the

doc-resize

branch
October 20, 2025 00:24
TyrellHaywood pushed a commit
to TyrellHaywood/airflow
that referenced
this pull request
Oct 22, 2025
@RoyLee1224@TyrellHaywood
Add resize function for Dag Documentation (apache#56344)
555a77e
* feat: Add dialog resize function
* feat: Memorize resize state
* refactor: replace inline style and use useLocalStorage
* fix: remove redundent style
* refactor: optimize state management
@RoyLee1224RoyLee1224
mentioned this pull request
Nov 5, 2025
 Merged

@potiukpotiuk
mentioned this pull request
Nov 8, 2025
 Merged

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

Reviewers

@pierrejeambrunpierrejeambrunpierrejeambrun left review comments
@jscheffljscheffljscheffl approved these changes
@bbovenzibbovenzibbovenzi approved these changes
@guan404mingguan404mingguan404ming approved these changes
@ryanahamiltonryanahamiltonAwaiting requested review from ryanahamiltonryanahamilton is a code owner
@shubhamraj-gitshubhamraj-gitAwaiting requested review from shubhamraj-gitshubhamraj-git is a code owner

Assignees


No one assigned


Labels

area:UIRelated to UI/UX. For Frontend Developers.

Projects


None yet


Milestone

Airflow 3.1.1

Development

Successfully merging this pull request may close these issues.

Add option to be able to modify how the Dag Documentation pop-up is displayed


5 participants

@RoyLee1224@jscheffl@bbovenzi@pierrejeambrun@guan404ming

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
Add resize function for Dag Documentation - #56344
Merged
bbovenzi merged 7 commits into
apache:mainfrom 
RoyLee1224:doc-resize
Oct 16, 2025
Merged
Add resize function for Dag Documentation#56344
bbovenzi merged 7 commits into
apache:mainfrom 
RoyLee1224:doc-resize
Conversation
@RoyLee1224
@RoyLee1224RoyLee1224
commented
Oct 2, 2025•

edited by bbovenzi

Loading

Copy link


Copy Markdown

Contributor
Related
closes: #56325
Changes
  • Added react-resizable dependency to handle the resizing logic.
  • Set maxConstraints={[1200, 800]}, minConstraints={[512, 600]}
  • Improved the resize indicator visibility, as the default indicator was not easily noticeable.
  • Use brand.muted to align with Dag Note UI design
Screenshots
Before
current
After
resize.mp4
Default resize indicator
doc_before
Styled resize indicator
doc_after
^ Add meaningful description above

Read the Pull Request Guidelines for more information.

In case of fundamental code changes, an Airflow Improvement Proposal (AIP) is needed.

In case of a new dependency, check compliance with the ASF 3rd Party License Policy.

In case of backwards incompatible changes please leave a note in a newsfragment file, named {pr_number}.significant.rst or {issue_number}.significant.rst, in airflow-core/newsfragments.
@boring-cyborgboring-cyborgBot
added
the 
area:UI
Related to UI/UX. For Frontend Developers.
label
Oct 2, 2025
@RoyLee1224
RoyLee1224
commented
Oct 2, 2025

Copy link


Copy Markdown

ContributorAuthor
Should I modify Dag Note UI as well or save it to another PR?
@jscheffl
jscheffl
commented
Oct 2, 2025

Copy link


Copy Markdown

Contributor
Should I modify Dag Note UI as well or save it to another PR?
Would be great and of course can be another PR.
jscheffl
jscheffl
reviewed
Oct 2, 2025
View reviewed changes
Comment threadairflow-core/src/airflow/ui/src/components/DisplayMarkdownButton.tsx
Outdated

@RoyLee1224
RoyLee1224
commented
Oct 2, 2025•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
Update
  • make ResizableWrapper reusable for other dialogs
  • Add usePersistentResizableState hook to remember user preference for dialog size
resize_memorize.mp4
jscheffl
jscheffl
approved these changes
Oct 3, 2025
View reviewed changes
@jscheffljscheffl
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.

Looks good to me! Thanks for the persistence extension!
Before merge, maybe a second pair of review eyes?
pierrejeambrun
pierrejeambrun
reviewed
Oct 3, 2025
View reviewed changes
@pierrejeambrunpierrejeambrun
left a comment


Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

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

A few suggestions, tested locally and look great. Can't wait to see the same implemented for TI and DagRun notes.
Comment threadairflow-core/src/airflow/ui/src/components/ui/ResizableWrapper.tsx
Outdated

Comment threadairflow-core/src/airflow/ui/src/components/DisplayMarkdownButton.tsx
Comment threadairflow-core/src/airflow/ui/src/components/DisplayMarkdownButton.tsx
Outdated

Comment threadairflow-core/src/airflow/ui/src/utils/usePersistentResizableState.ts
Outdated

Comment threadairflow-core/src/airflow/ui/src/utils/usePersistentResizableState.ts
Outdated

Comment threadairflow-core/src/airflow/ui/src/components/ui/ResizableWrapper.tsx
@RoyLee1224
RoyLee1224
commented
Oct 5, 2025•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
Follow up PR:
Add resize function for Dag Note
@bbovenzibbovenzi
added this to the Airflow 3.1.1 milestone
Oct 8, 2025
guan404ming
guan404ming
approved these changes
Oct 12, 2025
View reviewed changes
@guan404mingguan404ming
left a comment


Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

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

Test and lgtm!
@bbovenzi
bbovenzi
merged commit aab7f16
into
apache:mainOct 16, 2025

57 checks passed

kaxil pushed a commit
that referenced
this pull request
Oct 16, 2025
@RoyLee1224@kaxil
Add resize function for Dag Documentation (#56344)
910a923
* feat: Add dialog resize function
* feat: Memorize resize state
* refactor: replace inline style and use useLocalStorage
* fix: remove redundent style
* refactor: optimize state management
(cherry picked from commit aab7f16)
@RoyLee1224
RoyLee1224
deleted the

doc-resize

branch
October 20, 2025 00:24
TyrellHaywood pushed a commit
to TyrellHaywood/airflow
that referenced
this pull request
Oct 22, 2025
@RoyLee1224@TyrellHaywood
Add resize function for Dag Documentation (apache#56344)
555a77e
* feat: Add dialog resize function
* feat: Memorize resize state
* refactor: replace inline style and use useLocalStorage
* fix: remove redundent style
* refactor: optimize state management
@RoyLee1224RoyLee1224
mentioned this pull request
Nov 5, 2025
 Merged

@potiukpotiuk
mentioned this pull request
Nov 8, 2025
 Merged

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

Reviewers

@pierrejeambrunpierrejeambrunpierrejeambrun left review comments
@jscheffljscheffljscheffl approved these changes
@bbovenzibbovenzibbovenzi approved these changes
@guan404mingguan404mingguan404ming approved these changes
@ryanahamiltonryanahamiltonAwaiting requested review from ryanahamiltonryanahamilton is a code owner
@shubhamraj-gitshubhamraj-gitAwaiting requested review from shubhamraj-gitshubhamraj-git is a code owner

Assignees


No one assigned


Labels

area:UIRelated to UI/UX. For Frontend Developers.

Projects


None yet


Milestone

Airflow 3.1.1

Development

Successfully merging this pull request may close these issues.

Add option to be able to modify how the Dag Documentation pop-up is displayed


5 participants

@RoyLee1224@jscheffl@bbovenzi@pierrejeambrun@guan404ming

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
Add resize function for Dag Documentation - #56344
Merged
bbovenzi merged 7 commits into
apache:mainfrom 
RoyLee1224:doc-resize
Oct 16, 2025
Merged
Add resize function for Dag Documentation#56344
bbovenzi merged 7 commits into
apache:mainfrom 
RoyLee1224:doc-resize
Conversation
@RoyLee1224
@RoyLee1224RoyLee1224
commented
Oct 2, 2025•

edited by bbovenzi

Loading

Copy link


Copy Markdown

Contributor
Related
closes: #56325
Changes
  • Added react-resizable dependency to handle the resizing logic.
  • Set maxConstraints={[1200, 800]}, minConstraints={[512, 600]}
  • Improved the resize indicator visibility, as the default indicator was not easily noticeable.
  • Use brand.muted to align with Dag Note UI design
Screenshots
Before
current
After
resize.mp4
Default resize indicator
doc_before
Styled resize indicator
doc_after
^ Add meaningful description above

Read the Pull Request Guidelines for more information.

In case of fundamental code changes, an Airflow Improvement Proposal (AIP) is needed.

In case of a new dependency, check compliance with the ASF 3rd Party License Policy.

In case of backwards incompatible changes please leave a note in a newsfragment file, named {pr_number}.significant.rst or {issue_number}.significant.rst, in airflow-core/newsfragments.
@boring-cyborgboring-cyborgBot
added
the 
area:UI
Related to UI/UX. For Frontend Developers.
label
Oct 2, 2025
@RoyLee1224
RoyLee1224
commented
Oct 2, 2025

Copy link


Copy Markdown

ContributorAuthor
Should I modify Dag Note UI as well or save it to another PR?
@jscheffl
jscheffl
commented
Oct 2, 2025

Copy link


Copy Markdown

Contributor
Should I modify Dag Note UI as well or save it to another PR?
Would be great and of course can be another PR.
jscheffl
jscheffl
reviewed
Oct 2, 2025
View reviewed changes
Comment threadairflow-core/src/airflow/ui/src/components/DisplayMarkdownButton.tsx
Outdated

@RoyLee1224
RoyLee1224
commented
Oct 2, 2025•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
Update
  • make ResizableWrapper reusable for other dialogs
  • Add usePersistentResizableState hook to remember user preference for dialog size
resize_memorize.mp4
jscheffl
jscheffl
approved these changes
Oct 3, 2025
View reviewed changes
@jscheffljscheffl
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.

Looks good to me! Thanks for the persistence extension!
Before merge, maybe a second pair of review eyes?
pierrejeambrun
pierrejeambrun
reviewed
Oct 3, 2025
View reviewed changes
@pierrejeambrunpierrejeambrun
left a comment


Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

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

A few suggestions, tested locally and look great. Can't wait to see the same implemented for TI and DagRun notes.
Comment threadairflow-core/src/airflow/ui/src/components/ui/ResizableWrapper.tsx
Outdated

Comment threadairflow-core/src/airflow/ui/src/components/DisplayMarkdownButton.tsx
Comment threadairflow-core/src/airflow/ui/src/components/DisplayMarkdownButton.tsx
Outdated

Comment threadairflow-core/src/airflow/ui/src/utils/usePersistentResizableState.ts
Outdated

Comment threadairflow-core/src/airflow/ui/src/utils/usePersistentResizableState.ts
Outdated

Comment threadairflow-core/src/airflow/ui/src/components/ui/ResizableWrapper.tsx
@RoyLee1224
RoyLee1224
commented
Oct 5, 2025•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
Follow up PR:
Add resize function for Dag Note
@bbovenzibbovenzi
added this to the Airflow 3.1.1 milestone
Oct 8, 2025
guan404ming
guan404ming
approved these changes
Oct 12, 2025
View reviewed changes
@guan404mingguan404ming
left a comment


Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

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

Test and lgtm!
@bbovenzi
bbovenzi
merged commit aab7f16
into
apache:mainOct 16, 2025

57 checks passed

kaxil pushed a commit
that referenced
this pull request
Oct 16, 2025
@RoyLee1224@kaxil
Add resize function for Dag Documentation (#56344)
910a923
* feat: Add dialog resize function
* feat: Memorize resize state
* refactor: replace inline style and use useLocalStorage
* fix: remove redundent style
* refactor: optimize state management
(cherry picked from commit aab7f16)
@RoyLee1224
RoyLee1224
deleted the

doc-resize

branch
October 20, 2025 00:24
TyrellHaywood pushed a commit
to TyrellHaywood/airflow
that referenced
this pull request
Oct 22, 2025
@RoyLee1224@TyrellHaywood
Add resize function for Dag Documentation (apache#56344)
555a77e
* feat: Add dialog resize function
* feat: Memorize resize state
* refactor: replace inline style and use useLocalStorage
* fix: remove redundent style
* refactor: optimize state management
@RoyLee1224RoyLee1224
mentioned this pull request
Nov 5, 2025
 Merged

@potiukpotiuk
mentioned this pull request
Nov 8, 2025
 Merged

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

Reviewers

@pierrejeambrunpierrejeambrunpierrejeambrun left review comments
@jscheffljscheffljscheffl approved these changes
@bbovenzibbovenzibbovenzi approved these changes
@guan404mingguan404mingguan404ming approved these changes
@ryanahamiltonryanahamiltonAwaiting requested review from ryanahamiltonryanahamilton is a code owner
@shubhamraj-gitshubhamraj-gitAwaiting requested review from shubhamraj-gitshubhamraj-git is a code owner

Assignees


No one assigned


Labels

area:UIRelated to UI/UX. For Frontend Developers.

Projects


None yet


Milestone

Airflow 3.1.1

Development

Successfully merging this pull request may close these issues.

Add option to be able to modify how the Dag Documentation pop-up is displayed


5 participants

@RoyLee1224@jscheffl@bbovenzi@pierrejeambrun@guan404ming

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
Add resize function for Dag Documentation - #56344
Merged
bbovenzi merged 7 commits into
apache:mainfrom 
RoyLee1224:doc-resize
Oct 16, 2025
Merged
Add resize function for Dag Documentation#56344
bbovenzi merged 7 commits into
apache:mainfrom 
RoyLee1224:doc-resize
Conversation
@RoyLee1224
@RoyLee1224RoyLee1224
commented
Oct 2, 2025•

edited by bbovenzi

Loading

Copy link


Copy Markdown

Contributor
Related
closes: #56325
Changes
  • Added react-resizable dependency to handle the resizing logic.
  • Set maxConstraints={[1200, 800]}, minConstraints={[512, 600]}
  • Improved the resize indicator visibility, as the default indicator was not easily noticeable.
  • Use brand.muted to align with Dag Note UI design
Screenshots
Before
current
After
resize.mp4
Default resize indicator
doc_before
Styled resize indicator
doc_after
^ Add meaningful description above

Read the Pull Request Guidelines for more information.

In case of fundamental code changes, an Airflow Improvement Proposal (AIP) is needed.

In case of a new dependency, check compliance with the ASF 3rd Party License Policy.

In case of backwards incompatible changes please leave a note in a newsfragment file, named {pr_number}.significant.rst or {issue_number}.significant.rst, in airflow-core/newsfragments.
@boring-cyborgboring-cyborgBot
added
the 
area:UI
Related to UI/UX. For Frontend Developers.
label
Oct 2, 2025
@RoyLee1224
RoyLee1224
commented
Oct 2, 2025

Copy link


Copy Markdown

ContributorAuthor
Should I modify Dag Note UI as well or save it to another PR?
@jscheffl
jscheffl
commented
Oct 2, 2025

Copy link


Copy Markdown

Contributor
Should I modify Dag Note UI as well or save it to another PR?
Would be great and of course can be another PR.
jscheffl
jscheffl
reviewed
Oct 2, 2025
View reviewed changes
Comment threadairflow-core/src/airflow/ui/src/components/DisplayMarkdownButton.tsx
Outdated

@RoyLee1224
RoyLee1224
commented
Oct 2, 2025•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
Update
  • make ResizableWrapper reusable for other dialogs
  • Add usePersistentResizableState hook to remember user preference for dialog size
resize_memorize.mp4
jscheffl
jscheffl
approved these changes
Oct 3, 2025
View reviewed changes
@jscheffljscheffl
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.

Looks good to me! Thanks for the persistence extension!
Before merge, maybe a second pair of review eyes?
pierrejeambrun
pierrejeambrun
reviewed
Oct 3, 2025
View reviewed changes
@pierrejeambrunpierrejeambrun
left a comment


Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

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

A few suggestions, tested locally and look great. Can't wait to see the same implemented for TI and DagRun notes.
Comment threadairflow-core/src/airflow/ui/src/components/ui/ResizableWrapper.tsx
Outdated

Comment threadairflow-core/src/airflow/ui/src/components/DisplayMarkdownButton.tsx
Comment threadairflow-core/src/airflow/ui/src/components/DisplayMarkdownButton.tsx
Outdated

Comment threadairflow-core/src/airflow/ui/src/utils/usePersistentResizableState.ts
Outdated

Comment threadairflow-core/src/airflow/ui/src/utils/usePersistentResizableState.ts
Outdated

Comment threadairflow-core/src/airflow/ui/src/components/ui/ResizableWrapper.tsx
@RoyLee1224
RoyLee1224
commented
Oct 5, 2025•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
Follow up PR:
Add resize function for Dag Note
@bbovenzibbovenzi
added this to the Airflow 3.1.1 milestone
Oct 8, 2025
guan404ming
guan404ming
approved these changes
Oct 12, 2025
View reviewed changes
@guan404mingguan404ming
left a comment


Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

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

Test and lgtm!
@bbovenzi
bbovenzi
merged commit aab7f16
into
apache:mainOct 16, 2025

57 checks passed

kaxil pushed a commit
that referenced
this pull request
Oct 16, 2025
@RoyLee1224@kaxil
Add resize function for Dag Documentation (#56344)
910a923
* feat: Add dialog resize function
* feat: Memorize resize state
* refactor: replace inline style and use useLocalStorage
* fix: remove redundent style
* refactor: optimize state management
(cherry picked from commit aab7f16)
@RoyLee1224
RoyLee1224
deleted the

doc-resize

branch
October 20, 2025 00:24
TyrellHaywood pushed a commit
to TyrellHaywood/airflow
that referenced
this pull request
Oct 22, 2025
@RoyLee1224@TyrellHaywood
Add resize function for Dag Documentation (apache#56344)
555a77e
* feat: Add dialog resize function
* feat: Memorize resize state
* refactor: replace inline style and use useLocalStorage
* fix: remove redundent style
* refactor: optimize state management
@RoyLee1224RoyLee1224
mentioned this pull request
Nov 5, 2025
 Merged

@potiukpotiuk
mentioned this pull request
Nov 8, 2025
 Merged

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

Reviewers

@pierrejeambrunpierrejeambrunpierrejeambrun left review comments
@jscheffljscheffljscheffl approved these changes
@bbovenzibbovenzibbovenzi approved these changes
@guan404mingguan404mingguan404ming approved these changes
@ryanahamiltonryanahamiltonAwaiting requested review from ryanahamiltonryanahamilton is a code owner
@shubhamraj-gitshubhamraj-gitAwaiting requested review from shubhamraj-gitshubhamraj-git is a code owner

Assignees


No one assigned


Labels

area:UIRelated to UI/UX. For Frontend Developers.

Projects


None yet


Milestone

Airflow 3.1.1

Development

Successfully merging this pull request may close these issues.

Add option to be able to modify how the Dag Documentation pop-up is displayed


5 participants

@RoyLee1224@jscheffl@bbovenzi@pierrejeambrun@guan404ming

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
Add resize function for Dag Documentation - #56344
Merged
bbovenzi merged 7 commits into
apache:mainfrom 
RoyLee1224:doc-resize
Oct 16, 2025
Merged
Add resize function for Dag Documentation#56344
bbovenzi merged 7 commits into
apache:mainfrom 
RoyLee1224:doc-resize
Conversation
@RoyLee1224
@RoyLee1224RoyLee1224
commented
Oct 2, 2025•

edited by bbovenzi

Loading

Copy link


Copy Markdown

Contributor
Related
closes: #56325
Changes
  • Added react-resizable dependency to handle the resizing logic.
  • Set maxConstraints={[1200, 800]}, minConstraints={[512, 600]}
  • Improved the resize indicator visibility, as the default indicator was not easily noticeable.
  • Use brand.muted to align with Dag Note UI design
Screenshots
Before
current
After
resize.mp4
Default resize indicator
doc_before
Styled resize indicator
doc_after
^ Add meaningful description above

Read the Pull Request Guidelines for more information.

In case of fundamental code changes, an Airflow Improvement Proposal (AIP) is needed.

In case of a new dependency, check compliance with the ASF 3rd Party License Policy.

In case of backwards incompatible changes please leave a note in a newsfragment file, named {pr_number}.significant.rst or {issue_number}.significant.rst, in airflow-core/newsfragments.
@boring-cyborgboring-cyborgBot
added
the 
area:UI
Related to UI/UX. For Frontend Developers.
label
Oct 2, 2025
@RoyLee1224
RoyLee1224
commented
Oct 2, 2025

Copy link


Copy Markdown

ContributorAuthor
Should I modify Dag Note UI as well or save it to another PR?
@jscheffl
jscheffl
commented
Oct 2, 2025

Copy link


Copy Markdown

Contributor
Should I modify Dag Note UI as well or save it to another PR?
Would be great and of course can be another PR.
jscheffl
jscheffl
reviewed
Oct 2, 2025
View reviewed changes
Comment threadairflow-core/src/airflow/ui/src/components/DisplayMarkdownButton.tsx
Outdated

@RoyLee1224
RoyLee1224
commented
Oct 2, 2025•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
Update
  • make ResizableWrapper reusable for other dialogs
  • Add usePersistentResizableState hook to remember user preference for dialog size
resize_memorize.mp4
jscheffl
jscheffl
approved these changes
Oct 3, 2025
View reviewed changes
@jscheffljscheffl
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.

Looks good to me! Thanks for the persistence extension!
Before merge, maybe a second pair of review eyes?
pierrejeambrun
pierrejeambrun
reviewed
Oct 3, 2025
View reviewed changes
@pierrejeambrunpierrejeambrun
left a comment


Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

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

A few suggestions, tested locally and look great. Can't wait to see the same implemented for TI and DagRun notes.
Comment threadairflow-core/src/airflow/ui/src/components/ui/ResizableWrapper.tsx
Outdated

Comment threadairflow-core/src/airflow/ui/src/components/DisplayMarkdownButton.tsx
Comment threadairflow-core/src/airflow/ui/src/components/DisplayMarkdownButton.tsx
Outdated

Comment threadairflow-core/src/airflow/ui/src/utils/usePersistentResizableState.ts
Outdated

Comment threadairflow-core/src/airflow/ui/src/utils/usePersistentResizableState.ts
Outdated

Comment threadairflow-core/src/airflow/ui/src/components/ui/ResizableWrapper.tsx
@RoyLee1224
RoyLee1224
commented
Oct 5, 2025•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
Follow up PR:
Add resize function for Dag Note
@bbovenzibbovenzi
added this to the Airflow 3.1.1 milestone
Oct 8, 2025
guan404ming
guan404ming
approved these changes
Oct 12, 2025
View reviewed changes
@guan404mingguan404ming
left a comment


Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

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

Test and lgtm!
@bbovenzi
bbovenzi
merged commit aab7f16
into
apache:mainOct 16, 2025

57 checks passed

kaxil pushed a commit
that referenced
this pull request
Oct 16, 2025
@RoyLee1224@kaxil
Add resize function for Dag Documentation (#56344)
910a923
* feat: Add dialog resize function
* feat: Memorize resize state
* refactor: replace inline style and use useLocalStorage
* fix: remove redundent style
* refactor: optimize state management
(cherry picked from commit aab7f16)
@RoyLee1224
RoyLee1224
deleted the

doc-resize

branch
October 20, 2025 00:24
TyrellHaywood pushed a commit
to TyrellHaywood/airflow
that referenced
this pull request
Oct 22, 2025
@RoyLee1224@TyrellHaywood
Add resize function for Dag Documentation (apache#56344)
555a77e
* feat: Add dialog resize function
* feat: Memorize resize state
* refactor: replace inline style and use useLocalStorage
* fix: remove redundent style
* refactor: optimize state management
@RoyLee1224RoyLee1224
mentioned this pull request
Nov 5, 2025
 Merged

@potiukpotiuk
mentioned this pull request
Nov 8, 2025
 Merged

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

Reviewers

@pierrejeambrunpierrejeambrunpierrejeambrun left review comments
@jscheffljscheffljscheffl approved these changes
@bbovenzibbovenzibbovenzi approved these changes
@guan404mingguan404mingguan404ming approved these changes
@ryanahamiltonryanahamiltonAwaiting requested review from ryanahamiltonryanahamilton is a code owner
@shubhamraj-gitshubhamraj-gitAwaiting requested review from shubhamraj-gitshubhamraj-git is a code owner

Assignees


No one assigned


Labels

area:UIRelated to UI/UX. For Frontend Developers.

Projects


None yet


Milestone

Airflow 3.1.1

Development

Successfully merging this pull request may close these issues.

Add option to be able to modify how the Dag Documentation pop-up is displayed


5 participants

@RoyLee1224@jscheffl@bbovenzi@pierrejeambrun@guan404ming

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
Add resize function for Dag Documentation - #56344
Merged
bbovenzi merged 7 commits into
apache:mainfrom 
RoyLee1224:doc-resize
Oct 16, 2025
Merged
Add resize function for Dag Documentation#56344
bbovenzi merged 7 commits into
apache:mainfrom 
RoyLee1224:doc-resize
Conversation
@RoyLee1224
@RoyLee1224RoyLee1224
commented
Oct 2, 2025•

edited by bbovenzi

Loading

Copy link


Copy Markdown

Contributor
Related
closes: #56325
Changes
  • Added react-resizable dependency to handle the resizing logic.
  • Set maxConstraints={[1200, 800]}, minConstraints={[512, 600]}
  • Improved the resize indicator visibility, as the default indicator was not easily noticeable.
  • Use brand.muted to align with Dag Note UI design
Screenshots
Before
current
After
resize.mp4
Default resize indicator
doc_before
Styled resize indicator
doc_after
^ Add meaningful description above

Read the Pull Request Guidelines for more information.

In case of fundamental code changes, an Airflow Improvement Proposal (AIP) is needed.

In case of a new dependency, check compliance with the ASF 3rd Party License Policy.

In case of backwards incompatible changes please leave a note in a newsfragment file, named {pr_number}.significant.rst or {issue_number}.significant.rst, in airflow-core/newsfragments.
@boring-cyborgboring-cyborgBot
added
the 
area:UI
Related to UI/UX. For Frontend Developers.
label
Oct 2, 2025
@RoyLee1224
RoyLee1224
commented
Oct 2, 2025

Copy link


Copy Markdown

ContributorAuthor
Should I modify Dag Note UI as well or save it to another PR?
@jscheffl
jscheffl
commented
Oct 2, 2025

Copy link


Copy Markdown

Contributor
Should I modify Dag Note UI as well or save it to another PR?
Would be great and of course can be another PR.
jscheffl
jscheffl
reviewed
Oct 2, 2025
View reviewed changes
Comment threadairflow-core/src/airflow/ui/src/components/DisplayMarkdownButton.tsx
Outdated

@RoyLee1224
RoyLee1224
commented
Oct 2, 2025•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
Update
  • make ResizableWrapper reusable for other dialogs
  • Add usePersistentResizableState hook to remember user preference for dialog size
resize_memorize.mp4
jscheffl
jscheffl
approved these changes
Oct 3, 2025
View reviewed changes
@jscheffljscheffl
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.

Looks good to me! Thanks for the persistence extension!
Before merge, maybe a second pair of review eyes?
pierrejeambrun
pierrejeambrun
reviewed
Oct 3, 2025
View reviewed changes
@pierrejeambrunpierrejeambrun
left a comment


Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

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

A few suggestions, tested locally and look great. Can't wait to see the same implemented for TI and DagRun notes.
Comment threadairflow-core/src/airflow/ui/src/components/ui/ResizableWrapper.tsx
Outdated

Comment threadairflow-core/src/airflow/ui/src/components/DisplayMarkdownButton.tsx
Comment threadairflow-core/src/airflow/ui/src/components/DisplayMarkdownButton.tsx
Outdated

Comment threadairflow-core/src/airflow/ui/src/utils/usePersistentResizableState.ts
Outdated

Comment threadairflow-core/src/airflow/ui/src/utils/usePersistentResizableState.ts
Outdated

Comment threadairflow-core/src/airflow/ui/src/components/ui/ResizableWrapper.tsx
@RoyLee1224
RoyLee1224
commented
Oct 5, 2025•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
Follow up PR:
Add resize function for Dag Note
@bbovenzibbovenzi
added this to the Airflow 3.1.1 milestone
Oct 8, 2025
guan404ming
guan404ming
approved these changes
Oct 12, 2025
View reviewed changes
@guan404mingguan404ming
left a comment


Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

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

Test and lgtm!
@bbovenzi
bbovenzi
merged commit aab7f16
into
apache:mainOct 16, 2025

57 checks passed

kaxil pushed a commit
that referenced
this pull request
Oct 16, 2025
@RoyLee1224@kaxil
Add resize function for Dag Documentation (#56344)
910a923
* feat: Add dialog resize function
* feat: Memorize resize state
* refactor: replace inline style and use useLocalStorage
* fix: remove redundent style
* refactor: optimize state management
(cherry picked from commit aab7f16)
@RoyLee1224
RoyLee1224
deleted the

doc-resize

branch
October 20, 2025 00:24
TyrellHaywood pushed a commit
to TyrellHaywood/airflow
that referenced
this pull request
Oct 22, 2025
@RoyLee1224@TyrellHaywood
Add resize function for Dag Documentation (apache#56344)
555a77e
* feat: Add dialog resize function
* feat: Memorize resize state
* refactor: replace inline style and use useLocalStorage
* fix: remove redundent style
* refactor: optimize state management
@RoyLee1224RoyLee1224
mentioned this pull request
Nov 5, 2025
 Merged

@potiukpotiuk
mentioned this pull request
Nov 8, 2025
 Merged

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

Reviewers

@pierrejeambrunpierrejeambrunpierrejeambrun left review comments
@jscheffljscheffljscheffl approved these changes
@bbovenzibbovenzibbovenzi approved these changes
@guan404mingguan404mingguan404ming approved these changes
@ryanahamiltonryanahamiltonAwaiting requested review from ryanahamiltonryanahamilton is a code owner
@shubhamraj-gitshubhamraj-gitAwaiting requested review from shubhamraj-gitshubhamraj-git is a code owner

Assignees


No one assigned


Labels

area:UIRelated to UI/UX. For Frontend Developers.

Projects


None yet


Milestone

Airflow 3.1.1

Development

Successfully merging this pull request may close these issues.

Add option to be able to modify how the Dag Documentation pop-up is displayed


5 participants

@RoyLee1224@jscheffl@bbovenzi@pierrejeambrun@guan404ming