Skip to content

Refactor explorer edition UI to use theme palette #459

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Irozuku wants to merge 4 commits into
base: develop
Choose a base branch
from
Open

Refactor explorer edition UI to use theme palette #459

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
1d9591d
fix: update ColorscaleSelector to use theme for styling
Irozuku Feb 25, 2026
5337b63
fix: update XAxisForm and YAxisForm to use theme for color styling
Irozuku Feb 25, 2026
fd5013d
fix: update labels in ColorscaleSelector and translation files for co…
Irozuku Feb 25, 2026
8a17390
fix: update Typography component in ExplorerDetailsModal for better s…
Irozuku Feb 25, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion DashAI/front/src/components/notebooks/explorer/ExplorerDetailsModal.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,7 @@ export default function ExplorerDetailsModal({
}}
>
<DialogTitle sx={{ display: "flex", alignItems: "center", gap: 1 }}>
<Typography variant="h6">
<Typography variant="h6" component="div">
{t("datasets:label.detailsForExplorer", {
name: explorerComponent.display_name,
})}
Expand Down
77 changes: 42 additions & 35 deletions DashAI/front/src/components/notebooks/explorer/plotLayout/ColorscaleSelector.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import {
Divider,
alpha,
Alert,
useTheme,
} from "@mui/material";
import DeleteIcon from "@mui/icons-material/Delete";
import AddIcon from "@mui/icons-material/Add";
Expand Down Expand Up @@ -42,6 +43,7 @@ const COLORMAPS = [
];

