app.js mouseenter/mouseleave processing needs blocked during transition animations

[Brett Meyer]

Hey Neil! This is in regards to https://gist.github.com/Neilos/584b9a5d44d5fe00f779. Thanks very much for putting that together -- it's exactly what I've been looking for. Artificer (artificer.jboss.org) will be using it to visualize bi-directional relationships between artifacts...

One bug I came across: every single instance of mouseenter and mouseleave need to have their actions blocked when showHideChildren is running. If you use TRANSITION_DURATION with its default (and therefor animate the transitions), the actions you do within mouseenter and mouseleave must wait until the animation is finished. Without it, try double clicking one of your nodes and quickly mouseover something while it transitions. It'll end up with really screwy results.

I added a isTransitioning global var, defaulted to false. The logic within each mouseenter and mouseleave function is surrounded with if (!isTransitioning). showHideChildren looks like:

function showHideChildren(node) {
    isTransitioning = true;

    hideTooltip();
    if (node.state === "collapsed") { expand(node); }
    else { collapse(node); }

    biHiSankey.relayout();
    updateRelationshipVisualization();
    link.attr("d", path);
    restoreLinksAndNodes();

    // Don't allow mouseenters to work until the transition animation is finished.
    setTimeout(function(){
        isTransitioning = false;
    }, TRANSITION_DURATION);
}

[Neil Atkinson]

Cheers for this Brett

The fix was a little more complicated than it first seemed, because some of the animations involved two consecutive transitions and the same problem (interrupting animations) was also a potential problem on the initial page load.

I went with something pretty close to what you suggested, and have updated the gist accordingly.
https://gist.github.com/Neilos/584b9a5d44d5fe00f779/6e7d9c0bfcd1f9fba85339b231d17cbac6212b06

If you want to see the example in action you might have to wait for the bl.ocks.org cache to clear first. Alternatively, just use the link below:
http://bl.ocks.org/Neilos/584b9a5d44d5fe00f779/aa7409c5d86bd49b23353b11d9a43c9f2c77dfe1