feat([2fd88f42]): implement tooltip column manager

heatmap-tool/frontend/src/App.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import axios from 'axios';
 import './App.css';
 import 'react-leaflet-cluster/dist/assets/MarkerCluster.css';
@@ -7,6 +7,8 @@ import FileUpload from './components/FileUpload';
 import FilterPanel from './components/FilterPanel';
 import MapDisplay from './components/MapDisplay';
 import ErrorBoundary from './components/ErrorBoundary';
+import PlzSelector from './components/PlzSelector';
+import TooltipManager, { TooltipColumn } from './components/TooltipManager';
 
 // Define types for our state
 export interface FilterOptions {
@@ -33,6 +35,7 @@ function App() {
   
   const [plzColumnNeeded, setPlzColumnNeeded] = useState(false);
   const [availableColumns, setAvailableColumns] = useState<string[]>([]);
+  const [tooltipColumns, setTooltipColumns] = useState<TooltipColumn[]>([]);
 
 
   const handleUploadSuccess = (response: any) => {
@@ -42,12 +45,17 @@ function App() {
       setPlzColumnNeeded(true);
       setFilters({});
       setHeatmapData([]);
+      setTooltipColumns([]);
     } else {
       setPlzColumnNeeded(false);
-      setFilters(response.filters);
+      const newFilters = response.filters;
+      setFilters(newFilters);
+      // Initialize tooltip columns based on filters
+      setTooltipColumns(Object.keys(newFilters).map(name => ({ id: name, name, visible: true })));
       setHeatmapData([]); // Clear previous heatmap data
       // Automatically fetch data with no filters on successful upload
-      handleFilterChange({});
+      // Pass initial tooltip config
+      handleFilterChange({}, Object.keys(newFilters).map(name => ({ id: name, name, visible: true })));
     }
   };
 
@@ -70,25 +78,36 @@ function App() {
     }
   };
 
-  const handleFilterChange = async (selectedFilters: FilterOptions) => {
+  const handleFilterChange = async (selectedFilters: FilterOptions, currentTooltipConfig: TooltipColumn[]) => {
     setIsLoading(true);
     setError(null);
     try {
       const response = await axios.post('/api/heatmap', {
         filters: selectedFilters,
+        tooltip_config: currentTooltipConfig, // Pass tooltip config to backend
       });
       setHeatmapData(response.data);
     } catch (error: any) {
-      if (axios.isAxiosError(error) && error.response) {
-        setError(`Failed to fetch heatmap data: ${error.response.data.detail || error.message}`);
-      } else {
-        setError(`Failed to fetch heatmap data: ${error.message}`);
-      }
+        if (axios.isAxiosError(error) && error.response) {
+            setError(`Failed to fetch heatmap data: ${error.response.data.detail || error.message}`);
+        } else {
+            setError(`Failed to fetch heatmap data: ${error.message}`);
+        }
       setHeatmapData([]); // Clear data on error
     } 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]);
+
 
   return (
     <ErrorBoundary>
@@ -113,9 +132,12 @@ function App() {
                 <>
                   <FilterPanel
                       filters={filters}
-                      onFilterChange={handleFilterChange}
+                      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' }}>
@@ -151,6 +173,7 @@ function App() {
               heatmapData={heatmapData} 
               radiusMultiplier={radiusMultiplier}
               viewMode={viewMode}
+              tooltipColumns={tooltipColumns}
             />
             </div>
         </main>

heatmap-tool/frontend/src/components/MapDisplay.tsx

@@ -6,14 +6,16 @@ import 'leaflet/dist/leaflet.css';
 import 'leaflet.heat';
 import type { HeatmapPoint, MapMode } from '../App';
 import MarkerClusterGroup from 'react-leaflet-cluster';
+import { TooltipColumn } from './TooltipManager';
 
 interface MapDisplayProps {
   heatmapData: HeatmapPoint[];
   radiusMultiplier: number;
   viewMode: MapMode;
+  tooltipColumns: TooltipColumn[];
 }
 
-const MapDisplay: React.FC<MapDisplayProps> = ({ heatmapData, radiusMultiplier, viewMode }) => {
+const MapDisplay: React.FC<MapDisplayProps> = ({ heatmapData, radiusMultiplier, viewMode, tooltipColumns }) => {
   const germanyCenter: [number, number] = [51.1657, 10.4515];
   const maxCount = Math.max(...heatmapData.map(p => p.count), 1);
 
@@ -45,11 +47,17 @@ const MapDisplay: React.FC<MapDisplayProps> = ({ heatmapData, radiusMultiplier,
           <Tooltip>
             PLZ: {point.plz} <br />
             Count: {point.count}
-            {point.attributes_summary && Object.entries(point.attributes_summary).map(([attr, values]) => (
-                <div key={attr}>
-                  <strong>{attr}:</strong> {values.join(', ')}
-                </div>
-            ))}
+            {tooltipColumns.map(col => {
+              if (col.visible && point.attributes_summary && point.attributes_summary[col.name]) {
+                const values = point.attributes_summary[col.name];
+                return (
+                  <div key={col.id}>
+                    <strong>{col.name}:</strong> {Array.isArray(values) ? values.join(', ') : values}
+                  </div>
+                );
+              }
+              return null;
+            })}
           </Tooltip>
         </CircleMarker>
       ))}