Merge pull request Tribler#149 from vandenheuvel/edge_thickness

Set link stroke width based on data transmitted over the link

TriblerGUI/test/widgets/trustpage/js/test_drawing.js

@@ -0,0 +1,30 @@
+/**
+ * This file tests the drawing.js file with unit tests
+ */
+assert = require("assert");
+drawing = require("../../../../widgets/trustpage/js/drawing.js");
+
+describe("drawing.js", function () {
+    describe("getStrokeWidth", function () {
+        it("the middle of the interval is returned as the stroke width if the difference is 0", function () {
+            var data = {
+                "min_transmission": 100,
+                "max_transmission": 100
+            };
+            assert.equal(6, drawing.getStrokeWidth(null, data));
+        });
+    });
+    describe("getStrokeWidth", function () {
+        it("the function returns the correct width on sample data", function () {
+            var data = {
+                "min_transmission": 20,
+                "max_transmission": 100
+            };
+            var link = {
+                "amount_up": 15,
+                "amount_down": 35
+            };
+            assert.equal(5, drawing.getStrokeWidth(link, data));
+        });
+    });
+});

TriblerGUI/widgets/trustpage/js/drawing.js

@@ -35,15 +35,17 @@ function drawNodes(svg, data, on_click) {
     // Append a <circle> element to it.
     var circles = groups
         .append("circle")
-        .attr("fill", function(d) {return getNodeColor(d, data)})
+        .attr("fill", function (d) {
+            return getNodeColor(d, data)
+        })
         .attr("r", "20")
         .attr("cx", 0)
         .attr("cy", 0)
-        .style("cursor","pointer")
+        .style("cursor", "pointer")
         .on("click", on_click)
-        .on("mouseenter", function(){
+        .on("mouseenter", function () {
             d3.select(this).transition().ease(d3.easeElasticOut).delay(0).duration(300).attr("r", 25);
-        }).on("mouseout", function(){
+        }).on("mouseout", function () {
             d3.select(this).transition().ease(d3.easeElasticOut).delay(0).duration(300).attr("r", 20);
         });
 
@@ -104,21 +106,47 @@ function drawLinks(svg, data) {
 
     selectLinks(svg).remove();
 
-    var selection = selectLinks(svg).data(data).enter();
+    var selection = selectLinks(svg).data(data.links).enter();
 
     var links = selection
         .append("svg")
         .attr("class", "link");
 
     links.append("line")
         .attr("class", "link-source")
-        .attr("stroke-width", 2)
+        .attr("stroke-width", function (d) {
+            return getStrokeWidth(d, data)
+        })
         .style("stroke", "#ffff00");
 
     links.append("line")
         .attr("class", "link-target")
-        .attr("stroke-width", 2)
+        .attr("stroke-width", function (d) {
+            return getStrokeWidth(d, data)
+        })
         .style("stroke", "#ff0000");
 
     return links;
 }
+
+/**
+ * Get the stroke width based on the total amount of transmitted data over the link,
+ * relative to the other links in the graph
+ * @param link the link to get the width for
+ * @param data the JSON data of the graph
+ * @returns the width of the link
+ */
+function getStrokeWidth(link, data) {
+    // Map relative to the minimum and maximum total transition links of the graph
+    var difference = data.max_transmission - data.min_transmission;
+    if(difference === 0) {
+        return 6;
+    }
+    var linkTotal = link.amount_up + link.amount_down;
+    var normalizedTotal = (linkTotal - data.min_transmission) / difference;
+
+    // Width in [2, 10] px
+    return (normalizedTotal * 8) + 2;
+}
+
+module.exports = {getStrokeWidth: getStrokeWidth};

TriblerGUI/widgets/trustpage/js/main.js

@@ -119,7 +119,7 @@ function update(graph) {
         });
 
     // Draw all links
-    var links = drawLinks(svg, graph.links);
+    var links = drawLinks(svg, graph);
 
     // Apply the nodes to the simulation
     simulation.nodes(graph.nodes);

TriblerGUI/widgets/trustpage/js/process_data.js

@@ -59,7 +59,7 @@ function processData(jsonData) {
     });
 
     // Map public keys to i
-    nodes.forEach(function(node, i){
+    nodes.forEach(function(node, i) {
         public_keys.push(node.public_key);
         node.public_key_string = node.public_key;
         node.public_key = i;
@@ -72,7 +72,7 @@ function processData(jsonData) {
      * @param val
      * @returns {*}
      */
-    function find(list, key, val){
+    function find(list, key, val) {
         return list.find(function(item){
             return item[key] === val;
         });