connect/src/app/learn-how/learnInDepth/learn-in-depth.component.ts

import {Component, OnInit} from '@angular/core';
import {Breadcrumb} from "../../openaireLibrary/utils/breadcrumbs/breadcrumbs.component";
import {EnvProperties} from "../../openaireLibrary/utils/properties/env-properties";
import {ActivatedRoute, Router} from "@angular/router";
import {Meta, Title} from "@angular/platform-browser";
import {SEOService} from "../../openaireLibrary/sharedComponents/SEO/SEO.service";
import {PiwikService} from "../../openaireLibrary/utils/piwik/piwik.service";
import {HelperService} from "../../openaireLibrary/utils/helper/helper.service";
import {Subscriber} from "rxjs";
import {properties} from "../../../environments/environment";

@Component({
  selector: 'learn-in-depth',
  template: `
    <div class="image-front-topbar" style="background-color: #E2EEFA;">
      <div class="uk-section uk-padding-remove-bottom uk-container uk-container-large">
        <div class="uk-padding-small">
          <breadcrumbs [breadcrumbs]="breadcrumbs"></breadcrumbs>
        </div>
      </div>
    </div>
    <div class="uk-section uk-padding-remove-top"
         style="background: transparent linear-gradient(0deg, #FAFAFA 0%, #E2EEFA 100%);">
      <div class="uk-container uk-container-large uk-margin-top">
        <div class="uk-padding-small">
          <div class="uk-grid" uk-grid>
            <div class="uk-width-3-4@m uk-width-1-1@s uk-first-column">
              <h1 class="uk-width-3-4  uk-margin-medium-bottom">Let&rsquo;s set up a Gateway for your Community <strong>Together</strong>
              </h1>
              <div class="uk-width-4-5@m uk-width-1-1@s uk-text-large">
                <div class="uk-margin-bottom">You don&rsquo;t have to go alone.</div>

                <div>We work with you in <strong>4 collaborative steps</strong> to identify your needs, putting in
                  practice our expertise on open science so you get the most out of OpenAIRE&rsquo;s operational
                  services.
                </div>
              </div>
            </div>
            <div class="uk-margin-large-top uk-width-expand">
              <img src="assets/connect-assets/banner/together.png"
                   style="height:285px; width:308px"/>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="uk-container uk-container-large uk-section">
      <div class="uk-padding-small">
        <div class="uk-grid" uk-grid="">
          <div class="uk-width-1-6 uk-position-relative uk-flex uk-flex-column uk-first-column">
            <img class="uk-align-center" src="assets/connect-assets/about/1.png" style="width:100px"/>
            <img class="uk-align-center" src="assets/connect-assets/sketch_line_arrow.svg"/>
          </div>
          <div class="uk-width-expand">
            <h3 class="uk-margin-medium uk-text-bold">1. Analyse your needs</h3>
            <div style="font-style: italic;">Identify the scope and goals. Understand open science practices within EOSC
              and the OpenAIRE services
            </div>
            <p>In this stage, you get to talk to the OpenAIRE team. Share your expectations with us and let us give you
              all the details about the operational OpenAIRE services, which will be integrated into the Gateway for
              your community.</p>
            <p>Here are the most important questions that the OpenAIRE team will ask you, in order to understand your
              scope and goals:</p>
            <ul class="uk-list uk-list-bullet">
              <li>Do you want a gateway, where researchers can have access to all research products of a discipline? Do
                you want a gateway that gathers any research outcome, produced thanks to the funding and services of a
                given research infrastructure?
              </li>
              <li>Is your community (in)formally organized in sub-communities? Would you like to browse research
                products and get statistics also for these sub-communities? For example, the European Grid
                Infrastructure (EGI) features &ldquo;virtual organizations&rdquo; that represent discipline-specific
                communities and/or specific research projects. The research infrastructure DARIAH, on the other hand, is
                organised in national nodes (e.g. DARIAH-IT, DARIAH-DE).
              </li>
              <li>How can the OpenAIRE team identify the research products of your community, among all those available
                in the OpenAIRE Graph? Through a series of steps: set of keywords, acknowledgment statements, set of
                projects, set of repositories, etc. This can be partial and provisional information that will serve as a
                starting point to the OpenAIRE team. You will be able to refine and update this information, in the
                second phase &ldquo;Develop a pilot&rdquo;.
              </li>
            </ul>
          </div>
        </div>
        <div class="uk-grid" uk-grid="" uk-height-match="">
          <div class="uk-width-1-6 uk-position-relative uk-flex uk-flex-column uk-first-column">
            <img class="uk-align-center" src="assets/connect-assets/about/2.png" style="width:100px"/>
            <img class="uk-align-center" src="assets/connect-assets/sketch_line_arrow.svg"/>
          </div>
          <div class="uk-width-expand">
            <h3 class="uk-margin-medium uk-text-bold">2. Develop a pilot</h3>
            <div style="font-style: italic;">We translate your needs into rules and processes and we configure
              operational OpenAIRE services.
            </div>
            <p>Based on the information gathered in phase 1 &ldquo;Analyse your needs&rdquo;, the OpenAIRE team will set
              up a pilot Gateway. We will configure the OpenAIRE mining algorithms to identify research products of the
              OpenAIRE Graph that are relevant to your community. Those, together with some basic statistics, will be
              available in the pilot version of the Community Gateway that will be deployed on the OpenAIRE BETA
              infrastructure.</p>
            <p>The OpenAIRE team will give you a demo of the Community Gateway, with details on how to refine and update
              the configuration of the Community Gateway, both in terms of criteria for including research products and
              in terms of logo and visible portal pages.</p>
          </div>
        </div>
        <div class="uk-grid" uk-grid="" uk-height-match="">
          <div class="uk-width-1-6 uk-position-relative uk-flex uk-flex-column uk-first-column">
            <img class="uk-align-center" src="assets/connect-assets/about/3.png" style="width:100px"/>
            <img class="uk-align-center" src="assets/connect-assets/sketch_line_arrow_large.svg"/>
          </div>
          <div class="uk-width-expand">
            <h3 class="uk-margin-medium uk-text-bold">3. Test and Validate</h3>
            <div style="font-style: italic;">You validate and test your new Community Gateway (portal). If needed, we
              further refine and adapt to your needs
            </div>
            <p>Upon the completion of phase 2, take the time you need to test all its features, from search and browse
              for research products, to addition/removal of statistics from the portal. You can report any issue you
              might find and ask questions directly to the dedicated OpenAIRE team, via a specially designed
              collaboration tool.</p>
            <p>Typically, this phase takes some months, as you will have to go through certain procedures. Change the
              configuration of the criteria to include research products, wait for the new configuration to be applied
              on the OpenAIRE graph and validate the results, before you actually decide that the coverage of research
              products for your community is adequate.</p>
            <p>For some communities, the OpenAIRE team may also be able to implement dedicated mining algorithms (e.g.
              to find acknowledgement statements to your community/infrastructure in the full-texts of research
              articles) that may require several rounds of application, validation, and fine-tuning, before it reaches a
              high precision and recall. Your feedback is very important to minimize the effort and time needed for this
              process to complete.</p>
            <div class="uk-width-1-1 uk-text-center uk-margin-medium ">
              <img src="assets/connect-assets/OpenAIRE-RCD_howtos.png" style="height:auto; width:auto"/>
            </div>
          </div>
        </div>
        <div class="uk-grid" uk-grid="" uk-height-match="">
          <div class="uk-width-1-6 uk-position-relative uk-first-column">
            <img class="uk-align-center" src="assets/connect-assets/about/4.png" style="width:100px"/>
          </div>
          <div class="uk-width-expand">
            <h3 class="uk-margin-medium  uk-text-bold">4. Roll out the service</h3>
            <div style="font-style: italic;">We jointly roll out your new portal. You take over the business operations
              and start engaging your researchers
            </div>
            <p>Here we are: the coverage of research products is good, interesting statistics and charts have been
              selected, and the portal pages available for end-users are ready. We can roll out the Community Gateway
              and make it available to all the researchers of the community!</p>
            <p>You, as a Community manager, become the main &ldquo;promoter&rdquo; of the Community Gateway. Engage the
              researchers of your community and, when applicable, inform the managers of the research infrastructure
              about the availability of tools for impact monitoring.</p>
            <p>Remember that you will still be able to change the configuration of the Community Gateway in order to
              address any issue that may arise and to follow the evolution of the community (e.g. a new project or a new
              content provider that was not previously available in OpenAIRE).</p>
            <p>Remember that you don&rsquo;t have to go alone: the dedicated issue tracker you used in the &ldquo;Test
              and Validate&rdquo; phase is always available for you to contact the OpenAIRE team and ask for
              support.</p>
          </div>
        </div>
      </div>
    </div>
    <div class="uk-section" style="background-color: #D9D8E8;">
      <div class="uk-container">
        <div class="uk-padding-small">
          <div class="uk-flex uk-flex-middle uk-padding uk-grid" uk-grid="">
            <div class="uk-text-center uk-width-1-1@s uk-width-1-3@m uk-first-column">
              <img src="assets/connect-assets/contact/2.png" style="width:329px"/>
            </div>
            <div class="uk-width-expand">
              <h3>Let us help you develop a collaborative Open Science Gateway for your
                community.<br/>
                It is fast. It is reliable.</h3>
              <div class="uk-margin-medium uk-text-large">Get in touch with our team to find out how.</div>
              <div class="uk-inline"><a class="uk-button portal-button" routerLink="/contact-us">CONTACT US</a></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  `
})
export class LearnInDepthComponent implements OnInit {
  public pageTitle: string = "OpenAIRE - Connect | Learn In Depth";
  public pageDescription: string = "Work in 4 collaborative steps to identify your needs, putting in practice our expertise on open science so you get the most out of OpenAIRE’s operational services.";
  public breadcrumbs: Breadcrumb[] = [
    {name: 'home', route: '/'},
    {name: 'about', route: '/about'},
    {name: 'learn in-depth'}
  ];
  subscriptions = [];
  public pageContents = null;
  public divContents = null;
  
