openaire-library/monitor/methodology/terminology.component.ts

import {
  AfterContentChecked,
  AfterViewInit,
  ChangeDetectorRef,
  Component,
  OnDestroy,
  OnInit,
  ViewChild
} from "@angular/core";
import {Subscription} from "rxjs";
import {Meta, Title} from "@angular/platform-browser";
import {ActivatedRoute, Router} from "@angular/router";
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 {HelperService} from "../../utils/helper/helper.service";


declare var ResizeObserver;

@Component({
  selector: 'terminology',
  template: `
		<div id="graph_element" #graph_element class="uk-blur-background" uk-sticky="bottom: true;" [attr.offset]="graph_offset">
			<div class="uk-container uk-container-large uk-margin-small-top uk-margin-small-bottom">
				<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 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 *ngIf="divContents" class="uk-section" uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-fade; delay: 250">
      <div class="uk-section uk-container uk-container-large" uk-scrollspy-class>
				<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;">
              <slider-tabs type="scrollable" position="left">
                <slider-tab tabId="entities" tabTitle="1. Entities"></slider-tab>
                <slider-tab tabId="inherited-and-inferred-attributes" tabTitle="2. Inherited and Inferred Attributes"></slider-tab>
                <slider-tab tabId="constructed-attributes" tabTitle="3. Constructed Attributes"></slider-tab>
              </slider-tabs>
						</div>
					</div>
					<div class="uk-width-1-1 uk-hidden@m">
						<div class="uk-sticky uk-background-default" uk-sticky>
              <slider-tabs type="scrollable" position="horizontal">
                <slider-tab tabId="entities" tabTitle="1. Entities"></slider-tab>
                <slider-tab tabId="inherited-and-inferred-attributes" tabTitle="2. Inherited and Inferred Attributes"></slider-tab>
                <slider-tab tabId="constructed-attributes" tabTitle="3. Constructed Attributes"></slider-tab>
              </slider-tabs>
						</div>
					</div>
					<div class="uk-width-expand@m">
						<div id="entities" class="uk-margin-large-bottom">
							<helper [texts]="divContents.entities"></helper>
						</div>
						<div id="inherited-and-inferred-attributes" class="uk-margin-large-bottom">
							<!-- Helptext below here -->
              <helper [texts]="divContents['inherited-and-inferred-attributes']"></helper>
						</div>
						<div id="constructed-attributes" class="uk-margin-large-bottom">
              <helper [texts]="divContents['constructed-attributes']"></helper>
							<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>
								<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-text-bold uk-text-primary">
										Journal Business Models
									</div>
									<hr>
									<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>
										</dd>
										<dd class="uk-width-1-3@m uk-width-1-1">
											<p>We follow <a target="_blank" href="https://support.unpaywall.org/support/solutions/articles/44001792752-how-do-we-decide-if-a-given-journal-is-fully-oa-">Unpaywall’s approach</a> on defining fully Open Access journals and publishers and we construct the lists of the latter using Unpaywall data.</p>
											<p>In brief, a journal is fully Open Access if one or more of the following occur: </p>
											<ol>
												<li>It is in the Directory of Open Access Journals (DOAJ)</li>
												<li>It has a known fully OA Publisher (curated list).</li>
												<li>It only publishes OA articles.</li>
											</ol>
										</dd>
									</div>
									<hr>
									<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>
										</dd>
										<dd class="uk-width-1-3@m uk-width-1-1">
											<p>Journals without any open access articles.</p>
										</dd>
									</div>
									<hr>
									<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>
										</dd>
										<dd class="uk-width-1-3@m uk-width-1-1">
											<p>Journals with open access articles that are not fully OA journals.</p>
										</dd>
									</div>
									<hr>
									<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
												transitioning to a fully Open Access journal.</p>
											<p>In addition, a Transformative Journal must:</p>
											<ul>
												<li>gradually increase the share of Open Access content; and</li>
												<li>offset subscription income from payments for publishing services (to avoid double payments)."
												</li>
											</ul>
											<p>Source: <a href="https://www.coalition-s.org/transformative-journals-faq/" target="_blank">Plan S initiative</a></p>
										</dd>
										<dd class="uk-width-1-3@m uk-width-1-1">
											<p>
												We identify Transformative Journals  by ISSN matching with the publicly available <a href="https://journalcheckertool.org/transformative-journals/" target="_blank">Transformative Journals data</a> from Plan S initiative.
											</p>
										</dd>
									</div>
									<hr>
									<div class=" uk-text-bold uk-text-primary">
										Journal APC Business Models
									</div>
									<hr>
									<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>
											<p>In other words, fully OA journals are either diamond, or charge APCs.</p>
										</dd>
										<dd class="uk-width-1-3@m uk-width-1-1">
											<p>
											We obtain APC data from DOAJ using <a href="https://doaj.org/docs/public-data-dump/" target="_blank">DOAJ’s Public Data Dump</a> (an exportable version of the journal metadata). We used it to determine whether a particular fully OA journal charges APCs.
											</p>
										</dd>
									</div>
									<hr>
									<div class=" uk-text-bold uk-text-primary">
										Routes to Open Access (OA)
									</div>
									<hr>
									<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>
										</dd>
										<dd class="uk-width-1-3@m uk-width-1-1">
											<p>As in definition</p>
										</dd>
									</div>
									<hr>
									<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>
										</dd>
										<dd class="uk-width-1-3@m uk-width-1-1">
											<p>We define fully OA journals above.</p>
										</dd>
									</div>
									<hr>
									<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>
										</dd>
										<dd class="uk-width-1-3@m uk-width-1-1">
											<p>We define hybrid journals above.</p>
											<p>At this point we consider only CC licenses “open”. We are currently working on cleaning non-CC
												licenses as well to identify other open ones.</p>
											<p>In principle, this means that we may be underestimating the number of hybrid OA articles and
												overestimating the number of bronze.</p>
										</dd>
									</div>
									<hr>
									<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>
										</dd>
										<dd class="uk-width-1-3@m uk-width-1-1">
				
										</dd>
									</div>
									<hr>
									<div class=" uk-text-bold uk-text-primary">
										Miscellaneous
									</div>
									<hr>
									<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 publication’s full text in a specific time frame, from a given set of
												data sources.</p>
										</dd>
										<dd class="uk-width-1-3@m uk-width-1-1">
											<p>We utilize the usage data for the downloads from <a href="https://www.openaire.eu/guides-usage-counts" target="_blank">OpenAIRE’s Usage Counts service</a> that harvests it from a set of
												datasources. The time range of available downloads varies for each datasource.</p>
										</dd>
									</div>
								</dl>
							</div>
						</div>
					</div>
				</div>
      </div>
    </div>
  `
})
export class TerminologyComponent implements OnInit, OnDestroy, AfterViewInit, AfterContentChecked {
  public tab: 'entities' | 'attributes' = 'entities';
  private subscriptions: any[] = [];
  public openaireEntities = OpenaireEntities;
  public breadcrumbs: Breadcrumb[] = [{name: 'home', route: '/'}, {name: 'Resources - Terminology and construction', keepFormat: true}];
  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;
  public properties = properties;
  public divContents: any;
  
