@smartnet360/svelte-components 0.0.91 → 0.0.93

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

@@ -5,7 +5,6 @@
 	import { createCellDataStore } from '../features/cells/stores/cell.data.svelte';
 	import { createCellRegistry } from '../features/cells/stores/cell.registry.svelte';
 	import { CellDisplayStore } from '../features/cells/stores/cell.display.svelte';
-	import { SiteDistanceStore } from '../features/cells/stores/site.distance.svelte';
 	import FeatureSettingsControl from '../core/controls/FeatureSettingsControl.svelte';
 	import CellFilterControl from '../features/cells/components/CellFilterControl.svelte';
 	import { createRepeaterDataStore } from '../features/repeaters/stores/repeater.data.svelte';
@@ -31,10 +30,9 @@
 	let { accessToken }: Props = $props();
 
 	// Initialize stores
-	const cellData = createCellDataStore();
 	const cellRegistry = createCellRegistry('demo-map');
 	const cellDisplay = new CellDisplayStore();
-	const siteDistanceStore = new SiteDistanceStore();
+	const cellData = createCellDataStore(cellDisplay);
 
 	const siteData = createSiteDataStore(cellData);
 	const siteRegistry = createSiteRegistry('demo-map');
@@ -49,9 +47,6 @@
 		// Need to cast or map if types slightly differ, but they should match
 		cellData.setCells(demoCells as any);
 		repeaterData.setRepeaters(demoRepeaters);
-		
-		// Compute site distances
-		siteDistanceStore.updateDistances(demoCells as any);
 	});
 </script>
 
@@ -99,7 +94,6 @@
 			dataStore={cellData} 
 			registry={cellRegistry} 
 			displayStore={cellDisplay}
-			siteDistanceStore={siteDistanceStore}
 		/>
 		<CellLabelsLayer dataStore={cellData} registry={cellRegistry} displayStore={cellDisplay} />
 		<RepeatersLayer dataStore={repeaterData} registry={repeaterRegistry} displayStore={repeaterDisplay} />

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

@@ -115,6 +115,44 @@
 					</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 -->
+			<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-3 text-end">
+					<span class="badge bg-white text-muted border">{displayStore.autoSizeMultiplier.toFixed(1)}x</span>
+				</div>
+				<div class="col-5">
+					<input
+						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"
+					/>
+				</div>
+			</div>
 		{/if}
 
 		<div class="border-top my-3"></div>

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

@@ -4,7 +4,6 @@
 	import type { CellDataStore } from '../stores/cell.data.svelte';
 	import type { CellRegistry } from '../stores/cell.registry.svelte';
 	import type { CellDisplayStore } from '../stores/cell.display.svelte';
-	import type { SiteDistanceStore } from '../stores/site.distance.svelte';
 	import { groupCells, getColorForGroup } from '../logic/grouping';
 	import { generateCellArc, calculateRadiusInMeters, calculateAutoRadius } from '../logic/geometry';
 	import type { TechnologyBandKey } from '../types';
@@ -14,10 +13,9 @@
 		dataStore: CellDataStore;
 		registry: CellRegistry;
 		displayStore: CellDisplayStore;
-		siteDistanceStore: SiteDistanceStore;
 	}
 
-	let { dataStore, registry, displayStore, siteDistanceStore }: Props = $props();
+	let { dataStore, registry, displayStore }: Props = $props();
 
 	const mapStore = getContext<MapStore>('MAP_CONTEXT');
 	let sourceId = 'cells-source';
@@ -104,8 +102,13 @@
 
 		// Events for updating
 		map.on('style.load', addLayers);
-		map.on('moveend', updateLayer);
-		map.on('zoomend', updateLayer);
+		
+		// Only listen to map events when NOT using auto-size
+		// Auto-size uses fixed meter-based sizes that don't change with zoom
+		if (!displayStore.useAutoSize) {
+			map.on('moveend', updateLayer);
+			map.on('zoomend', updateLayer);
+		}
 
 		// Cleanup
 		return () => {
@@ -131,6 +134,8 @@
 		const _layerGrouping = displayStore.layerGrouping;
 		const _useAutoSize = displayStore.useAutoSize;
 		const _autoSizeMode = displayStore.autoSizeMode;
+		const _autoSizeNeighborCount = displayStore.autoSizeNeighborCount;
+		const _autoSizeMultiplier = displayStore.autoSizeMultiplier;
 		
 		updateLayer();
 	});
