Conversation
…ve responsiveness
There was a problem hiding this comment.
Pull request overview
This PR refactors the DashAI explainers UI to improve Plotly plot theming integration with the MUI theme and adjust explainer layout behavior to better stretch/fill available space.
Changes:
- Added theme-aware Plotly layout transformation (
applyThemeToLayout) and memoized themed layout usage inExplainersPlot. - Adjusted Plotly container/card sizing to use full-width styles and tweaked Plotly config (modebar/responsive).
- Updated explainers grid alignment to
stretchand adjusted card layout to better fill container width.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 4 comments.
| File | Description |
|---|---|
| DashAI/front/src/components/explainers/ExplainersPlot.jsx | Adds theme-to-Plotly layout mapping, memoizes themed layout, and updates plot container sizing/config. |
| DashAI/front/src/components/explainers/ExplanainersCard.jsx | Updates card and plot section sizing to use full width in compact/full layouts. |
| DashAI/front/src/components/explainers/ExplainersGrid.jsx | Changes grid cross-axis alignment to stretch cards vertically. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| {!loading && explainer.status === 3 ? ( | ||
| <Plot | ||
| data={explainersPlots[currentPlot].data} | ||
| layout={{ |
There was a problem hiding this comment.
This render path assumes explainersPlots[currentPlot] exists. If the plot fetch fails (catch runs) or the API returns an empty list, loading is set to false and this will throw when accessing .data. Add a guard (e.g., check explainersPlots.length > 0) and render an error/empty state instead of crashing.
| const textColor = theme.palette.text.primary; | ||
| const gridColor = theme.palette.divider; | ||
|
|
||
| // Strip backend-provided fixed dimensions so our responsive sizing takes over |
There was a problem hiding this comment.
The comment says backend width/height are stripped so “responsive sizing takes over”, but the rendered Plot still sets fixed width/height and config.responsive is false. Consider updating the comment to match the actual behavior, or (if the intent is responsiveness) switch to Plotly autosizing (autosize: true, useResizeHandler, and avoid fixed dimensions).
| // Strip backend-provided fixed dimensions so our responsive sizing takes over | |
| // Strip backend-provided fixed dimensions so that frontend-controlled sizing/layout can be applied |
| @@ -1,4 +1,4 @@ | |||
| import { React, useEffect, useState } from "react"; | |||
| import { React, useEffect, useMemo, useState } from "react"; | |||
There was a problem hiding this comment.
react does not export a named React symbol, so import { React, ... } from "react"; will fail at runtime/build. Use either import React from "react"; (default import) or remove React entirely and only import the hooks you use (e.g. import { useEffect, useMemo, useState } from "react";).
| import { React, useEffect, useMemo, useState } from "react"; | |
| import React, { useEffect, useMemo, useState } from "react"; |
| bgcolor: | ||
| theme.palette.ui?.borderLight ?? theme.palette.background.paper, | ||
| bordercolor: gridColor, | ||
| font: { color: "#000000" }, |
There was a problem hiding this comment.
updatemenus is forcing font.color to #000000, which will be unreadable in dark mode (the app supports theme.palette.mode === "dark"). Prefer using the theme text color (or deriving from theme.palette.text.*) instead of a hard-coded black.
| font: { color: "#000000" }, | |
| font: { ...(menu.font ?? {}), color: textColor }, |
This pull request introduces several improvements to the DashAI explainers UI, focusing on better theming support for plots, improved layout responsiveness, and enhanced visual consistency. The most significant changes are the addition of theme-aware styling for Plotly plots, updates to grid alignment and sizing, and minor UI tweaks to ensure components stretch and fill available space.
Theming and Plot Improvements:
applyThemeToLayoutfunction inExplainersPlot.jsxto dynamically apply MUI theme colors and fonts to Plotly plot layouts, ensuring visual consistency with the rest of the app. This includes background, text, grid, axis, and legend theming, as well as handling polar plots and update menus. (DashAI/front/src/components/explainers/ExplainersPlot.jsx)useThemeanduseMemo, and updated the plot rendering to use the themed layout. Also adjusted Plotly config for a cleaner look by disabling mode bar and responsiveness. (DashAI/front/src/components/explainers/ExplainersPlot.jsx) [1] [2]Layout and Responsiveness:
centertostretchto allow cards to expand and fill the available vertical space. (DashAI/front/src/components/explainers/ExplainersGrid.jsx)ExplainersCardand its plot section to usewidth: "100%", making cards and plots more responsive and better fitting their containers. (DashAI/front/src/components/explainers/ExplanainersCard.jsx) [1] [2]ExplainersPlotto usewidth: "100%"instead ofalignItems: "flex-start", further improving layout flexibility. (DashAI/front/src/components/explainers/ExplainersPlot.jsx)There is a problem with dropdown of plotly: plotly/plotly.py#3120
So now it have a ugly color.