From 0730723950aeb0df75a9de8942762e917a804e65 Mon Sep 17 00:00:00 2001
From: Sajid Mehmood <sajid@niteshift.dev>
Date: Thu, 16 Jul 2026 14:04:26 +0000
Subject: [PATCH] Add click-to-filter to world map

Clicking a country on the world map now filters the page metrics to that
country via the country=eq.<code> URL param, matching the existing
FilterLink behavior. Clicking the selected country again toggles the
filter off. The selected country is highlighted in the primary color
and the cursor shows a pointer over clickable countries. Gated on
websiteId so the realtime map (data-only) is unaffected.
---
 src/components/metrics/WorldMap.tsx | 20 +++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/src/components/metrics/WorldMap.tsx b/src/components/metrics/WorldMap.tsx
index 3c8fadb80..4c3ba860e 100644
--- a/src/components/metrics/WorldMap.tsx
+++ b/src/components/metrics/WorldMap.tsx
@@ -6,6 +6,7 @@ import {
   useCountryNames,
   useLocale,
   useMessages,
+  useNavigation,
   useWebsiteMetricsQuery,
 } from '@/components/hooks';
 import { getThemeColors } from '@/lib/colors';
@@ -25,8 +26,10 @@ export function WorldMap({ websiteId, data, ...props }: WorldMapProps) {
   const { locale } = useLocale();
   const { formatMessage, labels } = useMessages();
   const { countryNames } = useCountryNames(locale);
+  const { router, updateParams, query } = useNavigation();
   const visitorsLabel = formatMessage(labels.visitors).toLocaleLowerCase(locale);
   const unknownLabel = formatMessage(labels.unknown);
+  const canFilter = Boolean(websiteId);
 
   const { data: mapData } = useWebsiteMetricsQuery(websiteId, {
     type: 'country',
@@ -41,6 +44,10 @@ export function WorldMap({ websiteId, data, ...props }: WorldMapProps) {
     if (code === 'AQ') return;
     const country = metrics?.find(({ x }) => x === code);
 
+    if (isFiltered(code)) {
+      return colors.map.baseColor;
+    }
+
     if (!country) {
       return colors.map.fillColor;
     }
@@ -64,6 +71,16 @@ export function WorldMap({ websiteId, data, ...props }: WorldMapProps) {
     );
   };
 
+  const handleClick = (code: string) => {
+    if (!canFilter || code === 'AQ') return;
+    const isActive = query.country === `eq.${code}`;
+    router.push(updateParams({ country: isActive ? undefined : `eq.${code}` }));
+  };
+
+  const isFiltered = (code: string) => {
+    return canFilter && query.country === `eq.${code}`;
+  };
+
   return (
     <Column
       {...props}
@@ -86,12 +103,13 @@ export function WorldMap({ websiteId, data, ...props }: WorldMapProps) {
                     stroke={colors.map.strokeColor}
                     opacity={getOpacity(code)}
                     style={{
-                      default: { outline: 'none' },
+                      default: { outline: 'none', cursor: canFilter ? 'pointer' : 'default' },
                       hover: { outline: 'none', fill: colors.map.hoverColor },
                       pressed: { outline: 'none' },
                     }}
                     onMouseOver={() => handleHover(code)}
                     onMouseOut={() => setTooltipPopup(null)}
+                    onClick={() => handleClick(code)}
                   />
                 );
               });