# HG changeset patch # User veltr # Date 1363692346 -3600 # Node ID 5b743d461f9964fec8d274dcaaecc406b038fe46 # Parent a2d5b669f6639dcf073e3cb016c944e1d8567791 Clickable tagcloud + tweet request limiting diff -r a2d5b669f663 -r 5b743d461f99 css/playscreen.css --- 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; diff -r a2d5b669f663 -r 5b743d461f99 js/playscreen.js --- 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('
  • <%- word %>
  • '); + var cloudTemplate = _.template('
  • class="selected"<% } %>><%- word %>
  • '); 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('
  • @<%- data.from_user_name %>: <%- data.text %>

  • '), + var tweetTemplate = _.template('
  • @<%- data.from_user_name %>: <%= data.htext %>

  • '), 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,'$1'); + }); + } 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) {