🎉 Announcing Streamlit Flow v1.0.0

[dkapur17]

Hey Streamlit Community!

Last month I had released v0.6.0 of my component Streamlit Flow that allowed for quick and pretty visualizations of flow graphs.

Since the library is a wrapper over ReactFlow, which itself is super powerful, it felt like a wasted opportunity to limit the scope of the library to just rendering flow graphs, as pointed out by a feature request.

I spend the past month improving the library’s functionality, and today I’m happy to announce v1.0.0 with a myriad of new features:

• Overhauled State Management: The component now manages the state of the flow diagram automatically. As such, it keeps track of changes to node positions, connections, and more.
• Pane Context Menu: Right-clicking on the canvas now opens a context menu, allowing you to add new nodes or reset the layout.
• Node Context Menu: Right-clicking on a node now opens a context menu, allowing you to edit or delete the node.
• Edge Context Menu: Right-clicking on an edge now opens a context menu, allowing you to edit or delete the edge.
• Way more Layouts: The layouts are now more extensive, including Tree, Layered, Force, Stress, Radial, Random and Manual. One can also make a custom layout by inheriting from the Layout class.
• Hackable Python State: The primary state management is done within the component, and the state can be read by Python. This is the intended usage. However, while not recommended, it is possible to modify the state from Python as well if the user wishes to.

Since there are now so many new features, I thought it would be wise to create a demo application so that people could see the power of the library and how to use it in not-so-straightforward scenarios. Say hello to the docs-cum-demo app for Streamlit Flow.

Streamlit Flow

Also, do checkout the Streamlit Flow GitHub!

GitHub - dkapur17/streamlit-flow: Streamlit Component to quickly create...

Cheers!

[Jarod-Guo]

Can we set some tags or custom properties on the node?

[ZKLO]

Amazing!

Was doing in implementation of react-flow myself but yours is better

Would like to request: 1) get multiple nodes clicked on, 2) Nodes expanding if selected and ability to display more text inside or images inside (beyond label)

[dkapur17]

Thanks for the ideas. Will definitely add these to the list of features to be implemented.

[dkapur17]

Version v1.2.8 is now Out!

Nodes are no longer limited to plaintext. They can render Markdown as well as HTML!

Check out the demo at https://stflow.streamlit.app/Markdown_Node

[ZKLO]

Wow! I love it. The expandable is soooo nice! . Thank you sir

[nkwachiabel]

Thanks @dkapur17 for this wonderful component. I am planning on using it for my streamlit app. I currently use Graphviz but it has performance limitations when it has a large dataset. However, when I apply a filter in my app, the Streamlit Flow doesn’t update based on the new dataframe. Is this a normal functionality or is it from my code?

The screenshot shows the different visuals when filtered.

[dkapur17]

Hey @nkwachiabel! Yes, currently this is a limitation of the library. The problem is that the component’s state (nodes, edges, etc.) can either be managed by streamlit, or by the component itself, but not both. To allow to users to be able to move the nodes, add edges as well as create new nodes within the canvas, I had to delegate the state management to the component, and as such changes from streamlit won’t update the component’s state. There is a hacky workaround for this, where you can delete the key assigned to the component from the session state and that would cause the component to remount with the new arguments from streamlit (https://stflow.streamlit.app/Hackable_State), but this isn’t the cleanest solution.

I’m currently working on a secondary component that delegates state management to streamlit, and is only responsible for rendering the flow that is created in Python, which would then be responsive to updates like in your case. I’ll add it to the next release of the library

[nkwachiabel]

Thanks for your response @dkapur17. Looking forward to your next release!

[Tsx]

@dkapur17 Hello, how can I input data into the node?
Or is there any way to use streamlit input widgets in the node?
Thanks a lot!

[eduardob]

this is great! is there a way to change the style for all nodes at once? here’s the code I’m using.

the docs say you can pass style, and it works but since I want all the nodes to have the same style I wonder if there are global style options so I don’t need to pass style to all nodes.