@smartnet360/svelte-components 0.0.57 → 0.0.59

package/dist/map-v2/features/cells/controls/CellFilterControl.svelte

@@ -0,0 +1,242 @@
+<script lang="ts">
+	/**
+	 * CellFilterControl - Dynamic hierarchical filter control for cells
+	 * 
+	 * Features:
+	 * - Level1 & Level2 grouping dropdown selectors
+	 * - Dynamic tree rebuild on grouping config change
+	 * - TreeView with checkboxes for filtering
+	 * - Color pickers on leaf nodes (group-level customization)
+	 * - Persists tree state and grouping config to localStorage
+	 */
+	
+	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 { buildCellTree, getFilteredCells } from '../utils/cellTree';
+	import type { CellStoreContext } from '../stores/cellStoreContext.svelte';
+	import type { CellGroupingField } from '../types';
+	import type { TreeStoreValue } from '../../../../core/TreeView/tree.model';
+
+	interface Props {
+		/** Cell store context */
+		store: CellStoreContext;
+		/** Control position */
+		position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+		/** Control title */
+		title?: string;
+		/** Initially collapsed? */
+		initiallyCollapsed?: boolean;
+	}
+
+	let {
+		store,
+		position = 'top-left',
+		title = 'Cell Filter',
+		initiallyCollapsed = false
+	}: Props = $props();
+	
+	// Grouping options (excluding 'none' from level1)
+	const GROUPING_OPTIONS: Exclude<CellGroupingField, 'none'>[] = [
+		'tech',
+		'band',
+		'status',
+		'siteId',
+		'customSubgroup',
+		'type',
+		'planner'
+	];
+	
+	// Level2 options include 'none' for flat tree
+	const LEVEL2_OPTIONS: CellGroupingField[] = ['none', ...GROUPING_OPTIONS];
+	
+	let treeStore = $state<Writable<TreeStoreValue> | null>(null);
+	let level1 = $state<Exclude<CellGroupingField, 'none'>>(store.groupingConfig.level1);
+	let level2 = $state<CellGroupingField>(store.groupingConfig.level2);
+	
+	// Rebuild tree when grouping config or cells change
+	function rebuildTree() {
+		if (store.cells.length === 0) return;
+		
+		console.log('CellFilterControl: Building tree with config:', { level1, level2 });
+		
+		const treeNodes = buildCellTree(
+			store.cells,
+			{ level1, level2 },
+			store.groupColorMap
+		);
+		
+		// Create or recreate tree store
+		treeStore = createTreeStore({
+			nodes: [treeNodes],
+			namespace: 'cellular-cell-filter',
+			persistState: true,
+			defaultExpandAll: false
+		});
+		
+		console.log('CellFilterControl: Tree store created');
+		
+		// Subscribe to tree changes and update filtered cells
+		if (treeStore) {
+			const unsub = treeStore.subscribe((treeValue: TreeStoreValue) => {
+				const checkedPaths = treeValue.getCheckedPaths();
+				console.log('TreeStore updated, checked paths:', checkedPaths.length);
+				
+				// Convert string[] to Set<string>
+				const checkedPathsSet = new Set(checkedPaths);
+				const newFilteredCells = getFilteredCells(checkedPathsSet, store.cells);
+				console.log('Filtered cells count:', newFilteredCells.length, 'of', store.cells.length);
+				
+				// Update the cell store directly
+				store.setFilteredCells(newFilteredCells);
+			});
+			
+			return () => unsub();
+		}
+	}
+	
+	onMount(() => {
+		console.log('CellFilterControl: Mounted with', store.cells.length, 'cells');
+		rebuildTree();
+	});
+	
+	// Handle grouping config changes
+	function handleLevel1Change(event: Event) {
+		const target = event.currentTarget as HTMLSelectElement;
+		level1 = target.value as Exclude<CellGroupingField, 'none'>;
+		
+		// Update store config
+		store.setGroupingConfig({ level1, level2 });
+		
+		// Rebuild tree
+		rebuildTree();
+	}
+	
+	function handleLevel2Change(event: Event) {
+		const target = event.currentTarget as HTMLSelectElement;
+		level2 = target.value as CellGroupingField;
+		
+		// Update store config
+		store.setGroupingConfig({ level1, level2 });
+		
+		// Rebuild tree
+		rebuildTree();
+	}
+	
+	function handleColorChange(groupKey: string, color: string) {
+		store.setGroupColor(groupKey, color);
+	}
+	
+	// Label mappings for display
+	const FIELD_LABELS: Record<CellGroupingField | 'none', string> = {
+		tech: 'Technology',
+		band: 'Frequency Band',
+		status: 'Status',
+		siteId: 'Site ID',
+		customSubgroup: 'Custom Subgroup',
+		type: 'Type',
+		planner: 'Planner',
+		none: 'None (2-Level Tree)'
+	};
+</script>
+
+<MapControl {position} {title} collapsible={true} {initiallyCollapsed}>
+	<div class="cell-filter-control">
+		<!-- Grouping Configuration -->
+		<div class="grouping-config">
+			<div class="mb-2">
+				<label for="level1-select" class="form-label small mb-1">Level 1 Grouping</label>
+				<select 
+					id="level1-select"
+					class="form-select form-select-sm"
+					value={level1}
+					onchange={handleLevel1Change}
+				>
+					{#each GROUPING_OPTIONS as option}
+						<option value={option}>{FIELD_LABELS[option]}</option>
+					{/each}
+				</select>
+			</div>
+			
+			<div class="mb-3">
+				<label for="level2-select" class="form-label small mb-1">Level 2 Grouping</label>
+				<select 
+					id="level2-select"
+					class="form-select form-select-sm"
+					value={level2}
+					onchange={handleLevel2Change}
+				>
+					{#each LEVEL2_OPTIONS as option}
+						<option value={option}>{FIELD_LABELS[option]}</option>
+					{/each}
+				</select>
+			</div>
+		</div>
+		
+		<!-- Tree View -->
+		{#if treeStore && $treeStore}
+			<div class="cell-filter-tree">
+				<TreeView store={$treeStore} showControls={false}>
+					{#snippet children({ node, state })}
+						<!-- Custom node rendering with color picker for leaf nodes -->
+						{#if node.metadata?.isLeafGroup}
+							<input
+								type="color"
+								class="color-picker"
+								value={node.metadata.color || '#888888'}
+								oninput={(e) => handleColorChange(node.id, e.currentTarget.value)}
+								onclick={(e) => e.stopPropagation()}
+								title="Choose color for this cell group"
+							/>
+						{/if}
+					{/snippet}
+				</TreeView>
+				
+				<div class="cell-filter-stats">
+					<small class="text-muted">
+						Showing {store.filteredCells.length} of {store.cells.length} cells
+					</small>
+				</div>
+			</div>
+		{:else}
+			<div class="text-muted small">Loading cells...</div>
+		{/if}
+	</div>
+</MapControl>
+
+<style>
+	.cell-filter-control {
+		min-width: 280px;
+		max-width: 320px;
+	}
+	
+	.grouping-config {
+		padding-bottom: 0.5rem;
+		border-bottom: 1px solid #dee2e6;
+		margin-bottom: 0.75rem;
+	}
+	
+	.cell-filter-tree {
+		max-height: 400px;
+		overflow-y: auto;
+	}
+
+	.cell-filter-stats {
+		margin-top: 8px;
+		padding-top: 8px;
+		border-top: 1px solid #dee2e6;
+		text-align: center;
+	}
+	
+	.color-picker {
+		width: 24px;
+		height: 24px;
+		border: 1px solid #ccc;
+		border-radius: 4px;
+		cursor: pointer;
+		margin-left: 8px;
+		vertical-align: middle;
+	}
+</style>

package/dist/map-v2/features/cells/controls/CellFilterControl.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { CellStoreContext } from '../stores/cellStoreContext.svelte';
+interface Props {
+    /** Cell store context */
+    store: CellStoreContext;
+    /** Control position */
+    position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    /** Control title */
+    title?: string;
+    /** Initially collapsed? */
+    initiallyCollapsed?: boolean;
+}
+declare const CellFilterControl: import("svelte").Component<Props, {}, "">;
+type CellFilterControl = ReturnType<typeof CellFilterControl>;
+export default CellFilterControl;

package/dist/map-v2/features/cells/controls/CellStyleControl.svelte

@@ -0,0 +1,139 @@
+<script lang="ts">
+	/**
+	 * CellStyleControl - Visual settings control for cells
+	 * 
+	 * Sliders for:
+	 * - Base radius
+	 * - Line width
+	 * - Fill opacity
+	 * - Show/hide cells
+	 */
+
+	import MapControl from '../../../shared/controls/MapControl.svelte';
+	import type { CellStoreContext } from '../stores/cellStoreContext.svelte';
+
+	interface Props {
+		/** Cell store context */
+		store: CellStoreContext;
+		/** Control position */
+		position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+		/** Control title */
+		title?: string;
+		/** Initially collapsed? */
+		initiallyCollapsed?: boolean;
+	}
+
+	let {
+		store,
+		position = 'bottom-left',
+		title = 'Cell Display',
+		initiallyCollapsed = false
+	}: Props = $props();
+</script>
+
+<MapControl {position} {title} collapsible={true} {initiallyCollapsed}>
+	<div class="cell-style-controls">
+		<!-- Show cells toggle -->
+		<div class="control-row">
+			<label for="cell-show-toggle" class="control-label">
+				Show Cells
+			</label>
+			<div class="form-check form-switch">
+				<input
+					id="cell-show-toggle"
+					type="checkbox"
+					class="form-check-input"
+					role="switch"
+					bind:checked={store.showCells}
+				/>
+			</div>
+		</div>
+		
+		<!-- Base radius slider -->
+		<div class="control-row">
+			<label for="cell-radius-slider" class="control-label">
+				Base Radius: <strong>{store.baseRadius}m</strong>
+			</label>
+			<input
+				id="cell-radius-slider"
+				type="range"
+				class="form-range"
+				min="100"
+				max="2000"
+				step="50"
+				bind:value={store.baseRadius}
+			/>
+		</div>
+
+		<!-- Line width slider -->
+		<div class="control-row">
+			<label for="cell-line-width-slider" class="control-label">
+				Line Width: <strong>{store.lineWidth}px</strong>
+			</label>
+			<input
+				id="cell-line-width-slider"
+				type="range"
+				class="form-range"
+				min="1"
+				max="5"
+				step="0.5"
+				bind:value={store.lineWidth}
+			/>
+		</div>
+
+		<!-- Fill opacity slider -->
+		<div class="control-row">
+			<label for="cell-opacity-slider" class="control-label">
+				Fill Opacity: <strong>{Math.round(store.fillOpacity * 100)}%</strong>
+			</label>
+			<input
+				id="cell-opacity-slider"
+				type="range"
+				class="form-range"
+				min="0"
+				max="1"
+				step="0.1"
+				bind:value={store.fillOpacity}
+			/>
+		</div>
+	</div>
+</MapControl>
+
+<style>
+	.cell-style-controls {
+		min-width: 250px;
+		padding: 0.5rem 0;
+	}
+
+	.control-row {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 1rem;
+		margin-bottom: 1rem;
+	}
+
+	.control-row:last-child {
+		margin-bottom: 0;
+	}
+
+	.control-label {
+		font-size: 0.875rem;
+		font-weight: 500;
+		margin: 0;
+		white-space: nowrap;
+	}
+
+	.form-range {
+		flex: 1;
+		min-width: 120px;
+	}
+
+	.form-check {
+		margin: 0;
+	}
+
+	.form-switch .form-check-input {
+		cursor: pointer;
+	}
+</style>

package/dist/map-v2/features/cells/controls/CellStyleControl.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { CellStoreContext } from '../stores/cellStoreContext.svelte';
+interface Props {
+    /** Cell store context */
+    store: CellStoreContext;
+    /** Control position */
+    position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    /** Control title */
+    title?: string;
+    /** Initially collapsed? */
+    initiallyCollapsed?: boolean;
+}
+declare const CellStyleControl: import("svelte").Component<Props, {}, "">;
+type CellStyleControl = ReturnType<typeof CellStyleControl>;
+export default CellStyleControl;

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

@@ -0,0 +1,20 @@
+/**
+ * Cell Feature - Public API
+ *
+ * Exports all cell-related types, components, utilities, and constants
+ */
+export type { Cell, CellStatus, CellStatusStyle, TechnologyBandKey, ParsedTechBand, CellGroupingField, CellTreeConfig } from './types';
+export { DEFAULT_CELL_TREE_CONFIG } from './types';
+export { TECHNOLOGY_BAND_COLORS } from './constants/colors';
+export { RADIUS_MULTIPLIER } from './constants/radiusMultipliers';
+export { Z_INDEX_BY_BAND, CELL_FILL_Z_INDEX, CELL_LINE_Z_INDEX } from './constants/zIndex';
+export { DEFAULT_STATUS_STYLES } from './constants/statusStyles';
+export { createCellStoreContext, type CellStoreContext, type CellStoreValue } from './stores/cellStoreContext.svelte';
+export { default as CellsLayer } from './layers/CellsLayer.svelte';
+export { default as CellFilterControl } from './controls/CellFilterControl.svelte';
+export { default as CellStyleControl } from './controls/CellStyleControl.svelte';
+export { parseTechBand } from './utils/techBandParser';
+export { getZoomFactor, calculateRadius } from './utils/zoomScaling';
+export { createArcPolygon } from './utils/arcGeometry';
+export { buildCellTree, getFilteredCells } from './utils/cellTree';
+export { cellsToGeoJSON } from './utils/cellGeoJSON';

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

@@ -0,0 +1,24 @@
+/**
+ * Cell Feature - Public API
+ *
+ * Exports all cell-related types, components, utilities, and constants
+ */
+export { DEFAULT_CELL_TREE_CONFIG } from './types';
+// Constants
+export { TECHNOLOGY_BAND_COLORS } from './constants/colors';
+export { RADIUS_MULTIPLIER } from './constants/radiusMultipliers';
+export { Z_INDEX_BY_BAND, CELL_FILL_Z_INDEX, CELL_LINE_Z_INDEX } from './constants/zIndex';
+export { DEFAULT_STATUS_STYLES } from './constants/statusStyles';
+// Store
+export { createCellStoreContext } from './stores/cellStoreContext.svelte';
+// Layers
+export { default as CellsLayer } from './layers/CellsLayer.svelte';
+// Controls
+export { default as CellFilterControl } from './controls/CellFilterControl.svelte';
+export { default as CellStyleControl } from './controls/CellStyleControl.svelte';
+// Utilities
+export { parseTechBand } from './utils/techBandParser';
+export { getZoomFactor, calculateRadius } from './utils/zoomScaling';
+export { createArcPolygon } from './utils/arcGeometry';
+export { buildCellTree, getFilteredCells } from './utils/cellTree';
+export { cellsToGeoJSON } from './utils/cellGeoJSON';

package/dist/map-v2/features/cells/layers/CellsLayer.svelte

@@ -0,0 +1,235 @@
+<script lang="ts">
+	/**
+	 * CellsLayer - Renders cell sectors as arc polygons
+	 * 
+	 * Features:
+	 * - Mapbox fill layer (colored arcs by tech-band)
+	 * - Mapbox line layer (borders styled by status)
+	 * - Zoom-reactive: Regenerates arcs on zoomend
+	 * - Updates when filteredCells or store settings change
+	 */
+
+	import { getContext, onDestroy, onMount } from 'svelte';
+	import type { Map as MapboxMap } from 'mapbox-gl';
+	import type { CellStoreContext } from '../stores/cellStoreContext.svelte';
+	import { useMapbox } from '../../../core/hooks/useMapbox';
+	import { cellsToGeoJSON } from '../utils/cellGeoJSON';
+	import { CELL_FILL_Z_INDEX, CELL_LINE_Z_INDEX } from '../constants/zIndex';
+
+	interface Props {
+		/** Cell store context */
+		store: CellStoreContext;
+		/** Unique namespace for layer IDs */
+		namespace: string;
+	}
+
+	let { store, namespace }: Props = $props();
+	
+	const FILL_LAYER_ID = `${namespace}-cells-fill`;
+	const LINE_LAYER_ID = `${namespace}-cells-line`;
+	const SOURCE_ID = `${namespace}-cells`;
+	
+	// Get map from mapbox hook
+	const mapStore = useMapbox();
+	
+	let map = $state<MapboxMap | null>(null);
+	let mounted = $state(false);
+	let viewportUpdateTimer: ReturnType<typeof setTimeout> | null = null;
+	
+	// Viewport change handler (pan/zoom/move) with debouncing
+	function handleMoveEnd() {
+		if (!map) return;
+		
+		// Clear any existing timer
+		if (viewportUpdateTimer) {
+			clearTimeout(viewportUpdateTimer);
+		}
+		
+		// Debounce: wait 200ms after last move event before re-rendering
+		viewportUpdateTimer = setTimeout(() => {
+			if (!map) return;
+			const newZoom = map.getZoom();
+			console.log('CellsLayer: Viewport changed (zoom/pan), updating to zoom:', newZoom);
+			// This will trigger $effect to re-run with new viewport bounds and zoom
+			store.setCurrentZoom(newZoom);
+		}, 200);
+	}
+	
+	onMount(() => {
+		console.log('CellsLayer: onMount, waiting for map...');
+		
+		// Subscribe to map store
+		const unsubscribe = mapStore.subscribe((mapInstance) => {
+			if (mapInstance && !map) {
+				console.log('CellsLayer: Map available, initializing...');
+				map = mapInstance;
+				mounted = true;
+				
+				// Set initial zoom
+				store.setCurrentZoom(mapInstance.getZoom());
+				
+				// Listen to viewport changes (pan + zoom, debounced)
+				mapInstance.on('moveend', handleMoveEnd);
+			}
+		});
+		
+		return () => {
+			unsubscribe();
+		};
+	});
+	
+	onDestroy(() => {
+		if (!map) return;
+		
+		// Clean up timer
+		if (viewportUpdateTimer) {
+			clearTimeout(viewportUpdateTimer);
+		}
+		
+		map.off('moveend', handleMoveEnd);
+		
+		// Clean up layers and source
+		if (map.getLayer(LINE_LAYER_ID)) {
+			map.removeLayer(LINE_LAYER_ID);
+		}
+		if (map.getLayer(FILL_LAYER_ID)) {
+			map.removeLayer(FILL_LAYER_ID);
+		}
+		if (map.getSource(SOURCE_ID)) {
+			map.removeSource(SOURCE_ID);
+		}
+	});
+	
+	// Reactive: Update GeoJSON when cells/zoom/filters/settings change
+	$effect(() => {
+		console.log('CellsLayer $effect triggered:', {
+			mounted,
+			hasMap: !!map,
+			showCells: store.showCells,
+			filteredCellsCount: store.filteredCells.length,
+			currentZoom: store.currentZoom,
+			baseRadius: store.baseRadius
+		});
+		
+		if (!mounted || !map || !store.showCells) {
+			// Remove layers if showCells is false
+			if (mounted && map) {
+				console.log('CellsLayer: Removing layers (showCells=false or not mounted)');
+				if (map.getLayer(LINE_LAYER_ID)) {
+					map.removeLayer(LINE_LAYER_ID);
+				}
+				if (map.getLayer(FILL_LAYER_ID)) {
+					map.removeLayer(FILL_LAYER_ID);
+				}
+				if (map.getSource(SOURCE_ID)) {
+					map.removeSource(SOURCE_ID);
+				}
+			}
+			return;
+		}
+		
+		// Filter cells by viewport bounds (only render visible cells)
+		const bounds = map.getBounds();
+		if (!bounds) {
+			console.warn('CellsLayer: Cannot get map bounds, skipping viewport filter');
+			return;
+		}
+		
+		const visibleCells = store.filteredCells.filter(cell => 
+			bounds.contains([cell.longitude, cell.latitude])
+		);
+		
+		console.log('CellsLayer: Viewport filtering:', {
+			totalFiltered: store.filteredCells.length,
+			visibleInViewport: visibleCells.length,
+			bounds: {
+				north: bounds.getNorth(),
+				south: bounds.getSouth(),
+				east: bounds.getEast(),
+				west: bounds.getWest()
+			}
+		});
+		
+		// Generate GeoJSON from visible cells only
+		const geoJSON = cellsToGeoJSON(
+			visibleCells,
+			store.currentZoom,
+			store.baseRadius,
+			store.groupColorMap
+		);
+		
+		console.log('CellsLayer: Generated GeoJSON:', {
+			featureCount: geoJSON.features.length,
+			firstFeature: geoJSON.features[0]
+		});
+		
+		// Update or create source
+		const source = map.getSource(SOURCE_ID);
+		if (source && source.type === 'geojson') {
+			console.log('CellsLayer: Updating existing source');
+			source.setData(geoJSON);
+		} else {
+			console.log('CellsLayer: Creating new source');
+			map.addSource(SOURCE_ID, {
+				type: 'geojson',
+				data: geoJSON
+			});
+		}
+		
+		// Add fill layer if not exists
+		if (!map.getLayer(FILL_LAYER_ID)) {
+			console.log('CellsLayer: Creating fill layer');
+			map.addLayer({
+				id: FILL_LAYER_ID,
+				type: 'fill',
+				source: SOURCE_ID,
+				paint: {
+					'fill-color': [
+						'coalesce',
+						['get', 'groupColor'],
+						['get', 'techBandColor'],
+						'#888888' // Fallback
+					],
+					'fill-opacity': store.fillOpacity
+				},
+				metadata: {
+					zIndex: CELL_FILL_Z_INDEX
+				}
+			});
+		} else {
+			// Update fill opacity
+			console.log('CellsLayer: Updating fill opacity:', store.fillOpacity);
+			map.setPaintProperty(FILL_LAYER_ID, 'fill-opacity', store.fillOpacity);
+		}
+		
+		// Add line layer if not exists
+		if (!map.getLayer(LINE_LAYER_ID)) {
+			console.log('CellsLayer: Creating line layer');
+			map.addLayer({
+				id: LINE_LAYER_ID,
+				type: 'line',
+				source: SOURCE_ID,
+				paint: {
+					'line-color': ['get', 'lineColor'],
+					'line-width': store.lineWidth,
+					'line-opacity': ['get', 'lineOpacity'],
+					'line-dasharray': [
+						'case',
+						['has', 'dashArray'],
+						['get', 'dashArray'],
+						['literal', [1, 0]] // Solid line default
+					]
+				},
+				metadata: {
+					zIndex: CELL_LINE_Z_INDEX
+				}
+			});
+		} else {
+			// Update line width
+			console.log('CellsLayer: Updating line width:', store.lineWidth);
+			map.setPaintProperty(LINE_LAYER_ID, 'line-width', store.lineWidth);
+		}
+	});
+</script>
+
+<!-- This component doesn't render DOM, only Mapbox layers -->

package/dist/map-v2/features/cells/layers/CellsLayer.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { CellStoreContext } from '../stores/cellStoreContext.svelte';
+interface Props {
+    /** Cell store context */
+    store: CellStoreContext;
+    /** Unique namespace for layer IDs */
+    namespace: string;
+}
+declare const CellsLayer: import("svelte").Component<Props, {}, "">;
+type CellsLayer = ReturnType<typeof CellsLayer>;
+export default CellsLayer;