Add type annotation & arrange import statements

optuna_dashboard/ts/components/App.tsx

@@ -5,8 +5,7 @@ import {
   createTheme,
   useMediaQuery,
 } from "@mui/material"
-import blue from "@mui/material/colors/blue"
-import pink from "@mui/material/colors/pink"
+import { blue, pink } from "@mui/material/colors"
 import { SnackbarProvider } from "notistack"
 import React, { FC, useMemo, useState, useEffect } from "react"
 import { BrowserRouter as Router, Route, Routes } from "react-router-dom"

optuna_dashboard/ts/components/AppDrawer.tsx

@@ -1,26 +1,32 @@
-import AutoGraphIcon from "@mui/icons-material/AutoGraph"
-import Brightness4Icon from "@mui/icons-material/Brightness4"
-import Brightness7Icon from "@mui/icons-material/Brightness7"
-import ChevronLeftIcon from "@mui/icons-material/ChevronLeft"
-import ChevronRightIcon from "@mui/icons-material/ChevronRight"
-import RateReviewIcon from "@mui/icons-material/RateReview"
-import SettingsIcon from "@mui/icons-material/Settings"
-import SyncIcon from "@mui/icons-material/Sync"
-import SyncDisabledIcon from "@mui/icons-material/SyncDisabled"
-import TableViewIcon from "@mui/icons-material/TableView"
-import ViewListIcon from "@mui/icons-material/ViewList"
-import MuiAppBar, { AppBarProps as MuiAppBarProps } from "@mui/material/AppBar"
-import Box from "@mui/material/Box"
-import Divider from "@mui/material/Divider"
-import MuiDrawer from "@mui/material/Drawer"
-import IconButton from "@mui/material/IconButton"
-import List from "@mui/material/List"
-import ListItem from "@mui/material/ListItem"
-import ListItemButton from "@mui/material/ListItemButton"
-import ListItemIcon from "@mui/material/ListItemIcon"
-import ListItemText from "@mui/material/ListItemText"
-import Modal from "@mui/material/Modal"
-import Toolbar from "@mui/material/Toolbar"
+import {
+  AutoGraph as AutoGraphIcon,
+  Brightness4 as Brightness4Icon,
+  Brightness7 as Brightness7Icon,
+  ChevronLeft as ChevronLeftIcon,
+  ChevronRight as ChevronRightIcon,
+  RateReview as RateReviewIcon,
+  Settings as SettingsIcon,
+  Sync as SyncIcon,
+  SyncDisabled as SyncDisabledIcon,
+  TableView as TableViewIcon,
+  ViewList as ViewListIcon,
+} from "@mui/icons-material"
+import {
+  AppBarProps as MuiAppBarProps,
+  Box,
+  Divider,
+  Drawer as MuiDrawer,
+  IconButton,
+  List,
+  ListItem,
+  ListItemButton,
+  ListItemIcon,
+  ListItemText,
+  Modal,
+  Switch,
+  Toolbar,
+} from "@mui/material"
+import MuiAppBar from "@mui/material/AppBar"
 import { CSSObject, Theme, styled, useTheme } from "@mui/material/styles"
 import React, { FC } from "react"
 import { Link } from "react-router-dom"
@@ -32,14 +38,15 @@ import {
 } from "../state"
 import { Settings } from "./Settings"
 
-import GitHubIcon from "@mui/icons-material/GitHub"
-import HistoryIcon from "@mui/icons-material/History"
-import LanIcon from "@mui/icons-material/Lan"
-import MenuIcon from "@mui/icons-material/Menu"
-import OpenInNewIcon from "@mui/icons-material/OpenInNew"
-import QueryStatsIcon from "@mui/icons-material/QueryStats"
-import ThumbUpAltIcon from "@mui/icons-material/ThumbUpAlt"
-import { Switch } from "@mui/material"
+import {
+  GitHub as GitHubIcon,
+  History as HistoryIcon,
+  Lan as LanIcon,
+  Menu as MenuIcon,
+  OpenInNew as OpenInNewIcon,
+  QueryStats as QueryStatsIcon,
+  ThumbUpAlt as ThumbUpAltIcon,
+} from "@mui/icons-material"
 import { actionCreator } from "../action"
 
 const drawerWidth = 240

