@smartnet360/svelte-components 0.0.102 → 0.0.103

package/dist/apps/antenna-pattern/index.d.ts

@@ -14,3 +14,4 @@ export * from './utils/db-utils';
 export * from './utils/init-db';
 export * from './utils/msi-parser';
 export * from './utils/plotly-chart-utils';
+export * from './utils/load-static-antennas';

package/dist/apps/antenna-pattern/index.js

@@ -19,3 +19,4 @@ export * from './utils/db-utils';
 export * from './utils/init-db';
 export * from './utils/msi-parser';
 export * from './utils/plotly-chart-utils';
+export * from './utils/load-static-antennas';

package/dist/apps/antenna-pattern/utils/load-static-antennas.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Load antennas from static/antennas folder via fetch
+ * This is a helper for loading pre-bundled antenna files without user interaction
+ */
+import type { Antenna } from '../db';
+/**
+ * Load and parse all static antenna files
+ */
+export declare function loadStaticAntennas(): Promise<Antenna[]>;
+/**
+ * Load static antennas and save to database
+ */
+export declare function importStaticAntennas(): Promise<{
+    success: boolean;
+    count: number;
+    error?: string;
+}>;

package/dist/apps/antenna-pattern/utils/load-static-antennas.js

@@ -0,0 +1,83 @@
+/**
+ * Load antennas from static/antennas folder via fetch
+ * This is a helper for loading pre-bundled antenna files without user interaction
+ */
+import { parseMSIFile } from './msi-parser';
+import { saveAntennas } from './db-utils';
+const STATIC_ANTENNA_FILES = [
+    'ADU4515R17v06_0699_X_CO_M45_03T_Lr1.msi',
+    'ADU4515R17v06_0699_X_CO_M45_04T_Lr1.msi',
+    'ADU4515R17v06_0699_X_CO_M45_05T_Lr1.msi',
+    'ADU4515R17v06_0699_X_CO_M45_06T_Lr1.msi',
+    'ADU4515R17v06_0699_X_CO_M45_07T_Lr1.msi',
+    'ADU4515R17v06_0699_X_CO_M45_08T_Lr1.msi',
+    'ADU4515R17v06_0699_X_CO_M45_09T_Lr1.msi',
+    'ADU4515R17v06_0699_X_CO_M45_10T_Lr1.msi',
+    'ADU4515R17v06_0699_X_CO_M45_11T_Lr1.msi',
+    'ADU4515R17v06_0699_X_CO_M45_12T_Lr1.msi'
+];
+/**
+ * Load and parse all static antenna files
+ */
+export async function loadStaticAntennas() {
+    const antennas = [];
+    console.log(`[loadStaticAntennas] Starting to load ${STATIC_ANTENNA_FILES.length} antenna files...`);
+    for (const filename of STATIC_ANTENNA_FILES) {
+        try {
+            // Fetch the file from static folder
+            const url = `/antennas/${filename}`;
+            console.log(`[loadStaticAntennas] Fetching: ${url}`);
+            const response = await fetch(url);
+            if (!response.ok) {
+                console.warn(`[loadStaticAntennas] Failed to fetch ${filename}: ${response.status} ${response.statusText}`);
+                continue;
+            }
+            // Convert to File object for parser
+            const blob = await response.blob();
+            const file = new File([blob], filename, { type: 'text/plain' });
+            console.log(`[loadStaticAntennas] Parsing ${filename}...`);
+            // Parse the MSI file
+            const antenna = await parseMSIFile(file);
+            antenna.sourcePath = `static/antennas/${filename}`;
+            antennas.push(antenna);
+            console.log(`[loadStaticAntennas] ✓ Loaded: ${antenna.name} (${antenna.frequency} MHz, tilt: ${antenna.tilt}°)`);
+        }
+        catch (error) {
+            console.error(`[loadStaticAntennas] Error parsing ${filename}:`, error);
+        }
+    }
+    console.log(`[loadStaticAntennas] Completed. Loaded ${antennas.length}/${STATIC_ANTENNA_FILES.length} antennas`);
+    return antennas;
+}
+/**
+ * Load static antennas and save to database
+ */
+export async function importStaticAntennas() {
+    try {
+        console.log('[importStaticAntennas] Starting import process...');
+        const antennas = await loadStaticAntennas();
+        if (antennas.length === 0) {
+            console.error('[importStaticAntennas] No antennas were successfully loaded');
+            return {
+                success: false,
+                count: 0,
+                error: 'No antennas were successfully loaded'
+            };
+        }
+        console.log(`[importStaticAntennas] Saving ${antennas.length} antennas to database...`);
+        await saveAntennas(antennas);
+        console.log(`[importStaticAntennas] ✓ Successfully saved ${antennas.length} antennas to database`);
+        return {
+            success: true,
+            count: antennas.length
+        };
+    }
+    catch (error) {
+        console.error('[importStaticAntennas] Failed to import static antennas:', error);
+        return {
+            success: false,
+            count: 0,
+            error: error instanceof Error ? error.message : 'Unknown error'
+        };
+    }
+}

