Merge commit '2e2df751'

browser/index.html

@@ -44,12 +44,15 @@
         <script type="text/javascript" src='js/lib/file.js'></script>
         <script type="text/javascript" src='js/lib/jquery.zclip.js'></script>
 
+
 	    <script type="text/javascript" src='js/compare.js'></script>
+        <script type="text/javascript" src='js/menu.js'></script>
         <script type="text/javascript" src='js/dbscan.js'></script>
         <script type="text/javascript" src='js/germline.js'></script>
         <script type="text/javascript" src='js/germline_builder.js'></script>
         <script type="text/javascript" src='js/segmenter.js'></script>
         <script type="text/javascript" src='js/model.js'></script>
+        <script type="text/javascript" src='js/clone.js'></script>
         <script type="text/javascript" src='js/list.js'></script>
         <script type="text/javascript" src="js/axis.js"> </script>
         <script type="text/javascript" src="js/graph.js"> </script>
@@ -251,7 +254,7 @@
                 </div></div>
             </div>
 
-            <div id="logo" style="float: right;" onclick="popupMsg(msg.welcome)">Vidjil <span class='logo'>(beta)</span></div>
+            <div id="logo" style="float: right;" onclick="myConsole.popupMsg(myConsole.msg.welcome)">Vidjil <span class='logo'>(beta)</span></div>
 
             <div class="menu" style="float: right"> <a href="help" target="_blank">help</a></div>
 
@@ -309,12 +312,12 @@
         <div id="frame-container"></div>
 
         <div id="popup-container">
-            <span class="closeButton" onclick="closePopupMsg()">X</span>
+            <span class="closeButton" onclick="myConsole.closePopupMsg()">X</span>
             <div id="popup-msg"></div>
         </div>
 
         <div id="data-container">
-            <span class="closeButton" onclick="closeDataBox()">X</span>
+            <span class="closeButton" onclick="myConsole.closeDataBox()">X</span>
             <div id="data-msg"></div>
         </div>
 

browser/js/axis.js

