Add tooltip with the meaning of each plot section (#1851)

* Add tooltip with the meaning of each plot section

* Add test

* Fix vertical alignment

* Capitalize descriptions

Author: sroy3

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

@@ -34,6 +34,7 @@ import { act } from 'react-dom/test-utils'
 import { App } from './App'
 import { Plots } from './Plots'
 import { NewSectionBlock } from './templatePlots/TemplatePlots'
+import { SectionDescription } from './PlotsContainer'
 import { vsCodeApi } from '../../shared/api'
 import { createBubbledEvent, dragAndDrop, dragEnter } from '../../test/dragDrop'
 import { DragEnterDirection } from '../../shared/components/dragDrop/util'
@@ -1056,6 +1057,33 @@ describe('App', () => {
     expect(screen.getByTestId('modal')).toBeInTheDocument()
   })
 
+  it('should show a tooltip with the meaning of each plot section', () => {
+    renderAppWithData({
+      checkpoint: checkpointPlotsFixture,
+      comparison: comparisonTableFixture,
+      sectionCollapsed: DEFAULT_SECTION_COLLAPSED,
+      template: complexTemplatePlotsFixture
+    })
+
+    const [templateInfo, comparisonInfo, checkpointInfo] =
+      screen.getAllByTestId('info-tooltip-toggle')
+
+    fireEvent.mouseEnter(templateInfo, { bubbles: true })
+    expect(
+      screen.getByText(SectionDescription[Section.TEMPLATE_PLOTS])
+    ).toBeInTheDocument()
+
+    fireEvent.mouseEnter(comparisonInfo, { bubbles: true })
+    expect(
+      screen.getByText(SectionDescription[Section.COMPARISON_TABLE])
+    ).toBeInTheDocument()
+
+    fireEvent.mouseEnter(checkpointInfo, { bubbles: true })
+    expect(
+      screen.getByText(SectionDescription[Section.CHECKPOINT_PLOTS])
+    ).toBeInTheDocument()
+  })
+
   describe('Virtualization', () => {
     const changeSize = async (size: string, buttonPosition: number) => {
       const sizePickerButton =

webview/src/plots/components/PlotsContainer.tsx

@@ -15,6 +15,7 @@ import { AllIcons, Icon } from '../../shared/components/Icon'
 import { IconMenu } from '../../shared/components/iconMenu/IconMenu'
 import { IconMenuItemProps } from '../../shared/components/iconMenu/IconMenuItem'
 import { sendMessage } from '../../shared/vscode'
+import Tooltip from '../../shared/components/tooltip/Tooltip'
 
 export interface PlotsContainerProps {
   sectionCollapsed: SectionCollapsed
@@ -31,6 +32,24 @@ export type BasicContainerProps = Pick<
   'onRename' | 'onResize' | 'sectionCollapsed'
 >
 
+export const SectionDescription = {
+  [Section.CHECKPOINT_PLOTS]:
+    'Linear plots based on data from the experiments table.',
+  [Section.COMPARISON_TABLE]:
+    'A table used to display image plots side by side.',
+  [Section.TEMPLATE_PLOTS]:
+    'JSON, YAML, CSV or TSV files visualized using Vega pre-defined or custom Vega-Lite templates.'
+}
+
+const InfoIcon = () => (
+  <Icon
+    icon={AllIcons.INFO}
+    width={16}
+    height={16}
+    className={styles.infoIcon}
+  />
+)
+
 export const PlotsContainer: React.FC<PlotsContainerProps> = ({
   sectionCollapsed,
   sectionKey,
@@ -96,6 +115,13 @@ export const PlotsContainer: React.FC<PlotsContainerProps> = ({
     onRename(sectionKey, title)
   }
 
+  const tooltipContent = (
+    <div className={styles.infoTooltip}>
+      <InfoIcon />
+      {SectionDescription[sectionKey]}
+    </div>
+  )
+
   return (
     <div className={styles.plotsContainerWrapper}>
       <details open={open} className={styles.plotsContainer}>
@@ -126,6 +152,14 @@ export const PlotsContainer: React.FC<PlotsContainerProps> = ({
           ) : (
             sectionTitle
           )}
+          <Tooltip content={tooltipContent} placement="bottom-end">
+            <div
+              className={styles.infoTooltipToggle}
+              data-testid="info-tooltip-toggle"
+            >
+              <InfoIcon />
+            </div>
+          </Tooltip>
         </summary>
         <div>
           {open && (

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

@@ -17,6 +17,8 @@ $gap: 20px;
     margin: 14px 10px;
     font-weight: bold;
     font-size: 1.25rem;
+    display: flex;
+    align-items: center;
   }
 }
 
@@ -321,6 +323,30 @@ $gap: 20px;
   }
 }
 
+.infoTooltipToggle {
+  display: flex;
+  align-items: center;
+}
+
+.infoIcon {
+  fill: $accent-color;
+  margin-left: 6px;
+}
+
+.infoTooltip {
+  max-width: 220px;
+  padding: 12px 8px;
+  white-space: normal;
+  display: flex;
+  gap: 4px;
+  font-size: 0.8125rem;
+
+  svg {
+    min-width: 16px;
+    min-height: 16px;
+  }
+}
+
 :global(.has-actions) {
   summary {
     background: $fg-color !important;

webview/src/shared/components/Icon.tsx

@@ -10,6 +10,7 @@ import {
   Ellipsis,
   GraphLine,
   Gripper,
+  Info,
   Lines,
   Pencil,
   Refresh,
@@ -27,6 +28,7 @@ export const AllIcons = {
   ELLIPSIS: Ellipsis,
   GRAPH_LINE: GraphLine,
   GRIPPER: Gripper,
+  INFO: Info,
   LINES: Lines,
   PENCIL: Pencil,
   REFRESH: Refresh,

webview/src/shared/components/icons/Info.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+
+const SvgInfo = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    width={16}
+    height={16}
+    viewBox="0 0 16 16"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="currentColor"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M8.568 1.031A6.8 6.8 0 0 1 12.76 3.05a7.06 7.06 0 0 1 .46 9.39 6.85 6.85 0 0 1-8.58 1.74 7 7 0 0 1-3.12-3.5 7.12 7.12 0 0 1-.23-4.71 7 7 0 0 1 2.77-3.79 6.8 6.8 0 0 1 4.508-1.149zM9.04 13.88a5.89 5.89 0 0 0 3.41-2.07 6.07 6.07 0 0 0-.4-8.06 5.82 5.82 0 0 0-7.43-.74 6.06 6.06 0 0 0 .5 10.29 5.81 5.81 0 0 0 3.92.58zM7.375 6h1.25V5h-1.25v1zm1.25 1v4h-1.25V7h1.25z"
+    />
+  </svg>
+)
+
+export default SvgInfo

webview/src/shared/components/icons/index.ts

@@ -10,6 +10,7 @@ export { default as DownArrow } from './DownArrow'
 export { default as Ellipsis } from './Ellipsis'
 export { default as GraphLine } from './GraphLine'
 export { default as Gripper } from './Gripper'
+export { default as Info } from './Info'
 export { default as Lines } from './Lines'
 export { default as Pencil } from './Pencil'
 export { default as Pin } from './Pin'