new data access method
authorveltr
Tue, 12 Mar 2013 17:44:31 +0100
changeset 7 a2d5b669f663
parent 6 14dd1980b0b9
child 8 ba3652cdd44b
child 9 5b743d461f99
new data access method
.hgignore
css/playscreen.css
css/startscreen.css
js/playscreen.js
js/startscreen.js
playscreen.html
startscreen.html
--- a/.hgignore	Fri Mar 08 19:05:17 2013 +0100
+++ b/.hgignore	Tue Mar 12 17:44:31 2013 +0100
@@ -2,4 +2,6 @@
 syntax: regexp
 ^\.project$
 syntax: regexp
-\.webm$
\ No newline at end of file
+\.webm$
+syntax: regexp
+^thumbnails$
\ No newline at end of file
--- a/css/playscreen.css	Fri Mar 08 19:05:17 2013 +0100
+++ b/css/playscreen.css	Tue Mar 12 17:44:31 2013 +0100
@@ -34,21 +34,15 @@
 
 .keyword-search {
     line-height: 20px; padding: 0 5px; margin-top: 4px; border: 1px solid #000000; width: 300px; font-size: 18px;
-    background: #666666; color: #FFFFFF;
-}
-::-webkit-input-placeholder { 
-    color: #cccccc; font-style: italic;
-}
-:-moz-placeholder {
-    color: #cccccc; font-style: italic;
+    background: #666666;
 }
 
