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

package/src/hardware-sim/ProtocolDeck/index.tsx

@@ -0,0 +1,174 @@
+import type * as React from 'react'
+
+import {
+  FLEX_ROBOT_TYPE,
+  getLabwareDisplayName,
+  getSimplestDeckConfigForProtocol,
+  getTopLabwareInfo,
+} from '@opentrons/shared-data'
+
+import { BaseDeck } from '../BaseDeck/BaseDeck'
+import { LabwareInfo } from './LabwareInfo'
+import { getStandardDeckViewLayerBlockList } from './utils/getStandardDeckViewLayerBlockList'
+import { getLabwareInfoByLiquidId } from './utils/getLabwareInfoByLiquidId'
+import { getTopMostLabwareInSlots } from './utils/getLabwareInSlots'
+import { getModulesInSlots } from './utils/getModulesInSlots'
+import { getWellFillFromLabwareId } from './utils/getWellFillFromLabwareId'
+
+import type {
+  CompletedProtocolAnalysis,
+  LabwareDefinition2,
+  ProtocolAnalysisOutput,
+  RunTimeCommand,
+  LoadLabwareRunTimeCommand,
+} from '@opentrons/shared-data'
+
+export * from './utils/getStandardDeckViewLayerBlockList'
+
+interface ProtocolDeckProps {
+  protocolAnalysis: CompletedProtocolAnalysis | ProtocolAnalysisOutput | null
+  /** defaults to false, when set labware nicknames will appear on top level labware. If no nickname specified in protocol, falls back to labware definition display name */
+  showLabwareInfo?: boolean
+  /** optional labware click handler, highlights labware */
+  handleLabwareClick?: (
+    labwareDef: LabwareDefinition2,
+    labwareId: string
+  ) => void
+  /** extra props to pass through to BaseDeck component */
+  baseDeckProps?: Partial<React.ComponentProps<typeof BaseDeck>>
+}
+
+export function ProtocolDeck(props: ProtocolDeckProps): JSX.Element | null {
+  const {
+    protocolAnalysis,
+    baseDeckProps,
+    handleLabwareClick,
+    showLabwareInfo = false,
+  } = props
+
+  if (protocolAnalysis == null || (protocolAnalysis?.errors ?? []).length > 0)
+    return null
+  const commands: RunTimeCommand[] = protocolAnalysis.commands
+  const loadLabwareCommands = commands?.filter(
+    (command): command is LoadLabwareRunTimeCommand =>
+      command.commandType === 'loadLabware'
+  )
+
+  const robotType = protocolAnalysis.robotType ?? FLEX_ROBOT_TYPE
+  const deckConfig = getSimplestDeckConfigForProtocol(protocolAnalysis)
+  const labwareByLiquidId = getLabwareInfoByLiquidId(protocolAnalysis.commands)
+
+  const modulesInSlots = getModulesInSlots(protocolAnalysis)
+  const modulesOnDeck = modulesInSlots.map(
+    ({
+      moduleModel,
+      moduleLocation,
+      nestedLabwareId,
+      nestedLabwareDef,
+      nestedLabwareNickName,
+    }) => {
+      const { topLabwareId, topLabwareDefinition } = getTopLabwareInfo(
+        nestedLabwareId ?? '',
+        loadLabwareCommands
+      )
+
+      return {
+        moduleModel,
+        moduleLocation,
+        nestedLabwareDef,
+        nestedLabwareWellFill: getWellFillFromLabwareId(
+          nestedLabwareId ?? '',
+          protocolAnalysis.liquids,
+          labwareByLiquidId
+        ),
+        moduleChildren:
+          showLabwareInfo &&
+          nestedLabwareDef != null &&
+          !(nestedLabwareDef.allowedRoles ?? []).includes('adapter') ? (
+            <LabwareInfo def={nestedLabwareDef}>
+              {nestedLabwareNickName ?? getLabwareDisplayName(nestedLabwareDef)}
+            </LabwareInfo>
+          ) : null,
+        highlightLabware: handleLabwareClick != null,
+        highlightShadowLabware:
+          handleLabwareClick != null &&
+          topLabwareDefinition != null &&
+          topLabwareId != null,
+        onLabwareClick:
+          handleLabwareClick != null &&
+          topLabwareDefinition != null &&
+          topLabwareId != null
+            ? () => {
+                handleLabwareClick(topLabwareDefinition, topLabwareId)
+              }
+            : undefined,
+        stacked:
+          handleLabwareClick != null &&
+          topLabwareDefinition != null &&
+          topLabwareId != null,
+      }
+    }
+  )
+
+  // this function gets the top labware assuming a stack of max 2 labware
+  const topMostLabwareInSlots = getTopMostLabwareInSlots(protocolAnalysis)
+  const labwareOnDeck = topMostLabwareInSlots.map(
+    ({ labwareId, labwareDef, labwareNickName, location }) => {
+      // this gets the very top of the stack in case there is a stack
+      // of many like items, such as TC lids
+      const { topLabwareId, topLabwareDefinition } = getTopLabwareInfo(
+        labwareId,
+        loadLabwareCommands
+      )
+      const isLabwareInStack = protocolAnalysis?.commands.some(
+        command =>
+          command.commandType === 'loadLabware' &&
+          command.result?.labwareId === labwareId &&
+          typeof command.params.location === 'object' &&
+          ('moduleId' in command.params.location ||
+            'labwareId' in command.params.location)
+      )
+
+      return {
+        definition: labwareDef,
+        labwareLocation: location,
+        wellFill: getWellFillFromLabwareId(
+          labwareId,
+          protocolAnalysis.liquids,
+          labwareByLiquidId
+        ),
+        labwareChildren: showLabwareInfo ? (
+          <LabwareInfo def={labwareDef}>
+            {labwareNickName ?? getLabwareDisplayName(labwareDef)}
+          </LabwareInfo>
+        ) : null,
+        highlight: handleLabwareClick != null,
+        highlightShadow: handleLabwareClick != null && isLabwareInStack,
+        onLabwareClick:
+          handleLabwareClick != null && topLabwareDefinition != null
+            ? () => {
+                handleLabwareClick(topLabwareDefinition, topLabwareId)
+              }
+            : undefined,
+        stacked: handleLabwareClick != null && isLabwareInStack,
+      }
+    }
+  )
+
+  return (
+    <BaseDeck
+      deckConfig={deckConfig}
+      deckLayerBlocklist={getStandardDeckViewLayerBlockList(robotType)}
+      robotType={robotType}
+      labwareOnDeck={labwareOnDeck}
+      modulesOnDeck={modulesOnDeck}
+      {...{
+        svgProps: {
+          'aria-label': 'protocol deck map',
+          ...(baseDeckProps?.svgProps ?? {}),
+        },
+        ...baseDeckProps,
+      }}
+    />
+  )
+}

