adding coloring

about.py

@@ -114,6 +114,29 @@ METRIC_GROUPS = {
     ],
 }
 
+# Color coding for metric families (background colors for headers)
+METRIC_GROUP_COLORS = {
+    'Validity ↑': '#e3f2fd',           # Light blue
+    'Uniqueness & Novelty ↑': '#f3e5f5', # Light purple
+    'Energy Metrics ↓': '#fff3e0',      # Light orange
+    'Stability ↑': '#e8f5e9',           # Light green
+    'Metastability ↑': '#f1f8e9',       # Light lime
+    'Distribution ↓': '#fce4ec',        # Light pink
+    'Diversity ↑': '#e0f7fa',           # Light cyan
+    'HHI ↓': '#fff8e1',                 # Light amber
+}
+
+# Map each column to its group for styling
+def get_column_to_group_mapping():
+    """Returns a dict mapping column names to their metric group."""
+    col_to_group = {}
+    for group_name, cols in METRIC_GROUPS.items():
+        for col in cols:
+            col_to_group[col] = group_name
+    return col_to_group
+
+COLUMN_TO_GROUP = get_column_to_group_mapping()
+
 # Compact view columns (most important metrics visible without scrolling)
 COMPACT_VIEW_COLUMNS = [
     'run_name',

app.py

@@ -11,8 +11,8 @@ import os
 
 from about import (
     PROBLEM_TYPES, TOKEN, CACHE_PATH, API, submissions_repo, results_repo,
-    COLUMN_DISPLAY_NAMES, COUNT_BASED_METRICS,
-    COMPACT_VIEW_COLUMNS, FULL_VIEW_COLUMNS
+    COLUMN_DISPLAY_NAMES, COUNT_BASED_METRICS, METRIC_GROUPS,
+    METRIC_GROUP_COLORS, COLUMN_TO_GROUP
 )
 
 def get_leaderboard():
@@ -24,16 +24,26 @@ def get_leaderboard():
 
     return full_df
 
-def format_dataframe(df, show_percentage=False, view_mode="Compact"):
+def format_dataframe(df, show_percentage=False, selected_groups=None):
     """Format the dataframe with proper column names and optional percentages."""
     if len(df) == 0:
         return df
 
-    # Select columns based on view mode
-    if view_mode == "Compact":
-        selected_cols = [col for col in COMPACT_VIEW_COLUMNS if col in df.columns]
-    else:  # Full view
-        selected_cols = [col for col in FULL_VIEW_COLUMNS if col in df.columns]
+    # Build column list based on selected metric groups
+    selected_cols = ['run_name']
+    if 'n_structures' in df.columns:
+        selected_cols.append('n_structures')
+
+    # If no groups selected, show all
+    if not selected_groups:
+        selected_groups = list(METRIC_GROUPS.keys())
+
+    # Add columns from selected groups
+    for group in selected_groups:
+        if group in METRIC_GROUPS:
+            for col in METRIC_GROUPS[group]:
+                if col in df.columns and col not in selected_cols:
+                    selected_cols.append(col)
 
     # Create a copy with selected columns
     display_df = df[selected_cols].copy()
@@ -54,12 +64,40 @@ def format_dataframe(df, show_percentage=False, view_mode="Compact"):
     # Rename columns for display
     display_df = display_df.rename(columns=COLUMN_DISPLAY_NAMES)
 
-    return display_df
+    # Apply color coding based on metric groups
+    styled_df = apply_color_styling(display_df, selected_cols)
+
+    return styled_df
+
+def apply_color_styling(display_df, original_cols):
+    """Apply background colors to dataframe based on metric groups using pandas Styler."""
+
+    def style_by_group(x):
+        # Create a DataFrame with the same shape filled with empty strings
+        styles = pd.DataFrame('', index=x.index, columns=x.columns)
+
+        # Map display column names back to original column names
+        for i, display_col in enumerate(x.columns):
+            if i < len(original_cols):
+                original_col = original_cols[i]
 
-def update_leaderboard(show_percentage, view_mode):
+                # Check if this column belongs to a metric group
+                if original_col in COLUMN_TO_GROUP:
+                    group = COLUMN_TO_GROUP[original_col]
+                    color = METRIC_GROUP_COLORS.get(group, '')
+                    if color:
+                        styles[display_col] = f'background-color: {color}'
+
+        return styles
+
+    # Apply the styling function
+    return display_df.style.apply(style_by_group, axis=None)
+
+def update_leaderboard(show_percentage, selected_groups):
     """Update the leaderboard based on user selections."""
     df = get_leaderboard()
-    return format_dataframe(df, show_percentage, view_mode)
+    formatted_df = format_dataframe(df, show_percentage, selected_groups)
+    return formatted_df
 
 def show_output_box(message):
     return gr.update(value=message, visible=True)
@@ -67,6 +105,14 @@ def show_output_box(message):
 def submit_cif_files(problem_type, cif_files, profile: gr.OAuthProfile | None):
     return 
 
+def generate_color_legend_html():
+    """Generate HTML for color-coded metric group legend."""
+    html = '<div style="display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px;">'
+    for group, color in METRIC_GROUP_COLORS.items():
+        html += f'<span style="background-color: {color}; padding: 4px 8px; border-radius: 4px; font-size: 12px;">{group}</span>'
+    html += '</div>'
+    return html
+
 def gradio_interface() -> gr.Blocks:
     with gr.Blocks() as demo:
         gr.Markdown("## Welcome to the LeMaterial Generative Benchmark Leaderboard!")
@@ -76,12 +122,12 @@ def gradio_interface() -> gr.Blocks:
 
                 # Display options
                 with gr.Row():
-                    with gr.Column(scale=1):
-                        view_mode = gr.Radio(
-                            choices=["Compact", "Full"],
-                            value="Compact",
-                            label="View Mode",
-                            info="Compact: Key metrics | Full: All metrics grouped by category"
+                    with gr.Column(scale=2):
+                        selected_groups = gr.CheckboxGroup(
+                            choices=list(METRIC_GROUPS.keys()),
+                            value=list(METRIC_GROUPS.keys()),
+                            label="Metric Families",
+                            info="Select which metric groups to display"
                         )
                     with gr.Column(scale=1):
                         show_percentage = gr.Checkbox(
@@ -90,6 +136,9 @@ def gradio_interface() -> gr.Blocks:
                             info="Display count-based metrics as percentages of total structures"
                         )
 
+                # Color-coded legend
+                gr.HTML(generate_color_legend_html())
+
                 # Metric legend
                 with gr.Accordion("Metric Groups Legend", open=False):
                     legend_md = """
@@ -109,7 +158,7 @@ def gradio_interface() -> gr.Blocks:
                 try:
                     # Initial dataframe
                     initial_df = get_leaderboard()
-                    formatted_df = format_dataframe(initial_df, show_percentage=False, view_mode="Compact")
+                    formatted_df = format_dataframe(initial_df, show_percentage=False, selected_groups=list(METRIC_GROUPS.keys()))
 
                     leaderboard_table = gr.Dataframe(
                         label="GenBench Leaderboard",
@@ -123,12 +172,12 @@ def gradio_interface() -> gr.Blocks:
                     # Update dataframe when options change
                     show_percentage.change(
                         fn=update_leaderboard,
-                        inputs=[show_percentage, view_mode],
+                        inputs=[show_percentage, selected_groups],
                         outputs=leaderboard_table
                     )
-                    view_mode.change(
+                    selected_groups.change(
                         fn=update_leaderboard,
-                        inputs=[show_percentage, view_mode],
+                        inputs=[show_percentage, selected_groups],
                         outputs=leaderboard_table
                     )