@smartnet360/svelte-components 0.0.54 → 0.0.56

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

@@ -0,0 +1,294 @@
+<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;
+		const labelOffset = store.labelOffset;
+		const labelProperty = store.labelProperty;
+		const groupColorMap = store.groupColorMap; // Track color map changes
+		
+		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': [
+					'coalesce',
+					['get', 'groupColor'], // Use group-specific color if available
+					store.color // Fallback to global color
+				],
+				'circle-opacity': store.opacity,
+				'circle-stroke-width': 2,
+				'circle-stroke-color': [
+					'coalesce',
+					['get', 'groupColor'], // Use group-specific color if available
+					store.color // Fallback to global color
+				],
+				'circle-stroke-opacity': store.opacity
+			}
+		});
+
+		// Add label layer
+		addLayerIfMissing(map, {
+			id: labelLayerId,
+			type: 'symbol',
+			source: sourceId,
+			layout: {
+				'text-field': ['get', store.labelProperty],
+				'text-size': store.labelSize,
+				'text-offset': [0, store.labelOffset],
+				'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 with color information
+		const geojson = sitesToGeoJSON(store.filteredSites, store.groupColorMap);
+		updateGeoJSONSource(map, sourceId, geojson);
+
+		// Update circle visual properties
+		map.setPaintProperty(layerId, 'circle-radius', store.size);
+		map.setPaintProperty(layerId, 'circle-color', [
+			'coalesce',
+			['get', 'groupColor'],
+			store.color
+		]);
+		map.setPaintProperty(layerId, 'circle-opacity', store.opacity);
+		map.setPaintProperty(layerId, 'circle-stroke-opacity', store.opacity);
+
+		// Update label properties
+		map.setLayoutProperty(labelLayerId, 'text-field', ['get', store.labelProperty]);
+		map.setLayoutProperty(labelLayerId, 'text-size', store.labelSize);
+		map.setLayoutProperty(labelLayerId, 'text-offset', [0, store.labelOffset]);
+		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,36 @@
+/**
+ * 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.
+ * Persists visual settings to localStorage.
+ */
+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;
+    labelOffset: number;
+    labelProperty: string;
+    strokeWidth: number;
+    strokeColor: string;
+    groupColorMap: Map<string, 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;
+    getGroupColor(groupKey: string): string | undefined;
+    setGroupColor(groupKey: string, color: string): void;
+    clearGroupColor(groupKey: string): void;
+    reset(): void;
+    getState(): SiteStoreValue;
+};
+export type SiteStoreContext = ReturnType<typeof createSiteStoreContext>;

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

@@ -0,0 +1,155 @@
+/**
+ * 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.
+ * Persists visual settings to localStorage.
+ */
+const STORAGE_KEY = 'siteVisualSettings';
+function loadSettings() {
+    if (typeof window === 'undefined')
+        return {};
+    try {
+        const saved = localStorage.getItem(STORAGE_KEY);
+        if (saved) {
+            return JSON.parse(saved);
+        }
+    }
+    catch (error) {
+        console.warn('Failed to load site settings from localStorage:', error);
+    }
+    return {};
+}
+function saveSettings(settings) {
+    if (typeof window === 'undefined')
+        return;
+    try {
+        localStorage.setItem(STORAGE_KEY, JSON.stringify(settings));
+    }
+    catch (error) {
+        console.warn('Failed to save site settings to localStorage:', error);
+    }
+}
+export function createSiteStoreContext(initialSites = []) {
+    // Load persisted settings
+    const persistedSettings = loadSettings();
+    // Convert persisted groupColors object back to Map
+    const initialColorMap = new Map();
+    if (persistedSettings.groupColors) {
+        Object.entries(persistedSettings.groupColors).forEach(([key, value]) => {
+            initialColorMap.set(key, value);
+        });
+    }
+    // Internal reactive state
+    let state = $state({
+        allSites: initialSites,
+        filteredSites: initialSites,
+        size: persistedSettings.size ?? 10,
+        color: persistedSettings.color ?? '#3b82f6',
+        opacity: persistedSettings.opacity ?? 1.0,
+        showLabels: persistedSettings.showLabels ?? false,
+        showOnHover: true,
+        labelSize: persistedSettings.labelSize ?? 12,
+        labelColor: persistedSettings.labelColor ?? '#000000',
+        labelOffset: persistedSettings.labelOffset ?? 1.5,
+        labelProperty: persistedSettings.labelProperty ?? 'name',
+        groupColorMap: initialColorMap,
+        strokeWidth: persistedSettings.strokeWidth ?? 2,
+        strokeColor: persistedSettings.strokeColor ?? '#ffffff'
+    });
+    // Auto-save settings when they change
+    $effect(() => {
+        // Convert Map to plain object for serialization
+        const groupColorsObj = {};
+        state.groupColorMap.forEach((color, key) => {
+            groupColorsObj[key] = color;
+        });
+        const settings = {
+            size: state.size,
+            color: state.color,
+            opacity: state.opacity,
+            showLabels: state.showLabels,
+            labelSize: state.labelSize,
+            labelColor: state.labelColor,
+            labelOffset: state.labelOffset,
+            labelProperty: state.labelProperty,
+            strokeWidth: state.strokeWidth ?? 2,
+            strokeColor: state.strokeColor ?? '#ffffff',
+            groupColors: groupColorsObj
+        };
+        saveSettings(settings);
+    });
+    // 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 labelOffset() { return state.labelOffset; },
+        set labelOffset(value) { state.labelOffset = value; },
+        get labelProperty() { return state.labelProperty; },
+        set labelProperty(value) { state.labelProperty = 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; },
+        get groupColorMap() { return state.groupColorMap; },
+        set groupColorMap(value) { state.groupColorMap = 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; },
+        // Group color methods
+        getGroupColor(groupKey) {
+            return state.groupColorMap.get(groupKey);
+        },
+        setGroupColor(groupKey, color) {
+            state.groupColorMap.set(groupKey, color);
+            // Trigger reactivity by reassigning
+            state.groupColorMap = new Map(state.groupColorMap);
+        },
+        clearGroupColor(groupKey) {
+            state.groupColorMap.delete(groupKey);
+            state.groupColorMap = new Map(state.groupColorMap);
+        },
+        // 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.labelOffset = 1.5;
+            state.labelProperty = 'name';
+            state.strokeWidth = 2;
+            state.strokeColor = '#ffffff';
+            state.groupColorMap = new Map();
+        },
+        // Get snapshot of current state (useful for debugging)
+        getState() {
+            return { ...state };
+        }
+    };
+}

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

