@smartnet360/svelte-components 0.0.93 → 0.0.94

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

@@ -153,6 +153,46 @@
 					/>
 				</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

@@ -136,6 +136,9 @@
 		const _autoSizeMode = displayStore.autoSizeMode;
 		const _autoSizeNeighborCount = displayStore.autoSizeNeighborCount;
 		const _autoSizeMultiplier = displayStore.autoSizeMultiplier;
+		const _useGridCapping = displayStore.useGridCapping;
+		const _gridCapPercentile = displayStore.gridCapPercentile;
+		const _gridSizeKm = displayStore.gridSizeKm;
 		
 		updateLayer();
 	});

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

@@ -0,0 +1,51 @@
+/**
+ * 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

@@ -0,0 +1,138 @@
+/**
+ * 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
+    };
+}

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

@@ -13,9 +13,12 @@ export class CellDataStore {
     setCells(cells) {
         this.rawCells = cells;
         // Automatically update site distances when cells are loaded
-        // Use neighborCount from displayStore if available
+        // Pass auto-size and grid capping settings from displayStore
         const neighborCount = this.displayStore?.autoSizeNeighborCount ?? 5;
-        this.siteDistanceStore.updateDistances(cells, neighborCount);
+        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);
     }
     get filteredCells() {
         if (!this.filterOnAir)

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

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

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

@@ -13,6 +13,10 @@ export class CellDisplayStore {
     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
     // Grouping
     level1 = $state('tech');
     level2 = $state('fband');
@@ -44,6 +48,9 @@ export class CellDisplayStore {
                     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.level1 = parsed.level1 ?? 'tech';
                     this.level2 = parsed.level2 ?? 'fband';
                     this.labelPixelDistance = parsed.labelPixelDistance ?? 60;
@@ -70,6 +77,9 @@ export class CellDisplayStore {
                     autoSizeMode: this.autoSizeMode,
                     autoSizeNeighborCount: this.autoSizeNeighborCount,
                     autoSizeMultiplier: this.autoSizeMultiplier,
+                    useGridCapping: this.useGridCapping,
+                    gridCapPercentile: this.gridCapPercentile,
+                    gridSizeKm: this.gridSizeKm,
                     level1: this.level1,
                     level2: this.level2,
                     labelPixelDistance: this.labelPixelDistance,

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

@@ -8,6 +8,7 @@ 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;
@@ -17,14 +18,18 @@ export declare class SiteDistanceStore {
      * 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
      */
-    updateDistances(cells: Cell[], neighborCount?: number): void;
+    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;
     /**
      * 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,10 +6,13 @@
  */
 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
+    // Cached nearest neighbor distances (original calculated sizes)
     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
@@ -25,8 +28,11 @@ export class SiteDistanceStore {
      * 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
      */
-    updateDistances(cells, neighborCount = 5) {
+    updateDistances(cells, neighborCount = 5, useGridCapping = true, gridCapPercentile = 80, gridSizeKm = 1) {
         if (!cells || cells.length === 0)
             return;
         const startTime = performance.now();
@@ -55,6 +61,16 @@ export class SiteDistanceStore {
             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;
@@ -82,15 +98,17 @@ export class SiteDistanceStore {
     }
     /**
      * Get distance for a site, with fallback
+     * Returns capped size if grid capping was applied, otherwise original
      */
     getDistance(siteId, fallback = 500) {
-        return this.distances.get(siteId) ?? fallback;
+        return this.cappedSizes.get(siteId) ?? 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/package.json

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