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

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

@@ -1,120 +0,0 @@
-import { useRef } from 'react'
-
-import { OT2_ROBOT_TYPE } from '@opentrons/shared-data'
-
-import { DeckFromLayers } from './DeckFromLayers'
-
-import type { CSSProperties, ReactNode } from 'react'
-import type { AddressableArea, DeckDefinition } from '@opentrons/shared-data'
-
-export interface RobotWorkSpaceRenderProps {
-  // todo(mm, 2025-06-05): Is this API still worthwhile? The parent of RobotWorkSpace
-  // already has access to the full DeckDefinition. Maybe it should iterate over
-  // the DeckDefinition's AddressableAreas itself?
-  addressableAreasById: { [addressableAreaId: string]: AddressableArea }
-}
-
-type BaseProps = {
-  children?: (props: RobotWorkSpaceRenderProps) => ReactNode
-  deckLayerBlocklist?: string[]
-  /** optional boolean to show the OT-2 deck from deck defintion layers */
-  showDeckLayers?: boolean
-  id?: string
-} & (
-  | // Require at least one of deckDef or viewBox,
-  {
-      deckDef: DeckDefinition
-    }
-  | {
-      /**
-       * The x/y area to show, in standard SVG `x y xDimension yDimension` syntax.
-       *
-       * Specify coordinates in the Opentrons orientation, not the standard SVG orientation.
-       * So (x, y) is the area's front-left, xDimension extends the viewed area to the
-       * right, and yDimension extends the viewed area to the back.
-       */
-      viewBox: string
-    }
-)
-
-export type RobotWorkSpaceProps = BaseProps & CSSProperties
-
-/**
- * A wrapper for rendering the robot deck, labware, etc. from a top-down perspective.
- *
- * Child SVG components can render themselves in the Opentrons coordinate orientation
- * (+x to the right of the robot, +y to the back of the robot) and this component will
- * SVG-transform them so they're displayed the correct way. This is needed because
- * SVG inverts y compared to Opentrons coordinates.
- */
-export function RobotWorkSpace(props: RobotWorkSpaceProps): JSX.Element {
-  const {
-    children,
-    deckLayerBlocklist = [],
-    showDeckLayers = false,
-    id,
-    ...styleProps
-  } = props
-  const activeViewBox = getViewBoxFromProps(props)
-  const addressableAreasById = getAddressableAreasByIdFromProps(props)
-  const wrapperRef = useRef<SVGSVGElement>(null)
-
-  return (
-    <svg
-      viewBox={activeViewBox}
-      ref={wrapperRef}
-      id={id}
-      style={{ ...styleProps }}
-    >
-      <g
-        transform={
-          activeViewBox
-            ? `scale(1, -1) translate(0, ${
-                -1 *
-                (Number(activeViewBox?.split(' ')[3]) +
-                  2 * Number(activeViewBox?.split(' ')[1]))
-              })`
-            : undefined
-        }
-      >
-        {showDeckLayers ? (
-          <DeckFromLayers
-            layerBlocklist={deckLayerBlocklist}
-            robotType={OT2_ROBOT_TYPE}
-          />
-        ) : null}
-        {children?.({ addressableAreasById })}
-      </g>
-    </svg>
-  )
-}
-
-function getAddressableAreasByIdFromProps(
-  props: RobotWorkSpaceProps
-): RobotWorkSpaceRenderProps['addressableAreasById'] {
-  if ('deckDef' in props) {
-    return Object.fromEntries(
-      props.deckDef.locations.addressableAreas.map(addressableArea => [
-        addressableArea.id,
-        addressableArea,
-      ])
-    )
-  } else {
-    return {}
-  }
-}
-
-function getViewBoxFromProps(props: RobotWorkSpaceProps): string {
-  if ('viewBox' in props) {
-    // An explicitly provided viewBox takes precedence.
-    return props.viewBox
-  } else {
-    return getWholeDeckViewBox(props.deckDef)
-  }
-}
-
-function getWholeDeckViewBox(deckDef: DeckDefinition): string {
-  const [viewBoxOriginX, viewBoxOriginY] = deckDef.cornerOffsetFromOrigin
-  const [deckXDimension, deckYDimension] = deckDef.dimensions
-  return `${viewBoxOriginX} ${viewBoxOriginY} ${deckXDimension} ${deckYDimension}`
-}

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

