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

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

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

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

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

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

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

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

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

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