add support for displaying external accessions

client/src/components/ProjectExternalAccessionsDetail.js

@@ -0,0 +1,25 @@
+import React from 'react'
+import { Box } from 'grommet'
+import { Link } from 'components/Link'
+
+export const ProjectExternalAccessionsDetail = ({ inline = false, externalAccessions }) => {
+
+  // Comma separated list.
+  if (inline) {
+    return externalAccessions.map(({ accession, url }, i) => (
+      <React.Fragment key={accession}>
+        {i != 0 && ', '}
+        <Link label={accession} href={url} />
+      </React.Fragment>
+    ))
+  }
+
+  // One external accession per line.
+  return externalAccessions.map(({ accession, url }, i) => (
+    <Box key={accession} margin={{ top: i ? 'small' : 'none' }}>
+      <Link label={accession} href={url} />
+    </Box>
+  ))
+}
+
+export default ProjectExternalAccessionsDetail

client/src/components/ProjectSearchResult.js

@@ -5,6 +5,7 @@ import { Link } from 'components/Link'
 import { ProjectHeader } from 'components/ProjectHeader'
 import { ProjectAbstractDetail } from 'components/ProjectAbstractDetail'
 import { ProjectPublicationsDetail } from 'components/ProjectPublicationsDetail'
+import { ProjectExternalAccessionsDetail } from 'components/ProjectExternalAccessionsDetail'
 
 export const ProjectSearchResult = ({ project }) => {
   const searchDetails = [
@@ -25,6 +26,14 @@ export const ProjectSearchResult = ({ project }) => {
           ''
         )
     },
+    {
+      title: 'Also deposited under',
+      value: project.external_accessions.length > 0 ? (
+        <ProjectExternalAccessionsDetail inline externalAccessions={project.external_accessions} />
+      ) : (
+        ''
+      )
+    },
     {
       title: 'Additional Sample Metadata Fields',
       value: project.additional_metadata_keys

client/src/pages/projects/[scpca_id].js

@@ -5,6 +5,7 @@ import { ProjectHeader } from 'components/ProjectHeader'
 import { DetailsTable } from 'components/DetailsTable'
 import { ProjectAbstractDetail } from 'components/ProjectAbstractDetail'
 import { ProjectPublicationsDetail } from 'components/ProjectPublicationsDetail'
+import { ProjectExternalAccessionsDetail } from 'components/ProjectExternalAccessionsDetail'
 import { ProjectSamplesTable } from 'components/ProjectSamplesTable'
 import { ProjectSamplesSummaryTable } from 'components/ProjectSamplesSummaryTable'
 import { Link } from 'components/Link'
@@ -49,6 +50,17 @@ const Project = ({ project }) => {
                           ''
                         )
                     },
+                    {
+                      label: 'Also deposited under',
+                      value:
+                        project.external_accessions.length > 0 ? (
+                          <ProjectExternalAccessionsDetail
+                            externalAccessions={project.external_accessions}
+                          />
+                        ) : (
+                          ''
+                        )
+                    },
                     {
                       label: 'DOI',
                       value: