Fix on label selection show only annotation with this label

capsule-prototype/css/mosaic.css

@@ -106,13 +106,12 @@
 
 .mosaic_filter > div.mosaic_filter_item_all { background-size: 20px; }
 
-.mosaic_filter_item:not(.mosaic_filter_disabled, .mosaic_filter_item_all, .mosaic_label_filter_enabled) {
+.mosaic_filter_item:not(.mosaic_filter_disabled, .mosaic_filter_item_all) {
 	background-image: url('images/icn-menu-preview.png');
 }
 
 .mosaic_label_filter_enabled {
 	background-color: rgba(255, 255, 255, .5);
-	background-image: url('images/icn-menu-filter.png');
 }
 
 .mosaic_filter_disabled {

capsule-prototype/js/MosaicPanelWidget.js

@@ -29,7 +29,8 @@
                 rekall: function() {
                     return app.rekall.Rekall('rekall');
                 },
-                _filters_to_hide: [],
+                filters_type_to_hide: [],
+                filter_label_to_show: [],
                 _followedItems: []
             };
 
@@ -40,7 +41,8 @@
                     $('.mosaic_filter_item')
                         .removeClass('mosaic_filter_disabled');
                     $('.mosaic_label_filter_enabled').click();
-                    localOptions._filters_to_hide = [];
+                    localOptions.filters_type_to_hide = [];
+                    localOptions.filter_label_to_show = [];
                     $('.mosaic_category').show();
             }
 
@@ -50,8 +52,17 @@
                 elementsToDestroy.forEach(e => e.remove());
             }
 
-            function toggleSelectedFilter(filterName){
-                let filters = localOptions._filters_to_hide;
+            function toggleFilterType(filterName){
+                let filters = localOptions.filters_type_to_hide;
+                if (filters.includes(filterName)){
+                    filters.splice(filters.indexOf(filterName), 1);
+                } else {
+                    filters.push(filterName);
+                }
+            }
+
+            function toggleLabelToShow(filterName){
+                let filters = localOptions.filter_label_to_show;
                 if (filters.includes(filterName)){
                     filters.splice(filters.indexOf(filterName), 1);
                 } else {
@@ -71,11 +82,16 @@
                 }
             }
 
-            const computeLabelShowing = function(div, tag) {
-                if (tag.getLabels().filter(value => localOptions._filters_to_hide.includes(value.toLowerCase())).length){
-                    div.hide();
-                } else {
+            const setDivVisibilityForTag = function(div, tag) {
+                if (!localOptions.filter_label_to_show.length) {
                     div.show()
+                    return;
+                }
+
+                if (tag.getLabels().filter(value => localOptions.filter_label_to_show.includes(value.toLowerCase())).length){
+                    div.show();
+                } else {
+                    div.hide()
                 }
             }
 
@@ -95,28 +111,27 @@
                         .attr('src', url)
                         .attr('onerror', "this.src='../shared/css/images/img-document.png';"));
                 div.append(divImageContainer);
-                div.append($('<span/>').addClass('caption').text(name));
-                div.attr('data-rekall-labels', '');
-                div.attr('data-rekall-labels', labels.toLowerCase());
+                div.append($('<span/>')
+                    .addClass('caption')
+                    .text(name));
 
                 let divUpdater = {
                     div: div,
                     tag: tagOrDoc
                 };
                 divUpdater.update = function(tag){
-                    div.attr('data-rekall-labels', tag.getMetadata('Rekall->Labels') || '')
-                    computeLabelShowing(div, tag);
+                    setDivVisibilityForTag(div, tag);
                 }
                 divUpdater.remove = function () {
                     tagOrDoc.removeObserver(divUpdater);
                 }
                 divUpdater.computeVisibility = function (){
-                    computeLabelShowing(divUpdater.div, divUpdater.tag);
+                    setDivVisibilityForTag(divUpdater.div, divUpdater.tag);
                 }
                 tagOrDoc.addObserver(divUpdater);
                 localOptions._followedItems.push(divUpdater);
 
-                computeLabelShowing(div, tagOrDoc);
+                setDivVisibilityForTag(div, tagOrDoc);
 
                 return div;
             }
@@ -169,10 +184,10 @@
                         v.color, function () {
                             category.toggle();
                             $(this).toggleClass('mosaic_filter_disabled');
-                            localOptions.toggle_filter(categoryName)
+                            localOptions.toggle_filterType(categoryName)
                         },
                         '',
-                        localOptions._filters_to_hide.includes(categoryName)
+                        localOptions.filters_type_to_hide.includes(categoryName)
                     ));
 
                     for (let i in v.tags) {
@@ -184,34 +199,26 @@
 
                 labels.forEach(l => {
                     let button = $('<div/>').html(l);
-                    button.my_state = localOptions._filters_to_hide.includes(l.toLowerCase());
                     button.addClass('mosaic_filter_item mosaic_button mosaic_label_filter');
-                    if(button.my_state) {
+                    if(
+                        localOptions.filter_label_to_show.length
+                        && localOptions.filter_label_to_show.includes(l.toLowerCase())
+                    ) {
                         button.toggleClass('mosaic_label_filter_enabled');
                     }
+
                     button.click(ev => {
-                        ev.target.my_state = !ev.target.my_state;
-                        localOptions.toggle_filter(l.toLowerCase());
+                        toggleLabelToShow(l.toLowerCase());
                         $(ev.target).toggleClass('mosaic_label_filter_enabled');
-                        let labels = new Set();
-                        $('.mosaic_label_filter').toArray().forEach(f => {
-                            if (true === f.my_state)
-                                labels.add(f.innerText.toLowerCase());
-                        });
-                        if (!labels.size) {
-                            $('.mosaic_label_filter').toArray().forEach(f => {
-                                f.my_state = false;
-                                $(f).removeClass('mosaic_label_filter_enabled');
-                            });
-                        }
-                        console.debug('filters: ', labels);
+                        ev.target.my_state = !ev.target.my_state;
+                        console.debug('filters: ', localOptions.filter_label_to_show);
                         localOptions._followedItems.forEach(value => value.computeVisibility())
                     })
                     filterdiv.append(button);
                 });
             }
 
-            localOptions.toggle_filter = toggleSelectedFilter;
+            localOptions.toggle_filterType = toggleFilterType;
 
             return {
                 show: function () {
@@ -234,7 +241,7 @@
                     emptyPanel();
                     localOptions.isOpen = false;
                     localOptions._destroyFollowedElements();
-                    localOptions._filters_to_hide = [];
+                    localOptions.filters_type_to_hide = [];
                 },
                 refresh: function () {
                     emptyPanel();