terminology page - redesign before helptexts

This commit is contained in:
Alex Martzios 2022-10-17 16:32:57 +03:00
parent 1542d476ae
commit ada4017fe5
1 changed files with 411 additions and 411 deletions

View File

@ -6,6 +6,7 @@ import {OpenaireEntities} from "../../utils/properties/searchFields";
import {SEOService} from "../../sharedComponents/SEO/SEO.service";
import {properties} from "../../../../environments/environment";
import {Breadcrumb} from "../../utils/breadcrumbs/breadcrumbs.component";
import Timeout = NodeJS.Timeout;
declare var ResizeObserver;
@ -20,34 +21,57 @@ declare var ResizeObserver;
<span class="uk-text-meta">.</span>
</div>
</div>
<div class="uk-container uk-container-large uk-section uk-section-small uk-padding-remove-bottom">
<div class="uk-background-muted">
<div class="uk-container uk-container-large uk-section uk-section-small">
<div class="uk-padding-small uk-padding-remove-horizontal">
<breadcrumbs [breadcrumbs]="breadcrumbs"></breadcrumbs>
</div>
<div class="uk-text-center" uk-scrollspy-class>
<h1 class="uk-margin-medium-top uk-margin-medium-bottom">Terminology and <br> construction<span class="uk-text-primary">.</span></h1>
</div>
</div>
</div>
<div class="uk-section" uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-fade; delay: 250">
<div class="uk-container uk-container-large" uk-scrollspy-class>
<h1>Terminology and <br> construction<span class="uk-text-primary">.</span></h1>
</div>
<div class="uk-section uk-container uk-container-large" uk-scrollspy-class>
<ul class="uk-tab" uk-tab>
<li>
<a>Entities</a>
<div id="parentContainer" class="uk-grid uk-grid-large" uk-grid>
<div class="uk-width-1-4@m uk-visible@m">
<div class="uk-sticky" uk-sticky="bottom: !#parentContainer; offset: 100;">
<ul class="uk-tab uk-tab-left">
<li class="uk-margin-small-bottom" [class.uk-active]="activeSection === 'entities'">
<a routerLink="./" fragment="entities">1. Entities</a>
</li>
<li>
<a>Inherited and Inferred Attributes</a>
<li class="uk-margin-small-bottom" [class.uk-active]="activeSection === 'inherited-and-inferred-attributes'">
<a routerLink="./" fragment="inherited-and-inferred-attributes">2. Inherited and Inferred Attributes</a>
</li>
<li>
<a>Constructed Attributes</a>
<li class="uk-margin-small-bottom" [class.uk-active]="activeSection === 'constructed-attributes'">
<a routerLink="./" fragment="constructed-attributes">3. Constructed Attributes</a>
</li>
</ul>
<ul class="uk-switcher">
<li>
<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 uk-text-primary">Research Products</dt>
<dd class="uk-width-expand">
<div>There are four different types of research products in the
</div>
</div>
<div class="uk-width-1-1 uk-hidden@m">
<div class="uk-sticky uk-background-default" uk-sticky>
<ul class="uk-tab">
<li [class.uk-active]="activeSection === 'entities'">
<a routerLink="./" fragment="entities">1. Entities</a>
</li>
<li [class.uk-active]="activeSection === 'inherited-and-inferred-attributes'">
<a routerLink="./" fragment="inherited-and-inferred-attributes">2. Inherited and Inferred Attributes</a>
</li>
<li [class.uk-active]="activeSection === 'constructed-attributes'">
<a routerLink="./" fragment="constructed-attributes">3. Constructed Attributes</a>
</li>
</ul>
</div>
</div>
<div class="uk-width-expand@m uk-margin-left">
<div id="entities" class="uk-margin-large-bottom">
<!-- Helptext below here -->
<div>
<h4>1. Entities</h4>
<h6 class="uk-text-primary">Research Products</h6>
<div>
There are four different types of research products in the
OpenAIRE Research Graph:
</div>
<ul class="uk-list uk-list-bullet uk-list-primary">
@ -59,50 +83,34 @@ declare var ResizeObserver;
<div class="uk-margin-small-top">
We deduplicate (merge) different records of research products and keep the metadata of all instances.
</div>
</dd>
</div>
<hr>
<div class="uk-grid uk-padding-small" uk-grid>
<dt class="uk-width-1-5@m uk-width-1-1">Publication</dt>
<dd class="uk-width-expand">
<h6>Publication</h6>
<div>
Research products intended for human reading (published articles, pre-prints, conference
papers, presentations, technical reports, etc.)
</dd>
</div>
<hr>
<div class="uk-grid uk-padding-small" uk-grid>
<dt class="uk-width-1-5@m uk-width-1-1">Research data</dt>
<dd class="uk-width-expand">
<h6>Research data</h6>
<div>
The sources from which the description of the research data has been collected reflect and support their own granularity, we do not define it.
</div>
</dd>
</div>
<hr>
<div class="uk-grid uk-padding-small" uk-grid>
<dt class="uk-width-1-5@m uk-width-1-1">Research software</dt>
<dd class="uk-width-expand">
<h6>Research software</h6>
<div>
Source code or software package developed and/or used in a research context
</dd>
</div>
<hr>
<div class="uk-grid uk-padding-small" uk-grid>
<dt class="uk-width-1-5@m uk-width-1-1">Other research product</dt>
<dd class="uk-width-expand">
<h6>Other research product</h6>
<div>
Anything that does not fall in the previous categories (e.g. workflow, methods, protocols)
</dd>
</div>
</dl>
</li>
<li>
<div class="uk-text-center uk-padding">
</div>
</div>
<div id="inherited-and-inferred-attributes" class="uk-margin-large-bottom">
<!-- Helptext below here -->
<div>
<h4>2. Inherited and Inferred Attributes</h4>
<div class="uk-margin-medium-top">
We either inherit the attributes of entities via entries in the harvested metadata records or automatically generate them using our inference system (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</dt>
<dd class="uk-width-expand">
<h6>Organization</h6>
<div>
<p><span class="uk-text-bold">For research products,</span> this refers to the
affiliated organizations of its authors</p>
<p><span class="uk-text-bold">For projects:</span>
@ -112,24 +120,18 @@ declare var ResizeObserver;
<p>
We are improving the organization database with the use of our <a href="https://orgs.openaire.eu/" target="_blank">OpenOrgs</a> tool. It allows curators to disambiguate organizations (merge different names of the same organization) and identify parent-child relationships (schools, departments, etc.).
</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">
<h6>Country</h6>
<div>
<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">
<h6>Funder</h6>
<div>
<p>Funders that have joined OpenAIRE, i.e. their project data have
gone through a validation process.</p>
<p>You can visit <a class="https://explore.openaire.eu/search/find" target="_blank">https://explore.openaire.eu/search/find</a>
@ -139,12 +141,9 @@ declare var ResizeObserver;
<p><span class="uk-text-bold">For funder who want to join OpenAIRE: </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">
<h6>Type</h6>
<div>
<p>The sub-type of a research outcome (e.g.,
a publication can be a pre-print, conference proceeding,
article,
@ -153,12 +152,9 @@ declare var ResizeObserver;
<a href="https://api.openaire.eu/vocabularies/dnet:result_typologies" target="_blank">https://api.openaire.eu/vocabularies/dnet:result_typologies</a>
(click on the code to see the specific types for each result type)
</p>
</dd>
</div>
<hr>
<div class="uk-grid uk-padding-small" uk-grid>
<dt class="uk-width-1-5@m uk-width-1-1">Access mode or access rights</dt>
<dd class="uk-width-expand">
<h6>Access mode or access rights</h6>
<div>
<p>The best available (across all instances) access rights of
a research product</p>
<p>Types (by best available):</p>
@ -166,51 +162,33 @@ declare var ResizeObserver;
<p><span class="uk-text-bold">Embargo:</span> Closed for a specific period of time, then open.</p>
<p><span class="uk-text-bold">Restricted:</span> Definition of restricted may vary by data source, it may refer to access rights being given to registered users, potentially behind a paywall.</p>
<p><span class="uk-text-bold">Closed:</span> Closed access</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">
<h6>CC license</h6>
<div>
<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>
<dd class="uk-width-expand">
<h6>PID (persistent identifier)</h6>
<div>
<p>A long-lasting reference to a resource</p>
<p><span class="uk-text-bold">Types: </span> <a
href="http://api.openaire.eu/vocabularies/dnet:pid_types" target="_blank">http://api.openaire.eu/vocabularies/dnet:pid_types</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">Context</dt>
<dd class="uk-width-expand">
Related research community, initiative or infrastructure.
</dd>
<h6>Context</h6>
<div>
<p>Related research community, initiative or infrastructure.</p>
</div>
<hr>
<div class="uk-grid uk-padding-small" uk-grid>
<dt class="uk-width-1-5@m uk-width-1-1">Journal</dt>
<dd class="uk-width-expand">
The scientific journal an article is published in.
</dd>
<h6>Journal</h6>
<div>
<p>The scientific journal an article is published in.</p>
</div>
<hr>
<div class="uk-grid uk-padding-small" uk-grid>
<dt class="uk-width-1-5@m uk-width-1-1">Publisher</dt>
<dd class="uk-width-expand">
The publisher of the venue (journal, book, etc.) of a research product.
</dd>
<h6>Publisher</h6>
<div>
<p>The publisher of the venue (journal, book, etc.) of a research product.</p>
</div>
<hr>
<div class="uk-grid uk-padding-small" uk-grid>
<dt class="uk-width-1-5@m uk-width-1-1 uk-text-primary">Data sources (content providers)</dt>
<dd class="uk-width-expand">
<h6>Data sources (content providers)</h6>
<div>
<p>The different data sources ingested in the OpenAIRE Research Graph.</p>
<div class="uk-text-bold">Data Source Types:</div>
<ul class="uk-list uk-list-disc">
@ -221,80 +199,66 @@ declare var ResizeObserver;
<li>Journal Aggregators</li>
<li>CRIS (Current Research Information System)</li>
</ul>
</dd>
</div>
<hr>
<div class="uk-grid uk-padding-small" uk-grid>
<dt class="uk-width-1-5@m uk-width-1-1">Repositories</dt>
<dd class="uk-width-expand">
Information systems where scientists upload the bibliographic metadata and payloads of their
<h6>Repositories</h6>
<div>
<p>Information systems where scientists upload the bibliographic metadata and payloads of their
research products (e.g. PDFs of their scientific articles, CSVs of their data,
archive with their
software), due to obligations from their organizations, their
funders, or due to community practices
(e.g. ArXiv, Europe PMC, Zenodo).
</dd>
(e.g. ArXiv, Europe PMC, Zenodo).</p>
</div>
<hr>
<div class="uk-grid uk-padding-small" uk-grid>
<dt class="uk-width-1-5@m uk-width-1-1">Open Access Publishers & Journals</dt>
<dd class="uk-width-expand">
Information systems of open access publishers or relative journals, which offer bibliographic
metadata and PDFs of their published articles.
</dd>
<h6>Open Access Publishers & Journals</h6>
<div>
<p>Information systems of open access publishers or relative journals, which offer bibliographic
metadata and PDFs of their published articles.</p>
</div>
<hr>
<div class="uk-grid uk-padding-small" uk-grid>
<dt class="uk-width-1-5@m uk-width-1-1">Aggregators</dt>
<dd class="uk-width-expand">
Information systems that collect descriptive metadata about research products
<h6>Aggregators</h6>
<div>
<p>Information systems that collect descriptive metadata about research products
from multiple sources
in order to enable cross-data source discovery of given research products (e,g,
DataCite,
BASE, DOAJ).
</dd>
BASE, DOAJ).</p>
</div>
<hr>
<div class="uk-grid uk-padding-small" uk-grid>
<dt class="uk-width-1-5@m uk-width-1-1">Entity Registries</dt>
<dd class="uk-width-expand">
Information systems created with the intent of maintaining authoritative registries of given
<h6>Entity Registries</h6>
<div>
<p>Information systems created with the intent of maintaining authoritative registries of given
entities in the scholarly communication, such as OpenDOAR for the institutional repositories, re3data
for the data repositories, CORDA and other funder databases
for projects and funding information.
</dd>
for projects and funding information.</p>
</div>
<hr>
<div class="uk-grid uk-padding-small" uk-grid>
<dt class="uk-width-1-5@m uk-width-1-1">CRIS (Current Research Information System)</dt>
<dd class="uk-width-expand">
Information systems adopted by research and academic organizations to
<h6>CRIS (Current Research Information System)</h6>
<div>
<p>Information systems adopted by research and academic organizations to
keep track of their research
administration records and relative results; examples of CRIS content are articles
or research data funded
by projects, their principal investigators, facilities acquired
thanks to funding, etc.
</dd>
thanks to funding, etc.</p>
</div>
</dl>
</li>
<li>
<div class="uk-text-center uk-padding">
</div>
</div>
<div id="constructed-attributes" class="uk-margin-large-bottom">
<!-- Helptext below here -->
<div>
<h4>3. Constructed Attributes</h4>
<div class="uk-margin-medium-top">
All attributes in this tab are constructed by us, with the methodology presented below.
</div>
<hr>
<dl class="uk-description-list uk-description-list-divider">
<div class="uk-grid uk-padding-small" uk-grid>
<dl class="uk-description-list uk-description-list-divider uk-margin-medium-top">
<div class="uk-grid" 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">How we build it</dd>
</div>
<hr>
<div class="uk-padding-small uk-text-bold uk-text-primary">
<div class=" uk-text-bold uk-text-primary">
Journal Business Models
</div>
<hr>
<div class="uk-grid uk-padding-small" uk-grid>
<div class="uk-grid " 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>
@ -310,7 +274,7 @@ declare var ResizeObserver;
</dd>
</div>
<hr>
<div class="uk-grid uk-padding-small" uk-grid>
<div class="uk-grid " 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>
@ -320,7 +284,7 @@ declare var ResizeObserver;
</dd>
</div>
<hr>
<div class="uk-grid uk-padding-small" uk-grid>
<div class="uk-grid " 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>
@ -330,7 +294,7 @@ declare var ResizeObserver;
</dd>
</div>
<hr>
<div class="uk-grid uk-padding-small" uk-grid>
<div class="uk-grid " 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
@ -350,11 +314,11 @@ declare var ResizeObserver;
</dd>
</div>
<hr>
<div class="uk-padding-small uk-text-bold uk-text-primary">
<div class=" uk-text-bold uk-text-primary">
Journal APC Business Models
</div>
<hr>
<div class="uk-grid uk-padding-small" uk-grid>
<div class="uk-grid " 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>
@ -367,11 +331,11 @@ declare var ResizeObserver;
</dd>
</div>
<hr>
<div class="uk-padding-small uk-text-bold uk-text-primary">
<div class=" uk-text-bold uk-text-primary">
Routes to Open Access (OA)
</div>
<hr>
<div class="uk-grid uk-padding-small" uk-grid>
<div class="uk-grid " 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>
@ -381,7 +345,7 @@ declare var ResizeObserver;
</dd>
</div>
<hr>
<div class="uk-grid uk-padding-small" uk-grid>
<div class="uk-grid " 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>
@ -391,7 +355,7 @@ declare var ResizeObserver;
</dd>
</div>
<hr>
<div class="uk-grid uk-padding-small" uk-grid>
<div class="uk-grid " 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>
@ -405,7 +369,7 @@ declare var ResizeObserver;
</dd>
</div>
<hr>
<div class="uk-grid uk-padding-small" uk-grid>
<div class="uk-grid " 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>
@ -415,11 +379,11 @@ declare var ResizeObserver;
</dd>
</div>
<hr>
<div class="uk-padding-small uk-text-bold uk-text-primary">
<div class=" uk-text-bold uk-text-primary">
Miscellaneous
</div>
<hr>
<div class="uk-grid uk-padding-small" uk-grid>
<div class="uk-grid " 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
@ -430,16 +394,11 @@ declare var ResizeObserver;
datasources. The time range of available downloads varies for each datasource.</p>
</dd>
</div>
<hr>
</dl>
</li>
</ul>
<!-- <div class="uk-margin-medium-top">
<icon name="graph" customClass="text-graph"></icon>
<span class="uk-margin-small-left uk-text-meta">More information for </span>
<a href="https://graph.openaire.eu" class="text-graph">OpenAIRE Research Graph</a>
<span class="uk-text-meta">.</span>
</div> -->
</div>
</div>
</div>
</div>
</div>
</div>
`
@ -452,6 +411,10 @@ export class TerminologyComponent implements OnInit, OnDestroy {
public graph_offset: number = 0;
public graph_height: number = 0;
@ViewChild("graph_element") graph_element;
public contentSections: string[] = ['entities', 'inherited-and-inferred-attributes', 'constructed-attributes'];
public activeSection: string;
private observer: IntersectionObserver;
private timeout: Timeout;
constructor(private seoService: SEOService,
private meta: Meta,
@ -469,6 +432,13 @@ export class TerminologyComponent implements OnInit, OnDestroy {
this.breadcrumbs[0].route = '/' + (params['stakeholder']?params['stakeholder']:'');
this.breadcrumbs[0].name = (params['stakeholder']?'dashboard':'home');
}));
this.subscriptions.push(this.route.fragment.subscribe(fragment => {
if(fragment) {
this.activeSection = fragment;
} else {
this.activeSection = 'entities';
}
}));
}
ngAfterViewInit() {
@ -476,6 +446,9 @@ export class TerminologyComponent implements OnInit, OnDestroy {
if(this.graph_element) {
this.observeGraphElement();
}
setTimeout(() => {
this.setObserver();
});
}
}
@ -490,6 +463,33 @@ export class TerminologyComponent implements OnInit, OnDestroy {
if (subscription instanceof Subscription) {
subscription.unsubscribe();
}
});
if(this.observer) {
this.observer.disconnect();
}
}
private setObserver() {
if(this.observer) {
this.observer.disconnect();
}
this.observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if(entry.isIntersecting) {
if(this.timeout) {
clearTimeout(this.timeout);
}
this.timeout = setTimeout(() => {
this.router.navigate(['./'], {fragment: entry.target.id, relativeTo: this.route, state: {disableScroll: true}});
}, 200);
}
});
}, {threshold: 0.25});
this.contentSections.forEach(section => {
let element = document.getElementById(section);
if(element) {
this.observer.observe(element);
}
});
}