Skip to content

HEATMAP_README.md

Latest commit

 

History

History
200 lines (148 loc) · 5.9 KB

HEATMAP_README.md

File metadata and controls

200 lines (148 loc) · 5.9 KB

Heatmap Feature - Local Development Guide

This document describes how to run the enhanced heatmap feature locally, including fixes for Canvas2D warnings and new disease statistics panels.

Quick Start

1. Generate Sample Data

python3 ml/generate_sample_dataset.py

This creates backend/data/heatmap_points.json with ~200 sample points including disease labels.

2. Start Backend

cd backend
npm install
npm start

Backend runs on http://localhost:5000 (or PORT env variable).

Verify backend:

curl http://localhost:5000/api/health
curl http://localhost:5000/api/heatmap | jq '.features | length'

3. Start Frontend

In a new terminal:

cd frontend
npm install
npm start

Frontend opens at http://localhost:3000 (or 3001 if 3000 is in use).

What's New

Canvas2D Warning Fix

Problem: Browser console showed warnings:

Canvas2D: Multiple readback operations using getImageData are faster 
with the willReadFrequently attribute set to true.

Solution: Created HeatLayerFixed component that:

  1. Creates a dedicated Leaflet pane for the heatmap layer
  2. Patches canvas contexts after creation to use willReadFrequently: true
  3. Uses MutationObserver to detect and patch new canvases as they're added
  4. Intercepts getImageData calls and routes them through a properly configured context

Files Changed:

  • frontend/src/components/heatmap/HeatLayerFixed.jsx - New component with canvas patching
  • frontend/src/components/HeatMap.jsx - Updated to use HeatLayerFixed instead of direct L.heatLayer

Disease Panel & Statistics

New Features:

  • Disease Information Panel (right side):

    • List of 9 major wheat diseases with color-coded icons
    • Expandable details showing symptoms, conditions, control measures, and yield loss
    • Wheat plant diagram (SVG visualization)

  • Statistical Charts (right panel, below disease info):

    • Disease Distribution Bar Chart: Top 5 diseases by count
    • Time Series Chart: Disease count over last 14 days
    • Economic Impact Chart: Estimated yield loss % per disease (simulated)

Files Created:

  • frontend/src/components/heatmap/DiseasePanel.jsx - Disease info and statistics panel
  • frontend/src/components/heatmap/HeatLayerFixed.jsx - Fixed heat layer component

Files Modified:

  • frontend/src/components/HeatMap.jsx - Integrated new components, added controls
  • frontend/package.json - Added recharts dependency
  • ml/generate_sample_dataset.py - Added disease label generation

Dependencies

New dependency added:

  • recharts (^2.10.3) - For statistical charts

Install with:

cd frontend && npm install

API Endpoint

The heatmap uses the existing /api/heatmap endpoint. The data format now includes disease_label:

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [lng, lat]
      },
      "properties": {
        "intensity": 0.0-1.0,
        "disease_prob": 0.0-1.0,
        "disease_label": "Brown Rust",
        "timestamp": "ISO8601",
        "source": "simulated" | "ml"
      }
    }
  ]
}

ML Team Integration

To integrate your ML model output:

  1. Replace backend/data/heatmap_points.json with your ML model output
  2. Ensure the GeoJSON format matches the structure above
  3. Include disease_label in each feature's properties
  4. The backend will automatically serve the updated data

Alternative: If you prefer a separate endpoint, you can create /api/heatmap/enriched that adds disease labels to existing data. The current implementation works with the main endpoint.

Testing

Verify Canvas Warning Fix

  1. Open browser DevTools (F12)
  2. Navigate to Console tab
  3. Load the heatmap page
  4. Expected: No Canvas2D warnings about willReadFrequently
  5. Interact with the map (zoom, pan) - warnings should remain absent

Verify Features

  1. Heatmap: Should render smoothly without console warnings
  2. Disease Panel: Right side shows disease list, expandable details, and charts
  3. Statistics: Charts should display data based on sample dataset
  4. Controls: Left side toggles and sliders should work
  5. Point Markers: Toggle should show/hide individual detection points

Manual API Test

# Check data includes disease labels
curl http://localhost:5000/api/heatmap | jq '.features[0].properties.disease_label'

# Count features
curl http://localhost:5000/api/heatmap | jq '.features | length'

Performance Notes

  • Heatmap radius and blur are adjustable via sliders (default: radius=18, blur=25)
  • Lower values = better performance, higher values = smoother visualization
  • Data fetching is debounced (5 seconds) to prevent excessive API calls
  • Manual refresh button available in controls panel

Troubleshooting

Canvas warnings still appear

  • Clear browser cache and reload
  • Check browser console for any errors
  • Verify HeatLayerFixed component is being used (check React DevTools)

Charts not displaying

  • Verify recharts is installed: npm list recharts
  • Check browser console for errors
  • Ensure data includes disease_label and timestamp fields

Heatmap not visible

  • Check that "Show Heatmap" toggle is enabled
  • Verify data is loading (check Network tab)
  • Check browser console for Leaflet/heat errors

Files Changed Summary

Modified:

  • frontend/src/components/HeatMap.jsx - Main component with new layout
  • frontend/package.json - Added recharts dependency
  • ml/generate_sample_dataset.py - Added disease label generation

Created:

  • frontend/src/components/heatmap/HeatLayerFixed.jsx - Canvas-fixed heat layer
  • frontend/src/components/heatmap/DiseasePanel.jsx - Disease info and stats panel
  • HEATMAP_README.md - This file

Unchanged:

  • Backend API endpoints (except data format enhancement)
  • Other frontend components and layouts
  • App structure and routing