MDE/PKFE-16 refactoring

app/front-end/.eslintrc.cjs

@@ -27,7 +27,7 @@ module.exports = {
     'react/react-in-jsx-scope': 'off', // React 17+ no longer requires importing React to use JSX
     'react/prop-types': 'off', // TypeScript handles type-checking for props
     '@typescript-eslint/no-explicit-any': 'warn', // Warns against using 'any' type
-    'no-console': 'warn',
+    'no-console': '["error", { allow: ["warn", "error"] }]',
     'no-debugger': 'warn',
     'no-multiple-empty-lines': ['error', { max: 1, maxEOF: 0, maxBOF: 0 }],
     'eqeqeq': ['error', 'always'], // Enforces the use of === and !== instead of == and !=

app/front-end/src/features/editor/components/editorView/editorColumnMenu.tsx

@@ -1,5 +1,6 @@
 import { EditorColumnMenuAggregationItem } from '@/features/editor/components/editorView';
-import { ColumnAggregation, EditorColumnMenuAggregationActions } from '@/features/editor/types';
+import { useWorkspaceContext } from '@/features/editor/hooks';
+import { FileContentAggregationActions } from '@/features/editor/types';
 import { Divider } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import { GridColumnMenuContainer, GridColumnMenuHideItem, GridColumnMenuProps } from '@mui/x-data-grid';
@@ -9,44 +10,35 @@ const StyledGridColumnMenuContainer = styled(GridColumnMenuContainer)(({ theme }
 }));
 
 interface GridColumnMenuContainerProps extends GridColumnMenuProps {
-  aggregationValues: ColumnAggregation;
-  handleAggregation: (field: string, action: EditorColumnMenuAggregationActions) => void;
+  handleAggregation: (column: string, action: FileContentAggregationActions) => void;
 }
 
 /**
- * `EditorColumnMenu` component customizes the column menu in a DataGrid with a styled container.
+ * `EditorColumnMenu` component provides a custom column menu for data grid columns,
+ * allowing users to apply aggregations and hide columns.
  *
- * @description This component extends the default column menu functionality of the DataGrid by applying custom styles
- * to the menu container. The `StyledGridColumnMenuContainer` applies a background color from the theme's secondary palette
- * to the menu. The menu includes a `GridColumnMenuHideItem` for hiding the column, which invokes the `hideMenu` function
- * when clicked.
+ * @description
+ * The `EditorColumnMenu` is used within a `DataGrid` to offer additional options for column management.
+ * It includes options for applying different aggregation actions (e.g., sum, average) to the column data,
+ * and provides an option to hide the column.
  *
- * @component
- *
- * @param {GridColumnMenuContainerProps} props - The props for the component.
- * @param {() => void} props.hideMenu - A callback function to hide the column menu.
- * @param {object} props.colDef - Column definition object passed to the menu.
- * @param {GridColumnMenuProps} [other] - Other props that are passed to the `GridColumnMenuContainer`.
+ * - **Aggregation:** Users can select from various aggregation actions (sum, average, minimum, maximum, count) for the column.
+ * - **Hide Column:** Provides an option to hide the column from the data grid.
  *
- * @example
- * // Example usage of the EditorColumnMenu component
- * <EditorColumnMenu
- *   hideMenu={() => console.log('Hide menu')}
- *   colDef={columnDefinition}
- * />
+ * This component leverages `EditorColumnMenuAggregationItem` to render the aggregation options and `GridColumnMenuHideItem` for hiding the column.
  *
- * @returns {JSX.Element} A styled `GridColumnMenuContainer` containing a `GridColumnMenuHideItem`.
+ * @component
  */
 export const EditorColumnMenu: React.FC<GridColumnMenuContainerProps> = ({
-  aggregationValues,
   handleAggregation,
   hideMenu,
   colDef,
   ...other
 }) => {
-  const aggregationActiveAction = aggregationValues[colDef.field]
-    ? aggregationValues[colDef.field].action
-    : EditorColumnMenuAggregationActions.NONE;
+  const { fileContent } = useWorkspaceContext();
+  const aggregationActiveAction = fileContent.aggregations[colDef.field]
+    ? fileContent.aggregations[colDef.field].action
+    : FileContentAggregationActions.NONE;
 
   return (
     <StyledGridColumnMenuContainer hideMenu={hideMenu} colDef={colDef} {...other}>

app/front-end/src/features/editor/components/editorView/editorColumnMenuAggregationItem.tsx

@@ -1,24 +1,51 @@
-import { EditorColumnMenuAggregationActions } from '@/features/editor/types';
+import { FileContentAggregationActions } from '@/features/editor/types';
 import { Functions as FunctionsIcon } from '@mui/icons-material';
 import { Box, FormControl, InputLabel, MenuItem, Select, SelectChangeEvent, useTheme } from '@mui/material';
 import { MouseEvent, useState } from 'react';
 
 export interface EditorColumnMenuAggregationItemProps {
-  initialValue: EditorColumnMenuAggregationActions;
+  initialValue: FileContentAggregationActions;
   onClick: (event: MouseEvent) => void;
-  onAction: (action: EditorColumnMenuAggregationActions) => void;
+  onAction: (action: FileContentAggregationActions) => void;
 }
 
+/**
+ * `EditorColumnMenuAggregationItem` renders a dropdown menu for selecting aggregation actions on a column.
+ *
+ * @description
+ * This component provides a menu with various aggregation options (Sum, Average, Minimum, Maximum, Count) for a column in the data grid.
+ *
+ * The component:
+ * - Displays an icon and a dropdown menu with aggregation options.
+ * - Allows users to select an aggregation action from the dropdown.
+ * - Calls `onAction` with the selected action when the selection changes.
+ * - Calls `onClick` when a menu item is clicked.
+ *
+ * @component
+ *
+ * @param {FileContentAggregationActions} initialValue - The initial aggregation action to display in the dropdown.
+ * @param {(event: MouseEvent) => void} onClick - Callback triggered when a menu item is clicked.
+ * @param {(action: FileContentAggregationActions) => void} onAction - Callback triggered when an aggregation action is selected.
+ *
+ * @example
+ * <EditorColumnMenuAggregationItem
+ *   initialValue={FileContentAggregationActions.NONE}
+ *   onClick={(event) => console.log('Menu item clicked')}
+ *   onAction={(action) => console.log('Selected action:', action)}
+ * />
+ *
+ * @returns {JSX.Element} The rendered dropdown menu for column aggregation.
+ */
 export const EditorColumnMenuAggregationItem: React.FC<EditorColumnMenuAggregationItemProps> = ({
   initialValue,
   onClick,
   onAction,
 }) => {
   const Theme = useTheme();
-  const [value, setValue] = useState<EditorColumnMenuAggregationActions>(initialValue);
+  const [value, setValue] = useState<FileContentAggregationActions>(initialValue);
 
   const handleChange = (event: SelectChangeEvent) => {
-    const action = event.target.value as EditorColumnMenuAggregationActions;
+    const action = event.target.value as FileContentAggregationActions;
     setValue(action);
     onAction(action);
   };
@@ -38,22 +65,22 @@ export const EditorColumnMenuAggregationItem: React.FC<EditorColumnMenuAggregati
       <FormControl fullWidth>
         <InputLabel sx={{ color: Theme.palette.text.primary }}>Aggregation</InputLabel>
         <Select id={'aggregation-select'} label={'Aggregation'} value={value} onChange={handleChange}>
-          <MenuItem value={EditorColumnMenuAggregationActions.NONE} onClick={onClick}>
+          <MenuItem value={FileContentAggregationActions.NONE} onClick={onClick}>
             ...
           </MenuItem>
-          <MenuItem value={EditorColumnMenuAggregationActions.SUM} onClick={onClick}>
+          <MenuItem value={FileContentAggregationActions.SUM} onClick={onClick}>
             Sum
           </MenuItem>
-          <MenuItem value={EditorColumnMenuAggregationActions.AVG} onClick={onClick}>
+          <MenuItem value={FileContentAggregationActions.AVG} onClick={onClick}>
             Average
           </MenuItem>
-          <MenuItem value={EditorColumnMenuAggregationActions.MIN} onClick={onClick}>
+          <MenuItem value={FileContentAggregationActions.MIN} onClick={onClick}>
             Minimum
           </MenuItem>
-          <MenuItem value={EditorColumnMenuAggregationActions.MAX} onClick={onClick}>
+          <MenuItem value={FileContentAggregationActions.MAX} onClick={onClick}>
             Maximum
           </MenuItem>
-          <MenuItem value={EditorColumnMenuAggregationActions.COUNT} onClick={onClick}>
+          <MenuItem value={FileContentAggregationActions.COUNT} onClick={onClick}>
             Count
           </MenuItem>
         </Select>

app/front-end/src/features/editor/components/editorView/editorHeader.tsx

@@ -1,12 +1,25 @@
-import { ColumnAggregation } from '@/features/editor/types';
+import { FileContentAggregationModel } from '@/features/editor/types';
 import { Box, Typography, useTheme } from '@mui/material';
 import React from 'react';
 
 export interface EditorHeaderProps {
   columnName: string;
-  gridColumnsAggregation: ColumnAggregation;
+  gridColumnsAggregation: FileContentAggregationModel;
 }
 
+/**
+ * `EditorHeader` component renders a customizable header for a column in the data grid.
+ *
+ * @description
+ * The `EditorHeader` component is used to display the column header in the `DataGrid` component. It provides visual cues for data aggregation applied to the column, if any.
+ *
+ * - If aggregation data exists for the column, the header shows the aggregation action (e.g., sum, average) along with the column name and the aggregated value.
+ * - If no aggregation data is available for the column, it simply displays the column name.
+ *
+ * The component utilizes Material-UI's `Box` and `Typography` for layout and styling, and `useTheme` to access theme colors.
+ *
+ * @component
+ */
 export const EditorHeader: React.ElementType<EditorHeaderProps> = ({ columnName, gridColumnsAggregation }) => {
   const Theme = useTheme();