Plot tooltip for truncated titles (#4858)

* Add a tooltip to plots with long titles that are cut by Vega

* Add tooltip inside zoomed in plot and correctly make it interactive

* Add tooltips for plot titles and axis that get truncated

* Self-review

* Add tests

* Fix tests

* Fix lint error

* Fix story linting

Author: sroy3

extension/src/plots/model/collect.ts

@@ -1,6 +1,5 @@
 import get from 'lodash.get'
 import { TopLevelSpec } from 'vega-lite'
-import { VisualizationSpec } from 'react-vega'
 import { createSpec, CustomPlotsOrderValue, getFullValuePath } from './custom'
 import {
   ColorScale,
@@ -23,7 +22,8 @@ import { TemplateOrder } from '../paths/collect'
 import {
   extendVegaSpec,
   isMultiViewPlot,
-  truncateVerticalTitle
+  SpecWithTitles,
+  truncateVegaSpecTitles
 } from '../vega/util'
 import { definedAndNonEmpty } from '../../util/array'
 import {
@@ -139,22 +139,22 @@ const getCustomPlotData = (
   const completeColorScale = fillColorScale(experiments, colorScale, valueIds)
 
   const [{ param: paramVal, metric: metricVal }] = values
-  const yTitle = truncateVerticalTitle(metric, nbItemsPerRow, height) as string
 
   const spec = createSpec(
-    yTitle,
     metric,
     param,
     typeof metricVal,
     typeof paramVal,
     completeColorScale
   )
 
+  const updatedSpec = truncateVegaSpecTitles(spec, nbItemsPerRow, height)
+
   return {
     id: getCustomPlotId(metric, param),
     metric,
     param,
-    spec,
+    spec: updatedSpec,
     values
   } as CustomPlotData
 }
@@ -522,7 +522,7 @@ const collectTemplatePlot = (
   multiSourceEncoding: MultiSourceEncoding
 ) => {
   const isMultiView = isMultiViewPlot(
-    JSON.parse(template) as TopLevelSpec | VisualizationSpec
+    JSON.parse(template) as TopLevelSpec | SpecWithTitles
   )
   const multiSourceEncodingUpdate = multiSourceEncoding[path] || {}
   const { datapoints, revisions } = transformRevisionData(
@@ -545,7 +545,7 @@ const collectTemplatePlot = (
       ...multiSourceEncodingUpdate,
       color: revisionColors
     }
-  ) as VisualizationSpec
+  ) as SpecWithTitles
 
   acc.push({
     content,
@@ -638,7 +638,7 @@ export const collectSelectedTemplatePlotRawData = ({
   multiSourceEncodingUpdate: { strokeDash: StrokeDashEncoding }
 }) => {
   const isMultiView = isMultiViewPlot(
-    JSON.parse(template) as TopLevelSpec | VisualizationSpec
+    JSON.parse(template) as TopLevelSpec | SpecWithTitles
   )
   const { datapoints } = transformRevisionData(
     path,

extension/src/plots/model/custom.ts

@@ -1,4 +1,4 @@
-import { VisualizationSpec } from 'react-vega'
+import { TopLevelSpec } from 'vega-lite'
 import { getCustomPlotId } from './collect'
 import { Column, ColumnType } from '../../experiments/webview/contract'
 import { FILE_SEPARATOR } from '../../experiments/columns/paths'
@@ -56,7 +56,6 @@ const getSpecDataType = (type: string) =>
   type === 'number' ? 'quantitative' : 'nominal'
 
 export const createSpec = (
-  title: string,
   metric: string,
   param: string,
   metricType: string,
@@ -89,7 +88,7 @@ export const createSpec = (
         scale: {
           zero: false
         },
-        title,
+        title: metric,
         type: getSpecDataType(metricType)
       }
     },
@@ -120,4 +119,4 @@ export const createSpec = (
       }
     ],
     width: 'container'
-  }) as VisualizationSpec
+  }) as TopLevelSpec

extension/src/plots/paths/collect.test.ts

@@ -1,5 +1,4 @@
 import { join, sep } from 'path'
-import { VisualizationSpec } from 'react-vega'
 import isEqual from 'lodash.isequal'
 import {
   collectEncodingElements,
@@ -16,6 +15,7 @@ import { Shape, StrokeDash } from '../multiSource/constants'
 import { EXPERIMENT_WORKSPACE_ID, PlotsOutput } from '../../cli/dvc/contract'
 import { REVISIONS } from '../../test/fixtures/plotsDiff'
 import { FIELD_SEPARATOR } from '../../cli/dvc/constants'
+import { SpecWithTitles } from '../vega/util'
 
 const plotsDiffFixturePaths: PlotPath[] = [
   {
@@ -112,7 +112,7 @@ describe('collectPaths', () => {
         data: {
           [remainingPath]: [
             {
-              content: {},
+              content: {} as SpecWithTitles,
               datapoints: {
                 [fetchedRevs[0]]: [
                   {
@@ -212,15 +212,15 @@ describe('collectPaths', () => {
       data: {
         [join('logs', 'scalars', 'acc.tsv')]: [
           {
-            content: {},
+            content: {} as SpecWithTitles,
             datapoints: { [EXPERIMENT_WORKSPACE_ID]: [{}] },
             revisions,
             type: PlotsType.VEGA
           }
         ],
         [join('logs', 'scalars', 'loss.tsv')]: [
           {
-            content: {},
+            content: {} as SpecWithTitles,
             datapoints: { [EXPERIMENT_WORKSPACE_ID]: [{}] },
             revisions,
             type: PlotsType.VEGA
@@ -237,15 +237,15 @@ describe('collectPaths', () => {
           {
             content: {
               facet: { field: 'rev', type: 'nominal' }
-            } as VisualizationSpec,
+            } as SpecWithTitles,
             datapoints: { [EXPERIMENT_WORKSPACE_ID]: [{}] },
             revisions,
             type: PlotsType.VEGA
           }
         ],
         [join(`dvc.yaml${FIELD_SEPARATOR}logs`, 'acc.tsv')]: [
           {
-            content: {},
+            content: {} as SpecWithTitles,
             datapoints: { [EXPERIMENT_WORKSPACE_ID]: [{}] },
             revisions,
             type: PlotsType.VEGA
@@ -258,7 +258,7 @@ describe('collectPaths', () => {
           'acc.tsv'
         )]: [
           {
-            content: {},
+            content: {} as SpecWithTitles,
             datapoints: { [EXPERIMENT_WORKSPACE_ID]: [{}] },
             revisions,
             type: PlotsType.VEGA

extension/src/plots/paths/model.test.ts

@@ -7,6 +7,7 @@ import { PlotsType, TemplatePlotGroup } from '../webview/contract'
 import { EXPERIMENT_WORKSPACE_ID } from '../../cli/dvc/contract'
 import { ErrorsModel } from '../errors/model'
 import { REVISIONS } from '../../test/fixtures/plotsDiff'
+import { SpecWithTitles } from '../vega/util'
 
 describe('PathsModel', () => {
   const mockDvcRoot = 'test'
@@ -107,7 +108,7 @@ describe('PathsModel', () => {
     data: {
       [previousPlotPath]: [
         {
-          content: {},
+          content: {} as SpecWithTitles,
           datapoints: {
             [commitBeforePlots]: [
               {

extension/src/plots/util.test.ts

@@ -1,6 +1,7 @@
 import { sep } from 'path'
 import { ensurePlotsDataPathsOsSep } from './util'
 import { PlotsType } from './webview/contract'
+import { SpecWithTitles } from './vega/util'
 import { FIELD_SEPARATOR } from '../cli/dvc/constants'
 import { PlotsOutput } from '../cli/dvc/contract'
 
@@ -18,7 +19,7 @@ const getOutput = (slash = sep): PlotsOutput => {
       ],
       [joinWithSep([`dvc.yaml${FIELD_SEPARATOR}logs`, 'acc.tsv'], slash)]: [
         {
-          content: {},
+          content: {} as SpecWithTitles,
           datapoints: { main: [{}] },
           revisions: ['main'],
           type: PlotsType.VEGA

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

@@ -150,6 +150,7 @@ describe('extendVegaSpec', () => {
   it('should truncate all titles from the left to 50 characters for large plots', () => {
     const spec = withLongTemplatePlotTitle()
     const updatedSpec = extendVegaSpec(spec, 1, DEFAULT_PLOT_HEIGHT)
+    delete updatedSpec.titles
 
     const truncatedTitle = '…-many-many-characters-at-least-seventy-characters'
     const truncatedHorizontalTitle =
@@ -180,6 +181,7 @@ describe('extendVegaSpec', () => {
       DEFAULT_NB_ITEMS_PER_ROW,
       DEFAULT_PLOT_HEIGHT
     )
+    delete updatedSpec.titles
 
     const truncatedTitle = '…-many-many-characters-at-least-seventy-characters'
     const truncatedHorizontalTitle =
@@ -206,6 +208,7 @@ describe('extendVegaSpec', () => {
   it('should truncate all titles from the left to 30 characters for small plots', () => {
     const spec = withLongTemplatePlotTitle()
     const updatedSpec = extendVegaSpec(spec, 3, DEFAULT_PLOT_HEIGHT)
+    delete updatedSpec.titles
 
     const truncatedTitle = '…s-at-least-seventy-characters'
     const truncatedHorizontalTitle = '…at-least-seventy-characters-x'
@@ -236,6 +239,7 @@ describe('extendVegaSpec', () => {
     })
 
     const updatedSpec = extendVegaSpec(spec, 3, DEFAULT_PLOT_HEIGHT)
+    delete updatedSpec.titles
 
     const truncatedTitle = '…ghijklmnopqrstuvwyz1234567890'
 
@@ -253,6 +257,7 @@ describe('extendVegaSpec', () => {
     const spec = withLongTemplatePlotTitle([repeatedTitle, repeatedTitle])
 
     const updatedSpec = extendVegaSpec(spec, 3, DEFAULT_PLOT_HEIGHT)
+    delete updatedSpec.titles
 
     const truncatedTitle = '…ghijklmnopqrstuvwyz1234567890'
 
@@ -273,6 +278,7 @@ describe('extendVegaSpec', () => {
     })
 
     const updatedSpec = extendVegaSpec(spec, 3, DEFAULT_PLOT_HEIGHT)
+    delete updatedSpec.titles
 
     const truncatedTitle = '…ghijklmnopqrstuvwyz1234567890'
 
@@ -305,6 +311,7 @@ describe('extendVegaSpec', () => {
     const updatedSpecCopy = cloneDeep(updatedSpec)
     delete updatedSpecCopy.layer[1].layer[0].encoding.shape
     delete updatedSpecCopy.encoding
+    delete updatedSpecCopy.titles
 
     expect(updatedSpecCopy).toStrictEqual(multiSourceTemplate)
   })