Sparse graph layout on first run of application.

[LordLean]

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!

[ChrisDelClea]

Hi Alex,

that's indeed interesting. I never run into that issue myself. It might be the case that the gravity is not triggered initially. What you could try to do is to modify the gravity or trigger an artificial rerun of streamlit. Another cause could be that the canvas is too large. The default in the config is staticGraph = False and staticGraphWithDragAndDrop=False, so you can just drop it, I guess?

If this problem hits other people too, I will try to examine it and fix it in future updates. Thanks for pointing it out.

Nice graph by the way :)

Best regards Chris

[LordLean]

Could be some gravity related feat actually - it's interesting because on that first run it appears almost as if it's started to pull the nodes together then stops. Good point on the canvas size I'll play around with that as I do have it set to quite a large area currently. Re the unnecessary parameters: I was experimenting to see if they might have had an effect but I'll remove them if they're not the cause.

Glad you like the graph haha, I think this one below is my favourite thus far:

It's mapping headlines/queries used on Twitter's API search with a focus on the links shared to external sites. The node hierarchy goes like:

Node Class	Colour	Size (1-5, 1 being largest)
Headline/Query	Red	1
Topic Classification	Yellow	2
Domain Name	Light Green	3
URL	Dark Green	4
Datetime of Tweet	Dark Red/Brown	5

Thanks for the reply too, I'll let you know if I work out what was the cause.

[ChrisDelClea]

Looks awesome! Would be pleased to see you tweeting about it.

[thunderbug1]

I have the same issue. I think it is some kind of issue with the widget size and the monitor resolution. On my main monitor (4k) the layout of the nodes of my app looks good with this config:

config = Config(width=1000, height=1000, .....

on my other monitor (1080p) the node layout is screwed. There I can only fix it by reducing the size of the widget to:

config = Config(width=400, height=400, ....

anything larger than that leads to this issue, however, this widget size makes it unusable on high-res monitors. Is there a way to make the widget size dynamic?

[hazeez]

Hi,

I am also facing the same issue. Couple of days back i ran the same code in my 14'' laptop screen, it worked and the graph rendered nicely. When I run the same code with a external HD monitor (1920 by 1080), all the nodes appear small and are connected very far away. I tried changing the height and width still the same issue persists.

Looks like the gravity is not getting triggered. Anything to make it artificially triggerred?

Now running the same code in 14" laptop - have the same issue.

[mhabedank]

I cant see the images above, but I assume this is about the graph getting really big in size with long edges? I have the same issue when using it with a higher width and height value (e.g. 1200x700).