OILS / vendor / souffle / profile / htmlJsMain.h View on Github | oilshell.org

620 lines, 6 significant
1/*
2 * Souffle - A Datalog Compiler
3 * Copyright (c) 2017, The Souffle Developers. All rights reserved
4 * Licensed under the Universal Permissive License v 1.0 as shown at:
5 * - https://opensource.org/licenses/UPL
6 * - <souffle root>/licenses/SOUFFLE-UPL.txt
7 */
8
9#include <string>
10
11namespace souffle {
12namespace profile {
13namespace html {
14std::string jsMain = R"___(
15function changeSelectedRel(id) {
16 selected.rel = id;
17 highlightRow();
18 genRulesOfRelations();
19}
20
21function changeSelectedRul(id) {
22 selected.rul = id;
23 highlightRow();
24 genRulVer();
25 genAtomVer();
26}
27
28function goBack() {
29 if (came_from==="rel") {
30 document.getElementById("rel_tab").click();
31 } else if (came_from==="rul") {
32 document.getElementById("rul_tab").click();
33 }
34}
35
36function highlightRow() {
37 var i;
38 for (i=0;i<document.getElementsByClassName("rel_row").length;i++) {
39 document.getElementsByClassName("rel_row")[i].style.background = "rgba(255,255,0,0)";
40 }
41 for (i=0;i<document.getElementsByClassName("rul_row").length;i++) {
42 document.getElementsByClassName("rul_row")[i].style.background = "rgba(255,255,0,0)";
43 }
44 if (selected.rul) {
45 document.getElementById(selected.rul).style.background = "rgba(255,255,0,0.2)";
46 }
47 if (selected.rel) {
48 document.getElementById(selected.rel).style.background = "rgba(255,255,0,0.2)";
49 }
50}
51
52
53function graphRel() {
54 if (!selected.rel) {
55 alert("please select a relation to graph");
56 return;
57 }
58
59 graph_vals.labels = [];
60 graph_vals.tot_t = [];
61 graph_vals.tuples = [];
62 for (var j = 0; j < data.rel[selected.rel][10].tot_t.length; j++) {
63 graph_vals.labels.push(j.toString());
64 graph_vals.tot_t.push(
65 data.rel[selected.rel][10].tot_t[j]
66 );
67 graph_vals.tuples.push(
68 data.rel[selected.rel][10].tuples[j]
69 )
70 }
71
72 document.getElementById('chart_tab').click();
73 drawGraph();
74}
75
76function graphIterRul() {
77 if (!selected.rul || selected.rul[0]!='C') {
78 alert("Please select a recursive rule (ID starts with C) to graph.");
79 return;
80 }
81
82 came_from = "rul";
83
84 graph_vals.labels = [];
85 graph_vals.tot_t = [];
86 graph_vals.tuples = [];
87 for (var j = 0; j < data.rul[selected.rul][10].tot_t.length; j++) {
88 graph_vals.labels.push(j.toString());
89 graph_vals.tot_t.push(
90 data.rul[selected.rul][10].tot_t[j]
91 );
92 graph_vals.tuples.push(
93 data.rul[selected.rul][10].tuples[j]
94 )
95 }
96
97 document.getElementById('chart_tab').click();
98 drawGraph();
99}
100
101
102function graphUsages() {
103 graph_vals.labels = [];
104 graph_vals.cpu = [];
105 graph_vals.rss = [];
106 var interval = Math.ceil(data.usage.length / 8);
107 for (var j = 0; j < data.usage.length; j++) {
108 graph_vals.labels.push(
109 j % interval == 0 ? data.usage[j][0] : "");
110 graph_vals.cpu.push(
111 {meta: data.usage[j][4], value: (data.usage[j][1] + data.usage[j][2]).toString()});
112 graph_vals.rss.push(
113 {meta: data.usage[j][4], value: data.usage[j][3].toString()});
114 }
115
116 var options = {
117 height: "calc((100vh - 167px) / 2)",
118 axisY: {
119 labelInterpolationFnc: function (value) {
120 return value.toFixed(0) + '%';
121 }
122 },
123 axisX: {
124 labelInterpolationFnc: function (value) {
125 if (!value) {
126 return "";
127 }
128 return humanise_time(value);
129 }
130 },
131 plugins: [Chartist.plugins.tooltip({tooltipFnc: function (meta, value) {
132 value = Number(value);
133 return meta + '<br/>' + value.toFixed(0) + '%';}})]
134 };
135
136 new Chartist.Bar(".ct-chart-cpu", {
137 labels: graph_vals.labels,
138 series: [graph_vals.cpu],
139 }, options);
140
141 options.axisY = {
142 labelInterpolationFnc: function (value) {
143 return minify_memory(value);
144 },
145 };
146
147 options.plugins = [Chartist.plugins.tooltip({tooltipFnc: function(meta, value) {
148 return meta + '<br/>' + minify_memory(value);}})]
149 new Chartist.Bar(".ct-chart-rss", {
150 labels: graph_vals.labels,
151 series: [graph_vals.rss],
152 }, options)
153}
154
155function drawGraph() {
156 var options = {
157 height: "calc((100vh - 167px) / 2)",
158 axisY: {
159 labelInterpolationFnc: function (value) {
160 return humanise_time(value/1000000.0);
161 }
162 },
163 axisX: {
164 labelInterpolationFnc: function (value) {
165 var n = Math.floor(graph_vals.labels.length/15);
166 if (n>1) {
167 if (value%n == 0) {
168 return value;
169 }
170 return null;
171 }
172 return value;
173 }
174 },
175 plugins: [Chartist.plugins.tooltip({
176 tooltipFnc: function(meta, value) {
177 return humanise_time(value / 1000000.0);
178 }
179 })]
180 };
181
182 new Chartist.Bar(".ct-chart1", {
183 labels: graph_vals.labels,
184 series: [graph_vals.tot_t],
185 }, options);
186
187 options.axisY = {
188 labelInterpolationFnc: function (value) {
189 return minify_numbers(value);
190 }
191 };
192 options.plugins = [Chartist.plugins.tooltip({
193 tooltipFnc: function(meta, value) {
194 return minify_numbers(value) + " tuples";
195 }
196 })]
197
198 new Chartist.Bar(".ct-chart2", {
199 labels: graph_vals.labels,
200 series: [graph_vals.tuples],
201 }, options)
202}
203
204
205function changeTab(event, change_to) {
206 if (change_to === "Chart") {
207 document.getElementById("chart-tab").style.display = "block";
208 } else {
209 document.getElementById("chart-tab").style.display = "none";
210 }
211 var c, d, e;
212 d = document.getElementsByClassName("tabcontent");
213 for (c = 0; c < d.length; c++) {
214 d[c].style.display = "none";
215 }
216
217 e = document.getElementsByClassName("tablinks");
218 for (c = 0; c < e.length; c++) {
219 e[c].className = e[c].className.replace(" active", "");
220 }
221
222 document.getElementById(change_to).style.display = "block";
223 event.currentTarget.className += " active"
224}
225
226
227function toggle_precision() {
228 precision=!precision;
229 flip_table_values(document.getElementById("Rel_table"));
230 flip_table_values(document.getElementById("Rul_table"));
231 flip_table_values(document.getElementById("rulesofrel_table"));
232 flip_table_values(document.getElementById("rulvertable"));
233}
234
235function flip_table_values(table) {
236 var i,j,cell;
237 for (i in table.rows) {
238 if (!table.rows.hasOwnProperty(i)) continue;
239 for (j in table.rows[i].cells) {
240 if (! table.rows[i].cells.hasOwnProperty(j)) continue;
241 cell = table.rows[i].cells[j];
242 if (cell.className === "time_cell") {
243 val = cell.getAttribute('data-sort');
244 cell.innerHTML = humanise_time(parseFloat(val));
245 } else if (cell.className === "int_cell") {
246 val = cell.getAttribute('data-sort');
247 cell.innerHTML = minify_numbers(parseInt(val));
248 }
249 }
250 }
251}
252
253function create_cell(type, value, perc_total) {
254 cell = document.createElement("td");
255
256 if (type === "text") {
257 cell.className = "text_cell";
258 text_span = document.createElement("span");
259 text_span.innerHTML = value;
260 cell.appendChild(text_span);
261 } else if (type === "code_loc") {
262 cell.className = "text_cell";
263 text_span = document.createElement("span");
264 text_span.innerHTML = value;
265 cell.appendChild(text_span);
266 if (data.hasOwnProperty("code"))
267 text_span.onclick = function() {view_code_snippet(value);}
268 } else if (type === "id") {
269 cell.innerHTML = value;
270 } else if (type === "time") {
271 cell.innerHTML = humanise_time(value);
272 cell.setAttribute('data-sort', value);
273 cell.className = "time_cell";
274 } else if (type === "int") {
275 cell.innerHTML = minify_numbers(value);
276 cell.setAttribute('data-sort', value);
277 cell.className = "int_cell";
278 } else if (type === "perc") {
279 div = document.createElement("div");
280 div.className = "perc_time";
281 if (perc_total == 0) {
282 div.style.width = "0%";
283 div.innerHTML = "0";
284 } else if (isNaN(value)) {
285 div.style.width = "0%";
286 div.innerHTML = "NaN";
287 } else {
288 div.style.width = parseFloat(value) / perc_total * 100 + "%";
289 div.innerHTML = clean_percentages(parseFloat(value) / perc_total * 100);
290 }
291 cell.appendChild(div);
292 }
293 return cell;
294}
295
296
297function generate_table(data_format,body_id,data_key) {
298 var item,i;
299 var perc_totals = [];
300
301 for (i in data_format) {
302 if (!data_format.hasOwnProperty(i)) continue;
303 if (data_format[i][0] === "perc") {
304 perc_totals.push([data_format[i][1],data_format[i][2],0]);
305 }
306 }
307
308 for (item in data[data_key]) {
309 if (data[data_key].hasOwnProperty(item)) {
310 for (i in perc_totals) {
311 if (!isNaN(data[data_key][item][perc_totals[i][1]])) {
312 perc_totals[i][2] += data[data_key][item][perc_totals[i][1]];
313 }
314 }
315 }
316 }
317
318
319 table_body = document.getElementById(body_id);
320 table_body.innerHTML = "";
321 for (item in data[data_key]) {
322 if (data[data_key].hasOwnProperty(item)) {
323 row = document.createElement("tr");
324 row.id = item;
325
326 if (data_key === "rel") {
327 row.className = "rel_row";
328 row.onclick = function () {
329 changeSelectedRel(this.id);
330 };
331 } else if (data_key === "rul") {
332 row.className = "rul_row";
333 row.onclick = function () {
334 changeSelectedRul(this.id);
335 };
336 }
337 perc_counter = 0;
338 for (i in data_format) {
339 if (!data_format.hasOwnProperty(i)) continue;
340 if (data_format[i][0] === "perc") {
341 cell = create_cell(data_format[i][0], data[data_key][item][data_format[i][2]], perc_totals[perc_counter++][2]);
342 } else {
343 cell = create_cell(data_format[i][0], data[data_key][item][data_format[i][1]]);
344 }
345 row.appendChild(cell);
346 }
347 table_body.appendChild(row);
348 }
349 }
350}
351
352function gen_rel_table() {
353 generate_table([["text",0],["id",1],["time",2],["time",3],["time",4],
354 ["time",5],["int",6],["int", 7],["perc","float",2],["perc","int",6],["code_loc",8]],
355 "Rel_table_body",
356 "rel");
357}
358
359function gen_rul_table() {
360 generate_table([["text",0],["id",1],["time",2],["time",3],["time",4],
361 ["int",5],["perc","float",2],["perc","int",5],["code_loc",6]],
362 "Rul_table_body",
363 "rul");
364}
365
366function gen_top_rel_table() {
367 generate_table([["text",0],["id",1],["time",2],["time",3],["time",4],
368 ["time",5],["int",6],["int",7],["perc","float",2],["perc","int",6],["code_loc",8]],
369 "top_rel_table_body",
370 "topRel");
371}
372
373function gen_top_rul_table() {
374 generate_table([["text",0],["id",1],["time",2],["time",3],["time",4],
375 ["int",5],["perc","float",2],["perc","int",5],["code_loc",6]],
376 "top_rul_table_body",
377 "topRul");
378}
379
380
381function genRulesOfRelations() {
382 var data_format = [["text",0],["id",1],["time",2],["time",3],["time",4],
383 ["int",5],["perc","float",2],["perc","int",5],["code_loc",6]];
384 var rules = data.rel[selected.rel][9];
385 var perc_totals = [];
386 var row, cell, perc_counter, table_body, i, j;
387 table_body = document.getElementById("rulesofrel_body");
388 table_body.innerHTML = "";
389
390 for (i in data_format) {
391 if (!data_format.hasOwnProperty(i)) continue;
392 if (data_format[i][0] === "perc") {
393 perc_totals.push([data_format[i][1],data_format[i][2],0]);
394 }
395 }
396
397 for (item in rules) {
398 if (data.rul[rules[item]].hasOwnProperty(item)) {
399 for (i in perc_totals) {
400 if (!isNaN(data.rul[rules[item]][perc_totals[i][1]])) {
401 perc_totals[i][2] += data.rul[rules[item]][perc_totals[i][1]];
402 }
403 }
404 }
405 }
406
407 for (j=0; j<rules.length; j++) {
408 row = document.createElement("tr");
409 perc_counter=0;
410 for (i in data_format) {
411 if (!data_format.hasOwnProperty(i)) continue;
412 if (data_format[i][0] === "perc") {
413 cell = create_cell(data_format[i][0], data.rul[rules[j]][data_format[i][2]], perc_totals[perc_counter++][2]);
414 } else {
415 cell = create_cell(data_format[i][0], data.rul[rules[j]][data_format[i][1]]);
416 }
417 row.appendChild(cell);
418 }
419 table_body.appendChild(row);
420 }
421
422 document.getElementById("rulesofrel").style.display = "block";
423}
424
425function genRulVer() {
426 var data_format = [["text",0],["id",1],["time",2],["time",3],["time",4],
427 ["int",5],["int",7],["perc","float",2],["perc","int",5],["code_loc",6]];
428 var rules = data.rul[selected.rul][7];
429 var perc_totals = [];
430 var row, cell, perc_counter, table_body, i, j;
431 table_body = document.getElementById("rulver_body");
432 table_body.innerHTML = "";
433
434 for (i in data_format) {
435 if (!data_format.hasOwnProperty(i)) continue;
436 if (data_format[i][0] === "perc") {
437 if (!isNaN(data.rul[selected.rul][data_format[i][2]])) {
438 perc_totals.push([data_format[i][1], data_format[i][2], data.rul[selected.rul][data_format[i][2]]]);
439 }
440 }
441 }
442
443 row = document.createElement("tr");
444 for (i in data_format) {
445 if (!data_format.hasOwnProperty(i)) continue;
446 if (data_format[i][1] == 7) {
447 cell = create_cell("text","-")
448 } else if (data_format[i][0] === "perc") {
449 cell = create_cell(data_format[i][0], 1, 1);
450 } else {
451 cell = create_cell(data_format[i][0], data.rul[selected.rul][data_format[i][1]]);
452 }
453 row.appendChild(cell);
454 }
455 table_body.appendChild(row);
456
457 for (j=0; j<rules.length; j++) {
458 row = document.createElement("tr");
459 perc_counter=0;
460 for (i in data_format) {
461 if (!data_format.hasOwnProperty(i)) continue;
462 if (data_format[i][0] === "perc") {
463 cell = create_cell(data_format[i][0], rules[j][data_format[i][2]], perc_totals[perc_counter++][2]);
464 } else {
465 cell = create_cell(data_format[i][0], rules[j][data_format[i][1]]);
466 }
467 row.appendChild(cell);
468 }
469 table_body.appendChild(row);
470 }
471
472 document.getElementById("rulver").style.display = "block";
473}
474)___"
475 R"___(
476function genAtomVer() {
477 var atoms = data.atoms[selected.rul];
478 var table_body = document.getElementById('atoms_body');
479 table_body.innerHTML = "";
480
481 for (i = 0; i < atoms.length; ++i) {
482 var row = document.createElement("tr");
483 row.appendChild(create_cell("text", atoms[i][1]));
484 if (atoms[i][2] === undefined) {
485 row.appendChild(create_cell("text", '--'));
486 } else {
487 row.appendChild(create_cell("int", atoms[i][2]));
488 }
489 row.appendChild(create_cell("int", atoms[i][3]));
490 table_body.appendChild(row);
491 }
492 document.getElementById("atoms").style.display = "block";
493}
494
495function genConfig() {
496 var table = document.createElement("table");
497 {
498 var header = document.createElement("thead");
499 var headerRow = document.createElement("tr");
500 var headerName = document.createElement("th");
501 headerName.textContent = "Key";
502 var headerValue = document.createElement("th");
503 headerValue.textContent = "Value";
504
505 headerRow.appendChild(headerName);
506 headerRow.appendChild(headerValue);
507 header.appendChild(headerRow);
508 table.appendChild(header);
509 }
510 var body = document.createElement("tbody");
511 for (i in data["configuration"]) {
512 var row = document.createElement("tr");
513 var name = document.createElement("td");
514 if (i === "") {
515 name.textContent = "Datalog input file";
516 } else {
517 name.textContent = i;
518 }
519 var value = document.createElement("td");
520 value.textContent = data["configuration"][i];
521
522 row.appendChild(name);
523 row.appendChild(value);
524 body.appendChild(row);
525 }
526 table.appendChild(body);
527 return table;
528}
529
530function gen_top() {
531 var statsElement, line1, line2;
532 statsElement = document.getElementById("top-stats");
533 line1 = document.createElement("p");
534 line1.textContent = "Total runtime: " + humanise_time(data.top[0]) + " (" + data.top[0] + " seconds)";
535 line2 = document.createElement("p");
536 line2.textContent = "Total tuples: " + minify_numbers(data.top[1]) + " (" + data.top[1] + ")";
537 line3 = document.createElement("p");
538 line3.textContent = "Total loadtime: " + humanise_time(data.top[2]) + " (" + data.top[2] + " seconds)";
539 line4 = document.createElement("p");
540 line4.textContent = "Total savetime: " + humanise_time(data.top[3]) + " (" + data.top[3] + " seconds)";
541 statsElement.appendChild(line1);
542 statsElement.appendChild(line2);
543 statsElement.appendChild(line3);
544 statsElement.appendChild(line4);
545 graphUsages();
546
547 document.getElementById("top-config").appendChild(genConfig());
548 gen_top_rel_table();
549 gen_top_rul_table();
550}
551
552function view_code_snippet(value) {
553 value = value.split(" ");
554 value = value[value.length-1]; // get [num:num]
555 value = value.slice(1); // cut out "["
556 value = value.split(":");
557 value = value[0];
558 var targetLi = gen_code(parseInt(value));
559 document.getElementById("code_tab").click();
560
561 var list = document.getElementById("code-view");
562
563 list.scrollTop = Math.max(21*parseInt(value) - 100, 0);
564
565}
566
567
568function gen_code(highlight_row) {
569 var list, row, text, target_row;
570 list = document.getElementById("code-list");
571 list.innerHTML = "";
572 if (!data.code) return;
573 for (var i=0; i<data.code.length; i++) {
574 row = document.createElement("li");
575 row.className = "code-li";
576 if (i+1 == highlight_row) {
577 target_row = row;
578 row.style.background = "#E0FFFF";
579 }
580 row.style.marginBottom = "0";
581 text = document.createElement("span");
582 text.className = "text-span";
583 text.textContent = data.code[i];
584 row.appendChild(text);
585 list.appendChild(row);
586 }
587 document.getElementById("code-view").appendChild(list);
588 return target_row;
589}
590
591
592var precision = !1;
593var selected = {rel: !1, rul: !1};
594var came_from = !1;
595var graph_vals = {
596 labels:[],
597 tot_t:[],
598 tuples:[]
599};
600
601
602function init() {
603 gen_top();
604 gen_rel_table();
605 gen_rul_table();
606 gen_code(-1)
607 Tablesort(document.getElementById('Rel_table'),{descending: true});
608 Tablesort(document.getElementById('Rul_table'),{descending: true});
609 Tablesort(document.getElementById('rulesofrel_table'),{descending: true});
610 Tablesort(document.getElementById('rulvertable'),{descending: true});
611 document.getElementById("default").click();
612 //document.getElementById("default").classList['active'] = !0;
613
614}
615
616init();
617 )___";
618}
619} // namespace profile
620} // namespace souffle