From b641ae5e19cf776d350cb85bce10b3246ee621f7 Mon Sep 17 00:00:00 2001
From: c-bata <contact@c-bata.link>
Date: Thu, 5 Jan 2023 11:54:36 +0900
Subject: [PATCH 1/2] Change Chip's colors and show durations

---
 optuna_dashboard/ts/components/TrialList.tsx | 27 +++++++++++++++-----
 1 file changed, 20 insertions(+), 7 deletions(-)

diff --git a/optuna_dashboard/ts/components/TrialList.tsx b/optuna_dashboard/ts/components/TrialList.tsx
index cf56ff79..c3b90b0a 100644
--- a/optuna_dashboard/ts/components/TrialList.tsx
+++ b/optuna_dashboard/ts/components/TrialList.tsx
@@ -31,11 +31,11 @@ type Color =
 
 const getChipColor = (state: TrialState): Color => {
   if (state === "Complete") {
-    return "success"
+    return "primary"
   } else if (state === "Running") {
-    return "secondary"
+    return "default"
   } else if (state === "Waiting") {
-    return "secondary"
+    return "default"
   } else if (state === "Pruned") {
     return "warning"
   } else if (state === "Fail") {
@@ -93,6 +93,14 @@ export const TrialList: FC<{
   let content = null
   if (trials.length > selected) {
     const trial = trials[selected]
+
+    const startMs = trial.datetime_start?.getTime()
+    const completeMs = trial.datetime_complete?.getTime()
+    let duration = ""
+    if (startMs !== undefined && completeMs !== undefined) {
+      duration = (completeMs - startMs).toString()
+    }
+
     content = (
       <>
         <Card sx={{ margin: theme.spacing(2) }}>
@@ -107,17 +115,22 @@ export const TrialList: FC<{
                 sx={{ marginRight: theme.spacing(1) }}
               />
               {isBestTrial(trial.trial_id) ? (
-                <Chip label={"Best Trial"} color="primary" />
+                <Chip label={"Best Trial"} color="secondary" />
               ) : null}
             </Box>
             <Typography>
-              Values:{" "}
+              Values: [
               {trial.values?.map((v) => v.toString()).join(" ") || "None"}
+              ]
             </Typography>
             <Typography>
               Params = [
-              {trial.params.map((p) => `${p.name}: ${p.value}`).join(", ")}]
+              {trial.params.map((p) => `${p.name}: ${p.value}`).join(", ")}
+              ]
             </Typography>
+            <Typography>Started At = {trial?.datetime_start ? trial?.datetime_start.toString() : null}</Typography>
+            <Typography>Completed At = {trial?.datetime_complete ? trial?.datetime_complete.toString() : null}</Typography>
+            <Typography>Duration = {duration} ms</Typography>
           </CardContent>
         </Card>
         <TrialNote
@@ -207,7 +220,7 @@ export const TrialList: FC<{
                     {isBestTrial(trial.trial_id) ? (
                       <Chip
                         label={"Best Trial"}
-                        color="primary"
+                        color="secondary"
                         sx={{ marginLeft: theme.spacing(1) }}
                         size="small"
                       />

From ee26d33df43afdf05bc07de84088ae8672e98e9e Mon Sep 17 00:00:00 2001
From: c-bata <contact@c-bata.link>
Date: Thu, 5 Jan 2023 22:22:15 +0900
Subject: [PATCH 2/2] Run prettier

---
 optuna_dashboard/ts/components/TrialList.tsx | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/optuna_dashboard/ts/components/TrialList.tsx b/optuna_dashboard/ts/components/TrialList.tsx
index c3b90b0a..89b37e29 100644
--- a/optuna_dashboard/ts/components/TrialList.tsx
+++ b/optuna_dashboard/ts/components/TrialList.tsx
@@ -120,16 +120,22 @@ export const TrialList: FC<{
             </Box>
             <Typography>
               Values: [
-              {trial.values?.map((v) => v.toString()).join(" ") || "None"}
-              ]
+              {trial.values?.map((v) => v.toString()).join(" ") || "None"}]
             </Typography>
             <Typography>
               Params = [
-              {trial.params.map((p) => `${p.name}: ${p.value}`).join(", ")}
-              ]
+              {trial.params.map((p) => `${p.name}: ${p.value}`).join(", ")}]
+            </Typography>
+            <Typography>
+              Started At ={" "}
+              {trial?.datetime_start ? trial?.datetime_start.toString() : null}
+            </Typography>
+            <Typography>
+              Completed At ={" "}
+              {trial?.datetime_complete
+                ? trial?.datetime_complete.toString()
+                : null}
             </Typography>
-            <Typography>Started At = {trial?.datetime_start ? trial?.datetime_start.toString() : null}</Typography>
-            <Typography>Completed At = {trial?.datetime_complete ? trial?.datetime_complete.toString() : null}</Typography>
             <Typography>Duration = {duration} ms</Typography>
           </CardContent>
         </Card>