lgtm

frontend/src/hooks/usePoiLayers.ts

@@ -1,4 +1,4 @@
-import { useCallback, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import type { PickingInfo } from '@deck.gl/core';
 import { IconLayer, ScatterplotLayer, TextLayer } from '@deck.gl/layers';
 import Supercluster from 'supercluster';
@@ -67,6 +67,18 @@ function getPoiIconSize(poi: POI): number {
 export function usePoiLayers({ pois, zoom, isDark }: UsePoiLayersProps) {
   const [popupInfo, setPopupInfo] = useState<PopupInfo | null>(null);
 
+  // Dismiss a lingering hover/cluster popup once the POIs behind it are gone — e.g.
+  // after the user clears the POI categories. Without this the card stays stuck on
+  // screen because it is only otherwise cleared on mouse-leave or the close button.
+  useEffect(() => {
+    setPopupInfo((current) => {
+      if (!current) return current;
+      if (pois.length === 0) return null;
+      if (current.isCluster) return current;
+      return pois.some((poi) => poi.id === current.id) ? current : null;
+    });
+  }, [pois]);
+
   const handlePoiHover = useCallback((info: PickingInfo<POI>) => {
     if (info.object && info.x !== undefined && info.y !== undefined) {
       setPopupInfo({