Filter in mosaic using labels

closes tuleap 241

capsule-prototype/css/mosaic.css

@@ -26,7 +26,7 @@
 	flex-wrap: wrap;
 }
 
-.mosaic_filter_item {
+.mosaic_filter_item, .mosaic_label_filter {
 	width: var(--filter-width);
 	height: var(--filter-height);
 	margin: var(--base-spacing);
@@ -39,6 +39,10 @@
 	align-items: center;
 }
 
+.mosaic_label_filter_enabled {
+  background-color: rgba(255, 255, 255, .5);
+}
+
 .mosaic_category {
 	padding: var(--base-spacing);
 	margin: var(--base-spacing);

capsule-prototype/index.html

@@ -189,7 +189,7 @@
           <!-- templates -->
           <div id='popupLabelsInput' class='popupInput flex-col'>
             <input type='text' id='new_annotation_label' />
-            <input class='annotation_labels_template' type='checkbox' name='annotation_labels' id='' value='' style='display: none;' />
+            <input class='annotation_labels_template' type='checkbox' id='' value='' style='display: none;' />
             <label class='annotation_labels_template' for='' style='display: none;'></label>
           </div>
 				</td>

capsule-prototype/js/online-script.js

@@ -156,13 +156,14 @@ function setEditionControls() {
   $('#new_annotation_label').keypress(function(event) {
     var keycode = (event.keyCode ? event.keyCode : event.which);
     if (keycode != 13) {
-      return
+      return;
     }
     var label = $('#new_annotation_label').val();
     var input = $('input.annotation_labels_template').first().clone();
     var html_label = $('label.annotation_labels_template').first().clone();
     var id = 'annotation_label_' + Math.floor((Math.random()*1000));
 
+    input.attr('name', 'annotation_labels');
     input.attr('checked', 'true');
     input.attr('id', id);
     input.attr('value', label);
@@ -816,7 +817,10 @@ function closeInputs() {
 				var keyDoc = $(this).parent().attr("keydoc");
         var newLabels = '';
         $('[name="annotation_labels"]:checked')
-          .toArray().forEach(e => newLabels += e.value + ';');
+          .toArray().forEach(e => {
+            newLabels += e.value + ';';
+            e.checked = false;
+          })
         console.log('new labels: ', newLabels);
         setMetaFromDom(keyDoc, "Rekall->Labels", newLabels);
 
@@ -916,6 +920,7 @@ function openMosaic() {
         let div=$('<div/>').addClass('mosaic_item').on('click', function() {tagOrDoc.openPopupEdit();});
         div.append($('<img/>').attr('src', url).attr('onerror', "this.src='../shared/css/images/img-document.png';"));
         div.append($('<span/>').addClass('caption').text(name));
+        div.attr('data-rekall-labels', tagOrDoc.getMetadata('Rekall->Labels'));
         return div;
     }
     function getFilterElement(text, color, callback, css_class) {
@@ -946,6 +951,7 @@ function openMosaic() {
         'mosaic_filter_item_all'
     ));
     container.append(filterdiv);
+    var labels = new Set();
     // TODO is there a better way to iterate over tags or documents ?
     for ( let [k, v] of  Object.entries(rekall.sortings.colors.categories)) {
         let categoryName = rekall.sortings.colors.getCategoryName(k)
@@ -967,9 +973,43 @@ function openMosaic() {
 
         for (let i in v.tags){
             grid.append(getMosaicItem(v.tags[i]));
+            var current_labels = v.tags[i].getMetadata('Rekall->Labels');
+            if (current_labels && current_labels != '') {
+              current_labels.split(';').forEach(l => {if (l != '') labels.add(l)});
+            }
         }
         container.append(category);
     }
+    labels.forEach(l => {
+      var button = $('<p/>').html(l);
+      button.my_state = undefined;
+      button.addClass('mosaic_label_filter');
+      button.click(ev => {
+        if (typeof(ev.target.my_state) === 'undefined') ev.target.my_state = true;
+        else ev.target.my_state = !ev.target.my_state;
+        if (ev.target.my_state) $(ev.target).addClass('mosaic_label_filter_enabled');
+        else $(ev.target).removeClass('mosaic_label_filter_enabled');
+        var labels = new Set();
+        $('.mosaic_label_filter').toArray().forEach(f => {
+          if (f.my_state == true)
+            labels.add(f.innerHTML);
+        });
+        if (!labels.size) {
+          $('.mosaic_label_filter').toArray().forEach(f => {
+            f.my_state = undefined;
+            $(f).removeClass('mosaic_label_filter_enabled');
+            labels.add(f.innerHTML);
+          });
+        }
+        $('.mosaic_item').toArray().forEach(t => {
+          if (Array.from(labels).map(l => t.dataset.rekallLabels.indexOf(l) != -1).includes(true))
+            $(t).show();
+          else
+            $(t).hide();
+        });
+      })
+      filterdiv.append(button);
+    });
 }
 
 function getTagGradientColor(tag) {