bobthekingofegypt / dagre-reactjs

React component for rendering a dagre graph layout without any dependency on d3
MIT License
28 stars 8 forks source link

Grouping nodes with or without compound graph #21

Open josephmturner opened 2 years ago

josephmturner commented 2 years ago

Hello Bob!

Would you spare a moment to offer some advice which may lead me to working on exposing graphlib's compound graph feature in dagre-reactjs?

In our project, we'd like to be able to group a set of nodes together to distinguish them from the rest of the nodes. These nodes should be rendered close to one another, and they should have a visible container surrounding them. IIUC, a compound graph can do this. However there might be a simpler solution, since in our case, the box which contains the set of child nodes won't ever have edges pointing to/from it, i.e., it doesn't need to be a node, just a grouping of nodes. The child nodes will have edges pointing to/from nodes outside the container.

If you think that a compound graph is the correct way to accomplish this goal, I would be happy to work on implementing it in dagre-reactjs.

Thank you!!

Joseph

bobthekingofegypt commented 2 years ago

A compound graph is probably the only way to do this with dagre and guarantee the grouping.

Implementing compound graphs will be interesting, I actually tested this feature on a branch a long time ago but never got round to finishing it; would be on an old computer now. It's wasn't to bad to get something working, its just finding a nice way to do it. Compound nodes (or parent nodes) act the opposite way to how other nodes work in dagre-reactjs. Normal nodes draw themselves to get their final dimensions and then send their size to the layout manager, compound nodes cannot set their sizing so you need to avoid the useSize hooks or you end up in an infinite loop were they keep resizing each other.

Go for it, I'll be around to help if you have any questions.

josephmturner commented 2 years ago

Good to know that compound graph is the way to go. Thank you for the hint re: useSize hooks!