@smartnet360/svelte-components 0.0.51 → 0.0.54

package/dist/map/layers/LayerBase.d.ts

@@ -0,0 +1,42 @@
+/**
+ * Shared utilities for Mapbox layer components
+ */
+export interface LayerConfig {
+    namespace: string;
+    layerName: string;
+    sourceName: string;
+}
+/**
+ * Base class for managing Mapbox layers with consistent patterns
+ */
+export declare class LayerBase {
+    protected map: mapboxgl.Map;
+    protected config: LayerConfig;
+    protected layerId: string;
+    protected sourceId: string;
+    constructor(map: mapboxgl.Map, config: LayerConfig);
+    /**
+     * Adds a GeoJSON source to the map
+     */
+    protected addGeoJSONSource(data: GeoJSON.FeatureCollection | GeoJSON.Feature): void;
+    /**
+     * Adds a layer to the map
+     */
+    protected addLayer(layer: mapboxgl.AnyLayer, beforeId?: string): void;
+    /**
+     * Updates the GeoJSON source data
+     */
+    protected updateSource(data: GeoJSON.FeatureCollection | GeoJSON.Feature): void;
+    /**
+     * Removes the layer and source from the map
+     */
+    cleanup(): void;
+    /**
+     * Gets the layer ID
+     */
+    getLayerId(): string;
+    /**
+     * Gets the source ID
+     */
+    getSourceId(): string;
+}

package/dist/map/layers/LayerBase.js

@@ -0,0 +1,58 @@
+/**
+ * Shared utilities for Mapbox layer components
+ */
+import { addSourceIfMissing, addLayerIfMissing, removeLayerAndSource, generateLayerId, generateSourceId, updateGeoJSONSource } from '../utils/mapboxHelpers';
+/**
+ * Base class for managing Mapbox layers with consistent patterns
+ */
+export class LayerBase {
+    map;
+    config;
+    layerId;
+    sourceId;
+    constructor(map, config) {
+        this.map = map;
+        this.config = config;
+        this.layerId = generateLayerId(config.namespace, config.layerName);
+        this.sourceId = generateSourceId(config.namespace, config.sourceName);
+    }
+    /**
+     * Adds a GeoJSON source to the map
+     */
+    addGeoJSONSource(data) {
+        addSourceIfMissing(this.map, this.sourceId, {
+            type: 'geojson',
+            data
+        });
+    }
+    /**
+     * Adds a layer to the map
+     */
+    addLayer(layer, beforeId) {
+        addLayerIfMissing(this.map, layer, beforeId);
+    }
+    /**
+     * Updates the GeoJSON source data
+     */
+    updateSource(data) {
+        updateGeoJSONSource(this.map, this.sourceId, data);
+    }
+    /**
+     * Removes the layer and source from the map
+     */
+    cleanup() {
+        removeLayerAndSource(this.map, this.layerId, this.sourceId);
+    }
+    /**
+     * Gets the layer ID
+     */
+    getLayerId() {
+        return this.layerId;
+    }
+    /**
+     * Gets the source ID
+     */
+    getSourceId() {
+        return this.sourceId;
+    }
+}

package/dist/map/layers/SitesLayer.svelte

