From 25375b200d6c008ebdd2436cd5bb7754fefc89f6 Mon Sep 17 00:00:00 2001
From: Hazim Ab Halim <hazim.halim54@yahoo.com>
Date: Wed, 4 Oct 2023 16:44:04 -0400
Subject: [PATCH 1/2] intro and instruction panel. rearranged buttons

---
 src/pages/Dashboard.tsx | 79 +++++++++++++++++++++++++++++++++++------
 1 file changed, 68 insertions(+), 11 deletions(-)

diff --git a/src/pages/Dashboard.tsx b/src/pages/Dashboard.tsx
index 354b843..d37a1f9 100644
--- a/src/pages/Dashboard.tsx
+++ b/src/pages/Dashboard.tsx
@@ -178,10 +178,67 @@ export const DashboardPage: FC = () => {
   }, [filters, selectedCategories]);
 
   return (
-    <>
-      <IconButton size="large" edge="start" color="inherit" aria-label="menu" onClick={handleFilterSideBarOpen}>
-        <MenuIcon />
-      </IconButton>
+    <Box display={'flex'} flexDirection={'column'} justifyContent={'space-between'}>
+      <Box display={'flex'} width={'100%'}>
+        {/* Change hover silhoutte */}
+        <IconButton size="large" edge="start" color="inherit" aria-label="menu" onClick={handleFilterSideBarOpen} sx={{marginLeft:'auto'}}>
+          <Typography marginRight={1}>
+            All Filters
+          </Typography>
+          <MenuIcon />
+        </IconButton>
+      </Box>
+      {/* this might need to be smaller to be closer to figma design */}
+      <Box display={'flex'} flexDirection={'column'} bgcolor={'white'} textAlign={'left'} sx={{minHeight: '25%', maxHeight: '50%', minWidth: '50%', maxWidth: '90%'}}>
+        <Typography variant='h4' color={'black'}>
+          Introduction
+        </Typography> 
+        <Divider sx={{width:'80%', marginLeft:1}}/>
+        <Typography variant='body1' color={'black'}>
+        The purpose of this dataset is to enable researchers to inquiry brain bio-sample availability at the Framingham Heart Study archive. 
+        <br/>You can use the filters provided to narrow down the criteria of the sample and discover whether there are sample that fit your requirements and if there are, how many unique samples are available.
+        </Typography>
+        <Typography variant='h4' color={'black'}>
+          Instructions
+        </Typography> 
+        <Divider sx={{width:'80%', marginLeft:1}}/>
+        <Typography variant='body1' color={'black'}>
+        Using this inquiry system is very simple and intuitive. In essence, you would choose the criteria of the biosample by applying the filters that are available for this dataset. Additional information regarding the filters can be found by hovering over the information icon beside each filter. To achieve a summary of the inquiry based on the filters, you can follow the following steps
+        </Typography>
+        <ol>
+          <li key={1}>
+              <Typography variant='body1' color={'black'}>
+                Click "All Filters" on the top right of the screen to see every available filter for this dataset.
+              </Typography>
+           </li>
+           <li key={2}>
+              <Typography variant='body1' color={'black'}>
+                Use the '+' icon to add filter and then click anywhere to close the side bar.
+              </Typography>
+           </li>
+           <li key={3}>
+              <Typography variant='body1' color={'black'}>
+                Adjust the values for individual filters under "Current Filters"
+              </Typography>
+           </li>
+           <li key={4}>
+              <Typography variant='body1' color={'black'}>
+                Click "Apply Filter" to send the request. A table will pop up with the result
+              </Typography>
+           </li>
+           <li key={5}>
+              <Typography variant='body1' color={'black'}>
+                Additional data columns can be added by clicking the '+' on top of the table
+              </Typography>
+           </li>
+           <li key={6}>
+              <Typography variant='body1' color={'black'}>
+                Data are available for download in CSV or JSON format  using the respective button. Click "DISMISS" when done
+              </Typography>
+           </li>
+        </ol>
+        
+      </Box>
       <Drawer anchor="right" open={openFilterSideBar} onClose={handleFilterSideBarClose}>
         <Toolbar />
         <Box sx={{ width: 400 }}>
@@ -247,7 +304,12 @@ export const DashboardPage: FC = () => {
           </List>
         </Box>
       </Drawer>
-      <Box display="flex" flexDirection="column" padding={4}>
+      <Box display="flex" flexDirection="column" paddingTop={4} sx={{minHeight: '20%', maxHeight: '50%', minWidth: '50%', maxWidth: '90%'}}>
+        <Box display={'flex'} width="fit-content" minWidth={600} maxWidth="100%" maxHeight="100%" marginLeft={'auto'}>
+          <Button variant="contained" onClick={handleApplyFilters} sx={{marginLeft:'auto', marginBottom:1}}>
+            Apply Filters
+          </Button>
+        </Box>
         <Accordion>
           <AccordionSummary expandIcon={<ExpandMoreIcon />}>
             <Typography variant="h5" component="h5">
@@ -295,11 +357,6 @@ export const DashboardPage: FC = () => {
             })}
           </AccordionDetails>
         </Accordion>
