add get started component to plots webview

mattseddon · mattseddon · commit ead0a70cd880 · 2022-05-16T15:05:07.000+10:00
diff --git a/extension/src/plots/index.ts b/extension/src/plots/index.ts
@@ -40,6 +40,8 @@ export class Plots extends BaseRepository<TPlotsData> {
 
   private readonly pathsChanged = this.dispose.track(new EventEmitter<void>())
 
+  private experiments?: Experiments
+
   private plots?: PlotsModel
   private paths?: PathsModel
 
@@ -80,6 +82,8 @@ export class Plots extends BaseRepository<TPlotsData> {
   }
 
   public setExperiments(experiments: Experiments) {
+    this.experiments = experiments
+
     this.plots = this.dispose.track(
       new PlotsModel(this.dvcRoot, experiments, this.workspaceState)
     )
@@ -165,6 +169,11 @@ export class Plots extends BaseRepository<TPlotsData> {
     this.webview?.show({
       checkpoint: this.getCheckpointPlots(),
       comparison: this.getComparisonPlots(),
+      hasPlots: !!this.paths?.hasPaths(),
+      hasSelectedPlots: definedAndNonEmpty(this.paths?.getSelected()),
+      hasSelectedRevisions: definedAndNonEmpty(
+        this.plots?.getSelectedRevisionDetails()
+      ),
       sectionCollapsed: this.plots?.getSectionCollapsed(),
       template: this.getTemplatePlots()
     })
@@ -250,6 +259,10 @@ export class Plots extends BaseRepository<TPlotsData> {
             return this.setTemplateOrder(message.payload)
           case MessageFromWebviewType.REORDER_PLOTS_METRICS:
             return this.setMetricOrder(message.payload)
+          case MessageFromWebviewType.SELECT_PLOTS:
+            return this.selectPlotsFromWebview()
+          case MessageFromWebviewType.SELECT_EXPERIMENTS:
+            return this.selectExperimentsFromWebview()
           default:
             Logger.error(`Unexpected message: ${JSON.stringify(message)}`)
         }
@@ -321,6 +334,20 @@ export class Plots extends BaseRepository<TPlotsData> {
     this.sendCheckpointPlotsAndEvent(EventName.VIEWS_REORDER_PLOTS_METRICS)
   }
 
+  private selectPlotsFromWebview() {
+    this.selectPlots()
+    sendTelemetryEvent(EventName.VIEWS_PLOTS_SELECT_PLOTS, undefined, undefined)
+  }
+
+  private selectExperimentsFromWebview() {
+    this.experiments?.selectExperiments()
+    sendTelemetryEvent(
+      EventName.VIEWS_PLOTS_SELECT_EXPERIMENTS,
+      undefined,
+      undefined
+    )
+  }
+
   private sendCheckpointPlotsAndEvent(
     event:
       | typeof EventName.VIEWS_REORDER_PLOTS_METRICS
diff --git a/extension/src/plots/webview/contract.ts b/extension/src/plots/webview/contract.ts
@@ -130,6 +130,9 @@ export type PlotsData =
   | {
       comparison?: PlotsComparisonData | null
       checkpoint?: CheckpointPlotsData | null
+      hasPlots?: boolean
+      hasSelectedPlots?: boolean
+      hasSelectedRevisions?: boolean
       template?: TemplatePlotsData | null
       sectionCollapsed?: SectionCollapsed
     }
diff --git a/extension/src/telemetry/constants.ts b/extension/src/telemetry/constants.ts
@@ -51,6 +51,8 @@ export const EventName = Object.assign(
     VIEWS_PLOTS_REVISIONS_REORDERED: 'views.plots.revisionsReordered',
     VIEWS_PLOTS_SECTION_RESIZED: 'views.plots.sectionResized',
     VIEWS_PLOTS_SECTION_TOGGLE: 'views.plots.toggleSection',
+    VIEWS_PLOTS_SELECT_EXPERIMENTS: 'view.plots.selectExperiments',
+    VIEWS_PLOTS_SELECT_PLOTS: 'view.plots.selectPlots',
     VIEWS_REORDER_PLOTS_METRICS: 'views.plots.metricsReordered',
     VIEWS_REORDER_PLOTS_TEMPLATES: 'views.plots.templatesReordered',
 
@@ -183,12 +185,14 @@ export interface IEventNamePropertyMapping {
   [EventName.VIEWS_PLOTS_CLOSED]: undefined
   [EventName.VIEWS_PLOTS_CREATED]: undefined
   [EventName.VIEWS_PLOTS_FOCUS_CHANGED]: WebviewFocusChangedProperties
-  [EventName.VIEWS_REORDER_PLOTS_METRICS]: undefined
   [EventName.VIEWS_PLOTS_METRICS_SELECTED]: undefined
-  [EventName.VIEWS_PLOTS_REVISIONS_REORDERED]: undefined
   [EventName.VIEWS_PLOTS_RENAME_SECTION]: { section: Section }
+  [EventName.VIEWS_PLOTS_REVISIONS_REORDERED]: undefined
   [EventName.VIEWS_PLOTS_SECTION_RESIZED]: { section: Section; size: PlotSize }
   [EventName.VIEWS_PLOTS_SECTION_TOGGLE]: Partial<SectionCollapsed>
+  [EventName.VIEWS_PLOTS_SELECT_EXPERIMENTS]: undefined
+  [EventName.VIEWS_PLOTS_SELECT_PLOTS]: undefined
+  [EventName.VIEWS_REORDER_PLOTS_METRICS]: undefined
   [EventName.VIEWS_REORDER_PLOTS_TEMPLATES]: undefined
 
   [EventName.VIEWS_PLOTS_PATH_TREE_OPENED]: DvcRootCount
diff --git a/extension/src/test/suite/plots/index.test.ts b/extension/src/test/suite/plots/index.test.ts
@@ -466,6 +466,58 @@ suite('Plots Test Suite', () => {
     }).timeout(WEBVIEW_TEST_TIMEOUT)
   })
 
+  it('should handle a select experiments message from the webview', async () => {
+    const { plots, experiments } = await buildPlots(
+      disposable,
+      plotsDiffFixture
+    )
+
+    const mockSelectExperiments = stub(
+      experiments,
+      'selectExperiments'
+    ).resolves(undefined)
+
+    const webview = await plots.showWebview()
+
+    const mockSendTelemetryEvent = stub(Telemetry, 'sendTelemetryEvent')
+    const mockMessageReceived = getMessageReceivedEmitter(webview)
+
+    mockMessageReceived.fire({
+      type: MessageFromWebviewType.SELECT_EXPERIMENTS
+    })
+
+    expect(mockSelectExperiments).to.be.calledOnce
+    expect(mockSendTelemetryEvent).to.be.calledOnce
+    expect(mockSendTelemetryEvent).to.be.calledWithExactly(
+      EventName.VIEWS_PLOTS_SELECT_EXPERIMENTS,
+      undefined,
+      undefined
+    )
+  }).timeout(WEBVIEW_TEST_TIMEOUT)
+
+  it('should handle a select plots message from the webview', async () => {
+    const { plots } = await buildPlots(disposable, plotsDiffFixture)
+
+    const mockSelectExperiments = stub(plots, 'selectPlots').resolves(undefined)
+
+    const webview = await plots.showWebview()
+
+    const mockSendTelemetryEvent = stub(Telemetry, 'sendTelemetryEvent')
+    const mockMessageReceived = getMessageReceivedEmitter(webview)
+
+    mockMessageReceived.fire({
+      type: MessageFromWebviewType.SELECT_PLOTS
+    })
+
+    expect(mockSelectExperiments).to.be.calledOnce
+    expect(mockSendTelemetryEvent).to.be.calledOnce
+    expect(mockSendTelemetryEvent).to.be.calledWithExactly(
+      EventName.VIEWS_PLOTS_SELECT_PLOTS,
+      undefined,
+      undefined
+    )
+  }).timeout(WEBVIEW_TEST_TIMEOUT)
+
   describe('showWebview', () => {
     it('should be able to make the plots webview visible', async () => {
       const { plots, messageSpy, mockPlotsDiff } = await buildPlots(
@@ -493,6 +545,9 @@ suite('Plots Test Suite', () => {
       const expectedPlotsData: TPlotsData = {
         checkpoint: checkpointPlotsFixture,
         comparison: comparisonPlotsFixture,
+        hasPlots: true,
+        hasSelectedPlots: true,
+        hasSelectedRevisions: true,
         sectionCollapsed: DEFAULT_SECTION_COLLAPSED,
         template: templatePlotsFixture
       }
diff --git a/extension/src/webview/contract.ts b/extension/src/webview/contract.ts
@@ -25,6 +25,8 @@ export enum MessageFromWebviewType {
   RESIZE_PLOTS = 'resize-plots',
   SORT_COLUMN = 'sort-column',
   TOGGLE_EXPERIMENT = 'toggle-experiment',
+  SELECT_EXPERIMENTS = 'select-experiments',
+  SELECT_PLOTS = 'select-plots',
   TOGGLE_METRIC = 'toggle-metric',
   TOGGLE_PLOTS_SECTION = 'toggle-plots-section',
   VARY_EXPERIMENT_PARAMS_AND_QUEUE = 'vary-experiment-params-and-queue',
@@ -115,6 +117,8 @@ export type MessageFromWebview =
       payload: PlotSectionRenamedPayload
     }
   | { type: MessageFromWebviewType.INITIALIZED }
+  | { type: MessageFromWebviewType.SELECT_EXPERIMENTS }
+  | { type: MessageFromWebviewType.SELECT_PLOTS }
 
 export type MessageToWebview<T extends WebviewData> = {
   type: MessageToWebviewType.SET_DATA
diff --git a/webview/__mocks__/@vscode/webview-ui-toolkit/react.tsx b/webview/__mocks__/@vscode/webview-ui-toolkit/react.tsx
@@ -0,0 +1,14 @@
+/* eslint-disable unicorn/filename-case */
+import React from 'react'
+
+type MockButtonProps = {
+  onClick: () => void
+  children: React.ReactChildren
+}
+
+export const VSCodeButton: React.FC<MockButtonProps> = ({
+  onClick,
+  children
+}: MockButtonProps) => {
+  return <button onClick={onClick}>{children}</button>
+}
diff --git a/webview/package.json b/webview/package.json
@@ -23,6 +23,7 @@
   },
   "dependencies": {
     "@tippyjs/react": "^4.2.6",
+    "@vscode/webview-ui-toolkit": "^1.0.0",
     "classnames": "^2.2.6",
     "react": "^17.0.1",
     "react-beautiful-dnd": "^13.1.0",
diff --git a/webview/src/plots/components/App.test.tsx b/webview/src/plots/components/App.test.tsx
@@ -132,6 +132,35 @@ describe('App', () => {
     expect(emptyState).toBeInTheDocument()
   })
 
+  it('should render the get started buttons when no plots or experiments are selected', async () => {
+    renderAppWithData({
+      checkpoint: null,
+      hasPlots: true,
+      hasSelectedPlots: false,
+      hasSelectedRevisions: false,
+      sectionCollapsed: DEFAULT_SECTION_COLLAPSED
+    })
+    const addPlotsButton = await screen.findByText('Add Plots')
+    const addExperimentsButton = await screen.findByText('Add Experiments')
+
+    expect(addPlotsButton).toBeInTheDocument()
+    expect(addExperimentsButton).toBeInTheDocument()
+
+    mockPostMessage.mockReset()
+
+    fireEvent.click(addPlotsButton)
+
+    expect(mockPostMessage).toBeCalledWith({
+      type: MessageFromWebviewType.SELECT_PLOTS
+    })
+    mockPostMessage.mockReset()
+
+    fireEvent.click(addExperimentsButton)
+    expect(mockPostMessage).toBeCalledWith({
+      type: MessageFromWebviewType.SELECT_EXPERIMENTS
+    })
+  })
+
   it('should render only checkpoint plots when given a message with only checkpoint plots data', () => {
     renderAppWithData({
       checkpoint: checkpointPlotsFixture,
diff --git a/webview/src/plots/components/GetStarted.tsx b/webview/src/plots/components/GetStarted.tsx
@@ -0,0 +1,51 @@
+import React from 'react'
+import { MessageFromWebviewType } from 'dvc/src/webview/contract'
+import { sendMessage } from '../../shared/vscode'
+import { EmptyState } from '../../shared/components/emptyState/EmptyState'
+import { StartButton } from '../../shared/components/button/StartButton'
+
+export type GetStartedProps = {
+  hasPlots?: boolean
+  hasSelectedPlots?: boolean
+  hasSelectedRevisions?: boolean
+}
+
+export const GetStarted = ({
+  hasPlots,
+  hasSelectedPlots,
+  hasSelectedRevisions
+}: GetStartedProps) => {
+  return (
+    <EmptyState>
+      <div>
+        <p>No Plots to Display</p>
+        {hasPlots && (
+          <div>
+            {!hasSelectedPlots && (
+              <StartButton
+                onClick={() =>
+                  sendMessage({
+                    type: MessageFromWebviewType.SELECT_PLOTS
+                  })
+                }
+                text={'Add Plots'}
+              />
+            )}
+            {!hasSelectedRevisions && (
+              <StartButton
+                appearance={!hasSelectedPlots ? 'secondary' : 'primary'}
+                isNested={!hasSelectedPlots}
+                onClick={() =>
+                  sendMessage({
+                    type: MessageFromWebviewType.SELECT_EXPERIMENTS
+                  })
+                }
+                text={'Add Experiments'}
+              />
+            )}
+          </div>
+        )}
+      </div>
+    </EmptyState>
+  )
+}
diff --git a/webview/src/plots/components/Plots.tsx b/webview/src/plots/components/Plots.tsx
@@ -4,6 +4,7 @@ import React, { useEffect, useRef, useState, useCallback } from 'react'
 import VegaLite, { VegaLiteProps } from 'react-vega/lib/VegaLite'
 import { Config } from 'vega-lite'
 import styles from './styles.module.scss'
+import { GetStarted } from './GetStarted'
 import { CheckpointPlotsWrapper } from './checkpointPlots/CheckpointPlotsWrapper'
 import { TemplatePlotsWrapper } from './templatePlots/TemplatePlotsWrapper'
 import { ComparisonTableWrapper } from './comparisonTable/ComparisonTableWrapper'
@@ -54,13 +55,22 @@ export const Plots = ({ state }: { state: PlotsWebviewState }) => {
 
   const {
     checkpoint: checkpointPlots,
+    comparison: comparisonTable,
+    hasPlots,
+    hasSelectedPlots,
+    hasSelectedRevisions,
     sectionCollapsed,
-    template: templatePlots,
-    comparison: comparisonTable
+    template: templatePlots
   } = data
 
   if (!checkpointPlots && !templatePlots && !comparisonTable) {
-    return <EmptyState>No Plots to Display</EmptyState>
+    return (
+      <GetStarted
+        hasPlots={hasPlots}
+        hasSelectedPlots={hasSelectedPlots}
+        hasSelectedRevisions={hasSelectedRevisions}
+      />
+    )
   }
 
   const changeSize = (size: PlotSize, section: Section) => {
diff --git a/webview/src/shared/components/Icon.tsx b/webview/src/shared/components/Icon.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import {
+  Add,
   Check,
   ChevronDown,
   ChevronRight,
@@ -15,6 +16,7 @@ import {
 } from './icons'
 
 export const AllIcons = {
+  ADD: Add,
   CHECK: Check,
   CHEVRON_DOWN: ChevronDown,
   CHEVRON_RIGHT: ChevronRight,
diff --git a/webview/src/shared/components/button/Button.tsx b/webview/src/shared/components/button/Button.tsx
@@ -0,0 +1,30 @@
+import { VSCodeButton } from '@vscode/webview-ui-toolkit/react'
+import React from 'react'
+import styles from './styles.module.scss'
+
+export type ButtonProps = {
+  appearance?: 'primary' | 'secondary'
+  onClick: () => void
+  text: string
+  isNested?: boolean
+  children?: React.ReactNode
+}
+
+export const Button: React.FC<ButtonProps> = ({
+  appearance,
+  children,
+  onClick,
+  text,
+  isNested
+}: ButtonProps) => {
+  return (
+    <VSCodeButton
+      appearance={appearance}
+      onClick={onClick}
+      className={isNested && styles.secondaryButton}
+    >
+      {text}
+      {children}
+    </VSCodeButton>
+  )
+}
diff --git a/webview/src/shared/components/button/StartButton.tsx b/webview/src/shared/components/button/StartButton.tsx
@@ -0,0 +1,23 @@
+import React from 'react'
+import { Button, ButtonProps } from './Button'
+import { AllIcons, Icon } from '../Icon'
+
+export const StartButton: React.FC<ButtonProps> = ({
+  appearance,
+  onClick,
+  isNested,
+  text
+}: ButtonProps) => {
+  return (
+    <Button
+      appearance={appearance}
+      isNested={isNested}
+      onClick={onClick}
+      text={text}
+    >
+      <span slot="start">
+        <Icon icon={AllIcons.ADD} width={18} height={18} />
+      </span>
+    </Button>
+  )
+}
diff --git a/webview/src/shared/components/button/styles.module.scss b/webview/src/shared/components/button/styles.module.scss
diff --git a/webview/src/shared/components/emptyState/EmptyState.tsx b/webview/src/shared/components/emptyState/EmptyState.tsx
diff --git a/webview/src/shared/components/icons/Add.tsx b/webview/src/shared/components/icons/Add.tsx
diff --git a/webview/src/shared/components/icons/index.ts b/webview/src/shared/components/icons/index.ts
diff --git a/webview/src/stories/Plots.stories.tsx b/webview/src/stories/Plots.stories.tsx
diff --git a/yarn.lock b/yarn.lock
