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

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

@@ -0,0 +1,13 @@
+import { COLORS } from '../../../helix-design-system'
+
+export function OpentronsUniversalFlatAdapter(): JSX.Element {
+  return (
+    <svg>
+      <path
+        fill="none"
+        stroke={COLORS.black90}
+        d="M 55.0327 34.1351 c -1.8356 0 -3.3182 1.4826 -3.3182 3.3182 c 0 1.8356 1.4826 3.3182 3.3182 3.3182 c 1.8356 0 3.3182 -1.4826 3.3182 -3.3182 C 58.3509 35.6177 56.8683 34.1351 55.0327 34.1351 z M 55.0327 39.9596 c -1.412 0 -2.5063 -1.1296 -2.5063 -2.5063 c 0 -1.412 1.1649 -2.5063 2.5063 -2.5063 c 1.412 0 2.5063 1.1296 2.5063 2.5063 C 57.539 38.83 56.4094 39.9596 55.0327 39.9596 z M 111.0538 5.7892 C 111.0538 2.5769 108.4416 0 105.2293 0 H 5.8245 C 2.6122 0 0 2.6122 0 5.8245 v 63.3635 c 0 3.2476 2.6122 5.8245 5.8245 5.8245 h 99.4048 c 3.2123 0 5.7539 -2.5416 5.8245 -5.7186 l 0 -0.6354 c 0 -0.5295 0.353 -0.9178 0.8472 -0.9178 h 1.7297 h 2.1533 h 10.3429 c 0.706 0 1.3061 -0.6707 1.3061 -1.4826 v -3.7065 c 0 -0.8119 -0.6001 -1.4826 -1.3061 -1.4826 l -14.1906 -0.0353 c -0.4942 0 -0.8825 -0.3883 -0.8825 -0.9178 v -0.6354 V 15.6379 v -0.6354 c 0 -0.5295 0.353 -0.9178 0.8472 -0.9178 h 1.7297 h 2.1533 h 10.3429 c 0.706 0 1.3061 -0.6707 1.3061 -1.4826 V 8.8603 c 0 -0.8119 -0.6001 -1.4826 -1.3061 -1.4826 l -14.1906 -0.0353 c -0.4942 0 -0.8825 -0.4236 -0.8825 -0.9178 M 120.1612 13.2728 V 8.1896 h 0.9884 v 5.0832 H 120.1612 z M 126.6564 8.8603 v 3.7065 c 0 0.353 -0.2471 0.6707 -0.5295 0.6707 h -4.1654 V 8.1896 h 4.1654 C 126.4093 8.1896 126.6564 8.5073 126.6564 8.8603 z M 119.3846 8.1896 v 5.0832 H 115.784 h -2.1533 H 111.901 c -0.3177 0 -0.6001 0.1059 -0.8472 0.2471 V 7.8719 c 0.2471 0.1765 0.5648 0.2824 0.8825 0.2824 L 119.3846 8.1896 z M 120.1612 66.9641 v -5.0832 h 0.9884 v 5.0832 H 120.1612 z M 126.6564 62.5869 v 3.7065 c 0 0.353 -0.2471 0.6707 -0.5295 0.6707 h -4.1654 v -5.0832 h 4.1654 C 126.4093 61.9162 126.6564 62.2339 126.6564 62.5869 z M 119.3846 61.9162 v 5.0832 H 115.784 h -2.1533 H 111.901 c -0.3177 0 -0.6001 0.1059 -0.8472 0.2471 v -5.6127 c 0.2471 0.1765 0.5648 0.2824 0.8825 0.2824 L 119.3846 61.9162 z M 110.2772 68.6938 v 0.5295 c 0 2.7887 -2.2945 5.0479 -5.0479 5.0479 H 5.8245 c -2.7887 0 -5.0479 -2.2945 -5.0479 -5.0479 V 5.8245 c 0 -2.7887 2.2945 -5.0479 5.0479 -5.0479 h 99.4048 c 2.7887 0 5.0479 2.2945 5.0479 5.0479 v 9.1427 v 0.6354 V 68.6938 z"
+      />
+    </svg>
+  )
+}

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

