@smartnet360/svelte-components 0.0.53 → 0.0.55

package/dist/map-v2/features/sites/layers/SitesLayer.svelte

@@ -0,0 +1,277 @@
+<script lang="ts">
+	/**
+	 * SitesLayer - Visualizes cellular sites as circles on the map
+	 *
+	 * Reads from siteStore to get filtered sites and visual properties.
+	 * Completely independent from cell data.
+	 *
+	 * Features:
+	 * - Displays sites as circles with configurable size, color, opacity
+	 * - Supports labels (optional)
+	 * - Click to show popup
+	 * - Hover effects
+	 */
+	import { onMount, onDestroy } from 'svelte';
+	import mapboxgl from 'mapbox-gl';
+	import { useMapbox } from '../../../core/hooks/useMapbox';
+	import { sitesToGeoJSON } from '../utils/siteGeoJSON';
+	import {
+		addSourceIfMissing,
+		addLayerIfMissing,
+		updateGeoJSONSource,
+		removeLayerAndSource,
+		generateLayerId,
+		generateSourceId
+	} from '../../../shared/utils/mapboxHelpers';
+	import type { SiteStoreContext } from '../stores/siteStoreContext.svelte';
+
+	interface Props {
+		/** Site store instance */
+		store: SiteStoreContext;
+		/** Namespace for layer IDs (default: 'sites') */
+		namespace?: string;
+		/** Enable click to show popup (default: true) */
+		clickable?: boolean;
+	}
+
+	let {
+		store,
+		namespace = 'sites',
+		clickable = true
+	}: Props = $props();
+
+	const mapStore = useMapbox();
+
+	let map: mapboxgl.Map | null = null;
+	let popup: mapboxgl.Popup | null = null;
+	let hoveredSiteId: string | null = null;
+
+	const layerId = generateLayerId(namespace, 'circles');
+	const labelLayerId = generateLayerId(namespace, 'labels');
+	const sourceId = generateSourceId(namespace, 'source');
+
+	// Watch store changes and update layer
+	$effect(() => {
+		// Access store properties to track them
+		const filteredSites = store.filteredSites;
+		const size = store.size;
+		const color = store.color;
+		const opacity = store.opacity;
+		const showLabels = store.showLabels;
+		const labelSize = store.labelSize;
+		const labelColor = store.labelColor;
+		
+		if (map) {
+			updateLayer();
+		}
+	});
+
+	onMount(() => {
+		const mapUnsub = mapStore.subscribe((m: mapboxgl.Map | null) => {
+			if (!m) return;
+			map = m;
+			// Map is guaranteed to be ready (style loaded) by MapboxProvider
+			initializeLayer();
+			
+			// Re-initialize layer when map style changes
+			// Mapbox removes all custom layers/sources when setStyle() is called
+			map.on('style.load', initializeLayer);
+		});
+
+		return () => {
+			mapUnsub();
+			cleanup();
+		};
+	});
+
+	onDestroy(() => {
+		cleanup();
+	});
+
+	function initializeLayer(): void {
+		if (!map) return;
+
+		// Add empty GeoJSON source
+		addSourceIfMissing(map, sourceId, {
+			type: 'geojson',
+			data: {
+				type: 'FeatureCollection',
+				features: []
+			}
+		});
+
+		// Add circle layer with current store values
+		addLayerIfMissing(map, {
+			id: layerId,
+			type: 'circle',
+			source: sourceId,
+			paint: {
+				'circle-radius': store.size,
+				'circle-color': store.color,
+				'circle-opacity': store.opacity,
+				'circle-stroke-width': 2,
+				'circle-stroke-color': '#ffffff',
+				'circle-stroke-opacity': store.opacity
+			}
+		});
+
+		// Add label layer
+		addLayerIfMissing(map, {
+			id: labelLayerId,
+			type: 'symbol',
+			source: sourceId,
+			layout: {
+				'text-field': ['get', 'name'],
+				'text-size': store.labelSize,
+				'text-offset': [0, 1.5],
+				'text-anchor': 'top',
+				'text-font': ['Open Sans Regular', 'Arial Unicode MS Regular']
+			},
+			paint: {
+				'text-color': store.labelColor,
+				'text-halo-color': '#fff',
+				'text-halo-width': 1.5
+			}
+		});
+
+		// Set initial visibility
+		map.setLayoutProperty(labelLayerId, 'visibility', store.showLabels ? 'visible' : 'none');
+
+		// Add event handlers
+		if (clickable) {
+			map.on('click', layerId, handleClick);
+			map.on('mouseenter', layerId, handleMouseEnter);
+			map.on('mouseleave', layerId, handleMouseLeave);
+		}
+
+		// Initial data load
+		updateLayer();
+	}
+
+	function updateLayer(): void {
+		if (!map) return;
+
+		// Update data
+		const geojson = sitesToGeoJSON(store.filteredSites);
+		updateGeoJSONSource(map, sourceId, geojson);
+
+		// Update circle visual properties
+		map.setPaintProperty(layerId, 'circle-radius', store.size);
+		map.setPaintProperty(layerId, 'circle-color', store.color);
+		map.setPaintProperty(layerId, 'circle-opacity', store.opacity);
+		map.setPaintProperty(layerId, 'circle-stroke-opacity', store.opacity);
+
+		// Update label properties
+		map.setLayoutProperty(labelLayerId, 'text-size', store.labelSize);
+		map.setPaintProperty(labelLayerId, 'text-color', store.labelColor);
+		map.setLayoutProperty(labelLayerId, 'visibility', store.showLabels ? 'visible' : 'none');
+	}
+
+	function handleClick(e: mapboxgl.MapLayerMouseEvent): void {
+		if (!e.features || e.features.length === 0) return;
+		const feature = e.features[0];
+		const siteProps = feature.properties;
+		if (siteProps && e.lngLat) {
+			createSitePopup(siteProps, e.lngLat);
+		}
+	}
+
+	function createSitePopup(siteProps: any, lngLat: mapboxgl.LngLat): void {
+		if (!map) return;
+
+		// Remove existing popup
+		if (popup) {
+			popup.remove();
+		}
+
+		// Parse arrays if needed
+		const fbands = siteProps.fbands ? JSON.parse(siteProps.fbands) : [];
+		const cellNames = siteProps.cellNames ? JSON.parse(siteProps.cellNames) : [];
+		
+		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> ${cellNames.length}</div>
+					<div style="margin-top: 8px; padding-top: 8px; border-top: 1px solid #eee; font-size: 11px;">
+						<strong>Coordinates:</strong><br/>
+						${Number(siteProps.latitude).toFixed(6)}, ${Number(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) {
+			hoveredSiteId = siteId;
+			// Optional: Add hover effect via feature state
+			map.setFeatureState(
+				{ source: sourceId, id: siteId },
+				{ hovered: true }
+			);
+		}
+	}
+
+	function handleMouseLeave(): void {
+		if (!map) return;
+		map.getCanvas().style.cursor = '';
+		
+		if (hoveredSiteId) {
+			// Remove hover state
+			map.removeFeatureState(
+				{ source: sourceId, id: hoveredSiteId },
+				'hovered'
+			);
+			hoveredSiteId = null;
+		}
+	}
+
+	function cleanup(): void {
+		if (popup) {
+			popup.remove();
+			popup = null;
+		}
+		
+		if (map) {
+			// Remove style.load listener
+			map.off('style.load', initializeLayer);
+			
+			if (clickable) {
+				map.off('click', layerId, handleClick);
+				map.off('mouseenter', layerId, handleMouseEnter);
+				map.off('mouseleave', layerId, handleMouseLeave);
+			}
+			
+			// Remove layers and source
+			removeLayerAndSource(map, labelLayerId, sourceId);
+			removeLayerAndSource(map, layerId, sourceId);
+		}
+	}
+</script>

package/dist/map-v2/features/sites/layers/SitesLayer.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { SiteStoreContext } from '../stores/siteStoreContext.svelte';
+interface Props {
+    /** Site store instance */
+    store: SiteStoreContext;
+    /** Namespace for layer IDs (default: 'sites') */
+    namespace?: string;
+    /** Enable click to show popup (default: true) */
+    clickable?: boolean;
+}
+declare const SitesLayer: import("svelte").Component<Props, {}, "">;
+type SitesLayer = ReturnType<typeof SitesLayer>;
+export default SitesLayer;

package/dist/map-v2/features/sites/stores/siteStore.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Site store - State management for site feature
+ */
+import type { Writable } from 'svelte/store';
+import type { Site, SiteStoreValue } from '../types';
+/**
+ * Creates a site store with default values
+ */
+export declare function createSiteStore(initialSites?: Site[]): Writable<SiteStoreValue> & {
+    setAllSites: (sites: Site[]) => void;
+    setFilteredSites: (sites: Site[]) => void;
+    setSize: (size: number) => void;
+    setColor: (color: string) => void;
+    setOpacity: (opacity: number) => void;
+    setShowLabels: (show: boolean) => void;
+    reset: () => void;
+};
+export type SiteStore = ReturnType<typeof createSiteStore>;

package/dist/map-v2/features/sites/stores/siteStore.js

@@ -0,0 +1,36 @@
+/**
+ * Site store - State management for site feature
+ */
+import { writable } from 'svelte/store';
+/**
+ * Creates a site store with default values
+ */
+export function createSiteStore(initialSites = []) {
+    const defaultState = {
+        allSites: initialSites,
+        filteredSites: initialSites,
+        size: 10,
+        color: '#3b82f6',
+        opacity: 1.0,
+        showLabels: false,
+        showOnHover: true,
+        strokeWidth: 2,
+        strokeColor: '#ffffff'
+    };
+    const { subscribe, update, set } = writable(defaultState);
+    return {
+        subscribe,
+        set,
+        update,
+        // Data setters
+        setAllSites: (sites) => update((s) => ({ ...s, allSites: sites })),
+        setFilteredSites: (sites) => update((s) => ({ ...s, filteredSites: sites })),
+        // Visual property setters
+        setSize: (size) => update((s) => ({ ...s, size })),
+        setColor: (color) => update((s) => ({ ...s, color })),
+        setOpacity: (opacity) => update((s) => ({ ...s, opacity })),
+        setShowLabels: (show) => update((s) => ({ ...s, showLabels: show })),
+        // Reset to defaults
+        reset: () => set({ ...defaultState, allSites: initialSites, filteredSites: initialSites })
+    };
+}

package/dist/map-v2/features/sites/stores/siteStoreContext.svelte.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Site Store Context - Bindable reactive state for site feature
+ *
+ * Uses Svelte 5 runes ($state) to create a directly bindable reactive object.
+ * This allows components to use bind:value instead of manual event handlers.
+ */
+import type { Site, SiteStoreValue } from '../types';
+export declare function createSiteStoreContext(initialSites?: Site[]): {
+    allSites: Site[];
+    filteredSites: Site[];
+    size: number;
+    color: string;
+    opacity: number;
+    showLabels: boolean;
+    showOnHover: boolean;
+    labelSize: number;
+    labelColor: string;
+    strokeWidth: number;
+    strokeColor: string;
+    setAllSites(sites: Site[]): void;
+    setFilteredSites(sites: Site[]): void;
+    setSize(size: number): void;
+    setColor(color: string): void;
+    setOpacity(opacity: number): void;
+    setShowLabels(show: boolean): void;
+    reset(): void;
+    getState(): SiteStoreValue;
+};
+export type SiteStoreContext = ReturnType<typeof createSiteStoreContext>;

package/dist/map-v2/features/sites/stores/siteStoreContext.svelte.js

@@ -0,0 +1,73 @@
+/**
+ * Site Store Context - Bindable reactive state for site feature
+ *
+ * Uses Svelte 5 runes ($state) to create a directly bindable reactive object.
+ * This allows components to use bind:value instead of manual event handlers.
+ */
+export function createSiteStoreContext(initialSites = []) {
+    // Internal reactive state
+    let state = $state({
+        allSites: initialSites,
+        filteredSites: initialSites,
+        size: 10,
+        color: '#3b82f6',
+        opacity: 1.0,
+        showLabels: false,
+        showOnHover: true,
+        labelSize: 12,
+        labelColor: '#000000',
+        strokeWidth: 2,
+        strokeColor: '#ffffff'
+    });
+    // Return object with getters/setters for direct binding
+    return {
+        // Bindable properties with getters/setters
+        get allSites() { return state.allSites; },
+        set allSites(value) { state.allSites = value; },
+        get filteredSites() { return state.filteredSites; },
+        set filteredSites(value) { state.filteredSites = value; },
+        get size() { return state.size; },
+        set size(value) { state.size = value; },
+        get color() { return state.color; },
+        set color(value) { state.color = value; },
+        get opacity() { return state.opacity; },
+        set opacity(value) { state.opacity = value; },
+        get showLabels() { return state.showLabels; },
+        set showLabels(value) { state.showLabels = value; },
+        get showOnHover() { return state.showOnHover; },
+        set showOnHover(value) { state.showOnHover = value; },
+        get labelSize() { return state.labelSize; },
+        set labelSize(value) { state.labelSize = value; },
+        get labelColor() { return state.labelColor; },
+        set labelColor(value) { state.labelColor = value; },
+        get strokeWidth() { return state.strokeWidth ?? 2; },
+        set strokeWidth(value) { state.strokeWidth = value; },
+        get strokeColor() { return state.strokeColor ?? '#ffffff'; },
+        set strokeColor(value) { state.strokeColor = value; },
+        // Convenience methods (optional, but nice to have)
+        setAllSites(sites) { state.allSites = sites; },
+        setFilteredSites(sites) { state.filteredSites = sites; },
+        setSize(size) { state.size = size; },
+        setColor(color) { state.color = color; },
+        setOpacity(opacity) { state.opacity = opacity; },
+        setShowLabels(show) { state.showLabels = show; },
+        // Reset to defaults
+        reset() {
+            state.allSites = initialSites;
+            state.filteredSites = initialSites;
+            state.size = 10;
+            state.color = '#3b82f6';
+            state.opacity = 1.0;
+            state.showLabels = false;
+            state.showOnHover = true;
+            state.labelSize = 12;
+            state.labelColor = '#000000';
+            state.strokeWidth = 2;
+            state.strokeColor = '#ffffff';
+        },
+        // Get snapshot of current state (useful for debugging)
+        getState() {
+            return { ...state };
+        }
+    };
+}

package/dist/map-v2/features/sites/types.d.ts

@@ -0,0 +1,36 @@
+/**
+ * Site feature types
+ */
+/**
+ * Cellular site/tower
+ */
+export interface Site {
+    id: string;
+    name: string;
+    latitude: number;
+    longitude: number;
+    fbands?: string[];
+    technology: string;
+    properties: Record<string, any>;
+    cellNames: string[];
+    provider: string;
+    featureGroup: string;
+}
+/**
+ * Site store state - contains all site data and visual properties
+ */
+export interface SiteStoreValue {
+    allSites: Site[];
+    filteredSites: Site[];
+    size: number;
+    color: string;
+    opacity: number;
+    showLabels: boolean;
+    showOnHover: boolean;
+    labelSize: number;
+    labelColor: string;
+    hoverColor?: string;
+    selectedColor?: string;
+    strokeWidth?: number;
+    strokeColor?: string;
+}

package/dist/map-v2/features/sites/types.js

@@ -0,0 +1,4 @@
+/**
+ * Site feature types
+ */
+export {};

package/dist/map-v2/features/sites/utils/siteGeoJSON.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Site GeoJSON utilities
+ */
+import type { Site } from '../types';
+/**
+ * GeoJSON Feature for a site (Point geometry)
+ */
+export interface SiteFeature {
+    type: 'Feature';
+    geometry: {
+        type: 'Point';
+        coordinates: [number, number];
+    };
+    properties: Site;
+}
+/**
+ * GeoJSON FeatureCollection
+ */
+export interface FeatureCollection<T> {
+    type: 'FeatureCollection';
+    features: T[];
+}
+/**
+ * Converts an array of sites to a GeoJSON FeatureCollection
+ * Sites are represented as Point features (circles will be drawn by Mapbox)
+ */
+export declare function sitesToGeoJSON(sites: Site[]): FeatureCollection<SiteFeature>;
+/**
+ * Converts a single site to a GeoJSON Feature
+ */
+export declare function siteToFeature(site: Site): SiteFeature;

package/dist/map-v2/features/sites/utils/siteGeoJSON.js

@@ -0,0 +1,34 @@
+/**
+ * Site GeoJSON utilities
+ */
+/**
+ * Converts an array of sites to a GeoJSON FeatureCollection
+ * Sites are represented as Point features (circles will be drawn by Mapbox)
+ */
+export function sitesToGeoJSON(sites) {
+    const features = sites.map((site) => ({
+        type: 'Feature',
+        geometry: {
+            type: 'Point',
+            coordinates: [site.longitude, site.latitude]
+        },
+        properties: site
+    }));
+    return {
+        type: 'FeatureCollection',
+        features
+    };
+}
+/**
+ * Converts a single site to a GeoJSON Feature
+ */
+export function siteToFeature(site) {
+    return {
+        type: 'Feature',
+        geometry: {
+            type: 'Point',
+            coordinates: [site.longitude, site.latitude]
+        },
+        properties: site
+    };
+}

package/dist/map-v2/features/sites/utils/siteTreeUtils.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Utilities for building and managing site filter tree
+ */
+import type { Site } from '../types';
+import type { TreeNode } from '../../../../core/TreeView/tree.model';
+/**
+ * Builds a hierarchical tree from flat site array
+ * Structure: All Sites -> Provider -> Feature Group
+ */
+export declare function buildSiteTree(sites: Site[]): TreeNode;
+/**
+ * Filters sites based on checked tree paths
+ */
+export declare function getFilteredSites(checkedPaths: string[], allSites: Site[]): Site[];

package/dist/{map → map-v2/features/sites}/utils/siteTreeUtils.js

@@ -1,7 +1,6 @@
 /**
  * Utilities for building and managing site filter tree
  */
-const STORAGE_PREFIX = 'cellular:siteFilter';
 /**
  * Builds a hierarchical tree from flat site array
  * Structure: All Sites -> Provider -> Feature Group
@@ -19,8 +18,6 @@ export function buildSiteTree(sites) {
         }
         featureGroups.get(site.featureGroup).push(site);
     });
-    // Load saved state from localStorage
-    const savedState = loadTreeState();
     // Build tree structure
     const children = [];
     // Sort providers alphabetically
@@ -36,7 +33,7 @@ export function buildSiteTree(sites) {
             providerChildren.push({
                 id: nodeId,
                 label: `${featureGroup} (${groupSites.length})`,
-                defaultChecked: savedState[nodeId] ?? true, // Default checked
+                defaultChecked: true,
                 children: [],
                 metadata: {
                     type: 'featureGroup',
@@ -50,7 +47,7 @@ export function buildSiteTree(sites) {
         children.push({
             id: providerId,
             label: `${provider} (${Array.from(featureGroups.values()).flat().length})`,
-            defaultChecked: savedState[providerId] ?? true, // Default checked
+            defaultChecked: true,
             children: providerChildren,
             metadata: {
                 type: 'provider',
@@ -62,7 +59,7 @@ export function buildSiteTree(sites) {
     return {
         id: 'all-sites',
         label: `All Sites (${sites.length})`,
-        defaultChecked: savedState['all-sites'] ?? true, // Default checked
+        defaultChecked: true,
         children,
         metadata: {
             type: 'root'
@@ -118,47 +115,3 @@ export function getFilteredSites(checkedPaths, allSites) {
     console.log('Filtered:', filtered.length, 'of', allSites.length, 'sites');
     return filtered;
 }
-/**
- * Saves tree checked paths to localStorage
- */
-export function saveTreeState(checkedPaths) {
-    try {
-        localStorage.setItem(STORAGE_PREFIX, JSON.stringify(checkedPaths));
-    }
-    catch (error) {
-        console.warn('Failed to save tree state to localStorage:', error);
-    }
-}
-/**
- * Loads tree state from localStorage
- * Returns map of node IDs to checked state
- */
-export function loadTreeState() {
-    try {
-        const saved = localStorage.getItem(STORAGE_PREFIX);
-        if (saved) {
-            const paths = JSON.parse(saved);
-            // Convert paths to map for easier lookup during tree building
-            const stateMap = {};
-            paths.forEach((path) => {
-                stateMap[path] = true;
-            });
-            return stateMap;
-        }
-    }
-    catch (error) {
-        console.warn('Failed to load tree state from localStorage:', error);
-    }
-    return {};
-}
-/**
- * Clears saved tree state
- */
-export function clearTreeState() {
-    try {
-        localStorage.removeItem(STORAGE_PREFIX);
-    }
-    catch (error) {
-        console.warn('Failed to clear tree state from localStorage:', error);
-    }
-}

package/dist/map-v2/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Map V2 - Feature-Based Cellular Visualization Library
+ *
+ * A decoupled, feature-based architecture for Mapbox cellular network visualization.
+ * Each feature (sites, cells) is completely independent with its own store, layers, and controls.
+ */
+export { type MapStore, MAP_CONTEXT_KEY, MapboxProvider, MapStyleControl, createMapStore, useMapbox, tryUseMapbox } from './core';
+export { MapControl, addSourceIfMissing, removeSourceIfExists, addLayerIfMissing, removeLayerIfExists, updateGeoJSONSource, removeLayerAndSource, isStyleLoaded, waitForStyleLoad, setFeatureState, removeFeatureState, generateLayerId, generateSourceId } from './shared';
+export { type Site, type SiteStoreValue, createSiteStore, SitesLayer, SiteFilterControl, SiteSizeSlider, sitesToGeoJSON, siteToFeature, buildSiteTree, getFilteredSites } from './features/sites';
+export { DemoMap, demoSites } from './demo';