Lots of improvements

frontend/src/hooks/useDeckLayers.ts

@@ -1,6 +1,7 @@
 import { useCallback, useRef, useState, useMemo, useEffect } from 'react';
 import { H3HexagonLayer } from '@deck.gl/geo-layers';
 import { GeoJsonLayer, IconLayer, TextLayer } from '@deck.gl/layers';
+import { cellToBoundary } from 'h3-js';
 import type { PickingInfo } from '@deck.gl/core';
 import type {
   HexagonData,
@@ -80,13 +81,13 @@ export function useDeckLayers({
 
   // Marching ants animation
   const [marchTime, setMarchTime] = useState(0);
-  const hasPostcodeGeometry = selectedPostcodeGeometry != null;
+  const hasSelection = selectedPostcodeGeometry != null || selectedHexagonId != null;
   useEffect(() => {
-    if (!hasPostcodeGeometry) return;
+    if (!hasSelection) return;
     setMarchTime(0);
     const id = setInterval(() => setMarchTime((t) => t + 0.3), 50);
     return () => clearInterval(id);
-  }, [hasPostcodeGeometry]);
+  }, [hasSelection]);
 
   const isDark = theme === 'dark';
   const densityGradient = isDark ? DENSITY_GRADIENT_DARK : DENSITY_GRADIENT;
@@ -332,14 +333,11 @@ export function useDeckLayers({
           );
         },
         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;
         },
@@ -481,15 +479,22 @@ export function useDeckLayers({
     [pois, stablePoiHover]
   );
 
-  // Marching ants highlight layer for selected postcode
+  // Marching ants highlight layer for selected hexagon or postcode
   const marchingAntsLayer = useMemo(() => {
-    if (!selectedPostcodeGeometry) return null;
+    let geometry: PostcodeGeometry | null = null;
+    if (selectedPostcodeGeometry) {
+      geometry = selectedPostcodeGeometry;
+    } else if (selectedHexagonId) {
+      const boundary = cellToBoundary(selectedHexagonId, true);
+      geometry = { type: 'Polygon', coordinates: [boundary] };
+    }
+    if (!geometry) return null;
     return new GeoJsonLayer({
       id: 'marching-ants',
       data: [
         {
           type: 'Feature' as const,
-          geometry: selectedPostcodeGeometry,
+          geometry,
           properties: {},
         },
       ],
@@ -502,7 +507,7 @@ export function useDeckLayers({
       marchTime,
       extensions: [new MarchingAntsExtension()],
     });
-  }, [selectedPostcodeGeometry, marchTime]);
+  }, [selectedPostcodeGeometry, selectedHexagonId, marchTime]);
 
   const layers = useMemo(() => {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any