[Library | Trunk]: Annotations add list of related annotations resources

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@59962 d315682c-612b-4755-9ff5-7f18f6832af3

landingPages/annotation/annotation.component.ts

@@ -22,11 +22,6 @@ import {Subscriber} from "rxjs";
             type="hidden"
             name="recordurl_tofeed"
             [value]="url">
-        <!--URL of the record contents for downloading-->
-        <input
-            type="hidden"
-            name="subject_tofeed"
-            [value]="pid">
         <!--PID of the annotated record-->
         <input
             type="hidden"
@@ -51,15 +46,18 @@ import {Subscriber} from "rxjs";
       </div>
       <div *ngIf="loading" class="loading-gif uk-margin-medium-top"></div>
       <ul *ngIf="annotations && !loading" class="uk-list uk-list-divider">
-        <li *ngFor="let annotation of annotations.slice(0, visibleAnnotations)" uk-grid
+        <li *ngFor="let annotation of annotations.slice(0, visibleAnnotations); let i=index" uk-grid
             class="uk-flex uk-flex-top uk-margin-remove-left">
-          <div [ngClass]="annotation.type" class="uk-width-auto">{{annotation.type}}</div>
+          <div [ngClass]="annotation.type" class="type">{{annotation.type}}</div>
-          <div [class.uk-width-1-3]="annotation.urls" [class.uk-width-1-6@s]="annotation.urls">{{annotation.text}}</div>
+          <div [class.uk-width-1-3]="annotation.targets"
-          <ul class="uk-width-expand uk-list uk-margin-remove-top" *ngIf="annotation.urls">
+               [class.uk-width-1-6@s]="annotation.targets">{{annotation.text}}</div>
-            <li *ngFor="let url of annotation.urls.slice(0, annotation.urlSize)"><a [href]="url"
+          <ul class="uk-width-expand uk-list uk-margin-remove-top" *ngIf="annotation.targets">
-                                                                                    target="_blank">{{url}}</a></li>
+            <li *ngFor="let target of annotation.targets.slice(0, annotation.targetSize)">
-            <li *ngIf="annotation.urlSize < annotation.urls.length"><a
+              <a *ngIf="target.url" [href]="target.url" target="_blank">{{target.id}}</a>
-                (click)="annotation.urlSize = annotation.urls.length">+ {{annotation.urls.length - annotation.urlSize}}
+              <a *ngIf="!target.url" routerLink="/search/advanced/research-outcomes" [queryParams]="searchPid(target.id)">{{target.id}}</a>
+            </li>
+            <li *ngIf="annotation.targetSize < annotation.targets.length"><a
+                (click)="open(i)">+ {{annotation.targets.length - annotation.targetSize}}
               more</a></li>
           </ul>
         </li>
@@ -72,11 +70,9 @@ import {Subscriber} from "rxjs";
     </div>
     <div [class.uk-hidden]="!visible">
       <div class="widget-container" cdkDrag>
-        <!--Close button, should be bound to hide the widget-->
         <button type="button" class="close" aria-label="Close" (click)="toggleAnnotation($event)">
           <span aria-hidden="true">×</span>
         </button>
-        <!--The glorious iframe with the running app!-->
         <iframe #iframe id="b2note_iframe" name="b2note_iframe" class="b2note-iframe">
         </iframe>
       </div>
