Commit 9f6b3a76 authored by Javi Corvi's avatar Javi Corvi
Browse files

new draft version

parent a6052ec7
Pipeline #25736 passed with stage
in 1 minute and 7 seconds
...@@ -20,7 +20,7 @@ const routes: Routes = [ ...@@ -20,7 +20,7 @@ const routes: Routes = [
{ path: 'find/:id', component: DocumentDetailComponent, { path: 'find/:id', component: DocumentDetailComponent,
children: [ children: [
{ path: '', redirectTo: 'third', pathMatch: 'full' }, { path: '', redirectTo: 'first', pathMatch: 'full' },
{ path: 'first', component: PretoxsentencesTabulatorComponent }, { path: 'first', component: PretoxsentencesTabulatorComponent },
{ path: 'second',component: FindingTabulatorComponent }, { path: 'second',component: FindingTabulatorComponent },
{ path: 'third',component: SrdomaintemplateTabulatorComponent }, { path: 'third',component: SrdomaintemplateTabulatorComponent },
......
...@@ -24,6 +24,10 @@ import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; ...@@ -24,6 +24,10 @@ import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import { SrdomainLevelComponent } from './srdomain-level/srdomain-level.component'; import { SrdomainLevelComponent } from './srdomain-level/srdomain-level.component';
import { LogoutComponent } from './logout/logout.component'; import { LogoutComponent } from './logout/logout.component';
import { HistoryTrackingComponent } from './history-tracking/history-tracking.component'; import { HistoryTrackingComponent } from './history-tracking/history-tracking.component';
import {MatProgressSpinnerModule, MatProgressBarModule} from '@angular/material'
@NgModule({ @NgModule({
declarations: [ declarations: [
AppComponent, AppComponent,
...@@ -50,7 +54,10 @@ import { HistoryTrackingComponent } from './history-tracking/history-tracking.co ...@@ -50,7 +54,10 @@ import { HistoryTrackingComponent } from './history-tracking/history-tracking.co
HttpModule, HttpModule,
MatTabsModule, MatTabsModule,
BrowserAnimationsModule, BrowserAnimationsModule,
MatToolbarModule MatToolbarModule,
MatProgressSpinnerModule,
MatProgressBarModule
], ],
providers: [LoginService, CookieService, { providers: [LoginService, CookieService, {
provide: HTTP_INTERCEPTORS, provide: HTTP_INTERCEPTORS,
......
.loader{
position: absolute;
top:0px;
right:0px;
width:100%;
height:100%;
background-color:#eceaea;
background-image:url('loader.gif');
background-size: 100px;
background-repeat:no-repeat;
background-position:center;
z-index:10000000;
opacity: 0.4;
filter: alpha(opacity=40);
}
.FixedHeightContainer
{
}
.brat_div
{
overflow:auto;
}
\ No newline at end of file
...@@ -56,11 +56,10 @@ ...@@ -56,11 +56,10 @@
</div> </div>
</div> </div>
<div id="data2" class="w3-container"> <!-- <mat-spinner></mat-spinner>
<div id="data1" data-ng-init="clear()"> <div id="loadingDiv8" class="loader"></div> -->
</div>
</div>
<div id="commentpopup"></div>
<!-- <nav class="navbar navbar-light bg-light"> <!-- <nav class="navbar navbar-light bg-light">
...@@ -89,14 +88,17 @@ ...@@ -89,14 +88,17 @@
<a href="#data2" style="text-decoration:none;cursor: pointer;" data-toggle="collapse"> <a href="#data2" style="text-decoration:none;cursor: pointer;" data-toggle="collapse">
<i class="fa fa-angle-down" style="color:black;padding: 10px 30px; font-size: 3rem;" title="Minimize Evidence"></i> <i class="fa fa-angle-down" style="color:black;padding: 10px 30px; font-size: 3rem;" title="Minimize Evidence"></i>
</a> </a>
<a (click)="clear()" style="text-decoration:none;cursor: pointer;"> <!-- <a (click)="clear()" style="text-decoration:none;cursor: pointer;">
<i class="fa fa-eraser" style="color:black;padding: 10px 30px; font-size: 2rem;" title="Clear Evidence"></i> <i class="fa fa-eraser" style="color:black;padding: 10px 30px; font-size: 2rem;" title="Clear Evidence"></i>
</a> </a> -->
<!-- <a title="Export Findings" (click)="exportDocument" download="download.json"> <!-- <a title="Export Findings" (click)="exportDocument" download="download.json">
<i class="fa fa-file-export" style="color:black;padding: 10px 30px; font-size: 2rem;"></i> <i class="fa fa-file-export" style="color:black;padding: 10px 30px; font-size: 2rem;"></i>
</a> --> </a> -->
<a (click)="getAllEvidence()" style="text-decoration:none;cursor: pointer;"> <!-- <a (click)="getAllEvidence()" style="text-decoration:none;cursor: pointer;">
<i class="fa fa-eye" style="color:black;padding: 10px 30px; font-size: 2rem;" title="Show All Evidence"> </i> <i class="fa fa-eye" style="color:black;padding: 10px 30px; font-size: 2rem;" title="Show All Evidence"> </i>
</a> -->
<a (click)="findDocumentText()" style="text-decoration:none;cursor: pointer;">
<i class="fa fa-eye" style="color:black;padding: 10px 30px; font-size: 2rem;" title="Show Plain Text"> </i>
</a> </a>
<a (click)="exportDocument()" style="text-decoration:none;cursor: pointer;"> <a (click)="exportDocument()" style="text-decoration:none;cursor: pointer;">
<i class="fa fa-download" style="color:black;padding: 10px 30px; font-size: 2rem;" title="Export Findings"> </i> <i class="fa fa-download" style="color:black;padding: 10px 30px; font-size: 2rem;" title="Export Findings"> </i>
...@@ -104,7 +106,12 @@ ...@@ -104,7 +106,12 @@
<a routerLink="./tracking" style="text-decoration:none;cursor: pointer;"> <a routerLink="./tracking" style="text-decoration:none;cursor: pointer;">
<i class="fa fa-history" style="color:black;padding: 10px 30px; font-size: 2rem;" title="History changes"> </i> <i class="fa fa-history" style="color:black;padding: 10px 30px; font-size: 2rem;" title="History changes"> </i>
</a> </a>
<div id="data2">
<div id="loadingDiv"></div>
<div id="data1" data-ng-init="clear()">
</div>
</div>
<div id="commentpopup"></div>
<!-- <a mat-tab-link md-align-tabs="right" style="padding-left: 650px;" <!-- <a mat-tab-link md-align-tabs="right" style="padding-left: 650px;"
routerLink="./tracking" routerLink="./tracking"
routerLinkActive #rla="routerLinkActive" routerLinkActive #rla="routerLinkActive"
...@@ -174,6 +181,9 @@ ...@@ -174,6 +181,9 @@
<app-srdomaintemplate-tabulator [tableData]=tableDataSRDomainTemplate (rowClickEventSRDomainTemplateEvidence)="rowClickSRDomainTemplateEvidence($event)" (rowClickExportSRDomainEvent)="setExportSRDomain($event)"></app-srdomaintemplate-tabulator> <app-srdomaintemplate-tabulator [tableData]=tableDataSRDomainTemplate (rowClickEventSRDomainTemplateEvidence)="rowClickSRDomainTemplateEvidence($event)" (rowClickExportSRDomainEvent)="setExportSRDomain($event)"></app-srdomaintemplate-tabulator>
</div> --> </div> -->
</div> </div>
<!-- <div> <!-- <div>
<app-pretoxsentences-tabulator [columnNames]=columnNamesPretoxSentences [tableData]=tableDataPretoxSentences (rowClickEventFinding)="rowClick($event)" (rowClickEvent)="rowClickSentence($event)" (rowClickAcceptFindingEvent)="acceptFinding($event)" (rowClickRejectFindingEvent)="rejectFinding($event)" (rowClickExportFindingEvent)="setExportFinding($event)">></app-pretoxsentences-tabulator> <app-pretoxsentences-tabulator [columnNames]=columnNamesPretoxSentences [tableData]=tableDataPretoxSentences (rowClickEventFinding)="rowClick($event)" (rowClickEvent)="rowClickSentence($event)" (rowClickAcceptFindingEvent)="acceptFinding($event)" (rowClickRejectFindingEvent)="rejectFinding($event)" (rowClickExportFindingEvent)="setExportFinding($event)">></app-pretoxsentences-tabulator>
</div> --> </div> -->
......
...@@ -8,12 +8,14 @@ import { Finding } from '../finding'; ...@@ -8,12 +8,14 @@ import { Finding } from '../finding';
import { Annotation } from '../annotation'; import { Annotation } from '../annotation';
import { environment } from './../../environments/environment'; import { environment } from './../../environments/environment';
import {MatToolbarModule} from '@angular/material/toolbar'; import {MatToolbarModule} from '@angular/material/toolbar';
import { Router } from '@angular/router'; import { Router } from '@angular/router';
//brat //brat
declare var head: any; declare var head: any;
declare var Util: any; declare var Util: any;
declare var Visualizer: any;
var displaySpanComment = function (evt, target, spanId, spanType, mods, spanText, commentText, commentType, normalizations) { var displaySpanComment = function (evt, target, spanId, spanType, mods, spanText, commentText, commentType, normalizations) {
var left = evt.clientX + "px"; var left = evt.clientX + "px";
...@@ -159,36 +161,68 @@ export class DocumentDetailComponent implements OnInit { ...@@ -159,36 +161,68 @@ export class DocumentDetailComponent implements OnInit {
this.navLinks = [ this.navLinks = [
{ {
label: 'Sentence Level', label: 'Relevant Sentences',
link: './first', link: './first',
index: 0 index: 0
}, { }/*, {
label: 'Findings Level', label: 'Findings Level',
link: './second', link: './second',
index: 1 index: 1
}, { }*/, {
label: 'SR-Domain Level', label: 'Findings',
link: './third', link: './third',
index: 2 index: 1
} }
]; ];
this.nextStatus = ['DRAFT', 'IN_PROGRESS', 'FINISHED']; this.nextStatus = ['DRAFT', 'IN_PROGRESS', 'FINISHED'];
; ;
}
loadBratVisualizer():void{
const bratLocation = environment.bratUrl;
//const bratLocation = 'http://10.32.6.2:8001';
head.js(
// External libraries
bratLocation + '/client/lib/jquery.min.js',
bratLocation + '/client/lib/jquery.svg.min.js',
bratLocation + '/client/lib/jquery.svgdom.min.js',
// brat helper modules
bratLocation + '/client/src/configuration.js',
bratLocation + '/client/src/util.js',
bratLocation + '/client/src/annotation_log.js',
bratLocation + '/client/lib/webfont.js',
// brat modules
bratLocation + '/client/src/dispatcher.js',
bratLocation + '/client/src/url_monitor.js',
bratLocation + '/client/src/visualizer.js'
);
} }
// ngOnInit() { // ngOnInit() {
// this.getDocument(); // this.getDocument();
// } // }
loaded(): void {
alert('loaded');
var loading = document.getElementById('loadingDiv');
loading.style.display='none';
}
ngOnInit(): void { ngOnInit(): void {
this.router.events.subscribe((res) => { this.router.events.subscribe((res) => {
this.activeLinkIndex = this.navLinks.indexOf(this.navLinks.find(tab => tab.link === '.' + this.router.url)); this.activeLinkIndex = this.navLinks.indexOf(this.navLinks.find(tab => tab.link === '.' + this.router.url));
}); });
this.getDocument(); this.getDocument();
this.getAllEvidence();
} }
save(): void { save(): void {
this.documentService.updateDocument(this.document) this.documentService.updateDocument(this.document)
.subscribe(() => this.goBack()); .subscribe(() => this.goBack());
...@@ -201,26 +235,26 @@ export class DocumentDetailComponent implements OnInit { ...@@ -201,26 +235,26 @@ export class DocumentDetailComponent implements OnInit {
.subscribe(document => { .subscribe(document => {
this.document = document; this.document = document;
this.setNextStatus(this.document.status); this.setNextStatus(this.document.status);
var data = []; //var data = [];
var data_relevant_sentences = []; var data_relevant_sentences = [];
document.findings.forEach(find => { // document.findings.forEach(find => {
data.push({ // data.push({
id : find.findingId, // id : find.findingId,
finding: find.finding != null ? find.finding.value : '', // finding: find.finding != null ? find.finding.value : '',
study_testcd: find.study_testcd != null ? find.study_testcd.value : '', // study_testcd: find.study_testcd != null ? find.study_testcd.value : '',
manifestation_finding: find.manifestation_finding != null ? find.manifestation_finding.value : '', // manifestation_finding: find.manifestation_finding != null ? find.manifestation_finding.value : '',
study_domain: find.study_domain != null ? find.study_domain.value : '', // study_domain: find.study_domain != null ? find.study_domain.value : '',
specimen: find.specimen != null ? find.specimen.value : '', // specimen: find.specimen != null ? find.specimen.value : '',
sex: find.sex != null ? find.sex.value : '', // sex: find.sex != null ? find.sex.value : '',
dose: find.dose != null ? find.dose.value : '', // dose: find.dose != null ? find.dose.value : '',
group: find.group != null ? find.group.value : '', // group: find.group != null ? find.group.value : '',
is_trf: find.is_treatment_related != null ? find.is_treatment_related.value : '' // is_trf: find.is_treatment_related != null ? find.is_treatment_related.value : ''
}); // });
}); // });
//alert(data); //alert(data);
//alert(JSON.stringify(data)); //alert(JSON.stringify(data));
this.tableData = data; //this.tableData = data;
//this.clear(); //this.clear();
//alert(JSON.stringify(document.findings)); //alert(JSON.stringify(document.findings));
//var j = JSON.parse('{ text:' + document.text + '}'); //var j = JSON.parse('{ text:' + document.text + '}');
...@@ -338,39 +372,136 @@ export class DocumentDetailComponent implements OnInit { ...@@ -338,39 +372,136 @@ export class DocumentDetailComponent implements OnInit {
findingSelected(finding): void { findingSelected(finding): void {
this.documentService.findingSelected(this.document.documentId, finding) this.documentService.findingSelected(this.document.documentId, finding)
.subscribe(text => { .subscribe(text => {
this.docData = text; var loading = document.getElementById('loadingDiv');
console.log(this.docData); //loading.style.display='block';
loading.addEventListener("load", this.loaded);
this.docData = text;
//console.log(this.docData);
// console.log(JSON.parse(this.docData)); // console.log(JSON.parse(this.docData));
document.getElementById('data2').className = 'collapse show'; document.getElementById('data2').className = 'collapse show';
document.getElementById('data1').innerHTML = ''; document.getElementById('data1').innerHTML = '';
document.getElementById('data1').className = ''; document.getElementById('data1').className = '';
document.getElementById('loadingDiv').className = 'loader';
var j = JSON.parse(this.docData); var j = JSON.parse(this.docData);
this.loadBratVisualizer();
head.ready( function() { head.ready( function() {
const dispatcher = Util.embed('data1' , DocumentDetailComponent.collData, j, DocumentDetailComponent.webFontURLs); const dispatcher = Util.embed('data1' , DocumentDetailComponent.collData, j, DocumentDetailComponent.webFontURLs);
dispatcher.on('displaySpanComment', displaySpanComment); dispatcher.on('displaySpanComment', displaySpanComment);
dispatcher.on('hideComment', hideComment); dispatcher.on('hideComment', hideComment);
setTimeout(() => {
document.getElementById('loadingDiv').className = '';
}, 4000);
}); });
}); });
} }
pretoxSentenceSelected(pretoxSentence): void { pretoxSentenceSelected(pretoxSentence): void {
this.documentService.pretoxSentenceSelected(this.document.documentId, pretoxSentence) this.documentService.pretoxSentenceSelected(this.document.documentId, pretoxSentence)
.subscribe(text => { .subscribe(text => {
this.docData = text; this.docData = text;
console.log(this.docData); //console.log(this.docData);
// console.log(JSON.parse(this.docData)); // console.log(JSON.parse(this.docData));
document.getElementById('data2').className = 'collapse show'; document.getElementById('data2').className = 'collapse show';
document.getElementById('data1').innerHTML = ''; document.getElementById('data1').innerHTML = '';
document.getElementById('data1').className = ''; document.getElementById('data1').className = '';
document.getElementById('loadingDiv').className = 'loader';
var j = JSON.parse(this.docData); var j = JSON.parse(this.docData);
this.loadBratVisualizer();
head.ready( function() { head.ready( function() {
const dispatcher = Util.embed('data1' , DocumentDetailComponent.collData, j, DocumentDetailComponent.webFontURLs); const dispatcher = Util.embed('data1' , DocumentDetailComponent.collData, j, DocumentDetailComponent.webFontURLs);
//dispatcher.post('resetData');
//dispatcher.post('collectionChanged');
//dispatcher.post('triggerRender');
dispatcher.on('displaySpanComment', displaySpanComment); dispatcher.on('displaySpanComment', displaySpanComment);
dispatcher.on('hideComment', hideComment); dispatcher.on('hideComment', hideComment);
setTimeout(() => {
document.getElementById('loadingDiv').className = '';
}, 4000);
}); });
}); });
} }
findDocumentText(): void {
this.documentService.findDocumentText(this.document.documentId)
.subscribe(text => {
this.docData = text;
//console.log(this.docData);
document.getElementById('data2').className = 'collapse show';
document.getElementById('data1').innerHTML = '';
document.getElementById('data1').className = '';
document.getElementById('loadingDiv').className = 'loader';
var j = JSON.parse(this.docData);
this.loadBratVisualizer();
head.ready( function() {
const dispatcher = Util.embed('data1' , DocumentDetailComponent.collData, j, DocumentDetailComponent.webFontURLs);
dispatcher.on('displaySpanComment', displaySpanComment);
dispatcher.on('hideComment', hideComment);
setTimeout(() => {
document.getElementById('loadingDiv').className = '';
}, 4000);
});
});
}
getAllEvidence() {
const id = +this.route.snapshot.paramMap.get('id');
//this.documentService.getAllEvidence(this.document.documentId)
this.documentService.getAllEvidence(id)
.subscribe(text => {
this.docData = text;
//console.log(this.docData);
// console.log(JSON.parse(this.docData));
document.getElementById('data2').className = 'collapse show';
document.getElementById('data1').innerHTML = '';
document.getElementById('data1').className = '';
document.getElementById('loadingDiv').className = 'loader';
var j = JSON.parse(this.docData);
this.loadBratVisualizer();
head.ready( function() {
const dispatcher = Util.embed('data1' , DocumentDetailComponent.collData, j, DocumentDetailComponent.webFontURLs);
dispatcher.on('displaySpanComment', displaySpanComment);
dispatcher.on('hideComment', hideComment);
setTimeout(() => {
document.getElementById('loadingDiv').className = '';
}, 4000);
});
});
}
getSentencesEvidence() {
const id = +this.route.snapshot.paramMap.get('id');
//this.documentService.getAllEvidence(this.document.documentId)
this.documentService.getSentencesEvidence(id)
.subscribe(text => {
this.docData = text;
//console.log(this.docData);
// console.log(JSON.parse(this.docData));
document.getElementById('data2').className = 'collapse show';
document.getElementById('data1').innerHTML = '';
document.getElementById('data1').className = '';
document.getElementById('loadingDiv').className = 'loader';
var j = JSON.parse(this.docData);
this.loadBratVisualizer();
head.ready( function() {
const dispatcher = Util.embed('data1' , DocumentDetailComponent.collData, j, DocumentDetailComponent.webFontURLs);
dispatcher.on('displaySpanComment', displaySpanComment);
dispatcher.on('hideComment', hideComment);
document.getElementById('data2').className = 'FixedHeightContainer';
document.getElementById('data1').className = 'brat_div';
setTimeout(() => {
document.getElementById('loadingDiv').className = '';
}, 4000);
});
});
}
setExportSRDomain(data) { setExportSRDomain(data) {
const id = +this.route.snapshot.paramMap.get('id'); const id = +this.route.snapshot.paramMap.get('id');
//alert(data); //alert(data);
...@@ -426,28 +557,18 @@ export class DocumentDetailComponent implements OnInit { ...@@ -426,28 +557,18 @@ export class DocumentDetailComponent implements OnInit {
} }
getAllEvidence() {
const id = +this.route.snapshot.paramMap.get('id');
this.documentService.getAllEvidence(this.document.documentId)
.subscribe(text => {
this.docData = text;
console.log(this.docData);
// console.log(JSON.parse(this.docData));
document.getElementById('data2').className = 'collapse show';
document.getElementById('data1').innerHTML = '';
document.getElementById('data1').className = '';
var j = JSON.parse(this.docData);
head.ready( function() {
const dispatcher = Util.embed('data1' , DocumentDetailComponent.collData, j, DocumentDetailComponent.webFontURLs);
dispatcher.on('displaySpanComment', displaySpanComment);
dispatcher.on('hideComment', hideComment);
});
});
}
onActivate(componentReference) { onActivate(componentReference) {
console.log(componentReference) console.log(componentReference)
componentReference.activation(this.document); componentReference.activation(this.document);
if(componentReference.constructor.name=='PretoxsentencesTabulatorComponent'){
this.getSentencesEvidence();
}else if(componentReference.constructor.name=='SrdomaintemplateTabulatorComponent'){
this.getAllEvidence();
}else if(componentReference.constructor.name=='FindingTabulatorComponent'){
this.getAllEvidence();
}
//Below will subscribe to the searchItem emitter //Below will subscribe to the searchItem emitter
if(componentReference.rowClickEventFinding!=undefined){ if(componentReference.rowClickEventFinding!=undefined){
componentReference.rowClickEventFinding.subscribe((data) => { componentReference.rowClickEventFinding.subscribe((data) => {
......
...@@ -117,6 +117,17 @@ export class DocumentService { ...@@ -117,6 +117,17 @@ export class DocumentService {
catchError(this.handleError<string>(`getFinding id=${finding.findingId}`)) catchError(this.handleError<string>(`getFinding id=${finding.findingId}`))
); );
} }
/** GET Snipped of the full text with no annotations */
findDocumentText(id: number): Observable<string> {
const url = `${this.documentsUrl}${id}/text/`;
return this.http.get(url , {responseType: 'text'}).pipe(
tap(_ => this.log(`fetched text id=${id}`)),
catchError(this.handleError<string>(`getText id=${id}`))
);
}
/** GET Snipped of findings selected just in case is needed, is not complete only the calls againt rest api is done*/ /** GET Snipped of findings selected just in case is needed, is not complete only the calls againt rest api is done*/
findingsSelected(id: number, finding: Finding): Observable<string> { findingsSelected(id: number, finding: Finding): Observable<string> {
...@@ -137,6 +148,14 @@ export class DocumentService { ...@@ -137,6 +148,14 @@ export class DocumentService {
); );
} }
/** GET Snipped of sentences evidence */
getSentencesEvidence(id: number): Observable<string> {
const url = `${this.documentsUrl}${id}/evidence/sentences`;
return this.http.get(url , {responseType: 'text'}).pipe(
tap(_ => this.log(`fetched all sentences evidence id=${id}`)),
catchError(this.handleError<string>(`getSentencesEvidence id=${id}`))
);
}
pretoxSentenceSelected(id: number, pretoxSentence: Annotation): Observable<string> {