nevermind

app.py

@@ -146,7 +146,7 @@ def create_grouped_leaderboard(selected_mwoz, selected_tau_airline, selected_tau
         })
     
     df = pd.DataFrame(aggregated)
-    # Sort by allowed numeric columns.
+    # Sort if a valid column is provided.
     allowed_sort_cols = ["Average Score", "Conversation Consistency", "Backend Consistency", "Policy Completeness"]
     sort_by = sort_state.get("sort_by") if sort_state else None
     ascending = sort_state.get("ascending") if sort_state else True
@@ -157,8 +157,8 @@ def create_grouped_leaderboard(selected_mwoz, selected_tau_airline, selected_tau
 def update_sort_state(current_state, clicked_column):
     """
     Update the sort state based on the clicked column.
-    If the same column is clicked, toggle its sort order;
-    otherwise, set the new column with ascending order.
+    If the same column is clicked, toggle the sort order;
+    otherwise, switch to the new column with ascending order.
     """
     if current_state is None:
         current_state = {"sort_by": clicked_column, "ascending": True}
@@ -170,9 +170,21 @@ def update_sort_state(current_state, clicked_column):
             current_state["ascending"] = True
     return current_state
 
+def sort_by_avg(sort_state):
+    return update_sort_state(sort_state, "Average Score")
+
+def sort_by_conv(sort_state):
+    return update_sort_state(sort_state, "Conversation Consistency")
+
+def sort_by_backend(sort_state):
+    return update_sort_state(sort_state, "Backend Consistency")
+
+def sort_by_policy(sort_state):
+    return update_sort_state(sort_state, "Policy Completeness")
+
 def get_color_for_value(value, min_val, max_val):
     """
-    Compute a text color for a given value based on its normalized position.
+    Compute a color for a given value based on its normalized position.
     Interpolates from red (lowest) to yellow (mid) to green (highest).
     """
     if max_val == min_val:
@@ -194,8 +206,7 @@ def get_color_for_value(value, min_val, max_val):
 def generate_html_table(df):
     """
     Generate an HTML table from the DataFrame.
-    The header row contains interactive buttons (for sortable columns) that call a JavaScript function.
-    Numeric cells are styled so that their text color reflects performance.
+    For each numeric column, apply a text color based on its relative value.
     """
     numeric_cols = ["Average Score", "Conversation Consistency", "Backend Consistency", "Policy Completeness"]
     col_min = {}
@@ -204,45 +215,21 @@ def generate_html_table(df):
         col_min[col] = df[col].min() if not df.empty else 0
         col_max[col] = df[col].max() if not df.empty else 0
 
-    # JavaScript to handle header button clicks.
-    script = """
-    <script>
-    function sortBy(column) {
-        var hiddenSortState = document.getElementById("hidden_sort_state");
-        var currentState = JSON.parse(hiddenSortState.value);
-        if (currentState.sort_by === column) {
-             currentState.ascending = !currentState.ascending;
-        } else {
-             currentState.sort_by = column;
-             currentState.ascending = true;
-        }
-        hiddenSortState.value = JSON.stringify(currentState);
-        var event = new Event('change');
-        hiddenSortState.dispatchEvent(event);
-    }
-    </script>
-    """
-    # Build header row with buttons for numeric columns.
-    header = "<tr>"
-    headers = ["Model", "Average Score", "Conversation Consistency", "Backend Consistency", "Policy Completeness", "Judge Model"]
-    for col in headers:
-        if col in numeric_cols:
-            header += f"<th style='padding: 8px;'><button onclick=\"sortBy('{col}')\" style='width: 100%;'>{col}</button></th>"
-        else:
-            header += f"<th style='padding: 8px;'>{col}</th>"
-    header += "</tr>"
+    html = "<table border='1' style='border-collapse: collapse; text-align: center; width: 100%;'>"
+    # Header row
+    html += "<tr>"
+    for col in df.columns:
+        html += f"<th style='padding: 8px;'>{col}</th>"
+    html += "</tr>"
 
-    html = script + "<table border='1' style='border-collapse: collapse; text-align: center; width: 100%;'>"
-    html += header
-
-    # Generate data rows.
+    # Data rows
     for _, row in df.iterrows():
         html += "<tr>"
         for col in df.columns:
             cell_value = row[col]
             if col in numeric_cols:
                 color = get_color_for_value(cell_value, col_min[col], col_max[col])
-                # Apply color to text instead of background.
+                # Now applying the color to the text (color property) instead of background.
                 html += f"<td style='padding: 8px; color: {color};'>{cell_value}</td>"
             else:
                 html += f"<td style='padding: 8px;'>{cell_value}</td>"
@@ -250,12 +237,10 @@ def generate_html_table(df):
     html += "</table>"
     return html
 
-def update_leaderboard(selected_mwoz, selected_tau_airline, selected_tau_retail, sort_state_json):
+def update_leaderboard(selected_mwoz, selected_tau_airline, selected_tau_retail, sort_state):
     """
-    Update the leaderboard by aggregating the data and generating the HTML table.
-    The sort_state_json is a JSON string that represents the current sort state.
+    Update the leaderboard by creating the aggregated DataFrame and converting it to HTML.
     """
-    sort_state = json.loads(sort_state_json)
     df = create_grouped_leaderboard(selected_mwoz, selected_tau_airline, selected_tau_retail, sort_state)
     html_table = generate_html_table(df)
     return html_table
@@ -278,30 +263,60 @@ with gr.Blocks(title="Rome Leaderboard") as demo:
         cb_tau_airline = gr.Checkbox(label="tau-airline", value=True)
         cb_tau_retail = gr.Checkbox(label="tau-retail", value=True)
     
-    # Hidden textbox to store sort state; its elem_id is used by the embedded JS.
-    hidden_sort_state = gr.Textbox(value=json.dumps({"sort_by": "Average Score", "ascending": False}),
-                                   visible=False, elem_id="hidden_sort_state")
+    gr.Markdown("### Sort by (click a button to toggle ascending/descending):")
+    with gr.Row():
+        btn_avg = gr.Button("Average Score")
+        btn_conv = gr.Button("Conversation Consistency")
+        btn_backend = gr.Button("Backend Consistency")
+        btn_policy = gr.Button("Policy Completeness")
+    
+    # Initialize sort state: default sort by Average Score descending.
+    sort_state = gr.State({"sort_by": "Average Score", "ascending": False})
     
     leaderboard_display = gr.HTML(label="Aggregated Model Rankings")
     
-    # Update leaderboard when checkboxes or the hidden sort state change.
-    cb_mwoz.change(fn=update_leaderboard, 
-                   inputs=[cb_mwoz, cb_tau_airline, cb_tau_retail, hidden_sort_state],
-                   outputs=leaderboard_display)
-    cb_tau_airline.change(fn=update_leaderboard, 
-                          inputs=[cb_mwoz, cb_tau_airline, cb_tau_retail, hidden_sort_state],
-                          outputs=leaderboard_display)
-    cb_tau_retail.change(fn=update_leaderboard, 
-                         inputs=[cb_mwoz, cb_tau_airline, cb_tau_retail, hidden_sort_state],
-                         outputs=leaderboard_display)
-    hidden_sort_state.change(fn=update_leaderboard, 
-                             inputs=[cb_mwoz, cb_tau_airline, cb_tau_retail, hidden_sort_state],
-                             outputs=leaderboard_display)
+    refresh_btn = gr.Button("🔄 Refresh Leaderboard")
+    
+    # Sort button events.
+    btn_avg.click(fn=sort_by_avg, inputs=[sort_state], outputs=[sort_state]).then(
+        fn=update_leaderboard,
+        inputs=[cb_mwoz, cb_tau_airline, cb_tau_retail, sort_state],
+        outputs=leaderboard_display
+    )
+    btn_conv.click(fn=sort_by_conv, inputs=[sort_state], outputs=[sort_state]).then(
+        fn=update_leaderboard,
+        inputs=[cb_mwoz, cb_tau_airline, cb_tau_retail, sort_state],
+        outputs=leaderboard_display
+    )
+    btn_backend.click(fn=sort_by_backend, inputs=[sort_state], outputs=[sort_state]).then(
+        fn=update_leaderboard,
+        inputs=[cb_mwoz, cb_tau_airline, cb_tau_retail, sort_state],
+        outputs=leaderboard_display
+    )
+    btn_policy.click(fn=sort_by_policy, inputs=[sort_state], outputs=[sort_state]).then(
+        fn=update_leaderboard,
+        inputs=[cb_mwoz, cb_tau_airline, cb_tau_retail, sort_state],
+        outputs=leaderboard_display
+    )
+    
+    # Refresh button event.
+    refresh_btn.click(
+        fn=update_leaderboard,
+        inputs=[cb_mwoz, cb_tau_airline, cb_tau_retail, sort_state],
+        outputs=leaderboard_display
+    )
+    
+    # Update leaderboard immediately when any checkbox changes.
+    cb_mwoz.change(fn=update_leaderboard, inputs=[cb_mwoz, cb_tau_airline, cb_tau_retail, sort_state], outputs=leaderboard_display)
+    cb_tau_airline.change(fn=update_leaderboard, inputs=[cb_mwoz, cb_tau_airline, cb_tau_retail, sort_state], outputs=leaderboard_display)
+    cb_tau_retail.change(fn=update_leaderboard, inputs=[cb_mwoz, cb_tau_airline, cb_tau_retail, sort_state], outputs=leaderboard_display)
     
     # Load initial leaderboard on app start.
-    demo.load(fn=update_leaderboard, 
-              inputs=[cb_mwoz, cb_tau_airline, cb_tau_retail, hidden_sort_state],
-              outputs=leaderboard_display)
+    demo.load(
+        fn=update_leaderboard,
+        inputs=[cb_mwoz, cb_tau_airline, cb_tau_retail, sort_state],
+        outputs=leaderboard_display
+    )
 
 if __name__ == "__main__":
     demo.launch()