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

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

@@ -0,0 +1,133 @@
+import { SLOT_RENDER_WIDTH, SLOT_RENDER_HEIGHT } from '@opentrons/shared-data'
+import { COLORS } from '../../../helix-design-system'
+
+import type { SVGProps } from 'react'
+import type { CSSProperties } from 'styled-components'
+import type { LabwareDefinition2 } from '@opentrons/shared-data'
+
+export interface LabwareOutlineProps {
+  /** Labware definition to outline */
+  definition?: LabwareDefinition2
+  /** x dimension in mm of this labware, used if definition doesn't supply dimensions, defaults to 127.76 */
+  width?: number
+  /** y dimension in mm of this labware, used if definition doesn't supply dimensions, defaults to 85.48 */
+  height?: number
+  /** if this labware is a tip rack, darken background and lighten borderx dimension in mm of this labware, used if definition doesn't supply dimensions, defaults to false */
+  isTiprack?: boolean
+  /** adds thicker blue border with blur to labware, defaults to false */
+  highlight?: boolean
+  /** adds a drop shadow to the highlight border */
+  highlightShadow?: boolean
+  /** [legacy] override the border color */
+  stroke?: CSSProperties['stroke']
+  fill?: CSSProperties['fill']
+  showRadius?: boolean
+}
+
+const OUTLINE_THICKNESS_MM = 1
+
+export function LabwareOutline(props: LabwareOutlineProps): JSX.Element {
+  const {
+    definition,
+    width = SLOT_RENDER_WIDTH,
+    height = SLOT_RENDER_HEIGHT,
+    isTiprack = false,
+    highlight = false,
+    highlightShadow = false,
+    stroke,
+    fill,
+    showRadius = true,
+  } = props
+  const {
+    parameters = { isTiprack },
+    dimensions = { xDimension: width, yDimension: height },
+  } = definition ?? {}
+
+  let backgroundFill
+  if (fill != null) {
+    backgroundFill = fill
+  } else {
+    backgroundFill = parameters.isTiprack ? '#CCCCCC' : COLORS.white
+  }
+  return (
+    <>
+      {highlight ? (
+        <>
+          <defs>
+            <filter id="feOffset" filterUnits="objectBoundingBox">
+              {/* *
+               * TODO(bh, 2024-08-23): layer drop shadow filters to mimic CSS box shadow - may need to evaluate performance
+               * https://stackoverflow.com/questions/22486039/css3-filter-drop-shadow-spread-property-alternatives
+               * */}
+              <feDropShadow
+                dx="0"
+                dy="0"
+                stdDeviation="3"
+                floodColor={COLORS.blue50}
+              />
+              <feDropShadow
+                dx="0"
+                dy="0"
+                stdDeviation="1.75"
+                floodColor={COLORS.blue50}
+              />
+              <feDropShadow
+                dx="0"
+                dy="0"
+                stdDeviation="1"
+                floodColor={COLORS.blue50}
+              />
+            </filter>
+          </defs>
+          <LabwareBorder
+            borderThickness={2.2 * OUTLINE_THICKNESS_MM}
+            xDimension={dimensions.xDimension}
+            yDimension={dimensions.yDimension}
+            filter={highlightShadow ? 'url(#feOffset)' : ''}
+            stroke={COLORS.blue50}
+            rx="8"
+            ry="8"
+            showRadius={showRadius}
+            fill={backgroundFill}
+          />
+        </>
+      ) : (
+        <LabwareBorder
+          borderThickness={OUTLINE_THICKNESS_MM}
+          xDimension={dimensions.xDimension}
+          yDimension={dimensions.yDimension}
+          stroke={stroke ?? (parameters.isTiprack ? '#979797' : COLORS.black90)}
+          fill={backgroundFill}
+          showRadius={showRadius}
+        />
+      )}
+    </>
+  )
+}
+
+interface LabwareBorderProps extends SVGProps<SVGRectElement> {
+  borderThickness: number
+  xDimension: number
+  yDimension: number
+  showRadius?: boolean
+}
+function LabwareBorder(props: LabwareBorderProps): JSX.Element {
+  const {
+    borderThickness,
+    xDimension,
+    yDimension,
+    showRadius = true,
+    ...svgProps
+  } = props
+  return (
+    <rect
+      x={borderThickness}
+      y={borderThickness}
+      strokeWidth={2 * borderThickness}
+      width={xDimension - 2 * borderThickness}
+      height={yDimension - 2 * borderThickness}
+      rx={showRadius ? 6 * borderThickness : 0}
+      {...svgProps}
+    />
+  )
+}

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

@@ -0,0 +1,119 @@
+import { memo } from 'react'
+import { C_BLACK, C_BLUE } from '../../../styles/colors'
+import { RobotCoordsText } from '../../Deck'
+import { TYPOGRAPHY } from '../../../ui-style-constants'
+
+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 { memo, Fragment } from 'react'
+import styled from 'styled-components'
+import flatMap from 'lodash/flatMap'
+
+import { LabwareOutline } from './LabwareOutline'
+import { Well } from './Well'
+import { STYLE_BY_WELL_CONTENTS } from './StyledWells'
+import { COLORS } from '../../../helix-design-system'
+
+import type { MemoExoticComponent } from 'react'
+import type { LabwareDefinition2, LabwareWell } from '@opentrons/shared-data'
+import type { WellMouseEvent, WellStroke } from './types'
+import type { CSSProperties } from 'styled-components'
+
+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,40 @@
+import { memo } from 'react'
+import map from 'lodash/map'
+import { Well } from './Well'
+import { COLORS } from '../../../helix-design-system'
+
+import type { MemoExoticComponent, ReactNode } from 'react'
+import type { CSSProperties } from 'styled-components'
+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,79 @@
+import { memo } from 'react'
+import { Well } from './Well'
+import { COLORS } from '../../../helix-design-system'
+
+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,75 @@
+import { memo } from 'react'
+import { INTERACTIVE_WELL_DATA_ATTRIBUTE } from '@opentrons/shared-data'
+import { COLORS } from '../../../helix-design-system'
+
+import type { CSSProperties, MouseEvent, MemoExoticComponent } from 'react'
+import type { LabwareWell } from '@opentrons/shared-data'
+import type { WellMouseEvent } from './types'
+import type { StyleProps } from '../../../primitives'
+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,123 @@
+import { memo } from 'react'
+import { C_BLACK, C_BLUE } from '../../../styles/colors'
+import { RobotCoordsText } from '../../Deck'
+import { WELL_LABEL_OPTIONS } from '../LabwareRender'
+import { COLORS } from '../../../helix-design-system'
+
+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
+)