Lots of frontend changes

frontend/src/lib/consts.ts

@@ -1,12 +1,14 @@
 import type { ViewState } from '../types';
 
+
+export const INITIAL_RETRY_MS = 1000;
+export const MAX_RETRY_MS = 10000;
+
+
 export const MAP_BOUNDS: [number, number, number, number] = [-9.5, 49, 5, 57];
 export const MAP_MIN_ZOOM = 5.5;
 
-/** Maximum zoom level for tile fetching (map extrapolates beyond this) */
-export const TILE_MAX_ZOOM = 15;
 
-/** Initial map view state */
 export const INITIAL_VIEW_STATE: ViewState = {
   longitude: -1.5,
   latitude: 53.5,
@@ -27,14 +29,11 @@ export const ZOOM_TO_RESOLUTION_THRESHOLDS = [
   { maxZoom: 13, resolution: 9 },
   { maxZoom: Infinity, resolution: 10 },
 ] as const;
-export const POSTCODE_ZOOM_THRESHOLD = 15;
+
+export const POSTCODE_ZOOM_THRESHOLD = 17.5;
 
 
-// =============================================================================
-// Color Gradients
-// =============================================================================
 
-/** Feature value gradient (green → yellow → red → purple) */
 export const FEATURE_GRADIENT: { t: number; color: [number, number, number] }[] = [
   { t: 0, color: [46, 204, 113] },
   { t: 0.33, color: [241, 196, 15] },
@@ -42,34 +41,37 @@ export const FEATURE_GRADIENT: { t: number; color: [number, number, number] }[]
   { t: 1, color: [142, 68, 173] },
 ];
 
-/** Property density gradient (teal → blue → purple) */
+/** Property density gradient — light mode (cream → orange) */
 export const DENSITY_GRADIENT: { t: number; color: [number, number, number] }[] = [
-  { t: 0, color: [130, 234, 220] },
-  { t: 0.5, color: [20, 140, 180] },
-  { t: 1, color: [88, 28, 140] },
+  { t: 0, color: [255, 255, 255] },
+  { t: 0.1, color: [248, 233, 211] },
+  { t: 0.5, color: [255, 221, 173] },
+  { t: 0.8, color: [251, 171, 60] },
+  { t: 1, color: [255, 162, 31] },
 ];
 
-// =============================================================================
-// External URLs
-// =============================================================================
+/** Property density gradient — dark mode (dark warm → bright amber) */
+export const DENSITY_GRADIENT_DARK: { t: number; color: [number, number, number] }[] = [
+  { t: 0, color: [55, 45, 35] },
+  { t: 0.1, color: [85, 65, 40] },
+  { t: 0.5, color: [170, 115, 50] },
+  { t: 0.8, color: [230, 155, 45] },
+  { t: 1, color: [255, 170, 40] },
+];
 
-/** Protomaps font glyphs URL */
-export const GLYPHS_URL = 'https://protomaps.github.io/basemaps-assets/fonts/{fontstack}/{range}.pbf';
+/** Protomaps font glyphs URL (served locally from public/assets/) */
+export const GLYPHS_URL = '/assets/fonts/{fontstack}/{range}.pbf';
 
-/** Protomaps sprite base URL */
-export const SPRITE_URL_BASE = 'https://protomaps.github.io/basemaps-assets/sprites/v4';
+/** Twemoji base URL (served locally from public/assets/) */
+export const TWEMOJI_BASE = '/assets/twemoji/';
 
-/** Twemoji CDN base URL */
-export const TWEMOJI_BASE = 'https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/72x72/';
 
-/** OpenStreetMap attribution HTML */
-export const OSM_ATTRIBUTION = '© <a href="https://openstreetmap.org">OpenStreetMap</a>';
 
-// =============================================================================
-// Stacked Chart Groups
-// =============================================================================
-
-export interface StackedChartConfig {
+/**
+ * Groups whose features should be collapsed into stacked bar charts.
+ * Keyed by feature group name. Each entry defines one stacked chart.
+ */
+export const STACKED_GROUPS: Record<string, {
   /** Display label for the chart */
   label: string;
   /** If set, use this feature's stats for the total and info popup. Otherwise sum components. */
@@ -78,13 +80,7 @@ export interface StackedChartConfig {
   unit?: string;
   /** Feature names that make up the segments */
   components: string[];
-}
-
-/**
- * Groups whose features should be collapsed into stacked bar charts.
- * Keyed by feature group name. Each entry defines one stacked chart.
- */
-export const STACKED_GROUPS: Record<string, StackedChartConfig[]> = {
+}[]> = {
   Crime: [
     {
       label: 'Serious crime',
@@ -124,6 +120,56 @@ export const STACKED_GROUPS: Record<string, StackedChartConfig[]> = {
   ],
 };
 
+/**
+ * Groups whose enum features should be collapsed into compact multi-row charts.
+ * Keyed by feature group name. Each entry defines one stacked enum chart.
+ */
+export const STACKED_ENUM_GROUPS: Record<string, {
+  /** Display label for the chart */
+  label: string;
+  /** If set, use this feature for the info popup */
+  feature?: string;
+  /** Enum feature names that make up the rows */
+  components: string[];
+  /** Value order for consistent segment ordering */
+  valueOrder: string[];
+  /** Colors for each value (matches valueOrder) */
+  valueColors: string[];
+}[]> = {
+  Property: [
+    {
+      label: 'Property type',
+      feature: 'Property type',
+      components: ['Property type'],
+      valueOrder: ['Detached', 'Semi-Detached', 'Terraced', 'Flat'],
+      valueColors: ['#8b5cf6', '#3b82f6', '#14b8a6', '#f59e0b'],
+    },
+    {
+      label: 'Leasehold/Freehold',
+      feature: 'Leashold/Freehold',
+      components: ['Leashold/Freehold'],
+      valueOrder: ['Freehold', 'Leasehold'],
+      valueColors: ['#3b82f6', '#f59e0b'],
+    },
+  ],
+  Environment: [
+    {
+      label: 'Ground Risk',
+      feature: 'Environmental risk',
+      components: [
+        'Collapsible deposits risk',
+        'Compressible ground risk',
+        'Landslide risk',
+        'Running sand risk',
+        'Shrink-swell risk',
+        'Soluble rocks risk',
+      ],
+      valueOrder: ['Low', 'Moderate', 'Significant'],
+      valueColors: ['#22c55e', '#eab308', '#ef4444'],
+    },
+  ],
+};
+
 /** Colors for stacked bar segments */
 export const SEGMENT_COLORS = [
   '#ef4444', // red-500