From 9e7dfb49c65e1806d849e3d25c68c0b816541e4e Mon Sep 17 00:00:00 2001 From: pollfly <75068813+pollfly@users.noreply.github.com> Date: Wed, 7 Jul 2021 14:54:53 +0300 Subject: [PATCH] Add plot controls (#2) Clarify plot control + ALT texts --- docs/webapp/webapp_exp_track_visual.md | 137 ++++++++++++------------ static/icons/ico-homepage.svg | 4 + static/icons/ico-maximize.svg | 4 + static/icons/ico-orbital-rotation.svg | 4 + static/icons/ico-turntable-rotation.svg | 4 + 5 files changed, 84 insertions(+), 69 deletions(-) create mode 100644 static/icons/ico-homepage.svg create mode 100644 static/icons/ico-maximize.svg create mode 100644 static/icons/ico-orbital-rotation.svg create mode 100644 static/icons/ico-turntable-rotation.svg diff --git a/docs/webapp/webapp_exp_track_visual.md b/docs/webapp/webapp_exp_track_visual.md index f394e674..e1f13493 100644 --- a/docs/webapp/webapp_exp_track_visual.md +++ b/docs/webapp/webapp_exp_track_visual.md @@ -5,7 +5,7 @@ title: Tracking Experiments and Visualizing Results While an experiment is running, and any time after it finishes, track it and visualize the results in the **ClearML Web UI**, including: -* [Execution details](#execution-details) - Code, the base Docker image used for **ClearML Agent**, output destination for artifacts, and the logging level. +* [Execution details](#execution-details) - Code, the base Docker image used for **[ClearML Agent](../clearml_agent.md)**, output destination for artifacts, and the logging level. * [Configuration](#configuration) - Hyperparameters, user properties, and configuration objects. * [Artifacts](#artifacts) - Input model, output model, model snapshot locations, other artifacts. * [General information](#general-information) - Information about the experiment, for example: the experiment start, create, and last update times and dates, user creating the experiment, and its description. @@ -22,7 +22,7 @@ The **ClearML Web UI** provides two viewing modes for experiment details: * Full screen details mode. -Both modes contain all experiment details. When either view is open, switch to the other mode by clicking +Both modes contain all experiment details. When either view is open, switch to the other mode by clicking Table/Full screen view (**View in experiments table / full screen**), or clicking Bars menu (**menu**) > **View in experiments table / full screen**. @@ -36,7 +36,7 @@ can be performed from the table (as well as the menu in the info panel). View a screenshot
-![image](../img/webapp_tracking_40.png) +![Info panel](../img/webapp_tracking_40.png)
@@ -50,7 +50,7 @@ table is not visible when the full screen details view is open. Perform experime View a screenshot
-![image](../img/webapp_tracking_33.png) +![Full screen view](../img/webapp_tracking_33.png)
@@ -88,7 +88,7 @@ The output details include: View a screenshot
-![image](../img/webapp_tracking_18.png) +![Execution details section](../img/webapp_tracking_18.png)
@@ -100,7 +100,7 @@ The output details include: View a screenshot
-![image](../img/webapp_tracking_19.png) +![Uncomitted changes section](../img/webapp_tracking_19.png)
@@ -111,7 +111,7 @@ The output details include: View a screenshot
-![image](../img/webapp_tracking_20.png) +![Installed packages section](../img/webapp_tracking_20.png)
@@ -137,7 +137,7 @@ The **Args** section shows automatically logged `argparse` arguments, and all ol View a screenshot
-![image](../img/webapp_tracking_22.png) +![Command line arguments configuration section](../img/webapp_tracking_22.png)
@@ -151,7 +151,7 @@ If the `CLEARML_LOG_ENVIRONMENT` variable was set, the **Environment** section w View a screenshot
-![image](../img/webapp_tracking_23.png) +![Environment variables configuration section](../img/webapp_tracking_23.png)
@@ -166,7 +166,7 @@ with a `name` argument provided. View a screenshot
-![image](../img/webapp_tracking_25.png) +![Custom parameters section](../img/webapp_tracking_25.png)
@@ -179,7 +179,7 @@ The **TF_DEFINE** sections shows automatic TensorFlow logging. View a screenshot
-![image](../img/webapp_tracking_26.png) +![TF_DEFINE parameter section](../img/webapp_tracking_26.png)
@@ -195,7 +195,7 @@ except experiments whose status is *Published* (read-only). View a screenshot
-![image](../img/webapp_tracking_21.png) +![User properties section](../img/webapp_tracking_21.png)
@@ -216,7 +216,7 @@ In older versions of **ClearML Server**, the Task model configuration appeared i View a screenshot - Configuration objects
-![image](../img/webapp_tracking_24.png) +![Configuration objects](../img/webapp_tracking_24.png)
@@ -226,14 +226,11 @@ In older versions of **ClearML Server**, the Task model configuration appeared i View a screenshot - Custom configuration object
-![image](../img/webapp_tracking_28.png) +![Custom configuration objects](../img/webapp_tracking_28.png)
- - - ## Artifacts Artifacts tracked in an experiment appear in the **ARTIFACTS** tab, and include models and other artifacts. @@ -259,7 +256,7 @@ including design, label enumeration, and general information, go to the **MODELS View a screenshot
-![image](../img/webapp_exp_artifacts_01.png) +![Models in Artifacts tab](../img/webapp_exp_artifacts_01.png)
@@ -284,7 +281,7 @@ Artifacts which are uploaded and dynamically tracked by **ClearML** appear in th View a screenshot
-![image](../img/webapp_tracking_29.png) +![Data audit section](../img/webapp_tracking_29.png)
@@ -297,7 +294,7 @@ Other artifacts, which are uploaded but not dynamically tracked after the upload View a screenshot
-![image](../img/webapp_tracking_30.png) +![Other artifacts section](../img/webapp_tracking_30.png)
@@ -319,7 +316,7 @@ General experiment details appear in the **INFO** tab. This includes information View a screenshot
-![image](../img/webapp_tracking_31.png) +![Info tab](../img/webapp_tracking_31.png)
@@ -341,7 +338,7 @@ is downloadable. To view the end of the log, click **Jump to end**. View a screenshot
-![image](../img/webapp_tracking_32.png) +![Console tab](../img/webapp_tracking_32.png)
@@ -359,25 +356,26 @@ are on the left side of the window. The tools include: * **Group by** - select one of the following: * **Metric** - all variants for a metric on the same plot -
-View a screenshot -
+
+ View a screenshot +
-![image](../img/webapp_tracking_33.png) + ![Plots grouped by metric](../img/webapp_tracking_33.png) -
-
+
+
+
+ + * **None** - Group by metric and variant (individual metric-variant plots). -* **None** - Group by metric-variant combination (individual metric-variant plots). +
+ View a screenshot +
-
-View a screenshot -
+ ![Plots groups my metric and variant](../img/webapp_tracking_34.png) -![image](../img/webapp_tracking_34.png) - -
-
+
+
* Show / hide plots - Click **HIDE ALL**, and then click Eye Show All on those you want to see. @@ -387,50 +385,53 @@ are on the left side of the window. The tools include: * **WALL** - local clock time * Curve smoothing (scalars, only) - In **Smoothing** **>** Move the slider or type a smoothing factor between **0** and **0.999**. +See additional [plot controls](#plot-controls) below. -#### Plot controls - -Each plot supports plot controls allowing you better analyze the results. The table below lists the plot controls which may be available for any plot. Hover over a plot, and the controls appear. - -|Icon|Description| -|---|---| -| | Download plots as PNG files. | -| | Pan around plot. Click , click the plot, and then drag. | -| | To examine an area, draw a dotted box around it. Click and then drag. | -| | To examine an area, draw a dotted lasso around it. Click and then drag. | -| | Zoom into a section of a plot. Zoom in - Click and drag over a section of the plot. Reset to original scale - Click . | -| | Zoom in. | -| | Zoom out. | -| | Reset to autoscale after zooming ( , , or ). | -| | Reset axes after a zoom. | -| | Show / hide spike lines. | -| | Show the closest data point on hover, including horizontal and vertical axes values. Click and then hover over a series on the plot. | -| | Compare data on hover. Click and then hover over the plot. | -| | Switch to logarithmic view. | -| | Hide / show the legend. | -| | To get metric data for further analysis, download plot data to JSON file. | - - -### Other plots - -Other plots include data reported by libraries, visualization tools, and **ClearML** explicit reporting. These may include -2D and 3D plots, tables (Pandas and CSV files), and Plotly plots. Other plots appear in **RESULTS** **>** **PLOTS**. +### Plots +Non-time-series plots appear in **RESULTS** **>** **PLOTS**. These include data reported by libraries, visualization +tools, and **ClearML** explicit reporting. These may include 2D and 3D plots, tables (Pandas and CSV files), and Plotly plots. Individual plots can be shown / hidden or filtered by title.
View a screenshot
-![image](../img/webapp_tracking_35.png) +![Plots tab](../img/webapp_tracking_35.png)
+#### Plot controls +The table below lists the plot controls which may be available for any plot (in the **SCALARS** and **PLOTS** tabs). +These controls allow you to better analyze the results. Hover over a plot, and the controls appear. +|Icon|Description| +|---|---| +| Download PNG icon | Download plots as PNG files. | +| Pan icon | Pan around plot. Click Pan icon, click the plot, and then drag. | +| Dotted box icon | To examine an area, draw a dotted box around it. Click Dotted box icon and then drag. | +| Dotted lasso icon | To examine an area, draw a dotted lasso around it. Click Dotted lasso icon and then drag. | +| Zoom icon | Zoom into a section of a plot. Zoom in - Click Zoom icon and drag over a section of the plot. Reset to original scale - Click Reset autoscale icon . | +| Zoom-in icon | Zoom in. | +| Zoom-out icon | Zoom out. | +| Reset autoscale icon | Reset to autoscale after zooming ( Zoom icon, Zoom-in icon, or Zoom-out icon). | +| Reset axes icon | Reset axes after a zoom. | +| Spike lines icon | Show / hide spike lines. | +| Show closest icon | Show the closest data point on hover, including horizontal and vertical axes values. Click Show closest icon and then hover over a series on the plot. | +| Compare data icon | Compare data on hover. Click Compare data icon and then hover over the plot. | +| Logarithmic view icon | Switch to logarithmic view. | +| Graph legend icon | Hide / show the legend. | +| Download JSON icon | To get metric data for further analysis, download plot data to JSON file. | +| Maximize plot icon | Expand plot to entire window. | - +#### 3D plot controls +|Icon|Description| +|---|---| +| Orbital rotation mode icon| Switch to orbital rotation mode - rotate the plot around its middle point. | +| Turntable rotation mode icon| Switch to turntable rotation mode - rotate the plot around its middle point while constraining one axis | +| reset axes icon| Reset axes to default position. | ### Debug samples @@ -448,7 +449,7 @@ View debug samples by metric at any iteration. The most recent iteration appears View a screenshot - Debug samples
-![image](../img/webapp_tracking_43.png) +![Debug Samples tab](../img/webapp_tracking_43.png)
@@ -459,7 +460,7 @@ View debug samples by metric at any iteration. The most recent iteration appears View a screenshot - Viewer
-![image](../img/webapp_tracking_44.png) +![Debug Samples image viewer](../img/webapp_tracking_44.png)
@@ -485,8 +486,6 @@ View debug samples by metric at any iteration. The most recent iteration appears * For images, locate a position on the sample - Hover over the sample and the X, Y coordinates appear in the legend below the sample. - - ## Tagging experiments Tags are user-defined, color-coded labels that can be added to experiments (and models), allowing to easily identify and diff --git a/static/icons/ico-homepage.svg b/static/icons/ico-homepage.svg new file mode 100644 index 00000000..3509fbf2 --- /dev/null +++ b/static/icons/ico-homepage.svg @@ -0,0 +1,4 @@ + + + + diff --git a/static/icons/ico-maximize.svg b/static/icons/ico-maximize.svg new file mode 100644 index 00000000..2405e042 --- /dev/null +++ b/static/icons/ico-maximize.svg @@ -0,0 +1,4 @@ + + + + diff --git a/static/icons/ico-orbital-rotation.svg b/static/icons/ico-orbital-rotation.svg new file mode 100644 index 00000000..b9ed62b2 --- /dev/null +++ b/static/icons/ico-orbital-rotation.svg @@ -0,0 +1,4 @@ + + + + diff --git a/static/icons/ico-turntable-rotation.svg b/static/icons/ico-turntable-rotation.svg new file mode 100644 index 00000000..4c41b556 --- /dev/null +++ b/static/icons/ico-turntable-rotation.svg @@ -0,0 +1,4 @@ + + + +