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

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

@@ -1,163 +0,0 @@
-import { getLabwareViewBox } from '@opentrons/shared-data'
-
-import { COLORS } from '../../../helix-design-system'
-import { getTiprackBackgroundColor } from './getTiprackBackgroundColor'
-
-import type { CSSProperties, SVGProps } from 'react'
-import type { LabwareDefinition } from '@opentrons/shared-data'
-
-export type LabwareOutlineProps = {
-  /** 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
-} & (DefinitionProps | DefinitionReplacementProps)
-
-interface DefinitionProps {
-  /** Labware definition to outline */
-  definition: LabwareDefinition
-}
-
-/** Used for rendering an outline without needing a full labware definition. */
-interface DefinitionReplacementProps {
-  definition?: undefined
-  /** x dimension in mm of the outline. */
-  width: number
-  /** y dimension in mm of the outline. */
-  height: number
-  /** minimum x-coordinate (i.e. the left side) of the outline. */
-  minX: number
-  /** minimum y-coordinate (i.e. the bottom) of the outline. */
-  minY: number
-}
-
-const OUTLINE_THICKNESS_MM = 1
-
-export function LabwareOutline(props: LabwareOutlineProps): JSX.Element {
-  const {
-    definition,
-    isTiprack = false,
-    highlight = false,
-    highlightShadow = false,
-    stroke,
-    fill,
-    showRadius = true,
-  } = props
-
-  const { minX, minY, xDimension, yDimension } =
-    definition != null
-      ? getLabwareViewBox(definition)
-      : {
-          minX: props.minX,
-          minY: props.minY,
-          xDimension: props.width,
-          yDimension: props.height,
-        }
-
-  const { parameters = { isTiprack, loadName: '' } } = definition ?? {}
-
-  let backgroundFill
-  if (fill != null) {
-    backgroundFill = fill
-  } else {
-    backgroundFill = parameters.isTiprack
-      ? getTiprackBackgroundColor(parameters.loadName)
-      : 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}
-            minX={minX}
-            minY={minY}
-            xDimension={xDimension}
-            yDimension={yDimension}
-            filter={highlightShadow ? 'url(#feOffset)' : ''}
-            stroke={COLORS.blue50}
-            rx="8"
-            ry="8"
-            showRadius={showRadius}
-            fill={backgroundFill}
-          />
-        </>
-      ) : (
-        <LabwareBorder
-          borderThickness={OUTLINE_THICKNESS_MM}
-          minX={minX}
-          minY={minY}
-          xDimension={xDimension}
-          yDimension={yDimension}
-          stroke={stroke ?? (parameters.isTiprack ? '#979797' : COLORS.black90)}
-          fill={backgroundFill}
-          showRadius={showRadius}
-        />
-      )}
-    </>
-  )
-}
-
-interface LabwareBorderProps extends SVGProps<SVGRectElement> {
-  borderThickness: number
-  minX: number
-  minY: number
-  xDimension: number
-  yDimension: number
-  showRadius?: boolean
-}
-function LabwareBorder(props: LabwareBorderProps): JSX.Element {
-  const {
-    borderThickness,
-    minX,
-    minY,
-    xDimension,
-    yDimension,
-    showRadius = true,
-    ...svgProps
-  } = props
-  return (
-    <rect
-      x={minX + borderThickness}
-      y={minY + 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

@@ -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 { LabwareDefinition } 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: LabwareDefinition
-  highlightedWellLabels?: HighlightedWellLabels
-  wellLabelColor?: string
-}
-
-const Labels = (props: {
-  definition: LabwareDefinition
-  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 { LabwareDefinition, LabwareWell } from '@opentrons/shared-data'
-import type { WellMouseEvent, WellStroke } from './types'
-
-export interface StaticLabwareProps {
-  /** Labware definition to render */
-  definition: LabwareDefinition
-  /** 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 { LabwareDefinition } from '@opentrons/shared-data'
-
-export interface StrokedWellProps {
-  definition: LabwareDefinition
-  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 { LabwareDefinition } from '@opentrons/shared-data'
-import type { WellGroup } from './types'
-
-type WellContents =
-  | 'tipPresent'
-  | 'tipMissing'
-  | 'defaultWell'
-  | 'disabledWell'
-  | 'highlightedWell'
-  | 'selectedWell'
-export interface StyledWellProps {
-  wellContents: WellContents
-  definition: LabwareDefinition
-  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,77 +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 { WellMouseEvent } from './types'
-
-export interface WellProps extends CSSProperties {
-  /** 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
-)