use addressable areas on PD deck map

Opentrons · Nov 9, 2023 · 913464f · 913464f
1 parent a946732
commit 913464f
Show file tree

Hide file tree

Showing 7 changed files with 164 additions and 134 deletions.
diff --git a/protocol-designer/src/components/DeckSetup/LabwareOverlays/AdapterControls.tsx b/protocol-designer/src/components/DeckSetup/LabwareOverlays/AdapterControls.tsx
@@ -23,7 +23,7 @@ import {
 import { START_TERMINAL_ITEM_ID, TerminalItemId } from '../../../steplist'
 import { BlockedSlot } from './BlockedSlot'
 
-import type { DeckSlot as DeckSlotDefinition } from '@opentrons/shared-data'
+import type { CoordinateTuple, Dimensions } from '@opentrons/shared-data'
 import type { BaseState, DeckSlot, ThunkDispatch } from '../../../types'
 import type { LabwareOnDeck } from '../../../step-forms'
 
@@ -37,7 +37,8 @@ interface DNDP {
 }
 
 interface OP {
-  slot: DeckSlotDefinition & { id: DeckSlot }
+  slotPosition: CoordinateTuple
+  slotBoundingBox: Dimensions
   //    labwareId is the adapter's labwareId
   labwareId: string
   allLabware: LabwareOnDeck[]
@@ -61,7 +62,8 @@ export const AdapterControlsComponents = (
   props: SlotControlsProps
 ): JSX.Element | null => {
   const {
-    slot,
+    slotPosition,
+    slotBoundingBox,
     addLabware,
     selectedTerminalItemId,
     isOver,
@@ -104,18 +106,18 @@ export const AdapterControlsComponents = (
     <g>
       {slotBlocked ? (
         <BlockedSlot
-          x={slot.position[0]}
-          y={slot.position[1]}
-          width={slot.boundingBox.xDimension}
-          height={slot.boundingBox.yDimension}
+          x={slotPosition[0]}
+          y={slotPosition[1]}
+          width={slotBoundingBox.xDimension}
+          height={slotBoundingBox.yDimension}
           message="LABWARE_INCOMPATIBLE_WITH_ADAPTER"
         />
       ) : (
         <RobotCoordsForeignDiv
-          x={onDeck ? slot.position[0] : 0}
-          y={onDeck ? slot.position[1] : 0}
-          width={slot.boundingBox.xDimension}
-          height={slot.boundingBox.yDimension}
+          x={onDeck ? slotPosition[0] : 0}
+          y={onDeck ? slotPosition[1] : 0}
+          width={slotBoundingBox.xDimension}
+          height={slotBoundingBox.yDimension}
           innerDivProps={{
             className: cx(styles.slot_overlay, styles.appear_on_mouseover, {
               [styles.appear]: isOver,

diff --git a/protocol-designer/src/components/DeckSetup/LabwareOverlays/LabwareControls.tsx b/protocol-designer/src/components/DeckSetup/LabwareOverlays/LabwareControls.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react'
 import cx from 'classnames'
 import { RobotCoordsForeignDiv } from '@opentrons/components'
-import { DeckSlot } from '@opentrons/shared-data'
 
 import { START_TERMINAL_ITEM_ID, TerminalItemId } from '../../../steplist'
 import { LabwareOnDeck } from '../../../step-forms'
@@ -12,9 +11,11 @@ import { LabwareName } from './LabwareName'
 import { LabwareHighlight } from './LabwareHighlight'
 import styles from './LabwareOverlays.css'
 
+import type { CoordinateTuple } from '@opentrons/shared-data'
+
 interface LabwareControlsProps {
   labwareOnDeck: LabwareOnDeck
-  slot: DeckSlot
+  slotPosition: CoordinateTuple
   setHoveredLabware: (labware?: LabwareOnDeck | null) => unknown
   setDraggedLabware: (labware?: LabwareOnDeck | null) => unknown
   swapBlocked: boolean
@@ -24,15 +25,15 @@ interface LabwareControlsProps {
 export const LabwareControls = (props: LabwareControlsProps): JSX.Element => {
   const {
     labwareOnDeck,
-    slot,
+    slotPosition,
     selectedTerminalItemId,
     setHoveredLabware,
     setDraggedLabware,
     swapBlocked,
   } = props
 
   const canEdit = selectedTerminalItemId === START_TERMINAL_ITEM_ID
-  const [x, y] = slot.position
+  const [x, y] = slotPosition
   const width = labwareOnDeck.def.dimensions.xDimension
   const height = labwareOnDeck.def.dimensions.yDimension
   return (

diff --git a/protocol-designer/src/components/DeckSetup/LabwareOverlays/SlotControls.tsx b/protocol-designer/src/components/DeckSetup/LabwareOverlays/SlotControls.tsx
@@ -23,7 +23,9 @@ import { START_TERMINAL_ITEM_ID, TerminalItemId } from '../../../steplist'
 import { BlockedSlot } from './BlockedSlot'
 
 import type {
-  DeckSlot as DeckSlotDefinition,
+  AddressableArea,
+  CoordinateTuple,
+  Dimensions,
   ModuleType,
 } from '@opentrons/shared-data'
 import type { BaseState, DeckSlot, ThunkDispatch } from '../../../types'
@@ -38,7 +40,9 @@ interface DNDP {
 }
 
 interface OP {
-  slot: DeckSlotDefinition & { id: DeckSlot } // NOTE: Ian 2019-10-22 make slot `id` more restrictive when used in PD
+  slotPosition: CoordinateTuple | null
+  slotBoundingBox: Dimensions
+  slotId: AddressableArea['id']
   moduleType: ModuleType | null
   selectedTerminalItemId?: TerminalItemId | null
   handleDragHover?: () => unknown
@@ -59,7 +63,8 @@ export const SlotControlsComponent = (
   props: SlotControlsProps
 ): JSX.Element | null => {
   const {
-    slot,
+    slotBoundingBox,
+    slotPosition,
     addLabware,
     selectedTerminalItemId,
     isOver,
@@ -71,7 +76,8 @@ export const SlotControlsComponent = (
   } = props
   if (
     selectedTerminalItemId !== START_TERMINAL_ITEM_ID ||
-    (itemType !== DND_TYPES.LABWARE && itemType !== null)
+    (itemType !== DND_TYPES.LABWARE && itemType !== null) ||
+    slotPosition == null
   )
     return null
 
@@ -107,18 +113,18 @@ export const SlotControlsComponent = (
     <g>
       {slotBlocked ? (
         <BlockedSlot
-          x={slot.position[0]}
-          y={slot.position[1]}
-          width={slot.boundingBox.xDimension}
-          height={slot.boundingBox.yDimension}
+          x={slotPosition[0]}
+          y={slotPosition[1]}
+          width={slotBoundingBox.xDimension}
+          height={slotBoundingBox.yDimension}
           message="MODULE_INCOMPATIBLE_SINGLE_LABWARE"
         />
       ) : (
         <RobotCoordsForeignDiv
-          x={slot.position[0]}
-          y={slot.position[1]}
-          width={slot.boundingBox.xDimension}
-          height={slot.boundingBox.yDimension}
+          x={slotPosition[0]}
+          y={slotPosition[1]}
+          width={slotBoundingBox.xDimension}
+          height={slotBoundingBox.yDimension}
           innerDivProps={{
             className: cx(styles.slot_overlay, styles.appear_on_mouseover, {
               [styles.appear]: isOver,
@@ -146,7 +152,7 @@ const mapDispatchToProps = (
   dispatch: ThunkDispatch<any>,
   ownProps: OP
 ): DP => ({
-  addLabware: () => dispatch(openAddLabwareModal({ slot: ownProps.slot.id })),
+  addLabware: () => dispatch(openAddLabwareModal({ slot: ownProps.slotId })),
   moveDeckItem: (sourceSlot, destSlot) =>
     dispatch(moveDeckItem(sourceSlot, destSlot)),
 })
@@ -155,7 +161,7 @@ const slotTarget = {
   drop: (props: SlotControlsProps, monitor: DropTargetMonitor) => {
     const draggedItem = monitor.getItem()
     if (draggedItem) {
-      props.moveDeckItem(draggedItem.labwareOnDeck.slot, props.slot.id)
+      props.moveDeckItem(draggedItem.labwareOnDeck.slot, props.slotId)
     }
   },
   hover: (props: SlotControlsProps) => {