Custom plot legends (#62)

content.py

@@ -656,8 +656,67 @@ span.wrap[tabindex="0"][role="button"][data-editable="false"] {
 .info-list {
     padding-left: 20px;
 }
+
 /* Smooth scrolling for the entire page */
 html {
     scroll-behavior: smooth;
 }
+
+/* Plot legend styles */
+.plot-legend-container {
+    height: 572px;
+    background-color: #fff;
+    padding: 24px 32px;
+}
+
+.dark .plot-legend-container {
+    background: rgba(250, 242, 233, 0.1);
+}
+
+#plot-legend-logo {
+    margin-bottom: 24px;
+}
+
+#plot-legend-logo img {
+    height: 19px;
+}
+
+.plot-legend-category-heading {
+    font-size: 16px;
+    font-weight: 700;    
+}
+
+.plot-legend-item {
+    margin-top: 8px;
+}
+
+.plot-legend-item-text {
+    display: inline-block;
+}
+
+.plot-legend-item-text .description {
+    color: #888;
+    font-size: 12px;
+}
+
+.plot-legend-item-svg {
+    display: inline-block;
+    vertical-align: top;
+    margin-top: 3px;
+    width: 14px;
+    height: 14px;
+    margin-right: 8px;
+}
+
+.plot-legend-tooling-svg {
+    height: 16px;
+    width: 16px;
+    margin-top: 2px;
+}
+
+#plot-legend-item-pareto-svg {
+    width: 18px;
+    height: 18px;
+    margin-right: 2px;
+}
 """

leaderboard_transformer.py

@@ -445,6 +445,7 @@ def _plot_scatter_plotly(
                 y=frontier_df['y'],
                 mode='lines',
                 name='Efficiency Frontier',
+                showlegend=False,
                 line=dict(color='#0FCB8C', width=2, dash='dash'),
                 hoverinfo='skip'
             ))
@@ -516,31 +517,6 @@ def _plot_scatter_plotly(
                 line=dict(width=1, color='deeppink')
             )
         ))
-    # ---- Add logic for making the legend -----------
-    for i, category in enumerate(colors_for_legend):
-        fig.add_trace(go.Scatter(
-            x=[None], y=[None],
-            mode='markers',
-            name=category,
-            legendgroup="openness_group",
-            legendgrouptitle_text="Agent Openness" if i == 0 else None,
-            marker=dict(
-                color=color_map.get(category, 'grey'),
-                symbol='circle',
-                size=12
-            )
-        ))
-
-    # Part B: Dummy traces for the SHAPES ("Agent Tooling")
-    for i, shape_name in enumerate(shapes_for_legend):
-        fig.add_trace(go.Scatter(
-            x=[None], y=[None],
-            mode='markers',
-            name=shape_name,
-            legendgroup="tooling_group",
-            legendgrouptitle_text="Agent Tooling" if i == 0 else None,
-            marker=dict(color='black', symbol=shape_map.get(shape_name), size=12)
-        ))
 
     # --- Section 8: Configure Layout  ---
     xaxis_config = dict(title=x_axis_label, rangemode="tozero")
@@ -567,12 +543,13 @@ def _plot_scatter_plotly(
         legend=dict(
             bgcolor='#FAF2E9',
         ),
+        height=572,
         hoverlabel=dict(
             bgcolor="#105257",
             font_size=12,
             font_family="Manrope",
             font_color="#d3dedc",
-        )
+        ),
     )
     fig.add_layout_image(
         dict(

ui_components.py

@@ -76,15 +76,36 @@ for canonical_openness, openness_aliases in aliases.OPENNESS_ALIASES.items():
 
 
 OPENNESS_SVG_MAP = {
-    "Open Source + Open Weights": "assets/os-ow-legend.svg",
-    "Open Source + Closed Weights": "assets/os-legend.svg",
-    "API Available": "assets/api-legend.svg",
-    "Closed Source & UI only": "assets/c-legend.svg",
+    "Open source & open weights": {
+        "path": "assets/ellipse-pink.svg",
+        "description": "Code and models are open"
+    },
+    "Open source & closed weights": {
+        "path": "assets/ellipse-coral.svg", 
+        "description": "Code is open but uses closed-weight models"
+    },
+    "Closed source & API available": {
+        "path": "assets/ellipse-yellow.svg",
+        "description": "No access to code; API access only"
+    },
+    "Closed source & UI only": {
+        "path": "assets/ellipse-white.svg",
+        "description": "No access to code or API; UI access only"
+    },
 }
 TOOLING_SVG_MAP = {
-    "Standard": "assets/standard-legend.svg",
-    "Custom Interface": "assets/equivalent-legend.svg",
-    "Fully Custom": "assets/custom-legend.svg",
+    "Standard": {
+        "path": "assets/five-point-star.svg",
+        "description": "Uses only tools explicitly provided in state.tools"
+    },
+    "Custom interface": {
+        "path": "assets/four-point-star.svg",
+        "description": "Custom tools for accessing an equivalent underlying environment"
+    },
+    "Fully custom": {
+        "path": "assets/three-point-star.svg",
+        "description": "Uses tools beyond constraints of Standard or Custom interface"
+    },
 }
 
 def get_svg_as_data_uri(path: str) -> str:
@@ -129,8 +150,13 @@ def create_svg_html(value, svg_map):
         return ""
 
     path_info = svg_map[value]
+    # Handle both old string format and new object format
+    if isinstance(path_info, dict):
+        path = path_info["path"]
+    else:
+        path = path_info
 
-    src = get_svg_as_data_uri(path_info)
+    src = get_svg_as_data_uri(path)
     # Generate the HTML for the single icon, with NO text.
     if src:
         return f'<img src="{src}" style="width: 16px; height: 16px; vertical-align: middle;" alt="{value}" title="{value}">'
@@ -147,11 +173,10 @@ def build_openness_tooltip_content() -> str:
         "Closed Source + UI Only": "No access to code or API; UI  access only",
     }
     html_items = []
-    for name, path in OPENNESS_SVG_MAP.items():
-        uri = get_svg_as_data_uri(path)
+    for name, info in OPENNESS_SVG_MAP.items():
+        uri = get_svg_as_data_uri(info["path"])
         desc = descriptions.get(name, "")
 
-        # Create the HTML for a single row in the tooltip legend
         html_items.append(f"""
             <div class="tooltip-legend-item">
                 <img src="{uri}" alt="{name}">
