refactor([2fd88f42]): consolidate tooltip manager into filter panel and fix app structure

heatmap-tool/frontend/src/App.tsx

@@ -8,13 +8,18 @@ import FilterPanel from './components/FilterPanel';
 import MapDisplay from './components/MapDisplay';
 import ErrorBoundary from './components/ErrorBoundary';
 import PlzSelector from './components/PlzSelector';
-import TooltipManager, { type TooltipColumn } from './components/TooltipManager';
 
 // Define types for our state
 export interface FilterOptions {
   [key: string]: string[];
 }
 
+export interface TooltipColumn {
+  id: string;
+  name: string;
+  visible: boolean;
+}
+
 export interface HeatmapPoint {
   plz: string;
   lat: number;
@@ -70,10 +75,12 @@ function App() {
     } catch (error: any) {
         if (axios.isAxiosError(error) && error.response) {
             setError(`Failed to set PLZ column: ${error.response.data.detail || error.message}`);
-        } else {
+        }
+        else {
             setError(`Failed to set PLZ column: ${error.message}`);
         }
-    } finally {
+    }
+    finally {
         setIsLoading(false);
     }
   };
@@ -90,24 +97,21 @@ function App() {
     } catch (error: any) {
         if (axios.isAxiosError(error) && error.response) {
             setError(`Failed to fetch heatmap data: ${error.response.data.detail || error.message}`);
-        } else {
+        }
+        else {
             setError(`Failed to fetch heatmap data: ${error.message}`);
         }
       setHeatmapData([]); // Clear data on error
-    } finally {
+    }
+    finally {
       setIsLoading(false);
     }
   };
   
-  // Need to re-fetch data when tooltip config changes
-  useEffect(() => {
-    if (Object.keys(filters).length > 0) {
-        // This assumes you want to re-fetch with the *last applied* filters, which is complex to track.
-        // For simplicity, we won't re-fetch automatically on tooltip change for now,
-        // but the config will be applied on the *next* "Apply Filters" click.
-    }
-  }, [tooltipColumns]);
-
+  // Need to re-fetch data when tooltip config changes. 
+  // Optimization: In a real app, we might debounce this or add an "Apply" button for sorting.
+  // For now, let's keep it manual via the "Apply Filters" button in the FilterPanel to avoid excessive API calls while dragging.
+  // The FilterPanel calls onFilterChange when "Apply" is clicked, passing both filters and the current tooltipColumns.
 
   return (
     <ErrorBoundary>
@@ -132,12 +136,11 @@ function App() {
                 <>
                   <FilterPanel
                       filters={filters}
+                      tooltipColumns={tooltipColumns}
+                      setTooltipColumns={setTooltipColumns}
                       onFilterChange={(selectedFilters) => handleFilterChange(selectedFilters, tooltipColumns)}
                       isLoading={isLoading}
                   />
-                  {tooltipColumns.length > 0 && (
-                      <TooltipManager columns={tooltipColumns} setColumns={setTooltipColumns} />
-                  )}
                   <div className="map-controls" style={{ marginTop: '20px', paddingTop: '20px', borderTop: '1px solid #555' }}>
                     <h3>Map Settings</h3>
                     <div className="toggle-switch" style={{ marginBottom: '15px' }}>