add new api-client function for getting commands as preserialized lis…

…t, add react wrapper, utilize in runpreview

api-client/src/runs/commands/getCommandsAsDocument.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/getCommandsAsDocument'
 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,7 @@ 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 { useAllCommandsAsPreSerializedList } from '@opentrons/react-api-client'
 import {
   ALIGN_CENTER,
   BORDERS,
@@ -33,6 +33,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 +54,19 @@ 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 =
+    useAllCommandsAsPreSerializedList(
+      runId,
+      { cursor: 0, pageLength: MAX_COMMANDS },
+      {
+        staleTime: Infinity,
+        cacheTime: Infinity,
+        enabled: isRunTerminal,
+      }
+    ).data?.data ?? []
+  const parsedCommandsFromQuery = commandsFromQuery.map(command =>
+    JSON.parse(command)
+  )
   const viewPortRef = React.useRef<HTMLDivElement | null>(null)
   const currentRunCommandKey = useNotifyLastRunCommandKey(runId, {
     refetchInterval: LIVE_RUN_COMMANDS_POLL_MS,
@@ -67,7 +77,7 @@ export const RunPreviewComponent = (
   ] = React.useState<boolean>(true)
   if (robotSideAnalysis == null) return null
   const commands =
-    (isRunTerminal ? commandsFromQuery : robotSideAnalysis.commands) ?? []
+    (isRunTerminal ? parsedCommandsFromQuery : robotSideAnalysis.commands) ?? []
   const currentRunCommandIndex = commands.findIndex(
     c => c.key === currentRunCommandKey
   )

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 './useAllCommandsAsDocumentQuery'
 export { useCommandQuery } from './useCommandQuery'
 export * from './useCreateLabwareOffsetMutation'
 export * from './useCreateLabwareDefinitionMutation'

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

@@ -0,0 +1,43 @@
+import { UseQueryResult, useQuery } from 'react-query'
+import { getCommandsAsPreSerializedList } from '@opentrons/api-client'
+import { useHost } from '../api'
+import type { UseQueryOptions } from 'react-query'
+import type {
+  GetCommandsParams,
+  HostConfig,
+  CommandsAsPreSerializedListData,
+} from '@opentrons/api-client'
+
+const DEFAULT_PAGE_LENGTH = 30
+export const DEFAULT_PARAMS: GetCommandsParams = {
+  cursor: null,
+  pageLength: DEFAULT_PAGE_LENGTH,
+}
+
+export function useAllCommandsAsPreSerializedList<TError = Error>(
+  runId: string | null,
+  params?: GetCommandsParams | null,
+  options: UseQueryOptions<CommandsAsPreSerializedListData, TError> = {}
+): UseQueryResult<CommandsAsPreSerializedListData, TError> {
+  const host = useHost()
+  const nullCheckedParams = params ?? DEFAULT_PARAMS
+
+  const allOptions: UseQueryOptions<CommandsAsPreSerializedListData, TError> = {
+    ...options,
+    enabled: host !== null && runId != null && options.enabled !== false,
+  }
+  const { cursor, pageLength } = nullCheckedParams
+  const query = useQuery<CommandsAsPreSerializedListData, TError>(
+    [host, 'runs', runId, 'getCommandsAsPreSerializedList', cursor, pageLength],
+    () => {
+      return getCommandsAsPreSerializedList(
+        host as HostConfig,
+        runId as string,
+        nullCheckedParams
+      ).then(response => response.data)
+    },
+    allOptions
+  )
+
+  return query
+}