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

package/src/hardware-sim/BaseDeck/SingleSlotFixture.tsx

@@ -1,198 +0,0 @@
-import { SlotBase } from './SlotBase'
-import { SlotClip } from './SlotClip'
-
-import type { SVGProps } from 'react'
-import type {
-  CutoutId,
-  DeckDefinition,
-  ModuleType,
-} from '@opentrons/shared-data'
-
-interface SingleSlotFixtureProps extends SVGProps<SVGGElement> {
-  cutoutId: CutoutId
-  deckDefinition: DeckDefinition
-  moduleType?: ModuleType
-  fixtureBaseColor?: SVGProps<SVGPathElement>['fill']
-  slotClipColor?: SVGProps<SVGPathElement>['stroke']
-  showExpansion?: boolean
-}
-
-export function SingleSlotFixture(
-  props: SingleSlotFixtureProps
-): JSX.Element | null {
-  const {
-    cutoutId,
-    deckDefinition,
-    fixtureBaseColor,
-    slotClipColor,
-    showExpansion = false,
-    ...restProps
-  } = props
-
-  const cutoutDef = deckDefinition?.locations.cutouts.find(
-    s => s.id === cutoutId
-  )
-  if (cutoutDef == null) {
-    console.warn(
-      `cannot render SingleSlotFixture, no cutout named: ${cutoutDef} in deck def ${deckDefinition?.otId}`
-    )
-    return null
-  }
-
-  const contentsByCutoutLocation: {
-    [cutoutId in CutoutId]: JSX.Element
-  } = {
-    cutoutA1: (
-      <>
-        {showExpansion ? (
-          <SlotBase
-            fill={fixtureBaseColor}
-            d="M-97.8,496.6h239c2.3,0,4.2-1.9,4.2-4.2v-70c0-2.3-1.9-4.2-4.2-4.2h-239c-2.3,0-4.2,1.9-4.2,4.2v70 C-102,494.7-100.1,496.6-97.8,496.6z"
-          />
-        ) : null}
-        <SlotBase
-          fill={fixtureBaseColor}
-          d="M-97.7,417.1h238.8c2.4,0,4.3-1.9,4.3-4.3v-97.4c0-2.4-1.9-4.3-4.3-4.3H-97.7c-2.4,0-4.3,1.9-4.3,4.3v97.4 C-102,415.1-100.1,417.1-97.7,417.1z"
-        />
-        <SlotClip d="M-1.9,398.9V409H8.9" stroke={slotClipColor} />
-        <SlotClip d="M-1.9,329.8v-10.5H8.7" stroke={slotClipColor} />
-        <SlotClip d="M129.9,398.9V409h-10.8" stroke={slotClipColor} />
-        <SlotClip d="M129.9,329.8v-10.7h-10.8" stroke={slotClipColor} />
-      </>
-    ),
-    cutoutA2: (
-      <>
-        <SlotBase
-          d="M150.8,417.1h154.3c2.4,0,4.3-1.9,4.3-4.3v-97.4c0-2.4-1.9-4.3-4.3-4.3H150.8c-2.4,0-4.3,1.9-4.3,4.3v97.4C146.5,415.1,148.4,417.1,150.8,417.1z"
-          fill={fixtureBaseColor}
-        />
-        <SlotClip d="M162.1,398.9V409h10.8" stroke={slotClipColor} />,
-        <SlotClip d="M162.1,329.8v-10.5h10.6" stroke={slotClipColor} />,
-        <SlotClip d="M293.9,398.9V409h-10.8" stroke={slotClipColor} />,
-        <SlotClip d="M293.9,329.8v-10.7h-10.8" stroke={slotClipColor} />
-      </>
-    ),
-    cutoutA3: (
-      <>
-        <SlotBase
-          d="M314.8,417.1h238.9c2.4,0,4.3-1.9,4.3-4.3v-97.4c0-2.4-1.9-4.3-4.3-4.3H314.8c-2.4,0-4.3,1.9-4.3,4.3v97.4C310.5,415.1,312.4,417.1,314.8,417.1z"
-          fill={fixtureBaseColor}
-        />
-        <SlotClip d="M326,398.9V409h10.8" stroke={slotClipColor} />,
-        <SlotClip d="M326,329.8v-10.5h10.6" stroke={slotClipColor} />,
-        <SlotClip d="M457.8,398.9V409H447" stroke={slotClipColor} />,
-        <SlotClip d="M457.8,329.8v-10.7H447" stroke={slotClipColor} />
-      </>
-    ),
-    cutoutB1: (
-      <>
-        <SlotBase
-          d="M-97.7,310h238.8c2.4,0,4.3-1.9,4.3-4.3v-97.2c0-2.4-1.9-4.3-4.3-4.3H-97.7c-2.4,0-4.3,1.9-4.3,4.3v97.2C-102,308.1-100.1,310-97.7,310z"
-          fill={fixtureBaseColor}
-        />
-        <SlotClip d="M-1.9,291.9V302H8.9" stroke={slotClipColor} />,
-        <SlotClip d="M-1.9,222.8v-10.5H8.7" stroke={slotClipColor} />,
-        <SlotClip d="M129.9,291.9V302h-10.8" stroke={slotClipColor} />,
-        <SlotClip d="M129.9,222.8v-10.7h-10.8" stroke={slotClipColor} />
-      </>
-    ),
-    cutoutB2: (
-      <>
-        <SlotBase
-          d="M150.8,310h154.3c2.4,0,4.3-1.9,4.3-4.3v-97.2c0-2.4-1.9-4.3-4.3-4.3H150.8c-2.4,0-4.3,1.9-4.3,4.3v97.2C146.5,308.1,148.4,310,150.8,310z"
-          fill={fixtureBaseColor}
-        />
-        <SlotClip d="M162.1,291.9V302h10.8" stroke={slotClipColor} />,
-        <SlotClip d="M162.1,222.8v-10.5h10.6" stroke={slotClipColor} />,
-        <SlotClip d="M293.9,291.9V302h-10.8" stroke={slotClipColor} />,
-        <SlotClip d="M293.9,222.8v-10.7h-10.8" stroke={slotClipColor} />
-      </>
-    ),
-    cutoutB3: (
-      <>
-        <SlotBase
-          d="M314.8,310h238.9c2.4,0,4.3-1.9,4.3-4.3v-97.2c0-2.4-1.9-4.3-4.3-4.3H314.8c-2.4,0-4.3,1.9-4.3,4.3v97.2C310.5,308.1,312.4,310,314.8,310z"
-          fill={fixtureBaseColor}
-        />
-        <SlotClip d="M326,291.9V302h10.8" stroke={slotClipColor} />,
-        <SlotClip d="M326,222.8v-10.5h10.6" stroke={slotClipColor} />,
-        <SlotClip d="M457.8,291.9V302H447" stroke={slotClipColor} />,
-        <SlotClip d="M457.8,222.8v-10.7H447" stroke={slotClipColor} />
-      </>
-    ),
-    cutoutC1: (
-      <>
-        <SlotBase
-          d="M-97.7,203.1h238.8c2.4,0,4.3-1.9,4.3-4.3v-97.4c0-2.4-1.9-4.3-4.3-4.3H-97.7c-2.4,0-4.3,1.9-4.3,4.3v97.4C-102,201.2-100.1,203.1-97.7,203.1z"
-          fill={fixtureBaseColor}
-        />
-        <SlotClip d="M-1.9,185v10.1H8.9" stroke={slotClipColor} />
-        <SlotClip d="M-1.9,115.8v-10.5H8.7" stroke={slotClipColor} />
-        <SlotClip d="M129.9,185v10.1h-10.8" stroke={slotClipColor} />
-        <SlotClip d="M129.9,115.8v-10.7h-10.8" stroke={slotClipColor} />
-      </>
-    ),
-    cutoutC2: (
-      <>
-        <SlotBase
-          d="M150.8,203.1h154.3c2.4,0,4.3-1.9,4.3-4.3v-97.4c0-2.4-1.9-4.3-4.3-4.3H150.8c-2.4,0-4.3,1.9-4.3,4.3v97.4C146.5,201.2,148.4,203.1,150.8,203.1z"
-          fill={fixtureBaseColor}
-        />
-        <SlotClip d="M162.1,185v10.1h10.8" stroke={slotClipColor} />,
-        <SlotClip d="M162.1,115.8v-10.5h10.6" stroke={slotClipColor} />,
-        <SlotClip d="M293.9,185v10.1h-10.8" stroke={slotClipColor} />,
-        <SlotClip d="M293.9,115.8v-10.7h-10.8" stroke={slotClipColor} />
-      </>
-    ),
-    cutoutC3: (
-      <>
-        <SlotBase
-          d="M314.8,203.1h238.9c2.4,0,4.3-1.9,4.3-4.3v-97.4c0-2.4-1.9-4.3-4.3-4.3H314.8c-2.4,0-4.3,1.9-4.3,4.3v97.4C310.5,201.2,312.4,203.1,314.8,203.1z"
-          fill={fixtureBaseColor}
-        />
-        <SlotClip d="M326,185v10.1h10.8" stroke={slotClipColor} />,
-        <SlotClip d="M326,115.8v-10.5h10.6" stroke={slotClipColor} />,
-        <SlotClip d="M457.8,185v10.1H447" stroke={slotClipColor} />,
-        <SlotClip d="M457.8,115.8v-10.7H447" stroke={slotClipColor} />
-      </>
-    ),
-    cutoutD1: (
-      <>
-        <SlotBase
-          fill={fixtureBaseColor}
-          d="M-97.7,96.1h238.8c2.4,0,4.3-1.9,4.3-4.3V-5.6c0-2.4-1.9-4.3-4.3-4.3H-97.7c-2.4,0-4.3,1.9-4.3,4.3v97.4C-102,94.2-100.1,96.1-97.7,96.1z"
-        />
-        <SlotClip d="M-1.9,77.9V88H8.9" stroke={slotClipColor} />
-        <SlotClip d="M-1.9,8.8V-1.7H8.7" stroke={slotClipColor} />
-        <SlotClip d="M129.9,77.9V88h-10.8" stroke={slotClipColor} />
-        <SlotClip d="M129.9,8.8V-1.9h-10.8" stroke={slotClipColor} />
-      </>
-    ),
-    cutoutD2: (
-      <>
-        <SlotBase
-          fill={fixtureBaseColor}
-          d="M150.8,96.1h154.3c2.4,0,4.3-1.9,4.3-4.3V-5.6c0-2.4-1.9-4.3-4.3-4.3H150.8c-2.4,0-4.3,1.9-4.3,4.3v97.4C146.5,94.2,148.4,96.1,150.8,96.1z"
-        />
-        <SlotClip d="M162.1,77.9V88h10.8" stroke={slotClipColor} />
-        <SlotClip d="M162.1,8.8V-1.7h10.6" stroke={slotClipColor} />
-        <SlotClip d="M293.9,77.9V88h-10.8" stroke={slotClipColor} />
-        <SlotClip d="M293.9,8.8V-1.9h-10.8" stroke={slotClipColor} />
-      </>
-    ),
-    cutoutD3: (
-      <>
-        <SlotBase
-          d="M314.8,96.1h238.9c2.4,0,4.3-1.9,4.3-4.3V-5.6c0-2.4-1.9-4.3-4.3-4.3H314.8c-2.4,0-4.3,1.9-4.3,4.3v97.4C310.5,94.2,312.4,96.1,314.8,96.1z"
-          fill={fixtureBaseColor}
-        />
-        <SlotClip d="M326,77.9V88h10.8" stroke={slotClipColor} />
-        <SlotClip d="M326,8.8V-1.7h10.6" stroke={slotClipColor} />
-        <SlotClip d="M457.8,77.9V88H447" stroke={slotClipColor} />
-        <SlotClip d="M457.8,8.8V-1.9H447" stroke={slotClipColor} />
-      </>
-    ),
-  }
-
-  return <g {...restProps}>{contentsByCutoutLocation[cutoutId]}</g>
-}

