Adding hover descriptions to the table

utils.py

@@ -5,10 +5,29 @@ def df_to_table_html(df, additional_class=None):
     if additional_class is not None:
         classes += f" {additional_class}"
 
-    full_table_html = df.to_html(classes=classes, escape=False, index=False)
+    # Define descriptions for each metric
+    descriptions = {
+        "Ordinal - Win rate (↑)": "Percentage of won games - a game is a comparison between each model pair, each metric, and each context pair (for stability) or context (for validity metrics).",
+        "Cardinal - Score (↑)": "Average score over all metrics (with descending metrics inverted), context pairs (for stability) and contexts ( for validity metrics).",
+        "RO Stability (↑)": "Correlation in the order of simulated participants (ordered based on the expression of the same values) over different contexts",
+        "Stress (↓)": "MDS fit of the observed value structure to the theoretical circular structure. Stress of 0 indicates 'perfect' fit, 0.025 excellent, 0.05 good, 0.1 fair, and 0.2 poor.",
+        "Separability (↑)": "Linear separability (in the 2D MDS space) of questions corresponding to different values (linear multi-label SVM classifier accuracy).",
+        "CFI (↑)": "Fit of the posited Magnifying glass CFA model (>.90 is considered acceptable fit).",
+        "SRMR (↓)": "Fit of the posited Magnifying glass CFA model (<.05 considered good fit and <.08 reasonable).",
+        "RMSEA (↓)": "Fit of the posited Magnifying glass CFA model (<.05 considered good fit and <.08 reasonable)."
+    }
+
+
+    # Convert DataFrame to HTML
+    html = df.to_html(classes=classes, escape=False, index=False)
+
+    # Add title attributes to metric names
+    for metric, description in descriptions.items():
+        html = html.replace(f'>{metric}<', f' title="{description}">{metric}<')
 
     # Modify the table HTML to add links to model names
     for model in df['Model']:
         model_link = f'<a href="{url_for("model_detail", model_name=model)}">{model}</a>'
-        full_table_html = full_table_html.replace(f'>{model}<', f'>{model_link}<')
-    return full_table_html
+        html = html.replace(f'>{model}<', f'>{model_link}<')
+
+    return html