diff --git a/optuna_dashboard/ts/components/GraphEdf.tsx b/optuna_dashboard/ts/components/GraphEdf.tsx
index 30de9868..234b2e6f 100644
--- a/optuna_dashboard/ts/components/GraphEdf.tsx
+++ b/optuna_dashboard/ts/components/GraphEdf.tsx
@@ -1,9 +1,4 @@
-import {
- GraphContainer,
- PlotEdf,
- getPlotEdfDomId,
- useGraphComponentState,
-} from "@optuna/react"
+import { GraphContainer, PlotEdf, useGraphComponentState } from "@optuna/react"
import * as plotly from "plotly.js-dist-min"
import React, { FC, useEffect } from "react"
import { StudyDetail } from "ts/types/optuna"
@@ -22,6 +17,8 @@ export const GraphEdf: FC<{
}
}
+const domId = "graph-edf"
+
const GraphEdfBackend: FC<{
studies: StudyDetail[]
}> = ({ studies }) => {
@@ -29,7 +26,6 @@ const GraphEdfBackend: FC<{
const { graphComponentState, notifyGraphDidRender } = useGraphComponentState()
const studyIds = studies.map((s) => s.id)
- const domId = getPlotEdfDomId(-1)
const numCompletedTrials = studies.reduce(
(acc, study) =>
acc + study?.trials.filter((t) => t.state === "Complete").length,
diff --git a/optuna_dashboard/ts/components/GraphSlice.tsx b/optuna_dashboard/ts/components/GraphSlice.tsx
index ecac2283..d758c661 100644
--- a/optuna_dashboard/ts/components/GraphSlice.tsx
+++ b/optuna_dashboard/ts/components/GraphSlice.tsx
@@ -1,7 +1,6 @@
import {
GraphContainer,
PlotSlice,
- getPlotSliceDomId,
useGraphComponentState,
} from "@optuna/react"
import * as plotly from "plotly.js-dist-min"
@@ -21,6 +20,8 @@ export const GraphSlice: FC<{
}
}
+const domId = "graph-slice"
+
const GraphSliceBackend: FC<{
study: StudyDetail | null
}> = ({ study = null }) => {
@@ -38,7 +39,7 @@ const GraphSliceBackend: FC<{
useEffect(() => {
if (data && layout && graphComponentState !== "componentWillMount") {
- plotly.react(getPlotSliceDomId(), data, layout).then(notifyGraphDidRender)
+ plotly.react(domId, data, layout).then(notifyGraphDidRender)
}
}, [data, layout, graphComponentState])
useEffect(() => {
@@ -49,7 +50,7 @@ const GraphSliceBackend: FC<{
return (
)
diff --git a/tslib/react/src/components/PlotEdf.tsx b/tslib/react/src/components/PlotEdf.tsx
index d4dce2cb..56dce17e 100644
--- a/tslib/react/src/components/PlotEdf.tsx
+++ b/tslib/react/src/components/PlotEdf.tsx
@@ -12,8 +12,7 @@ export type EdfPlotInfo = {
trials: Optuna.Trial[]
}
-export const getPlotEdfDomId = (objectiveId: number) =>
- `graph-edf-${objectiveId}`
+const getPlotDomId = (objectiveId: number) => `plot-edf-${objectiveId}`
export const PlotEdf: FC<{
studies: Optuna.Study[]
@@ -23,7 +22,7 @@ export const PlotEdf: FC<{
const theme = useTheme()
- const domId = getPlotEdfDomId(objectiveId)
+ const domId = getPlotDomId(objectiveId)
const target = useMemo(
() => new Target("objective", objectiveId),
[objectiveId]
diff --git a/tslib/react/src/components/PlotSlice.tsx b/tslib/react/src/components/PlotSlice.tsx
index 40cf95bf..3a70c5e8 100644
--- a/tslib/react/src/components/PlotSlice.tsx
+++ b/tslib/react/src/components/PlotSlice.tsx
@@ -23,8 +23,6 @@ import {
import { GraphContainer } from "./GraphContainer"
import { plotlyDarkTemplate } from "./PlotlyDarkMode"
-export const getPlotSliceDomId = () => "graph-slice"
-
const isLogScale = (s: Optuna.SearchSpaceItem): boolean => {
if (s.distribution.type === "CategoricalDistribution") {
return false
@@ -32,6 +30,8 @@ const isLogScale = (s: Optuna.SearchSpaceItem): boolean => {
return s.distribution.log
}
+const domId = "plot-slice"
+
export const PlotSlice: FC<{
study: Optuna.Study | null
}> = ({ study = null }) => {
@@ -146,7 +146,7 @@ export const PlotSlice: FC<{
@@ -162,7 +162,7 @@ const plotSlice = (
logYScale: boolean,
mode: string
) => {
- if (document.getElementById(getPlotSliceDomId()) === null) {
+ if (document.getElementById(domId) === null) {
return
}
@@ -197,7 +197,7 @@ const plotSlice = (
selectedParamTarget === null ||
trials.length === 0
) {
- return plotly.react(getPlotSliceDomId(), [], layout)
+ return plotly.react(domId, [], layout)
}
const feasibleTrials: Optuna.Trial[] = []
@@ -277,5 +277,5 @@ const plotSlice = (
automargin: true, // Otherwise the label is outside of the plot
}
}
- return plotly.react(getPlotSliceDomId(), trace, layout)
+ return plotly.react(domId, trace, layout)
}
diff --git a/tslib/react/src/index.ts b/tslib/react/src/index.ts
index 2b24e6a9..71518938 100644
--- a/tslib/react/src/index.ts
+++ b/tslib/react/src/index.ts
@@ -1,11 +1,11 @@
export { DataGrid } from "./components/DataGrid"
export { plotlyDarkTemplate } from "./components/PlotlyDarkMode"
-export { PlotEdf, getPlotEdfDomId } from "./components/PlotEdf"
+export { PlotEdf } from "./components/PlotEdf"
export type { EdfPlotInfo } from "./components/PlotEdf"
export { PlotHistory } from "./components/PlotHistory"
export { PlotImportance } from "./components/PlotImportance"
export { PlotIntermediateValues } from "./components/PlotIntermediateValues"
-export { PlotSlice, getPlotSliceDomId } from "./components/PlotSlice"
+export { PlotSlice } from "./components/PlotSlice"
export { TrialTable } from "./components/TrialTable"
export { GraphContainer } from "./components/GraphContainer"
export { useGraphComponentState } from "./hooks/useGraphComponentState"