refactor(ui): replace MatrixInput with Matrix Glide Data Grid int…

…egration (#2138)

ANT-1557

webapp/package.json

@@ -27,6 +27,7 @@
     "clsx": "2.1.1",
     "d3": "5.16.0",
     "debug": "4.3.7",
+    "date-fns": "4.1.0",
     "draft-convert": "2.1.13",
     "draft-js": "0.11.7",
     "draftjs-to-html": "0.9.1",
@@ -83,6 +84,7 @@
     "@types/draft-js": "0.11.18",
     "@types/draftjs-to-html": "0.8.4",
     "@types/js-cookie": "3.0.6",
+    "@types/date-fns": "2.6.0",
     "@types/jsoneditor": "9.9.5",
     "@types/lodash": "4.17.9",
     "@types/node": "22.7.3",

webapp/public/locales/en/main.json

@@ -80,6 +80,7 @@
   "global.time.weekly": "Weekly",
   "global.time.monthly": "Monthly",
   "global.time.annual": "Annual",
+  "global.time.weekShort": "W.",
   "global.update.success": "Update successful",
   "global.errorLogs": "Error logs",
   "global.error.emptyName": "Name cannot be empty",

webapp/public/locales/fr/main.json

@@ -80,6 +80,7 @@
   "global.time.weekly": "Hebdomadaire",
   "global.time.monthly": "Mensuel",
   "global.time.annual": "Annuel",
+  "global.time.weekShort": "S.",
   "global.update.success": "Mise à jour réussie",
   "global.errorLogs": "Logs d'erreurs",
   "global.error.emptyName": "Le nom ne peut pas être vide",

webapp/src/common/types.ts

@@ -661,3 +661,24 @@ export interface TaskView {
 }
 
 export type ValidationReturn = string | true;
+
+export interface MatrixConfig {
+  url: string;
+  titleKey: string;
+  columnsNames?: string[];
+}
+
+export interface SplitMatrixContent {
+  type: "split";
+  matrices: [MatrixConfig, MatrixConfig];
+}
+
+export interface SingleMatrixContent {
+  type: "single";
+  matrix: MatrixConfig;
+}
+
+export interface MatrixItem {
+  titleKey: string;
+  content: SplitMatrixContent | SingleMatrixContent;
+}

webapp/src/components/App/Singlestudy/explore/Debug/Data/Matrix.tsx

@@ -12,20 +12,11 @@
  * This file is part of the Antares project.
  */
 
-import { MatrixStats } from "../../../../../../common/types";
-import MatrixInput from "../../../../../common/MatrixInput";
+import Matrix from "../../../../../common/Matrix";
 import type { DataCompProps } from "../utils";
 
-function Matrix({ studyId, filename, filePath, canEdit }: DataCompProps) {
-  return (
-    <MatrixInput
-      title={filename}
-      study={studyId}
-      url={filePath}
-      computStats={MatrixStats.NOCOL}
-      disableImport={!canEdit}
-    />
-  );
+function DebugMatrix({ studyId, filename, filePath, canEdit }: DataCompProps) {
+  return <Matrix title={filename} url={filePath} isImportDisabled={!canEdit} />;
 }
 
-export default Matrix;
+export default DebugMatrix;

webapp/src/components/App/Singlestudy/explore/Modelization/Areas/Hydro/Allocation/index.tsx

@@ -27,7 +27,7 @@ import {
 } from "./utils";
 import { SubmitHandlerPlus } from "../../../../../../../common/Form/types";
 import HydroMatrixDialog from "../HydroMatrixDialog";
-import { HydroMatrixType } from "../utils";
+import { HydroMatrix } from "../utils";
 import { FormBox, FormPaper } from "../style";
 import ViewMatrixButton from "../ViewMatrixButton";
 
@@ -84,7 +84,7 @@ function Allocation() {
       </FormPaper>
       {matrixDialogOpen && (
         <HydroMatrixDialog
-          type={HydroMatrixType.Allocation}
+          type={HydroMatrix.Allocation}
           open={matrixDialogOpen}
           onClose={() => setMatrixDialogOpen(false)}
         />

webapp/src/components/App/Singlestudy/explore/Modelization/Areas/Hydro/Allocation/utils.ts

@@ -12,12 +12,9 @@
  * This file is part of the Antares project.
  */
 
-import {
-  StudyMetadata,
-  Area,
-  MatrixType,
-} from "../../../../../../../../common/types";
+import { StudyMetadata, Area } from "../../../../../../../../common/types";
 import client from "../../../../../../../../services/api/client";
+import { MatrixDataDTO } from "../../../../../../../common/Matrix/shared/types";
 import { AreaCoefficientItem } from "../utils";
 
 ////////////////////////////////////////////////////////////////
@@ -58,7 +55,7 @@ export async function setAllocationFormFields(
 
 export const getAllocationMatrix = async (
   studyId: StudyMetadata["id"],
-): Promise<MatrixType> => {
+): Promise<MatrixDataDTO> => {
   const res = await client.get(
     `v1/studies/${studyId}/areas/hydro/allocation/matrix`,
   );

webapp/src/components/App/Singlestudy/explore/Modelization/Areas/Hydro/Correlation/index.tsx

@@ -27,7 +27,7 @@ import {
 } from "./utils";
 import Fields from "./Fields";
 import HydroMatrixDialog from "../HydroMatrixDialog";
-import { HydroMatrixType } from "../utils";
+import { HydroMatrix } from "../utils";
 import { FormBox, FormPaper } from "../style";
 import ViewMatrixButton from "../ViewMatrixButton";
 
@@ -79,7 +79,7 @@ function Correlation() {
       </FormPaper>
       {matrixDialogOpen && (
         <HydroMatrixDialog
-          type={HydroMatrixType.Correlation}
+          type={HydroMatrix.Correlation}
           open={matrixDialogOpen}
           onClose={() => setMatrixDialogOpen(false)}
         />

webapp/src/components/App/Singlestudy/explore/Modelization/Areas/Hydro/Correlation/utils.ts

@@ -12,12 +12,9 @@
  * This file is part of the Antares project.
  */
 
-import {
-  StudyMetadata,
-  Area,
-  MatrixType,
-} from "../../../../../../../../common/types";
+import { StudyMetadata, Area } from "../../../../../../../../common/types";
 import client from "../../../../../../../../services/api/client";
+import { MatrixDataDTO } from "../../../../../../../common/Matrix/shared/types";
 import { AreaCoefficientItem } from "../utils";
 
 ////////////////////////////////////////////////////////////////
@@ -58,7 +55,7 @@ export async function setCorrelationFormFields(
 
 export async function getCorrelationMatrix(
   studyId: StudyMetadata["id"],
-): Promise<MatrixType> {
+): Promise<MatrixDataDTO> {
   const res = await client.get(
     `v1/studies/${studyId}/areas/hydro/correlation/matrix`,
   );

webapp/src/components/App/Singlestudy/explore/Modelization/Areas/Hydro/HydroMatrix.tsx

@@ -12,20 +12,17 @@
  * This file is part of the Antares project.
  */
 
-import { useOutletContext } from "react-router";
-import { StudyMetadata } from "../../../../../../../common/types";
 import useAppSelector from "../../../../../../../redux/hooks/useAppSelector";
 import { getCurrentAreaId } from "../../../../../../../redux/selectors";
-import MatrixInput from "../../../../../../common/MatrixInput";
-import { Root } from "./style";
 import { MATRICES, HydroMatrixType } from "./utils";
+import Matrix from "../../../../../../common/Matrix";
+import { Box } from "@mui/material";
 
 interface Props {
   type: HydroMatrixType;
 }
 
 function HydroMatrix({ type }: Props) {
-  const { study } = useOutletContext<{ study: StudyMetadata }>();
   const areaId = useAppSelector(getCurrentAreaId);
 
   const hydroMatrix = MATRICES[type];
@@ -35,19 +32,19 @@ function HydroMatrix({ type }: Props) {
   ////////////////////////////////////////////////////////////////
 
   return (
-    <Root>
-      <MatrixInput
+    <Box sx={{ width: 1, height: 1, p: 1 }}>
+      <Matrix
         title={hydroMatrix.title}
-        columnsNames={hydroMatrix.cols}
-        rowNames={hydroMatrix.rows}
-        study={study}
         url={hydroMatrix.url.replace("{areaId}", areaId)}
-        computStats={hydroMatrix.stats}
-        fetchFn={hydroMatrix.fetchFn}
-        disableEdit={hydroMatrix.disableEdit}
-        enablePercentDisplay={hydroMatrix.enablePercentDisplay}
+        customColumns={hydroMatrix.columns}
+        customRowHeaders={hydroMatrix.rowHeaders}
+        aggregateColumns={hydroMatrix.aggregates}
+        enableDateTimeColumn={hydroMatrix.enableDateTimeColumn}
+        readOnly={hydroMatrix.readOnly}
+        showPercent={hydroMatrix.showPercent}
+        fetchMatrixData={hydroMatrix.fetchFn}
       />
-    </Root>
+    </Box>
   );
 }
 

webapp/src/components/App/Singlestudy/explore/Modelization/Areas/Hydro/HydroMatrixDialog.tsx

@@ -12,22 +12,91 @@
  * This file is part of the Antares project.
  */
 
-import { Button, Box } from "@mui/material";
+import { Button, Box, Skeleton } from "@mui/material";
 import { useTranslation } from "react-i18next";
+import { useState, useEffect } from "react";
 import BasicDialog, {
   BasicDialogProps,
 } from "../../../../../../common/dialogs/BasicDialog";
-import HydroMatrix from "./HydroMatrix";
+import Matrix from "../../../../../../common/Matrix";
 import { HydroMatrixType } from "./utils";
+import { getAllocationMatrix } from "./Allocation/utils";
+import { getCorrelationMatrix } from "./Correlation/utils";
+import { useOutletContext } from "react-router";
+import { StudyMetadata } from "../../../../../../../common/types";
+import { MatrixDataDTO } from "@/components/common/Matrix/shared/types";
+import useEnqueueErrorSnackbar from "@/hooks/useEnqueueErrorSnackbar";
+import { AxiosError } from "axios";
+
+interface AdaptedMatrixData {
+  data: number[][];
+  columns: string[];
+  index: string[];
+}
 
 interface Props {
   open: boolean;
   onClose: () => void;
   type: HydroMatrixType;
 }
 
+const MATRIX_FETCHERS = {
+  Allocation: getAllocationMatrix,
+  Correlation: getCorrelationMatrix,
+} as const;
+
 function HydroMatrixDialog({ open, onClose, type }: Props) {
+  /**
+   * !TEMPORARY SOLUTION - Matrix Data Model Adaptation
+   *
+   * This component handles a specific case (Allocation, Correlation).
+   * They receive their columns and row headers from the backend as numeric arrays.
+   * This differs from the standard Matrix component usage where these properties expect string arrays
+   * representing actual header labels.
+   *
+   * Current scenario:
+   * - Backend returns {columns: number[], index: number[]} for these specific matrices
+   * - Matrix component expects {columns: string[], rowHeaders: string[]} for its headers
+   *
+   * Future API model update will:
+   * - Rename 'index' to 'rowHeaders' to better reflect its purpose
+   * - Return properly formatted string arrays for header labels
+   * - Allow using the standard HydroMatrix component without this adapter
+   *
+   * TODO - Once the API is updated:
+   * 1. The model adapter layer will be removed
+   * 2. These matrices will use the HydroMatrix component directly
+   * 3. All matrices will follow the same data structure pattern
+   */
+
   const { t } = useTranslation();
+  const { study } = useOutletContext<{ study: StudyMetadata }>();
+  const enqueueErrorSnackbar = useEnqueueErrorSnackbar();
+  const fetchFn = MATRIX_FETCHERS[type as keyof typeof MATRIX_FETCHERS];
+  const [matrix, setMatrix] = useState<AdaptedMatrixData | undefined>(
+    undefined,
+  );
+
+  const matrixModelAdapter = (apiData: MatrixDataDTO): AdaptedMatrixData => ({
+    data: apiData.data,
+    columns: apiData.columns.map(String),
+    index: apiData.index.map(String), // Will be renamed to rowHeaders in future API version
+  });
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const data = await fetchFn(study.id);
+        setMatrix(matrixModelAdapter(data));
+      } catch (error) {
+        enqueueErrorSnackbar(t("data.error.matrix"), error as AxiosError);
+      }
+    };
+
+    fetchData();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [study.id, type, t]);
+
   const dialogProps: BasicDialogProps = {
     open,
     onClose,
@@ -38,6 +107,10 @@ function HydroMatrixDialog({ open, onClose, type }: Props) {
     ),
   };
 
+  ////////////////////////////////////////////////////////////////
+  // JSX
+  ////////////////////////////////////////////////////////////////
+
   return (
     <BasicDialog
       {...dialogProps}
@@ -48,7 +121,21 @@ function HydroMatrixDialog({ open, onClose, type }: Props) {
       maxWidth="xl"
     >
       <Box sx={{ width: 1, height: 1, p: 2 }}>
-        <HydroMatrix type={type} />
+        {matrix ? (
+          <Matrix
+            title={`${type} Matrix`}
+            url=""
+            customColumns={matrix.columns}
+            customRowHeaders={matrix.index}
+            fetchMatrixData={fetchFn}
+            readOnly
+            enableDateTimeColumn={false}
+            enableTimeSeriesColumns={false}
+            isImportDisabled
+          />
+        ) : (
+          <Skeleton sx={{ height: 1, transform: "none" }} />
+        )}
       </Box>
     </BasicDialog>
   );