From 42317e09355d38504c0c15e4f4062b707bcd5dad Mon Sep 17 00:00:00 2001 From: moririn2528 Date: Wed, 30 Aug 2023 14:18:29 +0900 Subject: [PATCH 1/4] add analytics page for preferential --- optuna_dashboard/ts/components/AppDrawer.tsx | 28 ++++---- .../ts/components/GraphContour.tsx | 38 ++++++----- .../ts/components/PreferentialAnalytics.tsx | 68 +++++++++++++++++++ .../ts/components/StudyDetail.tsx | 5 +- 4 files changed, 105 insertions(+), 34 deletions(-) create mode 100644 optuna_dashboard/ts/components/PreferentialAnalytics.tsx diff --git a/optuna_dashboard/ts/components/AppDrawer.tsx b/optuna_dashboard/ts/components/AppDrawer.tsx index 79f7d615..0903d72b 100644 --- a/optuna_dashboard/ts/components/AppDrawer.tsx +++ b/optuna_dashboard/ts/components/AppDrawer.tsx @@ -204,21 +204,19 @@ export const AppDrawer: FC<{ /> - {!isPreferential && ( - - - - - - - - - )} + + + + + + + + [] = [ - { - type: "contour", - x: xIndices, - y: yIndices, - z: zValues, - colorscale: "Blues", - connectgaps: true, - hoverinfo: "none", - line: { - smoothing: 1.3, - }, - reversescale: study.directions[objectiveId] !== "minimize", - // https://github.com/plotly/react-plotly.js/issues/251 - // @ts-ignore - contours: { - coloring: "heatmap", - }, - }, + study.is_preferential + ? {} + : { + type: "contour", + x: xIndices, + y: yIndices, + z: zValues, + colorscale: "Blues", + connectgaps: true, + hoverinfo: "none", + line: { + smoothing: 1.3, + }, + reversescale: study.directions[objectiveId] !== "minimize", + // https://github.com/plotly/react-plotly.js/issues/251 + // @ts-ignore + contours: { + coloring: "heatmap", + }, + }, { type: "scatter", x: xValues, diff --git a/optuna_dashboard/ts/components/PreferentialAnalytics.tsx b/optuna_dashboard/ts/components/PreferentialAnalytics.tsx new file mode 100644 index 00000000..d8623f97 --- /dev/null +++ b/optuna_dashboard/ts/components/PreferentialAnalytics.tsx @@ -0,0 +1,68 @@ +import React, { FC } from "react" +import { + Box, + Card, + CardContent, + Paper, + Typography, + useTheme, +} from "@mui/material" +import Grid2 from "@mui/material/Unstable_Grid2" +import { DataGrid, DataGridColumn } from "./DataGrid" +import { BestTrialsCard } from "./BestTrialsCard" +import { useStudyDetailValue, useStudySummaryValue } from "../state" +import { Contour } from "./GraphContour" + +export const PreferentialAnalytics: FC<{ studyId: number }> = ({ studyId }) => { + const theme = useTheme() + const studySummary = useStudySummaryValue(studyId) + const studyDetail = useStudyDetailValue(studyId) + + const userAttrs = studySummary?.user_attrs || studyDetail?.user_attrs || [] + const userAttrColumns: DataGridColumn[] = [ + { field: "key", label: "Key", sortable: true }, + { field: "value", label: "Value", sortable: true }, + ] + return ( + + + + + + + + + + + + + + + Study User Attributes + + + columns={userAttrColumns} + rows={userAttrs} + keyField={"key"} + dense={true} + initialRowsPerPage={5} + rowsPerPageOption={[5, 10, { label: "All", value: -1 }]} + /> + + + + + + ) +} diff --git a/optuna_dashboard/ts/components/StudyDetail.tsx b/optuna_dashboard/ts/components/StudyDetail.tsx index 738166b5..fedfd625 100644 --- a/optuna_dashboard/ts/components/StudyDetail.tsx +++ b/optuna_dashboard/ts/components/StudyDetail.tsx @@ -30,6 +30,7 @@ import { GraphEdf } from "./GraphEdf" import { TrialList } from "./TrialList" import { StudyHistory } from "./StudyHistory" import { PreferentialTrials } from "./PreferentialTrials" +import { PreferentialAnalytics } from "./PreferentialAnalytics" interface ParamTypes { studyId: string @@ -98,7 +99,9 @@ export const StudyDetail: FC<{ ) } else if (page === "analytics") { - content = ( + content = isPreferential ? ( + + ) : ( Hyperparameter Relationships From fda8464a7e37f719e8725ef0d3cb74310ad04cb4 Mon Sep 17 00:00:00 2001 From: moririn2528 Date: Thu, 31 Aug 2023 10:32:41 +0900 Subject: [PATCH 2/4] remove objective value from best trials --- optuna_dashboard/ts/components/BestTrialsCard.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/optuna_dashboard/ts/components/BestTrialsCard.tsx b/optuna_dashboard/ts/components/BestTrialsCard.tsx index fe375604..f228fe52 100644 --- a/optuna_dashboard/ts/components/BestTrialsCard.tsx +++ b/optuna_dashboard/ts/components/BestTrialsCard.tsx @@ -96,9 +96,11 @@ export const BestTrialsCard: FC<{ Trial {trial.number} } /> - - Objective Values = [{trial.values?.join(", ")}] - + {studyDetail?.is_preferential ? null : ( + + Objective Values = [{trial.values?.join(", ")}] + + )} Params = [ {trial.params From 22c3f21f0fda3dcc05f0159b1ae92c933f001bea Mon Sep 17 00:00:00 2001 From: moririn2528 Date: Thu, 31 Aug 2023 11:27:46 +0900 Subject: [PATCH 3/4] add color for best trials --- .../ts/components/GraphContour.tsx | 53 ++++++++++++++----- 1 file changed, 39 insertions(+), 14 deletions(-) diff --git a/optuna_dashboard/ts/components/GraphContour.tsx b/optuna_dashboard/ts/components/GraphContour.tsx index 4478e9ea..267b477a 100644 --- a/optuna_dashboard/ts/components/GraphContour.tsx +++ b/optuna_dashboard/ts/components/GraphContour.tsx @@ -11,6 +11,7 @@ import { useTheme, Box, } from "@mui/material" +import blue from "@mui/material/colors/blue" import { plotlyDarkTemplate } from "./PlotlyDarkMode" import { useMergedUnionSearchSpace } from "../searchSpace" @@ -183,6 +184,9 @@ const plotContour = ( }, uirevision: "true", template: mode === "dark" ? plotlyDarkTemplate : {}, + legend: { + y: 0.8, + }, } // TODO(c-bata): Support parameters that only have the single value @@ -210,11 +214,31 @@ const plotContour = ( zValues[yi][xi] = zValue } }) - - const plotData: Partial[] = [ - study.is_preferential - ? {} - : { + const bestTrialIndices = study.best_trials.map((trial) => trial.number) + const plotData: Partial[] = study.is_preferential + ? [ + { + type: "scatter", + x: xValues.filter((_, i) => bestTrialIndices.includes(i)), + y: yValues.filter((_, i) => bestTrialIndices.includes(i)), + marker: { + line: { width: 2.0, color: "Grey" }, + color: blue[200], + }, + name: "best trials", + mode: "markers", + }, + { + type: "scatter", + x: xValues.filter((_, i) => !bestTrialIndices.includes(i)), + y: yValues.filter((_, i) => !bestTrialIndices.includes(i)), + marker: { line: { width: 2.0, color: "Grey" }, color: "black" }, + name: "others", + mode: "markers", + }, + ] + : [ + { type: "contour", x: xIndices, y: yIndices, @@ -232,15 +256,16 @@ const plotContour = ( coloring: "heatmap", }, }, - { - type: "scatter", - x: xValues, - y: yValues, - marker: { line: { width: 2.0, color: "Grey" }, color: "black" }, - mode: "markers", - showlegend: false, - }, - ] + { + type: "scatter", + x: xValues, + y: yValues, + marker: { line: { width: 2.0, color: "Grey" }, color: "black" }, + mode: "markers", + showlegend: false, + }, + ] + plotly.react(plotDomId, plotData, layout) } From b24ee3cbc29ee67df1208cb6c280b6bc57d7b4ef Mon Sep 17 00:00:00 2001 From: c-bata Date: Thu, 31 Aug 2023 12:00:04 +0900 Subject: [PATCH 4/4] Refactor GraphContour.tsx --- .../ts/components/GraphContour.tsx | 112 +++++++++--------- 1 file changed, 58 insertions(+), 54 deletions(-) diff --git a/optuna_dashboard/ts/components/GraphContour.tsx b/optuna_dashboard/ts/components/GraphContour.tsx index 267b477a..c75e1500 100644 --- a/optuna_dashboard/ts/components/GraphContour.tsx +++ b/optuna_dashboard/ts/components/GraphContour.tsx @@ -184,9 +184,6 @@ const plotContour = ( }, uirevision: "true", template: mode === "dark" ? plotlyDarkTemplate : {}, - legend: { - y: 0.8, - }, } // TODO(c-bata): Support parameters that only have the single value @@ -214,58 +211,65 @@ const plotContour = ( zValues[yi][xi] = zValue } }) - const bestTrialIndices = study.best_trials.map((trial) => trial.number) - const plotData: Partial[] = study.is_preferential - ? [ - { - type: "scatter", - x: xValues.filter((_, i) => bestTrialIndices.includes(i)), - y: yValues.filter((_, i) => bestTrialIndices.includes(i)), - marker: { - line: { width: 2.0, color: "Grey" }, - color: blue[200], - }, - name: "best trials", - mode: "markers", - }, - { - type: "scatter", - x: xValues.filter((_, i) => !bestTrialIndices.includes(i)), - y: yValues.filter((_, i) => !bestTrialIndices.includes(i)), - marker: { line: { width: 2.0, color: "Grey" }, color: "black" }, - name: "others", - mode: "markers", - }, - ] - : [ - { - type: "contour", - x: xIndices, - y: yIndices, - z: zValues, - colorscale: "Blues", - connectgaps: true, - hoverinfo: "none", - line: { - smoothing: 1.3, - }, - reversescale: study.directions[objectiveId] !== "minimize", - // https://github.com/plotly/react-plotly.js/issues/251 - // @ts-ignore - contours: { - coloring: "heatmap", - }, - }, - { - type: "scatter", - x: xValues, - y: yValues, - marker: { line: { width: 2.0, color: "Grey" }, color: "black" }, - mode: "markers", - showlegend: false, - }, - ] + if (!study.is_preferential) { + const plotData: Partial[] = [ + { + type: "contour", + x: xIndices, + y: yIndices, + z: zValues, + colorscale: "Blues", + connectgaps: true, + hoverinfo: "none", + line: { + smoothing: 1.3, + }, + reversescale: study.directions[objectiveId] !== "minimize", + // https://github.com/plotly/react-plotly.js/issues/251 + // @ts-ignore + contours: { + coloring: "heatmap", + }, + }, + { + type: "scatter", + x: xValues, + y: yValues, + marker: { line: { width: 2.0, color: "Grey" }, color: "black" }, + mode: "markers", + showlegend: false, + }, + ] + plotly.react(plotDomId, plotData, layout) + return + } + + layout.legend = { + y: 0.8, + } + const bestTrialIndices = study.best_trials.map((trial) => trial.number) + const plotData: Partial[] = [ + { + type: "scatter", + x: xValues.filter((_, i) => bestTrialIndices.includes(i)), + y: yValues.filter((_, i) => bestTrialIndices.includes(i)), + marker: { + line: { width: 2.0, color: "Grey" }, + color: blue[200], + }, + name: "best trials", + mode: "markers", + }, + { + type: "scatter", + x: xValues.filter((_, i) => !bestTrialIndices.includes(i)), + y: yValues.filter((_, i) => !bestTrialIndices.includes(i)), + marker: { line: { width: 2.0, color: "Grey" }, color: "black" }, + name: "others", + mode: "markers", + }, + ] plotly.react(plotDomId, plotData, layout) }