Added Studio docs

content/docs/sidebar.json

@@ -525,5 +525,27 @@
         "slug": "dvclive-with-dvc"
       }
     ]
+  },
+  {
+    "label": "Studio",
+    "slug": "studio",
+    "source": "studio/index.md",
+    "icon": "studio",
+    "children": [
+      {
+        "label": "Get started",
+        "slug": "get-started"
+      },
+      {
+        "label": "Create a View",
+        "slug": "create-view"
+      },
+      {
+        "label": "Visualize experiments",
+        "slug": "visualize-exp"
+      },
+      "run-experiments",
+      "teams"
+    ]
   }
 ]

content/docs/studio/create-view.md

@@ -0,0 +1,54 @@
+# Create a View
+
+To create a new view for your repository, follow these steps.
+
+1. Click on add a View. All the organizations that you have access to will be
+   listed. ![](/img/studio/create_view.png)
+
+2. Open the organization whose repository you want to connect to. You can also
+   use the search bar to search directly by the name of the repo to which you
+   want to connect. ![](/img/studio/select_repo.png)
+
+3. Select the Git repository for which you want to create a view. For this,
+   hover over the required repository and click on Connect.
+
+4. Once you click on connect, you will be able to specify advanced settings for
+   the connection. ![](/img/studio/view_settings.png)
+
+In most scenarios, you can skip the advanced settings. Refer to the 'Advanced
+Settings' section to understand when you need to specify these settings.
+
+5. Now, you will see that a view has been added in your dashboard.
+   ![](/img/studio/view_added.png)
+
+## Advanced Settings
+
+You will need to speciy advanced settings in the following scenarios.
+
+_Note that you can skip these settings when creating the view. You will be able
+to edit the advanced settings later (after you have created the view)._
+
+1. **Monorepo:** If you have connected to a monorepo, then specify the full path
+   to the root directory for the project that you want to connect to.
+
+2. **Data remote:** The metrics and params that you want to include in the view
+   may be present in a data remote (cloud storage or another location outside of
+   the Git repo). If you want to include such data in your views, then you will
+   have to grant DVC Studio access to the data remote. This access will have to
+   be provided after you have connected to the repository. When creating the
+   view, you can skip this setting.
+
+3. **Custom files:** DVC Studio automatically detects metrics, plots, and
+   parameters files specified in the project's dvc.yaml. If you want to connect
+   custom files, you can add them by clicking on the ‘Add file’ button. Enter
+   the full file path, and specify whether the file is for Metrics or
+   Parameters.
+
+## Share a view
+
+You can share your views on the web. Simply click on the button labeled
+"Private" next to the name of the view. In the modal that comes up, turn on
+"Share to Web". ![](/img/studio/view_share.png)
+
+You can change a shared (public) view and make it private by turning off "Share
+to Web".

content/docs/studio/experiments.md

@@ -0,0 +1,30 @@
+# Run Experiments
+
+You can also run your ML experiments directly from DVC Studio. Your regular
+CI/CD set-up is used to run the experiments. For instance, Github Actions can be
+defined for your Github repositories, to run the ML experiment on any new
+commit.
+
+DVC Studio provides you a simple user interface to specify all the changes that
+you want to make to your input datasets and hyperparameters. Once you have made
+all the necessary changes, you can commit the changes to your Git repository
+directly from Studio and invoke your CI/CD pipeline.
+
+To run experiments from DVC Studio, select the commit that you want to use and
+click on the Run button. An input form will be generated for you to enter all
+the input files and parameters that you want to use in your experiment.
+
+<img src="/img/studio/cml.png" alt="drawing" width="300"/>
+
+The values listed in this form by default are extracted from your selected
+commit. Change the input files or parameters according to what experiment you
+want to run. For instance, in the given example, you can increase `max_features`
+to 4000 or decrease `ngrams` to 1.
+
+After making all the necessary input changes, click on Start commit. Enter your
+commit messages, select the branch you want to commit to (the same branch as the
+base branch or a new branch), and click on Commit changes.
+
+Now, if your refresh the View details page, the experiment (ie, the commit that
+you just pushed) will be included in the list of all commits, along with the
+results (metrics) of the experiment.

content/docs/studio/get-started.md

