Showing off the streamlit-agraph Component

[chris_klose]

Hi Guys,

just wanted to share my brand new streamlit-agraph component with you.
It is an interactive graph visualization component. In the future I might make it more customizable.
If you have any ideas how to improve it, leave a comment bellow, or send me a mssage.
Also if you are intersted in collaborating on this, give me a ping.

streamlit-agraph

At this point I’d also like to thank Tim (@tc1 ) for the nice tutorial.
You pinpointed exactly the process and what was necessary to know,
to get the job done.

Cheers
Chris

[thiago]

Nice! Would be great to see a demo too

[chris_klose]

Sure Something like this ?

Next, I want to include images for each node and a sidebar for the customization of properties. However - here comes my special requirement - is it possible to do this in a sidebar on the right side of the app?

Some sidebar extention á la st.sidebar(align=“right”) or so would be nice.

It would be great too, if one could open/close the sidebar with a little button á la st.sidebar(mode=“dynamic” and default = static.

[andfanilo]

Wow @chris_klose how did I miss this, this looks amazing !

Could you add it to the Components Community Tracker so it doesn’t get lost ?

Best,
Fanilo

[Charly_Wargnier]

Looks fab Chris!
And wow, that footer!

[chris_klose]

@andfanilo thanks for sharing this page, i did not even not a wiki of all components exists in the forum

the footer ofc haha!

[aaroncolesmith]

Hi @chris_klose – thanks for sharing this, it’s really cool. Should you be able to pass in an edge weight to have thicker edges between nodes? I’ve tried doing it, but it appears they all draw the same thickness.
Here is how I’m creating the nodes / edges:

for i, r in d.head(300).iterrows():
    nodes.append(Node(id=r['player'], size=400))
    nodes.append(Node(id=r['team'], size=400, svg=r['team_img']))
    edges.append(Edge(source=r['team'], target=r['player'], weight=r['cnt']) )

And here is the result:

[chris_klose]

Hi @aaroncolesmith,

this agraph looks great and sorry for late reply.
You can modify the stroke width according to:

by passing this as argument.

Best regards
Chris

[picchio18]

HI @chris_klose many thanks for this wonderful component!

I am currently using it to display extracted relations in NLP and I am wondering if it’s possible to add/generate a sort of colour legend to identify every node accordigly.

Something like: blue node for entity 1, green node for relations, yellow node for entity 2.

Many thanks for your help and for that of anyone who can contribute!

Cheers

[aaroncolesmith]

@chris_klose – thanks for the response, I’ll check that out. I went down the pyvis route instead for the time being, feel free to the results here - https://share.streamlit.io/aaroncolesmith/nfl_mock_draft_network/main/nfl_mock_draft_network.py

[chris_klose]

@picchio18

Something like: blue node for entity 1, green node for relations, yellow node for entity 2.

OMG, @picchio18 this looks amazing!
I actually had the same idea a while ago (Implement Node classes. · Issue #6 · ChrisDelClea/streamlit-agraph · GitHub) and tried to wrap my head around it but went out of time. I even created a request in the repo for d3-graph (LinkLabel, Pictures and Classes for Nodes · Issue #390 · danielcaldas/react-d3-graph · GitHub) and - surprise - there is a solution.
It’s not that easy however.
Using classes would require to write some extra javascript/react functions.
If you’re interested in helping me to implement this, would be very much appreciated.

@aaroncolesmith I see, guess pyvis is a good alternative these days.
Is it possible to show pictures/Icons inside the node?
Ofc the app looks quite fancy too !

Best regards
Chris

[picchio18]

Hi @chris_klose , many thanks for your reply and sorry for getting back to you after so many days.
Unfortunately my javascript skill are too basic to help you in any meaningful way but I have found a “solution” to my problem by appending additional nodes with colour and id information and specifying x and y coordinates so that they always appear in the top-left corner.

It’s not ideal but it works fine for me

[yeshwanth1312]

Hello,

How can I add one-directional/bi-directional arrows to the graphs?

Thanks
Yeshwanth

[chris_klose]

Hello @yeshwanth1312 ,

thanks for this interesting question.
I think as of today, there is no explicit way to specifiy bi-directinal graphs.
You can modify if you want to have a direct or undirected graph with directed=True or directed=False
to have arrowheads or not.

As a work-around you could simply pass the directed=True in the configs in the link section (if a recall right) and add links in both directions edge(A,B) and edge(B,A) so you would get it done.
Just don’t know if it looks that nice, cauz labels would overlap.

Let me know if that helps!

Best regards
Chris

[taufiqibrahim]

Hi @chris_klose

Thanks for sharing this amazing component.

Do you have any plan related to Search functionality?

I just found this component yesterday and I am looking for opportunity to create Search on top of this.

I am thinking of using Gremlin to perform the search. Let’s assume that the Gremlin query has been developed and can return result.

Do you have any suggestion on where should I start to call the query and visualize those result?

Thanks

[chris_klose]

Hi @taufiqibrahim,

thanks for your question .
So far agraph-component does not support any query language out-of-the-box.
What you can do ofc is to use the python package for it and just pass over the results to agraph.
All you have to do for that is to write a small wrapper that converts your gremlin graph to the input-format required by agraph-component.

If I can help you on any specific example let me know.

Best regards
Chris

[taufiqibrahim]

Hi @chris_klose

Yeah, i am thinking the same thing, like using gremlinpython package.

But, I am still wandering how to attach search bar which should do somekind of callback and return some possible suggestion.

Then, user will click on one of the suggestion, then it will call another call to get the graph data.

Do you know any example of streamlit that uses search bar?

[imClumsyPanda]

Hi Chris,

I’m new to graph, so glad to see such a great component! And wondering is there any possibility that I can use Streamlit-agraph with neo4j or with py2neo?

[Heping_Shi]

Hi Chris, I just found your great agraph component. Do you have plan to add tooltip to graph on hover? Thanks.

[asehmi]

@chris_klose Very nice!