Skip to content

GitLab

C
capsuledb
Commit 86859b71 authored by Bertrand NÉRON's avatar Bertrand NÉRON
Browse files
Options

No commit message 

No commit message
parent c452782f
Hide whitespace changes
Inline Side-by-side
Showing with 683 additions and 393 deletions
src/test/event-test.html
View file @ 86859b71
......@@ -2,47 +2,136 @@
<html>
<head>
<title>test event</title>
<script src="lib/jquery.js" type="text/javascript"></script>
<!-- <script src="lib/jquery1_4_2.js" type="text/javascript"></script>-->
<link rel="stylesheet" href="style/main.css" type="text/css">
<script src="lib/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="lib/jquery.mousewheel.js" type="text/javascript"></script>
<script src="lib/raphael-min.js" type="text/javascript"></script>
</head>
<body>
<h1>titre</h1>
<div id="genes_schema">
<p>toto</p>
<p id="test">toto</p>
<div id="genes_schema" class="grabbable" style="width: 500px; height: 500px;background-color: #e6e6e6; border: 2px" >
<div id="divScroll" class="grabbable" style="width: 250px; height: 250px; background-color: #e6e6e6; border: 2px groove #f6f6f6;">use the wheel over this DIV</div>
<div id="event_log">
<p>log event</p>
</div>
</body>
<script type="text/javascript">
var paper = new Raphael("genes_schema", 300, 150);
paper.circle(50, 75, 30);
paper.circle(150, 75, 30);
var paper = new Raphael("genes_schema", 500, 500);
var bckground = paper.rect( 0 , 0 , 500 , 500).attr( {fill:"pink"});
var both = paper.set();
var first_c = paper.circle(50, 75, 30);
var rec =paper.rect( 100 ,100 , 50 , 50);
both.push(first_c );
both.push(rec );
//var sec_circle = paper.circle(150, 75, 30);
$("circle").each(function(i) {
$(this).attr({fill: 'red', stroke: '#000'});
$(this).mouseup(function() {
$("#test").append("<p>Mouseup</p>");
$("#event_log").append("<p>Mouseup</p>");
});
$(this).mousedown(function() {
$("#test").append("<p>MouseDown</p>");
$(this).mousedown(function(ObjectEvent) {
$("#event_log").append("<p>MouseDown</p>");
});
});
</script>
<!--
<script type="text/javascript">
$(function() {
var paper = new Raphael("canvas_container", 300, 150);
paper.circle(50, 75, 30);
paper.circle(150, 75, 30);
$("circle").each(function(i) {
$(this).mouseover(function() {
$("#test").append("<p>MouseOver</p>");
});
$(this).mouseout(function() {
$("#test").append("<p>MouseOut</p>");
});
var intOverallDelta = 0;
$("#divScroll").bind("mousewheel",function(objEvent, delta , deltaX, deltaY){
objEvent.stopImmediatePropagation();
objEvent.stopPropagation();
console.log(delta, deltaX, deltaY);
objEvent.stopPropagation();
return false;
});
$("#genes_schema").bind("mousedown" , function( evt ){
console.log( "x="+evt.pageX +" y= "+evt.pageY );
$(this).toggleClass( "grabbing" ).toggleClass( "grabbable" );
console.log("mouseDown");
});
$("#genes_schema").bind("mouseup" , function(){
$(this).toggleClass( "grabbable" ).toggleClass( "grabbing" );
console.log("mouseUp");
});
/*
var nowX, nowY, R = Raphael("canvas", 500, 500),
c = R.rect(200, 200, 40, 40).attr({
fill: "hsb(.8, 1, 1)",
stroke: "none",
opacity: .5,
cursor: "move"
}),
j = R.rect(0,0,100,100),
// start, move, and up are the drag functions
start = function () {
// storing original coordinates
this.ox = this.attr("x");
this.oy = this.attr("y");
this.attr({opacity: 1});
if (this.attr("y") < 60 && this.attr("x") < 60)
this.attr({fill: "#000"});
},
move = function (dx, dy) {
// move will be called with dx and dy
if (this.attr("y") > 60 || this.attr("x") > 60)
this.attr({x: this.ox + dx, y: this.oy + dy});
else {
nowX = Math.min(60, this.ox + dx);
nowY = Math.min(60, this.oy + dy);
nowX = Math.max(0, nowX);
nowY = Math.max(0, nowY);
this.attr({x: nowX, y: nowY });
if (this.attr("fill") != "#000") this.attr({fill: "#000"});
}
},
up = function () {
// restoring state
this.attr({opacity: .5});
if (this.attr("y") < 60 && this.attr("x") < 60)
this.attr({fill: "#AEAEAE"});
};
// rstart and rmove are the resize functions;
c.drag(move, start, up);
};​
*/
//var ox = 0;
//var oy = 0;
var mousedown= function(x ,y,event) {
console.log( "raphael mousedown");
this.ox = event.screenX;
this.oy = event.screenY;
this.attr({
opacity: .5
});
};
var mousemove= function(dx, dy,x ,y ,event) {
console.log( "raphael mousemove");
this.translate(event.screenX - this.ox, event.screenY - this.oy);
this.ox = event.screenX;
this.oy = event.screenY;
};
var mouseup= function(x,y,event){
console.log( "raphael mouseup");
dragging = false;
this.attr({
opacity: 1
});
};
//bckground.drag( move ,start ,stop );
//first_c.drag( move ,start ,stop );
//bckground.drag( move ,start ,stop , first_c ,first_c, first_c );
bckground.drag( mousemove ,mousedown ,mouseup , both ,both, both );
</script>
-->
</html>
\ No newline at end of file
src/test/secretion.html
View file @ 86859b71
<!DOCTYPE html>
<html>
<head>
<title>secretion system YEPS004_p01_Syst-p</title>
<link rel="stylesheet" href="style/main.css" type="text/css">
<link rel="stylesheet" href="_attachements/style/color.css" type="text/css">
<script src="/_utils/script/jquery.js"></script>
<script type="text/javscript">
var = $('tbody th:lt(6)').toarrary();
<head>
<title>secretion system DEPI001WGS_c01_Syst_1-s</title>
<link rel="stylesheet" href="style/system.css" type="text/css">
<link rel="stylesheet" href="style/color.css" type="text/css">
<script src="lib/jquery1_4_2.js" type="text/javascript"></script>
<script src="lib/jquery.mousewheel.js" type="text/javascript"></script>
<script src="lib/raphael-min.js" type="text/javascript"></script>
<script src="lib/popup.js" type="text/javascript"></script>
</head>
<body>
<div id="genes_schema" class="grabbable"></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>Evalue</th>
<th>Best-domain-score</th>
<th>Best-domain-evalue</th>
<th>c-Evalue</th>
<th>Coverage-profile</th>
<th>Match-begin</th>
<th>Match-end</th>
</tr>
</thead>
<tbody>
<tr>
<td id="DEPI001WGSc01_006560" class="gene_sctU">DEPI001WGSc01_006560</td>
<td>ZP_03310782.1</td>
<td>347</td>
<td>D</td>
<td>100</td>
<td>200</td>
<td>sctU</td>
<td>359.7</td>
<td>3.8e-105</td>
<td>359.5</td>
<td>4.4e-105</td>
<td>1.4e-108</td>
<td>1</td>
<td>2</td>
<td>338</td>
</tr>
<tr>
<td id="DEPI001WGSc01_006590" class="gene_sctV">DEPI001WGSc01_006590</td>
<td>ZP_03310785.1</td>
<td>697</td>
<td></td>
<td>490</td>
<td>510</td>
<td>sctV</td>
<td>20</td>
<td>8.7e-244</td>
<td>818.7</td>
<td>1e-243</td>
<td>2.4e-247</td>
<td>0.99</td>
<td>15</td>
<td>695</td>
</tr>
<tr>
<td id="DEPI001WGSc01_006830" class="gene_sctQ">DEPI001WGSc01_006830</td>
<td>ZP_03310809.1</td>
<td>398</td>
<td>C</td>
<td>1000</td>
<td>1100</td>
<td>sctQ</td>
<td>63.1</td>
<td>5.5e-15</td>
<td>58.6</td>
<td>1.5e-13</td>
<td>4.7e-17</td>
<td>0.96</td>
<td>312</td>
<td>378</td>
</tr>
</tbody>
</table>
</body>
<script type="text/javascript">
function draw_genome_map( doc ) {
function transform_optimizer( old_transform, new_transform){
var s_factor_x= 1;
var s_factor_y= 1;
var s_x = 657;
var s_y = 55;
var t_x = 0;
var t_y = 0;
var new_scale= '';
var new_trans ='';
//console.log( "t_opt old_t = "+old_transform );
//console.log( "t_opt new_t = "+new_transform );
for (i=0; i< old_transform.length; i++){
if( old_transform[i][0] == 's'){
s_factor_x = old_transform[i][1];
s_factor_y = old_transform[i][2];
//s_x = old_transform[i][3];
//s_y = old_transform[i][4];
}
if( old_transform[i][0] == 't'){
var t_x= old_transform[i][1];
//var t_y= old_transform[i][2];
}
}
if (new_transform[0] == 's'){
new_scale= 's'+[ s_factor_x*new_transform[1] , s_factor_y, s_x , s_y].join(",");
if( t_x || t_y){
new_trans= 't'+[ t_x , t_y ].join(",");
}
}else if(new_transform[0] == 't'){
if( s_factor_x !=1 ){
new_scale= 's'+[ s_factor_x , s_factor_y, s_x , s_y].join(",");
}
new_trans= 't'+[ t_x + new_transform[1] , t_y ].join(",");
}else{
//pas implementer
}
console.log( "t_opt optimized_t = "+new_scale+new_trans)
return new_scale+new_trans;
}
function getScaleFactor( tstr ){
s_factor_x =1;
s_factor_y = 1;
for (i=0; i< tstr.length; i++){
if( tstr[i][0] == 's'){
s_factor_x = tstr[i][1];
s_factor_y = tstr[i][2];
//s_x = tstr[i][3];
//s_y = tstr[i][4];
}
}
return s_factor_x;
}
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 ;
var x_genome_center = paper_w / 2;
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;
this.arrow.dblclick(function(){
var box = g_arrow[0].getBBox(false);
//console.log("box x="+box.x+",box width="+box.width);
var x_ori_scale = box.x+(box.width/2 ) ;
//console.log("x_ori_scale="+x_ori_scale);
//console.log("matrix = "+g_arrow[0]["matrix"]);
var old_t = g_arrow[0].transform();
for (var i=0; i<old_t.length ; i++){
//console.log("old_t "+i+" = "+old_t[i]);
for (var j=0; j< old_t[i].length; j++){
//console.log("old_t "+i+","+j+" = "+old_t[i][j]);
}
}
//console.log("transform ="+g_arrow[0].transform());
//console.log("x="+g_arrow[0].attr("x"));
var delta = g_arrow[0].paper.width/2 - x_ori_scale
//console.log( "center="+g_arrow[0].paper.width/2+", delta="+delta);
//zoomNcenter(2 , x_ori_scale , 0);
//g_arrow[0].scale( 2, 1 , x_ori_scale ,Y_genome )
//var x_ori_scale = g_arrow[0].attr("x")+g_arrow[0].attr("width")/2 ;
var d_genome_gene = g_arrow[0].attr("x") - x_genome_center;
var dx = d_genome_gene * 2;
//console.log( "dx=",dx);
var new_t = "s2,1,"+x_genome_center+","+Y_genome+"t"+dx;
//console.log( "new_t"+new_t);
//var new_t = "s2,1,"+x_ori_scale+","+Y_genome;
g_arrow[0].transform(old_t+new_t);
//g_arrow[0].transform("s2,1,"+x_ori_scale+","+Y_genome);
var a_box = g_arrow[0].getBBox(false);
//console.log("box x="+box.x+",box width="+box.width);
//console.log( "new x_ori_scale="+ a_box.x+(a_box.width/2 ) );
//console.log("matrix = "+g_arrow[0]["matrix"]);
//console.log("transform fin db_click="+g_arrow[0].transform());
});
};
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 = (begin - genome_orig)*coef+genome_offset+genes_offset;
var arrow_end = (end - genome_orig)*coef+genome_offset+genes_offset;
var body_l = (arrow_end - arrow_beg)*3/5;
var head_l = (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 );
//console.log( "gene_zoom factor="+factor);
var old_t = this.arrow.transform();
//console.log("transform avant sfactor: "+ this.arrow.transform());
//var new_t = "s"+factor+",1,"+x_genome_center+","+Y_genome;
var new_t = transform_optimizer( old_t , [ 's' , factor , 1,x_genome_center, Y_genome ]);
this.arrow.transform( new_t );
//console.log("transform apres sfactor: "+ this.arrow.transform());
var af_box = this.arrow.getBBox();
this.popup.translate( (af_box.x+(af_box.width/2 )) - (bf_box.x+(bf_box.width /2 )) , 0);
//old_t = this.popup.transform();
//this.popup.transform(old_t+new_t);
};
function gene_translate( dx , dy ){
var bf_box = this.arrow.getBBox(false);
//this.arrow.translate( dx , dy );
//console.log( "gene_translate dx="+dx);
//console.log("transform avant tdx: "+ this.arrow.transform());
var old_t = this.arrow.transform();
var scaleFactor = getScaleFactor( old_t );
var new_t = transform_optimizer( old_t , [ 't' , dx/scaleFactor , 0]);
this.arrow.transform( new_t );
//console.log("transform apres tdx: "+ this.arrow.transform());
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));
//old_t = this.popup.transform();
//console.log("old transform popup = "+this.popup.transform());
//this.popup.transform(new_t);
//this.popup.forEach( function(){
// console.log( "transform " +this.type+" : "+this.transform );
//});
//console.log("new transform popup = "+this.popup.transform());
this.popup.translate( dx , 0);
};
function gene_show(){
this.popup.show();
};
function gene_hide(){
this.popup.hide();
};
function zoomNcenter( factor, x_ori_scale, delta ){
genome.scale( factor, 1 , x_ori_scale ,Y_genome );
//genome.translate( delta , 0);
for(var i = 0 ;i<genes.length ; i++){
genes[i].zoom( factor , x_ori_scale)
//genes[i].translate( delta , 0 )
}
};
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); }
var old_t = genome.transform();
var scaleFactor = getScaleFactor(old_t);
var new_t = transform_optimizer( old_t , [ 't' , -50/scaleFactor , 0]);
genome.transform(new_t);
});
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);}
var old_t = genome.transform();
var scaleFactor = getScaleFactor(old_t)
var new_t = transform_optimizer( old_t , [ 't' , 50/scaleFactor , 0]);
genome.transform(new_t);
});
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 , x_genome_center);
}
var old_t = genome.transform();
//console.log("transform avant s1.25,1: "+ genome.transform());
var new_t = transform_optimizer( old_t , [ 's' , 1.25 , 1 , x_genome_center , Y_genome]);
genome.transform(new_t);
//console.log("transform apres s1.25,1: "+ genome.transform());
});
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 , x_genome_center);
}
//genome.scale( 0.8 ,1,Xori_scale ,Y_genome );
var old_t = genome.transform();
//console.log("transform avant s0.8,1: "+ genome.transform());
//var new_t = "s0.8,1,"+x_genome_center+","+Y_genome;
var new_t = transform_optimizer( old_t , [ 's' , 0.8 , 1 , x_genome_center , Y_genome]);
genome.transform(new_t);
//console.log("transform apres s0.8,1: "+ genome.transform());
});
};
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();
console.log( "old gs.width ="+ curr_paper_width);
console.log( "new gs.width ="+ new_width);