@opentrons/components 0.1.6-alpha.9 → 0.1.7-alpha.1

package/src/hardware-sim/Deck/RobotWorkSpace.tsx

@@ -0,0 +1,100 @@
+import { useRef } from 'react'
+
+import { OT2_ROBOT_TYPE } from '@opentrons/shared-data'
+
+import { Svg } from '../../primitives'
+import { DeckFromLayers } from './DeckFromLayers'
+
+import type { ReactNode } from 'react'
+import type { DeckDefinition, DeckSlot } from '@opentrons/shared-data'
+import type { StyleProps } from '../../primitives'
+
+export interface RobotWorkSpaceRenderProps {
+  deckSlotsById: { [slotId: string]: DeckSlot }
+  getRobotCoordsFromDOMCoords: (
+    domX: number,
+    domY: number
+  ) => { x: number; y: number }
+}
+
+export interface RobotWorkSpaceProps extends StyleProps {
+  deckDef?: DeckDefinition
+  viewBox?: string | null
+  children?: (props: RobotWorkSpaceRenderProps) => ReactNode
+  deckLayerBlocklist?: string[]
+  // optional boolean to show the OT-2 deck from deck defintion layers
+  showDeckLayers?: boolean
+  id?: string
+}
+
+type GetRobotCoordsFromDOMCoords = RobotWorkSpaceRenderProps['getRobotCoordsFromDOMCoords']
+
+export function RobotWorkSpace(props: RobotWorkSpaceProps): JSX.Element | null {
+  const {
+    children,
+    deckDef,
+    deckLayerBlocklist = [],
+    showDeckLayers = false,
+    viewBox,
+    id,
+    ...styleProps
+  } = props
+  const wrapperRef = useRef<SVGSVGElement>(null)
+
+  // NOTE: getScreenCTM in Chrome a DOMMatrix type,
+  // in Firefox the same fn returns a deprecated SVGMatrix.
+  // Until Firefox fixes this and conforms to SVG2 draft,
+  // it will suffer from inverted y behavior (ignores css transform)
+  const getRobotCoordsFromDOMCoords: GetRobotCoordsFromDOMCoords = (x, y) => {
+    if (!wrapperRef.current) return { x: 0, y: 0 }
+
+    const cursorPoint = wrapperRef.current.createSVGPoint()
+
+    cursorPoint.x = x
+    cursorPoint.y = y
+
+    return cursorPoint.matrixTransform(
+      wrapperRef.current.getScreenCTM()?.inverse()
+    )
+  }
+  if (!deckDef && !viewBox) return null
+
+  let wholeDeckViewBox
+  let deckSlotsById = {}
+  if (deckDef != null) {
+    const [viewBoxOriginX, viewBoxOriginY] = deckDef.cornerOffsetFromOrigin
+    const [deckXDimension, deckYDimension] = deckDef.dimensions
+
+    deckSlotsById = deckDef.locations.addressableAreas.reduce(
+      (acc, deckSlot) => ({ ...acc, [deckSlot.id]: deckSlot }),
+      {}
+    )
+    wholeDeckViewBox = `${viewBoxOriginX} ${viewBoxOriginY} ${deckXDimension} ${deckYDimension}`
+  }
+
+  const activeViewBox = viewBox ?? wholeDeckViewBox
+
+  return (
+    <Svg viewBox={activeViewBox} ref={wrapperRef} id={id} {...styleProps}>
+      <g
+        transform={
+          activeViewBox
+            ? `scale(1, -1) translate(0, ${
+                -1 *
+                (Number(activeViewBox?.split(' ')[3]) +
+                  2 * Number(activeViewBox?.split(' ')[1]))
+              })`
+            : undefined
+        }
+      >
+        {showDeckLayers ? (
+          <DeckFromLayers
+            layerBlocklist={deckLayerBlocklist}
+            robotType={OT2_ROBOT_TYPE}
+          />
+        ) : null}
+        {children?.({ deckSlotsById, getRobotCoordsFromDOMCoords })}
+      </g>
+    </Svg>
+  )
+}

package/src/hardware-sim/Deck/SlotLabels.tsx

