Skip to content

Commit e37b61f

Browse files
kojikoji
authored
fix(protocol-designer, components) fix deck view size issue (#17394)
* fix(protocol-designer, components) fix deck view size issue
1 parent dc48e10 commit e37b61f

File tree

16 files changed

+268
-203
lines changed

16 files changed

+268
-203
lines changed

‎components/src/atoms/buttons/EmptySelectorButton.tsx

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import {
44
ALIGN_CENTER,
55
CURSOR_DEFAULT,
66
CURSOR_POINTER,
7-
FLEX_MAX_CONTENT,
87
Icon,
98
JUSTIFY_CENTER,
109
JUSTIFY_START,
@@ -62,8 +61,8 @@ interface ButtonProps {
6261

6362
const StyledButton = styled.button<ButtonProps>`
6463
border: none;
65-
width: ${FLEX_MAX_CONTENT};
66-
height: ${FLEX_MAX_CONTENT};
64+
width: 100%;
65+
height: 100%;
6766
cursor: ${CURSOR_POINTER};
6867
background-color: ${COLORS.blue30};
6968
border-radius: ${BORDERS.borderRadius8};

‎protocol-designer/src/ProtocolEditor.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ export function ProtocolEditor(): JSX.Element {
3838
id="protocol-editor"
3939
>
4040
<PortalRoot />
41-
<Flex flexDirection={DIRECTION_COLUMN}>
41+
<Flex flexDirection={DIRECTION_COLUMN} height="100%">
4242
<HashRouter>
4343
<ProtocolRoutes />
4444
</HashRouter>

‎protocol-designer/src/ProtocolRoutes.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@ export function ProtocolRoutes(): JSX.Element {
7373
>
7474
<Navigation />
7575
<Kitchen>
76-
<Box width="100%">
76+
<Box width="100%" height="100%">
7777
<GateModal />
7878
<LabwareUploadModal />
7979
<FileUploadMessagesModal />

‎protocol-designer/src/pages/Designer/DeckSetup/DeckSetupContainer.tsx

Lines changed: 158 additions & 137 deletions
Original file line numberDiff line numberDiff line change
@@ -6,15 +6,15 @@ import {
66
BORDERS,
77
Box,
88
COLORS,
9-
DIRECTION_COLUMN,
109
DeckFromLayers,
10+
DIRECTION_COLUMN,
1111
Flex,
1212
FlexTrash,
1313
JUSTIFY_CENTER,
1414
RobotCoordinateSpaceWithRef,
15-
SPACING,
1615
SingleSlotFixture,
1716
SlotLabels,
17+
SPACING,
1818
StagingAreaFixture,
1919
WasteChuteFixture,
2020
WasteChuteStagingAreaFixture,
@@ -59,6 +59,9 @@ import type { Fixture } from './constants'
5959

6060
const WASTE_CHUTE_SPACE = 30
6161
const DETAILS_HOVER_SPACE = 60
62+
// Note (02/02/25:kk) the size is different from the design but the product team requested keep the current size
63+
const STARTING_DECK_VIEW_MIN_WIDTH = '75%'
64+
6265
const OT2_STANDARD_DECK_VIEW_LAYER_BLOCK_LIST: string[] = [
6366
'calibrationMarkings',
6467
'fixedBase',
@@ -213,15 +216,24 @@ export function DeckSetupContainer(props: DeckSetupTabType): JSX.Element {
213216
aa => isAddressableAreaStandardSlot(aa.id, deckDef)
214217
)
215218

219+
let containerPadding = '0'
220+
if (!isZoomed) {
221+
if (tab === 'startingDeck') {
222+
containerPadding = SPACING.spacing40
223+
} else {
224+
containerPadding = SPACING.spacing60
225+
}
226+
}
227+
216228
return (
217-
<Flex height="100%">
229+
<>
218230
<Flex
219231
backgroundColor={COLORS.white}
220232
borderRadius={BORDERS.borderRadius12}
221233
width="100%"
222-
height={tab === 'protocolSteps' ? '65.75vh' : '100%'}
234+
height="100%"
223235
flexDirection={DIRECTION_COLUMN}
224-
padding={isZoomed ? '0' : SPACING.spacing24}
236+
padding={containerPadding}
225237
>
226238
<Flex
227239
width="100%"
@@ -230,7 +242,7 @@ export function DeckSetupContainer(props: DeckSetupTabType): JSX.Element {
230242
justifyContent={JUSTIFY_CENTER}
231243
gridGap={SPACING.spacing12}
232244
>
233-
{zoomIn.slot == null ? (
245+
{zoomIn.slot == null && tab === 'startingDeck' ? (
234246
<Box width="20%">
235247
{hoverSlot != null &&
236248
breakPointSize !== 'small' &&
@@ -239,144 +251,153 @@ export function DeckSetupContainer(props: DeckSetupTabType): JSX.Element {
239251
) : null}
240252
</Box>
241253
) : null}
242-
<RobotCoordinateSpaceWithRef
254+
<Flex
255+
width="100%"
243256
height="100%"
244-
width={
245-
zoomIn.slot != null || tab === 'protocolSteps' ? '100%' : '50%'
246-
}
247-
minWidth={tab === 'protocolSteps' ? 'auto' : '30rem'}
248-
deckDef={deckDef}
249-
viewBox={viewBoxAdjusted}
250-
outline="auto"
251-
zoomed={zoomIn.slot != null}
252-
borderRadius={BORDERS.borderRadius12}
257+
alignItems={ALIGN_CENTER}
258+
justifyContent={JUSTIFY_CENTER}
253259
>
254-
{() => (
255-
<>
256-
{robotType === OT2_ROBOT_TYPE ? (
257-
<DeckFromLayers
258-
robotType={robotType}
259-
layerBlocklist={OT2_STANDARD_DECK_VIEW_LAYER_BLOCK_LIST}
260-
/>
261-
) : (
262-
<>
263-
{filteredAddressableAreas.map(addressableArea => {
264-
const cutoutId = getCutoutIdForAddressableArea(
265-
addressableArea.id,
266-
deckDef.cutoutFixtures
267-
)
268-
return cutoutId != null ? (
269-
<SingleSlotFixture
270-
key={addressableArea.id}
271-
cutoutId={cutoutId}
272-
deckDefinition={deckDef}
273-
slotClipColor={darkFill}
274-
showExpansion={cutoutId === 'cutoutA1'}
275-
fixtureBaseColor={lightFill}
276-
/>
277-
) : null
278-
})}
279-
{stagingAreaFixtures.map(fixture => {
280-
if (
281-
zoomIn.cutout == null ||
282-
zoomIn.cutout !== fixture.location
283-
) {
284-
return (
285-
<StagingAreaFixture
286-
key={fixture.id}
287-
cutoutId={fixture.location as StagingAreaLocation}
288-
deckDefinition={deckDef}
289-
slotClipColor={darkFill}
290-
fixtureBaseColor={lightFill}
291-
/>
292-
)
293-
}
294-
})}
295-
{trash != null
296-
? trashBinFixtures.map(({ cutoutId }) =>
297-
cutoutId != null &&
298-
(zoomIn.cutout == null ||
299-
zoomIn.cutout !== cutoutId) ? (
300-
<Fragment key={cutoutId}>
301-
<SingleSlotFixture
302-
cutoutId={cutoutId}
303-
deckDefinition={deckDef}
304-
slotClipColor={COLORS.transparent}
305-
fixtureBaseColor={lightFill}
306-
/>
307-
<FlexTrash
308-
robotType={robotType}
309-
trashIconColor={lightFill}
310-
trashCutoutId={cutoutId as TrashCutoutId}
311-
backgroundColor={COLORS.grey50}
312-
/>
313-
</Fragment>
314-
) : null
260+
<RobotCoordinateSpaceWithRef
261+
height="100%"
262+
width={
263+
zoomIn.slot != null || tab === 'protocolSteps' ? '100%' : '50%'
264+
}
265+
minWidth={
266+
tab === 'protocolSteps' ? 'auto' : STARTING_DECK_VIEW_MIN_WIDTH
267+
}
268+
deckDef={deckDef}
269+
viewBox={viewBoxAdjusted}
270+
outline="auto"
271+
zoomed={zoomIn.slot != null}
272+
borderRadius={BORDERS.borderRadius12}
273+
>
274+
{() => (
275+
<>
276+
{robotType === OT2_ROBOT_TYPE ? (
277+
<DeckFromLayers
278+
robotType={robotType}
279+
layerBlocklist={OT2_STANDARD_DECK_VIEW_LAYER_BLOCK_LIST}
280+
/>
281+
) : (
282+
<>
283+
{filteredAddressableAreas.map(addressableArea => {
284+
const cutoutId = getCutoutIdForAddressableArea(
285+
addressableArea.id,
286+
deckDef.cutoutFixtures
315287
)
316-
: null}
317-
{wasteChuteFixtures.map(fixture => {
318-
if (
319-
zoomIn.cutout == null ||
320-
zoomIn.cutout !== fixture.location
321-
) {
322-
return (
323-
<WasteChuteFixture
324-
key={fixture.id}
325-
cutoutId={
326-
fixture.location as typeof WASTE_CHUTE_CUTOUT
327-
}
328-
deckDefinition={deckDef}
329-
fixtureBaseColor={lightFill}
330-
/>
331-
)
332-
}
333-
})}
334-
{wasteChuteStagingAreaFixtures.map(fixture => {
335-
if (
336-
zoomIn.cutout == null ||
337-
zoomIn.cutout !== fixture.location
338-
) {
339-
return (
340-
<WasteChuteStagingAreaFixture
341-
key={fixture.id}
342-
cutoutId={
343-
fixture.location as typeof WASTE_CHUTE_CUTOUT
344-
}
288+
return cutoutId != null ? (
289+
<SingleSlotFixture
290+
key={addressableArea.id}
291+
cutoutId={cutoutId}
345292
deckDefinition={deckDef}
346293
slotClipColor={darkFill}
294+
showExpansion={cutoutId === 'cutoutA1'}
347295
fixtureBaseColor={lightFill}
348296
/>
349-
)
350-
}
351-
})}
352-
</>
353-
)}
354-
<DeckSetupDetails
355-
selectedZoomInSlot={zoomIn.slot ?? undefined}
356-
hoveredLabware={hoveredLabware}
357-
hoveredModule={hoveredModule}
358-
hoveredFixture={hoveredFixture}
359-
hover={hoverSlot}
360-
tab={tab}
361-
setHover={setHoverSlot}
362-
addEquipment={addEquipment}
363-
activeDeckSetup={activeDeckSetup}
364-
stagingAreaCutoutIds={stagingAreaFixtures.map(
365-
areas => areas.location as CutoutId
297+
) : null
298+
})}
299+
{stagingAreaFixtures.map(fixture => {
300+
if (
301+
zoomIn.cutout == null ||
302+
zoomIn.cutout !== fixture.location
303+
) {
304+
return (
305+
<StagingAreaFixture
306+
key={fixture.id}
307+
cutoutId={fixture.location as StagingAreaLocation}
308+
deckDefinition={deckDef}
309+
slotClipColor={darkFill}
310+
fixtureBaseColor={lightFill}
311+
/>
312+
)
313+
}
314+
})}
315+
{trash != null
316+
? trashBinFixtures.map(({ cutoutId }) =>
317+
cutoutId != null &&
318+
(zoomIn.cutout == null ||
319+
zoomIn.cutout !== cutoutId) ? (
320+
<Fragment key={cutoutId}>
321+
<SingleSlotFixture
322+
cutoutId={cutoutId}
323+
deckDefinition={deckDef}
324+
slotClipColor={COLORS.transparent}
325+
fixtureBaseColor={lightFill}
326+
/>
327+
<FlexTrash
328+
robotType={robotType}
329+
trashIconColor={lightFill}
330+
trashCutoutId={cutoutId as TrashCutoutId}
331+
backgroundColor={COLORS.grey50}
332+
/>
333+
</Fragment>
334+
) : null
335+
)
336+
: null}
337+
{wasteChuteFixtures.map(fixture => {
338+
if (
339+
zoomIn.cutout == null ||
340+
zoomIn.cutout !== fixture.location
341+
) {
342+
return (
343+
<WasteChuteFixture
344+
key={fixture.id}
345+
cutoutId={
346+
fixture.location as typeof WASTE_CHUTE_CUTOUT
347+
}
348+
deckDefinition={deckDef}
349+
fixtureBaseColor={lightFill}
350+
/>
351+
)
352+
}
353+
})}
354+
{wasteChuteStagingAreaFixtures.map(fixture => {
355+
if (
356+
zoomIn.cutout == null ||
357+
zoomIn.cutout !== fixture.location
358+
) {
359+
return (
360+
<WasteChuteStagingAreaFixture
361+
key={fixture.id}
362+
cutoutId={
363+
fixture.location as typeof WASTE_CHUTE_CUTOUT
364+
}
365+
deckDefinition={deckDef}
366+
slotClipColor={darkFill}
367+
fixtureBaseColor={lightFill}
368+
/>
369+
)
370+
}
371+
})}
372+
</>
366373
)}
367-
{...{
368-
deckDef,
369-
showGen1MultichannelCollisionWarnings,
370-
}}
371-
/>
372-
<SlotLabels
373-
robotType={robotType}
374-
show4thColumn={stagingAreaFixtures.length > 0}
375-
/>
376-
</>
377-
)}
378-
</RobotCoordinateSpaceWithRef>
379-
{zoomIn.slot == null ? (
374+
<DeckSetupDetails
375+
selectedZoomInSlot={zoomIn.slot ?? undefined}
376+
hoveredLabware={hoveredLabware}
377+
hoveredModule={hoveredModule}
378+
hoveredFixture={hoveredFixture}
379+
hover={hoverSlot}
380+
tab={tab}
381+
setHover={setHoverSlot}
382+
addEquipment={addEquipment}
383+
activeDeckSetup={activeDeckSetup}
384+
stagingAreaCutoutIds={stagingAreaFixtures.map(
385+
areas => areas.location as CutoutId
386+
)}
387+
{...{
388+
deckDef,
389+
showGen1MultichannelCollisionWarnings,
390+
}}
391+
/>
392+
<SlotLabels
393+
robotType={robotType}
394+
show4thColumn={stagingAreaFixtures.length > 0}
395+
/>
396+
</>
397+
)}
398+
</RobotCoordinateSpaceWithRef>
399+
</Flex>
400+
{zoomIn.slot == null && tab === 'startingDeck' ? (
380401
<Box width="20%">
381402
{hoverSlot != null &&
382403
breakPointSize !== 'small' &&
@@ -404,6 +425,6 @@ export function DeckSetupContainer(props: DeckSetupTabType): JSX.Element {
404425
setHoveredLabware={setHoveredLabware}
405426
/>
406427
) : null}
407-
</Flex>
428+
</>
408429
)
409430
}

‎protocol-designer/src/pages/Designer/Offdeck/HighlightOffdeckSlot.tsx renamed to ‎protocol-designer/src/pages/Designer/OffDeck/HighlightOffdeckSlot.tsx

File renamed without changes.

0 commit comments

Comments
 (0)