@opentrons/components 0.1.6-alpha.15 → 0.1.6-alpha.17

package/src/hardware-sim/Pipette/EmanatingNozzle.tsx

@@ -0,0 +1,52 @@
+import { Fragment } from 'react'
+import { C_SELECTED_DARK, C_TRANSPARENT } from '../../styles'
+import { SINGLE_CHANNEL_PIPETTE_HEIGHT } from './constants'
+
+export const EmanatingNozzle = (props: {
+  cx: number
+  cy: number
+}): JSX.Element => {
+  const { cx, cy } = props
+  return (
+    <Fragment>
+      <circle
+        data-testid="origin_circle"
+        cx={cx}
+        cy={cy}
+        r={0.5}
+        stroke={C_SELECTED_DARK}
+        fill={C_SELECTED_DARK}
+      ></circle>
+      <circle
+        data-testid="emanating_circle"
+        cx={cx}
+        cy={cy}
+        r={0.5}
+        stroke={C_SELECTED_DARK}
+        strokeWidth={'2px'}
+        fill={C_TRANSPARENT}
+      >
+        <animate
+          data-testid="radius_animation"
+          attributeName="r"
+          from={5}
+          to={SINGLE_CHANNEL_PIPETTE_HEIGHT / 2}
+          begin={0}
+          dur={1.1}
+          calcMode="ease-out"
+          repeatCount="indefinite"
+        />
+        <animate
+          data-testid="opacity_animation"
+          attributeName="opacity"
+          from={0.7}
+          to={0}
+          begin={0}
+          dur={1.1}
+          calcMode="linear"
+          repeatCount="indefinite"
+        />
+      </circle>
+    </Fragment>
+  )
+}

package/src/hardware-sim/Pipette/PipetteRender.stories.tsx

@@ -0,0 +1,71 @@
+import { Fragment } from 'react'
+import { getAllLabwareDefs, getAllPipetteNames } from '@opentrons/shared-data'
+import { LabwareRender } from '../Labware'
+import { RobotWorkSpace } from '../Deck'
+import { PipetteRender } from './'
+
+import type { Story, Meta } from '@storybook/react'
+import type { LabwareDefinition2, PipetteName } from '@opentrons/shared-data'
+
+const DECK_MAP_VIEWBOX = '0 -140 230 230'
+
+const opentrons300UlTiprack = getAllLabwareDefs().opentrons96Tiprack300UlV1
+const opentrons10UlTiprack = getAllLabwareDefs().opentrons96Tiprack10UlV1
+const nest12Reservoir15ml = getAllLabwareDefs().nest12Reservoir15MlV1
+const axygenReservoir90ml = getAllLabwareDefs().axygen1Reservoir90MlV1
+const opentrons6TuberackNest50mlConical = getAllLabwareDefs()
+  .opentrons6TuberackNest50MlConicalV1
+
+const labwareDefMap: Record<string, LabwareDefinition2> = {
+  [opentrons300UlTiprack.metadata.displayName]: opentrons300UlTiprack,
+  [opentrons10UlTiprack.metadata.displayName]: opentrons10UlTiprack,
+  [nest12Reservoir15ml.metadata.displayName]: nest12Reservoir15ml,
+  [axygenReservoir90ml.metadata.displayName]: axygenReservoir90ml,
+  [opentrons6TuberackNest50mlConical.metadata
+    .displayName]: opentrons6TuberackNest50mlConical,
+}
+const pipetteNames = Object.keys(getAllPipetteNames()) as PipetteName[]
+
+export default {
+  title: 'Library/Molecules/Simulation/Pipette/PipetteRender',
+} as Meta
+
+const Template: Story<{
+  labwareName: string
+  pipetteName: PipetteName
+}> = args => {
+  const labwareDef = labwareDefMap[args.labwareName]
+  return (
+    <RobotWorkSpace viewBox={DECK_MAP_VIEWBOX}>
+      {() => (
+        <Fragment>
+          <LabwareRender definition={labwareDef} />
+          <PipetteRender
+            labwareDef={labwareDef}
+            pipetteName={args.pipetteName}
+          />
+        </Fragment>
+      )}
+    </RobotWorkSpace>
+  )
+}
+export const Pipette = Template.bind({})
+
+Pipette.argTypes = {
+  labwareName: {
+    control: {
+      type: 'select',
+      options: Object.keys(labwareDefMap).map(
+        d => labwareDefMap[d].metadata.displayName
+      ),
+    },
+    defaultValue: opentrons300UlTiprack.metadata.displayName,
+  },
+  pipetteName: {
+    control: {
+      type: 'select',
+      options: pipetteNames,
+    },
+    defaultValue: pipetteNames[0],
+  },
+}

