blob: 062d37bf926b9dd38b9397c28a007434e4a3e0c0 [file] [log] [blame]
Ubuntu82b8a832013-02-06 22:00:11 +00001function gui(data_source){
2 var width = 960,
3 height = 500;
Ubuntuc016ba12013-02-27 21:53:41 +00004 var radius = 8;
Ubuntu82b8a832013-02-06 22:00:11 +00005 var color = d3.scale.category20();
6
Ubuntuc016ba12013-02-27 21:53:41 +00007 var svg = d3.select("#topology").append("svg:svg")
Ubuntu82b8a832013-02-06 22:00:11 +00008 .attr("width", width)
9 .attr("height", height);
10
11 var force = d3.layout.force()
12 .charge(-500)
13 .linkDistance(100)
14 .size([width, height]);
15
16 var path = svg.selectAll("path");
17 var circle = svg.selectAll("circle");
18 var text = svg.selectAll("g");
Masayoshi Kobayashif63ef2f2013-02-20 21:47:21 +000019 var node_drag = d3.behavior.drag()
20 .on("dragstart", dragstart)
21 .on("drag", dragmove)
22 .on("dragend", dragend);
Ubuntu82b8a832013-02-06 22:00:11 +000023
Masayoshi Kobayashi274c07d2013-02-20 21:38:16 +000024 d3.json(data_source, init);
Ubuntu82b8a832013-02-06 22:00:11 +000025
Masayoshi Kobayashi1407a502013-02-27 06:23:08 +000026/* For debugging
Masayoshi Kobayashi274c07d2013-02-20 21:38:16 +000027 $("#more").click( function() {
28 $.ajax({
Masayoshi Kobayashi1407a502013-02-27 06:23:08 +000029 url: 'http://gui.onlab.us:8080/topology_more',
Masayoshi Kobayashi274c07d2013-02-20 21:38:16 +000030 success: function(json) {
Masayoshi Kobayashi1407a502013-02-27 06:23:08 +000031 update(json);
Masayoshi Kobayashi274c07d2013-02-20 21:38:16 +000032 },
33 dataType: "json"
34 });
35 });
36 $("#less").click( function() {
37 $.ajax({
Masayoshi Kobayashi1407a502013-02-27 06:23:08 +000038 url: 'http://gui.onlab.us:8080/topology_less',
Masayoshi Kobayashi274c07d2013-02-20 21:38:16 +000039 success: function(json) {
Masayoshi Kobayashi1407a502013-02-27 06:23:08 +000040 update(json);
Masayoshi Kobayashi274c07d2013-02-20 21:38:16 +000041 },
42 dataType: "json"
43 });
44 });
Masayoshi Kobayashi1407a502013-02-27 06:23:08 +000045*/
Masayoshi Kobayashif63ef2f2013-02-20 21:47:21 +000046
47 function compare_link (a, b){
48 if (a.source > b.source) {return 1;}
49 else if (a.source < b.source) {return -1;}
50 else {
51 if (a.target > b.target) {return 1 ;}
52 if (a.target < b.target) {return -1;}
53 else {return 0;}
54 }
55 }
56
57 function init(json){
58 nodes = force.nodes();
59 links = force.links();
60
61 json.nodes.forEach(function(item) {
62 nodes.push(item);
63 });
64 json.links.forEach(function(item) {
65 links.push(item);
66 });
67
68 links.sort(compare_link);
69 for (var i=1; i<links.length; i++) {
70 if (links[i].source == links[i-1].source &&
71 links[i].target == links[i-1].target) {
72 links[i].linknum = links[i-1].linknum + 1;
73 }
74 else {
75 links[i].linknum = 1;
76 };
77 };
78 init_draw(nodes, links);
79 }
80
81 /* Return nodes that is not in the current list of nodes */
82 Array.prototype.node_diff = function(arr) {
83 return this.filter(function(i) {
84 for (var j = 0; j < arr.length ; j++) {
85 if (arr[j].name === i.name)
86 return false;
87 }
88 return true;
89 });
90 };
91
92 /* Return removed links */
93 function gone_links (json, links, gone) {
94 for (var i = 0; i < links.length ; i ++){
95 var found = 0;
96 for (var j = 0; j < json.links.length ; j ++){
97 if (links[i].source.name == json.nodes[json.links[j].source].name &&
98 links[i].target.name == json.nodes[json.links[j].target].name ){
99 found = 1;
100 break;
101 }
102 }
103 if ( found == 0 ){
104 gone.push(links[i]);
105 }
106 }
107 return gone;
108 }
109
110 /* Return added links */
111 function added_links (json, links, added) {
112 for (var j = 0; j < json.links.length ; j ++){
113 var found = 0;
114 for (var i = 0; i < links.length ; i ++){
115 if (links[i].source.name == json.nodes[json.links[j].source].name &&
116 links[i].target.name == json.nodes[json.links[j].target].name ){
117 found = 1;
118 break;
119 }
120 }
121 if ( found == 0 ){
122 added.push(json.links[j]);
123 }
124 }
125 return added;
126 }
127
128 function dragstart(d, i) {
129 force.stop() // stops the force auto positioning before you start dragging
130 }
131
132 function dragmove(d, i) {
133 d.px += d3.event.dx;
134 d.py += d3.event.dy;
135 d.x += d3.event.dx;
136 d.y += d3.event.dy;
137 tick(); // this is the key to make it work together with updating both px,py,x,y on d !
138 }
139
140 function dragend(d, i) {
141 d.fixed = true; // of course set the node to fixed so the force doesn't include the node in its auto positioning stuff
142 tick();
143 force.resume();
144 }
145
146 /* check if toplogy has changed and update node[] and link[] accordingly */
147 function cdiff(json) {
148 var changed = false;
149
150 var n_adds = json.nodes.node_diff(nodes);
151 var n_rems = nodes.node_diff(json.nodes);
152 for (var i = 0; i < n_adds.length; i++) {
153 nodes.push(n_adds[i]);
154 changed = true;
155 }
156 for (var i = 0; i < n_rems.length; i++) {
157 for (var j = 0; j < nodes.length; j++) {
158 if ( nodes[j].name == n_rems[i].name ){
159 nodes.splice(j,1);
160 changed = true;
161 break;
162 }
163 }
164 }
165 var l_adds = [];
166 var l_rems = [];
167 l_adds = added_links(json, links, l_adds);
168 l_rems = gone_links(json, links, l_rems);
169 for (var i = 0; i < l_rems.length ; i++) {
170 for (var j = 0; j < links.length; j++) {
171 if (links[j].source.name == l_rems[i].source.name &&
172 links[j].target.name == l_rems[i].target.name) {
173 links.splice(j,1);
174 changed = true;
175 break;
176 }
177 }
178 }
179 // Sorce/target of an element of l_adds[] are corresponding to the index of json.node[]
180 // which is different from the index of node[] (new nodes are always added to the last)
181 // So update soure/target node indexes of l_add[] need to be fixed to point to the proper
182 // node in node[];
183 for (var i = 0; i < l_adds.length; i++) {
184 for (var j = 0; j < nodes.length; j++) {
185 if ( json.nodes[l_adds[i].source].name == nodes[j].name ){
186 l_adds[i].source = j;
187 break;
188 }
189 }
190 for (var j = 0; j < nodes.length; j++) {
191 if ( json.nodes[l_adds[i].target].name == nodes[j].name ){
192 l_adds[i].target = j;
193 break;
194 }
195 }
196 links.push(l_adds[i]);
197 changed = true;
198 }
199
200 // Update "group" attribute of nodes
201 for (var i = 0; i < nodes.length; i++) {
202 for (var j = 0; j < json.nodes.length; j++) {
203 if ( nodes[i].name == json.nodes[j].name ){
204 if (nodes[i].group != json.nodes[j].group){
205 nodes[i].group = json.nodes[j].group;
206 changed = true;
207 }
208 }
209 }
210 }
Ubuntu765deff2013-02-28 18:39:13 +0000211 for (var i = 0; i < links.length; i++) {
212 for (var j = 0; j < json.links.length; j++) {
213 if (links[i].target.name == json.nodes[json.links[j].target].name &&
214 links[i].source.name == json.nodes[json.links[j].source].name ){
215 if (links[i].type != json.links[j].type){
216 links[i].type = json.links[j].type;
217 changed = true;
218 }
219 }
220 }
221 }
Masayoshi Kobayashif63ef2f2013-02-20 21:47:21 +0000222 return changed
223 }
224
225 function draw(force, path, circle, text){
226 force.stop();
227 path.enter().append("svg:path")
Ubuntu765deff2013-02-28 18:39:13 +0000228 .attr("class", function(d) { return "link"; })
229 .attr("marker-end", function(d) {
230 if(d.type == 1){
231 return "url(#TriangleRed)";
232 } else {
233 return "url(#Triangle)";
234 }
235 });
Masayoshi Kobayashif63ef2f2013-02-20 21:47:21 +0000236
237 circle.enter().append("svg:circle")
Ubuntu37ebda62013-03-01 00:35:31 +0000238 .attr("r", function(d) {
239 if (d.group == 1000){
240 return radius/2;
241 }else{
242 return radius;
243 }
244 })
Masayoshi Kobayashif63ef2f2013-02-20 21:47:21 +0000245 .call(node_drag);
246// .call(force.drag);
247
248 text.enter().append("svg:text")
Ubuntuc016ba12013-02-27 21:53:41 +0000249 .attr("x", radius)
Masayoshi Kobayashif63ef2f2013-02-20 21:47:21 +0000250 .attr("y", ".31em")
Ubuntu37ebda62013-03-01 00:35:31 +0000251 .text(function(d) {
252 l=d.name.split(":").length
253 return d.name.split(":")[l-3] + ":" + d.name.split(":")[l-2] + ":" + d.name.split(":")[l-1]
254 });
Masayoshi Kobayashif63ef2f2013-02-20 21:47:21 +0000255
256 circle.append("title")
257 .text(function(d) { return d.name; });
258
259 circle.attr("fill", function(d) {
260 if (d.group == 1){return "red";}
261 else if (d.group == 2){return "blue";}
262 else if (d.group == 3){return "green";}
Ubuntu5b2b24a2013-02-27 09:51:13 +0000263 else if (d.group == 4){return "orange";}
Ubuntu37ebda62013-03-01 00:35:31 +0000264 else if (d.group == 1000){return "black";}
Masayoshi Kobayashif63ef2f2013-02-20 21:47:21 +0000265 else{ return "gray"; }
266 });
267
268 path.attr("stroke", function(d) {
269 if(d.type == 1){
270 return "red"
271 } else {
272 return "black"
273 }
274 }).attr("stroke-width", function(d) {
275 if(d.type == 1){
Ubuntu765deff2013-02-28 18:39:13 +0000276 return "2px";
Masayoshi Kobayashif63ef2f2013-02-20 21:47:21 +0000277 } else {
278 return "1.5px";
279 }
280 }).attr("marker-end", function(d) {
281 if(d.type == 1){
282 return "url(#TriangleRed)";
283 } else {
284 return "url(#Triangle)";
285 }
286 });
287
288
289 path.exit().remove();
290 circle.exit().remove();
291 text.exit().remove();
292
293 force.on("tick", tick);
294 force.start();
295
296 }
297
298 function update(json) {
299 var changed = cdiff(json);
300
301 console.log("changed? " + changed);
Ubuntu765deff2013-02-28 18:39:13 +0000302 path = svg.selectAll("path").data(links)
303 circle = svg.selectAll("circle").data(nodes);
304 text = svg.selectAll("text").data(nodes);
Masayoshi Kobayashif63ef2f2013-02-20 21:47:21 +0000305
Ubuntu765deff2013-02-28 18:39:13 +0000306 console.log(path)
Masayoshi Kobayashif63ef2f2013-02-20 21:47:21 +0000307 if (changed){
308
Masayoshi Kobayashif63ef2f2013-02-20 21:47:21 +0000309 draw(force, path, circle, text);
310 }
311 }
312
313 function init_draw(nodes, links){
Masayoshi Kobayashi1407a502013-02-27 06:23:08 +0000314 path = svg.append("svg:g").selectAll("path").data(links);
Masayoshi Kobayashif63ef2f2013-02-20 21:47:21 +0000315 circle = svg.append("svg:g").selectAll("circle").data(nodes);
316 text = svg.append("svg:g").selectAll("text").data(nodes);
317
318 draw(force, path, circle, text);
319
320 setInterval(function() {
321 $.ajax({
Masayoshi Kobayashif63ef2f2013-02-20 21:47:21 +0000322 url: data_source,
323 success: function(json) {
324 update(json)
325 },
326 dataType: "json"
327 });
328 }, 3000);
329 }
Ubuntu82b8a832013-02-06 22:00:11 +0000330 function tick() {
331 path.attr("d", function(d) {
332 var dx = d.target.x - d.source.x,
333 dy = d.target.y - d.source.y,
334 dr = 1/d.linknum; //linknum is defined above
Masayoshi Kobayashif63ef2f2013-02-20 21:47:21 +0000335 dr = 0; // 0 for direct line
Ubuntu82b8a832013-02-06 22:00:11 +0000336 return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y;
337 });
Ubuntu765deff2013-02-28 18:39:13 +0000338 path.attr("stroke", function(d) {
339 if(d.type == 1){
340 return "red"
341 } else {
342 return "black"
343 }
344 }).attr("stroke-width", function(d) {
345 if(d.type == 1){
346 return "3px";
347 } else {
348 return "1.5px";
349 }
350 }).attr("marker-end", function(d) {
351 if(d.type == 1){
352 return "url(#TriangleRed)";
353 } else {
354 return "url(#Triangle)";
355 }
356 });
357
Ubuntu82b8a832013-02-06 22:00:11 +0000358// circle.attr("cx", function(d) { return d.x; }).attr("cy", function(d) { return d.y; });
359 circle.attr("transform", function(d) {
Ubuntuc016ba12013-02-27 21:53:41 +0000360 x = Math.max(radius, Math.min(width - radius, d.x));
361 y = Math.max(radius, Math.min(height - radius, d.y));
362// return "translate(" + d.x + "," + d.y + ")";
363 return "translate(" + x + "," + y + ")";
Ubuntu82b8a832013-02-06 22:00:11 +0000364 })
Ubuntuc016ba12013-02-27 21:53:41 +0000365
Ubuntuaea2a682013-02-08 08:30:10 +0000366 circle.attr("fill", function(d) {
Ubuntuc016ba12013-02-27 21:53:41 +0000367 ; if (d.group == 1){return "red";}
Ubuntuaea2a682013-02-08 08:30:10 +0000368 else if (d.group == 2){return "blue";}
369 else if (d.group == 3){return "green";}
Ubuntuc016ba12013-02-27 21:53:41 +0000370 else if (d.group == 4){return "orange";}
Ubuntu37ebda62013-03-01 00:35:31 +0000371 else if (d.group == 1000){return "black";}
Ubuntuaea2a682013-02-08 08:30:10 +0000372 else{ return "gray"; }
373 });
Ubuntu82b8a832013-02-06 22:00:11 +0000374// text.attr("x", function(d) { return d.x; }).attr("y", function(d) { return d.y; });
Ubuntu82b8a832013-02-06 22:00:11 +0000375 text.attr("transform", function(d) {
376 return "translate(" + d.x + "," + d.y + ")";
377 });
378 }
379}
Masayoshi Kobayashif63ef2f2013-02-20 21:47:21 +0000380