performance and layout invalidation

[gg4u]

Hi @anvaka ,

I would like to better understand how did you design the library, relating the part of rendering when you place nodes and links.

For advanced rendering layout (in the SVG context) one would like to adjust CSS based on a number of factors (node position, length of text, zoom, node decorators, etc.). I am applying these techniques to improve readability of graphs, cross-devices.

I observe painting process in the web console debugging tools, and see that browser adjust the graph layout at each interaction, even if the renderer is paused.

For graphs with relative few number of nodes, highly decorated, performance start to clog, especially in mobiles.

Is there an API that could tell the browser to adjust the graph layout only for nodes that are modified?

As example, I focused on position, with the objective to adjust layouts only of nodes that "moves" enough respect to previous iteration.

#1
I tried to pin all nodes and unpin current ones, but did not achieved expected result: all graph is laid out again; also,

nodeUI.attr('transform',
                      'translate(' +
                            Math.floor(pos.x ) + ',' + Math.floor(pos.y - nodeSize/2) +
                      ')');

is always called: also for nodes that are pinned.

#2

I tried to wrap the position of nodes in requesteAnimationFrame():

requestAnimationFrame(function(){
      nodeUI.attr('transform',
                       'translate(' +
                            Math.floor(pos.x ) + ',' + Math.floor(pos.y - nodeSize/2) +
                      ')');
}

but also this attempt did not work out: all nodes are placed one above the other, because all are positioned respect to the position of last processed node (I think).

#3

I tried to store coordinate of nodes at N-1 iteration, willing to call node positioning only if nodePosition (at time _N_) - nodePosition(at time _N-1_) ~= 0

but I failed, because I layout.getNodePosition() will return always the position of current layout.step , and so I did not understood how to fetch coordinates of a nodes at a given time.

Could you maybe provide pseudo code for doing so?

Brainstorming time!

Could you share some suggestions to minimise layout invalidation ?

I would like the browser to layout and redraw only portions of graph that have been modified somehow: as example, the one in viewport (I found no solution for SVG , for unlike canvas and webgl, I should validate each graph element) or the one "around" the current node.