package/src/hardware-sim/Pipette/PipetteRender.tsx

@@ -0,0 +1,92 @@
+import { getPipetteNameSpecs } from '@opentrons/shared-data'
+import { C_MED_DARK_GRAY, C_MED_GRAY } from '../../styles'
+import { BORDERS } from '../../helix-design-system'
+import { RobotCoordsForeignDiv } from '../Deck/RobotCoordsForeignDiv'
+import {
+  MULTI_CHANNEL_PIPETTE_WIDTH,
+  SINGLE_CHANNEL_PIPETTE_WIDTH,
+  SINGLE_CHANNEL_PIPETTE_HEIGHT,
+  MULTI_CHANNEL_PIPETTE_HEIGHT,
+  MULTI_CHANNEL_CENTER_Y_NOZZLE,
+  MULTI_CHANNEL_Y_OFFSET,
+  NINETY_SIX_CHANNEL_PIPETTE_WIDTH,
+} from './constants'
+import { EmanatingNozzle } from './EmanatingNozzle'
+import { EightEmanatingNozzles } from './EightEmanatingNozzles'
+import type { LabwareDefinition2, PipetteName } from '@opentrons/shared-data'
+
+interface PipetteRenderProps {
+  labwareDef: LabwareDefinition2
+  pipetteName: PipetteName
+  usingMetalProbe?: boolean
+}
+
+export const PipetteRender = (props: PipetteRenderProps): JSX.Element => {
+  const { labwareDef, pipetteName, usingMetalProbe = false } = props
+  const channels = getPipetteNameSpecs(pipetteName)?.channels
+  const cx =
+    channels === 1
+      ? SINGLE_CHANNEL_PIPETTE_WIDTH / 2
+      : MULTI_CHANNEL_PIPETTE_WIDTH / 2
+  const cy =
+    channels === 1
+      ? SINGLE_CHANNEL_PIPETTE_HEIGHT / 2
+      : MULTI_CHANNEL_CENTER_Y_NOZZLE
+  const x = labwareDef.wells.A1.x - cx
+  const y = channels === 1 ? labwareDef.wells.A1.y - cy : MULTI_CHANNEL_Y_OFFSET
+
+  let boxWidth: number
+  let probeOffsetX: number = 0
+  let probeOffsetY: number = 0
+  if (channels === 1) {
+    boxWidth = SINGLE_CHANNEL_PIPETTE_WIDTH
+  } else if (channels === 8) {
+    boxWidth = MULTI_CHANNEL_PIPETTE_WIDTH
+    probeOffsetY = 63
+  } else {
+    boxWidth = NINETY_SIX_CHANNEL_PIPETTE_WIDTH
+    probeOffsetY = 63
+    if (Object.keys(labwareDef.wells).length === 1) {
+      probeOffsetX = 99 / 2
+    }
+  }
+
+  return (
+    <RobotCoordsForeignDiv
+      width={boxWidth}
+      height={
+        channels === 1
+          ? SINGLE_CHANNEL_PIPETTE_HEIGHT
+          : MULTI_CHANNEL_PIPETTE_HEIGHT
+      }
+      x={x - probeOffsetX}
+      y={y}
+      outerProps={{ style: { overflow: 'visible' } }}
+      innerDivProps={{
+        style: {
+          width: '100%',
+          height: '100%',
+          overflow: 'visible',
+          boxSizing: 'border-box',
+          borderRadius: BORDERS.borderRadius4,
+          boxShadow: `inset 0 0 0 1px ${C_MED_DARK_GRAY}`,
+          backgroundColor: `${C_MED_GRAY}80`,
+        },
+      }}
+    >
+      <svg overflow="visible">
+        {channels === 1 || usingMetalProbe ? (
+          <EmanatingNozzle
+            cx={cx}
+            cy={usingMetalProbe ? cy + probeOffsetY : cy}
+          />
+        ) : (
+          <EightEmanatingNozzles
+            cx={usingMetalProbe ? cx - probeOffsetX : cx}
+            initialCy={usingMetalProbe ? cy + probeOffsetY : cy}
+          />
+        )}
+      </svg>
+    </RobotCoordsForeignDiv>
+  )
+}

