latest changes for the header

MetaCell · Jul 5, 2024 · 6e316b6 · 6e316b6
1 parent 838ce8a
commit 6e316b6
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 25 deletions.
diff --git a/src/components/common/Heatmap.tsx b/src/components/common/Heatmap.tsx
@@ -215,7 +215,7 @@ const HeatmapGrid: FC<HeatmapGridProps> = ({
           '& .MuiButtonBase-root': {
             left: '1.6rem',
             top: '2rem',
-            width: '6rem',
+            width: '4.5rem',
             height: '2rem',
             marginRight: '0.5rem',
             borderRadius: '0.25rem',
@@ -224,6 +224,15 @@ const HeatmapGrid: FC<HeatmapGridProps> = ({
           },
         }}
       >
+        <Typography
+          variant="subtitle1"
+          color={gray500}
+          style={{
+            marginTop: '2rem',
+          }}
+        >
+          Tree hierarchy:
+        </Typography>
         <Button onClick={() => handleExpandAll()}>Open All</Button>
         <Button onClick={() => handleCompressAll()}>Close All</Button>
       </ButtonGroup>

diff --git a/src/components/connections/SummaryHeader.tsx b/src/components/connections/SummaryHeader.tsx
@@ -97,9 +97,42 @@ const SummaryHeader = ({
             <Button onClick={() => setShowDetails(SummaryType.Summary)}>
               Back to Summary
             </Button>
+          </ButtonGroup>
+        )}
+
+        <Breadcrumbs separator={<ArrowRight />} aria-label="breadcrumb">
+          {showDetails === SummaryType.DetailedSummary ? (
+            <></>
+          ) : (
+            <Typography>Summary</Typography>
+          )}
+        </Breadcrumbs>
+      </Stack>
+
+      <Box
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: '0.75rem',
+        }}
+      >
+        {showDetails === SummaryType.DetailedSummary ? (
+          <ButtonGroup
+            variant="outlined"
+            sx={{
+              '& .MuiButtonBase-root': {
+                width: '4rem',
+                height: '2rem',
+                borderRadius: '0.25rem',
+                border: `0.0625rem solid ${primaryPurple600}`,
+                color: primaryPurple600,
+                marginRight: '1rem',
+              },
+            }}
+          >
             <Button
               sx={{
-                width: '4rem !important',
+                width: '5rem !important',
                 marginLeft: '.25rem',
               }}
               onClick={handleDownClick}
@@ -109,40 +142,20 @@ const SummaryHeader = ({
             <Typography
               variant="subtitle1"
               color={gray500}
-              style={{ width: '8rem' }}
+              style={{ width: '12rem' }}
             >
-              Connection {connectionPage} of {totalUniqueKS}
+              Displaying connection {connectionPage} of {totalUniqueKS}
             </Typography>
             <Button
               sx={{
-                width: '4rem !important',
+                width: '5rem !important',
                 marginLeft: '.25rem',
               }}
               onClick={handleUpClick}
             >
               Next
             </Button>
           </ButtonGroup>
-        )}
-
-        <Breadcrumbs separator={<ArrowRight />} aria-label="breadcrumb">
-          {showDetails === SummaryType.DetailedSummary ? (
-            <></>
-          ) : (
-            <Typography>Summary</Typography>
-          )}
-        </Breadcrumbs>
-      </Stack>
-
-      <Box
-        sx={{
-          display: 'flex',
-          alignItems: 'center',
-          gap: '0.75rem',
-        }}
-      >
-        {showDetails === SummaryType.DetailedSummary ? (
-          <></>
         ) : (
           <>
             <Box