Skip to content

Commit

Permalink
feat(protocol-designer): page one of mix tools (#16493)
Browse files Browse the repository at this point in the history
closes AUTH-807
  • Loading branch information
jerader authored Oct 16, 2024
1 parent ce26f3e commit 6424725
Show file tree
Hide file tree
Showing 7 changed files with 128 additions and 42 deletions.
1 change: 1 addition & 0 deletions components/src/atoms/InputField/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -234,6 +234,7 @@ export const InputField = React.forwardRef<HTMLInputElement, InputFieldProps>(

return (
<Flex
width="100%"
alignItems={ALIGN_CENTER}
lineHeight={1}
fontSize={TYPOGRAPHY.fontSizeP}
Expand Down
2 changes: 1 addition & 1 deletion protocol-designer/src/assets/localization/en/form.json
Original file line number Diff line number Diff line change
Expand Up @@ -282,7 +282,7 @@
"wells": "wells",
"wells_aspirate_wells": "Select source wells",
"wells_dispense_wells": "Select destination wells",
"wells_mix_wells": "Select wells"
"wells_wells": "Select wells"
}
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@
},
"mix": "Mix",
"mix_step": "<text>Mixing</text><tag/><text>{{times}} times in</text><semiBoldText>{{labware}}</semiBoldText>",
"mix_repetitions": "Mix repetitions",
"module": "Module",
"move_labware": {
"gripper": "<text>Move</text><semiBoldText>{{labware}}</semiBoldText><text>to</text><tag/><text>using gripper</text>",
Expand Down Expand Up @@ -68,7 +69,7 @@
"select_dispense_wells": "Select destination wells using a {{displayName}}",
"select_labware": "Select labware",
"select_mix_labware": "Select a mix labware",
"select_mix_wells": "Select wells using a {{displayName}}",
"select_wells": "Select wells using a {{displayName}}",
"select_nozzles": "Select nozzles",
"select_pipette": "Select a pipette",
"select_tip_location": "Select pick up tip location",
Expand Down
19 changes: 11 additions & 8 deletions protocol-designer/src/assets/localization/en/tooltip.json
Original file line number Diff line number Diff line change
Expand Up @@ -28,41 +28,43 @@

"step_fields": {
"defaults": {
"aspirate_wells": "Selected source wells",
"aspirate_labware": "Select a source labware to use",
"aspirate_airGap_checkbox": "Aspirate air before moving to next well",
"aspirate_delay_checkbox": "Delay pipette movement after each aspirate in this step, including any Air Gap",
"aspirate_delay_mmFromBottom": "Distance from the bottom of the well",
"aspirate_flowRate": "The speed at which the pipette aspirates",
"aspirate_labware": "Select a source labware to use",
"aspirate_mix_checkbox": "Pipette up and down before aspirating",
"aspirate_mmFromBottom": "Adjust tip position for aspirate",
"aspirate_touchTip_checkbox": "Touch tip to each side of well after aspirating",
"aspirate_touchTip_mmFromBottom": "Distance from the bottom of the well",
"aspirate_wells": "Selected source wells",
"blowout_checkbox": "Where to dispose of remaining volume in tip",
"blowout_flowRate": "Blowout speed",
"blowout_location": "Where to dispose of remaining volume in tip",
"blowout_z_offset": "The height at which blowout occurs from the top of the well",
"changeTip": "Choose when the robot picks up fresh tips",
"dispense_wells": "Selected destination wells",
"dispense_labware": "Select a destination labware to use",
"dispense_airGap_checkbox": "Aspirate air before moving to Trash to dispose of tip. Tip will be disposed of at the end of steps using this setting.",
"dispense_delay_checkbox": "Delay pipette movement after each dispense in this step",
"dispense_delay_mmFromBottom": "Distance from the bottom of the well",
"dispense_flowRate": "The speed at which the pipette dispenses",
"dispense_labware": "Select a destination labware to use",
"dispense_mix_checkbox": "Pipette up and down after dispensing",
"dispense_mmFromBottom": "Adjust tip position for dispense",
"dispense_touchTip_checkbox": "Touch tip to each side of well after dispensing and other dispense advanced setting commands",
"dispense_touchTip_mmFromBottom": "Distance from the bottom of the well",
"dispense_wells": "Selected destination wells",
"disposalVolume_checkbox": "Aspirate extra volume that is disposed of after a multi-dispense is complete. We recommend a disposal volume of at least the pipette's minimum.",
"dropTip_location": "Choose where you would like to drop tip",
"heaterShakerSetTimer": "Once this counter has elapsed, the module will deactivate the heater and shaker",
"labware": "Select a labware to use",
"mix_mmFromBottom": "Adjust tip position",
"mix_touchTip_checkbox": "Touch tip to each side of the well after mixing",
"mix_touchTip_mmFromBottom": "Distance from the bottom of the well",
"pipette": "Select the pipette you want to use",
"preWetTip": "Pre-wet pipette tip by aspirating and dispensing 2/3 of the tip's max volume",
"volume": "Volume to dispense in each well",
"blowout_z_offset": "The height at which blowout occurs from the top of the well",
"blowout_flowRate": "Blowout speed",
"setTemperature": "Select the temperature to set your module to"
"setTemperature": "Select the temperature to set your module to",
"wells": "Select wells",
"volume": "Volume to dispense in each well"
},
"indeterminate": {
"aspirate_airGap_checkbox": "Not all selected steps are using this setting",
Expand All @@ -79,6 +81,7 @@
},
"mix": {
"disabled": {
"wells": "Select a labware before selecting wells",
"mix_mmFromBottom": "Tip position adjustment is not supported",
"blowout_z_offset": "Blowout location and destination labware must first be selected"
}
Expand Down
34 changes: 5 additions & 29 deletions protocol-designer/src/molecules/InputStepFormField/index.tsx
Original file line number Diff line number Diff line change
@@ -1,14 +1,5 @@
import { useTranslation } from 'react-i18next'
import {
COLORS,
DIRECTION_COLUMN,
Flex,
Icon,
InputField,
SPACING,
Tooltip,
useHoverTooltip,
} from '@opentrons/components'
import { Flex, InputField, SPACING } from '@opentrons/components'
import type { FieldProps } from '../../components/StepEditForm/types'

interface InputStepFormFieldProps extends FieldProps {
Expand Down Expand Up @@ -38,29 +29,14 @@ export function InputStepFormField(
...otherProps
} = props
const { t } = useTranslation('tooltip')
const [targetProps, tooltipProps] = useHoverTooltip()

return (
<Flex flexDirection={DIRECTION_COLUMN} padding={padding}>
<Flex gridGap={SPACING.spacing8} paddingBottom={SPACING.spacing8}>
{showTooltip ? (
<>
<Flex {...targetProps}>
<Icon
name="information"
size={SPACING.spacing12}
color={COLORS.grey60}
data-testid="information_icon"
/>
</Flex>
<Tooltip tooltipProps={tooltipProps}>
{t(`${tooltipContent}`)}
</Tooltip>
</>
) : null}
</Flex>
<Flex padding={padding} width="100%">
<InputField
{...otherProps}
tooltipText={
showTooltip ? t(`${tooltipContent}`) ?? undefined : undefined
}
title={title}
caption={caption}
name={name}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,7 @@ export const WellSelectionField = (
const onOpen = (key: string): void => {
dispatch(stepsActions.setWellSelectionLabwareKey(key))
}

const handleOpen = (): void => {
if (onFieldFocus) {
onFieldFocus()
Expand Down Expand Up @@ -109,7 +110,7 @@ export const WellSelectionField = (
{t(`tooltip:${tooltipContent}`)}
</Tooltip>
<InputField
disabled={disabled}
disabled={disabled ?? labwareId != null}
readOnly
name={name}
error={errorToShow}
Expand Down
Original file line number Diff line number Diff line change
@@ -1,3 +1,107 @@
export function MixTools(): JSX.Element {
return <div>TODO: wire this up</div>
import { useSelector } from 'react-redux'
import { useTranslation } from 'react-i18next'
import { DIRECTION_COLUMN, Divider, Flex } from '@opentrons/components'
import { InputStepFormField } from '../../../../../../molecules'
import {
getLabwareEntities,
getPipetteEntities,
} from '../../../../../../step-forms/selectors'
import { getEnableReturnTip } from '../../../../../../feature-flags/selectors'
import {
ChangeTipField,
DropTipField,
LabwareField,
PartialTipField,
PickUpTipField,
PipetteField,
TipWellSelectionField,
TiprackField,
VolumeField,
WellSelectionField,
} from '../../PipetteFields'
import type { StepFormProps } from '../../types'

export function MixTools(props: StepFormProps): JSX.Element {
const { propsForFields, formData, toolboxStep } = props
const pipettes = useSelector(getPipetteEntities)
const enableReturnTip = useSelector(getEnableReturnTip)
const labwares = useSelector(getLabwareEntities)
const { t } = useTranslation(['application', 'form'])
const is96Channel =
propsForFields.pipette.value != null &&
pipettes[String(propsForFields.pipette.value)].name === 'p1000_96'
const userSelectedPickUpTipLocation =
labwares[String(propsForFields.pickUpTip_location.value)] != null
const userSelectedDropTipLocation =
labwares[String(propsForFields.dropTip_location.value)] != null

return toolboxStep === 0 ? (
<Flex flexDirection={DIRECTION_COLUMN}>
<PipetteField {...propsForFields.pipette} />
{is96Channel ? <PartialTipField {...propsForFields.nozzles} /> : null}
<Divider marginY="0" />
<TiprackField
{...propsForFields.tipRack}
pipetteId={propsForFields.pipette.value}
/>
<Divider marginY="0" />
<LabwareField {...propsForFields.labware} />
<Divider marginY="0" />
<Divider marginY="0" />
<WellSelectionField
{...propsForFields.wells}
labwareId={formData.labware}
pipetteId={formData.pipette}
nozzles={String(propsForFields.nozzles.value) ?? null}
/>
<Divider marginY="0" />
<VolumeField {...propsForFields.volume} />
<Divider marginY="0" />
<InputStepFormField
{...propsForFields.times}
units={t('units.times')}
title={t('protocol_steps:mix_repetitions')}
/>
<Divider marginY="0" />
<ChangeTipField
{...propsForFields.changeTip}
aspirateWells={formData.aspirate_wells}
dispenseWells={formData.dispense_wells}
path={formData.path}
stepType={formData.stepType}
/>
<Divider marginY="0" />
{enableReturnTip ? (
<>
<PickUpTipField {...propsForFields.pickUpTip_location} />
{userSelectedPickUpTipLocation ? (
<>
<Divider marginY="0" />
<TipWellSelectionField
{...propsForFields.pickUpTip_wellNames}
nozzles={String(propsForFields.nozzles.value) ?? null}
labwareId={propsForFields.pickUpTip_location.value}
pipetteId={propsForFields.pipette.value}
/>
</>
) : null}
</>
) : null}
<Divider marginY="0" />
<DropTipField {...propsForFields.dropTip_location} />
{userSelectedDropTipLocation && enableReturnTip ? (
<>
<Divider marginY="0" />
<TipWellSelectionField
{...propsForFields.dropTip_wellNames}
nozzles={String(propsForFields.nozzles.value) ?? null}
labwareId={propsForFields.dropTip_location.value}
pipetteId={propsForFields.pipette.value}
/>
</>
) : null}
</Flex>
) : (
<div>wire this up</div>
)
}

0 comments on commit 6424725

Please sign in to comment.