@smartnet360/svelte-components 0.0.94 → 0.0.96

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

@@ -30,9 +30,9 @@
 	let { accessToken }: Props = $props();
 
 	// Initialize stores
+	const cellData = createCellDataStore();
 	const cellRegistry = createCellRegistry('demo-map');
 	const cellDisplay = new CellDisplayStore();
-	const cellData = createCellDataStore(cellDisplay);
 
 	const siteData = createSiteDataStore(cellData);
 	const siteRegistry = createSiteRegistry('demo-map');

package/dist/map-v3/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-v3/demo/demo-cells.js

@@ -8,11 +8,66 @@
  */
 const BASE_LAT = 47.4979;
 const BASE_LNG = 19.0402;
-// 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)
+// 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
@@ -50,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')}`;
@@ -117,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-v3/features/cells/components/CellSettingsPanel.svelte

@@ -75,10 +75,9 @@
 					class="form-select form-select-sm" 
 					bind:value={displayStore.layerGrouping}
 				>
-					<option value="frequency">Classic (frequency-priority)</option>
+					<option value="frequency">Frequency Priority</option>
 					<option value="technology">Technology Priority</option>
 					<option value="balanced">Balanced</option>
-					<option value="ltePriority">LTE Priority</option>
 				</select>
 			</div>
 		</div>
@@ -112,87 +111,29 @@
 						<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>
 					</select>
 				</div>
 			</div>
-			
-			<!-- Neighbor Count -->
-			<div class="row align-items-center g-2 mb-3 ps-3">
-				<div class="col-4 text-secondary small">Neighbors</div>
-				<div class="col-3 text-end">
-					<span class="badge bg-white text-muted border">{displayStore.autoSizeNeighborCount}</span>
-				</div>
-				<div class="col-5">
-					<input
-						type="range"
-						class="form-range w-100"
-						min="1"
-						max="10"
-						step="1"
-						bind:value={displayStore.autoSizeNeighborCount}
-						title="Number of nearest neighbors to average for density calculation"
-					/>
-				</div>
-			</div>
-			
-			<!-- Size Multiplier -->
+
+			<!-- Auto Size Base Multiplier -->
 			<div class="row align-items-center g-2 mb-3 ps-3">
-				<div class="col-4 text-secondary small">Size Scale</div>
+				<div class="col-4 text-secondary small">Base Size</div>
 				<div class="col-3 text-end">
-					<span class="badge bg-white text-muted border">{displayStore.autoSizeMultiplier.toFixed(1)}x</span>
+					<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"
 						type="range"
 						class="form-range w-100"
 						min="0.3"
 						max="2.0"
 						step="0.1"
-						bind:value={displayStore.autoSizeMultiplier}
-						title="Scale all auto-sized cells up or down"
+						bind:value={displayStore.autoSizeBase}
 					/>
 				</div>
 			</div>
-			
-			<!-- Grid-Based Outlier Capping -->
-			<div class="row align-items-center g-2 mb-3 ps-3">
-				<div class="col-4 text-secondary small">Grid Capping</div>
-				<div class="col-8">
-					<div class="form-check form-switch">
-						<input
-							class="form-check-input"
-							type="checkbox"
-							id="gridCappingToggle"
-							bind:checked={displayStore.useGridCapping}
-							title="Remove outliers using grid-based percentile capping"
-						/>
-						<label class="form-check-label small" for="gridCappingToggle">
-							Remove outliers
-						</label>
-					</div>
-				</div>
-			</div>
-			
-			{#if displayStore.useGridCapping}
-				<!-- Grid Cap Percentile -->
-				<div class="row align-items-center g-2 mb-3 ps-3">
-					<div class="col-4 text-secondary small">Cap Percentile</div>
-					<div class="col-3 text-end">
-						<span class="badge bg-white text-muted border">{displayStore.gridCapPercentile}th</span>
-					</div>
-					<div class="col-5">
-						<input
-							type="range"
-							class="form-range w-100"
-							min="70"
-							max="95"
-							step="5"
-							bind:value={displayStore.gridCapPercentile}
-							title="Percentile threshold for capping outliers within each grid"
-						/>
-					</div>
-				</div>
-			{/if}
 		{/if}
 
 		<div class="border-top my-3"></div>

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

@@ -100,11 +100,10 @@
 		// Initial setup
 		addLayers();
 
-		// Events for updating
+		// Events for updating - conditional based on auto-size
 		map.on('style.load', addLayers);
 		
-		// Only listen to map events when NOT using auto-size
-		// Auto-size uses fixed meter-based sizes that don't change with zoom
+		// Only listen to zoom/move events if NOT using auto-size
 		if (!displayStore.useAutoSize) {
 			map.on('moveend', updateLayer);
 			map.on('zoomend', updateLayer);
@@ -134,11 +133,7 @@
 		const _layerGrouping = displayStore.layerGrouping;
 		const _useAutoSize = displayStore.useAutoSize;
 		const _autoSizeMode = displayStore.autoSizeMode;
-		const _autoSizeNeighborCount = displayStore.autoSizeNeighborCount;
-		const _autoSizeMultiplier = displayStore.autoSizeMultiplier;
-		const _useGridCapping = displayStore.useGridCapping;
-		const _gridCapPercentile = displayStore.gridCapPercentile;
-		const _gridSizeKm = displayStore.gridSizeKm;
+		const _autoSizeBase = displayStore.autoSizeBase;
 		
 		updateLayer();
 	});
