feat(protocol-designer, components): add retract for aspirate and dispense to PD

protocol-designer/src/assets/localization/en/protocol_steps.json

@@ -86,6 +86,8 @@
   "protocol_timeline": "Protocol timeline",
   "rename": "Rename",
   "rename_error": "Oops! Your step name is too long.",
+  "retract": "Retract",
+  "retract_speed": "Retract speed",
   "save_errors": "{{stepType}} has been saved with {{numErrors}} error(s)",
   "save_no_errors": "{{stepType}} has been saved",
   "save_warnings": "{{stepType}} has been saved with {{numWarnings}} warning(s)",

protocol-designer/src/assets/localization/en/tooltip.json

@@ -37,6 +37,7 @@
       "aspirate_mmFromBottom": "Adjust tip position for aspirate",
       "aspirate_touchTip_checkbox": "Touch tip to each side of the well after aspirating",
       "aspirate_touchTip_mmFromTop": "Distance from the top of the well",
+      "aspirate_retract": " Withdraw the tip from the liquid after aspirating",
       "aspirate_submerge": "Lower the tip into the liquid before aspirating",
       "aspirate_wells": "First select a source labware",
       "blowout_checkbox": "Blow extra air through the tip",
@@ -51,6 +52,7 @@
       "dispense_labware": "Pipette unable to access labware in staging area",
       "dispense_mix_checkbox": "Aspirate and dispense repeatedly after main dispense",
       "dispense_mmFromBottom": "Adjust tip position for dispense",
+      "dispense_retract": "Withdraw the tip from the liquid after dispensing",
       "dispense_submerge": "Lower the tip into the liquid before dispensing",
       "dispense_touchTip_checkbox": "Touch tip to each side of the well after dispensing",
       "dispense_touchTip_mmFromTop": "Distance from the top of the well",

protocol-designer/src/form-types.ts

@@ -32,6 +32,8 @@ export type StepFieldName = string
 // | 'aspirate_mix_times'
 // | 'aspirate_mix_volume'
 // | 'aspirate_mmFromBottom'
+// | 'aspirate_retract_delay_seconds'
+// | 'aspirate_retract_speed'
 // | 'aspirate_submerge_delay_seconds'
 // | 'aspirate_submerge_speed'
 // | 'aspirate_touchTip_checkbox'
@@ -53,6 +55,8 @@ export type StepFieldName = string
 // | 'dispense_mix_times'
 // | 'dispense_mix_volume'
 // | 'dispense_mmFromBottom'
+// | 'dispense_retract_delay_seconds'
+// | 'dispense_retract_speed'
 // | 'dispense_submerge_delay_seconds'
 // | 'dispense_submerge_speed'
 // | 'dispense_touchTip_checkbox'
