From 17fc765a0dd704d700b8356ecd556ad9809f8e70 Mon Sep 17 00:00:00 2001
From: moririn2528 <strangenoise1@gmail.com>
Date: Fri, 25 Aug 2023 12:58:44 +0900
Subject: [PATCH 1/8] update feedback screen

---
 optuna_dashboard/ts/components/Note.tsx       |  37 +++--
 .../ts/components/PreferentialTrials.tsx      | 150 ++++++++++++++----
 optuna_dashboard/ts/components/TrialList.tsx  |   3 +-
 3 files changed, 143 insertions(+), 47 deletions(-)

diff --git a/optuna_dashboard/ts/components/Note.tsx b/optuna_dashboard/ts/components/Note.tsx
index 051ca10a..bad60cf9 100644
--- a/optuna_dashboard/ts/components/Note.tsx
+++ b/optuna_dashboard/ts/components/Note.tsx
@@ -101,13 +101,15 @@ export const TrialNote: FC<{
   trialId: number
   latestNote: Note
   cardSx?: SxProps<Theme>
-}> = ({ studyId, trialId, latestNote, cardSx }) => {
+  editable: boolean
+}> = ({ studyId, trialId, latestNote, cardSx, editable }) => {
   return (
     <NoteBase
       studyId={studyId}
       trialId={trialId}
       latestNote={latestNote}
       cardSx={cardSx}
+      editable={editable}
     />
   )
 }
@@ -582,7 +584,8 @@ const NoteBase: FC<{
   trialId?: number
   latestNote: Note
   cardSx?: SxProps<Theme>
-}> = ({ studyId, trialId, latestNote, cardSx }) => {
+  editable: boolean
+}> = ({ studyId, trialId, latestNote, cardSx, editable }) => {
   const theme = useTheme()
   const [editorMounted, setEditorMounted] = useState<boolean>(false)
 
@@ -597,21 +600,23 @@ const NoteBase: FC<{
         }}
       >
         <MarkdownRenderer body={latestNote.body || defaultBody} />
-        <IconButton
-          sx={{
-            position: "absolute",
-            top: 0,
-            right: 0,
-            margin: theme.spacing(1),
-          }}
-          onClick={() => {
-            setEditorMounted(true)
-          }}
-        >
-          <EditIcon />
-        </IconButton>
+        {editable && (
+          <IconButton
+            sx={{
+              position: "absolute",
+              top: 0,
+              right: 0,
+              margin: theme.spacing(1),
+            }}
+            onClick={() => {
+              setEditorMounted(true)
+            }}
+          >
+            <EditIcon />
+          </IconButton>
+        )}
       </CardContent>
