Method C: Use domain coordinates for layout images with log scale

Layout images don't work correctly with log scale axes when using data
coordinates (xref='x'). The solution is to use domain coordinates
(xref='x domain') which represent positions as fractions (0-1) of the
plot area.

This requires:
1. Manually calculating the log10 position of each point
2. Converting to domain coordinates relative to the axis range
3. Setting explicit axis ranges that match the domain calculations

Tested locally - colored circles now align perfectly with scatter markers.

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

leaderboard_transformer.py

@@ -570,7 +570,20 @@ def _plot_scatter_plotly(
     ))
     
     # Add company logo images for each data point
-    # Note: With log scale, Plotly layout images use raw data values (same as scatter traces)
+    # Using domain coordinates (0-1 range) to work correctly with log scale x-axis
+    # Calculate axis ranges for coordinate conversion
+    min_cost = data_plot[x_col_to_use].min()
+    max_cost = data_plot[x_col_to_use].max()
+    min_score = data_plot[y_col_to_use].min()
+    max_score = data_plot[y_col_to_use].max()
+    
+    # For log scale, we need log10 of the range bounds
+    # Add padding to the range
+    x_min_log = np.log10(min_cost * 0.5) if min_cost > 0 else -2
+    x_max_log = np.log10(max_cost * 1.3) if max_cost > 0 else 1
+    y_min = min_score - 5 if min_score > 5 else 0
+    y_max = max_score + 5
+    
     for _, row in data_plot.iterrows():
         model_name = row.get('Language Model', '')
         company_info = get_company_from_model_name(model_name)
@@ -584,20 +597,31 @@ def _plot_scatter_plotly(
                     logo_uri = f"data:image/svg+xml;base64,{encoded_logo}"
                     
                     x_val = row[x_col_to_use]
+                    y_val = row[y_col_to_use]
+                    
+                    # Convert to domain coordinates (0-1 range)
+                    # For log scale x: domain_x = (log10(x) - x_min_log) / (x_max_log - x_min_log)
+                    if x_val > 0:
+                        log_x = np.log10(x_val)
+                        domain_x = (log_x - x_min_log) / (x_max_log - x_min_log)
+                    else:
+                        domain_x = 0
                     
-                    # Calculate logo size - use percentage of data range
-                    # For log scale, size is in data units (will be log-scaled by Plotly)
-                    logo_size_x = max_reported_cost * 0.08 if max_reported_cost > 0 else 0.3
-                    logo_size_y = 2.5  # Fixed y size in data units
+                    # For linear y: domain_y = (y - y_min) / (y_max - y_min)
+                    domain_y = (y_val - y_min) / (y_max - y_min) if (y_max - y_min) > 0 else 0.5
+                    
+                    # Clamp to valid range
+                    domain_x = max(0, min(1, domain_x))
+                    domain_y = max(0, min(1, domain_y))
                     
                     layout_images.append(dict(
                         source=logo_uri,
-                        xref="x",
-                        yref="y",
-                        x=x_val,  # Use raw data value - Plotly handles log transformation
-                        y=row[y_col_to_use],
-                        sizex=logo_size_x,
-                        sizey=logo_size_y,
+                        xref="x domain",  # Use domain coordinates for log scale compatibility
+                        yref="y domain",
+                        x=domain_x,
+                        y=domain_y,
+                        sizex=0.04,  # Size as fraction of plot width
+                        sizey=0.06,  # Size as fraction of plot height
                         xanchor="center",
                         yanchor="middle",
                         layer="above"
@@ -664,19 +688,19 @@ def _plot_scatter_plotly(
         fig.data = fig.data[:-1]
 
     # --- Section 8: Configure Layout  ---
+    # Use the same axis ranges as calculated for domain coordinates
     xaxis_config = dict(
         title=x_axis_label,
         type="log",
-        rangemode="tozero"
+        range=[x_min_log, x_max_log]  # Match domain coordinate calculation
     )
 
-
     # Build layout configuration
     layout_config = dict(
         template="plotly_white",
         title=f"OpenHands Index {name} Leaderboard",
         xaxis=xaxis_config,
-        yaxis=dict(title="Average (mean) score"),
+        yaxis=dict(title="Average (mean) score", range=[y_min, y_max]),  # Match domain calculation
         legend=dict(
             bgcolor='#FAF2E9',
         ),