Add "views" section to sidebar (#2760)

* add a "Show Plots and Experiments" command to command palette
* replaces the view buttons, "Add Sort" and "Add Filter" with links to stop the sidebar from looking crowded
* moves "plots" view to be above "sort" and "filter" views since it's of higher importance

Author: julieg18

extension/package.json

@@ -391,6 +391,11 @@
         "category": "DVC",
         "icon": "$(graph-scatter)"
       },
+      {
+        "title": "%command.showPlotsAndExperiments%",
+        "command": "dvc.showPlotsAndExperiments",
+        "category": "DVC"
+      },
       {
         "title": "%command.stopRunningExperiment%",
         "command": "dvc.stopRunningExperiment",
@@ -781,6 +786,10 @@
           "command": "dvc.showPlots",
           "when": "dvc.commands.available && dvc.project.available"
         },
+        {
+          "command": "dvc.showPlotsAndExperiments",
+          "when": "dvc.commands.available && dvc.project.available"
+        },
         {
           "command": "dvc.stopRunningExperiment",
           "when": "dvc.commands.available && dvc.project.available && dvc.experiment.running"
@@ -1297,6 +1306,11 @@
         }
       ],
       "dvc-views": [
+        {
+          "id": "dvc.views.webviews",
+          "name": "Views",
+          "when": "dvc.commands.available && dvc.project.available"
+        },
         {
           "id": "dvc.views.experimentsColumnsTree",
           "name": "Columns",
@@ -1312,6 +1326,11 @@
           "name": "Experiments",
           "when": "dvc.commands.available && dvc.project.available"
         },
+        {
+          "id": "dvc.views.plotsPathsTree",
+          "name": "Plots",
+          "when": "dvc.commands.available && dvc.project.available"
+        },
         {
           "id": "dvc.views.experimentsSortByTree",
           "name": "Sort By",
@@ -1322,18 +1341,18 @@
           "name": "Filter By",
           "when": "dvc.commands.available && dvc.project.available"
         },
-        {
-          "id": "dvc.views.plotsPathsTree",
-          "name": "Plots",
-          "when": "dvc.commands.available && dvc.project.available"
-        },
         {
           "id": "dvc.views.support",
           "name": "Support"
         }
       ]
     },
     "viewsWelcome": [
+      {
+        "view": "dvc.views.webviews",
+        "contents": "[Open experiments](command:dvc.showExperiments)\n[Open plots](command:dvc.showPlots)\n[Open both views](command:dvc.showPlotsAndExperiments)",
+        "when": "dvc.commands.available && dvc.project.available"
+      },
       {
         "view": "dvc.views.welcome",
         "contents": "New to the extension?\n[Show Walkthrough](command:dvc.getStarted)\n\n",
@@ -1367,16 +1386,16 @@
         "contents": "No Experiments to Display."
       },
       {
-        "view": "dvc.views.experimentsSortByTree",
-        "contents": "No Sorts Applied. \n[$(add) Add Sort](command:dvc.addExperimentsTableSort)\n"
+        "view": "dvc.views.plotsPathsTree",
+        "contents": "No Plots to Display."
       },
       {
-        "view": "dvc.views.experimentsFilterByTree",
-        "contents": "No Filters Applied. \n[$(add) Add Filter](command:dvc.addExperimentsTableFilter)\n"
+        "view": "dvc.views.experimentsSortByTree",
+        "contents": "No Sorts Applied. [Add Sort](command:dvc.addExperimentsTableSort)\n"
       },
       {
-        "view": "dvc.views.plotsPathsTree",
-        "contents": "No Plots to Display."
+        "view": "dvc.views.experimentsFilterByTree",
+        "contents": "No Filters Applied. [Add Filter](command:dvc.addExperimentsTableFilter)\n"
       },
       {
         "view": "dvc.views.support",

extension/package.nls.json

@@ -54,6 +54,7 @@
   "command.showExperiments": "Show Experiments",
   "command.showOutput": "Show DVC Output",
   "command.showPlots": "Show Plots",
+  "command.showPlotsAndExperiments": "Show Plots and Experiments",
   "command.stopRunningExperiment": "Stop Running Experiment",
   "command.views.experimentsColumnsTree.selectColumns": "Select Columns to Display in the Experiments Table",
   "command.views.experimentsFilterByTree.removeAllFilters": "Remove All Filters From Experiments Table",

extension/src/commands/external.ts

@@ -71,6 +71,8 @@ export enum RegisteredCommands {
   PLOTS_SELECT = 'dvc.views.plotsPathsTree.selectPlots',
   PLOTS_REFRESH = 'dvc.views.plotsPathsTree.refreshPlots',
 
+  PLOTS_AND_EXPERIMENT_SHOW = 'dvc.showPlotsAndExperiments',
+
   EXTENSION_CHECK_CLI_COMPATIBLE = 'dvc.checkCLICompatible',
   EXTENSION_GET_STARTED = 'dvc.getStarted',
   EXTENSION_SETUP_WORKSPACE = 'dvc.setupWorkspace',

extension/src/extension.ts

@@ -1,4 +1,11 @@
-import { commands, env, Event, EventEmitter, ExtensionContext } from 'vscode'
+import {
+  commands,
+  env,
+  Event,
+  EventEmitter,
+  ExtensionContext,
+  ViewColumn
+} from 'vscode'
 import { DvcExecutor } from './cli/dvc/executor'
 import { DvcRunner } from './cli/dvc/runner'
 import { DvcReader } from './cli/dvc/reader'
@@ -22,7 +29,11 @@ import { ExperimentsColumnsTree } from './experiments/columns/tree'
 import { ExperimentsSortByTree } from './experiments/model/sortBy/tree'
 import { ExperimentsTree } from './experiments/model/tree'
 import { ExperimentsFilterByTree } from './experiments/model/filterBy/tree'
-import { setContextValue } from './vscode/context'
+import {
+  Context as VsCodeContext,
+  getDvcRootFromContext,
+  setContextValue
+} from './vscode/context'
 import { OutputChannel } from './vscode/outputChannel'
 import {
   getFirstWorkspaceFolder,
@@ -227,6 +238,19 @@ export class Extension extends Disposable implements IExtension {
 
     registerExperimentCommands(this.experiments, this.internalCommands)
     registerPlotsCommands(this.plots, this.internalCommands)
+    this.internalCommands.registerExternalCommand(
+      RegisteredCommands.PLOTS_AND_EXPERIMENT_SHOW,
+      async (context: VsCodeContext) => {
+        await this.experiments.showWebview(
+          getDvcRootFromContext(context),
+          ViewColumn.Active
+        )
+        await this.plots.showWebview(
+          getDvcRootFromContext(context),
+          ViewColumn.Beside
+        )
+      }
+    )
 
     this.dispose.track(
       commands.registerCommand(RegisteredCommands.STOP_EXPERIMENT, async () => {

extension/src/telemetry/constants.ts

@@ -112,6 +112,7 @@ export interface IEventNamePropertyMapping {
     wasStopped?: boolean
   }
 
+  [EventName.PLOTS_AND_EXPERIMENT_SHOW]: undefined
   [EventName.EXPERIMENT_APPLY]: undefined
   [EventName.EXPERIMENT_AUTO_APPLY_FILTERS]: undefined
   [EventName.EXPERIMENT_DISABLE_AUTO_APPLY_FILTERS]: undefined

extension/src/test/suite/experiments/workspace.test.ts

@@ -65,15 +65,15 @@ suite('Workspace Experiments Test Suite', () => {
 
       const focused = onDidChangeIsWebviewFocused(experiments)
 
-      await workspaceExperiments.showWebview()
+      await workspaceExperiments.showWebview('')
 
       expect(await focused).to.equal(dvcDemoPath)
       expect(mockQuickPickOne).to.be.calledOnce
       expect(workspaceExperiments.getFocusedWebview()).to.equal(experiments)
 
       mockQuickPickOne.resetHistory()
 
-      const focusedExperiments = await workspaceExperiments.showWebview()
+      const focusedExperiments = await workspaceExperiments.showWebview('')
 
       expect(focusedExperiments).to.equal(experiments)
       expect(mockQuickPickOne).to.be.calledOnce
@@ -87,7 +87,7 @@ suite('Workspace Experiments Test Suite', () => {
       const { workspaceExperiments } = buildSingleRepoExperiments(disposable)
       await workspaceExperiments.isReady()
 
-      await workspaceExperiments.showWebview()
+      await workspaceExperiments.showWebview('')
 
       expect(mockQuickPickOne).to.not.be.called
     })
@@ -104,7 +104,7 @@ suite('Workspace Experiments Test Suite', () => {
 
       const focusedWebview = onDidChangeIsWebviewFocused(experiments)
 
-      await workspaceExperiments.showWebview()
+      await workspaceExperiments.showWebview('')
 
       expect(await focusedWebview).to.equal(dvcDemoPath)
 

extension/src/vscode/context.ts

@@ -5,7 +5,7 @@ export const setContextValue = (key: string, value: unknown) =>
 
 export type Context = string | Record<string, unknown> | undefined
 
-export const getDvcRootFromContext = (context: Context): string | undefined => {
+export const getDvcRootFromContext = (context: Context): string => {
   const isDvcRoot = typeof context === 'string'
-  return isDvcRoot ? context : undefined
+  return isDvcRoot ? context : ''
 }

extension/src/webview/factory.ts

@@ -24,14 +24,15 @@ const create = (
 export const createWebview = async (
   viewKey: ViewKey,
   dvcRoot: string,
-  iconPath: Resource
+  iconPath: Resource,
+  viewColumn?: ViewColumn
 ) => {
   const { title, distPath } = WebviewDetails[viewKey]
 
   const webviewPanel = window.createWebviewPanel(
     viewKey,
     title,
-    ViewColumn.Active,
+    viewColumn || ViewColumn.Active,
     {
       enableScripts: true,
       localResourceRoots: [Uri.file(distPath), ...getWorkspaceRootUris()],

extension/src/webview/index.ts

@@ -1,4 +1,4 @@
-import { Event, EventEmitter, WebviewPanel, Uri } from 'vscode'
+import { Event, EventEmitter, WebviewPanel, Uri, ViewColumn } from 'vscode'
 import { Disposable } from '@hediet/std/disposable'
 import { Deferred } from '@hediet/std/synchronization'
 import {
@@ -103,8 +103,8 @@ export class BaseWebview<T extends WebviewData> {
     })
   }
 
-  public reveal() {
-    this.webviewPanel.reveal()
+  public reveal(viewColumn?: ViewColumn) {
+    this.webviewPanel.reveal(viewColumn)
     return this
   }
 

extension/src/webview/repository.ts

@@ -1,4 +1,4 @@
-import { Event, EventEmitter } from 'vscode'
+import { Event, EventEmitter, ViewColumn } from 'vscode'
 import { BaseWebview } from '.'
 import { ViewKey } from './constants'
 import { MessageFromWebview, WebviewData } from './contract'
@@ -38,15 +38,16 @@ export abstract class BaseRepository<
     this.onDidReceivedWebviewMessage = this.receivedWebviewMessage.event
   }
 
-  public async showWebview() {
+  public async showWebview(viewColumn?: ViewColumn) {
     if (this.webview) {
-      return this.webview.reveal()
+      return this.webview.reveal(viewColumn)
     }
 
     const webview = await createWebview(
       this.viewKey,
       this.dvcRoot,
-      this.webviewIcon
+      this.webviewIcon,
+      viewColumn
     )
 
     this.setWebview(webview)