lookyloo/website/web/static/tree.js

578 lines
19 KiB
JavaScript
Raw Normal View History

2017-09-22 00:26:38 +02:00
// From : https://bl.ocks.org/d3noob/43a860bc0024792f8803bba8ca0d5ecd
// Set the dimensions and margins of the diagram
var margin = {top: 20, right: 200, bottom: 30, left: 90},
width = 960 - margin.left - margin.right,
height = 1000 - margin.top - margin.bottom;
2017-09-22 00:26:38 +02:00
2017-09-29 17:30:01 +02:00
var node_width = 0;
var max_overlay_width = 1500;
2018-06-29 08:03:52 +02:00
var default_max_overlay_height = 500;
var node_height = 55;
var t = d3.transition().duration(750);
2017-10-04 15:13:42 +02:00
2018-01-16 17:48:11 +01:00
var main_svg = d3.select("body").append("svg")
2017-09-25 11:23:32 +02:00
.attr("width", width + margin.right + margin.left)
.attr("height", height + margin.top + margin.bottom)
main_svg.append("clipPath")
.attr("id", "textOverlay")
.append("rect")
.attr('width', max_overlay_width - 25)
.attr('height', node_height);
2018-06-29 08:03:52 +02:00
main_svg.append("clipPath")
.attr("id", "overlayHeight")
.append("rect")
.attr('width', max_overlay_width)
.attr('height', default_max_overlay_height + 100);
2017-09-25 11:23:32 +02:00
// Add background pattern
2018-01-16 17:48:11 +01:00
var pattern = main_svg.append("defs").append('pattern')
2017-09-25 11:23:32 +02:00
.attr('id', 'backstripes')
.attr('x', margin.left)
2017-09-29 14:43:40 +02:00
.attr("width", node_width * 2)
2017-09-25 11:23:32 +02:00
.attr("height", 10)
.attr('patternUnits', "userSpaceOnUse" )
pattern.append('rect')
2017-09-29 14:43:40 +02:00
.attr('width', node_width)
2017-09-25 11:23:32 +02:00
.attr('height', height)
.attr("fill", "#EEEEEE");
2017-09-22 00:26:38 +02:00
// append the svg object to the body of the page
// appends a 'group' element to 'svg'
// moves the 'group' element to the top left margin
2018-01-16 17:48:11 +01:00
var node_container = main_svg
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
2017-09-22 00:26:38 +02:00
var i = 0,
duration = 750;
2017-09-22 00:26:38 +02:00
// Assigns parent, children, height, depth
var root = d3.hierarchy(treeData);
root.x0 = height / 2; // middle of the page
2017-09-22 00:26:38 +02:00
root.y0 = 0;
// declares a tree layout
var tree = d3.tree();
2017-09-22 00:26:38 +02:00
update(root);
// Collapse the node and all it's children
function collapse(d) {
if(d.children) {
d._children = d.children
d._children.forEach(collapse)
d.children = null
}
2018-02-06 01:23:00 +01:00
};
2017-09-22 00:26:38 +02:00
2018-01-16 18:06:43 +01:00
function urlnode_click(d) {
2018-04-09 11:16:22 +02:00
var url = "/tree/url/" + d.data.uuid;
2019-05-22 12:27:20 +02:00
d3.blob(url, {credentials: 'same-origin'}).then(data => {
2018-04-05 11:17:26 +02:00
saveAs(data, 'file.zip');
});
2018-02-23 18:45:12 +01:00
};
d3.selection.prototype.moveToFront = function() {
2019-05-22 12:27:20 +02:00
return this.each(function() {
2018-02-23 18:45:12 +01:00
this.parentNode.appendChild(this);
});
2018-02-06 01:23:00 +01:00
};
2017-10-04 15:13:42 +02:00
d3.selection.prototype.moveToBack = function() {
return this.each(function() {
var firstChild = this.parentNode.firstChild;
if (firstChild) {
this.parentNode.insertBefore(this, firstChild);
}
});
};
2018-01-16 17:48:11 +01:00
// What happen when clicking on a domain (load a modal display)
2017-10-04 15:13:42 +02:00
function hostnode_click(d) {
2018-02-23 18:45:12 +01:00
// Move the node to the front (end of the list)
var cur_node = d3.select("#node_" + d.data.uuid).moveToFront();
// Avoid duplicating overlays
cur_node.selectAll('.overlay').remove();
2018-01-16 17:48:11 +01:00
// Insert new svg element at this position
2018-02-23 18:45:12 +01:00
var overlay_hostname = cur_node.append('g')
.attr('class', 'overlay');
cur_node.append('line')
2018-04-05 22:59:45 +02:00
.attr('id', 'overlay_link')
.style("opacity", "0.95")
.attr("stroke-width", "2")
.style("stroke", "gray");
2018-02-23 18:45:12 +01:00
var top_margin = 15;
2018-04-05 22:59:45 +02:00
var overlay_header_height = 50;
2018-02-23 18:45:12 +01:00
var left_margin = 30;
overlay_hostname
2018-04-05 22:59:45 +02:00
.datum({x: 0, y: 0, overlay_uuid: d.data.uuid})
.attr('id', 'overlay_' + d.data.uuid)
2019-04-19 15:53:50 +02:00
.attr("transform", "translate(" + 10 + "," + 15 + ")")
.call(d3.drag().on("drag", function(d, i) {
2018-02-01 01:16:20 +01:00
if (typeof d.x === 'undefined') { d.x = 0; } // Any real JS dev would kill me fo that, right?
if (typeof d.y === 'undefined') { d.y = 0; } // Maybe even twice.
d.x += d3.event.dx
2018-01-16 17:48:11 +01:00
d.y += d3.event.dy
d3.select(this)
.attr("transform", "translate(" + d.x + "," + d.y + ")");
2018-04-05 22:59:45 +02:00
cur_node.select('#overlay_link')
2019-04-19 15:53:50 +02:00
.attr("x2", d.x + left_margin + 10)
.attr("y2", d.y + top_margin + 15);
}));
2018-01-16 17:48:11 +01:00
overlay_hostname.append('rect')
.attr("rx", 6)
.attr("ry", 6)
2018-02-23 18:45:12 +01:00
.attr('x', 15)
.attr('y', 10)
.style("opacity", "0.95")
.attr("stroke", "black")
.attr('stroke-opacity', "0.8")
.attr("stroke-width", "2")
.attr("stroke-linecap", "round")
.attr("fill", "white");
2018-01-16 17:48:11 +01:00
2017-10-04 15:13:42 +02:00
// Modal display
2018-01-16 17:48:11 +01:00
var url = "/tree/hostname/" + d.data.uuid;
2019-05-22 12:27:20 +02:00
d3.json(url, {credentials: 'same-origin'}).then(urls => {
overlay_hostname
.append('circle')
.attr('id', 'overlay_circle_' + d.data.uuid)
.attr('height', overlay_header_height)
.attr('cx', left_margin + 10)
.attr('cy', top_margin + 15)
2019-04-19 15:53:50 +02:00
.attr('r', 2);
2018-04-05 22:59:45 +02:00
overlay_hostname
.append('text')
.attr('id', 'overlay_close_' + d.data.uuid)
.attr('height', overlay_header_height)
2018-04-09 11:16:22 +02:00
.attr('x', left_margin + 500) // Value updated based on the size of the rectangle max: max_overlay_width
2018-04-05 22:59:45 +02:00
.attr('y', top_margin + 25)
2018-06-29 08:03:52 +02:00
.style("font-size", '30px')
2018-04-05 22:59:45 +02:00
.text('\u2716')
.attr('cursor', 'pointer')
2019-05-22 12:27:20 +02:00
.on("click", () => {
2018-04-05 22:59:45 +02:00
main_svg.selectAll('#overlay_' + d.data.uuid).remove();
cur_node.select('#overlay_link').remove();
}
);
overlay_hostname.append('line')
.attr('id', 'overlay_separator_header' + d.data.uuid)
2019-04-19 15:53:50 +02:00
.style("stroke", "black")
.style('stroke-width', "1px")
.attr('x1', 20)
2018-04-05 22:59:45 +02:00
.attr('y1', overlay_header_height)
.attr('x2', 500)
.attr('y2', overlay_header_height);
2018-06-29 08:03:52 +02:00
var url_entries = overlay_hostname.append('svg');
2018-02-01 23:58:26 +01:00
var interval_entries = 40;
2019-05-22 12:27:20 +02:00
urls.forEach((url, index, array) => {
2017-10-04 17:09:00 +02:00
var jdata = JSON.parse(url)
2018-06-29 08:03:52 +02:00
url_entries.datum({'data': jdata});
2019-05-17 16:59:56 +02:00
url_entries.append(d => text_entry(left_margin, top_margin + overlay_header_height + (interval_entries * index), urlnode_click, d));
url_entries.append(d => icon_list(left_margin + 5, top_margin + 20 + overlay_header_height + (interval_entries * index), d));
2018-01-16 17:48:11 +01:00
});
2018-06-29 08:03:52 +02:00
var overlay_bbox = overlay_hostname.node().getBBox()
overlay_hostname.append('line')
.attr('id', 'overlay_separator_footer' + d.data.uuid)
2019-04-19 15:53:50 +02:00
.style("stroke", "black")
.style('stroke-width', "1px")
.attr('x1', 20)
2018-06-29 08:03:52 +02:00
.attr('y1', overlay_bbox.height + 20)
.attr('x2', 500)
2018-06-29 08:03:52 +02:00
.attr('y2', overlay_bbox.height + 20);
2018-06-29 08:03:52 +02:00
var overlay_bbox = overlay_hostname.node().getBBox()
overlay_hostname
.append('text')
.attr('id', 'overlay_download_' + d.data.uuid)
.attr('height', overlay_header_height - 10)
.attr('x', left_margin)
2018-06-29 08:03:52 +02:00
.attr('y', overlay_bbox.height + overlay_header_height)
.style("font-size", '20px')
.text('Download URLs as text')
.attr('cursor', 'pointer')
2019-05-22 12:27:20 +02:00
.on("click", () => {
var url = "/tree/hostname/" + d.data.uuid + '/text';
2019-05-22 12:27:20 +02:00
d3.blob(url, {credentials: 'same-origin'}).then(data => {
saveAs(data, 'file.md');
});
});
2018-06-29 08:03:52 +02:00
var overlay_bbox = overlay_hostname.node().getBBox();
overlay_hostname.select('rect')
2019-05-22 12:27:20 +02:00
.attr('width', () => {
optimal_size = overlay_bbox.width + left_margin
return optimal_size < max_overlay_width ? optimal_size : max_overlay_width;
})
2018-06-29 08:03:52 +02:00
.attr('height', overlay_bbox.height + overlay_header_height);
2018-01-16 17:48:11 +01:00
2018-04-05 22:59:45 +02:00
overlay_hostname.select('#overlay_close_' + d.data.uuid)
2018-06-29 08:03:52 +02:00
.attr('x', overlay_hostname.select('rect').node().getBBox().width - 20);
2018-04-05 22:59:45 +02:00
overlay_hostname.select('#overlay_separator_header' + d.data.uuid)
2019-04-19 15:53:50 +02:00
.attr('x2', overlay_hostname.select('rect').node().getBBox().width + 10);
overlay_hostname.select('#overlay_separator_footer' + d.data.uuid)
2019-04-19 15:53:50 +02:00
.attr('x2', overlay_hostname.select('rect').node().getBBox().width + 10);
2018-04-05 22:59:45 +02:00
cur_node.select('#overlay_link')
.attr("x1", 10)
.attr("y1", 0)
.attr("x2", left_margin + 3)
.attr("y2", top_margin + 7);
2017-10-04 15:13:42 +02:00
});
2018-03-15 09:33:38 +01:00
};
2017-10-04 15:13:42 +02:00
2019-05-22 12:27:20 +02:00
function icon(key, icon_path, d, icon_size){
var iconContent = d3.create("svg") // WARNING: svg is required there, "g" doesn't have getBBox
2019-05-15 18:10:07 +02:00
.attr('class', 'icon');
var has_icon = false;
2018-02-01 23:58:26 +01:00
2019-05-15 18:10:07 +02:00
iconContent.datum(d);
iconContent.filter(d => {
2018-02-01 23:58:26 +01:00
if (typeof d.data[key] === 'boolean') {
has_icon = d.data[key];
2018-02-01 23:58:26 +01:00
} else if (typeof d.data[key] === 'number') {
has_icon = d.data[key] > 0;
2018-02-01 23:58:26 +01:00
} else if (d.data[key] instanceof Array) {
has_icon = d.data[key].length > 0;
2018-02-01 23:58:26 +01:00
}
return has_icon;
2018-02-01 23:58:26 +01:00
}).append('image')
.attr("width", icon_size)
.attr("height", icon_size)
.attr("xlink:href", icon_path);
2018-02-01 23:58:26 +01:00
2018-07-19 18:18:22 +02:00
iconContent.filter(d => {
2018-02-01 23:58:26 +01:00
if (typeof d.data[key] === 'boolean') {
return false;
// return d.data[key];
} else if (typeof d.data[key] === 'number') {
d.to_print = d.data[key]
return d.data[key] > 0;
} else if (d.data[key] instanceof Array) {
d.to_print = d.data[key].length
return d.data[key].length > 0;
}
return false;
}).append('text')
.attr("dy", 8)
2018-03-15 09:33:38 +01:00
.style("font-size", "10px")
.attr('x', icon_size + 1)
.text(d => d.to_print);
2019-05-15 18:10:07 +02:00
if (has_icon) {
return iconContent.node();
}
return false;
2018-02-01 23:58:26 +01:00
};
function icon_list(relative_x_pos, relative_y_pos, d) {
2019-05-22 12:27:20 +02:00
var icon_size = 16;
2018-02-01 01:16:20 +01:00
// Put all the icone in one sub svg document
var icons = d3.create("svg") // WARNING: svg is required there, "g" doesn't have getBBox
2018-02-01 01:16:20 +01:00
.attr('x', relative_x_pos)
.attr('y', relative_y_pos)
2019-05-15 18:10:07 +02:00
.datum(d);
icon_options = [
['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"]
];
nb_icons = 0
icon_options.forEach(entry => {
2019-05-22 12:27:20 +02:00
bloc = icon(entry[0], entry[1], d, icon_size);
2019-05-15 18:10:07 +02:00
if (bloc){
2019-05-22 12:27:20 +02:00
icons.append(() => bloc);
2019-05-15 18:10:07 +02:00
};
})
// FIXME: that need to move somewhere else, doesn't make sense here.
2019-05-22 12:27:20 +02:00
icons.filter(d => {
2018-07-19 18:18:22 +02:00
if (d.data.sane_js_details) {
2019-01-27 17:17:31 +01:00
d.libinfo = d.data.sane_js_details[0];
2018-07-19 18:18:22 +02:00
return d.data.sane_js_details;
}
return false;
}).append('text')
2019-05-22 12:27:20 +02:00
.attr('x', icon_size + 4)
.attr('y', relative_y_pos + 7)
2018-07-19 18:18:22 +02:00
.style("font-size", "15px")
2019-05-22 12:27:20 +02:00
.text(d => 'Library information: ' + d.libinfo);
return icons.node();
2018-02-01 01:16:20 +01:00
}
function text_entry(relative_x_pos, relative_y_pos, onclick_callback, d) {
2018-02-01 01:16:20 +01:00
// Avoid hiding the content after the circle
var nodeContent = d3.create("svg") // WARNING: svg is required there, "g" doesn't have getBBox
2018-04-05 22:59:45 +02:00
.attr('height', node_height)
2018-02-01 01:16:20 +01:00
.attr('x', relative_x_pos)
.attr('y', relative_y_pos)
2019-05-15 18:10:07 +02:00
.datum(d);
2018-02-01 01:16:20 +01:00
// Add labels for the nodes
var text_nodes = nodeContent.append("text")
.attr('dy', '.9em')
.attr("stroke", "white")
.style("font-size", "16px")
.attr("stroke-width", ".2px")
.style("opacity", .9)
.attr("clip-path", "url(#textOverlay)")
2019-05-17 16:59:56 +02:00
.text(d => {
if (d.data.urls_count) {
return d.data.name + ' (' + d.data.urls_count + ')'
}
return d.data.name
});
if (d.data.name != 'orphan.url'){
text_nodes
.attr('cursor', 'pointer')
.on('click', onclick_callback);
};
return nodeContent.node();
2018-02-01 01:16:20 +01:00
}
// Recursively generate the tree
function update(root, computed_node_width=0) {
2017-09-22 00:26:38 +02:00
// Current height of the tree (cannot use height because it isn't recomputed when we rename children -> _children)
2017-09-29 14:43:40 +02:00
var max_depth = 1
root.each(d => {
if (d.children){
max_depth = d.depth > max_depth ? d.depth : max_depth;
}
});
2017-09-29 14:43:40 +02:00
if (computed_node_width != 0) {
computed_node_width += 30;
// Re-compute SVG size depending on the generated tree
var newWidth = Math.max((max_depth + 1) * computed_node_width, node_width);
// Update height
// node_height is the height of a node, node_height * 10 is the minimum so the root node isn't behind the lookyloo icon
var newHeight = Math.max(root.descendants().reverse().length * node_height, 10 * node_height);
tree.size([newHeight, newWidth])
// Set background based on the computed width and height
var background = main_svg.insert('rect', ':first-child')
.attr('y', 0)
2019-05-15 18:10:07 +02:00
// FIXME: + 200 doesn't make much sense...
.attr('width', newWidth + margin.right + margin.left + 200)
.attr('height', newHeight + margin.top + margin.bottom)
.style('fill', "url(#backstripes)");
2019-05-15 18:10:07 +02:00
// Update size
d3.select("body svg")
2019-05-15 18:10:07 +02:00
// FIXME: + 200 doesn't make much sense...
.attr("width", newWidth + margin.right + margin.left + 200)
.attr("height", newHeight + margin.top + margin.bottom)
// Update pattern
main_svg.selectAll('pattern')
2019-05-15 18:10:07 +02:00
.attr('width', computed_node_width * 2)
pattern.selectAll('rect')
.attr('width', computed_node_width)
2017-09-29 14:43:40 +02:00
}
2017-09-22 00:26:38 +02:00
// Assigns the x and y position for the nodes
var treemap = tree(root);
2017-09-22 00:26:38 +02:00
// Compute the new tree layout. => Note: Need d.x & d.y
var nodes = treemap.descendants(),
links = treemap.descendants().slice(1);
2017-09-22 00:26:38 +02:00
// ****************** Nodes section ***************************
// Update the nodes...
const tree_nodes = node_container.selectAll('g.node')
.data(nodes, node => node.data.uuid);
tree_nodes.join(
// Enter any new modes at the parent's previous position.
enter => {
2019-05-15 18:10:07 +02:00
var node_group = enter.append('g')
.attr('class', 'node')
.attr("id", d => 'node_' + d.data.uuid)
.attr("transform", "translate(" + root.y0 + "," + root.x0 + ")")
2019-05-15 18:10:07 +02:00
node_group
// Add Circle for the nodes
.append('circle')
.attr('class', 'node')
.attr('r', 1e-6)
.style("fill", d => d._children ? "lightsteelblue" : "#fff")
.on('click', click);
2019-05-15 18:10:07 +02:00
var node_data = node_group
.append('svg')
.attr('class', 'node_data')
.attr('x', 0)
2019-05-15 18:10:07 +02:00
.attr('y', -30);
node_data.append('rect')
.attr("rx", 6)
.attr("ry", 6)
.attr('x', 12)
2019-05-15 18:10:07 +02:00
.attr('y', 0)
.style("opacity", "0.5")
.attr("stroke", d => {
2019-06-25 16:49:15 +02:00
if (d.data.http_content){
return "red";
}
return "black";
})
2019-05-15 18:10:07 +02:00
.attr('stroke-opacity', "0.8")
.attr("stroke-width", d => {
2019-06-25 16:49:15 +02:00
if (d.data.http_content){
return "4";
}
return "2";
})
2019-05-15 18:10:07 +02:00
.attr("stroke-linecap", "round")
.attr("fill", "white");
// Set Hostname text
2019-05-15 18:10:07 +02:00
node_data
.append(d => text_entry(15, 5, hostnode_click, d));
// Set list of icons
2019-05-15 18:10:07 +02:00
node_data
.append(d => icon_list(17, 35, d));
2019-05-15 18:10:07 +02:00
node_group.select('.node_data').each(function(p, j){
2019-05-22 12:27:20 +02:00
// set position of icons based of their length
var cur_icon_list_len = 0;
d3.select(this).selectAll('.icon').each(function(p, j){
d3.select(this).attr('x', cur_icon_list_len);
cur_icon_list_len += d3.select(this).node().getBBox().width;
});
2019-05-15 18:10:07 +02:00
2019-05-22 12:27:20 +02:00
// Rectangle around the domain name & icons
var selected_node_bbox = d3.select(this).node().getBBox();
2019-05-22 12:27:20 +02:00
d3.select(this).select('rect')
.attr('height', selected_node_bbox.height + 15)
.attr('width', selected_node_bbox.width + 50);
// Set the width for all the nodes
2019-05-22 12:27:20 +02:00
var selected_node_bbox = d3.select(this).node().getBBox(); // Required, as the node width need to include the rectangle
node_width = node_width > selected_node_bbox.width ? node_width : selected_node_bbox.width;
});
return node_group;
},
update => update,
exit => exit
2019-05-17 16:59:56 +02:00
.transition(t)
// Remove any exiting nodes
.attr("transform", node => "translate(" + node.y0 + "," + node.x0 + ")")
// On exit reduce the node circles size to 0
.attr('r', 1e-6)
// On exit reduce the opacity of text labels
.style('fill-opacity', 1e-6)
.remove()
).call(node => {
2019-05-17 16:59:56 +02:00
node
// Transition to the proper position for the node
.attr("transform", node => "translate(" + node.y + "," + node.x + ")")
// Update the node attributes and style
.select('circle.node')
.attr('r', 10)
.style("fill", node => node._children ? "lightsteelblue" : "#fff")
.attr('cursor', 'pointer');
2019-05-15 18:10:07 +02:00
2017-10-04 15:13:42 +02:00
});
2017-09-22 00:26:38 +02:00
nodes.forEach(d => {
// Store the old positions for transition.
d.x0 = d.x;
d.y0 = d.y;
2017-09-29 14:43:40 +02:00
});
2018-02-01 01:16:20 +01:00
2017-09-22 00:26:38 +02:00
// ****************** links section ***************************
// Update the links...
const link = node_container.selectAll('path.link')
.data(links, d => d.id);
link.join(
enter => enter
// Enter any new links at the parent's previous position.
.insert('path', "g")
.attr("class", "link")
.attr('d', d => {
2019-05-17 16:59:56 +02:00
var o = {x: d.x0, y: d.y0}
return diagonal(o, o)
}),
update => update,
exit => exit
.call(exit => exit
.attr('d', d => {
2019-05-17 16:59:56 +02:00
var o = {x: d.x0, y: d.y0}
return diagonal(o, o)
})
.remove()
)
).call(link => link
.attr('d', d => diagonal(d, d.parent))
);
2017-09-22 00:26:38 +02:00
// Creates a curved (diagonal) path from parent to the child nodes
function diagonal(s, d) {
path = `M ${s.y} ${s.x}
C ${(s.y + d.y) / 2} ${s.x},
${(s.y + d.y) / 2} ${d.x},
${d.y} ${d.x}`
return path
}
// Toggle children on click.
function click(d) {
if (d.children) {
d._children = d.children;
d.children = null;
}
else {
2017-09-22 00:26:38 +02:00
d.children = d._children;
d._children = null;
}
2019-05-15 18:10:07 +02:00
// Call update on the whole Tree
update(d.ancestors().reverse()[0]);
}
if (computed_node_width === 0) {
update(root, node_width)
2017-09-22 00:26:38 +02:00
}
}