CIRCL
/
lookyloo
mirror of https://github.com/CIRCL/lookyloo
2
0
Fork 0
Code Issues Releases Wiki Activity

new: Add tooltips to icons in tree

pull/145/head
Raphaël Vinot 2021-01-01 21:27:08 +01:00
parent 8a633a6c1c
commit 2fbf5d520f
1 changed files with 26 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
website/web/static/tree.js
View File

@ -207,20 +207,20 @@ function NodeHighlight(hostnode_uuid) {
function icon_list(relative_x_pos, relative_y_pos, d) { function icon_list(relative_x_pos, relative_y_pos, d) {
const icon_size = 16; const icon_size = 16;
const icon_options = new Map([ const icon_options = new Map([
['js', "/static/javascript.png"], ['js', {path: "/static/javascript.png", tooltip: "URL(s) loading Javascript"}],
['exe', "/static/exe.png"], ['exe', {path: "/static/exe.png", tooltip: "URL(s) loading executables"}],
['css', "/static/css.png"], ['css', {path: "/static/css.png", tooltip: "URL(s) loading CSS"}],
['font', "/static/font.png"], ['font', {path: "/static/font.png", tooltip: "URL(s) loading fonts"}],
['html', "/static/html.png"], ['html', {path: "/static/html.png", tooltip: "URL(s) loading HTML"}],
['json', "/static/json.png"], ['json', {path: "/static/json.png", tooltip: "URL(s) loading Json"}],
['iframe', "/static/ifr.png"], ['iframe', {path: "/static/ifr.png", tooltip: "URL(s) loaded from an Iframe"}],
['image', "/static/img.png"], ['image', {path: "/static/img.png", tooltip: "URL(s) loading images"}],
['unknown_mimetype', "/static/wtf.png"], ['unknown_mimetype', {path: "/static/wtf.png", tooltip: "URL(s) loading contents of an unknown type"}],
['video', "/static/video.png"], ['video', {path: "/static/video.png", tooltip: "URL(s) loading videos"}],
['request_cookie', "/static/cookie_read.png"], ['request_cookie', {path: "/static/cookie_read.png", tooltip: "cookie(s) sent to the server in the request"}],
['response_cookie', "/static/cookie_received.png"], ['response_cookie', {path: "/static/cookie_received.png", tooltip: "cookie(s) received in the response"}],
['redirect', "/static/redirect.png"], ['redirect', {path: "/static/redirect.png", tooltip: "redirect(s)"}],
['redirect_to_nothing', "/static/cookie_in_url.png"] ['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 // 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('y', relative_y_pos)
.attr('class', 'icons_list'); .attr('class', 'icons_list');
icon_options.forEach(function(icon_path, key) { icon_options.forEach(function(icon_details, key) {
let has_icon = false; let has_icon = false;
let counter = 0; let counter = 0;
if (typeof d.data[key] === 'boolean') { if (typeof d.data[key] === 'boolean') {
has_icon = d.data[key]; has_icon = d.data[key];
} else if (typeof d.data[key] === 'number') { } else if (typeof d.data[key] === 'number') {
has_icon = d.data[key] > 0; has_icon = d.data[key] > 0;
counter = d.data[key] counter = d.data[key];
} else if (d.data[key] instanceof Array) { } else if (d.data[key] instanceof Array) {
has_icon = d.data[key].length > 0; has_icon = d.data[key].length > 0;
counter = d.data[key].length counter = d.data[key].length;
}; };
if (has_icon) { if (has_icon) {
let icon_group = icons let icon_group = icons
@ -250,7 +250,15 @@ function icon_list(relative_x_pos, relative_y_pos, d) {
.append('image') .append('image')
.attr("width", icon_size) .attr("width", icon_size)
.attr("height", 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) { if (counter > 0) {
icon_group icon_group
.append('text') .append('text')