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

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

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

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

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

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