New Component: Interactive Graph Visualization Component for Streamlit

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

8 Likes

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

Really liked the component!

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

Thanks

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.

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])

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: