feat([2fd88f42]): add heatmap view with toggle switch

heatmap-tool/frontend/src/App.tsx

@@ -18,12 +18,15 @@ export interface HeatmapPoint {
   count: number;
 }
 
+export type MapMode = 'points' | 'heatmap';
+
 function App() {
   const [filters, setFilters] = useState<FilterOptions>({});
   const [heatmapData, setHeatmapData] = useState<HeatmapPoint[]>([]);
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [radiusMultiplier, setRadiusMultiplier] = useState(1);
+  const [viewMode, setViewMode] = useState<MapMode>('points');
 
   const handleUploadSuccess = (newFilters: FilterOptions) => {
     setFilters(newFilters);
@@ -73,6 +76,16 @@ function App() {
               />
               <div className="map-controls" style={{ marginTop: '20px', paddingTop: '20px', borderTop: '1px solid #555' }}>
                 <h3>Map Settings</h3>
+                <div className="toggle-switch" style={{ marginBottom: '15px' }}>
+                  <label>
+                    <input type="radio" value="points" checked={viewMode === 'points'} onChange={() => setViewMode('points')} />
+                    Points
+                  </label>
+                  <label>
+                    <input type="radio" value="heatmap" checked={viewMode === 'heatmap'} onChange={() => setViewMode('heatmap')} />
+                    Heatmap
+                  </label>
+                </div>
                 <label htmlFor="radius-slider">Marker Size: {radiusMultiplier.toFixed(1)}x</label>
                 <input
                   type="range"
@@ -83,13 +96,18 @@ function App() {
                   value={radiusMultiplier}
                   onChange={(e) => setRadiusMultiplier(parseFloat(e.target.value))}
                   style={{ width: '100%' }}
+                  disabled={viewMode === 'heatmap'}
                 />
               </div>
             </div>
             <div className="map-container">
             {isLoading && <p>Loading map data...</p>}
             {error && <p className="error">{error}</p>}
-            <MapDisplay heatmapData={heatmapData} radiusMultiplier={radiusMultiplier} />
+            <MapDisplay 
+              heatmapData={heatmapData} 
+              radiusMultiplier={radiusMultiplier}
+              viewMode={viewMode}
+            />
             </div>
         </main>
         </div>