Clickable tagcloud + tweet request limiting
authorveltr
Tue, 19 Mar 2013 12:25:46 +0100
changeset 9 5b743d461f99
parent 7 a2d5b669f663
child 10 ab587bf164f9
Clickable tagcloud + tweet request limiting
css/playscreen.css
js/playscreen.js
--- a/css/playscreen.css	Tue Mar 12 17:44:31 2013 +0100
+++ b/css/playscreen.css	Tue Mar 19 12:25:46 2013 +0100
@@ -114,8 +114,12 @@
 .play-tagcloud li {
 	float: left; width: 98px; height: 10px;
 	line-height: 10px;
-    text-align: center;
-}    
+    text-align: center; cursor: pointer;
+}
+
+.play-tagcloud li.selected {
+	background: #FFFF00; color: #000000;
+}
 
 .play-tagcloud li:nth-child(3n+2) {
 	margin-top: 5px;
--- a/js/playscreen.js	Tue Mar 12 17:44:31 2013 +0100
+++ b/js/playscreen.js	Tue Mar 19 12:25:46 2013 +0100
@@ -62,6 +62,23 @@
     });
     
     
+    function goToNext() {
+    	var topics = Array.prototype.slice.call($(".topic.selected").map(function(){return $(this).attr("data-topic-id")}));
+    	for (var i = 0; i < data.segments.length; i++) {
+    		var mmso = data.segments[i];
+    		if (mmso.start >= localpos) {
+    			for (var j = 0; j < mmso.topics.length; j++) {
+    				if (topics.indexOf(mmso.topics[j].topic.toString()) !== -1) {
+    					localpos = mmso.start;
+    					showLocal();
+    					return;
+    				}
+    			}
+    		}
+    	}
+    	console.log("We haven't found a segment");
+    }
+    
     function showTopics(topiclist) {
         var tbhtml = topiclist.reduce(function(mem, topic) {
             var wordsToShow = topic.words.slice(0,3),
@@ -255,7 +272,7 @@
 	
 	entonnoir.toBack();
     
-    var cloudTemplate = _.template('<li style="font-size: <%- size %>px;"><%- word %></li>');
+    var cloudTemplate = _.template('<li style="font-size: <%- size %>px;"<% if (selected) {%> class="selected"<% } %>><%- word %></li>');
     
     function showLocal() {
 		localyscale = ph / localduration;
@@ -388,18 +405,25 @@
 	    	.sortBy(function(w) {
 	    		return -w.score;
 	    	})
-	    	.first(30)
+	    	.first(40)
 	    	.value();
     	
     	var values = _(localkeywords).pluck('score'),
     		max = Math.max.apply(Math, values),
     		min = Math.min.apply(Math, values),
-    		scale = 10 / (max - Math.min(max - .1, min));
+    		scale = 10 / (max - Math.min(max - .1, min)),
+    		selectedVisible = false;
 		
 		localkeywords.forEach(function(w) {
 			w.size = 10 + (w.score - min) * scale;
+			w.selected = (w.word === selectedWord);
+			selectedVisible = selectedVisible || w.selected;
 		});
     	
+    	if (!selectedVisible) {
+    		selectedWord = false;
+    	}
+    	
     	$(".play-tagcloud").html(localkeywords.map(cloudTemplate).join(""));
 	    
 		throttledGetTweets();
@@ -407,14 +431,24 @@
 		showTopicViz();
     }
     
+    $(".play-tagcloud").on("click","li", function() {
+    	if ($(this).hasClass("selected")) {
+    		selectedWord = false;
+    	} else {
+    		selectedWord = $(this).text();
+    	}
+    	throttledShowLocal();
+    });
+    
     
     var lastPos, lastDuration, lastTopics;
     
-    var tweetTemplate = _.template('<li class="tweet" data-timestamp="<%= timestamp %>" data-topic-id="<%= topic.topic %>"><img src="<%- data.profile_image_url %>" /><p>@<%- data.from_user_name %>: <%- data.text %></p></li>'),
+    var tweetTemplate = _.template('<li class="tweet" data-timestamp="<%= timestamp %>" data-topic-id="<%= topic.topic %>"><img src="<%- data.profile_image_url %>" /><p>@<%- data.from_user_name %>: <%= data.htext %></p></li>'),
     	callnum = 0,
     	tweetstructure = {},
     	requestedtweets = {},
-    	_NTWEETS = 10;
+    	_NTWEETS = 20,
+    	selectedWord = false;
     
     function showTweets() {
     	    	
@@ -443,6 +477,13 @@
     	}).filter(function(tw) {
     		return ((tw.status == 2) && (tw.timestamp > (localpos - localduration / 2)) && (tw.timestamp < (localpos + localduration / 2)));
 		});
+				
+		if (selectedWord) {
+			var rx = new RegExp(selectedWord.replace(/(\W)/gm,'\\$1'),'im');
+			tweetstoshow = tweetstoshow.filter(function(tw) {
+				return rx.test(tw.data.text);
+			});
+		}
 		
 		tweetstoshow.forEach(function(tw) {
 			tw.topic = tw.topics.filter(function(t) {
@@ -454,7 +495,7 @@
 		
 		tweetstoshow = tweetstoshow.filter(function(t) {
 			return !!t.topic;
-		})
+		});
 				
 		tweetstoshow.sort(function(a, b) {
 			return b.topic.weight - a.topic.weight; 
@@ -462,6 +503,17 @@
 		
 		tweetstoshow = tweetstoshow.slice(0,10);
 		
+		if (selectedWord) {
+			var rx = new RegExp( '(' + selectedWord.replace(/(\W)/gm,'\\$1') + ')', 'gim' );
+			tweetstoshow.forEach(function(tw) {
+				tw.data.htext = _(tw.data.text).escape().replace(rx,'<span class="highlight">$1</span>');
+			});
+		} else {
+			tweetstoshow.forEach(function(tw) {
+				tw.data.htext = _(tw.data.text).escape();
+			})
+		}
+		
 		tweetstoshow.sort(function(a, b) {
 			return a.timestamp - b.timestamp;
 		});
@@ -508,7 +560,7 @@
 			errorHandler: function(err,info) {
 				mmstruct.status = 0;
 				console.error(err,info);
-				throttledGetTweetIds();
+				debouncedGetTweetIds();
 			}
 		});
     }
@@ -552,10 +604,10 @@
 				toload.push(v.id);
 			}
 		});
