mytec/rfcp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

@mytec: iter10 ready for testing

Browse Source
This commit is contained in:
mytec
2026-01-30 16:01:23 +02:00
parent 31db02de8e
commit 2a62d00a35
20 changed files with 150 additions and 294 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/eslint.config.js
View File

@@ -19,5 +19,9 @@ export default defineConfig([
ecmaVersion: 2020,
globals: globals.browser,
},
rules: {
// Allow unused vars prefixed with _ (standard TS convention for interface impls)
'@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
},
},
])

24
frontend/src/App.tsx
View File

@@ -6,6 +6,7 @@ import { useSettingsStore } from '@/store/settings.ts';
import { RFCalculator } from '@/rf/calculator.ts';
import { useToastStore } from '@/components/ui/Toast.tsx';
import { useKeyboardShortcuts } from '@/hooks/useKeyboardShortcuts.ts';
import { logger } from '@/utils/logger.ts';
import MapView from '@/components/map/Map.tsx';
import GeographicHeatmap from '@/components/map/GeographicHeatmap.tsx';
import HeatmapLegend from '@/components/map/HeatmapLegend.tsx';
@@ -111,6 +112,20 @@ export default function App() {
return;
}
// Warn if grid will be auto-coarsened (very large area + fine resolution)
const latitudes = currentSites.map((s) => s.lat);
const longitudes = currentSites.map((s) => s.lon);
const latRange = (Math.max(...latitudes) - Math.min(...latitudes)) + (2 * currentSettings.radius / 111);
const lonRange = (Math.max(...longitudes) - Math.min(...longitudes)) + (2 * currentSettings.radius / 111);
const estPoints = Math.ceil(latRange * 111000 / currentSettings.resolution) *
Math.ceil(lonRange * 111000 / currentSettings.resolution);
if (estPoints > 500_000) {
addToast(
`Large area detected (~${(estPoints / 1_000_000).toFixed(1)}M points). Resolution will be auto-adjusted for performance.`,
'warning'
);
}
setIsCalculating(true);
try {
const latitudes = currentSites.map((s) => s.lat);
@@ -148,7 +163,7 @@ export default function App() {
);
}
} catch (err) {
console.error('Coverage calculation error:', err);
logger.error('Coverage calculation error:', err);
const msg = err instanceof Error ? err.message : 'Unknown error';
let userMessage = 'Calculation failed';
@@ -375,6 +390,7 @@ export default function App() {
max={100}
step={5}
unit="km"
hint="Calculation area around each site"
/>
<NumberInput
label="Resolution"
@@ -386,6 +402,7 @@ export default function App() {
max={500}
step={50}
unit="m"
hint="Grid spacing — lower = more accurate but slower"
/>
<NumberInput
label="Min Signal"
@@ -397,6 +414,7 @@ export default function App() {
max={-50}
step={5}
unit="dBm"
hint="RSRP threshold — points below this are hidden"
/>
<NumberInput
label="Heatmap Opacity"
@@ -408,6 +426,7 @@ export default function App() {
max={100}
step={5}
unit="%"
hint="Transparency of the RF coverage overlay"
/>
<div>
<label className="text-sm font-medium text-gray-700 dark:text-dark-text">
@@ -429,6 +448,9 @@ export default function App() {
<option value={600}>600m — Smooth</option>
<option value={800}>800m — Wide</option>
</select>
<p className="mt-1 text-xs text-gray-400 dark:text-dark-muted">
Pixel radius per point — larger = smoother, smaller = sharper
</p>
{settings.heatmapRadius >= 600 && settings.resolution > 200 && (
<p className="mt-1 text-xs text-amber-600 dark:text-amber-400">
Wide radius works best with fine resolution (200m or less). Current: {settings.resolution}m

5
frontend/src/components/map/GeographicHeatmap.tsx
View File

@@ -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) {

153
frontend/src/components/map/Heatmap.tsx
View File

@@ -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;
}

15
frontend/src/components/map/HeatmapTileRenderer.ts
View File

@@ -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;

58
frontend/src/components/map/Legend.tsx
View File

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

6
frontend/src/components/map/Map.tsx
View File

@@ -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;
}

6
frontend/src/components/map/MeasurementTool.tsx
View File

@@ -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(() => {

6
frontend/src/components/map/SiteMarker.tsx
View File

@@ -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) {
)}
</>
);
}
});

17
frontend/src/components/panels/CoverageStats.tsx
View File

@@ -1,3 +1,4 @@
import { memo } from 'react';
import type { CoveragePoint } from '@/types/index.ts';
interface CoverageStatsProps {
@@ -32,16 +33,22 @@ function classifyPoints(points: CoveragePoint[]) {
return counts;
}
export default function CoverageStats({ points, resolution }: CoverageStatsProps) {
export default memo(function CoverageStats({ points, resolution }: CoverageStatsProps) {
if (points.length === 0) {
return (
<div className="bg-white dark:bg-dark-surface border border-gray-200 dark:border-dark-border rounded-lg shadow-sm p-4">
<h3 className="text-sm font-semibold text-gray-800 dark:text-dark-text mb-2">
Coverage Analysis
</h3>
<p className="text-xs text-gray-400 dark:text-dark-muted">
No coverage data. Calculate coverage first.
</p>
<div className="text-center py-3">
<div className="text-2xl mb-1 opacity-40">📊</div>
<p className="text-xs text-gray-400 dark:text-dark-muted">
No coverage data yet.
</p>
<p className="text-xs text-gray-400 dark:text-dark-muted mt-0.5">
Press <kbd className="px-1 py-0.5 bg-gray-100 dark:bg-dark-border rounded text-[10px] font-mono">Ctrl+Enter</kbd> to calculate.
</p>
</div>
</div>
);
}
@@ -135,4 +142,4 @@ export default function CoverageStats({ points, resolution }: CoverageStatsProps
</div>
</div>
);
}
});

12
frontend/src/components/panels/ExportPanel.tsx
View File

@@ -83,9 +83,15 @@ export default function ExportPanel() {
</div>
</>
) : (
<p className="text-xs text-gray-400 dark:text-dark-muted">
No coverage data. Calculate coverage first to enable export.
</p>
<div className="text-center py-2">
<div className="text-2xl mb-1 opacity-40">📁</div>
<p className="text-xs text-gray-400 dark:text-dark-muted">
No coverage data to export.
</p>
<p className="text-xs text-gray-400 dark:text-dark-muted mt-0.5">
Calculate coverage first to enable CSV and GeoJSON export.
</p>
</div>
)}
</div>
);

7
frontend/src/components/panels/ProjectPanel.tsx
View File

@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react';
import { useProjectsStore } from '@/store/projects.ts';
import { useToastStore } from '@/components/ui/Toast.tsx';
import Button from '@/components/ui/Button.tsx';
import { logger } from '@/utils/logger.ts';
export default function ProjectPanel() {
const projects = useProjectsStore((s) => s.projects);
@@ -33,7 +34,7 @@ export default function ProjectPanel() {
setProjectName('');
setShowSaveForm(false);
} catch (err) {
console.error('Save project error:', err);
logger.error('Save project error:', err);
addToast('Failed to save project', 'error');
}
};
@@ -48,7 +49,7 @@ export default function ProjectPanel() {
addToast('Project not found', 'error');
}
} catch (err) {
console.error('Load project error:', err);
logger.error('Load project error:', err);
addToast('Failed to load project', 'error');
} finally {
setIsLoading(false);
@@ -60,7 +61,7 @@ export default function ProjectPanel() {
await deleteProject(id);
addToast(`Project "${name}" deleted`, 'info');
} catch (err) {
console.error('Delete project error:', err);
logger.error('Delete project error:', err);
addToast('Failed to delete project', 'error');
}
};

