From 307bd624e4f53a8d6101b22489952a6dd6f61f3e Mon Sep 17 00:00:00 2001 From: c-bata Date: Wed, 27 Apr 2022 08:40:27 +0900 Subject: [PATCH 1/3] Filter trials by param value --- optuna_dashboard/ts/components/DataGrid.tsx | 49 ++++++++++++------- .../ts/components/StudyDetail.tsx | 3 +- 2 files changed, 32 insertions(+), 20 deletions(-) diff --git a/optuna_dashboard/ts/components/DataGrid.tsx b/optuna_dashboard/ts/components/DataGrid.tsx index c67324f2..2b634cb7 100644 --- a/optuna_dashboard/ts/components/DataGrid.tsx +++ b/optuna_dashboard/ts/components/DataGrid.tsx @@ -32,7 +32,7 @@ interface DataGridColumn { } interface RowFilter { - field: keyof T + columnIdx: number value: any } @@ -78,29 +78,39 @@ function DataGrid(props: { } // Filtering - const fieldAlreadyFiltered = (field: keyof T): boolean => - filters.some((f) => f.field === field) + const fieldAlreadyFiltered = (columnIdx: number): boolean => + filters.some((f) => f.columnIdx === columnIdx) - const handleClickFilterCell = (field: keyof T, value: any) => { - if (fieldAlreadyFiltered(field)) { + const handleClickFilterCell = (columnIdx: number, value: any) => { + if (fieldAlreadyFiltered(columnIdx)) { return } - const newFilters = [...filters, { field: field, value: value }] + const newFilters = [...filters, { columnIdx: columnIdx, value: value }] setFilters(newFilters) } - const clearFilter = (field: keyof T): void => { - setFilters(filters.filter((f) => f.field !== field)) + const clearFilter = (columnIdx: number): void => { + setFilters(filters.filter((f) => f.columnIdx !== columnIdx)) } - const filteredRows = rows.filter((row) => { + const filteredRows = rows.filter((row, rowIdx) => { if (defaultFilter !== undefined && defaultFilter(row)) { return false } return filters.length === 0 ? true : filters.some((f) => { - return row[f.field] === f.value + // columns.find((c, idx) => idx === f.columnIdx).toCellValue // ここでrowIndexが必要。色々厳しい + if (columns.length <= f.columnIdx) { + console.log(`columnIdx=${f.columnIdx} must be smaller than columns.length=${columns.length}`) + return true + } + const toCellValue = columns[f.columnIdx].toCellValue + if (toCellValue !== undefined) { + return toCellValue(rowIdx) ===f.value + } + const field = columns[f.columnIdx].field + return row[field] === f.value }) }) @@ -147,18 +157,18 @@ function DataGrid(props: { {collapseBody ? : null} - {columns.map((column, index) => ( + {columns.map((column, columnIdx) => ( {column.sortable ? ( {column.label} {orderBy === column.field ? ( @@ -176,13 +186,13 @@ function DataGrid(props: { { - clearFilter(column.field) + clearFilter(columnIdx) }} > @@ -232,7 +242,7 @@ function DataGridRow(props: { row: T keyField: keyof T collapseBody?: (rowIndex: number) => React.ReactNode - handleClickFilterCell: (field: keyof T, value: any) => void + handleClickFilterCell: (columnIdx: number, value: any) => void }) { const { columns, @@ -274,7 +284,8 @@ function DataGridRow(props: { key={`${row[keyField]}:${column.field}:${columnIndex}`} padding={column.padding || "normal"} onClick={(e) => { - handleClickFilterCell(column.field, row[column.field]) + const value = column.toCellValue !== undefined ? column.toCellValue(rowIndex) : row[column.field] + handleClickFilterCell(columnIndex, value) }} > {cellItem} diff --git a/optuna_dashboard/ts/components/StudyDetail.tsx b/optuna_dashboard/ts/components/StudyDetail.tsx index 08c5c08d..d442cdc7 100644 --- a/optuna_dashboard/ts/components/StudyDetail.tsx +++ b/optuna_dashboard/ts/components/StudyDetail.tsx @@ -605,13 +605,14 @@ export const TrialTable: FC<{ studyDetail: StudyDetail | null }> = ({ ) { studyDetail?.intersection_search_space.forEach((s) => { const sortable = s.distribution !== "CategoricalDistribution" + const filterable = s.distribution === "CategoricalDistribution" columns.push({ field: "params", label: `Param ${s.name}`, toCellValue: (i) => trials[i].params.find((p) => p.name === s.name)?.value || null, sortable: sortable, - filterable: false, // TODO(yoshinobc): Support filtering by categorical parameters + filterable: filterable, less: (firstEl, secondEl): number => { const firstVal = firstEl.params.find((p) => p.name === s.name)?.value const secondVal = secondEl.params.find( From 9727fd0fc80c99ac0a6be4c41ba549857e4415eb Mon Sep 17 00:00:00 2001 From: c-bata Date: Wed, 27 Apr 2022 08:55:53 +0900 Subject: [PATCH 2/3] Fix lint errors --- optuna_dashboard/ts/components/DataGrid.tsx | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/optuna_dashboard/ts/components/DataGrid.tsx b/optuna_dashboard/ts/components/DataGrid.tsx index 2b634cb7..d43b9777 100644 --- a/optuna_dashboard/ts/components/DataGrid.tsx +++ b/optuna_dashboard/ts/components/DataGrid.tsx @@ -102,12 +102,14 @@ function DataGrid(props: { : filters.some((f) => { // columns.find((c, idx) => idx === f.columnIdx).toCellValue // ここでrowIndexが必要。色々厳しい if (columns.length <= f.columnIdx) { - console.log(`columnIdx=${f.columnIdx} must be smaller than columns.length=${columns.length}`) + console.log( + `columnIdx=${f.columnIdx} must be smaller than columns.length=${columns.length}` + ) return true } const toCellValue = columns[f.columnIdx].toCellValue if (toCellValue !== undefined) { - return toCellValue(rowIdx) ===f.value + return toCellValue(rowIdx) === f.value } const field = columns[f.columnIdx].field return row[field] === f.value @@ -284,7 +286,10 @@ function DataGridRow(props: { key={`${row[keyField]}:${column.field}:${columnIndex}`} padding={column.padding || "normal"} onClick={(e) => { - const value = column.toCellValue !== undefined ? column.toCellValue(rowIndex) : row[column.field] + const value = + column.toCellValue !== undefined + ? column.toCellValue(rowIndex) + : row[column.field] handleClickFilterCell(columnIndex, value) }} > From 88c2a5fba0544cfc27f4f743513b2a73dd35a872 Mon Sep 17 00:00:00 2001 From: c-bata Date: Wed, 27 Apr 2022 09:00:08 +0900 Subject: [PATCH 3/3] Remove a comment --- optuna_dashboard/ts/components/DataGrid.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/optuna_dashboard/ts/components/DataGrid.tsx b/optuna_dashboard/ts/components/DataGrid.tsx index d43b9777..f87ae777 100644 --- a/optuna_dashboard/ts/components/DataGrid.tsx +++ b/optuna_dashboard/ts/components/DataGrid.tsx @@ -100,7 +100,6 @@ function DataGrid(props: { return filters.length === 0 ? true : filters.some((f) => { - // columns.find((c, idx) => idx === f.columnIdx).toCellValue // ここでrowIndexが必要。色々厳しい if (columns.length <= f.columnIdx) { console.log( `columnIdx=${f.columnIdx} must be smaller than columns.length=${columns.length}`