From eb4a326317725ab1771de4d739637e4c6e0b554c Mon Sep 17 00:00:00 2001
From: keisuke-umezawa <keisuke.umezawa@gmail.com>
Date: Mon, 8 Jul 2024 16:10:09 +0900
Subject: [PATCH] Use tslib's IntermediateValue in optuna-dashboard

---
 .../ts/components/GraphIntermediateValues.tsx | 96 ++-----------------
 1 file changed, 8 insertions(+), 88 deletions(-)

diff --git a/optuna_dashboard/ts/components/GraphIntermediateValues.tsx b/optuna_dashboard/ts/components/GraphIntermediateValues.tsx
index 3552f64a..eae2c43e 100644
--- a/optuna_dashboard/ts/components/GraphIntermediateValues.tsx
+++ b/optuna_dashboard/ts/components/GraphIntermediateValues.tsx
@@ -1,102 +1,22 @@
-import { Box, Card, CardContent, Typography, useTheme } from "@mui/material"
-import * as plotly from "plotly.js-dist-min"
-import React, { FC, useEffect } from "react"
+import { Card, CardContent } from "@mui/material"
+import { PlotIntermediateValues } from "@optuna/react"
+import React, { FC } from "react"
 import { Trial } from "ts/types/optuna"
-import { usePlotlyColorTheme } from "../state"
-
-const plotDomId = "graph-intermediate-values"
 
 export const GraphIntermediateValues: FC<{
   trials: Trial[]
   includePruned: boolean
   logScale: boolean
 }> = ({ trials, includePruned, logScale }) => {
-  const theme = useTheme()
-  const colorTheme = usePlotlyColorTheme(theme.palette.mode)
-
-  useEffect(() => {
-    plotIntermediateValue(trials, colorTheme, false, !includePruned, logScale)
-  }, [trials, colorTheme, includePruned, logScale])
-
   return (
     <Card>
       <CardContent>
-        <Typography
-          variant="h6"
-          sx={{ margin: "1em 0", fontWeight: theme.typography.fontWeightBold }}
-        >
-          Intermediate values
-        </Typography>
-        <Box component="div" id={plotDomId} sx={{ height: "450px" }} />
+        <PlotIntermediateValues
+          trials={trials}
+          includePruned={includePruned}
+          logScale={logScale}
+        />
       </CardContent>
     </Card>
   )
 }
-
-const plotIntermediateValue = (
-  trials: Trial[],
-  colorTheme: Partial<Plotly.Template>,
-  filterCompleteTrial: boolean,
-  filterPrunedTrial: boolean,
-  logScale: boolean
-) => {
-  if (document.getElementById(plotDomId) === null) {
-    return
-  }
-
-  const layout: Partial<plotly.Layout> = {
-    margin: {
-      l: 50,
-      t: 0,
-      r: 50,
-      b: 0,
-    },
-    yaxis: {
-      title: "Objective Value",
-      type: logScale ? "log" : "linear",
-    },
-    xaxis: {
-      title: "Step",
-      type: "linear",
-    },
-    uirevision: "true",
-    template: colorTheme,
-    legend: {
-      x: 1.0,
-      y: 0.95,
-    },
-  }
-  if (trials.length === 0) {
-    plotly.react(plotDomId, [], layout)
-    return
-  }
-
-  const filteredTrials = trials.filter(
-    (t) =>
-      (!filterCompleteTrial && t.state === "Complete") ||
-      (!filterPrunedTrial &&
-        t.state === "Pruned" &&
-        t.values &&
-        t.values.length > 0) ||
-      t.state === "Running"
-  )
-  const plotData: Partial<plotly.PlotData>[] = filteredTrials.map((trial) => {
-    const isFeasible = trial.constraints.every((c) => c <= 0)
-    return {
-      x: trial.intermediate_values.map((iv) => iv.step),
-      y: trial.intermediate_values.map((iv) => iv.value),
-      marker: { maxdisplayed: 10 },
-      mode: "lines+markers",
-      type: "scatter",
-      name: `trial #${trial.number} ${
-        trial.state === "Running"
-          ? "(running)"
-          : !isFeasible
-            ? "(infeasible)"
-            : ""
-      }`,
-      ...(!isFeasible && { line: { color: "#CCCCCC" } }),
-    }
-  })
-  plotly.react(plotDomId, plotData, layout)
-}