@@ -0,0 +1,71 @@
+# Get started
+
+Here, we will walk you through a tutorial to use DVC Studio for collaboration on
+your ML projects. You will need access to Github, Gitlab or Bitbucket account
+which has the Git repositories that you want to connect to from DVC Studio. When
+you connect to the repositories, DVC Studio creates views from those
+repositories.
+
+## What is a view?
+
+A view is an interative presentation of data about the experiments that you have
+run in your ML project. DVC Studio automatically identifies datasets, metrics
+and hyperparameters in your ML experiments. You can also add custom files with
+the required data (more on this later). Using this data, DVC Studio creates a
+summary view, and you can drill down the summary view to visualize all the data
+across all your experiments in a table. You can also generate plots and compare
+experiments using the views.
+
+## Access your first view
+
+In your browser, open https://viewer.iterative.ai/ Sign in with your Github,
+Gitlab, or Bitbucket account.
+
+![](/img/studio/login_home.png) _When you first login, an example view is
+already created for you to explore, and you can add more views._
+
+When you first login, you will find that there already exists a view connecting
+to a public Git repository for an example DVC project. Use this view to explore
+the features that DVC Studio has to offer.
+
+## Components of a view
+
+DVC Studio automatically identifies datasets, metrics and hyperparameters in
+your ML experiments. Each view on the dashboard displays the metrics. In the
+example view shown above, you can see that `avg_prec` and `roc_auc` metrics are
+displayed.
+
+You can dive deep into all the experiments committed to the repo. For this, open
+the view by clicking on the view name (in this case, example-get-started).
+
+A detailed tabular display of your view will be generated as shown below. This
+table includes not just metrics, but also hyperparameters and informatoin about
+the datasets. All the data is flattened and neatly presented for your to
+visually evaluate the experiments as well as compare multiple experiements with
+one another.
+
+![](/img/studio/main.png) _Replace this image with an image that has labels for
+the individual sections._
+
+This tabular display has the following components:
+
+1. The branches on your Git repository.
+2. All the commits in the branches. Each commit represents an experiment. Each
+   commit is on a single row in the table.
+3. Values of all the metrics, files and parameters in the given commits. The
+   different types of values are presented in different columns in the table.
+4. Following buttons for performing actions:
+   - **Filters:** Filter commits
+   - **Columns:** Select columns to display
+   - **Show plots:** Show plots, by selecting one or more commits that have
+     plots
+   - **Compare:** Compare different experiements
+   - **Run:** Run experiments, by selecting any one commit (Refer here for how
+     to run experiments)
+   - **Trends:** Generate trend charts to show how the metrics eveolved over
+     time
+   - **Delta mode:** Change the displayed values to be differentials over the
+     values in the first row
+
+You can connect to additional repositories and add more views as needed. In the
+next section, we will show you how you can do this.

content/docs/studio/index.md

