Conversation
…ve responsiveness
…istency in hyperparameters plots and explainers
There was a problem hiding this comment.
Pull request overview
This PR introduces a shared Plotly theming utility to align Plotly charts with the current MUI theme, and applies it across results/hyperparameter and explainer plot components while adjusting layout/styling for better UI consistency.
Changes:
- Added
applyThemeToLayoututility to theme Plotly layouts using the active MUI theme and remove backend-fixed sizing. - Updated hyperparameter and explainer plot components to apply the themed layout and adjust Plotly sizing/config.
- Tweaked explainer grid/card layout so plot sections/cards stretch to fill available width.
Reviewed changes
Copilot reviewed 6 out of 6 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| DashAI/front/src/utils/plotlyTheme.js | New utility to apply MUI theme values to Plotly layout (including updatemenus/polar handling). |
| DashAI/front/src/pages/results/components/ResultsTabHyperparameters.jsx | Uses the theme + applyThemeToLayout for hyperparameter plots; adds loading state. |
| DashAI/front/src/components/models/HyperparameterPlots.jsx | Applies themed layouts and makes plots more responsive via width/height handling. |
| DashAI/front/src/components/explainers/ExplanainersCard.jsx | Adjusts card/container widths to better fill available space. |
| DashAI/front/src/components/explainers/ExplainersPlot.jsx | Applies themed layout to explainer plots and changes Plotly config/layout sizing. |
| DashAI/front/src/components/explainers/ExplainersGrid.jsx | Changes grid alignment to stretch cards vertically. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| updatemenus: baseLayout.updatemenus.map((menu) => ({ | ||
| ...menu, | ||
| bgcolor: | ||
| theme.palette.ui?.borderLight ?? theme.palette.background.paper, | ||
| bordercolor: gridColor, | ||
| font: { color: "#000000" }, | ||
| activecolor: theme.palette.primary.main, | ||
| })), |
There was a problem hiding this comment.
applyThemeToLayout hard-codes updatemenus[].font.color to #000000 and replaces the entire menu.font object. In dark mode the dropdown text will be unreadable against the borderLight background, and replacing the font object can discard backend-provided font size/family. Consider deriving the font color from the theme (e.g., theme.palette.text.primary or theme.palette.getContrastText(menuBg)) and merging with any existing menu.font instead of overwriting it.
| title: { | ||
| ...baseLayout?.title, | ||
| font: { ...baseLayout?.title?.font, color: textColor }, | ||
| }, | ||
| ...(baseLayout?.updatemenus && { | ||
| updatemenus: baseLayout.updatemenus.map((menu) => ({ | ||
| ...menu, | ||
| bgcolor: | ||
| theme.palette.ui?.borderLight ?? theme.palette.background.paper, | ||
| bordercolor: gridColor, | ||
| font: { color: "#000000" }, | ||
| activecolor: theme.palette.primary.main, | ||
| })), | ||
| }), |
There was a problem hiding this comment.
The Plotly hyperparameter dropdowns (generated in the backend via method: "update") change layout.title/layout.xaxis.title using string shorthands. When the user selects a new option, Plotly can reset the title/axis title font to its default (black), which effectively makes the title disappear on dark backgrounds. To keep theming consistent, consider normalizing baseLayout.title to {text: ...} if it’s a string, and also rewriting updatemenus[].buttons[].args[1].title / args[1].xaxis.title to object form with themed font.color so updates don’t drop the theme.
| <Grid container spacing={2} direction="column"> | ||
| <Grid container direction="column"> | ||
| <Plot | ||
| data={historicalPlot["data"]} | ||
| layout={{ | ||
| ...historicalPlot["layout"], | ||
| width: 900, | ||
| height: 380, | ||
| }} | ||
| data={historicalPlot?.data} | ||
| layout={{ ...themedHistoricalLayout, width: 900, height: 380 }} | ||
| config={{ staticPlot: false }} | ||
| /> | ||
| </Grid> | ||
| <Grid container direction="column"> | ||
| <Plot | ||
| data={slicePlot["data"]} | ||
| layout={{ | ||
| ...slicePlot["layout"], | ||
| width: 900, | ||
| height: 380, | ||
| }} | ||
| data={slicePlot?.data} | ||
| layout={{ ...themedSliceLayout, width: 900, height: 380 }} | ||
| config={{ staticPlot: false }} | ||
| /> | ||
| </Grid> |
There was a problem hiding this comment.
This component renders <Plot> even when no plots were fetched/parsed (e.g., optimizables === 0 or the request fails), passing undefined for data. react-plotly.js expects data to be an array and may throw or render inconsistently. Consider adding a guard (similar to HyperparameterPlots.jsx) to render a fallback message when historicalPlot/slicePlot are still null after loading completes.
This pull request focuses on improving the visual consistency of Plotly plots across the application by introducing a utility to apply the current MUI theme to all Plotly layouts. It also makes several layout and styling adjustments to ensure better responsiveness and alignment in the UI components that display plots and explainers.
Thematic Plot Styling and Consistency:
applyThemeToLayoutinplotlyTheme.jsto apply MUI theme colors and styles to Plotly layouts, ensuring consistent appearance with the rest of the UI. This function strips backend-provided fixed dimensions so that sizing can be controlled by the frontend.ExplainersPlot.jsx,HyperparameterPlots.jsx, andResultsTabHyperparameters.jsxto useapplyThemeToLayoutand the current MUI theme viauseTheme(), ensuring all Plotly charts match the application's theme. [1] [2] [3]Plot Responsiveness and Layout Improvements:
UI Layout and Alignment Adjustments:
ExplainersGrid.jsxandExplanainersCard.jsxto ensure cards and plot sections stretch and fill available space, resulting in a more consistent and visually appealing layout. [1] [2] [3]Loading State and Error Handling:
ResultsTabHyperparameters.jsxby displaying a spinner while plots are being fetched and processed, and by handling errors and failed states more gracefully. [1] [2]These changes collectively enhance the user experience by ensuring that plots are visually integrated with the application's theme, are more responsive, and that layout and loading behaviors are more robust.
There is a problem with dropdown of plotly: plotly/plotly.py#3120
So now it have a ugly color.
Still have a bug, when select other hyperparameter in the plot, the plot title disappear.
