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

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

@@ -1,15 +1,18 @@
+import clsx from 'clsx'
+
 import {
   FLEX_ROBOT_TYPE,
   getDeckDefFromRobotType,
+  getSchema2CornerOffsetFromSlot,
+  getSchema2Dimensions,
   opentrons1Trash3200MlFixedV1 as trashLabwareDef,
 } from '@opentrons/shared-data'
 
-import { BORDERS, COLORS } from '../../helix-design-system'
+import { PlaceholderStyledText } from '../../atoms'
+import { COLORS } from '../../helix-design-system'
 import { Icon } from '../../icons'
 import { DeckLabelSet } from '../../organisms'
-import { Flex, Text } from '../../primitives'
-import { ALIGN_CENTER, JUSTIFY_CENTER } from '../../styles'
-import { SPACING, TYPOGRAPHY } from '../../ui-style-constants'
+import styles from './deck.module.css'
 import { RobotCoordsForeignObject } from './RobotCoordsForeignObject'
 
 import type { RobotType } from '@opentrons/shared-data'
@@ -36,6 +39,9 @@ interface FlexTrashProps {
   showHighlight?: boolean
   /** optional tag info to display a tag below the trash */
   tagInfo?: DeckLabelProps[]
+  onClick?: () => void
+  onMouseEnter?: () => void
+  onMouseLeave?: () => void
 }
 
 /**
@@ -50,6 +56,9 @@ export const FlexTrash = ({
   trashCutoutId,
   showHighlight,
   tagInfo,
+  onClick,
+  onMouseEnter,
+  onMouseLeave,
 }: FlexTrashProps): JSX.Element | null => {
   // be sure we don't try to render for an OT-2
   if (robotType !== FLEX_ROBOT_TYPE) return null
@@ -70,11 +79,10 @@ export const FlexTrash = ({
   } = deckDefinition.locations.addressableAreas[0].boundingBox
 
   // adjust for dimensions from trash definition
-  const {
-    x: xAdjustment,
-    y: yAdjustment,
-  } = trashLabwareDef.cornerOffsetFromSlot
-  const { xDimension, yDimension } = trashLabwareDef.dimensions
+  const { x: xAdjustment, y: yAdjustment } = getSchema2CornerOffsetFromSlot(
+    trashLabwareDef
+  )
+  const { xDimension, yDimension } = getSchema2Dimensions(trashLabwareDef)
 
   // rotate trash 180 degrees in column 1
   const rotateDegrees =
@@ -96,28 +104,37 @@ export const FlexTrash = ({
         height={yDimension}
         x={x + xAdjustment}
         y={y + yAdjustment}
-        flexProps={{ flex: '1' }}
-        foreignObjectProps={{ flex: '1' }}
+        flexProps={{
+          flex: '1',
+        }}
+        flexEvents={{
+          onClick: onClick,
+          onMouseEnter: onMouseEnter,
+          onMouseLeave: onMouseLeave,
+        }}
+        foreignObjectProps={{
+          flex: '1',
+          cursor: onClick != null ? 'pointer' : 'default',
+        }}
       >
-        <Flex
-          alignItems={ALIGN_CENTER}
-          backgroundColor={backgroundColor}
-          borderRadius={BORDERS.borderRadius4}
-          justifyContent={JUSTIFY_CENTER}
-          gridGap={SPACING.spacing8}
-          width="100%"
-          border={showHighlight ? `3px solid ${COLORS.blue50}` : 'none'}
+        <div
+          className={clsx(styles.trash_container, {
+            [styles.trash_container_highlight]: showHighlight,
+          })}
+          style={{ backgroundColor }}
         >
           {rotateDegrees === '180' ? (
-            <Text
-              color={COLORS.white}
-              // rotate text back 180 degrees
-              transform={`rotate(${rotateDegrees}deg)`}
-              transformOrigin="center"
-              css={TYPOGRAPHY.bodyTextSemiBold}
+            <div
+              className={styles.trash_container_rotate_copy}
+              style={{ transform: `rotate(${rotateDegrees}deg)` }}
             >
-              Trash bin
-            </Text>
+              <PlaceholderStyledText
+                color={COLORS.white}
+                desktopStyle="bodyDefaultSemiBold"
+              >
+                Trash bin
+              </PlaceholderStyledText>
+            </div>
           ) : null}
           <Icon
             name="trash"
@@ -128,11 +145,14 @@ export const FlexTrash = ({
             transformOrigin="center"
           />
           {rotateDegrees === '0' ? (
-            <Text color={COLORS.white} css={TYPOGRAPHY.bodyTextSemiBold}>
+            <PlaceholderStyledText
+              color={COLORS.white}
+              desktopStyle="bodyDefaultSemiBold"
+            >
               Trash bin
-            </Text>
+            </PlaceholderStyledText>
           ) : null}
-        </Flex>
+        </div>
       </RobotCoordsForeignObject>
       {tagInfo != null && tagInfo.length > 0 ? (
         <DeckLabelSet

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

@@ -13,7 +13,7 @@ import type { Meta, StoryObj } from '@storybook/react'
 import type * as React from 'react'
 import type {
   DeckConfiguration,
-  LabwareDefinition2,
+  LabwareDefinition,
 } from '@opentrons/shared-data'
 
 const meta: Meta<React.ComponentProps<typeof MoveLabwareOnDeckComponent>> = {
@@ -78,7 +78,7 @@ const FLEX_SIMPLEST_DECK_CONFIG: DeckConfiguration = [
 export const MoveLabwareOnDeck: Story = {
   render: args => (
     <MoveLabwareOnDeckComponent
-      movedLabwareDef={fixture96Plate as LabwareDefinition2}
+      movedLabwareDef={fixture96Plate as LabwareDefinition}
       initialLabwareLocation={args.initialLabwareLocation}
       finalLabwareLocation={args.finalLabwareLocation}
       loadedModules={[]}

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

@@ -3,21 +3,21 @@ import { animated, easings, useSpring } from '@react-spring/web'
 import styled from 'styled-components'
 
 import {
+  computeLabwareOrigin,
   getDeckDefFromRobotType,
-  getModuleDef2,
-  getPositionFromSlotId,
+  getLabwareViewBox,
 } from '@opentrons/shared-data'
 
 import { COLORS } from '../../helix-design-system'
 import { BaseDeck } from '../BaseDeck'
 import { LabwareRender } from '../Labware'
-import { IDENTITY_AFFINE_TRANSFORM, multiplyMatrices } from '../utils'
+import { resolveLabwareLocation } from './resolveLabwareLocation'
 
-import type { ReactNode } from 'react'
+import type { PropsWithChildren, ReactNode } from 'react'
 import type {
   DeckConfiguration,
   DeckDefinition,
-  LabwareDefinition2,
+  LabwareDefinition,
   LabwareLocation,
   LoadedLabware,
   LoadedModule,
@@ -26,118 +26,16 @@ import type {
 } from '@opentrons/shared-data'
 import type { StyleProps } from '../../primitives'
 
-const getModulePosition = (
-  deckDef: DeckDefinition,
-  moduleId: string,
-  loadedModules: LoadedModule[]
-): Vector3D | 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[]
-}): Vector3D | 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,8 +1,13 @@
-import { css } from 'styled-components'
+import { withStyleProps } from '../../hocs/withStyleProps'
+import { ForeignObject } from '../../primitives'
+import styles from './deck.module.css'
 
-import { Flex, ForeignObject } from '../../primitives'
+import type { HTMLAttributes, ReactNode } from 'react'
+import type { StyleProps } from '../../primitives'
 
-import type { ComponentProps, ReactNode } from 'react'
+export type FlexDirection = 'column' | 'row'
+
+const StyledDiv = withStyleProps('div' as any)
 
 export interface RobotCoordsForeignObjectProps {
   width: string | number
@@ -10,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>
   )
 }