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

refactor: Change the navbar logo to URGI logo. Change the links on the navbar....

refactor: Change the navbar logo to URGI logo. Change the links on the navbar. Add logo on germplasm and site cards and use GnpIS logo for GnpIS source.  Minor fixes. GNP-5490
parent 77d0f51b
......@@ -21,17 +21,19 @@ logging.level:
gpds:
elasticsearch-alias-template:
gnpis_{source}_{documentType}_5432_scratchy-group{groupId}
gnpis_{source}_{documentType}_5432_krusty-group{groupId}
elasticsearch-xref-index-name:
urgi_xref
urgi_xref_dev
cropOntology-repository-url:
https://urgi.versailles.inra.fr/files/ephesis/trait-ontology/data_16.3/ontology-repository.json
# TODO: Remove this and store at document generation directly (in BrAPI `observationVariable.documentationURL` field)
cropOntology-portal-link:
https://urgi.versailles.inra.fr/ephesis/ephesis/ontologyportal.do#termIdentifier=
gnpis-legacy-url:
https://urgi.versailles.inra.fr/
siregal-files-url:
/files/siregal/images/
# Provides access to user group WS used to query private data ES aliases
security-user-group-ws-url:
......
......@@ -40,7 +40,8 @@
"@id": "https://urgi.versailles.inra.fr",
"schema:identifier": "URGI",
"schema:name": "URGI GnpIS",
"schema:url": "https://urgi.versailles.inra.fr"
"schema:url": "https://urgi.versailles.inra.fr",
"schema:image": "./logos/GnpIS.png"
},
{
"@type": "schema:DataCatalog",
......
......@@ -9,11 +9,7 @@ export const routes: Routes = [
{ path: 'studies/:id', component: StudyCardComponent },
{ path: 'sites/:id', component: SiteCardComponent },
{ path: '', component: ResultPageComponent },
{
path: 'germplasm',
component: GermplasmCardComponent,
runGuardsAndResolvers: 'paramsOrQueryParamsChange'
}
{ path: 'germplasm', component: GermplasmCardComponent }
];
@NgModule({
......
<gpds-navbar></gpds-navbar>
<div class="alert alert-warning text-center mb-4" role="alert">
This is a <b>beta</b> application. Please <a href="mailto:urgi-contact@inra.fr" class="alert-link" style="text-decoration: underline">contact us</a> for any comments
</div>
<div class="container">
<gpds-error></gpds-error>
<router-outlet></router-outlet>
......
<ng-container *ngIf="test && (value === undefined || value)">
<ng-container *ngIf="(test && value === undefined) || (value)">
<div class="row row-sep">
<div class="col-4 field my-2">
{{ label }}
......
......@@ -6,10 +6,6 @@ label {
}
}
.nav-link {
text-decoration: none;
}
.nav-tabs {
.nav-link.active {
font-weight: bold;
......
......@@ -220,6 +220,29 @@
[value]="germplasmGnpis.germplasmPUI">
</gpds-card-row>
<gpds-card-row
label="Source"
[test]="germplasmSource">
<ng-template>
<a target="_blank"
[href]="germplasmSource['schema:url']">
<img [src]="germplasmSource['schema:image']" alt="Germplasm source image"/>
</a>
</ng-template>
</gpds-card-row>
<gpds-card-row
label="Data source"
[test]="germplasmGnpis.documentationURL">
<ng-template>
<a target="_blank" [href]="germplasmGnpis.documentationURL">
Link to this study on source
</a>
</ng-template>
</gpds-card-row>
<gpds-card-row
label="Accession synonyms"
[test]="germplasmGnpis.synonyms && germplasmGnpis.synonyms.length > 0">
......@@ -452,7 +475,7 @@
</gpds-card-section>
<gpds-card-section
header="Donation"
header="Donor"
[test]="germplasmGnpis.donors && germplasmGnpis.donors.length > 0">
<ng-template>
<gpds-card-table
......@@ -532,7 +555,7 @@
</gpds-card-section>
<gpds-card-section
header="Distribution"
header="Distributor"
[test]="germplasmGnpis.distributors && germplasmGnpis.distributors.length>0">
<ng-template>
......
......@@ -16,6 +16,7 @@ import { CardTableComponent } from '../card-table/card-table.component';
import { MapComponent } from '../map/map.component';
import { BrapiGermplasmAttributes, BrapiGermplasmPedigree, BrapiResult, BrapiSibling } from '../models/brapi.model';
import { Donor, Germplasm, GermplasmInstitute, GermplasmSet, Institute, Site } from '../models/gnpis.model';
import { DataDiscoverySource } from '../models/data-discovery.model';
import {
BrapiGermplasmAttributes,
BrapiGermplasmPedigree,
......@@ -57,7 +58,8 @@ describe('GermplasmCardComponent', () => {
const gnpisService = jasmine.createSpyObj(
'GnpisService', [
'germplasm',
'germplasmByPuid'
'germplasmByPuid',
'getSource'
]
);
......@@ -200,6 +202,15 @@ describe('GermplasmCardComponent', () => {
population: [gnpisGermplasmSet]
};
const source: DataDiscoverySource = {
'@id': 'src1',
'@type': ['schema:DataCatalog'],
'schema:identifier': 'srcId',
'schema:name': 'source1',
'schema:url': 'srcUrl',
'schema:image': null
};
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [RouterTestingModule, NgbPopoverModule, MomentModule],
......@@ -228,6 +239,7 @@ describe('GermplasmCardComponent', () => {
gnpisService.germplasm.and.returnValue(of(germplasmTest));
gnpisService.germplasmByPuid.and.returnValue(of(germplasmTest));
gnpisService.getSource.and.returnValue(of(source));
/*brapiService.germplasmProgeny.and.returnValue(of(brapiGermplasmProgeny));*/
brapiService.germplasmPedigree.and.returnValue(of(brapiGermplasmPedigree));
brapiService.germplasmAttributes.and.returnValue(of(brapiGermplasmAttributes));
......@@ -244,8 +256,8 @@ describe('GermplasmCardComponent', () => {
expect(tester.cardHeader[1]).toContainText('Holding');
expect(tester.cardHeader[2]).toContainText('Collecting');
expect(tester.cardHeader[3]).toContainText('Breeder');
expect(tester.cardHeader[4]).toContainText('Donation');
expect(tester.cardHeader[5]).toContainText('Distribution');
expect(tester.cardHeader[4]).toContainText('Donor');
expect(tester.cardHeader[5]).toContainText('Distributor');
expect(tester.cardHeader[6]).toContainText('Evaluation Data');
});
}));
......
......@@ -4,6 +4,7 @@ import { BrapiService } from '../brapi.service';
import { GnpisService } from '../gnpis.service';
import { BrapiAttributeData, BrapiGermplasmPedigree, BrapiLocation } from '../models/brapi.model';
import { Children, Germplasm, Site } from '../models/gnpis.model';
import { DataDiscoverySource } from '../models/data-discovery.model';
@Component({
selector: 'gpds-germplasm-card',
......@@ -35,6 +36,7 @@ export class GermplasmCardComponent implements OnInit {
germplasmLocations: BrapiLocation[] = [];
germplasmId: string;
germplasmPuid: string;
germplasmSource: DataDiscoverySource;
IMAGES_ACCESSION_URL = 'https://urgi.versailles.inra.fr/files/siregal/images/accession/';
IMAGES_INSTITUTION_URL = 'https://urgi.versailles.inra.fr/files/siregal/images//institution/';
IMAGES_BRC_URL = 'https://urgi.versailles.inra.fr/files/siregal/images/grc/inra_brc_en.png';
......@@ -90,36 +92,73 @@ export class GermplasmCardComponent implements OnInit {
germplasm$
.then(germplasmGnpis => {
this.germplasmGnpis = germplasmGnpis;
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) {
this.siteToBrapiLocation(site);
}
// Get germplasm source
const sourceURI = germplasmGnpis['schema:includedInDataCatalog'];
this.getGermplasmSource(sourceURI);
this.reformatData(germplasmGnpis);
});
} else {
germplasm$ = this.gnpisService.germplasmByPuid(pui).toPromise();
germplasm$
.then(germplasmGnpis => {
this.germplasmGnpis = germplasmGnpis;
// Get germplasm source
const sourceURI = germplasmGnpis['schema:includedInDataCatalog'];
this.getGermplasmSource(sourceURI);
this.reformatData(germplasmGnpis);
});
}
return germplasm$;
}
// TODO Remove the condition when the field includedInDataCatalog will be added to URGI study.
getGermplasmSource(sourceURI: string) {
if (sourceURI) {
const source$ = this.gnpisService.getSource(sourceURI);
source$
.subscribe(src => {
this.germplasmSource = src;
});
} else {
const urgiURI = 'https://urgi.versailles.inra.fr';
const source$ = this.gnpisService.getSource(urgiURI);
source$
.subscribe(src => {
this.germplasmSource = src;
});
}
}
reformatData(germplasmGnpis) {
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);
}
if (this.germplasmGnpis.collectingSite) {
this.siteToBrapiLocation(this.germplasmGnpis.collectingSite);
}
if (this.germplasmGnpis.originSite) {
this.siteToBrapiLocation(this.germplasmGnpis.originSite);
}
if (this.germplasmGnpis.evaluationSites && this.germplasmGnpis.evaluationSites.length > 0) {
for (const site of this.germplasmGnpis.evaluationSites) {
this.siteToBrapiLocation(site);
}
}
}
siteToBrapiLocation(site: Site) {
if (site.siteId && site.latitude && site.longitude) {
if (site && site.siteId && site.latitude && site.longitude) {
this.germplasmLocations.push({
locationDbId: site.siteId,
locationName: site.siteName,
......
......@@ -20,7 +20,6 @@ export class MapComponent implements OnInit {
this.removeEmptyLocations(this.locations);
if (this.curatedLocationList.length > 0) {
const container = L.DomUtil.get('map');
const map = L.map('map');
// initialize map centered on the first site
......
<nav class="navbar navbar-expand-md navbar-dark py-0 mb-5">
<nav class="navbar navbar-expand-md navbar-dark py-0 mb-4">
<div class="container px-0">
<a class="navbar-brand d-flex align-items-center mr-0 px-2" routerLink="/">
<img src="assets/logo.png" alt="Logo" title="{{ navbar.title }}" height="60px"/>
......
......@@ -16,6 +16,27 @@
<ng-template>
<div class="card-body card-section-body">
<gpds-card-row
label="Source"
[test]="location">
<ng-template>
<a target="_blank"
[href]="locationSource['schema:url']">
<img [src]="locationSource['schema:image']" alt="Location source image"/>
</a>
</ng-template>
</gpds-card-row>
<gpds-card-row
label="Data source"
[test]="location && location.documentationURL">
<ng-template>
<a target="_blank" [href]="location.documentationURL">
Link to this study on {{ location["schema:identifier"] }}
</a>
</ng-template>
</gpds-card-row>
<gpds-card-row
label="Abbreviation"
[value]="location.abbreviation">
......
......@@ -10,6 +10,8 @@ import { CardRowComponent } from '../card-row/card-row.component';
import { LoadingSpinnerComponent } from '../loading-spinner/loading-spinner.component';
import { CardTableComponent } from '../card-table/card-table.component';
import { CardSectionComponent } from '../card-section/card-section.component';
import { DataDiscoverySource } from '../models/data-discovery.model';
import { GnpisService } from '../gnpis.service';
import { MockComponent } from 'ng-mocks';
import { XrefsComponent } from '../xrefs/xrefs.component';
......@@ -18,6 +20,9 @@ describe('SiteCardComponent', () => {
const brapiService = jasmine.createSpyObj(
'BrapiService', ['location']
);
const gnpisService = jasmine.createSpyObj(
'GnpisService', ['getSource']
);
const response: BrapiResult<BrapiLocation> = {
metadata: null,
result: {
......@@ -47,6 +52,15 @@ describe('SiteCardComponent', () => {
}
};
const source: DataDiscoverySource = {
'@id': 'src1',
'@type': ['schema:DataCatalog'],
'schema:identifier': 'srcId',
'schema:name': 'source1',
'schema:url': 'srcUrl',
'schema:image': null
};
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [
......@@ -56,6 +70,7 @@ describe('SiteCardComponent', () => {
],
providers: [
{ provide: BrapiService, useValue: brapiService },
{ provide: GnpisService, useValue: gnpisService },
{
provide: ActivatedRoute,
useValue: {
......@@ -76,6 +91,7 @@ describe('SiteCardComponent', () => {
const fixture = TestBed.createComponent(SiteCardComponent);
const component = fixture.componentInstance;
brapiService.location.and.returnValues(of(response));
gnpisService.getSource.and.returnValue(of(source));
fixture.detectChanges();
const element = fixture.nativeElement;
expect(element.querySelector('h3').textContent).toBe(' Site: site1 ');
......
......@@ -3,6 +3,8 @@ import { BrapiService } from '../brapi.service';
import { ActivatedRoute } from '@angular/router';
import { BrapiLocation } from '../models/brapi.model';
import { KeyValueObject } from '../utils';
import { DataDiscoverySource } from '../models/data-discovery.model';
import { GnpisService } from '../gnpis.service';
@Component({
selector: 'gpds-site-card',
......@@ -12,11 +14,11 @@ import { KeyValueObject } from '../utils';
export class SiteCardComponent implements OnInit {
location: BrapiLocation;
locationSource: DataDiscoverySource;
additionalInfos: KeyValueObject[];
loading = true;
constructor(private brapiService: BrapiService, private route: ActivatedRoute) {
constructor(private brapiService: BrapiService, private gnpisService: GnpisService, private route: ActivatedRoute) {
}
ngOnInit() {
......@@ -30,6 +32,22 @@ export class SiteCardComponent implements OnInit {
if (this.location.additionalInfo) {
this.manageAdditionalInfo(KeyValueObject.fromObject(this.location.additionalInfo).sort());
}
const sourceURI = location['schema:includedInDataCatalog'];
// TODO Remove the condition when the field includedInDataCatalog will be added to URGI study.
if (sourceURI) {
const source$ = this.gnpisService.getSource(sourceURI);
source$
.subscribe(src => {
this.locationSource = src;
});
} else {
const urgiURI = 'https://urgi.versailles.inra.fr';
const source$ = this.gnpisService.getSource(urgiURI);
source$
.subscribe(src => {
this.locationSource = src;
});
}
this.loading = false;
}
);
......
......@@ -45,7 +45,7 @@
label="Data source"
[test]="studySource && study.documentationURL">
<ng-template>
<a target="_blank" *ngIf="study.documentationURL" [href]="study.documentationURL">
<a target="_blank" [href]="study.documentationURL">
Link to this study on {{ studySource["schema:identifier"] }}
</a>
</ng-template>
......@@ -102,7 +102,7 @@
[test]="study.dataLinks && study.dataLinks.length != 0">
<ng-template>
<div *ngFor="let dataLink of study.dataLinks">
<a [href]="dataLink.url">
<a target="_blank" [href]="dataLink.url">
{{ dataLink.name }}
</a>
</div>
......@@ -159,7 +159,7 @@
<td>
<ng-template #name>{{ row.observationVariableDbId }}</ng-template>
<ng-template #link>
<a [href]=row.documentationURL>{{ row.observationVariableDbId }}</a>
<a target="_blank" [href]=row.documentationURL>{{ row.observationVariableDbId }}</a>
</ng-template>
<ng-container *ngIf="row.documentationURL; then link else name"></ng-container>
</td>
......@@ -189,7 +189,7 @@
<td>
<ng-template #name>{{ row.trialName }}</ng-template>
<ng-template #link>
<a [href]=row.documentationURL>{{ row.trialName }}</a>
<a target="_blank" [href]=row.documentationURL>{{ row.trialName }}</a>
</ng-template>
<ng-container *ngIf="row.documentationURL; then link else name"></ng-container>
</td>
......
......@@ -37,7 +37,8 @@ export class StudyCardComponent implements OnInit {
.then(response => {
this.study = response.result;
if (this.study.contacts) {
this.study.contacts.sort(this.compareContacts);
this.study.contacts.sort((var1, var2) =>
var1.name.localeCompare(var2.name));
}
this.additionalInfos = [];
......@@ -64,17 +65,25 @@ export class StudyCardComponent implements OnInit {
});
}
if (this.studyDataset) {
this.studyDataset.sort(this.compareTrials);
this.studyDataset.sort((var1, var2) =>
var1.trialName.localeCompare(var2.trialName));
}
}
// Get study source
// TODO Remove the condition when the field includedInDataCatalog will be added to URGI study.
const sourceURI = this.study['schema:includedInDataCatalog'];
if (sourceURI) {
const source$ = this.gnpisService.getSource(sourceURI);
source$
.subscribe(src => {
console.log(src);
this.studySource = src;
});
} else {
const urgiURI = 'https://urgi.versailles.inra.fr';
const source$ = this.gnpisService.getSource(urgiURI);
source$
.subscribe(src => {
this.studySource = src;
});
}
......@@ -84,14 +93,16 @@ export class StudyCardComponent implements OnInit {
const variable$ = this.brapiService.studyObservationVariables(studyDbId).toPromise();
variable$
.then(response => {
this.studyObservationVariables = response.result.data.sort(this.compareVariables);
this.studyObservationVariables = response.result.data.sort((var1, var2) =>
var1.observationVariableDbId.localeCompare(var2.observationVariableDbId));
});
this.studyGermplasms = [];
const germplasm$ = this.brapiService.studyGermplasms(studyDbId).toPromise();
germplasm$
.then(studyGermplasm => {
this.studyGermplasms = studyGermplasm.result.data.sort(this.compareStudyGermplasm);
this.studyGermplasms = studyGermplasm.result.data.sort((var1, var2) =>
var1.germplasmName.localeCompare(var2.germplasmName));
});
this.loaded = Promise.all([study$, variable$, germplasm$]);
......@@ -105,44 +116,4 @@ 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/assets/gpds/logo.png

5.75 KB | W: | H:

frontend/src/assets/gpds/logo.png

26.3 KB | W: | H:

frontend/src/assets/gpds/logo.png
frontend/src/assets/gpds/logo.png
frontend/src/assets/gpds/logo.png
frontend/src/assets/gpds/logo.png
  • 2-up
  • Swipe
  • Onion skin
......@@ -7,7 +7,6 @@ export const environment = {
navbar: {
title: 'GnpIS Plant Data Search',
links: [
{ label: 'INRA', url: 'http://www.inra.fr/' },
{
label: 'URGI',
url: '#',
......@@ -17,34 +16,10 @@ export const environment = {
{ label: 'About us', url: 'https://urgi.versailles.inra.fr/About-us' }
]
},
{
label: 'Genomes & Synteny',
url: '#',
subMenu: [
{ label: 'Genomes', url: 'https://urgi.versailles.inra.fr/Data/Genome/Genome-data-access' },
{ label: 'Synteny', url: 'https://urgi.versailles.inra.fr/synteny/synteny/viewer.do#dataset' }
]
},