@@ -146,20 +151,22 @@
 	}
 
 	function renderCells(map: mapboxgl.Map) {
-		const bounds = map.getBounds();
-		if (!bounds) return;
-
-		const zoom = map.getZoom();
-		const centerLat = map.getCenter().lat;
+		const useAutoSize = displayStore.useAutoSize;
 		
-		console.log(`[CellsLayer] Rendering.. Zoom: ${zoom.toFixed(2)}, Cells: ${dataStore.filteredCells.length}`);
+		// 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})`);
 
-		// 1. Calculate base radius
-		const baseRadiusMeters = calculateRadiusInMeters(centerLat, zoom, displayStore.targetPixelSize);
-		console.log(`[CellsLayer] Base radius: ${baseRadiusMeters.toFixed(2)}m for target ${displayStore.targetPixelSize}px`);
+		// 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)}`);
+		}
 
-		// 2. Group cells (Level 1=Tech, Level 2=Band for now hardcoded)
-		// In real app, this comes from a store
+		// 2. Group cells
 		const groups = groupCells(dataStore.filteredCells, displayStore.level1, displayStore.level2);
 		console.log(`[CellsLayer] Groups: ${groups.size}`);
 		
@@ -175,25 +182,32 @@
 			if (!style.visible) continue;
 
 			for (const cell of cells) {
-				// 4. BBox Filter (Simple point check)
-				if (bounds.contains([cell.longitude, cell.latitude])) {
+				// 4. BBox Filter (skip for auto-size - Mapbox handles culling efficiently)
+				const inView = useAutoSize ? true : (bounds?.contains([cell.longitude, cell.latitude]) ?? false);
+				
+				if (inView) {
 					// 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
+					// 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;
 					
 					if (displayStore.useAutoSize) {
 						// Auto-size mode: get target radius for this site
-						const siteDistance = siteDistanceStore.getDistance(cell.siteId, 500);
+						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 = autoRadius * scaleFactor;
+						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;

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

@@ -1,12 +1,10 @@
 import type { CellDataStore } from '../stores/cell.data.svelte';
 import type { CellRegistry } from '../stores/cell.registry.svelte';
 import type { CellDisplayStore } from '../stores/cell.display.svelte';
-import type { SiteDistanceStore } from '../stores/site.distance.svelte';
 interface Props {
     dataStore: CellDataStore;
     registry: CellRegistry;
     displayStore: CellDisplayStore;
-    siteDistanceStore: SiteDistanceStore;
 }
 declare const CellsLayer: import("svelte").Component<Props, {}, "">;
 type CellsLayer = ReturnType<typeof CellsLayer>;

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

@@ -26,9 +26,11 @@ 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
- * @returns Distance to nearest neighbor in meters, or Infinity if no neighbors
+ * @param neighborCount Number of closest neighbors to average (default: 5)
+ * @returns Average distance to N nearest neighbors in meters, or Infinity if no neighbors
  */
-export declare function computeNearestNeighbor(siteId: string, siteLocation: [number, number], allSiteLocations: Map<string, [number, number]>): number;
+export declare function computeNearestNeighbor(siteId: string, siteLocation: [number, number], allSiteLocations: Map<string, [number, number]>, neighborCount?: number): number;

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

@@ -54,18 +54,26 @@ 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
- * @returns Distance to nearest neighbor in meters, or Infinity if no neighbors
+ * @param neighborCount Number of closest neighbors to average (default: 5)
+ * @returns Average distance to N nearest neighbors in meters, or Infinity if no neighbors
  */
-export function computeNearestNeighbor(siteId, siteLocation, allSiteLocations) {
-    let minDist = Infinity;
+export function computeNearestNeighbor(siteId, siteLocation, allSiteLocations, neighborCount = 5) {
+    const distances = [];
     for (const [otherId, otherLoc] of allSiteLocations) {
         if (siteId === otherId)
             continue;
         const dist = haversineDistance(siteLocation, otherLoc);
-        minDist = Math.min(minDist, dist);
+        distances.push(dist);
     }
-    return minDist;
+    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;
 }

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

@@ -1,9 +1,17 @@
 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;
-    constructor();
+    siteDistanceStore: SiteDistanceStore;
+    displayStore?: CellDisplayStore;
+    constructor(displayStore?: CellDisplayStore);
     setCells(cells: Cell[]): void;
     get filteredCells(): Cell[];
 }
-export declare function createCellDataStore(): CellDataStore;
+/**
+ * Factory function to create a new CellDataStore
+ * @param displayStore Optional display store for auto-size settings
+ */
+export declare function createCellDataStore(displayStore?: CellDisplayStore): CellDataStore;

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

@@ -1,9 +1,21 @@
+import { SiteDistanceStore } from './site.distance.svelte';
 export class CellDataStore {
     rawCells = $state([]);
     filterOnAir = $state(false);
-    constructor() { }
+    // Internal site distance store for auto-sizing
+    siteDistanceStore;
+    // Reference to display store for auto-size settings
+    displayStore;
+    constructor(displayStore) {
+        this.siteDistanceStore = new SiteDistanceStore();
+        this.displayStore = displayStore;
+    }
     setCells(cells) {
         this.rawCells = cells;
+        // Automatically update site distances when cells are loaded
+        // Use neighborCount from displayStore if available
+        const neighborCount = this.displayStore?.autoSizeNeighborCount ?? 5;
+        this.siteDistanceStore.updateDistances(cells, neighborCount);
     }
     get filteredCells() {
         if (!this.filterOnAir)
@@ -11,6 +23,10 @@ export class CellDataStore {
         return this.rawCells.filter(c => c.status === 'On_Air');
     }
 }
-export function createCellDataStore() {
-    return new CellDataStore();
+/**
+ * Factory function to create a new CellDataStore
+ * @param displayStore Optional display store for auto-size settings
+ */
+export function createCellDataStore(displayStore) {
+    return new CellDataStore(displayStore);
 }

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

@@ -9,6 +9,8 @@ export declare class CellDisplayStore {
     layerGrouping: LayerGroupingPreset;
     useAutoSize: boolean;
     autoSizeMode: AutoSizeMode;
+    autoSizeNeighborCount: number;
+    autoSizeMultiplier: number;
     level1: CellGroupingField;
     level2: CellGroupingField;
     currentZIndex: Record<string, number>;

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

@@ -11,6 +11,8 @@ 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)
     // Grouping
     level1 = $state('tech');
     level2 = $state('fband');
@@ -40,6 +42,8 @@ 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.level1 = parsed.level1 ?? 'tech';
                     this.level2 = parsed.level2 ?? 'fband';
                     this.labelPixelDistance = parsed.labelPixelDistance ?? 60;
@@ -64,6 +68,8 @@ export class CellDisplayStore {
                     layerGrouping: this.layerGrouping,
                     useAutoSize: this.useAutoSize,
                     autoSizeMode: this.autoSizeMode,
+                    autoSizeNeighborCount: this.autoSizeNeighborCount,
+                    autoSizeMultiplier: this.autoSizeMultiplier,
                     level1: this.level1,
                     level2: this.level2,
                     labelPixelDistance: this.labelPixelDistance,

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

@@ -15,8 +15,10 @@ export declare 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
      */
-    updateDistances(cells: Cell[]): void;
+    updateDistances(cells: Cell[], neighborCount?: number): void;
     /**
      * Update existing sites if needed (when no new sites but data might have changed)
      */

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

@@ -23,8 +23,10 @@ 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
      */
-    updateDistances(cells) {
+    updateDistances(cells, neighborCount = 5) {
         if (!cells || cells.length === 0)
             return;
         const startTime = performance.now();
@@ -37,11 +39,11 @@ export class SiteDistanceStore {
             this.updateExistingSitesIfNeeded(siteLocations);
             return;
         }
-        console.log(`[SiteDistance] Computing distances for ${newSites.length} new sites`);
+        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);
+            const nearestDist = computeNearestNeighbor(siteId, location, siteLocations, neighborCount);
             this.distances.set(siteId, nearestDist);
             this.computedSites.add(siteId);
         }
@@ -49,15 +51,9 @@ export class SiteDistanceStore {
         for (const [existingId, existingLoc] of siteLocations) {
             if (newSites.includes(existingId))
                 continue; // Skip new sites
-            let currentMin = this.distances.get(existingId) || Infinity;
-            for (const newId of newSites) {
-                const newLoc = siteLocations.get(newId);
-                const dist = haversineDistance(existingLoc, newLoc);
-                currentMin = Math.min(currentMin, dist);
-            }
-            if (currentMin < (this.distances.get(existingId) || Infinity)) {
-                this.distances.set(existingId, currentMin);
-            }
+            // Recalculate with new sites present
+            const updatedDist = computeNearestNeighbor(existingId, existingLoc, siteLocations, neighborCount);
+            this.distances.set(existingId, updatedDist);
         }
         const endTime = performance.now();
         this.lastComputeTime = endTime - startTime;

package/package.json

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