Skip to content
Snippets Groups Projects
Commit 74c6ccfc authored by Cyril NERIN's avatar Cyril NERIN
Browse files

FEAT #94

parent 0ad77c74
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
jass/static/chromo_heatmap_manhattan_by_region.html
+ 313
− 5
View file @ 74c6ccfc
...@@ -108,6 +108,7 @@ ...@@ -108,6 +108,7 @@
<select id="HeatList" onChange="redrawHeatmap()" hidden="true"></select> <select id="HeatList" onChange="redrawHeatmap()" hidden="true"></select>
<div id="exportHeatPlot" hidden="true"><button id="exportHeatmap" >Export</button></div> <div id="exportHeatPlot" hidden="true"><button id="exportHeatmap" >Export</button></div>
<div id="divLocalStatPlot" ><!-- Plotly chart will be drawn inside this DIV --></div> <div id="divLocalStatPlot" ><!-- Plotly chart will be drawn inside this DIV --></div>
<div id="myDiv"></div>
<script> <script>
...@@ -192,12 +193,23 @@ ...@@ -192,12 +193,23 @@
}); });
heatColors.appendChild(fragmentHeat); heatColors.appendChild(fragmentHeat);
$('#summaryStat').show(); $('#summaryStat').show();
selectRegion();
$('#HeatList').show(); $.get("/api/projects/" + idProject + "/dispo_gene_exon", function( data1 ) {
console.log("dispo_gene_exon="+data1);
if (data1 == "READY"){
gene_and_exon();
}
else {
$.get("/api/projects/" + idProject + "/error_msg", function( data2 ) {
var User_Message3 = "An error has occurred: please check your data \n " + data2;
alert(User_Message3);
});
}
selectRegion();
$('#HeatList').show();
});
console.log("Sortie de la fonction init() " ); //__Modif__CN__ console.log("Sortie de la fonction init() " ); //__Modif__CN__
} }
...@@ -354,7 +366,7 @@ ...@@ -354,7 +366,7 @@
{ {
x: [d, e], x: [d, e],
y: [genomelocalline, genomelocalline], y: [genomelocalline, genomelocalline],
mode: 'lines+markers+text', mode: 'lines',
name: 'significance treshold', name: 'significance treshold',
textposition: 'top', textposition: 'top',
type: 'scatter', type: 'scatter',
...@@ -885,6 +897,302 @@ ...@@ -885,6 +897,302 @@
// --------------------------------------------------------------------------------------------------------------------------- // ---------------------------------------------------------------------------------------------------------------------------
function create_the_graph_of_genes_and_exons(GeneID,
gene_label,
gene_start,
gene_end,
gene_direction,
gene_biotype,
exons,
start,
end){
var NB_lines = 3;
var left_arrow = "\u2190 ";
var right_arrow = " \u2192";
var y_coord = [14.5, 11.5, 8.5, 5.5, 2.5];
const K_PROTEIN_CODING = 0;
const K_rRNA = 1;
const K_OTHER = 2;
var color_gene = ["rgb(0, 0, 111)",
"rgb(120, 0, 0)",
"rgb(0, 120, 0)"];
var color_exon = ["rgb(0, 0, 255)",
"rgb(255, 0, 0)",
"rgb(0, 180, 0)"];
var k = -1;
var genes_and_exons_shapes = new Array();
var genes_x = new Array();
var genes_y = new Array();
var the_genes_label = new Array();
for (i = 0; i < 3; i++) {
var genes_x_i = new Array();
genes_x.push(genes_x_i);
var genes_y_i = new Array();
genes_y.push(genes_y_i);
var the_genes_label_i = new Array();
the_genes_label.push(the_genes_label_i);
}
var data = new Array();
var label_biotype = ["protein coding", "rRNA", "other"];
var label_exon = ["coding gene", "gene rRNA", "other gene"];
for (i = 0; i < GeneID.length; i++) {
k = k + 1;
if (k >= NB_lines) {k = 0;}
var coord_x = (gene_start[i] + gene_end[i]) / 2;
var coord_y = y_coord[k] + 1;
if (gene_direction[i] == "-") {
var the_label = left_arrow + gene_label[i];
}
else {
var the_label = gene_label[i] + right_arrow;
}
if (gene_biotype[i] == "protein_coding") {
color_number = K_PROTEIN_CODING;
}
else if (gene_biotype[i] == "rRNA") {
color_number = K_rRNA;
}
else {
color_number = K_OTHER;
}
genes_x[color_number].push(coord_x);
genes_y[color_number].push(coord_y);
the_genes_label[color_number].push(the_label);
var nouveau_gene = {
type: 'line',
x0: gene_start[i],
y0: y_coord[k],
x1: gene_end[i],
y1: y_coord[k],
line: {
color: color_gene[color_number],
width: 3
}
};
exon_data = exons.get(GeneID[i]);
exon_label = exon_data.label;
exon_start = exon_data.start;
exon_end = exon_data.end;
for (j = 0; j < exon_label.length; j++) {
var nouvel_exon = {
type: 'rect',
x0: exon_start[j],
y0: y_coord[k] - 0.5,
x1: exon_end[j],
y1: y_coord[k] + 0.5,
line: {
color: color_exon[color_number],
width: 1
},
fillcolor: color_exon[color_number]
};
genes_and_exons_shapes.push(nouvel_exon);
}
genes_and_exons_shapes.push(nouveau_gene);
}
var legend_group = ["GENES", "EXONS"];
for (i = 0; i < 2; i++) {
var tip_group_legend_title = {
mode: 'lines',
type: 'scatter',
x: [gene_start[0],gene_end[0]],
y: [y_coord[0], y_coord[0]],
legendgroup: legend_group[i],
line: {
width: 0,
color: 'white'
},
name: legend_group[i],
showlegend: true,
};
data.push(tip_group_legend_title);
}
for (i = 0; i < 3; i++) {
if (genes_x[i].length > 0) {
var label_genes = {
x: genes_x[i],
y: genes_y[i],
text: the_genes_label[i],
mode: 'text',
textfont: {
family: "Calibri, Arial, Times New Roman",
size: 14,
color: color_gene[i]
},
showlegend: false,
};
data.push(label_genes);
var tip_legend = {
mode: 'lines',
type: 'scatter',
x: [gene_start[0],gene_end[0]],
y: [y_coord[0], y_coord[0]],
legendgroup: legend_group[0],
line: {
color: color_gene[i],
width: 3
},
name: label_biotype[i],
showlegend: true,
};
data.push(tip_legend);
var tip_legend = {
mode: 'lines',
type: 'scatter',
x: [gene_start[0],gene_end[0]],
y: [y_coord[0], y_coord[0]],
legendgroup: legend_group[1],
line: {
color: color_exon[i],
width: 1
},
name: label_exon[i],
showlegend: true,
};
data.push(tip_legend);
}
}
var margin_axis = Math.ceil((end - start)/20);
var new_start = start - margin_axis;
var new_end = end + margin_axis;
var layout = {
title: 'Genes and exons',
showlegend: true ,
legend: {
title: {
text: 'Biotype of the genes'
},
font: {
size: 8
},
},
margin: {
l: 95,
r: 50,
b: 60,
t: 100,
pad: 4
},
xaxis: {
range: [new_start, new_end],
title: "position",
titlefont: {
size: 10
},
tickmode: 'auto',
tickfont: {
size: 10
},
nticks: 20
},
yaxis: {
range: [0, 20],
autotick: true,
ticks: '',
showticklabels: false ,
showgrid: false
},
width: plotSize,
height: 500,
shapes: genes_and_exons_shapes
};
Plotly.newPlot('myDiv', data, layout);
}
// ---------------------------------------------------------------------------------------------------------------------------
function gene_and_exon(){
console.log("Entrée dans la fonction gene_and_exon " ); //__Modif__CN__
console.log("/api/projects/"+idProject+"/gene_exon");
Plotly.d3.csv("/api/projects/" + idProject + "/gene_exon",
function(data){ process_gene_and_exon(data) } );
console.log("Sortie de la fonction gene_and_exon" ); //__Modif__CN__
}
// ---------------------------------------------------------------------------------------------------------------------------
function process_gene_and_exon(rows) {
console.log("Entrée dans la fonction process_gene_and_exon(rows) " ); //__Modif__CN__
var start = parseInt(sessionStorage.getItem("start"));
var end = parseInt(sessionStorage.getItem("end"));
console.log("rows.length "+rows.length);
var GeneID = new Array();
var gene_label = new Array();
var gene_start = new Array();
var gene_end = new Array();
var gene_direction = new Array();
var gene_biotype = new Array() ;
var exons = new Map();
var Gene__ID_old = new Array();
Gene__ID_old.push("");
for (var i = 0 ; i < rows.length ; i++) {
var ligne = rows[i];
var Gene__ID = ligne.GeneID;
if (Gene__ID_old.includes(Gene__ID) == false) {
Gene__ID_old.push(Gene__ID);
GeneID.push(Gene__ID);
var Gene__label = ligne.gene_label;
gene_label.push(Gene__label);
var Gene__start = Math.max(parseInt(ligne.gene_start), start);
gene_start.push(Gene__start);
var Gene__end = Math.min(parseInt(ligne.gene_end), end);
gene_end.push(Gene__end);
var Gene__direction = ligne.gene_direction;
gene_direction.push(Gene__direction);
var Gene__biotype = ligne.gene_biotype;
gene_biotype.push(Gene__biotype);
var Exon__label = new Array();
var Exon__start = new Array();
var Exon__end = new Array();
exons.set(Gene__ID, {
label: Exon__label,
start: Exon__start,
end: Exon__end});
}
exon_data = exons.get(Gene__ID);
exon_data.label.push(ligne.exon_label);
exon_data.start.push(parseInt(ligne.exon_start));
exon_data.end.push(parseInt(ligne.exon_end));
}
create_the_graph_of_genes_and_exons(GeneID,
gene_label,
gene_start,
gene_end,
gene_direction,
gene_biotype,
exons,
start,
end);
}
</script> </script>
</body> </body>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment