feat(protocol-designer, step-generation): custom z offset for blowout (#14793)

closes AUTH-7

Author: jerader

protocol-designer/fixtures/protocol/8/doItAllV3MigratedToV8.json

@@ -101,6 +101,7 @@
           "dispense_touchTip_mmFromBottom": 40,
           "disposalVolume_checkbox": true,
           "disposalVolume_volume": "20",
+          "blowout_z_offset": 0,
           "blowout_checkbox": false,
           "blowout_location": "8053a205-f2dc-4b1d-8d05-bf8233949e2e:trashBin",
           "preWetTip": false,
@@ -157,6 +158,7 @@
           "labware": "1e610d40-75c7-11ea-b42f-4b64e50f43e5:opentrons/nest_96_wellplate_100ul_pcr_full_skirt/1",
           "mix_wellOrder_first": "t2b",
           "mix_wellOrder_second": "l2r",
+          "blowout_z_offset": 0,
           "blowout_checkbox": true,
           "blowout_location": "8053a205-f2dc-4b1d-8d05-bf8233949e2e:trashBin",
           "mix_mmFromBottom": 0.5,

protocol-designer/fixtures/protocol/8/doItAllV4MigratedToV8.json

@@ -135,6 +135,7 @@
           "dispense_touchTip_mmFromBottom": null,
           "disposalVolume_checkbox": true,
           "disposalVolume_volume": "20",
+          "blowout_z_offset": 0,
           "blowout_checkbox": false,
           "blowout_location": "84882326-9cd3-428e-8352-89f133a1fe5d:trashBin",
           "preWetTip": false,

protocol-designer/fixtures/protocol/8/doItAllV7MigratedToV8.json

@@ -179,6 +179,7 @@
           "dispense_touchTip_mmFromBottom": null,
           "disposalVolume_checkbox": true,
           "disposalVolume_volume": "100",
+          "blowout_z_offset": 0,
           "blowout_checkbox": false,
           "blowout_location": "4824b094-5999-4549-9e6b-7098a9b30a8b:trashBin",
           "preWetTip": false,
@@ -209,6 +210,7 @@
           "labware": "fcba73e7-b88e-438e-963e-f8b9a5de0983:opentrons/nest_96_wellplate_100ul_pcr_full_skirt/2",
           "mix_wellOrder_first": "t2b",
           "mix_wellOrder_second": "l2r",
+          "blowout_z_offset": 0,
           "blowout_checkbox": false,
           "blowout_location": "4824b094-5999-4549-9e6b-7098a9b30a8b:trashBin",
           "mix_mmFromBottom": 0.5,

protocol-designer/fixtures/protocol/8/doItAllV8.json

@@ -158,6 +158,7 @@
           "dispense_y_position": 0,
           "aspirate_x_position": 0,
           "aspirate_y_position": 0,
+          "blowout_z_offset": 0,
           "id": "d2f74144-a7bf-4ba2-aaab-30d70b2b62c7",
           "stepType": "moveLiquid",
           "stepName": "transfer",

protocol-designer/fixtures/protocol/8/example_1_1_0MigratedToV8.json

@@ -114,6 +114,7 @@
           "disposalVolume_checkbox": true,
           "disposalVolume_volume": "1",
           "blowout_checkbox": true,
+          "blowout_z_offset": 0,
           "blowout_location": "9b1c0d01-9d4f-4016-afe6-9e08b46acf5e:trashBin",
           "preWetTip": false,
           "aspirate_airGap_checkbox": false,
@@ -143,6 +144,7 @@
           "labware": "dafd4000-92a5-11e9-ac62-1b173f839d9e:96-deep-well",
           "mix_wellOrder_first": "t2b",
           "mix_wellOrder_second": "l2r",
+          "blowout_z_offset": 0,
           "blowout_checkbox": true,
           "blowout_location": "dafd4000-92a5-11e9-ac62-1b173f839d9e:96-deep-well",
           "mix_mmFromBottom": 0.5,
@@ -5695,7 +5697,7 @@
         "labwareId": "dafd4000-92a5-11e9-ac62-1b173f839d9e:96-deep-well",
         "wellName": "A1",
         "flowRate": 7,
-        "wellLocation": { "origin": "bottom", "offset": { "z": 41.3 } }
+        "wellLocation": { "origin": "top", "offset": { "z": 0 } }
       }
     },
     {

protocol-designer/fixtures/protocol/8/mix_8_0_0.json

@@ -58,6 +58,7 @@
           "labware": null,
           "mix_wellOrder_first": "t2b",
           "mix_wellOrder_second": "l2r",
+          "blowout_z_offset": 0,
           "blowout_checkbox": false,
           "blowout_location": "5ba7047d-d3e2-4845-9eaa-1974af796ead:trashBin",
           "mix_mmFromBottom": 0.5,

protocol-designer/fixtures/protocol/8/ninetySixChannelFullAndColumn.json

@@ -78,6 +78,7 @@
           "dispense_touchTip_mmFromBottom": null,
           "disposalVolume_checkbox": true,
           "disposalVolume_volume": "5",
+          "blowout_z_offset": 0,
           "blowout_checkbox": false,
           "blowout_location": null,
           "preWetTip": false,
@@ -133,6 +134,7 @@
           "dispense_touchTip_mmFromBottom": null,
           "disposalVolume_checkbox": true,
           "disposalVolume_volume": "5",
+          "blowout_z_offset": 0,
           "blowout_checkbox": false,
           "blowout_location": null,
           "preWetTip": false,

protocol-designer/src/components/StepEditForm/fields/BlowoutLocationField.tsx

@@ -7,8 +7,8 @@ import styles from '../StepEditForm.module.css'
 import { FieldProps } from '../types'
 
 type BlowoutLocationDropdownProps = FieldProps & {
-  className?: string
   options: Options
+  className?: string
 }
 
 export const BlowoutLocationField = (
@@ -28,7 +28,7 @@ export const BlowoutLocationField = (
 
   return (
     <DropdownField
-      className={cx(styles.large_field, className)}
+      className={cx(styles.small_field, className)}
       options={options}
       disabled={disabled}
       id={'BlowoutLocationField_dropdown'}

protocol-designer/src/components/StepEditForm/fields/BlowoutZOffsetField.tsx

@@ -0,0 +1,80 @@
+import * as React from 'react'
+import { useSelector } from 'react-redux'
+import {
+  DEST_WELL_BLOWOUT_DESTINATION,
+  SOURCE_WELL_BLOWOUT_DESTINATION,
+} from '@opentrons/step-generation'
+import {
+  COLORS,
+  Flex,
+  Icon,
+  Tooltip,
+  useHoverTooltip,
+} from '@opentrons/components'
+import { getLabwareEntities } from '../../../step-forms/selectors'
+import { ZTipPositionModal } from './TipPositionField/ZTipPositionModal'
+import type { FieldProps } from '../types'
+
+interface BlowoutZOffsetFieldProps extends FieldProps {
+  destLabwareId: unknown
+  sourceLabwareId?: unknown
+  blowoutLabwareId?: unknown
+}
+
+export function BlowoutZOffsetField(
+  props: BlowoutZOffsetFieldProps
+): JSX.Element {
+  const {
+    disabled,
+    value,
+    destLabwareId,
+    sourceLabwareId,
+    blowoutLabwareId,
+    tooltipContent,
+    name,
+    updateValue,
+  } = props
+  const [isModalOpen, setModalOpen] = React.useState<boolean>(false)
+  const [targetProps, tooltipProps] = useHoverTooltip()
+  const labwareEntities = useSelector(getLabwareEntities)
+
+  let labwareId = null
+  if (blowoutLabwareId === SOURCE_WELL_BLOWOUT_DESTINATION) {
+    labwareId = sourceLabwareId
+  } else if (blowoutLabwareId === DEST_WELL_BLOWOUT_DESTINATION) {
+    labwareId = destLabwareId
+  }
+
+  const labwareZDimension =
+    labwareId != null
+      ? labwareEntities[String(labwareId)]?.def.dimensions.zDimension
+      : 0
+
+  return (
+    <>
+      <Tooltip {...tooltipProps}>{tooltipContent}</Tooltip>
+      {isModalOpen ? (
+        <ZTipPositionModal
+          closeModal={() => setModalOpen(false)}
+          name={name}
+          zValue={Number(value)}
+          updateValue={updateValue}
+          wellDepthMm={labwareZDimension}
+        />
+      ) : null}
+      <Flex
+        {...targetProps}
+        onClick={disabled ? undefined : () => setModalOpen(true)}
+        id={`BlowoutZOffsetField_${name}`}
+        data-testid={`BlowoutZOffsetField_${name}`}
+      >
+        <Icon
+          name="ot-calibrate"
+          size="1.5rem"
+          cursor="pointer"
+          color={disabled ? COLORS.grey30 : COLORS.grey50}
+        />
+      </Flex>
+    </>
+  )
+}

protocol-designer/src/components/StepEditForm/fields/TipPositionField/TipPositionInput.module.css

@@ -56,7 +56,6 @@
   font-weight: var(--fw-semibold);
   color: var(--c-blue);
   position: absolute;
-  right: 10px;
   bottom: 45px;
   align-self: flex-end;
 }