@opentrons/components 0.1.7-alpha.1 → 0.2.0-alpha.1

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

@@ -1,100 +0,0 @@
-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

@@ -1,113 +0,0 @@
-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

@@ -1,29 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

@@ -1,91 +0,0 @@
-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

@@ -1,109 +0,0 @@
-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

@@ -1,132 +0,0 @@
-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

@@ -1,99 +0,0 @@
-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>
-  )
-}