fix(protocol-designer): fix the slot information cutoff issue

modify viewBox of deck view close RQA-3187
Opentrons · Sep 20, 2024 · 0b252f1 · 0b252f1
1 parent ce9ac0e
commit 0b252f1
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 8 deletions.
diff --git a/protocol-designer/src/pages/Designer/DeckSetup/DeckSetupContainer.tsx b/protocol-designer/src/pages/Designer/DeckSetup/DeckSetupContainer.tsx
@@ -10,6 +10,7 @@ import {
   FlexTrash,
   JUSTIFY_CENTER,
   RobotCoordinateSpaceWithRef,
+  SPACING,
   SingleSlotFixture,
   SlotLabels,
   StagingAreaFixture,
@@ -55,6 +56,7 @@ import type { DeckSetupTabType } from '../types'
 import type { Fixture } from './constants'
 
 const WASTE_CHUTE_SPACE = 30
+const DETAILS_HOVER_SPACE = 50
 const OT2_STANDARD_DECK_VIEW_LAYER_BLOCK_LIST: string[] = [
   'calibrationMarkings',
   'fixedBase',
@@ -100,11 +102,16 @@ export function DeckSetupContainer(props: DeckSetupTabType): JSX.Element {
   const hasWasteChute =
     wasteChuteFixtures.length > 0 || wasteChuteStagingAreaFixtures.length > 0
 
-  const initialViewBox = `${deckDef.cornerOffsetFromOrigin[0]} ${
-    hasWasteChute
-      ? deckDef.cornerOffsetFromOrigin[1] - WASTE_CHUTE_SPACE
-      : deckDef.cornerOffsetFromOrigin[1]
-  } ${deckDef.dimensions[0]} ${deckDef.dimensions[1]}`
+  const viewBoxX = deckDef.cornerOffsetFromOrigin[0]
+  const viewBoxY = hasWasteChute
+    ? deckDef.cornerOffsetFromOrigin[1] -
+      WASTE_CHUTE_SPACE -
+      DETAILS_HOVER_SPACE
+    : deckDef.cornerOffsetFromOrigin[1]
+  const viewBoxWidth = deckDef.dimensions[0]
+  const viewBoxHeight = deckDef.dimensions[1] + DETAILS_HOVER_SPACE
+
+  const initialViewBox = `${viewBoxX} ${viewBoxY} ${viewBoxWidth} ${viewBoxHeight}`
 
   const [viewBox, setViewBox] = React.useState<string>(initialViewBox)
   const [hoveredLabware, setHoveredLabware] = React.useState<string | null>(
@@ -176,10 +183,11 @@ export function DeckSetupContainer(props: DeckSetupTabType): JSX.Element {
     <>
       <Flex
         backgroundColor={COLORS.white}
-        borderRadius={BORDERS.borderRadius8}
+        borderRadius={BORDERS.borderRadius12}
         width="100%"
         height={zoomIn.slot != null ? '75vh' : '70vh'}
         flexDirection={DIRECTION_COLUMN}
+        padding={SPACING.spacing40}
       >
         {tab === 'protocolSteps' ? (
           <Flex justifyContent={JUSTIFY_CENTER}>
@@ -194,10 +202,11 @@ export function DeckSetupContainer(props: DeckSetupTabType): JSX.Element {
           justifyContent={JUSTIFY_CENTER}
         >
           <RobotCoordinateSpaceWithRef
-            height={zoomIn.slot != null ? '100%' : '70%'}
+            height={zoomIn.slot != null ? '100%' : '80%'}
             width="100%"
             deckDef={deckDef}
             viewBox={viewBox}
+            outline="auto"
           >
             {() => (
               <>

diff --git a/protocol-designer/src/pages/Designer/DeckSetup/DeckSetupDetails.tsx b/protocol-designer/src/pages/Designer/DeckSetup/DeckSetupDetails.tsx
@@ -60,7 +60,7 @@ interface DeckSetupDetailsProps extends DeckSetupTabType {
   selectedZoomInSlot?: DeckSlotId
 }
 
-export const DeckSetupDetails = (props: DeckSetupDetailsProps): JSX.Element => {
+export function DeckSetupDetails(props: DeckSetupDetailsProps): JSX.Element {
   const {
     activeDeckSetup,
     addEquipment,