@smartnet360/svelte-components 0.0.66 → 0.0.68

package/dist/map-v2/core/components/MapStoreBridge.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { onDestroy } from 'svelte';
+	import type { Map as MapboxMap } from 'mapbox-gl';
+	import { useMapbox } from '../hooks/useMapbox';
+
+	interface Props {
+		onMapChange?: (map: MapboxMap | null) => void;
+		children?: import('svelte').Snippet;
+	}
+
+	let { onMapChange, children }: Props = $props();
+
+	const providerStore = useMapbox();
+	let ready = $state(false);
+
+	const unsubscribe = providerStore.subscribe((map) => {
+		onMapChange?.(map);
+		ready = map !== null;
+	});
+
+	onDestroy(unsubscribe);
+</script>
+
+{#if ready && children}
+	{@render children()}
+{/if}

package/dist/map-v2/core/components/MapStoreBridge.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Map as MapboxMap } from 'mapbox-gl';
+interface Props {
+    onMapChange?: (map: MapboxMap | null) => void;
+    children?: import('svelte').Snippet;
+}
+declare const MapStoreBridge: import("svelte").Component<Props, {}, "">;
+type MapStoreBridge = ReturnType<typeof MapStoreBridge>;
+export default MapStoreBridge;

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

@@ -7,6 +7,7 @@ export type { MapStore } from './types';
 export { MAP_CONTEXT_KEY } from './types';
 export { default as MapboxProvider } from './providers/MapboxProvider.svelte';
 export { default as ViewportSync } from './components/ViewportSync.svelte';
+export { default as MapStoreBridge } from './components/MapStoreBridge.svelte';
 export { default as MapStyleControl } from './controls/MapStyleControl.svelte';
 export { createMapStore } from './stores/mapStore';
 export { createViewportStore, type ViewportStore, type ViewportState } from './stores/viewportStore.svelte';

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

@@ -8,6 +8,7 @@ export { MAP_CONTEXT_KEY } from './types';
 export { default as MapboxProvider } from './providers/MapboxProvider.svelte';
 // Components
 export { default as ViewportSync } from './components/ViewportSync.svelte';
+export { default as MapStoreBridge } from './components/MapStoreBridge.svelte';
 // Controls
 export { default as MapStyleControl } from './controls/MapStyleControl.svelte';
 // Stores

package/dist/map-v2/demo/DemoMap.svelte

@@ -20,13 +20,16 @@
 	import SiteSizeSlider from '../features/sites/controls/SiteSizeSlider.svelte';
 	import SiteSelectionControl from '../features/sites/controls/SiteSelectionControl.svelte';
 	import CellsLayer from '../features/cells/layers/CellsLayer.svelte';
+	import CellLabelsLayer from '../features/cells/layers/CellLabelsLayer.svelte';
 	import CellFilterControl from '../features/cells/controls/CellFilterControl.svelte';
 	import CellStyleControl from '../features/cells/controls/CellStyleControl.svelte';
 	import { createSiteStoreContext } from '../features/sites/stores/siteStoreContext.svelte';
 	import { createCellStoreContext } from '../features/cells/stores/cellStoreContext.svelte';
 	import { createViewportStore } from '../core/stores/viewportStore.svelte';
+	import type { CellGroupingField, CellGroupingLabels } from '../features/cells/types';
 	import { demoSites } from './demo-data';
 	import { demoCells } from './demo-cells';
