question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Edges are drawn overlapping Nodes

See original GitHub issue

What should I do in afterRenderEdge to make the edges not overlap the nodes, if possible?

Screenshot from 2020-04-28 00-03-31

Issue Analytics

  • State:open
  • Created 3 years ago
  • Comments:8 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
ajboghcommented, Jun 29, 2020

I’ll reopen this as a feature request.

The background to why this is difficult is that edges are added to the DOM after the nodes are. Even though everything is running asynchronously, you may still notice that edges are always below nodes. The reason we render edges last is because in prior builds you would see an edge render without the attached nodes, and because edges tended to have a faster rendering cycle than the nodes, you might see a bunch of edges rendered without any nodes. This was undesirable, so I changed the code to render edges after nodes.

What could be done is when edges are rendered, the code could find the first node element and insert the new edges before that node, giving it a lower natural z-index. There might be other CSS methods available, but I believe that using the DOM order is the best approach.

We could also try using a node container and an edge container to group all of the edges above the nodes in the DOM. The problem with this is that it’s a breaking change and could cause more problems than the previous method described above.

Edges that are being moved will always render on top of everything since they are copied to a container at the end of the DOM.

1reaction
tamiofcommented, May 13, 2020

I came across this issue, and also in real need for this feature to play around with the z-index of the edges not to go on top of the nodes. Hope you guys consider this for the next build. Really like this project, kudos to you.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Avoid overlapping of nodes and edges in Networkx
no nodes overlap; no edges overlap; nodes are close to each other to avoid extra-long edges. My outcome is: enter image description here....
Read more >
Avoid edges and labels overlapping automatically - TeX
I would like to avoid edges and labels overlapping. I have seen different solutions, but all of them need manual adjustments.
Read more >
eclipse/elk - Gitter
They're drawn by my tool as having nonzero height (as you can see in the image) ... Similarly, is it guaranteed to not...
Read more >
Using Spring Algorithms to Remove Node Overlapping
Two issues might cause node overlapping when one draws a picture of a graph. The flrst issue occurs when applying a layout algorithm...
Read more >
Drawing nodes that don't overlap - Google Groups
Drawing nodes that don't overlap. 4409 views ... I'm trying to draw a graph like this and, after poring over the docs for...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found