@@ -0,0 +1,282 @@
+<script lang="ts">
+	/**
+	 * SitesLayer - Visualizes cellular sites as points on the map
+	 *
+	 * Consumes:
+	 * - Map instance from MapboxProvider
+	 * - Sites data from CellDataProvider
+	 *
+	 * Features:
+	 * - Displays sites as circles
+	 * - Supports selection and hover states
+	 * - Click to select a site
+	 */
+	import { onMount, onDestroy } from 'svelte';
+	import mapboxgl from 'mapbox-gl';
+	import { useMapbox } from '../hooks/useMapbox';
+	import { useCellData } from '../hooks/useCellData';
+	import { sitesToGeoJSON } from '../utils/geojson';
+	import { LayerBase } from './LayerBase';
+	import type { Site } from '../types';
+
+	interface Props {
+		/** Namespace for layer IDs (default: 'cellular') */
+		namespace?: string;
+		/** Enable click to select sites (default: true) */
+		clickable?: boolean;
+		/** Show popup on click (default: true) */
+		showPopup?: boolean;
+		/** Site circle radius (default: 8) */
+		circleRadius?: number;
+		/** Site circle color (default: '#3b82f6') */
+		circleColor?: string;
+		/** Selected site color (default: '#ef4444') */
+		selectedColor?: string;
+		/** Hovered site color (default: '#8b5cf6') */
+		hoverColor?: string;
+	}
+
+	let {
+		namespace = 'cellular',
+		clickable = true,
+		showPopup = true,
+		circleRadius = 8,
+		circleColor = '#3b82f6',
+		selectedColor = '#ef4444',
+		hoverColor = '#8b5cf6'
+	}: Props = $props();
+
+	const mapStore = useMapbox();
+	const cellDataContext = useCellData();
+
+	let map: mapboxgl.Map | null = null;
+	let layerManager: LayerBase | null = null;
+	let popup: mapboxgl.Popup | null = null;
+	let unsubscribers: (() => void)[] = [];
+
+	onMount(() => {
+		// Subscribe to map store
+		const mapUnsub = mapStore.subscribe((m) => {
+			if (!m) return;
+			map = m;
+			initializeLayer();
+		});
+		unsubscribers.push(mapUnsub);
+
+		// Subscribe to sites data
+		const sitesUnsub = cellDataContext.sites.subscribe((sites) => {
+			if (map && layerManager) {
+				updateLayerData(sites);
+			}
+		});
+		unsubscribers.push(sitesUnsub);
+
+		// Subscribe to selection state
+		const selectionUnsub = cellDataContext.selectedSiteId.subscribe(() => {
+			if (map) {
+				updateLayerStyle();
+			}
+		});
+		unsubscribers.push(selectionUnsub);
+
+		// Subscribe to hover state
+		const hoverUnsub = cellDataContext.hoveredSiteId.subscribe(() => {
+			if (map) {
+				updateLayerStyle();
+			}
+		});
+		unsubscribers.push(hoverUnsub);
+	});
+
+	onDestroy(() => {
+		cleanup();
+		unsubscribers.forEach((unsub) => unsub());
+	});
+
+	function initializeLayer(): void {
+		if (!map) return;
+
+		layerManager = new LayerBase(map, {
+			namespace,
+			layerName: 'sites',
+			sourceName: 'sites'
+		});
+
+		// Add empty GeoJSON source
+		layerManager['addGeoJSONSource']({
+			type: 'FeatureCollection',
+			features: []
+		});
+
+		// Add circle layer
+		layerManager['addLayer']({
+			id: layerManager.getLayerId(),
+			type: 'circle',
+			source: layerManager.getSourceId(),
+			paint: {
+				'circle-radius': circleRadius,
+				'circle-color': [
+					'case',
+					['boolean', ['feature-state', 'selected'], false],
+					selectedColor,
+					['boolean', ['feature-state', 'hovered'], false],
+					hoverColor,
+					circleColor
+				],
+				'circle-stroke-width': 2,
+				'circle-stroke-color': '#ffffff'
+			}
+		});
+
+		// Add click handler
+		if (clickable) {
+			map.on('click', layerManager.getLayerId(), handleClick);
+			map.on('mouseenter', layerManager.getLayerId(), handleMouseEnter);
+			map.on('mouseleave', layerManager.getLayerId(), handleMouseLeave);
+		}
+
+		// Initial data load
+		const sites = cellDataContext.sites;
+		let currentSites: Site[] = [];
+		sites.subscribe((s) => {
+			currentSites = s;
+		})();
+		updateLayerData(currentSites);
+	}
+
+	function updateLayerData(sites: Site[]): void {
+		if (!layerManager) return;
+		const geojson = sitesToGeoJSON(sites);
+		layerManager['updateSource'](geojson);
+		updateLayerStyle();
+	}
+
+	function updateLayerStyle(): void {
+		if (!map || !layerManager) return;
+
+		const selectedId = cellDataContext.selectedSiteId;
+		const hoveredId = cellDataContext.hoveredSiteId;
+
+		let currentSelectedId: string | null = null;
+		let currentHoveredId: string | null = null;
+
+		selectedId.subscribe((id) => {
+			currentSelectedId = id;
+		})();
+		hoveredId.subscribe((id) => {
+			currentHoveredId = id;
+		})();
+
+		// Update feature states
+		const sites = cellDataContext.sites;
+		let currentSites: Site[] = [];
+		sites.subscribe((s) => {
+			currentSites = s;
+		})();
+
+		currentSites.forEach((site) => {
+			if (map) {
+				map.setFeatureState(
+					{
+						source: layerManager!.getSourceId(),
+						id: site.id
+					},
+					{
+						selected: site.id === currentSelectedId,
+						hovered: site.id === currentHoveredId
+					}
+				);
+			}
+		});
+	}
+
+	function handleClick(e: mapboxgl.MapLayerMouseEvent): void {
+		if (!e.features || e.features.length === 0) return;
+		const feature = e.features[0];
+		const siteId = feature.properties?.id;
+		if (siteId) {
+			cellDataContext.selectedSiteId.set(siteId);
+			cellDataContext.selectedCellId.set(null);
+
+			// Show popup if enabled
+			if (showPopup && map && e.lngLat) {
+				createSitePopup(feature.properties, e.lngLat);
+			}
+		}
+	}
+
+	function createSitePopup(siteProps: any, lngLat: mapboxgl.LngLat): void {
+		if (!map) return;
+
+		// Remove existing popup
+		if (popup) {
+			popup.remove();
+		}
+
+		// Build popup HTML
+		const fbands = siteProps.fbands ? JSON.parse(siteProps.fbands) : [];
+		const fbandsHtml = fbands.length > 0 
+			? `<div><strong>Bands:</strong> ${fbands.join(', ')} MHz</div>`
+			: '';
+
+		const html = `
+			<div style="font-family: system-ui, -apple-system, sans-serif; font-size: 13px;">
+				<h6 style="margin: 0 0 8px 0; font-size: 14px; font-weight: 600;">${siteProps.name}</h6>
+				<div style="color: #666; line-height: 1.6;">
+					<div><strong>ID:</strong> ${siteProps.id}</div>
+					<div><strong>Technology:</strong> <span class="badge bg-primary">${siteProps.technology}</span></div>
+					${fbandsHtml}
+					<div><strong>Provider:</strong> ${siteProps.provider}</div>
+					<div><strong>Group:</strong> ${siteProps.featureGroup}</div>
+					<div><strong>Cells:</strong> ${siteProps.cellNames ? JSON.parse(siteProps.cellNames).length : 0}</div>
+					<div style="margin-top: 8px; padding-top: 8px; border-top: 1px solid #eee; font-size: 11px;">
+						<strong>Coordinates:</strong><br/>
+						${siteProps.latitude.toFixed(6)}, ${siteProps.longitude.toFixed(6)}
+					</div>
+				</div>
+			</div>
+		`;
+
+		// Create and add popup
+		popup = new mapboxgl.Popup({
+			closeButton: true,
+			closeOnClick: false,
+			maxWidth: '300px'
+		})
+			.setLngLat(lngLat)
+			.setHTML(html)
+			.addTo(map);
+	}
+
+	function handleMouseEnter(e: mapboxgl.MapLayerMouseEvent): void {
+		if (!map) return;
+		map.getCanvas().style.cursor = 'pointer';
+		if (!e.features || e.features.length === 0) return;
+		const feature = e.features[0];
+		const siteId = feature.properties?.id;
+		if (siteId) {
+			cellDataContext.hoveredSiteId.set(siteId);
+		}
+	}
+
+	function handleMouseLeave(): void {
+		if (!map) return;
+		map.getCanvas().style.cursor = '';
+		cellDataContext.hoveredSiteId.set(null);
+	}
+
+	function cleanup(): void {
+		if (popup) {
+			popup.remove();
+			popup = null;
+		}
+		if (map && layerManager) {
+			if (clickable) {
+				map.off('click', layerManager.getLayerId(), handleClick);
+				map.off('mouseenter', layerManager.getLayerId(), handleMouseEnter);
+				map.off('mouseleave', layerManager.getLayerId(), handleMouseLeave);
+			}
+			layerManager.cleanup();
+		}
+	}
+</script>

