fixed Feedback screen

optuna_dashboard/ts/components/PreferentialTrials.tsx

@@ -6,7 +6,7 @@ import {
   Card,
   CardContent,
   CardActions,
-  CardActionArea,
+  Button,
   MenuItem,
   Select,
   FormControl,
@@ -31,7 +31,9 @@ const FeedbackContent: FC<{
   trial: Trial
   artifact?: Artifact
   componentId: FeedbackComponentType
-}> = ({ trial, artifact, componentId }) => {
+  width: string
+  minHeight: string
+}> = ({ trial, artifact, componentId, width, minHeight }) => {
   if (componentId === "Note") {
     return <MarkdownRenderer body={trial.note.body} />
   }
@@ -43,8 +45,8 @@ const FeedbackContent: FC<{
       <TrialArtifactContent
         trial={trial}
         artifact={artifact}
-        width={"100%"}
-        height={"100%"}
+        width={width}
+        height={minHeight}
       />
     )
   }
@@ -96,9 +98,10 @@ const PreferentialTrial: FC<{
 }> = ({ trial, studyDetail, hideTrial }) => {
   const theme = useTheme()
   const action = actionCreator()
-  const trialWidth = 500
+  const trialWidth = 400
   const trialHeight = 300
   const [detailShown, setDetailShown] = useState(false)
+  const [buttonHover, setButtonHover] = useState(false)
   const componentId = studyDetail.feedback_component_type ?? "Note"
   const artifactKey = studyDetail.feedback_artifact_key
   const artifactId = trial?.user_attrs.find((a) => a.key === artifactKey)?.value
@@ -115,6 +118,13 @@ const PreferentialTrial: FC<{
       />
     )
   }
+  const onFeedback = () => {
+    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])
+  }
 
   return (
     <Card
@@ -166,72 +176,75 @@ const PreferentialTrial: FC<{
           <OpenInFullIcon />
         </IconButton>
       </CardActions>
-      <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])
-          }}
+      <CardContent
+        aria-label="trial-button"
+        onClick={(e) => {
+          if (e.shiftKey) onFeedback()
+        }}
+        sx={{
+          position: "relative",
+          padding: theme.spacing(2),
+          overflow: "hidden",
+          minHeight: theme.spacing(20),
+        }}
+      >
+        <FeedbackContent
+          trial={trial}
+          artifact={artifact}
+          width={`${trialWidth}px`}
+          minHeight={theme.spacing(25)}
+          componentId={studyDetail.feedback_component_type ?? "Note"}
+        />
+        <Box
           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.2,
-            },
+            position: "absolute",
+            top: 0,
+            left: 0,
+            width: "100%",
+            height: "100%",
+            backgroundColor: theme.palette.mode === "dark" ? "white" : "black",
+            opacity: buttonHover ? 0.2 : 0,
+            zIndex: 1,
+            transition: "opacity 0.3s ease-out",
+            pointerEvents: "none",
           }}
+        />
+        <ClearIcon
+          sx={{
+            position: "absolute",
+            top: 0,
+            left: 0,
+            width: "100%",
+            height: "100%",
+            color: red[600],
+            opacity: buttonHover ? 0.3 : 0,
+            transition: "opacity 0.3s ease-out",
+            zIndex: 1,
+            filter: buttonHover
+              ? theme.palette.mode === "dark"
+                ? "brightness(1.1)"
+                : "brightness(1.7)"
+              : "none",
+            pointerEvents: "none",
+          }}
+        />
+      </CardContent>
+      <CardActions>
+        <Button
+          variant="outlined"
+          onClick={onFeedback}
+          onMouseEnter={() => {
+            setButtonHover(true)
+          }}
+          onMouseLeave={() => {
+            setButtonHover(false)
+          }}
+          color="error"
         >
