newcat / baklavajs

Graph / node editor in the browser using VueJS
http://baklava.tech
MIT License
1.52k stars 113 forks source link

Node Layout #187

Open ThePixelDeveloper opened 2 years ago

ThePixelDeveloper commented 2 years ago

The project I'm working on has a large number of nodes (~300) and layout is becoming a bit of a problem.

This ticket is for my own benefit, but it'd be good to trigger an automatic node layout. I'm looking to graphviz for algorithm inspiration, but I don't think it'd be too difficult to accomplish. If anyone wants to take a stab then go for it.

newcat commented 2 years ago

Sorry, I must have missed this issue. This would indeed be a very nice feature. Unfortunately, most graph layout algorithms don't work well with Baklava since they don't care about the order of the edges from/to a node. Usually, this is not a problem, since in most graph visualizations all edges terminate at a single point on the node (or at least the order doesn't matter, since they can be switched around). In Baklava, the node interfaces have fixed positions / a fixed order and, if this is not taken into account, there would be a lot of edges crossing each other.

Unfortunately, I do not have a lot of time for Baklava at the moment so I'll focus on getting v2 done. So I have no clue when, but at some point I definitely want to tackle this feature since I also think this is a very nice feature. However, I'll mark this issue as "needs help", so if somebody wants to work on this in the meantime, feel free to do so :smile:

TigerHix commented 2 years ago

Sorry, I must have missed this issue. This would indeed be a very nice feature. Unfortunately, most graph layout algorithms don't work well with Baklava since they don't care about the order of the edges from/to a node. Usually, this is not a problem, since in most graph visualizations all edges terminate at a single point on the node (or at least the order doesn't matter, since they can be switched around). In Baklava, the node interfaces have fixed positions / a fixed order and, if this is not taken into account, there would be a lot of edges crossing each other.

Unfortunately, I do not have a lot of time for Baklava at the moment so I'll focus on getting v2 done. So I have no clue when, but at some point I definitely want to tackle this feature since I also think this is a very nice feature. However, I'll mark this issue as "needs help", so if somebody wants to work on this in the meantime, feel free to do so 😄

Maybe consider to implement the Size- and Port-Aware Horizontal Node Coordinate Assignment algorithm (which is based on Sugiyama's algorithm) which supports arranging nodes with input/output ports and produce nice and clean graphs without edges crossing each other, like these:

image image

Here is a C++ implementation for Unreal Engine blueprints: https://github.com/howaajin/graphformatter

newcat commented 2 years ago

Wow, thanks for the links @TigerHix. That helps a lot! Not sure when I'll have time to implement it, but that definitely makes things a lot easier.

TigerHix commented 2 years ago

Found a much simpler solution for my project: use elkjs.

It is a node layout calculation library, so all I needed to do is transform my graph model (or baklava's graph model) into ELK JSON format, run the layered algorithm in elkjs to rearrange the nodes in the graph, and then transform the graph model back to my graph model (or baklava's graph model). The result is quite good without tweaks and optimizations:

image

Hope this helps!

newcat commented 2 years ago

Thanks for the tip @TigerHix. That does look like something that is fairly easy to implement. I hope I'll have some time soon to do this.

BTW: Your screenshot looks mightily impressive, I honestly can't believe this is made using Baklava 😄 it really looks awesome!

lasficw commented 3 months ago

Are there any updates about this topic? If not, @TigerHix, do you have any code to use Elk in a simple manner with Baklava?