Question

I’m using the JavaScript InfoVis Toolkit and in particular the SpaceTree visualisation.

I need to expand all of the tree and then show a path from a particular leaf node back to the root.

I’ve got the tree to expand just fine but it’s the selection of a leaf node and highlighting the path back to the root that’s causing me some problems.

I’m using the ST.select(node, onComplete) function to select the leaf node I’m interested in and indeed the path back to the root (lines and nodes) are highlighted.

To do this I implemented the onBeforePlotNode and onBeforePlotLine ST.Controller methods to allow me to highlight the nodes back to the root and their plotlines:

onBeforePlotNode: function(node){  
  //add some color to the nodes in the path between the  
  //root node and the selected node.  
  if (node.selected) {  
    node.data.$color = "#dddddd";  
  } else {  
    delete node.data.$color;  
  }  
},
onBeforePlotLine: function(adj){
  if (adj.nodeFrom.selected && adj.nodeTo.selected) {
    adj.data.$color = "#33CC33";
    adj.data.$lineWidth = 5;
  } else {
    delete adj.data.$color;
    delete adj.data.$lineWidth;
  }
}

The problem is that when I call ST.select() to highlight the leaf node all child nodes beneath this level are collapsed/hidden.

To see this in action I’ve uploaded a couple of examples:

Full tree expansion – leaf not selected
Leaf selected – path shown, but all children below node N2 missing

You may need to scroll down if your browser window is a bit small.

So my question is, how do I show nodes from a leaf node back to the root node in JavaScript InfoVis without collapsing level 3’s children (level 1 being the root)?

If there was a way to find my leafe node and walk the tree back to the root (setting styles on the way) then I’d be happing doing that

Answer 1

OK after digging through all that code, cluttering it with console.log() calls and breakpoints, I found it.

It has to do with the inital onClick call, the fact that the graph as an update loop that’s running in the background and the fact that everything besides onClick seems to ignore the busy state of the graph.

What happens

1. onClick gets called and triggers a chain of events, part of them is asynchronous
2. select is being called which is more or less synchronous and does its work
3. onClick finally gets done and one of it’s side effects is that it re-expands the graph
4. select has set clickedNode and now onClick uses the newly set value of it and screws up

Solution

We need to redesign select so it respects the busy state of the graph:

select: function(id, onComplete) {
    var that = this;
    if (this.busy) {
        window.setTimeout(function() {
            that.select(id, onComplete);

        }, 1);
        return;
    }
    // original select code follows here (remove the old var that = this; assignment)

That’s all, we simply check for the busy state and delay select until it’s false.
This should also be applied to all other function besides onClick that are called from the outside, the library designer here did a bad job of indicating what has side effects and what has not though.