@opentrons/components 0.1.6-alpha.2 → 0.1.6-alpha.21

package/src/hardware-sim/Module/Thermocycler/index.tsx

@@ -0,0 +1,49 @@
+import { THERMOCYCLER_MODULE_V1, getModuleDef2 } from '@opentrons/shared-data'
+
+import { C_MED_LIGHT_GRAY } from '../../../styles'
+import { COLORS, BORDERS } from '../../../helix-design-system'
+
+import { RobotCoordsForeignDiv } from '../../Deck'
+import { ThermocyclerGEN1 } from './ThermocyclerGEN1'
+import { ThermocyclerGEN2 } from './ThermocyclerGEN2'
+import type { ThermocyclerModuleModel } from '@opentrons/shared-data'
+
+const ROOM_TEMPERATURE_C = 23 // value taken from TC firmware
+export interface ThermocyclerVizProps {
+  lidMotorState: 'open' | 'closed' | 'unknown'
+  blockTargetTemp?: number | null
+  model: ThermocyclerModuleModel
+}
+
+export function Thermocycler(props: ThermocyclerVizProps): JSX.Element {
+  const { lidMotorState, blockTargetTemp, model } = props
+  const def = getModuleDef2(model)
+  if (lidMotorState === 'unknown') {
+    // just a rectangle if we don't know the state of the lid
+    return (
+      <RobotCoordsForeignDiv
+        width={def.dimensions.xDimension}
+        height={def.dimensions.yDimension}
+        innerDivProps={{
+          borderRadius: '6px',
+          backgroundColor: C_MED_LIGHT_GRAY,
+          border: BORDERS.lineBorder,
+          width: '100%',
+          height: '100%',
+        }}
+      />
+    )
+  }
+
+  let ledLightColor = COLORS.transparent
+  if (blockTargetTemp != null) {
+    ledLightColor =
+      blockTargetTemp <= ROOM_TEMPERATURE_C ? COLORS.blue35 : COLORS.red30
+  }
+
+  return model === THERMOCYCLER_MODULE_V1 ? (
+    <ThermocyclerGEN1 {...{ lidMotorState, ledLightColor }} />
+  ) : (
+    <ThermocyclerGEN2 {...{ lidMotorState, ledLightColor }} />
+  )
+}

package/src/hardware-sim/Module/index.tsx

