Programmatically spawning nodes

[moxzilla]

Hello,

I have been using flume for a few months and found it fairly easy to use. But I was wondering if there was a way to trigger a node to be created without right clicking . For example if we had a drop down on the left side that the user could select and it would show a flume diagram. My requirement is to show users how we connect things and give them a starting point.

Is there a way to do such a thing already or is there any plans/ interest to do such a thing.

Thank you

[chrisjpatty]

Hey @moxzilla! This is definitely something we'd like to provide at some point. I'm trying to avoid including too much opinionated UI pieces so it may come in the form of some functions you can use to imperatively add nodes that you can hook up to your own UI. Would that work for your use-case?

[ezand]

@chrisjpatty I would upvote this 😊 It could be as simple as some kind of hook into Stage's addNode fn.

[aughey]

I'd like to bring this back up as I have a similar use case...

I'm wanting to use Flume purely for it's UI appeal. The actual use case will be for it to display and manipulate a node graph that exists elsewhere (a remote system modified using grpc).

I've written my own data structure comparer in order to take the onChange data and determine what modifications have been made to generate my own OnAdd, OnDestroyed, OnConnected, OnDisconnected messages. So a new node create will trigger an OnAdd call. This OnAdd will do the asynchronous remote procedure call to create the actual node, and when it returns, what I really want to do is replace the Flume generated Node with a new Node that fully represents the inputs and outputs of the remote object.

The right-click node is simply a place holder to be seen while the actual node (which could take some time) is created. I also might not not ahead of time what nodes will look like, and/or they might change their port configuration.

I attempted to do this by modifying the nodes parameter to NodeEditor, but that didn't seem to work.

Another use case is if multiple users are modifying a common system and the browser is notified of changes, this would allow for the controller to modify that state of the UI without user input.

[aughey]

Another renewal of this wish list item. My pet-project has come around again to looking for a more mature front end to complement the backend which is remote and asynchronous. Nodes could be created, connected, remotely and their their visual state updated programmatically.

Looking at the code, it seems that exposing the dispatchNodes dispatcher would mostly do the trick. Or perhaps passing in an api object that can be instrumented inside of NodeEditor to implement some sort of API that would in-turn do the internal dispatch logic. It feels a little backwards to do it this way, but it would work well.

[aughey]

I flushed this out in https://github.com/aughey/flume/tree/master It's an ugly hack to look for an api object passed into the node editor and if it exists, add the dispatch{Nodes,Toasts,Comments,StageState} variables. Very much what you should not do, but I did it anyway and I only feel a little bad about myself.

Perhaps to do it right it might look like:

api.addNode = (node) => dispatchNodes( {"type":"ADD_NODE", ...node} );
api.removeNode = (id) => dispatchNodes( {"type":"REMOVE_NODE", nodeId: id } );