@@ -154,22 +149,20 @@
 	}
 
 	function renderCells(map: mapboxgl.Map) {
-		const useAutoSize = displayStore.useAutoSize;
+		const zoom = map.getZoom();
+		const centerLat = map.getCenter().lat;
 		
-		// Only need bounds checking and zoom calculations for manual mode
-		const bounds = useAutoSize ? null : map.getBounds();
-		const zoom = useAutoSize ? 0 : map.getZoom();
-		const centerLat = useAutoSize ? 0 : map.getCenter().lat;
-		
-		console.log(`[CellsLayer] Rendering ${dataStore.filteredCells.length} cells (auto-size: ${useAutoSize})`);
+		console.log(`[CellsLayer] Rendering.. Zoom: ${zoom.toFixed(2)}, Cells: ${dataStore.filteredCells.length}`);
 
-		// 1. Calculate base radius (only for manual mode)
-		const baseRadiusMeters = useAutoSize ? 0 : calculateRadiusInMeters(centerLat, zoom, displayStore.targetPixelSize);
-		if (!useAutoSize) {
-			console.log(`[CellsLayer] Base radius: ${baseRadiusMeters.toFixed(2)}m for target ${displayStore.targetPixelSize}px at zoom ${zoom.toFixed(2)}`);
+		// 1. Calculate base radius (only used in manual mode)
+		const baseRadiusMeters = calculateRadiusInMeters(centerLat, zoom, displayStore.targetPixelSize);
+		
+		if (!displayStore.useAutoSize) {
+			console.log(`[CellsLayer] Base radius: ${baseRadiusMeters.toFixed(2)}m for target ${displayStore.targetPixelSize}px`);
 		}
 
-		// 2. Group cells
+		// 2. Group cells (Level 1=Tech, Level 2=Band for now hardcoded)
+		// In real app, this comes from a store
 		const groups = groupCells(dataStore.filteredCells, displayStore.level1, displayStore.level2);
 		console.log(`[CellsLayer] Groups: ${groups.size}`);
 		
@@ -185,50 +178,51 @@
 			if (!style.visible) continue;
 
 			for (const cell of cells) {
-				// 4. BBox Filter (skip for auto-size - Mapbox handles culling efficiently)
-				const inView = useAutoSize ? true : (bounds?.contains([cell.longitude, cell.latitude]) ?? false);
+				// 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;
+					}
+				}
 				
-				if (inView) {
-					// 5. Z-Index Lookup
-					const zIndexKey = `${cell.tech}_${cell.frq}` as TechnologyBandKey;
-					const zIndex = displayStore.currentZIndex[zIndexKey] ?? 10;
-
-					// 6. Calculate radius
-					// Auto-size: Fixed meter-based size from site density
-					// Manual: Pixel-based size that scales with zoom
-					const MAX_Z = 35;
-					let radiusMeters: number;
+				// 5. Z-Index Lookup
+				const zIndexKey = `${cell.tech}_${cell.frq}` as TechnologyBandKey;
+				const zIndex = displayStore.currentZIndex[zIndexKey] ?? 10;
+
+				// 6. Calculate radius with z-index scaling
+				const MAX_Z = 35;
+				let radiusMeters: number;
+				
+				if (displayStore.useAutoSize) {
+					// Auto-size mode: get target radius for this site
+					const siteDistance = dataStore.siteDistanceStore.getDistance(cell.siteId, 500);
+					const autoRadius = calculateAutoRadius(siteDistance, displayStore.autoSizeMode);
 					
-					if (displayStore.useAutoSize) {
-						// Auto-size mode: get target radius for this site
-						const siteDistance = dataStore.siteDistanceStore.getDistance(cell.siteId, 500);
-						const autoRadius = calculateAutoRadius(siteDistance, displayStore.autoSizeMode);
-						
-						// Apply user's multiplier to scale the result
-						const adjustedAutoRadius = autoRadius * displayStore.autoSizeMultiplier;
-						
-						// 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 = adjustedAutoRadius * 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 base size multiplier
+					const baseAdjusted = autoRadius * displayStore.autoSizeBase;
+					
+					// 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;
+				}
 
-					// 7. Apply beamwidth boost from displayStore preset
-					const beamwidthBoost = displayStore.currentBeamwidthBoost[zIndexKey] || 0;
-					const adjustedBeamwidth = cell.beamwidth + beamwidthBoost;
+				// 7. Apply beamwidth boost from displayStore preset
+				const beamwidthBoost = displayStore.currentBeamwidthBoost[zIndexKey] || 0;
+				const adjustedBeamwidth = cell.beamwidth + beamwidthBoost;
 
-					// 8. Generate Arc
-					const feature = generateCellArc(cell, radiusMeters, zIndex, style.color, adjustedBeamwidth);
-					features.push(feature);
-				}
+				// 8. Generate Arc
+				const feature = generateCellArc(cell, radiusMeters, zIndex, style.color, adjustedBeamwidth);
+				features.push(feature);
 			}
 		}
 
