@smartnet360/svelte-components 0.0.85 → 0.0.87

package/dist/map-v3/demo/demo-cells.js

@@ -0,0 +1,130 @@
+/**
+ * Demo Cell Data
+ *
+ * 100 sites across San Francisco Bay Area
+ * Each site has 3 sectors (azimuths: 0°, 120°, 240°)
+ * Each sector has 12 cells (all tech-band combinations)
+ * Total: 100 sites × 3 sectors × 12 tech-bands = 3,600 cells
+ */
+const BASE_LAT = 47.4979;
+const BASE_LNG = 19.0402;
+// Grid parameters for distributing sites
+const NUM_SITES = 1700;
+const GRID_SIZE = 10; // 10×10 grid
+const LAT_SPACING = 0.01; // ~1.1 km spacing
+const LNG_SPACING = 0.015; // ~1.1 km spacing (adjusted for longitude)
+// Standard beamwidth for sectors
+const BEAMWIDTH = 65;
+// Cell tech-band definitions with proper fband format
+const TECH_BANDS = [
+    // 2G bands
+    { tech: '2G', band: '900', fband: 'GSM900' },
+    { tech: '2G', band: '1800', fband: 'GSM1800' },
+    // 4G bands
+    { tech: '4G', band: '700', fband: 'LTE700' },
+    { tech: '4G', band: '800', fband: 'LTE800' },
+    { tech: '4G', band: '900', fband: 'LTE900' },
+    { tech: '4G', band: '1800', fband: 'LTE1800' },
+    { tech: '4G', band: '2100', fband: 'LTE2100' },
+    { tech: '4G', band: '2600', fband: 'LTE2600' },
+    // 5G bands
+    { tech: '5G', band: '700', fband: '5G-700' },
+    { tech: '5G', band: '2100', fband: '5G-2100' },
+    { tech: '5G', band: '3500', fband: '5G-3500' }
+];
+// Three sector azimuths
+const AZIMUTHS = [0, 120, 240];
+// Status rotation for variety
+const STATUSES = [
+    'On_Air',
+    'On_Air',
+    'On_Air',
+    'On_Air',
+    'On_Air_UNDER_CONSTRUCTION',
+    'On_Air_Locked',
+    'RF_Plan_Ready',
+    'RF_Plan_Ready',
+    'Re-Planned_RF_Plan_Ready',
+    'Tavlati_RF_Plan_Ready',
+    'On_Air',
+    'On_Air'
+];
+/**
+ * Generate demo cells: 100 sites × 3 sectors × 12 tech-bands = 3,600 cells
+ */
+export const demoCells = [];
+let cellCounter = 1;
+// Generate sites in a grid pattern
+for (let siteIndex = 0; siteIndex < NUM_SITES; siteIndex++) {
+    const row = Math.floor(siteIndex / GRID_SIZE);
+    const col = siteIndex % GRID_SIZE;
+    // Calculate site position (centered grid around base location)
+    const siteLat = BASE_LAT + (row - GRID_SIZE / 2) * LAT_SPACING;
+    const siteLng = BASE_LNG + (col - GRID_SIZE / 2) * LNG_SPACING;
+    const siteId = `DEMO-SITE-${String(siteIndex + 1).padStart(3, '0')}`;
+    // Generate 3 sectors per site
+    AZIMUTHS.forEach((azimuth, sectorIndex) => {
+        // Generate 12 tech-bands per sector
+        TECH_BANDS.forEach((techBand, techIndex) => {
+            const cellId = `CELL-${String(cellCounter).padStart(4, '0')}`;
+            const status = STATUSES[techIndex];
+            demoCells.push({
+                // Core properties
+                id: cellId,
+                txId: `TX-${String(cellCounter).padStart(4, '0')}`,
+                cellID: cellId,
+                cellID2G: techBand.tech === '2G' ? cellId : '',
+                cellName: `${siteId} ${techBand.tech}${techBand.band} S${sectorIndex + 1}`,
+                siteId: siteId,
+                tech: techBand.tech,
+                fband: techBand.fband,
+                frq: techBand.band,
+                type: 'MACRO',
+                status: status,
+                onAirDate: '2024-01-15',
+                // 2G specific
+                bcch: techBand.tech === '2G' ? 100 + techIndex : 0,
+                ctrlid: techBand.tech === '2G' ? `CTRL-${cellId}` : '',
+                // 4G specific
+                dlEarfn: techBand.tech === '4G' ? 6200 + techIndex * 100 : 0,
+                // Physical properties
+                antenna: 'DEMO-ANTENNA-MODEL',
+                azimuth: azimuth,
+                height: 30, // 30 meters antenna height
+                electricalTilt: '3',
+                beamwidth: BEAMWIDTH,
+                latitude: siteLat,
+                longitude: siteLng,
+                dx: 0,
+                dy: 0,
+                siteLatitude: siteLat,
+                siteLongitude: siteLng,
+                // Planning
+                comment: `Demo ${techBand.tech} ${techBand.band} cell at azimuth ${azimuth}°`,
+                planner: 'Demo User',
+                // Atoll properties
+                atollETP: 43.0,
+                atollPW: 20.0,
+                atollRS: 500.0 + (techBand.band === '700' ? 200 : 0), // Lower freq = longer range
+                atollBW: parseFloat(techBand.band) / 100, // Simplified bandwidth
+                // Network properties
+                cellId3: `${cellId}-3G`,
+                nwtP1: 20,
+                nwtP2: 40,
+                pci1: (cellCounter % 504), // Physical Cell ID for LTE
+                nwtRS: 450.0,
+                nwtBW: 10.0,
+                // Other
+                other: {
+                    demoCell: true,
+                    siteNumber: siteIndex + 1,
+                    sector: sectorIndex + 1,
+                    techBandKey: `${techBand.tech}_${techBand.band}`,
+                    gridPosition: { row, col }
+                },
+                customSubgroup: `Sector-${sectorIndex + 1}`
+            });
+            cellCounter++;
+        });
+    });
+}

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

