Skip to content

Commit 6171099

Browse files
smb2268smb2268
committed
Fix locations for error recovery and intervention modals, lint
1 parent e862369 commit 6171099

File tree

15 files changed

+192
-296
lines changed

15 files changed

+192
-296
lines changed

‎app/src/organisms/ErrorRecoveryFlows/shared/LeftColumnLabwareInfo.tsx

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,9 @@ export function LeftColumnLabwareInfo({
7676
labwareName: failedLabwareNames.name ?? '',
7777
labwareNickname: failedLabwareNames.nickName,
7878
currentLocationProps: {
79-
deckLabel: displayNameCurrentLoc.toUpperCase(),
79+
deckLabel: `STACKER ${(
80+
displayNameCurrentLoc?.toUpperCase() ?? ''
81+
).charAt(0)}`,
8082
},
8183
}
8284
case STACKER_STALLED_SKIP.STEPS.PLACE_LABWARE_ON_SHUTTLE:
@@ -86,7 +88,9 @@ export function LeftColumnLabwareInfo({
8688
labwareName: failedLabwareNames.name ?? '',
8789
labwareNickname: failedLabwareNames.nickName,
8890
currentLocationProps: {
89-
deckLabel: displayNameNewLoc?.toUpperCase() ?? '',
91+
deckLabel: `${(displayNameNewLoc?.toUpperCase() ?? '').charAt(
92+
0
93+
)}4`,
9094
},
9195
}
9296
default:

‎app/src/organisms/ErrorRecoveryFlows/shared/StackerHopperLwInfo.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,8 @@ export function StackerHopperLwInfo(props: RecoveryContentProps): JSX.Element {
2222
<LeftColumnLabwareInfo
2323
{...props}
2424
title={t('ensure_stacker_has_labware')}
25-
type={'location'}
26-
layout={'stacked'}
25+
type="location"
26+
layout="stacked"
2727
bannerText={t('make_sure_loaded_correct_number_of_labware_stacker')}
2828
/>
2929
<RightColumnAnimation animationSrc={FillHopper} />

‎app/src/organisms/ErrorRecoveryFlows/shared/StackerShuttleLwInfo.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,8 @@ export function StackerShuttleLwInfo(props: RecoveryContentProps): JSX.Element {
1919
<LeftColumnLabwareInfo
2020
{...props}
2121
title={t('load_labware_into_labware_shuttle')}
22-
type={'location'}
23-
layout={'stacked'}
22+
type="location"
23+
layout="default"
2424
showQuantity={false}
2525
/>
2626
<RightColumnAnimation animationSrc={ShuttleLabware} />

‎app/src/organisms/ErrorRecoveryFlows/shared/TwoColLwInfoAndDeck.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -206,7 +206,7 @@ export function TwoColLwInfoAndDeck(
206206
{...props}
207207
title={buildTitle()}
208208
type={buildType()}
209-
layout={'default'}
209+
layout="default"
210210
bannerText={buildBannerText()}
211211
/>
212212
<Flex marginTop="0.7rem">{buildDeckView()}</Flex>

‎app/src/organisms/InterventionModal/MoveLabwareInterventionContent.tsx

Lines changed: 32 additions & 196 deletions
Original file line numberDiff line numberDiff line change
@@ -1,108 +1,39 @@
11
import { useTranslation } from 'react-i18next'
2-
import { css } from 'styled-components'
32

43
import {
5-
ALIGN_CENTER,
6-
BORDERS,
74
Box,
85
COLORS,
9-
DeckInfoLabel,
106
DIRECTION_COLUMN,
11-
DISPLAY_NONE,
127
Flex,
138
getLabwareDisplayLocation,
149
getLoadedLabware,
15-
getLoadedModule,
16-
Icon,
1710
LabwareRender,
18-
LegacyStyledText,
1911
Module,
2012
MoveLabwareOnDeck,
21-
RESPONSIVENESS,
2213
SPACING,
23-
TEXT_TRANSFORM_UPPERCASE,
24-
TYPOGRAPHY,
2514
} from '@opentrons/components'
2615
import {
2716
getDeckDefFromRobotType,
2817
getLoadedLabwareDefinitionsByUri,
29-
getModuleType,
30-
GRIPPER_WASTE_CHUTE_ADDRESSABLE_AREA,
3118
inferModuleOrientationFromXCoordinate,
32-
OT2_ROBOT_TYPE,
33-
TC_MODULE_LOCATION_OT2,
34-
TC_MODULE_LOCATION_OT3,
35-
THERMOCYCLER_MODULE_TYPE,
3619
} from '@opentrons/shared-data'
3720

38-
import { Divider } from '/app/atoms/structure'
21+
import { InterventionInfo } from '/app/molecules/InterventionModal/InterventionContent'
3922
import { useNotifyDeckConfigurationQuery } from '/app/resources/deck_configuration'
4023

4124
import {
4225
getLabwareNameFromRunData,
43-
getModuleModelFromRunData,
4426
getRunLabwareRenderInfo,
4527
getRunModuleRenderInfo,
4628
} from './utils'
4729

4830
import type { RunData } from '@opentrons/api-client'
4931
import type {
5032
CompletedProtocolAnalysis,
51-
LabwareDefinitionsByUri,
52-
LabwareLocation,
5333
MoveLabwareRunTimeCommand,
5434
RobotType,
5535
} from '@opentrons/shared-data'
5636

57-
const LABWARE_DESCRIPTION_STYLE = css`
58-
flex-direction: ${DIRECTION_COLUMN};
59-
grid-gap: ${SPACING.spacing8};
60-
padding: ${SPACING.spacing16};
61-
background-color: ${COLORS.grey20};
62-
border-radius: ${BORDERS.borderRadius4};
63-
@media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
64-
background-color: ${COLORS.grey35};
65-
border-radius: ${BORDERS.borderRadius8};
66-
}
67-
`
68-
69-
const LABWARE_NAME_TITLE_STYLE = css`
70-
font-weight: ${TYPOGRAPHY.fontWeightSemiBold};
71-
@media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
72-
display: ${DISPLAY_NONE};
73-
}
74-
`
75-
76-
const LABWARE_NAME_STYLE = css`
77-
color: ${COLORS.grey60};
78-
@media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
79-
${TYPOGRAPHY.bodyTextBold}
80-
color: ${COLORS.black90};
81-
}
82-
`
83-
84-
const DIVIDER_STYLE = css`
85-
@media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
86-
display: ${DISPLAY_NONE};
87-
}
88-
`
89-
90-
const LABWARE_DIRECTION_STYLE = css`
91-
align-items: ${ALIGN_CENTER};
92-
grid-gap: ${SPACING.spacing4};
93-
text-transform: ${TEXT_TRANSFORM_UPPERCASE};
94-
@media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
95-
grid-gap: ${SPACING.spacing8};
96-
}
97-
`
98-
99-
const ICON_STYLE = css`
100-
height: 1.5rem;
101-
@media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
102-
height: 2.5rem;
103-
}
104-
`
105-
10637
export interface MoveLabwareInterventionProps {
10738
command: MoveLabwareRunTimeCommand
10839
analysis: CompletedProtocolAnalysis | null
@@ -118,7 +49,7 @@ export function MoveLabwareInterventionContent({
11849
robotType,
11950
isOnDevice,
12051
}: MoveLabwareInterventionProps): JSX.Element | null {
121-
const { t } = useTranslation(['protocol_setup', 'protocol_command_text'])
52+
const { i18n, t } = useTranslation('protocol_command_text')
12253

12354
const analysisCommands = analysis?.commands ?? []
12455
const labwareDefsByUri = getLoadedLabwareDefinitionsByUri(analysisCommands)
@@ -151,6 +82,24 @@ export function MoveLabwareInterventionContent({
15182
? labwareDefsByUri?.[movedLabwareDefUri] ?? null
15283
: null
15384
if (oldLabwareLocation == null || movedLabwareDef == null) return null
85+
const oldDisplayLabwareLocation = getLabwareDisplayLocation({
86+
location: oldLabwareLocation,
87+
loadedModules: run.modules,
88+
loadedLabwares: run.labware,
89+
robotType: 'OT-3 Standard',
90+
detailLevel: 'slot-only',
91+
includeSlotText: false,
92+
t,
93+
})
94+
const newDisplayLabwareLocation = getLabwareDisplayLocation({
95+
location: command.params.newLocation,
96+
loadedModules: run.modules,
97+
loadedLabwares: run.labware,
98+
robotType: 'OT-3 Standard',
99+
detailLevel: 'slot-only',
100+
includeSlotText: false,
101+
t,
102+
})
154103
return (
155104
<Flex
156105
flexDirection={DIRECTION_COLUMN}
@@ -163,41 +112,17 @@ export function MoveLabwareInterventionContent({
163112
gridGap={SPACING.spacing12}
164113
width="50%"
165114
>
166-
<Flex css={LABWARE_DESCRIPTION_STYLE}>
167-
<Flex flexDirection={DIRECTION_COLUMN}>
168-
<LegacyStyledText as="h2" css={LABWARE_NAME_TITLE_STYLE}>
169-
{t('labware_name')}
170-
</LegacyStyledText>
171-
<LegacyStyledText as="p" css={LABWARE_NAME_STYLE}>
172-
{labwareName}
173-
</LegacyStyledText>
174-
</Flex>
175-
<Divider css={DIVIDER_STYLE} />
176-
<Flex css={LABWARE_DIRECTION_STYLE}>
177-
<DeckInfoLabel
178-
deckLabel={getLabwareDisplayLocation({
179-
location: oldLabwareLocation,
180-
loadedModules: run.modules,
181-
loadedLabwares: run.labware,
182-
robotType: 'OT-3 Standard',
183-
detailLevel: 'slot-only',
184-
t,
185-
})}
186-
/>
187-
188-
<Icon name="arrow-right" css={ICON_STYLE} />
189-
<DeckInfoLabel
190-
deckLabel={getLabwareDisplayLocation({
191-
location: command.params.newLocation,
192-
loadedModules: run.modules,
193-
loadedLabwares: run.labware,
194-
robotType: 'OT-3 Standard',
195-
detailLevel: 'slot-only',
196-
t,
197-
})}
198-
/>
199-
</Flex>
200-
</Flex>
115+
<InterventionInfo
116+
layout="default"
117+
type="location-arrow-location"
118+
labwareName={labwareName}
119+
currentLocationProps={{
120+
deckLabel: oldDisplayLabwareLocation,
121+
}}
122+
newLocationProps={{
123+
deckLabel: newDisplayLabwareLocation,
124+
}}
125+
/>
201126
</Flex>
202127
<Flex width="50%">
203128
<Box margin="0 auto" width="100%">
@@ -235,7 +160,7 @@ export function MoveLabwareInterventionContent({
235160
childrenPositioningMode="offsetToSlot"
236161
>
237162
{nestedLabwareDef != null &&
238-
nestedLabwareId !== command.params.labwareId ? (
163+
nestedLabwareId !== command.params.labwareId ? (
239164
<LabwareRender
240165
definition={nestedLabwareDef}
241166
positioningMode="offsetInSlot"
@@ -266,92 +191,3 @@ export function MoveLabwareInterventionContent({
266191
</Flex>
267192
)
268193
}
269-
270-
interface LabwareDisplayLocationProps {
271-
protocolData: RunData
272-
location: LabwareLocation
273-
robotType: RobotType
274-
labwareDefsByUri: LabwareDefinitionsByUri
275-
}
276-
function LabwareDisplayLocation(
277-
props: LabwareDisplayLocationProps
278-
): JSX.Element {
279-
const { t } = useTranslation('protocol_command_text')
280-
const { protocolData, location, robotType } = props
281-
let displayLocation: string = ''
282-
if (location === 'offDeck' || location === 'systemLocation') {
283-
// TODO(BC, 08/28/23): remove this string cast after update i18next to >23 (see https://www.i18next.com/overview/typescript#argument-of-type-defaulttfuncreturn-is-not-assignable-to-parameter-of-type-xyz)
284-
displayLocation = String(t('offdeck'))
285-
} else if ('slotName' in location) {
286-
displayLocation = location.slotName
287-
} else if ('addressableAreaName' in location) {
288-
const aaLocation = location.addressableAreaName
289-
displayLocation =
290-
aaLocation === GRIPPER_WASTE_CHUTE_ADDRESSABLE_AREA
291-
? t('waste_chute')
292-
: aaLocation
293-
} else if ('moduleId' in location) {
294-
const moduleModel = getModuleModelFromRunData(
295-
protocolData,
296-
location.moduleId
297-
)
298-
if (moduleModel == null) {
299-
console.warn('labware is located on an unknown module model')
300-
} else {
301-
const slotName =
302-
getLoadedModule(protocolData.modules, location.moduleId)?.location
303-
?.slotName ?? ''
304-
const isModuleUnderAdapterThermocycler =
305-
getModuleType(moduleModel) === THERMOCYCLER_MODULE_TYPE
306-
if (isModuleUnderAdapterThermocycler) {
307-
displayLocation =
308-
robotType === OT2_ROBOT_TYPE
309-
? TC_MODULE_LOCATION_OT2
310-
: TC_MODULE_LOCATION_OT3
311-
} else {
312-
displayLocation = slotName
313-
}
314-
}
315-
} else if ('labwareId' in location) {
316-
const adapter = protocolData.labware.find(
317-
lw => lw.id === location.labwareId
318-
)
319-
if (adapter == null) {
320-
console.warn('labware is located on an unknown adapter')
321-
} else if (
322-
adapter.location === 'offDeck' ||
323-
adapter.location === 'systemLocation'
324-
) {
325-
displayLocation = t('off_deck')
326-
} else if ('slotName' in adapter.location) {
327-
displayLocation = adapter.location.slotName
328-
} else if ('addressableAreaName' in adapter.location) {
329-
displayLocation = adapter.location.addressableAreaName
330-
} else if ('moduleId' in adapter.location) {
331-
const moduleIdUnderAdapter = adapter.location.moduleId
332-
const moduleModel = protocolData.modules.find(
333-
module => module.id === moduleIdUnderAdapter
334-
)?.model
335-
if (moduleModel == null) {
336-
console.warn('labware is located on an adapter on an unknown module')
337-
} else {
338-
const slotName =
339-
getLoadedModule(protocolData.modules, adapter.location.moduleId)
340-
?.location?.slotName ?? ''
341-
const isModuleUnderAdapterThermocycler =
342-
getModuleType(moduleModel) === THERMOCYCLER_MODULE_TYPE
343-
if (isModuleUnderAdapterThermocycler) {
344-
displayLocation =
345-
robotType === OT2_ROBOT_TYPE
346-
? TC_MODULE_LOCATION_OT2
347-
: TC_MODULE_LOCATION_OT3
348-
} else {
349-
displayLocation = slotName
350-
}
351-
}
352-
} else {
353-
console.warn('display location could not be established: ', location)
354-
}
355-
}
356-
return <DeckInfoLabel deckLabel={displayLocation} />
357-
}

‎app/src/organisms/InterventionModal/__tests__/InterventionModal.test.tsx

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -172,7 +172,6 @@ describe('InterventionModal', () => {
172172
}
173173
render(props)
174174
screen.getByText('Move labware on Otie')
175-
screen.getByText('Labware name')
176175
screen.getByText('mockLabware')
177176
screen.queryAllByText('A1')
178177
screen.queryAllByText('D3')
@@ -211,7 +210,6 @@ describe('InterventionModal', () => {
211210
}
212211
render(props)
213212
screen.getByText('Move labware on Otie')
214-
screen.getByText('Labware name')
215213
screen.getByText('mockLabwareInStagingArea')
216214
screen.queryAllByText('B4')
217215
screen.queryAllByText('C4')
@@ -246,7 +244,6 @@ describe('InterventionModal', () => {
246244
}
247245
render(props)
248246
screen.getByText('Move labware on Otie')
249-
screen.getByText('Labware name')
250247
screen.getByText('mockLabware')
251248
screen.queryAllByText('A1')
252249
screen.queryAllByText('C1')

‎app/src/organisms/ODD/ProtocolSetup/ProtocolSetupModulesAndDeck/ModuleTableItem.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,6 @@ import type {
3838
CutoutConfig,
3939
CutoutFixtureId,
4040
DeckDefinition,
41-
ModuleModel,
4241
} from '@opentrons/shared-data'
4342
import type { ModulePrepCommandsType } from '/app/local-resources/modules'
4443
import type { ProtocolCalibrationStatus } from '/app/resources/runs'

0 commit comments

Comments
 (0)