refactor(protocol-designer): staging area slots now render properly (#…

…14002)
Opentrons · Nov 17, 2023 · f73e925 · f73e925
1 parent 18addf6
commit f73e925
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 18 deletions.
diff --git a/protocol-designer/src/components/DeckSetup/SlotLabels.tsx b/protocol-designer/src/components/DeckSetup/SlotLabels.tsx
@@ -15,6 +15,7 @@ import type { RobotType } from '@opentrons/shared-data'
 interface SlotLabelsProps {
   robotType: RobotType
   hasStagingAreas: boolean
+  hasWasteChute: boolean
 }
 
 /**
@@ -25,6 +26,7 @@ interface SlotLabelsProps {
 export const SlotLabels = ({
   robotType,
   hasStagingAreas,
+  hasWasteChute,
 }: SlotLabelsProps): JSX.Element | null => {
   return robotType === FLEX_ROBOT_TYPE ? (
     <>
@@ -59,7 +61,7 @@ export const SlotLabels = ({
         height="2.5rem"
         width={hasStagingAreas ? '40.5rem' : '30.375rem'}
         x="-15"
-        y="-65"
+        y={hasWasteChute ? '-90' : '-65'}
       >
         <Flex
           alignItems={ALIGN_CENTER}

diff --git a/protocol-designer/src/components/DeckSetup/index.tsx b/protocol-designer/src/components/DeckSetup/index.tsx
@@ -23,7 +23,6 @@ import {
 } from '@opentrons/step-generation'
 import {
   FLEX_ROBOT_TYPE,
-  FLEX_STAGING_AREA_SLOT_ADDRESSABLE_AREAS,
   getAddressableAreaFromSlotId,
   getDeckDefFromRobotType,
   getLabwareHasQuirk,
@@ -34,9 +33,9 @@ import {
   inferModuleOrientationFromXCoordinate,
   isAddressableAreaStandardSlot,
   OT2_ROBOT_TYPE,
+  STAGING_AREA_CUTOUTS,
   THERMOCYCLER_MODULE_TYPE,
   TRASH_BIN_ADAPTER_FIXTURE,
-  WASTE_CHUTE_ADDRESSABLE_AREAS,
   WASTE_CHUTE_CUTOUT,
 } from '@opentrons/shared-data'
 import { FLEX_TRASH_DEF_URI, OT_2_TRASH_DEF_URI } from '../../constants'
@@ -540,16 +539,12 @@ export const DeckSetup = (): JSX.Element => {
   ]
   const wasteChuteFixtures = Object.values(
     activeDeckSetup.additionalEquipmentOnDeck
-  ).filter(aE =>
-    WASTE_CHUTE_ADDRESSABLE_AREAS.includes(aE.name as AddressableAreaName)
-  )
+  ).filter(aE => WASTE_CHUTE_CUTOUT.includes(aE.location as CutoutId))
   const stagingAreaFixtures: AdditionalEquipmentEntity[] = Object.values(
     activeDeckSetup.additionalEquipmentOnDeck
-  ).filter(aE =>
-    FLEX_STAGING_AREA_SLOT_ADDRESSABLE_AREAS.includes(
-      aE.name as AddressableAreaName
-    )
-  )
+  ).filter(aE => STAGING_AREA_CUTOUTS.includes(aE.location as CutoutId))
+
+  const hasWasteChute = wasteChuteFixtures.length > 0
 
   const filteredAddressableAreas = deckDef.locations.addressableAreas.filter(
     aa => isAddressableAreaStandardSlot(aa.id, deckDef)
@@ -561,7 +556,11 @@ export const DeckSetup = (): JSX.Element => {
         <RobotCoordinateSpaceWithDOMCoords
           height="100%"
           deckDef={deckDef}
-          viewBox={`${deckDef.cornerOffsetFromOrigin[0]} ${deckDef.cornerOffsetFromOrigin[1]} ${deckDef.dimensions[0]} ${deckDef.dimensions[1]}`}
+          viewBox={`${deckDef.cornerOffsetFromOrigin[0]} ${
+            hasWasteChute
+              ? deckDef.cornerOffsetFromOrigin[1] - 30
+              : deckDef.cornerOffsetFromOrigin[1]
+          } ${deckDef.dimensions[0]} ${deckDef.dimensions[1]}`}
         >
           {({ getRobotCoordsFromDOMCoords }) => (
             <>
@@ -647,6 +646,7 @@ export const DeckSetup = (): JSX.Element => {
               <SlotLabels
                 robotType={robotType}
                 hasStagingAreas={stagingAreaFixtures.length > 0}
+                hasWasteChute={hasWasteChute}
               />
             </>
           )}

diff --git a/protocol-designer/src/components/modules/StagingAreasModal.tsx b/protocol-designer/src/components/modules/StagingAreasModal.tsx
@@ -23,6 +23,7 @@ import {
   STAGING_AREA_CUTOUTS,
   STAGING_AREA_RIGHT_SLOT_FIXTURE,
 } from '@opentrons/shared-data'
+import { getStagingAreaSlots } from '../../utils'
 import { i18n } from '../../localization'
 import {
   createDeckFixture,
@@ -31,8 +32,7 @@ import {
 import { getSlotIsEmpty } from '../../step-forms'
 import { getInitialDeckSetup } from '../../step-forms/selectors'
 import { PDAlert } from '../alerts/PDAlert'
-import { AdditionalEquipmentEntity } from '@opentrons/step-generation'
-import { getStagingAreaSlots } from '../../utils'
+import type { AdditionalEquipmentEntity } from '@opentrons/step-generation'
 
 export interface StagingAreasValues {
   selectedSlots: string[]
@@ -107,15 +107,15 @@ const StagingAreasModalComponent = (
   const handleClickRemove = (cutoutId: string): void => {
     const modifiedSlots: DeckConfiguration = updatedSlots.map(slot => {
       if (slot.cutoutId === cutoutId) {
-        return { ...slot, loadName: SINGLE_RIGHT_SLOT_FIXTURE }
+        return { ...slot, cutoutFixtureId: SINGLE_RIGHT_SLOT_FIXTURE }
       }
       return slot
     })
     setUpdatedSlots(modifiedSlots)
-    const updatedSelectedSlots = values.selectedSlots.filter(
-      item => item !== cutoutId
+    setFieldValue(
+      'selectedSlots',
+      values.selectedSlots.filter(item => item !== cutoutId)
     )
-    setFieldValue('selectedSlots', updatedSelectedSlots)
   }
 
   return (