[Library | Trunk]: B2note annotations added on dev.
git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@58424 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
parent
4d6d459f41
commit
f2fc747a8b
|
@ -1,7 +1,7 @@
|
||||||
import {Component, Input, OnDestroy, OnInit} from "@angular/core";
|
import {Component, Input, OnDestroy, OnInit} from "@angular/core";
|
||||||
import {AnnotationService} from "./annotation.service";
|
import {Annotation, AnnotationService} from "./annotation.service";
|
||||||
import {DomSanitizer} from "@angular/platform-browser";
|
|
||||||
import {ResultLandingInfo} from "../../utils/entities/resultLandingInfo";
|
import {ResultLandingInfo} from "../../utils/entities/resultLandingInfo";
|
||||||
|
import {EnvProperties} from "../../utils/properties/env-properties";
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'b2note',
|
selector: 'b2note',
|
||||||
|
@ -37,15 +37,30 @@ import {ResultLandingInfo} from "../../utils/entities/resultLandingInfo";
|
||||||
<span>add annotation</span>
|
<span>add annotation</span>
|
||||||
</button>
|
</button>
|
||||||
</form>
|
</form>
|
||||||
|
<ul class="uk-list uk-list-divider">
|
||||||
|
<li *ngFor="let annotation of annotations.slice(0, visibleAnnotations)" uk-grid class="uk-flex uk-flex-top uk-margin-remove-left">
|
||||||
|
<div [ngClass]="annotation.type" class="uk-width-auto">{{annotation.type}}</div>
|
||||||
|
<div class="uk-width-auto">{{annotation.text}}</div>
|
||||||
|
<ul class="uk-width-expand uk-list uk-margin-remove-top" *ngIf="annotation.urls">
|
||||||
|
<li *ngFor="let url of annotation.urls.slice(0, urlSize)"><a [href]="url" target="_blank">{{url}}</a></li>
|
||||||
|
<li *ngIf="urlSize < annotation.urls.length"><a (click)="urlSize = annotation.urls.length">+ {{annotation.urls.length - urlSize}} more</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<div *ngIf="visibleAnnotations < annotations.length" class="uk-margin-medium-top uk-text-center">
|
||||||
|
<button class="uk-button uk-button-default" (click)="visibleAnnotations = (visibleAnnotations + annotationSize)">Load More</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div [class.uk-hidden]="!visible" class="widget-container">
|
<div [class.uk-hidden]="!visible" class="widget">
|
||||||
<!--Close button, should be bound to hide the widget-->
|
<div class="widget-container">
|
||||||
<button type="button" class="close" aria-label="Close" (click)="toggleAnnotation($event)">
|
<!--Close button, should be bound to hide the widget-->
|
||||||
<span aria-hidden="true">×</span>
|
<button type="button" class="close" aria-label="Close" (click)="toggleAnnotation($event)">
|
||||||
</button>
|
<span aria-hidden="true">×</span>
|
||||||
<!--The glorious iframe with the running app!-->
|
</button>
|
||||||
<iframe id="b2note_iframe" name="b2note_iframe" class="b2note-iframe">
|
<!--The glorious iframe with the running app!-->
|
||||||
</iframe>
|
<iframe id="b2note_iframe" name="b2note_iframe" class="b2note-iframe">
|
||||||
|
</iframe>
|
||||||
|
</div>
|
||||||
</div>`,
|
</div>`,
|
||||||
styleUrls: ['annotation.css']
|
styleUrls: ['annotation.css']
|
||||||
})
|
})
|
||||||
|
@ -55,17 +70,22 @@ export class AnnotationComponent implements OnInit, OnDestroy {
|
||||||
public landingInfo: ResultLandingInfo = null;
|
public landingInfo: ResultLandingInfo = null;
|
||||||
@Input()
|
@Input()
|
||||||
public id: string = null;
|
public id: string = null;
|
||||||
|
@Input()
|
||||||
|
public properties: EnvProperties;
|
||||||
public url: string = null;
|
public url: string = null;
|
||||||
public pid: string = null;
|
public pid: string = null;
|
||||||
public keywords: string[] = [];
|
public keywords: string[] = [];
|
||||||
public visible: boolean = false;
|
public visible: boolean = false;
|
||||||
|
public annotations: Annotation[] = [];
|
||||||
|
public annotationSize: number = 10;
|
||||||
|
public visibleAnnotations: number;
|
||||||
|
public urlSize: number = 3;
|
||||||
|
|
||||||
|
constructor(private annotationService: AnnotationService) {
|
||||||
constructor(private annotationService: AnnotationService,
|
|
||||||
private sanitizer: DomSanitizer) {
|
|
||||||
}
|
}
|
||||||
|
|
||||||
ngOnInit(): void {
|
ngOnInit(): void {
|
||||||
|
this.visibleAnnotations = this.annotationSize;
|
||||||
if (typeof window !== "undefined") {
|
if (typeof window !== "undefined") {
|
||||||
let id = this.id;
|
let id = this.id;
|
||||||
this.url = window.location.href;
|
this.url = window.location.href;
|
||||||
|
@ -73,20 +93,11 @@ export class AnnotationComponent implements OnInit, OnDestroy {
|
||||||
id = this.landingInfo.deletedByInferenceIds[0];
|
id = this.landingInfo.deletedByInferenceIds[0];
|
||||||
this.url = this.url.replace(this.id, id);
|
this.url = this.url.replace(this.id, id);
|
||||||
}
|
}
|
||||||
if (this.landingInfo.identifiers.size > 0) {
|
this.pid = this.url;
|
||||||
if (this.landingInfo.identifiers.get('doi')) {
|
this.annotationService.getAllAnnotations(this.properties, this.url).subscribe(annotations => {
|
||||||
this.pid = this.landingInfo.identifiers.get('doi')[0];
|
this.annotations = annotations;
|
||||||
} else {
|
console.log(this.annotations);
|
||||||
const key: string = this.landingInfo.identifiers.keys().next().value;
|
});
|
||||||
if (key) {
|
|
||||||
this.pid = this.landingInfo.identifiers.get(key)[0];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
this.pid = id;
|
|
||||||
}
|
|
||||||
console.log(this.pid);
|
|
||||||
console.log(this.url);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -1,8 +1,20 @@
|
||||||
|
.widget {
|
||||||
|
position: fixed;
|
||||||
|
z-index: 10000;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.widget-container {
|
.widget-container {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 30px;
|
left: 50%;
|
||||||
top:40%;
|
top: 50%;
|
||||||
z-index: 1050;
|
transform: translate(-50%, -50%);
|
||||||
|
/*right: 30px;
|
||||||
|
top:40%;*/
|
||||||
|
z-index: 10001;
|
||||||
padding: 19px;
|
padding: 19px;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
box-shadow: black 0 0 32px;
|
box-shadow: black 0 0 32px;
|
||||||
|
|
|
@ -1,7 +1,9 @@
|
||||||
import {NgModule} from "@angular/core";
|
import {NgModule} from "@angular/core";
|
||||||
import {AnnotationComponent} from "./annotation.component";
|
import {AnnotationComponent} from "./annotation.component";
|
||||||
|
import {CommonModule} from "@angular/common";
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
|
imports: [CommonModule],
|
||||||
declarations: [AnnotationComponent],
|
declarations: [AnnotationComponent],
|
||||||
exports: [AnnotationComponent]
|
exports: [AnnotationComponent]
|
||||||
})
|
})
|
||||||
|
|
|
@ -1,6 +1,16 @@
|
||||||
import {Injectable} from "@angular/core";
|
import {Injectable} from "@angular/core";
|
||||||
import {HttpClient} from "@angular/common/http";
|
import {HttpClient} from "@angular/common/http";
|
||||||
import {Observable} from "rxjs";
|
import {Observable} from "rxjs";
|
||||||
|
import {EnvProperties} from "../../utils/properties/env-properties";
|
||||||
|
import {map} from "rxjs/operators";
|
||||||
|
import {response} from "express";
|
||||||
|
import {el} from "@angular/platform-browser/testing/src/browser_util";
|
||||||
|
|
||||||
|
export interface Annotation {
|
||||||
|
text: string;
|
||||||
|
type: 'semantic' | 'keyword' | 'comment';
|
||||||
|
urls?: string[];
|
||||||
|
}
|
||||||
|
|
||||||
@Injectable({
|
@Injectable({
|
||||||
providedIn: "root"
|
providedIn: "root"
|
||||||
|
@ -11,9 +21,61 @@ export class AnnotationService {
|
||||||
constructor(private http: HttpClient) {
|
constructor(private http: HttpClient) {
|
||||||
}
|
}
|
||||||
|
|
||||||
getAnnotations(annotation: any): Observable<any> {
|
getAllAnnotations(properties: EnvProperties, source: string): Observable<Annotation[]> {
|
||||||
return this.http.get('https://b2note.eudat.eu/interface_main.html?recordurl_tofeed=' +
|
let url = properties.b2noteAPIURL + 'annotations?type[]=semantic&type[]=keyword&type[]=comment&format=json-ld&download=false&target-source=' + encodeURIComponent(source);
|
||||||
encodeURIComponent(annotation.get('recordurl_tofeed').value) + '&pid_tofeed='
|
return this.http.get<Annotation[]>(url).pipe(map((response: any[]) => {
|
||||||
+ encodeURIComponent(annotation.get('pid_tofeed').value));
|
return this.parseAnnotations(response);
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
|
||||||
|
private parseAnnotations(response: any[]): Annotation[] {
|
||||||
|
let annotations: Annotation[] = [];
|
||||||
|
if(response && response.length > 0) {
|
||||||
|
response.forEach(value => {
|
||||||
|
let body = value.body;
|
||||||
|
if(body.type === 'TextualBody') {
|
||||||
|
if(body.purpose === 'tagging') {
|
||||||
|
annotations.push({
|
||||||
|
text: body.value,
|
||||||
|
type: "keyword"
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
annotations.push({
|
||||||
|
text: body.value,
|
||||||
|
type: "comment"
|
||||||
|
});
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
let items = body.items;
|
||||||
|
let urls: string[] = [];
|
||||||
|
let text: string = null;
|
||||||
|
items.forEach(item => {
|
||||||
|
if(item.type === 'SpecificResource') {
|
||||||
|
urls.push(item.source);
|
||||||
|
} else if(item.type === 'TextualBody') {
|
||||||
|
text = item.value;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
annotations.push({
|
||||||
|
text: text,
|
||||||
|
type: "semantic",
|
||||||
|
urls: urls
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
|
@ -192,7 +192,7 @@
|
||||||
class="uk-margin-small-left uk-text-small uk-text-baseline uk-text-muted">Powered by OpenAIRE Open Research Graph</span>
|
class="uk-margin-small-left uk-text-small uk-text-baseline uk-text-muted">Powered by OpenAIRE Open Research Graph</span>
|
||||||
</div>
|
</div>
|
||||||
<div *ngIf=" properties.environment === 'development' && resultLandingInfo" class="uk-margin-medium-top">
|
<div *ngIf=" properties.environment === 'development' && resultLandingInfo" class="uk-margin-medium-top">
|
||||||
<b2note [id]="id"
|
<b2note [id]="id" [properties]="properties"
|
||||||
[landingInfo]="resultLandingInfo"></b2note>
|
[landingInfo]="resultLandingInfo"></b2note>
|
||||||
</div>
|
</div>
|
||||||
<!--<ul #accordions class="custom-accordion" uk-accordion>
|
<!--<ul #accordions class="custom-accordion" uk-accordion>
|
||||||
|
|
Loading…
Reference in New Issue