@smartnet360/svelte-components 0.0.50 → 0.0.53

package/dist/map/utils/siteTreeUtils.js

@@ -0,0 +1,164 @@
+/**
+ * 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
+ */
+export function buildSiteTree(sites) {
+    // Group sites by provider, then by feature group
+    const providerGroups = new Map();
+    sites.forEach((site) => {
+        if (!providerGroups.has(site.provider)) {
+            providerGroups.set(site.provider, new Map());
+        }
+        const featureGroups = providerGroups.get(site.provider);
+        if (!featureGroups.has(site.featureGroup)) {
+            featureGroups.set(site.featureGroup, []);
+        }
+        featureGroups.get(site.featureGroup).push(site);
+    });
+    // Load saved state from localStorage
+    const savedState = loadTreeState();
+    // Build tree structure
+    const children = [];
+    // Sort providers alphabetically
+    const sortedProviders = Array.from(providerGroups.keys()).sort();
+    sortedProviders.forEach((provider) => {
+        const featureGroups = providerGroups.get(provider);
+        const providerChildren = [];
+        // Sort feature groups alphabetically
+        const sortedFeatureGroups = Array.from(featureGroups.keys()).sort();
+        sortedFeatureGroups.forEach((featureGroup) => {
+            const groupSites = featureGroups.get(featureGroup);
+            const nodeId = `${provider}:${featureGroup}`;
+            providerChildren.push({
+                id: nodeId,
+                label: `${featureGroup} (${groupSites.length})`,
+                defaultChecked: savedState[nodeId] ?? true, // Default checked
+                children: [],
+                metadata: {
+                    type: 'featureGroup',
+                    provider,
+                    featureGroup,
+                    siteIds: groupSites.map((s) => s.id)
+                }
+            });
+        });
+        const providerId = provider;
+        children.push({
+            id: providerId,
+            label: `${provider} (${Array.from(featureGroups.values()).flat().length})`,
+            defaultChecked: savedState[providerId] ?? true, // Default checked
+            children: providerChildren,
+            metadata: {
+                type: 'provider',
+                provider
+            }
+        });
+    });
+    // Root node
+    return {
+        id: 'all-sites',
+        label: `All Sites (${sites.length})`,
+        defaultChecked: savedState['all-sites'] ?? true, // Default checked
+        children,
+        metadata: {
+            type: 'root'
+        }
+    };
+}
+/**
+ * Filters sites based on checked tree paths
+ */
+export function getFilteredSites(checkedPaths, allSites) {
+    console.log('getFilteredSites called with paths:', checkedPaths);
+    const checkedGroups = new Set();
+    const checkedProviders = new Set();
+    checkedPaths.forEach((path) => {
+        // TreeView adds parent prefixes, so paths look like:
+        // "all-sites:Verizon:Verizon:Urban Macro"
+        // We need to extract the actual provider:featureGroup
+        // Split by separator
+        const parts = path.split(':');
+        // Remove "all-sites" prefix if present
+        const filteredParts = parts.filter(p => p !== 'all-sites');
+        if (filteredParts.length === 3) {
+            // Format: [provider, provider, featureGroup]
+            // The provider is duplicated, extract it as provider:featureGroup
+            const provider = filteredParts[1];
+            const featureGroup = filteredParts[2];
+            checkedGroups.add(`${provider}:${featureGroup}`);
+        }
+        else if (filteredParts.length === 1) {
+            // Just a provider
+            checkedProviders.add(filteredParts[0]);
+        }
+    });
+    console.log('Checked groups:', Array.from(checkedGroups));
+    console.log('Checked providers:', Array.from(checkedProviders));
+    // If "all-sites" is checked and it's the only thing, return all
+    if (checkedPaths.includes('all-sites') && checkedGroups.size === 0 && checkedProviders.size === 0) {
+        console.log('All sites root checked, returning all');
+        return allSites;
+    }
+    // If nothing is checked, return empty
+    if (checkedGroups.size === 0 && checkedProviders.size === 0) {
+        console.log('Nothing checked, returning empty');
+        return [];
+    }
+    // Filter sites based on checked groups or providers
+    const filtered = allSites.filter((site) => {
+        const key = `${site.provider}:${site.featureGroup}`;
+        // Include if the specific group is checked OR if the provider is checked
+        const included = checkedGroups.has(key) || checkedProviders.has(site.provider);
+        return included;
+    });
+    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/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@smartnet360/svelte-components",
-	"version": "0.0.50",
+	"version": "0.0.53",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",

package/dist/core/Map/Map.svelte

@@ -1,312 +0,0 @@
-<script lang="ts">
-	import { onMount } from 'svelte';
-	import mapboxgl from 'mapbox-gl';
-	import { MapboxOverlay } from '@deck.gl/mapbox';
-	import type { Layer } from '@deck.gl/core';
-	import { createMapStore, type MapStore } from './mapStore';
-	import { createSettingsStore } from '../Settings/store';
-	import { mapSettingsSchema } from './mapSettings';
-	import { MAP_STYLES, DEFAULT_MAP_OPTIONS, type MapOptions } from './types';
-	
-	interface Props {
-		accessToken: string;
-		initialOptions?: Partial<MapOptions>;
-		namespace?: string;
-		layers?: Layer[];
-		mapStore?: MapStore;
-		onMapLoaded?: (map: mapboxgl.Map) => void;
-	}
-	
-	let {
-		accessToken,
-		initialOptions = {},
-		namespace = 'map',
-		layers = [],
-		mapStore = $bindable(),
-		onMapLoaded
-	}: Props = $props();
-	
-	// Container element
-	let container = $state<HTMLDivElement>();
-	let map = $state<mapboxgl.Map>();
-	let overlay = $state<MapboxOverlay>();
-	let styleLoaded = $state(false);
-	
-	// Create stores if not provided
-	if (!mapStore) {
-		mapStore = createMapStore();
-	}
-	
-	// Create settings store
-	const settings = createSettingsStore(mapSettingsSchema, namespace);
-	
-	// Reactive: Update layers when prop changes
-	$effect(() => {
-		if (mapStore && layers.length > 0) {
-			mapStore.setLayers(layers);
-		}
-	});
-	
-	// Reactive: Update map style when settings change
-	$effect(() => {
-		if (!map || !styleLoaded || !$settings.appearance.style) return;
-		
-		const styleUrl = MAP_STYLES[$settings.appearance.style as keyof typeof MAP_STYLES];
-		if (styleUrl && map.getStyle()?.name !== styleUrl) {
-			styleLoaded = false; // Mark as not loaded during transition
-			map.setStyle(styleUrl);
-		}
-	});
-	
-	// Reactive: Update interaction handlers
-	$effect(() => {
-		const currentMap = map;
-		if (!currentMap) return;
-		
-		const handlers = [
-			{ name: 'dragRotate', value: $settings.interaction.dragRotate },
-			{ name: 'touchZoomRotate', value: $settings.interaction.touchZoomRotate },
-			{ name: 'scrollZoom', value: $settings.interaction.scrollZoom },
-			{ name: 'doubleClickZoom', value: $settings.interaction.doubleClickZoom },
-			{ name: 'dragPan', value: $settings.interaction.dragPan }
-		];
-		
-		handlers.forEach(({ name, value }) => {
-			const handler = currentMap[name as keyof mapboxgl.Map] as any;
-			if (handler) {
-				value ? handler.enable() : handler.disable();
-			}
-		});
-	});
-	
-	// Reactive: Update pitch and bearing
-	$effect(() => {
-		if (!map || !styleLoaded) return;
-		
-		map.setPitch($settings.view.pitch as number);
-		map.setBearing($settings.view.bearing as number);
-	});
-	
-	// Reactive: Toggle 3D buildings
-	$effect(() => {
-		if (!map || !styleLoaded) return;
-		
-		if ($settings.appearance.show3dBuildings) {
-			add3dBuildings();
-		} else if (map.getLayer('3d-buildings')) {
-			map.removeLayer('3d-buildings');
-		}
-	});
-	
-	// Reactive: Toggle terrain
-	$effect(() => {
-		if (!map || !styleLoaded) return;
-		
-		if ($settings.appearance.showTerrain) {
-			addTerrain();
-		} else if (map.getTerrain()) {
-			map.setTerrain(null);
-		}
-	});
-	
-	// One-time initialization using onMount (recommended for async/DOM-dependent setup)
-	onMount(() => {
-		if (!container) return;
-		
-		// Set Mapbox access token
-		mapboxgl.accessToken = accessToken;
-		
-		// Merge default options with initial options and settings
-		const options: MapOptions = {
-			...DEFAULT_MAP_OPTIONS,
-			...initialOptions,
-			accessToken
-		};
-		
-		// Initialize Mapbox map
-		map = new mapboxgl.Map({
-			container,
-			style: MAP_STYLES[$settings.appearance.style as keyof typeof MAP_STYLES] || options.style,
-			center: options.center,
-			zoom: options.zoom,
-			pitch: $settings.view.pitch as number,
-			bearing: $settings.view.bearing as number,
-			minZoom: $settings.view.minZoom as number,
-			maxZoom: $settings.view.maxZoom as number,
-			antialias: $settings.performance.antialias as boolean,
-			maxTileCacheSize: $settings.performance.maxTileCacheSize as number,
-			fadeDuration: $settings.performance.fadeDuration as number
-		});
-		
-		// Add controls based on settings
-		if ($settings.controls.showNavigationControls) {
-			map.addControl(new mapboxgl.NavigationControl(), 'top-right');
-		}
-		
-		if ($settings.controls.showScaleControl) {
-			map.addControl(new mapboxgl.ScaleControl(), 'bottom-left');
-		}
-		
-		if ($settings.controls.showFullscreenControl) {
-			map.addControl(new mapboxgl.FullscreenControl(), 'top-right');
-		}
-		
-		if ($settings.controls.showGeolocateControl) {
-			map.addControl(
-				new mapboxgl.GeolocateControl({
-					positionOptions: { enableHighAccuracy: true },
-					trackUserLocation: true,
-					showUserHeading: true
-				}),
-				'top-right'
-			);
-		}
-		
-		// Initialize Deck.GL overlay
-		overlay = new MapboxOverlay({
-			interleaved: true,
-			layers: layers
-		});
-		
-		map.addControl(overlay as any);
-		
-		// Store map and overlay instances
-		if (mapStore) {
-			mapStore.setMap(map);
-			mapStore.setOverlay(overlay);
-			mapStore.setLayers(layers);
-		}
-		
-		// Map load event
-		map.on('load', () => {
-			if (!map) return;
-			
-			styleLoaded = true;
-			
-			if (mapStore) {
-				mapStore.setLoaded(true);
-			}
-			
-			// Add 3D buildings if enabled
-			if ($settings.appearance.show3dBuildings) {
-				add3dBuildings();
-			}
-			
-			// Add terrain if enabled
-			if ($settings.appearance.showTerrain) {
-				addTerrain();
-			}
-			
-			// Call user callback
-			if (onMapLoaded) {
-				onMapLoaded(map);
-			}
-		});
-		
-		// Track style loading for dynamic style changes
-		map.on('style.load', () => {
-			styleLoaded = true;
-		});
-		
-		// Track view state changes
-		map.on('move', () => {
-			if (!map || !mapStore) return;
-			
-			mapStore.updateViewState({
-				center: map.getCenter().toArray() as [number, number],
-				zoom: map.getZoom(),
-				pitch: map.getPitch(),
-				bearing: map.getBearing()
-			});
-		});
-		
-		// Cleanup on destroy
-		return () => {
-			if (map) {
-				map.remove();
-			}
-		};
-	});
-	
-	function add3dBuildings() {
-		if (!map) return;
-		if (!map.getLayer('3d-buildings')) {
-			const mapLayers = map.getStyle().layers;
-			const labelLayerId = mapLayers?.find(
-				(layer) => layer.type === 'symbol' && layer.layout?.['text-field']
-			)?.id;
-			
-			map.addLayer(
-				{
-					id: '3d-buildings',
-					source: 'composite',
-					'source-layer': 'building',
-					filter: ['==', 'extrude', 'true'],
-					type: 'fill-extrusion',
-					minzoom: 15,
-					paint: {
-						'fill-extrusion-color': '#aaa',
-						'fill-extrusion-height': [
-							'interpolate',
-							['linear'],
-							['zoom'],
-							15,
-							0,
-							15.05,
-							['get', 'height']
-						],
-						'fill-extrusion-base': [
-							'interpolate',
-							['linear'],
-							['zoom'],
-							15,
-							0,
-							15.05,
-							['get', 'min_height']
-						],
-						'fill-extrusion-opacity': 0.6
-					}
-				},
-				labelLayerId
-			);
-		}
-	}
-	
-	function addTerrain() {
-		if (!map) return;
-		if (!map.getSource('mapbox-dem')) {
-			map.addSource('mapbox-dem', {
-				type: 'raster-dem',
-				url: 'mapbox://mapbox.mapbox-terrain-dem-v1',
-				tileSize: 512,
-				maxzoom: 14
-			});
-			
-			map.setTerrain({ source: 'mapbox-dem', exaggeration: 1.5 });
-		}
-	}
-	
-	// Export settings store for external access
-	export { settings };
-</script>
-
-
-
-<div class="map-container">
-	<div bind:this={container} class="map"></div>
-</div>
-
-<style>
-	.map-container {
-		width: 100%;
-		height: 100%;
-		position: relative;
-	}
-	
-	.map {
-		width: 100%;
-		height: 100%;
-	}
-	
-	/* Import Mapbox CSS - This should be in your app's global CSS */
-</style>

package/dist/core/Map/Map.svelte.d.ts

@@ -1,230 +0,0 @@
-import type { Layer } from '@deck.gl/core';
-import { type MapStore } from './mapStore';
-import { type MapOptions } from './types';
-interface Props {
-    accessToken: string;
-    initialOptions?: Partial<MapOptions>;
-    namespace?: string;
-    layers?: Layer[];
-    mapStore?: MapStore;
-    onMapLoaded?: (map: mapboxgl.Map) => void;
-}
-declare const Map: import("svelte").Component<Props, {
-    settings: {
-        subscribe: (this: void, run: import("svelte/store").Subscriber<import("..").InferSettingsType<{
-            segments: ({
-                id: string;
-                title: string;
-                icon: string;
-                description: string;
-                fields: ({
-                    id: string;
-                    type: "select";
-                    label: string;
-                    description: string;
-                    defaultValue: string;
-                    options: {
-                        value: string;
-                        label: string;
-                        description: string;
-                    }[];
-                } | {
-                    id: string;
-                    type: "boolean";
-                    label: string;
-                    description: string;
-                    defaultValue: true;
-                    options?: undefined;
-                } | {
-                    id: string;
-                    type: "boolean";
-                    label: string;
-                    description: string;
-                    defaultValue: false;
-                    options?: undefined;
-                })[];
-            } | {
-                id: string;
-                title: string;
-                icon: string;
-                description: string;
-                fields: ({
-                    id: string;
-                    type: "range";
-                    label: string;
-                    description: string;
-                    defaultValue: number;
-                    min: number;
-                    max: number;
-                    step: number;
-                    showValue: true;
-                    unit: string;
-                } | {
-                    id: string;
-                    type: "number";
-                    label: string;
-                    description: string;
-                    defaultValue: number;
-                    min: number;
-                    max: number;
-                    step: number;
-                    showValue?: undefined;
-                    unit?: undefined;
-                })[];
-            } | {
-                id: string;
-                title: string;
-                icon: string;
-                description: string;
-                fields: ({
-                    id: string;
-                    type: "select";
-                    label: string;
-                    description: string;
-                    defaultValue: number;
-                    options: {
-                        value: number;
-                        label: string;
-                    }[];
-                    min?: undefined;
-                    max?: undefined;
-                    step?: undefined;
-                    unit?: undefined;
-                } | {
-                    id: string;
-                    type: "boolean";
-                    label: string;
-                    description: string;
-                    defaultValue: true;
-                    options?: undefined;
-                    min?: undefined;
-                    max?: undefined;
-                    step?: undefined;
-                    unit?: undefined;
-                } | {
-                    id: string;
-                    type: "number";
-                    label: string;
-                    description: string;
-                    defaultValue: number;
-                    min: number;
-                    max: number;
-                    step: number;
-                    unit: string;
-                    options?: undefined;
-                })[];
-            })[];
-        }>>, invalidate?: () => void) => import("svelte/store").Unsubscriber;
-        update: (segmentId: string, fieldId: string, value: any) => void;
-        updateSegment: (segmentId: string, values: Record<string, any>) => void;
-        reset: (segmentId: string, fieldId: string) => void;
-        resetSegment: (segmentId: string) => void;
-        resetAll: () => void;
-        getValues: () => import("..").InferSettingsType<{
-            segments: ({
-                id: string;
-                title: string;
-                icon: string;
-                description: string;
-                fields: ({
-                    id: string;
-                    type: "select";
-                    label: string;
-                    description: string;
-                    defaultValue: string;
-                    options: {
-                        value: string;
-                        label: string;
-                        description: string;
-                    }[];
-                } | {
-                    id: string;
-                    type: "boolean";
-                    label: string;
-                    description: string;
-                    defaultValue: true;
-                    options?: undefined;
-                } | {
-                    id: string;
-                    type: "boolean";
-                    label: string;
-                    description: string;
-                    defaultValue: false;
-                    options?: undefined;
-                })[];
-            } | {
-                id: string;
-                title: string;
-                icon: string;
-                description: string;
-                fields: ({
-                    id: string;
-                    type: "range";
-                    label: string;
-                    description: string;
-                    defaultValue: number;
-                    min: number;
-                    max: number;
-                    step: number;
-                    showValue: true;
-                    unit: string;
-                } | {
-                    id: string;
-                    type: "number";
-                    label: string;
-                    description: string;
-                    defaultValue: number;
-                    min: number;
-                    max: number;
-                    step: number;
-                    showValue?: undefined;
-                    unit?: undefined;
-                })[];
-            } | {
-                id: string;
-                title: string;
-                icon: string;
-                description: string;
-                fields: ({
-                    id: string;
-                    type: "select";
-                    label: string;
-                    description: string;
-                    defaultValue: number;
-                    options: {
-                        value: number;
-                        label: string;
-                    }[];
-                    min?: undefined;
-                    max?: undefined;
-                    step?: undefined;
-                    unit?: undefined;
-                } | {
-                    id: string;
-                    type: "boolean";
-                    label: string;
-                    description: string;
-                    defaultValue: true;
-                    options?: undefined;
-                    min?: undefined;
-                    max?: undefined;
-                    step?: undefined;
-                    unit?: undefined;
-                } | {
-                    id: string;
-                    type: "number";
-                    label: string;
-                    description: string;
-                    defaultValue: number;
-                    min: number;
-                    max: number;
-                    step: number;
-                    unit: string;
-                    options?: undefined;
-                })[];
-            })[];
-        }>;
-    };
-}, "mapStore">;
-type Map = ReturnType<typeof Map>;
-export default Map;