export default function ColorscaleSelector({ value, onChange }) {
const theme = useTheme();
const isArrayMode = Array.isArray(value);

const [mode, setMode] = useState(isArrayMode ? "array" : "preset");
Expand Down Expand Up @@ -92,9 +94,9 @@ export default function ColorscaleSelector({ value, onChange }) {
return (
<Box
sx={{
bgcolor: "#474747",
bgcolor: theme.palette.ui.panelDark,
p: 2,
borderBottom: "1px solid #7f7f7f",
borderBottom: `1px solid ${theme.palette.ui.borderLight}`,
}}
>
<Stack spacing={3}>
Expand Down Expand Up @@ -122,15 +124,13 @@ export default function ColorscaleSelector({ value, onChange }) {
size="small"
sx={{
"& .MuiToggleButton-root": {
border: (theme) =>
`1px solid ${alpha(theme.palette.primary.main, 0.3)}`,
border: `1px solid ${alpha(theme.palette.primary.main, 0.3)}`,
fontWeight: 500,
color: "text.secondary",
"&.Mui-selected": {
backgroundColor: (theme) =>
alpha(theme.palette.primary.main, 0.2),
color: (theme) => theme.palette.primary.main,
borderColor: (theme) => theme.palette.primary.main,
backgroundColor: alpha(theme.palette.primary.main, 0.2),
color: theme.palette.primary.main,
borderColor: theme.palette.primary.main,
},
},
}}
Expand All @@ -147,7 +147,7 @@ export default function ColorscaleSelector({ value, onChange }) {
<Divider
sx={{
width: "100%",
borderColor: alpha("#ffffff", 0.2),
borderColor: theme.palette.ui.divider,
}}
/>

Expand Down Expand Up @@ -179,13 +179,13 @@ export default function ColorscaleSelector({ value, onChange }) {
"& .MuiOutlinedInput-root": {
fontWeight: 500,
"& fieldset": {
borderColor: alpha("#06b6d4", 0.3),
borderColor: alpha(theme.palette.primary.main, 0.3),
},
"&:hover fieldset": {
borderColor: "#06b6d4",
borderColor: theme.palette.primary.main,
},
"&.Mui-focused fieldset": {
borderColor: "#06b6d4",
borderColor: theme.palette.primary.main,
},
},
"& .MuiOutlinedInput-input": {
Expand Down Expand Up @@ -239,16 +239,18 @@ export default function ColorscaleSelector({ value, onChange }) {
key={i}
variant="outlined"
sx={{
background: (theme) =>
alpha(theme.palette.background.paper, 0.4),
border: (theme) =>
`1px solid ${alpha(theme.palette.primary.main, 0.15)}`,
background: alpha(theme.palette.background.paper, 0.4),
border: `1px solid ${alpha(
theme.palette.primary.main,
0.15,
)}`,
transition: "all 0.2s ease",
"&:hover": {
border: (theme) =>
`1px solid ${theme.palette.primary.main}`,
boxShadow: (theme) =>
`0 2px 8px ${alpha(theme.palette.primary.main, 0.15)}`,
border: `1px solid ${theme.palette.primary.main}`,
boxShadow: `0 2px 8px ${alpha(
theme.palette.primary.main,
0.15,
)}`,
},
}}
>
Expand All @@ -265,21 +267,23 @@ export default function ColorscaleSelector({ value, onChange }) {
minWidth: 32,
height: 32,
borderRadius: "50%",
backgroundColor: (theme) =>
alpha(theme.palette.primary.main, 0.15),
backgroundColor: alpha(
theme.palette.primary.main,
0.15,
),
display: "flex",
alignItems: "center",
justifyContent: "center",
fontWeight: 600,
fontSize: "0.875rem",
color: "#06b6d4",
color: theme.palette.primary.main,
}}
>
{i + 1}
</Box>

<TextField
label="Position"
label={t("datasets:label.position")}
type="number"
variant="outlined"
size="small"
Expand All @@ -298,13 +302,16 @@ export default function ColorscaleSelector({ value, onChange }) {
width: 100,
"& .MuiOutlinedInput-root": {
"& fieldset": {
borderColor: alpha("#06b6d4", 0.3),
borderColor: alpha(
theme.palette.primary.main,
0.3,
),
},
"&:hover fieldset": {
borderColor: "#06b6d4",
borderColor: theme.palette.primary.main,
},
"&.Mui-focused fieldset": {
borderColor: "#06b6d4",
borderColor: theme.palette.primary.main,
},
},
}}
Expand All @@ -324,8 +331,10 @@ export default function ColorscaleSelector({ value, onChange }) {
onClick={() => removeStop(i)}
sx={{
"&:hover": {
backgroundColor: (theme) =>
alpha(theme.palette.error.main, 0.1),
backgroundColor: alpha(
theme.palette.error.main,
0.1,
),
},
}}
>
Expand All @@ -345,14 +354,12 @@ export default function ColorscaleSelector({ value, onChange }) {
textTransform: "none",
fontWeight: 500,
borderStyle: "dashed",
borderColor: (theme) =>
alpha(theme.palette.primary.main, 0.4),
color: "#06b6d4",
borderColor: alpha(theme.palette.primary.main, 0.4),
color: theme.palette.primary.main,
"&:hover": {
borderStyle: "dashed",
backgroundColor: (theme) =>
alpha(theme.palette.primary.main, 0.08),
borderColor: (theme) => theme.palette.primary.main,
backgroundColor: alpha(theme.palette.primary.main, 0.08),
borderColor: theme.palette.primary.main,
},
}}
>
Expand Down
25 changes: 9 additions & 16 deletions DashAI/front/src/components/notebooks/explorer/plotLayout/forms/XAxisForm.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import {
Switch,
Box,
Typography,
useTheme,
} from "@mui/material";

import DebouncedColorPicker from "../DebouncedColorPicker";
Expand All @@ -17,6 +18,7 @@ export default function XAxisForm({
handleTraceChange,
}) {
const { t } = useTranslation(["datasets"]);
const theme = useTheme();
const tickvalsArray = Array.isArray(data[0]?.x) ? data[0].x : [];

return (
Expand Down Expand Up @@ -53,7 +55,7 @@ export default function XAxisForm({

<DebouncedColorPicker
label={t("datasets:label.axisTitleColor", { axis: "X" })}
value={layout.xaxis?.title?.font?.color || "#2A3F5F"}
value={layout.xaxis?.title?.font?.color || theme.palette.text.primary}
onChange={(color) =>
handleAxisChange("xaxis", "title", {
...layout.xaxis?.title,
Expand All @@ -78,7 +80,7 @@ export default function XAxisForm({

<DebouncedColorPicker
label={t("datasets:label.axisTickFontColor", { axis: "X" })}
value={layout.xaxis?.tickfont?.color || "#2A3F5F"}
value={layout.xaxis?.tickfont?.color || theme.palette.text.secondary}
onChange={(color) =>
handleAxisChange("xaxis", "tickfont", {
...layout.xaxis?.tickfont,
Expand All @@ -99,7 +101,7 @@ export default function XAxisForm({

<DebouncedColorPicker
label={t("datasets:label.axisLineColor", { axis: "X" })}
value={layout.xaxis?.linecolor || "#FFFFFF"}
value={layout.xaxis?.linecolor || theme.palette.text.primary}
onChange={(color) => handleAxisChange("xaxis", "linecolor", color)}
/>

Expand All @@ -116,7 +118,7 @@ export default function XAxisForm({

<DebouncedColorPicker
label={t("datasets:label.axisGridColor", { axis: "X" })}
value={layout.xaxis?.gridcolor || "#FFFFFF"}
value={layout.xaxis?.gridcolor || theme.palette.ui.divider}
onChange={(color) => handleAxisChange("xaxis", "gridcolor", color)}
/>

Expand All @@ -141,7 +143,7 @@ export default function XAxisForm({
color="primary"
/>
}
label={t("datasets:label.showGrid")}
label={t("datasets:label.showGrid", { axis: "X" })}
/>

<FormControlLabel
Expand All @@ -154,24 +156,15 @@ export default function XAxisForm({
color="primary"
/>
}
label={t("datasets:label.showZeroLine")}
label={t("datasets:label.showZeroLine", { axis: "X" })}
/>
{/* X Axis Tick Labels */}
{tickvalsArray.length > 0 &&
tickvalsArray.map((tick, idx) => {
const rawTicktext = data[0].x[idx];

return (
<Box
key={idx}
sx={{
mt: 2,
p: 2,
border: "1px solid #444",
borderRadius: 1,
bgcolor: "#333",
}}
>
<Box key={idx}>
{/* Label input */}
<TextField
label={t("datasets:label.axisTickLabel", { axis: "X", tick })}
Expand Down
25 changes: 9 additions & 16 deletions DashAI/front/src/components/notebooks/explorer/plotLayout/forms/YAxisForm.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import {
Switch,
Box,
Typography,
useTheme,
} from "@mui/material";

import DebouncedColorPicker from "../DebouncedColorPicker";
Expand All @@ -17,6 +18,7 @@ export default function YAxisForm({
handleTraceChange,
}) {
const { t } = useTranslation(["datasets"]);
const theme = useTheme();
const tickvalsArray = Array.isArray(data[0]?.y) ? data[0].y : [];

return (
Expand Down Expand Up @@ -53,7 +55,7 @@ export default function YAxisForm({

<DebouncedColorPicker
label={t("datasets:label.axisTitleColor", { axis: "Y" })}
value={layout.yaxis?.title?.font?.color || "#2A3F5F"}
value={layout.yaxis?.title?.font?.color || theme.palette.text.primary}
onChange={(color) =>
handleAxisChange("yaxis", "title", {
...layout.yaxis?.title,
Expand All @@ -77,7 +79,7 @@ export default function YAxisForm({
/>
<DebouncedColorPicker
label={t("datasets:label.axisTickFontColor", { axis: "Y" })}
value={layout.yaxis?.tickfont?.color || "#2A3F5F"}
value={layout.yaxis?.tickfont?.color || theme.palette.text.secondary}
onChange={(color) =>
handleAxisChange("yaxis", "tickfont", {
...layout.yaxis?.tickfont,
Expand All @@ -99,7 +101,7 @@ export default function YAxisForm({

<DebouncedColorPicker
label={t("datasets:label.axisLineColor", { axis: "Y" })}
value={layout.yaxis?.linecolor || "#FFFFFF"}
value={layout.yaxis?.linecolor || theme.palette.text.primary}
onChange={(color) => handleAxisChange("yaxis", "linecolor", color)}
/>

Expand All @@ -116,7 +118,7 @@ export default function YAxisForm({

<DebouncedColorPicker
label={t("datasets:label.axisGridColor", { axis: "Y" })}
value={layout.yaxis?.gridcolor || "#FFFFFF"}
value={layout.yaxis?.gridcolor || theme.palette.ui.divider}
onChange={(color) => handleAxisChange("yaxis", "gridcolor", color)}
/>

Expand All @@ -141,7 +143,7 @@ export default function YAxisForm({
color="primary"
/>
}
label={t("datasets:label.showGrid")}
label={t("datasets:label.showGrid", { axis: "Y" })}
/>

<FormControlLabel
Expand All @@ -154,24 +156,15 @@ export default function YAxisForm({
color="primary"
/>
}
label={t("datasets:label.showZeroLine")}
label={t("datasets:label.showZeroLine", { axis: "Y" })}
/>
{/* Y Axis Tick Labels */}
{tickvalsArray.length > 0 &&
tickvalsArray.map((tick, idx) => {
const rawTicktext = data[0].y[idx];

return (
<Box
key={idx}
sx={{
mt: 2,
p: 2,
border: "1px solid #444",
borderRadius: 1,
bgcolor: "#333",
}}
>
<Box key={idx}>
{/* Label input */}
<TextField
label={t("datasets:label.axisTickLabel", { axis: "Y", tick })}
Expand Down
2 changes: 1 addition & 1 deletion DashAI/front/src/utils/i18n/locales/en/datasets.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,6 @@
"failedToCreateExplorer": "Failed to create explorer",
"failedToDeleteDataset": "Failed to delete dataset",
"failedToDeleteNotebook": "Failed to delete notebook",
"failedToFetchDatasets": "Failed to fetch datasets",
"failedToFetchNotebooks": "Failed to fetch notebooks",
"failedToLoadDatasetInfo": "Failed to fetch dataset info",
"failedToUpdateDataset": "Failed to update dataset",
Expand Down Expand Up @@ -205,6 +204,7 @@
"outliers": "Outliers",
"overview": "Overview",
"plotBackgroundColor": "Plot Background Color",
"position": "Position",
"possibleIDColumns": "Possible ID Columns",
"presetScale": "Preset Scale",
"processingMessage": "This may take a few moments depending on the size of your data.",
Expand Down
1 change: 0 additions & 1 deletion DashAI/front/src/utils/i18n/locales/en/models.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -140,7 +140,6 @@
"runStarted": "Run \"{{runName}}\" started",
"runStartedSuccessfully": "Run {{runId}} started successfully",
"sessionCreatedSuccess": "Session successfully created.",
"sessionDeleted": "Session deleted successfully",
"sessionUpdated": "Session updated successfully"
}
}
Loading