feat(protocol-designer): Make adjustments to display flex stacker in deck maps (#19959)

This PR enables you to add a flex stacker to a PD protocol, properly visualize it on all deck maps, and add compatible labware to the shuttle position.

Adjust deck thumbnail, zoomed deck map, and deck edit screens to adapt to the stacker's extra footprint (all through manual visual checking unfortunately)
Create list of Stacker recommended and compatible labware for addition in the

Author: smb2268

components/src/hardware-sim/RobotCoordinateSpace/RobotCoordinateSpaceWithRef.tsx

@@ -13,13 +13,30 @@ interface RobotCoordinateSpaceWithRefProps extends ComponentProps<typeof Svg> {
   viewBox?: string | null
   deckDef?: DeckDefinition
   zoomed?: boolean
+  adjustViewboxForStacker?: boolean
   children?: (props: RobotCoordinateSpaceWithRefRenderProps) => ReactNode
 }
 
+// manual visual adjustments for flex stacker deck view to fit properly and
+// in the center of the frame
+const STACKER_VIEWBOX_ADJUSTMENTS = {
+  viewBoxOriginX: 260,
+  viewBoxOriginY: -25,
+  deckXDimension: -255,
+  deckYDimension: 105,
+}
+
 export function RobotCoordinateSpaceWithRef(
   props: RobotCoordinateSpaceWithRefProps
 ): JSX.Element | null {
-  const { children, deckDef, viewBox, zoomed = false, ...restProps } = props
+  const {
+    children,
+    deckDef,
+    viewBox,
+    adjustViewBoxForStacker = false,
+    zoomed = false,
+    ...restProps
+  } = props
   const wrapperRef = useRef<SVGSVGElement>(null)
 
   if (deckDef == null && viewBox == null) return null
@@ -34,7 +51,21 @@ export function RobotCoordinateSpaceWithRef(
       (acc, deckSlot) => ({ ...acc, [deckSlot.id]: deckSlot }),
       {}
     )
-    wholeDeckViewBox = `${viewBoxOriginX} ${viewBoxOriginY} ${deckXDimension} ${deckYDimension}`
+    const base = [
+      viewBoxOriginX,
+      viewBoxOriginY,
+      deckXDimension,
+      deckYDimension,
+    ] as const
+    const adj = [
+      base[0] + STACKER_VIEWBOX_ADJUSTMENTS.viewBoxOriginX,
+      base[1] + STACKER_VIEWBOX_ADJUSTMENTS.viewBoxOriginY,
+      base[2] + STACKER_VIEWBOX_ADJUSTMENTS.deckXDimension,
+      base[3] + STACKER_VIEWBOX_ADJUSTMENTS.deckYDimension,
+    ] as const
+
+    const adjustedViewBox = adjustViewBoxForStacker ? adj : base
+    wholeDeckViewBox = `${adjustedViewBox[0]} ${adjustedViewBox[1]} ${adjustedViewBox[2]} ${adjustedViewBox[3]}`
   }
 
   return (

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

@@ -21,6 +21,7 @@ import {
   WasteChuteStagingAreaFixture,
 } from '@opentrons/components'
 import {
+  FLEX_STACKER_MODULE_TYPE,
   getPositionFromSlotId,
   isAddressableAreaStandardSlot,
   OT2_ROBOT_TYPE,
@@ -126,7 +127,9 @@ export function DeckSetupContainer(
     (windowInnerWidthRem - DECK_SETUP_TOOLS_WIDTH_REM) / windowInnerWidthRem,
     2
   )
-
+  const hasFlexStacker = Object.values(activeDeckSetup.modules).some(
+    module => module.type === FLEX_STACKER_MODULE_TYPE
+  )
   const isZoomed = Object.values(zoomIn).some(val => val != null)
   const viewBoxNumerical = viewBox?.split(' ').map(val => Number(val)) ?? []
   const viewBoxAdjustedNumerical = [
@@ -248,6 +251,7 @@ export function DeckSetupContainer(
               }
               outline="auto"
               zoomed={zoomIn.slot != null}
+              adjustViewBoxForStacker={hasFlexStacker}
               borderRadius={BORDERS.borderRadius12}
             >
               {() => (

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

@@ -4,6 +4,7 @@ import values from 'lodash/values'
 
 import { DeckLabelSet, Module } from '@opentrons/components'
 import {
+  FLEX_STACKER_MODULE_TYPE,
   getAddressableAreaFromSlotId,
   getModuleDef,
   getPositionFromSlotId,
@@ -292,7 +293,11 @@ export function DeckSetupDetails(props: DeckSetupDetailsProps): JSX.Element {
               innerProps={innerProps}
               targetSlotId={slotId}
               targetDeckId={deckDef.otId}
-              childrenPositioningMode="offsetToSlot"
+              childrenPositioningMode={
+                moduleOnDeck.type === FLEX_STACKER_MODULE_TYPE
+                  ? 'passThrough'
+                  : 'offsetToSlot'
+              }
             >
               {labwareOnModule != null &&
               !isLabwareOccludedByThermocyclerLid ? (

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

@@ -2,8 +2,10 @@ import { useSelector } from 'react-redux'
 
 import { Module } from '@opentrons/components'
 import {
+  FLEX_STACKER_MODULE_TYPE,
   getAllDefinitions,
   getModuleDef,
+  getModuleType,
   inferModuleOrientationFromXCoordinate,
 } from '@opentrons/shared-data'
 import { getSlotInLocationStack } from '@opentrons/step-generation'
@@ -133,7 +135,11 @@ export const SelectedItems = (props: SelectedItemsProps): JSX.Element => {
             orientation={orientation}
             targetDeckId={null}
             targetSlotId={null}
-            childrenPositioningMode="offsetToSlot"
+            childrenPositioningMode={
+              getModuleType(selectedModuleModel) === FLEX_STACKER_MODULE_TYPE
+                ? 'passThrough'
+                : 'offsetToSlot'
+            }
           >
             <SelectedModuleLabwareRender
               topLabwareOnDeck={matchingSelectedTopLabwareOnDeck}

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

@@ -117,7 +117,23 @@ export const RECOMMENDED_LABWARE_BY_MODULE: { [K in ModuleType]: string[] } = {
     'opentrons_96_wellplate_200ul_pcr_full_skirt',
   ],
   [ABSORBANCE_READER_TYPE]: ['nest_96_wellplate_200ul_flat'],
-  [FLEX_STACKER_MODULE_TYPE]: [],
+  [FLEX_STACKER_MODULE_TYPE]: [
+    // all flex tipracks
+    'opentrons_flex_96_filtertiprack_1000ul',
+    'opentrons_flex_96_filtertiprack_200ul',
+    'opentrons_flex_96_filtertiprack_50ul',
+    'opentrons_flex_96_tiprack_1000ul',
+    'opentrons_flex_96_tiprack_200ul',
+    'opentrons_flex_96_tiprack_50ul',
+    // tested and verified well plates
+    'opentrons_96_wellplate_200ul_pcr_full_skirt',
+    'biorad_96_wellplate_200ul_pcr',
+    'biorad_384_wellplate_50ul',
+    'corning_24_wellplate_3.4ml_flat',
+    'nest_96_wellplate_2ml_deep',
+    'nest_96_wellplate_100ul_pcr_full_skirt',
+    'nest_96_wellplate_200ul_flat',
+  ],
 }
 
 export const MOAM_MODELS_WITH_FF: ModuleModel[] = [TEMPERATURE_MODULE_V2]

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

@@ -502,18 +502,18 @@ interface HoverDimensions {
 const FOURTH_COLUMN_SLOTS = ['A4', 'B4', 'C4', 'D4']
 
 export const getFlexHoverDimensions = (
-  stagingAreaLocations: string[],
+  columnFourLocations: string[],
   cutoutId: CutoutId,
   slotId: string,
   hasTCOnSlot: boolean,
   slotPosition: CoordinateTuple
 ): HoverDimensions => {
-  const hasStagingArea = stagingAreaLocations.includes(cutoutId)
+  const columnFourIsOccupied = columnFourLocations.includes(cutoutId)
 
   const X_ADJUSTMENT_LEFT_SIDE = -101.5
   const X_ADJUSTMENT = -17
   const X_DIMENSION_MIDDLE_SLOTS = 160.3
-  const X_DIMENSION_OUTER_SLOTS = hasStagingArea ? 160.0 : 246.5
+  const X_DIMENSION_OUTER_SLOTS = columnFourIsOccupied ? 160.0 : 246.5
   const X_DIMENSION_4TH_COLUMN_SLOTS = 175.0
   const Y_DIMENSION = hasTCOnSlot ? 294.0 : 106.0
 

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

@@ -20,8 +20,10 @@ import {
 } from '@opentrons/components'
 import {
   FLEX_ROBOT_TYPE,
+  FLEX_STACKER_MODULE_TYPE,
   getCutoutIdForAddressableArea,
   getDeckDefFromRobotType,
+  getModuleType,
   isAddressableAreaStandardSlot,
   OT2_ROBOT_TYPE,
   STAGING_AREA_CUTOUTS,
@@ -38,6 +40,7 @@ import type { CutoutId, DeckSlotId, RobotType } from '@opentrons/shared-data'
 import type { AdditionalEquipmentEntity } from '@opentrons/step-generation'
 
 const RIGHT_COLUMN_FIXTURE_PADDING = 50 // mm
+const FLEX_STACKER_FIXTURE_PADDING = 220 // mm
 const WASTE_CHUTE_SPACE = 30
 const OT2_STANDARD_DECK_VIEW_LAYER_BLOCK_LIST: string[] = [
   'calibrationMarkings',
@@ -99,11 +102,18 @@ export function DeckThumbnail(props: DeckThumbnailProps): JSX.Element {
   const hasWasteChute =
     wasteChuteFixtures.length > 0 || wasteChuteStagingAreaFixtures.length > 0
 
+  const hasFlexStacker = Object.values(initialDeckSetup.modules).some(
+    module => getModuleType(module.model) === FLEX_STACKER_MODULE_TYPE
+  )
   const filteredAddressableAreas = deckDef.locations.addressableAreas.filter(
     aa => isAddressableAreaStandardSlot(aa.id, deckDef)
   )
   const hasRightColumnFixtures =
-    stagingAreaFixtures.length + wasteChuteFixtures.length > 0
+    stagingAreaFixtures.length + wasteChuteFixtures.length > 0 || hasFlexStacker
+  const rightColumnAdjustment = hasFlexStacker
+    ? FLEX_STACKER_FIXTURE_PADDING
+    : RIGHT_COLUMN_FIXTURE_PADDING
+
   return (
     <Flex
       width="100%"
@@ -125,7 +135,7 @@ export function DeckThumbnail(props: DeckThumbnailProps): JSX.Element {
             : deckDef.cornerOffsetFromOrigin[1]
         } ${
           hasRightColumnFixtures
-            ? deckDef.dimensions[0] + RIGHT_COLUMN_FIXTURE_PADDING
+            ? deckDef.dimensions[0] + rightColumnAdjustment
             : deckDef.dimensions[0]
         } ${deckDef.dimensions[1]}`}
         zoomed

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

@@ -3,6 +3,7 @@ import values from 'lodash/values'
 
 import { Module } from '@opentrons/components'
 import {
+  FLEX_STACKER_MODULE_TYPE,
   getAddressableAreaFromSlotId,
   getModuleDef,
   getPositionFromSlotId,
@@ -91,7 +92,11 @@ export const DeckThumbnailDetails = (
               }
               targetSlotId={slotId}
               targetDeckId={deckDef.otId}
-              childrenPositioningMode="offsetToSlot"
+              childrenPositioningMode={
+                moduleState.type === FLEX_STACKER_MODULE_TYPE
+                  ? 'passThrough'
+                  : 'offsetToSlot'
+              }
             >
               <>
                 {rightBelowTopId != null ? (

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

@@ -12,8 +12,11 @@ import {
 } from '@opentrons/components'
 import {
   FLEX_ROBOT_TYPE,
+  FLEX_STACKER_MODULE_TYPE,
   getCutoutIdForAddressableArea,
+  getCutoutIdForSlotName,
   getDeckDefFromRobotType,
+  getModuleType,
   THERMOCYCLER_MODULE_TYPE,
 } from '@opentrons/shared-data'
 
@@ -48,10 +51,20 @@ export function SlotHover(props: SlotHoverProps): JSX.Element | null {
     module => module.slot === slotId && module.type === THERMOCYCLER_MODULE_TYPE
   )
   const tcSlots = robotType === FLEX_ROBOT_TYPE ? ['A1'] : ['8', '10', '11']
-  const stagingAreaLocations = Object.values(additionalEquipmentOnDeck)
+  const columnFourLocations = Object.values(additionalEquipmentOnDeck)
     .filter(ae => ae.name === 'stagingArea')
     ?.map(ae => ae.location as string)
 
+  Object.values(modules).reduce<string[]>((acc, module) => {
+    if (getModuleType(module.model) === FLEX_STACKER_MODULE_TYPE) {
+      const cutoutForStacker = getCutoutIdForSlotName(module.slot, deckDef)
+      if (cutoutForStacker != null) {
+        acc.push(cutoutForStacker)
+      }
+    }
+    return acc
+  }, columnFourLocations)
+
   const cutoutId =
     getCutoutIdForAddressableArea(
       slotId as AddressableAreaName,
@@ -78,7 +91,7 @@ export function SlotHover(props: SlotHoverProps): JSX.Element | null {
 
   if (robotType === FLEX_ROBOT_TYPE) {
     const { width, height, x, y } = getFlexHoverDimensions(
-      stagingAreaLocations,
+      columnFourLocations,
       cutoutId,
       slotId,
       hasTCOnSlot != null,

protocol-designer/src/utils/labwareModuleCompatibility.ts

@@ -9,6 +9,8 @@ import {
   THERMOCYCLER_MODULE_TYPE,
 } from '@opentrons/shared-data'
 
+import { RECOMMENDED_LABWARE_BY_MODULE } from '../pages/Designer/DeckSetup/constants'
+
 import type { LabwareDefinition2, ModuleType } from '@opentrons/shared-data'
 import type { LabwareDefByDefURI } from '../labware-defs'
 import type { LabwareOnDeck } from '../step-forms'
@@ -77,7 +79,9 @@ export const COMPATIBLE_LABWARE_ALLOWLIST_BY_MODULE_TYPE: Record<
   [ABSORBANCE_READER_TYPE]: [
     'opentrons_flex_lid_absorbance_plate_reader_module',
   ],
-  [FLEX_STACKER_MODULE_TYPE]: [],
+  [FLEX_STACKER_MODULE_TYPE]: [
+    ...RECOMMENDED_LABWARE_BY_MODULE[FLEX_STACKER_MODULE_TYPE],
+  ],
 }
 export const getLabwareIsCompatible = (
   def: LabwareDefinition2,
@@ -113,13 +117,27 @@ const _getLabwareCompatibleWithAbsorbanceReader = (
   )
 }
 
+const _getLabwareCompatibleWithFlexStacker = (
+  def: LabwareDefinition2
+): boolean =>
+  RECOMMENDED_LABWARE_BY_MODULE[FLEX_STACKER_MODULE_TYPE].includes(
+    def.parameters.loadName
+  ) ||
+  def.metadata.displayCategory === 'wellPlate' ||
+  def.metadata.displayCategory === 'reservoir'
+
 export const getLabwareCompatibleWithModule = (
   def: LabwareDefinition2,
   moduleType: ModuleType
 ): boolean => {
-  return moduleType === ABSORBANCE_READER_TYPE
-    ? _getLabwareCompatibleWithAbsorbanceReader(def)
-    : COMPATIBLE_LABWARE_ALLOWLIST_BY_MODULE_TYPE[moduleType].includes(
+  switch (moduleType) {
+    case FLEX_STACKER_MODULE_TYPE:
+      return _getLabwareCompatibleWithFlexStacker(def)
+    case ABSORBANCE_READER_TYPE:
+      return _getLabwareCompatibleWithAbsorbanceReader(def)
+    default:
+      return COMPATIBLE_LABWARE_ALLOWLIST_BY_MODULE_TYPE[moduleType].includes(
         def.parameters.loadName
       )
+  }
 }