Is there any documentation that I can use for this library?

Hi- thanks so much for this repo and all your work.

I've been using the 'svg' property of the nodes to change the appearance of the nodes. This is really helpful to visually show multiple different node types.

Sometimes, the png URL that I provide for the svg doesn't respond all the time upon rerun. When that happens, the streamlit app quits. I wanted to host a png file locally and use the filepath instead of a URL. But that just doesn't work.

For example in the ego_graph.py, I can change the following line: ego-graph.py#L38 to:

nodes = [Node(id=i, label=str(i), size=200, svg='https://icons.iconarchive.com/icons/findhold/karate/512/karate-ready-icon.png') for i in hub_ego.nodes]

And get a nice graph with "karate kid" icons for nodes.

But if I download the png to the base folder and do:

nodes = [Node(id=i, label=str(i), size=200, svg='karate-ready-icon.png') for i in hub_ego.nodes]

I get broken link images instead.

I don't know too much JS/React/D3, but I'm willing to work on this, if you can point me in the right direction.

Thanks!

nodes.append(Node(id="Spiderman",
label="Peter Parker",
size=25,
shape="circularImage",
image="./data/images/经典片段-021-让子弹飞-1.png")
)

Beyond is my code. It seems that I can't set a local address as the image path, otherwise the error would occur:

Traceback (most recent call last):
File "/Library/Frameworks/Python.framework/Versions/3.9/lib/python3.9/site-packages/streamlit/web/server/component_request_handler.py", line 55, in get
with open(abspath, "rb") as file:
FileNotFoundError: [Errno 2] No such file or directory: '/Library/Frameworks/Python.framework/Versions/3.9/lib/python3.9/site-packages/streamlit_agraph/frontend/build/data/images/经典片段-021-让子弹飞-1.png'

HI, at your last job they did a very cool thing, can you share with its source code?

Code needs to be refactored!

Currently not workin since update to agraph 2.0 - work in progress

from rdflib import Graph
from streamlit_agraph import TripleStore, agraph

graph = Graph()
graph.parse("http://www.w3.org/People/Berners-Lee/card")
store = TripleStore()

for subj, pred, obj in graph:
    store.add_triple(subj, pred, obj, "")

agraph(list(store.getNodes()), list(store.getEdges()), config)

I am a bit new to the node and nodejs. While I tried to build frontend myself, I encounter following error. Would appreciate some help. Thanks!

I tried to npm install at the current master branch at streamlit-agraph/streamlit_agraph/frontend

I am using npm 8.19.4 and npm is installed via nodejs 16.20.2 via asdf

Here is log of my error.

>>> npm install                                        
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/typescript
npm ERR!   dev typescript@"^4.6.2" from the root project
npm ERR!   peer typescript@">=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta" from [email protected]
npm ERR!   node_modules/tsutils
npm ERR!     tsutils@"^3.17.1" from @typescript-eslint/[email protected]
npm ERR!     node_modules/@typescript-eslint/eslint-plugin
npm ERR!       peer @typescript-eslint/eslint-plugin@"2.x" from [email protected]
npm ERR!       node_modules/eslint-config-react-app
npm ERR!         eslint-config-react-app@"^5.2.1" from [email protected]
npm ERR!         node_modules/react-scripts
npm ERR!       1 more (react-scripts)
npm ERR!     tsutils@"^3.17.1" from @typescript-eslint/[email protected]
npm ERR!     node_modules/@typescript-eslint/typescript-estree
npm ERR!       @typescript-eslint/typescript-estree@"2.34.0" from @typescript-eslint/[email protected]
npm ERR!       node_modules/@typescript-eslint/experimental-utils
npm ERR!         @typescript-eslint/experimental-utils@"2.34.0" from @typescript-eslint/[email protected]
npm ERR!         node_modules/@typescript-eslint/eslint-plugin
npm ERR!         1 more (@typescript-eslint/parser)
npm ERR!       1 more (@typescript-eslint/parser)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peerOptional typescript@"^3.2.1" from [email protected]
npm ERR! node_modules/react-scripts
npm ERR!   react-scripts@"3.4.1" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: [email protected]
npm ERR! node_modules/typescript
npm ERR!   peerOptional typescript@"^3.2.1" from [email protected]
npm ERR!   node_modules/react-scripts
npm ERR!     react-scripts@"3.4.1" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See ~/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:

I am in the attempt to to separate functionality of DoubleClickedEvent vs the title that showed up when mouseover. Plan to add a field call link that only used for DoubleClickedEvent.