  public url: string = null;
  
  properties: EnvProperties;
  
  constructor(
    private route: ActivatedRoute,
    private _router: Router,
    private _meta: Meta,
    private _title: Title,
    private seoService: SEOService,
    private _piwikService: PiwikService,
    private helper: HelperService) {
  }
  
  public ngOnInit() {

        this.properties = properties;
        
        if (this.properties.enablePiwikTrack && (typeof document !== 'undefined')) {
          this.subscriptions.push(this._piwikService.trackView(this.properties, this.pageTitle, this.properties.piwikSiteId).subscribe());
        }
        this.url = this.properties.baseLink + this._router.url;
        this.seoService.createLinkForCanonicalURL(this.url);
        this.updateUrl(this.url);
        this.updateTitle(this.pageTitle);
        this.updateDescription(this.pageDescription);
        
        //this.getDivContents();
        this.getPageContents();
  }
  
  private getPageContents() {
    this.subscriptions.push(this.helper.getPageHelpContents(this.properties, 'connect', this._router.url).subscribe(contents => {
      this.pageContents = contents;
    }));
  }
  
  private getDivContents() {
    this.subscriptions.push(this.helper.getDivHelpContents(this.properties, 'connect', this._router.url).subscribe(contents => {
      this.divContents = contents;
    }));
  }

  ngOnDestroy() {
    this.subscriptions.forEach(subscription => {
      if (subscription instanceof Subscriber) {
        subscription.unsubscribe();
      }
    });
  }


  private updateDescription(description: string) {
    this._meta.updateTag({content: description}, "name='description'");
    this._meta.updateTag({content: description}, "property='og:description'");
  }
  
  private updateTitle(title: string) {
    var _title = ((title.length > 50) ? title.substring(0, 50) : title);
    this._title.setTitle(_title);
    this._meta.updateTag({content: _title}, "property='og:title'");
  }
  
  private updateUrl(url: string) {
    this._meta.updateTag({content: url}, "property='og:url'");
  }
}