Showing off the streamlit-agraph Component

Show the Community!
21

This is a very cool component, already thinking about to include it in an analysis idea :thinking:

22

Thanks :pray:t3: for the kind words, guys.

23

I have a Streamlit app to work with SQL databases using mysql.connector

Could i make a ER (entity relationship) diagram of the databases I connect using Agraph?

One example is this image: https://i.stack.imgur.com/4MgIk.png

I hope it’s possible, everyone in the office will envy me :stuck_out_tongue:

24

thanks @chris_klose . is there anyway to add and remove nodes and edges on the fly using the GUI? do you have any idea how to implement such thing?

25

Amazing component!! :slight_smile:

I’m wondering if there is any way to prevent the double click on a node. When I double click, I get this error:
FileNotFoundError: [Errno 2] No such file or directory: '{path}\\{node_id}'.
Also Streamlit opens a new page with the message: read error.

Is there a way to prevent this behavior?

26

Haven’t tried the component; but if you don’t get an appropriate response from the forum, you could try enclosing your code within a try-except loop to bypass the error.

Cheers

27

Thanks for the reply @Shawn_Pereira . I tried this, but the problem is that the exception is captured by the get() method of the ComponentRequestHandler class.

28

hey @lavizoon ,

sure. You could simple have a form that allows you to input the data of the node and edges you wanna have combined with a st.button() . If you push the button, you just have to add the node and edges to the nodes and edges you pass to the component. Let me know if that works for you!

1 Like
29

Hey @Marilia_Cristina ,

this happens due to the fact that the (if I remember correctly) the title opens the passed uri in another tab.
If you want to change this behavior, I guess you would need to edit the source code of the component.

1 Like
30

What a cool component :heart_eyes:, but I have something to ask:

  1. every time I click the node, it seems the streamlit rerun, but if I click and drag it, everything looks normal and the node becomes bold. How to stop this behavior so we don’t need to rerun
  2. is it a way to save the visualization into a jpg/png file using st.button to download?
2 Likes
31

Hi there, I was wondering if you had found a way to save the visualization as a jpg file. I have been looking at ways to do it and the best answer I have come up with is to save the entire page as an html file and then scrape it. However, this would not allow the graph to be visualized properly.

32

oh its actually useful ! thank you for creating this graph visualisation tool

33

The simplest way is to right-click and select “Save image as…”

34

Hey @chris_klose
Thanks for sharing this.
I would like to just show the agraph without any zooming functionality. And I want to have the graph auto populate without zooming in to see the where the graph is. Is it possible?

35

I have installed v.0.0.45. I have two issues with the package though:

  1. It doesn’t show the node images:
Node(
                    id=name,
                    label=role,
                    # title=name,
                    size=25,
                    shape="circularImage",
                    image="Users/Documents/src/img/foo.png",
                )

image
image684×684 21.3 KB

  1. When I click on a node, it then show a blank page and i need to refresh streamlit app to re-render the graph.
    image
    image2872×1666 156 KB

Any idea hw to fix these issues?

36

Hello Faizhalas,

Did you manage to resolve the issue of the component re-running everytime we click on the node?

I am facing the same and wanted to know of the solution if solved.

Thanks
Abhishek

37

i believe your images have to be moved in the streamlit-agraph build folder where the package is installed
venv\Lib\site-packages\streamlit_agraph\frontend\build
otherwise i think the other way is to use urls from a server.
if there is another way to use the images/icons located in the project folders i would like to know please if anyone did it

38

Hello @Abhishek_Shivkumar,

I think I found an answer,
I applied those interractions setting and it work, it does not reload everytime you click on a node :

config_builder = Config(
            width="100%",
            height=600,
            directed=False,
            component_instance = random_key,
            collapsible=True,
            maxVelocity=50,
            interaction={
                "selectable": False,  
                "dragNodes": True,  
                "dragView": True, 
                "zoomView": True,
            },
        )

But the problem for double click is still there, if anyone find a solution please @ me.

39

I have created two branches of the component.
The master branch disables the single click and enables the double click, and sets the component value to the label like the single click did. This was so I could use the double click to switch pages for a project of mine.

Another branch disables all events by commenting out the click events. This seems to work though feels very ad-hoc.
For both I have included the build folder as otherwise you cannot directly install them via pip.

Feel free to take a look :slight_smile: