update

pages/leaderboard.py

@@ -5,6 +5,36 @@ import pandas as pd
 
 from pages.summarization_playground import custom_css
 
+css = '''
+.tooltip-wrapper {
+    position: relative;
+    display: inline-block;
+    border-bottom: 1px dotted black;
+}
+
+.tooltip-wrapper .tooltip {
+    visibility: hidden;
+    width: 120px;
+    background-color: black;
+    color: #fff;
+    text-align: center;
+    border-radius: 6px;
+    padding: 5px 0;
+    position: absolute;
+    z-index: 1;
+    bottom: 125%;
+    left: 50%;
+    margin-left: -60px;
+    opacity: 0;
+    transition: opacity 0.3s;
+}
+
+.tooltip-wrapper:hover .tooltip {
+    visibility: visible;
+    opacity: 1;
+}
+'''
+
 with open("prompt/prompt.json", "r") as file:
     json_data = file.read()
     prompts = json.loads(json_data)# Sample data for the leaderboard
@@ -16,7 +46,8 @@ data = {
     'Methods': [prompt['id'] for prompt in prompts],
     'Rouge Score': [prompt['metric']['Rouge'] for prompt in prompts],
     'Winning Rate': winning_rate,
-    'Authors': [prompt['author'] for prompt in prompts]
+    'Authors': [prompt['author'] for prompt in prompts],
+    'Prompts': [prompt['prompt'] for prompt in prompts]
 }
 
 df = pd.DataFrame(data)
@@ -28,6 +59,20 @@ 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 show_tooltip():
+    text_with_tooltip = create_html_with_tooltip("Hover over me", "This is a tooltip!")
+    return text_with_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)
@@ -35,6 +80,12 @@ def update_leaderboard(sort_by):
     # Update ranks based on new sorting
     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
     html = sorted_df.to_html(index=False, escape=False)