@@ -0,0 +1,74 @@
+import { COLORS } from '../../../helix-design-system'
+import { LabwareOutline } from '../labwareInternals'
+import { Opentrons96DeepWellAdapter } from './Opentrons96DeepWellAdapter'
+import { Opentrons96FlatBottomAdapter } from './Opentrons96FlatBottomAdapter'
+import { OpentronsAluminumFlatBottomPlate } from './OpentronsAluminumFlatBottomPlate'
+import { OpentronsAutoclavableDeckRiser } from './OpentronsAutoclavableDeckRiser'
+import { OpentronsFlex96TiprackAdapter } from './OpentronsFlex96TiprackAdapter'
+import { OpentronsToughPCRAutoSealingLid } from './OpentronsToughPCRAutoSealingLid'
+import { OpentronsUniversalFlatAdapter } from './OpentronsUniversalFlatAdapter'
+
+import type { LabwareDefinition2 } from '@opentrons/shared-data'
+
+const LABWARE_ADAPTER_LOADNAME_PATHS = {
+  opentrons_96_deep_well_adapter: Opentrons96DeepWellAdapter,
+  opentrons_96_flat_bottom_adapter: Opentrons96FlatBottomAdapter,
+  opentrons_aluminum_flat_bottom_plate: OpentronsAluminumFlatBottomPlate,
+  opentrons_flex_96_tiprack_adapter: OpentronsFlex96TiprackAdapter,
+  opentrons_universal_flat_adapter: OpentronsUniversalFlatAdapter,
+  opentrons_tough_pcr_auto_sealing_lid: OpentronsToughPCRAutoSealingLid,
+  opentrons_flex_deck_riser: OpentronsAutoclavableDeckRiser,
+}
+
+export type LabwareAdapterLoadName = keyof typeof LABWARE_ADAPTER_LOADNAME_PATHS
+export const labwareAdapterLoadNames = Object.keys(
+  LABWARE_ADAPTER_LOADNAME_PATHS
+)
+
+export interface LabwareAdapterProps {
+  labwareLoadName: LabwareAdapterLoadName
+  definition?: LabwareDefinition2
+  highlight?: boolean
+  highlightShadow?: boolean
+}
+
+export const LabwareAdapter = (
+  props: LabwareAdapterProps
+): JSX.Element | null => {
+  const {
+    labwareLoadName,
+    definition,
+    highlight = false,
+    highlightShadow,
+  } = props
+  const highlightOutline =
+    highlight && definition != null ? (
+      <LabwareOutline
+        definition={definition}
+        highlight={highlight}
+        fill={COLORS.transparent}
+      />
+    ) : null
+  const highlightShadowOutline =
+    highlight && definition != null ? (
+      <LabwareOutline
+        definition={definition}
+        highlight={highlight}
+        highlightShadow={highlightShadow}
+        fill={COLORS.transparent}
+      />
+    ) : null
+  const SVGElement = LABWARE_ADAPTER_LOADNAME_PATHS[labwareLoadName]
+
+  return (
+    <g>
+      {/**
+       * render an initial shadow outline first in the DOM so that the SVG highlight shadow
+       * does not layer over the inside of the SVG labware adapter
+       */}
+      {highlightShadowOutline}
+      <SVGElement />
+      {highlightOutline}
+    </g>
+  )
+}

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

