Resolve type errors

optuna_dashboard/ts/components/AppDrawer.tsx

@@ -175,7 +175,7 @@ export const AppDrawer: FC<{
   }
 
   return (
-    <Box sx={{ display: "flex", width: "100%" }}>
+    <Box component="div" sx={{ display: "flex", width: "100%" }}>
       <AppBar position="fixed" open={open}>
         <Toolbar>
           <IconButton
@@ -316,7 +316,7 @@ export const AppDrawer: FC<{
             </ListItem>
           </List>
         )}
-        <Box sx={{ flexGrow: 1 }} />
+        <Box component="div" sx={{ flexGrow: 1 }} />
         <Divider />
         <List>
           {studyId !== undefined && (
@@ -359,6 +359,7 @@ export const AppDrawer: FC<{
               aria-describedby="modal-modal-description"
             >
               <Box
+                component="div"
                 sx={{
                   position: "absolute",
                   top: "50%",

optuna_dashboard/ts/components/CompareStudies.tsx

@@ -115,10 +115,14 @@ export const CompareStudies: FC<{
   )
 
   return (
-    <Box sx={{ display: "flex" }}>
+    <Box component="div" sx={{ display: "flex" }}>
       <AppDrawer toggleColorMode={toggleColorMode} toolbar={toolbar}>
-        <Box sx={{ display: "flex", flexDirection: "row", width: "100%" }}>
+        <Box
+          component="div"
+          sx={{ display: "flex", flexDirection: "row", width: "100%" }}
+        >
           <Box
+            component="div"
             sx={{
               minWidth: studyListWidth,
               overflow: "auto",
@@ -130,7 +134,7 @@ export const CompareStudies: FC<{
                 <Typography sx={{ p: theme.spacing(1, 0) }}>
                   Compare studies with Shift+Click
                 </Typography>
-                <Box sx={{ flexGrow: 1 }} />
+                <Box component="div" sx={{ flexGrow: 1 }} />
               </ListSubheader>
               <Divider />
               {studies.map((study) => {
@@ -200,6 +204,7 @@ export const CompareStudies: FC<{
                         primary={`${study.study_id}. ${study.study_name}`}
                       />
                       <Box
+                        component="div"
                         sx={{
                           display: "flex",
                           flexDirection: "row",
@@ -234,13 +239,17 @@ export const CompareStudies: FC<{
           </Box>
           <Divider orientation="vertical" flexItem />
           <Box
+            component="div"
             sx={{
               flexGrow: 1,
               overflow: "auto",
               height: `calc(100vh - ${theme.spacing(8)})`,
             }}
           >
-            <Box sx={{ display: "flex", flexDirection: "row", width: "100%" }}>
+            <Box
+              component="div"
+              sx={{ display: "flex", flexDirection: "row", width: "100%" }}
+            >
               <StudiesGraph studies={selected} />
             </Box>
           </Box>
@@ -274,7 +283,10 @@ const StudiesGraph: FC<{ studies: StudySummary[] }> = ({ studies }) => {
   const showStudyDetails = studies.map((study) => studyDetails[study.study_id])
 
   return (
-    <Box sx={{ display: "flex", width: "100%", flexDirection: "column" }}>
+    <Box
+      component="div"
+      sx={{ display: "flex", width: "100%", flexDirection: "column" }}
+    >
       <FormControl
         component="fieldset"
         sx={{

optuna_dashboard/ts/components/GraphEdf.tsx

@@ -45,7 +45,7 @@ const GraphEdfBackend: FC<{
         console.error(err)
       })
   }, [studyIds, numCompletedTrials])
-  return <Box id={domId} sx={{ height: "450px" }} />
+  return <Box component="div" id={domId} sx={{ height: "450px" }} />
 }
 
 const GraphEdfFrontend: FC<{
@@ -74,14 +74,14 @@ const GraphEdfFrontend: FC<{
   }, [studies, target, colorTheme])
 
   return (
-    <Box>
+    <Box component="div">
       <Typography
         variant="h6"
         sx={{ margin: "1em 0", fontWeight: theme.typography.fontWeightBold }}
       >
         {`EDF for ${target.toLabel(studies[0].objective_names)}`}
       </Typography>
-      <Box id={domId} sx={{ height: "450px" }} />
+      <Box component="div" id={domId} sx={{ height: "450px" }} />
     </Box>
   )
 }

optuna_dashboard/ts/components/GraphHistory.tsx

@@ -210,6 +210,7 @@ export const GraphHistory: FC<{
       </Grid>
       <Grid item xs={9}>
         <Box
+          component="div"
           id={plotDomId}
           sx={{
             height: "450px",

optuna_dashboard/ts/components/Note.tsx

@@ -296,6 +296,7 @@ const MarkdownEditorModal: FC<{
         title="Markdown Editor"
       />
       <Box
+        component="div"
         sx={{
           flexGrow: 1,
           padding: theme.spacing(2),
@@ -306,6 +307,7 @@ const MarkdownEditorModal: FC<{
         <MarkdownRenderer body={previewMarkdown} />
       </Box>
       <Box
+        component="div"
         sx={{
           width: "100%",
           flexGrow: 1,
@@ -345,7 +347,10 @@ const MarkdownEditorModal: FC<{
           />
         )}
       </Box>
-      <Box sx={{ display: "flex", flexDirection: "row", alignItems: "center" }}>
+      <Box
+        component="div"
+        sx={{ display: "flex", flexDirection: "row", alignItems: "center" }}
+      >
         {notLatest && !saving && (
           <>
             <Typography
@@ -369,7 +374,7 @@ const MarkdownEditorModal: FC<{
             </Button>
           </>
         )}
-        <Box sx={{ flexGrow: 1 }} />
+        <Box component="div" sx={{ flexGrow: 1 }} />
         <Button
           variant="outlined"
           onClick={() => {
@@ -452,6 +457,7 @@ const ArtifactUploader: FC<{
 
   return (
     <Box
+      component="div"
       sx={{
         width: "300px",
         padding: theme.spacing(0, 1),
@@ -486,6 +492,7 @@ const ArtifactUploader: FC<{
         style={{ display: "none" }}
       />
       <Box
+        component="div"
         sx={{
           border: dragOver
             ? `3px dashed ${theme.palette.mode === "dark" ? "white" : "black"}`
@@ -499,6 +506,7 @@ const ArtifactUploader: FC<{
       >
         {dragOver && (
           <Box
+            component="div"
             sx={{
               width: "100%",
               height: "100%",

optuna_dashboard/ts/components/StudyDetail.tsx

@@ -35,13 +35,17 @@ import { PreferentialHistory } from "./Preferential/PreferentialHistory"
 import { PreferentialAnalytics } from "./Preferential/PreferentialAnalytics"
 import { PreferentialGraph } from "./Preferential/PreferentialGraph"
 
-interface ParamTypes {
+type ParamTypes = {
   studyId: string
 }
 
 export const useURLVars = (): number => {
   const { studyId } = useParams<ParamTypes>()
 
+  if (studyId === undefined) {
+    throw new Error("studyId is not defined")
+  }
+
   return useMemo(() => parseInt(studyId, 10), [studyId])
 }
 
@@ -102,7 +106,10 @@ export const StudyDetail: FC<{
     content = isPreferential ? (
       <PreferentialAnalytics studyId={studyId} />
     ) : (
-      <Box sx={{ display: "flex", width: "100%", flexDirection: "column" }}>
+      <Box
+        component="div"
+        sx={{ display: "flex", width: "100%", flexDirection: "column" }}
+      >
         <Typography
           variant="h5"
           sx={{
@@ -162,7 +169,10 @@ export const StudyDetail: FC<{
     content = <TrialList studyDetail={studyDetail} />
   } else if (page === "trialTable") {
     content = (
-      <Box sx={{ display: "flex", width: "100%", flexDirection: "column" }}>
+      <Box
+        component="div"
+        sx={{ display: "flex", width: "100%", flexDirection: "column" }}
+      >
         <Card sx={{ margin: theme.spacing(2) }}>
           <CardContent>
             <TrialTable studyDetail={studyDetail} initialRowsPerPage={50} />
@@ -173,6 +183,7 @@ export const StudyDetail: FC<{
   } else if (page === "note" && studyDetail !== null) {
     content = (
       <Box
+        component="div"
         sx={{
           height: `calc(100vh - ${theme.spacing(8)})`,
           display: "flex",
@@ -199,6 +210,7 @@ export const StudyDetail: FC<{
   } else if (page === "graph") {
     content = (
       <Box
+        component="div"
         sx={{
           height: `calc(100vh - ${theme.spacing(8)})`,
           padding: theme.spacing(2),
@@ -234,7 +246,7 @@ export const StudyDetail: FC<{
   )
 
   return (
-    <Box sx={{ display: "flex" }}>
+    <Box component="div" sx={{ display: "flex" }}>
       <AppDrawer
         studyId={studyId}
         page={page}

optuna_dashboard/ts/dateUtil.ts

@@ -1,5 +1,5 @@
 export const formatDate = (date: Date): string => {
-  const options = {
+  const options: Intl.DateTimeFormatOptions = {
     year: "numeric",
     month: "numeric",
     day: "numeric",

optuna_dashboard/tsconfig.json

@@ -1,6 +1,7 @@
 {
   "compilerOptions": {
     "baseUrl": ".",
+    "skipLibCheck": true,
     "strictNullChecks": true,
     "moduleResolution": "node",
     "noUnusedLocals": true,