feat: Update cell strain links. (#968)

Resolves #912 Rather than adding additional logic to the InfoLink component that would only be used for cell strains, this adds a specific CellStrainInfoLink. This PR also moves the InfoLink components to their own files. Lastly, this PR uses the fractal file structure - it fits here anyway, but it would be great to know if there's broader buy in for using this pattern. If so, I'll move over the Hygen template from CZID so we won't have to manually set up the folder/file structure for each component we add.
chanzuckerberg · Jul 30, 2024 · df43bd6 · df43bd6
1 parent 4bc06b4
commit df43bd6
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 36 deletions.
diff --git a/...et/SampleAndExperimentConditionsTable.tsx → ...le/SampleAndExperimentConditionsTable.tsx b/...et/SampleAndExperimentConditionsTable.tsx → ...le/SampleAndExperimentConditionsTable.tsx
@@ -1,35 +1,9 @@
 import { AccordionMetadataTable } from 'app/components/AccordionMetadataTable'
-import { Link } from 'app/components/Link'
-import { NIH, OBO } from 'app/constants/datasetInfoLinks'
+import { DatasetType } from 'app/components/Dataset/type'
 import { useI18n } from 'app/hooks/useI18n'
 import { getTableData } from 'app/utils/table'
 
-import { DatasetType } from './type'
-
-function InfoLink({
-  value,
-  id,
-  isOBO,
-}: {
-  value?: string | null
-  id?: string | null
-  isOBO?: boolean
-}) {
-  if (!value) {
-    return <span>--</span>
-  }
-
-  if (id) {
-    const link = `${isOBO ? OBO : NIH}${isOBO ? id.replaceAll(':', '_') : id}`
-    return (
-      <Link to={link} className="text-sds-info-400">
-        {value}
-      </Link>
-    )
-  }
-
-  return <span>{value}</span>
-}
+import { InfoLink } from './components/InfoLink'
 
 export function SampleAndExperimentConditionsTable({
   dataset,
@@ -57,18 +31,14 @@ export function SampleAndExperimentConditionsTable({
     {
       label: t('tissueName'),
       renderValue: () => {
-        return (
-          <InfoLink value={dataset.tissue_name} id={dataset.tissue_id} isOBO />
-        )
+        return <InfoLink value={dataset.tissue_name} id={dataset.tissue_id} />
       },
       values: [],
     },
     {
       label: t('cellName'),
       renderValue: () => {
-        return (
-          <InfoLink value={dataset.cell_name} id={dataset.cell_type_id} isOBO />
-        )
+        return <InfoLink value={dataset.cell_name} id={dataset.cell_type_id} />
       },
       values: [],
     },
@@ -91,7 +61,6 @@ export function SampleAndExperimentConditionsTable({
           <InfoLink
             value={dataset.cell_component_name}
             id={dataset.cell_component_id}
-            isOBO
           />
         )
       },

diff --git a/...pp/components/Dataset/SampleAndExperimentConditionsTable/components/InfoLink/InfoLink.tsx b/...pp/components/Dataset/SampleAndExperimentConditionsTable/components/InfoLink/InfoLink.tsx
@@ -0,0 +1,44 @@
+import { Link } from 'app/components/Link'
+import {
+  NCBI,
+  NCBI_ONTOLOGY_PATTERN,
+  OBO,
+  OBO_PATTERN,
+  WORMBASE,
+  WORMBASE_PATTERN,
+} from 'app/constants/datasetInfoLinks'
+
+export function InfoLink({
+  value,
+  id,
+}: {
+  value?: string | null
+  id?: string | null
+}) {
+  if (!value) {
+    return <span>--</span>
+  }
+
+  if (id) {
+    let link
+    if (typeof id === 'number') {
+      link = `${NCBI}${id as number}`
+    } else if (id.match(NCBI_ONTOLOGY_PATTERN)) {
+      link = `${NCBI}${id.replace('NCBITaxon:', '')}`
+    } else if (id.match(WORMBASE_PATTERN)) {
+      link = `${WORMBASE}${id.replaceAll(':', '_')}`
+    } else if (id.match(OBO_PATTERN)) {
+      link = `${OBO}${id.replaceAll(':', '_')}`
+    }
+    // don't link if no patterns match
+    if (link) {
+      return (
+        <Link to={link} className="text-sds-info-400">
+          {value}
+        </Link>
+      )
+    }
+  }
+
+  return <span>{value}</span>
+}
diff --git a/...al/app/components/Dataset/SampleAndExperimentConditionsTable/components/InfoLink/index.ts b/...al/app/components/Dataset/SampleAndExperimentConditionsTable/components/InfoLink/index.ts
@@ -0,0 +1 @@
+export { InfoLink } from './InfoLink'
diff --git a/...d/packages/data-portal/app/components/Dataset/SampleAndExperimentConditionsTable/index.ts b/...d/packages/data-portal/app/components/Dataset/SampleAndExperimentConditionsTable/index.ts
@@ -0,0 +1 @@
+export { SampleAndExperimentConditionsTable } from './SampleAndExperimentConditionsTable'
diff --git a/frontend/packages/data-portal/app/constants/datasetInfoLinks.ts b/frontend/packages/data-portal/app/constants/datasetInfoLinks.ts
@@ -1,3 +1,8 @@
-export const NIH =
+export const NCBI =
   'https://www.ncbi.nlm.nih.gov/Taxonomy/Browser/wwwtax.cgi?id='
 export const OBO = 'http://purl.obolibrary.org/obo/'
+export const WORMBASE = 'https://wormbase.org/species/c_elegans/strain/'
+
+export const NCBI_ONTOLOGY_PATTERN = /NCBITaxon:[0-9]+/
+export const OBO_PATTERN = /[a-zA-Z]+:[0-9]+/
+export const WORMBASE_PATTERN = /WBStrain[0-9]{8}/