@@ -0,0 +1,95 @@
+import {
+  fixture12Trough as _fixture12Trough,
+  fixture24Tuberack as _fixture24Tuberack,
+  fixture96Plate as _fixture96Plate,
+  fixtureTiprack10ul as _fixtureTiprack10ul,
+  fixtureTiprack300ul as _fixtureTiprack300ul,
+  fixtureTiprack1000ul as _fixtureTiprack1000ul,
+} from '@opentrons/shared-data'
+
+import { RobotWorkSpace } from '../Deck'
+import { LabwareRender } from './LabwareRender'
+
+import type { Meta, Story } from '@storybook/react'
+import type * as React from 'react'
+import type { LabwareDefinition2 } from '@opentrons/shared-data'
+
+const fixture96Plate = _fixture96Plate as LabwareDefinition2
+const fixture24Tuberack = _fixture24Tuberack as LabwareDefinition2
+const fixture12Trough = _fixture12Trough as LabwareDefinition2
+
+const fixtureTiprack10 = _fixtureTiprack10ul as LabwareDefinition2
+const fixtureTiprack300 = _fixtureTiprack300ul as LabwareDefinition2
+const fixtureTiprack1000 = _fixtureTiprack1000ul as LabwareDefinition2
+
+const labwareDefMap: Record<string, LabwareDefinition2> = {
+  [fixture96Plate.metadata.displayName]: fixture96Plate,
+  [fixture24Tuberack.metadata.displayName]: fixture24Tuberack,
+  [fixture12Trough.metadata.displayName]: fixture12Trough,
+}
+
+const tipRackDefMap: Record<string, LabwareDefinition2> = {
+  [fixtureTiprack10.metadata.displayName]: fixtureTiprack10,
+  [fixtureTiprack300.metadata.displayName]: fixtureTiprack300,
+  [fixtureTiprack1000.metadata.displayName]: fixtureTiprack1000,
+}
+
+export default {
+  title: 'Library/Molecules/Simulation/Labware',
+  decorators: [
+    Story => (
+      <RobotWorkSpace
+        viewBox={`0 0 ${fixture96Plate.dimensions.xDimension} ${fixture96Plate.dimensions.yDimension}`}
+      >
+        {() => <Story />}
+      </RobotWorkSpace>
+    ),
+  ],
+} as Meta
+
+const Template: Story<React.ComponentProps<typeof LabwareRender>> = ({
+  definition,
+  ...args
+}) => {
+  const displayName: unknown = definition
+  const allLabwareMap = { ...labwareDefMap, ...tipRackDefMap }
+  const resolvedDef: typeof definition = allLabwareMap[displayName as string]
+  return <LabwareRender definition={resolvedDef} {...args} />
+}
+export const Basic = Template.bind({})
+Basic.argTypes = {
+  definition: {
+    control: {
+      type: 'select',
+      options: Object.keys(labwareDefMap).map(
+        d => labwareDefMap[d].metadata.displayName
+      ),
+    },
+    defaultValue: fixture96Plate.metadata.displayName,
+  },
+}
+Basic.args = {
+  wellLabelOption: 'SHOW_LABEL_INSIDE',
+  highlightedWells: { A1: null, A2: null },
+  wellFill: { A1: 'maroon', A2: 'lavender' },
+  highlightLabware: false,
+}
+
+export const TipRack = Template.bind({})
+TipRack.argTypes = {
+  definition: {
+    control: {
+      type: 'select',
+      options: Object.keys(tipRackDefMap).map(
+        d => tipRackDefMap[d].metadata.displayName
+      ),
+    },
+    defaultValue: fixtureTiprack10.metadata.displayName,
+  },
+}
+TipRack.args = {
+  wellLabelOption: 'SHOW_LABEL_INSIDE',
+  highlightedWells: { A1: null, A2: null },
+  missingTips: { C3: null, D4: null },
+  highlightLabware: false,
+}

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

