Connect 'Mark systems by' selector to Evolution and Size charts

- Update visualizations.py to import get_marker_icon and MARK_BY_DEFAULT
- Add mark_by parameter to create_evolution_over_time_chart()
- Add mark_by parameter to create_accuracy_by_size_chart()
- Update main_page.py to connect mark_by_dropdown to all charts
- Evolution and Size charts now update when mark_by selection changes

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

main_page.py

@@ -20,6 +20,8 @@ from visualizations import (
     create_accuracy_by_size_chart
 )
 
+from constants import MARK_BY_DEFAULT
+
 # --- Global State for Viewers (simple caching) ---
 CACHED_VIEWERS = {}
 CACHED_TAG_MAPS = {}
@@ -68,9 +70,8 @@ def build_page():
         gr.HTML('<h2>Evolution Over Time</h2>', elem_id="evolution-header")
         gr.Markdown("Track how model performance has improved over time based on release dates.")
         
-        # Create both all and open-only versions of evolution chart
-        evolution_fig_all = create_evolution_over_time_chart(test_df)
-        evolution_fig_open = create_evolution_over_time_chart(test_df_open)
+        # Create initial evolution chart with default mark_by
+        evolution_fig_all = create_evolution_over_time_chart(test_df, MARK_BY_DEFAULT)
         
         evolution_component = gr.Plot(value=evolution_fig_all, elem_id="evolution-chart")
         
@@ -80,21 +81,36 @@ def build_page():
         gr.HTML('<h2>Open Model Accuracy by Size</h2>', elem_id="size-accuracy-header")
         gr.Markdown("Compare open-weights model performance against their parameter count.")
         
-        size_fig = create_accuracy_by_size_chart(test_df)
-        gr.Plot(value=size_fig, elem_id="size-accuracy-chart")
+        size_fig = create_accuracy_by_size_chart(test_df, MARK_BY_DEFAULT)
+        size_component = gr.Plot(value=size_fig, elem_id="size-accuracy-chart")
         
-        # Connect the open models checkbox to update Winners and Evolution sections
-        if show_open_only_checkbox is not None:
-            def update_winners_and_evolution(show_open_only):
-                if show_open_only:
-                    return winners_html_open, evolution_fig_open
-                else:
-                    return winners_html_all, evolution_fig_all
+        # Update function for Winners, Evolution, and Size charts based on filters
+        def update_extra_sections(show_open_only, mark_by):
+            # Select the appropriate dataframe based on open_only filter
+            df_to_use = test_df_open if show_open_only else test_df
+            
+            # Winners HTML (not affected by mark_by, only open_only)
+            winners_html = winners_html_open if show_open_only else winners_html_all
+            
+            # Regenerate charts with current mark_by setting
+            evolution_fig = create_evolution_over_time_chart(df_to_use, mark_by)
+            size_fig = create_accuracy_by_size_chart(test_df, mark_by)  # Size chart always uses full df (filters internally)
             
+            return winners_html, evolution_fig, size_fig
+        
+        # Connect both checkbox and dropdown to update all extra sections
+        if show_open_only_checkbox is not None:
             show_open_only_checkbox.change(
-                fn=update_winners_and_evolution,
-                inputs=[show_open_only_checkbox],
-                outputs=[winners_component, evolution_component]
+                fn=update_extra_sections,
+                inputs=[show_open_only_checkbox, mark_by_dropdown],
+                outputs=[winners_component, evolution_component, size_component]
+            )
+        
+        if mark_by_dropdown is not None:
+            mark_by_dropdown.change(
+                fn=update_extra_sections,
+                inputs=[show_open_only_checkbox if show_open_only_checkbox else gr.State(value=False), mark_by_dropdown],
+                outputs=[winners_component, evolution_component, size_component]
             )
         
     else:

visualizations.py

@@ -11,8 +11,9 @@ import aliases
 from constants import FONT_FAMILY, FONT_FAMILY_SHORT
 
 # Import company logo mapping from leaderboard_transformer
-from leaderboard_transformer import get_company_from_model
+from leaderboard_transformer import get_company_from_model, get_marker_icon
 from ui_components import get_svg_as_data_uri
+from constants import MARK_BY_DEFAULT
 
 # Standard layout configuration matching existing charts
 # Colors aligned with OpenHands brand
