[WIP] Upload dois: update sorting and filtering

This commit is contained in:
argirok 2023-11-20 17:58:41 +02:00
parent ba916df4e1
commit 6cf796d3f9
3 changed files with 212 additions and 152 deletions

View File

@ -39,7 +39,7 @@
<div class="uk-text-meta uk-text-small uk-margin-small-top">Maximum size: 5 MB</div>
</div>
</div>
<div *ngIf="loading" class="uk-section uk-container uk-flex uk-flex-center">
<div *ngIf="loading" class="uk-section uk-container uk-flex uk-flex-center uk-padding-remove-vertical">
<div *ngIf="filesToUpload[0]" class="uk-grid">
<div class="uk-width-auto">
<span uk-icon="icon: file-text; ratio:3"></span>
@ -53,70 +53,91 @@
</div>
</div>
<div *ngIf="filesToUpload && !loading"class=" uk-padding-large">
<ul uk-tab>
<li class="uk-active"><a (click)="showFound = true">found</a></li>
<li class=""><a (click)="showFound = false">not found</a></li>
</ul>
<div class="uk-grid ">
<div class="uk-width-3-4">
<modal-loading
[message]="'Uploading, reading your document and fetching results. Please give us a moment..'"></modal-loading>
<div>
<!-- Filters-->
<div class="uk-grid">
<div>
<a class="uk-link uk-width-small" >Filter by</a>
<div uk-dropdown>
<ul class="uk-nav uk-dropdown-nav">
<li *ngFor="let option of filterByOptions" [class.uk-active]="filterBy == option.value"><a [class.uk-disabled]="stats[option[option.value]]==0" (click)="updateFilterBy(option.value)">{{option.label}}</a></li>
</ul>
</div>
</div>
<div>
<a class="uk-link uk-width-small" >Sort by</a>
<div uk-dropdown>
<ul class="uk-nav uk-dropdown-nav">
<li *ngFor="let option of sortByOptions" [class.uk-active]="filterBy == option.value"><a (click)="updateSortBy(option.value)">{{option.label}}</a></li>
</ul>
</div>
</div>
<div search-input [value]="keyword" (valueChange)="updateKeyword($event)"></div>
<div>
Viewing {{((page-1)*size + 1)}}-{{resultsToShow.length>(page)*size? (page)*size : resultsToShow.length}} of {{resultsToShow.length}}
</div>
<div *ngIf="resultsToShow.length > size">
<ul [class.uk-invisible]="resultsToShow.length<size" class="uk-pagination">
<li ><a class="uk-icon-button uk-icon-button-small" [class.uk-disabled]="page <= 1" (click)="updatePage(page-1)"><span uk-pagination-previous></span></a></li>
<li><a class="uk-icon-button uk-icon-button-small" [class.uk-disabled]="page*size > resultsToShow.length" (click)="updatePage(page+1)"><span uk-pagination-next></span></a></li>
</ul>
</div>
<!--<paging-no-load [totalResults]="foundIds.length" [size]="size" [currentPage]="page"
(pageChange)="updatePage($event)"></paging-no-load>-->
</div>
<table class="uk-table uk-table-responsive uk-table-striped">
<tr>
<!-- <th>DOI</th>-->
<th>Title</th>
<th>Access Mode</th>
<th>Access Route</th>
<th> in OpenAIRE</th>
</tr>
<tr *ngFor="let result of resultsToShow.slice((page-1)*size,page*size)">
<ng-container *ngIf="result.found">
<td><a [href]="'https://beta.explore.openaire.eu/search/result?pid='+result.doi"
target="_blank">{{result.title}}</a></td>
<td>{{result.accessMode}}</td>
<td>{{result.accessRoute}}</td>
</ng-container>
<ng-container *ngIf="!result.found">
<td colspan="3"> {{result.doi}}</td>
</ng-container>
<td><span *ngIf="result.found" uk-icon="check" class="uk-text-success"></span></td>
</tr>
</table>
</div>
<!--Not found-->
<div *ngIf="!showFound" class="uk-width-1-1 uk-grid uk-child-width-1-3">
<div *ngFor="let id of notFoundIds">{{properties.doiURL+id}}</div>
</div>
<div class="uk-width-1-4">
<!-- found-->
<ng-container *ngIf="showFound">
<div class="uk-width-3-4">
<modal-loading
[message]="'Uploading, reading your document and fetching results. Please give us a moment..'"></modal-loading>
<div>
<!-- Filters-->
<div class="uk-grid">
<div *ngIf="accessModeFilter">
<dropdown-filter [count]="accessModeFilter.countSelectedValues" [name]="accessModeFilter.title"
dropdownMinWidth="450">
<div class="uk-padding-small">
<search-filter [isDisabled]="loading"
[filter]="accessModeFilter" [showResultCount]=true
(onFilterChange)="updateView()" [actionRoute]="false" [filterValuesNum]="6" [showMoreInline]="false"></search-filter>
</div>
</dropdown-filter>
</div>
<div *ngIf="accessRouteFilter">
<dropdown-filter [count]="accessRouteFilter.countSelectedValues" [name]="accessRouteFilter.title"
dropdownMinWidth="450">
<div class="uk-padding-small">
<search-filter [isDisabled]="loading"
[filter]="accessRouteFilter" [showResultCount]=true
(onFilterChange)="updateView()" [actionRoute]="false" [filterValuesNum]="6" [showMoreInline]="false"></search-filter>
</div>
</dropdown-filter>
</div>
<!--<div>
<a class="uk-link uk-width-small" >Filter by</a>
<div uk-dropdown>
<ul class="uk-nav uk-dropdown-nav">
<li *ngFor="let option of filterByOptions" [class.uk-active]="filterBy == option.value"><a [class.uk-disabled]="stats[option[option.value]]==0" (click)="updateFilterBy(option.value)">{{option.label}}</a></li>
</ul>
</div>
</div>-->
<div search-input [value]="keyword" (valueChange)="updateKeyword($event)"></div>
<div>
Viewing {{((page-1)*size + 1)}}-{{resultsToShow.length>(page)*size? (page)*size : resultsToShow.length}} of {{resultsToShow.length}}
</div>
<div *ngIf="resultsToShow.length > size">
<ul [class.uk-invisible]="resultsToShow.length<size" class="uk-pagination">
<li ><a class="uk-icon-button uk-icon-button-small" [class.uk-disabled]="page <= 1" (click)="updatePage(page-1)"><span uk-pagination-previous></span></a></li>
<li><a class="uk-icon-button uk-icon-button-small" [class.uk-disabled]="page*size > resultsToShow.length" (click)="updatePage(page+1)"><span uk-pagination-next></span></a></li>
</ul>
</div>
<!--<paging-no-load [totalResults]="foundIds.length" [size]="size" [currentPage]="page"
(pageChange)="updatePage($event)"></paging-no-load>-->
</div>
<table class="uk-table uk-table-responsive uk-table-striped">
<tr>
<!-- <th>DOI</th>-->
<th><a (click)="sortResults()">Title sort</a></th>
<th>Access Mode</th>
<th>Access Route</th>
<th> Published in a Diamond OA journal</th>
</tr>
<tr *ngFor="let result of resultsToShow.slice((page-1)*size,page*size)">
<td><a [href]="'https://beta.explore.openaire.eu/search/result?pid='+result.doi"
target="_blank">{{result.title}}</a></td>
<td>{{result.accessMode}}</td>
<td>{{result.accessRoute}}</td>
<td> <span *ngIf="result.diamond" uk-icon="check" class="uk-text-success"></span>
</td>
</tr>
</table>
</div>
</div>
<div class="uk-width-1-4">
<div class="uk-margin-top">
<span class="uk-text-bold uk-margin-small-bottom">{{foundIds.length}} results</span> found in Irish Monitor
</div>
@ -127,14 +148,18 @@
<div class="uk-grid uk-margin-remove-top"><div class="uk-width-expand"><span class="dot embargo"></span> Embargo</div><div class="uk-text-right uk-width-auto"> {{stats['embargo']}} ({{getercentage(stats['embargo'])}}%)</div></div>
<div class="uk-grid uk-margin-remove-top"><div class="uk-width-expand"><span class="dot closed"></span> Closed</div><div class="uk-text-right uk-width-auto"> {{stats['closed']}} ({{getercentage(stats['closed'])}}%)</div></div>
<hr>
<div class="uk-margin-top uk-margin-bottom uk-text-large">Access Routes</div>
<div class="uk-grid uk-margin-remove-top"><div class="uk-width-expand"><span class="dot green"></span> Green</div><div class="uk-text-right uk-width-auto"> {{stats['green']}} ({{getercentage(stats['green'])}}%)</div></div>
<hr>
<div class="uk-grid uk-margin-remove-top"><div class="uk-width-expand"><span class="dot gold"></span> Gold</div><div class="uk-text-right uk-width-auto"> {{stats['gold']}} ({{getercentage(stats['gold'])}}%)</div></div>
<div class="uk-grid uk-margin-remove-top"><div class="uk-width-expand"><span class="dot hybrid"></span> Hybrid</div><div class="uk-text-right uk-width-auto"> {{stats['hybrid']}} ({{getercentage(stats['hybrid'])}}%)</div></div>
<div class="uk-grid uk-margin-remove-top"><div class="uk-width-expand"><span class="dot bronze"></span> Bronze</div><div class="uk-text-right uk-width-auto"> {{stats['bronze']}} ({{getercentage(stats['bronze'])}}%)</div></div>
<div class="uk-grid uk-margin-remove-top"><div class="uk-width-expand"><span class="dot diamond"></span> Diamond</div><div class="uk-text-right uk-width-auto"> {{stats['diamond']}} ({{getercentage(stats['diamond'])}}%)</div></div>
<hr>
<div class="uk-grid uk-margin-remove-top"><div class="uk-width-expand"><span class="dot diamond"></span> Published in a Diamond OA journal</div><div class="uk-text-right uk-width-auto"> {{stats['diamond']}} ({{getercentage(stats['diamond'])}}%)</div></div>
</div>
<div class=" uk-card uk-card-default uk-padding-small uk-margin-small-top uk-margin-small-bottom">
<div class="uk-grid uk-child-width-1-3 ">
<div class="uk-grid uk-child-width-1-2 ">
<div *ngIf="allIds.length > 0" class="uk-text-center ">
<div class=""><span uk-icon="icon:check; ratio:2" class="uk-icon-button"></span></div>
<div> <div>valid</div>
@ -142,13 +167,13 @@
</div>
</div>
<div *ngIf="notFoundIds.length > 0" class="uk-text-center ">
<!--<div *ngIf="notFoundIds.length > 0" class="uk-text-center ">
<div class=""><span uk-icon="icon:question; ratio:2" class="uk-icon-button"></span></div>
<div> <div>not found</div>
<div class="uk-text-bold">{{notFoundIds.length}}</div>
</div>
</div>
</div>-->
<div *ngIf="duplicateIds.length > 0" class="uk-text-center ">
<div class=""><span uk-icon="icon:copy; ratio:2" class="uk-icon-button"></span></div>
<div> <div>duplicates</div>
@ -166,6 +191,7 @@
</div>
</div>
</div>
</ng-container>
</div>
</div>