package/src/hardware-sim/ProtocolDeck/types.ts

@@ -0,0 +1,6 @@
+export interface LabwareByLiquidId {
+  [liquidId: string]: Array<{
+    labwareId: string
+    volumeByWell: { [well: string]: number }
+  }>
+}

package/src/hardware-sim/ProtocolDeck/utils/getInitiallyLoadedLabwareByAdapter.ts

@@ -0,0 +1,33 @@
+import reduce from 'lodash/reduce'
+import type {
+  LoadLabwareRunTimeCommand,
+  RunTimeCommand,
+} from '@opentrons/shared-data'
+
+export interface LoadedLabwareByAdapter {
+  [labwareId: string]: LoadLabwareRunTimeCommand
+}
+export function getInitialLoadedLabwareByAdapter(
+  commands: RunTimeCommand[]
+): LoadedLabwareByAdapter {
+  const loadLabwareCommandsReversed = commands
+    .filter(
+      (command): command is LoadLabwareRunTimeCommand =>
+        command.commandType === 'loadLabware'
+    )
+    .reverse()
+  return reduce<LoadLabwareRunTimeCommand, LoadedLabwareByAdapter>(
+    loadLabwareCommandsReversed,
+    (acc, command) => {
+      if (
+        typeof command.params.location === 'object' &&
+        'labwareId' in command.params.location
+      ) {
+        return { ...acc, [command.params.location.labwareId]: command }
+      } else {
+        return acc
+      }
+    },
+    {}
+  )
+}

package/src/hardware-sim/ProtocolDeck/utils/getLabwareInSlots.ts

