+ 
+
+ {props.wellDepthMm !== null && (
+ {props.wellDepthMm}mm
+ )}
+ 
+
+ )
+}
diff --git a/protocol-designer/src/components/StepEditForm/fields/TipPositionField/TipPositionInput.module.css b/protocol-designer/src/components/StepEditForm/fields/TipPositionField/TipPositionInput.module.css
index 181c6ae6f0d..36818a42e4b 100644
--- a/protocol-designer/src/components/StepEditForm/fields/TipPositionField/TipPositionInput.module.css
+++ b/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 {
@@ -65,3 +65,14 @@
position: relative;
left: 9px;
}
+
+.tip_position_icon {
+ height: 1.5rem;
+ width: 1.5rem;
+ cursor: pointer;
+ color: #24313f; /* black80 */
+}
+
+.tip_position_icon:hover {
+ background-color: #e6e6e6;
+}
diff --git a/protocol-designer/src/components/StepEditForm/fields/TipPositionField/TipPositionModal.tsx b/protocol-designer/src/components/StepEditForm/fields/TipPositionField/TipPositionModal.tsx
index b2417810488..0d79a39ae9a 100644
--- a/protocol-designer/src/components/StepEditForm/fields/TipPositionField/TipPositionModal.tsx
+++ b/protocol-designer/src/components/StepEditForm/fields/TipPositionField/TipPositionModal.tsx
@@ -2,107 +2,84 @@ import * as React from 'react'
import { createPortal } from 'react-dom'
import cx from 'classnames'
import { useTranslation } from 'react-i18next'
-import round from 'lodash/round'
import {
AlertModal,
+ DIRECTION_COLUMN,
Flex,
- HandleKeypress,
- Icon,
InputField,
- OutlineButton,
RadioGroup,
+ SPACING,
+ StyledText,
} from '@opentrons/components'
import { getMainPagePortalEl } from '../../../portals/MainPageModalPortal'
import modalStyles from '../../../modals/modal.module.css'
import { getIsTouchTipField } from '../../../../form-types'
-import { TipPositionZAxisViz } from './TipPositionZAxisViz'
+import { TOO_MANY_DECIMALS } from './constants'
+import { TipPositionAllViz } from './TipPositionAllViz'
import styles from './TipPositionInput.module.css'
import * as utils from './utils'
-import type { StepFieldName } from '../../../../form-types'
-const SMALL_STEP_MM = 1
-const LARGE_STEP_MM = 10
-const DECIMALS_ALLOWED = 1
+import type { StepFieldName } from '../../../../form-types'
-interface Props {
- closeModal: () => unknown
- isIndeterminate?: boolean
- mmFromBottom: number | null
+type Offset = 'x' | 'y' | 'z'
+interface PositionSpec {
name: StepFieldName
- updateValue: (val: number | null | undefined) => unknown
- wellDepthMm: number
+ value: number | null
+ updateValue: (val?: number | null) => void
}
+export type PositionSpecs = Record
-
- {t('tip_position.title')}
-{t(`tip_position.body.${name}`)}
-
-
-
+
+
- ) => {
- setIsDefault(e.currentTarget.value === 'default')
- }}
- options={[
- {
- name: isMixAspDispField
- ? `Aspirate 1mm, Dispense 0.5mm from the bottom (default)`
- : `${defaultMmFromBottom} mm from the bottom (default)`,
- value: 'default',
- },
- {
- name: 'Custom',
- value: 'custom',
- },
- ]}
- name="TipPositionOptions"
- />
- {TipPositionInputField}
-
-
-
- {!isDefault && (
-
+
-
-
-
-
-
- )}
-
+
+ {t('tip_position.title')}
+{t(`tip_position.body.${zSpec?.name}`)}
+
+
+
+ ) => {
+ setIsDefault(e.currentTarget.value === 'default')
+ }}
+ options={[
+ {
+ name: isMixAspDispField
+ ? t('tip_position.radio_button.mix')
+ : t('tip_position.radio_button.default', {
+ defaultMmFromBottom,
+ }),
+ value: 'default',
+ },
+ {
+ name: t('tip_position.radio_button.custom'),
+ value: 'custom',
+ },
+ ]}
+ name="TipPositionOptions"
+ />
+ {TipPositionInputField}
-
-
- ,
+
+
+
+
+
+ {t('tip_position.title')}
+{t(`tip_position.body.${name}`)}
+
+
+
+
+
+ ) => {
+ setIsDefault(e.currentTarget.value === 'default')
+ }}
+ options={[
+ {
+ name: t('tip_position.radio_button.default', {
+ defaultMmFromBottom,
+ }),
+ value: 'default',
+ },
+ {
+ name: t('tip_position.radio_button.custom'),
+ value: 'custom',
+ },
+ ]}
+ name="TipPositionOptions"
+ />
+ {TipPositionInputField}
+
+
+
+ {!isDefault ? (
+
+
+
+
+
+
+
+ ) : null}
+ mock TipPositionModal
+ )
+ vi.mocked(ZTipPositionModal).mockReturnValue(
+ mock ZTipPositionModal
+ )
+ vi.mocked(getLabwareEntities).mockReturnValue({
+ [mockLabwareId]: {
+ id: mockLabwareId,
+ labwareDefURI: 'mock uri',
+ def: fixture96Plate as LabwareDefinition2,
+ },
+ })
+ })
+ it('renders the input field and header when x and y fields are not provided', () => {
+ render(props)
+ screen.getByText('mm')
+ fireEvent.click(screen.getByRole('textbox', { name: '' }))
+ expect(screen.getByRole('textbox', { name: '' })).not.toBeDisabled()
+ screen.getByText('mock ZTipPositionModal')
+ })
+ it('renders the input field but it is disabled', () => {
+ props = {
+ ...props,
+ propsForFields: {
+ [mockDelay]: {
+ name: mockDelay,
+ value: null,
+ updateValue: vi.fn(),
+ tooltipContent: 'mock content',
+ isIndeterminate: false,
+ disabled: true,
+ } as any,
+ },
+ }
+ render(props)
+ expect(screen.getByRole('textbox', { name: '' })).toBeDisabled()
+ })
+ it('renders the icon when x,y, and z fields are provided', () => {
+ const mockX = 'aspirate_x_position'
+ const mockY = 'aspirate_y_position'
+ props = {
+ zField: mockAspirate,
+ xField: mockX,
+ yField: mockY,
+ labwareId: mockLabwareId,
+ propsForFields: {
+ [mockAspirate]: {
+ name: mockAspirate,
+ value: null,
+ updateValue: vi.fn(),
+ tooltipContent: 'mock content',
+ isIndeterminate: false,
+ disabled: false,
+ } as any,
+ [mockX]: {
+ name: mockX,
+ value: null,
+ updateValue: vi.fn(),
+ } as any,
+ [mockY]: {
+ name: mockY,
+ value: null,
+ updateValue: vi.fn(),
+ } as any,
+ },
+ }
+ render(props)
+ fireEvent.click(screen.getByTestId('TipPositionIcon_aspirate_mmFromBottom'))
+ screen.getByText('mock TipPositionModal')
+ })
+})
diff --git a/protocol-designer/src/components/StepEditForm/fields/TipPositionField/__tests__/TipPositionModal.test.tsx b/protocol-designer/src/components/StepEditForm/fields/TipPositionField/__tests__/TipPositionModal.test.tsx
new file mode 100644
index 00000000000..5fccf40a480
--- /dev/null
+++ b/protocol-designer/src/components/StepEditForm/fields/TipPositionField/__tests__/TipPositionModal.test.tsx
@@ -0,0 +1,124 @@
+import * as React from 'react'
+import { fireEvent, screen } from '@testing-library/react'
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { renderWithProviders } from '../../../../../__testing-utils__'
+import { i18n } from '../../../../../localization'
+import { TipPositionModal } from '../TipPositionModal'
+import { TipPositionAllViz } from '../TipPositionAllViz'
+
+vi.mock('../TipPositionAllViz')
+const render = (props: React.ComponentPropsmock TipPositionViz
)
+ })
+ 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.getByRole('radio', { name: '1 mm from the bottom center (default)' })
+ screen.getByRole('radio', { name: 'Custom' })
+ fireEvent.click(screen.getByText('cancel'))
+ expect(props.closeModal).toHaveBeenCalled()
+ fireEvent.click(screen.getByText('done'))
+ expect(props.closeModal).toHaveBeenCalled()
+ expect(mockUpdateXSpec).toHaveBeenCalled()
+ expect(mockUpdateYSpec).toHaveBeenCalled()
+ expect(mockUpdateZSpec).toHaveBeenCalled()
+ })
+ it('renders the custom options, captions, and visual', () => {
+ render(props)
+ fireEvent.click(screen.getByRole('radio', { name: 'Custom' }))
+ expect(screen.getAllByRole('textbox', { name: '' })).toHaveLength(3)
+ screen.getByText('X position')
+ screen.getByText('between -5.15 and 5.15')
+ screen.getByText('Y position')
+ screen.getByText('between -5.25 and 5.25')
+ screen.getByText('Z position')
+ screen.getByText('between 0 and 100')
+ screen.getByText('mock TipPositionViz')
+ })
+ it('renders a custom input field and clicks on it, calling the mock updates', () => {
+ render(props)
+ fireEvent.click(screen.getByRole('radio', { name: 'Custom' }))
+ const xInputField = screen.getAllByRole('textbox', { name: '' })[0]
+ fireEvent.change(xInputField, { target: { value: 3 } })
+ const yInputField = screen.getAllByRole('textbox', { name: '' })[1]
+ fireEvent.change(yInputField, { target: { value: -2 } })
+ const zInputField = screen.getAllByRole('textbox', { name: '' })[2]
+ fireEvent.change(zInputField, { target: { value: 10 } })
+ fireEvent.click(screen.getByText('done'))
+ expect(props.closeModal).toHaveBeenCalled()
+ expect(mockUpdateXSpec).toHaveBeenCalled()
+ expect(mockUpdateYSpec).toHaveBeenCalled()
+ expect(mockUpdateZSpec).toHaveBeenCalled()
+ })
+ it('renders custom input fields and displays error texts', () => {
+ props = {
+ ...props,
+ specs: {
+ z: {
+ name: 'aspirate_mmFromBottom',
+ value: 101,
+ updateValue: mockUpdateZSpec,
+ },
+ y: {
+ name: 'aspirate_y_position',
+ value: -500,
+ updateValue: mockUpdateXSpec,
+ },
+ x: {
+ name: 'aspirate_x_position',
+ value: 10.7,
+ updateValue: mockUpdateYSpec,
+ },
+ },
+ }
+ render(props)
+ fireEvent.click(screen.getByText('done'))
+ // display out of bounds error
+ screen.getByText('accepted range is 0 to 100')
+ screen.getByText('accepted range is -5.25 to 5.25')
+ screen.getByText('accepted range is -5.15 to 5.15')
+ const xInputField = screen.getAllByRole('textbox', { name: '' })[0]
+ fireEvent.change(xInputField, { target: { value: 3.55555 } })
+ fireEvent.click(screen.getByText('done'))
+ // display too many decimals error
+ screen.getByText('a max of 1 decimal place is allowed')
+ })
+})
diff --git a/protocol-designer/src/components/StepEditForm/fields/TipPositionField/constants.ts b/protocol-designer/src/components/StepEditForm/fields/TipPositionField/constants.ts
new file mode 100644
index 00000000000..c790cb449cc
--- /dev/null
+++ b/protocol-designer/src/components/StepEditForm/fields/TipPositionField/constants.ts
@@ -0,0 +1,4 @@
+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'
diff --git a/protocol-designer/src/components/StepEditForm/fields/TipPositionField/index.tsx b/protocol-designer/src/components/StepEditForm/fields/TipPositionField/index.tsx
index ccaa80e13d5..91ececa71c8 100644
--- a/protocol-designer/src/components/StepEditForm/fields/TipPositionField/index.tsx
+++ b/protocol-designer/src/components/StepEditForm/fields/TipPositionField/index.tsx
@@ -2,13 +2,16 @@ import * as React from 'react'
import { useTranslation } from 'react-i18next'
import { useSelector } from 'react-redux'
import {
+ COLORS,
+ Flex,
FormGroup,
+ Icon,
InputField,
Tooltip,
useHoverTooltip,
UseHoverTooltipTargetProps,
} from '@opentrons/components'
-import { getWellsDepth } from '@opentrons/shared-data'
+import { getWellsDepth, getWellDimension } from '@opentrons/shared-data'
import {
getIsTouchTipField,
getIsDelayPositionField,
@@ -16,28 +19,40 @@ import {
import { selectors as stepFormSelectors } from '../../../../step-forms'
import { TipPositionModal } from './TipPositionModal'
import { getDefaultMmFromBottom } from './utils'
+import { ZTipPositionModal } from './ZTipPositionModal'
+import type {
+ TipXOffsetFields,
+ TipYOffsetFields,
+ TipZOffsetFields,
+} from '../../../../form-types'
+import type { FieldPropsByName } from '../../types'
+import type { PositionSpecs } from './TipPositionModal'
+
import stepFormStyles from '../../StepEditForm.module.css'
import styles from './TipPositionInput.module.css'
-import type { FieldProps } from '../../types'
-interface TipPositionFieldProps extends FieldProps {
+interface TipPositionFieldProps {
+ propsForFields: FieldPropsByName
+ zField: TipZOffsetFields
+ xField?: TipXOffsetFields
+ yField?: TipYOffsetFields
labwareId?: string | null
- className?: string
}
export function TipPositionField(props: TipPositionFieldProps): JSX.Element {
+ const { labwareId, propsForFields, zField, xField, yField } = props
const {
- disabled,
- name,
+ name: zName,
+ value: rawZValue,
+ updateValue: zUpdateValue,
tooltipContent,
- updateValue,
isIndeterminate,
- labwareId,
- value: rawValue,
- } = props
+ disabled,
+ } = propsForFields[zField]
+
const { t } = useTranslation('application')
const [targetProps, tooltipProps] = useHoverTooltip()
- const [isModalOpen, setModalOpen] = React.useState(false)
+ const [isModalOpen, setModalOpen] = React.useState