browser: color by productivity

Color depending on the productivity of the sequence
(found in the seg.junction.productive field)

browser/index.html

@@ -138,6 +138,7 @@
                     <option value="N">N</option>
                     <option value="system" id="color_system_button">locus/germline</option>
                     <option value="abundance">abundance</option>
+                    <option value="productive">productivity</option>
                 </select></div>
             </div>
 

browser/js/builder.js

@@ -807,6 +807,19 @@ Builder.prototype = {
 
                 span2.appendChild(spantag);
             }
+            break;
+        case 'productive':
+            span0.appendChild(document.createTextNode('not productive '));
+            var spanNotProductive = document.createElement('span')
+            spanNotProductive.style.backgroundColor = colorProductivity('false')
+            spanNotProductive.className = 'tagColorBox'
+            var spanProductive = document.createElement('span')
+            spanProductive.style.backgroundColor = colorProductivity('true')
+            spanProductive.className = 'tagColorBox'
+            span2.appendChild(spanNotProductive)
+            span2.appendChild(spanProductive)
+            span3.appendChild(document.createTextNode('productive'));
+
             break;
         case "abundance":
             span0.appendChild(document.createTextNode("abundance"));

browser/js/clone.js

@@ -628,6 +628,12 @@ Clone.prototype = {
             this.color =  this.colorN;
         }else if (this.m.colorMethod == "system") {
             this.color = this.m.germlineList.getColor(this.germline)
+        } else if (this.m.colorMethod == 'productive') {
+            if (typeof this.seg != 'undefined'
+                && typeof this.seg.junction != 'undefined'
+                && typeof this.seg.junction.productive != 'undefined') {
+                this.color = colorProductivity(this.seg.junction.productive)
+            }
         }else{
             this.color = "";
         }

browser/js/vidjil-style.js

@@ -54,7 +54,20 @@
     }
   }
 
-  
+// Get the color for a productive or non productive clone
+
+function colorProductivity(is_productive) {
+    if (typeof is_productive == 'undefined') {
+        return '';
+    } else if (is_productive == true || is_productive == 'true'
+               || is_productive == 'TRUE') {
+        return '#2aa198';
+    } else if (is_productive == false || is_productive == 'false'
+               || is_productive == 'FALSE'){
+        return '#d33682';
+    }
+    return '';
+}
 
 /* Get an icon */
 

doc/format-analysis.org

@@ -295,7 +295,9 @@ In the .analysis file, this section is intended to describe some specific clones
                      // any feature to be highligthen in the sequenc
                      // the optional "seq" element gives a sequence that corresponds to this feature
                      // CDR3 should be stored that way (in a field called "cdr3"), this is similar
-                     // for the other regions of interest.
+                     // for the other region of interest.
+                     // The junction is also stored in that way (in a "junction" field),
+                     // its productivity must be stored in a boolean field called "productive"
          "somefeature": { "start": 0, "stop": 0, "seq": "" }
       }