@smartnet360/svelte-components 0.0.58 → 0.0.60

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

@@ -1,12 +1,13 @@
 /**
  * Demo Cell Data
  *
- * 1 site with 3 sectors (azimuths: 0°, 120°, 240°)
+ * 100 sites across San Francisco Bay Area
+ * Each site has 3 sectors (azimuths: 0°, 120°, 240°)
  * Each sector has 12 cells (all tech-band combinations)
- * Total: 36 cells
+ * Total: 100 sites × 3 sectors × 12 tech-bands = 3,600 cells
  */
 import type { Cell } from '../features/cells/types';
 /**
- * Generate demo cells: 3 sectors × 12 tech-bands = 36 cells
+ * Generate demo cells: 100 sites × 3 sectors × 12 tech-bands = 3,600 cells
  */
 export declare const demoCells: Cell[];

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

@@ -1,14 +1,19 @@
 /**
  * Demo Cell Data
  *
- * 1 site with 3 sectors (azimuths: 0°, 120°, 240°)
+ * 100 sites across San Francisco Bay Area
+ * Each site has 3 sectors (azimuths: 0°, 120°, 240°)
  * Each sector has 12 cells (all tech-band combinations)
- * Total: 36 cells
+ * Total: 100 sites × 3 sectors × 12 tech-bands = 3,600 cells
  */
-// Site location: San Francisco
-const SITE_LAT = 37.7749;
-const SITE_LNG = -122.4194;
-const SITE_ID = 'DEMO-SITE-001';
+// Base location: San Francisco
+const BASE_LAT = 37.7749;
+const BASE_LNG = -122.4194;
+// Grid parameters for distributing sites
+const NUM_SITES = 1;
+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)
 // Standard beamwidth for sectors
 const BEAMWIDTH = 65;
 // Cell tech-band definitions with proper fband format
@@ -46,69 +51,82 @@ const STATUSES = [
     'On_Air'
 ];
 /**
- * Generate demo cells: 3 sectors × 12 tech-bands = 36 cells
+ * Generate demo cells: 100 sites × 3 sectors × 12 tech-bands = 3,600 cells
  */
 export const demoCells = [];
 let cellCounter = 1;
