feat(app): adding support for v6 commands in run log (#11254)

fix #11247
Co-authored-by: Jethary Rader <[email protected]>

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

@@ -44,6 +44,7 @@
   "cancel_run_module_info": "Additionally, any hardware modules used within the protocol will remain active and maintain their current states until deactivated.",
   "protocol_setup": "Protocol Setup",
   "load_pipette_protocol_setup": "Load {{pipette_name}} in {{mount_name}} Mount",
+  "load_liquids_info_protocol_setup": "Load {{liquid}} into {{labware}}",
   "load_modules_protocol_setup": "Load {{module}} in Slot {{slot_name}}",
   "load_modules_protocol_setup_plural": "Load {{module}}",
   "load_labware_info_protocol_setup_no_module": "Load {{labware_loadname}} v{{labware_version}} in Slot {{slot_number}}",
@@ -128,5 +129,15 @@
   "latching_hs_latch": "Latching labware on Heater-Shaker",
   "deactivate_hs_shake": "Deactivating shaker",
   "wait_for_duration": "Pause for {{seconds}} seconds",
-  "tc_run_profile_steps": "temperature: {{celsius}}°C, seconds: {{seconds}}"
+  "tc_run_profile_steps": "temperature: {{celsius}}°C, seconds: {{seconds}}",
+  "aspirate": "Aspirating {{volume}} uL from {{well_name}} of {{labware}} in {{labware_location}} at {{flow_rate}} uL/sec",
+  "dispense": "Dispensing {{volume}} uL into {{well_name}} of {{labware}} in {{labware_location}} at {{flow_rate}} uL/sec",
+  "blowout": "Blowing out at {{well_name}} of {{labware}} in {{labware_location}} at {{flow_rate}} uL/sec",
+  "touch_tip": "Touching tip",
+  "move_to_slot": "Moving to {{slot_name}}",
+  "move_to_well": "Moving to {{well_name}} of {{labware}} in {{labware_location}}",
+  "move_relative": "Moving {{distance}} mm along {{axis}} axis",
+  "move_to_coordinates": "Moving to (X: {{x}}, Y: {{y}}, Z: {{z}})",
+  "home_gantry": "Homing all gantry, pipette, and plunger axes",
+  "save_position": "Saving position"
 }

app/src/organisms/Devices/ProtocolRun/RunLogProtocolSetupInfo.tsx

@@ -2,10 +2,18 @@ import * as React from 'react'
 import { Trans, useTranslation } from 'react-i18next'
 
 import { SPACING } from '@opentrons/components'
-import { getModuleDisplayName } from '@opentrons/shared-data'
+import {
+  getModuleDisplayName,
+  getLabwareDisplayName,
+} from '@opentrons/shared-data'
+import { parseLiquidsInLoadOrder } from '@opentrons/api-client'
 
 import { StyledText } from '../../../atoms/text'
-import { useProtocolDetailsForRun, useRunPipetteInfoByMount } from '../hooks'
+import {
+  useProtocolDetailsForRun,
+  useRunPipetteInfoByMount,
+  useLabwareRenderInfoForRunById,
+} from '../hooks'
 
 import type { RunCommandSummary } from '@opentrons/api-client'
 import type { Mount } from '@opentrons/components'