3
frontend/src/components/panels/SiteForm.tsx
View File

@@ -130,6 +130,8 @@ export default function SiteForm({
const [beamwidth, setBeamwidth] = useState(editSite?.beamwidth ?? 65);
const [notes, setNotes] = useState(editSite?.notes ?? '');
// Sync pending map-click location into form fields
/* eslint-disable react-hooks/set-state-in-effect */
useEffect(() => {
if (pendingLocation) {
setLat(pendingLocation.lat);
@@ -154,6 +156,7 @@ export default function SiteForm({
setNotes(editSite.notes ?? '');
}
}, [editSite]);
/* eslint-enable react-hooks/set-state-in-effect */
const applyTemplate = (key: keyof typeof TEMPLATES) => {
const t = TEMPLATES[key];

3
frontend/src/components/panels/SiteImportExport.tsx
View File

@@ -2,6 +2,7 @@ import { useRef } from 'react';
import { useSitesStore } from '@/store/sites.ts';
import { useToastStore } from '@/components/ui/Toast.tsx';
import Button from '@/components/ui/Button.tsx';
import { logger } from '@/utils/logger.ts';
/**
* Import/Export site configurations as JSON.
@@ -95,7 +96,7 @@ export default function SiteImportExport() {
const count = await importSites(sitesData);
addToast(`Imported ${count} site(s)`, 'success');
} catch (error) {
console.error('Import failed:', error);
logger.error('Import failed:', error);
addToast('Invalid JSON file', 'error');
}

47
frontend/src/components/ui/Slider.tsx
View File

@@ -1,47 +0,0 @@
interface SliderProps {
label: string;
value: number;
min: number;
max: number;
step?: number;
unit: string;
hint?: string;
onChange: (value: number) => void;
}
export default function Slider({
label,
value,
min,
max,
step = 1,
unit,
hint,
onChange,
}: SliderProps) {
return (
<div className="space-y-1">
<div className="flex items-center justify-between">
<label className="text-sm font-medium text-gray-700 dark:text-dark-text">{label}</label>
<span className="text-sm font-semibold text-blue-600 dark:text-blue-400">
{value} {unit}
</span>
</div>
<input
type="range"
min={min}
max={max}
step={step}
value={value}
onChange={(e) => onChange(Number(e.target.value))}
className="w-full h-2 bg-gray-200 dark:bg-dark-border rounded-lg appearance-none cursor-pointer
accent-blue-600"
/>
<div className="flex justify-between text-xs text-gray-400 dark:text-dark-muted">
<span>{min}</span>
<span>{max}</span>
</div>
{hint && <p className="text-xs text-gray-400 dark:text-dark-muted">{hint}</p>}
</div>
);
}

1
frontend/src/components/ui/Toast.tsx
View File

@@ -1,3 +1,4 @@
/* eslint-disable react-refresh/only-export-components -- store co-located with its UI */
import { useState, useEffect, useCallback } from 'react';
import { create } from 'zustand';

3
frontend/src/hooks/useElevation.ts
View File

@@ -1,6 +1,7 @@
import { useState, useEffect } from 'react';
import { useMap } from 'react-leaflet';
import L from 'leaflet';
import { logger } from '@/utils/logger.ts';
interface ElevationState {
elevation: number | null;
@@ -47,7 +48,7 @@ export function useElevation() {
// Intentional abort, ignore
return;
}
console.error('Elevation fetch failed:', error);
logger.error('Elevation fetch failed:', error);
setState((prev) => ({ ...prev, elevation: null, loading: false }));
}
}, 300);

53
frontend/src/rf/calculator.ts
View File

@@ -1,4 +1,5 @@
import type { Site, CoveragePoint, CoverageResult, CoverageSettings, GridPoint } from '@/types/index.ts';
import { logger } from '@/utils/logger.ts';
export class RFCalculator {
/**
@@ -49,8 +50,13 @@ export class RFCalculator {
// Cleanup workers
workers.forEach((w) => w.terminate());
// Merge results
const allPoints = results.flat();
// Merge results (concat avoids stack overflow that .flat() can cause on huge arrays)
const allPoints: CoveragePoint[] = [];
for (const chunk of results) {
for (const point of chunk) {
allPoints.push(point);
}
}
const calculationTime = performance.now() - startTime;
@@ -62,18 +68,56 @@ export class RFCalculator {
};
}
/**
* Maximum grid points to prevent stack overflow / memory exhaustion.
* 500k points at 4 workers = 125k per worker — safe for postMessage serialization.
*/
private static readonly MAX_GRID_POINTS = 500_000;
private generateGrid(
bounds: { north: number; south: number; east: number; west: number },
resolution: number
): GridPoint[] {
const points: GridPoint[] = [];
// Convert resolution to degrees
const latStep = resolution / 111000; // ~111km per degree latitude
const centerLat = (bounds.north + bounds.south) / 2;
const lonStep =
resolution / (111000 * Math.cos((centerLat * Math.PI) / 180));
// Pre-check total count to avoid building an array we'd throw away
const latRange = bounds.north - bounds.south;
const lonRange = bounds.east - bounds.west;
const estimatedRows = Math.ceil(latRange / latStep) + 1;
const estimatedCols = Math.ceil(lonRange / lonStep) + 1;
const estimated = estimatedRows * estimatedCols;
if (estimated > RFCalculator.MAX_GRID_POINTS) {
// Auto-coarsen: pick a resolution that fits within the cap
const autoResolution = Math.ceil(
Math.sqrt((latRange * 111000 * lonRange * 111000 * Math.cos((centerLat * Math.PI) / 180)) /
RFCalculator.MAX_GRID_POINTS)
);
const coarsenedLatStep = autoResolution / 111000;
const coarsenedLonStep =
autoResolution / (111000 * Math.cos((centerLat * Math.PI) / 180));
logger.warn(
`Grid too large (${estimated.toLocaleString()} points at ${resolution}m). ` +
`Auto-coarsening to ~${autoResolution}m for safety (max ${RFCalculator.MAX_GRID_POINTS.toLocaleString()}).`
);
return this.buildGrid(bounds, coarsenedLatStep, coarsenedLonStep);
}
return this.buildGrid(bounds, latStep, lonStep);
}
private buildGrid(
bounds: { north: number; south: number; east: number; west: number },
latStep: number,
lonStep: number
): GridPoint[] {
const points: GridPoint[] = [];
let lat = bounds.south;
while (lat <= bounds.north) {
let lon = bounds.west;
@@ -83,7 +127,6 @@ export class RFCalculator {
}
lat += latStep;
}
return points;
}

18
frontend/src/utils/logger.ts Normal file
View File

@@ -0,0 +1,18 @@
/**
* Production-safe logger.
* - In development: all levels log normally
* - In production: only errors log (warnings suppressed, logs suppressed)
*/
const isDev = import.meta.env.DEV;
export const logger = {
log: (...args: unknown[]): void => {
if (isDev) console.log(...args);
},
warn: (...args: unknown[]): void => {
if (isDev) console.warn(...args);
},
error: (...args: unknown[]): void => {
console.error(...args);
},
};