-.ui-autocomplete {
-    background: #666666; font-size: 14px;
+.keyword-search a {
+	color: #FFFFFF; text-decoration: none;
 }
 
-.ui-autocomplete a {
-    color: #ffffff;
+a.placeholder {
+    color: #cccccc;
 }
 
 .shadow-block {
@@ -85,7 +79,7 @@
 }
 
 .play-images {
-	left: 300px; position: absolute;
+	left: 155px; position: absolute;
 }
 
 .play-images img {
@@ -109,3 +103,25 @@
 .play-localtweets p {
 	margin-left: 24px;
 }
+
+.play-tagcloud {
+	left: 720px;
+	top: 5px;
+    position: absolute;
+    width: 296px;
+}
+
+.play-tagcloud li {
+	float: left; width: 98px; height: 10px;
+	line-height: 10px;
+    text-align: center;
+}    
+
+.play-tagcloud li:nth-child(3n+2) {
+	margin-top: 5px;
+}
+
+.play-tagcloud li:nth-child(3n) {
+	margin-top: 10px;
+}
+
--- a/css/startscreen.css	Fri Mar 08 19:05:17 2013 +0100
+++ b/css/startscreen.css	Tue Mar 12 17:44:31 2013 +0100
@@ -21,7 +21,7 @@
 
 .play-button {
     float: left; margin: 8px; font-size: 44px;
-    line-height: 50px;
+    line-height: 50px; color: #FFFFFF; text-decoration: none;
 }
 
 .duration {
--- a/js/playscreen.js	Fri Mar 08 19:05:17 2013 +0100
+++ b/js/playscreen.js	Tue Mar 12 17:44:31 2013 +0100
@@ -10,7 +10,17 @@
 
 function showData() {
     
-    var topicHash = document.location.hash || "#topics=5,15";
+    var topicHash = document.location.hash || "#selectedtopics=5,15&visibletopics=5,10,15";
+    
+    var pageParams = {};
+    
+    topicHash
+    	.replace(/^#/,'')
+    	.split('&')
+    	.forEach(function(p) {
+    		var s = p.split('=');
+    		pageParams[s[0]] = s[1].split(",").map(function(t) { return decodeURIComponent(t)});
+    	})
     
     var ordertag = 0;
 
@@ -48,9 +58,7 @@
     });
     
     var sortedTopics = data.topics.filter(function(t) {
-        return t.index !== topicPoubelle;
-    }).sort(function(a,b) {
-        return b.score - a.score;
+        return pageParams.visibletopics.indexOf(t.index.toString()) !==-1 && t.index !== topicPoubelle;
     });
     
     
@@ -173,7 +181,8 @@
         ph = jqsvg.height(),
         globW = 85,
         globL = 40,
-        localL = 155,
+        entonnoirR = 155,
+        localL = 235,
         localW = 85,
         localR = (localL + localW),
         localTimeR = (localL + localW) + globL,
@@ -246,22 +255,25 @@
 	
 	entonnoir.toBack();
     
+    var cloudTemplate = _.template('<li style="font-size: <%- size %>px;"><%- word %></li>');
+    
     function showLocal() {
 		localyscale = ph / localduration;
     	var localstart = localpos - localduration/2;
     		localend = localpos + localduration/2;
     		globtop = yscale * localstart,
     		globbottom = yscale * localend,
-    		betweenx = (globR + localL) / 2,
+    		betweenx = (globR + entonnoirR) / 2,
     		betweenyt = (globtop) / 2,
     		betweenyb = (globbottom + ph) / 2,
-    		curve = (localL - globR) / 2,
+    		curve = (entonnoirR - globR) / 2,
     		entonnoird = "M0," + globtop + "l" + globR + ",0Q" + betweenx + "," + globtop + "," + betweenx + ","
     			+ Math.max(globtop - curve, betweenyt) + "L" + betweenx + "," + Math.min(curve, betweenyt) + "Q"
-    			+ betweenx + ",0," + localL + ",0"
-    			+ "L" + localR + ",0L" + localR + "," + ph + "L" + localL + "," + ph + "Q" + betweenx + "," + ph + ","
+    			+ betweenx + ",0," + entonnoirR + ",0"
+    			+ "L" + localR + ",0L" + localR + "," + ph + "L" + entonnoirR + "," + ph + "Q" + betweenx + "," + ph + ","
     			+ betweenx + "," + Math.max(ph - curve, betweenyb) +"L" + betweenx + "," + Math.min(globbottom + curve, betweenyb)
-    			+ "Q" + betweenx + "," + globbottom + "," + globR + "," + globbottom + "L0," + globbottom;
+    			+ "Q" + betweenx + "," + globbottom + "," + globR + "," + globbottom + "L0," + globbottom,
+			localkeywords = {};
 			
 		entonnoir.attr("path",entonnoird);
 		localTimes.forEach(function(t) {
@@ -280,8 +292,20 @@
 		localMmsoDelta = parseInt(filteredSegments[0].id.split("_")[1]);
 		localMmsos = filteredSegments.map(function(s) {
 			var y = localyscale * (s.start - localstart),
-				h = localyscale * s.duration;
-	        var rect = paper.rect( localL, y, localW, h );
+				h = localyscale * s.duration,
+				rect = paper.rect( localL, y, localW, h ),
+				visibled = (
+					s.start < localstart
+					? s.duration - localstart + s.start
+					: (
+						s.end > localend
+						? s.duration - s.end + localend
+						: s.duration
+					)
+				);
+			_(s.keywords).each(function(v,k) {
+				localkeywords[k] = (v * visibled) + (localkeywords[k] || 0);
+			});
 	        rect.attr({stroke: "none", title: s.id});
 	        if (parseInt(s.id.replace("MMSO_","")) % 2) {
 	        	var altrect = paper.rect( localR, y, 60, h);
@@ -356,6 +380,28 @@
     		}
 	    });
 	    
+	    localkeywords = _(localkeywords)
+	    	.chain()
+	    	.map(function(v,k) {
+	    		return { word: k, score: v }
+	    	})
+	    	.sortBy(function(w) {
+	    		return -w.score;
+	    	})
+	    	.first(30)
+	    	.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));
+		
+		localkeywords.forEach(function(w) {
+			w.size = 10 + (w.score - min) * scale;
+		});
+    	
+    	$(".play-tagcloud").html(localkeywords.map(cloudTemplate).join(""));
+	    
 		throttledGetTweets();
 	    
 		showTopicViz();
@@ -381,8 +427,8 @@
     		if (mmsostruct) {
 	    		for (var j = 0; j < topics.length; j++) {
 	    			var topicid = topics[j];
-					if (mmsostruct[topicid]) {
-						var tweetids = mmsostruct[topicid].tweetids;
+					if (mmsostruct.tweetids) {
+						var tweetids = mmsostruct.tweetids[topicid];
 						for (var k = 0; k < tweetids.length; k++) {
 							toshow.push(tweetids[k]);
 						}
@@ -400,11 +446,15 @@
 		
 		tweetstoshow.forEach(function(tw) {
 			tw.topic = tw.topics.filter(function(t) {
-				return topics.indexOf(t.topic) !== -1;
+				return topics.indexOf(t.topic.toString()) !== -1;
 			}).sort(function(a,b) {
 				return b.weight - a.weight
 			})[0];
 		});
+		
+		tweetstoshow = tweetstoshow.filter(function(t) {
+			return !!t.topic;
+		})
 				
 		tweetstoshow.sort(function(a, b) {
 			return b.topic.weight - a.topic.weight; 
@@ -416,8 +466,6 @@
 			return a.timestamp - b.timestamp;
 		});
 		
-		console.log(tweetstoshow);
-		
 		var html = tweetstoshow.map(tweetTemplate).join("");
 		
 		$(".play-localtweets").html(html);
@@ -431,31 +479,35 @@
     }
     
     function getMmsoTweetIds(mmstruct) {
-    	    	
-    	TopicsBean.bestSocialInteractionsIdsMatching(mmstruct.mmso, mmstruct.topic, 0, _NTWEETS, {
-			callback: function(tw) {
+    	TopicsBean.bestSocialInteractionsIdsMatching(mmstruct.mmsoid, 0, _NTWEETS, {
+			callback: function(res) {
 				mmstruct.status = 2;
-				mmstruct.tweetids = tw;
-				for (var k = 0; k < tw.length; k++) {
-					var tweetid = tw[k],
-						relevance = mmstruct.weight * (_NTWEETS - k) / _NTWEETS;
-					if (!requestedtweets[tweetid]) {
-						requestedtweets[tweetid] = {
-							id: tweetid,
-							status: 0,
-							topics: []
+				mmstruct.tweetids = res;
+				for (var j = 0; j < res.length; j++) {
+					var tweetids = res[j],
+						ntw = tweetids.length,
+						topicweight = data.topics[j].weights[mmstruct.mmsoindex];
+					for (var k = 0; k < tweetids.length; k++) {
+						var relevance = topicweight * (ntw - k) / ntw,
+							tweetid = tweetids[k];
+						if (!requestedtweets[tweetid]) {
+							requestedtweets[tweetid] = {
+								id: tweetid,
+								status: 0,
+								topics: []
+							}
 						}
+						requestedtweets[tweetid].topics.push({
+							topic: j,
+							weight: relevance
+						});
 					}
-					requestedtweets[tweetid].topics.push({
-						topic: mmstruct.topic,
-						weight: relevance
-					});
 				}
 				debouncedGetTweetData();
 			},
-			errorHandler: function(err) {
+			errorHandler: function(err,info) {
 				mmstruct.status = 0;
-				console.log(err);
+				console.error(err,info);
 				throttledGetTweetIds();
 			}
 		});
@@ -469,17 +521,13 @@
     	
     	var toload = [];
     	
-    	_(tweetstructure).each(function(v) {
-    		_(v).each(function(w) {
-    			if (!w.status) {
-    				w.status = 1;
-    				toload.push(w);
-    			}
-    		});
+    	_(tweetstructure).each(function(w) {
+			if (!w.status) {
+				w.status = 1;
+				toload.push(w);
+			}
     	});
     	
-    	console.log("Loading tweet ids");
-    	
     	if (toload.length) {
     		
     		if (toload.length > _MAX_BATCH) {
@@ -545,21 +593,11 @@
     	for (var i = 0; i < localMmsos.length; i++) {
     		var mmso = data.segments[localMmsoDelta + i];
     		if (!tweetstructure[mmso.id]) {
-    			tweetstructure[mmso.id] = {}
-    		}
-    		var mmsostruct = tweetstructure[mmso.id];
-    		for (var j = 0; j < topics.length; j++) {
-				var topicid = topics[j],
-					weight = data.topics[topics[j]].weights[localMmsoDelta + i];
-				if (weight > .1 && !mmsostruct[topicid]) {
-					mmsostruct[topicid] = {
-						topic: topicid,
-						mmso: mmso.id,
-						status: 0,
-						weight: weight,
-						tweetids: []
-					};
-				}
+    			tweetstructure[mmso.id] = {
+    				mmsoid: mmso.id,
+    				mmsoindex: localMmsoDelta + i,
+    				status: 0
+    			}
     		}
     	}
     	
@@ -571,11 +609,12 @@
     	throttledShowLocal = _.throttle(showLocal, 100);
     
     showTopics(sortedTopics);
-    (topicHash.match(/\d+/g) || []).forEach(function(id) {
+    
+    pageParams.selectedtopics.forEach(function(id) {
     	$(".topic[data-topic-id=" + id + "]").addClass("selected").attr("data-timestamp",++ordertag);
     });
     
-    var localpos = 7100,
+    var localpos = 300,
     	localduration = 600;
     	
     showLocal();
@@ -645,7 +684,11 @@
     		}
 	        totalScroll = 0;
 	    }
-    })
+    });
+    
+    if (pageParams.keywords && pageParams.keywords.length) {
+    	$(".keyword-search a").removeClass("placeholder").text(pageParams.keywords.join(", "));
+    }
     
 }
 
@@ -705,14 +748,33 @@
     loadJson("data/5secs.json", "fiveseconds");
     
     loadJson(
-        solrUrl("MMSO", {q: "*:*", fl: "topic*,MMSO_id,multimediaSegment", rows: 250 }),
+        solrUrl("MMSO", {q: "*:*", fl: "topic*,MMSO_id,multimediaSegment,keywordsFromSocial,keywordsFromAudio", rows: 250 }),
         "segments",
         function(d) {
             return d.response.docs.map(function(mmso) {
                 var tc = mmso.multimediaSegment.match(/\d+/g),
                     start = parseInt(tc[0]),
                     end = parseInt(tc[1]),
-                    topics = [];
+                    topics = [],
+                    keywords = {};
+                
+                function getKeywords(field) {
+                	var keywordtexts = mmso[field].replace(/[{}]/g,'').split(", ");
+	                keywordtexts.forEach(function(k) {
+	                	var t = k.split('='),
+	                		s = parseFloat(t[1]),
+	                		w = t[0].split(" ");
+	            		w.forEach(function(m) {
+	            			if (m.length > 2) {
+	            				keywords[m] = s + (keywords[m] || 0);
+	            			}
+	            		});
+	                });
+                }
+                
+                getKeywords("keywordsFromAudio");
+                getKeywords("keywordsFromSocial");
+                
                 for (var k in mmso) {
                     if (k.substr(0,5) === "topic" && mmso[k] > .01) {
                         topics.push({
@@ -733,7 +795,8 @@
                     start: start,
                     end: end,
                     duration: end - start,
-                    topics: topics
+                    topics: topics,
+                    keywords: keywords
                 }
             }).sort(function(a,b) {
                 return a.start - b.start;
--- a/js/startscreen.js	Fri Mar 08 19:05:17 2013 +0100
+++ b/js/startscreen.js	Tue Mar 12 17:44:31 2013 +0100
@@ -210,7 +210,10 @@
     allwords.sort();
     
     $(".keyword-search").autocomplete({
-        source: allwords
+        source: allwords,
+        change: function() {
+        	window.setInterval(wordFilter,0);
+        }
     }).on("keyup change paste", wordFilter);
 // */
 
@@ -233,14 +236,11 @@
             sbl = selectedBlocks.length,
             topicBlocks = $(".topic");
         if (!sbl && topicBlocks.length < sortedTopics.length) {
-            topicBlocks.each(function() {
-                
-            })
             selectedBlocks = topicBlocks;
             sbl = selectedBlocks.length;
         }
         var topicsAndColors = [];
-        selectedBlocks.map(function() {
+        selectedBlocks.each(function() {
             var el = $(this),
                 topicid = parseInt(el.attr("data-topic-id"));
             topicsAndColors.push({
@@ -285,6 +285,17 @@
             }
         }
         
+        var url = "playscreen.html#visibletopics="
+        	+ Array.prototype.join.call($(".topic:visible").map(function(){return $(this).attr("data-topic-id")}))
+        	+ "&selectedtopics="
+        	+ Array.prototype.slice.call(topicsAndColors.map(function(t){return t.id}))
+        	+ "&keywords="
+        	+ selectedWords.map(function(w) {
+        		return encodeURIComponent(w);
+        	}).join(",");
+        	
+    	$(".play-button").attr("href",url);
+        
     }
     
     var jqsvg = $(".start-svg");
--- a/playscreen.html	Fri Mar 08 19:05:17 2013 +0100
+++ b/playscreen.html	Tue Mar 12 17:44:31 2013 +0100
@@ -34,7 +34,7 @@
                         <div class="duration">0:00:00</div>
                     </div>
                     <div class="explain-block shadow-block">
-                        <p><input class="keyword-search" type="search" placeholder="Rechercher" /></p>
+                        <div class="keyword-search"><a href="startscreen.html" class="placeholder">Rechercher</a></p>
                     </div>
                 </div>
                 
@@ -44,9 +44,10 @@
                 
                 <div class="play-bottom">
                     <div class="play-dataviz">
+                        <div class="play-svg"></div>
                         <div class="play-images"></div>
-                        <div class="play-svg"></div>
                     	<ul class="play-localtweets"></ul>
+                    	<ul class="play-tagcloud"></ul>
                     </div>
                 </div>
             </div>
--- a/startscreen.html	Fri Mar 08 19:05:17 2013 +0100
+++ b/startscreen.html	Tue Mar 12 17:44:31 2013 +0100
@@ -29,7 +29,7 @@
                         <h1>Le débat</h1>
                     </div>
                     <div class="play-block shadow-block">
-                        <div class="play-button">&#9654;</div>
+                        <a class="play-button" href="#">&#9654;</a>
                         <div class="duration">0:00:00</div>
                     </div>
                     <div class="explain-block shadow-block">