Preserve scroll when re-generating plots

app.py

@@ -2,7 +2,7 @@ import json
 import pandas as pd
 import gradio as gr
 from gradio_leaderboard import Leaderboard, ColumnFilter, SelectColumns
-from css_html_js import custom_css
+from css_html_js import custom_css, trigger_plot
 from parse import read_json, read_data
 from utils import model_hyperlink, filter_RTLRepo, filter_bench, handle_special_cases
 from typing import Union
@@ -45,6 +45,7 @@ def generate_scatter_plot(benchmark, metric):
     scatter_data['y'] = scatter_data[metric]
     scatter_data['size'] = (scatter_data['x'] ** 0.3) * 40
 
+    
     type_colors = {"General": "green", "Coding": "yellow", "RTL-Specific": "blue"}
     scatter_data['color'] = scatter_data['Model Type'].map(type_colors).fillna('gray')
 
@@ -78,9 +79,26 @@ def generate_scatter_plot(benchmark, metric):
 
     return fig
 
-with gr.Blocks(css=custom_css) as app:
+js_func = """
+function refresh() {
+    const url = new URL(window.location);
+
+    if (url.searchParams.get('__theme') !== 'light') {
+        url.searchParams.set('__theme', 'light');
+        window.location.href = url.href;
+    }
+}
+"""
+        
+with gr.Blocks(css=custom_css, js=js_func) as app:
     df, benchmarks, metrics, default_metric = read_data()
-    gr.Markdown("""# TuRTLe 🐢 Model Leaderboard
+    gr.Markdown("""# TuRTLe 🐢 Model Leaderboard""")
+    gr.HTML("""
+    <p align="center">
+        <img src='/gradio_api/file=logo.png' alt='TuRTLe Logo' width='220'/> <br/>
+    </p>
+    """)
+    gr.Markdown("""
     Welcome to the TuRTLe Model Leaderboard! Use the filters below to explore different RTL benchmarks and models.
     [GitHub Repository](https://github.com/https://github.com/HPAI-BSC) | [arXiv Preprint](https://arxiv.org/) | [How to submit](https://github.com/https://github.com/HPAI-BSC)<br/>
     Contact us: [email protected]
@@ -147,14 +165,34 @@ with gr.Blocks(css=custom_css) as app:
     bubble_benchmark.change(
         fn=on_benchmark_change, 
         inputs=[bubble_benchmark, bubble_metric],
-        outputs=[bubble_metric, scatter_plot]
-    )
+        outputs=[bubble_metric, scatter_plot],
+        js=""" // this is to avoid resetting user scroll each time a plot is re-generated
+        (benchmark, metric) => {
+            let scrollY = window.scrollY;  
+            const observer = new MutationObserver(() => {
+                window.scrollTo(0, scrollY);
+                observer.disconnect();
+            });
+            observer.observe(document.getElementById('full-width-plot'), { childList: true });
+            return [benchmark, metric];  
+        }
+        """)
 
     bubble_metric.change(
         fn=on_metric_change,
         inputs=[bubble_benchmark, bubble_metric],
-        outputs=[bubble_benchmark, scatter_plot]
-    )
+        outputs=[bubble_benchmark, scatter_plot],
+        js=""" // this is to avoid resetting user scroll each time a plot is re-generated
+        (benchmark, metric) => {
+            let scrollY = window.scrollY;  
+            const observer = new MutationObserver(() => {
+                window.scrollTo(0, scrollY);
+                observer.disconnect();
+            });
+            observer.observe(document.getElementById('full-width-plot'), { childList: true });
+            return [benchmark, metric];  
+        }
+        """)
     
 
-app.launch()
+app.launch(allowed_paths=["logo.png"])

css_html_js.py

@@ -1,4 +1,7 @@
 custom_css = """
+#component-1 {
+    text-align: center;
+}
 #component-0 {
     width: 75vw;
     margin: 0 auto;
@@ -108,3 +111,13 @@ get_window_url_params = """
         return url_params;
     }
     """
+
+trigger_plot = """
+window.scrollY_before_update = window.scrollY; // Store scroll position
+console.log("Saved ScrollY:", window.scrollY_before_update);
+
+setTimeout(function() {
+    console.log("Restoring ScrollY:", window.scrollY_before_update);
+    window.scrollTo(0, window.scrollY_before_update);
+}, 50);
+"""

main.py

@@ -1,6 +0,0 @@
-def main():
-    print("Hello from tortuga!")
-
-
-if __name__ == "__main__":
-    main()

pyproject.toml

@@ -8,4 +8,5 @@ dependencies = [
     "gradio>=5.21.0",
     "gradio-leaderboard>=0.0.13",
     "pandas>=2.2.3",
+    "plotly>=6.0.1",
 ]