Comparison table drag and drop feedback

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

@@ -182,7 +182,12 @@ describe('App', () => {
     const headerB = screen.getByText('B')
     const headerD = screen.getByText('D')
 
-    dragAndDrop(headerB, headerD, DragEnterDirection.AUTO)
+    dragAndDrop(
+      headerB,
+      // eslint-disable-next-line testing-library/no-node-access
+      headerD.parentElement?.parentElement || headerD,
+      DragEnterDirection.AUTO
+    )
 
     await expectHeaders(['A', 'C', 'D', 'B'])
   })

webview/src/experiments/components/table/Table.test.tsx

@@ -273,15 +273,19 @@ describe('Table', () => {
 
       dragAndDrop(
         screen.getByText('B'),
-        screen.getByText('C'),
+        // eslint-disable-next-line testing-library/no-node-access
+        screen.getByText('C').parentElement?.parentElement ||
+          screen.getByText('C'),
         DragEnterDirection.AUTO
       )
 
       await expectHeaders(['A', 'C', 'B'])
 
       dragAndDrop(
         screen.getByText('A'),
-        screen.getByText('B'),
+        // eslint-disable-next-line testing-library/no-node-access
+        screen.getByText('B').parentElement?.parentElement ||
+          screen.getByText('B'),
         DragEnterDirection.AUTO
       )
 
@@ -370,7 +374,9 @@ describe('Table', () => {
 
       dragAndDrop(
         screen.getByText('process'),
-        screen.getByText('loss'),
+        // eslint-disable-next-line testing-library/no-node-access
+        screen.getByText('loss').parentElement?.parentElement ||
+          screen.getByText('loss'),
         DragEnterDirection.AUTO
       )
 
@@ -382,7 +388,9 @@ describe('Table', () => {
 
       dragAndDrop(
         screen.getByText('summary.json'),
-        screen.getByText('test'),
+        // eslint-disable-next-line testing-library/no-node-access
+        screen.getByText('test').parentElement?.parentElement ||
+          screen.getByText('test'),
         DragEnterDirection.AUTO
       )
 

webview/src/experiments/components/table/TableHeader.tsx

@@ -59,10 +59,7 @@ export const ColumnDragHandle: React.FC<{
         id={column.id}
         disabled={disabled}
         group={'experiment-table'}
-        dropTarget={{
-          element: DropTarget,
-          wrapperTag: 'div'
-        }}
+        dropTarget={DropTarget}
         onDragOver={onDragOver}
         onDragStart={onDragStart}
         onDrop={onDrop}

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

@@ -742,7 +742,7 @@ describe('App', () => {
 
     dragEnter(
       anotherSingleViewPlot,
-      movedSingleViewPlot,
+      movedSingleViewPlot.id,
       DragEnterDirection.LEFT
     )
 
@@ -793,7 +793,7 @@ describe('App', () => {
     const headers = screen.getAllByRole('columnheader')
     const bottomSection = screen.getByTestId(NewSectionBlock.BOTTOM)
 
-    dragEnter(headers[1], bottomSection, DragEnterDirection.LEFT)
+    dragEnter(headers[1], bottomSection.id, DragEnterDirection.LEFT)
 
     const bottomDropIcon = screen.queryByTestId(
       `${NewSectionBlock.BOTTOM}_drop-icon`
@@ -825,7 +825,7 @@ describe('App', () => {
 
     const plots = screen.getAllByTestId(/^plot_/)
 
-    dragEnter(plots[1], plots[0], DragEnterDirection.LEFT)
+    dragEnter(plots[1], plots[0].id, DragEnterDirection.LEFT)
 
     const plotsWithDropTarget = screen.getAllByTestId(/^plot_/)
     expect(plotsWithDropTarget.map(plot => plot.id)).toStrictEqual([
@@ -842,7 +842,7 @@ describe('App', () => {
     })
 
     const plots = screen.getAllByTestId(/^plot_/)
-    dragEnter(plots[0], plots[1], DragEnterDirection.RIGHT)
+    dragEnter(plots[0], plots[1].id, DragEnterDirection.RIGHT)
 
     const plotsWithDropTarget = screen.getAllByTestId(/^plot_/)
 
@@ -862,7 +862,7 @@ describe('App', () => {
     const plots = screen.getAllByTestId(/^plot_/)
     expect(plots[1].style.display).not.toBe('none')
 
-    dragEnter(plots[1], plots[1], DragEnterDirection.LEFT)
+    dragEnter(plots[1], plots[1].id, DragEnterDirection.LEFT)
 
     expect(plots[1].style.display).toBe('none')
   })

webview/src/plots/components/checkpointPlots/CheckpointPlots.tsx

@@ -63,10 +63,7 @@ export const CheckpointPlots: React.FC<CheckpointPlotsProps> = ({
         disabledDropIds={[]}
         items={items as JSX.Element[]}
         group="live-plots"
-        dropTarget={{
-          element: <DropTarget />,
-          wrapperTag: 'div'
-        }}
+        dropTarget={<DropTarget />}
         wrapperComponent={
           useVirtualizedGrid
             ? {

webview/src/plots/components/comparisonTable/ComparisonTable.test.tsx

@@ -380,7 +380,7 @@ describe('ComparisonTable', () => {
       pinSecondColumn()
       const [endingNode, startingNode] = getHeaders()
 
-      dragEnter(startingNode, endingNode, DragEnterDirection.LEFT)
+      dragEnter(startingNode, endingNode.id, DragEnterDirection.LEFT)
 
       const headers = getHeaders()
 
@@ -400,5 +400,50 @@ describe('ComparisonTable', () => {
 
       expect(dragOverEvent.preventDefault).toHaveBeenCalled()
     })
+
+    it('should show the header being dragged in its original position until the drop', () => {
+      renderTable()
+
+      const [endingNode, startingNode] = getHeaders()
+
+      dragEnter(startingNode, endingNode.id, DragEnterDirection.LEFT)
+
+      const [, draggedHeader] = getHeaders()
+
+      expect(draggedHeader.isSameNode(startingNode)).toBe(true)
+    })
+
+    it('should wrap the drop target with the header we are dragging over', () => {
+      renderTable()
+
+      const [endingNode, startingNode] = getHeaders()
+
+      dragEnter(startingNode, endingNode.id, DragEnterDirection.LEFT)
+
+      const [headerWrapper] = getHeaders()
+
+      expect(headerWrapper.childElementCount).toBe(2)
+      expect(headerWrapper.contains(endingNode)).toBe(true)
+    })
+
+    it('should not change the order when dropping a header in its own spot', () => {
+      renderTable()
+
+      const [startingAndEndingNode, secondEndingNode] = getHeaders()
+
+      dragAndDrop(
+        startingAndEndingNode,
+        startingAndEndingNode,
+        DragEnterDirection.RIGHT
+      )
+      expect(mockPostMessage).not.toHaveBeenCalled()
+
+      dragAndDrop(
+        startingAndEndingNode,
+        secondEndingNode,
+        DragEnterDirection.RIGHT
+      )
+      expect(mockPostMessage).toHaveBeenCalled()
+    })
   })
 })

webview/src/plots/components/comparisonTable/ComparisonTableHead.tsx

@@ -52,10 +52,8 @@ export const ComparisonTableHead: React.FC<ComparisonTableHeadProps> = ({
           disabledDropIds={[pinnedColumn]}
           items={items}
           group="comparison"
-          dropTarget={{
-            element: <DropTarget />,
-            wrapperTag: 'th'
-          }}
+          dropTarget={<DropTarget />}
+          shouldShowOnDrag
         />
       </tr>
     </thead>

webview/src/plots/components/comparisonTable/DropTarget.tsx

@@ -1,15 +1,6 @@
 import React from 'react'
-import { Icon } from '../../../shared/components/Icon'
-import { Ellipsis } from '../../../shared/components/icons'
-import styles from '../styles.module.scss'
+import styles from './styles.module.scss'
 
 export const DropTarget: React.FC = () => (
-  <div className={styles.dropTarget} data-testid="comparison-drop-target">
-    <Icon
-      icon={Ellipsis}
-      className={styles.smallDropIcon}
-      width={15}
-      height={15}
-    />
-  </div>
+  <div className={styles.dropTarget} data-testid="comparison-drop-target"></div>
 )

webview/src/plots/components/comparisonTable/styles.module.scss

@@ -157,3 +157,9 @@ $gap: 4px;
 .experimentName {
   color: $meta-cell-color;
 }
+
+.dropTarget {
+  width: 2px;
+  height: 100%;
+  border-right: 2px dashed $accent-color;
+}

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

@@ -92,10 +92,7 @@ export const TemplatePlotsGrid: React.FC<TemplatePlotsGridProps> = ({
       items={items as JSX.Element[]}
       group={groupId}
       onDrop={onDropInSection}
-      dropTarget={{
-        element: <DropTarget />,
-        wrapperTag: 'div'
-      }}
+      dropTarget={<DropTarget />}
       wrapperComponent={
         useVirtualizedGrid
           ? {