Skip to content

Commit

Permalink
fix(protocol-designer, components) fix deck view size issue (#17394)
Browse files Browse the repository at this point in the history 
* fix(protocol-designer, components) fix deck view size issue
  • Loading branch information
@koji
koji authored Feb 4, 2025
1 parent dc48e10 commit e37b61f
Show file tree
Hide file tree
Showing 16 changed files with 268 additions and 203 deletions.
5 changes: 2 additions & 3 deletions components/src/atoms/buttons/EmptySelectorButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import {
ALIGN_CENTER,
CURSOR_DEFAULT,
CURSOR_POINTER,
FLEX_MAX_CONTENT,
Icon,
JUSTIFY_CENTER,
JUSTIFY_START,
Expand Down Expand Up @@ -62,8 +61,8 @@ interface ButtonProps {

const StyledButton = styled.button<ButtonProps>`
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};
Expand Down
2 changes: 1 addition & 1 deletion protocol-designer/src/ProtocolEditor.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ export function ProtocolEditor(): JSX.Element {
id="protocol-editor"
>
<PortalRoot />
<Flex flexDirection={DIRECTION_COLUMN}>
<Flex flexDirection={DIRECTION_COLUMN} height="100%">
<HashRouter>
<ProtocolRoutes />
</HashRouter>
Expand Down
2 changes: 1 addition & 1 deletion protocol-designer/src/ProtocolRoutes.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ export function ProtocolRoutes(): JSX.Element {
>
<Navigation />
<Kitchen>
<Box width="100%">
<Box width="100%" height="100%">
<GateModal />
<LabwareUploadModal />
<FileUploadMessagesModal />
Expand Down
295 changes: 158 additions & 137 deletions protocol-designer/src/pages/Designer/DeckSetup/DeckSetupContainer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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',
Expand Down Expand Up @@ -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 (
<Flex height="100%">
<>
<Flex
backgroundColor={COLORS.white}
borderRadius={BORDERS.borderRadius12}
width="100%"
height={tab === 'protocolSteps' ? '65.75vh' : '100%'}
height="100%"
flexDirection={DIRECTION_COLUMN}
padding={isZoomed ? '0' : SPACING.spacing24}
padding={containerPadding}
>
<Flex
width="100%"
Expand All @@ -230,7 +242,7 @@ export function DeckSetupContainer(props: DeckSetupTabType): JSX.Element {
justifyContent={JUSTIFY_CENTER}
gridGap={SPACING.spacing12}
>
{zoomIn.slot == null ? (
{zoomIn.slot == null && tab === 'startingDeck' ? (
<Box width="20%">
{hoverSlot != null &&
breakPointSize !== 'small' &&
Expand All @@ -239,144 +251,153 @@ export function DeckSetupContainer(props: DeckSetupTabType): JSX.Element {
) : null}
</Box>
) : null}
<RobotCoordinateSpaceWithRef
<Flex
width="100%"
height="100%"
width={
zoomIn.slot != null || tab === 'protocolSteps' ? '100%' : '50%'
}
minWidth={tab === 'protocolSteps' ? 'auto' : '30rem'}
deckDef={deckDef}
viewBox={viewBoxAdjusted}
outline="auto"
zoomed={zoomIn.slot != null}
borderRadius={BORDERS.borderRadius12}
alignItems={ALIGN_CENTER}
justifyContent={JUSTIFY_CENTER}
>
{() => (
<>
{robotType === OT2_ROBOT_TYPE ? (
<DeckFromLayers
robotType={robotType}
layerBlocklist={OT2_STANDARD_DECK_VIEW_LAYER_BLOCK_LIST}
/>
) : (
<>
{filteredAddressableAreas.map(addressableArea => {
const cutoutId = getCutoutIdForAddressableArea(
addressableArea.id,
deckDef.cutoutFixtures
)
return cutoutId != null ? (
<SingleSlotFixture
key={addressableArea.id}
cutoutId={cutoutId}
deckDefinition={deckDef}
slotClipColor={darkFill}
showExpansion={cutoutId === 'cutoutA1'}
fixtureBaseColor={lightFill}
/>
) : null
})}
{stagingAreaFixtures.map(fixture => {
if (
zoomIn.cutout == null ||
zoomIn.cutout !== fixture.location
) {
return (
<StagingAreaFixture
key={fixture.id}
cutoutId={fixture.location as StagingAreaLocation}
deckDefinition={deckDef}
slotClipColor={darkFill}
fixtureBaseColor={lightFill}
/>
)
}
})}
{trash != null
? trashBinFixtures.map(({ cutoutId }) =>
cutoutId != null &&
(zoomIn.cutout == null ||
zoomIn.cutout !== cutoutId) ? (
<Fragment key={cutoutId}>
<SingleSlotFixture
cutoutId={cutoutId}
deckDefinition={deckDef}
slotClipColor={COLORS.transparent}
fixtureBaseColor={lightFill}
/>
<FlexTrash
robotType={robotType}
trashIconColor={lightFill}
trashCutoutId={cutoutId as TrashCutoutId}
backgroundColor={COLORS.grey50}
/>
</Fragment>
) : null
<RobotCoordinateSpaceWithRef
height="100%"
width={
zoomIn.slot != null || tab === 'protocolSteps' ? '100%' : '50%'
}
minWidth={
tab === 'protocolSteps' ? 'auto' : STARTING_DECK_VIEW_MIN_WIDTH
}
deckDef={deckDef}
viewBox={viewBoxAdjusted}
outline="auto"
zoomed={zoomIn.slot != null}
borderRadius={BORDERS.borderRadius12}
>
{() => (
<>
{robotType === OT2_ROBOT_TYPE ? (
<DeckFromLayers
robotType={robotType}
layerBlocklist={OT2_STANDARD_DECK_VIEW_LAYER_BLOCK_LIST}
/>
) : (
<>
{filteredAddressableAreas.map(addressableArea => {
const cutoutId = getCutoutIdForAddressableArea(
addressableArea.id,
deckDef.cutoutFixtures
)
: null}
{wasteChuteFixtures.map(fixture => {
if (
zoomIn.cutout == null ||
zoomIn.cutout !== fixture.location
) {
return (
<WasteChuteFixture
key={fixture.id}
cutoutId={
fixture.location as typeof WASTE_CHUTE_CUTOUT
}
deckDefinition={deckDef}
fixtureBaseColor={lightFill}
/>
)
}
})}
{wasteChuteStagingAreaFixtures.map(fixture => {
if (
zoomIn.cutout == null ||
zoomIn.cutout !== fixture.location
) {
return (
<WasteChuteStagingAreaFixture
key={fixture.id}
cutoutId={
fixture.location as typeof WASTE_CHUTE_CUTOUT
}
return cutoutId != null ? (
<SingleSlotFixture
key={addressableArea.id}
cutoutId={cutoutId}
deckDefinition={deckDef}
slotClipColor={darkFill}
showExpansion={cutoutId === 'cutoutA1'}
fixtureBaseColor={lightFill}
/>
)
}
})}
</>
)}
<DeckSetupDetails
selectedZoomInSlot={zoomIn.slot ?? undefined}
hoveredLabware={hoveredLabware}
hoveredModule={hoveredModule}
hoveredFixture={hoveredFixture}
hover={hoverSlot}
tab={tab}
setHover={setHoverSlot}
addEquipment={addEquipment}
activeDeckSetup={activeDeckSetup}
stagingAreaCutoutIds={stagingAreaFixtures.map(
areas => areas.location as CutoutId
) : null
})}
{stagingAreaFixtures.map(fixture => {
if (
zoomIn.cutout == null ||
zoomIn.cutout !== fixture.location
) {
return (
<StagingAreaFixture
key={fixture.id}
cutoutId={fixture.location as StagingAreaLocation}
deckDefinition={deckDef}
slotClipColor={darkFill}
fixtureBaseColor={lightFill}
/>
)
}
})}
{trash != null
? trashBinFixtures.map(({ cutoutId }) =>
cutoutId != null &&
(zoomIn.cutout == null ||
zoomIn.cutout !== cutoutId) ? (
<Fragment key={cutoutId}>
<SingleSlotFixture
cutoutId={cutoutId}
deckDefinition={deckDef}
slotClipColor={COLORS.transparent}
fixtureBaseColor={lightFill}
/>
<FlexTrash
robotType={robotType}
trashIconColor={lightFill}
trashCutoutId={cutoutId as TrashCutoutId}
backgroundColor={COLORS.grey50}
/>
</Fragment>
) : null
)
: null}
{wasteChuteFixtures.map(fixture => {
if (
zoomIn.cutout == null ||
zoomIn.cutout !== fixture.location
) {
return (
<WasteChuteFixture
key={fixture.id}
cutoutId={
fixture.location as typeof WASTE_CHUTE_CUTOUT
}
deckDefinition={deckDef}
fixtureBaseColor={lightFill}
/>
)
}
})}
{wasteChuteStagingAreaFixtures.map(fixture => {
if (
zoomIn.cutout == null ||
zoomIn.cutout !== fixture.location
) {
return (
<WasteChuteStagingAreaFixture
key={fixture.id}
cutoutId={
fixture.location as typeof WASTE_CHUTE_CUTOUT
}
deckDefinition={deckDef}
slotClipColor={darkFill}
fixtureBaseColor={lightFill}
/>
)
}
})}
</>
)}
{...{
deckDef,
showGen1MultichannelCollisionWarnings,
}}
/>
<SlotLabels
robotType={robotType}
show4thColumn={stagingAreaFixtures.length > 0}
/>
</>
)}
</RobotCoordinateSpaceWithRef>
{zoomIn.slot == null ? (
<DeckSetupDetails
selectedZoomInSlot={zoomIn.slot ?? undefined}
hoveredLabware={hoveredLabware}
hoveredModule={hoveredModule}
hoveredFixture={hoveredFixture}
hover={hoverSlot}
tab={tab}
setHover={setHoverSlot}
addEquipment={addEquipment}
activeDeckSetup={activeDeckSetup}
stagingAreaCutoutIds={stagingAreaFixtures.map(
areas => areas.location as CutoutId
)}
{...{
deckDef,
showGen1MultichannelCollisionWarnings,
}}
/>
<SlotLabels
robotType={robotType}
show4thColumn={stagingAreaFixtures.length > 0}
/>
</>
)}
</RobotCoordinateSpaceWithRef>
</Flex>
{zoomIn.slot == null && tab === 'startingDeck' ? (
<Box width="20%">
{hoverSlot != null &&
breakPointSize !== 'small' &&
Expand Down Expand Up @@ -404,6 +425,6 @@ export function DeckSetupContainer(props: DeckSetupTabType): JSX.Element {
setHoveredLabware={setHoveredLabware}
/>
) : null}
</Flex>
</>
)
}
0 ...Designer/Offdeck/HighlightOffdeckSlot.tsx → ...Designer/OffDeck/HighlightOffdeckSlot.tsx
View file
File renamed without changes.
Loading

0 comments on commit e37b61f

Please sign in to comment.