@@ -0,0 +1,113 @@
+import { FLEX_ROBOT_TYPE } from '@opentrons/shared-data'
+
+import { DeckInfoLabel } from '../../molecules'
+import { Flex } from '../../primitives'
+import { ALIGN_CENTER, DIRECTION_COLUMN, JUSTIFY_CENTER } from '../../styles'
+import { RobotCoordsForeignObject } from './RobotCoordsForeignObject'
+
+import type { RobotType } from '@opentrons/shared-data'
+
+interface SlotLabelsProps {
+  robotType: RobotType
+  color?: string
+  show4thColumn?: boolean
+}
+
+/**
+ * Component to render Opentrons Flex slot labels
+ * For use as a RobotWorkspace child component
+ */
+export const SlotLabels = ({
+  robotType,
+  color,
+  show4thColumn = false,
+}: SlotLabelsProps): JSX.Element | null => {
+  const widthSmallRem = 10.5
+  const widthLargeRem = 15.25
+
+  return robotType === FLEX_ROBOT_TYPE ? (
+    <>
+      <RobotCoordsForeignObject
+        width="2.5rem"
+        height="26.75rem"
+        x="-147"
+        y="-10"
+      >
+        <Flex
+          alignItems={ALIGN_CENTER}
+          flexDirection={DIRECTION_COLUMN}
+          flex="1"
+          height="100%"
+          width="2.5rem"
+        >
+          <Flex alignItems={ALIGN_CENTER} flex="1">
+            <DeckInfoLabel deckLabel="A" height="max-content" width="100%" />
+          </Flex>
+          <Flex alignItems={ALIGN_CENTER} flex="1">
+            <DeckInfoLabel deckLabel="B" height="max-content" width="100%" />
+          </Flex>
+          <Flex alignItems={ALIGN_CENTER} flex="1">
+            <DeckInfoLabel deckLabel="C" height="max-content" width="100%" />
+          </Flex>
+          <Flex alignItems={ALIGN_CENTER} flex="1">
+            <DeckInfoLabel deckLabel="D" height="max-content" width="100%" />
+          </Flex>
+        </Flex>
+      </RobotCoordsForeignObject>
+      <RobotCoordsForeignObject
+        height="2.5rem"
+        width={`${
+          show4thColumn
+            ? widthSmallRem * 2 + widthLargeRem * 2
+            : widthSmallRem + widthLargeRem * 2
+        }rem`}
+        x="-100"
+        y="-55"
+      >
+        <Flex
+          alignItems={ALIGN_CENTER}
+          flex="1"
+          width={`${
+            show4thColumn
+              ? widthSmallRem * 2 + widthLargeRem * 2
+              : widthSmallRem + widthLargeRem * 2
+          }rem`}
+          height="2.5rem"
+        >
+          <Flex
+            alignItems={ALIGN_CENTER}
+            justifyContent={JUSTIFY_CENTER}
+            width={`${widthLargeRem}rem`}
+          >
+            <DeckInfoLabel deckLabel="1" height="100%" />
+          </Flex>
+          <Flex
+            alignItems={ALIGN_CENTER}
+            justifyContent={JUSTIFY_CENTER}
+            width={`${widthSmallRem}rem`}
+          >
+            <DeckInfoLabel deckLabel="2" height="100%" />
+          </Flex>
+          <Flex
+            alignItems={ALIGN_CENTER}
+            justifyContent={JUSTIFY_CENTER}
+            width={
+              show4thColumn ? `${widthSmallRem}rem` : `${widthLargeRem}rem`
+            }
+          >
+            <DeckInfoLabel deckLabel="3" height="100%" />
+          </Flex>
+          {show4thColumn ? (
+            <Flex
+              alignItems={ALIGN_CENTER}
+              justifyContent={JUSTIFY_CENTER}
+              width={`${widthSmallRem}rem`}
+            >
+              <DeckInfoLabel deckLabel="4" height="100%" />
+            </Flex>
+          ) : null}
+        </Flex>
+      </RobotCoordsForeignObject>
+    </>
+  ) : null
+}

package/src/hardware-sim/Deck/__mocks__/getDeckDefinitions.ts

@@ -0,0 +1,29 @@
+import assert from 'assert'
+import path from 'path'
+// replace webpack-specific require.context with Node-based glob in tests
+import glob from 'glob'
+import { vi } from 'vitest'
+
+import type { DeckDefinition } from '@opentrons/shared-data'
+
+const DECK_FIXTURE_PATTERN = path.join(
+  __dirname,
+  '../../../../../shared-data/deck/fixtures/3/*.json'
+)
+
+const allDecks: unknown[] = glob.sync(DECK_FIXTURE_PATTERN).map(require)
+
+assert(
+  allDecks.length > 0,
+  `no deck fixtures found, is the path correct? ${DECK_FIXTURE_PATTERN}`
+)
+
+export const getDeckDefinitions = vi.fn(() =>
+  (allDecks as DeckDefinition[]).reduce(
+    (acc, deck: DeckDefinition): Record<string, DeckDefinition> => ({
+      ...acc,
+      [deck.otId]: deck,
+    }),
+    {}
+  )
+)

