Skip to content

Commit 09fbb1f

Browse files
b-cooperb-cooper
authored
fix(app): historical runs labware offset should list display names (#11064)
This fixes a bug where the definition uri and raw module model of labware offsets would be shown in place of their display names in the historical runs listing of the device detail page Closes #11062
1 parent b9f2ba4 commit 09fbb1f

File tree

5 files changed

+59
-43
lines changed

5 files changed

+59
-43
lines changed

‎app/src/molecules/OffsetVector/index.tsx

Lines changed: 21 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import * as React from 'react'
2-
import { Flex, SPACING } from '@opentrons/components'
2+
import { Flex, SPACING, TYPOGRAPHY } from '@opentrons/components'
33
import { StyledText } from '../../atoms/text'
44

55
import type { StyleProps } from '@opentrons/components'
@@ -8,28 +8,41 @@ interface OffsetVectorProps extends StyleProps {
88
x: number
99
y: number
1010
z: number
11+
as?: React.ComponentProps<typeof StyledText>['as']
1112
}
1213

1314
export function OffsetVector(props: OffsetVectorProps): JSX.Element {
14-
const { x, y, z, ...styleProps } = props
15+
const { x, y, z, as = 'h6', ...styleProps } = props
1516
return (
1617
<Flex {...styleProps}>
17-
<StyledText as={'h6'} marginRight={SPACING.spacing2}>
18+
<StyledText
19+
as={as}
20+
marginRight={SPACING.spacing2}
21+
fontWeight={TYPOGRAPHY.fontWeightSemiBold}
22+
>
1823
X
1924
</StyledText>
20-
<StyledText as={'h6'} marginRight={SPACING.spacing3}>
25+
<StyledText as={as} marginRight={SPACING.spacing3}>
2126
{x.toFixed(2)}
2227
</StyledText>
23-
<StyledText as={'h6'} marginRight={SPACING.spacing2}>
28+
<StyledText
29+
as={as}
30+
marginRight={SPACING.spacing2}
31+
fontWeight={TYPOGRAPHY.fontWeightSemiBold}
32+
>
2433
Y
2534
</StyledText>
26-
<StyledText as={'h6'} marginRight={SPACING.spacing3}>
35+
<StyledText as={as} marginRight={SPACING.spacing3}>
2736
{y.toFixed(2)}
2837
</StyledText>
29-
<StyledText as={'h6'} marginRight={SPACING.spacing2}>
38+
<StyledText
39+
as={as}
40+
marginRight={SPACING.spacing2}
41+
fontWeight={TYPOGRAPHY.fontWeightSemiBold}
42+
>
3043
Z
3144
</StyledText>
32-
<StyledText as={'h6'} marginRight={SPACING.spacing3}>
45+
<StyledText as={as} marginRight={SPACING.spacing3}>
3346
{z.toFixed(2)}
3447
</StyledText>
3548
</Flex>

‎app/src/organisms/Devices/HistoricalProtocolRun.tsx

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -33,15 +33,14 @@ interface HistoricalProtocolRunProps {
3333
protocolName: string
3434
robotName: string
3535
robotIsBusy: boolean
36-
key: number
3736
protocolKey?: string
3837
}
3938

4039
export function HistoricalProtocolRun(
4140
props: HistoricalProtocolRunProps
4241
): JSX.Element | null {
4342
const { t } = useTranslation('run_details')
44-
const { run, protocolName, robotIsBusy, robotName, protocolKey, key } = props
43+
const { run, protocolName, robotIsBusy, robotName, protocolKey } = props
4544
const history = useHistory()
4645
const [offsetDrawerOpen, setOffsetDrawerOpen] = React.useState(false)
4746
const storedProtocols = useSelector((state: State) =>
@@ -85,7 +84,7 @@ export function HistoricalProtocolRun(
8584
<StyledText
8685
as="p"
8786
width="25%"
88-
data-testid={`RecentProtocolRuns_Run_${key}`}
87+
data-testid={`RecentProtocolRuns_Run_${protocolKey}`}
8988
onClick={() =>
9089
history.push(
9190
`${robotName}/protocol-runs/${run.id}/protocolRunDetailsTab?`
@@ -101,7 +100,7 @@ export function HistoricalProtocolRun(
101100
<StyledText
102101
as="p"
103102
width="35%"
104-
data-testid={`RecentProtocolRuns_Protocol_${props.key}`}
103+
data-testid={`RecentProtocolRuns_Protocol_${protocolKey}`}
105104
onClick={() => history.push(`/protocols/${protocolKey}`)}
106105
css={CLICK_STYLE}
107106
marginRight={SPACING.spacing4}
@@ -112,7 +111,7 @@ export function HistoricalProtocolRun(
112111
<StyledText
113112
as="p"
114113
width="35%"
115-
data-testid={`RecentProtocolRuns_Protocol_${props.key}`}
114+
data-testid={`RecentProtocolRuns_Protocol_${protocolKey}`}
116115
css={{ 'overflow-wrap': 'anywhere' }}
117116
>
118117
{protocolName}
@@ -122,7 +121,7 @@ export function HistoricalProtocolRun(
122121
as="p"
123122
width="20%"
124123
textTransform="capitalize"
125-
data-testid={`RecentProtocolRuns_Status_${props.key}`}
124+
data-testid={`RecentProtocolRuns_Status_${protocolKey}`}
126125
>
127126
{runStatus === 'running' && (
128127
<Icon

‎app/src/organisms/Devices/HistoricalProtocolRunOffsetDrawer.tsx

Lines changed: 32 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,11 @@ import {
1111
JUSTIFY_FLEX_START,
1212
DIRECTION_COLUMN,
1313
} from '@opentrons/components'
14+
import {
15+
getLabwareDefURI,
16+
getLabwareDisplayName,
17+
getModuleDisplayName,
18+
} from '@opentrons/shared-data'
1419
import { StyledText } from '../../atoms/text'
1520
import { Banner } from '../../atoms/Banner'
1621
import { useProtocolDetailsForRun, useDeckCalibrationData } from './hooks'
@@ -27,7 +32,6 @@ export function HistoricalProtocolRunOffsetDrawer(
2732
): JSX.Element | null {
2833
const { t } = useTranslation('run_details')
2934
const { run, robotName } = props
30-
const [showOutOfDateBanner, setShowOutOfDateBanner] = React.useState(false)
3135
const allLabwareOffsets = run.labwareOffsets?.sort(
3236
(a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
3337
)
@@ -50,7 +54,6 @@ export function HistoricalProtocolRunOffsetDrawer(
5054
? deckCalibrationData.lastModified
5155
: null
5256
const protocolDetails = useProtocolDetailsForRun(run.id)
53-
const labwareDetails = protocolDetails.protocolData?.labware
5457

5558
if (uniqueLabwareOffsets == null || uniqueLabwareOffsets.length === 0) {
5659
return (
@@ -70,23 +73,20 @@ export function HistoricalProtocolRunOffsetDrawer(
7073
</Box>
7174
)
7275
}
73-
if (
76+
const isOutOfDate =
7477
typeof lastModifiedDeckCal === 'string' &&
7578
new Date(lastModifiedDeckCal).getTime() >
7679
new Date(
7780
uniqueLabwareOffsets[uniqueLabwareOffsets?.length - 1].createdAt
7881
).getTime()
79-
) {
80-
setShowOutOfDateBanner(true)
81-
}
8282

8383
return (
8484
<Box
8585
backgroundColor={COLORS.medGrey}
8686
width="100%"
8787
padding={SPACING.spacing3}
8888
>
89-
{showOutOfDateBanner && (
89+
{isOutOfDate ? (
9090
<Banner
9191
type="warning"
9292
marginLeft={SPACING.spacing5}
@@ -99,7 +99,7 @@ export function HistoricalProtocolRunOffsetDrawer(
9999
<StyledText as="p">{t('robot_was_recalibrated')}</StyledText>
100100
</Flex>
101101
</Banner>
102-
)}
102+
) : null}
103103
<Flex
104104
justifyContent={JUSTIFY_FLEX_START}
105105
borderBottom={BORDERS.lineBorder}
@@ -111,7 +111,7 @@ export function HistoricalProtocolRunOffsetDrawer(
111111
as="label"
112112
fontWeight={TYPOGRAPHY.fontWeightSemiBold}
113113
textTransform={TYPOGRAPHY.textTransformCapitalize}
114-
dataTest-id={`RecentProtocolRun_OffsetDrawer_locationTitle`}
114+
datatest-id={`RecentProtocolRun_OffsetDrawer_locationTitle`}
115115
>
116116
{t('location')}
117117
</StyledText>
@@ -120,7 +120,7 @@ export function HistoricalProtocolRunOffsetDrawer(
120120
width="33%"
121121
fontWeight={TYPOGRAPHY.fontWeightSemiBold}
122122
textTransform={TYPOGRAPHY.textTransformCapitalize}
123-
dataTest-id={`RecentProtocolRun_OffsetDrawer_labwareTitle`}
123+
datatest-id={`RecentProtocolRun_OffsetDrawer_labwareTitle`}
124124
>
125125
{t('labware')}
126126
</StyledText>
@@ -129,19 +129,19 @@ export function HistoricalProtocolRunOffsetDrawer(
129129
width="40%"
130130
fontWeight={TYPOGRAPHY.fontWeightSemiBold}
131131
textTransform={TYPOGRAPHY.textTransformCapitalize}
132-
dataTest-id={`RecentProtocolRun_OffsetDrawer_labwareOffsetDataTitle`}
132+
datatest-id={`RecentProtocolRun_OffsetDrawer_labwareOffsetDataTitle`}
133133
>
134134
{t('labware_offset_data')}
135135
</StyledText>
136136
</Flex>
137137
{uniqueLabwareOffsets.map((offset, index) => {
138-
let labwareName = offset.definitionUri
139-
if (labwareDetails != null) {
140-
labwareName =
141-
Object.values(labwareDetails)?.find(labware =>
142-
labware.definitionId.includes(offset.definitionUri)
143-
)?.displayName ?? offset.definitionUri
144-
}
138+
const definition = Object.values(
139+
protocolDetails.protocolData?.labwareDefinitions ?? {}
140+
).find(def => getLabwareDefURI(def) === offset.definitionUri)
141+
const labwareName =
142+
definition != null
143+
? getLabwareDisplayName(definition)
144+
: offset.definitionUri
145145

146146
return (
147147
<Flex
@@ -155,18 +155,23 @@ export function HistoricalProtocolRunOffsetDrawer(
155155
<StyledText width="25%" as="label">
156156
{t('slot', { slotName: offset.location.slotName })}
157157
{offset.location.moduleModel != null &&
158-
` - ${offset.location.moduleModel}`}
158+
` - ${getModuleDisplayName(offset.location.moduleModel)}`}
159159
</StyledText>
160-
<StyledText as="label" width="33%">
160+
<StyledText
161+
as="label"
162+
width="33%"
163+
overflow="hidden"
164+
textOverflow="ellipsis"
165+
title={labwareName}
166+
>
161167
{labwareName}
162168
</StyledText>
163-
<StyledText as="label" width="40%">
164-
<OffsetVector
165-
x={offset.vector.x}
166-
y={offset.vector.y}
167-
z={offset.vector.z}
168-
/>
169-
</StyledText>
169+
<OffsetVector
170+
{...offset.vector}
171+
width="40%"
172+
fontSize={TYPOGRAPHY.fontSizeLabel}
173+
as="label"
174+
/>
170175
</Flex>
171176
)
172177
})}

‎app/src/organisms/Devices/__tests__/HistoricalProtocolRun.test.tsx

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,6 @@ describe('RecentProtocolRuns', () => {
5858
protocolKey: 'protocolKeyStub',
5959
robotIsBusy: false,
6060
run: run,
61-
key: 1,
6261
}
6362
mockHistoricalProtocolRunOverflowMenu.mockReturnValue(
6463
<div>mock HistoricalProtocolRunOverflowMenu</div>
@@ -91,7 +90,6 @@ describe('RecentProtocolRuns', () => {
9190
protocolKey: '12345',
9291
robotIsBusy: false,
9392
run: run,
94-
key: 1,
9593
}
9694
const { getByText } = render(props)
9795
const protocolBtn = getByText('my protocol')

‎components/src/primitives/style-props.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ const TYPOGRAPHY_PROPS = [
1717
'textAlign',
1818
'textTransform',
1919
'textDecoration',
20+
'textOverflow',
2021
] as const
2122

2223
const SPACING_PROPS = [

0 commit comments

Comments
 (0)