From 2a32f9504143308a0ec41fa9bcd9682cef388a43 Mon Sep 17 00:00:00 2001 From: koji Date: Fri, 31 Jan 2025 10:21:30 -0500 Subject: [PATCH] fix(protocol-designer,components): fix deck view size issue fix deck view size issue close AUTH- --- .../src/atoms/buttons/EmptySelectorButton.tsx | 4 +- .../RobotCoordinateSpaceWithRef.tsx | 2 + protocol-designer/src/ProtocolEditor.tsx | 2 +- protocol-designer/src/ProtocolRoutes.tsx | 2 +- .../Designer/DeckSetup/DeckSetupContainer.tsx | 287 +++++++++--------- .../pages/Designer/Offdeck/OffDeckDetails.tsx | 99 ++++-- .../src/pages/Designer/Offdeck/Offdeck.tsx | 119 ++++---- .../Offdeck/__tests__/Offdeck.test.tsx | 2 +- .../src/pages/Designer/Offdeck/index.ts | 2 +- .../ProtocolSteps/DraggableSidebar.tsx | 2 +- .../pages/Designer/ProtocolSteps/index.tsx | 43 ++- .../src/pages/Designer/index.tsx | 28 +- 12 files changed, 358 insertions(+), 234 deletions(-) diff --git a/components/src/atoms/buttons/EmptySelectorButton.tsx b/components/src/atoms/buttons/EmptySelectorButton.tsx index da34a8ba710..ec3e3be0aa4 100644 --- a/components/src/atoms/buttons/EmptySelectorButton.tsx +++ b/components/src/atoms/buttons/EmptySelectorButton.tsx @@ -62,8 +62,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/components/src/hardware-sim/RobotCoordinateSpace/RobotCoordinateSpaceWithRef.tsx b/components/src/hardware-sim/RobotCoordinateSpace/RobotCoordinateSpaceWithRef.tsx index 659ccbbb350..44f055ab71e 100644 --- a/components/src/hardware-sim/RobotCoordinateSpace/RobotCoordinateSpaceWithRef.tsx +++ b/components/src/hardware-sim/RobotCoordinateSpace/RobotCoordinateSpaceWithRef.tsx @@ -36,6 +36,8 @@ export function RobotCoordinateSpaceWithRef( wholeDeckViewBox = `${viewBoxOriginX} ${viewBoxOriginY} ${deckXDimension} ${deckYDimension}` } + console.log('wholeDeckViewBox', wholeDeckViewBox) + return ( - + 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 c23be8dda36..9a43ee7232d 100644 --- a/protocol-designer/src/pages/Designer/DeckSetup/DeckSetupContainer.tsx +++ b/protocol-designer/src/pages/Designer/DeckSetup/DeckSetupContainer.tsx @@ -213,18 +213,24 @@ export function DeckSetupContainer(props: DeckSetupTabType): JSX.Element { aa => isAddressableAreaStandardSlot(aa.id, deckDef) ) + // console.log('ViewBox Adjusted:', viewBoxAdjusted) + // console.log('ViewBox Numerical:', viewBoxNumerical) + // console.log('Deck Map Ratio:', deckMapRatio) + // console.log('viewBox', viewBox) + return ( // <> {zoomIn.slot == null ? ( - + {hoverSlot != null && breakPointSize !== 'small' && LEFT_SLOTS.includes(hoverSlot) ? ( ) : 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 ( - + + + {() => ( + <> + {robotType === OT2_ROBOT_TYPE ? ( + + ) : ( + <> + {filteredAddressableAreas.map(addressableArea => { + const cutoutId = getCutoutIdForAddressableArea( + addressableArea.id, + deckDef.cutoutFixtures ) - } - })} - {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 ( - - ) - } - })} - - )} - 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} - /> - - )} - + areas.location as CutoutId + )} + {...{ + deckDef, + showGen1MultichannelCollisionWarnings, + }} + /> + 0} + /> + + )} + + {zoomIn.slot == null ? ( {hoverSlot != null && diff --git a/protocol-designer/src/pages/Designer/Offdeck/OffDeckDetails.tsx b/protocol-designer/src/pages/Designer/Offdeck/OffDeckDetails.tsx index 5f219e8ecd1..99191e50c62 100644 --- a/protocol-designer/src/pages/Designer/Offdeck/OffDeckDetails.tsx +++ b/protocol-designer/src/pages/Designer/Offdeck/OffDeckDetails.tsx @@ -1,14 +1,19 @@ import { useState } from 'react' import { useTranslation } from 'react-i18next' import { useSelector } from 'react-redux' +import styled from 'styled-components' import { ALIGN_CENTER, + ALIGN_START, + ALIGN_STRETCH, BORDERS, + Box, COLORS, DIRECTION_COLUMN, EmptySelectorButton, Flex, JUSTIFY_CENTER, + JUSTIFY_START, LabwareRender, OVERFLOW_AUTO, RobotWorkSpace, @@ -32,7 +37,8 @@ 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 ZERO_SLOT_POSITION: CoordinateTuple = [0, 0, 0] interface OffDeckDetailsProps extends DeckSetupTabType { addLabware: () => void @@ -53,27 +59,30 @@ export function OffDeckDetails(props: OffDeckDetailsProps): JSX.Element { const allWellContentsForActiveItem = useSelector( wellContentsSelectors.getAllWellContentsForActiveItem ) - const containerWidth = tab === 'startingDeck' ? '100vw' : '75vh' + const containerWidth = tab === 'startingDeck' ? '100vw' : '75vw' + console.log('containerWidth', containerWidth) 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 +94,54 @@ 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 +159,12 @@ export function OffDeckDetails(props: OffDeckDetailsProps): JSX.Element { const highlighted = hoveredDropdownItem.id === lw.id return ( - {tab === 'startingDeck' ? ( - + {/* {tab === 'startingDeck' ? ( + - ) : null} - + ) : null} */} + ) } + +// const LabwareWrapper = styled(Flex)` +// /* flex: 0 0 auto; */ +// flex-wrap: ${WRAP}; +// column-gap: ${SPACING.spacing32}; +// row-gap: ${SPACING.spacing40}; +// justify-content: ${JUSTIFY_CENTER}; +// align-items: ${ALIGN_STRETCH}; + +// & > :last-child { +// justify-content: ${JUSTIFY_START}; +// } +// ` + +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/Offdeck.tsx b/protocol-designer/src/pages/Designer/Offdeck/Offdeck.tsx index 7f3cb7deec1..4cc916413ef 100644 --- a/protocol-designer/src/pages/Designer/Offdeck/Offdeck.tsx +++ b/protocol-designer/src/pages/Designer/Offdeck/Offdeck.tsx @@ -27,6 +27,10 @@ import type { DeckSetupTabType } from '../types' const STANDARD_X_WIDTH = '127.76px' const STANDARD_Y_HEIGHT = '85.48px' +const VIEW_BOX = `-25 -32 182.5142857143 122.1142857143` +const OFF_DECK_CONTAINER_WIDTH = '39.4275rem' +const OFF_DECK_CONTAINER_HEIGHT = '32.125rem' +const SIZE_ADJUSTMENT = 0.7 export function OffDeck(props: DeckSetupTabType): JSX.Element { const { tab } = props @@ -47,30 +51,49 @@ export function OffDeck(props: DeckSetupTabType): JSX.Element { const offDeckLabware = selectedLabwareDefUri != null ? defs[selectedLabwareDefUri] ?? null : null + // let labware = ( + // + // {() => ( + // + // + // + // )} + // + // ) + let labware = ( - + {() => ( - - - + )} ) + + console.log(hoveredLabwareDef?.dimensions) + if (hoveredLabwareDef != null && hoveredLabwareDef !== offDeckLabware) { labware = ( {() => ( <> @@ -87,11 +110,13 @@ export function OffDeck(props: DeckSetupTabType): JSX.Element { ) } else if (offDeckLabware != null) { const def = offDeckLabware + + console.log('offDeckLabware', offDeckLabware) labware = ( {() => ( @@ -110,59 +135,47 @@ export function OffDeck(props: DeckSetupTabType): JSX.Element { ) } + console.log('selectedSlot', selectedSlot) + return ( {selectedSlot.slot === 'offDeck' ? ( - - - - {i18n.format(t('off_deck_labware'), 'upperCase')} - - - - {labware} - + + {i18n.format(t('off_deck_labware'), 'upperCase')} + + + {labware} - { - dispatch(selectZoomedIntoSlot({ slot: null, cutout: null })) - }} - /> + + { + dispatch(selectZoomedIntoSlot({ slot: null, cutout: null })) + }} + /> + ) : ( - + {showTimelineAlerts ? ( ) : null} - + {currentStep != null && hoveredTerminalItem == null ? ( {i18n.format(currentStep.stepName, 'capitalize')} @@ -137,7 +147,11 @@ export function ProtocolSteps(): JSX.Element { }} /> - + {deckView === leftString ? ( ) : ( @@ -151,7 +165,7 @@ export function ProtocolSteps(): JSX.Element { ) : null} - {enableHoyKeyDisplay ? ( + {enableHotKeyDisplay ? ( ) : null} - + + + + {isMultiSelectMode ? : null} ) diff --git a/protocol-designer/src/pages/Designer/index.tsx b/protocol-designer/src/pages/Designer/index.tsx index e11079261ab..ca2c93280e5 100644 --- a/protocol-designer/src/pages/Designer/index.tsx +++ b/protocol-designer/src/pages/Designer/index.tsx @@ -4,11 +4,13 @@ import { useTranslation } from 'react-i18next' import { useNavigate } from 'react-router-dom' import { ALIGN_END, + ALIGN_STRETCH, COLORS, DIRECTION_COLUMN, FLEX_MAX_CONTENT, Flex, INFO_TOAST, + JUSTIFY_FLEX_END, SPACING, ToggleGroup, useOnClickOutside, @@ -126,7 +128,9 @@ export function Designer(): JSX.Element { const deckViewItems = deckView === leftString ? ( - + + + ) : ( ) @@ -159,7 +163,11 @@ export function Designer(): JSX.Element { }} /> ) : null} - + {zoomIn.slot == null ? ( - +