ui: add fetch on click tab

app.py

@@ -20,13 +20,11 @@ def get_data():
         df = pd.DataFrame(predictions_list)
 
         if not df.empty:
-            df = df.sort_values(
-                by="probability", ascending=True
-            )  # Ascending for horizontal bar
+            # Sort for Chart (Bottom-up for horizontal)
+            chart_df = df.sort_values(by="probability", ascending=True)
 
-            # Create Plotly Chart
             fig = px.bar(
-                df,
+                chart_df,
                 x="probability",
                 y="repo_name",
                 orientation="h",
@@ -38,12 +36,15 @@ def get_data():
                     "language": "Language",
                 },
                 template="plotly_dark",
+                color_discrete_sequence=px.colors.qualitative.Safe,
             )
             fig.update_layout(
-                paper_bgcolor="rgba(0,0,0,0)", plot_bgcolor="rgba(0,0,0,0)"
+                paper_bgcolor="rgba(0,0,0,0)",
+                plot_bgcolor="rgba(0,0,0,0)",
+                font_color="#8b949e",
             )
 
-            # Prepare Table
+            # Prepare Table (Top-down)
             table_df = df.sort_values(by="probability", ascending=False).copy()
             table_df["repo_name"] = table_df["repo_name"].apply(
                 lambda x: f'<a href="https://github.com/{x}" target="_blank" style="color: #58a6ff; text-decoration: none; font-weight: bold;">🔗 {x}</a>'
@@ -60,23 +61,29 @@ def get_data():
         return pd.DataFrame({"Error": [str(e)]}), "⚠️ Error loading data", None
 
 
-with gr.Blocks() as demo:
+with gr.Blocks(theme=gr.themes.Soft(primary_hue="blue")) as demo:
     gr.HTML(
-        '<div style="text-align: center; padding: 20px;"><h1 style="color: white;">📈 GitHub Trend Predictor</h1></div>'
+        '<div style="text-align: center; padding: 10px;"><h1 style="color: #f0f6fc;">📈 GitHub Trend Predictor</h1></div>'
     )
-    date_display = gr.Markdown(value="Checking for updates...")
 
-    with gr.Tabs():
-        with gr.Tab("📊 Visual Forecast"):
-            chart = gr.Plot()  # Stable Plotly container
+    with gr.Row():
+        date_display = gr.Markdown(value="Syncing...", style={"text-align": "center"})
 
-        with gr.Tab("📋 Detailed Rankings"):
+    # We wrap the tabs in a variable to attach the listener
+    with gr.Tabs() as tabs:
+        with gr.Tab("📊 Visual Forecast", id="chart_tab"):
+            chart = gr.Plot()
+
+        with gr.Tab("📋 Detailed Rankings", id="list_tab"):
             table = gr.Dataframe(datatype=["html", "str", "str"], interactive=False)
 
-    refresh_btn = gr.Button("🔄 Sync Latest Predictions", variant="primary")
+    # --- EVENT LISTENERS ---
+
+    # 1. Sync when the page first loads
     demo.load(fn=get_data, outputs=[table, date_display, chart])
-    refresh_btn.click(fn=get_data, outputs=[table, date_display, chart])
+
+    # 2. Sync whenever a user clicks/switches between tabs
+    tabs.select(fn=get_data, outputs=[table, date_display, chart])
 
 if __name__ == "__main__":
-    # We remove CSS/Theme from here to ensure the core app starts even if Gradio 6.x config is strict
     demo.launch()