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

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

@@ -0,0 +1,96 @@
+import type * as React from 'react'
+
+import {
+  fixture96Plate as _fixture96Plate,
+  fixture24Tuberack as _fixture24Tuberack,
+  fixture12Trough as _fixture12Trough,
+  fixtureTiprack10ul as _fixtureTiprack10ul,
+  fixtureTiprack300ul as _fixtureTiprack300ul,
+  fixtureTiprack1000ul as _fixtureTiprack1000ul,
+} from '@opentrons/shared-data'
+
+import { RobotWorkSpace } from '../Deck'
+import { LabwareRender } from './LabwareRender'
+
+import type { Story, Meta } from '@storybook/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 type * as React from 'react'
+import {
+  WellLabels,
+  StyledWells,
+  FilledWells,
+  StrokedWells,
+  StaticLabware,
+} from './labwareInternals'
+import { LabwareAdapter, labwareAdapterLoadNames } from './LabwareAdapter'
+
+import type { CSSProperties } from 'styled-components'
+import type { LabwareDefinition2 } from '@opentrons/shared-data'
+import type {
+  HighlightedWellLabels,
+  WellMouseEvent,
+  WellFill,
+  WellStroke,
+  WellGroup,
+} from './labwareInternals/types'
+import type { LabwareAdapterLoadName } from './LabwareAdapter'
+
+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?: React.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/LabwareStackRender.tsx

