@smartnet360/svelte-components 0.0.65 → 0.0.67

package/dist/map-v2/core/controls/MapStyleControl.svelte

@@ -85,6 +85,10 @@
 		position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
 		/** Control title */
 		title?: string;
+		/** Optional header icon */
+		icon?: string;
+		/** Show icon when collapsed (default: true) */
+		iconOnlyWhenCollapsed?: boolean;
 		/** Initially collapsed? */
 		initiallyCollapsed?: boolean;
 		/** Storage namespace for persistence */
@@ -98,7 +102,9 @@
 	let {
 		position = 'top-right',
 		title = 'Map Style',
-		initiallyCollapsed = false,
+		icon = 'layers',
+		iconOnlyWhenCollapsed = true,
+		initiallyCollapsed = true,
 		namespace = 'map',
 		availableStyles = DEFAULT_STYLES,
 		defaultStyleId = 'streets'
@@ -179,34 +185,24 @@
 	}
 </script>
 
-<MapControl {position} {title} collapsible={true} {initiallyCollapsed}>
+<MapControl {position} {title} {icon} {iconOnlyWhenCollapsed} collapsible={true} {initiallyCollapsed}>
 	<div class="map-style-controls">
 		<div class="style-grid">
 			{#each availableStyles as style (style.id)}
 				<button
-					class="style-option"
+					type="button"
+					class="btn style-option"
+					class:btn-primary={currentStyle.id === style.id}
+					class:btn-outline-secondary={currentStyle.id !== style.id}
 					class:active={currentStyle.id === style.id}
 					onclick={() => handleStyleChange(style.id)}
 					title={style.description}
 				>
-					<i class="bi bi-{style.icon || 'map'}"></i>
-					<!-- {#if currentStyle.id === style.id}
-						<div class="style-checkmark">
-							<i class="bi bi-check-circle-fill"></i>
-						</div>
-					{/if} -->
+					<i class="bi bi-{style.icon || 'map'} style-icon"></i>
+					<span class="style-name">{style.name}</span>
 				</button>
 			{/each}
 		</div>
-		
-		{#if currentStyle.description}
-			<div class="current-style-info">
-				<small class="text-muted">
-					<i class="bi bi-info-circle"></i>
-					{currentStyle.description}
-				</small>
-			</div>
-		{/if}
 	</div>
 </MapControl>
 
@@ -215,75 +211,74 @@
 		min-width: 240px;
 	}
 
-	.style-grid {
-		display: grid;
-		grid-template-columns: repeat(2, 1fr);
-		gap: 4px;
-		margin-bottom: 8px;
-	}
+		.style-grid {
+			display: grid;
+			grid-template-columns: repeat(2, minmax(0, 1fr));
+			gap: 0.5rem;
+			margin-bottom: 0.75rem;
+		}
 
-	.style-option {
-		position: relative;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		padding: 8px;
-		border: 2px solid #ddd;
-		border-radius: 6px;
-		background: white;
-		cursor: pointer;
-		transition: all 0.2s;
-		font-size: 24px;
-		color: #6c757d;
-	}
+		.style-option {
+			display: inline-flex;
+			flex-direction: column;
+			align-items: center;
+			justify-content: center;
+			gap: 0.4rem;
+			text-align: center;
+			font-weight: 500;
+			border: var(--bs-btn-border-width, 1px) solid var(
+				--bs-btn-border-color,
+				var(--bs-border-color, #dee2e6)
+			);
+			/* Normalise Bootstrap spacing so icons remain centred */
+			--bs-btn-padding-y: 0.75rem;
+			--bs-btn-padding-x: 0.75rem;
+			--bs-btn-line-height: 1.25;
+			width: 100%;
+			height: auto;
+		}
 
-	.style-option:hover {
-		border-color: #0d6efd;
-		box-shadow: 0 2px 8px rgba(13, 110, 253, 0.2);
-		transform: translateY(-1px);
-	}
+		.style-option .style-icon {
+			display: block;
+			font-size: 1.2rem;
+			line-height: 1;
+			margin-top: 0.15rem;
+		}
 
-	.style-option.active {
-		border-color: #0d6efd;
-		background: #e7f1ff;
-		color: #0d6efd;
-	}
+		.style-option .style-name {
+			display: block;
+			font-size: 0.5rem;
+			text-transform: uppercase;
+			letter-spacing: 0.04em;
+		}
 
-	.style-name {
-		font-size: 12px;
-		font-weight: 500;
-		text-align: center;
-		color: #333;
-	}
+		/* Ensure Bootstrap button variables win inside Mapbox control */
+		.map-style-controls .btn {
+			background-color: var(--bs-btn-bg, transparent);
+			border-color: var(--bs-btn-border-color, currentColor);
+			color: var(--bs-btn-color, inherit);
+			transition: var(--bs-btn-transition, all 0.15s ease);
+			border-radius: var(--bs-btn-border-radius, var(--bs-border-radius, 0.375rem));
+		}
 
-	.style-option.active .style-name {
-		color: #0d6efd;
-		font-weight: 600;
-	}
+		.map-style-controls .btn:hover,
+		.map-style-controls .btn:focus {
+			background-color: var(--bs-btn-hover-bg, var(--bs-btn-bg, transparent));
+			border-color: var(--bs-btn-hover-border-color, var(--bs-btn-border-color, currentColor));
+			color: var(--bs-btn-hover-color, var(--bs-btn-color, inherit));
+		}
 
-	.style-checkmark {
-		position: absolute;
-		top: 4px;
-		right: 4px;
-		color: #0d6efd;
-		font-size: 18px;
-		background: white;
-		border-radius: 50%;
-		line-height: 1;
-	}
+		.map-style-controls .btn:disabled,
+		.map-style-controls .btn:disabled:hover {
+			background-color: var(--bs-btn-disabled-bg, var(--bs-btn-bg, transparent));
+			border-color: var(--bs-btn-disabled-border-color, var(--bs-btn-border-color, currentColor));
+			color: var(--bs-btn-disabled-color, var(--bs-btn-color, inherit));
+			opacity: var(--bs-btn-disabled-opacity, 0.65);
+		}
+
+		.map-style-controls .btn-primary {
+			box-shadow: 0 4px 12px rgba(var(--bs-primary-rgb, 13, 110, 253), 0.18);
+		}
 
-	.current-style-info {
-		padding: 8px;
-		background: #f8f9fa;
-		border-radius: 4px;
-		text-align: center;
-	}
 
-	.current-style-info small {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		gap: 4px;
-		font-size: 11px;
-	}
 </style>

package/dist/map-v2/core/controls/MapStyleControl.svelte.d.ts

@@ -10,6 +10,10 @@ interface Props {
     position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
     /** Control title */
     title?: string;
+    /** Optional header icon */
+    icon?: string;
+    /** Show icon when collapsed (default: true) */
+    iconOnlyWhenCollapsed?: boolean;
     /** Initially collapsed? */
     initiallyCollapsed?: boolean;
     /** Storage namespace for persistence */

package/dist/map-v2/demo/DemoMap.svelte

@@ -18,6 +18,7 @@
 	import SitesLayer from '../features/sites/layers/SitesLayer.svelte';
 	import SiteFilterControl from '../features/sites/controls/SiteFilterControl.svelte';
 	import SiteSizeSlider from '../features/sites/controls/SiteSizeSlider.svelte';
+	import SiteSelectionControl from '../features/sites/controls/SiteSelectionControl.svelte';
 	import CellsLayer from '../features/cells/layers/CellsLayer.svelte';
 	import CellFilterControl from '../features/cells/controls/CellFilterControl.svelte';
 	import CellStyleControl from '../features/cells/controls/CellStyleControl.svelte';
@@ -51,6 +52,28 @@
 	// Create cell store with demo data
 	const cellStore = createCellStoreContext(demoCells);
 
+	// Toggle whether control headers show icons (when collapsed) or always show text
+	const useIconHeaders = true;
+
+	// Bootstrap icon names for each control header
+	const controlIcons = {
+		mapStyle: 'layers',
+		cellFilter: 'diagram-3',
+		siteFilter: 'funnel',
+		siteSelection: 'check2-square',
+		cellStyle: 'palette',
+		siteSize: 'sliders'
+	};
+
+	// Handler for site selection action button
+	function handleAnalyzeSites(siteIds: string[]) {
+		console.log('Analyze sites:', siteIds);
+		// Example: Navigate to SiteCheck page with selected sites
+		// window.location.href = `/site-check?sites=${siteIds.join(',')}`;
+		// Or use SvelteKit navigate, or open modal, etc.
+		alert(`Selected ${siteIds.length} sites:\n${siteIds.join(', ')}`);
+	}
+
 </script>
 
 <!-- //		controls={['navigation', 'scale']} -->
@@ -66,19 +89,64 @@
 		<CellsLayer store={cellStore} namespace="demo-cells" />
 
 		<!-- Map style control - switch between map styles -->
-		<MapStyleControl position="top-right" initiallyCollapsed={true} namespace="demo-map" />
+		<MapStyleControl
+			position="top-right"
+			initiallyCollapsed={true}
+			namespace="demo-map"
+			icon={controlIcons.mapStyle}
+			iconOnlyWhenCollapsed={useIconHeaders}
+		/>
+
+		<!-- Cell filter control - dynamic hierarchical filtering -->
+		<CellFilterControl
+			store={cellStore}
+			position="top-left"
+			title="Cell Filter"
+			initiallyCollapsed={true}
+			icon={controlIcons.cellFilter}
+			iconOnlyWhenCollapsed={useIconHeaders}
+		/>
 
 		<!-- Site filter control - updates store.filteredSites -->
-		<SiteFilterControl store={siteStore} position="top-left" title="Site Filter" />
+		<SiteFilterControl
+			store={siteStore}
+			position="top-left"
+			title="Site Filter"
+			icon={controlIcons.siteFilter}
+			iconOnlyWhenCollapsed={useIconHeaders}
+		/>
 
-		<!-- Cell filter control - dynamic hierarchical filtering -->
-		<CellFilterControl store={cellStore} position="top-left" title="Cell Filter" initiallyCollapsed={true} />
+		<!-- Site selection control - build list and analyze sites -->
+		<SiteSelectionControl 
+			store={siteStore} 
+			position="top-left" 
+			title="Site Selection"
+			icon={controlIcons.siteSelection}
+			iconOnlyWhenCollapsed={useIconHeaders}
+			onAction={handleAnalyzeSites}
+			actionButtonLabel="Open Cluster KPIs"
+		/>
+
+		<!-- Cell style control - visual settings for cells -->
+		<CellStyleControl
+			store={cellStore}
+			position="top-right"
+			title="Cell Settings"
+			initiallyCollapsed={true}
+			icon={controlIcons.cellStyle}
+			iconOnlyWhenCollapsed={useIconHeaders}
+		/>
 
 		<!-- Site size control - updates store visual properties -->
-		<SiteSizeSlider store={siteStore} position="bottom-right" title="Site Display" />
+		<SiteSizeSlider
+			store={siteStore}
+			position="top-right"
+			title="Site Settings"
+			icon={controlIcons.siteSize}
+			iconOnlyWhenCollapsed={useIconHeaders}
+		/>
+
 
-		<!-- Cell style control - visual settings for cells -->
-		<CellStyleControl store={cellStore} position="bottom-left" title="Cell Display" initiallyCollapsed={true} />
 	</MapboxProvider>
 </div>
 

package/dist/map-v2/features/cells/controls/CellFilterControl.svelte

@@ -27,6 +27,10 @@
 		position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
 		/** Control title */
 		title?: string;
+		/** Optional header icon */
+		icon?: string;
+		/** Show icon when collapsed (default: true) */
+		iconOnlyWhenCollapsed?: boolean;
 		/** Initially collapsed? */
 		initiallyCollapsed?: boolean;
 	}
@@ -35,7 +39,9 @@
 		store,
 		position = 'top-left',
 		title = 'Cell Filter',
-		initiallyCollapsed = false
+		icon = 'diagram-3',
+		iconOnlyWhenCollapsed = true,
+		initiallyCollapsed = true
 	}: Props = $props();
 	
 	// Grouping options (excluding 'none' from level1)
@@ -82,12 +88,15 @@
 		// Validate and clear stale localStorage
 		validateStoredConfig();
 		
-		const treeNodes = buildCellTree(
+		const { tree: treeNodes, cellGroupMap } = buildCellTree(
 			store.cellsFilteredByStatus, // Use filtered cells, not all cells
 			{ level1, level2 },
 			store.groupColorMap
 		);
 		
+		// Update the cell-to-group lookup map in the store
+		store.setCellGroupMap(cellGroupMap);
+		
 		// Create or recreate tree store
 		treeStore = createTreeStore({
 			nodes: [treeNodes],
@@ -165,7 +174,7 @@
 	};
 </script>
 
-<MapControl {position} {title} collapsible={true} {initiallyCollapsed}>
+<MapControl {position} {title} {icon} {iconOnlyWhenCollapsed} collapsible={true} {initiallyCollapsed}>
 	<div class="cell-filter-control">
 		<!-- Status Filter Checkbox -->
 		<div class="mb-3">
@@ -226,8 +235,8 @@
 			<div class="cell-filter-tree">
 				<TreeView store={$treeStore} showControls={false}>
 					{#snippet children({ node, state })}
-						<!-- Custom node rendering with color picker for leaf nodes -->
-						{#if node.metadata?.isLeafGroup}
+						<!-- Color picker for all leaf nodes (nodes with cells) -->
+						{#if node.metadata?.type === 'leafGroup'}
 							<input
 								type="color"
 								class="color-picker"

package/dist/map-v2/features/cells/controls/CellFilterControl.svelte.d.ts

@@ -6,6 +6,10 @@ interface Props {
     position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
     /** Control title */
     title?: string;
+    /** Optional header icon */
+    icon?: string;
+    /** Show icon when collapsed (default: true) */
+    iconOnlyWhenCollapsed?: boolean;
     /** Initially collapsed? */
     initiallyCollapsed?: boolean;
 }

package/dist/map-v2/features/cells/controls/CellStyleControl.svelte

@@ -19,6 +19,10 @@
 		position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
 		/** Control title */
 		title?: string;
+		/** Optional header icon */
+		icon?: string;
+		/** Show icon when collapsed (default: true) */
+		iconOnlyWhenCollapsed?: boolean;
 		/** Initially collapsed? */
 		initiallyCollapsed?: boolean;
 	}
@@ -27,11 +31,13 @@
 		store,
 		position = 'bottom-left',
 		title = 'Cell Display',
-		initiallyCollapsed = false
+		icon = 'palette',
+		iconOnlyWhenCollapsed = true,
+		initiallyCollapsed = true
 	}: Props = $props();
 </script>
 
-<MapControl {position} {title} collapsible={true} {initiallyCollapsed}>
+<MapControl {position} {title} {icon} {iconOnlyWhenCollapsed} collapsible={true} {initiallyCollapsed}>
 	<div class="cell-style-controls">
 		<!-- Show cells toggle -->
 		<div class="control-row">

package/dist/map-v2/features/cells/controls/CellStyleControl.svelte.d.ts

@@ -6,6 +6,10 @@ interface Props {
     position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
     /** Control title */
     title?: string;
+    /** Optional header icon */
+    icon?: string;
+    /** Show icon when collapsed (default: true) */
+    iconOnlyWhenCollapsed?: boolean;
     /** Initially collapsed? */
     initiallyCollapsed?: boolean;
 }

package/dist/map-v2/features/cells/layers/CellsLayer.svelte

@@ -162,7 +162,8 @@
 			visibleCells,
 			store.currentZoom,
 			store.baseRadius,
-			store.groupColorMap
+			store.groupColorMap,
+			store.cellGroupMap // Pass lookup map for O(1) color lookup
 		);
 		
 		console.log('CellsLayer: Generated GeoJSON:', {

package/dist/map-v2/features/cells/stores/cellStoreContext.svelte.d.ts

@@ -16,6 +16,7 @@ export interface CellStoreValue {
     statusStyles: Map<CellStatus, CellStatusStyle>;
     groupingConfig: CellTreeConfig;
     groupColorMap: Map<string, string>;
+    cellGroupMap: Map<string, string>;
     currentZoom: number;
 }
 export interface CellStoreContext {
@@ -30,6 +31,7 @@ export interface CellStoreContext {
     readonly currentZoom: number;
     readonly groupingConfig: CellTreeConfig;
     readonly groupColorMap: Map<string, string>;
+    readonly cellGroupMap: Map<string, string>;
     setFilteredCells(cells: Cell[]): void;
     setIncludePlannedCells(value: boolean): void;
     setShowCells(value: boolean): void;
@@ -38,6 +40,7 @@ export interface CellStoreContext {
     setBaseRadius(value: number): void;
     setCurrentZoom(value: number): void;
     setGroupingConfig(config: CellTreeConfig): void;
+    setCellGroupMap(map: Map<string, string>): void;
     getStatusStyle(status: CellStatus): CellStatusStyle;
     setStatusStyle(status: CellStatus, style: CellStatusStyle): void;
     getGroupColor(groupKey: string): string | undefined;

package/dist/map-v2/features/cells/stores/cellStoreContext.svelte.js

@@ -56,6 +56,7 @@ export function createCellStoreContext(cells) {
         statusStyles: new Map(Object.entries(DEFAULT_STATUS_STYLES)),
         groupingConfig: persistedSettings.groupingConfig ?? DEFAULT_CELL_TREE_CONFIG,
         groupColorMap: initialColorMap,
+        cellGroupMap: new Map(), // Will be populated when tree is built
         currentZoom: 12 // Default zoom
     });
     // Derived: Filter cells by status based on includePlannedCells flag
@@ -105,6 +106,7 @@ export function createCellStoreContext(cells) {
         set currentZoom(value) { state.currentZoom = value; },
         get groupingConfig() { return state.groupingConfig; },
         get groupColorMap() { return state.groupColorMap; },
+        get cellGroupMap() { return state.cellGroupMap; },
         // Methods
         setFilteredCells(cells) {
             state.filteredCells = cells;
@@ -130,6 +132,9 @@ export function createCellStoreContext(cells) {
         setGroupingConfig(config) {
             state.groupingConfig = config;
         },
+        setCellGroupMap(map) {
+            state.cellGroupMap = map;
+        },
         getStatusStyle(status) {
             return state.statusStyles.get(status) || DEFAULT_STATUS_STYLES['On_Air'];
         },

package/dist/map-v2/features/cells/utils/cellGeoJSON.d.ts

@@ -12,11 +12,7 @@ import type { Cell } from '../types';
  * @param currentZoom - Current map zoom level for radius calculation
  * @param baseRadius - Base radius in meters before multipliers
  * @param groupColorMap - Optional custom colors for cell groups
+ * @param cellGroupMap - Optional cell-to-group lookup map (cellId -> groupNodeId)
  * @returns GeoJSON FeatureCollection with arc polygons
  */
-export declare function cellsToGeoJSON(cells: Cell[], currentZoom: number, baseRadius?: number, groupColorMap?: Map<string, string>): FeatureCollection<Polygon>;
-/**
- * Helper function to generate group key from cell based on grouping config
- * This will be used when implementing dynamic grouping
- */
-export declare function getCellGroupKey(cell: Cell, level1Field: string, level2Field?: string): string;
+export declare function cellsToGeoJSON(cells: Cell[], currentZoom: number, baseRadius?: number, groupColorMap?: Map<string, string>, cellGroupMap?: Map<string, string>): FeatureCollection<Polygon>;

package/dist/map-v2/features/cells/utils/cellGeoJSON.js

@@ -14,18 +14,23 @@ import { createArcPolygon } from './arcGeometry';
  * @param currentZoom - Current map zoom level for radius calculation
  * @param baseRadius - Base radius in meters before multipliers
  * @param groupColorMap - Optional custom colors for cell groups
+ * @param cellGroupMap - Optional cell-to-group lookup map (cellId -> groupNodeId)
  * @returns GeoJSON FeatureCollection with arc polygons
  */
-export function cellsToGeoJSON(cells, currentZoom, baseRadius = 500, groupColorMap) {
+export function cellsToGeoJSON(cells, currentZoom, baseRadius = 500, groupColorMap, cellGroupMap) {
     const features = cells.map((cell) => {
         // Calculate tech-band key for styling
         const techBandKey = `${cell.tech}_${cell.frq}`;
         // Get default tech-band color
         const defaultColor = TECHNOLOGY_BAND_COLORS[techBandKey] || '#cccccc';
-        // Get custom group color if available
-        // Group key depends on grouping config, for now use tech-band
-        const groupKey = techBandKey;
-        const groupColor = groupColorMap?.get(groupKey);
+        // Get custom group color using lookup map
+        let groupColor;
+        if (groupColorMap && cellGroupMap) {
+            const groupKey = cellGroupMap.get(cell.id);
+            if (groupKey) {
+                groupColor = groupColorMap.get(groupKey);
+            }
+        }
         // Get status style
         const statusStyle = DEFAULT_STATUS_STYLES[cell.status] || DEFAULT_STATUS_STYLES['On_Air'];
         // Calculate final radius based on zoom and tech-band
@@ -41,6 +46,7 @@ export function cellsToGeoJSON(cells, currentZoom, baseRadius = 500, groupColorM
                 // Cell identification
                 id: cell.txId,
                 txId: cell.txId,
+                cellId: cell.txId,
                 cellID: cell.cellID,
                 cellName: cell.cellName,
                 siteId: cell.siteId,
@@ -72,11 +78,3 @@ export function cellsToGeoJSON(cells, currentZoom, baseRadius = 500, groupColorM
         features
     };
 }
-/**
- * Helper function to generate group key from cell based on grouping config
- * This will be used when implementing dynamic grouping
- */
-export function getCellGroupKey(cell, level1Field, level2Field) {
-    // For now, default to tech-band
-    return `${cell.tech}_${cell.frq}`;
-}

package/dist/map-v2/features/cells/utils/cellTree.d.ts

@@ -12,9 +12,12 @@ import type { TreeNode } from '../../../../core/TreeView/tree.model';
  * @param cells - Array of cells to build tree from
  * @param config - Grouping configuration (level1, level2)
  * @param colorMap - Optional map of leaf group IDs to custom colors
- * @returns Root tree node
+ * @returns Object with tree and cell-to-group lookup map
  */
-export declare function buildCellTree(cells: Cell[], config: CellTreeConfig, colorMap?: Map<string, string>): TreeNode;
+export declare function buildCellTree(cells: Cell[], config: CellTreeConfig, colorMap?: Map<string, string>): {
+    tree: TreeNode;
+    cellGroupMap: Map<string, string>;
+};
 /**
  * Get filtered cells based on checked tree paths
  *

package/dist/map-v2/features/cells/utils/cellTree.js

@@ -67,7 +67,7 @@ function generateNodeId(field, value, parentId) {
  * @param cells - Array of cells to build tree from
  * @param config - Grouping configuration (level1, level2)
  * @param colorMap - Optional map of leaf group IDs to custom colors
- * @returns Root tree node
+ * @returns Object with tree and cell-to-group lookup map
  */
 export function buildCellTree(cells, config, colorMap) {
     const { level1, level2 } = config;
@@ -84,6 +84,7 @@ export function buildCellTree(cells, config, colorMap) {
 function buildFlatTree(cells, level1, colorMap) {
     // Group cells by level1 field
     const groups = new Map();
+    const cellGroupMap = new Map();
     cells.forEach((cell) => {
         const value = getGroupingValue(cell, level1);
         if (!groups.has(value)) {
@@ -93,12 +94,15 @@ function buildFlatTree(cells, level1, colorMap) {
     });
     // Sort groups alphabetically
     const sortedGroups = Array.from(groups.entries()).sort(([a], [b]) => a.localeCompare(b));
-    // Build tree nodes
+    // Build tree nodes and populate cellGroupMap
     const children = sortedGroups.map(([value, groupCells]) => {
         const nodeId = generateNodeId(level1, value);
         const color = colorMap?.get(nodeId);
         const cellIds = groupCells.map((c) => c.id);
-        console.log(`  Flat tree node: id="${nodeId}", cells=${cellIds.length}, cellIds sample:`, cellIds.slice(0, 3));
+        // Map each cell to its group
+        groupCells.forEach(cell => {
+            cellGroupMap.set(cell.id, nodeId);
+        });
         return {
             id: nodeId,
             label: getGroupLabel(level1, value, groupCells.length),
@@ -113,7 +117,7 @@ function buildFlatTree(cells, level1, colorMap) {
             }
         };
     });
-    return {
+    const tree = {
         id: 'root',
         label: `Cells (${cells.length})`,
         defaultChecked: true,
@@ -122,6 +126,7 @@ function buildFlatTree(cells, level1, colorMap) {
             type: 'root'
         }
     };
+    return { tree, cellGroupMap };
 }
 /**
  * Build nested 3-level tree (Root → Level1 → Level2 groups)
@@ -129,6 +134,7 @@ function buildFlatTree(cells, level1, colorMap) {
 function buildNestedTree(cells, level1, level2, colorMap) {
     // Group cells by level1, then by level2
     const level1Groups = new Map();
+    const cellGroupMap = new Map();
     cells.forEach((cell) => {
         const value1 = getGroupingValue(cell, level1);
         const value2 = getGroupingValue(cell, level2);
@@ -143,7 +149,7 @@ function buildNestedTree(cells, level1, level2, colorMap) {
     });
     // Sort level1 groups
     const sortedLevel1 = Array.from(level1Groups.entries()).sort(([a], [b]) => a.localeCompare(b));
-    // Build tree nodes
+    // Build tree nodes and populate cellGroupMap
     const children = sortedLevel1.map(([value1, level2Groups]) => {
         const parentId = generateNodeId(level1, value1);
         // Sort level2 groups
@@ -152,6 +158,10 @@ function buildNestedTree(cells, level1, level2, colorMap) {
             const nodeId = generateNodeId(level2, value2, parentId);
             const color = colorMap?.get(nodeId);
             const cellIds = groupCells.map((c) => c.id);
+            // Map each cell to its group
+            groupCells.forEach(cell => {
+                cellGroupMap.set(cell.id, nodeId);
+            });
             return {
                 id: nodeId,
                 label: getGroupLabel(level2, value2, groupCells.length),
@@ -182,7 +192,7 @@ function buildNestedTree(cells, level1, level2, colorMap) {
             }
         };
     });
-    return {
+    const tree = {
         id: 'root',
         label: `Cells (${cells.length})`,
         defaultChecked: true,
@@ -191,6 +201,7 @@ function buildNestedTree(cells, level1, level2, colorMap) {
             type: 'root'
         }
     };
+    return { tree, cellGroupMap };
 }
 /**
  * Get filtered cells based on checked tree paths