adjust deck map

Opentrons · Nov 22, 2024 · e40d66c · e40d66c
1 parent 7af746b
commit e40d66c
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 27 deletions.
diff --git a/protocol-designer/src/pages/Designer/DeckSetup/DeckSetupContainer.tsx b/protocol-designer/src/pages/Designer/DeckSetup/DeckSetupContainer.tsx
@@ -195,15 +195,14 @@ export function DeckSetupContainer(props: DeckSetupTabType): JSX.Element {
   )
 
   return (
-    <Flex>
+    <Flex height="100%">
       <Flex
         backgroundColor={COLORS.white}
         borderRadius={BORDERS.borderRadius12}
         width="100%"
-        height={zoomIn.slot != null ? '75vh' : '70vh'}
+        height={tab === 'protocolSteps' ? '70vh' : '100%'}
         flexDirection={DIRECTION_COLUMN}
         padding={SPACING.spacing24}
-        maxHeight="39.375rem" // this is to block deck view from enlarging
       >
         <Flex
           width="100%"
@@ -212,24 +211,23 @@ export function DeckSetupContainer(props: DeckSetupTabType): JSX.Element {
           justifyContent={JUSTIFY_CENTER}
           gridGap={SPACING.spacing12}
         >
-          <Box width="20%">
-            {hoverSlot != null &&
-            breakPointSize !== 'small' &&
-            LEFT_SLOTS.includes(hoverSlot) ? (
-              <SlotDetailsContainer robotType={robotType} slot={hoverSlot} />
-            ) : null}
-          </Box>
+          {zoomIn.slot == null ? (
+            <Box width="20%">
+              {hoverSlot != null &&
+              breakPointSize !== 'small' &&
+              LEFT_SLOTS.includes(hoverSlot) ? (
+                <SlotDetailsContainer robotType={robotType} slot={hoverSlot} />
+              ) : null}
+            </Box>
+          ) : null}
           <RobotCoordinateSpaceWithRef
-            height={zoomIn.slot != null ? '100%' : '95%'}
-            width={
-              zoomIn.slot != null || tab === 'protocolSteps'
-                ? '100%'
-                : '33.125rem'
-            }
+            height="100%"
+            width={zoomIn.slot != null ? '100%' : '50%'}
             deckDef={deckDef}
             viewBox={viewBox}
             outline="auto"
             zoomed={zoomIn.slot != null}
+            borderRadius={BORDERS.borderRadius12}
           >
             {() => (
               <>
@@ -356,13 +354,15 @@ export function DeckSetupContainer(props: DeckSetupTabType): JSX.Element {
               </>
             )}
           </RobotCoordinateSpaceWithRef>
-          <Box width="20%">
-            {hoverSlot != null &&
-            breakPointSize !== 'small' &&
-            !LEFT_SLOTS.includes(hoverSlot) ? (
-              <SlotDetailsContainer robotType={robotType} slot={hoverSlot} />
-            ) : null}
-          </Box>
+          {zoomIn.slot == null ? (
+            <Box width="20%">
+              {hoverSlot != null &&
+              breakPointSize !== 'small' &&
+              !LEFT_SLOTS.includes(hoverSlot) ? (
+                <SlotDetailsContainer robotType={robotType} slot={hoverSlot} />
+              ) : null}
+            </Box>
+          ) : null}
         </Flex>
       </Flex>
       {zoomIn.slot != null && zoomIn.cutout != null ? (

diff --git a/protocol-designer/src/pages/Designer/DeckSetup/utils.ts b/protocol-designer/src/pages/Designer/DeckSetup/utils.ts
@@ -215,15 +215,15 @@ export function zoomInOnCoordinate(props: ZoomInOnCoordinateProps): string {
   const { x, y, deckDef } = props
   const [width, height] = [deckDef.dimensions[0], deckDef.dimensions[1]]
 
-  const zoomFactor = 0.6
+  const zoomFactor = 0.55
   const newWidth = width * zoomFactor
   const newHeight = height * zoomFactor
 
   //  +125 and +50 to get the approximate center of the screen point
-  const newMinX = x - newWidth / 2 + 125
+  const newMinX = x - newWidth / 2 + 20
   const newMinY = y - newHeight / 2 + 50
 
-  return `${newMinX} ${newMinY} ${newWidth} ${newHeight}`
+  return `${newMinX} ${newMinY} ${newWidth} ${newHeight + 70}`
 }
 
 export interface AnimateZoomProps {

diff --git a/protocol-designer/src/pages/Designer/index.tsx b/protocol-designer/src/pages/Designer/index.tsx
@@ -161,10 +161,15 @@ export function Designer(): JSX.Element {
           <Flex
             flexDirection={DIRECTION_COLUMN}
             backgroundColor={COLORS.grey10}
+            gridGap={SPACING.spacing24}
             padding={zoomIn.slot != null ? '0' : SPACING.spacing40}
             height="calc(100vh - 64px)"
           >
-            <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing24}>
+            <Flex
+              flexDirection={DIRECTION_COLUMN}
+              gridGap={SPACING.spacing24}
+              height="100%"
+            >
               {zoomIn.slot == null ? (
                 <Flex alignSelf={ALIGN_END}>
                   <ToggleGroup