fix(components, protocol-designer): fix labware thermocycler render i…

…ssue (#16826)

Because protocol designer is unaware of actual thermocycler lid state
until a thermocycler step explicitly sets its state, we default to a
gray box. This PR resets that logic to show the lid as open if the lid
state is indeterminate to avoid confusion; however, error messages
prompting the user to open the lid before moving labware/liquid to or
from the thermocycler will persist, as the thermocycler lid is neither
open nor closed. Also, this fixes a rendering issue where labware was
shown on top of the closed thermocycler lid.

Closes RQA-3556

protocol-designer/src/pages/Designer/DeckSetup/DeckSetupDetails.tsx

@@ -31,7 +31,11 @@ import { SelectedHoveredItems } from './SelectedHoveredItems'
 import { getAdjacentLabware } from './utils'
 
 import type { ComponentProps, Dispatch, SetStateAction } from 'react'
-import type { ModuleTemporalProperties } from '@opentrons/step-generation'
+import type { ThermocyclerVizProps } from '@opentrons/components'
+import type {
+  ModuleTemporalProperties,
+  ThermocyclerModuleState,
+} from '@opentrons/step-generation'
 import type {
   AddressableArea,
   AddressableAreaName,
@@ -194,6 +198,24 @@ export function DeckSetupDetails(props: DeckSetupDetailsProps): JSX.Element {
           yDimension: labwareLoadedOnModule?.def.dimensions.yDimension ?? 0,
           zDimension: labwareLoadedOnModule?.def.dimensions.zDimension ?? 0,
         }
+        const isLabwareOccludedByThermocyclerLid =
+          moduleOnDeck.type === THERMOCYCLER_MODULE_TYPE &&
+          (moduleOnDeck.moduleState as ThermocyclerModuleState).lidOpen ===
+            false
+
+        const tempInnerProps = getModuleInnerProps(moduleOnDeck.moduleState)
+        const innerProps =
+          moduleOnDeck.type === THERMOCYCLER_MODULE_TYPE
+            ? {
+                ...tempInnerProps,
+                lidMotorState:
+                  (tempInnerProps as ThermocyclerVizProps).lidMotorState !==
+                  'closed'
+                    ? 'open'
+                    : 'closed',
+              }
+            : tempInnerProps
+
         return moduleOnDeck.slot !== selectedSlot.slot ? (
           <Fragment key={moduleOnDeck.id}>
             <Module
@@ -204,11 +226,12 @@ export function DeckSetupDetails(props: DeckSetupDetailsProps): JSX.Element {
               orientation={inferModuleOrientationFromXCoordinate(
                 slotPosition[0]
               )}
-              innerProps={getModuleInnerProps(moduleOnDeck.moduleState)}
+              innerProps={innerProps}
               targetSlotId={slotId}
               targetDeckId={deckDef.otId}
             >
-              {labwareLoadedOnModule != null ? (
+              {labwareLoadedOnModule != null &&
+              !isLabwareOccludedByThermocyclerLid ? (
                 <>
                   <LabwareOnDeck
                     x={0}