From 98bad06825616b87579fb9dd2b2e4b2121b506db Mon Sep 17 00:00:00 2001
From: keisuke-umezawa <keisuke.umezawa@gmail.com>
Date: Mon, 9 Jan 2023 00:13:21 +0900
Subject: [PATCH] Add error handling

---
 optuna_dashboard/_app.py                      | 24 ++++++++++++++-----
 optuna_dashboard/ts/action.ts                 |  7 +++---
 optuna_dashboard/ts/apiClient.ts              |  4 ++--
 optuna_dashboard/ts/components/TrialTable.tsx | 14 ++++-------
 4 files changed, 28 insertions(+), 21 deletions(-)

diff --git a/optuna_dashboard/_app.py b/optuna_dashboard/_app.py
index 71262347..9cb37cff 100644
--- a/optuna_dashboard/_app.py
+++ b/optuna_dashboard/_app.py
@@ -411,18 +411,30 @@ def create_app(storage: BaseStorage, debug: bool = False) -> Bottle:
         response.status = 204  # No content
         return {}
 
-    @app.put("/api/studies/<study_id:int>/<trial_id:int>")
+    @app.post("/api/studies/<study_id:int>/<trial_id:int>/tell")
     @json_api_view
-    def save_trial_value(study_id: int, trial_id: int) -> BottleViewReturn:
-        value = float(request.json.get("value", None))
+    def tell_trial_value(study_id: int, trial_id: int) -> BottleViewReturn:
+        try:
+            value = float(request.json.get("value", None))
+        except ValueError:
+            response.status = 400  # Bad request
+            return {"reason": "You need to pass float castable value"}
+ 
         try:
             study_name = storage.get_study_name_from_id(study_id)
-            study = optuna.load_study(storage=storage, study_name=study_name)
         except KeyError:
             response.status = 404  # Not found
             return {"reason": f"study_id={study_id} is not found"}
-        study.tell(trial_id, value)
-        response.status = 204  # No content
+
+        study = optuna.load_study(storage=storage, study_name=study_name)
+
+        try:
+            study.tell(trial_id, value)
+        except Exception as e:
+            response.status = 400  # Bad request
+            return {"reason": e.args}
+
+        response.status = 201
         return {}
 
     @app.put("/api/studies/<study_id:int>/<trial_id:int>/note")
diff --git a/optuna_dashboard/ts/action.ts b/optuna_dashboard/ts/action.ts
index 14eb48e7..320eb52f 100644
--- a/optuna_dashboard/ts/action.ts
+++ b/optuna_dashboard/ts/action.ts
@@ -269,16 +269,17 @@ export const actionCreator = () => {
   const saveTrialValue = (
     studyId: number,
     trialId: number,
-    value: number
+    value: string
   ) => {
     saveTrialValueAPI(studyId, trialId, value)
       .then(() => {
-        enqueueSnackbar(`Success to update trial value (id=${studyId})`, {
+        enqueueSnackbar(`Success to update trial value (id=${trialId}, value=${value})`, {
           variant: "success",
         })
       })
       .catch((err) => {
-        enqueueSnackbar(`Failed to update trial value (id=${studyId})`, {
+        const reason = err.response?.data.reason
+        enqueueSnackbar(`Failed to update trial value (id=${trialId}, value=${value}). Reason: ${reason}`, {
           variant: "error",
         })
         console.log(err)
diff --git a/optuna_dashboard/ts/apiClient.ts b/optuna_dashboard/ts/apiClient.ts
index 2405bf99..f3406e48 100644
--- a/optuna_dashboard/ts/apiClient.ts
+++ b/optuna_dashboard/ts/apiClient.ts
@@ -220,10 +220,10 @@ export const saveTrialNoteAPI = (
 export const saveTrialValueAPI = (
   studyId: number,
   trialId: number,
-  value: number,
+  value: string,
 ): Promise<void> => {
   return axiosInstance
-    .put<void>(`/api/studies/${studyId}/${trialId}`, {value: value})
+    .post<void>(`/api/studies/${studyId}/${trialId}/tell`, {value: value})
     .then((res) => {
       return
     })
diff --git a/optuna_dashboard/ts/components/TrialTable.tsx b/optuna_dashboard/ts/components/TrialTable.tsx
index a7d61358..ed05a7e3 100644
--- a/optuna_dashboard/ts/components/TrialTable.tsx
+++ b/optuna_dashboard/ts/components/TrialTable.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useState } from "react"
+import React, { ChangeEvent, FC, FormEvent, useState } from "react"
 import { Typography, Grid, Box, IconButton } from "@mui/material"
 import LinkIcon from "@mui/icons-material/Link"
 
@@ -268,19 +268,13 @@ export const TrialTable: FC<{
 
   const collapseBody = (index: number) => {
     const [value, setValue] = useState("")
-    const handleSubmit = (e) => {
+    const handleSubmit = (e: FormEvent<HTMLFormElement>): void => {
       e.preventDefault()
-      const v = (+value) as number;
       const studyId = (studyDetail as StudyDetail).id
       const trialId = trials[index].number
-      action.saveTrialValue(studyId, trialId, v)
-      console.log({
-        index,
-        value,
-      })
-
+      action.saveTrialValue(studyId, trialId, value)
     }
-    const handleChangeValue = (e) => {
+    const handleChangeValue = (e: ChangeEvent<HTMLInputElement>): void => {
       setValue(e.target.value)
     }