Support resolution and viewport requesting for Grid mode + Meta API for Nuts Regions from backend

README.md

@@ -12,8 +12,7 @@ It can be configured to request and display NUTS3 regions, or worldwide equivale
 For the worldwide view, the data is projected from individual points into polygons on the frontend.
 
 ## Main components diagram:
-(Out of date since 6/10/2025 Grid Refactoring to restore grid functionality and new NUTS API)
-<img width="1370" height="847" alt="image" src="https://github.com/user-attachments/assets/bb7daba0-d421-477b-9005-d5a116a119b2" />
+(Out of date, new diagram needed)
 
 ## Example: Worldwide Simple R0 example:
 <img width="3700" height="1648" alt="image" src="https://github.com/user-attachments/assets/625d4432-faad-4e5f-b60f-4af96d6848b1" />
@@ -25,7 +24,7 @@ For the worldwide view, the data is projected from individual points into polygo
 
 
 # Installation guide
-- First, make sure the `onehealth-db` repository is running with the API accessible. The API must be able to return generated data for 2016 and 2017.
+- First, make sure the `onehealth-db` repository is running with the API accessible. It depends upon a running postgres database, typically docker name `my-postgres`. The API must be able to return generated data for 2016 and 2017.
 - Run `pnpm i` to install dependencies
 - Run `pnpm run dev` to launch the application
 

frontend/biome.json

@@ -0,0 +1,33 @@
+{
+	"$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
+	"vcs": {
+		"enabled": false,
+		"clientKind": "git",
+		"useIgnoreFile": false
+	},
+	"files": {
+		"ignoreUnknown": false,
+		"ignore": []
+	},
+	"formatter": {
+		"enabled": true,
+		"indentStyle": "tab"
+	},
+	"organizeImports": {
+		"enabled": true
+	},
+	"linter": {
+		"enabled": true,
+		"rules": {
+			"recommended": true,
+			"correctness": {
+				"useExhaustiveDependencies": "off"
+			}
+		}
+	},
+	"javascript": {
+		"formatter": {
+			"quoteStyle": "double"
+		}
+	}
+}

frontend/src/component/Mapper/AdaptiveGridLayer.tsx

@@ -0,0 +1,76 @@
+import L from "leaflet";
+import { useMemo } from "react";
+import { Popup, Rectangle } from "react-leaflet";
+import "leaflet/dist/leaflet.css";
+import { observer } from "mobx-react-lite";
+import { gridProcessingStore } from "../../stores/GridProcessingStore";
+import { temperatureDataStore } from "../../stores/TemperatureDataStore";
+import { getColorFromGradient } from "./utilities/gradientUtilities";
+
+const AdaptiveGridLayer = observer(() => {
+	const canvasRenderer = useMemo(() => L.canvas({ padding: 0.5 }), []);
+	const renderStart = performance.now();
+	const gridCells = gridProcessingStore.gridCells;
+	const processedDataExtremes = temperatureDataStore.processedDataExtremes;
+
+	console.log("📱 AdaptiveGridLayer render START - cells:", gridCells.length);
+
+	const getGridCellStyle = (temperature: number) => {
+		if (!processedDataExtremes)
+			return {
+				fillColor: "#ccc",
+				weight: 0.5,
+				opacity: 0.8,
+				color: "#666",
+				fillOpacity: 0.8,
+			};
+		const color = getColorFromGradient(temperature, processedDataExtremes);
+		return {
+			fillColor: color,
+			weight: 0.5,
+			opacity: 0.8,
+			color: "#666",
+			fillOpacity: 0.8,
+		};
+	};
+
+	// zIndex less than the city layer so those appear on top.
+	const result = (
+		<div style={{ zIndex: "335" }}>
+			{gridCells.map(
+				(
+					cell, // these adapt to different scales because cell.bounds changes.
+				) => (
+					<Rectangle
+						key={cell.id}
+						bounds={cell.bounds}
+						renderer={canvasRenderer}
+						interactive
+						pathOptions={getGridCellStyle(cell.temperature)}
+						eventHandlers={{
+							click: (e) => {
+								e.target.openPopup();
+								e.originalEvent?.stopPropagation();
+							},
+						}}
+					>
+						<Popup className="grid-popup">
+							<p>{cell.temperature.toFixed(2)}</p>
+							<p>Coordinates: {cell.id}</p>
+						</Popup>
+					</Rectangle>
+				),
+			)}
+		</div>
+	); // todo: Replace just teh cell.temperature above: rename temperature to .value (as it is used for R0 too etc) and provide the label.
+	// the label should be in some kind of mobx store or passed as prop.
+
+	const renderTime = performance.now() - renderStart;
+	console.log(
+		`📱 AdaptiveGridLayer render COMPLETE - ${gridCells.length} cells in ${renderTime.toFixed(2)}ms`,
+	);
+
+	return result;
+});
+
+export default AdaptiveGridLayer;

