new: Close button for the overlays

lookyloo/static/tree.js

@@ -29,11 +29,7 @@ var background = main_svg.append('rect')
     .attr('y', 0)
     .attr('width', width)
     .attr('height', height)
-    .style('fill', "url(#backstripes)")
-    .on('click', function(d) {
-        // Remove the
-        main_svg.selectAll('.overlay').remove()
-    });
+    .style('fill', "url(#backstripes)");
 
 // append the svg object to the body of the page
 // appends a 'group' element to 'svg'
@@ -78,14 +74,6 @@ function getBB(selection) {
     })
 };
 
-function str2bytes (str) {
-    var bytes = new Uint8Array(str.length);
-    for (var i=0; i<str.length; i++) {
-        bytes[i] = str.charCodeAt(i);
-    }
-    return bytes;
-}
-
 function urlnode_click(d) {
     var url = "url/" + d.data.uuid;
     d3.blob(url, {credentials: 'same-origin'}).then(function(data) {
@@ -99,6 +87,9 @@ d3.selection.prototype.moveToFront = function() {
   });
 };
 
+
+
+
 // What happen when clicking on a domain (load a modal display)
 function hostnode_click(d) {
     // Move the node to the front (end of the list)
@@ -110,14 +101,15 @@ function hostnode_click(d) {
                                 .attr('class', 'overlay');
 
     cur_node.append('line')
-                .attr('class', 'overlay')
+                .attr('id', 'overlay_link')
                 .style("stroke", "black");
 
     var top_margin = 15;
+    var overlay_header_height = 50;
     var left_margin = 30;
 
     overlay_hostname
-        .datum({x: 0, y: 0})
+        .datum({x: 0, y: 0, overlay_uuid: d.data.uuid})
         .attr('id', 'overlay_' + d.data.uuid)
         .attr("transform", "translate(" + 0 + "," + 0 + ")")
         .call(d3.drag().on("drag", function(d, i) {
@@ -127,9 +119,9 @@ function hostnode_click(d) {
             d.y += d3.event.dy
             d3.select(this)
                 .attr("transform", "translate(" + d.x + "," + d.y + ")");
-            cur_node.select('line')
+            cur_node.select('#overlay_link')
                 .attr("x2", d.x + top_margin)
-                .attr("y2", d.y + left_margin);
+                .attr("y2", d.y + 12);
         }));
 
     overlay_hostname.append('rect')
@@ -147,24 +139,60 @@ function hostnode_click(d) {
     // Modal display
     var url = "/tree/hostname/" + d.data.uuid;
     d3.json(url, {credentials: 'same-origin'}).then(function(urls) {
+        overlay_hostname
+            .append('text')
+            .attr('id', 'overlay_close_' + d.data.uuid)
+            .attr('height', overlay_header_height)
+            .attr('x', left_margin + 500)
+            .attr('y', top_margin + 25)
+            .style("font-size", overlay_header_height - 20)
+            .text('\u2716')
+            .on("mouseover", function(d) {
+                    d3.select(this).style("cursor", "pointer");
+                })
+            .on("mouseout", function(d) {
+                    d3.select(this).style("cursor", "default");
+                })
+            .on("click", function() {
+                    main_svg.selectAll('#overlay_' + d.data.uuid).remove();
+                    cur_node.select('#overlay_link').remove();
+                }
+            );
+
+        overlay_hostname.append('line')
+            .attr('id', 'overlay_separator_' + d.data.uuid)
+            .style("stroke", "gray")
+            .style('stroke-width', 2)
+            .attr('x1', 15)
+            .attr('y1', overlay_header_height)
+            .attr('x2', 500)
+            .attr('y2', overlay_header_height);
+
         var interval_entries = 40;
         urls.forEach(function(url, index, array) {
             var jdata = JSON.parse(url)
             overlay_hostname.datum({'data': jdata});
-            var text_node = text_entry(overlay_hostname, left_margin, top_margin + (interval_entries * index), urlnode_click);
+            var text_node = text_entry(overlay_hostname, left_margin, top_margin + overlay_header_height + (interval_entries * index), urlnode_click);
             height_text = text_node.node().getBBox().height;
-            icon_list(overlay_hostname, left_margin + 5, top_margin + height_text + (interval_entries * index));
+            icon_list(overlay_hostname, left_margin + 5, top_margin + height_text + overlay_header_height + (interval_entries * index));
         });
         overlay_bbox = overlay_hostname.node().getBBox();
         overlay_hostname.select('rect')
             .attr('width', overlay_bbox.width + left_margin)
             .attr('height', overlay_bbox.height + top_margin);
 
-        cur_node.select('line')
+        overlay_hostname.select('#overlay_close_' + d.data.uuid)
+            .attr('x', overlay_bbox.width);
+
+        overlay_hostname.select('#overlay_separator_' + d.data.uuid)
+            .attr('x2', overlay_bbox.width + left_margin + 15);
+
+
+        cur_node.select('#overlay_link')
                     .attr("x1", cur_node.x)
                     .attr("y1", cur_node.y)
                     .attr("x2", top_margin)
-                    .attr("y2", left_margin);
+                    .attr("y2", 12);
     });
 };
 
@@ -234,7 +262,7 @@ function text_entry(parent_svg, relative_x_pos, relative_y_pos, onclick_callback
     // Avoid hiding the content after the circle
     var nodeContent = parent_svg
           .append('svg')
-          .attr('height',node_height)
+          .attr('height', node_height)
           .attr('x', relative_x_pos)
           .attr('y', relative_y_pos);