package/src/hardware-sim/BaseDeck/SlotBase.tsx

@@ -1,5 +0,0 @@
-import type { SVGProps } from 'react'
-
-export function SlotBase(props: SVGProps<SVGPathElement>): JSX.Element {
-  return <path fill="#CCCCCC" {...props} />
-}

package/src/hardware-sim/BaseDeck/SlotClip.tsx

@@ -1,15 +0,0 @@
-import { COLORS } from '../../helix-design-system'
-
-import type { SVGProps } from 'react'
-
-export function SlotClip(props: SVGProps<SVGPathElement>): JSX.Element {
-  return (
-    <path
-      fill="none"
-      stroke={COLORS.black90}
-      strokeWidth={3}
-      strokeOpacity={0.7}
-      {...props}
-    />
-  )
-}

package/src/hardware-sim/BaseDeck/StagingAreaFixture.tsx

@@ -1,113 +0,0 @@
-import { SlotBase } from './SlotBase'
-import { SlotClip } from './SlotClip'
-
-import type { SVGProps } from 'react'
-import type { DeckDefinition, ModuleType } from '@opentrons/shared-data'
-
-export type StagingAreaLocation =
-  | 'cutoutA3'
-  | 'cutoutB3'
-  | 'cutoutC3'
-  | 'cutoutD3'
-
-interface StagingAreaFixtureProps extends SVGProps<SVGGElement> {
-  cutoutId: StagingAreaLocation
-  deckDefinition: DeckDefinition
-  moduleType?: ModuleType
-  fixtureBaseColor?: SVGProps<SVGPathElement>['fill']
-  slotClipColor?: SVGProps<SVGPathElement>['stroke']
-  showExtensions?: boolean
-}
-
-export function StagingAreaFixture(
-  props: StagingAreaFixtureProps
-): JSX.Element | null {
-  const {
-    cutoutId,
-    deckDefinition,
-    fixtureBaseColor,
-    slotClipColor,
-    ...restProps
-  } = props
-
-  const cutoutDef = deckDefinition?.locations.cutouts.find(
-    s => s.id === cutoutId
-  )
-  if (cutoutDef == null) {
-    console.warn(
-      `cannot render StagingAreaFixture, no cutout named: ${cutoutDef} in deck def ${deckDefinition?.otId}`
-    )
-    return null
-  }
-
-  const contentsByCutoutLocation: {
-    [cutoutId in StagingAreaLocation]: JSX.Element
-  } = {
-    cutoutA3: (
-      <>
-        <SlotBase
-          d="M314.8,417.1h329.9c2.4,0,4.3-1.9,4.3-4.3v-97.4c0-2.4-1.9-4.3-4.3-4.3H314.8c-2.4,0-4.3,1.9-4.3,4.3v97.4C310.5,415.1,312.4,417.1,314.8,417.1z"
-          fill={fixtureBaseColor}
-        />
-        <SlotClip d="M326,398.9V409h10.8" stroke={slotClipColor} />,
-        <SlotClip d="M326,329.8v-10.5h10.6" stroke={slotClipColor} />,
-        <SlotClip d="M457.8,398.9V409H447" stroke={slotClipColor} />,
-        <SlotClip d="M457.8,329.8v-10.7H447" stroke={slotClipColor} />
-        <SlotClip d="M490,398.9v10.1h10.8" stroke={slotClipColor} />,
-        <SlotClip d="M490,329.8v-10.5h10.6" stroke={slotClipColor} />,
-        <SlotClip d="M621.8,398.9v10.1h-10.8" stroke={slotClipColor} />,
-        <SlotClip d="M621.8,329.8v-10.7h-10.8" stroke={slotClipColor} />
-      </>
-    ),
-    cutoutB3: (
-      <>
-        <SlotBase
-          d="M314.8,310h329.9c2.4,0,4.3-1.9,4.3-4.3v-97.2c0-2.4-1.9-4.3-4.3-4.3H314.8c-2.4,0-4.3,1.9-4.3,4.3v97.2C310.5,308.1,312.4,310,314.8,310z"
-          fill={fixtureBaseColor}
-        />
-        <SlotClip d="M326,291.9V302h10.8" stroke={slotClipColor} />,
-        <SlotClip d="M326,222.8v-10.5h10.6" stroke={slotClipColor} />,
-        <SlotClip d="M457.8,291.9V302H447" stroke={slotClipColor} />,
-        <SlotClip d="M457.8,222.8v-10.7H447" stroke={slotClipColor} />
-        <SlotClip d="M490,291.9v10.1h10.8" stroke={slotClipColor} />,
-        <SlotClip d="M490,222.8v-10.5h10.6" stroke={slotClipColor} />,
-        <SlotClip d="M621.8,291.9v10.1h-10.8" stroke={slotClipColor} />,
-        <SlotClip d="M621.8,222.8v-10.7h-10.8" stroke={slotClipColor} />
-      </>
-    ),
-    cutoutC3: (
-      <>
-        <SlotBase
-          d="M314.8,203.1h329.9c2.4,0,4.3-1.9,4.3-4.3v-97.4c0-2.4-1.9-4.3-4.3-4.3H314.8c-2.4,0-4.3,1.9-4.3,4.3v97.4C310.5,201.2,312.4,203.1,314.8,203.1z"
-          fill={fixtureBaseColor}
-        />
-        <SlotClip d="M326,185v10.1h10.8" stroke={slotClipColor} />,
-        <SlotClip d="M326,115.8v-10.5h10.6" stroke={slotClipColor} />,
-        <SlotClip d="M457.8,185v10.1H447" stroke={slotClipColor} />,
-        <SlotClip d="M457.8,115.8v-10.7H447" stroke={slotClipColor} />
-        <SlotClip d="M490,185v10.1h10.8" stroke={slotClipColor} />,
-        <SlotClip d="M490,115.8v-10.5h10.6" stroke={slotClipColor} />,
-        <SlotClip d="M621.8,185v10.1h-10.8" stroke={slotClipColor} />,
-        <SlotClip d="M621.8,115.8v-10.7h-10.8" stroke={slotClipColor} />
-      </>
-    ),
-    cutoutD3: (
-      <>
-        <SlotBase
-          d="M314.8,96.1h329.9c2.4,0,4.3-1.9,4.3-4.3V-5.6c0-2.4-1.9-4.3-4.3-4.3H314.8c-2.4,0-4.3,1.9-4.3,4.3v97.4C310.5,94.2,312.4,96.1,314.8,96.1z"
-          fill={fixtureBaseColor}
-        />
-        <SlotClip d="M326,77.9V88h10.8" stroke={slotClipColor} />
-        <SlotClip d="M326,8.8V-1.7h10.6" stroke={slotClipColor} />
-        <SlotClip d="M457.8,77.9V88H447" stroke={slotClipColor} />
-        <SlotClip d="M457.8,8.8V-1.9H447" stroke={slotClipColor} />
-        <SlotClip d="M490,77.9v10.1h10.8" stroke={slotClipColor} />,
-        <SlotClip d="M490,8.8v-10.5h10.6" stroke={slotClipColor} />,
-        <SlotClip d="M621.8,77.9v10.1h-10.8" stroke={slotClipColor} />,
-        <SlotClip d="M621.8,8.8v-10.7h-10.8" stroke={slotClipColor} />
-      </>
-    ),
-  }
-
-  return <g {...restProps}>{contentsByCutoutLocation[cutoutId]}</g>
-}