frontend/src/component/Mapper/CitiesLayer.tsx

@@ -1,47 +1,28 @@
-import * as turf from "@turf/turf";
-import type { MultiPolygon, Polygon } from "geojson";
-import L from "leaflet";
-import { useEffect, useState } from "react";
-import { CircleMarker, Marker, Pane, Popup } from "react-leaflet";
 import type { NutsGeoJSON, WorldwideGeoJSON } from "./types";
-import { MAX_ZOOM, MIN_ZOOM } from "./utilities/mapDataUtils.tsx";
-
-interface City {
-	name: string;
-	lat: number;
-	lng: number;
-	population: number;
-	country: string;
-}
-
-interface CityCSV {
-	city: string;
-	city_ascii: string;
-	lat: string;
-	lng: string;
-	pop: string;
-	country: string;
-	iso2: string;
-	iso3: string;
-	province: string;
-}
 
 interface CitiesLayerProps {
 	zoom: number;
 	dataRegions?: NutsGeoJSON | WorldwideGeoJSON | null;
 }
+const CitiesLayer = ({
+	zoom: _zoom,
+	dataRegions: _dataRegions,
+}: CitiesLayerProps) => <div />;
+
+// Temporarily shim because I realised CitiesLayer was the source of lag, not either of the new APIs!
+// with reference to: https://github.com/ssciwr/onehealth-map-frontend/issues/54#issuecomment-3433209012
 
-const CitiesLayer = ({ zoom, dataRegions }: CitiesLayerProps) => {
+/*
+const CitiesLayer2 = ({ zoom, dataRegions }: CitiesLayerProps) => {
 	const [cities, setCities] = useState<City[]>([]);
 
 	useEffect(() => {
 		const loadCities = async () => {
 			try {
 				// Load from CSV data source (MIT licensed)
-				/* This data was downloaded in early August 2025, from https://www.simplemaps.aspiringeconomist.com/resources/world-cities-data
-				- the Natural Earth Populated Places 2015 data with 7,300 cities/towns.
-				Importantly the data is from 2015.
-				 */
+				// This data was downloaded in early August 2025, from https://www.simplemaps.aspiringeconomist.com/resources/world-cities-data
+				// - the Natural Earth Populated Places 2015 data with 7,300 cities/towns.
+				// Importantly the data is from 2015.
 				const response = await fetch("/data/world_cities.csv");
 				if (!response.ok) {
 					throw new Error(`HTTP ${response.status}: ${response.statusText}`);
@@ -203,6 +184,7 @@ const CitiesLayer = ({ zoom, dataRegions }: CitiesLayerProps) => {
 		});
 	};
 
+	console.log("Current zoom for cities layer is: ", zoom);
 	const threshold = getPopulationThreshold(zoom);
 	const citiesInDataRegions = filterCitiesByDataRegions(cities);
 	const visibleCities = citiesInDataRegions.filter(
@@ -211,7 +193,6 @@ const CitiesLayer = ({ zoom, dataRegions }: CitiesLayerProps) => {
 
 	return (
 		<>
-			{/* City marker dots - lower z-index */}
 			<Pane name="cityMarkersPane" style={{ zIndex: 100 }}>
 				{visibleCities.map((city) => (
 					<CircleMarker
@@ -224,22 +205,23 @@ const CitiesLayer = ({ zoom, dataRegions }: CitiesLayerProps) => {
 						weight={1}
 						opacity={0.8}
 					>
-						<Popup>
-							<div style={{ fontSize: "14px", lineHeight: "1.4" }}>
-								<strong>{city.name}</strong>
-								<br />
-								<span style={{ color: "#666" }}>{city.country}</span>
-								<br />
-								<span style={{ fontSize: "12px" }}>
-									Population: {formatPopulation(city.population)}
-								</span>
-							</div>
-						</Popup>
+						<div style={{ zIndex: 390 }}>
+							<Popup>
+								<div style={{ fontSize: "14px", lineHeight: "1.4" }}>
+									<strong>{city.name}</strong>
+									<br />
+									<span style={{ color: "#666" }}>{city.country}</span>
+									<br />
+									<span style={{ fontSize: "12px" }}>
+										Population: {formatPopulation(city.population)}
+									</span>
+								</div>
+							</Popup>
+						</div>
 					</CircleMarker>
 				))}
 			</Pane>
 
-			{/* City name labels - higher z-index */}
 			<Pane name="cityLabelsPane" style={{ zIndex: 110 }}>
 				{visibleCities.map((city) => (
 					<Marker
@@ -252,5 +234,6 @@ const CitiesLayer = ({ zoom, dataRegions }: CitiesLayerProps) => {
 		</>
 	);
 };
+*/
 
 export default CitiesLayer;