Add global sort and filter indicators to the Experiments Table webview (#1872)

* Add basic sorting indicator

* Add filters and refactor into external file

* Change design to icons with badges

* Fix storybook and add a sort-less scenario

* Add jest tests

* Add tree focus click events

* Tweak styles and add postMessage tests

* Use SCSS variables

* Use consistent icons

* Fix svg fill issues with alternate icon usage

* Add telemetry and integration tests

* Add basic tooltips

* Add filtered counts to tooltips

* Add tooltip tests

* Use "No" instead of 0 in filter tooltips

Co-authored-by: mattseddon <[email protected]>

Author: rogermparent

extension/src/experiments/index.ts

@@ -1,5 +1,13 @@
 import { join } from 'path'
-import { Event, EventEmitter, Memento, Uri, ViewColumn, window } from 'vscode'
+import {
+  commands,
+  Event,
+  EventEmitter,
+  Memento,
+  Uri,
+  ViewColumn,
+  window
+} from 'vscode'
 import { ExperimentsModel } from './model'
 import { pickExperiments } from './model/quickPicks'
 import { pickAndModifyParams } from './model/modify/quickPick'
@@ -18,6 +26,7 @@ import { Experiment, ColumnType, TableData } from './webview/contract'
 import { DecorationProvider } from './model/filterBy/decorationProvider'
 import { SortDefinition } from './model/sortBy'
 import { splitColumnPath } from './columns/paths'
+import { collectFilteredCounts } from './model/filterBy/collect'
 import { ResourceLocator } from '../resourceLocator'
 import {
   AvailableCommands,
@@ -390,6 +399,30 @@ export class Experiments extends BaseRepository<TableData> {
     return this.experiments.hasRunningExperiment()
   }
 
+  private focusSortsTree() {
+    const commandPromise = commands.executeCommand(
+      'dvc.views.experimentsSortByTree.focus'
+    )
+    sendTelemetryEvent(
+      EventName.VIEWS_EXPERIMENTS_TABLE_FOCUS_SORTS_TREE,
+      undefined,
+      undefined
+    )
+    return commandPromise
+  }
+
+  private focusFiltersTree() {
+    const commandPromise = commands.executeCommand(
+      'dvc.views.experimentsFilterByTree.focus'
+    )
+    sendTelemetryEvent(
+      EventName.VIEWS_EXPERIMENTS_TABLE_FOCUS_FILTERS_TREE,
+      undefined,
+      undefined
+    )
+    return commandPromise
+  }
+
   private hideTableColumn(path: string) {
     this.toggleColumnStatus(path)
     sendTelemetryEvent(
@@ -453,6 +486,7 @@ export class Experiments extends BaseRepository<TableData> {
       columnOrder: this.columns.getColumnOrder(),
       columnWidths: this.columns.getColumnWidths(),
       columns: this.columns.getSelected(),
+      filteredCounts: collectFilteredCounts(this.getFilteredExperiments()),
       filters: this.experiments.getFilterPaths(),
       hasCheckpoints: this.hasCheckpoints(),
       hasColumns: this.columns.hasColumns(),
@@ -507,6 +541,12 @@ export class Experiments extends BaseRepository<TableData> {
             return this.removeExperiment(message.payload)
           case MessageFromWebviewType.SELECT_COLUMNS:
             return this.setColumnsStatus()
+
+          case MessageFromWebviewType.FOCUS_FILTERS_TREE:
+            return this.focusFiltersTree()
+          case MessageFromWebviewType.FOCUS_SORTS_TREE:
+            return this.focusSortsTree()
+
           default:
             Logger.error(`Unexpected message: ${JSON.stringify(message)}`)
         }

extension/src/experiments/model/filterBy/collect.ts

@@ -8,10 +8,14 @@ import { definedAndNonEmpty } from '../../../util/array'
 import { Experiment } from '../../webview/contract'
 
 export type ExperimentWithType = Experiment & { type: ExperimentType }
+export type FilteredCounts = {
+  checkpoints: number
+  experiments: number
+}
 
 export const collectFilteredCounts = (
   experiments: { type: ExperimentType }[]
-) => {
+): FilteredCounts => {
   const filtered = { checkpoints: 0, experiments: 0 }
 
   for (const { type } of experiments) {

extension/src/experiments/webview/contract.ts

@@ -1,4 +1,5 @@
 import { BaseExperimentFields, ValueTree } from '../../cli/reader'
+import { FilteredCounts } from '../model/filterBy/collect'
 import { SortDefinition } from '../model/sortBy'
 
 export interface MetricOrParamColumns {
@@ -60,6 +61,7 @@ export type TableData = {
   hasRunningExperiment: boolean
   rows: Row[]
   sorts: SortDefinition[]
+  filteredCounts: FilteredCounts
   filters: string[]
 }
 

extension/src/telemetry/constants.ts

@@ -36,6 +36,10 @@ export const EventName = Object.assign(
       'views.experimentTable.toggleStatus',
     VIEWS_EXPERIMENTS_TABLE_FOCUS_CHANGED:
       'views.experimentsTable.focusChanged',
+    VIEWS_EXPERIMENTS_TABLE_FOCUS_FILTERS_TREE:
+      'views.experimentsTable.focusFiltersTree',
+    VIEWS_EXPERIMENTS_TABLE_FOCUS_SORTS_TREE:
+      'views.experimentsTable.focusSortsTree',
     VIEWS_EXPERIMENTS_TABLE_HIDE_COLUMN: 'views.experimentsTable.columnHidden',
     VIEWS_EXPERIMENTS_TABLE_OPEN_PARAMS_FILE:
       'views.experimentsTable.paramsFileOpened',
@@ -185,6 +189,8 @@ export interface IEventNamePropertyMapping {
   [EventName.VIEWS_EXPERIMENTS_TABLE_EXPERIMENT_TOGGLE]: undefined
   [EventName.VIEWS_EXPERIMENTS_TABLE_CLOSED]: undefined
   [EventName.VIEWS_EXPERIMENTS_TABLE_COLUMNS_REORDERED]: undefined
+  [EventName.VIEWS_EXPERIMENTS_TABLE_FOCUS_FILTERS_TREE]: undefined
+  [EventName.VIEWS_EXPERIMENTS_TABLE_FOCUS_SORTS_TREE]: undefined
   [EventName.VIEWS_EXPERIMENTS_TABLE_RESIZE_COLUMN]: {
     width: number
   }

extension/src/test/fixtures/expShow/deeplyNested.ts

@@ -281,6 +281,7 @@ const deeplyNestedTableData: TableData = {
   changes: [],
   columnOrder: [],
   columnWidths: {},
+  filteredCounts: { experiments: 0, checkpoints: 0 },
   filters: [
     'params:params.yaml:nested1.doubled',
     'params:params.yaml:nested1%2Enested2%2Enested3.nested4.nested5b.doubled'

extension/src/test/fixtures/expShow/tableData.ts

@@ -3,6 +3,7 @@ import rowsFixture from './rows'
 import columnsFixture from './columns'
 
 const tableDataFixture: TableData = {
+  filteredCounts: { experiments: 0, checkpoints: 0 },
   rows: rowsFixture,
   columns: columnsFixture,
   filters: [],

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

@@ -126,6 +126,7 @@ suite('Experiments Test Suite', () => {
         columnOrder: [],
         columnWidths: {},
         columns: columnsFixture,
+        filteredCounts: { checkpoints: 0, experiments: 0 },
         filters: [],
         hasCheckpoints: true,
         hasColumns: true,
@@ -690,6 +691,7 @@ suite('Experiments Test Suite', () => {
         columnOrder: [],
         columnWidths: {},
         columns: [],
+        filteredCounts: { checkpoints: 0, experiments: 0 },
         filters: [],
         hasCheckpoints: true,
         hasColumns: true,
@@ -700,6 +702,72 @@ suite('Experiments Test Suite', () => {
 
       expect(messageSpy).to.be.calledWith(allColumnsUnselected)
     })
+
+    it('should be able to handle a message to focus the sorts tree', async () => {
+      const { experiments } = buildExperiments(disposable, expShowFixture)
+
+      const webview = await experiments.showWebview()
+
+      const mockSendTelemetryEvent = stub(Telemetry, 'sendTelemetryEvent')
+      const mockMessageReceived = getMessageReceivedEmitter(webview)
+      const executeCommandStub = stub(commands, 'executeCommand')
+
+      const messageReceived = new Promise(resolve =>
+        disposable.track(mockMessageReceived.event(() => resolve(undefined)))
+      )
+
+      mockMessageReceived.fire({
+        type: MessageFromWebviewType.FOCUS_SORTS_TREE
+      })
+
+      expect(executeCommandStub).to.be.calledWith(
+        'dvc.views.experimentsSortByTree.focus'
+      )
+
+      await messageReceived
+      expect(mockSendTelemetryEvent).to.be.calledOnce
+      expect(
+        mockSendTelemetryEvent,
+        'should send a telemetry call that the sorts tree has been focused'
+      ).to.be.calledWithExactly(
+        EventName.VIEWS_EXPERIMENTS_TABLE_FOCUS_SORTS_TREE,
+        undefined,
+        undefined
+      )
+    })
+
+    it('should be able to handle a message to focus the filters tree', async () => {
+      const { experiments } = buildExperiments(disposable, expShowFixture)
+
+      const webview = await experiments.showWebview()
+
+      const mockSendTelemetryEvent = stub(Telemetry, 'sendTelemetryEvent')
+      const mockMessageReceived = getMessageReceivedEmitter(webview)
+      const executeCommandStub = stub(commands, 'executeCommand')
+
+      const messageReceived = new Promise(resolve =>
+        disposable.track(mockMessageReceived.event(() => resolve(undefined)))
+      )
+
+      mockMessageReceived.fire({
+        type: MessageFromWebviewType.FOCUS_FILTERS_TREE
+      })
+
+      expect(executeCommandStub).to.be.calledWith(
+        'dvc.views.experimentsFilterByTree.focus'
+      )
+
+      await messageReceived
+      expect(mockSendTelemetryEvent).to.be.calledOnce
+      expect(
+        mockSendTelemetryEvent,
+        'should send a telemetry call that the filters tree has been focused'
+      ).to.be.calledWithExactly(
+        EventName.VIEWS_EXPERIMENTS_TABLE_FOCUS_FILTERS_TREE,
+        undefined,
+        undefined
+      )
+    })
   })
 
   describe('Sorting', () => {

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

@@ -117,6 +117,7 @@ suite('Experiments Filter By Tree Test Suite', () => {
         columnOrder: [],
         columnWidths: {},
         columns: columnsFixture,
+        filteredCounts: { checkpoints: 4, experiments: 1 },
         filters: [accuracyPath],
         hasCheckpoints: true,
         hasColumns: true,
@@ -147,6 +148,7 @@ suite('Experiments Filter By Tree Test Suite', () => {
         columnOrder: [],
         columnWidths: {},
         columns: columnsFixture,
+        filteredCounts: { checkpoints: 0, experiments: 0 },
         filters: [],
         hasCheckpoints: true,
         hasColumns: true,

extension/src/webview/contract.ts

@@ -14,6 +14,8 @@ export enum MessageFromWebviewType {
   INITIALIZED = 'initialized',
   APPLY_EXPERIMENT_TO_WORKSPACE = 'apply-experiment-to-workspace',
   CREATE_BRANCH_FROM_EXPERIMENT = 'create-branch-from-experiment',
+  FOCUS_FILTERS_TREE = 'focus-filters-tree',
+  FOCUS_SORTS_TREE = 'focus-sorts-tree',
   OPEN_PARAMS_FILE_TO_THE_SIDE = 'open-params-file-to-the-side',
   REMOVE_COLUMN_SORT = 'remove-column-sort',
   REMOVE_EXPERIMENT = 'remove-experiment',
@@ -135,6 +137,8 @@ export type MessageFromWebview =
   | { type: MessageFromWebviewType.REFRESH_REVISION; payload: string }
   | { type: MessageFromWebviewType.REFRESH_REVISIONS; payload: string[] }
   | { type: MessageFromWebviewType.SELECT_COLUMNS }
+  | { type: MessageFromWebviewType.FOCUS_FILTERS_TREE }
+  | { type: MessageFromWebviewType.FOCUS_SORTS_TREE }
 
 export type MessageToWebview<T extends WebviewData> = {
   type: MessageToWebviewType.SET_DATA