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

frontend/src/app/card-row/card-row.component.scss

@@ -4,5 +4,3 @@
   font-weight: bold;
   overflow-wrap: normal;
 }
-
-

frontend/src/app/germplasm-card/germplasm-card.component.html

@@ -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>
 

frontend/src/app/germplasm-card/germplasm-card.component.scss

 @import "theme";
 @import '../../styles.scss';
+
+a {
+  color: #0f6fa1;
+  text-decoration: underline;
+}
+
+a:not([href]):not([tabindex]) {
+  color: #0f6fa1;
+  cursor: pointer;
+  text-decoration: underline;
+}

frontend/src/app/germplasm-card/germplasm-card.component.ts

@@ -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;
+    }
 }

frontend/src/app/map/map.component.ts

@@ -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);
             }
         }

frontend/src/app/navbar/navbar.component.scss

@@ -24,9 +24,5 @@
 
 .dropdown-container {
   position: relative;
-  text-decoration: none;
 }
 
-.dropdown-item {
-  text-decoration: none;
-}

frontend/src/app/result-page/document/document.component.html

@@ -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">

frontend/src/app/result-page/document/document.component.scss

 
-a {
-  text-decoration: none;
-}
-
 .badge-source {
   background-color: #b54646;
   color: white;

frontend/src/app/result-page/document/document.component.spec.ts

@@ -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');
 

frontend/src/app/result-page/document/document.component.ts

@@ -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']) {

frontend/src/app/site-card/site-card.component.html

@@ -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>

frontend/src/app/site-card/site-card.component.ts

@@ -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;
                 }

frontend/src/app/study-card/study-card.component.html

@@ -221,9 +221,9 @@
       <gpds-card-table
         [headers]="[
           'Role',
-           'Name',
-           'Email',
-           'Institution'
+          'Name',
+          'Email',
+          'Institution'
         ]"
         [rows]="study.contacts">
         <ng-template let-row>

frontend/src/app/study-card/study-card.component.scss

@@ -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;
+}

frontend/src/app/study-card/study-card.component.ts

 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;
+    }
 }

frontend/src/styles.scss

@@ -10,10 +10,6 @@ $fa-font-path: '~font-awesome/fonts';
   }
 }
 
-a {
-  text-decoration: underline;
-}
-
 h3 {
   font-weight: bold;
   color: #0f6191;