segment.js : add highlight menu to segmenter

browser/css/dark.css

@@ -780,13 +780,18 @@ span.logo {
   float: left;
   width: 475px;
 }
+.menu-highlight {
+  position: relative;
+  float: left;
+  width: 250px;
+}
 .focus {
   position: relative;
   text-align: center;
   float: left;
-  width: -moz-calc(100% - 675px);
-  width: -webkit-calc(100% - 675px);
-  width: calc(100% - 675px);
+  width: -moz-calc(100% - 975px);
+  width: -webkit-calc(100% - 975px);
+  width: calc(100% - 975px);
 }
 .stats {
   position: relative;

browser/css/light.css

@@ -780,13 +780,18 @@ span.logo {
   float: left;
   width: 475px;
 }
+.menu-highlight {
+  position: relative;
+  float: left;
+  width: 250px;
+}
 .focus {
   position: relative;
   text-align: center;
   float: left;
-  width: -moz-calc(100% - 675px);
-  width: -webkit-calc(100% - 675px);
-  width: calc(100% - 675px);
+  width: -moz-calc(100% - 975px);
+  width: -webkit-calc(100% - 975px);
+  width: calc(100% - 975px);
 }
 .stats {
   position: relative;

browser/css/vidjil.less

@@ -399,6 +399,7 @@ line {
 /*Metric*/
 
 @width_left_container : 475px;
+@width_highlight : 250px;
 @width_stats: 250px;
 @width_scrollbar : 30px;
 @width_clusterBox :16px;
@@ -925,13 +926,19 @@ span.logo
     width: @width_left_container;
 }
 
+.menu-highlight {
+    position: relative;
+    float: left;
+    width: @width_highlight;
+}
+
 .focus {
     position: relative;
     text-align: center;
     float: left;
-    width: -moz-calc(~"100%" - (@width_left_container + @width_stats));
-    width: -webkit-calc(~"100%" - (@width_left_container + @width_stats));
-    width: calc(~"100%" - (@width_left_container + @width_stats));
+    width: -moz-calc(~"100%" - (@width_left_container + @width_stats + @width_highlight));
+    width: -webkit-calc(~"100%" - (@width_left_container + @width_stats + @width_highlight));
+    width: calc(~"100%" - (@width_left_container + @width_stats + @width_highlight));
 }
 .stats {
   position: relative;

browser/js/segmenter.js

@@ -44,8 +44,14 @@ function Segment(id, model, cgi_address) {
     
     this.memtab = [];
     this.sequence = {};
-    this.is_open = false
-
+    this.is_open = false;
+    
+    //elements to be highlited in sequences
+    this.highlight = [
+        {'field' : "", 'color': "red"},
+        {'field' : "", 'color': "blue"},
+        //{'field' : "", 'color': "green"}
+    ];
 }
 
 Segment.prototype = {
@@ -127,6 +133,50 @@ Segment.prototype = {
         // div_menu.appendChild(span)
 
         div.appendChild(div_menu)
+        
+        
+        
+        //menu-highlight
+        var div_highlight = document.createElement('div');
+        div_highlight.className = "menu-highlight"
+        div_highlight.onmouseover = function () {
+            self.m.focusOut()
+        };
+        
+        for (var i in this.highlight) {
+            var input = document.createElement('select');
+            input.style.borderColor = this.highlight[i].color;
+            input.style.width = "60px";
+            input.id = "highlight_"+i
+            
+            //TODO generate list from model
+            var option0 = document.createElement('option');
+            option0.appendChild(document.createTextNode(""));
+            input.appendChild(option0)
+            var option1 = document.createElement('option');
+            option1.appendChild(document.createTextNode("_sequence.JUNCTION.raw nt seq"));
+            input.appendChild(option1)
+            var option2 = document.createElement('option');
+            option2.appendChild(document.createTextNode("id"));
+            input.appendChild(option2)
+            
+            input.onchange = function () {
+                var id = this.id.replace("highlight_","")
+                segment.highlight[id].field = this.options[this.selectedIndex].text;
+                segment.update();
+            }
+            
+            div_highlight.appendChild(input)
+        }
+        
+        div.appendChild(div_highlight)
+        
+        
+        
+        
+        
+        
+        
 
         var div_focus = document.createElement('div');
         div_focus.className = "focus"
@@ -568,9 +618,9 @@ Sequence.prototype = {
             if (this.m.colorMethod == "J") jColor = "style='color : " + clone.colorJ + "'";
 
             var highlights = [];
-            highlights.push(this.find_subseq(segment.highligth_red, "red"));
-            highlights.push(this.find_subseq(segment.highligth_blue, "blue"));
-            highlights.push(this.find_subseq(segment.highligth_green, "green"));
+            for (var i in segment.highlight){
+                highlights.push(this.find_subseq(segment.highlight[i].field, segment.highlight[i].color));
+            }
             
             //add span VDJ
             if (typeof clone.seg != 'undefined') result += "<span class='V' " + vColor + " >"