@@ -0,0 +1,272 @@
+import type * as React from 'react'
+import { WellLabels, StaticLabware } from './labwareInternals'
+import { LabwareAdapter, labwareAdapterLoadNames } from './LabwareAdapter'
+import { COLORS } from '../../helix-design-system'
+import { Svg } from '../..'
+
+import type { LabwareDefinition2 } from '@opentrons/shared-data'
+import type { HighlightedWellLabels } from './labwareInternals/types'
+import type { LabwareAdapterLoadName } from './LabwareAdapter'
+import type { WellLabelOption } from '../..'
+const HIGHLIGHT_COLOR = COLORS.blue30
+const STROKE_WIDTH = 1
+const SKEW_ANGLE_DEGREES = 30
+const ROTATE_ANGLE_DEGREES = 30
+const SKEW_ANGLE_RADIANS = (SKEW_ANGLE_DEGREES * Math.PI) / 180
+const ROTATE_ANGLE_RADIANS = (ROTATE_ANGLE_DEGREES * Math.PI) / 180
+const COSINE_SKEW_ANGLE = Math.cos(SKEW_ANGLE_RADIANS)
+const STACK_SEPARATION_MM = 20
+
+export interface LabwareStackRenderProps {
+  /** Labware definitions in stack to render */
+  definitionTop: LabwareDefinition2
+  /** option to highlight well labels with specified color */
+  highlightedWellLabels?: HighlightedWellLabels
+  /** highlight top labware */
+  highlightTop: boolean
+  /** highlight bottom labware if it exists */
+  highlightBottom: boolean
+  gRef?: React.RefObject<SVGGElement>
+  definitionBottom?: LabwareDefinition2 | null
+  shouldRotateAdapterOrientation?: boolean
+  /** option to show well labels inside or outside of labware outline */
+  wellLabelOption?: WellLabelOption
+}
+
+// calculate overall height for viewbox
+const getLabwareFaceHeightIso = (definition: LabwareDefinition2): number => {
+  const { xDimension, yDimension } = definition.dimensions
+  return Math.round(
+    xDimension * Math.sin(SKEW_ANGLE_RADIANS) +
+      (yDimension / Math.cos(SKEW_ANGLE_RADIANS)) *
+        Math.cos(SKEW_ANGLE_RADIANS + ROTATE_ANGLE_RADIANS)
+  )
+}
+
+const getLabwareHeightIso = (definition: LabwareDefinition2): number => {
+  const { zDimension } = definition.dimensions
+  return Math.round(getLabwareFaceHeightIso(definition) + zDimension)
+}
+
+const getXMinForViewbox = (definition: LabwareDefinition2): number => {
+  const { yDimension } = definition.dimensions
+  return Math.round(
+    (yDimension / Math.cos(SKEW_ANGLE_RADIANS)) *
+      Math.cos(Math.PI / 2 - (SKEW_ANGLE_RADIANS + ROTATE_ANGLE_RADIANS))
+  )
+}
+
+const getLabwareWidthIso = (definition: LabwareDefinition2): number => {
+  const { xDimension } = definition.dimensions
+  return (
+    getXMinForViewbox(definition) + xDimension * Math.cos(ROTATE_ANGLE_RADIANS)
+  )
+}
+
+export const LabwareStackRender = (
+  props: LabwareStackRenderProps
+): JSX.Element => {
+  const {
+    gRef,
+    definitionTop,
+    definitionBottom,
+    highlightTop,
+    wellLabelOption,
+    shouldRotateAdapterOrientation,
+    highlightBottom = false,
+  } = props
+
+  const labwareLoadNameTop = definitionTop.parameters.loadName
+  const fillColorTop = highlightTop ? HIGHLIGHT_COLOR : COLORS.white
+  const fillColorBottom = highlightBottom ? HIGHLIGHT_COLOR : COLORS.white
+
+  // only one labware (top)
+  if (
+    definitionBottom == null ||
+    definitionBottom.parameters.loadName === 'opentrons_flex_96_tiprack_adapter'
+  ) {
+    const { xDimension, yDimension } = definitionTop.dimensions
+    const isTopAdapter = labwareAdapterLoadNames.includes(
+      definitionTop.parameters.loadName
+    )
+
+    return isTopAdapter ? (
+      // adapter render
+      <Svg
+        viewBox={`0 0 ${xDimension} ${yDimension}`}
+        transform={
+          shouldRotateAdapterOrientation
+            ? `rotate(180, ${xDimension / 2}, ${yDimension / 2})`
+            : 'rotate(0, 0, 0)'
+        }
+        maxWidth="100%"
+        maxHeight="100%"
+      >
+        <LabwareAdapter
+          labwareLoadName={labwareLoadNameTop as LabwareAdapterLoadName}
+        />
+      </Svg>
+    ) : (
+      // isometric view of labware
+      <Svg
+        viewBox={`-${getXMinForViewbox(definitionTop)} -${
+          definitionTop.dimensions.zDimension
+        } ${getLabwareWidthIso(definitionTop)} ${
+          getLabwareFaceHeightIso(definitionTop) +
+          definitionTop.dimensions.zDimension
+        }`}
+        transform="scale(1, -1)"
+        maxWidth="100%"
+        maxHeight="100%"
+      >
+        <g
+          transform={`rotate(${SKEW_ANGLE_DEGREES}) skewX(-${SKEW_ANGLE_DEGREES}) scale(${COSINE_SKEW_ANGLE}, ${COSINE_SKEW_ANGLE})`}
+          ref={gRef}
+          fill={fillColorTop}
+        >
+          <StaticLabware
+            definition={definitionTop}
+            fill={fillColorTop}
+            showRadius={false}
+          />
+          {wellLabelOption != null &&
+          definitionTop.metadata.displayCategory !== 'adapter' ? (
+            <WellLabels
+              definition={definitionTop}
+              wellLabelOption={wellLabelOption}
+              wellLabelColor={fillColorTop}
+              highlightedWellLabels={props.highlightedWellLabels}
+            />
+          ) : null}
+        </g>
+        <rect
+          width={definitionTop.dimensions.yDimension - STROKE_WIDTH}
+          height={definitionTop.dimensions.zDimension - STROKE_WIDTH}
+          transform={`rotate(180) skewY(-${SKEW_ANGLE_DEGREES}) scale(${COSINE_SKEW_ANGLE}, ${COSINE_SKEW_ANGLE})`}
+          strokeWidth={STROKE_WIDTH}
+          stroke={COLORS.black90}
+          fill={fillColorTop}
+        />
+        <rect
+          width={definitionTop.dimensions.xDimension - STROKE_WIDTH}
+          height={definitionTop.dimensions.zDimension - STROKE_WIDTH}
+          transform={`skewY(${SKEW_ANGLE_DEGREES}) scale(${
+            COSINE_SKEW_ANGLE ** 2
+          }, -${COSINE_SKEW_ANGLE}) `}
+          strokeWidth={STROKE_WIDTH}
+          stroke={COLORS.black90}
+          fill={fillColorTop}
+        />
+      </Svg>
+    )
+  }
+
+  const xMinForViewbox = Math.min(
+    ...[definitionTop, definitionBottom].map(def => getXMinForViewbox(def))
+  )
+
+  const totalAssemblyHeight =
+    getLabwareHeightIso(definitionTop) +
+    STACK_SEPARATION_MM +
+    definitionBottom.dimensions.zDimension
+
+  return (
+    <Svg
+      viewBox={`-${xMinForViewbox} -${
+        definitionBottom.dimensions.zDimension
+      } ${getLabwareWidthIso(definitionTop)} ${totalAssemblyHeight}`}
+      transform="scale(1, -1)"
+      maxWidth="100%"
+      maxHeight="100%"
+    >
+      {/* bottom labware/adapter */}
+      {definitionBottom.parameters.loadName ===
+      'opentrons_flex_96_tiprack_adapter' ? null : (
+        <>
+          <g
+            transform={`rotate(${SKEW_ANGLE_DEGREES}) skewX(-${SKEW_ANGLE_DEGREES}) scale(${COSINE_SKEW_ANGLE}, ${COSINE_SKEW_ANGLE})`}
+            ref={gRef}
+            fill={fillColorBottom}
+          >
+            <StaticLabware
+              definition={definitionBottom}
+              fill={fillColorBottom}
+              showRadius={false}
+            />
+            {wellLabelOption != null &&
+            definitionBottom.metadata.displayCategory !== 'adapter' ? (
+              <WellLabels
+                definition={definitionTop}
+                wellLabelOption={wellLabelOption}
+                wellLabelColor={fillColorBottom}
+                highlightedWellLabels={props.highlightedWellLabels}
+              />
+            ) : null}
+          </g>
+          <rect
+            width={definitionBottom.dimensions.yDimension - STROKE_WIDTH}
+            height={definitionBottom.dimensions.zDimension - STROKE_WIDTH}
+            transform={`rotate(180) skewY(-${SKEW_ANGLE_DEGREES}) scale(${COSINE_SKEW_ANGLE}, ${COSINE_SKEW_ANGLE})`}
+            strokeWidth={STROKE_WIDTH}
+            stroke={COLORS.black90}
+            fill={fillColorBottom}
+          />
+          <rect
+            width={definitionBottom.dimensions.xDimension - STROKE_WIDTH}
+            height={definitionBottom.dimensions.zDimension - STROKE_WIDTH}
+            transform={`skewY(${SKEW_ANGLE_DEGREES}) scale(${
+              COSINE_SKEW_ANGLE ** 2
+            }, -${COSINE_SKEW_ANGLE}) `}
+            strokeWidth={STROKE_WIDTH}
+            stroke={COLORS.black90}
+            fill={fillColorBottom}
+          />
+        </>
+      )}
+      {/* top labware/adapter */}
+      <g
+        transform={`translate(0, ${
+          definitionTop.dimensions.zDimension + STACK_SEPARATION_MM
+        }) rotate(${SKEW_ANGLE_DEGREES}) skewX(-${SKEW_ANGLE_DEGREES}) scale(${COSINE_SKEW_ANGLE}, ${COSINE_SKEW_ANGLE})`}
+        ref={gRef}
+      >
+        <StaticLabware
+          definition={definitionTop}
+          fill={fillColorTop}
+          showRadius={false}
+        />
+        {wellLabelOption != null &&
+        definitionTop.metadata.displayCategory !== 'adapter' ? (
+          <WellLabels
+            definition={definitionTop}
+            wellLabelOption={wellLabelOption}
+            wellLabelColor={fillColorTop}
+            highlightedWellLabels={props.highlightedWellLabels}
+          />
+        ) : null}
+      </g>
+      <rect
+        width={definitionTop.dimensions.yDimension - STROKE_WIDTH}
+        height={definitionTop.dimensions.zDimension - STROKE_WIDTH}
+        transform={`translate(0, ${
+          definitionTop.dimensions.zDimension + STACK_SEPARATION_MM
+        }) rotate(180) skewY(-${SKEW_ANGLE_DEGREES}) scale(${COSINE_SKEW_ANGLE}, ${COSINE_SKEW_ANGLE})`}
+        strokeWidth={STROKE_WIDTH}
+        stroke={COLORS.black90}
+        fill={fillColorTop}
+      />
+      <rect
+        width={definitionTop.dimensions.xDimension - STROKE_WIDTH}
+        height={definitionTop.dimensions.zDimension - STROKE_WIDTH}
+        transform={`translate(0, ${
+          definitionTop.dimensions.zDimension + STACK_SEPARATION_MM
+        }) skewY(${SKEW_ANGLE_DEGREES}) scale(${
+          COSINE_SKEW_ANGLE ** 2
+        } , -${COSINE_SKEW_ANGLE}) `}
+        strokeWidth={STROKE_WIDTH}
+        stroke={COLORS.black90}
+        fill={fillColorTop}
+      />
+    </Svg>
+  )
+}

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

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

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

@@ -0,0 +1,39 @@
+import * as React from 'react'
+import map from 'lodash/map'
+import { COLORS } from '../../../helix-design-system'
+import { Well } from './Well'
+import type { LabwareDefinition2 } from '@opentrons/shared-data'
+import type { CSSProperties } from 'styled-components'
+
+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']>, React.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: React.MemoExoticComponent<
+  typeof FilledWellsComponent
+> = React.memo(FilledWellsComponent)