Dependency Wheel - this.linksTo is undefined after calling node.update in afterAnimate event

Expected behaviour

Related nodes get highlighted and the hover popup appears. No JavaScript error.

We use the afterAnimate event to turn the labels outward like they were when we used D3 Chord diagram.

Actual behaviour

Highlighting related nodes and showing the hover popup are broken. There is a JavaScript error in setNodeState.

Chrome/Edge:
"Cannot read property 'concat' of undefined"
sankey.src.js: 187

Firefox:
"this.linksTo is undefined"
sankey.src.js: 187

Live demo with steps to reproduce

http://jsfiddle.net/nsk2rzvf/

Attempt to hover over any part of the dependency wheel. It does not highlight related nodes or show the hover popup as expected. Check the browser console for JavaScript errors.

Product version

Highcharts 7.1.1 (still affects 7.1.3)

Affected browser(s)

Occurs in Windows 10 x64 with Chrome 76.0.3809.100 (x64), Firefox 68.0.2 (x64), and Edge 44.18362.1.0 (EdgeHTML 18.18362).

Workaround

On one node in the Dependency Wheel, this.linksTo, this.fromNode, and this.toNode are undefined. If we update the source to accommodate those situations, the errors do not throw anymore, and everything appears to work as expected. We aren't experts though.

The workaround requires modifying sankey.src.js (7.1.1):

setNodeState: function () {
    var args = arguments,
        others = (this.isNode && this.linksTo) ? this.linksTo.concat(this.linksFrom) :
            [this.fromNode, this.toNode];

    others.forEach(function (linkOrNode) {
        if (linkOrNode) {
            Point.prototype.setState.apply(linkOrNode, args);

            if (!linkOrNode.isNode) {
                if (linkOrNode.fromNode.graphic) {
                    Point.prototype.setState.apply(linkOrNode.fromNode, args);
                }
                if (linkOrNode.toNode.graphic) {
                    Point.prototype.setState.apply(linkOrNode.toNode, args);
                }
            }
        }
    });

    Point.prototype.setState.apply(this, args);
}

[pawelfus]

Thank your for reporting the issue @jmt406

First of all, thanks for sharing the workaround!

It seems that node.update() is broken. When updating any (except the first) node, indexes for points (nodes and links) are wrong, resulting an empty entry in series.points array. That array is used to apply inactive state - which cause this error. Your workaround will remove the error, but other issues may still show up.

Simplified demo:
http://jsfiddle.net/BlackLabel/fncbewy6/

Steps:

• click "update the third node"
• click "update the fourth node"
• compare results in console: after first update, point.index is wrong, after second update we can observe two extra entries in series.points, where one of them is empty.

Internal note:
Probably updating parallel arrays create new entry, because index is higher than points.length. Fixing the point.index issue should resolve the issue.