Merge branch '13-full-accession-details' into 'master'

Resolve: "Full accession details"

Closes #13

See merge request !16

entrypoints/client.tsx

@@ -12,6 +12,9 @@ const genesysConfig: Config = {
   clientKey: 'changeme',
   filter: { institute: { code: [ 'COL003', 'BEL084', 'ETH013' ] } },
   language: queryLang,
+  accession: {
+    pdci: true,
+  },
   shoppingCart: {
     enabled: true,
   },

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;
@@ -93,7 +95,7 @@ class AccessionDetailsPage extends React.Component<IAccessionDetailsPage & WithT
 
   public render() {
     const { accession, cartItems } = this.state;
-    const { t, appConfig: { apiUrl, shoppingCart }, countryCodes } = this.props;
+    const { t, appConfig: { apiUrl, shoppingCart }, appConfig, countryCodes } = this.props;
 
     let propertyIndex = 0;
 
@@ -103,14 +105,33 @@ 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++ }/>
-          }
+          <div className="d-flex justify-content-between align-items-center">
+            <h1>{ details.accessionNumber }</h1>
+            { shoppingCart.enabled &&
+              <div>
+                { cartItems.includes(this.props.match.params.uuid) ?
+                  <button
+                    type="button"
+                    name={ `button-remove-${accession.details.uuid}` }
+                    data-uuid={ accession.details.uuid }
+                    className="btn btn-primary"
+                    onClick={ this.removeFromCart }
+                  >
+                    { t('cart.removeFromCart') }
+                  </button>
+                  :
+                  this.renderAddToCart()
+                }
+              </div>
+            }
+          </div>
+
+          { details.doi && <Property title={ t('accession.doi') } value={ <a href={ `https://doi.org/${details.doi}` } target="_blank">{ details.doi }</a> } index={ propertyIndex++ }/> }
+          { details.accessionName && <Property title={ t('accession.accessionName') } value={ <b>{ details.accessionName }</b> } index={ propertyIndex++ }/> }
+          <Property title={ t('accession.acceNumb') } value={ details.accessionNumber } index={ propertyIndex++ } />
           { details.institute && details.institute.fullName &&
             <Property title={ t('accession.holdingInstitute') } value={ details.institute.fullName } index={ propertyIndex++ }/>
           }
@@ -132,6 +153,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,14 +169,71 @@ 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++ }/>
+            <Property title="Accession URL" value={ details.acceUrl } 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 &&
+          <>
+            <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.taxonomy.grinTaxonomySpecies &&
+              <Property title={ t('accession.taxonomy.grinTaxonName') } value={
+                <a href={ `https://npgsweb.ars-grin.gov/gringlobal/taxon/taxonomydetail?id=${details.taxonomy.grinTaxonomySpecies.id}` }>
+                  <GrinSpecies grinSpecies={ details.taxonomy.grinTaxonomySpecies } />
+                </a>
+              } index={ propertyIndex++ }/> }
+            { details.taxonomy.currentTaxonomySpecies && details.taxonomy.currentTaxonomySpecies.id !== details.taxonomy.grinTaxonomySpecies.id &&
+              <Property title={ t('accession.taxonomy.grinCurrentName') } value={
+                <a href={ `https://npgsweb.ars-grin.gov/gringlobal/taxon/taxonomydetail?id=${details.taxonomy.currentTaxonomySpecies.id}` }>
+                  <GrinSpecies grinSpecies={ details.taxonomy.currentTaxonomySpecies } />
+                </a>
+              } index={ propertyIndex++ }/> }
+          </>
+          }
+
+          {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++ }/>
+              { details.coll.collSrc &&
+                <Property title={ t('accession.coll.collSrc') } value={ t(`accession.collectingSource.${details.coll.collSrc}`) } 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++ }/>
               <Property title={ t('accession.coll.collCode') } value={ details.coll.collCode } index={ propertyIndex++ }/>
@@ -157,7 +242,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 +253,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 }>
@@ -179,7 +264,7 @@ class AccessionDetailsPage extends React.Component<IAccessionDetailsPage & WithT
             </>
           }
 
