address feedback

protocol-designer/src/organisms/SlotDetailsContainer/__tests__/utils.test.ts

@@ -3,19 +3,23 @@ import { FLEX_ROBOT_TYPE, OT2_ROBOT_TYPE } from '@opentrons/shared-data'
 import { getXPosition } from '../utils'
 
 describe('getXPosition', () => {
-  it('should return the right position for FLEX robot type and slot 3', () => {
-    expect(getXPosition('3', FLEX_ROBOT_TYPE)).toBe('600')
+  it('should return the right position 600 for FLEX robot type and slot 3', () => {
+    expect(getXPosition('3', FLEX_ROBOT_TYPE, false)).toBe('600')
+  })
+
+  it('should return the right position 700 for FLEX robot type and slot 4', () => {
+    expect(getXPosition('4', FLEX_ROBOT_TYPE, true)).toBe('700')
   })
 
   it('should return the left position for FLEX robot type and slot 1', () => {
-    expect(getXPosition('1', FLEX_ROBOT_TYPE)).toBe('-400')
+    expect(getXPosition('1', FLEX_ROBOT_TYPE, false)).toBe('-400')
   })
 
   it('should return the right position for OT2 robot type and slot 6', () => {
-    expect(getXPosition('6', OT2_ROBOT_TYPE)).toBe('500')
+    expect(getXPosition('6', OT2_ROBOT_TYPE, false)).toBe('500')
   })
 
   it('should return the left position for OT2 robot type and slot 2', () => {
-    expect(getXPosition('2', OT2_ROBOT_TYPE)).toBe('-300')
+    expect(getXPosition('2', OT2_ROBOT_TYPE, false)).toBe('-300')
   })
 })

protocol-designer/src/organisms/SlotDetailsContainer/index.tsx

@@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next'
 import { getModuleDisplayName } from '@opentrons/shared-data'
 import { RobotCoordsForeignObject } from '@opentrons/components'
 import * as wellContentsSelectors from '../../top-selectors/well-contents'
+import { getAdditionalEquipmentEntities } from '../../step-forms/selectors'
 import { selectors } from '../../labware-ingred/selectors'
 import { selectors as uiLabwareSelectors } from '../../ui/labware'
 import { getDeckSetupForActiveItem } from '../../top-selectors/labware-locations'
@@ -32,6 +33,10 @@ export function SlotDetailsContainer(
   )
   const nickNames = useSelector(uiLabwareSelectors.getLabwareNicknamesById)
   const allIngredNamesIds = useSelector(selectors.allIngredientNamesIds)
+  const additionalEquipment = useSelector(getAdditionalEquipmentEntities)
+  const hasStagingArea = Object.values(additionalEquipment).some(
+    item => item.name === 'stagingArea'
+  )
 
   if (slot == null || (slot === 'offDeck' && offDeckLabwareId == null)) {
     return null
@@ -107,7 +112,7 @@ export function SlotDetailsContainer(
     <RobotCoordsForeignObject
       width="15.8125rem"
       height="26.75rem"
-      x={getXPosition(slot, robotType)}
+      x={getXPosition(slot, robotType, hasStagingArea)}
       y={SLOT_DETAIL_Y_POSITION}
     >
       <SlotInformation

protocol-designer/src/organisms/SlotDetailsContainer/utils.ts

@@ -53,10 +53,14 @@ export const getYPosition = ({ robotType, slot }: YPositionProps): string => {
   }
 }
 
-export const getXPosition = (slot: string, robotType: RobotType): string => {
+export const getXPosition = (
+  slot: string,
+  robotType: RobotType,
+  hasStagingArea: boolean
+): string => {
   const POSITION_MAP = {
     FLEX: {
-      right: '600',
+      right: (slot: string) => (hasStagingArea ? '700' : '600'),
       left: '-400',
       regex: /[34]/,
     },
@@ -69,5 +73,10 @@ export const getXPosition = (slot: string, robotType: RobotType): string => {
 
   const { right, left, regex } =
     robotType === FLEX_ROBOT_TYPE ? POSITION_MAP.FLEX : POSITION_MAP.OT2
-  return regex.test(slot) ? right : left
+
+  return regex.test(slot)
+    ? typeof right === 'function'
+      ? right(slot)
+      : right
+    : left
 }