Skip to content

Commit

Permalink
Merge pull request #801 from porink0424/fix/recoil-to-reactquery
Browse files Browse the repository at this point in the history 
Partially replace recoil with react-query
  • Loading branch information
@c-bata
c-bata authored Feb 9, 2024
2 parents bf2e6f1 + 3880129 commit 8124ca5
Show file tree
Hide file tree
Showing 13 changed files with 300 additions and 191 deletions.
30 changes: 0 additions & 30 deletions optuna_dashboard/ts/action.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import { useSnackbar } from "notistack"
import {
getStudyDetailAPI,
getStudySummariesAPI,
getParamImportances,
createNewStudyAPI,
deleteStudyAPI,
saveStudyNoteAPI,
Expand All @@ -25,7 +24,6 @@ import {
import {
studyDetailsState,
studySummariesState,
paramImportanceState,
isFileUploading,
artifactIsAvailable,
plotlypyIsAvailableState,
Expand All @@ -43,8 +41,6 @@ export const actionCreator = () => {
const [studyDetails, setStudyDetails] =
useRecoilState<StudyDetails>(studyDetailsState)
const setReloadInterval = useSetRecoilState<number>(reloadIntervalState)
const [paramImportance, setParamImportance] =
useRecoilState<StudyParamImportance>(paramImportanceState)
const setUploading = useSetRecoilState<boolean>(isFileUploading)
const setTrialsUpdating = useSetRecoilState(trialsUpdatingState)
const setArtifactIsAvailable = useSetRecoilState<boolean>(artifactIsAvailable)
Expand Down Expand Up @@ -207,15 +203,6 @@ export const actionCreator = () => {
setStudyDetailState(studyId, newStudy)
}

const setStudyParamImportanceState = (
studyId: number,
importance: ParamImportance[][]
) => {
const newVal = Object.assign({}, paramImportance)
newVal[studyId] = importance
setParamImportance(newVal)
}

const updateAPIMeta = () => {
getMetaInfoAPI().then((r) => {
setArtifactIsAvailable(r.artifact_is_available)
Expand Down Expand Up @@ -273,22 +260,6 @@ export const actionCreator = () => {
})
}

const updateParamImportance = (studyId: number) => {
getParamImportances(studyId)
.then((importance) => {
setStudyParamImportanceState(studyId, importance)
})
.catch((err) => {
const reason = err.response?.data.reason
enqueueSnackbar(
`Failed to load hyperparameter importance (reason=${reason})`,
{
variant: "error",
}
)
})
}

const createNewStudy = (studyName: string, directions: StudyDirection[]) => {
createNewStudyAPI(studyName, directions)
.then((study_summary) => {
Expand Down Expand Up @@ -714,7 +685,6 @@ export const actionCreator = () => {
updateAPIMeta,
updateStudyDetail,
updateStudySummaries,
updateParamImportance,
createNewStudy,
deleteStudy,
renameStudy,
Expand Down
196 changes: 106 additions & 90 deletions optuna_dashboard/ts/components/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,18 @@ import {
import { CompareStudies } from "./CompareStudies"
import { StudyDetail } from "./StudyDetail"
import { StudyList } from "./StudyList"
import { QueryClient, QueryClientProvider } from "@tanstack/react-query"

const queryClient = new QueryClient({
defaultOptions: {
queries: {
retry: false,
refetchOnMount: false,
refetchOnReconnect: false,
refetchOnWindowFocus: false,
},
},
})

export const App: FC = () => {
const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)")
Expand All @@ -38,95 +50,99 @@ export const App: FC = () => {
}

return (
<RecoilRoot>
<ThemeProvider theme={theme}>
<CssBaseline />
<Box
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 client={queryClient}>
<RecoilRoot>
<ThemeProvider theme={theme}>
<CssBaseline />
<Box
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>
)
}
28 changes: 17 additions & 11 deletions optuna_dashboard/ts/components/GraphContour.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,9 @@ import blue from "@mui/material/colors/blue"
import { useMergedUnionSearchSpace } from "../searchSpace"
import { usePlotlyColorTheme } from "../state"
import { getAxisInfo } from "../graphUtil"
import { getPlotAPI, PlotType } from "../apiClient"
import { PlotType } from "../apiClient"
import { useBackendRender } from "../state"
import { usePlot } from "../hooks/usePlot"

const plotDomId = "graph-contour"

Expand All @@ -36,18 +37,23 @@ const ContourBackend: FC<{
const studyId = study?.id
const numCompletedTrials =
study?.trials.filter((t) => t.state === "Complete").length || 0
const { data, layout, error } = usePlot({
numCompletedTrials,
studyId,
plotType: PlotType.Contour,
})

useEffect(() => {
if (studyId === undefined) {
return
if (data && layout) {
plotly.react(plotDomId, data, layout)
}
getPlotAPI(studyId, PlotType.Contour)
.then(({ data, layout }) => {
plotly.react(plotDomId, data, layout)
})
.catch((err) => {
console.error(err)
})
}, [studyId, numCompletedTrials])
}, [data, layout])
useEffect(() => {
if (error) {
console.error(error)
}
}, [error])

return <Box id={plotDomId} sx={{ height: "450px" }} />
}

Expand Down
17 changes: 7 additions & 10 deletions optuna_dashboard/ts/components/GraphHyperparameterImportances.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,8 @@ import * as plotly from "plotly.js-dist-min"
import React, { FC, useEffect } from "react"
import { Typography, useTheme, Box, Card, CardContent } from "@mui/material"

import { actionCreator } from "../action"
import { useParamImportanceValue, useStudyDirections } from "../state"
import { usePlotlyColorTheme } from "../state"
import { useParamImportance } from "../hooks/useParamImportance"
import { useStudyDirections, usePlotlyColorTheme } from "../state"

const plotDomId = "graph-hyperparameter-importances"

Expand All @@ -16,22 +15,20 @@ export const GraphHyperparameterImportance: FC<{
const theme = useTheme()
const colorTheme = usePlotlyColorTheme(theme.palette.mode)

const action = actionCreator()
const importances = useParamImportanceValue(studyId)
const numCompletedTrials =
study?.trials.filter((t) => t.state === "Complete").length || 0
const { importances } = useParamImportance({
numCompletedTrials,
studyId,
})
const nObjectives = useStudyDirections(studyId)?.length
const objectiveNames: string[] =
study?.objective_names ||
study?.directions.map((d, i) => `Objective ${i}`) ||
[]

useEffect(() => {
action.updateParamImportance(studyId)
}, [numCompletedTrials])

useEffect(() => {
if (importances !== null && nObjectives === importances.length) {
if (importances !== undefined && nObjectives === importances.length) {
plotParamImportance(importances, objectiveNames, colorTheme)
}
}, [nObjectives, importances, colorTheme])
Expand Down
Loading

0 comments on commit 8124ca5

Please sign in to comment.