diff --git a/DashAI/front/src/components/DatasetVisualization.jsx b/DashAI/front/src/components/DatasetVisualization.jsx index bf3b28141..da3d5df90 100644 --- a/DashAI/front/src/components/DatasetVisualization.jsx +++ b/DashAI/front/src/components/DatasetVisualization.jsx @@ -12,6 +12,7 @@ import { Tabs, Tab, } from "@mui/material"; +import { useTheme } from "@mui/material/styles"; import { AddCircleOutline as AddIcon, CheckCircle as CheckIcon, @@ -55,12 +56,14 @@ export default function DatasetVisualization({ newItemButtonText = "New Item", existingItems = [], }) { + const theme = useTheme(); + if (!dataset) { return ( - + Loading... ); @@ -250,7 +253,7 @@ export default function DatasetVisualization({ {/* Tabs */} - + Processing your dataset... - + {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..3e321957a 100644 --- a/DashAI/front/src/components/ResponsiveAppBar.jsx +++ b/DashAI/front/src/components/ResponsiveAppBar.jsx @@ -13,6 +13,9 @@ import MenuItem from "@mui/material/MenuItem"; import { Link as RouterLink, useLocation } from "react-router-dom"; import { useTheme } from "@mui/material/styles"; import HomeIcon from "@mui/icons-material/HomeOutlined"; +import Brightness4Icon from "@mui/icons-material/Brightness4"; +import Brightness7Icon from "@mui/icons-material/Brightness7"; +import { ColorModeContext } from "../contexts/ThemeContext"; const pages = [ { name: "Datasets", to: "/app/data", disabled: false }, @@ -25,6 +28,7 @@ const pages = [ function ResponsiveAppBar() { const theme = useTheme(); + const colorMode = React.useContext(ColorModeContext); const location = useLocation(); const [anchorElNav, setAnchorElNav] = React.useState(null); @@ -38,7 +42,11 @@ function ResponsiveAppBar() { }; return ( - + - {page.name} + + {page.name} + ))} @@ -108,16 +118,43 @@ 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} ))} + + {/* Theme Toggle Button */} + + + {theme.palette.mode === "dark" ? ( + + ) : ( + + )} + + 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/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/explorations/ResultsViewer.jsx b/DashAI/front/src/components/explorations/ResultsViewer.jsx index 46a7b25c5..cad28e26e 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"; @@ -26,6 +27,7 @@ const viewModes = { * @param {Function} props.setUpdateFlag - Function to set the update flag */ function ResultsViewer({ updateFlag = false, setUpdateFlag = () => {} }) { + const theme = useTheme(); const { enqueueSnackbar } = useSnackbar(); const { explorationData, setExplorationData } = useExplorationsContext(); @@ -75,9 +77,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 +98,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/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 ( - + setSessionInfoVisible(true)}> @@ -251,11 +253,11 @@ export default function GenerativeChat({ sessionId, taskName, paramsVersion }) { width: "8px", }, "&::-webkit-scrollbar-thumb": { - backgroundColor: "#555", + backgroundColor: theme.palette.ui.border, borderRadius: "4px", }, "&::-webkit-scrollbar-thumb:hover": { - backgroundColor: "#888", + backgroundColor: theme.palette.ui.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..91dba44d6 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..0967e1f4f 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] ? ( ) : ( )} { @@ -21,7 +23,7 @@ export function WaitingAnimationChat({ isActive }) { return ( - + {dots} diff --git a/DashAI/front/src/components/models/LeftBar.jsx b/DashAI/front/src/components/models/LeftBar.jsx index 63b97b816..c19d8f299 100644 --- a/DashAI/front/src/components/models/LeftBar.jsx +++ b/DashAI/front/src/components/models/LeftBar.jsx @@ -1,5 +1,6 @@ import React, { useState, useEffect } from "react"; import { Box, Divider, Typography, IconButton } from "@mui/material"; +import { useTheme } from "@mui/material/styles"; import { ChevronLeft } from "@mui/icons-material"; import StorageIcon from "@mui/icons-material/Storage"; import Biotech from "@mui/icons-material/Biotech"; @@ -27,6 +28,7 @@ export default function ModelsLeftBar({ onToggle, handleNewSessionButton, }) { + const theme = useTheme(); const [searchQuery, setSearchQuery] = useState(""); const [filteredDatasets, setFilteredDatasets] = useState(datasets); const [filteredSessions, setFilteredSessions] = useState(sessions); @@ -144,7 +146,7 @@ export default function ModelsLeftBar({ - + {/* 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} @@ -165,7 +170,10 @@ function RunCard({ values.reduce((sum, val) => sum + val, 0) / values.length; return ( - + {metric.toUpperCase()} @@ -180,7 +188,10 @@ function RunCard({ {/* Description if present */} {run.description && ( - + {run.description} )} @@ -270,7 +281,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 aa0668b0f..2fd544926 100644 --- a/DashAI/front/src/components/models/SessionVisualization.jsx +++ b/DashAI/front/src/components/models/SessionVisualization.jsx @@ -216,7 +216,9 @@ export default function SessionVisualization({ mb: 2, }} > - Model Comparison + + Model Comparison + {/* Metric Split Selector */} {showTable && diff --git a/DashAI/front/src/components/models/model/HoverModelInfo.jsx b/DashAI/front/src/components/models/model/HoverModelInfo.jsx index 776222c06..fbd56419a 100644 --- a/DashAI/front/src/components/models/model/HoverModelInfo.jsx +++ b/DashAI/front/src/components/models/model/HoverModelInfo.jsx @@ -1,11 +1,14 @@ import React from "react"; import { Box, Typography, Popover } from "@mui/material"; +import { useTheme } from "@mui/material/styles"; export default function HoverModelInfo({ anchorEl, hoveredModel, handleMouseLeave, }) { + const theme = useTheme(); + return ( {hoveredModel.display_name || hoveredModel.name} @@ -45,7 +48,7 @@ export default function HoverModelInfo({ {/* Description */} {hoveredModel.description || hoveredModel.metadata?.description || diff --git a/DashAI/front/src/components/models/model/ModelListItem.jsx b/DashAI/front/src/components/models/model/ModelListItem.jsx index 75594170d..9f06956da 100644 --- a/DashAI/front/src/components/models/model/ModelListItem.jsx +++ b/DashAI/front/src/components/models/model/ModelListItem.jsx @@ -1,5 +1,6 @@ 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"; @@ -9,6 +10,7 @@ export default function ModelListItem({ onClick, ...props }) { + const theme = useTheme(); const [anchorEl, setAnchorEl] = useState(null); const [hoveredModel, setHoveredModel] = useState(null); @@ -25,7 +27,8 @@ export default function ModelListItem({ }; // 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 ( @@ -37,16 +40,16 @@ export default function ModelListItem({ 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}`, }, }, }, @@ -64,8 +67,10 @@ export default function ModelListItem({ 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 + ? theme.palette.ui.disabled + : theme.palette.ui.box, + border: `1px solid ${theme.palette.ui.border}`, borderRadius: 1, cursor: disabled ? "not-allowed" : "pointer", transition: "all 0.2s", @@ -73,8 +78,10 @@ export default function ModelListItem({ 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)" : color, + bgcolor: disabled + ? theme.palette.ui.disabled + : theme.palette.action.hover, + borderColor: disabled ? theme.palette.ui.border : color, transform: disabled ? "none" : "translateX(4px)", }, "&::after": disabled @@ -99,14 +106,18 @@ export default function ModelListItem({ 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 + ? theme.palette.ui.disabled + : theme.palette.ui.border, + color: disabled + ? theme.palette.text.disabled + : theme.palette.text.primary, flexShrink: 0, }} > @@ -115,7 +126,9 @@ export default function ModelListItem({ - + {/* Create new item button */} @@ -118,7 +118,7 @@ export default function DatasetsNotebooksBar({ /> - + {/* Scrollable content */} @@ -134,7 +134,7 @@ export default function DatasetsNotebooksBar({ getItemDescription={getDatasetDescription} /> - + - + Note: {message} diff --git a/DashAI/front/src/components/notebooks/RightBar.jsx b/DashAI/front/src/components/notebooks/RightBar.jsx index b7df93504..f297942e6 100644 --- a/DashAI/front/src/components/notebooks/RightBar.jsx +++ b/DashAI/front/src/components/notebooks/RightBar.jsx @@ -9,6 +9,7 @@ import { ToggleButton, IconButton, } from "@mui/material"; +import { useTheme } from "@mui/material/styles"; import { ViewList, ViewModule } from "@mui/icons-material"; import AnalyticsIcon from "@mui/icons-material/Analytics"; import TransformIcon from "@mui/icons-material/Transform"; @@ -26,6 +27,7 @@ import { useExplorersAndConverters } from "./context/ExplorersAndConvertersConte import { ChevronRight } from "@mui/icons-material"; export default function RightBar({ notebook, onToggle }) { + const theme = useTheme(); const [activeTab, setActiveTab] = useState(0); const [searchQuery, setSearchQuery] = useState(""); const [converters, setConverters] = useState([]); @@ -289,7 +291,7 @@ export default function RightBar({ notebook, onToggle }) { - Analysis Tools + + Analysis Tools + {/* Search bar */} - + setSearchQuery(e.target.value)} @@ -362,14 +372,11 @@ 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, }} > - + View mode - + 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. { 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..056ed3696 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/header/HeaderBox.jsx b/DashAI/front/src/components/notebooks/dataset/header/HeaderBox.jsx index bf62d436d..3006c9588 100644 --- a/DashAI/front/src/components/notebooks/dataset/header/HeaderBox.jsx +++ b/DashAI/front/src/components/notebooks/dataset/header/HeaderBox.jsx @@ -1,7 +1,9 @@ import React from "react"; import { Box, Typography, Tooltip } from "@mui/material"; +import { useTheme } from "@mui/material/styles"; export function HeaderBox({ title, value, IconComponent, iconColor, bgColor }) { + const theme = useTheme(); return ( ( - - {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/CorrelationsTab.jsx b/DashAI/front/src/components/notebooks/dataset/tabs/CorrelationsTab.jsx index c45ce91f6..8844afbf9 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,17 +41,21 @@ const CorrelationsTab = ({ correlations }) => { - + {corrData.map((entry, index) => ( 0 ? "#10b981" : "#ef4444"} + fill={ + entry.correlation > 0 + ? theme.palette.success.main + : theme.palette.error.main + } /> ))} @@ -71,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 ac9682321..02649a7c6 100644 --- a/DashAI/front/src/components/notebooks/dataset/tabs/NumericTab.jsx +++ b/DashAI/front/src/components/notebooks/dataset/tabs/NumericTab.jsx @@ -1,142 +1,157 @@ 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 0e0eea0f4..696965a11 100644 --- a/DashAI/front/src/components/notebooks/dataset/tabs/OverviewTab.jsx +++ b/DashAI/front/src/components/notebooks/dataset/tabs/OverviewTab.jsx @@ -8,6 +8,7 @@ import { Paper, Alert, } from "@mui/material"; +import { useTheme } from "@mui/material/styles"; import { ResponsiveContainer, BarChart, @@ -26,6 +27,7 @@ const OverviewTab = ({ total_rows, fetchDatasetPage, }) => { + 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 @@ -59,7 +61,7 @@ const OverviewTab = ({ {/* Missing Values Overview */} - + Missing Values Overview @@ -72,11 +74,12 @@ const OverviewTab = ({ @@ -92,7 +95,7 @@ const OverviewTab = ({ {/* Column Types Distribution */} - + Column Types Distribution @@ -104,7 +107,7 @@ const OverviewTab = ({ sx={{ p: 2, textAlign: "center", - bgcolor: "#363636", + 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 a38ec0830..74b84376c 100644 --- a/DashAI/front/src/components/notebooks/dataset/tabs/QualityTab.jsx +++ b/DashAI/front/src/components/notebooks/dataset/tabs/QualityTab.jsx @@ -7,14 +7,16 @@ 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 */} - + Data Quality Summary @@ -72,7 +74,11 @@ const QualityTab = ({ qualityInfo, totalRows }) => { {qualityInfo.rows_with_any_nan} @@ -91,7 +97,11 @@ const QualityTab = ({ qualityInfo, totalRows }) => { {qualityInfo.rows_with_multiple_nan} @@ -116,7 +126,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..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,151 +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/datasetCreation/PreviewDataset.jsx b/DashAI/front/src/components/notebooks/datasetCreation/PreviewDataset.jsx index c8f54cd88..37a9d09b3 100644 --- a/DashAI/front/src/components/notebooks/datasetCreation/PreviewDataset.jsx +++ b/DashAI/front/src/components/notebooks/datasetCreation/PreviewDataset.jsx @@ -1,6 +1,7 @@ import { useCallback, useEffect, useState, useRef } from "react"; import PropTypes from "prop-types"; import { Box, Button, CircularProgress, Grid, Typography } from "@mui/material"; +import { useTheme } from "@mui/material/styles"; import { useSnackbar } from "notistack"; import { previewWithTypes } from "../../../api/datasets"; import PreviewDatasetTable from "./PreviewDatasetTable"; @@ -19,6 +20,7 @@ function PreviewDataset({ onPreviewError, onTypesChanged, }) { + const theme = useTheme(); const { enqueueSnackbar } = useSnackbar(); const [previewData, setPreviewData] = useState(null); const [columnTypes, setColumnTypes] = useState({}); @@ -166,7 +168,7 @@ function PreviewDataset({ fontSize: "1.3rem", color: "text.secondary", "&:hover": { - backgroundColor: "action.hover", + backgroundColor: theme.palette.ui.hover, }, }} > 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({ {/* 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({ - +