Skip to content

GitLab

Commit 8ec313dc authored by Jérémy Destin's avatar Jérémy Destin
Browse files

fix: Fix some issues reference in Issue #15

parent e5c1ecd8
Hide whitespace changes
Inline Side-by-side
frontend/src/app/card-table/card-table.component.html
View file @ 8ec313dc
<div class="table-responsive scroll-table table-card-body">
<table class="table table-sm table-striped">
<thead *ngIf="headers">
<tr>
<th *ngFor="let header of headers" scope="col">
{{ header }}
</th>
</tr>
</thead>
<tbody>
<ng-container *ngFor="let row of rows"
[ngTemplateOutlet]="template"
[ngTemplateOutletContext]="{$implicit: row}">
</ng-container>
</tbody>
</table>
</div>
<table class="table table-sm table-striped">
<thead *ngIf="headers">
<tr>
<th *ngFor="let header of headers" scope="col">
{{ header }}
</th>
</tr>
</thead>
<tbody>
<ng-container *ngFor="let row of rows"
[ngTemplateOutlet]="template"
[ngTemplateOutletContext]="{$implicit: row}">
</ng-container>
</tbody>
</table>
frontend/src/app/card-table/card-table.component.scss
View file @ 8ec313dc
.scroll-table {
max-height: 200px;
overflow-y: auto;
thead th {
position: sticky;
top: 0;
background-color: white;
}
thead th {
position: sticky;
top: 0;
background-color: white;
}
.table-card-body {
padding: 0;
border: 2px solid rgb(195, 214, 226);
border-top-width: 0px;
border-bottom-left-radius: 0.25rem;
border-bottom-right-radius: 0.25rem;
}
frontend/src/app/germplasm-card/germplasm-card.component.html
View file @ 8ec313dc
......@@ -179,8 +179,8 @@
<img
[src]="germplasmGnpis.photo.thumbnailFile"
class="img-fluid">
<figcaption class="figure-caption">
Click to see more details
<figcaption class="figure-caption" style="color: #0f6fa1;">
© {{ germplasmGnpis.photo.copyright }}
</figcaption>
</a>
......@@ -253,7 +253,7 @@
[test]="germplasmSource['schema:identifier'] && germplasmGnpis.documentationURL">
<ng-template>
<a target="_blank" [href]="germplasmGnpis.documentationURL">
Link to this study on {{ germplasmSource['schema:identifier'] }}
Link to this germplasm on {{ germplasmSource['schema:name'] }}
</a>
</ng-template>
</faidare-card-row>
......@@ -324,8 +324,8 @@
</div>
<!--Section for the information about the holding of the germplasm-->
<faidare-card-section
header="Holding"
<gpds-card-section
header="Depositary"
[test]="germplasmGnpis.holdingInstitute">
<ng-template>
<div class="card-body card-section-body">
......@@ -371,7 +371,7 @@
<!--Section for the information about the collector of the germplasm-->
<faidare-card-section
header="Collecting"
header="Collector"
[test]="checkCollecting()">
<ng-template>
<div class="card-body card-section-body">
......@@ -492,7 +492,7 @@
header="Donor"
[test]="germplasmGnpis.donors && germplasmGnpis.donors.length > 0">
<ng-template>
<div class="table-responsive scroll-table table-card-body">
<faidare-card-table
[headers]="[
'Institute name',
......@@ -525,6 +525,8 @@
</ng-template>
</faidare-card-table>
</faidare-card-table>
</div>
</ng-template>
</faidare-card-section>
......@@ -533,6 +535,7 @@
header="Distributor"
[test]="germplasmGnpis.distributors && germplasmGnpis.distributors.length>0">
<ng-template>
<div class="table-responsive scroll-table table-card-body">
<!--TODO : Add order column when ordering URL will be available-->
<faidare-card-table
......@@ -561,8 +564,9 @@
<td>{{ row.distributionStatus }}</td>
</tr>
</ng-template>
</faidare-card-table>
</faidare-card-table>
</div>
</ng-template>
</faidare-card-section>
......@@ -768,9 +772,8 @@
<ng-template>
<div class="card-body card-section-body">
<ng-container *ngFor="let panel of germplasmGnpis.panel">
<faidare-card-row
[label]="panel.type ? panel.name + ' (' + panel.type + ')' : panel.name">
<gpds-card-row
[label]="panel.type ? panel.name.replace(toReplace, ' ') + ' (' + panel.type + ')' : panel.name.replace(toReplace,' ')">
<ng-template>
<a [routerLink]="['/']"
[queryParams]="{germplasmLists: panel.name, types: 'Germplasm'}">
......
frontend/src/app/germplasm-card/germplasm-card.component.spec.ts
View file @ 8ec313dc
......@@ -246,8 +246,8 @@ describe('GermplasmCardComponent', () => {
tester.detectChanges();
expect(tester.title).toContainText('Germplasm: test');
expect(tester.cardHeader[0]).toContainText('Identification');
expect(tester.cardHeader[1]).toContainText('Holding');
expect(tester.cardHeader[2]).toContainText('Collecting');
expect(tester.cardHeader[1]).toContainText('Depositary');
expect(tester.cardHeader[2]).toContainText('Collector');
expect(tester.cardHeader[3]).toContainText('Breeder');
expect(tester.cardHeader[4]).toContainText('Donor');
expect(tester.cardHeader[5]).toContainText('Distributor');
......
frontend/src/app/germplasm-card/germplasm-card.component.ts
View file @ 8ec313dc
......@@ -45,6 +45,13 @@ export class GermplasmCardComponent implements OnInit {
germplasmTaxon: string;
germplasmTaxonAuthor: string;
germplasmSource: DataDiscoverySource;
toReplace = /_/g;
// TODO extract those url in a configuration file. URL maybe be added during extraction.
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';
loaded: Promise<any>;
loading = true;
......
frontend/src/app/map/map.component.scss
View file @ 8ec313dc
#map {
border: #0f6e9f solid 1px;
height: 600px;
width: 100%
height: 400px;
width: 100%;
}
#maplegend {
......
frontend/src/app/navbar/navbar.component.html
View file @ 8ec313dc
......@@ -11,13 +11,13 @@
<li class="nav-item" *ngFor="let link of navbar.links">
<!-- Simple link -->
<div *ngIf="!link.subMenu">
<div class="mr-2" *ngIf="!link.subMenu">
<a class="nav-link d-flex align-items-center"
[href]="link.url" target="_blank">{{ link.label }}</a>
</div>
<!-- OR Dropdown button -->
<div *ngIf="link.subMenu" class="dropdown-container" ngbDropdown>
<div class="mr-2" *ngIf="link.subMenu" class="dropdown-container" ngbDropdown>
<!-- Toggle button -->
<a class="nav-link d-flex align-items-center dropdown-toggle" ngbDropdownToggle
......
frontend/src/app/result-page/document/document.component.html
View file @ 8ec313dc
......@@ -13,16 +13,18 @@
</a>
<a class="title" *ngIf="getRouterLink() && !document['@type'].includes('Phenotyping Study')"
[routerLink]="getRouterLink()" [queryParams]="getQueryParam()">
{{ document["schema:name"] }}
{{ document["schema:name"] }},
</a>
<small>
or link to this
<a *ngIf="getURL()" [href]="getURL()" target="_blank">
{{ document['@type'] }} on {{ document['schema:includedInDataCatalog']['schema:name'] }}
</a>
</small>
</h5>
<h5>
<a class="title" *ngIf="getURL()" [href]="getURL()" target="_blank">
({{ document['schema:includedInDataCatalog']['schema:identifier'] }} data source link)
</a>
</h5>
<span class="text-justify description">
<strong>Description :</strong><br>
<ng-container *ngIf="!needTruncation || opened">
{{ document["schema:description"] }}
......
frontend/src/app/result-page/result-page.component.html
View file @ 8ec313dc
......@@ -48,7 +48,7 @@
<div class="container">
<div class="row result align-content-center">
<span class="col-4 mt-2 bolder">
Results&nbsp;:
Results:
</span>
<span *ngIf="pagination.totalResult" class="col-8 text-right small text-muted mt-3">
From {{ pagination.startResult | number }} to {{ pagination.endResult | number }}
......
frontend/src/app/site-card/site-card.component.html
View file @ 8ec313dc
......@@ -22,7 +22,7 @@
<ng-template>
<a target="_blank"
[href]="locationSource['schema:url']">
<img [src]="locationSource['schema:image']" alt="Location source image"/>
<img [src]="locationSource['schema:image']" alt="Location source image" style="height: 60px"/>
</a>
</ng-template>
</faidare-card-row>
......@@ -32,7 +32,7 @@
[test]="location && location['schema:identifier'] && location.documentationURL">
<ng-template>
<a target="_blank" [href]="location.documentationURL">
Link to this study on {{ location['schema:identifier'] }}
Link to this site on {{ location['schema:name'] }}
</a>
</ng-template>
</faidare-card-row>
......
frontend/src/app/study-card/study-card.component.html
View file @ 8ec313dc
......@@ -36,7 +36,7 @@
<ng-template>
<a target="_blank"
[href]="studySource['schema:url']">
<img [src]="studySource['schema:image']" alt="Study source image"/>
<img [src]="studySource['schema:image']" alt="Study source image" style="height: 60px"/>
</a>
</ng-template>
</faidare-card-row>
......@@ -46,7 +46,7 @@
[test]="studySource && studySource['schema:identifier'] && study.documentationURL">
<ng-template>
<a target="_blank" [href]="study.documentationURL">
Link to this study on {{ studySource["schema:identifier"] }}
Link to this study on {{ studySource["schema:name"] }}
</a>
</ng-template>
</faidare-card-row>
......@@ -118,25 +118,27 @@
header="Genotype"
[test]="studyGermplasms && studyGermplasms.length != 0">
<ng-template>
<faidare-card-table
[headers]="[
<div class="table-responsive scroll-table table-card-body">
<faidare-card-table
[headers]="[
'Accession number',
'Name',
'Taxon'
]"
[rows]="studyGermplasms">
<ng-template let-row>
<tr>
<td>
<a [routerLink]="'/germplasm'" [queryParams]="{id:row.germplasmDbId}">
{{ row.accessionNumber }}
</a>
</td>
<td>{{ row.germplasmName }}</td>
<td>{{ row.genus }} {{ row.species }} {{ row.subtaxa }}</td>
</tr>
</ng-template>
</faidare-card-table>
[rows]="studyGermplasms">
<ng-template let-row>
<tr>
<td>
<a [routerLink]="'/germplasm'" [queryParams]="{id:row.germplasmDbId}">
{{ row.accessionNumber }}
</a>
</td>
<td>{{ row.germplasmName }}</td>
<td>{{ row.genus }} {{ row.species }} {{ row.subtaxa }}</td>
</tr>
</ng-template>
</faidare-card-table>
</div>
</ng-template>
</faidare-card-section>
......@@ -145,31 +147,33 @@
header="Variables"
[test]="studyObservationVariables && studyObservationVariables.length != 0">
<ng-template>
<faidare-card-table
[headers]="[
<div class="table-responsive scroll-table table-card-body">
<faidare-card-table
[headers]="[
'Variable id',
'Variable short name',
'Variable long name',
'Ontology name',
'Trait description'
]"
[rows]="studyObservationVariables">
<ng-template let-row>
<tr>
<td>
<ng-template #name>{{ row.observationVariableDbId }}</ng-template>
<ng-template #link>
<a target="_blank" [href]=row.documentationURL>{{ row.observationVariableDbId }}</a>
</ng-template>
<ng-container *ngIf="row.documentationURL; then link else name"></ng-container>
</td>
<td>{{ row.name }}</td>
<td>{{ row.synonyms[0] }}</td>
<td>{{ row.ontologyName }}</td>
<td>{{ row.trait.description }}</td>
</tr>
</ng-template>
</faidare-card-table>
[rows]="studyObservationVariables">
<ng-template let-row>
<tr>
<td>
<ng-template #name>{{ row.observationVariableDbId }}</ng-template>
<ng-template #link>
<a target="_blank" [href]=row.documentationURL>{{ row.observationVariableDbId }}</a>
</ng-template>
<ng-container *ngIf="row.documentationURL; then link else name"></ng-container>
</td>
<td>{{ row.name }}</td>
<td>{{ row.synonyms[0] }}</td>
<td>{{ row.ontologyName }}</td>
<td>{{ row.trait.description }}</td>
</tr>
</ng-template>
</faidare-card-table>
</div>
</ng-template>
</faidare-card-section>
......@@ -177,34 +181,36 @@
header="Data Set"
[test]="studyDataset && studyDataset.length != 0">
<ng-template>
<faidare-card-table
[headers]="[
<div class="table-responsive scroll-big-table table-card-body">
<faidare-card-table
[headers]="[
'Name',
'Type',
'Linked studies identifiers'
]"
[rows]="studyDataset">
<ng-template let-row>
<tr>
<td>
<ng-template #name>{{ row.trialName }}</ng-template>
<ng-template #link>
<a target="_blank" [href]=row.documentationURL>{{ row.trialName }}</a>
</ng-template>
<ng-container *ngIf="row.documentationURL; then link else name"></ng-container>
</td>
<td>{{ row.trialType }}</td>
<td width="60%">
<ng-container *ngFor="let trialStudy of row.studies">
<a
[routerLink]="['/studies', trialStudy.studyDbId]">
{{ trialStudy.studyName.trim() }}
</a>;
</ng-container>
</td>
</tr>
</ng-template>
</faidare-card-table>
[rows]="studyDataset">
<ng-template let-row>
<tr>
<td>
<ng-template #name>{{ row.trialName }}</ng-template>
<ng-template #link>
<a target="_blank" [href]=row.documentationURL>{{ row.trialName }}</a>
</ng-template>
<ng-container *ngIf="row.documentationURL; then link else name"></ng-container>
</td>
<td>{{ row.trialType }}</td>
<td width="60%">
<ng-container *ngFor="let trialStudy of row.studies">
<a
[routerLink]="['/studies', trialStudy.studyDbId]">
{{ trialStudy.studyName.trim() }}
</a>;
</ng-container>
</td>
</tr>
</ng-template>
</faidare-card-table>
</div>
</ng-template>
</faidare-card-section>
......@@ -212,23 +218,25 @@
header="Contact"
[test]="study.contacts && study.contacts.length != 0">
<ng-template>
<faidare-card-table
[headers]="[
<div class="table-responsive scroll-table table-card-body">
<faidare-card-table
[headers]="[
'Role',
'Name',
'Email',
'Institution'
]"
[rows]="study.contacts">
<ng-template let-row>
<tr>
<td>{{ row.type }}</td>
<td>{{ row.name }}</td>
<td>{{ row.email }}</td>
<td>{{ row.institutionName }}</td>
</tr>
</ng-template>
</faidare-card-table>
[rows]="study.contacts">
<ng-template let-row>
<tr>
<td>{{ row.type }}</td>
<td>{{ row.name }}</td>
<td>{{ row.email.replace('@', ' at ') }}</td>
<td>{{ row.institutionName }}</td>
</tr>
</ng-template>
</faidare-card-table>
</div>
</ng-template>
</faidare-card-section>
......@@ -236,15 +244,17 @@
header="Additional information"
[test]="additionalInfos && additionalInfos.length != 0">
<ng-template>
<faidare-card-table
[rows]="additionalInfos">
<ng-template let-row>
<tr>
<td width="50%">{{ row.key }}</td>
<td>{{ row.value }}</td>
</tr>
</ng-template>
</faidare-card-table>
<div class="table-responsive scroll-table table-card-body">
<faidare-card-table
[rows]="additionalInfos">
<ng-template let-row>
<tr>
<td width="50%">{{ row.key }}</td>
<td>{{ row.value }}</td>
</tr>
</ng-template>
</faidare-card-table>
</div>
</ng-template>
</faidare-card-section>
......
frontend/src/app/xrefs/xrefs.component.html
View file @ 8ec313dc
<faidare-card-section *ngIf="xrefs.length > 0"
header="Cross References">
<ng-template>
<faidare-card-table
[headers]="[
<div class="table-responsive scroll-big-table table-card-body">
<faidare-card-table
[headers]="[
'Name',
'Source',
'Type',
'Description'
]"
[rows]=xrefs>
<ng-template let-crossRef>
<tr>
<td><a [href]="crossRef.url">{{ crossRef.db_version }}</a></td>
<td>{{ crossRef.database_name }}</td>
<td>{{ crossRef.entry_type }}</td>
<td>{{ crossRef.description | slice:0:120 }}...</td>
</tr>
</ng-template>
</faidare-card-table>
[rows]=xrefs>
<ng-template let-crossRef>
<tr>
<td><a [href]="crossRef.url" target="_blank">{{ crossRef.db_version }}</a></td>
<td>{{ crossRef.database_name }}</td>
<td>{{ crossRef.entry_type }}</td>
<td>{{ crossRef.description | slice:0:120 }}...</td>
</tr>
</ng-template>
</faidare-card-table>
</div>
</ng-template>
</faidare-card-section>
frontend/src/environments/environment.ts
View file @ 8ec313dc
......@@ -19,9 +19,9 @@ export const environment = {
]
},
{ label: 'GNPIS', url: 'https://urgi.versailles.inra.fr/gnpis/' },
{ label: 'CIRAD', url: 'http://tropgenedb.cirad.fr/' },
{ label: 'VIB', url: 'http://pippa.psb.ugent.be' },
{ label: 'IBET', url: 'https://biodata.pt' }
{ label: 'CIRAD TropGENE', url: 'http://tropgenedb.cirad.fr/' },
{ label: 'VIB Pippa', url: 'http://pippa.psb.ugent.be' },
{ label: 'IBET BioData', url: 'https://biodata.pt' }
],
contributor: {
......
frontend/src/styles.scss
View file @ 8ec313dc
......@@ -22,6 +22,14 @@ h3 {
border-bottom-right-radius: 0.25rem;
}
.table-card-body {
padding: 0;
border: 2px solid rgb(195, 214, 226);
border-top-width: 0px;
border-bottom-left-radius: 0.25rem;
border-bottom-right-radius: 0.25rem;
}
.row-sep {
border-top: 1px solid #f0f0f0;
}
......@@ -31,7 +39,7 @@ h3 {
}
.content-overflow {
max-height: 175px;
max-height: 200px;
overflow-y: auto;
}
......@@ -39,6 +47,15 @@ h3 {
max-height: 275px;
overflow: auto;
}
.scroll-table {
max-height: 200px;
overflow-y: auto;
}
.scroll-big-table {
max-height: 500px;
overflow-y: auto;
}
.display-spinner-front {
position: absolute;
......
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