From e540bb3d9d14b3f3da12dea528183d12a9958957 Mon Sep 17 00:00:00 2001 From: c-bata Date: Wed, 10 May 2023 12:11:25 +0900 Subject: [PATCH] Remove plot components for stable UI --- optuna_dashboard/ts/components/GraphEdf.tsx | 56 +------- .../GraphHyperparameterImportances.tsx | 129 +----------------- .../ts/components/GraphIntermediateValues.tsx | 89 +----------- .../ts/components/StudyDetail.tsx | 4 +- .../ts/components/StudyHistory.tsx | 8 +- 5 files changed, 15 insertions(+), 271 deletions(-) diff --git a/optuna_dashboard/ts/components/GraphEdf.tsx b/optuna_dashboard/ts/components/GraphEdf.tsx index 9c71be36..185dd889 100644 --- a/optuna_dashboard/ts/components/GraphEdf.tsx +++ b/optuna_dashboard/ts/components/GraphEdf.tsx @@ -27,7 +27,7 @@ interface EdfPlotInfo { trials: Trial[] } -export const GraphEdfBeta: FC<{ +export const GraphEdf: FC<{ study: StudyDetail | null objectiveId: number }> = ({ study, objectiveId }) => { @@ -57,60 +57,6 @@ export const GraphEdfBeta: FC<{ ) } -export const GraphEdf: FC<{ - study: StudyDetail | null -}> = ({ study = null }) => { - const theme = useTheme() - const [targets, selected, setTarget] = useObjectiveTargets(study) - const trials = useFilteredTrials(study, [selected], false) - - const handleObjectiveChange = (event: SelectChangeEvent) => { - setTarget(event.target.value) - } - - useEffect(() => { - if (study != null) { - plotEdf(trials, selected, plotDomId, theme.palette.mode) - } - }, [trials, selected, theme.palette.mode]) - return ( - - - - EDF - - {study !== null && study.directions.length !== 1 ? ( - - Objective: - - - ) : null} - - - - - - ) -} - export const GraphEdfMultiStudies: FC<{ studies: StudyDetail[] }> = ({ studies }) => { diff --git a/optuna_dashboard/ts/components/GraphHyperparameterImportances.tsx b/optuna_dashboard/ts/components/GraphHyperparameterImportances.tsx index 278eb2b6..0621670b 100644 --- a/optuna_dashboard/ts/components/GraphHyperparameterImportances.tsx +++ b/optuna_dashboard/ts/components/GraphHyperparameterImportances.tsx @@ -1,25 +1,13 @@ import * as plotly from "plotly.js-dist-min" -import React, { FC, useEffect, useState } from "react" -import { - Grid, - FormControl, - FormLabel, - MenuItem, - Select, - Typography, - SelectChangeEvent, - useTheme, - Box, - Card, - CardContent, -} from "@mui/material" +import React, { FC, useEffect } from "react" +import { Typography, useTheme, Box, Card, CardContent } from "@mui/material" import { plotlyDarkTemplate } from "./PlotlyDarkMode" import { actionCreator } from "../action" import { useParamImportanceValue, useStudyDirections } from "../state" const plotDomId = "graph-hyperparameter-importances" -export const GraphHyperparameterImportanceBeta: FC<{ +export const GraphHyperparameterImportance: FC<{ studyId: number study: StudyDetail | null graphHeight: string @@ -41,7 +29,7 @@ export const GraphHyperparameterImportanceBeta: FC<{ useEffect(() => { if (importances !== null && nObjectives === importances.length) { - plotParamImportancesBeta(importances, objectiveNames, theme.palette.mode) + plotParamImportance(importances, objectiveNames, theme.palette.mode) } }, [nObjectives, importances, theme.palette.mode]) @@ -60,7 +48,7 @@ export const GraphHyperparameterImportanceBeta: FC<{ ) } -const plotParamImportancesBeta = ( +const plotParamImportance = ( importances: ParamImportance[][], objectiveNames: string[], mode: string @@ -111,110 +99,3 @@ const plotParamImportancesBeta = ( ) plotly.react(plotDomId, traces, layout) } - -export const GraphHyperparameterImportances: FC<{ - study: StudyDetail | null - studyId: number -}> = ({ study = null, studyId }) => { - const theme = useTheme() - const action = actionCreator() - const importances = useParamImportanceValue(studyId) - const [objectiveId, setObjectiveId] = useState(0) - const numCompletedTrials = - study?.trials.filter((t) => t.state === "Complete").length || 0 - - const handleObjectiveChange = (event: SelectChangeEvent) => { - setObjectiveId(event.target.value as number) - } - - useEffect(() => { - action.updateParamImportance(studyId) - }, [numCompletedTrials]) - - useEffect(() => { - if (importances !== null && importances.length > objectiveId) { - plotParamImportances(importances[objectiveId], theme.palette.mode) - } - }, [importances, objectiveId, theme.palette.mode]) - - return ( - - - - Hyperparameter importance - - {study !== null && study.directions.length !== 1 ? ( - - Objective ID: - - - ) : null} - - - - - - ) -} - -const plotParamImportances = (importance: ParamImportance[], mode: string) => { - if (document.getElementById(plotDomId) === null) { - return - } - const reversed = [...importance].reverse() - const importance_values = reversed.map((p) => p.importance) - const param_names = reversed.map((p) => p.name) - const param_hover_templates = reversed.map( - (p) => `${p.name} (${p.distribution}): ${p.importance} ` - ) - - const layout: Partial = { - xaxis: { - title: `Importance for the Objective Value`, - }, - yaxis: { - title: "Hyperparameter", - automargin: true, - }, - margin: { - l: 50, - t: 0, - r: 50, - b: 50, - }, - showlegend: false, - template: mode === "dark" ? plotlyDarkTemplate : {}, - } - - const plotData: Partial[] = [ - { - type: "bar", - orientation: "h", - x: importance_values, - y: param_names, - text: importance_values.map((v) => String(v.toFixed(2))), - textposition: "outside", - hovertemplate: param_hover_templates, - marker: { - color: "rgb(66,146,198)", - }, - }, - ] - - plotly.react(plotDomId, plotData, layout) -} diff --git a/optuna_dashboard/ts/components/GraphIntermediateValues.tsx b/optuna_dashboard/ts/components/GraphIntermediateValues.tsx index 49749584..ca0bfda0 100644 --- a/optuna_dashboard/ts/components/GraphIntermediateValues.tsx +++ b/optuna_dashboard/ts/components/GraphIntermediateValues.tsx @@ -1,22 +1,11 @@ import * as plotly from "plotly.js-dist-min" -import React, { ChangeEvent, FC, useEffect, useState } from "react" -import { - Box, - Checkbox, - FormControl, - FormLabel, - FormControlLabel, - Grid, - Typography, - useTheme, - CardContent, - Card, -} from "@mui/material" +import React, { FC, useEffect } from "react" +import { Box, Typography, useTheme, CardContent, Card } from "@mui/material" import { plotlyDarkTemplate } from "./PlotlyDarkMode" const plotDomId = "graph-intermediate-values" -export const GraphIntermediateValuesBeta: FC<{ +export const GraphIntermediateValues: FC<{ trials: Trial[] includePruned: boolean logScale: boolean @@ -48,78 +37,6 @@ export const GraphIntermediateValuesBeta: FC<{ ) } -export const GraphIntermediateValues: FC<{ - trials: Trial[] -}> = ({ trials = [] }) => { - const theme = useTheme() - const [filterCompleteTrial, setFilterCompleteTrial] = useState(false) - const [filterPrunedTrial, setFilterPrunedTrial] = useState(false) - - useEffect(() => { - plotIntermediateValue( - trials, - theme.palette.mode, - filterCompleteTrial, - filterPrunedTrial, - false - ) - }, [trials, theme.palette.mode, filterCompleteTrial, filterPrunedTrial]) - - const handleFilterCompleteChange = (e: ChangeEvent) => { - e.preventDefault() - setFilterCompleteTrial(!filterCompleteTrial) - } - const handleFilterPrunedChange = (e: ChangeEvent) => { - e.preventDefault() - setFilterPrunedTrial(!filterPrunedTrial) - } - return ( - - - - Intermediate values - - - Filter state: - - } - label="Complete" - /> - - } - label="Pruned" - /> - - - - - - - ) -} - const plotIntermediateValue = ( trials: Trial[], mode: string, diff --git a/optuna_dashboard/ts/components/StudyDetail.tsx b/optuna_dashboard/ts/components/StudyDetail.tsx index d1024ad6..255be7d2 100644 --- a/optuna_dashboard/ts/components/StudyDetail.tsx +++ b/optuna_dashboard/ts/components/StudyDetail.tsx @@ -25,7 +25,7 @@ import { AppDrawer, PageId } from "./AppDrawer" import { GraphParallelCoordinate } from "./GraphParallelCoordinate" import { Contour } from "./GraphContour" import { GraphSlice } from "./GraphSlice" -import { GraphEdfBeta } from "./GraphEdf" +import { GraphEdf } from "./GraphEdf" import { TrialList } from "./TrialList" import { StudyHistory } from "./StudyHistory" @@ -113,7 +113,7 @@ export const StudyDetail: FC<{ - + diff --git a/optuna_dashboard/ts/components/StudyHistory.tsx b/optuna_dashboard/ts/components/StudyHistory.tsx index 6fd9f537..938cfcf6 100644 --- a/optuna_dashboard/ts/components/StudyHistory.tsx +++ b/optuna_dashboard/ts/components/StudyHistory.tsx @@ -10,10 +10,10 @@ import { } from "@mui/material" import { GraphParetoFront } from "./GraphParetoFront" import { GraphHistory } from "./GraphHistory" -import { GraphIntermediateValuesBeta } from "./GraphIntermediateValues" +import { GraphIntermediateValues } from "./GraphIntermediateValues" import Grid2 from "@mui/material/Unstable_Grid2" import { DataGrid, DataGridColumn } from "./DataGrid" -import { GraphHyperparameterImportanceBeta } from "./GraphHyperparameterImportances" +import { GraphHyperparameterImportance } from "./GraphHyperparameterImportances" import { BestTrialsCard } from "./BestTrialsCard" import { useStudyDetailValue, @@ -106,7 +106,7 @@ export const StudyHistory: FC<{ studyId: number }> = ({ studyId }) => { studyDetail.directions.length == 1 && studyDetail.has_intermediate_values ? ( - = ({ studyId }) => { ) : null} -