dkapur17 / streamlit-flow

Streamlit Component to quickly create Interactive Flow Diagrams using React Flow
https://stflow.streamlit.app
52 stars 6 forks source link

Feature request - lock graph canvas dragging #3

Closed daan-ds closed 1 month ago

daan-ds commented 1 month ago

Hi there, amazing component, thank you so much! I have been happily working with it.

One question I have is whether you could perhaps also include the possibility to lock the graph in place? I would like to use it for read-only purposes as well, and don't want the whole graph/canvas to be dragged.

I saw that you added kwargs to the nodes and edges but not to the streamlit_flow interface itself.

After a quick Google search I found: https://stackoverflow.com/questions/77322335/react-flow-lock-the-interactivity so it seems like adding the option to include draggable={!disabled} and/or panOnDrag={!disabled} would do the trick?

Thanks in advance!

dkapur17 commented 1 month ago

Hey @daan-ds. Thanks for pointing this out. Will add the pan_on_drag argument to the component in the next release. For disabling dragging of nodes, you'll need to set the draggable parameter on each node to False, since the node-level attribute overrides the draggable parameter on the entire component, and it is set to True by default at the node level.

However, unlike the node and edge classes, it is harder to implement kwargs for the component, since node and edges become objects in the frontend, while the component arguments need to be passed to a react component, which doesn't have a straightforward way of consuming kwargs. To this end, I'll need to selectively add flags one-by-one for parameters on the canvas.

dkapur17 commented 1 month ago

Hey @daan-ds. I have released v1.0.0 of the library and it includes the requested feature. Do check it out!