From 9d16c739f4ccc05670374b9d2f7400d7b4331503 Mon Sep 17 00:00:00 2001
From: Stephanie Roy <stephanie@iterative.ai>
Date: Tue, 27 Sep 2022 15:12:15 -0400
Subject: [PATCH 1/2] Cleanup after drag and drop

---
 .../components/dragDrop/DragDropContainer.tsx | 28 ++++++++++++-------
 1 file changed, 18 insertions(+), 10 deletions(-)

diff --git a/webview/src/shared/components/dragDrop/DragDropContainer.tsx b/webview/src/shared/components/dragDrop/DragDropContainer.tsx
index 1420d6e2a5..b7c7fbc471 100644
--- a/webview/src/shared/components/dragDrop/DragDropContainer.tsx
+++ b/webview/src/shared/components/dragDrop/DragDropContainer.tsx
@@ -109,6 +109,7 @@ export const DragDropContainer: React.FC<DragDropContainerProps> = ({
     (state: PlotsState) => state.dragAndDrop
   )
   const draggedOverIdTimeout = useRef<number>(0)
+  const pickedUp = useRef<boolean>(false)
   const dispatch = useDispatch()
 
   const cleanup = useCallback(() => {
@@ -116,22 +117,32 @@ export const DragDropContainer: React.FC<DragDropContainerProps> = ({
     setDraggedOverId('')
     setDraggedId('')
     setDirection(defaultDragEnterDirection)
+    pickedUp.current = false
+    dispatch(changeRef(undefined))
   }, [
     setDraggedOverId,
     setDirection,
     defaultDragEnterDirection,
-    immediateDragLeave
+    immediateDragLeave,
+    dispatch
   ])
 
   useEffect(() => {
+    const onMove = (e: MouseEvent) => {
+      if (!e.buttons && pickedUp.current) {
+        cleanup()
+      }
+    }
+    document.addEventListener('mousemove', onMove)
     return () => {
       clearTimeout(draggedOverIdTimeout.current)
+      document.removeEventListener('mousemove', onMove)
     }
-  }, [])
+  }, [cleanup])
 
   useEffect(() => {
     cleanup()
-  }, [order, cleanup])
+  }, [cleanup])
 
   useLayoutEffect(() => {
     onLayoutChange?.()
@@ -142,6 +153,7 @@ export const DragDropContainer: React.FC<DragDropContainerProps> = ({
   }
 
   const handleDragStart = (e: DragEvent<HTMLElement>) => {
+    pickedUp.current = true
     const { id } = e.currentTarget
     const idx = order.indexOf(id)
     let toIdx = shouldShowOnDrag ? idx : idx + 1
@@ -189,6 +201,7 @@ export const DragDropContainer: React.FC<DragDropContainerProps> = ({
     dispatch(changeRef(undefined))
 
     onDrop?.(oldDraggedId, draggedRef?.group || '', group, droppedIndex)
+    cleanup()
   }
 
   const handleOnDrop = (e: DragEvent<HTMLElement>) => {
@@ -201,7 +214,7 @@ export const DragDropContainer: React.FC<DragDropContainerProps> = ({
     }, 0)
     const dragged = draggedRef.itemId
     if (dragged === draggedOverId) {
-      dispatch(changeRef(undefined))
+      cleanup()
       return
     }
     const isNew = !order.includes(dragged)
@@ -246,11 +259,6 @@ export const DragDropContainer: React.FC<DragDropContainerProps> = ({
     }
   }
 
-  const handleDragEnd = () => {
-    dispatch(changeRef(undefined))
-    cleanup()
-  }
-
   const handleDragLeave = () => {
     deferedDragLeave()
   }
@@ -262,7 +270,7 @@ export const DragDropContainer: React.FC<DragDropContainerProps> = ({
       ref={(draggable as any).ref}
       {...draggable.props}
       onDragStart={handleDragStart}
-      onDragEnd={handleDragEnd}
+      onDragEnd={cleanup}
       onDragOver={handleDragOver}
       onDragEnter={handleDragEnter}
       onDrop={handleOnDrop}

From f76faaaf820d052c8bb03a287b9515b3937b9b1d Mon Sep 17 00:00:00 2001
From: Stephanie Roy <stephanie@iterative.ai>
Date: Tue, 27 Sep 2022 15:24:54 -0400
Subject: [PATCH 2/2] Remove unecessary cleanups

---
 .../components/dragDrop/DragDropContainer.tsx      | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/webview/src/shared/components/dragDrop/DragDropContainer.tsx b/webview/src/shared/components/dragDrop/DragDropContainer.tsx
index b7c7fbc471..fb697fd892 100644
--- a/webview/src/shared/components/dragDrop/DragDropContainer.tsx
+++ b/webview/src/shared/components/dragDrop/DragDropContainer.tsx
@@ -113,12 +113,14 @@ export const DragDropContainer: React.FC<DragDropContainerProps> = ({
   const dispatch = useDispatch()
 
   const cleanup = useCallback(() => {
-    immediateDragLeave()
-    setDraggedOverId('')
-    setDraggedId('')
-    setDirection(defaultDragEnterDirection)
-    pickedUp.current = false
-    dispatch(changeRef(undefined))
+    if (pickedUp.current) {
+      immediateDragLeave()
+      setDraggedOverId('')
+      setDraggedId('')
+      setDirection(defaultDragEnterDirection)
+      pickedUp.current = false
+      dispatch(changeRef(undefined))
+    }
   }, [
     setDraggedOverId,
     setDirection,