Sort and Filter indicators for the Experiments Table

extension/src/experiments/index.ts

@@ -440,6 +440,7 @@ export class Experiments extends BaseRepository<TableData> {
       columnOrder: this.columns.getColumnOrder(),
       columnWidths: this.columns.getColumnWidths(),
       columns: this.columns.getSelected(),
+      filters: this.experiments.getFilterPaths(),
       hasCheckpoints: this.hasCheckpoints(),
       hasColumns: this.columns.hasColumns(),
       hasRunningExperiment: this.experiments.hasRunningExperiment(),

extension/src/experiments/model/index.ts

@@ -162,6 +162,10 @@ export class ExperimentsModel extends ModelWithPersistence {
     return [...this.filters.values()]
   }
 
+  public getFilterPaths() {
+    return this.getFilters().map(({ path }) => path)
+  }
+
   public canAutoApplyFilters(...filterIdsToRemove: string[]): boolean {
     if (!this.useFiltersForSelection) {
       return true

extension/src/experiments/webview/contract.ts

@@ -60,6 +60,7 @@ export type TableData = {
   hasRunningExperiment: boolean
   rows: Row[]
   sorts: SortDefinition[]
+  filters: string[]
 }
 
 export type InitiallyUndefinedTableData = TableData | undefined

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

@@ -281,6 +281,10 @@ const deeplyNestedTableData: TableData = {
   changes: [],
   columnOrder: [],
   columnWidths: {},
+  filters: [
+    'params:params.yaml:nested1.doubled',
+    'params:params.yaml:nested1%2Enested2%2Enested3.nested4.nested5b.doubled'
+  ],
   hasCheckpoints: false,
   hasRunningExperiment: false,
   sorts: [

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

@@ -5,6 +5,7 @@ import columnsFixture from './columns'
 const tableDataFixture: TableData = {
   rows: rowsFixture,
   columns: columnsFixture,
+  filters: [],
   hasCheckpoints: true,
   hasRunningExperiment: true,
   hasColumns: true,

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

@@ -125,6 +125,7 @@ suite('Experiments Test Suite', () => {
         columnOrder: [],
         columnWidths: {},
         columns: columnsFixture,
+        filters: [],
         hasCheckpoints: true,
         hasColumns: true,
         hasRunningExperiment: true,
@@ -683,6 +684,7 @@ suite('Experiments Test Suite', () => {
         columnOrder: [],
         columnWidths: {},
         columns: [],
+        filters: [],
         hasCheckpoints: true,
         hasColumns: true,
         hasRunningExperiment: true,

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

@@ -109,6 +109,7 @@ suite('Experiments Filter By Tree Test Suite', () => {
         columnOrder: [],
         columnWidths: {},
         columns: columnsFixture,
+        filters: [accuracyPath],
         hasCheckpoints: true,
         hasColumns: true,
         hasRunningExperiment: true,
@@ -138,6 +139,7 @@ suite('Experiments Filter By Tree Test Suite', () => {
         columnOrder: [],
         columnWidths: {},
         columns: columnsFixture,
+        filters: [],
         hasCheckpoints: true,
         hasColumns: true,
         hasRunningExperiment: true,

webview/src/experiments/components/Experiments.tsx

@@ -28,8 +28,8 @@ import { GetStarted } from '../../shared/components/getStarted/GetStarted'
 import { DragDropProvider } from '../../shared/components/dragDrop/DragDropContext'
 import { EmptyState } from '../../shared/components/emptyState/EmptyState'
 
-const DEFAULT_COLUMN_WIDTH = 75
-const MINIMUM_COLUMN_WIDTH = 50
+const DEFAULT_COLUMN_WIDTH = 90
+const MINIMUM_COLUMN_WIDTH = 90
 
 const timeFormatter = new Intl.DateTimeFormat([], {
   hour: '2-digit',
@@ -138,6 +138,7 @@ export const ExperimentsTable: React.FC<{
         columnOrder: [],
         columnWidths: {},
         columns: [],
+        filters: [],
         hasCheckpoints: false,
         hasColumns: false,
         hasRunningExperiment: false,

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

@@ -15,13 +15,15 @@ export const MergedHeaderGroups: React.FC<{
   headerGroup: HeaderGroup<Experiment>
   columns: HeaderGroup<Experiment>[]
   sorts: SortDefinition[]
+  filters: string[]
   orderedColumns: Column[]
   onDragUpdate: OnDragOver
   onDragStart: OnDragStart
   onDragEnd: OnDrop
 }> = ({
   headerGroup,
   sorts,
+  filters,
   columns,
   orderedColumns,
   onDragUpdate,
@@ -41,6 +43,7 @@ export const MergedHeaderGroups: React.FC<{
             column={column}
             columns={columns}
             sorts={sorts}
+            filters={filters}
             onDragOver={onDragUpdate}
             onDragStart={onDragStart}
             onDrop={onDragEnd}

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

@@ -3,19 +3,13 @@
  */
 /* eslint jest/expect-expect: ["error", { "assertFunctionNames": ["expect", "expectHeaders"] }] */
 import '@testing-library/jest-dom/extend-expect'
-import {
-  cleanup,
-  fireEvent,
-  render,
-  screen,
-  within
-} from '@testing-library/react'
+import { cleanup, fireEvent, render, screen } from '@testing-library/react'
 import { Experiment, TableData } from 'dvc/src/experiments/webview/contract'
 import { MessageFromWebviewType } from 'dvc/src/webview/contract'
 import React from 'react'
 import { TableInstance } from 'react-table'
 import tableDataFixture from 'dvc/src/test/fixtures/expShow/tableData'
-import { SortOrderLabel } from './SortPicker'
+import { SortOrder } from './TableHeader'
 import { Table } from './Table'
 import styles from './styles.module.scss'
 import { ExperimentsTable } from '../Experiments'
@@ -112,6 +106,7 @@ describe('Table', () => {
     columnOrder: [],
     columnWidths: {},
     columns: [],
+    filters: [],
     hasCheckpoints: false,
     hasColumns: true,
     hasRunningExperiment: false,
@@ -144,54 +139,41 @@ describe('Table', () => {
     const mockColumnName = 'C'
     const mockColumnPath = 'params:C'
 
-    const findSortableColumn = async (headerText = mockColumnName) =>
-      await screen.findByText(headerText)
+    const findSortableColumn = async () =>
+      await screen.findByTestId(`header-${mockColumnPath}`)
 
-    const clickOnSortOption = async (optionLabel: SortOrderLabel) => {
-      const column = await findSortableColumn()
+    const clickOnSortOption = async (optionLabel: SortOrder) => {
+      const column = await screen.findByText(mockColumnName)
       fireEvent.contextMenu(column, {
         bubbles: true
       })
-      const columnMenu = await screen.findAllByRole('menu')
 
-      const sortOption = await within(columnMenu[0]).findByText(optionLabel)
+      const sortOption = await screen.findByText(optionLabel)
       fireEvent.click(sortOption)
     }
 
-    describe('Given no sorting is present yet', () => {
-      it('should add an ascending sort to the column path when the user clicks on the Ascending option', async () => {
+    describe('Sortable column', () => {
+      it('should not not have a sorting indicator if it is not sorted yet', () => {
         renderExperimentsTable()
-        await clickOnSortOption(SortOrderLabel.ASCENDING)
-        expect(mockedPostMessage).toBeCalledWith({
-          payload: {
-            descending: false,
-            path: mockColumnPath
-          },
-          type: MessageFromWebviewType.SORT_COLUMN
-        })
+        const sortIcons = screen.queryAllByTestId('sorting-indicator')
+
+        expect(sortIcons.length).toBe(0)
       })
 
-      it('should add a descending sort to the column path when the user clicks on the Descending option', async () => {
+      it('should be able to add an ascending sort to the column, if it is not sorted yet', async () => {
         renderExperimentsTable()
-        await clickOnSortOption(SortOrderLabel.DESCENDING)
+        await clickOnSortOption(SortOrder.ASCENDING)
+
         expect(mockedPostMessage).toBeCalledWith({
           payload: {
-            descending: true,
+            descending: false,
             path: mockColumnPath
           },
           type: MessageFromWebviewType.SORT_COLUMN
         })
       })
 
-      it('should not do anything when the user clicks on the None option', async () => {
-        renderExperimentsTable()
-        await clickOnSortOption(SortOrderLabel.NONE)
-        expect(mockedPostMessage).not.toHaveBeenCalled()
-      })
-    })
-
-    describe('Given an initial ascending column sort', () => {
-      it('should add a descending sort to the column path when the user clicks on the Descending option', async () => {
+      it('should add a descending sort to the column, when clicking on the descending option', async () => {
         renderExperimentsTable({
           ...sortingTableDataFixture,
           sorts: [
@@ -201,7 +183,12 @@ describe('Table', () => {
             }
           ]
         })
-        await clickOnSortOption(SortOrderLabel.DESCENDING)
+
+        const column = await findSortableColumn()
+        expect(column).toHaveClass('sortingHeaderCellAsc')
+
+        await clickOnSortOption(SortOrder.DESCENDING)
+
         expect(mockedPostMessage).toBeCalledWith({
           payload: {
             descending: true,
@@ -211,31 +198,22 @@ describe('Table', () => {
         })
       })
 
-      it('should not do anything when the user clicks on the Ascending option', async () => {
+      it('should remove the column sort if the remove option is selected', async () => {
         renderExperimentsTable({
           ...sortingTableDataFixture,
           sorts: [
             {
-              descending: false,
+              descending: true,
               path: mockColumnPath
             }
           ]
         })
-        await clickOnSortOption(SortOrderLabel.ASCENDING)
-        expect(mockedPostMessage).not.toHaveBeenCalled()
-      })
 
-      it('should remove the column sort when the user clicks on the None option', async () => {
-        renderExperimentsTable({
-          ...sortingTableDataFixture,
-          sorts: [
-            {
-              descending: false,
-              path: mockColumnPath
-            }
-          ]
-        })
-        await clickOnSortOption(SortOrderLabel.NONE)
+        const column = await findSortableColumn()
+        expect(column).toHaveClass('sortingHeaderCellDesc')
+
+        await clickOnSortOption(SortOrder.NONE)
+
         expect(mockedPostMessage).toBeCalledWith({
           payload: mockColumnPath,
           type: MessageFromWebviewType.REMOVE_COLUMN_SORT

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

@@ -101,13 +101,24 @@ export const Table: React.FC<TableProps & WithChanges> = ({
   tableData
 }) => {
   const { getTableProps, rows } = instance
-  const { sorts, columns, changes, hasCheckpoints, hasRunningExperiment } =
-    tableData
+  const {
+    filters,
+    sorts,
+    columns,
+    changes,
+    hasCheckpoints,
+    hasRunningExperiment
+  } = tableData
 
   return (
     <div className={styles.tableContainer}>
       <div {...getTableProps({ className: styles.table })}>
-        <TableHead instance={instance} sorts={sorts} columns={columns} />
+        <TableHead
+          instance={instance}
+          sorts={sorts}
+          filters={filters}
+          columns={columns}
+        />
         {rows.map(row => (
           <TableBody
             row={row}

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

@@ -17,9 +17,11 @@ interface TableHeadProps {
   instance: TableInstance<Experiment>
   columns: Column[]
   sorts: SortDefinition[]
+  filters: string[]
 }
 
 export const TableHead: React.FC<TableHeadProps> = ({
+  filters,
   instance: {
     headerGroups,
     setColumnOrder,
@@ -90,6 +92,7 @@ export const TableHead: React.FC<TableHeadProps> = ({
           headerGroup={headerGroup}
           columns={allHeaders}
           sorts={sorts}
+          filters={filters}
           onDragStart={onDragStart}
           onDragUpdate={onDragUpdate}
           onDragEnd={onDragEnd}