Merge pull request #1188 from c-bata/add-smart-filtering-form-component2

y0z · web-flow · commit dd23390de41f · 2025-10-29T13:43:25.000+09:00
Add `useSmartFilteringForm` hook for the composition support
diff --git a/optuna_dashboard/ts/components/TrialList.tsx b/optuna_dashboard/ts/components/TrialList.tsx
@@ -1,21 +1,17 @@
 import CheckBoxIcon from "@mui/icons-material/CheckBox"
 import CheckBoxOutlineBlankIcon from "@mui/icons-material/CheckBoxOutlineBlank"
-import ClearIcon from "@mui/icons-material/Clear"
 import FilterListIcon from "@mui/icons-material/FilterList"
 import StopCircleIcon from "@mui/icons-material/StopCircle"
 
 import {
   Box,
   Button,
-  CircularProgress,
   FormControl,
   IconButton,
-  InputAdornment,
   InputLabel,
   Menu,
   MenuItem,
   Select,
-  TextField,
   Typography,
   useTheme,
 } from "@mui/material"
@@ -27,18 +23,18 @@ import ListItemButton from "@mui/material/ListItemButton"
 import ListItemText from "@mui/material/ListItemText"
 import ListSubheader from "@mui/material/ListSubheader"
 import * as Optuna from "@optuna/types"
-import React, { FC, ReactNode, useCallback, useMemo, useState } from "react"
+import React, { FC, ReactNode, useMemo, useState } from "react"
 
 import ListItemIcon from "@mui/material/ListItemIcon"
 import { useVirtualizer } from "@tanstack/react-virtual"
 import { useAtom } from "jotai"
 import { useNavigate } from "react-router-dom"
-import { FormWidgets, StudyDetail, Trial } from "ts/types/optuna"
 import { actionCreator } from "../action"
 import { useConstants } from "../constantsProvider"
 import { useArtifactIsAvailable, useLLMIsAvailable } from "../hooks/useAPIMeta"
-import { useTrialFilterQuery } from "../hooks/useTrialFilterQuery"
+import { useSmartFilteringForm } from "../hooks/useSmartFilteringForm"
 import { trialListDurationTimeUnitState } from "../state"
+import { FormWidgets, StudyDetail, Trial } from "../types/optuna"
 import { useQuery } from "../urlQuery"
 import { ArtifactCards } from "./Artifact/ArtifactCards"
 import { TrialNote } from "./Note"