@@ -156,26 +152,80 @@ export class AnnotationComponent implements OnInit, OnDestroy {
   }
   
   private getAnnotations() {
-    if(!this.annotations || this.annotations.length === 0) {
+    if (!this.annotations || this.annotations.length === 0) {
       this.loading = true;
     }
-    this.subscriptions.push(this.annotationService.getAllAnnotations(this.properties, this.pid).subscribe(annotations => {
+    this.subscriptions.push(this.annotationService.getAllAnnotations(this.pid).subscribe(annotations => {
-      this.annotations = annotations;
+      this.annotations.forEach((annotation, index) => {
-      this.annotations.forEach(annotation => {
+        if (!annotations.find(element => element.type === annotation.type && element.text === annotation.text)) {
-        annotation.urlSize = 3;
+          this.annotations.splice(index, 1);
+        }
       });
+      annotations.forEach(annotation => {
+        if (!this.annotations.find(element => element.type === annotation.type && element.text === annotation.text)) {
+          annotation.targetSize = 3;
+          this.annotationService.getAnnotationsTargets(annotation.text, annotation.type).subscribe(targets => {
+            annotation.targets = targets.filter(target => target.id !== this.pid);
+            /*for(let i = 0; i < 10; i++) {
+              annotation.targets.push(targets[0]);
+            }*/
+          });
+          this.annotations.push(annotation);
+        }
+      });
+      this.annotations = this.sort(this.annotations);
+      this.loading = false;
+    }, error => {
       this.loading = false;
     }));
   }
   
-  ngOnDestroy(): void {
+  public sort(annotations: Annotation[]): Annotation[] {
+    return annotations.sort((a, b) => {
+      if (a.type === b.type) {
+        return 1;
+      } else if (a.type === 'semantic') {
+        return -1;
+      } else if (b.type === 'semantic') {
+        return 1;
+      } else if (a.type === 'keyword') {
+        return -1;
+      } else if (b.type === 'keyword') {
+        return 1;
+      }
+    });
+  }
+  
+  public searchPid(pid: string): { [k: string]: any;} {
+    return {
+      f0: 'pid',
+      fv0: pid,
+      qf: false
+    }
+  }
+  
+  ngOnDestroy()
+    :
+    void {
     this.clearSubscriptions();
   }
   
-  public toggleAnnotation(event) {
+  public
+  
+  toggleAnnotation(event) {
     if (this.visible) {
       event.preventDefault();
     }
     this.visible = !this.visible;
   }
+  
+  open(i: number) {
+    this.annotations.forEach((annotation, index) => {
+      if(index != i) {
+        annotation.targetSize = 3;
+      } else {
+        annotation.targetSize = annotation.targets.length
+      }
+    });
+  }
 }

landingPages/annotation/annotation.css

@@ -2,7 +2,7 @@
     position: fixed;
     left: 50%;
     top: 50%;
-    z-index: 5;
+    z-index: 1000;
     padding: 19px;
     margin-left: -167px;
     margin-top: -311px;

landingPages/annotation/annotation.module.ts

@@ -2,9 +2,10 @@ import {NgModule} from "@angular/core";
 import {AnnotationComponent} from "./annotation.component";
 import {CommonModule} from "@angular/common";
 import {DragDropModule} from "@angular/cdk/drag-drop";
+import {RouterModule} from "@angular/router";
 
 @NgModule({
-    imports: [CommonModule, DragDropModule],
+  imports: [CommonModule, DragDropModule, RouterModule],
     declarations: [AnnotationComponent],
     exports: [AnnotationComponent]
 })

landingPages/annotation/annotation.service.ts

@@ -3,12 +3,18 @@ import {HttpClient} from "@angular/common/http";
 import {Observable} from "rxjs";
 import {EnvProperties} from "../../utils/properties/env-properties";
 import {map} from "rxjs/operators";
+import {properties} from "../../../../environments/environment";
+
+export interface AnnotationTarget {
+  id: string;
+  url: string;
+}
 
 export interface Annotation {
   text: string;
   type: 'semantic' | 'keyword' | 'comment';
-    urls?: string[];
+  targets?: AnnotationTarget[];
-    urlSize?: number;
+  targetSize?: number;
 }
 
 @Injectable({
@@ -21,20 +27,28 @@ export class AnnotationService {
   constructor(private http: HttpClient) {
   }
   
-    getAllAnnotations(properties: EnvProperties, source: string): Observable<Annotation[]> {
+  getAllAnnotations(source: string): Observable<Annotation[]> {
-        let url = properties.b2noteAPIURL + this.api + 'annotations?type[]=semantic&type[]=keyword&type[]=comment&format=json-ld&download=false&target-source=' + encodeURIComponent(source);
+    let url = properties.b2noteAPIURL + this.api + 'annotations?target-id=' + encodeURIComponent(source);
     return this.http.get<Annotation[]>(url).pipe(map((response: any[]) => {
       return this.parseAnnotations(response);
     }));
   }
   
+  getAnnotationsTargets(value: string, type: 'semantic' | 'keyword' | 'comment'): Observable<AnnotationTarget[]> {
+    let url = properties.b2noteAPIURL + this.api + 'annotations?value=' + encodeURIComponent(value);
+    return this.http.get<AnnotationTarget[]>(url).pipe(map((response: any[]) => {
+      return this.parseAnnotationTargets(response, type);
+    }));
+  }
+  
   private parseAnnotations(response: any[]): Annotation[] {
     let annotations: Annotation[] = [];
-        if(response && response.length > 0) {
+    if (response && response.length > 0) {
       response.forEach(value => {
+        if (value.visibility === 'public') {
           let body = value.body;
-                if(body.type === 'TextualBody') {
+          if (body.type === 'TextualBody') {
-                    if(body.purpose === 'tagging') {
+            if (body.purpose === 'tagging') {
               annotations.push({
                 text: body.value,
                 type: "keyword"
@@ -47,35 +61,50 @@ export class AnnotationService {
             }
           } else {
             let items = body.items;
-                    let urls: string[] = [];
             let text: string = null;
             items.forEach(item => {
-                        if(item.type === 'SpecificResource') {
+              if (item.type === 'TextualBody') {
-                            urls.push(item.source);
-                        } else if(item.type === 'TextualBody') {
                 text = item.value;
               }
             });
             annotations.push({
               text: text,
-                        type: "semantic",
+              type: "semantic"
-                        urls: urls
             });
           }
+        }
+      });
+    }
+    return annotations;
+  }
+  
+  private parseAnnotationTargets(response: any[], type: 'semantic' | 'keyword' | 'comment'): AnnotationTarget[] {
+    let targets: AnnotationTarget[] = [];
+    if (response && response.length > 0) {
+      response.forEach(value => {
+        if (value.visibility === 'public') {
+          let body = value.body;
+          if (body.type === 'TextualBody') {
+            if (body.purpose === 'tagging' && type === 'keyword') {
+              targets.push({
+                id: value.target.id,
+                url: value.target.source
+              });
+            } else if(type === 'comment'){
+              targets.push({
+                id: value.target.id,
+                url: value.target.source
+              });
+            }
+          } else if(type === 'semantic'){
+            targets.push({
+              id: value.target.id,
+              url: value.target.source
             });
           }
-        return annotations.sort((a, b) => {
-            if(a.type === b.type) {
-                return 0;
-            } else if (a.type === 'semantic') {
-                return -1;
-            } else if(b.type === 'semantic') {
-                return 1;
-            } else if(a.type === 'keyword') {
-                return  -1;
-            } else if(b.type === 'keyword') {
-                return  1;
         }
       });
     }
+    return  targets;
+  }
 }

landingPages/dataProvider/dataProvider.component.html

@@ -75,7 +75,7 @@
               <!-- Metrics -->
               <li *ngIf="hasMetrics" class="uk-margin-medium-top">
                 <div class="uk-text-center uk-flex uk-flex-middle uk-flex-center">
-                  <div>
+                  <div [class.uk-hidden]="!(totalViews && totalDownloads && pageViews)">
                     <metrics [pageViews]="pageViews"
                              [id]="datasourceId" [entityType]="'datasources'" [entity]="'Content Provider'"
                              [viewsFrameUrl]="viewsFrameUrl" [downloadsFrameUrl]="downloadsFrameUrl"

landingPages/project/project.component.html

@@ -386,7 +386,7 @@
               <!-- Metrics -->
               <li *ngIf="hasMetrics" class="uk-margin-medium-top">
                 <div class="uk-text-center uk-flex uk-flex-middle uk-flex-center">
-                  <div>
+                  <div [class.uk-hidden]="!(totalViews && totalDownloads && pageViews)">
                     <metrics [pageViews]="pageViews"
                              [id]="projectId" [entityType]="'projects'" [entity]="'project'"
                              [viewsFrameUrl]="viewsFrameUrl" [downloadsFrameUrl]="downloadsFrameUrl"

landingPages/project/project.component.ts

@@ -44,9 +44,9 @@ export class ProjectComponent {
   public metricsClicked: boolean;
   public viewsFrameUrl: string;
   public downloadsFrameUrl: string;
-  private totalViews: number;
+  public totalViews: number;
-  private totalDownloads: number;
+  public totalDownloads: number;
-  private pageViews: number;
+  public pageViews: number;
 
   // Statistics tab variables
   public statsClicked: boolean;

landingPages/result/resultLanding.component.html

@@ -104,7 +104,7 @@
               <li *ngIf="hasAltMetrics || hasMetrics" class="uk-margin-medium-top">
                 <div uk-grid
                      class="uk-child-width-1-3 uk-text-center uk-flex uk-flex-middle uk-flex-center uk-padding-remove-left">
-                  <div *ngIf="hasMetrics">
+                  <div *ngIf="hasMetrics" [class.uk-hidden]="!(totalViews && totalDownloads && pageViews)">
                     <metrics [pageViews]="pageViews"
                              [id]="id" [entityType]="'results'" [entity]="title"
                              [viewsFrameUrl]="viewsFrameUrl" [downloadsFrameUrl]="downloadsFrameUrl"