Skip to main content

Streamlit Component Wrapper for React Flow

Project description

Streamlit Flow Logo

Streamlit Flow

Streamlit App

Build beautiful, interactive flow diagrams: Powered by React Flow, Simplified by Streamlit.

Markdown Support in Node

🎉 Version 1.5.0 is out now! 🎉

[!WARNING]

StreamlitFlow v1.5.0 has breaking changes. Please read on to understand how to migrate your code to the new version.

Say hello to the new and improved state management system that syncs the states between changes in the frontend and the backend. This means that you can now modify the state of the flow diagram from Python and see the changes reflected in the frontend without having to hack into the component's state.

Note: The updated state management uses a new StreamlitFlowState class to manage the state within streamlit. Instead of taking nodes and edges as arguments, the streamlit_flow function now takes a single StreamlitFlowState object. This means that code using earlier versions of this library will need to be tweaked slightly to work with the new version.

Old

from streamlit_flow import streamlit_flow
from streamlit_flow.elements import StreamlitFlowNode, StreamlitFlowEdge

nodes = [...]
edges = [...]

streamlit_flow('flow', nodes, edges)

New

from streamlit_flow import streamlit_flow
from streamlit_flow.elements import StreamlitFlowNode, StreamlitFlowEdge
from streamlit_flow.state import StreamlitFlowState

nodes = [...]
edges = [...]
state = StreamlitFlowState(nodes, edges)

streamlit_flow('flow', state)

The benefits we get from this are significant, as the StreamlitFlowState class makes sure that the states in the frontend and the backend are synced wth the latest changes from either side.

Example

from streamlit_flow import streamlit_flow
from streamlit_flow.elements import StreamlitFlowNode, StreamlitFlowEdge
from streamlit_flow.state import StreamlitFlowState
from uuid import uuid4

# Initialize the state if it doesn't exist
if 'flow_state' not in st.session_state:
    nodes = [...]
    edges = [...]
    st.session_state.flow_state = StreamlitFlowState(nodes, edges)

# Use any operation that alters the state, for example add node, and then rerun
if st.button("Add node"):
    new_node = StreamlitFlowNode(key=str(f"st-flow-node_{uuid4()}"), 
                                pos=(0, 0), 
                                data={'content': f'Node {len(st.session_state.curr_state.nodes) + 1}'}, 
                                node_type='default', 
                                source_position='right', 
                                target_position='left')
    st.session_state.curr_state.nodes.append(new_node)
    st.rerun()

# Use the state as the argument, as well as to store the return value
st.session_state.flow_state = streamlit_flow('flow', st.session_state.flow_state)

Minor Updates

  • More Robust Returns: The streamlit_flow component now returns the updated state on several user interactions, such as creating/deleting/editing/moving a node or an edge, to make sure the states stay synced.
  • Edge Markers: Ends of the edges can now be set to arrow or arrowclosed to represent directed edges, as well as further styled. Check out the style options here.
  • Unified node dimensions: Streamlit flow now only sets the dimensions of the nodes in the style dictionary, and let Reactflow handle computing the dimensions. This means that the width and height attributes of the nodes are now deprecated.

Features

  • Create, edit and visualize beautiful flow diagrams.
  • Add nodes and edges, move them around, pan and zoom.
  • Edit node and edge properties.
  • Easy to use Layouts - Layered, Tree, Force, Stress, Radial, Random, and Manual.
  • Markdown Support in Nodes.
  • Interactions with Streamlit - clicks on nodes and edges can be captured in Streamlit.
  • Synchronized state management - changes to the state of the flow can be made seamlessly from the UI through user interactions as well as programmatically in Python, and the changes reflect on the UI without any state modification wizardry.

A demo for all these features can be found here.

Installation

pip install streamlit-flow-component

Running the example

Install the dependencies

git clone https://github.com/dkapur17/streamlit-flow.git
cd streamlit-flow
npm install --prefix streamlit_flow/frontend

Run the frontent

On the first terminal, run from the root of the repository

cd streamlit_flow/frontend
npm start

Run this Example Streamlit App

On the second terminal, run from the root of the repository

streamlit run example.py

Change log

Version 1.2.9

  • Markdown Nodes: Use Markdown and HTML in the nodes to make them more expressive.

Version 1.0.0

  • 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.

Version 0.6.0

  • The initial release of the library, with the ability to visualize flow diagrams.
  • Create nodes and edges, move them around, pan and zoom.
  • Automatic Layered Layout Supported
  • Interactions sent to Streamlit - The component returns the ID of the element that was clicked on.

Project details


Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

streamlit-flow-component-1.5.0.tar.gz (2.1 MB view details)

Uploaded Source

Built Distribution

File details

Details for the file streamlit-flow-component-1.5.0.tar.gz.

File metadata

File hashes

Hashes for streamlit-flow-component-1.5.0.tar.gz
Algorithm Hash digest
SHA256 0ef30389e7eecb577f6c3a7fc5217bd100a36b8910d00b9124e8bb9f36b630ff
MD5 8e1dec3d564f4952755bb4d72bf0d961
BLAKE2b-256 591fc5b7acdcfe66d18a575a5c57aaa6f41e321a59238c4cea6229f66d929e74

See more details on using hashes here.

File details

Details for the file streamlit_flow_component-1.5.0-py3-none-any.whl.

File metadata

File hashes

Hashes for streamlit_flow_component-1.5.0-py3-none-any.whl
Algorithm Hash digest
SHA256 9cbb8bcf342f3d7553070f318956808cf7628c1b403d79481e62061bcb81bba9
MD5 2634954966357a4a30a99eac4429d14b
BLAKE2b-256 13708e5f67f6ebfa270aa3cc3ac78df4305fdf77d98ca3cac987ef2f7a835ef4

See more details on using hashes here.

Supported by

AWS AWS Cloud computing and Security Sponsor Datadog Datadog Monitoring Fastly Fastly CDN Google Google Download Analytics Microsoft Microsoft PSF Sponsor Pingdom Pingdom Monitoring Sentry Sentry Error logging StatusPage StatusPage Status page