Align pram importance graph between optuna and optuna-dashboard

[keisuke-umezawa]

Contributor License Agreement

This repository (optuna-dashboard) and Goptuna share common code. This pull request may therefore be ported to Goptuna. Make sure that you understand the consequences concerning licenses and check the box below if you accept the term before creating this pull request.

• [x] I agree this patch may be ported to Goptuna by other Goptuna contributors.

Reference Issues/PRs

None

What does this implement/fix? Explain your changes.

Currently, there are some differences between optuna and optuna-dashboard about plotting optimization history as follows:

Target (optuna)	Master (optuna-dashboard)	PR (optuna-dashboard)

• Target (optuna)

[
   {
      "cliponaxis":false,
      "hovertemplate":[
         "x3 (CategoricalDistribution): ""0.0617826526803802<extra></extra>",
         "x2 (FloatDistribution): ""0.11185791086371703<extra></extra>",
         "x1 (FloatDistribution): ""0.8263594364559026<extra></extra>"
      ],
      "marker":{
         "color":"rgb(66,146,198)"
      },
      "orientation":"h",
      "text":[
         "0.06",
         "0.11",
         "0.83"
      ],
      "textposition":"outside",
      "type":"bar",
      "x":[
         0.0617826526803802,
         0.11185791086371703,
         0.8263594364559026
      ],
      "y":[
         "x3",
         "x2",
         "x1"
      ]
   }
]

• Master (optuna-dashboard)

[
   {
      "type":"bar",
      "orientation":"h",
      "x":[
         0.06173663495282462,
         0.06634805042817175,
         0.8719153146190036
      ],
      "y":[
         "x2",
         "x3",
         "x1"
      ],
      "text":[
         "0.06",
         "0.07",
         "0.87"
      ],
      "textposition":"outside",
      "hovertemplate":[
         "x2 (FloatDistribution): 0.06173663495282462 <extra></extra>",
         "x3 (CategoricalDistribution): 0.06634805042817175 <extra></extra>",
         "x1 (FloatDistribution): 0.8719153146190036 <extra></extra>"
      ],
      "marker":{
         "color":[
            "rgb(8,48,107)",
            "rgb(66,146,198)",
            "rgb(8,48,107)"
         ]
      }
   }
]

• PR (optuna-dashboard)

By this PR, I removed the differences.

Script

import pprint

import optuna
from optuna_dashboard import wsgi


def main():
    storage = optuna.storages.InMemoryStorage()
    sampler = optuna.samplers.RandomSampler(seed=1)
    study = optuna.create_study(study_name="single-objective", storage=storage, sampler=sampler)

    def objective_single(trial: optuna.Trial) -> float:
        x1 = trial.suggest_float("x1", 0, 10)
        x2 = trial.suggest_float("x2", 0, 10)
        x3 = trial.suggest_categorical("x3", ["foo", "bar"])
        return (x1 - 2) ** 2 + (x2 - 5) ** 2

    study.optimize(objective_single, n_trials=10)

    fig = optuna.visualization.plot_param_importances(study)
    fig.update_layout(
        width=800,
        height=600,
        margin={"l": 10, "r": 10},
    )
    print("")
    print("Data")
    pprint.pprint(fig._data)
    print("")
    print("Layout")
    pprint.pprint(fig._layout)
    fig.write_image("plot.png")

    app = wsgi(storage)
    app.run(port=8080)


if __name__ == '__main__':
    main()