@smartnet360/svelte-components 0.0.22 → 0.0.23

package/dist/apps/antenna-pattern/utils/msi-parser.js

@@ -92,7 +92,24 @@ export async function parseMSIFile(file) {
             }
         }
         else if (trimmedLine.startsWith('COMMENT ')) {
-            result.comment = trimmedLine.substring(8).trim();
+            const commentText = trimmedLine.substring(8).trim();
+            result.comment = commentText;
+            // Extract tilt from comment if not already set from filename
+            if (!filenameMetadata.tilt_from_filename && !result.tilt) {
+                // Look for patterns like "Lever position 2 deg" or "Lever position 2deg"
+                const leverMatch = commentText.match(/Lever position\s+(\d+)\s*deg/i);
+                if (leverMatch) {
+                    result.tilt = leverMatch[1];
+                }
+                // Alternative patterns: "tilt: 2 deg", "2 deg tilt", "mechanical tilt 2", etc.
+                // if (!result.tilt) {
+                //   const tiltMatch = commentText.match(/(?:tilt|mechanical|electrical)[\s:]+(\d+)(?:\s*deg)?/i) ||
+                //                    commentText.match(/(\d+)\s*deg(?:ree)?s?\s+(?:tilt|mechanical|electrical)/i);
+                //   if (tiltMatch) {
+                //     result.tilt = tiltMatch[1];
+                //   }
+                // }
+            }
         }
         else if (trimmedLine.startsWith('HORIZONTAL ')) {
             currentSection = 'horizontal';

package/dist/cellular/CellularChartsView.svelte

@@ -0,0 +1,293 @@
+<svelte:options runes={true} />
+
+<script lang="ts">
+	import type { CellularSite, CellLine } from './cellular.model.js';
+	import type { Layout } from '../core/Charts/charts.model.js';
+	import type { TreeNode } from '../core/TreeView/tree.model.js';
+	import ChartComponent from '../core/Charts/ChartComponent.svelte';
+	import { TreeView, createTreeStore } from '../core/TreeView';
+	import { getBandColor, getBandLabel } from './mock-cellular-data.js';
+
+	interface Props {
+		sites: CellularSite[];
+	}
+
+	let { sites }: Props = $props();
+
+	// Transform cellular sites to TreeNode structure
+	let treeNodes = $derived.by((): TreeNode[] => {
+		return sites.map(site => ({
+			id: site.siteId,
+			label: site.siteName,
+			icon: '📡',
+			defaultExpanded: false,
+			defaultChecked: true,  // Explicitly set
+			children: site.sectors.map(sector => ({
+				id: sector.sectorId,  // Just the sector ID, not full path
+				label: sector.sectorName,
+				icon: '📶',
+				defaultExpanded: false,
+				defaultChecked: true,  // Explicitly set
+				children: sector.cells.map(cell => ({
+					id: String(cell.band),  // Just the band number
+					label: getBandLabel(cell.band),
+					icon: '📻',
+					defaultChecked: true,  // Explicitly set
+					metadata: {
+						band: cell.band,
+						color: getBandColor(cell.band)
+					}
+				}))
+			}))
+		}));
+	});
+
+	// Create tree store with persistence
+	let treeStore = $derived(
+		createTreeStore({
+			nodes: treeNodes,
+			namespace: 'cellular-sites',
+			persistState: true,  // Re-enabled - state will be saved/restored
+			defaultExpandAll: false,
+			showIndeterminate: true
+		})
+	);
+
+	// Flatten sites into cell lines
+	let cellLines = $derived.by((): CellLine[] => {
+		const lines: CellLine[] = [];
+
+		sites.forEach(site => {
+			site.sectors.forEach(sector => {
+				sector.cells.forEach(cell => {
+					// Path construction matches tree-utils.ts flattenTree logic
+					// Root: "siteId"
+					// Level 1: "siteId:sectorId"  
+					// Level 2: "siteId:sectorId:band"
+					const cellKey = `${site.siteId}:${sector.sectorId}:${cell.band}`;
+					
+					// Check visibility from tree store
+					const isVisible = $treeStore.state.checkedPaths.has(cellKey);
+
+					lines.push({
+						siteId: site.siteId,
+						siteName: site.siteName,
+						sectorId: sector.sectorId,
+						sectorName: sector.sectorName,
+						cellId: cell.cellId,
+						band: cell.band,
+						label: `${site.siteName} - ${sector.sectorName} - ${getBandLabel(cell.band)}`,
+						color: getBandColor(cell.band),
+						kpis: cell.kpis,
+						visible: isVisible
+					});
+				});
+			});
+		});
+
+		return lines;
+	});
+
+	// Filter visible cell lines for chart display
+	let visibleCellLines = $derived(cellLines.filter(line => line.visible));
+
+	// Transform cell lines into chart data format
+	let chartData = $derived.by(() => {
+		const data: any[] = [];
+
+		visibleCellLines.forEach(line => {
+			// Create one row per timestamp with all KPI values
+			const timestamps = new Set(line.kpis.throughput.map(kpi => kpi.timestamp));
+			
+			timestamps.forEach(timestamp => {
+				const throughputPoint = line.kpis.throughput.find(kpi => kpi.timestamp === timestamp);
+				const taPoint = line.kpis.timingAdvance.find(kpi => kpi.timestamp === timestamp);
+				
+				if (throughputPoint && taPoint) {
+					data.push({
+						TIMESTAMP: timestamp,
+						[`DL_THROUGHPUT_${line.cellId}`]: throughputPoint.value,
+						[`AVG_TA_${line.cellId}`]: taPoint.value,
+						_cellId: line.cellId,
+						_label: line.label,
+						_color: line.color
+					});
+				}
+			});
+		});
+
+		return data;
+	});
+
+	// Chart layout configuration - dynamically build KPIs from visible cells
+	let chartLayout = $derived.by((): Layout => {
+		const throughputKPIs = visibleCellLines.map(line => ({
+			rawName: `DL_THROUGHPUT_${line.cellId}`,
+			name: line.label,
+			scale: 'absolute' as const,
+			unit: 'Mbps',
+			color: line.color
+		}));
+
+		const taKPIs = visibleCellLines.map(line => ({
+			rawName: `AVG_TA_${line.cellId}`,
+			name: line.label,
+			scale: 'absolute' as const,
+			unit: 'μs',
+			color: line.color
+		}));
+
+		return {
+			layoutName: 'Cellular KPIs',
+			sections: [
+				{
+					id: 'kpis',
+					title: 'KPIs',
+					grid: '2x2',
+					charts: [
+						{
+							title: 'Downlink Throughput',
+							yLeft: throughputKPIs,
+							yRight: []
+						},
+						{
+							title: 'Average Timing Advance',
+							yLeft: taKPIs,
+							yRight: []
+						}
+					]
+				}
+			]
+		};
+	});
+</script>
+
+<div class="cellular-charts-view">
+	<!-- Left: Site Tree -->
+	<aside class="site-selector">
+		<TreeView store={$treeStore} showControls={true} height="100%" />
+	</aside>
+
+	<!-- Right: Charts -->
+	<main class="charts-area">
+		<div class="charts-header">
+			<h5 class="mb-0">Cellular Network KPIs</h5>
+			<div class="stats">
+				<span class="badge bg-primary">
+					{visibleCellLines.length} of {cellLines.length} cells visible
+				</span>
+			</div>
+		</div>
+		<div class="charts-container">
+			{#if visibleCellLines.length === 0}
+				<div class="empty-state">
+					<div class="empty-state-content">
+						<i class="bi bi-info-circle" style="font-size: 3rem; color: #6c757d;"></i>
+						<h4 class="mt-3">No Cells Selected</h4>
+						<p class="text-muted">
+							Select one or more cells from the tree on the left to display KPI charts.
+						</p>
+					</div>
+				</div>
+			{:else}
+				<ChartComponent
+					layout={chartLayout}
+					data={chartData}
+					mode="tabs"
+					showGlobalControls={true}
+					enableAdaptation={true}
+				/>
+			{/if}
+		</div>
+	</main>
+</div>
+
+<style>
+	.cellular-charts-view {
+		width: 100%;
+		height: 100%;
+		display: flex;
+		gap: 0;
+		background-color: #fff;
+	}
+
+	.site-selector {
+		width: 300px;
+		flex-shrink: 0;
+		height: 100%;
+		overflow: hidden;
+	}
+
+	.charts-area {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		min-width: 0;
+		height: 100%;
+	}
+
+	.charts-header {
+		padding: 1rem;
+		border-bottom: 1px solid #dee2e6;
+		background-color: #f8f9fa;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		flex-shrink: 0;
+	}
+
+	.charts-header h5 {
+		margin: 0;
+		color: #495057;
+	}
+
+	.stats {
+		display: flex;
+		gap: 0.5rem;
+	}
+
+	.charts-container {
+		flex: 1;
+		min-height: 0;
+		overflow: hidden;
+	}
+
+	.empty-state {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		height: 100%;
+		width: 100%;
+	}
+
+	.empty-state-content {
+		text-align: center;
+		max-width: 400px;
+		padding: 2rem;
+	}
+
+	.empty-state-content h4 {
+		color: #495057;
+		margin-bottom: 0.5rem;
+	}
+
+	/* Responsive layout */
+	@media (max-width: 992px) {
+		.site-selector {
+			width: 250px;
+		}
+	}
+
+	@media (max-width: 768px) {
+		.cellular-charts-view {
+			flex-direction: column;
+		}
+
+		.site-selector {
+			width: 100%;
+			height: 300px;
+			border-right: none;
+			border-bottom: 1px solid #dee2e6;
+		}
+	}
+</style>

package/dist/cellular/CellularChartsView.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { CellularSite } from './cellular.model.js';
+interface Props {
+    sites: CellularSite[];
+}
+declare const CellularChartsView: import("svelte").Component<Props, {}, "">;
+type CellularChartsView = ReturnType<typeof CellularChartsView>;
+export default CellularChartsView;