Merge pull request #866 from porink0424/fix/biome-config

Make biome-linter ignore ts files in `optuna_dashboard`

.github/workflows/typescript-tests.yml

@@ -4,6 +4,7 @@ on:
     paths:
       - '.github/workflows/typescript-tests.yml'
       - '.eslintrc.js'
+      - 'biome.json'
       - '**.ts'
       - '**.tsx'
       - 'optuna_dashboard/package.json'

biome.json

@@ -19,6 +19,9 @@
 			"tslib/react/types/*"
 		]
 	},
+	"linter": {
+		"ignore": ["optuna_dashboard/ts/**/*.ts", "optuna_dashboard/ts/**/*.tsx"]
+	},
 	"javascript": {
 		"formatter": {
 			"trailingComma": "es5",

optuna_dashboard/ts/action.ts

@@ -1,39 +1,39 @@
 import * as Optuna from "@optuna/types"
-import { useRecoilState, useSetRecoilState } from "recoil"
 import { useSnackbar } from "notistack"
+import { useRecoilState, useSetRecoilState } from "recoil"
 import {
-  getStudyDetailAPI,
-  getStudySummariesAPI,
   createNewStudyAPI,
   deleteStudyAPI,
+  deleteStudyArtifactAPI,
+  deleteTrialArtifactAPI,
+  getMetaInfoAPI,
+  getStudyDetailAPI,
+  getStudySummariesAPI,
+  removePreferentialHistoryAPI,
+  renameStudyAPI,
+  reportFeedbackComponentAPI,
+  reportPreferenceAPI,
+  restorePreferentialHistoryAPI,
   saveStudyNoteAPI,
   saveTrialNoteAPI,
-  tellTrialAPI,
   saveTrialUserAttrsAPI,
-  renameStudyAPI,
-  uploadTrialArtifactAPI,
-  uploadStudyArtifactAPI,
-  getMetaInfoAPI,
-  deleteTrialArtifactAPI,
-  deleteStudyArtifactAPI,
-  reportPreferenceAPI,
   skipPreferentialTrialAPI,
-  removePreferentialHistoryAPI,
-  restorePreferentialHistoryAPI,
-  reportFeedbackComponentAPI,
+  tellTrialAPI,
+  uploadStudyArtifactAPI,
+  uploadTrialArtifactAPI,
 } from "./apiClient"
-import {
-  studyDetailsState,
-  studySummariesState,
-  isFileUploading,
-  artifactIsAvailable,
-  plotlypyIsAvailableState,
-  studyDetailLoadingState,
-  reloadIntervalState,
-  trialsUpdatingState,
-  studySummariesLoadingState,
-} from "./state"
 import { getDominatedTrials } from "./dominatedTrials"
+import {
+  artifactIsAvailable,
+  isFileUploading,
+  plotlypyIsAvailableState,
+  reloadIntervalState,
+  studyDetailLoadingState,
+  studyDetailsState,
+  studySummariesLoadingState,
+  studySummariesState,
+  trialsUpdatingState,
+} from "./state"
 import {
   Artifact,
   FeedbackComponentType,

optuna_dashboard/ts/apiClient.ts

@@ -1,6 +1,6 @@
-import * as plotly from "plotly.js-dist-min"
-import axios from "axios"
 import * as Optuna from "@optuna/types"
+import axios from "axios"
+import * as plotly from "plotly.js-dist-min"
 import {
   Artifact,
   FeedbackComponentType,

optuna_dashboard/ts/components/App.tsx

@@ -1,21 +1,21 @@
-import React, { FC, useMemo, useState, useEffect } from "react"
-import { RecoilRoot } from "recoil"
-import { BrowserRouter as Router, Routes, Route } from "react-router-dom"
-import { SnackbarProvider } from "notistack"
-import blue from "@mui/material/colors/blue"
-import pink from "@mui/material/colors/pink"
 import {
-  createTheme,
-  useMediaQuery,
-  ThemeProvider,
   Box,
   CssBaseline,
+  ThemeProvider,
+  createTheme,
+  useMediaQuery,
 } from "@mui/material"
+import blue from "@mui/material/colors/blue"
+import pink from "@mui/material/colors/pink"
+import { SnackbarProvider } from "notistack"
+import React, { FC, useMemo, useState, useEffect } from "react"
+import { BrowserRouter as Router, Route, Routes } from "react-router-dom"
+import { RecoilRoot } from "recoil"
 
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
 import { CompareStudies } from "./CompareStudies"
 import { StudyDetail } from "./StudyDetail"
 import { StudyList } from "./StudyList"
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
 
 const queryClient = new QueryClient({
   defaultOptions: {

optuna_dashboard/ts/components/AppDrawer.tsx

@@ -1,44 +1,44 @@
-import React, { FC } from "react"
-import { useRecoilState, useRecoilValue } from "recoil"
-import { styled, useTheme, Theme, CSSObject } from "@mui/material/styles"
-import Modal from "@mui/material/Modal"
-import { Settings } from "./Settings"
-import Box from "@mui/material/Box"
-import MuiDrawer from "@mui/material/Drawer"
-import MuiAppBar, { AppBarProps as MuiAppBarProps } from "@mui/material/AppBar"
-import Toolbar from "@mui/material/Toolbar"
-import List from "@mui/material/List"
-import Divider from "@mui/material/Divider"
-import IconButton from "@mui/material/IconButton"
+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 { CSSObject, Theme, styled, useTheme } from "@mui/material/styles"
+import React, { FC } from "react"
+import { Link } from "react-router-dom"
+import { useRecoilState, useRecoilValue } from "recoil"
 import {
   drawerOpenState,
   reloadIntervalState,
   useStudyIsPreferential,
 } from "../state"
-import { Link } from "react-router-dom"
-import AutoGraphIcon from "@mui/icons-material/AutoGraph"
-import ViewListIcon from "@mui/icons-material/ViewList"
-import SyncIcon from "@mui/icons-material/Sync"
-import SyncDisabledIcon from "@mui/icons-material/SyncDisabled"
-import Brightness4Icon from "@mui/icons-material/Brightness4"
-import Brightness7Icon from "@mui/icons-material/Brightness7"
-import TableViewIcon from "@mui/icons-material/TableView"
-import RateReviewIcon from "@mui/icons-material/RateReview"
-import SettingsIcon from "@mui/icons-material/Settings"
+import { Settings } from "./Settings"
 
-import MenuIcon from "@mui/icons-material/Menu"
 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 HistoryIcon from "@mui/icons-material/History"
-import LanIcon from "@mui/icons-material/Lan"
 import { Switch } from "@mui/material"
 import { actionCreator } from "../action"
 

optuna_dashboard/ts/components/Artifact/ArtifactCardMedia.tsx

@@ -1,12 +1,12 @@
+import InsertDriveFileIcon from "@mui/icons-material/InsertDriveFile"
+import { Box, CardMedia } from "@mui/material"
 import React, { FC } from "react"
+import { Artifact } from "ts/types/optuna"
 import {
   ThreejsArtifactViewer,
   isThreejsArtifact,
 } from "./ThreejsArtifactViewer"
 import { WaveSurferArtifactViewer } from "./WaveSurferArtifactViewer"
-import InsertDriveFileIcon from "@mui/icons-material/InsertDriveFile"
-import { CardMedia, Box } from "@mui/material"
-import { Artifact } from "ts/types/optuna"
 
 export const ArtifactCardMedia: FC<{
   artifact: Artifact

optuna_dashboard/ts/components/Artifact/DeleteArtifactDialog.tsx

@@ -1,14 +1,14 @@
-import React, { ReactNode, useState, FC } from "react"
 import {
+  Button,
   Dialog,
-  DialogTitle,
+  DialogActions,
   DialogContent,
   DialogContentText,
-  Button,
-  DialogActions,
+  DialogTitle,
 } from "@mui/material"
-import { actionCreator } from "../../action"
+import React, { ReactNode, useState, FC } from "react"
 import { Artifact } from "ts/types/optuna"
+import { actionCreator } from "../../action"
 
 export const useDeleteTrialArtifactDialog = (): [
   (studyId: number, trialId: number, artifact: Artifact) => void,

optuna_dashboard/ts/components/Artifact/StudyArtifactCards.tsx

@@ -1,3 +1,16 @@
+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 {
+  Box,
+  Card,
+  CardActionArea,
+  CardContent,
+  IconButton,
+  Typography,
+  useTheme,
+} from "@mui/material"
 import React, {
   ChangeEventHandler,
   DragEventHandler,
@@ -6,28 +19,15 @@ import React, {
   useRef,
   useState,
 } from "react"
-import {
-  Typography,
-  Box,
-  useTheme,
-  IconButton,
-  Card,
-  CardContent,
-  CardActionArea,
-} from "@mui/material"
-import UploadFileIcon from "@mui/icons-material/UploadFile"
-import DownloadIcon from "@mui/icons-material/Download"
-import DeleteIcon from "@mui/icons-material/Delete"
-import FullscreenIcon from "@mui/icons-material/Fullscreen"
 
+import { StudyDetail } from "ts/types/optuna"
 import { actionCreator } from "../../action"
+import { ArtifactCardMedia } from "./ArtifactCardMedia"
 import { useDeleteStudyArtifactDialog } from "./DeleteArtifactDialog"
 import {
-  useThreejsArtifactModal,
   isThreejsArtifact,
+  useThreejsArtifactModal,
 } from "./ThreejsArtifactViewer"
-import { ArtifactCardMedia } from "./ArtifactCardMedia"
-import { StudyDetail } from "ts/types/optuna"
 
 export const StudyArtifactCards: FC<{ study: StudyDetail }> = ({ study }) => {
   const theme = useTheme()

optuna_dashboard/ts/components/Artifact/ThreejsArtifactViewer.tsx

@@ -1,14 +1,14 @@
-import * as THREE from "three"
-import React, { useEffect, useState, ReactNode } from "react"
-import { Canvas } from "@react-three/fiber"
+import ClearIcon from "@mui/icons-material/Clear"
+import { Box, Modal, useTheme } from "@mui/material"
+import IconButton from "@mui/material/IconButton"
 import { GizmoHelper, GizmoViewport, OrbitControls } from "@react-three/drei"
-import { STLLoader } from "three/examples/jsm/loaders/STLLoader"
+import { Canvas } from "@react-three/fiber"
+import React, { useEffect, useState, ReactNode } from "react"
+import * as THREE from "three"
+import { PerspectiveCamera } from "three"
 import { Rhino3dmLoader } from "three/examples/jsm/loaders/3DMLoader"
 import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader"
-import { PerspectiveCamera } from "three"
-import { Modal, Box, useTheme } from "@mui/material"
-import ClearIcon from "@mui/icons-material/Clear"
-import IconButton from "@mui/material/IconButton"
+import { STLLoader } from "three/examples/jsm/loaders/STLLoader"
 import { Artifact } from "ts/types/optuna"
 
 export const isThreejsArtifact = (artifact: Artifact): boolean => {

optuna_dashboard/ts/components/Artifact/TrialArtifactCards.tsx

@@ -1,3 +1,16 @@
+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 {
+  Box,
+  Card,
+  CardActionArea,
+  CardContent,
+  IconButton,
+  Typography,
+  useTheme,
+} from "@mui/material"
 import React, {
   ChangeEventHandler,
   DragEventHandler,
@@ -6,28 +19,15 @@ import React, {
   useRef,
   useState,
 } from "react"
-import {
-  Typography,
-  Box,
-  useTheme,
-  IconButton,
-  Card,
-  CardContent,
-  CardActionArea,
-} from "@mui/material"
-import UploadFileIcon from "@mui/icons-material/UploadFile"
-import DownloadIcon from "@mui/icons-material/Download"
-import DeleteIcon from "@mui/icons-material/Delete"
-import FullscreenIcon from "@mui/icons-material/Fullscreen"
 
+import { Trial } from "ts/types/optuna"
 import { actionCreator } from "../../action"
+import { ArtifactCardMedia } from "./ArtifactCardMedia"
 import { useDeleteTrialArtifactDialog } from "./DeleteArtifactDialog"
 import {
-  useThreejsArtifactModal,
   isThreejsArtifact,
+  useThreejsArtifactModal,
 } from "./ThreejsArtifactViewer"
-import { ArtifactCardMedia } from "./ArtifactCardMedia"
-import { Trial } from "ts/types/optuna"
 
 export const TrialArtifactCards: FC<{ trial: Trial }> = ({ trial }) => {
   const theme = useTheme()

optuna_dashboard/ts/components/Artifact/WaveSurferArtifactViewer.tsx

@@ -1,6 +1,6 @@
+import { Box } from "@mui/material"
 import React, { useCallback, useEffect, useState, useRef } from "react"
 import WaveSurfer from "wavesurfer.js"
-import { Box } from "@mui/material"
 
 interface WaveSurferArtifactViewerProps {
   height: number

optuna_dashboard/ts/components/BestTrialsCard.tsx

@@ -1,4 +1,4 @@
-import React, { FC, ReactNode, useMemo } from "react"
+import LinkIcon from "@mui/icons-material/Link"
 import {
   Box,
   Button,
@@ -12,8 +12,8 @@ import {
   Typography,
   useTheme,
 } from "@mui/material"
+import React, { FC, ReactNode, useMemo } from "react"
 import { Link } from "react-router-dom"
-import LinkIcon from "@mui/icons-material/Link"
 import { StudyDetail, Trial } from "ts/types/optuna"
 
 const useBestTrials = (studyDetail: StudyDetail | null): Trial[] => {

optuna_dashboard/ts/components/CompareStudies.tsx

@@ -1,38 +1,38 @@
-import React, { FC, useEffect, useMemo, useState } from "react"
-import * as Optuna from "@optuna/types"
-import { useRecoilValue } from "recoil"
-import { useSnackbar } from "notistack"
-import { Link } from "react-router-dom"
+import ChevronRightIcon from "@mui/icons-material/ChevronRight"
+import HomeIcon from "@mui/icons-material/Home"
 import {
+  Box,
   Card,
   CardContent,
   FormControl,
+  IconButton,
   Switch,
   Typography,
-  Box,
   useTheme,
-  IconButton,
 } from "@mui/material"
-import Grid2 from "@mui/material/Unstable_Grid2"
-import ChevronRightIcon from "@mui/icons-material/ChevronRight"
 import Chip from "@mui/material/Chip"
-import FormControlLabel from "@mui/material/FormControlLabel"
 import Divider from "@mui/material/Divider"
+import FormControlLabel from "@mui/material/FormControlLabel"
 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 HomeIcon from "@mui/icons-material/Home"
+import Grid2 from "@mui/material/Unstable_Grid2"
+import * as Optuna from "@optuna/types"
+import { useSnackbar } from "notistack"
+import React, { FC, useEffect, useMemo, useState } from "react"
+import { Link } from "react-router-dom"
+import { useRecoilValue } from "recoil"
 
+import { useNavigate } from "react-router-dom"
+import { StudyDetails, StudySummary } from "ts/types/optuna"
 import { actionCreator } from "../action"
-import { studySummariesState, studyDetailsState } from "../state"
+import { studyDetailsState, studySummariesState } from "../state"
+import { useQuery } from "../urlQuery"
 import { AppDrawer } from "./AppDrawer"
 import { GraphEdf } from "./GraphEdf"
 import { GraphHistory } from "./GraphHistory"
-import { useNavigate } from "react-router-dom"
-import { useQuery } from "../urlQuery"
-import { StudyDetails, StudySummary } from "ts/types/optuna"
 
 const useQueriedStudies = (
   studies: StudySummary[],

optuna_dashboard/ts/components/CreateStudyDialog.tsx

@@ -1,25 +1,25 @@
-import React, { ReactNode, useState } from "react"
+import AddIcon from "@mui/icons-material/Add"
+import RemoveIcon from "@mui/icons-material/Remove"
 import {
+  Button,
   Dialog,
-  useTheme,
-  FormLabel,
-  DialogTitle,
+  DialogActions,
   DialogContent,
   DialogContentText,
+  DialogTitle,
   FormControl,
-  Button,
-  DialogActions,
+  FormLabel,
   MenuItem,
   Select,
+  useTheme,
 } from "@mui/material"
-import { actionCreator } from "../action"
-import { DebouncedInputTextField } from "./Debounce"
-import { useRecoilValue } from "recoil"
-import { studySummariesState } from "../state"
-import RemoveIcon from "@mui/icons-material/Remove"
-import AddIcon from "@mui/icons-material/Add"
 import * as Optuna from "@optuna/types"
+import React, { ReactNode, useState } from "react"
+import { useRecoilValue } from "recoil"
 import { StudySummary } from "ts/types/optuna"
+import { actionCreator } from "../action"
+import { studySummariesState } from "../state"
+import { DebouncedInputTextField } from "./Debounce"
 
 export const useCreateStudyDialog = (): [() => void, () => ReactNode] => {
   const theme = useTheme()

optuna_dashboard/ts/components/DataGrid.tsx

@@ -1,5 +1,14 @@
-import React from "react"
+import CheckBoxIcon from "@mui/icons-material/CheckBox"
+import CheckBoxOutlineBlankIcon from "@mui/icons-material/CheckBoxOutlineBlank"
+import FilterListIcon from "@mui/icons-material/FilterList"
+import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown"
+import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp"
 import {
+  Box,
+  Collapse,
+  IconButton,
+  Menu,
+  MenuItem,
   Table,
   TableBody,
   TableCell,
@@ -9,19 +18,10 @@ import {
   TableRow,
   TableSortLabel,
   TextField,
-  Collapse,
-  IconButton,
-  Menu,
-  MenuItem,
-  Box,
 } from "@mui/material"
-import { styled } from "@mui/system"
-import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown"
-import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp"
-import CheckBoxOutlineBlankIcon from "@mui/icons-material/CheckBoxOutlineBlank"
-import CheckBoxIcon from "@mui/icons-material/CheckBox"
-import FilterListIcon from "@mui/icons-material/FilterList"
 import ListItemIcon from "@mui/material/ListItemIcon"
+import { styled } from "@mui/system"
+import React from "react"
 
 type Order = "asc" | "desc"
 

optuna_dashboard/ts/components/Debounce.tsx

@@ -1,5 +1,5 @@
-import React, { FC, useEffect } from "react"
 import { TextField, TextFieldProps } from "@mui/material"
+import React, { FC, useEffect } from "react"
 
 // TODO(c-bata): Remove this and use `useDeferredValue` instead.
 export const DebouncedInputTextField: FC<{

optuna_dashboard/ts/components/DeleteStudyDialog.tsx

@@ -1,12 +1,12 @@
-import React, { ReactNode, useState } from "react"
 import {
+  Button,
   Dialog,
-  DialogTitle,
+  DialogActions,
   DialogContent,
   DialogContentText,
-  Button,
-  DialogActions,
+  DialogTitle,
 } from "@mui/material"
+import React, { ReactNode, useState } from "react"
 import { actionCreator } from "../action"
 
 export const useDeleteStudyDialog = (): [

optuna_dashboard/ts/components/GraphContour.tsx

@@ -1,26 +1,26 @@
-import * as plotly from "plotly.js-dist-min"
-import React, { FC, useEffect, useMemo, useState } from "react"
 import {
-  Grid,
+  Box,
   FormControl,
   FormLabel,
+  Grid,
+  Link,
   MenuItem,
   Select,
-  Typography,
   SelectChangeEvent,
-  useTheme,
-  Box,
   Stack,
-  Link,
+  Typography,
+  useTheme,
 } from "@mui/material"
 import blue from "@mui/material/colors/blue"
+import * as plotly from "plotly.js-dist-min"
+import React, { FC, useEffect, useMemo, useState } from "react"
+import { SearchSpaceItem, StudyDetail, Trial } from "ts/types/optuna"
+import { PlotType } from "../apiClient"
+import { getAxisInfo } from "../graphUtil"
+import { usePlot } from "../hooks/usePlot"
 import { useMergedUnionSearchSpace } from "../searchSpace"
 import { usePlotlyColorTheme } from "../state"
-import { getAxisInfo } from "../graphUtil"
-import { PlotType } from "../apiClient"
 import { useBackendRender } from "../state"
-import { usePlot } from "../hooks/usePlot"
-import { SearchSpaceItem, StudyDetail, Trial } from "ts/types/optuna"
 
 const plotDomId = "graph-contour"
 const CONTOUR_DISABLED_THRESHOLD = 100

optuna_dashboard/ts/components/GraphEdf.tsx

@@ -1,10 +1,10 @@
+import { Box, Typography, useTheme } from "@mui/material"
 import * as plotly from "plotly.js-dist-min"
 import React, { FC, useEffect, useMemo } from "react"
-import { Typography, useTheme, Box } from "@mui/material"
-import { Target, useFilteredTrialsFromStudies } from "../trialFilter"
-import { getCompareStudiesPlotAPI, CompareStudiesPlotType } from "../apiClient"
-import { usePlotlyColorTheme, useBackendRender } from "../state"
 import { StudyDetail, Trial } from "ts/types/optuna"
+import { CompareStudiesPlotType, getCompareStudiesPlotAPI } from "../apiClient"
+import { useBackendRender, usePlotlyColorTheme } from "../state"
+import { Target, useFilteredTrialsFromStudies } from "../trialFilter"
 
 const getPlotDomId = (objectiveId: number) => `graph-edf-${objectiveId}`
 

optuna_dashboard/ts/components/GraphHistory.tsx

@@ -1,29 +1,29 @@
-import * as plotly from "plotly.js-dist-min"
-import React, { ChangeEvent, FC, useEffect, useState } from "react"
 import {
   Box,
-  Grid,
   FormControl,
-  FormLabel,
   FormControlLabel,
+  FormLabel,
+  Grid,
   MenuItem,
-  Select,
   Radio,
   RadioGroup,
-  Typography,
+  Select,
   SelectChangeEvent,
-  useTheme,
   Slider,
+  Typography,
+  useTheme,
 } from "@mui/material"
+import * as Optuna from "@optuna/types"
+import * as plotly from "plotly.js-dist-min"
+import React, { ChangeEvent, FC, useEffect, useState } from "react"
+import { useNavigate } from "react-router-dom"
+import { StudyDetail, Trial } from "ts/types/optuna"
+import { usePlotlyColorTheme } from "../state"
 import {
-  useFilteredTrialsFromStudies,
   Target,
+  useFilteredTrialsFromStudies,
   useObjectiveAndUserAttrTargetsFromStudies,
 } from "../trialFilter"
-import { usePlotlyColorTheme } from "../state"
-import { useNavigate } from "react-router-dom"
-import * as Optuna from "@optuna/types"
-import { StudyDetail, Trial } from "ts/types/optuna"
 
 const plotDomId = "graph-history"
 

optuna_dashboard/ts/components/GraphHyperparameterImportances.tsx

@@ -1,16 +1,16 @@
+import { Box, Card, CardContent, Typography, useTheme } from "@mui/material"
 import * as plotly from "plotly.js-dist-min"
 import React, { FC, useEffect } from "react"
-import { Typography, useTheme, Box, Card, CardContent } from "@mui/material"
 
-import { useParamImportance } from "../hooks/useParamImportance"
-import {
-  useStudyDirections,
-  usePlotlyColorTheme,
-  useBackendRender,
-} from "../state"
-import { PlotType } from "../apiClient"
-import { usePlot } from "../hooks/usePlot"
 import { ParamImportance, StudyDetail } from "ts/types/optuna"
+import { PlotType } from "../apiClient"
+import { useParamImportance } from "../hooks/useParamImportance"
+import { usePlot } from "../hooks/usePlot"
+import {
+  useBackendRender,
+  usePlotlyColorTheme,
+  useStudyDirections,
+} from "../state"
 
 const plotDomId = "graph-hyperparameter-importances"
 

optuna_dashboard/ts/components/GraphIntermediateValues.tsx

@@ -1,8 +1,8 @@
+import { Box, Card, CardContent, Typography, useTheme } from "@mui/material"
 import * as plotly from "plotly.js-dist-min"
 import React, { FC, useEffect } from "react"
-import { Box, Typography, useTheme, CardContent, Card } from "@mui/material"
-import { usePlotlyColorTheme } from "../state"
 import { Trial } from "ts/types/optuna"
+import { usePlotlyColorTheme } from "../state"
 
 const plotDomId = "graph-intermediate-values"
 

optuna_dashboard/ts/components/GraphParallelCoordinate.tsx

@@ -1,26 +1,26 @@
-import * as plotly from "plotly.js-dist-min"
-import React, { FC, ReactNode, useEffect, useState } from "react"
 import {
+  Box,
+  Checkbox,
+  FormControlLabel,
+  FormGroup,
+  Grid,
   Typography,
   useTheme,
-  Box,
-  Grid,
-  FormGroup,
-  FormControlLabel,
-  Checkbox,
 } from "@mui/material"
+import * as plotly from "plotly.js-dist-min"
+import React, { FC, ReactNode, useEffect, useState } from "react"
+import { SearchSpaceItem, StudyDetail, Trial } from "ts/types/optuna"
+import { PlotType } from "../apiClient"
+import { usePlot } from "../hooks/usePlot"
+import { useMergedUnionSearchSpace } from "../searchSpace"
 import { usePlotlyColorTheme } from "../state"
+import { useBackendRender } from "../state"
 import {
   Target,
   useFilteredTrials,
   useObjectiveAndUserAttrTargets,
   useParamTargets,
 } from "../trialFilter"
-import { useMergedUnionSearchSpace } from "../searchSpace"
-import { PlotType } from "../apiClient"
-import { useBackendRender } from "../state"
-import { usePlot } from "../hooks/usePlot"
-import { SearchSpaceItem, StudyDetail, Trial } from "ts/types/optuna"
 
 const plotDomId = "graph-parallel-coordinate"
 

optuna_dashboard/ts/components/GraphParetoFront.tsx

@@ -1,24 +1,24 @@
-import * as plotly from "plotly.js-dist-min"
-import React, { FC, useEffect, useState } from "react"
 import {
-  Grid,
+  Box,
   FormControl,
   FormLabel,
+  Grid,
   MenuItem,
   Select,
-  Typography,
   SelectChangeEvent,
+  Typography,
   useTheme,
-  Box,
 } from "@mui/material"
-import { makeHovertext } from "../graphUtil"
-import { usePlotlyColorTheme } from "../state"
-import { useNavigate } from "react-router-dom"
-import { PlotType } from "../apiClient"
-import { useBackendRender } from "../state"
-import { usePlot } from "../hooks/usePlot"
 import * as Optuna from "@optuna/types"
+import * as plotly from "plotly.js-dist-min"
+import React, { FC, useEffect, useState } from "react"
+import { useNavigate } from "react-router-dom"
 import { StudyDetail, Trial } from "ts/types/optuna"
+import { PlotType } from "../apiClient"
+import { makeHovertext } from "../graphUtil"
+import { usePlot } from "../hooks/usePlot"
+import { usePlotlyColorTheme } from "../state"
+import { useBackendRender } from "../state"
 
 const plotDomId = "graph-pareto-front"
 

optuna_dashboard/ts/components/GraphRank.tsx

@@ -1,22 +1,22 @@
-import * as plotly from "plotly.js-dist-min"
-import React, { FC, useEffect, useState } from "react"
 import {
-  Grid,
+  Box,
   FormControl,
   FormLabel,
+  Grid,
   MenuItem,
   Select,
-  Typography,
   SelectChangeEvent,
+  Typography,
   useTheme,
-  Box,
 } from "@mui/material"
-import { getAxisInfo, makeHovertext } from "../graphUtil"
-import { useMergedUnionSearchSpace } from "../searchSpace"
-import { PlotType } from "../apiClient"
-import { usePlotlyColorTheme, useBackendRender } from "../state"
-import { usePlot } from "../hooks/usePlot"
+import * as plotly from "plotly.js-dist-min"
+import React, { FC, useEffect, useState } from "react"
 import { SearchSpaceItem, StudyDetail, Trial } from "ts/types/optuna"
+import { PlotType } from "../apiClient"
+import { getAxisInfo, makeHovertext } from "../graphUtil"
+import { usePlot } from "../hooks/usePlot"
+import { useMergedUnionSearchSpace } from "../searchSpace"
+import { useBackendRender, usePlotlyColorTheme } from "../state"
 
 const plotDomId = "graph-rank"
 

optuna_dashboard/ts/components/GraphSlice.tsx

@@ -1,28 +1,28 @@
-import * as plotly from "plotly.js-dist-min"
-import React, { FC, useEffect, useState } from "react"
 import {
-  Grid,
+  Box,
   FormControl,
   FormLabel,
+  Grid,
   MenuItem,
-  Switch,
   Select,
-  Typography,
   SelectChangeEvent,
+  Switch,
+  Typography,
   useTheme,
-  Box,
 } from "@mui/material"
+import * as plotly from "plotly.js-dist-min"
+import React, { FC, useEffect, useState } from "react"
+import { SearchSpaceItem, StudyDetail, Trial } from "ts/types/optuna"
+import { PlotType } from "../apiClient"
+import { usePlot } from "../hooks/usePlot"
+import { useMergedUnionSearchSpace } from "../searchSpace"
+import { useBackendRender, usePlotlyColorTheme } from "../state"
 import {
   Target,
   useFilteredTrials,
   useObjectiveAndUserAttrTargets,
   useParamTargets,
 } from "../trialFilter"
-import { useMergedUnionSearchSpace } from "../searchSpace"
-import { PlotType } from "../apiClient"
-import { usePlotlyColorTheme, useBackendRender } from "../state"
-import { usePlot } from "../hooks/usePlot"
-import { SearchSpaceItem, StudyDetail, Trial } from "ts/types/optuna"
 
 const plotDomId = "graph-slice"
 

optuna_dashboard/ts/components/GraphTimeline.tsx

@@ -1,13 +1,13 @@
+import { Card, CardContent, Grid, Typography, useTheme } from "@mui/material"
+import * as Optuna from "@optuna/types"
 import * as plotly from "plotly.js-dist-min"
 import React, { FC, useEffect } from "react"
-import { Card, CardContent, Grid, Typography, useTheme } from "@mui/material"
-import { makeHovertext } from "../graphUtil"
-import { usePlotlyColorTheme } from "../state"
-import { PlotType } from "../apiClient"
-import { useBackendRender } from "../state"
-import { usePlot } from "../hooks/usePlot"
-import * as Optuna from "@optuna/types"
 import { StudyDetail, Trial } from "ts/types/optuna"
+import { PlotType } from "../apiClient"
+import { makeHovertext } from "../graphUtil"
+import { usePlot } from "../hooks/usePlot"
+import { usePlotlyColorTheme } from "../state"
+import { useBackendRender } from "../state"
 
 const plotDomId = "graph-timeline"
 const maxBars = 100

optuna_dashboard/ts/components/Note.tsx

@@ -1,3 +1,10 @@
+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 {
   Box,
   Button,
@@ -18,6 +25,7 @@ import {
   Typography,
   useTheme,
 } from "@mui/material"
+import { Theme } from "@mui/material/styles"
 import React, {
   FC,
   createRef,
@@ -29,31 +37,23 @@ import React, {
   ChangeEventHandler,
 } from "react"
 import ReactMarkdown from "react-markdown"
-import remarkGfm from "remark-gfm"
-import remarkMath from "remark-math"
-// @ts-ignore
-import rehypeMathjax from "rehype-mathjax"
-import rehypeRaw from "rehype-raw"
-import LoadingButton from "@mui/lab/LoadingButton"
-import SaveIcon from "@mui/icons-material/Save"
-import CloseIcon from "@mui/icons-material/Close"
-import EditIcon from "@mui/icons-material/Edit"
-import { Theme } from "@mui/material/styles"
 import {
   CodeComponent,
   ReactMarkdownNames,
   // @ts-ignore
 } from "react-markdown/lib/ast-to-react"
-import HtmlIcon from "@mui/icons-material/Html"
-import ModeEditIcon from "@mui/icons-material/ModeEdit"
-import UploadFileIcon from "@mui/icons-material/UploadFile"
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter"
 import { darcula } from "react-syntax-highlighter/dist/esm/styles/prism"
+// @ts-ignore
+import rehypeMathjax from "rehype-mathjax"
+import rehypeRaw from "rehype-raw"
+import remarkGfm from "remark-gfm"
+import remarkMath from "remark-math"
 
-import { actionCreator } from "../action"
 import { useRecoilValue } from "recoil"
-import { artifactIsAvailable, isFileUploading, useArtifacts } from "../state"
 import { Note } from "ts/types/optuna"
+import { actionCreator } from "../action"
+import { artifactIsAvailable, isFileUploading, useArtifacts } from "../state"
 
 const placeholder = `## What is this feature for?
 

optuna_dashboard/ts/components/Preferential/PreferentialAnalytics.tsx

@@ -1,4 +1,3 @@
-import React, { FC } from "react"
 import {
   Box,
   Card,
@@ -8,11 +7,12 @@ import {
   useTheme,
 } from "@mui/material"
 import Grid2 from "@mui/material/Unstable_Grid2"
-import { DataGrid, DataGridColumn } from "../DataGrid"
-import { BestTrialsCard } from "../BestTrialsCard"
-import { useStudyDetailValue, useStudySummaryValue } from "../../state"
-import { Contour } from "../GraphContour"
 import * as Optuna from "@optuna/types"
+import React, { FC } from "react"
+import { useStudyDetailValue, useStudySummaryValue } from "../../state"
+import { BestTrialsCard } from "../BestTrialsCard"
+import { DataGrid, DataGridColumn } from "../DataGrid"
+import { Contour } from "../GraphContour"
 
 export const PreferentialAnalytics: FC<{ studyId: number }> = ({ studyId }) => {
   const theme = useTheme()

optuna_dashboard/ts/components/Preferential/PreferentialGraph.tsx

@@ -1,12 +1,14 @@
-import React, { FC, useState, useCallback, useEffect } from "react"
 import {
+  Box,
   Card,
   CardContent,
-  useTheme,
-  Typography,
-  Box,
   Chip,
+  Typography,
+  useTheme,
 } from "@mui/material"
+import { ElkNode } from "elkjs/lib/elk-api.js"
+import ELK from "elkjs/lib/elk.bundled.js"
+import React, { FC, useState, useCallback, useEffect } from "react"
 import ReactFlow, {
   Node,
   NodeProps,
@@ -20,13 +22,11 @@ import ReactFlow, {
   Handle,
 } from "reactflow"
 import "reactflow/dist/style.css"
-import ELK from "elkjs/lib/elk.bundled.js"
-import { ElkNode } from "elkjs/lib/elk-api.js"
 
-import { useStudyDetailValue } from "../../state"
-import { getArtifactUrlPath } from "./PreferentialTrials"
-import { PreferentialOutputComponent } from "./PreferentialOutputComponent"
 import { StudyDetail, Trial } from "ts/types/optuna"
+import { useStudyDetailValue } from "../../state"
+import { PreferentialOutputComponent } from "./PreferentialOutputComponent"
+import { getArtifactUrlPath } from "./PreferentialTrials"
 
 const elk = new ELK()
 const nodeWidth = 400

optuna_dashboard/ts/components/Preferential/PreferentialHistory.tsx

@@ -1,27 +1,27 @@
-import React, { FC, useState } from "react"
-import {
-  Typography,
-  Box,
-  useTheme,
-  Card,
-  CardContent,
-  CardActions,
-} from "@mui/material"
 import ClearIcon from "@mui/icons-material/Clear"
-import IconButton from "@mui/material/IconButton"
+import DeleteIcon from "@mui/icons-material/Delete"
 import OpenInFullIcon from "@mui/icons-material/OpenInFull"
 import RestoreFromTrashIcon from "@mui/icons-material/RestoreFromTrash"
-import DeleteIcon from "@mui/icons-material/Delete"
+import {
+  Box,
+  Card,
+  CardActions,
+  CardContent,
+  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"
 
-import { TrialListDetail } from "../TrialList"
-import { getArtifactUrlPath } from "./PreferentialTrials"
-import { formatDate } from "../../dateUtil"
-import { actionCreator } from "../../action"
-import { useStudyDetailValue } from "../../state"
-import { PreferentialOutputComponent } from "./PreferentialOutputComponent"
 import { PreferenceHistory, StudyDetail, Trial } from "ts/types/optuna"
+import { actionCreator } from "../../action"
+import { formatDate } from "../../dateUtil"
+import { useStudyDetailValue } from "../../state"
+import { TrialListDetail } from "../TrialList"
+import { PreferentialOutputComponent } from "./PreferentialOutputComponent"
+import { getArtifactUrlPath } from "./PreferentialTrials"
 
 type TrialType = "worst" | "none"
 

optuna_dashboard/ts/components/Preferential/PreferentialOutputComponent.tsx

@@ -1,7 +1,7 @@
 import React, { FC, useMemo } from "react"
+import { Artifact, FeedbackComponentType, Trial } from "ts/types/optuna"
 import { ArtifactCardMedia } from "../Artifact/ArtifactCardMedia"
 import { MarkdownRenderer } from "../Note"
-import { Artifact, FeedbackComponentType, Trial } from "ts/types/optuna"
 
 export const PreferentialOutputComponent: FC<{
   trial: Trial

optuna_dashboard/ts/components/Preferential/PreferentialTrials.tsx

@@ -1,39 +1,32 @@
-import React, { FC, useEffect, useState } from "react"
-import {
-  Typography,
-  Box,
-  useTheme,
-  Card,
-  CardContent,
-  CardActions,
-  Button,
-  MenuItem,
-  Select,
-  FormControl,
-  FormLabel,
-  Modal,
-  CircularProgress,
-  Dialog,
-  DialogTitle,
-  DialogContent,
-  DialogActions,
-} from "@mui/material"
-import IconButton from "@mui/material/IconButton"
+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 { red } from "@mui/material/colors"
-import UndoIcon from "@mui/icons-material/Undo"
-import ClearIcon from "@mui/icons-material/Clear"
 import SettingsIcon from "@mui/icons-material/Settings"
-import FullscreenIcon from "@mui/icons-material/Fullscreen"
-
-import { actionCreator } from "../../action"
-import { TrialListDetail } from "../TrialList"
+import UndoIcon from "@mui/icons-material/Undo"
 import {
-  isThreejsArtifact,
-  useThreejsArtifactModal,
-} from "../Artifact/ThreejsArtifactViewer"
-import { PreferentialOutputComponent } from "./PreferentialOutputComponent"
+  Box,
+  Button,
+  Card,
+  CardActions,
+  CardContent,
+  CircularProgress,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  FormControl,
+  FormLabel,
+  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"
+
 import {
   Artifact,
   FeedbackComponentArtifact,
@@ -42,6 +35,13 @@ import {
   StudyDetail,
   Trial,
 } from "ts/types/optuna"
+import { actionCreator } from "../../action"
+import {
+  isThreejsArtifact,
+  useThreejsArtifactModal,
+} from "../Artifact/ThreejsArtifactViewer"
+import { TrialListDetail } from "../TrialList"
+import { PreferentialOutputComponent } from "./PreferentialOutputComponent"
 
 const SettingsPage: FC<{
   studyDetail: StudyDetail

optuna_dashboard/ts/components/RenameStudyDialog.tsx

@@ -1,16 +1,16 @@
-import React, { ReactNode, useState } from "react"
 import {
+  Button,
   Dialog,
-  DialogTitle,
+  DialogActions,
   DialogContent,
   DialogContentText,
-  Button,
-  DialogActions,
+  DialogTitle,
   useTheme,
 } from "@mui/material"
+import React, { ReactNode, useState } from "react"
+import { StudySummary } from "ts/types/optuna"
 import { actionCreator } from "../action"
 import { DebouncedInputTextField } from "./Debounce"
-import { StudySummary } from "ts/types/optuna"
 
 export const useRenameStudyDialog = (
   studies: StudySummary[]

optuna_dashboard/ts/components/Settings.tsx

@@ -1,18 +1,18 @@
-import React from "react"
+import ClearIcon from "@mui/icons-material/Clear"
 import {
-  Typography,
-  Select,
-  Switch,
+  Box,
+  IconButton,
   MenuItem,
+  Select,
   SelectChangeEvent,
   Stack,
+  Switch,
+  Typography,
   useTheme,
-  IconButton,
-  Box,
 } from "@mui/material"
-import ClearIcon from "@mui/icons-material/Clear"
-import { usePlotBackendRendering, usePlotlyColorThemeState } from "../state"
+import React from "react"
 import { PlotlyColorThemeDark, PlotlyColorThemeLight } from "ts/types/optuna"
+import { usePlotBackendRendering, usePlotlyColorThemeState } from "../state"
 
 interface SettingsProps {
   handleClose: () => void

optuna_dashboard/ts/components/StudyDetail.tsx

@@ -1,19 +1,18 @@
-import React, { FC, useEffect, useMemo } from "react"
-import { useRecoilValue } from "recoil"
-import { Link, useParams } from "react-router-dom"
+import ChevronRightIcon from "@mui/icons-material/ChevronRight"
+import HomeIcon from "@mui/icons-material/Home"
 import {
   Box,
   Card,
   CardContent,
+  IconButton,
   Typography,
   useTheme,
-  IconButton,
 } from "@mui/material"
 import Grid2 from "@mui/material/Unstable_Grid2"
-import ChevronRightIcon from "@mui/icons-material/ChevronRight"
-import HomeIcon from "@mui/icons-material/Home"
+import React, { FC, useEffect, useMemo } from "react"
+import { Link, useParams } from "react-router-dom"
+import { useRecoilValue } from "recoil"
 
-import { StudyNote } from "./Note"
 import { actionCreator } from "../action"
 import {
   reloadIntervalState,
@@ -21,19 +20,20 @@ import {
   useStudyIsPreferential,
   useStudyName,
 } from "../state"
-import { TrialTable } from "./TrialTable"
 import { AppDrawer, PageId } from "./AppDrawer"
-import { GraphParallelCoordinate } from "./GraphParallelCoordinate"
 import { Contour } from "./GraphContour"
-import { GraphSlice } from "./GraphSlice"
 import { GraphEdf } from "./GraphEdf"
+import { GraphParallelCoordinate } from "./GraphParallelCoordinate"
 import { GraphRank } from "./GraphRank"
-import { TrialList } from "./TrialList"
-import { StudyHistory } from "./StudyHistory"
-import { PreferentialTrials } from "./Preferential/PreferentialTrials"
-import { PreferentialHistory } from "./Preferential/PreferentialHistory"
+import { GraphSlice } from "./GraphSlice"
+import { StudyNote } from "./Note"
 import { PreferentialAnalytics } from "./Preferential/PreferentialAnalytics"
 import { PreferentialGraph } from "./Preferential/PreferentialGraph"
+import { PreferentialHistory } from "./Preferential/PreferentialHistory"
+import { PreferentialTrials } from "./Preferential/PreferentialTrials"
+import { StudyHistory } from "./StudyHistory"
+import { TrialList } from "./TrialList"
+import { TrialTable } from "./TrialTable"
 
 export const useURLVars = (): number => {
   const { studyId } = useParams<{ studyId: string }>()
@@ -85,7 +85,7 @@ export const StudyDetail: FC<{
       }
     }
 
-    const intervalId = setInterval(function () {
+    const intervalId = setInterval(() => {
       action.updateStudyDetail(studyId)
     }, interval)
     return () => clearInterval(intervalId)

optuna_dashboard/ts/components/StudyHistory.tsx

@@ -1,4 +1,3 @@
-import React, { FC, useState } from "react"
 import {
   Box,
   Card,
@@ -8,26 +7,27 @@ import {
   Typography,
   useTheme,
 } from "@mui/material"
-import { GraphParetoFront } from "./GraphParetoFront"
-import { GraphHistory } from "./GraphHistory"
-import { GraphTimeline } from "./GraphTimeline"
-import { GraphIntermediateValues } from "./GraphIntermediateValues"
+import FormControlLabel from "@mui/material/FormControlLabel"
 import Grid2 from "@mui/material/Unstable_Grid2"
-import { DataGrid, DataGridColumn } from "./DataGrid"
-import { GraphHyperparameterImportance } from "./GraphHyperparameterImportances"
-import { UserDefinedPlot } from "./UserDefinedPlot"
-import { BestTrialsCard } from "./BestTrialsCard"
-import { StudyArtifactCards } from "./Artifact/StudyArtifactCards"
+import * as Optuna from "@optuna/types"
+import React, { FC, useState } from "react"
 import { useRecoilValue } from "recoil"
+import { Trial } from "ts/types/optuna"
 import {
   useStudyDetailValue,
   useStudyDirections,
   useStudySummaryValue,
 } from "../state"
-import FormControlLabel from "@mui/material/FormControlLabel"
 import { artifactIsAvailable } from "../state"
-import * as Optuna from "@optuna/types"
-import { Trial } from "ts/types/optuna"
+import { StudyArtifactCards } from "./Artifact/StudyArtifactCards"
+import { BestTrialsCard } from "./BestTrialsCard"
+import { DataGrid, DataGridColumn } from "./DataGrid"
+import { GraphHistory } from "./GraphHistory"
+import { GraphHyperparameterImportance } from "./GraphHyperparameterImportances"
+import { GraphIntermediateValues } from "./GraphIntermediateValues"
+import { GraphParetoFront } from "./GraphParetoFront"
+import { GraphTimeline } from "./GraphTimeline"
+import { UserDefinedPlot } from "./UserDefinedPlot"
 
 export const StudyHistory: FC<{ studyId: number }> = ({ studyId }) => {
   const theme = useTheme()

optuna_dashboard/ts/components/StudyList.tsx

@@ -1,3 +1,25 @@
+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 {
+  Box,
+  Button,
+  Card,
+  CardActionArea,
+  CardActions,
+  CardContent,
+  Container,
+  IconButton,
+  InputAdornment,
+  MenuItem,
+  SvgIcon,
+  TextField,
+  Typography,
+  useTheme,
+} from "@mui/material"
 import React, {
   FC,
   useEffect,
@@ -6,40 +28,18 @@ import React, {
   useMemo,
 } from "react"
 import { useNavigate } from "react-router-dom"
-import { useRecoilValue } from "recoil"
 import { Link } from "react-router-dom"
-import {
-  Typography,
-  Container,
-  Card,
-  CardActionArea,
-  Box,
-  Button,
-  IconButton,
-  MenuItem,
-  useTheme,
-  InputAdornment,
-  SvgIcon,
-  CardContent,
-  TextField,
-  CardActions,
-} from "@mui/material"
-import { Delete, Refresh, Search, HourglassTop } from "@mui/icons-material"
-import SortIcon from "@mui/icons-material/Sort"
-import HomeIcon from "@mui/icons-material/Home"
-import AddBoxIcon from "@mui/icons-material/AddBox"
-import CompareIcon from "@mui/icons-material/Compare"
-import DriveFileRenameOutlineIcon from "@mui/icons-material/DriveFileRenameOutline"
+import { useRecoilValue } from "recoil"
 
+import { styled } from "@mui/system"
+import { StudySummary } from "ts/types/optuna"
 import { actionCreator } from "../action"
 import { studySummariesLoadingState, studySummariesState } from "../state"
-import { styled } from "@mui/system"
+import { useQuery } from "../urlQuery"
 import { AppDrawer } from "./AppDrawer"
 import { useCreateStudyDialog } from "./CreateStudyDialog"
 import { useDeleteStudyDialog } from "./DeleteStudyDialog"
 import { useRenameStudyDialog } from "./RenameStudyDialog"
-import { useQuery } from "../urlQuery"
-import { StudySummary } from "ts/types/optuna"
 
 export const StudyList: FC<{
   toggleColorMode: () => void

optuna_dashboard/ts/components/TrialFormWidgets.tsx

@@ -1,22 +1,19 @@
-import React, { FC, ReactNode, useMemo, useState } from "react"
 import {
-  Typography,
   Box,
-  useTheme,
-  Card,
-  FormControlLabel,
-  FormControl,
-  FormLabel,
   Button,
-  RadioGroup,
+  Card,
+  FormControl,
+  FormControlLabel,
+  FormLabel,
   Radio,
+  RadioGroup,
   Slider,
   TextField,
+  Typography,
+  useTheme,
 } from "@mui/material"
-import { DebouncedInputTextField } from "./Debounce"
-import { actionCreator } from "../action"
-import { useTrialUpdatingValue } from "../state"
 import * as Optuna from "@optuna/types"
+import React, { FC, ReactNode, useMemo, useState } from "react"
 import {
   FormWidgets,
   ObjectiveChoiceWidget,
@@ -26,6 +23,9 @@ import {
   Trial,
   UserAttrFormWidget,
 } from "ts/types/optuna"
+import { actionCreator } from "../action"
+import { useTrialUpdatingValue } from "../state"
+import { DebouncedInputTextField } from "./Debounce"
 
 type WidgetState = {
   isValid: boolean

optuna_dashboard/ts/components/TrialList.tsx

@@ -1,12 +1,15 @@
-import React, { FC, ReactNode, useMemo } from "react"
+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 {
-  Typography,
   Box,
   Button,
-  useTheme,
   IconButton,
   Menu,
   MenuItem,
+  Typography,
+  useTheme,
 } from "@mui/material"
 import Chip from "@mui/material/Chip"
 import Divider from "@mui/material/Divider"
@@ -15,23 +18,20 @@ 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 FilterListIcon from "@mui/icons-material/FilterList"
-import CheckBoxOutlineBlankIcon from "@mui/icons-material/CheckBoxOutlineBlank"
-import CheckBoxIcon from "@mui/icons-material/CheckBox"
-import StopCircleIcon from "@mui/icons-material/StopCircle"
 import * as Optuna from "@optuna/types"
+import React, { FC, ReactNode, useMemo } from "react"
 
-import { TrialNote } from "./Note"
-import { useNavigate } from "react-router-dom"
 import ListItemIcon from "@mui/material/ListItemIcon"
-import { useRecoilValue } from "recoil"
-import { artifactIsAvailable } from "../state"
-import { actionCreator } from "../action"
-import { TrialFormWidgets } from "./TrialFormWidgets"
-import { TrialArtifactCards } from "./Artifact/TrialArtifactCards"
-import { useQuery } from "../urlQuery"
 import { useVirtualizer } from "@tanstack/react-virtual"
+import { useNavigate } from "react-router-dom"
+import { useRecoilValue } from "recoil"
 import { FormWidgets, StudyDetail, Trial } from "ts/types/optuna"
+import { actionCreator } from "../action"
+import { artifactIsAvailable } from "../state"
+import { useQuery } from "../urlQuery"
+import { TrialArtifactCards } from "./Artifact/TrialArtifactCards"
+import { TrialNote } from "./Note"
+import { TrialFormWidgets } from "./TrialFormWidgets"
 
 const states: Optuna.TrialState[] = [
   "Complete",

optuna_dashboard/ts/components/TrialTable.tsx

@@ -1,11 +1,11 @@
-import React, { FC } from "react"
-import { IconButton, Button, useTheme } from "@mui/material"
-import LinkIcon from "@mui/icons-material/Link"
 import DownloadIcon from "@mui/icons-material/Download"
+import LinkIcon from "@mui/icons-material/Link"
+import { Button, IconButton, useTheme } from "@mui/material"
+import React, { FC } from "react"
 
-import { DataGridColumn, DataGrid } from "./DataGrid"
 import { Link } from "react-router-dom"
 import { StudyDetail, Trial } from "ts/types/optuna"
+import { DataGrid, DataGridColumn } from "./DataGrid"
 
 export const TrialTable: FC<{
   studyDetail: StudyDetail | null
@@ -29,7 +29,7 @@ export const TrialTable: FC<{
   const valueComparator = (
     firstVal?: number,
     secondVal?: number,
-    ascending: boolean = true
+    ascending = true
   ): number => {
     if (firstVal === secondVal) {
       return 0

optuna_dashboard/ts/components/UserDefinedPlot.tsx

@@ -1,6 +1,6 @@
+import { Box } from "@mui/material"
 import * as plotly from "plotly.js-dist-min"
 import React, { FC, useEffect } from "react"
-import { Box } from "@mui/material"
 import { PlotlyGraphObject } from "ts/types/optuna"
 
 export const UserDefinedPlot: FC<{

optuna_dashboard/ts/graphUtil.ts

@@ -1,5 +1,5 @@
-import { SearchSpaceItem, Trial } from "./types/optuna"
 import * as Optuna from "@optuna/types"
+import { SearchSpaceItem, Trial } from "./types/optuna"
 
 const PADDING_RATIO = 0.05
 

optuna_dashboard/ts/hooks/useParamImportance.ts

@@ -1,9 +1,9 @@
-import { useEffect } from "react"
-import { useSnackbar } from "notistack"
-import { getParamImportances } from "../apiClient"
 import { useQuery } from "@tanstack/react-query"
 import { AxiosError } from "axios"
+import { useSnackbar } from "notistack"
+import { useEffect } from "react"
 import { ParamImportance } from "ts/types/optuna"
+import { getParamImportances } from "../apiClient"
 
 export const useParamImportance = ({
   numCompletedTrials,

optuna_dashboard/ts/hooks/usePlot.ts

@@ -1,6 +1,6 @@
-import * as plotly from "plotly.js-dist-min"
 import { useQuery } from "@tanstack/react-query"
 import { AxiosError } from "axios"
+import * as plotly from "plotly.js-dist-min"
 import { PlotType, getPlotAPI } from "../apiClient"
 
 export const usePlot = ({

optuna_dashboard/ts/searchSpace.ts

@@ -1,6 +1,6 @@
+import * as Optuna from "@optuna/types"
 import { useMemo } from "react"
 import { SearchSpaceItem } from "./types/optuna"
-import * as Optuna from "@optuna/types"
 
 export const mergeUnionSearchSpace = (
   unionSearchSpace: SearchSpaceItem[]

optuna_dashboard/ts/state.ts

@@ -1,10 +1,10 @@
 import * as Optuna from "@optuna/types"
 import { atom, useRecoilValue } from "recoil"
-import {
-  LightColorTemplates,
-  DarkColorTemplates,
-} from "./components/PlotlyColorTemplates"
 import { useLocalStorage } from "usehooks-ts"
+import {
+  DarkColorTemplates,
+  LightColorTemplates,
+} from "./components/PlotlyColorTemplates"
 import {
   Artifact,
   PlotlyColorTheme,

optuna_dashboard/ts/trialFilter.ts

@@ -1,5 +1,5 @@
-import { useMemo, useState } from "react"
 import * as Optuna from "@optuna/types"
+import { useMemo, useState } from "react"
 import { SearchSpaceItem, StudyDetail, Trial } from "./types/optuna"
 
 type TargetKind = "objective" | "user_attr" | "params"

optuna_dashboard/ts/urlQuery.ts

@@ -1,5 +1,5 @@
-import { useLocation } from "react-router-dom"
 import { useMemo } from "react"
+import { useLocation } from "react-router-dom"
 
 export const useQuery = (): URLSearchParams => {
   const { search } = useLocation()

package.json

@@ -1,9 +1,9 @@
 {
   "scripts": {
-    "fmt": "biome format --write . && biome check standalone_app vscode tslib --apply",
+    "fmt": "biome check . --apply",
     "lint": "npm run lint:eslint && npm run lint:biome",
     "lint:eslint": "eslint . --ext .ts,.tsx --max-warnings 0",
-    "lint:biome": "biome format . && biome ci standalone_app vscode tslib"
+    "lint:biome": "biome ci ."
   },
   "devDependencies": {
     "@biomejs/biome": "1.5.3",