@@ -26,6 +34,7 @@ export const RunLogProtocolSetupInfo = ({
   const { t } = useTranslation('run_details')
   const { protocolData } = useProtocolDetailsForRun(runId)
   const protocolPipetteData = useRunPipetteInfoByMount(robotName, runId)
+  const labwareRenderInfoById = useLabwareRenderInfoForRunById(runId)
 
   if (protocolData == null) return null
   if (setupCommand === undefined) return null
@@ -123,6 +132,25 @@ export const RunLogProtocolSetupInfo = ({
           }}
         />
       )
+  } else if (setupCommand.commandType === 'loadLiquid') {
+    const liquidInfo = parseLiquidsInLoadOrder()
+    const { liquidId, labwareId } = setupCommand.params
+    const liquidDisplayName = liquidInfo.find(
+      liquid => liquid.liquidId === liquidId
+    )?.displayName
+    setupCommandText = (
+      <Trans
+        t={t}
+        id={`RunDetails_LabwareSetup_WithLiquids`}
+        i18nKey={'load_liquids_info_protocol_setup'}
+        values={{
+          liquid: liquidDisplayName ?? 'liquid',
+          labware: getLabwareDisplayName(
+            labwareRenderInfoById[labwareId].labwareDef
+          ),
+        }}
+      />
+    )
   }
 
   return (

app/src/organisms/Devices/ProtocolRun/StepText.tsx

@@ -1,8 +1,7 @@
 import * as React from 'react'
-import { Trans, useTranslation } from 'react-i18next'
+import { useTranslation } from 'react-i18next'
 import { Flex, ALIGN_CENTER, SPACING, TYPOGRAPHY } from '@opentrons/components'
 import { getLabwareDisplayName } from '@opentrons/shared-data'
-
 import { StyledText } from '../../../atoms/text'
 import { getLabwareLocation } from '../ProtocolRun/utils/getLabwareLocation'
 import {
@@ -72,24 +71,18 @@ export function StepText(props: Props): JSX.Element | null {
       if (!('slotName' in labwareLocation)) {
         throw new Error('expected tip rack to be in a slot')
       }
-      messageNode = (
-        <Trans
-          t={t}
-          i18nKey="drop_tip"
-          values={{
-            well_name: wellName,
-            labware:
-              labwareId === TRASH_ID
-                ? 'Opentrons Fixed Trash'
-                : getLabwareDisplayName(
-                    protocolData.labwareDefinitions[
-                      protocolData.labware[labwareId].definitionId
-                    ]
-                  ),
-            labware_location: labwareLocation.slotName,
-          }}
-        />
-      )
+      messageNode = t('drop_tip', {
+        well_name: wellName,
+        labware:
+          labwareId === TRASH_ID
+            ? 'Opentrons Fixed Trash'
+            : getLabwareDisplayName(
+                protocolData.labwareDefinitions[
+                  protocolData.labware[labwareId].definitionId
+                ]
+              ),
+        labware_location: labwareLocation.slotName,
+      })
       break
     }
     case 'pickUpTip': {
@@ -101,19 +94,13 @@ export function StepText(props: Props): JSX.Element | null {
       if (!('slotName' in labwareLocation)) {
         throw new Error('expected tip rack to be in a slot')
       }
-      messageNode = (
-        <Trans
-          t={t}
-          i18nKey="pickup_tip"
-          values={{
-            well_name: wellName,
-            labware: getLabwareDisplayName(
-              labwareRenderInfoById[labwareId].labwareDef
-            ),
-            labware_location: labwareLocation.slotName,
-          }}
-        />
-      )
+      messageNode = t('pickup_tip', {
+        well_name: wellName,
+        labware: getLabwareDisplayName(
+          labwareRenderInfoById[labwareId].labwareDef
+        ),
+        labware_location: labwareLocation.slotName,
+      })
       break
     }
     case 'pause':
@@ -123,7 +110,8 @@ export function StepText(props: Props): JSX.Element | null {
     }
     case 'loadLabware':
     case 'loadPipette':
-    case 'loadModule': {
+    case 'loadModule':
+    case 'loadLiquid': {
       messageNode = (
         <RunLogProtocolSetupInfo
           robotName={robotName}
@@ -250,6 +238,121 @@ export function StepText(props: Props): JSX.Element | null {
       messageNode = t('wait_for_duration', { seconds: seconds })
       break
     }
+    case 'aspirate': {
+      const { wellName, labwareId, volume, flowRate } = displayCommand.params
+      const labwareLocation = getLabwareLocation(
+        labwareId,
+        protocolData.commands
+      )
+      if (!('slotName' in labwareLocation)) {
+        throw new Error('expected tip rack to be in a slot')
+      }
+      messageNode = t('aspirate', {
+        well_name: wellName,
+        labware: getLabwareDisplayName(
+          labwareRenderInfoById[labwareId].labwareDef
+        ),
+        labware_location: labwareLocation.slotName,
+        volume: volume,
+        flow_rate: flowRate,
+      })
+
+      break
+    }
+    case 'dispense': {
+      const { wellName, labwareId, volume, flowRate } = displayCommand.params
+      const labwareLocation = getLabwareLocation(
+        labwareId,
+        protocolData.commands
+      )
+      if (!('slotName' in labwareLocation)) {
+        throw new Error('expected tip rack to be in a slot')
+      }
+      messageNode = t('dispense', {
+        well_name: wellName,
+        labware: getLabwareDisplayName(
+          labwareRenderInfoById[labwareId].labwareDef
+        ),
+        labware_location: labwareLocation.slotName,
+        volume: volume,
+        flow_rate: flowRate,
+      })
+
+      break
+    }
+    case 'blowout': {
+      const { wellName, labwareId, flowRate } = displayCommand.params
+      const labwareLocation = getLabwareLocation(
+        labwareId,
+        protocolData.commands
+      )
+      if (!('slotName' in labwareLocation)) {
+        throw new Error('expected tip rack to be in a slot')
+      }
+      messageNode = t('blowout', {
+        well_name: wellName,
+        labware: getLabwareDisplayName(
+          labwareRenderInfoById[labwareId].labwareDef
+        ),
+        labware_location: labwareLocation.slotName,
+        flow_rate: flowRate,
+      })
+      break
+    }
+    case 'touchTip': {
+      messageNode = t('touch_tip')
+      break
+    }
+    case 'moveToSlot': {
+      const { slotName } = displayCommand.params
+      messageNode = t('move_to_slot', {
+        slot_name: slotName,
+      })
+      break
+    }
+    case 'moveToWell': {
+      const { wellName, labwareId } = displayCommand.params
+      const labwareLocation = getLabwareLocation(
+        labwareId,
+        protocolData.commands
+      )
+      if (!('slotName' in labwareLocation)) {
+        throw new Error('expected tip rack to be in a slot')
+      }
+      messageNode = t('move_to_well', {
+        well_name: wellName,
+        labware: getLabwareDisplayName(
+          labwareRenderInfoById[labwareId].labwareDef
+        ),
+        labware_location: labwareLocation.slotName,
+      })
+      break
+    }
+    case 'moveRelative': {
+      const { axis, distance } = displayCommand.params
+      messageNode = t('move_relative', {
+        axis: axis,
+        distance: distance,
+      })
+      break
+    }
+    case 'moveToCoordinates': {
+      const { coordinates } = displayCommand.params
+      messageNode = t('move_to_coordinates', {
+        x: coordinates.x,
+        y: coordinates.y,
+        z: coordinates.z,
+      })
+      break
+    }
+    case 'home': {
+      messageNode = t('home_gantry')
+      break
+    }
+    case 'savePosition': {
+      messageNode = t('save_position')
+      break
+    }
     case 'custom': {
       const { legacyCommandText } = displayCommand.params ?? {}
       const sanitizedCommandText =
@@ -263,7 +366,7 @@ export function StepText(props: Props): JSX.Element | null {
       break
     }
     default: {
-      messageNode = displayCommand.commandType
+      messageNode = JSON.stringify(displayCommand)
       break
     }
   }