@@ -0,0 +1,155 @@
+import { getInitialLoadedLabwareByAdapter } from './getInitiallyLoadedLabwareByAdapter'
+import type {
+  CompletedProtocolAnalysis,
+  LoadLabwareRunTimeCommand,
+  MoveLabwareRunTimeCommand,
+  ProtocolAnalysisOutput,
+  LabwareDefinition2,
+} from '@opentrons/shared-data'
+
+interface LabwareInSlot {
+  labwareId: string
+  labwareDef: LabwareDefinition2
+  labwareNickName: string | null
+  location: { slotName: string }
+}
+
+export const getInitialAndMovedLabwareInSlots = (
+  protocolAnalysis: CompletedProtocolAnalysis | ProtocolAnalysisOutput
+): LabwareInSlot[] => {
+  const { commands } = protocolAnalysis
+  const initialLoadedLabwareByAdapter = getInitialLoadedLabwareByAdapter(
+    commands
+  )
+  const topMostLabwareInSlots = getTopMostLabwareInSlots(protocolAnalysis)
+
+  return commands
+    .filter(
+      (command): command is MoveLabwareRunTimeCommand =>
+        command.commandType === 'moveLabware'
+    )
+    .reduce<LabwareInSlot[]>((acc, command) => {
+      const labwareId = command.params.labwareId
+      const location = command.params.newLocation
+
+      const originalLabware = topMostLabwareInSlots.find(
+        labware => labware.labwareId === labwareId
+      )
+      const labwareDef = originalLabware?.labwareDef
+
+      if (
+        location === 'offDeck' ||
+        'moduleId' in location ||
+        'labwareId' in location
+      )
+        return acc
+      if (labwareId == null) {
+        console.warn('expected to find labware id but could not')
+        return acc
+      }
+      if (labwareDef == null) {
+        console.warn(
+          `expected to find labware def for labware id ${String(
+            labwareId
+          )} but could not`
+        )
+        return acc
+      }
+
+      const slotName =
+        'addressableAreaName' in location
+          ? location.addressableAreaName
+          : location.slotName
+
+      // if list of labware already includes slotName, return acc
+      if (acc.find(labware => labware.location.slotName === slotName) != null) {
+        return acc
+      }
+
+      const labwareInAdapter = initialLoadedLabwareByAdapter[labwareId]
+
+      //  NOTE: only grabbing the labware on top most layer so
+      //  either the adapter or the labware but not both
+      const topLabwareDefinition =
+        labwareInAdapter?.result?.definition ?? labwareDef
+      const topLabwareId = labwareInAdapter?.result?.labwareId ?? labwareId
+      const topLabwareNickName =
+        labwareInAdapter?.params?.displayName ??
+        originalLabware?.labwareNickName ??
+        null
+
+      return [
+        ...acc,
+        {
+          labwareId: topLabwareId,
+          labwareDef: topLabwareDefinition,
+          labwareNickName: topLabwareNickName,
+          location: { slotName },
+        },
+      ]
+    }, topMostLabwareInSlots)
+}
+
+export const getTopMostLabwareInSlots = (
+  protocolAnalysis: CompletedProtocolAnalysis | ProtocolAnalysisOutput
+): LabwareInSlot[] => {
+  const { commands } = protocolAnalysis
+  const initialLoadedLabwareByAdapter = getInitialLoadedLabwareByAdapter(
+    commands
+  )
+  return commands
+    .filter(
+      (command): command is LoadLabwareRunTimeCommand =>
+        command.commandType === 'loadLabware'
+    )
+    .reduce<LabwareInSlot[]>((acc, command) => {
+      const labwareId = command.result?.labwareId
+      const location = command.params.location
+      const labwareDef = command.result?.definition
+      if (
+        location === 'offDeck' ||
+        'moduleId' in location ||
+        'labwareId' in location
+      )
+        return acc
+      if (labwareId == null) {
+        console.warn('expected to find labware id but could not')
+        return acc
+      }
+      if (labwareDef == null) {
+        console.warn(
+          `expected to find labware def for labware id ${String(
+            labwareId
+          )} but could not`
+        )
+        return acc
+      }
+
+      const slotName =
+        'addressableAreaName' in location
+          ? location.addressableAreaName
+          : location.slotName
+
+      const labwareInAdapter = initialLoadedLabwareByAdapter[labwareId]
+
+      //  NOTE: only grabbing the labware on top most layer so
+      //  either the adapter or the labware but not both
+      const topLabwareDefinition =
+        labwareInAdapter?.result?.definition ?? labwareDef
+      const topLabwareId = labwareInAdapter?.result?.labwareId ?? labwareId
+      const topLabwareNickName =
+        labwareInAdapter?.params?.displayName ??
+        command.params.displayName ??
+        null
+
+      return [
+        ...acc,
+        {
+          labwareId: topLabwareId,
+          labwareDef: topLabwareDefinition,
+          labwareNickName: topLabwareNickName,
+          location: { slotName },
+        },
+      ]
+    }, [])
+}

