From 4dcd08342068f22fbdf76b606fdae759a0a50f4b Mon Sep 17 00:00:00 2001
From: Peter Wu <peter@lekensteyn.nl>
Date: Wed, 21 May 2014 15:02:01 +0200
Subject: Clickable link to twitter account, display userid

---
 bubble.html | 16 +++++++++++-----
 bubble.js   | 10 +++++++---
 2 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/bubble.html b/bubble.html
index f635c23..c3fe36f 100644
--- a/bubble.html
+++ b/bubble.html
@@ -74,6 +74,11 @@ html, body {
     /* initially there is no user to show info about */
     display: none;
 }
+#infobox .user-info .user-stats,
+#infobox .user-info .user-stats li {
+    padding: 0;
+    margin: 0;
+}
 #infobox .user-info .name {
     margin: 0;
     padding: 0;
@@ -122,12 +127,13 @@ html, body {
         </ul>
         <div class="user-info">
             <h2 class="name"></h2>
-            <p>
-            Tweets: <span class="tweet-count"></span>.<br>
-            Spam: <span class="spam-status"></span>.<br>
-            Relations (<span class="relations-from-count"></span> +
+            <ul class="user-stats">
+            <li>User ID: <span class="userid"></span>
+            <li>Tweets: <span class="tweet-count"></span>
+            <li>Spam: <span class="spam-status"></span>
+            <li>Relations (<span class="relations-from-count"></span> +
                     <span class="relations-to-count"></span>):
-            </p>
+            </ul>
             <ul class="relations-from"></ul>
             <ul class="relations-to"></ul>
         </div>
diff --git a/bubble.js b/bubble.js
index 81435e2..d6868a3 100644
--- a/bubble.js
+++ b/bubble.js
@@ -231,8 +231,12 @@ function processData(data) {
         // display user block
         userInfo.style('display', 'block');
 
-        userInfo.select('.name')
+        userInfo.select('.name a').remove();
+        userInfo.select('.name').append('a')
+            .attr('target', '_blank')
+            .attr('href', 'https://twitter.com/' + d.name)
             .text(d.name);
+        userInfo.select('.userid').text(d.group);
         userInfo.select('.tweet-count')
             .text(d.tweetCount);
         userInfo.select('.spam-status')
@@ -240,10 +244,10 @@ function processData(data) {
 
         var nodes = {
             'from': force.nodes().filter(function (edge) {
-                return edge.relatedFrom.indexOf(d.index) >= 0;
+                return edge.relatedTo.indexOf(d.index) >= 0;
             }),
             'to': force.nodes().filter(function (edge) {
-                return edge.relatedTo.indexOf(d.index) >= 0;
+                return edge.relatedFrom.indexOf(d.index) >= 0;
             })
         };
         Object.keys(nodes).forEach(function (dir) {
-- 
cgit v1.2.1