Update docs (#743)

docs/webapp/webapp_exp_reproducing.md

@@ -2,38 +2,53 @@
 title: Reproducing Experiments
 ---
 
-Reproduce experiments on local or remote machines, in one of the following ways: 
-* **Cloning** any experiment - make an exact copy keeping the original
-* **Resetting** an experiment whose status is not *Published* - this deletes the previous run's 
-logs and output. 
-  
-After cloning or resetting, enqueue the reset or newly cloned experiment for execution by a worker. 
+Reproduce experiments on local or remote machines in one of the following ways:
+* Cloning any experiment - Make an exact copy, while maintaining the original experiment
+* Resetting an experiment whose status is not Published - Delete the previous run's logs and output
 
-Experiments can also be modified and then executed remotely, see [Tuning Experiments](webapp_exp_tuning.md). 
+After cloning or resetting, enqueue the reset or newly cloned experiment for execution by a worker.
 
-**To reproduce an experiment:**
+Experiments can also be modified and then executed remotely, see [Tuning Experiments](webapp_exp_tuning.md).
 
-1. Locate the experiment. Open the Project page for the experiment from the Dashboard or the main Projects page.
+## Cloning
+To clone an experiment:
+1. In the experiments table, right-click the experiment to reproduce and click **Clone**.
+1. In the `Clone Experiment` modal, set the following:
+   * Project - The project where the experiment will be saved
+   * Description (optional)
+   * Set `<cloned_experiment>` as parent - Select to set this experiment as the new experiments' parent task
+1. Click **Clone**
 
-    * On the Dashboard, click a recent experiment, project card, or **VIEW ALL** and then click a project card.
-    * On the Projects page, click project card, or the **All projects** card.
+:::note
+By default, the new experiment’s parent task is set to the original task’s parent, unless the original task does not 
+have a parent, in which case the original task is set as the parent. Select `Set <cloned_experiment> as parent` to force 
+the original experiment to become the clone’s parent. 
+:::
 
-1. Reproduce the experiment. In the experiments table, right-click and then either:
+![Clone modal](../img/webapp_clone.png)
 
-    * Clone (make an exact copy) 
-    
-        1. Click **Clone**, and a **Clone experiment** box will pop up.
-        1. In the **Project** textbox, select or create a project:
-           * To search for another project, start typing the project name.
-           * To create a new project, type new experiment name and click **Create New**.
-        1. Enter an optional description.
-        1. Click **CLONE**.
-         
-    * Reset (delete logs and output from the previous run) - Click **Reset**.
 
-    The experiment's status becomes *Draft*.
+## Resetting
 
-1. Enqueue the experiment for execution. Right-click the experiment **>** **Enqueue** **>** Select a queue **>** **ENQUEUE**. 
+To reset an experiment:
+1. In the experiments table, right-click the relevant experiment and click **Reset**. 
+1. In the `Reset Experiment` modal, if you want the experiment's artifacts and debug samples to be deleted from the 
+   ClearML file server, click the checkbox
+1. Click **Reset**
 
-    The experiment's status becomes *Pending*. When a worker fetches the Task (experiment), the status becomes *Running*. 
-   The experiment can now be tracked and its results visualized.
+![Reset modal](../img/webapp_reset.png)
+
+## Final Steps 
+
+At the end of the process you are left with an experiment with draft status, meaning that it is editable.
+
+Re-execute the new experiment:
+1. If desired, modify the experiment’s configuration (see [Tuning Experiments](webapp_exp_tuning.md)).
+1. Enqueue the experiment for execution. Right-click the experiment > Enqueue > Select a queue > **ENQUEUE**.
+	
+   :::note
+   Make sure that a [ClearML Agent](../clearml_agent.md) has been assigned to the selected queue 
+   :::
+
+A ClearML Agent will fetch the experiment from the queue and execute it. The experiment can now be tracked and its 
+results visualized.

docs/webapp/webapp_exp_track_visual.md

@@ -32,23 +32,20 @@ table / full screen**.
 The info panel keeps the experiment table in view so that [experiment actions](webapp_exp_table.md#experiment-actions)
 can be performed from the table (as well as the menu in the info panel).
 
-<Collapsible type="screenshot" title="View a screenshot">
-
 ![Info panel](../img/webapp_tracking_40.png)
 
-</Collapsible>
+Click <img src="/docs/latest/icons/ico-compact-view.svg" alt="Compressed view" className="icon size-md space-sm" /> to 
+hide details in the experiment table, so only the experiment names and statuses are displayed
+
+![Compressed info panel](../img/webapp_tracking_41.png)
 
 ### Full Screen Details View
 
 The full screen details view allows for easier viewing and working with experiment tracking and results. The experiments
 table is not visible when the full screen details view is open. Perform experiment actions from the menu.
 
-<Collapsible type="screenshot" title="View a screenshot">
-
 ![Full screen view](../img/webapp_tracking_33.png)
 
-</Collapsible>
-
 
 ## Execution 
 An experiment's **EXECUTION** tab of lists the following:
@@ -328,8 +325,7 @@ These controls allow you to better analyze the results. Hover over a plot, and t
 | <img src="/docs/latest/icons/ico-reset-autoscale.svg" alt="Reset autoscale icon" className="icon size-sm space-sm" /> | Reset to autoscale after zooming (<img src="/docs/latest/icons/ico-zoom.svg" alt="Zoom icon" className="icon size-sm space-sm" />, <img src="/docs/latest/icons/ico-zoom-in-square.svg" alt="Zoom-in icon" className="icon size-sm space-sm" />, or <img src="/docs/latest/icons/ico-zoom-out-square.svg" alt="Zoom-out icon" className="icon size-sm space-sm" />). |
 | <img src="/docs/latest/icons/ico-reset-axes.svg" alt="Reset axes icon" className="icon size-sm space-sm" /> | Reset axes after a zoom. |
 | <img src="/docs/latest/icons/ico-spike-lines.svg" alt="Spike lines icon" className="icon size-sm space-sm" /> | Show / hide spike lines. |
-| <img src="/docs/latest/icons/ico-show-closest.svg" alt="Show closest icon" className="icon size-sm space-sm" /> | Show the closest data point on hover, including horizontal and vertical axes values. Click <img src="/docs/latest/icons/ico-show-closest.svg" alt="Show closest icon" className="icon size-sm space-sm" /> and then hover over a series on the plot. |
-| <img src="/docs/latest/icons/ico-compare-data.svg" alt="Compare data icon" className="icon size-sm space-sm" /> | Compare data on hover. Click <img src="/docs/latest/icons/ico-compare-data.svg" alt="Compare data icon" className="icon size-sm space-sm" /> and then hover over the plot. |
+| <img src="/docs/latest/icons/ico-show-closest.svg" alt="Show closest icon" className="icon size-sm space-sm" /> <br/> <img src="/docs/latest/icons/ico-compare-data.svg" alt="Compare data icon" className="icon size-sm space-sm" /> <br/> <img src="/docs/latest/icons/ico-x-unified.svg" alt="X-united mode" className="icon size-sm space-sm" />| Set data hover mode:<ul><li><img src="/docs/latest/icons/ico-show-closest.svg" alt="Show closest icon" className="icon size-sm space-sm" /> Closest - Show the (X, Y) data point closest to the cursor, including horizontal and vertical axes values</li><li> <img src="/docs/latest/icons/ico-compare-data.svg" alt="Compare data icon" className="icon size-sm space-sm" /> X - Show labels for points with the same x value as the cursor  </li><li> <img src="/docs/latest/icons/ico-x-unified.svg" alt="X-united mode" className="icon size-sm space-sm"/> X unified - Show a single label for the points with the same x value as the cursor</li></ul> |
 | <img src="/docs/latest/icons/ico-logarithmic-view.svg" alt="Logarithmic view icon" className="icon size-sm space-sm" /> | Switch to logarithmic view. |
 | <img src="/docs/latest/icons/ico-graph-legend.svg" alt="Graph legend icon" className="icon size-sm space-sm" /> | Hide / show the legend. |
 | <img src="/docs/latest/icons/ico-reset_1.svg" alt="Plot layout setting" className="icon size-sm space-sm" />| Switch between original and auto-fitted plot dimensions. The original layout is the plot's user-defined dimensions. |

docs/webapp/webapp_project_overview.md

@@ -3,7 +3,7 @@ title: Project Overview
 ---
 
 A project's **OVERVIEW** tab provides options to present a general picture of the project. The page consists of a graph 
-that can show a snapshot of a specific metric's value across the project's experiments, and a space to enter and edit a 
+that can show a snapshot of specified metrics' values across the project's experiments, and a space to enter and edit a 
 project's description. When either overview option is utilized, the **OVERVIEW** tab becomes the project's landing page, 
 meaning that it's the first thing that is seen when opening the project. 
 
@@ -11,14 +11,37 @@ meaning that it's the first thing that is seen when opening the project.
 
 ## Metric Snapshot
 
-On the top of the **OVERVIEW** tab, you can display a **metric snapshot**. Choose a metric and variant, 
-and then the window will present an aggregated view of the value for that metric and the time that each 
-experiment scored that value. This way, the project's progress can be quickly deduced.
+On the top of the **OVERVIEW** tab, you can display a **metric snapshot**. Choose metric variants, and the plot area 
+will present an aggregated view of the values for those metrics and the time that each experiment scored those values. 
+This way, the project's progress can be quickly deduced.
 
-All project experiments that reported the specified metric show up in the snapshot. Their colors vary based
-on their status (`Completed`, `Aborted`, `Published`, or `Failed`). Hover over a point in the snapshot, and a box will 
-appear with the details of the experiment associated with the metric value. Click the point, and you will 
-be sent to the experiment's page. 
+To add metric variants to the overview:
+1. Click **Select Metric & Variant**
+1. Select a metric **>** Expand a variant **>** Select the last reported (`LAST`), minimal (`MIN`) and/or maximal (`MAX`) 
+value to show
+1. Click **Apply**
+
+<div class="max-w-75">
+
+![Metric Snapshot selection](../img/webapp_metric_snapshot_selection.png)
+
+</div>
+
+To remove metric variants:
+1. Click **+ Metrics** 
+1. Remove in one of the following ways:
+   * On the right panel list, hover over a variant and click `X` 
+   * On the left panel, uncheck metric variant
+   * To remove all variants, click `Clear all`
+1. Click **Apply**
+
+
+When a single metric variant is selected, the plot color codes experiment status 
+(`Completed`, `Aborted`, `Published`, or `Failed`). When multiple variants are selected, each color corresponds to a 
+metric/variant combination. 
+
+Hover over a point in the snapshot, and a box will appear with the details of the experiment associated with the metric 
+value. Click the point to go to the experiment's details page.
 
 ## Project Description
 

static/icons/ico-compact-view.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path d="m12,17l3.55,2.37-1.11,1.66-2.45-1.63-2.44,1.63-1.11-1.66,3.56-2.37Zm-7-8v2h14v-2H5Zm0,6h14v-2H5v2ZM15.55,4.66l-1.11-1.66-2.44,1.63-2.44-1.63-1.11,1.66,3.55,2.37,3.55-2.37Z" fill="#8492c2"/>
+</svg>

static/icons/ico-x-unified.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <path d="m21,3H7c-.55,0-1,.45-1,1v5.17l-3.83,2.83,3.83,2.83v5.17c0,.55.45,1,1,1h14c.55,0,1-.45,1-1V4c0-.55-.45-1-1-1Zm-2,14h-10v-2h10v2Zm0-4h-10v-2h10v2Zm0-4h-10v-2h10v2Z" fill="#8492c2"></path>
+</svg>