From 49eec0538a8a24ae2d60687c949b205f20e5b2c5 Mon Sep 17 00:00:00 2001 From: Jorge Orpinel Perez Date: Fri, 17 Jun 2022 00:18:20 -0500 Subject: [PATCH 01/11] walks: link to Vega-lite docs from Plots and reformat md links --- extension/resources/walkthrough/plots.md | 31 +++++++++++++++--------- 1 file changed, 20 insertions(+), 11 deletions(-) diff --git a/extension/resources/walkthrough/plots.md b/extension/resources/walkthrough/plots.md index 7677b5c519..241e589d80 100644 --- a/extension/resources/walkthrough/plots.md +++ b/extension/resources/walkthrough/plots.md @@ -4,11 +4,12 @@ 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. -💡 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): +💡 If you don't have any DVC [plots] in the project, start writing data points +into JSON, YAML, CSV or TSV or saving plots as images (`.png`, etc) (check the +[DVCLive] helper library if you use Python): + +[plots]: https://dvc.org/doc/command-reference/plots +[dvclive]: https://dvc.org/doc/dvclive

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: +sections for selected experiments, that correspond to the different [types of +plots] supported by DVC: + +[types of plots]: + https://dvc.org/doc/command-reference/plots#supported-file-formats

Plots: Data Series

-`Data Series`. JSON, YAML, CSV or TSV files visualized using the predefined -(e.g. confusion matrix, linear) or custom (Vega-lite) templates. +`Data Series`. JSON, YAML, CSV or TSV files visualized using [templates], which +may be predefined (e.g. confusion matrix, linear) or custom ([Vega-lite]). + +[templates]: + https://dvc.org/doc/command-reference/plots#plot-templates-data-series-only +[vega-lite]: https://vega.github.io/vega-lite/

