explore-services/explore/src/app/fos/fos.component.html

146 lines
6.7 KiB
HTML

<!-- <schema2jsonld *ngIf="url" [URL]="url" [name]="pageTitle" type="other" [description]="description"></schema2jsonld> -->
<div class="uk-container uk-container-large uk-section uk-section-small uk-padding-remove-bottom">
<div class="uk-padding-small uk-padding-remove-horizontal">
<breadcrumbs [breadcrumbs]="breadcrumbs"></breadcrumbs>
</div>
</div>
<div class="uk-container uk-container-large uk-section" uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-slide-bottom-medium; delay: 200">
<div class="uk-grid uk-grid-large uk-grid-stack uk-padding-small" uk-grid>
<div class="uk-width-3-5@m uk-width-1-1@s uk-flex uk-flex-column uk-flex-center">
<span class="uk-align-left uk-margin-remove-bottom">
<span uk-scrollspy-class class="uk-badge beta">Beta</span>
</span>
<div style="max-width: 600px;">
<h1 uk-scrollspy-class class="uk-h1 uk-margin-remove-top">
<span>Fields of Science <span class="uk-text-primary">.</span></span>
</h1>
<div uk-scrollspy-class>
We have integrated a Field-of-Science (FoS) taxonomy into our dataset to organize and discover research more effectively. Using the full capabilities of the OpenAIRE Research Graph (full-texts, citations, references, venues) we apply AI and bring forward any multidisciplinarity potential.
</div>
<div class="uk-text-meta uk-margin-top" uk-scrollspy-class>
Our work is based on the work from our partner Athena Research Center: SciNoBo : A Hierarchical Multi-Label Classifier of Scientific Publications - <a href="https://arxiv.org/abs/2204.00880" target="_blank">https://arxiv.org/abs/2204.00880</a>
</div>
<!-- TODO: We need a page for the button link -->
<!-- <div>
<a class="uk-display-inline-block uk-text-uppercase uk-button uk-button-text uk-margin-top" uk-scrollspy-class
routerLinkActive="router-link-active" routerLink="/">
<span class="uk-flex uk-flex-middle">
<span>Learn More</span>
</span>
</a>
</div> -->
</div>
</div>
<div class="uk-width-2-5@m uk-width-1-1@s uk-text-center" uk-scrollspy-class>
<img src="../../assets/explore-assets/fos-hero-img.svg" loading="lazy">
</div>
</div>
</div>
<div class="uk-container uk-container-large uk-section" uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-slide-bottom-medium; delay: 200">
<div class="uk-grid uk-flex uk-flex-middle uk-flex-center uk-padding-small" uk-grid>
<div class="uk-margin-large-bottom">
<div search-input [searchControl]="keywordControl" [options]="fosOptions" placeholder="Search" (searchEmitter)="onSubmit()"
class="uk-width-large"></div>
</div>
</div>
<ng-container *ngIf="keyword && keyword.length">
<div class="uk-padding-small">
<div class="uk-margin-small-bottom">Search results for:</div>
<span class="uk-display-inline-block">
<span class="uk-label uk-label-primary uk-flex uk-flex-middle">
<span class="uk-margin-small-right uk-width-expand uk-text-truncate">{{keyword}}</span>
<!-- <icon class="uk-text-muted" name="close" flex="true" ratio="0.7"></icon> -->
<button class="uk-close uk-icon" [attr.uk-tooltip]="'Remove'" (click)="clearKeyword()">
<icon name="close" flex="true" ratio="0.7"></icon>
</button>
</span>
<!-- <a [attr.uk-tooltip]="'Remove'" (click)="clearKeyword()" class="uk-link-reset">
<span class="uk-label uk-label-primary uk-flex uk-flex-middle">
<span class="uk-margin-small-right uk-width-expand">{{keyword}}</span>
<button class="uk-close uk-icon">
<icon name="close" flex="true" ratio="0.7"></icon>
</button>
</span>
</a> -->
</span>
</div>
</ng-container>
<ng-container *ngIf="!keyword">
<div class="uk-margin-top uk-padding-small">
<div class="uk-grid uk-grid-large" uk-grid>
<div class="uk-width-1-4">
<ul class="uk-nav uk-nav-default">
<li *ngFor="let item of fos; index as i"
class="uk-margin-small-bottom uk-text-capitalize"
[class]="index == i ? 'uk-active':''"
(click)="changeDisplayedFos(i)">
<a class="uk-padding-remove">{{item.id}}</a>
</li>
</ul>
</div>
<div *ngIf="fos[index]" class="uk-width-3-4">
<div class="uk-text-capitalize">
<h2 class="uk-h4 uk-margin-remove">
<a [routerLink]="properties.searchLinkToAdvancedResults" [queryParams]="{f0: 'fos', fv0: fos[index].id}"
class="uk-link-text">
{{fos[index].id}}
</a>
</h2>
</div>
<div class="uk-grid uk-child-width-1-3 uk-margin-large-top uk-margin-medium-bottom" uk-grid="masonry: false">
<div *ngFor="let child of fos[index].children">
<div class="whole-child uk-text-capitalize">
<h3 class="uk-h6 uk-margin-small-bottom">
<a [routerLink]="properties.searchLinkToAdvancedResults" [queryParams]="{f0: 'fos', fv0: child.id}"
class="uk-link-text">
{{child.id}}
</a>
</h3>
<div *ngFor="let subChild of child.children" style="margin-bottom: 5px;">
<a [routerLink]="properties.searchLinkToAdvancedResults" [queryParams]="{f0: 'fos', fv0: subChild.id}"
class="uk-link-text">
{{subChild.id}}
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</ng-container>
<ng-container *ngIf="keyword && keyword.length">
<div class="uk-margin-medium-top uk-padding-small">
<ng-container *ngFor="let item of viewResults;">
<div
class="uk-margin-large-bottom uk-padding uk-padding-remove-top uk-padding-remove-horizontal uk-text-capitalize custom-bottom-border">
<h2 class="uk-h4 uk-margin-remove">
<a [routerLink]="properties.searchLinkToAdvancedResults" [queryParams]="{f0: 'fos', fv0: item.id}"
class="uk-link-text" [innerHTML]="highlightKeyword(item.id)">
</a>
</h2>
<div class="uk-grid uk-child-width-1-3 uk-margin-large-top uk-margin-medium-bottom" uk-grid="masonry: false">
<div *ngFor="let subItem of item.children">
<h3 class="uk-h6 uk-margin-small-bottom">
<a [routerLink]="properties.searchLinkToAdvancedResults" [queryParams]="{f0: 'fos', fv0: subItem.id}"
class="uk-link-text" [innerHTML]="highlightKeyword(subItem.id)">
</a>
</h3>
<div *ngFor="let subSubItem of subItem.children" style="margin-bottom: 5px;">
<a [routerLink]="properties.searchLinkToAdvancedResults" [queryParams]="{f0: 'fos', fv0: subSubItem.id}"
class="uk-link-text" [innerHTML]="highlightKeyword(subSubItem.id)">
</a>
</div>
</div>
</div>
</div>
</ng-container>
<ng-container *ngIf="!viewResults?.length">
<div class="uk-padding uk-text-center">
<h2 class="uk-h3">No results were found.</h2>
</div>
</ng-container>
</div>
</ng-container>
</div>