Skip to content

Commit 2a32f95

Browse files
kojikoji
committed
fix(protocol-designer,components): fix deck view size issue
fix deck view size issue close AUTH-
1 parent 489788d commit 2a32f95

File tree

12 files changed

+358
-234
lines changed

12 files changed

+358
-234
lines changed

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -62,8 +62,8 @@ interface ButtonProps {
6262

6363
const StyledButton = styled.button<ButtonProps>`
6464
border: none;
65-
width: ${FLEX_MAX_CONTENT};
66-
height: ${FLEX_MAX_CONTENT};
65+
width: 100%;
66+
height: 100%;
6767
cursor: ${CURSOR_POINTER};
6868
background-color: ${COLORS.blue30};
6969
border-radius: ${BORDERS.borderRadius8};

‎components/src/hardware-sim/RobotCoordinateSpace/RobotCoordinateSpaceWithRef.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,8 @@ export function RobotCoordinateSpaceWithRef(
3636
wholeDeckViewBox = `${viewBoxOriginX} ${viewBoxOriginY} ${deckXDimension} ${deckYDimension}`
3737
}
3838

39+
console.log('wholeDeckViewBox', wholeDeckViewBox)
40+
3941
return (
4042
<Svg
4143
viewBox={zoomed ? viewBox : wholeDeckViewBox}

‎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: 151 additions & 136 deletions
Original file line numberDiff line numberDiff line change
@@ -213,172 +213,187 @@ export function DeckSetupContainer(props: DeckSetupTabType): JSX.Element {
213213
aa => isAddressableAreaStandardSlot(aa.id, deckDef)
214214
)
215215

216+
// console.log('ViewBox Adjusted:', viewBoxAdjusted)
217+
// console.log('ViewBox Numerical:', viewBoxNumerical)
218+
// console.log('Deck Map Ratio:', deckMapRatio)
219+
// console.log('viewBox', viewBox)
220+
216221
return (
217222
// <Flex height="100%" css={{ outline: 'solid 1px red' }}>
218223
<>
219224
<Flex
220-
backgroundColor={COLORS.red20}
225+
backgroundColor={COLORS.white}
221226
borderRadius={BORDERS.borderRadius12}
222227
width="100%"
223228
// height={tab === 'protocolSteps' ? '65.75vh' : '100%'}
224-
height="65.75vh"
229+
// height="65.75vh"
230+
height="100%"
225231
flexDirection={DIRECTION_COLUMN}
226232
padding={isZoomed ? '0' : SPACING.spacing40}
227-
css={{ outline: 'solid 1px blue' }}
233+
id="deck setup top flex"
228234
>
229235
<Flex
230236
width="100%"
231237
height="100%"
232238
alignItems={ALIGN_CENTER}
233239
justifyContent={JUSTIFY_CENTER}
234240
gridGap={SPACING.spacing12}
241+
id="svg flex"
235242
>
236243
{zoomIn.slot == null ? (
237-
<Box width="20%">
244+
<Flex justifyContent={JUSTIFY_CENTER}>
238245
{hoverSlot != null &&
239246
breakPointSize !== 'small' &&
240247
LEFT_SLOTS.includes(hoverSlot) ? (
241248
<SlotDetailsContainer robotType={robotType} slot={hoverSlot} />
242249
) : null}
243-
</Box>
250+
</Flex>
244251
) : null}
245-
<RobotCoordinateSpaceWithRef
246-
height="100%"
247-
width={
248-
zoomIn.slot != null || tab === 'protocolSteps' ? '100%' : '50%'
249-
}
250-
minWidth={tab === 'protocolSteps' ? 'auto' : '30rem'}
251-
deckDef={deckDef}
252-
viewBox={viewBoxAdjusted}
253-
outline="auto"
254-
zoomed={zoomIn.slot != null}
255-
borderRadius={BORDERS.borderRadius12}
256-
>
257-
{() => (
258-
<>
259-
{robotType === OT2_ROBOT_TYPE ? (
260-
<DeckFromLayers
261-
robotType={robotType}
262-
layerBlocklist={OT2_STANDARD_DECK_VIEW_LAYER_BLOCK_LIST}
263-
/>
264-
) : (
265-
<>
266-
{filteredAddressableAreas.map(addressableArea => {
267-
const cutoutId = getCutoutIdForAddressableArea(
268-
addressableArea.id,
269-
deckDef.cutoutFixtures
270-
)
271-
return cutoutId != null ? (
272-
<SingleSlotFixture
273-
key={addressableArea.id}
274-
cutoutId={cutoutId}
275-
deckDefinition={deckDef}
276-
slotClipColor={darkFill}
277-
showExpansion={cutoutId === 'cutoutA1'}
278-
fixtureBaseColor={lightFill}
279-
/>
280-
) : null
281-
})}
282-
{stagingAreaFixtures.map(fixture => {
283-
if (
284-
zoomIn.cutout == null ||
285-
zoomIn.cutout !== fixture.location
286-
) {
287-
return (
288-
<StagingAreaFixture
289-
key={fixture.id}
290-
cutoutId={fixture.location as StagingAreaLocation}
291-
deckDefinition={deckDef}
292-
slotClipColor={darkFill}
293-
fixtureBaseColor={lightFill}
294-
/>
252+
<Flex width="100%" height="100%" id="before robot coordinate space">
253+
<RobotCoordinateSpaceWithRef
254+
height="100%"
255+
width={
256+
zoomIn.slot != null || tab === 'protocolSteps' ? '100%' : '50%'
257+
}
258+
minWidth={tab === 'protocolSteps' ? 'auto' : '30rem'}
259+
deckDef={deckDef}
260+
viewBox={viewBoxAdjusted}
261+
outline="auto"
262+
zoomed={zoomIn.slot != null}
263+
borderRadius={BORDERS.borderRadius12}
264+
style={{
265+
// marginLeft: SPACING.spacing16,
266+
transform: `translateX(${
267+
deckDef?.cornerOffsetFromOrigin[0] * -0.2
268+
}px) scale(1, -1)`,
269+
}}
270+
>
271+
{() => (
272+
<>
273+
{robotType === OT2_ROBOT_TYPE ? (
274+
<DeckFromLayers
275+
robotType={robotType}
276+
layerBlocklist={OT2_STANDARD_DECK_VIEW_LAYER_BLOCK_LIST}
277+
/>
278+
) : (
279+
<>
280+
{filteredAddressableAreas.map(addressableArea => {
281+
const cutoutId = getCutoutIdForAddressableArea(
282+
addressableArea.id,
283+
deckDef.cutoutFixtures
295284
)
296-
}
297-
})}
298-
{trash != null
299-
? trashBinFixtures.map(({ cutoutId }) =>
300-
cutoutId != null &&
301-
(zoomIn.cutout == null ||
302-
zoomIn.cutout !== cutoutId) ? (
303-
<Fragment key={cutoutId}>
304-
<SingleSlotFixture
305-
cutoutId={cutoutId}
306-
deckDefinition={deckDef}
307-
slotClipColor={COLORS.transparent}
308-
fixtureBaseColor={lightFill}
309-
/>
310-
<FlexTrash
311-
robotType={robotType}
312-
trashIconColor={lightFill}
313-
trashCutoutId={cutoutId as TrashCutoutId}
314-
backgroundColor={COLORS.grey50}
315-
/>
316-
</Fragment>
317-
) : null
318-
)
319-
: null}
320-
{wasteChuteFixtures.map(fixture => {
321-
if (
322-
zoomIn.cutout == null ||
323-
zoomIn.cutout !== fixture.location
324-
) {
325-
return (
326-
<WasteChuteFixture
327-
key={fixture.id}
328-
cutoutId={
329-
fixture.location as typeof WASTE_CHUTE_CUTOUT
330-
}
331-
deckDefinition={deckDef}
332-
fixtureBaseColor={lightFill}
333-
/>
334-
)
335-
}
336-
})}
337-
{wasteChuteStagingAreaFixtures.map(fixture => {
338-
if (
339-
zoomIn.cutout == null ||
340-
zoomIn.cutout !== fixture.location
341-
) {
342-
return (
343-
<WasteChuteStagingAreaFixture
344-
key={fixture.id}
345-
cutoutId={
346-
fixture.location as typeof WASTE_CHUTE_CUTOUT
347-
}
285+
return cutoutId != null ? (
286+
<SingleSlotFixture
287+
key={addressableArea.id}
288+
cutoutId={cutoutId}
348289
deckDefinition={deckDef}
349290
slotClipColor={darkFill}
291+
showExpansion={cutoutId === 'cutoutA1'}
350292
fixtureBaseColor={lightFill}
351293
/>
352-
)
353-
}
354-
})}
355-
</>
356-
)}
357-
<DeckSetupDetails
358-
selectedZoomInSlot={zoomIn.slot ?? undefined}
359-
hoveredLabware={hoveredLabware}
360-
hoveredModule={hoveredModule}
361-
hoveredFixture={hoveredFixture}
362-
hover={hoverSlot}
363-
tab={tab}
364-
setHover={setHoverSlot}
365-
addEquipment={addEquipment}
366-
activeDeckSetup={activeDeckSetup}
367-
stagingAreaCutoutIds={stagingAreaFixtures.map(
368-
areas => areas.location as CutoutId
294+
) : null
295+
})}
296+
{stagingAreaFixtures.map(fixture => {
297+
if (
298+
zoomIn.cutout == null ||
299+
zoomIn.cutout !== fixture.location
300+
) {
301+
return (
302+
<StagingAreaFixture
303+
key={fixture.id}
304+
cutoutId={fixture.location as StagingAreaLocation}
305+
deckDefinition={deckDef}
306+
slotClipColor={darkFill}
307+
fixtureBaseColor={lightFill}
308+
/>
309+
)
310+
}
311+
})}
312+
{trash != null
313+
? trashBinFixtures.map(({ cutoutId }) =>
314+
cutoutId != null &&
315+
(zoomIn.cutout == null ||
316+
zoomIn.cutout !== cutoutId) ? (
317+
<Fragment key={cutoutId}>
318+
<SingleSlotFixture
319+
cutoutId={cutoutId}
320+
deckDefinition={deckDef}
321+
slotClipColor={COLORS.transparent}
322+
fixtureBaseColor={lightFill}
323+
/>
324+
<FlexTrash
325+
robotType={robotType}
326+
trashIconColor={lightFill}
327+
trashCutoutId={cutoutId as TrashCutoutId}
328+
backgroundColor={COLORS.grey50}
329+
/>
330+
</Fragment>
331+
) : null
332+
)
333+
: null}
334+
{wasteChuteFixtures.map(fixture => {
335+
if (
336+
zoomIn.cutout == null ||
337+
zoomIn.cutout !== fixture.location
338+
) {
339+
return (
340+
<WasteChuteFixture
341+
key={fixture.id}
342+
cutoutId={
343+
fixture.location as typeof WASTE_CHUTE_CUTOUT
344+
}
345+
deckDefinition={deckDef}
346+
fixtureBaseColor={lightFill}
347+
/>
348+
)
349+
}
350+
})}
351+
{wasteChuteStagingAreaFixtures.map(fixture => {
352+
if (
353+
zoomIn.cutout == null ||
354+
zoomIn.cutout !== fixture.location
355+
) {
356+
return (
357+
<WasteChuteStagingAreaFixture
358+
key={fixture.id}
359+
cutoutId={
360+
fixture.location as typeof WASTE_CHUTE_CUTOUT
361+
}
362+
deckDefinition={deckDef}
363+
slotClipColor={darkFill}
364+
fixtureBaseColor={lightFill}
365+
/>
366+
)
367+
}
368+
})}
369+
</>
369370
)}
370-
{...{
371-
deckDef,
372-
showGen1MultichannelCollisionWarnings,
373-
}}
374-
/>
375-
<SlotLabels
376-
robotType={robotType}
377-
show4thColumn={stagingAreaFixtures.length > 0}
378-
/>
379-
</>
380-
)}
381-
</RobotCoordinateSpaceWithRef>
371+
<DeckSetupDetails
372+
selectedZoomInSlot={zoomIn.slot ?? undefined}
373+
hoveredLabware={hoveredLabware}
374+
hoveredModule={hoveredModule}
375+
hoveredFixture={hoveredFixture}
376+
hover={hoverSlot}
377+
tab={tab}
378+
setHover={setHoverSlot}
379+
addEquipment={addEquipment}
380+
activeDeckSetup={activeDeckSetup}
381+
stagingAreaCutoutIds={stagingAreaFixtures.map(
382+
areas => areas.location as CutoutId
383+
)}
384+
{...{
385+
deckDef,
386+
showGen1MultichannelCollisionWarnings,
387+
}}
388+
/>
389+
<SlotLabels
390+
robotType={robotType}
391+
show4thColumn={stagingAreaFixtures.length > 0}
392+
/>
393+
</>
394+
)}
395+
</RobotCoordinateSpaceWithRef>
396+
</Flex>
382397
{zoomIn.slot == null ? (
383398
<Box width="20%">
384399
{hoverSlot != null &&

0 commit comments

Comments
 (0)