Plots improve section tooltips copy and style (#2622)

iterative · Oct 18, 2022 · abf4cd4 · abf4cd4
1 parent 909e9a1
commit abf4cd4
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 52 deletions.
diff --git a/extension/resources/walkthrough/plots.md b/extension/resources/walkthrough/plots.md
@@ -37,7 +37,7 @@ templates], which may be predefined (e.g. confusion matrix, linear) or custom
 ([Vega-lite] files)
 
 [plot templates]:
-  https://dvc.org/doc/command-reference/plots#plot-templates-data-series-only
+  https://dvc.org/doc/user-guide/experiment-management/visualizing-plots#plot-templates-data-series-only
 [vega-lite]: https://vega.github.io/vega-lite/
 
 <p align="center">
@@ -60,8 +60,8 @@ rendered side by side for the selected experiments.
        alt="Experiments View" width="49%" />
 </p>
 
-Real-time **Trends** based on scalar [metrics] from the **Experiments Table**
-are available when you use [checkpoints].
+Automatically generated and updated **Trends** that show scalar [metrics] value
+per epoch if [checkpoints] are enabled.
 
 [metrics]: https://dvc.org/doc/command-reference/metrics
 [checkpoints]: https://dvc.org/doc/user-guide/experiment-management/checkpoints

diff --git a/webview/src/plots/components/App.test.tsx b/webview/src/plots/components/App.test.tsx
@@ -1,6 +1,6 @@
 import { join } from 'dvc/src/test/util/path'
 import { configureStore } from '@reduxjs/toolkit'
-import React, { ReactElement } from 'react'
+import React from 'react'
 import { Provider } from 'react-redux'
 import {
   cleanup,
@@ -1291,30 +1291,14 @@ describe('App', () => {
     const [templateInfo, comparisonInfo, checkpointInfo] =
       screen.getAllByTestId('info-tooltip-toggle')
 
-    const getSectionText = (sectionNode: ReactElement) =>
-      // eslint-disable-next-line testing-library/no-node-access
-      sectionNode.props.children || ''
-
     fireEvent.mouseEnter(templateInfo, { bubbles: true })
-    expect(
-      screen.getByText(
-        getSectionText(SectionDescription[Section.TEMPLATE_PLOTS])
-      )
-    ).toBeInTheDocument()
+    expect(screen.getByTestId('tooltip-template-plots')).toBeInTheDocument()
 
     fireEvent.mouseEnter(comparisonInfo, { bubbles: true })
-    expect(
-      screen.getByText(
-        getSectionText(SectionDescription[Section.COMPARISON_TABLE])
-      )
-    ).toBeInTheDocument()
+    expect(screen.getByTestId('tooltip-comparison-plots')).toBeInTheDocument()
 
     fireEvent.mouseEnter(checkpointInfo, { bubbles: true })
-    expect(
-      screen.getByText(
-        getSectionText(SectionDescription[Section.CHECKPOINT_PLOTS])
-      )
-    ).toBeInTheDocument()
+    expect(screen.getByTestId('tooltip-checkpoint-plots')).toBeInTheDocument()
   })
 
   it('should dismiss a tooltip by pressing esc', () => {
@@ -1326,29 +1310,15 @@ describe('App', () => {
 
     const [templateInfo] = screen.getAllByTestId('info-tooltip-toggle')
 
-    const getSectionText = (sectionNode: ReactElement) =>
-      // eslint-disable-next-line testing-library/no-node-access
-      sectionNode.props.children || ''
-
     fireEvent.mouseEnter(templateInfo, { bubbles: true })
-    expect(
-      screen.getByText(
-        getSectionText(SectionDescription[Section.TEMPLATE_PLOTS])
-      )
-    ).toBeInTheDocument()
+    expect(screen.getByTestId('tooltip-template-plots')).toBeInTheDocument()
 
     fireEvent.keyDown(templateInfo, { bubbles: true, key: 'Space' })
-    expect(
-      screen.getByText(
-        getSectionText(SectionDescription[Section.TEMPLATE_PLOTS])
-      )
-    ).toBeInTheDocument()
+    expect(screen.getByTestId('tooltip-template-plots')).toBeInTheDocument()
 
     fireEvent.keyDown(templateInfo, { bubbles: true, key: 'Escape' })
     expect(
-      screen.queryByText(
-        getSectionText(SectionDescription[Section.TEMPLATE_PLOTS])
-      )
+      screen.queryByTestId('tooltip-template-plots')
     ).not.toBeInTheDocument()
   })
 

diff --git a/webview/src/plots/components/PlotsContainer.tsx b/webview/src/plots/components/PlotsContainer.tsx
@@ -35,17 +35,40 @@ export interface PlotsContainerProps extends CommonPlotsContainerProps {
 export const SectionDescription = {
   // "Trends"
   [Section.CHECKPOINT_PLOTS]: (
-    <span>Real-time plots based on metrics from the Experiments Table</span>
+    <span data-testid="tooltip-checkpoint-plots">
+      Automatically generated and updated linear plots that show metric value
+      per epoch if{' '}
+      <a href="https://dvc.org/doc/user-guide/experiment-management/checkpoints">
+        checkpoints
+      </a>{' '}
+      are enabled.
+    </span>
   ),
   // "Images"
   [Section.COMPARISON_TABLE]: (
-    <span>Displays image plots side by side across experiments.</span>
+    <span data-testid="tooltip-comparison-plots">
+      Images (e.g. any <code>.jpg</code>, <code>.svg</code>, or
+      <code>.png</code> file) rendered side by side across experiments. They
+      should be registered as{' '}
+      <a href="https://dvc.org/doc/user-guide/experiment-management/visualizing-plots">
+        plots
+      </a>
+      .
+    </span>
   ),
   // "Data Series"
   [Section.TEMPLATE_PLOTS]: (
-    <span>
-      Plots of JSON, YAML, CSV, or TSV files, visualized using `dvc plots`
-      templates
+    <span data-testid="tooltip-template-plots">
+      Any <code>JSON</code>, <code>YAML</code>, <code>CSV</code>, or{' '}
+      <code>TSV</code> file(s) with data points, visualized using{' '}
+      <a href="https://dvc.org/doc/user-guide/experiment-management/visualizing-plots#plot-templates-data-series-only">
+        plot templates
+      </a>
+      . Either predefenined (e.g. confusion matrix, linear) or{' '}
+      <a href="https://dvc.org/doc/command-reference/plots/templates#custom-templates">
+        custom Vega-lite templates
+      </a>
+      .
     </span>
   )
 }

diff --git a/webview/src/plots/components/styles.module.scss b/webview/src/plots/components/styles.module.scss
@@ -20,10 +20,7 @@ $gap: 20px;
     display: flex;
     align-items: center;
     width: max-content;
-
-    svg {
-      cursor: pointer;
-    }
+    cursor: pointer;
   }
 }
 
@@ -370,17 +367,24 @@ $gap: 20px;
 }
 
 .infoTooltip {
-  max-width: 220px;
-  padding: 7px 3px;
+  max-width: 340px;
+  margin-left: 5px;
   white-space: normal;
   display: flex;
   gap: 4px;
-  font-size: 0.8125rem;
+  line-height: 16px;
+  font-size: 13px;
+  font-weight: 400;
+  cursor: auto;
 
   svg {
     min-width: 16px;
     min-height: 16px;
   }
+
+  a {
+    text-decoration: none;
+  }
 }
 
 :global(.has-actions) {