Remove drop target when leaving a section

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

@@ -894,6 +894,41 @@ describe('App', () => {
     expect(plots[1].style.display).toBe('none')
   })
 
+  it('should remove the drop target after exiting a section after dragging in and out of it', () => {
+    renderAppWithOptionalData({
+      template: complexTemplatePlotsFixture
+    })
+
+    const bottomSection = screen.getByTestId(NewSectionBlock.BOTTOM)
+    const aSingleViewPlot = screen.getByTestId(join('plot_other', 'plot.tsv'))
+
+    dragAndDrop(aSingleViewPlot, bottomSection)
+
+    const movedPlot = screen.getByTestId(join('plot_other', 'plot.tsv'))
+    const otherSingleSection = screen.getByTestId(join('plot_logs', 'loss.tsv'))
+
+    dragEnter(movedPlot, otherSingleSection.id, DragEnterDirection.LEFT)
+
+    const topSection = screen.getByTestId('plots-section_template-single_0')
+
+    let topSectionPlots = within(topSection)
+      .getAllByTestId(/^plot_/)
+      .map(plot => plot.id)
+    expect(topSectionPlots.includes('plot-drop-target')).toBe(true)
+
+    const previousSection = screen.getByTestId(
+      'plots-section_template-single_2'
+    )
+    act(() => {
+      previousSection.dispatchEvent(createBubbledEvent('dragenter'))
+    })
+
+    topSectionPlots = within(topSection)
+      .getAllByTestId(/^plot_/)
+      .map(plot => plot.id)
+    expect(topSectionPlots.includes('plot-drop-target')).toBe(false)
+  })
+
   it('should open a modal with the plot zoomed in when clicking a template plot', () => {
     renderAppWithOptionalData({
       template: complexTemplatePlotsFixture

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

@@ -5,7 +5,7 @@ import {
 } from 'dvc/src/plots/webview/contract'
 import React, { DragEvent, useState, useEffect, useRef } from 'react'
 import cx from 'classnames'
-import { useSelector } from 'react-redux'
+import { useDispatch, useSelector } from 'react-redux'
 import { MessageFromWebviewType } from 'dvc/src/webview/contract'
 import { AddedSection } from './AddedSection'
 import { TemplatePlotsGrid } from './TemplatePlotsGrid'
@@ -17,6 +17,7 @@ import { shouldUseVirtualizedGrid } from '../util'
 import { useNbItemsPerRow } from '../../hooks/useNbItemsPerRow'
 import { PlotsState } from '../../store'
 import { plotDataStore } from '../plotDataStore'
+import { setDraggedOverGroup } from '../../../shared/components/dragDrop/dragDropSlice'
 import { EmptyState } from '../../../shared/components/emptyState/EmptyState'
 
 export enum NewSectionBlock {
@@ -32,6 +33,7 @@ export const TemplatePlots: React.FC = () => {
   const [hoveredSection, setHoveredSection] = useState('')
   const nbItemsPerRow = useNbItemsPerRow(size)
   const shouldSendMessage = useRef(true)
+  const dispatch = useDispatch()
 
   useEffect(() => {
     shouldSendMessage.current = false
@@ -131,6 +133,10 @@ export const TemplatePlots: React.FC = () => {
     setSections(updatedSections)
   }
 
+  const handleEnteringSection = (groupId: string) => {
+    dispatch(setDraggedOverGroup(groupId))
+  }
+
   const newDropSection = {
     acceptedGroups: Object.values(TemplatePlotGroup),
     hoveredSection,
@@ -167,6 +173,7 @@ export const TemplatePlots: React.FC = () => {
               id={groupId}
               data-testid={`plots-section_${groupId}`}
               className={classes}
+              onDragEnter={() => handleEnteringSection(groupId)}
             >
               <TemplatePlotsGrid
                 entries={section.entries}

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

@@ -8,7 +8,7 @@ import React, {
 } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { DragEnterDirection, getDragEnterDirection } from './util'
-import { changeRef } from './dragDropSlice'
+import { changeRef, setDraggedOverGroup } from './dragDropSlice'
 import styles from './styles.module.scss'
 import { DropTarget } from './DropTarget'
 import { getIDIndex, getIDWithoutIndex } from '../../../util/ids'
@@ -72,7 +72,9 @@ export const DragDropContainer: React.FC<DragDropContainerProps> = ({
   const [draggedOverId, setDraggedOverId] = useState('')
   const [draggedId, setDraggedId] = useState('')
   const [direction, setDirection] = useState(DragEnterDirection.LEFT)
-  const { draggedRef } = useSelector((state: PlotsState) => state.dragAndDrop)
+  const { draggedRef, draggedOverGroup } = useSelector(
+    (state: PlotsState) => state.dragAndDrop
+  )
   const draggedOverIdTimeout = useRef<number>(0)
   const dispatch = useDispatch()
 
@@ -198,6 +200,7 @@ export const DragDropContainer: React.FC<DragDropContainerProps> = ({
       ) {
         setDraggedOverId(id)
         setDirection(getDragEnterDirection(e))
+        dispatch(setDraggedOverGroup(group))
       }
     }
   }
@@ -244,17 +247,19 @@ export const DragDropContainer: React.FC<DragDropContainerProps> = ({
 
   const createItemWithDropTarget = (id: string, item: JSX.Element) => {
     const isEnteringRight = direction === DragEnterDirection.RIGHT
-    const target = (
-      <DropTarget
-        key="drop-target"
-        onDragOver={handleDragOver}
-        onDrop={handleOnDrop}
-        id={id}
-        className={getDropTargetClassNames(isEnteringRight)}
-      >
-        {dropTarget}
-      </DropTarget>
-    )
+    const target =
+      draggedOverGroup === group || draggedRef?.group === group ? (
+        <DropTarget
+          key="drop-target"
+          onDragOver={handleDragOver}
+          onDrop={handleOnDrop}
+          id={id}
+          className={getDropTargetClassNames(isEnteringRight)}
+        >
+          {dropTarget}
+        </DropTarget>
+      ) : null
+
     const itemWithTag = shouldShowOnDrag ? (
       <div key="item" {...item.props} />
     ) : (

webview/src/shared/components/dragDrop/dragDropSlice.ts

@@ -18,9 +18,11 @@ export type GroupStates = {
 export interface DragDropState {
   draggedRef: DraggedInfo
   groups: GroupStates
+  draggedOverGroup: string
 }
 
 export const dragDropInitialState: DragDropState = {
+  draggedOverGroup: '',
   draggedRef: undefined,
   groups: {}
 }
@@ -35,6 +37,12 @@ export const dragDropSlice = createSlice({
         draggedRef: action.payload
       }
     },
+    setDraggedOverGroup: (state, action: PayloadAction<string>) => {
+      return {
+        ...state,
+        draggedOverGroup: action.payload
+      }
+    },
     setGroup: (
       state,
       action: PayloadAction<{ id: string; group: DragDropGroupState }>
@@ -47,6 +55,7 @@ export const dragDropSlice = createSlice({
   }
 })
 
-export const { changeRef, setGroup } = dragDropSlice.actions
+export const { changeRef, setGroup, setDraggedOverGroup } =
+  dragDropSlice.actions
 
 export default dragDropSlice.reducer