Use useConstants to get URL_PREFIX

This commit is contained in:
porink0424
2024-08-07 15:02:22 +09:00
parent c6919f2608
commit cdd528294b
11 changed files with 91 additions and 45 deletions
+35 -35
View File
@@ -281,21 +281,21 @@ __metadata:
linkType: hard
"@floating-ui/core@npm:^1.6.0":
version: 1.6.5
resolution: "@floating-ui/core@npm:1.6.5"
version: 1.6.6
resolution: "@floating-ui/core@npm:1.6.6"
dependencies:
"@floating-ui/utils": ^0.2.5
checksum: 8e6c62a6e9223fba9afbcaca8afe408788a2bc8ab1b2f5734a26d5b02d4017a2baffc7176a938a610fd243e6a983ada605f259b35c88813e2230dd29906a78fd
"@floating-ui/utils": ^0.2.6
checksum: 3992e93f40655798bff7a721258cd9f2ad4d98eca9e29ecbf3dc79154a191f47fbab3d86777fecc08e83fdc64a9f390a5256f3cf10543db87f177863770ddeeb
languageName: node
linkType: hard
"@floating-ui/dom@npm:^1.0.0":
version: 1.6.8
resolution: "@floating-ui/dom@npm:1.6.8"
version: 1.6.9
resolution: "@floating-ui/dom@npm:1.6.9"
dependencies:
"@floating-ui/core": ^1.6.0
"@floating-ui/utils": ^0.2.5
checksum: bab6954bdde69afeaf8dbbf335818fe710c6eae1c62856ae1e09fa6abdc056bf5995e053638b76fa6661b8384c363ca2af874ab0448c3f6943808f4f8f77f3ea
"@floating-ui/utils": ^0.2.6
checksum: a440cd5057616835d3e4a0e3143d500486d11021ace699b3154033c09a88c4db721b6cbd25f922c8c77fa3956f22b7c801ae0495f9fd9b54f8d91356f231c9d1
languageName: node
linkType: hard
@@ -311,10 +311,10 @@ __metadata:
languageName: node
linkType: hard
"@floating-ui/utils@npm:^0.2.5":
version: 0.2.5
resolution: "@floating-ui/utils@npm:0.2.5"
checksum: 32834fe0fec5ee89187f8defd0b10813d725dab7dc6ed1545ded6655630bac5d438f0c991d019d675585e118846f12391236fc2886a5c73a57576e7de3eca3f9
"@floating-ui/utils@npm:^0.2.6":
version: 0.2.6
resolution: "@floating-ui/utils@npm:0.2.6"
checksum: 4350edad705f69f944f853d95b2832fbf3d6ff2347276526198040ddec03a7e4afae0b5863d50373275dd319ae648c8070fd528405a1a10a1620277534846792
languageName: node
linkType: hard
@@ -1805,20 +1805,20 @@ __metadata:
linkType: hard
"@types/node@npm:*":
version: 22.0.2
resolution: "@types/node@npm:22.0.2"
version: 22.1.0
resolution: "@types/node@npm:22.1.0"
dependencies:
undici-types: ~6.11.1
checksum: a83d7e9c81ddc5e58050b61413e871e68468f127367172fa4c14ba3182f8548be59e045096619a4742d665c38790d9843b71664ec61c0ec4ba59c771a739eded
undici-types: ~6.13.0
checksum: 3544c35da06009790a2e07742a7dfa0ac0f0d64ec47d9e6d3edf0ff6dcfc1a7cc2efdc5e524e80f8ed80aa37154513b2c1c724f95146ff89fc5aefb8e33575f2
languageName: node
linkType: hard
"@types/node@npm:^18.19.42":
version: 18.19.42
resolution: "@types/node@npm:18.19.42"
version: 18.19.43
resolution: "@types/node@npm:18.19.43"
dependencies:
undici-types: ~5.26.4
checksum: 3f976583d3f4ff6040187f98e838337d59134e53bfe1cf241d8143e87e6f9507a1ad0aa435ea550c21d76c6cabb78f63a410413de476764f45695378cc022377
checksum: 5eb9045aae6da86e8ad297381f93d29d2e7fcd4ed0c53670d9dff1e7b714920f8bbe5ee456289c19fc69c510ac197bdbacc7a785eaeba0afb9cb5d634a64bcd3
languageName: node
linkType: hard
@@ -2500,9 +2500,9 @@ __metadata:
linkType: hard
"caniuse-lite@npm:^1.0.30001646":
version: 1.0.30001646
resolution: "caniuse-lite@npm:1.0.30001646"
checksum: 53d45b990d21036aaab7547e164174a0ac9a117acdd14a6c33822c4983e2671b1df48686d5383002d0ef158b208b0047a7dc404312a6229bf8ee629de3351b44
version: 1.0.30001649
resolution: "caniuse-lite@npm:1.0.30001649"
checksum: 7952512a243f22c942e0e99249def19d781ad1900db101f2d8de9d83de37db000a7dc7f226c9c99134001975e22852becf1677539c24c7ecae53467b681c400f
languageName: node
linkType: hard
@@ -3232,9 +3232,9 @@ __metadata:
linkType: hard
"electron-to-chromium@npm:^1.5.4":
version: 1.5.4
resolution: "electron-to-chromium@npm:1.5.4"
checksum: 352f13c043cb185b464efe20f9b0a1adea2b1a7dad56e41dac995d0ad060f9981e479d632ebc73a1dce3bd5c36bbceeffe0667161ce296c2488fbb95f89bc793
version: 1.5.5
resolution: "electron-to-chromium@npm:1.5.5"
checksum: fcdd2797ece1ece6764b88b5fc36cfc6a571e08b832c6777d8bbefa19cae22a36614411aacc5687d9fea7e1db86469f53c3952ca2579c5fe705dea7ed270d8cc
languageName: node
linkType: hard
@@ -4751,15 +4751,15 @@ __metadata:
linkType: hard
"lib0@npm:^0.2.85, lib0@npm:^0.2.86":
version: 0.2.95
resolution: "lib0@npm:0.2.95"
version: 0.2.96
resolution: "lib0@npm:0.2.96"
dependencies:
isomorphic.js: ^0.2.4
bin:
0ecdsa-generate-keypair: bin/0ecdsa-generate-keypair.js
0gentesthtml: bin/gentesthtml.js
0serve: bin/0serve.js
checksum: 7a97848728e3197478b9ba0bc30c00bba480d063c27cff1aba11ab516965cc71397ab63e7a9555108801bd6f4298f7e5d859a5221848d0300d42a9f8c47d8205
checksum: 3e9c873f8317fca7611145e43da2408834a4236a75d248b09a4279f51869c83104a473ce572363e2cdb77eec3d25db955deef98a1edf5df10a87913feaa0208b
languageName: node
linkType: hard
@@ -6501,13 +6501,13 @@ __metadata:
linkType: hard
"postcss@npm:^8.3.11, postcss@npm:^8.4.33":
version: 8.4.40
resolution: "postcss@npm:8.4.40"
version: 8.4.41
resolution: "postcss@npm:8.4.41"
dependencies:
nanoid: ^3.3.7
picocolors: ^1.0.1
source-map-js: ^1.2.0
checksum: afd0cc49d2169dcd96c0f17e155c5d75de048956306a3017f1cfa6a7d66b941592245bed20f7796ceeccb2d8967749b623be2c7b010a74f67ea10fb5bdb8ba28
checksum: f865894929eb0f7fc2263811cc853c13b1c75103028b3f4f26df777e27b201f1abe21cb4aa4c2e901c80a04f6fb325ee22979688fe55a70e2ea82b0a517d3b6f
languageName: node
linkType: hard
@@ -7847,10 +7847,10 @@ __metadata:
languageName: node
linkType: hard
"undici-types@npm:~6.11.1":
version: 6.11.1
resolution: "undici-types@npm:6.11.1"
checksum: d7fc11bded93bc55ef3b88464e856ab061a747cf50ef2eff5df5ba3be18b9fcafe60e1b36a8c99e28aac2eade12891d32a504f2a32422452c44662e598e3b188
"undici-types@npm:~6.13.0":
version: 6.13.0
resolution: "undici-types@npm:6.13.0"
checksum: 9d0ef6bf58994bebbea6a4ab75f381c69a89a7ed151bfbae0d4ef95450d56502c9eccb323abf17b7d099c1d9c1cbae62e909e4dfeb8d204612d2f1fdada24707
languageName: node
linkType: hard
+4 -1
View File
@@ -8,11 +8,12 @@ import {
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 React, { useMemo, useState, useEffect, FC } from "react"
import { BrowserRouter as Router, Route, Routes } from "react-router-dom"
import { RecoilRoot } from "recoil"
import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
import { useConstants } from "../constantsProvider"
import { CompareStudies } from "./CompareStudies"
import { StudyDetail } from "./StudyDetail"
import { StudyList } from "./StudyList"
@@ -49,6 +50,8 @@ export const App: FC = () => {
setColorMode(colorMode === "dark" ? "light" : "dark")
}
const { URL_PREFIX } = useConstants()
return (
<QueryClientProvider client={queryClient}>
<RecoilRoot>
@@ -41,6 +41,7 @@ import QueryStatsIcon from "@mui/icons-material/QueryStats"
import ThumbUpAltIcon from "@mui/icons-material/ThumbUpAlt"
import { Switch } from "@mui/material"
import { actionCreator } from "../action"
import { useConstants } from "../constantsProvider"
const drawerWidth = 240
@@ -129,6 +130,8 @@ export const AppDrawer: FC<{
toolbar: React.ReactNode
children?: React.ReactNode
}> = ({ studyId, toggleColorMode, page, toolbar, children }) => {
const { URL_PREFIX } = useConstants()
const theme = useTheme()
const action = actionCreator()
const [open, setOpen] = useRecoilState<boolean>(drawerOpenState)
@@ -15,6 +15,7 @@ import {
import React, { FC, ReactNode, useMemo } from "react"
import { Link } from "react-router-dom"
import { StudyDetail, Trial } from "ts/types/optuna"
import { useConstants } from "../constantsProvider"
const useBestTrials = (studyDetail: StudyDetail | null): Trial[] => {
return useMemo(() => studyDetail?.best_trials || [], [studyDetail])
@@ -23,6 +24,8 @@ const useBestTrials = (studyDetail: StudyDetail | null): Trial[] => {
export const BestTrialsCard: FC<{
studyDetail: StudyDetail | null
}> = ({ studyDetail }) => {
const { URL_PREFIX } = useConstants()
const theme = useTheme()
const bestTrials = useBestTrials(studyDetail)
@@ -28,6 +28,7 @@ import { useRecoilValue } from "recoil"
import { useNavigate } from "react-router-dom"
import { StudyDetails, StudySummary } from "ts/types/optuna"
import { actionCreator } from "../action"
import { useConstants } from "../constantsProvider"
import { studyDetailsState, studySummariesState } from "../state"
import { useQuery } from "../urlQuery"
import { AppDrawer } from "./AppDrawer"
@@ -51,7 +52,7 @@ const useQueriedStudies = (
}, [studies, query])
}
const getStudyListLink = (ids: number[]): string => {
const getStudyListLink = (ids: number[], URL_PREFIX: string): string => {
const base = URL_PREFIX + "/compare-studies"
if (ids.length > 0) {
return base + "?ids=" + ids.map((n) => n.toString()).join(",")
@@ -75,6 +76,8 @@ const isEqualDirections = (
export const CompareStudies: FC<{
toggleColorMode: () => void
}> = ({ toggleColorMode }) => {
const { URL_PREFIX } = useConstants()
const { enqueueSnackbar } = useSnackbar()
const theme = useTheme()
const query = useQuery()
@@ -186,9 +189,11 @@ export const CompareStudies: FC<{
next = [...selectedIds, study.study_id]
}
}
navigate(getStudyListLink(next))
navigate(getStudyListLink(next, URL_PREFIX))
} else {
navigate(getStudyListLink([study.study_id]))
navigate(
getStudyListLink([study.study_id], URL_PREFIX)
)
}
}}
selected={
@@ -23,6 +23,7 @@ import * as plotly from "plotly.js-dist-min"
import React, { ChangeEvent, FC, useEffect, useState } from "react"
import { useNavigate } from "react-router-dom"
import { StudyDetail } from "ts/types/optuna"
import { useConstants } from "../constantsProvider"
import { usePlotlyColorTheme } from "../state"
const plotDomId = "graph-history"
@@ -39,6 +40,8 @@ export const GraphHistory: FC<{
logScale: boolean
includePruned: boolean
}> = ({ studies, logScale, includePruned }) => {
const { URL_PREFIX } = useConstants()
const theme = useTheme()
const colorTheme = usePlotlyColorTheme(theme.palette.mode)
const navigate = useNavigate()
@@ -15,6 +15,7 @@ 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 { useConstants } from "../constantsProvider"
import { makeHovertext } from "../graphUtil"
import { usePlot } from "../hooks/usePlot"
import { usePlotlyColorTheme } from "../state"
@@ -61,6 +62,8 @@ const GraphParetoFrontBackend: FC<{
const GraphParetoFrontFrontend: FC<{
study: StudyDetail | null
}> = ({ study = null }) => {
const { URL_PREFIX } = useConstants()
const theme = useTheme()
const colorTheme = usePlotlyColorTheme(theme.palette.mode)
const navigate = useNavigate()
@@ -14,6 +14,7 @@ import { Link, useParams } from "react-router-dom"
import { useRecoilValue } from "recoil"
import { actionCreator } from "../action"
import { useConstants } from "../constantsProvider"
import {
reloadIntervalState,
useStudyDetailValue,
@@ -49,6 +50,8 @@ export const StudyDetail: FC<{
toggleColorMode: () => void
page: PageId
}> = ({ toggleColorMode, page }) => {
const { URL_PREFIX } = useConstants()
const theme = useTheme()
const action = actionCreator()
const studyId = useURLVars()
@@ -34,6 +34,7 @@ import { useRecoilValue } from "recoil"
import { styled } from "@mui/system"
import { StudySummary } from "ts/types/optuna"
import { actionCreator } from "../action"
import { useConstants } from "../constantsProvider"
import { studySummariesLoadingState, studySummariesState } from "../state"
import { useQuery } from "../urlQuery"
import { AppDrawer } from "./AppDrawer"
@@ -44,6 +45,8 @@ import { useRenameStudyDialog } from "./RenameStudyDialog"
export const StudyList: FC<{
toggleColorMode: () => void
}> = ({ toggleColorMode }) => {
const { URL_PREFIX } = useConstants()
const theme = useTheme()
const action = actionCreator()
+23 -6
View File
@@ -27,6 +27,7 @@ import { useNavigate } from "react-router-dom"
import { useRecoilValue } from "recoil"
import { FormWidgets, StudyDetail, Trial } from "ts/types/optuna"
import { actionCreator } from "../action"
import { useConstants } from "../constantsProvider"
import { artifactIsAvailable } from "../state"
import { useQuery } from "../urlQuery"
import { TrialArtifactCards } from "./Artifact/TrialArtifactCards"
@@ -312,7 +313,8 @@ export const TrialListDetail: FC<{
const getTrialListLink = (
studyId: number,
exclude: Optuna.TrialState[],
numbers: number[]
numbers: number[],
URL_PREFIX: string
): string => {
const base = URL_PREFIX + `/studies/${studyId}/trials`
if (exclude.length > 0 && numbers.length > 0) {
@@ -333,6 +335,8 @@ const getTrialListLink = (
export const TrialList: FC<{ studyDetail: StudyDetail | null }> = ({
studyDetail,
}) => {
const { URL_PREFIX } = useConstants()
const theme = useTheme()
const query = useQuery()
const navigate = useNavigate()
@@ -417,7 +421,12 @@ export const TrialList: FC<{ studyDetail: StudyDetail | null }> = ({
}
const numbers = selected.map((t) => t.number)
navigate(
getTrialListLink(studyDetail.id, excludedStates, numbers)
getTrialListLink(
studyDetail.id,
excludedStates,
numbers,
URL_PREFIX
)
)
}}
disabled={trialCounts[i] === 0}
@@ -476,13 +485,21 @@ export const TrialList: FC<{ studyDetail: StudyDetail | null }> = ({
next = [...selectedNumbers, trial.number]
}
navigate(
getTrialListLink(trial.study_id, excludedStates, next)
getTrialListLink(
trial.study_id,
excludedStates,
next,
URL_PREFIX
)
)
} else {
navigate(
getTrialListLink(trial.study_id, excludedStates, [
trial.number,
])
getTrialListLink(
trial.study_id,
excludedStates,
[trial.number],
URL_PREFIX
)
)
}
}}
@@ -14,6 +14,7 @@ import {
Row,
createColumnHelper,
} from "@tanstack/react-table"
import { useConstants } from "../constantsProvider"
const multiValueFilter: FilterFn<Trial> = <D extends object>(
row: Row<D>,
@@ -27,6 +28,8 @@ const multiValueFilter: FilterFn<Trial> = <D extends object>(
export const TrialTable: FC<{
studyDetail: StudyDetail | null
}> = ({ studyDetail }) => {
const { URL_PREFIX } = useConstants()
const theme = useTheme()
const trials: Trial[] = studyDetail !== null ? studyDetail.trials : []
const objectiveNames: string[] = studyDetail?.objective_names || []