Commit 3816d8e5 authored by HERBERT Ryan's avatar HERBERT Ryan
Browse files

*.js error reporting to database

Wrapping large sections of code in the key areas such as initialisation
and update locations in order to catch client-side errors and report
them to the server.
parent 81e90b05
......@@ -435,164 +435,169 @@ Builder.prototype = {
build_info_container: function () {
var self = this
var parent = document.getElementById("info")
parent.innerHTML = "";
var patient_info = typeof this.m.info != 'undefined' ? this.m.info : "";
var div_patient_info = this.create_generic_info_container(
patient_info,
'patient_info',
'patient_info_text',
'patient information',
'info');
parent.appendChild(div_patient_info)
//global info
/*var div_analysis_file = this.build_info_line("info_analysis_file", this.m.analysisFileName)
parent.appendChild(div_analysis_file)*/
//system
if (this.m.system =="multi"){
var div_multi_system = this.build_multi_system()
parent.appendChild(div_multi_system)
}else{
var div_system = this.build_info_line("info_system", this.m.system)
parent.appendChild(div_system)
}
//point info
var sample_div = document.createElement("div")
sample_div.className = "sample_details"
var point_value = this.m.getStrTime(this.m.t, "name")
point_value = point_value != "" ? point_value : "-/-"
var point_name_container = document.createElement("div")
point_name_container.className += "inline-block_90 centered ellipsis"
point_name_container.title = point_value
point_name_container.appendChild(document.createTextNode(point_value))
var infoTime_container = document.createElement("div")
infoTime_container.className = "inline-block_10"
var infoTime = self.createClickableElem('span',
[icon('icon-info', 'sample information')],
"",
"button",
function () {
console.log({"type": "big-popup", "msg": self.m.getPointHtmlInfo(self.m.t)});
try {
var parent = document.getElementById("info")
parent.innerHTML = "";
var patient_info = typeof this.m.info != 'undefined' ? this.m.info : "";
var div_patient_info = this.create_generic_info_container(
patient_info,
'patient_info',
'patient_info_text',
'patient information',
'info');
parent.appendChild(div_patient_info)
//global info
/*var div_analysis_file = this.build_info_line("info_analysis_file", this.m.analysisFileName)
parent.appendChild(div_analysis_file)*/
//system
if (this.m.system =="multi"){
var div_multi_system = this.build_multi_system()
parent.appendChild(div_multi_system)
}else{
var div_system = this.build_info_line("info_system", this.m.system)
parent.appendChild(div_system)
}
);
infoTime_container.appendChild(infoTime)
var div_point = this.build_composite_info_line("info_point", [infoTime_container, point_name_container])
$(div_point).on("dblclick", function() {
self.edit(this, "names");
});
sample_div.appendChild(div_point)
var span_date = document.createElement("span")
span_date.appendChild(document.createTextNode(this.m.getStrTime(this.m.t, "sampling_date")))
var nav_container = document.createElement("div")
nav_container.className += " centered inline-block_90"
nav_container.appendChild(span_date)
var play_stop_container_div = document.createElement("div")
play_stop_container_div.className = "inline-block_10"
sample_div.appendChild(play_stop_container_div)
if (this.m.samples.order.length > 1){
var nextTime = self.createClickableElem('span',
[icon('icon-right-open-1', 'next sample')],
//point info
var sample_div = document.createElement("div")
sample_div.className = "sample_details"
var point_value = this.m.getStrTime(this.m.t, "name")
point_value = point_value != "" ? point_value : "-/-"
var point_name_container = document.createElement("div")
point_name_container.className += "inline-block_90 centered ellipsis"
point_name_container.title = point_value
point_name_container.appendChild(document.createTextNode(point_value))
var infoTime_container = document.createElement("div")
infoTime_container.className = "inline-block_10"
var infoTime = self.createClickableElem('span',
[icon('icon-info', 'sample information')],
"",
"next_button button",
"button",
function () {
self.m.nextTime();
console.log({"type": "big-popup", "msg": self.m.getPointHtmlInfo(self.m.t)});
}
);
nav_container.appendChild(nextTime)
if (self.m.isPlaying){
var stop = self.createClickableElem('div',
[icon('icon-pause', 'pauses cycling')],
infoTime_container.appendChild(infoTime)
var div_point = this.build_composite_info_line("info_point", [infoTime_container, point_name_container])
$(div_point).on("dblclick", function() {
self.edit(this, "names");
});
sample_div.appendChild(div_point)
var span_date = document.createElement("span")
span_date.appendChild(document.createTextNode(this.m.getStrTime(this.m.t, "sampling_date")))
var nav_container = document.createElement("div")
nav_container.className += " centered inline-block_90"
nav_container.appendChild(span_date)
var play_stop_container_div = document.createElement("div")
play_stop_container_div.className = "inline-block_10"
sample_div.appendChild(play_stop_container_div)
if (this.m.samples.order.length > 1){
var nextTime = self.createClickableElem('span',
[icon('icon-right-open-1', 'next sample')],
"",
"stop_button button",
"next_button button",
function () {
self.m.stop();
self.m.nextTime();
}
);
nav_container.appendChild(nextTime)
if (self.m.isPlaying){
var stop = self.createClickableElem('div',
[icon('icon-pause', 'pauses cycling')],
"",
"stop_button button",
function () {
self.m.stop();
}
);
play_stop_container_div.appendChild(stop)
} else {
var play = self.createClickableElem('div',
[icon('icon-play', 'cycle through samples')],
"",
"play_button button",
function () {
self.m.play(self.m.t);
}
);
play_stop_container_div.appendChild(play)
}
play_stop_container_div.appendChild(stop)
} else {
var play = self.createClickableElem('div',
[icon('icon-play', 'cycle through samples')],
var previousTime = self.createClickableElem('span',
[icon('icon-left-open-1', 'previous sample') ],
"",
"play_button button",
"previous_button button",
function () {
self.m.play(self.m.t);
self.m.previousTime();
}
);
play_stop_container_div.appendChild(play)
nav_container.insertBefore(previousTime, nav_container.childNodes[0]);
}
var previousTime = self.createClickableElem('span',
[icon('icon-left-open-1', 'previous sample') ],
var span = self.createClickableElem('span',
[document.createTextNode("edit")],
"",
"previous_button button",
"button_right",
function () {
self.m.previousTime();
self.edit(this, "timestamp");
}
);
nav_container.insertBefore(previousTime, nav_container.childNodes[0]);
}
var div_date = this.build_composite_info_line("info_date", [play_stop_container_div, nav_container])
var span = self.createClickableElem('span',
[document.createTextNode("edit")],
"",
"button_right",
function () {
self.edit(this, "timestamp");
}
);
var div_date = this.build_composite_info_line("info_date", [play_stop_container_div, nav_container])
// div_date.appendChild(span)
sample_div.appendChild(div_date)
// div_date.appendChild(span)
sample_div.appendChild(div_date)
parent.appendChild(sample_div)
parent.appendChild(sample_div)
var reads_div = document.createElement("div")
reads_div.className = "reads_details"
var reads_div = document.createElement("div")
reads_div.className = "reads_details"
// Segmented reads
var div_segmented = this.build_line_read_number("info_segmented", "analyzed reads", "analyzed", this.m.reads.segmented_all)
div_segmented.title = "total: " + this.m.toStringThousands(this.m.reads.total[this.m.t])
reads_div.appendChild(div_segmented)
// Segmented reads
var div_segmented = this.build_line_read_number("info_segmented", "analyzed reads", "analyzed", this.m.reads.segmented_all)
div_segmented.title = "total: " + this.m.toStringThousands(this.m.reads.total[this.m.t])
reads_div.appendChild(div_segmented)
// Segmented reads, on the selected system(s)
if (this.m.system == "multi") {
var div_segmented = this.build_line_read_number("info_selected_locus", "selected locus", "on selected locus", this.m.reads.segmented)
reads_div.appendChild(div_segmented)
}
parent.appendChild(reads_div)
var clear_div = document.createElement("div")
clear_div.className = "clear"
parent.appendChild(clear_div)
// Segmented reads, on the selected system(s)
if (this.m.system == "multi") {
var div_segmented = this.build_line_read_number("info_selected_locus", "selected locus", "on selected locus", this.m.reads.segmented)
reads_div.appendChild(div_segmented)
}
var div_color = this.build_info_color()
parent.appendChild(div_color)
parent.appendChild(reads_div)
var div_sequence_info = this.create_sample_info_container(
this.m.getInfoTime(this.m.t),
'sequence_info',
'info_text',
'sample information',
'info');
parent.appendChild(div_sequence_info)
var clear_div = document.createElement("div")
clear_div.className = "clear"
parent.appendChild(clear_div)
var div_color = this.build_info_color()
parent.appendChild(div_color)
var div_sequence_info = this.create_sample_info_container(
this.m.getInfoTime(this.m.t),
'sequence_info',
'info_text',
'sample information',
'info');
parent.appendChild(div_sequence_info)
this.initTag();
} catch(err) {
this.db.error(err.stack);
}
this.initTag();
},
build_line_read_number: function (id, label, qualifier, read_number) {
......
......@@ -72,7 +72,7 @@
/** constructor
*
* */
function Graph(id, model) {
function Graph(id, model, database) {
//
View.call(this, model);
......@@ -104,6 +104,7 @@ function Graph(id, model) {
this.text_position_x = 60;
this.m.graph = this // TODO: find a better way to do this
this.db = database;
}
Graph.prototype = {
......@@ -116,80 +117,84 @@ Graph.prototype = {
*
* */
build_graph : function () {
document.getElementById(this.id)
.innerHTML = "";
this.mode = "curve";
try {
document.getElementById(this.id)
.innerHTML = "";
var self = this;
this.vis = d3.select("#" + this.id)
.attr("class", "graph")
.append("svg:svg")
.attr("id", this.id + "_svg")
.on("mouseup", function () {
self.stopDrag()
})
.on("mousemove", function () {
self.dragTimePoint()
})
d3.select("#" + this.id + "_svg")
.append("svg:rect")
.attr("id", this.id + "_back")
.attr("class", "background_graph")
.attr("x", 0)
.attr("y", 0)
.attr("width", 2500)
.attr("height", 2500)
.on("click", function () {
self.m.unselectAll();
})
.on("mouseover", function () {
self.m.focusOut();
$("#" + self.id + "_list")
.stop(true, true)
.hide("fast")
})
this.mode = "curve";
var self = this;
this.vis = d3.select("#" + this.id)
.attr("class", "graph")
.append("svg:svg")
.attr("id", this.id + "_svg")
.on("mouseup", function () {
self.stopDrag()
})
.on("mousemove", function () {
self.dragTimePoint()
})
d3.select("#" + this.id + "_svg")
.append("svg:rect")
.attr("id", this.id + "_back2")
.attr("class", "background_graph2")
.attr("x", this.marge4)
.attr("y", 0)
.attr("width", 2500)
.attr("height", 2500)
.on("click", function () {
self.m.unselectAll();
})
.on("mouseover", function () {
self.m.focusOut();
$("#" + self.id + "_list")
.stop(true, true)
.hide("fast")
})
d3.select("#" + this.id + "_svg")
.append("svg:rect")
.attr("id", this.id + "_back")
.attr("class", "background_graph")
.attr("x", 0)
.attr("y", 0)
.attr("width", 2500)
.attr("height", 2500)
.on("click", function () {
self.m.unselectAll();
})
.on("mouseover", function () {
self.m.focusOut();
$("#" + self.id + "_list")
.stop(true, true)
.hide("fast")
})
this.axis_container = d3.select("#" + this.id + "_svg")
.append("svg:g")
.attr("id", "axis_container")
this.reso_container = d3.select("#" + this.id + "_svg")
.append("svg:g")
.attr("id", "reso_container")
this.data_container = d3.select("#" + this.id + "_svg")
.append("svg:g")
.attr("id", "data_container")
this.clones_container = d3.select("#" + this.id + "_svg")
.append("svg:g")
.attr("id", "clones_container")
this.date_container = d3.select("#" + this.id + "_svg")
.append("svg:g")
.attr("id", "date_container")
this.text_container = d3.select("#" + this.id + "_svg")
.append("svg:g")
.attr("id", "text_container")
d3.select("#" + this.id + "_svg")
.append("svg:rect")
.attr("id", this.id + "_back2")
.attr("class", "background_graph2")
.attr("x", this.marge4)
.attr("y", 0)
.attr("width", 2500)
.attr("height", 2500)
.on("click", function () {
self.m.unselectAll();
})
.on("mouseover", function () {
self.m.focusOut();
$("#" + self.id + "_list")
.stop(true, true)
.hide("fast")
})
this.build_menu()
.build_list();
this.axis_container = d3.select("#" + this.id + "_svg")
.append("svg:g")
.attr("id", "axis_container")
this.reso_container = d3.select("#" + this.id + "_svg")
.append("svg:g")
.attr("id", "reso_container")
this.data_container = d3.select("#" + this.id + "_svg")
.append("svg:g")
.attr("id", "data_container")
this.clones_container = d3.select("#" + this.id + "_svg")
.append("svg:g")
.attr("id", "clones_container")
this.date_container = d3.select("#" + this.id + "_svg")
.append("svg:g")
.attr("id", "date_container")
this.text_container = d3.select("#" + this.id + "_svg")
.append("svg:g")
.attr("id", "text_container")
this.build_menu()
.build_list();
} catch(err) {
this.db.error(err.stack);
}
return this
},
......
......@@ -42,10 +42,11 @@
* @augments View
* @this View
* */
function List(id_list, id_data, model) {
function List(id_list, id_data, model, database) {
var self=this;
View.call(this, model);
this.db = database;
this.id = id_list; //ID de la div contenant la liste
this.id_data = id_data;
......@@ -71,48 +72,51 @@ List.prototype = {
build: function () {
var self =this;
//build dataMenu
this.dataMenu = document.createElement("div");
this.dataMenu.className = "dataMenu";
var closedataMenu = document.createElement("span");
closedataMenu.className = "closeButton" ;
closedataMenu.appendChild(icon('icon-cancel', ''));
closedataMenu.onclick = function() {$(this).parent().hide('fast')};
this.dataMenu.appendChild(closedataMenu);
this.dataMenuInfo = document.createElement("div");
this.dataMenu.appendChild(this.dataMenuInfo);
var div_normalize = document.createElement("div");
div_normalize.appendChild(document.createElement("span").appendChild(document.createTextNode("normalize to: ")));
this.data_norm_input = document.createElement("input");
this.data_norm_input.id = "normalized_data_size";
this.data_norm_input.step = '0.0001';
this.data_norm_input.type = 'number';
div_normalize.appendChild(document.createElement("span").appendChild(this.data_norm_input));
this.data_norm_input_button = document.createElement("BUTTON");
this.data_norm_input_button.id = "normalized_size_button";
this.data_norm_input_button.appendChild(document.createTextNode("ok"));
div_normalize.appendChild(this.data_norm_input_button);
this.dataMenu.appendChild(div_normalize);
this.data_norm_input.onkeydown = function () {
if (event.keyCode == 13) self.data_norm_input_button.click();
}
this.data_norm_input_button.onclick = function () {
var data = self.dataMenuInfo.innerHTML
var size = parseFloat(self.data_norm_input.value);
self.data_norm_input.value = ""
self.m.compute_data_normalization(data, size)
self.m.update()
$(self.dataMenu).hide('fast')
try {
//build dataMenu
this.dataMenu = document.createElement("div");
this.dataMenu.className = "dataMenu";
var closedataMenu = document.createElement("span");
closedataMenu.className = "closeButton" ;
closedataMenu.appendChild(icon('icon-cancel', ''));
closedataMenu.onclick = function() {$(this).parent().hide('fast')};
this.dataMenu.appendChild(closedataMenu);
this.dataMenuInfo = document.createElement("div");
this.dataMenu.appendChild(this.dataMenuInfo);
var div_normalize = document.createElement("div");
div_normalize.appendChild(document.createElement("span").appendChild(document.createTextNode("normalize to: ")));
this.data_norm_input = document.createElement("input");
this.data_norm_input.id = "normalized_data_size";
this.data_norm_input.step = '0.0001';
this.data_norm_input.type = 'number';
div_normalize.appendChild(document.createElement("span").appendChild(this.data_norm_input));
this.data_norm_input_button = document.createElement("BUTTON");
this.data_norm_input_button.id = "normalized_size_button";
this.data_norm_input_button.appendChild(document.createTextNode("ok"));
div_normalize.appendChild(this.data_norm_input_button);
this.dataMenu.appendChild(div_normalize);
this.data_norm_input.onkeydown = function () {
if (event.keyCode == 13) self.data_norm_input_button.click();
}
this.data_norm_input_button.onclick = function () {
var data = self.dataMenuInfo.innerHTML
var size = parseFloat(self.data_norm_input.value);
self.data_norm_input.value = ""
self.m.compute_data_normalization(data, size)
self.m.update()
$(self.dataMenu).hide('fast')
}
document.body.appendChild(this.dataMenu);
} catch(err) {
this.db.error(err.stack);
}
document.body.appendChild(this.dataMenu);
},
/**
......@@ -120,10 +124,14 @@ List.prototype = {
* need to be done after each .vidjil file change
* */
init: function () {
this.build_list()
this.build_data_list()
this.update();
this.resize();
try {
this.build_list()