@@ -1,113 +0,0 @@
-import clsx from 'clsx'
-
-import { FLEX_ROBOT_TYPE } from '@opentrons/shared-data'
-
-import { DeckInfoLabel } from '../../molecules'
-import styles from './deck.module.css'
-import { RobotCoordsForeignObject } from './RobotCoordsForeignObject'
-
-import type { RobotType } from '@opentrons/shared-data'
-
-interface SlotLabelsProps {
-  robotType: RobotType
-  color?: string
-  show4thColumn?: boolean
-}
-
-/**
- * Component to render Opentrons Flex slot labels
- * For use as a RobotWorkspace child component
- */
-export const SlotLabels = ({
-  robotType,
-  color,
-  show4thColumn = false,
-}: SlotLabelsProps): JSX.Element | null => {
-  const widthSmallRem = 10.5
-  const widthLargeRem = 15.25
-
-  const rowDynamicWidth = show4thColumn
-    ? `${widthSmallRem * 2 + widthLargeRem * 2}rem`
-    : `${widthSmallRem + widthLargeRem * 2}rem`
-
-  const itemDynamicWidth = show4thColumn
-    ? `${widthSmallRem}rem`
-    : `${widthLargeRem}rem`
-
-  const rowStyle: Record<string, string> = {
-    '--dynamic-width': rowDynamicWidth,
-  }
-  const simpleItemWidthStyle: Record<string, string> = {
-    '--dynamic-width': `${widthLargeRem}rem`,
-  }
-  const nextTo4thWidthStyle: Record<string, string> = {
-    '--dynamic-width': itemDynamicWidth,
-  }
-  const fourthWidthStyle: Record<string, string> = {
-    '--dynamic-width': `${widthSmallRem}rem`,
-  }
-  return robotType === FLEX_ROBOT_TYPE ? (
-    <>
-      <RobotCoordsForeignObject
-        width="2.5rem"
-        height="26.75rem"
-        x="-147"
-        y="-10"
-      >
-        <div className={styles.deck_labels_column}>
-          <div className={styles.deck_label_column_container}>
-            <DeckInfoLabel deckLabel="A" height="max-content" width="100%" />
-          </div>
-          <div className={styles.deck_label_column_container}>
-            <DeckInfoLabel deckLabel="B" height="max-content" width="100%" />
-          </div>
-          <div className={styles.deck_label_column_container}>
-            <DeckInfoLabel deckLabel="C" height="max-content" width="100%" />
-          </div>
-          <div className={styles.deck_label_column_container}>
-            <DeckInfoLabel deckLabel="D" height="max-content" width="100%" />
-          </div>
-        </div>
-      </RobotCoordsForeignObject>
-      <RobotCoordsForeignObject
-        height="2.5rem"
-        width={`${
-          show4thColumn
-            ? widthSmallRem * 2 + widthLargeRem * 2
-            : widthSmallRem + widthLargeRem * 2
-        }rem`}
-        x="-100"
-        y="-55"
-      >
-        <div className={clsx(styles.deck_labels_row)} style={rowStyle}>
-          <div
-            className={styles.deck_label_row_container}
-            style={simpleItemWidthStyle}
-          >
-            <DeckInfoLabel deckLabel="1" height="100%" />
-          </div>
-          <div
-            className={styles.deck_label_row_container}
-            style={simpleItemWidthStyle}
-          >
-            <DeckInfoLabel deckLabel="2" height="100%" />
-          </div>
-          <div
-            className={styles.deck_label_row_container}
-            style={nextTo4thWidthStyle}
-          >
-            <DeckInfoLabel deckLabel="3" height="100%" />
-          </div>
-          {show4thColumn ? (
-            <div
-              className={styles.deck_label_row_container}
-              style={fourthWidthStyle}
-            >
-              <DeckInfoLabel deckLabel="4" height="100%" />
-            </div>
-          ) : null}
-        </div>
-      </RobotCoordsForeignObject>
-    </>
-  ) : null
-}

package/src/hardware-sim/Deck/__mocks__/getDeckDefinitions.ts

@@ -1,29 +0,0 @@
-import assert from 'assert'
-import path from 'path'
-// replace webpack-specific require.context with Node-based glob in tests
-import glob from 'glob'
-import { vi } from 'vitest'
-
-import type { DeckDefinition } from '@opentrons/shared-data'
-
-const DECK_FIXTURE_PATTERN = path.join(
-  __dirname,
-  '../../../../../shared-data/deck/fixtures/3/*.json'
-)
-
-const allDecks: unknown[] = glob.sync(DECK_FIXTURE_PATTERN).map(require)
-
-assert(
-  allDecks.length > 0,
-  `no deck fixtures found, is the path correct? ${DECK_FIXTURE_PATTERN}`
-)
-
-export const getDeckDefinitions = vi.fn(() =>
-  (allDecks as DeckDefinition[]).reduce(
-    (acc, deck: DeckDefinition): Record<string, DeckDefinition> => ({
-      ...acc,
-      [deck.otId]: deck,
-    }),
-    {}
-  )
-)

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

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

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

@@ -1,12 +0,0 @@
-export const ALL_OT2_DECK_LAYERS = [
-  'fixedBase',
-  'fixedTrash',
-  'doorStops',
-  'metalFrame',
-  'removableDeckOutline',
-  'slotRidges',
-  'slotNumbers',
-  'calibrationMarkings',
-  'removalHandle',
-  'screwHoles',
-] as const

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

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

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

@@ -1,8 +0,0 @@
-export * from './DeckFromLayers'
-export * from './FlexTrash'
-export * from './MoveLabwareOnDeck'
-export * from './RobotCoordsForeignDiv'
-export * from './RobotCoordsForeignObject'
-export * from './RobotCoordsText'
-export * from './RobotWorkSpace'
-export * from './SlotLabels'

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

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