Commit 94be387d authored by Daniel Suarez Souto's avatar Daniel Suarez Souto
Browse files

Changes for visualization of the new sources and mobile view

parent 1308b39d
......@@ -124,9 +124,14 @@
line-height: 35px;
border-radius: 5px 5px 0 0;
}
@media screen and (min-width: 480px) and (max-width: 959px){
iron-pages {
padding: 0px;
@media (max-width: 600px){
.top-bar.dashboard-gsicrawler{
margin-top: 15px;
}
.container{
width: 100%;
padding-left: 0px;
padding-right: 0px;
}
}
......
......@@ -20,6 +20,9 @@
<link rel="import" href="/elements/annotate-view/annotate-view.html">
<link rel="import" href="/elements/happymap/happymap-element.html">
<link href="dist/css/fs-modal.min.css" rel="stylesheet">
<script src="dist/js/fs-modal.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js"></script>
......@@ -68,34 +71,18 @@
</div>
<br>
<div class="row">
<div class="col-md-6">
<number-chart
data="{{data}}"
object="http://dbpedia.org/resource/CNN"
aggKey="schema:author"
title="CNN"
icon="/images/cnn_blanco.svg"
stylebg="bg-red">
</number-chart>
<number-chart
data="{{data}}"
object="http://dbpedia.org/resource/The_New_York_Times"
aggKey="schema:author"
title="The New York Times"
icon="/images/times1.png"
stylebg="bg-green">
</number-chart>
</div>
<div class="col-md-6">
<div class="col-md-6 col-xs-6 col-sm-6">
<number-chart
data="{{data}}"
object="http://dbpedia.org/resource/Al_Jazeera"
aggKey="schema:author"
title="Al Jazeera"
icon="/images/Aljazeera_blanco.svg"
object="schema:NewsArticle"
aggKey="type"
title="News"
icon="/images/news.svg"
subtitle="Total"
stylebg="bg-yellow">
</number-chart>
</div>
<div class="col-md-6 col-xs-6 col-sm-6">
<number-chart
data="{{data}}"
aggKey="type"
......@@ -187,7 +174,7 @@
<div class="row">
<div class="col-md-6">
<paper-tabs selected="{{selectedpage}}" style="height: 38px">
<paper-tab><iron-icon icon="icons:receipt"></iron-icon> List of news</paper-tab>
<paper-tab><iron-icon icon="icons:receipt"></iron-icon> News</paper-tab>
<!-- <paper-tab><iron-icon icon="icons:speaker-notes"></iron-icon> Social Media</paper-tab>
--> <paper-tab><iron-icon icon="icons:speaker-notes"></iron-icon> Magazines</paper-tab>
</paper-tabs>
......
......@@ -20,6 +20,9 @@
<link rel="import" href="/elements/annotate-view/annotate-view.html">
<link rel="import" href="/elements/happymap/happymap-element.html">
<link href="dist/css/fs-modal.min.css" rel="stylesheet">
<script src="dist/js/fs-modal.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js"></script>
......@@ -68,34 +71,18 @@
</div>
<br>
<div class="row">
<div class="col-md-6">
<number-chart
data="{{data}}"
object="http://dbpedia.org/resource/CNN"
aggKey="schema:author"
title="CNN"
icon="/images/cnn_blanco.svg"
stylebg="bg-red">
</number-chart>
<number-chart
data="{{data}}"
object="http://dbpedia.org/resource/The_New_York_Times"
aggKey="schema:author"
title="The New York Times"
icon="/images/times1.png"
stylebg="bg-green">
</number-chart>
</div>
<div class="col-md-6">
<div class="col-md-6 col-xs-6 col-sm-6">
<number-chart
data="{{data}}"
object="http://dbpedia.org/resource/Al_Jazeera"
aggKey="schema:author"
title="Al Jazeera"
icon="/images/Aljazeera_blanco.svg"
object="schema:NewsArticle"
aggKey="type"
title="News"
icon="/images/news.svg"
subtitle="Total"
stylebg="bg-yellow">
</number-chart>
</div>
<div class="col-md-6 col-xs-6 col-sm-6">
<number-chart
data="{{data}}"
aggKey="type"
......@@ -187,7 +174,7 @@
<div class="row">
<div class="col-md-6">
<paper-tabs selected="{{selectedpage}}" style="height: 38px">
<paper-tab><iron-icon icon="icons:receipt"></iron-icon> List of news</paper-tab>
<paper-tab><iron-icon icon="icons:receipt"></iron-icon> News</paper-tab>
<!-- <paper-tab><iron-icon icon="icons:speaker-notes"></iron-icon> Social Media</paper-tab>
--> <paper-tab><iron-icon icon="icons:speaker-notes"></iron-icon> Magazines</paper-tab>
</paper-tabs>
......@@ -410,7 +397,7 @@ H2020 RIA Action Grant No. 740934 under the call SEC-06-FCT-2016 — Developing
if(ready){
this.client.search({
// undocumented params are appended to the query string
index: "gsicrawler",
index: "gsicrawlerprueba",
body: {
size: 200,
query: {
......
......@@ -80,7 +80,6 @@ paper-icon-button.green:hover {
justify-content: center;
margin-bottom: 13px;
margin-top: 13px;
visibility: hidden;
}
.legend_component {
display: flex;
......
......@@ -16,22 +16,15 @@
<iron-icon icon="{{icon}}"></iron-icon>
<span>{{title}}</span>
</div>
<div id="nodata" style="margin-top: 35px">No entries match the current filters</div>
<div id="nodata" style="margin-top: 60px">No entries match the current filters</div>
<div class="content" style="text-align:center; margin: 0 auto;">
<div id="legend_list">
<div class="legend_component">
<div class="legend_square" style="background-color: #f90;"></div>
Places
</div>
<div class="legend_component">
<div class="legend_square" style="background-color: #dd4b39;"></div>
Organization
</div>
<div class="legend_component">
<div class="legend_square" style="background-color: #00c0ef;"></div>
Person
</div>
<template is="dom-repeat" items="{{legend}}" as="element">
<div class="legend_component">
<div class="legend_square" style$="background-color:{{element.color}};"></div>
{{element.name}}
</div>
</template>
</div>
</div>
<div id="tagwrapper" style="min-height: 215px; padding-left: 7px;">
......@@ -77,10 +70,11 @@
value: "Entities Chart"
},
legend: {
type: Boolean,
value: false
type: Array,
},
color: {
type: String
},
query: {
type: String,
observer: '_queryChanged'
......@@ -119,13 +113,11 @@
}
},
ready: function(){
},
_dataChanged: function() {
var that = this
if(this.legend){
this.$.legend_list.style.visibility = 'visible';
}else{
this.$.legend_list.style.visibility = 'hidden';
}
var aggs = 0
//console.log(this.field)
try{
......@@ -134,30 +126,25 @@
catch(err){
var hits = []
}
//console.log(hits)
console.log(hits)
var data = [];
switch(this.field){
case "entities.name":
console.log("entities.name")
hits.forEach(function(entry) {
entry.entity_type.hits.hits[0]._source.entities.forEach(function(entity){
if(entry.key===entity['schema:name']){
//console.log([entry.key, entry.doc_count,entity['@type'][0]])
data.push([entry.key, entry.doc_count,entity['@type'][0]]);
}
});
if(entry.key===entity['schema:name']){
data.push([entry.key, entry.doc_count,entity['@type'][0]]);
}
});
});
break;
case "categories.name":
console.log("categories.name")
hits.forEach(function(entry){
data.push([entry.key,entry.doc_count])
})
break;
}
if(this.field === "entities.name"){
}
if(data.length == 0 ){
this.$.tagwrapper.style.visibility = 'hidden';
......@@ -170,7 +157,6 @@
filtered = true;
},
getEntity: function(entity) {
console.log(this.entity)
switch(this.field){
case "entities.name":
return entity;
......@@ -184,22 +170,22 @@
}
},
getBgColour: function(type){
//console.log(entity)
switch(type){
case "schema:Place":
color = "#ff9900"
break;
case "schema:Organization":
color = "#dd4b39"
break;
default:
color = "#00c0ef"
}
if(this.field ==="categories.name"){
color = "#505050";
var legend_elements = this.legend
if(legend_elements){
legend_elements.forEach(function(entry){
if(entry["type"]===type){
color=entry["color"]
}
})
}else { // There are other parameter to select just a color
if(this.color){
color = this.color
}else{ //Default background color
color = "#000000"
}
}
$(".entities .badge.badge-secondary").mouseover(function(){
$(this).css("background-color", $(this).attr('data-color'));
......@@ -215,7 +201,6 @@
filter: function(e) {
var myfilters = [e.model.__data__.entity[0]]
console.log(myfilters)
var field =""
switch(this.field){
case "entities.name":
......
......@@ -323,7 +323,7 @@ Data can be provided in one of three ways:
console.log(col)
console.log(param)
field='schema:author.keyword'
var value=param.split(" ")[0]
var value=param.split(" ").join("_")
console.log(value)
var sources=this.sources
for(var key in sources){
......@@ -343,7 +343,13 @@ Data can be provided in one of three ways:
this.param = arr[sel][0]
var param = this.param
//console.log(sources)
var value=param.split(" ")[0]
//var value=param.split(" ")
var value=param.split(" ").join("_")
/*if(value.length > 1){
value = value[1]
}else {
value = value[0]
}*/
console.log(value)
for(var key in sources){
......@@ -573,7 +579,7 @@ Data can be provided in one of three ways:
},
_dataChanged: function() {
//console.log("_dataChanged")
//onsole.log("_dataChanged")
//console.log(this.field)
//console.log(this.data)
var that = this
......@@ -629,6 +635,7 @@ Data can be provided in one of three ways:
});
var source=this.sources
console.log(source)
for(var i=1;i<data[0].length;i++){
data[0][i]=source[data[0][i]]
}
......
......@@ -19,11 +19,11 @@
<div class$="tweet {{checkSentiment(news.sentiments)}} same-height" ident$="subitem[[index]]" style=" text-align: center; min-height: 65px;display: flex;align-items: center;justify-content: center;">
<div class="row" style="width: 100%;">
<button data-toggle="modal" data-target$="#subitem[[index]]" style="background: none; border: none; cursor: pointer; width: 100%;" title="Check the new">
<div class="col-md-12 headline">
<div class="col-md-2 img-wrapper">
<div class="col-md-12 col-xs-12 col-sm-12 headline">
<div class="col-md-2 col-xs-2 col-sm-2 img-wrapper">
<img src={{checkSource(news)}} style="width: 100%; display:block; position: relative;" align="left">
</div>
<div class="col-md-10" style="display: flex; align-items: center;">
<div class="col-md-10 col-xs-10 col-sm-10" style="display: flex; align-items: center;">
<span class="text" style="font-size:15px; display:inline-block; vertical-align: middle; ">{{getHeadline(news)}}</span>
</div>
</div>
......@@ -34,16 +34,16 @@
<div class="modal-content" style="height: fit-content;">
<div class="modal-header" style="height:80px;background-color: #449DD5; box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.2); border-radius: 5px 5px 0 0; display: flex;align-items: center;justify-content: center;">
<!-- <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="color: #fff;opacity: inherit;"><span aria-hidden="true">&times;</span></button> -->
<div class="col-md-12" style="display: flex;flex-direction: row;justify-content: space-around;align-content: center;">
<div class="col-md-2 img-wrapper" style="width:13%">
<img src="{{checkSource(news)}}" style="width: 100%; display:block; position: relative;" align="left">
<div class="col-md-12 col-sm-12 col-xs-12" style="display: flex;flex-direction: row;justify-content: space-around;align-content: center; padding: 0">
<div class="col-md-2 col-sm-2 col-xs-2 img-wrapper" style="width:13%; padding: 0">
<img src="{{checkSource(news)}}" style="width: 100%; display:block; position: relative; padding: 0" align="left">
</div>
<div class="col-md-10" style="display: flex; flex-direction: row; justify-content: center; align-content: center;">
<div class="col-md-10 col-sm-10 col-xs-10" style="display: flex; flex-direction: row; justify-content: center; align-content: center;">
<h4 class="modal-title" id="myModalLabel" style="display: flex; justify-self: center; align-self: center;">
<a target="_blank" rel="noopener noreferrer"href$="{{getID(news)}}" style=" color: #fff; outline: 0 !important; text-decoration: none !important; display:inline-block; vertical-align: middle;" title="Open the new">{{getHeadline(news)}} </a>
</h4>
</div>
<div class="col-md-2" style="display: flex; flex-direction: row; justify-content: center; align-content: center;">
<div class="col-md-2 col-xs-2 col-sm-2" style="display: flex; flex-direction: row; justify-content: center; align-content: center;">
<h4 style="color: white;color: white; display: flex; justify-self: center; align-self: center; font-style: italic;">{{getDate(news)}}</h4>
</div>
......@@ -51,7 +51,7 @@
</div>
<div class="modal-body" style="height: 520px" >
<div class="col-md-5" style=" overflow-x: hidden; overflow-y: auto; height: 100%;">
<div class="col-md-5 col-xs-5 col-sm-5" style=" overflow-x: hidden; overflow-y: auto; height: 100%;">
<div class="content" style="text-align:center; margin: 0 auto;">
<br>
<div class="leyend" style="display: flex; flex-direction: row; justify-content: center; margin-bottom: 5px">
......@@ -86,7 +86,7 @@
</template>
</div>
</div>
<div class="col-md-7" style="overflow: hidden; height: 100%;">
<div class="col-md-7 col-xs-7 col-sm-7" style="overflow: hidden; height: 100%;">
<div id$="text[[index]]" class="tab-pane fade in active" style="background-color: #eeeeee96; float: right; border: 1px solid #B3BFC7; padding: 20px; padding-top: 0px; overflow-y: auto; height: fit-content; max-height: 100%; ">
<div id$="{{getID(news)}}" class="text-hightlight" style="text-align: justify; white-space: pre-line;">
{{getNew(news)}}
......@@ -303,8 +303,18 @@
return "/images/times1.png"
else if(source.indexOf("Al") > -1)
return "/images/Aljazeera_blanco.svg"
else if(source.indexOf("Engadget") > -1)
return "/images/Engadget_White.svg"
else if(source.indexOf("BBC") > -1)
return "/images/BBC_White.svg"
else if(source.indexOf("Reuters") > -1)
return "/images/Reuters_White.svg"
else if(source.indexOf("CNET") > -1)
return "/images/CNET_White.svg"
else if(source.indexOf("Lifehacker") > -1)
return "/images/LifeHacker_White.svg"
else
return "/images/news.ico"
return "/images/Google_White.svg"
},
checkEmotion: function(source) {
if(source[0]['onyx:hasEmotion']['onyx:hasEmotionCategory'].indexOf("anger") > -1)
......@@ -387,25 +397,6 @@
$('#'+element.parentElement.id).animate({scrollTop: $('#'+element.parentElement.id).scrollTop() + $('#'+element.parentElement.id + ' span').position().top - 200}, 400)
}
//var subtext = text.substring(0,beginIndex)
/*if (beginIndex[0] >= 0) {
if(text[beginIndex[0]]===' ') cnt+=1
text_highlighted = text.substring(0,beginIndex[0]+cnt) + "<span class='highlight' style='background-color:yellow'>" + text.substring(beginIndex[0]+cnt,endIndex[0]+1+cnt) + "</span>"
for(var i =1 ; i<beginIndex.length;i++){
if(text[beginIndex[i]+cnt]===' ') cnt+=1
text_highlighted+=text.substring(endIndex[i-1]+1+cnt,beginIndex[i]+cnt)
text_highlighted+="<span class='highlight' style='background-color:yellow'>"
text_highlighted+=text.substring(beginIndex[i]+cnt,endIndex[i]+1+cnt)
text_highlighted+="</span>"
}
text_highlighted+= text.substring(endIndex[endIndex.length-1]+1+cnt)
element.innerHTML = text_highlighted*/
//console.log(text_highlighted)
//console.log(cnt)
//console.log($('#'+element.parentElement.id+' span').position().top)
$('#'+element.parentElement.id).animate({scrollTop: $('#'+element.parentElement.id).scrollTop() + $('#'+element.parentElement.id + ' span').position().top - 200}, 400)
},
......
......@@ -109,6 +109,7 @@ paper-icon-button.green:hover {
flex-direction: row;
justify-content: center;
align-content: center;
padding: 0;
}
#nodata {
position: absolute;
......
......@@ -139,7 +139,7 @@
<div id="tagwrapper" style="min-height: 215px;">
<br>
<template is="dom-repeat" items="{{entities}}" as="person">
<div class="col-md-3" style="text-align:center; overflow: hidden; height: 115px;" on-tap="filter"><img src="{{person.0}}" onerror="this.src='/images/Person.png';"height="70px" style=" width: 100%;object-fit: contain;" /><br><span>{{getChars(person.1)}}</span>
<div class="col-md-3 col-xs-3" style="text-align:center; overflow: hidden; height: 115px;" on-tap="filter"><img src="{{person.0}}" onerror="this.src='/images/Person.png';"height="70px" style=" width: 100%;object-fit: contain;" /><br><span>{{getChars(person.1)}}</span>
</div>
</template>
</div>
......
......@@ -31,11 +31,11 @@
<div class="row" style="width: 100%;">
<button data-toggle="modal" data-target$="#article[[index]]" style="background: none; border: none; cursor: pointer; width: 100%;" title="Check the article">
<div class="col-md-12 headline">
<div class="col-md-2" style="justify-self: center; align-self: center;">
<div class="col-md-12 col-xs-12 col-sm-12 headline">
<div class="col-md-2 col-xs-2 col-sm-2" style="justify-self: center; align-self: center;">
<img src={{checkSource(news)}} style="width: 100%; display:block; position: relative;" align="left">
</div>
<div class="col-md-7">
<div class="col-md-7 col-xs-7 col-sm-7">
<a class="text" style="font-size: 15px; display: inline-block; vertical-align: middle;"> {{getHeadline(news)}}</a>
</div>
......@@ -376,16 +376,11 @@
}
text_highlighted+= text.substring(endIndex[endIndex.length-1]+1+cnt)
element.innerHTML = text_highlighted
//console.log(text_highlighted)
//console.log(cnt)
// Select the tab
$('#tabText a').tab('show')
//Dynamic Scroll
/*setTimeout(function() {
$('#'+element.parentElement.id).animate({scrollTop: $('#'+element.parentElement.id).scrollTop() + $('#'+element.parentElement.id + ' span').position().top - 200}, 400)
}, 200)*/
//console.log($('#'+element.parentElement.id))
$('#'+element.parentElement.id).animate({scrollTop: $('#'+element.parentElement.id).scrollTop() + $('#'+element.parentElement.id + ' span').position().top - 200}, 400)
......@@ -446,22 +441,6 @@
$('#'+element.parentElement.id).animate({scrollTop: $('#'+element.parentElement.id).scrollTop() + $('#'+element.parentElement.id + ' span').position().top - 200}, 400)
}
//var subtext = text.substring(0,beginIndex)
/*if (beginIndex[0] >= 0) {
if(text[beginIndex[0]]===' ') cnt+=1
text_highlighted = text.substring(0,beginIndex[0]+cnt) + "<span class='highlight' style='background-color:yellow'>" + text.substring(beginIndex[0]+cnt,endIndex[0]+1+cnt) + "</span>"
for(var i =1 ; i<beginIndex.length;i++){
if(text[beginIndex[i]+cnt]===' ') cnt+=1
text_highlighted+=text.substring(endIndex[i-1]+1+cnt,beginIndex[i]+cnt)
text_highlighted+="<span class='highlight' style='background-color:yellow'>"
text_highlighted+=text.substring(beginIndex[i]+cnt,endIndex[i]+1+cnt)
text_highlighted+="</span>"
}
text_highlighted+= text.substring(endIndex[endIndex.length-1]+1+cnt)
element.innerHTML = text_highlighted*/
//console.log(text_highlighted)
//console.log(cnt)
},
getCategory: function(category){
......
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="300"
height="86.219055"
version="1.0"
id="svg2"
inkscape:version="0.48.5 r10040"
sodipodi:docname="BBC.svg">
<metadata
id="metadata22">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
</cc:Work>
</rdf:RDF>
</metadata>
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="640"
inkscape:window-height="480"
id="namedview20"
showgrid="false"
inkscape:zoom="0.82337429"
inkscape:cx="138.85308"
inkscape:cy="53.495894"
inkscape:window-x="1209"
inkscape:window-y="244"
inkscape:window-maximized="0"
inkscape:current-layer="svg2" />
<defs
id="defs4" />
<g
transform="translate(-27.1382,-941.70395)"
id="g6"
style="fill:#ffffff">
<g
transform="matrix(0.82302261,0,0,-0.82302261,189.63913,997.27701)"
style="fill:#ffffff"
id="g8">
<path
style="fill:#ffffff;fill-rule:nonzero"
d="m 0,0 c 0,-11.25 -14,-10.583 -14,-10.583 l -14,0 0,20.333 14,0 C 0.417,9.833 0,0 0,0 m -28,40.75 10.667,0 c 11.083,-0.584 10.666,-8.833 10.666,-8.833 0,-10.25 -12.25,-10.417 -12.25,-10.417 l -9.083,0 0,19.25 z M -2.583,17.5 c 0,0 9.583,4.083 9.5,14.917 0,0 1.457,17.749 -22.063,19.916 l -26.104,0 0,-74.416 29.917,0 c 0,0 25,-0.084 25,21 0,0 0.583,14.333 -16.25,18.583 m -67.545,49.4156 109.878,0 0,-103.544 -109.878,0 0,103.544 z"
id="path10" />
</g>
<g
transform="matrix(0.82302261,0,0,-0.82302261,85.355129,997.27701)"
style="fill:#ffffff"
id="g12">
<path
d="m 0,0 c 0,-11.25 -14,-10.583 -14,-10.583 l -14,0 0,20.333 14,0 C 0.417,9.833 0,0 0,0 m -28,40.75 10.667,0 c 11.083,-0.584 10.666,-8.833 10.666,-8.833 0,-10.25 -12.25,-10.417 -12.25,-10.417 l -9.083,0 0,19.25 z M -2.583,17.5 c 0,0 9.583,4.083 9.5,14.917 0,0 1.457,17.749 -22.063,19.916 l -26.104,0 0,-74.416 29.917,0 c 0,0 25,-0.084 25,21 0,0 0.583,14.333 -16.25,18.583 m -67.545,49.4156 109.878,0 0,-103.544 -109.878,0 0,103.544 z"
style="fill:#ffffff;fill-rule:nonzero"
id="path14" />
</g>
<g
transform="matrix(0.82302261,0,0,-0.82302261,308.1885,958.5961)"
style="fill:#ffffff"
id="g16">
<path
d="m 0,0 0,-13.75 c 0,0 -13.417,8.25 -28.25,8.417 0,0 -27.666,0.54 -28.916,-26.522 0,0 -1,-24.895 28.583,-26.312 0,0 12.417,-1.5 29.25,9.25 l 0,-14.25 c 0,0 -22.583,-13.416 -48.75,-3.083 0,0 -22,8.04 -22.834,34.395 0,0 -0.917,27.105 28.417,36.105 0,0 7.834,3 21.917,1.667 0,0 8.416,-0.834 20.583,-5.917 m -87.461,-83.627 109.878,0 0,103.544 -109.878,0 0,-103.544 z"
style="fill:#ffffff;fill-rule:nonzero"
id="path18" />
</g>
</g>
</svg>