-		console.log(`[CellsLayer] Generated ${features.length} features in view`);
+		console.log(`[CellsLayer] Generated ${features.length} features ${displayStore.useAutoSize ? '(all cells)' : 'in view'}`);
 
 		// 8. Update Source
 		const source = map.getSource(sourceId) as mapboxgl.GeoJSONSource;

package/dist/map-v3/features/cells/logic/geometry.js

@@ -38,6 +38,29 @@ export function calculateAutoRadius(nearestSiteDistance, mode = 'logarithmic') {
                 return 120;
             return 180;
         }
+        case 'hybrid': {
+            // Stepped proportional - tiers with proportional scaling within each tier
+            if (nearestSiteDistance < 300) {
+                // Tier 1: 0-300m → 30-50m radius
+                const ratio = nearestSiteDistance / 300;
+                return 30 + (ratio * 20);
+            }
+            else if (nearestSiteDistance < 600) {
+                // Tier 2: 300-600m → 50-80m radius
+                const ratio = (nearestSiteDistance - 300) / 300;
+                return 50 + (ratio * 30);
+            }
+            else if (nearestSiteDistance < 1200) {
+                // Tier 3: 600-1200m → 80-120m radius
+                const ratio = (nearestSiteDistance - 600) / 600;
+                return 80 + (ratio * 40);
+            }
+            else {
+                // Tier 4: 1200m+ → 120-180m radius
+                const ratio = Math.min((nearestSiteDistance - 1200) / 1200, 1);
+                return 120 + (ratio * 60);
+            }
+        }
         default:
             return 80;
     }

package/dist/map-v3/features/cells/logic/site-distance.d.ts

@@ -26,11 +26,9 @@ export declare function groupBySite(cells: Cell[]): Map<string, Cell[]>;
 export declare function extractSiteLocations(cells: Cell[]): Map<string, [number, number]>;
 /**
  * Compute nearest neighbor distance for a single site
- * Can average multiple neighbors for better density estimation
  * @param siteId Site to compute distance for
  * @param siteLocation Location of the site
  * @param allSiteLocations Map of all site locations
- * @param neighborCount Number of closest neighbors to average (default: 5)
- * @returns Average distance to N nearest neighbors in meters, or Infinity if no neighbors
+ * @returns Distance to nearest neighbor in meters, or Infinity if no neighbors
  */
-export declare function computeNearestNeighbor(siteId: string, siteLocation: [number, number], allSiteLocations: Map<string, [number, number]>, neighborCount?: number): number;
+export declare function computeNearestNeighbor(siteId: string, siteLocation: [number, number], allSiteLocations: Map<string, [number, number]>): number;

package/dist/map-v3/features/cells/logic/site-distance.js

@@ -54,26 +54,18 @@ export function extractSiteLocations(cells) {
 }
 /**
  * Compute nearest neighbor distance for a single site
- * Can average multiple neighbors for better density estimation
  * @param siteId Site to compute distance for
  * @param siteLocation Location of the site
  * @param allSiteLocations Map of all site locations
- * @param neighborCount Number of closest neighbors to average (default: 5)
- * @returns Average distance to N nearest neighbors in meters, or Infinity if no neighbors
+ * @returns Distance to nearest neighbor in meters, or Infinity if no neighbors
  */
