fix(components): create BaseDeck stacking badge layer (#16099)

Creates a `BaseDeck` component SVG layer solely for stacked labware
badges that renders further down the DOM than all labware and modules.
Fixes an issue when the stacked badge occludes adjacent slots in some
OT-2 deck maps and must be layered above all labware/modules. This
layered base deck render approach could be extended in the future for
features like custom labware or tooltips that might also occlude
adjacent deck slots.

closes RQA-2927

components/src/hardware-sim/BaseDeck/BaseDeck.tsx

@@ -90,6 +90,8 @@ interface BaseDeckProps {
   svgProps?: React.ComponentProps<typeof Svg>
 }
 
+const LABWARE_OFFSET_DISPLAY_THRESHOLD = 2
+
 export function BaseDeck(props: BaseDeckProps): JSX.Element {
   const {
     robotType,
@@ -237,6 +239,7 @@ export function BaseDeck(props: BaseDeckProps): JSX.Element {
         </>
       )}
       <>
+        {/* render modules, nested labware, and overlays */}
         {modulesOnDeck.map(
           ({
             moduleModel,
@@ -247,7 +250,6 @@ export function BaseDeck(props: BaseDeckProps): JSX.Element {
             moduleChildren,
             onLabwareClick,
             highlightLabware,
-            stacked = false,
           }) => {
             const slotPosition = getPositionFromSlotId(
               moduleLocation.slotName,
@@ -278,11 +280,11 @@ export function BaseDeck(props: BaseDeckProps): JSX.Element {
                   />
                 ) : null}
                 {moduleChildren}
-                {stacked ? <StackedBadge /> : null}
               </Module>
             ) : null
           }
         )}
+        {/* render non-module labware and overlays */}
         {labwareOnDeck.map(
           ({
             labwareLocation,
@@ -292,7 +294,6 @@ export function BaseDeck(props: BaseDeckProps): JSX.Element {
             missingTips,
             onLabwareClick,
             highlight,
-            stacked = false,
           }) => {
             if (
               labwareLocation === 'offDeck' ||
@@ -323,7 +324,72 @@ export function BaseDeck(props: BaseDeckProps): JSX.Element {
                   highlight={highlight}
                 />
                 {labwareChildren}
-                {stacked ? <StackedBadge /> : null}
+              </g>
+            ) : null
+          }
+        )}
+        {/* render stacked badge on module labware */}
+        {modulesOnDeck.map(
+          ({ moduleModel, moduleLocation, stacked = false }) => {
+            const slotPosition = getPositionFromSlotId(
+              moduleLocation.slotName,
+              deckDef
+            )
+            const moduleDef = getModuleDef2(moduleModel)
+
+            const {
+              x: nestedLabwareOffsetX,
+              y: nestedLabwareOffsetY,
+            } = moduleDef.labwareOffset
+
+            // labwareOffset values are more accurate than our SVG renderings, so ignore any deviations under a certain threshold
+            const clampedLabwareOffsetX =
+              Math.abs(nestedLabwareOffsetX) > LABWARE_OFFSET_DISPLAY_THRESHOLD
+                ? nestedLabwareOffsetX
+                : 0
+            const clampedLabwareOffsetY =
+              Math.abs(nestedLabwareOffsetY) > LABWARE_OFFSET_DISPLAY_THRESHOLD
+                ? nestedLabwareOffsetY
+                : 0
+            // transform to be applied to children which render within the labware interfacing surface of the module
+            const childrenTransform = `translate(${clampedLabwareOffsetX}, ${clampedLabwareOffsetY})`
+
+            return slotPosition != null && stacked ? (
+              <g
+                key={`stacked_${moduleLocation.slotName}`}
+                transform={`translate(${slotPosition[0].toString()},${slotPosition[1].toString()})`}
+              >
+                <g transform={childrenTransform}>
+                  <StackedBadge />
+                </g>
+              </g>
+            ) : null
+          }
+        )}
+        {/* render stacked badge on non-module labware */}
+        {labwareOnDeck.map(
+          ({ labwareLocation, definition, stacked = false }) => {
+            if (
+              labwareLocation === 'offDeck' ||
+              !('slotName' in labwareLocation) ||
+              // for legacy protocols that list fixed trash as a labware, do not render
+              definition.parameters.loadName ===
+                'opentrons_1_trash_3200ml_fixed'
+            ) {
+              return null
+            }
+
+            const slotPosition = getPositionFromSlotId(
+              labwareLocation.slotName,
+              deckDef
+            )
+
+            return slotPosition != null && stacked ? (
+              <g
+                key={`stacked_${labwareLocation.slotName}`}
+                transform={`translate(${slotPosition[0].toString()},${slotPosition[1].toString()})`}
+              >
+                <StackedBadge />
               </g>
             ) : null
           }