diff --git a/.github/workflows/typescript-tests.yml b/.github/workflows/typescript-tests.yml index e00065ed..16a91b84 100644 --- a/.github/workflows/typescript-tests.yml +++ b/.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' diff --git a/biome.json b/biome.json index 5f68203d..978b1808 100644 --- a/biome.json +++ b/biome.json @@ -19,6 +19,9 @@ "tslib/react/types/*" ] }, + "linter": { + "ignore": ["optuna_dashboard/ts/**/*.ts", "optuna_dashboard/ts/**/*.tsx"] + }, "javascript": { "formatter": { "trailingComma": "es5", diff --git a/optuna_dashboard/ts/action.ts b/optuna_dashboard/ts/action.ts index 4db8c0b9..e0819b37 100644 --- a/optuna_dashboard/ts/action.ts +++ b/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 { getDominatedTrials } from "./dominatedTrials" import { - studyDetailsState, - studySummariesState, - isFileUploading, artifactIsAvailable, + isFileUploading, plotlypyIsAvailableState, - studyDetailLoadingState, reloadIntervalState, - trialsUpdatingState, + studyDetailLoadingState, + studyDetailsState, studySummariesLoadingState, + studySummariesState, + trialsUpdatingState, } from "./state" -import { getDominatedTrials } from "./dominatedTrials" import { Artifact, FeedbackComponentType, diff --git a/optuna_dashboard/ts/apiClient.ts b/optuna_dashboard/ts/apiClient.ts index ba5878cd..982d1553 100644 --- a/optuna_dashboard/ts/apiClient.ts +++ b/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, diff --git a/optuna_dashboard/ts/components/App.tsx b/optuna_dashboard/ts/components/App.tsx index 4459ff93..c915f7c7 100644 --- a/optuna_dashboard/ts/components/App.tsx +++ b/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: { diff --git a/optuna_dashboard/ts/components/AppDrawer.tsx b/optuna_dashboard/ts/components/AppDrawer.tsx index f0a31c8b..59fb48d1 100644 --- a/optuna_dashboard/ts/components/AppDrawer.tsx +++ b/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 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 Toolbar from "@mui/material/Toolbar" -import List from "@mui/material/List" +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 ChevronLeftIcon from "@mui/icons-material/ChevronLeft" -import ChevronRightIcon from "@mui/icons-material/ChevronRight" +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" diff --git a/optuna_dashboard/ts/components/Artifact/ArtifactCardMedia.tsx b/optuna_dashboard/ts/components/Artifact/ArtifactCardMedia.tsx index 8ffc70ba..7ea83290 100644 --- a/optuna_dashboard/ts/components/Artifact/ArtifactCardMedia.tsx +++ b/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 diff --git a/optuna_dashboard/ts/components/Artifact/DeleteArtifactDialog.tsx b/optuna_dashboard/ts/components/Artifact/DeleteArtifactDialog.tsx index 50e23df8..7b5f90b2 100644 --- a/optuna_dashboard/ts/components/Artifact/DeleteArtifactDialog.tsx +++ b/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, diff --git a/optuna_dashboard/ts/components/Artifact/StudyArtifactCards.tsx b/optuna_dashboard/ts/components/Artifact/StudyArtifactCards.tsx index 361a8153..fc749b5e 100644 --- a/optuna_dashboard/ts/components/Artifact/StudyArtifactCards.tsx +++ b/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() diff --git a/optuna_dashboard/ts/components/Artifact/ThreejsArtifactViewer.tsx b/optuna_dashboard/ts/components/Artifact/ThreejsArtifactViewer.tsx index 954bca0a..bd2281f4 100644 --- a/optuna_dashboard/ts/components/Artifact/ThreejsArtifactViewer.tsx +++ b/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 => { diff --git a/optuna_dashboard/ts/components/Artifact/TrialArtifactCards.tsx b/optuna_dashboard/ts/components/Artifact/TrialArtifactCards.tsx index 8f1cc971..fe7593ce 100644 --- a/optuna_dashboard/ts/components/Artifact/TrialArtifactCards.tsx +++ b/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() diff --git a/optuna_dashboard/ts/components/Artifact/WaveSurferArtifactViewer.tsx b/optuna_dashboard/ts/components/Artifact/WaveSurferArtifactViewer.tsx index 96713e69..0f13bb53 100644 --- a/optuna_dashboard/ts/components/Artifact/WaveSurferArtifactViewer.tsx +++ b/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 diff --git a/optuna_dashboard/ts/components/BestTrialsCard.tsx b/optuna_dashboard/ts/components/BestTrialsCard.tsx index df92b444..650344ac 100644 --- a/optuna_dashboard/ts/components/BestTrialsCard.tsx +++ b/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[] => { diff --git a/optuna_dashboard/ts/components/CompareStudies.tsx b/optuna_dashboard/ts/components/CompareStudies.tsx index d6244a1e..8d376240 100644 --- a/optuna_dashboard/ts/components/CompareStudies.tsx +++ b/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[], diff --git a/optuna_dashboard/ts/components/CreateStudyDialog.tsx b/optuna_dashboard/ts/components/CreateStudyDialog.tsx index ed4926ff..cb0e943f 100644 --- a/optuna_dashboard/ts/components/CreateStudyDialog.tsx +++ b/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() diff --git a/optuna_dashboard/ts/components/DataGrid.tsx b/optuna_dashboard/ts/components/DataGrid.tsx index 64eaaeda..3df8b414 100644 --- a/optuna_dashboard/ts/components/DataGrid.tsx +++ b/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" diff --git a/optuna_dashboard/ts/components/Debounce.tsx b/optuna_dashboard/ts/components/Debounce.tsx index c8ee1751..a2cd238f 100644 --- a/optuna_dashboard/ts/components/Debounce.tsx +++ b/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<{ diff --git a/optuna_dashboard/ts/components/DeleteStudyDialog.tsx b/optuna_dashboard/ts/components/DeleteStudyDialog.tsx index 73940b2a..14312e06 100644 --- a/optuna_dashboard/ts/components/DeleteStudyDialog.tsx +++ b/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 = (): [ diff --git a/optuna_dashboard/ts/components/GraphContour.tsx b/optuna_dashboard/ts/components/GraphContour.tsx index 3d2d1a4c..923e1529 100644 --- a/optuna_dashboard/ts/components/GraphContour.tsx +++ b/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 diff --git a/optuna_dashboard/ts/components/GraphEdf.tsx b/optuna_dashboard/ts/components/GraphEdf.tsx index 86be7802..88af0105 100644 --- a/optuna_dashboard/ts/components/GraphEdf.tsx +++ b/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}` diff --git a/optuna_dashboard/ts/components/GraphHistory.tsx b/optuna_dashboard/ts/components/GraphHistory.tsx index 784acc9b..a64204d3 100644 --- a/optuna_dashboard/ts/components/GraphHistory.tsx +++ b/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" diff --git a/optuna_dashboard/ts/components/GraphHyperparameterImportances.tsx b/optuna_dashboard/ts/components/GraphHyperparameterImportances.tsx index 4e20008a..1152f0da 100644 --- a/optuna_dashboard/ts/components/GraphHyperparameterImportances.tsx +++ b/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 { ParamImportance, StudyDetail } from "ts/types/optuna" +import { PlotType } from "../apiClient" import { useParamImportance } from "../hooks/useParamImportance" +import { usePlot } from "../hooks/usePlot" import { - useStudyDirections, - usePlotlyColorTheme, useBackendRender, + usePlotlyColorTheme, + useStudyDirections, } from "../state" -import { PlotType } from "../apiClient" -import { usePlot } from "../hooks/usePlot" -import { ParamImportance, StudyDetail } from "ts/types/optuna" const plotDomId = "graph-hyperparameter-importances" diff --git a/optuna_dashboard/ts/components/GraphIntermediateValues.tsx b/optuna_dashboard/ts/components/GraphIntermediateValues.tsx index db223946..5dd6b198 100644 --- a/optuna_dashboard/ts/components/GraphIntermediateValues.tsx +++ b/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" diff --git a/optuna_dashboard/ts/components/GraphParallelCoordinate.tsx b/optuna_dashboard/ts/components/GraphParallelCoordinate.tsx index cbbf1e2b..78b61c7a 100644 --- a/optuna_dashboard/ts/components/GraphParallelCoordinate.tsx +++ b/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 { - Typography, - useTheme, Box, - Grid, - FormGroup, - FormControlLabel, Checkbox, + FormControlLabel, + FormGroup, + Grid, + Typography, + useTheme, } 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" diff --git a/optuna_dashboard/ts/components/GraphParetoFront.tsx b/optuna_dashboard/ts/components/GraphParetoFront.tsx index 8e47844e..b0687895 100644 --- a/optuna_dashboard/ts/components/GraphParetoFront.tsx +++ b/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 * 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 { useBackendRender } from "../state" +import { makeHovertext } from "../graphUtil" import { usePlot } from "../hooks/usePlot" -import * as Optuna from "@optuna/types" -import { StudyDetail, Trial } from "ts/types/optuna" +import { usePlotlyColorTheme } from "../state" +import { useBackendRender } from "../state" const plotDomId = "graph-pareto-front" diff --git a/optuna_dashboard/ts/components/GraphRank.tsx b/optuna_dashboard/ts/components/GraphRank.tsx index fea3f4cd..ba4382c5 100644 --- a/optuna_dashboard/ts/components/GraphRank.tsx +++ b/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 * 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 { usePlotlyColorTheme, useBackendRender } from "../state" +import { getAxisInfo, makeHovertext } from "../graphUtil" import { usePlot } from "../hooks/usePlot" -import { SearchSpaceItem, StudyDetail, Trial } from "ts/types/optuna" +import { useMergedUnionSearchSpace } from "../searchSpace" +import { useBackendRender, usePlotlyColorTheme } from "../state" const plotDomId = "graph-rank" diff --git a/optuna_dashboard/ts/components/GraphSlice.tsx b/optuna_dashboard/ts/components/GraphSlice.tsx index 917d9254..58576be4 100644 --- a/optuna_dashboard/ts/components/GraphSlice.tsx +++ b/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" diff --git a/optuna_dashboard/ts/components/GraphTimeline.tsx b/optuna_dashboard/ts/components/GraphTimeline.tsx index d0b54389..ae30a75b 100644 --- a/optuna_dashboard/ts/components/GraphTimeline.tsx +++ b/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 { StudyDetail, Trial } from "ts/types/optuna" +import { PlotType } from "../apiClient" import { makeHovertext } from "../graphUtil" +import { usePlot } from "../hooks/usePlot" 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" const plotDomId = "graph-timeline" const maxBars = 100 diff --git a/optuna_dashboard/ts/components/Note.tsx b/optuna_dashboard/ts/components/Note.tsx index f54a3963..2f5e6f83 100644 --- a/optuna_dashboard/ts/components/Note.tsx +++ b/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? diff --git a/optuna_dashboard/ts/components/Preferential/PreferentialAnalytics.tsx b/optuna_dashboard/ts/components/Preferential/PreferentialAnalytics.tsx index 2341ccfb..63dba5e2 100644 --- a/optuna_dashboard/ts/components/Preferential/PreferentialAnalytics.tsx +++ b/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 * 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" -import * as Optuna from "@optuna/types" export const PreferentialAnalytics: FC<{ studyId: number }> = ({ studyId }) => { const theme = useTheme() diff --git a/optuna_dashboard/ts/components/Preferential/PreferentialGraph.tsx b/optuna_dashboard/ts/components/Preferential/PreferentialGraph.tsx index 4e135d91..68cb9cfc 100644 --- a/optuna_dashboard/ts/components/Preferential/PreferentialGraph.tsx +++ b/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 { StudyDetail, Trial } from "ts/types/optuna" import { useStudyDetailValue } from "../../state" -import { getArtifactUrlPath } from "./PreferentialTrials" import { PreferentialOutputComponent } from "./PreferentialOutputComponent" -import { StudyDetail, Trial } from "ts/types/optuna" +import { getArtifactUrlPath } from "./PreferentialTrials" const elk = new ELK() const nodeWidth = 400 diff --git a/optuna_dashboard/ts/components/Preferential/PreferentialHistory.tsx b/optuna_dashboard/ts/components/Preferential/PreferentialHistory.tsx index 9f5c090b..faa3f6bf 100644 --- a/optuna_dashboard/ts/components/Preferential/PreferentialHistory.tsx +++ b/optuna_dashboard/ts/components/Preferential/PreferentialHistory.tsx @@ -1,27 +1,27 @@ -import React, { FC, useState } from "react" +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 { - Typography, Box, - useTheme, Card, - CardContent, CardActions, + CardContent, + Typography, + useTheme, } from "@mui/material" -import ClearIcon from "@mui/icons-material/Clear" import IconButton from "@mui/material/IconButton" -import OpenInFullIcon from "@mui/icons-material/OpenInFull" -import RestoreFromTrashIcon from "@mui/icons-material/RestoreFromTrash" -import DeleteIcon from "@mui/icons-material/Delete" 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 { 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 { PreferenceHistory, StudyDetail, Trial } from "ts/types/optuna" +import { getArtifactUrlPath } from "./PreferentialTrials" type TrialType = "worst" | "none" diff --git a/optuna_dashboard/ts/components/Preferential/PreferentialOutputComponent.tsx b/optuna_dashboard/ts/components/Preferential/PreferentialOutputComponent.tsx index af45c6ec..b2db7f90 100644 --- a/optuna_dashboard/ts/components/Preferential/PreferentialOutputComponent.tsx +++ b/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 diff --git a/optuna_dashboard/ts/components/Preferential/PreferentialTrials.tsx b/optuna_dashboard/ts/components/Preferential/PreferentialTrials.tsx index 095e65ba..2177b99d 100644 --- a/optuna_dashboard/ts/components/Preferential/PreferentialTrials.tsx +++ b/optuna_dashboard/ts/components/Preferential/PreferentialTrials.tsx @@ -1,39 +1,32 @@ -import React, { FC, useEffect, useState } from "react" +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 { - Typography, Box, - useTheme, + Button, Card, - CardContent, CardActions, - Button, - MenuItem, - Select, - FormControl, - FormLabel, - Modal, + CardContent, CircularProgress, Dialog, - DialogTitle, - DialogContent, DialogActions, + DialogContent, + DialogTitle, + FormControl, + FormLabel, + MenuItem, + Modal, + Select, + Typography, + useTheme, } from "@mui/material" import IconButton from "@mui/material/IconButton" -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 React, { FC, useEffect, useState } from "react" -import { actionCreator } from "../../action" -import { TrialListDetail } from "../TrialList" -import { - isThreejsArtifact, - useThreejsArtifactModal, -} from "../Artifact/ThreejsArtifactViewer" -import { PreferentialOutputComponent } from "./PreferentialOutputComponent" 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 diff --git a/optuna_dashboard/ts/components/RenameStudyDialog.tsx b/optuna_dashboard/ts/components/RenameStudyDialog.tsx index 0765be3f..cd2c8289 100644 --- a/optuna_dashboard/ts/components/RenameStudyDialog.tsx +++ b/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[] diff --git a/optuna_dashboard/ts/components/Settings.tsx b/optuna_dashboard/ts/components/Settings.tsx index feae3124..4df44812 100644 --- a/optuna_dashboard/ts/components/Settings.tsx +++ b/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 diff --git a/optuna_dashboard/ts/components/StudyDetail.tsx b/optuna_dashboard/ts/components/StudyDetail.tsx index 8d5bce9b..5f28675c 100644 --- a/optuna_dashboard/ts/components/StudyDetail.tsx +++ b/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) diff --git a/optuna_dashboard/ts/components/StudyHistory.tsx b/optuna_dashboard/ts/components/StudyHistory.tsx index d112486a..12728c16 100644 --- a/optuna_dashboard/ts/components/StudyHistory.tsx +++ b/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() diff --git a/optuna_dashboard/ts/components/StudyList.tsx b/optuna_dashboard/ts/components/StudyList.tsx index b2dddd2b..30374d0d 100644 --- a/optuna_dashboard/ts/components/StudyList.tsx +++ b/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 diff --git a/optuna_dashboard/ts/components/TrialFormWidgets.tsx b/optuna_dashboard/ts/components/TrialFormWidgets.tsx index f870ccad..53eba692 100644 --- a/optuna_dashboard/ts/components/TrialFormWidgets.tsx +++ b/optuna_dashboard/ts/components/TrialFormWidgets.tsx @@ -1,22 +1,19 @@ -import React, { FC, ReactNode, useMemo, useState } from "react" import { - Typography, Box, - useTheme, + Button, Card, - FormControlLabel, FormControl, + FormControlLabel, FormLabel, - Button, - RadioGroup, 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 diff --git a/optuna_dashboard/ts/components/TrialList.tsx b/optuna_dashboard/ts/components/TrialList.tsx index c6ea1028..3762dabf 100644 --- a/optuna_dashboard/ts/components/TrialList.tsx +++ b/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 { useVirtualizer } from "@tanstack/react-virtual" +import { useNavigate } from "react-router-dom" import { useRecoilValue } from "recoil" -import { artifactIsAvailable } from "../state" +import { FormWidgets, StudyDetail, Trial } from "ts/types/optuna" import { actionCreator } from "../action" -import { TrialFormWidgets } from "./TrialFormWidgets" -import { TrialArtifactCards } from "./Artifact/TrialArtifactCards" +import { artifactIsAvailable } from "../state" import { useQuery } from "../urlQuery" -import { useVirtualizer } from "@tanstack/react-virtual" -import { FormWidgets, StudyDetail, Trial } from "ts/types/optuna" +import { TrialArtifactCards } from "./Artifact/TrialArtifactCards" +import { TrialNote } from "./Note" +import { TrialFormWidgets } from "./TrialFormWidgets" const states: Optuna.TrialState[] = [ "Complete", diff --git a/optuna_dashboard/ts/components/TrialTable.tsx b/optuna_dashboard/ts/components/TrialTable.tsx index 58dd7e0c..9c171438 100644 --- a/optuna_dashboard/ts/components/TrialTable.tsx +++ b/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 diff --git a/optuna_dashboard/ts/components/UserDefinedPlot.tsx b/optuna_dashboard/ts/components/UserDefinedPlot.tsx index 615b3e19..c6f0f528 100644 --- a/optuna_dashboard/ts/components/UserDefinedPlot.tsx +++ b/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<{ diff --git a/optuna_dashboard/ts/graphUtil.ts b/optuna_dashboard/ts/graphUtil.ts index ecf6240a..64f5d801 100644 --- a/optuna_dashboard/ts/graphUtil.ts +++ b/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 diff --git a/optuna_dashboard/ts/hooks/useParamImportance.ts b/optuna_dashboard/ts/hooks/useParamImportance.ts index 36cb9f86..50d37ac2 100644 --- a/optuna_dashboard/ts/hooks/useParamImportance.ts +++ b/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, diff --git a/optuna_dashboard/ts/hooks/usePlot.ts b/optuna_dashboard/ts/hooks/usePlot.ts index 9ce6edd9..4b3588fa 100644 --- a/optuna_dashboard/ts/hooks/usePlot.ts +++ b/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 = ({ diff --git a/optuna_dashboard/ts/searchSpace.ts b/optuna_dashboard/ts/searchSpace.ts index abff8822..dcd3758f 100644 --- a/optuna_dashboard/ts/searchSpace.ts +++ b/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[] diff --git a/optuna_dashboard/ts/state.ts b/optuna_dashboard/ts/state.ts index 84a1d74a..644bd984 100644 --- a/optuna_dashboard/ts/state.ts +++ b/optuna_dashboard/ts/state.ts @@ -1,10 +1,10 @@ import * as Optuna from "@optuna/types" import { atom, useRecoilValue } from "recoil" +import { useLocalStorage } from "usehooks-ts" import { - LightColorTemplates, DarkColorTemplates, + LightColorTemplates, } from "./components/PlotlyColorTemplates" -import { useLocalStorage } from "usehooks-ts" import { Artifact, PlotlyColorTheme, diff --git a/optuna_dashboard/ts/trialFilter.ts b/optuna_dashboard/ts/trialFilter.ts index 111367b0..329b42a1 100644 --- a/optuna_dashboard/ts/trialFilter.ts +++ b/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" diff --git a/optuna_dashboard/ts/urlQuery.ts b/optuna_dashboard/ts/urlQuery.ts index e4737c0b..be046e61 100644 --- a/optuna_dashboard/ts/urlQuery.ts +++ b/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() diff --git a/package.json b/package.json index 9e243cb4..cecb5b82 100644 --- a/package.json +++ b/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",