graph/src/app/home/home.component.html

436 lines
24 KiB
HTML

<div>
<div class="uk-container uk-container-large uk-section">
<div class="uk-padding-small">
<h1>Open. Transparent. Interconnected.</h1>
<div class="uk-grid uk-grid-small uk-flex uk-margin-medium-top uk-child-width-1-2@m uk-flex-bottom" uk-grid>
<div>
<p>
OpenAIRE Research Graph is an open resource that aggregates a <span class="portal-color">collection of research data properties</span>
(metadata, links) available within the OpenAIRE Open Science infrastructure for funders, organizations,
researchers, research communities and publishers to interlink information by using a semantic graph database
approach.
</p>
<a class="uk-button portal-button uk-margin-medium-top" routerLink="/about">Learn more</a>
</div>
<div class="uk-flex uk-flex-right uk-padding-large uk-padding-remove-bottom">
<img src="assets/graph-assets/home/1.svg" style="transform: rotateY(180deg);" class="uk-width-4-5@m">
</div>
</div>
</div>
</div>
</div>
<div>
<div class="uk-container uk-container-large uk-section">
<div class="uk-padding-small">
<h2 class="uk-text-center"><span class="portal-color">How</span> it works</h2>
<div class="how-first uk-margin-large-top">
<div class="uk-grid uk-child-width-1-2@m" uk-grid>
<div
class="uk-padding-large uk-padding-remove-vertical uk-flex-last@m uk-margin-large-bottom uk-margin-medium-top">
<h3 class="uk-text-bold uk-margin-large-left uk-text-capitalize">360° view on linked open science<span
class="portal-color">.</span></h3>
</div>
<div>
<img src="assets/graph-assets/home/2.png">
</div>
</div>
</div>
</div>
</div>
<div class="uk-container uk-container-large uk-section">
<div class="how-second uk-padding-small uk-margin-large-top">
<div class="uk-grid" uk-grid>
<div class="uk-margin-large-top uk-margin-large-bottom uk-width-expand">
<h3 class="uk-text-bold uk-margin-large-left uk-text-capitalize">From open and authoritative sources around
the globe<span class="portal-color">.</span></h3>
</div>
<div class="uk-width-3-5@m uk-margin-bottom">
<img src="assets/graph-assets/home/3.png">
</div>
</div>
</div>
</div>
</div>
<div>
<div class="uk-section uk-container uk-container-large">
<div class="uk-padding-small">
<h2 class="uk-text-center uk-margin-remove-bottom"><span class="portal-color">Why</span> OpenAIRE Research Graph
</h2>
<h6 class="uk-text-center uk-text-normal uk-margin-small-top">Unlock the power of open science data</h6>
<div class="uk-margin-medium-top">
<div class="uk-grid why uk-child-width-1-2@m" uk-grid>
<div>
<div class="uk-width-3-4@m">
<h6 class="portal-color">Open and transparent</h6>
<div class="uk-text-light">
It is available for download and re-use as CC-BY (due to some input sources whose
license is CC-BY); parts of the graphs can be re-used as CC-0; provenance is tracked at the level of the
records and, when these are the result of full-text mining, of the properties (provenance also includes
an indicator of trust, in the range [0..1]).
</div>
</div>
</div>
<div class="uk-flex uk-flex-right">
<div class="uk-width-3-4@m">
<h6 class="portal-color">Decentralized and interoperable</h6>
<div class="uk-text-light">
Metadata and links are collected from data
sources, such as institutional/data/software repositories, publishers, registries, and re-distributed to
such sources via brokering services.
</div>
</div>
</div>
<div>
<div class="uk-hidden@m">
<h6 class="portal-color">Intelligent linking</h6>
<div class="uk-text-light">
Abstracts, full-texts of Open Access publications and links
are processed by several algorithms that infer new links and enrich the graph.
</div>
</div>
<div class="uk-padding-large uk-visible@m">
<h6 class="portal-color">Intelligent linking</h6>
<div class="uk-text-light">
Abstracts, full-texts of Open Access publications and links
are processed by several algorithms that infer new links and enrich the graph.
</div>
</div>
</div>
<div class="uk-flex uk-flex-right">
<div class="uk-hidden@m">
<h6 class="portal-color">Embedded metrics</h6>
<div class="uk-text-light">
Powers up calculation of advanced statistics and metrics about Open Science and research impact.
</div>
</div>
<div class="uk-width-3-4 uk-visible@m uk-padding uk-padding-remove-right">
<h6 class="portal-color">Embedded metrics</h6>
<div class="uk-text-light">
Powers up calculation of advanced statistics and metrics about Open Science and research impact.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="services">
<div class="uk-section uk-container uk-container-large">
<div class="uk-padding-small">
<h2>Products & Services</h2>
<div class="service-slide uk-position-relative">
<div *ngFor="let portal of portals; let i=index;" [class.fade-out]="i !== state" [class.fade-in]="i === state"
class="uk-margin-medium-top uk-grid uk-grid-large uk-child-width-1-2@m uk-position-top" uk-grid>
<div>
<img class="uk-box-shadow-medium" [src]="'assets/graph-assets/home/services/' + portal.name + '.jpg'">
</div>
<div>
<div class="uk-width-4-5 uk-padding uk-padding-remove-right">
<img [src]="'assets/common-assets/logo-small-' + portal.name + '.png'">
<h6 class="uk-margin-medium-top uk-text-normal">{{portal.text}}</h6>
<div class="uk-margin-medium-top">
<a class="uk-button portal-button" [href]="'https://' + portal.name + '.openaire.eu'" target="_blank">
Learn More
<span class="space">
<svg height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
<path
d="M12.578,4.244,5.667,11.155V8.167A.833.833,0,1,0,4,8.167v5A.832.832,0,0,0,4.833,14h5a.833.833,0,0,0,0-1.667H6.845l6.911-6.911a.833.833,0,1,0-1.178-1.178h0Z"
fill="#fff" id="arrow-down-left2" transform="translate(7.071 19.799) rotate(-135)"></path>
</svg>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="uk-container uk-section uk-padding-remove-top uk-margin-medium-top">
<div class="uk-padding-small">
<div class="uk-grid uk-child-width-1-3 uk-child-width-1-5@m uk-flex uk-flex-middle services-list" uk-grid>
<div *ngFor="let portal of portals; let i=index;">
<a [class.uk-active]="state == i" (click)="changeSlide(i)"><img
[src]="'assets/common-assets/logo-small-' + portal.name + '.png'"></a>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="uk-container uk-container-large uk-section">
<div class="uk-padding-small">
<h2 class="uk-text-center">Who <span class="portal-color">Benefits</span></h2>
<div class="uk-grid uk-grid-large uk-child-width-1-3@m uk-margin-large-top" uk-grid uk-height-match=".target">
<div>
<div class="uk-card uk-card-default uk-card-body">
<div class="target">
<h4 class="uk-text-center uk-margin-remove">Researchers</h4>
<h6 class="uk-text-center uk-padding uk-margin-remove uk-text-light">Intelligent and contextual discovery
of research</h6>
</div>
<hr>
<ul class="uk-list target uk-text-small">
<li>
<div class="circle uk-light uk-preserve uk-background-secondary uk-margin-small-right uk-icon"
uk-icon="check">
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="check">
<polyline fill="none" stroke="#000" stroke-width="1.1" points="4,10 8,15 17,4"></polyline>
</svg>
</div>
Open Access versions
</li>
<li>
<div class="circle uk-light uk-preserve uk-background-secondary uk-margin-small-right uk-icon"
uk-icon="check">
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="check">
<polyline fill="none" stroke="#000" stroke-width="1.1" points="4,10 8,15 17,4"></polyline>
</svg>
</div>
Navigation through publication, data and software
</li>
<li>
<div class="circle uk-light uk-preserve uk-background-secondary uk-margin-small-right uk-icon"
uk-icon="check">
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="check">
<polyline fill="none" stroke="#000" stroke-width="1.1" points="4,10 8,15 17,4"></polyline>
</svg>
</div>
Discovery of data and software
</li>
</ul>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body">
<div class="target">
<h4 class="uk-text-center uk-margin-remove">Service Providers</h4>
<h6 class="uk-text-center uk-padding uk-margin-remove uk-text-light">Contribute to and use the graph for new services</h6>
</div>
<hr>
<ul class="uk-list target uk-text-small">
<li>
<div class="circle uk-light uk-preserve uk-background-secondary uk-margin-small-right uk-icon"
uk-icon="check">
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="check">
<polyline fill="none" stroke="#000" stroke-width="1.1" points="4,10 8,15 17,4"></polyline>
</svg>
</div>
Metadata and collections interoperable
</li>
<li>
<div class="circle uk-light uk-preserve uk-background-secondary uk-margin-small-right uk-icon"
uk-icon="check">
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="check">
<polyline fill="none" stroke="#000" stroke-width="1.1" points="4,10 8,15 17,4"></polyline>
</svg>
</div>
Research Graph dump and APIs
</li>
<li>
<div class="circle uk-light uk-preserve uk-background-secondary uk-margin-small-right uk-icon"
uk-icon="check">
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="check">
<polyline fill="none" stroke="#000" stroke-width="1.1" points="4,10 8,15 17,4"></polyline>
</svg>
</div>
New services
</li>
</ul>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body">
<div class="target">
<h4 class="uk-text-center uk-margin-remove">Research managers & Policy makers</h4>
<h6 class="uk-text-center uk-padding uk-margin-remove uk-text-light">Used in metrics</h6>
</div>
<hr>
<ul class="uk-list target uk-text-small">
<li>
<div class="circle uk-light uk-preserve uk-background-secondary uk-margin-small-right uk-icon"
uk-icon="check">
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="check">
<polyline fill="none" stroke="#000" stroke-width="1.1" points="4,10 8,15 17,4"></polyline>
</svg>
</div>
Open Science trends
</li>
<li>
<div class="circle uk-light uk-preserve uk-background-secondary uk-margin-small-right uk-icon"
uk-icon="check">
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="check">
<polyline fill="none" stroke="#000" stroke-width="1.1" points="4,10 8,15 17,4"></polyline>
</svg>
</div>
Compliance to funder mandates
</li>
<li>
<div class="circle uk-light uk-preserve uk-background-secondary uk-margin-small-right uk-icon"
uk-icon="check">
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="check">
<polyline fill="none" stroke="#000" stroke-width="1.1" points="4,10 8,15 17,4"></polyline>
</svg>
</div>
Research Impact
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="numbers">
<div class="uk-section">
<div class="uk-padding-small">
<h2 class="uk-text-center">
We believe in <span class="uk-text-bold">Numbers</span>
</h2>
<div class="uk-margin-large-top uk-container uk-margin-bottom uk-text-center">
<div class="uk-grid uk-child-width-1-3@m">
<div *ngIf="fundersSize">
<h3 class="uk-text-secondary">
<span class="uk-text-bold emphasis"> {{fundersSize.number|number}}</span>{{fundersSize.size}}
</h3>
<span class="uk-text-uppercase uk-text-large">Funders</span>
</div>
<div *ngIf="datasourcesSize">
<h3 class="uk-text-secondary">
<span class="uk-text-bold emphasis"> {{datasourcesSize.number|number}}</span>{{datasourcesSize.size}}
</h3>
<span class="uk-text-uppercase uk-text-large">Content providers</span>
</div>
<div *ngIf="projectsSize">
<h3 class="uk-text-secondary">
<span class="uk-text-bold emphasis"> {{projectsSize.number|number}}</span>{{projectsSize.size}}
</h3>
<span class="uk-text-uppercase uk-text-large">Projects</span>
</div>
</div>
</div>
<div class="numbers-background">
<div class="uk-container uk-section">
<div class="uk-grid uk-margin-auto-left uk-margin-auto-right uk-grid-large uk-child-width-1-2@m" uk-grid>
<div *ngIf="publicationsSize || softwareSize || datasetsSize"
class="uk-margin-medium-bottom uk-flex uk-flex-center">
<div>
<div *ngIf="publicationsSize">
<div class="emphasis uk-margin-bottom">{{publicationsSize.count|number}} </div>
<div class="uk-text-uppercase uk-flex uk-flex-middle">
<span class="uk-text-secondary">
<svg xmlns="http://www.w3.org/2000/svg" width="22.106" height="30" viewBox="0 0 22.106 30">
<path id="book"
d="M26.9,9.405V25.749c0,.824-.713,1.218-1.579,1.832a1.034,1.034,0,0,1-1.579-.927V10.685a.877.877,0,0,0-.5-.845c-.379-.194-12.218-6.418-12.218-6.418A2.239,2.239,0,0,0,8.9,3.4,4.487,4.487,0,0,0,7.119,4.808l12.916,7.077a.917.917,0,0,1,.555.815V29.755a1.057,1.057,0,0,1-.582.924,1.209,1.209,0,0,1-1.136-.042c-.339-.207-12.274-7.526-13.063-8-.379-.227-.823-.693-.832-1.039L4.8,5.355a2.612,2.612,0,0,1,.456-1.629c1.1-1.711,4.94-3.658,6.884-2.65L26.348,8.268A1.151,1.151,0,0,1,26.9,9.405Z"
transform="translate(-4.799 -0.8)" fill="#000000"/>
</svg>
</span>
<span class="uk-margin-small-left">publications</span>
</div>
</div>
<div *ngIf="softwareSize" class="uk-visible@m">
<div class="emphasis uk-margin-medium-top uk-margin-bottom">{{softwareSize.count|number}} </div>
<div class="uk-text-uppercase uk-flex uk-flex-middle">
<span class="uk-text-secondary">
<svg xmlns="http://www.w3.org/2000/svg" width="30.001" height="30" viewBox="0 0 30.001 30">
<path id="cog"
d="M29.67,17.558A5.108,5.108,0,0,1,32.557,13.2a15.981,15.981,0,0,0-1.235-2.985A4.827,4.827,0,0,1,26.48,8.634a4.665,4.665,0,0,1-1.22-4.841,15.611,15.611,0,0,0-2.985-1.234,5.655,5.655,0,0,1-4.717,2.884,5.658,5.658,0,0,1-4.719-2.884A15.571,15.571,0,0,0,9.855,3.793,4.661,4.661,0,0,1,8.634,8.634a4.824,4.824,0,0,1-4.841,1.577A15.756,15.756,0,0,0,2.559,13.2a5.106,5.106,0,0,1,2.884,4.362,5.661,5.661,0,0,1-2.884,4.719,15.89,15.89,0,0,0,1.234,2.985A4.667,4.667,0,0,1,8.634,26.48a4.669,4.669,0,0,1,1.221,4.841,15.779,15.779,0,0,0,2.985,1.238,5.647,5.647,0,0,1,4.719-2.887,5.658,5.658,0,0,1,4.719,2.887,16.052,16.052,0,0,0,2.985-1.238,4.667,4.667,0,0,1,1.22-4.841A4.84,4.84,0,0,1,31.325,24.9a15.741,15.741,0,0,0,1.235-2.985A5.106,5.106,0,0,1,29.67,17.558Zm-12.111,6.52a6.522,6.522,0,1,1,6.52-6.52A6.521,6.521,0,0,1,17.558,24.079Z"
transform="translate(-2.559 -2.559)" fill="#0000000"/>
</svg>
</span>
<span class="uk-margin-small-left">software</span>
</div>
</div>
<div *ngIf="datasetsSize" class="uk-hidden@m">
<div class="emphasis uk-margin-medium-top uk-margin-bottom">{{datasetsSize.count|number}} </div>
<div class="uk-text-uppercase uk-flex uk-flex-middle">
<span class="uk-text-secondary">
<svg xmlns="http://www.w3.org/2000/svg" width="23.864" height="30" viewBox="0 0 23.864 30">
<path id="database"
d="M28.2,21.443c-1.437,2.324-6.026,4.025-11.465,4.025S6.7,23.767,5.266,21.443c-.3-.494-.466-.23-.466.012v3.412c0,3.307,5.342,6.733,11.932,6.733s11.932-3.426,11.932-6.731V21.457C28.664,21.213,28.5,20.949,28.2,21.443Zm.018-8.721c-1.415,2.054-6.02,3.562-11.483,3.562S6.661,14.776,5.246,12.722c-.292-.423-.446-.193-.446,0v4.017c0,3,5.342,5.435,11.932,5.435s11.932-2.434,11.932-5.435V12.719c0-.19-.157-.42-.449,0ZM16.732,1.6C10.142,1.6,4.8,3.611,4.8,6.088V8.236c0,2.627,5.342,4.758,11.932,4.758s11.932-2.131,11.932-4.758V6.088C28.664,3.611,23.322,1.6,16.732,1.6Z"
transform="translate(-4.8 -1.6)" fill="#000000"/>
</svg>
</span>
<span class="uk-margin-small-left">research data</span>
</div>
</div>
</div>
</div>
<div *ngIf="softwareSize || datasetsSize || otherSize"
class="uk-margin-medium-bottom uk-flex uk-flex-center">
<div>
<div *ngIf="softwareSize" class="uk-hidden@m">
<div class="emphasis uk-margin-bottom">{{softwareSize.count|number}} </div>
<div class="uk-text-uppercase uk-flex uk-flex-middle">
<span class="uk-text-secondary">
<svg xmlns="http://www.w3.org/2000/svg" width="30.001" height="30" viewBox="0 0 30.001 30">
<path id="cog"
d="M29.67,17.558A5.108,5.108,0,0,1,32.557,13.2a15.981,15.981,0,0,0-1.235-2.985A4.827,4.827,0,0,1,26.48,8.634a4.665,4.665,0,0,1-1.22-4.841,15.611,15.611,0,0,0-2.985-1.234,5.655,5.655,0,0,1-4.717,2.884,5.658,5.658,0,0,1-4.719-2.884A15.571,15.571,0,0,0,9.855,3.793,4.661,4.661,0,0,1,8.634,8.634a4.824,4.824,0,0,1-4.841,1.577A15.756,15.756,0,0,0,2.559,13.2a5.106,5.106,0,0,1,2.884,4.362,5.661,5.661,0,0,1-2.884,4.719,15.89,15.89,0,0,0,1.234,2.985A4.667,4.667,0,0,1,8.634,26.48a4.669,4.669,0,0,1,1.221,4.841,15.779,15.779,0,0,0,2.985,1.238,5.647,5.647,0,0,1,4.719-2.887,5.658,5.658,0,0,1,4.719,2.887,16.052,16.052,0,0,0,2.985-1.238,4.667,4.667,0,0,1,1.22-4.841A4.84,4.84,0,0,1,31.325,24.9a15.741,15.741,0,0,0,1.235-2.985A5.106,5.106,0,0,1,29.67,17.558Zm-12.111,6.52a6.522,6.522,0,1,1,6.52-6.52A6.521,6.521,0,0,1,17.558,24.079Z"
transform="translate(-2.559 -2.559)" fill="#0000000"/>
</svg>
</span>
<span class="uk-margin-small-left">software</span>
</div>
</div>
<div *ngIf="datasetsSize" class="uk-visible@m">
<div class="emphasis uk-margin-bottom">{{datasetsSize.count|number}} </div>
<div class="uk-text-uppercase uk-flex uk-flex-middle">
<span class="uk-text-secondary">
<svg xmlns="http://www.w3.org/2000/svg" width="23.864" height="30" viewBox="0 0 23.864 30">
<path id="database"
d="M28.2,21.443c-1.437,2.324-6.026,4.025-11.465,4.025S6.7,23.767,5.266,21.443c-.3-.494-.466-.23-.466.012v3.412c0,3.307,5.342,6.733,11.932,6.733s11.932-3.426,11.932-6.731V21.457C28.664,21.213,28.5,20.949,28.2,21.443Zm.018-8.721c-1.415,2.054-6.02,3.562-11.483,3.562S6.661,14.776,5.246,12.722c-.292-.423-.446-.193-.446,0v4.017c0,3,5.342,5.435,11.932,5.435s11.932-2.434,11.932-5.435V12.719c0-.19-.157-.42-.449,0ZM16.732,1.6C10.142,1.6,4.8,3.611,4.8,6.088V8.236c0,2.627,5.342,4.758,11.932,4.758s11.932-2.131,11.932-4.758V6.088C28.664,3.611,23.322,1.6,16.732,1.6Z"
transform="translate(-4.8 -1.6)" fill="#000000"/>
</svg>
</span>
<span class="uk-margin-small-left">research data</span>
</div>
</div>
<div *ngIf="otherSize">
<div class="emphasis uk-margin-medium-top uk-margin-bottom">{{otherSize.count|number}} </div>
<div class="uk-text-uppercase uk-flex uk-flex-middle">
<span class="uk-text-secondary">
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30">
<path id="earth"
d="M15,0A15,15,0,1,0,30,15,15,15,0,0,0,15,0Zm0,28.125a13.086,13.086,0,0,1-5.192-1.068l6.831-7.685a.935.935,0,0,0,.237-.622V15.938A.938.938,0,0,0,15.938,15c-3.31,0-6.8-3.442-6.837-3.475a.937.937,0,0,0-.663-.275H4.688a.938.938,0,0,0-.937.937v5.625a.936.936,0,0,0,.518.838L7.5,20.267v5.5A13.132,13.132,0,0,1,3.14,9.375H6.563A.935.935,0,0,0,7.226,9.1l3.75-3.75a.937.937,0,0,0,.275-.663V2.42a13.164,13.164,0,0,1,9.5.779c-.122.1-.24.21-.353.323a5.626,5.626,0,0,0,3.974,9.6c.093,0,.186,0,.278-.007A22.007,22.007,0,0,1,24.4,24.027a.878.878,0,0,0-.024.153A13.084,13.084,0,0,1,15,28.125Z"
fill="#000000"/>
</svg>
</span>
<span class="uk-margin-small-left">other research products</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="uk-section uk-container">
<div class="uk-padding-small">
<h3 class="uk-text-center">Synergies</h3>
<div class="uk-padding-large">
<div class="uk-flex uk-flex-middle uk-grid uk-grid-large uk-child-width-1-4@m uk-child-width-1-2"
uk-grid>
<div>
<img src="assets/graph-assets/home/synergies/microsoft.png">
</div>
<div>
<img src="assets/graph-assets/home/synergies/unpaywall.png">
</div>
<div>
<img src="assets/graph-assets/home/synergies/orcid.png">
</div>
<div>
<img src="assets/graph-assets/home/synergies/rda.png">
</div>
</div>
</div>
</div>
</div>
</div>