feat(app): Protocol Details ODD support for lids & lid stacks

app/src/organisms/Desktop/ProtocolDetails/ProtocolLabwareDetails.tsx

@@ -18,92 +18,23 @@
   StyledText,
   useMenuHandleClickOutside,
 } from '@opentrons/components'
-import { getLabwareDefURI } from '@opentrons/shared-data'
 import { Divider } from '/app/atoms/structure'
 import { getTopPortalEl } from '/app/App/portal'
 import { LabwareDetails } from '/app/organisms/Desktop/Labware/LabwareDetails'
-
+import { getRequiredLabwareDetailsFromLoadCommands } from '/app/transformations/commands'
 import type { MouseEventHandler } from 'react'
-import type {
-  LoadLabwareRunTimeCommand,
-  LoadLidStackRunTimeCommand,
-  LoadLidRunTimeCommand,
-  LabwareDefinition2,
-} from '@opentrons/shared-data'
+import type { RunTimeCommand } from '@opentrons/shared-data'
 import type { LabwareDefAndDate } from '/app/local-resources/labware'
 
-interface ProtocolLabwareDetailsProps {
-  loadLabwareCommands: Array<
-    | LoadLabwareRunTimeCommand
-    | LoadLidStackRunTimeCommand
-    | LoadLidRunTimeCommand
-  > | null
-}
-
-export const ProtocolLabwareDetails = (
-  props: ProtocolLabwareDetailsProps
-): JSX.Element => {
-  const { loadLabwareCommands } = props
+export const ProtocolLabwareDetails = (props: {
+  commands: RunTimeCommand[]
+}): JSX.Element => {
+  const { commands } = props
   const { t } = useTranslation('protocol_details')
 
-  const labwareAndLidDetails =
-    loadLabwareCommands != null
-      ? [
-          ...loadLabwareCommands
-            .reduce((acc, command) => {
-              if (command.result?.definition == null) return acc
-              else if (command.commandType === 'loadLid') return acc
-              else if (command.commandType === 'loadLidStack') {
-                if (!acc.has(getLabwareDefURI(command.result.definition))) {
-                  acc.set(getLabwareDefURI(command.result.definition), {
-                    ...command,
-                    quantity: 0,
-                  })
-                }
-                acc.get(
-                  getLabwareDefURI(command.result?.definition)
-                ).quantity += command.result?.labwareIds.length
-                return acc
-              } else {
-                let defUri = getLabwareDefURI(command.result?.definition)
-                const lidCommand = loadLabwareCommands.find(
-                  c =>
-                    c.commandType === 'loadLid' &&
-                    c.params.location !== 'offDeck' &&
-                    c.params.location !== 'systemLocation' &&
-                    'labwareId' in c.params.location &&
-                    c.params.location.labwareId === command.result?.labwareId
-                )
-                if (
-                  lidCommand != null &&
-                  lidCommand.result?.definition != null
-                ) {
-                  defUri = `${defUri}_${getLabwareDefURI(
-                    lidCommand.result.definition
-                  )}`
-
-                  if (!acc.has(defUri)) {
-                    acc.set(defUri, {
-                      ...command,
-                      quantity: 0,
-                      lid: lidCommand.result.definition,
-                    })
-                  }
-                } else {
-                  if (!acc.has(defUri)) {
-                    acc.set(defUri, {
-                      ...command,
-                      quantity: 0,
-                    })
-                  }
-                }
-                acc.get(defUri).quantity++
-                return acc
-              }
-            }, new Map())
-            .values(),
-        ]
-      : []
+  const labwareAndLidDetails = getRequiredLabwareDetailsFromLoadCommands(
+    commands
+  )
 
   return (
     <>
@@ -130,11 +61,11 @@
           {labwareAndLidDetails?.map((labware, index) => (
             <ProtocolLabwareDetailItem
               key={index}
-              namespace={labware.params.namespace}
-              displayName={labware.result?.definition?.metadata?.displayName}
+              namespace={labware.labwareDef.namespace}
+              displayName={labware.labwareDef.metadata.displayName}
               quantity={labware.quantity}
-              labware={{ definition: labware.result?.definition }}
-              lid={labware.lid}
+              labware={{ definition: labware.labwareDef }}
+              lidDisplayName={labware.lidDisplayName}
               data-testid={`ProtocolLabwareDetails_item_${index}`}
             />
           ))}
@@ -149,16 +80,16 @@
 interface ProtocolLabwareDetailItemProps {
   namespace: string
   displayName: string
-  quantity: string
-  lid?: LabwareDefinition2
+  quantity: number
+  lidDisplayName?: string
   labware: LabwareDefAndDate
 }
 
 export const ProtocolLabwareDetailItem = (
   props: ProtocolLabwareDetailItemProps
 ): JSX.Element => {
   const { t } = useTranslation('protocol_details')
-  const { namespace, displayName, quantity, labware, lid } = props
+  const { namespace, displayName, quantity, labware, lidDisplayName } = props
   return (
     <>
       <Divider width="100%" />
@@ -192,13 +123,13 @@
             >
               {displayName}
             </StyledText>
-            {lid != null ? (
+            {lidDisplayName != null ? (
               <StyledText
                 desktopStyle="bodyDefaultRegular"
                 color={COLORS.grey60}
                 paddingRight={SPACING.spacing32}
               >
-                {t('with_lid_name', { lid: lid.metadata.displayName })}
+                {t('with_lid_name', { lid: lidDisplayName })}
               </StyledText>
             ) : null}
           </Flex>

app/src/organisms/Desktop/ProtocolDetails/__tests__/ProtocolLabwareDetails.test.tsx

@@ -77,7 +77,7 @@ describe('ProtocolLabwareDetails', () => {
   let props: ComponentProps<typeof ProtocolLabwareDetails>
   beforeEach(() => {
     props = {
-      loadLabwareCommands: mockRequiredLabwareDetails,
+      commands: mockRequiredLabwareDetails,
     }
   })
 
@@ -148,7 +148,7 @@ describe('ProtocolLabwareDetails', () => {
 
   it('should render mock infoscreen when no labware', () => {
     props = {
-      loadLabwareCommands: [],
+      commands: [],
     }
     render(props)
     screen.getByText('mock InfoScreen')

app/src/organisms/Desktop/ProtocolDetails/index.tsx

@@ -72,13 +72,7 @@
 import { ProtocolParameters } from './ProtocolParameters'
 import { AnnotatedSteps } from './AnnotatedSteps'
 
-import type {
-  JsonConfig,
-  PythonConfig,
-  LoadLabwareRunTimeCommand,
-  LoadLidRunTimeCommand,
-  LoadLidStackRunTimeCommand,
-} from '@opentrons/shared-data'
+import type { JsonConfig, PythonConfig } from '@opentrons/shared-data'
 import type {
   GroupedCommands,
   StoredProtocolData,
@@ -279,21 +273,6 @@
       : null
   )
 
-  const loadLabwareCommands =
-    mostRecentAnalysis?.commands.filter(
-      (
-        command
-      ): command is
-        | LoadLabwareRunTimeCommand
-        | LoadLidRunTimeCommand
-        | LoadLidStackRunTimeCommand =>
-        ['loadLabware', 'loadLid', 'loadLidStack'].includes(
-          command.commandType
-        ) &&
-        command.result?.definition != null &&
-        command.result?.definition.parameters.format !== 'trash'
-    ) ?? []
-
   const protocolDisplayName = getProtocolDisplayName(
     protocolKey,
     srcFileNames,
@@ -341,7 +320,7 @@
 
   const contentsByTabName = {
     labware: (
-      <ProtocolLabwareDetails loadLabwareCommands={loadLabwareCommands} />
+      <ProtocolLabwareDetails commands={mostRecentAnalysis?.commands ?? []} />
     ),
     robot_config: (
       <RobotConfigurationDetails

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

@@ -1,21 +1,10 @@
-import { useState } from 'react'
 import last from 'lodash/last'
 
 import { Flex, ProtocolDeck, SPACING } from '@opentrons/components'
 import {
   useProtocolAnalysisAsDocumentQuery,
   useProtocolQuery,
 } from '@opentrons/react-api-client'
-import { getLabwareDefURI } from '@opentrons/shared-data'
-
-import { LabwareStackModal } from '/app/molecules/LabwareStackModal'
-import { SingleLabwareModal } from '/app/organisms/ODD/ProtocolSetup/ProtocolSetupLabware/SingleLabwareModal'
-import { getLabwareSetupItemGroups } from '/app/transformations/commands'
-
-import type {
-  LabwareDefinition2,
-  LabwareLocation,
-} from '@opentrons/shared-data'
 
 export const Deck = (props: { protocolId: string }): JSX.Element => {
   const { data: protocolData } = useProtocolQuery(props.protocolId)
@@ -27,91 +16,12 @@ export const Deck = (props: { protocolId: string }): JSX.Element => {
     { enabled: protocolData != null }
   )
 
-  const [
-    showLabwareDetailsModal,
-    setShowLabwareDetailsModal,
-  ] = useState<boolean>(false)
-  const [selectedLabware, setSelectedLabware] = useState<
-    | (LabwareDefinition2 & {
-        location: LabwareLocation
-        nickName: string | null
-        id: string
-      })
-    | null
-  >(null)
-
-  const { onDeckItems } = getLabwareSetupItemGroups(
-    mostRecentAnalysis?.commands ?? []
-  )
-
-  const handleLabwareClick = (
-    labwareDef: LabwareDefinition2,
-    labwareId: string
-  ): void => {
-    const foundLabware = mostRecentAnalysis?.labware.find(
-      labware => labware.id === labwareId
-    )
-    if (foundLabware != null) {
-      const location = onDeckItems.find(
-        item => item.labwareId === foundLabware.id
-      )?.initialLocation
-      const nickName = onDeckItems.find(
-        item => getLabwareDefURI(item.definition) === foundLabware.definitionUri
-      )?.nickName
-      if (location != null) {
-        setSelectedLabware({
-          ...labwareDef,
-          location: location,
-          nickName: nickName ?? null,
-          id: labwareId,
-        })
-        setShowLabwareDetailsModal(true)
-      } else {
-        console.warn('no initial labware location found')
-      }
-    }
-  }
-
-  const selectedLabwareIsTopOfStack = mostRecentAnalysis?.commands.some(
-    command =>
-      command.commandType === 'loadLabware' &&
-      command.result?.labwareId === selectedLabware?.id &&
-      typeof command.params.location === 'object' &&
-      ('moduleId' in command.params.location ||
-        'labwareId' in command.params.location)
-  )
-
   return (
     <>
-      {showLabwareDetailsModal &&
-      !selectedLabwareIsTopOfStack &&
-      selectedLabware != null ? (
-        <SingleLabwareModal
-          selectedLabware={selectedLabware}
-          onOutsideClick={() => {
-            setShowLabwareDetailsModal(false)
-            setSelectedLabware(null)
-          }}
-          mostRecentAnalysis={mostRecentAnalysis ?? null}
-        />
-      ) : null}
-      {showLabwareDetailsModal &&
-      selectedLabware != null &&
-      selectedLabwareIsTopOfStack ? (
-        <LabwareStackModal
-          labwareIdTop={selectedLabware?.id}
-          commands={mostRecentAnalysis?.commands ?? null}
-          closeModal={() => {
-            setSelectedLabware(null)
-            setShowLabwareDetailsModal(false)
-          }}
-        />
-      ) : null}
       <Flex height="26.9375rem" paddingY={SPACING.spacing24}>
         {mostRecentAnalysis != null ? (
           <ProtocolDeck
             protocolAnalysis={mostRecentAnalysis}
-            handleLabwareClick={handleLabwareClick}
             baseDeckProps={{ showSlotLabels: true }}
           />
         ) : null}