565 lines
18 KiB
TypeScript
565 lines
18 KiB
TypeScript
import { useCallback, useRef, useState, useMemo, useEffect } from 'react';
|
|
import { H3HexagonLayer } from '@deck.gl/geo-layers';
|
|
import { GeoJsonLayer, IconLayer, TextLayer } from '@deck.gl/layers';
|
|
import type { PickingInfo } from '@deck.gl/core';
|
|
import type {
|
|
HexagonData,
|
|
PostcodeFeature,
|
|
PostcodeProperties,
|
|
PostcodeGeometry,
|
|
POI,
|
|
FeatureMeta,
|
|
Bounds,
|
|
} from '../types';
|
|
import { DENSITY_GRADIENT, DENSITY_GRADIENT_DARK } from '../lib/consts';
|
|
import { emojiToTwemojiUrl, getFeatureFillColor } from '../lib/map-utils';
|
|
import {
|
|
type TravelTimeEntry,
|
|
travelFieldKey,
|
|
} from './useTravelTime';
|
|
import { MarchingAntsExtension } from '../lib/MarchingAntsExtension';
|
|
|
|
/** Convert POI id (e.g. "n12345") to OpenStreetMap URL */
|
|
function osmIdToUrl(id: string): string | null {
|
|
const match = id.match(/^([nwr])(\d+)$/);
|
|
if (!match) return null;
|
|
const typeMap: Record<string, string> = { n: 'node', w: 'way', r: 'relation' };
|
|
return `https://www.openstreetmap.org/${typeMap[match[1]]}/${match[2]}`;
|
|
}
|
|
|
|
export { osmIdToUrl };
|
|
|
|
interface UseDeckLayersProps {
|
|
data: HexagonData[];
|
|
postcodeData: PostcodeFeature[];
|
|
usePostcodeView: boolean;
|
|
pois: POI[];
|
|
viewFeature: string | null;
|
|
colorRange: [number, number] | null;
|
|
filterRange: [number, number] | null;
|
|
features: FeatureMeta[];
|
|
selectedHexagonId: string | null;
|
|
hoveredHexagonId: string | null;
|
|
onHexagonClick: (id: string, isPostcode?: boolean, geometry?: PostcodeGeometry) => void;
|
|
onHexagonHover: (h3: string | null, x?: number, y?: number) => void;
|
|
theme: 'light' | 'dark';
|
|
selectedPostcodeGeometry?: PostcodeGeometry | null;
|
|
bounds?: Bounds | null;
|
|
travelTimeEntries?: TravelTimeEntry[];
|
|
travelTimeColorRanges?: Map<number, [number, number]>;
|
|
}
|
|
|
|
export interface PopupInfo {
|
|
x: number;
|
|
y: number;
|
|
name: string;
|
|
category: string;
|
|
id: string;
|
|
}
|
|
|
|
/** Find the primary travel time entry: first entry with a slug and color range. */
|
|
function getPrimaryTravelIndex(
|
|
entries: TravelTimeEntry[],
|
|
colorRanges: Map<number, [number, number]>
|
|
): number {
|
|
for (let i = 0; i < entries.length; i++) {
|
|
if (entries[i].slug && colorRanges.has(i)) return i;
|
|
}
|
|
return -1;
|
|
}
|
|
|
|
export function useDeckLayers({
|
|
data,
|
|
postcodeData,
|
|
usePostcodeView,
|
|
pois,
|
|
viewFeature,
|
|
colorRange,
|
|
filterRange,
|
|
features,
|
|
selectedHexagonId,
|
|
hoveredHexagonId,
|
|
onHexagonClick,
|
|
onHexagonHover,
|
|
theme,
|
|
selectedPostcodeGeometry,
|
|
bounds: viewportBounds,
|
|
travelTimeEntries = [],
|
|
travelTimeColorRanges = new Map(),
|
|
}: UseDeckLayersProps) {
|
|
const [popupInfo, setPopupInfo] = useState<PopupInfo | null>(null);
|
|
const [hoverPosition, setHoverPosition] = useState<{ x: number; y: number } | null>(null);
|
|
const [hoveredPostcode, setHoveredPostcode] = useState<string | null>(null);
|
|
|
|
// Marching ants animation
|
|
const [marchTime, setMarchTime] = useState(0);
|
|
const hasPostcodeGeometry = selectedPostcodeGeometry != null;
|
|
useEffect(() => {
|
|
if (!hasPostcodeGeometry) return;
|
|
setMarchTime(0);
|
|
const id = setInterval(() => setMarchTime((t) => t + 0.3), 50);
|
|
return () => clearInterval(id);
|
|
}, [hasPostcodeGeometry]);
|
|
|
|
const isDark = theme === 'dark';
|
|
const densityGradient = isDark ? DENSITY_GRADIENT_DARK : DENSITY_GRADIENT;
|
|
|
|
// --- Refs for deck.gl accessors ---
|
|
const viewFeatureRef = useRef(viewFeature);
|
|
viewFeatureRef.current = viewFeature;
|
|
const colorRangeRef = useRef(colorRange);
|
|
colorRangeRef.current = colorRange;
|
|
const filterRangeRef = useRef(filterRange);
|
|
filterRangeRef.current = filterRange;
|
|
const isDarkRef = useRef(isDark);
|
|
isDarkRef.current = isDark;
|
|
const densityGradientRef = useRef(densityGradient);
|
|
densityGradientRef.current = densityGradient;
|
|
const selectedHexagonIdRef = useRef(selectedHexagonId);
|
|
selectedHexagonIdRef.current = selectedHexagonId;
|
|
const hoveredHexagonIdRef = useRef(hoveredHexagonId);
|
|
hoveredHexagonIdRef.current = hoveredHexagonId;
|
|
const hoveredPostcodeRef = useRef(hoveredPostcode);
|
|
hoveredPostcodeRef.current = hoveredPostcode;
|
|
|
|
const travelTimeEntriesRef = useRef(travelTimeEntries);
|
|
travelTimeEntriesRef.current = travelTimeEntries;
|
|
const travelTimeColorRangesRef = useRef(travelTimeColorRanges);
|
|
travelTimeColorRangesRef.current = travelTimeColorRanges;
|
|
|
|
const primaryTravelIndex = useMemo(
|
|
() => getPrimaryTravelIndex(travelTimeEntries, travelTimeColorRanges),
|
|
[travelTimeEntries, travelTimeColorRanges]
|
|
);
|
|
const primaryTravelIndexRef = useRef(primaryTravelIndex);
|
|
primaryTravelIndexRef.current = primaryTravelIndex;
|
|
|
|
const colorFeatureMeta = useMemo(
|
|
() => (viewFeature ? features.find((f) => f.name === viewFeature) || null : null),
|
|
[viewFeature, features]
|
|
);
|
|
const colorFeatureMetaRef = useRef(colorFeatureMeta);
|
|
colorFeatureMetaRef.current = colorFeatureMeta;
|
|
|
|
// --- Count ranges ---
|
|
const countRange = useMemo(() => {
|
|
if (data.length === 0) return { min: 0, max: 1 };
|
|
let min = Infinity;
|
|
let max = -Infinity;
|
|
for (const d of data) {
|
|
if (viewportBounds) {
|
|
if (
|
|
d.lat < viewportBounds.south ||
|
|
d.lat > viewportBounds.north ||
|
|
d.lon < viewportBounds.west ||
|
|
d.lon > viewportBounds.east
|
|
)
|
|
continue;
|
|
}
|
|
const c = d.count as number;
|
|
if (c < min) min = c;
|
|
if (c > max) max = c;
|
|
}
|
|
if (min === Infinity) return { min: 0, max: 1 };
|
|
if (min === max) return { min, max: min + 1 };
|
|
return { min, max };
|
|
}, [data, viewportBounds]);
|
|
|
|
const countRangeRef = useRef(countRange);
|
|
countRangeRef.current = countRange;
|
|
|
|
const postcodeCountRange = useMemo(() => {
|
|
if (postcodeData.length === 0) return { min: 0, max: 1 };
|
|
let min = Infinity;
|
|
let max = -Infinity;
|
|
for (const d of postcodeData) {
|
|
if (viewportBounds) {
|
|
const [lng, lat] = d.properties.centroid as [number, number];
|
|
if (
|
|
lat < viewportBounds.south ||
|
|
lat > viewportBounds.north ||
|
|
lng < viewportBounds.west ||
|
|
lng > viewportBounds.east
|
|
)
|
|
continue;
|
|
}
|
|
const c = d.properties.count;
|
|
if (c < min) min = c;
|
|
if (c > max) max = c;
|
|
}
|
|
if (min === Infinity) return { min: 0, max: 1 };
|
|
if (min === max) return { min, max: min + 1 };
|
|
return { min, max };
|
|
}, [postcodeData, viewportBounds]);
|
|
|
|
const postcodeCountRangeRef = useRef(postcodeCountRange);
|
|
postcodeCountRangeRef.current = postcodeCountRange;
|
|
|
|
// --- Click/hover handlers ---
|
|
const onHexagonClickRef = useRef(onHexagonClick);
|
|
onHexagonClickRef.current = onHexagonClick;
|
|
const handleHexagonClick = useCallback((info: PickingInfo<HexagonData>) => {
|
|
if (info.object && 'h3' in info.object) {
|
|
onHexagonClickRef.current(info.object.h3);
|
|
}
|
|
}, []);
|
|
|
|
const onHexagonHoverRef = useRef(onHexagonHover);
|
|
onHexagonHoverRef.current = onHexagonHover;
|
|
const handleHexagonHover = useCallback((info: PickingInfo<HexagonData>) => {
|
|
if (info.object && 'h3' in info.object && info.x !== undefined && info.y !== undefined) {
|
|
setHoverPosition({ x: info.x, y: info.y });
|
|
onHexagonHoverRef.current(info.object.h3, info.x, info.y);
|
|
} else {
|
|
setHoverPosition(null);
|
|
onHexagonHoverRef.current(null);
|
|
}
|
|
}, []);
|
|
|
|
const handlePoiHover = useCallback((info: PickingInfo<POI>) => {
|
|
if (info.object && info.x !== undefined && info.y !== undefined) {
|
|
setPopupInfo({
|
|
x: info.x,
|
|
y: info.y,
|
|
name: info.object.name,
|
|
category: info.object.category,
|
|
id: info.object.id,
|
|
});
|
|
} else {
|
|
setPopupInfo(null);
|
|
}
|
|
}, []);
|
|
|
|
const handlePoiHoverRef = useRef(handlePoiHover);
|
|
handlePoiHoverRef.current = handlePoiHover;
|
|
const stablePoiHover = useCallback((info: PickingInfo<POI>) => {
|
|
handlePoiHoverRef.current(info);
|
|
}, []);
|
|
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
const handlePostcodeClick = useCallback((info: PickingInfo<any>) => {
|
|
const pc = info.object?.properties?.postcode;
|
|
if (pc) {
|
|
onHexagonClickRef.current(pc, true, info.object?.geometry);
|
|
}
|
|
}, []);
|
|
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
const handlePostcodeHoverCallback = useCallback((info: PickingInfo<any>) => {
|
|
const pc = info.object?.properties?.postcode;
|
|
if (pc && info.x !== undefined && info.y !== undefined) {
|
|
setHoveredPostcode(pc);
|
|
setHoverPosition({ x: info.x, y: info.y });
|
|
onHexagonHoverRef.current(pc, info.x, info.y);
|
|
} else {
|
|
setHoveredPostcode(null);
|
|
setHoverPosition(null);
|
|
onHexagonHoverRef.current(null);
|
|
}
|
|
}, []);
|
|
|
|
// --- Color triggers ---
|
|
const ttTrigger = useMemo(() => {
|
|
const parts: string[] = [];
|
|
for (let i = 0; i < travelTimeEntries.length; i++) {
|
|
const entry = travelTimeEntries[i];
|
|
const cr = travelTimeColorRanges.get(i);
|
|
parts.push(`${i}:${entry.slug}|${cr?.[0]}|${cr?.[1]}|${entry.timeRange?.[0]}|${entry.timeRange?.[1]}`);
|
|
}
|
|
return parts.join(';');
|
|
}, [travelTimeEntries, travelTimeColorRanges]);
|
|
|
|
const colorTrigger = `${viewFeature}|${colorRange?.[0]}|${colorRange?.[1]}|${filterRange?.[0]}|${filterRange?.[1]}|${countRange.min}|${countRange.max}|${selectedHexagonId}|${hoveredHexagonId}|${theme}|${ttTrigger}`;
|
|
const postcodeColorTrigger = `${viewFeature}|${colorRange?.[0]}|${colorRange?.[1]}|${filterRange?.[0]}|${filterRange?.[1]}|${postcodeCountRange.min}|${postcodeCountRange.max}|${hoveredPostcode}|${theme}|${ttTrigger}`;
|
|
|
|
// --- Layers ---
|
|
const hexLayer = useMemo(
|
|
() =>
|
|
new H3HexagonLayer<HexagonData>({
|
|
id: 'h3-hexagons',
|
|
data,
|
|
getHexagon: (d) => d.h3,
|
|
getFillColor: (d) => {
|
|
const dark = isDarkRef.current;
|
|
const pti = primaryTravelIndexRef.current;
|
|
const entries = travelTimeEntriesRef.current;
|
|
const colorRanges = travelTimeColorRangesRef.current;
|
|
|
|
// Travel time coloring: primary entry colors, others dim-filter
|
|
if (pti >= 0) {
|
|
const primaryEntry = entries[pti];
|
|
const fieldKey = travelFieldKey(primaryEntry);
|
|
const ttVal = d[`avg_${fieldKey}`];
|
|
const ttClr = colorRanges.get(pti);
|
|
if (ttVal == null) {
|
|
return (dark ? [80, 70, 65, 80] : [128, 128, 128, 80]) as [number, number, number, number];
|
|
}
|
|
|
|
// Check all entries with time ranges as filters
|
|
for (let i = 0; i < entries.length; i++) {
|
|
const entry = entries[i];
|
|
if (!entry.timeRange || !entry.slug) continue;
|
|
const fk = travelFieldKey(entry);
|
|
const modeVal = d[`avg_${fk}`];
|
|
if (modeVal == null || (modeVal as number) < entry.timeRange[0] || (modeVal as number) > entry.timeRange[1]) {
|
|
return (dark ? [60, 55, 50, 60] : [180, 180, 180, 60]) as [number, number, number, number];
|
|
}
|
|
}
|
|
|
|
if (ttClr) {
|
|
return getFeatureFillColor(
|
|
ttVal as number,
|
|
ttVal as number,
|
|
ttVal as number,
|
|
ttClr,
|
|
null,
|
|
0,
|
|
densityGradientRef.current,
|
|
dark,
|
|
255
|
|
);
|
|
}
|
|
}
|
|
const vf = viewFeatureRef.current;
|
|
const clr = colorRangeRef.current;
|
|
const fr = filterRangeRef.current;
|
|
const cfm = colorFeatureMetaRef.current;
|
|
if (vf && clr && cfm) {
|
|
const val = d[`avg_${vf}`] ?? d[`min_${vf}`];
|
|
const minVal = d[`min_${vf}`] as number | undefined;
|
|
const maxVal = d[`max_${vf}`] as number | undefined;
|
|
return getFeatureFillColor(
|
|
val as number | null | undefined,
|
|
minVal,
|
|
maxVal,
|
|
clr,
|
|
fr,
|
|
0,
|
|
densityGradientRef.current,
|
|
dark,
|
|
255
|
|
);
|
|
}
|
|
const cr = countRangeRef.current;
|
|
const c = d.count as number;
|
|
const t = (c - cr.min) / (cr.max - cr.min);
|
|
return getFeatureFillColor(
|
|
null,
|
|
undefined,
|
|
undefined,
|
|
null,
|
|
null,
|
|
t,
|
|
densityGradientRef.current,
|
|
dark,
|
|
255
|
|
);
|
|
},
|
|
getLineColor: (d) => {
|
|
if (d.h3 === selectedHexagonIdRef.current)
|
|
return [255, 255, 255, 255] as [number, number, number, number];
|
|
if (d.h3 === hoveredHexagonIdRef.current)
|
|
return [29, 228, 195, 200] as [number, number, number, number];
|
|
return [0, 0, 0, 0] as [number, number, number, number];
|
|
},
|
|
getLineWidth: (d) => {
|
|
if (d.h3 === selectedHexagonIdRef.current) return 3;
|
|
if (d.h3 === hoveredHexagonIdRef.current) return 2;
|
|
return 0;
|
|
},
|
|
lineWidthUnits: 'pixels',
|
|
updateTriggers: {
|
|
getFillColor: [colorTrigger],
|
|
getLineColor: [colorTrigger],
|
|
getLineWidth: [colorTrigger],
|
|
},
|
|
extruded: false,
|
|
pickable: true,
|
|
opacity: 1,
|
|
highPrecision: true,
|
|
onClick: handleHexagonClick,
|
|
onHover: handleHexagonHover,
|
|
// @ts-expect-error beforeId is a MapboxOverlay interleave prop, not typed in LayerProps
|
|
beforeId: 'landuse_park',
|
|
}),
|
|
[data, colorTrigger, handleHexagonClick, handleHexagonHover]
|
|
);
|
|
|
|
const postcodeLayer = useMemo(
|
|
() =>
|
|
new GeoJsonLayer<PostcodeProperties>({
|
|
id: 'postcode-polygons',
|
|
data: postcodeData as PostcodeFeature[],
|
|
getFillColor: (f) => {
|
|
const d = f.properties;
|
|
const vf = viewFeatureRef.current;
|
|
const clr = colorRangeRef.current;
|
|
const fr = filterRangeRef.current;
|
|
const cfm = colorFeatureMetaRef.current;
|
|
const dark = isDarkRef.current;
|
|
if (vf && clr && cfm) {
|
|
const val = d[`avg_${vf}`] ?? d[`min_${vf}`];
|
|
const minVal = d[`min_${vf}`] as number | undefined;
|
|
const maxVal = d[`max_${vf}`] as number | undefined;
|
|
return getFeatureFillColor(
|
|
val as number | null | undefined,
|
|
minVal,
|
|
maxVal,
|
|
clr,
|
|
fr,
|
|
0,
|
|
densityGradientRef.current,
|
|
dark,
|
|
180
|
|
);
|
|
}
|
|
const cr = postcodeCountRangeRef.current;
|
|
const c = d.count;
|
|
const t = (c - cr.min) / (cr.max - cr.min);
|
|
return getFeatureFillColor(
|
|
null,
|
|
undefined,
|
|
undefined,
|
|
null,
|
|
null,
|
|
t,
|
|
densityGradientRef.current,
|
|
dark,
|
|
180
|
|
);
|
|
},
|
|
getLineColor: (f) => {
|
|
const pc = f.properties.postcode;
|
|
const dark = isDarkRef.current;
|
|
if (pc === hoveredPostcodeRef.current)
|
|
return [29, 228, 195, 200] as [number, number, number, number];
|
|
return (dark ? [180, 170, 160, 100] : [100, 100, 100, 150]) as [
|
|
number,
|
|
number,
|
|
number,
|
|
number,
|
|
];
|
|
},
|
|
getLineWidth: (f) => {
|
|
const pc = f.properties.postcode;
|
|
if (pc === hoveredPostcodeRef.current) return 2;
|
|
return 1;
|
|
},
|
|
lineWidthUnits: 'pixels',
|
|
updateTriggers: {
|
|
getFillColor: [postcodeColorTrigger],
|
|
getLineColor: [postcodeColorTrigger],
|
|
getLineWidth: [postcodeColorTrigger],
|
|
},
|
|
extruded: false,
|
|
pickable: true,
|
|
onClick: handlePostcodeClick,
|
|
onHover: handlePostcodeHoverCallback,
|
|
// @ts-expect-error beforeId is a MapboxOverlay interleave prop, not typed in LayerProps
|
|
beforeId: 'landuse_park',
|
|
}),
|
|
[postcodeData, postcodeColorTrigger, handlePostcodeClick, handlePostcodeHoverCallback]
|
|
);
|
|
|
|
const postcodeLabelsLayer = useMemo(
|
|
() =>
|
|
new TextLayer<PostcodeFeature>({
|
|
id: 'postcode-labels',
|
|
data: postcodeData,
|
|
getPosition: (f) => f.properties.centroid,
|
|
getText: (f) => f.properties.postcode,
|
|
getSize: 12,
|
|
getColor: theme === 'dark' ? [255, 255, 255, 240] : [40, 40, 40, 220],
|
|
getTextAnchor: 'middle',
|
|
getAlignmentBaseline: 'center',
|
|
fontFamily: 'Inter, system-ui, sans-serif',
|
|
fontWeight: 600,
|
|
outlineWidth: 2,
|
|
outlineColor: theme === 'dark' ? [30, 30, 30, 200] : [255, 255, 255, 200],
|
|
sizeUnits: 'pixels',
|
|
sizeMinPixels: 10,
|
|
sizeMaxPixels: 14,
|
|
billboard: false,
|
|
pickable: false,
|
|
}),
|
|
[postcodeData, theme]
|
|
);
|
|
|
|
const poiLayer = useMemo(
|
|
() =>
|
|
new IconLayer<POI>({
|
|
id: 'poi-icons',
|
|
data: pois,
|
|
getPosition: (d) => [d.lng, d.lat],
|
|
getIcon: (d) => ({
|
|
url: emojiToTwemojiUrl(d.emoji),
|
|
width: 72,
|
|
height: 72,
|
|
}),
|
|
getSize: 24,
|
|
sizeMinPixels: 20,
|
|
sizeMaxPixels: 40,
|
|
pickable: true,
|
|
onHover: stablePoiHover,
|
|
}),
|
|
[pois, stablePoiHover]
|
|
);
|
|
|
|
// Marching ants highlight layer for selected postcode
|
|
const marchingAntsLayer = useMemo(() => {
|
|
if (!selectedPostcodeGeometry) return null;
|
|
return new GeoJsonLayer({
|
|
id: 'marching-ants',
|
|
data: [
|
|
{
|
|
type: 'Feature' as const,
|
|
geometry: selectedPostcodeGeometry,
|
|
properties: {},
|
|
},
|
|
],
|
|
filled: false,
|
|
stroked: true,
|
|
getLineColor: [29, 228, 195, 255],
|
|
getLineWidth: 3,
|
|
lineWidthUnits: 'pixels' as const,
|
|
pickable: false,
|
|
marchTime,
|
|
extensions: [new MarchingAntsExtension()],
|
|
});
|
|
}, [selectedPostcodeGeometry, marchTime]);
|
|
|
|
const layers = useMemo(() => {
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
const baseLayers: any[] = usePostcodeView
|
|
? [postcodeLayer, postcodeLabelsLayer, poiLayer]
|
|
: [hexLayer, poiLayer];
|
|
if (marchingAntsLayer) baseLayers.push(marchingAntsLayer);
|
|
return baseLayers;
|
|
}, [
|
|
usePostcodeView,
|
|
hexLayer,
|
|
postcodeLayer,
|
|
postcodeLabelsLayer,
|
|
poiLayer,
|
|
marchingAntsLayer,
|
|
]);
|
|
|
|
const handleMouseLeave = useCallback(() => {
|
|
setHoverPosition(null);
|
|
setHoveredPostcode(null);
|
|
setPopupInfo(null);
|
|
onHexagonHoverRef.current(null);
|
|
}, []);
|
|
|
|
return {
|
|
layers,
|
|
popupInfo,
|
|
hoverPosition,
|
|
countRange,
|
|
postcodeCountRange,
|
|
colorFeatureMeta,
|
|
handleMouseLeave,
|
|
hoveredPostcode,
|
|
primaryTravelIndex,
|
|
};
|
|
}
|