Merge pull request #869 from hrntsm/Make-first-legend-item-selectable

Update legend position in Graph components
optuna · Apr 24, 2024 · d502d24 · d502d24
2 parents d1ca778 + e57a2fa
commit d502d24
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 0 deletions.
diff --git a/optuna_dashboard/ts/components/GraphEdf.tsx b/optuna_dashboard/ts/components/GraphEdf.tsx
@@ -118,6 +118,10 @@ const plotEdf = (
       b: 50,
     },
     template: colorTheme,
+    legend: {
+      x: 1.0,
+      y: 0.95,
+    },
   }
 
   const plotData: Partial<plotly.PlotData>[] = edfPlotInfos.map((h) => {

diff --git a/optuna_dashboard/ts/components/GraphHistory.tsx b/optuna_dashboard/ts/components/GraphHistory.tsx
@@ -259,6 +259,10 @@ const plotHistory = (
     },
     showlegend: historyPlotInfos.length === 1 ? false : true,
     template: colorTheme,
+    legend: {
+      x: 1.0,
+      y: 0.95,
+    },
   }
 
   const getAxisX = (trial: Trial): number | Date => {

diff --git a/optuna_dashboard/ts/components/GraphHyperparameterImportances.tsx b/optuna_dashboard/ts/components/GraphHyperparameterImportances.tsx
@@ -130,6 +130,10 @@ const plotParamImportance = (
     bargroupgap: 0.1,
     uirevision: "true",
     template: colorTheme,
+    legend: {
+      x: 1.0,
+      y: 0.95,
+    },
   }
 
   if (document.getElementById(plotDomId) === null) {

diff --git a/optuna_dashboard/ts/components/GraphIntermediateValues.tsx b/optuna_dashboard/ts/components/GraphIntermediateValues.tsx
@@ -61,6 +61,10 @@ const plotIntermediateValue = (
     },
     uirevision: "true",
     template: colorTheme,
+    legend: {
+      x: 1.0,
+      y: 0.95,
+    },
   }
   if (trials.length === 0) {
     plotly.react(plotDomId, [], layout)

diff --git a/optuna_dashboard/ts/components/GraphTimeline.tsx b/optuna_dashboard/ts/components/GraphTimeline.tsx
@@ -165,6 +165,10 @@ const plotTimeline = (
     },
     uirevision: "true",
     template: colorTheme,
+    legend: {
+      x: 1.0,
+      y: 0.95,
+    },
   }
 
   const makeTrace = (bars: Trial[], state: string, color: string) => {