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

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

@@ -1,102 +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_1_X_ADJUSTMENT,
-  COLUMN_3_SINGLE_SLOT_FIXTURE_WIDTH,
-  COLUMN_3_X_ADJUSTMENT,
-  CONFIG_STYLE_EDITABLE,
-  CONFIG_STYLE_READ_ONLY,
-  CONFIG_STYLE_SELECTED,
-  FIXTURE_HEIGHT,
-  Y_ADJUSTMENT,
-} from './constants'
-
-import type {
-  CutoutFixtureId,
-  CutoutId,
-  DeckDefinition,
-} from '@opentrons/shared-data'
-
-// TODO(BC, 2024-03-21): This component is almost identical to TemperatureModuleFixture, consider consolidating?
-
-interface HeaterShakerFixtureProps {
-  deckDefinition: DeckDefinition
-  fixtureLocation: CutoutId
-  cutoutFixtureId: CutoutFixtureId
-  handleClickRemove?: (
-    fixtureLocation: CutoutId,
-    cutoutFixtureId: CutoutFixtureId
-  ) => void
-  selected?: boolean
-}
-
-const HEATER_SHAKER_MODULE_FIXTURE_DISPLAY_NAME = 'Heater-Shaker'
-
-export function HeaterShakerFixture(
-  props: HeaterShakerFixtureProps
-): 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 isColumnOne =
-    fixtureLocation === 'cutoutA1' ||
-    fixtureLocation === 'cutoutB1' ||
-    fixtureLocation === 'cutoutC1' ||
-    fixtureLocation === 'cutoutD1'
-  const xAdjustment = isColumnOne
-    ? COLUMN_1_X_ADJUSTMENT
-    : COLUMN_3_X_ADJUSTMENT
-  const x = xSlotPosition + xAdjustment
-
-  const y = ySlotPosition + Y_ADJUSTMENT
-
-  const editableStyle = selected ? CONFIG_STYLE_SELECTED : CONFIG_STYLE_EDITABLE
-  return (
-    <RobotCoordsForeignObject
-      width={COLUMN_3_SINGLE_SLOT_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}>
-          {HEATER_SHAKER_MODULE_FIXTURE_DISPLAY_NAME}
-        </Text>
-        {handleClickRemove != null ? (
-          <Icon name="remove" color={COLORS.white} size="2rem" />
-        ) : null}
-      </Btn>
-    </RobotCoordsForeignObject>
-  )
-}

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

@@ -1,130 +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_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,
-  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 MagneticBlockFixtureProps {
-  deckDefinition: DeckDefinition
-  fixtureLocation: CutoutId
-  cutoutFixtureId: CutoutFixtureId
-  handleClickRemove?: (
-    fixtureLocation: CutoutId,
-    cutoutFixtureId: CutoutFixtureId
-  ) => void
-  hasStagingArea?: boolean
-  selected?: boolean
-}
-
-const MAGNETIC_BLOCK_FIXTURE_DISPLAY_NAME = 'Mag Block'
-const STAGING_AREA_WITH_MAGNETIC_BLOCK_DISPLAY_NAME = 'Mag + staging'
-
-export function MagneticBlockFixture(
-  props: MagneticBlockFixtureProps
-): JSX.Element {
-  const {
-    deckDefinition,
-    fixtureLocation,
-    handleClickRemove,
-    cutoutFixtureId,
-    hasStagingArea,
-    selected = false,
-  } = 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
-  let displayName = hasStagingArea
-    ? STAGING_AREA_WITH_MAGNETIC_BLOCK_DISPLAY_NAME
-    : MAGNETIC_BLOCK_FIXTURE_DISPLAY_NAME
-  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
-      displayName = 'Mag'
-      break
-    }
-    case 'cutoutA3':
-    case 'cutoutB3':
-    case 'cutoutC3':
-    case 'cutoutD3': {
-      x = xSlotPosition + COLUMN_3_X_ADJUSTMENT
-      width = hasStagingArea
-        ? STAGING_AREA_FIXTURE_WIDTH
-        : COLUMN_3_SINGLE_SLOT_FIXTURE_WIDTH
-      break
-    }
-  }
-
-  const y = ySlotPosition + Y_ADJUSTMENT
-
-  const editableStyle = selected ? CONFIG_STYLE_SELECTED : CONFIG_STYLE_EDITABLE
-  return (
-    <RobotCoordsForeignObject
-      width={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>
-  )
-}

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

