New Component: Interactive Graph Visualization Component for Streamlit

Show the Community!
1

Hello Streamlit Community,

I’m excited to share with you a new custom component for Streamlit: st-link-analysis, a tool for visualizing and interacting with graphs directly within your Streamlit apps.

demo

Why I created this component

While there are several options available for visualizing graphs, I wanted a more interactive solution that offers the following within the frontend part:

  • Easily switch to fullscreen mode for a more immersive visualization (especially important for link analysis tasks).
  • Refresh the layout dynamically without needing to rerun the backend.
  • View detailed information about nodes and edges directly within the visualization
  • Exporting data along with positions to JSON.

I plan to continue to work on it every once in while to address any reported issues and add additional features (e.g. hide/show nodes).

11 Likes
2

I’d like to work based on your demo app, can you share the git?
Thanks!

Really liked the component!

3

Hi @Alexandre_Choske I’m glad you liked it! Here’s the link for the demo’s repo: st-link-analysis-demo

Thanks

4

Thanks friend.

Just a little question.

The structure of the JSON obrigatory has to be like this?

 {"data": {"id": 1, "label": "PERSON", "name": "Streamlit"}}

My idea was to build based on a different dataframe, so maybe I will have to adapt it to follow the JSON format.

5

Yes that’s the format expected for Cytoscape’s Elements JSON.

You could use the following example for preparing the data into the appropriate format:

import pandas as pd # v2.2

df  = pd.DataFrame([
    {"id": "e1", "source": 1, "target": 2, 'some_attr': 'x'},
    {"id": "e2", "source": 2, "target": 3, 'some_attr': 'y'},
    {"id": "e2", "source": 3, "target": 1, 'some_attr': 'z'}
])

# To cytoscape json 
elements = df.apply(lambda x: {"data": dict(x)}, axis=1).tolist()

# Back to pandas
df = pd.json_normalize(elements).rename(columns=lambda x: x.split(".")[-1])
6

Wow! Thank you so much for this component! I was looking for such interactive graphs so long!!
Pretty sure this is yet the best graph component! :100:

1 Like
7

Thank you so much for your kind words! Much appreciated.

If you have any suggestions or features you’d like to see in the future, please feel free to share!

8

Thanks! This is a great component.
Two questions please:

  1. may you share the selectbox code to change the properties of it? similar in your Demo section for Node Styles, Edge Styles, Layout Algorithms
  2. Is it possible to add a widget for filtering by user input containing any string? like a search input.
    Thanks again for this!
9

Hi @Aristides, I’m glad you liked the component!

  1. You can find the full demo code in the examples directory of the main repository. For instance, the code for the node styles selectbox can be found here.

  2. Yes, of course. Streamlit makes this easy. You can use a text_input field and update the graph data based on its value. Feel free to give it a try, and let me know if you encounter any difficulties.

Kind regards,

1 Like
10

Hello again Streamlit Community!

I’m happy to share some recent updates to the st-link-analysis component. Here’s a quick overview of what’s new and improved:

node-actions

Key New Features

Node Actions (Expand / Remove)

You can now enable node removal and expansion by passing True to the enable_node_actions parameter. Removal can be triggered by a delete keydown or a remove button click, while expansion occurs on a double-click or expand button click. When these events are triggered, the event details and selected node IDs are sent back to the Streamlit app as the component’s return value.

View Control Bar

A new viewbar frontend component has been added for zooming, fitting, and centering the view, making it easier to navigate your graphs.

Extended Layouts

Added support for fcose and cola cytoscape layouts.

For a full list of changes, refer to the repository’s CHANGELOG. You can also preview these updates on the demo page here.

Happy Visualization!

2 Likes
11

Hello @AlrasheedA

Thanks for this component. Been using it for an analysis and I love how simplified it is. Question. Is there a layout that always shows the graph from Left to right or from Top to bottom, similar to what Graphviz does?

I am using it to analyse business processes and it would be nice to look at a process from either left to right or top to bottom.

Thank you.

12

This is wonderful. Exactly what I was looking for. Thank you.

13

Thanks for making this wonderful component. Is that possible to add feature to link two nodes inside the canvas like other node-based flow editors?