@smartnet360/svelte-components 0.0.97 → 0.0.99

package/dist/apps/site-check/SiteCheck.svelte

@@ -17,18 +17,19 @@
 		baseMetrics: string[];
         mode: Mode;
 		markers?: ChartMarker[];
-		cellStyling?: CellStylingConfig; // Optional cell styling config (defaults to defaultCellStyling)
-		initialGrouping?: TreeGroupingConfig; // Optional initial tree grouping (defaults to Site → Azimuth → Cell)
-		showGroupingSelector?: boolean; // Show/hide the grouping dropdown (default: true)
-		onSearch?: (searchTerm: string) => void; // Optional: Search callback (if provided, shows search box)
-		searchPlaceholder?: string;      // Optional: Search box placeholder text (default: "Search...")
-		plotlyLayout?: Record<string, any>; // Optional Plotly layout configuration
+	cellStyling?: CellStylingConfig; // Optional cell styling config (defaults to defaultCellStyling)
+	initialGrouping?: TreeGroupingConfig; // Optional initial tree grouping (defaults to Site → Azimuth → Cell)
+	showGroupingSelector?: boolean; // Show/hide the grouping dropdown (default: true)
+	useSectorLineStyles?: boolean; // Enable sector-based line style differentiation (default: false)
+	onSearch?: (searchTerm: string) => void; // Optional: Search callback (if provided, shows search box)
+	searchPlaceholder?: string;      // Optional: Search box placeholder text (default: "Search...")
+	plotlyLayout?: Record<string, any>; // Optional Plotly layout configuration
 	}
 
 	let { rawData, multiCellLayout, singleLteLayout, 
 		singleNrLayout, baseMetrics, mode = "scrollspy", markers = [], 
 		cellStyling = defaultCellStyling, initialGrouping = defaultTreeGrouping, 
-		showGroupingSelector = true, onSearch, searchPlaceholder = "Search...", plotlyLayout }: Props = $props();
+		showGroupingSelector = true, useSectorLineStyles = false, onSearch, searchPlaceholder = "Search...", plotlyLayout }: Props = $props();
 
 	// Search state
 	let searchTerm = $state('');
@@ -61,12 +62,19 @@
 	// Color dimension state (defaults to 'band' for semantic RF characteristics)
 	let colorDimension = $state<ColorDimension>('band');
 
+	// Single root select mode - only one Level 0 node at a time (radio behavior)
+	let singleRootSelect = $state(false);
+
+	// Single Level 1 select mode - only one Level 1 node per parent at a time (radio behavior)
+	let singleLevel1Select = $state(false);
+
 	// Available field options for grouping levels
 	const fieldOptions: { value: TreeGroupField; label: string }[] = [
 		{ value: 'site', label: 'Site' },
 		{ value: 'band', label: 'Band' },
 		{ value: 'azimuth', label: 'Azimuth' },
-		{ value: 'sector', label: 'Sector' }
+		{ value: 'sector', label: 'Sector' },
+		{ value: 'cellName', label: 'Cell Name' }
 	];
 
 	// Handlers for level changes
@@ -92,10 +100,10 @@
 		return fieldOptions.filter(opt => opt.value !== treeGrouping.level0);
 	});	let treeStore = $state<ReturnType<typeof createTreeStore> | null>(null);
 
-	// Rebuild tree whenever treeGrouping changes
+	// Rebuild tree whenever treeGrouping, singleRootSelect, or singleLevel1Select changes
 	$effect(() => {
 
-		log('� Rebuilding tree with grouping', { treeGrouping });
+		log('🔄 Rebuilding tree with grouping', { treeGrouping, singleRootSelect, singleLevel1Select });
 
 		// Clear any existing localStorage data to prevent stale state
 		const storageKey = 'site-check:treeState';
@@ -119,11 +127,15 @@
 			nodes: treeNodes,
 			namespace: 'site-check',
 			persistState: false,  // Don't persist when grouping changes dynamically
-			defaultExpandAll: false
+			defaultExpandAll: false,
+			singleRootSelect, // Pass single root select mode
+			singleLevel1Select // Pass single Level 1 select mode
 		});
 		log('✅ Tree Store Created', { 
 			namespace: 'site-check',
-			grouping: treeGrouping 
+			grouping: treeGrouping,
+			singleRootSelect,
+			singleLevel1Select
 		});
 	});
 