-export function computeNearestNeighbor(siteId, siteLocation, allSiteLocations, neighborCount = 5) {
-    const distances = [];
+export function computeNearestNeighbor(siteId, siteLocation, allSiteLocations) {
+    let minDist = Infinity;
     for (const [otherId, otherLoc] of allSiteLocations) {
         if (siteId === otherId)
             continue;
         const dist = haversineDistance(siteLocation, otherLoc);
-        distances.push(dist);
+        minDist = Math.min(minDist, dist);
     }
-    if (distances.length === 0)
-        return Infinity;
-    // Sort distances and take N closest
-    distances.sort((a, b) => a - b);
-    const closestN = distances.slice(0, Math.min(neighborCount, distances.length));
-    // Return average of closest neighbors
-    return closestN.reduce((sum, d) => sum + d, 0) / closestN.length;
+    return minDist;
 }

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

@@ -1,17 +1,11 @@
 import type { Cell } from '../types';
 import { SiteDistanceStore } from './site.distance.svelte';
-import type { CellDisplayStore } from './cell.display.svelte';
 export declare class CellDataStore {
     rawCells: Cell[];
     filterOnAir: boolean;
     siteDistanceStore: SiteDistanceStore;
-    displayStore?: CellDisplayStore;
-    constructor(displayStore?: CellDisplayStore);
+    constructor();
     setCells(cells: Cell[]): void;
     get filteredCells(): Cell[];
 }
-/**
- * Factory function to create a new CellDataStore
- * @param displayStore Optional display store for auto-size settings
- */
-export declare function createCellDataStore(displayStore?: CellDisplayStore): CellDataStore;
+export declare function createCellDataStore(): CellDataStore;

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

@@ -4,21 +4,13 @@ export class CellDataStore {
     filterOnAir = $state(false);
     // Internal site distance store for auto-sizing
     siteDistanceStore;
-    // Reference to display store for auto-size settings
-    displayStore;
-    constructor(displayStore) {
+    constructor() {
         this.siteDistanceStore = new SiteDistanceStore();
-        this.displayStore = displayStore;
     }
     setCells(cells) {
         this.rawCells = cells;
         // Automatically update site distances when cells are loaded
-        // Pass auto-size and grid capping settings from displayStore
-        const neighborCount = this.displayStore?.autoSizeNeighborCount ?? 5;
-        const useGridCapping = this.displayStore?.useGridCapping ?? true;
-        const gridCapPercentile = this.displayStore?.gridCapPercentile ?? 80;
-        const gridSizeKm = this.displayStore?.gridSizeKm ?? 1;
-        this.siteDistanceStore.updateDistances(cells, neighborCount, useGridCapping, gridCapPercentile, gridSizeKm);
+        this.siteDistanceStore.updateDistances(cells);
     }
     get filteredCells() {
         if (!this.filterOnAir)
@@ -26,10 +18,6 @@ export class CellDataStore {
         return this.rawCells.filter(c => c.status === 'On_Air');
     }
 }
-/**
- * Factory function to create a new CellDataStore
- * @param displayStore Optional display store for auto-size settings
- */
-export function createCellDataStore(displayStore) {
-    return new CellDataStore(displayStore);
+export function createCellDataStore() {
+    return new CellDataStore();
 }

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

@@ -9,11 +9,7 @@ export declare class CellDisplayStore {
     layerGrouping: LayerGroupingPreset;
     useAutoSize: boolean;
     autoSizeMode: AutoSizeMode;
-    autoSizeNeighborCount: number;
-    autoSizeMultiplier: number;
-    useGridCapping: boolean;
-    gridCapPercentile: number;
-    gridSizeKm: number;
+    autoSizeBase: number;
     level1: CellGroupingField;
     level2: CellGroupingField;
     currentZIndex: Record<string, number>;

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

@@ -11,12 +11,7 @@ export class CellDisplayStore {
     // Auto-size settings
     useAutoSize = $state(false);
     autoSizeMode = $state('logarithmic');
-    autoSizeNeighborCount = $state(5); // Number of neighbors to average for density
-    autoSizeMultiplier = $state(1.0); // Scale factor for auto-size results (0.3 - 2.0)
-    // Grid-based outlier capping
-    useGridCapping = $state(true); // Enable grid-based outlier removal
-    gridCapPercentile = $state(80); // Percentile for capping (70-95)
-    gridSizeKm = $state(1); // Grid size in kilometers
+    autoSizeBase = $state(1.0);
     // Grouping
     level1 = $state('tech');
     level2 = $state('fband');
@@ -46,11 +41,7 @@ export class CellDisplayStore {
                     this.layerGrouping = parsed.layerGrouping ?? 'frequency';
                     this.useAutoSize = parsed.useAutoSize ?? false;
                     this.autoSizeMode = parsed.autoSizeMode ?? 'logarithmic';
-                    this.autoSizeNeighborCount = parsed.autoSizeNeighborCount ?? 5;
-                    this.autoSizeMultiplier = parsed.autoSizeMultiplier ?? 1.0;
-                    this.useGridCapping = parsed.useGridCapping ?? true;
-                    this.gridCapPercentile = parsed.gridCapPercentile ?? 80;
-                    this.gridSizeKm = parsed.gridSizeKm ?? 1;
+                    this.autoSizeBase = parsed.autoSizeBase ?? 1.0;
                     this.level1 = parsed.level1 ?? 'tech';
                     this.level2 = parsed.level2 ?? 'fband';
                     this.labelPixelDistance = parsed.labelPixelDistance ?? 60;
@@ -75,11 +66,7 @@ export class CellDisplayStore {
                     layerGrouping: this.layerGrouping,
                     useAutoSize: this.useAutoSize,
                     autoSizeMode: this.autoSizeMode,
-                    autoSizeNeighborCount: this.autoSizeNeighborCount,
-                    autoSizeMultiplier: this.autoSizeMultiplier,
-                    useGridCapping: this.useGridCapping,
-                    gridCapPercentile: this.gridCapPercentile,
-                    gridSizeKm: this.gridSizeKm,
+                    autoSizeBase: this.autoSizeBase,
                     level1: this.level1,
                     level2: this.level2,
                     labelPixelDistance: this.labelPixelDistance,

package/dist/map-v3/features/cells/stores/site.distance.svelte.d.ts

@@ -8,28 +8,17 @@ import type { Cell } from '../types';
 export declare class SiteDistanceStore {
     key: string;
     distances: Map<string, number>;
-    cappedSizes: Map<string, number>;
     computedSites: Set<string>;
     lastComputeTime: number;
     computedCount: number;
     constructor();
     /**
-     * Incrementally update distances for new sites
-     * Only computes distances for sites not in cache
-     * @param cells Array of cells to compute distances for
-     * @param neighborCount Number of neighbors to average for density calculation
-     * @param useGridCapping Whether to apply grid-based outlier capping
-     * @param gridCapPercentile Percentile for grid capping (70-95)
-     * @param gridSizeKm Grid size in kilometers
+     * Update distances for all sites in current dataset
+     * Always recomputes to ensure accuracy
      */
-    updateDistances(cells: Cell[], neighborCount?: number, useGridCapping?: boolean, gridCapPercentile?: number, gridSizeKm?: number): void;
-    /**
-     * Update existing sites if needed (when no new sites but data might have changed)
-     */
-    private updateExistingSitesIfNeeded;
+    updateDistances(cells: Cell[]): void;
     /**
      * Get distance for a site, with fallback
-     * Returns capped size if grid capping was applied, otherwise original
      */
     getDistance(siteId: string, fallback?: number): number;
     /**

package/dist/map-v3/features/cells/stores/site.distance.svelte.js

@@ -6,13 +6,10 @@
  */
 import { browser } from '$app/environment';
 import { extractSiteLocations, computeNearestNeighbor, haversineDistance } from '../logic/site-distance';
-import { computeGridBasedSizeCaps, getGridCappingStats } from '../logic/grid-density';
 export class SiteDistanceStore {
     key = 'map-v3-site-distances';
-    // Cached nearest neighbor distances (original calculated sizes)
+    // Cached nearest neighbor distances
     distances = $state(new Map());
-    // Grid-capped sizes (after outlier removal)
-    cappedSizes = $state(new Map());
     // Track which sites have been computed
     computedSites = $state(new Set());
     // Performance tracking
@@ -24,91 +21,41 @@ export class SiteDistanceStore {
         }
     }
     /**
-     * Incrementally update distances for new sites
-     * Only computes distances for sites not in cache
-     * @param cells Array of cells to compute distances for
-     * @param neighborCount Number of neighbors to average for density calculation
-     * @param useGridCapping Whether to apply grid-based outlier capping
-     * @param gridCapPercentile Percentile for grid capping (70-95)
-     * @param gridSizeKm Grid size in kilometers
+     * Update distances for all sites in current dataset
+     * Always recomputes to ensure accuracy
      */
-    updateDistances(cells, neighborCount = 5, useGridCapping = true, gridCapPercentile = 80, gridSizeKm = 1) {
+    updateDistances(cells) {
         if (!cells || cells.length === 0)
             return;
         const startTime = performance.now();
         const siteLocations = extractSiteLocations(cells);
-        // Find NEW sites (not in cache)
-        const newSites = [...siteLocations.keys()].filter((id) => !this.computedSites.has(id));
-        if (newSites.length === 0) {
-            // No new sites, but check if we need to update existing sites
-            // (in case a new site is closer than previously computed)
-            this.updateExistingSitesIfNeeded(siteLocations);
-            return;
-        }
-        console.log(`[SiteDistance] Computing distances for ${newSites.length} new sites (${neighborCount} neighbors)`);
-        // Compute distances for NEW sites
-        for (const siteId of newSites) {
-            const location = siteLocations.get(siteId);
-            const nearestDist = computeNearestNeighbor(siteId, location, siteLocations, neighborCount);
+        // Clear existing data and recompute all sites
+        this.distances.clear();
+        this.computedSites.clear();
+        console.log(`[SiteDistance] Computing distances for ${siteLocations.size} sites`);
+        // Compute distances for ALL sites
+        for (const [siteId, location] of siteLocations) {
+            const nearestDist = computeNearestNeighbor(siteId, location, siteLocations);
             this.distances.set(siteId, nearestDist);
             this.computedSites.add(siteId);
         }
-        // Update EXISTING sites if a new site is closer
-        for (const [existingId, existingLoc] of siteLocations) {
-            if (newSites.includes(existingId))
-                continue; // Skip new sites
-            // Recalculate with new sites present
-            const updatedDist = computeNearestNeighbor(existingId, existingLoc, siteLocations, neighborCount);
-            this.distances.set(existingId, updatedDist);
-        }
-        // Apply grid-based capping if enabled
-        if (useGridCapping) {
-            this.cappedSizes = computeGridBasedSizeCaps(cells, this.distances, gridCapPercentile, gridSizeKm);
-            const stats = getGridCappingStats(this.distances, this.cappedSizes);
-            console.log(`[SiteDistance] Grid capping: ${stats.cappedSites}/${stats.totalSites} sites capped (${stats.cappedPercentage.toFixed(1)}%), avg reduction: ${stats.avgReduction.toFixed(1)}m`);
-        }
-        else {
-            // No capping - capped sizes = original sizes
-            this.cappedSizes = new Map(this.distances);
-        }
         const endTime = performance.now();
         this.lastComputeTime = endTime - startTime;
         this.computedCount = this.distances.size;
-        console.log(`[SiteDistance] Computed ${newSites.length} new sites in ${this.lastComputeTime.toFixed(1)}ms (total: ${this.computedCount})`);
+        console.log(`[SiteDistance] Computed ${this.computedCount} sites in ${this.lastComputeTime.toFixed(1)}ms`);
         this.persist();
     }
-    /**
-     * Update existing sites if needed (when no new sites but data might have changed)
-     */
-    updateExistingSitesIfNeeded(siteLocations) {
-        // Check if all computed sites still exist in current data
-        const currentSiteIds = new Set(siteLocations.keys());
-        let removed = 0;
-        for (const computedId of this.computedSites) {
-            if (!currentSiteIds.has(computedId)) {
-                this.distances.delete(computedId);
-                this.computedSites.delete(computedId);
-                removed++;
-            }
-        }
-        if (removed > 0) {
-            console.log(`[SiteDistance] Removed ${removed} stale sites from cache`);
-            this.persist();
-        }
-    }
     /**
      * Get distance for a site, with fallback
-     * Returns capped size if grid capping was applied, otherwise original
      */
     getDistance(siteId, fallback = 500) {
-        return this.cappedSizes.get(siteId) ?? this.distances.get(siteId) ?? fallback;
+        return this.distances.get(siteId) ?? fallback;
     }
     /**
      * Clear all cached distances (useful for testing or data refresh)
      */
     clear() {
         this.distances.clear();
-        this.cappedSizes.clear();
         this.computedSites.clear();
         this.lastComputeTime = 0;
         this.computedCount = 0;

package/dist/map-v3/features/cells/types.d.ts

@@ -63,7 +63,7 @@ export type CellGroupingField = 'tech' | 'fband' | 'frq' | 'status' | 'siteId' |
 /**
  * Auto-size calculation modes
  */
-export type AutoSizeMode = 'logarithmic' | 'percentage' | 'tiered';
+export type AutoSizeMode = 'logarithmic' | 'percentage' | 'tiered' | 'hybrid';
 /**
  * Site distance data for auto-sizing
  */

package/dist/map-v3/features/sites/components/SiteSettingsPanel.svelte

@@ -139,6 +139,7 @@
 								<option value="siteName">Name</option>
 								<option value="provider">Provider</option>
 								<option value="cellCount">Cell Count</option>
+								<option value="nearestSiteDistance">Nearest Site Distance</option>
 							</select>
 						</div>
 					</div>

package/dist/map-v3/features/sites/layers/SitesLayer.svelte

@@ -116,7 +116,8 @@
 				properties: {
 					siteId: site.siteId,
 					name: site.siteName,
-					color: color
+					color: color,
+					nearestSiteDistance: site.nearestSiteDistance
 				}
 			});
 		}

package/dist/map-v3/features/sites/stores/site.data.svelte.js

@@ -10,6 +10,8 @@ export class SiteDataStore {
             if (!cell.siteId)
                 continue;
             if (!siteMap.has(cell.siteId)) {
+                // Get distance to nearest site from cell data store
+                const nearestDistance = this.cellDataStore.siteDistanceStore.getDistance(cell.siteId, Infinity);
                 siteMap.set(cell.siteId, {
                     siteId: cell.siteId,
                     siteName: cell.cellName, // Fallback to cell name if site name not available
@@ -20,7 +22,8 @@ export class SiteDataStore {
                     provider: 'Cetin',
                     level1: 'Cetin', // Need to check where provider comes from in V3,
                     level2: 'Unknown',
-                    cellCount: 1
+                    cellCount: 1,
+                    nearestSiteDistance: nearestDistance !== Infinity ? Math.round(nearestDistance) : undefined
                 });
             }
             else {

package/dist/map-v3/features/sites/types.d.ts

@@ -9,4 +9,5 @@ export interface Site {
     level1: string;
     level2: string;
     cellCount: number;
+    nearestSiteDistance?: number;
 }

package/package.json

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

package/dist/map-v3/features/cells/logic/grid-density.d.ts

@@ -1,51 +0,0 @@
-/**
- * Grid-Based Density Calculation
- *
- * Divides map into fixed-size grids and computes density-based size caps
- * Used to remove outliers and create visual uniformity within local areas
- */
-import type { Cell } from '../types';
-/**
- * Convert geographic coordinates to grid key
- * @param lon Longitude
- * @param lat Latitude
- * @param gridSizeKm Size of grid cell in kilometers (default: 1km)
- * @returns Grid key string "x_y"
- */
-export declare function getGridKey(lon: number, lat: number, gridSizeKm?: number): string;
-/**
- * Group cells by grid
- * @param cells Array of cells
- * @param gridSizeKm Grid size in kilometers
- * @returns Map of gridKey -> cells in that grid
- */
-export declare function groupCellsByGrid(cells: Cell[], gridSizeKm?: number): Map<string, Cell[]>;
-/**
- * Calculate percentile value from array
- * @param values Sorted array of numbers
- * @param percentile Percentile to calculate (0-100, e.g., 80 for 80th percentile)
- * @returns Value at the given percentile
- */
-export declare function calculatePercentile(values: number[], percentile: number): number;
-/**
- * Compute grid-based size caps using percentile
- * @param cells Array of cells
- * @param sizeMap Map of siteId -> calculated size
- * @param percentile Percentile threshold (0-100, e.g., 80)
- * @param gridSizeKm Grid size in kilometers
- * @param minCellsForCapping Minimum cells in grid to apply capping (default: 3)
- * @returns Map of siteId -> capped size
- */
-export declare function computeGridBasedSizeCaps(cells: Cell[], sizeMap: Map<string, number>, percentile: number, gridSizeKm?: number, minCellsForCapping?: number): Map<string, number>;
-/**
- * Get statistics about grid-based capping
- * @param originalSizes Map of original sizes
- * @param cappedSizes Map of capped sizes
- * @returns Object with statistics
- */
-export declare function getGridCappingStats(originalSizes: Map<string, number>, cappedSizes: Map<string, number>): {
-    totalSites: number;
-    cappedSites: number;
-    cappedPercentage: number;
-    avgReduction: number;
-};

package/dist/map-v3/features/cells/logic/grid-density.js

@@ -1,138 +0,0 @@
-/**
- * Grid-Based Density Calculation
- *
- * Divides map into fixed-size grids and computes density-based size caps
- * Used to remove outliers and create visual uniformity within local areas
- */
-/**
- * Convert geographic coordinates to grid key
- * @param lon Longitude
- * @param lat Latitude
- * @param gridSizeKm Size of grid cell in kilometers (default: 1km)
- * @returns Grid key string "x_y"
- */
-export function getGridKey(lon, lat, gridSizeKm = 1) {
-    // Approximate: 1 degree ≈ 111km at equator
-    // This is rough but sufficient for grouping
-    const degreesPerGrid = gridSizeKm / 111;
-    const gridX = Math.floor(lon / degreesPerGrid);
-    const gridY = Math.floor(lat / degreesPerGrid);
-    return `${gridX}_${gridY}`;
-}
-/**
- * Group cells by grid
- * @param cells Array of cells
- * @param gridSizeKm Grid size in kilometers
- * @returns Map of gridKey -> cells in that grid
- */
-export function groupCellsByGrid(cells, gridSizeKm = 1) {
-    const grids = new Map();
-    for (const cell of cells) {
-        const gridKey = getGridKey(cell.longitude, cell.latitude, gridSizeKm);
-        if (!grids.has(gridKey)) {
-            grids.set(gridKey, []);
-        }
-        grids.get(gridKey).push(cell);
-    }
-    return grids;
-}
-/**
- * Calculate percentile value from array
- * @param values Sorted array of numbers
- * @param percentile Percentile to calculate (0-100, e.g., 80 for 80th percentile)
- * @returns Value at the given percentile
- */
-export function calculatePercentile(values, percentile) {
-    if (values.length === 0)
-        return Infinity;
-    if (values.length === 1)
-        return values[0];
-    const sorted = [...values].sort((a, b) => a - b);
-    const index = (percentile / 100) * (sorted.length - 1);
-    const lower = Math.floor(index);
-    const upper = Math.ceil(index);
-    const weight = index % 1;
-    if (lower === upper) {
-        return sorted[lower];
-    }
-    return sorted[lower] * (1 - weight) + sorted[upper] * weight;
-}
-/**
- * Compute grid-based size caps using percentile
- * @param cells Array of cells
- * @param sizeMap Map of siteId -> calculated size
- * @param percentile Percentile threshold (0-100, e.g., 80)
- * @param gridSizeKm Grid size in kilometers
- * @param minCellsForCapping Minimum cells in grid to apply capping (default: 3)
- * @returns Map of siteId -> capped size
- */
-export function computeGridBasedSizeCaps(cells, sizeMap, percentile, gridSizeKm = 1, minCellsForCapping = 3) {
-    // Group cells by grid
-    const grids = groupCellsByGrid(cells, gridSizeKm);
-    // Calculate percentile cap for each grid
-    const gridCaps = new Map();
-    for (const [gridKey, gridCells] of grids) {
-        // Get sizes for all sites in this grid
-        const siteSizes = new Map();
-        for (const cell of gridCells) {
-            const size = sizeMap.get(cell.siteId);
-            if (size !== undefined) {
-                siteSizes.set(cell.siteId, size);
-            }
-        }
-        const uniqueSizes = Array.from(siteSizes.values());
-        // Only apply capping if grid has enough cells
-        if (uniqueSizes.length >= minCellsForCapping) {
-            const cap = calculatePercentile(uniqueSizes, percentile);
-            gridCaps.set(gridKey, cap);
-        }
-        else {
-            // For small grids, use max size (no capping)
-            gridCaps.set(gridKey, Math.max(...uniqueSizes, 0));
-        }
-    }
-    // Apply caps to each site
-    const cappedSizes = new Map();
-    const sitesProcessed = new Set();
-    for (const cell of cells) {
-        // Only process each site once
-        if (sitesProcessed.has(cell.siteId))
-            continue;
-        sitesProcessed.add(cell.siteId);
-        const originalSize = sizeMap.get(cell.siteId);
-        if (originalSize === undefined)
-            continue;
-        const gridKey = getGridKey(cell.longitude, cell.latitude, gridSizeKm);
-        const cap = gridCaps.get(gridKey) ?? originalSize;
-        // Apply cap (take minimum)
-        cappedSizes.set(cell.siteId, Math.min(originalSize, cap));
-    }
-    return cappedSizes;
-}
-/**
- * Get statistics about grid-based capping
- * @param originalSizes Map of original sizes
- * @param cappedSizes Map of capped sizes
- * @returns Object with statistics
- */
-export function getGridCappingStats(originalSizes, cappedSizes) {
-    let totalSites = 0;
-    let cappedSites = 0;
-    let totalReduction = 0;
-    for (const [siteId, originalSize] of originalSizes) {
-        const cappedSize = cappedSizes.get(siteId);
-        if (cappedSize === undefined)
-            continue;
-        totalSites++;
-        if (cappedSize < originalSize) {
-            cappedSites++;
-            totalReduction += originalSize - cappedSize;
-        }
-    }
-    return {
-        totalSites,
-        cappedSites,
-        cappedPercentage: totalSites > 0 ? (cappedSites / totalSites) * 100 : 0,
-        avgReduction: cappedSites > 0 ? totalReduction / cappedSites : 0
-    };
-}