@@ -196,8 +221,8 @@ def build_tooling_tooltip_content() -> str:
         </ul>
     """
     html_items = []
-    for name, path in TOOLING_SVG_MAP.items():
-        uri = get_svg_as_data_uri(path)
+    for name, info in TOOLING_SVG_MAP.items():
+        uri = get_svg_as_data_uri(info["path"])
         desc = descriptions.get(name, "")
 
         # Check if this is the special case that needs a sub-list
@@ -266,8 +291,8 @@ openness_html = " ".join([create_svg_html(name, OPENNESS_SVG_MAP) for name in OP
 tooling_html = " ".join([create_svg_html(name, TOOLING_SVG_MAP) for name in TOOLING_SVG_MAP])
 # Create HTML for the "Openness" legend items
 openness_html_items = []
-for name, path in OPENNESS_SVG_MAP.items():
-    uri = get_svg_as_data_uri(path)
+for name, info in OPENNESS_SVG_MAP.items():
+    uri = get_svg_as_data_uri(info["path"])
     # Each item is now its own flexbox container to guarantee alignment
     openness_html_items.append(
         f'<div style="display: flex; align-items: center; white-space: nowrap;">'
@@ -279,8 +304,8 @@ openness_html = " ".join(openness_html_items)
 
 # Create HTML for the "Tooling" legend items
 tooling_html_items = []
-for name, path in TOOLING_SVG_MAP.items():
-    uri = get_svg_as_data_uri(path)
+for name, info in TOOLING_SVG_MAP.items():
+    uri = get_svg_as_data_uri(info["path"])
     tooling_html_items.append(
         f'<div style="display: flex; align-items: center; white-space: nowrap;">'
         f'<img src="{uri}" alt="{name}" title="{name}" style="width:16px; height:16px; margin-right: 4px; flex-shrink: 0;">'
@@ -355,6 +380,68 @@ def create_legend_markdown(which_table: str) -> str:
     """
     return legend_markdown
 