optuna_dashboard/ts/components/Artifact/StudyArtifactCards.tsx

@@ -1,7 +1,9 @@
-import DeleteIcon from "@mui/icons-material/Delete"
-import DownloadIcon from "@mui/icons-material/Download"
-import FullscreenIcon from "@mui/icons-material/Fullscreen"
-import UploadFileIcon from "@mui/icons-material/UploadFile"
+import {
+  Delete as DeleteIcon,
+  Download as DownloadIcon,
+  Fullscreen as FullscreenIcon,
+  UploadFile as UploadFileIcon,
+} from "@mui/icons-material"
 import {
   Box,
   Card,

optuna_dashboard/ts/components/Artifact/TableArtifactViewer.tsx

@@ -1,6 +1,5 @@
-import ClearIcon from "@mui/icons-material/Clear"
-import { Box, Modal, useTheme } from "@mui/material"
-import IconButton from "@mui/material/IconButton"
+import { Clear as ClearIcon } from "@mui/icons-material"
+import { Box, IconButton, Modal, useTheme } from "@mui/material"
 import { DataGrid } from "@optuna/react"
 import { useSnackbar } from "notistack"
 import Papa from "papaparse"

optuna_dashboard/ts/components/Artifact/ThreejsArtifactViewer.tsx

@@ -1,6 +1,5 @@
-import ClearIcon from "@mui/icons-material/Clear"
-import { Box, Modal, useTheme } from "@mui/material"
-import IconButton from "@mui/material/IconButton"
+import { Clear as ClearIcon } from "@mui/icons-material"
+import { Box, IconButton, Modal, useTheme } from "@mui/material"
 import { GizmoHelper, GizmoViewport, OrbitControls } from "@react-three/drei"
 import { Canvas } from "@react-three/fiber"
 import React, { useEffect, useState, ReactNode } from "react"

optuna_dashboard/ts/components/Artifact/TrialArtifactCards.tsx

@@ -1,7 +1,9 @@
-import DeleteIcon from "@mui/icons-material/Delete"
-import DownloadIcon from "@mui/icons-material/Download"
-import FullscreenIcon from "@mui/icons-material/Fullscreen"
-import UploadFileIcon from "@mui/icons-material/UploadFile"
+import {
+  Delete as DeleteIcon,
+  Download as DownloadIcon,
+  Fullscreen as FullscreenIcon,
+  UploadFile as UploadFileIcon,
+} from "@mui/icons-material"
 import {
   Box,
   Card,

optuna_dashboard/ts/components/BestTrialsCard.tsx

@@ -1,4 +1,4 @@
-import LinkIcon from "@mui/icons-material/Link"
+import { Link as LinkIcon } from "@mui/icons-material"
 import {
   Box,
   Button,

optuna_dashboard/ts/components/CompareStudies.tsx

@@ -1,24 +1,26 @@
-import ChevronRightIcon from "@mui/icons-material/ChevronRight"
-import HomeIcon from "@mui/icons-material/Home"
+import {
+  ChevronRight as ChevronRightIcon,
+  Home as HomeIcon,
+} from "@mui/icons-material"
 import {
   Box,
   Card,
   CardContent,
+  Chip,
+  Divider,
   FormControl,
+  FormControlLabel,
+  Grid,
   IconButton,
+  List,
+  ListItem,
+  ListItemButton,
+  ListItemText,
+  ListSubheader,
   Switch,
   Typography,
   useTheme,
 } from "@mui/material"
-import Chip from "@mui/material/Chip"
-import Divider from "@mui/material/Divider"
-import FormControlLabel from "@mui/material/FormControlLabel"
-import Grid from "@mui/material/Grid"
-import List from "@mui/material/List"
-import ListItem from "@mui/material/ListItem"
-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 { useSnackbar } from "notistack"
 import React, { FC, useEffect, useMemo, useState } from "react"
@@ -143,7 +145,9 @@ export const CompareStudies: FC<{
                 return (
                   <ListItem key={study.study_id} disablePadding>
                     <ListItemButton
-                      onClick={(e) => {
+                      onClick={(
+                        e: React.MouseEvent<HTMLDivElement, MouseEvent>
+                      ) => {
                         if (e.shiftKey) {
                           let next: number[]
                           const selectedIds = selected.map((s) => s.study_id)

optuna_dashboard/ts/components/CreateStudyDialog.tsx

@@ -1,5 +1,4 @@
-import AddIcon from "@mui/icons-material/Add"
-import RemoveIcon from "@mui/icons-material/Remove"
+import { Add as AddIcon, Remove as RemoveIcon } from "@mui/icons-material"
 import {
   Button,
   Dialog,

optuna_dashboard/ts/components/GraphHistory.tsx

@@ -203,7 +203,7 @@ export const GraphHistory: FC<{
             min={1}
             max={10}
             step={1}
-            onChange={(e) => {
+            onChange={(e: Event) => {
               // @ts-ignore
               setMarkerSize(e.target.value as number)
             }}

optuna_dashboard/ts/components/Note.tsx

@@ -1,10 +1,12 @@
-import CloseIcon from "@mui/icons-material/Close"
-import EditIcon from "@mui/icons-material/Edit"
-import HtmlIcon from "@mui/icons-material/Html"
-import ModeEditIcon from "@mui/icons-material/ModeEdit"
-import SaveIcon from "@mui/icons-material/Save"
-import UploadFileIcon from "@mui/icons-material/UploadFile"
-import LoadingButton from "@mui/lab/LoadingButton"
+import {
+  Close as CloseIcon,
+  Edit as EditIcon,
+  Html as HtmlIcon,
+  ModeEdit as ModeEditIcon,
+  Save as SaveIcon,
+  UploadFile as UploadFileIcon,
+} from "@mui/icons-material"
+import { LoadingButton } from "@mui/lab"
 import {
   Box,
   Button,

optuna_dashboard/ts/components/Preferential/PreferentialAnalytics.tsx

@@ -2,11 +2,11 @@ import {
   Box,
   Card,
   CardContent,
+  Grid,
   Paper,
   Typography,
   useTheme,
 } from "@mui/material"
-import Grid from "@mui/material/Grid"
 import { DataGrid } from "@optuna/react"
 import * as Optuna from "@optuna/types"
 import React, { FC } from "react"

optuna_dashboard/ts/components/Preferential/PreferentialHistory.tsx

@@ -1,17 +1,19 @@
-import ClearIcon from "@mui/icons-material/Clear"
-import DeleteIcon from "@mui/icons-material/Delete"
-import OpenInFullIcon from "@mui/icons-material/OpenInFull"
-import RestoreFromTrashIcon from "@mui/icons-material/RestoreFromTrash"
+import {
+  Clear as ClearIcon,
+  Delete as DeleteIcon,
+  OpenInFull as OpenInFullIcon,
+  RestoreFromTrash as RestoreFromTrashIcon,
+} from "@mui/icons-material"
 import {
   Box,
   Card,
   CardActions,
   CardContent,
+  IconButton,
+  Modal,
   Typography,
   useTheme,
 } from "@mui/material"
-import IconButton from "@mui/material/IconButton"
-import Modal from "@mui/material/Modal"
 import { red } from "@mui/material/colors"
 import React, { FC, useState } from "react"
 

optuna_dashboard/ts/components/Preferential/PreferentialTrials.tsx

@@ -1,9 +1,11 @@
-import ClearIcon from "@mui/icons-material/Clear"
-import FullscreenIcon from "@mui/icons-material/Fullscreen"
-import OpenInFullIcon from "@mui/icons-material/OpenInFull"
-import ReplayIcon from "@mui/icons-material/Replay"
-import SettingsIcon from "@mui/icons-material/Settings"
-import UndoIcon from "@mui/icons-material/Undo"
+import {
+  Clear as ClearIcon,
+  Fullscreen as FullscreenIcon,
+  OpenInFull as OpenInFullIcon,
+  Replay as ReplayIcon,
+  Settings as SettingsIcon,
+  Undo as UndoIcon,
+} from "@mui/icons-material"
 import {
   Box,
   Button,
@@ -17,13 +19,13 @@ import {
   DialogTitle,
   FormControl,
   FormLabel,
+  IconButton,
   MenuItem,
   Modal,
   Select,
   Typography,
   useTheme,
 } from "@mui/material"
-import IconButton from "@mui/material/IconButton"
 import { red } from "@mui/material/colors"
 import React, { FC, useEffect, useState } from "react"
 
@@ -313,7 +315,7 @@ const PreferentialTrial: FC<{
       </CardActions>
       <CardContent
         aria-label="trial-button"
-        onClick={(e) => {
+        onClick={(e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
           if (e.shiftKey) onFeedback()
         }}
         sx={{

optuna_dashboard/ts/components/Settings.tsx

@@ -1,4 +1,4 @@
-import ClearIcon from "@mui/icons-material/Clear"
+import { Clear as ClearIcon } from "@mui/icons-material"
 import {
   Box,
   IconButton,

optuna_dashboard/ts/components/StudyDetail.tsx

@@ -1,14 +1,16 @@
-import ChevronRightIcon from "@mui/icons-material/ChevronRight"
-import HomeIcon from "@mui/icons-material/Home"
+import {
+  ChevronRight as ChevronRightIcon,
+  Home as HomeIcon,
+} from "@mui/icons-material"
 import {
   Box,
   Card,
   CardContent,
+  Grid,
   IconButton,
   Typography,
   useTheme,
 } from "@mui/material"
-import Grid from "@mui/material/Grid"
 import React, { FC, useEffect, useMemo } from "react"
 import { Link, useParams } from "react-router-dom"
 import { useRecoilValue } from "recoil"

optuna_dashboard/ts/components/StudyHistory.tsx

@@ -3,12 +3,12 @@ import {
   Card,
   CardContent,
   FormControl,
+  FormControlLabel,
+  Grid,
   Switch,
   Typography,
   useTheme,
 } from "@mui/material"
-import FormControlLabel from "@mui/material/FormControlLabel"
-import Grid from "@mui/material/Grid"
 import { DataGrid } from "@optuna/react"
 import * as Optuna from "@optuna/types"
 import React, { FC, useState } from "react"

optuna_dashboard/ts/components/StudyList.tsx

@@ -1,9 +1,14 @@
-import { Delete, HourglassTop, Refresh, Search } from "@mui/icons-material"
-import AddBoxIcon from "@mui/icons-material/AddBox"
-import CompareIcon from "@mui/icons-material/Compare"
-import DriveFileRenameOutlineIcon from "@mui/icons-material/DriveFileRenameOutline"
-import HomeIcon from "@mui/icons-material/Home"
-import SortIcon from "@mui/icons-material/Sort"
+import {
+  AddBox as AddBoxIcon,
+  Compare as CompareIcon,
+  Delete,
+  DriveFileRenameOutline as DriveFileRenameOutlineIcon,
+  Home as HomeIcon,
+  HourglassTop,
+  Refresh,
+  Search,
+  Sort as SortIcon,
+} from "@mui/icons-material"
 import {
   Box,
   Button,

optuna_dashboard/ts/components/TrialFormWidgets.tsx

@@ -296,7 +296,7 @@ export const useSliderWidget = (
       </FormLabel>
       <Box component="div" sx={{ padding: theme.spacing(0, 2) }}>
         <Slider
-          onChange={(e) => {
+          onChange={(e: Event) => {
             // @ts-ignore
             setValue(e.target.value as number)
           }}