From d4f8ebda1c28e0e66e2b9a5c68bf1fd52d6b052f Mon Sep 17 00:00:00 2001
From: keisuke-umezawa <keisuke.umezawa@gmail.com>
Date: Sun, 9 Jul 2023 23:30:55 +0900
Subject: [PATCH 1/2] Calculate all elements of timeline plot and set xasis and
 yaxis to show latest elements

---
 .../ts/components/GraphTimeline.tsx           | 35 +++++++++++++++----
 1 file changed, 29 insertions(+), 6 deletions(-)

diff --git a/optuna_dashboard/ts/components/GraphTimeline.tsx b/optuna_dashboard/ts/components/GraphTimeline.tsx
index 13a64949..cb9c38bf 100644
--- a/optuna_dashboard/ts/components/GraphTimeline.tsx
+++ b/optuna_dashboard/ts/components/GraphTimeline.tsx
@@ -38,7 +38,17 @@ export const GraphTimeline: FC<{
 }
 
 const plotTimeline = (trials: Trial[], mode: string) => {
-  const lastTrials = trials.slice(-maxBars) // Only show last elements
+  if (document.getElementById(plotDomId) === null) {
+    return
+  }
+
+  if (trials.length === 0) {
+    plotly.react(plotDomId, [], {
+      template: mode === "dark" ? plotlyDarkTemplate : {},
+    })
+    return
+  }
+
   const cm: Record<TrialState, string> = {
     Complete: "blue",
     Fail: "red",
@@ -47,10 +57,21 @@ const plotTimeline = (trials: Trial[], mode: string) => {
     Waiting: "gray",
   }
 
-  if (document.getElementById(plotDomId) === null) {
-    return
-  }
-
+  const lastTrials = trials.slice(-maxBars) // To only show last elements
+  const minDatetime = new Date(
+    Math.min(
+      ...lastTrials.map(
+        (t) => t.datetime_start?.getTime() ?? new Date().getTime()
+      )
+    )
+  )
+  const maxDatetime = new Date(
+    Math.max(
+      ...lastTrials.map(
+        (t) => t.datetime_start?.getTime() ?? minDatetime.getTime()
+      )
+    )
+  )
   const layout: Partial<plotly.Layout> = {
     margin: {
       l: 50,
@@ -61,16 +82,18 @@ const plotTimeline = (trials: Trial[], mode: string) => {
     xaxis: {
       title: "Datetime",
       type: "date",
+      range: [minDatetime.toISOString(), maxDatetime.toISOString()],
     },
     yaxis: {
       title: "Trial",
+      range: [lastTrials[0].number, lastTrials[0].number + lastTrials.length],
     },
     template: mode === "dark" ? plotlyDarkTemplate : {},
   }
 
   const traces: Partial<plotly.PlotData>[] = []
   for (const s of Object.keys(cm) as TrialState[]) {
-    const bars = lastTrials.filter((t) => t.state === s)
+    const bars = trials.filter((t) => t.state === s)
     if (bars.length === 0) {
       continue
     }

From d43ee7480c355dff8febb5673067922271618669 Mon Sep 17 00:00:00 2001
From: keisuke-umezawa <keisuke.umezawa@gmail.com>
Date: Tue, 18 Jul 2023 18:27:22 +0900
Subject: [PATCH 2/2] Use uirevision

---
 optuna_dashboard/ts/components/GraphTimeline.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/optuna_dashboard/ts/components/GraphTimeline.tsx b/optuna_dashboard/ts/components/GraphTimeline.tsx
index cb9c38bf..68afe0fc 100644
--- a/optuna_dashboard/ts/components/GraphTimeline.tsx
+++ b/optuna_dashboard/ts/components/GraphTimeline.tsx
@@ -88,6 +88,7 @@ const plotTimeline = (trials: Trial[], mode: string) => {
       title: "Trial",
       range: [lastTrials[0].number, lastTrials[0].number + lastTrials.length],
     },
+    uirevision: "true",
     template: mode === "dark" ? plotlyDarkTemplate : {},
   }