feat(protocol-designer, components): prep work for deck config in PD (#…

…13775)

partially addresses RAUT-743 RAUT-688

components/src/hardware-sim/BaseDeck/BaseDeck.stories.tsx

@@ -13,7 +13,7 @@ import {
   EXTENDED_DECK_CONFIG_FIXTURE,
   STANDARD_SLOT_DECK_CONFIG_FIXTURE,
 } from './__fixtures__'
-import { BaseDeck as BaseDeckComponent } from './'
+import { BaseDeck as BaseDeckComponent } from './BaseDeck'
 
 import type { Meta, StoryObj } from '@storybook/react'
 import type {

components/src/hardware-sim/BaseDeck/index.ts

@@ -0,0 +1,5 @@
+export * from './BaseDeck'
+export * from './SingleSlotFixture'
+export * from './StagingAreaFixture'
+export * from './WasteChuteFixture'
+export * from './WasteChuteStagingAreaFixture'

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

@@ -1,8 +1,9 @@
-export * from './RobotWorkSpace'
+export * from './DeckFromData'
+export * from './FlexTrash'
+export * from './getDeckDefinitions'
+export * from './MoveLabwareOnDeck'
 export * from './RobotCoordsForeignDiv'
 export * from './RobotCoordsForeignObject'
 export * from './RobotCoordsText'
+export * from './RobotWorkSpace'
 export * from './SlotLabels'
-export * from './FlexTrash'
-export * from './getDeckDefinitions'
-export * from './MoveLabwareOnDeck'

components/src/hardware-sim/RobotCoordinateSpace/RobotCoordinateSpaceWithDOMCoords.tsx

@@ -0,0 +1,65 @@
+import * as React from 'react'
+import { Svg } from '../../primitives'
+import type { DeckDefinition, DeckSlot } from '@opentrons/shared-data'
+
+export interface RobotCoordinateSpaceWithDOMCoordsRenderProps {
+  deckSlotsById: { [slotId: string]: DeckSlot }
+  getRobotCoordsFromDOMCoords: (
+    domX: number,
+    domY: number
+  ) => { x: number; y: number }
+}
+
+interface RobotCoordinateSpaceWithDOMCoordsProps
+  extends React.ComponentProps<typeof Svg> {
+  viewBox?: string | null
+  deckDef?: DeckDefinition
+  children?: (
+    props: RobotCoordinateSpaceWithDOMCoordsRenderProps
+  ) => React.ReactNode
+}
+
+type GetRobotCoordsFromDOMCoords = RobotCoordinateSpaceWithDOMCoordsRenderProps['getRobotCoordsFromDOMCoords']
+
+export function RobotCoordinateSpaceWithDOMCoords(
+  props: RobotCoordinateSpaceWithDOMCoordsProps
+): JSX.Element | null {
+  const { children, deckDef, viewBox, ...restProps } = props
+  const wrapperRef = React.useRef<SVGSVGElement>(null)
+  const getRobotCoordsFromDOMCoords: GetRobotCoordsFromDOMCoords = (x, y) => {
+    if (wrapperRef.current == null) return { x: 0, y: 0 }
+
+    const cursorPoint = wrapperRef.current.createSVGPoint()
+
+    cursorPoint.x = x
+    cursorPoint.y = y
+
+    return cursorPoint.matrixTransform(
+      wrapperRef.current.getScreenCTM()?.inverse()
+    )
+  }
+  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.orderedSlots.reduce(
+      (acc, deckSlot) => ({ ...acc, [deckSlot.id]: deckSlot }),
+      {}
+    )
+    wholeDeckViewBox = `${viewBoxOriginX} ${viewBoxOriginY} ${deckXDimension} ${deckYDimension}`
+  }
+  return (
+    <Svg
+      viewBox={viewBox || wholeDeckViewBox}
+      ref={wrapperRef}
+      transform="scale(1, -1)"
+      {...restProps}
+    >
+      {children?.({ deckSlotsById, getRobotCoordsFromDOMCoords })}
+    </Svg>
+  )
+}

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

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

components/src/hardware-sim/index.ts

@@ -1,5 +1,7 @@
+export * from './BaseDeck'
 export * from './Deck'
 export * from './DeckConfigurator'
 export * from './Labware'
 export * from './Module'
 export * from './Pipette'
+export * from './RobotCoordinateSpace'

protocol-designer/src/components/DeckSetup/NullDeckState.tsx