-AZIMUTHS.forEach((azimuth, sectorIndex) => {
-    TECH_BANDS.forEach((techBand, techIndex) => {
-        const cellId = `CELL-${String(cellCounter).padStart(3, '0')}`;
-        const status = STATUSES[techIndex];
-        demoCells.push({
-            // Core properties
-            id: cellId,
-            txId: `TX-${String(cellCounter).padStart(3, '0')}`,
-            cellID: cellId,
-            cellID2G: techBand.tech === '2G' ? cellId : '',
-            cellName: `Demo Cell ${techBand.tech} ${techBand.band} - Sector ${sectorIndex + 1}`,
-            siteId: SITE_ID,
-            tech: techBand.tech,
-            fband: techBand.fband,
-            frq: techBand.band,
-            type: 'MACRO',
-            status: status,
-            onAirDate: '2024-01-15',
-            // 2G specific
-            bcch: techBand.tech === '2G' ? 100 + techIndex : 0,
-            ctrlid: techBand.tech === '2G' ? `CTRL-${cellId}` : '',
-            // 4G specific
-            dlEarfn: techBand.tech === '4G' ? 6200 + techIndex * 100 : 0,
-            // Physical properties
-            antenna: 'DEMO-ANTENNA-MODEL',
-            azimuth: azimuth,
-            height: 30, // 30 meters antenna height
-            electricalTilt: '3',
-            beamwidth: BEAMWIDTH,
-            latitude: SITE_LAT,
-            longitude: SITE_LNG,
-            dx: 0,
-            dy: 0,
-            siteLatitude: SITE_LAT,
-            siteLongitude: SITE_LNG,
-            // Planning
-            comment: `Demo ${techBand.tech} ${techBand.band} cell at azimuth ${azimuth}°`,
-            planner: 'Demo User',
-            // Atoll properties
-            atollETP: 43.0,
-            atollPW: 20.0,
-            atollRS: 500.0 + (techBand.band === '700' ? 200 : 0), // Lower freq = longer range
-            atollBW: parseFloat(techBand.band) / 100, // Simplified bandwidth
-            // Network properties
-            cellId3: `${cellId}-3G`,
-            nwtP1: 20,
-            nwtP2: 40,
-            pci1: (cellCounter % 504), // Physical Cell ID for LTE
-            nwtRS: 450.0,
-            nwtBW: 10.0,
-            // Other
-            other: {
-                demoCell: true,
-                sector: sectorIndex + 1,
-                techBandKey: `${techBand.tech}_${techBand.band}`
-            },
-            customSubgroup: `Sector-${sectorIndex + 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) => {
+        // Generate 12 tech-bands per sector
+        TECH_BANDS.forEach((techBand, techIndex) => {
+            const cellId = `CELL-${String(cellCounter).padStart(4, '0')}`;
+            const status = STATUSES[techIndex];
+            demoCells.push({
+                // Core properties
+                id: cellId,
+                txId: `TX-${String(cellCounter).padStart(4, '0')}`,
+                cellID: cellId,
+                cellID2G: techBand.tech === '2G' ? cellId : '',
+                cellName: `${siteId} ${techBand.tech}${techBand.band} S${sectorIndex + 1}`,
+                siteId: siteId,
+                tech: techBand.tech,
+                fband: techBand.fband,
+                frq: techBand.band,
+                type: 'MACRO',
+                status: status,
+                onAirDate: '2024-01-15',
+                // 2G specific
+                bcch: techBand.tech === '2G' ? 100 + techIndex : 0,
+                ctrlid: techBand.tech === '2G' ? `CTRL-${cellId}` : '',
+                // 4G specific
+                dlEarfn: techBand.tech === '4G' ? 6200 + techIndex * 100 : 0,
+                // Physical properties
+                antenna: 'DEMO-ANTENNA-MODEL',
+                azimuth: azimuth,
+                height: 30, // 30 meters antenna height
+                electricalTilt: '3',
+                beamwidth: BEAMWIDTH,
+                latitude: siteLat,
+                longitude: siteLng,
+                dx: 0,
+                dy: 0,
+                siteLatitude: siteLat,
+                siteLongitude: siteLng,
+                // Planning
+                comment: `Demo ${techBand.tech} ${techBand.band} cell at azimuth ${azimuth}°`,
+                planner: 'Demo User',
+                // Atoll properties
+                atollETP: 43.0,
+                atollPW: 20.0,
+                atollRS: 500.0 + (techBand.band === '700' ? 200 : 0), // Lower freq = longer range
+                atollBW: parseFloat(techBand.band) / 100, // Simplified bandwidth
+                // Network properties
+                cellId3: `${cellId}-3G`,
+                nwtP1: 20,
+                nwtP2: 40,
+                pci1: (cellCounter % 504), // Physical Cell ID for LTE
+                nwtRS: 450.0,
+                nwtBW: 10.0,
+                // Other
+                other: {
+                    demoCell: true,
+                    siteNumber: siteIndex + 1,
+                    sector: sectorIndex + 1,
+                    techBandKey: `${techBand.tech}_${techBand.band}`,
+                    gridPosition: { row, col }
+                },
+                customSubgroup: `Sector-${sectorIndex + 1}`
+            });
+            cellCounter++;
         });
-        cellCounter++;
     });
-});
-console.log(`Generated ${demoCells.length} demo cells across ${AZIMUTHS.length} sectors`);
+}
+console.log(`Generated ${demoCells.length} demo cells across ${NUM_SITES} sites (${AZIMUTHS.length} sectors × ${TECH_BANDS.length} tech-bands per site)`);

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

@@ -56,10 +56,36 @@
 	let level1 = $state<Exclude<CellGroupingField, 'none'>>(store.groupingConfig.level1);
 	let level2 = $state<CellGroupingField>(store.groupingConfig.level2);
 	
+	// Track config for localStorage invalidation
+	const STORAGE_CONFIG_KEY = 'cellular-cell-filter:config';
+	
+	/**
+	 * Check if grouping config has changed and clear localStorage if needed
+	 */
+	function validateStoredConfig() {
+		const storedConfigStr = localStorage.getItem(STORAGE_CONFIG_KEY);
+		const currentConfig = `${level1}:${level2}`;
+		
+		if (storedConfigStr !== currentConfig) {
+			console.log('CellFilterControl: Config changed, clearing tree state', {
+				stored: storedConfigStr,
+				current: currentConfig
+			});
+			// Clear tree state from localStorage
+			localStorage.removeItem('cellular-cell-filter:checked');
+			localStorage.removeItem('cellular-cell-filter:expanded');
+			// Save new config
+			localStorage.setItem(STORAGE_CONFIG_KEY, currentConfig);
+		}
+	}
+	
 	// Rebuild tree when grouping config or cells change
 	function rebuildTree() {
 		if (store.cells.length === 0) return;
 		
+		// Validate and clear stale localStorage
+		validateStoredConfig();
+		
 		console.log('CellFilterControl: Building tree with config:', { level1, level2 });
 		
 		const treeNodes = buildCellTree(

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

@@ -34,12 +34,28 @@
 	
 	let map = $state<MapboxMap | null>(null);
 	let mounted = $state(false);
+	let viewportUpdateTimer: ReturnType<typeof setTimeout> | null = null;
+	let viewportVersion = $state(0); // Increment this to force $effect re-run on viewport changes
 	
-	// Zoom change handler
-	function handleZoomEnd() {
+	// Viewport change handler (pan/zoom/move) with debouncing
+	function handleMoveEnd() {
 		if (!map) return;
-		const newZoom = map.getZoom();
-		store.setCurrentZoom(newZoom);
+		
+		// Clear any existing timer
+		if (viewportUpdateTimer) {
+			clearTimeout(viewportUpdateTimer);
+		}
+		
+		// Debounce: wait 200ms after last move event before re-rendering
+		viewportUpdateTimer = setTimeout(() => {
+			if (!map) return;
+			const newZoom = map.getZoom();
+			console.log('CellsLayer: Viewport changed (zoom/pan), updating to zoom:', newZoom);
+			// Update zoom if changed
+			store.setCurrentZoom(newZoom);
+			// Force $effect to re-run by incrementing version (triggers on pan without zoom change)
+			viewportVersion++;
+		}, 200);
 	}
 	
 	onMount(() => {
@@ -55,8 +71,8 @@
 				// Set initial zoom
 				store.setCurrentZoom(mapInstance.getZoom());
 				
-				// Listen to zoom changes
-				mapInstance.on('zoomend', handleZoomEnd);
+				// Listen to viewport changes (pan + zoom, debounced)
+				mapInstance.on('moveend', handleMoveEnd);
 			}
 		});
 		
@@ -68,7 +84,12 @@
 	onDestroy(() => {
 		if (!map) return;
 		
-		map.off('zoomend', handleZoomEnd);
+		// Clean up timer
+		if (viewportUpdateTimer) {
+			clearTimeout(viewportUpdateTimer);
+		}
+		
+		map.off('moveend', handleMoveEnd);
 		
 		// Clean up layers and source
 		if (map.getLayer(LINE_LAYER_ID)) {
@@ -84,13 +105,17 @@
 	
 	// Reactive: Update GeoJSON when cells/zoom/filters/settings change
 	$effect(() => {
+		// Track viewportVersion to force re-run on pan (even without zoom change)
+		viewportVersion;
+		
 		console.log('CellsLayer $effect triggered:', {
 			mounted,
 			hasMap: !!map,
 			showCells: store.showCells,
 			filteredCellsCount: store.filteredCells.length,
 			currentZoom: store.currentZoom,
-			baseRadius: store.baseRadius
+			baseRadius: store.baseRadius,
+			viewportVersion
 		});
 		
 		if (!mounted || !map || !store.showCells) {
@@ -110,9 +135,31 @@
 			return;
 		}
 		
-		// Generate GeoJSON from filtered cells
+		// Filter cells by viewport bounds (only render visible cells)
+		const bounds = map.getBounds();
+		if (!bounds) {
+			console.warn('CellsLayer: Cannot get map bounds, skipping viewport filter');
+			return;
+		}
+		
+		const visibleCells = store.filteredCells.filter(cell => 
+			bounds.contains([cell.longitude, cell.latitude])
+		);
+		
+		console.log('CellsLayer: Viewport filtering:', {
+			totalFiltered: store.filteredCells.length,
+			visibleInViewport: visibleCells.length,
+			bounds: {
+				north: bounds.getNorth(),
+				south: bounds.getSouth(),
+				east: bounds.getEast(),
+				west: bounds.getWest()
+			}
+		});
+		
+		// Generate GeoJSON from visible cells only
 		const geoJSON = cellsToGeoJSON(
-			store.filteredCells,
+			visibleCells,
 			store.currentZoom,
 			store.baseRadius,
 			store.groupColorMap

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

@@ -71,12 +71,22 @@ function generateNodeId(field, value, parentId) {
  */
 export function buildCellTree(cells, config, colorMap) {
     const { level1, level2 } = config;
+    console.log('=== buildCellTree START ===');
+    console.log('Config:', { level1, level2 });
+    console.log('Total cells:', cells.length);
     // If level2 is 'none', create flat 2-level tree
     if (level2 === 'none') {
-        return buildFlatTree(cells, level1, colorMap);
+        console.log('Building flat tree (2-level)');
+        const tree = buildFlatTree(cells, level1, colorMap);
+        console.log('Flat tree built, root children:', tree.children?.length);
+        return tree;
     }
     // Otherwise, create nested 3-level tree
-    return buildNestedTree(cells, level1, level2, colorMap);
+    console.log('Building nested tree (3-level)');
+    const tree = buildNestedTree(cells, level1, level2, colorMap);
+    console.log('Nested tree built, root children:', tree.children?.length);
+    console.log('=== buildCellTree END ===');
+    return tree;
 }
 /**
  * Build flat 2-level tree (Root → Level1 groups)
@@ -97,6 +107,8 @@ function buildFlatTree(cells, level1, colorMap) {
     const children = sortedGroups.map(([value, groupCells]) => {
         const nodeId = generateNodeId(level1, value);
         const color = colorMap?.get(nodeId);
+        const cellIds = groupCells.map((c) => c.id);
+        console.log(`  Flat tree node: id="${nodeId}", cells=${cellIds.length}, cellIds sample:`, cellIds.slice(0, 3));
         return {
             id: nodeId,
             label: getGroupLabel(level1, value, groupCells.length),
@@ -106,7 +118,7 @@ function buildFlatTree(cells, level1, colorMap) {
                 type: 'leafGroup',
                 groupingField: level1,
                 groupingValue: value,
-                cellIds: groupCells.map((c) => c.id),
+                cellIds,
                 color
             }
         };
@@ -149,6 +161,8 @@ function buildNestedTree(cells, level1, level2, colorMap) {
         const level2Children = sortedLevel2.map(([value2, groupCells]) => {
             const nodeId = generateNodeId(level2, value2, parentId);
             const color = colorMap?.get(nodeId);
+            const cellIds = groupCells.map((c) => c.id);
+            console.log(`    Nested tree leaf: id="${nodeId}", cells=${cellIds.length}, cellIds sample:`, cellIds.slice(0, 3));
             return {
                 id: nodeId,
                 label: getGroupLabel(level2, value2, groupCells.length),
@@ -160,13 +174,14 @@ function buildNestedTree(cells, level1, level2, colorMap) {
                     groupingValue: value2,
                     parentGroupingField: level1,
                     parentGroupingValue: value1,
-                    cellIds: groupCells.map((c) => c.id),
+                    cellIds,
                     color
                 }
             };
         });
         // Calculate total cells in this level1 group
         const totalCells = Array.from(level2Groups.values()).flat().length;
+        console.log(`  Nested tree parent: id="${parentId}", totalCells=${totalCells}, children=${level2Children.length}`);
         return {
             id: parentId,
             label: getGroupLabel(level1, value1, totalCells),
@@ -197,30 +212,72 @@ function buildNestedTree(cells, level1, level2, colorMap) {
  * @returns Filtered array of cells
  */
 export function getFilteredCells(checkedPaths, allCells) {
+    console.log('=== getFilteredCells START ===');
+    console.log('Checked paths:', Array.from(checkedPaths));
+    console.log('Total cells:', allCells.length);
     // If root is checked (or no specific filters), return all cells
     if (checkedPaths.has('root') && checkedPaths.size === 1) {
+        console.log('Root only checked, returning all cells');
         return allCells;
     }
+    // Sample first 3 cells for detailed logging
+    const sampleSize = 3;
+    let processedCount = 0;
     // Filter cells that match any of the checked paths
     const filtered = allCells.filter((cell) => {
+        const shouldLog = processedCount < sampleSize;
+        if (shouldLog) {
+            console.log(`\n--- Sample Cell ${processedCount + 1}: ${cell.id} ---`);
+            console.log(`  Properties: tech="${cell.tech}", frq="${cell.frq}", status="${cell.status}"`);
+        }
         // Check if this cell belongs to any checked path
-        return Array.from(checkedPaths).some((path) => {
+        const matched = Array.from(checkedPaths).some((path) => {
             // Match cell properties against path segments
-            if (path === 'root')
+            if (path === 'root') {
+                if (shouldLog)
+                    console.log(`  Path "root": MATCH`);
                 return true;
-            // Parse path and check if cell matches
-            const segments = path.split(':');
-            // Simple string matching against cell properties
-            return segments.every((segment) => {
-                return (cell.tech === segment ||
+            }
+            // Parse path and filter out "root" prefix and deduplicate consecutive segments
+            const allSegments = path.split(':');
+            // Remove "root" and deduplicate consecutive segments
+            const segments = [];
+            let prevSegment = '';
+            for (const segment of allSegments) {
+                if (segment !== 'root' && segment !== prevSegment) {
+                    segments.push(segment);
+                    prevSegment = segment;
+                }
+            }
+            if (shouldLog) {
+                console.log(`  Checking path "${path}" (raw: [${allSegments.join(', ')}], filtered: [${segments.join(', ')}])`);
+            }
+            // Match filtered segments against cell properties
+            const segmentMatches = segments.every((segment) => {
+                const matches = (cell.tech === segment ||
                     cell.frq === segment ||
                     cell.status === segment ||
                     cell.siteId === segment ||
                     cell.customSubgroup === segment ||
                     cell.type === segment ||
                     cell.planner === segment);
+                if (shouldLog) {
+                    console.log(`    Segment "${segment}": ${matches ? '✓ MATCH' : '✗ NO MATCH'}`);
+                }
+                return matches;
             });
+            if (shouldLog) {
+                console.log(`  Path "${path}": ${segmentMatches ? '✓ MATCHED' : '✗ NOT MATCHED'}`);
+            }
+            return segmentMatches;
         });
+        if (shouldLog) {
+            console.log(`  Final result: ${matched ? '✓ INCLUDE' : '✗ EXCLUDE'}`);
+        }
+        processedCount++;
+        return matched;
     });
+    console.log(`\nFiltered result: ${filtered.length} of ${allCells.length} cells`);
+    console.log('=== getFilteredCells END ===\n');
     return filtered;
 }

package/package.json

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