update

pages/leaderboard.py

@@ -14,19 +14,21 @@ css = '''
 
 .tooltip-wrapper .tooltip {
     visibility: hidden;
-    width: 120px;
+    width: 300px;  # Increased width for longer prompts
     background-color: black;
     color: #fff;
     text-align: center;
     border-radius: 6px;
-    padding: 5px 0;
+    padding: 5px;
     position: absolute;
     z-index: 1;
     bottom: 125%;
     left: 50%;
-    margin-left: -60px;
+    margin-left: -150px;  # Adjusted for new width
     opacity: 0;
     transition: opacity 0.3s;
+    white-space: pre-wrap;  # This allows text wrapping
+    word-wrap: break-word;  # This ensures long words don't overflow
 }
 
 .tooltip-wrapper:hover .tooltip {
@@ -74,10 +76,7 @@ def show_tooltip():
 
 
 def update_leaderboard(sort_by):
-    # In a real implementation, this would filter the data based on the category
     sorted_df = df.sort_values(by=sort_by, ascending=False, ignore_index=True)
-
-    # Update ranks based on new sorting
     sorted_df['Rank'] = range(1, len(sorted_df) + 1)
 
     # Create hover effect for Methods column
@@ -86,10 +85,8 @@ def update_leaderboard(sort_by):
     # Drop the 'Prompts' column as we don't want to display it directly
     sorted_df = sorted_df.drop(columns=['Prompts'])
 
-    # Convert DataFrame to HTML with clickable headers for sorting
     html = sorted_df.to_html(index=False, escape=False)
 
-    # Add sorting links to column headers
     for column in sorted_df.columns:
         html = html.replace(f'<th>{column}</th>', 
                             f'<th><a href="#" onclick="sortBy(\'{column}\'); return false;">{column}</a></th>')
@@ -97,7 +94,7 @@ def update_leaderboard(sort_by):
     return html
 
 def create_leaderboard():
-    with gr.Blocks(css=custom_css) as demo:
+    with gr.Blocks(css=css) as demo:
         gr.Markdown("# 🏆 Summarization Arena Leaderboard")
 
         with gr.Row():