@smartnet360/svelte-components 0.0.102 → 0.0.103

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/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>

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

@@ -0,0 +1,10 @@
+import type { CoverageDataStore } from '../stores/coverage.data.svelte';
+import type { CoverageDisplayStore } from '../stores/coverage.display.svelte';
+interface Props {
+    dataStore: CoverageDataStore;
+    displayStore: CoverageDisplayStore;
+    autoFitBounds?: boolean;
+}
+declare const CoverageLayer: import("svelte").Component<Props, {}, "">;
+type CoverageLayer = ReturnType<typeof CoverageLayer>;
+export default CoverageLayer;

package/dist/map-v3/features/coverage/logic/coloring.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Color Scheme Utilities
+ *
+ * Wraps CoverageMap color scheme functions for coverage layer use.
+ */
+import type { SignalThresholds } from '../../../../core/CoverageMap';
+import type { CoverageColorScheme } from '../types';
+/**
+ * Get color for signal strength using specified color scheme
+ *
+ * @param signalDbm - Signal strength in dBm
+ * @param colorScheme - Color scheme name
+ * @param thresholds - Optional signal thresholds
+ * @returns Hex color string
+ */
+export declare function getColorForSignal(signalDbm: number, colorScheme: CoverageColorScheme, thresholds?: SignalThresholds): string;
+/**
+ * Get legend items for a color scheme
+ *
+ * @param colorScheme - Color scheme name
+ * @param thresholds - Signal thresholds
+ * @returns Array of legend items with color and label
+ */
+export declare function getLegendItems(colorScheme: CoverageColorScheme, thresholds?: SignalThresholds): Array<{
+    color: string;
+    label: string;
+    range: string;
+}>;

package/dist/map-v3/features/coverage/logic/coloring.js

@@ -0,0 +1,77 @@
+/**
+ * Color Scheme Utilities
+ *
+ * Wraps CoverageMap color scheme functions for coverage layer use.
+ */
+import { getColorForSignal as getCoverageColor, HEATMAP_RED_BLUE, VIRIDIS, PLASMA, CATEGORICAL } from '../../../../core/CoverageMap';
+/**
+ * Default signal thresholds for coloring
+ */
+const DEFAULT_THRESHOLDS = {
+    excellent: -70,
+    good: -85,
+    fair: -95,
+    edge: -105
+};
+/**
+ * Map coverage color scheme names to CoverageMap ColorScheme objects
+ */
+const SCHEME_MAP = {
+    'heatmap': HEATMAP_RED_BLUE,
+    'quality': CATEGORICAL,
+    'viridis': VIRIDIS,
+    'plasma': PLASMA,
+    'categorical': CATEGORICAL
+};
+/**
+ * Get color for signal strength using specified color scheme
+ *
+ * @param signalDbm - Signal strength in dBm
+ * @param colorScheme - Color scheme name
+ * @param thresholds - Optional signal thresholds
+ * @returns Hex color string
+ */
+export function getColorForSignal(signalDbm, colorScheme, thresholds = DEFAULT_THRESHOLDS) {
+    const scheme = SCHEME_MAP[colorScheme];
+    if (!scheme) {
+        console.warn(`[ColorSchemes] Unknown scheme: ${colorScheme}, using heatmap`);
+        return getCoverageColor(signalDbm, thresholds, HEATMAP_RED_BLUE);
+    }
+    return getCoverageColor(signalDbm, thresholds, scheme);
+}
+/**
+ * Get legend items for a color scheme
+ *
+ * @param colorScheme - Color scheme name
+ * @param thresholds - Signal thresholds
+ * @returns Array of legend items with color and label
+ */
+export function getLegendItems(colorScheme, thresholds = DEFAULT_THRESHOLDS) {
+    return [
+        {
+            color: getColorForSignal(thresholds.excellent, colorScheme, thresholds),
+            label: 'Excellent',
+            range: `> ${thresholds.excellent} dBm`
+        },
+        {
+            color: getColorForSignal((thresholds.excellent + thresholds.good) / 2, colorScheme, thresholds),
+            label: 'Good',
+            range: `${thresholds.good} to ${thresholds.excellent} dBm`
+        },
+        {
+            color: getColorForSignal((thresholds.good + thresholds.fair) / 2, colorScheme, thresholds),
+            label: 'Fair',
+            range: `${thresholds.fair} to ${thresholds.good} dBm`
+        },
+        {
+            color: getColorForSignal((thresholds.fair + thresholds.edge) / 2, colorScheme, thresholds),
+            label: 'Poor',
+            range: `${thresholds.edge} to ${thresholds.fair} dBm`
+        },
+        {
+            color: getColorForSignal(thresholds.edge - 5, colorScheme, thresholds),
+            label: 'Edge',
+            range: `< ${thresholds.edge} dBm`
+        }
+    ];
+}

