Implement backend rendering of pareto front plot

optuna_dashboard/_app.py

@@ -287,6 +287,8 @@ def create_app(
             fig = optuna.visualization.plot_timeline(study)
         elif plot_type == "param_importances":
             fig = optuna.visualization.plot_param_importances(study)
+        elif plot_type == "pareto_front":
+            fig = optuna.visualization.plot_pareto_front(study)
         else:
             response.status = 404  # Not found
             return {"reason": f"plot_type={plot_type} is not supported."}

optuna_dashboard/ts/apiClient.ts

@@ -454,6 +454,7 @@ export enum PlotType {
   EDF = "edf",
   Timeline = "timeline",
   ParamImportances = "param_importances",
+  ParetoFront = "pareto_front",
 }
 export const getPlotAPI = (
   studyId: number,

optuna_dashboard/ts/components/GraphParetoFront.tsx

@@ -14,11 +14,44 @@ import {
 import { makeHovertext } from "../graphUtil"
 import { usePlotlyColorTheme } from "../state"
 import { useNavigate } from "react-router-dom"
+import { getPlotAPI, PlotType } from "../apiClient"
+import { useBackendRender } from "../state"
 
 const plotDomId = "graph-pareto-front"
 
 export const GraphParetoFront: FC<{
   study: StudyDetail | null
+}> = ({ study = null }) => {
+  if (useBackendRender()) {
+    return <GraphParetoFrontBackend study={study} />
+  } else {
+    return <GraphParetoFrontFrontend study={study} />
+  }
+}
+
+const GraphParetoFrontBackend: FC<{
+  study: StudyDetail | null
+}> = ({ study = null }) => {
+  const studyId = study?.id
+  const numCompletedTrials =
+    study?.trials.filter((t) => t.state === "Complete").length || 0
+  useEffect(() => {
+    if (studyId === undefined) {
+      return
+    }
+    getPlotAPI(studyId, PlotType.ParetoFront)
+      .then(({ data, layout }) => {
+        plotly.react(plotDomId, data, layout)
+      })
+      .catch((err) => {
+        console.error(err)
+      })
+  }, [studyId, numCompletedTrials])
+  return <Box id={plotDomId} sx={{ height: "450px" }} />
+}
+
+const GraphParetoFrontFrontend: FC<{
+  study: StudyDetail | null
 }> = ({ study = null }) => {
   const theme = useTheme()
   const colorTheme = usePlotlyColorTheme(theme.palette.mode)