Fix sort tag labels before display

capsule-prototype/js/MosaicPanelWidget.js

@@ -2,11 +2,11 @@
         function MosaicPanelWidget() {
             const defaultOptions = {
                 getTagGradientColor: function (tag) {
-                    var isOpera = !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;  // Opera 8.0+ (UA detection to detect Blink/v8-powered Opera)
-                    var isFirefox = typeof InstallTrigger !== 'undefined';   // Firefox 1.0+
-                    var isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0;   // At least Safari 3+: "[object HTMLElementConstructor]"
-                    var isChrome = !!window.chrome && !isOpera;              // Chrome 1+
-                    var isIE = /*@cc_on!@*/false || !!document.documentMode; // At least IE6
+                    let isOpera = !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;  // Opera 8.0+ (UA detection to detect Blink/v8-powered Opera)
+                    let isFirefox = typeof InstallTrigger !== 'undefined';   // Firefox 1.0+
+                    let isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0;   // At least Safari 3+: "[object HTMLElementConstructor]"
+                    let isChrome = !!window.chrome && !isOpera;              // Chrome 1+
+                    // var isIE = /*@cc_on!@*/false || !!document.documentMode; // At least IE6
 
                     if (isOpera) {
                         return "-o-linear-gradient(right bottom,  rgba(20,46,51,1) 0%, " + tag.color + " 100%)";
@@ -19,9 +19,12 @@
                     }
                 },
                 getPreviewPath: function (tagOrDoc) {
-                    Utils.getPreviewPath(tagOrDoc);
+                    // eslint-disable-next-line no-undef
+                    return Utils.getPreviewPath(tagOrDoc);
+                },
+                htmlElement: function () {
+                    return $('#mosaic_tab')
                 },
-                htmlElement: function() { return $('#mosaic_tab') },
                 isOpen: false,
                 pubsub: function () {
                     return app.rekall.Rekall('pubSub');
@@ -105,9 +108,8 @@
                 });
                 let divImageContainer = $('<div>').addClass('mosaic_item_thumbnail_container');
                 divImageContainer
-                        .append($('<img/>')
+                    .append($('<img src="'+url+'" alt="thumbnail image"/>')
                         .addClass('mosaic_item_thumbnail_container_img')
-                        .attr('src', url)
                         .attr('onerror', "this.src='../shared/css/images/img-document.png';"));
                 div.append(divImageContainer);
                 div.append($('<span/>')
@@ -169,8 +171,8 @@
                 ));
                 localOptions.htmlElement().append(typefilterdiv);
                 localOptions.htmlElement().append(labelsfilterdiv);
+                // eslint-disable-next-line no-undef
                 let labels = new Set();
-                // TODO is there a better way to iterate over tags or documents ?
                 for (let [k, v] of Object.entries(localOptions.rekall().sortings.colors.categories)) {
                     let categoryName = localOptions.rekall().sortings.colors.getCategoryName(k)
                     let category = $('<div/>').addClass('mosaic_category').css('background', localOptions.getTagGradientColor(v));
@@ -198,7 +200,11 @@
                     localOptions.htmlElement().append(category);
                 }
 
-                labels.forEach(l => {
+                Array.from(labels)
+                    .sort(function (a, b) {
+                        return a.toLowerCase().localeCompare(b.toLowerCase());
+                    })
+                    .forEach(l => {
                         let button = $('<div/>').html(l);
                         button.addClass('mosaic_filter_item mosaic_button mosaic_label_filter');
                         if (