@mytec: iter10 ready for testing

frontend/src/components/map/GeographicHeatmap.tsx

@@ -17,6 +17,7 @@ import { useMap } from 'react-leaflet';
 import L from 'leaflet';
 import { HeatmapTileRenderer } from './HeatmapTileRenderer.ts';
 import type { HeatmapPoint } from './HeatmapTileRenderer.ts';
+import { logger } from '@/utils/logger.ts';
 
 interface GeographicHeatmapProps {
   points: HeatmapPoint[];
@@ -80,7 +81,7 @@ export default function GeographicHeatmap({
     const renderer = rendererRef.current;
     const currentPointsRef = pointsRef;
 
-    // Custom GridLayer with canvas tiles
+    // Custom GridLayer with canvas tiles (Leaflet's class system requires `this`)
     const HeatmapGridLayer = L.GridLayer.extend({
       createTile(
         this: L.GridLayer,
@@ -100,7 +101,7 @@ export default function GeographicHeatmap({
               coords.z
             );
           } catch (error) {
-            console.error('Tile render error:', error);
+            logger.error('Tile render error:', error);
             // Draw error indicator
             const ctx = canvas.getContext('2d');
             if (ctx) {

frontend/src/components/map/Heatmap.tsx

@@ -1,153 +0,0 @@
-import { useEffect, useState } from 'react';
-import { useMap } from 'react-leaflet';
-import L from 'leaflet';
-import 'leaflet.heat';
-import type { CoveragePoint } from '@/types/index.ts';
-
-// Extend L with heat layer type
-declare module 'leaflet' {
-  function heatLayer(
-    latlngs: Array<[number, number, number]>,
-    options?: Record<string, unknown>
-  ): L.Layer;
-}
-
-interface HeatmapProps {
-  points: CoveragePoint[];
-  visible: boolean;
-  opacity?: number;
-}
-
-/**
- * Normalize RSRP to 0-1 intensity for heatmap.
- *
- * Range: -130 to -50 dBm
- *
- * -130 dBm → 0.0 (deep blue, no service)
- *  -90 dBm → 0.5 (green, fair)
- *  -50 dBm → 1.0 (red, very strong)
- */
-function rsrpToIntensity(rsrp: number): number {
-  const minRSRP = -130;
-  const maxRSRP = -50;
-  return Math.max(0, Math.min(1, (rsrp - minRSRP) / (maxRSRP - minRSRP)));
-}
-
-/**
- * Geographic scale-aware heatmap parameters.
- *
- * The key insight: we want each heatmap point to cover a constant
- * GEOGRAPHIC area (400m radius) regardless of zoom level. Since
- * leaflet.heat works in pixels, we convert:
- *
- *   pixelsPerKm = 2^zoom * 6.4  (at equator, simplified)
- *   radiusPixels = targetRadiusKm * pixelsPerKm
- *
- * With progressive clamps for visual quality:
- *   - Low zoom (≤9):  min 15px, max 45px (avoid giant blobs)
- *   - High zoom (≥10): min 30px, max 80px (fill gaps between grid points)
- *
- * maxIntensity is CONSTANT at 0.75 — no compensation needed because
- * the geographic overlap between adjacent points stays consistent
- * when radius tracks geographic scale.
- */
-function getHeatmapParams(zoom: number) {
-  const pixelsPerKm = Math.pow(2, zoom) * 6.4;
-  const targetRadiusKm = 0.4; // 400 meters
-  const radiusPixels = targetRadiusKm * pixelsPerKm;
-
-  // Progressive clamps: wider range at high zoom for smooth fill
-  const minRadius = zoom < 10 ? 15 : 30;
-  const maxRadius = zoom < 10 ? 45 : 80;
-  const radius = Math.max(minRadius, Math.min(maxRadius, radiusPixels));
-
-  const blur = Math.round(radius * 0.6);
-
-  return {
-    radius: Math.round(radius),
-    blur,
-    maxIntensity: 0.75, // CONSTANT — geographic consistency means no compensation needed
-    pixelsPerKm,
-    radiusPixels,
-  };
-}
-
-const HEATMAP_GRADIENT = {
-  0.0: '#1a237e',   // Deep blue   (-130 dBm, no service)
-  0.15: '#0d47a1',  // Dark blue
-  0.25: '#2196f3',  // Blue        (-110 dBm, weak)
-  0.35: '#00bcd4',  // Cyan
-  0.45: '#00897b',  // Teal
-  0.55: '#4caf50',  // Green       ( -90 dBm, fair)
-  0.65: '#8bc34a',  // Light green
-  0.75: '#ffeb3b',  // Yellow      ( -70 dBm, good)
-  0.85: '#ff9800',  // Orange
-  1.0: '#f44336',   // Red         ( -50 dBm, excellent)
-};
-
-export default function Heatmap({ points, visible, opacity = 0.7 }: HeatmapProps) {
-  const map = useMap();
-  const [mapZoom, setMapZoom] = useState(map.getZoom());
-
-  // Track zoom changes
-  useEffect(() => {
-    const handleZoomEnd = () => setMapZoom(map.getZoom());
-    map.on('zoomend', handleZoomEnd);
-    return () => {
-      map.off('zoomend', handleZoomEnd);
-    };
-  }, [map]);
-
-  // Recreate heatmap layer when points, visibility, or zoom changes
-  useEffect(() => {
-    if (!visible || points.length === 0) return;
-
-    const heatData: Array<[number, number, number]> = points.map((p) => [
-      p.lat,
-      p.lon,
-      rsrpToIntensity(p.rsrp),
-    ]);
-
-    const { radius, blur, maxIntensity, pixelsPerKm, radiusPixels } =
-      getHeatmapParams(mapZoom);
-
-    // Debug: log geographic scale params (dev only)
-    if (import.meta.env.DEV && heatData.length > 0) {
-      const rsrpValues = points.map((p) => p.rsrp);
-      console.log('🔍 Heatmap Geographic:', {
-        zoom: mapZoom,
-        pixelsPerKm: pixelsPerKm.toFixed(1),
-        targetRadiusKm: 0.4,
-        radiusPixelsRaw: radiusPixels.toFixed(1),
-        radiusClamped: radius,
-        blur,
-        maxIntensity,
-        points: points.length,
-        rsrpRange: `${Math.min(...rsrpValues).toFixed(1)} to ${Math.max(...rsrpValues).toFixed(1)} dBm`,
-      });
-    }
-
-    const heatLayer = L.heatLayer(heatData, {
-      radius,
-      blur,
-      max: maxIntensity,
-      maxZoom: 17,
-      minOpacity: 0.3,
-      gradient: HEATMAP_GRADIENT,
-    });
-
-    heatLayer.addTo(map);
-
-    // Apply opacity to the canvas element
-    const container = (heatLayer as unknown as { _canvas?: HTMLCanvasElement })._canvas;
-    if (container) {
-      container.style.opacity = String(opacity);
-    }
-
-    return () => {
-      map.removeLayer(heatLayer);
-    };
-  }, [map, points, visible, mapZoom, opacity]);
-
-  return null;
-}

frontend/src/components/map/HeatmapTileRenderer.ts

@@ -22,6 +22,7 @@ import {
   valueToColorRGB,
   gaussianWeight,
 } from '@/utils/colorGradient.ts';
+import { logger } from '@/utils/logger.ts';
 
 export interface HeatmapPoint {
   lat: number;
@@ -186,14 +187,12 @@ export class HeatmapTileRenderer {
     // Cache the rendered tile
     this.cacheStore(cacheKey, imageData);
 
-    // Dev perf log
-    if (import.meta.env.DEV) {
-      const ms = performance.now() - t0;
-      if (ms > 50) {
-        console.log(
-          `🖌️ Tile ${tileX},${tileY} z${zoom}: ${ms.toFixed(1)}ms (${relevant.length} pts)`
-        );
-      }
+    // Dev perf log (slow tiles only)
+    const ms = performance.now() - t0;
+    if (ms > 50) {
+      logger.log(
+        `Tile ${tileX},${tileY} z${zoom}: ${ms.toFixed(1)}ms (${relevant.length} pts)`
+      );
     }
 
     return true;

frontend/src/components/map/Legend.tsx

@@ -1,58 +0,0 @@
-import { RSRP_LEGEND } from '@/constants/rsrp-thresholds.ts';
-import { useCoverageStore } from '@/store/coverage.ts';
-import { useSitesStore } from '@/store/sites.ts';
-
-export default function Legend() {
-  const result = useCoverageStore((s) => s.result);
-  const heatmapVisible = useCoverageStore((s) => s.heatmapVisible);
-  const toggleHeatmap = useCoverageStore((s) => s.toggleHeatmap);
-  const settings = useCoverageStore((s) => s.settings);
-  const sites = useSitesStore((s) => s.sites);
-
-  if (!result) return null;
-
-  // Estimate coverage area: total points * resolution^2
-  const areaKm2 = (result.totalPoints * settings.resolution * settings.resolution) / 1e6;
-
-  return (
-    <div className="absolute bottom-6 right-2 z-[1000] bg-white dark:bg-dark-surface rounded-lg shadow-lg border border-gray-200 dark:border-dark-border p-3 min-w-[170px]">
-      {/* Header with toggle */}
-      <div className="flex items-center justify-between mb-2">
-        <h3 className="text-xs font-semibold text-gray-700 dark:text-dark-text">Signal (RSRP)</h3>
-        <button
-          onClick={toggleHeatmap}
-          className={`w-8 h-4 rounded-full transition-colors relative
-            ${heatmapVisible ? 'bg-blue-500' : 'bg-gray-300 dark:bg-dark-border'}`}
-        >
-          <span
-            className={`absolute top-0.5 w-3 h-3 rounded-full bg-white shadow transition-transform
-              ${heatmapVisible ? 'left-4' : 'left-0.5'}`}
-          />
-        </button>
-      </div>
-
-      {/* Legend items */}
-      <div className="space-y-1">
-        {RSRP_LEGEND.map((item) => (
-          <div key={item.label} className="flex items-center gap-2">
-            <div
-              className="w-3 h-3 rounded-sm flex-shrink-0"
-              style={{ backgroundColor: item.color }}
-            />
-            <span className="text-[10px] text-gray-600 dark:text-gray-400">
-              {item.label}: {item.range}
-            </span>
-          </div>
-        ))}
-      </div>
-
-      {/* Stats */}
-      <div className="mt-2 pt-2 border-t border-gray-100 dark:border-dark-border text-[10px] text-gray-400 dark:text-dark-muted space-y-0.5">
-        <div>Points: {result.totalPoints.toLocaleString()}</div>
-        <div>Time: {(result.calculationTime / 1000).toFixed(2)}s</div>
-        <div>Area: ~{areaKm2.toFixed(1)} km²</div>
-        <div>Sites: {sites.length}</div>
-      </div>
-    </div>
-  );
-}

frontend/src/components/map/Map.tsx

@@ -1,4 +1,4 @@
-import { useRef, useCallback } from 'react';
+import { useRef, useCallback, useEffect } from 'react';
 import { MapContainer, TileLayer, useMapEvents, useMap } from 'react-leaflet';
 import 'leaflet/dist/leaflet.css';
 import type { Map as LeafletMap } from 'leaflet';
@@ -41,7 +41,9 @@ function MapClickHandler({
  */
 function MapRefSetter({ mapRef }: { mapRef: React.MutableRefObject<LeafletMap | null> }) {
   const map = useMap();
-  mapRef.current = map;
+  useEffect(() => {
+    mapRef.current = map;
+  }, [map, mapRef]);
   return null;
 }
 

frontend/src/components/map/MeasurementTool.tsx

@@ -43,14 +43,18 @@ export default function MeasurementTool({ enabled, onComplete }: MeasurementTool
   const map = useMap();
   const [points, setPoints] = useState<[number, number][]>([]);
   const pointsRef = useRef(points);
-  pointsRef.current = points;
+  useEffect(() => {
+    pointsRef.current = points;
+  }, [points]);
 
   // Clear on disable
+  /* eslint-disable react-hooks/set-state-in-effect */
   useEffect(() => {
     if (!enabled) {
       setPoints([]);
     }
   }, [enabled]);
+  /* eslint-enable react-hooks/set-state-in-effect */
 
   // Click handler: add measurement point
   useEffect(() => {

frontend/src/components/map/SiteMarker.tsx

@@ -1,8 +1,8 @@
+import { memo, useEffect } from 'react';
 import { Marker, Popup, Polygon, useMap } from 'react-leaflet';
 import L from 'leaflet';
 import type { Site } from '@/types/index.ts';
 import { useSitesStore } from '@/store/sites.ts';
-import { useEffect } from 'react';
 
 interface SiteMarkerProps {
   site: Site;
@@ -65,7 +65,7 @@ function FlyToSelected({ site, isSelected }: { site: Site; isSelected: boolean }
   return null;
 }
 
-export default function SiteMarker({ site, onEdit }: SiteMarkerProps) {
+export default memo(function SiteMarker({ site, onEdit }: SiteMarkerProps) {
   const selectedSiteId = useSitesStore((s) => s.selectedSiteId);
   const selectSite = useSitesStore((s) => s.selectSite);
   const updateSite = useSitesStore((s) => s.updateSite);
@@ -126,4 +126,4 @@ export default function SiteMarker({ site, onEdit }: SiteMarkerProps) {
       )}
     </>
   );
-}
+});