Filter studies by keywords

optuna_dashboard/static/components/DataGrid.tsx

@@ -44,8 +44,9 @@ function DataGrid<T>(props: {
   collapseBody?: (rowIndex: number) => React.ReactNode
   initialRowsPerPage?: number
   rowsPerPageOption?: Array<number | { value: number; label: string }>
+  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<Order>("asc")
   const [orderBy, setOrderBy] = React.useState<number>(0) // index of columns
@@ -92,13 +93,16 @@ function DataGrid<T>(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 =

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<string>("")
+  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<StudyDirection[]>([
@@ -327,6 +337,9 @@ export const StudyList: FC<{
                 id="search-study"
                 variant="outlined"
                 placeholder="Search study"
+                onChange={(e) => {
+                  setStudyFilterText(e.target.value)
+                }}
                 InputProps={{
                   startAdornment: (
                     <InputAdornment position="start">
@@ -348,6 +361,7 @@ export const StudyList: FC<{
             collapseBody={collapseBody}
             initialRowsPerPage={-1}
             rowsPerPageOption={[5, 10, { label: "All", value: -1 }]}
+            defaultFilter={studyFilter}
           />
         </Card>
       </Container>