@@ -256,6 +260,8 @@ export interface HydratedMoveLiquidFormData extends AnnotationFields {
   aspirate_mix_times?: number | null
   aspirate_mix_volume?: number | null
   aspirate_mmFromBottom?: number | null
+  aspirate_retract_delay_seconds?: number | null
+  aspirate_retract_speed?: number | null
   aspirate_submerge_delay_seconds?: number | null
   aspirate_submerge_speed?: number | null
   aspirate_touchTip_mmFromTop?: number | null
@@ -272,6 +278,8 @@ export interface HydratedMoveLiquidFormData extends AnnotationFields {
   dispense_mix_times?: number | null
   dispense_mix_volume?: number | null
   dispense_mmFromBottom?: number | null
+  dispense_retract_delay_seconds?: number | null
+  dispense_retract_speed?: number | null
   dispense_submerge_delay_seconds?: number | null
   dispense_submerge_speed?: number | null
   dispense_touchTip_mmFromTop?: number | null

protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/MoveLiquidTools/MultiInputField.tsx

@@ -0,0 +1,102 @@
+import { useTranslation } from 'react-i18next'
+import {
+  ALIGN_CENTER,
+  COLORS,
+  DIRECTION_COLUMN,
+  Flex,
+  Icon,
+  ListItem,
+  SPACING,
+  StyledText,
+  Tooltip,
+  useHoverTooltip,
+} from '@opentrons/components'
+import { InputStepFormField } from '../../../../../../molecules'
+import { PositionField } from '../../PipetteFields'
+import type { FieldPropsByName } from '../../types'
+
+interface InputFieldProps {
+  fieldTitle: string
+  fieldKey: string
+  units: string
+  errorToShow?: string | null
+}
+interface MultiInputFieldProps {
+  name: string
+  tab: 'aspirate' | 'dispense' | 'mix'
+  tooltipContent: string
+  propsForFields: FieldPropsByName
+  fields: InputFieldProps[]
+  extraButton?: boolean | null
+  labwareId?: string | null
+}
+
+export function MultiInputField(props: MultiInputFieldProps): JSX.Element {
+  const {
+    name,
+    tab,
+    tooltipContent,
+    extraButton,
+    fields,
+    propsForFields,
+    labwareId,
+  } = props
+  const [targetProps, tooltipProps] = useHoverTooltip()
+  const { t } = useTranslation(['protocol_steps', 'form', 'tooltip'])
+
+  return (
+    <>
+      <Flex
+        flexDirection={DIRECTION_COLUMN}
+        gridGap={SPACING.spacing8}
+        padding={`0 ${SPACING.spacing16}`}
+      >
+        <Flex gridGap={SPACING.spacing8} alignItems={ALIGN_CENTER}>
+          <StyledText desktopStyle="bodyDefaultRegular" color={COLORS.grey60}>
+            {t(`protocol_steps:${name}`)}
+          </StyledText>
+          <Flex {...targetProps}>
+            <Icon
+              name="information"
+              size="1rem"
+              color={COLORS.grey60}
+              data-testid="information_icon"
+            />
+          </Flex>
+          <Tooltip tooltipProps={tooltipProps}>{tooltipContent}</Tooltip>
+        </Flex>
+        <ListItem type="noActive">
+          <Flex
+            padding={SPACING.spacing12}
+            width="100%"
+            flexDirection={DIRECTION_COLUMN}
+            gridGap={SPACING.spacing8}
+          >
+            {fields.map(({ fieldTitle, fieldKey, units, errorToShow }) => (
+              <InputStepFormField
+                key={fieldKey}
+                showTooltip={false}
+                padding="0"
+                title={t(fieldTitle)}
+                {...propsForFields[fieldKey]}
+                units={t(units)}
+                errorToShow={errorToShow}
+              />
+            ))}
+            {extraButton != null && (
+              <PositionField
+                padding="0"
+                prefix={tab}
+                propsForFields={propsForFields}
+                zField={`${tab}_mmFromBottom`}
+                xField={`${tab}_x_position`}
+                yField={`${tab}_y_position`}
+                labwareId={labwareId}
+              />
+            )}
+          </Flex>
+        </ListItem>
+      </Flex>
+    </>
+  )
+}

protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/MoveLiquidTools/index.tsx

@@ -1,18 +1,12 @@
 import { useSelector } from 'react-redux'
 import { useTranslation } from 'react-i18next'
 import {
-  ALIGN_CENTER,
-  COLORS,
   DIRECTION_COLUMN,
   Divider,
   Flex,
-  Icon,
-  ListItem,
   SPACING,
   StyledText,
   Tabs,
-  Tooltip,
-  useHoverTooltip,
 } from '@opentrons/components'
 import { getTrashOrLabware } from '@opentrons/step-generation'
 import {
@@ -53,6 +47,7 @@ import {
   getFormLevelError,
   getLabwareFieldForPositioningField,
 } from '../../utils'
+import { MultiInputField } from './MultiInputField'
 import type { StepFieldName } from '../../../../../../form-types'
 import type { StepFormProps } from '../../types'
 
@@ -70,7 +65,6 @@ export function MoveLiquidTools(props: StepFormProps): JSX.Element {
     tab,
     setTab,
   } = props
-  const [targetProps, tooltipProps] = useHoverTooltip()
   const { t, i18n } = useTranslation(['protocol_steps', 'form', 'tooltip'])
   const { path } = formData
   const additionalEquipmentEntities = useSelector(
@@ -330,62 +324,66 @@ export function MoveLiquidTools(props: StepFormProps): JSX.Element {
       {enableLiquidClasses ? (
         <>
           <Divider marginY="0" />
-          <Flex
-            flexDirection={DIRECTION_COLUMN}
-            gridGap={SPACING.spacing8}
-            padding={`0 ${SPACING.spacing16}`}
-          >
-            <Flex gridGap={SPACING.spacing8} alignItems={ALIGN_CENTER}>
-              <StyledText
-                desktopStyle="bodyDefaultRegular"
-                color={COLORS.grey60}
-              >
-                {t('protocol_steps:submerge')}
-              </StyledText>
-              <Flex {...targetProps}>
-                <Icon
-                  name="information"
-                  size="1rem"
-                  color={COLORS.grey60}
-                  data-testid="information_icon"
-                />
-              </Flex>
-              <Tooltip tooltipProps={tooltipProps}>
-                {t(`tooltip:step_fields.defaults.${tab}_submerge`)}
-              </Tooltip>
-            </Flex>
-            <ListItem type="noActive">
-              <Flex
-                padding={SPACING.spacing12}
-                width="100%"
-                flexDirection={DIRECTION_COLUMN}
-                gridGap={SPACING.spacing8}
-              >
-                <InputStepFormField
-                  showTooltip={false}
-                  padding="0"
-                  title={t('protocol_steps:submerge_speed')}
-                  {...propsForFields[`${tab}_submerge_speed`]}
-                  units={t('application:units.millimeterPerSec')}
-                  errorToShow={getFormLevelError(
-                    `${tab}_submerge_speed`,
-                    mappedErrorsToField
-                  )}
-                />
-                <InputStepFormField
-                  showTooltip={false}
-                  padding="0"
-                  title={t('protocol_steps:delay_duration')}
-                  {...propsForFields[`${tab}_submerge_delay_seconds`]}
-                  units={t('application:units.seconds')}
-                  errorToShow={getFormLevelError(
-                    `${tab}_submerge_delay_seconds`,
-                    mappedErrorsToField
-                  )}
-                />
-              </Flex>
-            </ListItem>
-          </Flex>
+          <MultiInputField
+            name="submerge"
+            tab={tab}
+            tooltipContent={t(`tooltip:step_fields.defaults.${tab}_submerge`)}
+            propsForFields={propsForFields}
+            fields={[
+              {
+                fieldTitle: 'protocol_steps:submerge_speed',
+                fieldKey: `${tab}_submerge_speed`,
+                units: 'application:units.millimeterPerSec',
+                errorToShow: getFormLevelError(
+                  `${tab}_submerge_speed`,
+                  mappedErrorsToField
+                ),
+              },
+              {
+                fieldTitle: 'protocol_steps:delay_duration',
+                fieldKey: `${tab}_submerge_delay_seconds`,
+                units: 'application:units.seconds',
+                errorToShow: getFormLevelError(
+                  `${tab}_submerge_delay_seconds`,
+                  mappedErrorsToField
+                ),
+              },
+            ]}
+          />
+          <MultiInputField
+            name="retract"
+            tab={tab}
+            tooltipContent={t(`tooltip:step_fields.defaults.${tab}_retract`)}
+            propsForFields={propsForFields}
+            fields={[
+              {
+                fieldTitle: 'protocol_steps:retract_speed',
+                fieldKey: `${tab}_retract_speed`,
+                units: 'application:units.millimeterPerSec',
+                errorToShow: getFormLevelError(
+                  `${tab}_retract_speed`,
+                  mappedErrorsToField
+                ),
+              },
+              {
+                fieldTitle: 'protocol_steps:delay_duration',
+                fieldKey: `${tab}_retract_delay_seconds`,
+                units: 'application:units.seconds',
+                errorToShow: getFormLevelError(
+                  `${tab}_retract_delay_seconds`,
+                  mappedErrorsToField
+                ),
+              },
+            ]}
+            extraButton={true}
+            labwareId={
+              formData[
+                getLabwareFieldForPositioningField(
+                  addFieldNamePrefix('mmFromBottom')
+                )
+              ]
+            }
+          />
         </>
       ) : null}
       <Divider marginY="0" />

protocol-designer/src/step-forms/test/createPresavedStepForm.test.ts

@@ -160,6 +160,8 @@ describe('createPresavedStepForm', () => {
       aspirate_mix_times: null,
       aspirate_mix_volume: null,
       aspirate_mmFromBottom: null,
+      aspirate_retract_delay_seconds: null,
+      aspirate_retract_speed: null,
       aspirate_submerge_delay_seconds: null,
       aspirate_submerge_speed: null,
       aspirate_touchTip_checkbox: false,
@@ -179,6 +181,8 @@ describe('createPresavedStepForm', () => {
       dispense_mix_times: null,
       dispense_mix_volume: null,
       dispense_mmFromBottom: null,
+      dispense_retract_delay_seconds: null,
+      dispense_retract_speed: null,
       dispense_submerge_delay_seconds: null,
       dispense_submerge_speed: null,
       dispense_touchTip_checkbox: false,

protocol-designer/src/steplist/formLevel/getDefaultsForStepType.ts

@@ -61,6 +61,8 @@ export function getDefaultsForStepType(
         aspirate_mix_times: null,
         aspirate_mix_volume: null,
         aspirate_mmFromBottom: null,
+        aspirate_retract_delay_seconds: null,
+        aspirate_retract_speed: null,
         aspirate_submerge_delay_seconds: null,
         aspirate_submerge_speed: null,
         aspirate_touchTip_checkbox: false,
@@ -87,6 +89,8 @@ export function getDefaultsForStepType(
         dispense_mix_times: null,
         dispense_mix_volume: null,
         dispense_mmFromBottom: null,
+        dispense_retract_delay_seconds: null,
+        dispense_retract_speed: null,
         dispense_submerge_delay_seconds: null,
         dispense_submerge_speed: null,
         dispense_touchTip_checkbox: false,

protocol-designer/src/steplist/formLevel/test/getDefaultsForStepType.test.ts

@@ -34,6 +34,8 @@ describe('getDefaultsForStepType', () => {
         aspirate_mix_times: null,
         aspirate_mix_volume: null,
         aspirate_mmFromBottom: null,
+        aspirate_retract_delay_seconds: null,
+        aspirate_retract_speed: null,
         aspirate_submerge_delay_seconds: null,
         aspirate_submerge_speed: null,
         aspirate_touchTip_checkbox: false,
@@ -48,6 +50,8 @@ describe('getDefaultsForStepType', () => {
         dispense_mix_times: null,
         dispense_mix_volume: null,
         dispense_mmFromBottom: null,
+        dispense_retract_delay_seconds: null,
+        dispense_retract_speed: null,
         dispense_submerge_delay_seconds: null,
         dispense_submerge_speed: null,
         dispense_touchTip_checkbox: false,