Refactor WebApp pages

docs/hyperdatasets/webapp/webapp_annotator.md

@@ -16,6 +16,10 @@ Use annotation tasks to efficiently organize the annotation of frames in Dataset
 
 Click on an annotation task card to open the frame viewer, where you can view the task's frames and annotate them.
 
+Use the search bar <img src="/docs/latest/icons/ico-search.svg" alt="Magnifying glass" className="icon size-md space-sm" /> 
+to find specific annotation tasks. You can query by the task’s name, hyper-dataset version, and ID.
+To search using regex, click the `.*` icon on the search bar.
+
 ## Annotation Task Actions
 Click <img src="/docs/latest/icons/ico-bars-menu.svg" alt="Menu" className="icon size-md space-sm" /> on the top right 
 of an annotation task card to open its context menu and access annotation task actions.  

docs/hyperdatasets/webapp/webapp_dataviews.md

@@ -18,6 +18,10 @@ using the buttons on the top left of the page. Use the table view for a comparat
 columns of interest. Use the details view to access a selected Dataview's details, while keeping the Dataview list in view.
 Details view can also be accessed by double-clicking a specific Dataview in the table view to open its details view. 
 
+Use the search bar <img src="/docs/latest/icons/ico-search.svg" alt="Magnifying glass" className="icon size-md space-sm" /> 
+to find specific dataviews. You can query by the dataview name, ID, description, hyper-datasets, and versions. 
+To search using regex, click the `.*` icon on the search bar.
+
 You can archive Dataviews so the Dataview table doesn't get too cluttered. Click **OPEN ARCHIVE** on the top of the 
 table to open the archive and view all archived Dataviews. From the archive, you can restore 
 Dataviews to remove them from the archive. You can also permanently delete Dataviews.

docs/webapp/datasets/webapp_dataset_page.md

@@ -25,6 +25,10 @@ Filter the datasets to find the one you're looking for more easily. These filter
   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.
 
