From 8d674c307571104b8b1ea1418080e4f75763fb8e Mon Sep 17 00:00:00 2001
From: Hamsini Malli Sivakumar <hmallisi@broadinstitute.org>
Date: Thu, 14 Dec 2023 01:27:24 -0500
Subject: [PATCH] final changes

---
 src/components/CollapsibleTable.js | 199 +++++++-------------
 src/pages/HealthCheck.js           | 283 +----------------------------
 2 files changed, 70 insertions(+), 412 deletions(-)

diff --git a/src/components/CollapsibleTable.js b/src/components/CollapsibleTable.js
index 982ea3dfb..3b69bca49 100644
--- a/src/components/CollapsibleTable.js
+++ b/src/components/CollapsibleTable.js
@@ -1,11 +1,10 @@
 import React, { useEffect, useState } from 'react';
-import Stack from '@mui/material/Stack';
 import Box from '@mui/material/Box';
 import Collapse from '@mui/material/Collapse';
 import IconButton from '@mui/material/IconButton';
 import { styled } from '@mui/material/styles';
-import Table, { tableClasses } from '@mui/material/Table';
-import TableBody, { tableBodyClasses } from '@mui/material/TableBody';
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
 import TableCell, { tableCellClasses } from '@mui/material/TableCell';
 import TableContainer from '@mui/material/TableContainer';
 import TableHead from '@mui/material/TableHead';
@@ -104,39 +103,16 @@ const table = {
 };
 */
 
