MaDgiK-CITE
/
argos
13
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

About How it works page Redesign . Basic outline.

Browse Source
AboutPageRedesign
Kristian Ntavidi 3 years ago
parent db31597fc0
commit e26c700cd3
10 changed files with 586 additions and 2 deletions
Show Stats Download Patch File Download Diff File

307
dmp-frontend/src/assets/splash/about/how-it-works.html
Unescape Escape View File

@ -66,7 +66,7 @@
<div class="page-title">About</div>
</div>
<div class="col pt-5 pb-3">
<div class="row title-4">How it works</div>
<div class="row title-4">What it is</div>
</div>
<p class="pt-3">
ARGOS is the joint effort of OpenAIRE and EUDAT to deliver an open platform for Data Management Planning
@ -102,6 +102,309 @@
</p>
</div>
<div class="col pt-0 pb-3">
<div class="row title-4">How it works</div>
</div>
<p class="pt-3">
Research Data Management (RDM) is a vital part of Open Science that lies at the heart of European
research for it increases the quality of produced data and ensures integrity and preservation of
research outputs. RDM refers to activities undertaken throughout a research lifecycle, spanning from
data collection to data process and analysis. Open Access and FAIR principles govern data activities
today to foster data discovery, distribution and exploitation, thus accelerating scientific breakthroughs.
Coronavirus vaccine is the ultimate example of what can be achieved in a short amount of time when
data are openly shared across the global scientific community. RDM urges scientific practices to be
adjusted in ways that enable data understandability and re-usability from both humans and machines;
services and tools are realised or re-designed to support the shift towards Open and FAIR research outputs.
</p>
<p class="pt-2">
Argos is a service for creating and publishing plans that describe data management activities,
commonly known as Data Management Plans (DMPs). The plans are produced as machine-actionable
outputs (ma-DMPs), in the form of rich text documents, following Open and FAIR practices and are
published in Zenodo. Argos supports RDM at the beginning of research for planning data activities to
be performed, as well as throughout and at the end of research for documenting the steps and
processes followed according to institutional or funder RDM requirements.
</p>
<div class="col pt-5 pb-3">
<div class="row title-5">Dmp Lifecycle</div>
</div>
<p class="pt-2">
Argos follows a full DMP publication lifecycle. Users create their DMPs and add descriptions for their
datasets. DMPs and Datasets are by default created in private mode and can be shared with
colleagues to facilitate the writing process. Datasets are added in DMPs per type and / or per scientific
discipline that they concern. That way information is well-organized and it is easier to distinguish
relevant information from a pool of data activities detailed in a single DMP record. Once created, DMPs
and their Datasets are in draft status and are treated as living documents in the Argos environment,
meaning that they can be versioned and updated at any time. When ready, users can validate and
finalize their DMPs, including corresponding Datasets, and change their visibility status from private to
open. Open DMPs in Argos are available and accessible to all from the Public Dashboards. To close the
DMP lifecycle, Argos integrates Zenodo, so users are able to publish their DMPs directly from its environment.
</p>
</div>
<div class="container">
<div class="col-12" style="margin-top: 121px; ">
<div style="position: relative;" id="lifecycle-img-container">
<img id="img-coloured" class="image-coloured" src="../assets/img/lifecycle_full_color.png" style="width: 100%; height: auto; display: block;" alt="">
<img class="image-grey" src="../assets/img/lifecycle_full_color.png" style="width: 100%; height: auto; display: block;" alt="">
<img class="preface-img" src="../assets/img/lifecycle_full_color.png" alt="">
<!-- EDITORS-DRAFT -->
<div class="red-dot" data-clip-mode="clip-draft" style="top:24.7%; left: 23.5%; cursor: pointer;">
<div class="inner-red-dot"></div>
</div>
<!-- VALIDATED -->
<div class="red-dot" data-clip-mode="clip-validated" style="top:19%; left: 56.5% ; cursor: pointer;">
<div class="inner-red-dot"></div>
</div>
<!-- FINALIZED -->
<div class="red-dot" data-clip-mode="clip-finalized" style="top:39%; right: 19.7%; cursor: pointer;">
<div class="inner-red-dot"></div>
</div>
<!-- DMP -->
<div class="red-dot" data-clip-mode="clip-dmp" style="top:67%; right: -0.3%; cursor: pointer;">
<div class="inner-red-dot"></div>
</div>
</div>
</div>
<div class="col-12" style="margin-top: 121px; ">
<div class="options-menu">
<div class="row">
<!-- tab naviggation -->
<div class="col-7">
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" id="multiple-navigation-1" data-img-fragment href="#create_and_add">Create & Add</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" data-img-fragment="img-fragment-validated-is" href="#validate">Validate</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" data-img-fragment="img-fragment-finalized-is" href="#finalize">Finalize</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" data-img-fragment="img-fragment-dmp-out" href="#dmp">Ma-Dmp Outputs</a>
</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane show active" id="create_and_add">
<small>
Argos consists of two main editors: the DMP editor and the Dataset editor.
Both editors integrate OpenAIRE and ESOC APIs to ease the writing process and
help create links with other outputs. Also, the editors incorporate a mechanism
to enable compliance with the RDA DMP Common Standard.
</small>
<!-- nested naviation -->
<ul class="nav nav-pills" style="padding-top: 2em;">
<li class="nav-item">
<a class="nav-link sub-navigation-button active" data-toggle="tab" data-img-fragment="img-fragment-dmp-editor" href="#dmp_editor_pane">DMP Editor</a>
</li>
<li class="nav-item">
<a class="nav-link sub-navigation-button" data-toggle="tab" data-img-fragment="img-fragment-dataset-editor" href="#dataset_editor_pane">Dataset Editor</a>
</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane show active" id="dmp_editor_pane">
<small>
The DMP editor embeds the Dataset editor to provide a holistic view of a project's
scope, beneficiaries and data activities. Therefore, it guides users step-by-step
into adding appropriate administrative information, selecting templates that
correspond to research needs and requirements, and describing data activities.
</small>
</div>
<div role="tabpanel" class="tab-pane fade" id="dataset_editor_pane">
<small>
The Dataset editor concers information that is solely for datasets, such as how Open
and FAIR principles have been applied to them throughout data management activities.
It is the place to select RDM templates and start answering data questions. Moreover,
the Dataset editor can be used independently at any time when new data are produced
throughout a project lifetime. That allows users to quickly describe their new data and
link them to existing DMPs in their dashboard.
</small>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane fade" id="validate">
<small>
Information contained in DMPs should be validated before being published.
Validation at this stage checks for mandatory fields in the DMP and reports back
when necessary information has not been provided by the user. Once the user
add all necessary information, validation is successful.
</small>
</div>
<div role="tabpanel" class="tab-pane fade" id="finalize">
<small>
DMPs finalization is the process of locking working drafts of DMPs and publishing
them, either just on the Argos platform or on Zenodo where they alse get DOI.
It is possible for datasets contained in DMPs to be finalized independently. That
is important especially for datasets that can not be shared openly, such as those
of sensitive content. Before publishing DMPs, sensitive datasets can be detached
from its core. That way data descriptions are equally protected form being openly
shared along with the DMP content.
</small>
</div>
<div role="tabpanel" class="tab-pane fade " id="dmp">
<small>
Argos ma-DMP outputs carry rich information that exceeds metadata provided in
DMPs whey they are created and deposited as plain texts. Argos applies the RDA
DMP Common Standard to comply with global practices on the machine-actinability.
This is important for two reasons:
</small>
<ol style="list-style-type: lower-roman;">
<li>It enables researchers to switch platforms at anytime and seamlessly work</li>
<li>Adds to the Scholarly Communication ecology and pushes for best practices
in neighbour areas to keep up pace, e.g. deposit in repositories and
classification of DMPs as data management plans and not as publications,
</li>
</ol>
</div>
</div>
</div>
<!-- Images -->
<div class="col">
<img src="../assets/img/dmp_out.png" class="img-fragment-step" id="img-fragment-dmp-out" alt="">
<img src="../assets/img/3_dmp_editor.png" class="img-fragment-step opacity-1" id="img-fragment-dmp-editor" alt="">
<img src="../assets/img/4_dataset_editor.png" class="img-fragment-step" id="img-fragment-dataset-editor" alt="">
<img src="../assets/img/6_validated_is.png" class="img-fragment-step" id="img-fragment-validated-is" alt="">
<img src="../assets/img/8_finalized_is.png" class="img-fragment-step" id="img-fragment-finalized-is" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="container-small">
<div class="col pt-5 pb-3">
<div class="row title-5">Argos in the OpenAIRE ecosystem</div>
</div>
<p class="pt-2">
Argos is hooked on the OpenAIRE ecosystem comprising a diverse set of services and tools for Open
Science and Scholarly Communication, from technical to educational and consultative in nature.
OpenAIRE services and tools are provided for immediate consumption by end-users, i.e. researchers,
research communities, research performing or funding organizations and policymakers. Moreover,
OpenAIRE services are exploitable by software engineers. Argos integrates other OpenAIRE services to
maximise efficiency of operations in Open and FAIR ecosystems and to make connections that add
value in Open Science at global scale. OpenAIRE services that Argos connects to are:
</p>
</div>
<div class="container">
<div class="col" style="margin-top: 121px; position: relative;">
<img src="../assets/img/openaire_ecosystem.png" style="width: 100%; height: auto;" alt="">
<!-- apis -->
<div class="red-dot" style="top:8%; left: 22%"
data-toggle="tooltip" data-placement="bottom"
title='<h2>APIs</h2>
Utilises OpenAIRE pool of resources
and APIs to provide quick input to
users (e.g. CORDIS, Datacite, re3data,
ORCID, etc).'
><div class="inner-red-dot"></div>
</div>
<!-- zenodo -->
<div class="red-dot" style="top:10%; left: 54%"
data-toggle="tooltip" data-placement="bottom"
title='<h2>Zenodo</h2>
Closes the DMP lifecycle by offering a
DMP platform to expose DMP for
their immediate publication in an
open and FAIR manner (DMPs are
assigned DOIs, get licenses, follow
versioning mechanism etc).'
><div class="inner-red-dot"></div>
</div>
<!-- provide -->
<div class="red-dot" style="top:48.2%; left: 2.5%"
data-toggle="tooltip" data-placement="bottom"
title='<h2>Provide</h2>
Sends notifications to repository
managers of the OpenAIRE network
when datasets described in Argos
ma-DMPs are claimed to be
deposited in their repositories.'
><div class="inner-red-dot"></div>
</div>
<!-- monitor -->
<div class="red-dot" style="top:60.2%; right: 2.5%"
data-toggle="tooltip" data-placement="bottom"
title="<h2>Monitor</h2>
Collects contextualised information
about ma-DMPs to understand how
RDM and DMPs evolve in time and
support decision making of funders
and policymakers."
>
<div class="inner-red-dot"></div>
</div>
<!-- graph -->
<div class="red-dot" style="bottom:14.2%; left: 40.5%"
data-toggle="tooltip" data-placement="bottom"
title='<h2>Research Graph</h2>
Enriches the ma-DMP entity in the
OpenAIRE knowledge graph for open
scholarly communication information
and creates relationships with other
research outputs and links, adding in
the OpenAIRE LOD ecology.'
>
<div class="inner-red-dot"></div>
</div>
<!-- explore -->
<div class="red-dot" style="bottom:1%; left: 56%" data-toggle="tooltip" data-placement="bottom"
title='
<h2>Explore</h2>
Adds ma-DMPs in the OpenAIRE
search engine and makes them
findable under a dedicated resource
type category "data managment
plan".'>
<div class="inner-red-dot"></div>
</div>
</div>
</div>
<div class="container-small">
<p class="mt-3 pt-4"><b>Useful Resources</b></p>
<p>
<ul style="padding-bottom: 4em;">
<li>
Argos RDA output adoption:
<br>
<a href="https://www.rd-alliance.org/implementing-dmp-common-standard-argos-tool-madmps">
https://www.rd-alliance.org/implementing-dmp-common-standard-argos-tool-madmps
</a>
</li>
<li>
Webinar:
<br>
<a href="https://www.rd-alliance.org/implementing-dmp-common-standard-argos-tool-madmps">
https://www.rd-alliance.org/implementing-dmp-common-standard-argos-tool-madmps
</a>
(starts at 30:15)
</li>
</ul>
</p>
<p class="pt-2">
More details on ARGOS as registered in the OpenAIRE services catalogue is available here:
<a href="http://catalogue.openaire.eu/service/openaire.argos"><u>http://catalogue.openaire.eu/service/openaire.argos</u></a>.
@ -168,6 +471,8 @@
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<!-- Js for this file -->
<script src="../js/how-it-works.js"></script>
</body>
</html>

