/js-only/visualiser/main.js

  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();