@@ -0,0 +1,8 @@
+/**
+ * Demo cellular data for testing map-v2 site feature
+ */
+import type { Site } from '../features/sites/types';
+/**
+ * Sample cellular sites (San Francisco area)
+ */
+export declare const demoSites: Site[];

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

@@ -0,0 +1,104 @@
+/**
+ * Demo cellular data for testing map-v2 site feature
+ */
+/**
+ * Sample cellular sites (San Francisco area)
+ */
+export const demoSites = [
+    {
+        siteId: 'site-001',
+        siteName: 'Downtown Tower',
+        longitude: -122.4194,
+        latitude: 37.7749,
+        fbands: ['2100', '1800'],
+        techs: ['5G'],
+        provider: 'Verizon',
+        level1: 'Urban Macro',
+        level2: 'San Francisco',
+        cellCount: 3
+    },
+    {
+        siteId: 'site-002',
+        siteName: 'Financial District',
+        longitude: -122.4008,
+        latitude: 37.7946,
+        fbands: ['1800', '850'],
+        techs: ['LTE'],
+        provider: 'AT&T',
+        level1: 'Urban Macro',
+        level2: 'San Francisco',
+        cellCount: 3
+    },
+    {
+        siteId: 'site-003',
+        siteName: 'Mission Bay',
+        longitude: -122.3912,
+        latitude: 37.7699,
+        fbands: ['2600'],
+        techs: ['5G'],
+        provider: 'T-Mobile',
+        level1: 'Small Cell',
+        level2: 'San Francisco',
+        cellCount: 2
+    },
+    {
+        siteId: 'site-004',
+        siteName: 'Golden Gate Park',
+        longitude: -122.4862,
+        latitude: 37.7694,
+        fbands: ['850', '700'],
+        techs: ['LTE'],
+        provider: 'Verizon',
+        level1: 'Rural Macro',
+        level2: 'San Francisco',
+        cellCount: 3
+    },
+    {
+        siteId: 'site-005',
+        siteName: 'Presidio Heights',
+        longitude: -122.4545,
+        latitude: 37.7881,
+        fbands: ['2100', '850'],
+        techs: ['5G'],
+        provider: 'AT&T',
+        level1: 'Suburban Macro',
+        level2: 'San Francisco',
+        cellCount: 3
+    },
+    {
+        siteId: 'site-006',
+        siteName: 'Castro District',
+        longitude: -122.4352,
+        latitude: 37.7609,
+        fbands: ['1800'],
+        techs: ['LTE'],
+        provider: 'T-Mobile',
+        level1: 'Small Cell',
+        level2: 'San Francisco',
+        cellCount: 2
+    },
+    {
+        siteId: 'site-007',
+        siteName: 'Embarcadero',
+        longitude: -122.3959,
+        latitude: 37.7956,
+        fbands: ['2600', '2100'],
+        techs: ['5G'],
+        provider: 'Verizon',
+        level1: 'Urban Macro',
+        level2: 'San Francisco',
+        cellCount: 3
+    },
+    {
+        siteId: 'site-008',
+        siteName: 'Sunset District',
+        longitude: -122.4944,
+        latitude: 37.7599,
+        fbands: ['850', '700'],
+        techs: ['LTE'],
+        provider: 'AT&T',
+        level1: 'Suburban Macro',
+        level2: 'San Francisco',
+        cellCount: 3
+    }
+];

