Merge branch 'feature-c/4104-n-afficher-dans-le-graph-que-les-clones-du-sample-courant' into 'dev'

Focus on clones in one sample (graph) + More sorting options (list)

Closes #3870 and #4104

See merge request !564

browser/css/dark.css

@@ -576,7 +576,7 @@ line {
   font-weight: bold;
 }
 .list_sort {
-  margin-right: 30px;
+  margin-right: 20px;
   float: right;
 }
 /*style segmenter element*/
@@ -2259,3 +2259,9 @@ form .form_label {
   opacity: 0.4;
   cursor: auto;
 }
+.list_lock_off {
+  color: #333333;
+}
+.list_lock_on {
+  color: #839496;
+}

browser/css/light.css

@@ -577,7 +577,7 @@ line {
   font-weight: bold;
 }
 .list_sort {
-  margin-right: 30px;
+  margin-right: 20px;
   float: right;
 }
 /*style segmenter element*/
@@ -2260,3 +2260,9 @@ form .form_label {
   opacity: 0.4;
   cursor: auto;
 }
+.list_lock_off {
+  color: #cccccc;
+}
+.list_lock_on {
+  color: #657b83;
+}

browser/css/segmenter_page.css

@@ -2257,6 +2257,12 @@ form .form_label {
   opacity: 0.4;
   cursor: auto;
 }
+.list_lock_off {
+  color: #cccccc;
+}
+.list_lock_on {
+  color: #657b83;
+}
 body {
   line-height: 20px;
 }

browser/css/svg.css

@@ -2252,6 +2252,12 @@ form .form_label {
   opacity: 0.4;
   cursor: auto;
 }
+.list_lock_off {
+  color: #333333;
+}
+.list_lock_on {
+  color: #777777;
+}
 #resolution5 {
   opacity: 0;
 }

browser/css/talk.css

@@ -2254,6 +2254,12 @@ form .form_label {
   opacity: 0.4;
   cursor: auto;
 }
+.list_lock_off {
+  color: #cccccc;
+}
+.list_lock_on {
+  color: #657b83;
+}
 #mid-container {
   font-size: 125%;
 }

browser/css/vidjil.less

@@ -723,7 +723,7 @@ line {
 }
 
 .list_sort{
-    margin-right : 30px;
+    margin-right : 20px;
     float: right;
 }
 
@@ -2602,4 +2602,12 @@ form {
     pointer-events: none;
     opacity: 0.4;
     cursor: auto;
+}
+
+
+.list_lock_off {
+  color: @border;
+}
+.list_lock_on {
+  color: @default;
 }
\ No newline at end of file

browser/index.html

@@ -177,12 +177,19 @@
                 </div>
 
                 <div class="menu" id="filter_menu" onmouseenter="builder.build_displaySelector();" onmouseover="showSelector('filterSelector');" > filter
-                    <div id="filterSelector" class="selector"><div>
+                    <div id="filterSelector" class="selector">
+                      <div>
                         <div class="menu_box">
-                            <span id="top_label"></span></br>
-                            <input id="top_slider" type="range" min="5" max="100" step="5" value="10" onchange="m.displayTop(this.value)" />
+                          <span id="top_label"></span></br>
+                          <input id="top_slider" type="range" min="5" max="100" step="5" value="10" onchange="m.displayTop(this.value)" />
                         </div>
-                    </div></div>
+                        <div class="menu_box">
+                          <div id="filter_switch_sample" title="Hide clones that are not present in the current sample">
+                            <input id="filter_switch_sample_check" type="checkbox"></input> Focus on clones of one sample
+                          </div>
+                        </div>
+                      </div>
+                    </div>
                 </div>
 
                 <div class="menu" id="settings_menu" onmouseenter="builder.build_settings();" onmouseover=" showSelector('settingsSelector');" > settings

browser/js/builder.js

