chg: Tooltips everywhere

website/web/static/insecure.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="120mm" height="120mm" viewBox="0 0 120 120">
+	<g transform="translate(-26.75,-84.183269)">
+		<rect width="95.25" height="52.916664" x="39.125" y="138.8916" style="fill:#787878;stroke:none" rx="2.2" ry="2.2"/>
+		<path d="m 118.5,140.21452 v -11.90626 c 0,-21.16667 -15.875,-31.749993 -31.75,-31.749993 -15.875,0 -31.75,10.583323 -31.75,31.749993 v 11.90626" style="fill:none;stroke:#787878;stroke-width:10"/>
+		<path d="M 49.708333,197.09993 118.5,91.266604" style="fill:none;stroke:#ff0000;stroke-width:10"/>
+	</g>
+</svg>

website/web/static/secure.svg

@@ -0,0 +1,68 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   width="120mm"
+   height="120mm"
+   viewBox="0 0 120 120"
+   id="svg10"
+   sodipodi:docname="secure.svg"
+   inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)">
+  <metadata
+     id="metadata16">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs14" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="640"
+     inkscape:window-height="480"
+     id="namedview12"
+     showgrid="false"
+     inkscape:zoom="0.52034722"
+     inkscape:cx="226.77165"
+     inkscape:cy="226.77165"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="g8" />
+  <g
+     transform="translate(-26.75,-84.183269)"
+     id="g8">
+    <rect
+       width="95.25"
+       height="52.916664"
+       x="39.125"
+       y="138.8916"
+       style="fill:#787878;stroke:none"
+       rx="2.2"
+       ry="2.2"
+       id="rect2" />
+    <path
+       d="m 118.5,140.21452 v -11.90626 c 0,-21.16667 -15.875,-31.749993 -31.75,-31.749993 -15.875,0 -31.75,10.583323 -31.75,31.749993 v 11.90626"
+       style="fill:none;stroke:#787878;stroke-width:10"
+       id="path4" />
+  </g>
+</svg>

website/web/static/tree.js

@@ -164,6 +164,17 @@ function UnflagAllNodes() {
         .text("🏁")
         .on('click', function(d) {
             PermanentNodeHighlight(d.data.uuid);
+        })
+        .on('mouseover', d => {
+            d3.select('#tooltip')
+                .style('opacity', 1)
+                .style('left', (d3.event.pageX+10) + 'px')
+                .style('top', (d3.event.pageY+10) + 'px')
+                .text('Flag this node for further analysis');
+        })
+        .on('mouseout', function() {
+            d3.select('#tooltip')
+                .style('opacity', 0);
         });
 };
 
@@ -174,6 +185,17 @@ function UnflagHostNode(hostnode_uuid) {
         .text("🏁")
         .on('click', function(d) {
             PermanentNodeHighlight(d.data.uuid);
+        })
+        .on('mouseover', d => {
+            d3.select('#tooltip')
+                .style('opacity', 1)
+                .style('left', (d3.event.pageX+10) + 'px')
+                .style('top', (d3.event.pageY+10) + 'px')
+                .text('Flag this node for further analysis');
+        })
+        .on('mouseout', function() {
+            d3.select('#tooltip')
+                .style('opacity', 0);
         });
 };
 
@@ -187,6 +209,17 @@ function PermanentNodeHighlight(hostnode_uuid) {
         .text('❌')
         .on('click', function(d) {
             UnflagHostNode(d.data.uuid);
+        })
+        .on('mouseover', d => {
+            d3.select('#tooltip')
+                .style('opacity', 1)
+                .style('left', (d3.event.pageX+10) + 'px')
+                .style('top', (d3.event.pageY+10) + 'px')
+                .text('Remove flag on this node');
+        })
+        .on('mouseout', function() {
+            d3.select('#tooltip')
+                .style('opacity', 0);
         });
 };
 
@@ -303,7 +336,18 @@ function text_entry(relative_x_pos, relative_y_pos, onclick_callback, d) {
 
     text_nodes
         .attr('cursor', 'pointer')
-        .on('click', onclick_callback);
+        .on('click', onclick_callback)
+        .on('mouseover', d => {
+            d3.select('#tooltip')
+                .style('opacity', 1)
+                .style('left', (d3.event.pageX+10) + 'px')
+                .style('top', (d3.event.pageY+10) + 'px')
+                .text('Open investigation pop-up.');
+        })
+        .on('mouseout', function() {
+            d3.select('#tooltip')
+                .style('opacity', 0);
+        });
     return nodeContent.node();
 }
 
@@ -433,6 +477,17 @@ function update(root, computed_node_width=0) {
                     .attr('cursor', 'pointer')
                     .on('click', function(d) {
                         PermanentNodeHighlight(d.data.uuid);
+                    })
+                    .on('mouseover', d => {
+                        d3.select('#tooltip')
+                            .style('opacity', 1)
+                            .style('left', (d3.event.pageX+10) + 'px')
+                            .style('top', (d3.event.pageY+10) + 'px')
+                            .text('Flag this node for further analysis');
+                    })
+                    .on('mouseout', function() {
+                        d3.select('#tooltip')
+                            .style('opacity', 0);
                     });
 
                 var icon_size = 24;

website/web/templates/hostname_popup.html

@@ -64,13 +64,9 @@
       <div class="h3" title={{ url['url_path'] }}>
         {# HTTPs or not  #}
         {% if url['encrypted'] %}
-        <svg class="bi bi-lock" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+        <img src="/static/secure.svg" title="Encrypted request" width="21" height="21"/>
-          <path fill-rule="evenodd" d="M11.5 8h-7a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1V9a1 1 0 0 0-1-1zm-7-1a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-7zm0-3a3.5 3.5 0 1 1 7 0v3h-1V4a2.5 2.5 0 0 0-5 0v3h-1V4z"/>
-        </svg>
         {% else %}
-        <svg class="bi bi-unlock" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+        <img src="/static/insecure.svg" title="Unencrypted request" width="21" height="21"/>
-          <path fill-rule="evenodd" d="M9.655 8H2.333c-.264 0-.398.068-.471.121a.73.73 0 0 0-.224.296 1.626 1.626 0 0 0-.138.59V14c0 .342.076.531.14.635.064.106.151.18.256.237a1.122 1.122 0 0 0 .436.127l.013.001h7.322c.264 0 .398-.068.471-.121a.73.73 0 0 0 .224-.296 1.627 1.627 0 0 0 .138-.59V9c0-.342-.076-.531-.14-.635a.658.658 0 0 0-.255-.237A1.122 1.122 0 0 0 9.655 8zm.012-1H2.333C.5 7 .5 9 .5 9v5c0 2 1.833 2 1.833 2h7.334c1.833 0 1.833-2 1.833-2V9c0-2-1.833-2-1.833-2zM8.5 4a3.5 3.5 0 1 1 7 0v3h-1V4a2.5 2.5 0 0 0-5 0v3h-1V4z"/>
-        </svg>
         {%endif%}
         {# URL #}
         ... /{{ shorten_string(url['url_path'], 50)}}