@smartnet360/svelte-components 0.0.51 → 0.0.53

package/dist/map/controls/SiteFilterControl.svelte

@@ -0,0 +1,126 @@
+<script lang="ts">
+	/**
+	 * SiteFilterControl - TreeView-based site filtering control for Mapbox
+	 *
+	 * Displays a hierarchical tree: All Sites -> Provider -> Feature Group
+	 * Filters sites based on checked state and persists to localStorage
+	 *
+	 * Usage:
+	 * <SiteFilterControl 
+	 *   {sites} 
+	 *   bind:filteredSites 
+	 *   position="top-left"
+	 * />
+	 */
+	import { onMount } from 'svelte';
+	import type { Writable } from 'svelte/store';
+	import MapControl from './MapControl.svelte';
+	import TreeView from '../../core/TreeView/TreeView.svelte';
+	import { createTreeStore } from '../../core/TreeView/tree.store';
+	import { buildSiteTree, getFilteredSites, saveTreeState } from '../utils/siteTreeUtils';
+	import type { Site } from '../types';
+	import type { TreeStoreValue } from '../../core/TreeView/tree.model';
+
+	interface Props {
+		/** All sites to filter */
+		sites: Site[];
+		/** Filtered sites output */
+		filteredSites?: Site[];
+		/** Control position on map */
+		position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+		/** Control title */
+		title?: string;
+		/** Initially collapsed? */
+		initiallyCollapsed?: boolean;
+	}
+
+	let {
+		sites,
+		filteredSites = $bindable([]),
+		position = 'top-left',
+		title = 'Site Filter',
+		initiallyCollapsed = false
+	}: Props = $props();
+
+	let treeStore = $state<Writable<TreeStoreValue> | null>(null);
+	
+	// Initialize filteredSites with all sites immediately
+	if (filteredSites.length === 0 && sites.length > 0) {
+		filteredSites = [...sites];
+	}
+
+	// Build tree and create store when sites change (run only once on mount)
+	onMount(() => {
+		console.log('SiteFilterControl: Mounted with', sites.length, 'sites');
+		
+		if (sites.length > 0) {
+			console.log('SiteFilterControl: Building tree...');
+			const treeNodes = buildSiteTree(sites);
+
+			treeStore = createTreeStore({
+				nodes: [treeNodes],
+				namespace: 'cellular-site-filter',
+				persistState: true,
+				defaultExpandAll: false
+			});
+			
+			console.log('SiteFilterControl: Tree store created');
+
+			// Subscribe to tree changes and update filtered sites
+			if (treeStore) {
+				const unsub = treeStore.subscribe((store: TreeStoreValue) => {
+					const checkedPaths = store.getCheckedPaths();
+					console.log('TreeStore updated, checked paths:', checkedPaths);
+					
+					const newFilteredSites = getFilteredSites(checkedPaths, sites);
+					console.log('Filtered sites count:', newFilteredSites.length, 'of', sites.length);
+					
+					filteredSites = newFilteredSites;
+					
+					// Save state to our custom storage
+					saveTreeState(checkedPaths);
+				});
+
+				return () => unsub();
+			}
+		}
+	});
+</script>
+
+<MapControl {position} {title} collapsible={true} {initiallyCollapsed}>
+	{#if treeStore}
+		<div class="site-filter-tree">
+			<TreeView store={$treeStore} showControls={false} />
+			
+			<!-- <div class="site-filter-stats">
+				<small class="text-muted">
+					Showing {filteredSites.length} of {sites.length} sites
+				</small>
+			</div> -->
+		</div>
+	{:else}
+		<div class="text-muted small">Loading sites...</div>
+	{/if}
+</MapControl>
+
+<style>
+	.site-filter-tree {
+		min-width: 250px;
+		max-width: 300px;
+	}
+
+	.site-filter-stats {
+		margin-top: 8px;
+		padding-top: 8px;
+		border-top: 1px solid #dee2e6;
+		text-align: center;
+	}
+
+	:global(.site-filter-tree .tree-node-label) {
+		font-size: 13px;
+	}
+
+	:global(.site-filter-tree .tree-node-checkbox) {
+		margin-right: 6px;
+	}
+</style>

package/dist/map/controls/SiteFilterControl.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { Site } from '../types';
+interface Props {
+    /** All sites to filter */
+    sites: Site[];
+    /** Filtered sites output */
+    filteredSites?: Site[];
+    /** Control position on map */
+    position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    /** Control title */
+    title?: string;
+    /** Initially collapsed? */
+    initiallyCollapsed?: boolean;
+}
+declare const SiteFilterControl: import("svelte").Component<Props, {}, "filteredSites">;
+type SiteFilterControl = ReturnType<typeof SiteFilterControl>;
+export default SiteFilterControl;

package/dist/map/demo/DemoMap.svelte

@@ -0,0 +1,98 @@
+<script lang="ts">
+	/**
+	 * DemoMap - Complete demo component with map initialization and sample data
+	 */
+	import { onMount } from 'svelte';
+	import mapboxgl from 'mapbox-gl';
+	import 'mapbox-gl/dist/mapbox-gl.css';
+	
+	import MapboxProvider from '../providers/MapboxProvider.svelte';
+	import CellDataProvider from '../providers/CellDataProvider.svelte';
+	import SitesLayer from '../layers/SitesLayer.svelte';
+	import CellsLayer from '../layers/CellsLayer.svelte';
+	import SiteFilterControl from '../controls/SiteFilterControl.svelte';
+	import { demoSites, demoCells } from './demo-data';
+	import type { Site, Cell } from '../types';
+
+	interface Props {
+		/** Mapbox access token */
+		accessToken?: string;
+		/** Initial center coordinates [lng, lat] */
+		center?: [number, number];
+		/** Initial zoom level */
+		zoom?: number;
+	}
+
+	let { 
+		accessToken = '',
+		center = [-122.4194, 37.7749], // San Francisco
+		zoom = 12
+	}: Props = $props();
+
+	let mapContainer: HTMLDivElement;
+	let map = $state<mapboxgl.Map | null>(null);
+	let mapReady = $state(false);
+	
+	// Data
+	let sites = $state<Site[]>(demoSites);
+	let cells = $state<Cell[]>(demoCells);
+	let filteredSites = $state<Site[]>(sites);
+
+	onMount(() => {
+		// Initialize Mapbox map
+		map = new mapboxgl.Map({
+			container: mapContainer,
+			style: 'mapbox://styles/mapbox/streets-v12',
+			center,
+			zoom,
+			accessToken
+		});
+
+		// Add navigation controls
+		map.addControl(new mapboxgl.NavigationControl(), 'top-right');
+
+		// Wait for map to load
+		map.on('load', () => {
+			mapReady = true;
+		});
+
+		return () => {
+			map?.remove();
+		};
+	});
+</script>
+
+<div class="demo-map-container">
+	<div bind:this={mapContainer} class="w-100 h-100"></div>
+
+	{#if !mapReady}
+		<div class="position-absolute top-50 start-50 translate-middle bg-white p-4 rounded shadow">
+			<div class="spinner-border text-primary me-2" role="status">
+				<span class="visually-hidden">Loading...</span>
+			</div>
+			<span>Loading map...</span>
+		</div>
+	{/if}
+
+	{#if mapReady && map}
+		<MapboxProvider mapInstance={map}>
+			<CellDataProvider sites={filteredSites} {cells}>
+				<SitesLayer />
+				<!-- <CellsLayer /> -->
+				<SiteFilterControl {sites} bind:filteredSites position="top-left" />
+			</CellDataProvider>
+		</MapboxProvider>
+	{/if}
+</div>
+
+<style>
+	.demo-map-container {
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		width: 100%;
+		height: 100%;
+	}
+</style>

package/dist/map/demo/DemoMap.svelte.d.ts

@@ -0,0 +1,12 @@
+import 'mapbox-gl/dist/mapbox-gl.css';
+interface Props {
+    /** Mapbox access token */
+    accessToken?: string;
+    /** Initial center coordinates [lng, lat] */
+    center?: [number, number];
+    /** Initial zoom level */
+    zoom?: number;
+}
+declare const DemoMap: import("svelte").Component<Props, {}, "">;
+type DemoMap = ReturnType<typeof DemoMap>;
+export default DemoMap;

package/dist/map/demo/demo-data.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Demo cellular data for testing and examples
+ */
+import type { Site, Cell } from '../types';
+/**
+ * Sample cellular sites (San Francisco area)
+ */
+export declare const demoSites: Site[];
+/**
+ * Sample cellular cells/sectors
+ */
+export declare const demoCells: Cell[];

package/dist/map/demo/demo-data.js

@@ -0,0 +1,220 @@
+/**
+ * Demo cellular data for testing and examples
+ */
+/**
+ * Sample cellular sites (San Francisco area)
+ */
+export const demoSites = [
+    {
+        id: 'site-001',
+        name: 'Downtown Tower',
+        longitude: -122.4194,
+        latitude: 37.7749,
+        fbands: ['2100', '1800'],
+        technology: '5G',
+        properties: {
+            height: 45,
+            type: 'macro'
+        },
+        cellNames: ['cell-001-1', 'cell-001-2', 'cell-001-3'],
+        provider: 'Verizon',
+        featureGroup: 'Urban Macro'
+    },
+    {
+        id: 'site-002',
+        name: 'Financial District',
+        longitude: -122.4008,
+        latitude: 37.7946,
+        fbands: ['1800', '850'],
+        technology: 'LTE',
+        properties: {
+            height: 60,
+            type: 'macro'
+        },
+        cellNames: ['cell-002-1', 'cell-002-2', 'cell-002-3'],
+        provider: 'AT&T',
+        featureGroup: 'Urban Macro'
+    },
+    {
+        id: 'site-003',
+        name: 'Mission Bay',
+        longitude: -122.3912,
+        latitude: 37.7699,
+        fbands: ['2600'],
+        technology: '5G',
+        properties: {
+            height: 30,
+            type: 'micro'
+        },
+        cellNames: ['cell-003-1', 'cell-003-2'],
+        provider: 'T-Mobile',
+        featureGroup: 'Small Cell'
+    },
+    {
+        id: 'site-004',
+        name: 'Golden Gate Park',
+        longitude: -122.4862,
+        latitude: 37.7694,
+        fbands: ['850', '700'],
+        technology: 'LTE',
+        properties: {
+            height: 40,
+            type: 'macro'
+        },
+        cellNames: ['cell-004-1', 'cell-004-2', 'cell-004-3'],
+        provider: 'Verizon',
+        featureGroup: 'Rural Macro'
+    }
+];
+/**
+ * Sample cellular cells/sectors
+ */
+export const demoCells = [
+    // Site 001 - Downtown Tower (3 sectors)
+    {
+        id: 'cell-001-1',
+        siteId: 'site-001',
+        sector: 1,
+        azimuth: 0,
+        beamwidth: 65,
+        radius: 800,
+        properties: {
+            band: '2100MHz',
+            technology: '5G',
+            power: 40
+        }
+    },
+    {
+        id: 'cell-001-2',
+        siteId: 'site-001',
+        sector: 2,
+        azimuth: 120,
+        beamwidth: 65,
+        radius: 800,
+        properties: {
+            band: '2100MHz',
+            technology: '5G',
+            power: 40
+        }
+    },
+    {
+        id: 'cell-001-3',
+        siteId: 'site-001',
+        sector: 3,
+        azimuth: 240,
+        beamwidth: 65,
+        radius: 800,
+        properties: {
+            band: '2100MHz',
+            technology: '5G',
+            power: 40
+        }
+    },
+    // Site 002 - Financial District (3 sectors)
+    {
+        id: 'cell-002-1',
+        siteId: 'site-002',
+        sector: 1,
+        azimuth: 30,
+        beamwidth: 65,
+        radius: 700,
+        properties: {
+            band: '1800MHz',
+            technology: 'LTE',
+            power: 38
+        }
+    },
+    {
+        id: 'cell-002-2',
+        siteId: 'site-002',
+        sector: 2,
+        azimuth: 150,
+        beamwidth: 65,
+        radius: 700,
+        properties: {
+            band: '1800MHz',
+            technology: 'LTE',
+            power: 38
+        }
+    },
+    {
+        id: 'cell-002-3',
+        siteId: 'site-002',
+        sector: 3,
+        azimuth: 270,
+        beamwidth: 65,
+        radius: 700,
+        properties: {
+            band: '1800MHz',
+            technology: 'LTE',
+            power: 38
+        }
+    },
+    // Site 003 - Mission Bay (2 sectors, smaller coverage)
+    {
+        id: 'cell-003-1',
+        siteId: 'site-003',
+        sector: 1,
+        azimuth: 90,
+        beamwidth: 90,
+        radius: 400,
+        properties: {
+            band: '2600MHz',
+            technology: '5G',
+            power: 30
+        }
+    },
+    {
+        id: 'cell-003-2',
+        siteId: 'site-003',
+        sector: 2,
+        azimuth: 270,
+        beamwidth: 90,
+        radius: 400,
+        properties: {
+            band: '2600MHz',
+            technology: '5G',
+            power: 30
+        }
+    },
+    // Site 004 - Golden Gate Park (3 sectors)
+    {
+        id: 'cell-004-1',
+        siteId: 'site-004',
+        sector: 1,
+        azimuth: 0,
+        beamwidth: 120,
+        radius: 900,
+        properties: {
+            band: '850MHz',
+            technology: 'LTE',
+            power: 43
+        }
+    },
+    {
+        id: 'cell-004-2',
+        siteId: 'site-004',
+        sector: 2,
+        azimuth: 120,
+        beamwidth: 120,
+        radius: 900,
+        properties: {
+            band: '850MHz',
+            technology: 'LTE',
+            power: 43
+        }
+    },
+    {
+        id: 'cell-004-3',
+        siteId: 'site-004',
+        sector: 3,
+        azimuth: 240,
+        beamwidth: 120,
+        radius: 900,
+        properties: {
+            band: '850MHz',
+            technology: 'LTE',
+            power: 43
+        }
+    }
+];

package/dist/map/hooks/useCellData.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Hook to safely access cell data stores from context
+ */
+import type { CellDataContext } from '../types';
+/**
+ * Retrieves the cell data context stores
+ * @throws Error if called outside of CellDataProvider
+ */
+export declare function useCellData(): CellDataContext;
+/**
+ * Tries to retrieve the cell data context stores
+ * Returns null if not available (safe version)
+ */
+export declare function tryUseCellData(): CellDataContext | null;

package/dist/map/hooks/useCellData.js

@@ -0,0 +1,29 @@
+/**
+ * Hook to safely access cell data stores from context
+ */
+import { getContext } from 'svelte';
+import { CELL_DATA_CONTEXT_KEY } from '../types';
+/**
+ * Retrieves the cell data context stores
+ * @throws Error if called outside of CellDataProvider
+ */
+export function useCellData() {
+    const cellDataContext = getContext(CELL_DATA_CONTEXT_KEY);
+    if (!cellDataContext) {
+        throw new Error('useCellData() must be called within a <CellDataProvider> component. ' +
+            'Make sure your component is wrapped in <CellDataProvider>.');
+    }
+    return cellDataContext;
+}
+/**
+ * Tries to retrieve the cell data context stores
+ * Returns null if not available (safe version)
+ */
+export function tryUseCellData() {
+    try {
+        return getContext(CELL_DATA_CONTEXT_KEY);
+    }
+    catch {
+        return null;
+    }
+}

package/dist/map/hooks/useMapbox.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Hook to safely access the Mapbox instance from context
+ */
+import type { MapStore } from '../types';
+/**
+ * Retrieves the Mapbox instance store from context
+ * @throws Error if called outside of MapboxProvider
+ */
+export declare function useMapbox(): MapStore;
+/**
+ * Tries to retrieve the Mapbox instance store from context
+ * Returns null if not available (safe version)
+ */
+export declare function tryUseMapbox(): MapStore | null;

package/dist/map/hooks/useMapbox.js

@@ -0,0 +1,29 @@
+/**
+ * Hook to safely access the Mapbox instance from context
+ */
+import { getContext } from 'svelte';
+import { MAP_CONTEXT_KEY } from '../types';
+/**
+ * Retrieves the Mapbox instance store from context
+ * @throws Error if called outside of MapboxProvider
+ */
+export function useMapbox() {
+    const mapStore = getContext(MAP_CONTEXT_KEY);
+    if (!mapStore) {
+        throw new Error('useMapbox() must be called within a <MapboxProvider> component. ' +
+            'Make sure your component is wrapped in <MapboxProvider>.');
+    }
+    return mapStore;
+}
+/**
+ * Tries to retrieve the Mapbox instance store from context
+ * Returns null if not available (safe version)
+ */
+export function tryUseMapbox() {
+    try {
+        return getContext(MAP_CONTEXT_KEY);
+    }
+    catch {
+        return null;
+    }
+}

package/dist/map/index.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Map module - Mapbox-based cellular visualization library
+ *
+ * @module map
+ */
+export type { Site, Cell, InteractionState, MapStore, CellDataContext, SiteFeature, CellFeature, FeatureCollection } from './types';
+export { MAP_CONTEXT_KEY, CELL_DATA_CONTEXT_KEY } from './types';
+export { default as MapboxProvider } from './providers/MapboxProvider.svelte';
+export { default as CellDataProvider } from './providers/CellDataProvider.svelte';
+export * from './providers/providerHelpers';
+export { default as SitesLayer } from './layers/SitesLayer.svelte';
+export { default as CellsLayer } from './layers/CellsLayer.svelte';
+export { default as CoverageLayer } from './layers/CoverageLayer.svelte';
+export { LayerBase } from './layers/LayerBase';
+export { default as MapControl } from './controls/MapControl.svelte';
+export { default as SiteFilterControl } from './controls/SiteFilterControl.svelte';
+export { useMapbox, tryUseMapbox } from './hooks/useMapbox';
+export { useCellData, tryUseCellData } from './hooks/useCellData';
+export { createMapStore } from './stores/mapStore';
+export { createCellDataStores, createCellsBySiteStore, createSelectedSiteStore, createSelectedCellStore } from './stores/cellDataStore';
+export * from './stores/interactions';
+export { sitesToGeoJSON, cellsToGeoJSON, siteToFeature, cellToFeature } from './utils/geojson';
+export { createSectorPolygon, createCirclePolygon, destinationPoint, normalizeAzimuth } from './utils/math';
+export { addSourceIfMissing, removeSourceIfExists, addLayerIfMissing, removeLayerIfExists, updateGeoJSONSource, removeLayerAndSource, isStyleLoaded, waitForStyleLoad, setFeatureState, removeFeatureState, generateLayerId, generateSourceId } from './utils/mapboxHelpers';
+export { buildSiteTree, getFilteredSites, saveTreeState, loadTreeState, clearTreeState } from './utils/siteTreeUtils';
+export { demoSites, demoCells } from './demo/demo-data';
+export { default as DemoMap } from './demo/DemoMap.svelte';

package/dist/map/index.js

@@ -0,0 +1,47 @@
+/**
+ * Map module - Mapbox-based cellular visualization library
+ *
+ * @module map
+ */
+export { MAP_CONTEXT_KEY, CELL_DATA_CONTEXT_KEY } from './types';
+// ============================================================================
+// Providers
+// ============================================================================
+export { default as MapboxProvider } from './providers/MapboxProvider.svelte';
+export { default as CellDataProvider } from './providers/CellDataProvider.svelte';
+export * from './providers/providerHelpers';
+// ============================================================================
+// Layers
+// ============================================================================
+export { default as SitesLayer } from './layers/SitesLayer.svelte';
+export { default as CellsLayer } from './layers/CellsLayer.svelte';
+export { default as CoverageLayer } from './layers/CoverageLayer.svelte';
+export { LayerBase } from './layers/LayerBase';
+// ============================================================================
+// Controls
+// ============================================================================
+export { default as MapControl } from './controls/MapControl.svelte';
+export { default as SiteFilterControl } from './controls/SiteFilterControl.svelte';
+// ============================================================================
+// Hooks
+// ============================================================================
+export { useMapbox, tryUseMapbox } from './hooks/useMapbox';
+export { useCellData, tryUseCellData } from './hooks/useCellData';
+// ============================================================================
+// Stores
+// ============================================================================
+export { createMapStore } from './stores/mapStore';
+export { createCellDataStores, createCellsBySiteStore, createSelectedSiteStore, createSelectedCellStore } from './stores/cellDataStore';
+export * from './stores/interactions';
+// ============================================================================
+// Utilities
+// ============================================================================
+export { sitesToGeoJSON, cellsToGeoJSON, siteToFeature, cellToFeature } from './utils/geojson';
+export { createSectorPolygon, createCirclePolygon, destinationPoint, normalizeAzimuth } from './utils/math';
+export { addSourceIfMissing, removeSourceIfExists, addLayerIfMissing, removeLayerIfExists, updateGeoJSONSource, removeLayerAndSource, isStyleLoaded, waitForStyleLoad, setFeatureState, removeFeatureState, generateLayerId, generateSourceId } from './utils/mapboxHelpers';
+export { buildSiteTree, getFilteredSites, saveTreeState, loadTreeState, clearTreeState } from './utils/siteTreeUtils';
+// ============================================================================
+// Demo
+// ============================================================================
+export { demoSites, demoCells } from './demo/demo-data';
+export { default as DemoMap } from './demo/DemoMap.svelte';