package/src/hardware-sim/ProtocolDeck/utils/getLabwareInfoByLiquidId.ts

@@ -0,0 +1,42 @@
+import reduce from 'lodash/reduce'
+import type {
+  LoadLiquidRunTimeCommand,
+  RunTimeCommand,
+} from '@opentrons/shared-data'
+import type { LabwareByLiquidId } from '../types'
+
+export function getLabwareInfoByLiquidId(
+  commands: RunTimeCommand[]
+): LabwareByLiquidId {
+  const loadLiquidCommands =
+    commands.length !== 0
+      ? commands.filter(
+          (command): command is LoadLiquidRunTimeCommand =>
+            command.commandType === 'loadLiquid'
+        )
+      : []
+
+  return reduce<LoadLiquidRunTimeCommand, LabwareByLiquidId>(
+    loadLiquidCommands,
+    (acc, command) => {
+      if (!(command.params.liquidId in acc)) {
+        acc[command.params.liquidId] = []
+      }
+      const labwareId = command.params.labwareId
+      const volumeByWell = command.params.volumeByWell
+      const labwareIndex = acc[command.params.liquidId].findIndex(
+        i => i.labwareId === labwareId
+      )
+      if (labwareIndex >= 0) {
+        acc[command.params.liquidId][labwareIndex].volumeByWell = {
+          ...acc[command.params.liquidId][labwareIndex].volumeByWell,
+          ...volumeByWell,
+        }
+      } else {
+        acc[command.params.liquidId].push({ labwareId, volumeByWell })
+      }
+      return acc
+    },
+    {}
+  )
+}

package/src/hardware-sim/ProtocolDeck/utils/getModulesInSlots.ts