@@ -0,0 +1,50 @@
+import * as React from 'react'
+import {
+  FONT_SIZE_BODY_1,
+  FONT_WEIGHT_BOLD,
+  getDeckDefinitions,
+  RobotCoordsText,
+  RobotWorkSpace,
+  TEXT_TRANSFORM_UPPERCASE,
+} from '@opentrons/components'
+import { i18n } from '../../localization'
+import {
+  VIEWBOX_HEIGHT,
+  VIEWBOX_MIN_X,
+  VIEWBOX_MIN_Y,
+  VIEWBOX_WIDTH,
+} from './constants'
+import { DECK_LAYER_BLOCKLIST } from './index'
+
+import styles from './DeckSetup.css'
+
+export const NullDeckState = (): JSX.Element => {
+  const deckDef = React.useMemo(() => getDeckDefinitions().ot2_standard, [])
+
+  return (
+    <div className={styles.deck_row}>
+      <div className={styles.deck_wrapper}>
+        <RobotWorkSpace
+          deckLayerBlocklist={DECK_LAYER_BLOCKLIST}
+          deckDef={deckDef}
+          viewBox={`${VIEWBOX_MIN_X} ${VIEWBOX_MIN_Y} ${VIEWBOX_WIDTH} ${VIEWBOX_HEIGHT}`}
+          width="100%"
+          height="100%"
+        >
+          {() => (
+            <RobotCoordsText
+              x={5}
+              y={375}
+              style={{ textTransform: TEXT_TRANSFORM_UPPERCASE }}
+              fill="#cccccc"
+              fontWeight={FONT_WEIGHT_BOLD}
+              fontSize={FONT_SIZE_BODY_1}
+            >
+              {i18n.t('deck.inactive_deck')}
+            </RobotCoordsText>
+          )}
+        </RobotWorkSpace>
+      </div>
+    </div>
+  )
+}

protocol-designer/src/components/DeckSetup/SlotLabels.tsx

@@ -14,6 +14,7 @@ import type { RobotType } from '@opentrons/shared-data'
 
 interface SlotLabelsProps {
   robotType: RobotType
+  hasStagingAreas: boolean
 }
 
 /**
@@ -23,6 +24,7 @@ interface SlotLabelsProps {
  */
 export const SlotLabels = ({
   robotType,
+  hasStagingAreas,
 }: SlotLabelsProps): JSX.Element | null => {
   return robotType === FLEX_ROBOT_TYPE ? (
     <>
@@ -55,14 +57,14 @@ export const SlotLabels = ({
       </RobotCoordsForeignObject>
       <RobotCoordsForeignObject
         height="2.5rem"
-        width="30.375rem"
+        width={hasStagingAreas ? '40.5rem' : '30.375rem'}
         x="-15"
         y="-65"
       >
         <Flex
           alignItems={ALIGN_CENTER}
           flex="1"
-          width="30.375rem"
+          width={hasStagingAreas ? '40.5rem' : '30.375rem'}
           height="2.5rem"
         >
           <Flex
@@ -86,6 +88,15 @@ export const SlotLabels = ({
           >
             <LocationIcon slotName="3" height="100%" />
           </Flex>
+          {hasStagingAreas ? (
+            <Flex
+              alignItems={ALIGN_CENTER}
+              justifyContent={JUSTIFY_CENTER}
+              flex="1"
+            >
+              <LocationIcon slotName="4" height="100%" />
+            </Flex>
+          ) : null}
         </Flex>
       </RobotCoordsForeignObject>
     </>

protocol-designer/src/components/DeckSetup/__tests__/DeckSetup.test.ts

@@ -9,7 +9,7 @@ import {
 } from '@opentrons/shared-data'
 import { TEMPERATURE_AT_TARGET } from '@opentrons/step-generation'
 import * as labwareModuleCompatibility from '../../../utils/labwareModuleCompatibility'
-import { getSwapBlocked, SwapBlockedArgs } from '..'
+import { getSwapBlocked, SwapBlockedArgs } from '../utils'
 
 describe('DeckSetup', () => {
   describe('getSwapBlocked', () => {

protocol-designer/src/components/DeckSetup/constants.ts

@@ -0,0 +1,27 @@
+import { STANDARD_SLOT_LOAD_NAME } from '@opentrons/shared-data'
+
+const cutouts = [
+  'A1',
+  'A2',
+  'A3',
+  'B1',
+  'B2',
+  'B3',
+  'C1',
+  'C2',
+  'C3',
+  'D1',
+  'D2',
+  'D3',
+]
+
+export const DEFAULT_SLOTS = cutouts.map((cutout, index) => ({
+  fixtureId: (index + 1).toString(),
+  fixtureLocation: cutout,
+  loadName: STANDARD_SLOT_LOAD_NAME,
+}))
+
+export const VIEWBOX_MIN_X = -64
+export const VIEWBOX_MIN_Y = -10
+export const VIEWBOX_WIDTH = 520
+export const VIEWBOX_HEIGHT = 414