package/src/hardware-sim/Deck/constants.ts

@@ -0,0 +1,12 @@
+export const ALL_OT2_DECK_LAYERS = [
+  'fixedBase',
+  'fixedTrash',
+  'doorStops',
+  'metalFrame',
+  'removableDeckOutline',
+  'slotRidges',
+  'slotNumbers',
+  'calibrationMarkings',
+  'removalHandle',
+  'screwHoles',
+] as const

package/src/hardware-sim/Deck/index.tsx

@@ -0,0 +1,8 @@
+export * from './DeckFromLayers'
+export * from './FlexTrash'
+export * from './MoveLabwareOnDeck'
+export * from './RobotCoordsForeignDiv'
+export * from './RobotCoordsForeignObject'
+export * from './RobotCoordsText'
+export * from './RobotWorkSpace'
+export * from './SlotLabels'

package/src/hardware-sim/DeckConfigurator/AbsorbanceReaderFixture.tsx

@@ -0,0 +1,91 @@
+import { COLORS } from '../../helix-design-system'
+import { Icon } from '../../icons'
+import { Btn, Text } from '../../primitives'
+import { TYPOGRAPHY } from '../../ui-style-constants'
+import { RobotCoordsForeignObject } from '../Deck/RobotCoordsForeignObject'
+import {
+  COLUMN_3_X_ADJUSTMENT,
+  CONFIG_STYLE_EDITABLE,
+  CONFIG_STYLE_READ_ONLY,
+  CONFIG_STYLE_SELECTED,
+  FIXTURE_HEIGHT,
+  STAGING_AREA_FIXTURE_WIDTH,
+  Y_ADJUSTMENT,
+} from './constants'
+
+import type {
+  CutoutFixtureId,
+  CutoutId,
+  DeckDefinition,
+} from '@opentrons/shared-data'
+
+interface AbsorbanceReaderFixtureProps {
+  deckDefinition: DeckDefinition
+  fixtureLocation: CutoutId
+  cutoutFixtureId: CutoutFixtureId
+  handleClickRemove?: (
+    fixtureLocation: CutoutId,
+    cutoutFixtureId: CutoutFixtureId
+  ) => void
+  selected?: boolean
+}
+
+const ABSORBANCE_READER_FIXTURE_DISPLAY_NAME = 'Absorbance'
+
+export function AbsorbanceReaderFixture(
+  props: AbsorbanceReaderFixtureProps
+): JSX.Element {
+  const {
+    deckDefinition,
+    handleClickRemove,
+    fixtureLocation,
+    cutoutFixtureId,
+    selected = false,
+  } = props
+
+  const cutoutDef = deckDefinition.locations.cutouts.find(
+    cutout => cutout.id === fixtureLocation
+  )
+
+  /**
+   * deck definition cutout position is the position of the single slot located within that cutout
+   * so, to get the position of the cutout itself we must add an adjustment to the slot position
+   * the adjustment for x is different for right side/left side
+   */
+  const [xSlotPosition = 0, ySlotPosition = 0] = cutoutDef?.position ?? []
+
+  const x = xSlotPosition + COLUMN_3_X_ADJUSTMENT
+
+  const y = ySlotPosition + Y_ADJUSTMENT
+
+  const editableStyle = selected ? CONFIG_STYLE_SELECTED : CONFIG_STYLE_EDITABLE
+  return (
+    <RobotCoordsForeignObject
+      width={STAGING_AREA_FIXTURE_WIDTH}
+      height={FIXTURE_HEIGHT}
+      x={x}
+      y={y}
+      flexProps={{ flex: '1' }}
+      foreignObjectProps={{ flex: '1' }}
+    >
+      <Btn
+        css={handleClickRemove != null ? editableStyle : CONFIG_STYLE_READ_ONLY}
+        cursor={handleClickRemove != null ? 'pointer' : 'default'}
+        onClick={
+          handleClickRemove != null
+            ? () => {
+                handleClickRemove(fixtureLocation, cutoutFixtureId)
+              }
+            : () => {}
+        }
+      >
+        <Text css={TYPOGRAPHY.smallBodyTextSemiBold}>
+          {ABSORBANCE_READER_FIXTURE_DISPLAY_NAME}
+        </Text>
+        {handleClickRemove != null ? (
+          <Icon name="remove" color={COLORS.white} size="2rem" />
+        ) : null}
+      </Btn>
+    </RobotCoordsForeignObject>
+  )
+}

