fix(app): fallback to current run command on ODD if run diverges from analysis (#14821)

In the case of a non-deterministic protocol, the running protocol screen
of the on device display app will fall back to showing no command text
at all, instead it should fall back to showing the current running
command

Closes PLAT-274

Author: b-cooper

app/src/organisms/Devices/hooks/useLastRunCommandKey.ts renamed to app/src/organisms/Devices/hooks/useLastRunCommand.ts

@@ -12,7 +12,7 @@ import {
 } from '@opentrons/api-client'
 
 import type { UseQueryOptions } from 'react-query'
-import type { CommandsData } from '@opentrons/api-client'
+import type { CommandsData, RunCommandSummary } from '@opentrons/api-client'
 
 const LIVE_RUN_STATUSES = [
   RUN_STATUS_IDLE,
@@ -26,10 +26,10 @@ const LIVE_RUN_STATUSES = [
 ]
 const LIVE_RUN_COMMANDS_POLL_MS = 3000
 
-export function useLastRunCommandKey(
+export function useLastRunCommand(
   runId: string,
   options: UseQueryOptions<CommandsData, Error> = {}
-): string | null {
+): RunCommandSummary | null {
   const runStatus = useRunStatus(runId)
   const { data: commandsData } = useAllCommandsQuery(
     runId,
@@ -44,8 +44,6 @@ export function useLastRunCommandKey(
   )
 
   return commandsData?.data?.[0]?.intent !== 'setup'
-    ? commandsData?.links?.current?.meta?.key ??
-        commandsData?.data?.[0]?.key ??
-        null
+    ? commandsData?.data?.[0] ?? null
     : null
 }

app/src/organisms/OnDeviceDisplay/RunningProtocol/CurrentRunningProtocolCommand.tsx

@@ -30,7 +30,7 @@ import type {
   RobotType,
   RunTimeCommand,
 } from '@opentrons/shared-data'
-import type { RunStatus } from '@opentrons/api-client'
+import type { RunCommandSummary, RunStatus } from '@opentrons/api-client'
 import type { TrackProtocolRunEvent } from '../../Devices/hooks'
 import type { RobotAnalyticsData } from '../../../redux/analytics/types'
 
@@ -117,6 +117,7 @@ interface CurrentRunningProtocolCommandProps {
   trackProtocolRunEvent: TrackProtocolRunEvent
   robotAnalyticsData: RobotAnalyticsData | null
   lastAnimatedCommand: string | null
+  lastRunCommand: RunCommandSummary | null
   updateLastAnimatedCommand: (newCommandKey: string) => void
   protocolName?: string
   currentRunCommandIndex?: number
@@ -134,13 +135,15 @@ export function CurrentRunningProtocolCommand({
   robotType,
   protocolName,
   currentRunCommandIndex,
+  lastRunCommand,
   lastAnimatedCommand,
   updateLastAnimatedCommand,
 }: CurrentRunningProtocolCommandProps): JSX.Element | null {
   const { t } = useTranslation('run_details')
-  const currentCommand = robotSideAnalysis?.commands.find(
-    (c: RunTimeCommand, index: number) => index === currentRunCommandIndex
-  )
+  const currentCommand =
+    robotSideAnalysis?.commands.find(
+      (c: RunTimeCommand, index: number) => index === currentRunCommandIndex
+    ) ?? lastRunCommand
 
   let shouldAnimate = true
   if (currentCommand?.key != null) {

app/src/organisms/OnDeviceDisplay/RunningProtocol/__tests__/CurrentRunningProtocolCommand.test.tsx

@@ -46,6 +46,7 @@ describe('CurrentRunningProtocolCommand', () => {
       protocolName: 'mockRunningProtocolName',
       currentRunCommandIndex: 0,
       lastAnimatedCommand: null,
+      lastRunCommand: null,
       updateLastAnimatedCommand: mockUpdateLastAnimatedCommand,
       robotType: FLEX_ROBOT_TYPE,
     }

app/src/organisms/RunPreview/index.tsx

@@ -21,8 +21,8 @@ import {
 
 import { useMostRecentCompletedAnalysis } from '../LabwarePositionCheck/useMostRecentCompletedAnalysis'
 import {
+  useNotifyLastRunCommand,
   useNotifyAllCommandsAsPreSerializedList,
-  useNotifyLastRunCommandKey,
 } from '../../resources/runs'
 import { CommandText } from '../CommandText'
 import { Divider } from '../../atoms/structure'
@@ -68,9 +68,9 @@ export const RunPreviewComponent = (
   const nullCheckedCommandsFromQuery =
     commandsFromQuery == null ? robotSideAnalysis?.commands : commandsFromQuery
   const viewPortRef = React.useRef<HTMLDivElement | null>(null)
-  const currentRunCommandKey = useNotifyLastRunCommandKey(runId, {
+  const currentRunCommandKey = useNotifyLastRunCommand(runId, {
     refetchInterval: LIVE_RUN_COMMANDS_POLL_MS,
-  })
+  })?.key
   const [
     isCurrentCommandVisible,
     setIsCurrentCommandVisible,

app/src/organisms/RunProgressMeter/__tests__/RunProgressMeter.test.tsx

@@ -11,6 +11,7 @@ import {
   RUN_STATUS_IDLE,
   RUN_STATUS_RUNNING,
   RUN_STATUS_SUCCEEDED,
+  RunCommandSummary,
 } from '@opentrons/api-client'
 
 import { i18n } from '../../../i18n'
@@ -19,7 +20,7 @@ import { ProgressBar } from '../../../atoms/ProgressBar'
 import { useRunStatus } from '../../RunTimeControl/hooks'
 import { useMostRecentCompletedAnalysis } from '../../LabwarePositionCheck/useMostRecentCompletedAnalysis'
 import {
-  useNotifyLastRunCommandKey,
+  useNotifyLastRunCommand,
   useNotifyRunQuery,
 } from '../../../resources/runs'
 import { useDownloadRunLog } from '../../Devices/hooks'
@@ -82,9 +83,9 @@ describe('RunProgressMeter', () => {
       downloadRunLog: vi.fn(),
       isRunLogLoading: false,
     })
-    when(useNotifyLastRunCommandKey)
+    when(useNotifyLastRunCommand)
       .calledWith(NON_DETERMINISTIC_RUN_ID, { refetchInterval: 1000 })
-      .thenReturn(NON_DETERMINISTIC_COMMAND_KEY)
+      .thenReturn({ key: NON_DETERMINISTIC_COMMAND_KEY } as RunCommandSummary)
 
     vi.mocked(useNotifyRunQuery).mockReturnValue({ data: null } as any)
 

app/src/pages/RunningProtocol/__tests__/RunningProtocol.test.tsx

@@ -35,13 +35,13 @@ import { RunPausedSplash } from '../../../organisms/OnDeviceDisplay/RunningProto
 import { OpenDoorAlertModal } from '../../../organisms/OpenDoorAlertModal'
 import { RunningProtocol } from '..'
 import {
-  useNotifyLastRunCommandKey,
+  useNotifyLastRunCommand,
   useNotifyRunQuery,
 } from '../../../resources/runs'
 import { useFeatureFlag } from '../../../redux/config'
 
 import type { UseQueryResult } from 'react-query'
-import type { ProtocolAnalyses } from '@opentrons/api-client'
+import type { ProtocolAnalyses, RunCommandSummary } from '@opentrons/api-client'
 
 vi.mock('@opentrons/react-api-client')
 vi.mock('../../../organisms/Devices/hooks')
@@ -137,9 +137,9 @@ describe('RunningProtocol', () => {
     when(vi.mocked(useAllCommandsQuery))
       .calledWith(RUN_ID, { cursor: null, pageLength: 1 })
       .thenReturn(mockUseAllCommandsResponseNonDeterministic)
-    vi.mocked(useNotifyLastRunCommandKey).mockReturnValue({
-      data: {},
-    } as any)
+    vi.mocked(useNotifyLastRunCommand).mockReturnValue({
+      key: 'FAKE_COMMAND_KEY',
+    } as RunCommandSummary)
     when(vi.mocked(useFeatureFlag))
       .calledWith('enableRunNotes')
       .thenReturn(true)

app/src/pages/RunningProtocol/index.tsx

@@ -18,7 +18,6 @@ import {
   useSwipe,
 } from '@opentrons/components'
 import {
-  useAllCommandsQuery,
   useProtocolQuery,
   useRunActionMutations,
 } from '@opentrons/react-api-client'
@@ -32,7 +31,7 @@ import { useFeatureFlag } from '../../redux/config'
 import { StepMeter } from '../../atoms/StepMeter'
 import { useMostRecentCompletedAnalysis } from '../../organisms/LabwarePositionCheck/useMostRecentCompletedAnalysis'
 import {
-  useNotifyLastRunCommandKey,
+  useNotifyLastRunCommand,
   useNotifyRunQuery,
 } from '../../resources/runs'
 import { InterventionModal } from '../../organisms/InterventionModal'
@@ -95,12 +94,13 @@ export function RunningProtocol(): JSX.Element {
   const lastAnimatedCommand = React.useRef<string | null>(null)
   const swipe = useSwipe()
   const robotSideAnalysis = useMostRecentCompletedAnalysis(runId)
-  const currentRunCommandKey = useNotifyLastRunCommandKey(runId, {
+  const lastRunCommand = useNotifyLastRunCommand(runId, {
     refetchInterval: LIVE_RUN_COMMANDS_POLL_MS,
   })
+
   const totalIndex = robotSideAnalysis?.commands.length
   const currentRunCommandIndex = robotSideAnalysis?.commands.findIndex(
-    c => c.key === currentRunCommandKey
+    c => c.key === lastRunCommand?.key
   )
   const runStatus = useRunStatus(runId, {
     refetchInterval: RUN_STATUS_REFETCH_INTERVAL,
@@ -143,12 +143,6 @@ export function RunningProtocol(): JSX.Element {
     }
   }, [currentOption, swipe, swipe.setSwipeType])
 
-  const { data: allCommandsQueryData } = useAllCommandsQuery(runId, {
-    cursor: null,
-    pageLength: 1,
-  })
-  const lastRunCommand = allCommandsQueryData?.data[0] ?? null
-
   React.useEffect(() => {
     if (
       lastRunCommand != null &&
@@ -242,6 +236,7 @@ export function RunningProtocol(): JSX.Element {
                       stoppedAt,
                       completedAt,
                     }}
+                    lastRunCommand={lastRunCommand}
                     lastAnimatedCommand={lastAnimatedCommand.current}
                     updateLastAnimatedCommand={(newCommandKey: string) =>
                       (lastAnimatedCommand.current = newCommandKey)

app/src/resources/runs/index.ts

@@ -2,5 +2,5 @@ export * from './hooks'
 export * from './utils'
 export * from './useNotifyAllRunsQuery'
 export * from './useNotifyRunQuery'
-export * from './useNotifyLastRunCommandKey'
+export * from './useNotifyLastRunCommand'
 export * from './useNotifyAllCommandsAsPreSerializedList'

app/src/resources/runs/useNotifyLastRunCommandKey.ts renamed to app/src/resources/runs/useNotifyLastRunCommand.ts

@@ -1,18 +1,18 @@
 import * as React from 'react'
 
 import { useNotifyService } from '../useNotifyService'
-import { useLastRunCommandKey } from '../../organisms/Devices/hooks/useLastRunCommandKey'
+import { useLastRunCommand } from '../../organisms/Devices/hooks/useLastRunCommand'
 
-import type { CommandsData } from '@opentrons/api-client'
+import type { CommandsData, RunCommandSummary } from '@opentrons/api-client'
 import type {
   QueryOptionsWithPolling,
   HTTPRefetchFrequency,
 } from '../useNotifyService'
 
-export function useNotifyLastRunCommandKey(
+export function useNotifyLastRunCommand(
   runId: string,
   options: QueryOptionsWithPolling<CommandsData, Error> = {}
-): string | null {
+): RunCommandSummary | null {
   const [refetch, setRefetch] = React.useState<HTTPRefetchFrequency>(null)
 
   useNotifyService({
@@ -21,7 +21,7 @@ export function useNotifyLastRunCommandKey(
     options,
   })
 
-  const httpResponse = useLastRunCommandKey(runId, {
+  const httpResponse = useLastRunCommand(runId, {
     ...options,
     enabled: options?.enabled !== false && refetch != null,
     onSettled: refetch === 'once' ? () => setRefetch(null) : () => null,