package/src/hardware-sim/Pipette/__tests__/EightEmanatingNozzles.test.tsx

@@ -0,0 +1,16 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { render } from '@testing-library/react'
+import { EightEmanatingNozzles } from '../EightEmanatingNozzles'
+import { EmanatingNozzle } from '../EmanatingNozzle'
+
+vi.mock('../EmanatingNozzle')
+
+describe('EightEmanatingNozzles', () => {
+  beforeEach(() => {
+    vi.mocked(EmanatingNozzle).mockReturnValue(<div>mock emanating nozzle</div>)
+  })
+  it('should render eight emanating nozzles', () => {
+    render(<EightEmanatingNozzles cx={5} initialCy={10} />)
+    expect(EmanatingNozzle).toHaveBeenCalledTimes(8)
+  })
+})

package/src/hardware-sim/Pipette/__tests__/EmanatingNozzle.test.tsx

@@ -0,0 +1,67 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { C_SELECTED_DARK, C_TRANSPARENT } from '../../../styles'
+import { EmanatingNozzle } from '../EmanatingNozzle'
+import { SINGLE_CHANNEL_PIPETTE_HEIGHT } from '../constants'
+
+describe('EmanatingNozzle', () => {
+  it('should render an small origin circle', () => {
+    render(
+      <svg>
+        <EmanatingNozzle cx={5} cy={10} />
+      </svg>
+    )
+    const originCircle = screen.getByTestId('origin_circle')
+    expect(originCircle).toHaveAttribute('cx', '5')
+    expect(originCircle).toHaveAttribute('cy', '10')
+    expect(originCircle).toHaveAttribute('r', '0.5')
+    expect(originCircle).toHaveAttribute('stroke', C_SELECTED_DARK)
+    expect(originCircle).toHaveAttribute('fill', C_SELECTED_DARK)
+  })
+  it('should render a medium sized animating circle', () => {
+    render(
+      <svg>
+        <EmanatingNozzle cx={5} cy={10} />
+      </svg>
+    )
+    const emanatingCircle = screen.getByTestId('emanating_circle')
+    expect(emanatingCircle).toHaveAttribute('cx', '5')
+    expect(emanatingCircle).toHaveAttribute('cy', '10')
+    expect(emanatingCircle).toHaveAttribute('r', '0.5')
+    expect(emanatingCircle).toHaveAttribute('stroke', C_SELECTED_DARK)
+    expect(emanatingCircle).toHaveAttribute('fill', C_TRANSPARENT)
+  })
+  it('should render a medium sized animating circle that grows', () => {
+    render(
+      <svg>
+        <EmanatingNozzle cx={5} cy={10} />
+      </svg>
+    )
+    const radiusAnimation = screen.getByTestId('radius_animation')
+    expect(radiusAnimation).toHaveAttribute('attributeName', 'r')
+    expect(radiusAnimation).toHaveAttribute('from', '5')
+    expect(radiusAnimation).toHaveAttribute(
+      'to',
+      (SINGLE_CHANNEL_PIPETTE_HEIGHT / 2).toString()
+    )
+    expect(radiusAnimation).toHaveAttribute('begin', '0')
+    expect(radiusAnimation).toHaveAttribute('dur', '1.1')
+    expect(radiusAnimation).toHaveAttribute('calcMode', 'ease-out')
+    expect(radiusAnimation).toHaveAttribute('repeatCount', 'indefinite')
+  })
+  it('should render a medium sized animating circle that fades out', () => {
+    render(
+      <svg>
+        <EmanatingNozzle cx={5} cy={10} />
+      </svg>
+    )
+    const opacityAnimation = screen.getByTestId('opacity_animation')
+    expect(opacityAnimation).toHaveAttribute('attributeName', 'opacity')
+    expect(opacityAnimation).toHaveAttribute('from', '0.7')
+    expect(opacityAnimation).toHaveAttribute('to', '0')
+    expect(opacityAnimation).toHaveAttribute('begin', '0')
+    expect(opacityAnimation).toHaveAttribute('dur', '1.1')
+    expect(opacityAnimation).toHaveAttribute('calcMode', 'linear')
+    expect(opacityAnimation).toHaveAttribute('repeatCount', 'indefinite')
+  })
+})

