How to know when nodes or edges are changed/added/deleted?

[sroussey]

I can do it with regular react xyflow, but you manage all the nodes and edges (upstream lets the user go either way).

I have tried to upstream functions like onNodesChange / onEdgesChange but that is not useful in many ways (some actions are, some are not). Adding and removing is very helpful. Dragging position changes, not really.

And they don't know the structure of the node.

Rather than 'replace', we can have an event that a specific input's value changed which would be way nicer.

[sroussey]

(Also, due to the way addNode works, it does not generate a 'add' event for a node.

[sroussey]

Also, I need to get the state of the graph and the node input values. Either I am missing something, or I've gotten to the edge of what you have done so far.

[clarkmcc]

Oops, I missed this sorry. So I brought up some issues with the state change notifications out of ReactFlow on their discord and it's apparently something that they're working on, but since we manage our own state, there's nothing stopping us from rolling our own solution.

Also, I need to get the state of the graph and the node input values. Either I am missing something, or I've gotten to the edge of what you have done so far.

So you've probably gotten to the edge of what I've done so far because I don't actually run these graphs, they're just for designing a process that happens elsewhere, but I definitely think we need reactive nodes.

That being said, you should be able to use existing ReactFlow hooks as documented here to access that data from within your custom nodes and inputs.

As far as reading the state, I think I'd like to expose the Flow component somehow so that it's easy for you to provide your own GraphContextProvider or whatever it is. This was you have full control of the state from within your external application.

[sroussey]

I have tried intercepting theonNodesChange and onEdgesChange that you have in the store.

On the plus side:

• I can get a notification when a node is deleted
• notified when node data changes
• notification of user adding removing edges

On the minus side:

• no notification when a node is added with addNode, or when any change happens programatically
• node data has internal and maybe other stuff to weed out.
• deserialize simply replaces the state, so no notifications that the existing stuff gets deleted, and no notification that new stuff gets added.

[sroussey]

BTW: I also tried grabbing the GraphAPI.subscribe() but then I had to iterative through every node, look at every property i cared about, look at data and compare every property. Then do that again with edges. Then I could use the diff to emit events, but the whole process is slow.