feat(protocol-designer): tip positioning modal and assets (#16612)

closes AUTH-928

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

@@ -76,23 +76,23 @@
   "tip_position": {
     "title": "Tip Positioning",
     "caption": "between {{min}} and {{max}}",
-    "warning": "One or more position offset values are close to the edge of the well and might collide with it",
+    "warning": "Tip position is close to the edge of the well and may cause collisions.",
     "radio_button": {
       "default": "{{defaultMmFromBottom}} mm from the bottom center (default)",
       "blowout": "0 mm from the top center (default)",
       "mix": "Aspirate 1mm, Dispense 0.5mm from the bottom center (default)",
       "custom": "Custom"
     },
     "body": {
-      "blowout_z_offset": "Change from where in the well the robot emits blowout",
-      "aspirate_mmFromBottom": "Change from where in the well the robot aspirates",
-      "dispense_mmFromBottom": "Change from where in the well the robot dispenses",
-      "mix_mmFromBottom": "Change from where in the well the robot aspirates and dispenses during the mix",
-      "aspirate_touchTip_mmFromBottom": "Change from where in the well the robot performs touch tip",
-      "dispense_touchTip_mmFromBottom": "Change from where in the well the robot performs touch tip",
-      "mix_touchTip_mmFromBottom": "Change from where in the well the robot performs touch tip",
-      "aspirate_delay_mmFromBottom": "Change from where in the well the robot delays after aspirating",
-      "dispense_delay_mmFromBottom": "Change from where in the well the robot delays after dispensing"
+      "blowout_z_offset": "Change where in the well the robot performs the blowout.",
+      "aspirate_mmFromBottom": "Change where in the well the robot aspirates from.",
+      "dispense_mmFromBottom": "Change where in the well the robot dispenses from.",
+      "mix_mmFromBottom": "Change from where in the well the robot aspirates and dispenses during the mix.",
+      "aspirate_touchTip_mmFromBottom": "Change from where in the well the robot performs the touch tip.",
+      "dispense_touchTip_mmFromBottom": "Change from where in the well the robot performs the touch tip.",
+      "mix_touchTip_mmFromBottom": "Change from where in the well the robot performs the touch tip.",
+      "aspirate_delay_mmFromBottom": "Change from where in the well the robot delays after aspirating.",
+      "dispense_delay_mmFromBottom": "Change from where in the well the robot delays after dispensing."
     },
     "field_titles": {
       "z_position": "Z position",

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

@@ -98,9 +98,9 @@
   "not_json": "Incompatible file type",
   "one_channel": "1-Channel",
   "only_tiprack": "Incompatible file type",
-  "opentrons_collects_data": "In order to improve our products, Opentrons would like to collect data related to your use of Protocol Designer. With your consent, Opentrons will collect and store analytics and session data, including through the use of cookies and similar technologies, solely for the purpose enhancing our products.",
   "opentrons_flex": "Opentrons Flex",
   "opentrons": "Opentrons",
+  "opentrons_collects_data": "In order to improve our products, Opentrons would like to collect data related to your use of Protocol Designer. With your consent, Opentrons will collect and store analytics and session data, including through the use of cookies and similar technologies, solely for the purpose enhancing our products.",
   "ot2": "Opentrons OT-2",
   "overwrite_labware": "Overwrite labware",
   "overwrite": "Click Overwrite to replace the existing labware with the new labware.",
@@ -131,8 +131,16 @@
   "stagingArea": "Staging area",
   "step_count": "Step {{current}}",
   "step": "Step {{current}} / {{max}}",
+  "swap_view": "Swap view",
   "temperaturemoduletype": "Temperature Module",
   "thermocyclermoduletype": "Thermocycler Module",
+  "tip_position_aspirate_delay_mmFromBottom": "Edit aspirate delay position",
+  "tip_position_aspirate_touchTip_mmFromBottom": "Edit aspirate touch tip position",
+  "tip_position_blowout_z_offset": "Edit blowout position",
+  "tip_position_dispense_delay_mmFromBottom": "Edit dispense delay position",
+  "tip_position_dispense_touchTip_mmFromBottom": "Edit dispense touch tip position",
+  "tip_position_mix_touchTip_mmFromBottom": "Edit touch tip position",
+  "tip_position": "Edit {{prefix}} tip position",
   "trashBin": "Trash Bin",
   "updated_protocol_designer": "We've updated Protocol Designer!",
   "user_settings": "User settings",

protocol-designer/src/components/StepEditForm/fields/TipPositionField/__tests__/TipPositionModal.test.tsx

@@ -50,7 +50,7 @@ describe('TipPositionModal', () => {
   it('renders the modal text and radio button text', () => {
     render(props)
     screen.getByText('Tip Positioning')
-    screen.getByText('Change from where in the well the robot aspirates')
+    screen.getByText('Change where in the well the robot aspirates from.')
     screen.getByRole('radio', { name: '1 mm from the bottom center (default)' })
     screen.getByRole('radio', { name: 'Custom' })
     fireEvent.click(screen.getByText('cancel'))
@@ -66,15 +66,15 @@ describe('TipPositionModal', () => {
     render(props)
     screen.getByText('warning')
     screen.getByText(
-      'One or more position offset values are close to the edge of the well and might collide with it'
+      'Tip position is close to the edge of the well and may cause collisions.'
     )
   })
   it('renders the alert if the x/y position values are too close to the max/min for y value', () => {
     props.specs.y.value = -9.7
     render(props)
     screen.getByText('warning')
     screen.getByText(
-      'One or more position offset values are close to the edge of the well and might collide with it'
+      'Tip position is close to the edge of the well and may cause collisions.'
     )
   })
   it('renders the custom options, captions, and visual', () => {

protocol-designer/src/components/StepEditForm/fields/TipPositionField/__tests__/ZTipPositionModal.test.tsx

@@ -31,7 +31,7 @@ describe('ZTipPositionModal', () => {
   it('renders the text and radio buttons', () => {
     render(props)
     screen.getByText('Tip Positioning')
-    screen.getByText('Change from where in the well the robot emits blowout')
+    screen.getByText('Change where in the well the robot performs the blowout.')
     screen.getByRole('radio', { name: '0 mm from the top center (default)' })
     screen.getByRole('radio', { name: 'Custom' })
     fireEvent.click(screen.getByText('cancel'))

protocol-designer/src/organisms/TipPositionModal/TipPositionSideView.tsx

@@ -0,0 +1,77 @@
+import round from 'lodash/round'
+import { useTranslation } from 'react-i18next'
+import {
+  Box,
+  COLORS,
+  OVERFLOW_HIDDEN,
+  POSITION_ABSOLUTE,
+  POSITION_RELATIVE,
+  StyledText,
+} from '@opentrons/components'
+import BOTTOM_LAYER from '../../assets/images/tip_side_bottom_layer.svg'
+import MID_LAYER from '../../assets/images/tip_side_mid_layer.svg'
+import TOP_LAYER from '../../assets/images/tip_side_top_layer.svg'
+
+const WELL_HEIGHT_PIXELS = 71
+const WELL_WIDTH_PIXELS = 70
+const PIXEL_DECIMALS = 2
+
+interface TipPositionAllVizProps {
+  mmFromBottom: number
+  xPosition: number
+  wellDepthMm: number
+  xWidthMm: number
+}
+
+export function TipPositionSideView(
+  props: TipPositionAllVizProps
+): JSX.Element {
+  const { mmFromBottom, xPosition, wellDepthMm, xWidthMm } = props
+  const { t } = useTranslation('application')
+  const fractionOfWellHeight = mmFromBottom / wellDepthMm
+  const pixelsFromBottom =
+    fractionOfWellHeight * WELL_HEIGHT_PIXELS - WELL_HEIGHT_PIXELS
+  const roundedPixelsFromBottom = round(pixelsFromBottom, PIXEL_DECIMALS)
+  const bottomPx = wellDepthMm
+    ? roundedPixelsFromBottom * 2
+    : mmFromBottom - WELL_HEIGHT_PIXELS
+
+  const xPositionPixels = (WELL_WIDTH_PIXELS / xWidthMm) * xPosition
+  const roundedXPositionPixels = round(xPositionPixels, PIXEL_DECIMALS)
+
+  return (
+    <Box
+      position={POSITION_RELATIVE}
+      width="15.8125rem"
+      height="18rem"
+      overflow={OVERFLOW_HIDDEN}
+    >
+      <img src={BOTTOM_LAYER} style={{ position: POSITION_ABSOLUTE }} />
+      <img
+        src={MID_LAYER}
+        style={{
+          position: POSITION_ABSOLUTE,
+          transform: `translate(${roundedXPositionPixels}px)`,
+          bottom: `calc(${bottomPx}px + 33px)`,
+        }}
+      />
+      <img src={TOP_LAYER} style={{ position: POSITION_ABSOLUTE }} />
+      {wellDepthMm !== null && (
+        <Box position={POSITION_ABSOLUTE} bottom="7.3rem" right="2rem">
+          <StyledText desktopStyle="captionRegular" color={COLORS.grey60}>
+            {round(wellDepthMm, 0)}
+            {t('units.millimeter')}
+          </StyledText>
+        </Box>
+      )}
+      {xWidthMm !== null && (
+        <Box position={POSITION_ABSOLUTE} bottom="2rem" right="7rem">
+          <StyledText desktopStyle="captionRegular" color={COLORS.grey60}>
+            {xWidthMm}
+            {t('units.millimeter')}
+          </StyledText>
+        </Box>
+      )}
+    </Box>
+  )
+}