package/dist/map-v3/demo/demo-repeaters.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Demo Repeater Data
+ *
+ * 15 repeaters strategically placed near demo sites
+ * Mix of 2G, 4G, and 5G technologies across various frequency bands
+ * Fixed 30° beamwidth
+ */
+import type { Repeater } from '../features/repeaters/types';
+/**
+ * Generate demo repeater data
+ * Creates 15 repeaters with various tech:fband combinations
+ */
+export declare const demoRepeaters: Repeater[];

package/dist/map-v3/demo/demo-repeaters.js

@@ -0,0 +1,73 @@
+/**
+ * Demo Repeater Data
+ *
+ * 15 repeaters strategically placed near demo sites
+ * Mix of 2G, 4G, and 5G technologies across various frequency bands
+ * Fixed 30° beamwidth
+ */
+const BASE_LAT = 47.4979;
+const BASE_LNG = 19.0402;
+// Repeater positions (distributed across demo area)
+const REPEATER_POSITIONS = [
+    { lat: BASE_LAT + 0.015, lng: BASE_LNG - 0.020 },
+    { lat: BASE_LAT + 0.025, lng: BASE_LNG + 0.010 },
+    { lat: BASE_LAT - 0.010, lng: BASE_LNG + 0.025 },
+    { lat: BASE_LAT - 0.020, lng: BASE_LNG - 0.015 },
+    { lat: BASE_LAT + 0.005, lng: BASE_LNG + 0.030 },
+    { lat: BASE_LAT + 0.030, lng: BASE_LNG - 0.005 },
+    { lat: BASE_LAT - 0.025, lng: BASE_LNG + 0.015 },
+    { lat: BASE_LAT + 0.010, lng: BASE_LNG - 0.030 },
+    { lat: BASE_LAT - 0.015, lng: BASE_LNG - 0.025 },
+    { lat: BASE_LAT + 0.020, lng: BASE_LNG + 0.020 },
+    { lat: BASE_LAT - 0.005, lng: BASE_LNG - 0.010 },
+    { lat: BASE_LAT + 0.035, lng: BASE_LNG + 0.005 },
+    { lat: BASE_LAT - 0.030, lng: BASE_LNG + 0.020 },
+    { lat: BASE_LAT + 0.012, lng: BASE_LNG - 0.018 },
+    { lat: BASE_LAT - 0.018, lng: BASE_LNG + 0.012 }
+];
+// Repeater tech-band combinations
+const REPEATER_CONFIGS = [
+    // 2G repeaters
+    { tech: '2G', fband: 'GSM900', azimuth: 45 },
+    { tech: '2G', fband: 'GSM1800', azimuth: 180 },
+    { tech: '2G', fband: 'GSM900', azimuth: 270 },
+    // 4G repeaters
+    { tech: '4G', fband: 'LTE700', azimuth: 90 },
+    { tech: '4G', fband: 'LTE800', azimuth: 225 },
+    { tech: '4G', fband: 'LTE1800', azimuth: 135 },
+    { tech: '4G', fband: 'LTE2100', azimuth: 315 },
+    { tech: '4G', fband: 'LTE2600', azimuth: 60 },
+    // 5G repeaters
+    { tech: '5G', fband: '5G-700', azimuth: 150 },
+    { tech: '5G', fband: '5G-2100', azimuth: 210 },
+    { tech: '5G', fband: '5G-3500', azimuth: 330 },
+    { tech: '5G', fband: '5G-3500', azimuth: 0 },
+    { tech: '5G', fband: '5G-2100', azimuth: 120 },
+    { tech: '5G', fband: '5G-700', azimuth: 240 },
+    { tech: '5G', fband: '5G-3500', azimuth: 180 }
+];
+/**
+ * Generate demo repeater data
+ * Creates 15 repeaters with various tech:fband combinations
+ */
+export const demoRepeaters = REPEATER_POSITIONS.map((pos, idx) => {
+    const config = REPEATER_CONFIGS[idx];
+    const repeaterId = `REP-${String(idx + 1).padStart(3, '0')}`;
+    const donorCellId = `CELL-${String((idx * 7) % 100).padStart(3, '0')}`;
+    return {
+        repeaterId,
+        donorCellId,
+        donorCellName: `Cell-${config.tech}-${config.fband}-${idx + 1}`,
+        latitude: pos.lat,
+        longitude: pos.lng,
+        azimuth: config.azimuth,
+        beamwidth: 30, // Fixed 30° beamwidth
+        tech: config.tech,
+        fband: config.fband,
+        type: 'REPEATER',
+        height: 15 + (idx % 5) * 5, // Heights between 15-35m
+        factory_nbr: `FN-${String(1000 + idx).padStart(6, '0')}`,
+        provider: idx % 2 === 0 ? 'Operator-A' : 'Operator-B',
+        featureGroup: config.tech === '5G' ? 'High-Priority' : config.tech === '4G' ? 'Standard' : 'Legacy'
+    };
+});

