openaire-library/fos/fos.component.html

254 lines
14 KiB
HTML
Raw Normal View History

<schema2jsonld *ngIf="url" [URL]="url" [name]="pageTitle" type="other" [description]="pageDescription"></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-text-large" style="color: #EEB204">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>
[Library & Explore | explore-redesign]: Renamed "OpenAIRE Research Graph" to "OpenAIRE Graph" | Fixed duplicate queries in search all | Updated paper in FoS page | Improvements in sticky tabs (search all & landing). 1. Deleted assers/explore-assets/home/graph.svg - Replaced by assets/common-assets/common/graph-nodes.svg. 2. home.component.html: a. Updated graph image. b. Added in <div search-input>: [searchInputClass]="'inner background'". c. Renamed "OpenAIRE Research Graph" to "OpenAIRE Graph". 3. claimResultSearchForm.component.html & searchDataprovidersToDeposit.component.ts: Added in <div search-input>: [searchInputClass]="'inner background'". 4. searchAll.component.html: a. Updated margins/paddings for sticky tabs. b. Renamed "OpenAIRE Research Graph" to "OpenAIRE Graph". 5. searchAll.component.ts: a. [Bug fix] In method ngOnInit(), moved loadAll() call inside check - avoid duplicate calls to search for each tab with count query. b. Renamed "OpenAIRE Research Graph" to "OpenAIRE Graph". 6. fos.component.html: a. Updated paper of SciNoBo - replaced the old one with the newest. b. Renamed "OpenAIRE Research Graph" to "OpenAIRE Graph". 7. fos.component.ts: Renamed "OpenAIRE Research Graph" to "OpenAIRE Graph". 8. resultLanding.component.html & project.component.html & organization.component.html & dataProvider.component.html: [Improvement] Updated check and class for <landing-header> when sticky - make it invisible, when not sticky - solved flickering and change of content position. 9. showTitle.component.ts: Added @Input() isSticky: boolean = false; and when sticky, show only 1 line of the title (class lines-1). 10. landing-header.component.ts: Show only title when sticky and pass isSticky to <showTitle>.
2023-05-15 16:28:33 +02:00
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 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>
[Library & Explore | explore-redesign]: Renamed "OpenAIRE Research Graph" to "OpenAIRE Graph" | Fixed duplicate queries in search all | Updated paper in FoS page | Improvements in sticky tabs (search all & landing). 1. Deleted assers/explore-assets/home/graph.svg - Replaced by assets/common-assets/common/graph-nodes.svg. 2. home.component.html: a. Updated graph image. b. Added in <div search-input>: [searchInputClass]="'inner background'". c. Renamed "OpenAIRE Research Graph" to "OpenAIRE Graph". 3. claimResultSearchForm.component.html & searchDataprovidersToDeposit.component.ts: Added in <div search-input>: [searchInputClass]="'inner background'". 4. searchAll.component.html: a. Updated margins/paddings for sticky tabs. b. Renamed "OpenAIRE Research Graph" to "OpenAIRE Graph". 5. searchAll.component.ts: a. [Bug fix] In method ngOnInit(), moved loadAll() call inside check - avoid duplicate calls to search for each tab with count query. b. Renamed "OpenAIRE Research Graph" to "OpenAIRE Graph". 6. fos.component.html: a. Updated paper of SciNoBo - replaced the old one with the newest. b. Renamed "OpenAIRE Research Graph" to "OpenAIRE Graph". 7. fos.component.ts: Renamed "OpenAIRE Research Graph" to "OpenAIRE Graph". 8. resultLanding.component.html & project.component.html & organization.component.html & dataProvider.component.html: [Improvement] Updated check and class for <landing-header> when sticky - make it invisible, when not sticky - solved flickering and change of content position. 9. showTitle.component.ts: Added @Input() isSticky: boolean = false; and when sticky, show only 1 line of the title (class lines-1). 10. landing-header.component.ts: Show only title when sticky and pass isSticky to <showTitle>.
2023-05-15 16:28:33 +02:00
Our work is based on the work from our partner Athena Research Center: SciNoBo : a novel system classifying scholarly communication in a dynamically constructed hierarchical Field-of-Science taxonomy - <a href="https://doi.org/10.3389/frma.2023.1149834" target="_blank">https://doi.org/10.3389/frma.2023.1149834</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/common-assets/fos/fos-hero-img.svg" loading="lazy" alt="FoS logo">
</div>
</div>
</div>
<div *ngIf="fos?.length" id="levels" 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-visible@m">
<div id="keyword_search" uk-sticky="offset: 50;" class="uk-sticky uk-background-default uk-padding uk-padding-remove-bottom uk-padding-remove-horizontal">
<div class="uk-flex uk-flex-right uk-margin-small-bottom">
<div search-input [searchControl]="keywordControl" [options]="fosOptions" iconPosition="left" placeholder="Write a key word to filter the content"
searchInputClass="border-bottom" class="uk-width-large"></div>
</div>
</div>
</div>
<ng-container>
<div class="uk-margin-top uk-padding-small">
<div id="parentContainer" class="uk-grid uk-grid-large" uk-grid>
<div class="uk-width-1-4@m uk-visible@m">
2023-08-22 16:08:46 +02:00
<div class="uk-sticky" uk-sticky="end: !#parentContainer; offset: 200;">
<ul *ngIf="!keyword" class="uk-tab uk-tab-left">
<li *ngFor="let item of fos; index as i" [class.uk-active]="activeSection === item.id"
class="uk-margin-small-bottom uk-text-capitalize">
<a (click)="selectedParentLevels=[]" routerLink="./" [fragment]="item.id">
<div>
{{item.id}}
<ng-container *ngIf="selectedParentLevels.length > 0 && selectedParentLevels[0].id==item.id">
<div class="uk-margin-left uk-margin-xsmall-top">
<span class="uk-flex uk-flex-middle">
<icon [flex]="true" ratio="1" name="subdirectory_arrow_right"></icon>
{{selectedParentLevels[1].id}}
</span>
<div class="uk-margin-left uk-margin-xsmall-top">
<span class="uk-flex uk-flex-middle">
<icon [flex]="true" ratio="1" name="subdirectory_arrow_right"></icon>
{{selectedParentLevels[2].label}}
</span>
</div>
</div>
</ng-container>
</div>
</a>
</li>
</ul>
<ul *ngIf="keyword?.length" class="uk-tab uk-tab-left">
<li *ngFor="let item of viewResults; index as i"
class="uk-margin-small-bottom uk-text-capitalize" [class.uk-active]="activeSection === item.id">
<a routerLink="./" [fragment]="item.id">{{item.id}}</a>
</li>
</ul>
</div>
</div>
<div class="uk-width-1-1 uk-hidden@m">
<div class="uk-sticky uk-blur-background" uk-sticky>
<div class="uk-flex uk-flex-center uk-margin-small-bottom">
<div search-input [searchControl]="keywordControl" [options]="fosOptions" iconPosition="left" placeholder="Write a key word to filter the content"
searchInputClass="border-bottom" class="uk-width-large"></div>
</div>
<div #tabs class="uk-slider uk-position-relative" uk-slider="finite: true">
<div class="uk-slider-container">
<ul *ngIf="!keyword" class="uk-tab uk-flex-nowrap uk-slider-items">
<li *ngFor="let item of fos; index as i" [class.uk-active]="activeSection === item.id && sliderInit"
class="uk-text-capitalize">
<a routerLink="./" [fragment]="item.id">{{item.id}}</a>
</li>
</ul>
<ul *ngIf="keyword?.length" class="uk-tab uk-flex-nowrap uk-slider-items">
<li *ngFor="let item of viewResults; index as i"
class="uk-text-capitalize" [class.uk-active]="activeSection === item.id && sliderInit">
<a routerLink="./" [fragment]="item.id">{{item.id}}</a>
</li>
</ul>
</div>
<a class="uk-position-center-left uk-blur-background" uk-slider-item="previous"><span uk-icon="chevron-left"></span></a>
<a class="uk-position-center-right uk-blur-background" uk-slider-item="next"><span uk-icon="chevron-right"></span></a>
</div>
</div>
</div>
<div class="uk-width-expand@m">
<div *ngIf="!keyword && selectedParentLevels.length > 0" [id]="selectedParentLevels[0].id+'||'+selectedParentLevels[1].code+'||'+selectedParentLevels[2].code">
<a (click)="backClicked();"
class="uk-button-link uk-flex uk-flex-middle uk-margin-bottom">
<icon name="arrow_back" visuallyHidden="back" flex="true" ratio="1"></icon>
<span class="uk-margin-small-left">Back</span>
</a>
<div>
<h2 class="uk-h4 uk-text-capitalize uk-margin-remove">
<a [routerLink]="properties.searchLinkToResults" [queryParams]="buildFosQueryParam(selectedParentLevels[2])"
class="uk-link-text">
{{selectedParentLevels[2].label}}
</a>
</h2>
<div class="uk-grid uk-child-width-1-3 uk-margin-large-top uk-margin-xlarge-bottom" uk-grid="masonry: false">
<div *ngFor="let level4 of selectedParentLevels[2].children">
<div class="uk-text-capitalize">
<h3 class="uk-h6 uk-margin-small-bottom">
<a [routerLink]="properties.searchLinkToResults" [queryParams]="buildFosQueryParam(level4)"
class="uk-link-text">
{{level4.label}}
</a>
</h3>
</div>
</div>
</div>
</div>
</div>
<ng-container *ngIf="!keyword && selectedParentLevels.length == 0">
<div [id]="item.id" *ngFor="let item of fos; index as i">
<div class="uk-text-capitalize">
<h2 class="uk-h4 uk-margin-remove">
<a [routerLink]="properties.searchLinkToResults" [queryParams]="buildFosQueryParam(item)"
class="uk-link-text">
{{item.id}}
</a>
</h2>
</div>
<div class="uk-grid uk-child-width-1-3 uk-margin-large-top uk-margin-xlarge-bottom" uk-grid="masonry: false">
<div *ngFor="let child of item.children">
<div class="uk-text-capitalize">
<h3 class="uk-h6 uk-margin-small-bottom">
<a [routerLink]="properties.searchLinkToResults" [queryParams]="buildFosQueryParam(child)"
class="uk-link-text">
{{child.id}}
</a>
</h3>
<!-- class="parent uk-transition-toggle" tabindex="0"-->
<div *ngFor="let subChild of child.children; let i=index" style="margin-bottom: 7px;"
class="uk-flex uk-flex-middle uk-flex-between uk-transition-toggle" tabindex="0">
<!-- <span class="uk-flex uk-flex-between">-->
<a [routerLink]="properties.searchLinkToResults" [queryParams]="buildFosQueryParam(subChild)"
class="uk-link-text uk-width-expand">
{{searchFieldsHelper.getFosParameter() == 'foslabel' ? subChild.label : subChild.id}}
</a>
<span *ngIf="properties.environment == 'development' && subChild.children?.length > 0" (click)="moreClicked(item, child, subChild)"
class="uk-transition-fade uk-width-auto uk-flex uk-flex-middle uk-margin-left label4 uk-text-small uk-text-meta">
<!-- <a class="view-more-less-link uk-link-text uk-text-lowercase">-->
<!-- +{{subChild.children.length}} more-->
<!--&lt;!&ndash; <icon [flex]="true" ratio="1" name="chevron_right"></icon>&ndash;&gt;-->
<!-- </a>-->
<icon [flex]="true" ratio="0.7" name="subdirectory_arrow_right"></icon>
<a class="uk-link-text uk-text-lowercase">
more
</a>
</span>
<!-- <div *ngIf="subChild.children?.length > 0" (click)="selectedParentLevels=[item, child, subChild]"-->
<!-- class="uk-flex uk-flex-middle uk-margin-left label4 uk-text-small uk-text-meta">-->
<!-- <a class="uk-link-text">{{subChild.children.length}} Subcategories</a>-->
<!-- <icon [flex]="true" ratio="1" name="chevron_right"></icon>-->
<!-- </div>-->
<!-- <span *ngIf="subChild?.children?.length > 0" (click)="fosAccordions.set(subChild.id, !fosAccordions.get(subChild.id))" class="uk-accordion-title uk-padding-remove"></span>-->
<!-- </span>-->
<!-- <div *ngIf="fosAccordions.get(subChild.id)" class="uk-margin-left">-->
<!-- <div *ngFor="let level4 of subChild.children" style="margin-bottom: 7px;">-->
<!-- <a [routerLink]="properties.searchLinkToResults" [queryParams]="buildFosQueryParam(level4)"-->
<!-- class="label4 uk-text-small uk-text-meta">-->
<!-- {{searchFieldsHelper.getFosParameter() == 'foslabel' ? level4.label : level4.id}}-->
<!-- </a>-->
<!-- </div>-->
<!-- </div>-->
<!-- uk-transition-slide-top-->
<!-- <div *ngIf="subChild.children?.length > 0" class="uk-transition-slide-top">-->
<!-- <div class="child">-->
<!-- <a class="uk-link uk-margin-left">{{subChild.children.length}} Subcategories ></a>-->
<!-- </div>-->
<!-- </div>-->
</div>
</div>
</div>
</div>
</div>
</ng-container>
<ng-container *ngIf="keyword?.length">
<div [id]="item.id" *ngFor="let item of viewResults; index as i">
<div
class="uk-margin-large-bottom uk-padding uk-padding-remove-top uk-padding-remove-horizontal uk-text-capitalize" [class.custom-bottom-border]="i < viewResults.length - 1">
<h2 class="uk-h4 uk-margin-remove">
<a [routerLink]="properties.searchLinkToResults" [queryParams]="buildFosQueryParam(item)"
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.searchLinkToResults" [queryParams]="buildFosQueryParam(subItem)"
class="uk-link-text" [innerHTML]="highlightKeyword(subItem.id)">
</a>
</h3>
<div *ngFor="let subSubItem of subItem.children" style="margin-bottom: 7px;">
<a [routerLink]="properties.searchLinkToResults" [queryParams]="buildFosQueryParam(subSubItem)"
class="uk-link-text" [innerHTML]="highlightKeyword(searchFieldsHelper.getFosParameter() == 'foslabel' ? subSubItem.label : subSubItem.id)">
</a>
<ng-container *ngIf="properties.environment == 'development'">
<div *ngFor="let level4 of subSubItem?.children" class="uk-margin-left">
<a [routerLink]="properties.searchLinkToResults" [queryParams]="buildFosQueryParam(level4)"
class="uk-text-small uk-text-meta uk-margin-xsmall-bottom" [innerHTML]="highlightKeyword(searchFieldsHelper.getFosParameter() == 'foslabel' ? level4.label : level4.id)">
</a>
</div>
</ng-container>
</div>
</div>
</div>
</div>
</div>
</ng-container>
</div>
</div>
<ng-container *ngIf="keyword && viewResults?.length == 0">
<div class="uk-padding-large uk-text-center">
<h2 class="uk-h3">No results were found.</h2>
</div>
</ng-container>
</div>
</ng-container>
</div>