diff --git a/dmp-frontend/src/assets/splash/about/how-it-works.html b/dmp-frontend/src/assets/splash/about/how-it-works.html index e4e70c400..7f94ce1d6 100644 --- a/dmp-frontend/src/assets/splash/about/how-it-works.html +++ b/dmp-frontend/src/assets/splash/about/how-it-works.html @@ -66,7 +66,7 @@
About
-
How it works
+
What it is

ARGOS is the joint effort of OpenAIRE and EUDAT to deliver an open platform for Data Management Planning @@ -102,6 +102,309 @@

+
+
How it works
+
+ + +

+ 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. +

+ +

+ 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. +

+ +
+
Dmp Lifecycle
+
+ +

+ 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. +

+ + +
+ +
+ +
+ + + + + + +
+
+
+ +
+
+
+ +
+
+
+ +
+
+
+
+ + +
+
+
+ +
+ +
+ +
+
+ + 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. + + + + +
+
+ + 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. + +
+
+ + 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. + +
+
+ + + +
+
+ + 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. + +
+
+ + 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. + +
+
+ + 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: + + +
    +
  1. It enables researchers to switch platforms at anytime and seamlessly work
  2. +
  3. 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, +
  4. +
+
+
+
+ +
+ + + + + +
+
+
+
+
+
+ +
+
Argos in the OpenAIRE ecosystem
+
+ +

+ 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: +

+ +
+
+
+ + + +
+
+ +
+
+ +
+
+ +
+
+
+ +
+
+
+ +
+
+
+ +
+
+
+ +

Useful Resources

+

+

+

+ + +

More details on ARGOS as registered in the OpenAIRE services catalogue is available here: http://catalogue.openaire.eu/service/openaire.argos. @@ -168,6 +471,8 @@ + + diff --git a/dmp-frontend/src/assets/splash/assets/img/3_dmp_editor.png b/dmp-frontend/src/assets/splash/assets/img/3_dmp_editor.png new file mode 100644 index 000000000..6d1fe7742 Binary files /dev/null and b/dmp-frontend/src/assets/splash/assets/img/3_dmp_editor.png differ diff --git a/dmp-frontend/src/assets/splash/assets/img/4_dataset_editor.png b/dmp-frontend/src/assets/splash/assets/img/4_dataset_editor.png new file mode 100644 index 000000000..f1a699edd Binary files /dev/null and b/dmp-frontend/src/assets/splash/assets/img/4_dataset_editor.png differ diff --git a/dmp-frontend/src/assets/splash/assets/img/6_validated_is.png b/dmp-frontend/src/assets/splash/assets/img/6_validated_is.png new file mode 100644 index 000000000..4464c9d5b Binary files /dev/null and b/dmp-frontend/src/assets/splash/assets/img/6_validated_is.png differ diff --git a/dmp-frontend/src/assets/splash/assets/img/8_finalized_is.png b/dmp-frontend/src/assets/splash/assets/img/8_finalized_is.png new file mode 100644 index 000000000..a9a15c7e6 Binary files /dev/null and b/dmp-frontend/src/assets/splash/assets/img/8_finalized_is.png differ diff --git a/dmp-frontend/src/assets/splash/assets/img/dmp_out.png b/dmp-frontend/src/assets/splash/assets/img/dmp_out.png new file mode 100644 index 000000000..8685c528e Binary files /dev/null and b/dmp-frontend/src/assets/splash/assets/img/dmp_out.png differ diff --git a/dmp-frontend/src/assets/splash/assets/img/lifecycle_full_color.png b/dmp-frontend/src/assets/splash/assets/img/lifecycle_full_color.png new file mode 100644 index 000000000..d774e7c29 Binary files /dev/null and b/dmp-frontend/src/assets/splash/assets/img/lifecycle_full_color.png differ diff --git a/dmp-frontend/src/assets/splash/assets/img/openaire_ecosystem.png b/dmp-frontend/src/assets/splash/assets/img/openaire_ecosystem.png new file mode 100644 index 000000000..1e013eb86 Binary files /dev/null and b/dmp-frontend/src/assets/splash/assets/img/openaire_ecosystem.png differ diff --git a/dmp-frontend/src/assets/splash/css/styles.css b/dmp-frontend/src/assets/splash/css/styles.css index 1d9df2a13..5f48c354c 100644 --- a/dmp-frontend/src/assets/splash/css/styles.css +++ b/dmp-frontend/src/assets/splash/css/styles.css @@ -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; +} \ No newline at end of file diff --git a/dmp-frontend/src/assets/splash/js/how-it-works.js b/dmp-frontend/src/assets/splash/js/how-it-works.js new file mode 100644 index 000000000..ca07cbb6e --- /dev/null +++ b/dmp-frontend/src/assets/splash/js/how-it-works.js @@ -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}); + + + + +});