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

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

@@ -0,0 +1,120 @@
+import { memo } from 'react'
+
+import { C_BLACK, C_BLUE } from '../../../styles/colors'
+import { TYPOGRAPHY } from '../../../ui-style-constants'
+import { RobotCoordsText } from '../../Deck'
+
+import type { MemoExoticComponent } from 'react'
+import type { LabwareDefinition2 } from '@opentrons/shared-data'
+import type { HighlightedWellLabels } from './types'
+
+// magic layout numbers to make the letters close to the edges of the labware
+// evaluate values for inside/outside labware outline when needed
+const LETTER_COLUMN_X_ADJUSTMENT = -4
+const NUMBER_COLUMN_Y_ADJUSTMENT = 2
+
+interface LabwareWellLabelsProps {
+  definition: LabwareDefinition2
+  highlightedWellLabels?: HighlightedWellLabels
+  wellLabelColor?: string
+}
+
+const Labels = (props: {
+  definition: LabwareDefinition2
+  wells: string[]
+  isLetterColumn?: boolean
+  highlightedWellLabels?: HighlightedWellLabels
+  wellLabelColor?: string
+}): JSX.Element => {
+  const {
+    definition,
+    highlightedWellLabels,
+    isLetterColumn = false,
+    wellLabelColor,
+    wells,
+  } = props
+  const highlightColor = highlightedWellLabels?.color ?? C_BLUE
+  const fillColor = wellLabelColor ?? C_BLACK
+
+  // set x and y from a1 well values
+  const firstWellName = definition.ordering[0][0]
+  const firstWell = definition.wells[firstWellName]
+
+  const xDistanceToWellEdge =
+    firstWell.shape === 'circular'
+      ? firstWell.diameter / 2
+      : firstWell.xDimension / 2
+
+  const yDistanceToWellEdge =
+    firstWell.shape === 'circular'
+      ? firstWell.diameter / 2
+      : firstWell.yDimension / 2
+
+  const firstWellXPosition =
+    firstWell.x - xDistanceToWellEdge + LETTER_COLUMN_X_ADJUSTMENT
+
+  const firstWellYPosition =
+    firstWell.y + yDistanceToWellEdge + NUMBER_COLUMN_Y_ADJUSTMENT
+
+  return (
+    <>
+      {wells.map(wellName => {
+        const well = definition.wells[wellName]
+        return (
+          <RobotCoordsText
+            key={wellName}
+            x={isLetterColumn ? firstWellXPosition : well.x}
+            y={isLetterColumn ? well.y : firstWellYPosition}
+            style={{
+              fontSize: '0.2rem', // LEGACY --fs-micro
+              fontWeight: TYPOGRAPHY.fontWeightSemiBold,
+              textAnchor: 'middle',
+              dominantBaseline: isLetterColumn ? 'middle' : 'auto',
+            }}
+            fill={
+              highlightedWellLabels?.wells.includes(wellName) ?? false
+                ? highlightColor
+                : fillColor
+            }
+          >
+            {(isLetterColumn ? /[A-Z]+/g : /\d+/g).exec(wellName)}
+          </RobotCoordsText>
+        )
+      })}
+    </>
+  )
+}
+
+export function LabwareWellLabelsComponent(
+  props: LabwareWellLabelsProps
+): JSX.Element {
+  const { definition, highlightedWellLabels, wellLabelColor } = props
+  const letterColumn = definition.ordering[0] ?? []
+  const numberRow = definition.ordering.map(wellCol => wellCol[0])
+
+  return (
+    <g>
+      <Labels
+        definition={definition}
+        wells={letterColumn}
+        highlightedWellLabels={highlightedWellLabels}
+        wellLabelColor={wellLabelColor}
+        isLetterColumn
+      />
+      <Labels
+        definition={definition}
+        wells={numberRow}
+        highlightedWellLabels={highlightedWellLabels}
+        wellLabelColor={wellLabelColor}
+      />
+    </g>
+  )
+}
+
+/**
+ * for use in Labware.tsx component
+ * has ODD-specific styling
+ */
+export const LabwareWellLabels: MemoExoticComponent<
+  typeof LabwareWellLabelsComponent
+> = memo(LabwareWellLabelsComponent)

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

