TLDR: A single trailing comma was causing a race-condition bug.

By having two event handlers on the same task_radio component, it meant that sometimes one event handler was executed before the other and so on => race condition.

Tried grouping both onto a single event handler but gradio was complaining. And the reason of the complaint was because we were returning a tuple.

The leaderboard component had a trailing comma at the end which converted it onto a tuple instead of a list.

app.py

@@ -64,13 +64,16 @@ def filter_leaderboard(task, benchmark, model_type, search_query, max_params):
 
 def update_benchmarks_by_task(task):
     if task == "Spec-to-RTL":
-        return gr.update(value="All", choices=["All"] + s2r_benchs)
+        new_benchmarks = ["All"] + s2r_benchs
     elif task == "Code Completion":
-        return gr.update(value="All", choices=["All"] + cc_benchs)
+        new_benchmarks = ["All"] + cc_benchs
     elif task == "Line Completion":
-        return gr.update(value="All", choices=["All"] + lc_benchs)
+        new_benchmarks = lc_benchs
     else:
-        return gr.update(value="All", choices=["All"] + benchmarks)
+        new_benchmarks = ["All"] + benchmarks
+    benchmark_value = "All" if "All" in new_benchmarks else new_benchmarks[0]
+    filtered = filter_leaderboard(task, benchmark_value, model_type_dropdown.value, search_box.value, params_slider.value)
+    return gr.update(value=benchmark_value, choices=new_benchmarks), filtered
 
 def generate_scatter_plot(benchmark, metric):
     if benchmark == "All":
@@ -256,7 +259,7 @@ with gr.Blocks(css=custom_css, js=js_func, theme=gr.themes.Default(primary_hue=c
                 wrap=True,
                 datatype=["markdown", "html",],
                 interactive=False,
-                column_widths=["7%", "25%", "10%", "17%", "6%", "6%", "6%", "6%", "6%", "7%"]),
+                column_widths=["7%", "25%", "10%", "17%", "6%", "6%", "6%", "6%", "6%", "7%"])
         
         with gr.Tab("Interactive Bubble Plot"):
             with gr.Row(equal_height=True):
@@ -306,8 +309,15 @@ with gr.Blocks(css=custom_css, js=js_func, theme=gr.themes.Default(primary_hue=c
                 )
     
     # event handlers, ugly way but it works
-    task_radio.change(fn=update_benchmarks_by_task, inputs=[task_radio], outputs=[benchmark_radio])
-    task_radio.change(fn=filter_leaderboard, inputs=[task_radio, benchmark_radio, model_type_dropdown, search_box, params_slider], outputs=leaderboard)
+    print(f"type(benchmark_radio): {type(benchmark_radio)}")
+    print(f"type(leaderboard): {type(leaderboard)}")
+    task_radio.change(
+        fn=update_benchmarks_by_task,
+        inputs=[task_radio],
+        outputs=[benchmark_radio, leaderboard]
+    )
+    # task_radio.change(fn=update_benchmarks_by_task, inputs=[task_radio], outputs=[benchmark_radio])
+    # task_radio.change(fn=filter_leaderboard, inputs=[task_radio, benchmark_radio, model_type_dropdown, search_box, params_slider], outputs=leaderboard)
     benchmark_radio.change(fn=filter_leaderboard, inputs=[task_radio, benchmark_radio, model_type_dropdown, search_box, params_slider], outputs=leaderboard)
     model_type_dropdown.change(fn=filter_leaderboard, inputs=[task_radio, benchmark_radio, model_type_dropdown, search_box, params_slider], outputs=leaderboard)
     search_box.change(fn=filter_leaderboard, inputs=[task_radio, benchmark_radio, model_type_dropdown, search_box, params_slider], outputs=leaderboard)