@@ -0,0 +1,129 @@
+import {
+  SPAN7_8_10_11_SLOT,
+  getModuleDef2,
+  getLoadedLabwareDefinitionsByUri,
+} from '@opentrons/shared-data'
+import type {
+  CompletedProtocolAnalysis,
+  LoadLabwareRunTimeCommand,
+  ProtocolAnalysisOutput,
+  LoadModuleRunTimeCommand,
+  RunTimeCommand,
+  ModuleLocation,
+  ModuleModel,
+  LabwareDefinition2,
+} from '@opentrons/shared-data'
+import { getInitialLoadedLabwareByAdapter } from './getInitiallyLoadedLabwareByAdapter'
+
+interface ModuleInSlot {
+  moduleModel: ModuleModel
+  moduleLocation: ModuleLocation
+  nestedLabwareId: string | null
+  nestedLabwareDef: LabwareDefinition2 | null
+  nestedLabwareNickName: string | null
+}
+export const getModulesInSlots = (
+  protocolAnalysis: ProtocolAnalysisOutput | CompletedProtocolAnalysis
+): ModuleInSlot[] => {
+  if (protocolAnalysis != null && 'modules' in protocolAnalysis) {
+    const { commands, modules, labware } = protocolAnalysis
+    const initialLoadedLabwareByAdapter = getInitialLoadedLabwareByAdapter(
+      commands
+    )
+    return modules.reduce<ModuleInSlot[]>((acc, module) => {
+      const moduleDef = getModuleDef2(module.model)
+      const nestedLabwareId =
+        commands
+          .filter(
+            (command): command is LoadLabwareRunTimeCommand =>
+              command.commandType === 'loadLabware'
+          )
+          .find(
+            (command: LoadLabwareRunTimeCommand) =>
+              typeof command.params.location === 'object' &&
+              'moduleId' in command.params.location &&
+              command.params.location.moduleId === module.id
+          )?.result?.labwareId ?? null
+      const nestedLabware = labware.find(
+        item => nestedLabwareId != null && item.id === nestedLabwareId
+      )
+      const labwareDefinitionsByUri = getLoadedLabwareDefinitionsByUri(commands)
+      const nestedLabwareDef =
+        nestedLabware != null
+          ? labwareDefinitionsByUri[nestedLabware.definitionUri]
+          : null
+      const moduleInitialLoadInfo = getModuleInitialLoadInfo(
+        module.id,
+        commands
+      )
+      let slotName = moduleInitialLoadInfo.location.slotName
+      // Note: this is because PD for OT2 represents the slot the TC sits in as a made up slot. We want it to be rendered in slot 7
+      if (slotName === SPAN7_8_10_11_SLOT) {
+        slotName = '7'
+      }
+
+      const labwareInAdapterInMod =
+        nestedLabwareId != null
+          ? initialLoadedLabwareByAdapter[nestedLabwareId]
+          : null
+      //  NOTE: only rendering the labware on top most layer so
+      //  either the adapter or the labware are rendered but not both
+      const topLabwareDefinition =
+        labwareInAdapterInMod?.result?.definition ?? nestedLabwareDef
+      const topLabwareId =
+        labwareInAdapterInMod?.result?.labwareId ?? nestedLabwareId
+      const topLabwareDisplayName =
+        labwareInAdapterInMod != null
+          ? labwareInAdapterInMod.params.displayName?.toString() ?? null
+          : nestedLabware?.displayName?.toString() ?? null
+      return [
+        ...acc,
+        {
+          moduleModel: moduleDef.model,
+          moduleLocation: { slotName },
+          nestedLabwareId: topLabwareId,
+          nestedLabwareDef: topLabwareDefinition,
+          nestedLabwareNickName: topLabwareDisplayName,
+        },
+      ]
+    }, [])
+  }
+
+  return []
+}
+
+function getModuleInitialLoadInfo(
+  moduleId: string,
+  commands: RunTimeCommand[]
+): {
+  location: ModuleLocation
+  protocolLoadOrder: number
+} {
+  const moduleLoadIndex = commands.findIndex(
+    (command: RunTimeCommand): command is LoadModuleRunTimeCommand =>
+      command.commandType === 'loadModule' &&
+      command.result?.moduleId === moduleId
+  )
+
+  if (moduleLoadIndex === -1) {
+    throw new Error(
+      'expected to be able to find module location, but could not'
+    )
+  }
+
+  const protocolLoadOrder = commands
+    .slice(0, moduleLoadIndex)
+    .reduce(
+      (moduleLoadCount, command) =>
+        command.commandType === 'loadModule'
+          ? moduleLoadCount + 1
+          : moduleLoadCount,
+      0
+    )
+
+  return {
+    location: (commands[moduleLoadIndex] as LoadModuleRunTimeCommand).params
+      .location,
+    protocolLoadOrder,
+  }
+}

package/src/hardware-sim/ProtocolDeck/utils/getStandardDeckViewLayerBlockList.ts

@@ -0,0 +1,29 @@
+import type { RobotType } from '@opentrons/shared-data'
+
+const OT2_STANDARD_DECK_VIEW_LAYER_BLOCK_LIST: string[] = [
+  'calibrationMarkings',
+  'fixedBase',
+  'doorStops',
+  'metalFrame',
+  'removalHandle',
+  'removableDeckOutline',
+  'screwHoles',
+]
+
+const OT3_STANDARD_DECK_VIEW_LAYER_BLOCK_LIST: string[] = [
+  'DECK_BASE',
+  'BARCODE_COVERS',
+]
+
+export const getStandardDeckViewLayerBlockList = (
+  robotType: RobotType
+): string[] => {
+  switch (robotType) {
+    case 'OT-2 Standard':
+      return OT2_STANDARD_DECK_VIEW_LAYER_BLOCK_LIST
+    case 'OT-3 Standard':
+      return OT3_STANDARD_DECK_VIEW_LAYER_BLOCK_LIST
+    default:
+      return []
+  }
+}

package/src/hardware-sim/ProtocolDeck/utils/getWellFillFromLabwareId.ts

