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

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>
       ))}