More flexible arrangement of nodes

[astrojuanlu]

Description

It would be nice to be able to drag some nodes around for clarity, especially when exporting the visualization to a static PNG.

Also, maybe add a "left-to-right" auto layout? (Since most ETL/ELT diagrams I've seen are left-to-right - although of course this might have obvious cultural reasons)

Context

A user this week told me

"kedro viz is amazing, being able to see the layers, the functions, being able to see the entire structure of the project in a moment"

but

"I don't know if there is a way to sort the nodes in Kedro Viz"

Possible Implementation

Orchest had an "automatic layout" button you could use, but otherwise you were free to arrange nodes on a canvas: https://github.com/orchest/orchest/

[tynandebold]

"I don't know if there is a way to sort the nodes in Kedro Viz"

What exactly did they mean by this? Sort them how or by what? Did they say anything more specific about what they'd like to see or be able to do?

[astrojuanlu]

Yes, specifically there was some "entanglement" in his pipeline (not super big, but bigger than spaceflights) and he wanted to move some stuff around to better see the connections or manually displace some entanglements of his own choosing.

[astrojuanlu]

Forgot to add, this was after talking to the author of https://github.com/pablovdcf/TFM_HADO_Cares cc @pablovdcf

[pablovdcf]

Hi all,

It seems to get tangled with each kedro viz and randomly generated (not sure) but for example, in the preprocessing pipeline I don't see that I can sort the DataFrame inputs and then they can be intertwined in the following steps.

I have no complaints about this part because it works the same way, but when displaying several processes horizontally you can't see many interlaced lines between steps.

Thank you very much

[astrojuanlu]

(Nobody asked about this but Orchest used the Sugiyama algorithm from d3-dag https://github.com/orchest/orchest/blob/560103a5c7dbdf615a2e0df435076f0ee78b6a1d/services/orchest-webserver/client/src/utils/pipeline-layout.ts#L144-L157)

[rashidakanchwala]

Closing this issue as I have created two specific issues related to the above - #2159, #2160

[astrojuanlu]

Plus the one we already had #2057