-          { accession.subsets && accession.subsets.length > 0 &&
+          { appConfig.accession.subsets && accession.subsets && accession.subsets.length > 0 &&
             <>
               <h2 className="mt-4">{ t('accession.subsets') }</h2>
               { accession.subsets.map((subset, idx) => (
@@ -191,7 +276,7 @@ class AccessionDetailsPage extends React.Component<IAccessionDetailsPage & WithT
             </>
           }
 
-          { accession.datasets && accession.datasets.length > 0 &&
+          { appConfig.accession.datasets && accession.datasets && accession.datasets.length > 0 &&
             <>
               <h2 className="mt-4">{ t('accession.datasets') }</h2>
               { accession.datasets.map((dataset, idx) => (
@@ -202,22 +287,22 @@ class AccessionDetailsPage extends React.Component<IAccessionDetailsPage & WithT
               )) }
             </>
           }
-          { shoppingCart.enabled &&
-            <div className="pt-4">
-              { cartItems.includes(this.props.match.params.uuid) ?
-                <button
-                  type="button"
-                  name={ `button-remove-${accession.details.uuid}` }
-                  data-uuid={ accession.details.uuid }
-                  className="btn btn-primary"
-                  onClick={ this.removeFromCart }
-                >
-                  { t('cart.removeFromCart') }
-                </button>
-                :
-                this.renderAddToCart()
-              }
-            </div>
+
+          { appConfig.accession.pdci && 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={ new Date(details.lastModifiedDate).toLocaleString() } index={ propertyIndex++ }/>
+          }
+          {
+            details.createdDate &&
+            <Property title={ t('accession.details.created') } value={ new Date(details.createdDate).toLocaleString() } index={ propertyIndex++ }/>
           }
         </>
       );

src/accession/AccessionFilters.tsx

@@ -20,12 +20,12 @@ export function AccessionFilters(props: IAccessionFilters) {
   };
 
   return (
-    <form onSubmit={ handleSubmit }>
-      <label>
-        Full text search
-        <input name="full-text-search" type="text" value={ text } onChange={ onInputChange }/>
-      </label>
-      <button type="submit">Submit</button>
+    <form className="form-inline mb-4" onSubmit={ handleSubmit }>
+      <div className="form-group mx-sm-2">
+        <label className="mr-2">Full text search</label>
+        <input name="full-text-search" type="text" className="form-control" value={ text } onChange={ onInputChange }/>
+      </div>
+      <button className="btn btn-primary" type="submit">Submit</button>
     </form>
   );
 }

src/accession/AccessionListPage.tsx

@@ -203,7 +203,7 @@ class AccessionListPage extends React.Component<IAccessionListPageProps & WithTr
                   <th>{ t('accession.crop') }</th>
                   <th>{ t('accession.acceNumb') }</th>
                   <th>{ t('accession.accessionName') }</th>
-                  <th>{ t('accession.taxonomy') }</th>
+                  <th>{ t('accession.taxonomy.scientificName') }</th>
                   <th>{ t('accession.countryOfOrigin') }</th>
                   <th>{ t('accession.sampStat') }</th>
                   { shoppingCart.enabled && ( <th>{ t('list.availability') }</th> ) }

src/config/config.ts

@@ -10,7 +10,7 @@ export class Config {
 
   // module config
   public language?: string = 'en';
-  public accession?: BaseFeatureConfig;
+  public accession?: AccessionConfig;
   public shoppingCart?: BaseFeatureConfig;
 
   public constructor(config: Config) {
@@ -28,13 +28,26 @@ export class Config {
 }
 
 export class BaseFeatureConfig {
-  public enabled: boolean;
+  public enabled?: boolean;
+}
+
+class AccessionConfig extends BaseFeatureConfig {
+  public pdci?: boolean;
+  public subsets?: boolean;
+  public datasets?: boolean;
 }
 
 export const defaultConfig: Partial<Config> = {
   apiUrl: 'https://api.sandbox.genesys-pgr.org',
   filter: {},
   language: 'en',
-  accession: { enabled: true },
-  shoppingCart: { enabled: false },
+  accession: {
+    enabled: true,
+    pdci: true,
+    datasets: true,
+    subsets: true,
+  },
+  shoppingCart: {
+    enabled: false,
+  },
 };

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": "Matched GRIN taxon",
+      "grinCurrentName": "Current GRIN taxon"
+    },
     "holdingInstitute": "Holding institute",
     "instituteCode": "Institute code",
     "genus": "Genus",
@@ -32,6 +48,22 @@
     "storageType": "Type of germplasm storage",
     "datasets": "Datasets",
     "subsets": "Subsets",
+    "details": {
+      "providedTaxonomy": "Taxonomy",
+      "metadata": "Metadata",
+      "collSite": "Collecting site",
+      "geo": "Georeference",
+      "images": "Images",
+      "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);