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

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

@@ -0,0 +1,305 @@
+import {
+  getDeckDefFromRobotType,
+  FLEX_ROBOT_TYPE,
+  SINGLE_SLOT_FIXTURES,
+  STAGING_AREA_RIGHT_SLOT_FIXTURE,
+  TRASH_BIN_ADAPTER_FIXTURE,
+  WASTE_CHUTE_ONLY_FIXTURES,
+  WASTE_CHUTE_STAGING_AREA_FIXTURES,
+  THERMOCYCLER_V2_FRONT_FIXTURE,
+  HEATERSHAKER_MODULE_V1_FIXTURE,
+  TEMPERATURE_MODULE_V2_FIXTURE,
+  MAGNETIC_BLOCK_V1_FIXTURE,
+  ABSORBANCE_READER_V1_FIXTURE,
+  FLEX_STACKER_V1_FIXTURE,
+  FLEX_STACKER_FIXTURES,
+  STAGING_AREA_SLOT_WITH_MAGNETIC_BLOCK_V1_FIXTURE,
+  THERMOCYCLER_MODULE_CUTOUTS,
+} from '@opentrons/shared-data'
+
+import { COLORS } from '../../helix-design-system'
+import { SingleSlotFixture } from '../BaseDeck/SingleSlotFixture'
+import { SlotLabels } from '../Deck'
+import { RobotCoordinateSpace } from '../RobotCoordinateSpace'
+import { EmptyConfigFixture } from './EmptyConfigFixture'
+import { StagingAreaConfigFixture } from './StagingAreaConfigFixture'
+import { TrashBinConfigFixture } from './TrashBinConfigFixture'
+import { WasteChuteConfigFixture } from './WasteChuteConfigFixture'
+import { StaticFixture } from './StaticFixture'
+import { TemperatureModuleFixture } from './TemperatureModuleFixture'
+import { HeaterShakerFixture } from './HeaterShakerFixture'
+import { MagneticBlockFixture } from './MagneticBlockFixture'
+import { ThermocyclerFixture } from './ThermocyclerFixture'
+import { AbsorbanceReaderFixture } from './AbsorbanceReaderFixture'
+import { FlexStackerFixture } from './FlexStackerFixture'
+
+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
+            cutoutId={cutout.id}
+            deckDefinition={deckDef}
+            slotClipColor={COLORS.transparent}
+            fixtureBaseColor={lightFill}
+            showExpansion={showExpansion}
+          />
+        </g>
+      ))}
+      {stagingAreaFixtures.map(({ cutoutId, cutoutFixtureId }) => (
+        <StagingAreaConfigFixture
+          key={cutoutId}
+          deckDefinition={deckDef}
+          handleClickRemove={
+            editableCutoutIds.includes(cutoutId) ? handleClickRemove : undefined
+          }
+          fixtureLocation={cutoutId}
+          cutoutFixtureId={cutoutFixtureId}
+          selected={cutoutId === selectedCutoutId}
+        />
+      ))}
+      {emptyCutouts.map(({ cutoutId }) => (
+        <EmptyConfigFixture
+          key={cutoutId}
+          deckDefinition={deckDef}
+          handleClickAdd={handleClickAdd}
+          fixtureLocation={cutoutId}
+        />
+      ))}
+      {wasteChuteFixtures.map(({ cutoutId, cutoutFixtureId }) => (
+        <WasteChuteConfigFixture
+          key={cutoutId}
+          deckDefinition={deckDef}
+          handleClickRemove={
+            editableCutoutIds.includes(cutoutId) ? handleClickRemove : undefined
+          }
+          fixtureLocation={cutoutId}
+          cutoutFixtureId={cutoutFixtureId}
+          selected={cutoutId === selectedCutoutId}
+        />
+      ))}
+      {wasteChuteStagingAreaFixtures.map(({ cutoutId, cutoutFixtureId }) => (
+        <WasteChuteConfigFixture
+          key={cutoutId}
+          deckDefinition={deckDef}
+          handleClickRemove={
+            editableCutoutIds.includes(cutoutId) ? handleClickRemove : undefined
+          }
+          fixtureLocation={cutoutId}
+          cutoutFixtureId={cutoutFixtureId}
+          selected={cutoutId === selectedCutoutId}
+          hasStagingAreas
+        />
+      ))}
+      {trashBinFixtures.map(({ cutoutId, cutoutFixtureId }) => (
+        <TrashBinConfigFixture
+          key={cutoutId}
+          deckDefinition={deckDef}
+          handleClickRemove={
+            editableCutoutIds.includes(cutoutId) ? handleClickRemove : undefined
+          }
+          fixtureLocation={cutoutId}
+          cutoutFixtureId={cutoutFixtureId}
+          selected={cutoutId === selectedCutoutId}
+        />
+      ))}
+      {temperatureModuleFixtures.map(({ cutoutId, cutoutFixtureId }) => (
+        <TemperatureModuleFixture
+          key={cutoutId}
+          deckDefinition={deckDef}
+          handleClickRemove={
+            editableCutoutIds.includes(cutoutId) ? handleClickRemove : undefined
+          }
+          fixtureLocation={cutoutId}
+          cutoutFixtureId={cutoutFixtureId}
+          selected={cutoutId === selectedCutoutId}
+        />
+      ))}
+      {heaterShakerFixtures.map(({ cutoutId, cutoutFixtureId }) => (
+        <HeaterShakerFixture
+          key={cutoutId}
+          deckDefinition={deckDef}
+          handleClickRemove={
+            editableCutoutIds.includes(cutoutId) ? handleClickRemove : undefined
+          }
+          fixtureLocation={cutoutId}
+          cutoutFixtureId={cutoutFixtureId}
+          selected={cutoutId === selectedCutoutId}
+        />
+      ))}
+      {magneticBlockFixtures.map(({ cutoutId, cutoutFixtureId }) => (
+        <MagneticBlockFixture
+          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
+            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
+          key={cutoutId}
+          deckDefinition={deckDef}
+          handleClickRemove={
+            editableCutoutIds.includes(cutoutId) ? handleClickRemove : undefined
+          }
+          fixtureLocation={cutoutId}
+          cutoutFixtureId={cutoutFixtureId}
+          selected={cutoutId === selectedCutoutId}
+        />
+      ))}
+      {flexStackerFixtures.map(({ cutoutId, cutoutFixtureId }) => (
+        <FlexStackerFixture
+          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
+          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>
+  )
+}

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

@@ -0,0 +1,175 @@
+import { Fragment, memo } from 'react'
+import styled from 'styled-components'
+import map from 'lodash/map'
+
+import { COLORS } from '../../helix-design-system'
+
+import {
+  LabwareOutline,
+  LabwareWellLabels,
+  STYLE_BY_WELL_CONTENTS,
+  Well,
+} from './labwareInternals'
+import { LabwareAdapter, labwareAdapterLoadNames } from './LabwareAdapter'
+
+import type { LabwareDefinition2, LabwareWell } from '@opentrons/shared-data'
+import type {
+  HighlightedWellLabels,
+  WellMouseEvent,
+  WellFill,
+  WellStroke,
+} from './labwareInternals/types'
+
+import type { RefObject } from 'react'
+import type { LabwareAdapterLoadName } from './LabwareAdapter'
+
+export interface LabwareProps {
+  /** Labware definition to render */
+  definition: LabwareDefinition2
+  /** Opional Prop for labware on heater shakers sitting on right side of the deck */
+  shouldRotateAdapterOrientation?: boolean
+  /** boolean to show well labels */
+  showLabels?: boolean
+  /** color to render well labels */
+  wellLabelColor?: string
+  /** option to highlight well labels with specified color */
+  highlightedWellLabels?: HighlightedWellLabels
+  /** CSS color to fill specified wells */
+  wellFill?: WellFill
+  /** CSS color to stroke specified wells */
+  wellStroke?: WellStroke
+  /** adds thicker blue border with blur to labware */
+  highlight?: boolean
+  /** Optional callback, called with WellMouseEvent args onMouseEnter */
+  onMouseEnterWell?: (e: WellMouseEvent) => unknown
+  /** Optional callback, called with WellMouseEvent args onMouseLeave */
+  onMouseLeaveWell?: (e: WellMouseEvent) => unknown
+  gRef?: RefObject<SVGGElement>
+  onLabwareClick?: () => void
+  /** Hide labware outline */
+  hideOutline?: boolean
+  /** Provides well data attribute */
+  isInteractive?: boolean
+}
+
+const TipDecoration = memo(function TipDecoration(props: {
+  well: LabwareWell
+}) {
+  const { well } = props
+  if (well.shape === 'circular') {
+    const radius = well.diameter / 2
+    return (
+      <circle
+        {...STYLE_BY_WELL_CONTENTS.tipPresent}
+        cx={well.x}
+        cy={well.y}
+        r={radius - 1}
+      />
+    )
+  }
+  return null
+})
+
+const LabwareDetailGroup = styled.g`
+  fill: none;
+  stroke: ${COLORS.black90};
+  stroke-width: 1;
+`
+
+/**
+ * a refactor of the legacy LabwareRender component intended to provide predictable styling
+ * initial use in ODD well selection component with ODD-specific well label styling
+ * consider adding additional styled wells props if used elsewhere
+ * @param props
+ * @returns
+ */
+export const Labware = (props: LabwareProps): JSX.Element => {
+  const {
+    definition,
+    gRef,
+    hideOutline = false,
+    highlight,
+    highlightedWellLabels,
+    isInteractive,
+    onLabwareClick,
+    onMouseEnterWell,
+    onMouseLeaveWell,
+    showLabels = false,
+    wellFill = {},
+    wellLabelColor,
+    wellStroke = {},
+  } = props
+
+  const cornerOffsetFromSlot = definition.cornerOffsetFromSlot
+  const labwareLoadName = definition.parameters.loadName
+
+  if (labwareAdapterLoadNames.includes(labwareLoadName)) {
+    const { shouldRotateAdapterOrientation = false } = props
+    const { xDimension, yDimension } = definition.dimensions
+
+    return (
+      <g
+        transform={
+          shouldRotateAdapterOrientation
+            ? `rotate(180, ${xDimension / 2}, ${yDimension / 2})`
+            : 'rotate(0, 0, 0)'
+        }
+      >
+        <g
+          transform={`translate(${cornerOffsetFromSlot.x}, ${cornerOffsetFromSlot.y})`}
+          ref={gRef}
+        >
+          <LabwareAdapter
+            labwareLoadName={labwareLoadName as LabwareAdapterLoadName}
+          />
+        </g>
+      </g>
+    )
+  }
+
+  const { isTiprack } = definition.parameters
+
+  return (
+    <g
+      transform={`translate(${cornerOffsetFromSlot.x}, ${cornerOffsetFromSlot.y})`}
+      ref={gRef}
+    >
+      <g onClick={onLabwareClick}>
+        {!hideOutline ? (
+          <LabwareDetailGroup>
+            <LabwareOutline definition={definition} highlight={highlight} />
+          </LabwareDetailGroup>
+        ) : null}
+        <g>
+          {map(definition.wells, (well, wellName) => {
+            return (
+              <Fragment key={wellName}>
+                <Well
+                  wellName={wellName}
+                  well={well}
+                  onMouseEnterWell={onMouseEnterWell}
+                  onMouseLeaveWell={onMouseLeaveWell}
+                  isInteractive={isInteractive}
+                  {...(isTiprack
+                    ? STYLE_BY_WELL_CONTENTS.tipPresent
+                    : STYLE_BY_WELL_CONTENTS.defaultWell)}
+                  fill={wellFill[wellName]}
+                  stroke={wellStroke[wellName]}
+                />
+
+                {isTiprack ? <TipDecoration well={well} /> : null}
+              </Fragment>
+            )
+          })}
+        </g>
+      </g>
+      {showLabels && definition.metadata.displayCategory !== 'adapter' ? (
+        <LabwareWellLabels
+          definition={definition}
+          wellLabelColor={wellLabelColor}
+          highlightedWellLabels={highlightedWellLabels}
+        />
+      ) : null}
+    </g>
+  )
+}