refactor(app,components): Move labware positioning to the parent and support labware schema 3

app/src/organisms/Desktop/CalibrationPanels/CalibrationLabwareRender.tsx

@@ -7,43 +7,40 @@
 import {
   getIsTiprack,
   getLabwareDisplayName,
-  getSchema2Dimensions,
+  getLabwareViewBox,
 } from '@opentrons/shared-data'
 
 import styles from './styles.module.css'
 
-import type { CoordinateTuple, LabwareDefinition } from '@opentrons/shared-data'
+import type { LabwareDefinition, Vector2D } from '@opentrons/shared-data'
 
 interface CalibrationLabwareRenderProps {
   labwareDef: LabwareDefinition
-  slotDefPosition: CoordinateTuple | null
+  labwarePosition: Vector2D /** The labware will be translated so its origin is here. */
 }
 
 export function CalibrationLabwareRender(
   props: CalibrationLabwareRenderProps
 ): JSX.Element {
-  const { labwareDef, slotDefPosition } = props
+  const { labwareDef, labwarePosition } = props
 
   const title = getLabwareDisplayName(labwareDef)
-  const dimensions = getSchema2Dimensions(labwareDef)
   const isTiprack = getIsTiprack(labwareDef)
 
+  const { minX, minY, xDimension, yDimension } = getLabwareViewBox(labwareDef)
+
   return (
-    <g
-      transform={`translate(${String(slotDefPosition?.[0])}, ${String(
-        slotDefPosition?.[1]
-      )})`}
-    >
+    <g transform={`translate(${labwarePosition.x}, ${labwarePosition.y})`}>
       {
         // TODO: we can change this boolean to check to isCalibrationBlock instead of isTiprack to render any labware
         isTiprack ? (
           <>
             <LabwareRender definition={labwareDef} />
             <RobotCoordsForeignDiv
-              width={dimensions.xDimension}
-              height={dimensions.yDimension}
-              x={0}
-              y={0 - dimensions.yDimension}
+              width={xDimension}
+              height={yDimension}
+              x={minX}
+              y={minY - yDimension}
               transformWithSVG
               innerDivProps={{ className: styles.labware_ui_wrapper }}
             >

app/src/organisms/Desktop/CalibrationPanels/DeckSetup.tsx

@@ -14,20 +14,23 @@
   SPACING,
 } from '@opentrons/components'
 import {
+  coordinateTupleToVector3D,
   getDeckDefinitions,
+  getDeckSlotOriginToLabwareOrigin,
   getLabwareDisplayName,
   getPositionFromSlotId,
+  getVectorSum,
 } from '@opentrons/shared-data'
 
 import { NeedHelpLink } from '/app/molecules/OT2CalibrationNeedHelpLink'
 import * as Sessions from '/app/redux/sessions'
 
 import { CalibrationLabwareRender } from './CalibrationLabwareRender'
 
-import type { AddressableArea } from '@opentrons/shared-data'
 import type { CalibrationPanelProps } from './types'
 
 const TIPRACK = 'tip rack'
+const DECK_VIEW_BOX = '-46 -10 488 390'
 
 export function DeckSetup(props: CalibrationPanelProps): JSX.Element {
   const deckDef = useMemo(() => getDeckDefinitions().ot2_standard, [])
@@ -109,31 +112,56 @@
             ]}
             deckDef={deckDef}
             showDeckLayers
-            viewBox={`-46 -10 ${488} ${390}`} // TODO: put these in variables
+            viewBox={DECK_VIEW_BOX}
           >
-            {({ deckSlotsById }) =>
-              map(deckSlotsById, (slot: AddressableArea, slotId) => {
-                if (!slot.matingSurfaceUnitVector) return null // if slot has no mating surface, don't render anything in it
-                let labwareDef = null
-                if (String(tipRack?.slot) === slotId) {
-                  labwareDef = tipRack?.definition
-                } else if (
-                  calBlock != null &&
-                  String(calBlock?.slot) === slotId
-                ) {
-                  labwareDef = calBlock?.definition
-                }
+            {({ addressableAreasById }) =>
+              map(
+                addressableAreasById,
+                (addressableArea, addressableAreaName) => {
+                  if (!addressableArea.matingSurfaceUnitVector) {
+                    // if slot has no mating surface, don't render anything in it
+                    return null
+                  }
+
+                  let labwareDef = null
+                  if (String(tipRack?.slot) === addressableAreaName) {
+                    labwareDef = tipRack?.definition
+                  } else if (
+                    calBlock != null &&
+                    String(calBlock?.slot) === addressableAreaName
+                  ) {
+                    labwareDef = calBlock?.definition
+                  }
+                  if (labwareDef === null) {
+                    return null
+                  }
 
-                const slotDefPosition = getPositionFromSlotId(slot.id, deckDef)
+                  const slotOrigin = getPositionFromSlotId(
+                    addressableArea.id,
+                    deckDef
+                  )
+                  if (slotOrigin === null) {
+                    return null // Shouldn't happen.
+                  }
 
-                return labwareDef != null ? (
-                  <CalibrationLabwareRender
-                    key={slotId}
-                    slotDefPosition={slotDefPosition}
-                    labwareDef={labwareDef}
-                  />
-                ) : null
-              })
+                  const slotOriginToLabwareOrigin = getDeckSlotOriginToLabwareOrigin(
+                    addressableArea,
+                    labwareDef
+                  )
+                  const labwarePosition = getVectorSum(
+                    coordinateTupleToVector3D(slotOrigin),
+                    slotOriginToLabwareOrigin
+                  )
+
+                  return labwareDef != null ? (
+                    <CalibrationLabwareRender
+                      key={addressableAreaName}
+                      labwarePosition={labwarePosition}
+                      labwareDef={labwareDef}
+                    />
+                  ) : null
+                }
+              )
             }
           </RobotWorkSpace>
         </Flex>

app/src/organisms/Desktop/Devices/ProtocolRun/SetupLabware/LabwareListItem.tsx

@@ -27,6 +27,7 @@
 } from '@opentrons/components'
 import { useCreateLiveCommandMutation } from '@opentrons/react-api-client'
 import {
+  getLabwareViewBox,
   getModuleType,
   getSchema2CornerOffsetFromSlot,
   getSchema2Dimensions,
@@ -395,13 +396,10 @@
   definition: LabwareDefinition
 }): JSX.Element {
   const { definition } = props
-  const cornerOffsetFromSlot = getSchema2CornerOffsetFromSlot(definition)
-  const dimensions = getSchema2Dimensions(definition)
+  const { minX, minY, xDimension, yDimension } = getLabwareViewBox(definition)
 
   return (
-    <LabwareThumbnail
-      viewBox={`${cornerOffsetFromSlot.x} ${cornerOffsetFromSlot.y} ${dimensions.xDimension} ${dimensions.yDimension}`}
-    >
+    <LabwareThumbnail viewBox={`${minX} ${minY} ${xDimension} ${yDimension}`}>
       <LabwareRender
         definition={definition}
         wellLabelOption={WELL_LABEL_OPTIONS.SHOW_LABEL_INSIDE}

app/src/organisms/Desktop/Devices/ProtocolRun/SetupLabware/SlotDetailModal.tsx

@@ -19,6 +19,7 @@
   TYPOGRAPHY,
 } from '@opentrons/components'
 import {
+  getLabwareViewBox,
   getSchema2CornerOffsetFromSlot,
   getSchema2Dimensions,
   parseLiquidsInLoadOrder,
@@ -90,10 +91,7 @@
   )
 
   const labwareDefinition = definitionsByURI[selectedLabware.definitionUri]
-  const labwareCornerOffsetFromSlot = getSchema2CornerOffsetFromSlot(
-    labwareDefinition
-  )
-  const labwareDimensions = getSchema2Dimensions(labwareDefinition)
+  const labwareViewBox = getLabwareViewBox(labwareDefinition)
 
   const commands = protocolData?.commands ?? []
   const liquids = parseLiquidsInLoadOrder(
@@ -229,7 +227,7 @@
               ) : null}
             </Flex>
             <LabwareThumbnail
-              viewBox={`${labwareCornerOffsetFromSlot.x} ${labwareCornerOffsetFromSlot.y} ${labwareDimensions.xDimension} ${labwareDimensions.yDimension}`}
+              viewBox={`${labwareViewBox.minX} ${labwareViewBox.minY} ${labwareViewBox.xDimension} ${labwareViewBox.yDimension}`}
               width={
                 selectedLiquidId != null && isVariedStack ? '20rem' : '29rem'
               }

app/src/organisms/Desktop/Labware/LabwareCard/index.tsx

@@ -22,8 +22,7 @@
 import {
   getLabwareDefIsStandard,
   getLabwareDisplayName,
-  getSchema2CornerOffsetFromSlot,
-  getSchema2Dimensions,
+  getLabwareViewBox,
 } from '@opentrons/shared-data'
 
 import { UNIVERSAL_FLAT_ADAPTER_X_DIMENSION } from '../LabwareDetails/Gallery'
@@ -44,13 +43,12 @@
   const displayCategory = startCase(definition.metadata.displayCategory)
   const isCustomDefinition = !getLabwareDefIsStandard(definition)
 
-  const cornerOffsetFromSlot = getSchema2CornerOffsetFromSlot(definition)
-  const dimensions = getSchema2Dimensions(definition)
+  const viewBox = getLabwareViewBox(definition)
 
   const xDimensionOverride =
     definition.parameters.loadName === 'opentrons_universal_flat_adapter'
       ? UNIVERSAL_FLAT_ADAPTER_X_DIMENSION
-      : dimensions.xDimension
+      : viewBox.xDimension
 
   return (
     <Box
@@ -70,7 +68,7 @@
     >
       <Box id="LabwareCard_labwareImage" marginRight={SPACING.spacing24}>
         <RobotWorkSpace
-          viewBox={`${cornerOffsetFromSlot.x} ${cornerOffsetFromSlot.y} ${xDimensionOverride} ${dimensions.yDimension}`}
+          viewBox={`${viewBox.minX} ${viewBox.minY} ${xDimensionOverride} ${viewBox.yDimension}`}
         >
           {() => <LabwareRender definition={definition} />}
         </RobotWorkSpace>

app/src/organisms/Desktop/Labware/LabwareDetails/Gallery.tsx

@@ -11,15 +11,18 @@
   SPACING,
   SPACING_AUTO,
 } from '@opentrons/components'
-import {
-  getSchema2CornerOffsetFromSlot,
-  getSchema2Dimensions,
-} from '@opentrons/shared-data'
+import { getLabwareViewBox } from '@opentrons/shared-data'
 
 import { labwareImages } from './labware-images'
 
 import type { LabwareDefinition } from '@opentrons/shared-data'
 
+/**
+ * opentrons_universal_flat_adapter has a protrusion on one side, but the `dimensions`
+ * in the current version of the definition (v1) do not include it. This is a
+ * replacement xDimension that includes the protrusion so it doesn't get clipped off
+ * when we render an SVG of the adapter.
+ */
 export const UNIVERSAL_FLAT_ADAPTER_X_DIMENSION = 127.4
 
 export interface GalleryProps {
@@ -29,20 +32,19 @@
 export function Gallery(props: GalleryProps): JSX.Element {
   const { definition } = props
   const { parameters: params } = definition
-  const dims = getSchema2Dimensions(definition)
-  const cornerOffsetFromSlot = getSchema2CornerOffsetFromSlot(definition)
 
-  const xDimension =
+  const { minX, minY, xDimension, yDimension } = getLabwareViewBox(definition)
+  const xDimensionOverride =
     params.loadName === 'opentrons_universal_flat_adapter'
-      ? 127.4
-      : dims.xDimension
+      ? UNIVERSAL_FLAT_ADAPTER_X_DIMENSION
+      : xDimension
 
   const [currentImage, setCurrentImage] = useState<number>(0)
   const render = (
     <Box width="100%">
       <RobotWorkSpace
         key="center"
-        viewBox={`${cornerOffsetFromSlot.x} ${cornerOffsetFromSlot.y} ${xDimension} ${dims.yDimension}`}
+        viewBox={`${minX} ${minY} ${xDimensionOverride} ${yDimension}`}
       >
         {() => <LabwareRender definition={definition} />}
       </RobotWorkSpace>

app/src/organisms/ErrorRecoveryFlows/shared/TwoColLwInfoAndDeck.tsx

@@ -232,6 +232,7 @@ export function TwoColLwInfoAndDeck(
                       def={moduleDef}
                       x={x}
                       y={y}
+                      // TODO BEFORE MERGE: Unrelated bug, but should this have been passed to LabwareRender too?
                       orientation={inferModuleOrientationFromXCoordinate(x)}
                     >
                       {nestedLabwareDef != null &&
@@ -244,6 +245,7 @@ export function TwoColLwInfoAndDeck(
                 {labwareRenderInfo
                   .filter(l => l.labwareId !== failedLwId)
                   .map(({ x, y, labwareDef, labwareId }) => (
+                    // TODO BEFORE MERGE
                     <g key={labwareId} transform={`translate(${x},${y})`}>
                       {labwareDef != null && labwareId !== failedLwId ? (
                         <LabwareRender definition={labwareDef} />

app/src/organisms/InterventionModal/MoveLabwareInterventionContent.tsx

@@ -216,10 +216,12 @@ export function MoveLabwareInterventionContent({
                         def={moduleDef}
                         x={x}
                         y={y}
+                        // TODO BEFORE MERGE: Same thing, should this have been passed to LabwareRender
                         orientation={inferModuleOrientationFromXCoordinate(x)}
                       >
                         {nestedLabwareDef != null &&
                         nestedLabwareId !== command.params.labwareId ? (
+                          // TODO BEFORE MERGE: Needs-to-labware coords, I think
                           <LabwareRender definition={nestedLabwareDef} />
                         ) : null}
                       </Module>
@@ -228,6 +230,7 @@ export function MoveLabwareInterventionContent({
                   {labwareRenderInfo
                     .filter(l => l.labwareId !== command.params.labwareId)
                     .map(({ x, y, labwareDef, labwareId }) => (
+                      // TODO BEFORE MERGE
                       <g key={labwareId} transform={`translate(${x},${y})`}>
                         {labwareDef != null &&
                         labwareId !== command.params.labwareId ? (

app/src/organisms/LabwarePositionCheck/steps/HandleLabware/EditOffset/CheckLabware/LPCLabwareJogRender.tsx

@@ -40,6 +40,7 @@ export function LPCLabwareJogRender({
 
   return (
     <Flex css={RENDER_CONTAINER_STYLE}>
+      {/* TODO BEFORE MERGE: Is this right? This seems too small to be a deck map viewbox. Is this actually supposed to be a bounding box around the labware? If so, it needs updates for schema 3. */}
       <RobotWorkSpace viewBox={DECK_MAP_VIEWBOX}>
         {() => (
           <>

app/src/organisms/LegacyLabwarePositionCheck/JogToWell.tsx

@@ -147,6 +147,7 @@ export const JogToWell = (props: JogToWellProps): JSX.Element | null => {
           <LiveOffsetValue {...liveOffset} />
         </Flex>
         <Flex flex="1" alignItems={ALIGN_CENTER} gridGap={SPACING.spacing20}>
+          {/* TODO BEFORE MERGE: Same questions about DECK_MAP_VIEWBOX */}
           <RobotWorkSpace viewBox={DECK_MAP_VIEWBOX}>
             {() => (
               <>

app/src/organisms/ODD/ProtocolSetup/ProtocolSetupLabware/LabwareLiquidsDetailModal.tsx

@@ -114,6 +114,7 @@ export const LabwareLiquidsDetailModal = (
       <Flex justifyContent={JUSTIFY_SPACE_BETWEEN} gridGap={SPACING.spacing32}>
         <Flex>
           <LabwareThumbnail
+            // TODO BEFORE MERGE
             viewBox={`${labwareCornerOffsetFromSlot.x} ${labwareCornerOffsetFromSlot.y} ${labwareDimensions.xDimension} ${labwareDimensions.yDimension}`}
           >
             {labwareRender}

app/src/organisms/ODD/ProtocolSetup/ProtocolSetupLabware/SetupLabwareStackView.tsx

@@ -182,6 +182,7 @@ export function SetupLabwareStackView({
             </StyledText>
           ) : null}
           <LabwareThumbnail
+            // TODO BEFORE MERGE
             viewBox={`${labwareCornerOffsetFromSlot.x} ${labwareCornerOffsetFromSlot.y} ${labwareDimensions.xDimension} ${labwareDimensions.yDimension}`}
           >
             <g

app/src/organisms/WellSelection/Selection384Wells.tsx

@@ -129,6 +129,7 @@ export function Selection384Wells({
   }
   return (
     <Flex width="100%">
+      {/* TODO BEFORE MERGE: Not sure how this is working without a parent <svg>. */}
       {labwareRender}
       <Flex
         flex="1 0 0"

app/src/organisms/WellSelection/index.tsx

@@ -163,6 +163,7 @@ export function WellSelection(props: WellSelectionProps): JSX.Element {
   })
 
   const labwareRender = (
+    // TODO BEFORE MERGE
     <RobotCoordinateSpace viewBox="0 0 128 86">
       <Labware
         definition={definition}