Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

plots: copy edit walkthrough and dashboard tooltips #1922

Merged
merged 13 commits into from
Jun 23, 2022
Merged
2 changes: 1 addition & 1 deletion extension/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
65 changes: 38 additions & 27 deletions extension/resources/walkthrough/plots.md
Original file line number Diff line number Diff line change
@@ -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)
Comment on lines +4 to +5
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we need both links? I think they do the same thing in the end.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it educates ppl a bit more

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.
9 changes: 6 additions & 3 deletions webview/src/plots/components/PlotsContainer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 = () => (
Expand Down