Remove exports of getPlotDomId functions

keisuke-umezawa · Jun 26, 2024 · a2ef1ca · a2ef1ca
1 parent b1dcb22
commit a2ef1ca
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 21 deletions.
diff --git 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,14 +17,15 @@ export const GraphEdf: FC<{
   }
 }
 
+const domId = "graph-edf"
+
 const GraphEdfBackend: FC<{
   studies: StudyDetail[]
 }> = ({ studies }) => {
   const { apiClient } = useAPIClient()
   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
@@ -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 (
     <GraphContainer
-      plotDomId={getPlotSliceDomId()}
+      plotDomId={domId}
       graphComponentState={graphComponentState}
     />
   )

diff --git 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<Target>(
     () => new Target("objective", objectiveId),
     [objectiveId]

diff --git a/tslib/react/src/components/PlotSlice.tsx b/tslib/react/src/components/PlotSlice.tsx
@@ -23,15 +23,15 @@ 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
   }
   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<{
       </Grid>
       <Grid item xs={9}>
         <GraphContainer
-          plotDomId={getPlotSliceDomId()}
+          plotDomId={domId}
           graphComponentState={graphComponentState}
         />
       </Grid>
@@ -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
@@ -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"