Update documentation (#225)

docs/hyperdatasets/webapp/webapp_datasets_frames.md

@@ -245,11 +245,20 @@ Use Lucene queries in ROI label filters and frame rules.
 
 ## Masks 
 
-Use the **MASKS** panel to select a mask or multiple masks to apply over the frame. 
+Use the **MASKS** panel to select which masks to apply over the frame. 
 
 To view / hide a specific mask, click <img src="/docs/latest/icons/ico-show.svg" alt="Eye Show" className="icon size-md space-sm" />.
 In order to view all masks, click **Show all** / **Hide all**. 
 
+Masks are applied over the image either by pixel segmentation or as an alpha channel:
+* <img src="/docs/latest/icons/ico-segmentation.svg" alt="Pixel segmentation mode" className="icon size-md space-sm" /> Pixel 
+segmentation - Class labels are mapped onto the mask according to their pixel value definitions, and each 
+class is assigned a unique color. 
+* <img src="/docs/latest/icons/ico-alpha-mask.svg" alt="Alpha channel mode" className="icon size-md space-sm" /> Alpha 
+channel - Mask pixel values are translated to transparency. Additionally, a color can be applied to the mask to help 
+distinguish multiple masks. Click <img src="/docs/latest/icons/ico-mask-color-preview.svg" alt="Alpha color" className="icon size-md space-sm" /> to select 
+a color. 
+
 To adjust the transparency of a mask, use its opacity slider. 
 
 ### Labels 

docs/hyperdatasets/webapp/webapp_dataviews.md

@@ -6,19 +6,28 @@ title: The Dataviews Table
 as well as the **DATAVIEWS** tab in the **All Projects** page.
 
 The **Dataviews table** is a [customizable](#customizing-the-dataviews-table) list of Dataviews associated with a project.
-Use it to view, create, and edit Dataviews in the info panel. Dataview tables 
-can be filtered by name or name fragments and / or ID, by using the search bar.
+Use it to view, create, and edit Dataviews in the info panel. 
+
+View the Dataviews table in table view <img src="/docs/latest/icons/ico-table-view.svg" alt="Table view" className="icon size-md space-sm" /> 
+or in details view <img src="/docs/latest/icons/ico-split-view.svg" alt="Details view" className="icon size-md space-sm" />,
+using the buttons on the top left of the page. Use the table view for a comparative view of your Dataviews according to 
+columns of interest. Use the details view to access a selected Dataview’s details, while keeping the Dataview list in view.
 
 ![Dataviews table](../../img/hyperdatasets/webapp_dataviews_table.png)
 
-The Dataviews table columns in their default order are below. Dynamically order the columns by dragging a column heading 
-to a new position.
+The Dataviews table includes the following columns: 
 
-* **DATAVIEW** - Dataview name.
-* **USER** - User who created the Dataview.
-* **STATUS** - The status of the Dataview, which can be *Draft* (editable) or *Published* (read-only).  
-* **CREATED** - Elapsed time since the Dataview was created.
-* **DESCRIPTION**
+|Column|Description|Type|
+|--|--|--|
+|**DATAVIEW** | Dataview name | String|
+|**USER** | User who created the Dataview | String|
+|**STATUS** | The status of the Dataview, which can be *Draft* (editable) or *Published* (read-only)| String| 
+|**PROJECT** | The project name with which the dataview is associated| String|
+|**CREATED** | Elapsed time since the Dataview was created| Date-time|
+|**DESCRIPTION**| A description of the Dataview | String| 
+
+Dynamically order the columns by dragging a column heading 
+to a new position.
 
 ## Customizing the Dataviews Table
 
@@ -48,20 +57,20 @@ all the Dataviews in the project. The customizations of these two views are save
 
 The following table describes the actions that can be performed from the Dataviews table. 
 
+Access these actions with the context menu in any of the following ways:
+* In the Dataviews table, right click a Dataview, or hover over a Dataview and click <img src="/docs/latest/icons/ico-dots-v-menu.svg" alt="Dot menu" className="icon size-md space-sm" />
+* In a Dataview info panel, click the menu button <img src="/docs/latest/icons/ico-bars-menu.svg" alt="Bar menu" className="icon size-md space-sm" />
+
 | ClearML Action | Description |
 |---|---|
-| View details | Dataview details, including input datasets, label mapping, augmentation operations, and iteration control. Click a Dataview and the info panel slides open. |
+| Details | Dataview details, including input datasets, label mapping, augmentation operations, and iteration control. |
 | Archive | To more easily work with active Dataviews, move a Dataview to the archive, removing it from the active Dataview table. | 
 | Restore | Action available in the archive. Restore a Dataview to the active Dataviews table. |
 | Clone | Make an exact copy of a Dataview that is editable. |
-| Move to project | To organize work and improve collaboration, move a Dataview to another project. |
+| Move to Project | To organize work and improve collaboration, move a Dataview to another project. |
 | Publish |  Publish a Dataview to prevent changes to it. *Published* Dataviews are read-only.|
 | Custom action | When available, provides a mechanism to define your own custom action which will appear in the context menu. See [Custom UI Context Menu Actions](../../deploying_clearml/clearml_server_config.md#custom-ui-context-menu-actions).|
 
-These actions can be accessed with the context menu (when right-clicking a Dataview or clicking the menu button <img src="/docs/latest/icons/ico-bars-menu.svg" alt="Menu" className="icon size-md space-sm" />
-in a Dataview's info panel).
-
-
 Some of the actions mentioned in the chart above can be performed on multiple Dataviews at once.
 Select multiple Dataviews, then use either the context menu, or the bar that appears at the bottom of the page, to perform
 operations on the selected Dataviews. The context menu shows the number of Dataviews that can be affected by each action. 

docs/webapp/pipelines/webapp_pipeline_table.md

@@ -2,10 +2,15 @@
 title: The Pipeline Runs Table
 ---
 
-The pipeline runs table is a [customizable](#customizing-the-runs-table) list of the pipeline’s runs. From the table, 
-you can view a run’s details, and manage runs (create, continue, or abort). The runs table's auto-refresh allows users 
+The pipeline runs table is a [customizable](#customizing-the-runs-table) list of the pipeline’s runs. Use it to
+view a run’s details, and manage runs (create, continue, or abort). The runs table's auto-refresh allows users 
 to continually monitor run progress.
 
+View the runs table in table view <img src="/docs/latest/icons/ico-table-view.svg" alt="Table view" className="icon size-md space-sm" /> 
+or in details view <img src="/docs/latest/icons/ico-split-view.svg" alt="Details view" className="icon size-md space-sm" />, 
+using the buttons on the top left of the page. Use the table view for a comparative view of your runs according to 
+columns of interest. Use the details view to access a selected run’s details, while keeping the pipeline runs list in view. 
+
 ![Pipeline runs table](../../img/webapp_pipeline_runs_table.png)
 
 ## Run Table Columns
@@ -88,19 +93,26 @@ After clicking **RUN**, the new pipeline run is enqueued in the specified queue,
 The following table describes the actions that can be done from the run table, including the [states](../../fundamentals/task.md#task-states)
 that allow each operation.  
 
+Access these actions with the context menu in any of the following ways:
+* In the pipeline runs table, right click a run, or hover over a pipeline and click <img src="/docs/latest/icons/ico-dots-v-menu.svg" alt="Dot menu" className="icon size-md space-sm" />
+* In a pipeline info panel, click the menu button <img src="/docs/latest/icons/ico-bars-menu.svg" alt="Bar menu" className="icon size-md space-sm" />
+
 | Action | Description | States Valid for the Action | State Transition |
 |---|---|---|---|
-| Archive | To more easily work with active runs, archive a run. See [Archiving](../webapp_archiving.md). | Any state |  None  |
-| Restore | Action available in the archive. Restore a run to the active pipeline runs table. | Any state | None |
+| Details | View pipeline details. | Any state |  None  |
 | Run | Create a new pipeline run. Configure and enqueue it for execution. See [Create Run](#create-run).  | Any State | *Pending* |
 | Abort | Manually stop / cancel a run. | *Running* / *Pending* | *Aborted* |
-| Continue | Rerun with the same parameters |  *Aborted* | *Pending* |
-| Tags | User-defined labels added to runs for grouping and organization. | Any state |  None  |
+| Continue | Rerun with the same parameters. |  *Aborted* | *Pending* |
+| Add Tag | User-defined labels added to runs for grouping and organization. | Any state |  None  |
+| Archive | To more easily work with active runs, archive a run. See [Archiving](../webapp_archiving.md). | Any state |  None  |
+| Restore | Action available in the archive. Restore a run to the active pipeline runs table. | Any state | None |
 
-These actions can be accessed with the context menu, when right-clicking a run.
+<div class="max-w-50">
 
 ![pipeline run context menu](../../img/webapp_pipelines_context_menu.png)
 
+</div> 
+
 Most of the actions mentioned in the chart above can be performed on multiple runs at once.
 [Select multiple runs](#selecting-multiple-runs), then use either the context menu, or the bar that appears at the bottom 
 of the page, to perform operations on the selected runs. Actions can be performed only on the runs that match the action criteria 

docs/webapp/webapp_exp_table.md

@@ -6,6 +6,11 @@ The experiments table is a [customizable](#customizing-the-experiments-table) li
 table, view experiment details, and work with experiments (reset, clone, enqueue, create [tracking leaderboards](../guides/ui/building_leader_board.md)
 to monitor experimentation, and more). The experiments table's auto-refresh allows users to continually monitor experiment progress.
 
+View the experiments table in table view <img src="/docs/latest/icons/ico-table-view.svg" alt="Table view" className="icon size-md space-sm" /> 
+or in details view <img src="/docs/latest/icons/ico-split-view.svg" alt="Details view" className="icon size-md space-sm" />,
+using the buttons on the top left of the page. Use the table view for a comparative view of your experiments according 
+to columns of interest. Use the details view to access a selected experiment’s details, while keeping the experiment list 
+in view. 
 
 :::info
 To assist in focusing on active experimentation, experiments and models can be archived, so they will not appear
@@ -126,11 +131,16 @@ in the top right corner of the table.
 The following table describes the actions that can be done from the experiments table, including the [states](../fundamentals/task.md#task-states)
 that allow each operation.  
 
+Access these actions with the context menu in any of the following ways:
+* In the experiments table,right click an experiment  or hover over an experiment and click <img src="/docs/latest/icons/ico-dots-v-menu.svg" alt="Dot menu" className="icon size-md space-sm" />
+* In an experiment info panel, click the menu button <img src="/docs/latest/icons/ico-bars-menu.svg" alt="Bar menu" className="icon size-md space-sm" />
+
 | Action | Description | States Valid for the Action | State Transition |
 |---|---|---|---|
-| View details | View experiment details in the experiments table, the [info panel](webapp_exp_track_visual.md#info-panel) (keep the experiments table in view), or the [full screen details view](webapp_exp_track_visual.md#full-screen-details-view). | Any state |  None  |
-| Manage a queue | If an experiment is *Pending* in a queue, view the utilization of that queue, manage that queue (remove experiments and change the order of experiments), and view information about the worker(s) listening to the queue. See the [Workers and Queues](webapp_workers_queues.md) page. | *Enqueued* |  None  |
-| View a worker | If an experiment is *Running*, view resource utilization, worker details, and queues to which a worker is listening. | *Running* |  None  |
+| Details | Open the experiment's [info panel](webapp_exp_track_visual.md#info-panel) (keeps the experiments list in view). | Any state |  None  |
+| View Full Screen | View experiment details in [full screen](webapp_exp_track_visual.md#full-screen-details-view). | Any state |  None  |
+| Manage Queue | If an experiment is *Pending* in a queue, view the utilization of that queue, manage that queue (remove experiments and change the order of experiments), and view information about the worker(s) listening to the queue. See the [Workers and Queues](webapp_workers_queues.md) page. | *Enqueued* |  None  |
+| View Worker | If an experiment is *Running*, view resource utilization, worker details, and queues to which a worker is listening. | *Running* |  None  |
 | Share | For **ClearML Hosted Service** users only, [share](webapp_exp_sharing.md) an experiment and its model with a **ClearML Hosted Service** user in another workspace. |  Any state |  None  |
 | Archive | To more easily work with active experiments, move an experiment to the archive. See [Archiving](webapp_archiving.md). | Any state |  None  |
 | Restore |Action available in the archive. Restore an experiment to the active experiments table.| Any State | None |
@@ -140,15 +150,11 @@ that allow each operation.
 | Abort | Manually terminate a *Running* experiment. | *Running* | *Aborted* |
 | Abort All Children | Manually terminate all *Running* experiments which have this task as a parent | *Running* or *Aborted* | None for parent experiment, *Aborted* for child experiments |
 | Publish | Publish an experiment to prevent changes to its tracking data, inputs, and outputs. Published experiments and their models are read-only. *Published* experiments cannot be enqueued, but they can be cloned, and their clones can be edited, tuned, and enqueued. | *Completed*, *Aborted*, or *Failed*.  | *Published* |
-| Tags | Tag experiments with color-coded labels to assist you in organizing your work. See [tagging experiments](webapp_exp_track_visual.md#tagging-experiments). | Any state |  None  |
+| Add Tag | Tag experiments with color-coded labels to assist you in organizing your work. See [tagging experiments](webapp_exp_track_visual.md#tagging-experiments). | Any state |  None  |
 | Clone | Make an exact, editable copy of an experiment (for example, to reproduce an experiment, but keep the original). | *Draft* | Newly Cloned Experiment is *Draft* |
-| Move | Move an experiment to another project. | Any state |  None  |
+| Move to Project | Move an experiment to another project. | Any state |  None  |
 | Custom action | The ClearML Enterprise Server provides a mechanism to define your own custom actions, which will appear in the context menu. See [Custom UI Context Menu Actions](../deploying_clearml/clearml_server_config.md#custom-ui-context-menu-actions). | Any State | None |
 
-These actions can be accessed with the context menu (when right-clicking an experiment or clicking the menu button <img src="/docs/latest/icons/ico-bars-menu.svg" alt="Menu" className="icon size-md space-sm" />
-in an experiment's info panel).
-
-
 Most of the actions mentioned in the chart above can be performed on multiple experiments at once.
 [Select multiple experiments](#selecting-multiple-experiments), then use either the context menu, or the bar that appears at the bottom of the page, to perform
 operations on the selected experiments. Actions can be performed only on the experiments that match the action criteria 
@@ -176,7 +182,7 @@ selecting items beyond the items currently on-screen:
 Filter & sort the experiments of any project to create a leaderboard that can be shared and stored. This leaderboard
 updates in real time with experiment performance and outputs.
 
-Modify the experiment table in the following ways to create a customized leaderboard:
+Modify the experiments table in the following ways to create a customized leaderboard:
 * Add experiment configuration ([hyperparameters](#to-add-hyperparameters))
 * Edit and add experiments [properties](webapp_exp_track_visual.md#user-properties)
 * Add reported [metrics](#to-add-metrics), any time series reported metric can be selected, then select the last reported

docs/webapp/webapp_model_table.md

@@ -5,6 +5,12 @@ title: The Models Table
 The models table is a [customizable](#customizing-the-models-table) list of models associated with the experiments in a project. From the models table,
 view model details, and modify, publish, archive, tag, and move models to other projects.
 
+View the models table in table view <img src="/docs/latest/icons/ico-table-view.svg" alt="Table view" className="icon size-md space-sm" /> 
+or in details view <img src="/docs/latest/icons/ico-split-view.svg" alt="Details view" className="icon size-md space-sm" />,
+using the buttons on the top left of the page. Use the table view for a comparative view of your models according to 
+columns of interest. Use the details view to access a selected model’s details, while keeping the model list in view. 
+
+
 ![Models table](../img/webapp_models_01.png)
 
 ## Models Table Columns
@@ -61,20 +67,21 @@ all the models in the project. The customizations of these two views are saved s
 The following table describes the actions that can be done from the models table, including the states that
 allow each feature. Model states are *Draft* (editable) and *Published* (read-only). 
 
+Access these actions with the context menu in any of the following ways:
+* In the models table, right click a model, or hover over a model and click <img src="/docs/latest/icons/ico-dots-v-menu.svg" alt="Dot menu" className="icon size-md space-sm" />
+* In a model's info panel, click the menu button <img src="/docs/latest/icons/ico-bars-menu.svg" alt="Bar menu" className="icon size-md space-sm" />
+
 | ClearML Action | Description | States Valid for the Action |
 |---|---|--|
-| View details | Model details include general information, the model configuration, and label enumeration. Click a model, and the info panel slides open. | Any state |
+| Details | Model details include general information, the model configuration, and label enumeration. | Any state |
 | Publish | Publish a model to prevent changes to it. *Published* models are read-only. If a model is Published, its experiment also becomes Published (read-only). | *Draft* |
 | Archive | To more easily work with active models, move a model to the archive. See [Archiving](webapp_archiving.md). | Any state |
-| Restore | Action available in the archive. Restore a model to the active models table. | Any state |
-| Tags | Tag models with color-coded labels to assist in organizing work. See [tagging models](#tagging-models). | Any state |
+| Restore | Action available in the archive. Restore a model to the active model table. | Any state |
+| Add Tag | Tag models with color-coded labels to assist in organizing work. See [tagging models](#tagging-models). | Any state |
 | Download | Download a model. The file format depends upon the framework. | *Published* |
-| Move to project | To organize work and improve collaboration, move a model to another project. | Any state |
+| Move to Project | To organize work and improve collaboration, move a model to another project. | Any state |
 | Custom action | The ClearML Enterprise Server provides a mechanism to define your own custom actions, which will appear in the context menu. See [Custom UI Context Menu Actions](../deploying_clearml/clearml_server_config.md#custom-ui-context-menu-actions). | Any state |
 
-These actions can be accessed with the context menu (when right-clicking a model or clicking the menu button <img src="/docs/latest/icons/ico-bars-menu.svg" alt="Menu" className="icon size-md space-sm" />
-in a model's info panel).
-
 Some actions mentioned in the chart above can be performed on multiple models at once.
 Select multiple models, then use either the context menu, or the bar that appears at the bottom of the page, to perform
 operations on the selected models. The context menu shows the number of models that can be affected by each action. 

docs/webapp/webapp_overview.md

@@ -44,9 +44,10 @@ The ClearML Web UI is composed of the following pages:
 
 Click the help menu button <img src="/docs/latest/icons/ico-help-outlined.svg" alt="Help menu" className="icon size-lg space-sm" />
 in the top right corner of the web UI screen to access the self-help resources including: 
-* **ClearML Documentation**
-* **Pro Tips** - Tips for working with ClearML efficiently
 * **ClearML Python Package setup** - Instruction to get started with the `clearml` Python package
+* **ClearML on Youtube** - Instructional videos on integrating ClearML into your workflow
+* **Online Documentation**
+* **Pro Tips** - Tips for working with ClearML efficiently
 * **Contact Us** - Quick access to ClearML contact form
 
 Click the profile menu button <img src="/docs/latest/icons/ico-me.svg" alt="Profile button" className="icon size-lg space-sm" /> 

docs/webapp/webapp_profile.md

@@ -189,12 +189,8 @@ The system includes three pre-configured groups that can't be removed:
 
 The user group table lists all the active user groups. Each row includes a group's name, description, and member list. 
 
-<div class="max-w-50">
-
 ![User Management Page](../img/settings_user_management_table.png)
 
-</div>
-
 #### To create a user group:
 1. Click **+ ADD GROUP**
 1. In the dialog, add a group name and description

docs/webapp/webapp_workers_queues.md

@@ -10,82 +10,91 @@ With the **Workers and Queues** page, users can:
 * Create and rename queues; delete empty queues; monitor queue utilization
 * Reorder, move, and remove experiments from queues
 
+## Workers
+
+Use the **WORKERS** tab to track worker activity and monitor worker utilization.
+The page shows a worker activity graph and a worker details table. The graph time span can be controlled through the menu 
+at its top right corner. Hover over any plot point to see its data. By default, the **WORKER UTILIZATION** graph displays the 
+number of active and total workers over time.
+
+The worker table shows the currently available workers and their current execution information: 
+* Current running experiment
+* Current execution time 
+* Training iteration.
 
 
-## Resources Utilization
+Clicking on a worker will open the worker’s details panel and replace the graph with that worker’s resource utilization 
+information.  The resource metric being monitored can be selected through the menu at the graph’s top left corner:
+* CPU and GPU Usage
+* Memory Usage
+* Video Memory Usage
+* Network Usage.
 
-**To monitor resource utilization:**
-
-1. In the **WORKERS** tab, click a worker. The chart refreshes showing resource utilization over time for that worker. The
-   worker **INFO** slides open, showing information about the worker:
-   * Name
-   * Current experiment
-   * Current runtime
-   * Last iteration
-   * Last update time.
-
-1. Select a metric and time frame:
-
-    1. In the list of resources (top left side), select **CPU and GPU Usage**, **Memory Usage**, **Video Memory Usage**, or **Network Usage**.
-
-    1. In the period list (top right side), select **3 Hours**, **6 Hours**, **12 Hours**, **1 Day**, **1 Week**, or **1 Month**.
+The worker’s details panel includes the following two tabs:
+* **INFO** - worker information:
+    * Worker Name
+    * Update time - The last time the worker reported data
+    * Current Experiment - The experiment currently being executed by the worker
+    * Experiment Runtime - How long the currently executing experiment has been running
+    * Experiment iteration - The last reported training iteration for the experiment
+* **QUEUES** -  information about the queues that the worker is assigned to:
+    * Queue - The name of the Queue
+    * Next experiment - The next experiment available in this queue
+    * In Queue - The number of experiments currently enqueued
 
 ![Worker management](../img/agents_queues_resource_management.png)
 
 
 
-## Worker Utilization
+## Queues
 
-Optimize worker use by monitoring worker utilization in the **Workers** tab.
+Use the **QUEUES** tab to manage queues and monitor their statistics. The page shows graphs of the average experiment 
+wait time and the number of queued experiments, and a queue details table. Hover over any plot point to view its data. 
+By default, the graphs display the overall information of all queues. 
 
-**To monitor worker utilization:**
+The queue table shows the following queue information: 
+* Queue - Queue name 
+* Next Experiment - The next experiment available in this queue
+* Last Updated - The last time queue contents were modified
+* In Queue - Number of experiments currently enqueued in the queue
 
-* Open the **Workers** tab in the **Workers & Queues** page. The worker utilization chart
-  appears. Hover over any data point and see average workers and total workers.
+To create a new queue - Click **+ NEW QUEUE** (top left).
 
-
-
-## Queue Utilization
-
-**To monitor all queues:**
-
-* Open the **Queues** tab in the **Workers & Queues** page. The queue utilization chart appears and shows
- average wait time (seconds) and number of experiments queued for all queues.
-* Hover over any data point and see average wait time and number of experiments.
+Hover over a queue and click <img src="/docs/latest/icons/ico-copy-to-clipboard.svg" alt="Copy" className="icon size-md space-sm" /> 
+to copy the queue’s ID. 
 
 ![image](../img/4100.png)
 
-**To monitor a queue:**
+Right-click on a queue or hover and click its action button <img src="/docs/latest/icons/ico-dots-v-menu.svg" alt="Dot menu" className="icon size-md space-sm" /> 
+to access queue actions:
 
-1. In the queues list (below the plot on the left), click a queue.
-1. The chart refreshes, showing metrics for the selected queue. The info panel slides open with two tabs:
-   1. To see the enqueued experiments on the queue, click the **EXPERIMENTS** tab.
-   2. To view information about the workers listening to the queue, click the **WORKERS** tab.
-
-
-
-## Queue Management
-
-The **Queues** tab lets you manage your queues and their contents:
-
-* Create a queue - Click **+ NEW QUEUE** (top right)
-* Right-click on a queue in the queues list to modify the queue:
+![Queue context menu](../img/webapp_workers_queues_context.png)
+   
+* Delete - Delete the queue. Any pending tasks will be dequeued.
+* Rename - Change the queue’s name
+* Clear - Remove all pending tasks from the queue
+* Custom action - The ClearML Enterprise Server provides a mechanism to define your own custom actions, which will 
+  appear in the context menu. See [Custom UI Context Menu Actions](../deploying_clearml/clearml_server_config.md#custom-ui-context-menu-actions)
   
-  ![Queue context menu](../img/webapp_workers_queues_context.png)
+Clicking on a queue will open the queue’s details panel and replace the graphs with that queue’s statistics.
+
+The queue’s details panel includes the following two tabs: 
+* **EXPERIMENTS** - A list of experiments in the queue. You can reorder and remove enqueued experiments. See 
+  [Controlling Queue Contents](#controlling-queue-contents).
+* **WORKERS**  - Information about the workers assigned to the queue:
+  * Name - Worker name
+  * IP - Worker’s IP
+  * Currently Executing - The experiment currently being executed by the worker
+
+### Controlling Queue Contents
+
+Click on an experiment’s menu button <img src="/docs/latest/icons/ico-dots-v-menu.svg" alt="Dot menu" className="icon size-md space-sm" /> 
+in the **EXPERIMENTS** tab to reorganize your queue:
+
+![Queue experiment's menu](../img/workers_queues_experiment_actions.png)  
   
-    * Delete - Delete the queue. Any pending tasks will be dequeued.
-    * Rename - Change the queue’s name
-    * Clear - Remove all pending tasks from the queue
-    * Custom action - The ClearML Enterprise Server provides a mechanism to define your own custom actions, which will 
-      appear in the context menu. See [Custom UI Context Menu Actions](../deploying_clearml/clearml_server_config.md#custom-ui-context-menu-actions)
-* Click on a queue to select it and see its task and worker information. Click on a
-  task’s menu button <img src="/docs/latest/icons/ico-dots-v-menu.svg" alt="Menu button" className="icon size-md space-sm" />
-  in the **EXPERIMENTS** tab to reorganize your queue. 
-  
-  ![Queue experiment's menu](../img/workers_queues_experiment_actions.png)  
-  
-    * Move a task to the top or bottom of the queue
-    * Move the task to a different queue
-    * Dequeue the task
-    
-  You can also reorder experiments in a queue by dragging an experiment to a new position in the queue
+* Move a task to the top or bottom of the queue
+* Move the task to a different queue
+* Dequeue the task
+
+You can also reorder experiments in a queue by dragging an experiment to a new position in the queue.

static/icons/ico-alpha-mask.svg

@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="16" viewBox="0 0 20 16">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#1a1e2c"/>
+      <stop offset="1" stop-color="#1a1e2c" stop-opacity="0.133"/>
+    </linearGradient>
+  </defs>
+  <g id="single" transform="translate(-1285 -405.79)">
+    <rect id="rec" width="20" height="16" rx="2" transform="translate(1285 405.79)" fill="#a7b2d8"/>
+    <g id="mask-icon">
+      <g id="mask-border" transform="translate(1290 408.79)" fill="none" stroke="#1a1e2c" stroke-width="0.5" opacity="0.098">
+        <circle cx="5" cy="5" r="5" stroke="none"/>
+        <circle cx="5" cy="5" r="4.75" fill="none"/>
+      </g>
+      <circle id="mask-fill" cx="5" cy="5" r="5" transform="translate(1290 408.79)" fill="url(#linear-gradient)"/>
+    </g>
+  </g>
+</svg>

static/icons/ico-mask-color-preview.svg

@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="14" height="14" viewBox="0 0 14 14">
+  <defs>
+    <clipPath id="clip-path">
+      <circle id="checkers-ellipse-mask" cx="5" cy="5" r="5" transform="translate(1248 414)" fill="#fff"/>
+    </clipPath>
+  </defs>
+  <g id="mask-color" transform="translate(-1246 -412)">
+    <g id="mask-color-border" transform="translate(1246 412)" fill="none" stroke="#a7b2d8" stroke-width="1">
+      <circle cx="7" cy="7" r="7" stroke="none"/>
+      <circle cx="7" cy="7" r="6.5" fill="none"/>
+    </g>
+    <g id="checkers" clip-path="url(#clip-path)">
+      <path id="checkers-2" data-name="checkers" d="M-254,69V67h2v2Zm-4,0V67h2v2Zm-4,0V67h2v2Zm6-2V65h2v2Zm-4,0V65h2v2Zm6-2V63h-2V61h2v2h2v2Zm-4,0V63h2v2Zm-4,0V63h2v2Zm2-2V61h-2V59h2v2h2v2Zm6-2V59h2v2Zm-4,0V59h2v2Z" transform="translate(1510 355)" fill="#ccc"/>
+      <path id="checkers-ellipse-mask-w" d="M-256,69V67h2v2Zm-4,0V67h2v2Zm6-2V65h2v2Zm-4,0V65h2v2Zm-4,0V65h2v2Zm6-2V63h2v2Zm-4,0V63h-2V61h2v2h2v2Zm6-2V61h2v2Zm-4,0V61h2v2Zm2-2V59h2v2Zm-4,0V59h2v2Z" transform="translate(1510 355)" fill="#fff"/>
+    </g>
+    <circle id="color" cx="5" cy="5" r="5" transform="translate(1248 414)" fill="#7f2c83" opacity="0.5"/>
+  </g>
+</svg>

static/icons/ico-segmentation.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="16" viewBox="0 0 20 16">
+  <g id="multi" transform="translate(-1307 -405.79)">
+    <rect id="rec" width="20" height="16" rx="2" transform="translate(1307 405.79)" fill="#a7b2d8"/>
+    <path id="Union_2" data-name="Union 2" d="M6,63.79v-4h4v4Zm-6,0v-4H4v4Zm6-6v-4h4v4Zm-6,0v-4H4v4Z" transform="translate(1312 355)" fill="#5a658e"/>
+  </g>
+</svg>

static/icons/ico-split-view.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+    <path d="M16 16H0V0h16z" style="fill:none"/>
+    <path d="M14 4H3.333A1.333 1.333 0 0 0 2 5.333v8a1.333 1.333 0 0 0 1.333 1.333H14a1.333 1.333 0 0 0 1.333-1.333v-8A1.333 1.333 0 0 0 14 4zm-8 9.333H3.333V12H6zm0-2.667H3.333V9.333H6zM6 8H3.333V6.667H6zm8 5.333H7.333V6.667H14z" transform="translate(-.666 -1.334)" style="fill:#8492c2"/>
+</svg>

static/icons/ico-table-view.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+    <path d="M16 16H0V0h16z" style="fill:none"/>
+    <path d="M14 4H3.333A1.333 1.333 0 0 0 2 5.333v8a1.333 1.333 0 0 0 1.333 1.333H14a1.333 1.333 0 0 0 1.333-1.333v-8A1.333 1.333 0 0 0 14 4zm0 9.333H3.333V12H14zm0-2.667H3.333V9.333H14zM14 8H3.333V6.667H14z" transform="translate(-.666 -1.334)" style="fill:#8492c2"/>
+</svg>