Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Export App in optuna_dashboard #872

Merged
merged 16 commits into from
Jul 10, 2024
Merged

Export App in optuna_dashboard #872

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
dd1a56b
Move APIClientProvider from App
porink0424 Apr 26, 2024
1ce20ca
Add gitignore
porink0424 Apr 26, 2024
49c56e7
Impl build:pkg run scripts
porink0424 Apr 26, 2024
72c8d49
Add sample impl in App
porink0424 Apr 26, 2024
470b6ed
Add sample projects to import App
porink0424 May 1, 2024
34aef42
Delete vite-project
porink0424 Jun 26, 2024
d95ba01
Merge branch 'main' of github.com:porink0424/optuna-dashboard into fe…
porink0424 Jun 26, 2024
ed634be
Export App from optuna_dashboard as pkg successfully
porink0424 Jun 28, 2024
52c96b1
Add vite_dashboard to biome config
porink0424 Jun 28, 2024
22bd576
Add vite_dashboard as the sample project importing optuna_dashboard app
porink0424 Jun 28, 2024
497ae24
Change Unstable_Grid2 -> Grid
porink0424 Jun 28, 2024
973986e
Apply formatter
porink0424 Jun 28, 2024
ccbdd60
Delete vite_dashboard
porink0424 Jul 10, 2024
7a3ef4a
Make tsconfig files common using "extends"
porink0424 Jul 10, 2024
85298b8
Fix Grid design
porink0424 Jul 10, 2024
eed51c9
Delete vite_dashboard from biome.json
porink0424 Jul 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions optuna_dashboard/.gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
pkg
types
4 changes: 2 additions & 2 deletions optuna_dashboard/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 4 additions & 2 deletions optuna_dashboard/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,16 @@
{
"name": "optuna-dashboard",
"name": "@optuna/optuna-dashboard",
"private": true,
"version": "0.0.1",
"description": "Dashboard for Optuna",
"main": "index.js",
"main": "pkg/pkg_index.js",
"types": "types/pkg_index.d.ts",
"scripts": {
"watch": "NODE_ENV=development TYPESCRIPT_LOADER=esbuild-loader webpack --watch",
"build": "webpack",
"build:dev": "NODE_ENV=development TYPESCRIPT_LOADER=esbuild-loader webpack",
"build:prd": "NODE_ENV=production webpack",
"build:pkg": "tsc -d --project tsconfig.pkg.json",
"type-check": "tsc --noEmit"
},
"author": "Masashi Shibata",
Expand Down
196 changes: 95 additions & 101 deletions optuna_dashboard/ts/components/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,14 +13,10 @@ import { BrowserRouter as Router, Route, Routes } from "react-router-dom"
import { RecoilRoot } from "recoil"

import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
import { APIClientProvider } from "../apiClientProvider"
import { AxiosClient } from "../axiosClient"
import { CompareStudies } from "./CompareStudies"
import { StudyDetail } from "./StudyDetail"
import { StudyList } from "./StudyList"

const axiosAPIClient = new AxiosClient()

const queryClient = new QueryClient({
defaultOptions: {
queries: {
Expand Down Expand Up @@ -54,102 +50,100 @@ export const App: FC = () => {
}

return (
<APIClientProvider apiClient={axiosAPIClient}>
<QueryClientProvider client={queryClient}>
<RecoilRoot>
<ThemeProvider theme={theme}>
<CssBaseline />
<Box
component="div"
sx={{
backgroundColor: colorMode === "dark" ? "#121212" : "#ffffff",
width: "100%",
minHeight: "100vh",
}}
>
<SnackbarProvider maxSnack={3}>
<Router>
<Routes>
<Route
path={URL_PREFIX + "/studies/:studyId/analytics"}
element={
<StudyDetail
toggleColorMode={toggleColorMode}
page={"analytics"}
/>
}
/>
<Route
path={URL_PREFIX + "/studies/:studyId/trials"}
element={
<StudyDetail
toggleColorMode={toggleColorMode}
page={"trialList"}
/>
}
/>
<Route
path={URL_PREFIX + "/studies/:studyId/trialTable"}
element={
<StudyDetail
toggleColorMode={toggleColorMode}
page={"trialTable"}
/>
}
/>
<Route
path={URL_PREFIX + "/studies/:studyId/note"}
element={
<StudyDetail
toggleColorMode={toggleColorMode}
page={"note"}
/>
}
/>
<Route
path={URL_PREFIX + "/studies/:studyId/graph"}
element={
<StudyDetail
toggleColorMode={toggleColorMode}
page={"graph"}
/>
}
/>
<Route
path={URL_PREFIX + "/studies/:studyId"}
element={
<StudyDetail
toggleColorMode={toggleColorMode}
page={"top"}
/>
}
/>
<Route
path={URL_PREFIX + "/studies/:studyId/preference-history"}
element={
<StudyDetail
toggleColorMode={toggleColorMode}
page={"preferenceHistory"}
/>
}
/>
<Route
path={URL_PREFIX + "/compare-studies"}
element={
<CompareStudies toggleColorMode={toggleColorMode} />
}
/>
<Route
path={URL_PREFIX + "/"}
element={<StudyList toggleColorMode={toggleColorMode} />}
/>
</Routes>
</Router>
</SnackbarProvider>
</Box>
</ThemeProvider>
</RecoilRoot>
</QueryClientProvider>
</APIClientProvider>
<QueryClientProvider client={queryClient}>
<RecoilRoot>
<ThemeProvider theme={theme}>
<CssBaseline />
<Box
component="div"
sx={{
backgroundColor: colorMode === "dark" ? "#121212" : "#ffffff",
width: "100%",
minHeight: "100vh",
}}
>
<SnackbarProvider maxSnack={3}>
<Router>
<Routes>
<Route
path={URL_PREFIX + "/studies/:studyId/analytics"}
element={
<StudyDetail
toggleColorMode={toggleColorMode}
page={"analytics"}
/>
}
/>
<Route
path={URL_PREFIX + "/studies/:studyId/trials"}
element={
<StudyDetail
toggleColorMode={toggleColorMode}
page={"trialList"}
/>
}
/>
<Route
path={URL_PREFIX + "/studies/:studyId/trialTable"}
element={
<StudyDetail
toggleColorMode={toggleColorMode}
page={"trialTable"}
/>
}
/>
<Route
path={URL_PREFIX + "/studies/:studyId/note"}
element={
<StudyDetail
toggleColorMode={toggleColorMode}
page={"note"}
/>
}
/>
<Route
path={URL_PREFIX + "/studies/:studyId/graph"}
element={
<StudyDetail
toggleColorMode={toggleColorMode}
page={"graph"}
/>
}
/>
<Route
path={URL_PREFIX + "/studies/:studyId"}
element={
<StudyDetail
toggleColorMode={toggleColorMode}
page={"top"}
/>
}
/>
<Route
path={URL_PREFIX + "/studies/:studyId/preference-history"}
element={
<StudyDetail
toggleColorMode={toggleColorMode}
page={"preferenceHistory"}
/>
}
/>
<Route
path={URL_PREFIX + "/compare-studies"}
element={
<CompareStudies toggleColorMode={toggleColorMode} />
}
/>
<Route
path={URL_PREFIX + "/"}
element={<StudyList toggleColorMode={toggleColorMode} />}
/>
</Routes>
</Router>
</SnackbarProvider>
</Box>
</ThemeProvider>
</RecoilRoot>
</QueryClientProvider>
)
}
10 changes: 5 additions & 5 deletions optuna_dashboard/ts/components/CompareStudies.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,12 @@ import {
import Chip from "@mui/material/Chip"
import Divider from "@mui/material/Divider"
import FormControlLabel from "@mui/material/FormControlLabel"
import Grid from "@mui/material/Grid"
import List from "@mui/material/List"
import ListItem from "@mui/material/ListItem"
import ListItemButton from "@mui/material/ListItemButton"
import ListItemText from "@mui/material/ListItemText"
import ListSubheader from "@mui/material/ListSubheader"
import Grid2 from "@mui/material/Unstable_Grid2"
import * as Optuna from "@optuna/types"
import { useSnackbar } from "notistack"
import React, { FC, useEffect, useMemo, useState } from "react"
Expand Down Expand Up @@ -336,21 +336,21 @@ const StudiesGraph: FC<{ studies: StudySummary[] }> = ({ studies }) => {
</CardContent>
</Card>
) : null}
<Grid2 container spacing={2} sx={{ padding: theme.spacing(0, 2) }}>
<Grid container spacing={2} sx={{ padding: theme.spacing(0, 2) }}>
{showStudyDetails !== null &&
showStudyDetails.length > 0 &&
showStudyDetails.every((s) => s)
? showStudyDetails[0].directions.map((d, i) => (
<Grid2 xs={6} key={i}>
<Grid item xs={6} key={i}>
<Card>
<CardContent>
<GraphEdf studies={showStudyDetails} objectiveId={i} />
</CardContent>
</Card>
</Grid2>
</Grid>
))
: null}
</Grid2>
</Grid>
</Box>
)
}
18 changes: 9 additions & 9 deletions optuna_dashboard/ts/components/Preferential/PreferentialAnalytics.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import {
Typography,
useTheme,
} from "@mui/material"
import Grid2 from "@mui/material/Unstable_Grid2"
import Grid from "@mui/material/Grid"
import * as Optuna from "@optuna/types"
import React, { FC } from "react"
import { useStudyDetailValue, useStudySummaryValue } from "../../state"
Expand Down Expand Up @@ -41,16 +41,16 @@ export const PreferentialAnalytics: FC<{ studyId: number }> = ({ studyId }) => {
component="div"
sx={{ display: "flex", width: "100%", flexDirection: "column" }}
>
<Grid2 container spacing={2} sx={{ padding: theme.spacing(0, 2) }}>
<Grid2 xs={14}>
<Grid container spacing={2} sx={{ padding: theme.spacing(0, 2) }}>
<Grid item xs={14}>
<Paper elevation={2} sx={{ padding: theme.spacing(2) }}>
<Contour study={studyDetail} />
</Paper>
</Grid2>
<Grid2 xs={6} spacing={2}>
</Grid>
<Grid item xs={6} spacing={2}>
<BestTrialsCard studyDetail={studyDetail} />
</Grid2>
<Grid2 xs={6}>
</Grid>
<Grid item xs={6}>
<Card>
<CardContent
sx={{
Expand All @@ -70,8 +70,8 @@ export const PreferentialAnalytics: FC<{ studyId: number }> = ({ studyId }) => {
<DataGrid data={userAttrs} columns={columns} />
</CardContent>
</Card>
</Grid2>
</Grid2>
</Grid>
</Grid>
</Box>
)
}
10 changes: 5 additions & 5 deletions optuna_dashboard/ts/components/StudyDetail.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import {
Typography,
useTheme,
} from "@mui/material"
import Grid2 from "@mui/material/Unstable_Grid2"
import Grid from "@mui/material/Grid"
import React, { FC, useEffect, useMemo } from "react"
import { Link, useParams } from "react-router-dom"
import { useRecoilValue } from "recoil"
Expand Down Expand Up @@ -146,19 +146,19 @@ export const StudyDetail: FC<{
>
Empirical Distribution of the Objective Value
</Typography>
<Grid2 container spacing={2} sx={{ padding: theme.spacing(2) }}>
<Grid container spacing={2} sx={{ padding: theme.spacing(2) }}>
{studyDetail !== null
? studyDetail.directions.map((d, i) => (
<Grid2 xs={6} key={i}>
<Grid item xs={6} key={i}>
<Card>
<CardContent>
<GraphEdf studies={[studyDetail]} objectiveId={i} />
</CardContent>
</Card>
</Grid2>
</Grid>
))
: null}
</Grid2>
</Grid>
</Box>
)
} else if (page === "trialList") {
Expand Down
Loading
Loading