adding coloring but translucent

about.py

@@ -114,16 +114,16 @@ METRIC_GROUPS = {
     ],
 }
 
-# Color coding for metric families (background colors for headers)
+# Color coding for metric families (background colors with transparency)
 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
+    'Validity ↑': 'rgba(33, 150, 243, 0.15)',           # Light blue with transparency
+    'Uniqueness & Novelty ↑': 'rgba(156, 39, 176, 0.15)', # Light purple with transparency
+    'Energy Metrics ↓': 'rgba(255, 152, 0, 0.15)',      # Light orange with transparency
+    'Stability ↑': 'rgba(76, 175, 80, 0.15)',           # Light green with transparency
+    'Metastability ↑': 'rgba(139, 195, 74, 0.15)',      # Light lime with transparency
+    'Distribution ↓': 'rgba(233, 30, 99, 0.15)',        # Light pink with transparency
+    'Diversity ↑': 'rgba(0, 188, 212, 0.15)',           # Light cyan with transparency
+    'HHI ↓': 'rgba(255, 193, 7, 0.15)',                 # Light amber with transparency
 }
 
 # Map each column to its group for styling

app.py

@@ -105,12 +105,39 @@ 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;">'
+def generate_metric_legend_html():
+    """Generate HTML table with color-coded metric group legend."""
+    metric_details = {
+        'Validity ↑': ('Valid, Charge Neutral, Distance Valid, Plausibility Valid', '↑ Higher is better'),
+        'Uniqueness & Novelty ↑': ('Unique, Novel', '↑ Higher is better'),
+        'Energy Metrics ↓': ('E Above Hull, Formation Energy, Relaxation RMSD (with std)', '↓ Lower is better'),
+        'Stability ↑': ('Stable, Unique in Stable, SUN', '↑ Higher is better'),
+        'Metastability ↑': ('Metastable, Unique in Metastable, MSUN', '↑ Higher is better'),
+        'Distribution ↓': ('JS Distance, MMD, FID', '↓ Lower is better'),
+        'Diversity ↑': ('Element, Space Group, Atomic Site, Crystal Size', '↑ Higher is better'),
+        'HHI ↓': ('HHI Production, HHI Reserve', '↓ Lower is better'),
+    }
+
+    html = '<table style="width: 100%; border-collapse: collapse;">'
+    html += '<thead><tr>'
+    html += '<th style="border: 1px solid #ddd; padding: 8px; text-align: left;">Color</th>'
+    html += '<th style="border: 1px solid #ddd; padding: 8px; text-align: left;">Group</th>'
+    html += '<th style="border: 1px solid #ddd; padding: 8px; text-align: left;">Metrics</th>'
+    html += '<th style="border: 1px solid #ddd; padding: 8px; text-align: left;">Direction</th>'
+    html += '</tr></thead><tbody>'
+
     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>'
+        metrics, direction = metric_details.get(group, ('', ''))
+        group_name = group.replace('↑', '').replace('↓', '').strip()
+
+        html += '<tr>'
+        html += f'<td style="border: 1px solid #ddd; padding: 8px;"><div style="width: 30px; height: 20px; background-color: {color}; border: 1px solid #999;"></div></td>'
+        html += f'<td style="border: 1px solid #ddd; padding: 8px;"><strong>{group_name}</strong></td>'
+        html += f'<td style="border: 1px solid #ddd; padding: 8px;">{metrics}</td>'
+        html += f'<td style="border: 1px solid #ddd; padding: 8px;">{direction}</td>'
+        html += '</tr>'
+
+    html += '</tbody></table>'
     return html
 
 def gradio_interface() -> gr.Blocks:
@@ -131,34 +158,19 @@ def gradio_interface() -> gr.Blocks:
                         )
                     with gr.Column(scale=1):
                         show_percentage = gr.Checkbox(
-                            value=False,
+                            value=True,
                             label="Show as Percentages",
                             info="Display count-based metrics as percentages of total structures"
                         )
 
-                # Color-coded legend
-                gr.HTML(generate_color_legend_html())
-
-                # Metric legend
+                # Metric legend with color coding
                 with gr.Accordion("Metric Groups Legend", open=False):
-                    legend_md = """
-| Group | Metrics | Direction |
-|-------|---------|-----------|
-| **Validity** | Valid, Charge Neutral, Distance Valid, Plausibility Valid | ↑ Higher is better |
-| **Uniqueness & Novelty** | Unique, Novel | ↑ Higher is better |
-| **Energy Metrics** | E Above Hull, Formation Energy, Relaxation RMSD (with std) | ↓ Lower is better |
-| **Stability** | Stable, Unique in Stable, SUN | ↑ Higher is better |
-| **Metastability** | Metastable, Unique in Metastable, MSUN | ↑ Higher is better |
-| **Distribution** | JS Distance, MMD, FID | ↓ Lower is better |
-| **Diversity** | Element, Space Group, Atomic Site, Crystal Size | ↑ Higher is better |
-| **HHI** | HHI Production, HHI Reserve | ↓ Lower is better |
-"""
-                    gr.Markdown(legend_md)
+                    gr.HTML(generate_metric_legend_html())
 
                 try:
                     # Initial dataframe
                     initial_df = get_leaderboard()
-                    formatted_df = format_dataframe(initial_df, show_percentage=False, selected_groups=list(METRIC_GROUPS.keys()))
+                    formatted_df = format_dataframe(initial_df, show_percentage=True, selected_groups=list(METRIC_GROUPS.keys()))
 
                     leaderboard_table = gr.Dataframe(
                         label="GenBench Leaderboard",