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

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

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

package/src/hardware-sim/DeckConfigurator/constants.ts

@@ -0,0 +1,81 @@
+import { css } from 'styled-components'
+
+import { BORDERS, COLORS } from '../../helix-design-system'
+import { ALIGN_CENTER, DISPLAY_FLEX, JUSTIFY_CENTER } from '../../styles'
+import { RESPONSIVENESS, SPACING } from '../../ui-style-constants'
+
+/**
+ * These are Flex deck configurator-only values to position a foreign object
+ * Position is relative to deck definition slot positions and a custom stroke applied to the single slot fixture SVG
+ */
+export const FIXTURE_HEIGHT = 102.0
+export const THERMOCYCLER_FIXTURE_HEIGHT = 290.0
+export const COLUMN_1_SINGLE_SLOT_FIXTURE_WIDTH = 243.5
+export const COLUMN_2_SINGLE_SLOT_FIXTURE_WIDTH = 159.0
+export const COLUMN_3_SINGLE_SLOT_FIXTURE_WIDTH = 243.5
+export const STAGING_AREA_FIXTURE_WIDTH = 314.5
+
+export const COLUMN_1_X_ADJUSTMENT = -100
+export const COLUMN_2_X_ADJUSTMENT = -15.5
+export const COLUMN_3_X_ADJUSTMENT = -15.5
+export const Y_ADJUSTMENT = -8
+
+export const STAGING_AREA_DISPLAY_NAME = 'Staging area'
+export const TRASH_BIN_DISPLAY_NAME = 'Trash bin'
+export const WASTE_CHUTE_DISPLAY_NAME = 'Waste chute'
+
+// common config styles for staging area, trash bin, waste chute
+export const CONFIG_STYLE_READ_ONLY = css`
+  display: ${DISPLAY_FLEX};
+  align-items: ${ALIGN_CENTER};
+  background-color: ${COLORS.grey50};
+  border-radius: ${BORDERS.borderRadius4};
+  color: ${COLORS.white};
+  grid-gap: ${SPACING.spacing8};
+  justify-content: ${JUSTIFY_CENTER};
+  width: 100%;
+  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+    background-color: ${COLORS.grey55};
+  }
+`
+
+export const CONFIG_STYLE_EDITABLE = css`
+  ${CONFIG_STYLE_READ_ONLY}
+
+  &:active {
+    background-color: ${COLORS.grey60};
+  }
+
+  &:hover {
+    background-color: ${COLORS.grey55};
+  }
+
+  &:focus-visible {
+    border: 3px solid ${COLORS.yellow50};
+    background-color: ${COLORS.grey55};
+    @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+      background-color: ${COLORS.grey60};
+    }
+  }
+`
+
+export const CONFIG_STYLE_SELECTED = css`
+  ${CONFIG_STYLE_EDITABLE}
+  background-color: ${COLORS.blue50};
+
+  &:active {
+    background-color: ${COLORS.blue60};
+  }
+
+  &:hover {
+    background-color: ${COLORS.blue55};
+  }
+
+  &:focus-visible {
+    border: 3px solid ${COLORS.yellow50};
+    background-color: ${COLORS.blue55};
+    @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+      background-color: ${COLORS.blue60};
+    }
+  }
+`

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

