Skip to content

Commit 4adb604

Browse files
smb2268ahiuchingau
smb2268
authored and
ahiuchingau
committed
Fix locations for error recovery and intervention modals, lint
1 parent a9e9f58 commit 4adb604

File tree

15 files changed

+191
-295
lines changed

15 files changed

+191
-295
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
@@ -186,7 +186,7 @@ export function TwoColLwInfoAndDeck(
186186
{...props}
187187
title={buildTitle()}
188188
type={buildType()}
189-
layout={'default'}
189+
layout="default"
190190
bannerText={buildBannerText()}
191191
/>
192192
<Flex marginTop="0.7rem">{buildDeckView()}</Flex>

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

Lines changed: 31 additions & 195 deletions
Original file line numberDiff line numberDiff line change
@@ -1,106 +1,37 @@
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
MoveLabwareOnDeck,
20-
RESPONSIVENESS,
2112
SPACING,
22-
TEXT_TRANSFORM_UPPERCASE,
23-
TYPOGRAPHY,
2413
} from '@opentrons/components'
2514
import {
2615
getDeckDefFromRobotType,
2716
getLoadedLabwareDefinitionsByUri,
28-
getModuleType,
29-
GRIPPER_WASTE_CHUTE_ADDRESSABLE_AREA,
30-
OT2_ROBOT_TYPE,
31-
TC_MODULE_LOCATION_OT2,
32-
TC_MODULE_LOCATION_OT3,
33-
THERMOCYCLER_MODULE_TYPE,
3417
} from '@opentrons/shared-data'
3518

36-
import { Divider } from '/app/atoms/structure'
19+
import { InterventionInfo } from '/app/molecules/InterventionModal/InterventionContent'
3720
import { useNotifyDeckConfigurationQuery } from '/app/resources/deck_configuration'
3821

3922
import {
4023
getLabwareNameFromRunData,
41-
getModuleModelFromRunData,
4224
getRunLabwareRenderInfo,
4325
getRunModuleRenderInfo,
4426
} from './utils'
4527

4628
import type { RunData } from '@opentrons/api-client'
4729
import type {
4830
CompletedProtocolAnalysis,
49-
LabwareDefinitionsByUri,
50-
LabwareLocation,
5131
MoveLabwareRunTimeCommand,
5232
RobotType,
5333
} from '@opentrons/shared-data'
5434

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

