New pyvis component for graphs

Show the Community!
#1

Hey community, recently I did a new component called stvis for rendering pyvis graphs. This was for the Tigergraph hackaton, and it is based on a previous work, but hopefully it could be of help for someone else.
here is how it looks:

ezgif.com-gif-maker
ezgif.com-gif-maker514×516 1.53 MB

So if you want to play with this, you can pip install by doing:

pip install stvis

and here is a working example:

from pyvis import network as net
import streamlit as st
from stvis import pv_static

g=net.Network(height='500px', width='500px',heading='')
g.add_node(1)
g.add_node(2)
g.add_node(3)
g.add_edge(1,2)
g.add_edge(2,3) 

pv_static(g)
8 Likes
Streamlit Components - Community Tracker
#3

Hi, I tried. the program generate a graph.html, but its content is blank. no point is showed, I just saw a border without graph. can you tell me why will be like this?

#4

Hi @BeyondMyself, thanks for testing the component. I did check on a different computer, and also see a blank as you but only on Safari, however on firefox or chrome it works Ok. So, I need to check with more detail what is happening. Could you tell me what web browser are you using??

#5

@napoles3d
I was test it in google chrome browser.
Dose it need other python package to work?

#6

Thanks for the reply @BeyondMyself.
You also need to install pyvis, as the component is based on it.
So in principle, you must do something like this for working in a virtual environment:

pipenv --three
pipenv shell
pip install streamlit
pip install pyvis
pip install stvis

it works for me :thinking:

test
test1296×1182 23.9 KB

#7

I find the reason, besides I had solved it.
the program generated the graph.html and the html relies on a javascripts file called vis-network.min.js.
My server can not viste the cdn url, so its graph can not be displayed on browser webpage window.
After I save the content of vis-network.min.js to my python program foulder and fresh the graph.html, the points appear.

Thanks for your amazing work.

I have some new ideas to share with you:
1.may we can add or delete the new point on webpage, through a input button?
this function can set by user to show on webpage or not in python program.
2.maybe we can define the color and shape of new point and their line width, color between each other.
3.after quantity of points is fixed, maybe we can let the graph move randomly like a animation
I also whether let the graph move or not should permit user to set in python program will be better.
Because some user want the graph moving like a animation, other people want see a static page.

I know you can make it more better, come on.

1 Like
#8

Hi @BeyondMyself, sorry for the delay. Glad that you managed the component to work, and good to know about that issue.

About your suggestions, I think that all are razonable, but on the other side, the idea with the component is that anyone just need to know how pyvis work in order to do whatever is desired, and for example I think your three points are more or less easily done just with pyvis functions. But I will keep in mind your request, and maybe later I will come back with something :stuck_out_tongue_winking_eye:

Anyway, whoever is interested and wanted to contribute, here is the repo for this component:

https://github.com/napoles-uach/stvis

Cheers!!

1 Like
#9

Hey, this component is amazing. I do not want the graph to also be shown on a new HTML Page. That is, I only want the graph on my streamlit app without it getting opened in a new tab as well. What should I change?

#10

Hi @Sharan19, that is weird :thinking: it doesn’t works like that on my side… could you share with me your code, and which browser are you using?? I need to figure out how to fix that behaviour.
Thanks for testing the component!!
Regards

#11 
from pyvis import network as net
import streamlit as st
from stvis import pv_static

g=net.Network(height='500px', width='500px',heading='Constructed Graph')

g.add_node(1)
g.add_node(2)
g.add_node(3)
g.add_edge(1,2)
g.add_edge(2,3) 

pv_static(g)

I am using Google Chrome

#12

Hey, I had the same issue, could solve it with setting net.Network(notebook=True, ...). Maybe that still helps someone.

2 Likes
Streamlit and visualization of network(x) structures
#13

Thanks for sharing.

#14

so cool!

1 Like
#15

Wait, how did I miss this :o

Well you know the drill now :slight_smile:

→ Could you edit Streamlit Components - Community Tracker when you have some time :wink: ?

Fanilo :balloon:

1 Like
#16

Cool! Thanks

#17

Hi, I think that I’ve fixed the issue with the graph opening in a new tab. This is corrected in the new version of stvis.
You can install it with

pip install stvis==0.0.2

Please, if the problem persists let me know, I had not faced that problem before, but recently I was aware of that undesired behavior. Not it seems fixed.
Regards!!

1 Like