Highlighting multiple levels of parent/child relationships

[nylen]

Right now the code highlights immediate parent and child nodes when you hover or click a node. A couple of people have asked about making this behavior configurable (e.g. highlight X levels of parents and Y levels of children).

Here are the code changes that would be needed to make this work:

Have a look at the highlightObject function. Right now it adds the inactive class to nodes which are not the current node and are not a child or parent of the current node. You would need to change this function to find all the nodes and edges you want to highlight. I would probably do this as follows:

• Start with the node being highlighted, and walk up and down the tree (loop over depends and dependedOnBy), setting a property like highlightThis to true on each node that should be highlighted. If you find a node that already has highlightThis set, you’re in a cycle of the graph, so stop to avoid infinite recursion.
• Use the highlightThis property you just set to determine whether to set the inactive class on each node.
• Loop over all edges (graph.lines) and remove the inactive class if the source and target are both highlighted, otherwise add the inactive class.
• Finally, loop over all nodes again and delete node.highlightThis;.

That’s the simplest algorithm I can think of that’s not O(n^2) or worse. I’d accept a pull request for this, if the code is clean and there are some options added to config.json to support the new behavior.