feat(protocol-designer): show special-case warning for north/south

app/src/components/DeckMap/index.js

@@ -74,8 +74,8 @@ function DeckMap(props: Props) {
       viewBox={`-46 -10 ${488} ${390}`} // TODO: put these in variables
       className={className}
     >
-      {({ slots }) =>
-        map(slots, (slot: $Values<typeof slots>, slotId) => {
+      {({ deckSlotsById }) =>
+        map(deckSlotsById, (slot: $Values<typeof deckSlotsById>, slotId) => {
           if (!slot.matingSurfaceUnitVector) return null // if slot has no mating surface, don't render anything in it
           const moduleInSlot = modulesBySlot && modulesBySlot[slotId]
           const allLabwareInSlot = labwareBySlot && labwareBySlot[slotId]

components/src/deck/RobotWorkSpace.js

@@ -14,6 +14,11 @@ type Props = {
   deckLayerBlacklist?: Array<string>,
 }
 
+type GetRobotCoordsFromDOMCoords = $PropertyType<
+  RobotWorkSpaceRenderProps,
+  'getRobotCoordsFromDOMCoords'
+>
+
 function RobotWorkSpace(props: Props) {
   const { children, deckDef, deckLayerBlacklist = [], viewBox } = props
   const wrapperRef: ElementRef<*> = useRef(null)
@@ -23,10 +28,7 @@ function RobotWorkSpace(props: Props) {
   // Until Firefox fixes this and conforms to SVG2 draft,
   // it will suffer from inverted y behavior (ignores css transform)
   // $FlowFixMe(bc, 2019-05-31): flow type svg ref
-  const getRobotCoordsFromDOMCoords = (
-    x: number,
-    y: number
-  ): { x: number, y: number } => {
+  const getRobotCoordsFromDOMCoords: GetRobotCoordsFromDOMCoords = (x, y) => {
     if (!wrapperRef.current) return { x: 0, y: 0 }
     const cursorPoint = wrapperRef.current.createSVGPoint()
 
@@ -40,12 +42,12 @@ function RobotWorkSpace(props: Props) {
   if (!deckDef && !viewBox) return null
 
   let wholeDeckViewBox = null
-  let slots = {}
+  let deckSlotsById = {}
   if (deckDef) {
     const [viewBoxOriginX, viewBoxOriginY] = deckDef.cornerOffsetFromOrigin
     const [deckXDimension, deckYDimension] = deckDef.dimensions
 
-    slots = deckDef.locations.orderedSlots.reduce(
+    deckSlotsById = deckDef.locations.orderedSlots.reduce(
       (acc, deckSlot) => ({ ...acc, [deckSlot.id]: deckSlot }),
       {}
     )
@@ -61,7 +63,7 @@ function RobotWorkSpace(props: Props) {
       {deckDef && (
         <DeckFromData def={deckDef} layerBlacklist={deckLayerBlacklist} />
       )}
-      {children && children({ slots, getRobotCoordsFromDOMCoords })}
+      {children && children({ deckSlotsById, getRobotCoordsFromDOMCoords })}
     </svg>
   )
 }

components/src/deck/RobotWorkSpace.md

@@ -6,27 +6,27 @@ const deckDef = getDeckDefinitions()['ot2_standard']
 const slotName = '5'
 const divSlot = '3'
 ;<RobotWorkSpace deckDef={deckDef}>
-  {({ slots }) => (
+  {({ deckSlotsById }) => (
     <>
       <rect
-        x={slots[slotName].position[0]}
-        y={slots[slotName].position[1]}
-        width={slots[slotName].boundingBox.xDimension}
-        height={slots[slotName].boundingBox.yDimension}
+        x={deckSlotsById[slotName].position[0]}
+        y={deckSlotsById[slotName].position[1]}
+        width={deckSlotsById[slotName].boundingBox.xDimension}
+        height={deckSlotsById[slotName].boundingBox.yDimension}
         fill="#0075ff33"
       />
       <RobotCoordsText
-        x={slots[slotName].position[0] + 10}
-        y={slots[slotName].position[1] + 10}
+        x={deckSlotsById[slotName].position[0] + 10}
+        y={deckSlotsById[slotName].position[1] + 10}
         fill="gray"
       >
         Some Text
       </RobotCoordsText>
       <RobotCoordsForeignDiv
-        x={slots[divSlot].position[0]}
-        y={slots[divSlot].position[1]}
-        width={slots[divSlot].boundingBox.xDimension}
-        height={slots[divSlot].boundingBox.yDimension}
+        x={deckSlotsById[divSlot].position[0]}
+        y={deckSlotsById[divSlot].position[1]}
+        width={deckSlotsById[divSlot].boundingBox.xDimension}
+        height={deckSlotsById[divSlot].boundingBox.yDimension}
       >
         <input
           style={{ backgroundColor: 'lightgray', margin: '1rem' }}

components/src/deck/types.js

@@ -1,7 +1,7 @@
 // @flow
 import type { DeckSlot } from '@opentrons/shared-data'
 
-export type RobotWorkSpaceRenderProps = {
-  slots: { [string]: DeckSlot },
-  getRobotCoordsFromDOMCoords: (number, number) => { x: number, y: number },
-}
+export type RobotWorkSpaceRenderProps = {|
+  deckSlotsById: { [string]: DeckSlot },
+  getRobotCoordsFromDOMCoords: (number, number) => {| x: number, y: number |},
+|}