@@ -0,0 +1,173 @@
+import { LabwareAdapter, labwareAdapterLoadNames } from './LabwareAdapter'
+import {
+  FilledWells,
+  StaticLabware,
+  StrokedWells,
+  StyledWells,
+  WellLabels,
+} from './labwareInternals'
+
+import type { CSSProperties } from 'styled-components'
+import type { RefObject } from 'react'
+import type { LabwareDefinition2 } from '@opentrons/shared-data'
+import type { LabwareAdapterLoadName } from './LabwareAdapter'
+import type {
+  HighlightedWellLabels,
+  WellFill,
+  WellGroup,
+  WellMouseEvent,
+  WellStroke,
+} from './labwareInternals/types'
+
+export const WELL_LABEL_OPTIONS = {
+  SHOW_LABEL_INSIDE: 'SHOW_LABEL_INSIDE',
+  SHOW_LABEL_OUTSIDE: 'SHOW_LABEL_OUTSIDE',
+} as const
+
+export type WellLabelOption = keyof typeof WELL_LABEL_OPTIONS
+
+export interface LabwareRenderProps {
+  /** Labware definition to render */
+  definition: LabwareDefinition2
+  /** Opional Prop for labware on heater shakers sitting on right side of the deck */
+  shouldRotateAdapterOrientation?: boolean
+  /** option to show well labels inside or outside of labware outline */
+  wellLabelOption?: WellLabelOption
+  /** wells to highlight */
+  highlightedWells?: WellGroup | null
+  /** option for none highlighted wells to be disabled */
+  disabledWells?: WellGroup[]
+  missingTips?: WellGroup | null
+  /** color to render well labels */
+  wellLabelColor?: string
+  /** option to highlight well labels with specified color */
+  highlightedWellLabels?: HighlightedWellLabels
+  selectedWells?: WellGroup | null
+  /** CSS color to fill specified wells */
+  wellFill?: WellFill
+  /** CSS color to stroke specified wells */
+  wellStroke?: WellStroke
+  /** CSS color to stroke the labware outline */
+  labwareStroke?: CSSProperties['stroke']
+  /** adds thicker blue border with blur to labware */
+  highlight?: boolean
+  /** adds a drop shadow to the highlight border */
+  highlightShadow?: 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
+  showBorder?: boolean
+  strokeColor?: string
+}
+
+export const LabwareRender = (props: LabwareRenderProps): JSX.Element => {
+  const { gRef, definition } = props
+
+  const cornerOffsetFromSlot = definition.cornerOffsetFromSlot
+  const labwareLoadName = definition.parameters.loadName
+
+  if (labwareAdapterLoadNames.includes(labwareLoadName)) {
+    const { shouldRotateAdapterOrientation } = props
+    const { xDimension, yDimension } = props.definition.dimensions
+
+    return (
+      <g
+        transform={
+          shouldRotateAdapterOrientation
+            ? `rotate(180, ${xDimension / 2}, ${yDimension / 2})`
+            : 'rotate(0, 0, 0)'
+        }
+      >
+        <g
+          transform={
+            shouldRotateAdapterOrientation
+              ? `translate(${-cornerOffsetFromSlot.x}, ${-cornerOffsetFromSlot.y})`
+              : `translate(${cornerOffsetFromSlot.x}, ${cornerOffsetFromSlot.y})`
+          }
+          ref={gRef}
+          onClick={props.onLabwareClick}
+        >
+          <LabwareAdapter
+            labwareLoadName={labwareLoadName as LabwareAdapterLoadName}
+            definition={definition}
+            highlight={props.highlight}
+            highlightShadow={props.highlightShadow}
+          />
+        </g>
+      </g>
+    )
+  }
+  return (
+    <g
+      transform={`translate(${cornerOffsetFromSlot.x}, ${cornerOffsetFromSlot.y})`}
+      ref={gRef}
+    >
+      <StaticLabware
+        showBorder={props.showBorder}
+        definition={props.definition}
+        onMouseEnterWell={props.onMouseEnterWell}
+        onMouseLeaveWell={props.onMouseLeaveWell}
+        onLabwareClick={props.onLabwareClick}
+        highlight={props.highlight}
+        highlightShadow={props.highlightShadow}
+        wellStroke={props.wellStroke}
+      />
+      {props.wellStroke != null ? (
+        <StrokedWells
+          definition={props.definition}
+          strokeByWell={props.wellStroke}
+        />
+      ) : null}
+      {props.wellFill != null ? (
+        <FilledWells
+          definition={props.definition}
+          fillByWell={props.wellFill}
+          strokeColor={props.strokeColor}
+        />
+      ) : null}
+      {props.disabledWells != null
+        ? props.disabledWells.map((well, index) => (
+            <StyledWells
+              key={index}
+              wellContents="disabledWell"
+              definition={props.definition}
+              wells={well}
+            />
+          ))
+        : null}
+      {props.highlightedWells != null ? (
+        <StyledWells
+          wellContents="highlightedWell"
+          definition={props.definition}
+          wells={props.highlightedWells}
+        />
+      ) : null}
+      {props.selectedWells != null ? (
+        <StyledWells
+          wellContents="selectedWell"
+          definition={props.definition}
+          wells={props.selectedWells}
+        />
+      ) : null}
+      {props.missingTips != null ? (
+        <StyledWells
+          wellContents="tipMissing"
+          definition={props.definition}
+          wells={props.missingTips}
+        />
+      ) : null}
+      {props.wellLabelOption != null &&
+      props.definition.metadata.displayCategory !== 'adapter' ? (
+        <WellLabels
+          definition={props.definition}
+          wellLabelOption={props.wellLabelOption}
+          wellLabelColor={props.wellLabelColor}
+          highlightedWellLabels={props.highlightedWellLabels}
+        />
+      ) : null}
+    </g>
+  )
+}

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

@@ -0,0 +1,47 @@
+import { render, screen } from '@testing-library/react'
+import { beforeEach, describe, it, vi } from 'vitest'
+
+import '@testing-library/jest-dom/vitest'
+
+import { fixture12Trough } from '@opentrons/shared-data'
+
+import { Labware } from '../Labware'
+import {
+  LabwareOutline,
+  LabwareWellLabelsComponent as LabwareWellLabels,
+} from '../labwareInternals'
+
+import type { LabwareDefinition2 } from '@opentrons/shared-data'
+
+vi.mock('../labwareInternals')
+
+const troughFixture12 = fixture12Trough as LabwareDefinition2
+
+describe('Labware', () => {
+  beforeEach(() => {
+    vi.mocked(LabwareOutline).mockReturnValue(<div>mock labware outline</div>)
+  })
+
+  it('should render a labware outline', () => {
+    const props = { definition: troughFixture12 }
+    render(
+      <svg>
+        <Labware {...props} />
+      </svg>
+    )
+    screen.getByText('mock labware outline')
+  })
+  it('should render well labels', () => {
+    const props = {
+      definition: troughFixture12,
+      showLabels: true,
+    }
+    vi.mocked(LabwareWellLabels).mockReturnValue(<div>mock well labels</div>)
+    render(
+      <svg>
+        <Labware {...props} />
+      </svg>
+    )
+    screen.getByText('mock well labels')
+  })
+})

