diff --git a/optuna_dashboard/static/components/DataGrid.tsx b/optuna_dashboard/static/components/DataGrid.tsx index b8c5b099..c67324f2 100644 --- a/optuna_dashboard/static/components/DataGrid.tsx +++ b/optuna_dashboard/static/components/DataGrid.tsx @@ -44,8 +44,9 @@ function DataGrid(props: { collapseBody?: (rowIndex: number) => React.ReactNode initialRowsPerPage?: number rowsPerPageOption?: Array + defaultFilter?: (row: T) => boolean }) { - const { columns, rows, keyField, dense, collapseBody } = props + const { columns, rows, keyField, dense, collapseBody, defaultFilter } = props let { initialRowsPerPage, rowsPerPageOption } = props const [order, setOrder] = React.useState("asc") const [orderBy, setOrderBy] = React.useState(0) // index of columns @@ -92,13 +93,16 @@ function DataGrid(props: { setFilters(filters.filter((f) => f.field !== field)) } - const filteredRows = rows.filter((row) => - filters.length === 0 + const filteredRows = rows.filter((row) => { + if (defaultFilter !== undefined && defaultFilter(row)) { + return false + } + return filters.length === 0 ? true : filters.some((f) => { return row[f.field] === f.value }) - ) + }) // Sorting const createSortHandler = diff --git a/optuna_dashboard/static/components/StudyList.tsx b/optuna_dashboard/static/components/StudyList.tsx index 7c6859d4..a1b29dd0 100644 --- a/optuna_dashboard/static/components/StudyList.tsx +++ b/optuna_dashboard/static/components/StudyList.tsx @@ -64,6 +64,16 @@ export const StudyList: FC<{ React.useState(false) const [deleteStudyID, setDeleteStudyID] = React.useState(-1) const [newStudyName, setNewStudyName] = React.useState("") + const [studyFilterText, setStudyFilterText] = React.useState("") + const studyFilter = (row: StudySummary) => { + const keywords = studyFilterText.split(" ") + return !keywords.every((k) => { + if (k === "") { + return true + } + return row.study_name.indexOf(k) >= 0 + }) + } const [maximize, setMaximize] = React.useState(false) const [directions, setDirections] = React.useState([ @@ -327,6 +337,9 @@ export const StudyList: FC<{ id="search-study" variant="outlined" placeholder="Search study" + onChange={(e) => { + setStudyFilterText(e.target.value) + }} InputProps={{ startAdornment: ( @@ -348,6 +361,7 @@ export const StudyList: FC<{ collapseBody={collapseBody} initialRowsPerPage={-1} rowsPerPageOption={[5, 10, { label: "All", value: -1 }]} + defaultFilter={studyFilter} />