refactor(app,labware-library): Migrate some more components to positionMode="passThrough"

app/src/organisms/Desktop/ProtocolVisualization/DeckView/DeckViewLabware.tsx

@@ -1,6 +1,6 @@
 import { Fragment } from 'react'
 
-import { COLORS, StyledText } from '@opentrons/components'
+import { CenterLabwareInSlot, COLORS, StyledText } from '@opentrons/components'
 import {
   getAddressableAreaFromSlotId,
   getPositionFromSlotId,
@@ -77,16 +77,20 @@ export function DeckViewLabware(props: DeckViewLabwareProps): JSX.Element {
           isActiveLayerVisible && selectedRunTimeCommand != null
         return (
           <Fragment key={id}>
-            <LabwareOnDeck
-              x={slotPosition[0]}
-              y={slotPosition[1]}
-              robotState={robotState}
-              labwareDef={labwareEntitiesExtended[id].def}
-              liquids={liquids}
-              labwareId={id}
-              setSelectedSlot={setSelectedSlot}
-              setHoveredSlot={setHoveredSlot}
-            />
+            <g transform={`translate(${slotPosition[0]}, ${slotPosition[1]})`}>
+              <CenterLabwareInSlot definition={labwareEntitiesExtended[id].def}>
+                <LabwareOnDeck
+                  x={0}
+                  y={0}
+                  robotState={robotState}
+                  labwareDef={labwareEntitiesExtended[id].def}
+                  liquids={liquids}
+                  labwareId={id}
+                  setSelectedSlot={setSelectedSlot}
+                  setHoveredSlot={setHoveredSlot}
+                />
+              </CenterLabwareInSlot>
+            </g>
             <DeckViewOverlay
               key={`${slot}_hoveredSlot_labware`}
               slotId={slot}

app/src/organisms/Desktop/ProtocolVisualization/DeckView/DeckViewModules.tsx

@@ -1,6 +1,11 @@
 import { Fragment } from 'react'
 
-import { COLORS, Module, StyledText } from '@opentrons/components'
+import {
+  CenterLabwareInModuleChildSlot,
+  COLORS,
+  Module,
+  StyledText,
+} from '@opentrons/components'
 import {
   getModuleDef,
   getPositionFromSlotId,
@@ -107,24 +112,33 @@ export function DeckViewModules(props: DeckViewModulesProps): JSX.Element {
                 }
                 targetSlotId={slot}
                 targetDeckId={deckDef.otId}
-                childrenPositioningMode="offsetToSlot"
+                childrenPositioningMode="passThrough"
                 setSelectedSlot={setSelectedSlot}
                 setHoveredSlot={setHoveredSlot}
               >
                 {labwareLoadedOnModuleId != null ? (
                   <>
-                    <LabwareOnDeck
-                      robotState={robotState}
-                      labwareDef={
+                    <CenterLabwareInModuleChildSlot
+                      deckId={deckDef.otId}
+                      slotId={slot}
+                      moduleDefinition={moduleDef}
+                      labwareDefinition={
                         labwareEntitiesExtended[labwareLoadedOnModuleId].def
                       }
-                      liquids={liquids}
-                      labwareId={labwareLoadedOnModuleId}
-                      x={0}
-                      y={0}
-                      setSelectedSlot={setSelectedSlot}
-                      setHoveredSlot={setHoveredSlot}
-                    />
+                    >
+                      <LabwareOnDeck
+                        robotState={robotState}
+                        labwareDef={
+                          labwareEntitiesExtended[labwareLoadedOnModuleId].def
+                        }
+                        liquids={liquids}
+                        labwareId={labwareLoadedOnModuleId}
+                        x={0}
+                        y={0}
+                        setSelectedSlot={setSelectedSlot}
+                        setHoveredSlot={setHoveredSlot}
+                      />
+                    </CenterLabwareInModuleChildSlot>
                     {moduleType === THERMOCYCLER_MODULE_TYPE ? (
                       <DeckViewOverlay
                         key={slot}

app/src/organisms/Desktop/ProtocolVisualization/DeckView/LabwareOnDeck.tsx

@@ -81,7 +81,7 @@ export function LabwareOnDeck(props: LabwareOnDeckProps): JSX.Element {
       cursor="pointer"
     >
       <LabwareRender
-        positioningMode="offsetInSlot"
+        positioningMode="passThrough"
         definition={labwareDef}
         wellFill={wellFill}
         highlightedWells={wellGroup}

app/src/organisms/Desktop/ProtocolVisualization/TipPickupContainer/index.tsx

@@ -69,7 +69,7 @@ export function TipPickupContainer(
             <g>
               <LabwareRender
                 definition={def}
-                positioningMode="offsetInSlot"
+                positioningMode="passThrough"
                 missingTips={missingTips}
                 tipStatusByWellName={tipStatusByWellName}
               />

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

@@ -4,6 +4,7 @@ import { css } from 'styled-components'
 
 import {
   ALIGN_CENTER,
+  CenterLabwareInSlot,
   COLORS,
   DIRECTION_COLUMN,
   Flex,
@@ -41,10 +42,10 @@ export function LPCLabwareJogRender({
     <Flex css={RENDER_CONTAINER_STYLE}>
       <RobotWorkSpace viewBox={DECK_MAP_VIEWBOX}>
         {() => (
-          <>
+          <CenterLabwareInSlot definition={itemLwDef}>
             <LabwareRender
               definition={itemLwDef}
-              positioningMode="offsetInSlot"
+              positioningMode="passThrough"
               wellStroke={{ A1: COLORS.blue50 }}
               wellLabelOption={WELL_LABEL_OPTIONS.SHOW_LABEL_OUTSIDE}
               highlightedWellLabels={{ wells: ['A1'] }}
@@ -56,7 +57,7 @@ export function LPCLabwareJogRender({
               pipetteName={pipetteName}
               usingMetalProbe={true}
             />
-          </>
+          </CenterLabwareInSlot>
         )}
       </RobotWorkSpace>
       <LevelWithLabware runId={runId} />

app/src/organisms/LegacyLabwarePositionCheck/JogToWell.tsx

@@ -7,6 +7,7 @@ import styled, { css } from 'styled-components'
 import {
   ALIGN_CENTER,
   ALIGN_FLEX_START,
+  CenterLabwareInSlot,
   COLORS,
   DIRECTION_COLUMN,
   Flex,
@@ -148,10 +149,10 @@ export const JogToWell = (props: JogToWellProps): JSX.Element | null => {
         <Flex flex="1" alignItems={ALIGN_CENTER} gridGap={SPACING.spacing20}>
           <RobotWorkSpace viewBox={DECK_MAP_VIEWBOX}>
             {() => (
-              <>
+              <CenterLabwareInSlot definition={labwareDef}>
                 <LabwareRender
                   definition={labwareDef}
-                  positioningMode="offsetInSlot"
+                  positioningMode="passThrough"
                   wellStroke={wellStroke}
                   wellLabelOption={WELL_LABEL_OPTIONS.SHOW_LABEL_OUTSIDE}
                   highlightedWellLabels={{ wells: wellsToHighlight }}
@@ -163,7 +164,7 @@ export const JogToWell = (props: JogToWellProps): JSX.Element | null => {
                   pipetteName={pipetteName}
                   usingMetalProbe={shouldUseMetalProbe}
                 />
-              </>
+              </CenterLabwareInSlot>
             )}
           </RobotWorkSpace>
           <Flex css={LEVEL_CONTAINER_STYLE}>

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

@@ -20,8 +20,7 @@ import {
 } from '@opentrons/components'
 import {
   getLabwareDefinitionsByURIForProtocol,
-  getSchema2CornerOffsetFromSlot,
-  getSchema2Dimensions,
+  getLabwareViewBox,
   getWellFillFromLabwareId,
 } from '@opentrons/shared-data'
 
@@ -92,9 +91,7 @@ export function SetupLabwareStackView({
   const hasLiquids = Object.keys(wellFill).length > 0
   const labwareDefinition =
     labwareDefinitionsByURI[selectedLabware.definitionUri]
-  const labwareCornerOffsetFromSlot =
-    getSchema2CornerOffsetFromSlot(labwareDefinition)
-  const labwareDimensions = getSchema2Dimensions(labwareDefinition)
+  const labwareViewBox = getLabwareViewBox(labwareDefinition)
 
   return (
     <>
@@ -181,7 +178,7 @@ export function SetupLabwareStackView({
             </StyledText>
           ) : null}
           <LabwareThumbnail
-            viewBox={`${labwareCornerOffsetFromSlot.x} ${labwareCornerOffsetFromSlot.y} ${labwareDimensions.xDimension} ${labwareDimensions.yDimension}`}
+            viewBox={`${labwareViewBox.minX} ${labwareViewBox.minY} ${labwareViewBox.xDimension} ${labwareViewBox.yDimension}`}
           >
             <g
               onClick={() => {
@@ -193,7 +190,7 @@ export function SetupLabwareStackView({
             >
               <LabwareRender
                 definition={labwareDefinition}
-                positioningMode="offsetInSlot"
+                positioningMode="passThrough"
                 wellFill={wellFill}
               />
             </g>

labware-library/src/labware-creator/components/ConditionalLabwareRender.tsx

@@ -96,7 +96,7 @@ const PopulatedPreview = (props: {
       {() => (
         <LabwareRender
           definition={definition}
-          positioningMode="offsetInSlot"
+          positioningMode="passThrough"
           gRef={gRef}
         />
       )}