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

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

@@ -1,348 +0,0 @@
-import {
-  filterAAByAreaType,
-  FLEX_ROBOT_TYPE,
-  getDeckDefFromRobotType,
-  replaceFixtureToFakeFixtureAndTransformCutoutFixturesToAA,
-  STAGING_AREA_SLOT_WITH_MAGNETIC_BLOCK_V1_FIXTURE,
-  THERMOCYCLER_MODULE_CUTOUTS,
-} from '@opentrons/shared-data'
-
-import { COLORS } from '../../helix-design-system'
-import { SlotLabels } from '../Deck'
-import { RobotCoordinateSpace } from '../RobotCoordinateSpace'
-import { AbsorbanceReaderItem } from './AbsorbanceReaderItem'
-import { EmptyConfigItem } from './EmptyConfigItem'
-import { FlexStackerItem } from './FlexStackerItem'
-import { HeaterShakerItem } from './HeaterShakerItem'
-import { MagneticBlockItem } from './MagneticBlockItem'
-import { StagingAreaConfigItem } from './StagingAreaConfigItem'
-import { StaticItem } from './StaticItem'
-import { TemperatureModuleItem } from './TemperatureModuleItem'
-import { ThermocyclerItem } from './ThermocyclerItem'
-import { TrashBinConfigItem } from './TrashBinConfigItem'
-import { WasteChuteConfigFixture } from './WasteChuteConfigItem'
-
-import type { ReactNode } from 'react'
-import type {
-  AddressableAreaNamesWithFakes,
-  CutoutFixtureIdsWithFakes,
-  CutoutId,
-  DeckConfiguration,
-  ModuleModel,
-} from '@opentrons/shared-data'
-
-export * from './constants'
-
-interface DeckConfiguratorProps {
-  deckConfig: DeckConfiguration
-  handleClickAdd: (
-    cutoutId: CutoutId,
-    addressableAreaId: AddressableAreaNamesWithFakes
-  ) => void
-  handleClickRemove: (
-    cutoutId: CutoutId,
-    cutoutFixtureId: CutoutFixtureIdsWithFakes,
-    addressableAreaId: AddressableAreaNamesWithFakes
-  ) => void
-  lightFill?: string
-  darkFill?: string
-  editableCutoutIds?: CutoutId[]
-  showExpansion?: boolean
-  children?: ReactNode
-  additionalStaticFixtures?: Array<{ location: CutoutId; label: string }>
-  height?: string
-  selectedCutoutId?: CutoutId
-  moduleModel?: ModuleModel
-}
-
-export function DeckConfigurator(props: DeckConfiguratorProps): JSX.Element {
-  const {
-    deckConfig,
-    handleClickAdd,
-    handleClickRemove,
-    additionalStaticFixtures,
-    children,
-    selectedCutoutId,
-    darkFill = COLORS.black90,
-    editableCutoutIds = deckConfig.map(({ cutoutId }) => cutoutId),
-    height = '455px',
-    moduleModel,
-  } = props
-
-  const deckDef = getDeckDefFromRobotType(FLEX_ROBOT_TYPE)
-
-  const deckConfigWithAA = replaceFixtureToFakeFixtureAndTransformCutoutFixturesToAA(
-    deckConfig
-  )
-
-  const stagingAreaItems = filterAAByAreaType(
-    deckConfigWithAA,
-    deckDef,
-    'stagingSlot'
-  )
-
-  const wasteChuteItems = filterAAByAreaType(
-    deckConfigWithAA,
-    deckDef,
-    'wasteChute'
-  )
-  const fakeStagingItems = filterAAByAreaType(
-    deckConfigWithAA,
-    deckDef,
-    'fakeStagingSlot'
-  )
-
-  const emptySlotLikeItems = filterAAByAreaType(
-    deckConfigWithAA,
-    deckDef,
-    'slot'
-  ).concat(fakeStagingItems)
-
-  const trashBinItems = filterAAByAreaType(
-    deckConfigWithAA,
-    deckDef,
-    'movableTrash'
-  )
-  const thermocyclerItems = filterAAByAreaType(
-    deckConfigWithAA,
-    deckDef,
-    'thermocycler'
-  )
-  const heaterShakerItems = filterAAByAreaType(
-    deckConfigWithAA,
-    deckDef,
-    'heaterShaker'
-  )
-  const temperatureModuleItems = filterAAByAreaType(
-    deckConfigWithAA,
-    deckDef,
-    'temperatureModule'
-  )
-  const magneticBlockItems = filterAAByAreaType(
-    deckConfigWithAA,
-    deckDef,
-    'magneticBlock'
-  )
-  const absorbanceReaderItems = filterAAByAreaType(
-    deckConfigWithAA,
-    deckDef,
-    'absorbanceReader'
-  )
-
-  const flexStackerItems = filterAAByAreaType(
-    deckConfigWithAA,
-    deckDef,
-    'flexStacker'
-  )
-
-  return (
-    <RobotCoordinateSpace
-      height={height}
-      viewBox={`${deckDef.cornerOffsetFromOrigin[0]} ${deckDef.cornerOffsetFromOrigin[1]} ${deckDef.dimensions[0]} ${deckDef.dimensions[1]}`}
-    >
-      {stagingAreaItems.map(
-        ({ cutoutId, cutoutFixtureId, addressableAreaId }) => (
-          <StagingAreaConfigItem
-            data-testid={cutoutId}
-            key={addressableAreaId}
-            deckDefinition={deckDef}
-            handleClickRemove={
-              editableCutoutIds.includes(cutoutId)
-                ? handleClickRemove
-                : undefined
-            }
-            fixtureLocation={cutoutId}
-            cutoutFixtureId={cutoutFixtureId}
-            addressableAreaId={addressableAreaId}
-            selected={cutoutId === selectedCutoutId}
-          />
-        )
-      )}
-      {emptySlotLikeItems.map(({ cutoutId, addressableAreaId }) => (
-        <EmptyConfigItem
-          data-testid={addressableAreaId}
-          editableCutoutIds={editableCutoutIds ?? []}
-          key={addressableAreaId}
-          addressableAreaId={addressableAreaId}
-          deckDefinition={deckDef}
-          handleClickAdd={handleClickAdd}
-          fixtureLocation={cutoutId}
-          moduleModel={moduleModel}
-        />
-      ))}
-      {wasteChuteItems.map(
-        ({ cutoutId, cutoutFixtureId, addressableAreaId }) => (
-          <WasteChuteConfigFixture
-            data-testid={cutoutId}
-            key={addressableAreaId}
-            deckDefinition={deckDef}
-            handleClickRemove={
-              editableCutoutIds.includes(cutoutId)
-                ? handleClickRemove
-                : undefined
-            }
-            fixtureLocation={cutoutId}
-            cutoutFixtureId={cutoutFixtureId}
-            selected={cutoutId === selectedCutoutId}
-          />
-        )
-      )}
-      {trashBinItems.map(({ cutoutId, cutoutFixtureId, addressableAreaId }) => (
-        <TrashBinConfigItem
-          data-testid={cutoutId}
-          key={addressableAreaId}
-          deckDefinition={deckDef}
-          handleClickRemove={
-            editableCutoutIds.includes(cutoutId) ? handleClickRemove : undefined
-          }
-          fixtureLocation={cutoutId}
-          cutoutFixtureId={cutoutFixtureId}
-          addressableAreaId={addressableAreaId}
-          selected={cutoutId === selectedCutoutId}
-        />
-      ))}
-      {temperatureModuleItems.map(
-        ({ cutoutId, cutoutFixtureId, addressableAreaId }) => (
-          <TemperatureModuleItem
-            data-testid={cutoutId}
-            key={addressableAreaId}
-            deckDefinition={deckDef}
-            handleClickRemove={
-              editableCutoutIds.includes(cutoutId)
-                ? handleClickRemove
-                : undefined
-            }
-            fixtureLocation={cutoutId}
-            cutoutFixtureId={cutoutFixtureId}
-            addressableAreaId={addressableAreaId}
-            selected={cutoutId === selectedCutoutId}
-          />
-        )
-      )}
-      {heaterShakerItems.map(
-        ({ cutoutId, cutoutFixtureId, addressableAreaId }) => (
-          <HeaterShakerItem
-            data-testid={cutoutId}
-            key={addressableAreaId}
-            deckDefinition={deckDef}
-            handleClickRemove={
-              editableCutoutIds.includes(cutoutId)
-                ? handleClickRemove
-                : undefined
-            }
-            fixtureLocation={cutoutId}
-            cutoutFixtureId={cutoutFixtureId}
-            addressableAreaId={addressableAreaId}
-            selected={cutoutId === selectedCutoutId}
-          />
-        )
-      )}
-      {magneticBlockItems.map(
-        ({ cutoutId, cutoutFixtureId, addressableAreaId }) => (
-          <MagneticBlockItem
-            data-testid={cutoutId}
-            key={addressableAreaId}
-            deckDefinition={deckDef}
-            handleClickRemove={
-              editableCutoutIds.includes(cutoutId)
-                ? handleClickRemove
-                : undefined
-            }
-            fixtureLocation={cutoutId}
-            cutoutFixtureId={cutoutFixtureId}
-            addressableAreaId={addressableAreaId}
-            selected={cutoutId === selectedCutoutId}
-            hasStagingArea={
-              cutoutFixtureId ===
-              STAGING_AREA_SLOT_WITH_MAGNETIC_BLOCK_V1_FIXTURE
-            }
-          />
-        )
-      )}
-      {thermocyclerItems.map(
-        ({ cutoutId, cutoutFixtureId, addressableAreaId }) => {
-          return (
-            <ThermocyclerItem
-              data-testid={cutoutId}
-              key={addressableAreaId}
-              deckDefinition={deckDef}
-              handleClickRemove={
-                editableCutoutIds.includes(cutoutId)
-                  ? handleClickRemove
-                  : undefined
-              }
-              fixtureLocation={cutoutId}
-              cutoutFixtureId={cutoutFixtureId}
-              addressableAreaId={addressableAreaId}
-              selected={
-                selectedCutoutId != null &&
-                THERMOCYCLER_MODULE_CUTOUTS.includes(selectedCutoutId) &&
-                THERMOCYCLER_MODULE_CUTOUTS.includes(cutoutId)
-              }
-            />
-          )
-        }
-      )}
-      {absorbanceReaderItems.map(
-        ({ cutoutId, cutoutFixtureId, addressableAreaId }) => (
-          <AbsorbanceReaderItem
-            data-testid={cutoutId}
-            key={addressableAreaId}
-            deckDefinition={deckDef}
-            handleClickRemove={
-              editableCutoutIds.includes(cutoutId)
-                ? handleClickRemove
-                : undefined
-            }
-            fixtureLocation={cutoutId}
-            cutoutFixtureId={cutoutFixtureId}
-            addressableAreaId={addressableAreaId}
-            selected={cutoutId === selectedCutoutId}
-          />
-        )
-      )}
-      {flexStackerItems.map(
-        ({ cutoutId, cutoutFixtureId, addressableAreaId }) => (
-          <FlexStackerItem
-            data-testid={cutoutId}
-            key={addressableAreaId}
-            deckDefinition={deckDef}
-            handleClickRemove={
-              editableCutoutIds.includes(cutoutId)
-                ? handleClickRemove
-                : undefined
-            }
-            fixtureLocation={cutoutId}
-            cutoutFixtureId={cutoutFixtureId}
-            hasWasteChute={[
-              'wasteChuteRightAdapterCovered',
-              'wasteChuteRightAdapterNoCover',
-            ].includes(cutoutFixtureId)}
-            selected={cutoutId === selectedCutoutId}
-            addressableAreaId={addressableAreaId}
-          />
-        )
-      )}
-      {additionalStaticFixtures?.map(staticFixture => (
-        <StaticItem
-          data-testid={staticFixture.location}
-          key={staticFixture.location}
-          deckDefinition={deckDef}
-          label={staticFixture.label}
-          fixtureLocation={staticFixture.location}
-        />
-      ))}
-      */
-      <SlotLabels
-        robotType={FLEX_ROBOT_TYPE}
-        color={darkFill}
-        show4thColumn={
-          stagingAreaItems.length > 0 ||
-          absorbanceReaderItems.length > 0 ||
-          flexStackerItems.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>
-  )
-}

package/src/hardware-sim/Labware/CalibrationBlockRender.stories.tsx

@@ -1,49 +0,0 @@
-import { getAllDefinitions, getLabwareViewBox } from '@opentrons/shared-data'
-
-import { RobotWorkSpace } from '../Deck'
-import { CalibrationBlockRender } from './CalibrationBlockRender'
-
-import type { Meta, StoryObj } from '@storybook/react'
-
-const LOAD_NAMES = [
-  'opentrons_calibrationblock_short_side_left',
-  'opentrons_calibrationblock_short_side_right',
-]
-const DEFS_BY_URI = Object.fromEntries(
-  Object.entries(getAllDefinitions()).filter(([uri, def]) =>
-    LOAD_NAMES.includes(def.parameters.loadName)
-  )
-)
-
-const meta: Meta<typeof CalibrationBlockRender> = {
-  title: 'Library/Molecules/Simulation/CalibrationBlockRender',
-  component: CalibrationBlockRender,
-  decorators: [
-    (Story, context) => {
-      const { labwareDef } = context.args
-      const { minX, minY, xDimension, yDimension } = getLabwareViewBox(
-        labwareDef
-      )
-      const viewBox = `${minX} ${minY} ${xDimension} ${yDimension}`
-
-      return (
-        <RobotWorkSpace viewBox={viewBox}>{() => <Story />}</RobotWorkSpace>
-      )
-    },
-  ],
-}
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Primary: Story = {
-  args: {
-    labwareDef: Object.keys(DEFS_BY_URI)[0],
-  },
-  argTypes: {
-    labwareDef: {
-      options: Object.keys(DEFS_BY_URI),
-      mapping: DEFS_BY_URI,
-    },
-  },
-}

package/src/hardware-sim/Labware/CalibrationBlockRender.tsx

@@ -1,172 +0,0 @@
-import { getLabwareViewBox } from '@opentrons/shared-data'
-
-import {
-  C_MED_DARK_GRAY,
-  C_MED_GRAY,
-  C_MED_LIGHT_GRAY,
-  FONT_WEIGHT_SEMIBOLD,
-  RobotCoordsText,
-  TYPOGRAPHY,
-} from '../..'
-
-import type { LabwareDefinition } from '@opentrons/shared-data'
-
-// These strings match what's physically etched on the calibration block,
-// so they probably shouldn't be localized.
-const SHORT = 'SHORT'
-const TALL = 'TALL'
-
-const TEXT_MARGIN = 5
-
-interface CalibrationBlockRenderProps {
-  /**
-   * Must be a calibration block definition, e.g.
-   * opentrons_calibrationblock_short_side_left or ..._short_side_right.
-   */
-  labwareDef: LabwareDefinition
-}
-
-/**
- * Render a top-down view of an OT-2 calibration block. This displays features specific
- * to calibration blocks, which the more general <Labware> component doesn't know
- * about.
- */
-export function CalibrationBlockRender(
-  props: CalibrationBlockRenderProps
-): JSX.Element | null {
-  const { labwareDef } = props
-  const { minX, minY, xDimension, yDimension } = getLabwareViewBox(labwareDef)
-  const textLeftX = minX + TEXT_MARGIN
-  const textRightX = minX + xDimension - TEXT_MARGIN
-  const textY = minY + yDimension / 2
-
-  switch (labwareDef.parameters.loadName) {
-    case 'opentrons_calibrationblock_short_side_right': {
-      return (
-        <>
-          <rect
-            width={xDimension}
-            height={yDimension}
-            rx="10"
-            ry="10"
-            x={minX}
-            y={minY}
-            fill={C_MED_DARK_GRAY}
-          />
-          <rect
-            width={xDimension / 2}
-            height={yDimension}
-            rx="10"
-            ry="10"
-            x={minX}
-            y={minY}
-            fill={C_MED_GRAY}
-          />
-          <g
-            transform={`rotate(
-              270,
-              ${textLeftX},
-              ${textY}
-            )`}
-          >
-            <RobotCoordsText
-              x={textLeftX}
-              y={textY}
-              textAnchor="middle"
-              fill={C_MED_LIGHT_GRAY}
-              fontSize={TYPOGRAPHY.fontSizeCaption}
-              fontWeight={FONT_WEIGHT_SEMIBOLD}
-            >
-              {TALL}
-            </RobotCoordsText>
-          </g>
-          <g
-            transform={`rotate(
-              90,
-              ${textRightX},
-              ${textY}
-            )`}
-          >
-            <RobotCoordsText
-              x={textRightX}
-              y={textY}
-              textAnchor="middle"
-              fill={C_MED_LIGHT_GRAY}
-              fontSize={TYPOGRAPHY.fontSizeCaption}
-              fontWeight={FONT_WEIGHT_SEMIBOLD}
-            >
-              {SHORT}
-            </RobotCoordsText>
-          </g>
-        </>
-      )
-    }
-    case 'opentrons_calibrationblock_short_side_left': {
-      return (
-        <>
-          <rect
-            width={xDimension}
-            height={yDimension}
-            rx="10"
-            ry="10"
-            x={minX}
-            y={minY}
-            fill={C_MED_DARK_GRAY}
-          />
-          <rect
-            width={xDimension / 2}
-            height={yDimension}
-            rx="10"
-            ry="10"
-            x={minX + xDimension / 2}
-            y={minY}
-            fill={C_MED_GRAY}
-          />
-          <g
-            transform={`rotate(
-              270,
-              ${textLeftX},
-              ${textY}
-            )`}
-          >
-            <RobotCoordsText
-              x={textLeftX}
-              y={textY}
-              textAnchor="middle"
-              fill={C_MED_LIGHT_GRAY}
-              fontSize={TYPOGRAPHY.fontSizeCaption}
-              fontWeight={FONT_WEIGHT_SEMIBOLD}
-            >
-              {SHORT}
-            </RobotCoordsText>
-          </g>
-          <g
-            transform={`rotate(
-              90,
-              ${textRightX},
-              ${textY}
-            )`}
-          >
-            <RobotCoordsText
-              x={textRightX}
-              y={textY}
-              textAnchor="middle"
-              fill={C_MED_LIGHT_GRAY}
-              fontSize={TYPOGRAPHY.fontSizeCaption}
-              fontWeight={FONT_WEIGHT_SEMIBOLD}
-            >
-              {TALL}
-            </RobotCoordsText>
-          </g>
-        </>
-      )
-    }
-    default: {
-      // should never reach this case
-      console.warn(
-        '<CalibrationBlockRender> given a non-calibration-block labware definition. Rendering nothing.'
-      )
-      return null
-    }
-  }
-}