@@ -416,21 +412,22 @@ export const TrialList: FC<{ studyDetail: StudyDetail | null }> = ({
   const [llmFilteredTrials, setLlmFilteredTrials] = useState<
     Trial[] | undefined
   >()
-  const [trialFilterQuery, setTrialFilterQuery] = useState<string>("")
-  const handleClearFilter = useCallback(() => {
-    setTrialFilterQuery("")
-    setLlmFilteredTrials(undefined)
-  }, [])
-  const [trialFilter, renderIframe, isTrialFilterProcessing] =
-    useTrialFilterQuery({
-      nRetry: 5,
-      onDenied: handleClearFilter,
-      onFailed: (errorMsg: string) => {
-        console.error("Failed to filter trials:", errorMsg)
-        handleClearFilter()
-      },
-    })
   const llmEnabled = useLLMIsAvailable()
+  const [renderSmartFilteringForm] = useSmartFilteringForm(
+    (trialFilterQuery, trialFilter) => {
+      if (trialFilterQuery !== "") {
+        trialFilter(allTrials, trialFilterQuery)
+          .then((filtered) => {
+            setLlmFilteredTrials(filtered)
+          })
+          .catch(() => {
+            setLlmFilteredTrials(allTrials) // Fallback to all trials on error
+          })
+      } else {
+        setLlmFilteredTrials(allTrials)
+      }
+    }
+  )
 
   const allTrials = useMemo(() => {
     return studyDetail?.trials ?? []
@@ -484,64 +481,13 @@ export const TrialList: FC<{ studyDetail: StudyDetail | null }> = ({
             sx={{
               height: theme.spacing(8),
               p: theme.spacing(1),
+              gap: theme.spacing(1),
               display: "flex",
               flexDirection: "row",
               alignItems: "center",
             }}
           >
-            <TextField
-              id="trial-filter-query"
-              variant="outlined"
-              placeholder="Enter filter query (e.g., trial number < 10)"
-              fullWidth
-              size="small"
-              value={trialFilterQuery}
-              onChange={(e) => setTrialFilterQuery(e.target.value)}
-              slotProps={{
-                input: {
-                  endAdornment: trialFilterQuery && (
-                    <InputAdornment position="end">
-                      <IconButton
-                        aria-label="clear filter"
-                        onClick={handleClearFilter}
-                        edge="end"
-                        size="small"
-                        disabled={isTrialFilterProcessing}
-                      >
-                        <ClearIcon />
-                      </IconButton>
-                    </InputAdornment>
-                  ),
-                },
-              }}
-            />
-            <Button
-              variant="contained"
-              startIcon={
-                isTrialFilterProcessing ? (
-                  <CircularProgress size={16} />
-                ) : (
-                  <FilterListIcon />
-                )
-              }
-              disabled={isTrialFilterProcessing}
-              onClick={() => {
-                if (trialFilterQuery !== "" && !isTrialFilterProcessing) {
-                  trialFilter(allTrials, trialFilterQuery)
-                    .then((filtered) => {
-                      setLlmFilteredTrials(filtered)
-                    })
-                    .catch(() => {
-                      setLlmFilteredTrials(allTrials) // Fallback to all trials on error
-                    })
-                } else {
-                  setLlmFilteredTrials(allTrials)
-                }
-              }}
-              sx={{ marginLeft: theme.spacing(2), minWidth: "120px" }}
-            >
-              Filter
-            </Button>
+            {renderSmartFilteringForm()}
           </Box>
           <Divider />
         </>
@@ -746,7 +692,6 @@ export const TrialList: FC<{ studyDetail: StudyDetail | null }> = ({
           </Box>
         </Box>
       </Box>
-      {renderIframe()}
     </Box>
   )
 }
diff --git a/optuna_dashboard/ts/components/TrialSelection.tsx b/optuna_dashboard/ts/components/TrialSelection.tsx
@@ -1,27 +1,24 @@
 import DownloadIcon from "@mui/icons-material/Download"
-import FilterListIcon from "@mui/icons-material/FilterList"
 import {
   Alert,
   Box,
   Button,
   Card,
   CardContent,
-  CircularProgress,
   FormControl,
   FormControlLabel,
   Switch,
   useTheme,
 } from "@mui/material"
 import { PlotParallelCoordinate, TrialTable } from "@optuna/react"
-import React, { FC, useState, useCallback } from "react"
+import React, { FC, useState } from "react"
 import { Link } from "react-router-dom"
 import { useConstants } from "../constantsProvider"
 import { studyDetailToStudy } from "../graphUtil"
 import { useLLMIsAvailable } from "../hooks/useAPIMeta"
-import { useTrialFilterQuery } from "../hooks/useTrialFilterQuery"
+import { useSmartFilteringForm } from "../hooks/useSmartFilteringForm"
 import { StudyDetail, Trial } from "../types/optuna"
 import { SelectedTrialArtifactCards } from "./Artifact/SelectedTrialArtifactCards"
-import { DebouncedInputTextField } from "./Debounce"
 import { GraphHistory } from "./GraphHistory"
 import { GraphParetoFront } from "./GraphParetoFront"
 
@@ -36,7 +33,6 @@ export const TrialSelection: FC<{ studyDetail: StudyDetail }> = ({
   const [includeDominatedTrials, setIncludeDominatedTrials] =
     useState<boolean>(true)
   const [showArtifacts, setShowArtifacts] = useState<boolean>(false)
-  const [filterQuery, setFilterQuery] = useState("")
   const [filteredTrials, setFilteredTrials] = useState<Trial[] | undefined>(
     undefined
   )
@@ -57,38 +53,24 @@ export const TrialSelection: FC<{ studyDetail: StudyDetail }> = ({
     }
     setIncludeDominatedTrials(!includeDominatedTrials)
   }
-  const handleClearFilter = useCallback(() => {
-    setFilterQuery("")
-    setFilteredTrials(undefined)
-  }, [])
-  const [trialFilter, render, isTrialFilterProcessing] = useTrialFilterQuery({
-    nRetry: 5,
-    onDenied: handleClearFilter,
-    onFailed: (errorMsg: string): void => {
-      console.error(errorMsg)
-      handleClearFilter()
-    },
-  })
-
-  const handleFilter = useCallback(async () => {
-    if (isTrialFilterProcessing) {
-      return
-    }
-
-    if (!filterQuery.trim()) {
-      setFilteredTrials(undefined)
-      return
-    }
-
-    try {
-      const result = await trialFilter(studyDetail.trials, filterQuery)
-      setFilteredTrials(result)
-    } catch (error) {
-      // eslint-disable-next-line no-empty
-      // Error handling is delegated to onDenied/onFailed callbacks to avoid
-      // emmiting error logs when user denied the execution.
+  const [renderSmartFilteringForm] = useSmartFilteringForm(
+    (trialFilterQuery, trialFilter) => {
+      if (!trialFilterQuery.trim()) {
+        setFilteredTrials(undefined)
+        return
+      }
+      trialFilter(studyDetail.trials, trialFilterQuery)
+        .then((filtered) => {
+          setFilteredTrials(filtered)
+        })
+        .catch(() => {
+          // eslint-disable-next-line no-empty
+          // Error handling is delegated to onDenied/onFailed callbacks to avoid
+          // emmiting error logs when user denied the execution.
+          setFilteredTrials(undefined) // Fallback to all trials on error
+        })
     }
-  }, [filterQuery, trialFilter, studyDetail.trials])
+  )
 
   const study = studyDetailToStudy(studyDetail)
   const linkURL = (studyId: number, trialNumber: number) => {
@@ -127,32 +109,7 @@ export const TrialSelection: FC<{ studyDetail: StudyDetail }> = ({
               alignItems: "center",
             }}
           >
-            <DebouncedInputTextField
-              onChange={(val) => setFilterQuery(val)}
-              delay={500}
-              textFieldProps={{
-                placeholder: "Enter filter query (e.g., trial number < 10)",
-                fullWidth: true,
-                size: "small",
-                disabled: isTrialFilterProcessing,
-                type: "search",
-              }}
-            />
-            <Button
-              variant="contained"
-              startIcon={
-                isTrialFilterProcessing ? (
-                  <CircularProgress size={16} />
-                ) : (
-                  <FilterListIcon />
-                )
-              }
-              onClick={handleFilter}
-              disabled={isTrialFilterProcessing}
-              sx={{ minWidth: "120px", flexShrink: 0 }}
-            >
-              Filter
-            </Button>
+            {renderSmartFilteringForm()}
           </Box>
         )}
         <FormControlLabel
@@ -272,7 +229,6 @@ export const TrialSelection: FC<{ studyDetail: StudyDetail }> = ({
           </Card>
         </Box>
       )}
-      {render()}
     </Box>
   )
 }
diff --git a/optuna_dashboard/ts/hooks/useSmartFilteringForm.tsx b/optuna_dashboard/ts/hooks/useSmartFilteringForm.tsx
@@ -0,0 +1,79 @@
+import FilterListIcon from "@mui/icons-material/FilterList"
+import { Button, CircularProgress, TextField } from "@mui/material"
+import React, { ReactNode, useState, useRef } from "react"
+import { Trial } from "../types/optuna"
+import { useTrialFilterQuery } from "./useTrialFilterQuery"
+
+export const useSmartFilteringForm = (
+  handleFilter: (
+    trialFilterQuery: string,
+    trialFilter: (trials: Trial[], filterQueryStr: string) => Promise<Trial[]>
+  ) => void
+): [() => ReactNode] => {
+  const [isComposing, setIsComposing] = useState(false)
+  const inputRef = useRef<HTMLInputElement>(null)
+  const handleClearFilter = () => {
+    if (inputRef.current) {
+      inputRef.current.value = ""
+    }
+  }
+  const [trialFilter, renderIframe, isProcessing] = useTrialFilterQuery({
+    nRetry: 5,
+    onDenied: handleClearFilter,
+    onFailed: (errorMsg: string) => {
+      console.error("Failed to filter trials:", errorMsg)
+      handleClearFilter()
+    },
+  })
+  const handleSubmit = () => {
+    if (isProcessing) {
+      return
+    }
+    handleFilter(inputRef.current?.value ?? "", trialFilter)
+  }
+
+  const render = () => {
+    return (
+      <>
+        <TextField
+          onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => {
+            if (e.key === "Enter" && !isComposing) {
+              e.preventDefault()
+              handleSubmit()
+            }
+          }}
+          placeholder="Enter filter query (e.g., trial number < 10)"
+          fullWidth={true}
+          size="small"
+          disabled={isProcessing}
+          type="search"
+          onCompositionStart={() => {
+            setIsComposing(true)
+          }}
+          onCompositionEnd={() => {
+            setIsComposing(false)
+          }}
+          inputRef={inputRef}
+        />
+        <Button
+          variant="contained"
+          startIcon={
+            isProcessing ? <CircularProgress size={16} /> : <FilterListIcon />
+          }
+          onClick={() => {
+            if (isProcessing) {
+              return
+            }
+            handleSubmit()
+          }}
+          disabled={isProcessing}
+          sx={{ minWidth: "120px", flexShrink: 0 }}
+        >
+          Filter
+        </Button>
+        {renderIframe()}
+      </>
+    )
+  }
+  return [render]
+}
