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

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

@@ -2637,6 +2637,78 @@ describe('App', () => {
       expect(clickEvent.stopPropagation).toHaveBeenCalledTimes(1)
     })
 
+    it('should have a tooltip on the plot if the title is cut', () => {
+      const title = 'Plot with a long title'
+      renderAppWithOptionalData({
+        template: {
+          ...templatePlotsFixture,
+          plots: [
+            {
+              entries: [
+                {
+                  ...templatePlotsFixture.plots[0].entries[0],
+                  content: {
+                    ...templatePlotsFixture.plots[0].entries[0].content,
+                    title: '… with a long title'
+                  } as unknown as VisualizationSpec,
+                  id: title
+                }
+              ],
+              group: TemplatePlotGroup.SINGLE_VIEW
+            }
+          ]
+        }
+      })
+
+      expect(screen.queryByText(title)).not.toBeInTheDocument()
+
+      const plot = within(screen.getByTestId(`plot_${title}`)).getAllByRole(
+        'button'
+      )[0]
+      fireEvent.mouseEnter(plot, {
+        bubbles: true,
+        cancelable: true
+      })
+
+      expect(screen.getByText(title)).toBeInTheDocument()
+    })
+
+    it('should not have a tooltip on the plot if the title is not cut', () => {
+      const title = 'Short title'
+      renderAppWithOptionalData({
+        template: {
+          ...templatePlotsFixture,
+          plots: [
+            {
+              entries: [
+                {
+                  ...templatePlotsFixture.plots[0].entries[0],
+                  content: {
+                    ...templatePlotsFixture.plots[0].entries[0].content,
+                    title
+                  } as unknown as VisualizationSpec,
+                  id: title
+                }
+              ],
+              group: TemplatePlotGroup.SINGLE_VIEW
+            }
+          ]
+        }
+      })
+
+      expect(screen.queryByText(title)).not.toBeInTheDocument()
+
+      const plot = within(screen.getByTestId(`plot_${title}`)).getAllByRole(
+        'button'
+      )[0]
+      fireEvent.mouseEnter(plot, {
+        bubbles: true,
+        cancelable: true
+      })
+
+      expect(screen.queryByText(title)).not.toBeInTheDocument()
+    })
+
     describe('Smooth Plots', () => {
       const waitSetValuePostMessage = (value: number) =>
         waitFor(

webview/src/plots/components/ZoomablePlot.tsx

@@ -4,6 +4,7 @@ import React, { useEffect, useRef } from 'react'
 import { useDispatch } from 'react-redux'
 import { VisualizationSpec } from 'react-vega'
 import VegaLite, { VegaLiteProps } from 'react-vega/lib/VegaLite'
+import { ZoomablePlotWrapper } from './ZoomablePlotWrapper'
 import { TemplateVegaLite } from './templatePlots/TemplateVegaLite'
 import { setZoomedInPlot } from './webviewSlice'
 import styles from './styles.module.scss'
@@ -77,39 +78,41 @@ export const ZoomablePlot: React.FC<ZoomablePlotProps> = ({
   }
 
   return (
-    <button
-      className={styles.zoomablePlot}
-      onClick={() => handleOnClick()}
-      aria-label="Open Plot in Popup"
-    >
-      <GripIcon className={styles.plotGripIcon} />
-      <span
-        className={styles.plotActions}
-        onClick={event => {
-          event.stopPropagation()
-          handleOnClick(true)
-        }}
-        onKeyDown={event => {
-          if (event.key === 'Enter') {
-            handleOnClick(true)
-          }
-        }}
-        role="button"
-        tabIndex={0}
-        aria-label="See Plot Export Options"
+    <ZoomablePlotWrapper id={id} title={plotProps.spec.title?.toString()}>
+      <button
+        className={styles.zoomablePlot}
+        onClick={() => handleOnClick()}
+        aria-label="Open Plot in Popup"
       >
-        <Ellipsis />
-      </span>
-      {currentPlotProps.current &&
-        (isTemplatePlot ? (
-          <TemplateVegaLite
-            vegaLiteProps={plotProps}
-            id={id}
-            onNewView={onNewView}
-          />
-        ) : (
-          <VegaLite {...plotProps} onNewView={onNewView} />
-        ))}
-    </button>
+        <GripIcon className={styles.plotGripIcon} />
+        <span
+          className={styles.plotActions}
+          onClick={event => {
+            event.stopPropagation()
+            handleOnClick(true)
+          }}
+          onKeyDown={event => {
+            if (event.key === 'Enter') {
+              handleOnClick(true)
+            }
+          }}
+          role="button"
+          tabIndex={0}
+          aria-label="See Plot Export Options"
+        >
+          <Ellipsis />
+        </span>
+        {currentPlotProps.current &&
+          (isTemplatePlot ? (
+            <TemplateVegaLite
+              vegaLiteProps={plotProps}
+              id={id}
+              onNewView={onNewView}
+            />
+          ) : (
+            <VegaLite {...plotProps} onNewView={onNewView} />
+          ))}
+      </button>
+    </ZoomablePlotWrapper>
   )
 }

webview/src/plots/components/ZoomablePlotWrapper.tsx

@@ -0,0 +1,21 @@
+import React, { ReactElement, PropsWithChildren } from 'react'
+import Tooltip from '../../shared/components/tooltip/Tooltip'
+
+interface ZoomablePlotWrapperProps {
+  title?: string
+  id: string
+}
+
+export const ZoomablePlotWrapper: React.FC<
+  PropsWithChildren<ZoomablePlotWrapperProps>
+> = ({ title, id, children }) => {
+  const isTitleCut = title?.indexOf('…') === 0
+
+  return isTitleCut ? (
+    <Tooltip content={id} placement="top" interactive>
+      {children as ReactElement}
+    </Tooltip>
+  ) : (
+    children
+  )
+}