feat: add internationalization support for explainers

- Integrated i18next for translation in Explainer components.
- Updated ExplainerParametersTab, ExplainersDashboard, ExplainersGrid, ExplainersPlot, ExplainersCard, NewGlobalExplainerModal, NewLocalExplainerModal, SelectDatasetStep, SetNameAndExplainerStep, SplitSelector, and TrainedModelsTable to use translated strings.
- Created English and Spanish translation files for common and explainer-specific labels, messages, and errors.
- Enhanced user experience by providing localized text for buttons, labels, and error messages.

Author: Irozuku

DashAI/front/src/components/explainers/ConfigureExplainerStep.jsx

@@ -11,6 +11,7 @@ import PropTypes from "prop-types";
 import FormSchema from "../shared/FormSchema";
 import FormSchemaLayout from "../shared/FormSchemaLayout";
 import useSchema from "../../hooks/useSchema";
+import { useTranslation } from "react-i18next";
 
 function ConfigureExplainerStep({
   newExpl,
@@ -21,6 +22,7 @@ function ConfigureExplainerStep({
 }) {
   const { defaultValues } = useSchema({ modelName: newExpl.explainer_name });
   const [error, setError] = useState(false);
+  const { t } = useTranslation(["explainers"]);
 
   const isParamsEmpty =
     !newExpl.parameters || Object.keys(newExpl.parameters).length === 0;
@@ -83,7 +85,7 @@ function ConfigureExplainerStep({
     >
       <Grid size={{ xs: 12 }}>
         <Typography variant="h5" component="h3">
-          Configure your Explainer
+          {t("explainers:label.configureExplainer")}
         </Typography>
       </Grid>
       {/* Configure dataloader parameters */}
@@ -93,7 +95,9 @@ function ConfigureExplainerStep({
           sx={{ p: 4, maxHeight: "55vh", overflow: "auto" }}
         >
           <Stack spacing={3}>
-            <DialogContentText>Explainer configuration</DialogContentText>
+            <DialogContentText>
+              {t("explainers:label.explainerConfiguration")}
+            </DialogContentText>
 
             <FormSchemaLayout>
               <FormSchema

DashAI/front/src/components/explainers/ExplainerConfiguration.jsx

@@ -3,8 +3,11 @@ import { DialogContentText, Grid, Paper } from "@mui/material";
 import PropTypes from "prop-types";
 
 import ParameterForm from "../configurableObject/ParameterForm";
+import { useTranslation } from "react-i18next";
 
 function ExplainerConfiguration({ paramsSchema, updateParameters }) {
+  const { t } = useTranslation(["explainers"]);
+
   return (
     <Paper
       variant="outlined"
@@ -13,7 +16,9 @@ function ExplainerConfiguration({ paramsSchema, updateParameters }) {
       <Grid container direction={"column"} alignItems={"center"}>
         {/* Form title */}
         <Grid>
-          <DialogContentText>Explainer configuration</DialogContentText>
+          <DialogContentText>
+            {t("explainers:label.explainerConfiguration")}
+          </DialogContentText>
         </Grid>
         <Grid sx={{ p: 3 }}>
           {/* Main dataloader form */}

DashAI/front/src/components/explainers/ExplainerData.jsx

@@ -1,17 +1,14 @@
 import { useSnackbar } from "notistack";
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import { Tabs, Tab, Paper, Box, Button } from "@mui/material";
 import { useNavigate, useParams } from "react-router-dom";
 import ArrowBackIosNewIcon from "@mui/icons-material/ArrowBackIosNew";
 import CustomLayout from "../custom/CustomLayout";
 import { getExplainers } from "../../api/explainer";
 import ExplainerInfoTab from "./ExplainerInfoTab";
 import ExplainerParametersTab from "./ExplainerParametersTab";
+import { useTranslation } from "react-i18next";
 
-const tabs = [
-  { label: "Explainer parameters", value: 0, disabled: false },
-  { label: "Info", value: 1, disabled: false },
-];
 /**
  * Component that renders multiple tabs to visualize the results of a specific explainer.
  */
@@ -23,6 +20,19 @@ function ExplainerData() {
   const [explainerData, setExplainerData] = useState({});
   const [updateDataFlag, setUpdateDataFlag] = useState(false);
   const [currentTab, setCurrentTab] = useState(0);
+  const { t } = useTranslation(["explainers"]);
+
+  const tabs = useMemo(
+    () => [
+      {
+        label: t("explainers:label.explainerParameters"),
+        value: 0,
+        disabled: false,
+      },
+      { label: t("common:info"), value: 1, disabled: false },
+    ],
+    [t],
+  );
 
   const handleTabChange = (event, newValue) => {
     setCurrentTab(newValue);
@@ -40,7 +50,8 @@ function ExplainerData() {
       }
     } catch (error) {
       enqueueSnackbar(
-        `Error while trying to obtain data of the explainer with id: ${id}`,
+        t("explainers:error.fetchDataError", { explainerId: id }),
+        { variant: "error" },
       );
       if (error.response) {
         console.error("Response error:", error.message);
@@ -73,7 +84,7 @@ function ExplainerData() {
           navigate(`/app/explainers/runs/${explainerData.run_id}`);
         }}
       >
-        Return to table
+        {t("explainers:button.backToExplainers")}
       </Button>
 
       {/* Tabs  */}

DashAI/front/src/components/explainers/ExplainerInfoTab.jsx

@@ -1,39 +1,29 @@
 import { Divider, Grid, Typography } from "@mui/material";
 import React from "react";
 import PropTypes from "prop-types";
+import { useTranslation } from "react-i18next";
+import { formatDate } from "../../utils";
 
-const explainerInfo = [
-  { key: "id", label: "Explainer ID" },
-  { key: "name", label: "Name" },
-  { key: "run_id", label: "Run ID" },
-  { key: "explainer_name", label: "Explainer Name" },
-  { key: "dataset_id", label: "Dataset ID" },
-  { key: "explanation_path", label: "Explanation Path" },
-  { key: "plot_path", label: "Plot Path" },
-  { key: "status", label: "Status" },
-];
-
-const explainerDateInfo = [{ key: "created", label: "Created" }];
-
-const formatDate = (dateStr) => {
-  const date = new Date(dateStr);
-  const options = {
-    year: "numeric",
-    month: "long",
-    day: "numeric",
-    hour: "numeric",
-    minute: "2-digit",
-    second: "2-digit",
-    locale: "en-US",
-  };
-
-  return date.toLocaleString("en-US", options);
-};
 /**
  * Component that displays general information associated with a explainer.
  * @param {object} explainerData object that contains all the necesary info of the explainer
  */
 function ExplainerInfoTab({ explainerData }) {
+  const { t } = useTranslation(["explainers", "common"]);
+
+  const explainerInfo = [
+    { key: "id", label: t("common:id") },
+    { key: "name", label: t("common:name") },
+    { key: "run_id", label: t("explainers:label.runId") },
+    { key: "explainer_name", label: t("explainers:label.explainerName") },
+    { key: "dataset_id", label: t("explainers:label.datasetId") },
+    { key: "explanation_path", label: t("explainers:label.explanationPath") },
+    { key: "plot_path", label: t("explainers:label.plotPath") },
+    { key: "status", label: t("common:status") },
+  ];
+
+  const explainerDateInfo = [{ key: "created", label: t("common:created") }];
+
   return (
     <Grid container direction="column">
       {/* Explainer name related info */}

DashAI/front/src/components/explainers/ExplainerParametersTab.jsx

@@ -7,13 +7,15 @@ import {
   Typography,
 } from "@mui/material";
 import ParameterListItem from "./ParameterListItem";
+import { useTranslation } from "react-i18next";
 
 /**
  * Component that displays the parameters associated with a explainer.
  * @param {object} explainerData object that contains all the necesary info of the explainer
  */
 function ExplainerParametersTab({ explainerData }) {
   const [displayMode, setDisplayMode] = useState("nested-list");
+  const { t } = useTranslation(["common"]);
   return (
     <Grid container direction="column">
       {/* Toggle to select the mode of displaying the JSON object. */}
@@ -28,16 +30,16 @@ function ExplainerParametersTab({ explainerData }) {
           }}
           sx={{ float: "right" }}
         >
-          <ToggleButton value="nested-list">List</ToggleButton>
-          <ToggleButton value="json">JSON</ToggleButton>
+          <ToggleButton value="nested-list">{t("common:list")}</ToggleButton>
+          <ToggleButton value="json">{t("common:json")}</ToggleButton>
         </ToggleButtonGroup>
       </Grid>
 
       {/* JSON object display */}
       <Grid>
         {displayMode === "nested-list" && (
           <ParameterListItem
-            name="Parameters"
+            name={t("common:parameters")}
             value={explainerData.parameters}
           />
         )}

DashAI/front/src/components/explainers/ExplainersDashboard.jsx

@@ -10,11 +10,7 @@ import NewLocalExplainerModal from "./NewLocalExplainerModal";
 import ExplainersGrid from "./ExplainersGrid";
 import TimestampWrapper from "../shared/TimestampWrapper";
 import { TIMESTAMP_KEYS } from "../../constants/timestamp";
-
-const tabs = [
-  { label: "Global Explanations", value: 0, disabled: false },
-  { label: "Local Explanations", value: 1, disabled: false },
-];
+import { useTranslation } from "react-i18next";
 
 export default function ExplainersDashboard() {
   const { id } = useParams();
@@ -26,6 +22,7 @@ export default function ExplainersDashboard() {
     useState(false);
   const [showNewLocalExplainerModal, setShowNewLocalExplainerModal] =
     useState(false);
+  const { t } = useTranslation(["explainers"]);
 
   const handleNewGlobalExplainerModal = () => {
     setShowNewGlobalExplainerModal(true);
@@ -37,6 +34,19 @@ export default function ExplainersDashboard() {
 
   const [currentTab, setCurrentTab] = useState(0);
 
+  const tabs = [
+    {
+      label: t("explainers:label.globalExplanations"),
+      value: 0,
+      disabled: false,
+    },
+    {
+      label: t("explainers:label.localExplanations"),
+      value: 1,
+      disabled: false,
+    },
+  ];
+
   const handleTabChange = (event, newValue) => {
     setCurrentTab(newValue);
   };
@@ -46,7 +56,12 @@ export default function ExplainersDashboard() {
     taskName: taskName,
   };
 
-  const ExplainersTable = ({ scope, handleNewExplainer, description }) => {
+  const ExplainersTable = ({
+    scope,
+    title,
+    handleNewExplainer,
+    description,
+  }) => {
     return (
       <Grid size={{ xs: 12 }}>
         <Paper sx={{ py: 2, px: 2 }}>
@@ -58,7 +73,7 @@ export default function ExplainersDashboard() {
             sx={{ mb: 4 }}
           >
             <Typography variant="h4" component="h2">
-              {scope.charAt(0).toUpperCase() + scope.slice(1)} explanations
+              {title}
             </Typography>
             <Grid>
               <TimestampWrapper
@@ -73,7 +88,7 @@ export default function ExplainersDashboard() {
                   onClick={handleNewExplainer}
                   endIcon={<AddIcon />}
                 >
-                  Add {scope} Explainer
+                  {t("explainers:button.addExplainer")}
                 </Button>
               </TimestampWrapper>
             </Grid>
@@ -105,11 +120,12 @@ export default function ExplainersDashboard() {
         explainerConfig={explainerConfig}
       />
       <Typography variant="h4" component="h1" sx={{ mb: 3 }}>
-        Explanations dashboard for model {modelName}
+        {t("explainers:label.explainersDashboardTitle", {
+          modelName: modelName,
+        })}
       </Typography>
       <Typography variant="h6" component="h1" sx={{ mb: 3 }}>
-        Configure global or local explainers for your trained model to explore
-        and understand its decision-making process.
+        {t("explainers:label.explainersDashboardDescription")}
       </Typography>
       <TimestampWrapper eventName={TIMESTAMP_KEYS.explainer.leavingDashboard}>
         <Button
@@ -118,7 +134,7 @@ export default function ExplainersDashboard() {
             navigate(`/app/explainers`);
           }}
         >
-          Return to table
+          {t("explainers:button.backToExplainers")}
         </Button>
       </TimestampWrapper>
 
@@ -136,19 +152,17 @@ export default function ExplainersDashboard() {
         {currentTab === 0 && (
           <ExplainersTable
             scope={"global"}
+            title={t("explainers:label.globalExplanations")}
             handleNewExplainer={handleNewGlobalExplainerModal}
-            description={
-              "Global explanations describe how the overall machine learning model works."
-            }
+            description={t("explainers:label.globalExplanationsDescription")}
           />
         )}
         {currentTab === 1 && (
           <ExplainersTable
             scope={"local"}
+            title={t("explainers:label.localExplanations")}
             handleNewExplainer={handleNewLocalExplainerModal}
-            description={
-              "Local explanations explain model predictions for an specific instance."
-            }
+            description={t("explainers:label.localExplanationsDescription")}
           />
         )}
       </Grid>

DashAI/front/src/components/explainers/ExplainersGrid.jsx

@@ -7,6 +7,7 @@ import { getExplainers as getExplainersRequest } from "../../api/explainer";
 import ExplainersCard from "./ExplanainersCard";
 import useUpdateFlag from "../../hooks/useUpdateFlag";
 import { flags } from "../../constants/flags";
+import { useTranslation } from "react-i18next";
 
 /**
  * GlobalExplainersGrid
@@ -17,6 +18,7 @@ export default function ExplainersGrid(explainerConfig) {
   // const [loading, setLoading] = useState(false);
   const [explainers, setExplainers] = useState([]);
   const { runId, scope } = explainerConfig;
+  const { t } = useTranslation(["explainers"]);
 
   // Filter explainers that have status FINISHED
   function getFilteredExplainers(explainers) {
@@ -28,7 +30,9 @@ export default function ExplainersGrid(explainerConfig) {
       const explainers = await getExplainersRequest(runId, scope);
       setExplainers(explainers);
     } catch (error) {
-      enqueueSnackbar("Error while trying to obtain the explainers.");
+      enqueueSnackbar(t("explainers:error.fetchExplainers"), {
+        variant: "error",
+      });
       if (error.response) {
         console.error("Response error:", error.message);
       } else if (error.request) {

DashAI/front/src/components/explainers/ExplainersPlot.jsx

@@ -5,13 +5,15 @@ import PropTypes from "prop-types";
 import { useSnackbar } from "notistack";
 
 import { getExplainerPlot as getExplainerPlotRequest } from "../../api/explainer";
+import { useTranslation } from "react-i18next";
 
 export default function ExplainersPlot({ explainer, scope }) {
   const { enqueueSnackbar } = useSnackbar();
   const [explainersPlots, setExplainersPlots] = useState([]);
   const [currentPlot, setCurrentPlot] = useState(0);
   const [loading, setLoading] = useState(true);
   const isLocal = scope === "local";
+  const { t } = useTranslation(["explainers"]);
   function parseExplanationPlot(explanation) {
     const formattedPlot = JSON.parse(JSON.stringify(explanation));
     return formattedPlot.map(JSON.parse);
@@ -27,7 +29,9 @@ export default function ExplainersPlot({ explainer, scope }) {
       const parsedExplainersPlot = parseExplanationPlot(explainersPlots);
       setExplainersPlots(parsedExplainersPlot);
     } catch (error) {
-      enqueueSnackbar("Error while trying to obtain the explainers.");
+      enqueueSnackbar(t("explainers:error.fetchExplainers"), {
+        variant: "error",
+      });
       if (error.response) {
         console.error("Response error:", error.message);
       } else if (error.request) {
@@ -59,7 +63,7 @@ export default function ExplainersPlot({ explainer, scope }) {
             >
               {explainersPlots.map((_, i) => (
                 <MenuItem key={i} value={i}>
-                  Instance {i + 1}
+                  {t("explainers:label.instanceNumber", { number: i + 1 })}
                 </MenuItem>
               ))}
             </Select>