Node positions jump when hovering in hierarchical layout

[rafael-saback]

Component: Network
Browser: Chrome
OS: Ubuntu 18.04

Short description

I'm currently having issues with a strange behavior (bug?) where the nodes jump (i.e. positions are recalculated) when I interact with nodes in the hierarchical layout.

Long description
A real example (and a gif) is worth more than a thousand words, so try hovering any node in this jsbin example and see what happens. You can also see the gif below:

This strange behavior happens in two different scenarios:

1. When there are nodes without any connections (in this case a6 and a7)
2. When I hide and show nodes (you can double click a8 or a9 to hide/show child nodes)

I'll talk about each one of them separately.

Nodes without any connections

When you hover a node, the positions are recalculated and the nodes jump. I've been investigating this for a few days, and here are my findings so far:

• (jsbin) The positions are recalculated because the property "hidden" is set (either to true or false). If I do not use that property (i.e. leave it undefined), this recalculation never happens. This probably has to do with what was mentioned on this comment of issue #3150.
• (jsbin) If I remove the nodes that have no connections (i.e. a6 and a7) from the network, this problem also stops happening.
• (jsbin) Similarly, If I move the nodes a6 and a7 to the end of the DataSet's input vector, be surprised, this problem also stops happening.
• My conclusion so far, is that the initial position is a wrong one. It seems to me that this initial position would be correct if nodes a6 and a7 didn't exist in the network.
• When we hover a node the function update from the node is called, and that's when the positions are recalculated to the correct values.

Hide and show nodes

In this second example:

1. Go to this jsbin example
2. Click twice on node a8 or a9 to hide the child nodes
3. Hover any node
4. Result: the same jump happens

In this scenario, if I emit 4 times (or more) the event _dataChanged after hiding/showing nodes (as in this jsbin example) the layout positions are displayed correctly and there's no position recalculation when I hover nodes.

I've added the following code to forcefully emit _dataChanged event:

network.body.emitter.emit('_dataChanged');

But oh well, I rather not mess around with vis' internal events.

Can someone think of a work-around to solve these problems I'm facing?