From 1a70dd6bfccef39382a38c593119fa6f0ad325c2 Mon Sep 17 00:00:00 2001 From: koji Date: Thu, 31 Oct 2024 13:54:50 -0400 Subject: [PATCH] address Mel's feedback --- .../RobotCoordinateSpaceWithRef.tsx | 24 ++++++++---- .../__tests__/utils.test.ts | 2 +- .../organisms/SlotDetailsContainer/utils.ts | 2 +- .../pages/Designer/LiquidsOverflowMenu.tsx | 37 ++++++++----------- .../pages/ProtocolOverview/DeckThumbnail.tsx | 15 +++++--- 5 files changed, 42 insertions(+), 38 deletions(-) diff --git a/components/src/hardware-sim/RobotCoordinateSpace/RobotCoordinateSpaceWithRef.tsx b/components/src/hardware-sim/RobotCoordinateSpace/RobotCoordinateSpaceWithRef.tsx index 77c99c74436..530ed004532 100644 --- 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(null) + const wrapperRef = useRef(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 ( { }) 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 index ba66302dea4..0471ab1685e 100644 --- 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 index 7f0c6dc2e88..2e0b6a8a02f 100644 --- 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,7 +53,7 @@ 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() }} @@ -60,7 +61,7 @@ export function LiquidsOverflowMenu( > {liquids.map(({ name, displayColor, ingredientId }) => { return ( - { onClose() @@ -68,6 +69,9 @@ export function LiquidsOverflowMenu( dispatch(labwareIngredActions.selectLiquidGroup(ingredientId)) }} key={ingredientId} + css={css` + cursor: ${CURSOR_POINTER}; + `} > @@ -81,13 +85,13 @@ export function LiquidsOverflowMenu( {name} - + ) })} {liquids.length > 0 ? ( ) : null} - { onClose() @@ -95,6 +99,9 @@ export function LiquidsOverflowMenu( dispatch(labwareIngredActions.createNewLiquidGroup()) }} key="defineLiquid" + css={css` + cursor: ${CURSOR_POINTER}; + `} > @@ -102,21 +109,7 @@ export function LiquidsOverflowMenu( {t('define_liquid')} - + ) } -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 index b4f38d67ad4..6420d45557a 100644 --- 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> + setHoverSlot: Dispatch> } 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} > cutoutId != null ? ( - + - + ) : null ) : null}