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

chg: make methods.

pull/14/merge
Raphaël Vinot 2018-02-01 01:16:20 +01:00
parent 8955c9c7f7
commit 6f31c2bce0
1 changed files with 152 additions and 136 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

214
lookyloo/static/tree.js
View File

@ -79,7 +79,7 @@ function getBB(selection) {
}
function urlnode_click(d) {
var url = "url/" + d['uuid'];
var url = "url/" + d.data.uuid;
d3.json(url, function(error, u) {
if (error) throw error;
console.log(u)
@ -97,6 +97,8 @@ function hostnode_click(d) {
.attr('id', 'overlay_' + d.data.uuid)
.attr("transform", "translate(" + 0 + "," + 0 + ")")
.call(d3.drag().on("drag", function(d, i) {
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
d.y += d3.event.dy
d3.select(this)
@ -121,14 +123,14 @@ function hostnode_click(d) {
if (error) throw error;
urls.forEach(function(url, index, array){
var jdata = JSON.parse(url)
overlay_hostname.datum({'data': jdata});
overlay_hostname.append('text')
.datum(jdata)
.attr("class", "urls_in_overlay_" + d.data.uuid)
.attr("url_uuid", jdata['uuid'])
.attr("dx", d.y + 20)
.attr("dy", d.x + 30 + (30 * index))
.attr("fill", "black")
.text(jdata['name'])
.text(function(d) { return d.data.name; })
.on('click', urlnode_click);
});
var urls_in_overlay = overlay_hostname.selectAll('text')
@ -143,104 +145,12 @@ function hostnode_click(d) {
});
}
// Recursiveluy generate the tree
function update(source) {
// reinitialize max_depth
var max_depth = 1
// Update height
// 50 is the height of a node, 500 is the minimum so the root node isn't behind the icon
var newHeight = Math.max(treemap(root).descendants().reverse().length * node_height, 10 * node_height);
treemap = d3.tree().size([newHeight, width]);
// Assigns the x and y position for the nodes
var treeData = treemap(root);
// Compute the new tree layout.
var nodes = treeData.descendants(),
links = treeData.descendants().slice(1);
// ****************** Nodes section ***************************
// Update the nodes...
// TODO: set that ID to the ete3 node ID
var node = node_container.selectAll('g.node')
.data(nodes, function(d) {return d.id || (d.id = ++i); });
// Enter any new modes at the parent's previous position.
var nodeEnter = node.enter().append('g')
.attr('class', 'node')
.attr("transform", function(d) {
return "translate(" + source.y0 + "," + source.x0 + ")";
});
// Add Circle for the nodes
nodeEnter.append('circle')
.attr('class', 'node')
.attr('r', 1e-6)
.style("fill", function(d) {
return d._children ? "lightsteelblue" : "#fff";
})
.on('click', click);
// Avoid hiding the content after the circle
var nodeContent = nodeEnter
.append('svg')
.attr('height',node_height)
.attr('x', 10)
.attr('y', -20);
// 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)
.text(function(d) {
d.data.total_width = 0; // reset total_width
return d.data.name;
})
.on('click', hostnode_click);
// This value has to be set once for all for the whole tree and cannot be updated
// on click as clicking only updates a part of the tree
if (node_width === 0) {
text_nodes.each(function(d) {
node_width = node_width > this.getBBox().width ? node_width : this.getBBox().width;
})
node_width += 20;
};
// Normalize for fixed-depth.
nodes.forEach(function(d){ d.y = d.depth * node_width});
// Update pattern
main_svg.selectAll('pattern')
.attr('width', node_width * 2)
pattern.selectAll('rect')
.attr('width', node_width)
// Update svg width
nodes.forEach(function(d){
if (d.children){
max_depth = d.depth > max_depth ? d.depth : max_depth;
}
});
var newWidth = Math.max((max_depth + 2) * node_width, node_width);
background.attr('height', newHeight + margin.top + margin.bottom)
background.attr('width', newWidth + margin.right + margin.left)
treemap.size([newHeight, newWidth])
d3.select("body svg")
.attr("width", newWidth + margin.right + margin.left)
.attr("height", newHeight + margin.top + margin.bottom)
function icon_list(parent_svg, relative_x_pos, relative_y_pos) {
// Put all the icone in one sub svg document
var icons = nodeEnter
var icons = parent_svg
.append('svg')
.attr('x', 10)
.attr('y', 12);
.attr('x', relative_x_pos)
.attr('y', relative_y_pos);
// Add JavaScript information
var jsContent = icons
@ -342,6 +252,112 @@ function update(source) {
.attr('x', function(d) { return d.data.total_width ? d.data.total_width + 1 : 0 })
.text(function(d) { return d.data.redirect_to_nothing; }).call(getBB);
}
function text_entry(parent_svg, relative_x_pos, relative_y_pos) {
// Avoid hiding the content after the circle
var nodeContent = parent_svg
.append('svg')
.attr('height',node_height)
.attr('x', relative_x_pos)
.attr('y', relative_y_pos);
// 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)
.text(function(d) {
d.data.total_width = 0; // reset total_width
return d.data.name;
})
.on('click', hostnode_click);
// This value has to be set once for all for the whole tree and cannot be updated
// on click as clicking only updates a part of the tree
if (node_width === 0) {
text_nodes.each(function(d) {
node_width = node_width > this.getBBox().width ? node_width : this.getBBox().width;
})
node_width += 20;
};
}
// Recursiveluy generate the tree
function update(source) {
// reinitialize max_depth
var max_depth = 1
// Update height
// 50 is the height of a node, 500 is the minimum so the root node isn't behind the icon
var newHeight = Math.max(treemap(root).descendants().reverse().length * node_height, 10 * node_height);
treemap = d3.tree().size([newHeight, width]);
// Assigns the x and y position for the nodes
var treeData = treemap(root);
// Compute the new tree layout.
var nodes = treeData.descendants(),
links = treeData.descendants().slice(1);
// ****************** Nodes section ***************************
// Update the nodes...
// TODO: set that ID to the ete3 node ID
var node = node_container.selectAll('g.node')
.data(nodes, function(d) {return d.id || (d.id = ++i); });
// Enter any new modes at the parent's previous position.
var nodeEnter = node.enter().append('g')
.attr('class', 'node')
.attr("transform", function(d) {
return "translate(" + source.y0 + "," + source.x0 + ")";
});
// Add Circle for the nodes
nodeEnter.append('circle')
.attr('class', 'node')
.attr('r', 1e-6)
.style("fill", function(d) {
return d._children ? "lightsteelblue" : "#fff";
})
.on('click', click);
// Set Hostname text
text_entry(nodeEnter, 10, -20);
// Set list of icons
icon_list(nodeEnter, 12, 10);
// Normalize for fixed-depth.
nodes.forEach(function(d){ d.y = d.depth * node_width});
// Update pattern
main_svg.selectAll('pattern')
.attr('width', node_width * 2)
pattern.selectAll('rect')
.attr('width', node_width)
// Update svg width
nodes.forEach(function(d){
if (d.children){
max_depth = d.depth > max_depth ? d.depth : max_depth;
}
});
// Re-compute SVG size depending on the generated tree
var newWidth = Math.max((max_depth + 2) * node_width, node_width);
background.attr('height', newHeight + margin.top + margin.bottom)
background.attr('width', newWidth + margin.right + margin.left)
treemap.size([newHeight, newWidth])
d3.select("body svg")
.attr("width", newWidth + margin.right + margin.left)
.attr("height", newHeight + margin.top + margin.bottom)
// UPDATE
var nodeUpdate = nodeEnter.merge(node);