feat(graph): add basic "Rearrange" mode for Dag graph view#68171
feat(graph): add basic "Rearrange" mode for Dag graph view#68171TomasCorreia2003 wants to merge 2 commits into
Conversation
Adds ability to drag and drop nodes in Dag graph view. Adds node collision avoidance and edge rerouting for "Rearrange" mode. When leaving graph view or toggling "Rearrange" off, the graph returns to its previous unaltered state. Closes apache#55796 Co-authored-by: Bernardo Borges de Sousa <bernardogbsousa2@tecnico.ulisboa.pt>
TomasCorreia2003
requested review from
bbovenzi,
choo121600,
guan404ming,
pierrejeambrun,
ryanahamilton,
shubhamraj-git and
vatsrahul1001
as code owners
boring-cyborg
Bot
added
area:translations
area:UI
|
Congratulations on your first Pull Request and welcome to the Apache Airflow community! If you have any issues or are unsure about any anything please check our Contributors' Guide
|
|
Could you attach before/after screenshots or a short recording for this UI change? |
|
Echoing @choo121600, a GIF would also be very helpful |
|
Hey Fellas, Here is a video demonstrating the added functionality as requested: (skip to 3 mins for the feature showcase) |
|
Okay, from the demo a "nice feature" - but do I see it right that after existing the rearrange-mode the state is lost? Or is the re-arranged state somehow kept for the user? |
|
Hey @jscheffl, In the future this feature is a great stepping-stone to make this "rearrange mode" into a "manual layout mode" by adding persistence. However, @TomasCorreia2003 states in his description: Therefore the feature is actually working as intended and I apologize for not making this clearer in the video. |
potiuk
added
the
ready for maintainer review
pierrejeambrun
left a comment
pierrejeambrun
left a comment
There was a problem hiding this comment.
This doesn't play well with tasks gruops and assets expressions:
Screen.Recording.2026-06-25.at.18.46.05.mov
Also I don't understand why just setting the 'rearrange' mode, directly changes the edges. I would expect them to remain the same until the user actually drag something and changes the layout
|
Hey @pierrejeambrun, We'll submit a fix for this very soon, thank you for bringing this issue to our attention. |
Use React Flow parentId for expanded task group children so their positions stay relative to the group. Preserve absolute ELK edge coordinates and make manual collision checks parent-aware. Add regression coverage for open task groups and graph flattening.
|
Hey @pierrejeambrun, We have pushed some changes addressing the issues you mentioned. We have come up with a solution. Let us know if you still think something else could be improved. |
7 participants
This feature addresses #55796 by adding a "Rearrange" button which when pressed, allows users to drag and drop nodes when in a DAG's graph view. For this, it adds node collision-avoidance on node drop and real-time edge recalculation to provide users with a responsive and helpful experience. Users cannot control edges as they represent dependencies. We also decided to make any changes while in "Rearrange mode" not persistent as the feature is simply meant to be a viewing aid for confusing graphs such as the ones spawned from complex DAGs.
This will be a great start for anyone attempting to make this mode persistent or any other QoL or functional improvements.
Closes #55796