View File

@ -6,6 +6,7 @@ import {Subscriber, timer} from "rxjs";
import {properties} from "../../environments/environment";
import {SearchResearchResultsService} from "../openaireLibrary/services/searchResearchResults.service";
import {map} from "rxjs/operators";
import {Filter} from "../openaireLibrary/searchPages/searchUtils/searchHelperClasses.class";
@Component({
selector: 'upload-dois',
@ -52,26 +53,19 @@ export class UploadDoisComponent implements OnInit {
bronze:0,
diamond:0
}
filterBy = null;
filterByOptions = [{label: "In Openaire", value: "openaire"},
{label: "Not found", value: "notFound"},
{label: "Open Access", value: "access-open"},
{label: "Embargo", value: "access-embargo"},
{label: "Restricted", value: "access-restricted"},
{label: "Closed", value: "access-closed"},
{label: "Green", value: "route-green"},
{label: "Gold", value: "route-gold"},
{label: "Hybrid", value: "route-hybrid"},
{label: "Bronze", value: "route-bronze"},
{label: "Diamond", value: "route-diamond"},
]
sortBy = null;
sortByOptions = [{label: "Title", value: "title"},
{label: "Access mode", value: "accessMode"},
]
accessModeFilter:Filter = null;
accessRouteFilter:Filter = null;
/*filterByAccessRouteOptions = [
{label: "Green OA", value: "route-green"},
{label: "Published in OA Diamond", value: "route-diamond"},
]*/
sortByTitleAsc = true;
keyword = "";
loading = false;
showFound = true;
constructor(private _searchResearchResultsService: SearchResearchResultsService) {
}
@ -95,9 +89,9 @@ export class UploadDoisComponent implements OnInit {
this.errorMessage = "";
this.results = [];
this.resultsToShow = [];
this.sortBy = null;
this.filterBy = null;
this.sortByTitleAsc = true;
this.keyword = "";
this.showFound = true;
if (this.filesToUpload.length == 0) {
this.errorMessage = "There is no selected file to upload.";
return;
@ -130,7 +124,7 @@ export class UploadDoisComponent implements OnInit {
let id = this.removeDoubleQuotes(values[0]);
if (DOI.isValidDOI(id)) {
id = Identifier.getRawDOIValue(id);
console.log(id, id.split("\r")[0]);
// console.log(id, id.split("\r")[0]);
id = id.split("\r")[0]
if (this.allIds.indexOf(id) > -1) {
this.duplicateIds.push(id);
@ -232,20 +226,20 @@ export class UploadDoisComponent implements OnInit {
doi: matchingDOI,
title: result.title.name,
accessMode: result.title.accessMode,
accessRoute: null,
green: false,
openAccessColor:null,
diamond: false,
found: true
accessRoute:"gold", //TODO update when we have the values
green: false, //TODO update when we have the values
diamond: false, //TODO update when we have the values
};
this.results.push(showRes)
this.addStatsPerResult(result)
this.addStatsPerResult(showRes)
console.log(showRes, this.stats)
this.initFilters();
}
if (data[0] < dois.length) {
for (let doi of dois) {
if (this.foundIds.indexOf(doi) == -1) {
this.notFoundIds.push(doi);
this.results.push({doi: doi, title: null, accessMode: null, green: false, openAccessColor:null, diamond: false, accessRoute: null, found: false})
// this.results.push({doi: doi, title: null, accessMode: null, green: false, openAccessColor:null, diamond: false, accessRoute: null, found: false})
}
}
}
@ -269,34 +263,39 @@ export class UploadDoisComponent implements OnInit {
}
addStatsPerResult(result) {
if (result.title.accessMode == "Open Access") {
this.stats.open++;
}
if (result.title.accessMode == "Closed Access") {
this.stats.closed++;
}
if (result.title.accessMode == "Embargo") {
this.stats.embargo++;
}
if (result.title.accessMode == "Restricted") {
this.stats.restricted++;
if(result.accessMode) {
if (result.accessMode == "Open Access") {
this.stats.open++;
}
if (result.accessMode == "Closed Access") {
this.stats.closed++;
}
if (result.accessMode == "Embargo") {
this.stats.embargo++;
}
if (result.accessMode == "Restricted") {
this.stats.restricted++;
}
}
//TDO add access routes stats
if(result.accessRoute) {
if (result.accessRoute == "gold") {
this.stats.gold++;
}
if (result.accessRoute == "hybrid") {
this.stats.hybrid++;
}
if (result.accessRoute == "bronze") {
this.stats.bronze++;
}
}
}
updatePage(page) {
this.page = page;
}
updateSortBy(sortBy) {
this.sortBy = sortBy;
this.updateView();
}
updateFilterBy(filterBy) {
this.filterBy = filterBy;
this.updateView();
}
updateKeyword(keyword){
this.keyword = keyword;
this.updateView();
@ -304,66 +303,66 @@ export class UploadDoisComponent implements OnInit {
updateView() {
this.resultsToShow = [...this.results];
if (this.filterBy) {
this.resultsToShow = this.filterResults();
}
this.resultsToShow = this.filterResultsByAccessMode();
this.resultsToShow = this.filterResultsByAccessRoute();
if(this.keyword.length > 0){
this.resultsToShow = this.filterResultsByKeyword();
}
if(this.sortBy){
this.resultsToShow= this.sortResults();
}
}
filterResults() {
filterResultsByAccessMode() {
if (this.accessModeFilter.countSelectedValues > 0) {
for (let value of this.accessModeFilter.values) {
if (value.selected == true) {
return this.resultsToShow.filter(res => {
return res.accessMode == value.id;
});
}
}
}
return this.resultsToShow;
}
filterResultsByAccessRoute() {
if (this.accessRouteFilter.countSelectedValues > 0) {
for (let value of this.accessRouteFilter.values) {
if (value.selected == true) {
return this.resultsToShow.filter(res => {
return res.accessRoute == value.id;
});
}
}
}
return this.resultsToShow;
}
/*filterResults() {
return this.results.filter(res =>{
if(this.filterBy == "openaire"){
return res.found
}else if(this.filterBy == "notFound"){
return !res.found
}else if(this.filterBy == "access-closed"){
return res.accessMode == "Closed Access";
}else if(this.filterBy == "access-restricted"){
return res.accessMode == "Restricted";
}else if(this.filterBy == "access-open"){
return res.accessMode == "Open Access";
}else if(this.filterBy == "access-embargo") {
return res.accessMode == "Embargo";
}else if(this.filterBy == "route-green") {
if(this.filterBy == "route-green") {
return res.green;
}else if(this.filterBy == "route-diamond") {
return res.diamond;
}else if(this.filterBy == "route-gold") {
return res.openAccessColor == "gold";
}else if(this.filterBy == "route-hybrid") {
return res.openAccessColor == "hybrid";
}else if(this.filterBy == "route-bronze") {
return res.openAccessColor == "bronze";
}else{
return true;
}
})
}
}*/
filterResultsByKeyword() {
return this.resultsToShow.filter(res =>{
return (res.found && (res.title && res.title.toLowerCase().indexOf(this.keyword.toLowerCase()) !=-1))
|| (res.doi && res.doi.indexOf(this.keyword.toLowerCase()) != -1);
return (res.title && res.title.toLowerCase().indexOf(this.keyword.toLowerCase()) !=-1);
})
}
sortResults(){
this.sortByTitleAsc =! this.sortByTitleAsc;
return this.resultsToShow.sort((n1, n2) => {
if (n1[this.sortBy] && n2[this.sortBy] && n1[this.sortBy] > n2[this.sortBy]) {
return 1;
}
if (n1[this.sortBy] && n2[this.sortBy] && n1[this.sortBy] < n2[this.sortBy]) {
return -1;
}
if (n1.title && n2.title && ((!this.sortByTitleAsc && n1.title > n2.title) || (this.sortByTitleAsc && n1.title < n2.title))) {
return 1;
}
if (n1.title && n2.title && ((this.sortByTitleAsc && n1.title > n2.title) || (!this.sortByTitleAsc && n1.title < n2.title))) {
return -1;
}
return 0;
})
@ -378,4 +377,37 @@ export class UploadDoisComponent implements OnInit {
var num = new Number((number/from)*100);
return num == 100?100:num.toPrecision(2);
}
initFilters(){
this.accessModeFilter = {
countSelectedValues: 0,
filterId: "access-mode",
filterOperator: "or",
filterType: "radio",
originalFilterId: "",
title: "Access Mode",
valueIsExact: false,
values:[
{name: "Open Access", id: "Open Access", selected:false, number:this.stats["open"]},
{name: "Embargo", id: "Embargo", selected:false, number:this.stats["embargo"]},
{name: "Restricted", id: "Restricted", selected:false, number:this.stats["restricted"]},
{name: "Closed", id: "Closed", selected:false, number:this.stats["closed"]}
]};
this.accessRouteFilter = {
countSelectedValues: 0,
filterId: "access-route",
filterOperator: "or",
filterType: "radio",
originalFilterId: "",
title: "Access Route",
valueIsExact: false,
values:[
{name: "Gold", id: "route-gold", selected:false, number:this.stats["gold"]},
{name: "Hybrid", id: "route-hybrid", selected:false, number:this.stats["hybrid"]},
{name: "Bronze", id: "route-bronze", selected:false, number:this.stats["bronze"]}
]};
}
}

View File

@ -6,12 +6,14 @@ import {SearchResearchResultsServiceModule} from "../openaireLibrary/services/se
import {PagingModule} from "../openaireLibrary/utils/paging.module";
import {SearchInputModule} from "../openaireLibrary/sharedComponents/search-input/search-input.module";
import {IconsModule} from "../openaireLibrary/utils/icons/icons.module";
import {DropdownFilterModule} from "../openaireLibrary/utils/dropdown-filter/dropdown-filter.module";
import {SearchFilterModule} from "../openaireLibrary/searchPages/searchUtils/searchFilter.module";
@NgModule({
declarations: [UploadDoisComponent],
imports: [
CommonModule, UploadDoisRoutingModule, SearchResearchResultsServiceModule, PagingModule, SearchInputModule, IconsModule
CommonModule, UploadDoisRoutingModule, SearchResearchResultsServiceModule, PagingModule, SearchInputModule, IconsModule, DropdownFilterModule, SearchFilterModule
],
})