After I deployed an app with two graphs (one have around 100 nodes and the other 400 nodes) both of them disappeared. They showed up for around 5 mins then empty page. I wonder what is the memory limits for the graph? Is there a workaround where I can show my graphs?

Hi,
I'm using clickevent & while loop to re-render the graph as the user selects a node to filter data.
With my code, I got DuplicateWidgetID error, which I can normally fix by simply supplying the 'key' to widget. However, I cannot find how I can set the key for agraph, so need help how I could resolve this.

Error details

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

When a widget is created, it's assigned an internal key based on
its structure. Multiple widgets with an identical structure will
result in the same internal key, which causes this error.

To fix this error, please pass a unique key argument to
st.streamlit_agraph.agraph.

Error I get when I supply a unique key to agraph

TypeError: agraph() got an unexpected keyword argument 'key'

Currently this is the way to initialize a Node

class Node:
  def __init__(self,
              id,
              size=250,
              color="#ACDBC9",
              renderLabel=True,
              labelPosition="right",
              svg="",
              symbolType="circle",
              strokeColor="" #F7A7A6
               ):

Is there any way to specify node label? I wish I could assign a different value than node_id to label and then display the label in the graph.

Hi.

Is there a way of selecting a node and then use the information saved in it to display it in another streamlit container?

I see that in the AgraphComponent.tsx there is onClick functionality but how would this be used, and where would the contents be saved?

Hi,

Is it possible to get network before render the graph ?
I want to recalculate x, y and width for each nodes in terms of edges count

When I add nodes or remove them and redraw the graph, the position of the nodes jump, and it redraws in a random configuration. I'd like to be able to save the position in the session state, and any redrawing would happen with the physics on it so added nodes would appear smoothly

Hi Chris - big thanks to you and your work it's a very cool component you've built.

My minor issue is on the first run of my streamlit application the resultant graph produced has a sparse structure (i.e. nodes are all a great distance from one another) whereas future outputs solve this issue and the graph has the desired shape. The images below show what I'm referring to:

Sparse

Future runs - desired shape

This is on streamlit_agraph version 0.0.35. The configurations which produces are shown below for reference:

    config = Config(width=3000, 
                    height=1000, 
                    directed=True,
                    nodeHighlightBehavior=True, 
                    highlightColor="#F7A7A6", # or "blue"
                    collapsible=False,
                    staticGraph = False,
                    staticGraphWithDragAndDrop=False,
                    ) 

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

Let me know if I can provide any additional information. Its obviously not a huge issue if rerunning the function that outputs the graph solves it but more curious as to why this might be the case. Thanks!

How to turn them on if they are supported at all? I can't find a way to get them work.

config = Config(
height=1600,
width=1000,
nodeHighlightBehavior=True,
highlightColor="#F7A7A6",
directed=True,
collapsible=True, # it should collapse the connecting nodes
clustering=True, # it should show a subgraph only when the number of nodes > 5000
node={'labelProperty': 'label'}
)

I'm not sure if this is currently possible, but it would be great if there was a way to pass the click value (i.e. Clicked on node {value}) back to Streamlit/Python to save as a variable or filter a dataframe. For example if I clicked on Node 1 it would be able to pass Node 1 back so I could use it to filter a dateframe to only show rows containing Node 1.

this line at https://github.com/ChrisDelClea/streamlit-agraph/blob/master/examples/ego_graph.py#L35

should be changed to (2nd arg is Id

hub_ego = nx.ego_graph(G, most_connected_node[0])

hi,
I'm using this tool to develop a knowledge graph demo,but I want to change the graph background color, which parameter I should use?

Hi, when using a wide window, the graph component does not take all available parent space, as can be seen here (the bottom node is truncated on its right):

I nested two st.container with borders to show that they expand to take all space provided by their parent, while agraph does not.

Here is the code to reproduce this:

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

# Use the full page instead of a narrow central column
st.set_page_config(layout="wide")

top_container = st.container(border=True)
with top_container:
    graph_container = st.container(border=True)
    with graph_container:
        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") 
                    ) # includes **kwargs
        nodes.append( Node(id="Captain_Marvel", 
                        size=25,
                        shape="circularImage",
                        image="http://marvel-force-chart.surge.sh/marvel_force_chart_img/top_captainmarvel.png") 
                    )
        edges.append( Edge(source="Captain_Marvel", 
                        label="friend_of", 
                        target="Spiderman", 
                        # **kwargs
                        ) 
                    ) 

        config = Config(#width=750,
                        #height=950,
                        directed=True, 
                        physics=False, 
                        hierarchical=False,
                        # **kwargs
                        )

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