package/src/hardware-sim/BaseDeck/WasteChuteFixture.tsx

@@ -1,158 +0,0 @@
-import { COLORS } from '../../helix-design-system'
-import { Icon } from '../../icons'
-import { DeckLabelSet } from '../../organisms'
-import { Flex, Text } from '../../primitives'
-import {
-  ALIGN_CENTER,
-  DIRECTION_COLUMN,
-  JUSTIFY_CENTER,
-  TEXT_ALIGN_CENTER,
-} from '../../styles'
-import { SPACING, TYPOGRAPHY } from '../../ui-style-constants'
-import { RobotCoordsForeignObject } from '../Deck/RobotCoordsForeignObject'
-import { SlotBase } from './SlotBase'
-
-import type { SVGProps } from 'react'
-import type {
-  DeckDefinition,
-  ModuleType,
-  WASTE_CHUTE_CUTOUT,
-} from '@opentrons/shared-data'
-import type { DeckLabelProps } from '../../molecules'
-
-const WASTE_CHUTE_WIDTH = 130
-const WASTE_CHUTE_HEIGHT = 138
-const WASTE_CHUTE_X = 322
-const WASTE_CHUTE_Y = -51
-const TAG_HEIGHT = 28
-interface WasteChuteFixtureProps extends SVGProps<SVGGElement> {
-  cutoutId: typeof WASTE_CHUTE_CUTOUT
-  deckDefinition: DeckDefinition
-  moduleType?: ModuleType
-  fixtureBaseColor?: SVGProps<SVGPathElement>['fill']
-  wasteChuteColor?: string
-  showExtensions?: boolean
-  /** optional prop to highlight the border of the wasteChute */
-  showHighlight?: boolean
-  /** optional tag info to display a tag below the waste */
-  tagInfo?: DeckLabelProps[]
-}
-
-export function WasteChuteFixture(
-  props: WasteChuteFixtureProps
-): JSX.Element | null {
-  const {
-    cutoutId,
-    deckDefinition,
-    fixtureBaseColor = COLORS.grey35,
-    wasteChuteColor = COLORS.grey50,
-    showHighlight,
-    tagInfo,
-    ...restProps
-  } = props
-
-  if (cutoutId !== 'cutoutD3') {
-    console.warn(
-      `cannot render WasteChuteFixture in given cutout location ${cutoutId}`
-    )
-    return null
-  }
-
-  const cutoutDef = deckDefinition?.locations.cutouts.find(
-    s => s.id === cutoutId
-  )
-  if (cutoutDef == null) {
-    console.warn(
-      `cannot render WasteChuteFixture, no cutout named: ${cutoutDef} in deck def ${deckDefinition?.otId}`
-    )
-    return null
-  }
-
-  return (
-    <g {...restProps}>
-      <SlotBase
-        d="M314.8,96.1h238.9c2.4,0,4.3-1.9,4.3-4.3V-5.6c0-2.4-1.9-4.3-4.3-4.3H314.8c-2.4,0-4.3,1.9-4.3,4.3v97.4C310.5,94.2,312.4,96.1,314.8,96.1z"
-        fill={fixtureBaseColor}
-      />
-      <WasteChute
-        backgroundColor={wasteChuteColor}
-        wasteIconColor={fixtureBaseColor}
-        showHighlight={showHighlight}
-        tagInfo={tagInfo}
-      />
-    </g>
-  )
-}
-
-interface WasteChuteProps {
-  wasteIconColor: string
-  backgroundColor: string
-  showHighlight?: boolean
-  tagInfo?: DeckLabelProps[]
-  //  optional opacity and overlay to change the overlay container over the WasteChute container
-  //  currently used in PD's BlockedSlot for drag/drop
-  overlay?: JSX.Element
-  opacity?: string
-}
-
-/**
- * a deck map foreign object representing the physical location of the waste chute connected to the deck
- */
-export function WasteChute(props: WasteChuteProps): JSX.Element {
-  const {
-    wasteIconColor,
-    backgroundColor,
-    showHighlight,
-    tagInfo,
-    overlay,
-    opacity,
-  } = props
-
-  return (
-    <>
-      <RobotCoordsForeignObject
-        width={WASTE_CHUTE_WIDTH}
-        height={WASTE_CHUTE_HEIGHT}
-        x={WASTE_CHUTE_X}
-        y={-51}
-        flexProps={{ flex: '1' }}
-        foreignObjectProps={{ opacity: opacity ?? '1.0', flex: '1' }}
-      >
-        {overlay != null ? (
-          overlay
-        ) : (
-          <Flex
-            alignItems={ALIGN_CENTER}
-            backgroundColor={backgroundColor}
-            borderRadius="6px"
-            color={wasteIconColor}
-            flexDirection={DIRECTION_COLUMN}
-            gridGap={SPACING.spacing4}
-            justifyContent={JUSTIFY_CENTER}
-            padding={SPACING.spacing8}
-            width="100%"
-            border={showHighlight ? `3px solid ${COLORS.blue50}` : 'none'}
-          >
-            <Icon name="trash" color={wasteIconColor} height="2rem" />
-            <Text
-              color={COLORS.white}
-              textAlign={TEXT_ALIGN_CENTER}
-              css={TYPOGRAPHY.bodyTextSemiBold}
-            >
-              Waste chute
-            </Text>
-          </Flex>
-        )}
-      </RobotCoordsForeignObject>
-      {tagInfo != null && tagInfo.length > 0 ? (
-        <DeckLabelSet
-          width={WASTE_CHUTE_WIDTH}
-          height={WASTE_CHUTE_HEIGHT}
-          x={WASTE_CHUTE_X}
-          y={WASTE_CHUTE_Y - TAG_HEIGHT}
-          deckLabels={tagInfo}
-        />
-      ) : null}
-    </>
-  )
-}

