Fix a contour plot visualization issue with categorical parameters

optuna_dashboard/ts/graphUtil.ts

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

tslib/react/src/components/PlotTimeline.tsx

@@ -2,7 +2,7 @@ import { Card, CardContent, Grid, Typography, useTheme } from "@mui/material"
 import * as Optuna from "@optuna/types"
 import * as plotly from "plotly.js-dist-min"
 import { FC, useEffect } from "react"
-import { makeHovertext } from "../utils/graphUtil"
+import { makeHovertext } from "../utils/graph"
 import { plotlyDarkTemplate } from "./PlotlyDarkMode"
 
 const plotDomId = "graph-timeline"

tslib/react/src/utils/graph.ts

@@ -5,15 +5,12 @@ export const makeHovertext = (trial: Optuna.Trial): string => {
     {
       number: trial.number,
       values: trial.values,
-      params: trial.params
-        .map((p) => [p.name, p.param_external_value])
-        .reduce(
-          (obj, [key, value]) => {
-            obj[key as string] = value
-            return obj
-          },
-          {} as Record<string, Optuna.CategoricalChoiceType>
-        ),
+      params: trial.params.reduce<{
+        [key: string]: string
+      }>((obj, p) => {
+        obj[p.name] = p.param_external_value
+        return obj
+      }, {}),
     },
     undefined,
     "  "

tslib/storage/src/sqlite.ts

@@ -330,14 +330,14 @@ const getTrialParams = (
 const paramInternalValueToExternalValue = (
   distribution: Optuna.Distribution,
   internalValue: number
-): Optuna.CategoricalChoiceType => {
+) => {
   if (distribution.type === "FloatDistribution") {
     return internalValue.toString()
   }
   if (distribution.type === "IntDistribution") {
     return internalValue.toString()
   }
-  return distribution.choices[internalValue]
+  return distribution.choices[internalValue].value
 }
 
 const parseDistributionJSON = (t: string): Optuna.Distribution => {

tslib/types/src/index.ts

@@ -18,7 +18,10 @@ export type IntDistribution = {
   log: boolean
 }
 
-export type CategoricalChoiceType = null | boolean | number | string
+export type CategoricalChoiceType = {
+  pytype: string
+  value: string
+}
 
 export type CategoricalDistribution = {
   type: "CategoricalDistribution"
@@ -80,7 +83,7 @@ export type Trial = {
 export type TrialParam = {
   name: string
   param_internal_value: number
-  param_external_value: CategoricalChoiceType
+  param_external_value: string
   param_external_type: string
   distribution: Distribution
 }