Setting coordinates for streamlit_agraph

I am wondering if it’s possible to set specific coordinates for nodes positions in streamlit_agraph?
I am trying to plot a tree that would go left to right or top to bottom.

Hi @Darya_Rudych, welcome to the forum :wave:. The person for that question is @chris_klose.
What I can say is you can do that using Networkx. I have some examples if you need it.

Hi @Darya_Rudych,

thanks for the question. In general, everything is possible until you find it is not :smiley:.
Sorry, just kidding. It is possible and the hell yes, it would be great to have an in built function for hierarchies in agraph. If you implement something, let me know or feel free to fork!

So this is how you can set coordinates:

    config = Config(height=500,
                    link={'labelProperty': 'label', 'renderLabel': True}

    # agraph(list(store.getNodes()), (store.getEdges()), config)
    nodes = []
    edges = []
    nodes.append(Node(id="Spiderman", label="Peter Parker", size=400, x=100, y=100))
    nodes.append(Node(id="Captain_Marvel", size=400, x=100, y=200))
    edges.append(Edge(source="Captain_Marvel", label="friend_of", target="Spiderman"))

    agraph(nodes, edges, config)
  1. Set staticGraph=True or staticGraphWithDragAndDrop=True, depending on your needs (config).
  2. Add cords (x, y) to each node. It is not yet possible to do so for the TripleStore.

Please notice that if you set staticGraph=True then staticGraphWithDragAndDrop won’t work.
(At least that is what the docu says.)

Happy new year :unicorn::balloon::tada:!

Many thanks to @FabioGrasso! He found a simple and beautiful way to plot trees with agraph.
If you’re interested, check out how he did it: streamlit-agraph/ at master · fabiogra/streamlit-agraph · GitHub + mark this as a solution :slight_smile: - thanks.

1 Like