-        <Box width="fit-content" minWidth={600} maxWidth="100%" maxHeight="100%">
-          <Button variant="contained" onClick={handleApplyFilters}>
-            Apply Filters
-          </Button>
-        </Box>
       </Box>
 
       {/* Table dialog */}
@@ -323,7 +380,7 @@ export const DashboardPage: FC = () => {
           <Button onClick={() => setDialogOpen(false)}>Close</Button>
         </DialogActions>
       </Dialog>
-    </>
+    </Box>
   );
 };
 

From f8fae666e0e68181ac6cb6ca9439f84b1ececb22 Mon Sep 17 00:00:00 2001
From: Hazim Ab Halim <hazim.halim54@yahoo.com>
Date: Wed, 4 Oct 2023 16:45:21 -0400
Subject: [PATCH 2/2] fixed format with prettier

---
 src/pages/Dashboard.tsx | 97 +++++++++++++++++++++--------------------
 1 file changed, 49 insertions(+), 48 deletions(-)

diff --git a/src/pages/Dashboard.tsx b/src/pages/Dashboard.tsx
index d37a1f9..e9b0306 100644
--- a/src/pages/Dashboard.tsx
+++ b/src/pages/Dashboard.tsx
@@ -181,63 +181,64 @@ export const DashboardPage: FC = () => {
     <Box display={'flex'} flexDirection={'column'} justifyContent={'space-between'}>
       <Box display={'flex'} width={'100%'}>
         {/* Change hover silhoutte */}
-        <IconButton size="large" edge="start" color="inherit" aria-label="menu" onClick={handleFilterSideBarOpen} sx={{marginLeft:'auto'}}>
-          <Typography marginRight={1}>
-            All Filters
-          </Typography>
+        <IconButton size="large" edge="start" color="inherit" aria-label="menu" onClick={handleFilterSideBarOpen} sx={{ marginLeft: 'auto' }}>
+          <Typography marginRight={1}>All Filters</Typography>
           <MenuIcon />
         </IconButton>
       </Box>
       {/* this might need to be smaller to be closer to figma design */}
-      <Box display={'flex'} flexDirection={'column'} bgcolor={'white'} textAlign={'left'} sx={{minHeight: '25%', maxHeight: '50%', minWidth: '50%', maxWidth: '90%'}}>
-        <Typography variant='h4' color={'black'}>
+      <Box display={'flex'} flexDirection={'column'} bgcolor={'white'} textAlign={'left'} sx={{ minHeight: '25%', maxHeight: '50%', minWidth: '50%', maxWidth: '90%' }}>
+        <Typography variant="h4" color={'black'}>
           Introduction
-        </Typography> 
-        <Divider sx={{width:'80%', marginLeft:1}}/>
-        <Typography variant='body1' color={'black'}>
-        The purpose of this dataset is to enable researchers to inquiry brain bio-sample availability at the Framingham Heart Study archive. 
-        <br/>You can use the filters provided to narrow down the criteria of the sample and discover whether there are sample that fit your requirements and if there are, how many unique samples are available.
         </Typography>
-        <Typography variant='h4' color={'black'}>
+        <Divider sx={{ width: '80%', marginLeft: 1 }} />
+        <Typography variant="body1" color={'black'}>
+          The purpose of this dataset is to enable researchers to inquiry brain bio-sample availability at the Framingham Heart Study archive.
+          <br />
+          You can use the filters provided to narrow down the criteria of the sample and discover whether there are sample that fit your requirements and if there are, how many
+          unique samples are available.
+        </Typography>
+        <Typography variant="h4" color={'black'}>
           Instructions
-        </Typography> 
-        <Divider sx={{width:'80%', marginLeft:1}}/>
-        <Typography variant='body1' color={'black'}>
-        Using this inquiry system is very simple and intuitive. In essence, you would choose the criteria of the biosample by applying the filters that are available for this dataset. Additional information regarding the filters can be found by hovering over the information icon beside each filter. To achieve a summary of the inquiry based on the filters, you can follow the following steps
+        </Typography>
+        <Divider sx={{ width: '80%', marginLeft: 1 }} />
+        <Typography variant="body1" color={'black'}>
+          Using this inquiry system is very simple and intuitive. In essence, you would choose the criteria of the biosample by applying the filters that are available for this
+          dataset. Additional information regarding the filters can be found by hovering over the information icon beside each filter. To achieve a summary of the inquiry based on
+          the filters, you can follow the following steps
         </Typography>
         <ol>
           <li key={1}>
-              <Typography variant='body1' color={'black'}>
-                Click "All Filters" on the top right of the screen to see every available filter for this dataset.
-              </Typography>
-           </li>
-           <li key={2}>
-              <Typography variant='body1' color={'black'}>
-                Use the '+' icon to add filter and then click anywhere to close the side bar.
-              </Typography>
-           </li>
-           <li key={3}>
-              <Typography variant='body1' color={'black'}>
-                Adjust the values for individual filters under "Current Filters"
-              </Typography>
-           </li>
-           <li key={4}>
-              <Typography variant='body1' color={'black'}>
-                Click "Apply Filter" to send the request. A table will pop up with the result
-              </Typography>
-           </li>
-           <li key={5}>
-              <Typography variant='body1' color={'black'}>
-                Additional data columns can be added by clicking the '+' on top of the table
-              </Typography>
-           </li>
-           <li key={6}>
-              <Typography variant='body1' color={'black'}>
-                Data are available for download in CSV or JSON format  using the respective button. Click "DISMISS" when done
-              </Typography>
-           </li>
+            <Typography variant="body1" color={'black'}>
+              Click "All Filters" on the top right of the screen to see every available filter for this dataset.
+            </Typography>
+          </li>
+          <li key={2}>
+            <Typography variant="body1" color={'black'}>
+              Use the '+' icon to add filter and then click anywhere to close the side bar.
+            </Typography>
+          </li>
+          <li key={3}>
+            <Typography variant="body1" color={'black'}>
+              Adjust the values for individual filters under "Current Filters"
+            </Typography>
+          </li>
+          <li key={4}>
+            <Typography variant="body1" color={'black'}>
+              Click "Apply Filter" to send the request. A table will pop up with the result
+            </Typography>
+          </li>
+          <li key={5}>
+            <Typography variant="body1" color={'black'}>
+              Additional data columns can be added by clicking the '+' on top of the table
+            </Typography>
+          </li>
+          <li key={6}>
+            <Typography variant="body1" color={'black'}>
+              Data are available for download in CSV or JSON format using the respective button. Click "DISMISS" when done
+            </Typography>
+          </li>
         </ol>
-        
       </Box>
       <Drawer anchor="right" open={openFilterSideBar} onClose={handleFilterSideBarClose}>
         <Toolbar />
@@ -304,9 +305,9 @@ export const DashboardPage: FC = () => {
           </List>
         </Box>
       </Drawer>
-      <Box display="flex" flexDirection="column" paddingTop={4} sx={{minHeight: '20%', maxHeight: '50%', minWidth: '50%', maxWidth: '90%'}}>
+      <Box display="flex" flexDirection="column" paddingTop={4} sx={{ minHeight: '20%', maxHeight: '50%', minWidth: '50%', maxWidth: '90%' }}>
         <Box display={'flex'} width="fit-content" minWidth={600} maxWidth="100%" maxHeight="100%" marginLeft={'auto'}>
-          <Button variant="contained" onClick={handleApplyFilters} sx={{marginLeft:'auto', marginBottom:1}}>
+          <Button variant="contained" onClick={handleApplyFilters} sx={{ marginLeft: 'auto', marginBottom: 1 }}>
             Apply Filters
           </Button>
         </Box>