Add drag and drop mode to plots (#4934)

* WIP Add drag and drop mode

* Add drag and drop ode to custom plots

* Fix some tests

* Fix tests

* Self review

* Add tests

* Apply review

* Remove empty optional prop

* Seamless drag and drop mode (#4942)

* Make toggling drag and drop mode seamless

* Add tests

* Fix pplot actions

* Fix drag end event

* Add style to plots in drag and drop mode (#4960)

* Add style to drag and drop mode plots

* Format custom plots titles in drag and drop mode

* Self review

* Add tests

* Fix bug and style

Author: sroy3

extension/src/experiments/columns/collect/metricsAndParams.ts

@@ -16,11 +16,8 @@ import {
   fileHasError,
   MetricsOrParams
 } from '../../../cli/dvc/contract'
-import {
-  buildMetricOrParamPath,
-  FILE_SEPARATOR,
-  METRIC_PARAM_SEPARATOR
-} from '../paths'
+import { buildMetricOrParamPath } from '../paths'
+import { FILE_SEPARATOR, METRIC_PARAM_SEPARATOR } from '../constants'
 
 const collectMetricOrParam = (
   acc: ColumnAccumulator,

extension/src/experiments/columns/constants.ts

@@ -20,3 +20,12 @@ export const DEFAULT_COLUMN_IDS = [
   BRANCH_COLUMN_ID,
   COMMIT_COLUMN_ID
 ]
+
+export const ENCODED_METRIC_PARAM_SEPARATOR = '%2E'
+export const ENCODE_METRIC_PARAM_REGEX = /\./g
+export const DECODE_METRIC_PARAM_REGEX = /%2E/g
+export const METRIC_PARAM_SEPARATOR = '.'
+export const FILE_SEPARATOR = ':'
+export const FILE_SPLIT_REGEX = new RegExp(
+  `([^${FILE_SEPARATOR}]*)(?:${FILE_SEPARATOR}([^${FILE_SEPARATOR}]*))?(?:${FILE_SEPARATOR}(.*))?`
+)

extension/src/experiments/columns/paths.ts

@@ -1,17 +1,15 @@
 import { join } from 'path'
+import {
+  DECODE_METRIC_PARAM_REGEX,
+  ENCODED_METRIC_PARAM_SEPARATOR,
+  ENCODE_METRIC_PARAM_REGEX,
+  FILE_SEPARATOR,
+  FILE_SPLIT_REGEX,
+  METRIC_PARAM_SEPARATOR
+} from './constants'
 import { definedAndNonEmpty } from '../../util/array'
 import { ColumnType } from '../webview/contract'
 
-export const METRIC_PARAM_SEPARATOR = '.'
-const ENCODED_METRIC_PARAM_SEPARATOR = '%2E'
-const ENCODE_METRIC_PARAM_REGEX = /\./g
-const DECODE_METRIC_PARAM_REGEX = /%2E/g
-
-export const FILE_SEPARATOR = ':'
-const FILE_SPLIT_REGEX = new RegExp(
-  `([^${FILE_SEPARATOR}]*)(?:${FILE_SEPARATOR}([^${FILE_SEPARATOR}]*))?(?:${FILE_SEPARATOR}(.*))?`
-)
-
 const encodeColumn = (segment: string) =>
   segment.replace(ENCODE_METRIC_PARAM_REGEX, ENCODED_METRIC_PARAM_SEPARATOR)
 

extension/src/plots/model/collect.ts

@@ -151,10 +151,10 @@ const getCustomPlotData = (
   const updatedSpec = truncateVegaSpecTitles(spec, nbItemsPerRow, height)
 
   return {
+    content: updatedSpec,
     id: getCustomPlotId(metric, param),
     metric,
     param,
-    spec: updatedSpec,
     values
   } as CustomPlotData
 }

extension/src/plots/model/custom.ts

@@ -1,7 +1,7 @@
 import { TopLevelSpec } from 'vega-lite'
 import { getCustomPlotId } from './collect'
 import { Column, ColumnType } from '../../experiments/webview/contract'
-import { FILE_SEPARATOR } from '../../experiments/columns/paths'
+import { FILE_SEPARATOR } from '../../experiments/columns/constants'
 import { ColorScale } from '../webview/contract'
 
 export type CustomPlotsOrderValue = {

extension/src/plots/webview/contract.ts

@@ -94,7 +94,7 @@ export type CustomPlot = {
 }
 
 export type CustomPlotData = CustomPlot & {
-  spec: SpecWithTitles
+  content: SpecWithTitles
 }
 
 export type CustomPlotsData = {

extension/src/test/fixtures/expShow/base/customPlots.ts

@@ -99,7 +99,7 @@ const data: CustomPlotsData = {
       id: 'custom-summary.json:loss-params.yaml:log_file',
       metric: 'summary.json:loss',
       param: 'params.yaml:log_file',
-      spec: {
+      content: {
         $schema: 'https://vega.github.io/schema/vega-lite/v5.json',
         data: { name: 'values' },
         encoding: {
@@ -245,7 +245,7 @@ const data: CustomPlotsData = {
           param: 5
         }
       ],
-      spec: {
+      content: {
         $schema: 'https://vega.github.io/schema/vega-lite/v5.json',
         data: { name: 'values' },
         encoding: {