@@ -0,0 +1,30 @@
+import type { Liquid } from '@opentrons/shared-data'
+import type { WellFill } from '../../Labware'
+import type { LabwareByLiquidId } from '../types'
+
+export function getWellFillFromLabwareId(
+  labwareId: string,
+  liquidsInLoadOrder: Liquid[],
+  labwareByLiquidId: LabwareByLiquidId
+): WellFill {
+  let labwareWellFill: WellFill = {}
+  const liquidIds = Object.keys(labwareByLiquidId)
+  const labwareInfo = Object.values(labwareByLiquidId)
+
+  labwareInfo.forEach((labwareArray, index) => {
+    labwareArray.forEach(labware => {
+      if (labware.labwareId === labwareId) {
+        const liquidId = liquidIds[index]
+        const liquid = liquidsInLoadOrder.find(liquid => liquid.id === liquidId)
+        const wellFill: {
+          [well: string]: string
+        } = {}
+        Object.keys(labware.volumeByWell).forEach(key => {
+          wellFill[key] = liquid?.displayColor ?? ''
+        })
+        labwareWellFill = { ...labwareWellFill, ...wellFill }
+      }
+    })
+  })
+  return labwareWellFill
+}

package/src/hardware-sim/ProtocolDeck/utils/index.ts

@@ -0,0 +1,3 @@
+export * from './getLabwareInSlots'
+export * from './getStandardDeckViewLayerBlockList'
+export * from './getLabwareInfoByLiquidId'

package/src/hardware-sim/RobotCoordinateSpace/RobotCoordinateSpace.tsx

@@ -0,0 +1,28 @@
+import styled from 'styled-components'
+import { animated } from '@react-spring/web'
+import type * as React from 'react'
+import { Svg } from '../../primitives'
+
+interface RobotCoordinateSpaceProps extends React.ComponentProps<typeof Svg> {
+  animated?: boolean
+}
+export function RobotCoordinateSpace(
+  props: RobotCoordinateSpaceProps
+): JSX.Element {
+  const { animated = false, children, ...restProps } = props
+  const allPassThroughProps = {
+    transform: 'scale(1, -1)',
+    ...restProps,
+  }
+  return animated ? (
+    <AnimatedSvg {...allPassThroughProps}>{children}</AnimatedSvg>
+  ) : (
+    <Svg {...allPassThroughProps}>{children}</Svg>
+  )
+}
+
+/**
+ * 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 */
+// @ts-expect-error Type instantiation is excessively deep and possibly infinite
+const AnimatedSvg = styled(animated.svg)<typeof animated.svg>``

package/src/hardware-sim/RobotCoordinateSpace/RobotCoordinateSpaceWithRef.tsx

@@ -0,0 +1,52 @@
+import { useRef } from 'react'
+import { Svg } from '../../primitives'
+
+import type { ReactNode } from 'react'
+import type { DeckDefinition, DeckSlot } from '@opentrons/shared-data'
+
+export interface RobotCoordinateSpaceWithRefRenderProps {
+  deckSlotsById: { [slotId: string]: DeckSlot }
+}
+
+interface RobotCoordinateSpaceWithRefProps
+  extends React.ComponentProps<typeof Svg> {
+  viewBox?: string | null
+  deckDef?: DeckDefinition
+  zoomed?: boolean
+  children?: (props: RobotCoordinateSpaceWithRefRenderProps) => ReactNode
+}
+
+export function RobotCoordinateSpaceWithRef(
+  props: RobotCoordinateSpaceWithRefProps
+): JSX.Element | null {
+  const { children, deckDef, viewBox, zoomed = false, ...restProps } = props
+  const wrapperRef = useRef<SVGSVGElement>(null)
+
+  if (deckDef == null && viewBox == null) 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}`
+  }
+
+  return (
+    <Svg
+      viewBox={zoomed ? viewBox : wholeDeckViewBox}
+      ref={wrapperRef}
+      transform="scale(1, -1)"
+      width="100%"
+      height="100%"
+      {...restProps}
+    >
+      {children?.({ deckSlotsById })}
+    </Svg>
+  )
+}

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

@@ -0,0 +1,2 @@
+export * from './RobotCoordinateSpaceWithRef'
+export * from './RobotCoordinateSpace'