Merge pull request #477 from AlexsLemonade/davidsmejia/455-display-ex…

…ternal-accessions add support for displaying external accessions
AlexsLemonade · Nov 13, 2023 · 7193ab4 · 7193ab4
2 parents df82d5c + 4a8df46
commit 7193ab4
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 3 deletions.
diff --git a/client/src/components/ProjectExternalAccessionsDetail.js b/client/src/components/ProjectExternalAccessionsDetail.js
@@ -0,0 +1,27 @@
+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
diff --git a/client/src/components/ProjectPublicationsDetail.js b/client/src/components/ProjectPublicationsDetail.js
@@ -2,7 +2,7 @@ import React from 'react'
 import { Box, Text } from 'grommet'
 import { Link } from 'components/Link'
 
-export const ProjectPublicationsDetail = ({ publications }) => (
+export const ProjectPublicationsDetail = ({ publications = [] }) => (
   <>
     {publications.map((publication, i) => (
       <Box key={publication.doi} margin={{ top: i ? 'small' : 'none' }}>

diff --git a/client/src/components/ProjectSearchResult.js b/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,18 @@ 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
@@ -41,7 +54,7 @@ export const ProjectSearchResult = ({ project }) => {
               <Text>{d.value}</Text>
             ) : (
               <Text italic color="black-tint-30">
-                Not Available
+                Not Specified
               </Text>
             )}
           </Box>

diff --git a/client/src/pages/projects/[scpca_id].js b/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:

diff --git a/client/src/theme/table.js b/client/src/theme/table.js
@@ -37,7 +37,6 @@ export default {
     tr td, tr th {
       background-color: #fff;
       box-shadow: 1px 0 0 0 #ccc inset, 0 1px 0 0 #ccc inset;
-      vertical-align: middle;
     }
     tr th {
       box-shadow: 1px 0 0 0 #ccc inset,