@@ -0,0 +1,122 @@
+// Render labware definition to SVG. XY is in robot coordinates.
+import { Fragment, memo } from 'react'
+import flatMap from 'lodash/flatMap'
+import styled from 'styled-components'
+
+import { COLORS } from '../../../helix-design-system'
+import { LabwareOutline } from './LabwareOutline'
+import { STYLE_BY_WELL_CONTENTS } from './StyledWells'
+import { Well } from './Well'
+
+import type { CSSProperties } from 'styled-components'
+import type { MemoExoticComponent } from 'react'
+import type { LabwareDefinition2, LabwareWell } from '@opentrons/shared-data'
+import type { WellMouseEvent, WellStroke } from './types'
+
+export interface StaticLabwareProps {
+  /** Labware definition to render */
+  definition: LabwareDefinition2
+  /** Add thicker blurred blue border to labware, defaults to false */
+  highlight?: boolean
+  /** adds a drop shadow to the highlight border */
+  highlightShadow?: boolean
+  /** Optional callback to be executed when entire labware element is clicked */
+  onLabwareClick?: () => void
+  /** Optional callback to be executed when mouse enters a well element */
+  onMouseEnterWell?: (e: WellMouseEvent) => unknown
+  /** Optional callback to be executed when mouse leaves a well element */
+  onMouseLeaveWell?: (e: WellMouseEvent) => unknown
+  fill?: CSSProperties['fill']
+  showRadius?: boolean
+  wellStroke?: WellStroke
+  /** optional show of labware border, defaulted to true */
+  showBorder?: 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;
+`
+
+export function StaticLabwareComponent(props: StaticLabwareProps): JSX.Element {
+  const {
+    definition,
+    highlight,
+    highlightShadow,
+    onLabwareClick,
+    onMouseEnterWell,
+    onMouseLeaveWell,
+    fill,
+    showRadius = true,
+    wellStroke = {},
+    showBorder = true,
+  } = props
+
+  const { isTiprack } = definition.parameters
+  return (
+    <g onClick={onLabwareClick}>
+      {!showBorder ? null : (
+        <LabwareDetailGroup>
+          <LabwareOutline
+            definition={definition}
+            highlight={highlight}
+            highlightShadow={highlightShadow}
+            fill={fill}
+            showRadius={showRadius}
+          />
+        </LabwareDetailGroup>
+      )}
+      <g>
+        {flatMap(
+          definition.ordering,
+          (row: string[], i: number, c: string[][]) => {
+            return row.map(wellName => {
+              return (
+                <Fragment key={wellName}>
+                  <Well
+                    wellName={wellName}
+                    well={definition.wells[wellName]}
+                    onMouseEnterWell={onMouseEnterWell}
+                    onMouseLeaveWell={onMouseLeaveWell}
+                    {...(isTiprack
+                      ? STYLE_BY_WELL_CONTENTS.tipPresent
+                      : STYLE_BY_WELL_CONTENTS.defaultWell)}
+                    fill={fill}
+                    stroke={wellStroke[wellName] ?? undefined}
+                  />
+
+                  {isTiprack ? (
+                    <TipDecoration well={definition.wells[wellName]} />
+                  ) : null}
+                </Fragment>
+              )
+            })
+          }
+        )}
+      </g>
+    </g>
+  )
+}
+
+export const StaticLabware: MemoExoticComponent<
+  typeof StaticLabwareComponent
+> = memo(StaticLabwareComponent)

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

@@ -0,0 +1,41 @@
+import { memo } from 'react'
+import map from 'lodash/map'
+
+import { COLORS } from '../../../helix-design-system'
+import { Well } from './Well'
+
+import type { CSSProperties } from 'styled-components'
+import type { MemoExoticComponent, ReactNode } from 'react'
+import type { LabwareDefinition2 } from '@opentrons/shared-data'
+
+export interface StrokedWellProps {
+  definition: LabwareDefinition2
+  strokeByWell: Record<string, CSSProperties['stroke']>
+}
+
+export function StrokedWellsComponent(props: StrokedWellProps): JSX.Element {
+  const { definition, strokeByWell } = props
+  return (
+    <>
+      {map<Record<string, CSSProperties['stroke']>, ReactNode>(
+        strokeByWell,
+        (color: CSSProperties['stroke'], wellName: string): JSX.Element => {
+          return (
+            <Well
+              key={wellName}
+              wellName={wellName}
+              well={definition.wells[wellName]}
+              stroke={color}
+              fill={COLORS.white}
+              strokeWidth="0.6"
+            />
+          )
+        }
+      )}
+    </>
+  )
+}
+
+export const StrokedWells: MemoExoticComponent<
+  typeof StrokedWellsComponent
+> = memo(StrokedWellsComponent)

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

@@ -0,0 +1,80 @@
+import { memo } from 'react'
+
+import { COLORS } from '../../../helix-design-system'
+import { Well } from './Well'
+
+import type { CSSProperties, MemoExoticComponent } from 'react'
+import type { LabwareDefinition2 } from '@opentrons/shared-data'
+import type { WellGroup } from './types'
+
+type WellContents =
+  | 'tipPresent'
+  | 'tipMissing'
+  | 'defaultWell'
+  | 'disabledWell'
+  | 'highlightedWell'
+  | 'selectedWell'
+export interface StyledWellProps {
+  wellContents: WellContents
+  definition: LabwareDefinition2
+  wells: WellGroup
+}
+
+export const STYLE_BY_WELL_CONTENTS: {
+  [wellContents in WellContents]: {
+    stroke: CSSProperties['stroke']
+    fill: CSSProperties['fill']
+    strokeWidth: CSSProperties['strokeWidth']
+  }
+} = {
+  highlightedWell: {
+    stroke: COLORS.blue50,
+    fill: COLORS.transparent,
+    strokeWidth: 1,
+  },
+  disabledWell: {
+    stroke: '#C6C6C6', // LEGACY --light-grey-hover
+    fill: COLORS.transparent,
+    strokeWidth: 0.6,
+  },
+  selectedWell: {
+    stroke: COLORS.blue50,
+    fill: COLORS.transparent,
+    strokeWidth: 0.5,
+  },
+  tipMissing: {
+    stroke: '#A4A4A4', // LEGACY --c-near-black
+    fill: '#E5E2E2', // LEGACY --c-light-gray
+    strokeWidth: 0.6,
+  },
+  tipPresent: {
+    fill: COLORS.white,
+    stroke: '#A4A4A4', // LEGACY --c-near-black
+    strokeWidth: 0.6,
+  },
+  defaultWell: {
+    fill: COLORS.white,
+    stroke: COLORS.black90,
+    strokeWidth: 0.6,
+  },
+}
+
+function StyledWellsComponent(props: StyledWellProps): JSX.Element {
+  const { definition, wells, wellContents } = props
+  return (
+    <>
+      {Object.keys(wells).map((wellName: string) => (
+        <Well
+          key={wellName}
+          wellName={wellName}
+          well={definition.wells[wellName]}
+          {...STYLE_BY_WELL_CONTENTS[wellContents]}
+        />
+      ))}
+    </>
+  )
+}
+
+export const StyledWells: MemoExoticComponent<
+  typeof StyledWellsComponent
+> = memo(StyledWellsComponent)

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

@@ -0,0 +1,78 @@
+import { memo } from 'react'
+
+import { INTERACTIVE_WELL_DATA_ATTRIBUTE } from '@opentrons/shared-data'
+
+import { COLORS } from '../../../helix-design-system'
+
+import type { CSSProperties, MemoExoticComponent, MouseEvent } from 'react'
+import type { LabwareWell } from '@opentrons/shared-data'
+import type { StyleProps } from '../../../primitives'
+import type { WellMouseEvent } from './types'
+
+export interface WellProps extends StyleProps {
+  /** Well Name (eg 'A1') */
+  wellName: string
+  /** well object from labware definition */
+  well: LabwareWell
+  stroke: CSSProperties['stroke']
+  strokeWidth: CSSProperties['strokeWidth']
+  fill: CSSProperties['fill']
+  /** Optional callback, called with WellMouseEvent args onMouseOver */
+  onMouseEnterWell?: (e: WellMouseEvent) => unknown
+  onMouseLeaveWell?: (e: WellMouseEvent) => unknown
+  /** Provides well data attribute */
+  isInteractive?: boolean
+}
+
+export function WellComponent(props: WellProps): JSX.Element {
+  const {
+    well,
+    wellName,
+    stroke = COLORS.black90,
+    strokeWidth = 1,
+    fill,
+    onMouseEnterWell,
+    onMouseLeaveWell,
+    isInteractive = onMouseEnterWell != null || onMouseLeaveWell != null,
+  } = props
+  const { x, y } = well
+
+  const wellFill = fill ?? COLORS.white
+
+  const pointerEvents: CSSProperties['pointerEvents'] = isInteractive
+    ? 'auto'
+    : 'none'
+  const commonProps = {
+    [INTERACTIVE_WELL_DATA_ATTRIBUTE]: isInteractive ? wellName : undefined,
+    onMouseEnter:
+      onMouseEnterWell != null
+        ? (event: MouseEvent) => onMouseEnterWell({ wellName, event })
+        : undefined,
+    onMouseLeave:
+      onMouseLeaveWell != null
+        ? (event: MouseEvent) => onMouseLeaveWell({ wellName, event })
+        : undefined,
+    style: { pointerEvents, stroke, strokeWidth, fill: wellFill },
+  }
+
+  if (well.shape === 'circular') {
+    const { diameter } = well
+    const radius = diameter / 2
+    return <circle {...commonProps} cx={x} cy={y} r={radius} />
+  }
+
+  const { xDimension, yDimension } = well
+  return (
+    <rect
+      {...commonProps}
+      x={x - xDimension / 2}
+      y={y - yDimension / 2}
+      width={xDimension}
+      height={yDimension}
+    />
+  )
+}
+
+export const Well: MemoExoticComponent<typeof WellComponent> = memo(
+  WellComponent
+)

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

@@ -0,0 +1,124 @@
+import { memo } from 'react'
+
+import { COLORS } from '../../../helix-design-system'
+import { C_BLACK, C_BLUE } from '../../../styles/colors'
+import { RobotCoordsText } from '../../Deck'
+import { WELL_LABEL_OPTIONS } from '../LabwareRender'
+
+import type { MemoExoticComponent } from 'react'
+import type { LabwareDefinition2 } from '@opentrons/shared-data'
+import type { WellLabelOption } from '../LabwareRender'
+import type { HighlightedWellLabels } from './types'
+
+// magic layout numbers to make the letters close to the edges of the labware
+const LETTER_COLUMN_X_INSIDE = 4
+const NUMBER_COLUMN_Y_FROM_TOP_INSIDE = 5
+
+const LETTER_COLUMN_X_OUTSIDE = -4
+const NUMBER_COLUMN_Y_FROM_TOP_OUTSIDE = -5
+
+export interface WellLabelsProps {
+  definition: LabwareDefinition2
+  wellLabelOption: WellLabelOption
+  highlightedWellLabels?: HighlightedWellLabels
+  wellLabelColor?: string
+}
+
+const Labels = (props: {
+  definition: LabwareDefinition2
+  wells: string[]
+  wellLabelOption: WellLabelOption
+  isLetterColumn?: boolean
+  highlightedWellLabels?: HighlightedWellLabels
+  wellLabelColor?: string
+}): JSX.Element => {
+  const { wellLabelOption, highlightedWellLabels, wellLabelColor } = props
+  const highlightColor = highlightedWellLabels?.color ?? C_BLUE
+  const fillColor = wellLabelColor ?? C_BLACK
+  const LETTER_COLUMN_X =
+    wellLabelOption === WELL_LABEL_OPTIONS.SHOW_LABEL_INSIDE
+      ? LETTER_COLUMN_X_INSIDE
+      : LETTER_COLUMN_X_OUTSIDE
+
+  const NUMBER_COLUMN_Y_FROM_TOP =
+    wellLabelOption === WELL_LABEL_OPTIONS.SHOW_LABEL_INSIDE
+      ? NUMBER_COLUMN_Y_FROM_TOP_INSIDE
+      : NUMBER_COLUMN_Y_FROM_TOP_OUTSIDE
+
+  return (
+    <>
+      {props.wells.map(wellName => {
+        const well = props.definition.wells[wellName]
+        return (
+          <RobotCoordsText
+            key={wellName}
+            data-testid={
+              wellLabelOption === WELL_LABEL_OPTIONS.SHOW_LABEL_INSIDE
+                ? 'WellsLabels_show_inside'
+                : 'WellsLabels_show_outside'
+            }
+            x={props.isLetterColumn === true ? LETTER_COLUMN_X : well.x}
+            y={
+              props.isLetterColumn === true
+                ? well.y
+                : props.definition.dimensions.yDimension -
+                  NUMBER_COLUMN_Y_FROM_TOP
+            }
+            style={{
+              color: COLORS.grey50, // LEGACY --c-font-dark
+              fontSize: '0.2rem', // LEGACY --fs-micro
+              textAnchor: 'middle',
+              dominantBaseline:
+                props.isLetterColumn === true ? 'middle' : 'auto',
+            }}
+            fill={
+              highlightedWellLabels?.wells.includes(wellName) ?? false
+                ? highlightColor
+                : fillColor
+            }
+            canHighlight={false}
+          >
+            {(props.isLetterColumn === true ? /[A-Z]+/g : /\d+/g).exec(
+              wellName
+            )}
+          </RobotCoordsText>
+        )
+      })}
+    </>
+  )
+}
+
+export function WellLabelsComponent(props: WellLabelsProps): JSX.Element {
+  const {
+    definition,
+    wellLabelOption,
+    highlightedWellLabels,
+    wellLabelColor,
+  } = props
+  const letterColumn = definition.ordering[0] ?? []
+  const numberRow = definition.ordering.map(wellCol => wellCol[0])
+
+  return (
+    <g>
+      <Labels
+        definition={definition}
+        wells={letterColumn}
+        wellLabelOption={wellLabelOption}
+        highlightedWellLabels={highlightedWellLabels}
+        wellLabelColor={wellLabelColor}
+        isLetterColumn
+      />
+      <Labels
+        definition={definition}
+        wells={numberRow}
+        wellLabelOption={wellLabelOption}
+        highlightedWellLabels={highlightedWellLabels}
+        wellLabelColor={wellLabelColor}
+      />
+    </g>
+  )
+}
+
+export const WellLabels: MemoExoticComponent<typeof WellLabelsComponent> = memo(
+  WellLabelsComponent
+)

package/src/hardware-sim/Labware/labwareInternals/__tests__/LabwareWellLabels.test.tsx

@@ -0,0 +1,69 @@
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+
+import '@testing-library/jest-dom/vitest'
+
+import { fixture12Trough as _fixture12Trough } from '@opentrons/shared-data'
+
+import { LabwareWellLabels } from '../LabwareWellLabels'
+
+import type { LabwareDefinition2 } from '@opentrons/shared-data'
+
+const troughFixture12 = _fixture12Trough as LabwareDefinition2
+
+describe('LabwareWellLabels', () => {
+  it('should render well labels', () => {
+    const props = {
+      definition: troughFixture12,
+    }
+    render(
+      <svg>
+        <LabwareWellLabels {...props} />
+      </svg>
+    )
+
+    screen.getByText('A')
+    new Array(12)
+      .fill(null)
+      .forEach((_, index) => screen.getByText(`${index + 1}`))
+  })
+  it('should highlight the well labels with the given color', () => {
+    expect.assertions(13) // there should be 13 highlighted well labels
+    const props = {
+      definition: troughFixture12,
+      highlightedWellLabels: {
+        wells: Object.keys(troughFixture12.wells as Record<string, unknown>),
+        color: 'blue',
+      },
+    }
+    render(
+      <svg>
+        <LabwareWellLabels {...props} />
+      </svg>
+    )
+    const letterWellLabel = screen.getByText('A')
+    expect(letterWellLabel.getAttribute('fill')).toBe('blue')
+    new Array(12).fill(null).forEach((_, index) => {
+      const numberWellLabel = screen.getByText(`${index + 1}`)
+      expect(numberWellLabel.getAttribute('fill')).toBe('blue')
+    })
+  })
+  it('should color the well labels', () => {
+    expect.assertions(13) // there should be 13 well labels
+    const props = {
+      definition: troughFixture12,
+      wellLabelColor: 'red',
+    }
+    render(
+      <svg>
+        <LabwareWellLabels {...props} />
+      </svg>
+    )
+    const letterWellLabel = screen.getByText('A')
+    expect(letterWellLabel.getAttribute('fill')).toBe('red')
+    new Array(12).fill(null).forEach((_, index) => {
+      const numberWellLabel = screen.getByText(`${index + 1}`)
+      expect(numberWellLabel.getAttribute('fill')).toBe('red')
+    })
+  })
+})

package/src/hardware-sim/Labware/labwareInternals/__tests__/StrokedWells.test.tsx

@@ -0,0 +1,35 @@
+import { render, screen } from '@testing-library/react'
+import { describe, it, vi } from 'vitest'
+
+import '@testing-library/jest-dom/vitest'
+
+import { fixture12Trough } from '@opentrons/shared-data'
+
+import { StrokedWells } from '../StrokedWells'
+import { WellComponent as Well } from '../Well'
+
+import type { LabwareDefinition2 } from '@opentrons/shared-data'
+
+vi.mock('../Well')
+
+const troughFixture12 = fixture12Trough as LabwareDefinition2
+
+describe('StrokedWells', () => {
+  it('should render a series of wells with the given stroke', () => {
+    vi.mocked(Well).mockImplementation(({ stroke, wellName }) =>
+      // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
+      {
+        return <div>{`well ${wellName} with stroke ${stroke}`}</div>
+      }
+    )
+
+    render(
+      <StrokedWells
+        definition={troughFixture12}
+        strokeByWell={{ A1: 'blue', A2: 'blue' }}
+      />
+    )
+    screen.getByText('well A1 with stroke blue')
+    screen.getByText('well A2 with stroke blue')
+  })
+})