Merge branch 'feature-c/1292-tag_multiple_clones' into 'dev'

1292; tag multiple clones at once

Closes #1292

See merge request !392

browser/css/dark.css

@@ -1361,6 +1361,9 @@ span.warningReads {
 #bot-separator:hover {
   background: #073642;
 }
+#norm_button {
+  width: 7ex;
+}
 .edit_button {
   float: right;
   margin-right: 2px;
@@ -2270,3 +2273,7 @@ form .form_label {
 [hidden] {
   display: none !important;
 }
+.disabledbutton {
+  pointer-events: none;
+  opacity: 0.4;
+}

browser/css/segmenter_page.css

@@ -1361,6 +1361,9 @@ span.warningReads {
 #bot-separator:hover {
   background: #fdf6e3;
 }
+#norm_button {
+  width: 7ex;
+}
 .edit_button {
   float: right;
   margin-right: 2px;
@@ -2270,6 +2273,10 @@ form .form_label {
 [hidden] {
   display: none !important;
 }
+.disabledbutton {
+  pointer-events: none;
+  opacity: 0.4;
+}
 body {
   line-height: 20px;
 }

browser/css/vidjil.less

@@ -2618,3 +2618,8 @@ form {
 [hidden] {
       display: none !important;
 }
+
+.disabledbutton {
+    pointer-events: none;
+    opacity: 0.4;
+}
\ No newline at end of file

browser/js/clone.js

@@ -1381,7 +1381,7 @@ Clone.prototype = {
         var span_star = document.createElement('span')
         span_star.setAttribute('class', 'starBox');
         span_star.onclick = function (e) {
-            self.m.openTagSelector(self.index, e);
+            self.m.openTagSelector([self.index], e);
         }
         span_star.id = self.index
         var tag_icon = document.createElement('i')

browser/js/list.js

@@ -401,6 +401,7 @@ List.prototype = {
             self.m.focusIn(cloneID);
         }
         div_elem.className = "listElem";
+        div_elem.id        = "listElem_"+cloneID
         div_elem.style.display = "block";
 
         var span_name = document.createElement('span');

browser/js/model.js

@@ -1948,32 +1948,31 @@ changeAlleleNotation: function(alleleNotation) {
      * open/build the tag/normalize menu for a clone
      * @param {integer} cloneID - clone index
      * */
-    openTagSelector: function (cloneID, e) {
+    openTagSelector: function (clonesIDs, e) {
         var self = this;
-        cloneID = typeof cloneID !== 'undefined' ? cloneID : this.cloneID;
         this.tagSelectorList.removeAllChildren();
-        this.cloneID=cloneID
+        clonesIDs = clonesIDs !== undefined ? clonesIDs : this.clonesIDs; 
+        this.clonesIDs=clonesIDs
 
         var buildTagSelector = function (i) {
             var span1 = document.createElement('span');
             span1.className = "tagColorBox tagColor" + i
-            span1.onclick = function () {
-                self.clone(cloneID).changeTag(i)
-                $(self.tagSelector).hide('fast')
-            }
-
+           
             var span2 = document.createElement('span');
             span2.className = "tagName" + i + " tn"
             span2.appendChild(document.createTextNode(self.tag[i].name))
-            span2.onclick = function () {
-                self.clone(cloneID).changeTag(i)
-                $(self.tagSelector).hide('fast')
-            }
 
             var div = document.createElement('div');
             div.className = "tagElem"
+            div.id = "tagElem_" + i
             div.appendChild(span1)
             div.appendChild(span2)
+            div.onclick = function () {
+                for (var j = 0; j < clonesIDs.length; j++) {
+                    self.clone(clonesIDs[j]).changeTag(i)
+                }
+                $(self.tagSelector).hide('fast')
+            }
 
             var li = document.createElement('li');
             li.appendChild(div)
@@ -1985,6 +1984,9 @@ changeAlleleNotation: function(alleleNotation) {
             buildTagSelector(i);
         }
         
+        var separator = document.createElement('div');
+        separator.innerHTML = "<hr>"
+
         var span1 = document.createElement('span');
         span1.appendChild(document.createTextNode("normalize to: "))
 
@@ -1999,8 +2001,9 @@ changeAlleleNotation: function(alleleNotation) {
         this.norm_button = document.createElement('button');
         this.norm_input.id = "norm_button";
         this.norm_button.appendChild(document.createTextNode("ok"))
+        
         this.norm_button.onclick = function () {
-            var cloneID = self.cloneID;
+            var cloneID = self.clonesIDs[0];
             var size = parseFloat(self.norm_input.value);
             
             if (size>0 && size<1){
@@ -2021,19 +2024,26 @@ changeAlleleNotation: function(alleleNotation) {
         }
         
         var div = document.createElement('div');
+        div.id  = "normalization_expected_input_div"
+        div.appendChild(separator)
         div.appendChild(span1)
         div.appendChild(span2)
         div.appendChild(this.norm_button)
-        
+
         var li = document.createElement('li');
         li.appendChild(div)
 
         this.tagSelectorList.appendChild(li);
         
-        
-        if (cloneID[0] == "s") cloneID = cloneID.substr(3);
+        var string;
+        if (clonesIDs.length > 1){
+            string = "Tag for " + clonesIDs.length +  " clones"
+        } else {
+            if (clonesIDs[0][0] == "s") cloneID = clonesIDs[0].substr(3);
+            string = "Tag for "+this.clone(clonesIDs[0]).getName()
+        }
+        this.tagSelectorInfo.innerHTML = string
         $(this.tagSelector).show();
-        this.tagSelectorInfo.innerHTML = "tag for "+this.clone(cloneID).getName()+"("+cloneID+")"; 
         
         
         //replace tagSeelector
@@ -2044,6 +2054,11 @@ changeAlleleNotation: function(alleleNotation) {
         if (top<minTop) top=minTop;
         if (top>maxTop) top=maxTop;
         this.tagSelector.style.top=top+"px";
+
+        // If multiple clones Ids; disabled normalization div
+        if (clonesIDs.length > 1) {
+            $("#"+div.id).addClass("disabledbutton");
+        }
     },
 
 

browser/js/segmenter.js

@@ -371,7 +371,20 @@ Segment.prototype = {
             hide_selected.onclick = function () { self.m.hideSelected() }
             div_stats.appendChild(hide_selected)
 
-            //
+            
+            // Tag/Star
+            var span_star = document.createElement('span')
+            span_star.setAttribute('class', 'button');
+            span_star.setAttribute("title", 'Tag selected clones');
+            span_star.onclick = function (e) {
+                if (m.getSelected().length > 0) { self.m.openTagSelector(m.getSelected(), e); }
+            }
+            var tag_icon = document.createElement('i')
+            tag_icon.id  = "tag_icon__multiple"
+            tag_icon.classList.add('icon-star-2')
+            span_star.appendChild(tag_icon)
+            div_stats.appendChild(span_star);
+
             div.appendChild(div_stats)
             div_stats.appendChild(span_fixsegmenter);
 
@@ -1043,6 +1056,12 @@ Segment.prototype = {
             }
             $(".stats_content").prop('title', s)
         }
+
+        if (this.m.getSelected().length > 0){  
+            $("#tag_icon__multiple").css("display", "")
+        } else {
+            $("#tag_icon__multiple").css("display", "none")
+        }
     },
 
     /**

browser/test/functional/test_multilocus.rb

@@ -352,6 +352,31 @@ class TestMultilocus < BrowserTest
     end
   end
 
+
+  def test_19_edit_tag
+    begin
+      $b.clone_in_scatterplot('77').click
+      $b.clone_in_scatterplot('25').click(:control)
+      $b.clone_in_scatterplot('88').click(:control)
+      $b.clone_in_scatterplot('90').click(:control)
+      
+      ## Test tag selection for one clone
+      $b.clone_info('25')[:star].click
+      $b.element(:id => 'tagElem_0').click
+
+      assert ($b.clone_info('25')[:name].style('color') ==  'rgba(220, 50, 47, 1)' ) , "clone 25 have changed color"
+      assert ( not $b.clone_info('88')[:name].style('color') ==  'rgba(220, 50, 47, 1)' ) , "clone 88 (second of the selection) haven't chaged color "
+
+
+      ## Test tag selection for multiple clone
+      $b.element(:id => "tag_icon__multiple").click
+      $b.element(:id => 'tagElem_6').click
+      assert ($b.clone_info('25')[:name].style('color') ==  'rgba(211, 54, 130, 1)' ) , "clone 25 have also changed color"
+      assert ($b.clone_info('77')[:name].style('color') ==  'rgba(211, 54, 130, 1)' ) , "clone 77 have also changed color"
+      assert ($b.clone_info('88')[:name].style('color') ==  'rgba(211, 54, 130, 1)' ) , "clone 88 have also changed color"
+    end
+  end
+
   # Not really a test
   def test_zz_close
     close_everything