From a741cd314954d686bc7155fa7a0cbcae718e05c4 Mon Sep 17 00:00:00 2001
From: c-bata <contact@c-bata.link>
Date: Sun, 15 Jan 2023 00:44:24 +0900
Subject: [PATCH] Support drag over on Trial Detail

---
 optuna_dashboard/ts/components/TrialList.tsx | 31 +++++++++++++++++++-
 1 file changed, 30 insertions(+), 1 deletion(-)

diff --git a/optuna_dashboard/ts/components/TrialList.tsx b/optuna_dashboard/ts/components/TrialList.tsx
index 393bf8c8..4f9f771f 100644
--- a/optuna_dashboard/ts/components/TrialList.tsx
+++ b/optuna_dashboard/ts/components/TrialList.tsx
@@ -1,10 +1,12 @@
 import React, {
   ChangeEventHandler,
+  DragEventHandler,
   FC,
   MouseEventHandler,
   ReactNode,
   useMemo,
   useRef,
+  useState,
 } from "react"
 import {
   Typography,
@@ -312,6 +314,7 @@ const TrialArtifact: FC<{ trial: Trial }> = ({ trial }) => {
   const action = actionCreator()
   const [openDeleteArtifactDialog, renderDeleteArtifactDialog] =
     useDeleteArtifactDialog()
+  const [dragOver, setDragOver] = useState<boolean>(false)
 
   const inputRef = useRef<HTMLInputElement>(null)
   const handleClick: MouseEventHandler = (e) => {
@@ -327,6 +330,25 @@ const TrialArtifact: FC<{ trial: Trial }> = ({ trial }) => {
     }
     action.uploadArtifact(trial.study_id, trial.trial_id, files[0])
   }
+  const handleDrop: DragEventHandler = (e) => {
+    e.stopPropagation()
+    e.preventDefault()
+    const file = e.dataTransfer.files[0]
+    setDragOver(false)
+    action.uploadArtifact(trial.study_id, trial.trial_id, file)
+  }
+  const handleDragOver: DragEventHandler = (e) => {
+    e.stopPropagation()
+    e.preventDefault()
+    e.dataTransfer.dropEffect = "copy"
+    setDragOver(true)
+  }
+  const handleDragLeave: DragEventHandler = (e) => {
+    e.stopPropagation()
+    e.preventDefault()
+    e.dataTransfer.dropEffect = "copy"
+    setDragOver(false)
+  }
   return (
     <>
       <Typography
@@ -444,8 +466,15 @@ const TrialArtifact: FC<{ trial: Trial }> = ({ trial }) => {
             width: "280px",
             minHeight: "210px",
             margin: theme.spacing(0, 1, 1, 0),
-            border: `1px dashed ${"white"}`,
+            border: dragOver
+              ? `3px dashed ${
+                  theme.palette.mode === "dark" ? "white" : "black"
+                }`
+              : `1px solid ${theme.palette.divider}`,
           }}
+          onDragOver={handleDragOver}
+          onDragLeave={handleDragLeave}
+          onDrop={handleDrop}
         >
           <CardActionArea
             onClick={handleClick}