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

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

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

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

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

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

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

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

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

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

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

@@ -1,138 +0,0 @@
-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}
-    />
-  )
-}