From 9235b3cc0b1f7383d3702de8a27a09f18c194fa8 Mon Sep 17 00:00:00 2001
From: ivan-aksamentov <ivan.aksamentov@gmail.com>
Date: Tue, 17 Jan 2023 08:40:52 +0100
Subject: [PATCH] feat: add nuccore urls in metadata table

---
 src/components/Species/MetadataTable.tsx | 21 +++++++++++++++++++--
 src/components/Species/SpeciesPage.tsx   | 21 +++++++++++----------
 2 files changed, 30 insertions(+), 12 deletions(-)

diff --git a/src/components/Species/MetadataTable.tsx b/src/components/Species/MetadataTable.tsx
index 403e157..e50c39f 100644
--- a/src/components/Species/MetadataTable.tsx
+++ b/src/components/Species/MetadataTable.tsx
@@ -1,15 +1,17 @@
-import React from 'react'
+import React, { useMemo } from 'react'
 import type { ColumnDef } from '@tanstack/react-table'
-import { useTranslationSafe } from 'src/helpers/useTranslationSafe'
+import { LinkExternal } from 'src/components/Link/LinkExternal'
 import { MetadataEntry, SpeciesDesc, useSpeciesMetadata } from 'src/hooks/useDataIndexQuery'
 import { Table } from 'src/components/Table/Table'
 import { getColumnDefNames } from 'src/components/Table/helpers'
+import { useTranslationSafe } from 'src/helpers/useTranslationSafe'
 
 const METADATA_TABLE_COLUMNS: ColumnDef<MetadataEntry>[] = [
   {
     header: 'Accession',
     accessorFn: (meta) => meta.accession,
     size: 100,
+    cell: (context) => <NuccoreUrl accession={context.getValue<string>()} />,
   },
   {
     header: 'Strain',
@@ -67,3 +69,18 @@ export function MetadataTable({ species }: MetadataTableProps) {
     />
   )
 }
+
+export interface NuccoreUrlProps {
+  accession: string
+}
+
+export function NuccoreUrl({ accession }: NuccoreUrlProps) {
+  const { t } = useTranslationSafe()
+  const href = useMemo(() => `https://www.ncbi.nlm.nih.gov/nuccore/${accession}`, [accession])
+  const title = useMemo(() => t('Open in NCBI Nuccore'), [t])
+  return (
+    <LinkExternal href={href} title={title}>
+      {accession}
+    </LinkExternal>
+  )
+}
diff --git a/src/components/Species/SpeciesPage.tsx b/src/components/Species/SpeciesPage.tsx
index 1d84170..6ab0dda 100644
--- a/src/components/Species/SpeciesPage.tsx
+++ b/src/components/Species/SpeciesPage.tsx
@@ -9,6 +9,7 @@ import { useGeneClusterData, useGeneClusterJson } from 'src/hooks/useDataIndexQu
 import { GeneClustersTable } from 'src/components/Species/GeneClustersTable'
 import { LOADING } from 'src/components/Loading/Loading'
 import { Layout } from 'src/components/Layout/Layout'
+import { MetadataTable } from './MetadataTable'
 // import { MetadataTable } from 'src/components/Species/MetadataTable'
 
 // const Msa = dynamic(() => import('src/components/Msa/Msa'), { suspense: true, ssr: false })
@@ -83,16 +84,16 @@ export function GeneClustersSection({ species }: GeneClustersSectionProps) {
           </Col>
         </Row>
 
-        {/*<Row noGutters>*/}
-        {/*  <Col>*/}
-        {/*    <MetadataTable species={species} />*/}
-        {/*  </Col>*/}
-        {/*</Row>*/}
-        {/*<Row noGutters>*/}
-        {/*  <Col>*/}
-        {/*    <GeneClustersData species={species} gene={gene} />*/}
-        {/*  </Col>*/}
-        {/*</Row>*/}
+        <Row noGutters>
+          <Col>
+            <MetadataTable species={species} />
+          </Col>
+        </Row>
+        <Row noGutters>
+          <Col>
+            <GeneClustersData species={species} gene={gene} />
+          </Col>
+        </Row>
       </Container>
     </Suspense>
   )