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

chg: Make the icon list dynamic

pull/62/head
Raphaël Vinot 2019-05-22 12:27:20 +02:00
parent bcce9f5eba
commit 92e4eecd08
1 changed files with 29 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -71,13 +71,13 @@ function collapse(d) {
function urlnode_click(d) { function urlnode_click(d) {
var url = "/tree/url/" + d.data.uuid; var url = "/tree/url/" + d.data.uuid;
d3.blob(url, {credentials: 'same-origin'}).then(function(data) { d3.blob(url, {credentials: 'same-origin'}).then(data => {
saveAs(data, 'file.zip'); saveAs(data, 'file.zip');
}); });
}; };
d3.selection.prototype.moveToFront = function() { d3.selection.prototype.moveToFront = function() {
return this.each(function(){ return this.each(function() {
this.parentNode.appendChild(this); this.parentNode.appendChild(this);
}); });
}; };
@ -141,7 +141,7 @@ 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, {credentials: 'same-origin'}).then(function(urls) { d3.json(url, {credentials: 'same-origin'}).then(urls => {
overlay_hostname overlay_hostname
.append('circle') .append('circle')
.attr('id', 'overlay_circle_' + d.data.uuid) .attr('id', 'overlay_circle_' + d.data.uuid)
@ -159,7 +159,7 @@ function hostnode_click(d) {
.style("font-size", '30px') .style("font-size", '30px')
.text('\u2716') .text('\u2716')
.attr('cursor', 'pointer') .attr('cursor', 'pointer')
.on("click", function() { .on("click", () => {
main_svg.selectAll('#overlay_' + d.data.uuid).remove(); main_svg.selectAll('#overlay_' + d.data.uuid).remove();
cur_node.select('#overlay_link').remove(); cur_node.select('#overlay_link').remove();
} }
@ -177,7 +177,7 @@ function hostnode_click(d) {
var url_entries = overlay_hostname.append('svg'); var url_entries = overlay_hostname.append('svg');
var interval_entries = 40; var interval_entries = 40;
urls.forEach(function(url, index, array) { urls.forEach((url, index, array) => {
var jdata = JSON.parse(url) var jdata = JSON.parse(url)
url_entries.datum({'data': jdata}); url_entries.datum({'data': jdata});
url_entries.append(d => text_entry(left_margin, top_margin + overlay_header_height + (interval_entries * index), urlnode_click, d)); url_entries.append(d => text_entry(left_margin, top_margin + overlay_header_height + (interval_entries * index), urlnode_click, d));
@ -204,16 +204,16 @@ function hostnode_click(d) {
.style("font-size", '20px') .style("font-size", '20px')
.text('Download URLs as text') .text('Download URLs as text')
.attr('cursor', 'pointer') .attr('cursor', 'pointer')
.on("click", function() { .on("click", () => {
var url = "/tree/hostname/" + d.data.uuid + '/text'; var url = "/tree/hostname/" + d.data.uuid + '/text';
d3.blob(url, {credentials: 'same-origin'}).then(function(data) { d3.blob(url, {credentials: 'same-origin'}).then(data => {
saveAs(data, 'file.md'); saveAs(data, 'file.md');
}); });
}); });
var overlay_bbox = overlay_hostname.node().getBBox(); var overlay_bbox = overlay_hostname.node().getBBox();
overlay_hostname.select('rect') overlay_hostname.select('rect')
.attr('width', function() { .attr('width', () => {
optimal_size = overlay_bbox.width + left_margin optimal_size = overlay_bbox.width + left_margin
return optimal_size < max_overlay_width ? optimal_size : max_overlay_width; return optimal_size < max_overlay_width ? optimal_size : max_overlay_width;
}) })
@ -236,10 +236,9 @@ function hostnode_click(d) {
}); });
}; };
function icon(key, icon_path, d){ function icon(key, icon_path, d, icon_size){
var iconContent = d3.create("svg") // WARNING: svg is required there, "g" doesn't have getBBox var iconContent = d3.create("svg") // WARNING: svg is required there, "g" doesn't have getBBox
.attr('class', 'icon'); .attr('class', 'icon');
var icon_size = 16;
var has_icon = false; var has_icon = false;
iconContent.datum(d); iconContent.datum(d);
@ -274,7 +273,6 @@ function icon(key, icon_path, d){
.attr("dy", 8) .attr("dy", 8)
.style("font-size", "10px") .style("font-size", "10px")
.attr('x', icon_size + 1) .attr('x', icon_size + 1)
.attr('width', d => d.to_print.toString().length + 'em')
.text(d => d.to_print); .text(d => d.to_print);
if (has_icon) { if (has_icon) {
return iconContent.node(); return iconContent.node();
@ -283,6 +281,8 @@ function icon(key, icon_path, d){
}; };
function icon_list(relative_x_pos, relative_y_pos, d) { function icon_list(relative_x_pos, relative_y_pos, d) {
var icon_size = 16;
// Put all the icone in one sub svg document // Put all the icone in one sub svg document
var icons = d3.create("svg") // WARNING: svg is required there, "g" doesn't have getBBox var icons = d3.create("svg") // WARNING: svg is required there, "g" doesn't have getBBox
.attr('x', relative_x_pos) .attr('x', relative_x_pos)
@ -307,27 +307,24 @@ function icon_list(relative_x_pos, relative_y_pos, d) {
nb_icons = 0 nb_icons = 0
icon_options.forEach(entry => { icon_options.forEach(entry => {
bloc = icon(entry[0], entry[1], d); bloc = icon(entry[0], entry[1], d, icon_size);
if (bloc){ if (bloc){
icons icons.append(() => bloc);
.append(() => bloc)
.attr('x', 25 * nb_icons); // FIXME: make that distance a variable
nb_icons += 1;
}; };
}) })
// FIXME: that need to move somewhere else, doesn't make sense here. // FIXME: that need to move somewhere else, doesn't make sense here.
icons.filter(function(d){ icons.filter(d => {
if (d.data.sane_js_details) { if (d.data.sane_js_details) {
d.libinfo = d.data.sane_js_details[0]; d.libinfo = d.data.sane_js_details[0];
return d.data.sane_js_details; return d.data.sane_js_details;
} }
return false; return false;
}).append('text') }).append('text')
.attr('x', 5) .attr('x', icon_size + 4)
.attr('y', 15) .attr('y', relative_y_pos + 7)
.style("font-size", "15px") .style("font-size", "15px")
.text(function(d) { return 'Library information: ' + d.libinfo }); .text(d => 'Library information: ' + d.libinfo);
return icons.node(); return icons.node();
} }
@ -457,15 +454,22 @@ function update(root, computed_node_width=0) {
node_group.select('.node_data').each(function(p, j){ node_group.select('.node_data').each(function(p, j){
var selected_node_bbox = d3.select(this).node().getBBox(); // 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;
});
d3.select(this).select('rect')
// Rectangle around the domain name & icons // Rectangle around the domain name & icons
.attr('height', d3.select(this).node().getBBox().height + 15)
.attr('width', d3.select(this).node().getBBox().width + 50);
var selected_node_bbox = d3.select(this).node().getBBox(); var selected_node_bbox = d3.select(this).node().getBBox();
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 // Set the width for all the nodes
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; node_width = node_width > selected_node_bbox.width ? node_width : selected_node_bbox.width;
}); });