From 3a25f4d8e50555c0bd02add5dfcf8d3996e9630f Mon Sep 17 00:00:00 2001
From: sambokar <siddheshraze@gmail.com>
Date: Fri, 27 Dec 2024 22:31:08 -0500
Subject: [PATCH] adding baseline filtration system back in

---
 .../client/rendergridexplanations.tsx         | 148 ++++++++++--------
 .../datagrids/measurementscommons.tsx         |  38 +++--
 frontend/config/macros/formdetails.ts         |  20 +--
 3 files changed, 119 insertions(+), 87 deletions(-)

diff --git a/frontend/components/client/rendergridexplanations.tsx b/frontend/components/client/rendergridexplanations.tsx
index 07da209c..ee10318b 100644
--- a/frontend/components/client/rendergridexplanations.tsx
+++ b/frontend/components/client/rendergridexplanations.tsx
@@ -1,15 +1,29 @@
 'use client';
 
 import { DatagridType, HeadersByDatagridType } from '@/config/macros/formdetails';
-import { Alert, Box, Card, CardContent, Chip, List, ListItem, Tooltip, Typography } from '@mui/joy';
+import {
+  AccordionGroup,
+  Accordion,
+  AccordionSummary,
+  AccordionDetails,
+  Alert,
+  Box,
+  Card,
+  CardContent,
+  Chip,
+  List,
+  ListItem,
+  Tooltip,
+  Typography
+} from '@mui/joy';
 import React from 'react';
 import WarningIcon from '@mui/icons-material/Warning';
 
 export default function RenderGridExplanations({ datagridType }: { datagridType: DatagridType }) {
   const categoryRegex = /alive(?:-not measured)?|dead|missing|broken below|stem dead/g;
-  const matches = HeadersByDatagridType[datagridType].find(obj => obj.label === 'status')?.explanation?.match(categoryRegex);
+  const matches = HeadersByDatagridType[datagridType].find(obj => obj.label === 'Status')?.explanation?.match(categoryRegex);
   const cleanedString = HeadersByDatagridType[datagridType]
-    .find(obj => obj.label === 'status')
+    .find(obj => obj.label === 'Status')
     ?.explanation?.replace(categoryRegex, '')
     .replace(/\s*,\s*/g, '')
     .trim();
@@ -22,67 +36,75 @@ export default function RenderGridExplanations({ datagridType }: { datagridType:
         width: '100%'
       }}
     >
-      <Typography level="title-lg" sx={{ alignSelf: 'center', justifyContent: 'center', alignContent: 'center', my: 2 }}>
-        Understanding the Headers
-      </Typography>
-      <Box
-        sx={{
-          display: 'grid',
-          gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
-          gap: '1rem',
-          mb: 1,
-          width: '100%', // Ensure the grid takes the full width
-          boxSizing: 'border-box'
-        }}
-      >
-        {HeadersByDatagridType[datagridType].map((header, index) => (
-          <Card key={index} size="sm" sx={{ flex: 1 }}>
-            <Typography level="title-sm" color="primary" sx={{ fontWeight: header.category === 'required' ? 'bold' : 'normal' }}>
-              {header.label}
+      <AccordionGroup>
+        <Accordion>
+          <AccordionSummary>
+            <Typography level="title-lg" sx={{ alignSelf: 'center', justifyContent: 'center', alignContent: 'center', my: 2 }}>
+              Understanding the Headers
             </Typography>
-            <CardContent>
-              {header.label === 'status' ? (
-                <Box display="flex" flex={1} flexDirection="column">
-                  <Typography level="body-sm">{cleanedString}</Typography>
-                  <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
-                    {matches?.map((category, index) => (
-                      <Chip key={index} variant="soft">
-                        {category}
-                      </Chip>
-                    ))}
-                  </Box>
-                </Box>
-              ) : (
-                <>
-                  <Typography level="body-sm">{header.explanation}</Typography>
-                  {header.label.includes('date') && (
-                    <Alert startDecorator={<WarningIcon fontSize="large" />} variant="soft" color="danger" sx={{ mb: 2 }}>
-                      <Typography component="div">
-                        Please note: For date fields, accepted formats are
-                        <List marker="decimal">
-                          <ListItem>
-                            <Tooltip size="lg" title="Accepted separators: '-' (dash), '.' (period) or '/' (forward-slash)">
-                              <Typography color="primary">YYYY-MM-DD</Typography>
-                            </Tooltip>
-                          </ListItem>
-                          <ListItem>
-                            <Tooltip size="lg" title="Accepted separators: '-' (dash), '.' (period) or '/' (forward-slash)">
-                              <Typography color="primary">DD-MM-YYYY</Typography>
-                            </Tooltip>
-                          </ListItem>
-                        </List>
-                        Hover over formats to see additionally accepted separators.
-                        <br />
-                        Please ensure your dates follow one of these formats.
-                      </Typography>
-                    </Alert>
-                  )}
-                </>
-              )}
-            </CardContent>
-          </Card>
-        ))}
-      </Box>
+          </AccordionSummary>
+          <AccordionDetails>
+            <Box
+              sx={{
+                display: 'grid',
+                gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
+                gap: '1rem',
+                mb: 1,
+                width: '100%', // Ensure the grid takes the full width
+                boxSizing: 'border-box'
+              }}
+            >
+              {HeadersByDatagridType[datagridType].map((header, index) => (
+                <Card key={index} size="sm" sx={{ flex: 1 }}>
+                  <Typography level="title-sm" color="primary" sx={{ fontWeight: header.category === 'required' ? 'bold' : 'normal' }}>
+                    {header.label}
+                  </Typography>
+                  <CardContent>
+                    {header.label === 'Status' ? (
+                      <Box display="flex" flex={1} flexDirection="column">
+                        <Typography level="body-sm">{cleanedString}</Typography>
+                        <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
+                          {matches?.map((category, index) => (
+                            <Chip key={index} variant="soft">
+                              {category}
+                            </Chip>
+                          ))}
+                        </Box>
+                      </Box>
+                    ) : (
+                      <>
+                        <Typography level="body-sm">{header.explanation}</Typography>
+                        {header.label.includes('date') && (
+                          <Alert startDecorator={<WarningIcon fontSize="large" />} variant="soft" color="danger" sx={{ mb: 2 }}>
+                            <Typography component="div">
+                              Please note: For date fields, accepted formats are
+                              <List marker="decimal">
+                                <ListItem>
+                                  <Tooltip size="lg" title="Accepted separators: '-' (dash), '.' (period) or '/' (forward-slash)">
+                                    <Typography color="primary">YYYY-MM-DD</Typography>
+                                  </Tooltip>
+                                </ListItem>
+                                <ListItem>
+                                  <Tooltip size="lg" title="Accepted separators: '-' (dash), '.' (period) or '/' (forward-slash)">
+                                    <Typography color="primary">DD-MM-YYYY</Typography>
+                                  </Tooltip>
+                                </ListItem>
+                              </List>
+                              Hover over formats to see additionally accepted separators.
+                              <br />
+                              Please ensure your dates follow one of these formats.
+                            </Typography>
+                          </Alert>
+                        )}
+                      </>
+                    )}
+                  </CardContent>
+                </Card>
+              ))}
+            </Box>
+          </AccordionDetails>
+        </Accordion>
+      </AccordionGroup>
     </Box>
   );
 }
diff --git a/frontend/components/datagrids/measurementscommons.tsx b/frontend/components/datagrids/measurementscommons.tsx
index 54aa94c4..5377c4f1 100644
--- a/frontend/components/datagrids/measurementscommons.tsx
+++ b/frontend/components/datagrids/measurementscommons.tsx
@@ -13,7 +13,9 @@ import {
   GridRowModes,
   GridRowModesModel,
   GridSortModel,
+  GridToolbarColumnsButton,
   GridToolbarContainer,
+  GridToolbarFilterButton,
   GridToolbarProps,
   GridToolbarQuickFilter,
   ToolbarPropsOverrides,
@@ -172,7 +174,10 @@ const EditToolbar = (props: EditToolbarProps) => {
         <Box sx={{ display: 'flex', flex: 1 }}>
           <Tooltip title={'Press Enter to apply filter'} open={isTyping} placement={'bottom'} arrow>
             <Box display={'flex'} alignItems={'center'}>
+              <GridToolbarColumnsButton />
+              <GridToolbarFilterButton />
               <GridToolbarQuickFilter
+                sx={{ ml: 2 }}
                 variant={'outlined'}
                 value={inputValue}
                 onKeyDown={handleKeyDown}
@@ -237,23 +242,28 @@ const EditToolbar = (props: EditToolbarProps) => {
         </Box>
       </Box>
       <Stack direction={'row'} spacing={2}>
-        {dynamicButtons.map((button: any, index: number) => (
-          <>
-            {button.tooltip ? (
+        <Dropdown>
+          <MenuButton>Other</MenuButton>
+          <Menu>
+            {dynamicButtons.map((button: any, index: number) => (
               <>
-                <Tooltip title={button.tooltip} placement={'bottom'} arrow>
-                  <Button key={index} onClick={button.onClick} variant={'contained'} color={'primary'}>
+                {button.tooltip ? (
+                  <>
+                    <Tooltip title={button.tooltip} placement={'bottom'} arrow>
+                      <MenuItem key={index} onClick={button.onClick} variant={'soft'} color={'primary'}>
+                        {button.label}
+                      </MenuItem>
+                    </Tooltip>
+                  </>
+                ) : (
+                  <MenuItem key={index} onClick={button.onClick} variant={'soft'} color={'primary'}>
                     {button.label}
-                  </Button>
-                </Tooltip>
+                  </MenuItem>
+                )}
               </>
-            ) : (
-              <Button key={index} onClick={button.onClick} variant={'contained'} color={'primary'}>
-                {button.label}
-              </Button>
-            )}
-          </>
-        ))}
+            ))}
+          </Menu>
+        </Dropdown>
       </Stack>
     </GridToolbarContainer>
   );
diff --git a/frontend/config/macros/formdetails.ts b/frontend/config/macros/formdetails.ts
index 73086cca..0d7a5aac 100644
--- a/frontend/config/macros/formdetails.ts
+++ b/frontend/config/macros/formdetails.ts
@@ -243,14 +243,14 @@ export const HeadersByDatagridType: Record<DatagridType, { label: string; explan
   [DatagridType.measurementssummaryview]: MeasurementSummaryViewHeaders.map(header => ({
     label: header,
     explanation: {
-      Quadrat: 'The name of the quadrat where measurements were taken.',
+      'Quadrat Name': 'The name of the quadrat where measurements were taken.',
       'Species Code': 'The unique code for the species measured.',
-      Tree: 'The tag or identifier for the tree measured.',
-      Stem: 'The tag or identifier for the stem measured.',
-      X: 'The local X-coordinate of the stem.',
-      Y: 'The local Y-coordinate of the stem.',
-      DBH: 'The diameter at breast height of the tree.',
-      HOM: 'The height from the ground where DBH was measured.',
+      'Tree Tag': 'The tag or identifier for the tree measured.',
+      'Stem Tag': 'The tag or identifier for the stem measured.',
+      'X (Stem)': 'The local X-coordinate of the stem.',
+      'Y (Stem)': 'The local Y-coordinate of the stem.',
+      'DBH (Diameter at Breast Height)': 'The diameter at breast height of the tree.',
+      'HOM (Height of Measure)': 'The height from the ground where DBH was measured.',
       Description: 'A text description of the measurement.',
       Attributes: 'Additional attributes associated with the measurement.'
     }[header],
@@ -300,9 +300,9 @@ export const HeadersByDatagridType: Record<DatagridType, { label: string; explan
     explanation: {
       Table: 'The name of the table where changes were made.',
       Record: 'The ID of the record that was changed.',
-      Op: 'The type of operation performed (e.g., insert, update, delete).',
-      Old: 'The state of the record before the change.',
-      New: 'The state of the record after the change.',
+      Operation: 'The type of operation performed (e.g., insert, update, delete).',
+      'Old Row': 'The state of the record before the change.',
+      'New Row': 'The state of the record after the change.',
       'Change Time': 'The timestamp of when the change occurred.',
       'Changed By': 'The user who performed the change.'
     }[header],