forcegraph: keep objects highlighted on updates

lib/forcegraph.js

@@ -8,6 +8,7 @@ define(["d3"], function (d3) {
     var el
     var doAnimation = false
     var intNodes = []
+    var highlight
 
     var LINK_DISTANCE = 70
 
@@ -97,6 +98,48 @@ define(["d3"], function (d3) {
       animatePanzoom(translate, scale)
     }
 
+    function updateHighlight(nopanzoom) {
+      if (highlight !== undefined)
+        if (highlight.type === "node") {
+          var n = nodesDict[highlight.o.nodeinfo.node_id]
+
+          if (n) {
+            link.classed("highlight", false)
+            node.classed("highlight", function (e) {
+              return e.o.node === n.o.node && n.o.node !== undefined
+            })
+
+            if (!nopanzoom)
+              panzoomTo([n.x, n.y], [n.x, n.y])
+          }
+
+          return
+        } else if (highlight.type === "link") {
+          var l = linksDict[linkId(highlight.o)]
+
+          if (l) {
+            node.classed("highlight", false)
+            link.classed("highlight", function (e) {
+              return e.o === l.o && l.o !== undefined
+            })
+
+            if (!nopanzoom) {
+              var x = d3.extent([l.source, l.target], function (d) { return d.x })
+              var y = d3.extent([l.source, l.target], function (d) { return d.y })
+              panzoomTo([x[0], y[0]], [x[1], y[1]])
+            }
+          }
+
+          return
+        }
+
+      node.classed("highlight", false)
+      link.classed("highlight", false)
+
+      if (!nopanzoom)
+        panzoomTo([0, 0], force.size())
+    }
+
     function tickEvent() {
       link.selectAll("line")
           .attr("x1", function(d) { return d.source.x })
@@ -263,47 +306,27 @@ define(["d3"], function (d3) {
            .links(intLinks)
            .size([diameter, diameter])
 
+      updateHighlight(true)
+
       if (node.enter().size() + link.enter().size() > 0)
         force.start()
     }
 
     self.resetView = function () {
-      node.classed("highlight", false)
+      highlight = undefined
-      link.classed("highlight", false)
+      updateHighlight()
-
-      panzoomTo([0, 0], force.size())
-
       doAnimation = true
     }
 
     self.gotoNode = function (d) {
-      link.classed("highlight", false)
+      highlight = {type: "node", o: d}
-      node.classed("highlight", function (e) {
+      updateHighlight()
-        return e.o.node === d && d !== undefined
-      })
-
-      var n = nodesDict[d.nodeinfo.node_id]
-
-      if (n)
-        panzoomTo([n.x, n.y], [n.x, n.y])
-
       doAnimation = true
     }
 
     self.gotoLink = function (d) {
-      node.classed("highlight", false)
+      highlight = {type: "link", o: d}
-      link.classed("highlight", function (e) {
+      updateHighlight()
-        return e.o === d && d !== undefined
-      })
-
-      var l = linksDict[d.id]
-
-      if (l) {
-        var x = d3.extent([l.source, l.target], function (d) { return d.x })
-        var y = d3.extent([l.source, l.target], function (d) { return d.y })
-        panzoomTo([x[0], y[0]], [x[1], y[1]])
-      }
-
       doAnimation = true
     }