From 0f1c169c4716ad0148014be22b9e54c54474a469 Mon Sep 17 00:00:00 2001
From: Alon Levy <alon@pobox.com>
Date: Wed, 21 Jan 2015 11:10:07 +0200
Subject: Fixes #295 adding a link next to node names with urls

Note about implementation: we currently update all the nodes for
multiple things, we should not do that, we have id's on each node, we
can do less work. Another option is using the visualdom and letting it
do the diffs. Actually we should test first. Which brings me to the
missing functionality of loading a large csv.
---
 src/client/rz_core.js         |  1 -
 src/client/view/graph_view.js | 59 +++++++++++++++++++++++++++++++------------
 2 files changed, 43 insertions(+), 17 deletions(-)

(limited to 'src')

diff --git a/src/client/rz_core.js b/src/client/rz_core.js
index 7e1079a6..bc9fc61b 100644
--- a/src/client/rz_core.js
+++ b/src/client/rz_core.js
@@ -18,7 +18,6 @@ var addednodes = [],
 // "CSS" for SVG elements. Reused for editing elements.
 var node_text_dx = 15,
     node_text_dy = '.30em',
-    svg_input_fo_node_x = node_text_dx,
     svg_input_fo_node_y = '-.70em',
     svg_input_fo_height = '30px';
 
diff --git a/src/client/view/graph_view.js b/src/client/view/graph_view.js
index c9a63739..d191df90 100644
--- a/src/client/view/graph_view.js
+++ b/src/client/view/graph_view.js
@@ -369,9 +369,13 @@ function GraphView(spec) {
             };
         }); //();
 
+        var node_url_dx = 15;
+        var nodeTextX = function(d) {
+            return urlValid(d) ? node_text_dx + node_url_dx : node_text_dx;
+        }
+
         nodetext = nodeEnter.insert("text")
             .attr("class", "nodetext graph")
-            .attr("dx", node_text_dx)
             .attr("dy", node_text_dy)
             .on("click", function(d, i) {
                 if (d3.event.defaultPrevented) {
@@ -379,29 +383,52 @@ function GraphView(spec) {
                     return;
                 }
                 if (!temporary) {
-                    svgInput.enable(this, d);
+                    svgInput.enable(this, d, nodeTextX(d));
                     selection.update([d]);
                     showNodeInfo(graph.find_node__by_id(this.parentNode.id));
                 }
                 d3.event.stopPropagation();
             });
+        noderef = nodeEnter.insert('a')
+            .attr("class", "nodeurl graph")
+            .attr("transform", "translate(10,-7)")
+        noderef.insert("image")
+            .attr("width", "14")
+            .attr("height", "14")
+            .attr("xlink:href", "/static/img/url-icon.png");
+
+        noderef_a = noderef.insert("a")
+        noderef_a.insert("text")
+            .attr("class", "nodetext graph")
+            .attr("dy", node_text_dy);
 
-        node.select('g.node text')
-            .text(function(d) {
-                if (!d.name) {
-                    return "_";
-                }
-                if (temporary || d.state === 'chosen'
-                 || d.state === "enter" || d.state === "exit") {
-                     return d.name;
+        var urlValid = function(d) {
+            return d.url !== undefined && d.url !== null && d.url.length > 0;
+        };
+
+        noderef.attr("visibility", function(d) { return urlValid(d) ? "visible" : "hidden"; });
+        noderef.attr("pointer-events", function(d) { return urlValid(d) ? "all" : "none"; });
+        var nodeText = function(d) {
+            if (!d.name) {
+                return "_";
+            }
+            if (temporary || d.state === 'chosen'
+             || d.state === "enter" || d.state === "exit") {
+                 return d.name;
+            } else {
+                if (d.name.length < 28) {
+                    return d.name;
                 } else {
-                    if (d.name.length < 28) {
-                        return d.name;
-                    } else {
-                        return d.name.substring(0, 25) + "...";
-                    }
+                    return d.name.substring(0, 25) + "...";
                 }
-            });
+            }
+        };
+        node.select('g.node text')
+            .text(nodeText);
+        node.select('g.node a')
+            .attr("xlink:href", function (d) { return d.url; });
+        node.select('g.node text')
+            .attr("dx", nodeTextX);
 
         circle = nodeEnter.insert("circle");
         node.select('g.node circle')
-- 
cgit v1.3.1