diff --git a/html/force.js b/html/force.js
index 5087374..8ec0506 100644
--- a/html/force.js
+++ b/html/force.js
@@ -104,11 +104,17 @@ btns.append("button")
.on("click", update_graph)
btns.append("button")
- .attr("class", "btn active right")
+ .attr("class", "btn active middle")
.attr("value", "vpn")
.text("VPN")
.on("click", update_graph)
+btns.append("button")
+ .attr("class", "btn active right")
+ .attr("value", "labels")
+ .text("Labels")
+ .on("click", update_graph)
+
var meshinfo = d3.select("#sidebar")
.insert("div", ":first-child")
@@ -287,7 +293,7 @@ force.on("tick", function() {
var data
-var visible = {clients: true, vpn: true}
+var visible = {clients: true, vpn: true, labels: true}
function reload() {
d3.json(nodes_json, function(json) {
@@ -484,7 +490,8 @@ function update() {
.attr("rx", function(d) {
var r
if (d.flags.client) r = 4
- else r = Math.max(10, d.name.length * 5)
+ else if (visible.labels) r = Math.max(10, d.name.length * 5)
+ else r = 10
d.rx = r
@@ -493,6 +500,7 @@ function update() {
.attr("ry", function(d) {
var r
if (d.flags.client) r = 4
+ else if (visible.labels) r = 10
else r = 10
d.ry = r
@@ -509,7 +517,12 @@ function update() {
.attr("y", "4px")
node.selectAll("text.name")
- .text(function(d) { return d.name })
+ .text(function(d) {
+ if (visible.labels)
+ return d.name
+
+ return ""
+ })
nodeEnter.append("title")