Refactor and other improvements

frontend/src/hooks/useCollapsibleGroups.ts

@@ -0,0 +1,16 @@
+import { useState, useCallback } from 'react';
+
+export function useCollapsibleGroups(): [Set<string>, (name: string) => void] {
+  const [collapsed, setCollapsed] = useState<Set<string>>(new Set());
+
+  const toggle = useCallback((name: string) => {
+    setCollapsed((prev) => {
+      const next = new Set(prev);
+      if (next.has(name)) next.delete(name);
+      else next.add(name);
+      return next;
+    });
+  }, []);
+
+  return [collapsed, toggle];
+}

frontend/src/hooks/useDeckLayers.ts

@@ -0,0 +1,495 @@
+import { useCallback, useRef, useState, useMemo } 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,
+  POI,
+  FeatureMeta,
+  Bounds,
+} from '../types';
+import type { SearchedPostcode } from '../components/map/PostcodeSearch';
+import {
+  emojiToTwemojiUrl,
+  DENSITY_GRADIENT,
+  DENSITY_GRADIENT_DARK,
+  getFeatureFillColor,
+} from '../lib/map-utils';
+
+/** 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) => void;
+  onHexagonHover: (h3: string | null, x?: number, y?: number) => void;
+  theme: 'light' | 'dark';
+  searchedPostcode?: SearchedPostcode | null;
+  bounds?: Bounds | null;
+}
+
+export interface PopupInfo {
+  x: number;
+  y: number;
+  name: string;
+  category: string;
+  id: string;
+}
+
+export function useDeckLayers({
+  data,
+  postcodeData,
+  usePostcodeView,
+  pois,
+  viewFeature,
+  colorRange,
+  filterRange,
+  features,
+  selectedHexagonId,
+  hoveredHexagonId,
+  onHexagonClick,
+  onHexagonHover,
+  theme,
+  searchedPostcode,
+  bounds: viewportBounds,
+}: UseDeckLayersProps) {
+  const [popupInfo, setPopupInfo] = useState<PopupInfo | null>(null);
+  const [hoverPosition, setHoverPosition] = useState<{ x: number; y: number } | null>(null);
+  const [selectedPostcode, setSelectedPostcode] = useState<string | null>(null);
+  const [hoveredPostcode, setHoveredPostcode] = useState<string | null>(null);
+
+  const isDark = theme === 'dark';
+  const densityGradient = isDark ? DENSITY_GRADIENT_DARK : DENSITY_GRADIENT;
+
+  // --- Refs for deck.gl accessors (avoid re-creating layers on every change) ---
+  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 selectedPostcodeRef = useRef(selectedPostcode);
+  selectedPostcodeRef.current = selectedPostcode;
+  const hoveredPostcodeRef = useRef(hoveredPostcode);
+  hoveredPostcodeRef.current = hoveredPostcode;
+
+  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) {
+      setSelectedPostcode((prev) => (prev === pc ? null : pc));
+      onHexagonClickRef.current(pc, true);
+    }
+  }, []);
+
+  // 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 colorTrigger = `${viewFeature}|${colorRange?.[0]}|${colorRange?.[1]}|${filterRange?.[0]}|${filterRange?.[1]}|${countRange.min}|${countRange.max}|${selectedHexagonId}|${hoveredHexagonId}|${theme}`;
+  const postcodeColorTrigger = `${viewFeature}|${colorRange?.[0]}|${colorRange?.[1]}|${filterRange?.[0]}|${filterRange?.[1]}|${postcodeCountRange.min}|${postcodeCountRange.max}|${selectedPostcode}|${hoveredPostcode}|${theme}`;
+
+  // --- Layers ---
+  const hexLayer = useMemo(
+    () =>
+      new H3HexagonLayer<HexagonData>({
+        id: 'h3-hexagons',
+        data,
+        getHexagon: (d) => d.h3,
+        getFillColor: (d) => {
+          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,
+              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 === selectedPostcodeRef.current)
+            return [255, 255, 255, 255] as [number, number, number, number];
+          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 === selectedPostcodeRef.current) return 3;
+          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]
+  );
+
+  // Check if the searched postcode has data (passes current filters)
+  const searchedPostcodeHasData = useMemo(() => {
+    if (!searchedPostcode) return false;
+    return postcodeData.some((f) => f.properties.postcode === searchedPostcode.postcode);
+  }, [searchedPostcode, postcodeData]);
+
+  // Highlight layer for searched postcode
+  const searchedPostcodeHighlightLayer = useMemo(() => {
+    if (!searchedPostcode) return null;
+    const hasData = searchedPostcodeHasData;
+    const feature = {
+      type: 'Feature' as const,
+      geometry: searchedPostcode.geometry,
+      properties: {},
+    };
+    return new GeoJsonLayer({
+      id: 'searched-postcode-highlight',
+      data: [feature],
+      getFillColor: hasData
+        ? [29, 228, 195, 40] // teal tint when has data
+        : [255, 180, 0, 30], // orange tint when filtered out
+      getLineColor: hasData
+        ? [29, 228, 195, 255] // solid teal when has data
+        : [255, 180, 0, 200], // orange when filtered out (no matching properties)
+      getLineWidth: hasData ? 4 : 3,
+      lineWidthUnits: 'pixels',
+      stroked: true,
+      filled: true,
+      pickable: false,
+    });
+  }, [searchedPostcode, searchedPostcodeHasData]);
+
+  const layers = useMemo(() => {
+    const baseLayers = usePostcodeView
+      ? [postcodeLayer, postcodeLabelsLayer, poiLayer]
+      : [hexLayer, poiLayer];
+    if (searchedPostcodeHighlightLayer) {
+      return [...baseLayers, searchedPostcodeHighlightLayer];
+    }
+    return baseLayers;
+  }, [
+    usePostcodeView,
+    hexLayer,
+    postcodeLayer,
+    postcodeLabelsLayer,
+    poiLayer,
+    searchedPostcodeHighlightLayer,
+  ]);
+
+  const handleMouseLeave = useCallback(() => {
+    setHoverPosition(null);
+    setHoveredPostcode(null);
+    setPopupInfo(null);
+    onHexagonHoverRef.current(null);
+  }, []);
+
+  return {
+    layers,
+    popupInfo,
+    hoverPosition,
+    countRange,
+    postcodeCountRange,
+    colorFeatureMeta,
+    handleMouseLeave,
+    selectedPostcode,
+    hoveredPostcode,
+  };
+}

frontend/src/hooks/usePlausible.ts

@@ -1,7 +1,7 @@
 import { init as plausibleInit } from '@plausible-analytics/tracker';
 
 plausibleInit({
-  domain: 'narrowit.schmelczer.dev',
+  domain: 'perfect-postcode.co.uk',
   endpoint: 'https://stats.schmelczer.dev/status',
   autoCapturePageviews: true,
   captureOnLocalhost: true,