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.
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)
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?
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
Thanks for stopping by! We use cookies to help us understand how you interact with our website.
By clicking “Accept all”, you consent to our use of cookies. For more information, please see our privacy policy.
Cookie settings
Strictly necessary cookies
These cookies are necessary for the website to function and cannot be switched off. They are usually only set in response to actions made by you which amount to a request for services, such as setting your privacy preferences, logging in or filling in forms.
Performance cookies
These cookies allow us to count visits and traffic sources so we can measure and improve the performance of our site. They help us understand how visitors move around the site and which pages are most frequently visited.
Functional cookies
These cookies are used to record your choices and settings, maintain your preferences over time and recognize you when you return to our website. These cookies help us to personalize our content for you and remember your preferences.
Targeting cookies
These cookies may be deployed to our site by our advertising partners to build a profile of your interest and provide you with content that is relevant to you, including showing you relevant ads on other websites.
. Thank you sir