Modify CategoricalDistribution choices type to

optuna_dashboard/ts/components/GraphParallelCoordinate.tsx

@@ -121,7 +121,7 @@ const GraphParallelCoordinateBackend: FC<{
     }
   }, [error])
 
-  return <Box id={plotDomId} sx={{ height: "450px" }} />
+  return <Box component="div" id={plotDomId} sx={{ height: "450px" }} />
 }
 
 const GraphParallelCoordinateFrontend: FC<{
@@ -161,7 +161,7 @@ const GraphParallelCoordinateFrontend: FC<{
         {renderCheckBoxes()}
       </Grid>
       <Grid item xs={9}>
-        <Box id={plotDomId} sx={{ height: "450px" }} />
+        <Box component="div" id={plotDomId} sx={{ height: "450px" }} />
       </Grid>
     </Grid>
   )
@@ -246,7 +246,7 @@ const plotCoordinate = (
       )
       if (s.distribution.type === "CategoricalDistribution") {
         // categorical
-        const vocabArr: string[] = s.distribution.choices.map((c) => c.value)
+        const vocabArr: string[] = s.distribution.choices.map((c) => c?.toString() ?? "null")
         const tickvals: number[] = vocabArr.map((v, i) => i)
         return {
           label: breakLabelIfTooLong(s.name),

optuna_dashboard/ts/components/GraphSlice.tsx

@@ -66,7 +66,7 @@ const GraphSliceBackend: FC<{
     }
   }, [error])
 
-  return <Box id={plotDomId} sx={{ height: "450px" }} />
+  return <Box component="div" id={plotDomId} sx={{ height: "450px" }} />
 }
 
 const GraphSliceFrontend: FC<{
@@ -175,7 +175,7 @@ const GraphSliceFrontend: FC<{
         </FormControl>
       </Grid>
       <Grid item xs={9}>
-        <Box id={plotDomId} sx={{ height: "450px" }} />
+        <Box component="div" id={plotDomId} sx={{ height: "450px" }} />
       </Grid>
     </Grid>
   )
@@ -291,7 +291,7 @@ const plotSlice = (
       automargin: true, // Otherwise the label is outside of the plot
     }
   } else {
-    const vocabArr = selectedParamSpace.distribution.choices.map((c) => c.value)
+    const vocabArr = selectedParamSpace.distribution.choices.map((c) => c?.toString() ?? "null")
     const tickvals: number[] = vocabArr.map((v, i) => i)
     layout["xaxis"] = {
       title: selectedParamTarget.toLabel(),

optuna_dashboard/ts/components/TrialTable.tsx

@@ -91,7 +91,7 @@ export const TrialTable: FC<{
     const sortable = s.distribution.type !== "CategoricalDistribution"
     const filterChoices: (string | null)[] | undefined =
       s.distribution.type === "CategoricalDistribution"
-        ? s.distribution.choices.map((c) => c.value)
+        ? s.distribution.choices.map((c) => c?.toString() ?? "null")
         : undefined
     const hasMissingValue = trials.some(
       (t) => !t.params.some((p) => p.name === s.name)

optuna_dashboard/ts/graphUtil.ts

@@ -42,7 +42,7 @@ const getAxisInfoForCategoricalParams = (
   )
 
   const indices = distribution.choices
-    .map((c) => c.value)
+    .map((c) => c?.toString() ?? "null")
     .sort((a, b) =>
       a.toLowerCase() < b.toLowerCase()
         ? -1

optuna_dashboard/ts/types/index.d.ts

@@ -28,9 +28,11 @@ type IntDistribution = {
   log: boolean
 }
 
+type CategoricalChoiceType = null | boolean | number | string
+
 type CategoricalDistribution = {
   type: "CategoricalDistribution"
-  choices: { pytype: string; value: string }[]
+  choices: CategoricalChoiceType[]
 }
 
 type Distribution =