From eedad9af6826db91621a05bf140a599763694288 Mon Sep 17 00:00:00 2001 From: c-bata Date: Wed, 11 Jan 2023 22:37:35 +0900 Subject: [PATCH 1/2] Split to StudyHistory component --- .../ts/components/GraphHistory.tsx | 59 ++++++------ .../ts/components/StudyDetail.tsx | 2 +- .../ts/components/StudyDetailBeta.tsx | 83 +---------------- .../ts/components/StudyHistory.tsx | 92 +++++++++++++++++++ 4 files changed, 126 insertions(+), 110 deletions(-) create mode 100644 optuna_dashboard/ts/components/StudyHistory.tsx diff --git a/optuna_dashboard/ts/components/GraphHistory.tsx b/optuna_dashboard/ts/components/GraphHistory.tsx index ef61b261..5936ac90 100644 --- a/optuna_dashboard/ts/components/GraphHistory.tsx +++ b/optuna_dashboard/ts/components/GraphHistory.tsx @@ -26,7 +26,8 @@ const plotDomId = "graph-history" export const GraphHistory: FC<{ study: StudyDetail | null -}> = ({ study = null }) => { + isBeta: boolean +}> = ({ study, isBeta }) => { const theme = useTheme() const [xAxis, setXAxis] = useState("number") const [logScale, setLogScale] = useState(false) @@ -149,34 +150,36 @@ export const GraphHistory: FC<{ label="Pruned" /> - - X-axis: - - } - label="Number" - /> - } - label="Datetime start" - /> - } - label="Datetime complete" - /> - - + X-axis: + + } + label="Number" + /> + } + label="Datetime start" + /> + } + label="Datetime complete" + /> + + + )}
diff --git a/optuna_dashboard/ts/components/StudyDetail.tsx b/optuna_dashboard/ts/components/StudyDetail.tsx index 8e15d58d..bf73bdd0 100644 --- a/optuna_dashboard/ts/components/StudyDetail.tsx +++ b/optuna_dashboard/ts/components/StudyDetail.tsx @@ -165,7 +165,7 @@ export const StudyDetail: FC<{ }} > - + ) : null} diff --git a/optuna_dashboard/ts/components/StudyDetailBeta.tsx b/optuna_dashboard/ts/components/StudyDetailBeta.tsx index 9e2f8f73..c29c154f 100644 --- a/optuna_dashboard/ts/components/StudyDetailBeta.tsx +++ b/optuna_dashboard/ts/components/StudyDetailBeta.tsx @@ -13,28 +13,21 @@ import Grid2 from "@mui/material/Unstable_Grid2" import ChevronRightIcon from "@mui/icons-material/ChevronRight" import HomeIcon from "@mui/icons-material/Home" -import { GraphHistory } from "./GraphHistory" import { StudyNote } from "./Note" import { actionCreator } from "../action" import { reloadIntervalState, useStudyDetailValue, - useStudyDirections, useStudyName, - useStudySummaryValue, } from "../state" import { TrialTable } from "./TrialTable" import { AppDrawer, PageId } from "./AppDrawer" import { GraphParallelCoordinate } from "./GraphParallelCoordinate" import { Contour } from "./GraphContour" -import { GraphHyperparameterImportanceBeta } from "./GraphHyperparameterImportances" import { GraphSlice } from "./GraphSlice" -import { GraphParetoFront } from "./GraphParetoFront" -import { DataGrid, DataGridColumn } from "./DataGrid" -import { GraphIntermediateValues } from "./GraphIntermediateValues" import { GraphEdfBeta } from "./GraphEdf" import { TrialList } from "./TrialList" -import { BestTrialsCard } from "./BestTrialsCard" +import { StudyHistory } from "./StudyHistory" interface ParamTypes { studyId: string @@ -55,10 +48,7 @@ export const StudyDetailBeta: FC<{ const studyId = useURLVars() const studyDetail = useStudyDetailValue(studyId) const reloadInterval = useRecoilValue(reloadIntervalState) - const studySummary = useStudySummaryValue(studyId) - const directions = useStudyDirections(studyId) const studyName = useStudyName(studyId) - const userAttrs = studySummary?.user_attrs || [] const title = studyName !== null ? `${studyName} (id=${studyId})` : `Study #${studyId}` @@ -77,78 +67,9 @@ export const StudyDetailBeta: FC<{ return () => clearInterval(intervalId) }, [reloadInterval, studyDetail, page]) - const userAttrColumns: DataGridColumn[] = [ - { field: "key", label: "Key", sortable: true }, - { field: "value", label: "Value", sortable: true }, - ] - const trials: Trial[] = studyDetail?.trials || [] - let content = null if (page === "history") { - content = ( - - {directions !== null && directions.length > 1 ? ( - - - - - - ) : null} - - - - - - {studyDetail !== null && - studyDetail.directions.length == 1 && - studyDetail.has_intermediate_values ? ( - - - - - - ) : null} - - - - - - - - - - Study User Attributes - - - columns={userAttrColumns} - rows={userAttrs} - keyField={"key"} - dense={true} - initialRowsPerPage={5} - rowsPerPageOption={[5, 10, { label: "All", value: -1 }]} - /> - - - - - - ) + content = } else if (page === "analytics") { content = ( diff --git a/optuna_dashboard/ts/components/StudyHistory.tsx b/optuna_dashboard/ts/components/StudyHistory.tsx new file mode 100644 index 00000000..089fa768 --- /dev/null +++ b/optuna_dashboard/ts/components/StudyHistory.tsx @@ -0,0 +1,92 @@ +import React, { FC } from "react" +import { Box, Card, CardContent, Typography, useTheme } from "@mui/material" +import { GraphParetoFront } from "./GraphParetoFront" +import { GraphHistory } from "./GraphHistory" +import { GraphIntermediateValues } from "./GraphIntermediateValues" +import Grid2 from "@mui/material/Unstable_Grid2" +import { DataGrid, DataGridColumn } from "./DataGrid" +import { GraphHyperparameterImportanceBeta } from "./GraphHyperparameterImportances" +import { BestTrialsCard } from "./BestTrialsCard" +import { + useStudyDetailValue, + useStudyDirections, + useStudySummaryValue, +} from "../state" + +export const StudyHistory: FC<{ studyId: number }> = ({ studyId }) => { + const theme = useTheme() + const directions = useStudyDirections(studyId) + const studySummary = useStudySummaryValue(studyId) + const studyDetail = useStudyDetailValue(studyId) + + const userAttrs = studySummary?.user_attrs || [] + const userAttrColumns: DataGridColumn[] = [ + { field: "key", label: "Key", sortable: true }, + { field: "value", label: "Value", sortable: true }, + ] + const trials: Trial[] = studyDetail?.trials || [] + return ( + + {directions !== null && directions.length > 1 ? ( + + + + + + ) : null} + + + + + + {studyDetail !== null && + studyDetail.directions.length == 1 && + studyDetail.has_intermediate_values ? ( + + + + + + ) : null} + + + + + + + + + + Study User Attributes + + + columns={userAttrColumns} + rows={userAttrs} + keyField={"key"} + dense={true} + initialRowsPerPage={5} + rowsPerPageOption={[5, 10, { label: "All", value: -1 }]} + /> + + + + + + ) +} From b193653276851a5d723b6b2b89f1603d63f43424 Mon Sep 17 00:00:00 2001 From: c-bata Date: Wed, 11 Jan 2023 22:54:12 +0900 Subject: [PATCH 2/2] Add global state filters --- .../ts/components/GraphHistory.tsx | 150 ++++++++++-------- .../GraphHyperparameterImportances.tsx | 19 +-- .../ts/components/GraphIntermediateValues.tsx | 45 +++++- .../ts/components/StudyHistory.tsx | 98 +++++++++--- 4 files changed, 211 insertions(+), 101 deletions(-) diff --git a/optuna_dashboard/ts/components/GraphHistory.tsx b/optuna_dashboard/ts/components/GraphHistory.tsx index 5936ac90..bf07d281 100644 --- a/optuna_dashboard/ts/components/GraphHistory.tsx +++ b/optuna_dashboard/ts/components/GraphHistory.tsx @@ -26,10 +26,13 @@ const plotDomId = "graph-history" export const GraphHistory: FC<{ study: StudyDetail | null - isBeta: boolean -}> = ({ study, isBeta }) => { + betaLogScale?: boolean + betaIncludePruned?: boolean +}> = ({ study, betaLogScale, betaIncludePruned }) => { const theme = useTheme() - const [xAxis, setXAxis] = useState("number") + const [xAxis, setXAxis] = useState< + "number" | "datetime_start" | "datetime_complete" + >("number") const [logScale, setLogScale] = useState(false) const [filterCompleteTrial, setFilterCompleteTrial] = useState(false) const [filterPrunedTrial, setFilterPrunedTrial] = useState(false) @@ -39,7 +42,7 @@ export const GraphHistory: FC<{ study, [selected], filterCompleteTrial, - filterPrunedTrial + betaIncludePruned === undefined ? filterPrunedTrial : !betaIncludePruned ) useEffect(() => { @@ -49,7 +52,7 @@ export const GraphHistory: FC<{ study.directions, selected, xAxis, - logScale, + betaLogScale === undefined ? logScale : betaLogScale, theme.palette.mode ) } @@ -58,9 +61,8 @@ export const GraphHistory: FC<{ study?.directions, selected, logScale, + betaLogScale, xAxis, - filterPrunedTrial, - filterCompleteTrial, theme.palette.mode, ]) @@ -69,7 +71,13 @@ export const GraphHistory: FC<{ } const handleXAxisChange = (e: ChangeEvent) => { - setXAxis(e.target.value) + if (e.target.value === "number") { + setXAxis("number") + } else if (e.target.value === "datetime_start") { + setXAxis("datetime_start") + } else if (e.target.value === "datetime_complete") { + setXAxis("datetime_complete") + } } const handleLogScaleChange = (e: ChangeEvent) => { @@ -114,72 +122,74 @@ export const GraphHistory: FC<{ ) : null} - - Log y scale: - - - - Filter state: - - } - label="Complete" - /> - - } - label="Pruned" - /> - - {!isBeta && ( + {betaLogScale === undefined ? ( - X-axis: - - } - label="Number" - /> - } - label="Datetime start" - /> - } - label="Datetime complete" - /> - + Log y scale: + - )} + ) : null} + {betaIncludePruned === undefined ? ( + + Filter state: + + } + label="Complete" + /> + + } + label="Pruned" + /> + + ) : null} + + X-axis: + + } + label="Number" + /> + } + label="Datetime start" + /> + } + label="Datetime complete" + /> + +
@@ -192,7 +202,7 @@ const plotHistory = ( trials: Trial[], directions: StudyDirection[], target: Target, - xAxis: string, + xAxis: "number" | "datetime_start" | "datetime_complete", logScale: boolean, mode: string ) => { diff --git a/optuna_dashboard/ts/components/GraphHyperparameterImportances.tsx b/optuna_dashboard/ts/components/GraphHyperparameterImportances.tsx index 63f1e22a..e76d3d28 100644 --- a/optuna_dashboard/ts/components/GraphHyperparameterImportances.tsx +++ b/optuna_dashboard/ts/components/GraphHyperparameterImportances.tsx @@ -13,7 +13,6 @@ import { Card, CardContent, } from "@mui/material" -import Grid2 from "@mui/material/Unstable_Grid2" import { plotlyDarkTemplate } from "./PlotlyDarkMode" import { actionCreator } from "../action" @@ -47,16 +46,14 @@ export const GraphHyperparameterImportanceBeta: FC<{ }, [nObjectives, importances, theme.palette.mode]) return ( - - - - - Hyperparameter Importance - - - - - + + + + Hyperparameter Importance + + + + ) } diff --git a/optuna_dashboard/ts/components/GraphIntermediateValues.tsx b/optuna_dashboard/ts/components/GraphIntermediateValues.tsx index 4d89cc37..767113ca 100644 --- a/optuna_dashboard/ts/components/GraphIntermediateValues.tsx +++ b/optuna_dashboard/ts/components/GraphIntermediateValues.tsx @@ -9,11 +9,42 @@ import { Grid, Typography, useTheme, + CardContent, + Card, } from "@mui/material" import { plotlyDarkTemplate } from "./PlotlyDarkMode" const plotDomId = "graph-intermediate-values" +export const GraphIntermediateValuesBeta: FC<{ + trials: Trial[] + includePruned: boolean + logScale: boolean +}> = ({ trials, includePruned, logScale }) => { + const theme = useTheme() + + useEffect(() => { + plotIntermediateValue( + trials, + theme.palette.mode, + false, + !includePruned, + logScale + ) + }, [trials, theme.palette.mode, false, includePruned, logScale]) + + return ( + + + + Intermediate values + + + + + ) +} + export const GraphIntermediateValues: FC<{ trials: Trial[] }> = ({ trials = [] }) => { @@ -26,7 +57,8 @@ export const GraphIntermediateValues: FC<{ trials, theme.palette.mode, filterCompleteTrial, - filterPrunedTrial + filterPrunedTrial, + false ) }, [trials, theme.palette.mode, filterCompleteTrial, filterPrunedTrial]) @@ -86,7 +118,8 @@ const plotIntermediateValue = ( trials: Trial[], mode: string, filterCompleteTrial: boolean, - filterPrunedTrial: boolean + filterPrunedTrial: boolean, + logScale: boolean ) => { if (document.getElementById(plotDomId) === null) { return @@ -99,6 +132,14 @@ const plotIntermediateValue = ( r: 50, b: 0, }, + yaxis: { + title: "Objective Value", + type: logScale ? "log" : "linear", + }, + xaxis: { + title: "Step", + type: "linear", + }, template: mode === "dark" ? plotlyDarkTemplate : {}, } if (trials.length === 0) { diff --git a/optuna_dashboard/ts/components/StudyHistory.tsx b/optuna_dashboard/ts/components/StudyHistory.tsx index 089fa768..b15209a4 100644 --- a/optuna_dashboard/ts/components/StudyHistory.tsx +++ b/optuna_dashboard/ts/components/StudyHistory.tsx @@ -1,8 +1,16 @@ -import React, { FC } from "react" -import { Box, Card, CardContent, Typography, useTheme } from "@mui/material" +import React, { ChangeEvent, FC, useState } from "react" +import { + Box, + Card, + CardContent, + FormControl, + Switch, + Typography, + useTheme, +} from "@mui/material" import { GraphParetoFront } from "./GraphParetoFront" import { GraphHistory } from "./GraphHistory" -import { GraphIntermediateValues } from "./GraphIntermediateValues" +import { GraphIntermediateValuesBeta } from "./GraphIntermediateValues" import Grid2 from "@mui/material/Unstable_Grid2" import { DataGrid, DataGridColumn } from "./DataGrid" import { GraphHyperparameterImportanceBeta } from "./GraphHyperparameterImportances" @@ -12,12 +20,23 @@ import { useStudyDirections, useStudySummaryValue, } from "../state" +import FormControlLabel from "@mui/material/FormControlLabel" export const StudyHistory: FC<{ studyId: number }> = ({ studyId }) => { const theme = useTheme() const directions = useStudyDirections(studyId) const studySummary = useStudySummaryValue(studyId) const studyDetail = useStudyDetailValue(studyId) + const [logScale, setLogScale] = useState(false) + const [includePruned, setIncludePruned] = useState(true) + + const handleLogScaleChange = (e: ChangeEvent) => { + setLogScale(!logScale) + } + + const handleIncludePrunedChange = (e: ChangeEvent) => { + setIncludePruned(!includePruned) + } const userAttrs = studySummary?.user_attrs || [] const userAttrColumns: DataGridColumn[] = [ @@ -27,6 +46,41 @@ export const StudyHistory: FC<{ studyId: number }> = ({ studyId }) => { const trials: Trial[] = studyDetail?.trials || [] return ( + + + } + label="Log y scale" + /> + + } + label="Include PRUNED trials" + /> + {directions !== null && directions.length > 1 ? ( @@ -40,24 +94,32 @@ export const StudyHistory: FC<{ studyId: number }> = ({ studyId }) => { }} > - + - {studyDetail !== null && - studyDetail.directions.length == 1 && - studyDetail.has_intermediate_values ? ( - - - - - - ) : null} - + {studyDetail !== null && + studyDetail.directions.length == 1 && + studyDetail.has_intermediate_values ? ( + + + + ) : null} + + +