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

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

@@ -1,253 +0,0 @@
-import { useLayoutEffect, useMemo, useRef, useState } from 'react'
-import { animated, easings, useSpring } from '@react-spring/web'
-import styled from 'styled-components'
-
-import {
-  computeLabwareOrigin,
-  getDeckDefFromRobotType,
-  getLabwareViewBox,
-} from '@opentrons/shared-data'
-
-import { COLORS } from '../../helix-design-system'
-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,
-  RobotType,
-  Vector3D,
-} from '@opentrons/shared-data'
-import type { StyleProps } from '../../primitives'
-
-const SPLASH_Y_BUFFER_MM = 10
-
-interface MoveLabwareOnDeckProps extends StyleProps {
-  robotType: RobotType
-  movedLabwareDef: LabwareDefinition
-  initialLabwareLocation: LabwareLocation
-  finalLabwareLocation: LabwareLocation
-  loadedModules: LoadedModule[]
-  loadedLabware: LoadedLabware[]
-  labwareDefinitions: LabwareDefinition[]
-  deckConfig: DeckConfiguration
-  backgroundItems?: ReactNode
-  deckFill?: string
-}
-export function MoveLabwareOnDeck(
-  props: MoveLabwareOnDeckProps
-): JSX.Element | null {
-  const {
-    robotType,
-    movedLabwareDef,
-    loadedLabware,
-    labwareDefinitions,
-    initialLabwareLocation,
-    finalLabwareLocation,
-    loadedModules,
-    deckConfig,
-    backgroundItems = null,
-    ...styleProps
-  } = props
-  const deckDef = useMemo(() => getDeckDefFromRobotType(robotType), [robotType])
-
-  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 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 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: {
-      ...animationInitialCoordinates,
-      splashOpacity: 0,
-      deckOpacity: 0,
-    },
-    to: [
-      { deckOpacity: 1 },
-      { splashOpacity: 1 },
-      { splashOpacity: 0 },
-      { ...animationFinalCoordinates },
-      { splashOpacity: 1 },
-      { splashOpacity: 0 },
-      { deckOpacity: 0 },
-    ],
-    loop: true,
-  })
-
-  return (
-    <BaseDeck
-      deckConfig={deckConfig}
-      robotType={robotType}
-      svgProps={{
-        style: { opacity: springProps.deckOpacity },
-        ...styleProps,
-      }}
-      animatedSVG
-    >
-      {backgroundItems}
-      <AnimatedG style={{ x: springProps.x, y: springProps.y }}>
-        <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}
-              strokeWidth="3.57"
-              strokeLinecap="round"
-              transform="scale(.97, -1) translate(-19, -104)"
-            />
-          </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 }
-): boolean {
-  const [shouldReset, setShouldReset] = useState(false)
-
-  useLayoutEffect(() => {
-    if (shouldReset) {
-      setShouldReset(false)
-      return
-    }
-
-    const isNewPosition =
-      previousInitialRef.current?.x !== initialPosition.x ||
-      previousInitialRef.current?.y !== initialPosition.y ||
-      previousFinalRef.current?.x !== finalPosition.x ||
-      previousFinalRef.current?.y !== finalPosition.y
-
-    if (isNewPosition) {
-      setShouldReset(true)
-    }
-
-    previousInitialRef.current = initialPosition
-    previousFinalRef.current = finalPosition
-  }, [initialPosition, finalPosition])
-
-  const previousInitialRef = useRef(initialPosition)
-  const previousFinalRef = useRef(finalPosition)
-
-  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 */
-const AnimatedG = styled(animated.g as any)``

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

@@ -1,160 +0,0 @@
-import { COLORS } from '../../helix-design-system'
-
-export function FixedBase(): JSX.Element {
-  return (
-    <g id="fixedBase">
-      <path
-        d="M506.326,494.546h-619.653V-65.506h68.503V397c0,2.935,2.388,5.324,5.324,5.324H260c2.935,0,5.324-2.388,5.324-5.324V284.5c0-6.99,5.687-12.676,12.677-12.676h154.5c2.936,0,5.324-2.388,5.324-5.324V-65.506h68.503V494.546z"
-        style={{
-          fill: 'rgb(255, 255, 255)',
-          stroke: 'rgb(204, 204, 204)',
-          width: '100%',
-          height: '100%',
-        }}
-      ></path>
-    </g>
-  )
-}
-
-interface FixedTrashProps {
-  highlight?: boolean
-}
-export function FixedTrash(props: FixedTrashProps): JSX.Element {
-  const { highlight = false } = props
-  return (
-    <g id="fixedTrash">
-      <path
-        d="M441.107,289.57v135.86c0,8.368-6.808,15.176-15.176,15.176H283.07c-8.368,0-15.176-6.808-15.176-15.176V289.57c0-8.368,6.808-15.177,15.176-15.177h142.86C434.298,274.394,441.107,281.202,441.107,289.57z M425.053,434H283.947c-1.24,0-2.484-0.034-3.702-0.287c-2-0.416-3.81-1.446-4.884-3.227c-1.152-1.91-1.289-4.185-1.289-6.359v-88.629c0-2.683,0.259-5.609,2.263-7.612c2.004-2.003,4.928-2.263,7.612-2.263h25.939c1.693,0.006,3.545-0.167,4.807-1.429c1.262-1.262,1.435-3.115,1.429-4.807v-28.94c0-2.124,0.129-4.338,1.209-6.225c1.059-1.851,2.904-2.933,4.954-3.36c1.222-0.255,2.468-0.289,3.712-0.289h99.056c2.124,0,4.339,0.129,6.226,1.209c1.851,1.06,2.933,2.904,3.36,4.954c0.255,1.222,0.289,2.468,0.289,3.712v133.68c0,2.684-0.259,5.607-2.263,7.611C430.661,433.741,427.737,434,425.053,434z"
-        style={{
-          fill: highlight ? 'none' : 'rgb(237, 237, 237)',
-          stroke: highlight ? COLORS.blue50 : 'none',
-          fillRule: 'evenodd',
-          strokeWidth: 2,
-        }}
-      ></path>
-    </g>
-  )
-}
-export function DoorStops(): JSX.Element {
-  return (
-    <g id="doorStops">
-      <path
-        d="M-63.6-67.68v2.35h8.06v-2.35H-63.6z M-75.45-65.33h27.95c1.381,0,2.5,1.119,2.5,2.5v15c0,1.381-1.119,2.5-2.5,2.5h-27.95c-1.381,0-2.5-1.119-2.5-2.5v-15C-77.95-64.211-76.831-65.33-75.45-65.33z M468.45-45.33H440.5c-1.381,0-2.5-1.119-2.5-2.5v-15c0-1.381,1.119-2.5,2.5-2.5h27.95c1.381,0,2.5,1.119,2.5,2.5v15C470.95-46.449,469.831-45.33,468.45-45.33z"
-        style={{
-          fill: 'rgb(255, 255, 255)',
-          stroke: 'rgb(204, 204, 204)',
-          width: '100%',
-          height: '100%',
-        }}
-      ></path>
-    </g>
-  )
-}
-
-export function MetalFrame(): JSX.Element {
-  return (
-    <g id="metalFrame">
-      <path
-        d="M506.65,443.07v51.05h2v-51.05H506.65z M-113.65,494.12h-2v-51.05h2V494.12z M506.65-65.08h2v51.05h-2V-65.08z M-113.65-14.03v-51.05h-2v51.05H-113.65z M-113.15-66.08v51.55h3v-12.5h5c0.803,0,1.588-0.242,2.252-0.694l23.2-15.8c1.094-0.745,1.748-1.983,1.748-3.306v-19.25h12.5v-2h-50.2v2H-113.15z M-113.15,495.12h-2.5v2h50.2v-2h-12.5v-19.25c0-1.323-0.654-2.561-1.748-3.306l-23.2-15.8c-0.664-0.452-1.449-0.694-2.252-0.694h-5v-12.5h-3V495.12z M506.15,495.12v-51.55h-3v12.5h-5c-0.803,0-1.588,0.242-2.252,0.694l-23.2,15.8c-1.094,0.745-1.748,1.983-1.748,3.306v19.25h-12.5v2h50.2v-2H506.15z M506.15-14.53v-51.55h2.5v-2h-50.2v2h12.5v19.25c0,1.323,0.654,2.561,1.748,3.306l23.2,15.8c0.664,0.452,1.449,0.694,2.252,0.694h5v12.5H506.15z"
-        style={{
-          fill: 'rgb(255, 255, 255)',
-          stroke: 'rgb(204, 204, 204)',
-          width: '100%',
-          height: '100%',
-        }}
-      ></path>
-    </g>
-  )
-}
-
-export function RemovableDeckOutline(): JSX.Element {
-  return (
-    <g id="removableDeckOutline">
-      <path
-        d="M-44.5-60.33c0-2.761,2.239-5,5-5h472c2.761,0,5,2.239,5,5V266.5c0,2.761-2.239,5-5,5H278c-7.18,0-13,5.82-13,13v0l0,112.5c0,2.761-2.239,5-5,5H-39.5c-2.761,0-5-2.239-5-5L-44.5-60.33z"
-        style={{
-          fill: 'rgb(255, 255, 255)',
-          stroke: 'rgb(237, 237, 237)',
-          width: '100%',
-          height: '100%',
-        }}
-      ></path>
-    </g>
-  )
-}
-
-export function SlotRidges(): JSX.Element {
-  return (
-    <g id="slotRidges">
-      <path
-        d="M265,278.75h-4.5v71.5h4.5V278.75z M120.75,357.5H7.25v4.5h113.5V357.5z M7.25,271.5h113.5V267H7.25V271.5z M-4.5,350.25H0l0-71.5h-4.5V350.25 M139.75,357.5h113.5v4.5h-113.5V357.5z M132.5,350.25v-71.5H128v71.5H132.5z M253.25,267h-113.5v4.5h113.5V267z M385.75,267h-113.5v4.5h113.5V267z M120.75,176.5H7.25v4.5h113.5V176.5z M0,188.25l0,71.5h-4.5v-71.5H0z M0,97.75l0,71.5h-4.5v-71.5H0z M393,188.25v71.5h4.5v-71.5H393z M260.5,188.25v71.5h4.5v-71.5H260.5z M385.75,176.5h-113.5v4.5h113.5V176.5z M128,188.25v71.5h4.5v-71.5H128z M393,97.75v71.5h4.5v-71.5H393z M253.25,176.5h-113.5v4.5h113.5V176.5z M260.5,97.75v71.5h4.5v-71.5H260.5z M128,97.75v71.5h4.5v-71.5H128z M385.75,86h-113.5v4.5h113.5V86z M393,7.25v71.5h4.5V7.25H393z M385.75,0l-113.5,0v-4.5h113.5V0z M253.25,86h-113.5v4.5h113.5V86z M260.5,7.25v71.5h4.5V7.25H260.5z M253.25,0l-113.5,0v-4.5h113.5V0z M120.75,0L7.25,0v-4.5h113.5V0z M120.75,86H7.25v4.5h113.5V86z M128,7.25v71.5h4.5V7.25H128z M0,7.25l0,71.5h-4.5V7.25H0z"
-        style={{
-          fill: 'rgb(237, 237, 237)',
-          stroke: 'none',
-          fillRule: 'evenodd',
-        }}
-      ></path>
-    </g>
-  )
-}
-export function SlotNumbers(): JSX.Element {
-  return (
-    <g id="slotNumbers">
-      <path
-        d="M327.879,29.245c7.276,0,12.41,1.696,12.41,9.687c0,5.216-2.252,7.894-7.698,8.111c-0.157,0.006-0.301,0.085-0.391,0.214c-0.158,0.227-0.102,0.538,0.125,0.696c3.058,2.129,5.114,3.655,6.89,5.262c0.314,0.284,0.494,0.688,0.494,1.112v4.22c0,0.828-0.672,1.5-1.5,1.5h-16.687c-0.828,0-1.5-0.672-1.5-1.5v-3.428c0-0.828,0.672-1.5,1.5-1.5h7.347c0.137,0,0.268-0.057,0.362-0.156c0.19-0.2,0.181-0.517-0.019-0.707c-0.953-0.901-3.261-2.616-6.8-5.055c-0.406-0.28-0.649-0.742-0.649-1.235v-2.418c0-0.828,0.672-1.5,1.5-1.5h0.732c6.116,0,7.902-0.58,7.902-3.125c0-3.169-1.652-3.616-5.268-3.616c-1.169,0-3.183,0.141-4.79,0.355c-0.026,0.003-0.051,0.006-0.077,0.008c-0.826,0.067-1.549-0.548-1.616-1.374l-0.267-3.31c-0.062-0.773,0.474-1.465,1.238-1.598C323.4,29.49,325.902,29.245,327.879,29.245z M219.767,307.843v-3.651c0-0.828-0.672-1.5-1.5-1.5h-16.195c-0.828,0-1.5,0.672-1.5,1.5v3.651c0,0.828,0.672,1.5,1.5,1.5h4.16c0.276,0,0.5,0.224,0.5,0.5v15.853c0,0.276-0.223,0.5-0.5,0.5c-0.037,0-0.075-0.004-0.111-0.012l-4.163-0.946c-0.808-0.184-1.612,0.322-1.795,1.13c-0.025,0.109-0.037,0.22-0.037,0.332v3.568c0,0.706,0.492,1.316,1.181,1.466l5.305,1.154c0.489,0.106,0.987,0.159,1.487,0.159h4.901c0.828,0,1.5-0.672,1.5-1.5v-21.704c0-0.276,0.224-0.5,0.5-0.5h3.267C219.095,309.343,219.767,308.672,219.767,307.843z M83.865,304.076c-1.964-1.384-3.527-1.83-7.009-1.83c-3.437,0-4.955,0.447-6.919,1.83c-3.08,2.187-4.152,9.107-4.152,13.794c0,4.731,1.072,11.606,4.152,13.793c1.964,1.384,3.482,1.831,6.919,1.831c3.482,0,5.045-0.447,7.009-1.831c3.08-2.187,4.107-9.062,4.107-13.793C87.972,313.182,86.945,306.263,83.865,304.076z M72.548,125.549v-3.357c0-0.828-0.672-1.5-1.5-1.5h-4.41c-0.828,0-1.5,0.672-1.5,1.5v3.357c0,0.276-0.224,0.5-0.5,0.5H54.094c-0.828,0-1.5,0.672-1.5,1.5v4.129c0,1.218,0.223,2.427,0.657,3.565l5.662,14.84c0.222,0.581,0.78,0.965,1.402,0.965h4.335c0.828,0,1.5-0.671,1.5-1.5c0-0.199-0.04-0.396-0.116-0.58c-3.975-9.491-5.932-14.562-6.181-15.9c-0.051-0.271,0.128-0.533,0.4-0.583c0.03-0.006,0.061-0.008,0.091-0.008h4.294c0.276,0,0.5,0.224,0.5,0.5v6.482c0,0.828,0.672,1.5,1.5,1.5h4.41c0.828,0,1.5-0.672,1.5-1.5v-6.482c0-0.276,0.224-0.5,0.5-0.5h0.991c0.828,0,1.5-0.672,1.5-1.5v-3.428c0-0.828-0.672-1.5-1.5-1.5h-0.991C72.772,126.049,72.548,125.825,72.548,125.549z M61.008,307.843v-3.651c0-0.828-0.672-1.5-1.5-1.5H43.312c-0.828,0-1.5,0.672-1.5,1.5v3.651c0,0.828,0.672,1.5,1.5,1.5h4.161c0.276,0,0.5,0.224,0.5,0.5v15.853c0,0.276-0.223,0.5-0.5,0.5c-0.038,0-0.075-0.004-0.111-0.012l-4.164-0.946c-0.808-0.183-1.611,0.323-1.795,1.131c-0.025,0.109-0.037,0.22-0.037,0.331v3.568c0,0.706,0.492,1.316,1.181,1.466l5.306,1.154c0.489,0.106,0.987,0.159,1.487,0.159h4.9c0.828,0,1.5-0.672,1.5-1.5v-21.704c0-0.276,0.224-0.5,0.5-0.5h3.268C60.337,309.343,61.008,308.672,61.008,307.843z M74.017,235.738c-2.57-6.341-5.287-9.609-7.183-15.297c-0.915-2.705-1.156-4.772-1.198-7.275c-0.014-0.819-0.681-1.475-1.5-1.475h-5.534c-0.828,0-1.5,0.672-1.5,1.5l0,0v0.196c0,10.461,7.661,17.867,8.146,21.122c0.041,0.273-0.148,0.528-0.421,0.568c-0.025,0.004-0.049,0.005-0.074,0.005h-9.454c-0.828,0-1.5,0.672-1.5,1.5v3.964c0,0.828,0.672,1.5,1.5,1.5H72.7c0.828,0,1.5-0.672,1.5-1.5v-3.871C74.2,236.355,74.138,236.036,74.017,235.738z M56.192,29.692c-0.828,0-1.5,0.672-1.5,1.5v3.651c0,0.828,0.672,1.5,1.5,1.5h4.16c0.276,0,0.5,0.224,0.5,0.5v15.853c0,0.276-0.223,0.5-0.5,0.5c-0.038,0-0.075-0.004-0.111-0.012l-4.163-0.946c-0.808-0.184-1.612,0.322-1.796,1.13c-0.025,0.109-0.037,0.221-0.037,0.333v3.567c0,0.706,0.492,1.316,1.182,1.466l5.306,1.154c0.489,0.106,0.987,0.159,1.487,0.159h4.9c0.828,0,1.5-0.672,1.5-1.5v0V36.843c0-0.276,0.224-0.5,0.5-0.5h3.268c0.828,0,1.5-0.672,1.5-1.5v-3.651c0-0.828-0.672-1.5-1.5-1.5H56.192z M341.048,130.379c0-8.571-4.152-10.133-10.848-10.133c-7.812,0-11.205,2.054-11.205,10c0,6.72,1.021,11.132,8.721,20.269c0.285,0.338,0.705,0.533,1.147,0.533h5.726c0.828,0,1.5-0.672,1.5-1.5c0-0.346-0.119-0.681-0.338-0.948c-1.522-1.866-3.89-4.796-5.903-8.096c-0.144-0.236-0.069-0.543,0.166-0.687c0.078-0.048,0.168-0.073,0.26-0.073c0.025,0,0.05,0.002,0.075,0.006c0.891,0.134,1.625,0.317,2.798,0.317C339.396,140.066,341.048,137.075,341.048,130.379 M196.977,211.245c-6.562,0-11.339,1.562-11.339,8.08c0,3.832,1,6.143,4.714,7.79c0.252,0.112,0.366,0.407,0.254,0.66c-0.049,0.111-0.137,0.2-0.246,0.251c-2.893,1.345-3.963,3.473-3.963,7.013c0,5.803,4.107,7.455,10.58,7.455s10.58-1.652,10.58-7.455c0-3.5-1.1-5.505-4.084-6.844c-0.252-0.113-0.365-0.409-0.251-0.661c0.049-0.108,0.134-0.196,0.242-0.247c3.968-1.884,4.808-4.157,4.808-7.961C208.271,212.808,203.54,211.245,196.977,211.245z M191.04,133.772h-1.958c-0.828,0-1.5,0.672-1.5,1.5c0,0.017,0,0.034,0.001,0.051l0.481,14.276c0.027,0.808,0.69,1.45,1.499,1.45h15.244c0.828,0,1.5-0.672,1.5-1.5l0,0v-3.428c0-0.828-0.672-1.5-1.5-1.5h-8.632c-0.266,0-0.485-0.208-0.499-0.474l-0.208-3.956c-0.015-0.276,0.197-0.511,0.473-0.526c0.008,0,0.016-0.001,0.024-0.001c7.602-0.031,11.1-1.59,11.1-8.571c0-9.151-5.268-10.848-12.767-10.848c-2.045,0-4.508,0.239-6.314,0.546c-0.764,0.13-1.304,0.821-1.244,1.594l0.264,3.437c0.063,0.826,0.785,1.444,1.611,1.381c0.037-0.003,0.073-0.007,0.11-0.013c1.531-0.232,3.543-0.338,4.815-0.338c3.661,0,5.089,0.625,5.089,3.437C198.629,133.325,197.468,133.772,191.04,133.772z M188.299,29.692h17.713h0c0.828,0,1.5,0.672,1.5,1.5v3.651v0c0,0.828-0.672,1.5-1.5,1.5H195.96c-0.276,0-0.5,0.224-0.5,0.5v0.08c0,1.295,1.428,2.545,4.821,5.313l2.901,2.366c3.482,2.812,4.152,4.419,4.152,8.303c0,6.384-3.482,7.589-9.91,7.589c-2.799,0-6.477-0.305-8.442-0.767c-0.708-0.166-1.194-0.816-1.155-1.542l0.201-3.677c0.044-0.795,0.701-1.418,1.498-1.418c0.088,0,0.176,0.008,0.262,0.023c1.687,0.3,4.047,0.595,5.225,0.595c2.544,0,3.75-0.178,3.75-2.187c0.044-1.652-1.116-2.812-4.062-5.223l-2.723-2.187c-5-4.063-5.178-6.072-5.178-10.312v-2.607C186.799,30.364,187.471,29.692,188.299,29.692z M189.24,309.343h3.268c0.828,0,1.5-0.672,1.5-1.5v-3.651c0-0.828-0.672-1.5-1.5-1.5h-16.196c-0.828,0-1.5,0.672-1.5,1.5v3.651c0,0.828,0.672,1.5,1.5,1.5h4.161c0.276,0,0.5,0.224,0.5,0.5v15.853c0,0.276-0.223,0.5-0.5,0.5c-0.037,0-0.075-0.004-0.111-0.012l-4.164-0.946c-0.808-0.184-1.612,0.322-1.795,1.13c-0.025,0.109-0.037,0.22-0.037,0.332v3.568c0,0.706,0.492,1.316,1.181,1.466l5.305,1.154c0.489,0.106,0.987,0.159,1.487,0.159h4.9c0.828,0,1.5-0.672,1.5-1.5v-21.704C188.74,309.567,188.964,309.343,189.24,309.343 M332.282,212.225c7.701,9.137,8.721,13.55,8.721,20.269c0,7.946-3.392,10-11.249,10c-6.652,0-10.803-1.563-10.803-10.134c0-6.696,1.607-9.687,7.901-9.687c1.173,0,1.906,0.183,2.797,0.317c0.118,0.018,0.238-0.007,0.339-0.069c0.235-0.146,0.307-0.454,0.161-0.688c-1.965-3.17-4.225-6.18-5.782-8.094c-0.218-0.267-0.336-0.602-0.337-0.946c0-0.828,0.671-1.5,1.5-1.5h5.605C331.577,211.692,331.997,211.887,332.282,212.225z M329.933,134.887c-2.724,0-3.259-0.625-3.259-4.375c0-3.705,0.848-4.107,3.259-4.107c2.544,0,3.258,0.402,3.258,4.107C333.191,134.307,332.388,134.887,329.933,134.887z M196.933,224.772c-2.321,0-3.527-1.83-3.527-4.375c0-2.634,0.982-3.08,3.571-3.08c2.589,0,3.616,0.491,3.616,3.08C200.593,222.941,199.299,224.772,196.933,224.772z M197.022,236.959c-2.5,0-3.259-0.625-3.259-3.169c0-2.098,0.804-3.928,3.169-3.928c2.321,0,3.169,1.83,3.169,3.928C200.102,236.244,199.388,236.959,197.022,236.959z M74.981,309.254c0.492-0.759,0.938-0.893,1.875-0.893c1.027,0,1.518,0.134,1.92,0.893c0.759,1.205,1.205,5.401,1.205,8.616c0,3.258-0.401,7.454-1.205,8.705c-0.446,0.758-0.893,0.848-1.92,0.848c-0.937,0-1.428-0.134-1.875-0.848c-0.714-1.206-1.205-5.447-1.205-8.705C73.776,314.655,74.267,310.414,74.981,309.254z M330.066,236.289c-2.589,0-3.169-0.312-3.169-4.062c0-3.794,0.714-4.33,3.169-4.33c2.679,0,3.259,0.58,3.259,4.33C333.325,235.976,332.477,236.289,330.066,236.289z"
-        style={{
-          fill: 'rgb(204, 204, 204)',
-          stroke: 'none',
-          fillRule: 'evenodd',
-          width: '100%',
-          height: '100%',
-        }}
-      ></path>
-    </g>
-  )
-}
-export function CalibrationMarkings(): JSX.Element {
-  return (
-    <g id="calibrationMarkings">
-      <path
-        d="M12.13,352c0.276,0,0.5-0.224,0.5-0.5c0-0.276-0.224-0.5-0.5-0.5s-0.5,0.224-0.5,0.5C11.63,351.776,11.854,352,12.13,352z M11.88,348.75v1.253c-0.001,0.074,0.022,0.134,0.067,0.181c0.047,0.045,0.108,0.067,0.183,0.066c0.075,0.001,0.136-0.021,0.183-0.066c0.045-0.047,0.068-0.107,0.067-0.181v-1.253h1.253c0.074,0.001,0.134-0.022,0.181-0.067c0.045-0.047,0.067-0.108,0.066-0.183c0.001-0.075-0.021-0.136-0.066-0.183c-0.047-0.045-0.107-0.068-0.181-0.067H12.38v-1.253c0.001-0.074-0.022-0.134-0.067-0.181c-0.047-0.045-0.108-0.067-0.183-0.066c-0.075-0.001-0.136,0.021-0.183,0.066c-0.045,0.047-0.068,0.107-0.067,0.181v1.253h-1.253c-0.074-0.001-0.134,0.022-0.181,0.067c-0.045,0.047-0.067,0.108-0.066,0.183c-0.001,0.075,0.021,0.136,0.066,0.183c0.047,0.045,0.107,0.068,0.181,0.067H11.88z M248.37,352c0.276,0,0.5-0.224,0.5-0.5c0-0.276-0.224-0.5-0.5-0.5c-0.276,0-0.5,0.224-0.5,0.5C247.87,351.776,248.094,352,248.37,352z M248.62,348.75h1.253c0.075,0.001,0.135-0.022,0.182-0.067c0.045-0.047,0.066-0.108,0.066-0.183c0.001-0.075-0.021-0.136-0.066-0.183c-0.047-0.045-0.107-0.068-0.182-0.067h-1.253v-1.253c0-0.074-0.022-0.134-0.067-0.181c-0.047-0.045-0.108-0.067-0.183-0.066c-0.075-0.001-0.136,0.021-0.183,0.066c-0.045,0.047-0.067,0.107-0.067,0.181v1.253h-1.253c-0.075-0.001-0.135,0.022-0.182,0.067c-0.045,0.047-0.066,0.108-0.066,0.183c-0.001,0.075,0.021,0.136,0.066,0.183c0.047,0.045,0.107,0.068,0.182,0.067h1.253v1.253c0,0.074,0.022,0.134,0.067,0.181c0.047,0.045,0.108,0.067,0.183,0.066c0.075,0.001,0.136-0.021,0.183-0.066c0.045-0.047,0.067-0.107,0.067-0.181V348.75z M380.62,256.498v1.253h-1.253c-0.074,0-0.134,0.022-0.181,0.067c-0.045,0.047-0.067,0.108-0.066,0.183c-0.001,0.075,0.021,0.136,0.066,0.183c0.047,0.045,0.107,0.067,0.181,0.067h1.253v1.252c-0.001,0.075,0.022,0.135,0.067,0.182c0.047,0.045,0.108,0.066,0.183,0.066c0.075,0.001,0.136-0.021,0.183-0.066c0.045-0.047,0.068-0.107,0.067-0.182v-1.252h1.253c0.074,0,0.134-0.022,0.181-0.067c0.045-0.047,0.067-0.108,0.066-0.183c0.001-0.075-0.021-0.136-0.066-0.183c-0.047-0.045-0.107-0.067-0.181-0.067h-1.253v-1.253c0.001-0.075-0.022-0.135-0.067-0.182c-0.047-0.045-0.108-0.066-0.183-0.066c-0.075-0.001-0.136,0.021-0.183,0.066C380.642,256.362,380.619,256.423,380.62,256.498z M12.13,260.5c-0.276,0-0.5,0.224-0.5,0.5c0,0.276,0.224,0.5,0.5,0.5s0.5-0.224,0.5-0.5C12.63,260.724,12.406,260.5,12.13,260.5z M380.87,261.5c0.276,0,0.5-0.224,0.5-0.5c0-0.276-0.224-0.5-0.5-0.5c-0.276,0-0.5,0.224-0.5,0.5C380.37,261.276,380.594,261.5,380.87,261.5z M11.88,258.25v1.252c-0.001,0.075,0.022,0.135,0.067,0.182c0.047,0.045,0.108,0.066,0.183,0.066c0.075,0.001,0.136-0.021,0.183-0.066c0.045-0.047,0.068-0.107,0.067-0.182v-1.252h1.253c0.074,0,0.134-0.022,0.181-0.067c0.045-0.047,0.067-0.108,0.066-0.183c0.001-0.075-0.021-0.136-0.066-0.183c-0.047-0.045-0.107-0.067-0.181-0.067H12.38v-1.253c0.001-0.075-0.022-0.135-0.067-0.182c-0.047-0.045-0.108-0.066-0.183-0.066c-0.075-0.001-0.136,0.021-0.183,0.066c-0.045,0.047-0.068,0.107-0.067,0.182v1.253h-1.253c-0.074,0-0.134,0.022-0.181,0.067c-0.045,0.047-0.067,0.108-0.066,0.183c-0.001,0.075,0.021,0.136,0.066,0.183c0.047,0.045,0.107,0.067,0.181,0.067H11.88z M381.12,7.497c0.001-0.074-0.022-0.134-0.067-0.181c-0.047-0.045-0.108-0.067-0.183-0.066c-0.075-0.001-0.136,0.021-0.183,0.066c-0.045,0.047-0.068,0.107-0.067,0.181V8.75h-1.253c-0.074-0.001-0.134,0.022-0.181,0.067c-0.045,0.047-0.067,0.108-0.066,0.183c-0.001,0.075,0.021,0.136,0.066,0.183c0.047,0.045,0.107,0.068,0.181,0.067h1.253v1.253c-0.001,0.074,0.022,0.134,0.067,0.181c0.047,0.045,0.108,0.067,0.183,0.066c0.075,0.001,0.136-0.021,0.183-0.066c0.045-0.047,0.068-0.107,0.067-0.181V9.25h1.253c0.074,0.001,0.134-0.022,0.181-0.067c0.045-0.047,0.067-0.108,0.066-0.183c0.001-0.075-0.021-0.136-0.066-0.183c-0.047-0.045-0.107-0.068-0.181-0.067h-1.253V7.497 M11.88,8.75h-1.253c-0.074-0.001-0.134,0.022-0.181,0.067C10.401,8.864,10.379,8.925,10.38,9c-0.001,0.075,0.021,0.136,0.066,0.183c0.047,0.045,0.107,0.068,0.181,0.067h1.253v1.253c-0.001,0.074,0.022,0.134,0.067,0.181c0.047,0.045,0.108,0.067,0.183,0.066c0.075,0.001,0.136-0.021,0.183-0.066c0.045-0.047,0.068-0.107,0.067-0.181V9.25h1.253c0.074,0.001,0.134-0.022,0.181-0.067C13.859,9.136,13.881,9.075,13.88,9c0.001-0.075-0.021-0.136-0.066-0.183c-0.047-0.045-0.107-0.068-0.181-0.067H12.38V7.497c0.001-0.074-0.022-0.134-0.067-0.181c-0.047-0.045-0.108-0.067-0.183-0.066c-0.075-0.001-0.136,0.021-0.183,0.066c-0.045,0.047-0.068,0.107-0.067,0.181V8.75z M12.13,5.5c-0.276,0-0.5,0.224-0.5,0.5s0.224,0.5,0.5,0.5s0.5-0.224,0.5-0.5S12.406,5.5,12.13,5.5z M380.87,6.5c0.276,0,0.5-0.224,0.5-0.5s-0.224-0.5-0.5-0.5c-0.276,0-0.5,0.224-0.5,0.5S380.594,6.5,380.87,6.5z"
-        style={{
-          fill: 'rgb(255, 255, 255)',
-          stroke: 'rgb(204, 204, 204)',
-          width: '100%',
-          height: '100%',
-        }}
-      ></path>
-    </g>
-  )
-}
-export function RemovalHandle(): JSX.Element {
-  return (
-    <g id="removalHandle">
-      <path
-        d="M159-48.915c-7.732,0-14,6.268-14,14c0,7.732,6.268,14,14,14h75c7.732,0,14-6.268,14-14c0-7.732-6.268-14-14-14H159z M234-47.415c6.904,0,12.5,5.596,12.5,12.5s-5.596,12.5-12.5,12.5h-75c-6.904,0-12.5-5.596-12.5-12.5s5.596-12.5,12.5-12.5H234z"
-        style={{
-          fill: 'rgb(255, 255, 255)',
-          stroke: 'rgb(204, 204, 204)',
-          width: '100%',
-          height: '100%',
-        }}
-      ></path>
-    </g>
-  )
-}
-export function ScrewHoles(): JSX.Element {
-  return (
-    <g id="screwHoles">
-      <path
-        d="M-31.5,162.21c-3.38,0-6.12,2.74-6.12,6.12c0,3.38,2.74,6.12,6.12,6.12s6.12-2.74,6.12-6.12C-25.38,164.95-28.12,162.21-31.5,162.21z M424.5,174.45c3.38,0,6.12-2.74,6.12-6.12c0-3.38-2.74-6.12-6.12-6.12c-3.38,0-6.12,2.74-6.12,6.12C418.38,171.71,421.12,174.45,424.5,174.45z M424.5,166.23c-1.16,0-2.1,0.94-2.1,2.1c0,1.16,0.94,2.1,2.1,2.1c1.16,0,2.1-0.94,2.1-2.1C426.6,167.17,425.66,166.23,424.5,166.23z M-31.5,170.43c1.16,0,2.1-0.94,2.1-2.1c0-1.16-0.94-2.1-2.1-2.1c-1.16,0-2.1,0.94-2.1,2.1C-33.6,169.49-32.66,170.43-31.5,170.43z"
-        style={{
-          fill: 'rgb(255, 255, 255)',
-          stroke: 'rgb(204, 204, 204)',
-          width: '100%',
-          height: '100%',
-        }}
-      ></path>
-    </g>
-  )
-}

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

@@ -1,59 +0,0 @@
-import { withStyleProps } from '../../hocs/withStyleProps'
-
-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
-  x?: string | number
-  y?: string | number
-  children?: ReactNode
-  outerProps?: any
-  innerDivProps?: StyleProps
-  innerDivEvents?: HTMLAttributes<HTMLDivElement>
-  transformWithSVG?: boolean
-  extraTransform?: string
-  dataTestId?: string
-}
-
-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}`
-
-  return (
-    <foreignObject
-      data-testid={dataTestId}
-      x={x}
-      y={y}
-      height={height}
-      width={width}
-      transform={transformWithSVG ? svgTransform : extraTransform}
-      {...outerProps}
-    >
-      <StyledDiv
-        {...innerDivEvents}
-        style={{
-          ...innerDivProps,
-          ...(transformWithSVG ? { transform: svgTransform } : {}),
-        }}
-      >
-        {children}
-      </StyledDiv>
-    </foreignObject>
-  )
-}

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

@@ -1,47 +0,0 @@
-import { withStyleProps } from '../../hocs/withStyleProps'
-import { ForeignObject } from '../../primitives'
-import styles from './deck.module.css'
-
-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
-  height: string | number
-  x: string | number
-  y: string | number
-  children?: ReactNode
-  foreignObjectProps?: StyleProps
-  foreignObjectEvents?: HTMLAttributes<HTMLDivElement>
-  flexProps?: StyleProps
-  flexEvents?: HTMLAttributes<HTMLDivElement>
-}
-export const RobotCoordsForeignObject = ({
-  children,
-  x,
-  y,
-  height,
-  width,
-  foreignObjectEvents,
-  foreignObjectProps = {},
-  flexProps,
-  flexEvents = {},
-}: RobotCoordsForeignObjectProps): JSX.Element => {
-  return (
-    <ForeignObject x={x} y={y} height={height} width={width}>
-      <StyledDiv
-        className={styles.robot_coords_foreign_object_container}
-        {...foreignObjectEvents}
-        style={foreignObjectProps}
-      >
-        <StyledDiv {...flexEvents} style={flexProps}>
-          {children}
-        </StyledDiv>
-      </StyledDiv>
-    </ForeignObject>
-  )
-}

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

@@ -1,34 +0,0 @@
-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 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 (
-    <text
-      {...additionalProps}
-      x={x}
-      y={-1 * y}
-      transform="scale(1, -1)"
-      style={{ userSelect: !canHighlight ? 'none' : undefined }}
-    >
-      {children}
-    </text>
-  )
-}