fix(protocol-designer): fix deck view size issue in new pd

fix deck view size issue in new pd close RQA- RQA-
Opentrons · Oct 28, 2024 · f02c187 · f02c187
1 parent 1c1a3c0
commit f02c187
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 16 deletions.
diff --git a/components/src/hardware-sim/RobotCoordinateSpace/RobotCoordinateSpaceWithRef.tsx b/components/src/hardware-sim/RobotCoordinateSpace/RobotCoordinateSpaceWithRef.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react'
-import { Svg } from '../../primitives'
+import { css } from 'styled-components'
+import { Flex, Svg } from '../../primitives'
 import type { DeckDefinition, DeckSlot } from '@opentrons/shared-data'
 
 export interface RobotCoordinateSpaceWithRefRenderProps {
@@ -10,13 +11,14 @@ interface RobotCoordinateSpaceWithRefProps
   extends React.ComponentProps<typeof Svg> {
   viewBox?: string | null
   deckDef?: DeckDefinition
+  zoomed: boolean
   children?: (props: RobotCoordinateSpaceWithRefRenderProps) => React.ReactNode
 }
 
 export function RobotCoordinateSpaceWithRef(
   props: RobotCoordinateSpaceWithRefProps
 ): JSX.Element | null {
-  const { children, deckDef, viewBox, ...restProps } = props
+  const { children, deckDef, viewBox, zoomed, ...restProps } = props
   const wrapperRef = React.useRef<SVGSVGElement>(null)
 
   if (deckDef == null && viewBox == null) return null
@@ -31,16 +33,43 @@ export function RobotCoordinateSpaceWithRef(
       (acc, deckSlot) => ({ ...acc, [deckSlot.id]: deckSlot }),
       {}
     )
-    wholeDeckViewBox = `${viewBoxOriginX} ${viewBoxOriginY} ${deckXDimension} ${deckYDimension}`
+
+    wholeDeckViewBox = `${viewBoxOriginX} ${-deckYDimension} ${deckXDimension} ${deckYDimension}`
+
+    // wholeDeckViewBox = `${viewBoxOriginX} ${viewBoxOriginY} ${deckXDimension} ${deckYDimension}`
+    // Add padding to prevent clipping and better center the content
+    const padding = 20
+    wholeDeckViewBox = `${viewBoxOriginX - padding} ${
+      viewBoxOriginY - padding
+    } ${deckXDimension + padding * 2} ${deckYDimension + padding * 2}`
+    // Invert Y-axis by setting min-y to negative of deckYDimension
   }
+  console.log('wholeDeckViewBox', wholeDeckViewBox)
+  console.log('viewBox', viewBox)
+  console.log(viewBox || wholeDeckViewBox)
   return (
-    <Svg
-      viewBox={viewBox || wholeDeckViewBox}
-      ref={wrapperRef}
-      transform="scale(1, -1)"
-      {...restProps}
+    <Flex
+      width="100%"
+      height="100%"
+      alignItems="center"
+      justifyContent="center"
+      css={css`
+        outline: purple solid 1px;
+      `}
     >
-      {children?.({ deckSlotsById })}
-    </Svg>
+      <Svg
+        viewBox={zoomed ? viewBox : wholeDeckViewBox}
+        ref={wrapperRef}
+        transform="scale(1, -1)"
+        width="100%"
+        height="100%"
+        css={css`
+          outline: red solid 1px;
+        `}
+        {...restProps}
+      >
+        {children?.({ deckSlotsById })}
+      </Svg>
+    </Flex>
   )
 }
diff --git a/protocol-designer/src/organisms/SlotDetailsContainer/index.tsx b/protocol-designer/src/organisms/SlotDetailsContainer/index.tsx
@@ -105,7 +105,7 @@ export function SlotDetailsContainer(
   return location.pathname === '/designer' && slot !== 'offDeck' ? (
     <RobotCoordsForeignObject
       width="15.8125rem"
-      height="26.75rem"
+      height="32.3125rem"
       x="-400"
       y={getYPosition({ robotType, slot })}
     >

diff --git a/protocol-designer/src/pages/Designer/DeckSetup/DeckSetupContainer.tsx b/protocol-designer/src/pages/Designer/DeckSetup/DeckSetupContainer.tsx
@@ -1,5 +1,6 @@
 import { useMemo, useState, Fragment } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
+import { css } from 'styled-components'
 import {
   ALIGN_CENTER,
   BORDERS,
@@ -176,9 +177,12 @@ export function DeckSetupContainer(props: DeckSetupTabType): JSX.Element {
         backgroundColor={COLORS.white}
         borderRadius={BORDERS.borderRadius12}
         width="100%"
-        height={zoomIn.slot != null ? '75vh' : '65vh'}
+        height={zoomIn.slot != null ? '75vh' : '70vh'}
         flexDirection={DIRECTION_COLUMN}
         padding={SPACING.spacing40}
+        css={css`
+          outline: green solid 1px;
+        `}
       >
         <Flex
           width="100%"
@@ -187,11 +191,12 @@ export function DeckSetupContainer(props: DeckSetupTabType): JSX.Element {
           justifyContent={JUSTIFY_CENTER}
         >
           <RobotCoordinateSpaceWithRef
-            height={zoomIn.slot != null ? '100%' : '80%'}
+            height={zoomIn.slot != null ? '100%' : '95%'}
             width="100%"
             deckDef={deckDef}
             viewBox={viewBox}
             outline="auto"
+            zoomed={zoomIn.slot != null}
           >
             {() => (
               <>

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

diff --git a/protocol-designer/src/pages/ProtocolOverview/DeckThumbnail.tsx b/protocol-designer/src/pages/ProtocolOverview/DeckThumbnail.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react'
 import { useSelector } from 'react-redux'
+import { css } from 'styled-components'
 import {
   ALIGN_CENTER,
   BORDERS,
@@ -11,6 +12,7 @@ import {
   RobotCoordinateSpaceWithRef,
   SingleSlotFixture,
   SlotLabels,
+  SPACING,
   StagingAreaFixture,
   WasteChuteFixture,
   WasteChuteStagingAreaFixture,
@@ -99,11 +101,17 @@ export function DeckThumbnail(props: DeckThumbnailProps): JSX.Element {
       width="100%"
       alignItems={ALIGN_CENTER}
       justifyContent={JUSTIFY_CENTER}
-      backgroundColor={COLORS.grey10}
+      backgroundColor={
+        robotType === OT2_ROBOT_TYPE ? COLORS.white : COLORS.grey10
+      }
       borderRadius={BORDERS.borderRadius8}
+      paddingY={SPACING.spacing24}
+      css={css`
+        outline: green solid 1px;
+      `}
     >
       <RobotCoordinateSpaceWithRef
-        height="80%"
+        height="100%"
         width="100%"
         deckDef={deckDef}
         viewBox={`${deckDef.cornerOffsetFromOrigin[0]} ${