From 4e72c5198e729b0f274e36fcb40b0e0e764821a2 Mon Sep 17 00:00:00 2001
From: hrntsm <contact@hrntsm.com>
Date: Thu, 26 Sep 2024 21:28:09 +0900
Subject: [PATCH] Add Hovertext to history

---
 tslib/react/src/components/PlotHistory.tsx |  9 +++++++++
 tslib/react/src/utils/graph.ts             | 21 +++++++++++++++++++++
 2 files changed, 30 insertions(+)
 create mode 100644 tslib/react/src/utils/graph.ts

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}<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,
     })
   }
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<string, Optuna.CategoricalChoiceType>
+        ),
+    },
+    undefined,
+    "  "
+  ).replace(/\n/g, "<br>")
+}