@@ -0,0 +1,318 @@
+import {
+  ABSORBANCE_READER_V1_FIXTURE,
+  FLEX_ROBOT_TYPE,
+  FLEX_STACKER_FIXTURES,
+  FLEX_STACKER_V1_FIXTURE,
+  getDeckDefFromRobotType,
+  HEATERSHAKER_MODULE_V1_FIXTURE,
+  MAGNETIC_BLOCK_V1_FIXTURE,
+  SINGLE_SLOT_FIXTURES,
+  STAGING_AREA_RIGHT_SLOT_FIXTURE,
+  STAGING_AREA_SLOT_WITH_MAGNETIC_BLOCK_V1_FIXTURE,
+  TEMPERATURE_MODULE_V2_FIXTURE,
+  THERMOCYCLER_MODULE_CUTOUTS,
+  THERMOCYCLER_V2_FRONT_FIXTURE,
+  TRASH_BIN_ADAPTER_FIXTURE,
+  WASTE_CHUTE_ONLY_FIXTURES,
+  WASTE_CHUTE_STAGING_AREA_FIXTURES,
+} from '@opentrons/shared-data'
+
+import { COLORS } from '../../helix-design-system'
+import { SingleSlotFixture } from '../BaseDeck/SingleSlotFixture'
+import { SlotLabels } from '../Deck'
+import { RobotCoordinateSpace } from '../RobotCoordinateSpace'
+import { AbsorbanceReaderFixture } from './AbsorbanceReaderFixture'
+import { EmptyConfigFixture } from './EmptyConfigFixture'
+import { FlexStackerFixture } from './FlexStackerFixture'
+import { HeaterShakerFixture } from './HeaterShakerFixture'
+import { MagneticBlockFixture } from './MagneticBlockFixture'
+import { StagingAreaConfigFixture } from './StagingAreaConfigFixture'
+import { StaticFixture } from './StaticFixture'
+import { TemperatureModuleFixture } from './TemperatureModuleFixture'
+import { ThermocyclerFixture } from './ThermocyclerFixture'
+import { TrashBinConfigFixture } from './TrashBinConfigFixture'
+import { WasteChuteConfigFixture } from './WasteChuteConfigFixture'
+
+import type { ReactNode } from 'react'
+import type {
+  CutoutFixtureId,
+  CutoutId,
+  DeckConfiguration,
+} from '@opentrons/shared-data'
+
+export * from './constants'
+
+interface DeckConfiguratorProps {
+  deckConfig: DeckConfiguration
+  handleClickAdd: (cutoutId: CutoutId) => void
+  handleClickRemove: (
+    cutoutId: CutoutId,
+    cutoutFixtureId: CutoutFixtureId
+  ) => void
+  lightFill?: string
+  darkFill?: string
+  editableCutoutIds?: CutoutId[]
+  showExpansion?: boolean
+  children?: ReactNode
+  additionalStaticFixtures?: Array<{ location: CutoutId; label: string }>
+  height?: string
+  selectedCutoutId?: CutoutId
+}
+
+export function DeckConfigurator(props: DeckConfiguratorProps): JSX.Element {
+  const {
+    deckConfig,
+    handleClickAdd,
+    handleClickRemove,
+    additionalStaticFixtures,
+    children,
+    selectedCutoutId,
+    lightFill = COLORS.grey35,
+    darkFill = COLORS.black90,
+    editableCutoutIds = deckConfig.map(({ cutoutId }) => cutoutId),
+    showExpansion = true,
+    height = '455px',
+  } = props
+  const deckDef = getDeckDefFromRobotType(FLEX_ROBOT_TYPE)
+
+  const stagingAreaFixtures = deckConfig.filter(
+    ({ cutoutFixtureId }) => cutoutFixtureId === STAGING_AREA_RIGHT_SLOT_FIXTURE
+  )
+  const wasteChuteFixtures = deckConfig.filter(
+    ({ cutoutFixtureId }) =>
+      cutoutFixtureId != null &&
+      WASTE_CHUTE_ONLY_FIXTURES.includes(cutoutFixtureId)
+  )
+  const wasteChuteStagingAreaFixtures = deckConfig.filter(
+    ({ cutoutFixtureId }) =>
+      cutoutFixtureId != null &&
+      WASTE_CHUTE_STAGING_AREA_FIXTURES.includes(cutoutFixtureId)
+  )
+  const emptyCutouts = deckConfig.filter(
+    ({ cutoutFixtureId, cutoutId }) =>
+      editableCutoutIds.includes(cutoutId) &&
+      cutoutFixtureId != null &&
+      SINGLE_SLOT_FIXTURES.includes(cutoutFixtureId)
+  )
+  const trashBinFixtures = deckConfig.filter(
+    ({ cutoutFixtureId }) => cutoutFixtureId === TRASH_BIN_ADAPTER_FIXTURE
+  )
+  const thermocyclerFixtures = deckConfig.filter(
+    ({ cutoutFixtureId }) => cutoutFixtureId === THERMOCYCLER_V2_FRONT_FIXTURE
+  )
+  const heaterShakerFixtures = deckConfig.filter(
+    ({ cutoutFixtureId }) => cutoutFixtureId === HEATERSHAKER_MODULE_V1_FIXTURE
+  )
+  const temperatureModuleFixtures = deckConfig.filter(
+    ({ cutoutFixtureId }) => cutoutFixtureId === TEMPERATURE_MODULE_V2_FIXTURE
+  )
+  const magneticBlockFixtures = deckConfig.filter(({ cutoutFixtureId }) =>
+    ([
+      MAGNETIC_BLOCK_V1_FIXTURE,
+      STAGING_AREA_SLOT_WITH_MAGNETIC_BLOCK_V1_FIXTURE,
+    ] as CutoutFixtureId[]).includes(cutoutFixtureId)
+  )
+  const absorbanceReaderFixtures = deckConfig.filter(
+    ({ cutoutFixtureId }) => cutoutFixtureId === ABSORBANCE_READER_V1_FIXTURE
+  )
+  const magneticBlockStagingAreaFixtures = deckConfig.filter(
+    ({ cutoutFixtureId }) =>
+      cutoutFixtureId === STAGING_AREA_SLOT_WITH_MAGNETIC_BLOCK_V1_FIXTURE
+  )
+  const flexStackerFixtures = deckConfig.filter(({ cutoutFixtureId }) =>
+    FLEX_STACKER_FIXTURES.includes(cutoutFixtureId)
+  )
+
+  return (
+    <RobotCoordinateSpace
+      height={height}
+      viewBox={`${deckDef.cornerOffsetFromOrigin[0]} ${deckDef.cornerOffsetFromOrigin[1]} ${deckDef.dimensions[0]} ${deckDef.dimensions[1]}`}
+    >
+      {deckDef.locations.cutouts.map(cutout => (
+        // give the outside of the base fixture svgs a stroke for extra spacing
+        <g key={cutout.id} stroke={COLORS.white} strokeWidth="4">
+          <SingleSlotFixture
+            data-testid={cutout.id}
+            cutoutId={cutout.id}
+            deckDefinition={deckDef}
+            slotClipColor={COLORS.transparent}
+            fixtureBaseColor={lightFill}
+            showExpansion={showExpansion}
+          />
+        </g>
+      ))}
+      {stagingAreaFixtures.map(({ cutoutId, cutoutFixtureId }) => (
+        <StagingAreaConfigFixture
+          data-testid={cutoutId}
+          key={cutoutId}
+          deckDefinition={deckDef}
+          handleClickRemove={
+            editableCutoutIds.includes(cutoutId) ? handleClickRemove : undefined
+          }
+          fixtureLocation={cutoutId}
+          cutoutFixtureId={cutoutFixtureId}
+          selected={cutoutId === selectedCutoutId}
+        />
+      ))}
+      {emptyCutouts.map(({ cutoutId }) => (
+        <EmptyConfigFixture
+          data-testid={cutoutId}
+          key={cutoutId}
+          deckDefinition={deckDef}
+          handleClickAdd={handleClickAdd}
+          fixtureLocation={cutoutId}
+        />
+      ))}
+      {wasteChuteFixtures.map(({ cutoutId, cutoutFixtureId }) => (
+        <WasteChuteConfigFixture
+          data-testid={cutoutId}
+          key={cutoutId}
+          deckDefinition={deckDef}
+          handleClickRemove={
+            editableCutoutIds.includes(cutoutId) ? handleClickRemove : undefined
+          }
+          fixtureLocation={cutoutId}
+          cutoutFixtureId={cutoutFixtureId}
+          selected={cutoutId === selectedCutoutId}
+        />
+      ))}
+      {wasteChuteStagingAreaFixtures.map(({ cutoutId, cutoutFixtureId }) => (
+        <WasteChuteConfigFixture
+          data-testid={cutoutId}
+          key={cutoutId}
+          deckDefinition={deckDef}
+          handleClickRemove={
+            editableCutoutIds.includes(cutoutId) ? handleClickRemove : undefined
+          }
+          fixtureLocation={cutoutId}
+          cutoutFixtureId={cutoutFixtureId}
+          selected={cutoutId === selectedCutoutId}
+          hasStagingAreas
+        />
+      ))}
+      {trashBinFixtures.map(({ cutoutId, cutoutFixtureId }) => (
+        <TrashBinConfigFixture
+          data-testid={cutoutId}
+          key={cutoutId}
+          deckDefinition={deckDef}
+          handleClickRemove={
+            editableCutoutIds.includes(cutoutId) ? handleClickRemove : undefined
+          }
+          fixtureLocation={cutoutId}
+          cutoutFixtureId={cutoutFixtureId}
+          selected={cutoutId === selectedCutoutId}
+        />
+      ))}
+      {temperatureModuleFixtures.map(({ cutoutId, cutoutFixtureId }) => (
+        <TemperatureModuleFixture
+          data-testid={cutoutId}
+          key={cutoutId}
+          deckDefinition={deckDef}
+          handleClickRemove={
+            editableCutoutIds.includes(cutoutId) ? handleClickRemove : undefined
+          }
+          fixtureLocation={cutoutId}
+          cutoutFixtureId={cutoutFixtureId}
+          selected={cutoutId === selectedCutoutId}
+        />
+      ))}
+      {heaterShakerFixtures.map(({ cutoutId, cutoutFixtureId }) => (
+        <HeaterShakerFixture
+          data-testid={cutoutId}
+          key={cutoutId}
+          deckDefinition={deckDef}
+          handleClickRemove={
+            editableCutoutIds.includes(cutoutId) ? handleClickRemove : undefined
+          }
+          fixtureLocation={cutoutId}
+          cutoutFixtureId={cutoutFixtureId}
+          selected={cutoutId === selectedCutoutId}
+        />
+      ))}
+      {magneticBlockFixtures.map(({ cutoutId, cutoutFixtureId }) => (
+        <MagneticBlockFixture
+          data-testid={cutoutId}
+          key={cutoutId}
+          deckDefinition={deckDef}
+          handleClickRemove={
+            editableCutoutIds.includes(cutoutId) ? handleClickRemove : undefined
+          }
+          fixtureLocation={cutoutId}
+          cutoutFixtureId={cutoutFixtureId}
+          selected={cutoutId === selectedCutoutId}
+          hasStagingArea={
+            cutoutFixtureId === STAGING_AREA_SLOT_WITH_MAGNETIC_BLOCK_V1_FIXTURE
+          }
+        />
+      ))}
+      {thermocyclerFixtures.map(({ cutoutId, cutoutFixtureId }) => {
+        return (
+          <ThermocyclerFixture
+            data-testid={cutoutId}
+            key={cutoutId}
+            deckDefinition={deckDef}
+            handleClickRemove={
+              editableCutoutIds.includes(cutoutId)
+                ? handleClickRemove
+                : undefined
+            }
+            fixtureLocation={cutoutId}
+            cutoutFixtureId={cutoutFixtureId}
+            selected={
+              selectedCutoutId != null &&
+              THERMOCYCLER_MODULE_CUTOUTS.includes(selectedCutoutId) &&
+              THERMOCYCLER_MODULE_CUTOUTS.includes(cutoutId)
+            }
+          />
+        )
+      })}
+      {absorbanceReaderFixtures.map(({ cutoutId, cutoutFixtureId }) => (
+        <AbsorbanceReaderFixture
+          data-testid={cutoutId}
+          key={cutoutId}
+          deckDefinition={deckDef}
+          handleClickRemove={
+            editableCutoutIds.includes(cutoutId) ? handleClickRemove : undefined
+          }
+          fixtureLocation={cutoutId}
+          cutoutFixtureId={cutoutFixtureId}
+          selected={cutoutId === selectedCutoutId}
+        />
+      ))}
+      {flexStackerFixtures.map(({ cutoutId, cutoutFixtureId }) => (
+        <FlexStackerFixture
+          data-testid={cutoutId}
+          key={cutoutId}
+          deckDefinition={deckDef}
+          handleClickRemove={
+            editableCutoutIds.includes(cutoutId) ? handleClickRemove : undefined
+          }
+          fixtureLocation={cutoutId}
+          cutoutFixtureId={cutoutFixtureId}
+          hasWasteChute={cutoutFixtureId !== FLEX_STACKER_V1_FIXTURE}
+          selected={cutoutId === selectedCutoutId}
+        />
+      ))}
+      {additionalStaticFixtures?.map(staticFixture => (
+        <StaticFixture
+          data-testid={staticFixture.location}
+          key={staticFixture.location}
+          deckDefinition={deckDef}
+          label={staticFixture.label}
+          fixtureLocation={staticFixture.location}
+        />
+      ))}
+      <SlotLabels
+        robotType={FLEX_ROBOT_TYPE}
+        color={darkFill}
+        show4thColumn={
+          stagingAreaFixtures.length > 0 ||
+          wasteChuteStagingAreaFixtures.length > 0 ||
+          magneticBlockStagingAreaFixtures.length > 0 ||
+          absorbanceReaderFixtures.length > 0
+        }
+      />
+      {children}
+    </RobotCoordinateSpace>
+  )
+}

