Streamlit-Agraph

Common errors

• streamlit.errors.DuplicateWidgetID: There are multiple identical `st.streamlit_agraph.agraph` widgets with the same generated key.

  cause You are rendering more than one `agraph` component on the same Streamlit page without providing a unique `key` parameter to each instance. [12, 13]
  fix Pass a distinct `key` argument to each `agraph` call, e.g., `agraph(..., key='graph_one')` and `agraph(..., key='graph_two')`. [12]

• FileNotFoundError: [Errno 2] No such file or directory: '{path}\{node_id}'

  cause This error can occur when a node's `title` property is interpreted as a file path or URI that the system tries to open upon a double-click event. This is a behavior inherited from the underlying `react-graph-vis` component. [16]
  fix If the `title` is not meant to be a clickable URI, ensure it's a plain string. If interaction is desired, consider handling clicks via the `return_value` of `agraph` for custom logic in Python, rather than relying on default browser behavior for `title` attributes. [16]

• PyArrow error while using Streamlit agraph component

  cause This issue often arises from conflicts or incorrect installations of `pyarrow` or `streamlit` within the environment, especially when mixing `pip` and `conda` installations. [10]
  fix If you initially installed `streamlit` with `pip`, try uninstalling it (`pip uninstall streamlit`) and then reinstalling it using `conda` (`conda install -c conda-forge streamlit`). Ensure `pyarrow` is also consistently installed via the same package manager. [10]

Warnings

• breaking The `TripleStore` functionality, which integrates with `rdflib` for RDF graph handling, is explicitly noted as 'currently not workin since update to agraph 2.0 - work in progress' in the GitHub README. Attempting to use it might lead to unexpected behavior or errors. [2]
  Fix: Avoid using `TripleStore` with `rdflib` until the functionality is officially restored and documented. Consider using `Node` and `Edge` objects directly.
• gotcha When placing multiple `agraph` components on a single Streamlit page, you will encounter `streamlit.errors.DuplicateWidgetID`. Streamlit requires all widgets to have unique keys if their structure is identical. [12, 13]
  Fix: Always pass a unique `key` argument to the `agraph` function when using multiple instances, e.g., `agraph(nodes=..., edges=..., config=..., key='my_unique_key_1')`.
• gotcha Double-clicking on a node with a defined `title` property might cause the browser to attempt opening the `title`'s value as a URI, potentially leading to `FileNotFoundError` or opening a new, unintended page if the value is not a valid or accessible path. [16]
  Fix: Be mindful of the content assigned to the `title` property of `Node` objects. If interactive navigation is not desired, ensure `title` values are simple strings, or handle double-click events by modifying the component's source if custom behavior is critical. [16]

Install

• pip install streamlit-agraph Install with pip

Imports

• agraph, Node, Edge, Config

  from streamlit_agraph import agraph, Node, Edge, Config

• Config, ConfigBuilder

  from streamlit_agraph.config import Config, ConfigBuilder

• TripleStore

  from streamlit_agraph import TripleStore

  Note: `TripleStore` functionality with `rdflib` has been noted as 'not working since update to agraph 2.0 - work in progress' in the official repository. [2]

Quickstart

This quickstart demonstrates how to create a simple interactive graph in Streamlit using `streamlit-agraph`. It defines a set of nodes and edges, configures the graph's appearance and behavior (e.g., width, height, physics, directed edges), and renders it using the `agraph` component. The `return_value` captures the ID of the last clicked node. [2, 17]

import streamlit as st
from streamlit_agraph import agraph, Node, Edge, Config

nodes = []
edges = []

nodes.append(Node(id="Spiderman", label="Peter Parker", size=25, shape="circularImage", image="http://marvel-force-chart.surge.sh/marvel_force_chart_img/top_spiderman.png"))
nodes.append(Node(id="Captain_Marvel", size=25, shape="circularImage", image="http://marvel-force-chart.surge.sh/marvel_force_chart_img/top_captainmarvel.png"))
nodes.append(Node(id="Iron_Man", label="Tony Stark", size=25, shape="circularImage", image="http://marvel-force-chart.surge.sh/marvel_force_chart_img/top_ironman.png"))

edges.append(Edge(source="Captain_Marvel", label="friend_of", target="Spiderman"))
edges.append(Edge(source="Iron_Man", label="mentor_of", target="Spiderman"))

config = Config(
    width=750,
    height=550,
    directed=True,
    physics=True,
    hierarchical=False,
    # Add a unique key for multiple graphs on a single page
    # key="my_unique_agraph_key"
)

st.title("Streamlit-Agraph Quickstart")
st.markdown("An interactive graph visualization example.")

return_value = agraph(nodes=nodes, edges=edges, config=config)

st.write(f"Node selected: {return_value}")