From 8a90c53e5a8bca61937b86f11ce935af96148737 Mon Sep 17 00:00:00 2001 From: Jethary Date: Tue, 2 Apr 2024 08:48:38 -0400 Subject: [PATCH] address comments --- .../TipPositionField/TipPositionAllViz.tsx | 4 +-- .../TipPositionInput.module.css | 2 +- .../TipPositionField/ZTipPositionModal.tsx | 33 +++++++++++-------- .../__tests__/TipPositionField.test.tsx | 7 ++-- .../fields/TipPositionField/index.tsx | 19 ++++------- .../fields/TipPositionField/utils.ts | 18 +++++----- .../src/localization/en/tooltip.json | 4 +-- shared-data/js/helpers/index.ts | 23 +++---------- 8 files changed, 48 insertions(+), 62 deletions(-) diff --git a/protocol-designer/src/components/StepEditForm/fields/TipPositionField/TipPositionAllViz.tsx b/protocol-designer/src/components/StepEditForm/fields/TipPositionField/TipPositionAllViz.tsx index fe18c6957de..d1b219b04d8 100644 --- a/protocol-designer/src/components/StepEditForm/fields/TipPositionField/TipPositionAllViz.tsx +++ b/protocol-designer/src/components/StepEditForm/fields/TipPositionField/TipPositionAllViz.tsx @@ -17,9 +17,7 @@ interface TipPositionAllVizProps { xWidthMm: number } -export const TipPositionAllViz = ( - props: TipPositionAllVizProps -): JSX.Element => { +export function TipPositionAllViz(props: TipPositionAllVizProps): JSX.Element { const { mmFromBottom, xPosition, wellDepthMm, xWidthMm } = props const fractionOfWellHeight = mmFromBottom / wellDepthMm const pixelsFromBottom = 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 d4b6642665a..36818a42e4b 100644 --- a/protocol-designer/src/components/StepEditForm/fields/TipPositionField/TipPositionInput.module.css +++ b/protocol-designer/src/components/StepEditForm/fields/TipPositionField/TipPositionInput.module.css @@ -70,7 +70,7 @@ height: 1.5rem; width: 1.5rem; cursor: pointer; - color: #24313f; + color: #24313f; /* black80 */ } .tip_position_icon:hover { diff --git a/protocol-designer/src/components/StepEditForm/fields/TipPositionField/ZTipPositionModal.tsx b/protocol-designer/src/components/StepEditForm/fields/TipPositionField/ZTipPositionModal.tsx index 54183bb0604..d9437ec820b 100644 --- a/protocol-designer/src/components/StepEditForm/fields/TipPositionField/ZTipPositionModal.tsx +++ b/protocol-designer/src/components/StepEditForm/fields/TipPositionField/ZTipPositionModal.tsx @@ -22,17 +22,24 @@ import type { StepFieldName } from '../../../../form-types' import modalStyles from '../../../modals/modal.module.css' import styles from './TipPositionInput.module.css' -interface Props { +interface ZTipPositionModalProps { closeModal: () => void - isIndeterminate?: boolean mmFromBottom: number | null name: StepFieldName - updateValue: (val: number | null | undefined) => unknown + updateValue: (val?: number | null) => unknown wellDepthMm: number + isIndeterminate?: boolean } -export const ZTipPositionModal = (props: Props): JSX.Element => { - const { isIndeterminate, name, wellDepthMm } = props +export function ZTipPositionModal(props: ZTipPositionModalProps): JSX.Element { + const { + isIndeterminate, + name, + wellDepthMm, + mmFromBottom, + closeModal, + updateValue, + } = props const { t } = useTranslation(['modal', 'button']) const defaultMmFromBottom = utils.getDefaultMmFromBottom({ name, @@ -40,10 +47,10 @@ export const ZTipPositionModal = (props: Props): JSX.Element => { }) const [value, setValue] = React.useState( - props.mmFromBottom === null ? null : String(props.mmFromBottom) + mmFromBottom === null ? null : String(mmFromBottom) ) const [isDefault, setIsDefault] = React.useState( - !isIndeterminate && props.mmFromBottom === null + !isIndeterminate && mmFromBottom === null ) // in this modal, pristinity hides the OUT_OF_BOUNDS error only. const [isPristine, setPristine] = React.useState(true) @@ -87,16 +94,16 @@ export const ZTipPositionModal = (props: Props): JSX.Element => { if (!hasErrors) { if (isDefault) { - props.updateValue(null) + updateValue(null) } else { - props.updateValue(value === null ? null : Number(value)) + updateValue(value === null ? null : Number(value)) } - props.closeModal() + closeModal() } } const handleCancel = (): void => { - props.closeModal() + closeModal() } const handleChange = (newValueRaw: string | number): void => { @@ -219,7 +226,7 @@ export const ZTipPositionModal = (props: Props): JSX.Element => {
- {!isDefault && ( + {!isDefault ? (
{
- )} + ) : null} {yField != null && xField != null ? ( handleOpen(true) : undefined} + onClick={disabled != null ? () => handleOpen(true) : () => {}} id={`TipPositionIcon_${zName}`} data-testid={`TipPositionIcon_${zName}`} width="5rem" diff --git a/protocol-designer/src/components/StepEditForm/fields/TipPositionField/utils.ts b/protocol-designer/src/components/StepEditForm/fields/TipPositionField/utils.ts index 5db860b0313..96ed4729d49 100644 --- a/protocol-designer/src/components/StepEditForm/fields/TipPositionField/utils.ts +++ b/protocol-designer/src/components/StepEditForm/fields/TipPositionField/utils.ts @@ -47,7 +47,7 @@ export function getDefaultMmFromBottom(args: { } export const roundValue = (value: number | string | null): number => { - return round(Number(value), DECIMALS_ALLOWED) + return value === null ? 0 : round(Number(value), DECIMALS_ALLOWED) } const OUT_OF_BOUNDS: 'OUT_OF_BOUNDS' = 'OUT_OF_BOUNDS' @@ -80,19 +80,19 @@ export const getErrors = (args: { maxMm: number minMm: number }): Error[] => { - const { isDefault, value, maxMm, minMm } = args + const { isDefault, value: rawValue, maxMm, minMm } = args const errors: Error[] = [] if (isDefault) return errors - const v = Number(value) - if (value === null || Number.isNaN(v)) { + const value = Number(rawValue) + if (rawValue === null || Number.isNaN(value)) { // blank or otherwise invalid should show this error as a fallback return [OUT_OF_BOUNDS] } - const correctDecimals = round(v, DECIMALS_ALLOWED) === v - const outOfBounds = v > maxMm || v < minMm + const incorrectDecimals = round(value, DECIMALS_ALLOWED) !== value + const outOfBounds = value > maxMm || value < minMm - if (!correctDecimals) { + if (incorrectDecimals) { errors.push(TOO_MANY_DECIMALS) } if (outOfBounds) { @@ -108,7 +108,7 @@ interface MinMaxValues { export const getMinMaxWidth = (width: number): MinMaxValues => { return { - minValue: -width / 2, - maxValue: width / 2, + minValue: -width * 0.5, + maxValue: width * 0.5, } } diff --git a/protocol-designer/src/localization/en/tooltip.json b/protocol-designer/src/localization/en/tooltip.json index 34d1e01497c..7aa0031b76e 100644 --- a/protocol-designer/src/localization/en/tooltip.json +++ b/protocol-designer/src/localization/en/tooltip.json @@ -26,7 +26,7 @@ "aspirate_delay_mmFromBottom": "Distance from the bottom of the well", "aspirate_flowRate": "The speed at which the pipette aspirates", "aspirate_mix_checkbox": "Pipette up and down before aspirating", - "aspirate_mmFromBottom": "Adjust tip position", + "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", "blowout_checkbox": "Where to dispose of remaining volume in tip", @@ -37,7 +37,7 @@ "dispense_delay_mmFromBottom": "Distance from the bottom of the well", "dispense_flowRate": "The speed at which the pipette dispenses", "dispense_mix_checkbox": "Pipette up and down after dispensing", - "dispense_mmFromBottom": "Adjust tip position", + "dispense_mmFromBottom": "Adjust tip position for dispense", "dispense_touchTip_checkbox": "Touch tip to each side of well after dispensing", "dispense_touchTip_mmFromBottom": "Distance from the bottom of the well", "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.", diff --git a/shared-data/js/helpers/index.ts b/shared-data/js/helpers/index.ts index c10fd818c47..216799f318f 100644 --- a/shared-data/js/helpers/index.ts +++ b/shared-data/js/helpers/index.ts @@ -201,25 +201,10 @@ export const getWellsDepth = ( return offsets[0] } -export const getWellXDimension = ( +export const getWellDimension = ( labwareDef: LabwareDefinition2, - wells: string[] -): number => { - const offsets = wells.map(well => { - const labwareWell = labwareDef.wells[well] - const shape = labwareWell.shape - if (shape === 'circular') { - return labwareWell.diameter - } else { - return labwareWell.xDimension - } - }) - return offsets[0] -} - -export const getWellYDimension = ( - labwareDef: LabwareDefinition2, - wells: string[] + wells: string[], + position: 'x' | 'y' ): number => { const offsets = wells.map(well => { const labwareWell = labwareDef.wells[well] @@ -227,7 +212,7 @@ export const getWellYDimension = ( if (shape === 'circular') { return labwareWell.diameter } else { - return labwareWell.yDimension + return position === 'x' ? labwareWell.xDimension : labwareWell.yDimension } }) return offsets[0]