Sort and Filter indicators for the Experiments Table (#1760)

* Add arrow sort indicators and filter indicators to columns

* Fix filters prop dependencies

* fix tests

* add filters to deeply nested storybook

* refactor table head for complexity

* fix dev server chaos

* Fix PR change requests

* Remove unnecessary click handlers

* Fix test imports

Co-authored-by: Matt Seddon <[email protected]>

Author: wolmir

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}