{"id":7762,"library":"streamlit-agraph","title":"Streamlit-Agraph","description":"Streamlit-Agraph is a third-party Streamlit component designed to visualize interactive graph networks directly within Streamlit applications. Built on top of `react-graph-vis`, it provides a Python interface for generating nodes, edges, and customizable graph configurations, including physics, direction, hierarchy, and image support. The current version is 0.0.45, and it appears to be actively maintained with irregular updates, as indicated by recent activity on its GitHub repository. [2, 17]","status":"active","version":"0.0.45","language":"en","source_language":"en","source_url":"https://github.com/ChrisChross/streamlit-agraph","tags":["streamlit","graph visualization","interactive","networkx","component","data visualization"],"install":[{"cmd":"pip install streamlit-agraph","lang":"bash","label":"Install with pip"}],"dependencies":[{"reason":"Required for running the Streamlit application and displaying the component.","package":"streamlit","optional":false},{"reason":"Often used in conjunction with `streamlit-agraph` for graph data generation and manipulation.","package":"networkx","optional":true},{"reason":"Needed for `TripleStore` functionality, though some features related to it are noted as 'work in progress' in current versions. [2, 3]","package":"rdflib","optional":true}],"imports":[{"symbol":"agraph, Node, Edge, Config","correct":"from streamlit_agraph import agraph, Node, Edge, Config"},{"symbol":"Config, ConfigBuilder","correct":"from streamlit_agraph.config import Config, ConfigBuilder"},{"note":"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]","symbol":"TripleStore","correct":"from streamlit_agraph import TripleStore"}],"quickstart":{"code":"import streamlit as st\nfrom streamlit_agraph import agraph, Node, Edge, Config\n\nnodes = []\nedges = []\n\nnodes.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\"))\nnodes.append(Node(id=\"Captain_Marvel\", size=25, shape=\"circularImage\", image=\"http://marvel-force-chart.surge.sh/marvel_force_chart_img/top_captainmarvel.png\"))\nnodes.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\"))\n\nedges.append(Edge(source=\"Captain_Marvel\", label=\"friend_of\", target=\"Spiderman\"))\nedges.append(Edge(source=\"Iron_Man\", label=\"mentor_of\", target=\"Spiderman\"))\n\nconfig = Config(\n    width=750,\n    height=550,\n    directed=True,\n    physics=True,\n    hierarchical=False,\n    # Add a unique key for multiple graphs on a single page\n    # key=\"my_unique_agraph_key\"\n)\n\nst.title(\"Streamlit-Agraph Quickstart\")\nst.markdown(\"An interactive graph visualization example.\")\n\nreturn_value = agraph(nodes=nodes, edges=edges, config=config)\n\nst.write(f\"Node selected: {return_value}\")","lang":"python","description":"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]"},"warnings":[{"fix":"Avoid using `TripleStore` with `rdflib` until the functionality is officially restored and documented. Consider using `Node` and `Edge` objects directly.","message":"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]","severity":"breaking","affected_versions":"0.0.45 and potentially earlier versions relying on internal 'agraph 2.0'"},{"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')`.","message":"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]","severity":"gotcha","affected_versions":"All versions"},{"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]","message":"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]","severity":"gotcha","affected_versions":"All versions"}],"env_vars":null,"last_verified":"2026-04-16T00:00:00.000Z","next_check":"2026-07-15T00:00:00.000Z","problems":[{"fix":"Pass a distinct `key` argument to each `agraph` call, e.g., `agraph(..., key='graph_one')` and `agraph(..., key='graph_two')`. [12]","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]","error":"streamlit.errors.DuplicateWidgetID: There are multiple identical `st.streamlit_agraph.agraph` widgets with the same generated key."},{"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]","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]","error":"FileNotFoundError: [Errno 2] No such file or directory: '{path}\\{node_id}'"},{"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]","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]","error":"PyArrow error while using Streamlit agraph component"}]}