{"id":"69cc59f14999c6cf141a53de","title":"2026 03 31","path":"how-to/committee/release-notes/2026-03-31","contentMarkdown":"# 31-Mar-2026 — System Settings Map tab improvements [#149](https://github.com/nbarrett/ngx-ramblers/issues/149)\n\n## [build 571](https://github.com/nbarrett/ngx-ramblers/actions/runs/23824076494) — [commit 392d25a](https://github.com/nbarrett/ngx-ramblers/commit/392d25ae638c1c20236d2262df180a4cb99b796f)\n\n_____\n### Colour Palette Selector\n\n![](https://ngx-ramblers.org.uk/api/aws/s3/site-content/3d046a05-d82c-4da7-b8a8-087828e409b7.jpeg)\n\n- A new colour palette selector replaces the previous \"Regenerate Colours\" button. \n- Select from 19 curated palettes including Ramblers, Pastel, Ocean, Sunset, Forest, Vivid, Appealing, and more. \n- Each palette shows colour swatches in the dropdown for easy preview. Selecting a palette immediately applies those colours to all visible groups. \n- Click \"Reapply\" to shuffle the same palette for a different arrangement.\n- The palette selector is available in both the **Groups** sub-tab and the **Map Preview** sub-tab. \n- 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. \n- The last selected palette is remembered across sessions.\n\n### Map Preview Enhancements\nThe **Map Preview** sub-tab now includes:\n- **Group filter** with select all/none — choose which groups to display\non the preview map\n- **Named presets** — save a group selection and palette as a named\npreset for quick recall. Presets are stored in system settings and\npersist across sessions. The active preset is highlighted in yellow.\nDeleting a preset requires a two-step confirmation\n- **Live colour preview** — colour changes (palette, individual picker,\nregenerate) update the map preview immediately without needing to save\nor upload geographic data first. Colour picker dragging is debounced\nto prevent excessive map redraws\n### Map Interaction Changes\n- **Click for popup** — area popups now appear on left-click instead of\nhovering. The floating tooltip shows the group name with \"click for\noptions\" hint\n- **Legend click** — clicking a legend item opens the popup for that\ngroup area. Hovering still highlights the area on the map\n- **Group website links** — popup always shows \"group website\" button\nwhen an external URL is available. Both links now open in new tabs\n- **Area data logging** — all area popup data is logged when the map\nloads for easier debugging\n### Groups Table Improvements\n- **Boundary Source dropdown** — renamed \"ONS Districts\" to \"Local\nAuthority Districts\" for clarity. \n- **Member Groups select** — dropdown renders above the table (not\nclipped inside it) and supports adding/removing individual items.\nSelect all/none header included\n- **Custom shapefile indicator** — shown as inline text with a red cross\nto clear, replacing the separate \"Custom\" column which has been removed\n- **Draggable table heights** — both the groups table and parish\nallocations table have drag-to-resize handles. Heights are persisted\nto localStorage (up to 2000px)\n- **Buttons above table** — \"Rebuild Groups\" and palette selector moved\nabove the groups table for better accessibility\n- **Populated districts filter** — now correctly filters to groups with\ndistricts, member groups, or custom shapefiles selected (excludes\nempty non-geographic groups)\n- **Regenerate scope** — colour regeneration applies only to currently\nvisible/filtered groups, not all groups\n### Sub-Tab Navigation\nThe Maps tab content is organised into sub-tabs:\n| Sub-tab                | Content                                          |\n|------------------------|--------------------------------------------------|\n| **All**                | Show everything (previous behaviour)             |\n| **Map Preview**        | Map display, palette, group filter, presets       |\n| **Groups**             | Group table, filters, colours, boundaries         |\n| **Neighbouring Areas** | Area selection, shared district settings          |\n| **Geographic Data**    | Upload/clear data, map position and zoom settings |\n| **Parish Allocations** | CSV import and allocation management             |\nSub-tab labels no longer wrap onto multiple lines.\n### Map Rendering Fixes\n- Map correctly refreshes when navigating away from and back to the\nMaps tab\n- Opacity slider changes update styles in place without repositioning\nlabels\n- Improved label collision detection with more search directions and\nfiner step sizes to reduce overlapping labels\n\n---\n## Technical Details\n### New Components\n- `ColourPaletteSelectorComponent` — reusable ng-select with colour\nswatches, palette data, and reapply button. Exports\n`COLOUR_PALETTE_OPTIONS` and `COLOUR_PALETTE_COLOURS` for shared use\n- `SelectAllHeaderComponent` — reusable select all/none header for\nng-select dropdowns. Refactored out of `EnvironmentSelectComponent`,\n`CollectionsMultiSelectComponent`, and `BackupsMultiSelectComponent`\nwhich now all use it\n### Database Migration\n- `20260330000000-backfill-area-group-geometry-source.ts` — sets\n`geometrySource: \"ons-districts\"` on all area groups in system config that lack this field\n-  The dropdown is now populated via a database migration that backfills `geometrySource` on existing groups\n### Model Changes\n- `ColourPalette` enum — 19 named palettes\n- `GroupPreset` interface — `name`, `groupNames[]`, `colourPalette?`\n- `Organisation.groupPresets` — optional array of saved presets\n- `StoredValue` — added `GROUPS_TABLE_HEIGHT`, `PARISH_TABLE_HEIGHT`,\n`COLOUR_PALETTE`\n### Area Map Component Changes\n- `previewAreaColors` input — overrides backend colours for live preview\n- `previewSelectedGroups` input — filters displayed groups in preview\n- Click-based popup instead of hover-based with 800ms delay\n- `onOpacityChange()` updates styles in place instead of rebuilding map\n- Label collision detection: 17 directions, 20 steps, 14px spacing\n### ESLint Config\n- Added `nativeBrowserDialogRestrictions` array banning `alert`,\n`confirm`, `prompt` and their `window.*` variants via\n`no-restricted-syntax` selectors\n### ESLint: Native Browser Dialogs Banned\n- `alert()`, `confirm()`, and `prompt()` are now banned by ESLint across the entire codebase. All UI interactions must use inline elements.\n- Existing `alert()` calls in the walk search proximity feature have been replaced with inline error messages.\n","contentHtml":"<h1>31-Mar-2026 — System Settings Map tab improvements <a href=\"https://github.com/nbarrett/ngx-ramblers/issues/149\">#149</a></h1>\n<h2><a href=\"https://github.com/nbarrett/ngx-ramblers/actions/runs/23824076494\">build 571</a> — <a href=\"https://github.com/nbarrett/ngx-ramblers/commit/392d25ae638c1c20236d2262df180a4cb99b796f\">commit 392d25a</a></h2>\n<hr>\n<h3>Colour Palette Selector</h3>\n<p><img src=\"https://ngx-ramblers.org.uk/api/aws/s3/site-content/3d046a05-d82c-4da7-b8a8-087828e409b7.jpeg\" alt=\"\"></p>\n<ul>\n<li>A new colour palette selector replaces the previous &quot;Regenerate Colours&quot; button. </li>\n<li>Select from 19 curated palettes including Ramblers, Pastel, Ocean, Sunset, Forest, Vivid, Appealing, and more. </li>\n<li>Each palette shows colour swatches in the dropdown for easy preview. Selecting a palette immediately applies those colours to all visible groups. </li>\n<li>Click &quot;Reapply&quot; to shuffle the same palette for a different arrangement.</li>\n<li>The palette selector is available in both the <strong>Groups</strong> sub-tab and the <strong>Map Preview</strong> sub-tab. </li>\n<li>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. </li>\n<li>The last selected palette is remembered across sessions.</li>\n</ul>\n<h3>Map Preview Enhancements</h3>\n<p>The <strong>Map Preview</strong> sub-tab now includes:</p>\n<ul>\n<li><strong>Group filter</strong> with select all/none — choose which groups to display\non the preview map</li>\n<li><strong>Named presets</strong> — save a group selection and palette as a named\npreset for quick recall. Presets are stored in system settings and\npersist across sessions. The active preset is highlighted in yellow.\nDeleting a preset requires a two-step confirmation</li>\n<li><strong>Live colour preview</strong> — colour changes (palette, individual picker,\nregenerate) update the map preview immediately without needing to save\nor upload geographic data first. Colour picker dragging is debounced\nto prevent excessive map redraws</li>\n</ul>\n<h3>Map Interaction Changes</h3>\n<ul>\n<li><strong>Click for popup</strong> — area popups now appear on left-click instead of\nhovering. The floating tooltip shows the group name with &quot;click for\noptions&quot; hint</li>\n<li><strong>Legend click</strong> — clicking a legend item opens the popup for that\ngroup area. Hovering still highlights the area on the map</li>\n<li><strong>Group website links</strong> — popup always shows &quot;group website&quot; button\nwhen an external URL is available. Both links now open in new tabs</li>\n<li><strong>Area data logging</strong> — all area popup data is logged when the map\nloads for easier debugging</li>\n</ul>\n<h3>Groups Table Improvements</h3>\n<ul>\n<li><strong>Boundary Source dropdown</strong> — renamed &quot;ONS Districts&quot; to &quot;Local\nAuthority Districts&quot; for clarity. </li>\n<li><strong>Member Groups select</strong> — dropdown renders above the table (not\nclipped inside it) and supports adding/removing individual items.\nSelect all/none header included</li>\n<li><strong>Custom shapefile indicator</strong> — shown as inline text with a red cross\nto clear, replacing the separate &quot;Custom&quot; column which has been removed</li>\n<li><strong>Draggable table heights</strong> — both the groups table and parish\nallocations table have drag-to-resize handles. Heights are persisted\nto localStorage (up to 2000px)</li>\n<li><strong>Buttons above table</strong> — &quot;Rebuild Groups&quot; and palette selector moved\nabove the groups table for better accessibility</li>\n<li><strong>Populated districts filter</strong> — now correctly filters to groups with\ndistricts, member groups, or custom shapefiles selected (excludes\nempty non-geographic groups)</li>\n<li><strong>Regenerate scope</strong> — colour regeneration applies only to currently\nvisible/filtered groups, not all groups</li>\n</ul>\n<h3>Sub-Tab Navigation</h3>\n<p>The Maps tab content is organised into sub-tabs:</p>\n<table>\n<thead>\n<tr>\n<th>Sub-tab</th>\n<th>Content</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><strong>All</strong></td>\n<td>Show everything (previous behaviour)</td>\n</tr>\n<tr>\n<td><strong>Map Preview</strong></td>\n<td>Map display, palette, group filter, presets</td>\n</tr>\n<tr>\n<td><strong>Groups</strong></td>\n<td>Group table, filters, colours, boundaries</td>\n</tr>\n<tr>\n<td><strong>Neighbouring Areas</strong></td>\n<td>Area selection, shared district settings</td>\n</tr>\n<tr>\n<td><strong>Geographic Data</strong></td>\n<td>Upload/clear data, map position and zoom settings</td>\n</tr>\n<tr>\n<td><strong>Parish Allocations</strong></td>\n<td>CSV import and allocation management</td>\n</tr>\n<tr>\n<td>Sub-tab labels no longer wrap onto multiple lines.</td>\n<td></td>\n</tr>\n</tbody></table>\n<h3>Map Rendering Fixes</h3>\n<ul>\n<li>Map correctly refreshes when navigating away from and back to the\nMaps tab</li>\n<li>Opacity slider changes update styles in place without repositioning\nlabels</li>\n<li>Improved label collision detection with more search directions and\nfiner step sizes to reduce overlapping labels</li>\n</ul>\n<hr>\n<h2>Technical Details</h2>\n<h3>New Components</h3>\n<ul>\n<li><code>ColourPaletteSelectorComponent</code> — reusable ng-select with colour\nswatches, palette data, and reapply button. Exports\n<code>COLOUR_PALETTE_OPTIONS</code> and <code>COLOUR_PALETTE_COLOURS</code> for shared use</li>\n<li><code>SelectAllHeaderComponent</code> — reusable select all/none header for\nng-select dropdowns. Refactored out of <code>EnvironmentSelectComponent</code>,\n<code>CollectionsMultiSelectComponent</code>, and <code>BackupsMultiSelectComponent</code>\nwhich now all use it</li>\n</ul>\n<h3>Database Migration</h3>\n<ul>\n<li><code>20260330000000-backfill-area-group-geometry-source.ts</code> — sets\n<code>geometrySource: &quot;ons-districts&quot;</code> on all area groups in system config that lack this field</li>\n<li>The dropdown is now populated via a database migration that backfills <code>geometrySource</code> on existing groups</li>\n</ul>\n<h3>Model Changes</h3>\n<ul>\n<li><code>ColourPalette</code> enum — 19 named palettes</li>\n<li><code>GroupPreset</code> interface — <code>name</code>, <code>groupNames[]</code>, <code>colourPalette?</code></li>\n<li><code>Organisation.groupPresets</code> — optional array of saved presets</li>\n<li><code>StoredValue</code> — added <code>GROUPS_TABLE_HEIGHT</code>, <code>PARISH_TABLE_HEIGHT</code>,\n<code>COLOUR_PALETTE</code></li>\n</ul>\n<h3>Area Map Component Changes</h3>\n<ul>\n<li><code>previewAreaColors</code> input — overrides backend colours for live preview</li>\n<li><code>previewSelectedGroups</code> input — filters displayed groups in preview</li>\n<li>Click-based popup instead of hover-based with 800ms delay</li>\n<li><code>onOpacityChange()</code> updates styles in place instead of rebuilding map</li>\n<li>Label collision detection: 17 directions, 20 steps, 14px spacing</li>\n</ul>\n<h3>ESLint Config</h3>\n<ul>\n<li>Added <code>nativeBrowserDialogRestrictions</code> array banning <code>alert</code>,\n<code>confirm</code>, <code>prompt</code> and their <code>window.*</code> variants via\n<code>no-restricted-syntax</code> selectors</li>\n</ul>\n<h3>ESLint: Native Browser Dialogs Banned</h3>\n<ul>\n<li><code>alert()</code>, <code>confirm()</code>, and <code>prompt()</code> are now banned by ESLint across the entire codebase. All UI interactions must use inline elements.</li>\n<li>Existing <code>alert()</code> calls in the walk search proximity feature have been replaced with inline error messages.</li>\n</ul>\n"}