wassname/optuna-dashboard
1
0
Fork 0
mirror of https://github.com/wassname/optuna-dashboard.git synced 2026-09-22 13:20:38 +08:00
Code Issues Packages Projects Releases Wiki Activity

Add Dark Mode support

Browse Source
This commit is contained in:
c-bata
2022-03-05 13:23:40 +09:00
parent 5801026495
commit 27cea51bb1
10 changed files with 72 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
optuna_dashboard/_app.py
+5
View File
@@ -61,6 +61,11 @@ INDEX_HTML = """<!DOCTYPE html>
margin: 0;
padding: 0;
}
@media (prefers-color-scheme: dark) {
body {
background-color: #121212;
}
}
</style>
<script defer src="/static/bundle.js"></script>
</head>
optuna_dashboard/static/components/App.tsx
+26 -12
View File
@@ -1,25 +1,39 @@
import React, { FC } from "react"
import React, { FC, useMemo } from "react"
import { RecoilRoot } from "recoil"
import { BrowserRouter as Router, Switch, Route } from "react-router-dom"
import { SnackbarProvider } from "notistack"
import { StudyDetail } from "./StudyDetail"
import { StudyList } from "./StudyList"
import {createTheme, useMediaQuery, ThemeProvider} from "@mui/material"
export const App: FC = () => {
const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
const theme = useMemo(
() =>
createTheme({
palette: {
mode: prefersDarkMode ? 'dark' : 'light',
},
}),
[prefersDarkMode],
);
return (
<RecoilRoot>
<SnackbarProvider maxSnack={3}>
<Router>
<Switch>
<Route
path={URL_PREFIX + "/studies/:studyId"}
children={<StudyDetail />}
/>
<Route path={URL_PREFIX + "/"} children={<StudyList />} />
</Switch>
</Router>
</SnackbarProvider>
<ThemeProvider theme={theme}>
<SnackbarProvider maxSnack={3}>
<Router>
<Switch>
<Route
path={URL_PREFIX + "/studies/:studyId"}
children={<StudyDetail />}
/>
<Route path={URL_PREFIX + "/"} children={<StudyList />} />
</Switch>
</Router>
</SnackbarProvider>
</ThemeProvider>
</RecoilRoot>
)
}
optuna_dashboard/static/components/GraphEdf.tsx
+2
View File
@@ -10,6 +10,7 @@ import {
SelectChangeEvent,
useTheme,
} from "@mui/material"
import {plotlyDarkTemplate} from "./PlotlyDarkMode";
const plotDomId = "graph-edf"
@@ -95,6 +96,7 @@ const plotEdf = (study: StudyDetail, objectiveId: number) => {
r: 50,
b: 50,
},
template: plotlyDarkTemplate,
}
const values = completedTrials.map((t) => target(t))
optuna_dashboard/static/components/GraphHistory.tsx
+2
View File
@@ -15,6 +15,7 @@ import {
SelectChangeEvent,
useTheme,
} from "@mui/material"
import {plotlyDarkTemplate} from "./PlotlyDarkMode";
const plotDomId = "graph-history"
@@ -191,6 +192,7 @@ const plotHistory = (
type: xAxis === "number" ? "linear" : "date",
},
showlegend: false,
template: plotlyDarkTemplate,
}
let filteredTrials = study.trials.filter(
optuna_dashboard/static/components/GraphHyperparameterImportances.tsx
+2
View File
@@ -12,6 +12,7 @@ import {
} from "@mui/material"
import { getParamImportances } from "../apiClient"
import {plotlyDarkTemplate} from "./PlotlyDarkMode";
const plotDomId = "graph-hyperparameter-importances"
// To match colors used by plot_param_importances in optuna.
@@ -131,6 +132,7 @@ const plotParamImportances = (paramsImportanceData: ParamImportances) => {
b: 50,
},
showlegend: false,
template: plotlyDarkTemplate,
}
const plotData: Partial<plotly.PlotData>[] = [
optuna_dashboard/static/components/GraphIntermediateValues.tsx
+2
View File
@@ -1,6 +1,7 @@
import * as plotly from "plotly.js-dist"
import React, { FC, useEffect } from "react"
import { Grid, Typography } from "@mui/material"
import {plotlyDarkTemplate} from "./PlotlyDarkMode";
const plotDomId = "graph-intermediate-values"
@@ -39,6 +40,7 @@ const plotIntermediateValue = (trials: Trial[]) => {
r: 50,
b: 0,
},
template: plotlyDarkTemplate,
}
if (trials.length === 0) {
plotly.react(plotDomId, [], layout)
optuna_dashboard/static/components/GraphParallelCoordinate.tsx
+3 -1
View File
@@ -10,6 +10,7 @@ import {
SelectChangeEvent,
useTheme,
} from "@mui/material"
import {plotlyDarkTemplate} from "./PlotlyDarkMode";
const plotDomId = "graph-parallel-coordinate"
@@ -34,7 +35,7 @@ export const GraphParallelCoordinate: FC<{
<Grid item xs={3}>
<Grid container direction="column">
<Typography variant="h6" sx={{ margin: "1em 0" }}>
Parallel coordinate
Parallel Coordinate
</Typography>
{study !== null && study.directions.length !== 1 ? (
<FormControl
@@ -76,6 +77,7 @@ const plotCoordinate = (study: StudyDetail, objectiveId: number) => {
r: 50,
b: 0,
},
template: plotlyDarkTemplate,
}
if (study.trials.length === 0) {
optuna_dashboard/static/components/GraphParetoFront.tsx
+2
View File
@@ -10,6 +10,7 @@ import {
SelectChangeEvent,
useTheme,
} from "@mui/material"
import {plotlyDarkTemplate} from "./PlotlyDarkMode";
const plotDomId = "graph-pareto-front"
@@ -100,6 +101,7 @@ const plotParetoFront = (
r: 50,
b: 0,
},
template: plotlyDarkTemplate,
}
const trials: Trial[] = study ? study.trials : []
optuna_dashboard/static/components/GraphSlice.tsx
+2
View File
@@ -12,6 +12,7 @@ import {
SelectChangeEvent,
useTheme,
} from "@mui/material"
import {plotlyDarkTemplate} from "./PlotlyDarkMode";
const plotDomId = "graph-slice"
@@ -163,6 +164,7 @@ const plotSlice = (
},
plot_bgcolor: "#E5ecf6",
showlegend: false,
template: plotlyDarkTemplate,
}
const filteredTrials = trials.filter(
optuna_dashboard/static/components/PlotlyDarkMode.ts
+26
View File
@@ -0,0 +1,26 @@
import * as plotly from "plotly.js-dist"
export const plotlyDarkTemplate: Partial<plotly.Template> = {
layout: {
"font": {"color": "#f2f5fa"},
"xaxis": {
"gridcolor": "#283442",
"linecolor": "#506784",
"zerolinecolor": "#283442",
},
"yaxis": {
"gridcolor": "#283442",
"linecolor": "#506784",
"zerolinecolor": "#283442",
},
"ternary": {
"aaxis": {"ticks": "", "gridcolor": "#506784", "linecolor": "#506784"},
"baxis": {"ticks": "", "gridcolor": "#506784", "linecolor": "#506784"},
"caxis": {"ticks": "", "gridcolor": "#506784", "linecolor": "#506784"},
"bgcolor": "rgb(17,17,17)"
},
"colorway": ["#636efa", "#EF553B", "#00cc96", "#ab63fa", "#19d3f3", "#e763fa", "#fecb52", "#ffa15a", "#ff6692", "#b6e880"],
"plot_bgcolor": "#222222",
"paper_bgcolor": "#222222",
},
}