@@ -1,89 +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_DISPLAY_NAME,
-  STAGING_AREA_FIXTURE_WIDTH,
-  Y_ADJUSTMENT,
-} from './constants'
-
-import type {
-  CutoutFixtureId,
-  CutoutId,
-  DeckDefinition,
-} from '@opentrons/shared-data'
-
-interface StagingAreaConfigFixtureProps {
-  deckDefinition: DeckDefinition
-  fixtureLocation: CutoutId
-  cutoutFixtureId: CutoutFixtureId
-  handleClickRemove?: (
-    fixtureLocation: CutoutId,
-    cutoutFixtureId: CutoutFixtureId
-  ) => void
-  selected?: boolean
-}
-
-export function StagingAreaConfigFixture(
-  props: StagingAreaConfigFixtureProps
-): JSX.Element {
-  const {
-    deckDefinition,
-    handleClickRemove,
-    fixtureLocation,
-    cutoutFixtureId,
-    selected = false,
-  } = props
-
-  const stagingAreaCutout = 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
-   */
-  const [xSlotPosition = 0, ySlotPosition = 0] =
-    stagingAreaCutout?.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}>
-          {STAGING_AREA_DISPLAY_NAME}
-        </Text>
-        {handleClickRemove != null ? (
-          <Icon name="remove" color={COLORS.white} size="2rem" />
-        ) : null}
-      </Btn>
-    </RobotCoordsForeignObject>
-  )
-}

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

@@ -1,54 +0,0 @@
-import { Btn, Text } from '../../primitives'
-import { TYPOGRAPHY } from '../../ui-style-constants'
-import { RobotCoordsForeignObject } from '../Deck/RobotCoordsForeignObject'
-import {
-  COLUMN_2_SINGLE_SLOT_FIXTURE_WIDTH,
-  COLUMN_2_X_ADJUSTMENT,
-  CONFIG_STYLE_READ_ONLY,
-  FIXTURE_HEIGHT,
-  Y_ADJUSTMENT,
-} from './constants'
-
-import type { CutoutId, DeckDefinition } from '@opentrons/shared-data'
-
-interface StaticFixtureProps {
-  deckDefinition: DeckDefinition
-  fixtureLocation: CutoutId
-  label: string
-}
-
-/**
- * this component allows us to add static labeled fixtures to the center column of a deck
- * config map
- */
-
-export function StaticFixture(props: StaticFixtureProps): JSX.Element {
-  const { deckDefinition, fixtureLocation, label } = props
-
-  const staticCutout = 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
-   */
-  const [xSlotPosition = 0, ySlotPosition = 0] = staticCutout?.position ?? []
-  const y = ySlotPosition + Y_ADJUSTMENT
-  const x = xSlotPosition + COLUMN_2_X_ADJUSTMENT
-
-  return (
-    <RobotCoordsForeignObject
-      width={COLUMN_2_SINGLE_SLOT_FIXTURE_WIDTH}
-      height={FIXTURE_HEIGHT}
-      x={x}
-      y={y}
-      flexProps={{ flex: '1' }}
-      foreignObjectProps={{ flex: '1' }}
-    >
-      <Btn css={CONFIG_STYLE_READ_ONLY} cursor={'default'} onClick={() => {}}>
-        <Text css={TYPOGRAPHY.smallBodyTextSemiBold}>{label}</Text>
-      </Btn>
-    </RobotCoordsForeignObject>
-  )
-}

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

@@ -1,103 +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_1_X_ADJUSTMENT,
-  COLUMN_3_SINGLE_SLOT_FIXTURE_WIDTH,
-  COLUMN_3_X_ADJUSTMENT,
-  CONFIG_STYLE_EDITABLE,
-  CONFIG_STYLE_READ_ONLY,
-  CONFIG_STYLE_SELECTED,
-  FIXTURE_HEIGHT,
-  Y_ADJUSTMENT,
-} from './constants'
-
-import type {
-  CutoutFixtureId,
-  CutoutId,
-  DeckDefinition,
-} from '@opentrons/shared-data'
-
-// TODO(BC, 2024-03-21): This component is almost identical to HeaterShakerFixture, consider consolidating?
-
-const TEMPERATURE_MODULE_FIXTURE_DISPLAY_NAME = 'Temperature'
-
-interface TemperatureModuleFixtureProps {
-  deckDefinition: DeckDefinition
-  fixtureLocation: CutoutId
-  cutoutFixtureId: CutoutFixtureId
-  handleClickRemove?: (
-    fixtureLocation: CutoutId,
-    cutoutFixtureId: CutoutFixtureId
-  ) => void
-  selected?: boolean
-}
-
-export function TemperatureModuleFixture(
-  props: TemperatureModuleFixtureProps
-): 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 isColumnOne =
-    fixtureLocation === 'cutoutA1' ||
-    fixtureLocation === 'cutoutB1' ||
-    fixtureLocation === 'cutoutC1' ||
-    fixtureLocation === 'cutoutD1'
-  const xAdjustment = isColumnOne
-    ? COLUMN_1_X_ADJUSTMENT
-    : COLUMN_3_X_ADJUSTMENT
-  const x = xSlotPosition + xAdjustment
-
-  const y = ySlotPosition + Y_ADJUSTMENT
-
-  const editableStyle = selected ? CONFIG_STYLE_SELECTED : CONFIG_STYLE_EDITABLE
-
-  return (
-    <RobotCoordsForeignObject
-      width={COLUMN_3_SINGLE_SLOT_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}>
-          {TEMPERATURE_MODULE_FIXTURE_DISPLAY_NAME}
-        </Text>
-        {handleClickRemove != null ? (
-          <Icon name="remove" color={COLORS.white} size="2rem" />
-        ) : null}
-      </Btn>
-    </RobotCoordsForeignObject>
-  )
-}

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