package/dist/map-v3/features/cells/components/CellFilterControl.svelte

@@ -0,0 +1,208 @@
+<script lang="ts">
+	import { onDestroy, untrack } from 'svelte';
+	import { MapControl } from '../../../shared';
+	import { createTreeStore } from '../../../../core/TreeView/tree.store';
+	import TreeView from '../../../../core/TreeView/TreeView.svelte';
+	import type { CellDataStore } from '../stores/cell.data.svelte';
+	import type { CellRegistry } from '../stores/cell.registry.svelte';
+	import type { CellDisplayStore } from '../stores/cell.display.svelte';
+	import type { CellGroupingField } from '../types';
+	import { buildCellTree } from '../logic/tree-adapter';
+
+	interface Props {
+		dataStore: CellDataStore;
+		registry: CellRegistry;
+		displayStore: CellDisplayStore;
+		position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+	}
+
+	let { dataStore, registry, displayStore, position = 'top-left' }: Props = $props();
+
+	// Local State for Grouping
+	// let level1 = $state<CellGroupingField>('tech');
+	// let level2 = $state<CellGroupingField>('fband');
+	let includePlanned = $state(false);
+
+	const level1Options: CellGroupingField[] = ['tech', 'status', 'siteId'];
+	const level2Options: CellGroupingField[] = ['fband', 'frq', 'status', 'none'];
+
+	// Sync includePlanned with dataStore
+	$effect(() => {
+		// If includePlanned is true, we show ALL (filterOnAir = false)
+		// If includePlanned is false, we show ONLY On Air (filterOnAir = true)
+		dataStore.filterOnAir = !includePlanned;
+	});
+
+	// Create Tree Store
+	// We recreate it whenever the cell data changes significantly (e.g. new file loaded)
+	// or when grouping configuration changes.
+	// We use untrack() to avoid recreating the tree when the registry changes (visibility toggles),
+	// as the tree itself drives those changes.
+	let treeStore = $derived.by(() => {
+		const _cells = dataStore.filteredCells;
+		const _l1 = displayStore.level1;
+		const _l2 = displayStore.level2;
+
+		return untrack(() => {
+			const nodes = buildCellTree(_cells, registry, _l1, _l2);
+			return createTreeStore({
+				nodes,
+				namespace: `${registry.namespace}:tree:${_l1}:${_l2}`,
+				persistState: true,
+				defaultExpandAll: true
+			});
+		});
+	});
+
+	// Sync Tree Selection -> Cell Registry Visibility
+	$effect(() => {
+		const unsubscribe = treeStore.subscribe((val) => {
+			// Iterate all leaf nodes to sync visibility
+			// This is a bit heavy but ensures consistency. 
+			// Optimization: Only update changed nodes if we had a diff.
+			
+			// We only care about leaf nodes (bands)
+			let changes = 0;
+			val.state.nodes.forEach((nodeState) => {
+				if (nodeState.node.children && nodeState.node.children.length > 0) return; // Skip folders
+
+				const groupId = nodeState.node.id;
+				// IMPORTANT: Read from checkedPaths set, NOT nodeState.checked (which is static/stale)
+				const isVisible = val.state.checkedPaths.has(nodeState.path);
+				
+				// Update registry if different
+				const currentStyle = registry.getStyle(groupId, '#000'); // Color doesn't matter here
+				if (currentStyle.visible !== isVisible) {
+					// console.log(`[CellFilterControl] Syncing ${groupId}: ${currentStyle.visible} -> ${isVisible}`);
+					registry.toggleVisibility(groupId);
+					changes++;
+				}
+			});
+			if (changes > 0) {
+				console.log(`[CellFilterControl] Synced ${changes} visibility changes to registry`);
+			}
+		});
+
+		return () => {
+			unsubscribe();
+		};
+	});
+
+	function handleColorChange(groupId: string, event: Event) {
+		const input = event.target as HTMLInputElement;
+		registry.setColor(groupId, input.value);
+	}
+
+	function getFieldLabel(field: string): string {
+		const labels: Record<string, string> = {
+			tech: 'Technology',
+			fband: 'Tech + Band',
+			frq: 'Frequency',
+			status: 'Status',
+			siteId: 'Site ID',
+			none: 'None'
+		};
+		return labels[field] || field;
+	}
+</script>
+
+<MapControl {position} title="Layers" icon="radioactive" controlWidth="320px">
+	<div class="cell-filter-control">
+		<!-- Status Filter Checkbox -->
+		<div class="mb-3 px-1">
+			<div class="form-check">
+				<input 
+					type="checkbox" 
+					class="form-check-input" 
+					id="includePlanned"
+					bind:checked={includePlanned}
+				/>
+				<label class="form-check-label small" for="includePlanned">
+					Include Planned Cells
+					<span class="text-muted ms-1">
+						({includePlanned ? 'All cells' : 'On Air only'})
+					</span>
+				</label>
+			</div>
+		</div>
+
+		<!-- Grouping Configuration -->
+		<div class="grouping-config mb-3 pb-2 border-bottom">
+			<div class="row g-2">
+				<!-- Level 1 Grouping -->
+				<div class="col-6">
+					<label for="level1-select" class="form-label small mb-1 text-muted">Level 1</label>
+					<select 
+						id="level1-select"
+						class="form-select form-select-sm"
+						bind:value={displayStore.level1}
+					>
+						{#each level1Options as option}
+							<option value={option}>{getFieldLabel(option)}</option>
+						{/each}
+					</select>
+				</div>
+				
+				<!-- Level 2 Grouping -->
+				<div class="col-6">
+					<label for="level2-select" class="form-label small mb-1 text-muted">Level 2</label>
+					<select 
+						id="level2-select"
+						class="form-select form-select-sm"
+						bind:value={displayStore.level2}
+					>
+						{#each level2Options as option}
+							<option value={option}>{getFieldLabel(option)}</option>
+						{/each}
+					</select>
+				</div>
+			</div>
+		</div>
+
+		<!-- Tree View -->
+		<div class="cell-filter-tree">
+			{#if dataStore.filteredCells.length === 0}
+				<div class="text-muted p-3 text-center small">
+					No cells loaded.
+				</div>
+			{:else}
+				<TreeView showControls={false} store={$treeStore} height="300px">
+					{#snippet children({ node, state })}
+						<!-- Color Picker (Only for leaves) -->
+						{#if !node.children || node.children.length === 0}
+							<div 
+								class="d-flex align-items-center" 
+								role="group" 
+								onclick={(e) => e.stopPropagation()} 
+								onkeydown={(e) => e.stopPropagation()}
+							>
+								<input 
+									type="color" 
+									class="form-control form-control-color form-control-sm border-0 p-0" 
+									style="width: 16px; height: 16px; min-height: 0;"
+									value={node.metadata?.color}
+									oninput={(e) => handleColorChange(node.id, e)}
+									title="Change color"
+								/>
+							</div>
+						{/if}
+					{/snippet}
+				</TreeView>
+			{/if}
+		</div>
+
+		<!-- Stats Footer -->
+		<!-- <div class="cell-filter-stats text-center pt-2 mt-2 border-top">
+			<small class="text-muted">
+				Showing {dataStore.filteredCells.length} of {dataStore.rawCells.length} cells
+			</small>
+		</div> -->
+	</div>
+</MapControl>
+
+<style>
+	.cell-filter-control {
+		background: #fff;
+		overflow: hidden;
+	}
+</style>

package/dist/map-v3/features/cells/components/CellFilterControl.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { CellDataStore } from '../stores/cell.data.svelte';
+import type { CellRegistry } from '../stores/cell.registry.svelte';
+import type { CellDisplayStore } from '../stores/cell.display.svelte';
+interface Props {
+    dataStore: CellDataStore;
+    registry: CellRegistry;
+    displayStore: CellDisplayStore;
+    position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+}
+declare const CellFilterControl: import("svelte").Component<Props, {}, "">;
+type CellFilterControl = ReturnType<typeof CellFilterControl>;
+export default CellFilterControl;