Merge pull request #1756 from iterative/hide-column-option-in-exp-table-ctx-menu

Add option to hide a column from the experiments table

Author: wolmir

extension/src/experiments/index.ts

@@ -350,6 +350,15 @@ export class Experiments extends BaseRepository<TableData> {
     }
   }
 
+  private hideTableColumn(path: string) {
+    this.toggleColumnStatus(path)
+    sendTelemetryEvent(
+      EventName.VIEWS_EXPERIMENTS_TABLE_HIDE_COLUMN,
+      { path },
+      undefined
+    )
+  }
+
   private setupInitialData() {
     const waitForInitialData = this.dispose.track(
       this.onDidChangeExperiments(() => {
@@ -407,6 +416,8 @@ export class Experiments extends BaseRepository<TableData> {
             )
           case MessageFromWebviewType.TOGGLE_EXPERIMENT:
             return this.setExperimentStatus(message.payload)
+          case MessageFromWebviewType.HIDE_EXPERIMENTS_TABLE_COLUMN:
+            return this.hideTableColumn(message.payload)
           case MessageFromWebviewType.SORT_COLUMN:
             return this.addColumnSort(message.payload)
           case MessageFromWebviewType.REMOVE_COLUMN_SORT:

extension/src/telemetry/constants.ts

@@ -36,6 +36,7 @@ export const EventName = Object.assign(
       'views.experimentTable.toggleStatus',
     VIEWS_EXPERIMENTS_TABLE_FOCUS_CHANGED:
       'views.experimentsTable.focusChanged',
+    VIEWS_EXPERIMENTS_TABLE_HIDE_COLUMN: 'views.experimentsTable.columnHidden',
     VIEWS_EXPERIMENTS_TABLE_REMOVE_COLUMN_SORT:
       'views.experimentsTable.columnSortRemoved',
     VIEWS_EXPERIMENTS_TABLE_RESIZE_COLUMN:
@@ -187,6 +188,9 @@ export interface IEventNamePropertyMapping {
   }
   [EventName.VIEWS_EXPERIMENTS_TABLE_CREATED]: undefined
   [EventName.VIEWS_EXPERIMENTS_TABLE_FOCUS_CHANGED]: WebviewFocusChangedProperties
+  [EventName.VIEWS_EXPERIMENTS_TABLE_HIDE_COLUMN]: {
+    path: string
+  }
 
   [EventName.VIEWS_PLOTS_CLOSED]: undefined
   [EventName.VIEWS_PLOTS_CREATED]: undefined

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

@@ -344,6 +344,30 @@ suite('Experiments Test Suite', () => {
       return { experiments, experimentsModel, mockExecuteCommand }
     }
 
+    it('should be able to handle a message to hide a table column', async () => {
+      const { experiments, columnsModel } = buildExperiments(disposable)
+
+      const mockToggleStatus = stub(columnsModel, 'toggleStatus')
+      const mockSendTelemetryEvent = stub(Telemetry, 'sendTelemetryEvent')
+      const webview = await experiments.showWebview()
+      const mockMessageReceived = getMessageReceivedEmitter(webview)
+      const mockColumnId = 'mock-column-id'
+
+      mockMessageReceived.fire({
+        payload: mockColumnId,
+        type: MessageFromWebviewType.HIDE_EXPERIMENTS_TABLE_COLUMN
+      })
+
+      expect(mockToggleStatus).to.be.calledOnce
+      expect(mockToggleStatus).to.be.calledWithExactly(mockColumnId)
+
+      expect(mockSendTelemetryEvent).to.be.calledWithExactly(
+        EventName.VIEWS_EXPERIMENTS_TABLE_HIDE_COLUMN,
+        { path: mockColumnId },
+        undefined
+      )
+    })
+
     it('should be able to handle a message to apply an experiment to workspace', async () => {
       const { experiments, mockExecuteCommand } =
         setupExperimentsAndMockCommands()

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

@@ -19,6 +19,7 @@ import { CheckpointsModel } from '../../../experiments/checkpoints/model'
 import { FileSystemData } from '../../../fileSystem/data'
 import * as Watcher from '../../../fileSystem/watcher'
 import { ExperimentsModel } from '../../../experiments/model'
+import { ColumnsModel } from '../../../experiments/columns/model'
 
 const hasCheckpoints = (data: ExperimentsOutput) => {
   const [experimentsWithBaseline] = Object.values(omit(data, 'workspace'))
@@ -73,6 +74,8 @@ export const buildExperiments = (
     cliExecutor,
     cliReader,
     cliRunner,
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    columnsModel: (experiments as any).columns as ColumnsModel,
     experiments,
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     experimentsModel: (experiments as any).experiments as ExperimentsModel,

extension/src/webview/contract.ts

@@ -26,6 +26,7 @@ export enum MessageFromWebviewType {
   RESIZE_PLOTS = 'resize-plots',
   SORT_COLUMN = 'sort-column',
   TOGGLE_EXPERIMENT = 'toggle-experiment',
+  HIDE_EXPERIMENTS_TABLE_COLUMN = 'hide-experiments-table-column',
   SELECT_EXPERIMENTS = 'select-experiments',
   SELECT_PLOTS = 'select-plots',
   TOGGLE_METRIC = 'toggle-metric',
@@ -62,6 +63,10 @@ export type MessageFromWebview =
       type: MessageFromWebviewType.TOGGLE_EXPERIMENT
       payload: string
     }
+  | {
+      type: MessageFromWebviewType.HIDE_EXPERIMENTS_TABLE_COLUMN
+      payload: string
+    }
   | {
       type: MessageFromWebviewType.APPLY_EXPERIMENT_TO_WORKSPACE
       payload: string

webview/__mocks__/@vscode/webview-ui-toolkit/react.tsx

@@ -12,3 +12,7 @@ export const VSCodeButton: React.FC<MockButtonProps> = ({
 }: MockButtonProps) => {
   return <button onClick={onClick}>{children}</button>
 }
+
+export const VSCodeDivider: React.FC = () => {
+  return <hr />
+}

webview/src/experiments/components/table/Table.test.tsx

@@ -150,9 +150,9 @@ describe('Table', () => {
       fireEvent.contextMenu(column, {
         bubbles: true
       })
-      const columnMenu = await screen.findByRole('menu')
+      const columnMenu = await screen.findAllByRole('menu')
 
-      const sortOption = await within(columnMenu).findByText(optionLabel)
+      const sortOption = await within(columnMenu[0]).findByText(optionLabel)
       fireEvent.click(sortOption)
     }
 

webview/src/experiments/components/table/TableHeader.tsx

@@ -8,6 +8,7 @@ import React from 'react'
 import { HeaderGroup } from 'react-table'
 import cx from 'classnames'
 import { MessageFromWebviewType } from 'dvc/src/webview/contract'
+import { VSCodeDivider } from '@vscode/webview-ui-toolkit/react'
 import styles from './styles.module.scss'
 import { SortOrder, SortPicker } from './SortPicker'
 import { countUpperLevels, isFirstLevelHeader } from '../../util/columns'
@@ -19,6 +20,7 @@ import {
   OnDragStart,
   OnDrop
 } from '../../../shared/components/dragDrop/DragDropWorkbench'
+import { MessagesMenu } from '../../../shared/components/messagesMenu/MessagesMenu'
 
 export const ColumnDragHandle: React.FC<{
   disabled: boolean
@@ -206,12 +208,27 @@ export const TableHeader: React.FC<TableHeaderProps> = ({
       onDrop={onDrop}
       menuDisabled={!isSortable}
       menuContent={
-        <SortPicker
-          sortOrder={sortOrder}
-          setSelectedOrder={order => {
-            setColumnSort(order)
-          }}
-        />
+        <div>
+          <SortPicker
+            sortOrder={sortOrder}
+            setSelectedOrder={order => {
+              setColumnSort(order)
+            }}
+          />
+          <VSCodeDivider />
+          <MessagesMenu
+            options={[
+              {
+                id: 'hide-column',
+                label: 'Hide Column',
+                message: {
+                  payload: column.id,
+                  type: MessageFromWebviewType.HIDE_EXPERIMENTS_TABLE_COLUMN
+                }
+              }
+            ]}
+          />
+        </div>
       }
     />
   )