@@ -1,89 +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_1_X_ADJUSTMENT,
-  COLUMN_3_SINGLE_SLOT_FIXTURE_WIDTH,
-  CONFIG_STYLE_EDITABLE,
-  CONFIG_STYLE_READ_ONLY,
-  CONFIG_STYLE_SELECTED,
-  THERMOCYCLER_FIXTURE_HEIGHT,
-  Y_ADJUSTMENT,
-} from './constants'
-
-import type {
-  CutoutFixtureId,
-  CutoutId,
-  DeckDefinition,
-} from '@opentrons/shared-data'
-
-interface ThermocyclerFixtureProps {
-  deckDefinition: DeckDefinition
-  fixtureLocation: CutoutId
-  cutoutFixtureId: CutoutFixtureId
-  handleClickRemove?: (
-    fixtureLocation: CutoutId,
-    cutoutFixtureId: CutoutFixtureId
-  ) => void
-  selected?: boolean
-}
-
-const THERMOCYCLER_FIXTURE_DISPLAY_NAME = 'Thermocycler'
-
-export function ThermocyclerFixture(
-  props: ThermocyclerFixtureProps
-): 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_1_X_ADJUSTMENT
-  const y = ySlotPosition + Y_ADJUSTMENT
-
-  const editableStyle = selected ? CONFIG_STYLE_SELECTED : CONFIG_STYLE_EDITABLE
-  return (
-    <RobotCoordsForeignObject
-      width={COLUMN_3_SINGLE_SLOT_FIXTURE_WIDTH}
-      height={THERMOCYCLER_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}>
-          {THERMOCYCLER_FIXTURE_DISPLAY_NAME}
-        </Text>
-        {handleClickRemove != null ? (
-          <Icon name="remove" color={COLORS.white} size="2rem" />
-        ) : null}
-      </Btn>
-    </RobotCoordsForeignObject>
-  )
-}

package/src/hardware-sim/DeckConfigurator/TrashBinConfigFixture.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_1_X_ADJUSTMENT,
-  COLUMN_3_SINGLE_SLOT_FIXTURE_WIDTH,
-  COLUMN_3_X_ADJUSTMENT,
-  CONFIG_STYLE_EDITABLE,
-  CONFIG_STYLE_READ_ONLY,
-  CONFIG_STYLE_SELECTED,
-  FIXTURE_HEIGHT,
-  TRASH_BIN_DISPLAY_NAME,
-  Y_ADJUSTMENT,
-} from './constants'
-
-import type {
-  CutoutFixtureId,
-  CutoutId,
-  DeckDefinition,
-} from '@opentrons/shared-data'
-
-interface TrashBinConfigFixtureProps {
-  deckDefinition: DeckDefinition
-  fixtureLocation: CutoutId
-  cutoutFixtureId: CutoutFixtureId
-  handleClickRemove?: (
-    fixtureLocation: CutoutId,
-    cutoutFixtureId: CutoutFixtureId
-  ) => void
-  selected?: boolean
-}
-
-export function TrashBinConfigFixture(
-  props: TrashBinConfigFixtureProps
-): JSX.Element {
-  const {
-    deckDefinition,
-    handleClickRemove,
-    fixtureLocation,
-    cutoutFixtureId,
-    selected = false,
-  } = props
-
-  const trashBinCutout = 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] = trashBinCutout?.position ?? []
-
-  const isColumnOne =
-    fixtureLocation === 'cutoutA1' ||
-    fixtureLocation === 'cutoutB1' ||
-    fixtureLocation === 'cutoutC1' ||
-    fixtureLocation === 'cutoutD1'
-  const xAdjustment = isColumnOne
-    ? COLUMN_1_X_ADJUSTMENT
-    : COLUMN_3_X_ADJUSTMENT
-  const x = xSlotPosition + xAdjustment
-
-  const y = ySlotPosition + Y_ADJUSTMENT
-
-  const editableStyle = selected ? CONFIG_STYLE_SELECTED : CONFIG_STYLE_EDITABLE
-  return (
-    <RobotCoordsForeignObject
-      width={COLUMN_3_SINGLE_SLOT_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}>
-          {TRASH_BIN_DISPLAY_NAME}
-        </Text>
-        {handleClickRemove != null ? (
-          <Icon name="remove" color={COLORS.white} size="2rem" />
-        ) : null}
-      </Btn>
-    </RobotCoordsForeignObject>
-  )
-}