31-Mar-2026 — System Settings Map tab improvements #149
build 571 — commit 392d25a
Colour Palette Selector

- A new colour palette selector replaces the previous "Regenerate Colours" button.
- Select from 19 curated palettes including Ramblers, Pastel, Ocean, Sunset, Forest, Vivid, Appealing, and more.
- Each palette shows colour swatches in the dropdown for easy preview. Selecting a palette immediately applies those colours to all visible groups.
- Click "Reapply" to shuffle the same palette for a different arrangement.
- The palette selector is available in both the Groups sub-tab and the Map Preview sub-tab.
- Individual group colours can also be regenerated using the refresh button next to each colour picker — the new colour is drawn from the currently selected palette.
- The last selected palette is remembered across sessions.
Map Preview Enhancements
The Map Preview sub-tab now includes:
- Group filter with select all/none — choose which groups to display on the preview map
- Named presets — save a group selection and palette as a named preset for quick recall. Presets are stored in system settings and persist across sessions. The active preset is highlighted in yellow. Deleting a preset requires a two-step confirmation
- Live colour preview — colour changes (palette, individual picker, regenerate) update the map preview immediately without needing to save or upload geographic data first. Colour picker dragging is debounced to prevent excessive map redraws
Map Interaction Changes
- Click for popup — area popups now appear on left-click instead of hovering. The floating tooltip shows the group name with "click for options" hint
- Legend click — clicking a legend item opens the popup for that group area. Hovering still highlights the area on the map
- Group website links — popup always shows "group website" button when an external URL is available. Both links now open in new tabs
- Area data logging — all area popup data is logged when the map loads for easier debugging
Groups Table Improvements
- Boundary Source dropdown — renamed "ONS Districts" to "Local Authority Districts" for clarity.
- Member Groups select — dropdown renders above the table (not clipped inside it) and supports adding/removing individual items. Select all/none header included
- Custom shapefile indicator — shown as inline text with a red cross to clear, replacing the separate "Custom" column which has been removed
- Draggable table heights — both the groups table and parish allocations table have drag-to-resize handles. Heights are persisted to localStorage (up to 2000px)
- Buttons above table — "Rebuild Groups" and palette selector moved above the groups table for better accessibility
- Populated districts filter — now correctly filters to groups with districts, member groups, or custom shapefiles selected (excludes empty non-geographic groups)
- Regenerate scope — colour regeneration applies only to currently visible/filtered groups, not all groups
Sub-Tab Navigation
The Maps tab content is organised into sub-tabs:
| Sub-tab | Content |
|---|---|
| All | Show everything (previous behaviour) |
| Map Preview | Map display, palette, group filter, presets |
| Groups | Group table, filters, colours, boundaries |
| Neighbouring Areas | Area selection, shared district settings |
| Geographic Data | Upload/clear data, map position and zoom settings |
| Parish Allocations | CSV import and allocation management |
| Sub-tab labels no longer wrap onto multiple lines. |
Map Rendering Fixes
- Map correctly refreshes when navigating away from and back to the Maps tab
- Opacity slider changes update styles in place without repositioning labels
- Improved label collision detection with more search directions and finer step sizes to reduce overlapping labels
Technical Details
New Components
ColourPaletteSelectorComponent— reusable ng-select with colour swatches, palette data, and reapply button. ExportsCOLOUR_PALETTE_OPTIONSandCOLOUR_PALETTE_COLOURSfor shared useSelectAllHeaderComponent— reusable select all/none header for ng-select dropdowns. Refactored out ofEnvironmentSelectComponent,CollectionsMultiSelectComponent, andBackupsMultiSelectComponentwhich now all use it
Database Migration
20260330000000-backfill-area-group-geometry-source.ts— setsgeometrySource: "ons-districts"on all area groups in system config that lack this field- The dropdown is now populated via a database migration that backfills
geometrySourceon existing groups
Model Changes
ColourPaletteenum — 19 named palettesGroupPresetinterface —name,groupNames[],colourPalette?Organisation.groupPresets— optional array of saved presetsStoredValue— addedGROUPS_TABLE_HEIGHT,PARISH_TABLE_HEIGHT,COLOUR_PALETTE
Area Map Component Changes
previewAreaColorsinput — overrides backend colours for live previewpreviewSelectedGroupsinput — filters displayed groups in preview- Click-based popup instead of hover-based with 800ms delay
onOpacityChange()updates styles in place instead of rebuilding map- Label collision detection: 17 directions, 20 steps, 14px spacing
ESLint Config
- Added
nativeBrowserDialogRestrictionsarray banningalert,confirm,promptand theirwindow.*variants viano-restricted-syntaxselectors
ESLint: Native Browser Dialogs Banned
alert(),confirm(), andprompt()are now banned by ESLint across the entire codebase. All UI interactions must use inline elements.- Existing
alert()calls in the walk search proximity feature have been replaced with inline error messages.