@@ -131,17 +132,20 @@ def add_branding_to_figure(fig: go.Figure) -> go.Figure:
     return fig
 
 
-def create_evolution_over_time_chart(df: pd.DataFrame) -> go.Figure:
+def create_evolution_over_time_chart(df: pd.DataFrame, mark_by: str = None) -> go.Figure:
     """
     Create a chart showing model performance evolution over release dates.
     Uses company logos as markers to match the existing chart styling.
     
     Args:
         df: DataFrame with columns including 'release_date' or 'Release_Date', 'Language Model', 'average score', 'openness'
+        mark_by: One of "Company", "Openness", or "Country" - controls which icon to display
     
     Returns:
         Plotly figure showing score evolution over time
     """
+    if mark_by is None:
+        mark_by = MARK_BY_DEFAULT
     # Handle different column name formats
     release_date_col = None
     for col in ['release_date', 'Release_Date', 'Release Date']:
@@ -284,13 +288,15 @@ def create_evolution_over_time_chart(df: pd.DataFrame) -> go.Figure:
         )
     ))
     
-    # Add company logo images for each data point using data coordinates
+    # Add marker icon images for each data point using data coordinates
     layout_images = []
+    openness_col = 'Openness' if 'Openness' in plot_df.columns else 'openness'
     
     for _, row in plot_df.iterrows():
         model_name = row.get(model_col, '')
-        company_info = get_company_from_model(model_name)
-        logo_path = company_info['path']
+        openness = row.get(openness_col, '')
+        marker_info = get_marker_icon(model_name, openness, mark_by)
+        logo_path = marker_info['path']
         
         # Read the SVG file and encode as base64 data URI
         if os.path.exists(logo_path):
@@ -370,7 +376,7 @@ def create_evolution_over_time_chart(df: pd.DataFrame) -> go.Figure:
     return fig
 
 
-def create_accuracy_by_size_chart(df: pd.DataFrame) -> go.Figure:
+def create_accuracy_by_size_chart(df: pd.DataFrame, mark_by: str = None) -> go.Figure:
     """
     Create a scatter plot showing accuracy vs parameter count for open-weights models.
     Uses company logos as markers to match the Cost/Performance chart styling.
@@ -379,12 +385,16 @@ def create_accuracy_by_size_chart(df: pd.DataFrame) -> go.Figure:
     Args:
         df: DataFrame with columns including 'parameter_count_b' or 'Parameter_Count_B', 
             'average score', 'openness', 'Language Model'
+        mark_by: One of "Company", "Openness", or "Country" - controls which icon to display
     
     Returns:
         Plotly figure showing accuracy vs model size (total parameters)
     """
     import numpy as np
     
+    if mark_by is None:
+        mark_by = MARK_BY_DEFAULT
+    
     # Handle different column name formats for parameter count
     param_col = None
     for col in ['parameter_count_b', 'Parameter_Count_B', 'Parameter Count B']:
@@ -465,6 +475,7 @@ def create_accuracy_by_size_chart(df: pd.DataFrame) -> go.Figure:
         total_params = row[param_col]
         model_name = row.get(model_col, 'Unknown')
         score = row[score_col]
+        openness = row.get(openness_col, '')
         
         # Use total params for x-axis
         x_val = total_params
@@ -480,7 +491,8 @@ def create_accuracy_by_size_chart(df: pd.DataFrame) -> go.Figure:
             'y': score,
             'model_name': model_name,
             'hover_text': hover_text,
-            'total_params': total_params
+            'total_params': total_params,
+            'openness': openness
         })
     
     x_values = [p['x'] for p in data_points]
@@ -539,16 +551,17 @@ def create_accuracy_by_size_chart(df: pd.DataFrame) -> go.Figure:
         )
     ))
     
-    # Add company logo images for each data point (uniform size like Cost/Performance chart)
+    # Add marker icon images for each data point (uniform size like Cost/Performance chart)
     layout_images = []
     
     for point in data_points:
         x_val = point['x']
         y_val = point['y']
         model_name = point['model_name']
+        openness = point['openness']
         
-        company_info = get_company_from_model(model_name)
-        logo_path = company_info['path']
+        marker_info = get_marker_icon(model_name, openness, mark_by)
+        logo_path = marker_info['path']
         
         # Read the SVG file and encode as base64 data URI
         if os.path.exists(logo_path):