@smartnet360/svelte-components 0.0.50 → 0.0.53

package/dist/map/controls/MapControl.svelte

@@ -0,0 +1,204 @@
+<script lang="ts">
+	/**
+	 * MapControl - Reusable wrapper for Mapbox custom controls
+	 *
+	 * Creates a custom control that can be positioned anywhere on the map
+	 * and contain any content via slots.
+	 *
+	 * Usage:
+	 * <MapControl position="top-left" title="My Control">
+	 *   <div>Custom content here</div>
+	 * </MapControl>
+	 */
+	import { onMount, onDestroy } from 'svelte';
+	import mapboxgl from 'mapbox-gl';
+	import { tryUseMapbox } from '../hooks/useMapbox';
+
+	interface Props {
+		/** Position on the map */
+		position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+		/** Control title (shown in header) */
+		title?: string;
+		/** Is the control collapsible? */
+		collapsible?: boolean;
+		/** Initial collapsed state */
+		initiallyCollapsed?: boolean;
+		/** Custom CSS class for the container */
+		className?: string;
+		/** Child content */
+		children?: import('svelte').Snippet;
+	}
+
+	let {
+		position = 'top-left',
+		title,
+		collapsible = true,
+		initiallyCollapsed = false,
+		className = '',
+		children
+	}: Props = $props();
+
+	const mapStore = tryUseMapbox();
+	
+	if (!mapStore) {
+		console.error('MapControl: No map context available. Make sure MapControl is used inside MapboxProvider.');
+	}
+
+	let map: mapboxgl.Map | null = null;
+	let controlElement: HTMLDivElement;
+	let collapsed = $state(initiallyCollapsed);
+	let control: mapboxgl.IControl | null = null;
+
+	onMount(() => {
+		if (!mapStore) {
+			console.error('MapControl: Cannot mount - no map store available');
+			return;
+		}
+		
+		const unsub = mapStore.subscribe((m) => {
+			if (!m) return;
+			map = m;
+			addControl();
+		});
+
+		return () => {
+			unsub();
+			removeControl();
+		};
+	});
+
+	onDestroy(() => {
+		removeControl();
+	});
+
+	function addControl() {
+		if (!map || control) return;
+
+		// Create a custom Mapbox control
+		control = {
+			onAdd: () => {
+				return controlElement;
+			},
+			onRemove: () => {
+				// Cleanup handled in onDestroy
+			}
+		};
+
+		map.addControl(control, position);
+	}
+
+	function removeControl() {
+		if (map && control) {
+			try {
+				map.removeControl(control);
+			} catch (e) {
+				// Control may already be removed
+			}
+			control = null;
+		}
+	}
+
+	function toggleCollapse() {
+		collapsed = !collapsed;
+	}
+</script>
+
+<div
+	bind:this={controlElement}
+	class="mapboxgl-ctrl mapboxgl-ctrl-group map-control-container {className}"
+>
+	{#if title}
+		<div class="map-control-header">
+			<span class="map-control-title">{title}</span>
+			{#if collapsible}
+				<button
+					class="map-control-toggle"
+					onclick={toggleCollapse}
+					aria-label={collapsed ? 'Expand' : 'Collapse'}
+					title={collapsed ? 'Expand' : 'Collapse'}
+				>
+					<i class="bi bi-chevron-{collapsed ? 'down' : 'up'}"></i>
+				</button>
+			{/if}
+		</div>
+	{/if}
+
+	{#if !collapsed}
+		<div class="map-control-content">
+			{#if children}
+				{@render children()}
+			{/if}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.map-control-container {
+		background: white;
+		border-radius: 4px;
+		box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
+		overflow: hidden;
+		max-width: 300px;
+		font-family: system-ui, -apple-system, sans-serif;
+	}
+
+	.map-control-header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 8px 12px;
+		background: #f8f9fa;
+		border-bottom: 1px solid #dee2e6;
+		font-weight: 600;
+		font-size: 13px;
+		color: #212529;
+	}
+
+	.map-control-title {
+		flex: 1;
+		user-select: none;
+	}
+
+	.map-control-toggle {
+		background: none;
+		border: none;
+		padding: 4px;
+		cursor: pointer;
+		color: #6c757d;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border-radius: 3px;
+		transition: all 0.2s;
+	}
+
+	.map-control-toggle:hover {
+		background: rgba(0, 0, 0, 0.05);
+		color: #212529;
+	}
+
+	.map-control-content {
+		padding: 12px;
+		max-height: 400px;
+		overflow-y: auto;
+		font-size: 13px;
+	}
+
+	/* Custom scrollbar */
+	.map-control-content::-webkit-scrollbar {
+		width: 8px;
+	}
+
+	.map-control-content::-webkit-scrollbar-track {
+		background: #f1f1f1;
+	}
+
+	.map-control-content::-webkit-scrollbar-thumb {
+		background: #888;
+		border-radius: 4px;
+	}
+
+	.map-control-content::-webkit-scrollbar-thumb:hover {
+		background: #555;
+	}
+</style>

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

@@ -0,0 +1,17 @@
+interface Props {
+    /** Position on the map */
+    position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    /** Control title (shown in header) */
+    title?: string;
+    /** Is the control collapsible? */
+    collapsible?: boolean;
+    /** Initial collapsed state */
+    initiallyCollapsed?: boolean;
+    /** Custom CSS class for the container */
+    className?: string;
+    /** Child content */
+    children?: import('svelte').Snippet;
+}
+declare const MapControl: import("svelte").Component<Props, {}, "">;
+type MapControl = ReturnType<typeof MapControl>;
+export default MapControl;

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
+        }
+    }
+];