diff --git a/RFCP-Fixes-Iteration1.md b/RFCP-Fixes-Iteration1.md new file mode 100644 index 0000000..b3a7f7c --- /dev/null +++ b/RFCP-Fixes-Iteration1.md @@ -0,0 +1,251 @@ +# RFCP Fixes - Iteration 1 + +## Issues to Fix: + +### 1. Heatmap Colors - More Obvious Gradient + +**Current problem:** Green→Yellow→Red gradient not obvious enough + +**Fix:** Update `src/components/map/Heatmap.tsx` + +Change the gradient to use more distinct colors with better visibility: + +```typescript +// In Heatmap.tsx, update the gradient prop: + + p[1]} + latitudeExtractor={(p: any) => p[0]} + intensityExtractor={(p: any) => p[2]} + gradient={{ + 0.0: '#0000ff', // Blue (very weak, -120 dBm) + 0.2: '#00ffff', // Cyan (weak, -110 dBm) + 0.4: '#00ff00', // Green (fair, -100 dBm) + 0.6: '#ffff00', // Yellow (good, -85 dBm) + 0.8: '#ff7f00', // Orange (strong, -70 dBm) + 1.0: '#ff0000', // Red (excellent, > -70 dBm) + }} + radius={25} + blur={15} + max={1.0} +/> +``` + +**Reasoning:** +- Blue/Cyan for weak signals (more intuitive - "cold" = weak) +- Green for acceptable +- Yellow/Orange for good +- Red for excellent (hot = strong) + +This is actually inverted from typical "green=good", but in RF planning, RED = STRONG SIGNAL = GOOD! + +--- + +### 2. Coverage Radius - Increase to 100km + +**Current problem:** Max radius only 20km, not enough for tactical planning + +**Fix:** Update `src/components/panels/SiteForm.tsx` (or wherever Coverage Settings are) + +Find the radius slider and change: + +```typescript +// Old: + updateCoverageSettings({ radius: value })} +/> + +// New: + updateCoverageSettings({ radius: value })} + help="Calculation area around each site" +/> +``` + +**Also update default value in store:** + +```typescript +// In src/store/coverage.ts or wherever coverage settings are initialized: +const initialSettings = { + radius: 10, // Default 10km (reasonable starting point) + resolution: 200, // 200m resolution + rsrpThreshold: -120 +}; +``` + +--- + +### 3. Save & Calculate Button + +**Current problem:** Two separate buttons, extra click needed + +**Fix:** Update `src/components/panels/SiteForm.tsx` + +Replace the button section: + +```typescript +// Old: +
+ + +
+ +// New: +
+ + + +
+ +// Add the handler: +const handleSaveAndCalculate = async () => { + // Save the site first + await handleSave(); + + // Then trigger coverage calculation + const sites = useSitesStore.getState().sites; + const coverage = useCoverageStore.getState(); + + // Calculate coverage for all sites + await coverage.calculateCoverage(sites); + + // Show success toast + toast.success('Site saved and coverage calculated!'); +}; +``` + +**Alternative (simpler):** Just make the main button do both: + +```typescript +
+ + +
+``` + +--- + +### 4. Legend Colors Update + +**Fix:** Update `src/components/map/Legend.tsx` to match new gradient: + +```typescript +const signalRanges = [ + { label: 'Excellent', range: '> -70 dBm', color: '#ff0000' }, // Red + { label: 'Good', range: '-70 to -85 dBm', color: '#ff7f00' }, // Orange + { label: 'Fair', range: '-85 to -100 dBm', color: '#ffff00' }, // Yellow + { label: 'Poor', range: '-100 to -110 dBm', color: '#00ff00' }, // Green + { label: 'Weak', range: '-110 to -120 dBm', color: '#00ffff' }, // Cyan + { label: 'Very Weak', range: '< -120 dBm', color: '#0000ff' }, // Blue +]; +``` + +--- + +### 5. Resolution Adjustment for Large Radius + +**Problem:** 200m resolution + 100km radius = MANY points = slow calculation + +**Fix:** Auto-adjust resolution based on radius: + +```typescript +// In src/store/coverage.ts or coverage calculator: + +const getOptimalResolution = (radius: number): number => { + if (radius <= 10) return 100; // 100m for small areas + if (radius <= 30) return 200; // 200m for medium areas + if (radius <= 60) return 300; // 300m for large areas + return 500; // 500m for very large areas (100km) +}; + +// Use in calculation: +const resolution = settings.resolution || getOptimalResolution(settings.radius); +``` + +Or add a notice in UI: + +```typescript +

+ 💡 Larger radius = longer calculation time. + Consider increasing resolution (200m → 500m) for faster results. +

+``` + +--- + +## Summary of Changes: + +1. ✅ **Heatmap gradient:** Blue → Cyan → Green → Yellow → Orange → Red +2. ✅ **Max radius:** 20km → 100km (step: 5km) +3. ✅ **Button:** "Save & Calculate" as primary action +4. ✅ **Legend:** Updated colors to match new gradient +5. ✅ **Performance:** Auto-adjust resolution or show warning + +--- + +## Implementation Order: + +1. **Start with colors** (easiest, biggest visual impact) +2. **Then radius** (simple slider change) +3. **Then button** (requires store integration) +4. **Test everything** + +--- + +## Files to Edit: + +``` +frontend/src/components/map/Heatmap.tsx - gradient colors +frontend/src/components/map/Legend.tsx - legend colors +frontend/src/components/panels/SiteForm.tsx - radius slider + button +frontend/src/store/coverage.ts - default settings +``` + +--- + +Would you like me to create the exact code patches for Claude Code to apply? +Or should I create complete replacement files? diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..65d3fe2 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,6 @@ +{ + "name": "rfcp", + "lockfileVersion": 3, + "requires": true, + "packages": {} +}