From 3069d0e4d0b491e066ebb41636223763c4da329b Mon Sep 17 00:00:00 2001
From: Brian Cooper <brian@opentrons.com>
Date: Mon, 30 Oct 2023 17:49:02 -0400
Subject: [PATCH] try out 66 33

---
 .../LabwarePositionCheck/PrepareSpace.tsx     | 124 ++++--------------
 1 file changed, 29 insertions(+), 95 deletions(-)

diff --git a/app/src/organisms/LabwarePositionCheck/PrepareSpace.tsx b/app/src/organisms/LabwarePositionCheck/PrepareSpace.tsx
index 543e7ef0103..4a63580f2cb 100644
--- a/app/src/organisms/LabwarePositionCheck/PrepareSpace.tsx
+++ b/app/src/organisms/LabwarePositionCheck/PrepareSpace.tsx
@@ -5,10 +5,7 @@ import { useSelector } from 'react-redux'
 import {
   DIRECTION_COLUMN,
   JUSTIFY_SPACE_BETWEEN,
-  LabwareRender,
-  Module,
   RESPONSIVENESS,
-  RobotWorkSpace,
   SPACING,
   Flex,
   DIRECTION_ROW,
@@ -16,16 +13,14 @@ import {
   TYPOGRAPHY,
   JUSTIFY_FLEX_END,
   PrimaryButton,
+  BaseDeck,
 } from '@opentrons/components'
 import {
-  inferModuleOrientationFromXCoordinate,
   CompletedProtocolAnalysis,
-  getModuleDef2,
   LabwareDefinition2,
   THERMOCYCLER_MODULE_TYPE,
   getModuleType,
   RobotType,
-  getDeckDefFromRobotType,
 } from '@opentrons/shared-data'
 
 import { getIsOnDevice } from '../../redux/config'
@@ -37,22 +32,12 @@ import type { CheckLabwareStep } from './types'
 const LPC_HELP_LINK_URL =
   'https://support.opentrons.com/s/article/How-Labware-Offsets-work-on-the-OT-2'
 
-const DECK_MAP_VIEWBOX = '-80 -20 550 466'
-const DECK_LAYER_BLOCKLIST = [
-  'calibrationMarkings',
-  'fixedBase',
-  'doorStops',
-  'metalFrame',
-  'removalHandle',
-  'removableDeckOutline',
-  'screwHoles',
-]
-
 const TILE_CONTAINER_STYLE = css`
   flex-direction: ${DIRECTION_COLUMN};
   justify-content: ${JUSTIFY_SPACE_BETWEEN};
   padding: ${SPACING.spacing32};
   height: 24.625rem;
+  flex: 1;
   @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
     height: 29.5rem;
   }
@@ -67,11 +52,11 @@ const Title = styled.h1`
 `
 interface PrepareSpaceProps extends Omit<CheckLabwareStep, 'section'> {
   section:
-    | 'CHECK_LABWARE'
-    | 'CHECK_TIP_RACKS'
-    | 'PICK_UP_TIP'
-    | 'RETURN_TIP'
-    | 'CHECK_POSITIONS'
+  | 'CHECK_LABWARE'
+  | 'CHECK_TIP_RACKS'
+  | 'PICK_UP_TIP'
+  | 'RETURN_TIP'
+  | 'CHECK_POSITIONS'
   labwareDef: LabwareDefinition2
   protocolData: CompletedProtocolAnalysis
   confirmPlacement: () => void
@@ -83,7 +68,6 @@ export const PrepareSpace = (props: PrepareSpaceProps): JSX.Element | null => {
   const { i18n, t } = useTranslation(['labware_position_check', 'shared'])
   const {
     location,
-    moduleId,
     labwareDef,
     protocolData,
     header,
@@ -95,87 +79,37 @@ export const PrepareSpace = (props: PrepareSpaceProps): JSX.Element | null => {
 
   if (protocolData == null || robotType == null) return null
 
-  const deckDef = getDeckDefFromRobotType(robotType)
   return (
     <Flex css={TILE_CONTAINER_STYLE}>
-      <Flex flexDirection={DIRECTION_ROW} gridGap={SPACING.spacing40}>
+      <Flex flex="1" flexDirection={DIRECTION_ROW} gridGap={SPACING.spacing40}>
         <Flex
-          flexDirection={DIRECTION_COLUMN}
           flex="1"
+          flexDirection={DIRECTION_COLUMN}
           gridGap={SPACING.spacing16}
         >
           <Title>{header}</Title>
           {body}
         </Flex>
-        <Flex flex="1" justifyContent={JUSTIFY_CENTER}>
-          <RobotWorkSpace
-            height={isOnDevice ? '300px' : '100%'}
-            deckDef={deckDef as any}
-            viewBox={DECK_MAP_VIEWBOX}
-            deckLayerBlocklist={DECK_LAYER_BLOCKLIST}
-            id="LabwarePositionCheck_deckMap"
-          >
-            {({ deckSlotsById }) => {
-              const deckSlot = deckSlotsById[location.slotName]
-              const [x, y] = deckSlot.position
-              let labwareToPrepare = null
-              if ('moduleModel' in location && location.moduleModel != null) {
-                labwareToPrepare = (
-                  <Module
-                    x={x}
-                    y={y}
-                    orientation={inferModuleOrientationFromXCoordinate(
-                      deckSlot.position[x]
-                    )}
-                    def={getModuleDef2(location.moduleModel)}
-                    innerProps={
-                      getModuleType(location.moduleModel) ===
-                      THERMOCYCLER_MODULE_TYPE
-                        ? { lidMotorState: 'open' }
-                        : {}
-                    }
-                  >
-                    <LabwareRender definition={labwareDef} />
-                  </Module>
-                )
-              } else {
-                labwareToPrepare = (
-                  <g transform={`translate(${String(x)},${String(y)})`}>
-                    <LabwareRender definition={labwareDef} />
-                  </g>
-                )
-              }
-              return (
-                <>
-                  {protocolData.modules.map(module => {
-                    const [modX, modY] = deckSlotsById[
-                      module.location.slotName
-                    ].position
-
-                    // skip the focused module as it will be rendered above with the labware
-                    return module.id === moduleId ? null : (
-                      <Module
-                        key={module.id}
-                        x={modX}
-                        y={modY}
-                        orientation={inferModuleOrientationFromXCoordinate(
-                          modX
-                        )}
-                        def={getModuleDef2(module.model)}
-                        innerProps={
-                          getModuleType(module.model) ===
-                          THERMOCYCLER_MODULE_TYPE
-                            ? { lidMotorState: 'open' }
-                            : {}
-                        }
-                      />
-                    )
-                  })}
-                  {labwareToPrepare}
-                </>
-              )
-            }}
-          </RobotWorkSpace>
+        <Flex flex="2" justifyContent={JUSTIFY_CENTER}>
+          <BaseDeck
+            robotType={robotType}
+            moduleLocations={protocolData.modules.map(mod => ({
+              moduleModel: mod.model,
+              moduleLocation: mod.location,
+              nestedLabwareDef: ('moduleModel' in location && location.moduleModel != null) ? labwareDef : null,
+              innerProps:
+                'moduleModel' in location
+                  && location.moduleModel != null
+                  && getModuleType(location.moduleModel) ===
+                  THERMOCYCLER_MODULE_TYPE
+                  ? { lidMotorState: 'open' }
+                  : {}
+            }))}
+            labwareLocations={[{
+              labwareLocation: location,
+              definition: labwareDef,
+            }]}
+          />
         </Flex>
       </Flex>
       {isOnDevice ? (