Full accession details

-updated accession details page to match the genesys website.

src/accession/AccessionDetailsPage.tsx

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

src/locales/en/translations.json

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

src/ui/common/GrinSpecies.tsx

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

src/ui/common/PdciTable.tsx

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