-    	
-    	console.log("Loading tweet data");
 		
-		$.getJSON(
+		if (toload.length) {
+			toload = toload.slice(0,200);
+			$.getJSON(
 			solrUrl(
 				"twitter",
 				{
@@ -573,8 +625,11 @@
 					requestedtweets[tweet.id_str].timestamp = timestamp;
 				});
 				throttledShowTweets();
-			}
-		);
+				debouncedGetTweetData();
+			});
+		}
+		
+		
 		
     }
     
@@ -582,6 +637,8 @@
     
     throttledGetTweetIds = _(getTweetIds).throttle(10000);
     
+    debouncedGetTweetIds = _(throttledGetTweetIds).debounce(125);
+    
     throttledShowTweets = _(showTweets).throttle(200);
     
     function getLocalTweets() {
@@ -617,7 +674,7 @@
     var localpos = 300,
     	localduration = 600;
     	
-    showLocal();
+    goToNext();
     
     $(".topics-block").on("mouseenter", ".topic", function() {
         var el = $(this);
@@ -651,8 +708,7 @@
     }).mousemove(function(e) {
     	if (mouseIsDown) {
     		if (isDragging) {
-    			var limit = $(this).offset().left + 140,
-    				deltaY = e.pageY - startY,
+    			var deltaY = e.pageY - startY,
     				delta = Math.floor(deltaY / (scrollGlobal ? yscale : - localyscale));
 				localpos = Math.max(localduration / 2, Math.min(data.duration - localduration / 2, startPos + delta));
 				throttledShowLocal();
@@ -662,10 +718,13 @@
     	}
     }).mouseup(function(e) {
     	if (scrollGlobal && !isDragging) {
-    		
-    		var posY = e.pageY - $(this).offset().top;
-    		localpos = Math.max(localduration / 2, Math.min(data.duration - localduration / 2, Math.floor(posY / yscale)));
-			throttledShowLocal();
+    		var _o = $(this).offset(),
+    			posX = e.pageX - _o.left,
+    			posY = e.pageY - _o.top;
+			if (posX < 140) {
+				localpos = Math.max(localduration / 2, Math.min(data.duration - localduration / 2, Math.floor(posY / yscale)));
+				throttledShowLocal();
+			}
     	}
     });
     
@@ -748,7 +807,7 @@
     loadJson("data/5secs.json", "fiveseconds");
     
     loadJson(
-        solrUrl("MMSO", {q: "*:*", fl: "topic*,MMSO_id,multimediaSegment,keywordsFromSocial,keywordsFromAudio", rows: 250 }),
+        solrUrl("MMSO", {q: "*:*", fl: "topic*,MMSO_id,multimediaSegment,keywordsFromSocial", rows: 250 }),
         "segments",
         function(d) {
             return d.response.docs.map(function(mmso) {
@@ -772,7 +831,7 @@
 	                });
                 }
                 
-                getKeywords("keywordsFromAudio");
+                //getKeywords("keywordsFromAudio");
                 getKeywords("keywordsFromSocial");
                 
                 for (var k in mmso) {