  constructor(private seoService: SEOService,
              private meta: Meta,
              private router: Router,
              private route: ActivatedRoute,
              private title: Title,
              private cdr: ChangeDetectorRef,
              private helper: HelperService) {
  }
  
  ngOnInit() {
    this.subscriptions.push(this.route.params.subscribe(params => {
      const description = "Monitor | Terminology and construction";
      const title = "Monitor | Terminology and construction";
      this.metaTags(title, description);
      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';
      }
    }));
    this.getDivContents();
  }
  
  ngAfterViewInit() {
    if (typeof document !== 'undefined') {
      if(this.graph_element) {
        this.observeGraphElement();
      }
    }
  }
  
  ngAfterContentChecked() {
    if(this.graph_element && typeof document !== 'undefined') {
      this.graph_offset = this.calcGraphOffset(this.graph_element.nativeElement);
    }
  }
  
  ngOnDestroy() {
    this.subscriptions.forEach(subscription => {
      if (subscription instanceof Subscription) {
        subscription.unsubscribe();
      }
    });
  }
  
  private getDivContents() {
    this.subscriptions.push(this.helper.getDivHelpContents(this.properties, 'monitor', this.router.url).subscribe(contents => {
      this.divContents = contents;
    }));
  }
  
  public observeGraphElement() {
    let resizeObs = new ResizeObserver(entries => {
      entries.forEach(entry => {
        setTimeout(() => {
          this.graph_offset = this.calcGraphOffset(entry.target);
          this.cdr.detectChanges();
        });
      })
    });
    this.subscriptions.push(resizeObs);
    resizeObs.observe(this.graph_element.nativeElement);
  }
  
  calcGraphOffset(element) {
    this.graph_height = element.offsetHeight;
    return window.innerHeight-this.graph_height;
  }
  
  metaTags(title, description) {
    const url = properties.domain + properties.baseLink + this.router.url;
    this.seoService.createLinkForCanonicalURL(url, false);
    this.meta.updateTag({content: url}, "property='og:url'");
    this.meta.updateTag({content: description}, "name='description'");
    this.meta.updateTag({content: description}, "property='og:description'");
    this.meta.updateTag({content: title}, "property='og:title'");
    this.title.setTitle(title);
  }
}