js/playscreen.js
changeset 7 a2d5b669f663
parent 6 14dd1980b0b9
child 8 ba3652cdd44b
child 9 5b743d461f99
equal deleted inserted replaced
6:14dd1980b0b9 7:a2d5b669f663
     8     return "http://159.217.144.101:8050/sia-solr/" + table + "/select?" + $.param(params) + "&wt=json&json.wrf=?";
     8     return "http://159.217.144.101:8050/sia-solr/" + table + "/select?" + $.param(params) + "&wt=json&json.wrf=?";
     9 }
     9 }
    10 
    10 
    11 function showData() {
    11 function showData() {
    12     
    12     
    13     var topicHash = document.location.hash || "#topics=5,15";
    13     var topicHash = document.location.hash || "#selectedtopics=5,15&visibletopics=5,10,15";
       
    14     
       
    15     var pageParams = {};
       
    16     
       
    17     topicHash
       
    18     	.replace(/^#/,'')
       
    19     	.split('&')
       
    20     	.forEach(function(p) {
       
    21     		var s = p.split('=');
       
    22     		pageParams[s[0]] = s[1].split(",").map(function(t) { return decodeURIComponent(t)});
       
    23     	})
    14     
    24     
    15     var ordertag = 0;
    25     var ordertag = 0;
    16 
    26 
    17     function secsToString(seconds) {
    27     function secsToString(seconds) {
    18         var hours = Math.floor(seconds/3600),
    28         var hours = Math.floor(seconds/3600),
    46             data.topics[t.topic].score += t.weight;
    56             data.topics[t.topic].score += t.weight;
    47         });
    57         });
    48     });
    58     });
    49     
    59     
    50     var sortedTopics = data.topics.filter(function(t) {
    60     var sortedTopics = data.topics.filter(function(t) {
    51         return t.index !== topicPoubelle;
    61         return pageParams.visibletopics.indexOf(t.index.toString()) !==-1 && t.index !== topicPoubelle;
    52     }).sort(function(a,b) {
       
    53         return b.score - a.score;
       
    54     });
    62     });
    55     
    63     
    56     
    64     
    57     function showTopics(topiclist) {
    65     function showTopics(topiclist) {
    58         var tbhtml = topiclist.reduce(function(mem, topic) {
    66         var tbhtml = topiclist.reduce(function(mem, topic) {
   171         paper = new Raphael(jqsvg[0]),
   179         paper = new Raphael(jqsvg[0]),
   172         totalR = jqsvg.width(),
   180         totalR = jqsvg.width(),
   173         ph = jqsvg.height(),
   181         ph = jqsvg.height(),
   174         globW = 85,
   182         globW = 85,
   175         globL = 40,
   183         globL = 40,
   176         localL = 155,
   184         entonnoirR = 155,
       
   185         localL = 235,
   177         localW = 85,
   186         localW = 85,
   178         localR = (localL + localW),
   187         localR = (localL + localW),
   179         localTimeR = (localL + localW) + globL,
   188         localTimeR = (localL + localW) + globL,
   180         globR = (globW + globL),
   189         globR = (globW + globL),
   181         yscale = ph / data.duration,
   190         yscale = ph / data.duration,
   244     	higherFiveSecs,
   253     	higherFiveSecs,
   245     	localyscale;
   254     	localyscale;
   246 	
   255 	
   247 	entonnoir.toBack();
   256 	entonnoir.toBack();
   248     
   257     
       
   258     var cloudTemplate = _.template('<li style="font-size: <%- size %>px;"><%- word %></li>');
       
   259     
   249     function showLocal() {
   260     function showLocal() {
   250 		localyscale = ph / localduration;
   261 		localyscale = ph / localduration;
   251     	var localstart = localpos - localduration/2;
   262     	var localstart = localpos - localduration/2;
   252     		localend = localpos + localduration/2;
   263     		localend = localpos + localduration/2;
   253     		globtop = yscale * localstart,
   264     		globtop = yscale * localstart,
   254     		globbottom = yscale * localend,
   265     		globbottom = yscale * localend,
   255     		betweenx = (globR + localL) / 2,
   266     		betweenx = (globR + entonnoirR) / 2,
   256     		betweenyt = (globtop) / 2,
   267     		betweenyt = (globtop) / 2,
   257     		betweenyb = (globbottom + ph) / 2,
   268     		betweenyb = (globbottom + ph) / 2,
   258     		curve = (localL - globR) / 2,
   269     		curve = (entonnoirR - globR) / 2,
   259     		entonnoird = "M0," + globtop + "l" + globR + ",0Q" + betweenx + "," + globtop + "," + betweenx + ","
   270     		entonnoird = "M0," + globtop + "l" + globR + ",0Q" + betweenx + "," + globtop + "," + betweenx + ","
   260     			+ Math.max(globtop - curve, betweenyt) + "L" + betweenx + "," + Math.min(curve, betweenyt) + "Q"
   271     			+ Math.max(globtop - curve, betweenyt) + "L" + betweenx + "," + Math.min(curve, betweenyt) + "Q"
   261     			+ betweenx + ",0," + localL + ",0"
   272     			+ betweenx + ",0," + entonnoirR + ",0"
   262     			+ "L" + localR + ",0L" + localR + "," + ph + "L" + localL + "," + ph + "Q" + betweenx + "," + ph + ","
   273     			+ "L" + localR + ",0L" + localR + "," + ph + "L" + entonnoirR + "," + ph + "Q" + betweenx + "," + ph + ","
   263     			+ betweenx + "," + Math.max(ph - curve, betweenyb) +"L" + betweenx + "," + Math.min(globbottom + curve, betweenyb)
   274     			+ betweenx + "," + Math.max(ph - curve, betweenyb) +"L" + betweenx + "," + Math.min(globbottom + curve, betweenyb)
   264     			+ "Q" + betweenx + "," + globbottom + "," + globR + "," + globbottom + "L0," + globbottom;
   275     			+ "Q" + betweenx + "," + globbottom + "," + globR + "," + globbottom + "L0," + globbottom,
       
   276 			localkeywords = {};
   265 			
   277 			
   266 		entonnoir.attr("path",entonnoird);
   278 		entonnoir.attr("path",entonnoird);
   267 		localTimes.forEach(function(t) {
   279 		localTimes.forEach(function(t) {
   268 			t.text.remove();
   280 			t.text.remove();
   269 			t.line.remove();
   281 			t.line.remove();
   278 			return s.start < localend && s.end > localstart;
   290 			return s.start < localend && s.end > localstart;
   279 		});
   291 		});
   280 		localMmsoDelta = parseInt(filteredSegments[0].id.split("_")[1]);
   292 		localMmsoDelta = parseInt(filteredSegments[0].id.split("_")[1]);
   281 		localMmsos = filteredSegments.map(function(s) {
   293 		localMmsos = filteredSegments.map(function(s) {
   282 			var y = localyscale * (s.start - localstart),
   294 			var y = localyscale * (s.start - localstart),
   283 				h = localyscale * s.duration;
   295 				h = localyscale * s.duration,
   284 	        var rect = paper.rect( localL, y, localW, h );
   296 				rect = paper.rect( localL, y, localW, h ),
       
   297 				visibled = (
       
   298 					s.start < localstart
       
   299 					? s.duration - localstart + s.start
       
   300 					: (
       
   301 						s.end > localend
       
   302 						? s.duration - s.end + localend
       
   303 						: s.duration
       
   304 					)
       
   305 				);
       
   306 			_(s.keywords).each(function(v,k) {
       
   307 				localkeywords[k] = (v * visibled) + (localkeywords[k] || 0);
       
   308 			});
   285 	        rect.attr({stroke: "none", title: s.id});
   309 	        rect.attr({stroke: "none", title: s.id});
   286 	        if (parseInt(s.id.replace("MMSO_","")) % 2) {
   310 	        if (parseInt(s.id.replace("MMSO_","")) % 2) {
   287 	        	var altrect = paper.rect( localR, y, 60, h);
   311 	        	var altrect = paper.rect( localR, y, 60, h);
   288 	        	altrect.attr({stroke: "none", fill: "#222"});
   312 	        	altrect.attr({stroke: "none", fill: "#222"});
   289 	        	mmsoAlt.push(altrect);
   313 	        	mmsoAlt.push(altrect);
   354     		} else {
   378     		} else {
   355     			el.hide();
   379     			el.hide();
   356     		}
   380     		}
   357 	    });
   381 	    });
   358 	    
   382 	    
       
   383 	    localkeywords = _(localkeywords)
       
   384 	    	.chain()
       
   385 	    	.map(function(v,k) {
       
   386 	    		return { word: k, score: v }
       
   387 	    	})
       
   388 	    	.sortBy(function(w) {
       
   389 	    		return -w.score;
       
   390 	    	})
       
   391 	    	.first(30)
       
   392 	    	.value();
       
   393     	
       
   394     	var values = _(localkeywords).pluck('score'),
       
   395     		max = Math.max.apply(Math, values),
       
   396     		min = Math.min.apply(Math, values),
       
   397     		scale = 10 / (max - Math.min(max - .1, min));
       
   398 		
       
   399 		localkeywords.forEach(function(w) {
       
   400 			w.size = 10 + (w.score - min) * scale;
       
   401 		});
       
   402     	
       
   403     	$(".play-tagcloud").html(localkeywords.map(cloudTemplate).join(""));
       
   404 	    
   359 		throttledGetTweets();
   405 		throttledGetTweets();
   360 	    
   406 	    
   361 		showTopicViz();
   407 		showTopicViz();
   362     }
   408     }
   363     
   409     
   379     		var mmso = data.segments[localMmsoDelta + i];
   425     		var mmso = data.segments[localMmsoDelta + i];
   380     		var mmsostruct = tweetstructure[mmso.id];
   426     		var mmsostruct = tweetstructure[mmso.id];
   381     		if (mmsostruct) {
   427     		if (mmsostruct) {
   382 	    		for (var j = 0; j < topics.length; j++) {
   428 	    		for (var j = 0; j < topics.length; j++) {
   383 	    			var topicid = topics[j];
   429 	    			var topicid = topics[j];
   384 					if (mmsostruct[topicid]) {
   430 					if (mmsostruct.tweetids) {
   385 						var tweetids = mmsostruct[topicid].tweetids;
   431 						var tweetids = mmsostruct.tweetids[topicid];
   386 						for (var k = 0; k < tweetids.length; k++) {
   432 						for (var k = 0; k < tweetids.length; k++) {
   387 							toshow.push(tweetids[k]);
   433 							toshow.push(tweetids[k]);
   388 						}
   434 						}
   389 					}
   435 					}
   390 	    		}
   436 	    		}
   398     		return ((tw.status == 2) && (tw.timestamp > (localpos - localduration / 2)) && (tw.timestamp < (localpos + localduration / 2)));
   444     		return ((tw.status == 2) && (tw.timestamp > (localpos - localduration / 2)) && (tw.timestamp < (localpos + localduration / 2)));
   399 		});
   445 		});
   400 		
   446 		
   401 		tweetstoshow.forEach(function(tw) {
   447 		tweetstoshow.forEach(function(tw) {
   402 			tw.topic = tw.topics.filter(function(t) {
   448 			tw.topic = tw.topics.filter(function(t) {
   403 				return topics.indexOf(t.topic) !== -1;
   449 				return topics.indexOf(t.topic.toString()) !== -1;
   404 			}).sort(function(a,b) {
   450 			}).sort(function(a,b) {
   405 				return b.weight - a.weight
   451 				return b.weight - a.weight
   406 			})[0];
   452 			})[0];
   407 		});
   453 		});
       
   454 		
       
   455 		tweetstoshow = tweetstoshow.filter(function(t) {
       
   456 			return !!t.topic;
       
   457 		})
   408 				
   458 				
   409 		tweetstoshow.sort(function(a, b) {
   459 		tweetstoshow.sort(function(a, b) {
   410 			return b.topic.weight - a.topic.weight; 
   460 			return b.topic.weight - a.topic.weight; 
   411 		});
   461 		});
   412 		
   462 		
   413 		tweetstoshow = tweetstoshow.slice(0,10);
   463 		tweetstoshow = tweetstoshow.slice(0,10);
   414 		
   464 		
   415 		tweetstoshow.sort(function(a, b) {
   465 		tweetstoshow.sort(function(a, b) {
   416 			return a.timestamp - b.timestamp;
   466 			return a.timestamp - b.timestamp;
   417 		});
   467 		});
   418 		
       
   419 		console.log(tweetstoshow);
       
   420 		
   468 		
   421 		var html = tweetstoshow.map(tweetTemplate).join("");
   469 		var html = tweetstoshow.map(tweetTemplate).join("");
   422 		
   470 		
   423 		$(".play-localtweets").html(html);
   471 		$(".play-localtweets").html(html);
   424 		var h = 0;
   472 		var h = 0;
   429 		showTopicViz();
   477 		showTopicViz();
   430     	
   478     	
   431     }
   479     }
   432     
   480     
   433     function getMmsoTweetIds(mmstruct) {
   481     function getMmsoTweetIds(mmstruct) {
   434     	    	
   482     	TopicsBean.bestSocialInteractionsIdsMatching(mmstruct.mmsoid, 0, _NTWEETS, {
   435     	TopicsBean.bestSocialInteractionsIdsMatching(mmstruct.mmso, mmstruct.topic, 0, _NTWEETS, {
   483 			callback: function(res) {
   436 			callback: function(tw) {
       
   437 				mmstruct.status = 2;
   484 				mmstruct.status = 2;
   438 				mmstruct.tweetids = tw;
   485 				mmstruct.tweetids = res;
   439 				for (var k = 0; k < tw.length; k++) {
   486 				for (var j = 0; j < res.length; j++) {
   440 					var tweetid = tw[k],
   487 					var tweetids = res[j],
   441 						relevance = mmstruct.weight * (_NTWEETS - k) / _NTWEETS;
   488 						ntw = tweetids.length,
   442 					if (!requestedtweets[tweetid]) {
   489 						topicweight = data.topics[j].weights[mmstruct.mmsoindex];
   443 						requestedtweets[tweetid] = {
   490 					for (var k = 0; k < tweetids.length; k++) {
   444 							id: tweetid,
   491 						var relevance = topicweight * (ntw - k) / ntw,
   445 							status: 0,
   492 							tweetid = tweetids[k];
   446 							topics: []
   493 						if (!requestedtweets[tweetid]) {
       
   494 							requestedtweets[tweetid] = {
       
   495 								id: tweetid,
       
   496 								status: 0,
       
   497 								topics: []
       
   498 							}
   447 						}
   499 						}
       
   500 						requestedtweets[tweetid].topics.push({
       
   501 							topic: j,
       
   502 							weight: relevance
       
   503 						});
   448 					}
   504 					}
   449 					requestedtweets[tweetid].topics.push({
       
   450 						topic: mmstruct.topic,
       
   451 						weight: relevance
       
   452 					});
       
   453 				}
   505 				}
   454 				debouncedGetTweetData();
   506 				debouncedGetTweetData();
   455 			},
   507 			},
   456 			errorHandler: function(err) {
   508 			errorHandler: function(err,info) {
   457 				mmstruct.status = 0;
   509 				mmstruct.status = 0;
   458 				console.log(err);
   510 				console.error(err,info);
   459 				throttledGetTweetIds();
   511 				throttledGetTweetIds();
   460 			}
   512 			}
   461 		});
   513 		});
   462     }
   514     }
   463     
   515     
   467     	
   519     	
   468     	console.log("getTweetIds");
   520     	console.log("getTweetIds");
   469     	
   521     	
   470     	var toload = [];
   522     	var toload = [];
   471     	
   523     	
   472     	_(tweetstructure).each(function(v) {
   524     	_(tweetstructure).each(function(w) {
   473     		_(v).each(function(w) {
   525 			if (!w.status) {
   474     			if (!w.status) {
   526 				w.status = 1;
   475     				w.status = 1;
   527 				toload.push(w);
   476     				toload.push(w);
   528 			}
   477     			}
       
   478     		});
       
   479     	});
   529     	});
   480     	
       
   481     	console.log("Loading tweet ids");
       
   482     	
   530     	
   483     	if (toload.length) {
   531     	if (toload.length) {
   484     		
   532     		
   485     		if (toload.length > _MAX_BATCH) {
   533     		if (toload.length > _MAX_BATCH) {
   486     			toload = _(toload).shuffle().slice(0,_MAX_BATCH);
   534     			toload = _(toload).shuffle().slice(0,_MAX_BATCH);
   543     	var topics = Array.prototype.join.call($(".topic.selected").map(function(){return $(this).attr("data-topic-id")})).split(",");
   591     	var topics = Array.prototype.join.call($(".topic.selected").map(function(){return $(this).attr("data-topic-id")})).split(",");
   544     	
   592     	
   545     	for (var i = 0; i < localMmsos.length; i++) {
   593     	for (var i = 0; i < localMmsos.length; i++) {
   546     		var mmso = data.segments[localMmsoDelta + i];
   594     		var mmso = data.segments[localMmsoDelta + i];
   547     		if (!tweetstructure[mmso.id]) {
   595     		if (!tweetstructure[mmso.id]) {
   548     			tweetstructure[mmso.id] = {}
   596     			tweetstructure[mmso.id] = {
   549     		}
   597     				mmsoid: mmso.id,
   550     		var mmsostruct = tweetstructure[mmso.id];
   598     				mmsoindex: localMmsoDelta + i,
   551     		for (var j = 0; j < topics.length; j++) {
   599     				status: 0
   552 				var topicid = topics[j],
   600     			}
   553 					weight = data.topics[topics[j]].weights[localMmsoDelta + i];
       
   554 				if (weight > .1 && !mmsostruct[topicid]) {
       
   555 					mmsostruct[topicid] = {
       
   556 						topic: topicid,
       
   557 						mmso: mmso.id,
       
   558 						status: 0,
       
   559 						weight: weight,
       
   560 						tweetids: []
       
   561 					};
       
   562 				}
       
   563     		}
   601     		}
   564     	}
   602     	}
   565     	
   603     	
   566     	throttledGetTweetIds();
   604     	throttledGetTweetIds();
   567     	throttledShowTweets();
   605     	throttledShowTweets();
   569     
   607     
   570     var throttledGetTweets = _.throttle(getLocalTweets, 500),
   608     var throttledGetTweets = _.throttle(getLocalTweets, 500),
   571     	throttledShowLocal = _.throttle(showLocal, 100);
   609     	throttledShowLocal = _.throttle(showLocal, 100);
   572     
   610     
   573     showTopics(sortedTopics);
   611     showTopics(sortedTopics);
   574     (topicHash.match(/\d+/g) || []).forEach(function(id) {
   612     
       
   613     pageParams.selectedtopics.forEach(function(id) {
   575     	$(".topic[data-topic-id=" + id + "]").addClass("selected").attr("data-timestamp",++ordertag);
   614     	$(".topic[data-topic-id=" + id + "]").addClass("selected").attr("data-timestamp",++ordertag);
   576     });
   615     });
   577     
   616     
   578     var localpos = 7100,
   617     var localpos = 300,
   579     	localduration = 600;
   618     	localduration = 600;
   580     	
   619     	
   581     showLocal();
   620     showLocal();
   582     
   621     
   583     $(".topics-block").on("mouseenter", ".topic", function() {
   622     $(".topics-block").on("mouseenter", ".topic", function() {
   643     			localpos = Math.max(localduration / 2, Math.min(data.duration - localduration / 2, localpos));
   682     			localpos = Math.max(localduration / 2, Math.min(data.duration - localduration / 2, localpos));
   644     			throttledShowLocal();
   683     			throttledShowLocal();
   645     		}
   684     		}
   646 	        totalScroll = 0;
   685 	        totalScroll = 0;
   647 	    }
   686 	    }
   648     })
   687     });
       
   688     
       
   689     if (pageParams.keywords && pageParams.keywords.length) {
       
   690     	$(".keyword-search a").removeClass("placeholder").text(pageParams.keywords.join(", "));
       
   691     }
   649     
   692     
   650 }
   693 }
   651 
   694 
   652 var data = { duration: 10200, topics: [] },
   695 var data = { duration: 10200, topics: [] },
   653     colorset = ["#E41A1C", "#377EB8", "#4DAF4A", "#984EA3", "#FF7F00", "#A65628", "#F781BF"];
   696     colorset = ["#E41A1C", "#377EB8", "#4DAF4A", "#984EA3", "#FF7F00", "#A65628", "#F781BF"];
   703     
   746     
   704     loadJson("data/minutes.json", "minutes");
   747     loadJson("data/minutes.json", "minutes");
   705     loadJson("data/5secs.json", "fiveseconds");
   748     loadJson("data/5secs.json", "fiveseconds");
   706     
   749     
   707     loadJson(
   750     loadJson(
   708         solrUrl("MMSO", {q: "*:*", fl: "topic*,MMSO_id,multimediaSegment", rows: 250 }),
   751         solrUrl("MMSO", {q: "*:*", fl: "topic*,MMSO_id,multimediaSegment,keywordsFromSocial,keywordsFromAudio", rows: 250 }),
   709         "segments",
   752         "segments",
   710         function(d) {
   753         function(d) {
   711             return d.response.docs.map(function(mmso) {
   754             return d.response.docs.map(function(mmso) {
   712                 var tc = mmso.multimediaSegment.match(/\d+/g),
   755                 var tc = mmso.multimediaSegment.match(/\d+/g),
   713                     start = parseInt(tc[0]),
   756                     start = parseInt(tc[0]),
   714                     end = parseInt(tc[1]),
   757                     end = parseInt(tc[1]),
   715                     topics = [];
   758                     topics = [],
       
   759                     keywords = {};
       
   760                 
       
   761                 function getKeywords(field) {
       
   762                 	var keywordtexts = mmso[field].replace(/[{}]/g,'').split(", ");
       
   763 	                keywordtexts.forEach(function(k) {
       
   764 	                	var t = k.split('='),
       
   765 	                		s = parseFloat(t[1]),
       
   766 	                		w = t[0].split(" ");
       
   767 	            		w.forEach(function(m) {
       
   768 	            			if (m.length > 2) {
       
   769 	            				keywords[m] = s + (keywords[m] || 0);
       
   770 	            			}
       
   771 	            		});
       
   772 	                });
       
   773                 }
       
   774                 
       
   775                 getKeywords("keywordsFromAudio");
       
   776                 getKeywords("keywordsFromSocial");
       
   777                 
   716                 for (var k in mmso) {
   778                 for (var k in mmso) {
   717                     if (k.substr(0,5) === "topic" && mmso[k] > .01) {
   779                     if (k.substr(0,5) === "topic" && mmso[k] > .01) {
   718                         topics.push({
   780                         topics.push({
   719                             topic: parseInt(k.substr(5)),
   781                             topic: parseInt(k.substr(5)),
   720                             weight: mmso[k]
   782                             weight: mmso[k]
   731                 return {
   793                 return {
   732                     id: mmso.MMSO_id,
   794                     id: mmso.MMSO_id,
   733                     start: start,
   795                     start: start,
   734                     end: end,
   796                     end: end,
   735                     duration: end - start,
   797                     duration: end - start,
   736                     topics: topics
   798                     topics: topics,
       
   799                     keywords: keywords
   737                 }
   800                 }
   738             }).sort(function(a,b) {
   801             }).sort(function(a,b) {
   739                 return a.start - b.start;
   802                 return a.start - b.start;
   740             });
   803             });
   741         })
   804         })