feat(app): Add a running step counter to the ODD (#15448)

Closes EXEC-550

app/src/assets/localization/en/run_details.json

@@ -119,6 +119,7 @@
  "start_step_time": "Start",
  "start_time": "Start Time",
  "start": "Start",
+ "status_awaiting-recovery": "Awaiting recovery",
  "status_blocked-by-open-door": "Paused - door open",
  "status_failed": "Failed",
  "status_finishing": "Finishing",
@@ -130,6 +131,7 @@
  "status_stopped": "Canceled",
  "status_succeeded": "Completed",
  "status": "Status",
+ "step": "Step",
  "step_failed": "Step failed",
  "step_number": "Step {{step_number}}:",
  "steps_total": "{{count}} steps total",

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

@@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next'
 
 import {
  ALIGN_CENTER,
+ ALIGN_FLEX_END,
  ALIGN_FLEX_START,
  BORDERS,
  COLORS,
@@ -25,6 +26,8 @@ import { getCommandTextData } from '../../../molecules/Command/utils/getCommandT
 import { PlayPauseButton } from './PlayPauseButton'
 import { StopButton } from './StopButton'
 import { ANALYTICS_PROTOCOL_RUN_ACTION } from '../../../redux/analytics'
+import { useRunningStepCounts } from '../../../resources/protocols/hooks'
+import { useNotifyAllCommandsQuery } from '../../../resources/runs'
 
 import type {
  CompletedProtocolAnalysis,
@@ -108,6 +111,7 @@ interface RunTimerInfo {
 }
 
 interface CurrentRunningProtocolCommandProps {
+ runId: string
  runStatus: RunStatus | null
  robotSideAnalysis: CompletedProtocolAnalysis | null
  robotType: RobotType
@@ -125,6 +129,7 @@ interface CurrentRunningProtocolCommandProps {
 }
 
 export function CurrentRunningProtocolCommand({
+ runId,
  runStatus,
  robotSideAnalysis,
  runTimerInfo,
@@ -141,6 +146,11 @@ export function CurrentRunningProtocolCommand({
  updateLastAnimatedCommand,
 }: CurrentRunningProtocolCommandProps): JSX.Element | null {
  const { t } = useTranslation('run_details')
+ const { data: mostRecentCommandData } = useNotifyAllCommandsQuery(runId, {
+ cursor: null,
+ pageLength: 1,
+ })
+
  const currentCommand =
  robotSideAnalysis?.commands.find(
  (c: RunTimeCommand, index: number) => index === currentRunCommandIndex
@@ -160,6 +170,14 @@ export function CurrentRunningProtocolCommand({
  }
  const currentRunStatus = t(`status_${runStatus}`)
 
+ const { currentStepNumber, totalStepCount } = useRunningStepCounts(
+ runId,
+ mostRecentCommandData
+ )
+ const stepCounterCopy = `${t('step')} ${currentStepNumber ?? '?'}/${
+ totalStepCount ?? '?'
+ }`
+
  const onStop = (): void => {
  if (runStatus === RUN_STATUS_RUNNING) pauseRun()
  setShowConfirmCancelRunModal(true)
@@ -207,8 +225,13 @@ export function CurrentRunningProtocolCommand({
  </StyledText>
  <StyledText css={TITLE_TEXT_STYLE}>{protocolName}</StyledText>
  </Flex>
- <Flex height="100%" alignItems={ALIGN_CENTER}>
+ <Flex
+ height="100%"
+ alignItems={ALIGN_FLEX_END}
+ flexDirection={DIRECTION_COLUMN}
+ >
  <RunTimer {...runTimerInfo} style={RUN_TIMER_STYLE} />
+ <StyledText as="h4SemiBold">{stepCounterCopy}</StyledText>
  </Flex>
  </Flex>
 

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

@@ -8,8 +8,13 @@ import { renderWithProviders } from '../../../../__testing-utils__'
 import { i18n } from '../../../../i18n'
 import { mockRobotSideAnalysis } from '../../../../molecules/Command/__fixtures__'
 import { CurrentRunningProtocolCommand } from '../CurrentRunningProtocolCommand'
+import { useRunningStepCounts } from '../../../../resources/protocols/hooks'
+import { useNotifyAllCommandsQuery } from '../../../../resources/runs'
 import { FLEX_ROBOT_TYPE } from '@opentrons/shared-data'
 
+vi.mock('../../../../resources/runs')
+vi.mock('../../../../resources/protocols/hooks')
+
 const mockPlayRun = vi.fn()
 const mockPauseRun = vi.fn()
 const mockShowModal = vi.fn()
@@ -49,7 +54,15 @@ describe('CurrentRunningProtocolCommand', () => {
  lastRunCommand: null,
  updateLastAnimatedCommand: mockUpdateLastAnimatedCommand,
  robotType: FLEX_ROBOT_TYPE,
+ runId: 'MOCK_RUN_ID',
  }
+
+ vi.mocked(useNotifyAllCommandsQuery).mockReturnValue({} as any)
+ vi.mocked(useRunningStepCounts).mockReturnValue({
+ totalStepCount: 10,
+ currentStepNumber: 5,
+ hasRunDiverged: false,
+ })
  })
 
  afterEach(() => {
@@ -97,6 +110,23 @@ describe('CurrentRunningProtocolCommand', () => {
  expect(mockUpdateLastAnimatedCommand).toHaveBeenCalledTimes(2)
  })
 
+ it('renders the step count in appropriate format if values are present', () => {
+ render(props)
+
+ screen.getByText('Step 5/10')
+ })
+
+ it('renders the step count in appropriate format if values are not present', () => {
+ vi.mocked(useRunningStepCounts).mockReturnValue({
+ totalStepCount: null,
+ currentStepNumber: null,
+ hasRunDiverged: true,
+ })
+ render(props)
+
+ screen.getByText('Step ?/?')
+ })
+
  // ToDo (kj:04/10/2023) once we fix the track event stuff, we can implement tests
  it.todo('when tapping play button, track event mock function is called')
 })

app/src/pages/RunningProtocol/index.tsx

@@ -214,6 +214,7 @@ export function RunningProtocol(): JSX.Element {
  {robotSideAnalysis != null ? (
  currentOption === 'CurrentRunningProtocolCommand' ? (
  <CurrentRunningProtocolCommand
+ runId={runId}
  playRun={playRun}
  pauseRun={pauseRun}
  setShowConfirmCancelRunModal={setShowConfirmCancelRunModal}

app/src/resources/protocols/hooks/__tests__/useLastRunProtocolCommand.test.ts

@@ -10,8 +10,8 @@ vi.mock('@opentrons/react-api-client')
 const mockRunId = 'mock-run-id'
 const mockCommandsData = {
  data: [
- { id: 'cmd1', key: 'key1', intent: 'protocol' },
- { id: 'cmd2', key: 'key2', intent: 'protocol' },
+ { id: 'cmd1', key: 'key1' },
+ { id: 'cmd2', key: 'key2' },
  ],
  meta: { totalLength: 2 },
 } as any
@@ -27,7 +27,6 @@ describe('useLastRunCommandNoFixit', () => {
  expect(result.current).toEqual({
  id: 'cmd2',
  key: 'key2',
- intent: 'protocol',
  })
  })
 

app/src/resources/protocols/hooks/useLastRunProtocolCommand.ts

@@ -12,9 +12,15 @@ export function useLastRunProtocolCommand(
 ): RunCommandSummary | null {
  const lastRunCommand = last(commandsData?.data) ?? null
 
- const isProtocolIntent = lastRunCommand?.intent === 'protocol'
+ // Not all protocol commands specify a protocol intent.
+ // If intent is undefined during a run, we can assume the intent is protocol.
+ const isProtocolIntent =
+ lastRunCommand != null &&
+ (lastRunCommand.intent != null
+ ? lastRunCommand.intent === 'protocol'
+ : true)
 
- // Get the failed command from the fixit command.
+ // Get the failed command from the non-protocol command.
  const lastRunCommandActual = useCommandQuery(
  runId,
  lastRunCommand?.failedCommandId ?? null,