-const StyledTable = styled(Table)(() => ({
-  borderCollapse: 'separate',
-  borderSpacing: '0 15px'
-}));
-
-const StyledTableBody = styled(TableBody)(() => ({
-  "& > :not(:last-child)": {
-    // borderBottom: "3px solid white"
-  }
-}));
-
-const StyledTableHeaderRow = styled(TableRow)(() => ({
+const SubtableRow = styled(TableRow)(() => ({
   [`&.${tableRowClasses.root}`]: {
-    height: '40px',
-    border: '1px solid black',
-    // borderBottom: '1px solid black',
-    padding: '5px',
-    borderSpacing: '5em',
-  },
-}));
-
-const StyledTableRow = styled(TableRow)(() => ({
-  [`&.${tableRowClasses.root}`]: {
-    height: '57px',
-    border: '1px solid black',
-    // borderBottom: '1px solid black',
-    padding: '5px',
-    borderSpacing: '5em',
-  },
+    border: '1px solid rgba(224, 224, 224, 1)'
+  }
 }));
 
 const StyledTableCell = styled(TableCell)(() => ({
-  borderBottom: 'none',
+  paddingTop: '0px',
+  paddingBottom: '0px',
+  height: '57px',
   [`&.${tableCellClasses.head}`]: {
     color: '#333F52',
     fontFamily: 'Montserrat',
@@ -145,7 +121,6 @@ const StyledTableCell = styled(TableCell)(() => ({
     lineHeight: '16px',
     backgroundColor: '#e2e8f4',
     textTransform: 'uppercase',
-    // borderBottom: '1px solid green'
   },
   [`&.${tableCellClasses.body}`]: {
     fontSize: '14px',
@@ -154,56 +129,18 @@ const StyledTableCell = styled(TableCell)(() => ({
     fontWeight: 400,
     color: '#333F52',
     letterSpacing: 0,
-  },
-  [`&.${tableCellClasses.root}`]: {
-    width: '150px',
-    textAlign: 'center',
-    // borderTop: '1px solid black',
-    // borderRadius: '25%',
-    // borderBottom: '1px solid black',
-    padding: '5px',
-    '&:first-child': {
-      // borderLeft: '1px solid black',
-      // borderRadius: '12.5% 0 0 12.5%',
-    },
-    '&:last-child': {
-      // borderRight: '1px solid black',
-      // borderRadius: '0 5% 5% 0',
-    },
-  },
+  }
 }));
 
-const StyledSubtableCell = styled(TableCell)(() => ({
-  [`&.${tableCellClasses.head}`]: {
-    color: '#333F52',
-    fontFamily: 'Montserrat',
-    fontSize: '14px',
-    fontWeight: 'bold',
-    lineHeight: '16px',
-    backgroundColor: '#e2e8f4',
-    textTransform: 'uppercase',
-  },
-  [`&.${tableCellClasses.body}`]: {
-    fontSize: '14px',
-    lineHeight: '24px',
-    fontFamily: 'Montserrat',
-    fontWeight: 400,
-    color: '#333F52',
-    letterSpacing: 0,
-  },
+const HeaderCell = styled(StyledTableCell)(() => ({
   [`&.${tableCellClasses.root}`]: {
-    width: '150px',
-    textAlign: 'center',
-    borderTop: 'none',
-    // borderRadius: '25%',
-    borderBottom: 'none',
-    padding: '5px',
-  },
+    height: '40px'
+  }
 }));
 
 const TruncatedTableCell = styled(StyledTableCell)(() => ({
   [`&.${tableCellClasses.root}`]: {
-    // padding: '8px',
+    padding: '8px',
     maxWidth: '20ch',
     whiteSpace: 'nowrap',
     overflow: 'hidden',
@@ -227,74 +164,68 @@ const CollapsibleRow = (props) => {
   const someSelected = subrows.some((row) => isSelected(row.id));
 
   return (
-     <div>
+    <React.Fragment>
       {/* main table row */}
-      <StyledTableRow>
-        {/* <Stack> */}
-          {/* <React.Fragment> */}
-            <StyledTableCell>
-              <Checkbox
-                aria-label="select row"
-                onClick={(event) => selectHandler(event, row, 'row')}
-                checked={allSelected}
-                indeterminate={someSelected && !allSelected}
-              />
-              
-            </StyledTableCell>
-            <StyledTableCell>
-              <IconButton
-                aria-label="expand row"
-                size="small"
-                onClick={() => setOpen(!open)}
-              >
-                {open ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
-              </IconButton>
-              
-            </StyledTableCell>
-            {row.data.map((cell, i) => {
-              return <TableCellRenderer key={i} cell={cell} />;
-            })}
-
-          {/* </React.Fragment> */}
-          {/* <Box>Hello</Box> */}
-        {/* </Stack> */}
-        
-      </StyledTableRow>
-      <TableRow sx={{paddingLeft: '50px'}}>
-        <StyledSubtableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={6}>
+      <TableRow>
+        <StyledTableCell>
+          <Checkbox
+            aria-label="select row"
+            onClick={(event) => selectHandler(event, row, 'row')}
+            checked={allSelected}
+            indeterminate={someSelected && !allSelected}
+          />
+        </StyledTableCell>
+        <StyledTableCell>
+          <IconButton
+            aria-label="expand row"
+            size="small"
+            onClick={() => setOpen(!open)}
+          >
+            {open ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
+          </IconButton>
+        </StyledTableCell>
+        {row.data.map((cell, i) => {
+          return <TableCellRenderer key={i} cell={cell} />;
+        })}
+      </TableRow>
+      {/* subtable */}
+      <TableRow>
+        <TableCell style={{ paddingBottom: 0, paddingTop: 0, borderBottom: 'none' }} colSpan={6}>
           <Collapse in={open} timeout="auto" unmountOnExit>
-            
+            <Box sx={{ margin: 2 }}>
               <Table>
+                {/* subtable header */}
                 <TableHead>
-                  <TableRow>
-                    <TableCell  colSpan={7} component="th" />
+                  <SubtableRow>
+                    <StyledTableCell component="th" />
                     {row.subtable.headers.map((header, i) => (
                       <StyledTableCell key={i}>{header.value}</StyledTableCell>
                     ))}
-                  </TableRow>
+                  </SubtableRow>
                 </TableHead>
+                {/* subtable rows */}
                 <TableBody>
                   {subrows.map((subRow, j) => (
-                    <TableRow key={j}>
-                      <TableCell colSpan={7}>
+                    <SubtableRow key={j}>
+                      <StyledTableCell>
                         <Checkbox
                           aria-label="select subtable row"
                           onClick={(event) => selectHandler(event, subRow, 'subrow')}
                           checked={isSelected(subRow.id)}
                         />
-                      </TableCell>
+                      </StyledTableCell>
                       {subRow.data.map((cell, k) => {
-                        return <StyledTableCell key={k}>{cell.value}</StyledTableCell>
+                        return <SubtableCellRenderer key={k} cell={cell} />;
                       })}
-                    </TableRow>
+                    </SubtableRow>
                   ))}
                 </TableBody>
               </Table>
-            
+            </Box>
           </Collapse>
-        </StyledSubtableCell>
+        </TableCell>
       </TableRow>
-     </div>
+    </React.Fragment>
   );
 };
 
@@ -317,32 +248,32 @@ export const CollapsibleTable = (props) => {
   }, [data, selected]);
 
   return !isEmpty(data) && (
-    <TableContainer>
-      <StyledTable aria-label={summary}>
+    <TableContainer component={Paper}>
+      <Table aria-label={summary}>
         {/* main table header */}
         <TableHead>
-          <StyledTableHeaderRow>
-            <StyledTableCell component="th" colSpan={4}>
+          <TableRow>
+            <HeaderCell component="th">
               <Checkbox
                 aria-label="select all on page"
                 onClick={(event) => selectHandler(event, data, 'all')}
                 checked={allSelected}
                 indeterminate={someSelected && !allSelected}
               />
-            </StyledTableCell>
-            <StyledTableCell component="th" />
+            </HeaderCell>
+            <HeaderCell component="th" />
             {data.headers.map((header) => (
-              <StyledTableCell key={header.value} component="th">{header.value}</StyledTableCell>
+              <HeaderCell key={header.value} component="th">{header.value}</HeaderCell>
             ))}
-          </StyledTableHeaderRow>
+          </TableRow>
         </TableHead>
         {/* main table rows */}
-        <StyledTableBody>
+        <TableBody>
           {data.rows.map((row) => (
             <CollapsibleRow key={row.id} row={row} selected={selected} selectHandler={selectHandler} />
           ))}
-        </StyledTableBody>
-      </StyledTable>
+        </TableBody>
+      </Table>
     </TableContainer>
   );
 };
@@ -436,4 +367,4 @@ const SubtableCellRenderer = ({ cell }) => {
     {cell.value}
   </StyledTableCell>;
 
-};
+};
\ No newline at end of file
diff --git a/src/pages/HealthCheck.js b/src/pages/HealthCheck.js
index de5c91bb9..147e91120 100644
--- a/src/pages/HealthCheck.js
+++ b/src/pages/HealthCheck.js
@@ -1,284 +1,11 @@
-import React, { useEffect, useState } from 'react';
-import Stack from '@mui/material/Stack';
-import Box from '@mui/material/Box';
-import Collapse from '@mui/material/Collapse';
-import IconButton from '@mui/material/IconButton';
-import { styled } from '@mui/material/styles';
-import Table, { tableClasses } from '@mui/material/Table';
-import TableBody, { tableBodyClasses } from '@mui/material/TableBody';
-import TableCell, { tableCellClasses } from '@mui/material/TableCell';
-import TableContainer from '@mui/material/TableContainer';
-import TableHead from '@mui/material/TableHead';
-import TableRow, { tableRowClasses } from '@mui/material/TableRow';
-import Paper from '@mui/material/Paper';
-import Popover from '@mui/material/Popover';
-import Typography from '@mui/material/Typography';
-import ArticleOutlinedIcon from '@mui/icons-material/ArticleOutlined';
-import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
-import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
-import { isEmpty } from 'lodash';
-import { Checkbox } from '@mui/material';
-
-/*
-The data should follow the following format:
-
-const table = {
-  headers: [
-    {
-      value: 'Header 1',
-    },
-    {
-      value: 'Header 2',
-    },
-    {
-      value: 'Header 3',
-    },
-  ],
-  rows: [
-    {
-      id: 'Row 1',
-      data: [
-        {
-          value: 'Row 1, Cell 1',
-          truncate: true,
-        },
-        {
-          value: 'Row 1, Cell 2',
-          truncate: false,
-        },
-        {
-          value: 'Row 1, Cell 3',
-          truncate: false,
-        }
-      ],
-      subtable: {
-        headers: [
-          {
-            value: 'Sub header 1',
-          },
-          {
-            value: 'Sub header 2',
-          },
-        ],
-        rows: [
-          {
-            id: 'Sub Row 1',
-            data: [
-              {
-                value: 'Sub Row 1, Cell 1',
-              },
-              {
-                value: 'Sub Row 1, Cell 2',
-              },
-            ],
-          },
-          {
-            id: 'Sub Row 2',
-            data: [
-              {
-                value: 'Sub Row 2, Cell 1',
-              },
-              {
-                value: 'Sub Row 2, Cell 2',
-              },
-            ],
-          },
-        ],
-      }
-    },
-    {
-      id: 'Row 2',
-      data: [
-        {
-          value: 'Row 2, Cell 1',
-        },
-        {
-          value: 'Row 2, Cell 2',
-        },
-        {
-          value: 'Row 2, Cell 3',
-        }
-      ],
-    },
-  ],
-};
-*/
-
-const StyledTable = styled(Table)(() => ({
-  borderCollapse: 'separate',
-  borderSpacing: '0 15px'
-}));
-
-const StyledTableBody = styled(TableBody)(() => ({
-  "& > :not(:last-child)": {
-    // borderBottom: "3px solid white"
-  }
-}));
-
-const StyledTableHeaderRow = styled(TableRow)(() => ({
-  [`&.${tableRowClasses.root}`]: {
-    height: '40px',
-    border: '1px solid black',
-    borderBottom: '1px solid black',
-    padding: '5px',
-    borderSpacing: '5em',
-  },
-}));
-
-const StyledTableRow = styled(TableRow)(() => ({
-  [`&.${tableRowClasses.root}`]: {
-    height: '57px',
-    border: '1px solid black',
-    borderBottom: '1px solid black',
-    padding: '5px',
-    borderSpacing: '5em',
-  },
-}));
-
-const StyledTableCell = styled(TableCell)(() => ({
-  borderBottom: 'none',
-  [`&.${tableCellClasses.head}`]: {
-    color: '#333F52',
-    fontFamily: 'Montserrat',
-    fontSize: '14px',
-    fontWeight: 'bold',
-    lineHeight: '16px',
-    backgroundColor: '#e2e8f4',
-    textTransform: 'uppercase',
-    borderBottom: '1px solid green'
-  },
-  [`&.${tableCellClasses.body}`]: {
-    fontSize: '14px',
-    lineHeight: '24px',
-    fontFamily: 'Montserrat',
-    fontWeight: 400,
-    color: '#333F52',
-    letterSpacing: 0,
-  },
-  [`&.${tableCellClasses.root}`]: {
-    width: '150px',
-    textAlign: 'center',
-    borderTop: '1px solid black',
-    // borderRadius: '25%',
-    borderBottom: '1px solid black',
-    padding: '5px',
-    '&:first-child': {
-      borderLeft: '1px solid black',
-      // borderRadius: '12.5% 0 0 12.5%',
-    },
-    '&:last-child': {
-      borderRight: '1px solid black',
-      // borderRadius: '0 5% 5% 0',
-    },
-  },
-}));
-
-const StyledSubtableCell = styled(TableCell)(() => ({
-  [`&.${tableCellClasses.head}`]: {
-    color: '#333F52',
-    fontFamily: 'Montserrat',
-    fontSize: '14px',
-    fontWeight: 'bold',
-    lineHeight: '16px',
-    backgroundColor: '#e2e8f4',
-    textTransform: 'uppercase',
-  },
-  [`&.${tableCellClasses.body}`]: {
-    fontSize: '14px',
-    lineHeight: '24px',
-    fontFamily: 'Montserrat',
-    fontWeight: 400,
-    color: '#333F52',
-    letterSpacing: 0,
-  },
-  [`&.${tableCellClasses.root}`]: {
-    width: '150px',
-    textAlign: 'center',
-    borderTop: 'none',
-    // borderRadius: '25%',
-    borderBottom: 'none',
-    padding: '5px',
-  },
-}));
-
-const TruncatedTableCell = styled(StyledTableCell)(() => ({
-  [`&.${tableCellClasses.root}`]: {
-    // padding: '8px',
-    maxWidth: '20ch',
-    whiteSpace: 'nowrap',
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-    transition: 'max-width 0.5s',
-    '&:hover': {
-      whiteSpace: 'normal',
-      overflow: 'normal',
-      wordBreak: 'break-all'
-    },
-  },
-}));
-
-const CollapsibleRow = () => {
-
-  return (
-    <React.Fragment className='test' sx={{border: '1px solid black'}}>
-      <TableRow >
-        <TableCell sx={{borderTop: '10px solid black'}}>
-          Hello1
-        </TableCell>
-        <TableCell sx={{borderTop: '10px solid black'}}>
-          Hello2
-        </TableCell>
-        <TableCell sx={{borderTop: '10px solid black'}}>
-          Hello3
-        </TableCell>
-      </TableRow>
-      <TableRow sx={{borderBottom: '10px solid black'}}>
-        <TableCell colSpan={3}>
-          <Table>
-            <TableRow>
-              <TableCell sx={{borderBottom: '10px solid black'}}>
-                Hello1
-              </TableCell>
-              <TableCell sx={{borderBottom: '10px solid black'}}>
-                Hello1
-              </TableCell>
-              <TableCell sx={{borderBottom: '10px solid black'}}>
-                Hello1
-              </TableCell>
-            </TableRow>
-          </Table>
-        </TableCell>
-      </TableRow>
-    </React.Fragment>
-  );
-};
+import React from 'react';
 
 export const HealthCheck = () => {
-
   return (
-    <TableContainer sx={{ width: '75%', justifyContent: 'center' }}>
-      <StyledTable>
-        <TableHead>
-          <StyledTableHeaderRow>
-            <StyledTableCell component="th">
-              Title1
-            </StyledTableCell>
-            <StyledTableCell component="th">
-              Title2
-            </StyledTableCell>
-            <StyledTableCell component="th">
-              Title3
-            </StyledTableCell>
-          </StyledTableHeaderRow>
-        </TableHead>
-        <StyledTableBody>
-          <CollapsibleRow />
-          <CollapsibleRow />
-
-        </StyledTableBody>
-      </StyledTable>
-    </TableContainer>
+    <div style={{ margin: '2rem' }}>
+      <p>DUOS is healthy!</p>
+    </div>
   );
 };
 
-export default HealthCheck;
+export default HealthCheck;
\ No newline at end of file