package/src/hardware-sim/Pipette/__tests__/PipetteRender.test.tsx

@@ -0,0 +1,99 @@
+import type * as React from 'react'
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { screen } from '@testing-library/react'
+import { fixtureTiprack300ul as _fixtureTiprack300ul } from '@opentrons/shared-data'
+import { renderWithProviders } from '../../../testing/utils'
+import { RobotCoordsForeignDiv } from '../../Deck/RobotCoordsForeignDiv'
+import { PipetteRender } from '../PipetteRender'
+import { EmanatingNozzle } from '../EmanatingNozzle'
+import { EightEmanatingNozzles } from '../EightEmanatingNozzles'
+import {
+  SINGLE_CHANNEL_PIPETTE_WIDTH,
+  SINGLE_CHANNEL_PIPETTE_HEIGHT,
+  MULTI_CHANNEL_PIPETTE_WIDTH,
+  MULTI_CHANNEL_PIPETTE_HEIGHT,
+} from '../constants'
+
+import type { LabwareDefinition2 } from '@opentrons/shared-data'
+
+vi.mock('../../Deck/RobotCoordsForeignDiv')
+vi.mock('../EmanatingNozzle')
+vi.mock('../EightEmanatingNozzles')
+
+const fixtureTiprack300Ul = _fixtureTiprack300ul as LabwareDefinition2
+
+const render = (props: React.ComponentProps<typeof PipetteRender>) => {
+  return renderWithProviders(<PipetteRender {...props} />)[0]
+}
+
+describe('PipetteRender', () => {
+  let props: React.ComponentProps<typeof PipetteRender>
+  beforeEach(() => {
+    props = {
+      labwareDef: fixtureTiprack300Ul,
+      pipetteName: 'p1000_single',
+    }
+    vi.mocked(RobotCoordsForeignDiv).mockReturnValue(<div></div>)
+  })
+
+  describe('when the pipette is single channel', () => {
+    beforeEach(() => {
+      vi.mocked(RobotCoordsForeignDiv).mockImplementation(({ children }) => (
+        <div>
+          {`rectangle with width ${SINGLE_CHANNEL_PIPETTE_WIDTH} and height ${SINGLE_CHANNEL_PIPETTE_HEIGHT}`}{' '}
+          {children}
+        </div>
+      ))
+
+      vi.mocked(EmanatingNozzle).mockReturnValue(
+        <div>mock emanating nozzle</div>
+      )
+    })
+
+    it('should render a rectangle with the correct dimensions', () => {
+      render(props)
+      screen.getByText(
+        `rectangle with width ${SINGLE_CHANNEL_PIPETTE_WIDTH} and height ${SINGLE_CHANNEL_PIPETTE_HEIGHT}`
+      )
+      vi.mocked(EmanatingNozzle).mockRestore()
+    })
+    it('should render a single emanating nozzle', () => {
+      render(props)
+      screen.getByText('mock emanating nozzle')
+      expect(EightEmanatingNozzles).not.toHaveBeenCalled()
+    })
+  })
+  describe('when the pipette is 8 channel', () => {
+    beforeEach(() => {
+      vi.mocked(RobotCoordsForeignDiv).mockImplementation(({ children }) => (
+        <div>
+          {`rectangle with width ${MULTI_CHANNEL_PIPETTE_WIDTH} and height ${MULTI_CHANNEL_PIPETTE_HEIGHT}`}{' '}
+          {children}
+        </div>
+      ))
+
+      vi.mocked(EightEmanatingNozzles).mockReturnValue(
+        <div>mock eight emanating nozzles</div>
+      )
+    })
+    it('should render a rectangle with the correct dimensions', () => {
+      props = {
+        ...props,
+        pipetteName: 'p10_multi',
+      }
+      render(props)
+      screen.getByText(
+        `rectangle with width ${MULTI_CHANNEL_PIPETTE_WIDTH} and height ${MULTI_CHANNEL_PIPETTE_HEIGHT}`
+      )
+      vi.mocked(EightEmanatingNozzles).mockRestore()
+    })
+    it('should render eight emanating nozzles', () => {
+      props = {
+        ...props,
+        pipetteName: 'p10_multi',
+      }
+      render(props)
+      screen.getByText('mock eight emanating nozzles')
+    })
+  })
+})