-          <Box
-            sx={{
-              padding: theme.spacing(2),
-            }}
-          >
-            <FeedbackContent
-              trial={trial}
-              artifact={artifact}
-              componentId={studyDetail.feedback_component_type ?? "Note"}
-            />
-          </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>
+          <ClearIcon />
+          Worst
+        </Button>
+      </CardActions>
       <ModalPage
         displayFlag={detailShown}
         onClose={() => {
@@ -430,7 +443,7 @@ export const PreferentialTrials: FC<{ studyDetail: StudyDetail | null }> = ({
       <Box sx={{ display: "flex", flexDirection: "row", flexWrap: "wrap" }}>
         {displayTrials.numbers.map((t, index) => (
           <PreferentialTrial
-            key={index}
+            key={t == -1 ? -index : t}
             trial={studyDetail.best_trials.find((trial) => trial.number === t)}
             studyDetail={studyDetail}
             hideTrial={() => {

optuna_dashboard/ts/components/TrialList.tsx

@@ -459,13 +459,17 @@ const TrialArtifact: FC<{
   artifact: Artifact
   width: string
   height: string
-  buttons_width: number
 }> = ({ trial, artifact, width, height }) => {
-  const [openDeleteArtifactDialog] = useDeleteArtifactDialog()
+  const [openDeleteArtifactDialog, renderDeleteArtifactDialog] =
+    useDeleteArtifactDialog()
   const theme = useTheme()
-  const is_3d_model =
+  const is3dModel =
     artifact.filename.endsWith(".stl") || artifact.filename.endsWith(".3dm")
-  const actions_width = is_3d_model ? theme.spacing(12) : theme.spacing(8)
+  const canDelete = trial.state === "Running" || trial.state === "Waiting"
+  let actionsCount = 1
+  if (canDelete) actionsCount += 1
+  if (is3dModel) actionsCount += 1
+  const actionsWidth = theme.spacing(actionsCount * 4)
 
   return (
     <Card
@@ -473,7 +477,7 @@ const TrialArtifact: FC<{
       sx={{
         marginBottom: theme.spacing(2),
         width: width,
-        minHeight: "100%",
+        minHeight: height,
         margin: theme.spacing(0, 1, 1, 0),
       }}
     >
@@ -495,29 +499,31 @@ const TrialArtifact: FC<{
             p: theme.spacing(0.5, 0),
             flexGrow: 1,
             wordWrap: "break-word",
-            maxWidth: `calc(100% - ${actions_width})`,
+            maxWidth: `calc(100% - ${actionsWidth})`,
           }}
         >
           {artifact.filename}
         </Typography>
-        {is_3d_model ? (
+        {is3dModel ? (
           <TrialArtifactActions
             trial={trial}
             artifact={artifact}
             sx={{ margin: "auto 0" }}
           />
         ) : null}
-        <IconButton
-          aria-label="delete artifact"
-          size="small"
-          color="inherit"
-          sx={{ margin: "auto 0" }}
-          onClick={() => {
-            openDeleteArtifactDialog(trial.study_id, trial.trial_id, artifact)
-          }}
-        >
-          <DeleteIcon />
-        </IconButton>
+        {canDelete ? (
+          <IconButton
+            aria-label="delete artifact"
+            size="small"
+            color="inherit"
+            sx={{ margin: "auto 0" }}
+            onClick={() => {
+              openDeleteArtifactDialog(trial.study_id, trial.trial_id, artifact)
+            }}
+          >
+            <DeleteIcon />
+          </IconButton>
+        ) : null}
         <IconButton
           aria-label="download artifact"
           size="small"
@@ -529,6 +535,7 @@ const TrialArtifact: FC<{
           <DownloadIcon />
         </IconButton>
       </CardContent>
+      {renderDeleteArtifactDialog()}
     </Card>
   )
 }
@@ -536,7 +543,6 @@ const TrialArtifact: FC<{
 const TrialArtifacts: FC<{ trial: Trial }> = ({ trial }) => {
   const theme = useTheme()
   const action = actionCreator()
-  const [, renderDeleteArtifactDialog] = useDeleteArtifactDialog()
   const [dragOver, setDragOver] = useState<boolean>(false)
 
   const width = "200px"
@@ -648,7 +654,6 @@ const TrialArtifacts: FC<{ trial: Trial }> = ({ trial }) => {
           </Card>
         ) : null}
       </Box>
-      {renderDeleteArtifactDialog()}
     </>
   )
 }