Add plots ribbon to show and remove experiments (#1785)

* Add plots ribbon

* Fix tests and event name

* Add tests

* Add react-virtualized

* Add extension test

* Apply review comments

Author: sroy3

extension/src/plots/index.ts

@@ -268,6 +268,8 @@ export class Plots extends BaseRepository<TPlotsData> {
             return this.selectExperimentsFromWebview()
           case MessageFromWebviewType.REFRESH_REVISION:
             return this.attemptToRefreshData(message.payload)
+          case MessageFromWebviewType.TOGGLE_EXPERIMENT:
+            return this.setExperimentStatus(message.payload)
           default:
             Logger.error(`Unexpected message: ${JSON.stringify(message)}`)
         }
@@ -353,6 +355,15 @@ export class Plots extends BaseRepository<TPlotsData> {
     )
   }
 
+  private setExperimentStatus(id: string) {
+    this.experiments?.toggleExperimentStatus(id)
+    sendTelemetryEvent(
+      EventName.VIEWS_PLOTS_EXPERIMENT_TOGGLE,
+      undefined,
+      undefined
+    )
+  }
+
   private attemptToRefreshData(revision: string) {
     Toast.infoWithOptions(`Attempting to refresh ${revision} plots data.`)
     this.plots?.setupManualRefresh(revision)

extension/src/plots/model/index.ts

@@ -14,7 +14,7 @@ import {
 import {
   CheckpointPlotData,
   ComparisonPlots,
-  ComparisonRevision,
+  Revision,
   ComparisonRevisionData,
   DEFAULT_SECTION_COLLAPSED,
   DEFAULT_SECTION_NAMES,
@@ -187,13 +187,14 @@ export class PlotsModel extends ModelWithPersistence {
   }
 
   public getSelectedRevisionDetails() {
-    return reorderObjectList<ComparisonRevision>(
+    return reorderObjectList<Revision>(
       this.comparisonOrder,
       this.experiments
         .getSelectedRevisions()
-        .map(({ label: revision, displayColor, logicalGroupName }) => ({
+        .map(({ label: revision, displayColor, logicalGroupName, id }) => ({
           displayColor,
           group: logicalGroupName,
+          id,
           revision
         })),
       'revision'

extension/src/plots/vega/util.ts

@@ -17,7 +17,7 @@ import {
   RepeatMapping
 } from 'vega-lite/build/src/spec/repeat'
 import { TopLevelUnitSpec } from 'vega-lite/build/src/spec/unit'
-import { ColorScale, ComparisonRevision } from '../webview/contract'
+import { ColorScale, Revision } from '../webview/contract'
 
 const COMMIT_FIELD = 'rev'
 
@@ -84,7 +84,7 @@ export const isMultiViewByCommitPlot = (
 ): boolean => !template || getFacetField(template) === COMMIT_FIELD
 
 export const getColorScale = (
-  revisions: ComparisonRevision[]
+  revisions: Revision[]
 ): ColorScale | undefined => {
   const acc: ColorScale = { domain: [], range: [] }
 

extension/src/plots/webview/contract.ts

@@ -43,14 +43,15 @@ export type ComparisonPlots = {
   revisions: ComparisonRevisionData
 }[]
 
-export type ComparisonRevision = {
+export type Revision = {
+  id?: string
   revision: string
   group?: string
   displayColor: Color
 }
 
 export interface PlotsComparisonData {
-  revisions: ComparisonRevision[]
+  revisions: Revision[]
   plots: ComparisonPlots
   sectionName: string
   size: PlotSize

extension/src/telemetry/constants.ts

@@ -48,6 +48,7 @@ export const EventName = Object.assign(
 
     VIEWS_PLOTS_CLOSED: 'views.plots.closed',
     VIEWS_PLOTS_CREATED: 'views.plots.created',
+    VIEWS_PLOTS_EXPERIMENT_TOGGLE: 'views.plots.toggleExperimentStatus',
     VIEWS_PLOTS_FOCUS_CHANGED: 'views.plots.focusChanged',
     VIEWS_PLOTS_MANUAL_REFRESH: 'views.plots.manualRefresh',
     VIEWS_PLOTS_METRICS_SELECTED: 'views.plots.metricsSelected',
@@ -207,6 +208,7 @@ export interface IEventNamePropertyMapping {
   [EventName.VIEWS_PLOTS_SECTION_TOGGLE]: Partial<SectionCollapsed>
   [EventName.VIEWS_PLOTS_SELECT_EXPERIMENTS]: undefined
   [EventName.VIEWS_PLOTS_SELECT_PLOTS]: undefined
+  [EventName.VIEWS_PLOTS_EXPERIMENT_TOGGLE]: undefined
   [EventName.VIEWS_REORDER_PLOTS_METRICS]: undefined
   [EventName.VIEWS_REORDER_PLOTS_TEMPLATES]: undefined
 

extension/src/test/fixtures/plotsDiff/index.ts

@@ -546,22 +546,26 @@ export const getComparisonWebviewMessage = (
     plots: plotAcc,
     revisions: [
       {
+        id: 'workspace',
         revision: 'workspace',
         displayColor: workspace,
         group: undefined
       },
-      { revision: 'main', displayColor: main, group: undefined },
+      { id: 'main', revision: 'main', displayColor: main, group: undefined },
       {
+        id: 'exp-e7a67',
         revision: '4fb124a',
         displayColor: _4fb124a,
         group: '[exp-e7a67]'
       },
       {
+        id: 'test-branch',
         revision: '42b8736',
         displayColor: _42b8735,
         group: '[test-branch]'
       },
       {
+        id: 'exp-83425',
         revision: '1ba7bcd',
         displayColor: _1ba7bcd,
         group: '[exp-83425]'

extension/src/test/suite/experiments/model/tree.test.ts

@@ -310,36 +310,43 @@ suite('Experiments Tree Test Suite', () => {
         {
           displayColor: colors[0],
           group: undefined,
+          id: 'workspace',
           revision: 'workspace'
         },
         {
           displayColor: colors[2],
           group: '[exp-e7a67]',
+          id: 'exp-e7a67',
           revision: '4fb124a'
         },
         {
           displayColor: colors[3],
           group: '[test-branch]',
+          id: 'test-branch',
           revision: '42b8736'
         },
         {
           displayColor: colors[1],
           group: '[exp-e7a67]',
+          id: 'd1343a87c6ee4a2e82d19525964d2fb2cb6756c9',
           revision: 'd1343a8'
         },
         {
           displayColor: colors[4],
           group: '[exp-e7a67]',
+          id: '1ee5f2ecb0fa4d83cbf614386536344cf894dd53',
           revision: '1ee5f2e'
         },
         {
           displayColor: colors[5],
           group: '[test-branch]',
+          id: '217312476f8854dda1865450b737eb6bc7a3ba1b',
           revision: '2173124'
         },
         {
           displayColor: colors[6],
           group: '[test-branch]',
+          id: '9523bde67538cf31230efaff2dbc47d38a944ab5',
           revision: '9523bde'
         }
       ])

extension/src/test/suite/plots/index.test.ts

@@ -593,5 +593,35 @@ suite('Plots Test Suite', () => {
       expect(webview.isActive()).to.be.true
       expect(webview.isVisible()).to.be.true
     }).timeout(WEBVIEW_TEST_TIMEOUT)
+
+    it('should handle a toggle experiment message from the webview', async () => {
+      const { plots, experiments } = await buildPlots(
+        disposable,
+        plotsDiffFixture
+      )
+
+      const mockSelectExperiments = stub(
+        experiments,
+        'toggleExperimentStatus'
+      ).resolves(undefined)
+
+      const webview = await plots.showWebview()
+
+      const mockSendTelemetryEvent = stub(Telemetry, 'sendTelemetryEvent')
+      const mockMessageReceived = getMessageReceivedEmitter(webview)
+
+      mockMessageReceived.fire({
+        payload: 'main',
+        type: MessageFromWebviewType.TOGGLE_EXPERIMENT
+      })
+
+      expect(mockSelectExperiments).to.be.calledOnce
+      expect(mockSendTelemetryEvent).to.be.calledOnce
+      expect(mockSendTelemetryEvent).to.be.calledWithExactly(
+        EventName.VIEWS_PLOTS_EXPERIMENT_TOGGLE,
+        undefined,
+        undefined
+      )
+    }).timeout(WEBVIEW_TEST_TIMEOUT)
   })
 })

webview/src/plots/components/App.test.tsx

@@ -36,6 +36,7 @@ import { act } from 'react-dom/test-utils'
 import { App } from './App'
 import { Plots } from './Plots'
 import { NewSectionBlock } from './templatePlots/TemplatePlots'
+import { CopyTooltip } from './ribbon/RibbonBlock'
 import { vsCodeApi } from '../../shared/api'
 import { createBubbledEvent, dragAndDrop, dragEnter } from '../../test/dragDrop'
 import { DragEnterDirection } from '../../shared/components/dragDrop/util'
@@ -353,7 +354,9 @@ describe('App', () => {
       cancelable: true
     })
 
-    const workspaceHeader = screen.queryByText('workspace')
+    const comparisonTable = screen.getByRole('table')
+
+    const workspaceHeader = within(comparisonTable).queryByText('workspace')
     expect(workspaceHeader).toBeInTheDocument()
 
     const [, pickerButton] = screen.queryAllByTestId('icon-menu-item')
@@ -378,8 +381,7 @@ describe('App', () => {
       cancelable: true
     })
 
-    const table = screen.getByRole('table')
-    expect(within(table).getByText('workspace')).toBeInTheDocument()
+    expect(within(comparisonTable).getByText('workspace')).toBeInTheDocument()
   })
 
   it('should show the newest revision in the comparision table even if some revisions were filtered out', async () => {
@@ -432,7 +434,7 @@ describe('App', () => {
     )
 
     const workspaceHeader = screen.queryAllByText(newRevision)
-    expect(workspaceHeader.length).toBe(2) // One in the table and one in the menu
+    expect(workspaceHeader.length).toBe(3) // One in the table, one in the menu, and one in the ribbon
   })
 
   it('should send a message to the extension with the selected metrics when toggling the visibility of a plot', async () => {
@@ -1541,4 +1543,107 @@ describe('App', () => {
       expect(contextMenuEvent.defaultPrevented).toBe(true)
     })
   })
+
+  describe('Ribbon', () => {
+    it('should show the revisions at the top', () => {
+      renderAppWithData({
+        comparison: comparisonTableFixture,
+        sectionCollapsed: DEFAULT_SECTION_COLLAPSED
+      })
+      const ribbon = screen.getByTestId('ribbon')
+
+      const revisions = within(ribbon)
+        .getAllByRole('listitem')
+        .map(item => item.textContent)
+      expect(revisions).toStrictEqual(
+        comparisonTableFixture.revisions.map(rev =>
+          rev.group ? rev.group.slice(1, -1) + rev.revision : rev.revision
+        )
+      )
+    })
+
+    it('should send a message with the revision to be removed when clicking the clear button', () => {
+      renderAppWithData({
+        comparison: comparisonTableFixture,
+        sectionCollapsed: DEFAULT_SECTION_COLLAPSED
+      })
+
+      const mainClearButton = within(
+        screen.getByTestId('ribbon-main')
+      ).getAllByRole('button')[1]
+
+      fireEvent.click(mainClearButton)
+
+      expect(mockPostMessage).toBeCalledWith({
+        payload: 'main',
+        type: MessageFromWebviewType.TOGGLE_EXPERIMENT
+      })
+    })
+
+    describe('Copy button', () => {
+      const mockWriteText = jest.fn()
+      Object.assign(navigator, {
+        clipboard: {
+          writeText: mockWriteText
+        }
+      })
+
+      it('should copy the experiment name when clicking the text', () => {
+        renderAppWithData({
+          comparison: comparisonTableFixture,
+          sectionCollapsed: DEFAULT_SECTION_COLLAPSED
+        })
+
+        const mainNameButton = within(
+          screen.getByTestId('ribbon-main')
+        ).getAllByRole('button')[0]
+
+        fireEvent.click(mainNameButton)
+
+        expect(mockWriteText).toBeCalledWith('main')
+      })
+
+      it('should display that the experiment was copied when clicking the text', async () => {
+        jest.useFakeTimers()
+
+        mockWriteText.mockResolvedValueOnce('success')
+
+        renderAppWithData({
+          comparison: comparisonTableFixture,
+          sectionCollapsed: DEFAULT_SECTION_COLLAPSED
+        })
+
+        const mainNameButton = within(
+          screen.getByTestId('ribbon-main')
+        ).getAllByRole('button')[0]
+
+        fireEvent.mouseEnter(mainNameButton, { bubbles: true })
+        fireEvent.click(mainNameButton)
+
+        expect(await screen.findByText(CopyTooltip.COPIED)).toBeInTheDocument()
+        jest.useRealTimers()
+      })
+
+      it('should display copy again when hovering the text 2s after clicking the text', () => {
+        jest.useFakeTimers()
+
+        renderAppWithData({
+          comparison: comparisonTableFixture,
+          sectionCollapsed: DEFAULT_SECTION_COLLAPSED
+        })
+
+        const mainNameButton = within(
+          screen.getByTestId('ribbon-main')
+        ).getAllByRole('button')[0]
+
+        fireEvent.click(mainNameButton)
+        fireEvent.mouseEnter(mainNameButton, { bubbles: true })
+
+        jest.advanceTimersByTime(2001)
+
+        expect(screen.getByText(CopyTooltip.NORMAL)).toBeInTheDocument()
+        jest.useRealTimers()
+      })
+    })
+  })
 })