Having a node expand to a group

[vital sequoia]

Hey there!

I'm trying to figure out what is the best course of action regarding having a custom component in react flow turns from a node to a group that contains other nodes once expanded. I would like your thoughts on how to approach this challenge. I'm mainly thinking about how to structure the components themselves and whether or not to have a react flow instance in another react flow instance or handle all the nodes in the parent react flow component... Basically if to use subflows or not. I've added a sketch (on the left the initial state on the right the expanded one) showing what I meant in the behavior of a node expanding to a group containing other nodes (not of the same type)

I'm happy to answer questions to make myself clearer and appreciate and thank you for all of the help in advance 🙂

[late flame]

Hi, so I'm actually doing something similar at the moment where the "add node" function inserts a special gallery & config node, the user makes their selection and then when hitting accept that original node gets removed from the graph and the replacement node gets put in the same position.

You could probably do something similar where your collapsed node has the data via its props it needs to construct the expanded set of nodes

then have your expand / collapse mechanism just create the new parent node, and tack on the child nodes as needed, and in reverse works too

[vital sequoia]

yeah, so I'm trying something similar where a node component contains a "group" component (that is another custom node). I'm currently trying to have all of the nodes managed in the parent component which manages the react flow and then when expanding one of the nodes I update the nodes list to include those nodes and reference the parent which is the "group" node. Something like the guide in the docs here just with me switching the returned component (elements) on the node that switches between being another "normal" node to a "custom group node"

[late flame]

That sounds like a reasonable approach, do you have a codesandbox demonstrating what you've got so far?

[vital sequoia]

sadly i can't really share it atm, ill check if there is a way I could but if ill have anything to share ill keep you posted