diff --git a/tslib/react/src/components/PlotHistory.tsx b/tslib/react/src/components/PlotHistory.tsx
index 294dc7e0..2ce13094 100644
--- a/tslib/react/src/components/PlotHistory.tsx
+++ b/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}Trial"
+ : "%{text}Feasible Trial"
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}Infeasible Trial",
showlegend: false,
})
}
diff --git a/tslib/react/src/utils/graph.ts b/tslib/react/src/utils/graph.ts
new file mode 100644
index 00000000..9c97acc4
--- /dev/null
+++ b/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
+ ),
+ },
+ undefined,
+ " "
+ ).replace(/\n/g, "
")
+}