fix bug with swapping labware on an adapter

Author: jerader

protocol-designer/cypress/support/SetupSteps.ts

@@ -153,7 +153,7 @@ export enum SetupLocators {
   TempdeckTempInput = 'input[name="targetTemperature"]',
 }
 
-export const chooseDeckSlot = (
+const chooseDeckSlot = (
   slot: string
 ): Cypress.Chainable<JQuery<HTMLElement>> => {
   const deckSlots: Record<

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

@@ -27,6 +27,7 @@ interface AdapterControlsProps extends SharedControlsType {
   //    the adapter's labwareId
   labwareId: string
   onDeck: boolean
+  swapBlocked: boolean
   handleDragHover?: () => void
 }
 
@@ -45,6 +46,7 @@ export const AdapterControls = (
     itemId,
     isSelected,
     tab,
+    swapBlocked,
   } = props
   const { t } = useTranslation(['deck', 'starting_deck_state'])
   const customLabwareDefs = useSelector(
@@ -80,9 +82,9 @@ export const AdapterControls = (
           const adapterLabwareIsMatch =
             draggedDef.stackingOffsetWithLabware?.[adapterLoadName] != null
 
-          return adapterLabwareIsMatch || isCustomLabware
+          return (adapterLabwareIsMatch || isCustomLabware) && !swapBlocked
         }
-        return true
+        return !swapBlocked
       },
       drop: (item: DroppedItem) => {
         const droppedLabware = item
@@ -120,10 +122,11 @@ export const AdapterControls = (
     : false
 
   const isSlotBlocked =
-    isOver &&
-    draggedDef != null &&
-    draggedDef.stackingOffsetWithLabware?.[adapterLoadName] == null &&
-    !isCustomLabware
+    swapBlocked ||
+    (isOver &&
+      draggedDef != null &&
+      draggedDef.stackingOffsetWithLabware?.[adapterLoadName] == null &&
+      !isCustomLabware)
 
   drop(ref)
 

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

@@ -30,7 +30,11 @@ import { HighlightLabware } from '../HighlightLabware'
 import { SlotOverflowMenu } from './SlotOverflowMenu'
 import { HoveredItems } from './HoveredItems'
 import { SelectedHoveredItems } from './SelectedHoveredItems'
-import { getAdjacentLabware, getSwapBlocked } from './utils'
+import {
+  getAdjacentLabware,
+  getSwapBlockedAdapter,
+  getSwapBlockedModule,
+} from './utils'
 import { SlotWarning } from './SlotWarning'
 import { HighlightItems } from './HighlightItems'
 import { SlotControls } from './SlotControls'
@@ -113,11 +117,16 @@ export function DeckSetupDetails(props: DeckSetupDetailsProps): JSX.Element {
     LabwareOnDeckType | null | undefined
   >(null)
   const customLabwareDefs = useSelector(getCustomLabwareDefsByURI)
-  const swapBlocked = getSwapBlocked({
-    hoveredLabware,
-    draggedLabware,
+  const swapBlockedModule = getSwapBlockedModule({
     modulesById: activeDeckSetup.modules,
     customLabwareDefs,
+    hoveredLabware,
+    draggedLabware,
+  })
+  const swapBlockedAdapter = getSwapBlockedAdapter({
+    labwareById: activeDeckSetup.labware,
+    hoveredLabware,
+    draggedLabware,
   })
 
   const handleHoverEmptySlot = useCallback(() => {
@@ -279,6 +288,7 @@ export function DeckSetupDetails(props: DeckSetupDetailsProps): JSX.Element {
                   {isAdapter ? (
                     <AdapterControls
                       itemId={slotId}
+                      swapBlocked={swapBlockedAdapter}
                       hover={hover}
                       onDeck={false}
                       setHover={setHover}
@@ -302,7 +312,7 @@ export function DeckSetupDetails(props: DeckSetupDetailsProps): JSX.Element {
                       setHoveredLabware={setHoveredLabware}
                       setDraggedLabware={setDraggedLabware}
                       swapBlocked={
-                        swapBlocked &&
+                        (swapBlockedModule || swapBlockedAdapter) &&
                         (labwareLoadedOnModule.id === hoveredLabware?.id ||
                           labwareLoadedOnModule.id === draggedLabware?.id)
                       }
@@ -422,6 +432,7 @@ export function DeckSetupDetails(props: DeckSetupDetailsProps): JSX.Element {
             {labwareIsAdapter ? (
               <AdapterControls
                 tab={tab}
+                swapBlocked={swapBlockedAdapter}
                 itemId={labware.slot}
                 hover={hover}
                 onDeck={true}
@@ -445,7 +456,7 @@ export function DeckSetupDetails(props: DeckSetupDetailsProps): JSX.Element {
                 setHover={setHover}
                 setShowMenuListForId={setShowMenuListForId}
                 swapBlocked={
-                  swapBlocked &&
+                  (swapBlockedModule || swapBlockedAdapter) &&
                   (labware.id === hoveredLabware?.id ||
                     labware.id === draggedLabware?.id)
                 }
@@ -511,7 +522,7 @@ export function DeckSetupDetails(props: DeckSetupDetailsProps): JSX.Element {
               setHover={setHover}
               setShowMenuListForId={setShowMenuListForId}
               swapBlocked={
-                swapBlocked &&
+                (swapBlockedModule || swapBlockedAdapter) &&
                 (labware.id === hoveredLabware?.id ||
                   labware.id === draggedLabware?.id)
               }

protocol-designer/src/pages/Designer/DeckSetup/utils.ts

@@ -15,6 +15,10 @@ import {
 } from '@opentrons/shared-data'
 
 import { getStagingAreaAddressableAreas } from '../../../utils'
+import {
+  getLabwareIsCompatible,
+  getLabwareIsCustom,
+} from '../../../utils/labwareModuleCompatibility'
 import {
   FLEX_MODULE_MODELS,
   OT2_MODULE_MODELS,
@@ -40,10 +44,6 @@ import type {
   LabwareOnDeck,
 } from '../../../step-forms'
 import type { Fixture } from './constants'
-import {
-  getLabwareIsCompatible,
-  getLabwareIsCustom,
-} from '../../../utils/labwareModuleCompatibility'
 
 const OT2_TC_SLOTS = ['7', '8', '10', '11']
 const FLEX_TC_SLOTS = ['A1', 'B1']
@@ -342,14 +342,14 @@ export function useDeckSetupWindowBreakPoint(): BreakPoint {
   return size
 }
 
-export interface SwapBlockedArgs {
+export interface SwapBlockedModuleArgs {
   modulesById: InitialDeckSetup['modules']
   customLabwareDefs: LabwareDefByDefURI
   hoveredLabware?: LabwareOnDeck | null
   draggedLabware?: LabwareOnDeck | null
 }
 
-export const getSwapBlocked = (args: SwapBlockedArgs): boolean => {
+export const getSwapBlockedModule = (args: SwapBlockedModuleArgs): boolean => {
   const {
     hoveredLabware,
     draggedLabware,
@@ -375,7 +375,7 @@ export const getSwapBlocked = (args: SwapBlockedArgs): boolean => {
     hoveredLabware
   )
 
-  // dragging custom labware to module gives not compat error
+  // dragging custom labware to module gives no compat error
   const labwareSourceToDestBlocked = sourceModuleType
     ? !getLabwareIsCompatible(hoveredLabware.def, sourceModuleType) &&
       !hoveredLabwareIsCustom
@@ -387,3 +387,39 @@ export const getSwapBlocked = (args: SwapBlockedArgs): boolean => {
 
   return labwareSourceToDestBlocked || labwareDestToSourceBlocked
 }
+
+export interface SwapBlockedAdapterArgs {
+  labwareById: InitialDeckSetup['labware']
+  hoveredLabware?: LabwareOnDeck | null
+  draggedLabware?: LabwareOnDeck | null
+}
+
+export const getSwapBlockedAdapter = (
+  args: SwapBlockedAdapterArgs
+): boolean => {
+  const { hoveredLabware, draggedLabware, labwareById } = args
+
+  if (!hoveredLabware || !draggedLabware) {
+    return false
+  }
+
+  const adapterSourceToDestLoadname: string | null =
+    labwareById[draggedLabware.slot]?.def.parameters.loadName ?? null
+  const adapterDestToSourceLoadname: string | null =
+    labwareById[hoveredLabware.slot]?.def.parameters.loadName ?? null
+
+  const labwareSourceToDestBlocked =
+    adapterSourceToDestLoadname != null
+      ? hoveredLabware.def.stackingOffsetWithLabware?.[
+          adapterSourceToDestLoadname
+        ] == null
+      : false
+  const labwareDestToSourceBlocked =
+    adapterDestToSourceLoadname != null
+      ? draggedLabware.def.stackingOffsetWithLabware?.[
+          adapterDestToSourceLoadname
+        ] == null
+      : false
+
+  return labwareSourceToDestBlocked || labwareDestToSourceBlocked
+}