Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(protocol-designer, components) fix deck view size issue #17394

Merged
merged 14 commits into from
Feb 4, 2025
Merged

fix(protocol-designer, components) fix deck view size issue #17394

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
7f9b706
modifying the containers
koji Jan 28, 2025
489788d
Merge branch 'edge' into fix_deck-view-size-issue
koji Jan 28, 2025
2a32f95
fix(protocol-designer,components): fix deck view size issue
koji Jan 31, 2025
65dfe2a
fix test errors from the file path modification
koji Jan 31, 2025
2e22d97
Update OffDeckDetails.tsx
koji Jan 31, 2025
e55348b
Merge branch 'chore_release-pd-8.4.0' into fix_deck-view-size-issue
koji Feb 3, 2025
a712f68
fix deck view position
koji Feb 3, 2025
8bd6c9a
Merge branch 'chore_release-pd-8.4.0' into fix_deck-view-size-issue
koji Feb 3, 2025
cf14a83
fix step summary vertical shifting
koji Feb 4, 2025
9c3517c
remove console.log
koji Feb 4, 2025
e458102
fix lint error
koji Feb 4, 2025
4a14086
Update Designer.test.tsx
koji Feb 4, 2025
3c6ff00
Rename Offdeck.test.tsx to OffDeck.test.tsx
koji Feb 4, 2025
a1bd38b
fix test errors
koji Feb 4, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 2 additions & 3 deletions components/src/atoms/buttons/EmptySelectorButton.tsx
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
File renamed without changes.
Loading
Loading