From 8c53663418c09a80bf30af910068b34d7653cc9d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rapha=C3=ABl=20Vinot?= Date: Thu, 6 Aug 2020 17:47:39 +0200 Subject: [PATCH] chg: Tooltips everywhere --- website/web/static/insecure.svg | 8 +++ website/web/static/secure.svg | 68 +++++++++++++++++++++++ website/web/static/tree.js | 57 ++++++++++++++++++- website/web/templates/hostname_popup.html | 8 +-- 4 files changed, 134 insertions(+), 7 deletions(-) create mode 100644 website/web/static/insecure.svg create mode 100644 website/web/static/secure.svg diff --git a/website/web/static/insecure.svg b/website/web/static/insecure.svg new file mode 100644 index 00000000..367a04c9 --- /dev/null +++ b/website/web/static/insecure.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/website/web/static/secure.svg b/website/web/static/secure.svg new file mode 100644 index 00000000..ace12eab --- /dev/null +++ b/website/web/static/secure.svg @@ -0,0 +1,68 @@ + + + + + + image/svg+xml + + + + + + + + + + + + diff --git a/website/web/static/tree.js b/website/web/static/tree.js index 0b5d4222..342301a1 100644 --- a/website/web/static/tree.js +++ b/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; diff --git a/website/web/templates/hostname_popup.html b/website/web/templates/hostname_popup.html index 44c315bd..8cf0cb6d 100644 --- a/website/web/templates/hostname_popup.html +++ b/website/web/templates/hostname_popup.html @@ -64,13 +64,9 @@
{# HTTPs or not #} {% if url['encrypted'] %} - - - + {% else %} - - - + {%endif%} {# URL #} ... /{{ shorten_string(url['url_path'], 50)}}