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

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

@@ -0,0 +1,165 @@
+import {
+  SINGLE_CENTER_SLOT_FIXTURE,
+  SINGLE_LEFT_SLOT_FIXTURE,
+  SINGLE_RIGHT_SLOT_FIXTURE,
+  STAGING_AREA_RIGHT_SLOT_FIXTURE,
+  TRASH_BIN_ADAPTER_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,61 @@
+import { OT2_ROBOT_TYPE } from '@opentrons/shared-data'
+
+import { ALL_OT2_DECK_LAYERS } from './constants'
+import {
+  CalibrationMarkings,
+  DoorStops,
+  FixedBase,
+  FixedTrash,
+  MetalFrame,
+  RemovableDeckOutline,
+  RemovalHandle,
+  ScrewHoles,
+  SlotNumbers,
+  SlotRidges,
+} from './OT2Layers'
+
+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>
+  )
+}

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

@@ -0,0 +1,148 @@
+import {
+  FLEX_ROBOT_TYPE,
+  getDeckDefFromRobotType,
+  opentrons1Trash3200MlFixedV1 as trashLabwareDef,
+} from '@opentrons/shared-data'
+
+import { BORDERS, COLORS } from '../../helix-design-system'
+import { Icon } from '../../icons'
+import { DeckLabelSet } from '../../organisms'
+import { Flex, Text } from '../../primitives'
+import { ALIGN_CENTER, JUSTIFY_CENTER } from '../../styles'
+import { SPACING, TYPOGRAPHY } from '../../ui-style-constants'
+import { RobotCoordsForeignObject } from './RobotCoordsForeignObject'
+
+import type { RobotType } from '@opentrons/shared-data'
+import type { DeckLabelProps } from '../../molecules'
+
+// only allow edge cutout locations (columns 1 and 3)
+export type TrashCutoutId =
+  | 'cutoutA1'
+  | 'cutoutB1'
+  | 'cutoutC1'
+  | 'cutoutD1'
+  | 'cutoutA3'
+  | 'cutoutB3'
+  | 'cutoutC3'
+  | 'cutoutD3'
+
+const HEIGHT_OF_TAG = 28
+interface FlexTrashProps {
+  robotType: RobotType
+  trashIconColor: string
+  backgroundColor: string
+  trashCutoutId?: TrashCutoutId
+  /** optional prop to highlight the border of the trashBin */
+  showHighlight?: boolean
+  /** optional tag info to display a tag below the trash */
+  tagInfo?: DeckLabelProps[]
+}
+
+/**
+ * Component to render Opentrons Flex trash
+ * For use as a RobotWorkspace child component
+ */
+
+export const FlexTrash = ({
+  robotType,
+  trashIconColor,
+  backgroundColor,
+  trashCutoutId,
+  showHighlight,
+  tagInfo,
+}: FlexTrashProps): JSX.Element | null => {
+  // be sure we don't try to render for an OT-2
+  if (robotType !== FLEX_ROBOT_TYPE) return null
+
+  const deckDefinition = getDeckDefFromRobotType(robotType)
+
+  const trashCutout = deckDefinition.locations.cutouts.find(
+    cutout => cutout.id === trashCutoutId
+  )
+
+  // retrieve slot x,y positions and dimensions from deck definition for the given trash cutout location
+  const [x = 0, y = 0] = trashCutout?.position ?? []
+
+  // a standard addressable area slot bounding box dimension
+  const {
+    xDimension: slotXDimension = 0,
+    yDimension: slotYDimension = 0,
+  } = deckDefinition.locations.addressableAreas[0].boundingBox
+
+  // adjust for dimensions from trash definition
+  const {
+    x: xAdjustment,
+    y: yAdjustment,
+  } = trashLabwareDef.cornerOffsetFromSlot
+  const { xDimension, yDimension } = trashLabwareDef.dimensions
+
+  // rotate trash 180 degrees in column 1
+  const rotateDegrees =
+    trashCutoutId === 'cutoutA1' ||
+    trashCutoutId === 'cutoutB1' ||
+    trashCutoutId === 'cutoutC1' ||
+    trashCutoutId === 'cutoutD1'
+      ? '180'
+      : '0'
+
+  // rotate trash around x,y midpoint of standard slot bounding box
+  const rotateXCoord = x + slotXDimension / 2
+  const rotateYCoord = y + slotYDimension / 2
+
+  return x != null && y != null && xDimension != null && yDimension != null ? (
+    <g transform={`rotate(${rotateDegrees}, ${rotateXCoord}, ${rotateYCoord})`}>
+      <RobotCoordsForeignObject
+        width={xDimension}
+        height={yDimension}
+        x={x + xAdjustment}
+        y={y + yAdjustment}
+        flexProps={{ flex: '1' }}
+        foreignObjectProps={{ flex: '1' }}
+      >
+        <Flex
+          alignItems={ALIGN_CENTER}
+          backgroundColor={backgroundColor}
+          borderRadius={BORDERS.borderRadius4}
+          justifyContent={JUSTIFY_CENTER}
+          gridGap={SPACING.spacing8}
+          width="100%"
+          border={showHighlight ? `3px solid ${COLORS.blue50}` : 'none'}
+        >
+          {rotateDegrees === '180' ? (
+            <Text
+              color={COLORS.white}
+              // rotate text back 180 degrees
+              transform={`rotate(${rotateDegrees}deg)`}
+              transformOrigin="center"
+              css={TYPOGRAPHY.bodyTextSemiBold}
+            >
+              Trash bin
+            </Text>
+          ) : null}
+          <Icon
+            name="trash"
+            color={trashIconColor}
+            height="2rem"
+            // rotate icon back 180 degrees
+            transform={`rotate(${rotateDegrees}deg)`}
+            transformOrigin="center"
+          />
+          {rotateDegrees === '0' ? (
+            <Text color={COLORS.white} css={TYPOGRAPHY.bodyTextSemiBold}>
+              Trash bin
+            </Text>
+          ) : null}
+        </Flex>
+      </RobotCoordsForeignObject>
+      {tagInfo != null && tagInfo.length > 0 ? (
+        <DeckLabelSet
+          width={xDimension}
+          height={yDimension}
+          x={x + xAdjustment}
+          y={y + yAdjustment - HEIGHT_OF_TAG}
+          deckLabels={tagInfo}
+        />
+      ) : null}
+    </g>
+  ) : null
+}

