update

pages/leaderboard.py

@@ -14,21 +14,21 @@ css = '''
 
 .tooltip-wrapper .tooltip {
     visibility: hidden;
-    width: 300px;  # Increased width for longer prompts
+    width: 300px; /* Increased width */
     background-color: black;
     color: #fff;
-    text-align: center;
+    text-align: left; /* Changed to left align */
     border-radius: 6px;
     padding: 5px;
     position: absolute;
     z-index: 1;
     bottom: 125%;
     left: 50%;
-    margin-left: -150px;  # Adjusted for new width
+    margin-left: -150px; /* Half of the 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
+    white-space: pre-wrap; /* Allow text wrapping */
+    word-wrap: break-word; /* Break long words if necessary */
 }
 
 .tooltip-wrapper:hover .tooltip {
@@ -37,6 +37,14 @@ css = '''
 }
 '''
 
+def create_html_with_tooltip(text, tooltip):
+    return f'''
+    <div class="tooltip-wrapper">
+        {text}
+        <span class="tooltip">{tooltip}</span>
+    </div>
+    '''
+
 with open("prompt/prompt.json", "r") as file:
     json_data = file.read()
     prompts = json.loads(json_data)# Sample data for the leaderboard
@@ -45,7 +53,7 @@ winning_rate = [prompt['metric']['winning_number'] for prompt in prompts]
 winning_rate = [num / sum(winning_rate) for num in winning_rate]
 data = {
     'Rank': [i+1 for i in range(len(prompts))],
-    'Methods': [prompt['id'] for prompt in prompts],
+    'Methods': [create_html_with_tooltip(prompt['id'], prompt['prompt']) for prompt in prompts],
     'Rouge Score': [prompt['metric']['Rouge'] for prompt in prompts],
     'Winning Rate': winning_rate,
     'Authors': [prompt['author'] for prompt in prompts],
@@ -61,27 +69,14 @@ medals = ['🏅', '🥈', '🥉']
 for i in range(3):
     df.loc[i, 'Authors'] = f"{medals[i]} {df.loc[i, 'Authors']}"
 
-
-def create_html_with_tooltip(text, tooltip):
-    return f'''
-    <div class="tooltip-wrapper">
-        {text}
-        <span class="tooltip">{tooltip}</span>
-    </div>
-    '''
-
 def update_leaderboard(sort_by):
     sorted_df = df.sort_values(by=sort_by, ascending=False, ignore_index=True)
     sorted_df['Rank'] = range(1, len(sorted_df) + 1)
 
-    # Create hover effect for Methods column
-    sorted_df['Methods'] = sorted_df.apply(lambda row: create_html_with_tooltip(row['Methods'], row['Prompts']), axis=1)
-
-    # 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 and without escaping
     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>')