Skip to content

Commit 331c52e

Browse files
b-cooperb-cooper
authored
fix(app): render LPC summary data as a table to prevent misalignment (#11084)
Instead of rendering LPC summary data in a grid like div structure, actually render it in a table so that the rows and columns align Closes #11077
1 parent eb8cf4c commit 331c52e

File tree

2 files changed

+106
-160
lines changed

2 files changed

+106
-160
lines changed

‎app/src/organisms/LabwarePositionCheck/LabwareOffsetsSummary.tsx

Lines changed: 84 additions & 136 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,52 @@
11
import * as React from 'react'
22
import { useTranslation } from 'react-i18next'
3+
import styled from 'styled-components'
34
import {
45
ALIGN_CENTER,
56
C_DARK_GRAY,
67
C_MED_GRAY,
78
C_NEAR_WHITE,
89
DIRECTION_COLUMN,
9-
DIRECTION_ROW,
1010
Flex,
11-
FONT_BODY_1_DARK,
1211
FONT_SIZE_BODY_2,
13-
FONT_SIZE_CAPTION,
1412
FONT_WEIGHT_SEMIBOLD,
1513
Icon,
1614
JUSTIFY_CENTER,
17-
SPACING_1,
18-
SPACING_2,
19-
SPACING_3,
20-
SPACING_4,
21-
SPACING_5,
15+
SPACING,
16+
TYPOGRAPHY,
17+
COLORS,
2218
TEXT_TRANSFORM_UPPERCASE,
2319
Text,
24-
JUSTIFY_SPACE_BETWEEN,
20+
SIZE_3,
2521
} from '@opentrons/components'
22+
import { OffsetVector } from '../../molecules/OffsetVector'
23+
import { StyledText } from '../../atoms/text'
2624
import type { LabwareOffsets } from './hooks/useLabwareOffsets'
2725

26+
const OffsetTable = styled('table')`
27+
${TYPOGRAPHY.labelRegular}
28+
table-layout: auto;
29+
width: 100%;
30+
border-spacing: 0 ${SPACING.spacing1};
31+
margin: ${SPACING.spacing4} 0;
32+
text-align: left;
33+
`
34+
const OffsetTableHeader = styled('th')`
35+
text-transform: ${TYPOGRAPHY.textTransformUppercase};
36+
color: ${COLORS.disabled};
37+
font-weight: ${TYPOGRAPHY.fontWeightRegular};
38+
font-size: ${TYPOGRAPHY.fontSizeCaption};
39+
padding: ${SPACING.spacing2};
40+
`
41+
const OffsetTableRow = styled('tr')`
42+
background-color: ${COLORS.background};
43+
`
44+
45+
const OffsetTableDatum = styled('td')`
46+
padding: ${SPACING.spacing2};
47+
white-space: break-spaces;
48+
text-overflow: wrap;
49+
`
2850
interface LabwareOffsetSummary {
2951
offsetData: LabwareOffsets
3052
}
@@ -40,7 +62,7 @@ const OffsetDataLoader = (): JSX.Element | null => {
4062
<Text
4163
as={'h3'}
4264
color={C_DARK_GRAY}
43-
marginTop={SPACING_4}
65+
marginTop={SPACING.spacing6}
4466
fontWeight={FONT_WEIGHT_SEMIBOLD}
4567
fontSize={FONT_SIZE_BODY_2}
4668
textTransform={TEXT_TRANSFORM_UPPERCASE}
@@ -50,9 +72,9 @@ const OffsetDataLoader = (): JSX.Element | null => {
5072
<Icon
5173
name="ot-spinner"
5274
id={`LabwareOffsetsSummary_loadingSpinner`}
53-
width={SPACING_5}
54-
marginTop={SPACING_4}
55-
marginBottom={SPACING_4}
75+
width={SIZE_3}
76+
marginTop={SPACING.spacing6}
77+
marginBottom={SPACING.spacing6}
5678
color={C_MED_GRAY}
5779
spin
5880
/>
@@ -64,102 +86,39 @@ const SummaryData = (props: LabwareOffsetSummary): JSX.Element => {
6486
const { offsetData } = props
6587
const { t } = useTranslation('labware_position_check')
6688
return (
67-
<Flex flexDirection={DIRECTION_ROW}>
68-
<Flex
69-
flex={'auto'}
70-
flexDirection={DIRECTION_COLUMN}
71-
justifyContent={JUSTIFY_CENTER}
72-
>
73-
<Text
74-
textTransform={TEXT_TRANSFORM_UPPERCASE}
75-
marginBottom={SPACING_3}
76-
color={C_MED_GRAY}
77-
fontSize={FONT_SIZE_CAPTION}
78-
>
79-
{t('labware_offsets_summary_location')}
80-
</Text>
81-
{offsetData.map(({ displayLocation: location }) => {
82-
return (
83-
<Flex
84-
key={location}
85-
marginBottom={SPACING_3}
86-
css={FONT_BODY_1_DARK}
87-
>
88-
{location}
89-
</Flex>
90-
)
91-
})}
92-
</Flex>
93-
<Flex
94-
flex={'auto'}
95-
flexDirection={DIRECTION_COLUMN}
96-
justifyContent={JUSTIFY_CENTER}
97-
>
98-
<Text
99-
textTransform={TEXT_TRANSFORM_UPPERCASE}
100-
marginBottom={SPACING_3}
101-
color={C_MED_GRAY}
102-
fontSize={FONT_SIZE_CAPTION}
103-
>
104-
{t('labware_offsets_summary_labware')}
105-
</Text>
106-
{offsetData.map(({ displayName: labware }, index) => {
107-
return (
108-
<Flex
109-
key={`${labware}_${index}`}
110-
marginBottom={SPACING_3}
111-
css={FONT_BODY_1_DARK}
112-
>
113-
{labware}
114-
</Flex>
89+
<OffsetTable>
90+
<thead>
91+
<tr>
92+
<OffsetTableHeader>
93+
{t('labware_offsets_summary_location')}
94+
</OffsetTableHeader>
95+
<OffsetTableHeader>
96+
{t('labware_offsets_summary_labware')}
97+
</OffsetTableHeader>
98+
<OffsetTableHeader>
99+
{t('labware_offsets_summary_offset')}
100+
</OffsetTableHeader>
101+
</tr>
102+
</thead>
103+
104+
<tbody>
105+
{offsetData.map(
106+
({ displayLocation, displayName, labwareId, vector }) => (
107+
<OffsetTableRow key={labwareId}>
108+
<OffsetTableDatum>{displayLocation}</OffsetTableDatum>
109+
<OffsetTableDatum>{displayName}</OffsetTableDatum>
110+
<OffsetTableDatum>
111+
{vector.x === 0 && vector.y === 0 && vector.z === 0 ? (
112+
<StyledText>{t('no_labware_offsets')}</StyledText>
113+
) : (
114+
<OffsetVector {...vector} />
115+
)}
116+
</OffsetTableDatum>
117+
</OffsetTableRow>
115118
)
116-
})}
117-
</Flex>
118-
<Flex
119-
flex={'auto'}
120-
flexDirection={DIRECTION_COLUMN}
121-
justifyContent={JUSTIFY_CENTER}
122-
>
123-
<Text
124-
textTransform={TEXT_TRANSFORM_UPPERCASE}
125-
marginBottom={SPACING_3}
126-
color={C_MED_GRAY}
127-
fontSize={FONT_SIZE_CAPTION}
128-
>
129-
{t('labware_offsets_summary_offset')}
130-
</Text>
131-
{offsetData
132-
.map(({ vector }) => vector)
133-
.map(({ x, y, z }, index) => {
134-
return x === 0 && y === 0 && z === 0 ? (
135-
<Flex key={index} marginBottom={SPACING_3} css={FONT_BODY_1_DARK}>
136-
{t('no_labware_offsets')}
137-
</Flex>
138-
) : (
139-
<Flex key={index} marginBottom={SPACING_3} css={FONT_BODY_1_DARK}>
140-
<Text as={'strong'} marginRight={SPACING_1}>
141-
X
142-
</Text>
143-
<Text as={'span'} marginRight={SPACING_2}>
144-
{x.toFixed(2)}
145-
</Text>
146-
<Text as={'strong'} marginRight={SPACING_1}>
147-
Y
148-
</Text>
149-
<Text as={'span'} marginRight={SPACING_2}>
150-
{y.toFixed(2)}
151-
</Text>
152-
<Text as={'strong'} marginRight={SPACING_1}>
153-
Z
154-
</Text>
155-
<Text as={'span'} marginRight={SPACING_2}>
156-
{z.toFixed(2)}
157-
</Text>
158-
</Flex>
159-
)
160-
})}
161-
</Flex>
162-
</Flex>
119+
)}
120+
</tbody>
121+
</OffsetTable>
163122
)
164123
}
165124

@@ -169,33 +128,22 @@ export const LabwareOffsetsSummary = (
169128
const { offsetData } = props
170129
const { t } = useTranslation('labware_position_check')
171130
return (
172-
<React.Fragment>
173-
<Flex
174-
flex={'auto'}
175-
padding={SPACING_4}
176-
boxShadow="1px 1px 1px rgba(0, 0, 0, 0.25)"
177-
borderRadius="4px"
178-
backgroundColor={C_NEAR_WHITE}
179-
flexDirection={DIRECTION_COLUMN}
180-
>
181-
<Flex
182-
flexDirection={DIRECTION_ROW}
183-
justifyContent={JUSTIFY_SPACE_BETWEEN}
184-
>
185-
<Text
186-
as={'h5'}
187-
fontWeight={FONT_WEIGHT_SEMIBOLD}
188-
marginBottom={SPACING_3}
189-
>
190-
{t('labware_offsets_summary_title')}
191-
</Text>
192-
</Flex>
193-
{offsetData.length === 0 ? (
194-
<OffsetDataLoader />
195-
) : (
196-
<SummaryData offsetData={offsetData} />
197-
)}
198-
</Flex>
199-
</React.Fragment>
131+
<Flex
132+
flex={'auto'}
133+
padding={SPACING.spacing4}
134+
boxShadow="1px 1px 1px rgba(0, 0, 0, 0.25)"
135+
borderRadius="4px"
136+
backgroundColor={C_NEAR_WHITE}
137+
flexDirection={DIRECTION_COLUMN}
138+
>
139+
<StyledText as={'h5'} marginBottom={SPACING.spacing3}>
140+
{t('labware_offsets_summary_title')}
141+
</StyledText>
142+
{offsetData.length === 0 ? (
143+
<OffsetDataLoader />
144+
) : (
145+
<SummaryData offsetData={offsetData} />
146+
)}
147+
</Flex>
200148
)
201149
}

‎app/src/organisms/LabwarePositionCheck/SummaryScreen.tsx

Lines changed: 22 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,14 @@ import {
44
ALIGN_START,
55
DIRECTION_COLUMN,
66
Flex,
7+
Box,
78
FONT_WEIGHT_SEMIBOLD,
89
JUSTIFY_CENTER,
9-
JUSTIFY_START,
1010
NewPrimaryBtn,
11-
SPACING_3,
12-
SPACING_2,
13-
SPACING_4,
11+
SPACING,
1412
Text,
1513
TEXT_TRANSFORM_UPPERCASE,
14+
JUSTIFY_SPACE_BETWEEN,
1615
} from '@opentrons/components'
1716
import { useCreateLabwareOffsetMutation } from '@opentrons/react-api-client'
1817
import { useCurrentRunId } from '../ProtocolUpload/hooks'
@@ -73,35 +72,34 @@ export const SummaryScreen = (props: {
7372
}
7473

7574
return (
76-
<Flex margin={SPACING_3} flexDirection={DIRECTION_COLUMN}>
75+
<Flex
76+
flexDirection={DIRECTION_COLUMN}
77+
justifyContent={JUSTIFY_SPACE_BETWEEN}
78+
>
7779
<Text
7880
as={'h3'}
7981
textTransform={TEXT_TRANSFORM_UPPERCASE}
8082
fontWeight={FONT_WEIGHT_SEMIBOLD}
81-
marginBottom={SPACING_3}
82-
marginLeft={SPACING_3}
83+
marginBottom={SPACING.spacing4}
84+
marginLeft={SPACING.spacing4}
8385
>
8486
{t('lpc_complete_summary_screen_heading')}
8587
</Text>
86-
<Flex justifyContent={JUSTIFY_START} alignItems={ALIGN_START}>
87-
<Flex flex={'1 1 10%'} flexDirection={DIRECTION_COLUMN}>
88-
<Flex paddingLeft={SPACING_4}>
89-
<SectionList
90-
primaryPipetteMount={primaryPipetteMount}
91-
secondaryPipetteMount={secondaryPipetteMount}
92-
sections={sections}
93-
completedSections={sections}
94-
/>
95-
</Flex>
96-
<Flex paddingTop={SPACING_2}>
97-
<DeckMap completedLabwareIds={labwareIds} />
98-
</Flex>
99-
</Flex>
100-
<Flex flex={'1 1 45%'}>
101-
<LabwareOffsetsSummary offsetData={labwareOffsets} />
88+
<Flex justifyContent={JUSTIFY_SPACE_BETWEEN} alignItems={ALIGN_START}>
89+
<Flex flex={'1 1 22%'} flexDirection={DIRECTION_COLUMN}>
90+
<SectionList
91+
primaryPipetteMount={primaryPipetteMount}
92+
secondaryPipetteMount={secondaryPipetteMount}
93+
sections={sections}
94+
completedSections={sections}
95+
/>
96+
<Box size={SPACING.spacing3} />
97+
<DeckMap completedLabwareIds={labwareIds} />
10298
</Flex>
99+
<Box size={SPACING.spacing3} />
100+
<LabwareOffsetsSummary offsetData={labwareOffsets} />
103101
</Flex>
104-
<Flex justifyContent={JUSTIFY_CENTER} marginBottom={SPACING_4}>
102+
<Flex justifyContent={JUSTIFY_CENTER} marginY={SPACING.spacing4}>
105103
<NewPrimaryBtn
106104
title={t('close_and_apply_offset_data')}
107105
id={'Lpc_summaryScreen_applyOffsetButton'}

0 commit comments

Comments
 (0)