package/src/hardware-sim/DeckConfigurator/DeckConfigurator.stories.tsx

@@ -0,0 +1,109 @@
+import {
+  SINGLE_CENTER_SLOT_FIXTURE,
+  SINGLE_LEFT_SLOT_FIXTURE,
+  STAGING_AREA_RIGHT_SLOT_FIXTURE,
+  TRASH_BIN_ADAPTER_FIXTURE,
+  WASTE_CHUTE_RIGHT_ADAPTER_COVERED_FIXTURE,
+} from '@opentrons/shared-data'
+
+import { DeckConfigurator } from '.'
+
+import type { Meta, Story } from '@storybook/react'
+import type * as React from 'react'
+import type { CutoutConfig } from '@opentrons/shared-data'
+
+export default {
+  title: 'Library/Molecules/Simulation/DeckConfigurator',
+} as Meta
+
+const Template: Story<React.ComponentProps<typeof DeckConfigurator>> = args => (
+  <DeckConfigurator {...args} />
+)
+const deckConfig: CutoutConfig[] = [
+  {
+    cutoutId: 'cutoutA1',
+    cutoutFixtureId: SINGLE_LEFT_SLOT_FIXTURE,
+  },
+  {
+    cutoutId: 'cutoutB1',
+    cutoutFixtureId: SINGLE_LEFT_SLOT_FIXTURE,
+  },
+  {
+    cutoutId: 'cutoutC1',
+    cutoutFixtureId: SINGLE_LEFT_SLOT_FIXTURE,
+  },
+  {
+    cutoutId: 'cutoutD1',
+    cutoutFixtureId: SINGLE_LEFT_SLOT_FIXTURE,
+  },
+  {
+    cutoutFixtureId: SINGLE_CENTER_SLOT_FIXTURE,
+    cutoutId: 'cutoutA2',
+  },
+  {
+    cutoutFixtureId: SINGLE_CENTER_SLOT_FIXTURE,
+    cutoutId: 'cutoutB2',
+  },
+  {
+    cutoutFixtureId: SINGLE_CENTER_SLOT_FIXTURE,
+    cutoutId: 'cutoutC2',
+  },
+  {
+    cutoutFixtureId: SINGLE_CENTER_SLOT_FIXTURE,
+    cutoutId: 'cutoutD2',
+  },
+  {
+    cutoutId: 'cutoutA3',
+    cutoutFixtureId: TRASH_BIN_ADAPTER_FIXTURE,
+  },
+  {
+    cutoutId: 'cutoutB3',
+    cutoutFixtureId: STAGING_AREA_RIGHT_SLOT_FIXTURE,
+  },
+  {
+    cutoutId: 'cutoutC3',
+    cutoutFixtureId: STAGING_AREA_RIGHT_SLOT_FIXTURE,
+  },
+  {
+    cutoutId: 'cutoutD3',
+    cutoutFixtureId: WASTE_CHUTE_RIGHT_ADAPTER_COVERED_FIXTURE,
+  },
+]
+
+const staticFixtures = [
+  { location: 'cutoutB2', label: 'Tip rack' },
+  { location: 'cutoutC2', label: 'Labware' },
+  { location: 'cutoutD2', label: 'Labware' },
+]
+
+export const Default = Template.bind({})
+Default.args = {
+  deckConfig,
+  handleClickAdd: cutoutId => {
+    console.log(`add at ${cutoutId}`)
+  },
+  handleClickRemove: cutoutId => {
+    console.log(`remove at ${cutoutId}`)
+  },
+}
+
+export const ReadOnly = Template.bind({})
+ReadOnly.args = {
+  deckConfig,
+  handleClickAdd: cutoutId => {
+    console.log(`add at ${cutoutId}`)
+  },
+  handleClickRemove: cutoutId => {
+    console.log(`remove at ${cutoutId}`)
+  },
+  readOnly: true,
+}
+
+export const ReadOnlyWithStaticFixtures = Template.bind({})
+ReadOnlyWithStaticFixtures.args = {
+  deckConfig,
+  handleClickAdd: () => {},
+  handleClickRemove: () => {},
+  readOnly: true,
+  additionalStaticFixtures: staticFixtures,
+}

package/src/hardware-sim/DeckConfigurator/EmptyConfigFixture.tsx

