Upload app.py

app.py

@@ -108,10 +108,23 @@ def _grid_html(df: pd.DataFrame) -> str:
     </html>
     """
 
+# ---------- Helpers for cascading options ----------
+def _opts_with_all(series: pd.Series):
+    vals = [x for x in series.dropna().astype(str).unique() if str(x).strip()]
+    return ["All"] + sorted(vals)
+
+def _brand_and_dealer_options_for_country(country: str):
+    df_c = DF if country == "All" else DF[DF["country"].astype(str) == str(country)]
+    return _opts_with_all(df_c["brand"]), _opts_with_all(df_c["dealer"])
+
+def _dealer_options_for_country_brand(country: str, brand: str):
+    df_c = DF if country == "All" else DF[DF["country"].astype(str) == str(country)]
+    df_cb = df_c if brand == "All" else df_c[df_c["brand"].astype(str) == str(brand)]
+    return _opts_with_all(df_cb["dealer"])
+
 # ---------- Filtering logic ----------
 def filter_offers(country: str, brand: str, dealer: str, limit: int):
     df_f = DF.copy()
-    # normalize to str before comparing
     if country and country != "All":
         df_f = df_f[df_f["country"].astype(str) == str(country)]
     if brand and brand != "All":
@@ -121,13 +134,53 @@ def filter_offers(country: str, brand: str, dealer: str, limit: int):
     df_show = df_f.head(int(limit))
     return _grid_html(df_show)
 
+# --- Gradio event handlers for cascading behavior ---
+def init_on_load(country, brand, dealer, limit):
+    # On first render, set brand/dealer choices according to country
+    brand_opts, dealer_opts = _brand_and_dealer_options_for_country(country)
+    brand_val  = brand  if brand  in brand_opts  else "All"
+    dealer_val = dealer if dealer in dealer_opts else "All"
+    html = filter_offers(country, brand_val, dealer_val, limit)
+    return (
+        gr.update(choices=brand_opts, value=brand_val),
+        gr.update(choices=dealer_opts, value=dealer_val),
+        html
+    )
+
+def on_country_change(country, brand, dealer, limit):
+    # Update brand & dealer choices to match selected country
+    brand_opts, dealer_opts = _brand_and_dealer_options_for_country(country)
+    brand_val  = brand  if brand  in brand_opts  else "All"
+    dealer_val = dealer if dealer in dealer_opts else "All"
+    html = filter_offers(country, brand_val, dealer_val, limit)
+    return (
+        gr.update(choices=brand_opts, value=brand_val),
+        gr.update(choices=dealer_opts, value=dealer_val),
+        html
+    )
+
+def on_brand_change(country, brand, dealer, limit):
+    # Update dealer choices to match (country, brand)
+    dealer_opts = _dealer_options_for_country_brand(country, brand)
+    dealer_val  = dealer if dealer in dealer_opts else "All"
+    html = filter_offers(country, brand, dealer_val, limit)
+    return (
+        gr.update(choices=dealer_opts, value=dealer_val),
+        html
+    )
+
+def on_dealer_change(country, brand, dealer, limit):
+    return filter_offers(country, brand, dealer, limit)
+
+def on_limit_change(country, brand, dealer, limit):
+    return filter_offers(country, brand, dealer, limit)
+
 # ---------- Build Gradio UI ----------
 def app():
-    countries = ["All"] + sorted(DF["country"].dropna().astype(str).unique().tolist())
-    brands    = ["All"] + sorted(DF["brand"].dropna().astype(str).unique().tolist())
-    dealers   = ["All"] + sorted(DF["dealer"].dropna().astype(str).unique().tolist())
+    countries = _opts_with_all(DF["country"])
+    # initial (All) options for brand/dealer
+    brands, dealers = _brand_and_dealer_options_for_country("All")
 
-    # One scrolling region (like an iframe) for the HTML
     custom_css = """
     body, .gradio-container, .gr-block, .gr-button, .gr-input, .gr-dropdown,
     .gradio-container * { font-family: Inter, Segoe UI, Roboto, Helvetica, Arial, sans-serif !important; }
@@ -139,20 +192,46 @@ def app():
 
         with gr.Row():
             dd_country = gr.Dropdown(choices=countries, label="Country", value="All")
-            dd_brand   = gr.Dropdown(choices=brands, label="Brand", value="All")
-            dd_dealer  = gr.Dropdown(choices=dealers, label="Dealer", value="All")
+            dd_brand   = gr.Dropdown(choices=brands,    label="Brand",   value="All")
+            dd_dealer  = gr.Dropdown(choices=dealers,   label="Dealer",  value="All")
             s_limit    = gr.Slider(6, 200, value=50, step=6, label="Max Offers")
 
         out_html = gr.HTML(elem_id="cards-pane")
 
-        # Render once on page load using current input values
-        demo.load(filter_offers, [dd_country, dd_brand, dd_dealer, s_limit], out_html)
-
-        # Auto-update whenever a filter changes (NO button needed)
-        dd_country.change(filter_offers, [dd_country, dd_brand, dd_dealer, s_limit], out_html)
-        dd_brand.change(  filter_offers, [dd_country, dd_brand, dd_dealer, s_limit], out_html)
-        dd_dealer.change( filter_offers, [dd_country, dd_brand, dd_dealer, s_limit], out_html)
-        s_limit.change(  filter_offers, [dd_country, dd_brand, dd_dealer, s_limit], out_html)
+        # Initialize choices + grid on page load
+        demo.load(
+            init_on_load,
+            [dd_country, dd_brand, dd_dealer, s_limit],
+            [dd_brand, dd_dealer, out_html]
+        )
+
+        # Country -> update Brand + Dealer choices + grid
+        dd_country.change(
+            on_country_change,
+            [dd_country, dd_brand, dd_dealer, s_limit],
+            [dd_brand, dd_dealer, out_html]
+        )
+
+        # Brand -> update Dealer choices + grid
+        dd_brand.change(
+            on_brand_change,
+            [dd_country, dd_brand, dd_dealer, s_limit],
+            [dd_dealer, out_html]
+        )
+
+        # Dealer -> update grid
+        dd_dealer.change(
+            on_dealer_change,
+            [dd_country, dd_brand, dd_dealer, s_limit],
+            out_html
+        )
+
+        # Limit -> update grid
+        s_limit.change(
+            on_limit_change,
+            [dd_country, dd_brand, dd_dealer, s_limit],
+            out_html
+        )
 
     return demo