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

fix deck view size issue close AUTH-
Opentrons · Jan 31, 2025 · 2a32f95 · 2a32f95
1 parent 489788d
commit 2a32f95
Show file tree

Hide file tree

Showing 12 changed files with 358 additions and 234 deletions.
diff --git a/components/src/atoms/buttons/EmptySelectorButton.tsx b/components/src/atoms/buttons/EmptySelectorButton.tsx
@@ -62,8 +62,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};

diff --git 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 (
     <Svg
       viewBox={zoomed ? viewBox : wholeDeckViewBox}

diff --git a/protocol-designer/src/ProtocolEditor.tsx b/protocol-designer/src/ProtocolEditor.tsx
@@ -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>

diff --git a/protocol-designer/src/ProtocolRoutes.tsx b/protocol-designer/src/ProtocolRoutes.tsx
@@ -73,7 +73,7 @@ export function ProtocolRoutes(): JSX.Element {
     >
       <Navigation />
       <Kitchen>
-        <Box width="100%">
+        <Box width="100%" height="100%">
           <GateModal />
           <LabwareUploadModal />
           <FileUploadMessagesModal />

diff --git a/protocol-designer/src/pages/Designer/DeckSetup/DeckSetupContainer.tsx b/protocol-designer/src/pages/Designer/DeckSetup/DeckSetupContainer.tsx
@@ -213,172 +213,187 @@ 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 (
     // <Flex height="100%" css={{ outline: 'solid 1px red' }}>
     <>
       <Flex
-        backgroundColor={COLORS.red20}
+        backgroundColor={COLORS.white}
         borderRadius={BORDERS.borderRadius12}
         width="100%"
         // height={tab === 'protocolSteps' ? '65.75vh' : '100%'}
-        height="65.75vh"
+        // height="65.75vh"
+        height="100%"
         flexDirection={DIRECTION_COLUMN}
         padding={isZoomed ? '0' : SPACING.spacing40}
-        css={{ outline: 'solid 1px blue' }}
+        id="deck setup top flex"
       >
         <Flex
           width="100%"
           height="100%"
           alignItems={ALIGN_CENTER}
           justifyContent={JUSTIFY_CENTER}
           gridGap={SPACING.spacing12}
+          id="svg flex"
         >
           {zoomIn.slot == null ? (
-            <Box width="20%">
+            <Flex justifyContent={JUSTIFY_CENTER}>
               {hoverSlot != null &&
               breakPointSize !== 'small' &&
               LEFT_SLOTS.includes(hoverSlot) ? (
                 <SlotDetailsContainer robotType={robotType} slot={hoverSlot} />
               ) : null}
-            </Box>
+            </Flex>
           ) : null}
-          <RobotCoordinateSpaceWithRef
-            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}
-          >
-            {() => (
-              <>
-                {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}
-                          />
+          <Flex width="100%" height="100%" id="before robot coordinate space">
+            <RobotCoordinateSpaceWithRef
+              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}
+              style={{
+                // marginLeft: SPACING.spacing16,
+                transform: `translateX(${
+                  deckDef?.cornerOffsetFromOrigin[0] * -0.2
+                }px) scale(1, -1)`,
+              }}
+            >
+              {() => (
+                <>
+                  {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
                         )
-                      }
-                    })}
-                    {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
-                            }
+                        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>
+                  <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 ? (
             <Box width="20%">
               {hoverSlot != null &&