@@ -0,0 +1,39 @@
+/**
+ * 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;
+    labelOffset: number;
+    labelProperty: string;
+    groupColorMap: Map<string, 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,33 @@
+/**
+ * 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)
+ * @param sites - Array of sites to convert
+ * @param colorMap - Optional map of group keys (provider:featureGroup) to colors
+ */
+export declare function sitesToGeoJSON(sites: Site[], colorMap?: Map<string, string>): 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,43 @@
+/**
+ * Site GeoJSON utilities
+ */
+/**
+ * Converts an array of sites to a GeoJSON FeatureCollection
+ * Sites are represented as Point features (circles will be drawn by Mapbox)
+ * @param sites - Array of sites to convert
+ * @param colorMap - Optional map of group keys (provider:featureGroup) to colors
+ */
+export function sitesToGeoJSON(sites, colorMap) {
+    const features = sites.map((site) => {
+        const groupKey = `${site.provider}:${site.featureGroup}`;
+        const groupColor = colorMap?.get(groupKey);
+        return {
+            type: 'Feature',
+            geometry: {
+                type: 'Point',
+                coordinates: [site.longitude, site.latitude]
+            },
+            properties: {
+                ...site,
+                groupColor // Add groupColor property for Mapbox styling
+            }
+        };
+    });
+    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,16 @@
+/**
+ * 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
+ * @param sites - Array of sites to build tree from
+ * @param colorMap - Optional map of group keys (provider:featureGroup) to colors
+ */
+export declare function buildSiteTree(sites: Site[], colorMap?: Map<string, string>): TreeNode;
+/**
+ * Filters sites based on checked tree paths
+ */
+export declare function getFilteredSites(checkedPaths: string[], allSites: Site[]): Site[];