package/dist/map/layers/SitesLayer.svelte.d.ts

@@ -0,0 +1,19 @@
+interface Props {
+    /** Namespace for layer IDs (default: 'cellular') */
+    namespace?: string;
+    /** Enable click to select sites (default: true) */
+    clickable?: boolean;
+    /** Show popup on click (default: true) */
+    showPopup?: boolean;
+    /** Site circle radius (default: 8) */
+    circleRadius?: number;
+    /** Site circle color (default: '#3b82f6') */
+    circleColor?: string;
+    /** Selected site color (default: '#ef4444') */
+    selectedColor?: string;
+    /** Hovered site color (default: '#8b5cf6') */
+    hoverColor?: string;
+}
+declare const SitesLayer: import("svelte").Component<Props, {}, "">;
+type SitesLayer = ReturnType<typeof SitesLayer>;
+export default SitesLayer;

package/dist/map/providers/CellDataProvider.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+	/**
+	 * CellDataProvider - Provides cellular data (sites, cells) and interaction state to child components
+	 *
+	 * Usage:
+	 * <CellDataProvider {sites} {cells}>
+	 *   <SitesLayer />
+	 *   <CellsLayer />
+	 * </CellDataProvider>
+	 */
+	import { setContext } from 'svelte';
+	import type { Site, Cell } from '../types';
+	import { CELL_DATA_CONTEXT_KEY } from '../types';
+	import { createCellDataStores } from '../stores/cellDataStore';
+
+	interface Props {
+		/** Array of cellular sites */
+		sites?: Site[];
+		/** Array of cellular cells/sectors */
+		cells?: Cell[];
+		/** Optional child content */
+		children?: import('svelte').Snippet;
+	}
+
+	let { sites = [], cells = [], children }: Props = $props();
+
+	// Create and set the cell data context in context
+	const cellDataContext = createCellDataStores(sites, cells);
+	setContext(CELL_DATA_CONTEXT_KEY, cellDataContext);
+
+	// Update stores when props change
+	$effect(() => {
+		cellDataContext.sites.set(sites);
+	});
+
+	$effect(() => {
+		cellDataContext.cells.set(cells);
+	});
+</script>
+
+{#if children}
+	{@render children()}
+{/if}

package/dist/map/providers/CellDataProvider.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Site, Cell } from '../types';
+interface Props {
+    /** Array of cellular sites */
+    sites?: Site[];
+    /** Array of cellular cells/sectors */
+    cells?: Cell[];
+    /** Optional child content */
+    children?: import('svelte').Snippet;
+}
+declare const CellDataProvider: import("svelte").Component<Props, {}, "">;
+type CellDataProvider = ReturnType<typeof CellDataProvider>;
+export default CellDataProvider;