package/dist/map-v3/features/coverage/logic/geometry.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Grid Geometry Utilities
+ *
+ * Convert coverage grid cells to GeoJSON for Mapbox rendering.
+ * Applies color schemes and filtering.
+ */
+import type { CoverageGrid, SignalThresholds } from '../types';
+import type { CoverageColorScheme } from '../types';
+import type { FeatureCollection, Polygon } from 'geojson';
+/**
+ * Convert coverage grid to GeoJSON FeatureCollection
+ *
+ * @param grid - Coverage grid from calculation
+ * @param colorScheme - Color scheme to apply
+ * @param minSignal - Minimum signal threshold (dBm)
+ * @param maxSignal - Maximum signal threshold (dBm)
+ * @returns GeoJSON FeatureCollection ready for Mapbox
+ */
+export declare function gridToGeoJSON(grid: CoverageGrid, colorScheme: CoverageColorScheme, minSignal?: number, maxSignal?: number, thresholds?: SignalThresholds): FeatureCollection<Polygon>;
+/**
+ * Calculate grid bounds for initial map view
+ *
+ * @param grid - Coverage grid
+ * @returns Mapbox-compatible bounds [[west, south], [east, north]]
+ */
+export declare function getGridBounds(grid: CoverageGrid): [[number, number], [number, number]];
+/**
+ * Get signal strength range from grid
+ *
+ * @param grid - Coverage grid
+ * @returns [min, max] signal strength in dBm
+ */
+export declare function getSignalRange(grid: CoverageGrid): [number, number];

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

