Merge branch 'main' into no-cache-on-main

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

@@ -36,7 +36,7 @@ import { act } from 'react-dom/test-utils'
 import { App } from './App'
 import { NewSectionBlock } from './templatePlots/TemplatePlots'
 import { SectionDescription } from './PlotsContainer'
-import { storeReducers } from '../store'
+import { plotsReducers } from '../store'
 import { vsCodeApi } from '../../shared/api'
 import { createBubbledEvent, dragAndDrop, dragEnter } from '../../test/dragDrop'
 import { DragEnterDirection } from '../../shared/components/dragDrop/util'
@@ -113,7 +113,7 @@ describe('App', () => {
   }
 
   const renderAppWithOptionalData = (data?: PlotsData) => {
-    const store = configureStore({ reducer: storeReducers })
+    const store = configureStore({ reducer: plotsReducers })
     render(
       <Provider store={store}>
         <App />

webview/src/plots/components/App.tsx

@@ -30,12 +30,12 @@ import {
   updateHasSelectedPlots,
   updateSelectedRevisions
 } from './webviewSlice'
-import { AppDispatch } from '../store'
+import { PlotsDispatch } from '../store'
 import { useVsCodeMessaging } from '../../shared/hooks/useVsCodeMessaging'
 
 const dispatchCollapsedSections = (
   sections: SectionCollapsed,
-  dispatch: AppDispatch
+  dispatch: PlotsDispatch
 ) => {
   if (sections) {
     dispatch(setCheckpointPlotsCollapsed(sections[Section.CHECKPOINT_PLOTS]))
@@ -46,7 +46,7 @@ const dispatchCollapsedSections = (
 
 export const feedStore = (
   data: MessageToWebview<PlotsData>,
-  dispatch: AppDispatch
+  dispatch: PlotsDispatch
   // eslint-disable-next-line sonarjs/cognitive-complexity
 ) => {
   if (data.data) {

webview/src/plots/components/Plots.tsx

@@ -11,7 +11,7 @@ import { EmptyState } from '../../shared/components/emptyState/EmptyState'
 import { Modal } from '../../shared/components/modal/Modal'
 import { WebviewWrapper } from '../../shared/components/webviewWrapper/WebviewWrapper'
 import { GetStarted } from '../../shared/components/getStarted/GetStarted'
-import { RootState } from '../store'
+import { PlotsState } from '../store'
 
 // eslint-disable-next-line sonarjs/cognitive-complexity
 const PlotsContent = () => {
@@ -22,15 +22,15 @@ const PlotsContent = () => {
     hasSelectedPlots,
     selectedRevisions,
     zoomedInPlot
-  } = useSelector((state: RootState) => state.webview)
+  } = useSelector((state: PlotsState) => state.webview)
   const hasCheckpointData = useSelector(
-    (state: RootState) => state.checkpoint.hasData
+    (state: PlotsState) => state.checkpoint.hasData
   )
   const hasComparisonData = useSelector(
-    (state: RootState) => state.comparison.hasData
+    (state: PlotsState) => state.comparison.hasData
   )
   const hasTemplateData = useSelector(
-    (state: RootState) => state.template.hasData
+    (state: PlotsState) => state.template.hasData
   )
 
   if (!hasData) {

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

@@ -6,7 +6,7 @@ import { ZoomablePlot } from '../ZoomablePlot'
 import styles from '../styles.module.scss'
 import { withScale } from '../../../util/styles'
 import { plotDataStore } from '../plotDataStore'
-import { RootState } from '../../store'
+import { PlotsState } from '../../store'
 
 interface CheckpointPlotProps {
   id: string
@@ -18,7 +18,7 @@ export const CheckpointPlot: React.FC<CheckpointPlotProps> = ({
   colors
 }) => {
   const plotSnapshot = useSelector(
-    (state: RootState) => state.checkpoint.plotsSnapshots[id]
+    (state: PlotsState) => state.checkpoint.plotsSnapshots[id]
   )
   const [plot, setPlot] = useState(plotDataStore.checkpoint[id])
   const spec = useMemo(() => (id && createSpec(id, colors)) || {}, [id, colors])

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

@@ -16,7 +16,7 @@ import { DropTarget } from '../DropTarget'
 import { VirtualizedGrid } from '../../../shared/components/virtualizedGrid/VirtualizedGrid'
 import { shouldUseVirtualizedGrid } from '../util'
 import { useNbItemsPerRow } from '../../hooks/useNbItemsPerRow'
-import { RootState } from '../../store'
+import { PlotsState } from '../../store'
 
 interface CheckpointPlotsProps {
   plotsIds: string[]
@@ -28,7 +28,7 @@ export const CheckpointPlots: React.FC<CheckpointPlotsProps> = ({
   colors
 }) => {
   const [order, setOrder] = useState(plotsIds)
-  const { size } = useSelector((state: RootState) => state.checkpoint)
+  const { size } = useSelector((state: PlotsState) => state.checkpoint)
   const nbItemsPerRow = useNbItemsPerRow(size)
 
   useEffect(() => {

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

@@ -6,12 +6,12 @@ import { CheckpointPlots } from './CheckpointPlots'
 import { changeSize } from './checkpointPlotsSlice'
 import { PlotsContainer } from '../PlotsContainer'
 import { sendMessage } from '../../../shared/vscode'
-import { RootState } from '../../store'
+import { PlotsState } from '../../store'
 
 export const CheckpointPlotsWrapper: React.FC = () => {
   const dispatch = useDispatch()
   const { plotsIds, size, selectedMetrics, isCollapsed, colors } = useSelector(
-    (state: RootState) => state.checkpoint
+    (state: PlotsState) => state.checkpoint
   )
   const [metrics, setMetrics] = useState<string[]>([])
   const [selectedPlots, setSelectedPlots] = useState<string[]>([])

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

@@ -17,6 +17,7 @@ import comparisonTableFixture from 'dvc/src/test/fixtures/plotsDiff/comparison'
 import plotsRevisionsFixture from 'dvc/src/test/fixtures/plotsDiff/revisions'
 import React from 'react'
 import { Revision } from 'dvc/src/plots/webview/contract'
+import { act } from 'react-dom/test-utils'
 import { ComparisonTable } from './ComparisonTable'
 import { comparisonTableInitialState } from './comparisonTableSlice'
 import {
@@ -26,8 +27,9 @@ import {
 } from '../../../test/dragDrop'
 import { vsCodeApi } from '../../../shared/api'
 import { DragEnterDirection } from '../../../shared/components/dragDrop/util'
-import { storeReducers } from '../../store'
+import { plotsReducers } from '../../store'
 import { webviewInitialState } from '../webviewSlice'
+import { getThemeValue, hexToRGB, ThemeProperty } from '../../../util/styles'
 
 const getHeaders = () => screen.getAllByRole('columnheader')
 
@@ -70,7 +72,7 @@ describe('ComparisonTable', () => {
                 zoomedInPlot: undefined
               }
             },
-            reducer: storeReducers
+            reducer: plotsReducers
           })}
         >
           <ComparisonTable />
@@ -445,5 +447,33 @@ describe('ComparisonTable', () => {
       )
       expect(mockPostMessage).toHaveBeenCalled()
     })
+
+    it('should add and remove the style for the ghost header being dragged', () => {
+      jest.useFakeTimers()
+
+      renderTable()
+
+      const [header] = getHeaders()
+
+      act(() => {
+        header.dispatchEvent(createBubbledEvent('dragstart'))
+      })
+
+      expect(header.style.backgroundColor).toBe(
+        hexToRGB(getThemeValue(ThemeProperty.ACCENT_COLOR))
+      )
+      expect(header.style.color).toBe(
+        hexToRGB(getThemeValue(ThemeProperty.BACKGROUND_COLOR))
+      )
+
+      act(() => {
+        jest.advanceTimersByTime(1)
+      })
+
+      expect(header.style.backgroundColor).toBe('')
+      expect(header.style.color).toBe('')
+
+      jest.useRealTimers()
+    })
   })
 })

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

@@ -11,13 +11,13 @@ import {
 import plotsStyles from '../styles.module.scss'
 import { withScale } from '../../../util/styles'
 import { sendMessage } from '../../../shared/vscode'
-import { RootState } from '../../store'
+import { PlotsState } from '../../store'
 
 export const ComparisonTable: React.FC = () => {
-  const { plots } = useSelector((state: RootState) => state.comparison)
+  const { plots } = useSelector((state: PlotsState) => state.comparison)
 
   const { selectedRevisions: revisions } = useSelector(
-    (state: RootState) => state.webview
+    (state: PlotsState) => state.webview
   )
 
   const pinnedColumn = useRef('')

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

@@ -6,7 +6,8 @@ import styles from './styles.module.scss'
 import { DropTarget } from './DropTarget'
 import { ComparisonTableHeader } from './ComparisonTableHeader'
 import { DragDropContainer } from '../../../shared/components/dragDrop/DragDropContainer'
-import { RootState } from '../../store'
+import { PlotsState } from '../../store'
+import { getThemeValue, ThemeProperty } from '../../../util/styles'
 
 export type ComparisonTableColumn = Revision
 
@@ -24,7 +25,7 @@ export const ComparisonTableHead: React.FC<ComparisonTableHeadProps> = ({
   setPinnedColumn
 }) => {
   const draggedId = useSelector(
-    (state: RootState) => state.dragAndDrop.draggedRef?.itemId
+    (state: PlotsState) => state.dragAndDrop.draggedRef?.itemId
   )
 
   const items = columns.map(({ revision, displayColor, group }) => {
@@ -60,6 +61,10 @@ export const ComparisonTableHead: React.FC<ComparisonTableHeadProps> = ({
           items={items}
           group="comparison"
           dropTarget={<DropTarget />}
+          ghostElemStyle={{
+            backgroundColor: getThemeValue(ThemeProperty.ACCENT_COLOR),
+            color: getThemeValue(ThemeProperty.BACKGROUND_COLOR)
+          }}
           shouldShowOnDrag
         />
       </tr>

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

@@ -13,7 +13,7 @@ import {
   ComparisonTableRowProps
 } from './ComparisonTableRow'
 import styles from '../styles.module.scss'
-import { storeReducers } from '../../store'
+import { plotsReducers } from '../../store'
 
 jest.mock('../../../shared/api')
 
@@ -37,7 +37,7 @@ describe('ComparisonTableRow', () => {
     render(
       <Provider
         store={configureStore({
-          reducer: storeReducers
+          reducer: plotsReducers
         })}
       >
         <table>

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

@@ -8,7 +8,7 @@ import { Icon } from '../../../shared/components/Icon'
 import { RefreshButton } from '../../../shared/components/button/RefreshButton'
 import { sendMessage } from '../../../shared/vscode'
 import { ChevronDown, ChevronRight } from '../../../shared/components/icons'
-import { RootState } from '../../store'
+import { PlotsState } from '../../store'
 
 export interface ComparisonTableRowProps {
   path: string
@@ -24,7 +24,7 @@ export const ComparisonTableRow: React.FC<ComparisonTableRowProps> = ({
   pinnedColumn
 }) => {
   const draggedId = useSelector(
-    (state: RootState) => state.dragAndDrop.draggedRef?.itemId
+    (state: PlotsState) => state.dragAndDrop.draggedRef?.itemId
   )
   const [isShown, setIsShown] = useState(true)
 

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

@@ -4,12 +4,12 @@ import { useSelector, useDispatch } from 'react-redux'
 import { ComparisonTable } from './ComparisonTable'
 import { changeSize } from './comparisonTableSlice'
 import { PlotsContainer } from '../PlotsContainer'
-import { RootState } from '../../store'
+import { PlotsState } from '../../store'
 
 export const ComparisonTableWrapper: React.FC = () => {
   const dispatch = useDispatch()
   const { size, isCollapsed } = useSelector(
-    (state: RootState) => state.comparison
+    (state: PlotsState) => state.comparison
   )
   const handleResize = (size: PlotSize) => {
     dispatch(changeSize(size))

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

@@ -167,3 +167,9 @@ $gap: 4px;
 .draggedColumn {
   opacity: 0.4;
 }
+
+.ghostElem {
+  background-color: $accent-color;
+  opacity: 1;
+  color: $bg-color;
+}

webview/src/plots/components/ribbon/Ribbon.tsx

@@ -7,14 +7,14 @@ import { RibbonBlock } from './RibbonBlock'
 import { sendMessage } from '../../../shared/vscode'
 import { IconButton } from '../../../shared/components/button/IconButton'
 import { performOrderedUpdate } from '../../../util/objects'
-import { RootState } from '../../store'
+import { PlotsState } from '../../store'
 import { Lines, Refresh } from '../../../shared/components/icons'
 
 const MAX_NB_EXP = 7
 
 export const Ribbon: React.FC = () => {
   const revisions = useSelector(
-    (state: RootState) => state.webview.selectedRevisions
+    (state: PlotsState) => state.webview.selectedRevisions
   )
   const [order, setOrder] = useState<string[]>([])
   const reorderId = 'id'

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

@@ -4,7 +4,7 @@ import cx from 'classnames'
 import { TemplatePlotSection } from 'dvc/src/plots/webview/contract'
 import styles from '../styles.module.scss'
 import { getIDWithoutIndex } from '../../../util/ids'
-import { RootState } from '../../store'
+import { PlotsState } from '../../store'
 import { Icon } from '../../../shared/components/Icon'
 import { GraphLine } from '../../../shared/components/icons'
 
@@ -25,7 +25,7 @@ export const AddedSection: React.FC<AddedSectionProps> = ({
   closestSection,
   acceptedGroups
 }) => {
-  const { draggedRef } = useSelector((state: RootState) => state.dragAndDrop)
+  const { draggedRef } = useSelector((state: PlotsState) => state.dragAndDrop)
   const handleDragLeave = () => {
     setHoveredSection('')
   }

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

@@ -15,7 +15,7 @@ import { createIDWithIndex, getIDIndex } from '../../../util/ids'
 import styles from '../styles.module.scss'
 import { shouldUseVirtualizedGrid } from '../util'
 import { useNbItemsPerRow } from '../../hooks/useNbItemsPerRow'
-import { RootState } from '../../store'
+import { PlotsState } from '../../store'
 import { plotDataStore } from '../plotDataStore'
 
 export enum NewSectionBlock {
@@ -25,7 +25,7 @@ export enum NewSectionBlock {
 
 export const TemplatePlots: React.FC = () => {
   const { plotsSnapshot, size } = useSelector(
-    (state: RootState) => state.template
+    (state: PlotsState) => state.template
   )
   const [sections, setSections] = useState<TemplatePlotSection[]>([])
   const [hoveredSection, setHoveredSection] = useState('')

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

@@ -4,12 +4,12 @@ import { useSelector, useDispatch } from 'react-redux'
 import { TemplatePlots } from './TemplatePlots'
 import { changeSize } from './templatePlotsSlice'
 import { PlotsContainer } from '../PlotsContainer'
-import { RootState } from '../../store'
+import { PlotsState } from '../../store'
 
 export const TemplatePlotsWrapper: React.FC = () => {
   const dispatch = useDispatch()
   const { size, isCollapsed } = useSelector(
-    (state: RootState) => state.template
+    (state: PlotsState) => state.template
   )
 
   const handleResize = (size: PlotSize) => {

webview/src/plots/index.tsx

@@ -4,11 +4,11 @@ import { Provider } from 'react-redux'
 import '../shared/style.scss'
 import { App } from './components/App'
 import '../util/wdyr'
-import { store } from './store'
+import { plotsStore } from './store'
 
 const root = ReactDOM.createRoot(document.querySelector('#root') as HTMLElement)
 root.render(
-  <Provider store={store}>
+  <Provider store={plotsStore}>
     <App />
   </Provider>
 )

webview/src/plots/store.ts

@@ -5,17 +5,17 @@ import templatePlotsReducer from './components/templatePlots/templatePlotsSlice'
 import webviewReducer from './components/webviewSlice'
 import dragAndDropReducer from '../shared/components/dragDrop/dragDropSlice'
 
-export const storeReducers = {
+export const plotsReducers = {
   checkpoint: checkpointPlotsReducer,
   comparison: comparisonTableReducer,
   dragAndDrop: dragAndDropReducer,
   template: templatePlotsReducer,
   webview: webviewReducer
 }
 
-export const store = configureStore({
-  reducer: storeReducers
+export const plotsStore = configureStore({
+  reducer: plotsReducers
 })
 
-export type RootState = ReturnType<typeof store.getState>
-export type AppDispatch = typeof store.dispatch
+export type PlotsState = ReturnType<typeof plotsStore.getState>
+export type PlotsDispatch = typeof plotsStore.dispatch