From 0cadc4a8680a38b7b86102ce2278c022fc148732 Mon Sep 17 00:00:00 2001 From: Felipe Date: Sat, 10 Jan 2026 23:47:34 -0300 Subject: [PATCH 1/8] Refactor components to utilize theme palette for consistent styling --- DashAI/front/src/components/HomeButton.jsx | 23 +++- .../front/src/components/ResponsiveAppBar.jsx | 20 +++- .../experiments/DivideDatasetColumns.jsx | 7 +- .../experiments/PrepareDatasetStep.jsx | 2 + .../experiments/metrics/MetricCard.jsx | 33 +++--- .../components/generative/ChatTimeStamp.jsx | 5 +- .../generative/WaitingAnimationChat.jsx | 4 +- .../models/DatasetVisualization.jsx | 9 +- .../front/src/components/models/LeftBar.jsx | 18 ++- .../front/src/components/models/RightBar.jsx | 8 +- .../front/src/components/models/RunCard.jsx | 22 +++- .../models/SessionVisualization.jsx | 4 +- .../components/models/model/ModelListItem.jsx | 5 +- .../components/notebooks/DescriptionPanel.jsx | 6 +- .../src/components/notebooks/NoteBox.jsx | 11 +- .../src/components/notebooks/RightBar.jsx | 4 +- .../src/components/notebooks/RowSelector.jsx | 7 +- .../notebooks/converter/ConverterBox.jsx | 18 ++- .../converterCreation/ScopeStepConverter.jsx | 12 +- .../dataset/DatasetVisualization.jsx | 5 +- .../notebooks/dataset/IssueCard.jsx | 2 +- .../notebooks/dataset/MetricRow.jsx | 25 ++-- .../components/notebooks/dataset/StatBox.jsx | 46 +++++--- .../dataset/tabs/CorrelationsTab.jsx | 12 +- .../notebooks/dataset/tabs/OverviewTab.jsx | 4 +- .../datasetCreation/SaveDatasetModal.jsx | 1 + .../notebooks/explorer/ExplorerBox.jsx | 18 ++- .../explorerCreation/ScopeStepExplorer.jsx | 7 +- .../src/components/pipelines/CustomNode.jsx | 26 +++-- .../src/components/pipelines/NodeSidebar.jsx | 46 ++++++-- .../predictions/ManualInputForm.jsx | 8 +- .../components/predictions/ModeSelector.jsx | 18 ++- .../predictions/PredictionsTable.jsx | 20 +++- .../components/predictions/ResultsTable.jsx | 12 +- .../shared/FormSchemaBreadScrumbs.jsx | 4 +- .../threeSectionLayout/BarHeader.jsx | 4 +- .../threeSectionLayout/CollapsibleList.jsx | 32 ++++-- .../GroupedCollapsibleList.jsx | 35 +++--- .../components/threeSectionLayout/ItemBox.jsx | 14 ++- .../threeSectionLayout/ItemMenu.jsx | 4 +- .../threeSectionLayout/SearchBar.jsx | 9 +- DashAI/front/src/pages/home/Home.jsx | 16 ++- .../pages/results/components/MetricsCard.jsx | 13 ++- .../results/components/ResultsDialogViews.jsx | 14 ++- .../components/ResultsGraphsSelection.jsx | 10 +- .../results/components/ResultsTabInfo.jsx | 26 ++++- .../results/constants/initialColumns.jsx | 12 +- DashAI/front/src/styles/theme.js | 95 ++++++++++++++- DashAI/front/src/utils/index.js | 108 +++++++++++------- 49 files changed, 637 insertions(+), 227 deletions(-) diff --git a/DashAI/front/src/components/HomeButton.jsx b/DashAI/front/src/components/HomeButton.jsx index 85f47a1aa..c678aac80 100644 --- a/DashAI/front/src/components/HomeButton.jsx +++ b/DashAI/front/src/components/HomeButton.jsx @@ -42,10 +42,15 @@ function HomeButton({ title, description, to, Icon }) { alignItems="stretch" sx={{ height: "100%" }} > - + {title} - + {description} @@ -65,10 +70,20 @@ function HomeButton({ title, description, to, Icon }) { - + {title} - + {description} diff --git a/DashAI/front/src/components/ResponsiveAppBar.jsx b/DashAI/front/src/components/ResponsiveAppBar.jsx index 4769f0c42..7ac9889d4 100644 --- a/DashAI/front/src/components/ResponsiveAppBar.jsx +++ b/DashAI/front/src/components/ResponsiveAppBar.jsx @@ -38,7 +38,11 @@ function ResponsiveAppBar() { }; return ( - + - {page.name} + + {page.name} + ))} @@ -108,11 +114,17 @@ function ResponsiveAppBar() { to={page.to} key={page.name} onClick={handleCloseNavMenu} - sx={{ my: 2, display: "block" }} + sx={{ + my: 2, + display: "block", + color: + page.to === location.pathname + ? theme.palette.primary.main + : theme.palette.text.primary, + }} size="large" disabled={page.disabled} disableRipple - color={page.to === location.pathname ? "primary" : "inherit"} > {page.name} diff --git a/DashAI/front/src/components/experiments/DivideDatasetColumns.jsx b/DashAI/front/src/components/experiments/DivideDatasetColumns.jsx index a4b9dab77..07308357d 100644 --- a/DashAI/front/src/components/experiments/DivideDatasetColumns.jsx +++ b/DashAI/front/src/components/experiments/DivideDatasetColumns.jsx @@ -8,6 +8,7 @@ import { Box, Chip, } from "@mui/material"; +import { useTheme } from "@mui/material/styles"; import { getColorByColumnType } from "../../utils"; function DivideDatasetColumns({ @@ -23,6 +24,8 @@ function DivideDatasetColumns({ outputHelperText = "", disabled = false, }) { + const theme = useTheme(); + const handleInputAutocompleteChange = (event, newValue) => { onInputColumnNamesChange(newValue); }; @@ -43,7 +46,7 @@ function DivideDatasetColumns({ const { key, ...otherProps } = props; const columnType = columnTypes[option]; const typeColor = columnType?.type - ? getColorByColumnType(columnType.type) + ? getColorByColumnType(columnType.type, theme) : null; return ( @@ -76,7 +79,7 @@ function DivideDatasetColumns({ const { key, ...tagProps } = getTagProps({ index }); const columnType = columnTypes[option]; const typeColor = columnType?.type - ? getColorByColumnType(columnType.type) + ? getColorByColumnType(columnType.type, theme) : null; const label = diff --git a/DashAI/front/src/components/experiments/PrepareDatasetStep.jsx b/DashAI/front/src/components/experiments/PrepareDatasetStep.jsx index 2380d65be..5746dfa35 100644 --- a/DashAI/front/src/components/experiments/PrepareDatasetStep.jsx +++ b/DashAI/front/src/components/experiments/PrepareDatasetStep.jsx @@ -9,6 +9,7 @@ import { AlertTitle, Chip, } from "@mui/material"; +import { useTheme } from "@mui/material/styles"; import DivideDatasetColumns from "./DivideDatasetColumns"; import SplitDatasetRows from "./SplitDatasetRows"; import { @@ -27,6 +28,7 @@ import { getColorByColumnType } from "../../utils"; * @param {function} setNextEnabled function to enable or disable the "Next" button in the modal */ function PrepareDatasetStep({ newExp, setNewExp, setNextEnabled }) { + const theme = useTheme(); const [datasetInfo, setDatasetInfo] = useState({}); const [datasetTypes, setDatasetTypes] = useState({}); const { enqueueSnackbar } = useSnackbar(); diff --git a/DashAI/front/src/components/experiments/metrics/MetricCard.jsx b/DashAI/front/src/components/experiments/metrics/MetricCard.jsx index 7ada1fd2f..f16cf4547 100644 --- a/DashAI/front/src/components/experiments/metrics/MetricCard.jsx +++ b/DashAI/front/src/components/experiments/metrics/MetricCard.jsx @@ -1,23 +1,9 @@ import { Card, CardActionArea, Box, Typography, Chip } from "@mui/material"; +import { useTheme } from "@mui/material/styles"; import CheckIcon from "@mui/icons-material/Check"; import TrendingUpIcon from "@mui/icons-material/TrendingUp"; import TrendingDownIcon from "@mui/icons-material/TrendingDown"; -const splitColors = { - train: { - border: "#4caf50", - bg: "rgba(76,175,80,0.08)", - }, - test: { - border: "#2196f3", - bg: "rgba(33,150,243,0.08)", - }, - validation: { - border: "#ff9800", - bg: "rgba(255,152,0,0.08)", - }, -}; - export default function MetricCard({ metric, isSelected, @@ -25,6 +11,23 @@ export default function MetricCard({ splitType, disabled = false, }) { + const theme = useTheme(); + + const splitColors = { + train: { + border: theme.palette.chart.train, + bg: `${theme.palette.chart.train}14`, // ~8% opacity + }, + test: { + border: theme.palette.chart.test, + bg: `${theme.palette.chart.test}14`, + }, + validation: { + border: theme.palette.chart.validation, + bg: `${theme.palette.chart.validation}14`, + }, + }; + const colors = splitColors[splitType]; return ( diff --git a/DashAI/front/src/components/generative/ChatTimeStamp.jsx b/DashAI/front/src/components/generative/ChatTimeStamp.jsx index 3843cf732..ec4501991 100644 --- a/DashAI/front/src/components/generative/ChatTimeStamp.jsx +++ b/DashAI/front/src/components/generative/ChatTimeStamp.jsx @@ -1,13 +1,16 @@ import { Typography } from "@mui/material"; +import { useTheme } from "@mui/material/styles"; export function ChatTimestamp({ timestamp, isUser }) { + const theme = useTheme(); + if (!timestamp) return null; return ( { @@ -21,7 +23,7 @@ export function WaitingAnimationChat({ isActive }) { return ( - + {dots} diff --git a/DashAI/front/src/components/models/DatasetVisualization.jsx b/DashAI/front/src/components/models/DatasetVisualization.jsx index 66bc4d82b..a87c28a78 100644 --- a/DashAI/front/src/components/models/DatasetVisualization.jsx +++ b/DashAI/front/src/components/models/DatasetVisualization.jsx @@ -10,6 +10,7 @@ import { Tabs, Tab, } from "@mui/material"; +import { useTheme } from "@mui/material/styles"; import { AddCircleOutline as AddIcon } from "@mui/icons-material"; import { getDatasetFile, @@ -35,12 +36,14 @@ export default function DatasetVisualization({ existingSessions = [], tasks = [], }) { + const theme = useTheme(); + if (!dataset) { return ( - + Loading... ); @@ -221,7 +224,7 @@ export default function DatasetVisualization({ {/* Tabs */} - + Processing your dataset... - + {/* Create new item button */} @@ -154,7 +156,7 @@ export default function ModelsLeftBar({ title="New Dataset/Session" /> ) : ( - + Models Module )} @@ -169,7 +171,9 @@ export default function ModelsLeftBar({ /> - + {/* Scrollable content */} @@ -185,7 +189,13 @@ export default function ModelsLeftBar({ getItemDescription={getDatasetDescription} /> - + - Available Models + + Available Models + - + {modelDisplayName} @@ -164,7 +169,10 @@ function RunCard({ values.reduce((sum, val) => sum + val, 0) / values.length; return ( - + {metric.toUpperCase()} @@ -179,7 +187,10 @@ function RunCard({ {/* Description if present */} {run.description && ( - + {run.description} )} @@ -269,7 +280,10 @@ function RunCard({ {/* Goal Metric */} {run.goal_metric && ( - + Goal Metric: {run.goal_metric} diff --git a/DashAI/front/src/components/models/SessionVisualization.jsx b/DashAI/front/src/components/models/SessionVisualization.jsx index 078818fa8..9aac09a85 100644 --- a/DashAI/front/src/components/models/SessionVisualization.jsx +++ b/DashAI/front/src/components/models/SessionVisualization.jsx @@ -215,7 +215,9 @@ export default function SessionVisualization({ mb: 2, }} > - Model Comparison + + Model Comparison + {/* Metric Split Selector */} {showTable && diff --git a/DashAI/front/src/components/models/model/ModelListItem.jsx b/DashAI/front/src/components/models/model/ModelListItem.jsx index c2ef3c6fa..14e3d5b45 100644 --- a/DashAI/front/src/components/models/model/ModelListItem.jsx +++ b/DashAI/front/src/components/models/model/ModelListItem.jsx @@ -1,9 +1,11 @@ import React, { useState } from "react"; import { Box, Typography, Tooltip } from "@mui/material"; +import { useTheme } from "@mui/material/styles"; import HoverModelInfo from "./HoverModelInfo"; import { ModelIcon } from "./ModelIcon"; export default function ModelListItem({ model, disabled = false, onClick }) { + const theme = useTheme(); const [anchorEl, setAnchorEl] = useState(null); const [hoveredModel, setHoveredModel] = useState(null); @@ -20,7 +22,8 @@ export default function ModelListItem({ model, disabled = false, onClick }) { }; // Get color and icon from metadata or use defaults - const color = model.color || model.metadata?.color || "#795548"; + const color = + model.color || model.metadata?.color || theme.palette.text.secondary; const iconName = model.metadata?.icon || "Science"; return ( diff --git a/DashAI/front/src/components/notebooks/DescriptionPanel.jsx b/DashAI/front/src/components/notebooks/DescriptionPanel.jsx index 5b4437952..a558daf58 100644 --- a/DashAI/front/src/components/notebooks/DescriptionPanel.jsx +++ b/DashAI/front/src/components/notebooks/DescriptionPanel.jsx @@ -1,12 +1,14 @@ import { Box, Typography } from "@mui/material"; +import { useTheme } from "@mui/material/styles"; export default function DescriptionPanel() { + const theme = useTheme(); return ( - + Note: {message} diff --git a/DashAI/front/src/components/notebooks/RightBar.jsx b/DashAI/front/src/components/notebooks/RightBar.jsx index b7df93504..23b3ef831 100644 --- a/DashAI/front/src/components/notebooks/RightBar.jsx +++ b/DashAI/front/src/components/notebooks/RightBar.jsx @@ -297,7 +297,9 @@ export default function RightBar({ notebook, onToggle }) { justifyContent: "space-between", }} > - Analysis Tools + + Analysis Tools + - + Selected rows:{" "} {selectedRows.length === 0 ? "all" diff --git a/DashAI/front/src/components/notebooks/converter/ConverterBox.jsx b/DashAI/front/src/components/notebooks/converter/ConverterBox.jsx index 2ee63adc2..e929ac400 100644 --- a/DashAI/front/src/components/notebooks/converter/ConverterBox.jsx +++ b/DashAI/front/src/components/notebooks/converter/ConverterBox.jsx @@ -8,6 +8,7 @@ import { CircularProgress, IconButton, } from "@mui/material"; +import { useTheme } from "@mui/material/styles"; import { Delete } from "@mui/icons-material"; import { DataGrid } from "@mui/x-data-grid"; import Transform from "@mui/icons-material/Transform"; @@ -20,6 +21,7 @@ export default function ConverterBox({ onStatusChange, handleConverterDeleteClick, }) { + const theme = useTheme(); const [converterComponent, setConverterComponent] = useState({}); useEffect(() => { @@ -70,7 +72,11 @@ export default function ConverterBox({ - + {converterComponent.display_name} @@ -121,7 +129,7 @@ export default function ConverterBox({ Step 1: Select Scope - + Here you will configure which columns to apply the converter to. {/* Scope selection UI */} @@ -119,7 +124,10 @@ export default function ScopeStepConverter({ }} onValidationChange={(isValid) => setIsColumnSelectionValid(isValid)} /> - + Here you will configure which rows to apply the converter to. - + Loading... ); diff --git a/DashAI/front/src/components/notebooks/dataset/IssueCard.jsx b/DashAI/front/src/components/notebooks/dataset/IssueCard.jsx index c4e1e4062..a7e753578 100644 --- a/DashAI/front/src/components/notebooks/dataset/IssueCard.jsx +++ b/DashAI/front/src/components/notebooks/dataset/IssueCard.jsx @@ -11,7 +11,7 @@ const IssueCard = ({ title, count, items, severity = "info" }) => { p: 2, border: `1px solid ${palette.light}`, borderRadius: 2, - bgcolor: "#2C2C2C", + bgcolor: theme.palette.ui.panelDark, color: palette.main, display: "flex", flexDirection: "column", diff --git a/DashAI/front/src/components/notebooks/dataset/MetricRow.jsx b/DashAI/front/src/components/notebooks/dataset/MetricRow.jsx index 1d3fbb671..cf938dc28 100644 --- a/DashAI/front/src/components/notebooks/dataset/MetricRow.jsx +++ b/DashAI/front/src/components/notebooks/dataset/MetricRow.jsx @@ -1,13 +1,18 @@ import React from "react"; import { Box, Typography } from "@mui/material"; +import { useTheme } from "@mui/material/styles"; -export const MetricRow = ({ label, value }) => ( - - - {label} - - - {value} - - -); +export const MetricRow = ({ label, value }) => { + const theme = useTheme(); + + return ( + + + {label} + + + {value} + + + ); +}; diff --git a/DashAI/front/src/components/notebooks/dataset/StatBox.jsx b/DashAI/front/src/components/notebooks/dataset/StatBox.jsx index c0b425fb0..a3750bc24 100644 --- a/DashAI/front/src/components/notebooks/dataset/StatBox.jsx +++ b/DashAI/front/src/components/notebooks/dataset/StatBox.jsx @@ -1,22 +1,30 @@ import React from "react"; import { Paper, Typography } from "@mui/material"; +import { useTheme } from "@mui/material/styles"; -export const StatBox = ({ label, value }) => ( - - - {value} - - - {label} - - -); +export const StatBox = ({ label, value }) => { + const theme = useTheme(); + return ( + + + {value} + + + {label} + + + ); +}; diff --git a/DashAI/front/src/components/notebooks/dataset/tabs/CorrelationsTab.jsx b/DashAI/front/src/components/notebooks/dataset/tabs/CorrelationsTab.jsx index c45ce91f6..668f13123 100644 --- a/DashAI/front/src/components/notebooks/dataset/tabs/CorrelationsTab.jsx +++ b/DashAI/front/src/components/notebooks/dataset/tabs/CorrelationsTab.jsx @@ -1,5 +1,6 @@ import React from "react"; import { Box, Typography, CardContent, Card } from "@mui/material"; +import { useTheme } from "@mui/material/styles"; import { BarChart, Bar, @@ -12,6 +13,7 @@ import { } from "recharts"; const CorrelationsTab = ({ correlations }) => { + const theme = useTheme(); const corrData = []; Object.entries(correlations).forEach(([col1, corrs]) => { Object.entries(corrs).forEach(([col2, value]) => { @@ -26,7 +28,7 @@ const CorrelationsTab = ({ correlations }) => { return ( - + Correlation Analysis @@ -39,13 +41,13 @@ const CorrelationsTab = ({ correlations }) => { - + {corrData.map((entry, index) => ( { + const theme = useTheme(); const missingData = Object.entries(nan).map(([col, count]) => ({ column: col, missing: count, @@ -45,7 +47,7 @@ const OverviewTab = ({ {/* Data View */} - + Dataset Preview diff --git a/DashAI/front/src/components/notebooks/datasetCreation/SaveDatasetModal.jsx b/DashAI/front/src/components/notebooks/datasetCreation/SaveDatasetModal.jsx index 1c7a2a030..5f1a27495 100644 --- a/DashAI/front/src/components/notebooks/datasetCreation/SaveDatasetModal.jsx +++ b/DashAI/front/src/components/notebooks/datasetCreation/SaveDatasetModal.jsx @@ -8,6 +8,7 @@ import { Typography, IconButton, } from "@mui/material"; +import { useTheme } from "@mui/material/styles"; import { Close } from "@mui/icons-material"; import { useSnackbar } from "notistack"; import ConverterHistoryList from "../converter/ConverterHistoryList"; diff --git a/DashAI/front/src/components/notebooks/explorer/ExplorerBox.jsx b/DashAI/front/src/components/notebooks/explorer/ExplorerBox.jsx index 8aee6274b..d4923b34a 100644 --- a/DashAI/front/src/components/notebooks/explorer/ExplorerBox.jsx +++ b/DashAI/front/src/components/notebooks/explorer/ExplorerBox.jsx @@ -9,6 +9,7 @@ import { CircularProgress, Button, } from "@mui/material"; +import { useTheme } from "@mui/material/styles"; import { Analytics, Info, Delete } from "@mui/icons-material"; import { TabResults } from "./tabs"; import { getExplorerStatus } from "../../../utils/explorerStatus"; @@ -22,6 +23,7 @@ export default function ExplorerBox({ handleExplorerDeleteClick, onStatusChange, }) { + const theme = useTheme(); const [explorerComponent, setExplorerComponent] = useState({}); const [openExplorerDetails, setOpenExplorerDetails] = useState(false); const { loading, data, dataType, setData } = useExplorerResults(explorer); @@ -78,7 +80,11 @@ export default function ExplorerBox({ return ( - + {explorerComponent.display_name} @@ -146,7 +154,7 @@ export default function ExplorerBox({ Step 1: Select Scope - + Select the columns to be used by the explorer. diff --git a/DashAI/front/src/components/pipelines/CustomNode.jsx b/DashAI/front/src/components/pipelines/CustomNode.jsx index 355c77cbc..d49542e0e 100644 --- a/DashAI/front/src/components/pipelines/CustomNode.jsx +++ b/DashAI/front/src/components/pipelines/CustomNode.jsx @@ -27,9 +27,13 @@ const CustomNode = ({ data, isConnectable }) => { const borderColor = data.notConfigured && !isDisabled ? `2px solid ${theme.palette.warning.main}` - : "1px solid #ccc"; - const iconColor = isDisabled ? "#aaa" : "#555"; - const bgColor = isDisabled ? "#f0f0f0" : "#fff"; + : `1px solid ${theme.palette.ui.borderLight}`; + const iconColor = isDisabled + ? theme.palette.text.secondary + : theme.palette.text.primary; + const bgColor = isDisabled + ? theme.palette.ui.panelMedium + : theme.palette.background.paper; const nodeContent = ( { }, }} > - + )} @@ -76,10 +82,10 @@ const CustomNode = ({ data, isConnectable }) => { position={Position.Left} style={{ background: isDisabled - ? "#ccc" + ? theme.palette.ui.border : data.hasError ? theme.palette.error.main - : "#555", + : theme.palette.text.primary, width: 8, height: 8, borderRadius: "50%", @@ -95,7 +101,9 @@ const CustomNode = ({ data, isConnectable }) => { type="source" position={Position.Right} style={{ - background: isDisabled ? "#ccc" : "#555", + background: isDisabled + ? theme.palette.ui.border + : theme.palette.text.primary, width: 8, height: 8, borderRadius: "50%", @@ -114,7 +122,9 @@ const CustomNode = ({ data, isConnectable }) => { alignItems: "center", }} > - + {data.name || data.label} diff --git a/DashAI/front/src/components/pipelines/NodeSidebar.jsx b/DashAI/front/src/components/pipelines/NodeSidebar.jsx index f8069df50..0bc68856a 100644 --- a/DashAI/front/src/components/pipelines/NodeSidebar.jsx +++ b/DashAI/front/src/components/pipelines/NodeSidebar.jsx @@ -1,14 +1,25 @@ import React from "react"; import { Box, Typography } from "@mui/material"; +import { useTheme } from "@mui/material/styles"; import HelpOutlineIcon from "@mui/icons-material/HelpOutline"; import { getNodeHelp } from "./nodeHelp"; function NodeSidebar({ availableNodes, onDragStart, nodeHelp }) { + const theme = useTheme(); return ( - + Nodes {availableNodes.map((node) => ( @@ -19,8 +30,8 @@ function NodeSidebar({ availableNodes, onDragStart, nodeHelp }) { sx={{ mb: 1, p: 1, - backgroundColor: "#333", - color: "#fff", + backgroundColor: theme.palette.ui.border, + color: theme.palette.text.primary, borderRadius: 1, textAlign: "center", cursor: "grab", @@ -33,8 +44,8 @@ function NodeSidebar({ availableNodes, onDragStart, nodeHelp }) { @@ -44,7 +55,11 @@ function NodeSidebar({ availableNodes, onDragStart, nodeHelp }) { <> {help.name || nodeHelp?.type || "Pipeline Help"} @@ -55,7 +70,7 @@ function NodeSidebar({ availableNodes, onDragStart, nodeHelp }) { {paragraph} @@ -63,17 +78,26 @@ function NodeSidebar({ availableNodes, onDragStart, nodeHelp }) { )} {help.input && ( - + Inputs: {help.input || "None"} )} {help.output && ( - + Outputs: {help.output || "None"} )} {help.next && ( - + Can be followed by: {help.next || "None"} )} diff --git a/DashAI/front/src/components/predictions/ManualInputForm.jsx b/DashAI/front/src/components/predictions/ManualInputForm.jsx index 324eb1c84..b818f592b 100644 --- a/DashAI/front/src/components/predictions/ManualInputForm.jsx +++ b/DashAI/front/src/components/predictions/ManualInputForm.jsx @@ -12,6 +12,7 @@ import { Paper, IconButton, } from "@mui/material"; +import { useTheme } from "@mui/material/styles"; import { AddCircleOutline, DeleteOutline } from "@mui/icons-material"; import { renderInputField } from "./renderInputField"; @@ -23,6 +24,7 @@ export default function ManualInputForm({ manualInputData, setManualInputData, }) { + const theme = useTheme(); const [rows, setRows] = useState(createInitialRows()); function createInitialRows() { @@ -92,7 +94,11 @@ export default function ManualInputForm({ Manual Input - + Enter data manually for prediction. Fill in the fields below and submit when ready. diff --git a/DashAI/front/src/components/predictions/ModeSelector.jsx b/DashAI/front/src/components/predictions/ModeSelector.jsx index a0cb7c258..bdcfdfa7d 100644 --- a/DashAI/front/src/components/predictions/ModeSelector.jsx +++ b/DashAI/front/src/components/predictions/ModeSelector.jsx @@ -1,15 +1,21 @@ import { useState } from "react"; import { Box, Card, CardContent, Typography, Paper } from "@mui/material"; +import { useTheme } from "@mui/material/styles"; import StorageIcon from "@mui/icons-material/Storage"; import CreateIcon from "@mui/icons-material/Create"; function ModeSelector({ predictionMode, setPredictionMode }) { + const theme = useTheme(); + return ( Select Prediction Mode - + Choose how you would like to provide input data for the prediction. @@ -40,7 +46,10 @@ function ModeSelector({ predictionMode, setPredictionMode }) { Use Existing Dataset - + Select a dataset from the platform @@ -73,7 +82,10 @@ function ModeSelector({ predictionMode, setPredictionMode }) { Manual Prediction - + Enter values manually diff --git a/DashAI/front/src/components/predictions/PredictionsTable.jsx b/DashAI/front/src/components/predictions/PredictionsTable.jsx index 96e5315ac..f55e3f3dd 100644 --- a/DashAI/front/src/components/predictions/PredictionsTable.jsx +++ b/DashAI/front/src/components/predictions/PredictionsTable.jsx @@ -7,12 +7,14 @@ import { Tooltip, IconButton, } from "@mui/material"; +import { useTheme } from "@mui/material/styles"; import { DataGrid } from "@mui/x-data-grid"; import { formatDate, getColorByStatus } from "../../utils"; import { getPredictionStatus } from "../../utils/predictionStatus"; import { Delete } from "@mui/icons-material"; function PredictionsTable({ predictions, onItemClick, onItemDelete }) { + const theme = useTheme(); const StyledCell = styled("div")(({ theme, color }) => ({ display: "inline-block", padding: theme.spacing(0.5), @@ -63,7 +65,7 @@ function PredictionsTable({ predictions, onItemClick, onItemDelete }) { { const statusText = getPredictionStatus(params?.row?.status); return ( - + {statusText} ); @@ -145,8 +147,13 @@ function PredictionsTable({ predictions, onItemClick, onItemDelete }) { if (!predictions || predictions.length === 0) { return ( - No predictions yet - + + No predictions yet + + Run your first prediction to see it here @@ -163,7 +170,10 @@ function PredictionsTable({ predictions, onItemClick, onItemDelete }) { Predictions - + Click on a prediction to view details or delete it using the delete icon. diff --git a/DashAI/front/src/components/predictions/ResultsTable.jsx b/DashAI/front/src/components/predictions/ResultsTable.jsx index 07c0a6b16..8e30a1992 100644 --- a/DashAI/front/src/components/predictions/ResultsTable.jsx +++ b/DashAI/front/src/components/predictions/ResultsTable.jsx @@ -11,6 +11,7 @@ import { Paper, CircularProgress, } from "@mui/material"; +import { useTheme } from "@mui/material/styles"; import { getPredictionStatus } from "../../utils/predictionStatus"; import DatasetTable from "../notebooks/dataset/DatasetTable"; import { getDatasetFile } from "../../api/datasets"; @@ -18,6 +19,7 @@ import { getDatasetFile } from "../../api/datasets"; const RUNNING_STATUSES = ["Delivered", "Started"]; function ResultsTable({ selectedPrediction }) { + const theme = useTheme(); const [loadingExecution, setLoadingExecution] = useState( RUNNING_STATUSES.includes(getPredictionStatus(selectedPrediction?.status)), ); @@ -51,8 +53,7 @@ function ResultsTable({ selectedPrediction }) { {loadingExecution ? "The prediction is still running. Results will be available once it is finished." @@ -65,7 +66,7 @@ function ResultsTable({ selectedPrediction }) { sx={{ py: 4, textAlign: "center", - color: "text.secondary", + color: theme.palette.text.secondary, }} > @@ -79,7 +80,10 @@ function ResultsTable({ selectedPrediction }) { selectedPrediction && getPredictionStatus(selectedPrediction?.status) === "Finished" && ( <> - + {selectedPrediction.dataset ? `Based on dataset: ${selectedPrediction.dataset.name}` : "Manually provided input data."} diff --git a/DashAI/front/src/components/shared/FormSchemaBreadScrumbs.jsx b/DashAI/front/src/components/shared/FormSchemaBreadScrumbs.jsx index 74275d99f..4b3c43a80 100644 --- a/DashAI/front/src/components/shared/FormSchemaBreadScrumbs.jsx +++ b/DashAI/front/src/components/shared/FormSchemaBreadScrumbs.jsx @@ -2,6 +2,7 @@ import React from "react"; import Breadcrumbs from "@mui/material/Breadcrumbs"; import Typography from "@mui/material/Typography"; import Link from "@mui/material/Link"; +import { useTheme } from "@mui/material/styles"; import { useFormSchemaStore } from "../../contexts/schema"; /** @@ -9,6 +10,7 @@ import { useFormSchemaStore } from "../../contexts/schema"; */ function FormSchemaBreadScrumbs() { + const theme = useTheme(); const { properties, removeLastProperty } = useFormSchemaStore(); const handleRemoveLastProperty = (index) => { @@ -32,7 +34,7 @@ function FormSchemaBreadScrumbs() { return ( {linkedProperties} - + {properties[properties.length - 1]?.label} diff --git a/DashAI/front/src/components/threeSectionLayout/BarHeader.jsx b/DashAI/front/src/components/threeSectionLayout/BarHeader.jsx index e146d28ab..1eb6c72d9 100644 --- a/DashAI/front/src/components/threeSectionLayout/BarHeader.jsx +++ b/DashAI/front/src/components/threeSectionLayout/BarHeader.jsx @@ -1,6 +1,8 @@ import { Box, Typography } from "@mui/material"; +import { useTheme } from "@mui/material/styles"; export default function BarHeader() { + const theme = useTheme(); return ( Dash diff --git a/DashAI/front/src/components/threeSectionLayout/CollapsibleList.jsx b/DashAI/front/src/components/threeSectionLayout/CollapsibleList.jsx index 8d8d88e8d..5dc6d042b 100644 --- a/DashAI/front/src/components/threeSectionLayout/CollapsibleList.jsx +++ b/DashAI/front/src/components/threeSectionLayout/CollapsibleList.jsx @@ -1,5 +1,6 @@ import { useState } from "react"; import { Box, Typography, Collapse } from "@mui/material"; +import { useTheme } from "@mui/material/styles"; import FolderIcon from "@mui/icons-material/Folder"; import KeyboardArrowRightIcon from "@mui/icons-material/KeyboardArrowRight"; import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown"; @@ -17,6 +18,7 @@ export default function CollapsibleList({ Icon = FolderIcon, getItemDescription, }) { + const theme = useTheme(); const [open, setOpen] = useState(defaultOpen); const count = items?.length ?? 0; @@ -46,11 +48,11 @@ export default function CollapsibleList({ py: 0.5, px: 1, borderRadius: 1, - "&:hover": { bgcolor: "rgba(255, 255, 255, 0.05)" }, + "&:hover": { bgcolor: theme.palette.ui.hover }, }} onClick={() => setOpen((v) => !v)} > - + {title} @@ -69,8 +72,8 @@ export default function CollapsibleList({ {open ? ( - + ) : ( - + )} @@ -97,10 +104,12 @@ export default function CollapsibleList({ sx={{ "&::-webkit-scrollbar": { width: "6px" }, "&::-webkit-scrollbar-thumb": { - backgroundColor: "#374151", + backgroundColor: theme.palette.ui.scrollbar, borderRadius: "3px", }, - "&::-webkit-scrollbar-thumb:hover": { backgroundColor: "#4B5563" }, + "&::-webkit-scrollbar-thumb:hover": { + backgroundColor: theme.palette.ui.scrollbarHover, + }, overflowY: "auto", }} > @@ -125,7 +134,12 @@ export default function CollapsibleList({ )) ) : ( No items found diff --git a/DashAI/front/src/components/threeSectionLayout/GroupedCollapsibleList.jsx b/DashAI/front/src/components/threeSectionLayout/GroupedCollapsibleList.jsx index 32b5dc2cc..e62ee88c5 100644 --- a/DashAI/front/src/components/threeSectionLayout/GroupedCollapsibleList.jsx +++ b/DashAI/front/src/components/threeSectionLayout/GroupedCollapsibleList.jsx @@ -1,5 +1,6 @@ import { useState } from "react"; import { Box, Typography, Collapse } from "@mui/material"; +import { useTheme } from "@mui/material/styles"; import KeyboardArrowRightIcon from "@mui/icons-material/KeyboardArrowRight"; import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown"; import ItemBox from "./ItemBox"; @@ -16,6 +17,7 @@ export default function GroupedCollapsibleList({ getItemDescription, initialOpenGroups = {}, }) { + const theme = useTheme(); const [openGroups, setOpenGroups] = useState(initialOpenGroups); const toggleGroup = (groupName) => { @@ -57,16 +59,20 @@ export default function GroupedCollapsibleList({ top: 0, zIndex: 10, borderRadius: 1, - "&:hover": { bgcolor: "rgba(255, 255, 255, 0.05)" }, + "&:hover": { bgcolor: theme.palette.ui.hover }, }} > - {Icon && } - {title} + {Icon && ( + + )} + {title} @@ -106,18 +114,18 @@ export default function GroupedCollapsibleList({ px: 1, borderRadius: 1, "&:hover": { - bgcolor: "rgba(255, 255, 255, 0.05)", + bgcolor: theme.palette.ui.hover, }, }} onClick={() => toggleGroup(groupName)} > {openGroups[groupName] ? ( ) : ( )} {groupName} ) : ( - + {editedName} )} - + {description ? description : ""} diff --git a/DashAI/front/src/components/threeSectionLayout/ItemMenu.jsx b/DashAI/front/src/components/threeSectionLayout/ItemMenu.jsx index 43323988e..3e3348c5d 100644 --- a/DashAI/front/src/components/threeSectionLayout/ItemMenu.jsx +++ b/DashAI/front/src/components/threeSectionLayout/ItemMenu.jsx @@ -9,6 +9,7 @@ import { styled, Box, } from "@mui/material"; +import { useTheme } from "@mui/material/styles"; import MoreHorizIcon from "@mui/icons-material/MoreHoriz"; import DeleteIcon from "@mui/icons-material/Delete"; import InfoIcon from "@mui/icons-material/Info"; @@ -23,6 +24,7 @@ const DeleteMenuItem = styled(MenuItem)(({ theme }) => ({ })); export default function ItemMenu({ itemId, onInfo, onDelete, onEdit }) { + const theme = useTheme(); const [anchorEl, setAnchorEl] = useState(null); const [deleteModalOpen, setDeleteModalOpen] = useState(false); const open = Boolean(anchorEl); @@ -61,7 +63,7 @@ export default function ItemMenu({ itemId, onInfo, onDelete, onEdit }) { aria-expanded={open ? "true" : undefined} onClick={handleClick} size="small" - sx={{ color: "text.secondary" }} + sx={{ color: theme.palette.text.secondary }} > diff --git a/DashAI/front/src/components/threeSectionLayout/SearchBar.jsx b/DashAI/front/src/components/threeSectionLayout/SearchBar.jsx index 26800ccc0..f97c9a102 100644 --- a/DashAI/front/src/components/threeSectionLayout/SearchBar.jsx +++ b/DashAI/front/src/components/threeSectionLayout/SearchBar.jsx @@ -1,7 +1,10 @@ import { TextField, InputAdornment } from "@mui/material"; +import { useTheme } from "@mui/material/styles"; import SearchIcon from "@mui/icons-material/Search"; export default function SearchBar({ placeholder, onChange, value }) { + const theme = useTheme(); + return ( - + ), }, diff --git a/DashAI/front/src/pages/home/Home.jsx b/DashAI/front/src/pages/home/Home.jsx index 7ac97ea2c..d2c7c47cf 100644 --- a/DashAI/front/src/pages/home/Home.jsx +++ b/DashAI/front/src/pages/home/Home.jsx @@ -20,10 +20,15 @@ function Home() { {/* Title */} - + Welcome to DashAI! - + Getting started - + Advanced @@ -14,7 +17,10 @@ export default function MetricsCard({ title, metrics }) { key={key} sx={{ display: "flex", justifyContent: "space-between", mb: 1 }} > - + {key}: @@ -23,7 +29,10 @@ export default function MetricsCard({ title, metrics }) { )) ) : ( - + No metrics available )} diff --git a/DashAI/front/src/pages/results/components/ResultsDialogViews.jsx b/DashAI/front/src/pages/results/components/ResultsDialogViews.jsx index e1ec16381..feecd2e6c 100644 --- a/DashAI/front/src/pages/results/components/ResultsDialogViews.jsx +++ b/DashAI/front/src/pages/results/components/ResultsDialogViews.jsx @@ -1,10 +1,12 @@ import React from "react"; import PropTypes from "prop-types"; import { Grid, Button, Typography } from "@mui/material"; +import { useTheme } from "@mui/material/styles"; import TimestampWrapper from "../../../components/shared/TimestampWrapper"; import { TIMESTAMP_KEYS } from "../../../constants/timestamp"; function ResultsDialogViews({ showTable, handleShowTable, handleShowGraphs }) { + const theme = useTheme(); return ( @@ -22,8 +24,10 @@ function ResultsDialogViews({ showTable, handleShowTable, handleShowGraphs }) { color={showTable ? "primary" : "inherit"} onClick={handleShowTable} style={{ - border: showTable ? "2px solid #00bebb" : "2px solid #00bebb", - color: showTable ? "#ffffff" : "#00bebb", + border: `2px solid ${theme.palette.primary.main}`, + color: showTable + ? theme.palette.text.primary + : theme.palette.primary.main, borderRadius: "1px", }} > @@ -36,8 +40,10 @@ function ResultsDialogViews({ showTable, handleShowTable, handleShowGraphs }) { color={!showTable ? "primary" : "inherit"} onClick={handleShowGraphs} style={{ - border: !showTable ? "2px solid #00bebb" : "2px solid #00bebb", - color: !showTable ? "#ffffff" : "#00bebb", + border: `2px solid ${theme.palette.primary.main}`, + color: !showTable + ? theme.palette.text.primary + : theme.palette.primary.main, borderRadius: "1px", }} > diff --git a/DashAI/front/src/pages/results/components/ResultsGraphsSelection.jsx b/DashAI/front/src/pages/results/components/ResultsGraphsSelection.jsx index 332da0bfb..edbaf267f 100644 --- a/DashAI/front/src/pages/results/components/ResultsGraphsSelection.jsx +++ b/DashAI/front/src/pages/results/components/ResultsGraphsSelection.jsx @@ -1,8 +1,10 @@ import React from "react"; import PropTypes from "prop-types"; import { Box, Button } from "@mui/material"; +import { useTheme } from "@mui/material/styles"; function ResultsGraphsSelection({ selectedChart, handleChangeChart }) { + const theme = useTheme(); return ( ))} + + {/* Theme Toggle Button */} + + + {theme.palette.mode === "dark" ? ( + + ) : ( + + )} + + diff --git a/DashAI/front/src/components/generative/Footer.jsx b/DashAI/front/src/components/generative/Footer.jsx index 6f8cfdfd3..fc66452e3 100644 --- a/DashAI/front/src/components/generative/Footer.jsx +++ b/DashAI/front/src/components/generative/Footer.jsx @@ -10,7 +10,7 @@ export default function Footer() { flexDirection={"column"} py={2} > - + setSessionInfoVisible(true)}> @@ -251,11 +251,11 @@ export default function GenerativeChat({ sessionId, taskName, paramsVersion }) { width: "8px", }, "&::-webkit-scrollbar-thumb": { - backgroundColor: "#555", + backgroundColor: "ui.border", borderRadius: "4px", }, "&::-webkit-scrollbar-thumb:hover": { - backgroundColor: "#888", + backgroundColor: "action.hover", }, }} > diff --git a/DashAI/front/src/components/generative/InfoSessionModal.jsx b/DashAI/front/src/components/generative/InfoSessionModal.jsx index 53e22f5a6..f77fe415f 100644 --- a/DashAI/front/src/components/generative/InfoSessionModal.jsx +++ b/DashAI/front/src/components/generative/InfoSessionModal.jsx @@ -10,8 +10,10 @@ import TableBody from "@mui/material/TableBody"; import TableCell from "@mui/material/TableCell"; import TableContainer from "@mui/material/TableContainer"; import TableRow from "@mui/material/TableRow"; +import { useTheme } from "@mui/material/styles"; export default function InfoSessionModal({ sessionData, open, onClose }) { + const theme = useTheme(); // Format date for display const formatDate = (dateString) => { try { @@ -91,7 +93,9 @@ export default function InfoSessionModal({ sessionData, open, onClose }) { /> Model:{" "} - {sessionData.model_name} + + {sessionData.model_name} + diff --git a/DashAI/front/src/components/generative/MessageContent.jsx b/DashAI/front/src/components/generative/MessageContent.jsx index 3ed1c8b08..7620e024b 100644 --- a/DashAI/front/src/components/generative/MessageContent.jsx +++ b/DashAI/front/src/components/generative/MessageContent.jsx @@ -9,8 +9,8 @@ export function MessageContent({ messages, isUser, isWaiting }) { return ( - + - + {/* Sessions */} {/* Header */} - - Sessions + + + Sessions + Dash diff --git a/DashAI/front/src/components/generative/SessionBox.jsx b/DashAI/front/src/components/generative/SessionBox.jsx index a01bdcb22..e6048039c 100644 --- a/DashAI/front/src/components/generative/SessionBox.jsx +++ b/DashAI/front/src/components/generative/SessionBox.jsx @@ -21,12 +21,10 @@ export default function SessionBox({ alignItems: "center", borderRadius: 1, cursor: isSelected ? "default" : "pointer", - bgcolor: isSelected ? "rgba(255, 255, 255, 0.05)" : "transparent", + bgcolor: isSelected ? "action.selected" : "transparent", p: 0.5, "&:hover": { - backgroundColor: isSelected - ? "rgba(255, 255, 255, 0.05)" - : "rgba(255, 255, 255, 0.05)", + backgroundColor: isSelected ? "action.selected" : "action.hover", }, }} onClick={isSelected ? undefined : onClick} @@ -42,6 +40,7 @@ export default function SessionBox({ @@ -49,6 +48,7 @@ export default function SessionBox({ diff --git a/DashAI/front/src/components/generative/SessionList.jsx b/DashAI/front/src/components/generative/SessionList.jsx index ac11dbd3d..30468b033 100644 --- a/DashAI/front/src/components/generative/SessionList.jsx +++ b/DashAI/front/src/components/generative/SessionList.jsx @@ -1,4 +1,5 @@ import { Box, Typography, Collapse } from "@mui/material"; +import { useTheme } from "@mui/material/styles"; import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown"; import KeyboardArrowRightIcon from "@mui/icons-material/KeyboardArrowRight"; import SessionBox from "./SessionBox"; @@ -12,6 +13,7 @@ export default function SessionList({ handleSessionInfo, toggleSection, }) { + const theme = useTheme(); if (groupedSessions === undefined) { return ( toggleSection(taskName)} > {openSections[taskName] ? ( ) : ( )} - + {/* Create new item button */} @@ -118,7 +118,7 @@ export default function DatasetsNotebooksBar({ /> - + {/* Scrollable content */} @@ -134,7 +134,7 @@ export default function DatasetsNotebooksBar({ getItemDescription={getDatasetDescription} /> - + - + View mode ( - - {Object.entries(categoricalStats).map(([column, stats]) => ( - - - {/* Header */} - - - - {column} - - +export const CategoricalTab = ({ categoricalStats }) => { + const theme = useTheme(); - {/* Summary Stats */} - - - - - - - - - + return ( + + {Object.entries(categoricalStats).map(([column, stats]) => ( + + + {/* Header */} + + + + {column} + - - {/* Charts */} - - {/* Value Distribution */} - - - Value Distribution - - - - - - - - - - - + {/* Summary Stats */} + + + + + + + + + - {/* Proportion */} - - - Proportion - - - - - - {stats.top_5.map((entry, index) => ( - - ))} - - - - + {/* Charts */} + + {/* Value Distribution */} + + + Value Distribution + + + + + + + + + + + + + + + {/* Proportion */} + + + Proportion + + + + + + {stats.top_5.map((entry, index) => ( + + ))} + + + + + - - - - ))} - -); + + + ))} + + ); +}; diff --git a/DashAI/front/src/components/notebooks/dataset/tabs/NumericTab.jsx b/DashAI/front/src/components/notebooks/dataset/tabs/NumericTab.jsx index ac9682321..2d6d3fd03 100644 --- a/DashAI/front/src/components/notebooks/dataset/tabs/NumericTab.jsx +++ b/DashAI/front/src/components/notebooks/dataset/tabs/NumericTab.jsx @@ -1,142 +1,155 @@ import React from "react"; import { Box, Typography, Card, CardContent, Alert } from "@mui/material"; +import { useTheme } from "@mui/material/styles"; import TrendingUpIcon from "@mui/icons-material/TrendingUp"; import InfoIcon from "@mui/icons-material/Info"; import Plot from "react-plotly.js"; import { StatBox } from "../StatBox"; import { MetricRow } from "../MetricRow"; -export const NumericTab = ({ numericStats }) => ( - - {Object.entries(numericStats).map(([column, stats]) => ( - - - {/* Title */} - - - - {column} - - +export const NumericTab = ({ numericStats }) => { + const theme = useTheme(); - {/* Summary Stats */} - - - - - - - - - + return ( + + {Object.entries(numericStats).map(([column, stats]) => ( + + + {/* Title */} + + + + {column} + - - + + {/* Summary Stats */} + + + + + + + + + + + + + - - {/* Two-column metrics */} - - {/* Distribution Metrics */} - - - Distribution Metrics - - - - - - - + {/* Two-column metrics */} + + {/* Distribution Metrics */} + + + Distribution Metrics + + + + + + + + + + + {/* Shape Indicators */} + + + Shape Indicators + + + + + + + - {/* Shape Indicators */} - + {/* Horizontal Boxplot Visualization */} + - Shape Indicators + Boxplot - - - - - - + - - - {/* Horizontal Boxplot Visualization */} - - - Boxplot - - - - {/* Skewness Warning */} - {stats.skew > 1 && ( - } - sx={{ mt: 3 }} - > - - Right-skewed distribution: Consider applying a - log transformation. - - - )} - - - ))} - -); + {/* Skewness Warning */} + {stats.skew > 1 && ( + } + sx={{ mt: 3 }} + > + + Right-skewed distribution: Consider applying + a log transformation. + + + )} + + + ))} + + ); +}; diff --git a/DashAI/front/src/components/notebooks/dataset/tabs/OverviewTab.jsx b/DashAI/front/src/components/notebooks/dataset/tabs/OverviewTab.jsx index f7f79df8d..c2df544dd 100644 --- a/DashAI/front/src/components/notebooks/dataset/tabs/OverviewTab.jsx +++ b/DashAI/front/src/components/notebooks/dataset/tabs/OverviewTab.jsx @@ -61,7 +61,7 @@ const OverviewTab = ({ {/* Missing Values Overview */} - + Missing Values Overview @@ -74,11 +74,12 @@ const OverviewTab = ({ @@ -94,7 +95,7 @@ const OverviewTab = ({ {/* Column Types Distribution */} - + Column Types Distribution @@ -106,7 +107,7 @@ const OverviewTab = ({ sx={{ p: 2, textAlign: "center", - bgcolor: "#363636", + bgcolor: "ui.disabled", borderRadius: 2, }} > diff --git a/DashAI/front/src/components/notebooks/dataset/tabs/QualityTab.jsx b/DashAI/front/src/components/notebooks/dataset/tabs/QualityTab.jsx index a38ec0830..3ba222c88 100644 --- a/DashAI/front/src/components/notebooks/dataset/tabs/QualityTab.jsx +++ b/DashAI/front/src/components/notebooks/dataset/tabs/QualityTab.jsx @@ -14,7 +14,7 @@ const QualityTab = ({ qualityInfo, totalRows }) => { {/* Data Quality Summary */} - + Data Quality Summary @@ -72,7 +72,7 @@ const QualityTab = ({ qualityInfo, totalRows }) => { {qualityInfo.rows_with_any_nan} @@ -91,7 +91,7 @@ const QualityTab = ({ qualityInfo, totalRows }) => { {qualityInfo.rows_with_multiple_nan} @@ -116,7 +116,7 @@ const QualityTab = ({ qualityInfo, totalRows }) => { {/* Missing Data by Column */} - + Missing Data by Column diff --git a/DashAI/front/src/components/notebooks/dataset/tabs/TextTab.jsx b/DashAI/front/src/components/notebooks/dataset/tabs/TextTab.jsx index bc362df54..503e66f31 100644 --- a/DashAI/front/src/components/notebooks/dataset/tabs/TextTab.jsx +++ b/DashAI/front/src/components/notebooks/dataset/tabs/TextTab.jsx @@ -153,11 +153,12 @@ export const TextTab = ({ textStats }) => ( diff --git a/DashAI/front/src/components/notebooks/notebook/DatasetPreviewNotebook.jsx b/DashAI/front/src/components/notebooks/notebook/DatasetPreviewNotebook.jsx index 37aca3854..4393abc71 100644 --- a/DashAI/front/src/components/notebooks/notebook/DatasetPreviewNotebook.jsx +++ b/DashAI/front/src/components/notebooks/notebook/DatasetPreviewNotebook.jsx @@ -102,7 +102,7 @@ export default function DatasetPreviewNotebook({ {hoveredTool.display_name} @@ -66,7 +69,7 @@ export default function HoverToolInfo({ {/* Description */} {hoveredTool.description} @@ -78,7 +81,7 @@ export default function HoverToolInfo({ sx={{ bgcolor: hoveredTool.metadata.color, color: "rgba(255, 255, 255, 1)", - border: `1px solid rgb(63, 63, 70)`, + border: `1px solid ${theme.palette.divider}`, fontWeight: 500, }} /> diff --git a/DashAI/front/src/components/notebooks/tool/ToolList.jsx b/DashAI/front/src/components/notebooks/tool/ToolList.jsx index 6b2221bce..bed034ceb 100644 --- a/DashAI/front/src/components/notebooks/tool/ToolList.jsx +++ b/DashAI/front/src/components/notebooks/tool/ToolList.jsx @@ -62,7 +62,7 @@ export default function ToolList({ tools, notebook, FormComponent }) { disableGutters defaultExpanded sx={{ - bgcolor: "rgb(31, 31, 31)", + bgcolor: "ui.box", borderRadius: 1.5, overflow: "hidden", "&:before": { display: "none" }, @@ -88,7 +88,7 @@ export default function ToolList({ tools, notebook, FormComponent }) { size="small" label={list.length} sx={{ - bgcolor: "rgb(43, 43, 43)", + bgcolor: "ui.disabled", color: "text.secondary", height: 20, }} diff --git a/DashAI/front/src/components/notebooks/tool/ToolListItem.jsx b/DashAI/front/src/components/notebooks/tool/ToolListItem.jsx index accda461d..94115b80b 100644 --- a/DashAI/front/src/components/notebooks/tool/ToolListItem.jsx +++ b/DashAI/front/src/components/notebooks/tool/ToolListItem.jsx @@ -1,5 +1,6 @@ import React, { useState } from "react"; import { Box, Typography, Chip, Tooltip } from "@mui/material"; +import { useTheme } from "@mui/material/styles"; import HoverToolInfo from "./HoverToolInfo"; import api from "../../../api/api"; import { CategoryIcon } from "./CategoryIcon"; @@ -10,6 +11,7 @@ export default function ToolListItem({ onClick, ...props }) { + const theme = useTheme(); const [anchorEl, setAnchorEl] = useState(null); const [hoveredTool, setHoveredTool] = useState(null); @@ -47,16 +49,16 @@ export default function ToolListItem({ slotProps={{ tooltip: { sx: { - bgcolor: "rgb(33, 33, 33)", - color: "rgb(255, 255, 255)", + bgcolor: theme.palette.background.paper, + color: theme.palette.text.primary, display: disabled ? "block" : "none", - border: "1px solid rgb(63, 63, 70)", + border: `1px solid ${theme.palette.divider}`, fontSize: "0.75rem", maxWidth: 300, "& .MuiTooltip-arrow": { - color: "rgb(33, 33, 33)", + color: theme.palette.background.paper, "&::before": { - border: "1px solid rgb(63, 63, 70)", + border: `1px solid ${theme.palette.divider}`, }, }, }, @@ -75,8 +77,8 @@ export default function ToolListItem({ alignItems: "center", gap: 1.5, p: 1.5, - bgcolor: disabled ? "rgb(32, 32, 32)" : "rgb(44, 44, 44)", - border: "1px solid rgb(39, 39, 42)", + bgcolor: disabled ? "ui.disabled" : "ui.box", + border: `1px solid ${theme.palette.ui.border}`, borderRadius: 1, cursor: disabled ? "not-allowed" : "pointer", transition: "all 0.2s", @@ -84,8 +86,10 @@ export default function ToolListItem({ filter: disabled ? "grayscale(0.6)" : "none", position: "relative", "&:hover": { - bgcolor: disabled ? "rgb(32, 32, 32)" : "rgb(60, 60, 60)", - borderColor: disabled ? "rgb(39, 39, 42)" : tool.metadata.color, + bgcolor: disabled ? "ui.disabled" : theme.palette.action.hover, + borderColor: disabled + ? theme.palette.ui.border + : tool.metadata.color, transform: disabled ? "none" : "translateX(4px)", }, "&::after": disabled @@ -110,15 +114,17 @@ export default function ToolListItem({ width: 36, height: 36, borderRadius: 1, - bgcolor: disabled ? "rgb(50, 50, 50)" : "rgb(63, 63, 70)", - color: disabled ? "rgb(150, 150, 150)" : "rgb(250, 250, 250)", + bgcolor: disabled ? "ui.disabled" : "ui.border", + color: disabled ? "text.disabled" : "text.primary", flexShrink: 0, }} > @@ -135,7 +141,7 @@ export default function ToolListItem({ diff --git a/DashAI/front/src/contexts/ThemeContext.jsx b/DashAI/front/src/contexts/ThemeContext.jsx new file mode 100644 index 000000000..9564da439 --- /dev/null +++ b/DashAI/front/src/contexts/ThemeContext.jsx @@ -0,0 +1,35 @@ +import React, { createContext, useState, useMemo, useEffect } from "react"; +import { ThemeProvider, createTheme } from "@mui/material/styles"; +import getTheme from "../styles/theme"; + +export const ColorModeContext = createContext({ toggleColorMode: () => {} }); + +export function CustomThemeProvider({ children }) { + const [mode, setMode] = useState(() => { + // Load saved theme from localStorage or default to dark + const savedMode = localStorage.getItem("themeMode"); + return savedMode || "dark"; + }); + + // Save theme preference to localStorage whenever it changes + useEffect(() => { + localStorage.setItem("themeMode", mode); + }, [mode]); + + const colorMode = useMemo( + () => ({ + toggleColorMode: () => { + setMode((prevMode) => (prevMode === "light" ? "dark" : "light")); + }, + }), + [], + ); + + const theme = useMemo(() => createTheme(getTheme(mode)), [mode]); + + return ( + + {children} + + ); +} diff --git a/DashAI/front/src/index.jsx b/DashAI/front/src/index.jsx index 27362ad2b..f8d698997 100644 --- a/DashAI/front/src/index.jsx +++ b/DashAI/front/src/index.jsx @@ -1,17 +1,17 @@ import React from "react"; import ReactDOM from "react-dom/client"; import "./index.css"; -import { createTheme, ThemeProvider } from "@mui/material/styles"; import CssBaseline from "@mui/material/CssBaseline"; import App from "./App"; import reportWebVitals from "./reportWebVitals"; -import theme from "./styles/theme"; import { SnackbarProvider } from "notistack"; +import { CustomThemeProvider } from "./contexts/ThemeContext"; + const root = ReactDOM.createRoot(document.getElementById("root")); root.render( - + - + , ); diff --git a/DashAI/front/src/styles/theme.js b/DashAI/front/src/styles/theme.js index c0f6e4370..c4292420e 100644 --- a/DashAI/front/src/styles/theme.js +++ b/DashAI/front/src/styles/theme.js @@ -1,8 +1,8 @@ import QuicksandBoldWoff2 from "./fonts/Quicksand-Bold.woff2"; -const theme = { +const getTheme = (mode) => ({ palette: { - mode: "dark", + mode, // PRIMARY - Main application color // Used in: primary buttons, highlighted icons, links, active elements @@ -24,29 +24,42 @@ const theme = { // BACKGROUND - Background colors for different surfaces // Used in: page backgrounds, cards, modals, panels - background: { - default: "#2e3037", // Main app background - paper: "#121212", // Cards and modals background - box: "#212121", // Boxes and containers (AppBar, sidebars) - }, + background: + mode === "dark" + ? { + default: "#2e3037", // Main app background + paper: "#121212", // Cards and modals background + box: "#212121", // Boxes and containers (AppBar, sidebars) + } + : { + default: "#f5f5f5", // Main app background + paper: "#ffffff", // Cards and modals background + box: "#fafafa", // Boxes and containers (AppBar, sidebars) + }, // TEXT - Text colors // Used in: Typography components, labels, paragraphs - text: { - primary: "#ffffff", // Primary text (titles, important labels) - secondary: "#b0b0b0", // Secondary text (descriptions, subtitles) - }, + text: + mode === "dark" + ? { + primary: "#ffffff", // Primary text (titles, important labels) + secondary: "#b0b0b0", // Secondary text (descriptions, subtitles) + } + : { + primary: "#1a1a1a", // Primary text (titles, important labels) + secondary: "#666666", // Secondary text (descriptions, subtitles) + }, // ERROR - Error states // Used in: error messages, failed validations, critical alerts error: { - main: "#ff8383", + main: mode === "dark" ? "#ff8383" : "#d32f2f", }, // WARNING - Warning states // Used in: warning alerts, pending states requiring attention warning: { - main: "#f1ae61", + main: mode === "dark" ? "#f1ae61" : "#ed6c02", }, // SUCCESS - Success states @@ -73,11 +86,11 @@ const theme = { // STATUS - Experiment/job states // Used in: status badges, progress indicators in experiments and runs status: { - notStarted: "#626262", // Experiment not started + notStarted: mode === "dark" ? "#626262" : "#9e9e9e", // Experiment not started started: "#3e68ffff", // Experiment running finished: "#43A047", // Experiment completed successfully delivered: "#3e68ffff", // Results delivered - error: "#A70909", // Experiment error + error: mode === "dark" ? "#A70909" : "#c62828", // Experiment error }, // DATATYPE - Colors for data types in columns @@ -103,18 +116,32 @@ const theme = { // UI - Interface elements and borders // Used in: borders, dividers, scrollbars, hover states - ui: { - border: "#333", // Standard border - borderLight: "#444", // Lighter border - borderDark: "#252836", // Darker border - panelDark: "#2C2C2C", // Dark panel - panelMedium: "#363636", // Medium panel - panelLight: "#2F2F2F", // Light panel - scrollbar: "#374151", // Scrollbar color - scrollbarHover: "#4B5563", // Scrollbar on hover - hover: "rgba(255, 255, 255, 0.05)", // Element hover state - divider: "rgba(255, 255, 255, 0.15)", // Dividers and separators - }, + ui: + mode === "dark" + ? { + border: "#333", // Standard border + borderLight: "#444", // Lighter border + borderDark: "#252836", // Darker border + panelDark: "#2C2C2C", // Dark panel + panelMedium: "#363636", // Medium panel + panelLight: "#2F2F2F", // Light panel + scrollbar: "#374151", // Scrollbar color + scrollbarHover: "#4B5563", // Scrollbar on hover + hover: "rgba(255, 255, 255, 0.05)", // Element hover state + divider: "rgba(255, 255, 255, 0.15)", // Dividers and separators + } + : { + border: "#e0e0e0", // Standard border + borderLight: "#f0f0f0", // Lighter border + borderDark: "#d0d0d0", // Darker border + panelDark: "#f5f5f5", // Light panel + panelMedium: "#fafafa", // Medium panel + panelLight: "#ffffff", // Lightest panel + scrollbar: "#bdbdbd", // Scrollbar color + scrollbarHover: "#9e9e9e", // Scrollbar on hover + hover: "rgba(0, 0, 0, 0.04)", // Element hover state + divider: "rgba(0, 0, 0, 0.12)", // Dividers and separators + }, }, typography: { fontFamily: "Quicksand-Bold", @@ -142,11 +169,11 @@ const theme = { ::-webkit-scrollbar-thumb { -webkit-border-radius: 10px; border-radius: 10px; - background: rgba(0, 0, 0, 0.8); + background: ${mode === "dark" ? "rgba(0, 0, 0, 0.8)" : "rgba(0, 0, 0, 0.3)"}; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); } ::-webkit-scrollbar-thumb:window-inactive { - background: rgba(0,0,0,0.4); + background: ${mode === "dark" ? "rgba(0,0,0,0.4)" : "rgba(0,0,0,0.2)"}; } `, }, @@ -168,6 +195,6 @@ const theme = { }, }, }, -}; +}); -export default theme; +export default getTheme; From 70344729a6f1b9c7f810e6c2a95966ea147bd605 Mon Sep 17 00:00:00 2001 From: Felipe Date: Mon, 12 Jan 2026 20:52:04 -0300 Subject: [PATCH 3/8] feat: Update components to use theme colors for improved styling consistency --- .../components/explorations/ResultsViewer.jsx | 18 +++++++++++------ .../converter/ConverterHistoryList.jsx | 2 +- .../dataset/DatasetVisualization.jsx | 2 +- .../components/notebooks/dataset/StatBox.jsx | 2 +- .../notebook/DatasetPreviewNotebook.jsx | 2 +- .../notebooks/notebook/NotebookView.jsx | 2 +- .../threeSectionLayout/SearchBar.jsx | 2 +- .../pages/results/components/MetricsCard.jsx | 10 ++-------- .../results/components/ResultsTabInfo.jsx | 20 ++++--------------- 9 files changed, 24 insertions(+), 36 deletions(-) diff --git a/DashAI/front/src/components/explorations/ResultsViewer.jsx b/DashAI/front/src/components/explorations/ResultsViewer.jsx index 46a7b25c5..3932bbdbb 100644 --- a/DashAI/front/src/components/explorations/ResultsViewer.jsx +++ b/DashAI/front/src/components/explorations/ResultsViewer.jsx @@ -4,6 +4,7 @@ import PropTypes from "prop-types"; import { useExplorationsContext } from "./context"; import { Button, Divider, Grid, Typography } from "@mui/material"; +import { useTheme } from "@mui/material/styles"; import { useSnackbar } from "notistack"; import { getExplorersByExplorationId } from "../../api/explorer"; @@ -75,9 +76,12 @@ function ResultsViewer({ updateFlag = false, setUpdateFlag = () => {} }) { variant="contained" color={viewMode === viewModes.ALL ? "primary" : "inherit"} onClick={() => handleChangeViewMode(viewModes.ALL)} - style={{ - border: "2px solid #00bebb", - color: viewMode === viewModes.ALL ? "#ffffff" : "#00bebb", + sx={{ + border: `2px solid ${theme.palette.primary.main}`, + color: + viewMode === viewModes.ALL + ? theme.palette.primary.contrastText + : theme.palette.primary.main, borderRadius: "1px", }} > @@ -93,10 +97,12 @@ function ResultsViewer({ updateFlag = false, setUpdateFlag = () => {} }) { viewMode === viewModes.BY_EXPLORER ? "primary" : "inherit" } onClick={() => handleChangeViewMode(viewModes.BY_EXPLORER)} - style={{ - border: "2px solid #00bebb", + sx={{ + border: `2px solid ${theme.palette.primary.main}`, color: - viewMode === viewModes.BY_EXPLORER ? "#ffffff" : "#00bebb", + viewMode === viewModes.BY_EXPLORER + ? theme.palette.primary.contrastText + : theme.palette.primary.main, borderRadius: "1px", }} > diff --git a/DashAI/front/src/components/notebooks/converter/ConverterHistoryList.jsx b/DashAI/front/src/components/notebooks/converter/ConverterHistoryList.jsx index 5755b4e1f..7ce91f97b 100644 --- a/DashAI/front/src/components/notebooks/converter/ConverterHistoryList.jsx +++ b/DashAI/front/src/components/notebooks/converter/ConverterHistoryList.jsx @@ -35,7 +35,7 @@ export default function ConverterHistoryList({ width: "100%", }} > - + - + Processing your dataset... { > {value} - + {label} diff --git a/DashAI/front/src/components/notebooks/notebook/DatasetPreviewNotebook.jsx b/DashAI/front/src/components/notebooks/notebook/DatasetPreviewNotebook.jsx index 4393abc71..0f7a16ed2 100644 --- a/DashAI/front/src/components/notebooks/notebook/DatasetPreviewNotebook.jsx +++ b/DashAI/front/src/components/notebooks/notebook/DatasetPreviewNotebook.jsx @@ -36,7 +36,7 @@ export default function DatasetPreviewNotebook({ height: "100vh", }} > - + Loading... ); diff --git a/DashAI/front/src/components/notebooks/notebook/NotebookView.jsx b/DashAI/front/src/components/notebooks/notebook/NotebookView.jsx index b6f6a642b..aa319a1c3 100644 --- a/DashAI/front/src/components/notebooks/notebook/NotebookView.jsx +++ b/DashAI/front/src/components/notebooks/notebook/NotebookView.jsx @@ -54,7 +54,7 @@ export default function NotebookView({ notebook }) { - + Loading... ); diff --git a/DashAI/front/src/components/threeSectionLayout/SearchBar.jsx b/DashAI/front/src/components/threeSectionLayout/SearchBar.jsx index f97c9a102..152ed8526 100644 --- a/DashAI/front/src/components/threeSectionLayout/SearchBar.jsx +++ b/DashAI/front/src/components/threeSectionLayout/SearchBar.jsx @@ -32,7 +32,7 @@ export default function SearchBar({ placeholder, onChange, value }) { input: { startAdornment: ( - + ), }, diff --git a/DashAI/front/src/pages/results/components/MetricsCard.jsx b/DashAI/front/src/pages/results/components/MetricsCard.jsx index 4da38e3f3..814fb4e5a 100644 --- a/DashAI/front/src/pages/results/components/MetricsCard.jsx +++ b/DashAI/front/src/pages/results/components/MetricsCard.jsx @@ -17,10 +17,7 @@ export default function MetricsCard({ title, metrics }) { key={key} sx={{ display: "flex", justifyContent: "space-between", mb: 1 }} > - + {key}: @@ -29,10 +26,7 @@ export default function MetricsCard({ title, metrics }) { )) ) : ( - + No metrics available )} diff --git a/DashAI/front/src/pages/results/components/ResultsTabInfo.jsx b/DashAI/front/src/pages/results/components/ResultsTabInfo.jsx index 812d13242..ed2512abf 100644 --- a/DashAI/front/src/pages/results/components/ResultsTabInfo.jsx +++ b/DashAI/front/src/pages/results/components/ResultsTabInfo.jsx @@ -140,10 +140,7 @@ function ResultsTabInfo({ runData, handleRun }) { {runData.model_name && ( - + Model @@ -153,10 +150,7 @@ function ResultsTabInfo({ runData, handleRun }) { )} {runData.start_time && ( - + Start Time @@ -166,10 +160,7 @@ function ResultsTabInfo({ runData, handleRun }) { )} {runData.end_time && ( - + End Time @@ -179,10 +170,7 @@ function ResultsTabInfo({ runData, handleRun }) { )} {runData.start_time && runData.status !== "Error" && ( - + Duration From f4e5656a8874637263f97fec993b97c405093118 Mon Sep 17 00:00:00 2001 From: Felipe Date: Wed, 14 Jan 2026 12:49:55 -0300 Subject: [PATCH 4/8] fix: add more components to theme.js to add github copilot suggested --- .../components/generative/GenerativeChat.jsx | 6 ++-- .../components/generative/MessageContent.jsx | 2 +- .../src/components/generative/SessionBar.jsx | 2 +- .../generative/SessionBarHeader.jsx | 2 +- .../src/components/generative/SessionList.jsx | 6 ++-- .../src/components/notebooks/RightBar.jsx | 6 ++-- .../notebooks/dataset/header/HeaderBox.jsx | 4 ++- .../notebooks/dataset/tabs/CategoricalTab.jsx | 2 +- .../notebooks/dataset/tabs/NumericTab.jsx | 2 +- .../notebooks/dataset/tabs/OverviewTab.jsx | 6 ++-- .../notebooks/dataset/tabs/QualityTab.jsx | 16 +++++++--- .../datasetCreation/PreviewDataset.jsx | 2 +- .../notebook/DatasetPreviewNotebook.jsx | 2 +- .../notebooks/tool/ConfigureToolModal.jsx | 2 +- .../notebooks/tool/HoverToolInfo.jsx | 2 +- .../components/notebooks/tool/ToolList.jsx | 4 +-- .../predictions/PredictionsTable.jsx | 2 +- DashAI/front/src/styles/theme.js | 29 +++++++++++++++++++ 18 files changed, 69 insertions(+), 28 deletions(-) diff --git a/DashAI/front/src/components/generative/GenerativeChat.jsx b/DashAI/front/src/components/generative/GenerativeChat.jsx index 65d35b4e3..348aaf85d 100644 --- a/DashAI/front/src/components/generative/GenerativeChat.jsx +++ b/DashAI/front/src/components/generative/GenerativeChat.jsx @@ -1,4 +1,5 @@ import { Box, Divider, IconButton, Typography } from "@mui/material"; +import { useTheme } from "@mui/material/styles"; import React from "react"; import InfoIcon from "@mui/icons-material/Info"; import ArrowRightAltIcon from "@mui/icons-material/ArrowRightAlt"; @@ -21,6 +22,7 @@ import JobQueueWidget from "../jobs/JobQueueWidget"; import { getRunStatus } from "../../utils/runStatus"; export default function GenerativeChat({ sessionId, taskName, paramsVersion }) { + const theme = useTheme(); const [history, setHistory] = useState([]); const [messages, setMessages] = useState([]); const [messagesWithHistory, setMessagesWithHistory] = useState([]); @@ -251,11 +253,11 @@ export default function GenerativeChat({ sessionId, taskName, paramsVersion }) { width: "8px", }, "&::-webkit-scrollbar-thumb": { - backgroundColor: "ui.border", + backgroundColor: theme.palette.ui.border, borderRadius: "4px", }, "&::-webkit-scrollbar-thumb:hover": { - backgroundColor: "action.hover", + backgroundColor: theme.palette.ui.hover, }, }} > diff --git a/DashAI/front/src/components/generative/MessageContent.jsx b/DashAI/front/src/components/generative/MessageContent.jsx index 7620e024b..91dba44d6 100644 --- a/DashAI/front/src/components/generative/MessageContent.jsx +++ b/DashAI/front/src/components/generative/MessageContent.jsx @@ -9,7 +9,7 @@ export function MessageContent({ messages, isUser, isWaiting }) { return ( Dash diff --git a/DashAI/front/src/components/generative/SessionList.jsx b/DashAI/front/src/components/generative/SessionList.jsx index 30468b033..0967e1f4f 100644 --- a/DashAI/front/src/components/generative/SessionList.jsx +++ b/DashAI/front/src/components/generative/SessionList.jsx @@ -49,11 +49,11 @@ export default function SessionList({ width: "6px", }, "&::-webkit-scrollbar-thumb": { - backgroundColor: "ui.border", + backgroundColor: theme.palette.ui.border, borderRadius: "3px", }, "&::-webkit-scrollbar-thumb:hover": { - backgroundColor: "action.hover", + backgroundColor: theme.palette.ui.hover, }, overflowY: "auto", flex: 1, @@ -105,7 +105,7 @@ export default function SessionList({ { {Object.entries(categoricalStats).map(([column, stats]) => ( - + {/* Header */} diff --git a/DashAI/front/src/components/notebooks/dataset/tabs/NumericTab.jsx b/DashAI/front/src/components/notebooks/dataset/tabs/NumericTab.jsx index 2d6d3fd03..8501eb07f 100644 --- a/DashAI/front/src/components/notebooks/dataset/tabs/NumericTab.jsx +++ b/DashAI/front/src/components/notebooks/dataset/tabs/NumericTab.jsx @@ -14,7 +14,7 @@ export const NumericTab = ({ numericStats }) => { {Object.entries(numericStats).map(([column, stats]) => ( - + {/* Title */} diff --git a/DashAI/front/src/components/notebooks/dataset/tabs/OverviewTab.jsx b/DashAI/front/src/components/notebooks/dataset/tabs/OverviewTab.jsx index c2df544dd..696965a11 100644 --- a/DashAI/front/src/components/notebooks/dataset/tabs/OverviewTab.jsx +++ b/DashAI/front/src/components/notebooks/dataset/tabs/OverviewTab.jsx @@ -61,7 +61,7 @@ const OverviewTab = ({ {/* Missing Values Overview */} - + Missing Values Overview @@ -95,7 +95,7 @@ const OverviewTab = ({ {/* Column Types Distribution */} - + Column Types Distribution @@ -107,7 +107,7 @@ const OverviewTab = ({ sx={{ p: 2, textAlign: "center", - bgcolor: "ui.disabled", + bgcolor: theme.palette.ui.disabled, borderRadius: 2, }} > diff --git a/DashAI/front/src/components/notebooks/dataset/tabs/QualityTab.jsx b/DashAI/front/src/components/notebooks/dataset/tabs/QualityTab.jsx index 3ba222c88..5f681246d 100644 --- a/DashAI/front/src/components/notebooks/dataset/tabs/QualityTab.jsx +++ b/DashAI/front/src/components/notebooks/dataset/tabs/QualityTab.jsx @@ -14,7 +14,7 @@ const QualityTab = ({ qualityInfo, totalRows }) => { {/* Data Quality Summary */} - + Data Quality Summary @@ -72,7 +72,11 @@ const QualityTab = ({ qualityInfo, totalRows }) => { {qualityInfo.rows_with_any_nan} @@ -91,7 +95,11 @@ const QualityTab = ({ qualityInfo, totalRows }) => { {qualityInfo.rows_with_multiple_nan} @@ -116,7 +124,7 @@ const QualityTab = ({ qualityInfo, totalRows }) => { {/* Missing Data by Column */} - + Missing Data by Column diff --git a/DashAI/front/src/components/notebooks/datasetCreation/PreviewDataset.jsx b/DashAI/front/src/components/notebooks/datasetCreation/PreviewDataset.jsx index c8f54cd88..954088fd4 100644 --- a/DashAI/front/src/components/notebooks/datasetCreation/PreviewDataset.jsx +++ b/DashAI/front/src/components/notebooks/datasetCreation/PreviewDataset.jsx @@ -166,7 +166,7 @@ function PreviewDataset({ fontSize: "1.3rem", color: "text.secondary", "&:hover": { - backgroundColor: "action.hover", + backgroundColor: "ui.hover", }, }} > diff --git a/DashAI/front/src/components/notebooks/notebook/DatasetPreviewNotebook.jsx b/DashAI/front/src/components/notebooks/notebook/DatasetPreviewNotebook.jsx index 0f7a16ed2..862acf525 100644 --- a/DashAI/front/src/components/notebooks/notebook/DatasetPreviewNotebook.jsx +++ b/DashAI/front/src/components/notebooks/notebook/DatasetPreviewNotebook.jsx @@ -102,7 +102,7 @@ export default function DatasetPreviewNotebook({ diff --git a/DashAI/front/src/components/notebooks/tool/HoverToolInfo.jsx b/DashAI/front/src/components/notebooks/tool/HoverToolInfo.jsx index 09d608148..f83e1d255 100644 --- a/DashAI/front/src/components/notebooks/tool/HoverToolInfo.jsx +++ b/DashAI/front/src/components/notebooks/tool/HoverToolInfo.jsx @@ -45,7 +45,7 @@ export default function HoverToolInfo({ width: "100%", height: 160, borderRadius: 1.5, - bgcolor: "ui.border", + bgcolor: theme.palette.ui.border, border: `1px solid ${theme.palette.divider}`, overflow: "hidden", mb: 2, diff --git a/DashAI/front/src/components/notebooks/tool/ToolList.jsx b/DashAI/front/src/components/notebooks/tool/ToolList.jsx index bed034ceb..02677d5d1 100644 --- a/DashAI/front/src/components/notebooks/tool/ToolList.jsx +++ b/DashAI/front/src/components/notebooks/tool/ToolList.jsx @@ -62,7 +62,7 @@ export default function ToolList({ tools, notebook, FormComponent }) { disableGutters defaultExpanded sx={{ - bgcolor: "ui.box", + bgcolor: theme.palette.ui.box, borderRadius: 1.5, overflow: "hidden", "&:before": { display: "none" }, @@ -88,7 +88,7 @@ export default function ToolList({ tools, notebook, FormComponent }) { size="small" label={list.length} sx={{ - bgcolor: "ui.disabled", + bgcolor: theme.palette.ui.disabled, color: "text.secondary", height: 20, }} diff --git a/DashAI/front/src/components/predictions/PredictionsTable.jsx b/DashAI/front/src/components/predictions/PredictionsTable.jsx index f55e3f3dd..aff486aa3 100644 --- a/DashAI/front/src/components/predictions/PredictionsTable.jsx +++ b/DashAI/front/src/components/predictions/PredictionsTable.jsx @@ -205,7 +205,7 @@ function PredictionsTable({ predictions, onItemClick, onItemDelete }) { outline: "none", }, "& .MuiDataGrid-row:hover": { - backgroundColor: "action.hover", + backgroundColor: theme.palette.ui.hover, }, }} /> diff --git a/DashAI/front/src/styles/theme.js b/DashAI/front/src/styles/theme.js index c4292420e..83b9acfb6 100644 --- a/DashAI/front/src/styles/theme.js +++ b/DashAI/front/src/styles/theme.js @@ -22,6 +22,11 @@ const getTheme = (mode) => ({ contrastText: "#000", }, + // DIVIDER - Divider color + // Used in: Divider components, separators + divider: + mode === "dark" ? "rgba(255, 255, 255, 0.12)" : "rgba(0, 0, 0, 0.12)", + // BACKGROUND - Background colors for different surfaces // Used in: page backgrounds, cards, modals, panels background: @@ -44,10 +49,29 @@ const getTheme = (mode) => ({ ? { primary: "#ffffff", // Primary text (titles, important labels) secondary: "#b0b0b0", // Secondary text (descriptions, subtitles) + disabled: "#757575", // Disabled text } : { primary: "#1a1a1a", // Primary text (titles, important labels) secondary: "#666666", // Secondary text (descriptions, subtitles) + disabled: "#9e9e9e", // Disabled text + }, + + // ACTION - Interactive states + // Used in: hover states, selected items, disabled states, focus indicators + action: + mode === "dark" + ? { + hover: "rgba(255, 255, 255, 0.08)", // Hover state for interactive elements + selected: "rgba(255, 255, 255, 0.16)", // Selected state for items + disabled: "rgba(255, 255, 255, 0.3)", // Disabled state opacity + disabledBackground: "rgba(255, 255, 255, 0.12)", // Disabled background + } + : { + hover: "rgba(0, 0, 0, 0.04)", // Hover state for interactive elements + selected: "rgba(0, 0, 0, 0.08)", // Selected state for items + disabled: "rgba(0, 0, 0, 0.26)", // Disabled state opacity + disabledBackground: "rgba(0, 0, 0, 0.12)", // Disabled background }, // ERROR - Error states @@ -79,6 +103,7 @@ const getTheme = (mode) => ({ // ACCENT - Custom accent colors // Used in: elements requiring emphasis, special details accent: { + main: "#16FFFF", // Main accent color (cyan) cyan: "#16FFFF", // For highlights teal: "#00BEBB", // For featured elements }, @@ -129,6 +154,8 @@ const getTheme = (mode) => ({ scrollbarHover: "#4B5563", // Scrollbar on hover hover: "rgba(255, 255, 255, 0.05)", // Element hover state divider: "rgba(255, 255, 255, 0.15)", // Dividers and separators + box: "#212121", // Boxes and containers background + disabled: "#2C2C2C", // Disabled elements background } : { border: "#e0e0e0", // Standard border @@ -141,6 +168,8 @@ const getTheme = (mode) => ({ scrollbarHover: "#9e9e9e", // Scrollbar on hover hover: "rgba(0, 0, 0, 0.04)", // Element hover state divider: "rgba(0, 0, 0, 0.12)", // Dividers and separators + box: "#fafafa", // Boxes and containers background + disabled: "#f5f5f5", // Disabled elements background }, }, typography: { From 0716ff4d4ec7b3d433c6a98ac44266bc099a13ac Mon Sep 17 00:00:00 2001 From: Felipe Date: Wed, 14 Jan 2026 13:21:54 -0300 Subject: [PATCH 5/8] feat: Integrate theme usage across components for consistent styling --- .../src/components/generative/ParamsBar.jsx | 5 +- .../src/components/notebooks/RightBar.jsx | 14 +- .../notebooks/dataset/tabs/CategoricalTab.jsx | 10 +- .../dataset/tabs/CorrelationsTab.jsx | 11 +- .../notebooks/dataset/tabs/NumericTab.jsx | 10 +- .../notebooks/dataset/tabs/QualityTab.jsx | 2 + .../notebooks/dataset/tabs/TextTab.jsx | 276 ++++++++++-------- .../explorer/plotLayout/PlotLayoutForm.jsx | 43 ++- .../notebook/DatasetPreviewNotebook.jsx | 2 + .../components/notebooks/tool/ToolList.jsx | 2 + .../components/threeSectionLayout/Footer.jsx | 4 +- .../components/ResultsGraphsParameters.jsx | 4 +- .../components/ResultsGraphsSwitch.jsx | 4 +- 13 files changed, 232 insertions(+), 155 deletions(-) diff --git a/DashAI/front/src/components/generative/ParamsBar.jsx b/DashAI/front/src/components/generative/ParamsBar.jsx index 8b4d68b9b..2767c236b 100644 --- a/DashAI/front/src/components/generative/ParamsBar.jsx +++ b/DashAI/front/src/components/generative/ParamsBar.jsx @@ -1,5 +1,6 @@ import { useEffect, useState } from "react"; import { Box, Typography, Button, IconButton } from "@mui/material"; +import { useTheme } from "@mui/material/styles"; import { useFormik } from "formik"; import FormSchemaRenderFields from "../shared/FormSchemaRenderFields"; import HistoryIcon from "@mui/icons-material/History"; @@ -85,6 +86,8 @@ export default function ParamsBar({ ? preprocessSchema(selectedModel.schema.properties) : {}; + const theme = useTheme(); + return ( {/* Search bar */} - + setSearchQuery(e.target.value)} @@ -364,7 +372,7 @@ export default function RightBar({ notebook, onToggle }) { alignItems: "center", px: 2, py: 1, - borderBottom: "1px solid #333", + borderBottom: `1px solid ${theme.palette.ui.border}`, flexShrink: 0, }} > diff --git a/DashAI/front/src/components/notebooks/dataset/tabs/CategoricalTab.jsx b/DashAI/front/src/components/notebooks/dataset/tabs/CategoricalTab.jsx index a8327fdd4..e63a0d1b1 100644 --- a/DashAI/front/src/components/notebooks/dataset/tabs/CategoricalTab.jsx +++ b/DashAI/front/src/components/notebooks/dataset/tabs/CategoricalTab.jsx @@ -111,11 +111,11 @@ export const CategoricalTab = ({ categoricalStats }) => { key={index} fill={ [ - "#8b5cf6", - "#a78bfa", - "#c4b5fd", - "#ddd6fe", - "#ede9fe", + theme.palette.secondary.main, + theme.palette.info.main, + theme.palette.primary.main, + theme.palette.success.light, + theme.palette.warning.main, ][index] } /> diff --git a/DashAI/front/src/components/notebooks/dataset/tabs/CorrelationsTab.jsx b/DashAI/front/src/components/notebooks/dataset/tabs/CorrelationsTab.jsx index 668f13123..8844afbf9 100644 --- a/DashAI/front/src/components/notebooks/dataset/tabs/CorrelationsTab.jsx +++ b/DashAI/front/src/components/notebooks/dataset/tabs/CorrelationsTab.jsx @@ -51,7 +51,11 @@ const CorrelationsTab = ({ correlations }) => { {corrData.map((entry, index) => ( 0 ? "#10b981" : "#ef4444"} + fill={ + entry.correlation > 0 + ? theme.palette.success.main + : theme.palette.error.main + } /> ))} @@ -73,7 +77,10 @@ const CorrelationsTab = ({ correlations }) => { alignItems="center" justifyContent="space-between" p={2} - sx={{ backgroundColor: "#363636", borderRadius: 2 }} + sx={{ + backgroundColor: theme.palette.ui.panelMedium, + borderRadius: 2, + }} > {d.pair} diff --git a/DashAI/front/src/components/notebooks/dataset/tabs/NumericTab.jsx b/DashAI/front/src/components/notebooks/dataset/tabs/NumericTab.jsx index 8501eb07f..02649a7c6 100644 --- a/DashAI/front/src/components/notebooks/dataset/tabs/NumericTab.jsx +++ b/DashAI/front/src/components/notebooks/dataset/tabs/NumericTab.jsx @@ -103,9 +103,9 @@ export const NumericTab = ({ numericStats }) => { name: column, orientation: "h", // ← rotated here boxpoints: "suspectedoutliers", - marker: { color: "#8884d8" }, - line: { color: "#212121" }, - fillcolor: "#8884d8", + marker: { color: theme.palette.info.main }, + line: { color: theme.palette.background.paper }, + fillcolor: theme.palette.info.main, opacity: 0.6, showlegend: false, }, @@ -120,7 +120,9 @@ export const NumericTab = ({ numericStats }) => { title: "", zeroline: false, gridcolor: - theme.palette.mode === "dark" ? "#444" : "#e0e0e0", + theme.palette.mode === "dark" + ? theme.palette.ui.borderLight + : theme.palette.ui.border, }, yaxis: { showticklabels: false, diff --git a/DashAI/front/src/components/notebooks/dataset/tabs/QualityTab.jsx b/DashAI/front/src/components/notebooks/dataset/tabs/QualityTab.jsx index 5f681246d..74b84376c 100644 --- a/DashAI/front/src/components/notebooks/dataset/tabs/QualityTab.jsx +++ b/DashAI/front/src/components/notebooks/dataset/tabs/QualityTab.jsx @@ -7,9 +7,11 @@ import { CardContent, Alert, } from "@mui/material"; +import { useTheme } from "@mui/material/styles"; import IssueCard from "../IssueCard"; const QualityTab = ({ qualityInfo, totalRows }) => { + const theme = useTheme(); return ( {/* Data Quality Summary */} diff --git a/DashAI/front/src/components/notebooks/dataset/tabs/TextTab.jsx b/DashAI/front/src/components/notebooks/dataset/tabs/TextTab.jsx index 503e66f31..d7c092c02 100644 --- a/DashAI/front/src/components/notebooks/dataset/tabs/TextTab.jsx +++ b/DashAI/front/src/components/notebooks/dataset/tabs/TextTab.jsx @@ -8,6 +8,7 @@ import { Alert, Tooltip, } from "@mui/material"; +import { useTheme } from "@mui/material/styles"; import TextFieldsIcon from "@mui/icons-material/TextFields"; import { ResponsiveContainer, @@ -22,152 +23,171 @@ import { import { StatBox } from "../StatBox"; import { MetricRow } from "../MetricRow"; -export const TextTab = ({ textStats }) => ( - - {Object.entries(textStats).map(([column, stats]) => { - const lengthData = [ - { label: "Min", value: stats.min_length, color: "#82ca9d" }, - { label: "Median", value: stats.median_length, color: "#8884d8" }, - { label: "Avg", value: stats.avg_length, color: "#ffc658" }, - { label: "Max", value: stats.max_length, color: "#ff7c7c" }, - ]; +export const TextTab = ({ textStats }) => { + const theme = useTheme(); + return ( + + {Object.entries(textStats).map(([column, stats]) => { + const lengthData = [ + { + label: "Min", + value: stats.min_length, + color: theme.palette.success.light, + }, + { + label: "Median", + value: stats.median_length, + color: theme.palette.info.main, + }, + { + label: "Avg", + value: stats.avg_length, + color: theme.palette.warning.main, + }, + { + label: "Max", + value: stats.max_length, + color: theme.palette.error.main, + }, + ]; - const uniquePercentage = stats.unique_ratio - ? (stats.unique_ratio * 100).toFixed(1) - : null; + const uniquePercentage = stats.unique_ratio + ? (stats.unique_ratio * 100).toFixed(1) + : null; - return ( - - - {/* Title */} - - - - {column} - - - {uniquePercentage && ( - - 90 - ? "#4caf50" - : uniquePercentage > 30 - ? "#ff9800" - : "#f44336", - color: "white", - cursor: "default", - }} - /> - - )} - - - {parseFloat(uniquePercentage) <= 30 && ( - - Warning: This text column has a very low uniqueness ratio. This - may be a categorical variable misclassified as text, which could - lead to analysis issues. - - )} + return ( + + + {/* Title */} + + + + {column} + - {/* Summary Stats (StatBoxes) */} - - - + {uniquePercentage && ( + + 90 + ? theme.palette.success.main + : uniquePercentage > 30 + ? theme.palette.warning.main + : theme.palette.error.main, + color: "white", + cursor: "default", + }} + /> + + )} - - - + {parseFloat(uniquePercentage) <= 30 && ( + + Warning: This text column has a very low uniqueness ratio. + This may be a categorical variable misclassified as text, + which could lead to analysis issues. + + )} - {stats.avg_word_count && ( + {/* Summary Stats (StatBoxes) */} + - )} - - + + + + + {stats.avg_word_count && ( + + + + )} + + + + + + + {/* Two-column metric grouping */} + + + + Length Metrics + + + + {/* Column 1 */} + + + + + + + {/* Column 2 */} + + + + + + - - {/* Two-column metric grouping */} - - + {/* Plot: Length Distribution */} + - Length Metrics + Length Distribution - - - {/* Column 1 */} - - - - - - - {/* Column 2 */} - - - - + + + + + + + + + + - - - {/* Plot: Length Distribution */} - - - Length Distribution - - - - - - - - - - - - - - - - ); - })} - -); + + + ); + })} + + ); +}; diff --git a/DashAI/front/src/components/notebooks/explorer/plotLayout/PlotLayoutForm.jsx b/DashAI/front/src/components/notebooks/explorer/plotLayout/PlotLayoutForm.jsx index 21c101aa3..12beea62b 100644 --- a/DashAI/front/src/components/notebooks/explorer/plotLayout/PlotLayoutForm.jsx +++ b/DashAI/front/src/components/notebooks/explorer/plotLayout/PlotLayoutForm.jsx @@ -10,6 +10,7 @@ import { AccordionDetails, TextField, } from "@mui/material"; +import { useTheme } from "@mui/material/styles"; import GeneralForm from "./forms/GeneralForm"; import TraceForm from "./forms/TraceForm"; @@ -26,6 +27,7 @@ export default function PlotLayoutForm({ setLayout, onSave, }) { + const theme = useTheme(); if (!layout) return null; const [modified, setModified] = useState(false); @@ -83,8 +85,8 @@ export default function PlotLayoutForm({ flexDirection: "column", gap: 2, width: "100%", - bgcolor: "#1e1e1e", - color: "white", + bgcolor: theme.palette.background.paper, + color: "text.primary", p: 3, borderRadius: 2, boxShadow: 2, @@ -95,7 +97,10 @@ export default function PlotLayoutForm({ {/* General Settings */} - + }> General Settings @@ -111,7 +116,13 @@ export default function PlotLayoutForm({ {/* Trace Settings */} {Array.isArray(data) && data.map((trace, index) => ( - + }> Trace {index + 1} ({trace.name || trace.type}) @@ -132,7 +143,9 @@ export default function PlotLayoutForm({ ))} {data?.[0]?.dimensions ? ( - + }> Dimensions Labels @@ -147,7 +160,12 @@ export default function PlotLayoutForm({ ) : ( <> {/* X Axis Settings */} - + }> X Axis @@ -166,7 +184,12 @@ export default function PlotLayoutForm({ {/* Y Axis Settings */} - + }> Y Axis @@ -187,7 +210,9 @@ export default function PlotLayoutForm({ )} {/* Legend Settings */} - + }> Legend @@ -200,7 +225,7 @@ export default function PlotLayoutForm({ - +