@@ -0,0 +1,112 @@
+/**
+ * Grid Geometry Utilities
+ *
+ * Convert coverage grid cells to GeoJSON for Mapbox rendering.
+ * Applies color schemes and filtering.
+ */
+import { getColorForSignal } from './coloring';
+/**
+ * Convert coverage grid to GeoJSON FeatureCollection
+ *
+ * @param grid - Coverage grid from calculation
+ * @param colorScheme - Color scheme to apply
+ * @param minSignal - Minimum signal threshold (dBm)
+ * @param maxSignal - Maximum signal threshold (dBm)
+ * @returns GeoJSON FeatureCollection ready for Mapbox
+ */
+export function gridToGeoJSON(grid, colorScheme, minSignal = -115, maxSignal = -40, thresholds) {
+    const features = [];
+    const cellSizeMeters = grid.cellSizeMeters;
+    // Flatten 2D grid to 1D for processing
+    for (const row of grid.cells) {
+        for (const cell of row) {
+            // Filter by signal strength
+            if (cell.signalStrength < minSignal || cell.signalStrength > maxSignal) {
+                continue;
+            }
+            // Skip no-signal cells
+            if (cell.quality === 'no-signal') {
+                continue;
+            }
+            // Get color for this cell
+            const color = getColorForSignal(cell.signalStrength, colorScheme, thresholds);
+            // Create polygon feature
+            const feature = createCellPolygon(cell, cellSizeMeters, color);
+            features.push(feature);
+        }
+    }
+    return {
+        type: 'FeatureCollection',
+        features
+    };
+}
+/**
+ * Create a GeoJSON polygon for a single grid cell
+ *
+ * @param cell - Grid cell data
+ * @param cellSizeMeters - Size of cell in meters
+ * @param color - Hex color for this cell
+ * @returns GeoJSON Feature
+ */
+function createCellPolygon(cell, cellSizeMeters, color) {
+    // Calculate cell corners (approximate, good enough for visualization)
+    const latOffset = (cellSizeMeters / 111320); // ~111,320 meters per degree lat
+    const lngOffset = (cellSizeMeters / (111320 * Math.cos(cell.position.lat * Math.PI / 180)));
+    const lat = cell.position.lat;
+    const lng = cell.position.lng;
+    // Cell corners (clockwise from bottom-left)
+    const coordinates = [[
+            [lng - lngOffset / 2, lat - latOffset / 2], // SW
+            [lng + lngOffset / 2, lat - latOffset / 2], // SE
+            [lng + lngOffset / 2, lat + latOffset / 2], // NE
+            [lng - lngOffset / 2, lat + latOffset / 2], // NW
+            [lng - lngOffset / 2, lat - latOffset / 2] // Close polygon
+        ]];
+    return {
+        type: 'Feature',
+        geometry: {
+            type: 'Polygon',
+            coordinates
+        },
+        properties: {
+            signal: cell.signalStrength,
+            quality: cell.quality,
+            color: color,
+            lat: cell.position.lat,
+            lon: cell.position.lng,
+            dominantSector: cell.dominantSector
+        }
+    };
+}
+/**
+ * Calculate grid bounds for initial map view
+ *
+ * @param grid - Coverage grid
+ * @returns Mapbox-compatible bounds [[west, south], [east, north]]
+ */
+export function getGridBounds(grid) {
+    const bounds = grid.bounds;
+    return [
+        [bounds.west, bounds.south],
+        [bounds.east, bounds.north]
+    ];
+}
+/**
+ * Get signal strength range from grid
+ *
+ * @param grid - Coverage grid
+ * @returns [min, max] signal strength in dBm
+ */
+export function getSignalRange(grid) {
+    let min = 0;
+    let max = -120;
+    for (const row of grid.cells) {
+        for (const cell of row) {
+            if (cell.quality !== 'no-signal') {
+                min = Math.min(min, cell.signalStrength);
+                max = Math.max(max, cell.signalStrength);
+            }
+        }
+    }
+    return [min, max];
+}

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

@@ -0,0 +1,46 @@
+/**
+ * Coverage Data Store
+ *
+ * Self-contained store for coverage calculation data and state.
+ * Zero dependencies on cells/sites features - fully encapsulated.
+ */
+import type { CoverageResult, CoverageConfig } from '../types';
+export declare class CoverageDataStore {
+    result: CoverageResult | null;
+    calculating: boolean;
+    progress: number;
+    progressStage: string;
+    error: string | null;
+    private calculator;
+    constructor();
+    /**
+     * Calculate coverage prediction
+     * @param config - Complete RF configuration
+     */
+    calculateCoverage(config: CoverageConfig): Promise<void>;
+    /**
+     * Clear current coverage data
+     */
+    clearCoverage(): void;
+    /**
+     * Get grid cells for rendering
+     * Returns null if no result available
+     */
+    get gridCells(): import("../../../../core/CoverageMap").GridCell[][] | null;
+    /**
+     * Get coverage statistics
+     */
+    get stats(): import("../../../../core/CoverageMap").CoverageStats | null;
+    /**
+     * Get coverage configuration used
+     */
+    get config(): CoverageConfig | null;
+    /**
+     * Check if results are available
+     */
+    get hasResults(): boolean;
+}
+/**
+ * Factory function to create coverage data store
+ */
+export declare function createCoverageDataStore(): CoverageDataStore;