Use plot_param_importances in backend

optuna · Nov 7, 2023 · e135860 · e135860
1 parent e0c89e2
commit e135860
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 0 deletions.
diff --git a/optuna_dashboard/_app.py b/optuna_dashboard/_app.py
@@ -256,6 +256,15 @@ def get_param_importances(study_id: int) -> dict[str, Any]:
             response.status = 400  # Bad request
             return {"reason": str(e)}
 
+    @app.get("/api/studies/<study_id:int>/param_importances_plot")
+    @json_api_view
+    def get_param_importances_plot(study_id: int) -> dict[str, Any]:
+        study = optuna.load_study(
+            study_name=storage.get_study_name_from_id(study_id), storage=storage
+        )
+        fig = optuna.visualization.plot_param_importances(study)
+        return fig.to_json()
+
     @app.put("/api/studies/<study_id:int>/note")
     @json_api_view
     def save_study_note(study_id: int) -> dict[str, Any]:

diff --git a/optuna_dashboard/ts/components/GraphHyperparameterImportances.tsx b/optuna_dashboard/ts/components/GraphHyperparameterImportances.tsx
@@ -6,6 +6,7 @@ import { plotlyDarkTemplate } from "./PlotlyDarkMode"
 import { actionCreator } from "../action"
 import { useParamImportanceValue, useStudyDirections } from "../state"
 const plotDomId = "graph-hyperparameter-importances"
+const plotBackendDomId = "graph-hyperparameter-importances-backend"
 
 export const GraphHyperparameterImportance: FC<{
   studyId: number
@@ -27,6 +28,16 @@ export const GraphHyperparameterImportance: FC<{
     action.updateParamImportance(studyId)
   }, [numCompletedTrials])
 
+  useEffect(() => {
+    fetch(`/api/studies/${studyId}/param_importances_plot`, {mode: 'cors'})
+    .then((response) => response.json())
+    .then((figure) => {
+      plotly.react(plotBackendDomId, figure.data, figure.layout)
+    }).catch((err) => {
+      console.error(err);
+    })
+  }, [numCompletedTrials])
+
   useEffect(() => {
     if (importances !== null && nObjectives === importances.length) {
       plotParamImportance(importances, objectiveNames, theme.palette.mode)
@@ -43,6 +54,7 @@ export const GraphHyperparameterImportance: FC<{
           Hyperparameter Importance
         </Typography>
         <Box id={plotDomId} sx={{ height: graphHeight }} />
+        <Box id={plotBackendDomId} sx={{ height: graphHeight }} />
       </CardContent>
     </Card>
   )