Commit 4539198b authored by Marc Duez's avatar Marc Duez
Browse files

segmenter.js : beautify

parent 2e3367bb
......@@ -16,7 +16,6 @@
* You should have received a copy of the GNU General Public License
* along with "Vidjil". If not, see <http://www.gnu.org/licenses/>
*/
/*
*
* segmenter.js
......@@ -27,15 +26,14 @@
*
*
*/
var memTab=[];
var memTab = [];
/* segment constructor
*
* */
function Segment(id, model, cgi_address){
this.id=id; //ID de la div contenant le segmenteur
this.m=model; //Model utilisé
function Segment(id, model, cgi_address) {
this.id = id; //ID de la div contenant le segmenteur
this.m = model; //Model utilisé
this.m.view.push(this); //synchronisation au Model
this.starPath = "M 0,6.1176482 5.5244193, 5.5368104 8.0000008,0 10.172535,5.5368104 16,6.1176482 11.406183,9.9581144 12.947371,16 8.0000008,12.689863 3.0526285,16 4.4675491,10.033876 z"
this.cgi_address = cgi_address
......@@ -44,20 +42,20 @@ function Segment(id, model, cgi_address){
Segment.prototype = {
/*
/*
*
* */
init : function(){
init: function () {
this.build()
},
build : function () {
build: function () {
var self = this
var parent=document.getElementById(this.id)
parent.innerHTML="";
var parent = document.getElementById(this.id)
parent.innerHTML = "";
//bot-bar
var div = document.createElement('div');
......@@ -66,13 +64,17 @@ Segment.prototype = {
//menu-segmenter
var div_menu = document.createElement('div');
div_menu.className = "menu-segmenter"
div_menu.onmouseover = function () { self.m.focusOut() };
div_menu.onmouseover = function () {
self.m.focusOut()
};
//merge button
var span = document.createElement('span');
span.id = "merge"
span.className = "button"
span.onclick = function () { self.m.merge() }
span.onclick = function () {
self.m.merge()
}
span.appendChild(document.createTextNode("merge"));
div_menu.appendChild(span)
......@@ -80,7 +82,9 @@ Segment.prototype = {
span = document.createElement('span');
span.id = "align"
span.className = "button"
span.onclick = function () { self.align() }
span.onclick = function () {
self.align()
}
span.appendChild(document.createTextNode("align"));
div_menu.appendChild(span)
......@@ -88,7 +92,9 @@ Segment.prototype = {
span = document.createElement('span');
span.id = "toIMGT"
span.className = "button"
span.onclick = function () { self.sendTo('IMGT') }
span.onclick = function () {
self.sendTo('IMGT')
}
span.appendChild(document.createTextNode("❯ to IMGT/V-QUEST"));
div_menu.appendChild(span)
......@@ -96,7 +102,9 @@ Segment.prototype = {
span = document.createElement('span');
span.id = "toIgBlast"
span.className = "button"
span.onclick = function () { self.sendTo('igBlast') }
span.onclick = function () {
self.sendTo('igBlast')
}
span.appendChild(document.createTextNode("❯ to IgBlast"));
div_menu.appendChild(span)
......@@ -124,46 +132,48 @@ Segment.prototype = {
parent.appendChild(div)
$('#toClipBoard').zclip({
path:'js/lib/ZeroClipboard.swf',
copy: function(){return self.toFasta()}
$('#toClipBoard')
.zclip({
path: 'js/lib/ZeroClipboard.swf',
copy: function () {
return self.toFasta()
}
});
},
/*
/*
*
* */
resize : function(){
},
resize: function () {},
/*
/*
*
* */
update : function(){
for (var i=0; i< this.m.n_windows; i++){
update: function () {
for (var i = 0; i < this.m.n_windows; i++) {
this.updateElem([i]);
}
},
/*
/*
*
* */
updateElem : function(list){
updateElem: function (list) {
for (var i=0; i< list.length; i++){
for (var i = 0; i < list.length; i++) {
if (this.m.windows[list[i]].select){
if ( document.getElementById("seq"+list[i]) ){
var spanF=document.getElementById("f"+list[i]);
if (this.m.windows[list[i]].select) {
if (document.getElementById("seq" + list[i])) {
var spanF = document.getElementById("f" + list[i]);
this.div_elem(spanF, list[i]);
}else{
} else {
this.addToSegmenter(list[i]);
this.show();
}
}else{
if ( document.getElementById("seq"+list[i]) ){
var element = document.getElementById("seq"+list[i]);
} else {
if (document.getElementById("seq" + list[i])) {
var element = document.getElementById("seq" + list[i]);
element.parentNode.removeChild(element);
}
}
......@@ -171,44 +181,50 @@ Segment.prototype = {
},
updateElemStyle : function(list){
updateElemStyle: function (list) {
this.updateElem(list)
},
/* genere le code HTML des infos d'un clone
/* genere le code HTML des infos d'un clone
* @div_elem : element HTML a remplir
* @cloneID : identifiant du clone a décrire
* */
div_elem : function(div_elem, cloneID){
var self=this;
div_elem: function (div_elem, cloneID) {
var self = this;
div_elem.innerHTML='';
div_elem.className="seq-fixed";
div_elem.style.display="block";
div_elem.innerHTML = '';
div_elem.className = "seq-fixed";
div_elem.style.display = "block";
var seq_name = document.createElement('span');
seq_name.className = "nameBox";
seq_name.onclick = function(){ self.m.select(cloneID); }
seq_name.onclick = function () {
self.m.select(cloneID);
}
seq_name.appendChild(document.createTextNode(this.m.getName(cloneID)));
seq_name.title = this.m.getName(cloneID);
seq_name.style.color=this.m.windows[cloneID].color;
seq_name.style.color = this.m.windows[cloneID].color;
var svg_star=document.createElementNS('http://www.w3.org/2000/svg', 'svg')
svg_star.setAttribute('class','starBox');
svg_star.onclick=function(){ changeTag(cloneID); }
var svg_star = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
svg_star.setAttribute('class', 'starBox');
svg_star.onclick = function () {
changeTag(cloneID);
}
var path=document.createElementNS('http://www.w3.org/2000/svg','path')
var path = document.createElementNS('http://www.w3.org/2000/svg', 'path')
path.setAttribute('d', this.starPath);
path.setAttribute('id','color'+cloneID);
path.setAttribute('id', 'color' + cloneID);
if (typeof this.m.windows[cloneID].tag != 'undefined') path.setAttribute("fill", tagColor[this.m.windows[cloneID].tag]);
else path.setAttribute("fill", color['@default']);
svg_star.appendChild(path);
var seq_size=document.createElement('span')
var seq_size = document.createElement('span')
seq_size.className = "sizeBox";
seq_size.onclick=function(){ this.m.select(cloneID); }
seq_size.style.color=this.m.windows[cloneID].color;
seq_size.onclick = function () {
this.m.select(cloneID);
}
seq_size.style.color = this.m.windows[cloneID].color;
seq_size.appendChild(document.createTextNode(this.m.getStrSize(cloneID)));
div_elem.appendChild(seq_name);
......@@ -216,17 +232,19 @@ Segment.prototype = {
div_elem.appendChild(seq_size);
},
addToSegmenter : function (cloneID){
var self=this;
addToSegmenter: function (cloneID) {
var self = this;
var divParent = document.getElementById("listSeq");
var li = document.createElement('li');
li.id="seq"+cloneID;
li.className="sequence-line";
li.onmouseover = function(){ self.m.focusIn(cloneID); }
li.id = "seq" + cloneID;
li.className = "sequence-line";
li.onmouseover = function () {
self.m.focusIn(cloneID);
}
var spanF = document.createElement('span');
spanF.id = "f"+cloneID;
spanF.id = "f" + cloneID;
this.div_elem(spanF, cloneID);
var spanM = this.buildSequence(cloneID)
......@@ -237,31 +255,32 @@ Segment.prototype = {
},
buildSequence: function (cloneID){
buildSequence: function (cloneID) {
var spanM = document.createElement('span');
spanM.id = "m"+cloneID;
spanM.className="seq-mobil";
spanM.id = "m" + cloneID;
spanM.className = "seq-mobil";
if(typeof this.m.windows[cloneID].sequence !='undefined' && this.m.windows[cloneID].sequence!=0){
if (typeof this.m.windows[cloneID].sequence != 'undefined' && this.m.windows[cloneID].sequence != 0) {
var v_length = this.m.windows[cloneID].Vend+1;
var v_length = this.m.windows[cloneID].Vend + 1;
var size_marge = 300 - v_length;
var marge="";
if (size_marge>0){
for (var i=0; i<size_marge; i++) marge+="&nbsp";
var marge = "";
if (size_marge > 0) {
for (var i = 0; i < size_marge; i++) marge += "&nbsp";
}
var seq = new Sequence(cloneID, this.m)
spanM.innerHTML=marge+seq.load().toString()
spanM.innerHTML = marge + seq.load()
.toString()
}else{
var size_marge=320-this.m.windows[cloneID].window.length;
var marge="";
for (var i=0; i<size_marge; i++) marge+="&nbsp";
} else {
var size_marge = 320 - this.m.windows[cloneID].window.length;
var marge = "";
for (var i = 0; i < size_marge; i++) marge += "&nbsp";
var spanJunc=document.createElement('span');
spanJunc.innerHTML=marge+this.m.windows[cloneID].window;
var spanJunc = document.createElement('span');
spanJunc.innerHTML = marge + this.m.windows[cloneID].window;
spanM.appendChild(spanJunc);
}
......@@ -270,59 +289,64 @@ Segment.prototype = {
},
sendTo : function(address){
sendTo: function (address) {
var list =this.m.getSelected()
var list = this.m.getSelected()
var request = "";
for (var i = 0; i<list.length; i++){
if ( typeof(this.m.windows[list[i]].sequence) != 'undefined' && this.m.windows[list[i]].sequence!=0)
request += ">" +this.m.getName(list[i])+"\n"+ this.m.windows[list[i]].sequence+"\n";
for (var i = 0; i < list.length; i++) {
if (typeof (this.m.windows[list[i]].sequence) != 'undefined' && this.m.windows[list[i]].sequence != 0)
request += ">" + this.m.getName(list[i]) + "\n" + this.m.windows[list[i]].sequence + "\n";
else
request += ">" +this.m.getName(list[i])+"\n"+ this.m.windows[list[i]].window+"\n";
request += ">" + this.m.getName(list[i]) + "\n" + this.m.windows[list[i]].window + "\n";
}
if (address=='IMGT') imgtPost(request, this.m.system);
if (address=='igBlast') igBlastPost(request, this.m.system);
if (address == 'IMGT') imgtPost(request, this.m.system);
if (address == 'igBlast') igBlastPost(request, this.m.system);
},
show : function(){
var li =document.getElementById("listSeq").getElementsByTagName("li");
if (li.length >0){
var id=li[0].id.substr(3);
var mid=$("#m"+id+" span:first-child").width()-250;
$("#segmenter").animate({scrollLeft: mid}, 0);
show: function () {
var li = document.getElementById("listSeq")
.getElementsByTagName("li");
if (li.length > 0) {
var id = li[0].id.substr(3);
var mid = $("#m" + id + " span:first-child")
.width() - 250;
$("#segmenter")
.animate({
scrollLeft: mid
}, 0);
}
},
align : function(){
align: function () {
var list =this.m.getSelected()
var list = this.m.getSelected()
var request = "";
memTab=list;
memTab = list;
if (list.length==0) return ;
if (list.length == 0) return;
for (var i = 0; i<list.length; i++){
if ( typeof(this.m.windows[list[i]].sequence) != 'undefined' && this.m.windows[list[i]].sequence!=0)
request += ">" +list[i]+"\n"+ this.m.windows[list[i]].sequence+"\n";
for (var i = 0; i < list.length; i++) {
if (typeof (this.m.windows[list[i]].sequence) != 'undefined' && this.m.windows[list[i]].sequence != 0)
request += ">" + list[i] + "\n" + this.m.windows[list[i]].sequence + "\n";
else
request += ">" +list[i]+"\n"+ this.m.windows[list[i]].window+"\n";
request += ">" + list[i] + "\n" + this.m.windows[list[i]].window + "\n";
}
$.ajax({
type: "POST",
data : request,
url: this.cgi_address+"align.cgi",
success: function(result) {
data: request,
url: this.cgi_address + "align.cgi",
success: function (result) {
displayAjaxResult(result);
}
});
},
clipBoard : function () {
clipBoard: function () {
var div = document.getElementById('clipBoard');
div.innerHTML = "";
......@@ -339,44 +363,46 @@ Segment.prototype = {
},
toFasta : function () {
toFasta: function () {
var selected = this.m.getSelected();
var result = "";
for (var i=0; i < selected.length; i++){
result += "> "+this.m.getName(selected[i]) + " // " + this.m.getStrSize(selected[i]) + "\n";
for (var i = 0; i < selected.length; i++) {
result += "> " + this.m.getName(selected[i]) + " // " + this.m.getStrSize(selected[i]) + "\n";
result += this.m.windows[selected[i]].sequence + "\n";
}
return result
},
}//fin prototype
} //fin prototype
function displayAjaxResult(file){
function displayAjaxResult(file) {
var json=JSON.parse(file)
var json = JSON.parse(file)
for (var i = 0 ; i< json.seq.length; i++ ){
for (var i = 0; i < json.seq.length; i++) {
// global container
var spanM = document.getElementById("m"+memTab[i]);
spanM.innerHTML="";
var spanM = document.getElementById("m" + memTab[i]);
spanM.innerHTML = "";
if(typeof m.windows[memTab[i]].sequence !='undefined' && m.windows[memTab[i]].sequence!=0){
if (typeof m.windows[memTab[i]].sequence != 'undefined' && m.windows[memTab[i]].sequence != 0) {
var seq = new Sequence(memTab[i], m)
spanM.innerHTML=seq.load(json.seq[i]).diff(json.seq[0]).toString()
spanM.innerHTML = seq.load(json.seq[i])
.diff(json.seq[0])
.toString()
}else{
var spanJunc=document.createElement('span');
spanJunc.innerHTML=json.seq[i];
} else {
var spanJunc = document.createElement('span');
spanJunc.innerHTML = json.seq[i];
spanM.appendChild(spanJunc);
}
}
}
}
function Sequence(id, model){
function Sequence(id, model) {
this.id = id; //clone ID
this.m = model; //Model utilisé
this.seq = [];
......@@ -386,7 +412,7 @@ function Sequence(id, model){
Sequence.prototype = {
//load sequence from model or use given argument
load : function(str){
load: function (str) {
str = typeof str !== 'undefined' ? str : this.m.windows[this.id].sequence;
this.seq = str.split("")
......@@ -396,10 +422,10 @@ Sequence.prototype = {
},
//store position of each nucleotide
computePos : function(){
var j=0
for (var i=0; i< this.seq.length; i++){
if (this.seq[i] != "-"){
computePos: function () {
var j = 0
for (var i = 0; i < this.seq.length; i++) {
if (this.seq[i] != "-") {
this.pos.push(j)
j++
}
......@@ -408,44 +434,44 @@ Sequence.prototype = {
},
//compare sequence with another string and surround change
diff : function(str){
for (var i=0; i< this.seq.length; i++){
if (this.seq[i] != str[i] ){
this.seq[i] = "<span class='substitution'>" +this.seq[i]+ "</span>"
diff: function (str) {
for (var i = 0; i < this.seq.length; i++) {
if (this.seq[i] != str[i]) {
this.seq[i] = "<span class='substitution'>" + this.seq[i] + "</span>"
}
}
return this;
},
//return sequence completed with html tag
toString : function(){
toString: function () {
var seg = this.m.windows[this.id]
//find V, D, J position
var endV = this.pos[ seg.Vend ]
var startJ = this.pos[ seg.Jstart ]
if(typeof seg.Dstart !='undefined' && typeof seg.Dend !='undefined'){
var startD = this.pos[ seg.Dstart ]
var endD = this.pos[ seg.Dend ]
var endV = this.pos[seg.Vend]
var startJ = this.pos[seg.Jstart]
if (typeof seg.Dstart != 'undefined' && typeof seg.Dend != 'undefined') {
var startD = this.pos[seg.Dstart]
var endD = this.pos[seg.Dend]
}
//V color
var vColor = "";
if (this.m.colorMethod == "V") vColor = "style='color : "+seg.colorV+"'";
if (this.m.colorMethod == "V") vColor = "style='color : " + seg.colorV + "'";
//J color
var jColor = "";
if (this.m.colorMethod == "J") jColor = "style='color : "+seg.colorJ+"'";
if (this.m.colorMethod == "J") jColor = "style='color : " + seg.colorJ + "'";
//add span VDJ
var result = "<span class='V' " + vColor + " >"
for (var i=0; i< this.seq.length; i++){
for (var i = 0; i < this.seq.length; i++) {
result += this.seq[i]
if (i==endV) result += "</span><span class ='N'>"
if (i==startD-1) result += "</span><span class ='D'>"
if (i==endD) result += "</span><span class ='N'>"
if (i==startJ-1) result += "</span><span class ='J' " + jColor + " >"
if (i == endV) result += "</span><span class ='N'>"
if (i == startD - 1) result += "</span><span class ='D'>"
if (i == endD) result += "</span><span class ='N'>"
if (i == startJ - 1) result += "</span><span class ='J' " + jColor + " >"
}
result += "</span>"
......
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