MaDgIK
/
openaire-library
13
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

progress in result landing page

This commit is contained in:
Alex Martzios 2023-01-13 15:57:26 +02:00
parent c1fa0889ee
commit 95de86e767
11 changed files with 219 additions and 111 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

89
landingPages/landing-utils/availableOn.component.ts
View File

@ -1,53 +1,60 @@
import {Component, ElementRef, EventEmitter, Input, Output, ViewChild} from '@angular/core'; import {Component, ElementRef, EventEmitter, Input, Output, ViewChild} from '@angular/core';
import {HostedByCollectedFrom} from "../../utils/result-preview/result-preview"; import {HostedByCollectedFrom} from "../../utils/result-preview/result-preview";
import {properties} from "../../../../environments/environment"; import {properties} from "../../../../environments/environment";
import {StringUtils} from '../../utils/string-utils.class';
declare var UIkit; declare var UIkit;
@Component({ @Component({
selector: 'availableOn', selector: 'availableOn',
template: ` template: `
<ng-container *ngIf="availableOn"> <ng-container *ngIf="availableOn">
<a class="uk-flex uk-flex-middle uk-flex-center uk-button-link uk-text-bolder"> <div class="uk-flex uk-flex-middle uk-flex-center">
<span [class]="'uk-margin-xsmall-right ' + (availableOn[0].accessRightIcon == 'lock_open' ? 'uk-text-success' : 'uk-text-meta')" <a *ngIf="availableOn[0].downloadUrl" [href]="availableOn[0].downloadUrl" target="_blank"
uk-tooltip [title]="availableOn[0].accessRight ? availableOn[0].accessRight : 'Not available'"> class="uk-flex uk-flex-middle uk-flex-center uk-button-link uk-text-bolder custom-external">
<icon [name]="availableOn[0].accessRightIcon" flex="true" type="outlined"></icon> <span [class]="'uk-margin-xsmall-right ' + (availableOn[0].accessRightIcon == 'lock_open' ? 'uk-text-success' : 'uk-text-meta')"
</span> uk-tooltip [title]="availableOn[0].accessRight ? availableOn[0].accessRight : 'Not available'">
<span>{{availableOn[0].downloadNames.join("; ")}}</span> <icon [name]="availableOn[0].accessRightIcon" flex="true" type="outlined"></icon>
<icon class="uk-margin-xsmall-left" [flex]="true" [name]="'expand_' + (isOpen?'less':'more')"></icon>
</a>
<div #dropElement uk-drop="mode: click; pos: bottom-left;" class="download-drop uk-card uk-card-default uk-padding-small uk-padding-remove-horizontal uk-text-small">
<div *ngFor="let instance of availableOn let i=index" class="download-drop-item uk-flex uk-flex-top">
<span [class]="'uk-margin-small-right ' + (instance.accessRightIcon == 'lock_open' ? 'uk-text-success' : 'uk-text-meta')"
uk-tooltip [title]="instance.accessRight ? instance.accessRight : 'Not available'">
<icon [name]="instance.accessRightIcon" flex="true" type="outlined"></icon>
</span> </span>
<div class="uk-width-expand uk-padding-small uk-padding-remove-left uk-padding-remove-vertical"> <span>{{sliceString(availableOn[0].downloadNames.join("; "), 20)}}</span>
<span class="uk-text-emphasis"> </a>
<a *ngIf="instance.downloadUrl" [href]="instance.downloadUrl" target="_blank"
class="title uk-link-text uk-text-bold custom-external uk-display-inline-block"> <a class="uk-flex uk-flex-middle uk-flex-center uk-button-link uk-text-bolder">
{{instance.downloadNames.join("; ")}} <icon [flex]="true" [name]="'expand_' + (isOpen?'less':'more')"></icon>
</a> </a>
<div #dropElement uk-drop="mode: click; pos: bottom-left;" class="download-drop uk-card uk-card-default uk-padding-small uk-padding-remove-horizontal uk-text-small">
<div *ngFor="let instance of availableOn let i=index" class="download-drop-item uk-flex uk-flex-top">
<span [class]="'uk-margin-small-right ' + (instance.accessRightIcon == 'lock_open' ? 'uk-text-success' : 'uk-text-meta')"
uk-tooltip [title]="instance.accessRight ? instance.accessRight : 'Not available'">
<icon [name]="instance.accessRightIcon" flex="true" type="outlined"></icon>
</span> </span>
<div *ngIf="instance.types?.length > 0 || instance.years?.length > 0" class="uk-text-meta"> <div class="uk-width-expand uk-padding-small uk-padding-remove-left uk-padding-remove-vertical">
<span *ngIf="instance.types?.length > 0" class="uk-text-capitalize">{{instance.types.join(" . ")}}</span> <span class="uk-text-emphasis">
<span *ngIf="instance.types?.length > 0 && instance.years?.length > 0"> . </span> <a *ngIf="instance.downloadUrl" [href]="instance.downloadUrl" target="_blank"
<span *ngIf="instance.years?.length > 0">{{instance.years.join(" . ")}}</span> class="title uk-link-text uk-text-bold custom-external uk-display-inline-block">
</div> {{instance.downloadNames.join("; ")}}
<div *ngIf="instance.license" class="uk-text-meta uk-text-truncate" uk-tooltip [title]="instance.license"> </a>
License: </span>
<a *ngIf="isUrl(instance.license); else elseBlock" <div *ngIf="instance.types?.length > 0 || instance.years?.length > 0" class="uk-text-meta">
[href]="instance.license" target="_blank" class="custom-external uk-link-text"> <span *ngIf="instance.types?.length > 0" class="uk-text-capitalize">{{instance.types.join(" . ")}}</span>
{{instance.license}} <span *ngIf="instance.types?.length > 0 && instance.years?.length > 0"> . </span>
</a> <span *ngIf="instance.years?.length > 0">{{instance.years.join(" . ")}}</span>
<ng-template #elseBlock> {{instance.license}}</ng-template> </div>
</div> <div *ngIf="instance.license" class="uk-text-meta uk-text-truncate" uk-tooltip [title]="instance.license">
<div *ngIf="instance.collectedNamesAndIds?.size > 0" class="uk-text-meta"> License:
<span>Providers: </span> <a *ngIf="isUrl(instance.license); else elseBlock"
<a *ngFor="let collectedName of getKeys(instance.collectedNamesAndIds); let i=index" [routerLink]="dataProviderUrl" [href]="instance.license" target="_blank" class="custom-external uk-link-text">
[queryParams]="{datasourceId: instance.collectedNamesAndIds.get(collectedName)}" class="uk-link-text"> {{instance.license}}
{{collectedName}}<ng-container *ngIf="(i !== (instance.collectedNamesAndIds.size - 1))">; </ng-container> </a>
</a> <ng-template #elseBlock> {{instance.license}}</ng-template>
</div>
<div *ngIf="instance.collectedNamesAndIds?.size > 0" class="uk-text-meta">
<span>Providers: </span>
<a *ngFor="let collectedName of getKeys(instance.collectedNamesAndIds); let i=index" [routerLink]="dataProviderUrl"
[queryParams]="{datasourceId: instance.collectedNamesAndIds.get(collectedName)}" class="uk-link-text">
{{collectedName}}<ng-container *ngIf="(i !== (instance.collectedNamesAndIds.size - 1))">; </ng-container>
</a>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -179,4 +186,8 @@ export class AvailableOnComponent {
get isOpen() { get isOpen() {
return (typeof document !== 'undefined') && this.dropElement && UIkit.drop(this.dropElement.nativeElement).isActive(); return (typeof document !== 'undefined') && this.dropElement && UIkit.drop(this.dropElement.nativeElement).isActive();
} }
public sliceString(str: string, size: number) {
return StringUtils.sliceString(str, size)
}
} }

4
landingPages/landing-utils/fos.component.ts
View File

@ -12,11 +12,11 @@ import {StringUtils} from "../../utils/string-utils.class";
<icon class="uk-margin-small-right" name="arrow_back" flex="true" ratio="1.2"></icon> <icon class="uk-margin-small-right" name="arrow_back" flex="true" ratio="1.2"></icon>
<span class="uk-text-nowrap">{{title}}</span> <span class="uk-text-nowrap">{{title}}</span>
</span> </span>
<span *ngIf="!viewAll" class="uk-text-light-grey uk-text-nowrap uk-margin-small-right">{{title}}</span> <span *ngIf="!viewAll" class="uk-text-emphasis uk-text-bolder uk-text-nowrap uk-margin-small-right">{{title}}</span>
<!-- <a *ngIf="viewAll && lessBtn" (click)="viewAll = !viewAll; lessBtn=false;">View less</a>--> <!-- <a *ngIf="viewAll && lessBtn" (click)="viewAll = !viewAll; lessBtn=false;">View less</a>-->
<a *ngIf="subjects && subjects.length > threshold && !viewAll" <a *ngIf="subjects && subjects.length > threshold && !viewAll"
(click)="viewAllClick();" class="view-more-less-link uk-text-truncate" uk-tooltip="View all & feedback"> (click)="viewAllClick();" class="view-more-less-link uk-text-truncate" uk-tooltip="View all & feedback">
<span class="">View all & feedback</span> <span class="">View all & suggest</span>
</a> </a>
<a *ngIf="(subjects && subjects.length <= threshold || viewAll)" class="uk-link uk-text-truncate" <a *ngIf="(subjects && subjects.length <= threshold || viewAll)" class="uk-link uk-text-truncate"
(click)="feedbackClick();">Feedback</a> (click)="feedbackClick();">Feedback</a>

2
landingPages/landing-utils/fundedBy.component.ts
View File

@ -11,7 +11,7 @@ import {HelperFunctions} from '../../utils/HelperFunctions.class';
<icon class="uk-margin-small-right" name="arrow_back" flex="true" ratio="1.2"></icon> <icon class="uk-margin-small-right" name="arrow_back" flex="true" ratio="1.2"></icon>
{{title}} {{title}}
</span> </span>
<span *ngIf="!viewAll || lessBtn" class="uk-text-light-grey">{{title}}</span> <span *ngIf="!viewAll || lessBtn" class="uk-text-emphasis uk-text-bolder">{{title}}</span>
<a *ngIf="viewAll && lessBtn" (click)="viewAll = !viewAll; lessBtn=false;" class="view-more-less-link">View less</a> <a *ngIf="viewAll && lessBtn" (click)="viewAll = !viewAll; lessBtn=false;" class="view-more-less-link">View less</a>
<a *ngIf="fundedByProjects && fundedByProjects.length > threshold && !viewAll" <a *ngIf="fundedByProjects && fundedByProjects.length > threshold && !viewAll"
(click)="viewAllClick();" class="view-more-less-link">View all</a> (click)="viewAllClick();" class="view-more-less-link">View all</a>

2
landingPages/landing-utils/relatedTo.component.ts
View File

@ -18,7 +18,7 @@ import {OpenaireEntities} from "../../utils/properties/searchFields";
<icon class="uk-margin-small-right" name="arrow_back" flex="true" ratio="1.2"></icon> <icon class="uk-margin-small-right" name="arrow_back" flex="true" ratio="1.2"></icon>
{{title}} {{title}}
</span> </span>
<span *ngIf="!viewAll || lessBtn" class="uk-text-light-grey">{{title}}</span> <span *ngIf="!viewAll || lessBtn" class="uk-text-emphasis uk-text-bolder">{{title}}</span>
<a *ngIf="viewAll && lessBtn" (click)="viewAll = !viewAll; lessBtn=false;" class="view-more-less-link">View less</a> <a *ngIf="viewAll && lessBtn" (click)="viewAll = !viewAll; lessBtn=false;" class="view-more-less-link">View less</a>
<a *ngIf="communities && communities.length > threshold && !viewAll" <a *ngIf="communities && communities.length > threshold && !viewAll"
(click)="viewAllClick();" class="view-more-less-link">View all</a> (click)="viewAllClick();" class="view-more-less-link">View all</a>

4
landingPages/landing-utils/sdg.component.ts
View File

@ -13,11 +13,11 @@ import {StringUtils} from "../../utils/string-utils.class";
<icon class="uk-margin-small-right" name="arrow_back" flex="true" ratio="1.2"></icon> <icon class="uk-margin-small-right" name="arrow_back" flex="true" ratio="1.2"></icon>
<span uk-tooltip="Sustainable Development Goals">{{title}}</span> <span uk-tooltip="Sustainable Development Goals">{{title}}</span>
</span> </span>
<span *ngIf="!viewAll" class="uk-text-light-grey uk-text-nowrap uk-margin-small-right" uk-tooltip="Sustainable Development Goals">{{title}}</span> <span *ngIf="!viewAll" class="uk-text-emphasis uk-text-bolder uk-text-nowrap uk-margin-small-right" uk-tooltip="Sustainable Development Goals">{{title}}</span>
<!-- <a *ngIf="viewAll && lessBtn" (click)="viewAll = !viewAll; lessBtn=false;">View less</a>--> <!-- <a *ngIf="viewAll && lessBtn" (click)="viewAll = !viewAll; lessBtn=false;">View less</a>-->
<a *ngIf="subjects && subjects.length > threshold && !viewAll" <a *ngIf="subjects && subjects.length > threshold && !viewAll"
(click)="viewAllClick();" class="view-more-less-link uk-text-truncate" uk-tooltip="View all & feedback"> (click)="viewAllClick();" class="view-more-less-link uk-text-truncate" uk-tooltip="View all & feedback">
View all & feedback</a> View all & suggest</a>
<a *ngIf="(subjects && subjects.length <= threshold || viewAll)" class="uk-link uk-text-truncate" <a *ngIf="(subjects && subjects.length <= threshold || viewAll)" class="uk-link uk-text-truncate"
(click)="feedbackClick();">Feedback</a> (click)="feedbackClick();">Feedback</a>
</div> </div>

181
landingPages/result/resultLanding.component.html
View File

@ -108,9 +108,9 @@
<div class="landing-action-bar uk-box-shadow-small uk-margin-bottom"> <div class="landing-action-bar uk-box-shadow-small uk-margin-bottom">
<div class="uk-flex uk-text-xsmall" style="grid-gap: 20px;"> <div class="uk-flex uk-text-xsmall" style="grid-gap: 20px;">
<!-- Download from --> <!-- Download from -->
<availableOn [availableOn]="resultLandingInfo.hostedBy_collectedFrom" (viewAllClicked)="viewAll=$event"></availableOn> <availableOn *ngIf="resultLandingInfo?.hostedBy_collectedFrom" [availableOn]="resultLandingInfo.hostedBy_collectedFrom" (viewAllClicked)="viewAll=$event"></availableOn>
<!-- Versions --> <!-- Versions -->
<a *ngIf="resultLandingInfo.deletedByInferenceIds" (click)="openDeletedByInference()" <a *ngIf="resultLandingInfo?.deletedByInferenceIds" (click)="openDeletedByInference()"
class="uk-flex uk-flex-middle uk-flex-center uk-button-link uk-text-bolder"> class="uk-flex uk-flex-middle uk-flex-center uk-button-link uk-text-bolder">
<icon flex="true" ratio="0.8" name="versions" visuallyHidden="versions"></icon> <icon flex="true" ratio="0.8" name="versions" visuallyHidden="versions"></icon>
<span class="uk-margin-xsmall-left"> <span class="uk-margin-xsmall-left">
@ -118,7 +118,7 @@
</span> </span>
</a> </a>
<!-- Divider --> <!-- Divider -->
<span *ngIf="resultLandingInfo.hostedBy_collectedFrom || resultLandingInfo.deletedByInferenceIds" class="landing-action-bar-divider"></span> <span *ngIf="resultLandingInfo?.hostedBy_collectedFrom || resultLandingInfo?.deletedByInferenceIds" class="landing-action-bar-divider"></span>
<!-- Actions --> <!-- Actions -->
<a *ngIf="isRouteAvailable('participate/direct-claim')" <a *ngIf="isRouteAvailable('participate/direct-claim')"
[queryParams]="routerHelper.createQueryParams(['id','type','linkTo'],[id,type,'project'])" [queryParams]="routerHelper.createQueryParams(['id','type','linkTo'],[id,type,'project'])"
@ -138,16 +138,15 @@
<span class="uk-margin-xsmall-left">Cite</span> <span class="uk-margin-xsmall-left">Cite</span>
</a> </a>
<ng-container *ngIf="properties.adminToolsPortalType == 'explore' || properties.adminToolsPortalType == 'community' || properties.adminToolsPortalType == 'aggregator'" > <ng-container *ngIf="properties.adminToolsPortalType == 'explore' || properties.adminToolsPortalType == 'community' || properties.adminToolsPortalType == 'aggregator'" >
<orcid-work [resultId]="id" [resultTitle]="resultLandingInfo.title" [resultLandingInfo]="resultLandingInfo" <orcid-work [resultId]="id" [resultTitle]="resultLandingInfo?.title" [resultLandingInfo]="resultLandingInfo"
[pids]="pidsArrayString" [pageType]="'landing'"> [pids]="pidsArrayString" [pageType]="'landing'">
</orcid-work> </orcid-work>
</ng-container> </ng-container>
<!-- TODO: EGI transfer data action --> <ng-container *ngIf=" properties.enableEoscDataTransfer && resultLandingInfo.resultType == 'dataset' &&
<a *ngIf=" properties.enableEoscDataTransfer && resultLandingInfo.resultType == 'dataset' &&
resultLandingInfo.identifiers && resultLandingInfo.identifiers.get('doi') && resultLandingInfo.identifiers && resultLandingInfo.identifiers.get('doi') &&
resultLandingInfo.identifiers.get('doi').join('').indexOf('zenodo.')!=-1"> resultLandingInfo.identifiers.get('doi').join('').indexOf('zenodo.')!=-1">
<egi-transfer-data [dois]="resultLandingInfo.identifiers.get('doi')" [isOpen]="egiTransferModalOpen"></egi-transfer-data> <egi-transfer-data [dois]="resultLandingInfo.identifiers.get('doi')" [isOpen]="egiTransferModalOpen"></egi-transfer-data>
</a> </ng-container>
</div> </div>
</div> </div>
</div> </div>
@ -294,7 +293,7 @@
customClass="portalTab"> customClass="portalTab">
</my-tab> </my-tab>
<!-- New metrics tab --> <!-- New metrics tab -->
<my-tab *ngIf="resultLandingInfo && (hasAltMetrics || hasMetrics)" <my-tab *ngIf="resultLandingInfo && resultLandingInfo.measure"
[tabTitle]="'Metrics'" [tabId]="'metrics'"> [tabTitle]="'Metrics'" [tabId]="'metrics'">
</my-tab> </my-tab>
</my-tabs> </my-tabs>
@ -453,26 +452,27 @@
</ul> </ul>
</div> </div>
</ng-container> </ng-container>
<ng-container *ngIf="resultLandingInfo && (hasAltMetrics || hasMetrics)"> <ng-container *ngIf="resultLandingInfo && resultLandingInfo.measure">
<div id="metrics" class="landing-section uk-padding uk-padding-remove-horizontal"> <div id="metrics" class="landing-section uk-padding uk-padding-remove-horizontal">
<ul class="uk-subnav uk-subnav-pill-alt uk-margin-large-bottom" uk-switcher> <ul class="uk-subnav uk-subnav-pill-alt uk-margin-remove" uk-switcher>
<li> <li>
<a href="#">Overview</a> <a href="#">Overview</a>
</li> </li>
<li> <li *ngIf="resultLandingInfo.measure.citations || resultLandingInfo.measure.popularity || resultLandingInfo.measure.influence || resultLandingInfo.measure.impulse">
<a href="#">Impact</a> <a href="#">Impact</a>
</li> </li>
<li> <li>
<a href="#">Social</a> <a href="#">Social</a>
</li> </li>
<li> <li *ngIf="resultLandingInfo.measure.downloads || resultLandingInfo.measure.views">
<a href="#">Usage</a> <a href="#">Usage</a>
</li> </li>
</ul> </ul>
<ul class="uk-switcher"> <ul class="uk-switcher uk-margin-large-top">
<!-- overview -->
<li> <li>
<div class="uk-flex uk-flex-wrap"> <div class="uk-flex uk-flex-wrap landing-metrics-overview">
<div id="bip"> <div id="bip" *ngIf="resultLandingInfo.measure.citations || resultLandingInfo.measure.popularity || resultLandingInfo.measure.influence || resultLandingInfo.measure.impulse">
<div class="uk-grid-divider" uk-grid> <div class="uk-grid-divider" uk-grid>
<div> <div>
<div class="uk-text-center uk-margin-small-bottom"> <div class="uk-text-center uk-margin-small-bottom">
@ -485,6 +485,9 @@
<table class="uk-table uk-table-small"> <table class="uk-table uk-table-small">
<tbody> <tbody>
<tr> <tr>
<td class="uk-padding-remove-top">
<icon name="cite" [flex]="true"></icon>
</td>
<td class="uk-padding-remove-top"> <td class="uk-padding-remove-top">
Citations Citations
</td> </td>
@ -493,6 +496,9 @@
</td> </td>
</tr> </tr>
<tr> <tr>
<td>
<icon name="fire" [flex]="true"></icon>
</td>
<td> <td>
Popularity Popularity
</td> </td>
@ -501,6 +507,9 @@
</td> </td>
</tr> </tr>
<tr> <tr>
<td>
<icon name="landmark" [flex]="true"></icon>
</td>
<td> <td>
Influence Influence
</td> </td>
@ -509,6 +518,9 @@
</td> </td>
</tr> </tr>
<tr> <tr>
<td class="uk-padding-remove-bottom">
<icon name="rocket" [flex]="true"></icon>
</td>
<td class="uk-padding-remove-bottom"> <td class="uk-padding-remove-bottom">
Impulse Impulse
</td> </td>
@ -522,7 +534,7 @@
</div> </div>
</div> </div>
<div id="altmetrics"> <div id="altmetrics">
<div class="uk-grid-divider uk-margin-medium-left" uk-grid> <div class="uk-grid-divider" uk-grid>
<div> <div>
<div class="uk-text-center uk-margin-small-bottom"> <div class="uk-text-center uk-margin-small-bottom">
<img src="assets/common-assets/" loading="lazy" alt="Altmetric"> <img src="assets/common-assets/" loading="lazy" alt="Altmetric">
@ -554,11 +566,11 @@
</div> </div>
</div> </div>
</div> </div>
<div id="usagecounts"> <div id="usagecounts" *ngIf="resultLandingInfo.measure.downloads || resultLandingInfo.measure.views">
<div class="uk-grid-divider uk-margin-medium-left" uk-grid> <div class="uk-grid-divider" uk-grid>
<div> <div>
<div class="uk-text-center uk-margin-small-bottom"> <div class="uk-text-center uk-margin-small-bottom">
<img src="assets/common-assets/logo-small-usage-counts.png" loading="lazy" alt="usage counts"> <img src="assets/common-assets/logo-small-usage-counts.png" loading="lazy" alt="OpenAIRE UsageCounts">
</div> </div>
<span class="uk-text-uppercase uk-text-xsmall">Usage by</span> <span class="uk-text-uppercase uk-text-xsmall">Usage by</span>
<span class="uk-display-block uk-text-bolder">UsageCounts</span> <span class="uk-display-block uk-text-bolder">UsageCounts</span>
@ -595,14 +607,87 @@
</div> </div>
</div> </div>
</li> </li>
<li> <!-- impact -->
2 <li *ngIf="resultLandingInfo.measure.citations || resultLandingInfo.measure.popularity || resultLandingInfo.measure.influence || resultLandingInfo.measure.impulse">
<div class="uk-flex uk-flex-center uk-flex-middle">
<div class="uk-card uk-card-default uk-padding-small">
<table class="uk-table uk-table-small uk-margin-remove">
<tbody>
<tr>
<td class="uk-padding-remove-top">
<icon name="cite" [flex]="true"></icon>
</td>
<td class="uk-padding-remove-top">
Citations
</td>
<td class="uk-padding-remove-top uk-text-uppercase uk-text-bolder">
{{resultLandingInfo.measure.citations}}
</td>
</tr>
<tr>
<td>
<icon name="fire" [flex]="true"></icon>
</td>
<td>
Popularity
</td>
<td class="uk-text-uppercase uk-text-bolder">
{{resultLandingInfo.measure.popularity}}
</td>
</tr>
<tr>
<td>
<icon name="landmark" [flex]="true"></icon>
</td>
<td>
Influence
</td>
<td class="uk-text-uppercase uk-text-bolder">
{{resultLandingInfo.measure.influence}}
</td>
</tr>
<tr>
<td class="uk-padding-remove-bottom">
<icon name="rocket" [flex]="true"></icon>
</td>
<td class="uk-padding-remove-bottom">
Impulse
</td>
<td class="uk-padding-remove-bottom uk-text-uppercase uk-text-bolder">
{{resultLandingInfo.measure.impulse}}
</td>
</tr>
</tbody>
</table>
</div>
<div class="uk-margin-large-left">
Chart
</div>
</div>
<div class="uk-text-center uk-margin-medium-top">
<span class="uk-text-meta">Powered by</span>
<img class="uk-margin-small-left uk-margin-small-right" src="assets/common-assets/logo-bip.png" loading="lazy" alt="BIP!">
<span class="uk-text-bolder">BIP!</span>
</div>
</li> </li>
<!-- social -->
<li> <li>
3 3
</li> </li>
<li> <!-- usage -->
4 <li *ngIf="resultLandingInfo.measure.downloads || resultLandingInfo.measure.views">
<div class="uk-flex uk-flex-center uk-flex-middle">
<div>
Stats
</div>
<div class="uk-margin-large-left">
Chart
</div>
</div>
<div class="uk-text-center uk-margin-medium-top">
<span class="uk-text-meta">Powered by</span>
<img class="uk-margin-small-left uk-margin-small-right uk-width-small" src="assets/common-assets/logo-large-usage-counts.png" loading="lazy" alt="OpenAIRE UsageCounts">
</div>
</li> </li>
</ul> </ul>
</div> </div>
@ -652,40 +737,36 @@
<ng-template #right_column> <ng-template #right_column>
<!-- new metrics box --> <!-- new metrics box -->
<div *ngIf="resultLandingInfo && hasMetrics" <div *ngIf="resultLandingInfo && resultLandingInfo.measure"
class="uk-margin-medium-top uk-padding uk-padding-remove-vertical"> class="uk-margin-medium-top uk-padding uk-padding-remove-vertical">
<div class="uk-card uk-card-secondary uk-flex uk-padding-small"> <div class="uk-card uk-card-secondary uk-flex uk-padding-small metrics-background">
<div class="uk-width-expand"> <div class="uk-width-expand">
<div class="uk-grid uk-grid-small" uk-grid> <div class="uk-grid uk-grid-small" uk-grid uk-height-match="target: > div > .cell">
<!-- <div>
<div></div>
<div></div>
<div></div>
<div>
<icon name="download" [flex]="true"></icon>
</div>
<div>
<icon name="visibility" [flex]="true"></icon>
</div>
</div> -->
<div> <div>
<div class="uk-margin-xsmall-bottom">Citations</div> <div *ngIf="resultLandingInfo.measure.citations" class="cell uk-margin-xsmall-bottom uk-flex uk-flex-middle"><icon name="cite" ratio="0.8" [flex]="true"></icon></div>
<div class="uk-margin-xsmall-bottom">Popularity</div> <div *ngIf="resultLandingInfo.measure.popularity" class="cell uk-margin-xsmall-bottom uk-flex uk-flex-middle"><icon name="fire" ratio="0.8" [flex]="true"></icon></div>
<div class="uk-margin-xsmall-bottom">Influence</div> <div *ngIf="resultLandingInfo.measure.influence" class="cell uk-margin-xsmall-bottom uk-flex uk-flex-middle"><icon name="landmark" ratio="0.8" [flex]="true"></icon></div>
<div class="uk-margin-xsmall-bottom">Downloads</div> <div *ngIf="resultLandingInfo.measure.downloads" class="cell uk-margin-xsmall-bottom uk-flex uk-flex-middle"><icon name="download" ratio="0.8" [flex]="true"></icon></div>
<div class="uk-margin-xsmall-bottom">Views</div> <div *ngIf="resultLandingInfo.measure.views" class="cell uk-margin-xsmall-bottom uk-flex uk-flex-middle"><icon name="visibility" ratio="0.8" [flex]="true"></icon></div>
</div>
<div>
<div *ngIf="resultLandingInfo.measure.citations" class="cell uk-margin-xsmall-bottom">Citations</div>
<div *ngIf="resultLandingInfo.measure.popularity" class="cell uk-margin-xsmall-bottom">Popularity</div>
<div *ngIf="resultLandingInfo.measure.influence" class="cell uk-margin-xsmall-bottom">Influence</div>
<div *ngIf="resultLandingInfo.measure.downloads" class="cell uk-margin-xsmall-bottom">Downloads</div>
<div *ngIf="resultLandingInfo.measure.views" class="cell uk-margin-xsmall-bottom">Views</div>
</div> </div>
<div class="uk-text-uppercase uk-text-bolder"> <div class="uk-text-uppercase uk-text-bolder">
<div class="uk-margin-xsmall-bottom">{{resultLandingInfo.measure.citations}}</div> <div *ngIf="resultLandingInfo.measure.citations" class="cell uk-margin-xsmall-bottom">{{resultLandingInfo.measure.citations}}</div>
<div class="uk-margin-xsmall-bottom">{{resultLandingInfo.measure.popularity}}</div> <div *ngIf="resultLandingInfo.measure.popularity" class="cell uk-margin-xsmall-bottom">{{resultLandingInfo.measure.popularity}}</div>
<div class="uk-margin-xsmall-bottom">{{resultLandingInfo.measure.influence}}</div> <div *ngIf="resultLandingInfo.measure.influence" class="cell uk-margin-xsmall-bottom">{{resultLandingInfo.measure.influence}}</div>
<div class="uk-margin-xsmall-bottom">{{resultLandingInfo.measure.downloads}}</div> <div *ngIf="resultLandingInfo.measure.downloads" class="cell uk-margin-xsmall-bottom">{{resultLandingInfo.measure.downloads}}</div>
<div class="uk-margin-xsmall-bottom">{{resultLandingInfo.measure.views}}</div> <div *ngIf="resultLandingInfo.measure.views" class="cell uk-margin-xsmall-bottom">{{resultLandingInfo.measure.views}}</div>
</div> </div>
</div> </div>
</div> </div>
<div class="uk-width-1-5"> <div class="uk-width-1-5 uk-flex uk-flex-bottom">
<img src="assets/common-assets/metrics-badge.svg" loading="lazy" alt="Metrics badge">
</div> </div>
</div> </div>
</div> </div>
@ -721,7 +802,7 @@
<!-- Communities --> <!-- Communities -->
<div *ngIf="resultLandingInfo.contexts && resultLandingInfo.contexts.length > 0 && !noCommunities && (!viewAll || viewAll=='relatedTo')"> <div *ngIf="resultLandingInfo.contexts && resultLandingInfo.contexts.length > 0 && !noCommunities && (!viewAll || viewAll=='relatedTo')">
<relatedTo [contexts]="resultLandingInfo.contexts" [viewAll]="viewAll=='relatedTo'" <relatedTo [contexts]="resultLandingInfo.contexts" [viewAll]="viewAll=='relatedTo'"
(viewAllClicked)="viewAll=$event" (noCommunities)="noCommunities = true"></relatedTo> (viewAllClicked)="viewAll=$event" (noCommunities)="noCommunities = true"></relatedTo>
</div> </div>
<!-- Download From --> <!-- Download From -->
<!-- <div *ngIf="resultLandingInfo.hostedBy_collectedFrom && resultLandingInfo.hostedBy_collectedFrom.length > 0 && (!viewAll || viewAll=='availableOn')"> <!-- <div *ngIf="resultLandingInfo.hostedBy_collectedFrom && resultLandingInfo.hostedBy_collectedFrom.length > 0 && (!viewAll || viewAll=='availableOn')">

6
landingPages/result/resultLanding.component.ts
View File

@ -557,8 +557,10 @@ export class ResultLandingComponent {
(this.resultLandingInfo.fundedByProjects && this.resultLandingInfo.fundedByProjects.length > 0) (this.resultLandingInfo.fundedByProjects && this.resultLandingInfo.fundedByProjects.length > 0)
|| ||
(this.resultLandingInfo.contexts && this.resultLandingInfo.contexts.length > 0 && !this.noCommunities) (this.resultLandingInfo.contexts && this.resultLandingInfo.contexts.length > 0 && !this.noCommunities)
|| ||
(this.resultLandingInfo.hostedBy_collectedFrom && this.resultLandingInfo.hostedBy_collectedFrom.length > 0); (this.resultLandingInfo.measure && Object.keys(this.resultLandingInfo.measure).length > 0);
// ||
// (this.resultLandingInfo.hostedBy_collectedFrom && this.resultLandingInfo.hostedBy_collectedFrom.length > 0);
} }
public get metricsCalculated(): boolean { public get metricsCalculated(): boolean {

4
landingPages/result/resultLanding.module.ts
View File

@ -33,7 +33,7 @@ import {MatFormFieldModule} from "@angular/material/form-field";
import {MatSelectModule} from "@angular/material/select"; import {MatSelectModule} from "@angular/material/select";
import {IconsModule} from "../../utils/icons/icons.module"; import {IconsModule} from "../../utils/icons/icons.module";
import {IconsService} from "../../utils/icons/icons.service"; import {IconsService} from "../../utils/icons/icons.service";
import {graph, link, quotes, cite, link_to, versions} from "../../utils/icons/icons"; import {graph, link, quotes, cite, link_to, versions, rocket, fire, landmark} from "../../utils/icons/icons";
import {InputModule} from "../../sharedComponents/input/input.module"; import {InputModule} from "../../sharedComponents/input/input.module";
import {EGIDataTransferModule} from "../../utils/dataTransfer/transferData.module"; import {EGIDataTransferModule} from "../../utils/dataTransfer/transferData.module";
@ -58,6 +58,6 @@ import {EGIDataTransferModule} from "../../utils/dataTransfer/transferData.modul
}) })
export class ResultLandingModule { export class ResultLandingModule {
constructor(private iconsService: IconsService) { constructor(private iconsService: IconsService) {
this.iconsService.registerIcons([link, graph, quotes, cite, link_to, versions]) this.iconsService.registerIcons([link, graph, quotes, cite, link_to, versions, rocket, fire, landmark])
} }
} }

