@smartnet360/svelte-components 0.0.101 → 0.0.103

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

@@ -102,11 +102,37 @@
 		<FeatureSelectionControl
 			position="bottom-left"
 			cellDataStore={cellData}
-			cellDisplayStore={cellDisplay}
-			title="Feature Selection"
-			actionButtonLabel="Export Selected"
-			onAction={(ids) => console.log('Selected features:', ids)}
-		/>
+			title="Cell Selection"
+			featureIcon="📡"
+			defaultSelectionMode="site"
+		>
+			{#snippet children(selectedIds)}
+				<button
+					type="button"
+					class="btn btn-primary w-100 mb-2"
+					disabled={selectedIds.length === 0}
+					onclick={() => console.log('Process Selected:', selectedIds)}
+				>
+					<i class="bi bi-gear-fill"></i> Process ({selectedIds.length})
+				</button>
+				<button
+					type="button"
+					class="btn btn-outline-primary w-100 mb-2"
+					disabled={selectedIds.length === 0}
+					onclick={() => console.log('Export Selected:', selectedIds)}
+				>
+					<i class="bi bi-download"></i> Export Data
+				</button>
+				<button
+					type="button"
+					class="btn btn-outline-secondary w-100"
+					disabled={selectedIds.length === 0}
+					onclick={() => console.log('Analyze Selected:', selectedIds)}
+				>
+					<i class="bi bi-graph-up"></i> Analyze
+				</button>
+			{/snippet}
+		</FeatureSelectionControl>
 	</Map>
 </div>
 

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

@@ -87,8 +87,13 @@ const TECH_BANDS = [
     { tech: '5G', band: '2100', fband: '5G-2100' },
     { tech: '5G', band: '3500', fband: '5G-3500' }
 ];
-// Three sector azimuths
-const AZIMUTHS = [0, 120, 240];
+// Three sector azimuths with sector numbers
+// Sector 1 = 0°, Sector 2 = 120°, Sector 3 = 240°
+const SECTORS = [
+    { azimuth: 0, sectorNum: 1 },
+    { azimuth: 120, sectorNum: 2 },
+    { azimuth: 240, sectorNum: 3 }
+];
 // Status rotation for variety
 const STATUSES = [
     'On_Air',
@@ -104,6 +109,18 @@ const STATUSES = [
     'On_Air',
     'On_Air'
 ];
+/**
+ * Generate 7-digit cellName from site and sector and band index
+ * Format: SSSS S BB
+ *   SSSS = 4-digit site ID
+ *   S = 1-digit sector number (1, 2, or 3)
+ *   BB = 2-digit band/cell index (41-52 for 11 tech-bands)
+ */
+function generateCellName(siteNum, sectorNum, bandIndex) {
+    const siteId = String(siteNum + 1000).padStart(4, '0'); // Start sites from 1000
+    const cellSuffix = String(41 + bandIndex).padStart(2, '0'); // Bands: 41-52
+    return `${siteId}${sectorNum}${cellSuffix}`;
+}
 /**
  * Generate demo cells with varied density patterns in circular distribution
  * Creates density zones radiating from center with random placement
@@ -144,23 +161,26 @@ for (let attempt = 0; attempt < NUM_SITES * 3 && actualSiteIndex < NUM_SITES; at
     const siteLng = addJitter(lng, jitterAmount);
     // Record position
     usedPositions.push({ lat: siteLat, lng: siteLng, minSpacing });
-    const siteId = `DEMO-SITE-${String(actualSiteIndex + 1).padStart(4, '0')}`;
+    // 4-digit site ID (starting from 1000)
+    const siteNum = actualSiteIndex;
+    const siteId = String(siteNum + 1000).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')}`;
-            const status = STATUSES[techIndex];
+    const sectorsToGenerate = SECTORS.slice(0, numSectors);
+    sectorsToGenerate.forEach((sector) => {
+        // Generate 11 tech-bands per sector (indexes 0-10)
+        TECH_BANDS.forEach((techBand, bandIndex) => {
+            // Generate 7-digit cellName: SSSS + S + BB (e.g., "1000141")
+            const cellName = generateCellName(siteNum, sector.sectorNum, bandIndex);
+            const status = STATUSES[bandIndex];
             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}`,
+                id: cellName,
+                txId: cellName,
+                cellID: cellName,
+                cellID2G: techBand.tech === '2G' ? cellName : '',
+                cellName: cellName,
                 siteId: siteId,
                 tech: techBand.tech,
                 fband: techBand.fband,
@@ -169,13 +189,13 @@ for (let attempt = 0; attempt < NUM_SITES * 3 && actualSiteIndex < NUM_SITES; at
                 status: status,
                 onAirDate: '2024-01-15',
                 // 2G specific
-                bcch: techBand.tech === '2G' ? 100 + techIndex : 0,
-                ctrlid: techBand.tech === '2G' ? `CTRL-${cellId}` : '',
+                bcch: techBand.tech === '2G' ? 100 + bandIndex : 0,
+                ctrlid: techBand.tech === '2G' ? `CTRL-${cellName}` : '',
                 // 4G specific
-                dlEarfn: techBand.tech === '4G' ? 6200 + techIndex * 100 : 0,
+                dlEarfn: techBand.tech === '4G' ? 6200 + bandIndex * 100 : 0,
                 // Physical properties
                 antenna: 'DEMO-ANTENNA-MODEL',
-                azimuth: azimuth,
+                azimuth: sector.azimuth,
                 height: 30, // 30 meters antenna height
                 electricalTilt: '3',
                 beamwidth: BEAMWIDTH,
@@ -186,7 +206,7 @@ for (let attempt = 0; attempt < NUM_SITES * 3 && actualSiteIndex < NUM_SITES; at
                 siteLatitude: siteLat,
                 siteLongitude: siteLng,
                 // Planning
-                comment: `Demo ${techBand.tech} ${techBand.band} cell at azimuth ${azimuth}°`,
+                comment: `Demo ${techBand.tech} ${techBand.band} cell at azimuth ${sector.azimuth}°`,
                 planner: 'Demo User',
                 // Atoll properties
                 atollETP: 43.0,
@@ -194,7 +214,7 @@ for (let attempt = 0; attempt < NUM_SITES * 3 && actualSiteIndex < NUM_SITES; at
                 atollRS: 500.0 + (techBand.band === '700' ? 200 : 0), // Lower freq = longer range
                 atollBW: parseFloat(techBand.band) / 100, // Simplified bandwidth
                 // Network properties
-                cellId3: `${cellId}-3G`,
+                cellId3: `${cellName}-3G`,
                 nwtP1: 20,
                 nwtP2: 40,
                 pci1: (cellCounter % 504), // Physical Cell ID for LTE
@@ -204,14 +224,23 @@ for (let attempt = 0; attempt < NUM_SITES * 3 && actualSiteIndex < NUM_SITES; at
                 other: {
                     demoCell: true,
                     siteNumber: actualSiteIndex,
-                    sector: sectorIndex + 1,
+                    sector: sector.sectorNum,
                     techBandKey: `${techBand.tech}_${techBand.band}`,
                     radius: normalizedRadius,
                     densityZone: zone.name
                 },
-                customSubgroup: `Sector-${sectorIndex + 1}`
+                customSubgroup: `Sector-${sector.sectorNum}`
             });
             cellCounter++;
         });
     });
 }
+// Summary of generated data structure
+console.log(`[Demo Data] Generated ${demoCells.length} cells across ${actualSiteIndex} sites`);
+console.log(`[Demo Data] CellName format: 7-digit numeric (e.g., "1000141")`);
+console.log(`[Demo Data] Structure: SSSS (site) + S (sector 1-3) + BB (band 41-51)`);
+console.log(`[Demo Data] Site ID range: 1000-${1000 + actualSiteIndex - 1}`);
+console.log(`[Demo Data] Example Site 1000:`);
+console.log(`  - Sector 1 (0°):   1000141-1000151 (11 bands)`);
+console.log(`  - Sector 2 (120°): 1000241-1000251 (11 bands)`);
+console.log(`  - Sector 3 (240°): 1000341-1000351 (11 bands)`);

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

@@ -1,8 +1,7 @@
 <script lang="ts">
 	import { onDestroy, untrack } from 'svelte';
 	import { MapControl } from '../../../shared';
-	import { createTreeStore } from '../../../../core/TreeView/tree.store';
-	import TreeView from '../../../../core/TreeView/TreeView.svelte';
+	import { createTreeStore, TreeView } from '../../../../core/TreeView';
 	import type { CellDataStore } from '../stores/cell.data.svelte';
 	import type { CellRegistry } from '../stores/cell.registry.svelte';
 	import type { CellDisplayStore } from '../stores/cell.display.svelte';
@@ -64,36 +63,31 @@
 
 	// Sync Tree Selection -> Cell Registry Visibility
 	$effect(() => {
-		const unsubscribe = treeStore.subscribe((val) => {
-			// Iterate all leaf nodes to sync visibility
-			// This is a bit heavy but ensures consistency. 
-			// Optimization: Only update changed nodes if we had a diff.
+		const val = treeStore;
+		// Iterate all leaf nodes to sync visibility
+		// This is a bit heavy but ensures consistency. 
+		// Optimization: Only update changed nodes if we had a diff.
+		
+		// We only care about leaf nodes (bands)
+		let changes = 0;
+		val.state.nodes.forEach((nodeState) => {
+			if (nodeState.node.children && nodeState.node.children.length > 0) return; // Skip folders
+
+			const groupId = nodeState.node.id;
+			// IMPORTANT: Read from checkedPaths set, NOT nodeState.checked (which is static/stale)
+			const isVisible = val.state.checkedPaths.has(nodeState.path);
 			
-			// We only care about leaf nodes (bands)
-			let changes = 0;
-			val.state.nodes.forEach((nodeState) => {
-				if (nodeState.node.children && nodeState.node.children.length > 0) return; // Skip folders
-
-				const groupId = nodeState.node.id;
-				// IMPORTANT: Read from checkedPaths set, NOT nodeState.checked (which is static/stale)
-				const isVisible = val.state.checkedPaths.has(nodeState.path);
-				
-				// Update registry if different
-				const currentStyle = registry.getStyle(groupId, '#000'); // Color doesn't matter here
-				if (currentStyle.visible !== isVisible) {
-					// console.log(`[CellFilterControl] Syncing ${groupId}: ${currentStyle.visible} -> ${isVisible}`);
-					registry.toggleVisibility(groupId);
-					changes++;
-				}
-			});
-			if (changes > 0) {
-				console.log(`[CellFilterControl] Synced ${changes} visibility changes to registry`);
+			// Update registry if different
+			const currentStyle = registry.getStyle(groupId, '#000'); // Color doesn't matter here
+			if (currentStyle.visible !== isVisible) {
+				// console.log(`[CellFilterControl] Syncing ${groupId}: ${currentStyle.visible} -> ${isVisible}`);
+				registry.toggleVisibility(groupId);
+				changes++;
 			}
 		});
-
-		return () => {
-			unsubscribe();
-		};
+		if (changes > 0) {
+			console.log(`[CellFilterControl] Synced ${changes} visibility changes to registry`);
+		}
 	});
 
 	function handleColorChange(groupId: string, event: Event) {
@@ -184,7 +178,7 @@
 					No cells loaded.
 				</div>
 			{:else}
-				<TreeView showControls={false} store={$treeStore} height="300px">
+				<TreeView showControls={false} store={treeStore} height="300px">
 					{#snippet children({ node, state })}
 						<!-- Color Picker (Only for leaves) -->
 						{#if !node.children || node.children.length === 0}

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

@@ -66,24 +66,44 @@
 			}
 
 			if (!map.getLayer(lineLayerId)) {
-				// Line Layer (Border) - Status-based styling
+				// Line Layer (Border) - Status-based styling with feature-state support
 				map.addLayer({
 					id: lineLayerId,
 					type: 'line',
 					source: sourceId,
 					paint: {
-						'line-color': ['get', 'lineColor'],
+						'line-color': [
+							'case',
+							['boolean', ['feature-state', 'selected'], false],
+							'#FF6B00', // Selected: orange
+							['get', 'lineColor'] // Default: status color
+						],
 						'line-width': [
-							'*',
-							['get', 'lineWidth'],
-							displayStore.lineWidth
+							'case',
+							['boolean', ['feature-state', 'selected'], false],
+							4, // Selected: thick
+							[
+								'*',
+								['get', 'lineWidth'],
+								displayStore.lineWidth
+							] // Default: scaled by display setting
+						],
+						'line-opacity': [
+							'case',
+							['boolean', ['feature-state', 'selected'], false],
+							1, // Selected: full opacity
+							['get', 'lineOpacity'] // Default: status opacity
 						],
-						'line-opacity': ['get', 'lineOpacity'],
 						'line-dasharray': [
 							'case',
-							['>', ['length', ['get', 'dashArray']], 0],
-							['get', 'dashArray'],
-							['literal', []]
+							['boolean', ['feature-state', 'selected'], false],
+							['literal', []], // Selected: solid line
+							[
+								'case',
+								['>', ['length', ['get', 'dashArray']], 0],
+								['get', 'dashArray'],
+								['literal', []]
+							] // Default: status dash
 						]
 					},
 					layout: {

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

@@ -79,6 +79,9 @@ export function generateCellArc(cell, radiusMeters, zIndex, color, beamwidthOver
     const sector = turf.sector(center, radiusMeters / 1000, bearing1, bearing2, {
         steps: 10 // Low steps for performance, increase if jagged
     });
+    // Set numeric ID at feature level for Mapbox feature-state support
+    // cellName is a numeric string (e.g., "4080141"), convert to number
+    sector.id = Number(cell.cellName);
     // Get status style
     const statusStyle = DEFAULT_STATUS_STYLES[cell.status] || DEFAULT_STATUS_STYLES['On_Air'];
     // Attach properties for styling and interaction

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

@@ -4,8 +4,35 @@ export declare class CellDataStore {
     rawCells: Cell[];
     filterOnAir: boolean;
     siteDistanceStore: SiteDistanceStore;
+    private _siteToCellsMap;
+    private _sectorToCellsMap;
+    private _cellNameToIdMap;
     constructor();
     setCells(cells: Cell[]): void;
+    /**
+     * Rebuild lookup maps when cell data changes
+     */
+    private rebuildLookupMaps;
     get filteredCells(): Cell[];
+    /**
+     * Get all cell names belonging to a site (by site ID)
+     */
+    getCellsBySiteId(siteId: string): string[];
+    /**
+     * Get all cell names belonging to a sector (by sector ID)
+     */
+    getCellsBySectorId(sectorId: string): string[];
+    /**
+     * Get numeric ID for a cell name
+     */
+    getNumericId(cellName: string): number | undefined;
+    /**
+     * Extract site ID from cell name (first 4 digits)
+     */
+    getSiteIdFromCellName(cellName: string): string;
+    /**
+     * Extract sector ID from cell name (first 5 digits)
+     */
+    getSectorIdFromCellName(cellName: string): string;
 }
 export declare function createCellDataStore(): CellDataStore;

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

@@ -4,6 +4,10 @@ export class CellDataStore {
     filterOnAir = $state(false);
     // Internal site distance store for auto-sizing
     siteDistanceStore;
+    // Cached lookup maps (rebuilt when cells change)
+    _siteToCellsMap = $state(new Map());
+    _sectorToCellsMap = $state(new Map());
+    _cellNameToIdMap = $state(new Map());
     constructor() {
         this.siteDistanceStore = new SiteDistanceStore();
     }
@@ -11,12 +15,73 @@ export class CellDataStore {
         this.rawCells = cells;
         // Automatically update site distances when cells are loaded
         this.siteDistanceStore.updateDistances(cells);
+        // Rebuild lookup maps
+        this.rebuildLookupMaps();
+    }
+    /**
+     * Rebuild lookup maps when cell data changes
+     */
+    rebuildLookupMaps() {
+        console.log('[CellDataStore] Rebuilding lookup maps for', this.rawCells.length, 'cells');
+        // Clear existing maps
+        this._siteToCellsMap.clear();
+        this._sectorToCellsMap.clear();
+        this._cellNameToIdMap.clear();
+        // Build all maps in one pass
+        for (const cell of this.rawCells) {
+            const siteId = cell.cellName.substring(0, 4);
+            const sectorId = cell.cellName.substring(0, 5);
+            const numericId = Number(cell.cellName);
+            // Site map
+            if (!this._siteToCellsMap.has(siteId)) {
+                this._siteToCellsMap.set(siteId, []);
+            }
+            this._siteToCellsMap.get(siteId).push(cell.cellName);
+            // Sector map
+            if (!this._sectorToCellsMap.has(sectorId)) {
+                this._sectorToCellsMap.set(sectorId, []);
+            }
+            this._sectorToCellsMap.get(sectorId).push(cell.cellName);
+            // Cell name to ID map
+            this._cellNameToIdMap.set(cell.cellName, numericId);
+        }
+        console.log('[CellDataStore] Lookup maps built:', this._siteToCellsMap.size, 'sites,', this._sectorToCellsMap.size, 'sectors,', this._cellNameToIdMap.size, 'cells');
     }
     get filteredCells() {
         if (!this.filterOnAir)
             return this.rawCells;
         return this.rawCells.filter(c => c.status === 'On_Air');
     }
+    /**
+     * Get all cell names belonging to a site (by site ID)
+     */
+    getCellsBySiteId(siteId) {
+        return this._siteToCellsMap.get(siteId) || [];
+    }
+    /**
+     * Get all cell names belonging to a sector (by sector ID)
+     */
+    getCellsBySectorId(sectorId) {
+        return this._sectorToCellsMap.get(sectorId) || [];
+    }
+    /**
+     * Get numeric ID for a cell name
+     */
+    getNumericId(cellName) {
+        return this._cellNameToIdMap.get(cellName);
+    }
+    /**
+     * Extract site ID from cell name (first 4 digits)
+     */
+    getSiteIdFromCellName(cellName) {
+        return cellName.substring(0, 4);
+    }
+    /**
+     * Extract sector ID from cell name (first 5 digits)
+     */
+    getSectorIdFromCellName(cellName) {
+        return cellName.substring(0, 5);
+    }
 }
 export function createCellDataStore() {
     return new CellDataStore();

package/dist/map-v3/features/coverage/index.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Coverage Feature - Public Exports
+ *
+ * Self-contained RF coverage prediction and visualization.
+ * Zero dependencies on cells/sites features.
+ */
+export * from './types';
+export { CoverageDataStore, createCoverageDataStore } from './stores/coverage.data.svelte';
+export { CoverageDisplayStore, createCoverageDisplayStore } from './stores/coverage.display.svelte';
+export { default as CoverageLayer } from './layers/CoverageLayer.svelte';
+export { gridToGeoJSON, getGridBounds, getSignalRange } from './logic/geometry';
+export { getColorForSignal, getLegendItems } from './logic/coloring';

package/dist/map-v3/features/coverage/index.js

@@ -0,0 +1,16 @@
+/**
+ * Coverage Feature - Public Exports
+ *
+ * Self-contained RF coverage prediction and visualization.
+ * Zero dependencies on cells/sites features.
+ */
+// Types
+export * from './types';
+// Stores
+export { CoverageDataStore, createCoverageDataStore } from './stores/coverage.data.svelte';
+export { CoverageDisplayStore, createCoverageDisplayStore } from './stores/coverage.display.svelte';
+// Layer
+export { default as CoverageLayer } from './layers/CoverageLayer.svelte';
+// Utilities (for advanced usage)
+export { gridToGeoJSON, getGridBounds, getSignalRange } from './logic/geometry';
+export { getColorForSignal, getLegendItems } from './logic/coloring';

package/dist/map-v3/features/coverage/layers/CoverageLayer.svelte

@@ -0,0 +1,198 @@
+<script lang="ts">
+	/**
+	 * Coverage Layer
+	 * 
+	 * Renders coverage grid as Mapbox fill layer.
+	 * Self-contained - only needs map instance from context.
+	 */
+
+	import { getContext, onMount } from 'svelte';
+	import type { MapStore } from '../../../core/stores/map.store.svelte';
+	import type { CoverageDataStore } from '../stores/coverage.data.svelte';
+	import type { CoverageDisplayStore } from '../stores/coverage.display.svelte';
+	import { gridToGeoJSON, getGridBounds } from '../logic/geometry';
+	import type mapboxgl from 'mapbox-gl';
+
+	interface Props {
+		dataStore: CoverageDataStore;
+		displayStore: CoverageDisplayStore;
+		autoFitBounds?: boolean; // Automatically fit map to coverage bounds
+	}
+
+	let { dataStore, displayStore, autoFitBounds = true }: Props = $props();
+
+	const mapStore = getContext<MapStore>('MAP_CONTEXT');
+	const sourceId = 'coverage-source';
+	const layerId = 'coverage-layer';
+	const componentId = Math.random().toString(36).substring(7);
+	
+	let layerInitialized = $state(false);
+	
+	console.log(`[CoverageLayer-${componentId}] Component created, mapStore:`, mapStore);
+
+	// Main effect: manage layer lifecycle - runs once (avoid reactive dependencies!)
+	$effect(() => {
+		const map = mapStore.map;
+		if (!map) return;
+		
+		// Initialize layers when style is loaded
+		const initializeLayers = () => {
+			// Always check if layer already exists (style might have reloaded)
+			if (map.getLayer(layerId)) {
+				console.log(`[CoverageLayer-${componentId}] Layer already exists, skipping initialization`);
+				layerInitialized = true;
+				return;
+			}
+			
+			console.log(`[CoverageLayer-${componentId}] Initializing layer...`);
+			
+			// Add source if it doesn't exist
+			if (!map.getSource(sourceId)) {
+				map.addSource(sourceId, {
+					type: 'geojson',
+					data: { type: 'FeatureCollection', features: [] }
+				});
+				console.log(`[CoverageLayer-${componentId}] Source added:`, sourceId);
+			}
+
+			// Add layer - use static defaults
+			map.addLayer({
+				id: layerId,
+				type: 'fill',
+				source: sourceId,
+				paint: {
+					'fill-color': ['get', 'color'],
+					'fill-opacity': 0.7  // Will be updated by separate effect
+				},
+				layout: {
+					'visibility': 'visible'  // Will be updated by separate effect
+				}
+			});
+			console.log(`[CoverageLayer-${componentId}] Layer added:`, layerId);
+			
+			layerInitialized = true;
+		};
+		
+		// Listen to style.load event - fires when style finishes loading (and on style changes)
+		const handleStyleLoad = () => {
+			console.log(`[CoverageLayer-${componentId}] Style loaded, reinitializing layers...`);
+			layerInitialized = false; // Reset flag so layers are recreated
+			initializeLayers();
+		};
+		
+		// Initialize immediately if style is already loaded
+		if (map.isStyleLoaded()) {
+			initializeLayers();
+		} else {
+			map.once('style.load', initializeLayers);
+		}
+		
+		// Re-initialize layers when style changes/reloads
+		map.on('style.load', handleStyleLoad);
+
+		// Cleanup on unmount only
+		return () => {
+			console.log(`[CoverageLayer-${componentId}] Component unmounting, cleaning up...`);
+			map.off('style.load', handleStyleLoad);
+			if (map.getLayer(layerId)) map.removeLayer(layerId);
+			if (map.getSource(sourceId)) map.removeSource(sourceId);
+			layerInitialized = false;
+		};
+	});
+
+	// Update layer visibility and opacity dynamically
+	$effect(() => {
+		const map = mapStore.map;
+		if (!map || !layerInitialized) return;
+
+		const opacity = displayStore.opacity;
+		const visible = displayStore.visible;
+
+		if (map.getLayer(layerId)) {
+			map.setPaintProperty(layerId, 'fill-opacity', opacity);
+			map.setLayoutProperty(layerId, 'visibility', visible ? 'visible' : 'none');
+			console.log(`[CoverageLayer-${componentId}] Updated opacity:`, opacity, 'visible:', visible);
+		}
+	});
+
+	// React to data changes - separate effect
+	$effect(() => {
+		const map = mapStore.map;
+		if (!map || !layerInitialized) {
+			return;
+		}
+
+		// Explicitly read dependencies for reactivity
+		const hasResults = dataStore.hasResults;
+		const colorScheme = displayStore.colorScheme;
+		const minSignal = displayStore.minSignalThreshold;
+		const maxSignal = displayStore.maxSignalThreshold;
+
+		console.log(`[CoverageLayer-${componentId}] Data/settings changed, hasResults:`, hasResults);
+
+		if (hasResults) {
+			updateLayer(map);
+		}
+	});
+
+	function updateLayer(map: mapboxgl.Map) {
+		if (!dataStore.result) {
+			console.log(`[CoverageLayer-${componentId}] No coverage data to render`);
+			return;
+		}
+
+		const grid = dataStore.result.grid;
+		const thresholds = dataStore.result.config.signalThresholds;
+
+		console.log(`[CoverageLayer-${componentId}] Grid structure:`, {
+			rows: grid.cells.length,
+			cols: grid.cells[0]?.length,
+			cellSizeMeters: grid.cellSizeMeters,
+			bounds: grid.bounds,
+			firstCell: grid.cells[0]?.[0]
+		});
+
+		// Convert grid to GeoJSON
+		const geojson = gridToGeoJSON(
+			grid,
+			displayStore.colorScheme,
+			displayStore.minSignalThreshold,
+			displayStore.maxSignalThreshold,
+			thresholds
+		);
+
+		console.log(`[CoverageLayer-${componentId}] GeoJSON created:`, {
+			features: geojson.features.length,
+			firstFeature: geojson.features[0],
+			firstFeatureCoords: geojson.features[0]?.geometry.coordinates,
+			firstFeatureColor: geojson.features[0]?.properties?.color
+		});
+
+		// Check if layer exists
+		console.log(`[CoverageLayer-${componentId}] Layer exists?`, map.getLayer(layerId) !== undefined);
+		console.log(`[CoverageLayer-${componentId}] Source exists?`, map.getSource(sourceId) !== undefined);
+
+		// Update source
+		const source = map.getSource(sourceId) as mapboxgl.GeoJSONSource;
+		if (source) {
+			source.setData(geojson);
+			console.log(`[CoverageLayer-${componentId}] Source data updated successfully`);
+			
+			// Force a repaint
+			map.triggerRepaint();
+		} else {
+			console.error('[CoverageLayer] Source not found:', sourceId);
+		}
+
+		// Auto-fit bounds on first render
+		if (autoFitBounds && geojson.features.length > 0) {
+			const bounds = getGridBounds(grid);
+			console.log(`[CoverageLayer-${componentId}] Fitting bounds:`, bounds);
+			map.fitBounds(bounds, {
+				padding: 50,
+				maxZoom: 14,
+				duration: 1000
+			});
+		}
+	}
+</script>