feat(ui): update date generation using date-fns instead of moment

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/components/App/Singlestudy/explore/Results/ResultDetails/index.tsx

@@ -53,14 +53,17 @@ import UsePromiseCond, {
 } from "../../../../../common/utils/UsePromiseCond";
 import useStudySynthesis from "../../../../../../redux/hooks/useStudySynthesis";
 import ButtonBack from "../../../../../common/ButtonBack";
-import moment from "moment";
 import MatrixGrid from "../../../../../common/MatrixGrid/index.tsx";
-import { generateCustomColumns } from "../../../../../common/MatrixGrid/utils.ts";
+import {
+  generateCustomColumns,
+  generateDateTime,
+} from "../../../../../common/MatrixGrid/utils.ts";
 import { ColumnTypes } from "../../../../../common/MatrixGrid/types.ts";
 import SplitView from "../../../../../common/SplitView/index.tsx";
 import ResultFilters from "./ResultFilters.tsx";
 import { toError } from "../../../../../../utils/fnUtils.ts";
 import EmptyView from "../../../../../common/page/SimpleContent.tsx";
+import { getStudyMatrixIndex } from "../../../../../../services/api/matrix.ts";
 
 function ResultDetails() {
   const { study } = useOutletContext<{ study: StudyMetadata }>();
@@ -151,6 +154,15 @@ function ResultDetails() {
     },
   );
 
+  const { data: dateTimeMetadata } = usePromise(
+    () => getStudyMatrixIndex(study.id, path),
+    {
+      deps: [study.id, path],
+    },
+  );
+
+  const dateTime = dateTimeMetadata && generateDateTime(dateTimeMetadata);
+
   const synthesisRes = usePromise(
     () => {
       if (outputId && selectedItem && isSynthesis) {
@@ -164,47 +176,6 @@ function ResultDetails() {
     },
   );
 
-  // !NOTE: Workaround to display the date in the correct format, to be replaced by a proper solution.
-  const dateTimeFromIndex = useMemo(() => {
-    if (!matrixRes.data) {
-      return [];
-    }
-
-    // Annual format has a static string
-    if (timestep === Timestep.Annual) {
-      return ["Annual"];
-    }
-
-    // Directly use API's week index (handles 53 weeks) as no formatting is required.
-    // !NOTE: Suboptimal: Assumes API consistency, lacks flexibility.
-    if (timestep === Timestep.Weekly) {
-      return matrixRes.data.index.map((weekNumber) => weekNumber.toString());
-    }
-
-    // Original date/time format mapping for moment parsing
-    const parseFormat = {
-      [Timestep.Hourly]: "MM/DD HH:mm",
-      [Timestep.Daily]: "MM/DD",
-      [Timestep.Monthly]: "MM",
-    }[timestep];
-
-    // Output formats for each timestep to match legacy UI requirements
-    const outputFormat = {
-      [Timestep.Hourly]: "DD MMM HH:mm  I",
-      [Timestep.Daily]: "DD MMM  I",
-      [Timestep.Monthly]: "MMM",
-    }[timestep];
-
-    const needsIndex =
-      timestep === Timestep.Hourly || timestep === Timestep.Daily;
-
-    return matrixRes.data.index.map((dateTime, i) =>
-      moment(dateTime, parseFormat).format(
-        outputFormat.replace("I", needsIndex ? ` - ${i + 1}` : ""),
-      ),
-    );
-  }, [matrixRes.data, timestep]);
-
   ////////////////////////////////////////////////////////////////
   // Event Handlers
   ////////////////////////////////////////////////////////////////
@@ -320,7 +291,7 @@ function ResultDetails() {
                       titles: matrix.columns,
                     }),
                   ]}
-                  dateTime={dateTimeFromIndex}
+                  dateTime={dateTime}
                   isReaOnlyEnabled
                 />
               )

webapp/src/components/common/MatrixGrid/types.ts

@@ -22,6 +22,8 @@ import {
 // Enums
 ////////////////////////////////////////////////////////////////
 
+// TODO update enums to be singular
+
 export const ColumnTypes = {
   DateTime: "datetime",
   Number: "number",
@@ -46,13 +48,37 @@ export const Aggregates = {
   Total: "total",
 } as const;
 
+export const TimeFrequency = {
+  // TODO update old enum occurrences
+  ANNUAL: "annual",
+  MONTHLY: "monthly",
+  WEEKLY: "weekly",
+  DAILY: "daily",
+  HOURLY: "hourly",
+} as const;
+
 ////////////////////////////////////////////////////////////////
 // Types
 ////////////////////////////////////////////////////////////////
 
 // Derived types
 export type ColumnType = (typeof ColumnTypes)[keyof typeof ColumnTypes];
+// TODO add sufix Type
 export type Operation = (typeof Operations)[keyof typeof Operations];
+export type AggregateType = (typeof Aggregates)[keyof typeof Aggregates];
+export type TimeFrequencyType =
+  (typeof TimeFrequency)[keyof typeof TimeFrequency];
+
+export type DateIncrementFunction = (date: Date, amount: number) => Date;
+export type FormatFunction = (date: Date, firstWeekSize: number) => string;
+
+// !NOTE: This is temporary, date/time array should be generated by the API
+export interface DateTimeMetadataDTO {
+  start_date: string;
+  steps: number;
+  first_week_size: number;
+  level: TimeFrequencyType;
+}
 
 export interface TimeSeriesColumnOptions {
   count: number;
@@ -75,7 +101,6 @@ export interface EnhancedGridColumn extends BaseGridColumn {
   editable: boolean;
 }
 
-export type AggregateType = (typeof Aggregates)[keyof typeof Aggregates];
 export type AggregateConfig = AggregateType[] | boolean | "stats" | "all";
 
 export interface MatrixAggregates {
@@ -111,8 +136,3 @@ export interface MatrixUpdateDTO {
   coordinates: number[][]; // Array of [col, row] pairs
   operation: MatrixUpdate;
 }
-
-export type DateIncrementStrategy = (
-  date: moment.Moment,
-  step: number,
-) => moment.Moment;

webapp/src/components/common/MatrixGrid/useGridCellContent.ts

@@ -20,7 +20,7 @@ import {
   ColumnTypes,
   MatrixAggregates,
 } from "./types";
-import { formatDateTime, formatNumber } from "./utils";
+import { formatNumber } from "./utils";
 
 type CellContentGenerator = (
   row: number,
@@ -55,7 +55,7 @@ const cellContentGenerators: Record<ColumnType, CellContentGenerator> = {
   [ColumnTypes.DateTime]: (row, col, column, data, dateTime) => ({
     kind: GridCellKind.Text,
     data: "", // Date/time columns are not editable
-    displayData: formatDateTime(dateTime?.[row] ?? ""),
+    displayData: dateTime?.[row] ?? "",
     readonly: !column.editable,
     allowOverlay: false,
   }),