address Mel's feedback

Opentrons · Oct 31, 2024 · 1a70dd6 · 1a70dd6
1 parent 5c66661
commit 1a70dd6
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 38 deletions.
diff --git a/components/src/hardware-sim/RobotCoordinateSpace/RobotCoordinateSpaceWithRef.tsx b/components/src/hardware-sim/RobotCoordinateSpace/RobotCoordinateSpaceWithRef.tsx
@@ -1,5 +1,7 @@
-import * as React from 'react'
+import { useRef } from 'react'
 import { Svg } from '../../primitives'
+
+import type { ReactNode } from 'react'
 import type { DeckDefinition, DeckSlot } from '@opentrons/shared-data'
 
 export interface RobotCoordinateSpaceWithRefRenderProps {
@@ -11,14 +13,14 @@ interface RobotCoordinateSpaceWithRefProps
   viewBox?: string | null
   deckDef?: DeckDefinition
   zoomed?: boolean
-  children?: (props: RobotCoordinateSpaceWithRefRenderProps) => React.ReactNode
+  children?: (props: RobotCoordinateSpaceWithRefRenderProps) => ReactNode
 }
 
 export function RobotCoordinateSpaceWithRef(
   props: RobotCoordinateSpaceWithRefProps
 ): JSX.Element | null {
   const { children, deckDef, viewBox, zoomed = false, ...restProps } = props
-  const wrapperRef = React.useRef<SVGSVGElement>(null)
+  const wrapperRef = useRef<SVGSVGElement>(null)
 
   if (deckDef == null && viewBox == null) return null
 
@@ -33,11 +35,17 @@ export function RobotCoordinateSpaceWithRef(
       {}
     )
 
-    // Add padding to prevent clipping and better center the content
-    const PADDING = deckDef.otId === 'ot2_standard' ? 5 : 20
-    wholeDeckViewBox = `${viewBoxOriginX - PADDING} ${
-      viewBoxOriginY + PADDING
-    } ${deckXDimension + PADDING * 2} ${deckYDimension + PADDING * 2}`
+    if (deckDef.otId === 'ot2_standard') {
+      const PADDING = 5
+      wholeDeckViewBox = `${viewBoxOriginX - PADDING} ${
+        viewBoxOriginY + PADDING * 5
+      } ${deckXDimension + PADDING * 2} ${deckYDimension - PADDING * 10}`
+    } else {
+      const PADDING = 20
+      wholeDeckViewBox = `${viewBoxOriginX - PADDING} ${
+        viewBoxOriginY + PADDING
+      } ${deckXDimension + PADDING * 2} ${deckYDimension + PADDING * 2}`
+    }
   }
   return (
     <Svg

diff --git a/protocol-designer/src/organisms/SlotDetailsContainer/__tests__/utils.test.ts b/protocol-designer/src/organisms/SlotDetailsContainer/__tests__/utils.test.ts
@@ -16,7 +16,7 @@ describe('getXPosition', () => {
   })
 
   it('should return the right position for OT2 robot type and slot 6', () => {
-    expect(getXPosition('6', OT2_ROBOT_TYPE, false)).toBe('500')
+    expect(getXPosition('6', OT2_ROBOT_TYPE, false)).toBe('420')
   })
 
   it('should return the left position for OT2 robot type and slot 2', () => {

diff --git a/protocol-designer/src/organisms/SlotDetailsContainer/utils.ts b/protocol-designer/src/organisms/SlotDetailsContainer/utils.ts
@@ -65,7 +65,7 @@ export const getXPosition = (
       regex: /[34]/,
     },
     OT2: {
-      right: '500',
+      right: '420',
       left: '-300',
       regex: /[369]/,
     },

diff --git a/protocol-designer/src/pages/Designer/LiquidsOverflowMenu.tsx b/protocol-designer/src/pages/Designer/LiquidsOverflowMenu.tsx
@@ -1,5 +1,4 @@
-import type * as React from 'react'
-import styled from 'styled-components'
+import { css } from 'styled-components'
 import { useTranslation } from 'react-i18next'
 import { useDispatch, useSelector } from 'react-redux'
 import { useLocation } from 'react-router-dom'
@@ -8,12 +7,12 @@ import {
   BORDERS,
   Box,
   COLORS,
-  CURSOR_AUTO,
   CURSOR_POINTER,
   DIRECTION_COLUMN,
   Flex,
   Icon,
   LiquidIcon,
+  MenuItem,
   POSITION_ABSOLUTE,
   SPACING,
   StyledText,
@@ -22,6 +21,8 @@ import {
 import { LINE_CLAMP_TEXT_STYLE } from '../../atoms'
 import { selectors as labwareIngredSelectors } from '../../labware-ingred/selectors'
 import * as labwareIngredActions from '../../labware-ingred/actions'
+
+import type { MouseEvent } from 'react'
 import type { ThunkDispatch } from '../../types'
 
 const NAV_HEIGHT = '64px'
@@ -52,22 +53,25 @@ export function LiquidsOverflowMenu(
       boxShadow="0px 1px 3px rgba(0, 0, 0, 0.2)"
       backgroundColor={COLORS.white}
       flexDirection={DIRECTION_COLUMN}
-      onClick={(e: React.MouseEvent) => {
+      onClick={(e: MouseEvent) => {
         e.preventDefault()
         e.stopPropagation()
       }}
       width="9.375rem"
     >
       {liquids.map(({ name, displayColor, ingredientId }) => {
         return (
-          <MenuButton
+          <MenuItem
             data-testid={`${name}_${ingredientId}`}
             onClick={() => {
               onClose()
               showLiquidsModal()
               dispatch(labwareIngredActions.selectLiquidGroup(ingredientId))
             }}
             key={ingredientId}
+            css={css`
+              cursor: ${CURSOR_POINTER};
+            `}
           >
             <Flex alignItems={ALIGN_CENTER} gridGap={SPACING.spacing8}>
               <LiquidIcon color={displayColor ?? ''} />
@@ -81,42 +85,31 @@ export function LiquidsOverflowMenu(
                 {name}
               </StyledText>
             </Flex>
-          </MenuButton>
+          </MenuItem>
         )
       })}
       {liquids.length > 0 ? (
         <Box width="100%" border={`1px solid ${COLORS.grey20}`} />
       ) : null}
-      <MenuButton
+      <MenuItem
         data-testid="defineLiquid"
         onClick={() => {
           onClose()
           showLiquidsModal()
           dispatch(labwareIngredActions.createNewLiquidGroup())
         }}
         key="defineLiquid"
+        css={css`
+          cursor: ${CURSOR_POINTER};
+        `}
       >
         <Flex alignItems={ALIGN_CENTER} gridGap={SPACING.spacing8}>
           <Icon name="plus" size="1rem" />
           <StyledText desktopStyle="bodyDefaultRegular">
             {t('define_liquid')}
           </StyledText>
         </Flex>
-      </MenuButton>
+      </MenuItem>
     </Flex>
   )
 }
-const MenuButton = styled.button`
-  background-color: ${COLORS.transparent};
-  cursor: ${CURSOR_POINTER};
-  padding: ${SPACING.spacing8} ${SPACING.spacing12};
-  border: none;
-  border-radius: inherit;
-  &:hover {
-    background-color: ${COLORS.blue10};
-  }
-  &:disabled {
-    color: ${COLORS.grey40};
-    cursor: ${CURSOR_AUTO};
-  }
-`
diff --git a/protocol-designer/src/pages/ProtocolOverview/DeckThumbnail.tsx b/protocol-designer/src/pages/ProtocolOverview/DeckThumbnail.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { Fragment, useMemo } from 'react'
 import { useSelector } from 'react-redux'
 import {
   ALIGN_CENTER,
@@ -17,6 +17,7 @@ import {
   WasteChuteStagingAreaFixture,
 } from '@opentrons/components'
 import {
+  FLEX_ROBOT_TYPE,
   getCutoutIdForAddressableArea,
   getDeckDefFromRobotType,
   isAddressableAreaStandardSlot,
@@ -28,6 +29,8 @@ import {
 import { getRobotType } from '../../file-data/selectors'
 import { getInitialDeckSetup } from '../../step-forms/selectors'
 import { DeckThumbnailDetails } from './DeckThumbnailDetails'
+
+import type { Dispatch, SetStateAction } from 'react'
 import type { StagingAreaLocation, TrashCutoutId } from '@opentrons/components'
 import type { CutoutId, DeckSlotId } from '@opentrons/shared-data'
 import type { AdditionalEquipmentEntity } from '@opentrons/step-generation'
@@ -48,13 +51,13 @@ const lightFill = COLORS.grey35
 
 interface DeckThumbnailProps {
   hoverSlot: DeckSlotId | null
-  setHoverSlot: React.Dispatch<React.SetStateAction<string | null>>
+  setHoverSlot: Dispatch<SetStateAction<string | null>>
 }
 export function DeckThumbnail(props: DeckThumbnailProps): JSX.Element {
   const { hoverSlot, setHoverSlot } = props
   const initialDeckSetup = useSelector(getInitialDeckSetup)
   const robotType = useSelector(getRobotType)
-  const deckDef = React.useMemo(() => getDeckDefFromRobotType(robotType), [])
+  const deckDef = useMemo(() => getDeckDefFromRobotType(robotType), [])
   const trash = Object.values(initialDeckSetup.additionalEquipmentOnDeck).find(
     ae => ae.name === 'trashBin'
   )
@@ -103,8 +106,8 @@ export function DeckThumbnail(props: DeckThumbnailProps): JSX.Element {
       backgroundColor={
         robotType === OT2_ROBOT_TYPE ? COLORS.white : COLORS.grey10
       }
+      paddingY={robotType === FLEX_ROBOT_TYPE && SPACING.spacing24}
       borderRadius={BORDERS.borderRadius8}
-      paddingY={SPACING.spacing24}
     >
       <RobotCoordinateSpaceWithRef
         height="100%"
@@ -151,7 +154,7 @@ export function DeckThumbnail(props: DeckThumbnailProps): JSX.Element {
                 {trash != null
                   ? trashBinFixtures.map(({ cutoutId }) =>
                       cutoutId != null ? (
-                        <React.Fragment key={cutoutId}>
+                        <Fragment key={cutoutId}>
                           <SingleSlotFixture
                             cutoutId={cutoutId}
                             deckDefinition={deckDef}
@@ -164,7 +167,7 @@ export function DeckThumbnail(props: DeckThumbnailProps): JSX.Element {
                             trashCutoutId={cutoutId as TrashCutoutId}
                             backgroundColor={COLORS.grey50}
                           />
-                        </React.Fragment>
+                        </Fragment>
                       ) : null
                     )
                   : null}