From 1d9591d5487ecb48aedd27dceec33d2d3861f41f Mon Sep 17 00:00:00 2001
From: Irozuku <emiliodu@gmail.com>
Date: Wed, 25 Feb 2026 15:42:21 -0300
Subject: [PATCH 1/4] fix: update ColorscaleSelector to use theme for styling

---
 .../plotLayout/ColorscaleSelector.jsx         | 75 ++++++++++---------
 1 file changed, 41 insertions(+), 34 deletions(-)

diff --git a/DashAI/front/src/components/notebooks/explorer/plotLayout/ColorscaleSelector.jsx b/DashAI/front/src/components/notebooks/explorer/plotLayout/ColorscaleSelector.jsx
index 298008a54..30b032e1b 100644
--- a/DashAI/front/src/components/notebooks/explorer/plotLayout/ColorscaleSelector.jsx
+++ b/DashAI/front/src/components/notebooks/explorer/plotLayout/ColorscaleSelector.jsx
@@ -14,6 +14,7 @@ import {
   Divider,
   alpha,
   Alert,
+  useTheme,
 } from "@mui/material";
 import DeleteIcon from "@mui/icons-material/Delete";
 import AddIcon from "@mui/icons-material/Add";
@@ -42,6 +43,7 @@ const COLORMAPS = [
 ];
 
 export default function ColorscaleSelector({ value, onChange }) {
+  const theme = useTheme();
   const isArrayMode = Array.isArray(value);
 
   const [mode, setMode] = useState(isArrayMode ? "array" : "preset");
@@ -92,9 +94,9 @@ export default function ColorscaleSelector({ value, onChange }) {
   return (
     <Box
       sx={{
-        bgcolor: "#474747",
+        bgcolor: theme.palette.ui.panelDark,
         p: 2,
-        borderBottom: "1px solid #7f7f7f",
+        borderBottom: `1px solid ${theme.palette.ui.borderLight}`,
       }}
     >
       <Stack spacing={3}>
@@ -122,15 +124,13 @@ export default function ColorscaleSelector({ value, onChange }) {
             size="small"
             sx={{
               "& .MuiToggleButton-root": {
-                border: (theme) =>
-                  `1px solid ${alpha(theme.palette.primary.main, 0.3)}`,
+                border: `1px solid ${alpha(theme.palette.primary.main, 0.3)}`,
                 fontWeight: 500,
                 color: "text.secondary",
                 "&.Mui-selected": {
-                  backgroundColor: (theme) =>
-                    alpha(theme.palette.primary.main, 0.2),
-                  color: (theme) => theme.palette.primary.main,
-                  borderColor: (theme) => theme.palette.primary.main,
+                  backgroundColor: alpha(theme.palette.primary.main, 0.2),
+                  color: theme.palette.primary.main,
+                  borderColor: theme.palette.primary.main,
                 },
               },
             }}
@@ -147,7 +147,7 @@ export default function ColorscaleSelector({ value, onChange }) {
         <Divider
           sx={{
             width: "100%",
-            borderColor: alpha("#ffffff", 0.2),
+            borderColor: theme.palette.ui.divider,
           }}
         />
 
@@ -179,13 +179,13 @@ export default function ColorscaleSelector({ value, onChange }) {
                 "& .MuiOutlinedInput-root": {
                   fontWeight: 500,
                   "& fieldset": {
-                    borderColor: alpha("#06b6d4", 0.3),
+                    borderColor: alpha(theme.palette.primary.main, 0.3),
                   },
                   "&:hover fieldset": {
-                    borderColor: "#06b6d4",
+                    borderColor: theme.palette.primary.main,
                   },
                   "&.Mui-focused fieldset": {
-                    borderColor: "#06b6d4",
+                    borderColor: theme.palette.primary.main,
                   },
                 },
                 "& .MuiOutlinedInput-input": {
@@ -239,16 +239,18 @@ export default function ColorscaleSelector({ value, onChange }) {
                   key={i}
                   variant="outlined"
                   sx={{
-                    background: (theme) =>
-                      alpha(theme.palette.background.paper, 0.4),
-                    border: (theme) =>
-                      `1px solid ${alpha(theme.palette.primary.main, 0.15)}`,
+                    background: alpha(theme.palette.background.paper, 0.4),
+                    border: `1px solid ${alpha(
+                      theme.palette.primary.main,
+                      0.15,
+                    )}`,
                     transition: "all 0.2s ease",
                     "&:hover": {
-                      border: (theme) =>
-                        `1px solid ${theme.palette.primary.main}`,
-                      boxShadow: (theme) =>
-                        `0 2px 8px ${alpha(theme.palette.primary.main, 0.15)}`,
+                      border: `1px solid ${theme.palette.primary.main}`,
+                      boxShadow: `0 2px 8px ${alpha(
+                        theme.palette.primary.main,
+                        0.15,
+                      )}`,
                     },
                   }}
                 >
@@ -265,14 +267,16 @@ export default function ColorscaleSelector({ value, onChange }) {
                           minWidth: 32,
                           height: 32,
                           borderRadius: "50%",
-                          backgroundColor: (theme) =>
-                            alpha(theme.palette.primary.main, 0.15),
+                          backgroundColor: alpha(
+                            theme.palette.primary.main,
+                            0.15,
+                          ),
                           display: "flex",
                           alignItems: "center",
                           justifyContent: "center",
                           fontWeight: 600,
                           fontSize: "0.875rem",
-                          color: "#06b6d4",
+                          color: theme.palette.primary.main,
                         }}
                       >
                         {i + 1}
@@ -298,13 +302,16 @@ export default function ColorscaleSelector({ value, onChange }) {
                           width: 100,
                           "& .MuiOutlinedInput-root": {
                             "& fieldset": {
-                              borderColor: alpha("#06b6d4", 0.3),
+                              borderColor: alpha(
+                                theme.palette.primary.main,
+                                0.3,
+                              ),
                             },
                             "&:hover fieldset": {
-                              borderColor: "#06b6d4",
+                              borderColor: theme.palette.primary.main,
                             },
                             "&.Mui-focused fieldset": {
-                              borderColor: "#06b6d4",
+                              borderColor: theme.palette.primary.main,
                             },
                           },
                         }}
@@ -324,8 +331,10 @@ export default function ColorscaleSelector({ value, onChange }) {
                         onClick={() => removeStop(i)}
                         sx={{
                           "&:hover": {
-                            backgroundColor: (theme) =>
-                              alpha(theme.palette.error.main, 0.1),
+                            backgroundColor: alpha(
+                              theme.palette.error.main,
+                              0.1,
+                            ),
                           },
                         }}
                       >
@@ -345,14 +354,12 @@ export default function ColorscaleSelector({ value, onChange }) {
                   textTransform: "none",
                   fontWeight: 500,
                   borderStyle: "dashed",
-                  borderColor: (theme) =>
-                    alpha(theme.palette.primary.main, 0.4),
-                  color: "#06b6d4",
+                  borderColor: alpha(theme.palette.primary.main, 0.4),
+                  color: theme.palette.primary.main,
                   "&:hover": {
                     borderStyle: "dashed",
-                    backgroundColor: (theme) =>
-                      alpha(theme.palette.primary.main, 0.08),
-                    borderColor: (theme) => theme.palette.primary.main,
+                    backgroundColor: alpha(theme.palette.primary.main, 0.08),
+                    borderColor: theme.palette.primary.main,
                   },
                 }}
               >

From 5337b63658322567f4088c449e6b8a42dd32831e Mon Sep 17 00:00:00 2001
From: Irozuku <emiliodu@gmail.com>
Date: Wed, 25 Feb 2026 15:42:27 -0300
Subject: [PATCH 2/4] fix: update XAxisForm and YAxisForm to use theme for
 color styling

---
 .../explorer/plotLayout/forms/XAxisForm.jsx   | 25 +++++++------------
 .../explorer/plotLayout/forms/YAxisForm.jsx   | 25 +++++++------------
 2 files changed, 18 insertions(+), 32 deletions(-)

diff --git a/DashAI/front/src/components/notebooks/explorer/plotLayout/forms/XAxisForm.jsx b/DashAI/front/src/components/notebooks/explorer/plotLayout/forms/XAxisForm.jsx
index 14db52f8d..66352f2ec 100644
--- a/DashAI/front/src/components/notebooks/explorer/plotLayout/forms/XAxisForm.jsx
+++ b/DashAI/front/src/components/notebooks/explorer/plotLayout/forms/XAxisForm.jsx
@@ -5,6 +5,7 @@ import {
   Switch,
   Box,
   Typography,
+  useTheme,
 } from "@mui/material";
 
 import DebouncedColorPicker from "../DebouncedColorPicker";
@@ -17,6 +18,7 @@ export default function XAxisForm({
   handleTraceChange,
 }) {
   const { t } = useTranslation(["datasets"]);
+  const theme = useTheme();
   const tickvalsArray = Array.isArray(data[0]?.x) ? data[0].x : [];
 
   return (
@@ -53,7 +55,7 @@ export default function XAxisForm({
 
       <DebouncedColorPicker
         label={t("datasets:label.axisTitleColor", { axis: "X" })}
-        value={layout.xaxis?.title?.font?.color || "#2A3F5F"}
+        value={layout.xaxis?.title?.font?.color || theme.palette.text.primary}
         onChange={(color) =>
           handleAxisChange("xaxis", "title", {
             ...layout.xaxis?.title,
@@ -78,7 +80,7 @@ export default function XAxisForm({
 
       <DebouncedColorPicker
         label={t("datasets:label.axisTickFontColor", { axis: "X" })}
-        value={layout.xaxis?.tickfont?.color || "#2A3F5F"}
+        value={layout.xaxis?.tickfont?.color || theme.palette.text.secondary}
         onChange={(color) =>
           handleAxisChange("xaxis", "tickfont", {
             ...layout.xaxis?.tickfont,
@@ -99,7 +101,7 @@ export default function XAxisForm({
 
       <DebouncedColorPicker
         label={t("datasets:label.axisLineColor", { axis: "X" })}
-        value={layout.xaxis?.linecolor || "#FFFFFF"}
+        value={layout.xaxis?.linecolor || theme.palette.text.primary}
         onChange={(color) => handleAxisChange("xaxis", "linecolor", color)}
       />
 
@@ -116,7 +118,7 @@ export default function XAxisForm({
 
       <DebouncedColorPicker
         label={t("datasets:label.axisGridColor", { axis: "X" })}
-        value={layout.xaxis?.gridcolor || "#FFFFFF"}
+        value={layout.xaxis?.gridcolor || theme.palette.ui.divider}
         onChange={(color) => handleAxisChange("xaxis", "gridcolor", color)}
       />
 
@@ -141,7 +143,7 @@ export default function XAxisForm({
             color="primary"
           />
         }
-        label={t("datasets:label.showGrid")}
+        label={t("datasets:label.showGrid", { axis: "X" })}
       />
 
       <FormControlLabel
@@ -154,7 +156,7 @@ export default function XAxisForm({
             color="primary"
           />
         }
-        label={t("datasets:label.showZeroLine")}
+        label={t("datasets:label.showZeroLine", { axis: "X" })}
       />
       {/* X Axis Tick Labels */}
       {tickvalsArray.length > 0 &&
@@ -162,16 +164,7 @@ export default function XAxisForm({
           const rawTicktext = data[0].x[idx];
 
           return (
-            <Box
-              key={idx}
-              sx={{
-                mt: 2,
-                p: 2,
-                border: "1px solid #444",
-                borderRadius: 1,
-                bgcolor: "#333",
-              }}
-            >
+            <Box key={idx}>
               {/* Label input */}
               <TextField
                 label={t("datasets:label.axisTickLabel", { axis: "X", tick })}
diff --git a/DashAI/front/src/components/notebooks/explorer/plotLayout/forms/YAxisForm.jsx b/DashAI/front/src/components/notebooks/explorer/plotLayout/forms/YAxisForm.jsx
index 7d576c6c5..5267c7e91 100644
--- a/DashAI/front/src/components/notebooks/explorer/plotLayout/forms/YAxisForm.jsx
+++ b/DashAI/front/src/components/notebooks/explorer/plotLayout/forms/YAxisForm.jsx
@@ -5,6 +5,7 @@ import {
   Switch,
   Box,
   Typography,
+  useTheme,
 } from "@mui/material";
 
 import DebouncedColorPicker from "../DebouncedColorPicker";
@@ -17,6 +18,7 @@ export default function YAxisForm({
   handleTraceChange,
 }) {
   const { t } = useTranslation(["datasets"]);
+  const theme = useTheme();
   const tickvalsArray = Array.isArray(data[0]?.y) ? data[0].y : [];
 
   return (
@@ -53,7 +55,7 @@ export default function YAxisForm({
 
       <DebouncedColorPicker
         label={t("datasets:label.axisTitleColor", { axis: "Y" })}
-        value={layout.yaxis?.title?.font?.color || "#2A3F5F"}
+        value={layout.yaxis?.title?.font?.color || theme.palette.text.primary}
         onChange={(color) =>
           handleAxisChange("yaxis", "title", {
             ...layout.yaxis?.title,
@@ -77,7 +79,7 @@ export default function YAxisForm({
       />
       <DebouncedColorPicker
         label={t("datasets:label.axisTickFontColor", { axis: "Y" })}
-        value={layout.yaxis?.tickfont?.color || "#2A3F5F"}
+        value={layout.yaxis?.tickfont?.color || theme.palette.text.secondary}
         onChange={(color) =>
           handleAxisChange("yaxis", "tickfont", {
             ...layout.yaxis?.tickfont,
@@ -99,7 +101,7 @@ export default function YAxisForm({
 
       <DebouncedColorPicker
         label={t("datasets:label.axisLineColor", { axis: "Y" })}
-        value={layout.yaxis?.linecolor || "#FFFFFF"}
+        value={layout.yaxis?.linecolor || theme.palette.text.primary}
         onChange={(color) => handleAxisChange("yaxis", "linecolor", color)}
       />
 
@@ -116,7 +118,7 @@ export default function YAxisForm({
 
       <DebouncedColorPicker
         label={t("datasets:label.axisGridColor", { axis: "Y" })}
-        value={layout.yaxis?.gridcolor || "#FFFFFF"}
+        value={layout.yaxis?.gridcolor || theme.palette.ui.divider}
         onChange={(color) => handleAxisChange("yaxis", "gridcolor", color)}
       />
 
@@ -141,7 +143,7 @@ export default function YAxisForm({
             color="primary"
           />
         }
-        label={t("datasets:label.showGrid")}
+        label={t("datasets:label.showGrid", { axis: "Y" })}
       />
 
       <FormControlLabel
@@ -154,7 +156,7 @@ export default function YAxisForm({
             color="primary"
           />
         }
-        label={t("datasets:label.showZeroLine")}
+        label={t("datasets:label.showZeroLine", { axis: "Y" })}
       />
       {/* Y Axis Tick Labels */}
       {tickvalsArray.length > 0 &&
@@ -162,16 +164,7 @@ export default function YAxisForm({
           const rawTicktext = data[0].y[idx];
 
           return (
-            <Box
-              key={idx}
-              sx={{
-                mt: 2,
-                p: 2,
-                border: "1px solid #444",
-                borderRadius: 1,
-                bgcolor: "#333",
-              }}
-            >
+            <Box key={idx}>
               {/* Label input */}
               <TextField
                 label={t("datasets:label.axisTickLabel", { axis: "Y", tick })}

From fd5013deb21982bb60d15817589768cec645e135 Mon Sep 17 00:00:00 2001
From: Irozuku <emiliodu@gmail.com>
Date: Wed, 25 Feb 2026 15:43:57 -0300
Subject: [PATCH 3/4] fix: update labels in ColorscaleSelector and translation
 files for consistency

---
 .../notebooks/explorer/plotLayout/ColorscaleSelector.jsx        | 2 +-
 DashAI/front/src/utils/i18n/locales/en/datasets.json            | 2 +-
 DashAI/front/src/utils/i18n/locales/en/models.json              | 1 -
 DashAI/front/src/utils/i18n/locales/es/datasets.json            | 2 +-
 DashAI/front/src/utils/i18n/locales/es/models.json              | 1 -
 5 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/DashAI/front/src/components/notebooks/explorer/plotLayout/ColorscaleSelector.jsx b/DashAI/front/src/components/notebooks/explorer/plotLayout/ColorscaleSelector.jsx
index 30b032e1b..3fd690a77 100644
--- a/DashAI/front/src/components/notebooks/explorer/plotLayout/ColorscaleSelector.jsx
+++ b/DashAI/front/src/components/notebooks/explorer/plotLayout/ColorscaleSelector.jsx
@@ -283,7 +283,7 @@ export default function ColorscaleSelector({ value, onChange }) {
                       </Box>
 
                       <TextField
-                        label="Position"
+                        label={t("datasets:label.position")}
                         type="number"
                         variant="outlined"
                         size="small"
diff --git a/DashAI/front/src/utils/i18n/locales/en/datasets.json b/DashAI/front/src/utils/i18n/locales/en/datasets.json
index eb1e03b88..57763d9f9 100644
--- a/DashAI/front/src/utils/i18n/locales/en/datasets.json
+++ b/DashAI/front/src/utils/i18n/locales/en/datasets.json
@@ -32,7 +32,6 @@
     "failedToCreateExplorer": "Failed to create explorer",
     "failedToDeleteDataset": "Failed to delete dataset",
     "failedToDeleteNotebook": "Failed to delete notebook",
-    "failedToFetchDatasets": "Failed to fetch datasets",
     "failedToFetchNotebooks": "Failed to fetch notebooks",
     "failedToLoadDatasetInfo": "Failed to fetch dataset info",
     "failedToUpdateDataset": "Failed to update dataset",
@@ -205,6 +204,7 @@
     "outliers": "Outliers",
     "overview": "Overview",
     "plotBackgroundColor": "Plot Background Color",
+    "position": "Position",
     "possibleIDColumns": "Possible ID Columns",
     "presetScale": "Preset Scale",
     "processingMessage": "This may take a few moments depending on the size of your data.",
diff --git a/DashAI/front/src/utils/i18n/locales/en/models.json b/DashAI/front/src/utils/i18n/locales/en/models.json
index 07834e87a..8cd3420b7 100644
--- a/DashAI/front/src/utils/i18n/locales/en/models.json
+++ b/DashAI/front/src/utils/i18n/locales/en/models.json
@@ -140,7 +140,6 @@
     "runStarted": "Run \"{{runName}}\" started",
     "runStartedSuccessfully": "Run {{runId}} started successfully",
     "sessionCreatedSuccess": "Session successfully created.",
-    "sessionDeleted": "Session deleted successfully",
     "sessionUpdated": "Session updated successfully"
   }
 }
diff --git a/DashAI/front/src/utils/i18n/locales/es/datasets.json b/DashAI/front/src/utils/i18n/locales/es/datasets.json
index 819dca52c..2a8dba7b6 100644
--- a/DashAI/front/src/utils/i18n/locales/es/datasets.json
+++ b/DashAI/front/src/utils/i18n/locales/es/datasets.json
@@ -32,7 +32,6 @@
     "failedToCreateExplorer": "Fallo al crear explorador",
     "failedToDeleteDataset": "Fallo al eliminar dataset",
     "failedToDeleteNotebook": "Fallo al eliminar cuaderno",
-    "failedToFetchDatasets": "Fallo al obtener datasets",
     "failedToFetchNotebooks": "Fallo al obtener cuadernos",
     "failedToLoadDatasetInfo": "Fallo al obtener información del dataset",
     "failedToUpdateDataset": "Fallo al actualizar dataset",
@@ -208,6 +207,7 @@
     "outliers": "Valores Atípicos",
     "overview": "Resumen",
     "plotBackgroundColor": "Color de Fondo del Gráfico",
+    "position": "Posición",
     "possibleIDColumns": "Posibles Columnas de ID",
     "presetScale": "Escala Preestablecida",
     "processingMessage": "Esto puede tardar unos minutos dependiendo del tamaño del dataset.",
diff --git a/DashAI/front/src/utils/i18n/locales/es/models.json b/DashAI/front/src/utils/i18n/locales/es/models.json
index a99cafe19..5d016b51d 100644
--- a/DashAI/front/src/utils/i18n/locales/es/models.json
+++ b/DashAI/front/src/utils/i18n/locales/es/models.json
@@ -141,7 +141,6 @@
     "runStarted": "Ejecución \"{{runName}}\" iniciada",
     "runStartedSuccessfully": "Ejecución {{runId}} iniciada exitosamente",
     "sessionCreatedSuccess": "Sesión creada exitosamente.",
-    "sessionDeleted": "Sesión eliminada exitosamente",
     "sessionUpdated": "Sesión actualizada exitosamente"
   }
 }

From 8a17390d77307b0e64fedc2678d5f4dbb1618e43 Mon Sep 17 00:00:00 2001
From: Irozuku <emiliodu@gmail.com>
Date: Wed, 25 Feb 2026 15:48:37 -0300
Subject: [PATCH 4/4] fix: update Typography component in ExplorerDetailsModal
 for better semantic structure

h6 component can be inside an h2 (from the DialogTitle component)
---
 .../src/components/notebooks/explorer/ExplorerDetailsModal.jsx  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/DashAI/front/src/components/notebooks/explorer/ExplorerDetailsModal.jsx b/DashAI/front/src/components/notebooks/explorer/ExplorerDetailsModal.jsx
index 36e5e15a2..b69b1ede9 100644
--- a/DashAI/front/src/components/notebooks/explorer/ExplorerDetailsModal.jsx
+++ b/DashAI/front/src/components/notebooks/explorer/ExplorerDetailsModal.jsx
@@ -94,7 +94,7 @@ export default function ExplorerDetailsModal({
       }}
     >
       <DialogTitle sx={{ display: "flex", alignItems: "center", gap: 1 }}>
-        <Typography variant="h6">
+        <Typography variant="h6" component="div">
           {t("datasets:label.detailsForExplorer", {
             name: explorerComponent.display_name,
           })}