@smartnet360/svelte-components 0.0.54 → 0.0.56

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

@@ -0,0 +1,128 @@
+/**
+ * Demo cellular data for testing map-v2 site feature
+ */
+/**
+ * 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'
+    },
+    {
+        id: 'site-005',
+        name: 'Presidio Heights',
+        longitude: -122.4545,
+        latitude: 37.7881,
+        fbands: ['2100', '850'],
+        technology: '5G',
+        properties: {
+            height: 35,
+            type: 'macro'
+        },
+        cellNames: ['cell-005-1', 'cell-005-2', 'cell-005-3'],
+        provider: 'AT&T',
+        featureGroup: 'Suburban Macro'
+    },
+    {
+        id: 'site-006',
+        name: 'Castro District',
+        longitude: -122.4352,
+        latitude: 37.7609,
+        fbands: ['1800'],
+        technology: 'LTE',
+        properties: {
+            height: 25,
+            type: 'micro'
+        },
+        cellNames: ['cell-006-1', 'cell-006-2'],
+        provider: 'T-Mobile',
+        featureGroup: 'Small Cell'
+    },
+    {
+        id: 'site-007',
+        name: 'Embarcadero',
+        longitude: -122.3959,
+        latitude: 37.7956,
+        fbands: ['2600', '2100'],
+        technology: '5G',
+        properties: {
+            height: 50,
+            type: 'macro'
+        },
+        cellNames: ['cell-007-1', 'cell-007-2', 'cell-007-3'],
+        provider: 'Verizon',
+        featureGroup: 'Urban Macro'
+    },
+    {
+        id: 'site-008',
+        name: 'Sunset District',
+        longitude: -122.4944,
+        latitude: 37.7599,
+        fbands: ['850', '700'],
+        technology: 'LTE',
+        properties: {
+            height: 38,
+            type: 'macro'
+        },
+        cellNames: ['cell-008-1', 'cell-008-2', 'cell-008-3'],
+        provider: 'AT&T',
+        featureGroup: 'Suburban Macro'
+    }
+];

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

@@ -0,0 +1,7 @@
+/**
+ * Demo Components - Public API
+ *
+ * Exports demo components and data for testing
+ */
+export { default as DemoMap } from './DemoMap.svelte';
+export { demoSites } from './demo-data';

package/dist/map-v2/demo/index.js

@@ -0,0 +1,9 @@
+/**
+ * Demo Components - Public API
+ *
+ * Exports demo components and data for testing
+ */
+// Demo component
+export { default as DemoMap } from './DemoMap.svelte';
+// Demo data
+export { demoSites } from './demo-data';

package/dist/map-v2/features/sites/controls/SiteFilterControl.svelte