BIN
dmp-frontend/src/assets/splash/assets/img/3_dmp_editor.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 158 KiB

BIN
dmp-frontend/src/assets/splash/assets/img/4_dataset_editor.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 190 KiB

BIN
dmp-frontend/src/assets/splash/assets/img/6_validated_is.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 36 KiB

BIN
dmp-frontend/src/assets/splash/assets/img/8_finalized_is.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 52 KiB

BIN
dmp-frontend/src/assets/splash/assets/img/dmp_out.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 58 KiB

BIN
dmp-frontend/src/assets/splash/assets/img/lifecycle_full_color.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 330 KiB

BIN
dmp-frontend/src/assets/splash/assets/img/openaire_ecosystem.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 789 KiB

185
dmp-frontend/src/assets/splash/css/styles.css
Unescape Escape View File

@ -150,11 +150,15 @@ p a {
color: #212121;
}
.title-1, .title-2, .title-3, .title-4 {
.title-1, .title-2, .title-3, .title-4, .title-5 {
text-align: left;
font-size: 2.37rem;
font-family: 'Roboto', sans-serif;
}
.title-5{
color: #129D99;
font: normal normal 300 27px/35px Roboto;
}
.page-title {
text-align: center;
@ -365,3 +369,182 @@ hr {
.ext-link-icon {
margin-left: .2rem;
}
/* ABOUT HOW IT WORKDS PAGE REDESIGN */
.red-dot{
width: 27px;
height: 27px;
z-index: 20;
border: 3px solid #ee254091;
position: absolute;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.inner-red-dot{
background-color: #EE2540;
width: 19px;
height: 19px;
border-radius: 50%;
}
/* .tooltip{
background-color: red;
} */
.tooltip >.tooltip-inner {
padding: 2em;
background-color: #FFF;
color: black;
box-shadow: 0px 3px 6px #0000001A;
text-align: start;
max-width: 25em;
}
.tooltip .show{
opacity: 1 !important;
}
.tooltip h2{
color: #23BCBA;
font-size: 1.3rem;
font-weight: bold;
line-height: 2rem;
}
.tooltip.bs-tooltip-top .arrow:before {
border-top-color: #fff
}
.tooltip.bs-tooltip-right .arrow:before {
border-right-color: #fff;
}
.tooltip.bs-tooltip-left .arrow:before {
border-left-color: #fff;
}
.tooltip.bs-tooltip-bottom .arrow:before {
border-bottom-color: #fff;
}
.tooltip.show {
opacity: 1 !important;
}
.image-coloured {
z-index: 1;
position: absolute;
left: 0;
top: 0px;
/* position: absolute; */
clip-path: polygon(0% 0%);
}
.image-grey {
z-index: 0;
filter: grayscale(100%);
}
.clip-draft{
clip-path:polygon(41.84% 0.0%, 40.13% 46.41%, 40.90% 100%, 0.0% 100.0%, 0.0% 0.0%);
}
.clip-validated{
clip-path: polygon(41.84% 0%, 40.13% 46.41%, 40.9% 100%, 68.32% 100.0%, 68.32% 0%);
}
.clip-finalized{
clip-path: polygon(58.86% 0.0%, 58.74% 100.0%, 88.65% 100.0%, 88.65% 0.0%);
}
.clip-dmp{
clip-path: polygon(80.26% 0.0%, 80.13% 100.0%, 100.00% 100.0%, 100.0% 0.0%);
}
.preface-img{
width: 100%; height: auto; display: block; z-index: 2;
position: absolute;
top:0;
left: 0;
opacity: 1;
filter: grayscale(100%);
transition-property: opacity;
transition-duration: 300ms;
transition-delay: 50ms;
transition-timing-function: ease-in;
}
.options-menu{
box-shadow: 0px 6px 15px #0000001A;
border-radius: 36px;
padding: 3.2em 4.1em !important;
min-height: 30em;
}
/* First level of tabs */
.options-menu .nav-tabs{
border-color: transparent !important;
color: #212121;
margin-bottom: 1.2em;
}
.options-menu .nav-tabs .nav-item .nav-link{
border-radius: 0px !important;
padding: 0.2rem 0rem !important;
}
.options-menu .nav-tabs .nav-item:first-child .nav-link{
margin-left: 0px;
}
.options-menu .nav-tabs .nav-link.active{
border-left-color: transparent !important;
border-top-color: transparent !important;
border-right-color: transparent !important;
}
.options-menu .nav-tabs .nav-link:hover:not(.active){
border-color: transparent !important;
}
.options-menu .nav-tabs .nav-link{
opacity: 0.5;
transition: opacity 200ms 50ms ease-out;
}
.options-menu .nav-tabs .nav-link:hover{
color: #212121;
}
.options-menu .nav-tabs .nav-link.active{
border-bottom: 3px solid black !important;
opacity: 1;
}
/* nested tabs */
.options-menu .nav-pills{
margin-bottom: 1em;
}
.options-menu .nav-pills .nav-link{
border-radius: 40px;
border: 1px solid #1A1A1A;
color: #1A1A1A;
opacity: 0.5;
/* transition: opacity 200ms 50ms ease-out; */
}
.options-menu .nav-pills .nav-link.active{
background-color: #129D99;
color: #F9FBFC;
border: 1px solid transparent;
opacity: 1;
}
.options-menu .nav-pills .nav-item:first-child .nav-link{
margin-left: 0px;
}
.img-fragment-step{
width: auto; max-height:23em;
position: absolute;
opacity: 0;
transition: opacity 200ms 50ms ease-out;
}
.opacity-0{
opacity: 0;
}
.opacity-1{
opacity: 1;
}

96
dmp-frontend/src/assets/splash/js/how-it-works.js
Unescape Escape View File

@ -0,0 +1,96 @@
jQuery(function(){
const $img_coloured = $('#img-coloured');
const $img_preface = $('.preface-img');
const $action_dots = $('[data-clip-mode]');
const $lifecycle_img_container = $('#lifecycle-img-container');
let current_mode = null;
const mutationObserver = new MutationObserver(function(mutations) {
mutations.forEach(mutation=>{
if(mutation.attributeName === 'class'){//class changed
// console.log(mutation);
const isActive = mutation.target.className.includes('active');
const target_image_id = mutation.target.attributes['data-img-fragment'].value;
if(target_image_id && target_image_id.length){
//dummy fix clean all opacities
$('.img-fragment-step').each(function(){
$(this).removeClass('opacity-1');
});
if(isActive){
$("#"+target_image_id).addClass('opacity-1');
}
}
if(mutation.target.id == 'multiple-navigation-1' && isActive){ //search children
const $target_nav_links = $('.sub-navigation-button');
$target_nav_links.removeClass('active');
$target_nav_links.first().addClass('active');
}
}
})
});
$(function () {
$('[data-toggle="tooltip"]').tooltip({html:true})
})
$action_dots.on('mouseenter', function(){
const mode = $(this).attr('data-clip-mode');
current_mode = mode;
$img_coloured.addClass(mode);
$img_preface.addClass('opacity-0');
$action_dots.each(function(){
if($(this).attr('data-clip-mode') != mode){
$(this).addClass('d-none');
};
});
});
$action_dots.on('mouseleave', function(){
});
$lifecycle_img_container.on('mouseleave', function(){
if(current_mode){
const mode = current_mode;
$img_coloured.removeClass(mode);
$img_preface.removeClass('opacity-0');
$action_dots.each(function(){
$(this).removeClass('d-none');
});
}
current_mode = null;
});
// $('[data-img-fragment]').each(function(){
// console.log($(this).attr('data-img-fragment'));
// })
$("[data-img-fragment]").each(function(){
const nodeElement = $(this)[0];
mutationObserver.observe(nodeElement ,{attributes:true});
})
// mutationObserver.observe($("[data-img-fragment]")[1] ,{attributes:true});
});
Write Preview
Loading…
Cancel
Save