package/src/hardware-sim/Deck/MoveLabwareOnDeck.stories.tsx

@@ -0,0 +1,98 @@
+import {
+  fixture96Plate,
+  FLEX_ROBOT_TYPE,
+  SINGLE_CENTER_SLOT_FIXTURE,
+  SINGLE_LEFT_SLOT_FIXTURE,
+  SINGLE_RIGHT_SLOT_FIXTURE,
+  STAGING_AREA_RIGHT_SLOT_FIXTURE,
+} from '@opentrons/shared-data'
+
+import { MoveLabwareOnDeck as MoveLabwareOnDeckComponent } from './MoveLabwareOnDeck'
+
+import type { Meta, StoryObj } from '@storybook/react'
+import type * as React from 'react'
+import type {
+  DeckConfiguration,
+  LabwareDefinition2,
+} from '@opentrons/shared-data'
+
+const meta: Meta<React.ComponentProps<typeof MoveLabwareOnDeckComponent>> = {
+  component: MoveLabwareOnDeckComponent,
+  title: 'Library/Molecules/Simulation/MoveLabwareOnDeck',
+} as Meta
+
+export default meta
+type Story = StoryObj<React.ComponentProps<typeof MoveLabwareOnDeckComponent>>
+
+const FLEX_SIMPLEST_DECK_CONFIG: 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: SINGLE_RIGHT_SLOT_FIXTURE,
+  },
+  {
+    cutoutId: 'cutoutB3',
+    cutoutFixtureId: SINGLE_RIGHT_SLOT_FIXTURE,
+  },
+  {
+    cutoutId: 'cutoutC3',
+    cutoutFixtureId: SINGLE_RIGHT_SLOT_FIXTURE,
+  },
+  {
+    cutoutId: 'cutoutD3',
+    cutoutFixtureId: STAGING_AREA_RIGHT_SLOT_FIXTURE,
+  },
+]
+
+export const MoveLabwareOnDeck: Story = {
+  render: args => (
+    <MoveLabwareOnDeckComponent
+      movedLabwareDef={fixture96Plate as LabwareDefinition2}
+      initialLabwareLocation={args.initialLabwareLocation}
+      finalLabwareLocation={args.finalLabwareLocation}
+      loadedModules={[]}
+      loadedLabware={[]}
+      robotType={args.robotType}
+      deckConfig={
+        args.robotType === FLEX_ROBOT_TYPE ? FLEX_SIMPLEST_DECK_CONFIG : []
+      }
+      height="400px"
+    />
+  ),
+  args: {
+    initialLabwareLocation: { slotName: 'A1' },
+    finalLabwareLocation: 'offDeck',
+    robotType: FLEX_ROBOT_TYPE,
+  },
+}