diff --git a/protocol-designer/src/components/StepEditForm/FlowRateField/FlowRateField.js b/protocol-designer/src/components/StepEditForm/FlowRateField/FlowRateField.js index a412354f96d..c207fa2ac3d 100644 --- a/protocol-designer/src/components/StepEditForm/FlowRateField/FlowRateField.js +++ b/protocol-designer/src/components/StepEditForm/FlowRateField/FlowRateField.js @@ -1,5 +1,6 @@ // @flow import * as React from 'react' +import round from 'lodash/round' import { AlertModal, FormGroup, @@ -121,7 +122,7 @@ export default class FlowRateField extends React.Component { minFlowRate > modalFlowRateNum || modalFlowRateNum > maxFlowRate ) - const correctDecimals = Number(modalFlowRateNum.toFixed(DECIMALS_ALLOWED)) === modalFlowRateNum + const correctDecimals = round(modalFlowRateNum, DECIMALS_ALLOWED) === modalFlowRateNum const allowSave = modalUseDefault || (!outOfBounds && correctDecimals) let errorMessage = null diff --git a/protocol-designer/src/components/StepEditForm/TipPositionInput/TipPositionModal.js b/protocol-designer/src/components/StepEditForm/TipPositionInput/TipPositionModal.js index aece40c7f2c..27351fb459e 100644 --- a/protocol-designer/src/components/StepEditForm/TipPositionInput/TipPositionModal.js +++ b/protocol-designer/src/components/StepEditForm/TipPositionInput/TipPositionModal.js @@ -2,6 +2,7 @@ import * as React from 'react' import cx from 'classnames' import {connect} from 'react-redux' +import round from 'lodash/round' import { Modal, OutlineButton, @@ -25,6 +26,7 @@ import styles from './TipPositionInput.css' const SMALL_STEP_MM = 1 const LARGE_STEP_MM = 10 +const DECIMALS_ALLOWED = 1 type DP = { updateValue: (string) => mixed } @@ -37,10 +39,10 @@ type OP = { } type Props = OP & DP -type State = { value: string} +type State = { value: string } -const formatValue = (value: mixed) => ( - parseFloat(value).toFixed(1) +const formatValue = (value: number | string): string => ( + String(round(Number(value), DECIMALS_ALLOWED)) ) class TipPositionModal extends React.Component { @@ -75,14 +77,14 @@ class TipPositionModal extends React.Component { } handleChange = (e: SyntheticEvent) => { const {value} = e.currentTarget - const valueFloat = formatValue(value) + const valueFloat = Number(formatValue(value)) const maximumHeightMM = (this.props.wellHeightMM * 2) if (!value) { this.setState({value}) - } else if (Number(valueFloat) > maximumHeightMM) { + } else if (valueFloat > maximumHeightMM) { this.setState({value: formatValue(maximumHeightMM)}) - } else if (Number(valueFloat) >= 0) { + } else if (valueFloat >= 0) { const numericValue = value.replace(/[^.0-9]/, '') this.setState({value: numericValue.replace(/(\d*[.]{1}\d{1})(\d*)/, (match, group1) => group1)}) } else { diff --git a/protocol-designer/src/components/StepEditForm/TipPositionInput/TipPositionZAxisViz.js b/protocol-designer/src/components/StepEditForm/TipPositionInput/TipPositionZAxisViz.js index a089156c6b8..5b8a5d6a30a 100644 --- a/protocol-designer/src/components/StepEditForm/TipPositionInput/TipPositionZAxisViz.js +++ b/protocol-designer/src/components/StepEditForm/TipPositionInput/TipPositionZAxisViz.js @@ -1,5 +1,6 @@ // @flow 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' @@ -7,6 +8,7 @@ import WELL_CROSS_SECTION_IMAGE from '../../../images/well_cross_section.svg' import styles from './TipPositionInput.css' const WELL_HEIGHT_PIXELS = 48 +const PIXEL_DECIMALS = 2 type Props = { mmFromBottom: string, wellHeightMM: number, @@ -15,7 +17,7 @@ type Props = { const TipPositionZAxisViz = (props: Props) => { const fractionOfWellHeight = Number(props.mmFromBottom) / props.wellHeightMM const pixelsFromBottom = (Number(fractionOfWellHeight) * WELL_HEIGHT_PIXELS) - WELL_HEIGHT_PIXELS - const roundedPixelsFromBottom = String(pixelsFromBottom.toFixed(2)) + const roundedPixelsFromBottom = String(round(pixelsFromBottom, PIXEL_DECIMALS)) const bottomPx = props.wellHeightMM ? roundedPixelsFromBottom : (parseFloat(props.mmFromBottom) - WELL_HEIGHT_PIXELS) return (
diff --git a/protocol-designer/src/components/steplist/utils.js b/protocol-designer/src/components/steplist/utils.js index 3bad1c391a6..fab1b503ceb 100644 --- a/protocol-designer/src/components/steplist/utils.js +++ b/protocol-designer/src/components/steplist/utils.js @@ -12,6 +12,7 @@ export function formatVolume (inputVolume: ?string | ?number, sigDigits?: number return inputVolume || '' } +const PERCENTAGE_DECIMALS_ALLOWED = 1 export const formatPercentage = (part: number, total: number): string => { - return `${Number((part / total) * 100).toFixed(1)}%` + return `${round((part / total) * 100, PERCENTAGE_DECIMALS_ALLOWED)}%` }