Commit abefc9e0 authored by Daniel Suarez Souto's avatar Daniel Suarez Souto
Browse files

updated visualization of entities and categories

parent 0f7a54d3
......@@ -439,7 +439,7 @@ H2020 RIA Action Grant No. 740934 under the call SEC-06-FCT-2016 — Developing
'entities.name': {
terms: {
field: "entities.schema:name.keyword",
size : 16,
size : 25,
order: {
_count: "desc"
}
......
......@@ -26,4 +26,22 @@ paper-icon-button.green {
paper-icon-button.green:hover {
background: var(--paper-green-50);
border-radius: 50%;
}
.categories .badge.badge-secondary {
background-color: #eaeaea;
color: #505050;
border: 1px solid;
border-bottom-left-radius: 0;
padding-right: 0px;
cursor:pointer;
margin-bottom:5px;
margin-right: 3px;
margin-left: 3px;
font-size: 13px;
}
.categories .badge.badge-secondary:hover {
color: white;
background-color: #505050 !important;
}
\ No newline at end of file
......@@ -18,12 +18,15 @@
}
.number {
padding: 1px 3px;
border: 1px solid #9e5c26;
border-radius: 5px;
box-shadow: inset 0 1px 0 #f5bf8c;
margin-left: 7px;
color: white;
color: white !important;
background-color: #505050;
padding: 2px;
padding-right: 15px;
padding-left: 10px;
border-bottom-right-radius: 10px;
border-top-right-radius: 10px;
margin-right: -1px;
margin-left: 5px;
}
.active .number {
......@@ -44,34 +47,7 @@
background-image: -ms-linear-gradient(bottom, rgb(102,102,102) 0%, rgb(123,123,123) 100%);
}
.tag {
display: inline-block;
margin: 0 0 7px 20px;
position: relative;
font-size: 0.9em;
font-weight: bold;
text-decoration: none;
text-shadow: 0px 2px 0px rgba(255,255,255,.4);
height: 2em;
line-height: 2em;
padding: 0 0.5em 0 1em;
border-top: 0.0625em solid #d99d38;
border-right: 0.0625em solid #d99d38;
border-bottom: 0.0625em solid #d99d38;
-webkit-border-radius: 0 0.25em 0.25em 0;
-moz-border-radius: 0 0.25em 0.25em 0;
border-radius: 0 0.25em 0.25em 0;
background-image: -webkit-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
background-image: -moz-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
background-image: -o-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
background-image: -ms-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
background-image: linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#feda71', EndColorStr='#feba47');
-webkit-box-shadow: inset 0 1px 0 #faeaba, 0 1px 1px rgba(0,0,0,.1);
-moz-box-shadow: inset 0 1px 0 #faeaba, 0 1px 1px rgba(0,0,0,.1);
box-shadow: inset 0 1px 0 #faeaba, 0 1px 1px rgba(0,0,0,.1);
}
.tag:before {
content: '';
width: 1.4584em;
......@@ -139,10 +115,11 @@
<span>{{title}}</span>
</div>
<div id="nodata" style="margin-top: 35px">No entries match the current filters</div>
<div id="tagwrapper" style="min-height: 215px;">
<br>
<template is="dom-repeat" items="{{categories}}" as="category" >
<paper-button class="tag active" data$="{{category.0}}" on-tap="filter" title$="{{getTitle(category.0)}}"><span>{{getCategory(category.0)}}</span><span class="number">{{category.1}}</span></paper-button>
<div id="tagwrapper" style="min-height: 215px; padding-left: 12px; margin-top: 46px;">
<template is="dom-repeat" items="{{categories}}" as="category">
<span class="badge badge-secondary" on-tap="filter" title$="{{getTitle(category.0)}}" >{{getCategory(category.0)}}<span class="number">{{category.1}}</span></span>
</template>
</div>
<div style="float: right; bottom: 10px; width: 100%; display: flex; flex-direction: row; justify-content: flex-end; align-content: center;">
......
......@@ -26,4 +26,19 @@ paper-icon-button.green {
paper-icon-button.green:hover {
background: var(--paper-green-50);
border-radius: 50%;
}
\ No newline at end of file
}
.entities .badge.badge-secondary {
border: 1px solid ;
border-bottom-left-radius: 0;
padding-right: 0px;
cursor:pointer;
margin-bottom:5px;
margin-right: 3px;
margin-left: 3px;
font-size: 13px;
}
.entities .badge.badge-secondary:hover {
color: white !important;
}
......@@ -18,12 +18,14 @@
}
.number {
padding: 1px 3px;
border: 1px solid #9e5c26;
border-radius: 5px;
box-shadow: inset 0 1px 0 #f5bf8c;
margin-left: 7px;
color: white;
color: white !important;
padding: 2px;
padding-right: 15px;
padding-left: 10px;
border-bottom-right-radius: 10px;
border-top-right-radius: 10px;
margin-right: -1px;
margin-left: 5px;
}
.active .number {
......@@ -44,34 +46,7 @@
background-image: -ms-linear-gradient(bottom, rgb(102,102,102) 0%, rgb(123,123,123) 100%);
}
.tag {
display: inline-block;
margin: 0 0 7px 20px;
position: relative;
font-size: 0.9em;
font-weight: bold;
text-decoration: none;
text-shadow: 0px 2px 0px rgba(255,255,255,.4);
height: 2em;
line-height: 2em;
padding: 0 0.5em 0 1em;
border-top: 0.0625em solid #d99d38;
border-right: 0.0625em solid #d99d38;
border-bottom: 0.0625em solid #d99d38;
-webkit-border-radius: 0 0.25em 0.25em 0;
-moz-border-radius: 0 0.25em 0.25em 0;
border-radius: 0 0.25em 0.25em 0;
background-image: -webkit-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
background-image: -moz-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
background-image: -o-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
background-image: -ms-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
background-image: linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#feda71', EndColorStr='#feba47');
-webkit-box-shadow: inset 0 1px 0 #faeaba, 0 1px 1px rgba(0,0,0,.1);
-moz-box-shadow: inset 0 1px 0 #faeaba, 0 1px 1px rgba(0,0,0,.1);
box-shadow: inset 0 1px 0 #faeaba, 0 1px 1px rgba(0,0,0,.1);
}
.tag:before {
content: '';
width: 1.4584em;
......@@ -123,13 +98,12 @@
margin-right: 2px;
}
#nodata {
position: absolute;
width: 100%;
line-height: 35px;
text-align: center;
position: absolute;
width: 100%;
line-height: 35px;
text-align: center;
}
</style>
<!-- Shadow DOM -->
......@@ -138,11 +112,30 @@
<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="tagwrapper" style="min-height: 215px;">
<br>
<template is="dom-repeat" items="{{entities}}" as="entity">
<paper-button class="tag active" on-tap="filter"><span>{{entity.0}}</span><span class="number">{{entity.1}}</span></paper-button>
<div id="nodata" style="margin-top: 80px">No entries match the current filters</div>
<div class="content" style="text-align:center; margin: 0 auto;">
<div class="leyend" style="display: flex; flex-direction: row; justify-content: center; margin-bottom: 13px; margin-top: 13px;">
<div class="leyend_place" style="display: flex; flex-direction: row;">
<div style="width: 7px;height: 7px;background-color: #f90; float: left; margin-top: 7px;margin-right: 3px; margin-left: 6px" class="style-scope news-chart"></div>
Places
</div>
<div class="leyend_org" style="display: flex; flex-direction: row;">
<div style="width: 7px;height: 7px;background-color: #dd4b39; float: left; margin-top: 7px;margin-right: 3px; margin-left: 6px" class="style-scope news-chart"></div>
Organization
</div>
<div class="leyend_person" style="display: flex; flex-direction: row;">
<div style="width: 7px;height: 7px;background-color: #00c0ef; float: left; margin-top: 7px;margin-right: 3px; margin-left: 6px" class="style-scope news-chart"></div>
Person
</div>
</div>
</div>
<div id="tagwrapper" style="min-height: 215px; padding-left: 7px;">
<template is="dom-repeat" items="{{entities}}" as="entity">
<span class="badge badge-secondary" on-tap="filter" style$="background-color: {{getBgColour(entity)}}7d; color:#505050; border-color:{{getBgColour(entity)}}" data-color$="{{getBgColour(entity)}}">{{entity.0}}<span class="number" style$="background-color:{{getBgColour(entity)}}">{{entity.1}}</span></span>
</template>
</div>
<div style="float: right; bottom: 10px; width: 100%; display: flex; flex-direction: row; justify-content: flex-end; align-content: center;">
......@@ -248,7 +241,23 @@
that.entities = data;
filtered = true;
},
getBgColour: function(entity){
console.log(entity)
if(entity[2] === "schema:Place") {
color = "#ff9900"
} else if(entity[2] === "schema:Organization") {
color = "#dd4b39"
} else {
color = "#00c0ef"
}
$(".entities .badge.badge-secondary").mouseover(function(){
$(this).css("background-color", $(this).attr('data-color'));
});
$(".entities .badge.badge-secondary").mouseleave(function(){
$(this).css("background-color", $(this).attr('data-color') + '7d');
});
return color;
},
removeFilters: function(){
this.filters = [];
},
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment