Update upstream data download implementation

src/components/upstreamVisitsCard.tsx

@@ -1,39 +1,124 @@
 import { Card, CardBody, Button, CardHeader } from '@chakra-ui/react'
+import { useQuery } from '@tanstack/react-query'
 import { getUpstreamVisits, upstreamDataDownloadRequest } from 'loaders/general'
+import { getInstrumentInfo } from 'loaders/general'
 import React, { useCallback, useEffect } from 'react'
 import { MdFileDownload } from 'react-icons/md'
 
-interface SessionId {
+const InstrumentUpstreamVisitsCard = ({
+  sessid,
+  instrumentName,
+  displayName,
+  instrumentVisits,
+}: {
   sessid: number
+  instrumentName: string
+  displayName: string
+  instrumentVisits: Record<string, string>
+}) => {
+  // Display upstream visits for a single instrument
+  // Parameters to take: instrument name and upstream visits dict
+  return (
+    <Card alignItems="left" cursor={'default'}>
+      <CardHeader fontWeight="bold" cursor="default">
+        {displayName}
+      </CardHeader>
+      <CardBody cursor="default">
+        {/* Map each visit to a button */}
+        {!!Object.keys(instrumentVisits).length ? (
+          Object.entries(instrumentVisits).map(
+            ([visitName, visitPath]: [string, string]) => {
+              return (
+                <Button
+                  rightIcon={<MdFileDownload />}
+                  cursor="pointer"
+                  onClick={() =>
+                    upstreamDataDownloadRequest(
+                      instrumentName,
+                      sessid,
+                      visitName,
+                      visitPath
+                    )
+                  }
+                >
+                  {visitName}
+                </Button>
+              )
+            }
+          )
+        ) : (
+          <>No related visits found</>
+        )}
+      </CardBody>
+    </Card>
+  )
 }
 
-export const UpstreamVisitCard = ({ sessid }: SessionId) => {
-  const [upstreamVisits, setUpstreamVisits] = React.useState({})
+export const UpstreamVisitsCard = ({ sessid }: { sessid: number }) => {
+  const [upstreamVisits, setUpstreamVisits] = React.useState<
+    Record<string, Record<string, string>>
+  >({})
 
+  // Load all visits associated with current session
   const resolveVisits = useCallback(async () => {
     const visits = await getUpstreamVisits(sessid)
+    if (!visits) return // Handle null or false-y cases
     setUpstreamVisits(visits)
-    console.log(visits)
   }, [sessid])
+
   useEffect(() => {
     resolveVisits()
   }, [sessid, resolveVisits])
 
-  return upstreamVisits ? (
-    <Card alignItems="center">
-      <CardHeader>Upstream Visit Data Download</CardHeader>
-      {Object.keys(upstreamVisits).map((k) => {
-        return (
-          <CardBody>
-            <Button
-              rightIcon={<MdFileDownload />}
-              onClick={() => upstreamDataDownloadRequest(k, sessid)}
-            >
-              {k}
-            </Button>
-          </CardBody>
-        )
-      })}
+  // Set up queryClient to load names of all instruments
+  type InstrumentInfo = {
+    instrument_name: string
+    display_name: string
+    instrument_url: string
+  }
+  const { data: instrumentInfo } = useQuery<InstrumentInfo[]>({
+    queryKey: ['instrumentInfo'],
+    queryFn: getInstrumentInfo,
+    staleTime: 60000,
+  })
+
+  // Set up function to get the corresponding display name of the instrument
+  const getDisplayName = (instrumentName: string) => {
+    if (!instrumentInfo) return instrumentName
+    const result = instrumentInfo.find(
+      (item) => item.instrument_name === instrumentName
+    )
+    // Use instrument name if no results were found or if display name wasn't set
+    return result
+      ? result.display_name
+        ? result.display_name
+        : instrumentName
+      : instrumentName
+  }
+
+  return !!Object.keys(upstreamVisits).length && !!instrumentInfo ? (
+    <Card alignItems="left" cursor={'default'}>
+      <CardHeader fontWeight="bold" cursor="default">
+        Upstream Visit Data Download
+      </CardHeader>
+      <CardBody cursor="default">
+        {/* Map each instrument to its own card */}
+        {Object.entries(upstreamVisits).map(
+          ([instrumentName, instrumentVisits]: [
+            string,
+            Record<string, string>,
+          ]) => {
+            return (
+              <InstrumentUpstreamVisitsCard
+                sessid={sessid}
+                instrumentName={instrumentName}
+                displayName={getDisplayName(instrumentName)}
+                instrumentVisits={instrumentVisits}
+              />
+            )
+          }
+        )}
+      </CardBody>
     </Card>
   ) : (
     <></>

src/loaders/general.tsx

@@ -1,5 +1,15 @@
 import { client } from 'utils/api/client'
 
+export const getInstrumentInfo = async () => {
+  const response = await client.hub_get(`instruments`)
+
+  if (response.status !== 200) {
+    return null
+  }
+
+  return response.data
+}
+
 export const getInstrumentName = async () => {
   const response = await client.get(
     `display/instruments/${sessionStorage.getItem('instrumentName')}/instrument_name`
@@ -25,7 +35,9 @@ export const getInstrumentConnectionStatus = async () => {
   return response.data
 }
 
-export const getUpstreamVisits = async (sessid: number) => {
+export const getUpstreamVisits = async (
+  sessid: number
+): Promise<Record<string, Record<string, string>> | null> => {
   const response = await client.get(
     `session_info/correlative/sessions/${sessid}/upstream_visits`
   )
@@ -37,12 +49,17 @@ export const getUpstreamVisits = async (sessid: number) => {
 }
 
 export const upstreamDataDownloadRequest = async (
+  instrumentName: string,
+  sessid: number,
   visitName: string,
-  sessid: number
+  visitPath: string
 ) => {
   const response = await client.post(
-    `instrument_server/visits/${visitName}/sessions/${sessid}/upstream_tiff_data_request`,
-    {}
+    `instrument_server/visits/${visitName}/sessions/${sessid}/upstream_file_data_request`,
+    {
+      upstream_instrument: instrumentName,
+      upstream_visit_path: visitPath,
+    }
   )
 
   if (response.status !== 200) {

src/loaders/hub.tsx

@@ -1,15 +1,6 @@
 import { QueryClient } from '@tanstack/react-query'
-import { client } from 'utils/api/client'
 
-const getInstrumentInfo = async () => {
-  const response = await client.hub_get(`instruments`)
-
-  if (response.status !== 200) {
-    return null
-  }
-
-  return response.data
-}
+import { getInstrumentInfo } from './general'
 
 const query = {
   queryKey: ['instrumentInfo'],

src/routes/Session.tsx

@@ -27,7 +27,7 @@ import {
 import { useQuery } from '@tanstack/react-query'
 import { InstrumentCard } from 'components/instrumentCard'
 import { RsyncCard } from 'components/rsyncCard'
-import { UpstreamVisitCard } from 'components/upstreamVisitsCard'
+import { UpstreamVisitsCard } from 'components/upstreamVisitsCard'
 import { getInstrumentConnectionStatus } from 'loaders/general'
 import { sessionTokenCheck, sessionHandshake } from 'loaders/jwt'
 import { getMachineConfigData } from 'loaders/machineConfig'
@@ -573,7 +573,7 @@ export const Session = () => {
                 </Button>
               </Link>
               <InstrumentCard />
-              <UpstreamVisitCard sessid={parseInt(sessid ?? '0')} />
+              <UpstreamVisitsCard sessid={parseInt(sessid ?? '0')} />
             </Stack>
           </Flex>
         </Box>