@opentrons/components 0.1.6-alpha.9 → 0.1.7-alpha.0

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

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

@@ -0,0 +1,158 @@
+import { Icon } from '../../icons'
+import { Flex, Text } from '../../primitives'
+import {
+  ALIGN_CENTER,
+  DIRECTION_COLUMN,
+  JUSTIFY_CENTER,
+  TEXT_ALIGN_CENTER,
+} from '../../styles'
+import { DeckLabelSet } from '../../organisms'
+import { SPACING, TYPOGRAPHY } from '../../ui-style-constants'
+import { COLORS } from '../../helix-design-system'
+import { RobotCoordsForeignObject } from '../Deck/RobotCoordsForeignObject'
+import { SlotBase } from './SlotBase'
+import type {
+  WASTE_CHUTE_CUTOUT,
+  DeckDefinition,
+  ModuleType,
+} from '@opentrons/shared-data'
+
+import type { SVGProps } from 'react'
+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

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

package/src/hardware-sim/BaseDeck/__fixtures__/index.ts

@@ -0,0 +1,165 @@
+import {
+  SINGLE_LEFT_SLOT_FIXTURE,
+  SINGLE_CENTER_SLOT_FIXTURE,
+  TRASH_BIN_ADAPTER_FIXTURE,
+  SINGLE_RIGHT_SLOT_FIXTURE,
+  STAGING_AREA_RIGHT_SLOT_FIXTURE,
+  WASTE_CHUTE_RIGHT_ADAPTER_COVERED_FIXTURE,
+} from '@opentrons/shared-data'
+
+import type { DeckConfiguration } from '@opentrons/shared-data'
+
+export const STANDARD_SLOT_DECK_CONFIG_FIXTURE: DeckConfiguration = [
+  {
+    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,
+  },
+  {
+    cutoutId: 'cutoutA2',
+    cutoutFixtureId: SINGLE_CENTER_SLOT_FIXTURE,
+  },
+  {
+    cutoutId: 'cutoutB2',
+    cutoutFixtureId: SINGLE_CENTER_SLOT_FIXTURE,
+  },
+  {
+    cutoutId: 'cutoutC2',
+    cutoutFixtureId: SINGLE_CENTER_SLOT_FIXTURE,
+  },
+  {
+    cutoutId: 'cutoutD2',
+    cutoutFixtureId: SINGLE_CENTER_SLOT_FIXTURE,
+  },
+  {
+    cutoutId: 'cutoutA3',
+    cutoutFixtureId: TRASH_BIN_ADAPTER_FIXTURE,
+  },
+  {
+    cutoutId: 'cutoutB3',
+    cutoutFixtureId: SINGLE_RIGHT_SLOT_FIXTURE,
+  },
+  {
+    cutoutId: 'cutoutC3',
+    cutoutFixtureId: SINGLE_RIGHT_SLOT_FIXTURE,
+  },
+  {
+    cutoutId: 'cutoutD3',
+    cutoutFixtureId: SINGLE_RIGHT_SLOT_FIXTURE,
+  },
+]
+
+// contains staging area fixtures
+export const EXTENDED_DECK_CONFIG_FIXTURE: DeckConfiguration = [
+  {
+    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,
+  },
+  {
+    cutoutId: 'cutoutA2',
+    cutoutFixtureId: SINGLE_CENTER_SLOT_FIXTURE,
+  },
+  {
+    cutoutId: 'cutoutB2',
+    cutoutFixtureId: SINGLE_CENTER_SLOT_FIXTURE,
+  },
+  {
+    cutoutId: 'cutoutC2',
+    cutoutFixtureId: SINGLE_CENTER_SLOT_FIXTURE,
+  },
+  {
+    cutoutId: 'cutoutD2',
+    cutoutFixtureId: SINGLE_CENTER_SLOT_FIXTURE,
+  },
+  {
+    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: STAGING_AREA_RIGHT_SLOT_FIXTURE,
+  },
+]
+
+// contains waste chute fixture
+export const WASTE_CHUTE_DECK_CONFIG_FIXTURE: DeckConfiguration = [
+  {
+    cutoutId: 'cutoutA1',
+    cutoutFixtureId: SINGLE_LEFT_SLOT_FIXTURE,
+  },
+  {
+    cutoutId: 'cutoutB1',
+    cutoutFixtureId: SINGLE_LEFT_SLOT_FIXTURE,
+  },
+  {
+    cutoutId: 'cutoutC1',
+    cutoutFixtureId: TRASH_BIN_ADAPTER_FIXTURE,
+  },
+  {
+    cutoutId: 'cutoutD1',
+    cutoutFixtureId: SINGLE_LEFT_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',
+    cutoutFixtureId: SINGLE_CENTER_SLOT_FIXTURE,
+  },
+  {
+    cutoutId: 'cutoutA3',
+    cutoutFixtureId: SINGLE_RIGHT_SLOT_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,
+  },
+]

package/src/hardware-sim/BaseDeck/index.ts

@@ -0,0 +1,5 @@
+export * from './BaseDeck'
+export * from './SingleSlotFixture'
+export * from './StagingAreaFixture'
+export * from './WasteChuteFixture'
+export * from './WasteChuteStagingAreaFixture'

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

@@ -0,0 +1,60 @@
+import { OT2_ROBOT_TYPE } from '@opentrons/shared-data'
+import {
+  FixedBase,
+  FixedTrash,
+  DoorStops,
+  MetalFrame,
+  RemovableDeckOutline,
+  SlotRidges,
+  SlotNumbers,
+  CalibrationMarkings,
+  RemovalHandle,
+  ScrewHoles,
+} from './OT2Layers'
+import { ALL_OT2_DECK_LAYERS } from './constants'
+
+import type { RobotType } from '@opentrons/shared-data'
+
+export * from './OT2Layers'
+
+export interface DeckFromLayersProps {
+  robotType: RobotType
+  layerBlocklist: string[]
+}
+
+const OT2_LAYER_MAP: {
+  [layer in typeof ALL_OT2_DECK_LAYERS[number]]: () => JSX.Element
+} = {
+  fixedBase: () => <FixedBase />,
+  fixedTrash: () => <FixedTrash />,
+  doorStops: () => <DoorStops />,
+  metalFrame: () => <MetalFrame />,
+  removableDeckOutline: () => <RemovableDeckOutline />,
+  slotRidges: () => <SlotRidges />,
+  slotNumbers: () => <SlotNumbers />,
+  calibrationMarkings: () => <CalibrationMarkings />,
+  removalHandle: () => <RemovalHandle />,
+  screwHoles: () => <ScrewHoles />,
+}
+
+/**
+ * a component that renders an OT-2 deck from the V3 deck definition layers property
+ * takes a robot type prop to protect against an attempted Flex render
+ */
+export function DeckFromLayers(props: DeckFromLayersProps): JSX.Element | null {
+  const { robotType, layerBlocklist = [] } = props
+
+  // early return null if not OT-2
+  if (robotType !== OT2_ROBOT_TYPE) return null
+
+  return (
+    <g id="deckLayers">
+      {ALL_OT2_DECK_LAYERS.filter(layer => !layerBlocklist.includes(layer)).map(
+        layer => {
+          const LayerComponent = OT2_LAYER_MAP[layer]
+          return <LayerComponent key={layer} />
+        }
+      )}
+    </g>
+  )
+}