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

package/src/hardware-sim/Deck/RobotCoordsText.tsx

@@ -1,16 +1,23 @@
-import { css } from 'styled-components'
-
 import type { ComponentProps, ReactNode } from 'react'
 
 export interface RobotCoordsTextProps extends ComponentProps<'text'> {
   x: number
+  /** The y-coordinate of the text baseline, in the Opentrons robot orientation, so +y is towards the top of the screen. */
   y: number
   children?: ReactNode
   canHighlight?: boolean
 }
 
-/** SVG text reflected to use take robot coordinates as props */
-// TODO: Ian 2019-05-07 reconcile this with Brian's version
+/**
+ * SVG text positioned with Opentrons robot coordinates.
+ *
+ * This should be used inside a wrapper like RobotWorkSpace that sets up a transformation
+ * to orient the SVG with the Opentrons coordinate convention, with +y towards the
+ * top of the screen.
+ *
+ * This component surgically undoes the wrapper's transformation so the child text is
+ * displayed right-side-up.
+ */
 export function RobotCoordsText(props: RobotCoordsTextProps): JSX.Element {
   const { x, y, children, canHighlight = true, ...additionalProps } = props
   return (
@@ -19,13 +26,7 @@ export function RobotCoordsText(props: RobotCoordsTextProps): JSX.Element {
       x={x}
       y={-1 * y}
       transform="scale(1, -1)"
-      css={
-        !canHighlight
-          ? css`
-              user-select: none;
-            `
-          : undefined
-      }
+      style={{ userSelect: !canHighlight ? 'none' : undefined }}
     >
       {children}
     </text>

package/src/hardware-sim/Deck/RobotWorkSpace.tsx

@@ -2,80 +2,70 @@ import { useRef } from 'react'
 
 import { OT2_ROBOT_TYPE } from '@opentrons/shared-data'
 
-import { Svg } from '../../primitives'
 import { DeckFromLayers } from './DeckFromLayers'
 
-import type { ReactNode } from 'react'
-import type { DeckDefinition, DeckSlot } from '@opentrons/shared-data'
-import type { StyleProps } from '../../primitives'
+import type { CSSProperties, ReactNode } from 'react'
+import type { AddressableArea, DeckDefinition } from '@opentrons/shared-data'
 
 export interface RobotWorkSpaceRenderProps {
-  deckSlotsById: { [slotId: string]: DeckSlot }
-  getRobotCoordsFromDOMCoords: (
-    domX: number,
-    domY: number
-  ) => { x: number; y: number }
+  // todo(mm, 2025-06-05): Is this API still worthwhile? The parent of RobotWorkSpace
+  // already has access to the full DeckDefinition. Maybe it should iterate over
+  // the DeckDefinition's AddressableAreas itself?
+  addressableAreasById: { [addressableAreaId: string]: AddressableArea }
 }
 
-export interface RobotWorkSpaceProps extends StyleProps {
-  deckDef?: DeckDefinition
-  viewBox?: string | null
+type BaseProps = {
   children?: (props: RobotWorkSpaceRenderProps) => ReactNode
   deckLayerBlocklist?: string[]
-  // optional boolean to show the OT-2 deck from deck defintion layers
+  /** optional boolean to show the OT-2 deck from deck defintion layers */
   showDeckLayers?: boolean
   id?: string
-}
+} & (
+  | // Require at least one of deckDef or viewBox,
+  {
+      deckDef: DeckDefinition
+    }
+  | {
+      /**
+       * The x/y area to show, in standard SVG `x y xDimension yDimension` syntax.
+       *
+       * Specify coordinates in the Opentrons orientation, not the standard SVG orientation.
+       * So (x, y) is the area's front-left, xDimension extends the viewed area to the
+       * right, and yDimension extends the viewed area to the back.
+       */
+      viewBox: string
+    }
+)
 
-type GetRobotCoordsFromDOMCoords = RobotWorkSpaceRenderProps['getRobotCoordsFromDOMCoords']
+export type RobotWorkSpaceProps = BaseProps & CSSProperties
 
-export function RobotWorkSpace(props: RobotWorkSpaceProps): JSX.Element | null {
+/**
+ * A wrapper for rendering the robot deck, labware, etc. from a top-down perspective.
+ *
+ * Child SVG components can render themselves in the Opentrons coordinate orientation
+ * (+x to the right of the robot, +y to the back of the robot) and this component will
+ * SVG-transform them so they're displayed the correct way. This is needed because
+ * SVG inverts y compared to Opentrons coordinates.
+ */
+export function RobotWorkSpace(props: RobotWorkSpaceProps): JSX.Element {
   const {
     children,
-    deckDef,
     deckLayerBlocklist = [],
     showDeckLayers = false,
-    viewBox,
     id,
     ...styleProps
   } = props
+  const activeViewBox = getViewBoxFromProps(props)
+  const addressableAreasById = getAddressableAreasByIdFromProps(props)
   const wrapperRef = useRef<SVGSVGElement>(null)
 
-  // NOTE: getScreenCTM in Chrome a DOMMatrix type,
-  // in Firefox the same fn returns a deprecated SVGMatrix.
-  // Until Firefox fixes this and conforms to SVG2 draft,
-  // it will suffer from inverted y behavior (ignores css transform)
-  const getRobotCoordsFromDOMCoords: GetRobotCoordsFromDOMCoords = (x, y) => {
-    if (!wrapperRef.current) return { x: 0, y: 0 }
-
-    const cursorPoint = wrapperRef.current.createSVGPoint()
-
-    cursorPoint.x = x
-    cursorPoint.y = y
-
-    return cursorPoint.matrixTransform(
-      wrapperRef.current.getScreenCTM()?.inverse()
-    )
-  }
-  if (!deckDef && !viewBox) return null
-
-  let wholeDeckViewBox
-  let deckSlotsById = {}
-  if (deckDef != null) {
-    const [viewBoxOriginX, viewBoxOriginY] = deckDef.cornerOffsetFromOrigin
-    const [deckXDimension, deckYDimension] = deckDef.dimensions
-
-    deckSlotsById = deckDef.locations.addressableAreas.reduce(
-      (acc, deckSlot) => ({ ...acc, [deckSlot.id]: deckSlot }),
-      {}
-    )
-    wholeDeckViewBox = `${viewBoxOriginX} ${viewBoxOriginY} ${deckXDimension} ${deckYDimension}`
-  }
-
-  const activeViewBox = viewBox ?? wholeDeckViewBox
-
   return (
-    <Svg viewBox={activeViewBox} ref={wrapperRef} id={id} {...styleProps}>
+    <svg
+      viewBox={activeViewBox}
+      ref={wrapperRef}
+      id={id}
+      style={{ ...styleProps }}
+    >
       <g
         transform={
           activeViewBox
@@ -93,8 +83,38 @@ export function RobotWorkSpace(props: RobotWorkSpaceProps): JSX.Element | null {
             robotType={OT2_ROBOT_TYPE}
           />
         ) : null}
-        {children?.({ deckSlotsById, getRobotCoordsFromDOMCoords })}
+        {children?.({ addressableAreasById })}
       </g>
-    </Svg>
+    </svg>
   )
 }
+
+function getAddressableAreasByIdFromProps(
+  props: RobotWorkSpaceProps
+): RobotWorkSpaceRenderProps['addressableAreasById'] {
+  if ('deckDef' in props) {
+    return Object.fromEntries(
+      props.deckDef.locations.addressableAreas.map(addressableArea => [
+        addressableArea.id,
+        addressableArea,
+      ])
+    )
+  } else {
+    return {}
+  }
+}
+
+function getViewBoxFromProps(props: RobotWorkSpaceProps): string {
+  if ('viewBox' in props) {
+    // An explicitly provided viewBox takes precedence.
+    return props.viewBox
+  } else {
+    return getWholeDeckViewBox(props.deckDef)
+  }
+}
+
+function getWholeDeckViewBox(deckDef: DeckDefinition): string {
+  const [viewBoxOriginX, viewBoxOriginY] = deckDef.cornerOffsetFromOrigin
+  const [deckXDimension, deckYDimension] = deckDef.dimensions
+  return `${viewBoxOriginX} ${viewBoxOriginY} ${deckXDimension} ${deckYDimension}`
+}

package/src/hardware-sim/Deck/SlotLabels.tsx

@@ -1,8 +1,9 @@
+import clsx from 'clsx'
+
 import { FLEX_ROBOT_TYPE } from '@opentrons/shared-data'
 
 import { DeckInfoLabel } from '../../molecules'
-import { Flex } from '../../primitives'
-import { ALIGN_CENTER, DIRECTION_COLUMN, JUSTIFY_CENTER } from '../../styles'
+import styles from './deck.module.css'
 import { RobotCoordsForeignObject } from './RobotCoordsForeignObject'
 
 import type { RobotType } from '@opentrons/shared-data'
@@ -25,6 +26,26 @@ export const SlotLabels = ({
   const widthSmallRem = 10.5
   const widthLargeRem = 15.25
 
+  const rowDynamicWidth = show4thColumn
+    ? `${widthSmallRem * 2 + widthLargeRem * 2}rem`
+    : `${widthSmallRem + widthLargeRem * 2}rem`
+
+  const itemDynamicWidth = show4thColumn
+    ? `${widthSmallRem}rem`
+    : `${widthLargeRem}rem`
+
+  const rowStyle: Record<string, string> = {
+    '--dynamic-width': rowDynamicWidth,
+  }
+  const simpleItemWidthStyle: Record<string, string> = {
+    '--dynamic-width': `${widthLargeRem}rem`,
+  }
+  const nextTo4thWidthStyle: Record<string, string> = {
+    '--dynamic-width': itemDynamicWidth,
+  }
+  const fourthWidthStyle: Record<string, string> = {
+    '--dynamic-width': `${widthSmallRem}rem`,
+  }
   return robotType === FLEX_ROBOT_TYPE ? (
     <>
       <RobotCoordsForeignObject
@@ -33,26 +54,20 @@ export const SlotLabels = ({
         x="-147"
         y="-10"
       >
-        <Flex
-          alignItems={ALIGN_CENTER}
-          flexDirection={DIRECTION_COLUMN}
-          flex="1"
-          height="100%"
-          width="2.5rem"
-        >
-          <Flex alignItems={ALIGN_CENTER} flex="1">
+        <div className={styles.deck_labels_column}>
+          <div className={styles.deck_label_column_container}>
             <DeckInfoLabel deckLabel="A" height="max-content" width="100%" />
-          </Flex>
-          <Flex alignItems={ALIGN_CENTER} flex="1">
+          </div>
+          <div className={styles.deck_label_column_container}>
             <DeckInfoLabel deckLabel="B" height="max-content" width="100%" />
-          </Flex>
-          <Flex alignItems={ALIGN_CENTER} flex="1">
+          </div>
+          <div className={styles.deck_label_column_container}>
             <DeckInfoLabel deckLabel="C" height="max-content" width="100%" />
-          </Flex>
-          <Flex alignItems={ALIGN_CENTER} flex="1">
+          </div>
+          <div className={styles.deck_label_column_container}>
             <DeckInfoLabel deckLabel="D" height="max-content" width="100%" />
-          </Flex>
-        </Flex>
+          </div>
+        </div>
       </RobotCoordsForeignObject>
       <RobotCoordsForeignObject
         height="2.5rem"
@@ -64,49 +79,34 @@ export const SlotLabels = ({
         x="-100"
         y="-55"
       >
-        <Flex
-          alignItems={ALIGN_CENTER}
-          flex="1"
-          width={`${
-            show4thColumn
-              ? widthSmallRem * 2 + widthLargeRem * 2
-              : widthSmallRem + widthLargeRem * 2
-          }rem`}
-          height="2.5rem"
-        >
-          <Flex
-            alignItems={ALIGN_CENTER}
-            justifyContent={JUSTIFY_CENTER}
-            width={`${widthLargeRem}rem`}
+        <div className={clsx(styles.deck_labels_row)} style={rowStyle}>
+          <div
+            className={styles.deck_label_row_container}
+            style={simpleItemWidthStyle}
           >
             <DeckInfoLabel deckLabel="1" height="100%" />
-          </Flex>
-          <Flex
-            alignItems={ALIGN_CENTER}
-            justifyContent={JUSTIFY_CENTER}
-            width={`${widthSmallRem}rem`}
+          </div>
+          <div
+            className={styles.deck_label_row_container}
+            style={simpleItemWidthStyle}
           >
             <DeckInfoLabel deckLabel="2" height="100%" />
-          </Flex>
-          <Flex
-            alignItems={ALIGN_CENTER}
-            justifyContent={JUSTIFY_CENTER}
-            width={
-              show4thColumn ? `${widthSmallRem}rem` : `${widthLargeRem}rem`
-            }
+          </div>
+          <div
+            className={styles.deck_label_row_container}
+            style={nextTo4thWidthStyle}
           >
             <DeckInfoLabel deckLabel="3" height="100%" />
-          </Flex>
+          </div>
           {show4thColumn ? (
-            <Flex
-              alignItems={ALIGN_CENTER}
-              justifyContent={JUSTIFY_CENTER}
-              width={`${widthSmallRem}rem`}
+            <div
+              className={styles.deck_label_row_container}
+              style={fourthWidthStyle}
             >
               <DeckInfoLabel deckLabel="4" height="100%" />
-            </Flex>
+            </div>
           ) : null}
-        </Flex>
+        </div>
       </RobotCoordsForeignObject>
     </>
   ) : null

package/src/hardware-sim/Deck/__tests__/resolveLabwareLocation.test.ts

@@ -0,0 +1,138 @@
+import { expect, it } from 'vitest'
+
+import {
+  getAllDefinitions,
+  getDeckDefinitions,
+  getModuleDef,
+} from '@opentrons/shared-data'
+
+import { resolveLabwareLocation } from '../resolveLabwareLocation'
+
+import type { ModuleModel } from '@opentrons/shared-data'
+
+it('should resolve a labware location', () => {
+  const labwareAUri = 'opentrons/nest_12_reservoir_15ml/1'
+  const labwareBUri = 'opentrons/agilent_1_reservoir_290ml/1'
+  const labwareCUri = 'opentrons/opentrons_96_pcr_adapter/1'
+  const labwareADefinition = getAllDefinitions()[labwareAUri]
+  const labwareBDefinition = getAllDefinitions()[labwareBUri]
+  const labwareCDefinition = getAllDefinitions()[labwareCUri]
+
+  const moduleModel: ModuleModel = 'temperatureModuleV2'
+  const moduleDefinition = getModuleDef(moduleModel)
+
+  const deckDefinition = getDeckDefinitions().ot3_standard
+
+  const slotId = 'C2'
+
+  const result = resolveLabwareLocation({
+    targetLabwareDef: labwareADefinition,
+    targetLabwareLocation: {
+      labwareId: 'labware-b-id',
+    },
+    otherLoadedLabware: [
+      {
+        id: 'labware-b-id',
+        definitionUri: labwareBUri,
+        location: {
+          labwareId: 'labware-c-id',
+        },
+        loadName: '',
+      },
+      {
+        id: 'labware-c-id',
+        definitionUri: labwareCUri,
+        location: {
+          moduleId: 'module-id',
+        },
+        loadName: '',
+      },
+    ],
+    deckDef: deckDefinition,
+    otherLabwareDefinitions: [labwareBDefinition, labwareCDefinition],
+    loadedModules: [
+      {
+        id: 'module-id',
+        model: moduleModel,
+        location: {
+          slotName: slotId,
+        },
+        serialNumber: '',
+      },
+    ],
+  })
+
+  const expectedResult: typeof result = {
+    deckDefinition,
+    slotId,
+    moduleDefinition,
+    labwareDefinitionsBottomToTop: [
+      labwareCDefinition,
+      labwareBDefinition,
+      labwareADefinition,
+    ],
+  }
+
+  expect(result).toStrictEqual(expectedResult)
+})
+
+it('should return offDeck if the labware is off-deck', () => {
+  const labwareAUri = 'opentrons/nest_12_reservoir_15ml/1'
+  const labwareBUri = 'opentrons/agilent_1_reservoir_290ml/1'
+  const labwareADefinition = getAllDefinitions()[labwareAUri]
+  const labwareBDefinition = getAllDefinitions()[labwareBUri]
+
+  const deckDefinition = getDeckDefinitions().ot3_standard
+
+  const result = resolveLabwareLocation({
+    targetLabwareDef: labwareADefinition,
+    targetLabwareLocation: {
+      labwareId: 'labware-b-id',
+    },
+    otherLoadedLabware: [
+      {
+        id: 'labware-b-id',
+        definitionUri: labwareBUri,
+        location: 'offDeck',
+        loadName: '',
+      },
+    ],
+    deckDef: deckDefinition,
+    otherLabwareDefinitions: [labwareBDefinition],
+    loadedModules: [],
+  })
+
+  const expectedResult: typeof result = 'offDeck'
+
+  expect(result).toStrictEqual(expectedResult)
+})
+
+it('should return error if something is missing from the input definitions', () => {
+  const labwareAUri = 'opentrons/nest_12_reservoir_15ml/1'
+  const labwareBUri = 'opentrons/agilent_1_reservoir_290ml/1'
+  const labwareADefinition = getAllDefinitions()[labwareAUri]
+
+  const deckDefinition = getDeckDefinitions().ot3_standard
+
+  const result = resolveLabwareLocation({
+    targetLabwareDef: labwareADefinition,
+    targetLabwareLocation: {
+      labwareId: 'labware-b-id',
+    },
+    otherLoadedLabware: [
+      {
+        id: 'labware-b-id',
+        definitionUri: labwareBUri,
+        location: 'offDeck',
+        loadName: '',
+      },
+    ],
+    deckDef: deckDefinition,
+    otherLabwareDefinitions: [], // Missing labware B definition.
+    loadedModules: [],
+  })
+
+  const expectedResult: typeof result = 'error'
+
+  expect(result).toStrictEqual(expectedResult)
+})

package/src/hardware-sim/Deck/deck.module.css

@@ -0,0 +1,54 @@
+.deck_labels_column {
+  display: flex;
+  width: 2.5rem;
+  height: 100%;
+  flex: 1;
+  flex-direction: column;
+  align-items: center;
+}
+
+.deck_label_column_container {
+  display: flex;
+  flex: 1;
+  align-items: center;
+}
+
+.deck_labels_row {
+  display: flex;
+  width: var(--dynamic-width, 5rem); /* fallback if variable not set */
+  height: 2.5rem;
+  flex: 1;
+  align-items: center;
+}
+
+.deck_label_row_container {
+  display: flex;
+  width: var(--dynamic-width);
+  align-items: center;
+  justify-content: center;
+}
+
+.robot_coords_foreign_object_container {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  transform: scale(1, -1);
+}
+
+.trash_container {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--border-4);
+  gap: var(--spacing-8);
+}
+
+.trash_container_highlight {
+  border: 3px solid var(--blue-50);
+}
+
+.trash_container_rotate_copy {
+  transform-origin: center;
+}

package/src/hardware-sim/Deck/resolveLabwareLocation.ts

@@ -0,0 +1,154 @@
+import { getLabwareDefURI, getModuleDef } from '@opentrons/shared-data'
+
+import type {
+  ComputeLabwareOriginInput,
+  DeckDefinition,
+  LabwareDefinition,
+  LabwareLocation,
+  LoadedLabware,
+  LoadedModule,
+  ModuleDefinition,
+} from '@opentrons/shared-data'
+
+/**
+ * Converts a labware location to something that computeLabwareOrigin() can take as
+ * input and compute absolute deck coordinates from.
+ *
+ * This basically just does a lot of tedious lookups to resolve IDs into full definitions.
+ *
+ * Returns "error" if there was a problem doing the conversion, probably because of
+ * some invalid input to this function, like entries missing from `otherLoadedLabware`.
+ * Returns "offDeck" if the labware is known to be off-deck, so it doesn't have
+ * coordinates.
+ */
+export function resolveLabwareLocation({
+  deckDef,
+  targetLabwareDef,
+  targetLabwareLocation,
+  loadedModules,
+  otherLoadedLabware,
+  otherLabwareDefinitions,
+}: {
+  deckDef: DeckDefinition
+  targetLabwareDef: LabwareDefinition
+  targetLabwareLocation: LabwareLocation
+  loadedModules: LoadedModule[]
+  otherLoadedLabware: LoadedLabware[]
+  otherLabwareDefinitions: LabwareDefinition[]
+}): 'error' | 'offDeck' | ComputeLabwareOriginInput {
+  const labwareTopToBottom = resolveLabwareStack({
+    topLabwareDef: targetLabwareDef,
+    topLabwareLocation: targetLabwareLocation,
+    otherLoadedLabware,
+    otherLabwareDefinitions,
+  })
+  const labwareBottomToTop =
+    labwareTopToBottom !== 'error' ? labwareTopToBottom.toReversed() : 'error'
+
+  if (labwareBottomToTop === 'error' || labwareBottomToTop.length < 1) {
+    return 'error'
+  }
+
+  const bottomLabwareLocation = labwareBottomToTop[0].location
+
+  if (
+    bottomLabwareLocation === 'offDeck' ||
+    bottomLabwareLocation === 'systemLocation'
+  ) {
+    return 'offDeck'
+  }
+
+  const bottom = (():
+    | 'error'
+    | {
+        slotId: string
+        moduleDefinition: ModuleDefinition | null
+      } => {
+    if ('moduleId' in bottomLabwareLocation) {
+      const loadedModule = loadedModules.find(
+        m => m.id === bottomLabwareLocation.moduleId
+      )
+      if (loadedModule == null) return 'error'
+      const moduleDefinition = getModuleDef(loadedModule.model)
+      const modSlot = deckDef.locations.addressableAreas.find(
+        s => s.id === loadedModule.location.slotName
+      )
+      if (modSlot == null) return 'error'
+      return { slotId: modSlot.id, moduleDefinition }
+    } else if ('slotName' in bottomLabwareLocation) {
+      return { slotId: bottomLabwareLocation.slotName, moduleDefinition: null }
+    } else if ('addressableAreaName' in bottomLabwareLocation) {
+      return {
+        slotId: bottomLabwareLocation.addressableAreaName,
+        moduleDefinition: null,
+      }
+    } else {
+      // Should not be reachable if resolveLabwareStack() did its job.
+      return 'error'
+    }
+  })()
+
+  if (bottom === 'error') {
+    return 'error'
+  }
+
+  return {
+    deckDefinition: deckDef,
+    slotId: bottom.slotId,
+    moduleDefinition: bottom.moduleDefinition,
+    labwareDefinitionsBottomToTop: labwareBottomToTop.map(l => l.definition),
+  }
+}
+
+/**
+ * Return the labware comprising the labware part of a stack. In other words, everything
+ * from the top labware down to, and excluding, the underlying module or deck slot.
+ */
+function resolveLabwareStack({
+  topLabwareDef,
+  topLabwareLocation,
+  otherLoadedLabware,
+  otherLabwareDefinitions,
+}: {
+  topLabwareDef: LabwareDefinition
+  topLabwareLocation: LabwareLocation
+  otherLoadedLabware: LoadedLabware[]
+  otherLabwareDefinitions: LabwareDefinition[]
+}):
+  | 'error'
+  | Array<{
+      definition: LabwareDefinition
+      location: LabwareLocation
+    }> {
+  let bottomMostLabwareSoFar = {
+    definition: topLabwareDef,
+    location: topLabwareLocation,
+  }
+  const labwareTopToBottomSoFar = [bottomMostLabwareSoFar]
+
+  while (
+    typeof bottomMostLabwareSoFar.location === 'object' &&
+    'labwareId' in bottomMostLabwareSoFar.location
+  ) {
+    const newBottomLabwareId = bottomMostLabwareSoFar.location.labwareId
+    const newBottomLabware = otherLoadedLabware.find(
+      l => l.id === newBottomLabwareId
+    )
+    const newBottomLabwareDefinition = otherLabwareDefinitions.find(
+      def => getLabwareDefURI(def) === newBottomLabware?.definitionUri
+    )
+    if (newBottomLabware == null || newBottomLabwareDefinition == null) {
+      console.warn(
+        `Expected to find details for labware ID ${newBottomLabwareId} but could not.`
+      )
+      return 'error'
+    }
+    bottomMostLabwareSoFar = {
+      definition: newBottomLabwareDefinition,
+      location: newBottomLabware.location,
+    }
+    labwareTopToBottomSoFar.push(bottomMostLabwareSoFar)
+  }
+
+  return labwareTopToBottomSoFar
+}