`Trends`. Linear plots based on data from the experiments table if you use -[checkpoints](https://dvc.org/doc/user-guide/experiment-management/checkpoints). +[checkpoints]. The plots dashboard can be configured and accessed using using the `Plots` and `Experiments` views: +[checkpoints]: https://dvc.org/doc/user-guide/experiment-management/checkpoints +

Plots View From 2b6b8f17c1799322ca90dfca4feae075c4971eaf Mon Sep 17 00:00:00 2001 From: Jorge Orpinel Perez Date: Fri, 17 Jun 2022 00:19:37 -0500 Subject: [PATCH 02/11] plots: better tooltips from Dashboard --- webview/src/plots/components/PlotsContainer.tsx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/webview/src/plots/components/PlotsContainer.tsx b/webview/src/plots/components/PlotsContainer.tsx index e0ff164342..2eb3481ffe 100644 --- a/webview/src/plots/components/PlotsContainer.tsx +++ b/webview/src/plots/components/PlotsContainer.tsx @@ -31,12 +31,14 @@ export type BasicContainerProps = Pick< > export const SectionDescription = { + // "Trends" [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.', + 'Real-time graphs based on metrics from the Experiments Table.', + // "Images" + [Section.COMPARISON_TABLE]: 'Displays image plots side by side.', + // "Data Series" [Section.TEMPLATE_PLOTS]: - 'JSON, YAML, CSV or TSV files visualized using Vega pre-defined or custom Vega-Lite templates.' + 'Graphs of JSON, YAML, CSV, or TSV plot files, visualized using `dvc plots` templates.' } const InfoIcon = () => ( From 64b624d8d14bdac31d9251fbe2d7241579395986 Mon Sep 17 00:00:00 2001 From: Jorge Orpinel Perez Date: Fri, 17 Jun 2022 00:54:04 -0500 Subject: [PATCH 03/11] walks: copy edit Plots --- extension/resources/walkthrough/plots.md | 68 +++++++++++-------- .../src/plots/components/PlotsContainer.tsx | 7 +- 2 files changed, 44 insertions(+), 31 deletions(-) diff --git a/extension/resources/walkthrough/plots.md b/extension/resources/walkthrough/plots.md index 241e589d80..8ba1c95032 100644 --- a/extension/resources/walkthrough/plots.md +++ b/extension/resources/walkthrough/plots.md @@ -1,43 +1,50 @@ # Plots -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). -💡 If you don't have any DVC [plots] in the project, start writing data points -into JSON, YAML, CSV or TSV or saving plots as images (`.png`, etc) (check the -[DVCLive] helper library if you use Python): +> This is the similar to the [`dvc plots show`] and [`dvc plots diff`] commands. -[plots]: https://dvc.org/doc/command-reference/plots -[dvclive]: https://dvc.org/doc/dvclive +[`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.).

Code to Dump a JSON Plot File - Code to Dump a JSON Plot File with DVCLive Code to Dump an Image Plot File

-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] supported by DVC: +If you're using Python, the [DVCLive] helper library can save plots data for +you! + +

+ Code to Dump a JSON Plot File with DVCLive +

+ +[dvc plots]: https://dvc.org/doc/start/experiments/visualization +[dvclive]: https://dvc.org/doc/dvclive + +Use +[`DVC: Show Plots`](command:workbench.action.quickOpen?%22>DVC:%20Show%20Plots%22) +from the command palette to open the **Plots Dashboard**. It displays the +following types of plots (for the selected experiments). -[types of plots]: - https://dvc.org/doc/command-reference/plots#supported-file-formats +## Data Series

Plots: Data Series

-`Data Series`. JSON, YAML, CSV or TSV files visualized using [templates], which -may be predefined (e.g. confusion matrix, linear) or custom ([Vega-lite]). +JSON, YAML, CSV, or TSV files graphed using [plot templates], which may be +predefined (e.g. confusion matrix, linear) or custom ([Vega-lite] files) -[templates]: +[plot templates]: https://dvc.org/doc/command-reference/plots#plot-templates-data-series-only [vega-lite]: https://vega.github.io/vega-lite/ @@ -46,21 +53,17 @@ may be predefined (e.g. confusion matrix, linear) or custom ([Vega-lite]). alt="Plots: Images" />

-`Images`. Any image file (e,g `.png`) can be visualized as a plot. They will be -rendered side by side in the table. +## Images

Plots: Trends

-`Trends`. Linear plots based on data from the experiments table if you use -[checkpoints]. +Any image file (e.g. `.jpg` or `.svg`) can be visualized here. They will be +rendered side by side for the selected experiments. -The plots dashboard can be configured and accessed using using the `Plots` and -`Experiments` views: - -[checkpoints]: https://dvc.org/doc/user-guide/experiment-management/checkpoints +## Trends

Experiments View

+ +Real-time graphs based on scalar [metrics] from the **Experiments Table**; +available when you use [checkpoints] + +The **Plots Dashboard** can be configured and accessed from the _Plots_ and +_Experiments_ side panels in the **DVC view**. + +[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/PlotsContainer.tsx b/webview/src/plots/components/PlotsContainer.tsx index 2eb3481ffe..e80905136e 100644 --- a/webview/src/plots/components/PlotsContainer.tsx +++ b/webview/src/plots/components/PlotsContainer.tsx @@ -33,12 +33,13 @@ export type BasicContainerProps = Pick< export const SectionDescription = { // "Trends" [Section.CHECKPOINT_PLOTS]: - 'Real-time graphs based on metrics from the Experiments Table.', + 'Real-time graphs based on metrics from the Experiments Table', // "Images" - [Section.COMPARISON_TABLE]: 'Displays image plots side by side.', + [Section.COMPARISON_TABLE]: + 'Displays image plots side by side across experiments.', // "Data Series" [Section.TEMPLATE_PLOTS]: - 'Graphs of JSON, YAML, CSV, or TSV plot files, visualized using `dvc plots` templates.' + 'Graphs of JSON, YAML, CSV, or TSV plot files, visualized using `dvc plots` templates' } const InfoIcon = () => ( From 51e4f48d81ef6a9b5c58240dca7b1b296d20b3eb Mon Sep 17 00:00:00 2001 From: Jorge Orpinel Date: Mon, 20 Jun 2022 12:32:39 -0500 Subject: [PATCH 04/11] Update extension/resources/walkthrough/plots.md --- extension/resources/walkthrough/plots.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/extension/resources/walkthrough/plots.md b/extension/resources/walkthrough/plots.md index 8ba1c95032..4786432367 100644 --- a/extension/resources/walkthrough/plots.md +++ b/extension/resources/walkthrough/plots.md @@ -3,7 +3,7 @@ Select one or more experiments to visualize in the [**Plots Dashboard**](command:dvc.showPlots). -> This is the similar to the [`dvc plots show`] and [`dvc plots diff`] commands. +> This is equivalent to the [`dvc plots show`] and [`dvc plots diff`] commands. [`dvc plots show`]: https://dvc.org/doc/command-reference/plots/show [`dvc plots diff`]: https://dvc.org/doc/command-reference/plots/diff From abc0ff8b54897104d370f0739794fbbbdb6031fd Mon Sep 17 00:00:00 2001 From: Ivan Shcheklein Date: Mon, 20 Jun 2022 14:11:39 -0700 Subject: [PATCH 05/11] Update webview/src/plots/components/PlotsContainer.tsx Co-authored-by: Jorge Orpinel --- webview/src/plots/components/PlotsContainer.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/webview/src/plots/components/PlotsContainer.tsx b/webview/src/plots/components/PlotsContainer.tsx index e80905136e..b48b4b007e 100644 --- a/webview/src/plots/components/PlotsContainer.tsx +++ b/webview/src/plots/components/PlotsContainer.tsx @@ -39,7 +39,7 @@ export const SectionDescription = { 'Displays image plots side by side across experiments.', // "Data Series" [Section.TEMPLATE_PLOTS]: - 'Graphs of JSON, YAML, CSV, or TSV plot files, visualized using `dvc plots` templates' + 'Plots of JSON, YAML, CSV, or TSV files, visualized using `dvc plots` templates' } const InfoIcon = () => ( From c6bed382831cc4cf0b260d3eeadee48d2a0d912b Mon Sep 17 00:00:00 2001 From: Ivan Shcheklein Date: Mon, 20 Jun 2022 14:11:45 -0700 Subject: [PATCH 06/11] Update extension/resources/walkthrough/plots.md Co-authored-by: Jorge Orpinel --- extension/resources/walkthrough/plots.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/extension/resources/walkthrough/plots.md b/extension/resources/walkthrough/plots.md index 4786432367..d1808bd21a 100644 --- a/extension/resources/walkthrough/plots.md +++ b/extension/resources/walkthrough/plots.md @@ -72,7 +72,7 @@ rendered side by side for the selected experiments. alt="Experiments View" width="49%" />

-Real-time graphs based on scalar [metrics] from the **Experiments Table**; +Real-time plots based on scalar [metrics] from the **Experiments Table**; available when you use [checkpoints] The **Plots Dashboard** can be configured and accessed from the _Plots_ and From 562bae5e443e1101054643bfbc7f9f85c9977d09 Mon Sep 17 00:00:00 2001 From: Jorge Orpinel Perez Date: Mon, 20 Jun 2022 16:54:23 -0500 Subject: [PATCH 07/11] walks: shorten Plots per https://github.com/iterative/vscode-dvc/pull/1922#discussion_r901998533 --- extension/resources/walkthrough/plots.md | 40 +++++++++--------------- 1 file changed, 15 insertions(+), 25 deletions(-) diff --git a/extension/resources/walkthrough/plots.md b/extension/resources/walkthrough/plots.md index 8ba1c95032..c7bb91164e 100644 --- a/extension/resources/walkthrough/plots.md +++ b/extension/resources/walkthrough/plots.md @@ -1,27 +1,22 @@ # Plots Select one or more experiments to visualize in the -[**Plots Dashboard**](command:dvc.showPlots). - -> This is the similar to the [`dvc plots show`] and [`dvc plots diff`] commands. +[**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. [`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.). +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!

Code to Dump a JSON Plot File Code to Dump an Image Plot File -

- -If you're using Python, the [DVCLive] helper library can save plots data for -you! - -

Code to Dump a JSON Plot File with DVCLive

@@ -29,20 +24,17 @@ you! [dvc plots]: https://dvc.org/doc/start/experiments/visualization [dvclive]: https://dvc.org/doc/dvclive -Use -[`DVC: Show Plots`](command:workbench.action.quickOpen?%22>DVC:%20Show%20Plots%22) -from the command palette to open the **Plots Dashboard**. It displays the -following types of plots (for the selected experiments). - -## Data Series +These are the types of plots that can be displayed (for the selected +experiments):

Plots: Data Series

-JSON, YAML, CSV, or TSV files graphed using [plot templates], which may be -predefined (e.g. confusion matrix, linear) or custom ([Vega-lite] files) +**Data Series** plots are JSON, YAML, CSV, or TSV files graphed 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 @@ -53,18 +45,14 @@ predefined (e.g. confusion matrix, linear) or custom ([Vega-lite] files) alt="Plots: Images" />

-## Images -

Plots: Trends

-Any image file (e.g. `.jpg` or `.svg`) can be visualized here. They will be +**Images** (e.g. `.jpg` or `.svg` files) can be visualized as well. They will be rendered side by side for the selected experiments. -## Trends -

Plots View @@ -72,11 +60,13 @@ rendered side by side for the selected experiments. alt="Experiments View" width="49%" />

-Real-time graphs based on scalar [metrics] from the **Experiments Table**; -available when you use [checkpoints] +Real-time **Trends** based on scalar [metrics] from the **Experiments Table** +are available when you use [checkpoints]. The **Plots Dashboard** can be configured and accessed from the _Plots_ and _Experiments_ side panels in the **DVC view**. [metrics]: https://dvc.org/doc/command-reference/metrics [checkpoints]: https://dvc.org/doc/user-guide/experiment-management/checkpoints + +> This is equivalent to the [`dvc plots show`] and [`dvc plots diff`] commands. From a9bb31baba3f4943b75f489b9070726dda86ab06 Mon Sep 17 00:00:00 2001 From: Jorge Orpinel Perez Date: Mon, 20 Jun 2022 17:00:41 -0500 Subject: [PATCH 08/11] plots: graph -> plot/visualize --- extension/resources/walkthrough/plots.md | 2 +- webview/src/plots/components/PlotsContainer.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/extension/resources/walkthrough/plots.md b/extension/resources/walkthrough/plots.md index c7bb91164e..51b30ed555 100644 --- a/extension/resources/walkthrough/plots.md +++ b/extension/resources/walkthrough/plots.md @@ -32,7 +32,7 @@ experiments): alt="Plots: Data Series" />

-**Data Series** plots are JSON, YAML, CSV, or TSV files graphed using [plot +**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) diff --git a/webview/src/plots/components/PlotsContainer.tsx b/webview/src/plots/components/PlotsContainer.tsx index b48b4b007e..b32eea0543 100644 --- a/webview/src/plots/components/PlotsContainer.tsx +++ b/webview/src/plots/components/PlotsContainer.tsx @@ -33,7 +33,7 @@ export type BasicContainerProps = Pick< export const SectionDescription = { // "Trends" [Section.CHECKPOINT_PLOTS]: - 'Real-time graphs based on metrics from the Experiments Table', + 'Real-time plots based on metrics from the Experiments Table', // "Images" [Section.COMPARISON_TABLE]: 'Displays image plots side by side across experiments.', From 2151326f2c64524b2f014db4bbd82b46abe0935f Mon Sep 17 00:00:00 2001 From: Jorge Orpinel Perez Date: Mon, 20 Jun 2022 17:02:44 -0500 Subject: [PATCH 09/11] walks: Plots +Dashboard per https://github.com/iterative/vscode-dvc/pull/1922#discussion_r902019220 --- extension/package.json | 2 +- extension/resources/walkthrough/plots.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/extension/package.json b/extension/package.json index a662e3ac5c..d7daf83fa0 100644 --- a/extension/package.json +++ b/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" diff --git a/extension/resources/walkthrough/plots.md b/extension/resources/walkthrough/plots.md index 51b30ed555..8d23811192 100644 --- a/extension/resources/walkthrough/plots.md +++ b/extension/resources/walkthrough/plots.md @@ -1,4 +1,4 @@ -# Plots +# Plots Dashboard Select one or more experiments to visualize in the [**Plots Dashboard**](command:dvc.showPlots). Use From 376b3d09000dc747601f1166c59cf0726a84940d Mon Sep 17 00:00:00 2001 From: Jorge Orpinel Perez Date: Mon, 20 Jun 2022 17:06:10 -0500 Subject: [PATCH 10/11] move code --- extension/resources/walkthrough/plots.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/extension/resources/walkthrough/plots.md b/extension/resources/walkthrough/plots.md index 8d23811192..d3527deeb4 100644 --- a/extension/resources/walkthrough/plots.md +++ b/extension/resources/walkthrough/plots.md @@ -63,10 +63,10 @@ rendered side by side for the selected experiments. Real-time **Trends** based on scalar [metrics] from the **Experiments Table** are available when you use [checkpoints]. -The **Plots Dashboard** can be configured and accessed from the _Plots_ and -_Experiments_ side panels in the **DVC view**. - [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**. + > This is equivalent to the [`dvc plots show`] and [`dvc plots diff`] commands. From 76a5b79f16f0e14fd2e2356ba426cad3ecd030c4 Mon Sep 17 00:00:00 2001 From: Jorge Orpinel Date: Mon, 20 Jun 2022 17:12:13 -0500 Subject: [PATCH 11/11] Update extension/resources/walkthrough/plots.md --- extension/resources/walkthrough/plots.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/extension/resources/walkthrough/plots.md b/extension/resources/walkthrough/plots.md index d3527deeb4..9785625c3d 100644 --- a/extension/resources/walkthrough/plots.md +++ b/extension/resources/walkthrough/plots.md @@ -67,6 +67,6 @@ are available when you use [checkpoints]. [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**. +_Experiments_ side panels in the [**DVC View**](command:views.dvc-views). > This is equivalent to the [`dvc plots show`] and [`dvc plots diff`] commands.