package/dist/apps/site-check/SiteCheck.svelte

@@ -93,12 +93,10 @@
 	// Derive chart data from tree selection
 	let filteredData = $derived.by(() => {
 		if (!treeStore) return [];
-		const storeValue = $treeStore;
-		if (!storeValue) return [];
-		const filtered = filterChartData(rawData, storeValue.state.checkedPaths);
+		const filtered = filterChartData(rawData, treeStore.state.checkedPaths);
 		log('🔍 Filtered Data:', {
 			totalRaw: rawData.length,
-			checkedPaths: Array.from(storeValue.state.checkedPaths),
+			checkedPaths: Array.from(treeStore.state.checkedPaths),
 			filteredCount: filtered.length,
 			cells: Array.from(new Set(filtered.map(r => r.cellName)))
 		});
@@ -210,7 +208,7 @@
 					{colorDimension}
 					{singleRootSelect}
 					{singleLevel1Select}
-					treeStore={$treeStore}
+					{treeStore}
 					{showGroupingSelector}
 					{onSearch}
 					{searchPlaceholder}
@@ -223,7 +221,7 @@
 				<!-- Tree View -->
 				<div class="flex-grow-1" style="min-height: 0; overflow: hidden;">
 					{#if treeStore}
-						<TreeView store={$treeStore!} showControls={true} showIndeterminate={true} height="100%" />
+						<TreeView store={treeStore} showControls={true} showIndeterminate={true} height="100%" />
 					{/if}
 				</div>
 			</div>

package/dist/core/Charts/ChartCard.svelte

@@ -26,6 +26,8 @@
 		runtimeShowMarkers?: boolean; // Runtime control for showing markers (default: true)
 		runtimeShowLegend?: boolean; // Runtime control for showing legend (default: true)
 		runtimeHoverMode?: HoverMode; // Runtime override for hover mode from global controls
+		renderDelay?: number; // Delay in ms before rendering (for staggered loading)
+		lazyRender?: boolean; // Enable Intersection Observer-based lazy rendering
 		onchartcontextmenu?: (detail: {
 			chart: ChartModel;
 			sectionId?: string;
@@ -34,12 +36,13 @@
 		}) => void;
 	}
 
-	let { chart, processedData, markers, plotlyLayout, enableAdaptation = true, sectionId, sectionMovingAverage, layoutMovingAverage, layoutHoverMode, layoutColoredHover = true, runtimeMAOverride, runtimeShowOriginal, runtimeShowMarkers = true, runtimeShowLegend = true, runtimeHoverMode, onchartcontextmenu }: Props = $props();
+	let { chart, processedData, markers, plotlyLayout, enableAdaptation = true, sectionId, sectionMovingAverage, layoutMovingAverage, layoutHoverMode, layoutColoredHover = true, runtimeMAOverride, runtimeShowOriginal, runtimeShowMarkers = true, runtimeShowLegend = true, runtimeHoverMode, renderDelay = 0, lazyRender = false, onchartcontextmenu }: Props = $props();
 
 	// Chart container div and state
 	let chartDiv: HTMLElement;
 	let containerSize = $state<ContainerSize>({ width: 0, height: 0 });
 	let chartInitialized = $state(false); // Track if chart has been created
+	let isVisible = $state(!lazyRender); // For lazy rendering: start visible if not lazy
 	let isHealthy = $state(checkHealth('charts'));
 
 	function handleContextMenu(event: MouseEvent) {
@@ -270,11 +273,12 @@
 	}
 
 	onMount(() => {
-
 		log('📈 ChartCard mounted', {
 			chartTitle: chart.title,
 			leftKPIs: chart.yLeft.length,
-			rightKPIs: chart.yRight.length
+			rightKPIs: chart.yRight.length,
+			renderDelay,
+			lazyRender
 		});
 
 		// Initial container size measurement
@@ -282,17 +286,50 @@
 			const rect = chartDiv.getBoundingClientRect();
 			containerSize.width = rect.width;
 			containerSize.height = rect.height;
-			
-			log('📐 Initial container size', {
-				chartTitle: chart.title,
-				width: rect.width,
-				height: rect.height
-			});
 		}
-		if(!isHealthy){
+		
+		if (!isHealthy) {
 			return;
 		}
-		renderChart();
+
+		// Intersection Observer for lazy rendering
+		let intersectionObserver: IntersectionObserver | null = null;
+		
+		const doRender = () => {
+			if (renderDelay > 0) {
+				// Staggered rendering: delay based on chart index
+				setTimeout(() => {
+					renderChart();
+				}, renderDelay);
+			} else {
+				renderChart();
+			}
+		};
+
+		if (lazyRender && chartDiv) {
+			// Lazy rendering: only render when chart enters viewport
+			intersectionObserver = new IntersectionObserver(
+				(entries) => {
+					const [entry] = entries;
+					if (entry.isIntersecting && !chartInitialized) {
+						log('👁️ Chart entering viewport', { chartTitle: chart.title });
+						isVisible = true;
+						doRender();
+						// Disconnect after first render - chart stays rendered
+						intersectionObserver?.disconnect();
+					}
+				},
+				{
+					// Render 200px before entering viewport for smooth experience
+					rootMargin: '200px',
+					threshold: 0
+				}
+			);
+			intersectionObserver.observe(chartDiv);
+		} else {
+			// Immediate or staggered rendering (no lazy)
+			doRender();
+		}
 		
 		// Set up ResizeObserver with debouncing to prevent excessive re-renders
 		if (chartDiv && window.ResizeObserver) {
@@ -330,12 +367,13 @@
 			
 			resizeObserver.observe(chartDiv);
 			
-			// Clean up observer on component destroy
+			// Clean up observers on component destroy
 			return () => {
 				if (resizeTimeout) {
 					clearTimeout(resizeTimeout);
 				}
 				resizeObserver.disconnect();
+				intersectionObserver?.disconnect();
 				
 				// Clean up Plotly chart
 				if (chartDiv && chartInitialized) {
@@ -344,6 +382,15 @@
 				}
 			};
 		}
+		
+		// If no ResizeObserver, still clean up intersection observer
+		return () => {
+			intersectionObserver?.disconnect();
+			if (chartDiv && chartInitialized) {
+				Plotly.purge(chartDiv);
+				chartInitialized = false;
+			}
+		};
 	});
 	
 	// React to prop changes - debounce re-renders for better performance
@@ -368,9 +415,19 @@
 </script>
 
 <div class="chart-card" role="group" oncontextmenu={handleContextMenu}>
+	{#if !isVisible || !chartInitialized}
+		<!-- Loading placeholder for lazy/staggered rendering -->
+		<div class="chart-placeholder">
+			<div class="placeholder-content">
+				<div class="placeholder-spinner"></div>
+				<span class="placeholder-text">{chart.title}</span>
+			</div>
+		</div>
+	{/if}
 	<div
 		bind:this={chartDiv}
 		class="chart-container"
+		class:hidden={!isVisible}
 	></div>
 </div>
 
@@ -387,6 +444,7 @@
 		overflow: hidden; /* Prevent content overflow */
 		box-sizing: border-box; /* Include padding in size calculations */
 		contain: layout style paint; /* Browser optimization: isolate rendering from rest of page */
+		position: relative; /* For placeholder positioning */
 	}
 
 	.chart-card:hover {
@@ -402,4 +460,56 @@
 		box-sizing: border-box; /* Include padding in size calculations */
 		overflow: hidden; /* Prevent Plotly overflow */
 	}
+
+	.chart-container.hidden {
+		visibility: hidden;
+		position: absolute;
+	}
+
+	/* Loading placeholder styles */
+	.chart-placeholder {
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
+		z-index: 1;
+	}
+
+	.placeholder-content {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 0.75rem;
+		color: #6c757d;
+	}
+
+	.placeholder-spinner {
+		width: 24px;
+		height: 24px;
+		border: 2px solid #dee2e6;
+		border-top-color: #007bff;
+		border-radius: 50%;
+		animation: spin 0.8s linear infinite;
+	}
+
+	.placeholder-text {
+		font-size: 0.75rem;
+		font-weight: 500;
+		text-align: center;
+		max-width: 80%;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	@keyframes spin {
+		to {
+			transform: rotate(360deg);
+		}
+	}
 </style>

package/dist/core/Charts/ChartCard.svelte.d.ts

@@ -16,6 +16,8 @@ interface Props {
     runtimeShowMarkers?: boolean;
     runtimeShowLegend?: boolean;
     runtimeHoverMode?: HoverMode;
+    renderDelay?: number;
+    lazyRender?: boolean;
     onchartcontextmenu?: (detail: {
         chart: ChartModel;
         sectionId?: string;

package/dist/core/Charts/ChartComponent.svelte

@@ -319,7 +319,7 @@
 </script>
 
 <!-- Reusable chart grid snippet -->
-{#snippet chartGrid(section: Section)}
+{#snippet chartGrid(section: Section, enableLazyRender: boolean = false)}
 	{@const gridConfig = getGridConfig(section.grid)}
 	<div
 		class="chart-grid"
@@ -327,7 +327,7 @@
 		style:grid-template-columns={`repeat(${gridConfig.columns}, minmax(0, 1fr))`}
 		style:grid-template-rows={`repeat(${gridConfig.rows}, minmax(0, 1fr))`}
 	>
-		{#each section.charts as chart}
+		{#each section.charts as chart, chartIndex}
 			<div class="chart-slot">
 				<ChartCard
 					{chart}
@@ -344,6 +344,8 @@
 					runtimeShowMarkers={globalControls.markers?.enabled}
 					runtimeShowLegend={globalControls.legend?.enabled}
 					runtimeHoverMode={globalControls.hoverMode?.mode}
+					renderDelay={chartIndex * 50}
+					lazyRender={enableLazyRender}
 					onchartcontextmenu={(detail) => handleChartContextMenu(detail, section)}
 				/>
 			</div>
@@ -395,8 +397,8 @@
 						class="tab-section {section.id === activeTabId ? 'active' : 'hidden'}"
 						data-section-id="{section.id}"
 					>
-						<!-- Chart Grid -->
-						{@render chartGrid(section)}
+						<!-- Chart Grid - staggered rendering only, no lazy since tabs handle visibility -->
+						{@render chartGrid(section, false)}
 					</div>
 				{/each}
 			</div>
@@ -427,8 +429,8 @@
 			<div class="scrollspy-content" bind:this={scrollspyContent}>
 				{#each layout.sections as section}
 					<div class="section-content" id="{section.id}">
-							<!-- Chart Grid -->
-						{@render chartGrid(section)}
+							<!-- Chart Grid - lazy + staggered rendering for scrollspy -->
+						{@render chartGrid(section, true)}
 					</div>
 				{/each}
 			</div>

package/dist/core/CoverageMap/ai/AITools.d.ts

@@ -0,0 +1,117 @@
+/**
+ * AI Integration Layer - Tool-Callable Functions
+ *
+ * This module provides functions designed to be called by AI assistants
+ * (e.g., ChatGPT) for coverage analysis and recommendations.
+ *
+ * Design principles:
+ * - Functions are stateless and pure where possible
+ * - Inputs and outputs are JSON-serializable
+ * - Each function has clear purpose and documentation
+ * - Error handling returns structured error objects
+ *
+ * Phase 2 Implementation Note:
+ * These functions will be exposed via a tool registry that ChatGPT
+ * can call through function calling / tool use APIs.
+ */
+import type { CoverageResult, AIRecommendation, AIToolFunction } from '../types';
+/**
+ * Analyze coverage quality and generate recommendations
+ *
+ * This function takes coverage calculation results and generates
+ * structured analysis suitable for AI interpretation.
+ *
+ * In Phase 2, ChatGPT will call this with coverage data and receive
+ * structured metrics that it can analyze and explain in natural language.
+ *
+ * @param result - Coverage calculation result
+ * @returns Structured analysis data
+ *
+ * @example
+ * // AI will call:
+ * const analysis = analyzeCoverageQuality(coverageResult);
+ *
+ * // AI receives:
+ * {
+ *   overallQuality: "good",
+ *   coveragePercent: 78.5,
+ *   avgSignal: -82.3,
+ *   issues: ["excessive_range", "weak_avg_signal"],
+ *   metrics: { ... }
+ * }
+ *
+ * // AI interprets and responds:
+ * "Your coverage is good overall at 78.5%. However, I notice two issues:
+ *  1. Excessive range detected - consider adding downtilt to reduce interference
+ *  2. Average signal is weak at -82.3 dBm - most users will experience medium throughput"
+ */
+export declare function analyzeCoverageQuality(result: CoverageResult): {
+    overallQuality: 'excellent' | 'good' | 'fair' | 'poor';
+    coveragePercent: number;
+    avgSignal: number;
+    maxRange: number;
+    issues: string[];
+    metrics: Record<string, number>;
+    sectorBreakdown: any[];
+};
+/**
+ * Generate optimization suggestions
+ *
+ * Based on coverage analysis, generates specific parameter adjustment
+ * recommendations that can be presented to the user.
+ *
+ * In Phase 2, AI will use this to generate specific, actionable recommendations.
+ *
+ * @param result - Coverage result
+ * @returns Array of recommendations
+ */
+export declare function generateOptimizationSuggestions(result: CoverageResult): AIRecommendation[];
+/**
+ * Compare two coverage scenarios
+ *
+ * Useful for before/after analysis when user changes parameters.
+ *
+ * @param before - Coverage before changes
+ * @param after - Coverage after changes
+ * @returns Comparison analysis
+ */
+export declare function compareCoverageScenarios(before: CoverageResult, after: CoverageResult): {
+    coverageChange: number;
+    signalChange: number;
+    rangeChange: number;
+    improvements: string[];
+    degradations: string[];
+    summary: string;
+};
+/**
+ * Extract key metrics for AI analysis
+ *
+ * Flattens coverage result into simple key-value pairs
+ * that are easy for AI to interpret.
+ *
+ * @param result - Coverage result
+ * @returns Flat metrics object
+ */
+export declare function extractAIMetrics(result: CoverageResult): Record<string, number | string>;
+/**
+ * Registry of all AI-callable tools
+ *
+ * In Phase 2, this will be used to expose functions to ChatGPT.
+ * Each entry describes the function, its parameters, and its purpose.
+ */
+export declare const AI_TOOLS: AIToolFunction[];
+/**
+ * Get AI tool by name
+ *
+ * @param name - Tool name
+ * @returns Tool function or undefined
+ */
+export declare function getAITool(name: string): AIToolFunction | undefined;
+/**
+ * Execute AI tool by name
+ *
+ * @param name - Tool name
+ * @param params - Tool parameters
+ * @returns Tool result
+ */
+export declare function executeAITool(name: string, params: any): Promise<any>;