Commit 34badb44 authored by Maksym Tishchenko's avatar Maksym Tishchenko
Browse files

Full accession details

-updated accession details page to match the genesys website.
parent 1add251f
......@@ -7,6 +7,8 @@ import AccessionDetails from '@genesys/client/model/accession/AccessionDetails';
import { WithTranslation, withTranslation } from 'react-i18next';
import { LocalStorageCart } from 'utilities';
import { WithConfig } from 'config/config';
import GrinSpecies from 'ui/common/GrinSpecies';
import PdciTable from 'ui/common/PdciTable';
interface IAccessionDetailsPageState {
accession: AccessionDetails;
......@@ -103,14 +105,12 @@ class AccessionDetailsPage extends React.Component<IAccessionDetailsPage & WithT
);
} else {
const details = accession.details;
const pdci = accession.pdci;
return (
<>
<h1>{ details.accessionNumber }</h1>
{ details.doi && <Property title={ t('accession.doi') } value={ details.doi } index={ propertyIndex++ }/> }
{ details.accessionName && <Property title={ t('accession.accessionName') } value={ details.accessionName } index={ propertyIndex++ }/> }
{ details.taxonomy &&
<Property title={ t('accession.taxonomy') } value={ <span dangerouslySetInnerHTML={ { __html: details.taxonomy.taxonNameHtml } } /> } index={ propertyIndex++ }/>
}
{ details.institute && details.institute.fullName &&
<Property title={ t('accession.holdingInstitute') } value={ details.institute.fullName } index={ propertyIndex++ }/>
}
......@@ -132,6 +132,13 @@ class AccessionDetailsPage extends React.Component<IAccessionDetailsPage & WithT
{ details.ancest &&
<Property title="Ancestral information (pedigree)" value={ details.ancest } index={ propertyIndex++ }/>
}
{ details.storage && details.storage.length > 0 &&
<Property
title={ t('accession.storageType') }
titleStyle={ { display: 'flex', alignItems: 'center' } }
value={ details.storage.map((storage, i) => <div key={ `${i}-${storage}` }>{t(`accession.storage.${storage}`)}</div>) }
index={ propertyIndex++ } />
}
{ details.aegis &&
<Property title="AEGIS" value="Accession is part of the European Collection" index={ propertyIndex++ }/>
}
......@@ -141,13 +148,78 @@ class AccessionDetailsPage extends React.Component<IAccessionDetailsPage & WithT
{ details.donorNumb &&
<Property title="Donor accession number" value={ details.donorNumb } index={ propertyIndex++ }/>
}
{ details.duplSite && details.duplSite.length > 0 &&
<Property
title={ t('accession.details.safetyDuplicationInstitute') }
titleStyle={ { display: 'flex', alignItems: 'center' } }
value={ details.duplSite.map((duplSite, i) => <div key={ `${i}-${duplSite}` }>{duplSite}</div>) }
index={ propertyIndex++ } />
}
{ details.acceUrl &&
<Property title="Accession URL" value={ <a href={ details.acceUrl } target="_blank" rel="nofollow">{ details.acceUrl }</a> } index={ propertyIndex++ }/>
}
{ details.taxonomy &&
<>
<h3 className="mt-4">{t('accession.details.providedTaxonomy')}</h3>
<Property title={ t('accession.taxonomy.genus') } value={ details.taxonomy.genus } index={ propertyIndex++ }/>
<Property title={ t('accession.taxonomy.species') } value={ details.taxonomy.species } index={ propertyIndex++ }/>
<Property title={ t('accession.taxonomy.scientificName') } value={ <span dangerouslySetInnerHTML={ { __html: details.taxonomy.taxonNameHtml } } /> } index={ propertyIndex++ }/>
{details.crop && <Property title={ t('accession.crop') } value={ details.crop.shortName } index={ propertyIndex++ }/>}
{details.cropName && <Property title={ t('accession.cropName') } value={ details.cropName } index={ propertyIndex++ }/>}
</>
}
{ details.taxonomy.grinTaxonomySpecies &&
<div>
<h3 className="mt-4">
{t('accession.details.grinTaxonomy')}
<a href={ `mailto:helpdesk@genesys-pgr.org?subject=Taxonomy of accession ${details.uuid}` }>
Contact us
</a>
</h3>
<a href={ `https://npgsweb.ars-grin.gov/gringlobal/taxon/taxonomydetail?id=${details.taxonomy.grinTaxonomySpecies.id}` }>
<GrinSpecies grinSpecies={ details.taxonomy.grinTaxonomySpecies } />
</a>
</div>
}
{ details.taxonomy.currentTaxonomySpecies &&
<div>
<h3 className="mt-4">
{t('accession.details.currentTaxonomy')}
</h3>
<a href={ `https://npgsweb.ars-grin.gov/gringlobal/taxon/taxonomydetail?id=${details.taxonomy.currentTaxonomySpecies.id}` }>
<GrinSpecies grinSpecies={ details.taxonomy.currentTaxonomySpecies } />
</a>
</div>
}
{details.aliases && details.aliases.length > 0 &&
<>
<h3 className="mt-4">{t('accession.details.accessionNames')}</h3>
{
details.aliases.map((alias) => (
<Property key={ alias.id } title={ t(`accession.alias.${alias.aliasType}`) } value={ `${alias.name} ${alias.usedBy || ''}` } index={ propertyIndex++ }/>
))
}
</>
}
{
details.remarks && details.remarks.length > 0 &&
<>
<h3 className="mt-4">{t('accession.details.remarks')}</h3>
{
details.remarks.map((remark) => (
<Property key={ remark.id } title={ remark.fieldName || remark.remark } value={ remark.fieldName ? remark.remark : '' } index={ propertyIndex++ }/>
))
}
</>
}
{ details.coll &&
<>
<h3 className="mt-4">Collecting site</h3>
<h3 className="mt-4">{t('accession.details.collSite')}</h3>
<Property title={ t('accession.coll.collSite') } value={ details.coll.collSite } index={ propertyIndex++ }/>
<Property title={ t('accession.coll.collDate') } value={ details.coll.collDate } index={ propertyIndex++ }/>
<Property title={ t('accession.coll.collMissId') } value={ details.coll.collMissId } index={ propertyIndex++ }/>
......@@ -157,7 +229,7 @@ class AccessionDetailsPage extends React.Component<IAccessionDetailsPage & WithT
}
{ details.geo &&
<>
<h3 className="mt-4">Georeference</h3>
<h3 className="mt-4">{ t('accession.details.geo') }</h3>
<Property title={ t('accession.geo.latitude') } value={ details.geo.latitude } index={ propertyIndex++ }/>
<Property title={ t('accession.geo.longitude') } value={ details.geo.longitude } index={ propertyIndex++ }/>
<Property title={ t('accession.geo.datum') } value={ details.geo.datum } index={ propertyIndex++ }/>
......@@ -168,7 +240,7 @@ class AccessionDetailsPage extends React.Component<IAccessionDetailsPage & WithT
{ accession.imageGallery &&
<>
<h2 className="mt-4">Images</h2>
<h2 className="mt-4">{ t('accession.details.images') }</h2>
<div>
{ accession.imageGallery.images.map((image, idx) => (
<span key={ idx }>
......@@ -202,6 +274,23 @@ class AccessionDetailsPage extends React.Component<IAccessionDetailsPage & WithT
)) }
</>
}
{ pdci && <PdciTable pdci={ pdci } title={ t('accession.details.pdci') }/> }
<h2 className="mt-4">{ t('accession.details.metadata') }</h2>
<Property title={ t('accession.details.uuid') } value={ `urn:uuid:${details.uuid}` } index={ propertyIndex++ }/>
<Property title={ t('accession.details.permanentURL') } value={
<a href={ `https://purl.org/germplasm/id/${details.uuid}` }>
{`https://purl.org/germplasm/id/${details.uuid}`}
</a> } index={ propertyIndex++ }/>
{
details.lastModifiedDate &&
<Property title={ t('accession.details.lastUpdated') } value={ details.lastModifiedDate.toLocaleString() } index={ propertyIndex++ }/>
}
{
details.createdDate &&
<Property title={ t('accession.details.created') } value={ details.createdDate.toLocaleString() } index={ propertyIndex++ }/>
}
{ shoppingCart.enabled &&
<div className="pt-4">
{ cartItems.includes(this.props.match.params.uuid) ?
......
......@@ -20,9 +20,25 @@
"model_plural": "Accessions",
"doi": "Accession DOI",
"crop": "Crop",
"cropName": "Crop name",
"acceNumb": "Accession number",
"accessionName": "Accession name",
"taxonomy": "Scientific name",
"alias": {
"OTHERNUMB": "Other identifier",
"ACCENAME": "Accession name",
"DONORNUMB": "Donor accession number",
"COLLNUMB": "Collecting number"
},
"taxonomy": {
"genus": "Genus",
"species": "Specific epithet",
"scientificName": "Scientific name",
"genusSpecies": "Species",
"subtaxa": "Subtaxon",
"synonyms": "Synonyms",
"grinTaxonName": "GRIN taxon",
"grinCurrentName": "Current GRIN taxon"
},
"holdingInstitute": "Holding institute",
"instituteCode": "Institute code",
"genus": "Genus",
......@@ -32,6 +48,24 @@
"storageType": "Type of germplasm storage",
"datasets": "Datasets",
"subsets": "Subsets",
"details": {
"providedTaxonomy": "Taxonomy provided to Genesys",
"metadata": "Metadata",
"collSite": "Collecting site",
"geo": "Georeference",
"images": "Images",
"grinTaxonomy": "GRIN Taxonomy",
"currentTaxonomy": "Current GRIN Taxon",
"uuid": "UUID",
"permanentURL": "Permanent URL",
"lastUpdated": "Last updated",
"created": "Created",
"pdci": "Passport Data Completeness Index",
"pdciScore": "PDCI score of this accession is {{score, number}} of 10.0.",
"safetyDuplicationInstitute": "Safety Duplication Institute",
"accessionNames": "Accession names",
"remarks": "Remarks"
},
"overview": {
"title": "Collection overview",
"about": "About {{count, number}} {{what, lowercase}}",
......
import * as React from 'react';
import TaxonomySpecies from '@genesys/client/model/genesys/TaxonomySpecies';
const GrinSpecies = ({ grinSpecies }: {grinSpecies: TaxonomySpecies}) => grinSpecies ? <>
<i>{ grinSpecies.genusSpecies }</i>
{ grinSpecies.subspeciesName && <> subsp. <i>{ grinSpecies.subspeciesName }</i></> }
{ grinSpecies.varietyName && <> var. <i>{ grinSpecies.varietyName }</i></> }
{ grinSpecies.subvarietyName && <> subvar. <i>{ grinSpecies.subvarietyName }</i></> }
{ grinSpecies.formaName && <> { grinSpecies.formaRankType } <i>{ grinSpecies.formaName }</i></> }
{ grinSpecies.nameAuthority && <> { grinSpecies.nameAuthority }</> }
</> : null;
export default GrinSpecies;
import * as React from 'react';
import { WithTranslation, withTranslation } from 'react-i18next';
// model
import PDCI from '@genesys/client/model/accession/PDCI';
import { Property } from 'ui/common/Property';
interface IPdciTableProps extends React.ClassAttributes<any>, WithTranslation {
children?: any;
pdci: PDCI;
title: string;
small?: boolean;
}
class PdciTable extends React.Component<IPdciTableProps, any> {
public render() {
const { pdci, title, t } = this.props;
return (
<>
<h2 className="mt-4">{ title }</h2>
<div style={ { marginBottom: '2em', padding: '2em', backgroundColor: '#e7e7e7', borderRadius: '6px' } }>
<span style={ { fontSize: '1.5em' } }>
{ t('accession.details.pdciScore', { score: pdci.score }) }
</span>
</div>
<div className="row">
{[...pdci.independentItems, ...pdci.dependentItems].map((property, i) => (
<div className="col-sm-12 col-md-6 col-xl-4" key={ `${i}-${property}` }>
<div className="col-sm-12 col-md-12 col-xl-12 p-0 h-100">
<Property index={ i } numeric title={ property.toUpperCase() } value={ pdci[property] }/>
</div>
</div>
))}
</div>
</>
);
}
}
export default withTranslation()(PdciTable);
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