fix(app): Intervention modal map rendering stacker and labware incorrectly (#19164)

fix RQA-4427, RABR-815

Author: smb2268

app/src/organisms/ErrorRecoveryFlows/hooks/useDeckMapUtils.ts

@@ -3,9 +3,11 @@ import { useMemo } from 'react'
 import { getLabwareLocation } from '@opentrons/components'
 import {
   FLEX_ROBOT_TYPE,
+  FLEX_STACKER_MODULE_TYPE,
   getDeckDefFromRobotType,
   getFixedTrashLabwareDefinition,
   getModuleDef,
+  getModuleType,
   getPositionFromSlotId,
   getSimplestDeckConfigForProtocol,
   OT2_ROBOT_TYPE,
@@ -495,9 +497,13 @@ export function updateLabwareInModules({
 } {
   const usedSlots = new Set<string>()
 
+  // a flex stackers module location will be in slot 3, but labware in that slot
+  // is not nested on the stacker so we shouldn't match those up
   const updatedModules = runCurrentModules.map(moduleInfo => {
     const labwareInSameLoc = currentLabwareInfo.find(
-      lw => moduleInfo.moduleLocation.slotName === lw.slotName
+      lw =>
+        moduleInfo.moduleLocation.slotName === lw.slotName &&
+        getModuleType(moduleInfo.moduleModel) !== FLEX_STACKER_MODULE_TYPE
     )
 
     if (labwareInSameLoc != null) {

app/src/organisms/ErrorRecoveryFlows/shared/TwoColLwInfoAndDeck.tsx

@@ -4,10 +4,8 @@ import {
   COLORS,
   Flex,
   LabwareRender,
-  Module,
   MoveLabwareOnDeck,
 } from '@opentrons/components'
-import { inferModuleOrientationFromXCoordinate } from '@opentrons/shared-data'
 
 import { DeckMapContent, TwoColumn } from '/app/molecules/InterventionModal'
 
@@ -133,6 +131,18 @@ export function TwoColLwInfoAndDeck(
         const isValidDeck =
           currentLoc != null && newLoc != null && movedLabwareDef != null
 
+        const modulesOnDeck = moduleRenderInfo
+          ?.filter(module => module.targetSlotId != null)
+          .map(module => {
+            return {
+              moduleModel: module.moduleDef.model,
+              moduleLocation: { slotName: module.targetSlotId ?? '' },
+              nestedLabwareDef:
+                module.nestedLabwareId !== failedLwId
+                  ? module.nestedLabwareDef
+                  : null,
+            }
+          })
         return isValidDeck ? (
           <MoveLabwareOnDeck
             deckFill={isOnDevice ? COLORS.grey35 : '#e6e6e6'}
@@ -141,39 +151,9 @@ export function TwoColLwInfoAndDeck(
             movedLabwareDef={movedLabwareDef}
             labwareDefinitions={allRunDefs}
             {...restUtils}
+            modulesOnDeck={modulesOnDeck}
             backgroundItems={
               <>
-                {moduleRenderInfo.map(
-                  ({
-                    x,
-                    y,
-                    moduleId,
-                    moduleDef,
-                    nestedLabwareDef,
-                    nestedLabwareId,
-                    targetDeckId,
-                    targetSlotId,
-                  }) => (
-                    <Module
-                      key={moduleId}
-                      def={moduleDef}
-                      x={x}
-                      y={y}
-                      orientation={inferModuleOrientationFromXCoordinate(x)}
-                      targetDeckId={targetDeckId}
-                      targetSlotId={targetSlotId}
-                      childrenPositioningMode="offsetToSlot"
-                    >
-                      {nestedLabwareDef != null &&
-                      nestedLabwareId !== failedLwId ? (
-                        <LabwareRender
-                          definition={nestedLabwareDef}
-                          positioningMode="offsetInSlot"
-                        />
-                      ) : null}
-                    </Module>
-                  )
-                )}
                 {labwareRenderInfo
                   .filter(l => l.labwareId !== failedLwId)
                   .map(({ labwareOrigin, labwareDef, labwareId }) => (

app/src/organisms/ErrorRecoveryFlows/shared/__tests__/TwoColLwInfoAndDeck.test.tsx

@@ -202,8 +202,8 @@ describe('TwoColLwInfoAndDeck', () => {
     props.currentRecoveryOptionUtils.selectedRecoveryOption =
       RECOVERY_MAP.MANUAL_MOVE_AND_SKIP.ROUTE
     props.deckMapUtils = {
-      movedLabwareDef: null,
-      moduleRenderInfo: null,
+      currentLoc: null,
+      newLoc: null,
       labwareRenderInfo: null,
     } as any
 

app/src/organisms/InterventionModal/MoveLabwareInterventionContent.tsx

@@ -15,7 +15,6 @@ import {
   Icon,
   LabwareRender,
   LegacyStyledText,
-  Module,
   MoveLabwareOnDeck,
   RESPONSIVENESS,
   SPACING,
@@ -27,7 +26,6 @@ import {
   getLoadedLabwareDefinitionsByUri,
   getModuleType,
   GRIPPER_WASTE_CHUTE_ADDRESSABLE_AREA,
-  inferModuleOrientationFromXCoordinate,
   OT2_ROBOT_TYPE,
   TC_MODULE_LOCATION_OT2,
   TC_MODULE_LOCATION_OT3,
@@ -124,16 +122,29 @@ export function MoveLabwareInterventionContent({
   const deckDef = getDeckDefFromRobotType(robotType)
   const deckConfig = useNotifyDeckConfigurationQuery().data ?? []
 
-  const moduleRenderInfo = getRunModuleRenderInfo(
-    run,
-    deckDef,
-    labwareDefsByUri
-  )
   const labwareRenderInfo = getRunLabwareRenderInfo(
     run,
     labwareDefsByUri,
     deckDef
   )
+  const moduleRenderInfo = getRunModuleRenderInfo(
+    run,
+    deckDef,
+    labwareDefsByUri
+  )
+  const modulesOnDeck = moduleRenderInfo
+    ?.filter(module => module.targetSlotId != null)
+    .map(module => {
+      return {
+        moduleModel: module.moduleDef.model,
+        moduleLocation: { slotName: module.targetSlotId ?? '' },
+        nestedLabwareDef:
+          module.nestedLabwareId !== command.params.labwareId
+            ? module.nestedLabwareDef
+            : null,
+      }
+    })
+
   const oldLabwareLocation =
     getLoadedLabware(run.labware, command.params.labwareId)?.location ?? null
 
@@ -202,39 +213,9 @@ export function MoveLabwareInterventionContent({
               loadedModules={run.modules}
               loadedLabware={run.labware}
               deckConfig={deckConfig}
+              modulesOnDeck={modulesOnDeck}
               backgroundItems={
                 <>
-                  {moduleRenderInfo.map(
-                    ({
-                      x,
-                      y,
-                      moduleId,
-                      moduleDef,
-                      nestedLabwareDef,
-                      nestedLabwareId,
-                      targetDeckId,
-                      targetSlotId,
-                    }) => (
-                      <Module
-                        key={moduleId}
-                        def={moduleDef}
-                        x={x}
-                        y={y}
-                        orientation={inferModuleOrientationFromXCoordinate(x)}
-                        targetDeckId={targetDeckId}
-                        targetSlotId={targetSlotId}
-                        childrenPositioningMode="offsetToSlot"
-                      >
-                        {nestedLabwareDef != null &&
-                        nestedLabwareId !== command.params.labwareId ? (
-                          <LabwareRender
-                            definition={nestedLabwareDef}
-                            positioningMode="offsetInSlot"
-                          />
-                        ) : null}
-                      </Module>
-                    )
-                  )}
                   {labwareRenderInfo
                     .filter(l => l.labwareId !== command.params.labwareId)
                     .map(({ labwareOrigin, labwareDef, labwareId }) => (

components/src/hardware-sim/Deck/MoveLabwareOnDeck.tsx

@@ -24,6 +24,7 @@ import type {
   RobotType,
   Vector3D,
 } from '@opentrons/shared-data'
+import type { ModuleOnDeck } from '../../hardware-sim/BaseDeck'
 import type { StyleProps } from '../../primitives'
 
 const SPLASH_Y_BUFFER_MM = 10
@@ -35,6 +36,7 @@ interface MoveLabwareOnDeckProps extends StyleProps {
   finalLabwareLocation: LabwareLocation
   loadedModules: LoadedModule[]
   loadedLabware: LoadedLabware[]
+  modulesOnDeck?: ModuleOnDeck[]
   labwareDefinitions: LabwareDefinition[]
   deckConfig: DeckConfiguration
   backgroundItems?: ReactNode
@@ -47,6 +49,7 @@ export function MoveLabwareOnDeck(
     robotType,
     movedLabwareDef,
     loadedLabware,
+    modulesOnDeck,
     labwareDefinitions,
     initialLabwareLocation,
     finalLabwareLocation,
@@ -137,6 +140,7 @@ export function MoveLabwareOnDeck(
     <BaseDeck
       deckConfig={deckConfig}
       robotType={robotType}
+      modulesOnDeck={modulesOnDeck}
       svgProps={{
         style: { opacity: springProps.deckOpacity },
         ...styleProps,