Update docs (#412)

docs/hyperdatasets/webapp/webapp_datasets.md

@@ -7,6 +7,13 @@ Use the Hyper-Datasets Page to navigate between and manage hyper-datasets.
 Click on a Hyper-Dataset card to open the dataset’s [version list](webapp_datasets_versioning.md), where you can view 
 and manage the dataset versions' lineage and contents. 
 
+Filter the hyper-datasets to find the one you’re looking for more easily. These filters can be applied by clicking <img src="/docs/latest/icons/ico-filter-off.svg" alt="Filter" className="icon size-md" />:
+* My Work - Show only hyper-datasets that you created
+* Tags - Choose which tags to filter by from a list of tags used in the hyper-datasets.
+  * Filter by multiple tag values using the **ANY** or **ALL** options, which correspond to the logical "AND" and "OR" 
+  respectively. These options appear on the top of the tag list.
+  * Filter by the absence of a tag (logical "NOT") by clicking its checkbox twice. An X will appear in the tag's checkbox.
+
 
 ![Hyper-Dataset page](../../img/hyperdatasets/datasets_01.png)
 

docs/webapp/datasets/webapp_dataset_page.md

@@ -13,6 +13,13 @@ for all datasets created using [ClearML Data](../../clearml_data/clearml_data.md
 Click on a dataset card to navigate to its [Version List](webapp_dataset_viewing.md), where you can view the 
 dataset versions' lineage and contents. 
 
+Filter the datasets to find the one you’re looking for more easily. These filters can be applied by clicking <img src="/docs/latest/icons/ico-filter-off.svg" alt="Filter" className="icon size-md" />:
+* My Work - Show only datasets that you created
+* Tags - Choose which tags to filter by from a list of tags used in the datasets.
+  * Filter by multiple tag values using the **ANY** or **ALL** options, which correspond to the logical "AND" and "OR" 
+  respectively. These options appear on the top of the tag list.
+  * Filter by the absence of a tag (logical "NOT") by clicking its checkbox twice. An X will appear in the tag's checkbox.
+
 ![Dataset page](../../img/webapp_dataset_page.png)
 
 

docs/webapp/pipelines/webapp_pipeline_page.md

@@ -6,7 +6,15 @@ Use the **Pipelines** Page to navigate between and manage pipelines. The page sh
 [ClearML Pipelines](../../pipelines/pipelines.md).
 
 Click on a pipeline card to navigate to its [Pipeline Runs Table](webapp_pipeline_table.md), where you can view the 
-pipeline structure, configuration and outputs for all of the pipeline’s runs, as well as create new runs.
+pipeline structure, configuration, and outputs of all the pipeline’s runs, as well as create new runs.
+
+Filter the pipelines to find the one you’re looking for more easily. These filters can be applied by clicking <img src="/docs/latest/icons/ico-filter-off.svg" alt="Filter" className="icon size-md" />:
+* My Work - Show only pipelines that you created
+* Tags - Choose which tags to filter by from a list of tags used in the pipelines.
+  * Filter by multiple tag values using the **ANY** or **ALL** options, which correspond to the logical "AND" and "OR" 
+  respectively. These options appear on the top of the tag list.
+  * Filter by the absence of a tag (logical "NOT") by clicking its checkbox twice. An X will appear in the tag's checkbox.
+
 
 ![Pipelines page](../../img/webapp_pipeline_table.png)
 

docs/webapp/webapp_exp_track_visual.md

@@ -230,8 +230,11 @@ General experiment details appear in the **INFO** tab. This includes information
 
 ## Experiment Results
 
-
-
+:::tip Embedding ClearML Visualization
+You can embed experiment plots and debug samples into ClearML [Reports](webapp_reports.md). These visualizations are 
+updated live as the experiment(s) updates. The Enterprise Plan supports embedding resources in external documents. See 
+[Plot Controls](#plot-controls).  
+:::
 
 ### Console
 
@@ -296,6 +299,10 @@ 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**.
 
+To embed scalar plots in your [Reports](webapp_reports.md), hover over a plot and click <img src="/docs/latest/icons/ico-plotly-embed-code.svg" alt="Embed code" className="icon size-md center-md" />, 
+which will copy to clipboard the embed code to put in your Reports. In contrast to static screenshots, embedded resources 
+are retrieved when the report is displayed allowing your reports to show the latest up-to-date data.
+
 See additional [plot controls](#plot-controls) below.
 
 ### Plots
@@ -340,7 +347,9 @@ These controls allow you to better analyze the results. Hover over a plot, and t
 | <img src="/docs/latest/icons/ico-download-json-plot.svg" alt="Download JSON icon" className="icon size-sm space-sm" /> | Download plot data as a JSON file. |
 | <img src="/docs/latest/icons/ico-download-csv.svg" alt="Download CSV icon" className="icon size-sm space-sm" /> | Download plot data as a CSV file. |
 | <img src="/docs/latest/icons/ico-maximize.svg" alt="Maximize plot icon" className="icon size-sm space-sm" /> | Expand plot to entire window. When used with scalar graphs, full screen mode displays plots with all data points, as opposed to an averaged plot |
-| <img src="/docs/latest/icons/ico-reset.svg" alt="Refresh" className="icon size-sm space-sm" /> | Refresh scalar graphs in full screen mode to update it  | 
+| <img src="/docs/latest/icons/ico-reset.svg" alt="Refresh" className="icon size-sm space-sm" /> | Refresh scalar graphs in full screen mode to update it.  | 
+| <img src="/docs/latest/icons/ico-plotly-embed-code.svg" alt="Embed code" className="icon size-md center-md" /> | Copy to clipboard the resource embed code to put in your [Reports](webapp_reports.md). In contrast to static screenshots, embedded resources are retrieved when the report is displayed allowing your reports to show the latest up-to-date data. |
+| <img src="/docs/latest/icons/ico-uri-copy.svg" alt="Embed code externally" className="icon size-md center-md" /> | Copy to clipboard the resource embed code to put in external editors (e.g. Notion). In contrast to static screenshots, embedded resources are retrieved when the report is displayed allowing your reports to show the latest up-to-date data (available in the ClearML Enterprise plan). |
 
 #### 3D Plot Controls 
 |Icon|Description|

docs/webapp/webapp_overview.md

@@ -26,7 +26,8 @@ The ClearML Web UI is composed of the following pages:
     * [Share experiments and their models](webapp_exp_sharing.md) with other ClearML hosted service users 
     * [Archive experiments and models](webapp_archiving.md)
 * [Datasets](datasets/webapp_dataset_page.md) <img src="/docs/latest/icons/ico-side-bar-datasets.svg" alt="Datasets" className="icon size-md space-sm" /> - View and manage your datasets. 
-* [Pipelines](pipelines/webapp_pipeline_page.md) <img src="/docs/latest/icons/ico-pipelines.svg" className="icon size-md space-sm" /> - View and manage your pipelines.
+* [Pipelines](pipelines/webapp_pipeline_page.md) <img src="/docs/latest/icons/ico-pipelines.svg" alt="Pipelines" className="icon size-md space-sm" /> - View and manage your pipelines.
+* [Reports](webapp_reports.md) <img src="/docs/latest/icons/ico-reports.svg" alt="Reports" className="icon size-md space-sm" /> - View and manage your reports.
 * [Workers and Queues](webapp_workers_queues.md) <img src="/docs/latest/icons/ico-workers.svg" alt="Workers and Queues" className="icon size-md space-sm" /> - The resource monitoring and queues management page.
 * [Applications](applications/apps_overview.md)  <img src="/docs/latest/icons/ico-applications.svg" alt="ClearML Apps" className="icon size-md space-sm" /> - ClearML's GUI applications for no-code workflow execution.
 * [Settings](webapp_profile.md) (available through the profile menu <img src="/docs/latest/icons/ico-me.svg" alt="Profile button" className="icon size-lg space-sm" />) - 

docs/webapp/webapp_reports.md

@@ -0,0 +1,91 @@
+---
+title: Reports
+---
+
+With ClearML’s Reports you can write up notes, experiment findings, or really anything you want. You can create reports 
+in any of your ClearML projects.
+
+In addition to its main document, a report also contains a description field, which will appear in the report's card in 
+the [Reports Page](#reports-page).
+
+Reports are editable Markdown documents, supporting:
+* Multi-level headings
+* Text formatting: Italics, bold, and strikethrough
+* Bulleted and numbered lists
+* Tables
+* Code blocks
+* Text and image hyperlinks
+* Embedded ClearML task content
+
+![Report](../img/webapp_report.png)
+
+Publishing a report locks it for future editing, so you can preserve its contents. You can also share your reports, 
+download a PDF copy, or simply copy the MarkDown content and reuse in your editor of choice.
+
+Access ClearML reports through the [Reports Page](#reports-page).
+
+## Embedding ClearML Visualizations
+You can embed plots and images from your experiments into your reports: scalar graphs and other plots, and debug samples 
+from an individual experiment or from an experiment comparison page. These visualizations are updated live as the 
+experiment(s) updates.
+
+To add a graphic resource: 
+1. Go to the resource you want to embed in your report (a plot or debug sample from an individual experiment or 
+experiment comparison) 
+2. Hover over the resource and 
+click <img src="/docs/latest/icons/ico-plotly-embed-code.svg" alt="Generate embed code" className="icon size-md space-sm" />. 
+This generates the embed code for accessing the resource and copies it to your clipboard.
+3. Return to your report page and paste the code snippet
+
+
+## Reports Page
+Use the Reports Page to navigate between and manage reports. The page shows summaries 
+for all reports.
+
+Click on a report card to access it.
+
+![Report page](../img/webapp_report_page.png)
+
+
+### Report Cards
+
+The report cards display summarized report information:
+
+<div class="max-w-50">
+
+![report card](../img/webapp_report_card.png)
+
+</div>
+
+* Report name
+* Report's project
+* Creating user
+* Last update time
+* Status
+* Description
+* Tags 
+
+#### Report Actions
+
+Click <img src="/docs/latest/icons/ico-bars-menu.svg" alt="Menu" className="icon size-md space-sm" /> on the top right
+of a report card to open its context menu and access report actions:  
+
+<div class="max-w-50">
+
+![Report card context menu](../img/webapp_report_card_context_menu.png)
+
+</div>
+
+* **Rename** - Change the report’s name
+* **Share** - Copy URL to share report
+* **Add Tag** - Add label to the report to help easily classify groups of reports.
+* **Move to** - Move the report into another project. If the target project does not exist, it is created on-the-fly.
+* **Archive** - Move report from active reports page to archive
+* **Delete** - Delete the report. To delete a report, it must first be archived. 
+
+### Create New Reports
+
+To create a new project, click the **+ NEW REPORT** button in the top right of the page, 
+which will open a **New Report** modal. 
+
+![New project modal](../img/webapp_report_new_report.png)

sidebars.js

@@ -86,6 +86,7 @@ module.exports = {
                     'webapp/pipelines/webapp_pipeline_page', 'webapp/pipelines/webapp_pipeline_table', 'webapp/pipelines/webapp_pipeline_viewing'
                 ]
             },
+            'webapp/webapp_reports',
             'webapp/webapp_workers_queues',
             {
                 'ClearML Applications': [

static/icons/ico-plotly-embed-code.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+<path d="M22,0H2C.9,0,0,.9,0,2V22c0,1.1,.9,2,2,2H22c1.1,0,2-.9,2-2V2c0-1.1-.9-2-2-2ZM8.02,9.54l-2.59,2.59,2.59,2.58v2.83L2.6,12.13l5.42-5.42v2.83Zm3.11,11.59l-1.96-.4L12.91,3.13l1.96,.4-3.74,17.6Zm4.89-3.59v-2.83l2.59-2.58-2.59-2.59v-2.83l5.42,5.42-5.42,5.41Z" fill="#8f9dc9"></path>
+</svg>

static/icons/ico-reports.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24.001" viewBox="0 0 24 24.001">
+    <path transform="translate(0 .001)" style="fill:none" d="M0 0h24v24H0z"/>
+    <path data-name="al-ico-reports" d="M13 0H2a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V7zM6.5 22h-3v-6a1 1 0 0 1 1-1h1a1 1 0 0 1 1 1zm5 0h-3V12a1 1 0 0 1 1-1h1a1 1 0 0 1 1 1zm5 0h-3v-3a1 1 0 0 1 1-1h1a1 1 0 0 1 1 1zM12 7.995V2l6 5.995z" transform="translate(2)" style="fill:#8492c2"/>
+</svg>

static/icons/ico-uri-copy.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path d="M22,0H2C.9,0,0,.9,0,2V22c0,1.1,.9,2,2,2H22c1.1,0,2-.9,2-2V2c0-1.1-.9-2-2-2Zm-7.25,15.98l-3.13,3.1c-.92,.95-2.14,1.42-3.36,1.42s-2.44-.47-3.34-1.42c-1.88-1.83-1.88-4.85,0-6.72l1.91-1.93v.85c-.03,.71,.09,1.42,.31,2.04l.07,.21-.57,.58c-.44,.43-.68,1.01-.68,1.62s.24,1.18,.68,1.62c.86,.88,2.37,.88,3.23,0l3.12-3.1c.43-.44,.68-1.02,.68-1.63s-.26-1.18-.68-1.62c-.24-.23-.37-.54-.37-.88s.13-.64,.37-.88c.47-.47,1.29-.45,1.76,0,.89,.91,1.39,2.1,1.39,3.37s-.5,2.47-1.39,3.36Zm4.34-4.35l-1.9,1.93v-.85c.01-.71-.1-1.42-.33-2.04l-.07-.2,.57-.6c.44-.43,.68-1.01,.68-1.62s-.24-1.18-.68-1.62c-.86-.88-2.38-.86-3.23,0l-3.12,3.12c-.43,.43-.68,1.01-.68,1.62s.26,1.18,.68,1.62c.24,.23,.37,.54,.37,.88s-.13,.65-.37,.88c-.24,.24-.55,.35-.88,.35s-.64-.11-.88-.35c-1.86-1.86-1.86-4.87,0-6.73l3.13-3.1c1.86-1.88,4.87-1.87,6.7,0,.92,.88,1.42,2.07,1.42,3.34s-.5,2.47-1.42,3.37Z" fill="#8f9dc9"/>
+</svg>