Merge pull request #1922 from iterative/editors/plots-dashboard

plots: copy edit walkthrough and dashboard tooltips

Author: jorgeorpinel

extension/package.json

@@ -1416,7 +1416,7 @@
           },
           {
             "id": "dvc.plots",
-            "title": "Plots",
+            "title": "Plots Dashboard",
             "description": "Visualize and compare multiple experiments with interactive customizable charts.\n[Show Plots](command:dvc.showPlots)",
             "media": {
               "markdown": "resources/walkthrough/plots.md"

extension/resources/walkthrough/plots.md

@@ -1,61 +1,72 @@
-# Plots
+# Plots Dashboard
 
-Select one or more experiments to visualize them in the
-[`Plots Dashboard`](command:dvc.showPlots). This is the extension's equivalent
-of the `dvc plots show` and `dvc plots diff` commands.
+Select one or more experiments to visualize in the
+[**Plots Dashboard**](command:dvc.showPlots). Use
+[`DVC: Show Plots`](command:workbench.action.quickOpen?%22>DVC:%20Show%20Plots%22)
+from the command palette to open it.
 
-💡 If you don't have any DVC
-[plots](https://dvc.org/doc/command-reference/plots) in the project, start
-writing data points into JSON, YAML, CSV or TSV or saving plots as images
-(`.png`, etc) (check the [DVCLive](https://dvc.org/doc/dvclive) helper library
-if you use Python):
+[`dvc plots show`]: https://dvc.org/doc/command-reference/plots/show
+[`dvc plots diff`]: https://dvc.org/doc/command-reference/plots/diff
+
+💡 To add [DVC plots] to the project, start writing data series into JSON, YAML,
+CSV, or TSV files; or save your own plot images (`.png`, etc.). If you're using
+Python, the [DVCLive] helper library can save plots data for you!
 
 <p align="center">
   <img src="images/plots-dump-with-open-file.png"
        alt="Code to Dump a JSON Plot File" />
-  <img src="images/plots-dump-with-dvclive.png"
-       alt="Code to Dump a JSON Plot File with DVCLive" />
   <img src="images/plots-dump-image.png"
        alt="Code to Dump an Image Plot File" />
+  <img src="images/plots-dump-with-dvclive.png"
+       alt="Code to Dump a JSON Plot File with DVCLive" />
 </p>
 
-Use `DVC: Show Plots` from the
-[Command Palette](command:workbench.action.quickOpen?%22>DVC:%20Show%20Plots%22)
-to open up the plots dashboard. The extension will display the following
-sections for selected experiments, that correspond to the different
-[types of plots](https://dvc.org/doc/command-reference/plots#supported-file-formats)
-supported by DVC:
+[dvc plots]: https://dvc.org/doc/start/experiments/visualization
+[dvclive]: https://dvc.org/doc/dvclive
+
+These are the types of plots that can be displayed (for the selected
+experiments):
 
 <p align="center">
   <img src="images/plots-data-series.png"
        alt="Plots: Data Series" />
 </p>
 
-`Data Series`. JSON, YAML, CSV or TSV files visualized using the predefined
-(e.g. confusion matrix, linear) or custom (Vega-lite) templates.
+**Data Series** are JSON, YAML, CSV, or TSV files visualized using [plot
+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
+[vega-lite]: https://vega.github.io/vega-lite/
 
 <p align="center">
   <img src="images/plots-images.png"
        alt="Plots: Images" />
 </p>
 
-`Images`. Any image file (e,g `.png`) can be visualized as a plot. They will be
-rendered side by side in the table.
-
 <p align="center">
   <img src="images/plots-trends.png"
        alt="Plots: Trends" />
 </p>
 
-`Trends`. Linear plots based on data from the experiments table if you use
-[checkpoints](https://dvc.org/doc/user-guide/experiment-management/checkpoints).
-
-The plots dashboard can be configured and accessed using using the `Plots` and
-`Experiments` views:
+**Images** (e.g. `.jpg` or `.svg` files) can be visualized as well. They will be
+rendered side by side for the selected experiments.
 
 <p float="left">
   <img src="images/plots-plots-view-icon.png"
        alt="Plots View" width="49%" />
   <img src="images/plots-experiments-view-icon.png"
        alt="Experiments View" width="49%" />
 </p>
+
+Real-time **Trends** based on scalar [metrics] from the **Experiments Table**
+are available when you use [checkpoints].
+
+[metrics]: https://dvc.org/doc/command-reference/metrics
+[checkpoints]: https://dvc.org/doc/user-guide/experiment-management/checkpoints
+
+The **Plots Dashboard** can be configured and accessed from the _Plots_ and
+_Experiments_ side panels in the [**DVC View**](command:views.dvc-views).
+
+> This is equivalent to the [`dvc plots show`] and [`dvc plots diff`] commands.

webview/src/plots/components/PlotsContainer.tsx

@@ -31,12 +31,15 @@ export type BasicContainerProps = Pick<
 >
 
 export const SectionDescription = {
+  // "Trends"
   [Section.CHECKPOINT_PLOTS]:
-    'Linear plots based on data from the experiments table.',
+    'Real-time plots based on metrics from the Experiments Table',
+  // "Images"
   [Section.COMPARISON_TABLE]:
-    'A table used to display image plots side by side.',
+    'Displays image plots side by side across experiments.',
+  // "Data Series"
   [Section.TEMPLATE_PLOTS]:
-    'JSON, YAML, CSV or TSV files visualized using Vega pre-defined or custom Vega-Lite templates.'
+    'Plots of JSON, YAML, CSV, or TSV files, visualized using `dvc plots` templates'
 }
 
 const InfoIcon = () => (