fix(app): liquid detail fixed precision (#15013)

There were a couple places remaining where we presented liquid volumes but didn't have fixed precision, so we could have a pretty excessive number of decimals. Now those are all toFixed(1)'d. Also, there was an extra "total volume" label in some little grey-background-roundrect text objs in the liquid detail map view that would cause the background to clip behind the map. the label's not in the designs, so I pulled it. Closes RSQ-78
Opentrons · Apr 25, 2024 · fab0bd2 · fab0bd2
1 parent 4ea08cb
commit fab0bd2
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 17 deletions.
diff --git a/app/src/assets/localization/en/protocol_setup.json b/app/src/assets/localization/en/protocol_setup.json
@@ -255,7 +255,6 @@
   "tip_length_cal_description": "This measures the Z distance between the bottom of the tip and the pipette’s nozzle. If you redo the tip length calibration for the tip you used to calibrate a pipette, you will also have to redo that Pipette Offset Calibration.",
   "tip_length_cal_title": "Tip Length Calibration",
   "tip_length_calibration": "tip length calibration",
-  "total_vol": "total volume",
   "update_deck": "Update deck",
   "update_deck_config": "Update deck configuration",
   "updated": "Updated",

diff --git a/app/src/organisms/Devices/ProtocolRun/SetupLiquids/LiquidDetailCard.tsx b/app/src/organisms/Devices/ProtocolRun/SetupLiquids/LiquidDetailCard.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react'
-import { useTranslation } from 'react-i18next'
 import { useSelector } from 'react-redux'
 import { css } from 'styled-components'
 import {
@@ -74,7 +73,6 @@ export function LiquidDetailCard(props: LiquidDetailCardProps): JSX.Element {
   } = props
   const trackEvent = useTrackEvent()
   const isOnDevice = useSelector(getIsOnDevice)
-  const { t } = useTranslation('protocol_setup')
 
   const ACTIVE_STYLE = css`
     background-color: ${isOnDevice ? COLORS.blue30 : COLORS.blue10};
@@ -147,8 +145,10 @@ export function LiquidDetailCard(props: LiquidDetailCardProps): JSX.Element {
             lineHeight={TYPOGRAPHY.lineHeight28}
             color={COLORS.black90}
           >
-            {Object.values(volumeByWell).reduce((prev, curr) => prev + curr, 0)}{' '}
-            {MICRO_LITERS} {t('total_vol')}
+            {Object.values(volumeByWell)
+              .reduce((prev, curr) => prev + curr, 0)
+              .toFixed(1)}{' '}
+            {MICRO_LITERS}
           </StyledText>
         </Flex>
       </Flex>
@@ -240,8 +240,10 @@ export function LiquidDetailCard(props: LiquidDetailCardProps): JSX.Element {
             fontSize={TYPOGRAPHY.fontSizeH4}
             lineHeight={TYPOGRAPHY.lineHeight20}
           >
-            {Object.values(volumeByWell).reduce((prev, curr) => prev + curr, 0)}{' '}
-            {MICRO_LITERS} {t('total_vol')}
+            {Object.values(volumeByWell)
+              .reduce((prev, curr) => prev + curr, 0)
+              .toFixed(1)}{' '}
+            {MICRO_LITERS}
           </StyledText>
         </Flex>
       </Flex>
@@ -272,7 +274,7 @@ export function LiquidDetailCard(props: LiquidDetailCardProps): JSX.Element {
                   {well.wellName}
                 </StyledText>
                 <StyledText as="p" fontWeight={TYPOGRAPHY.fontWeightRegular}>
-                  {well.volume} {MICRO_LITERS}
+                  {well.volume.toFixed(1)} {MICRO_LITERS}
                 </StyledText>
               </Flex>
             )

diff --git a/app/src/organisms/Devices/ProtocolRun/SetupLiquids/SetupLiquidsList.tsx b/app/src/organisms/Devices/ProtocolRun/SetupLiquids/SetupLiquidsList.tsx
@@ -269,7 +269,7 @@ export function LiquidsListItem(props: LiquidsListItemProps): JSX.Element {
                       liquidId,
                       labware.labwareId,
                       labwareByLiquidId
-                    )}{' '}
+                    ).toFixed(1)}{' '}
                     {MICRO_LITERS}
                   </StyledText>
                 </Flex>
@@ -337,7 +337,7 @@ export const LiquidsListItemDetails = (
         marginLeft={SIZE_AUTO}
       >
         <StyledText as="p" fontWeight={TYPOGRAPHY.fontWeightRegular}>
-          {getTotalVolumePerLiquidId(liquidId, labwareByLiquidId)}{' '}
+          {getTotalVolumePerLiquidId(liquidId, labwareByLiquidId).toFixed(1)}{' '}
           {MICRO_LITERS}
         </StyledText>
       </Flex>

diff --git a/app/src/organisms/Devices/ProtocolRun/SetupLiquids/__tests__/LiquidDetailCard.test.tsx b/app/src/organisms/Devices/ProtocolRun/SetupLiquids/__tests__/LiquidDetailCard.test.tsx
@@ -53,7 +53,7 @@ describe('LiquidDetailCard', () => {
     render(props)
     screen.getByText('Mock Liquid')
     screen.getByText('Mock Description')
-    screen.getAllByText(nestedTextMatcher('100 µL'))
+    screen.getAllByText(nestedTextMatcher('100.0 µL'))
   })
 
   it('renders clickable box, clicking on it calls track event', () => {
@@ -72,7 +72,7 @@ describe('LiquidDetailCard', () => {
     })
     screen.getByText('A1')
     screen.getByText('B1')
-    screen.getAllByText(nestedTextMatcher('50 µL'))
+    screen.getAllByText(nestedTextMatcher('50.0 µL'))
   })
   it('renders well range for volume info if selected', () => {
     render({
@@ -81,15 +81,14 @@ describe('LiquidDetailCard', () => {
       volumeByWell: { A1: 50, B1: 50, C1: 50, D1: 50 },
     })
     screen.getByText('A1: D1')
-    screen.getByText(nestedTextMatcher('50 µL'))
+    screen.getByText(nestedTextMatcher('50.0 µL'))
   })
   it('renders liquid name, description, total volume for odd, and clicking item selects the box', () => {
     vi.mocked(getIsOnDevice).mockReturnValue(true)
     render(props)
     screen.getByText('Mock Liquid')
     screen.getByText('Mock Description')
-    screen.getAllByText(nestedTextMatcher('100 µL'))
-    screen.getAllByText(nestedTextMatcher('total volume'))
+    screen.getAllByText(nestedTextMatcher('100.0 µL'))
     expect(screen.getByLabelText('liquidBox_odd')).toHaveStyle(
       `border: ${SPACING.spacing4} solid ${COLORS.grey30}`
     )

diff --git a/app/src/organisms/Devices/ProtocolRun/SetupLiquids/__tests__/SetupLiquidsList.test.tsx b/app/src/organisms/Devices/ProtocolRun/SetupLiquids/__tests__/SetupLiquidsList.test.tsx
@@ -100,7 +100,7 @@ describe('SetupLiquidsList', () => {
 
   it('renders the total volume of the liquid, sample display name, and description', () => {
     render(props)
-    screen.getAllByText(nestedTextMatcher('400 µL'))
+    screen.getAllByText(nestedTextMatcher('400.0 µL'))
     screen.getByText('mock liquid 1')
     screen.getByText('mock sample')
     screen.getByText('mock liquid 2')
@@ -118,7 +118,7 @@ describe('SetupLiquidsList', () => {
     screen.getByText('Location')
     screen.getByText('Labware name')
     screen.getByText('Volume')
-    screen.getAllByText(nestedTextMatcher('200 µL'))
+    screen.getAllByText(nestedTextMatcher('200.0 µL'))
     screen.getByText('4')
     screen.getByText('mock labware name')
   })