Event callback that can be used to execute after the graph is rendered

[harshaktg]

Is there any callback method on which I can call after the graph has been rendered completely? I'm aware there is onPaneReady method which happens in the beginning. But as we add nodes to the graph -> is there a way to know if the node has been rendered on the graph and then after which we can perform some actions like highlighting etc.

[bcakmakoglu]

If you're looking for a callback when the initial nodes are all initialized and visible, you can use onNodesInitialized / @nodes-initialized.

There's also getter called getNodesInitialized which will return an array of all nodes that are initialized. You can use that to check if a specific node is initialized.

Another way to check for it is using findNode, which gives you a GraphNode type back from the store state.
You can check if the node has initalized set to true (using, for example, a watcher).

Though, why would you have to wait for the node to be initialized to highlight it? You can use css, you can also use node.style or node.class - all of which don't require you to wait for the node to be initialized to be used to highlight a node.

[harshaktg]

Let's say I only want to add this styling if it's a successor of any node. So only after it is rendered I will be able to figure of if the current node is a successor or predecessor right? That's where the use case lies.

Also, as you mentioned that onNodesInitialized is called only for the first set of nodes when the graph is initially rendered. I like the idea of a watcher which you actually mentioned. But what exactly will I watch here?

Here's my use case:
Initial render nodes: A -> B -> C

Let's assume B is the base and every successor after B should be selected

I click on a CTA which adds one new node on either side, so visually it's looks something similar to this: Z -> A -> B -> C -> D

From the above I need to only highlight D and not Z.

I have a function highlightSuccessors(node) which does this logic of selecting any base node and highlighting the successor. My thought was once it's rendered I call the function to select any node passed as a param and do it's work of highlighting. So now what specifically should I be adding a watcher for?

[bcakmakoglu]

Rendering should not have any influence on the hierarchy of your nodes.
You know what connections your node has before it's visible (as you're the one creating edges), you also know what position a node has before it's visible (as you're the one giving it it's position).

So I'm not sure why visibility (rendering) of a node is relevant at all for any of this 😄

[harshaktg]

Makes sense! I was actually depending on the graph position on where it's placed. I could simply make the logic independent of the graph :) Thanks @bcakmakoglu

[bcakmakoglu]

No problem :)