@@ -391,6 +391,13 @@ Builder.prototype = {
         document.getElementById("top_slider")
             .max = max_top;
             
+
+        // init switch onlyOneSample
+        var onlyOneSample = document.getElementById("filter_switch_sample_check")
+        onlyOneSample.checked = this.m.show_only_one_sample
+
+
+
         //init notation
         if (this.m.notation_type == "scientific") {
             document.getElementById("notation").checked = true

browser/js/graph.js

@@ -581,9 +581,17 @@ Graph.prototype = {
         if (clone.top > self.display_limit)return ' M 0,' + self.resizeH;
 
         var size = []
+        var selected_point       = this.m.t
+        var value_selected_point = this.m.clone(id).getSize(selected_point)
+
         for (var i = 0; i < this.graph_col.length; i++) {
-            if (seq_size) size[i] = this.m.clone(id).getSequenceSize(this.m.samples.order[i])
-            else          size[i] = this.m.clone(id).getSize(this.m.samples.order[i])
+            // bypass clone size if it is not present in the current timepoint; TODO, add a switch on this behavior
+            if (this.m.show_only_one_sample && value_selected_point == 0) {
+                size[i] = 0
+            } else {
+                if (seq_size) size[i] = this.m.clone(id).getSequenceSize(this.m.samples.order[i])
+                else          size[i] = this.m.clone(id).getSize(this.m.samples.order[i])
+            }
         }
 
         var x = this.graph_col[0];

browser/js/list.js

@@ -43,16 +43,17 @@ function List(id_list, id_data, model, database) {
     this.index = [];
     this.index_cluster = [];
     this.index_data = {};
+    this.sort_lock = true; // By default, lock the list in the current state
 
     this.build();
     
     this.sort_option = {
-        "-" : function () {},
         "size" : function(){self.sortListBy(function(id){return self.m.clone(id).getSize();})},
         "V/5'" : function(){self.sortListByV()},
         "J/3'" : function(){self.sortListByJ()}
     }
 
+    this.sort_option_selected = "size"; // Store the selected sort method
     this.selectedAxis = {};
 }
 
@@ -281,6 +282,11 @@ List.prototype = {
         sort.className = "list_sort_select"
         sort.onchange = function() {
             self.sort_option[this.value]()
+            self.sort_option_selected = this.value
+            // close the lock
+            self.sort_lock = true
+            var div = document.getElementById("div_sortLock")
+            div.className  = "icon-lock-1 list_lock_on"
         }
         
         for (var key in this.sort_option) {
@@ -292,6 +298,27 @@ List.prototype = {
         
         sort_span.appendChild(document.createTextNode("sort by "));
         sort_span.appendChild(sort);
+        var lock_div = document.createElement("icon")
+        lock_div.id = "div_sortLock"
+
+        lock_div.className = "icon-lock-1 list_lock_on"
+        lock_div.title  = "Keep list sorted"
+        lock_div.onclick = function(){
+            var div = document.getElementById("div_sortLock")
+            if (self.sort_lock == true){
+                self.sort_lock = false
+                div.className  = "icon-lock-open list_lock_off"
+                div.title  = "Freeze list"
+                // Apply sort method at unlock
+                self.sort_option[self.sort_option_selected]()
+            } else {
+                self.sort_lock = true
+                div.className  = "icon-lock-1 list_lock_on"
+                div.title  = "Keep list sorted"
+            }
+        }
+
+        sort_span.appendChild( lock_div )
 
         var axis_span = document.createElement('span');
         axis_span.className = "list_axis devel-mode";
@@ -344,8 +371,10 @@ List.prototype = {
         this.updateElem(list);
         this.update_data_list()
         
-        //TODO check order 
-        document.getElementById("list_sort_select").selectedIndex = 0;
+        // Apply selected sort function if no sort lock
+        if (this.sort_lock == false){
+            this.sort_option[this.sort_option_selected]()
+        }
     },
 
     /**

browser/js/model.js

@@ -126,6 +126,14 @@ Model.prototype = {
           $(this).removeClass('hovered');
         });
 
+        this.show_only_one_sample = false
+        $("#filter_switch_sample").click(function(){
+            self.show_only_one_sample = !self.show_only_one_sample
+            var check = document.getElementById("filter_switch_sample_check")
+            check.checked = self.show_only_one_sample
+            self.update()
+        })
+
         
         // Table of conversion between axes name and distribution names
         this.distrib_convertion = {

browser/test/functional/test_cluster.rb

@@ -53,6 +53,31 @@ class TestCluster < BrowserTest
   end
 
 
+  def test_05_switch_onlyOneSample
+    cloneId = '4'
+    sleep 1
+    # exist will not work as the clone is present, but not visible.
+    # So use the number of points of the line [with new smooth line, there is no formula]
+    polyline4 = $b.path(:id => "polyline"+cloneId )
+
+    assert ( polyline4.attribute_value("d").split(',').length == 12 ), ">> clone is present in the graph by default"
+
+    # switch the filter on, current sample include cloneId
+    $b.menu_filter.click
+    $b.div(:id => "filter_switch_sample").click
+    assert ( $b.clone_in_list(cloneId).exists? ), ">> clone is present in the list"
+
+    assert ( polyline4.attribute_value("d").split(',').length == 12 ), ">> clone is still present in the graph if switched in filter menu (and correct sample)"
+
+
+    # change current sample, will not include cloneId
+    $b.send_keys :arrow_right
+    sleep 1
+    polyline4 = $b.path(:id => "polyline"+cloneId )
+    assert ( polyline4.attribute_value("d").split(',').length == 2 ), ">> clone is NOT present in the graph if switched in filter menu and sample with size at 0 for this clone"
+  end
+
+
 
   # Not really a test
   def test_zz_close

browser/test/functional/test_list.rb

+# coding: utf-8
+load 'vidjil_browser.rb'
+load 'browser_test.rb'
+
+#browser test suite
+class TestList < BrowserTest
+
+  def setup
+    super
+    if not defined? $b
+      set_browser("/doc/analysis-example2.vidjil", "/doc/analysis-example2.analysis")
+      if $b.div(id: 'tip-container').present?
+        $b.div(:id => 'tip-container').div(:class => 'tip_1').element(:class => 'icon-cancel').click
+      end
+    end
+  end
+
+
+  def after_tests
+  end
+  
+  def test_00_list_clones
+    sleep 1
+    # tester la presence du lock
+    lock = $b.listLock()
+    assert ( lock.attribute_value("class") == "icon-lock-1 list_lock_on"), "lock start in good state (locked)"
+
+    # tester l'ordre des clones
+    listClone = $b.list()  
+    l0 = listClone.div(index: 0)
+    assert ( l0.id == "listElem_0" ), "opening; correct id of the first element"
+  end
+
+
+  def test_01_xxx
+    # cahnger de sample, verifier que l'ordre est rester le meme
+    $b.send_keys :arrow_right
+    listClone = $b.list()  
+    l0 = listClone.div(index: 0)
+    assert ( l0.id == "listElem_0" ), "opening; correct id of the first element"
+  end
+
+  def test_02_xxx
+    # Enlever le lock
+    lock = $b.listLock()
+    lock.click
+    assert ( lock.attribute_value("class") == "icon-lock-open list_lock_off"), "lock in good state after click (unlocked)"
+    # verifier que l'ordre a déjà changer (automatique sort)
+    listClone = $b.list()  
+    l0 = listClone.div(index: 0)
+    assert ( l0.id == "listElem_5" ), "opening; correct id of the first element (clone other)"
+    
+  end
+
+
+  def test_03_xxx
+    
+    # changer de sample
+    $b.send_keys :arrow_right
+    sleep 0.1
+    # verifier que l'ordre est redevenu celui du cas 1
+    listClone = $b.list()  
+    l0 = listClone.div(index: 0)
+    assert ( l0.id == "listElem_0" ), "opening; correct id of the first element"
+    
+  end
+
+
+  def test_04_xxx
+    # verouiller de nouveau
+    lock = $b.listLock()
+    lock.click
+    assert ( lock.attribute_value("class") == "icon-lock-1 list_lock_on"), "lock in good state after second click (locked)"
+    # changer de sample
+    $b.send_keys :arrow_right
+    sleep 0.1
+    # verifier que l'ordre est rester le cas 1
+    listClone = $b.list()  
+    l0 = listClone.div(index: 0)
+    assert ( l0.id == "listElem_0" ), "opening; correct id of the first element"
+    
+  end
+
+  def test_05_xxx
+  #   # tester de changer la valeur de la methode (size => V/5')
+    $b.select(:id => 'list_sort_select').click
+    $b.send_keys :arrow_down
+    $b.send_keys :arrow_down
+    $b.send_keys :enter
+    sleep 0.1
+
+    lock = $b.listLock()
+    # verifier que le lock est bien levé
+    assert ( lock.attribute_value("class") == "icon-lock-1 list_lock_on"), "lock in good state after change of sort method (locked)"
+    # voir qu'il y a bien une reorganisation de la liste
+    
+    listClone = $b.list()  
+    l0 = listClone.div(index: 0)
+    assert ( l0.id == "listElem_0" ), "opening; correct id of the first element"
+    
+  end
+
+
+  # Not really a test
+  def test_zz_close
+    close_everything
+  end
+end

browser/test/functional/vidjil_browser.rb

@@ -376,6 +376,11 @@ class VidjilBrowser < Watir::Browser
     return div(:id => 'list_clones')
   end
   
+  def listLock()
+    return element(:id => "div_sortLock")
+  end
+
+
   def until(extra = {})
     default = {timeout: 3}
     default.merge(extra)

doc/user.md

@@ -164,6 +164,10 @@ The number of displayed clones can be changed with the filter menu.
 
   - If your dataset contains sampling dates (for example for diagnosis/follow-up samples), you can switch between sample keys and dates in “settings \> sample key”
 
+  - By default, the graph shows clones present in any sample.
+    You can instead choose to show only the clones present in the selected sample with “filter \> focus on clones of one sample“.
+
+
 ## The plot view and the plot presets
 
 The grid view shows the clones scattered according to some axes.

doc/vidjil-format.md

@@ -156,6 +156,14 @@ do a correct gathering.
               {
                   "cdr3": {"start": 10, "stop": 20}
               }
+        },
+        {
+            "id": "clone5",
+            "name": "clone_showOnlyOneSample",
+            "sequence": "GATACAaaaaaccccc",
+            "reads": [ 1021, 0 ],
+            "germline": "TRG",
+            "top": 5
         }
     ]
 }