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

fix: rendering on firefox

pull/81/head
Raphaël Vinot 2020-08-12 13:59:40 +02:00
parent b5d56a5a2b
commit 022d7a8612
1 changed files with 22 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -220,7 +220,7 @@ function icon_list(relative_x_pos, relative_y_pos, d) {
.attr('x', relative_x_pos) .attr('x', relative_x_pos)
.attr('y', relative_y_pos); .attr('y', relative_y_pos);
icon_options.forEach(function(value, key) { icon_options.forEach(function(icon_path, key) {
icons icons
.datum(d) .datum(d)
.filter(d => { .filter(d => {
@ -240,7 +240,7 @@ function icon_list(relative_x_pos, relative_y_pos, d) {
.append('image') .append('image')
.attr("width", icon_size) .attr("width", icon_size)
.attr("height", icon_size) .attr("height", icon_size)
.attr("xlink:href", value); .attr("xlink:href", icon_path);
}); });
icons.selectAll('.icon') icons.selectAll('.icon')
@ -280,7 +280,16 @@ function text_entry(relative_x_pos, relative_y_pos, onclick_callback, d) {
.style("font-size", "16px") .style("font-size", "16px")
.attr("stroke-width", ".2px") .attr("stroke-width", ".2px")
.style("opacity", .9) .style("opacity", .9)
.attr("clip-path", "url(#textOverlay)") .attr('cursor', 'pointer')
.on('click', onclick_callback)
.on('mouseover', () => {
d3.select('#tooltip')
.style('opacity', 1)
.style('left', `${d3.event.pageX + 10}px`)
.style('top', `${d3.event.pageY + 10}px`)
.text('Open investigation pop-up.');
})
.on('mouseout', () => d3.select('#tooltip').style('opacity', 0))
.text(d => { .text(d => {
let to_print; let to_print;
if (d.data.name.length > 50) { if (d.data.name.length > 50) {
@ -294,18 +303,6 @@ function text_entry(relative_x_pos, relative_y_pos, onclick_callback, d) {
} }
return to_print; return to_print;
}); });
text_nodes
.attr('cursor', 'pointer')
.on('click', onclick_callback)
.on('mouseover', d => {
d3.select('#tooltip')
.style('opacity', 1)
.style('left', `${d3.event.pageX + 10}px`)
.style('top', `${d3.event.pageY + 10}px`)
.text('Open investigation pop-up.');
})
.on('mouseout', () => d3.select('#tooltip').style('opacity', 0));
return nodeContent.node(); return nodeContent.node();
} }
@ -345,9 +342,9 @@ function update(root, computed_node_width=0) {
// Update pattern // Update pattern
main_svg.selectAll('pattern') main_svg.selectAll('pattern')
.attr('width', computed_node_width * 2) .attr('width', `${computed_node_width * 2}px`)
pattern.selectAll('rect') pattern.selectAll('rect')
.attr('width', computed_node_width) .attr('width', `${computed_node_width}px`)
} }
@ -405,6 +402,7 @@ function update(root, computed_node_width=0) {
.attr("ry", 6) .attr("ry", 6)
.attr('x', 12) .attr('x', 12)
.attr('y', 0) .attr('y', 0)
.attr('width', 0)
.style("opacity", "0.5") .style("opacity", "0.5")
.attr("stroke", 'black') .attr("stroke", 'black')
.attr('stroke-opacity', "0.8") .attr('stroke-opacity', "0.8")
@ -428,27 +426,26 @@ function update(root, computed_node_width=0) {
cur_icon_list_len += d3.select(this).node().getBBox().width; cur_icon_list_len += d3.select(this).node().getBBox().width;
}); });
// Rectangle around the domain name & icons // Rectangle around the domain name & icons
let selected_node_bbox_init = d3.select(this).node().getBBox(); let selected_node_bbox_init = d3.select(this).select('text').node().getBoundingClientRect();
d3.select(this).select('rect') d3.select(this).select('rect')
.attr('height', selected_node_bbox_init.height + 15) .attr('height', node_height + 5)
.attr('width', selected_node_bbox_init.width + 50); .attr('width', selected_node_bbox_init.width + 50);
// Set the width for all the nodes // Set the width for all the nodes
let selected_node_bbox = d3.select(this).node().getBBox(); // Required, as the node width need to include the rectangle let selected_node_bbox = d3.select(this).select('rect').node().getBoundingClientRect(); // 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;
// Set Flag // Set Flag
d3.select(this).append("text") d3.select(this).append("text")
.attr('x', selected_node_bbox.width - 12) .attr('x', `${selected_node_bbox.width - 12}px`)
.attr('y', 20) .attr('y', '20px')
.style("font-size", "16px") .style("font-size", "16px")
.attr("id", "flag") .attr("id", "flag")
.text("🏁") .text("🏁")
.attr('cursor', 'pointer') .attr('cursor', 'pointer')
.on('click', d => NodeHighlight(d.data.uuid)) .on('click', d => NodeHighlight(d.data.uuid))
.on('mouseover', d => { .on('mouseover', () => {
d3.select('#tooltip') d3.select('#tooltip')
.style('opacity', 1) .style('opacity', 1)
.style('left', `${d3.event.pageX + 10}px`) .style('left', `${d3.event.pageX + 10}px`)
@ -475,7 +472,7 @@ function update(root, computed_node_width=0) {
.attr("width", icon_size) .attr("width", icon_size)
.attr("height", icon_size) .attr("height", icon_size)
.attr("xlink:href", '/static/insecure.svg') .attr("xlink:href", '/static/insecure.svg')
.on('mouseover', d => { .on('mouseover', () => {
d3.select('#tooltip') d3.select('#tooltip')
.style('opacity', 1) .style('opacity', 1)
.style('left', `${d3.event.pageX + 10}px`) .style('left', `${d3.event.pageX + 10}px`)
@ -516,8 +513,6 @@ function update(root, computed_node_width=0) {
d.y0 = d.y; d.y0 = d.y;
}); });
// ****************** links section *************************** // ****************** links section ***************************
// Update the links... // Update the links...