Hide edges on viewport animation

Issue type

Feature request

Description of new feature

Setting hideEdgesOnViewport to true in the initialization options can give a performance improvement in very large graphs when the user pans and zooms. However, when the viewport is animated with cy.animate(), the edges remain visible.

Animating the viewport of very large graphs may be more performant if edges are hidden during the animation.

Motivation for new feature

I have a large graph (~1k nodes and ~6k edges). Visualizing it is quite performant, but animating it isn't at all.

It's possible to do a workaround: you can, before animating, update the style to set edges to visibility: hidden and then back to visibility: visible in cy.animate()'s callback. However, performance here is unpredictable -- some animations just jump, others are quite smooth.

I'm not familiar with this project's codebase, but if someone can confirm that this should give a perf boost in theory, then the change should be as simple as changing this line to check if the graph is animated:

var vpManip = (r.pinching || r.hoverData.dragging || r.swipePanning || r.data.wheelZooming || r.hoverData.draggingEles);
var hideEdges = r.hideEdgesOnViewport && vpManip;

[maxkfranz]

I think that the scope of the proposed feature should be expanded: An option to hide edges on any animation is not sufficient. Maybe it's sufficient for your use-case, but it could cause conflicts in others. For example, a consumer may want to animate one particular edge and hide the other edges.

(1) This feature should not be coupled with hideEdgesOnViewport .

(2) This feature should not be coupled to animation.

One approach would be to allow for manually setting when edges should be hidden. That's more flexible, but it has usability concerns: A consumer could mistakenly use something new showEdges() function errantly -- for example, expecting the function to show edges that have had display:none set.

Generally, I'd prefer to remove features like hideEdgesOnViewport from the library -- say for v4 -- and leave that sort of behaviour to extensions or app-level code.

[maxkfranz]

Or do you mean that you want to hide edges for viewport-only animations, such as an animated pan?

Ah yes, sorry, I was not clear in the initial post. I just meant for animated pans/zooms.

[maxkfranz]

Maybe we could just add cy.animated() as a condition within vpManip?

Yes, unless cy.animated() is also true when running e.g. an animated layout? In that case, hideEdgesOnViewport would hide the edges not only on viewport changes but on any animation.

[maxkfranz]

cy.animated() is true if the viewport is animated (zoom/pan transform). It doesn’t matter what originated the animation. An animated layout may or may not animate the viewport. It depends whether you set the layout to manipulate the zoom/pan.

[maxkfranz]

I tried the proposed change with cy.layout({ name: 'random', animate: true, fit: true }).run() on the debug page. It seems to work OK, so I'm including this for 3.9. I don't think any documentation changes are necessary.