label below nodes, simplify node highlighting

html/force-big.css

@@ -6,15 +6,13 @@
   stroke-width: 2.5px;
 }
 
-.node text {
-  font-size: 11px;
+.node text, .label text {
+  font-size: 10px;
   fill: #000;
-  font-weight: bold;
 }
 
 .link line {
   stroke: #ddd;
-  stroke-opacity: 1;
   stroke-width: 5px;
 }
 
@@ -61,3 +59,7 @@
   fill: #ddd;
   font-size: 0.8em;
 }
+
+.label rect {
+  fill: rgba(255, 255, 255, 1.0);
+}

html/force-light.css

@@ -7,14 +7,13 @@
   stroke-width: 2.5px;
 }
 
-.node text {
+.node text, .label text {
   font-size: 10px;
   fill: #333;
 }
 
 .link line {
   stroke: #777;
-  stroke-opacity: 1;
   stroke-width: 2.5px;
 }
 
@@ -68,3 +67,11 @@
   fill: #777;
   font-size: 0.8em;
 }
+
+.label rect {
+  fill: rgba(255, 255, 255, 0.8);
+}
+
+.label.highlight rect {
+  fill: rgba(255, 255, 100, 0.9);
+}

html/force.css

@@ -12,6 +12,11 @@
   stroke-width: 5px;
 }
 
+.faded {
+  stroke-opacity: 0.2;
+  fill-opacity: 0.2;
+}
+
 .node.highlight ellipse {
   fill: #FFF0B3;
 }

html/force.js

@@ -156,29 +156,29 @@ function isConnected(a, b) {
          a.index == b.index
 }
 
-function fade(opacity) {
+function highlight(b) {
   return function(d) {
     if (dragging) return
 
     vis.selectAll("g.node")
-       .style("stroke-opacity", function(o) {
-         var connected = isConnected(d, o)
+       .classed("faded", function(o) {
+         return !(isConnected(d, o)) && b
+       })
+       .classed("highlight", function(o) {
+         return isConnected(d, o) && b
+       })
 
-         if (connected && opacity != 1)
-           d3.select(this)
-             .classed("highlight", true)
-         else
-           d3.select(this)
-             .classed("highlight", false)
+    vis.selectAll("g.label")
+       .classed("faded", function(o) {
+         return !isConnected(d, o) && b
+       })
+       .classed("highlight", function(o) {
+         return o == d && b
+       })
 
-         thisOpacity = connected?1:opacity
-         this.setAttribute('fill-opacity', thisOpacity)
-         return thisOpacity
-       })
-
-    vis.selectAll(".link *")
-       .style("stroke-opacity", function(o) {
-         return o.source === d || o.target === d ? 1 : opacity
+    vis.selectAll(".link")
+       .classed("faded", function(o) {
+         return !(o.source === d || o.target === d) && b
        })
   }
 }
@@ -238,6 +238,8 @@ vis.append("g").attr("class", "links")
 
 vis.append("g").attr("class", "nodes")
 
+vis.append("g").attr("class", "labels")
+
 var linkedByIndex
 
 var force = d3.layout.force()
@@ -261,11 +263,11 @@ var force = d3.layout.force()
                 switch (d.type) {
                   case "vpn": return 0.01
                   case "client": return 1
-                  default: return 0.5
+                  default: return 1
                 }
               })
 
-force.on("tick", function() {
+force.on("tick", function(e) {
   var size = force.size()
   var nodes = force.nodes()
   var nl = nodes.length
@@ -290,6 +292,10 @@ force.on("tick", function() {
   vis.selectAll(".node").attr("transform", function(d) {
     return "translate(" + d.x + "," + d.y + ")";
   })
+
+  vis.selectAll(".label").attr("transform", function(d) {
+    return "translate(" + d.x + "," + d.y + ")";
+  })
 })
 
 var data
@@ -479,6 +485,9 @@ function update() {
 
                   return true
                 })
+                .sort(function(a, b) {
+                  return (a.flags.client?1:0) < (b.flags.client?1:0)
+                })
 
   var node = vis.select("g.nodes")
                 .selectAll("g.node")
@@ -493,8 +502,8 @@ function update() {
                   return d.id
                 })
                 .attr("class", "node")
-                .on("mouseover", fade(.2))
-                .on("mouseout", fade(1))
+                .on("mouseover", highlight(true))
+                .on("mouseout", highlight(false))
                 .on("click", show_node_info)
                 .call(node_drag)
 
@@ -512,8 +521,7 @@ function update() {
     .attr("rx", function(d) {
       var r
       if (d.flags.client) r = 4
-      else if (visible.labels) r = Math.max(10, d.name.length * 5)
-      else r = 10
+      else r = 8
 
       d.rx = r
 
@@ -522,30 +530,48 @@ function update() {
     .attr("ry", function(d) {
       var r
       if (d.flags.client) r = 4
-      else if (visible.labels) r = 10
-      else r = 10
+      else r = 8
 
       d.ry = r
 
       return r
     })
 
-  nodeEnter.filter(function(d) {
-      return !d.flags.client
-    })
-    .append("text")
-    .attr("class", "name")
-    .attr("text-anchor", "middle")
-    .attr("y", "4px")
+  var label = vis.select("g.labels")
+                .selectAll("g.label")
+                .data(nodes.filter(function(d) {
+                      return !d.flags.client && visible.labels
+                    }), function(d) {
+                    return d.id
+                  }
+                )
 
-  node.selectAll("text.name")
+  var labelEnter = label.enter()
+                    .append("g")
+                    .attr("id", function (d) {
+                      return d.id
+                    })
+                    .attr("class", "label")
+
+  labelEnter.append("rect")
+            .attr("y", "10px")
+            .attr("x", function(d) { return - d.name.length * 7/2 })
+            .attr("width", function(d) { return d.name.length * 7 })
+            .attr("height", "15px")
+
+  labelEnter.append("text")
+            .attr("class", "name")
+            .attr("text-anchor", "middle")
+            .attr("y", "21px")
+            .attr("x", "0px")
+
+  label.selectAll("text.name")
       .text(function(d) {
-        if (visible.labels)
-          return d.name
-
-        return ""
+        return d.name
       })
 
+  label.exit().remove()
+
   nodeEnter.append("title")
 
   node.selectAll("title")