Add Geo tab to explorer pages

package.json

@@ -22,6 +22,7 @@
         "react-router-dom": "^5.2.0",
         "react-scripts": "^4.0.3",
         "react-select": "^3.1.0",
+        "react-tabs": "^4.2.1",
         "react-windowed-select": "^5.1.0"
     },
     "scripts": {
@@ -56,6 +57,7 @@
         "@types/react-plotly.js": "^2.2.4",
         "@types/react-router-dom": "^5.1.7",
         "@types/react-select": "^4.0.16",
+        "@types/react-tabs": "^2.3.4",
         "@types/react-window": "^1.8.5",
         "@typescript-eslint/eslint-plugin": "^4.28.0",
         "@typescript-eslint/parser": "^4.28.0",

src/components/Explorer/Base/Result/Result.tsx

@@ -3,6 +3,7 @@ import { FamilyMatches } from './FamilyMatches'
 import { SequenceMatches } from './SequenceMatches'
 import { RunLookup } from './RunLookup'
 import { RangeFilter } from 'components/Explorer/types'
+import { withTabs } from './withTabs'
 
 type Props = {
     searchLevel: string
@@ -20,10 +21,20 @@ export const Result = ({ searchLevel, searchLevelValue, identityLims, scoreLims
         return <RunLookup runId={searchLevelValue} filters={filters} />
     }
     if (searchLevel === 'sequence') {
-        return <SequenceMatches sequenceId={searchLevelValue} filters={filters} />
+        return withTabs({
+            component: <SequenceMatches sequenceId={searchLevelValue} filters={filters} />,
+            searchLevel,
+            searchLevelValue,
+            filters,
+        })
     }
     if (searchLevel === 'family') {
-        return <FamilyMatches familyName={searchLevelValue} filters={filters} />
+        return withTabs({
+            component: <FamilyMatches familyName={searchLevelValue} filters={filters} />,
+            searchLevel,
+            searchLevelValue,
+            filters,
+        })
     }
     return null
 }

src/components/Explorer/Base/Result/RunLookup/PalmPrintsTable.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import { NavLink } from 'react-router-dom'
 import { routes } from 'common/routes'
 import { filterObjects } from 'common/utils'
+import { externalLinkIcon } from 'common'
 
 interface PalmPrintsTableProps {
     data: any[] | undefined
@@ -68,7 +69,8 @@ export const PalmPrintsTable = ({ data, header }: PalmPrintsTableProps) => {
                                                                             <NavLink
                                                                                 className='text-blue-600 dark:text-blue-500 hover:underline'
                                                                                 to={`${routes.palmid.path}?fastaInput=%3E${data[eIndex]['run_id']}_${data[eIndex]['assembly_node']}_${data[eIndex]['palm_id']}%0A${data[eIndex]['q_sequence']}`}>
-                                                                                Analyse
+                                                                                Palmprint{' '}
+                                                                                {externalLinkIcon}
                                                                             </NavLink>
                                                                         </td>
                                                                     </>

src/components/Explorer/Base/Result/SerratusApiCalls.tsx

@@ -29,6 +29,27 @@ export const getMatchesDownloadUrl = (
     return `${baseUrl}/matches/${searchType}/download?${urlParams}`
 }
 
+export const fetchMatches = async (
+    searchType: string,
+    searchLevel: string,
+    searchLevelValue: string,
+    filters: Filters,
+    columns: string[]
+) => {
+    const [identityMin, identityMax] = filters.identityLims
+    const [scoreMin, scoreMax] = filters.scoreLims
+    const params = {
+        scoreMin: scoreMin.toString(),
+        scoreMax: scoreMax.toString(),
+        identityMin: identityMin.toString(),
+        identityMax: identityMax.toString(),
+        [searchLevel]: searchLevelValue,
+        columns: columns.join(','),
+    }
+    const response = await axios.get(`${baseUrl}/matches/${searchType}`, { params })
+    return response.data
+}
+
 export const fetchPagedMatches = async (
     searchType: string,
     searchLevel: string,
@@ -95,10 +116,16 @@ export const fetchPagedRunMatches = async (
     return response.data as ResultPagination
 }
 
-export const fetchPagedGeoMatches = async (searchType: string, page: number, perPage: number) => {
+export const fetchPagedGeoMatches = async (
+    searchType: string,
+    page: number,
+    perPage: number,
+    runIds?: string[]
+) => {
     const params: any = {
         page: page,
         perPage: perPage,
+        run: runIds?.length ? runIds.join(',') : '',
     }
     const response = await axios.get(`${baseUrl}/geo/${searchType}/paged`, {
         params: params,

src/components/Explorer/Base/Result/withTabs.tsx

@@ -0,0 +1,54 @@
+import React from 'react'
+import { Geo } from 'components/Geo'
+import { BaseContext } from 'components/Explorer/Base/BaseContext'
+import { Tab, Tabs, TabList, TabPanel } from 'react-tabs'
+import { Filters } from 'components/Explorer/types'
+import { fetchMatches } from './SerratusApiCalls'
+import 'react-tabs/style/react-tabs.css'
+
+type Props = {
+    component: React.ReactElement
+    searchLevel: string
+    searchLevelValue: string
+    filters: Filters
+}
+
+export const withTabs = ({ component, searchLevel, searchLevelValue, filters }: Props) => {
+    const context = React.useContext(BaseContext)
+    const [runIds, setRunIds] = React.useState<string[]>([])
+
+    const shouldRenderGeoTab = () => {
+        return context.searchType === 'rdrp'
+    }
+
+    React.useEffect(() => {
+        async function onMount() {
+            const runIds = await fetchMatches(
+                context.searchType,
+                searchLevel,
+                searchLevelValue,
+                filters,
+                ['run_id']
+            )
+            setRunIds(runIds.map((row: any) => row.run_id))
+        }
+        onMount()
+    }, [])
+
+    const loading = <div className='text-center'>Loading... (this might take a while)</div>
+
+    return (
+        <Tabs>
+            <TabList>
+                <Tab>Sequence</Tab>
+                {shouldRenderGeoTab() ? <Tab disabled={runIds.length === 0}>Geo</Tab> : null}
+            </TabList>
+
+            <TabPanel>{component}</TabPanel>
+
+            {shouldRenderGeoTab() ? (
+                <TabPanel>{runIds.length ? <Geo runIds={runIds} /> : loading}</TabPanel>
+            ) : null}
+        </Tabs>
+    )
+}