Skip to content

fix: corrects issues with edge rendering on the graph view#53998

Merged
pierrejeambrun merged 2 commits into
apache:mainfrom
codecae:fix/graph_edge_rendering
Aug 12, 2025
Merged

fix: corrects issues with edge rendering on the graph view#53998
pierrejeambrun merged 2 commits into
apache:mainfrom
codecae:fix/graph_edge_rendering

Conversation

@codecae

@codecae codecae commented Jul 31, 2025

Copy link
Copy Markdown
Contributor

closes: #35301

The graph UI has issues rendering edges between dependent tasks nested in task groups. Edges render with excessive bends in various directions instead of directly between tasks and their parents task groups as they are collapsed and expanded. They also tend to render vertically off center at node borders. This PR addresses this edge rendering issue.

Example code that reproduces the issue:

from typing import Dict, List
import pendulum
from airflow.sdk import BaseOperator, dag, task, task_group
@dag(
    schedule=None,
    start_date=pendulum.datetime(2023, 1, 1),
)
def test_dag():
    _all_tasks: Dict[str, List[BaseOperator]] = {}
    def _generate_task_group_callable(group_id, tasks):
        @task_group(group_id=group_id)
        def _task_group():
            [t() for t in tasks]
        return _task_group
    def _generate_task_callable(task_id, task_set):
        def _generate():
            @task(task_id=task_id)
            def _task():
                pass
            if _all_tasks.get(task_set) is None:
                _all_tasks[task_set] = []
            _all_tasks[task_set].append(_task())
        return _generate
    _set_callables = []
    for _set in range(0, 2):
        _set_id = f"set_{_set}"
        _group_callables_a = []
        for _nga in range(0, 1):
            _nga_id = f"group_{_nga}"
            _group_callables_b = []
            for _ngb in range(0, 3):
                _ngb_id = f"group_{_ngb}"
                _task_callables = []
                for _task in range(0, 10):
                    _task_id = f"task_{_task}"
                    _callable = _generate_task_callable(_task_id, _set_id)
                    _task_callables.append(_callable)
                _group_callable_inner = _generate_task_group_callable(_ngb_id, _task_callables)
                _group_callables_b.append(_group_callable_inner)
            _group_callable_outer = _generate_task_group_callable(_nga_id, _group_callables_b)
            _group_callables_a.append(_group_callable_outer)
        _set_callable = _generate_task_group_callable(_set_id, _group_callables_a)
        _set_callables.append(_set_callable)
    [_s() for _s in _set_callables]
    for i in range(0, len(_all_tasks["set_0"])):
        _all_tasks["set_0"][i] >> _all_tasks["set_1"][i]
test_dag()

Rendering issue examples:
image
image
image
image
image

With this fix:
image
image
image
image
image
image


@boring-cyborg boring-cyborg Bot added the area:UI Related to UI/UX. For Frontend Developers. label Jul 31, 2025
@codecae codecae force-pushed the fix/graph_edge_rendering branch 3 times, most recently from 831a266 to 047805a Compare July 31, 2025 21:57
@codecae codecae force-pushed the fix/graph_edge_rendering branch from 047805a to b5dd3fd Compare July 31, 2025 22:42
Comment thread airflow-core/src/airflow/ui/src/components/Graph/useGraphLayout.ts Outdated
@pierrejeambrun

Copy link
Copy Markdown
Member

Thanks for the PR, indeed that need fixing.

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

Instead of doing another full pass on filteredEdges and creating another big list of edges with many duplicated, move this deduplication step directly in the formatChildNode function. This will allow to not insert duplicated edges at all in the first place, removing the need for an extra step in the process.

Comment thread airflow-core/src/airflow/ui/src/components/Graph/useGraphLayout.ts Outdated
@codecae

codecae commented Aug 10, 2025

Copy link
Copy Markdown
Contributor Author

Instead of doing another full pass on filteredEdges and creating another big list of edges with many duplicated, move this deduplication step directly in the formatChildNode function. This will allow to not insert duplicated edges at all in the first place, removing the need for an extra step in the process.

The deduplication logic has been moved to formatChildNode with reduced complexity.

@codecae codecae force-pushed the fix/graph_edge_rendering branch from a09af91 to f6a991a Compare August 10, 2025 01:47

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

Thanks, looking good!

@pierrejeambrun pierrejeambrun merged commit 7f8383b into apache:main Aug 12, 2025
54 checks passed
github-actions Bot pushed a commit that referenced this pull request Aug 12, 2025
#53998)

* fix: corrects issues with edge rendering on the graph view

* fix: moved edge deduplication logic to formatChildNode.

---------
(cherry picked from commit 7f8383b)

Co-authored-by: codecae <[email protected]>
Co-authored-by: Curtis Bangert <[email protected]>
@github-actions

Copy link
Copy Markdown
Contributor

Backport successfully created: v3-0-test

Status Branch Result
v3-0-test PR Link

pierrejeambrun pushed a commit that referenced this pull request Aug 12, 2025
#53998) (#54412)

* fix: corrects issues with edge rendering on the graph view

* fix: moved edge deduplication logic to formatChildNode.

---------
(cherry picked from commit 7f8383b)

Co-authored-by: codecae <[email protected]>
Co-authored-by: Curtis Bangert <[email protected]>
@codecae codecae deleted the fix/graph_edge_rendering branch August 16, 2025 19:06
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.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

New Graph UI seems to struggle with task-to-task dependencies in nested task groups

2 participants