@opentrons/components 0.1.6-alpha.2 → 0.1.6-alpha.21

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

@@ -0,0 +1,130 @@
+import { Icon } from '../../icons'
+import { Btn, Text } from '../../primitives'
+import { TYPOGRAPHY } from '../../ui-style-constants'
+import { COLORS } from '../../helix-design-system'
+import { RobotCoordsForeignObject } from '../Deck/RobotCoordsForeignObject'
+import {
+  COLUMN_1_SINGLE_SLOT_FIXTURE_WIDTH,
+  COLUMN_2_SINGLE_SLOT_FIXTURE_WIDTH,
+  COLUMN_3_SINGLE_SLOT_FIXTURE_WIDTH,
+  COLUMN_1_X_ADJUSTMENT,
+  COLUMN_2_X_ADJUSTMENT,
+  COLUMN_3_X_ADJUSTMENT,
+  FIXTURE_HEIGHT,
+  Y_ADJUSTMENT,
+  CONFIG_STYLE_EDITABLE,
+  CONFIG_STYLE_READ_ONLY,
+  STAGING_AREA_FIXTURE_WIDTH,
+  CONFIG_STYLE_SELECTED,
+} 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

@@ -0,0 +1,89 @@
+import { Icon } from '../../icons'
+import { Btn, Text } from '../../primitives'
+import { TYPOGRAPHY } from '../../ui-style-constants'
+import { COLORS } from '../../helix-design-system'
+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

@@ -0,0 +1,54 @@
+import { Btn, Text } from '../../primitives'
+import { TYPOGRAPHY } from '../../ui-style-constants'
+import { RobotCoordsForeignObject } from '../Deck/RobotCoordsForeignObject'
+import {
+  CONFIG_STYLE_READ_ONLY,
+  FIXTURE_HEIGHT,
+  COLUMN_2_SINGLE_SLOT_FIXTURE_WIDTH,
+  Y_ADJUSTMENT,
+  COLUMN_2_X_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

@@ -0,0 +1,103 @@
+import { Icon } from '../../icons'
+import { Btn, Text } from '../../primitives'
+import { TYPOGRAPHY } from '../../ui-style-constants'
+import { COLORS } from '../../helix-design-system'
+import { RobotCoordsForeignObject } from '../Deck/RobotCoordsForeignObject'
+import {
+  COLUMN_1_X_ADJUSTMENT,
+  COLUMN_3_X_ADJUSTMENT,
+  CONFIG_STYLE_EDITABLE,
+  CONFIG_STYLE_READ_ONLY,
+  FIXTURE_HEIGHT,
+  COLUMN_3_SINGLE_SLOT_FIXTURE_WIDTH,
+  Y_ADJUSTMENT,
+  CONFIG_STYLE_SELECTED,
+} 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

@@ -0,0 +1,89 @@
+import { Icon } from '../../icons'
+import { Btn, Text } from '../../primitives'
+import { TYPOGRAPHY } from '../../ui-style-constants'
+import { COLORS } from '../../helix-design-system'
+import { RobotCoordsForeignObject } from '../Deck/RobotCoordsForeignObject'
+import {
+  COLUMN_1_X_ADJUSTMENT,
+  CONFIG_STYLE_EDITABLE,
+  CONFIG_STYLE_READ_ONLY,
+  COLUMN_3_SINGLE_SLOT_FIXTURE_WIDTH,
+  Y_ADJUSTMENT,
+  THERMOCYCLER_FIXTURE_HEIGHT,
+  CONFIG_STYLE_SELECTED,
+} 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

@@ -0,0 +1,99 @@
+import { Icon } from '../../icons'
+import { Btn, Text } from '../../primitives'
+import { TYPOGRAPHY } from '../../ui-style-constants'
+import { COLORS } from '../../helix-design-system'
+import { RobotCoordsForeignObject } from '../Deck/RobotCoordsForeignObject'
+import {
+  COLUMN_1_X_ADJUSTMENT,
+  COLUMN_3_X_ADJUSTMENT,
+  CONFIG_STYLE_EDITABLE,
+  CONFIG_STYLE_READ_ONLY,
+  FIXTURE_HEIGHT,
+  COLUMN_3_SINGLE_SLOT_FIXTURE_WIDTH,
+  TRASH_BIN_DISPLAY_NAME,
+  Y_ADJUSTMENT,
+  CONFIG_STYLE_SELECTED,
+} 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>
+  )
+}

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

@@ -0,0 +1,96 @@
+import { Icon } from '../../icons'
+import { Btn, Text } from '../../primitives'
+import { TYPOGRAPHY } from '../../ui-style-constants'
+import { COLORS } from '../../helix-design-system'
+import { RobotCoordsForeignObject } from '../Deck/RobotCoordsForeignObject'
+import {
+  COLUMN_3_X_ADJUSTMENT,
+  CONFIG_STYLE_EDITABLE,
+  CONFIG_STYLE_READ_ONLY,
+  FIXTURE_HEIGHT,
+  STAGING_AREA_FIXTURE_WIDTH,
+  COLUMN_3_SINGLE_SLOT_FIXTURE_WIDTH,
+  WASTE_CHUTE_DISPLAY_NAME,
+  Y_ADJUSTMENT,
+  CONFIG_STYLE_SELECTED,
+} from './constants'
+
+import type {
+  CutoutFixtureId,
+  CutoutId,
+  DeckDefinition,
+} from '@opentrons/shared-data'
+
+interface WasteChuteConfigFixtureProps {
+  deckDefinition: DeckDefinition
+  fixtureLocation: CutoutId
+  cutoutFixtureId: CutoutFixtureId
+  handleClickRemove?: (
+    fixtureLocation: CutoutId,
+    cutoutFixtureId: CutoutFixtureId
+  ) => void
+  hasStagingAreas?: boolean
+  selected?: boolean
+}
+
+export function WasteChuteConfigFixture(
+  props: WasteChuteConfigFixtureProps
+): JSX.Element {
+  const {
+    deckDefinition,
+    handleClickRemove,
+    fixtureLocation,
+    cutoutFixtureId,
+    hasStagingAreas = false,
+    selected = false,
+  } = props
+
+  const wasteChuteCutout = 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] =
+    wasteChuteCutout?.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={
+        hasStagingAreas
+          ? STAGING_AREA_FIXTURE_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}>
+          {WASTE_CHUTE_DISPLAY_NAME}
+        </Text>
+        {handleClickRemove != null ? (
+          <Icon name="remove" color={COLORS.white} size="2rem" />
+        ) : null}
+      </Btn>
+    </RobotCoordsForeignObject>
+  )
+}