Node or Flow based Programming UI Component

[PranitModak]

NODE FLOW UI Component

There is vue library/addon which helps creating node based applications which are used some of the top trending web apps today.

Vue-Flow Github : https://github.com/bcakmakoglu/vue-flow
Vue-Flow Home : https://vueflow.dev

It would be really great if we can integrate this in NiceGUI.

Also this library offers each node execution which if we can connect it to backed python for function block execution, then we get a really good node or flow based programming sandbox builder in place.

@rodja

[falkoschindler]

This sounds interesting, but rather challenging. Any help towards implementing such an element is greatly appreciated!

[rodja]

pranitrock over at Discord seems to have a first proof-of-concept.

[Stefan2016]

I found this discussion, when I was searching for a flowchart library to be used within nicegui. Any updates regarding this?
I am just looking to solve this use case: users can draw custom flow charts within a nicegui app and those flow charts will be saved and possibly exported

[PranitModak]

Sorry guys was a bit busy last few weeks but yes I have the component ready and working. I had coded it for version 1.2.x will have to modify it a bit to suit with 1.3.x framework. Shall push my PR by this week.

[PranitModak]

@Stefan2016 @rodja @falkoschindler

Although I am facing few challenges in event handling of the nodes this is what I have achieved so far.

Adding below element as is simple as this: (Flow is the element being included here)

Adding new nodes:

nice-flow.mp4

Interacting with node canvas and deleting nodes:

nice-flow1.mp4

[rodja]

Looks good so far.

[Stefan2016]

@PranitModak that looks cool! Looking forward to test it on my own.

[NaMoCv]

How is the current progress of the work?

[auglotus]

How is the current progress of the work? Where can I get the code for a study? tks!

[lapnd]

Hi @PranitModak
Can you share the code?
Thank you!

[blockoutdev]

@PranitModak Is this one still actively being worked on? I need it for my project. would be willing to help!

[PranitModak]

I have done most of it. Can details after roughly a week along with releasing the code I developed.

[Smug246]

is it possible to have no nodes and use this as a table plan. i know it kind of defeats the purpose of it being a node ui component but ye, just wondering

[blockoutdev]

thank you! looking forward to it.

[zhuyubei]

Hi @PranitModak

How is your progress on it?

[Stefan2016]

@PranitModak I am also looking forward to it :)

[123swk123]

here is my initial implementation for one of my project use case, it allows you to define a node and add fields based on user choice.

https://github.com/123swk123/nodegraph-editor-nicegui

any comments and suggestions are welcome!

[blockoutdev]

looks sleek!

Ideally you'd want to control the inputs and outputs of each node separately though. typical use case each node is tied to function with some set of inputs and outputs. the node graph lets you string outputs from one node into the inputs of another node. there will be at least one node whose outputs aren't connected to anything, evaluating said node by recursively evaluating its inputs gets you the output of the overall graph.

for this to be useful it would probably make more sense to set the inputs and output connection points of a node using two separate lists of objects that include a name and type for the connection point

[atticus-lv]

I think vue-flow is a good choice https://vueflow.dev/, it basic on react flow, a powerful flow editor that has many feats. It provide a example of using with quasar https://github.com/bcakmakoglu/vue-flow/tree/master/examples/quasar