Implement backend rendering of timeline plot

optuna_dashboard/_app.py

@@ -283,6 +283,8 @@ def create_app(
             fig = optuna.visualization.plot_rank(study)
         elif plot_type == "edf":
             fig = optuna.visualization.plot_edf(study)
+        elif plot_type == "timeline":
+            fig = optuna.visualization.plot_timeline(study)
         else:
             response.status = 404  # Not found
             return {"reason": f"plot_type={plot_type} is not supported."}

optuna_dashboard/ts/apiClient.ts

@@ -452,6 +452,7 @@ export enum PlotType {
   ParallelCoordinate = "parallel_coordinate",
   Rank = "rank",
   EDF = "edf",
+  Timeline = "timeline",
 }
 export const getPlotAPI = (
   studyId: number,

optuna_dashboard/ts/components/GraphTimeline.tsx

@@ -3,12 +3,45 @@ import React, { FC, useEffect } from "react"
 import { Card, CardContent, Grid, Typography, useTheme } from "@mui/material"
 import { makeHovertext } from "../graphUtil"
 import { usePlotlyColorTheme } from "../state"
+import { getPlotAPI, PlotType } from "../apiClient"
+import { useBackendRender } from "../state"
 
 const plotDomId = "graph-timeline"
 const maxBars = 100
 
 export const GraphTimeline: FC<{
   study: StudyDetail | null
+}> = ({ study }) => {
+  if (useBackendRender()) {
+    return <GraphTimelineBackend study={study} />
+  } else {
+    return <GraphTimelineFrontend study={study} />
+  }
+}
+
+const GraphTimelineBackend: FC<{
+  study: StudyDetail | null
+}> = ({ study }) => {
+  const studyId = study?.id
+  const numCompletedTrials =
+    study?.trials.filter((t) => t.state === "Complete").length || 0
+  useEffect(() => {
+    if (studyId === undefined) {
+      return
+    }
+    getPlotAPI(studyId, PlotType.Timeline)
+      .then(({ data, layout }) => {
+        plotly.react(plotDomId, data, layout)
+      })
+      .catch((err) => {
+        console.error(err)
+      })
+  }, [studyId, numCompletedTrials])
+  return <Grid item xs={9}> <div id={plotDomId} /> </Grid>
+}
+
+const GraphTimelineFrontend: FC<{
+  study: StudyDetail | null
 }> = ({ study }) => {
   const theme = useTheme()
   const colorTheme = usePlotlyColorTheme(theme.palette.mode)