Redesign UI with country-first and category-first exploration modes

- Add two distinct exploration tabs: "Explore by Country" and "Explore by Category"
- Country mode: Select countries first, then optionally filter by categories
- Category mode: Select categories first, then optionally filter by countries
- Update UI with clear instructions for each exploration path
- Make primary selection required and secondary filter optional
- Improve user experience with focused navigation paths

This addresses the requirement to allow users to explore data starting from
either country or category as their primary dimension.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

app.py

@@ -231,23 +231,42 @@ with gr.Blocks(title="GVFD Navigator", theme=gr.themes.Soft()) as demo:
     **Data Source**: [IFVI Global Value Factor Database V2](https://huggingface.co/datasets/danielrosehill/Global-Value-Factor-Database-Refactor-V2)
     """)
 
-    with gr.Row():
-        with gr.Column(scale=1):
-            gr.Markdown("### Filters")
+    with gr.Tabs() as exploration_mode:
+        with gr.Tab("Explore by Country"):
+            gr.Markdown("""
+            ### Select a Country
+            Choose one or more countries to see all their environmental value factors across different categories.
+            """)
             country_selector = gr.Dropdown(
                 choices=get_countries(),
                 multiselect=True,
-                label="Select Countries",
-                info="Leave empty to show all countries"
+                label="Select Country/Countries",
+                info="Start typing to search..."
             )
-            category_selector = gr.CheckboxGroup(
+            country_category_filter = gr.CheckboxGroup(
                 choices=get_categories(),
-                label="Select Categories",
-                info="Leave empty to show all categories"
+                label="Filter by Categories (Optional)",
+                info="Leave empty to show all categories for selected countries"
             )
+            country_refresh_btn = gr.Button("Show Country Data", variant="primary", size="lg")
 
-            gr.Markdown("---")
-            refresh_btn = gr.Button("Update Visualizations", variant="primary")
+        with gr.Tab("Explore by Category"):
+            gr.Markdown("""
+            ### Select a Category
+            Choose an environmental impact category to compare value factors across different countries.
+            """)
+            category_selector = gr.Dropdown(
+                choices=get_categories(),
+                multiselect=True,
+                label="Select Category/Categories"
+            )
+            category_country_filter = gr.Dropdown(
+                choices=get_countries(),
+                multiselect=True,
+                label="Filter by Countries (Optional)",
+                info="Leave empty to show all countries for selected categories"
+            )
+            category_refresh_btn = gr.Button("Show Category Data", variant="primary", size="lg")
 
     with gr.Row():
         with gr.Column():
@@ -423,16 +442,17 @@ with gr.Blocks(title="GVFD Navigator", theme=gr.themes.Soft()) as demo:
             get_data_table(countries, categories)
         )
 
-    refresh_btn.click(
+    # Handler for country exploration mode
+    country_refresh_btn.click(
         fn=update_all,
-        inputs=[country_selector, category_selector],
+        inputs=[country_selector, country_category_filter],
         outputs=[bar_chart, map_chart, comparison_chart, box_plot, stats_output, data_table]
     )
 
-    # Load initial visualizations
-    demo.load(
+    # Handler for category exploration mode
+    category_refresh_btn.click(
         fn=update_all,
-        inputs=[country_selector, category_selector],
+        inputs=[category_country_filter, category_selector],
         outputs=[bar_chart, map_chart, comparison_chart, box_plot, stats_output, data_table]
     )