Fixed session clean-up, websocket connection, and data loading logic

src/components/navbar.tsx

@@ -2,14 +2,14 @@ import {
   Box,
   Flex,
   HStack,
-  Link,
   IconButton,
   useDisclosure,
   Image,
   Tooltip,
   BoxProps,
   Icon,
 } from '@chakra-ui/react'
+import { useQueryClient } from '@tanstack/react-query'
 import { getInstrumentConnectionStatus } from 'loaders/general'
 import React from 'react'
 import {
@@ -19,7 +19,7 @@ import {
   MdOutlineSignalWifiBad,
 } from 'react-icons/md'
 import { TbMicroscope, TbSnowflake, TbHomeCog } from 'react-icons/tb'
-import { Link as LinkRouter } from 'react-router-dom'
+import { useNavigate } from 'react-router-dom'
 
 export interface LinkDescriptor {
   label: string
@@ -43,27 +43,35 @@ export const Navbar = ({
   logo,
   ...props
 }: NavbarProps) => {
-  const { isOpen, onOpen, onClose } = useDisclosure()
   const [instrumentConnectionStatus, setInsrumentConnectionStatus] =
     React.useState(false)
+  const navigate = useNavigate()
+  const { isOpen, onOpen, onClose } = useDisclosure()
+  const queryClient = useQueryClient()
+  const instrumentName = sessionStorage.getItem('instrumentName')
 
   // Check connectivity every few seconds
   React.useEffect(() => {
     const resolveConnectionStatus = async () => {
       try {
         const status: boolean = await getInstrumentConnectionStatus()
-        setInsrumentConnectionStatus(status)
+        if (status !== instrumentConnectionStatus) {
+          setInsrumentConnectionStatus(status)
+          queryClient.refetchQueries({
+            queryKey: ['instrumentServerConnection', instrumentName],
+          })
+        }
       } catch (err) {
         console.error('Error checking connection status:', err)
         setInsrumentConnectionStatus(false)
       }
     }
     resolveConnectionStatus() // Fetch data once to start with
 
-    // Set it to run every 4s
+    // Set it to run every 10s
     const interval = setInterval(resolveConnectionStatus, 10000)
     return () => clearInterval(interval)
-  }, [])
+  }, [instrumentName, instrumentConnectionStatus, queryClient])
 
   return (
     <Box position="sticky" top="0" zIndex={1} w="100%" {...props}>
@@ -95,51 +103,55 @@ export const Navbar = ({
               />
             </Box>
           ) : null}
-          <Link as={LinkRouter} to="/hub">
-            <Tooltip label="Back to the Hub">
-              <IconButton
-                size={'sm'}
-                icon={
-                  <>
-                    <TbHomeCog />
-                  </>
-                }
-                aria-label={'Back to the Hub'}
-                _hover={{ background: 'transparent', color: 'murfey.500' }}
-              />
-            </Tooltip>
-          </Link>
-          <Link as={LinkRouter} to="/home">
-            <Tooltip label="Back to the microscope">
-              <IconButton
-                size={'sm'}
-                icon={
-                  <>
-                    <TbSnowflake />
-                    <TbMicroscope />
-                  </>
-                }
-                aria-label={'Back to the microscope'}
-                _hover={{ background: 'transparent', color: 'murfey.500' }}
-              />
-            </Tooltip>
-          </Link>
+          <Tooltip label="Back to the Hub">
+            <IconButton
+              onClick={() => {
+                navigate(`/hub`)
+              }}
+              size={'sm'}
+              icon={
+                <>
+                  <TbHomeCog />
+                </>
+              }
+              aria-label={'Back to the Hub'}
+              _hover={{ background: 'transparent', color: 'murfey.500' }}
+            />
+          </Tooltip>
+          {/* Add the instrument name as a URL query parameter to trigger a reload */}
+          <Tooltip label="Back to the microscope">
+            <IconButton
+              onClick={() => {
+                navigate(`/home`)
+              }}
+              size={'sm'}
+              icon={
+                <>
+                  <TbSnowflake />
+                  <TbMicroscope />
+                </>
+              }
+              aria-label="Back to the microscope"
+              _hover={{ background: 'transparent', color: 'murfey.500' }}
+            />
+          </Tooltip>
           <Tooltip
             label={
               instrumentConnectionStatus
                 ? 'Connected to instrument server'
                 : 'No instrument server connection'
             }
-            placement="bottom"
           >
-            <Icon
-              as={
-                instrumentConnectionStatus
-                  ? MdSignalWifi4Bar
-                  : MdOutlineSignalWifiBad
-              }
-              color={instrumentConnectionStatus ? 'white' : 'red'}
-            />
+            <span tabIndex={0}>
+              <Icon
+                as={
+                  instrumentConnectionStatus
+                    ? MdSignalWifi4Bar
+                    : MdOutlineSignalWifiBad
+                }
+                color={instrumentConnectionStatus ? 'white' : 'red'}
+              />
+            </span>
           </Tooltip>
         </HStack>
       </Flex>

src/components/protectedRoutes.tsx

@@ -1,12 +1,14 @@
 import { Box } from '@chakra-ui/react'
 import { Navbar } from 'components/navbar'
+import { WebSocketHandler } from 'components/webSocketHandler'
 import { Navigate, Outlet } from 'react-router-dom'
 
-const ProtectedRoutes = () => {
+export const ProtectedRoutes = () => {
   // Read environment variable and demand user login if authenticating with 'password'
   const sessionToken = sessionStorage.getItem('token')
   const standard = (
     <div className="rootContainer">
+      <WebSocketHandler />
       <Box>
         <Navbar logo="/images/diamondgs.png" />
       </Box>
@@ -23,5 +25,3 @@ const ProtectedRoutes = () => {
     <Navigate to="/login" replace />
   )
 }
-
-export { ProtectedRoutes }

src/components/rsyncCard.tsx

@@ -42,15 +42,7 @@ import { components } from 'schema/main'
 
 type RSyncerInfo = components['schemas']['RSyncerInfo']
 
-export const RsyncCard = ({
-  rsyncer,
-  onRemove,
-  onFinalise,
-}: {
-  rsyncer: RSyncerInfo
-  onRemove: (id: number, source: string) => void
-  onFinalise: (id: number, source: string) => void
-}) => {
+export const RsyncCard = ({ rsyncer }: { rsyncer: RSyncerInfo }) => {
   const { isOpen, onOpen, onClose } = useDisclosure()
   const [action, setAction] = React.useState('finalise')
 
@@ -67,12 +59,8 @@ export const RsyncCard = ({
   const handleRsyncerAction = async () => {
     if (action === 'finalise') {
       await finaliseRsyncer(rsyncer.session_id, rsyncer.source)
-      // Run the function passed in from 'Session'
-      onFinalise(rsyncer.session_id, rsyncer.source)
     } else if (action === 'remove') {
       await removeRsyncer(rsyncer.session_id, rsyncer.source)
-      // Run the function passed in from 'Session'
-      onRemove(rsyncer.session_id, rsyncer.source)
     }
     onClose()
   }