package/src/hardware-sim/Labware/__tests__/LabwareRender.test.tsx

@@ -0,0 +1,58 @@
+import { render, screen } from '@testing-library/react'
+import { beforeEach, describe, it, vi } from 'vitest'
+
+import '@testing-library/jest-dom/vitest'
+
+import { fixture12Trough } from '@opentrons/shared-data'
+
+import {
+  StaticLabwareComponent as StaticLabware,
+  StrokedWellsComponent as StrokedWells,
+  WellLabelsComponent as WellLabels,
+} from '../labwareInternals'
+import { LabwareRender, WELL_LABEL_OPTIONS } from '../LabwareRender'
+
+import type { LabwareDefinition2 } from '@opentrons/shared-data'
+
+vi.mock('../labwareInternals')
+
+const troughFixture12 = fixture12Trough as LabwareDefinition2
+
+describe('LabwareRender', () => {
+  beforeEach(() => {
+    vi.mocked(StaticLabware).mockReturnValue(<div>mock static labware</div>)
+  })
+
+  it('should render a static labware component', () => {
+    const props = { definition: troughFixture12 }
+    render(
+      <svg>
+        <LabwareRender {...props} />
+      </svg>
+    )
+    screen.getByText('mock static labware')
+  })
+  it('should render stroked wells', () => {
+    const props = { definition: troughFixture12, wellStroke: { A1: 'blue' } }
+    vi.mocked(StrokedWells).mockReturnValue(<div>mock stroked wells</div>)
+    render(
+      <svg>
+        <LabwareRender {...props} />
+      </svg>
+    )
+    screen.getByText('mock stroked wells')
+  })
+  it('should render well labels', () => {
+    const props = {
+      definition: troughFixture12,
+      wellLabelOption: WELL_LABEL_OPTIONS.SHOW_LABEL_INSIDE,
+    }
+    vi.mocked(WellLabels).mockReturnValue(<div>mock well labels</div>)
+    render(
+      <svg>
+        <LabwareRender {...props} />
+      </svg>
+    )
+    screen.getByText('mock well labels')
+  })
+})

package/src/hardware-sim/Labware/index.ts

@@ -0,0 +1,5 @@
+export * from './labwareInternals/index'
+export * from './LabwareRender'
+export * from './Labware'
+
+export * from './labwareInternals/types'

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

@@ -0,0 +1,42 @@
+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 FilledWellsProps {
+  definition: LabwareDefinition2
+  fillByWell: Record<string, CSSProperties['fill']>
+  strokeColor?: string
+}
+
+function FilledWellsComponent(props: FilledWellsProps): JSX.Element {
+  const { definition, fillByWell, strokeColor = COLORS.black90 } = props
+  return (
+    <>
+      {map<Record<string, CSSProperties['fill']>, ReactNode>(
+        fillByWell,
+        (color: CSSProperties['fill'], wellName: string): JSX.Element => {
+          return (
+            <Well
+              key={wellName}
+              wellName={wellName}
+              well={definition.wells[wellName]}
+              fill={color}
+              stroke={strokeColor}
+              strokeWidth="0.6"
+            />
+          )
+        }
+      )}
+    </>
+  )
+}
+
+export const FilledWells: MemoExoticComponent<
+  typeof FilledWellsComponent
+> = memo(FilledWellsComponent)

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

@@ -0,0 +1,138 @@
+import { SLOT_RENDER_HEIGHT, SLOT_RENDER_WIDTH } from '@opentrons/shared-data'
+
+import { COLORS } from '../../../helix-design-system'
+import { getTiprackBackgroundColor } from './getTiprackBackgroundColor'
+
+import type { CSSProperties } from 'styled-components'
+import type { SVGProps } from 'react'
+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, loadName: '' },
+    dimensions = { xDimension: width, yDimension: height },
+  } = 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}
+            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}
+    />
+  )
+}