Fix drag leave of top and bottom sections (#2320)

* Add a defered drag leave effect to top and bottom sections

* Add test

Author: sroy3

webview/src/plots/components/App.test.tsx

@@ -42,7 +42,12 @@ import { SectionDescription } from './PlotsContainer'
 import { CheckpointPlotsById, plotDataStore } from './plotDataStore'
 import { plotsReducers } from '../store'
 import { vsCodeApi } from '../../shared/api'
-import { createBubbledEvent, dragAndDrop, dragEnter } from '../../test/dragDrop'
+import {
+  createBubbledEvent,
+  dragAndDrop,
+  dragEnter,
+  dragLeave
+} from '../../test/dragDrop'
 import { DragEnterDirection } from '../../shared/components/dragDrop/util'
 import { clearSelection, createWindowTextSelection } from '../../test/selection'
 
@@ -1034,6 +1039,29 @@ describe('App', () => {
     expect(topDropIcon).toBeInTheDocument()
   })
 
+  it('should remove the drop zone when hovering out a new section', () => {
+    renderAppWithOptionalData({
+      template: complexTemplatePlotsFixture
+    })
+
+    const topSection = screen.getByTestId(NewSectionBlock.TOP)
+    const multiViewPlot = screen.getByTestId(
+      join('plot_other', 'multiview.tsv')
+    )
+
+    dragEnter(multiViewPlot, topSection.id, DragEnterDirection.LEFT)
+
+    let topDropIcon = screen.queryByTestId(`${NewSectionBlock.TOP}_drop-icon`)
+
+    expect(topDropIcon).toBeInTheDocument()
+
+    dragLeave(topSection)
+
+    topDropIcon = screen.queryByTestId(`${NewSectionBlock.TOP}_drop-icon`)
+
+    expect(topDropIcon).not.toBeInTheDocument()
+  })
+
   it('should not show a drop target when moving an element from a whole different section (comparison to template)', () => {
     renderAppWithOptionalData({
       comparison: comparisonTableFixture,
@@ -1060,13 +1088,14 @@ describe('App', () => {
 
     const topSection = screen.getByTestId(NewSectionBlock.TOP)
 
-    const dragOverEvent = createBubbledEvent('dragover', {
-      preventDefault: jest.fn()
-    })
-
-    topSection.dispatchEvent(dragOverEvent)
+    act(() => {
+      const dragOverEvent = createBubbledEvent('dragover', {
+        preventDefault: jest.fn()
+      })
 
-    expect(dragOverEvent.preventDefault).toHaveBeenCalled()
+      topSection.dispatchEvent(dragOverEvent)
+      expect(dragOverEvent.preventDefault).toHaveBeenCalled()
+    })
   })
 
   it('should show a drop target before a plot on drag enter from the left', () => {

webview/src/plots/components/templatePlots/AddedSection.tsx

@@ -7,6 +7,7 @@ import { getIDWithoutIndex } from '../../../util/ids'
 import { PlotsState } from '../../store'
 import { Icon } from '../../../shared/components/Icon'
 import { GraphLine } from '../../../shared/components/icons'
+import { useDeferedDragLeave } from '../../../shared/hooks/useDeferedDragLeave'
 
 interface AddedSectionProps {
   id: string
@@ -26,29 +27,37 @@ export const AddedSection: React.FC<AddedSectionProps> = ({
   acceptedGroups
 }) => {
   const { draggedRef } = useSelector((state: PlotsState) => state.dragAndDrop)
+  const { immediateDragEnter, deferedDragLeave } = useDeferedDragLeave()
+
+  const isHovered = hoveredSection === id
+
   const handleDragLeave = () => {
-    setHoveredSection('')
+    deferedDragLeave(() => setHoveredSection(''))
   }
 
-  const handleDragEnter = (e: DragEvent<HTMLElement>) => {
+  const handleDragEnter = () => {
     const draggedGroup = getIDWithoutIndex(draggedRef?.group) || ''
     if (
       acceptedGroups.includes(draggedGroup) &&
       draggedGroup !== closestSection.group
     ) {
-      setHoveredSection(e.currentTarget.id)
+      setHoveredSection(id)
+      immediateDragEnter()
     }
   }
 
-  const isHovered = hoveredSection === id
+  const handleDragOver = (e: DragEvent<HTMLElement>) => {
+    e.preventDefault()
+    immediateDragEnter()
+  }
 
   return (
     <div
       id={id}
       data-testid={id}
       onDragEnter={handleDragEnter}
-      onDragExit={handleDragLeave}
-      onDragOver={(e: DragEvent<HTMLElement>) => e.preventDefault()}
+      onDragLeave={handleDragLeave}
+      onDragOver={handleDragOver}
       onDrop={onDrop}
       draggable
       className={cx(

webview/src/shared/components/dragDrop/DragDropContainer.tsx

@@ -18,6 +18,7 @@ import { Any } from '../../../util/objects'
 import { PlotsState } from '../../../plots/store'
 import { getStyleProperty } from '../../../util/styles'
 import { idToNode } from '../../../util/helpers'
+import { useDeferedDragLeave } from '../../hooks/useDeferedDragLeave'
 
 const AFTER_DIRECTIONS = new Set([
   DragEnterDirection.RIGHT,
@@ -96,34 +97,35 @@ export const DragDropContainer: React.FC<DragDropContainerProps> = ({
     : DragEnterDirection.LEFT
 
   const [draggedOverId, setDraggedOverId] = useState('')
-  const [hoveringSomething, setHoveringSomething] = useState(false)
-  const isHovering = useRef(false)
+  const {
+    hoveringSomething,
+    immediateDragLeave,
+    immediateDragEnter,
+    deferedDragLeave
+  } = useDeferedDragLeave()
   const [draggedId, setDraggedId] = useState('')
   const [direction, setDirection] = useState(defaultDragEnterDirection)
   const { draggedRef, draggedOverGroup } = useSelector(
     (state: PlotsState) => state.dragAndDrop
   )
   const draggedOverIdTimeout = useRef<number>(0)
-  const hoveringTimeout = useRef(0)
   const dispatch = useDispatch()
 
   const cleanup = useCallback(() => {
-    setHoveringSomething(false)
-    isHovering.current = false
+    immediateDragLeave()
     setDraggedOverId('')
     setDraggedId('')
     setDirection(defaultDragEnterDirection)
   }, [
-    setHoveringSomething,
     setDraggedOverId,
     setDirection,
-    defaultDragEnterDirection
+    defaultDragEnterDirection,
+    immediateDragLeave
   ])
 
   useEffect(() => {
     return () => {
       clearTimeout(draggedOverIdTimeout.current)
-      clearTimeout(hoveringTimeout.current)
     }
   }, [])
 
@@ -214,13 +216,9 @@ export const DragDropContainer: React.FC<DragDropContainerProps> = ({
     }
   }
 
-  const setIsHovering = () => {
-    setHoveringSomething(true)
-    isHovering.current = true
-  }
-
   const handleDragEnter = (e: DragEvent<HTMLElement>) => {
-    setIsHovering()
+    immediateDragEnter()
+
     if (isSameGroup(draggedRef?.group, group)) {
       const { id } = e.currentTarget
       if (
@@ -238,7 +236,7 @@ export const DragDropContainer: React.FC<DragDropContainerProps> = ({
   const handleDragOver = (e: DragEvent<HTMLElement>) => {
     e.preventDefault()
     if (draggedOverId && e.currentTarget.id.includes(draggedOverId)) {
-      setIsHovering()
+      immediateDragEnter()
     }
     if (isSameGroup(draggedRef?.group, group)) {
       const { id } = e.currentTarget
@@ -254,12 +252,7 @@ export const DragDropContainer: React.FC<DragDropContainerProps> = ({
   }
 
   const handleDragLeave = () => {
-    isHovering.current = false
-    hoveringTimeout.current = window.setTimeout(() => {
-      if (!isHovering.current) {
-        setHoveringSomething(false)
-      }
-    }, 500)
+    deferedDragLeave()
   }
 
   const buildItem = (id: string, draggable: JSX.Element) => (

webview/src/shared/hooks/useDeferedDragLeave.ts

@@ -0,0 +1,43 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+
+export const useDeferedDragLeave = () => {
+  const [hoveringSomething, setHoveringSomething] = useState(false)
+  const isHovering = useRef(false)
+  const hoveringTimeout = useRef<number>(0)
+
+  useEffect(() => {
+    return () => {
+      clearTimeout(hoveringTimeout.current)
+    }
+  }, [])
+
+  const deferedDragLeave = useCallback(
+    (callback?: () => void) => {
+      isHovering.current = false
+      hoveringTimeout.current = window.setTimeout(() => {
+        if (!isHovering.current) {
+          setHoveringSomething(false)
+          callback?.()
+        }
+      }, 500)
+    },
+    [setHoveringSomething]
+  )
+
+  const immediateDragLeave = useCallback(() => {
+    setHoveringSomething(false)
+    isHovering.current = false
+  }, [setHoveringSomething])
+
+  const immediateDragEnter = useCallback(() => {
+    setHoveringSomething(true)
+    isHovering.current = true
+  }, [setHoveringSomething])
+
+  return {
+    deferedDragLeave,
+    hoveringSomething,
+    immediateDragEnter,
+    immediateDragLeave
+  }
+}

webview/src/test/dragDrop.ts

@@ -82,6 +82,19 @@ export const dragEnter = (
 
   jest.useRealTimers()
 }
+
+export const dragLeave = (draggedOver: HTMLElement) => {
+  jest.useFakeTimers()
+  act(() => {
+    draggedOver.dispatchEvent(createBubbledEvent('dragleave'))
+  })
+
+  act(() => {
+    jest.advanceTimersByTime(501)
+  })
+  jest.useRealTimers()
+}
+
 export const dragAndDrop = (
   startingNode: HTMLElement,
   endingNode: HTMLElement,