Multiple graph and table improvements

- Removed 'Missing Cost Data' vertical divider line from graph
- Added log scale to x-axis (cost) for better data visualization
- Created custom SVG lock icons: blue open lock, red closed lock
- Replaced lock emojis with custom SVG lock icons in tables
- Made graph icons smaller for cleaner appearance
- Moved model name labels higher above icons using annotations

Co-authored-by: openhands <openhands@all-hands.dev>

leaderboard_transformer.py

@@ -581,9 +581,9 @@ def _plot_scatter_plotly(
                     encoded_logo = base64.b64encode(f.read()).decode('utf-8')
                     logo_uri = f"data:image/svg+xml;base64,{encoded_logo}"
                     
-                    # Calculate logo size based on data range
-                    logo_size_x = max_reported_cost * 0.08 if max_reported_cost > 0 else 0.5
-                    logo_size_y = 4  # Fixed y size in data units
+                    # Calculate logo size - smaller icons
+                    logo_size_x = max_reported_cost * 0.04 if max_reported_cost > 0 else 0.3
+                    logo_size_y = 2.5  # Fixed y size in data units (smaller)
                     
                     # Add image at data point position, centered on the point
                     layout_images.append(dict(
@@ -622,7 +622,7 @@ def _plot_scatter_plotly(
                 model_name = model_name[:22] + '...'
             frontier_labels.append(model_name)
         
-        # Add text labels for frontier points
+        # Add text labels for frontier points - positioned above the icons
         fig.add_trace(go.Scatter(
             x=frontier_x,
             y=frontier_y,
@@ -638,21 +638,33 @@ def _plot_scatter_plotly(
             ),
             hoverinfo='skip'
         ))
+        
+        # Add annotations for each frontier label with higher y-offset
+        for i, (x_val, y_val, label) in enumerate(zip(frontier_x, frontier_y, frontier_labels)):
+            fig.add_annotation(
+                x=x_val,
+                y=y_val,
+                text=label,
+                showarrow=False,
+                yshift=25,  # Move label higher above the icon
+                font=dict(
+                    size=10,
+                    color='#032629',
+                    family='Manrope'
+                ),
+                xanchor='center',
+                yanchor='bottom'
+            )
+        
+        # Remove the scatter trace we just added (we're using annotations instead)
+        fig.data = fig.data[:-1]
 
     # --- Section 8: Configure Layout  ---
-    xaxis_config = dict(title=x_axis_label, rangemode="tozero")
-    if divider_line_x > 0:
-        fig.add_vline(
-            x=divider_line_x,
-            line_width=2,
-            line_dash="dash",
-            line_color="grey",
-            annotation_text="Missing Cost Data",
-            annotation_position="top right"
-        )
-
-        # ---Adjust x-axis range to make room for the new points ---
-        xaxis_config['range'] = [-0.2, (max_reported_cost + (max_reported_cost / 4))]
+    xaxis_config = dict(
+        title=x_axis_label,
+        type="log",  # Use logarithmic scale for cost
+        rangemode="tozero"
+    )
 
 
     # Build layout configuration
@@ -660,7 +672,7 @@ def _plot_scatter_plotly(
         template="plotly_white",
         title=f"OpenHands Index {name} Leaderboard",
         xaxis=xaxis_config,
-        yaxis=dict(title="Average (mean) score", range=[-0.2, None]),
+        yaxis=dict(title="Average (mean) score"),
         legend=dict(
             bgcolor='#FAF2E9',
         ),

ui_components.py

@@ -156,21 +156,23 @@ def create_svg_html(value, svg_map):
 
 def build_openness_tooltip_content() -> str:
     """
-    Generates the inner HTML for the Model Openness tooltip card using lock emojis.
+    Generates the inner HTML for the Model Openness tooltip card using custom SVG lock icons.
     """
+    open_uri = get_svg_as_data_uri("assets/lock-open.svg")
+    closed_uri = get_svg_as_data_uri("assets/lock-closed.svg")
     html_items = [
-        """
+        f"""
         <div class="tooltip-legend-item">
-            <span style="font-size: 24px;">🔓</span>
+            <img src="{open_uri}" alt="Open" style="width: 24px; height: 24px;">
             <div>
                 <strong>Open</strong>
                 <span>Open source model</span>
             </div>
         </div>
         """,
-        """
+        f"""
         <div class="tooltip-legend-item">
-            <span style="font-size: 24px;">🔒</span>
+            <img src="{closed_uri}" alt="Closed" style="width: 24px; height: 24px;">
             <div>
                 <strong>Closed</strong>
                 <span>Closed source model</span>
@@ -255,16 +257,18 @@ def build_descriptions_tooltip_content(table) -> str:
             <div class="tooltip-description-item"><b>Logs:</b> View evaluation run logs (e.g., outputs, traces).</div>
         """
 
-# Create HTML for the "Openness" legend items for table using lock emojis
+# Create HTML for the "Openness" legend items for table using custom SVG lock icons
+open_lock_uri = get_svg_as_data_uri("assets/lock-open.svg")
+closed_lock_uri = get_svg_as_data_uri("assets/lock-closed.svg")
 openness_html_items = [
-    '<div style="display: flex; align-items: center; white-space: nowrap;">'
-    '<span style="font-size: 16px; margin-right: 4px;">🔓</span>'
-    '<span>Open</span>'
-    '</div>',
-    '<div style="display: flex; align-items: center; white-space: nowrap;">'
-    '<span style="font-size: 16px; margin-right: 4px;">🔒</span>'
-    '<span>Closed</span>'
-    '</div>'
+    f'<div style="display: flex; align-items: center; white-space: nowrap;">'
+    f'<img src="{open_lock_uri}" alt="Open" style="width:16px; height:16px; margin-right: 4px;">'
+    f'<span>Open</span>'
+    f'</div>',
+    f'<div style="display: flex; align-items: center; white-space: nowrap;">'
+    f'<img src="{closed_lock_uri}" alt="Closed" style="width:16px; height:16px; margin-right: 4px;">'
+    f'<span>Closed</span>'
+    f'</div>'
 ]
 openness_html = " ".join(openness_html_items)
 
@@ -452,11 +456,13 @@ def create_leaderboard_display(
         
         def get_openness_icon_html(row):
             openness_val = row.get('Openness', '')
-            # Use lock emojis: 🔓 for open, 🔒 for closed
+            # Use custom lock SVG icons: blue open lock, red closed lock
             if openness_val in [aliases.CANONICAL_OPENNESS_OPEN, 'Open', 'Open Source', 'Open Source + Open Weights']:
-                return '<span title="Open source model" style="font-size: 18px;">🔓</span>'
+                uri = get_svg_as_data_uri("assets/lock-open.svg")
+                return f'<img src="{uri}" alt="Open" title="Open source model" style="width:20px; height:20px;">'
             else:
-                return '<span title="Closed source model" style="font-size: 18px;">🔒</span>'
+                uri = get_svg_as_data_uri("assets/lock-closed.svg")
+                return f'<img src="{uri}" alt="Closed" title="Closed source model" style="width:20px; height:20px;">'
         
         df_display['Icon'] = df_display.apply(get_openness_icon_html, axis=1)
         
@@ -675,14 +681,16 @@ def create_benchmark_details_display(
             axis=1
         )
 
-        # Create simple openness icons using lock emojis
+        # Create simple openness icons using custom SVG lock icons
         def get_openness_icon_html(row):
             openness_val = row.get('Openness', '')
-            # Use lock emojis: 🔓 for open, 🔒 for closed
+            # Use custom lock SVG icons: blue open lock, red closed lock
             if openness_val in [aliases.CANONICAL_OPENNESS_OPEN, 'Open', 'Open Source', 'Open Source + Open Weights']:
-                return '<span title="Open source model" style="font-size: 18px;">🔓</span>'
+                uri = get_svg_as_data_uri("assets/lock-open.svg")
+                return f'<img src="{uri}" alt="Open" title="Open source model" style="width:20px; height:20px;">'
             else:
-                return '<span title="Closed source model" style="font-size: 18px;">🔒</span>'
+                uri = get_svg_as_data_uri("assets/lock-closed.svg")
+                return f'<img src="{uri}" alt="Closed" title="Closed source model" style="width:20px; height:20px;">'
         
         benchmark_table_df['Icon'] = benchmark_table_df.apply(get_openness_icon_html, axis=1)