package/src/hardware-sim/Pipette/constants.ts

@@ -0,0 +1,10 @@
+// These constants are used only in pipette render in LPC. The values do not necessarily reflect physical pipette dimensions.
+export const SINGLE_CHANNEL_PIPETTE_WIDTH = 18.7
+export const SINGLE_CHANNEL_PIPETTE_HEIGHT = 30.5
+
+export const MULTI_CHANNEL_PIPETTE_WIDTH = 18.7
+export const MULTI_CHANNEL_PIPETTE_HEIGHT = 90.3
+export const NINETY_SIX_CHANNEL_PIPETTE_WIDTH = 117.7
+
+export const MULTI_CHANNEL_CENTER_Y_NOZZLE = 13.3
+export const MULTI_CHANNEL_Y_OFFSET = -2.5

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

@@ -0,0 +1 @@
+export * from './PipetteRender'

package/src/hardware-sim/ProtocolDeck/LabwareInfo.tsx

@@ -0,0 +1,68 @@
+import type * as React from 'react'
+import { css } from 'styled-components'
+
+import { RobotCoordsForeignDiv } from '../Deck'
+import {
+  DISPLAY_FLEX,
+  DIRECTION_COLUMN,
+  DIRECTION_ROW,
+  JUSTIFY_FLEX_END,
+  JUSTIFY_SPACE_BETWEEN,
+  ALIGN_FLEX_START,
+} from '../../styles'
+import { Box, Flex, Text } from '../../primitives'
+import { TYPOGRAPHY, SPACING } from '../../ui-style-constants'
+import { COLORS } from '../../helix-design-system'
+import type { LabwareDefinition2 } from '@opentrons/shared-data'
+
+const labwareDisplayNameStyle = css`
+  ${TYPOGRAPHY.labelSemiBold}
+  overflow: hidden;
+  white-space: initial;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+`
+export function LabwareInfo(props: {
+  def: LabwareDefinition2
+  children: React.ReactNode
+}): JSX.Element {
+  const width = props.def.dimensions.xDimension
+  const height = props.def.dimensions.yDimension
+  return (
+    <RobotCoordsForeignDiv
+      x={0}
+      y={0}
+      {...{ width, height }}
+      innerDivProps={{
+        display: DISPLAY_FLEX,
+        flexDirection: DIRECTION_COLUMN,
+        justifyContent: JUSTIFY_FLEX_END,
+      }}
+    >
+      <Box
+        backgroundColor="#000000B3"
+        borderRadius="0 0 0.4rem 0.4rem"
+        fontSize={TYPOGRAPHY.fontSizeCaption}
+        padding={SPACING.spacing4}
+        color={COLORS.white}
+      >
+        <Flex
+          flexDirection={DIRECTION_ROW}
+          justifyContent={JUSTIFY_SPACE_BETWEEN}
+          alignItems={ALIGN_FLEX_START}
+          gridGap={SPACING.spacing4}
+        >
+          <Text
+            as="h6"
+            lineHeight={TYPOGRAPHY.fontSizeCaption}
+            css={labwareDisplayNameStyle}
+          >
+            {props.children}
+          </Text>
+        </Flex>
+      </Box>
+    </RobotCoordsForeignDiv>
+  )
+}

package/src/hardware-sim/ProtocolDeck/ProtocolDeck.stories.tsx

@@ -0,0 +1,25 @@
+import type * as React from 'react'
+import analysisFileFixture from './__fixtures__/analysis_QIAseqFX24xv4_8.json'
+
+import { ProtocolDeck as ProtocolDeckComponent } from './'
+
+import type { Meta, StoryObj } from '@storybook/react'
+import type { ProtocolAnalysisOutput } from '@opentrons/shared-data'
+
+const meta: Meta<React.ComponentProps<typeof ProtocolDeckComponent>> = {
+  component: ProtocolDeckComponent,
+  title: 'Library/Molecules/Simulation/ProtocolDeck',
+} as Meta
+
+export default meta
+type Story = StoryObj<React.ComponentProps<typeof ProtocolDeckComponent>>
+
+export const ProtocolDeck: Story = {
+  args: {
+    // @ts-expect-error typescript can't import JSON as const
+    protocolAnalysis: analysisFileFixture as ProtocolAnalysisOutput,
+  },
+  render: args => {
+    return <ProtocolDeckComponent {...args} />
+  },
+}