Dynamically set node width/height in dagre tree

[slim copper]

Hi, I'm using the base logic in the dagre tree tutorial (https://reactflow.dev/docs/examples/layout/dagre/) for my web app. It's working great, but because I don't know the size of input (I have a text editor where users input information, then display the processed information as a Directed Acyclic Graph) sometimes the nodes are slightly too large/small. I see that in the tutorial we specify the dimensions manually as constants, but is there any way to have reactFlow or Dagre automatically size the nodes to fit the information?

[fading wedge]

Mh... what you could do is something like this

1. set your initial nodes and edges without layouting them so that react flow can measure their dimensions first - also make sure to possibly hide them to avoid having a jumping graph on initial load
2. when useNodesInitialized returns true trigger a useEffect that will layout your initial nodes
3. set the layouted nodes, give it a timeout and call fit view, then after that's done, show the nodes

Here's an example: https://codesandbox.io/s/angry-wilbur-23xmy7?file=/App.js

There's probably other ways to go about this but this is what I came up with quickly 😅