diff --git a/docs/hyperdatasets/webapp/webapp_datasets.md b/docs/hyperdatasets/webapp/webapp_datasets.md index ab96c60b..4db3fd75 100644 --- a/docs/hyperdatasets/webapp/webapp_datasets.md +++ b/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 Filter: +* 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) diff --git a/docs/img/hyperdatasets/datasets_01.png b/docs/img/hyperdatasets/datasets_01.png index be69c9b6..cfdd49d3 100644 Binary files a/docs/img/hyperdatasets/datasets_01.png and b/docs/img/hyperdatasets/datasets_01.png differ diff --git a/docs/img/webapp_dataset_page.png b/docs/img/webapp_dataset_page.png index 8af0a690..e8c6e760 100644 Binary files a/docs/img/webapp_dataset_page.png and b/docs/img/webapp_dataset_page.png differ diff --git a/docs/img/webapp_pipeline_table.png b/docs/img/webapp_pipeline_table.png index ea742fb7..ffc77341 100644 Binary files a/docs/img/webapp_pipeline_table.png and b/docs/img/webapp_pipeline_table.png differ diff --git a/docs/img/webapp_report.png b/docs/img/webapp_report.png new file mode 100644 index 00000000..68ee9bc8 Binary files /dev/null and b/docs/img/webapp_report.png differ diff --git a/docs/img/webapp_report_card.png b/docs/img/webapp_report_card.png new file mode 100644 index 00000000..14ded4c5 Binary files /dev/null and b/docs/img/webapp_report_card.png differ diff --git a/docs/img/webapp_report_card_context_menu.png b/docs/img/webapp_report_card_context_menu.png new file mode 100644 index 00000000..60d067d5 Binary files /dev/null and b/docs/img/webapp_report_card_context_menu.png differ diff --git a/docs/img/webapp_report_new_report.png b/docs/img/webapp_report_new_report.png new file mode 100644 index 00000000..0cce0063 Binary files /dev/null and b/docs/img/webapp_report_new_report.png differ diff --git a/docs/img/webapp_report_page.png b/docs/img/webapp_report_page.png new file mode 100644 index 00000000..5c76a107 Binary files /dev/null and b/docs/img/webapp_report_page.png differ diff --git a/docs/webapp/datasets/webapp_dataset_page.md b/docs/webapp/datasets/webapp_dataset_page.md index ac52621c..3342805d 100644 --- a/docs/webapp/datasets/webapp_dataset_page.md +++ b/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 Filter: +* 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) diff --git a/docs/webapp/pipelines/webapp_pipeline_page.md b/docs/webapp/pipelines/webapp_pipeline_page.md index 42cc9fe9..682ecf3c 100644 --- a/docs/webapp/pipelines/webapp_pipeline_page.md +++ b/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 Filter: +* 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) diff --git a/docs/webapp/webapp_exp_track_visual.md b/docs/webapp/webapp_exp_track_visual.md index ea22ea4f..fe1ffdeb 100644 --- a/docs/webapp/webapp_exp_track_visual.md +++ b/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 Embed code, +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 | Download JSON icon | Download plot data as a JSON file. | | Download CSV icon | Download plot data as a CSV file. | | Maximize plot icon | 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 | -| Refresh | Refresh scalar graphs in full screen mode to update it | +| Refresh | Refresh scalar graphs in full screen mode to update it. | +| Embed code | 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. | +| Embed code externally | 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| diff --git a/docs/webapp/webapp_overview.md b/docs/webapp/webapp_overview.md index 7c93e092..d19256d4 100644 --- a/docs/webapp/webapp_overview.md +++ b/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) Datasets - View and manage your datasets. -* [Pipelines](pipelines/webapp_pipeline_page.md) - View and manage your pipelines. +* [Pipelines](pipelines/webapp_pipeline_page.md) Pipelines - View and manage your pipelines. +* [Reports](webapp_reports.md) Reports - View and manage your reports. * [Workers and Queues](webapp_workers_queues.md) Workers and Queues - The resource monitoring and queues management page. * [Applications](applications/apps_overview.md) ClearML Apps - ClearML's GUI applications for no-code workflow execution. * [Settings](webapp_profile.md) (available through the profile menu Profile button) - diff --git a/docs/webapp/webapp_reports.md b/docs/webapp/webapp_reports.md new file mode 100644 index 00000000..90f3fd14 --- /dev/null +++ b/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 Generate embed code. +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: + +
+ +![report card](../img/webapp_report_card.png) + +
+ +* Report name +* Report's project +* Creating user +* Last update time +* Status +* Description +* Tags + +#### Report Actions + +Click Menu on the top right +of a report card to open its context menu and access report actions: + +
+ +![Report card context menu](../img/webapp_report_card_context_menu.png) + +
+ +* **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) \ No newline at end of file diff --git a/sidebars.js b/sidebars.js index aa3733f8..1b655a35 100644 --- a/sidebars.js +++ b/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': [ diff --git a/static/icons/ico-plotly-embed-code.svg b/static/icons/ico-plotly-embed-code.svg new file mode 100644 index 00000000..526a89e4 --- /dev/null +++ b/static/icons/ico-plotly-embed-code.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/static/icons/ico-reports.svg b/static/icons/ico-reports.svg new file mode 100644 index 00000000..a19230a4 --- /dev/null +++ b/static/icons/ico-reports.svg @@ -0,0 +1,4 @@ + + + + diff --git a/static/icons/ico-uri-copy.svg b/static/icons/ico-uri-copy.svg new file mode 100644 index 00000000..dbbfd75c --- /dev/null +++ b/static/icons/ico-uri-copy.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file