Merge branch 'main' into conditional-length-comparison-path

demo/requirements.txt

@@ -1,3 +1,3 @@
-dvc[s3]==2.27.2
+dvc[s3]==2.28.0
 torch==1.12.0
 torchvision==0.13.0

extension/src/cli/dvc/constants.ts

@@ -1,5 +1,5 @@
 export const MIN_CLI_VERSION = '2.24.0'
-export const LATEST_TESTED_CLI_VERSION = '2.27.2'
+export const LATEST_TESTED_CLI_VERSION = '2.28.0'
 export const MAX_CLI_VERSION = '3'
 
 export const UNEXPECTED_ERROR_CODE = 255

extension/src/plots/vega/util.test.ts

@@ -1,6 +1,7 @@
 import { Text as VegaText, Title as VegaTitle } from 'vega'
 import { TopLevelSpec } from 'vega-lite'
 import merge from 'lodash.merge'
+import cloneDeep from 'lodash.clonedeep'
 import {
   isMultiViewPlot,
   isMultiViewByCommitPlot,
@@ -15,6 +16,7 @@ import defaultTemplate from '../../test/fixtures/plotsDiff/templates/default'
 import linearTemplate from '../../test/fixtures/plotsDiff/templates/linear'
 import scatterTemplate from '../../test/fixtures/plotsDiff/templates/scatter'
 import smoothTemplate from '../../test/fixtures/plotsDiff/templates/smooth'
+import multiSourceTemplate from '../../test/fixtures/plotsDiff/templates/multiSource'
 import { copyOriginalColors } from '../../experiments/model/status/colors'
 import { PlotSize } from '../webview/contract'
 
@@ -264,6 +266,25 @@ describe('extendVegaSpec', () => {
     expect(updatedSpecString).not.toContain(repeatedTitle)
     expect(updatedSpecString).toContain(truncatedTitle)
   })
+
+  it('should update the multi-source template to remove erroneous shape encoding from the vertical line displayed on hover', () => {
+    const updatedSpec = extendVegaSpec(multiSourceTemplate, PlotSize.LARGE, {
+      color: { domain: [], range: [] },
+      shape: {
+        field: 'field',
+        scale: { domain: [], range: [] }
+      }
+    })
+
+    expect(updatedSpec.encoding).not.toBeUndefined()
+    expect(updatedSpec.layer[1].layer[0].encoding.shape).toBeNull()
+
+    const updatedSpecCopy = cloneDeep(updatedSpec)
+    delete updatedSpecCopy.layer[1].layer[0].encoding.shape
+    delete updatedSpecCopy.encoding
+
+    expect(updatedSpecCopy).toStrictEqual(multiSourceTemplate)
+  })
 })
 
 describe('reverseOfLegendSuppressionUpdate', () => {
@@ -282,17 +303,14 @@ describe('reverseOfLegendSuppressionUpdate', () => {
       shape: {
         field: 'shape-field',
         legend: {
-          disable: true,
-          symbolFillColor: 'blue'
+          disable: true
         },
         scale: { domain: [], range: [] }
       },
       strokeDash: {
         field: 'strokeDash-field',
         legend: {
-          disable: true,
-          symbolFillColor: 'blue',
-          symbolStrokeColor: 'red'
+          disable: true
         },
         scale: { domain: [], range: [] }
       }

extension/src/plots/vega/util.ts

@@ -19,6 +19,7 @@ import {
   RepeatMapping
 } from 'vega-lite/build/src/spec/repeat'
 import { TopLevelUnitSpec } from 'vega-lite/build/src/spec/unit'
+import isEqual from 'lodash.isequal'
 import { ColorScale, PlotSize, Revision } from '../webview/contract'
 import { ShapeEncoding, StrokeDashEncoding } from '../multiSource/constants'
 
@@ -99,44 +100,61 @@ export const getColorScale = (
   return acc.domain.length > 0 ? acc : undefined
 }
 
-export type Encoding = {
-  strokeDash?: StrokeDashEncoding & {
-    legend: {
-      disable: boolean
-      symbolFillColor: string
-      symbolStrokeColor: string
-    }
-  }
-  shape?: ShapeEncoding & {
-    legend: {
-      disable: boolean
-      symbolFillColor: string
-    }
-  }
-  detail?: {
-    field: string
-  }
-  color?: {
-    legend: {
-      disable: boolean
-    }
-    scale: ColorScale
+type LegendDisabled = {
+  legend: {
+    disable: boolean
   }
 }
 
+export type Encoding = {
+  strokeDash?: StrokeDashEncoding & LegendDisabled
+  shape?: ShapeEncoding & LegendDisabled
+  detail?: { field: string }
+  color?: { scale: ColorScale } & LegendDisabled
+}
+
+type ShapePatchUpdate = {
+  layer?: { layer: [{ encoding: Record<string, unknown> }] }[]
+}
+
 type EncodingUpdate = {
   encoding: Encoding
+} & ShapePatchUpdate
+
+const specHasVerticalLineOnHover = (
+  spec: any
+): spec is { layer: { layer: [{ encoding: Record<string, unknown> }] }[] } =>
+  spec.layer?.[1]?.layer?.[0]?.encoding?.x &&
+  isEqual(spec.layer[1].layer[0].mark, {
+    color: 'gray',
+    type: 'rule'
+  })
+
+const patchShapeEncoding = (spec: TopLevelSpec, encoding: Encoding) => {
+  const update: EncodingUpdate = {
+    encoding
+  }
+
+  if (encoding.shape && specHasVerticalLineOnHover(spec)) {
+    update.layer = spec.layer
+    update.layer[1].layer[0].encoding.shape = null
+  }
+
+  return update
 }
 
-export const getSpecEncodingUpdate = ({
-  color,
-  shape,
-  strokeDash
-}: {
-  color?: ColorScale
-  shape?: ShapeEncoding
-  strokeDash?: StrokeDashEncoding
-}): EncodingUpdate => {
+const getSpecEncodingUpdate = (
+  spec: TopLevelSpec,
+  {
+    color,
+    shape,
+    strokeDash
+  }: {
+    color?: ColorScale
+    shape?: ShapeEncoding
+    strokeDash?: StrokeDashEncoding
+  }
+): EncodingUpdate => {
   const encoding: Encoding = {}
   if (color) {
     encoding.color = {
@@ -149,9 +167,7 @@ export const getSpecEncodingUpdate = ({
     encoding.strokeDash = {
       ...strokeDash,
       legend: {
-        disable: true,
-        symbolFillColor: 'transparent',
-        symbolStrokeColor: 'grey'
+        disable: true
       }
     }
   }
@@ -160,16 +176,13 @@ export const getSpecEncodingUpdate = ({
     encoding.shape = {
       ...shape,
       legend: {
-        disable: true,
-        symbolFillColor: 'grey'
+        disable: true
       }
     }
-    encoding.detail = shape
+    encoding.detail = { field: shape.field }
   }
 
-  return {
-    encoding
-  }
+  return patchShapeEncoding(spec, encoding)
 }
 
 const mergeUpdate = (spec: TopLevelSpec, update: EncodingUpdate) => {
@@ -255,6 +268,11 @@ export const truncateTitles = (
     const specCopy: Record<string, unknown> = {}
 
     for (const [key, value] of Object.entries(spec)) {
+      if (['data', 'color', 'strokeDash', 'shape', 'detail'].includes(key)) {
+        specCopy[key] = value
+        continue
+      }
+
       const valueType = typeof value
       if (key === 'y') {
         vertical = true
@@ -294,23 +312,30 @@ export const extendVegaSpec = (
     return updatedSpec
   }
 
-  const update = getSpecEncodingUpdate(encoding)
+  const update = getSpecEncodingUpdate(updatedSpec, encoding)
 
   return mergeUpdate(updatedSpec, update)
 }
 
 export const reverseOfLegendSuppressionUpdate = () => ({
   spec: {
     encoding: {
-      color: { legend: { disable: false } },
-      shape: {
+      color: {
         legend: {
           disable: false
         }
       },
+      shape: {
+        legend: {
+          disable: false,
+          symbolFillColor: 'grey'
+        }
+      },
       strokeDash: {
         legend: {
-          disable: false
+          disable: false,
+          symbolFillColor: 'transparent',
+          symbolStrokeColor: 'grey'
         }
       }
     }

extension/src/test/e2e/extension.test.ts

@@ -17,6 +17,9 @@ suite('DVC Extension For Visual Studio Code', () => {
   before('should finish loading the extension', async function () {
     this.timeout(240000)
     await waitForViewContainerToLoad()
+    const workbench = await browser.getWorkbench()
+    await workbench.executeCommand('DVC: Garbage Collect Experiments')
+    await browser.keys('Enter')
     return dismissAllNotifications()
   })
 

extension/src/test/e2e/wdio.conf.ts

@@ -33,7 +33,7 @@ export const config: Options.Testrunner = {
   capabilities: [
     {
       browserName: 'vscode',
-      browserVersion: 'insiders',
+      browserVersion: 'stable',
       'wdio:vscodeOptions': {
         extensionPath,
         userSettings: {

extension/src/test/fixtures/plotsDiff/templates/multiSource.ts

@@ -0,0 +1,75 @@
+import { TopLevelSpec } from 'vega-lite'
+
+const data = {
+  $schema: 'https://vega.github.io/schema/vega-lite/v5.json',
+  data: '<DVC_METRIC_DATA>',
+  title: '<DVC_METRIC_TITLE>',
+  width: 300,
+  height: 300,
+  layer: [
+    {
+      encoding: {
+        x: {
+          field: '<DVC_METRIC_X>',
+          type: 'quantitative',
+          title: '<DVC_METRIC_X_LABEL>'
+        },
+        y: {
+          field: '<DVC_METRIC_Y>',
+          type: 'quantitative',
+          title: '<DVC_METRIC_Y_LABEL>',
+          scale: { zero: false }
+        },
+        color: {
+          field: 'rev'
+        }
+      },
+      layer: [
+        { mark: 'line' },
+        {
+          selection: {
+            label: {
+              type: 'single',
+              nearest: true,
+              on: 'mouseover',
+              encodings: ['<DVC_METRIC_X>'],
+              empty: 'none',
+              clear: 'mouseout'
+            }
+          },
+          mark: 'point',
+          encoding: {
+            opacity: {
+              condition: { selection: 'label', value: 1 },
+              value: 0
+            }
+          }
+        }
+      ]
+    },
+    {
+      transform: [{ filter: { selection: 'label' } }],
+      layer: [
+        {
+          mark: { type: 'rule', color: 'gray' },
+          encoding: { x: { field: '<DVC_METRIC_X>', type: 'quantitative' } }
+        },
+        {
+          encoding: {
+            text: { type: 'quantitative', field: '<DVC_METRIC_Y>' },
+            x: { field: '<DVC_METRIC_X>', type: 'quantitative' },
+            y: { field: '<DVC_METRIC_Y>', type: 'quantitative' }
+          },
+          layer: [
+            {
+              mark: { type: 'text', align: 'left', dx: 5, dy: -5 },
+              encoding: { color: { type: 'nominal', field: 'rev' } }
+            }
+          ]
+        }
+      ]
+    }
+  ]
+} as unknown as TopLevelSpec
+
+export default data

package.json

@@ -65,7 +65,7 @@
     "prettier": "2.7.1",
     "prettier-config-standard": "5.0.0",
     "ts-node": "10.9.1",
-    "turbo": "1.4.7",
+    "turbo": "1.5.1",
     "typescript": "4.8.3"
   },
   "resolutions": {

webview/package.json

@@ -75,7 +75,7 @@
     "jest-environment-jsdom": "29.0.3",
     "lint-staged": "13.0.3",
     "raw-loader": "4.0.2",
-    "sass": "1.54.9",
+    "sass": "1.55.0",
     "sass-loader": "13.0.2",
     "storybook-addon-designs": "6.3.1",
     "storybook-addon-themes": "6.1.0",

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

@@ -11,6 +11,7 @@ import { ChevronDown, ChevronRight } from '../../../shared/components/icons'
 import { PlotsState } from '../../store'
 import { CopyButton } from '../../../shared/components/copyButton/CopyButton'
 import { isSelecting } from '../../../util/strings'
+import Tooltip from '../../../shared/components/tooltip/Tooltip'
 
 export interface ComparisonTableRowProps {
   path: string
@@ -47,7 +48,13 @@ export const ComparisonTableRow: React.FC<ComparisonTableRowProps> = ({
           <div className={styles.rowPath}>
             <button className={styles.rowToggler} onClick={toggleIsShownState}>
               <Icon icon={isShown ? ChevronDown : ChevronRight} />
-              <span className={styles.pathText}>{path}</span>
+              <Tooltip
+                content={path}
+                placement="bottom-start"
+                delay={[1000, 0]}
+              >
+                <span className={styles.pathText}>{path}</span>
+              </Tooltip>
             </button>
             <CopyButton value={path} className={styles.copyButton} />
           </div>