+	import { writable } from 'svelte/store';
 
 	interface Props {
 		/** Mapbox access token */
@@ -58,8 +61,8 @@
 	// Bootstrap icon names for each control header
 	const controlIcons = {
 		mapStyle: 'layers',
-		cellFilter: 'diagram-3',
-		siteFilter: 'funnel',
+		cellFilter: 'radioactive',
+		siteFilter: 'broadcast-pin',
 		siteSelection: 'check2-square',
 		cellStyle: 'palette',
 		siteSize: 'sliders'
@@ -73,7 +76,67 @@
 		// Or use SvelteKit navigate, or open modal, etc.
 		alert(`Selected ${siteIds.length} sites:\n${siteIds.join(', ')}`);
 	}
-
+	
+	// Cell filter grouping configuration
+	const cellLevel1Options: Array<Exclude<CellGroupingField, 'none'>> = [
+		'tech',
+		'frq',
+		'status',
+		'siteId',
+		'customSubgroup',
+		'type',
+		'planner'
+	];
+	
+	const cellLevel2Options: CellGroupingField[] = [
+		'none',
+		'tech',
+		'frq',
+		'status',
+		'siteId',
+		'customSubgroup',
+		'type',
+		'planner'
+	];
+	
+	const cellFieldLabels: CellGroupingLabels = {
+		tech: 'Technology',
+		frq: 'Frequency Band',
+		status: 'Status',
+		siteId: 'Site ID',
+		customSubgroup: 'Custom Subgroup',
+		type: 'Type',
+		planner: 'Planner',
+		none: 'None (Flat Tree)'
+	};
+	
+	// Cell label field options (for CellStyleControl)
+	// 4G/5G cells have different available fields than 2G
+	const labelFieldOptions4G5G: Array<keyof typeof demoCells[0]> = [
+		'cellID',
+		'cellName',
+		'azimuth',
+		'fband',
+		'frq',
+		'dlEarfn',
+		'tech',
+		'status',
+		'pci1'
+	];
+	
+	const labelFieldOptions2G: Array<keyof typeof demoCells[0]> = [
+		'cellID',
+		'cellName',
+		'azimuth',
+		'bcch',
+		'ctrlid',
+		'fband',
+		'frq',
+		'tech',
+		'status'
+	];
+	
+	let mapStore = writable()
 </script>
 
 <!-- //		controls={['navigation', 'scale']} -->
@@ -88,6 +151,9 @@
 		<!-- Cell layer - renders arc sectors from store -->
 		<CellsLayer store={cellStore} namespace="demo-cells" />
 
+		<!-- Cell labels layer - renders tech-aware labels positioned along azimuth -->
+		<CellLabelsLayer store={cellStore} namespace="demo-cells" />
+
 		<!-- Map style control - switch between map styles -->
 		<MapStyleControl
 			position="top-right"
@@ -100,6 +166,9 @@
 		<!-- Cell filter control - dynamic hierarchical filtering -->
 		<CellFilterControl
 			store={cellStore}
+			level1Options={cellLevel1Options}
+			level2Options={cellLevel2Options}
+			fieldLabels={cellFieldLabels}
 			position="top-left"
 			title="Cell Filter"
 			initiallyCollapsed={true}
@@ -135,6 +204,8 @@
 			initiallyCollapsed={true}
 			icon={controlIcons.cellStyle}
 			iconOnlyWhenCollapsed={useIconHeaders}
+			labelFieldOptions4G5G={labelFieldOptions4G5G}
+			labelFieldOptions2G={labelFieldOptions2G}
 		/>
 
 		<!-- Site size control - updates store visual properties -->

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

@@ -17,12 +17,18 @@
 	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 { CellGroupingField, CellGroupingLabels } from '../types';
 	import type { TreeStoreValue } from '../../../../core/TreeView/tree.model';
 
 	interface Props {
 		/** Cell store context */
 		store: CellStoreContext;
+		/** Available options for level 1 grouping (mandatory) */
+		level1Options: Array<Exclude<CellGroupingField, 'none'>>;
+		/** Available options for level 2 grouping (mandatory, can include 'none') */
+		level2Options: CellGroupingField[];
+		/** Optional label map for human-readable field names */
+		fieldLabels?: CellGroupingLabels;
 		/** Control position */
 		position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
 		/** Control title */
@@ -37,6 +43,9 @@
 
 	let {
 		store,
+		level1Options,
+		level2Options,
+		fieldLabels,
 		position = 'top-left',
 		title = 'Cell Filter',
 		icon = 'diagram-3',
@@ -44,20 +53,6 @@
 		initiallyCollapsed = true
 	}: 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);
@@ -91,7 +86,8 @@
 		const { tree: treeNodes, cellGroupMap } = buildCellTree(
 			store.cellsFilteredByStatus, // Use filtered cells, not all cells
 			{ level1, level2 },
-			store.groupColorMap
+			store.groupColorMap,
+			fieldLabels
 		);
 		
 		// Update the cell-to-group lookup map in the store
@@ -161,17 +157,10 @@
 		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)'
