Move settings to HTML file
[oonf.git] / files / netjson_viewer / netjson_view.js
1 /* global variables */
2 var visNodes, visEdges, visNetwork;
3 var autoupdate_timeout;
4 var xmlhttp;
5
6 String.prototype.startsWith = function (pattern) {
7     if (this.length < pattern.length) {
8         return false;
9     }
10     return pattern == this.substring(0, pattern.length);
11 };
12
13 String.prototype.endsWith = function (pattern) {
14     if (this.length < pattern.length) {
15         return false;
16     }
17     return pattern == this.substring(this.length - pattern.length);
18 };
19
20 function init_network() {
21     var options = {
22     };
23
24     // create an array with nodes
25     visNodes = new vis.DataSet([], options);
26
27     // create an array with edges
28     visEdges = new vis.DataSet([], options);
29
30     // create a network
31     var container = document.getElementById("networkgraph");
32     var visData = {
33         nodes: visNodes,
34         edges: visEdges
35     };
36
37     options = {
38         edges: {
39             smooth: {
40                 type: 'continuous'
41             }
42         },
43     };
44     visNetwork = new vis.Network(container, visData, options);
45   
46     firstLookup = true;
47 }
48
49 function layout_nodes(element) {
50     var jsonNodes = element.nodes;
51     var newIds = []
52     var oldIds = []
53     
54     /* add new nodes */
55     newIds = []
56     oldIds = visNodes.getIds()
57     for (ni = 0; ni < jsonNodes.length; ni++) {
58         var nId = jsonNodes[ni].id;
59         var nColor = null;
60         
61         var nLabel = nId;
62         if (nId.startsWith(common_node_prefix)) {
63             nLabel = nId.substring(common_node_prefix.length);
64         }
65                         
66         newIds.push(nId);
67         if (jsonNodes[ni].id == element.router_id) {
68             nColor = selectedColor;
69         }
70
71         if (!visNodes.get(nId)) {   
72             visNodes.add(
73                 {
74                     id:    nId,
75                     label: nLabel,
76                     mass:  4,
77                     color: nColor,
78                 }
79             );
80         }
81     }
82     
83     /* remove old nodes */
84     for (ni = 0; ni < oldIds.length; ni++) {
85         if (newIds.indexOf(oldIds[ni]) == -1) {
86             visNodes.remove(oldIds[ni]);
87         }
88     }
89 }
90
91 function layout_edges(element) {
92     var jsonEdges = element.links;
93     var newIds = []
94     var oldIds = []
95     var undirectedEdges = {}
96     
97     /* calculate unidirectional edges */
98     newIds = []
99     oldIds = visEdges.getIds()
100     for (ei = 0; ei < jsonEdges.length; ei++) {
101         var eFrom = jsonEdges[ei].source;
102         var eTo = jsonEdges[ei].target;
103         
104         if (eFrom > eTo) {
105             var tmp = eTo;
106             eTo = eFrom;
107             eFrom = tmp;
108         }
109
110         var uuid = eFrom + "-" + eTo;
111         
112         var edge = undirectedEdges[uuid];
113         if (edge == null) {
114             edge = {
115                 uuid:      eFrom + "-" + eTo,
116                 from:      eFrom,
117                 to:        eTo,
118                 width:     1,
119                 arrows:    "",
120                 fromLabel: "-",
121                 toLabel:   "-"
122             };
123             undirectedEdges[uuid] = edge;
124         };
125                 
126         newIds.push(edge.uuid);
127         
128         var eLabel =  jsonEdges[ei].weight.toString();
129         if (jsonEdges[ei].properties) {
130             if (jsonEdges[ei].properties["weight_txt"]) {
131                 eLabel = jsonEdges[ei].properties["weight_txt"];
132             }
133             if (jsonEdges[ei].properties["outgoing_tree"] == "true") {
134                 edge.width=3;
135                 if (jsonEdges[ei].source == eFrom) {
136                     edge.arrows = "to";
137                 }
138                 else {
139                     edge.arrows = "from";
140                 }
141             }
142         }
143         
144         if (jsonEdges[ei].source == eFrom) {
145             edge.fromLabel = eLabel;
146         }
147         else {
148             edge.toLabel = eLabel;
149         }
150     }
151     
152     /* add new edges */
153     for (ei = 0; ei < newIds.length; ei++) {
154         var edge = undirectedEdges[newIds[ei]];
155         var label = "";
156         
157         if (edge.fromLabel == edge.toLabel) {
158             label = edge.fromLabel;
159         }
160         else if (edge.fromLabel.endsWith(common_edge_postfix)
161                 && edge.fromLabel.endsWith(common_edge_postfix)) {
162             var flen = edge.fromLabel.length - common_edge_postfix.length;
163             var tlen = edge.toLabel.length - common_edge_postfix.length;
164         
165             label = edge.fromLabel.substring(0, flen).trim() + "/"
166                 + edge.toLabel.substring(0, tlen).trim()
167                 + " " + common_edge_postfix;             
168         }
169         else {
170             label = edge.fromLabel + "/" + edge.toLabel;
171         }
172         
173         if (visEdges.get(edge.uuid)) {
174             visEdges.update(
175                 {
176                     id:          edge.uuid,
177                     label:       label,
178                     width:       edge.width,
179                     arrows:      edge.arrows,
180                 }
181             );
182         }
183         else {
184             visEdges.add(
185                 {
186                     id:          edge.uuid,
187                     from:        edge.from,
188                     to:          edge.to,
189                     label:       label,
190                     length:      200,
191                     width:       edge.width,
192                     arrows:      edge.arrows,
193                     font: {
194                         align:       "top",
195                     }
196                 }
197             );
198         }
199     }
200
201     /* remove old edges */
202     for (ei = 0; ei < oldIds.length; ei++) {
203         if (newIds.indexOf(oldIds[ei]) == -1) {
204             visEdges.remove(oldIds[ei]);
205         }
206     }
207 }
208
209 function xmlhttp_changed()
210 {
211     if (xmlhttp.readyState==XMLHttpRequest.DONE && xmlhttp.status==200) {
212         obj = JSON.parse(xmlhttp.responseText);
213
214         if (obj.type != "NetworkCollection") {
215             return;
216         }
217
218         for (index = 0; index < obj.collection.length; index++) {
219             element = obj.collection[index];
220
221             if (element.router_id.indexOf(':') != -1) {
222                 continue;
223             }
224
225             if (element.type == "NetworkGraph") {
226                 layout_nodes(element);
227                 layout_edges(element);
228             }
229         }
230         
231         var checkbox = document.getElementById("autoupdate");
232         if (checkbox.checked) {
233             autoupdate_timeout = window.setTimeout(send_request, 5000);
234         }
235     }
236 }
237
238 function autoupdate_clicked() {
239     var checkbox = document.getElementById("autoupdate");
240     if (checkbox.checked === false) {
241         window.clearTimeout(autoupdate_timeout);
242     }
243     else {
244         send_request();
245     }    
246 }
247
248 function dynamiclayout_clicked() {
249     var checkbox = document.getElementById("dynamiclayout");
250     
251     visNetwork.setOptions({physics:checkbox.checked})
252 }
253
254 function send_request() {
255     xmlhttp.open("GET",netjsonurl,true);
256     xmlhttp.send();
257 }
258
259 function init_netjson_viewer() {
260     xmlhttp = new XMLHttpRequest();
261     xmlhttp.onreadystatechange=xmlhttp_changed
262     init_network();
263     send_request();
264 }