@@ -157,9 +169,9 @@
 
 	// Expand layout based on selected cells and chosen base layout
 	let chartLayout = $derived.by(() => {
-		// Pass cellStyling, treeGrouping, and colorDimension - helper will decide per-section whether to use styling,
-		// and generate appropriate labels based on grouping and colors based on colorDimension
-		const expanded = expandLayoutForCells(selectedBaseLayout, filteredData, treeGrouping, colorDimension, cellStyling);
+		// Pass cellStyling, treeGrouping, colorDimension, and useSectorLineStyles - helper will decide per-section whether to use styling,
+		// and generate appropriate labels based on grouping, colors based on colorDimension, and line styles based on useSectorLineStyles
+		const expanded = expandLayoutForCells(selectedBaseLayout, filteredData, treeGrouping, colorDimension, useSectorLineStyles, cellStyling);
 		log('📐 Chart Layout:', {
 			layoutName: selectedBaseLayout.layoutName,
 			layoutDefaultColors: selectedBaseLayout.useDefaultChartColors ?? false,
@@ -355,10 +367,62 @@
 						>
 							<option value="band">Band</option>
 							<option value="site">Site</option>
+							<option value="sector">Sector</option>
+							<option value="cellName">Cell Name</option>
 						</select>
 					</div>
 				</div>
 				
+				<!-- Single Root Select Toggle -->
+				<div class="form-check mt-2">
+					<input 
+						class="form-check-input" 
+						type="checkbox" 
+						id="singleRootSelectCheck"
+						checked={singleRootSelect}
+						onchange={(e) => {
+							singleRootSelect = e.currentTarget.checked;
+							log('🔘 Single root select mode:', singleRootSelect);
+							
+							// When enabling single root mode, uncheck all roots except the first one
+							if (singleRootSelect && treeStore) {
+								const store = $treeStore;
+								if (store) {
+									const checkedRoots = store.state.rootPaths.filter(path => 
+										store.state.checkedPaths.has(path)
+									);
+									if (checkedRoots.length > 1) {
+										log('🔘 Multiple roots selected, keeping only first one:', checkedRoots[0]);
+										// Uncheck all except the first
+										for (let i = 1; i < checkedRoots.length; i++) {
+											store.toggle(checkedRoots[i]);
+										}
+									}
+								}
+							}
+						}}
+					/>
+					<label class="form-check-label small" for="singleRootSelectCheck">
+						Single selection on level 0
+					</label>
+				</div>
+				
+				<!-- Single Level 1 Select Toggle -->
+				<div class="form-check mt-2">
+					<input 
+						class="form-check-input" 
+						type="checkbox" 
+						id="singleLevel1SelectCheck"
+						checked={singleLevel1Select}
+						onchange={(e) => {
+							singleLevel1Select = e.currentTarget.checked;
+							log('🔘 Single Level 1 select mode:', singleLevel1Select);
+						}}
+					/>
+					<label class="form-check-label small" for="singleLevel1SelectCheck">
+						Single selection on level 1 
+					</label>
+				</div>
 			</div>
 		{/if}
 	{/if}			<!-- Tree View -->

package/dist/apps/site-check/SiteCheck.svelte.d.ts

@@ -12,6 +12,7 @@ interface Props {
     cellStyling?: CellStylingConfig;
     initialGrouping?: TreeGroupingConfig;
     showGroupingSelector?: boolean;
+    useSectorLineStyles?: boolean;
     onSearch?: (searchTerm: string) => void;
     searchPlaceholder?: string;
     plotlyLayout?: Record<string, any>;

package/dist/apps/site-check/data-loader.d.ts

@@ -14,11 +14,11 @@ export interface CellTrafficRecord {
 /**
  * Tree grouping field types
  */
-export type TreeGroupField = 'site' | 'azimuth' | 'band' | 'sector';
+export type TreeGroupField = 'site' | 'azimuth' | 'band' | 'sector' | 'cellName';
 /**
  * Color dimension types - determines which field is used for chart coloring
  */
-export type ColorDimension = 'site' | 'band';
+export type ColorDimension = 'site' | 'azimuth' | 'band' | 'sector' | 'cellName';
 /**
  * Configuration for tree hierarchy grouping
  * Defines which fields appear at each level of the tree

package/dist/apps/site-check/helper.d.ts

@@ -13,7 +13,7 @@ import { type StackGroupMode } from './transforms.js';
  * @param stackGroupMode - Optional stackgroup strategy for stacked charts (default: 'none' = single stack)
  * @returns Expanded layout with cell-specific KPIs
  */
-export declare function expandLayoutForCells(baseLayout: Layout, data: CellTrafficRecord[], grouping: TreeGroupingConfig, colorDimension: ColorDimension, stylingConfig?: CellStylingConfig, stackGroupMode?: StackGroupMode): Layout;
+export declare function expandLayoutForCells(baseLayout: Layout, data: CellTrafficRecord[], grouping: TreeGroupingConfig, colorDimension: ColorDimension, useSectorLineStyles: boolean, stylingConfig?: CellStylingConfig, stackGroupMode?: StackGroupMode): Layout;
 /**
  * Extract base metric names from a layout configuration
  * Returns unique metric rawNames that need to be pivoted

package/dist/apps/site-check/helper.js

@@ -11,7 +11,7 @@ import { createStyledKPI, sortCellsByBandFrequency, assignStackGroups } from './
  * @param stackGroupMode - Optional stackgroup strategy for stacked charts (default: 'none' = single stack)
  * @returns Expanded layout with cell-specific KPIs
  */
-export function expandLayoutForCells(baseLayout, data, grouping, colorDimension, stylingConfig, stackGroupMode = 'none') {
+export function expandLayoutForCells(baseLayout, data, grouping, colorDimension, useSectorLineStyles, stylingConfig, stackGroupMode = 'none') {
     // Get unique cells and their metadata, sorted by band frequency
     const cellMap = new Map();
     data.forEach((record) => {
@@ -39,8 +39,8 @@ export function expandLayoutForCells(baseLayout, data, grouping, colorDimension,
                 ...section,
                 charts: section.charts.map((chart) => ({
                     ...chart,
-                    yLeft: expandKPIs(chart.yLeft, cells, grouping, colorDimension, effectiveStyling, stackGroupMode),
-                    yRight: expandKPIs(chart.yRight, cells, grouping, colorDimension, effectiveStyling, stackGroupMode)
+                    yLeft: expandKPIs(chart.yLeft, cells, grouping, colorDimension, useSectorLineStyles, effectiveStyling, stackGroupMode),
+                    yRight: expandKPIs(chart.yRight, cells, grouping, colorDimension, useSectorLineStyles, effectiveStyling, stackGroupMode)
                 }))
             };
         })
@@ -60,13 +60,13 @@ export function expandLayoutForCells(baseLayout, data, grouping, colorDimension,
  * @param stackGroupMode - Stackgroup strategy for this set of KPIs
  * @returns Expanded array of KPIs (styled or default, with stackgroups assigned)
  */
-function expandKPIs(baseKPIs, cells, grouping, colorDimension, stylingConfig, stackGroupMode = 'none') {
+function expandKPIs(baseKPIs, cells, grouping, colorDimension, useSectorLineStyles, stylingConfig, stackGroupMode = 'none') {
     let expandedKPIs = [];
     baseKPIs.forEach((baseKPI) => {
         cells.forEach(([cellName, record]) => {
             if (stylingConfig) {
                 // Apply custom styling (band colors, sector line styles)
-                const styledKPI = createStyledKPI(baseKPI.rawName, record, baseKPI.unit, grouping, colorDimension, stylingConfig);
+                const styledKPI = createStyledKPI(baseKPI.rawName, record, baseKPI.unit, grouping, colorDimension, useSectorLineStyles, stylingConfig);
                 expandedKPIs.push({
                     ...styledKPI,
                     stackGroup: undefined // Initialize for treeshake-safe property assignment

package/dist/apps/site-check/transforms.d.ts

@@ -84,4 +84,4 @@ export declare function transformChartData(data: CellTrafficRecord[], baseMetric
  * @param stylingConfig - Optional styling configuration
  * @returns KPI with cell-specific styling applied
  */
-export declare function createStyledKPI(metricName: string, cellRecord: CellTrafficRecord, unit: string, grouping: TreeGroupingConfig, colorDimension: ColorDimension, stylingConfig?: CellStylingConfig): KPI;
+export declare function createStyledKPI(metricName: string, cellRecord: CellTrafficRecord, unit: string, grouping: TreeGroupingConfig, colorDimension: ColorDimension, useSectorLineStyles: boolean, stylingConfig?: CellStylingConfig): KPI;

package/dist/apps/site-check/transforms.js

@@ -483,7 +483,7 @@ function generateSiteColor(siteName) {
  * @param stylingConfig - Optional styling configuration
  * @returns KPI with cell-specific styling applied
  */
-export function createStyledKPI(metricName, cellRecord, unit, grouping, colorDimension, stylingConfig) {
+export function createStyledKPI(metricName, cellRecord, unit, grouping, colorDimension, useSectorLineStyles, stylingConfig) {
     const { band, sector, azimuth, cellName, siteName } = cellRecord;
     // Determine color based on colorDimension
     let color;
@@ -495,8 +495,8 @@ export function createStyledKPI(metricName, cellRecord, unit, grouping, colorDim
         // Generate consistent color for site
         color = generateSiteColor(siteName);
     }
-    // Get line style from sector (if config provided)
-    const lineStyle = stylingConfig?.sectorLineStyles?.[sector.toString()];
+    // Get line style from sector only if explicitly enabled
+    const lineStyle = useSectorLineStyles ? stylingConfig?.sectorLineStyles?.[sector.toString()] : undefined;
     // Generate label based on tree grouping configuration
     const displayName = generateAdaptiveLabel(cellRecord, grouping);
     // Build KPI with cell-specific styling

package/dist/core/TreeView/tree.model.d.ts

@@ -74,6 +74,10 @@ export interface TreeConfig<T = any> {
     persistState?: boolean;
     /** Show indeterminate checkbox states */
     showIndeterminate?: boolean;
+    /** Single root selection mode - only one root node can be checked at a time (radio behavior) */
+    singleRootSelect?: boolean;
+    /** Single Level 1 selection mode - only one Level 1 node per parent can be checked at a time (radio behavior) */
+    singleLevel1Select?: boolean;
 }
 /**
  * Store value exposed to consumers

package/dist/core/TreeView/tree.store.js

@@ -87,6 +87,39 @@ export function createTreeStore(config) {
             const newChecked = !state.checkedPaths.has(path);
             const newCheckedPaths = new Set(state.checkedPaths);
             log('📌 Toggle action', { path, newChecked });
+            // STEP 0: If singleRootSelect mode and this is a root node being checked, uncheck all other roots
+            if (config.singleRootSelect && newChecked && nodeState.level === 0) {
+                log('🔘 Single root select mode: unchecking other roots', { path });
+                // Uncheck all root nodes and their descendants
+                state.rootPaths.forEach(rootPath => {
+                    if (rootPath !== path) {
+                        newCheckedPaths.delete(rootPath);
+                        // Also uncheck all descendants of this root
+                        const rootDescendants = getDescendantPaths(rootPath, state.nodes, separator);
+                        rootDescendants.forEach(descendantPath => {
+                            newCheckedPaths.delete(descendantPath);
+                        });
+                    }
+                });
+            }
+            // STEP 0.5: If singleLevel1Select mode and this is a Level 1 node being checked, uncheck sibling Level 1 nodes
+            if (config.singleLevel1Select && newChecked && nodeState.level === 1) {
+                log('🔘 Single Level 1 select mode: unchecking sibling Level 1 nodes', { path });
+                const parentPath = nodeState.parentPath;
+                // Find and uncheck all Level 1 siblings (same parent, same level, different path)
+                state.nodes.forEach((node, nodePath) => {
+                    if (node.level === 1 &&
+                        node.parentPath === parentPath &&
+                        nodePath !== path) {
+                        newCheckedPaths.delete(nodePath);
+                        // Also uncheck all descendants of this sibling
+                        const siblingDescendants = getDescendantPaths(nodePath, state.nodes, separator);
+                        siblingDescendants.forEach(descendantPath => {
+                            newCheckedPaths.delete(descendantPath);
+                        });
+                    }
+                });
+            }
             // STEP 1: Update this node
             if (newChecked) {
                 newCheckedPaths.add(path);

package/dist/map-v2/demo/demo-cells.d.ts

@@ -8,6 +8,7 @@
  */
 import type { Cell } from '../features/cells/types';
 /**
- * Generate demo cells: 100 sites × 3 sectors × 12 tech-bands = 3,600 cells
+ * Generate demo cells with varied density patterns in circular distribution
+ * Creates density zones radiating from center with random placement
  */
 export declare const demoCells: Cell[];

package/dist/map-v2/demo/demo-cells.js

@@ -6,14 +6,68 @@
  * Each sector has 12 cells (all tech-band combinations)
  * Total: 100 sites × 3 sectors × 12 tech-bands = 3,600 cells
  */
-// Base location: San Francisco
-const BASE_LAT = 37.7749;
-const BASE_LNG = -122.4194;
-// Grid parameters for distributing sites
-const NUM_SITES = 1700;
-const GRID_SIZE = 10; // 10×10 grid
-const LAT_SPACING = 0.01; // ~1.1 km spacing
-const LNG_SPACING = 0.015; // ~1.1 km spacing (adjusted for longitude)
+const BASE_LAT = 47.4979;
+const BASE_LNG = 19.0402;
+// Generate sites in a circular pattern with varying density
+const NUM_SITES = 2000;
+const RADIUS_KM = 15; // 15km radius circle
+const RADIUS_DEGREES = RADIUS_KM / 111; // Approximate conversion
+// Density zones (distance from center)
+const DENSITY_ZONES = [
+    { maxRadius: 0.3, minSpacing: 0.0008, maxSpacing: 0.0015, name: 'Very Dense Core' }, // 0-3km: 80-150m spacing
+    { maxRadius: 0.5, minSpacing: 0.0015, maxSpacing: 0.003, name: 'Dense Inner' }, // 3-5km: 150-300m spacing
+    { maxRadius: 0.7, minSpacing: 0.003, maxSpacing: 0.006, name: 'Medium' }, // 5-7km: 300-600m spacing
+    { maxRadius: 0.85, minSpacing: 0.006, maxSpacing: 0.012, name: 'Sparse Suburban' }, // 7-12km: 600m-1.2km spacing
+    { maxRadius: 1.0, minSpacing: 0.012, maxSpacing: 0.025, name: 'Very Sparse Rural' } // 12-15km: 1.2-2.5km spacing
+];
+/**
+ * Get density zone for a given normalized radius
+ */
+function getDensityZone(normalizedRadius) {
+    for (const zone of DENSITY_ZONES) {
+        if (normalizedRadius <= zone.maxRadius) {
+            return zone;
+        }
+    }
+    return DENSITY_ZONES[DENSITY_ZONES.length - 1];
+}
+/**
+ * Generate random point within circle using polar coordinates
+ */
+function generateRandomPointInCircle() {
+    // Use square root for uniform distribution in circle
+    const r = Math.sqrt(Math.random()) * RADIUS_DEGREES;
+    const theta = Math.random() * 2 * Math.PI;
+    const lat = BASE_LAT + r * Math.cos(theta);
+    const lng = BASE_LNG + r * Math.sin(theta);
+    const normalizedRadius = r / RADIUS_DEGREES;
+    return { lat, lng, normalizedRadius };
+}
+// Cluster configuration for varied density
+// (kept for backward compatibility but not used with circular generation)
+const CLUSTERS = [
+    // Dense urban cluster (top-left) - very tight spacing
+    { startRow: 0, endRow: 3, startCol: 0, endCol: 3, spacing: 0.3 },
+    // Medium density cluster (center) - normal spacing
+    { startRow: 3, endRow: 7, startCol: 3, endCol: 7, spacing: 1.0 },
+    // Sparse rural cluster (bottom-right) - wide spacing
+    { startRow: 7, endRow: 10, startCol: 7, endCol: 10, spacing: 2.5 },
+    // Random outliers scattered around
+    { startRow: 0, endRow: 10, startCol: 0, endCol: 10, spacing: 1.5 }
+];
+/**
+ * Add random jitter to coordinates for natural variation
+ */
+function addJitter(value, maxJitter) {
+    return value + (Math.random() - 0.5) * 2 * maxJitter;
+}
+/**
+ * Determine if site should be skipped (for creating gaps)
+ */
+function shouldSkipSite(row, col) {
+    // Skip some sites randomly to create density variation (20% skip rate)
+    return Math.random() < 0.2;
+}
 // Standard beamwidth for sectors
 const BEAMWIDTH = 65;
 // Cell tech-band definitions with proper fband format
@@ -51,20 +105,51 @@ const STATUSES = [
     'On_Air'
 ];
 /**
- * Generate demo cells: 100 sites × 3 sectors × 12 tech-bands = 3,600 cells
+ * Generate demo cells with varied density patterns in circular distribution
+ * Creates density zones radiating from center with random placement
  */
 export const demoCells = [];
 let cellCounter = 1;
-// Generate sites in a grid pattern
-for (let siteIndex = 0; siteIndex < NUM_SITES; siteIndex++) {
-    const row = Math.floor(siteIndex / GRID_SIZE);
-    const col = siteIndex % GRID_SIZE;
-    // Calculate site position (centered grid around base location)
-    const siteLat = BASE_LAT + (row - GRID_SIZE / 2) * LAT_SPACING;
-    const siteLng = BASE_LNG + (col - GRID_SIZE / 2) * LNG_SPACING;
-    const siteId = `DEMO-SITE-${String(siteIndex + 1).padStart(3, '0')}`;
-    // Generate 3 sectors per site
-    AZIMUTHS.forEach((azimuth, sectorIndex) => {
+let actualSiteIndex = 0;
+// Track used positions to maintain minimum spacing
+const usedPositions = [];
+/**
+ * Check if position is too close to existing sites
+ */
+function isTooClose(lat, lng, minSpacing) {
+    for (const pos of usedPositions) {
+        const distance = Math.sqrt(Math.pow(lat - pos.lat, 2) + Math.pow(lng - pos.lng, 2));
+        const requiredSpacing = (minSpacing + pos.minSpacing) / 2;
+        if (distance < requiredSpacing) {
+            return true;
+        }
+    }
+    return false;
+}
+// Generate sites in a circular pattern with density-based placement
+for (let attempt = 0; attempt < NUM_SITES * 3 && actualSiteIndex < NUM_SITES; attempt++) {
+    // Generate random point in circle
+    const { lat, lng, normalizedRadius } = generateRandomPointInCircle();
+    // Get density zone for this radius
+    const zone = getDensityZone(normalizedRadius);
+    // Random spacing within zone range
+    const minSpacing = zone.minSpacing + Math.random() * (zone.maxSpacing - zone.minSpacing);
+    // Check if too close to existing sites
+    if (isTooClose(lat, lng, minSpacing)) {
+        continue; // Try another position
+    }
+    // Add random jitter for natural variation
+    const jitterAmount = minSpacing * 0.3; // 30% of spacing
+    const siteLat = addJitter(lat, jitterAmount);
+    const siteLng = addJitter(lng, jitterAmount);
+    // Record position
+    usedPositions.push({ lat: siteLat, lng: siteLng, minSpacing });
+    const siteId = `DEMO-SITE-${String(actualSiteIndex + 1).padStart(4, '0')}`;
+    actualSiteIndex++;
+    // Generate 3 sectors per site (with some random 1 or 2 sector sites)
+    const numSectors = Math.random() < 0.1 ? (Math.random() < 0.5 ? 1 : 2) : 3; // 10% chance of 1-2 sectors
+    const sectorsToGenerate = AZIMUTHS.slice(0, numSectors);
+    sectorsToGenerate.forEach((azimuth, sectorIndex) => {
         // Generate 12 tech-bands per sector
         TECH_BANDS.forEach((techBand, techIndex) => {
             const cellId = `CELL-${String(cellCounter).padStart(4, '0')}`;
@@ -118,10 +203,11 @@ for (let siteIndex = 0; siteIndex < NUM_SITES; siteIndex++) {
                 // Other
                 other: {
                     demoCell: true,
-                    siteNumber: siteIndex + 1,
+                    siteNumber: actualSiteIndex,
                     sector: sectorIndex + 1,
                     techBandKey: `${techBand.tech}_${techBand.band}`,
-                    gridPosition: { row, col }
+                    radius: normalizedRadius,
+                    densityZone: zone.name
                 },
                 customSubgroup: `Sector-${sectorIndex + 1}`
             });

package/dist/map-v2/shared/controls/FeatureSelectionControl.svelte

@@ -48,8 +48,8 @@
 		onAction,
 		actionButtonLabel = 'Process Cluster',
 		featureIcon = 'geo-alt-fill',
-		idPropertyOptions = ['siteId','sectorId', 'cellName','id'],
-		defaultIdProperty = 'siteId'
+		idPropertyOptions = ['none','siteId','sectorId', 'cellName','id'],
+		defaultIdProperty = 'none'
 	}: Props = $props();
 	
 	// Get map from context
@@ -114,33 +114,73 @@
 		const map = get(mapStore);
 		if (!map) return;
 		
-		// Remove markers that are no longer in the selection
-		const currentIds = new Set(features.map(f => f.id));
-		for (const [id, marker] of markers.entries()) {
-			if (!currentIds.has(id)) {
+		// Group features by coordinates
+		const featuresByLocation = new Map<string, SelectedFeature[]>();
+		
+		for (const feature of features) {
+			const lat = feature.properties?.latitude || feature.properties?.lat;
+			const lon = feature.properties?.longitude || feature.properties?.lon || feature.properties?.lng;
+			
+			if (lat && lon) {
+				const key = `${lon.toFixed(6)},${lat.toFixed(6)}`; // Round to avoid floating point issues
+				if (!featuresByLocation.has(key)) {
+					featuresByLocation.set(key, []);
+				}
+				featuresByLocation.get(key)!.push(feature);
+			} else {
+				console.warn('[FeatureSelectionControl] No coordinates found for feature', feature.id);
+			}
+		}
+		
+		// Track which location keys are currently active
+		const activeLocationKeys = new Set(featuresByLocation.keys());
+		
+		// Remove markers that are no longer needed
+		for (const [key, marker] of markers.entries()) {
+			if (!activeLocationKeys.has(key)) {
 				marker.remove();
-				markers.delete(id);
-				console.log('[FeatureSelectionControl] Removed marker for', id);
+				markers.delete(key);
+				console.log('[FeatureSelectionControl] Removed marker at', key);
 			}
 		}
 		
-		// Add markers for new selections
-		for (const feature of features) {
-			if (!markers.has(feature.id)) {
-				// Try to extract coordinates from properties
-				const lat = feature.properties?.latitude || feature.properties?.lat;
-				const lon = feature.properties?.longitude || feature.properties?.lon || feature.properties?.lng;
-				
-				if (lat && lon) {
-					const marker = new mapboxgl.Marker({ color: '#FF6B35' })
-						.setLngLat([lon, lat])
-						.addTo(map);
-					
-					markers.set(feature.id, marker);
-					console.log('[FeatureSelectionControl] Added marker for', feature.id, 'at', [lon, lat]);
-				} else {
-					console.warn('[FeatureSelectionControl] No coordinates found for feature', feature.id);
+		// Create or update markers for each unique location
+		for (const [locationKey, featuresAtLocation] of featuresByLocation) {
+			const [lon, lat] = locationKey.split(',').map(Number);
+			
+			// Build multi-line label HTML
+			const labelHTML = featuresAtLocation
+				.map(f => `<div style="padding: 2px 0;">${f.id}</div>`)
+				.join('');
+			
+			// Check if marker already exists at this location
+			if (markers.has(locationKey)) {
+				// Update existing marker's popup
+				const marker = markers.get(locationKey)!;
+				const popup = marker.getPopup();
+				if (popup) {
+					popup.setHTML(`<div class="marker-label" style="font-size: 12px; line-height: 1.4;">${labelHTML}</div>`);
 				}
+			} else {
+				// Create new marker with popup
+				const popup = new mapboxgl.Popup({
+					closeButton: false,
+					closeOnClick: false,
+					offset: 45,
+					className: 'selection-marker-popup',
+					anchor: 'bottom'
+				}).setHTML(`<div class="marker-label" style="font-size: 12px; line-height: 1.4;">${labelHTML}</div>`);
+				
+				const marker = new mapboxgl.Marker({ color: '#FF6B35' })
+					.setLngLat([lon, lat])
+					.setPopup(popup)
+					.addTo(map);
+				
+				// Show popup immediately
+				marker.togglePopup();
+				
+				markers.set(locationKey, marker);
+				console.log('[FeatureSelectionControl] Added marker at', locationKey, 'with', featuresAtLocation.length, 'items');
 			}
 		}
 	}
@@ -416,4 +456,17 @@
 		color: var(--bs-btn-disabled-color, var(--bs-btn-color, var(--bs-body-color)));
 		opacity: var(--bs-btn-disabled-opacity, 0.65);
 	}
+	
+	/* Style for marker popup labels */
+	:global(.selection-marker-popup .mapboxgl-popup-content) {
+		padding: 8px 12px;
+		background: rgba(255, 255, 255, 0.95);
+		border-radius: 4px;
+		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+	}
+	
+	:global(.selection-marker-popup .mapboxgl-popup-tip) {
+		border-top-color: rgba(255, 255, 255, 0.95);
+	}
 </style>

package/dist/map-v3/features/cells/components/CellSettingsPanel.svelte

@@ -84,47 +84,63 @@
 
 		<!-- Auto Size -->
 		<div class="row align-items-center g-2 mb-3">
-			<div class="col-4 text-secondary fw-semibold small text-uppercase">Auto Size</div>
-			<div class="col-3"></div>
-			<div class="col-5">
-				<div class="form-check form-switch m-0 d-flex align-items-center justify-content-end">
-					<input
-						id="cell-autosize-toggle"
-						type="checkbox"
-						class="form-check-input"
-						role="switch"
-						bind:checked={displayStore.useAutoSize}
-					/>
+			<div class="col-4 text-secondary fw-semibold small text-uppercase">Density Caps</div>
+			<div class="col-8">
+				<div class="d-flex gap-3">
+					<div class="form-check form-switch m-0">
+						<input
+							id="cell-mincap-toggle"
+							type="checkbox"
+							class="form-check-input"
+							role="switch"
+							bind:checked={displayStore.useMinCap}
+						/>
+						<label class="form-check-label small text-secondary" for="cell-mincap-toggle">
+							Min
+						</label>
+					</div>
+					<div class="form-check form-switch m-0">
+						<input
+							id="cell-maxcap-toggle"
+							type="checkbox"
+							class="form-check-input"
+							role="switch"
+							bind:checked={displayStore.useMaxCap}
+						/>
+						<label class="form-check-label small text-secondary" for="cell-maxcap-toggle">
+							Max
+						</label>
+					</div>
 				</div>
 			</div>
 		</div>
 
-		{#if displayStore.useAutoSize}
-			<!-- Auto Size Mode -->
+		{#if displayStore.useMinCap || displayStore.useMaxCap}
+			<!-- Cap Mode -->
 			<div class="row align-items-center g-2 mb-3 ps-3">
-				<div class="col-4 text-secondary small">Mode</div>
+				<div class="col-4 text-secondary small">Cap Mode</div>
 				<div class="col-8">
 					<select 
 						class="form-select form-select-sm" 
 						bind:value={displayStore.autoSizeMode}
 					>
-						<option value="logarithmic">Logarithmic (smooth)</option>
-						<option value="percentage">Proportional (40%)</option>
-						<option value="tiered">Tiered (4 levels)</option>
-						<option value="hybrid">Hybrid (stepped proportional)</option>
+						<option value="logarithmic">Logarithmic</option>
+						<option value="percentage">Proportional</option>
+						<option value="tiered">Tiered</option>
+						<option value="hybrid">Hybrid</option>
 					</select>
 				</div>
 			</div>
 
-			<!-- Auto Size Base Multiplier -->
+			<!-- Cap Base -->
 			<div class="row align-items-center g-2 mb-3 ps-3">
-				<div class="col-4 text-secondary small">Base Size</div>
+				<div class="col-4 text-secondary small">Cap Base</div>
 				<div class="col-3 text-end">
 					<span class="badge bg-white text-muted border">{displayStore.autoSizeBase.toFixed(1)}x</span>
 				</div>
 				<div class="col-5">
 					<input
-						id="cell-autosize-base-slider"
+						id="cell-cap-base-slider"
 						type="range"
 						class="form-range w-100"
 						min="0.5"
@@ -134,78 +150,6 @@
 					/>
 				</div>
 			</div>
-		{:else}
-			<!-- Density-Based Caps (Manual Mode Only) -->
-			<div class="ps-3 border-start border-2 mb-3">
-				<!-- Min Cap -->
-				<div class="row align-items-center g-2 mb-2">
-					<div class="col-7 text-secondary small">Min Size Cap (Density)</div>
-					<div class="col-5">
-						<div class="form-check form-switch m-0 d-flex align-items-center justify-content-end">
-							<input
-								id="cell-mincap-toggle"
-								type="checkbox"
-								class="form-check-input"
-								role="switch"
-								bind:checked={displayStore.useMinCap}
-							/>
-						</div>
-					</div>
-				</div>
-
-				<!-- Max Cap -->
-				<div class="row align-items-center g-2 mb-2">
-					<div class="col-7 text-secondary small">Max Size Cap (Density)</div>
-					<div class="col-5">
-						<div class="form-check form-switch m-0 d-flex align-items-center justify-content-end">
-							<input
-								id="cell-maxcap-toggle"
-								type="checkbox"
-								class="form-check-input"
-								role="switch"
-								bind:checked={displayStore.useMaxCap}
-							/>
-						</div>
-					</div>
-				</div>
-
-				{#if displayStore.useMinCap || displayStore.useMaxCap}
-					<!-- Cap Mode (shares auto-size settings) -->
-					<div class="row align-items-center g-2 mb-2 mt-2">
-						<div class="col-4 text-secondary small">Cap Mode</div>
-						<div class="col-8">
-							<select 
-								class="form-select form-select-sm" 
-								bind:value={displayStore.autoSizeMode}
-							>
-								<option value="logarithmic">Logarithmic</option>
-								<option value="percentage">Proportional</option>
-								<option value="tiered">Tiered</option>
-								<option value="hybrid">Hybrid</option>
-							</select>
-						</div>
-					</div>
-
-					<!-- Cap Base -->
-					<div class="row align-items-center g-2 mb-2">
-						<div class="col-4 text-secondary small">Cap Base</div>
-						<div class="col-3 text-end">
-							<span class="badge bg-white text-muted border">{displayStore.autoSizeBase.toFixed(1)}x</span>
-						</div>
-						<div class="col-5">
-							<input
-								id="cell-cap-base-slider"
-								type="range"
-								class="form-range w-100"
-								min="0.5"
-								max="3.0"
-								step="0.1"
-								bind:value={displayStore.autoSizeBase}
-							/>
-						</div>
-					</div>
-				{/if}
-			</div>
 		{/if}		<div class="border-top my-3"></div>
 
 		<!-- Show Labels -->

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

@@ -100,14 +100,10 @@
 		// Initial setup
 		addLayers();
 
-		// Events for updating - conditional based on auto-size
+		// Events for updating - always listen to zoom/move
 		map.on('style.load', addLayers);
-		
-		// Only listen to zoom/move events if NOT using auto-size
-		if (!displayStore.useAutoSize) {
-			map.on('moveend', updateLayer);
-			map.on('zoomend', updateLayer);
-		}
+		map.on('moveend', updateLayer);
+		map.on('zoomend', updateLayer);
 
 		// Cleanup
 		return () => {
@@ -131,7 +127,6 @@
 		const _l1 = displayStore.level1;
 		const _l2 = displayStore.level2;
 		const _layerGrouping = displayStore.layerGrouping;
-		const _useAutoSize = displayStore.useAutoSize;
 		const _autoSizeMode = displayStore.autoSizeMode;
 		const _autoSizeBase = displayStore.autoSizeBase;
 		const _useMinCap = displayStore.useMinCap;
@@ -151,101 +146,79 @@
 	}
 
 	function renderCells(map: mapboxgl.Map) {
+		const bounds = map.getBounds();
+		if (!bounds) return;
+
 		const zoom = map.getZoom();
 		const centerLat = map.getCenter().lat;
 		
 		console.log(`[CellsLayer] Rendering.. Zoom: ${zoom.toFixed(2)}, Cells: ${dataStore.filteredCells.length}`);
 
-		// 1. Calculate base radius (only used in manual mode)
+		// Calculate base radius from pixel size
 		const baseRadiusMeters = calculateRadiusInMeters(centerLat, zoom, displayStore.targetPixelSize);
-		
-		if (!displayStore.useAutoSize) {
-			console.log(`[CellsLayer] Base radius: ${baseRadiusMeters.toFixed(2)}m for target ${displayStore.targetPixelSize}px`);
-		}
+		console.log(`[CellsLayer] Base radius: ${baseRadiusMeters.toFixed(2)}m for target ${displayStore.targetPixelSize}px`);
 
-		// 2. Group cells (Level 1=Tech, Level 2=Band for now hardcoded)
-		// In real app, this comes from a store
+		// Group cells
 		const groups = groupCells(dataStore.filteredCells, displayStore.level1, displayStore.level2);
 		console.log(`[CellsLayer] Groups: ${groups.size}`);
 		
 		const features: GeoJSON.Feature[] = [];
 		let groupIndex = 0;
 
-		// 3. Iterate groups and generate features
+		// Iterate groups and generate features
 		for (const [groupId, cells] of groups) {
-			// Get style from registry
 			const defaultColor = getColorForGroup(groupIndex++);
 			const style = registry.getStyle(groupId, defaultColor);
 
 			if (!style.visible) continue;
 
 			for (const cell of cells) {
-				// 4. BBox Filter - SKIP if auto-size is enabled
-				if (!displayStore.useAutoSize) {
-					const bounds = map.getBounds();
-					if (!bounds || !bounds.contains([cell.longitude, cell.latitude])) {
-						continue;
-					}
+				// Viewport filter
+				if (!bounds.contains([cell.longitude, cell.latitude])) {
+					continue;
 				}
 				
-				// 5. Z-Index Lookup
+				// Z-Index Lookup
 				const zIndexKey = `${cell.tech}_${cell.frq}` as TechnologyBandKey;
 				const zIndex = displayStore.currentZIndex[zIndexKey] ?? 10;
 
-				// 6. Calculate radius with z-index scaling
+				// Calculate radius with z-index scaling
 				const MAX_Z = 35;
-				let radiusMeters: number;
+				const scaleFactor = 1 + Math.max(0, MAX_Z - zIndex) * 0.08;
+				let radiusMeters = baseRadiusMeters * scaleFactor;
 				
-				if (displayStore.useAutoSize) {
-					// Auto-size mode: get target radius for this site
+				// Apply density-based caps if enabled
+				if (displayStore.useMinCap || displayStore.useMaxCap) {
 					const siteDistance = dataStore.siteDistanceStore.getDistance(cell.siteId, 500);
 					const autoRadius = calculateAutoRadius(siteDistance, displayStore.autoSizeMode);
-					
-					// Apply base size multiplier
 					const baseAdjusted = autoRadius * displayStore.autoSizeBase;
+					const scaledAuto = baseAdjusted * scaleFactor;
 					
-					// Scale based on z-index for stacking visibility
-					// Lower z-index (background) = larger, higher z-index (foreground) = smaller
-					const scaleFactor = 1 + Math.max(0, MAX_Z - zIndex) * 0.08; // 8% per layer
-					radiusMeters = baseAdjusted * scaleFactor;
-				} else {
-					// Manual mode: base from pixel size, then scale by z-index
-					const scaleFactor = 1 + Math.max(0, MAX_Z - zIndex) * 0.08;
-					radiusMeters = baseRadiusMeters * scaleFactor;
+					// Apply caps: min = 60% of auto-size, max = 140% of auto-size
+					const minCap = scaledAuto * 0.6;
+					const maxCap = scaledAuto * 1.4;
 					
-					// Apply density-based caps if enabled
-					if (displayStore.useMinCap || displayStore.useMaxCap) {
-						const siteDistance = dataStore.siteDistanceStore.getDistance(cell.siteId, 500);
-						const autoRadius = calculateAutoRadius(siteDistance, displayStore.autoSizeMode);
-						const baseAdjusted = autoRadius * displayStore.autoSizeBase;
-						const scaledAuto = baseAdjusted * scaleFactor;
-						
-						// Apply caps: min = 60% of auto-size, max = 140% of auto-size
-						const minCap = scaledAuto * 0.6;
-						const maxCap = scaledAuto * 1.4;
-						
-						if (displayStore.useMinCap && radiusMeters < minCap) {
-							radiusMeters = minCap;
-						}
-						if (displayStore.useMaxCap && radiusMeters > maxCap) {
-							radiusMeters = maxCap;
-						}
+					if (displayStore.useMinCap && radiusMeters < minCap) {
+						radiusMeters = minCap;
+					}
+					if (displayStore.useMaxCap && radiusMeters > maxCap) {
+						radiusMeters = maxCap;
 					}
 				}
 
-				// 7. Apply beamwidth boost from displayStore preset
+				// Apply beamwidth boost
 				const beamwidthBoost = displayStore.currentBeamwidthBoost[zIndexKey] || 0;
 				const adjustedBeamwidth = cell.beamwidth + beamwidthBoost;
 
-				// 8. Generate Arc
+				// Generate Arc
 				const feature = generateCellArc(cell, radiusMeters, zIndex, style.color, adjustedBeamwidth);
 				features.push(feature);
 			}
 		}
 
-		console.log(`[CellsLayer] Generated ${features.length} features ${displayStore.useAutoSize ? '(all cells)' : 'in view'}`);
+		console.log(`[CellsLayer] Generated ${features.length} features in view`);
 
-		// 8. Update Source
+		// Update Source
 		const source = map.getSource(sourceId) as mapboxgl.GeoJSONSource;
 		if (source) {
 			source.setData({

package/dist/map-v3/features/cells/stores/cell.display.svelte.d.ts

@@ -7,7 +7,6 @@ export declare class CellDisplayStore {
     lineWidth: number;
     showLabels: boolean;
     layerGrouping: LayerGroupingPreset;
-    useAutoSize: boolean;
     autoSizeMode: AutoSizeMode;
     autoSizeBase: number;
     useMinCap: boolean;

package/dist/map-v3/features/cells/stores/cell.display.svelte.js

@@ -8,11 +8,10 @@ export class CellDisplayStore {
     lineWidth = $state(1);
     showLabels = $state(false);
     layerGrouping = $state('frequency');
-    // Auto-size settings
-    useAutoSize = $state(false);
+    // Auto-size settings (used by density caps)
     autoSizeMode = $state('logarithmic');
     autoSizeBase = $state(1.0);
-    // Density-based caps (for manual mode)
+    // Density-based caps
     useMinCap = $state(false);
     useMaxCap = $state(false);
     // Grouping
@@ -42,7 +41,6 @@ export class CellDisplayStore {
                     this.lineWidth = parsed.lineWidth ?? 1;
                     this.showLabels = parsed.showLabels ?? false;
                     this.layerGrouping = parsed.layerGrouping ?? 'frequency';
-                    this.useAutoSize = parsed.useAutoSize ?? false;
                     this.autoSizeMode = parsed.autoSizeMode ?? 'logarithmic';
                     this.autoSizeBase = parsed.autoSizeBase ?? 1.0;
                     this.useMinCap = parsed.useMinCap ?? false;
@@ -69,7 +67,6 @@ export class CellDisplayStore {
                     lineWidth: this.lineWidth,
                     showLabels: this.showLabels,
                     layerGrouping: this.layerGrouping,
-                    useAutoSize: this.useAutoSize,
                     autoSizeMode: this.autoSizeMode,
                     autoSizeBase: this.autoSizeBase,
                     useMinCap: this.useMinCap,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@smartnet360/svelte-components",
-	"version": "0.0.97",
+	"version": "0.0.99",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",