@@ -0,0 +1,132 @@
+import { css } from 'styled-components'
+
+import { BORDERS, COLORS } from '../../helix-design-system'
+import { Icon } from '../../icons'
+import { Btn } from '../../primitives'
+import { ALIGN_CENTER, DISPLAY_FLEX, JUSTIFY_CENTER } from '../../styles'
+import { RESPONSIVENESS } from '../../ui-style-constants'
+import { RobotCoordsForeignObject } from '../Deck/RobotCoordsForeignObject'
+import {
+  COLUMN_1_SINGLE_SLOT_FIXTURE_WIDTH,
+  COLUMN_1_X_ADJUSTMENT,
+  COLUMN_2_SINGLE_SLOT_FIXTURE_WIDTH,
+  COLUMN_2_X_ADJUSTMENT,
+  COLUMN_3_SINGLE_SLOT_FIXTURE_WIDTH,
+  COLUMN_3_X_ADJUSTMENT,
+  FIXTURE_HEIGHT,
+  Y_ADJUSTMENT,
+} from './constants'
+
+import type { CutoutId, DeckDefinition } from '@opentrons/shared-data'
+
+interface EmptyConfigFixtureProps {
+  deckDefinition: DeckDefinition
+  fixtureLocation: CutoutId
+  handleClickAdd: (fixtureLocation: CutoutId) => void
+}
+
+export function EmptyConfigFixture(
+  props: EmptyConfigFixtureProps
+): JSX.Element {
+  const { deckDefinition, handleClickAdd, fixtureLocation } = props
+
+  const standardSlotCutout = deckDefinition.locations.cutouts.find(
+    cutout => cutout.id === fixtureLocation
+  )
+
+  /**
+   * deck definition cutout position is the position of the single slot located within that cutout
+   * so, to get the position of the cutout itself we must add an adjustment to the slot position
+   * the adjustment for x is different for right side/left side
+   */
+  const [xSlotPosition = 0, ySlotPosition = 0] =
+    standardSlotCutout?.position ?? []
+  let x = xSlotPosition
+  let width = 0
+  switch (fixtureLocation) {
+    case 'cutoutA1':
+    case 'cutoutB1':
+    case 'cutoutC1':
+    case 'cutoutD1': {
+      x = xSlotPosition + COLUMN_1_X_ADJUSTMENT
+      width = COLUMN_1_SINGLE_SLOT_FIXTURE_WIDTH
+      break
+    }
+    case 'cutoutA2':
+    case 'cutoutB2':
+    case 'cutoutC2':
+    case 'cutoutD2': {
+      x = xSlotPosition + COLUMN_2_X_ADJUSTMENT
+      width = COLUMN_2_SINGLE_SLOT_FIXTURE_WIDTH
+      break
+    }
+    case 'cutoutA3':
+    case 'cutoutB3':
+    case 'cutoutC3':
+    case 'cutoutD3': {
+      x = xSlotPosition + COLUMN_3_X_ADJUSTMENT
+      width = COLUMN_3_SINGLE_SLOT_FIXTURE_WIDTH
+      break
+    }
+  }
+
+  const y = ySlotPosition + Y_ADJUSTMENT
+
+  return (
+    <RobotCoordsForeignObject
+      width={width}
+      height={FIXTURE_HEIGHT}
+      x={x}
+      y={y}
+      flexProps={{ flex: '1' }}
+      foreignObjectProps={{ flex: '1' }}
+    >
+      <Btn
+        css={EMPTY_CONFIG_STYLE}
+        onClick={() => {
+          handleClickAdd(fixtureLocation)
+        }}
+        data-testid={fixtureLocation}
+      >
+        <Icon name="add" color={COLORS.blue50} size="2rem" />
+      </Btn>
+    </RobotCoordsForeignObject>
+  )
+}
+
+const EMPTY_CONFIG_STYLE = css`
+  display: ${DISPLAY_FLEX};
+  align-items: ${ALIGN_CENTER};
+  justify-content: ${JUSTIFY_CENTER};
+  background-color: ${COLORS.blue30};
+  border: 3px dashed ${COLORS.blue50};
+  border-radius: ${BORDERS.borderRadius4};
+  width: 100%;
+
+  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+    background-color: ${COLORS.blue35};
+  }
+
+  &:active {
+    border: 3px solid ${COLORS.blue50};
+    background-color: ${COLORS.blue40};
+  }
+
+  &:focus {
+    border: 3px solid ${COLORS.blue50};
+    background-color: ${COLORS.blue40};
+  }
+
+  &:hover {
+    background-color: ${COLORS.blue35};
+  }
+
+  &:focus-visible {
+    border: 3px solid ${COLORS.blue50};
+    background-color: ${COLORS.blue35};
+
+    @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+      background-color: ${COLORS.blue40};
+    }
+  }
+`

