Merge pull request #23 from redhat-et/fix/legend-placement

Fix legend overlap and improve leaderboard chart readability

app.py

@@ -77,6 +77,9 @@ FORCE_DARK_MODE_HEAD = """
   }
 })();
 </script>
+<style>
+.responsive-plot { overflow-x: auto; }
+</style>
 """
 
 

src/charts.py

@@ -220,14 +220,18 @@ def apply_plot_theme(fig: Figure, background_name: str | None = DEFAULT_BACKGROU
         plot_bgcolor=theme["plot_bgcolor"],
         font={"color": theme["text_primary"]},
         title={"font": {"color": theme["text_primary"]}},
-        margin={"t": 0, "b": 0, "l": 0, "r": 0},
+        showlegend=True,
+        margin={"t": 60, "b": 0, "l": 0, "r": 0},
         legend={
             "orientation": "h",
             "yanchor": "top",
             "y": 1,
+            "yref": "container",
             "xanchor": "center",
             "x": 0.5,
             "font": {"color": theme["text_muted"]},
+            "itemclick": False,
+            "itemdoubleclick": False,
         },
     )
     # Remove fixed dimensions so Gradio/Plotly can size to the browser/container.
@@ -308,13 +312,16 @@ def create_leaderboard_benchmark_plot(
 
     fig.update_layout(
         title=None,
-        xaxis={"title": "Model / Harness", "categoryorder": "array", "categoryarray": plot_df["Run Label"].tolist()},
-        yaxis={"title": "Score (%)", "range": [0, 105]},
+        xaxis={"title": "Model / Harness", "categoryorder": "total descending"},
+        yaxis={"title": "Score (%)", "range": [0, plot_df["Score"].max() * 1.12]},
         legend_title_text=color_by,
         bargap=0.28,
     )
     fig.update_xaxes(tickangle=-28)
-    return apply_plot_theme(fig, background_name)
+    fig = apply_plot_theme(fig, background_name)
+    min_width = max(600, len(plot_df) * 80)
+    fig.update_layout(width=min_width)
+    return fig
 
 
 def create_score_vs_cost_plot(