-      {editorMounted && (
+      {editable && editorMounted && (
         <MarkdownEditorModal
           studyId={studyId}
           trialId={trialId}
diff --git a/optuna_dashboard/ts/components/PreferentialTrials.tsx b/optuna_dashboard/ts/components/PreferentialTrials.tsx
index 9b57586d..9737a756 100644
--- a/optuna_dashboard/ts/components/PreferentialTrials.tsx
+++ b/optuna_dashboard/ts/components/PreferentialTrials.tsx
@@ -1,8 +1,13 @@
 import React, { FC, useState } from "react"
 import { Typography, Box, Button, useTheme } from "@mui/material"
+import ClearIcon from "@mui/icons-material/Clear"
+import IconButton from "@mui/material/IconButton"
+import OpenInFullIcon from "@mui/icons-material/OpenInFull"
+import Modal from "@mui/material/Modal"
 
 import { TrialNote } from "./Note"
 import { actionCreator } from "../action"
+import { TrialListDetail } from "./TrialList"
 
 const PreferentialTrial: FC<{
   trial?: Trial
@@ -12,24 +17,30 @@ const PreferentialTrial: FC<{
   const theme = useTheme()
   const action = actionCreator()
   const trialWidth = 500
+  const trialHeight = 300
+  const [hover, setHover] = useState(false)
+  const [detailShown, setDetailShown] = useState(false)
 
   if (trial == undefined) {
-    return <Box width={trialWidth}></Box>
+    return (
+      <Box
+        sx={{
+          width: trialWidth,
+          minHeight: trialHeight,
+        }}
+      />
+    )
   }
 
   return (
-    <Box sx={{ width: trialWidth, padding: theme.spacing(2, 2, 0, 2) }}>
-      <Typography
-        variant="h4"
-        sx={{
-          marginBottom: theme.spacing(2),
-          fontWeight: theme.typography.fontWeightBold,
-        }}
-      >
-        Trial {trial.number} (trial_id={trial.trial_id})
-      </Typography>
+    <Box
+      sx={{
+        width: trialWidth,
+        minHeight: trialHeight,
+        position: "relative",
+      }}
+    >
       <Button
-        variant="outlined"
         onClick={() => {
           hideTrial()
           const best_trials = studyDetail.best_trials
@@ -37,15 +48,77 @@ const PreferentialTrial: FC<{
             .filter((t) => t !== trial.number)
           action.updatePreference(trial.study_id, best_trials, [trial.number])
         }}
+        onMouseEnter={() => setHover(true)}
+        onMouseLeave={() => setHover(false)}
+        sx={{
+          "::before": {
+            content: '""',
+            position: "absolute",
+            top: 0,
+            left: 0,
+            width: "100%",
+            height: "100%",
+            backgroundColor: theme.palette.mode === "dark" ? "white" : "black",
+            opacity: 0,
+            zIndex: 1,
+            transition: "opacity 0.3s ease-out",
+          },
+          ":hover::before": {
+            opacity: 0.1,
+          },
+        }}
       >
-        Worst
+        <Box
+          sx={{
+            padding: theme.spacing(2, 2, 0, 2),
+            position: "relative",
+          }}
+        >
+          <TrialNote
+            studyId={trial.study_id}
+            trialId={trial.trial_id}
+            latestNote={trial.note}
+            cardSx={{ marginBottom: theme.spacing(2) }}
+            editable={false}
+          />
+        </Box>
+
+        <ClearIcon
+          style={{
+            opacity: hover ? 0.5 : 0,
+            transition: "opacity 0.3s ease-out",
+          }}
+          sx={{
+            position: "absolute",
+            top: "50%",
+            left: "50%",
+            transform: "translate(-50%, -50%)",
+            color: "red",
+            fontSize: trialWidth / 2,
+          }}
+        />
       </Button>
-      <TrialNote
-        studyId={trial.study_id}
-        trialId={trial.trial_id}
-        latestNote={trial.note}
-        cardSx={{ marginBottom: theme.spacing(2) }}
-      />
+      <IconButton onClick={() => setDetailShown(true)}>
+        <OpenInFullIcon />
+      </IconButton>
+      <Modal open={detailShown} onClose={() => setDetailShown(false)}>
+        <Box
+          sx={{
+            position: "relative",
+            width: "70%",
+            left: "15%",
+            top: theme.spacing(8),
+            backgroundColor: theme.palette.mode === "dark" ? "black" : "white",
+          }}
+        >
+          <TrialListDetail
+            trial={trial}
+            isBestTrial={() => false}
+            directions={[]}
+            objectiveNames={[]}
+          />
+        </Box>
+      </Modal>
     </Box>
   )
 }
@@ -61,10 +134,12 @@ export const PreferentialTrials: FC<{ studyDetail: StudyDetail | null }> = ({
   if (studyDetail === null || !studyDetail.is_preferential) {
     return null
   }
+  const theme = useTheme()
   const [displayTrials, setDisplayTrials] = useState<DisplayTrials>({
     numbers: studyDetail.best_trials.map((t) => t.number),
     last_number: Math.max(...studyDetail.best_trials.map((t) => t.number), -1),
   })
+  const [shuffleTrial, setShuffleTrial] = useState(0)
   const new_trails = studyDetail.best_trials.filter(
     (t) =>
       displayTrials.last_number < t.number &&
@@ -102,19 +177,34 @@ export const PreferentialTrials: FC<{ studyDetail: StudyDetail | null }> = ({
       }
     })
   }
+  const shuffleFlag = shuffleTrial + 20 < displayTrials.last_number
+  if (shuffleFlag) {
+    setShuffleTrial(displayTrials.last_number)
+  }
 
   return (
-    <Box sx={{ display: "flex", flexDirection: "row", flexWrap: "wrap" }}>
-      {displayTrials.numbers.map((t, index) => (
-        <PreferentialTrial
-          key={index}
-          trial={studyDetail.best_trials.find((trial) => trial.number === t)}
-          studyDetail={studyDetail}
-          hideTrial={() => {
-            hideTrial(t)
-          }}
-        />
-      ))}
+    <Box>
+      <Typography
+        variant="h4"
+        sx={{
+          marginBottom: theme.spacing(2),
+          fontWeight: theme.typography.fontWeightBold,
+        }}
+      >
+        Which trial is worst?
+      </Typography>
+      <Box sx={{ display: "flex", flexDirection: "row", flexWrap: "wrap" }}>
+        {displayTrials.numbers.map((t, index) => (
+          <PreferentialTrial
+            key={index}
+            trial={studyDetail.best_trials.find((trial) => trial.number === t)}
+            studyDetail={studyDetail}
+            hideTrial={() => {
+              hideTrial(t)
+            }}
+          />
+        ))}
+      </Box>
     </Box>
   )
 }
diff --git a/optuna_dashboard/ts/components/TrialList.tsx b/optuna_dashboard/ts/components/TrialList.tsx
index eb700c13..5ad6e2f8 100644
--- a/optuna_dashboard/ts/components/TrialList.tsx
+++ b/optuna_dashboard/ts/components/TrialList.tsx
@@ -143,7 +143,7 @@ const useIsBestTrial = (
   }, [studyDetail])
 }
 
-const TrialListDetail: FC<{
+export const TrialListDetail: FC<{
   trial: Trial
   isBestTrial: (trialId: number) => boolean
   directions: StudyDirection[]
@@ -301,6 +301,7 @@ const TrialListDetail: FC<{
         trialId={trial.trial_id}
         latestNote={trial.note}
         cardSx={{ marginBottom: theme.spacing(2) }}
+        editable={true}
       />
       <TrialFormWidgets
         trial={trial}

From 073243da66fbdaa4896f6820ff957d95eb1f666c Mon Sep 17 00:00:00 2001
From: moririn2528 <strangenoise1@gmail.com>
Date: Fri, 25 Aug 2023 18:04:38 +0900
Subject: [PATCH 2/8] fix by review

---
 .../ts/components/PreferentialTrials.tsx      | 31 +++++++++----------
 1 file changed, 14 insertions(+), 17 deletions(-)

diff --git a/optuna_dashboard/ts/components/PreferentialTrials.tsx b/optuna_dashboard/ts/components/PreferentialTrials.tsx
index 9737a756..e00f2b91 100644
--- a/optuna_dashboard/ts/components/PreferentialTrials.tsx
+++ b/optuna_dashboard/ts/components/PreferentialTrials.tsx
@@ -18,7 +18,6 @@ const PreferentialTrial: FC<{
   const action = actionCreator()
   const trialWidth = 500
   const trialHeight = 300
-  const [hover, setHover] = useState(false)
   const [detailShown, setDetailShown] = useState(false)
 
   if (trial == undefined) {
@@ -48,8 +47,6 @@ const PreferentialTrial: FC<{
             .filter((t) => t !== trial.number)
           action.updatePreference(trial.study_id, best_trials, [trial.number])
         }}
-        onMouseEnter={() => setHover(true)}
-        onMouseLeave={() => setHover(false)}
         sx={{
           "::before": {
             content: '""',
@@ -84,17 +81,20 @@ const PreferentialTrial: FC<{
         </Box>
 
         <ClearIcon
-          style={{
-            opacity: hover ? 0.5 : 0,
-            transition: "opacity 0.3s ease-out",
-          }}
           sx={{
             position: "absolute",
-            top: "50%",
-            left: "50%",
-            transform: "translate(-50%, -50%)",
+            width: "100%",
+            height: "100%",
+            top: 0,
+            left: 0,
             color: "red",
             fontSize: trialWidth / 2,
+            opacity: 0,
+            transition: "opacity 0.3s ease-out",
+            zIndex: 1,
+            ":hover": {
+              opacity: 0.5,
+            },
           }}
         />
       </Button>
@@ -104,11 +104,12 @@ const PreferentialTrial: FC<{
       <Modal open={detailShown} onClose={() => setDetailShown(false)}>
         <Box
           sx={{
-            position: "relative",
+            position: "absolute",
             width: "70%",
             left: "15%",
             top: theme.spacing(8),
             backgroundColor: theme.palette.mode === "dark" ? "black" : "white",
+            borderRadius: theme.spacing(3),
           }}
         >
           <TrialListDetail
@@ -177,13 +178,9 @@ export const PreferentialTrials: FC<{ studyDetail: StudyDetail | null }> = ({
       }
     })
   }
-  const shuffleFlag = shuffleTrial + 20 < displayTrials.last_number
-  if (shuffleFlag) {
-    setShuffleTrial(displayTrials.last_number)
-  }
 
   return (
-    <Box>
+    <Box padding={theme.spacing(2)}>
       <Typography
         variant="h4"
         sx={{
@@ -191,7 +188,7 @@ export const PreferentialTrials: FC<{ studyDetail: StudyDetail | null }> = ({
           fontWeight: theme.typography.fontWeightBold,
         }}
       >
-        Which trial is worst?
+        Which trial is the worst?
       </Typography>
       <Box sx={{ display: "flex", flexDirection: "row", flexWrap: "wrap" }}>
         {displayTrials.numbers.map((t, index) => (

From b2cb0e064c5eb351d8c4b543445d47e826e4e08e Mon Sep 17 00:00:00 2001
From: c-bata <contact@c-bata.link>
Date: Mon, 28 Aug 2023 11:28:23 +0900
Subject: [PATCH 3/8] Fix the sort of user_attr values

---
 optuna_dashboard/ts/components/TrialTable.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/optuna_dashboard/ts/components/TrialTable.tsx b/optuna_dashboard/ts/components/TrialTable.tsx
index ed930c9c..8fcce63c 100644
--- a/optuna_dashboard/ts/components/TrialTable.tsx
+++ b/optuna_dashboard/ts/components/TrialTable.tsx
@@ -157,7 +157,7 @@ export const TrialTable: FC<{
         if (firstVal === secondVal) {
           return 0
         } else if (firstVal && secondVal) {
-          return firstVal < secondVal ? 1 : -1
+          return Number(firstVal) < Number(secondVal) ? 1 : -1
         } else if (firstVal) {
           return -1
         } else {

From 5f518b416e5dd1886f5b25968ae70c6dbfa907e1 Mon Sep 17 00:00:00 2001
From: moririn2528 <strangenoise1@gmail.com>
Date: Mon, 28 Aug 2023 11:43:50 +0900
Subject: [PATCH 4/8] change component to card

---
 .../ts/components/PreferentialTrials.tsx      | 38 ++++++++++++++-----
 1 file changed, 29 insertions(+), 9 deletions(-)

diff --git a/optuna_dashboard/ts/components/PreferentialTrials.tsx b/optuna_dashboard/ts/components/PreferentialTrials.tsx
index e00f2b91..7554e3d1 100644
--- a/optuna_dashboard/ts/components/PreferentialTrials.tsx
+++ b/optuna_dashboard/ts/components/PreferentialTrials.tsx
@@ -1,5 +1,12 @@
 import React, { FC, useState } from "react"
-import { Typography, Box, Button, useTheme } from "@mui/material"
+import {
+  Typography,
+  Box,
+  useTheme,
+  Card,
+  CardContent,
+  CardActions,
+} from "@mui/material"
 import ClearIcon from "@mui/icons-material/Clear"
 import IconButton from "@mui/material/IconButton"
 import OpenInFullIcon from "@mui/icons-material/OpenInFull"
@@ -32,14 +39,29 @@ const PreferentialTrial: FC<{
   }
 
   return (
-    <Box
+    <Card
       sx={{
         width: trialWidth,
         minHeight: trialHeight,
         position: "relative",
+        margin: theme.spacing(2),
+        padding: 0,
       }}
     >
-      <Button
+      <CardActions>
+        <IconButton
+          sx={{
+            marginLeft: "auto",
+            zIndex: 2,
+          }}
+          onClick={() => setDetailShown(true)}
+          aria-label="show detail"
+        >
+          <OpenInFullIcon />
+        </IconButton>
+      </CardActions>
+      <CardContent
+        aria-label="trial-button"
         onClick={() => {
           hideTrial()
           const best_trials = studyDetail.best_trials
@@ -48,6 +70,8 @@ const PreferentialTrial: FC<{
           action.updatePreference(trial.study_id, best_trials, [trial.number])
         }}
         sx={{
+          padding: 0,
+          position: "relative",
           "::before": {
             content: '""',
             position: "absolute",
@@ -97,10 +121,7 @@ const PreferentialTrial: FC<{
             },
           }}
         />
-      </Button>
-      <IconButton onClick={() => setDetailShown(true)}>
-        <OpenInFullIcon />
-      </IconButton>
+      </CardContent>
       <Modal open={detailShown} onClose={() => setDetailShown(false)}>
         <Box
           sx={{
@@ -120,7 +141,7 @@ const PreferentialTrial: FC<{
           />
         </Box>
       </Modal>
-    </Box>
+    </Card>
   )
 }
 
@@ -140,7 +161,6 @@ export const PreferentialTrials: FC<{ studyDetail: StudyDetail | null }> = ({
     numbers: studyDetail.best_trials.map((t) => t.number),
     last_number: Math.max(...studyDetail.best_trials.map((t) => t.number), -1),
   })
-  const [shuffleTrial, setShuffleTrial] = useState(0)
   const new_trails = studyDetail.best_trials.filter(
     (t) =>
       displayTrials.last_number < t.number &&

From a8c3e082074a518d24dcce89aa85792a037c6fbe Mon Sep 17 00:00:00 2001
From: moririn2528 <strangenoise1@gmail.com>
Date: Mon, 28 Aug 2023 16:14:58 +0900
Subject: [PATCH 5/8] remove duplicate cards

---
 optuna_dashboard/ts/components/Note.tsx       | 39 ++++++++-----------
 .../ts/components/PreferentialTrials.tsx      | 15 +++----
 optuna_dashboard/ts/components/TrialList.tsx  |  1 -
 3 files changed, 22 insertions(+), 33 deletions(-)

diff --git a/optuna_dashboard/ts/components/Note.tsx b/optuna_dashboard/ts/components/Note.tsx
index bad60cf9..09270213 100644
--- a/optuna_dashboard/ts/components/Note.tsx
+++ b/optuna_dashboard/ts/components/Note.tsx
@@ -101,15 +101,13 @@ export const TrialNote: FC<{
   trialId: number
   latestNote: Note
   cardSx?: SxProps<Theme>
-  editable: boolean
-}> = ({ studyId, trialId, latestNote, cardSx, editable }) => {
+}> = ({ studyId, trialId, latestNote, cardSx }) => {
   return (
     <NoteBase
       studyId={studyId}
       trialId={trialId}
       latestNote={latestNote}
       cardSx={cardSx}
-      editable={editable}
     />
   )
 }
@@ -165,7 +163,7 @@ const useConfirmCloseDialog = (
   return [openDialog, renderDialog]
 }
 
-const MarkdownRenderer: FC<{ body: string }> = ({ body }) => (
+export const MarkdownRenderer: FC<{ body: string }> = ({ body }) => (
   <ReactMarkdown
     children={body}
     remarkPlugins={[remarkGfm, remarkMath]}
@@ -584,8 +582,7 @@ const NoteBase: FC<{
   trialId?: number
   latestNote: Note
   cardSx?: SxProps<Theme>
-  editable: boolean
-}> = ({ studyId, trialId, latestNote, cardSx, editable }) => {
+}> = ({ studyId, trialId, latestNote, cardSx }) => {
   const theme = useTheme()
   const [editorMounted, setEditorMounted] = useState<boolean>(false)
 
@@ -600,23 +597,21 @@ const NoteBase: FC<{
         }}
       >
         <MarkdownRenderer body={latestNote.body || defaultBody} />
-        {editable && (
-          <IconButton
-            sx={{
-              position: "absolute",
-              top: 0,
-              right: 0,
-              margin: theme.spacing(1),
-            }}
-            onClick={() => {
-              setEditorMounted(true)
-            }}
-          >
-            <EditIcon />
-          </IconButton>
-        )}
+        <IconButton
+          sx={{
+            position: "absolute",
+            top: 0,
+            right: 0,
+            margin: theme.spacing(1),
+          }}
+          onClick={() => {
+            setEditorMounted(true)
+          }}
+        >
+          <EditIcon />
+        </IconButton>
       </CardContent>
-      {editable && editorMounted && (
+      {editorMounted && (
         <MarkdownEditorModal
           studyId={studyId}
           trialId={trialId}
diff --git a/optuna_dashboard/ts/components/PreferentialTrials.tsx b/optuna_dashboard/ts/components/PreferentialTrials.tsx
index 7554e3d1..4693de5a 100644
--- a/optuna_dashboard/ts/components/PreferentialTrials.tsx
+++ b/optuna_dashboard/ts/components/PreferentialTrials.tsx
@@ -12,9 +12,9 @@ import IconButton from "@mui/material/IconButton"
 import OpenInFullIcon from "@mui/icons-material/OpenInFull"
 import Modal from "@mui/material/Modal"
 
-import { TrialNote } from "./Note"
 import { actionCreator } from "../action"
 import { TrialListDetail } from "./TrialList"
+import { MarkdownRenderer } from "./Note"
 
 const PreferentialTrial: FC<{
   trial?: Trial
@@ -33,6 +33,7 @@ const PreferentialTrial: FC<{
         sx={{
           width: trialWidth,
           minHeight: trialHeight,
+          margin: theme.spacing(2),
         }}
       />
     )
@@ -52,7 +53,6 @@ const PreferentialTrial: FC<{
         <IconButton
           sx={{
             marginLeft: "auto",
-            zIndex: 2,
           }}
           onClick={() => setDetailShown(true)}
           aria-label="show detail"
@@ -72,6 +72,7 @@ const PreferentialTrial: FC<{
         sx={{
           padding: 0,
           position: "relative",
+          overflow: "hidden",
           "::before": {
             content: '""',
             position: "absolute",
@@ -91,17 +92,11 @@ const PreferentialTrial: FC<{
       >
         <Box
           sx={{
-            padding: theme.spacing(2, 2, 0, 2),
+            padding: theme.spacing(2),
             position: "relative",
           }}
         >
-          <TrialNote
-            studyId={trial.study_id}
-            trialId={trial.trial_id}
-            latestNote={trial.note}
-            cardSx={{ marginBottom: theme.spacing(2) }}
-            editable={false}
-          />
+          <MarkdownRenderer body={trial.note.body} />
         </Box>
 
         <ClearIcon
diff --git a/optuna_dashboard/ts/components/TrialList.tsx b/optuna_dashboard/ts/components/TrialList.tsx
index 5ad6e2f8..d5eef864 100644
--- a/optuna_dashboard/ts/components/TrialList.tsx
+++ b/optuna_dashboard/ts/components/TrialList.tsx
@@ -301,7 +301,6 @@ export const TrialListDetail: FC<{
         trialId={trial.trial_id}
         latestNote={trial.note}
         cardSx={{ marginBottom: theme.spacing(2) }}
-        editable={true}
       />
       <TrialFormWidgets
         trial={trial}

From fd59df9c28117508cc8815efdfdcafccd13fb4d3 Mon Sep 17 00:00:00 2001
From: moririn2528 <strangenoise1@gmail.com>
Date: Mon, 28 Aug 2023 18:04:26 +0900
Subject: [PATCH 6/8] fix by review

---
 .../ts/components/PreferentialTrials.tsx      | 125 ++++++++++--------
 1 file changed, 68 insertions(+), 57 deletions(-)

diff --git a/optuna_dashboard/ts/components/PreferentialTrials.tsx b/optuna_dashboard/ts/components/PreferentialTrials.tsx
index 4693de5a..9929590d 100644
--- a/optuna_dashboard/ts/components/PreferentialTrials.tsx
+++ b/optuna_dashboard/ts/components/PreferentialTrials.tsx
@@ -6,6 +6,7 @@ import {
   Card,
   CardContent,
   CardActions,
+  CardActionArea,
 } from "@mui/material"
 import ClearIcon from "@mui/icons-material/Clear"
 import IconButton from "@mui/material/IconButton"
@@ -15,6 +16,7 @@ import Modal from "@mui/material/Modal"
 import { actionCreator } from "../action"
 import { TrialListDetail } from "./TrialList"
 import { MarkdownRenderer } from "./Note"
+import { red } from "@mui/material/colors"
 
 const PreferentialTrial: FC<{
   trial?: Trial
@@ -44,12 +46,12 @@ const PreferentialTrial: FC<{
       sx={{
         width: trialWidth,
         minHeight: trialHeight,
-        position: "relative",
         margin: theme.spacing(2),
         padding: 0,
       }}
     >
       <CardActions>
+        <Typography variant="h5">Trial {trial.number}</Typography>
         <IconButton
           sx={{
             marginLeft: "auto",
@@ -60,70 +62,79 @@ const PreferentialTrial: FC<{
           <OpenInFullIcon />
         </IconButton>
       </CardActions>
-      <CardContent
-        aria-label="trial-button"
-        onClick={() => {
-          hideTrial()
-          const best_trials = studyDetail.best_trials
-            .map((t) => t.number)
-            .filter((t) => t !== trial.number)
-          action.updatePreference(trial.study_id, best_trials, [trial.number])
-        }}
-        sx={{
-          padding: 0,
-          position: "relative",
-          overflow: "hidden",
-          "::before": {
-            content: '""',
-            position: "absolute",
-            top: 0,
-            left: 0,
-            width: "100%",
-            height: "100%",
-            backgroundColor: theme.palette.mode === "dark" ? "white" : "black",
-            opacity: 0,
-            zIndex: 1,
-            transition: "opacity 0.3s ease-out",
-          },
-          ":hover::before": {
-            opacity: 0.1,
-          },
-        }}
-      >
-        <Box
-          sx={{
-            padding: theme.spacing(2),
-            position: "relative",
+      <CardActionArea>
+        <CardContent
+          aria-label="trial-button"
+          onClick={() => {
+            hideTrial()
+            const best_trials = studyDetail.best_trials
+              .map((t) => t.number)
+              .filter((t) => t !== trial.number)
+            action.updatePreference(trial.study_id, best_trials, [trial.number])
           }}
-        >
-          <MarkdownRenderer body={trial.note.body} />
-        </Box>
-
-        <ClearIcon
           sx={{
-            position: "absolute",
-            width: "100%",
-            height: "100%",
-            top: 0,
-            left: 0,
-            color: "red",
-            fontSize: trialWidth / 2,
-            opacity: 0,
-            transition: "opacity 0.3s ease-out",
-            zIndex: 1,
-            ":hover": {
-              opacity: 0.5,
+            padding: 0,
+            position: "relative",
+            overflow: "hidden",
+            "::before": {
+              content: '""',
+              position: "absolute",
+              top: 0,
+              left: 0,
+              width: "100%",
+              height: "100%",
+              backgroundColor:
+                theme.palette.mode === "dark" ? "white" : "black",
+              opacity: 0,
+              zIndex: 1,
+              transition: "opacity 0.3s ease-out",
+            },
+            ":hover::before": {
+              opacity: 0.2,
             },
           }}
-        />
-      </CardContent>
+        >
+          <Box
+            sx={{
+              padding: theme.spacing(2),
+            }}
+          >
+            <MarkdownRenderer body={trial.note.body} />
+          </Box>
+
+          <ClearIcon
+            sx={{
+              position: "absolute",
+              width: "100%",
+              height: "100%",
+              top: 0,
+              left: 0,
+              color: red[600],
+              opacity: 0,
+              transition: "opacity 0.3s ease-out",
+              zIndex: 1,
+              ":hover": {
+                opacity: 0.3,
+                filter:
+                  theme.palette.mode === "dark"
+                    ? "brightness(1.1)"
+                    : "brightness(1.7)",
+              },
+            }}
+          />
+        </CardContent>
+      </CardActionArea>
       <Modal open={detailShown} onClose={() => setDetailShown(false)}>
         <Box
           sx={{
             position: "absolute",
-            width: "70%",
-            left: "15%",
-            top: theme.spacing(8),
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            width: "80%",
+            maxHeight: "90%",
+            margin: "auto",
             backgroundColor: theme.palette.mode === "dark" ? "black" : "white",
             borderRadius: theme.spacing(3),
           }}

From a570518c96128514dc55c1970eb2a0918e35ab13 Mon Sep 17 00:00:00 2001
From: moririn2528 <strangenoise1@gmail.com>
Date: Mon, 28 Aug 2023 18:09:07 +0900
Subject: [PATCH 7/8] minor fix

---
 optuna_dashboard/ts/components/PreferentialTrials.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/optuna_dashboard/ts/components/PreferentialTrials.tsx b/optuna_dashboard/ts/components/PreferentialTrials.tsx
index 9929590d..b629bc4a 100644
--- a/optuna_dashboard/ts/components/PreferentialTrials.tsx
+++ b/optuna_dashboard/ts/components/PreferentialTrials.tsx
@@ -141,7 +141,7 @@ const PreferentialTrial: FC<{
         >
           <TrialListDetail
             trial={trial}
-            isBestTrial={() => false}
+            isBestTrial={() => true}
             directions={[]}
             objectiveNames={[]}
           />

From 3acd952fc2fdb269c1653f60e90f67a3fd46135d Mon Sep 17 00:00:00 2001
From: moririn2528 <strangenoise1@gmail.com>
Date: Mon, 28 Aug 2023 18:17:39 +0900
Subject: [PATCH 8/8] minor fix

---
 .../ts/components/PreferentialTrials.tsx      | 21 +++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)

diff --git a/optuna_dashboard/ts/components/PreferentialTrials.tsx b/optuna_dashboard/ts/components/PreferentialTrials.tsx
index b629bc4a..27219a56 100644
--- a/optuna_dashboard/ts/components/PreferentialTrials.tsx
+++ b/optuna_dashboard/ts/components/PreferentialTrials.tsx
@@ -135,16 +135,25 @@ const PreferentialTrial: FC<{
             width: "80%",
             maxHeight: "90%",
             margin: "auto",
+            overflow: "hidden",
             backgroundColor: theme.palette.mode === "dark" ? "black" : "white",
             borderRadius: theme.spacing(3),
           }}
         >
-          <TrialListDetail
-            trial={trial}
-            isBestTrial={() => true}
-            directions={[]}
-            objectiveNames={[]}
-          />
+          <Box
+            sx={{
+              width: "100%",
+              height: "100%",
+              overflow: "auto",
+            }}
+          >
+            <TrialListDetail
+              trial={trial}
+              isBestTrial={() => true}
+              directions={[]}
+              objectiveNames={[]}
+            />
+          </Box>
         </Box>
       </Modal>
     </Card>