MaDgIK
/
graph
13
0
Fork 0
Code Issues Pull Requests Projects Releases 2 Wiki Activity

[Trunk | Graph]: 

1. app.component.ts: Remove submenu (fragment items) for Support.
2. about.component.css & about.component.html: Fixes in UI | Not selected tabs are gray | [Bug fix] Architecture image is always uk-width-4-5 (gifs were loosing their proper position).


git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-graph-portal/trunk@59539 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
Konstantina Galouni 2020-10-09 11:56:49 +00:00
parent 391a986538
commit b2d7a25385
3 changed files with 71 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
src/app/about/about.component.css
View File

@ -1,8 +1,10 @@
.firstBackground {
background-image: url("/assets/graph-assets/backgrounds/blue_circle.svg"), url("/assets/graph-assets/backgrounds/pink_dots.svg");
background-size: auto;
background-repeat: no-repeat;
background-position: 104% 23%, 108% 41%;
@media only screen and (min-width: 960px) {
.firstBackground {
background-image: url("/assets/graph-assets/backgrounds/blue_circle.svg"), url("/assets/graph-assets/backgrounds/pink_dots.svg");
background-size: auto;
background-repeat: no-repeat;
background-position: 104% 23%, 108% 41%;
}
}
.marker-gif {
@ -35,14 +37,31 @@
text-align: left;
font: normal normal bold 16px/21px Roboto !important;
letter-spacing: 0;
color: #4687e6 !important;
text-transform: capitalize;
opacity: 1;
padding: 10px 0 0 0;
text-transform: capitalize;
color: #1A1A1A !important;
opacity: 0.5;
font-weight: 300 !important;
}
.uk-tab > .uk-active > a {
border-color: #4687e6 !important;
.uk-tab > li > a {
border: none;
}
.uk-tab > li:hover:not(.uk-active) > a {
color: #4687e6 !important;
opacity: 1;
}
.uk-tab > li.uk-active > a {
color: #4687e6 !important;
opacity: 1;
font-weight: bold !important;
}
.uk-tab > li.uk-active > a {
border-bottom: 3px solid #4687e6 !important;
}
.button-tab > li > a {
@ -50,7 +69,7 @@
line-height: 25px;
border-radius: 500px;
font-family: Roboto;
font-size: 16px;
font-size: 13px;
text-transform: capitalize;
color: #1a1a1a;
@ -70,15 +89,15 @@
opacity: 1;
}
.tab-image {
max-height: 400px;
/*width: auto;*/
}
.architecture-image {
align-self: start;
}
/*.block-ellipsis {*/
/* display: -webkit-box;*/
/* !* autoprefixer: ignore next *!*/
/* -webkit-box-orient: vertical;*/
/* overflow: hidden;*/
/* text-overflow: ellipsis;*/
/* -webkit-line-clamp: 3;*/
/*}*/
.uk-align-right\@m .uk-list>li::before, .uk-align-right\@m .uk-list>li::after {
display: inline;
}

63
src/app/about/about.component.html
View File

@ -48,8 +48,9 @@
</div>
</div>
</div>
<div class="uk-flex uk-flex-center uk-container uk-inline">
<img [src]="'assets/graph-assets/about/architecture/'+architectureImage" class="uk-width-4-5@m architecture-image">
<div class="uk-flex uk-flex-center uk-inline">
<img [src]="'assets/graph-assets/about/architecture/'+architectureImage" class="uk-width-4-5 architecture-image">
<a class="uk-position-absolute uk-transform-center" style="left: 27%; top: 48%"
(click)="goTo('tabs_card'); changeTab(0)"
(mouseenter)="architectureImage = 'aggregation_hover.png'" (mouseleave)="architectureImage = 'gray.png'">
@ -102,11 +103,11 @@
<ul class="uk-switcher uk-margin">
<li>
<!-- uk-grid-->
<div class=" uk-margin-large-top">
<div class=" uk-margin-large-top uk-text-small">
<!-- <div class="uk-width-3-5@m">-->
<img class="uk-width-2-5@m uk-align-right@m uk-margin-remove-adjacent"
<img class="uk-width-2-5@m uk-align-right@m uk-margin-remove-adjacent tab-image"
src="assets/graph-assets/about/architecture/aggregation.png" alt="Aggregation">
<div [class]="'uk-margin-bottom uk-margin-medium-right uk-text-small '+(aggregationReadMore ? '' : 'lines-18 multi-line-ellipsis')">
<div [class]="'uk-margin-bottom uk-margin-medium-right '+(aggregationReadMore ? '' : 'lines-18 multi-line-ellipsis')">
<div>
OpenAIRE collects metadata records from a variety of content providers as described in
<a href="https://www.openaire.eu/aggregation-and-content-provision-workflows" target="_blank">https://www.openaire.eu/aggregation-and-content-provision-workflows</a>.
@ -149,7 +150,7 @@
<ul class="uk-switcher uk-margin">
<li>
<img class="uk-width-2-5@m uk-align-right@m uk-margin-remove-adjacent"
<img class="uk-width-2-5@m uk-align-right@m uk-margin-remove-adjacent tab-image"
src="assets/graph-assets/about/architecture/deduplication.svg" alt="Deduplication">
<div [class]="'uk-margin-bottom uk-margin-medium-right uk-text-small '+(dedupClusteringReadMore ? '' : 'lines-18 multi-line-ellipsis')">
<div>
@ -168,10 +169,9 @@
<li>
<div>
Title-based function: the function generates a key that depends on
<span class="portal-color">(i)</span>
number of significant words in the title (normalized, stemming, etc.),
<span class="portal-color">(ii)</span>
module 10 of the number of characters of such words, and (iii) a string obtained as an alternation of the function prefix(3) and suffix(3) (and vice versa) o the first 3 words (2 words if the title only has 2). For example, the title “Entity deduplication in big data graphs for scholarly communication” becomes “entity deduplication big data graphs scholarly communication” with two keys key “7.1entionbig” and “7.1itydedbig” (where 1 is module 10 of 54 characters of the normalized title.
(i) number of significant words in the title (normalized, stemming, etc.),
(ii) module 10 of the number of characters of such words, and
(iii) a string obtained as an alternation of the function prefix(3) and suffix(3) (and vice versa) o the first 3 words (2 words if the title only has 2). For example, the title “Entity deduplication in big data graphs for scholarly communication” becomes “entity deduplication big data graphs scholarly communication” with two keys key “7.1entionbig” and “7.1itydedbig” (where 1 is module 10 of 54 characters of the normalized title.
</div>
</li>
</ul>
@ -190,7 +190,7 @@
</div>
</li>
<li>
<img class="uk-width-2-5@m uk-align-right@m uk-margin-remove-adjacent"
<img class="uk-width-2-5@m uk-align-right@m uk-margin-remove-adjacent tab-image"
src="assets/graph-assets/about/architecture/deduplication.svg" alt="Deduplication">
<div [class]="'uk-margin-bottom uk-margin-medium-right uk-text-small '+(dedupMatchingAndElectionReadMore ? '' : 'lines-18 multi-line-ellipsis')">
<div>
@ -283,7 +283,7 @@
<ul class="uk-switcher uk-margin">
<li>
<img class="uk-width-2-5@m uk-align-right@m uk-margin-remove-adjacent"
<img class="uk-width-2-5@m uk-align-right@m uk-margin-remove-adjacent tab-image"
src="assets/graph-assets/about/architecture/enrichment.svg" alt="Enrichment">
<div class="uk-margin-bottom uk-margin-medium-right uk-text-small">
<p>
@ -299,7 +299,7 @@
</div>
</li>
<li>
<img class="uk-width-2-5@m uk-align-right@m uk-margin-remove-adjacent"
<img class="uk-width-2-5@m uk-align-right@m uk-margin-remove-adjacent tab-image"
src="assets/graph-assets/about/architecture/enrichment.svg" alt="Enrichment">
<div [class]="'uk-margin-bottom uk-margin-medium-right uk-text-small '+(enrichmentMiningReadMore ? '' : 'lines-18 multi-line-ellipsis')">
<div>
@ -311,15 +311,12 @@
<span class="portal-color">Project mining</span>
in OpenAIRE text mines the full-texts of publications in order to extract matches to funding project codes/IDs.
The mining algorithm works by utilising
<span class="portal-color">(i)</span> the grant identifier, and
<span class="portal-color">(ii)</span> the project acronym (if available) of each project.
(i) the grant identifier, and
(ii) the project acronym (if available) of each project.
The mining algorithm:
<span class="portal-color">(1)</span>
Preprocesses/normalizes the full-texts using several functions, which depend on the characteristics of each funder (i.e., the format of the grant identifiers), such as stopword and/or punctuation removal, tokenization, stemming, converting to lowercase; then
<span class="portal-color">(2)</span>
string matching of grant identifiers against the normalized text is done using database techniques; and
<span class="portal-color">(3)</span>
the results are validated and cleaned using the context near the match by looking at the context around the matched ID for relevant metadata and positive or negative words/phrases, in order to calculate a confidence value for each publication-->project link.
(1) Preprocesses/normalizes the full-texts using several functions, which depend on the characteristics of each funder (i.e., the format of the grant identifiers), such as stopword and/or punctuation removal, tokenization, stemming, converting to lowercase; then
(2) String matching of grant identifiers against the normalized text is done using database techniques; and
(3) The results are validated and cleaned using the context near the match by looking at the context around the matched ID for relevant metadata and positive or negative words/phrases, in order to calculate a confidence value for each publication-->project link.
A confidence threshold is set to optimise high accuracy while minimising false positives, such as matches with page or report numbers, post/zip codes, parts of telephone numbers, DOIs or URLs, accession numbers.
The algorithm also applies rules for disambiguating results, as different funders can share identical project IDs; for example, grant number 633172 could refer to H2020 project EuroMix but also to Australian-funded NHMRC project “Brain activity (EEG) analysis and brain imaging techniques to measure the neurobiological effects of sleep apnea”.
Project mining works very well and was the first Text & Data Mining (TDM) service of OpenAIRE.
@ -371,7 +368,7 @@
</div>
</li>
<li>
<img class="uk-width-2-5@m uk-align-right@m uk-margin-remove-adjacent"
<img class="uk-width-2-5@m uk-align-right@m uk-margin-remove-adjacent tab-image"
src="assets/graph-assets/about/architecture/enrichment.svg" alt="Enrichment">
<div class="uk-margin-bottom uk-margin-medium-right uk-text-small">
The Deduction process (also known as “bulk tagging”) enriches each record with new information that can be derived from the existing property values.
@ -386,7 +383,7 @@
</div>
</li>
<li>
<img class="uk-width-2-5@m uk-align-right@m uk-margin-remove-adjacent"
<img class="uk-width-2-5@m uk-align-right@m uk-margin-remove-adjacent tab-image"
src="assets/graph-assets/about/architecture/enrichment.svg" alt="Enrichment">
<div [class]="'uk-margin-bottom uk-margin-medium-right uk-text-small '+(enrichmentPropagationReadMore ? '' : 'lines-18 multi-line-ellipsis')">
<div>
@ -440,11 +437,11 @@
</div>
</li>
<li>
<div class="uk-margin-large-top">
<div class="uk-text-small uk-margin-large-top">
<!-- <div class="uk-width-3-5@m">-->
<img class="uk-width-2-5@m uk-align-right@m uk-margin-remove-adjacent"
<img class="uk-width-2-5@m uk-align-right@m uk-margin-remove-adjacent tab-image"
src="assets/graph-assets/about/architecture/post_cleaning.svg" alt="Post Cleaning">
<div class="uk-margin-bottom uk-margin-medium-right uk-text-small">
<div class="uk-margin-bottom uk-margin-medium-right">
<p>
Lorem ipsum...
</p>
@ -456,11 +453,11 @@
</div>
</li>
<li>
<div class="uk-margin-large-top">
<div class="uk-text-small uk-margin-large-top">
<!-- <div class="uk-width-3-5@m">-->
<img class="uk-width-2-5@m uk-align-right@m uk-margin-remove-adjacent"
<img class="uk-width-2-5@m uk-align-right@m uk-margin-remove-adjacent tab-image"
src="assets/graph-assets/about/architecture/indexing.svg" alt="Indexing">
<div class="uk-margin-bottom uk-margin-medium-right uk-text-small">
<div class="uk-margin-bottom uk-margin-medium-right">
<p>
The final version of the OpenAIRE Research Graph is indexed on a Solr server that is used by the OpenAIRE portals (EXPLORE, CONNECT, PROVIDE) and APIs, the latter adopted by several third-party applications and organizations, such as:
</p>
@ -488,11 +485,11 @@
</div>
</li>
<li>
<div class="uk-margin-large-top">
<div class="uk-text-small uk-margin-large-top">
<!-- <div class="uk-width-3-5@m">-->
<img class="uk-width-2-5@m uk-align-right@m uk-margin-remove-adjacent"
<img class="uk-width-2-5@m uk-align-right@m uk-margin-remove-adjacent tab-image uk-padding-large uk-padding-remove-top uk-padding-remove-horizontal"
src="assets/graph-assets/about/architecture/stats_analysis.svg" alt="Stats Analysis">
<div class="uk-margin-bottom uk-margin-medium-right uk-text-small">
<div class="uk-margin-bottom uk-margin-medium-right">
<p>
The OpenAIRE Research Graph is also processed by a pipeline for extracting the statistics and producing the charts for funders, research initiative, infrastructures, and policy makers that you can see on MONITOR.
Based on the information available on the graph, OpenAIRE provides a set of indicators for monitoring the funding and research impact and the uptake of Open Science publishing practices,
@ -527,7 +524,7 @@
<div id="metrics" class="uk-container uk-container-large uk-section">
<div class="uk-margin-large-left uk-margin-large-right">
<h2 class="uk-text-center">Data & Metrics</h2>
<h4 class="uk-margin-medium-top portal-color">Coming soon...</h4>
<h4 class="uk-text-center uk-margin-medium-top portal-color">Coming soon...</h4>
<!-- <div>-->
<!-- <h3 class="uk-margin-medium-top portal-color">Data</h3>-->
<!-- <div></div>-->

6
src/app/app.component.ts
View File

@ -56,9 +56,9 @@ export class AppComponent implements OnInit {
{
rootItem: new MenuItem("contact", "Support", "", "/support", false, [], null, {}),
items: [
new MenuItem("contact", "Contact", "", "/support", false, [], null, {}),
new MenuItem("documentation", "Documentation", "", "/support", false, [], null, {}, null, "documentation"),
new MenuItem("faq", "FAQs", "", "/support", false, [], null, {}, null, "faq"),
// new MenuItem("contact", "Contact", "", "/support", false, [], null, {}),
// new MenuItem("documentation", "Documentation", "", "/support", false, [], null, {}, null, "documentation"),
// new MenuItem("faq", "FAQs", "", "/support", false, [], null, {}, null, "faq"),
]
}
];