@@ -0,0 +1,26 @@
+# DVC Studio
+
+[`DVC Studio`](https://viewer.iterative.ai/) is a comprehensive and interactive
+collboration tool for your Machine Learning projects.
+
+Using the power of leading open-source tools DVC, CML and Git, it enables you to
+seamlessly manage data and models, run and track experiments, and visualize and
+share results.
+
+Project website: https://viewer.iterative.ai
+
+![](/img/studio/main.png) _DVC Studio lets you not just visualize and share
+results, but also run and track experiments but a single intuitive dashboard.
+Above, an example dashboard for an exmaple project._
+
+Use DVC, CML and Studio to:
+
+- **Visualize, collaborate, and do everything that a regular ML tracking tool
+  does.**
+
+- **Keep your code, data and model connected at all times.**
+
+- **Use the power of Git to track and preserve all your experiments.**
+
+- **Run CI/CD for your ML projects on cloud resources of your choice without any
+  new tools.**

content/docs/studio/teams.md

@@ -0,0 +1,73 @@
+# Teams
+
+So far, you have seen how you can create personal and public views. In this
+section, we will illustrate how you can create teams. In Studio, you can define
+teams with one or more team members. The team members are also called
+collaborators, and you can assign different roles to the collaborators. The
+views that you create in your team's page will be accessible to all members of
+the team.
+
+## Roles
+
+Team members can have different roles.
+
+- **View.** Users with the View access cannot edit team settings or create new
+  views within the team's page. They have read-only access to the views created
+  by other team members.
+- **Edit.** In addition to accessing all the team's views, users with the Edit
+  role can also create new views for the team, edit the views' settings, and run
+  experiments.
+- **Admin.** Admin users have full access to the team's views and settings. They
+  can do everything that viewers and editors can do. Additionally, they can add
+  (invite) and remove collaborators as well as change team settings such as
+  cloud credentials (data remotes).
+
+## Create a team
+
+To create a team, click on the drop down next to "Personal". All the teams that
+you have created so far will be listed within "Teams" in the drop down menu. If
+you have not created any team so far, this list will be empty. Now, click on
+"Create a team". ![](/img/studio/team_create.png)
+
+You will be asked to enter the URL namespace for your team. Enter a unique name.
+The URL for your team will be formed using this name.
+![](/img/studio/team_enter_name.png)
+
+Then, click on the "Create team" button on the top right corner.
+
+## Invite collaborators
+
+The next step is to invite the team members (or collaborators) for your team.
+You can also choose to skip adding collaborators at this point. For this, click
+on **Skip and Close** on the top right corner. You will be able to add
+collaborators by accessing team settings later.
+
+If you wish to add collaborators now, enter their email addresses. An email
+invite will be sent to each invitee, and they will have to join using their
+Github, Gitlab or Bitbucket account.
+
+You can add multiple collaborators. Each collaborator can be assigned the Admin,
+Edit, or View role. ![](/img/studio/team_roles.png)
+
+Once you have added the people that you wish to add to your team, click on
+**Send Invites and Close** on the top right corner.
+
+## Perform actions within the team's page
+
+Once you have created the team, the team's page opens up.
+
+![](/img/studio/team_page.png)
+
+On this page, you can perform three types of tasks:
+
+- **Add a view.** Click on the **View** menu item to add views to the team's
+  page. The process for adding a view is the same as that for adding personal
+  views (instructions). However, the views that you create within the team will
+  be accessible to all members (collaborators) of the team.
+
+- **Edit collaborators.** You can click on the Team menu item to edit the
+  collaborators in the team.
+
+- **Change settings.** Finally, you can click on the Settings menu item to --
+  change the team name, -- add credentials for the data remotes, and -- delete
+  the team. ![](/img/studio/team_settings.png)

content/docs/studio/visualize-exp.md

@@ -0,0 +1,42 @@
+# Visualize and compare experiements
+
+You can visualize and compare experiements using a variety of tools.
+
+## Generate metric plots
+
+You can visualize certain metrics of machine learning experiments as plots.
+Usual plot examples are AUC curves, loss functions, confusion matrices, among
+others. This type of metrics files are created by users, or generated by user
+data processing code, and can be defined in dvc.yaml (plots field) for tracking
+(optional). Refer to the [DVC plots documentation](/doc/command-reference/plots)
+for details on how plots are generated.
+
+To generate metric plots, select one or more experiements (represented by the
+commits), and click on the 'Show plots' button.
+
+<img src="/img/studio/select_commits.png" alt="drawing" width="300"/>
+
+The plots will appear below the tabular display. If you have selected more than
+one experiment, you can use the plots to compare them.
+
+<img src="/img/studio/plots.png" alt="drawing" width="300"/>
+
+_Here, 2 experiments were selected for comparison using plots._
+
+## Generate trend charts
+
+Click on the Trends button to generate a plot of how the metrics changed over
+the course of the different experiments. For each metric, the trend charts show
+how the metric changed from one commit to another within a single branch in the
+repository.
+
+<img src="/img/studio/trends.png" alt="drawing" width="300"/>
+
+## Compare experiements
+
+To compare different experiements, select two or more experiements (represented
+by the commits), and click on the 'Compare' icon. The metrics, parametes and
+files in the selected experiments will be displayed side by side for easy
+comparison.
+
+<img src="/img/studio/compare.png" alt="drawing" width="300"/>

src/components/Documentation/Layout/SidebarMenu/index.tsx

@@ -11,6 +11,7 @@ import Link from '../../../Link'
 import { ReactComponent as ExternalLinkIcon } from './external-link-icon.svg'
 import { ReactComponent as HouseIcon } from './house.svg'
 import { ReactComponent as CMLIcon } from './cml_bw_logo.svg'
+import { ReactComponent as StudioIcon } from './studio_icon.svg'
 
 import {
   structure,
@@ -25,7 +26,8 @@ import styles from './styles.module.css'
 // Use the key string here as the "icon" field in sidebar.json
 const ICONS: { [key: string]: React.FC<{ className?: string }> } = {
   house: HouseIcon,
-  cml: CMLIcon
+  cml: CMLIcon,
+  studio: StudioIcon
 }
 
 interface ISidebarMenuItemProps {