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

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

@@ -1,143 +1,41 @@
 import { useLayoutEffect, useMemo, useRef, useState } from 'react'
+import { animated, easings, useSpring } from '@react-spring/web'
 import styled from 'styled-components'
-import { animated, useSpring, easings } from '@react-spring/web'
+
 import {
+  computeLabwareOrigin,
   getDeckDefFromRobotType,
-  getModuleDef2,
-  getPositionFromSlotId,
+  getLabwareViewBox,
 } from '@opentrons/shared-data'
-import { LabwareRender } from '../Labware'
 
 import { COLORS } from '../../helix-design-system'
-import { IDENTITY_AFFINE_TRANSFORM, multiplyMatrices } from '../utils'
 import { BaseDeck } from '../BaseDeck'
+import { LabwareRender } from '../Labware'
+import { resolveLabwareLocation } from './resolveLabwareLocation'
 
+import type { PropsWithChildren, ReactNode } from 'react'
 import type {
+  DeckConfiguration,
+  DeckDefinition,
+  LabwareDefinition,
+  LabwareLocation,
   LoadedLabware,
   LoadedModule,
-  Coordinates,
-  LabwareDefinition2,
-  LabwareLocation,
   RobotType,
-  DeckDefinition,
-  DeckConfiguration,
+  Vector3D,
 } from '@opentrons/shared-data'
-
-import type { ReactNode } from 'react'
 import type { StyleProps } from '../../primitives'
 
