Reactflow widget/layout

[Zelfior]

Hello,

For a personal need, as no part of the reactflow team, i have been working on a ReactComponent that uses this template: https://reactflow.dev/

I feel like it fills a hole so i was thinking of making it clean enough to get it integrated in panel by you, here is an example of what you can get:

I see two options here:

• As a layout : The left node "Panel widget" hosts a pn.layout.Column with a couple of panel widgets that can be interacted with, and trigger the python callbacks expected. the python API would be some .add_node(py_object, **options), where we get them one by one, and we can, on edition, get a json like object giving the nodes coordinates and the links properties, triggering change if the user needs.
• As a widget: I could set up a basic python API saying we have those html components in a node, and we trigger callbacks (on the same json like object) when we touch the widget node tree.

The main difference i see between the two is this functionality: https://reactflow.dev/examples/interaction/drag-and-drop

Do you guys see a way to create a new instance/instance copy from the javascript side, or do i need to request it to the python, with a call back for the user to create the required call backs on those objects when created? In which case the layout seems to be the best option for me.

What do you guys think of this feature? If you are interested, do you have requests to make it match more the panel spirit?

Thanks, Zelfior

[Coderambling]

Seems cool! Do you have a basic prototype? Can you elaborate a little on the below?

The main difference i see between the two is this functionality: https://reactflow.dev/examples/interaction/drag-and-drop

[Zelfior]

Seems cool! Do you have a basic prototype? Can you elaborate a little on the below?

The main difference i see between the two is this functionality: https://reactflow.dev/examples/interaction/drag-and-drop

Hey, I can describe the use i intend, it will become obvious. To each plot i have associate one of those node tree, and can toggle between the two using a IconButton. A basic node tree could be like (-> is a link between two nodes):

A dataframe -> getColumn (with a selector) -> some plots parameters (color, linestyle...) -> an output node receiving several plots objects.

I could want to add another couple of getColumn/plot parameters to extract another column and add it to the plot. In which case, we would drag and drop these items from a list (as you can see on the right of the example in the url), and link them. At each node tree change, a function reads it, and applies the changes to a bokeh plot for example.

In my opinion, for certain uses, this kind of workflow helps lighten the GUI and make the parameters more readable.

Is it clear?

I made the repository public if you want to try it out: https://github.com/Zelfior/reactflow_component

The code is still early dev, nothing generic yet as i wanted to see the outcome of this conversation to orient it.

[philippjfr]

This is fabulous @Zelfior. What I suggest is that we create a panel-reactflow extension that lives in the https://github.com/panel-extensions/ org. I'd recommend starting with https://github.com/panel-extensions/copier-template-panel-extension, adding your implementation and then we can work jointly on transferring it to the extensions org and getting it released from there.

[Zelfior]

This is fabulous @Zelfior. What I suggest is that we create a panel-reactflow extension that lives in the https://github.com/panel-extensions/ org. I'd recommend starting with https://github.com/panel-extensions/copier-template-panel-extension, adding your implementation and then we can work jointly on transferring it to the extensions org and getting it released from there.

Alright thanks. I will keep working on the component itself, and i will come back to you with some early API if you want to discuss it here

[Coderambling]

There is also a Holoviz Discord Server @Zelfior which you are welcome to join, and post roadblocks you might encounter in your code, copying the template @philippjfr Philip mentioned above, etc.

And if possible, maybe post a screen video here / on Discord to show your protoype in action?

Seeing that would help people get a basic feel of Reactflow in action in this context, and what you are trying to achieve.

https://discord.com/channels/1075331058024861767