Add SelectBox for sorting

optuna_dashboard/ts/components/StudyDetailBeta.tsx

@@ -33,11 +33,7 @@ import VisibilityIcon from "@mui/icons-material/Visibility"
 import { GraphHistory } from "./GraphHistory"
 import { Note } from "./Note"
 import { actionCreator } from "../action"
-import {
-  reloadIntervalState,
-  studyDetailsState,
-  studySummariesState,
-} from "../state"
+import { reloadIntervalState, studyDetailsState } from "../state"
 import { TrialTable } from "./TrialTable"
 
 interface ParamTypes {
@@ -49,11 +45,6 @@ const useStudyDetailValue = (studyId: number): StudyDetail | null => {
   return studyDetails[studyId] || null
 }
 
-const useStudySummaryValue = (studyId: number): StudySummary | null => {
-  const studySummaries = useRecoilValue<StudySummary[]>(studySummariesState)
-  return studySummaries.find((s) => s.study_id == studyId) || null
-}
-
 export const StudyDetailBeta: FC<{
   toggleColorMode: () => void
   page: "top" | "trials"
@@ -63,7 +54,6 @@ export const StudyDetailBeta: FC<{
   const { studyId } = useParams<ParamTypes>()
   const studyIdNumber = parseInt(studyId, 10)
   const studyDetail = useStudyDetailValue(studyIdNumber)
-  const studySummary = useStudySummaryValue(studyIdNumber)
   const reloadInterval = useRecoilValue<number>(reloadIntervalState)
 
   useEffect(() => {
@@ -80,11 +70,6 @@ export const StudyDetailBeta: FC<{
     return () => clearInterval(intervalId)
   }, [reloadInterval, studyDetail])
 
-  // TODO(chenghuzi): Reduce the number of calls to setInterval and clearInterval.
-  const title =
-    studyDetail !== null || studySummary !== null
-      ? `${studyDetail?.name || studySummary?.study_name} (id=${studyId})`
-      : `Study #${studyId}`
   const trials: Trial[] = studyDetail !== null ? studyDetail.trials : []
 
   const trialListWidth = 240

optuna_dashboard/ts/components/StudyList.tsx

@@ -22,11 +22,11 @@ import {
   MenuItem,
   FormControl,
   FormLabel,
-  Select,
   useTheme,
   InputAdornment,
   SvgIcon,
   CardContent,
+  TextField,
 } from "@mui/material"
 import {
   Add,
@@ -36,6 +36,7 @@ import {
   Remove,
   Search,
 } from "@mui/icons-material"
+import SortIcon from "@mui/icons-material/Sort"
 
 import { actionCreator } from "../action"
 import { DataGrid, DataGridColumn } from "./DataGrid"
@@ -43,6 +44,7 @@ import { DebouncedInputTextField } from "./Debounce"
 import { studySummariesState } from "../state"
 import Brightness7Icon from "@mui/icons-material/Brightness7"
 import Brightness4Icon from "@mui/icons-material/Brightness4"
+import { styled } from "@mui/system"
 
 export const StudyList: FC<{
   toggleColorMode: () => void
@@ -222,6 +224,37 @@ export const StudyList: FC<{
     )
   }
 
+  const Wrapper = styled("div")(({ theme }) => ({
+    position: "relative",
+    borderRadius: theme.shape.borderRadius,
+  }))
+  const IconWrapper = styled("div")(({ theme }) => ({
+    padding: theme.spacing(0, 2),
+    height: "100%",
+    position: "absolute",
+    pointerEvents: "none",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+  }))
+  const Select = styled(TextField)(({ theme }) => ({
+    "& .MuiInputBase-input": {
+      // vertical padding + font size from searchIcon
+      paddingLeft: `calc(1em + ${theme.spacing(4)})`,
+    },
+  }))
+  const sortBySelect = (
+    <Wrapper>
+      <IconWrapper>
+        <SortIcon />
+      </IconWrapper>
+      <Select select value={"id-asc"}>
+        <MenuItem value={"id-asc"}>Study ID (asc)</MenuItem>
+        <MenuItem value={"id-desc"}>Study ID (desc)</MenuItem>
+      </Select>
+    </Wrapper>
+  )
+
   return (
     <div>
       <AppBar position="static">
@@ -320,7 +353,7 @@ export const StudyList: FC<{
       >
         <Card sx={{ margin: theme.spacing(2) }}>
           <CardContent>
-            <Box sx={{ maxWidth: 500 }}>
+            <Box sx={{ display: "flex" }}>
               <DebouncedInputTextField
                 onChange={(s) => {
                   setStudyFilterText(s)
@@ -331,6 +364,7 @@ export const StudyList: FC<{
                   id: "search-study",
                   variant: "outlined",
                   placeholder: "Search study",
+                  sx: { maxWidth: 500 },
                   InputProps: {
                     startAdornment: (
                       <InputAdornment position="start">
@@ -342,6 +376,7 @@ export const StudyList: FC<{
                   },
                 }}
               />
+              {sortBySelect}
             </Box>
           </CardContent>
         </Card>