-const getModulePosition = (
-  deckDef: DeckDefinition,
-  moduleId: string,
-  loadedModules: LoadedModule[]
-): Coordinates | null => {
-  const loadedModule = loadedModules.find(m => m.id === moduleId)
-  if (loadedModule == null) return null
-  const modSlot = deckDef.locations.addressableAreas.find(
-    s => s.id === loadedModule.location.slotName
-  )
-  if (modSlot == null) return null
-
-  const modPosition = getPositionFromSlotId(modSlot.id, deckDef)
-  if (modPosition == null) return null
-  const [modX, modY] = modPosition
-
-  const deckSpecificAffineTransform =
-    getModuleDef2(loadedModule.model).slotTransforms?.[deckDef.otId]?.[
-      modSlot.id
-    ]?.labwareOffset ?? IDENTITY_AFFINE_TRANSFORM
-  const [[labwareX], [labwareY], [labwareZ]] = multiplyMatrices(
-    [[modX], [modY], [1], [1]],
-    deckSpecificAffineTransform
-  )
-  return { x: labwareX, y: labwareY, z: labwareZ }
-}
-
-function getLabwareCoordinates({
-  deckDef,
-  location,
-  loadedModules,
-  loadedLabware,
-}: {
-  deckDef: DeckDefinition
-  location: LabwareLocation
-  loadedModules: LoadedModule[]
-  loadedLabware: LoadedLabware[]
-}): Coordinates | null {
-  if (location === 'offDeck' || location === 'systemLocation') {
-    return null
-  } else if ('labwareId' in location) {
-    const loadedAdapter = loadedLabware.find(l => l.id === location.labwareId)
-    if (loadedAdapter == null) return null
-    const loadedAdapterLocation = loadedAdapter.location
-
-    if (
-      loadedAdapterLocation === 'offDeck' ||
-      loadedAdapterLocation === 'systemLocation' ||
-      'labwareId' in loadedAdapterLocation
-    )
-      return null
-    //  adapter on module
-    if ('moduleId' in loadedAdapterLocation) {
-      return getModulePosition(
-        deckDef,
-        loadedAdapterLocation.moduleId,
-        loadedModules
-      )
-    }
-
-    //  adapter on deck
-    const loadedAdapterSlotPosition = getPositionFromSlotId(
-      'slotName' in loadedAdapterLocation
-        ? loadedAdapterLocation.slotName
-        : loadedAdapterLocation.addressableAreaName,
-      deckDef
-    )
-    return loadedAdapterSlotPosition != null
-      ? {
-          x: loadedAdapterSlotPosition[0],
-          y: loadedAdapterSlotPosition[1],
-          z: loadedAdapterSlotPosition[2],
-        }
-      : null
-  } else if ('addressableAreaName' in location) {
-    const slotCoordinateTuple = getPositionFromSlotId(
-      location.addressableAreaName,
-      deckDef
-    )
-    return slotCoordinateTuple != null
-      ? {
-          x: slotCoordinateTuple[0],
-          y: slotCoordinateTuple[1],
-          z: slotCoordinateTuple[2],
-        }
-      : null
-  } else if ('slotName' in location) {
-    const slotCoordinateTuple = getPositionFromSlotId(
-      location.slotName,
-      deckDef
-    )
-    return slotCoordinateTuple != null
-      ? {
-          x: slotCoordinateTuple[0],
-          y: slotCoordinateTuple[1],
-          z: slotCoordinateTuple[2],
-        }
-      : null
-  } else {
-    return getModulePosition(deckDef, location.moduleId, loadedModules)
-  }
-}
-
 const SPLASH_Y_BUFFER_MM = 10
 
 interface MoveLabwareOnDeckProps extends StyleProps {
   robotType: RobotType
-  movedLabwareDef: LabwareDefinition2
+  movedLabwareDef: LabwareDefinition
   initialLabwareLocation: LabwareLocation
   finalLabwareLocation: LabwareLocation
   loadedModules: LoadedModule[]
   loadedLabware: LoadedLabware[]
+  labwareDefinitions: LabwareDefinition[]
   deckConfig: DeckConfiguration
   backgroundItems?: ReactNode
   deckFill?: string
@@ -149,6 +47,7 @@ export function MoveLabwareOnDeck(
     robotType,
     movedLabwareDef,
     loadedLabware,
+    labwareDefinitions,
     initialLabwareLocation,
     finalLabwareLocation,
     loadedModules,
@@ -158,48 +57,67 @@ export function MoveLabwareOnDeck(
   } = props
   const deckDef = useMemo(() => getDeckDefFromRobotType(robotType), [robotType])
 
-  const initialSlotId =
-    initialLabwareLocation === 'offDeck' ||
-    initialLabwareLocation === 'systemLocation' ||
-    !('slotName' in initialLabwareLocation)
-      ? deckDef.locations.addressableAreas[1].id
-      : initialLabwareLocation.slotName
-
-  const slotPosition = getPositionFromSlotId(initialSlotId, deckDef) ?? [
-    0,
-    0,
-    0,
-  ]
+  const initialResolvedLocation = resolveLabwareLocation({
+    deckDef,
+    targetLabwareDef: movedLabwareDef,
+    targetLabwareLocation: initialLabwareLocation,
+    loadedModules,
+    otherLoadedLabware: loadedLabware,
+    otherLabwareDefinitions: labwareDefinitions,
+  })
+  const finalResolvedLocation = resolveLabwareLocation({
+    deckDef,
+    targetLabwareDef: movedLabwareDef,
+    targetLabwareLocation: finalLabwareLocation,
+    loadedModules,
+    otherLoadedLabware: loadedLabware,
+    otherLabwareDefinitions: labwareDefinitions,
+  })
 
-  const offDeckPosition = {
-    x: slotPosition[0],
-    y:
-      deckDef.cornerOffsetFromOrigin[1] -
-      movedLabwareDef.dimensions.xDimension -
-      SPLASH_Y_BUFFER_MM,
-  }
-  const initialPosition =
-    getLabwareCoordinates({
-      deckDef,
-      location: initialLabwareLocation,
-      loadedModules,
-      loadedLabware,
-    }) ?? offDeckPosition
-  const finalPosition =
-    getLabwareCoordinates({
-      deckDef,
-      location: finalLabwareLocation,
-      loadedModules,
-      loadedLabware,
-    }) ?? offDeckPosition
+  const initialCoordinates =
+    initialResolvedLocation === 'error' || initialResolvedLocation === 'offDeck'
+      ? initialResolvedLocation
+      : computeLabwareOrigin(initialResolvedLocation) ?? 'error'
+  const finalCoordinates =
+    finalResolvedLocation === 'error' || finalResolvedLocation === 'offDeck'
+      ? finalResolvedLocation
+      : computeLabwareOrigin(finalResolvedLocation) ?? 'error'
+
+  const referenceForOffDeckCoordinates = (() => {
+    if (initialCoordinates !== 'error' && initialCoordinates !== 'offDeck') {
+      return initialCoordinates
+    } else if (finalCoordinates !== 'error' && finalCoordinates !== 'offDeck') {
+      return finalCoordinates
+    } else {
+      return { x: 0, y: 0, z: 0 }
+    }
+  })()
+  const offDeckCoordinates = getOffDeckCoordinates(
+    deckDef,
+    movedLabwareDef,
+    referenceForOffDeckCoordinates,
+    SPLASH_Y_BUFFER_MM
+  )
 
-  const shouldReset = usePositionChangeReset(initialPosition, finalPosition)
+  const animationInitialCoordinates =
+    initialCoordinates !== 'error' && initialCoordinates !== 'offDeck'
+      ? initialCoordinates
+      : offDeckCoordinates
+  const animationFinalCoordinates =
+    finalCoordinates !== 'error' && finalCoordinates !== 'offDeck'
+      ? finalCoordinates
+      : offDeckCoordinates
+
+  const shouldReset = usePositionChangeReset(
+    animationInitialCoordinates,
+    animationFinalCoordinates
+  )
 
   const springProps = useSpring({
     reset: shouldReset,
     config: { duration: 1000, easing: easings.easeInOutSine },
     from: {
-      ...initialPosition,
+      ...animationInitialCoordinates,
       splashOpacity: 0,
       deckOpacity: 0,
     },
@@ -207,7 +125,7 @@ export function MoveLabwareOnDeck(
       { deckOpacity: 1 },
       { splashOpacity: 1 },
       { splashOpacity: 0 },
-      { ...finalPosition },
+      { ...animationFinalCoordinates },
       { splashOpacity: 1 },
       { splashOpacity: 0 },
       { deckOpacity: 0 },
@@ -215,10 +133,6 @@ export function MoveLabwareOnDeck(
     loop: true,
   })
 
-  if (deckDef == null) {
-    return null
-  }
-
   return (
     <BaseDeck
       deckConfig={deckConfig}
@@ -231,11 +145,13 @@ export function MoveLabwareOnDeck(
     >
       {backgroundItems}
       <AnimatedG style={{ x: springProps.x, y: springProps.y }}>
-        <g
-          transform={`translate(${movedLabwareDef.cornerOffsetFromSlot.x}, ${movedLabwareDef.cornerOffsetFromSlot.y})`}
-        >
-          <LabwareRender definition={movedLabwareDef} highlight={true} />
-          <AnimatedG style={{ opacity: springProps.splashOpacity }}>
+        <LabwareRender
+          definition={movedLabwareDef}
+          positioningMode="passThrough"
+          highlight={true}
+        />
+        <AnimatedG style={{ opacity: springProps.splashOpacity }}>
+          <AlignSplashToLabware labwareDefinition={movedLabwareDef}>
             <path
               d="M158.027 111.537L154.651 108.186M145.875 113L145.875 109.253M161 99.3038L156.864 99.3038M11.9733 10.461L15.3495 13.8128M24.1255 9L24.1254 12.747M9 22.6962L13.1357 22.6962"
               stroke={COLORS.blue50}
@@ -243,13 +159,38 @@ export function MoveLabwareOnDeck(
               strokeLinecap="round"
               transform="scale(.97, -1) translate(-19, -104)"
             />
-          </AnimatedG>
-        </g>
+          </AlignSplashToLabware>
+        </AnimatedG>
       </AnimatedG>
     </BaseDeck>
   )
 }
 
+/**
+ * Returns the coordinates of a location beyond the bounds of the deck.
+ *
+ * @param onDeckCoordinates - The coordinates of the labware when it's on-deck. The
+ *  off-deck location is chosen to be vertically aligned with this, so the animation
+ *  goes straight up or down.
+ */
+function getOffDeckCoordinates(
+  deckDefinition: DeckDefinition,
+  labwareDefinition: LabwareDefinition,
+  onDeckCoordinates: Vector3D,
+  extraMargin: number
+): Vector3D {
+  const labwareViewBox = getLabwareViewBox(labwareDefinition)
+  const labwareOriginToLabwareMaxY =
+    labwareViewBox.minY + labwareViewBox.yDimension
+  const margin = labwareOriginToLabwareMaxY + extraMargin
+  const deckMinY = deckDefinition.cornerOffsetFromOrigin[1]
+  const y = deckMinY - margin - labwareOriginToLabwareMaxY
+  return {
+    ...onDeckCoordinates,
+    y,
+  }
+}
+
 function usePositionChangeReset(
   initialPosition: { x: number; y: number },
   finalPosition: { x: number; y: number }
@@ -281,6 +222,31 @@ function usePositionChangeReset(
 
   return shouldReset
 }
+
+/**
+ * The splash SVG is made for its origin to be placed at the -x,-y corner of a labware
+ * (or the slot that the labware is in). If this component is placed at the labware
+ * origin and the splash is placed inside this component, it will align the splash
+ * accordingly.
+ */
+function AlignSplashToLabware(
+  props: PropsWithChildren<{ labwareDefinition: LabwareDefinition }>
+): JSX.Element {
+  const { labwareDefinition, children } = props
+  const labwareViewBox = getLabwareViewBox(labwareDefinition)
+  const labwareOriginToFrontLeftCorner = {
+    x: labwareViewBox.minX,
+    y: labwareViewBox.minY,
+  }
+  return (
+    <g
+      transform={`translate(${labwareOriginToFrontLeftCorner.x} ${labwareOriginToFrontLeftCorner.y})`}
+    >
+      {children}
+    </g>
+  )
+}
+
 /**
  * These animated components needs to be split out because react-spring and styled-components don't play nice
  * @see https://github.com/pmndrs/react-spring/issues/1515 */

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

@@ -1,7 +1,9 @@
-import { Box } from '../../primitives'
+import { withStyleProps } from '../../hocs/withStyleProps'
 
-import type { ComponentProps, ReactNode } from 'react'
+import type { HTMLAttributes, ReactNode } from 'react'
+import type { StyleProps } from '../../primitives'
 
+export type PositionType = 'absolute' | 'relative' | 'fixed'
 export interface RobotCoordsForeignDivProps {
   width?: string | number
   height?: string | number
@@ -9,43 +11,49 @@ export interface RobotCoordsForeignDivProps {
   y?: string | number
   children?: ReactNode
   outerProps?: any
-  innerDivProps?: ComponentProps<typeof Box>
+  innerDivProps?: StyleProps
+  innerDivEvents?: HTMLAttributes<HTMLDivElement>
   transformWithSVG?: boolean
   extraTransform?: string
-  /** optional data-testid to test foreignObjects in cypress */
   dataTestId?: string
 }
 
-export const RobotCoordsForeignDiv = (
-  props: RobotCoordsForeignDivProps
-): JSX.Element => {
-  const {
-    children,
-    x = 0,
-    y = 0,
-    height = '100%',
-    width = '100%',
-    outerProps,
-    innerDivProps,
-    transformWithSVG = false,
-    extraTransform = '',
-    dataTestId = '',
-  } = props
+const StyledDiv = withStyleProps('div' as any)
+
+export const RobotCoordsForeignDiv = ({
+  children,
+  x = 0,
+  y = 0,
+  height = '100%',
+  width = '100%',
+  outerProps,
+  innerDivProps = {},
+  transformWithSVG = false,
+  extraTransform = '',
+  dataTestId = '',
+  innerDivEvents,
+}: RobotCoordsForeignDivProps): JSX.Element => {
+  const svgTransform = `scale(1, -1) ${extraTransform}`
 
-  const transform = `scale(1, -1) ${extraTransform}`
   return (
     <foreignObject
       data-testid={dataTestId}
-      {...{ x, y, height, width, ...outerProps }}
-      transform={transformWithSVG ? transform : extraTransform}
+      x={x}
+      y={y}
+      height={height}
+      width={width}
+      transform={transformWithSVG ? svgTransform : extraTransform}
+      {...outerProps}
     >
-      <Box
-        style={transformWithSVG ? {} : { transform }}
-        xmlns="http://www.w3.org/1999/xhtml"
-        {...innerDivProps}
+      <StyledDiv
+        {...innerDivEvents}
+        style={{
+          ...innerDivProps,
+          ...(transformWithSVG ? { transform: svgTransform } : {}),
+        }}
       >
         {children}
-      </Box>
+      </StyledDiv>
     </foreignObject>
   )
 }

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

@@ -1,7 +1,13 @@
-import { css } from 'styled-components'
-import { Flex, ForeignObject } from '../../primitives'
+import { withStyleProps } from '../../hocs/withStyleProps'
+import { ForeignObject } from '../../primitives'
+import styles from './deck.module.css'
 
-import type { ComponentProps, ReactNode } from 'react'
+import type { HTMLAttributes, ReactNode } from 'react'
+import type { StyleProps } from '../../primitives'
+
+export type FlexDirection = 'column' | 'row'
+
+const StyledDiv = withStyleProps('div' as any)
 
 export interface RobotCoordsForeignObjectProps {
   width: string | number
@@ -9,35 +15,33 @@ export interface RobotCoordsForeignObjectProps {
   x: string | number
   y: string | number
   children?: ReactNode
-  foreignObjectProps?: ComponentProps<typeof ForeignObject>
-  flexProps?: ComponentProps<typeof Flex>
+  foreignObjectProps?: StyleProps
+  foreignObjectEvents?: HTMLAttributes<HTMLDivElement>
+  flexProps?: StyleProps
+  flexEvents?: HTMLAttributes<HTMLDivElement>
 }
-
-export const RobotCoordsForeignObject = (
-  props: RobotCoordsForeignObjectProps
-): JSX.Element => {
-  const {
-    children,
-    x,
-    y,
-    height,
-    width,
-    foreignObjectProps = {},
-    flexProps = {},
-  } = props
-
+export const RobotCoordsForeignObject = ({
+  children,
+  x,
+  y,
+  height,
+  width,
+  foreignObjectEvents,
+  foreignObjectProps = {},
+  flexProps,
+  flexEvents = {},
+}: RobotCoordsForeignObjectProps): JSX.Element => {
   return (
-    <ForeignObject {...{ x, y, height, width }}>
-      <Flex
-        height="100%"
-        width="100%"
-        css={css`
-          transform: scale(1, -1);
-        `}
-        {...foreignObjectProps}
+    <ForeignObject x={x} y={y} height={height} width={width}>
+      <StyledDiv
+        className={styles.robot_coords_foreign_object_container}
+        {...foreignObjectEvents}
+        style={foreignObjectProps}
       >
-        <Flex {...flexProps}>{children}</Flex>
-      </Flex>
+        <StyledDiv {...flexEvents} style={flexProps}>
+          {children}
+        </StyledDiv>
+      </StyledDiv>
     </ForeignObject>
   )
 }

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>