12152
const analysisCommands = analysis?.commands ?? []
12253
const labwareDefsByUri = getLoadedLabwareDefinitionsByUri(analysisCommands)
@@ -162,6 +93,24 @@ export function MoveLabwareInterventionContent({
16293
? labwareDefsByUri?.[movedLabwareDefUri] ?? null
16394
: null
16495
if (oldLabwareLocation == null || movedLabwareDef == null) return null
96+
const oldDisplayLabwareLocation = getLabwareDisplayLocation({
97+
location: oldLabwareLocation,
98+
loadedModules: run.modules,
99+
loadedLabwares: run.labware,
100+
robotType: 'OT-3 Standard',
101+
detailLevel: 'slot-only',
102+
includeSlotText: false,
103+
t,
104+
})
105+
const newDisplayLabwareLocation = getLabwareDisplayLocation({
106+
location: command.params.newLocation,
107+
loadedModules: run.modules,
108+
loadedLabwares: run.labware,
109+
robotType: 'OT-3 Standard',
110+
detailLevel: 'slot-only',
111+
includeSlotText: false,
112+
t,
113+
})
165114
return (
166115
<Flex
167116
flexDirection={DIRECTION_COLUMN}
@@ -174,41 +123,17 @@ export function MoveLabwareInterventionContent({
174123
gridGap={SPACING.spacing12}
175124
width="50%"
176125
>
177-
<Flex css={LABWARE_DESCRIPTION_STYLE}>
178-
<Flex flexDirection={DIRECTION_COLUMN}>
179-
<LegacyStyledText as="h2" css={LABWARE_NAME_TITLE_STYLE}>
180-
{t('labware_name')}
181-
</LegacyStyledText>
182-
<LegacyStyledText as="p" css={LABWARE_NAME_STYLE}>
183-
{labwareName}
184-
</LegacyStyledText>
185-
</Flex>
186-
<Divider css={DIVIDER_STYLE} />
187-
<Flex css={LABWARE_DIRECTION_STYLE}>
188-
<DeckInfoLabel
189-
deckLabel={getLabwareDisplayLocation({
190-
location: oldLabwareLocation,
191-
loadedModules: run.modules,
192-
loadedLabwares: run.labware,
193-
robotType: 'OT-3 Standard',
194-
detailLevel: 'slot-only',
195-
t,
196-
})}
197-
/>
198-
199-
<Icon name="arrow-right" css={ICON_STYLE} />
200-
<DeckInfoLabel
201-
deckLabel={getLabwareDisplayLocation({
202-
location: command.params.newLocation,
203-
loadedModules: run.modules,
204-
loadedLabwares: run.labware,
205-
robotType: 'OT-3 Standard',
206-
detailLevel: 'slot-only',
207-
t,
208-
})}
209-
/>
210-
</Flex>
211-
</Flex>
126+
<InterventionInfo
127+
layout="default"
128+
type="location-arrow-location"
129+
labwareName={labwareName}
130+
currentLocationProps={{
131+
deckLabel: oldDisplayLabwareLocation,
132+
}}
133+
newLocationProps={{
134+
deckLabel: newDisplayLabwareLocation,
135+
}}
136+
/>
212137
</Flex>
213138
<Flex width="50%">
214139
<Box margin="0 auto" width="100%">
@@ -247,92 +172,3 @@ export function MoveLabwareInterventionContent({
247172
</Flex>
248173
)
249174
}
250-
251-
interface LabwareDisplayLocationProps {
252-
protocolData: RunData
253-
location: LabwareLocation
254-
robotType: RobotType
255-
labwareDefsByUri: LabwareDefinitionsByUri
256-
}
257-
function LabwareDisplayLocation(
258-
props: LabwareDisplayLocationProps
259-
): JSX.Element {
260-
const { t } = useTranslation('protocol_command_text')
261-
const { protocolData, location, robotType } = props
262-
let displayLocation: string = ''
263-
if (location === 'offDeck' || location === 'systemLocation') {
264-
// 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)
265-
displayLocation = String(t('offdeck'))
266-
} else if ('slotName' in location) {
267-
displayLocation = location.slotName
268-
} else if ('addressableAreaName' in location) {
269-
const aaLocation = location.addressableAreaName
270-
displayLocation =
271-
aaLocation === GRIPPER_WASTE_CHUTE_ADDRESSABLE_AREA
272-
? t('waste_chute')
273-
: aaLocation
274-
} else if ('moduleId' in location) {
275-
const moduleModel = getModuleModelFromRunData(
276-
protocolData,
277-
location.moduleId
278-
)
279-
if (moduleModel == null) {
280-
console.warn('labware is located on an unknown module model')
281-
} else {
282-
const slotName =
283-
getLoadedModule(protocolData.modules, location.moduleId)?.location
284-
?.slotName ?? ''
285-
const isModuleUnderAdapterThermocycler =
286-
getModuleType(moduleModel) === THERMOCYCLER_MODULE_TYPE
287-
if (isModuleUnderAdapterThermocycler) {
288-
displayLocation =
289-
robotType === OT2_ROBOT_TYPE
290-
? TC_MODULE_LOCATION_OT2
291-
: TC_MODULE_LOCATION_OT3
292-
} else {
293-
displayLocation = slotName
294-
}
295-
}
296-
} else if ('labwareId' in location) {
297-
const adapter = protocolData.labware.find(
298-
lw => lw.id === location.labwareId
299-
)
300-
if (adapter == null) {
301-
console.warn('labware is located on an unknown adapter')
302-
} else if (
303-
adapter.location === 'offDeck' ||
304-
adapter.location === 'systemLocation'
305-
) {
306-
displayLocation = t('off_deck')
307-
} else if ('slotName' in adapter.location) {
308-
displayLocation = adapter.location.slotName
309-
} else if ('addressableAreaName' in adapter.location) {
310-
displayLocation = adapter.location.addressableAreaName
311-
} else if ('moduleId' in adapter.location) {
312-
const moduleIdUnderAdapter = adapter.location.moduleId
313-
const moduleModel = protocolData.modules.find(
314-
module => module.id === moduleIdUnderAdapter
315-
)?.model
316-
if (moduleModel == null) {
317-
console.warn('labware is located on an adapter on an unknown module')
318-
} else {
319-
const slotName =
320-
getLoadedModule(protocolData.modules, adapter.location.moduleId)
321-
?.location?.slotName ?? ''
322-
const isModuleUnderAdapterThermocycler =
323-
getModuleType(moduleModel) === THERMOCYCLER_MODULE_TYPE
324-
if (isModuleUnderAdapterThermocycler) {
325-
displayLocation =
326-
robotType === OT2_ROBOT_TYPE
327-
? TC_MODULE_LOCATION_OT2
328-
: TC_MODULE_LOCATION_OT3
329-
} else {
330-
displayLocation = slotName
331-
}
332-
}
333-
} else {
334-
console.warn('display location could not be established: ', location)
335-
}
336-
}
337-
return <DeckInfoLabel deckLabel={displayLocation} />
338-
}

‎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'

‎app/src/pages/Desktop/Protocols/ProtocolPreview/SlotDetails.tsx

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -102,7 +102,10 @@ export function SlotDetails(props: SlotDetailsProps): JSX.Element {
102102
<DeckInfoLabel
103103
deckLabel={
104104
moduleOnSlot != null
105-
? getModuleDeckLabel(moduleEntities[moduleOnSlot[0]].type, slotId)
105+
? getModuleDeckLabel(
106+
moduleEntities[moduleOnSlot[0]].type,
107+
slotId
108+
)
106109
: slotId
107110
}
108111
/>
@@ -134,8 +137,8 @@ export function SlotDetails(props: SlotDetailsProps): JSX.Element {
134137
<TrashSlotDetails trashBinEntities={trashBinEntities} />
135138
) : null}
136139
{moduleOnSlot == null &&
137-
topMostLabwareOnSlot == null &&
138-
!isTrashOnSlot ? (
140+
topMostLabwareOnSlot == null &&
141+
!isTrashOnSlot ? (
139142
<SlotDetailsEmptyState />
140143
) : null}
141144
</div>

0 commit comments

Comments
 (0)