-	};
+	// Get label for a field from the fieldLabels map or fallback to field name
+	function getFieldLabel(field: CellGroupingField): string {
+		return fieldLabels?.[field] || String(field);
+	}
 </script>
 
 <MapControl {position} {title} {icon} {iconOnlyWhenCollapsed} collapsible={true} {initiallyCollapsed}>
@@ -207,8 +196,8 @@
 						value={level1}
 						onchange={handleLevel1Change}
 					>
-						{#each GROUPING_OPTIONS as option}
-							<option value={option}>{FIELD_LABELS[option]}</option>
+						{#each level1Options as option}
+							<option value={option}>{getFieldLabel(option)}</option>
 						{/each}
 					</select>
 				</div>
@@ -222,8 +211,8 @@
 						value={level2}
 						onchange={handleLevel2Change}
 					>
-						{#each LEVEL2_OPTIONS as option}
-							<option value={option}>{FIELD_LABELS[option]}</option>
+						{#each level2Options as option}
+							<option value={option}>{getFieldLabel(option)}</option>
 						{/each}
 					</select>
 				</div>

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

@@ -1,7 +1,14 @@
 import type { CellStoreContext } from '../stores/cellStoreContext.svelte';
+import type { CellGroupingField, CellGroupingLabels } from '../types';
 interface Props {
     /** Cell store context */
     store: CellStoreContext;
+    /** Available options for level 1 grouping (mandatory) */
+    level1Options: Array<Exclude<CellGroupingField, 'none'>>;
+    /** Available options for level 2 grouping (mandatory, can include 'none') */
+    level2Options: CellGroupingField[];
+    /** Optional label map for human-readable field names */
+    fieldLabels?: CellGroupingLabels;
     /** Control position */
     position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
     /** Control title */

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

@@ -11,10 +11,17 @@
 
 	import MapControl from '../../../shared/controls/MapControl.svelte';
 	import type { CellStoreContext } from '../stores/cellStoreContext.svelte';
+	import type { Cell, CellGroupingLabels } from '../types';
 
 	interface Props {
 		/** Cell store context */
 		store: CellStoreContext;
+		/** Available label field options for 4G/5G cells */
+		labelFieldOptions4G5G: Array<keyof Cell>;
+		/** Available label field options for 2G cells */
+		labelFieldOptions2G: Array<keyof Cell>;
+		/** Optional label map for human-readable field names */
+		fieldLabels?: CellGroupingLabels;
 		/** Control position */
 		position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
 		/** Control title */
@@ -29,12 +36,21 @@
 
 	let {
 		store,
+		labelFieldOptions4G5G,
+		labelFieldOptions2G,
+		fieldLabels,
 		position = 'bottom-left',
 		title = 'Cell Display',
 		icon = 'palette',
 		iconOnlyWhenCollapsed = true,
 		initiallyCollapsed = true
 	}: Props = $props();
+	
+	// Get label for a field from the fieldLabels map or fallback to field name
+	function getFieldLabel(field: keyof Cell | 'none'): string {
+		if (field === 'none') return 'None';
+		return fieldLabels?.[field] || String(field);
+	}
 </script>
 
 <MapControl {position} {title} {icon} {iconOnlyWhenCollapsed} collapsible={true} {initiallyCollapsed}>
@@ -102,6 +118,212 @@
 				bind:value={store.fillOpacity}
 			/>
 		</div>
+		
+		<!-- Cell Labels Section -->
+		<hr class="section-divider" />
+		<h6 class="section-title">Cell Labels</h6>
+		
+		<!-- Show labels toggle -->
+		<div class="control-row">
+			<label for="cell-labels-toggle" class="control-label">
+				Show Labels
+			</label>
+			<div class="form-check form-switch">
+				<input
+					id="cell-labels-toggle"
+					type="checkbox"
+					class="form-check-input"
+					role="switch"
+					checked={store.showLabels}
+					onchange={(e) => store.setShowLabels(e.currentTarget.checked)}
+				/>
+			</div>
+		</div>
+		
+		{#if store.showLabels}
+			<!-- 4G/5G Primary Label Field -->
+			<div class="control-row">
+				<label for="label-primary-4g5g" class="control-label">
+					4G/5G Primary
+				</label>
+				<select
+					id="label-primary-4g5g"
+					class="form-select form-select-sm"
+					value={store.primaryLabelField4G5G}
+					onchange={(e) => store.setPrimaryLabelField4G5G(e.currentTarget.value as keyof Cell)}
+				>
+					{#each labelFieldOptions4G5G as field}
+						<option value={field}>{getFieldLabel(field)}</option>
+					{/each}
+				</select>
+			</div>
+			
+			<!-- 4G/5G Secondary Label Field -->
+			<div class="control-row">
+				<label for="label-secondary-4g5g" class="control-label">
+					4G/5G Secondary
+				</label>
+				<select
+					id="label-secondary-4g5g"
+					class="form-select form-select-sm"
+					value={store.secondaryLabelField4G5G}
+					onchange={(e) => store.setSecondaryLabelField4G5G(e.currentTarget.value as keyof Cell | 'none')}
+				>
+					<option value="none">None</option>
+					{#each labelFieldOptions4G5G as field}
+						<option value={field}>{getFieldLabel(field)}</option>
+					{/each}
+				</select>
+			</div>
+			
+			<!-- 2G Primary Label Field -->
+			<div class="control-row">
+				<label for="label-primary-2g" class="control-label">
+					2G Primary
+				</label>
+				<select
+					id="label-primary-2g"
+					class="form-select form-select-sm"
+					value={store.primaryLabelField2G}
+					onchange={(e) => store.setPrimaryLabelField2G(e.currentTarget.value as keyof Cell)}
+				>
+					{#each labelFieldOptions2G as field}
+						<option value={field}>{getFieldLabel(field)}</option>
+					{/each}
+				</select>
+			</div>
+			
+			<!-- 2G Secondary Label Field -->
+			<div class="control-row">
+				<label for="label-secondary-2g" class="control-label">
+					2G Secondary
+				</label>
+				<select
+					id="label-secondary-2g"
+					class="form-select form-select-sm"
+					value={store.secondaryLabelField2G}
+					onchange={(e) => store.setSecondaryLabelField2G(e.currentTarget.value as keyof Cell | 'none')}
+				>
+					<option value="none">None</option>
+					{#each labelFieldOptions2G as field}
+						<option value={field}>{getFieldLabel(field)}</option>
+					{/each}
+				</select>
+			</div>
+			
+			<!-- Label Size -->
+			<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"
+					value={store.labelSize}
+					oninput={(e) => store.setLabelSize(Number(e.currentTarget.value))}
+				/>
+			</div>
+			
+			<!-- Label Color -->
+			<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 form-control-color"
+					value={store.labelColor}
+					oninput={(e) => store.setLabelColor(e.currentTarget.value)}
+				/>
+			</div>
+			
+			<!-- Label Offset -->
+			<div class="control-row">
+				<label for="label-offset-slider" class="control-label">
+					Label Offset: <strong>{store.labelOffset}m</strong>
+				</label>
+				<input
+					id="label-offset-slider"
+					type="range"
+					class="form-range"
+					min="100"
+					max="1000"
+					step="50"
+					value={store.labelOffset}
+					oninput={(e) => store.setLabelOffset(Number(e.currentTarget.value))}
+				/>
+			</div>
+			
+			<!-- Label Halo Color -->
+			<div class="control-row">
+				<label for="label-halo-color-picker" class="control-label">
+					Halo Color
+				</label>
+				<input
+					id="label-halo-color-picker"
+					type="color"
+					class="form-control form-control-color"
+					value={store.labelHaloColor}
+					oninput={(e) => store.setLabelHaloColor(e.currentTarget.value)}
+				/>
+			</div>
+			
+			<!-- Label Halo Width -->
+			<div class="control-row">
+				<label for="label-halo-width-slider" class="control-label">
+					Halo Width: <strong>{store.labelHaloWidth}px</strong>
+				</label>
+				<input
+					id="label-halo-width-slider"
+					type="range"
+					class="form-range"
+					min="0"
+					max="3"
+					step="0.5"
+					value={store.labelHaloWidth}
+					oninput={(e) => store.setLabelHaloWidth(Number(e.currentTarget.value))}
+				/>
+			</div>
+			
+			<!-- Min Label Zoom -->
+			<div class="control-row">
+				<label for="min-label-zoom-slider" class="control-label">
+					Min Zoom: <strong>{store.minLabelZoom}</strong>
+				</label>
+				<input
+					id="min-label-zoom-slider"
+					type="range"
+					class="form-range"
+					min="10"
+					max="18"
+					step="1"
+					value={store.minLabelZoom}
+					oninput={(e) => store.setMinLabelZoom(Number(e.currentTarget.value))}
+				/>
+			</div>
+			
+			<!-- Azimuth Tolerance -->
+			<div class="control-row">
+				<label for="azimuth-tolerance-slider" class="control-label">
+					Azimuth Tolerance: <strong>±{store.azimuthTolerance}°</strong>
+				</label>
+				<input
+					id="azimuth-tolerance-slider"
+					type="range"
+					class="form-range"
+					min="1"
+					max="15"
+					step="1"
+					value={store.azimuthTolerance}
+					oninput={(e) => store.setAzimuthTolerance(Number(e.currentTarget.value))}
+				/>
+			</div>
+		{/if}
 	</div>
 </MapControl>
 
@@ -110,6 +332,18 @@
 		min-width: 250px;
 		padding: 0.5rem 0;
 	}
+	
+	.section-divider {
+		margin: 1rem 0;
+		opacity: 0.3;
+	}
+	
+	.section-title {
+		font-size: 0.875rem;
+		font-weight: 600;
+		margin-bottom: 0.75rem;
+		color: var(--bs-body-color);
+	}
 
 	.control-row {
 		display: flex;
@@ -134,6 +368,18 @@
 		flex: 1;
 		min-width: 120px;
 	}
+	
+	.form-select {
+		flex: 1;
+		min-width: 120px;
+	}
+	
+	.form-control-color {
+		width: 50px;
+		height: 30px;
+		padding: 2px;
+		border-radius: 4px;
+	}
 
 	.form-check {
 		margin: 0;

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

@@ -1,7 +1,14 @@
 import type { CellStoreContext } from '../stores/cellStoreContext.svelte';
+import type { Cell, CellGroupingLabels } from '../types';
 interface Props {
     /** Cell store context */
     store: CellStoreContext;
+    /** Available label field options for 4G/5G cells */
+    labelFieldOptions4G5G: Array<keyof Cell>;
+    /** Available label field options for 2G cells */
+    labelFieldOptions2G: Array<keyof Cell>;
+    /** Optional label map for human-readable field names */
+    fieldLabels?: CellGroupingLabels;
     /** Control position */
     position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
     /** Control title */

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

@@ -3,7 +3,7 @@
  *
  * Exports all cell-related types, components, utilities, and constants
  */
-export type { Cell, CellStatus, CellStatusStyle, TechnologyBandKey, ParsedTechBand, CellGroupingField, CellTreeConfig } from './types';
+export type { Cell, CellStatus, CellStatusStyle, TechnologyBandKey, ParsedTechBand, CellGroupingField, CellGroupingLabels, CellTreeConfig } from './types';
 export { DEFAULT_CELL_TREE_CONFIG } from './types';
 export { TECHNOLOGY_BAND_COLORS } from './constants/colors';
 export { RADIUS_MULTIPLIER } from './constants/radiusMultipliers';
@@ -11,6 +11,7 @@ export { Z_INDEX_BY_BAND, CELL_FILL_Z_INDEX, CELL_LINE_Z_INDEX } from './constan
 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 CellLabelsLayer } from './layers/CellLabelsLayer.svelte';
 export { default as CellFilterControl } from './controls/CellFilterControl.svelte';
 export { default as CellStyleControl } from './controls/CellStyleControl.svelte';
 export { parseTechBand } from './utils/techBandParser';

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

@@ -13,6 +13,7 @@ export { DEFAULT_STATUS_STYLES } from './constants/statusStyles';
 export { createCellStoreContext } from './stores/cellStoreContext.svelte';
 // Layers
 export { default as CellsLayer } from './layers/CellsLayer.svelte';
+export { default as CellLabelsLayer } from './layers/CellLabelsLayer.svelte';
 // Controls
 export { default as CellFilterControl } from './controls/CellFilterControl.svelte';
 export { default as CellStyleControl } from './controls/CellStyleControl.svelte';