split methodology into 2 pages (terminology & see-how-it-works)

This commit is contained in:
Alex Martzios 2022-08-29 15:23:33 +03:00
parent de78e628bf
commit c27227923e
4 changed files with 104 additions and 36 deletions

View File

@ -1,25 +1,36 @@
import {NgModule} from "@angular/core";
import {CommonModule} from "@angular/common";
import {MethodologyComponent} from "./methodology.component";
import {TerminologyComponent} from "./terminology.component";
import {SeeHowItWorksComponent} from "./see-how-it-works.component";
import {RouterModule} from "@angular/router";
import {PreviousRouteRecorder} from "../../utils/piwik/previousRouteRecorder.guard";
import {PageContentModule} from "../../dashboard/sharedComponents/page-content/page-content.module";
import {HowModule} from "../../monitor/how/how.module";
import {HowModule} from "../how/how.module";
import {TabsModule} from "../../utils/tabs/tabs.module";
import {IconsModule} from "../../utils/icons/icons.module";
import {IconsService} from "../../utils/icons/icons.service";
import {graph} from "../../utils/icons/icons";
@NgModule({
declarations: [MethodologyComponent],
declarations: [TerminologyComponent, SeeHowItWorksComponent],
imports: [CommonModule, RouterModule.forChild([
{
path: '',
component: MethodologyComponent,
redirectTo: 'terminology',
canDeactivate: [PreviousRouteRecorder]
},
{
path: 'terminology',
component: TerminologyComponent,
canDeactivate: [PreviousRouteRecorder]
},
{
path: 'how',
component: SeeHowItWorksComponent,
canDeactivate: [PreviousRouteRecorder]
},
]), PageContentModule, HowModule, TabsModule, IconsModule],
exports: [MethodologyComponent]
exports: [TerminologyComponent, SeeHowItWorksComponent]
})
export class MethodologyModule {
constructor(private iconsService: IconsService) {

View File

@ -0,0 +1,83 @@
import {Component, OnDestroy, OnInit} from "@angular/core";
import {Subscription} from "rxjs";
import {Meta, Title} from "@angular/platform-browser";
import {ActivatedRoute, Router} from "@angular/router";
import {Stakeholder} from "../entities/stakeholder";
import {OpenaireEntities} from "../../utils/properties/searchFields";
import {StakeholderService} from "../services/stakeholder.service";
import {SEOService} from "../../sharedComponents/SEO/SEO.service";
import {properties} from "../../../../environments/environment";
@Component({
selector: 'see-how-it-works',
template: `
<div class="uk-section">
<div id="how" class="uk-container uk-container-large">
<h2 class="uk-h1">
Inclusion, transparency, <br> quality, state of the art <br> technology<span class="uk-text-primary">.</span>
</h2>
<div class="uk-margin-large-top uk-card uk-card-default uk-card-body">
<p class="uk-margin-top">Our methodological approach is based on the following operational quality criteria:</p>
<ul>
<li><span class="uk-text-bold">Openness and transparency:</span> Methodological assumptions are openly and clearly presented.</li>
<li><span class="uk-text-bold">Coverage and accuracy:</span> As detailed in <a href="https://graph.openaire.eu/" target="_blank">graph.openaire.eu</a>
multiple data sources are ingested in the OpenAIRE research graph for coverage to the fullest extent possible, in order to provide meaningful indicators.</li>
<li><span class="uk-text-bold">Clarity and replicability:</span> We describe our construction methodology in detail, so that
it can be verified and used by the scholarly communication community to create ongoing updates to our proposed statistics and indicators.</li>
<li><span class="uk-text-bold">Readiness and timeliness:</span> The methodology is built around well-established open databases
and already tested knowledge extraction technologies - natural language processing (NLP)/machine-learning (ML) - using operational
workflows in OpenAIRE to warrant timely results.</li>
<li><span class="uk-text-bold">Trust and robustness:</span> Our methodology also strives to be reliable, robust, and aligned
to other assessment methods so that it can be operationalized, used and reused, in conjunction with other assessment methods.</li>
</ul>
<div class="uk-text-small uk-text-italic uk-text-right">The text above is modified from <a href="https://op.europa.eu/en/publication-detail/-/publication/56cc104f-0ebb-11ec-b771-01aa75ed71a1"
target="_blank">this report</a> (DOI: 10.2777/268348).</div>
</div>
<div class="uk-margin-large-top uk-padding-small">
<h3 class="uk-h4">Step-by-step</h3>
<how></how>
</div>
</div>
</div>
`
})
export class SeeHowItWorksComponent implements OnInit, OnDestroy {
public stakeholder: Stakeholder;
public tab: 'entities' | 'attributes' = 'entities';
private subscriptions: any[] = [];
public openaireEntities = OpenaireEntities;
constructor(private stakeholderService: StakeholderService,
private seoService: SEOService,
private _meta: Meta,
private _router: Router,
private route: ActivatedRoute,
private _title: Title) {
}
ngOnInit() {
this.subscriptions.push(this.stakeholderService.getStakeholderAsObservable().subscribe(stakeholder => {
this.stakeholder = stakeholder;
if (this.stakeholder) {
/* Metadata */
const url = properties.domain + properties.baseLink + this._router.url;
this.seoService.createLinkForCanonicalURL(url, false);
this._meta.updateTag({content: url}, "property='og:url'");
const description = "Methodology | " + this.stakeholder.name;
const title = "Methodology | " + this.stakeholder.name;
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);
}
}));
}
ngOnDestroy() {
this.subscriptions.forEach(subscription => {
if (subscription instanceof Subscription) {
subscription.unsubscribe();
}
});
}
}

View File

@ -9,7 +9,7 @@ import {SEOService} from "../../sharedComponents/SEO/SEO.service";
import {properties} from "../../../../environments/environment";
@Component({
selector: 'methodology',
selector: 'terminology',
template: `
<div class="uk-section">
<div class="uk-container uk-container-large">
@ -394,36 +394,10 @@ import {properties} from "../../../../environments/environment";
<span class="uk-text-meta">.</span>
</div>
</div>
<div id="how" class="uk-container uk-container-large uk-section uk-section-small uk-margin-large-top">
<h2 class="uk-h1">
Inclusion, transparency, <br> quality, state of the art <br> technology<span class="uk-text-primary">.</span>
</h2>
<div class="uk-margin-large-top uk-card uk-card-default uk-card-body">
<p class="uk-margin-top">Our methodological approach is based on the following operational quality criteria:</p>
<ul>
<li><span class="uk-text-bold">Openness and transparency:</span> Methodological assumptions are openly and clearly presented.</li>
<li><span class="uk-text-bold">Coverage and accuracy:</span> As detailed in <a href="https://graph.openaire.eu/" target="_blank">graph.openaire.eu</a>
multiple data sources are ingested in the OpenAIRE research graph for coverage to the fullest extent possible, in order to provide meaningful indicators.</li>
<li><span class="uk-text-bold">Clarity and replicability:</span> We describe our construction methodology in detail, so that
it can be verified and used by the scholarly communication community to create ongoing updates to our proposed statistics and indicators.</li>
<li><span class="uk-text-bold">Readiness and timeliness:</span> The methodology is built around well-established open databases
and already tested knowledge extraction technologies - natural language processing (NLP)/machine-learning (ML) - using operational
workflows in OpenAIRE to warrant timely results.</li>
<li><span class="uk-text-bold">Trust and robustness:</span> Our methodology also strives to be reliable, robust, and aligned
to other assessment methods so that it can be operationalized, used and reused, in conjunction with other assessment methods.</li>
</ul>
<div class="uk-text-small uk-text-italic uk-text-right">The text above is modified from <a href="https://op.europa.eu/en/publication-detail/-/publication/56cc104f-0ebb-11ec-b771-01aa75ed71a1"
target="_blank">this report</a> (DOI: 10.2777/268348).</div>
</div>
<div class="uk-margin-large-top uk-padding-small">
<h3 class="uk-h4">Step-by-step</h3>
<how></how>
</div>
</div>
</div>
`
})
export class MethodologyComponent implements OnInit, OnDestroy {
export class TerminologyComponent implements OnInit, OnDestroy {
public stakeholder: Stakeholder;
public tab: 'entities' | 'attributes' = 'entities';
private subscriptions: any[] = [];

View File

@ -32,10 +32,10 @@ export class ResourcesService {
null, {}, null, null, null, null, '_self'),
ResourcesService.setLink(new MenuItem("methodology", "Terminology and construction",
"", "", false, [], null, {}, null, null, null, null, '_self'),
prefix + "/methodology", portal),
prefix + "/methodology/terminology", portal),
ResourcesService.setLink(new MenuItem("methodology", "See how it works",
"", "", false, [], null, {}, null, "how", null, null, '_self'),
prefix + "/methodology", portal)];
"", "", false, [], null, {}, null, null, null, null, '_self'),
prefix + "/methodology/how", portal)];
items.push(new MenuItem("indicators-page", "Indicators",
"", "", false, [], null, {}));
items.push(ResourcesService.setLink(new MenuItem("indicator-themes", "Indicator Themes",