feat: integrate translation for results components and improve user feedback messages

- Added translation support for various labels and messages in ResultsDialogViews, ResultsGraphs, ResultsGraphsSelection, ResultsGraphsSwitch, ResultsTabHyperparameters, ResultsTabInfo, ResultsTabInfoDescription, ResultsTabMetricsRuns, ResultsTabMetricsToggle, ResultsTabParametersDisplay, ResultsTabParametersToggle, ResultsTable, ResultsTableLayout.
- Updated error messages and labels to enhance user experience and accessibility.
- Implemented dynamic translations for display set names and metrics in ResultsTabMetricsRuns.
- Improved consistency in user interface text across different components.

Author: Irozuku

DashAI/front/src/components/experiments/SplitDatasetRows.jsx

@@ -408,7 +408,7 @@ function SplitDatasetRows({
               <Grid size={{ xs: 4 }}>
                 <TextField
                   id="train"
-                  label={t("common:trainSubject")}
+                  label={t("common:train")}
                   autoComplete="off"
                   size="small"
                   error={manualSplitError}
@@ -428,7 +428,7 @@ function SplitDatasetRows({
               <Grid size={{ xs: 4 }}>
                 <TextField
                   id="test"
-                  label={t("common:testSubject")}
+                  label={t("common:test")}
                   autoComplete="off"
                   size="small"
                   error={manualSplitError}

DashAI/front/src/components/experiments/metrics/MetricsSelector.jsx

@@ -138,7 +138,7 @@ export default function MetricsSelector({
             onClick={() => selectAllForSplit("train")}
             variant="contained"
           >
-            {t("common:trainSubject")}
+            {t("common:train")}
           </Button>
           <Button
             onClick={() => selectAllForSplit("validation")}
@@ -147,7 +147,7 @@ export default function MetricsSelector({
             {t("common:validation")}
           </Button>
           <Button onClick={() => selectAllForSplit("test")} variant="contained">
-            {t("common:testSubject")}
+            {t("common:test")}
           </Button>
         </Stack>
 

DashAI/front/src/components/models/SessionVisualization.jsx

@@ -234,17 +234,17 @@ export default function SessionVisualization({
                   >
                     {hasTrainMetrics && (
                       <ToggleButton value="train">
-                        {t("models:label.train")}
+                        {t("common:train")}
                       </ToggleButton>
                     )}
                     {hasValidationMetrics && (
                       <ToggleButton value="validation">
-                        {t("models:label.validation")}
+                        {t("common:validation")}
                       </ToggleButton>
                     )}
                     {hasTestMetrics && (
                       <ToggleButton value="test">
-                        {t("models:label.test")}
+                        {t("common:test")}
                       </ToggleButton>
                     )}
                   </ToggleButtonGroup>

DashAI/front/src/pages/results/components/LiveMetricsChart.jsx

@@ -21,8 +21,10 @@ import {
 } from "recharts";
 import { useEffect, useRef, useState } from "react";
 import { getExperimentById } from "../../../api/experiment";
+import { useTranslation } from "react-i18next";
 
 export function LiveMetricsChart({ run }) {
+  const { t } = useTranslation(["models", "common"]);
   const [level, setLevel] = useState(null);
   const [split, setSplit] = useState("TRAIN");
   const [data, setData] = useState({});
@@ -301,7 +303,7 @@ export function LiveMetricsChart({ run }) {
           <Select
             multiple
             value={selectedMetrics}
-            label="Metrics"
+            label={t("common:metrics")}
             onChange={handleMetricChange}
             renderValue={(selected) => selected.join(", ")}
           >
@@ -315,9 +317,9 @@ export function LiveMetricsChart({ run }) {
       </Box>
 
       <Tabs value={split} onChange={(_, v) => setSplit(v)} sx={{ mb: 2 }}>
-        <Tab label="Train" value="TRAIN" />
-        <Tab label="Validation" value="VALIDATION" />
-        <Tab label="Test" value="TEST" />
+        <Tab label={t("common:train")} value="TRAIN" />
+        <Tab label={t("common:validation")} value="VALIDATION" />
+        <Tab label={t("common:test")} value="TEST" />
       </Tabs>
 
       {chartData.length === 0 || selectedMetrics.length === 0 ? (
@@ -329,7 +331,7 @@ export function LiveMetricsChart({ run }) {
           border="1px dashed grey"
         >
           <Typography color="textSecondary">
-            No metrics available for this view
+            {t("models:label.noMetricsAvailableForThisView")}
           </Typography>
         </Box>
       ) : (
@@ -365,21 +367,21 @@ export function LiveMetricsChart({ run }) {
             onClick={() => handleLevelChange("TRIAL")}
             disabled={!hasTrialData}
           >
-            Trial
+            {t("models:label.trial")}
           </Button>
           <Button
             variant={level === "STEP" ? "contained" : "outlined"}
             onClick={() => handleLevelChange("STEP")}
             disabled={!hasStepData}
           >
-            Step
+            {t("models:label.step")}
           </Button>
           <Button
             variant={level === "EPOCH" ? "contained" : "outlined"}
             onClick={() => handleLevelChange("EPOCH")}
             disabled={!hasEpochData}
           >
-            Epoch
+            {t("models:label.epoch")}
           </Button>
         </ButtonGroup>
       </Box>

DashAI/front/src/pages/results/components/MetricsCard.jsx

@@ -1,7 +1,10 @@
 import React from "react";
 import { Box, Divider, Paper, Typography } from "@mui/material";
+import { useTranslation } from "react-i18next";
 
 export default function MetricsCard({ title, metrics }) {
+  const { t } = useTranslation(["models"]);
+
   return (
     <Paper elevation={2} sx={{ p: 2, height: "100%" }}>
       <Typography variant="subtitle1" fontWeight="bold" gutterBottom>
@@ -24,7 +27,7 @@ export default function MetricsCard({ title, metrics }) {
         ))
       ) : (
         <Typography variant="body2" color="text.secondary">
-          No metrics available
+          {t("models:label.noMetricsAvailable")}
         </Typography>
       )}
     </Paper>

DashAI/front/src/pages/results/components/ResultsDetailsLayout.jsx

@@ -9,6 +9,7 @@ import ResultsTabMetrics from "./ResultsTabMetrics";
 import ResultsTabHyperparameters from "./ResultsTabHyperparameters";
 import { tabsResultsDetails } from "../constants/tabsResultsDetails";
 import { checkIfHaveOptimazers } from "../../../utils/schema";
+import { useTranslation } from "react-i18next";
 
 function ResultsDetailsLayout({
   runData,
@@ -17,6 +18,7 @@ function ResultsDetailsLayout({
   handleCloseCustomLayout,
   handleRun,
 }) {
+  const { t } = useTranslation(["common"]);
   const optimizables = checkIfHaveOptimazers(runData.parameters);
   const updatedTabs = tabsResultsDetails.map((tab) => ({
     ...tab,
@@ -28,7 +30,7 @@ function ResultsDetailsLayout({
         startIcon={<ArrowBackIosNewIcon />}
         onClick={handleCloseCustomLayout}
       >
-        Close
+        {t("common:close")}
       </Button>
 
       <Paper sx={{ mt: 2 }}>
@@ -49,7 +51,7 @@ function ResultsDetailsLayout({
           {/* {currentTab === 1 && <ResultsTabParameters runData={runData} />}
           {currentTab === 2 && <ResultsTabMetrics runData={runData} />} */}
           {currentTab === 3 && <ResultsTabHyperparameters runData={runData} />}
-          {currentTab === 4 && <Typography>TODO...</Typography>}
+          {currentTab === 4 && <Typography>{t("common:todo")}</Typography>}
         </Box>
       </Paper>
     </CustomLayout>

DashAI/front/src/pages/results/components/ResultsDialogLayout.jsx

@@ -31,6 +31,7 @@ import { LoadingButton } from "@mui/lab";
 import { useTourContext } from "../../../components/tour/TourProvider";
 import { deleteRun } from "../../../api/run";
 import DeleteConfirmationModal from "../../../components/threeSectionLayout/DeleteConfirmationModal";
+import { useTranslation } from "react-i18next";
 
 function ResultsDialogLayout({
   experiment,
@@ -57,6 +58,7 @@ function ResultsDialogLayout({
   const tourContext = useTourContext();
   const hasNotifiedRef = useRef(false);
   const { enqueueSnackbar } = useSnackbar();
+  const { t } = useTranslation(["models", "common"]);
 
   const hasActiveRuns = runs.some(
     (r) => r.status === "Delivered" || r.status === "Started",
@@ -95,9 +97,12 @@ function ResultsDialogLayout({
       if (allRunsFinished && !hasNotifiedRef.current) {
         hasNotifiedRef.current = true;
 
-        enqueueSnackbar(`${experiment.name} has completed all runs`, {
-          variant: "success",
-        });
+        enqueueSnackbar(
+          t("models:message.allRunsCompleted", { experiment: experiment.name }),
+          {
+            variant: "success",
+          },
+        );
 
         setFinishedRunning(true);
 
@@ -106,9 +111,13 @@ function ResultsDialogLayout({
         }
       }
     } catch (error) {
-      enqueueSnackbar(`Error retrieving runs for ${experiment.name}`, {
-        variant: "error",
-      });
+      enqueueSnackbar(
+        t("models:message.errorFetchingRuns"),
+        { experiment: experiment.name },
+        {
+          variant: "error",
+        },
+      );
       console.error("Error fetching runs:", error);
     } finally {
       if (showLoading) {
@@ -131,19 +140,28 @@ function ResultsDialogLayout({
           },
           (result) => {
             console.error(`Run job ${response.id} failed:`, result);
-            enqueueSnackbar(`Run failed: ${result.error || "Unknown error"}`, {
-              variant: "error",
-            });
+            enqueueSnackbar(
+              t("models:message.runFailed", {
+                error: result.error || t("common:unknownError"),
+              }),
+              {
+                variant: "error",
+              },
+            );
             getRuns({ showLoading: false });
           },
         );
       }
 
       return false;
     } catch (error) {
-      enqueueSnackbar(`Error enqueueing run with ID ${runId}`, {
-        variant: "error",
-      });
+      enqueueSnackbar(
+        t("models:message.errorEnqueueingRun"),
+        { runId },
+        {
+          variant: "error",
+        },
+      );
       console.error("Error enqueueing run:", error);
       return true;
     }
@@ -168,10 +186,7 @@ function ResultsDialogLayout({
     });
 
     if (runsToExecute.length === 0) {
-      enqueueSnackbar(
-        "No runs available to execute. Selected runs may already be running or completed.",
-        { variant: "info" },
-      );
+      enqueueSnackbar(t("models:message.noRunsToExecute"), { variant: "info" });
       return;
     }
 
@@ -194,15 +209,19 @@ function ResultsDialogLayout({
 
       if (enqueueErrors < runsToExecute.length) {
         enqueueSnackbar(
-          `${runsToExecute.length - enqueueErrors} run(s) started successfully`,
+          t("models:message.runsStartedSuccessfully", {
+            count: runsToExecute.length - enqueueErrors,
+          }),
           { variant: "success" },
         );
       } else {
         getRuns({ showLoading: false });
       }
     } catch (error) {
       console.error("Error executing runs:", error);
-      enqueueSnackbar("Error executing runs", { variant: "error" });
+      enqueueSnackbar(t("models:error.errorExecutingRuns"), {
+        variant: "error",
+      });
 
       getRuns({ showLoading: false });
     }
@@ -218,17 +237,25 @@ function ResultsDialogLayout({
       const response = await enqueueRunnerJobRequest(run.id);
 
       if (!response || !response.id) {
-        enqueueSnackbar(`Error starting run ${run.id}`, {
-          variant: "error",
-        });
+        enqueueSnackbar(
+          t("models:error.errorEnqueueingRun"),
+          { runId: run.id },
+          {
+            variant: "error",
+          },
+        );
         return;
       }
 
       // Update run to "Delivered" status
       initialUpdatedRun.status = 1;
-      enqueueSnackbar(`Run ${run.id} started successfully`, {
-        variant: "success",
-      });
+      enqueueSnackbar(
+        t("models:message.runStartedSuccessfully"),
+        { runId: run.id },
+        {
+          variant: "success",
+        },
+      );
 
       // Track job ID
       setTrackedJobIds((prev) => new Set(prev).add(response.id));
@@ -265,7 +292,10 @@ function ResultsDialogLayout({
         async (result) => {
           // Job failed, still fetch only this run
           enqueueSnackbar(
-            `Run ${run.id} failed: ${result.error || "Unknown error"}`,
+            t("models:error.runFailedId", {
+              runId: run.id,
+              error: result.error || t("common:unknownError"),
+            }),
             { variant: "error" },
           );
 
@@ -286,9 +316,13 @@ function ResultsDialogLayout({
     } catch (error) {
       console.error("Error enqueueing run:", error);
 
-      enqueueSnackbar(`Error starting run ${run.id}`, {
-        variant: "error",
-      });
+      enqueueSnackbar(
+        t("models:error.errorEnqueueingRun"),
+        { runId: run.id },
+        {
+          variant: "error",
+        },
+      );
 
       // Fetch only the affected run to restore its real status
       const updated = await getRunById(run.id);
@@ -355,7 +389,7 @@ function ResultsDialogLayout({
             justifyContent: "space-between",
           }}
         >
-          {`Experiment ${experiment.name} results`}
+          {t("models:label.experimentResults", { name: experiment.name })}
           <IconButton
             onClick={handleOnClose}
             sx={{
@@ -390,18 +424,20 @@ function ResultsDialogLayout({
               } else {
                 await deleteRun(runToDelete);
               }
-              enqueueSnackbar("Run deleted successfully", {
+              enqueueSnackbar(t("models:message.runDeletedSuccessfully"), {
                 variant: "success",
               });
             } catch (error) {
               console.error("Error deleting run:", error);
-              enqueueSnackbar("Error deleting run", { variant: "error" });
+              enqueueSnackbar(t("models:error.errorDeletingRun"), {
+                variant: "error",
+              });
             } finally {
               setOpenDeleteModal(false);
               setRunToDelete(null);
             }
           }}
-          content="Are you sure you want to delete this run? This action cannot be undone."
+          content={t("models:message.confirmDeleteRun")}
         />
       )}