/js-only/visualiser/main.js
JavaScript | 327 lines | 271 code | 51 blank | 5 comment | 45 complexity | 8b0533107772e15d98a92251d3a54fe8 MD5 | raw file
1var visualiser_elt = $("div#visualiser"); 2var timeline_elt = $("div#timeline"); 3var pie_elt = $("div#pie"); 4var cloud_elt = $("div#cloud"); 5var messages = {}; 6var functions = {}; 7var threads = {}; 8 9var pie_pieces = {}; 10var total_msgs = 0; 11 12var cloud_words = {}; 13var total_words = 0; 14 15var t_min = 0; 16var t_max = 0; 17 18function layout_div(msg) { 19 var parent = $(msg.div).parent(); 20 var m_width = visualiser_elt.width(); 21 var t_width = t_max - t_min; 22 var left = 0; 23 var width = 0; 24 var top = 0; 25 var height = 20; 26 var t_left = 0; 27 if(msg.ty == "fn" || msg.ty == "msg") { 28 var thread = threads[msg.tid]; 29 t_left = msg.ts - thread.ts; 30 left = (t_left * m_width) / t_width; 31 32 if(msg.ty == "fn") { 33 var finish = (msg.finish || t_max) - thread.ts; 34 width = ((finish - t_left) * m_width) / t_width; 35 } else { 36 width = 2; 37 } 38 39 } else { 40 var finish = (msg.finish || t_max) - t_min; 41 t_left = msg.ts - t_min; 42 left = (t_left * m_width) / t_width; 43 width = ((finish - t_left) * m_width) / t_width; 44 top = msg.tid * 24; 45 } 46 47 msg.div.offset({left: left + parent.offset().left, top: top + parent.offset().top}); 48 msg.div.width(width); 49 msg.div.height(height); 50} 51 52function _layout_all(ht) { 53 for(m in ht) { 54 var msg = ht[m]; 55 if(msg != null && (typeof msg) != "function") { 56 layout_div(msg); 57 } 58 } 59} 60 61function layout_all() { 62 _layout_all(threads); 63 _layout_all(functions); 64 _layout_all(messages); 65} 66 67function create_div(parent, msg) { 68 var div = $(document.createElement("div")).addClass(msg.ty).attr("title", msg.desc); 69 div.appendTo(parent); 70 return div; 71} 72 73function set_t(t) { 74 var layout = false; 75 if(t_min == 0 || t < t_min) { 76 t_min = t; 77 $("div#min > input").val(t_min); 78 layout = true; 79 } 80 81 if(t > t_max) { 82 t_max = t; 83 $("div#max > input").val(t_max); 84 layout = true; 85 } 86 87 if(layout) { 88 layout_all(); 89 } 90} 91 92function draw_slice(ctx, r, s) { 93 ctx.beginPath(); 94 ctx.arc(60, 60, 50, r, r+s, false); 95 ctx.lineTo(60,60); 96 ctx.closePath(); 97 ctx.stroke(); 98 return r+s; 99} 100 101function draw_pie() { 102 var canvas = pie_elt.find("canvas"); 103 var ctx = canvas[0].getContext("2d"); 104 105 ctx.clearRect(0, 0, 200, 200); 106 107 ctx.strokeStyle = "black"; 108 ctx.beginPath(); 109 ctx.arc(60, 60, 55, 0, Math.PI * 2); 110 ctx.closePath(); 111 ctx.stroke(); 112 113 ctx.strokeStyle = "red"; 114 var r = 0; 115 for(p in pie_pieces) { 116 var count = pie_pieces[p]; 117 if(count != null && (typeof count) != "function") { 118 r = draw_slice(ctx, r, (count * 2 * Math.PI) / total_msgs); 119 } 120 } 121} 122 123function add_to_pie(ty) { 124 if(!pie_pieces[ty]) { 125 pie_pieces[ty] = 0; 126 } 127 128 pie_pieces[ty]++; 129 draw_pie(); 130} 131 132function draw_cloud() { 133 var canvas = cloud_elt.find("canvas"); 134 var ctx = canvas[0].getContext("2d"); 135 136 ctx.clearRect(0, 0, 200, 200); 137 138 ctx.strokeStyle = "red"; 139 var r = 50; 140 for(c in cloud_words) { 141 var count = cloud_words[c]; 142 if(count != null && (typeof count) != "function") { 143 var height = Math.floor((count * 100) / total_words); 144 ctx.font = height + "px serif"; 145 ctx.strokeText(c, 0, r); 146 r+=height; 147 } 148 } 149 150} 151 152function _add_to_cloud(w) { 153 total_words++; 154 if(!cloud_words[w]) { 155 cloud_words[w] = 0; 156 } 157 158 cloud_words[w]++; 159 draw_cloud(); 160} 161 162function add_to_cloud(msg) { 163 w_name = msg.name.split(" "); 164 w_desc = msg.desc.split(" "); 165 for(w in w_name) { 166 var word = w_name[w]; 167 if(word != null && (typeof word) != "function") { 168 _add_to_cloud(word); 169 } 170 } 171 172 for(w in w_desc) { 173 var word = w_desc[w]; 174 if(word != null && (typeof word) != "function") { 175 _add_to_cloud(word); 176 } 177 } 178 179} 180 181function load_msg_obj(o) { 182 var msgs = eval(o); 183 for(m in msgs) { 184 var msg = msgs[m]; 185 total_msgs++; 186 set_t(msg.ts); 187 add_to_pie(msg.ty); 188 add_to_cloud(msg); 189 switch(msg.ty) { 190 case "t_start": 191 //create t 192 msg.ty = "thread"; 193 msg.div = create_div(visualiser_elt, msg) 194 threads[msg.tid] = msg 195 layout_div(msg); 196 break; 197 case "t_finish": 198 //close t 199 threads[msg.tid].finish = msg.tid; 200 layout_div(threads[msg.tid]); 201 break; 202 case "fn_start": 203 //create fn 204 msg.ty = "fn"; 205 msg.div = create_div(threads[msg.tid].div, msg) 206 functions[msg.tid + msg.name] = msg 207 layout_div(msg); 208 break; 209 case "fn_finish": 210 //close fn 211 var fn = functions[msg.tid + msg.name]; 212 fn.finish = msg.ts; 213 layout_div(fn); 214 break; 215 case "msg": 216 //create msg 217 msg.div = create_div(threads[msg.tid].div, msg) 218 functions[msg.ts] = msg 219 layout_div(msg); 220 break; 221 } 222 } 223} 224 225function next_msg() { 226 $.get("http://localhost:8080/next_msg", load_msg_obj) 227} 228 229function start() { 230 setInterval(next_msg, 500); 231} 232 233function create_spinner(id, f_up, f_down) { 234 var spinner = $(document.createElement("div")).attr("id", id); 235 var up = $(document.createElement("button")).addClass("up").text("^"); 236 var down = $(document.createElement("button")).addClass("down").text("v"); 237 var input = $(document.createElement("input")).addClass("spinner"); 238 239 up.click(f_up); 240 down.click(f_down); 241 242 spinner.append(up); 243 spinner.append(down); 244 spinner.append(input); 245 timeline_elt.append(spinner); 246} 247 248function min_up() { 249 t_min++; 250 $("div#min > input").val(t_min); 251 layout_all(); 252} 253 254function min_down() { 255 t_min--; 256 $("div#min > input").val(t_min); 257 layout_all(); 258} 259 260function max_up() { 261 t_max++; 262 $("div#max > input").val(t_max); 263 layout_all(); 264} 265 266function max_down() { 267 t_max--; 268 $("div#max > input").val(t_max); 269 layout_all(); 270} 271 272function create_pie_canvas() { 273 pie_elt.append($(document.createElement("canvas"))); 274 draw_pie(); 275} 276 277function create_cloud_canvas() { 278 cloud_elt.append($(document.createElement("canvas"))); 279} 280 281function test1a() { 282 $.get("http://localhost:8080/tests/test1a.json", load_msg_obj) 283} 284 285function test1b() { 286 $.get("http://localhost:8080/tests/test1b.json", load_msg_obj) 287} 288 289function test1000() { 290 $.get("http://localhost:8080/tests/test1000.json", load_msg_obj) 291} 292 293function test10000() { 294 $.get("http://localhost:8080/tests/test10000.json", load_msg_obj) 295} 296 297function _test2(n) { 298 function f(o) { 299 load_msg_obj(o); 300 _test2 (n+1); 301 } 302 if (n >= 100) { return } 303 else $.get("http://localhost:8080/tests/test2-" + n + ".json", f) 304} 305 306function test2() { 307 _test2(0); 308} 309 310function visualise () { 311 $.get($("input#json_url").val(), load_msg_obj) 312} 313 314create_spinner("min", min_up, min_down); 315create_spinner("max", max_up, max_down); 316 317$("button#visualise").click(visualise); 318$("button#next_msg").click(next_msg); 319$("button#start").click(start); 320$("button#test1a").click(test1a); 321$("button#test1b").click(test1b); 322$("button#test2").click(test2); 323$("button#test1000").click(test1000); 324$("button#test10000").click(test10000); 325 326create_pie_canvas(); 327create_cloud_canvas();