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

new: Link to URL overlay

pull/14/merge
Raphaël Vinot 2018-02-23 18:45:12 +01:00
parent 510c35b57f
commit 22f1474120
1 changed files with 49 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
lookyloo/static/tree.js
View File

@ -101,11 +101,29 @@ function urlnode_click(d) {
xhr.send(); xhr.send();
}; };
d3.selection.prototype.moveToFront = function() {
return this.each(function(){
this.parentNode.appendChild(this);
});
};
// What happen when clicking on a domain (load a modal display) // What happen when clicking on a domain (load a modal display)
function hostnode_click(d) { function hostnode_click(d) {
// 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();
// Insert new svg element at this position // Insert new svg element at this position
var overlay_hostname = main_svg.select("g") var overlay_hostname = cur_node.append('g')
.append('g').attr('class', 'overlay'); .attr('class', 'overlay');
cur_node.append('line')
.attr('class', 'overlay')
.style("stroke", "black");
var top_margin = 15;
var left_margin = 30;
overlay_hostname overlay_hostname
.datum({x: 0, y: 0}) .datum({x: 0, y: 0})
.attr('id', 'overlay_' + d.data.uuid) .attr('id', 'overlay_' + d.data.uuid)
@ -117,13 +135,16 @@ function hostnode_click(d) {
d.y += d3.event.dy d.y += d3.event.dy
d3.select(this) d3.select(this)
.attr("transform", "translate(" + d.x + "," + d.y + ")"); .attr("transform", "translate(" + d.x + "," + d.y + ")");
cur_node.select('line')
.attr("x2", d.x + top_margin)
.attr("y2", d.y + left_margin);
})); }));
overlay_hostname.append('rect') overlay_hostname.append('rect')
.attr("rx", 6) .attr("rx", 6)
.attr("ry", 6) .attr("ry", 6)
.attr('x', d.y + 15) .attr('x', 15)
.attr('y', d.x + 10) .attr('y', 10)
.style("opacity", "0.95") .style("opacity", "0.95")
.attr("stroke", "black") .attr("stroke", "black")
.attr('stroke-opacity', "0.8") .attr('stroke-opacity', "0.8")
@ -134,22 +155,26 @@ function hostnode_click(d) {
// Modal display // Modal display
var url = "/tree/hostname/" + d.data.uuid; var url = "/tree/hostname/" + d.data.uuid;
d3.json(url, function(error, urls) { d3.json(url, function(error, urls) {
var top_margin = 15;
var left_margin = 30;
var interval_entries = 40; var interval_entries = 40;
if (error) throw error; if (error) throw error;
urls.forEach(function(url, index, array){ urls.forEach(function(url, index, array){
var jdata = JSON.parse(url) var jdata = JSON.parse(url)
overlay_hostname.datum({'data': jdata}); overlay_hostname.datum({'data': jdata});
var text_node = text_entry(overlay_hostname, d.y + left_margin, d.x + top_margin + (interval_entries * index), urlnode_click); var text_node = text_entry(overlay_hostname, left_margin, top_margin + (interval_entries * index), urlnode_click);
height_text = text_node.node().getBBox().height height_text = text_node.node().getBBox().height;
icon_list(overlay_hostname, d.y + left_margin + 5, d.x + top_margin + height_text + (interval_entries * index)); icon_list(overlay_hostname, left_margin + 5, top_margin + height_text + (interval_entries * index));
}); });
overlay_bbox = overlay_hostname.node().getBBox() overlay_bbox = overlay_hostname.node().getBBox();
console.log(overlay_bbox);
overlay_hostname.select('rect') overlay_hostname.select('rect')
.attr('width', overlay_bbox.width + left_margin) .attr('width', overlay_bbox.width + left_margin)
.attr('height', overlay_bbox.height + top_margin); .attr('height', overlay_bbox.height + top_margin);
cur_node.select('line')
.attr("x1", cur_node.x)
.attr("y1", cur_node.y)
.attr("x2", top_margin)
.attr("y2", left_margin);
}); });
} }
@ -240,7 +265,6 @@ function text_entry(parent_svg, relative_x_pos, relative_y_pos, onclick_callback
node_width += 20; node_width += 20;
}; };
return text_nodes; return text_nodes;
} }
// Recursiveluy generate the tree // Recursiveluy generate the tree
@ -272,6 +296,9 @@ function update(source) {
// Enter any new modes at the parent's previous position. // Enter any new modes at the parent's previous position.
var nodeEnter = node.enter().append('g') var nodeEnter = node.enter().append('g')
.attr('class', 'node') .attr('class', 'node')
.attr("id", function(d) {
return 'node_' + d.data.uuid;
})
.attr("transform", function(d) { .attr("transform", function(d) {
return "translate(" + source.y0 + "," + source.x0 + ")"; return "translate(" + source.y0 + "," + source.x0 + ")";
}); });