tip position modal for all fields

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

@@ -86,7 +86,7 @@
     },
     "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",
+      "aspirate_mmFromBottom": "Change where in the well the robot aspirates from.",
       "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",

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

@@ -107,6 +107,7 @@
   "reject": "Reject",
   "reset_hints_and_tips": "Reset all hints and tips notifications",
   "reset_hints": "Reset hints",
+  "reset_to_default": "Reset to default",
   "review_our_privacy_policy": "You can adjust this setting at any time by clicking on the settings icon. Find detailed information in our <link1>privacy policy</link1>.",
   "right": "Right",
   "save": "Save",
@@ -121,6 +122,7 @@
   "step_count": "Step {{current}}",
   "step": "Step {{current}} / {{max}}",
   "consent_to_eula": "By using Protocol Designer, you consent to the Opentrons <link1>EULA</link1>.",
+  "swap_view": "Swap view",
   "temperaturemoduletype": "Temperature Module",
   "thermocyclermoduletype": "Thermocycler Module",
   "trashBin": "Trash Bin",

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 =
+    Number(fractionOfWellHeight) * WELL_HEIGHT_PIXELS - WELL_HEIGHT_PIXELS
+  const roundedPixelsFromBottom = round(pixelsFromBottom, PIXEL_DECIMALS)
+  const bottomPx = wellDepthMm
+    ? roundedPixelsFromBottom * 2
+    : mmFromBottom - WELL_HEIGHT_PIXELS
+
+  const xPx = (WELL_WIDTH_PIXELS / xWidthMm) * xPosition
+  const roundedXPx = round(xPx, PIXEL_DECIMALS)
+
+  return (
+    <Box
+      position={POSITION_RELATIVE}
+      width="253px"
+      height="288px"
+      overflow={OVERFLOW_HIDDEN}
+    >
+      <img src={BOTTOM_LAYER} style={{ position: POSITION_ABSOLUTE }} />
+      <img
+        src={MID_LAYER}
+        style={{
+          position: POSITION_ABSOLUTE,
+          transform: `translate(${roundedXPx}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>
+  )
+}

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

@@ -0,0 +1,61 @@
+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_top_bottom_layer.svg'
+import MID_LAYER from '../../assets/images/tip_top_mid_layer.svg'
+import TOP_LAYER from '../../assets/images/tip_top_top_layer.svg'
+
+const WELL_WIDTH_PIXELS = 70
+const PIXEL_DECIMALS = 2
+
+interface TipPositionAllVizProps {
+  xPosition: number
+  xWidthMm: number
+  yPosition: number
+  yWidthMm: number
+}
+
+export function TipPositionTopView(props: TipPositionAllVizProps): JSX.Element {
+  const { yPosition, xPosition, yWidthMm, xWidthMm } = props
+  const { t } = useTranslation('application')
+
+  const xPx = (WELL_WIDTH_PIXELS / xWidthMm) * xPosition
+  const yPx = (WELL_WIDTH_PIXELS / yWidthMm) * yPosition
+
+  const roundedXPx = round(xPx, PIXEL_DECIMALS)
+  const roundedYPx = round(yPx, PIXEL_DECIMALS)
+  const translateY = roundedYPx < 0 ? Math.abs(roundedYPx) : -roundedYPx
+  return (
+    <Box
+      position={POSITION_RELATIVE}
+      width="253px"
+      height="288px"
+      overflow={OVERFLOW_HIDDEN}
+    >
+      <img src={BOTTOM_LAYER} style={{ position: POSITION_ABSOLUTE }} />
+      <img
+        src={MID_LAYER}
+        style={{
+          position: POSITION_ABSOLUTE,
+          transform: `translate(${roundedXPx}px, ${translateY}px)`,
+        }}
+      />
+      <img src={TOP_LAYER} style={{ position: POSITION_ABSOLUTE }} />
+      {xWidthMm !== null && (
+        <Box position={POSITION_ABSOLUTE} bottom="2rem" right="7rem">
+          <StyledText desktopStyle="captionRegular" color={COLORS.grey60}>
+            {xWidthMm}
+            {t('units.millimeter')}
+          </StyledText>
+        </Box>
+      )}
+    </Box>
+  )
+}

protocol-designer/src/organisms/TipPositionModal/constants.ts

@@ -0,0 +1,5 @@
+export const DECIMALS_ALLOWED = 1
+export const SMALL_STEP_MM = 1
+export const LARGE_STEP_MM = 10
+export const TOO_MANY_DECIMALS: 'TOO_MANY_DECIMALS' = 'TOO_MANY_DECIMALS'
+export const PERCENT_RANGE_TO_SHOW_WARNING = 0.9