package/src/hardware-sim/DeckSlotLocation/index.tsx

@@ -0,0 +1,88 @@
+import {
+  getPositionFromSlotId,
+  OT2_ROBOT_TYPE,
+  ot2DeckDefV5,
+} from '@opentrons/shared-data'
+
+import { SlotBase } from '../BaseDeck/SlotBase'
+
+import type { SVGProps } from 'react'
+import type {
+  DeckDefinition,
+  DeckSlot,
+  RobotType,
+} from '@opentrons/shared-data'
+
+interface LegacyDeckSlotLocationProps extends SVGProps<SVGGElement> {
+  robotType: RobotType
+  slotName: DeckSlot['id']
+  slotBaseColor?: SVGProps<SVGPathElement>['fill']
+  slotClipColor?: SVGProps<SVGPathElement>['stroke']
+}
+
+type AddressableAreaFromDeckDef = typeof ot2DeckDefV5.locations.addressableAreas[number]
+
+// dimensions of the OT-2 fixed trash, not in deck definition
+export const OT2_FIXED_TRASH_X_DIMENSION = 172.86
+export const OT2_FIXED_TRASH_Y_DIMENSION = 165.86
+
+/**
+ * This is a legacy component for rendering an OT-2 deck slot by reference to the V4 deck definition
+ */
+export function LegacyDeckSlotLocation(
+  props: LegacyDeckSlotLocationProps
+): JSX.Element | null {
+  const {
+    robotType,
+    slotName,
+    slotBaseColor,
+    slotClipColor,
+    ...restProps
+  } = props
+
+  if (robotType !== OT2_ROBOT_TYPE) return null
+
+  const slotDef = ot2DeckDefV5.locations.addressableAreas.find(
+    (s: AddressableAreaFromDeckDef) => s.id === slotName
+  )
+  if (slotDef == null) {
+    console.warn(
+      `cannot render DeckSlotLocation, no deck slot named: ${slotName} in OT-2 deck definition`
+    )
+    return null
+  }
+
+  const slotPosition = getPositionFromSlotId(
+    slotName,
+    (ot2DeckDefV5 as unknown) as DeckDefinition
+  )
+
+  const isFixedTrash = slotName === 'fixedTrash'
+
+  const [xPosition, yPosition] = slotPosition ?? [0, 0]
+  const { xDimension, yDimension } = isFixedTrash
+    ? {
+        xDimension: OT2_FIXED_TRASH_X_DIMENSION,
+        yDimension: OT2_FIXED_TRASH_Y_DIMENSION,
+      }
+    : slotDef.boundingBox
+  const [xOffset, yOffset] = slotDef.offsetFromCutoutFixture
+
+  // adjust the fixed trash position and dimension to fit inside deck SVG
+  const fixedTrashPositionAdjustment = isFixedTrash ? 7 : 0
+  const fixedTrashDimensionAdjustment = isFixedTrash ? -9 : 0
+
+  const adjustedXPosition = xPosition + fixedTrashPositionAdjustment - xOffset
+  const adjustedYPosition = yPosition + fixedTrashPositionAdjustment - yOffset
+  const adjustedXDimension = xDimension + fixedTrashDimensionAdjustment
+  const adjustedYDimension = yDimension + fixedTrashDimensionAdjustment
+
+  return (
+    <g {...restProps}>
+      <SlotBase
+        fill={slotBaseColor}
+        d={`M${adjustedXPosition},${adjustedYPosition}h${adjustedXDimension}v${adjustedYDimension}h${-adjustedXDimension}v${-adjustedYDimension}z`}
+      />
+    </g>
+  )
+}