Skip to content

Commit 04f0ba3

Browse files
smb2268smb2268
committed
Remove interactablity from protocol details deck map
1 parent a9d6b6f commit 04f0ba3

File tree

3 files changed

+73
-250
lines changed

3 files changed

+73
-250
lines changed

‎app/src/pages/ODD/ProtocolDetails/Deck.tsx

-90
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,10 @@
1-
import { useState } from 'react'
21
import last from 'lodash/last'
32

43
import { Flex, ProtocolDeck, SPACING } from '@opentrons/components'
54
import {
65
useProtocolAnalysisAsDocumentQuery,
76
useProtocolQuery,
87
} from '@opentrons/react-api-client'
9-
import { getLabwareDefURI } from '@opentrons/shared-data'
10-
11-
import { LabwareStackModal } from '/app/molecules/LabwareStackModal'
12-
import { SingleLabwareModal } from '/app/organisms/ODD/ProtocolSetup/ProtocolSetupLabware/SingleLabwareModal'
13-
import { getLabwareSetupItemGroups } from '/app/transformations/commands'
14-
15-
import type {
16-
LabwareDefinition2,
17-
LabwareLocation,
18-
} from '@opentrons/shared-data'
198

209
export const Deck = (props: { protocolId: string }): JSX.Element => {
2110
const { data: protocolData } = useProtocolQuery(props.protocolId)
@@ -27,91 +16,12 @@ export const Deck = (props: { protocolId: string }): JSX.Element => {
2716
{ enabled: protocolData != null }
2817
)
2918

30-
const [
31-
showLabwareDetailsModal,
32-
setShowLabwareDetailsModal,
33-
] = useState<boolean>(false)
34-
const [selectedLabware, setSelectedLabware] = useState<
35-
| (LabwareDefinition2 & {
36-
location: LabwareLocation
37-
nickName: string | null
38-
id: string
39-
})
40-
| null
41-
>(null)
42-
43-
const { onDeckItems } = getLabwareSetupItemGroups(
44-
mostRecentAnalysis?.commands ?? []
45-
)
46-
47-
const handleLabwareClick = (
48-
labwareDef: LabwareDefinition2,
49-
labwareId: string
50-
): void => {
51-
const foundLabware = mostRecentAnalysis?.labware.find(
52-
labware => labware.id === labwareId
53-
)
54-
if (foundLabware != null) {
55-
const location = onDeckItems.find(
56-
item => item.labwareId === foundLabware.id
57-
)?.initialLocation
58-
const nickName = onDeckItems.find(
59-
item => getLabwareDefURI(item.definition) === foundLabware.definitionUri
60-
)?.nickName
61-
if (location != null) {
62-
setSelectedLabware({
63-
...labwareDef,
64-
location: location,
65-
nickName: nickName ?? null,
66-
id: labwareId,
67-
})
68-
setShowLabwareDetailsModal(true)
69-
} else {
70-
console.warn('no initial labware location found')
71-
}
72-
}
73-
}
74-
75-
const selectedLabwareIsTopOfStack = mostRecentAnalysis?.commands.some(
76-
command =>
77-
command.commandType === 'loadLabware' &&
78-
command.result?.labwareId === selectedLabware?.id &&
79-
typeof command.params.location === 'object' &&
80-
('moduleId' in command.params.location ||
81-
'labwareId' in command.params.location)
82-
)
83-
8419
return (
8520
<>
86-
{showLabwareDetailsModal &&
87-
!selectedLabwareIsTopOfStack &&
88-
selectedLabware != null ? (
89-
<SingleLabwareModal
90-
selectedLabware={selectedLabware}
91-
onOutsideClick={() => {
92-
setShowLabwareDetailsModal(false)
93-
setSelectedLabware(null)
94-
}}
95-
mostRecentAnalysis={mostRecentAnalysis ?? null}
96-
/>
97-
) : null}
98-
{showLabwareDetailsModal &&
99-
selectedLabware != null &&
100-
selectedLabwareIsTopOfStack ? (
101-
<LabwareStackModal
102-
labwareIdTop={selectedLabware?.id}
103-
commands={mostRecentAnalysis?.commands ?? null}
104-
closeModal={() => {
105-
setSelectedLabware(null)
106-
setShowLabwareDetailsModal(false)
107-
}}
108-
/>
109-
) : null}
11021
<Flex height="26.9375rem" paddingY={SPACING.spacing24}>
11122
{mostRecentAnalysis != null ? (
11223
<ProtocolDeck
11324
protocolAnalysis={mostRecentAnalysis}
114-
handleLabwareClick={handleLabwareClick}
11525
baseDeckProps={{ showSlotLabels: true }}
11626
/>
11727
) : null}

‎components/src/hardware-sim/ProtocolDeck/index.tsx

+4-98
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,9 @@
11
import {
22
FLEX_ROBOT_TYPE,
3-
getLabwareDisplayName,
43
getSimplestDeckConfigForProtocol,
5-
getTopLabwareInfo,
64
} from '@opentrons/shared-data'
75

86
import { BaseDeck } from '../BaseDeck'
9-
import { LabwareInfo } from './LabwareInfo'
107
import { getStandardDeckViewLayerBlockList } from './utils'
118
import { getLabwareInfoByLiquidId } from './utils/getLabwareInfoByLiquidId'
129
import { getTopMostLabwareInSlots } from './utils/getLabwareInSlots'
@@ -16,61 +13,30 @@ import { getWellFillFromLabwareId } from './utils/getWellFillFromLabwareId'
1613
import type { ComponentProps } from 'react'
1714
import type {
1815
CompletedProtocolAnalysis,
19-
LabwareDefinition2,
2016
ProtocolAnalysisOutput,
21-
RunTimeCommand,
22-
LoadLabwareRunTimeCommand,
2317
} from '@opentrons/shared-data'
2418

2519
export * from './utils/getStandardDeckViewLayerBlockList'
2620

2721
interface ProtocolDeckProps {
2822
protocolAnalysis: CompletedProtocolAnalysis | ProtocolAnalysisOutput | null
29-
/** defaults to false, when set labware nicknames will appear on top level labware. If no nickname specified in protocol, falls back to labware definition display name */
30-
showLabwareInfo?: boolean
31-
/** optional labware click handler, highlights labware */
32-
handleLabwareClick?: (
33-
labwareDef: LabwareDefinition2,
34-
labwareId: string
35-
) => void
3623
/** extra props to pass through to BaseDeck component */
3724
baseDeckProps?: Partial<ComponentProps<typeof BaseDeck>>
3825
}
3926

4027
export function ProtocolDeck(props: ProtocolDeckProps): JSX.Element | null {
41-
const {
42-
protocolAnalysis,
43-
baseDeckProps,
44-
handleLabwareClick,
45-
showLabwareInfo = false,
46-
} = props
28+
const { protocolAnalysis, baseDeckProps } = props
4729

4830
if (protocolAnalysis == null || (protocolAnalysis?.errors ?? []).length > 0)
4931
return null
50-
const commands: RunTimeCommand[] = protocolAnalysis.commands
51-
const loadLabwareCommands = commands?.filter(
52-
(command): command is LoadLabwareRunTimeCommand =>
53-
command.commandType === 'loadLabware'
54-
)
5532

5633
const robotType = protocolAnalysis.robotType ?? FLEX_ROBOT_TYPE
5734
const deckConfig = getSimplestDeckConfigForProtocol(protocolAnalysis)
5835
const labwareByLiquidId = getLabwareInfoByLiquidId(protocolAnalysis.commands)
5936

6037
const modulesInSlots = getModulesInSlots(protocolAnalysis)
6138
const modulesOnDeck = modulesInSlots.map(
62-
({
63-
moduleModel,
64-
moduleLocation,
65-
nestedLabwareId,
66-
nestedLabwareDef,
67-
nestedLabwareNickName,
68-
}) => {
69-
const { topLabwareId, topLabwareDefinition } = getTopLabwareInfo(
70-
nestedLabwareId ?? '',
71-
loadLabwareCommands
72-
)
73-
39+
({ moduleModel, moduleLocation, nestedLabwareId, nestedLabwareDef }) => {
7440
return {
7541
moduleModel,
7642
moduleLocation,
@@ -80,60 +46,14 @@ export function ProtocolDeck(props: ProtocolDeckProps): JSX.Element | null {
8046
protocolAnalysis.liquids,
8147
labwareByLiquidId
8248
),
83-
moduleChildren:
84-
showLabwareInfo &&
85-
nestedLabwareDef != null &&
86-
!(nestedLabwareDef.allowedRoles ?? []).includes('adapter') ? (
87-
<LabwareInfo def={nestedLabwareDef}>
88-
{nestedLabwareNickName ?? getLabwareDisplayName(nestedLabwareDef)}
89-
</LabwareInfo>
90-
) : null,
91-
highlightLabware: handleLabwareClick != null,
92-
highlightShadowLabware:
93-
handleLabwareClick != null &&
94-
topLabwareDefinition != null &&
95-
topLabwareId != null,
96-
onLabwareClick:
97-
handleLabwareClick != null &&
98-
topLabwareDefinition != null &&
99-
topLabwareId != null
100-
? () => {
101-
handleLabwareClick(topLabwareDefinition, topLabwareId)
102-
}
103-
: undefined,
104-
stacked:
105-
handleLabwareClick != null &&
106-
topLabwareDefinition != null &&
107-
topLabwareId != null,
10849
}
10950
}
11051
)
11152

112-
// this function gets the top labware assuming a stack of max 2 labware
53+
// this function gets the top most labware
11354
const topMostLabwareInSlots = getTopMostLabwareInSlots(protocolAnalysis)
11455
const labwareOnDeck = topMostLabwareInSlots.map(
115-
({ labwareId, labwareDef, labwareNickName, location }) => {
116-
// this gets the very top of the stack in case there is a stack
117-
// of many like items, such as TC lids
118-
const { topLabwareId, topLabwareDefinition } = getTopLabwareInfo(
119-
labwareId,
120-
loadLabwareCommands
121-
)
122-
const isLabwareInStack =
123-
protocolAnalysis?.commands.some(
124-
command =>
125-
command.commandType === 'loadLabware' &&
126-
command.result?.labwareId === labwareId &&
127-
typeof command.params.location === 'object' &&
128-
('moduleId' in command.params.location ||
129-
'labwareId' in command.params.location)
130-
) ||
131-
protocolAnalysis?.commands.some(
132-
command =>
133-
command.commandType === 'loadLidStack' &&
134-
command.result?.labwareIds.includes(labwareId)
135-
)
136-
56+
({ labwareId, labwareDef, location }) => {
13757
return {
13858
definition: labwareDef,
13959
labwareLocation: location,
@@ -142,20 +62,6 @@ export function ProtocolDeck(props: ProtocolDeckProps): JSX.Element | null {
14262
protocolAnalysis.liquids,
14363
labwareByLiquidId
14464
),
145-
labwareChildren: showLabwareInfo ? (
146-
<LabwareInfo def={labwareDef}>
147-
{labwareNickName ?? getLabwareDisplayName(labwareDef)}
148-
</LabwareInfo>
149-
) : null,
150-
highlight: handleLabwareClick != null,
151-
highlightShadow: handleLabwareClick != null && isLabwareInStack,
152-
onLabwareClick:
153-
handleLabwareClick != null && topLabwareDefinition != null
154-
? () => {
155-
handleLabwareClick(topLabwareDefinition, topLabwareId)
156-
}
157-
: undefined,
158-
stacked: handleLabwareClick != null && isLabwareInStack,
15965
}
16066
}
16167
)

0 commit comments

Comments
 (0)