feat(ui-digest): add frontend digest rework

webapp/src/components/App/Singlestudy/explore/Results/ResultDetails/index.tsx

@@ -196,7 +196,7 @@ function ResultDetails() {
         type: Column.DateTime,
         editable: false,
       },
-      ...generateResultColumns(resultColHeaders),
+      ...generateResultColumns({ titles: resultColHeaders }),
     ]);
   }, [matrixRes.data, resultColHeaders]);
 

webapp/src/components/common/Matrix/components/MatrixGridSynthesis/index.tsx

@@ -88,7 +88,7 @@ export function MatrixGridSynthesis({
         rows={data.length}
         columns={columns}
         getCellContent={getCellContent}
-        rowMarkers="both"
+        rowMarkers="none"
         smoothScrollX
         smoothScrollY
         rowHeight={30}

webapp/src/components/common/Matrix/shared/types.ts

@@ -75,6 +75,11 @@ export type ResultColumn = Omit<EnhancedGridColumn, "title"> & {
   title: string[];
 };
 
+export interface ResultColumnsOptions {
+  titles: string[][];
+  width?: number;
+}
+
 export type AggregateConfig = AggregateType[] | boolean | "stats" | "all";
 
 export interface MatrixAggregates {

webapp/src/components/common/Matrix/shared/utils.ts

@@ -23,6 +23,7 @@ import {
   type FormatGridNumberOptions,
   DataColumnsConfig,
   ResultColumn,
+  ResultColumnsOptions,
 } from "./types";
 import { parseISO, Locale } from "date-fns";
 import { fr, enUS } from "date-fns/locale";
@@ -383,16 +384,21 @@ export function groupResultColumns(
  *   - [0]: Variable name (e.g., "OV. COST")
  *   - [1]: Unit (e.g., "Euro", "MW")
  *   - [2]: Statistic type (e.g., "MIN", "MAX", "STD")
- *
+ * @param width - The width of each column
  * @returns Array of ResultColumn objects ready for use in result matrices
  *
  * @see groupResultColumns - Use this function to apply grouping to the generated columns
  */
-export function generateResultColumns(titles: string[][]): ResultColumn[] {
+
+export function generateResultColumns({
+  titles,
+  width,
+}: ResultColumnsOptions): ResultColumn[] {
   return titles.map((title, index) => ({
     id: `custom${index + 1}`,
-    title: title,
+    title,
     type: Column.Number,
+    width,
     editable: false,
   }));
 }

webapp/src/components/common/dialogs/DigestDialog/DigestMatrix.tsx

@@ -0,0 +1,75 @@
+/**
+ * Copyright (c) 2024, RTE (https://www.rte-france.com)
+ *
+ * See AUTHORS.txt
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * SPDX-License-Identifier: MPL-2.0
+ *
+ * This file is part of the Antares project.
+ */
+
+import { MatrixGridSynthesis } from "@/components/common/Matrix/components/MatrixGridSynthesis";
+import {
+  generateDataColumns,
+  generateResultColumns,
+  groupResultColumns,
+} from "@/components/common/Matrix/shared/utils";
+import { Box } from "@mui/material";
+import type { DigestMatrix } from "./types";
+import EmptyView from "../../page/SimpleContent";
+import { GridOff } from "@mui/icons-material";
+import { useTranslation } from "react-i18next";
+
+const isGroupedColumns = (
+  columns: string[] | string[][],
+): columns is string[][] => {
+  return Array.isArray(columns[0]);
+};
+
+const isColumns = (columns: string[] | string[][]): columns is string[] => {
+  return !isGroupedColumns(columns);
+};
+
+interface DigestMatrixProps {
+  matrix: DigestMatrix;
+}
+
+function DigestMatrix({ matrix }: DigestMatrixProps) {
+  const [t] = useTranslation();
+
+  const columns = matrix.groupedColumns
+    ? groupResultColumns(
+        generateResultColumns({
+          titles: isGroupedColumns(matrix.columns) ? matrix.columns : [],
+          width: 120,
+        }),
+      )
+    : generateDataColumns({
+        timeSeriesColumns: false,
+        count: matrix.columns.length,
+        customColumns: isColumns(matrix.columns) ? matrix.columns : undefined,
+        width: 120,
+      });
+
+  ////////////////////////////////////////////////////////////////
+  // JSX
+  ////////////////////////////////////////////////////////////////
+
+  return (
+    <Box sx={{ p: 2 }}>
+      <Box sx={{ width: 1, height: 800 }}>
+        {!matrix.data[0]?.length ? (
+          <EmptyView title={t("matrix.message.matrixEmpty")} icon={GridOff} />
+        ) : (
+          <MatrixGridSynthesis data={matrix.data} columns={columns} />
+        )}
+      </Box>
+    </Box>
+  );
+}
+
+export default DigestMatrix;

webapp/src/components/common/dialogs/DigestDialog/DigestTabs.tsx

@@ -0,0 +1,59 @@
+/**
+ * Copyright (c) 2024, RTE (https://www.rte-france.com)
+ *
+ * See AUTHORS.txt
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * SPDX-License-Identifier: MPL-2.0
+ *
+ * This file is part of the Antares project.
+ */
+
+import { Box } from "@mui/material";
+import TabsView from "@/components/common/TabsView";
+import { DigestData } from "./types";
+import DigestMatrix from "./DigestMatrix";
+
+interface DigestTabsProps {
+  matrices: DigestData;
+}
+
+export function DigestTabs({ matrices }: DigestTabsProps) {
+  const tabItems = [
+    {
+      label: "Area",
+      content: matrices.area && <DigestMatrix matrix={matrices.area} />,
+    },
+    {
+      label: "Districts",
+      content: matrices.districts && (
+        <DigestMatrix matrix={matrices.districts} />
+      ),
+    },
+    {
+      label: "Flow Linear",
+      content: matrices.flowLinear && (
+        <DigestMatrix matrix={matrices.flowLinear} />
+      ),
+    },
+    {
+      label: "Flow Quadratic",
+      content: matrices.flowQuadratic && (
+        <DigestMatrix matrix={matrices.flowQuadratic} />
+      ),
+    },
+  ];
+
+  ////////////////////////////////////////////////////////////////
+  // JSX
+  ////////////////////////////////////////////////////////////////
+
+  return (
+    <Box sx={{ height: "100%", display: "flex", flexDirection: "column" }}>
+      <TabsView items={tabItems} divider />
+    </Box>
+  );
+}

webapp/src/components/common/dialogs/DigestDialog/index.tsx

@@ -0,0 +1,72 @@
+/**
+ * Copyright (c) 2024, RTE (https://www.rte-france.com)
+ *
+ * See AUTHORS.txt
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * SPDX-License-Identifier: MPL-2.0
+ *
+ * This file is part of the Antares project.
+ */
+
+import { Skeleton } from "@mui/material";
+import OkDialog, { OkDialogProps } from "../OkDialog";
+import UsePromiseCond from "../../utils/UsePromiseCond";
+import type { LaunchJob } from "../../../../common/types";
+import { useTranslation } from "react-i18next";
+import { DigestTabs } from "./DigestTabs";
+import client from "@/services/api/client";
+import { DigestData } from "./types";
+import usePromiseWithSnackbarError from "@/hooks/usePromiseWithSnackbarError";
+
+interface DigestDialogProps
+  extends Pick<OkDialogProps, "open" | "onOk" | "onClose"> {
+  studyId: LaunchJob["studyId"];
+  outputId: LaunchJob["outputId"];
+}
+
+function DigestDialog({
+  studyId,
+  outputId,
+  ...dialogProps
+}: DigestDialogProps) {
+  const { t } = useTranslation();
+
+  const digestRes = usePromiseWithSnackbarError(
+    () =>
+      client.get<DigestData>(
+        `/v1/private/studies/${studyId}/outputs/${outputId}/digest-ui`,
+      ),
+    {
+      errorMessage: t("data.error.matrix"),
+      deps: [studyId, outputId],
+    },
+  );
+
+  ////////////////////////////////////////////////////////////////
+  // JSX
+  ////////////////////////////////////////////////////////////////
+
+  return (
+    <OkDialog
+      {...dialogProps}
+      title="Digest"
+      okButtonText={t("global.close")}
+      fullScreen
+      sx={{ m: 5 }}
+    >
+      <UsePromiseCond
+        response={digestRes}
+        ifPending={() => <Skeleton sx={{ height: 1, transform: "none" }} />}
+        ifFulfilled={(matrices) =>
+          matrices.data && <DigestTabs matrices={matrices.data} />
+        }
+      />
+    </OkDialog>
+  );
+}
+
+export default DigestDialog;

webapp/src/components/common/dialogs/DigestDialog/types.ts

@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) 2024, RTE (https://www.rte-france.com)
+ *
+ * See AUTHORS.txt
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * SPDX-License-Identifier: MPL-2.0
+ *
+ * This file is part of the Antares project.
+ */
+
+export interface DigestMatrix {
+  columns: string[] | string[][];
+  data: string[][];
+  groupedColumns: boolean;
+}
+
+export interface DigestData {
+  area: DigestMatrix;
+  districts: DigestMatrix;
+  flowLinear: DigestMatrix;
+  flowQuadratic: DigestMatrix;
+}