Add Hovertext to history plot

tslib/react/src/components/PlotHistory.tsx

@@ -18,6 +18,7 @@ import * as plotly from "plotly.js-dist-min"
 import { ChangeEvent, FC, useEffect, useState } from "react"
 
 import { useGraphComponentState } from "../hooks/useGraphComponentState"
+import { makeHovertext } from "../utils/graph"
 import {
   Target,
   useFilteredTrialsFromStudies,
@@ -332,6 +333,10 @@ const plotHistory = (
         infeasibleTrials.push(t)
       }
     }
+    const hovertemplate =
+      infeasibleTrials.length === 0
+        ? "%{text}<extra>Trial</extra>"
+        : "%{text}<extra>Feasible Trial</extra>"
     plotData.push({
       x: feasibleTrials.map(getAxisX),
       y: feasibleTrials.map(
@@ -343,6 +348,8 @@ const plotHistory = (
       },
       mode: "markers",
       type: "scatter",
+      text: feasibleTrials.map((t) => makeHovertext(t)),
+      hovertemplate: hovertemplate,
     })
 
     const objectiveId = target.getObjectiveId()
@@ -411,6 +418,8 @@ const plotHistory = (
       },
       mode: "markers",
       type: "scatter",
+      text: infeasibleTrials.map((t) => makeHovertext(t)),
+      hovertemplate: "%{text}<extra>Infeasible Trial</extra>",
       showlegend: false,
     })
   }

tslib/react/src/utils/graph.ts

@@ -0,0 +1,21 @@
+import * as Optuna from "@optuna/types"
+
+export const makeHovertext = (trial: Optuna.Trial): string => {
+  return JSON.stringify(
+    {
+      number: trial.number,
+      values: trial.values,
+      params: trial.params
+        .map((p) => [p.name, p.param_external_value])
+        .reduce(
+          (obj, [key, value]) => {
+            obj[key as string] = value
+            return obj
+          },
+          {} as Record<string, Optuna.CategoricalChoiceType>
+        ),
+    },
+    undefined,
+    "  "
+  ).replace(/\n/g, "<br>")
+}