From 2fbf5d520fa450e06ea75c338a7d10270af8bc68 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rapha=C3=ABl=20Vinot?= <raphael@vinot.info>
Date: Fri, 1 Jan 2021 21:27:08 +0100
Subject: [PATCH] new: Add tooltips to icons in tree

---
 website/web/static/tree.js | 44 ++++++++++++++++++++++----------------
 1 file changed, 26 insertions(+), 18 deletions(-)

diff --git a/website/web/static/tree.js b/website/web/static/tree.js
index c8dd8385..eae11e4b 100644
--- a/website/web/static/tree.js
+++ b/website/web/static/tree.js
@@ -207,20 +207,20 @@ function NodeHighlight(hostnode_uuid) {
 function icon_list(relative_x_pos, relative_y_pos, d) {
     const icon_size = 16;
     const icon_options = new Map([
-        ['js', "/static/javascript.png"],
-        ['exe', "/static/exe.png"],
-        ['css', "/static/css.png"],
-        ['font', "/static/font.png"],
-        ['html', "/static/html.png"],
-        ['json', "/static/json.png"],
-        ['iframe', "/static/ifr.png"],
-        ['image', "/static/img.png"],
-        ['unknown_mimetype', "/static/wtf.png"],
-        ['video', "/static/video.png"],
-        ['request_cookie', "/static/cookie_read.png"],
-        ['response_cookie', "/static/cookie_received.png"],
-        ['redirect', "/static/redirect.png"],
-        ['redirect_to_nothing', "/static/cookie_in_url.png"]
+        ['js', {path: "/static/javascript.png", tooltip: "URL(s) loading Javascript"}],
+        ['exe', {path: "/static/exe.png", tooltip: "URL(s) loading executables"}],
+        ['css', {path: "/static/css.png", tooltip: "URL(s) loading CSS"}],
+        ['font', {path: "/static/font.png", tooltip: "URL(s) loading fonts"}],
+        ['html', {path: "/static/html.png", tooltip: "URL(s) loading HTML"}],
+        ['json', {path: "/static/json.png", tooltip: "URL(s) loading Json"}],
+        ['iframe', {path: "/static/ifr.png", tooltip: "URL(s) loaded from an Iframe"}],
+        ['image', {path: "/static/img.png", tooltip: "URL(s) loading images"}],
+        ['unknown_mimetype', {path: "/static/wtf.png", tooltip: "URL(s) loading contents of an unknown type"}],
+        ['video', {path: "/static/video.png", tooltip: "URL(s) loading videos"}],
+        ['request_cookie', {path: "/static/cookie_read.png", tooltip: "cookie(s) sent to the server in the request"}],
+        ['response_cookie', {path: "/static/cookie_received.png", tooltip: "cookie(s) received in the response"}],
+        ['redirect', {path: "/static/redirect.png", tooltip: "redirect(s)"}],
+        ['redirect_to_nothing', {path: "/static/cookie_in_url.png", tooltip: "redirect(s) to URL(s) missing in the capture"}]
     ]);
 
     // Put all the icone in one sub svg document
@@ -229,17 +229,17 @@ function icon_list(relative_x_pos, relative_y_pos, d) {
           .attr('y', relative_y_pos)
           .attr('class', 'icons_list');
 
-    icon_options.forEach(function(icon_path, key) {
+    icon_options.forEach(function(icon_details, key) {
         let has_icon = false;
         let counter = 0;
         if (typeof d.data[key] === 'boolean') {
           has_icon = d.data[key];
         } else if (typeof d.data[key] === 'number') {
           has_icon = d.data[key] > 0;
-          counter = d.data[key]
+          counter = d.data[key];
         } else if (d.data[key] instanceof Array) {
           has_icon = d.data[key].length > 0;
-          counter = d.data[key].length
+          counter = d.data[key].length;
         };
         if (has_icon) {
           let icon_group = icons
@@ -250,7 +250,15 @@ function icon_list(relative_x_pos, relative_y_pos, d) {
               .append('image')
               .attr("width", icon_size)
               .attr("height", icon_size)
-              .attr("xlink:href", icon_path);
+              .attr("xlink:href", icon_details.path)
+              .on('mouseover', (event, d) => {
+                  d3.select('#tooltip')
+                      .style('opacity', 1)
+                      .style('left', `${event.pageX + 10}px`)
+                      .style('top', `${event.pageY + 10}px`)
+                      .text(`${counter} ${icon_details.tooltip}`);
+              })
+              .on('mouseout', (event, d) => d3.select('#tooltip').style('opacity', 0));
           if (counter > 0) {
             icon_group
                 .append('text')