+# Create HTML for plot legend with SVG icons and keys
+openness_legend_items = []
+for name, info in OPENNESS_SVG_MAP.items():
+    uri = get_svg_as_data_uri(info["path"])
+    if uri:
+        openness_legend_items.append(
+            f'<div class="plot-legend-item">'
+                f'<img class="plot-legend-item-svg" src="{uri}" alt="{name}" title="{name}">'
+                f'<div class="plot-legend-item-text">'
+                    f'<div>'
+                        f'<span>{name}</span>'
+                    f'</div>'
+                    f'<span class="description">{info["description"]}</span>'
+                f'</div>'
+            f'</div>'
+        )
+
+tooling_legend_items = []
+for name, info in TOOLING_SVG_MAP.items():
+    uri = get_svg_as_data_uri(info["path"])
+    if uri:
+        tooling_legend_items.append(
+            f'<div class="plot-legend-item">'
+                f'<img class="plot-legend-item-svg plot-legend-tooling-svg" src="{uri}" alt="{name}" title="{name}">'
+                f'<div class="plot-legend-item-text">'
+                    f'<div>'
+                        f'<span>{name}</span>'
+                    f'</div>'
+                    f'<span class="description">{info["description"]}</span>'
+                f'</div>'
+            f'</div>'
+        )
+
+plot_legend_html = f"""
+    <div class="plot-legend-container">
+        <div id="plot-legend-logo">
+            <img src="{get_svg_as_data_uri("assets/logo.svg")}">
+        </div>
+        <div style="margin-bottom: 16px;">
+            <span class="plot-legend-category-heading">Pareto</span>
+            <div style="margin-top: 8px;">
+                <div class="plot-legend-item">
+                    <img id="plot-legend-item-pareto-svg" class="plot-legend-item-svg" src="{get_svg_as_data_uri("assets/pareto.svg")}">
+                    <span>On frontier</span>
+                </div>
+            </div>
+        </div>
+        <div style="margin-bottom: 16px;">
+            <span class="plot-legend-category-heading">Agent Openness</span>
+            <div style="margin-top: 8px;">
+                {''.join(openness_legend_items)}
+            </div>
+        </div>
+        <div>
+            <span class="plot-legend-category-heading">Agent Tooling</span>
+            <div style="margin-top: 8px;">
+                {''.join(tooling_legend_items)}
+            </div>
+        </div>
+    </div>
+""";
+
 # --- Global State for Viewers (simple caching) ---
 CACHED_VIEWERS = {}
 CACHED_TAG_MAPS = {}
@@ -505,11 +592,16 @@ def create_leaderboard_display(
     # 5. Combine all the lists to create the final, fully dynamic list.
     final_column_widths = fixed_start_widths + dynamic_widths + fixed_end_widths
 
-    plot_component = gr.Plot(
-        value=scatter_plot,
-        show_label=False
-    )
+    with gr.Row():
+        with gr.Column(scale=3):
+            plot_component = gr.Plot(
+                value=scatter_plot,
+                show_label=False
+            )
+        with gr.Column(scale=1):
+            gr.HTML(value=plot_legend_html)
     gr.Markdown(value=SCATTER_DISCLAIMER, elem_id="scatter-disclaimer")
+
     # Put table and key into an accordion
     with gr.Accordion("Show / Hide Table View", open=True, elem_id="leaderboard-accordion"):
         dataframe_component = gr.DataFrame(
@@ -668,8 +760,13 @@ def create_benchmark_details_display(
             agent_col="Agent",
             name=benchmark_name
         )
-        gr.Plot(value=benchmark_plot, show_label=False)
+        with gr.Row():
+            with gr.Column(scale=3):
+                gr.Plot(value=benchmark_plot, show_label=False) 
+            with gr.Column(scale=1):
+                gr.HTML(value=plot_legend_html)
         gr.Markdown(value=SCATTER_DISCLAIMER, elem_id="scatter-disclaimer")
+
         # Put table and key into an accordion
         with gr.Accordion("Show / Hide Table View", open=True, elem_id="leaderboard-accordion"):
             gr.DataFrame(