Skip to content

Commit 0a09013

Browse files
smb2268smb2268
committed
Combine off deck labware of the same type
1 parent 0d1db4c commit 0a09013

File tree

7 files changed

+198
-143
lines changed

7 files changed

+198
-143
lines changed

‎app/src/organisms/Desktop/Devices/ProtocolRun/SetupLabware/LabwareListItem.tsx

Lines changed: 67 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,7 @@ interface LabwareListItemProps {
6262
slotName: string
6363
stackedItems: StackItem[]
6464
onClick: () => void
65+
offDeckQuantity?: number
6566
labwareByLiquidId?: LabwareByLiquidId
6667
showLabwareSVG?: boolean
6768
definitionsByURI?: LabwareDefinitionsByURI
@@ -73,6 +74,7 @@ export function LabwareListItem(
7374
const {
7475
stackedItems,
7576
slotName,
77+
offDeckQuantity,
7678
attachedModuleInfo,
7779
extraAttentionModules,
7880
isFlex,
@@ -259,70 +261,73 @@ export function LabwareListItem(
259261
width="100%"
260262
>
261263
<>
262-
{labwareLiquidRenderInfo.map((labware, index) => (
263-
<>
264-
<Flex gridGap={SPACING.spacing24} alignItems={ALIGN_CENTER}>
265-
{showLabwareSVG && definitionsByURI != null ? (
266-
<StandaloneLabware
267-
definition={definitionsByURI[labware.definitionUri]}
268-
/>
269-
) : null}
270-
<Flex
271-
flexDirection={DIRECTION_COLUMN}
272-
gridGap={SPACING.spacing4}
273-
>
274-
<StyledText desktopStyle="bodyDefaultSemiBold">
275-
{labware.displayName}
276-
</StyledText>
277-
{labware.lidDisplayName != null ? (
278-
<StyledText
279-
desktopStyle="bodyDefaultRegular"
280-
color={COLORS.grey60}
281-
>
282-
{t('with_lid', {
283-
lidDisplayName: labware.lidDisplayName,
284-
})}
285-
</StyledText>
286-
) : null}
287-
{labware.quantity > 1 || labware.liquids > 0 ? (
288-
<Flex
289-
flexDirection={DIRECTION_ROW}
290-
gridGap={SPACING.spacing4}
291-
>
292-
{labware.quantity > 1 ? (
293-
<Tag
294-
type="default"
295-
text={t('labware_quantity', {
296-
quantity: labware.quantity,
297-
})}
298-
/>
299-
) : null}
300-
{labware.liquids > 0 ? (
301-
<Tag
302-
type="default"
303-
text={
304-
labware.quantity > 1
305-
? t('multiple_liquid_layouts')
306-
: t('number_of_liquids', {
307-
number: labware.liquids,
308-
count: labware.liquids,
309-
})
310-
}
311-
/>
312-
) : null}
313-
</Flex>
264+
{labwareLiquidRenderInfo.map((labware, index) => {
265+
const quantityTag = offDeckQuantity ?? labware.quantity
266+
return (
267+
<>
268+
<Flex gridGap={SPACING.spacing24} alignItems={ALIGN_CENTER}>
269+
{showLabwareSVG && definitionsByURI != null ? (
270+
<StandaloneLabware
271+
definition={definitionsByURI[labware.definitionUri]}
272+
/>
314273
) : null}
274+
<Flex
275+
flexDirection={DIRECTION_COLUMN}
276+
gridGap={SPACING.spacing4}
277+
>
278+
<StyledText desktopStyle="bodyDefaultSemiBold">
279+
{labware.displayName}
280+
</StyledText>
281+
{labware.lidDisplayName != null ? (
282+
<StyledText
283+
desktopStyle="bodyDefaultRegular"
284+
color={COLORS.grey60}
285+
>
286+
{t('with_lid', {
287+
lidDisplayName: labware.lidDisplayName,
288+
})}
289+
</StyledText>
290+
) : null}
291+
{quantityTag > 1 || labware.liquids > 0 ? (
292+
<Flex
293+
flexDirection={DIRECTION_ROW}
294+
gridGap={SPACING.spacing4}
295+
>
296+
{quantityTag > 1 ? (
297+
<Tag
298+
type="default"
299+
text={t('labware_quantity', {
300+
quantity: quantityTag,
301+
})}
302+
/>
303+
) : null}
304+
{labware.liquids > 0 ? (
305+
<Tag
306+
type="default"
307+
text={
308+
labware.quantity > 1
309+
? t('multiple_liquid_layouts')
310+
: t('number_of_liquids', {
311+
number: labware.liquids,
312+
count: labware.liquids,
313+
})
314+
}
315+
/>
316+
) : null}
317+
</Flex>
318+
) : null}
319+
</Flex>
315320
</Flex>
316-
</Flex>
317-
{index !== labwareLiquidRenderInfo.length - 1 ? (
318-
<Box
319-
borderBottom={`1px solid ${String(COLORS.grey40)}`}
320-
marginY="0"
321-
width="100%"
322-
/>
323-
) : null}
324-
</>
325-
))}
321+
{index !== labwareLiquidRenderInfo.length - 1 ? (
322+
<Box
323+
borderBottom={`1px solid ${String(COLORS.grey40)}`}
324+
marginY="0"
325+
width="100%"
326+
/>
327+
) : null}
328+
</>
329+
)
330+
})}
326331
</>
327332
</Flex>
328333
<Flex

‎app/src/organisms/Desktop/Devices/ProtocolRun/SetupLabware/OffDeckLabwareList.tsx

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,19 @@ import {
77
SPACING,
88
TYPOGRAPHY,
99
} from '@opentrons/components'
10+
import { getOffDeckRenderInfo } from '@opentrons/shared-data'
1011

1112
import { LabwareListItem } from './LabwareListItem'
1213

1314
import type { Dispatch, SetStateAction } from 'react'
14-
import type { LabwareDefinitionsByURI, StackItem } from '@opentrons/shared-data'
15+
import type {
16+
LabwareDefinitionsByURI,
17+
StackedItemsOnDeck,
18+
StackItem,
19+
} from '@opentrons/shared-data'
1520

1621
interface OffDeckLabwareListProps {
17-
labwareItems: StackItem[]
22+
labwareItems: StackedItemsOnDeck
1823
isFlex: boolean
1924
definitionsByURI: LabwareDefinitionsByURI
2025
setSelectedStack: Dispatch<
@@ -26,7 +31,8 @@ export function OffDeckLabwareList(
2631
): JSX.Element | null {
2732
const { labwareItems, isFlex, definitionsByURI, setSelectedStack } = props
2833
const { t } = useTranslation('protocol_setup')
29-
if (labwareItems.length < 1) return null
34+
const offDeckItems = getOffDeckRenderInfo(labwareItems)
35+
if (offDeckItems.length < 1) return null
3036
return (
3137
<>
3238
<LegacyStyledText
@@ -38,12 +44,13 @@ export function OffDeckLabwareList(
3844
{t('additional_off_deck_labware')}
3945
</LegacyStyledText>
4046
<Flex gridGap={SPACING.spacing4} flexDirection={DIRECTION_COLUMN}>
41-
{labwareItems.map((labwareItem, index) => (
47+
{offDeckItems.map((labwareItem, index) => (
4248
<LabwareListItem
4349
key={index}
4450
attachedModuleInfo={{}}
4551
extraAttentionModules={[]}
4652
stackedItems={[labwareItem]}
53+
offDeckQuantity={labwareItem.quantity}
4754
slotName="offDeck"
4855
isFlex={isFlex}
4956
showLabwareSVG

‎app/src/organisms/Desktop/Devices/ProtocolRun/SetupLabware/SetupLabwareList.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import {
1010
} from '@opentrons/components'
1111
import {
1212
getLabwareInfoByLiquidId,
13+
getOffDeckRenderInfo,
1314
getStackedItemsOnStartingDeck,
1415
getStacksWithLabware,
1516
} from '@opentrons/shared-data'
@@ -61,9 +62,7 @@ export function SetupLabwareList(
6162
const sortedStartingDeckEntries = Object.entries(stacksWithLaware)
6263
.sort((a, b) => a[0].localeCompare(b[0]))
6364
.filter(([key, value]) => key !== 'offDeck')
64-
const offDeckItems = Object.keys(stacksWithLaware).includes('offDeck')
65-
? startingDeck.offDeck
66-
: null
65+
const offDeckItems = getOffDeckRenderInfo(stacksWithLaware)
6766

6867
return (
6968
<>
@@ -111,6 +110,7 @@ export function SetupLabwareList(
111110
extraAttentionModules={extraAttentionModules}
112111
slotName={'offDeck'}
113112
stackedItems={[item]}
113+
offDeckQuantity={item.quantity}
114114
isFlex={isFlex}
115115
onClick={() => {
116116
setSelectedStack({ slotName: 'offDeck', stack: [item] })

‎app/src/organisms/Desktop/Devices/ProtocolRun/SetupLabware/SetupLabwareMap.tsx

Lines changed: 6 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -64,10 +64,6 @@ export function SetupLabwareMap({
6464
getLabwareDefinitionsByURIForProtocol(protocolAnalysis?.commands ?? []),
6565
[protocolAnalysis]
6666
)
67-
const offDeckItems = Object.keys(startingDeck).includes('offDeck')
68-
? startingDeck.offDeck
69-
: null
70-
7167
// early return null if no protocol analysis
7268
if (protocolAnalysis == null) return null
7369

@@ -212,14 +208,12 @@ export function SetupLabwareMap({
212208
modulesOnDeck={modulesOnDeck}
213209
/>
214210
</Box>
215-
{offDeckItems != null ? (
216-
<OffDeckLabwareList
217-
labwareItems={offDeckItems}
218-
isFlex={robotType === FLEX_ROBOT_TYPE}
219-
setSelectedStack={setSelectedStack}
220-
definitionsByURI={labwareDefinitionsByURI}
221-
/>
222-
) : null}
211+
<OffDeckLabwareList
212+
labwareItems={startingDeck}
213+
isFlex={robotType === FLEX_ROBOT_TYPE}
214+
setSelectedStack={setSelectedStack}
215+
definitionsByURI={labwareDefinitionsByURI}
216+
/>
223217
</Flex>
224218
{selectedStack != null ? (
225219
<SlotDetailModal

‎app/src/organisms/Desktop/Devices/ProtocolRun/SetupLabware/__tests__/OffDeckLabwareList.test.tsx

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ describe('OffDeckLabwareList', () => {
3232
})
3333
it('renders null if labware items is null', () => {
3434
render({
35-
labwareItems: [],
35+
labwareItems: {},
3636
isFlex: false,
3737
definitionsByURI: {},
3838
setSelectedStack: vi.fn(),
@@ -41,13 +41,15 @@ describe('OffDeckLabwareList', () => {
4141
})
4242
it('renders additional offdeck labware info if there is an offdeck labware', () => {
4343
render({
44-
labwareItems: [
45-
{
46-
displayName: 'nickName',
47-
definitionUri: 'mock def uri',
48-
labwareId: '1234',
49-
},
50-
],
44+
labwareItems: {
45+
offDeck: [
46+
{
47+
displayName: 'nickName',
48+
definitionUri: 'mock def uri',
49+
labwareId: '1234',
50+
},
51+
],
52+
},
5153
isFlex: false,
5254
definitionsByURI: { 'mock def uri': {} as LabwareDefinition },
5355
setSelectedStack: vi.fn(),

0 commit comments

Comments
 (0)