fix(protocol-designer): fix logic for placing trash and staging area …

…slots (#16974)

Fix logic in `createProtocolFile` and associated util `getTrashSlot` to
correctly place staging areas and trash bins. Priority for staging area
slots should be B3, C3, D3, A3, as specified by product. Trash bin
should be in A3 unless all 4 staging area slots are added, in which case
it gets bumped to A1. Also, I fix a padding issue in ProtocolOverview
DeckThumbnail to account for right padding if any staging area slot is
added.

Closes RQA-3326

protocol-designer/src/constants.ts

@@ -1,26 +1,27 @@
 import mapValues from 'lodash/mapValues'
 import {
-  MAGNETIC_MODULE_TYPE,
-  TEMPERATURE_MODULE_TYPE,
-  THERMOCYCLER_MODULE_TYPE,
+  ABSORBANCE_READER_TYPE,
+  ABSORBANCE_READER_V1,
   HEATERSHAKER_MODULE_TYPE,
+  HEATERSHAKER_MODULE_V1,
+  MAGNETIC_BLOCK_TYPE,
+  MAGNETIC_BLOCK_V1,
+  MAGNETIC_MODULE_TYPE,
   MAGNETIC_MODULE_V1,
   MAGNETIC_MODULE_V2,
+  TEMPERATURE_MODULE_TYPE,
   TEMPERATURE_MODULE_V1,
   TEMPERATURE_MODULE_V2,
+  THERMOCYCLER_MODULE_TYPE,
   THERMOCYCLER_MODULE_V1,
-  HEATERSHAKER_MODULE_V1,
   THERMOCYCLER_MODULE_V2,
-  MAGNETIC_BLOCK_TYPE,
-  MAGNETIC_BLOCK_V1,
-  ABSORBANCE_READER_TYPE,
-  ABSORBANCE_READER_V1,
 } from '@opentrons/shared-data'
 import type {
-  LabwareDefinition2,
+  CutoutId,
   DeckSlot as DeckDefSlot,
-  ModuleType,
+  LabwareDefinition2,
   ModuleModel,
+  ModuleType,
 } from '@opentrons/shared-data'
 import type { DeckSlot, WellVolumes } from './types'
 
@@ -167,3 +168,10 @@ export const DND_TYPES = {
 // Values for TC fields
 export const THERMOCYCLER_STATE: 'thermocyclerState' = 'thermocyclerState'
 export const THERMOCYCLER_PROFILE: 'thermocyclerProfile' = 'thermocyclerProfile'
+// Priority for fixtures
+export const STAGING_AREA_CUTOUTS_ORDERED: CutoutId[] = [
+  'cutoutB3',
+  'cutoutC3',
+  'cutoutD3',
+  'cutoutA3',
+]

protocol-designer/src/pages/CreateNewProtocolWizard/__tests__/utils.test.ts

@@ -291,12 +291,25 @@ describe('getTrashSlot', () => {
     const result = getTrashSlot(MOCK_FORM_STATE)
     expect(result).toBe('cutoutA3')
   })
-  it('should return cutoutA1 when there is a staging area in slot A3', () => {
+  it('should return cutoutA3 when there are 3 or fewer staging areas', () => {
     MOCK_FORM_STATE = {
       ...MOCK_FORM_STATE,
       additionalEquipment: ['stagingArea'],
     }
     const result = getTrashSlot(MOCK_FORM_STATE)
+    expect(result).toBe('cutoutA3')
+  })
+  it('should return cutoutA1 when there are 4 staging areas', () => {
+    MOCK_FORM_STATE = {
+      ...MOCK_FORM_STATE,
+      additionalEquipment: [
+        'stagingArea',
+        'stagingArea',
+        'stagingArea',
+        'stagingArea',
+      ],
+    }
+    const result = getTrashSlot(MOCK_FORM_STATE)
     expect(result).toBe('cutoutA1')
   })
 })

protocol-designer/src/pages/CreateNewProtocolWizard/index.tsx

@@ -16,7 +16,6 @@ import {
   MAGNETIC_BLOCK_TYPE,
   MAGNETIC_MODULE_TYPE,
   OT2_ROBOT_TYPE,
-  STAGING_AREA_CUTOUTS,
   TEMPERATURE_MODULE_TYPE,
   THERMOCYCLER_MODULE_TYPE,
   WASTE_CHUTE_CUTOUT,
@@ -29,7 +28,10 @@ import * as labwareDefSelectors from '../../labware-defs/selectors'
 import * as labwareDefActions from '../../labware-defs/actions'
 import * as labwareIngredActions from '../../labware-ingred/actions'
 import { actions as steplistActions } from '../../steplist'
-import { INITIAL_DECK_SETUP_STEP_ID } from '../../constants'
+import {
+  INITIAL_DECK_SETUP_STEP_ID,
+  STAGING_AREA_CUTOUTS_ORDERED,
+} from '../../constants'
 import { actions as stepFormActions } from '../../step-forms'
 import { createModuleWithNoSlot } from '../../modules'
 import {
@@ -44,7 +46,6 @@ import { SelectModules } from './SelectModules'
 import { SelectFixtures } from './SelectFixtures'
 import { AddMetadata } from './AddMetadata'
 import { getTrashSlot } from './utils'
-
 import type { ThunkDispatch } from 'redux-thunk'
 import type { NormalizedPipette } from '@opentrons/step-generation'
 import type { BaseState } from '../../types'
@@ -283,10 +284,7 @@ export function CreateNewProtocolWizard(): JSX.Element | null {
     if (stagingAreas.length > 0) {
       stagingAreas.forEach((_, index) => {
         return dispatch(
-          createDeckFixture(
-            'stagingArea',
-            STAGING_AREA_CUTOUTS.reverse()[index]
-          )
+          createDeckFixture('stagingArea', STAGING_AREA_CUTOUTS_ORDERED[index])
         )
       })
     }

protocol-designer/src/pages/CreateNewProtocolWizard/utils.tsx

@@ -8,7 +8,6 @@ import {
   MAGNETIC_BLOCK_V1,
   MAGNETIC_MODULE_V1,
   MAGNETIC_MODULE_V2,
-  STAGING_AREA_CUTOUTS,
   TEMPERATURE_MODULE_V1,
   TEMPERATURE_MODULE_V2,
   THERMOCYCLER_MODULE_TYPE,
@@ -19,6 +18,7 @@ import {
 import wasteChuteImage from '../../assets/images/waste_chute.png'
 import trashBinImage from '../../assets/images/flex_trash_bin.png'
 import stagingAreaImage from '../../assets/images/staging_area.png'
+import { STAGING_AREA_CUTOUTS_ORDERED } from '../../constants'
 
 import type {
   CutoutId,
@@ -268,7 +268,9 @@ export const getTrashSlot = (values: WizardFormState): string => {
     equipment.includes('stagingArea')
   )
 
-  const cutouts = stagingAreas.map((_, index) => STAGING_AREA_CUTOUTS[index])
+  const cutouts = stagingAreas.map(
+    (_, index) => STAGING_AREA_CUTOUTS_ORDERED[index]
+  )
   const hasWasteChute = additionalEquipment.find(equipment =>
     equipment.includes('wasteChute')
   )

protocol-designer/src/pages/ProtocolOverview/DeckThumbnail.tsx

@@ -35,6 +35,7 @@ import type { StagingAreaLocation, TrashCutoutId } from '@opentrons/components'
 import type { CutoutId, DeckSlotId } from '@opentrons/shared-data'
 import type { AdditionalEquipmentEntity } from '@opentrons/step-generation'
 
+const RIGHT_COLUMN_FIXTURE_PADDING = 50 // mm
 const WASTE_CHUTE_SPACE = 30
 const OT2_STANDARD_DECK_VIEW_LAYER_BLOCK_LIST: string[] = [
   'calibrationMarkings',
@@ -99,6 +100,8 @@ export function DeckThumbnail(props: DeckThumbnailProps): JSX.Element {
   const filteredAddressableAreas = deckDef.locations.addressableAreas.filter(
     aa => isAddressableAreaStandardSlot(aa.id, deckDef)
   )
+  const hasRightColumnFixtures =
+    stagingAreaFixtures.length + wasteChuteFixtures.length > 0
   return (
     <Flex
       width="100%"
@@ -118,7 +121,12 @@ export function DeckThumbnail(props: DeckThumbnailProps): JSX.Element {
           hasWasteChute
             ? deckDef.cornerOffsetFromOrigin[1] - WASTE_CHUTE_SPACE
             : deckDef.cornerOffsetFromOrigin[1]
-        } ${deckDef.dimensions[0]} ${deckDef.dimensions[1]}`}
+        } ${
+          hasRightColumnFixtures
+            ? deckDef.dimensions[0] + RIGHT_COLUMN_FIXTURE_PADDING
+            : deckDef.dimensions[0]
+        } ${deckDef.dimensions[1]}`}
+        zoomed
       >
         {() => (
           <>