Commit 00e8c0ea authored by Jérémy Destin's avatar Jérémy Destin Committed by Célia Michotey
Browse files

refractor: Swap the position of the gpds-link and the external one. Sort some...

refractor: Swap the position of the gpds-link and the external one. Sort some data display on the card. Manage the missing data in institute popover. Fix the additional information display on site card. Minor fixes. GNP-5490
parent cb407e56
......@@ -4,5 +4,3 @@
font-weight: bold;
overflow-wrap: normal;
}
......@@ -124,17 +124,17 @@
<gpds-card-row
label="Code"
[value]="germplasmGnpis.collector.instituteCode">
[value]="germplasmGnpis.collector.institute.instituteCode">
</gpds-card-row>
<gpds-card-row
label="Acronym"
[value]="germplasmGnpis.collector.acronym">
[value]="germplasmGnpis.collector.institute.acronym">
</gpds-card-row>
<gpds-card-row
label="Organisation"
[value]="germplasmGnpis.collector.organisation">
[value]="germplasmGnpis.collector.institute.organisation">
</gpds-card-row>
<gpds-card-row
......@@ -603,7 +603,6 @@
</td>
<td>{{ row.accessionNumber }}</td>
<td>{{ row.distributionStatus }}</td>
<!--<td>{{ '' }}</td>-->
</tr>
</ng-template>
......
@import "theme";
@import '../../styles.scss';
a {
color: #0f6fa1;
text-decoration: underline;
}
a:not([href]):not([tabindex]) {
color: #0f6fa1;
cursor: pointer;
text-decoration: underline;
}
......@@ -5,11 +5,11 @@ import { GnpisService } from '../gnpis.service';
import { BrapiAttributeData, BrapiGermplasmPedigree, BrapiLocation } from '../models/brapi.model';
import { Children, Germplasm, Site } from '../models/gnpis.model';
@Component( {
@Component({
selector: 'gpds-germplasm-card',
templateUrl: './germplasm-card.component.html',
styleUrls: ['./germplasm-card.component.scss']
} )
})
export class GermplasmCardComponent implements OnInit {
......@@ -46,8 +46,6 @@ export class GermplasmCardComponent implements OnInit {
ngOnInit() {
// console.log(this.route.snapshot);
// console.log(this.route);
this.germplasmId = this.route.snapshot.queryParams.id;
this.germplasmPuid = this.route.snapshot.queryParams.pui;
......@@ -70,8 +68,8 @@ export class GermplasmCardComponent implements OnInit {
const germplasmAttributes$ = this.brapiService.germplasmAttributes(germplasmId).toPromise();
germplasmAttributes$
.then(germplasmAttributes => {
if (germplasmAttributes.result) {
this.germplasmAttributes = germplasmAttributes.result.data;
if (germplasmAttributes.result.data) {
this.germplasmAttributes = germplasmAttributes.result.data.sort(this.compareAttributes);
}
});
......@@ -92,7 +90,18 @@ export class GermplasmCardComponent implements OnInit {
germplasm$
.then(germplasmGnpis => {
this.germplasmGnpis = germplasmGnpis;
this.germplasmProgeny = germplasmGnpis.children;
if (germplasmGnpis.children) {
this.germplasmProgeny = germplasmGnpis.children.sort();
}
if (germplasmGnpis.donors) {
this.germplasmGnpis.donors.sort(this.compareDonorInstitutes);
}
if (germplasmGnpis.collection) {
this.germplasmGnpis.collection.sort(this.compareCollectionPanel);
}
if (this.germplasmGnpis.panel) {
this.germplasmGnpis.panel.sort(this.compareCollectionPanel);
}
this.siteToBrapiLocation(this.germplasmGnpis.collectingSite);
this.siteToBrapiLocation(this.germplasmGnpis.originSite);
for (const site of this.germplasmGnpis.evaluationSites) {
......@@ -129,7 +138,7 @@ export class GermplasmCardComponent implements OnInit {
checkBreeder() {
return (this.germplasmGnpis.breeder)
&& (this.germplasmGnpis.breeder.institute
&& ((this.germplasmGnpis.breeder.institute && this.germplasmGnpis.breeder.institute.instituteName)
|| this.germplasmGnpis.breeder.accessionCreationDate
|| this.germplasmGnpis.breeder.accessionNumber
|| this.germplasmGnpis.breeder.registrationYear
......@@ -172,4 +181,34 @@ export class GermplasmCardComponent implements OnInit {
|| (this.germplasmGnpis.collectingSite && this.germplasmGnpis.collectingSite.siteName)
|| (this.checkCollectorInstituteObject() || this.checkCollectorInstituteFields());
}
compareDonorInstitutes(a, b) {
if (a.donorInstitute.instituteName < b.donorInstitute.instituteName) {
return -1;
}
if (a.donorInstitute.instituteName > b.donorInstitute.instituteName) {
return 1;
}
return 0;
}
compareAttributes(a, b) {
if (a.attributeName < b.attributeName) {
return -1;
}
if (a.attributeName > b.attributeName) {
return 1;
}
return 0;
}
compareCollectionPanel(a, b) {
if (a.name < b.name) {
return -1;
}
if (a.name > b.name) {
return 1;
}
return 0;
}
}
......@@ -60,7 +60,7 @@ export class MapComponent implements OnInit {
getMarkerIconUrl(site: BrapiLocation): string {
if (site.locationType === 'GermplasmInstitute site') {
if (site.locationType === 'Origin site') {
return 'assets/gpds/images/marker-icon-red.png';
}
if (site.locationType === 'Collecting site') {
......@@ -74,7 +74,7 @@ export class MapComponent implements OnInit {
removeEmptyLocations(locations: BrapiLocation[]) {
for (const location of locations) {
if (location.latitude && location.longitude) {
if (location && location.latitude && location.longitude) {
this.curatedLocationList.push(location);
}
}
......
......@@ -24,9 +24,5 @@
.dropdown-container {
position: relative;
text-decoration: none;
}
.dropdown-item {
text-decoration: none;
}
......@@ -7,16 +7,17 @@
<a class="badge badge-source mr-2" [href]="getSourceURL()" target="_blank">
{{ getSource() }}
</a>
<a class="title" *ngIf="getURL()" [href]="getURL()">
<a class="title" *ngIf="getRouterLink() && document['@type'].includes('Phenotyping Study')" [routerLink]="getRouterLink()">
{{ document["schema:name"] }}
</a>
<a class="title" *ngIf="getRouterLink() && !document['@type'].includes('Phenotyping Study')" [routerLink]="getRouterLink()" [queryParams]="getQueryParam()">
{{ document["schema:name"] }}
</a>
</h5>
<h5>
<a class="title" *ngIf="getRouterLink() && document['@type'].includes('Phenotyping Study')" [routerLink]="getRouterLink()">
(go to this {{ document["@type"] }} card)
</a>
<a class="title" *ngIf="getRouterLink() && !document['@type'].includes('Phenotyping Study')" [routerLink]="getRouterLink()" [queryParams]="getQueryParam()">
(go to this {{ document["@type"] }} card)
<a class="title" *ngIf="getURL()" [href]="getURL()" target="_blank">
(external link to this {{ document["@type"] }} card)
</a>
</h5>
<span class="text-justify description">
......
a {
text-decoration: none;
}
.badge-source {
background-color: #b54646;
color: white;
......
......@@ -71,7 +71,7 @@ describe('DocumentComponent', () => {
expect(tester.source.attr('href')).toEqual('http://dco/url');
expect(tester.title).toContainText('doc_name');
expect(tester.title.attr('href')).toEqual('http://dco/url');
expect(tester.title.nativeElement['routerLink']).toEqual('/germplasm');
expect(tester.description).toContainText('description');
......@@ -94,7 +94,7 @@ describe('DocumentComponent', () => {
tester.detectChanges();
expect(component).toBeTruthy();
expect(tester.title).toContainText('(go to this Germplasm card)');
expect(tester.title).toContainText('doc_name');
expect(tester.title.nativeElement['routerLink']).toEqual('/germplasm');
expect(component.getQueryParam().id).toEqual('g1');
......
......@@ -27,6 +27,8 @@ export class DocumentComponent implements OnInit {
return this.document['schema:url'] || '';
}
// TODO: index URGI schema:identifier like the partners
getRouterLink() {
const urgiStudy = this.document['schema:includedInDataCatalog']['schema:url'] === 'https://urgi.versailles.inra.fr';
for (const type of this.document['@type']) {
......
......@@ -28,7 +28,10 @@
<gpds-card-row
label="Status"
[value]="location.additionalInfo['Site status']">
[test]="location.additionalInfo['Site status']">
<ng-template>
{{ location.additionalInfo['Site status'] }}
</ng-template>
</gpds-card-row>
<gpds-card-row
......@@ -43,36 +46,44 @@
<gpds-card-row
label="Coordinates precision"
[value]="location.additionalInfo['Coordinates precision']">
[test]="location.additionalInfo['Coordinates precision']">
<ng-template>
{{ location.additionalInfo['Coordinates precision'] }}
</ng-template>
</gpds-card-row>
<gpds-card-row
label="Latitude"
[value]="location.latitude">
<!--[value]="formatCoordinates(location.latitude)">-->
[value]="formatCoordinates(location.latitude, 'latitude')">
</gpds-card-row>
<gpds-card-row
label="Longitude"
[value]="location.longitude">
<!--[value]="formatCoordinates(location.longitude)">-->
[value]="formatCoordinates(location.longitude, 'longitude')">
</gpds-card-row>
<gpds-card-row
label="Geographical location"
[value]="location.additionalInfo['Geographical location']">
[test]="location.additionalInfo['Geographical location']">
<ng-template>
{{ location.additionalInfo['Geographical location'] }}
</ng-template>
</gpds-card-row>
<gpds-card-row
label="Country name"
[test]="location.countryName && !location.additionalInfo['Geographical location']"
[value]="location.countryName">
[test]="location.countryName && !location.additionalInfo['Geographical location']">
<ng-template>
{{ location.countryName }}
</ng-template>
</gpds-card-row>
<gpds-card-row
label="Country code"
[test]="location.countryCode && !location.additionalInfo['Geographical location']">
[value]="location.countryCode">
<ng-template>
{{ location.countryCode }}
</ng-template>
</gpds-card-row>
<gpds-card-row
......@@ -87,32 +98,50 @@
<gpds-card-row
label="Exposure"
[value]="location.additionalInfo['Exposure']">
[test]="location.additionalInfo['Exposure']">
<ng-template>
{{ location.additionalInfo['Exposure'] }}
</ng-template>
</gpds-card-row>
<gpds-card-row
label="Topography"
[value]="location.additionalInfo['Topography']">
[test]="location.additionalInfo['Topography']">
<ng-template>
{{ location.additionalInfo['Topography'] }}
</ng-template>
</gpds-card-row>
<gpds-card-row
label="Environment type"
[value]="location.additionalInfo['Environment type']">
[test]="location.additionalInfo['Environment type']">
<ng-template>
{{ location.additionalInfo['Environment type'] }}
</ng-template>
</gpds-card-row>
<gpds-card-row
label="Distance to city"
[value]="location.additionalInfo['Distance to city']">
[test]="location.additionalInfo['Distance to city']">
<ng-template>
{{ location.additionalInfo['Distance to city'] }}
</ng-template>
</gpds-card-row>
<gpds-card-row
label="Direction from city"
[value]="location.additionalInfo['Direction from city']">
[test]="location.additionalInfo['Direction from city']">
<ng-template>
{{ location.additionalInfo['Direction from city'] }}
</ng-template>
</gpds-card-row>
<gpds-card-row
label="Comment"
[value]="location.additionalInfo['Comment']">
[test]="location.additionalInfo['Comment']">
<ng-template>
{{ location.additionalInfo['Comment'] }}
</ng-template>
</gpds-card-row>
</div>
......
......@@ -28,8 +28,7 @@ export class SiteCardComponent implements OnInit {
this.location = response.result;
this.additionalInfos = [];
if (this.location.additionalInfo) {
console.log(this.location.additionalInfo);
this.manageAdditionalInfo(KeyValueObject.fromObject(this.location.additionalInfo));
this.manageAdditionalInfo(KeyValueObject.fromObject(this.location.additionalInfo).sort());
}
this.loading = false;
}
......
......@@ -221,9 +221,9 @@
<gpds-card-table
[headers]="[
'Role',
'Name',
'Email',
'Institution'
'Name',
'Email',
'Institution'
]"
[rows]="study.contacts">
<ng-template let-row>
......
......@@ -2,3 +2,13 @@
@import '../../styles.scss';
a {
color: #0f6fa1;
text-decoration: underline;
}
a:not([href]):not([tabindex]) {
color: #0f6fa1;
cursor: pointer;
text-decoration: underline;
}
import { Component, OnInit } from '@angular/core';
import { BrapiService } from '../brapi.service';
import { ActivatedRoute } from '@angular/router';
import { BrapiGermplasm, BrapiLocation, BrapiObservationVariable, BrapiStudy, BrapiTrial } from '../models/brapi.model';
import { BrapiGermplasm, BrapiObservationVariable, BrapiStudy, BrapiTrial } from '../models/brapi.model';
import { GnpisService } from '../gnpis.service';
import { DataDiscoverySource } from '../models/data-discovery.model';
......@@ -36,14 +36,20 @@ export class StudyCardComponent implements OnInit {
study$
.then(response => {
this.study = response.result;
if (this.study.contacts) {
this.study.contacts.sort(this.compareContacts);
}
this.additionalInfos = [];
if (this.study.additionalInfo) {
this.additionalInfos = KeyValueObject.fromObject(this.study.additionalInfo);
this.additionalInfos = KeyValueObject.fromObject(this.study.additionalInfo).sort();
}
// Get study trials
this.trialsIds = this.study.trialDbIds;
if (this.study.trialDbIds) {
this.trialsIds = this.study.trialDbIds.sort();
}
this.studyDataset = [];
if (this.trialsIds && this.trialsIds !== []) {
for (const trialsId of this.trialsIds) {
......@@ -57,6 +63,9 @@ export class StudyCardComponent implements OnInit {
this.studyDataset.push(trial);
});
}
if (this.studyDataset) {
this.studyDataset.sort(this.compareTrials);
}
}
// Get study source
......@@ -65,6 +74,7 @@ export class StudyCardComponent implements OnInit {
const source$ = this.gnpisService.getSource(sourceURI);
source$
.subscribe(src => {
console.log(src);
this.studySource = src;
});
}
......@@ -74,14 +84,14 @@ export class StudyCardComponent implements OnInit {
const variable$ = this.brapiService.studyObservationVariables(studyDbId).toPromise();
variable$
.then(response => {
this.studyObservationVariables = response.result.data;
this.studyObservationVariables = response.result.data.sort(this.compareVariables);
});
this.studyGermplasms = [];
const germplasm$ = this.brapiService.studyGermplasms(studyDbId).toPromise();
germplasm$
.then(studyGermplasm => {
this.studyGermplasms = studyGermplasm.result.data;
this.studyGermplasms = studyGermplasm.result.data.sort(this.compareStudyGermplasm);
});
this.loaded = Promise.all([study$, variable$, germplasm$]);
......@@ -95,4 +105,44 @@ export class StudyCardComponent implements OnInit {
isNotURN(pui: string) {
return !(pui.substring(0, 3) === 'urn');
}
compareTrials(a, b) {
if (a.trialName < b.trialName) {
return -1;
}
if (a.trialName > b.trialName) {
return 1;
}
return 0;
}
compareStudyGermplasm(a, b) {
if (a.germplasmName < b.germplasmName) {
return -1;
}
if (a.germplasmName > b.germplasmName) {
return 1;
}
return 0;
}
compareVariables(a, b) {
if (a.observationVariableDbId < b.observationVariableDbId) {
return -1;
}
if (a.observationVariableDbId > b.observationVariableDbId) {
return 1;
}
return 0;
}
compareContacts(a, b) {
if (a.name < b.name) {
return -1;
}
if (a.name > b.name) {
return 1;
}
return 0;
}
}
......@@ -10,10 +10,6 @@ $fa-font-path: '~font-awesome/fonts';
}
}
a {
text-decoration: underline;
}
h3 {
font-weight: bold;
color: #0f6191;
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment