feat(protocol-designer, step-generation): x/Y tip positioning for asp…

…, disp, mix

closes AUTH-5

components/src/forms/InputField.tsx

@@ -36,7 +36,7 @@ export interface InputFieldProps {
   /** appears to the right of the caption. Used for character limits, eg '0/45' */
   secondaryCaption?: string | null | undefined
   /** optional input type (default "text") */
-  type?: typeof INPUT_TYPE_TEXT | typeof INPUT_TYPE_PASSWORD
+  type?: typeof INPUT_TYPE_TEXT | typeof INPUT_TYPE_PASSWORD | 'number'
   /** mouse click handler */
   onClick?: (event: React.MouseEvent<HTMLInputElement>) => unknown
   /** focus handler */

protocol-designer/src/components/BatchEditForm/BatchEditMix.tsx

@@ -88,7 +88,10 @@ export const BatchEditMix = (props: BatchEditMixProps): JSX.Element => {
                 tiprack={propsForFields.tipRack.value}
               />
               <TipPositionField
-                {...propsForFields.mix_mmFromBottom}
+                propsForFields={propsForFields}
+                zField="mix_mmFromBottom"
+                xField="mix_x_position"
+                yField="mix_y_position"
                 labwareId={getLabwareIdForPositioningField('mix_mmFromBottom')}
               />
               <WellOrderField
@@ -145,7 +148,8 @@ export const BatchEditMix = (props: BatchEditMixProps): JSX.Element => {
               className={styles.small_field}
             >
               <TipPositionField
-                {...propsForFields.mix_touchTip_mmFromBottom}
+                propsForFields={propsForFields}
+                zField="mix_touchTip_mmFromBottom"
                 labwareId={getLabwareIdForPositioningField(
                   'mix_touchTip_mmFromBottom'
                 )}

protocol-designer/src/components/BatchEditForm/BatchEditMoveLiquid.tsx

@@ -71,7 +71,10 @@ const SourceDestBatchEditMoveLiquidFields = (props: {
           tiprack={propsForFields.tipRack.value}
         />
         <TipPositionField
-          {...propsForFields[addFieldNamePrefix('mmFromBottom')]}
+          propsForFields={propsForFields}
+          zField={`${prefix}_mmFromBottom`}
+          xField={`${prefix}_x_position`}
+          yField={`${prefix}_y_position`}
           labwareId={getLabwareIdForPositioningField(
             addFieldNamePrefix('mmFromBottom')
           )}
@@ -124,7 +127,8 @@ const SourceDestBatchEditMoveLiquidFields = (props: {
         className={styles.small_field}
       >
         <TipPositionField
-          {...propsForFields[addFieldNamePrefix('touchTip_mmFromBottom')]}
+          propsForFields={propsForFields}
+          zField={`${prefix}_touchTip_mmFromBottom`}
           labwareId={getLabwareIdForPositioningField(
             addFieldNamePrefix('touchTip_mmFromBottom')
           )}

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

@@ -37,7 +37,8 @@ export const DelayFields = (props: DelayFieldProps): JSX.Element => {
       />
       {tipPositionFieldName && (
         <TipPositionField
-          {...propsForFields[tipPositionFieldName]}
+          propsForFields={propsForFields}
+          zField={tipPositionFieldName as any}
           labwareId={labwareId}
         />
       )}

protocol-designer/src/components/StepEditForm/fields/TipPositionField/TipPositionAllViz.tsx

@@ -0,0 +1,54 @@
+import * as React from 'react'
+import round from 'lodash/round'
+
+import PIPETTE_TIP_IMAGE from '../../../../images/pipette_tip.svg'
+import WELL_CROSS_SECTION_IMAGE from '../../../../images/well_cross_section.svg'
+
+import styles from './TipPositionInput.module.css'
+
+const WELL_HEIGHT_PIXELS = 145
+const WELL_WIDTH_PIXELS = 100
+const PIXEL_DECIMALS = 2
+
+interface TipPositionAllVizProps {
+  mmFromBottom: number
+  xPosition: number
+  wellDepthMm: number
+  xWidthMm: number
+}
+
+export const TipPositionAllViz = (
+  props: TipPositionAllVizProps
+): JSX.Element => {
+  const { mmFromBottom, xPosition, wellDepthMm, xWidthMm } = props
+  const fractionOfWellHeight = mmFromBottom / wellDepthMm
+  const pixelsFromBottom =
+    Number(fractionOfWellHeight) * WELL_HEIGHT_PIXELS - WELL_HEIGHT_PIXELS
+  const roundedPixelsFromBottom = round(pixelsFromBottom, PIXEL_DECIMALS)
+  const bottomPx = wellDepthMm
+    ? roundedPixelsFromBottom
+    : mmFromBottom - WELL_HEIGHT_PIXELS
+
+  const xPx = (WELL_WIDTH_PIXELS / xWidthMm) * xPosition
+  const roundedXPx = round(xPx, PIXEL_DECIMALS)
+  return (
+    <div className={styles.viz_wrapper}>
+      <img
+        src={PIPETTE_TIP_IMAGE}
+        className={styles.pipette_tip_image}
+        style={{
+          bottom: `${bottomPx}px`,
+          left: `calc(${roundedXPx}px - 22px)`,
+        }}
+      />
+
+      {props.wellDepthMm !== null && (
+        <span className={styles.well_height_label}>{props.wellDepthMm}mm</span>
+      )}
+      <img
+        src={WELL_CROSS_SECTION_IMAGE}
+        className={styles.well_cross_section_image}
+      />
+    </div>
+  )
+}

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

@@ -11,7 +11,7 @@
   display: flex;
   flex-direction: row;
   justify-content: space-between;
-  margin: 3rem 0 2rem;
+  margin: 1rem 0 2rem;
 }
 
 .position_from_bottom_input {