@smartnet360/svelte-components 0.0.102 → 0.0.104

package/dist/core/Charts/ChartCard.svelte

@@ -7,7 +7,6 @@
 	import { createTimeSeriesTraceWithMA, getYAxisTitle, createDefaultPlotlyLayout } from './data-utils.js';
 	import { adaptPlotlyLayout, addMarkersToLayout, type ContainerSize } from './adapt.js';
 	import { getKPIValues, type ProcessedChartData } from './data-processor.js';
-	import { log } from '../logger';
 	import { checkHealth, getMessage } from '../FeatureRegistry';
 
 	interface Props {
@@ -26,6 +25,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 +35,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) {
@@ -241,22 +243,9 @@
 		// Use Plotly.react() for updates (preserves zoom/pan) or newPlot for initial render
 		if (chartInitialized) {
 			// Update existing chart - much faster, preserves user interactions
-			log('🔄 Updating chart with Plotly.react', { 
-				chartTitle: chart.title,
-				hoverMode: effectiveHoverMode,
-				layoutHoverMode: finalLayout.hovermode
-			});
 			Plotly.react(chartDiv, traces, finalLayout, config);
 		} else {
 			// Initial chart creation
-			log('📊 Creating new chart with Plotly.newPlot', {
-				chartTitle: chart.title,
-				traces: traces.length,
-				leftKPIs: chart.yLeft.length,
-				rightKPIs: chart.yRight.length,
-				hoverMode: effectiveHoverMode,
-				layoutHoverMode: finalLayout.hovermode
-			});
 			Plotly.newPlot(chartDiv, traces, finalLayout, config);
 			chartInitialized = true;
 		}
@@ -270,29 +259,54 @@
 	}
 
 	onMount(() => {
-
-		log('📈 ChartCard mounted', {
-			chartTitle: chart.title,
-			leftKPIs: chart.yLeft.length,
-			rightKPIs: chart.yRight.length
-		});
-
 		// Initial container size measurement
 		if (chartDiv) {
 			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) {
+						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 +344,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 +359,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 +392,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 +421,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 +437,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

@@ -6,7 +6,6 @@
 	import ChartCard from './ChartCard.svelte';
 	import GlobalControls from './GlobalControls.svelte';
 	import { getPreprocessedData, type ProcessedChartData } from './data-processor.js';
-	import { log } from '../logger';
 	import { checkHealth, getMessage } from '../FeatureRegistry';
 
 	interface Props {
@@ -58,18 +57,6 @@
 
 	let { layout, data, mode, markers, plotlyLayout, enableAdaptation = true, showGlobalControls = true, persistSettings = false }: Props = $props();
 	let isHealthy = $state(checkHealth('charts'));
-	// Log component initialization
-	$effect(() => {
-		log('📊 ChartComponent initialized', {
-			mode,
-			dataRows: data.length,
-			sections: layout.sections.length,
-			totalCharts: layout.sections.reduce((sum, s) => sum + s.charts.length, 0),
-			enableAdaptation,
-			showGlobalControls,
-			layoutHoverMode: layout.hoverMode
-		});
-	});
 	
 	// Preprocess raw data once - automatically memoized by Svelte's $derived
 	// This extracts all KPI values and timestamps, cached until data or layout changes
@@ -98,13 +85,6 @@
 	
 	// Handler for global controls updates
 	function handleControlsUpdate(updatedControls: GlobalChartControls) {
-		log('🎛️ Global controls updated', {
-			movingAverageEnabled: updatedControls.movingAverage?.enabled,
-			windowOverride: updatedControls.movingAverage?.windowOverride,
-			markersEnabled: updatedControls.markers?.enabled,
-			legendEnabled: updatedControls.legend?.enabled,
-			hoverMode: updatedControls.hoverMode?.mode
-		});
 		globalControls = updatedControls;
 	}
 	
@@ -195,17 +175,12 @@
 
 	function zoomSelectedChart() {
 		if (contextMenu.chart && contextMenu.section) {
-			log('🔍 Zooming chart', {
-				chartTitle: contextMenu.chart.title,
-				sectionId: contextMenu.section.id
-			});
 			zoomedChart = { chart: contextMenu.chart, section: contextMenu.section };
 		}
 		closeContextMenu();
 	}
 
 	function exitZoom() {
-		log('🔍 Exiting zoom mode');
 		zoomedChart = null;
 		closeContextMenu();
 	}
@@ -319,7 +294,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 +302,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 +319,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 +372,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 +404,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/Charts/data-processor.js

@@ -1,4 +1,3 @@
-import { log } from '../logger';
 /**
  * Extract all unique KPI rawNames from a layout configuration
  * This determines which columns we need to extract from raw data
@@ -17,10 +16,6 @@ export function extractKPINames(layout) {
             }
         }
     }
-    log('📋 KPI names extracted', {
-        totalKPIs: kpiNames.size,
-        kpiNames: Array.from(kpiNames)
-    });
     return kpiNames;
 }
 /**
@@ -33,11 +28,6 @@ export function extractKPINames(layout) {
  * @returns Preprocessed data ready for chart rendering
  */
 export function preprocessChartData(data, layout, timestampField = 'TIMESTAMP') {
-    log('🔄 Preprocessing chart data', {
-        rawDataRows: data.length,
-        sections: layout.sections.length,
-        timestampField
-    });
     // Extract all unique KPI names we need to process
     const kpiNames = extractKPINames(layout);
     // Initialize the result map
@@ -53,17 +43,11 @@ export function preprocessChartData(data, layout, timestampField = 'TIMESTAMP')
             .filter(val => !isNaN(val)); // Remove invalid values
         kpiValues.set(kpiName, values);
         if (values.length === 0) {
-            log('⚠️ No valid values found for KPI', { kpiName });
+            console.warn(`[Charts] No valid values found for KPI: ${kpiName}`);
         }
     }
     // Extract timestamps once
     const timestamps = data.map(row => row[timestampField]);
-    log('✅ Data preprocessing complete', {
-        processedKPIs: kpiValues.size,
-        timestampCount: timestamps.length,
-        sampleKPI: kpiValues.keys().next().value,
-        sampleValues: kpiValues.values().next().value?.slice(0, 3)
-    });
     return {
         kpiValues,
         timestamps,
@@ -91,11 +75,9 @@ export function getPreprocessedData(data, layout, timestampField = 'TIMESTAMP')
     if (cached) {
         // Verify cache is still valid (data reference matches)
         if (cached._rawDataRef === data) {
-            log('💾 Using cached preprocessed data');
             return cached;
         }
     }
-    log('🔄 Cache miss - preprocessing data');
     // Cache miss or invalid - compute and cache
     const processed = preprocessChartData(data, layout, timestampField);
     preprocessCache.set(data, processed);

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>;