package/src/hardware-sim/DeckConfigurator/FlexStackerFixture.tsx

@@ -0,0 +1,99 @@
+import { COLORS } from '../../helix-design-system'
+import { Icon } from '../../icons'
+import { Btn, Text } from '../../primitives'
+import { TYPOGRAPHY } from '../../ui-style-constants'
+import { RobotCoordsForeignObject } from '../Deck/RobotCoordsForeignObject'
+import {
+  COLUMN_3_X_ADJUSTMENT,
+  CONFIG_STYLE_EDITABLE,
+  CONFIG_STYLE_READ_ONLY,
+  CONFIG_STYLE_SELECTED,
+  FIXTURE_HEIGHT,
+  STAGING_AREA_FIXTURE_WIDTH,
+  Y_ADJUSTMENT,
+} from './constants'
+
+import type {
+  CutoutFixtureId,
+  CutoutId,
+  DeckDefinition,
+} from '@opentrons/shared-data'
+
+interface FlexStackerFixtureProps {
+  deckDefinition: DeckDefinition
+  fixtureLocation: CutoutId
+  cutoutFixtureId: CutoutFixtureId
+  hasWasteChute: boolean
+  handleClickRemove?: (
+    fixtureLocation: CutoutId,
+    cutoutFixtureId: CutoutFixtureId
+  ) => void
+  selected?: boolean
+}
+
+const FLEX_STACKER_FIXTURE_DISPLAY_NAME = 'Stacker'
+const FLEX_STACKER_WASTE_CHUTE_DISPLAY_NAME = 'Stacker + Waste chute'
+const FLEX_STACKER_MAG_BLOCK_DISPLAY_NAME = 'Stacker + Mag Block'
+
+export function FlexStackerFixture(
+  props: FlexStackerFixtureProps
+): JSX.Element {
+  const {
+    deckDefinition,
+    handleClickRemove,
+    fixtureLocation,
+    cutoutFixtureId,
+    hasWasteChute,
+    selected = false,
+  } = props
+
+  const cutoutDef = deckDefinition.locations.cutouts.find(
+    cutout => cutout.id === fixtureLocation
+  )
+  let displayName = FLEX_STACKER_FIXTURE_DISPLAY_NAME
+  if (hasWasteChute) {
+    displayName = FLEX_STACKER_WASTE_CHUTE_DISPLAY_NAME
+  } else if (cutoutFixtureId === 'flexStackerModuleV1WithMagneticBlockV1') {
+    displayName = FLEX_STACKER_MAG_BLOCK_DISPLAY_NAME
+  }
+
+  /**
+   * deck definition cutout position is the position of the single slot located within that cutout
+   * so, to get the position of the cutout itself we must add an adjustment to the slot position
+   * the adjustment for x is different for right side/left side
+   */
+  const [xSlotPosition = 0, ySlotPosition = 0] = cutoutDef?.position ?? []
+
+  const x = xSlotPosition + COLUMN_3_X_ADJUSTMENT
+
+  const y = ySlotPosition + Y_ADJUSTMENT
+
+  const editableStyle = selected ? CONFIG_STYLE_SELECTED : CONFIG_STYLE_EDITABLE
+  return (
+    <RobotCoordsForeignObject
+      width={STAGING_AREA_FIXTURE_WIDTH}
+      height={FIXTURE_HEIGHT}
+      x={x}
+      y={y}
+      flexProps={{ flex: '1' }}
+      foreignObjectProps={{ flex: '1' }}
+    >
+      <Btn
+        css={handleClickRemove != null ? editableStyle : CONFIG_STYLE_READ_ONLY}
+        cursor={handleClickRemove != null ? 'pointer' : 'default'}
+        onClick={
+          handleClickRemove != null
+            ? () => {
+                handleClickRemove(fixtureLocation, cutoutFixtureId)
+              }
+            : () => {}
+        }
+      >
+        <Text css={TYPOGRAPHY.smallBodyTextSemiBold}>{displayName}</Text>
+        {handleClickRemove != null ? (
+          <Icon name="remove" color={COLORS.white} size="2rem" />
+        ) : null}
+      </Btn>
+    </RobotCoordsForeignObject>
+  )
+}