package/src/hardware-sim/BaseDeck/WasteChuteStagingAreaFixture.tsx

@@ -1,73 +0,0 @@
-import { WASTE_CHUTE_CUTOUT } from '@opentrons/shared-data'
-
-import { COLORS } from '../../helix-design-system'
-import { SlotBase } from './SlotBase'
-import { SlotClip } from './SlotClip'
-import { WasteChute } from './WasteChuteFixture'
-
-import type { SVGProps } from 'react'
-import type { DeckDefinition, ModuleType } from '@opentrons/shared-data'
-import type { DeckLabelProps } from '../../molecules'
-
-interface WasteChuteStagingAreaFixtureProps extends SVGProps<SVGGElement> {
-  cutoutId: typeof WASTE_CHUTE_CUTOUT
-  deckDefinition: DeckDefinition
-  moduleType?: ModuleType
-  fixtureBaseColor?: SVGProps<SVGPathElement>['fill']
-  slotClipColor?: SVGProps<SVGPathElement>['stroke']
-  wasteChuteColor?: string
-  showExtensions?: boolean
-  showHighlight?: boolean
-  tagInfo?: DeckLabelProps[]
-}
-
-export function WasteChuteStagingAreaFixture(
-  props: WasteChuteStagingAreaFixtureProps
-): JSX.Element | null {
-  const {
-    cutoutId,
-    deckDefinition,
-    fixtureBaseColor = COLORS.grey35,
-    slotClipColor = COLORS.grey60,
-    wasteChuteColor = COLORS.grey50,
-    showHighlight,
-    tagInfo,
-    ...restProps
-  } = props
-
-  if (cutoutId !== WASTE_CHUTE_CUTOUT) {
-    console.warn(
-      `cannot render WasteChuteStagingAreaFixture in given cutout location ${cutoutId}`
-    )
-    return null
-  }
-
-  const cutoutDef = deckDefinition?.locations.cutouts.find(
-    s => s.id === cutoutId
-  )
-  if (cutoutDef == null) {
-    console.warn(
-      `cannot render WasteChuteStagingAreaFixture, no cutout named: ${cutoutDef} in deck def ${deckDefinition?.otId}`
-    )
-    return null
-  }
-
-  return (
-    <g {...restProps}>
-      <SlotBase
-        d="M314.8,96.1h329.9c2.4,0,4.3-1.9,4.3-4.3V-5.6c0-2.4-1.9-4.3-4.3-4.3H314.8c-2.4,0-4.3,1.9-4.3,4.3v97.4C310.5,94.2,312.4,96.1,314.8,96.1z"
-        fill={fixtureBaseColor}
-      />
-      <SlotClip d="M490,77.9v10.1h10.8" stroke={slotClipColor} />,
-      <SlotClip d="M490,8.8v-10.5h10.6" stroke={slotClipColor} />,
-      <SlotClip d="M621.8,77.9v10.1h-10.8" stroke={slotClipColor} />,
-      <SlotClip d="M621.8,8.8v-10.7h-10.8" stroke={slotClipColor} />
-      <WasteChute
-        wasteIconColor={fixtureBaseColor}
-        backgroundColor={wasteChuteColor}
-        showHighlight={showHighlight}
-        tagInfo={tagInfo}
-      />
-    </g>
-  )
-}