+Use the search bar <img src="/docs/latest/icons/ico-search.svg" alt="Magnifying glass" className="icon size-md space-sm" /> 
+to find specific datasets. You can query by the dataset name, ID, or description. To search using regex, click the `.*` 
+icon on the search bar.
+
 ![Dataset page](../../img/webapp_dataset_page.png#light-mode-only)
 ![Dataset page](../../img/webapp_dataset_page_dark.png#dark-mode-only)
 

docs/webapp/pipelines/webapp_pipeline_table.md

@@ -12,9 +12,13 @@ or comparison view <img src="/docs/latest/icons/ico-charts-view.svg" alt="Compar
 using the buttons on the top left of the page. Use the details view to access a selected run's details, while keeping 
 the run list in view. Details view can also be accessed by double-clicking a specific pipeline run in the table view to 
 open its details view. Use the [comparison view](#comparing-runs) to compare your pipeline run's scalar and plot results. 
-This view compares the scalars/plots of currently selected pipeline runs. If no runs are selected, The first 100 visible 
+This view compares the scalars/plots of currently selected pipeline runs. If no runs are selected, the first 100 visible 
 runs in the table are compared.
 
+Use the search bar <img src="/docs/latest/icons/ico-search.svg" alt="Magnifying glass" className="icon size-md space-sm" /> 
+to find specific pipeline runs. You can query by the run name, ID, and description.
+To search using regex, click the `.*` icon on the search bar.
+
 You can archive pipeline runs so the runs table doesn't get too cluttered. Click **OPEN ARCHIVE** on the top of the 
 table to open the archive and view all archived runs. From the archive, you can restore 
 runs to remove them from the archive. You can also permanently delete runs.

docs/webapp/webapp_exp_table.md

@@ -17,6 +17,11 @@ depth comparison, see [Comparing Tasks](webapp_exp_comparing.md)). This view com
 the scalars/plots of currently selected tasks. If no tasks are selected, the first 100
 visible tasks in the table are compared.
 
+Use the search bar <img src="/docs/latest/icons/ico-search.svg" alt="Magnifying glass" className="icon size-md space-sm" /> 
+to find specific tasks. You can query by the task name, ID, description and input and output models. In the Enterprise version, 
+you can also query by the task’s dataviews' hyper-datasets and versions. To search using regex, click the `.*` 
+icon on the search bar.
+
 You can archive tasks so the table doesn't get too cluttered. Click **OPEN ARCHIVE** on the top of the
 table to open the archive and view all archived tasks. From the archive, you can restore 
 tasks to remove them from the archive. You can also permanently delete tasks.

docs/webapp/webapp_exp_tuning.md

@@ -6,9 +6,9 @@ Tune tasks and edit their execution details, then execute the tuned tasks on loc
 
 ## To Tune a Task and Execute it Remotely:
 
-1. Locate the task. Open the task's Project page from the Dashboard or the main Projects page.
+1. Locate the task. Open the task's Project page from the Project Dashboard or the main Projects page.
 
-    * On the Dashboard,
+    * On the Project Dashboard,
       * Click on a task from RECENT TASKS
       * In RECENT PROJECTS **>** click on a project card **>** click task
       * In RECENT PROJECTS **>** click **VIEW ALL** **>** click the project card **>** click task

docs/webapp/webapp_home.md

@@ -1,36 +1,17 @@
 ---
-title: Dashboard
+title: Project Dashboard
 ---
 
 
-The **Dashboard** provides the following options:
+The **project dashboard** provides a summary of your most recent projects, reports, and tasks. Click a project, report 
-* Quickly access the summarized monitoring of recently updated projects and their experiments
+or task to quickly access it.
-* Create new projects 
-* Open the [**Orchestration**](webapp_workers_queues.md) tab to autoscale, monitor, and manage your resource usage and 
-  worker queues.
 
 ![Dashboard](../img/webapp_dashboard.png#light-mode-only)
 ![Dashboard](../img/webapp_dashboard_dark.png#dark-mode-only)
 
-**To select a project, experiment, or model:**
+To access the [projects page](webapp_projects_page.md), click the `View All` button next to the recent projects summary. 
+Similarly, to access the [reports page](webapp_reports.md), click the `View All` button next to the recent reports summary.
 
-* A project or all projects - to view activity for all experiments in a project.
+To create a new project, click the `+ New Project` button. Similarly, to create a new report, click the `+ New Report`.
-    * In **RECENT PROJECTS**, click a specific project's card or **VIEW ALL**
 
-* An experiment - to view experiment results, edit an experiment, enqueue an experiment to execute, etc.
+To access the [orchestration page](webapp_workers_queues.md), click `Manage Workers and Queues` (Open Source)/`Orchestration Control Center`.
-    * In **RECENT EXPERIMENTS**, click the experiment.
-    * In **RECENT PROJECTS**, click a project or **VIEW ALL** **>** Click the experiment.
-
-* A model - to view a model's configuration, label enumeration, or other details.
-    * From an experiment, click **ARTIFACTS** **>** In **Input Model** or **Output Model**, click the model.
-    * In **RECENT PROJECTS**, click a project or **VIEW ALL** **>** **MODELS** tab **>** Click the model.
-    
-**To create a new project:**
-
-1. Click **+ NEW PROJECT**
-1. Enter the project name, and, optionally, the description and default output destination
-1. Click **CREATE PROJECT**
-
-**To autoscale, monitor, and manage your resource usage and workers queues:**
-
-* Click **MANAGE WORKERS AND QUEUES** to go to the [**Orchestration**](webapp_workers_queues.md) page.

docs/webapp/webapp_model_table.md

@@ -11,6 +11,10 @@ using the buttons on the top left of the page. Use the table view for a comparat
 columns of interest. Use the details view to access a selected model's details, while keeping the model list in view. 
 Details view can also be accessed by double-clicking a specific model in the table view to open its details view. 
 
+Use the search bar <img src="/docs/latest/icons/ico-search.svg" alt="Magnifying glass" className="icon size-md space-sm" /> 
+to find specific models. You can query by the model name, ID and description. To search using regex, click the `.*` 
+icon on the search bar.
+
 You can archive models so the model table doesn't get too cluttered. Click **OPEN ARCHIVE** on the top of the
 table to open the archive and view all archived models. From the archive, you can restore 
 models to remove them from the archive, and permanently delete models.

docs/webapp/webapp_overview.md

@@ -3,11 +3,13 @@ title: WebApp
 ---
 
 The **ClearML Web UI** is the graphical user interface for the ClearML platform, which includes:
-* Task management
+* ML workload automation
-* Browsing
+* Resource utilization monitoring and management 
-* Resource utilization monitoring
+* Live model endpoint monitoring
-* Profile management
+* ML experiment management and visualization 
-* Direct access to the ClearML community (Slack channel, YouTube, and GitHub).
+* Model and Dataset viewing and management
+* Pipeline creation and monitoring
+* User and administrator settings
 
 ![WebApp screenshots gif](../img/gif/webapp_screenshots.gif#light-mode-only)
 ![WebApp screenshots gif](../img/gif/webapp_screenshots_dark.gif#dark-mode-only)
@@ -15,43 +17,46 @@ The **ClearML Web UI** is the graphical user interface for the ClearML platform,
 ## UI Modules 
 The WebApp's sidebar provides access to the following modules:
 
-* <img src="/docs/latest/icons/ico-homepage.svg" alt="Homepage" className="icon size-md space-md" />[Dashboard](webapp_home.md) - The dashboard for recent activity and quick access to tasks and projects. 
+* <img src="/docs/latest/icons/ico-applications.svg" alt="ClearML Apps" className="icon size-md space-md" />[Applications](applications/apps_overview.md) - ClearML's GUI applications for no-code workflow execution (available in the ClearML Pro and Enterprise plans).
-
+* <img src="/docs/latest/icons/ico-workers.svg" alt="Workers and Queues" className="icon size-md space-md" />[Orchestration](webapp_workers_queues.md) - Autoscaling, resource usage monitoring and allocation management.
+* <img src="/docs/latest/icons/ico-model-endpoints.svg" alt="Model endpoints" className="icon size-md space-md" />[Model Endpoints](webapp_model_endpoints.md) - Monitor your live model endpoints. 
+* <img src="/docs/latest/icons/ico-side-bar-datasets.svg" alt="Datasets" className="icon size-md space-md" />[Datasets](datasets/webapp_dataset_page.md) - View and manage your datasets.
 * <img src="/docs/latest/icons/ico-projects.svg" alt="Projects" className="icon size-md space-md" />[Projects](webapp_projects_page.md) - The main experimentation page. Access your tasks and models as they are organized into projects. The tasks and models are displayed in tables which let you:
   * Track ongoing tasks and visualize their results
-  * Reproduce previously run tasks 
+  * Reproduce previous task runs 
-  * Tune tasks with no code change 
+  * Tune task parameter values with no code change
-  * Compare tasks 
+  * Compare tasks and models
-  * Share tasks and their models with other ClearML hosted service users
+  * Share tasks and models with other ClearML hosted service users
-*  <img src="/docs/latest/icons/ico-side-bar-datasets.svg" alt="Datasets" className="icon size-md space-md" />[Datasets](datasets/webapp_dataset_page.md) - View and manage your datasets. 
+  * Create and share rich content [Reports](webapp_reports.md)
 * <img src="/docs/latest/icons/ico-pipelines.svg" alt="Pipelines" className="icon size-md space-md" />[Pipelines](pipelines/webapp_pipeline_page.md) - View and manage your pipelines.
-* <img src="/docs/latest/icons/ico-model-endpoints.svg" alt="Model endpoints" className="icon size-md space-md" />[Model Endpoints](webapp_model_endpoints.md) - Monitor your live model endpoints. 
-* <img src="/docs/latest/icons/ico-reports.svg" alt="Reports" className="icon size-md space-md" />[Reports](webapp_reports.md) - View and manage your reports. 
-* <img src="/docs/latest/icons/ico-workers.svg" alt="Workers and Queues" className="icon size-md space-md" />[Orchestration](webapp_workers_queues.md) - Autoscale, monitor, and manage your resource usage and workers queues. 
-* <img src="/docs/latest/icons/ico-applications.svg" alt="ClearML Apps" className="icon size-md space-md" />[Applications](applications/apps_overview.md) - ClearML's GUI applications for no-code workflow execution (available in the ClearML Pro and Enterprise plans).
 
 ## UI Top Bar 
 ### Settings Menu
 
 Click the profile menu button <img src="/docs/latest/icons/ico-me.svg" alt="Profile button" className="icon size-lg space-sm" />
-in the top right corner of the web UI screen to access the following:
+to access the following:
-* **Settings** - Navigate to ClearML's user [Settings](settings/webapp_settings_profile.md) page:
+* **Settings** - Navigate to ClearML's [Settings](settings/webapp_settings_profile.md) page:
-  * Set [WebApp preferences](settings/webapp_settings_profile.md)
+  * Set personal [WebApp preferences](settings/webapp_settings_profile.md)
   * Manage [workspace API credentials](settings/webapp_settings_profile.md#clearml-api-credentials) 
+  * Manage [personal configuration vault](settings/webapp_settings_profile.md#configuration-vault) (Enterprise offering)
   * Configure [cloud storage access credentials](settings/webapp_settings_profile.md#browser-cloud-storage-access) for the ClearML Web UI
-  * ClearML Hosted service specific options
+  * Administrator settings
     * Manage [users and workspaces](settings/webapp_settings_users.md)
-    * Manage [resource access permissions](settings/webapp_settings_access_rules.md) (available in the ClearML Enterprise plan)
+    * View [usage and billing](settings/webapp_settings_usage_billing.md) information (Free Hosted Service)
+    * Manage [access rules](settings/webapp_settings_access_rules.md) (available in the ClearML Enterprise plan)
     * Define [configuration vaults](settings/webapp_settings_admin_vaults.md) to apply to designated user groups (available in the ClearML Enterprise plan)
     * Manage [server identity providers](settings/webapp_settings_id_providers.md) (available in the ClearML Enterprise plan)
-    * Define the [available resources](settings/webapp_settings_resource_configs.md) and the way in which they will be 
+    * Define the [resource access policies](settings/webapp_settings_resource_configs.md) (available in the ClearML Enterprise plan)
-    allocated to different workloads (available in the ClearML Enterprise plan)
+* Workspace Control (Free Hosted Service)
-    * View [billing and usage](settings/webapp_settings_usage_billing.md) information
   * **Invite a User** to your workspace (supported in hosted service). Click **Invite a User** > input user's 
   email > click **ADD** > page redirects to the [Users & Groups](settings/webapp_settings_users.md#user-groups) section of 
   the **Settings** page 
   * **Switch to Workspace** - Hosted service users can be members of multiple workspaces. These workspaces are listed here. 
   Click a workspace to switch to.
+* Appearance - Select the UI color scheme:
+  * Light: ClearML will be in a light theme.
+  * Dark: ClearML will be in a dark theme.
+  * System: ClearML will follow your device’s theme.
 * **Logout** of ClearML 
 
 ### Finding What You're Looking for
@@ -60,20 +65,12 @@ to find your ClearML resources.
 
 To search using regex, click the `.*` icon on the search bar. 
 
-Search results are returned for the different ClearML objects:
+The search functionality is tailored to each page, returning results specific to the object type displayed on the page. 
-* Tasks - Searching a task table looks for matches in the tasks' name, ID, description and input and 
+For example, searching a task table looks for matches in the tasks' name, ID, description and input and output models. 
-output models. The enterprise version also includes task Dataviews' hyper-datasets and versions. 
+On the reports page, it matches reports by name, ID, tags, project, description, and content. Similarly, searches in 
-* Models - Searching a Model table looks for matches in the models' name, ID and description.
+models, datasets, pipelines, dataviews, and annotations, focus on attributes relevant to their respective objects.
-* Dataviews (Enterprise only) - Searching a Dataview table looks for matches in the Dataviews' name, ID, description, 
-hyper-datasets, and versions.
-* Datasets - Searching the datasets page looks for matches in the datasets' name, ID, and description. In a dataset's
-version table, a search looks for matches in the versions' name, ID, and description. 
-* Pipelines - Searching the pipelines page looks for matches in the datasets' name, ID, and description. In a pipeline
-run's table, a search looks for matches in the runs' name and ID. 
-* Reports - Searching the reports page looks for matches in the reports' name, ID, tags, project, description, and 
-report content.
 
-The search bar in the [Dashboard](webapp_home.md) page searches the whole WebApp for objects that match queries as 
+The search bar in the [Project Dashboard](webapp_home.md) page searches the whole WebApp for objects that match queries as 
 specified above and returns results divided by object type (projects, tasks, models, etc.). 
 
 :::tip Additional filtering

docs/webapp/webapp_projects_page.md

@@ -18,6 +18,10 @@ contents (i.e. tasks, models etc.) via the folder with the bracketed (`[ ]`) pro
 If a project does not contain any subprojects, clicking on its folder will open its task table (or [Project Overview](webapp_project_overview.md)
 page when relevant).
 
+Use the search bar <img src="/docs/latest/icons/ico-search.svg" alt="Magnifying glass" className="icon size-md space-sm" /> 
+to find specific projects. You can query by the project’s name and ID.
+To search using regex, click the `.*` icon on the search bar.
+
 ## Project Folders
 
 Project folders display summarized project information:  

docs/webapp/webapp_reports.md

@@ -175,6 +175,10 @@ or in List view <img src="/docs/latest/icons/ico-flat-view.svg" alt="List view"
 view, all reports are shown side-by-side. In Project view, reports are organized according to their projects, and 
 top-level projects are displayed. Click on a project card to view the project's reports.
 
+Use the search bar <img src="/docs/latest/icons/ico-search.svg" alt="Magnifying glass" className="icon size-md space-sm" /> 
+to find specific reports. You can query by the report name, ID, tags, project, description, and report content.
+To search using regex, click the `.*` icon on the search bar.
+
 ![Report page](../img/webapp_report_page.png#light-mode-only)
 ![Report page](../img/webapp_report_page_dark.png#dark-mode-only)
 

sidebars.js

@@ -470,68 +470,6 @@ module.exports = {
             label: 'WebApp',
             link: {type: 'doc', id: 'webapp/webapp_overview'},
             items: [
-                'webapp/webapp_home',
-                {'Projects': [
-                    'webapp/webapp_projects_page',
-                    'webapp/webapp_project_overview',
-                    {'Tasks': [
-                        'webapp/webapp_exp_table',
-                        'webapp/webapp_exp_track_visual',
-                        'webapp/webapp_exp_reproducing',
-                        'webapp/webapp_exp_tuning',
-                        'webapp/webapp_exp_comparing'
-                    ]},
-                    {'Models': [
-                        'webapp/webapp_model_table',
-                        'webapp/webapp_model_viewing',
-                        'webapp/webapp_model_comparing'
-                    ]},
-                    {'Dataviews': [
-                        'hyperdatasets/webapp/webapp_dataviews',
-                        'hyperdatasets/webapp/webapp_exp_track_visual',
-                        'hyperdatasets/webapp/webapp_exp_modifying',
-                        'hyperdatasets/webapp/webapp_exp_comparing'
-                    ]},
-                    'webapp/webapp_exp_sharing'
-                ]},
-                {'Datasets': [
-                    'webapp/datasets/webapp_dataset_page',
-                    'webapp/datasets/webapp_dataset_viewing'
-                ]},
-                {'Hyper-Datasets': [
-                    'hyperdatasets/webapp/webapp_datasets',
-                    'hyperdatasets/webapp/webapp_datasets_versioning',
-                    'hyperdatasets/webapp/webapp_datasets_frames',
-                    'hyperdatasets/webapp/webapp_annotator'
-                ]},
-                {'Pipelines': [
-                    'webapp/pipelines/webapp_pipeline_page',
-                    'webapp/pipelines/webapp_pipeline_table',
-                    'webapp/pipelines/webapp_pipeline_viewing'
-                ]},
-                'webapp/webapp_model_endpoints',
-                'webapp/webapp_reports',
-                {
-                    type: 'category',
-                    collapsible: true,
-                    collapsed: true,
-                    label: 'Orchestration',
-                    link: {type: 'doc', id: 'webapp/webapp_workers_queues'},
-                    items: [
-                        'webapp/webapp_orchestration_dash',
-                        {
-                            type: 'category',
-                            collapsible: true,
-                            collapsed: true,
-                            label: 'Autoscalers',
-                            items: [
-                                'webapp/applications/apps_aws_autoscaler',
-                                'webapp/applications/apps_gcp_autoscaler',
-                            ]
-                        },
-                        'webapp/resource_policies'
-                    ]
-                },
                 {
                     type: 'category',
                     collapsible: true,
@@ -561,6 +499,70 @@ module.exports = {
                         ]},
                     ]
                 },
+                {
+                    type: 'category',
+                    collapsible: true,
+                    collapsed: true,
+                    label: 'Orchestration',
+                    link: {type: 'doc', id: 'webapp/webapp_workers_queues'},
+                    items: [
+                        'webapp/webapp_orchestration_dash',
+                        {
+                            type: 'category',
+                            collapsible: true,
+                            collapsed: true,
+                            label: 'Autoscalers',
+                            items: [
+                                'webapp/applications/apps_aws_autoscaler',
+                                'webapp/applications/apps_gcp_autoscaler',
+                            ]
+                        },
+                        'webapp/resource_policies'
+                    ]
+                },
+                'webapp/webapp_model_endpoints',
+                {'Datasets': [
+                    'webapp/datasets/webapp_dataset_page',
+                    'webapp/datasets/webapp_dataset_viewing'
+                    ]
+                },
+                {'Hyper-Datasets': [
+                    'hyperdatasets/webapp/webapp_datasets',
+                    'hyperdatasets/webapp/webapp_datasets_versioning',
+                    'hyperdatasets/webapp/webapp_datasets_frames',
+                    'hyperdatasets/webapp/webapp_annotator'
+                ]},
+                {'Projects': [
+                    'webapp/webapp_home',
+                    'webapp/webapp_projects_page',
+                    'webapp/webapp_project_overview',
+                    {'Tasks': [
+                        'webapp/webapp_exp_table',
+                        'webapp/webapp_exp_track_visual',
+                        'webapp/webapp_exp_reproducing',
+                        'webapp/webapp_exp_tuning',
+                        'webapp/webapp_exp_comparing'
+                    ]},
+                    {'Models': [
+                        'webapp/webapp_model_table',
+                        'webapp/webapp_model_viewing',
+                        'webapp/webapp_model_comparing'
+                    ]},
+                    {'Dataviews': [
+                        'hyperdatasets/webapp/webapp_dataviews',
+                        'hyperdatasets/webapp/webapp_exp_track_visual',
+                        'hyperdatasets/webapp/webapp_exp_modifying',
+                        'hyperdatasets/webapp/webapp_exp_comparing'
+                    ]},
+                    'webapp/webapp_exp_sharing',
+                    'webapp/webapp_reports',
+                ]},
+                {'Pipelines': [
+                    'webapp/pipelines/webapp_pipeline_page',
+                    'webapp/pipelines/webapp_pipeline_table',
+                    'webapp/pipelines/webapp_pipeline_viewing'
+                ]},
+
                 {
                     type: 'category',
                     collapsible: true,