15
utils/dataTransfer/transferData.component.html
View File

@ -1,11 +1,10 @@
<a (click)="open()" <a (click)="open()"
[title]="'Send data to cloud storage [demo]'" [title]="'Send data to cloud storage [demo]'"
[attr.uk-tooltip]="'pos: right; cls: uk-active uk-text-small uk-padding-small'" [attr.uk-tooltip]="'pos: bottom; cls: uk-active uk-text-small uk-padding-small'"
> <span icon="cloud-upload"></span> class="uk-flex uk-flex-middle uk-flex-center uk-button-link uk-text-bolder">
<span class="uk-icon-button uk-icon landing-action-button landing-action-button-portal"> <icon flex="true" ratio="0.8" name="cloud_upload" visuallyHidden="upload"></icon>
<span uk-icon="cloud-upload"></span> <span class="uk-margin-xsmall-left">Transfer</span>
</span> </a>
</a>
<!-- This is the modal --> <!-- This is the modal -->

8
utils/dataTransfer/transferData.module.ts
View File

@ -4,18 +4,18 @@ import {FormsModule} from '@angular/forms';
import {EGIDataTransferComponent} from "./transferData.component"; import {EGIDataTransferComponent} from "./transferData.component";
import {InputModule} from "../../sharedComponents/input/input.module"; import {InputModule} from "../../sharedComponents/input/input.module";
import {AlertModalModule} from "../modal/alertModal.module"; import {AlertModalModule} from "../modal/alertModal.module";
import {IconsModule} from '../icons/icons.module';
@NgModule({ @NgModule({
imports: [ imports: [
CommonModule, FormsModule, InputModule, AlertModalModule CommonModule, FormsModule, InputModule, AlertModalModule, IconsModule
], ],
declarations: [ declarations: [
EGIDataTransferComponent EGIDataTransferComponent
], ],
exports: [ exports: [
EGIDataTransferComponent EGIDataTransferComponent
] ]
}) })
export class EGIDataTransferModule { } export class EGIDataTransferModule { }

