From e37b61f017b55412649d2d275e1e38ec7c19de6e Mon Sep 17 00:00:00 2001 From: koji Date: Tue, 4 Feb 2025 10:32:48 -0500 Subject: [PATCH] fix(protocol-designer, components) fix deck view size issue (#17394) * fix(protocol-designer, components) fix deck view size issue --- .../src/atoms/buttons/EmptySelectorButton.tsx | 5 +- protocol-designer/src/ProtocolEditor.tsx | 2 +- protocol-designer/src/ProtocolRoutes.tsx | 2 +- .../Designer/DeckSetup/DeckSetupContainer.tsx | 295 ++++++++++-------- .../HighlightOffdeckSlot.tsx | 0 .../{Offdeck => OffDeck}/OffDeckDetails.tsx | 79 +++-- .../__tests__/OffDeck.test.tsx} | 2 +- .../__tests__/OffDeckDetails.test.tsx | 0 .../Offdeck.tsx => OffDeck/index.tsx} | 0 .../src/pages/Designer/Offdeck/index.ts | 1 - .../ProtocolSteps/DraggableSidebar.tsx | 2 +- .../Designer/ProtocolSteps/StepSummary.tsx | 7 +- .../__tests__/ProtocolSteps.test.tsx | 4 +- .../pages/Designer/ProtocolSteps/index.tsx | 37 ++- .../Designer/__tests__/Designer.test.tsx | 1 + .../src/pages/Designer/index.tsx | 34 +- 16 files changed, 268 insertions(+), 203 deletions(-) rename protocol-designer/src/pages/Designer/{Offdeck => OffDeck}/HighlightOffdeckSlot.tsx (100%) rename protocol-designer/src/pages/Designer/{Offdeck => OffDeck}/OffDeckDetails.tsx (84%) rename protocol-designer/src/pages/Designer/{Offdeck/__tests__/Offdeck.test.tsx => OffDeck/__tests__/OffDeck.test.tsx} (97%) rename protocol-designer/src/pages/Designer/{Offdeck => OffDeck}/__tests__/OffDeckDetails.test.tsx (100%) rename protocol-designer/src/pages/Designer/{Offdeck/Offdeck.tsx => OffDeck/index.tsx} (100%) delete mode 100644 protocol-designer/src/pages/Designer/Offdeck/index.ts diff --git a/components/src/atoms/buttons/EmptySelectorButton.tsx b/components/src/atoms/buttons/EmptySelectorButton.tsx index da34a8ba710..119ff041ba9 100644 --- a/components/src/atoms/buttons/EmptySelectorButton.tsx +++ b/components/src/atoms/buttons/EmptySelectorButton.tsx @@ -4,7 +4,6 @@ import { ALIGN_CENTER, CURSOR_DEFAULT, CURSOR_POINTER, - FLEX_MAX_CONTENT, Icon, JUSTIFY_CENTER, JUSTIFY_START, @@ -62,8 +61,8 @@ interface ButtonProps { const StyledButton = styled.button` border: none; - width: ${FLEX_MAX_CONTENT}; - height: ${FLEX_MAX_CONTENT}; + width: 100%; + height: 100%; cursor: ${CURSOR_POINTER}; background-color: ${COLORS.blue30}; border-radius: ${BORDERS.borderRadius8}; diff --git a/protocol-designer/src/ProtocolEditor.tsx b/protocol-designer/src/ProtocolEditor.tsx index ec0a130abd5..770e3ee0a42 100644 --- a/protocol-designer/src/ProtocolEditor.tsx +++ b/protocol-designer/src/ProtocolEditor.tsx @@ -38,7 +38,7 @@ export function ProtocolEditor(): JSX.Element { id="protocol-editor" > - + diff --git a/protocol-designer/src/ProtocolRoutes.tsx b/protocol-designer/src/ProtocolRoutes.tsx index 854eacfa993..63c31842bbe 100644 --- a/protocol-designer/src/ProtocolRoutes.tsx +++ b/protocol-designer/src/ProtocolRoutes.tsx @@ -73,7 +73,7 @@ export function ProtocolRoutes(): JSX.Element { > - + diff --git a/protocol-designer/src/pages/Designer/DeckSetup/DeckSetupContainer.tsx b/protocol-designer/src/pages/Designer/DeckSetup/DeckSetupContainer.tsx index 53874bb8dc0..c9c351aebb1 100644 --- a/protocol-designer/src/pages/Designer/DeckSetup/DeckSetupContainer.tsx +++ b/protocol-designer/src/pages/Designer/DeckSetup/DeckSetupContainer.tsx @@ -6,15 +6,15 @@ import { BORDERS, Box, COLORS, - DIRECTION_COLUMN, DeckFromLayers, + DIRECTION_COLUMN, Flex, FlexTrash, JUSTIFY_CENTER, RobotCoordinateSpaceWithRef, - SPACING, SingleSlotFixture, SlotLabels, + SPACING, StagingAreaFixture, WasteChuteFixture, WasteChuteStagingAreaFixture, @@ -59,6 +59,9 @@ import type { Fixture } from './constants' const WASTE_CHUTE_SPACE = 30 const DETAILS_HOVER_SPACE = 60 +// Note (02/02/25:kk) the size is different from the design but the product team requested keep the current size +const STARTING_DECK_VIEW_MIN_WIDTH = '75%' + const OT2_STANDARD_DECK_VIEW_LAYER_BLOCK_LIST: string[] = [ 'calibrationMarkings', 'fixedBase', @@ -213,15 +216,24 @@ export function DeckSetupContainer(props: DeckSetupTabType): JSX.Element { aa => isAddressableAreaStandardSlot(aa.id, deckDef) ) + let containerPadding = '0' + if (!isZoomed) { + if (tab === 'startingDeck') { + containerPadding = SPACING.spacing40 + } else { + containerPadding = SPACING.spacing60 + } + } + return ( - + <> - {zoomIn.slot == null ? ( + {zoomIn.slot == null && tab === 'startingDeck' ? ( {hoverSlot != null && breakPointSize !== 'small' && @@ -239,144 +251,153 @@ export function DeckSetupContainer(props: DeckSetupTabType): JSX.Element { ) : null} ) : null} - - {() => ( - <> - {robotType === OT2_ROBOT_TYPE ? ( - - ) : ( - <> - {filteredAddressableAreas.map(addressableArea => { - const cutoutId = getCutoutIdForAddressableArea( - addressableArea.id, - deckDef.cutoutFixtures - ) - return cutoutId != null ? ( - - ) : null - })} - {stagingAreaFixtures.map(fixture => { - if ( - zoomIn.cutout == null || - zoomIn.cutout !== fixture.location - ) { - return ( - - ) - } - })} - {trash != null - ? trashBinFixtures.map(({ cutoutId }) => - cutoutId != null && - (zoomIn.cutout == null || - zoomIn.cutout !== cutoutId) ? ( - - - - - ) : null + + {() => ( + <> + {robotType === OT2_ROBOT_TYPE ? ( + + ) : ( + <> + {filteredAddressableAreas.map(addressableArea => { + const cutoutId = getCutoutIdForAddressableArea( + addressableArea.id, + deckDef.cutoutFixtures ) - : null} - {wasteChuteFixtures.map(fixture => { - if ( - zoomIn.cutout == null || - zoomIn.cutout !== fixture.location - ) { - return ( - - ) - } - })} - {wasteChuteStagingAreaFixtures.map(fixture => { - if ( - zoomIn.cutout == null || - zoomIn.cutout !== fixture.location - ) { - return ( - - ) - } - })} - - )} - areas.location as CutoutId + ) : null + })} + {stagingAreaFixtures.map(fixture => { + if ( + zoomIn.cutout == null || + zoomIn.cutout !== fixture.location + ) { + return ( + + ) + } + })} + {trash != null + ? trashBinFixtures.map(({ cutoutId }) => + cutoutId != null && + (zoomIn.cutout == null || + zoomIn.cutout !== cutoutId) ? ( + + + + + ) : null + ) + : null} + {wasteChuteFixtures.map(fixture => { + if ( + zoomIn.cutout == null || + zoomIn.cutout !== fixture.location + ) { + return ( + + ) + } + })} + {wasteChuteStagingAreaFixtures.map(fixture => { + if ( + zoomIn.cutout == null || + zoomIn.cutout !== fixture.location + ) { + return ( + + ) + } + })} + )} - {...{ - deckDef, - showGen1MultichannelCollisionWarnings, - }} - /> - 0} - /> - - )} - - {zoomIn.slot == null ? ( + areas.location as CutoutId + )} + {...{ + deckDef, + showGen1MultichannelCollisionWarnings, + }} + /> + 0} + /> + + )} + + + {zoomIn.slot == null && tab === 'startingDeck' ? ( {hoverSlot != null && breakPointSize !== 'small' && @@ -404,6 +425,6 @@ export function DeckSetupContainer(props: DeckSetupTabType): JSX.Element { setHoveredLabware={setHoveredLabware} /> ) : null} - + ) } diff --git a/protocol-designer/src/pages/Designer/Offdeck/HighlightOffdeckSlot.tsx b/protocol-designer/src/pages/Designer/OffDeck/HighlightOffdeckSlot.tsx similarity index 100% rename from protocol-designer/src/pages/Designer/Offdeck/HighlightOffdeckSlot.tsx rename to protocol-designer/src/pages/Designer/OffDeck/HighlightOffdeckSlot.tsx diff --git a/protocol-designer/src/pages/Designer/Offdeck/OffDeckDetails.tsx b/protocol-designer/src/pages/Designer/OffDeck/OffDeckDetails.tsx similarity index 84% rename from protocol-designer/src/pages/Designer/Offdeck/OffDeckDetails.tsx rename to protocol-designer/src/pages/Designer/OffDeck/OffDeckDetails.tsx index 5f219e8ecd1..b062915271c 100644 --- a/protocol-designer/src/pages/Designer/Offdeck/OffDeckDetails.tsx +++ b/protocol-designer/src/pages/Designer/OffDeck/OffDeckDetails.tsx @@ -1,9 +1,12 @@ import { useState } from 'react' import { useTranslation } from 'react-i18next' import { useSelector } from 'react-redux' +import styled from 'styled-components' import { ALIGN_CENTER, + ALIGN_START, BORDERS, + Box, COLORS, DIRECTION_COLUMN, EmptySelectorButton, @@ -14,7 +17,6 @@ import { RobotWorkSpace, SPACING, StyledText, - WRAP, } from '@opentrons/components' import * as wellContentsSelectors from '../../../top-selectors/well-contents' import { selectors } from '../../../labware-ingred/selectors' @@ -32,7 +34,9 @@ import { HighlightOffdeckSlot } from './HighlightOffdeckSlot' import type { CoordinateTuple, DeckSlotId } from '@opentrons/shared-data' import type { DeckSetupTabType } from '../types' -const OFFDECK_MAP_WIDTH = '41.625rem' +const OFF_DECK_MAP_WIDTH = '41.625rem' +const OFF_DECK_MAP_HEIGHT = '45.5rem' +const OFF_DECK_MAP_HEIGHT_FOR_STEP = '31.4rem' const ZERO_SLOT_POSITION: CoordinateTuple = [0, 0, 0] interface OffDeckDetailsProps extends DeckSetupTabType { addLabware: () => void @@ -53,27 +57,29 @@ export function OffDeckDetails(props: OffDeckDetailsProps): JSX.Element { const allWellContentsForActiveItem = useSelector( wellContentsSelectors.getAllWellContentsForActiveItem ) - const containerWidth = tab === 'startingDeck' ? '100vw' : '75vh' + const containerWidth = tab === 'startingDeck' ? '100vw' : '75vw' + const paddingLeftWithHover = hoverSlot == null - ? `calc((${containerWidth} - (${SPACING.spacing24} * 2) - ${OFFDECK_MAP_WIDTH}) / 2)` + ? `calc((${containerWidth} - (${SPACING.spacing24} * 2) - ${OFF_DECK_MAP_WIDTH}) / 2)` : SPACING.spacing24 const paddingLeft = tab === 'startingDeck' ? paddingLeftWithHover : undefined const padding = tab === 'protocolSteps' ? SPACING.spacing24 - : `${SPACING.spacing24} ${paddingLeft}` - const stepDetailsContainerWidth = `calc(((${containerWidth} - ${OFFDECK_MAP_WIDTH}) / 2) - (${SPACING.spacing24} * 3))` + : `${SPACING.spacing40} ${paddingLeft}` + const stepDetailsContainerWidth = `calc(((${containerWidth} - ${OFF_DECK_MAP_WIDTH}) / 2) - (${SPACING.spacing24} * 3))` return ( {hoverSlot != null ? ( @@ -85,27 +91,41 @@ export function OffDeckDetails(props: OffDeckDetailsProps): JSX.Element { ) : null} {i18n.format(t('off_deck_labware'), 'upperCase')} - - + + {tab === 'startingDeck' ? ( + + + + ) : null} {offDeckLabware.map(lw => { const wellContents = allWellContentsForActiveItem ? allWellContentsForActiveItem[lw.id] @@ -123,13 +143,11 @@ export function OffDeckDetails(props: OffDeckDetailsProps): JSX.Element { const highlighted = hoveredDropdownItem.id === lw.id return ( ) })} - - - {tab === 'startingDeck' ? ( - - - - ) : null} - + ) } + +const LabwareWrapper = styled(Box)` + display: grid; + grid-template-columns: repeat(auto-fill, minmax(9.5625rem, 1fr)); + row-gap: ${SPACING.spacing40}; + column-gap: ${SPACING.spacing32}; + justify-content: ${JUSTIFY_CENTER}; /* Center the grid within the container */ + align-items: ${ALIGN_START}; + width: 100%; + // Note(kk: 1/30/2025) this padding is to add space to the right edge and the left edge of the grid + // this is not a perfect solution, but it works for now + padding: 0 ${SPACING.spacing24}; +` diff --git a/protocol-designer/src/pages/Designer/Offdeck/__tests__/Offdeck.test.tsx b/protocol-designer/src/pages/Designer/OffDeck/__tests__/OffDeck.test.tsx similarity index 97% rename from protocol-designer/src/pages/Designer/Offdeck/__tests__/Offdeck.test.tsx rename to protocol-designer/src/pages/Designer/OffDeck/__tests__/OffDeck.test.tsx index 54edbf8e9ac..11bea47d9d0 100644 --- a/protocol-designer/src/pages/Designer/Offdeck/__tests__/Offdeck.test.tsx +++ b/protocol-designer/src/pages/Designer/OffDeck/__tests__/OffDeck.test.tsx @@ -5,7 +5,7 @@ import { selectors } from '../../../../labware-ingred/selectors' import { getCustomLabwareDefsByURI } from '../../../../labware-defs/selectors' import { renderWithProviders } from '../../../../__testing-utils__' import { OffDeckDetails } from '../OffDeckDetails' -import { OffDeck } from '../Offdeck' +import { OffDeck } from '..' import type * as Components from '@opentrons/components' vi.mock('../OffDeckDetails') diff --git a/protocol-designer/src/pages/Designer/Offdeck/__tests__/OffDeckDetails.test.tsx b/protocol-designer/src/pages/Designer/OffDeck/__tests__/OffDeckDetails.test.tsx similarity index 100% rename from protocol-designer/src/pages/Designer/Offdeck/__tests__/OffDeckDetails.test.tsx rename to protocol-designer/src/pages/Designer/OffDeck/__tests__/OffDeckDetails.test.tsx diff --git a/protocol-designer/src/pages/Designer/Offdeck/Offdeck.tsx b/protocol-designer/src/pages/Designer/OffDeck/index.tsx similarity index 100% rename from protocol-designer/src/pages/Designer/Offdeck/Offdeck.tsx rename to protocol-designer/src/pages/Designer/OffDeck/index.tsx diff --git a/protocol-designer/src/pages/Designer/Offdeck/index.ts b/protocol-designer/src/pages/Designer/Offdeck/index.ts deleted file mode 100644 index 0ca8caf1f01..00000000000 --- a/protocol-designer/src/pages/Designer/Offdeck/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './Offdeck' diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/DraggableSidebar.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/DraggableSidebar.tsx index 210abdec6ba..f1f66879c41 100644 --- a/protocol-designer/src/pages/Designer/ProtocolSteps/DraggableSidebar.tsx +++ b/protocol-designer/src/pages/Designer/ProtocolSteps/DraggableSidebar.tsx @@ -10,7 +10,7 @@ import { } from '@opentrons/components' import { TimelineToolbox } from './Timeline/TimelineToolbox' -const INITIAL_SIDEBAR_WIDTH = 276 +const INITIAL_SIDEBAR_WIDTH = 235 const MIN_SIDEBAR_WIDTH = 80 const MAX_SIDEBAR_WIDTH = 350 diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/StepSummary.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/StepSummary.tsx index 7077b1812be..1daf86148ee 100644 --- a/protocol-designer/src/pages/Designer/ProtocolSteps/StepSummary.tsx +++ b/protocol-designer/src/pages/Designer/ProtocolSteps/StepSummary.tsx @@ -40,11 +40,7 @@ function StyledTrans(props: StyledTransProps): JSX.Element { const { i18nKey, tagText, values } = props const { t } = useTranslation(['protocol_steps', 'application']) return ( - + {stepSummaryContent != null ? ( diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/__tests__/ProtocolSteps.test.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/__tests__/ProtocolSteps.test.tsx index 31c1c93eafc..d333baf288d 100644 --- a/protocol-designer/src/pages/Designer/ProtocolSteps/__tests__/ProtocolSteps.test.tsx +++ b/protocol-designer/src/pages/Designer/ProtocolSteps/__tests__/ProtocolSteps.test.tsx @@ -18,14 +18,14 @@ import { } from '../../../../file-data/selectors' import { getEnableHotKeysDisplay } from '../../../../feature-flags/selectors' import { DeckSetupContainer } from '../../DeckSetup' -import { OffDeck } from '../../Offdeck' +import { OffDeck } from '../../OffDeck' import { SubStepsToolbox } from '../Timeline' import { DraggableSidebar } from '../DraggableSidebar' import { ProtocolSteps } from '..' import type { SavedStepFormState } from '../../../../step-forms' -vi.mock('../../Offdeck') +vi.mock('../../OffDeck') vi.mock('../../../../step-forms/selectors') vi.mock('../../../../ui/steps/selectors') vi.mock('../../../../ui/labware/selectors') diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/index.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/index.tsx index e426affd60d..8ef8f52d8e8 100644 --- a/protocol-designer/src/pages/Designer/ProtocolSteps/index.tsx +++ b/protocol-designer/src/pages/Designer/ProtocolSteps/index.tsx @@ -31,7 +31,7 @@ import { getHoveredTerminalItemId, } from '../../../ui/steps/selectors' import { DeckSetupContainer } from '../DeckSetup' -import { OffDeck } from '../Offdeck' +import { OffDeck } from '../OffDeck' import { SubStepsToolbox } from './Timeline' import { StepForm } from './StepForm' import { StepSummary } from './StepSummary' @@ -43,7 +43,7 @@ import { import { TimelineAlerts } from '../../../organisms' import { DraggableSidebar } from './DraggableSidebar' -const CONTENT_MAX_WIDTH = '44.6704375rem' +const CONTENT_MAX_WIDTH = '46.9375rem' export function ProtocolSteps(): JSX.Element { const { i18n, t } = useTranslation('starting_deck_state') @@ -52,14 +52,15 @@ export function ProtocolSteps(): JSX.Element { const hoveredTerminalItem = useSelector(getHoveredTerminalItemId) const isMultiSelectMode = useSelector(getIsMultiSelectMode) const selectedSubstep = useSelector(getSelectedSubstep) - const enableHoyKeyDisplay = useSelector(getEnableHotKeysDisplay) + const enableHotKeyDisplay = useSelector(getEnableHotKeysDisplay) const tab = useSelector(getDesignerTab) const leftString = t('onDeck') const rightString = t('offDeck') const [deckView, setDeckView] = useState< typeof leftString | typeof rightString >(leftString) - const [targetWidth, setTargetWidth] = useState(350) + // Note (02/03/25:kk) use DrraggableSidebar's initial width + const [targetWidth, setTargetWidth] = useState(235) const currentHoveredStepId = useSelector(getHoveredStepId) const currentSelectedStepId = useSelector(getSelectedStepId) @@ -82,12 +83,11 @@ export function ProtocolSteps(): JSX.Element { - + {showTimelineAlerts ? ( )} - {formData == null ? ( + {/* avoid shifting the deck view container */} + - ) : null} + - {enableHoyKeyDisplay ? ( + {enableHotKeyDisplay ? ( ) : null} - + + + + {isMultiSelectMode ? : null} ) diff --git a/protocol-designer/src/pages/Designer/__tests__/Designer.test.tsx b/protocol-designer/src/pages/Designer/__tests__/Designer.test.tsx index d7a05a8efe0..9480ebc2d45 100644 --- a/protocol-designer/src/pages/Designer/__tests__/Designer.test.tsx +++ b/protocol-designer/src/pages/Designer/__tests__/Designer.test.tsx @@ -16,6 +16,7 @@ import type { NavigateFunction } from 'react-router-dom' const mockNavigate = vi.fn() +vi.mock('../OffDeck') vi.mock('../ProtocolSteps') vi.mock('../../../labware-ingred/actions') vi.mock('../../../labware-ingred/selectors') diff --git a/protocol-designer/src/pages/Designer/index.tsx b/protocol-designer/src/pages/Designer/index.tsx index 5e560fcf6e4..792d3f25f4f 100644 --- a/protocol-designer/src/pages/Designer/index.tsx +++ b/protocol-designer/src/pages/Designer/index.tsx @@ -3,12 +3,14 @@ import { useDispatch, useSelector } from 'react-redux' import { useTranslation } from 'react-i18next' import { useNavigate } from 'react-router-dom' import { - ALIGN_END, + ALIGN_CENTER, + ALIGN_STRETCH, COLORS, DIRECTION_COLUMN, - FLEX_MAX_CONTENT, Flex, INFO_TOAST, + JUSTIFY_CENTER, + JUSTIFY_FLEX_END, SPACING, ToggleGroup, useOnClickOutside, @@ -25,7 +27,7 @@ import { selectDesignerTab } from '../../file-data/actions' import { getDesignerTab, getFileMetadata } from '../../file-data/selectors' import { DeckSetupContainer } from './DeckSetup' import { selectors } from '../../labware-ingred/selectors' -import { OffDeck } from './Offdeck' +import { OffDeck } from './OffDeck' import { LiquidsOverflowMenu } from './LiquidsOverflowMenu' import { ProtocolSteps } from './ProtocolSteps' @@ -126,7 +128,14 @@ export function Designer(): JSX.Element { const deckViewItems = deckView === leftString ? ( - + + + ) : ( ) @@ -159,7 +168,7 @@ export function Designer(): JSX.Element { }} /> ) : null} - + {zoomIn.slot == null ? ( - +