Merge pull request #1194 from optuna/feat/smart-text-field

Add Support for triggering graph generation via Enter key press to `GraphByLLM`

Author: c-bata

optuna_dashboard/ts/components/GraphByLLM.tsx

@@ -1,4 +1,3 @@
-import ClearIcon from "@mui/icons-material/Clear"
 import DeleteIcon from "@mui/icons-material/Delete"
 import EditRoadIcon from "@mui/icons-material/EditRoad"
 import MoreVertIcon from "@mui/icons-material/MoreVert"
@@ -10,12 +9,10 @@ import {
   Card,
   CardContent,
   IconButton,
-  InputAdornment,
   ListItemIcon,
   ListItemText,
   Menu,
   MenuItem,
-  TextField,
   Typography,
   useTheme,
 } from "@mui/material"
@@ -26,6 +23,7 @@ import React, { FC, useEffect, useState } from "react"
 import { useGeneratePlotlyGraphQuery } from "../hooks/useGeneratePlotlyGraphQuery"
 import { usePlotlyColorTheme } from "../state"
 import { StudyDetail } from "../types/optuna"
+import { SmartTextField } from "./SmartTextField"
 
 const plotDomIdPrefix = "graph-by-llm"
 
@@ -142,30 +140,17 @@ const GraphByLLMItem: FC<{
 
         {isEditingGraph && (
           <Box sx={{ display: "flex", marginBottom: theme.spacing(2) }}>
-            <TextField
+            <SmartTextField
               id={`graph-by-llm-item-query-${id}`}
+              value={queryInput}
+              setValue={setQueryInput}
               variant="outlined"
               placeholder="Enter the part you want to edit in the graph"
               fullWidth
               size="small"
-              value={queryInput}
-              onChange={(e) => setQueryInput(e.target.value)}
-              slotProps={{
-                input: {
-                  endAdornment: queryInput && (
-                    <InputAdornment position="end">
-                      <IconButton
-                        aria-label="clear filter"
-                        onClick={() => setQueryInput("")}
-                        edge="end"
-                        size="small"
-                        disabled={isReGeneratingPlotlyGraph}
-                      >
-                        <ClearIcon />
-                      </IconButton>
-                    </InputAdornment>
-                  ),
-                },
+              clearButtonDisabled={isReGeneratingPlotlyGraph}
+              handleSubmit={() => {
+                reGeneratePlotlyGraph(queryInput)
               }}
             />
             <Button
@@ -231,6 +216,21 @@ export const GraphByLLM: FC<{
   >([])
   const [queryInput, setQueryInput] = useState("")
 
+  const handleSubmit = () => {
+    if (study === null) return
+    generatePlotlyGraph(study, queryInput).then((result) => {
+      setGraphs((prev) => [
+        ...prev,
+        {
+          id: String(new Date().getTime()),
+          functionStr: result.functionStr,
+          title: result.graphTitle,
+          plotData: result.plotData,
+        },
+      ])
+    })
+  }
+
   return (
     <Stack
       spacing={2}
@@ -280,51 +280,23 @@ export const GraphByLLM: FC<{
         />
       ))}
       <Box sx={{ display: "flex" }}>
-        <TextField
+        <SmartTextField
           id="graph-by-llm-query"
           variant="outlined"
           placeholder="Enter your query to generate a graph, e.g., 'Plot objective value vs trial number'"
           fullWidth
           size="small"
           value={queryInput}
-          onChange={(e) => setQueryInput(e.target.value)}
-          slotProps={{
-            input: {
-              endAdornment: queryInput && (
-                <InputAdornment position="end">
-                  <IconButton
-                    aria-label="clear filter"
-                    onClick={() => setQueryInput("")}
-                    edge="end"
-                    size="small"
-                    disabled={isProcessing}
-                  >
-                    <ClearIcon />
-                  </IconButton>
-                </InputAdornment>
-              ),
-            },
-          }}
+          setValue={setQueryInput}
+          clearButtonDisabled={isProcessing}
+          handleSubmit={handleSubmit}
         />
         <LoadingButton
           sx={{ marginLeft: theme.spacing(2) }}
           variant="contained"
           loading={isProcessing}
           disabled={queryInput.trim() === ""}
-          onClick={() => {
-            if (study === null) return
-            generatePlotlyGraph(study, queryInput).then((result) => {
-              setGraphs((prev) => [
-                ...prev,
-                {
-                  id: String(new Date().getTime()),
-                  functionStr: result.functionStr,
-                  title: result.graphTitle,
-                  plotData: result.plotData,
-                },
-              ])
-            })
-          }}
+          onClick={handleSubmit}
         >
           Generate
         </LoadingButton>

optuna_dashboard/ts/components/SmartTextField.tsx

@@ -0,0 +1,59 @@
+import ClearIcon from "@mui/icons-material/Clear"
+import {
+  IconButton,
+  InputAdornment,
+  TextField,
+  TextFieldProps,
+} from "@mui/material"
+import React, { FC, useState } from "react"
+
+export const SmartTextField: FC<
+  {
+    handleSubmit: () => void
+    value: string
+    setValue: React.Dispatch<React.SetStateAction<string>>
+    clearButtonDisabled?: boolean
+  } & Omit<
+    TextFieldProps,
+    "onCompositionStart" | "onCompositionEnd" | "value" | "onChange"
+  >
+> = ({ handleSubmit, value, setValue, clearButtonDisabled, ...props }) => {
+  const [isComposing, setIsComposing] = useState(false)
+
+  return (
+    <TextField
+      onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => {
+        if (e.key === "Enter" && !isComposing) {
+          e.preventDefault()
+          handleSubmit()
+        }
+      }}
+      value={value}
+      onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+        setValue(e.target.value)
+      }}
+      onCompositionStart={() => setIsComposing(true)}
+      onCompositionEnd={() => setIsComposing(false)}
+      slotProps={{
+        input: {
+          endAdornment: value && (
+            <InputAdornment position="end">
+              <IconButton
+                aria-label="clear filter"
+                onClick={() => {
+                  setValue("")
+                }}
+                edge="end"
+                size="small"
+                disabled={clearButtonDisabled}
+              >
+                <ClearIcon />
+              </IconButton>
+            </InputAdornment>
+          ),
+        },
+      }}
+      {...props}
+    />
+  )
+}

optuna_dashboard/ts/hooks/useSmartFilteringForm.tsx

@@ -1,6 +1,7 @@
 import FilterListIcon from "@mui/icons-material/FilterList"
-import { Button, CircularProgress, TextField } from "@mui/material"
-import React, { ReactNode, useState, useRef } from "react"
+import { Button, CircularProgress } from "@mui/material"
+import React, { ReactNode, useState } from "react"
+import { SmartTextField } from "../components/SmartTextField"
 import { Trial } from "../types/optuna"
 import { useTrialFilterQuery } from "./useTrialFilterQuery"
 
@@ -10,12 +11,9 @@ export const useSmartFilteringForm = (
     trialFilter: (trials: Trial[], filterQueryStr: string) => Promise<Trial[]>
   ) => void
 ): [() => ReactNode] => {
-  const [isComposing, setIsComposing] = useState(false)
-  const inputRef = useRef<HTMLInputElement>(null)
+  const [value, setValue] = useState("")
   const handleClearFilter = () => {
-    if (inputRef.current) {
-      inputRef.current.value = ""
-    }
+    setValue("")
   }
   const [trialFilter, renderIframe, isProcessing] = useTrialFilterQuery({
     nRetry: 5,
@@ -29,31 +27,21 @@ export const useSmartFilteringForm = (
     if (isProcessing) {
       return
     }
-    handleFilter(inputRef.current?.value ?? "", trialFilter)
+    handleFilter(value, trialFilter)
   }
 
   const render = () => {
     return (
       <>
-        <TextField
-          onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => {
-            if (e.key === "Enter" && !isComposing) {
-              e.preventDefault()
-              handleSubmit()
-            }
-          }}
+        <SmartTextField
+          handleSubmit={handleSubmit}
+          value={value}
+          setValue={setValue}
+          clearButtonDisabled={isProcessing}
           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"