Commit 934bc01b authored by Bertrand  NÉRON's avatar Bertrand NÉRON
Browse files

fix gene dispaly when it's a draft genome (no begin end properties for the genes)

in this case the genes are symbolized as retangle intead of arrow ( the sens D/C is unknown )
the position are deduced from the protein lenght with an arbitrary space between 2 genes
we assume the genes are in th right order 
parent 01ae947b
<!DOCTYPE html>
<html>
<head>
<title>secretion system {{code}}</title>
<script src="/_utils/script/jquery.js"></script>
<script src="../../script/raphael-min.js"></script>
<script type="text/javscript">
</script>
<link rel="stylesheet" href="../../style/main.css" type="text/css">
<link rel="stylesheet" href="../../style/color.css" type="text/css">
</head>
<body>
<h1>Secretion system {{code}}</h1>
<ul>
<li>code: {{code}}</li>
<li>T3SS family:{{T3SS_familly}}</li>
</ul>
<h2>Replicon</h2>
<ul>
{{#replicon}}
<li>name: {{name}}</li>
<li>taxid: {{taxid}}</li>
<li>strain: {{strain}}</li>
<li>taxonomy: {{taxonomy}}</li>
<li>type: {{type}}</li>
{{/replicon}}
</ul>
<div id="genes-schema">
</div>
<h3>Genes</h3>
<table>
<thead>
<tr>
<th>Gene-code</th><th>Gene-Id</th><th>Protein-length</th><th>Strand</th><th>Begin</th><th>End</th>
<th>Match</th><th>Full-score</th><th>E-value</th>
<th>Best-domain-score</th><th>Best-domain-evalue</th><th>C-value</th><th>Coverage-profile</th>
<th>Match-begin</th><th>Match-end</th>
</tr>
</thead>
<tbody>
{{#genes}}
<tr>
<td id="{{code}}" {{#match}} class="gene_{{match}}" {{/match}}>{{code}}</td><td>{{id}}</td><td>{{protein_length}}</td><td>{{strand}}</td><td>{{begin}}</td><td>{{end}}</td>
<td>{{match}}</td><td>{{full_score}}</td><td>{{e_value}}</td>
<td>{{best_domain_score}}</td><td>{{best_domain_evalue}}</td><td>{{c_value}}</td><td>{{coverage_profile}}</td>
<td>{{match_begin}}</td><td>{{match_end}}</td>
</tr>
{{/genes}}
</tbody>
</table>
</body>
</html>
</body>
</html>
\ No newline at end of file
......@@ -2,7 +2,7 @@
<html>
<head>
<title>secretion system {{code}}</title>
<link rel="stylesheet" href="../../style/main.css" type="text/css">
<link rel="stylesheet" href="../../style/system.css" type="text/css">
<link rel="stylesheet" href="../../style/color.css" type="text/css">
<script src="/_utils/script/jquery.js" type="text/javascript"></script>
<script src="/_utils/script/jquery.couch.js" type="text/javascript"></script>
......@@ -16,209 +16,232 @@
$.couch.db(dbname).openDoc( docID, {
success:function( doc ) {
var min = doc.genes[0].begin ;
var max = 0;
for( var i = 0 ;i<doc.genes.length ; i++ ){
var beg = doc.genes[i].begin ;
var end = doc.genes[i].end ;
if(beg<min){min = beg;}
if(end>max){max = end;}
}
var paper_w= $("#genes_schema").width();
var paper_h= 250;
var genome_offset= 45;
var genes_offset= 10;
var coef= (paper_w - (genome_offset+genes_offset)*2 )/(max - min);
var genome_orig= min;
var Y_genome= 55 ;
Raphael.fn.draw_genome = function(){
var genome_l = paper_w -(2* genome_offset);
return this.path( ["M", genome_offset , Y_genome, "h", genome_l ,"a25,5 -1 0,1 0,5h",(-1*(genome_l)),"a25,5 0 0,1 0,-5z" ]).attr({fill: "#aaa", stroke:"#aaa", "stroke-width":"1"} );
};
var Gene = function Gene( gene_info ){
var g_arrow = paper.draw_gene(gene_info);
this.arrow = g_arrow[0];
this.popup = paper.draw_gene_popup( g_arrow[1] , g_arrow[2] , gene_info);
this.arrow.mouseover( gene_show.bind(this));
this.arrow.mouseout( gene_hide.bind(this) );
this.zoom = gene_zoom;
this.translate = gene_translate;
};
Raphael.fn.draw_gene_popup = function( start, stop, gene_info ){
var popup = this.set();
var label = this.set();
var txt = {font: '12px Helvetica, Arial', fill: "#fff"};
var title = {font: '12px Helvetica, Arial', fill: "#aaf"};
label.push(this.text(60, 12, "gene id: "+gene_info.id ).attr(title));
label.push(this.text(60, 27, "begin: "+gene_info.begin ).attr(txt));
label.push(this.text(60, 42, "end: "+gene_info.end ).attr(txt));
label.hide();
popup.push( label );
var frame = this.popup( start +( (stop -start)/2 ) , 100, label , "bottom").attr({fill: "#000", stroke: "#666", "stroke-width": 2, "fill-opacity": .7});
frame.hide();
popup.push( frame );
return popup;
};
Raphael.fn.draw_gene = function( gene_info ){
var arrow_beg = Math.round((gene_info.begin - genome_orig)*coef)+genome_offset+genes_offset;
var arrow_end = Math.round((gene_info.end - genome_orig)*coef)+genome_offset+genes_offset;
var bd_l = Math.round((arrow_end - arrow_beg)*3/5);
var hd_l = Math.round((arrow_end - arrow_beg)*2/5);
var arrow ;
if( gene_info.strand =='D' ){
arrow = this.path( ["M", arrow_beg, Y_genome-28, "m0 20h", bd_l, "v-20l", hd_l, " 30l", (-1*hd_l),"30v-20h",(-1*bd_l),"z"]);
}else{
arrow = this.path( ["M", arrow_beg, Y_genome-28, "m0 30l",hd_l, "-30v20h", bd_l, "v20h", (-1*bd_l),"v20z"]);
}
if(!gene_info.match){
arrow.attr({fill: "white", stroke: "black", "stroke-dasharray": "-", "fill-opacity": 0.5});
}else{
var color=$( ".gene_"+gene_info.match).css( "backgroundColor" );
arrow.attr({fill: color, stroke: "none", "stroke-dasharray": "-", "fill-opacity": 0.9});
}
return [arrow , arrow_beg ,arrow_end ];
};
function gene_zoom( factor , ori ){
var bf_box = this.arrow.getBBox();
this.arrow.scale( factor, 1 , ori ,Y_genome );
var af_box = this.arrow.getBBox();
this.popup.translate( (af_box.x+(af_box.width/2 )) - (bf_box.x+(bf_box.width /2 )) , 0);
};
function gene_translate( dx , dy ){
var bf_box = this.arrow.getBBox(false);
this.arrow.translate( dx , dy );
var af_box = this.arrow.getBBox(false);
this.popup.translate((af_box.x + (af_box.width /2 )) - (bf_box.x + (bf_box.width /2 )) , (af_box.y-bf_box.y));
};
function gene_show(){
this.popup.show();
};
function gene_hide(){
this.popup.hide();
};
Raphael.fn.control = function( x , y , genes , genome ){
var west= this.path( ["M", x-40, y]+ "l20 -12 a70, 40 0 0,0 0, 24z").attr({fill:"blue"});//West
west.mousedown( function(){
for(var i = 0 ;i<genes.length ; i++){ genes[i].translate( -50 , 0); }
genome.translate( -50 , 0);
});
var east = this.path( ["M", x+40, y]+ "l-20 -12 a70, 40 0 0,1 0, 24z").attr({fill:"blue"});//East
east.mousedown( function(){
for(var i=0;i<genes.length; i++){ genes[i].translate(+50, 0);}
genome.translate(+50, 0);
});
this.circle( x , y , 20).attr({stroke:"black", "stroke-width": 2});
var genome_box= genome.getBBox();
var Xori_scale= genome_box.x+genome_box.width /2 ;
var zoom_in = this.set();
zoom_in.push(this.circle( x , y+9 , 8).attr({fill:"blue"}));//plus
zoom_in.push(this.rect( x-4 , y+7.5 , 8 ,3 ).attr({fill:"white", stroke:"white"}));//plus
zoom_in.push(this.rect( x-1.5 , y+5 , 3 ,8 ).attr({fill:"white", stroke:"white" }));//plus
zoom_in.mousedown( function(){
for(var i= 0 ;i<genes.length ; i++){
var g= genes[i] ;
genes[i].zoom(1.25 , Xori_scale);
}
genome.scale(1.25 ,1,Xori_scale ,Y_genome )
});
var zoom_out = this.set();
zoom_out.push(this.circle( x , y-9 , 8).attr({fill:"blue"}));//moins
zoom_out.push(this.rect( x-4 , y-10.5 , 8 ,3 ).attr({fill:"white", stroke:"white"}));//moins
zoom_out.mousedown( function(){
for(var i = 0 ;i<genes.length ; i++){
genes[i].zoom( 0.8 , Xori_scale);
}
genome.scale( 0.8 ,1,Xori_scale ,Y_genome );
});
};
var paper = Raphael("genes_schema", paper_w, paper_h );
var background = paper.rect( 0 , 1 , paper_w , paper_h).attr( {stroke:"none", fill:"white"});//pour recevoir les evts
var genesNgenome= paper.set();
var genome= paper.draw_genome();//bar grise
genesNgenome.push( genome );
var genes = new Array();
for(var i = 0 ;i<doc.genes.length ; i++){
var g = new Gene( doc.genes[i] ) ;//fleche+popup
genes.push(g);
genesNgenome.push(g.arrow , g.popup);
};
var genome_box = genome.getBBox();
var Xori4scale = genome_box.x + genome_box.width /2 ;
for(var i = 0 ;i<doc.genes.length ; i++){
for(var i = 0 ;i<genes.length ; i++){ genes[i].zoom( 1.01 , Xori4scale); }
};
ctrl_panel = paper.control( 50 , paper_h-30 , genes , genome );
var curr_paper_width = $("#genes_schema").width();
$(window).bind("resize" , function(Evt){
var gs = $("#genes_schema")
var new_width = gs.width();
paper.setSize( gs.width() , paper_h);
var scale_factor = (new_width -2* genome_offset)/(curr_paper_width -2* genome_offset);
var Xori4scale = genome_offset;
genome.scale( scale_factor, 1 , Xori4scale ,Y_genome );
for(var i= 0 ;i<genes.length ; i++){ genes[i].zoom( scale_factor , Xori4scale); }
background.scale( scale_factor,1,0,0 );
curr_paper_width= new_width;
});
var intOverallDelta= 0 ;
$("#genes_schema").mousewheel(function(objEvent, intDelta){
objEvent.stopImmediatePropagation();
var x = objEvent.pageX;
if (intDelta > 0){
intOverallDelta++;
genome.scale( 1.25, 1 , objEvent.pageX ,Y_genome );
for(var i = 0 ;i<genes.length ; i++){ genes[i].zoom( 1.25 , objEvent.pageX); }
}
else if (intDelta < 0){
intOverallDelta--;
genome.scale( 0.8, 1 , objEvent.pageX ,Y_genome );
for(var i=0 ;i<genes.length ; i++){ genes[i].zoom( 0.8 , objEvent.pageX); }
}
return false;//prevent to scroll the window
});
var drag_mousedown= function(x ,y,event) {
this.ox = event.screenX;
this.oy = event.screenY;
this.attr({
opacity: .5
});
};
var drag_mousemove= function(dx, dy,x ,y ,event) {
for(var i = 0 ;i<genes.length ; i++){ genes[i].translate(event.screenX - this.ox , 0); }
genome.translate( event.screenX - this.ox, 0);
this.ox = event.screenX;
this.oy = event.screenY;
};
var drag_mouseup= function(x,y,event){
dragging = false;
this.attr({
opacity: 1
});
};
genesNgenome.drag( drag_mousemove, drag_mousedown, drag_mouseup, genesNgenome, genesNgenome, genesNgenome );
background.drag( drag_mousemove, drag_mousedown, drag_mouseup, genesNgenome, genesNgenome, genesNgenome );
$("#genes_schema").bind("mousedown" , function( evt ){
$(this).toggleClass( "grabbing" ).toggleClass( "grabbable" );
});
$("#genes_schema").bind("mouseup" , function(){
$(this).toggleClass( "grabbable" ).toggleClass( "grabbing" );
});
var min = doc.genes[0].begin ;
var max = 0;
var all_protein_length = 0;
for( var i = 0 ;i<doc.genes.length ; i++ ){
var beg = doc.genes[i].begin ;
var end = doc.genes[i].end ;
if(beg<min){min = beg;}
if(end>max){max = end;}
all_protein_length = all_protein_length + doc.genes[i].protein_length
}
var paper_w= $("#genes_schema").width();
var paper_h= 250;
var genome_offset= 45;
var genes_offset= 10;
var inter_gene = 50;
if( max == 0){
min = 0;
max = all_protein_length + (( doc.genes.length -1) * inter_gene );
}
var coef= (paper_w - (genome_offset+genes_offset)*2 )/(max - min);
var genome_orig= min;
var Y_genome= 55 ;
Raphael.fn.draw_genome = function(){
var genome_l = paper_w -(2* genome_offset);
return this.path( ["M", genome_offset , Y_genome, "h", genome_l ,"a25,5 -1 0,1 0,5h",(-1*(genome_l)),"a25,5 0 0,1 0,-5z" ]).attr({fill: "#aaa", stroke:"#aaa", "stroke-width":"1"} );
};
var Gene = function Gene( gene_info , previous_gene ){
if (gene_info.begin){
this.begin = gene_info.begin;
this.end= gene_info.end;
}else{
this.begin = previous_gene + inter_gene
this.end = this.begin + gene_info.protein_length
}
//this.begin and end are begin and end on the genome (in base)
var g_arrow = paper.draw_gene( this.begin, this.end, gene_info, previous_gene);
this.arrow = g_arrow[0];
//g_arrow[1] and [2] are begin and end on the paper (in px)
this.popup = paper.draw_gene_popup( g_arrow[1] , g_arrow[2] , gene_info);
this.arrow.mouseover( gene_show.bind(this));
this.arrow.mouseout( gene_hide.bind(this) );
this.zoom = gene_zoom;
this.translate = gene_translate;
};
Raphael.fn.draw_gene_popup = function( start, stop, gene_info ){
var popup = this.set();
var label = this.set();
var txt = {font: '12px Helvetica, Arial', fill: "#fff"};
var title = {font: '12px Helvetica, Arial', fill: "#aaf"};
label.push(this.text(60, 12, "Gene-Id: "+gene_info.id ).attr(title));
if(gene_info.match){
label.push(this.text(60, 27, "match: "+gene_info.match ).attr(txt));
}
label.push(this.text(60, 42, "protein length: "+gene_info.protein_length).attr(txt));
label.hide();
popup.push( label );
var frame = this.popup( start +( (stop -start)/2 ) , 100, label , "bottom").attr({fill: "#000", stroke: "#666", "stroke-width": 2, "fill-opacity": .7});
frame.hide();
popup.push( frame );
return popup;
};
Raphael.fn.draw_gene = function( begin , end , gene_info , previous_gene ){
var arrow_beg = Math.round((begin - genome_orig)*coef)+genome_offset+genes_offset;
var arrow_end = Math.round((end - genome_orig)*coef)+genome_offset+genes_offset;
var body_l = Math.round((arrow_end - arrow_beg)*3/5);
var head_l = Math.round((arrow_end - arrow_beg)*2/5);
var arrow ;
if( gene_info.strand =='D' ){
arrow = this.path( ["M", arrow_beg, Y_genome-28, "m0 20h", body_l, "v-20l", head_l, " 30l", (-1*head_l),"30v-20h",(-1*body_l),"z"]);
}else if( gene_info.strand =='C' ){
arrow = this.path( ["M", arrow_beg, Y_genome-28, "m0 30l",head_l, "-30v20h", body_l, "v20h", (-1*body_l),"v20z"]);
}else{
var width = arrow_end-arrow_beg;
var height = 20 ;
arrow = this.rect( arrow_beg, Y_genome-8, width , height );
}
if(!gene_info.match){
arrow.attr({fill: "white", stroke: "black", "stroke-dasharray": "-", "fill-opacity": 0.5});
}else{
var color=$( ".gene_"+gene_info.match).css( "backgroundColor" );
arrow.attr({fill: color, stroke: "none", "stroke-dasharray": "-", "fill-opacity": 0.9});
}
return [arrow , arrow_beg ,arrow_end ];
};
function gene_zoom( factor , ori ){
var bf_box = this.arrow.getBBox();
this.arrow.scale( factor, 1 , ori ,Y_genome );
var af_box = this.arrow.getBBox();
this.popup.translate( (af_box.x+(af_box.width/2 )) - (bf_box.x+(bf_box.width /2 )) , 0);
};
function gene_translate( dx , dy ){
var bf_box = this.arrow.getBBox(false);
this.arrow.translate( dx , dy );
var af_box = this.arrow.getBBox(false);
this.popup.translate((af_box.x + (af_box.width /2 )) - (bf_box.x + (bf_box.width /2 )) , (af_box.y-bf_box.y));
};
function gene_show(){
this.popup.show();
};
function gene_hide(){
this.popup.hide();
};
Raphael.fn.control = function( x , y , genes , genome ){
var west= this.path( ["M", x-40, y]+ "l20 -12 a70, 40 0 0,0 0, 24z").attr({fill:"blue"});//West
west.mousedown( function(){
for(var i = 0 ;i<genes.length ; i++){ genes[i].translate( -50 , 0); }
genome.translate( -50 , 0);
});
var east = this.path( ["M", x+40, y]+ "l-20 -12 a70, 40 0 0,1 0, 24z").attr({fill:"blue"});//East
east.mousedown( function(){
for(var i=0;i<genes.length; i++){ genes[i].translate(+50, 0);}
genome.translate(+50, 0);
});
this.circle( x , y , 20).attr({stroke:"black", "stroke-width": 2});
var genome_box= genome.getBBox();
var Xori_scale= genome_box.x+genome_box.width /2 ;
var zoom_in = this.set();
zoom_in.push(this.circle( x , y+9 , 8).attr({fill:"blue"}));//plus
zoom_in.push(this.rect( x-4 , y+7.5 , 8 ,3 ).attr({fill:"white", stroke:"white"}));//plus
zoom_in.push(this.rect( x-1.5 , y+5 , 3 ,8 ).attr({fill:"white", stroke:"white" }));//plus
zoom_in.mousedown( function(){
for(var i= 0 ;i<genes.length ; i++){
var g= genes[i] ;
genes[i].zoom(1.25 , Xori_scale);
}
genome.scale(1.25 ,1,Xori_scale ,Y_genome )
});
var zoom_out = this.set();
zoom_out.push(this.circle( x , y-9 , 8).attr({fill:"blue"}));//moins
zoom_out.push(this.rect( x-4 , y-10.5 , 8 ,3 ).attr({fill:"white", stroke:"white"}));//moins
zoom_out.mousedown( function(){
for(var i = 0 ;i<genes.length ; i++){
genes[i].zoom( 0.8 , Xori_scale);
}
genome.scale( 0.8 ,1,Xori_scale ,Y_genome );
});
};
var paper = Raphael("genes_schema", paper_w, paper_h );
var background = paper.rect( 0 , 1 , paper_w , paper_h).attr( {stroke:"none", fill:"white"});//pour recevoir les evts
var genesNgenome= paper.set();
var genome= paper.draw_genome();//bar grise
genesNgenome.push( genome );
var genes = new Array();
var g = new Gene( doc.genes[0] , 0 );
genes.push(g);
genesNgenome.push(g.arrow , g.popup);
for(var i = 1 ;i<doc.genes.length ; i++){
var g = new Gene( doc.genes[i] , genes[i-1].end) ;// gene end on genome
genes.push(g);
genesNgenome.push(g.arrow , g.popup);
};
var genome_box = genome.getBBox();
var Xori4scale = genome_box.x + genome_box.width /2 ;
for(var i = 0 ;i<doc.genes.length ; i++){
for(var i = 0 ;i<genes.length ; i++){ genes[i].zoom( 1.01 , Xori4scale); }
};
ctrl_panel = paper.control( 50 , paper_h-30 , genes , genome );
var curr_paper_width = $("#genes_schema").width();
$(window).bind("resize" , function(Evt){
var gs = $("#genes_schema")
var new_width = gs.width();
paper.setSize( gs.width() , paper_h);
var scale_factor = (new_width -2* genome_offset)/(curr_paper_width -2* genome_offset);
var Xori4scale = genome_offset;
genome.scale( scale_factor, 1 , Xori4scale ,Y_genome );
for(var i= 0 ;i<genes.length ; i++){ genes[i].zoom( scale_factor , Xori4scale); }
background.scale( scale_factor,1,0,0 );
curr_paper_width= new_width;
});
var intOverallDelta= 0 ;
$("#genes_schema").mousewheel(function(objEvent, intDelta){
objEvent.stopImmediatePropagation();
var x = objEvent.pageX;
if (intDelta > 0){
intOverallDelta++;
genome.scale( 1.25, 1 , objEvent.pageX ,Y_genome );
for(var i = 0 ;i<genes.length ; i++){ genes[i].zoom( 1.25 , objEvent.pageX); }
}
else if (intDelta < 0){
intOverallDelta--;
genome.scale( 0.8, 1 , objEvent.pageX ,Y_genome );
for(var i=0 ;i<genes.length ; i++){ genes[i].zoom( 0.8 , objEvent.pageX); }
}
return false;//prevent to scroll the window
});
var drag_mousedown= function(x ,y,event) {
this.ox = event.screenX;
this.oy = event.screenY;
this.attr({
opacity: .5
});
};
var drag_mousemove= function(dx, dy,x ,y ,event) {
for(var i = 0 ;i<genes.length ; i++){ genes[i].translate(event.screenX - this.ox , 0); }
genome.translate( event.screenX - this.ox, 0);
this.ox = event.screenX;
this.oy = event.screenY;
};
var drag_mouseup= function(x,y,event){
dragging = false;
this.attr({
opacity: 1
});
};
genesNgenome.drag( drag_mousemove, drag_mousedown, drag_mouseup, genesNgenome, genesNgenome, genesNgenome );
background.drag( drag_mousemove, drag_mousedown, drag_mouseup, genesNgenome, genesNgenome, genesNgenome );
$("#genes_schema").bind("mousedown" , function( evt ){
$(this).toggleClass( "grabbing" ).toggleClass( "grabbable" );
});
$("#genes_schema").bind("mouseup" , function(){
$(this).toggleClass( "grabbable" ).toggleClass( "grabbing" );
});
},
error: function(status) { "<p>Error document not found</p>" }
});
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment