Skip to content

Commit

Permalink
adding baseline filtration system back in
Browse files Browse the repository at this point in the history
  • Loading branch information
@siddheshraze
siddheshraze committed Dec 28, 2024
1 parent 8ccd258 commit 3a25f4d
Show file tree
Hide file tree
Showing 3 changed files with 119 additions and 87 deletions.
148 changes: 85 additions & 63 deletions frontend/components/client/rendergridexplanations.tsx
View file
Original file line number Diff line number Diff line change
@@ -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();
Expand All @@ -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>
);
}
38 changes: 24 additions & 14 deletions frontend/components/datagrids/measurementscommons.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,9 @@ import {
GridRowModes,
GridRowModesModel,
GridSortModel,
GridToolbarColumnsButton,
GridToolbarContainer,
GridToolbarFilterButton,
GridToolbarProps,
GridToolbarQuickFilter,
ToolbarPropsOverrides,
Expand Down Expand Up @@ -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}
Expand Down Expand Up @@ -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>
);
Expand Down
20 changes: 10 additions & 10 deletions frontend/config/macros/formdetails.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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],
Expand Down Expand Up @@ -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],
Expand Down

0 comments on commit 3a25f4d

Please sign in to comment.