feat(robot-server, app): add a new endpoint for fast-fetching all run commands (#15031)

# Overview

**Robot server changes:**

Adds a new endpoint- `GET /runs/:run_id/commandsAsPreSerializedList` to
the run commands router. This endpoint returns a list of pre-serialized
commands (that are valid json objects) of a finished run.

This endpoint is a much faster alternative to the `GET
/runs/:run_id/commands` endpoint when fetching all commands of a
completed run.

Also adds notification publishing when pre-serialized commands become
available for a run.

**App changes**

closes RQA-2645 and RQA-2647

# Risk assessment

Back-end: New endpoint so impact on existing code is close to none.
App: Medium. Fixes issues in existing behavior of handling historical runs.

---------

Co-authored-by: ncdiehl11 <[email protected]>
Co-authored-by: ncdiehl11 <[email protected]>

Author: 3 people

.eslintrc.js

@@ -52,6 +52,7 @@ module.exports = {
               'useLastRunCommandKey',
               'useCurrentMaintenanceRun',
               'useDeckConfigurationQuery',
+              'useAllCommandsAsPreSerializedList',
             ],
             message:
               'The HTTP hook is deprecated. Utilize the equivalent notification wrapper (useNotifyX) instead.',

api-client/src/runs/commands/getCommandsAsPreSerializedList.ts

@@ -0,0 +1,22 @@
+import { GET, request } from '../../request'
+
+import type { ResponsePromise } from '../../request'
+import type { HostConfig } from '../../types'
+import type {
+  CommandsAsPreSerializedListData,
+  GetCommandsParams,
+} from './types'
+
+export function getCommandsAsPreSerializedList(
+  config: HostConfig,
+  runId: string,
+  params: GetCommandsParams
+): ResponsePromise<CommandsAsPreSerializedListData> {
+  return request<CommandsAsPreSerializedListData>(
+    GET,
+    `/runs/${runId}/commandsAsPreSerializedList`,
+    null,
+    config,
+    params
+  )
+}

api-client/src/runs/commands/types.ts

@@ -34,6 +34,12 @@ export interface CommandsData {
   links: CommandsLinks
 }
 
+export interface CommandsAsPreSerializedListData {
+  data: string[]
+  meta: GetCommandsParams & { totalLength: number }
+  links: CommandsLinks
+}
+
 export interface CreateCommandParams {
   waitUntilComplete?: boolean
   timeout?: number

api-client/src/runs/index.ts

@@ -7,6 +7,7 @@ export { createCommand } from './commands/createCommand'
 export { createLiveCommand } from './commands/createLiveCommand'
 export { getCommand } from './commands/getCommand'
 export { getCommands } from './commands/getCommands'
+export { getCommandsAsPreSerializedList } from './commands/getCommandsAsPreSerializedList'
 export { createRunAction } from './createRunAction'
 export * from './createLabwareOffset'
 export * from './createLabwareDefinition'

app/src/organisms/CommandText/LoadCommandText.tsx

@@ -131,7 +131,9 @@ export const LoadCommandText = ({
           return null
         }
       } else {
-        const labware = command.result?.definition.metadata.displayName
+        const labware =
+          command.result?.definition.metadata.displayName ??
+          command.params.displayName
         return command.params.location === 'offDeck'
           ? t('load_labware_info_protocol_setup_off_deck', { labware })
           : t('load_labware_info_protocol_setup_no_module', {

app/src/organisms/RunPreview/index.tsx

@@ -4,7 +4,6 @@ import { useTranslation } from 'react-i18next'
 import { ViewportList, ViewportListRef } from 'react-viewport-list'
 
 import { RUN_STATUSES_TERMINAL } from '@opentrons/api-client'
-import { useAllCommandsQuery } from '@opentrons/react-api-client'
 import {
   ALIGN_CENTER,
   BORDERS,
@@ -21,7 +20,10 @@ import {
 } from '@opentrons/components'
 
 import { useMostRecentCompletedAnalysis } from '../LabwarePositionCheck/useMostRecentCompletedAnalysis'
-import { useNotifyLastRunCommandKey } from '../../resources/runs'
+import {
+  useNotifyAllCommandsAsPreSerializedList,
+  useNotifyLastRunCommandKey,
+} from '../../resources/runs'
 import { CommandText } from '../CommandText'
 import { Divider } from '../../atoms/structure'
 import { NAV_BAR_WIDTH } from '../../App/constants'
@@ -33,6 +35,8 @@ import type { RobotType } from '@opentrons/shared-data'
 
 const COLOR_FADE_MS = 500
 const LIVE_RUN_COMMANDS_POLL_MS = 3000
+// arbitrary large number of commands
+const MAX_COMMANDS = 100000
 
 interface RunPreviewProps {
   runId: string
@@ -52,11 +56,17 @@ export const RunPreviewComponent = (
       ? (RUN_STATUSES_TERMINAL as RunStatus[]).includes(runStatus)
       : false
   // we only ever want one request done for terminal runs because this is a heavy request
-  const commandsFromQuery = useAllCommandsQuery(runId, null, {
-    staleTime: Infinity,
-    cacheTime: Infinity,
-    enabled: isRunTerminal,
-  }).data?.data
+  const commandsFromQuery = useNotifyAllCommandsAsPreSerializedList(
+    runId,
+    { cursor: 0, pageLength: MAX_COMMANDS },
+    {
+      staleTime: Infinity,
+      cacheTime: Infinity,
+      enabled: isRunTerminal,
+    }
+  ).data?.data
+  const nullCheckedCommandsFromQuery =
+    commandsFromQuery == null ? robotSideAnalysis?.commands : commandsFromQuery
   const viewPortRef = React.useRef<HTMLDivElement | null>(null)
   const currentRunCommandKey = useNotifyLastRunCommandKey(runId, {
     refetchInterval: LIVE_RUN_COMMANDS_POLL_MS,
@@ -67,7 +77,9 @@ export const RunPreviewComponent = (
   ] = React.useState<boolean>(true)
   if (robotSideAnalysis == null) return null
   const commands =
-    (isRunTerminal ? commandsFromQuery : robotSideAnalysis.commands) ?? []
+    (isRunTerminal
+      ? nullCheckedCommandsFromQuery
+      : robotSideAnalysis.commands) ?? []
   const currentRunCommandIndex = commands.findIndex(
     c => c.key === currentRunCommandKey
   )

app/src/redux/shell/types.ts

@@ -142,6 +142,7 @@ export type NotifyTopic =
   | 'robot-server/runs'
   | `robot-server/runs/${string}`
   | 'robot-server/deck_configuration'
+  | `robot-server/runs/pre_serialized_commands/${string}`
 
 export interface NotifySubscribeAction {
   type: 'shell:NOTIFY_SUBSCRIBE'

app/src/resources/runs/index.ts

@@ -3,3 +3,4 @@ export * from './utils'
 export * from './useNotifyAllRunsQuery'
 export * from './useNotifyRunQuery'
 export * from './useNotifyLastRunCommandKey'
+export * from './useNotifyAllCommandsAsPreSerializedList'

app/src/resources/runs/useNotifyAllCommandsAsPreSerializedList.ts

@@ -0,0 +1,35 @@
+import * as React from 'react'
+
+import { useAllCommandsAsPreSerializedList } from '@opentrons/react-api-client'
+
+import { useNotifyService } from '../useNotifyService'
+
+import type { UseQueryResult } from 'react-query'
+import type { AxiosError } from 'axios'
+import type { CommandsData, GetCommandsParams } from '@opentrons/api-client'
+import type {
+  QueryOptionsWithPolling,
+  HTTPRefetchFrequency,
+} from '../useNotifyService'
+
+export function useNotifyAllCommandsAsPreSerializedList(
+  runId: string | null,
+  params?: GetCommandsParams | null,
+  options: QueryOptionsWithPolling<CommandsData, AxiosError> = {}
+): UseQueryResult<CommandsData, AxiosError> {
+  const [refetch, setRefetch] = React.useState<HTTPRefetchFrequency>(null)
+
+  useNotifyService<CommandsData, AxiosError>({
+    topic: `robot-server/runs/pre_serialized_commands/${runId}`,
+    setRefetch,
+    options,
+  })
+
+  const httpResponse = useAllCommandsAsPreSerializedList(runId, params, {
+    ...options,
+    enabled: options?.enabled !== false && refetch != null,
+    onSettled: refetch === 'once' ? () => setRefetch(null) : () => null,
+  })
+
+  return httpResponse
+}

react-api-client/src/runs/index.ts

@@ -10,6 +10,7 @@ export { usePauseRunMutation } from './usePauseRunMutation'
 export { useStopRunMutation } from './useStopRunMutation'
 export { useRunActionMutations } from './useRunActionMutations'
 export { useAllCommandsQuery } from './useAllCommandsQuery'
+export { useAllCommandsAsPreSerializedList } from './useAllCommandsAsPreSerializedList'
 export { useCommandQuery } from './useCommandQuery'
 export * from './useCreateLabwareOffsetMutation'
 export * from './useCreateLabwareDefinitionMutation'