commit 4fc0603: [Minor] Rework symbol description tooltips

[moisseev]

Author: moisseev
Date: 2021-06-17 19:19:13 +0300
URL: https://github.com/rspamd/rspamd/commit/4fc0603777c50df3783220316ba0e954baffb061

[Minor] Rework symbol description tooltips

---
 interface/js/app/history.js |  6 ------
 interface/js/app/rspamd.js  | 35 ++++++++++-------------------------
 interface/js/app/upload.js  |  1 -
 3 files changed, 10 insertions(+), 32 deletions(-)

diff --git a/interface/js/app/history.js b/interface/js/app/history.js
index 8feb527e1..3ab8d1d31 100644
--- a/interface/js/app/history.js
+++ b/interface/js/app/history.js
@@ -352,12 +352,6 @@ define(["jquery", "footable"],
                         if (Object.prototype.hasOwnProperty.call(tables, "history") &&
                             version === prevVersion) {
                             tables.history.rows.load(items);
-                            if (version) { // Non-legacy
-                                // Is there a way to get an event when all rows are loaded?
-                                rspamd.waitForRowsDisplayed("history", items.length, function () {
-                                    rspamd.drawTooltips();
-                                });
-                            }
                         } else {
                             rspamd.destroyTable("history");
                             // Is there a way to get an event when the table is destroyed?
diff --git a/interface/js/app/rspamd.js b/interface/js/app/rspamd.js
index 1679db1b3..a99cbd4fb 100644
--- a/interface/js/app/rspamd.js
+++ b/interface/js/app/rspamd.js
@@ -50,7 +50,6 @@ function ($, D3pie, visibility, NProgress, stickyTabs, tab_stat, tab_graph, tab_
     var timer_id = [];
     var locale = null;
     var selData = null; // Graph's dataset selector state
-    var symbolDescriptions = {};
 
     NProgress.configure({
         minimum: 0.01,
@@ -210,17 +209,6 @@ function ($, D3pie, visibility, NProgress, stickyTabs, tab_stat, tab_graph, tab_
         }, (id === "#autoRefresh") ? 0 : 1000);
     }
 
-    function drawTooltips() {
-        // Update symbol description tooltips
-        $.each(symbolDescriptions, function (key, description) {
-            $("abbr[data-sym-key=" + key + "]").tooltip({
-                placement: "bottom",
-                html: true,
-                title: description
-            });
-        });
-    }
-
     function getPassword() {
         return sessionStorage.getItem("Password");
     }
@@ -520,6 +508,12 @@ function ($, D3pie, visibility, NProgress, stickyTabs, tab_stat, tab_graph, tab_
             tabClick("#" + $("#navBar > ul > .nav-item > .nav-link.active").attr("id"));
         });
 
+        $("body").tooltip({
+            selector: ".symbol-default abbr[title]",
+            placement: "left",
+            html: true
+        });
+
         // Radio buttons
         $(document).on("click", "input:radio[name=\"clusterName\"]", function () {
             if (!this.disabled) {
@@ -764,7 +758,6 @@ function ($, D3pie, visibility, NProgress, stickyTabs, tab_stat, tab_graph, tab_
 
     // Scan and History shared functions
 
-    ui.drawTooltips = drawTooltips;
     ui.unix_time_format = unix_time_format;
     ui.set_page_size = set_page_size;
 
@@ -776,7 +769,6 @@ function ($, D3pie, visibility, NProgress, stickyTabs, tab_stat, tab_graph, tab_
                 var cell_val = sort_symbols(ui.symbols[table][i], compare_function);
                 row.cells[symbolsCol].val(cell_val, false, true);
             });
-            drawTooltips();
         }
 
         $("#selSymOrder_" + table).unbind().change(function () {
@@ -883,10 +875,6 @@ function ($, D3pie, visibility, NProgress, stickyTabs, tab_stat, tab_graph, tab_
                 filtering: FooTable.actionFilter
             },
             on: {
-                "ready.ft.table": drawTooltips,
-                "after.ft.sorting": drawTooltips,
-                "after.ft.paging": drawTooltips,
-                "after.ft.filtering": drawTooltips,
                 "expand.ft.row": function (e, ft, row) {
                     setTimeout(function () {
                         var detail_row = row.$el.next();
@@ -1020,18 +1008,15 @@ function ($, D3pie, visibility, NProgress, stickyTabs, tab_stat, tab_graph, tab_
                 }
 
                 rspamd.preprocess_item(rspamd, item);
-                Object.keys(item.symbols).forEach(function (key) {
-                    var sym = item.symbols[key];
+                Object.values(item.symbols).forEach(function (sym) {
                     sym.str = '<span class="symbol-default ' + get_symbol_class(sym.name, sym.score) + '"><strong>';
 
                     if (sym.description) {
-                        sym.str += '<abbr data-sym-key="' + key + '">' +
-                            sym.name + "</abbr></strong> (" + sym.score + ")</span>";
-                        // Store description for tooltip
-                        symbolDescriptions[key] = sym.description;
+                        sym.str += '<abbr title="' + sym.description + '">' + sym.name + "</abbr>";
                     } else {
-                        sym.str += sym.name + "</strong> (" + sym.score + ")</span>";
+                        sym.str += sym.name;
                     }
+                    sym.str += "</strong> (" + sym.score + ")</span>";
 
                     if (sym.options) {
                         sym.str += " [" + sym.options.join(",") + "]";
diff --git a/interface/js/app/upload.js b/interface/js/app/upload.js
index 936e223e4..88b7da423 100644
--- a/interface/js/app/upload.js
+++ b/interface/js/app/upload.js
@@ -148,7 +148,6 @@ define(["jquery"],
                             tables.scan.rows.load(items, true);
                             // Is there a way to get an event when all rows are loaded?
                             rspamd.waitForRowsDisplayed("scan", rows_total, function () {
-                                rspamd.drawTooltips();
                                 $("html, body").animate({
                                     scrollTop: $("#scanResult").offset().top
                                 }, 1000);