Update hpo and explainers plots

[Felipedino]

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:

• Added a new utility function applyThemeToLayout in plotlyTheme.js to 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.
• Updated ExplainersPlot.jsx, HyperparameterPlots.jsx, and ResultsTabHyperparameters.jsx to use applyThemeToLayout and the current MUI theme via useTheme(), ensuring all Plotly charts match the application's theme. [1] [2] [3]

Plot Responsiveness and Layout Improvements:

• Modified the layout and configuration of Plotly plots throughout the codebase for better responsiveness, width handling, and to remove unwanted mode bars where appropriate. This includes changes to plot width, height, and config options in all relevant components. [1] [2] [3] [4] [5] [6]

UI Layout and Alignment Adjustments:

• Improved grid and alignment settings in ExplainersGrid.jsx and ExplanainersCard.jsx to ensure cards and plot sections stretch and fill available space, resulting in a more consistent and visually appealing layout. [1] [2] [3]
• Adjusted container and item widths in several components to use full width where appropriate, enhancing the responsiveness of the UI. [1] [2]

Loading State and Error Handling:

• Improved loading state handling in ResultsTabHyperparameters.jsx by 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.

[Copilot]

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 applyThemeToLayout utility 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.