Loading sessions...
+ if (isError || !data) return Failed to load sessions.
- // Use existing UUID if present; otherwise, generate a new UUID
- useEffect(() => {
- if (!UUID) {
- setUUID(uuid4())
- }
- }, [UUID])
- // Establish websocket connection to the backend
- useWebSocket(
- // 'null' is passed to 'useWebSocket()' if UUID is not yet set to
- // prevent malformed connections
- UUID ? url + `ws/connect/${UUID}` : null,
- UUID
- ? {
- onOpen: () => {
- console.log('WebSocket connection established.')
- },
- onMessage: (event) => {
- parseWebsocketMessage(event.data)
- },
- }
- : undefined
- )
+ const sessions = data as {
+ current: Session[]
+ } | null
return (
@@ -101,7 +61,7 @@ export const Home = () => {
w={{ base: '100%', md: '19.6%' }}
_hover={{ textDecor: 'none' }}
as={LinkRouter}
- to={`../instruments/${sessionStorage.getItem('instrumentName')}/new_session`}
+ to={`../instruments/${instrumentName}/new_session`}
>
@@ -117,7 +77,10 @@ export const Home = () => {
sessions.current.map((current) => {
return (
- {SessionRow(current)}
+
)
})
diff --git a/src/routes/Hub.tsx b/src/routes/Hub.tsx
index 1c327a5..d6bbee1 100644
--- a/src/routes/Hub.tsx
+++ b/src/routes/Hub.tsx
@@ -10,7 +10,7 @@ import {
Box,
SimpleGrid,
} from '@chakra-ui/react'
-import React, { useEffect } from 'react'
+import { useEffect } from 'react'
import { TbMicroscope, TbSnowflake } from 'react-icons/tb'
import { useLoaderData, useNavigate } from 'react-router-dom'
@@ -41,9 +41,7 @@ export const Hub = () => {
// Direct users to /login only if authenticating with 'password'
if (process.env.REACT_APP_BACKEND_AUTH_TYPE === 'cookie') {
- navigate(
- `/home?instrumentName=${encodeURIComponent(iinfo.instrument_name)}`
- )
+ navigate(`/home`)
} else {
navigate(`/login`, { replace: true })
}
diff --git a/src/routes/Login.tsx b/src/routes/Login.tsx
index 44ee964..ee6eab8 100644
--- a/src/routes/Login.tsx
+++ b/src/routes/Login.tsx
@@ -59,9 +59,7 @@ const Login = () => {
let instrumentName =
sessionStorage.getItem('instrumentName')
if (instrumentName) {
- navigate(
- `/home?instrumentName=${encodeURIComponent(instrumentName)}`
- )
+ navigate(`/home`)
} else {
console.error('Could not find instument information')
}
diff --git a/src/routes/Session.tsx b/src/routes/Session.tsx
index 7c3e1bf..d2a6227 100644
--- a/src/routes/Session.tsx
+++ b/src/routes/Session.tsx
@@ -23,11 +23,12 @@ import {
Stack,
Switch,
VStack,
- useToast,
} from '@chakra-ui/react'
+import { useQuery } from '@tanstack/react-query'
import { InstrumentCard } from 'components/instrumentCard'
import { RsyncCard } from 'components/rsyncCard'
import { UpstreamVisitCard } from 'components/upstreamVisitsCard'
+import { getInstrumentConnectionStatus } from 'loaders/general'
import { sessionTokenCheck, sessionHandshake } from 'loaders/jwt'
import { getMachineConfigData } from 'loaders/machineConfig'
import {
@@ -35,13 +36,7 @@ import {
setupMultigridWatcher,
} from 'loaders/multigridSetup'
import { getSessionProcessingParameterData } from 'loaders/processingParameters'
-import {
- getRsyncerData,
- pauseRsyncer,
- removeRsyncer,
- finaliseRsyncer,
- finaliseSession,
-} from 'loaders/rsyncers'
+import { getRsyncerData, pauseRsyncer, finaliseSession } from 'loaders/rsyncers'
import { updateVisitEndTime, getSessionData } from 'loaders/sessionClients'
import { checkMultigridControllerStatus } from 'loaders/sessionSetup'
import React, { useEffect, useCallback } from 'react'
@@ -53,10 +48,8 @@ import {
useParams,
useNavigate,
} from 'react-router-dom'
-import useWebSocket from 'react-use-websocket'
import { components } from 'schema/main'
import { convertUKNaiveToUTC, convertUTCToUKNaive } from 'utils/generic'
-import { v4 as uuid4 } from 'uuid'
type RSyncerInfo = components['schemas']['RSyncerInfo']
type SessionSchema = components['schemas']['Session']
@@ -66,12 +59,16 @@ type MultigridWatcherSpec = components['schemas']['MultigridWatcherSetup']
export const Session = () => {
// ----------------------------------------------------------------------------------
// Routing and loader context
- const { sessid } = useParams()
- const rsyncerLoaderData = useLoaderData() as RSyncerInfo[] | null
+ const { sessid } = useParams() as { sessid: string }
+ const instrumentName = sessionStorage.getItem('instrumentName')
const navigate = useNavigate()
// ----------------------------------------------------------------------------------
// State hooks
+ // Instrument server connection
+ const [instrumentServerConnected, setInstrumentServerConnected] =
+ React.useState
(false)
+
// Session information
const [session, setSession] = React.useState()
const [sessionActive, setSessionActive] = React.useState(false)
@@ -91,15 +88,46 @@ export const Session = () => {
// Machine config and instrument information
const [machineConfig, setMachineConfig] = React.useState()
- // Websocket UUID information
- const [UUID, setUUID] = React.useState('')
-
// Rsyncer information
- const [rsyncers, setRsyncers] = React.useState(
- rsyncerLoaderData ?? []
- )
+ const [rsyncers, setRsyncers] = React.useState([])
const [rsyncersPaused, setRsyncersPaused] = React.useState(false)
+ // ----------------------------------------------------------------------------------
+ // Load Rsyncer data via a polling query
+ const preloadedRsyncerData = useLoaderData() as RSyncerInfo[] | null
+ const {
+ data: rsyncerData,
+ isLoading,
+ isError,
+ } = useQuery({
+ queryKey: ['rsyncers', sessid],
+ queryFn: () => getRsyncerData(sessid),
+ enabled: !!sessid,
+ initialData: preloadedRsyncerData,
+ staleTime: 0,
+ refetchInterval: sessionActive ? 5000 : false,
+ })
+ useEffect(() => {
+ if (!rsyncerData) return
+ setRsyncers(rsyncerData)
+ }, [rsyncerData])
+
+ // Set up a query to probe the instrument server connection status
+ const { data: instrmentServerConnectionStatus } = useQuery({
+ queryKey: ['instrumentServerConnection', instrumentName],
+ queryFn: () => getInstrumentConnectionStatus(),
+ enabled: !!sessid,
+ initialData: sessionActive,
+ staleTime: 0,
+ })
+ useEffect(() => {
+ console.log(
+ `Instrument server is connected:`,
+ instrmentServerConnectionStatus
+ )
+ setInstrumentServerConnected(instrmentServerConnectionStatus)
+ }, [instrmentServerConnectionStatus])
+
// ----------------------------------------------------------------------------------
// UI utility hooks
const { isOpen, onOpen, onClose } = useDisclosure()
@@ -116,64 +144,6 @@ export const Session = () => {
// ----------------------------------------------------------------------------------
// Functions
- // Load the Murfey server URL from the environment variable
- const baseUrl =
- sessionStorage.getItem('murfeyServerURL') ??
- process.env.REACT_APP_API_ENDPOINT
-
- // Set up websocket connection to Murfey server
- const url = baseUrl ? baseUrl.replace('http', 'ws') : 'ws://localhost:8000'
-
- // Use existing UUID if present; otherwise, generate a new UUID
- useEffect(() => {
- if (!UUID) {
- setUUID(uuid4())
- }
- }, [UUID])
-
- // Websocket helper function to parse incoming messages
- const toast = useToast()
- const parseWebsocketMessage = (message: any) => {
- let parsedMessage: any = {}
- try {
- parsedMessage = JSON.parse(message)
- } catch (err) {
- return
- }
- if (parsedMessage.message === 'refresh') {
- window.location.reload()
- }
- if (
- parsedMessage.message === 'update' &&
- typeof sessid !== 'undefined' &&
- parsedMessage.session_id === parseInt(sessid)
- ) {
- return toast({
- title: 'Update',
- description: parsedMessage.payload,
- isClosable: true,
- duration: parsedMessage.duration ?? null,
- status: parsedMessage.status ?? 'info',
- })
- }
- }
-
- // Establish websocket connection to the backend
- useWebSocket(
- // 'null' is passed to 'useWebSocket()' if UUID is not yet set to
- // prevent malformed connections
- UUID ? url + `ws/connect/${UUID}` : null,
- UUID
- ? {
- onOpen: () => {
- console.log('WebSocket connection established.')
- },
- onMessage: (event) => {
- parseWebsocketMessage(event.data)
- },
- }
- : undefined
- )
// Get machine config and set up related settings
const handleMachineConfig = (mcfg: MachineConfig) => {
@@ -199,7 +169,7 @@ export const Session = () => {
// Check if the multigrid controller for the session exists
const multigridControllerStatus =
await checkMultigridControllerStatus(sessid)
- if (!multigridControllerStatus) {
+ if (!multigridControllerStatus.exists) {
// Check if this instrument has a gain reference directory configured
if (
!!machineConfig?.gain_reference_directory &&
@@ -248,49 +218,7 @@ export const Session = () => {
loadSession()
}, [sessid, loadSession])
- // Poll Rsyncer every few seconds
- useEffect(() => {
- // Don't run it if a session is inactive or its session ID is not set
- if (!sessid || !sessionActive) return
-
- const fetchData = async () => {
- try {
- const data = await getRsyncerData(sessid)
- setRsyncers(data)
- } catch (err) {
- console.error('Error polling rsyncers:', err)
- }
- }
- fetchData() // Fetch data once
-
- // Set it to run every 5s
- const interval = setInterval(fetchData, 5000)
- return () => clearInterval(interval)
- }, [sessid, sessionActive])
-
// Other Rsync-related functions
- const handleRemoveRsyncer = async (sessionId: number, source: string) => {
- // Safely update the displayed Rsync cards after a 'remove' call is made
- try {
- await removeRsyncer(sessionId, source)
- const updatedData = await getRsyncerData(String(sessionId))
- setRsyncers(updatedData)
- } catch (err) {
- console.error('Failed to remove rsyncer:', err)
- }
- }
-
- const handleFinaliseRsyncer = async (sessionId: number, source: string) => {
- // Safely update the displayed Rsync cards after a 'finalise' call is made
- try {
- await finaliseRsyncer(sessionId, source)
- const updatedData = await getRsyncerData(String(sessionId))
- setRsyncers(updatedData)
- } catch (err) {
- console.error('Failed to finalise rsyncer:', err)
- }
- }
-
const finaliseAll = async () => {
if (sessid) await finaliseSession(parseInt(sessid))
onClose()
@@ -315,15 +243,18 @@ export const Session = () => {
return r.transferring
}
+ // Update the state of the session when a change in
+ // instrument server connection status occurs
const checkSessionActivationState = useCallback(async () => {
if (sessid !== undefined) {
const activationState = await sessionTokenCheck(parseInt(sessid))
setSessionActive(activationState)
+ console.log(`Session is active:`, activationState)
}
}, [sessid])
useEffect(() => {
checkSessionActivationState()
- }, [checkSessionActivationState])
+ }, [checkSessionActivationState, instrumentServerConnected])
// Set the default visit end time (in UTC) if none was provided
const defaultVisitEndTime = session?.visit_end_time
@@ -395,9 +326,13 @@ export const Session = () => {
parseInt(sessid)
)
await startMultigridWatcher(parseInt(sessid))
+ await checkSessionActivationState()
+ onCloseReconnect()
}
}
+ if (isLoading) return Loading RSyncer data...
+ if (isError) return Error loading RSyncer data
return (
@@ -602,9 +537,6 @@ export const Session = () => {
)
)
diff --git a/src/routes/SessionParameters.tsx b/src/routes/SessionParameters.tsx
index b1506c7..b82ff11 100644
--- a/src/routes/SessionParameters.tsx
+++ b/src/routes/SessionParameters.tsx
@@ -15,7 +15,11 @@ import {
} from '@chakra-ui/react'
import { useDisclosure } from '@chakra-ui/react'
import { Table } from '@diamondlightsource/ui-components'
-import { updateSessionProcessingParameters } from 'loaders/processingParameters'
+import { useQuery, useQueryClient } from '@tanstack/react-query'
+import {
+ updateSessionProcessingParameters,
+ getSessionProcessingParameterData,
+} from 'loaders/processingParameters'
import React from 'react'
import { Link as LinkRouter, useLoaderData, useParams } from 'react-router-dom'
import { components } from 'schema/main'
@@ -40,10 +44,26 @@ const nameLabelMap: Map = new Map([
['eer_fractionation_file', 'EER fractionation file (for motion correction)'],
])
-const SessionParameters = () => {
- const { isOpen, onOpen, onClose } = useDisclosure()
+export const SessionParameters = () => {
+ // Load necessary data
const { sessid } = useParams()
- const sessionParams = useLoaderData() as EditableSessionParameters | null
+ const preloadedData = useLoaderData()
+ const queryKey = ['processingParameters', sessid]
+ const queryFn = () => getSessionProcessingParameterData(sessid)
+ const { data, isLoading, isError } = useQuery({
+ queryKey,
+ queryFn,
+ initialData: preloadedData,
+ staleTime: 0,
+ })
+ const sessionParams = data as EditableSessionParameters | null
+
+ const queryClient = useQueryClient()
+
+ // Set component hooks
+ const { isOpen, onOpen, onClose } = useDisclosure()
+
+ // Construct parameters table to display
let tableRows = [] as ProcessingRow[]
type EditableParameter =
| 'gain_ref'
@@ -73,8 +93,8 @@ const SessionParameters = () => {
symmetry: paramKey === 'symmetry' ? paramValue : '',
}
await updateSessionProcessingParameters(sessid ?? '0', data)
+ queryClient.refetchQueries({ queryKey: ['processingParameters', sessid] })
onClose()
- window.location.reload()
}
const editParameterDialogue = async (
@@ -88,6 +108,8 @@ const SessionParameters = () => {
onOpen()
}
+ if (isLoading) return Loading processing parameters for session...
+ if (isError) return Error loading processing parameters for session.
return (
@@ -154,5 +176,3 @@ const SessionParameters = () => {
)
}
-
-export { SessionParameters }