@@ -0,0 +1,227 @@
+import type * as React from 'react'
+import {
+  ABSORBANCE_READER_TYPE,
+  getModuleType,
+  HEATERSHAKER_MODULE_TYPE,
+  MAGNETIC_BLOCK_TYPE,
+  MAGNETIC_MODULE_TYPE,
+  OT2_STANDARD_DECKID,
+  TEMPERATURE_MODULE_TYPE,
+  THERMOCYCLER_MODULE_TYPE,
+} from '@opentrons/shared-data'
+import {
+  C_DARK_GRAY,
+  C_MED_LIGHT_GRAY,
+  SPACING_1,
+  JUSTIFY_CENTER,
+  DISPLAY_FLEX,
+  FONT_WEIGHT_SEMIBOLD,
+  DIRECTION_COLUMN,
+  ALIGN_CENTER,
+} from '../../styles'
+import { RobotCoordsForeignObject } from '../Deck'
+import { multiplyMatrices } from '../utils'
+import { Thermocycler } from './Thermocycler'
+import { HeaterShaker } from './HeaterShaker'
+import { Temperature } from './Temperature'
+import { MagneticBlock } from './MagneticBlock'
+import { MagneticModule } from './MagneticModule'
+import { PlateReader } from './PlateReader'
+
+import type {
+  ModuleDefinition,
+  ThermocyclerModuleModel,
+} from '@opentrons/shared-data'
+
+export * from './Thermocycler'
+
+const LABWARE_OFFSET_DISPLAY_THRESHOLD = 2
+
+interface Props {
+  x: number
+  y: number
+  def: ModuleDefinition
+  orientation?: 'left' | 'right'
+  innerProps?:
+    | React.ComponentProps<typeof Thermocycler>
+    | React.ComponentProps<typeof HeaterShaker>
+    | React.ComponentProps<typeof Temperature>
+    | {}
+  statusInfo?: React.ReactNode // contents of small status rectangle, not displayed if absent
+  children?: React.ReactNode // contents to be rendered on top of the labware mating surface of the module
+  targetSlotId?: string
+  targetDeckId?: string
+}
+
+const statusInfoWrapperProps = {
+  display: DISPLAY_FLEX,
+  alignItems: ALIGN_CENTER,
+}
+const statusInfoFlexProps = {
+  flexDirection: DIRECTION_COLUMN,
+  justifyContent: JUSTIFY_CENTER,
+  backgroundColor: C_MED_LIGHT_GRAY,
+  padding: SPACING_1,
+  fontSize: '0.5rem', // NOTE: this text is rendered into an SVG foreignObject, so sizing is non-standard
+  fontWeight: FONT_WEIGHT_SEMIBOLD,
+  paddingBottom: SPACING_1,
+}
+
+export const Module = (props: Props): JSX.Element => {
+  const {
+    def,
+    x,
+    y,
+    orientation = 'left',
+    innerProps = {},
+    statusInfo,
+    children,
+    targetSlotId,
+    targetDeckId = OT2_STANDARD_DECKID,
+  } = props
+  const moduleType = getModuleType(def.model)
+
+  const { x: labwareOffsetX, y: labwareOffsetY } = def.labwareOffset
+  const {
+    x: translateX,
+    y: translateY,
+    z: translateZ,
+  } = def.cornerOffsetFromSlot
+  const {
+    xDimension,
+    yDimension,
+    footprintXDimension,
+    footprintYDimension,
+    labwareInterfaceXDimension,
+    labwareInterfaceYDimension,
+  } = def.dimensions
+
+  // apply translation to position module in viewport
+  const positionTransform = `translate(${x}, ${y})`
+
+  // apply translation to compensate for the offset of the overall module's
+  // left-bottom-front corner, from the footprint's left-bottom-front corner (slot interface)
+  let offsetTransform = `translate(${translateX}, ${translateY})`
+
+  let nestedLabwareOffsetX = labwareOffsetX
+  let nestedLabwareOffsetY = labwareOffsetY
+
+  // additional transforms to apply to vectors in certain deck/slot combinations
+  const transformsForDeckBySlot = def?.slotTransforms?.[targetDeckId]
+  const slotTransformsForDeckSlot =
+    targetSlotId != null &&
+    transformsForDeckBySlot != null &&
+    targetSlotId in transformsForDeckBySlot
+      ? transformsForDeckBySlot[targetSlotId]
+      : null
+  const deckSpecificTransforms = slotTransformsForDeckSlot ?? {}
+  if (deckSpecificTransforms?.cornerOffsetFromSlot != null) {
+    const [
+      [slotTranslateX],
+      [slotTranslateY],
+    ] = multiplyMatrices(deckSpecificTransforms.cornerOffsetFromSlot, [
+      [translateX],
+      [translateY],
+      [translateZ],
+      [1],
+    ])
+    offsetTransform = `translate(${slotTranslateX}, ${slotTranslateY})`
+  }
+  if (deckSpecificTransforms?.labwareOffset != null) {
+    const [
+      [slotLabwareOffsetX],
+      [slotLabwareOffsetY],
+    ] = multiplyMatrices(deckSpecificTransforms.labwareOffset, [
+      [labwareOffsetX],
+      [labwareOffsetY],
+      [1],
+      [1],
+    ])
+    nestedLabwareOffsetX = slotLabwareOffsetX
+    nestedLabwareOffsetY = slotLabwareOffsetY
+  }
+
+  // find coordinates of center of footprint, fallback to overall center if not defined
+  const rotationCenterX = (footprintXDimension ?? xDimension) / 2
+  const rotationCenterY = (footprintYDimension ?? yDimension) / 2
+
+  const orientationTransform =
+    orientation === 'left' || moduleType === ABSORBANCE_READER_TYPE
+      ? 'rotate(0, 0, 0)'
+      : `rotate(180, ${rotationCenterX}, ${rotationCenterY})`
+
+  // labwareOffset values are more accurate than our SVG renderings, so ignore any deviations under a certain threshold
+  const clampedLabwareOffsetX =
+    Math.abs(nestedLabwareOffsetX) > LABWARE_OFFSET_DISPLAY_THRESHOLD
+      ? nestedLabwareOffsetX
+      : 0
+  const clampedLabwareOffsetY =
+    Math.abs(nestedLabwareOffsetY) > LABWARE_OFFSET_DISPLAY_THRESHOLD
+      ? nestedLabwareOffsetY
+      : 0
+  // transform to be applied to children which render within the labware interfacing surface of the module
+  const childrenTransform = `translate(${clampedLabwareOffsetX}, ${clampedLabwareOffsetY})`
+
+  const renderStatusInfo = (): JSX.Element | null => {
+    if (statusInfo == null) return null
+    const statusWidth = (labwareInterfaceXDimension ?? xDimension) / 2
+    return (
+      <RobotCoordsForeignObject
+        x={
+          orientation === 'left'
+            ? labwareOffsetX - statusWidth
+            : labwareOffsetX + (labwareInterfaceXDimension ?? xDimension)
+        }
+        y={labwareOffsetY}
+        height={labwareInterfaceYDimension ?? yDimension}
+        width={statusWidth}
+        foreignObjectProps={statusInfoWrapperProps}
+        flexProps={statusInfoFlexProps}
+      >
+        {statusInfo}
+      </RobotCoordsForeignObject>
+    )
+  }
+
+  let moduleViz: JSX.Element | null = null
+  if (moduleType === MAGNETIC_BLOCK_TYPE) {
+    moduleViz = <MagneticBlock />
+  } else if (moduleType === MAGNETIC_MODULE_TYPE) {
+    moduleViz = <MagneticModule />
+  } else if (moduleType === THERMOCYCLER_MODULE_TYPE) {
+    const thermocyclerProps = {
+      lidMotorState: 'open' as const,
+      ...innerProps,
+      model: def.model as ThermocyclerModuleModel,
+    }
+
+    moduleViz = <Thermocycler {...thermocyclerProps} />
+  } else if (moduleType === HEATERSHAKER_MODULE_TYPE) {
+    moduleViz = (
+      <HeaterShaker
+        {...(innerProps as React.ComponentProps<typeof HeaterShaker>)}
+      />
+    )
+  } else if (moduleType === TEMPERATURE_MODULE_TYPE) {
+    moduleViz = (
+      <Temperature
+        {...(innerProps as React.ComponentProps<typeof Temperature>)}
+      />
+    )
+  } else if (moduleType === ABSORBANCE_READER_TYPE) {
+    moduleViz = <PlateReader />
+  }
+  return (
+    <g transform={positionTransform} data-test={`Module_${moduleType}`}>
+      <g transform={orientationTransform}>
+        <g transform={offsetTransform} style={{ fill: C_DARK_GRAY }}>
+          {moduleViz}
+        </g>
+      </g>
+      {renderStatusInfo()}
+      {children != null ? (
+        <g transform={childrenTransform}>{children}</g>
+      ) : null}
+    </g>
+  )
+}

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

@@ -0,0 +1,23 @@
+import { Fragment } from 'react'
+import { EmanatingNozzle } from './EmanatingNozzle'
+
+export const EightEmanatingNozzles = (props: {
+  cx: number
+  initialCy: number
+}): JSX.Element => {
+  const { cx, initialCy } = props
+  const MULTI_CHANNEL_NOZZLE_SPACING = 9
+  return (
+    <Fragment>
+      {[...Array(8)].map((_, i: number) => {
+        return (
+          <EmanatingNozzle
+            cx={cx}
+            cy={initialCy + i * MULTI_CHANNEL_NOZZLE_SPACING}
+            key={`Circle_${i}`}
+          />
+        )
+      })}
+    </Fragment>
+  )
+}

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/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/RobotCoordsForeignDiv'
+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} />
+  },
+}