@@ -0,0 +1,147 @@
+<script lang="ts">
+	/**
+	 * SiteFilterControl - TreeView-based site filtering control
+	 *
+	 * Displays a hierarchical tree: All Sites -> Provider -> Feature Group
+	 * Updates siteStore.filteredSites based on checked state
+	 * Persists state to localStorage
+	 *
+	 * Usage:
+	 * <SiteFilterControl {store} position="top-left" />
+	 */
+	import { onMount } from 'svelte';
+	import type { Writable } from 'svelte/store';
+	import MapControl from '../../../shared/controls/MapControl.svelte';
+	import TreeView from '../../../../core/TreeView/TreeView.svelte';
+	import { createTreeStore } from '../../../../core/TreeView/tree.store';
+	import { buildSiteTree, getFilteredSites } from '../utils/siteTreeUtils';
+	import type { SiteStoreContext } from '../stores/siteStoreContext.svelte';
+	import type { TreeStoreValue } from '../../../../core/TreeView/tree.model';
+
+	interface Props {
+		/** Site store instance */
+		store: SiteStoreContext;
+		/** Control position on map */
+		position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+		/** Control title */
+		title?: string;
+		/** Initially collapsed? */
+		initiallyCollapsed?: boolean;
+	}
+
+	let {
+		store,
+		position = 'top-left',
+		title = 'Site Filter',
+		initiallyCollapsed = false
+	}: Props = $props();
+
+	let treeStore = $state<Writable<TreeStoreValue> | null>(null);
+
+	onMount(() => {
+		console.log('SiteFilterControl: Mounted with', store.allSites.length, 'sites');
+		
+		if (store.allSites.length > 0) {
+			console.log('SiteFilterControl: Building tree...');
+			const treeNodes = buildSiteTree(store.allSites, store.groupColorMap);
+
+			treeStore = createTreeStore({
+				nodes: [treeNodes],
+				namespace: 'cellular-site-filter',
+				persistState: true,
+				defaultExpandAll: false
+			});
+			
+			console.log('SiteFilterControl: Tree store created');
+
+			// Subscribe to tree changes and update siteStore
+			if (treeStore) {
+				const unsub = treeStore.subscribe((treeValue: TreeStoreValue) => {
+					const checkedPaths = treeValue.getCheckedPaths();
+					console.log('TreeStore updated, checked paths:', checkedPaths);
+					
+					const newFilteredSites = getFilteredSites(checkedPaths, store.allSites);
+					console.log('Filtered sites count:', newFilteredSites.length, 'of', store.allSites.length);
+					
+					// Update the site store directly
+					store.filteredSites = newFilteredSites;
+				});
+
+				return () => unsub();
+			}
+		}
+	});
+
+	function handleColorChange(groupKey: string, color: string) {
+		store.setGroupColor(groupKey, color);
+	}
+</script>
+
+<MapControl {position} {title} collapsible={true} {initiallyCollapsed}>
+	{#if treeStore && $treeStore}
+		<div class="site-filter-tree">
+			<TreeView store={$treeStore} showControls={false}>
+				{#snippet children({ node, state })}
+					<!-- Custom node rendering with color picker for leaf nodes -->
+					{#if node.metadata?.type === 'featureGroup'}
+						<input
+							type="color"
+							class="color-picker"
+							value={node.metadata.color || store.color}
+							oninput={(e) => handleColorChange(node.id, e.currentTarget.value)}
+							onclick={(e) => e.stopPropagation()}
+							title="Choose color for this group"
+						/>
+					{/if}
+				{/snippet}
+			</TreeView>
+			
+			<div class="site-filter-stats">
+				<small class="text-muted">
+					Showing {store.filteredSites.length} of {store.allSites.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;
+	}
+
+	.color-picker {
+		width: 24px;
+		height: 24px;
+		padding: 0;
+		border: 1px solid #ccc;
+		border-radius: 4px;
+		cursor: pointer;
+		flex-shrink: 0;
+	}
+
+	.color-picker:hover {
+		border-color: #0d6efd;
+	}
+
+	:global(.site-filter-tree .tree-node-label) {
+		font-size: 13px;
+		display: flex;
+		align-items: center;
+		flex: 1;
+	}
+
+	:global(.site-filter-tree .tree-node-checkbox) {
+		margin-right: 6px;
+	}
+</style>

package/dist/{map → map-v2/features/sites}/controls/SiteFilterControl.svelte.d.ts

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

package/dist/map-v2/features/sites/controls/SiteSizeSlider.svelte

@@ -0,0 +1,236 @@
+<script lang="ts">
+	/**
+	 * SiteSizeSlider - Control for adjusting site circle size
+	 *
+	 * Updates siteStore properties to control the display of site circles
+	 *
+	 * Usage:
+	 * <SiteSizeSlider {store} position="top-right" />
+	 */
+	import MapControl from '../../../shared/controls/MapControl.svelte';
+	import type { SiteStoreContext } from '../stores/siteStoreContext.svelte';
+
+	interface Props {
+		/** Site store instance */
+		store: SiteStoreContext;
+		/** Control position on map */
+		position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+		/** Control title */
+		title?: string;
+		/** Initially collapsed? */
+		initiallyCollapsed?: boolean;
+		/** Minimum size (default: 2) */
+		min?: number;
+		/** Maximum size (default: 20) */
+		max?: number;
+		/** Step increment (default: 1) */
+		step?: number;
+	}
+
+	let {
+		store,
+		position = 'top-right',
+		title = 'Site Size',
+		initiallyCollapsed = false,
+		min = 2,
+		max = 20,
+		step = 1
+	}: Props = $props();
+</script>
+
+<MapControl {position} {title} collapsible={true} {initiallyCollapsed}>
+	<div class="site-size-controls">
+		<!-- Size slider -->
+		<div class="control-row">
+			<label for="site-size-slider" class="control-label">
+				Site Radius: <strong>{store.size}px</strong>
+			</label>
+			<input
+				id="site-size-slider"
+				type="range"
+				class="form-range"
+				{min}
+				{max}
+				{step}
+				bind:value={store.size}
+			/>
+		</div>
+
+		<!-- Opacity slider -->
+		<div class="control-row">
+			<label for="site-opacity-slider" class="control-label">
+				Opacity: <strong>{Math.round(store.opacity * 100)}%</strong>
+			</label>
+			<input
+				id="site-opacity-slider"
+				type="range"
+				class="form-range"
+				min="0"
+				max="1"
+				step="0.1"
+				bind:value={store.opacity}
+			/>
+		</div>
+
+		<!-- Circle Color -->
+		<div class="control-row">
+			<label for="site-color-picker" class="control-label">
+				Base Color
+			</label>
+			<input
+				id="site-color-picker"
+				type="color"
+				class="form-control-color"
+				bind:value={store.color}
+			/>
+		</div>
+
+		<!-- Show labels checkbox -->
+		<div class="control-row">
+			<label for="site-show-labels" class="control-label">
+				Show Labels
+			</label>
+			<div class="form-check">
+				<input
+					id="site-show-labels"
+					type="checkbox"
+					class="form-check-input"
+					bind:checked={store.showLabels}
+				/>
+			</div>
+		</div>
+
+		<!-- Label size slider (only visible when labels are shown) -->
+		{#if store.showLabels}
+			<div class="control-row">
+				<label for="label-size-slider" class="control-label">
+					Label Size: <strong>{store.labelSize}px</strong>
+				</label>
+				<input
+					id="label-size-slider"
+					type="range"
+					class="form-range"
+					min="8"
+					max="20"
+					step="1"
+					bind:value={store.labelSize}
+				/>
+			</div>
+
+			<!-- Label color picker -->
+			<div class="control-row">
+				<label for="label-color-picker" class="control-label">
+					Label Color
+				</label>
+				<input
+					id="label-color-picker"
+					type="color"
+					class="form-control-color"
+					bind:value={store.labelColor}
+				/>
+			</div>
+
+			<!-- Label offset slider -->
+			<div class="control-row">
+				<label for="label-offset-slider" class="control-label">
+					Label Offset: <strong>{store.labelOffset.toFixed(1)}</strong>
+				</label>
+				<input
+					id="label-offset-slider"
+					type="range"
+					class="form-range"
+					min="-3"
+					max="3"
+					step="0.1"
+					bind:value={store.labelOffset}
+				/>
+			</div>
+
+			<!-- Label property dropdown -->
+			<div class="control-row">
+				<label for="label-property-select" class="control-label">
+					Label Field
+				</label>
+				<select
+					id="label-property-select"
+					class="form-select"
+					bind:value={store.labelProperty}
+				>
+					<option value="name">Name</option>
+					<option value="id">ID</option>
+					<option value="provider">Provider</option>
+					<option value="technology">Technology</option>
+					<option value="featureGroup">Feature Group</option>
+				</select>
+			</div>
+		{/if}
+	</div>
+</MapControl>
+
+<style>
+	.site-size-controls {
+		width: 100%;
+	}
+
+	.control-row {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		margin-bottom: 12px;
+	}
+
+	.control-row:last-child {
+		margin-bottom: 0;
+	}
+
+	.control-label {
+		width: 110px;
+		flex-shrink: 0;
+		font-size: 12px;
+		color: #555;
+		margin: 0;
+	}
+
+	.form-range {
+		flex: 1;
+		min-width: 0;
+	}
+
+	.form-check {
+		display: flex;
+		align-items: center;
+		flex: 1;
+	}
+
+	.form-check-input {
+		cursor: pointer;
+		margin: 0;
+	}
+
+	.form-control-color {
+		flex: 1;
+		min-width: 0;
+		height: 32px;
+		padding: 2px;
+		border: 1px solid #dee2e6;
+		border-radius: 4px;
+		cursor: pointer;
+	}
+
+	.form-select {
+		flex: 1;
+		min-width: 0;
+		font-size: 12px;
+		padding: 4px 8px;
+		border: 1px solid #dee2e6;
+		border-radius: 4px;
+		background-color: white;
+		cursor: pointer;
+	}
+
+	.form-select:focus {
+		border-color: #0d6efd;
+		outline: none;
+		box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
+	}
+</style>

package/dist/map-v2/features/sites/controls/SiteSizeSlider.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { SiteStoreContext } from '../stores/siteStoreContext.svelte';
+interface Props {
+    /** Site store instance */
+    store: SiteStoreContext;
+    /** Control position on map */
+    position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    /** Control title */
+    title?: string;
+    /** Initially collapsed? */
+    initiallyCollapsed?: boolean;
+    /** Minimum size (default: 2) */
+    min?: number;
+    /** Maximum size (default: 20) */
+    max?: number;
+    /** Step increment (default: 1) */
+    step?: number;
+}
+declare const SiteSizeSlider: import("svelte").Component<Props, {}, "">;
+type SiteSizeSlider = ReturnType<typeof SiteSizeSlider>;
+export default SiteSizeSlider;

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

@@ -0,0 +1,14 @@
+/**
+ * Site Feature - Public API
+ *
+ * Exports all site-related types, stores, components, and utilities
+ */
+export type { Site, SiteStoreValue } from './types';
+export type { SiteStoreContext } from './stores/siteStoreContext.svelte';
+export { createSiteStore } from './stores/siteStore';
+export { createSiteStoreContext } from './stores/siteStoreContext.svelte';
+export { default as SitesLayer } from './layers/SitesLayer.svelte';
+export { default as SiteFilterControl } from './controls/SiteFilterControl.svelte';
+export { default as SiteSizeSlider } from './controls/SiteSizeSlider.svelte';
+export { sitesToGeoJSON, siteToFeature } from './utils/siteGeoJSON';
+export { buildSiteTree, getFilteredSites } from './utils/siteTreeUtils';

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

@@ -0,0 +1,16 @@
+/**
+ * Site Feature - Public API
+ *
+ * Exports all site-related types, stores, components, and utilities
+ */
+// Store
+export { createSiteStore } from './stores/siteStore';
+export { createSiteStoreContext } from './stores/siteStoreContext.svelte';
+// Layers
+export { default as SitesLayer } from './layers/SitesLayer.svelte';
+// Controls
+export { default as SiteFilterControl } from './controls/SiteFilterControl.svelte';
+export { default as SiteSizeSlider } from './controls/SiteSizeSlider.svelte';
+// Utils
+export { sitesToGeoJSON, siteToFeature } from './utils/siteGeoJSON';
+export { buildSiteTree, getFilteredSites } from './utils/siteTreeUtils';