Looking at Config's code, I can see that width and height have default values, so this would explain the current behavior.

Expectation: get an "expand in parent" behavior when width and height are not specified.

Topic:

ConfigBuilder instantiation

Descirption

The class ConfigBuilder don't use it's **kwargs parameter. it would be very useful if we can pass arguments such as height or width when creating an instance of ConfigBuilder , and use these arguments for Config and as default value for the streamlit sidebar

Implementation example:

    def __init__(self, nodes=None, edges=None, **kwargs):
        self.config = Config(**kwargs)
        self.kwargs = {}
        self.nodes = nodes
        st.sidebar.write("Agraph Configurations")
        self.basic_widget = self.basic_widget()
        self.physics_widget = self.physics_widget()
        self.hierarchical_widget = self.hierarchical_widget()
        self.groups = self.group_widget()


    def basic_widget(self):
        basic_expander = st.sidebar.expander("Basic Config", expanded=True)
        with basic_expander:
            basic_expander.number_input("height", value=getattr(self.config, "height", 750) , key="height")
            basic_expander.number_input("width", value=getattr(self.config, "width", 750) , key="width")
            basic_expander.checkbox("directed", value=getattr(self.config, "height", True) , key="directed")
            self.kwargs["height"] = st.session_state.height
            self.kwargs["width"] = st.session_state.width
            self.kwargs["directed"] = st.session_state.directed

Requirement

So far, interactions with the graph are fixed. And I wish to add tooltip and customizations to interactions.

Development

Tooltip

react-d3-graph doesn't provide natvie support of tooltip, but react-d3-graph author suggested that we can achieve that with react-tooltip according to this issue.

Customization at python level

Don't know if we can customize at the python level. Seems developer need a react dev environment for these customizations.

Is there a solid documentation resource?

I'm trying to find a current list of methods for the config / nodes / edges.

edit: I have used https://danielcaldas.github.io/react-d3-graph/docs/index.html#graphconfig but I find the configurations do not match what agraph uses. Node 'symbolType' vs 'shape', for instance.

Is there a way to extract the node x and y coordinates from a rendered agraph?

• k-core
• pagerank
• shortest path
• clustering
  tbc.

config parameter, "directed = False" does work. It's always True.

Nodes might have a specific class e.g. Person. They should be displayed in another color.

Currently link-labels are not displayed properly (not at all). Why not and how to fix it?

The color of nodes is not changing nor that of edges, I tried modifying the argument under config for node but nothing changed. Any reason why?

Hi, hope you are doing well.

Is there any way to define a certain action that happens when a user double-clicks on a node? For example, when a user double-clicks on a node, a new webpage could open.

currently, I have to force it to str() like below:
for _, row in df.iterrows():
edges.append(Edge(source=row['up_node_id'], target=row['down_node_id'], id=row['edge_id'], label=str(row['edge_id'])))

Hi,
When I double-click on a node, I get a "read error" message in a new tab from the browser. I need to assign the "single click" action, that returns the node ID, to "double click". Which library's file should I modify for this?
Thanks

https://observablehq.com/@d3/force-directed-tree

When I tried to install streamlit-agraph with below code,

pip install streamlit-agraph

