|
@@ -1,13 +1,14 @@
|
|
|
define(["d3"], function (d3) {
|
|
|
return function (config, linkScale, sidebar, router) {
|
|
|
var self = this
|
|
|
- var nodes, links
|
|
|
var svg, vis, link, node
|
|
|
var nodesDict, linksDict
|
|
|
var zoomBehavior
|
|
|
var force
|
|
|
var el
|
|
|
var doAnimation = false
|
|
|
+ var intNodes = []
|
|
|
+ var highlight
|
|
|
|
|
|
var LINK_DISTANCE = 70
|
|
|
|
|
@@ -19,18 +20,18 @@ define(["d3"], function (d3) {
|
|
|
if (!localStorageTest())
|
|
|
return
|
|
|
|
|
|
- var save = nodes.map( function (d) {
|
|
|
- return { id: d.id, x: d.x, y: d.y }
|
|
|
+ var save = intNodes.map( function (d) {
|
|
|
+ return { id: d.o.id, x: d.x, y: d.y }
|
|
|
})
|
|
|
|
|
|
localStorage.setItem("graph/nodeposition", JSON.stringify(save))
|
|
|
}
|
|
|
|
|
|
function nodeName(d) {
|
|
|
- if (d.node && d.node.nodeinfo)
|
|
|
- return d.node.nodeinfo.hostname
|
|
|
+ if (d.o.node && d.o.node.nodeinfo)
|
|
|
+ return d.o.node.nodeinfo.hostname
|
|
|
else
|
|
|
- return d.id
|
|
|
+ return d.o.id
|
|
|
}
|
|
|
|
|
|
function dragstart(d) {
|
|
@@ -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[highlight.o.id]
|
|
|
+
|
|
|
+ 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 })
|
|
@@ -132,7 +175,7 @@ define(["d3"], function (d3) {
|
|
|
.gravity(0.05)
|
|
|
.linkDistance(LINK_DISTANCE)
|
|
|
.linkStrength(function (d) {
|
|
|
- return 1 / d.tq
|
|
|
+ return 1 / d.o.tq
|
|
|
})
|
|
|
.on("tick", tickEvent)
|
|
|
.on("end", savePositions)
|
|
@@ -145,24 +188,44 @@ define(["d3"], function (d3) {
|
|
|
.on("dragend", dragend)
|
|
|
|
|
|
self.setData = function (data) {
|
|
|
- var nodePositions = {}
|
|
|
+ var oldNodes = {}
|
|
|
|
|
|
- if (localStorageTest()) {
|
|
|
- var save = JSON.parse(localStorage.getItem("graph/nodeposition"))
|
|
|
+ intNodes.forEach( function (d) {
|
|
|
+ oldNodes[d.o.id] = d
|
|
|
+ })
|
|
|
|
|
|
- if (save)
|
|
|
- save.forEach( function (d) {
|
|
|
- nodePositions[d.id] = d
|
|
|
- })
|
|
|
- }
|
|
|
+ intNodes = data.graph.nodes.map( function (d) {
|
|
|
+ var e
|
|
|
+ if (d.id in oldNodes)
|
|
|
+ e = oldNodes[d.id]
|
|
|
+ else
|
|
|
+ e = {}
|
|
|
+
|
|
|
+ e.o = d
|
|
|
+
|
|
|
+ return e
|
|
|
+ })
|
|
|
+
|
|
|
+ var newNodesDict = {}
|
|
|
+
|
|
|
+ intNodes.forEach( function (d) {
|
|
|
+ newNodesDict[d.o.id] = d
|
|
|
+ })
|
|
|
|
|
|
- links = data.graph.links.filter( function (d) {
|
|
|
+ var intLinks = data.graph.links.filter( function (d) {
|
|
|
return !d.vpn
|
|
|
+ }).map( function (d) {
|
|
|
+ var source = newNodesDict[d.source.id]
|
|
|
+ var target = newNodesDict[d.target.id]
|
|
|
+
|
|
|
+ return {o: d, source: source, target: target}
|
|
|
})
|
|
|
|
|
|
link = vis.select("g.links")
|
|
|
.selectAll("g.link")
|
|
|
- .data(links, function (d) { return d.id })
|
|
|
+ .data(intLinks, function (d) { return d.o.id })
|
|
|
+
|
|
|
+ link.exit().remove()
|
|
|
|
|
|
var linkEnter = link.enter().append("g")
|
|
|
.attr("class", "link")
|
|
@@ -175,34 +238,34 @@ define(["d3"], function (d3) {
|
|
|
.append("title")
|
|
|
|
|
|
link.selectAll("line")
|
|
|
- .style("stroke", function (d) { return linkScale(d.tq) })
|
|
|
+ .style("stroke", function (d) { return linkScale(d.o.tq).hex() })
|
|
|
|
|
|
- link.selectAll("title").text(showTq)
|
|
|
+ link.selectAll("title").text(function (d) { return showTq(d.o) })
|
|
|
|
|
|
linksDict = {}
|
|
|
|
|
|
link.each( function (d) {
|
|
|
- if (d.source.node && d.target.node)
|
|
|
- linksDict[d.id] = d
|
|
|
+ if (d.o.source.node && d.o.target.node)
|
|
|
+ linksDict[d.o.id] = d
|
|
|
})
|
|
|
|
|
|
- nodes = data.graph.nodes
|
|
|
-
|
|
|
node = vis.select("g.nodes")
|
|
|
.selectAll(".node")
|
|
|
- .data(nodes, function(d) { return d.id })
|
|
|
+ .data(intNodes, function(d) { return d.o.id })
|
|
|
+
|
|
|
+ node.exit().remove()
|
|
|
|
|
|
var nodeEnter = node.enter().append("circle")
|
|
|
.attr("r", 8)
|
|
|
.on("click", function (d) {
|
|
|
if (!d3.event.defaultPrevented)
|
|
|
- router.node(d.node)()
|
|
|
+ router.node(d.o.node)()
|
|
|
})
|
|
|
.call(draggableNode)
|
|
|
|
|
|
node.attr("class", function (d) {
|
|
|
var s = ["node"]
|
|
|
- if (!d.node)
|
|
|
+ if (!d.o.node)
|
|
|
s.push("unknown")
|
|
|
|
|
|
return s.join(" ")
|
|
@@ -211,65 +274,59 @@ define(["d3"], function (d3) {
|
|
|
nodesDict = {}
|
|
|
|
|
|
node.each( function (d) {
|
|
|
- if (d.node)
|
|
|
- nodesDict[d.node.nodeinfo.node_id] = d
|
|
|
+ if (d.o.node)
|
|
|
+ nodesDict[d.o.node.nodeinfo.node_id] = d
|
|
|
})
|
|
|
|
|
|
nodeEnter.append("title")
|
|
|
- nodeEnter.each( function (d) {
|
|
|
- if (nodePositions[d.id]) {
|
|
|
- d.x = nodePositions[d.id].x
|
|
|
- d.y = nodePositions[d.id].y
|
|
|
+
|
|
|
+ if (localStorageTest()) {
|
|
|
+ var save = JSON.parse(localStorage.getItem("graph/nodeposition"))
|
|
|
+
|
|
|
+ if (save) {
|
|
|
+ var nodePositions = {}
|
|
|
+ save.forEach( function (d) {
|
|
|
+ nodePositions[d.id] = d
|
|
|
+ })
|
|
|
+
|
|
|
+ nodeEnter.each( function (d) {
|
|
|
+ if (nodePositions[d.o.id]) {
|
|
|
+ d.x = nodePositions[d.o.id].x
|
|
|
+ d.y = nodePositions[d.o.id].y
|
|
|
+ }
|
|
|
+ })
|
|
|
}
|
|
|
- })
|
|
|
+ }
|
|
|
|
|
|
node.selectAll("title").text(nodeName)
|
|
|
|
|
|
- var diameter = graphDiameter(nodes)
|
|
|
+ var diameter = graphDiameter(intNodes)
|
|
|
|
|
|
- force.nodes(nodes)
|
|
|
- .links(links)
|
|
|
+ force.nodes(intNodes)
|
|
|
+ .links(intLinks)
|
|
|
.size([diameter, diameter])
|
|
|
- .start()
|
|
|
- }
|
|
|
|
|
|
- self.resetView = function () {
|
|
|
- node.classed("highlight", false)
|
|
|
- link.classed("highlight", false)
|
|
|
+ updateHighlight(true)
|
|
|
|
|
|
- panzoomTo([0, 0], force.size())
|
|
|
+ if (node.enter().size() + link.enter().size() > 0)
|
|
|
+ force.start()
|
|
|
+ }
|
|
|
|
|
|
+ self.resetView = function () {
|
|
|
+ highlight = undefined
|
|
|
+ updateHighlight()
|
|
|
doAnimation = true
|
|
|
}
|
|
|
|
|
|
self.gotoNode = function (d) {
|
|
|
- link.classed("highlight", false)
|
|
|
- node.classed("highlight", function (e) {
|
|
|
- return e.node === d && d !== undefined
|
|
|
- })
|
|
|
-
|
|
|
- var n = nodesDict[d.nodeinfo.node_id]
|
|
|
-
|
|
|
- if (n)
|
|
|
- panzoomTo([n.x, n.y], [n.x, n.y])
|
|
|
-
|
|
|
+ highlight = {type: "node", o: d}
|
|
|
+ updateHighlight()
|
|
|
doAnimation = true
|
|
|
}
|
|
|
|
|
|
self.gotoLink = function (d) {
|
|
|
- node.classed("highlight", false)
|
|
|
- link.classed("highlight", function (e) {
|
|
|
- return e === 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]])
|
|
|
- }
|
|
|
-
|
|
|
+ highlight = {type: "link", o: d}
|
|
|
+ updateHighlight()
|
|
|
doAnimation = true
|
|
|
}
|
|
|
|