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

chg: Add square around nodes data

pull/42/head
Raphaël Vinot 2019-05-15 18:10:07 +02:00
parent 296432a096
commit bf506b3f87
1 changed files with 85 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -350,8 +350,8 @@ function text_entry(relative_x_pos, relative_y_pos, onclick_callback, d) {
.style("opacity", .9)
.attr('cursor', 'pointer')
.attr("clip-path", "url(#textOverlay)")
.text(d.data.name + ' (' + d.data.urls_count + ')')
.on('click',onclick_callback);
.text(d.data.name + ' (' + d.data.urls_count + ')');
// .on('click',onclick_callback);
return nodeContent.node();
}
@ -412,35 +412,57 @@ function update(root, computed_node_width=0) {
tree_nodes.join(
// Enter any new modes at the parent's previous position.
enter => {
var node_group = enter.append('g');
node_group
var node_group = enter.append('g')
.attr('class', 'node')
.attr("id", d => 'node_' + d.data.uuid)
.attr("transform", "translate(" + root.y0 + "," + root.x0 + ")")
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);
// Rectangle around the domain name & icons
//.append('rect')
//.attr("rx", 6)
//.attr("ry", 6)
//.attr('x', 13)
//.attr('y', -23)
//.style("opacity", "0.5")
//.attr("stroke", "black")
//.attr('stroke-opacity', "0.8")
//.attr("stroke-width", "1.5")
//.attr("stroke-linecap", "round")
//.attr("fill", "white")
var node_data = node_group
.append('svg')
.attr('class', 'node_data')
.attr('x', 12)
.attr('y', -30);
node_data.append('rect')
.attr("rx", 6)
.attr("ry", 6)
.attr('x', 0)
.attr('y', 0)
.style("opacity", "0.5")
.attr("stroke", "black")
.attr('stroke-opacity', "0.8")
.attr("stroke-width", "2")
.attr("stroke-linecap", "round")
.attr("fill", "white");
// Set Hostname text
node_group
.append(d => text_entry(15, -20, hostnode_click, d));
node_data
.append(d => text_entry(2, 5, hostnode_click, d));
// Set list of icons
node_group
.append(d => icon_list(17, 10, d));
node_data
.append(d => icon_list(4, 35, d));
node_group.select('.node_data').each(function(p, j){
selected_node_bbox = d3.select(this).node().getBBox();
// Set the width for all the nodes
node_width = node_width > selected_node_bbox.width ? node_width : selected_node_bbox.width;
d3.select(this).select('rect')
// Rectangle around the domain name & icons
.attr('height', selected_node_bbox.height + 15)
.attr('width', selected_node_bbox.width + 20);
});
// FIXME: should get the bbox of the whole node group
node_width += 50;
return node_group;
},
@ -464,12 +486,7 @@ function update(root, computed_node_width=0) {
.attr('r', 10)
.style("fill", node => node._children ? "lightsteelblue" : "#fff")
.attr('cursor', 'pointer');
node.selectAll('text').nodes().forEach(n => {
// Set the width for all the nodes
node_width = node_width > n.getBBox().width ? node_width : n.getBBox().width;
});
// FIXME: should get the bbox of the whole node group
node_width += 30;
});
nodes.forEach(d => {