15
utils/icons/icons.ts
View File

@ -127,4 +127,19 @@ export const versions = {
name: 'versions', name: 'versions',
data: '<svg xmlns="http://www.w3.org/2000/svg" width="17" height="12.143" viewBox="0 0 17 12.143"> <path id="Icon_metro-versions" data-name="Icon metro-versions" d="M4.5,17.426H6.927V16.212H5.713V11.355H6.927V10.141H4.5v7.286Zm7.286-9.714V19.855H21.5V7.712H11.784Zm7.286,9.714H14.213V10.141H19.07ZM8.142,18.641H10.57V17.426H9.356V10.141H10.57V8.926H8.142Z" transform="translate(-4.499 -7.712)" fill="#211f7e"/> </svg>' data: '<svg xmlns="http://www.w3.org/2000/svg" width="17" height="12.143" viewBox="0 0 17 12.143"> <path id="Icon_metro-versions" data-name="Icon metro-versions" d="M4.5,17.426H6.927V16.212H5.713V11.355H6.927V10.141H4.5v7.286Zm7.286-9.714V19.855H21.5V7.712H11.784Zm7.286,9.714H14.213V10.141H19.07ZM8.142,18.641H10.57V17.426H9.356V10.141H10.57V8.926H8.142Z" transform="translate(-4.499 -7.712)" fill="#211f7e"/> </svg>'
} }
export const rocket = {
name: 'rocket',
data: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M156.6 384.9L125.7 354c-8.5-8.5-11.5-20.8-7.7-32.2c3-8.9 7-20.5 11.8-33.8L24 288c-8.6 0-16.6-4.6-20.9-12.1s-4.2-16.7 .2-24.1l52.5-88.5c13-21.9 36.5-35.3 61.9-35.3l82.3 0c2.4-4 4.8-7.7 7.2-11.3C289.1-4.1 411.1-8.1 483.9 5.3c11.6 2.1 20.6 11.2 22.8 22.8c13.4 72.9 9.3 194.8-111.4 276.7c-3.5 2.4-7.3 4.8-11.3 7.2v82.3c0 25.4-13.4 49-35.3 61.9l-88.5 52.5c-7.4 4.4-16.6 4.5-24.1 .2s-12.1-12.2-12.1-20.9V380.8c-14.1 4.9-26.4 8.9-35.7 11.9c-11.2 3.6-23.4 .5-31.8-7.8zM384 168c22.1 0 40-17.9 40-40s-17.9-40-40-40s-40 17.9-40 40s17.9 40 40 40z"/></svg>'
}
export const fire = {
name: 'fire',
data: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M159.3 5.4c7.8-7.3 19.9-7.2 27.7 .1c27.6 25.9 53.5 53.8 77.7 84c11-14.4 23.5-30.1 37-42.9c7.9-7.4 20.1-7.4 28 .1c34.6 33 63.9 76.6 84.5 118c20.3 40.8 33.8 82.5 33.8 111.9C448 404.2 348.2 512 224 512C98.4 512 0 404.1 0 276.5c0-38.4 17.8-85.3 45.4-131.7C73.3 97.7 112.7 48.6 159.3 5.4zM225.7 416c25.3 0 47.7-7 68.8-21c42.1-29.4 53.4-88.2 28.1-134.4c-2.8-5.6-5.6-11.2-9.8-16.8l-50.6 58.8s-81.4-103.6-87.1-110.6C133.1 243.8 112 273.2 112 306.8C112 375.4 162.6 416 225.7 416z"/></svg>'
}
export const landmark = {
name: 'landmark',
data: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M240.1 4.2c9.8-5.6 21.9-5.6 31.8 0l171.8 98.1L448 104l0 .9 47.9 27.4c12.6 7.2 18.8 22 15.1 36s-16.4 23.8-30.9 23.8H32c-14.5 0-27.2-9.8-30.9-23.8s2.5-28.8 15.1-36L64 104.9V104l4.4-1.6L240.1 4.2zM64 224h64V416h40V224h64V416h48V224h64V416h40V224h64V420.3c.6 .3 1.2 .7 1.8 1.1l48 32c11.7 7.8 17 22.4 12.9 35.9S494.1 512 480 512H32c-14.1 0-26.5-9.2-30.6-22.7s1.1-28.1 12.9-35.9l48-32c.6-.4 1.2-.7 1.8-1.1V224z"/></svg>'
}
/** Add new icon under this line to be sure that it will be added on preview */ /** Add new icon under this line to be sure that it will be added on preview */