Add country filter

src/components/FilterBar.tsx

@@ -1,13 +1,29 @@
 import { useMemo } from "react";
 import conferencesData from "@/data/conferences.yml";
-import { X } from "lucide-react";
+import { X, ChevronRight, Filter } from "lucide-react";
+import { getAllCountries } from "@/utils/countryExtractor";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Conference } from "@/types/conference";
 
 interface FilterBarProps {
   selectedTags: Set<string>;
+  selectedCountries: Set<string>;
   onTagSelect: (tags: Set<string>) => void;
+  onCountrySelect: (countries: Set<string>) => void;
 }
 
-const FilterBar = ({ selectedTags = new Set(), onTagSelect }: FilterBarProps) => {
+const FilterBar = ({ 
+  selectedTags = new Set(), 
+  selectedCountries = new Set(),
+  onTagSelect,
+  onCountrySelect
+}: FilterBarProps) => {
   const uniqueTags = useMemo(() => {
     const tags = new Set<string>();
     if (Array.isArray(conferencesData)) {
@@ -30,47 +46,86 @@ const FilterBar = ({ selectedTags = new Set(), onTagSelect }: FilterBarProps) =>
     return selectedTags?.has(tagId) ?? false;
   };
 
+  const handleTagChange = (tagId: string) => {
+    const newSelectedTags = new Set(selectedTags);
+    if (newSelectedTags.has(tagId)) {
+      newSelectedTags.delete(tagId);
+    } else {
+      newSelectedTags.add(tagId);
+    }
+    onTagSelect(newSelectedTags);
+  };
+
+  const clearAllFilters = () => {
+    onTagSelect(new Set());
+    onCountrySelect(new Set());
+  };
+
   return (
-    <div className="w-full py-6 bg-white border-b border-neutral-200 animate-fade-in shadow-sm">
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-        <div className="flex flex-wrap gap-3">
-          {uniqueTags.map((filter) => (
-            <button
-              key={filter.id}
-              title={filter.description}
-              onClick={() => {
-                const newTags = new Set(selectedTags);
-                if (isTagSelected(filter.id)) {
-                  newTags.delete(filter.id);
-                } else {
-                  newTags.add(filter.id);
-                }
-                onTagSelect(newTags);
-              }}
-              className={`
-                px-4 py-2 text-sm font-medium rounded-lg transition-all duration-200
-                filter-tag
-                ${isTagSelected(filter.id)
-                  ? "bg-primary text-white shadow-sm filter-tag-active" 
-                  : "bg-neutral-50 text-neutral-600 hover:bg-neutral-100 hover:text-neutral-900"
-                }
-              `}
+    <div className="bg-white shadow rounded-lg p-4">
+      <div className="flex flex-col space-y-4">
+        <div className="flex flex-wrap items-center gap-2">
+          <Popover>
+            <PopoverTrigger asChild>
+              <Button variant="outline" size="sm" className="h-8 gap-1">
+                <Filter className="h-4 w-4" />
+                Filter by Tag
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent className="w-80 p-4" align="start">
+              <div className="space-y-4">
+                <div>
+                  <div className="flex items-center justify-between mb-4">
+                    <h4 className="text-sm font-medium text-gray-800">Tags</h4>
+                    <ChevronRight className="h-4 w-4 text-gray-500" />
+                  </div>
+                  <div className="max-h-60 overflow-y-auto space-y-2">
+                    {uniqueTags.map(tag => (
+                      <div key={tag.id} className="flex items-center space-x-2 hover:bg-gray-50 p-1 rounded">
+                        <Checkbox 
+                          id={`tag-${tag.id}`}
+                          checked={isTagSelected(tag.id)}
+                          onCheckedChange={() => handleTagChange(tag.id)}
+                        />
+                        <label 
+                          htmlFor={`tag-${tag.id}`}
+                          className="text-sm font-medium text-gray-700 cursor-pointer w-full py-1"
+                        >
+                          {tag.label}
+                        </label>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              </div>
+            </PopoverContent>
+          </Popover>
+
+          {/* Clear all filters button */}
+          {(selectedTags.size > 0 || selectedCountries.size > 0) && (
+            <Button 
+              variant="ghost" 
+              size="sm" 
+              onClick={clearAllFilters}
+              className="text-neutral-500 hover:text-neutral-700"
             >
-              {filter.label}
-            </button>
-          ))}
+              Clear all
+            </Button>
+          )}
           
-          {selectedTags?.size > 0 && (
+          {/* Display selected tags */}
+          {Array.from(selectedTags).map(tag => (
             <button
-              onClick={() => onTagSelect(new Set())}
-              className="px-4 py-2 text-sm font-medium rounded-lg transition-all duration-200
-                bg-red-50 text-red-600 hover:bg-red-100 hover:text-red-700
-                flex items-center gap-2"
+              key={tag}
+              className="inline-flex items-center px-3 py-1 rounded-full text-sm bg-blue-100 text-blue-800 hover:bg-blue-200 font-medium"
+              onClick={() => handleTagChange(tag)}
             >
-              <X className="h-4 w-4" />
-              Deselect All
+              {tag.split("-").map(word => 
+                word.charAt(0).toUpperCase() + word.slice(1)
+              ).join(" ")}
+              <X className="ml-1 h-3 w-3" />
             </button>
-          )}
+          ))}
         </div>
       </div>
     </div>

src/data/conferences.yml

@@ -6,7 +6,8 @@
   deadline: '2025-03-03 23:59:59'
   abstract_deadline: '2025-02-26 23:59:59'
   timezone: UTC-12
-  place: Philadelphia, Pennsylvania, USA
+  city: Philadelphia
+  country: USA
   date: August 11-14, 2025
   start: 2025-08-11
   end: 2025-08-14
@@ -24,7 +25,8 @@
   deadline: '2025-04-30 23:59:00'
   abstract_deadline: '2025-04-23 23:59:00'
   timezone: UTC-12
-  place: Seoul, Korea
+  city: Seoul
+  country: South Korea
   date: Sep 27-30, 2025
   tags:
   - machine-learning
@@ -41,7 +43,8 @@
   link: https://2025.ieee-icra.org
   deadline: '2024-07-15 12:00:00'
   timezone: UTC-4
-  place: Atlanta (GA), USA
+  city: Atlanta
+  country: USA
   date: May 19-23, 2025
   tags:
   - machine-learning
@@ -58,7 +61,8 @@
   link: https://wacv2025.thecvf.com/
   deadline: '2024-07-15 23:59:59'
   timezone: UTC-7
-  place: Tucson, Arizona, USA
+  city: Tucson
+  country: USA
   date: February 28 - March 4, 2025
   tags:
   - machine-learning
@@ -74,7 +78,8 @@
   link: https://www.wsdm-conference.org/2025/
   deadline: '2024-08-14 23:59:00'
   timezone: UTC-12
-  place: Hannover, Germany
+  city: Hannover
+  country: Germany
   venue: Hannover Congress Center, Hannover, Germany
   date: March 10-14, 2025
   start: 2025-03-10
@@ -82,6 +87,8 @@
   tags:
   - web-search
   - data-mining
+  abstract_deadline: '2024-08-07 23:59:00'
+  rankings: 'CCF: B, CORE: A*, THCPL: B'
 
 - title: AAAI
   year: 2025
@@ -90,7 +97,8 @@
   link: https://aaai.org/conference/aaai/aaai-25/
   deadline: '2024-08-15 23:59:59'
   timezone: UTC-12
-  place: PHILADELPHIA, PENNSYLVANIA, USA
+  city: PHILADELPHIA
+  country: PENNSYLVANIA
   date: February 25 - March 4, 2025
   tags:
   - data-mining
@@ -110,7 +118,8 @@
   link: https://2025.ieeeicassp.org/
   deadline: '2024-09-09 23:59:59'
   timezone: UTC-12
-  place: Hyderabad, India
+  city: Hyderabad
+  country: India
   venue: Hyderabad International Convention Center, Hyderabad, India
   date: April 6-11, 2025
   start: 2025-04-06
@@ -126,7 +135,8 @@
   deadline: '2024-09-12 23:59:59'
   abstract_deadline: '2024-09-05 23:59:59'
   timezone: UTC-12
-  place: Yokohama, Japan
+  city: Yokohama
+  country: Japan
   venue: Pacifico Yokohama Conference Center, Yokohama, Japan
   date: April 26 - May 01, 2025
   start: 2025-04-26
@@ -143,7 +153,8 @@
   link: https://coling2025.org/
   deadline: '2024-09-16 23:59:59'
   timezone: UTC-12
-  place: Abu Dhabi, UAE
+  city: Abu Dhabi
+  country: UAE
   date: Jan 19 - Jan 24, 2025
   tags:
   - natural-language-processing
@@ -161,7 +172,8 @@
   link: https://algorithmiclearningtheory.org/alt2025/
   deadline: '2024-10-01 09:59:59'
   timezone: UTC+0
-  place: Milan, Italy
+  city: Milan
+  country: Italy
   date: February 24-27, 2025
   tags:
   - machine-learning
@@ -175,7 +187,7 @@
   link: https://iclr.cc/Conferences/2025
   deadline: '2024-10-01 23:59:59'
   timezone: UTC-12
-  place: Singapore
+  city: Singapore
   date: April 24-28, 2025
   tags:
   - machine-learning
@@ -195,7 +207,8 @@
   link: https://www.eg.org/wp/event/eurographics-2025/
   deadline: '2024-10-03 23:59:59'
   timezone: UTC+1
-  place: London, UK
+  city: London
+  country: UK
   date: May 12 - 16, 2025
   tags:
   - computer-graphics
@@ -209,7 +222,8 @@
   deadline: '2024-10-09 23:59:59'
   abstract_deadline: '2024-10-02 23:59:59'
   timezone: UTC-12
-  place: Lucca, Tuscany, Italy
+  city: Lucca
+  country: Tuscany
   venue: IMT School for Advanced Studies Lucca, Lucca, Italy
   date: April 6 - April 10, 2025
   start: '2025-04-06'
@@ -225,7 +239,8 @@
   link: https://aistats.org/aistats2025
   deadline: '2024-10-10 23:59:59'
   timezone: UTC-12
-  place: Mai Khao, Thailand
+  city: Mai Khao
+  country: Thailand
   date: May 3-5, 2025
   tags:
   - machine-learning
@@ -244,7 +259,8 @@
   link: https://2025.naacl.org/
   deadline: '2024-10-15 23:59:59'
   timezone: UTC-12
-  place: Albuquerque, New Mexico, USA
+  city: Albuquerque
+  country: New Mexico
   date: April 29-May 4, 2025
   tags:
   - natural-language-processing
@@ -259,7 +275,8 @@
   link: https://aamas2025.org/
   deadline: '2024-10-16 23:59:59'
   timezone: UTC-12
-  place: Detroit, Michigan, USA
+  city: Detroit
+  country: Michigan
   date: May 19-23, 2025
   tags:
   - machine-learning
@@ -277,7 +294,8 @@
   link: https://cvpr.thecvf.com/Conferences/2025/CallForPapers
   deadline: '2024-11-14 23:59:00'
   timezone: UTC-8
-  place: Nashville, Tennessee, USA
+  city: Nashville
+  country: Tennessee
   date: June 10-17, 2025
   tags:
   - computer-vision
@@ -297,7 +315,8 @@
   link: https://www.esann.org/
   deadline: '2024-11-20 00:00:00'
   timezone: UTC-8
-  place: Bruges, Belgium
+  city: Bruges
+  country: Belgium
   date: April 23 - April 25, 2025
   tags: []
   abstract_deadline: '2024-11-20 00:00:00'
@@ -310,7 +329,8 @@
   link: https://cpal.cc/
   deadline: '2024-11-25 23:59:59'
   timezone: AoE
-  place: California, USA
+  city: California
+  country: USA
   date: March 24-27, 2025
   tags:
   - machine-learning
@@ -323,7 +343,8 @@
   link: https://www.cec2025.org/
   deadline: '2025-01-15 23:59:59'
   timezone: UTC-12
-  place: Hangzhou, China
+  city: Hangzhou
+  country: China
   date: June 8-12, 2025
   tags:
   - machine-learning
@@ -336,7 +357,8 @@
   link: https://s2025.siggraph.org/
   deadline: '2025-01-16 23:59:59'
   timezone: UTC-8
-  place: Vancouver, Canada
+  city: Vancouver
+  country: Canada
   venue: Convention Centre, Vancouver, Canada
   date: August 10-14, 2025
   start: '2025-08-10'
@@ -351,7 +373,8 @@
   link: https://2025.ijcai.org/
   deadline: '2025-01-23 23:59:59'
   timezone: UTC-12
-  place: Montreal, Canada.
+  city: Montreal
+  country: Canada
   date: August 16-22, 2025
   tags:
   - machine-learning
@@ -365,7 +388,8 @@
   link: https://roboticsconference.org
   deadline: '2025-01-24 23:59:00'
   timezone: AoE
-  place: Los Angeles, California, USA
+  city: Los Angeles
+  country: USA
   date: June 21-25, 2025
   tags:
   - machine-learning
@@ -379,7 +403,9 @@
   link: https://icml.cc/Conferences/2025
   deadline: '2025-01-30 23:59:59'
   timezone: UTC-12
-  place: Vancouver Convention Center, Vancouver, Canada
+  city: Vancouver
+  country: Canada
+  venue: Vancouver Convention Center
   date: July 11-19, 2025
   tags:
   - machine-learning
@@ -395,7 +421,8 @@
   link: https://2025.ijcnn.org/
   deadline: '2025-02-05 23:59:59'
   timezone: UTC-12
-  place: Rome, Italy
+  city: Rome
+  country: Italy
   date: June 30 - July 5, 2025
   tags:
   - machine-learning
@@ -408,7 +435,8 @@
   link: https://learningtheory.org/colt2025/
   deadline: '2025-02-06 16:59:59'
   timezone: UTC-5
-  place: Lyon, France
+  city: Lyon
+  country: France
   date: June 30 - July 4, 2025
   tags:
   - machine-learning
@@ -421,7 +449,8 @@
   link: https://www.auai.org/uai2025/
   deadline: '2025-02-10 23:59:59'
   timezone: AoE
-  place: Rio de Janeiro, Brazil
+  city: Rio de Janeiro
+  country: Brazil
   date: July 21-25, 2025
   tags:
   - machine-learning
@@ -433,11 +462,12 @@
   full_name: ACM SIGKDD Conference on Knowledge Discovery and Data Mining
   deadline: '2025-02-10 23:59:59'
   abstract_deadline: '2025-02-03 23:59:59'
-  start: '2025-08-03'
-  end: '2025-08-07'
   timezone: AoE
-  place: Toronto, ON, Canada
+  city: Toronto
+  country: Canada
   date: August 3 - August 7, 2025
+  start: '2025-08-03'
+  end: '2025-08-07'
   tags:
   - data-mining
   - machine-learning
@@ -453,7 +483,8 @@
   link: https://2025.aclweb.org/
   deadline: '2025-02-15 23:59:59'
   timezone: UTC-12
-  place: Vienna, Austria
+  city: Vienna
+  country: Austria
   date: July 27 - August 1, 2025
   tags:
   - natural-language-processing
@@ -470,7 +501,8 @@
   deadline: 2025-02-20 23:59
   abstract_deadline: 2025-02-01 23:59
   timezone: Russia/Moscow
-  place: Sirius, Sochi, Russia
+  city: Sochi
+  country: Russia
   date: March, 24-28, 2025
   start: 2025-03-24
   end: 2025-03-28
@@ -490,8 +522,9 @@
   deadline: '2025-02-28 23:59:59'
   abstract_deadline: '2025-02-21 23:59:59'
   timezone: UTC-12
+  city: Edmonton
+  country: Canada
   date: August 5 - August 8, 2025
-  place: Edmonton, Canada
   tags:
   - machine-learning
   - reinforcement-learning
@@ -504,7 +537,8 @@
   link: http://www.iros25.org/
   deadline: '2025-03-01 23:59:59'
   timezone: UTC-8
-  place: Hangzhou, China
+  city: Hangzhou
+  country: China
   date: October 19-25, 2025
   tags:
   - robotics
@@ -517,7 +551,8 @@
   link: https://ksem2025.scimeeting.cn/
   deadline: '2025-03-04 23:59:59'
   timezone: UTC+0
-  place: Macao SAR, China
+  city: Macao
+  country: China
   date: August 4-6, 2025
   tags:
   - machine-learning
@@ -530,7 +565,8 @@
   link: https://www.icdar2025.com/home
   deadline: '2025-03-07 23:59:59'
   timezone: UTC+0
-  place: Wuhan, China
+  city: Wuhan
+  country: China
   date: September 17-21, 2025
   tags:
   - computer-vision
@@ -544,7 +580,8 @@
   link: https://iccv.thecvf.com/Conferences/2025
   deadline: '2025-03-08 09:59:59'
   timezone: UTC+0
-  place: Honolulu, Hawaii
+  city: Honolulu
+  country: USA
   date: October 19-25, 2025
   tags:
   - machine-learning
@@ -563,7 +600,8 @@
   deadline: 2025-03-15 23:59
   abstract_deadline: 2025-03-15 23:59
   timezone: UTC-12
-  place: Kaunas, Lithuania
+  city: Kaunas
+  country: Lithuania
   date: September, 9-12, 2025
   start: 2025-09-09
   end: 2025-09-12
@@ -580,7 +618,8 @@
   link: https://colmweb.org/cfp.html
   deadline: '2025-03-27 23:59:59'
   timezone: AoE
-  place: Palais des Congrès Montreal, Canada
+  city: Montreal
+  country: Canada
   date: October 7-9, 2025
   tags:
   - natural-language-processing
@@ -592,10 +631,11 @@
   year: 2025
   id: ecai25
   full_name: European Conference on Artificial Intelligence
-  link: https://ecai2025.org/deadlines/
-  deadline: '2025-05-06 23:59:59'
+  link: https://www.ecai2025.eu/
+  deadline: '2025-03-30 23:59:59'
   timezone: UTC-12
-  place: Bologna, Italy
+  city: Bologna
+  country: Italy
   date: October 25-30, 2025
   tags:
   - machine-learning
@@ -610,7 +650,8 @@
   link: https://neurips.cc/
   deadline: '2025-05-16 23:59:59'
   timezone: UTC-8
-  place: San Diego, USA
+  city: San Diego
+  country: USA
   venue: San Diego Convention Center, San Diego, USA
   date: December 9-15, 2025
   start: '2025-12-09'
@@ -625,7 +666,8 @@
   link: https://2025.emnlp.org/
   deadline: '2025-05-19 23:59:59'
   timezone: UTC-12
-  place: Suzhou, China
+  city: Suzhou
+  country: China
   date: November 5 - 9, 2025
   start: '2025-11-05'
   end: '2025-11-09'
@@ -641,7 +683,8 @@
   link: https://conll.org/
   deadline: 2025-03-15 12:00
   timezone: UTC-12
-  place: Vienna, Austria
+  city: Vienna
+  country: Austria
   date: July 31 - August 1, 2025
   start: '2025-07-31'
   end: '2025-08-01'
@@ -657,7 +700,8 @@
   link: https://www3.cs.stonybrook.edu/~icdm2025/index.html
   deadline: '2025-06-06 23:59:59'
   timezone: AoE
-  place: Washington DC, USA
+  city: Washington DC
+  country: USA
   date: November 12 - November 15, 2025
   start: '2025-11-12'
   end: '2025-11-15'
@@ -671,7 +715,8 @@
   link: https://eccv.ecva.net/Conferences/2026
   deadline: '2026-03-06 11:00:00'
   timezone: UTC+0
+  city: Malmö
+  country: Sweden
   date: September 8 - September 13, 2026
-  place: Malmö, Sweden
   tags: 
   - computer-vision

src/pages/Index.tsx

@@ -6,12 +6,35 @@ import { Conference } from "@/types/conference";
 import { useState, useMemo, useEffect } from "react";
 import { Switch } from "@/components/ui/switch"
 import { parseISO, isValid, isPast } from "date-fns";
+import { extractCountry } from "@/utils/countryExtractor";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import { X, ChevronRight, Filter } from "lucide-react";
+import { getAllCountries } from "@/utils/countryExtractor";
 
 const Index = () => {
   const [selectedTags, setSelectedTags] = useState<Set<string>>(new Set());
+  const [selectedCountries, setSelectedCountries] = useState<Set<string>>(new Set());
   const [searchQuery, setSearchQuery] = useState("");
   const [showPastConferences, setShowPastConferences] = useState(false);
 
+  // Category buttons configuration
+  const categoryButtons = [
+    { id: "machine-learning", label: "Machine Learning" },
+    { id: "lifelong-learning", label: "Lifelong Learning" },
+    { id: "robotics", label: "Robotics" },
+    { id: "computer-vision", label: "Computer Vision" },
+    { id: "web-search", label: "Web Search" },
+    { id: "data-mining", label: "Data Mining" },
+    { id: "natural-language-processing", label: "Natural Language Processing" },
+    { id: "signal-processing", label: "Signal Processing" },
+    { id: "human-computer-interaction", label: "Human Computer Interaction" },
+    { id: "computer-graphics", label: "Computer Graphics" },
+    { id: "mathematics", label: "Mathematics" },
+    { id: "reinforcement-learning", label: "Reinforcement Learning" },
+  ];
+
   const filteredConferences = useMemo(() => {
     if (!Array.isArray(conferencesData)) {
       console.error("Conferences data is not an array:", conferencesData);
@@ -25,21 +48,27 @@ const Index = () => {
         const isUpcoming = !deadlineDate || !isValid(deadlineDate) || !isPast(deadlineDate);
         if (!showPastConferences && !isUpcoming) return false;
 
-        // Filter by tags and search query
+        // Filter by tags
         const matchesTags = selectedTags.size === 0 || 
           (Array.isArray(conf.tags) && conf.tags.some(tag => selectedTags.has(tag)));
+        
+        // Filter by countries
+        const matchesCountry = selectedCountries.size === 0 || 
+          (conf.country && selectedCountries.has(conf.country));
+        
+        // Filter by search query
         const matchesSearch = searchQuery === "" || 
           conf.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
           (conf.full_name && conf.full_name.toLowerCase().includes(searchQuery.toLowerCase()));
         
-        return matchesTags && matchesSearch;
+        return matchesTags && matchesCountry && matchesSearch;
       })
       .sort((a: Conference, b: Conference) => {
         const dateA = a.deadline && a.deadline !== 'TBD' ? parseISO(a.deadline).getTime() : Infinity;
         const dateB = b.deadline && b.deadline !== 'TBD' ? parseISO(b.deadline).getTime() : Infinity;
         return dateA - dateB;
       });
-  }, [selectedTags, searchQuery, showPastConferences]);
+  }, [selectedTags, selectedCountries, searchQuery, showPastConferences]);
 
   // Update handleTagsChange to handle multiple tags
   const handleTagsChange = (newTags: Set<string>) => {
@@ -50,36 +79,47 @@ const Index = () => {
     } else {
       searchParams.delete('tags');
     }
-    const newUrl = `${window.location.pathname}${searchParams.toString() ? `?${searchParams.toString()}` : ''}`;
-    window.history.pushState({}, '', newUrl);
+    window.history.replaceState({}, '', `${window.location.pathname}?${searchParams}`);
   };
 
-  useEffect(() => {
-    const handleUrlChange = (event: CustomEvent) => {
-      const { tag } = event.detail;
-      // Create new Set with existing tags plus the new one
-      const newTags = new Set(selectedTags);
-      if (newTags.has(tag)) {
-        newTags.delete(tag);
-      } else {
-        newTags.add(tag);
-      }
-      handleTagsChange(newTags);
-    };
+  const handleCountriesChange = (newCountries: Set<string>) => {
+    setSelectedCountries(newCountries);
+    const searchParams = new URLSearchParams(window.location.search);
+    if (newCountries.size > 0) {
+      searchParams.set('countries', Array.from(newCountries).join(','));
+    } else {
+      searchParams.delete('countries');
+    }
+    window.history.replaceState({}, '', `${window.location.pathname}?${searchParams}`);
+  };
+
+  // Toggle a single tag
+  const toggleTag = (tag: string) => {
+    const newTags = new Set(selectedTags);
+    if (newTags.has(tag)) {
+      newTags.delete(tag);
+    } else {
+      newTags.add(tag);
+    }
+    handleTagsChange(newTags);
+  };
 
-    window.addEventListener('urlchange', handleUrlChange as EventListener);
+  // Load filters from URL on initial render
+  useEffect(() => {
+    const searchParams = new URLSearchParams(window.location.search);
+    const tagsParam = searchParams.get('tags');
+    const countriesParam = searchParams.get('countries');
     
-    // Check URL params on mount
-    const params = new URLSearchParams(window.location.search);
-    const tagsParam = params.get('tags');
     if (tagsParam) {
-      setSelectedTags(new Set(tagsParam.split(',')));
+      const tags = tagsParam.split(',');
+      setSelectedTags(new Set(tags));
     }
-
-    return () => {
-      window.removeEventListener('urlchange', handleUrlChange as EventListener);
-    };
-  }, [selectedTags]); // Add selectedTags as dependency
+    
+    if (countriesParam) {
+      const countries = countriesParam.split(',');
+      setSelectedCountries(new Set(countries));
+    }
+  }, []);
 
   if (!Array.isArray(conferencesData)) {
     return <div>Loading conferences...</div>;
@@ -89,23 +129,122 @@ const Index = () => {
     <div className="min-h-screen bg-neutral-light">
       <Header 
         onSearch={setSearchQuery} 
-        showEmptyMessage={selectedTags.size > 0 && filteredConferences.length === 0 && !showPastConferences}
+        showEmptyMessage={
+          (selectedTags.size > 0 || selectedCountries.size > 0) && 
+          filteredConferences.length === 0 && 
+          !showPastConferences
+        }
       />
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div className="space-y-4 py-4">
-          <FilterBar 
-            selectedTags={selectedTags}
-            onTagSelect={handleTagsChange}
-          />
-          <div className="flex items-center gap-2">
-            <label htmlFor="show-past" className="text-sm text-neutral-600">
-              Show past conferences
-            </label>
-            <Switch
-              id="show-past"
-              checked={showPastConferences}
-              onCheckedChange={setShowPastConferences}
-            />
+          {/* Category filter buttons */}
+          <div className="bg-white shadow rounded-lg p-4">
+            <div className="flex flex-wrap gap-2">
+              {categoryButtons.map(category => (
+                <button
+                  key={category.id}
+                  className={`px-4 py-2 rounded-md text-sm font-medium transition-colors ${
+                    selectedTags.has(category.id)
+                      ? 'bg-blue-100 text-blue-800'
+                      : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+                  }`}
+                  onClick={() => toggleTag(category.id)}
+                >
+                  {category.label}
+                </button>
+              ))}
+            </div>
+          </div>
+          
+          {/* Controls row with past conferences toggle and country filter */}
+          <div className="flex flex-wrap items-center gap-4">
+            <div className="flex items-center gap-2 bg-white p-2 rounded-md shadow-sm">
+              <label htmlFor="show-past" className="text-sm text-neutral-600">
+                Show past conferences
+              </label>
+              <Switch
+                id="show-past"
+                checked={showPastConferences}
+                onCheckedChange={setShowPastConferences}
+              />
+            </div>
+            
+            <div className="flex items-center gap-2 bg-white p-2 rounded-md shadow-sm">
+              <Popover>
+                <PopoverTrigger asChild>
+                  <Button variant="outline" size="sm" className="h-8 gap-1">
+                    <Filter className="h-4 w-4" />
+                    Filter by Country
+                  </Button>
+                </PopoverTrigger>
+                <PopoverContent className="w-80 p-4 bg-white" align="start">
+                  <div className="space-y-4">
+                    <div>
+                      <div className="flex items-center justify-between mb-4">
+                        <h4 className="text-sm font-medium text-gray-800">Country</h4>
+                        <ChevronRight className="h-4 w-4 text-gray-500" />
+                      </div>
+                      <div className="max-h-60 overflow-y-auto space-y-2 bg-white">
+                        {getAllCountries(conferencesData as Conference[]).map(country => (
+                          <div key={country} className="flex items-center space-x-2 hover:bg-gray-50 p-1 rounded">
+                            <Checkbox 
+                              id={`country-${country}`}
+                              checked={selectedCountries.has(country)}
+                              onCheckedChange={() => {
+                                const newCountries = new Set(selectedCountries);
+                                if (newCountries.has(country)) {
+                                  newCountries.delete(country);
+                                } else {
+                                  newCountries.add(country);
+                                }
+                                handleCountriesChange(newCountries);
+                              }}
+                            />
+                            <label 
+                              htmlFor={`country-${country}`}
+                              className="text-sm font-medium text-gray-700 cursor-pointer w-full py-1"
+                            >
+                              {country}
+                            </label>
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  </div>
+                </PopoverContent>
+              </Popover>
+              
+              {/* Display selected countries */}
+              {Array.from(selectedCountries).map(country => (
+                <button
+                  key={country}
+                  className="inline-flex items-center px-3 py-1 rounded-full text-sm bg-blue-100 text-blue-800 hover:bg-blue-200 font-medium"
+                  onClick={() => {
+                    const newCountries = new Set(selectedCountries);
+                    newCountries.delete(country);
+                    handleCountriesChange(newCountries);
+                  }}
+                >
+                  {country}
+                  <X className="ml-1 h-3 w-3" />
+                </button>
+              ))}
+              
+              {/* Clear all filters button */}
+              {(selectedTags.size > 0 || selectedCountries.size > 0) && (
+                <Button 
+                  variant="ghost" 
+                  size="sm" 
+                  onClick={() => {
+                    handleTagsChange(new Set());
+                    handleCountriesChange(new Set());
+                  }}
+                  className="text-neutral-500 hover:text-neutral-700"
+                >
+                  Clear all filters
+                </Button>
+              )}
+            </div>
           </div>
         </div>
       </div>

src/types/conference.ts

@@ -1,24 +1,30 @@
 export interface Conference {
-  title: string;
-  year: number;
   id: string;
+  title: string;
   full_name?: string;
-  link: string;
+  year: number;
+  link?: string;
   deadline: string;
-  timezone: string;
-  place: string;
+  timezone?: string;
   date: string;
+  place?: string;
+  city?: string;
+  country?: string;
+  venue?: string;
+  tags?: string[];
+  note?: string;
+  abstract_deadline?: string;
   start?: string;
   end?: string;
-  tags: string[];
-  abstract_deadline?: string;
-  note?: string;
+  rankings?: string;
   hindex?: number;
-  commitment_deadline?: string;
-  submission_deadline?: string;
-  timezone_submission?: string;
   rebuttal_period_start?: string;
   rebuttal_period_end?: string;
-  review_release_date?: string;
   final_decision_date?: string;
+  review_release_date?: string;
+  submission_deadline?: string;
+  timezone_submission?: string;
+  commitment_deadline?: string;
+  paperslink?: string;
+  pwclink?: string;
 } 

src/utils/countryExtractor.ts

@@ -0,0 +1,55 @@
+/**
+ * Extracts country from a conference place string
+ */
+export function extractCountry(place: string): string | null {
+  if (!place) return null;
+  
+  // Extract the last part after the last comma, which is typically the country
+  const parts = place.split(',');
+  let country = parts[parts.length - 1].trim();
+  
+  // Handle special cases like "USA" which might appear in different forms
+  if (['USA', 'U.S.A.', 'United States', 'United States of America'].includes(country)) {
+    return 'USA';
+  }
+  
+  // Handle "UK" variations
+  if (['UK', 'U.K.', 'United Kingdom', 'England', 'Scotland', 'Wales'].includes(country)) {
+    return 'UK';
+  }
+  
+  // For places without commas, try to extract known countries
+  if (parts.length === 1) {
+    const knownCountries = [
+      'USA', 'Canada', 'China', 'Japan', 'Germany', 'France', 'UK', 'Italy', 
+      'Spain', 'Australia', 'Brazil', 'India', 'Singapore', 'South Korea', 
+      'Netherlands', 'Sweden', 'Switzerland', 'Belgium', 'Austria', 'Portugal',
+      'UAE', 'Thailand', 'Hawaii', 'Russia', 'Lithuania'
+    ];
+    
+    for (const country of knownCountries) {
+      if (place.includes(country)) {
+        return country;
+      }
+    }
+  }
+  
+  return country;
+}
+
+/**
+ * Gets all unique countries from conferences data
+ */
+export function getAllCountries(conferences: any[]): string[] {
+  if (!Array.isArray(conferences)) return [];
+  
+  const countries = new Set<string>();
+  
+  conferences.forEach(conf => {
+    if (conf.country) {
+      countries.add(conf.country);
+    }
+  });
+  
+  return Array.from(countries).sort();
+}