From 94f76ab994dc3063d045ef3fed31d44ccda7a179 Mon Sep 17 00:00:00 2001
From: keisuke-umezawa <keisuke.umezawa@gmail.com>
Date: Tue, 16 May 2023 00:06:34 +0900
Subject: [PATCH] Update xasis and yaxis

---
 .../ts/components/GraphTimeline.tsx           | 28 +++++++++++++++++--
 1 file changed, 25 insertions(+), 3 deletions(-)

diff --git a/optuna_dashboard/ts/components/GraphTimeline.tsx b/optuna_dashboard/ts/components/GraphTimeline.tsx
index 09161bb5..2febe591 100644
--- a/optuna_dashboard/ts/components/GraphTimeline.tsx
+++ b/optuna_dashboard/ts/components/GraphTimeline.tsx
@@ -5,6 +5,20 @@ import { plotlyDarkTemplate } from "./PlotlyDarkMode"
 
 const plotDomId = "graph-timeline"
 
+const makeHovertext = (trial: 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]: value }), {}),
+    },
+    undefined,
+    "  "
+  ).replace(/\n/g, "<br>")
+}
+
 export const GraphTimeline: FC<{
   study: StudyDetail | null
 }> = ({ study }) => {
@@ -61,6 +75,13 @@ const plotTimeline = (trials: Trial[], mode: string) => {
       r: 50,
       b: 0,
     },
+    xaxis: {
+      title: "Datetime",
+      type: "date",
+    },
+    yaxis: {
+      title: "Trial",
+    },
     template: mode === "dark" ? plotlyDarkTemplate : {},
   }
 
@@ -70,18 +91,19 @@ const plotTimeline = (trials: Trial[], mode: string) => {
     if (bars.length === 0) {
       continue
     }
-    const trace: any = {
+    const trace: plotly.Data = {
       type: "bar",
       name: s,
       x: bars.map(
         (b) => b.datetime_complete!.getTime() - b.datetime_start!.getTime()
       ),
       y: bars.map((b) => b.number),
-      base: bars.map((b) => b.datetime_start!.getTime()),
+      base: bars.map((b) => b.datetime_start!.toISOString()),
+      text: bars.map((b) => makeHovertext(b)),
       hovertemplate: "%{text}<extra>" + s + "</extra>",
       orientation: "h",
       marker: { color: cm[s] },
-      textposition: "none",
+      textposition: "none", // Avoid drawing hovertext in a bar.
     }
     plotly.addTraces(plotDomId, trace)
   }