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

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

@@ -0,0 +1,423 @@
+import { Fragment } from 'react'
+import {
+  getDeckDefFromRobotType,
+  getModuleDef2,
+  getPositionFromSlotId,
+  inferModuleOrientationFromXCoordinate,
+  OT2_ROBOT_TYPE,
+  MOVABLE_TRASH_CUTOUTS,
+  SINGLE_SLOT_FIXTURES,
+  STAGING_AREA_CUTOUTS,
+  STAGING_AREA_RIGHT_SLOT_FIXTURE,
+  TRASH_BIN_ADAPTER_FIXTURE,
+  WASTE_CHUTE_CUTOUT,
+  WASTE_CHUTE_ONLY_FIXTURES,
+  WASTE_CHUTE_STAGING_AREA_FIXTURES,
+  HEATERSHAKER_MODULE_V1,
+  MODULE_FIXTURES_BY_MODEL,
+  STAGING_AREA_SLOT_WITH_MAGNETIC_BLOCK_V1_FIXTURE,
+} from '@opentrons/shared-data'
+
+import { DeckInfoLabel } from '../../molecules/DeckInfoLabel'
+import { RobotCoordinateSpace } from '../RobotCoordinateSpace'
+import { Module } from '../Module'
+import { LabwareRender } from '../Labware'
+import { FlexTrash } from '../Deck/FlexTrash'
+import { DeckFromLayers } from '../Deck/DeckFromLayers'
+import { RobotCoordsForeignObject } from '../Deck/RobotCoordsForeignObject'
+import { SlotLabels } from '../Deck'
+import { COLORS } from '../../helix-design-system'
+
+import { SingleSlotFixture } from './SingleSlotFixture'
+import { StagingAreaFixture } from './StagingAreaFixture'
+import { WasteChuteFixture } from './WasteChuteFixture'
+import { WasteChuteStagingAreaFixture } from './WasteChuteStagingAreaFixture'
+
+import type { ComponentProps, ReactNode } from 'react'
+import type { Svg } from '../../primitives'
+import type {
+  CutoutFixtureId,
+  DeckConfiguration,
+  LabwareDefinition2,
+  LabwareLocation,
+  ModuleLocation,
+  ModuleModel,
+  RobotType,
+} from '@opentrons/shared-data'
+import type { TrashCutoutId } from '../Deck/FlexTrash'
+import type { StagingAreaLocation } from './StagingAreaFixture'
+import type { WellFill, WellGroup } from '../Labware'
+
+export interface LabwareOnDeck {
+  labwareLocation: LabwareLocation
+  definition: LabwareDefinition2
+  wellFill?: WellFill
+  missingTips?: WellGroup
+  /** generic prop to render self-positioned children for each labware */
+  labwareChildren?: ReactNode
+  onLabwareClick?: () => void
+  highlight?: boolean
+  highlightShadow?: boolean
+  stacked?: boolean
+}
+
+export interface ModuleOnDeck {
+  moduleModel: ModuleModel
+  moduleLocation: ModuleLocation
+  nestedLabwareDef?: LabwareDefinition2 | null
+  nestedLabwareWellFill?: WellFill
+  innerProps?: ComponentProps<typeof Module>['innerProps']
+  /** generic prop to render self-positioned children for each module */
+  moduleChildren?: ReactNode
+  onLabwareClick?: () => void
+  highlightLabware?: boolean
+  highlightShadowLabware?: boolean
+  stacked?: boolean
+}
+interface BaseDeckProps {
+  deckConfig: DeckConfiguration
+  robotType: RobotType
+  labwareOnDeck?: LabwareOnDeck[]
+  modulesOnDeck?: ModuleOnDeck[]
+  deckLayerBlocklist?: string[]
+  showExpansion?: boolean
+  lightFill?: string
+  mediumFill?: string
+  darkFill?: string
+  children?: ReactNode
+  showSlotLabels?: boolean
+  /** whether to make wrapping svg tag animatable via @react-spring/web, defaults to false */
+  animatedSVG?: boolean
+  /** extra props to pass to svg tag */
+  svgProps?: ComponentProps<typeof Svg>
+}
+
+const LABWARE_OFFSET_DISPLAY_THRESHOLD = 2
+
+export function BaseDeck(props: BaseDeckProps): JSX.Element {
+  const {
+    robotType,
+    modulesOnDeck = [],
+    labwareOnDeck = [],
+    lightFill = COLORS.grey30,
+    mediumFill = COLORS.grey50,
+    darkFill = COLORS.grey60,
+    deckLayerBlocklist = [],
+    deckConfig,
+    showExpansion = true,
+    children,
+    showSlotLabels = true,
+    animatedSVG = false,
+    svgProps = {},
+  } = props
+  const deckDef = getDeckDefFromRobotType(robotType)
+
+  const singleSlotFixtures = deckConfig.filter(
+    fixture =>
+      fixture.cutoutFixtureId != null &&
+      (SINGLE_SLOT_FIXTURES.includes(fixture.cutoutFixtureId) ||
+        // If module fixture is loaded, still visualize singleSlotFixture underneath for consistency
+        Object.entries(MODULE_FIXTURES_BY_MODEL)
+          .reduce<CutoutFixtureId[]>(
+            (acc, [_model, fixtures]) => [...acc, ...fixtures],
+            []
+          )
+          .includes(fixture.cutoutFixtureId))
+  )
+  const stagingAreaFixtures = deckConfig.filter(
+    fixture =>
+      (fixture.cutoutFixtureId === STAGING_AREA_RIGHT_SLOT_FIXTURE ||
+        fixture.cutoutFixtureId ===
+          STAGING_AREA_SLOT_WITH_MAGNETIC_BLOCK_V1_FIXTURE) &&
+      STAGING_AREA_CUTOUTS.includes(fixture.cutoutId)
+  )
+  const trashBinFixtures = deckConfig.filter(
+    fixture =>
+      fixture.cutoutFixtureId === TRASH_BIN_ADAPTER_FIXTURE &&
+      MOVABLE_TRASH_CUTOUTS.includes(fixture.cutoutId)
+  )
+  const wasteChuteOnlyFixtures = deckConfig.filter(
+    fixture =>
+      fixture.cutoutFixtureId != null &&
+      WASTE_CHUTE_ONLY_FIXTURES.includes(fixture.cutoutFixtureId) &&
+      fixture.cutoutId === WASTE_CHUTE_CUTOUT
+  )
+  const wasteChuteStagingAreaFixtures = deckConfig.filter(
+    fixture =>
+      fixture.cutoutFixtureId != null &&
+      WASTE_CHUTE_STAGING_AREA_FIXTURES.includes(fixture.cutoutFixtureId) &&
+      fixture.cutoutId === WASTE_CHUTE_CUTOUT
+  )
+
+  return (
+    <RobotCoordinateSpace
+      viewBox={`${deckDef.cornerOffsetFromOrigin[0]} ${deckDef.cornerOffsetFromOrigin[1]} ${deckDef.dimensions[0]} ${deckDef.dimensions[1]}`}
+      animated={animatedSVG}
+      {...svgProps}
+    >
+      {robotType === OT2_ROBOT_TYPE ? (
+        <DeckFromLayers
+          robotType={robotType}
+          layerBlocklist={deckLayerBlocklist}
+        />
+      ) : (
+        <>
+          {showSlotLabels ? (
+            <SlotLabels
+              robotType={robotType}
+              color={COLORS.black90}
+              show4thColumn={
+                stagingAreaFixtures.length > 0 ||
+                wasteChuteStagingAreaFixtures.length > 0 ||
+                modulesOnDeck.findIndex(
+                  module => module.moduleModel === 'absorbanceReaderV1'
+                ) >= 0
+              }
+            />
+          ) : null}
+          {singleSlotFixtures.map(fixture => (
+            <SingleSlotFixture
+              key={fixture.cutoutId}
+              cutoutId={fixture.cutoutId}
+              deckDefinition={deckDef}
+              slotClipColor={darkFill}
+              fixtureBaseColor={lightFill}
+              showExpansion={showExpansion}
+            />
+          ))}
+          {stagingAreaFixtures.map(fixture => (
+            <StagingAreaFixture
+              key={fixture.cutoutId}
+              cutoutId={fixture.cutoutId as StagingAreaLocation}
+              deckDefinition={deckDef}
+              slotClipColor={darkFill}
+              fixtureBaseColor={lightFill}
+            />
+          ))}
+          {trashBinFixtures.map(fixture => (
+            <Fragment key={fixture.cutoutId}>
+              <SingleSlotFixture
+                cutoutId={fixture.cutoutId}
+                deckDefinition={deckDef}
+                slotClipColor={COLORS.transparent}
+                fixtureBaseColor={lightFill}
+              />
+              <FlexTrash
+                robotType={robotType}
+                trashIconColor={lightFill}
+                trashCutoutId={fixture.cutoutId as TrashCutoutId}
+                backgroundColor={mediumFill}
+              />
+            </Fragment>
+          ))}
+          {wasteChuteOnlyFixtures.map(fixture => {
+            if (fixture.cutoutId === WASTE_CHUTE_CUTOUT) {
+              return (
+                <WasteChuteFixture
+                  key={fixture.cutoutId}
+                  cutoutId={fixture.cutoutId}
+                  deckDefinition={deckDef}
+                  fixtureBaseColor={lightFill}
+                  wasteChuteColor={mediumFill}
+                />
+              )
+            } else {
+              return null
+            }
+          })}
+          {wasteChuteStagingAreaFixtures.map(fixture => {
+            if (fixture.cutoutId === WASTE_CHUTE_CUTOUT) {
+              return (
+                <WasteChuteStagingAreaFixture
+                  key={fixture.cutoutId}
+                  cutoutId={fixture.cutoutId}
+                  deckDefinition={deckDef}
+                  slotClipColor={darkFill}
+                  fixtureBaseColor={lightFill}
+                  wasteChuteColor={mediumFill}
+                />
+              )
+            } else {
+              return null
+            }
+          })}
+        </>
+      )}
+      <>
+        {/* render modules, nested labware, and overlays */}
+        {modulesOnDeck.map(
+          ({
+            moduleModel,
+            moduleLocation,
+            nestedLabwareDef,
+            nestedLabwareWellFill,
+            innerProps,
+            moduleChildren,
+            onLabwareClick,
+            highlightLabware,
+            highlightShadowLabware,
+          }) => {
+            const slotPosition = getPositionFromSlotId(
+              moduleLocation.slotName,
+              deckDef
+            )
+            const moduleDef = getModuleDef2(moduleModel)
+            return slotPosition != null ? (
+              <Module
+                key={`${moduleModel} ${moduleLocation.slotName}`}
+                def={moduleDef}
+                x={slotPosition[0]}
+                y={slotPosition[1]}
+                orientation={inferModuleOrientationFromXCoordinate(
+                  slotPosition[0]
+                )}
+                innerProps={innerProps}
+              >
+                {nestedLabwareDef != null ? (
+                  <LabwareRender
+                    definition={nestedLabwareDef}
+                    onLabwareClick={onLabwareClick}
+                    wellFill={nestedLabwareWellFill}
+                    shouldRotateAdapterOrientation={
+                      inferModuleOrientationFromXCoordinate(slotPosition[0]) ===
+                        'left' && moduleModel === HEATERSHAKER_MODULE_V1
+                    }
+                    highlight={highlightLabware}
+                    highlightShadow={highlightShadowLabware}
+                  />
+                ) : null}
+                {moduleChildren}
+              </Module>
+            ) : null
+          }
+        )}
+        {/* render non-module labware and overlays */}
+        {labwareOnDeck.map(
+          ({
+            labwareLocation,
+            definition,
+            labwareChildren,
+            wellFill,
+            missingTips,
+            onLabwareClick,
+            highlight,
+            highlightShadow,
+          }) => {
+            if (
+              labwareLocation === 'offDeck' ||
+              !('slotName' in labwareLocation) ||
+              // for legacy protocols that list fixed trash as a labware, do not render
+              definition.parameters.loadName ===
+                'opentrons_1_trash_3200ml_fixed'
+            ) {
+              return null
+            }
+
+            const slotPosition = getPositionFromSlotId(
+              labwareLocation.slotName,
+              deckDef
+            )
+
+            return slotPosition != null ? (
+              <g
+                key={labwareLocation.slotName}
+                transform={`translate(${slotPosition[0].toString()},${slotPosition[1].toString()})`}
+                cursor={onLabwareClick != null ? 'pointer' : ''}
+              >
+                <LabwareRender
+                  definition={definition}
+                  onLabwareClick={onLabwareClick}
+                  wellFill={wellFill ?? undefined}
+                  missingTips={missingTips}
+                  highlight={highlight}
+                  highlightShadow={highlightShadow}
+                />
+                {labwareChildren}
+              </g>
+            ) : null
+          }
+        )}
+        {/* render stacked badge on module labware */}
+        {modulesOnDeck.map(
+          ({ moduleModel, moduleLocation, stacked = false }) => {
+            const slotPosition = getPositionFromSlotId(
+              moduleLocation.slotName,
+              deckDef
+            )
+            const moduleDef = getModuleDef2(moduleModel)
+
+            const {
+              x: nestedLabwareOffsetX,
+              y: nestedLabwareOffsetY,
+            } = moduleDef.labwareOffset
+
+            // labwareOffset values are more accurate than our SVG renderings, so ignore any deviations under a certain threshold
+            const clampedLabwareOffsetX =
+              Math.abs(nestedLabwareOffsetX) > LABWARE_OFFSET_DISPLAY_THRESHOLD
+                ? nestedLabwareOffsetX
+                : 0
+            const clampedLabwareOffsetY =
+              Math.abs(nestedLabwareOffsetY) > LABWARE_OFFSET_DISPLAY_THRESHOLD
+                ? nestedLabwareOffsetY
+                : 0
+            // transform to be applied to children which render within the labware interfacing surface of the module
+            const childrenTransform = `translate(${clampedLabwareOffsetX}, ${clampedLabwareOffsetY})`
+
+            return slotPosition != null && stacked ? (
+              <g
+                key={`stacked_${moduleLocation.slotName}`}
+                transform={`translate(${slotPosition[0].toString()},${slotPosition[1].toString()})`}
+              >
+                <g transform={childrenTransform}>
+                  <StackedBadge />
+                </g>
+              </g>
+            ) : null
+          }
+        )}
+        {/* render stacked badge on non-module labware */}
+        {labwareOnDeck.map(
+          ({ labwareLocation, definition, stacked = false }) => {
+            if (
+              labwareLocation === 'offDeck' ||
+              !('slotName' in labwareLocation) ||
+              // for legacy protocols that list fixed trash as a labware, do not render
+              definition.parameters.loadName ===
+                'opentrons_1_trash_3200ml_fixed'
+            ) {
+              return null
+            }
+
+            const slotPosition = getPositionFromSlotId(
+              labwareLocation.slotName,
+              deckDef
+            )
+
+            return slotPosition != null && stacked ? (
+              <g
+                key={`stacked_${labwareLocation.slotName}`}
+                transform={`translate(${slotPosition[0].toString()},${slotPosition[1].toString()})`}
+              >
+                <StackedBadge />
+              </g>
+            ) : null
+          }
+        )}
+      </>
+      {children}
+    </RobotCoordinateSpace>
+  )
+}
+
+function StackedBadge(): JSX.Element {
+  return (
+    <RobotCoordsForeignObject height="2.5rem" width="2.5rem" x={113} y={53}>
+      <DeckInfoLabel
+        height="1.25rem"
+        svgSize="0.875rem"
+        highlight
+        iconName="stacked"
+      />
+    </RobotCoordsForeignObject>
+  )
+}

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

@@ -0,0 +1,199 @@
+import type * as React from 'react'
+
+import { SlotBase } from './SlotBase'
+import { SlotClip } from './SlotClip'
+
+import type {
+  CutoutId,
+  DeckDefinition,
+  ModuleType,
+} from '@opentrons/shared-data'
+
+interface SingleSlotFixtureProps extends React.SVGProps<SVGGElement> {
+  cutoutId: CutoutId
+  deckDefinition: DeckDefinition
+  moduleType?: ModuleType
+  fixtureBaseColor?: React.SVGProps<SVGPathElement>['fill']
+  slotClipColor?: React.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

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

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

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