I came across error like below :(

Defaulting to user installation because normal site-packages is not writeable
ERROR: Could not find a version that satisfies the requirement streamlit-agraph (from versions: none)
ERROR: No matching distribution found for streamlit-agraph

I'm in

• pip version 20.3.4
• python 2.7
• streamlit version 0.55.2

when I create 2 agraphs on a page, streamlit complains:

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

When a widget is created, it's assigned an internal key based on
its structure. Multiple widgets with an identical structure will
result in the same internal key, which causes this error.

To fix this error, please pass a unique `key` argument to
`st.streamlit_agraph.agraph`.

but trying to do so ends up in an Uncaught app exception - TypeError: agraph() got an unexpected keyword argument 'key'

can we please allow agraph to accept the key argument ? does it make sense to have 2 agraphs on a page ?

(I am not sure if this feature is supported as I couldn't find a way to implement it. If it is already possible, please let me know how)

I want to be redirected to a particular link (specifically in my case, a particular div) when I click on a node (instead of the pop up). Also, I would also like to disable the pop up window when an edge is clicked.

I am trying to implement a graph in my project - WikiContext - where the nodes are the prerequisites to the main subject. On clicking the nodes, it jumps to the respective div of the prerequisite.

Is there a way I can specify a link in the kwargs when defining the nodes?

Setting directed equals True or False results in the arrowheads being showed in the graph.

Currently, the graph can only be edited from the code. Are there any plans to implement a feature where the graphs can be edited to create a custom flow from the UI? The user can open the UI and design a custom flow chart/graph. Something like draw.io.

I am interested in being able to format a hierarchical graph in ways similar to what is available at https://marvelous-graph.streamlit.app/. Does anyone know if there is documentation or sample code available to show to how use the hierarchical config options shown in the demo such as blockShifting, edgeMinimization, parentCentralization, sortMethod, shakeTowards, etc successfully? I've tried to include them as keys in the Config (kwargs) but they didn't seem to do anything.

The example code posted ( here: https://pypi.org/project/streamlit-streamlit-agraph/ ) seems to be broken or inadequate. Please update it.

Build a sidebar on the right-handside to modify the graphs setting with parameters e.g.

• node colors
• node size
• general config

(as shown in demo of the react-d3-graph)

Hello. I've been poking around to figure out how to change the font size on node labels in agraph. So far I haven't been able to figure it out. Could you please advise?

Is it possible to set layout to display nodes and edges using a specific layout/algorithm?

It could be useful draw a directed tree graph, for example to show pipelines.

Hi Chris,

Thank you for this, really awesome and easy to use. Is there a way to save a graph as a PNG file?

Cheers

It would great to integrate vis-timeline into this package.
https://github.com/visjs/vis-timeline

First of all, thank you very much for the great work. I am doing some data analysis on anti-money laundering and also using streamlit-agraph. As you may know, when a person is suspected of money laundering, they tend to have a huge number of transaction counterparts, which means there can be a lot of nodes in the graph (ranging from tens to thousands). What troubles me is that when there are so many nodes, the program gets stuck for a long time and the drawing becomes very slow. Apart from reducing unnecessary nodes to improve performance, are there any other ways to speed things up in terms of the program itself or other aspects?

Hi @chrischross,

I am trying to use the new feature you added here. However, it seems the last pypi release predates that change.

Do you have any plans to push a new release to pypi?

Thanks!
Marco

It is a very good project, but I met a problem, you can see the pic blow, it is a small window that the graph can use, If there are 100 or more nodes, I need drag the graph to show the part of it, I want to see the overview of the graph, so is there anyway to show the graph in full screen. thanks first

Was experimenting around with this library when I found an issue introduced in version 0.0.40. Works in 0.0.37, screenshots below. Seems like some change made in version 0.0.40 causes nodes to not display labels. Unsure if it's actually because of configs or not, might be that some node properties can hardcoded (configs don't seem to work, even though the default label is supposed to be id).

code sample showing how I passed in the configs (same code ran on both versions):

def app():
  st.title("Graph Example")
  st.sidebar.title("Welcome")
  # query_type = st.sidebar.selectbox("Query Tpye: ", ["Nobel Prizes", "blabla"]) # could add more stuff here later on or add other endpoints in the sidebar.
  node_config = {
    'labelProperty' : 'label',
    'renderLabel' : 'true'
    }
  st.write("Node config: " + str(node_config))
  config = Config(height=2000, 
                  width=1000, 
                  nodeHighlightBehavior=True, 
                  highlightColor="#F7A7A6", 
                  directed=True,
                  collapsible=True,
                  node = node_config,
                  # d3 = {'linkLength' : 6000}
                )

  # st.write("Node config d3: " + str(config.d3))
  st.subheader("Nobel Prizes")
  with st.spinner("Loading data"):
    nodes, edges = get_inspired()
    st.write("Nodes loaded: " + str(len(nodes)))
  st.success("Done")
  agraph(nodes=nodes, edges=edges, config=config)

if __name__ == '__main__':
    app()

Hi. Thanks for this useful component!

I've noticed that if I click a node (as opposed to clicking and dragging), it seems to trigger a UI rewrite. I saw that there was a merged PR related to tracking clicks ( #12 ) and thought the (undocumented) feature might relate to what I'm seeing. Is there a way I can disable this behavior? I'd like to be able to drag nodes around, but I don't want a click event to trigger the UI to re-render top-down.

What's the proper procedure for rebuilding after modifying one of the tsx files?