package/dist/map/providers/MapboxProvider.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	/**
+	 * MapboxProvider - Provides Mapbox GL JS map instance to child components via context
+	 *
+	 * Usage:
+	 * <MapboxProvider {mapInstance}>
+	 *   <SitesLayer />
+	 *   <CellsLayer />
+	 * </MapboxProvider>
+	 */
+	import { setContext } from 'svelte';
+	import type mapboxgl from 'mapbox-gl';
+	import { MAP_CONTEXT_KEY } from '../types';
+	import { createMapStore } from '../stores/mapStore';
+
+	interface Props {
+		/** The Mapbox GL JS map instance */
+		mapInstance: mapboxgl.Map;
+		/** Optional child content */
+		children?: import('svelte').Snippet;
+	}
+
+	let { mapInstance, children }: Props = $props();
+
+	// Create and set the map store in context
+	const mapStore = createMapStore();
+	setContext(MAP_CONTEXT_KEY, mapStore);
+
+	// Update the store whenever the map instance changes
+	$effect(() => {
+		console.log('MapboxProvider: Setting map instance', mapInstance);
+		mapStore.set(mapInstance);
+	});
+</script>
+
+{#if children}
+	{@render children()}
+{/if}

package/dist/map/providers/MapboxProvider.svelte.d.ts

@@ -0,0 +1,9 @@
+interface Props {
+    /** The Mapbox GL JS map instance */
+    mapInstance: mapboxgl.Map;
+    /** Optional child content */
+    children?: import('svelte').Snippet;
+}
+declare const MapboxProvider: import("svelte").Component<Props, {}, "">;
+type MapboxProvider = ReturnType<typeof MapboxProvider>;
+export default MapboxProvider;

package/dist/map/providers/providerHelpers.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Provider helper utilities
+ */
+import type { MapStore } from '../types';
+import type { Site, Cell, CellDataContext } from '../types';
+/**
+ * Creates a new map store instance
+ */
+export declare function createMap(): MapStore;
+/**
+ * Creates a new cell data context
+ */
+export declare function createCellContext(sites?: Site[], cells?: Cell[]): CellDataContext;
+/**
+ * Validates that a map instance is ready for use
+ */
+export declare function isMapReady(map: unknown): boolean;

package/dist/map/providers/providerHelpers.js

@@ -0,0 +1,26 @@
+/**
+ * Provider helper utilities
+ */
+import { createMapStore } from '../stores/mapStore';
+import { createCellDataStores } from '../stores/cellDataStore';
+/**
+ * Creates a new map store instance
+ */
+export function createMap() {
+    return createMapStore();
+}
+/**
+ * Creates a new cell data context
+ */
+export function createCellContext(sites = [], cells = []) {
+    return createCellDataStores(sites, cells);
+}
+/**
+ * Validates that a map instance is ready for use
+ */
+export function isMapReady(map) {
+    if (!map)
+        return false;
+    // Check if it has the basic Mapbox GL Map interface
+    return typeof map.getStyle === 'function';
+}

package/dist/map/stores/cellDataStore.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Store factory and utilities for cellular data
+ */
+import type { Writable, Readable } from 'svelte/store';
+import type { Site, Cell, CellDataContext } from '../types';
+/**
+ * Creates a complete cell data context with all required stores
+ */
+export declare function createCellDataStores(initialSites?: Site[], initialCells?: Cell[]): CellDataContext;
+/**
+ * Creates a derived store that filters cells by site ID
+ */
+export declare function createCellsBySiteStore(cells: Writable<Cell[]>, siteId: Writable<string | null>): Readable<Cell[]>;
+/**
+ * Creates a derived store for the currently selected site
+ */
+export declare function createSelectedSiteStore(sites: Writable<Site[]>, selectedSiteId: Writable<string | null>): Readable<Site | null>;
+/**
+ * Creates a derived store for the currently selected cell
+ */
+export declare function createSelectedCellStore(cells: Writable<Cell[]>, selectedCellId: Writable<string | null>): Readable<Cell | null>;

package/dist/map/stores/cellDataStore.js

@@ -0,0 +1,53 @@
+/**
+ * Store factory and utilities for cellular data
+ */
+import { writable, derived } from 'svelte/store';
+/**
+ * Creates a complete cell data context with all required stores
+ */
+export function createCellDataStores(initialSites = [], initialCells = []) {
+    const sites = writable(initialSites);
+    const cells = writable(initialCells);
+    const selectedSiteId = writable(null);
+    const selectedCellId = writable(null);
+    const hoveredSiteId = writable(null);
+    const hoveredCellId = writable(null);
+    return {
+        sites,
+        cells,
+        selectedSiteId,
+        selectedCellId,
+        hoveredSiteId,
+        hoveredCellId
+    };
+}
+/**
+ * Creates a derived store that filters cells by site ID
+ */
+export function createCellsBySiteStore(cells, siteId) {
+    return derived([cells, siteId], ([$cells, $siteId]) => {
+        if (!$siteId)
+            return [];
+        return $cells.filter((cell) => cell.siteId === $siteId);
+    });
+}
+/**
+ * Creates a derived store for the currently selected site
+ */
+export function createSelectedSiteStore(sites, selectedSiteId) {
+    return derived([sites, selectedSiteId], ([$sites, $selectedSiteId]) => {
+        if (!$selectedSiteId)
+            return null;
+        return $sites.find((site) => site.id === $selectedSiteId) ?? null;
+    });
+}
+/**
+ * Creates a derived store for the currently selected cell
+ */
+export function createSelectedCellStore(cells, selectedCellId) {
+    return derived([cells, selectedCellId], ([$cells, $selectedCellId]) => {
+        if (!$selectedCellId)
+            return null;
+        return $cells.find((cell) => cell.id === $selectedCellId) ?? null;
+    });
+}

package/dist/map/stores/interactions.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Interaction state utilities and helpers
+ */
+import type { Writable } from 'svelte/store';
+/**
+ * Helper to clear all selections
+ */
+export declare function clearSelections(selectedSiteId: Writable<string | null>, selectedCellId: Writable<string | null>): void;
+/**
+ * Helper to clear all hover states
+ */
+export declare function clearHovers(hoveredSiteId: Writable<string | null>, hoveredCellId: Writable<string | null>): void;
+/**
+ * Helper to select a site and clear cell selection
+ */
+export declare function selectSite(siteId: string | null, selectedSiteId: Writable<string | null>, selectedCellId: Writable<string | null>): void;
+/**
+ * Helper to select a cell (and optionally its parent site)
+ */
+export declare function selectCell(cellId: string | null, selectedCellId: Writable<string | null>, parentSiteId?: string | null, selectedSiteId?: Writable<string | null>): void;

package/dist/map/stores/interactions.js

@@ -0,0 +1,33 @@
+/**
+ * Interaction state utilities and helpers
+ */
+/**
+ * Helper to clear all selections
+ */
+export function clearSelections(selectedSiteId, selectedCellId) {
+    selectedSiteId.set(null);
+    selectedCellId.set(null);
+}
+/**
+ * Helper to clear all hover states
+ */
+export function clearHovers(hoveredSiteId, hoveredCellId) {
+    hoveredSiteId.set(null);
+    hoveredCellId.set(null);
+}
+/**
+ * Helper to select a site and clear cell selection
+ */
+export function selectSite(siteId, selectedSiteId, selectedCellId) {
+    selectedSiteId.set(siteId);
+    selectedCellId.set(null);
+}
+/**
+ * Helper to select a cell (and optionally its parent site)
+ */
+export function selectCell(cellId, selectedCellId, parentSiteId, selectedSiteId) {
+    selectedCellId.set(cellId);
+    if (selectedSiteId && parentSiteId !== undefined) {
+        selectedSiteId.set(parentSiteId);
+    }
+}

package/dist/map/stores/mapStore.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Store factory and utilities for Mapbox instance
+ */
+import type { MapStore } from '../types';
+/**
+ * Creates a writable store for the Mapbox instance
+ */
+export declare function createMapStore(): MapStore;