@@ -64,7 +64,7 @@ Axis.prototype = {
         
         //clone position
         this.pos = function(cloneID) {
-            var clone = self.m.windows[cloneID] 
+            var clone = self.m.clone(cloneID) 
             if (typeof clone[geneType] != "undefined" 
                 && typeof clone[geneType][0] != "undefined" 
                 && typeof gene_list[clone[geneType][0].split("*")[0]] != "undefined")

browser/js/builder.js

@@ -112,10 +112,10 @@ Builder.prototype = {
         normalize_list.appendChild(document.createTextNode("none"))
         normalize_list.appendChild(document.createElement("br"))
         
-        for (var i=0; i<self.m.windows.length; i++){
-            if (typeof self.m.windows[i].expected != "undefined"){
+        for (var i=0; i<self.m.n_windows; i++){
+            if (typeof self.m.clone(i).expected != "undefined"){
                 var input = document.createElement("input")
-                var text = document.createTextNode(self.m.getName(i) + " => " +self.m.windows[i].expected)
+                var text = document.createTextNode(self.m.clone(i).getName() + " => " +self.m.clone(i).expected)
                 input.value=i;
                 input.type = "radio"
                 input.name = "normalize_list"
@@ -156,7 +156,7 @@ Builder.prototype = {
                 span1.className = "tagColorBox tagColor" + i
                 span1.onclick = function () {
                     var cloneID = parseInt(document.getElementById('tag_id').innerHTML);
-                    self.m.changeTag(cloneID, i)
+                    self.m.clone(cloneID).changeTag(i)
                     $('#tagSelector').hide('fast')
                 }
                 
@@ -164,7 +164,7 @@ Builder.prototype = {
                 span2.className = "tagName" + i + " tn"
                 span2.onclick = function () {
                     var cloneID = parseInt(document.getElementById('tag_id').innerHTML);
-                    self.m.changeTag(cloneID, i)
+                    self.m.clone(cloneID).changeTag(i)
                     $('#tagSelector').hide('fast')
                 }
 
@@ -203,14 +203,14 @@ Builder.prototype = {
             
             if (size>0 && size<1){
                 document.getElementById('normalized_size').value = ""
-                self.m.windows[cloneID].expected=size;
+                self.m.clone(cloneID).expected=size;
                 self.m.compute_normalization(cloneID, size)
                 self.m.update()
                 $('#tagSelector')
                     .hide('fast')
                 self.build_settings()
             }else{
-                popupMsg("expected input between 0.0001 and 1")
+                myConsole.popupMsg("expected input between 0.0001 and 1")
             }
             
         }
@@ -357,9 +357,9 @@ Builder.prototype = {
 
         //init slider
         var max_top = 0;
-        for (var i = 0; i < this.m.windows.length; i++) {
-            if (this.m.windows[i].top > max_top)
-                max_top = this.m.windows[i].top
+        for (var i = 0; i < this.m.n_windows; i++) {
+            if (this.m.clone(i).top > max_top)
+                max_top = this.m.clone(i).top
         }
         max_top = (Math.ceil(max_top / 5)) * 5
         document.getElementById("top_slider")
@@ -576,7 +576,7 @@ Builder.prototype = {
         infoTime.appendChild(document.createTextNode("Info"));
         infoTime.className = "button_right"
         infoTime.onclick = function () {
-            dataBox(self.m.getPointHtmlInfo(self.m.t));
+            myConsole.dataBox(self.m.getPointHtmlInfo(self.m.t));
         }
         div_point.appendChild(infoTime)
         

browser/js/clone.js

+/*
+ * This file is part of "Vidjil" <http://bioinfo.lifl.fr/vidjil>, V(D)J repertoire browsing and analysis
+ * Copyright (C) 2013, 2014 by Marc Duez <marc.duez@lifl.fr> and the Vidjil Team
+ * Bonsai bioinformatics at LIFL (UMR CNRS 8022, Université Lille) and Inria Lille
+ *
+ * "Vidjil" is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * "Vidjil" is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with "Vidjil". If not, see <http://www.gnu.org/licenses/>
+ */
+
+function Clone(data, model, hash) {
+    this.m = model
+    this.hash = hash
+    var key = Object.keys(data)
+    for (var i=0; i<key.length; i++ ){
+        this[key[i]]=data[key[i]]
+    }
+}
+
+
+Clone.prototype = {
+    
+    /* return custom name
+     * or segmentation name
+     *
+     * */
+    getSequenceName: function () {
+        if (typeof (this.c_name) != 'undefined') {
+            return this.c_name;
+        } else {
+            return this.getCode();
+        }
+    }, //end getName
+
+    /* return segmentation name "geneV -x/y/-z geneJ",
+     * return a short segmentation name if system == IGH,
+     *
+     * */
+    getCode: function () {
+        if (typeof (this.sequence) != 'undefined' && typeof (this.name) != 'undefined') {
+            if (this.length > 100 && typeof (this.shortName) != 'undefined') {
+                return this.shortName;
+            } else {
+                return this.name;
+            }
+        } else {
+            return this.window;
+        }
+    }, //end getCode
+
+    getSystem: function () {
+        if (typeof (this.system) != 'undefined') {
+            return this.system;
+        } else {
+            if (this.m.system != 'multi' ) return this.m.system;   
+        }
+    }, 
+
+    /* compute the clone size ( sum of all windows clustered )
+     * @t : tracking point (default value : current tracking point)
+     * */
+    getSize: function (time) {
+        time = typeof time !== 'undefined' ? time : this.m.t;
+
+        if (this.m.reads_segmented[time] == 0 ) return 0
+        var result = this.getReads(time) / this.m.reads_segmented[time]
+        
+        if (this.m.norm) {
+            result = this.m.normalize(result, time)
+        }
+
+        return result
+
+    }, //end getSize
+    
+    /* return the clone size with a fixed number of character
+     * use scientific notation if neccesary
+     * */
+    getStrSize: function () {
+        var size = this.getSize();
+        return this.m.formatSize(size, true)
+    },
+    
+    /* 
+     *
+     * */
+    getSequenceSize: function (time) {
+        time = typeof time !== 'undefined' ? time : this.m.t;
+        
+        if (this.m.reads_segmented[time] == 0 ) return 0
+        var result = this.getSequenceReads(time) / this.m.reads_segmented[time]
+        
+        if (this.norm) {
+            result = this.m.normalize(result, time)
+        }
+
+        return result
+
+    }, //end getSequenceSize
+
+
+    /* compute the clone reads number ( sum of all reads of windows clustered )
+     * @t : tracking point (default value : current tracking point)
+     * */
+    getReads: function (time) {
+        time = typeof time !== 'undefined' ? time : this.m.t;
+        var result = 0;
+
+        for (var j = 0; j < this.m.clones[this.hash].cluster.length; j++) {
+            result += this.m.clone(this.m.clones[this.hash].cluster[j]).size[time];
+        }
+
+        return result
+
+    }, //end getSize
+
+    /* 
+     *
+     * */
+    getSequenceReads: function (time) {
+        time = typeof time !== 'undefined' ? time : this.m.t;
+        return this.size[time];;
+
+    }, //end getSequenceSize
+    
+    getV: function () {
+        if (typeof (this.sequence) != 'undefined' && typeof (this.V) != 'undefined') {
+            return this.V[0].split('*')[0];
+        }
+        return "undefined V";
+    },
+
+    getJ: function () {
+        if (typeof (this.sequence) != 'undefined' && typeof (this.J) != 'undefined') {
+            return this.J[0].split('*')[0];;
+        }
+        return "undefined J";
+    },
+    
+    getSequence : function () {
+        if (typeof (this.sequence) != 'undefined' && this.sequence != 0){
+            return this.sequence
+        }else{
+            return "0";
+        }
+    },
+    
+    /* return clone segmentation status
+     * 
+     * */
+    getStatus: function () {
+        if (typeof this.status != 'undefined'){
+            return this.m.segmented_mesg[this.status]
+        }else{
+            return "not specified";
+        }
+    },
+    
+    /* give a new custom name to a clone
+     *
+     * */
+    changeName: function (newName) {
+        myConsole.log("changeName() (clone " + this.hash + " <<" + newName + ")");
+        this.c_name = newName;
+        this.m.updateElem([this.m.hash]);
+    }, //fin changeName,
+
+    /* give a new custom tag to a clone
+     *
+     * */
+    changeTag: function (newTag) {
+        newTag = "" + newTag
+        newTag = newTag.replace("tag", "");
+        myConsole.log("changeTag() (clone " + this.hash + " <<" + newTag + ")");
+        this.tag = newTag;
+        this.m.updateElem([this.hash]);
+    },
+
+    /* return clone name
+     * or return name of the representative sequence of the clone
+     *
+     * */
+    getName: function () {
+        if (this.name) {
+            return this.name;
+        } else {
+            return this.getSequenceName();
+        }
+    }, 
+    
+    getColor: function () {
+        if (this.color) {
+            return this.color;
+        } else {
+            return color['@default'];
+        }
+    }, 
+    
+    getTag: function () {
+        if (this.tag) {
+            return this.tag;
+        } else {
+            return default_tag;
+        }
+    }, 
+    
+    
+    /* compute clone color
+     *
+     * */
+    updateColor: function () {
+        if (this.m.focus == this.hash){
+            this.color = color['@select'];
+        }else if (!this.active) {
+            this.color = color['@default'];
+        }else if (this.m.colorMethod == "abundance") {
+            var size = this.getSize()
+            if (size == 0){
+                this.color = color['@default'];
+            }else{
+                this.color = colorGenerator(this.m.scale_color(size * this.m.precision), color_s, color_v);
+            }
+        }else if (this.m.colorMethod == "Tag"){
+            this.color =  tagColor[this.tag];
+        }else if (this.m.colorMethod == "dbscan"){
+            this.color =  this.colorDBSCAN;
+        }else if (this.m.colorMethod == "V" && typeof (this.V) != 'undefined'){
+            this.color =  this.colorV;
+        }else if (this.m.colorMethod == "D" && typeof (this.D) != 'undefined'){
+            this.color =  this.colorD;
+        }else if (this.m.colorMethod == "J" && typeof (this.J) != 'undefined'){
+            this.color =  this.colorJ;
+        }else if (this.m.colorMethod == "N" && typeof (this.N) != 'undefined'){
+            this.color =  this.colorN;
+        }else if (this.m.colorMethod == "system") {
+            this.color = germline.icon[this.system].color
+        }else{
+            this.color = color['@default'];
+        }
+    },
+    
+    /* return info about a sequence/clone in html 
+     *
+     * */
+    getHtmlInfo: function () {
+        var isCluster = this.m.clones[this.hash].cluster.length
+        var time_length = this.m.samples.order.length
+        var html = ""
+
+        if (isCluster) {
+            html = "<h2>Cluster info : " + this.getName() + "</h2>"
+        } else {
+            html = "<h2>Sequence info : " + this.getSequenceName() + "</h2>"
+        }
+        
+        //column
+        html += "<div id='info_window'><table><tr><th></th>"
+
+        for (var i = 0; i < time_length; i++) {
+            html += "<td>" + this.m.getStrTime(this.m.samples.order[i], "name") + "</td>"
+        }
+        html += "</tr>"
+
+        //cluster info
+        if (isCluster) {
+            html += "<tr><td class='header' colspan='" + (time_length + 1) + "'> clone information </td></tr>"
+            html += "<tr><td> clone name </td><td colspan='" + time_length + "'>" + this.getName() + "</td></tr>"
+            html += "<tr><td> clone size (n-reads (total reads) )</td>"
+            for (var i = 0; i < time_length; i++) {
+            html += "<td>" + this.getReads(this.m.samples.order[i]) + "  (" + this.m.reads_segmented[this.m.samples.order[i]] + ")</td>"
+            }
+            html += "</tr><tr><td> clone size (%)</td>"
+            for (var i = 0; i < time_length; i++) {
+            html += "<td>" + (this.getSize(this.m.samples.order[i]) * 100).toFixed(3) + " % </td>"
+            }
+            html += "<tr><td class='header' colspan='" + (time_length + 1) + "'> cluster's main sequence information</td></tr>"
+        }else{
+            html += "<tr><td class='header' colspan='" + (time_length + 1) + "'> sequence information</td></tr>"
+        }
+
+        
+        //sequence info (or cluster main sequence info)
+        html += "<tr><td> sequence name </td><td colspan='" + time_length + "'>" + this.getSequenceName() + "</td></tr>"
+        html += "<tr><td> code </td><td colspan='" + time_length + "'>" + this.getCode() + "</td></tr>"
+        html += "<tr><td> size (n-reads (total reads) )</td>"
+        for (var i = 0; i < time_length; i++) {
+            html += "<td>" + this.getSequenceReads(this.m.samples.order[i]) + 
+                    "  (" + this.m.reads_segmented[this.m.samples.order[i]] + ")</td>"
+        }
+        html += "</tr>"
+        html += "<tr><td> size (%)</td>"
+        for (var i = 0; i < time_length; i++) {
+            html += "<td>" + (this.getSequenceSize(this.m.samples.order[i]) * 100)
+                .toFixed(3) + " % </td>"
+        }
+        html += "</tr>"
+
+        
+        //segmentation info
+        html += "<tr><td class='header' colspan='" + (time_length + 1) + "'> segmentation information</td></tr>"
+        html += "<tr><td> segmented </td><td colspan='" + time_length + "'>" + this.getStatus() + "</td></tr>"
+        
+        if (typeof this.seg_stat != 'undefined'){
+            var total_stat = [];
+            for (var i=0; i<this.seg_stat.length; i++) total_stat[i] = 0
+            for (var i=0; i<this.seg_stat.length; i++){
+                for (var key in this.seg_stat[i]) total_stat[i] +=  this.seg_stat[i][key]
+            }
+            
+            for (var key in this.seg_stat[0]){
+                html += "<tr><td> "+this.m.segmented_mesg[key]+"</td>"
+                for (var i = 0; i < time_length; i++) {
+                html += "<td>"+this.seg_stat[i][key] 
+                        + " (" + ((this.seg_stat[i][key]/total_stat[i]) * 100).toFixed(1) + " %)</td>"
+                }
+            }
+        }
+        
+        html += "<tr><td> sequence </td><td colspan='" + time_length + "'>" + this.sequence + "</td></tr>"
+        html += "<tr><td> window </td><td colspan='" + time_length + "'>" + this.window + "</td></tr>"
+        html += "<tr><td> V </td><td colspan='" + time_length + "'>" + this.V + "</td></tr>"
+        html += "<tr><td> D </td><td colspan='" + time_length + "'>" + this.D + "</td></tr>"
+        html += "<tr><td> J </td><td colspan='" + time_length + "'>" + this.J + "</td></tr>"
+        
+        
+        //other info (clntab)
+        html += "<tr><td class='header' colspan='" + (time_length + 1) + "'> other information</td></tr>"
+        for (var key in this) {
+            if (key[0] == "_") {
+                html += "<tr><td>" + key + "</td>"
+                if (this[key] instanceof Array) {
+                    for (var i = 0; i < time_length; i++) {
+                        html += "<td>" + this[key][this.m.samples.order[i]] + "</td>"
+                    }
+                } else {
+                    html += "<td>" + this[key] + "</td>"
+                }
+                html += "</tr>"
+            }
+        }
+        html += "</table></div>"
+        return html
+    },
+    
+    unselect: function () {
+        myConsole.log("unselect() (clone " + this.hash + ")")
+        if (this.select) {
+            this.select = false;
+        }
+        this.m.removeClonesSelected(this.hash);
+        this.m.updateElemStyle([this.hash]);
+    },
+    
+    isSelected: function () {
+        return (this.m.clonesSelected.indexOf(this.hash) != -1)
+    },
+    
+    isActive: function () {
+        return this.active
+    },
+    
+    isFocus: function () {
+        return this.hash == this.m.focus
+    },
+    
+}
+
+
+
+
+
+
+
+
+
+
+
+

browser/js/com.js

@@ -21,11 +21,31 @@
 /* Com object display/store system message
  * 
  * */
-function Com(id, id2) {
-    this.flash_id = id;
-    this.log_id = id2;
+function Com(flash_id, log_id, popup_id, data_id) {
+    this.flash_id = flash_id;
+    this.log_id = log_id;
+    this.popup_id = popup_id
+    this.data_id = data_id;
+    
     this.min_priority = 1; // minimum required to display message
     this.log_container = document.getElementById(this.log_id);
+    
+    this.msg = {
+        "align_error": "Error &ndash; connection to align server ("+return_URL_CGI()+") failed" + "</br> Please check your internet connection and retry." + "</br></br> <div class='center' > <button onclick='closePopupMsg()'>ok</button></div>",
+
+        "file_error": "Error &ndash; incorrect data file" + "</br> Please check you use a .data file generated by Vidjil." + "</br></br> <div class='center' > <button onclick='closePopupMsg()'>ok</button></div>",
+
+        "json_not_found":"Error &ndash; editDistanceFile.json not found" + "</br> Please to check the specified repository in the c++ program, or to run Vidjil program with the specified datas." + "</br></br> <div class='center'><button onclick='closePopupMsg()'>ok</button></div>",
+
+        "version_error": "Error &ndash; data file too old (version " + VIDJIL_JSON_VERSION + " required)" + "</br> This data file was generated by a too old version of Vidjil. " + "</br> Please regenerate a newer data file. " + "</br></br> <div class='center' > <button onclick='closePopupMsg()'>ok</button></div>",
+
+        "welcome": " <h2>Vidjil <span class='logo'>(beta)</span></h2>" + "(c) 2011-2014, the Vidjil team" + "<br />Marc Duez, Mathieu Giraud and Mikaël Salson" + " &ndash; <a href='http://www.vidjil.org'>http://www.vidjil.org/</a>" + "</br>" + "</br>Vidjil is developed by the <a href='http://www.lifl.fr/bonsai'>Bonsai bioinformatics team</a> (LIFL, CNRS, U. Lille 1, Inria Lille), in collaboration with the <a href='http://biologiepathologie.chru-lille.fr/organisation-fbp/91210.html'>department of Hematology</a> of CHRU Lille" 
+        + " the <a href='http://www.ircl.org/plate-forme-genomique.html'>Functional and Structural Genomic Platform</a> (U. Lille 2, IFR-114, IRCL)" + " and the <a href='http://www.euroclonality.org/'>EuroClonality-NGS</a> working group." + "<br/>" + "<br>Vidjil is free software, and you are welcome to redistribute it under <a href='http://git.vidjil.org/blob/master/doc/LICENSE'>certain conditions</a>. This software is for research use only and comes with no warranty." + "<br>" + "Please cite <a href='http://www.biomedcentral.com/1471-2164/15/409'>BMC Genomics 2014, 15:409</a> if you use Vidjil for your research." +"<br><br> <div class='center' > <button onclick='myConsole.closePopupMsg()'>start</button></div>",
+
+        "browser_error": "The web browser you are using has not been tested with Vidjil." + "</br>Note in particular that Vidjil is <b>not compatible</b> with Internet Explorer 9.0 or below." +"</br>For a better experience, we recommend to install one of those browsers : " + "</br> <a href='http://www.mozilla.org/'> Firefox </a> " + "</br> <a href='www.google.com/chrome/'> Chrome </a> " + "</br> <a href='http://www.chromium.org/getting-involved/download-chromium'> Chromium </a> " + "</br></br> <div class='center' > <button onclick='popupMsg(msg.welcome)'>I want to try anyway</button></div>",
+    }
+    
+    
 }
 
 Com.prototype = {
@@ -90,6 +110,33 @@ Com.prototype = {
     closeLog: function () {
         $("#"+this.log_id).fadeToggle(200)
     },
+    
+    popupMsg: function (msg) {
+        document.getElementById(this.popup_id)
+            .style.display = "block";
+        document.getElementById(this.popup_id).lastElementChild
+            .innerHTML = msg;
+    },
+
+    closePopupMsg: function () {
+        document.getElementById(this.popup_id)
+            .style.display = "none";
+        document.getElementById(this.popup_id).lastElementChild
+            .innerHTML = "";
+    },
+
+    dataBox: function(msg) {
+        document.getElementById(this.data_id)
+            .style.display = "block";
+        document.getElementById(this.data_id).lastElementChild
+            .innerHTML = msg;
+    },
 
+    closeDataBox: function() {
+        document.getElementById(this.data_id)
+            .style.display = "none";
+        document.getElementById(this.data_id).lastElementChild
+            .innerHTML = "";
+    },
     
 }
\ No newline at end of file

browser/js/database.js

@@ -15,6 +15,12 @@ function Database(id, db_address) {
     }
 }
 
+
+function return_URL_CGI() {
+    if (typeof config != "undefined") return config.cgi_address;
+    else return "No_CGI_found";
+}
+
 Database.prototype = {
 
     /*appel une page générée a partir des données du serveur
@@ -73,7 +79,7 @@ Database.prototype = {
                     + "Your browser currently does not recognize our SSL certificate. </br>"
                     + "To use the sample database, you need to accept this certificate and/or tag this website as a trusted one. </br>"
                     + "<a href='"+DB_ADDRESS+"'>Follow this link<a/>"
-            popupMsg(msg)
+            myConsole.popupMsg(msg)