Merge branch 'new-theme' of code-repo.d4science.org:MaDgIK/monitor-dashboard into new-theme

This commit is contained in:
Konstantinos Triantafyllou 2022-04-12 17:23:25 +03:00
commit da71702e2a
5 changed files with 279 additions and 39 deletions

View File

@ -20,8 +20,11 @@ import {ActivatedRoute, Router} from "@angular/router";
<a>Entities</a>
</li>
<li>
<a>Attributes of Entities</a>
<a>Inherited and Inferred Attributes</a>
</li>
<li>
<a>Constructed Attributes</a>
</li>
</ul>
<ul class="uk-switcher">
<li>
@ -31,10 +34,10 @@ import {ActivatedRoute, Router} from "@angular/router";
<dd class="uk-width-expand">
<div>There are currently four different types of research outcomes in the OpenAIRE Research <br> Graph:</div>
<ul class="uk-list uk-list-disc">
<li>Publication</li>
<li>Dataset</li>
<li>Software</li>
<li>Other Research Product</li>
<li>publications</li>
<li>datasets</li>
<li>software</li>
<li>other research products.</li>
</ul>
<div class="uk-margin-small-top">
OpenAIRE deduplicates (merges) different records of research outcomes and keeps the <br> metadata of all instances.
@ -74,24 +77,42 @@ import {ActivatedRoute, Router} from "@angular/router";
</dl>
</li>
<li>
<div class="uk-text-center uk-padding">
The attributes of entities listed below are either inherited via entries in the harvested metadata records or automatically generated by our inference (text and data mining) algorithms.
</div>
<hr>
<dl class="uk-description-list uk-description-list-divider">
<div class="uk-grid uk-padding-small" uk-grid>
<dt class="uk-width-1-5@m uk-width-1-1">Organization & Country</dt>
<dt class="uk-width-1-5@m uk-width-1-1">Organization</dt>
<dd class="uk-width-expand">
<p><span class="uk-text-bold">For research outcomes:</span> the affiliated organizations of its
authors (and their country)</p>
<p><span class="uk-text-bold">For research outcomes,</span> this refers to the affiliated organizations of its authors</p>
<p><span class="uk-text-bold">For projects:</span> the organizations participating in the project
(i.e. beneficiaries of the grant) and
their countries
</p>
<p>
<span class="uk-text-bold">Country code mapping: </span>
<a href="https://api.openaire.eu/vocabularies/dnet:countries" target="_blank">
https://api.openaire.eu/vocabularies/dnet:countries</a>
(i.e. beneficiaries of the grant)
</p>
</dd>
</div>
<hr>
<div class="uk-grid uk-padding-small" uk-grid>
<dt class="uk-width-1-5@m uk-width-1-1">Country</dt>
<dd class="uk-width-expand">
<p>The country of the organization. </p>
<p>
<span class="uk-text-bold">Country code mapping: </span>
<a href="https://api.openaire.eu/vocabularies/dnet:countries" target="_blank">
https://api.openaire.eu/vocabularies/dnet:countries</a>
</p>
</dd>
</div>
<hr>
<div class="uk-grid uk-padding-small" uk-grid>
<dt class="uk-width-1-5@m uk-width-1-1">Funder</dt>
<dd class="uk-width-expand">
<p>Funders that have joined OpenAIRE, i.e. their project data have gone through a validation process.</p>
<p>You can visit https://explore.openaire.eu/search/find if you would like to explore the research outcomes and projects of all funders in OpenAIRE (the list of funders can be seen under the "Funder" Filter shown on the left side of the page).</p>
<p><span class="uk-text-bold">To join: </span><a href="https://www.openaire.eu/funders-how-to-join-guide" target="_blank">https://www.openaire.eu/funders-how-to-join-guide</a></p>
</dd>
</div>
<hr>
<div class="uk-grid uk-padding-small" uk-grid>
<dt class="uk-width-1-5@m uk-width-1-1">Type</dt>
<dd class="uk-width-expand">
@ -106,14 +127,21 @@ import {ActivatedRoute, Router} from "@angular/router";
</div>
<hr>
<div class="uk-grid uk-padding-small" uk-grid>
<dt class="uk-width-1-5@m uk-width-1-1">Access mode</dt>
<dt class="uk-width-1-5@m uk-width-1-1">Access mode or access rights</dt>
<dd class="uk-width-expand">
<p>The best available (across all instances) access rights of a research outcome</p>
<p>Types: open, restricted, closed, embargo (= closed for a specific period of time, then open)</p>
<p><span class="uk-text-bold">Note:</span> definition of <span class="uk-text-bold">restricted</span>
may vary by data source.</p>
may vary by data source, it may refer to access rights being given to registered users, potentially behind a paywall.</p>
</dd>
</div>
<hr>
<div class="uk-grid uk-padding-small" uk-grid>
<dt class="uk-width-1-5@m uk-width-1-1">CC license</dt>
<dd class="uk-width-expand">
<p>A Creative Commons copyright license <a href="(https://creativecommons.org/)" target="_blank">(https://creativecommons.org/)</a></p>
</dd>
</div>
<hr>
<div class="uk-grid uk-padding-small" uk-grid>
<dt class="uk-width-1-5@m uk-width-1-1">PID (persistent identifier)</dt>
@ -147,10 +175,10 @@ import {ActivatedRoute, Router} from "@angular/router";
</div>
<hr>
<div class="uk-grid uk-padding-small" uk-grid>
<dt class="uk-width-1-5@m uk-width-1-1">Content Providers (Datasources)</dt>
<dt class="uk-width-1-5@m uk-width-1-1 uk-text-primary">Data sources (content providers)</dt>
<dd class="uk-width-expand">
<p>The different data sources ingested in the OpenAIRE Research Graph.</p>
<div class="uk-text-bold">Content Provider Types:</div>
<div class="uk-text-bold">Data Source Types:</div>
<ul class="uk-list uk-list-disc">
<li>Repositories</li>
<li>Open Access Publishers & Journals</li>
@ -208,6 +236,155 @@ import {ActivatedRoute, Router} from "@angular/router";
</div>
</dl>
</li>
<li>
<div class="uk-text-center uk-padding">
The attributes of entities under this tab are constructed following the methodology described below.
</div>
<hr>
<dl class="uk-description-list uk-description-list-divider">
<div class="uk-grid uk-padding-small" uk-grid>
<dt class="uk-width-1-3@m uk-width-1-1">Attribute</dt>
<dd class="uk-width-1-3@m uk-width-1-1 uk-text-bold">Definition</dd>
<dd class="uk-width-1-3@m uk-width-1-1 uk-text-bold">Construction</dd>
</div>
<hr>
<div class="uk-padding-small uk-text-bold uk-text-primary">
Journal Business Models
</div>
<hr>
<div class="uk-grid uk-padding-small" uk-grid>
<dt class="uk-width-1-3@m uk-width-1-1">Fully Open Access (OA)</dt>
<dd class="uk-width-1-3@m uk-width-1-1">
<p>A journal that publishes only in open access.</p>
</dd>
<dd class="uk-width-1-3@m uk-width-1-1">
<p>We construct the list of fully OA journals using Unpaywall data. </p>
<p>In brief, a journal is fully OA if </p>
<ol>
<li>It is in the Directory of Open Access Journals (DOAJ) </li>
<li>It has a known (curated list) fully OA Publisher. </li>
<li>It only publishes OA articles. </li>
</ol>
<p><a href="https://support.unpaywall.org/support/solutions/articles/44001792752-how-do-we-decide-if-a-given-journal-is-fully-oa-" target="_blank">More information</a></p>
</dd>
</div>
<hr>
<div class="uk-grid uk-padding-small" uk-grid>
<dt class="uk-width-1-3@m uk-width-1-1">Subscription</dt>
<dd class="uk-width-1-3@m uk-width-1-1">
<p>A journal that charges for access to its articles.</p>
</dd>
<dd class="uk-width-1-3@m uk-width-1-1">
</dd>
</div>
<hr>
<div class="uk-grid uk-padding-small" uk-grid>
<dt class="uk-width-1-3@m uk-width-1-1">Hybrid</dt>
<dd class="uk-width-1-3@m uk-width-1-1">
<p>A subscription journal where some of its articles are open access.</p>
</dd>
<dd class="uk-width-1-3@m uk-width-1-1">
<p>Journals with open access articles that are not fully OA journals are hybrid.</p>
</dd>
</div>
<hr>
<div class="uk-grid uk-padding-small" uk-grid>
<dt class="uk-width-1-3@m uk-width-1-1">Transformative</dt>
<dd class="uk-width-1-3@m uk-width-1-1">
<p>"A Transformative Journal is a subscription/hybrid journal that is actively committed to transitioning to a fully Open Access journal.</p>
<p>In addition, a Transformative Journal must:</p>
<ul>
<li>gradually increase the share of Open Access content; and</li>
<li>offset subscription income from payments for publishing services (to avoid double payments)."</li>
</ul>
<p>Source:</p>
<p><a href="https://www.coalition-s.org/transformative-journals-faq/" target="_blank">https://www.coalition-s.org/transformative-journals-faq/</a></p>
</dd>
<dd class="uk-width-1-3@m uk-width-1-1">
<p>Transformative Journals are identified by ISSN matching with the publicly available Transformative Journals data (<a href="https://journalcheckertool.org/transformative-journals/" target="_blank">https://journalcheckertool.org/transformative-journals/</a>)</p>
</dd>
</div>
<hr>
<div class="uk-padding-small uk-text-bold uk-text-primary">
Journal APC Business Models
</div>
<hr>
<div class="uk-grid uk-padding-small" uk-grid>
<dt class="uk-width-1-3@m uk-width-1-1">Diamond OA</dt>
<dd class="uk-width-1-3@m uk-width-1-1">
<p>A fully OA journal that does not charge article processing charges (APCs).</p>
</dd>
<dd class="uk-width-1-3@m uk-width-1-1">
<p>APC information is obtained from DOAJ using DOAJs exportable version of the journal metadata (<a href="https://doaj.org/docs/public-data-dump/" target="_blank">https://doaj.org/docs/public-data-dump/</a>). We used it to determine whether a particular fully OA journal charges APCs. </p>
</dd>
</div>
<hr>
<div class="uk-padding-small uk-text-bold uk-text-primary">
Routes to Open Access (OA)
</div>
<hr>
<div class="uk-grid uk-padding-small" uk-grid>
<dt class="uk-width-1-3@m uk-width-1-1">Green OA</dt>
<dd class="uk-width-1-3@m uk-width-1-1">
<p>An open access scientific publication deposited in a repository</p>
</dd>
<dd class="uk-width-1-3@m uk-width-1-1">
<p>As in definition</p>
</dd>
</div>
<hr>
<div class="uk-grid uk-padding-small" uk-grid>
<dt class="uk-width-1-3@m uk-width-1-1">Gold OA</dt>
<dd class="uk-width-1-3@m uk-width-1-1">
<p>A scientific publication published in a fully OA journal.</p>
</dd>
<dd class="uk-width-1-3@m uk-width-1-1">
<p>Fully OA journals are defined above.</p>
</dd>
</div>
<hr>
<div class="uk-grid uk-padding-small" uk-grid>
<dt class="uk-width-1-3@m uk-width-1-1">Hybrid OA</dt>
<dd class="uk-width-1-3@m uk-width-1-1">
<p>An open access scientific publication published in a hybrid journal with an open license.</p>
</dd>
<dd class="uk-width-1-3@m uk-width-1-1">
<p>Hybrid journals are defined above.</p>
<p>At this point we consider only CC licenses open, we are currently working on cleaning non-CC licenses as well to identify other open ones.</p>
<p>In principle, this means that we may be underestimating the number of hybrid OA articles and overestimating the number of bronze.</p>
</dd>
</div>
<hr>
<div class="uk-grid uk-padding-small" uk-grid>
<dt class="uk-width-1-3@m uk-width-1-1">Bronze OA</dt>
<dd class="uk-width-1-3@m uk-width-1-1">
<p>An open access scientific publication published in a hybrid journal without an open license.</p>
</dd>
<dd class="uk-width-1-3@m uk-width-1-1">
</dd>
</div>
<hr>
<div class="uk-padding-small uk-text-bold uk-text-primary">
Miscellaneous
</div>
<hr>
<div class="uk-grid uk-padding-small" uk-grid>
<dt class="uk-width-1-3@m uk-width-1-1">Downloads</dt>
<dd class="uk-width-1-3@m uk-width-1-1">
<p>The number of downloads of a publications full text in a specific time frame, from a given set of data sources.</p>
</dd>
<dd class="uk-width-1-3@m uk-width-1-1">
<p>Data for downloads is taken from OpenAIREs Usage Counts service that harvests it from a set of repositories. The time range of available downloads varies for each repository.</p>
<p>
<a href="https://www.openaire.eu/guides-usage-counts" target="_blank">More information</a>
</p>
</dd>
</div>
<hr>
</dl>
</li>
</ul>
<div class="uk-margin-medium-top graph">
<icon name="graph" customClass="uk-text-primary"></icon>
@ -219,7 +396,25 @@ import {ActivatedRoute, Router} from "@angular/router";
<h2 class="uk-h1">
Inclusion, transparency, <br> quality, state of the art <br> technology<span class="uk-text-primary">.</span>
</h2>
<div class="uk-margin-large-top uk-card uk-card-default uk-card-body">
<p class="uk-margin-top">Our methodological approach is based on the following operational quality criteria:</p>
<ul>
<li><span class="uk-text-bold">Openness and transparency:</span> Methodological assumptions are openly and clearly presented.</li>
<li><span class="uk-text-bold">Coverage and accuracy:</span> As detailed in <a href="https://graph.openaire.eu/" target="_blank">graph.openaire.eu</a>
multiple data sources are ingested in the OpenAIRE research graph for coverage to the fullest extent possible, in order to provide meaningful indicators.</li>
<li><span class="uk-text-bold">Clarity and replicability:</span> We describe our construction methodology in detail, so that
it can be verified and used by the scholarly communication community to create ongoing updates to our proposed statistics and indicators.</li>
<li><span class="uk-text-bold">Readiness and timeliness:</span> The methodology is built around well-established open databases
and already tested knowledge extraction technologies - natural language processing (NLP)/machine-learning (ML) - using operational
workflows in OpenAIRE to warrant timely results.</li>
<li><span class="uk-text-bold">Trust and robustness:</span> Our methodology also strives to be reliable, robust, and aligned
to other assessment methods so that it can be operationalized, used and reused, in conjunction with other assessment methods.</li>
</ul>
<div class="uk-text-small uk-text-italic uk-text-right">The text above is modified from <a href="https://op.europa.eu/en/publication-detail/-/publication/56cc104f-0ebb-11ec-b771-01aa75ed71a1"
target="_blank">this report</a> (DOI: 10.2777/268348).</div>
</div>
<div class="uk-margin-large-top uk-padding-small">
<h3 class="uk-h4">Step-by-step</h3>
<how></how>
</div>
</div>

View File

@ -1,7 +1,21 @@
.uk-card {
min-height: 270px;
}
.uk-card.semiFiltered, .uk-card.semiFiltered > * > .highcharts-series-group {
opacity: 0.5;
}
.custom-description-overlay {
position: absolute;
top: 0;
left: 0;
background: rgba(0,0,0,0.8);
width: 100%;
height: 100%;
}
.custom-description-overlay .inner {
background: #fff;
border-radius: 6px;
width: 75%;
max-height: 75%;
overflow: auto;
}

View File

@ -122,10 +122,13 @@
<span *ngIf="numberResults.get(i + '-' + j)">{{numberResults.get(i + '-' + j) | number}}</span>
<span *ngIf="!numberResults.get(i + '-' + j)">--</span>
</div>
<!-- for printing only -->
<span *ngIf="numberResults.get(i + '-' + j)" class="uk-text-bold uk-hidden">{{numberResults.get(i + '-' + j) | number}}</span>
<!-- ----------------- -->
<div class="uk-text-uppercase uk-text-small uk-margin-top">{{indicator.name}}</div>
</div>
<div *ngIf="indicator.description || indicator.additionalDescription"
class="uk-overlay uk-position-bottom">
<!-- <div *ngIf="indicator.description || indicator.additionalDescription"
class="uk-overlay uk-position-bottom">
<div class="uk-padding-small">
<div *ngIf="indicator.description">
{{indicator.description}}
@ -134,7 +137,7 @@
{{indicator.additionalDescription}}
</div>
</div>
</div>
</div> -->
</div>
</div>
</ng-template>
@ -148,9 +151,9 @@
<ng-template ngFor [ngForOf]="chart.indicators" let-indicator let-j="index">
<div *ngIf="isPublicOrIsMember(indicator.visibility) && chartsActiveType.get(i + '-' + j)"
[ngClass]="getChartClassBySize(indicator.width)">
<div class="uk-card uk-card-default"
<div class="uk-card uk-card-default uk-position-relative"
[class.semiFiltered]="chartsActiveType.get(i + '-' + j).filtersApplied < countSelectedFilters()">
<div class="uk-card-body uk-text-center">
<div class="uk-card-body uk-text-center uk-margin-small-bottom">
<h4 class="uk-margin-bottom chartTitle uk-flex uk-flex-bottom ">
<div>{{indicator.name + " "}}</div>
</h4>
@ -176,21 +179,34 @@
[src]="chartsActiveType.get(i + '-' + j).safeResourceUrl"
class="uk-width-1-1 uk-blend-multiply" [ngClass]="'uk-height-' + (indicator.height?indicator.height.toLowerCase():'medium')">
</div>
<!-- TODO Check description-->
<div *ngIf="indicator.description || indicator.additionalDescription"
class="uk-overlay uk-position-bottom">
<div class="uk-padding multi-line-ellipsis lines-3">
<p class="uk-margin-remove">
<span *ngIf="indicator.description">
{{indicator.description}}
</span>
<br>
<span *ngIf="indicator.additionalDescription">
{{indicator.additionalDescription}}
</span>
</p>
</div>
class="uk-position-bottom-left uk-margin-left uk-margin-small-bottom">
<a class="uk-display-inline-block uk-text-uppercase uk-button-text"
(click)="toggleDescriptionOverlay(j)">
<span class="uk-flex uk-flex-middle">
<icon name="analytics" type="outlined" [flex]="true"></icon>
<span class="uk-margin-small-left">Description</span>
</span>
</a>
</div>
<div *ngIf="showDescriptionOverlay[j] && (indicator.description || indicator.additionalDescription)"
class="custom-description-overlay uk-card uk-card-default uk-flex uk-flex-middle uk-flex-center">
<div class="inner uk-padding-small">
<div class="uk-flex uk-flex-right">
<a class="uk-display-inline-block uk-link-reset" (click)="toggleDescriptionOverlay(j)">
<icon name="close" ratio="1"></icon>
</a>
</div>
<div class="uk-padding-small uk-padding-remove-horizontal">
<p *ngIf="indicator.description">
{{indicator.description}}
</p>
<p *ngIf="indicator.additionalDescription">
{{indicator.additionalDescription}}
</p>
</div>
</div>
</div>
</div>
</div>
</ng-template>

View File

@ -79,6 +79,7 @@ export class MonitorComponent implements OnInit, OnDestroy {
public keyword: FormControl;
public statsUpdateDate: Date;
public stickyPageHeader: boolean = false;
public showDescriptionOverlay: boolean[] = [];
constructor(
private route: ActivatedRoute,
@ -568,4 +569,9 @@ export class MonitorComponent implements OnInit, OnDestroy {
logIn() {
this.userManagementService.login();
}
toggleDescriptionOverlay(j) {
console.log(j);
this.showDescriptionOverlay[j] = !this.showDescriptionOverlay[j];
}
}

View File

@ -6,13 +6,19 @@
#notifications-switcher,
.getDataButton,
.hideInfo,
.footer-light-background {
.footer-light-background,
#filters_switcher_toggle,
.monitor_dashboard-menu,
#main-menu,
.uk-sticky-placeholder {
display: none !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
padding: 0 !important;
margin: 0 !important;
position: relative !important;
height: 0px !important;
}
#page_content,
.uk-navbar-center {
@ -23,4 +29,7 @@
padding: 0 !important;
margin: 0 !important;
}
.uk-hidden {
display:unset !important;
}
}