From f5f231834f7a3974aee57a60a068d48d157a80cb Mon Sep 17 00:00:00 2001 From: porink0424 Date: Fri, 19 Jul 2024 10:32:24 +0900 Subject: [PATCH] Add type annotation & arrange import statements --- optuna_dashboard/ts/components/App.tsx | 3 +- optuna_dashboard/ts/components/AppDrawer.tsx | 69 ++++++++++--------- .../Artifact/StudyArtifactCards.tsx | 10 +-- .../Artifact/TableArtifactViewer.tsx | 5 +- .../Artifact/ThreejsArtifactViewer.tsx | 5 +- .../Artifact/TrialArtifactCards.tsx | 10 +-- .../ts/components/BestTrialsCard.tsx | 2 +- .../ts/components/CompareStudies.tsx | 28 ++++---- .../ts/components/CreateStudyDialog.tsx | 3 +- .../ts/components/GraphHistory.tsx | 2 +- optuna_dashboard/ts/components/Note.tsx | 16 +++-- .../Preferential/PreferentialAnalytics.tsx | 2 +- .../Preferential/PreferentialHistory.tsx | 14 ++-- .../Preferential/PreferentialTrials.tsx | 18 ++--- optuna_dashboard/ts/components/Settings.tsx | 2 +- .../ts/components/StudyDetail.tsx | 8 ++- .../ts/components/StudyHistory.tsx | 4 +- optuna_dashboard/ts/components/StudyList.tsx | 17 +++-- .../ts/components/TrialFormWidgets.tsx | 2 +- optuna_dashboard/ts/components/TrialList.tsx | 32 +++++---- optuna_dashboard/ts/components/TrialTable.tsx | 3 +- 21 files changed, 141 insertions(+), 114 deletions(-) diff --git a/optuna_dashboard/ts/components/App.tsx b/optuna_dashboard/ts/components/App.tsx index c915f7c79..afe9df0e0 100644 --- a/optuna_dashboard/ts/components/App.tsx +++ b/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" diff --git a/optuna_dashboard/ts/components/AppDrawer.tsx b/optuna_dashboard/ts/components/AppDrawer.tsx index 59fb48d1e..100554484 100644 --- a/optuna_dashboard/ts/components/AppDrawer.tsx +++ b/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 diff --git a/optuna_dashboard/ts/components/Artifact/StudyArtifactCards.tsx b/optuna_dashboard/ts/components/Artifact/StudyArtifactCards.tsx index 9fd12cf4e..05ba4b22f 100644 --- a/optuna_dashboard/ts/components/Artifact/StudyArtifactCards.tsx +++ b/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, diff --git a/optuna_dashboard/ts/components/Artifact/TableArtifactViewer.tsx b/optuna_dashboard/ts/components/Artifact/TableArtifactViewer.tsx index 6fc01f027..860105241 100644 --- a/optuna_dashboard/ts/components/Artifact/TableArtifactViewer.tsx +++ b/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" diff --git a/optuna_dashboard/ts/components/Artifact/ThreejsArtifactViewer.tsx b/optuna_dashboard/ts/components/Artifact/ThreejsArtifactViewer.tsx index bd2281f45..a9a3b6c2c 100644 --- a/optuna_dashboard/ts/components/Artifact/ThreejsArtifactViewer.tsx +++ b/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" diff --git a/optuna_dashboard/ts/components/Artifact/TrialArtifactCards.tsx b/optuna_dashboard/ts/components/Artifact/TrialArtifactCards.tsx index fe7593ce4..3bf574434 100644 --- a/optuna_dashboard/ts/components/Artifact/TrialArtifactCards.tsx +++ b/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, diff --git a/optuna_dashboard/ts/components/BestTrialsCard.tsx b/optuna_dashboard/ts/components/BestTrialsCard.tsx index 650344acd..2ce823dce 100644 --- a/optuna_dashboard/ts/components/BestTrialsCard.tsx +++ b/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, diff --git a/optuna_dashboard/ts/components/CompareStudies.tsx b/optuna_dashboard/ts/components/CompareStudies.tsx index 49f62b97e..c9d2ac641 100644 --- a/optuna_dashboard/ts/components/CompareStudies.tsx +++ b/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 ( { + onClick={( + e: React.MouseEvent + ) => { if (e.shiftKey) { let next: number[] const selectedIds = selected.map((s) => s.study_id) diff --git a/optuna_dashboard/ts/components/CreateStudyDialog.tsx b/optuna_dashboard/ts/components/CreateStudyDialog.tsx index cb0e943f1..52ef8535c 100644 --- a/optuna_dashboard/ts/components/CreateStudyDialog.tsx +++ b/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, diff --git a/optuna_dashboard/ts/components/GraphHistory.tsx b/optuna_dashboard/ts/components/GraphHistory.tsx index 52dd73971..6deb659a7 100644 --- a/optuna_dashboard/ts/components/GraphHistory.tsx +++ b/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) }} diff --git a/optuna_dashboard/ts/components/Note.tsx b/optuna_dashboard/ts/components/Note.tsx index 2f5e6f83e..8be94135f 100644 --- a/optuna_dashboard/ts/components/Note.tsx +++ b/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, diff --git a/optuna_dashboard/ts/components/Preferential/PreferentialAnalytics.tsx b/optuna_dashboard/ts/components/Preferential/PreferentialAnalytics.tsx index 2784e61c1..04f239768 100644 --- a/optuna_dashboard/ts/components/Preferential/PreferentialAnalytics.tsx +++ b/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" diff --git a/optuna_dashboard/ts/components/Preferential/PreferentialHistory.tsx b/optuna_dashboard/ts/components/Preferential/PreferentialHistory.tsx index faa3f6bf0..f26c5cb2d 100644 --- a/optuna_dashboard/ts/components/Preferential/PreferentialHistory.tsx +++ b/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" diff --git a/optuna_dashboard/ts/components/Preferential/PreferentialTrials.tsx b/optuna_dashboard/ts/components/Preferential/PreferentialTrials.tsx index 2177b99de..27c1554f5 100644 --- a/optuna_dashboard/ts/components/Preferential/PreferentialTrials.tsx +++ b/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<{ { + onClick={(e: React.MouseEvent) => { if (e.shiftKey) onFeedback() }} sx={{ diff --git a/optuna_dashboard/ts/components/Settings.tsx b/optuna_dashboard/ts/components/Settings.tsx index 4df44812f..a6cab917f 100644 --- a/optuna_dashboard/ts/components/Settings.tsx +++ b/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, diff --git a/optuna_dashboard/ts/components/StudyDetail.tsx b/optuna_dashboard/ts/components/StudyDetail.tsx index f49f28391..ad8a1b126 100644 --- a/optuna_dashboard/ts/components/StudyDetail.tsx +++ b/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" diff --git a/optuna_dashboard/ts/components/StudyHistory.tsx b/optuna_dashboard/ts/components/StudyHistory.tsx index aceb3e8dd..a6ac9a443 100644 --- a/optuna_dashboard/ts/components/StudyHistory.tsx +++ b/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" diff --git a/optuna_dashboard/ts/components/StudyList.tsx b/optuna_dashboard/ts/components/StudyList.tsx index 30374d0da..673f0e397 100644 --- a/optuna_dashboard/ts/components/StudyList.tsx +++ b/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, diff --git a/optuna_dashboard/ts/components/TrialFormWidgets.tsx b/optuna_dashboard/ts/components/TrialFormWidgets.tsx index 53eba692e..5afd65e18 100644 --- a/optuna_dashboard/ts/components/TrialFormWidgets.tsx +++ b/optuna_dashboard/ts/components/TrialFormWidgets.tsx @@ -296,7 +296,7 @@ export const useSliderWidget = ( { + onChange={(e: Event) => { // @ts-ignore setValue(e.target.value as number) }} diff --git a/optuna_dashboard/ts/components/TrialList.tsx b/optuna_dashboard/ts/components/TrialList.tsx index 3762dabf5..ae35d0274 100644 --- a/optuna_dashboard/ts/components/TrialList.tsx +++ b/optuna_dashboard/ts/components/TrialList.tsx @@ -1,27 +1,29 @@ -import CheckBoxIcon from "@mui/icons-material/CheckBox" -import CheckBoxOutlineBlankIcon from "@mui/icons-material/CheckBoxOutlineBlank" -import FilterListIcon from "@mui/icons-material/FilterList" -import StopCircleIcon from "@mui/icons-material/StopCircle" +import { + CheckBox as CheckBoxIcon, + CheckBoxOutlineBlank as CheckBoxOutlineBlankIcon, + FilterList as FilterListIcon, + StopCircle as StopCircleIcon, +} from "@mui/icons-material" import { Box, Button, + Chip, + Divider, IconButton, + List, + ListItem, + ListItemButton, + ListItemIcon, + ListItemText, + ListSubheader, Menu, MenuItem, Typography, useTheme, } from "@mui/material" -import Chip from "@mui/material/Chip" -import Divider from "@mui/material/Divider" -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 React, { FC, ReactNode, useMemo } from "react" -import ListItemIcon from "@mui/material/ListItemIcon" import { useVirtualizer } from "@tanstack/react-virtual" import { useNavigate } from "react-router-dom" import { useRecoilValue } from "recoil" @@ -388,7 +390,7 @@ export const TrialList: FC<{ studyDetail: StudyDetail | null }> = ({ aria-controls={openFilterMenu ? "filter-trials" : undefined} aria-haspopup="true" aria-expanded={openFilterMenu ? "true" : undefined} - onClick={(e) => { + onClick={(e: React.MouseEvent) => { setFilterMenuAnchorEl(e.currentTarget) }} > @@ -460,7 +462,9 @@ export const TrialList: FC<{ studyDetail: StudyDetail | null }> = ({ disablePadding > { + onClick={( + e: React.MouseEvent + ) => { if (e.shiftKey) { let next: number[] const selectedNumbers = selected.map((t) => t.number) diff --git a/optuna_dashboard/ts/components/TrialTable.tsx b/optuna_dashboard/ts/components/TrialTable.tsx index 30387fdf1..55dcdd77a 100644 --- a/optuna_dashboard/ts/components/TrialTable.tsx +++ b/optuna_dashboard/ts/components/TrialTable.tsx @@ -1,5 +1,4 @@ -import DownloadIcon from "@mui/icons-material/Download" -import LinkIcon from "@mui/icons-material/Link" +import { Download as DownloadIcon, Link as LinkIcon } from "@mui/icons-material" import { Button, IconButton, useTheme } from "@mui/material" import React, { FC } from "react"