segment.js : tostring > replace the highlight window with a more generic method

-possibility to highlight multiple different region in the sequence (cdr3 /fr2 / ...)

browser/css/dark.css

@@ -517,19 +517,13 @@ line {
 .J {
   color: #009b95;
 }
-.window1 {
-  display: inline-block;
-  width: 0px;
-  word-spacing: normal;
-}
-.window2 {
+.highlight2 {
   border: solid;
   display: inline-flex;
   height: 1em;
   position: relative;
   margin: -1px;
   border-width: 1px;
-  border-color: red;
   -khtml-user-select: none;
   -webkit-user-select: none;
   -moz-user-select: -moz-none;
@@ -537,6 +531,11 @@ line {
   user-select: none;
   pointer-events: none;
 }
+.highlight {
+  display: inline-block;
+  width: 0px;
+  word-spacing: normal;
+}
 span .substitution {
   background-color: #333333;
 }

browser/css/light.css

@@ -517,19 +517,13 @@ line {
 .J {
   color: #009b95;
 }
-.window1 {
-  display: inline-block;
-  width: 0px;
-  word-spacing: normal;
-}
-.window2 {
+.highlight2 {
   border: solid;
   display: inline-flex;
   height: 1em;
   position: relative;
   margin: -1px;
   border-width: 1px;
-  border-color: red;
   -khtml-user-select: none;
   -webkit-user-select: none;
   -moz-user-select: -moz-none;
@@ -537,6 +531,11 @@ line {
   user-select: none;
   pointer-events: none;
 }
+.highlight {
+  display: inline-block;
+  width: 0px;
+  word-spacing: normal;
+}
 span .substitution {
   background-color: #cccccc;
 }

browser/css/vidjil.less

@@ -634,19 +634,13 @@ line {
 .J {
   color: #009b95;
 }
-.window1{
-    display: inline-block;
-    width: 0px;
-    word-spacing: normal;
-}
-.window2{
+.highlight2{
     border: solid;
     display: inline-flex;
     height: 1em;
     position: relative;
     margin: -1px;
     border-width: 1px;
-    border-color: red;
     -khtml-user-select: none;
     -webkit-user-select: none;
     -moz-user-select: -moz-none;
@@ -654,6 +648,11 @@ line {
     user-select: none;
     pointer-events: none;
 }
+.highlight{
+    display: inline-block;
+    width: 0px;
+    word-spacing: normal;
+}
 span .substitution{
     background-color : @border;
 }

browser/js/segmenter.js

@@ -183,9 +183,6 @@ Segment.prototype = {
                     self.is_open = false
                 }
             });
-        
-        
-        
     },
 
     /*
@@ -569,15 +566,24 @@ Sequence.prototype = {
             var jColor = "";
             if (this.m.colorMethod == "J") jColor = "style='color : " + clone.colorJ + "'";
 
-            //window
-            var window_start = this.pos[clone.sequence.indexOf(clone.id)]
-            var window_end = this.pos[clone.sequence.indexOf(clone.id)+clone.id.length]
-
+            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"));
             
             //add span VDJ
             if (typeof clone.seg != 'undefined') result += "<span class='V' " + vColor + " >"
             else result += "<span>"
             for (var i = 0; i < this.seq.length; i++) {
+                for (var j in highlights){
+                    var h = highlights[j];
+                    if (i == h.start){
+                        result += "<span class='highlight'><span class='highlight2' style='color:"+h.color+"'>"
+                        for (var k=0; k<(h.stop - h.start); k++) result += "&nbsp"
+                        result += "</span></span>"
+                    }
+                }
+                
                 result += this.seq[i]
 
                 if (i == endV) result += "</span><span class ='N'>"
@@ -585,12 +591,6 @@ Sequence.prototype = {
                 if (i == endD) result += "</span><span class ='N'>"
                 if (i == startJ - 1) result += "</span><span class ='J' " + jColor + " >"
                 
-                if (i== window_start-1 && this.m.display_window){
-                    result += "<span class='window1'><span class='window2'>"
-                    for (var j=0; j<(window_end - window_start); j++) result += "&nbsp"
-                    result += "</span></span>"
-                
-                }
             }
             result += "</span>"
         }else{